Initial shadcn-svelte beta migration

Author: WarningImHack3r

package.json

@@ -26,7 +26,7 @@
 		"@vercel/speed-insights": "^1.0.12",
 		"arctic": "^1.9.2",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^0.21.16",
+		"bits-ui": "^1.0.0-next.28",
 		"clsx": "^2.1.1",
 		"eslint": "^9.13.0",
 		"eslint-config-prettier": "^9.1.0",

pnpm-lock.yaml

@@ -1,25 +1,24 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { slide } from "svelte/transition";
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AccordionPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = slide;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 200,
-	};
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
 </script>
 
 <AccordionPrimitive.Content
-	class={cn("overflow-hidden text-sm transition-all", className)}
-	{transition}
-	{transitionConfig}
-	{...$$restProps}
+	bind:ref
+	class={cn(
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+		className
+	)}
+	{...restProps}
 >
 	<div class="pb-4 pt-0">
-		<slot />
+		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

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

@@ -2,13 +2,11 @@
 	import { Accordion as AccordionPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AccordionPrimitive.ItemProps;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
 </script>
 
-<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
-	<slot />
-</AccordionPrimitive.Item>
+<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />

src/lib/components/ui/accordion/accordion-item.svelte

@@ -1,26 +1,29 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
 	import ChevronDown from "lucide-svelte/icons/chevron-down";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = AccordionPrimitive.TriggerProps;
-	type $$Events = AccordionPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
 </script>
 
 <AccordionPrimitive.Header {level} class="flex">
 	<AccordionPrimitive.Trigger
+		bind:ref
 		class={cn(
 			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
 			className
 		)}
-		{...$$restProps}
-		on:click
+		{...restProps}
 	>
-		<slot />
-		<ChevronDown class="h-4 w-4 transition-transform duration-200" />
+		{@render children?.()}
+		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>