Finish updating shadcn-svelte

Author: Discusser

components.json

@@ -14,4 +14,4 @@
 	},
 	"typescript": true,
 	"registry": "https://next.shadcn-svelte.com/registry"
-}
+}

src/lib/components/shared/NavBar.svelte

@@ -15,7 +15,7 @@
 				<NavAnchor fuzzy href="/hobbies">Hobbies</NavAnchor>
 			</div>
 			<div class="flex-grow">
-				<Button on:click={toggleMode} class="float-right" variant="outline" size="icon">
+				<Button onclick={toggleMode} class="float-right" variant="outline" size="icon">
 					<IconSun
 						class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
 					/>

src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -2,15 +2,15 @@
 	import { Avatar as AvatarPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AvatarPrimitive.FallbackProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
 </script>
 
 <AvatarPrimitive.Fallback
+	bind:ref
 	class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)}
-	{...$$restProps}
->
-	<slot />
-</AvatarPrimitive.Fallback>
+	{...restProps}
+/>

src/lib/components/ui/avatar/avatar-image.svelte

@@ -2,17 +2,15 @@
 	import { Avatar as AvatarPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AvatarPrimitive.ImageProps;
-
-	let className: $$Props["class"] = undefined;
-	export let src: $$Props["src"] = undefined;
-	export let alt: $$Props["alt"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
 </script>
 
 <AvatarPrimitive.Image
-	{src}
-	{alt}
+	bind:ref
 	class={cn("aspect-square h-full w-full", className)}
-	{...$$restProps}
+	{...restProps}
 />

src/lib/components/ui/avatar/avatar.svelte

@@ -2,17 +2,15 @@
 	import { Avatar as AvatarPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AvatarPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let delayMs: $$Props["delayMs"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
 </script>
 
 <AvatarPrimitive.Root
-	{delayMs}
-	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-	{...$$restProps}
->
-	<slot />
-</AvatarPrimitive.Root>
+	bind:ref
+	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	{...restProps}
+/>

src/lib/components/ui/skeleton/skeleton.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
 </script>
 
-<div class={cn("bg-muted animate-pulse rounded-md", className)} {...$$restProps}></div>
+<div
+	bind:this={ref}
+	class={cn("bg-muted animate-pulse rounded-md", className)}
+	{...restProps}
+></div>

src/lib/components/ui/sonner/sonner.svelte

@@ -2,7 +2,7 @@
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 	import { mode } from "mode-watcher";
 
-	type $$Props = SonnerProps;
+	let restProps: SonnerProps = $props();
 </script>
 
 <Sonner
@@ -16,5 +16,5 @@
 			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
 		},
 	}}
-	{...$$restProps}
+	{...restProps}
 />

src/lib/components/ui/tooltip/index.ts

@@ -3,13 +3,16 @@ import Content from "./tooltip-content.svelte";
 
 const Root = TooltipPrimitive.Root;
 const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
 
 export {
 	Root,
 	Trigger,
 	Content,
+	Provider,
 	//
 	Root as Tooltip,
 	Content as TooltipContent,
 	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
 };

src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -1,28 +1,21 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = TooltipPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		y: 8,
-		duration: 150,
-	};
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		...restProps
+	}: TooltipPrimitive.ContentProps = $props();
 </script>
 
 <TooltipPrimitive.Content
-	{transition}
-	{transitionConfig}
+	bind:ref
 	{sideOffset}
 	class={cn(
-		"bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+		"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
 		className
 	)}
-	{...$$restProps}
->
-	<slot />
-</TooltipPrimitive.Content>
+	{...restProps}
+/>

src/lib/utils.ts

@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));