⬆️ Upgrade UI components to Svelte 5 (bits-ui)

src/ui/context-menu/context-menu-checkbox-item.svelte

@@ -6,9 +6,15 @@
   type $$Props = ContextMenuPrimitive.CheckboxItemProps;
   type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
 
-  let className: $$Props['class'] = undefined;
+  
-  export { className as class };
+  interface Props {
-  export let checked: $$Props['checked'] = undefined;
+    class?: $$Props['class'];
+    checked?: $$Props['checked'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, checked = $bindable(undefined), children, ...rest }: Props = $props();
 </script>
 
 <ContextMenuPrimitive.CheckboxItem
@@ -17,7 +23,7 @@
     'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     className
   )}
-  {...$$restProps}
+  {...rest}
   on:click
   on:keydown
   on:focusin
@@ -31,5 +37,5 @@
       <CheckIcon class="h-4 w-4" />
     </ContextMenuPrimitive.CheckboxIndicator>
   </span>
-  <slot />
+  {@render children?.()}
 </ContextMenuPrimitive.CheckboxItem>

src/ui/context-menu/context-menu-content.svelte

@@ -5,10 +5,22 @@
 
   type $$Props = ContextMenuPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export let transition: $$Props['transition'] = flyAndScale;
+    class?: $$Props['class'];
-  export let transitionConfig: $$Props['transitionConfig'] = undefined;
+    transition?: $$Props['transition'];
-  export { className as class };
+    transitionConfig?: $$Props['transitionConfig'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    transition = flyAndScale,
+    transitionConfig = undefined,
+    children,
+    ...rest
+  }: Props = $props();
+  
 </script>
 
 <ContextMenuPrimitive.Content
@@ -18,8 +30,8 @@
     'bg-white dark:bg-neutral-900 text-popover-foreground z-50 min-w-[8rem] rounded-md border border-neutral-200 dark:border-neutral-800 p-1 shadow-md focus:outline-none',
     className
   )}
-  {...$$restProps}
+  {...rest}
   on:keydown
 >
-  <slot />
+  {@render children?.()}
 </ContextMenuPrimitive.Content>

src/ui/context-menu/context-menu-item.svelte

@@ -7,9 +7,15 @@
   };
   type $$Events = ContextMenuPrimitive.ItemEvents;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export let inset: $$Props['inset'] = undefined;
+    class?: $$Props['class'];
-  export { className as class };
+    inset?: $$Props['inset'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
+  
 </script>
 
 <ContextMenuPrimitive.Item
@@ -18,7 +24,7 @@
     inset && 'pl-8',
     className
   )}
-  {...$$restProps}
+  {...rest}
   on:click
   on:keydown
   on:focusin
@@ -27,5 +33,5 @@
   on:pointerleave
   on:pointermove
 >
-  <slot />
+  {@render children?.()}
 </ContextMenuPrimitive.Item>

src/ui/context-menu/context-menu-label.svelte

@@ -6,14 +6,20 @@
     inset?: boolean;
   };
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export let inset: $$Props['inset'] = undefined;
+    class?: $$Props['class'];
-  export { className as class };
+    inset?: $$Props['inset'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
+  
 </script>
 
 <ContextMenuPrimitive.Label
   class={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </ContextMenuPrimitive.Label>

src/ui/dialog/dialog-content.svelte

@@ -8,12 +8,24 @@
 
   type $$Props = DialogPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export let transition: $$Props['transition'] = flyAndScale;
+    class?: $$Props['class'];
-  export let transitionConfig: $$Props['transitionConfig'] = {
+    transition?: $$Props['transition'];
+    transitionConfig?: $$Props['transitionConfig'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    transition = flyAndScale,
+    transitionConfig = {
     duration: 200
-  };
+  },
-  export { className as class };
+    children,
+    ...rest
+  }: Props = $props();
+  
 </script>
 
 <Dialog.Portal>
@@ -25,9 +37,9 @@
       'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border border-neutral-200 dark:border-neutral-800 dark:bg-neutral-900 bg-white p-6 shadow-lg sm:rounded-lg md:w-full',
       className
     )}
-    {...$$restProps}
+    {...rest}
   >
-    <slot />
+    {@render children?.()}
     <DialogPrimitive.Close
       class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
     >

src/ui/dialog/dialog-description.svelte

@@ -4,10 +4,16 @@
 
   type $$Props = DialogPrimitive.DescriptionProps;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export { className as class };
+    class?: $$Props['class'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+  
 </script>
 
-<DialogPrimitive.Description class={cn('text-sm opacity-70 mb-2', className)} {...$$restProps}>
+<DialogPrimitive.Description class={cn('text-sm opacity-70 mb-2', className)} {...rest}>
-  <slot />
+  {@render children?.()}
 </DialogPrimitive.Description>

src/ui/dialog/dialog-footer.svelte

@@ -4,13 +4,19 @@
 
   type $$Props = HTMLAttributes<HTMLDivElement>;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export { className as class };
+    class?: $$Props['class'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+  
 </script>
 
 <div
   class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </div>

src/ui/dialog/dialog-header.svelte

@@ -4,10 +4,16 @@
 
   type $$Props = HTMLAttributes<HTMLDivElement>;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export { className as class };
+    class?: $$Props['class'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+  
 </script>
 
-<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...rest}>
-  <slot />
+  {@render children?.()}
 </div>

src/ui/dialog/dialog-overlay.svelte

@@ -5,12 +5,17 @@
 
   type $$Props = DialogPrimitive.OverlayProps;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export let transition: $$Props['transition'] = fade;
+    class?: $$Props['class'];
-  export let transitionConfig: $$Props['transitionConfig'] = {
+    transition?: $$Props['transition'];
+    transitionConfig?: $$Props['transitionConfig'];
+    [key: string]: any
+  }
+
+  let { class: className = undefined, transition = fade, transitionConfig = {
     duration: 150
-  };
+  }, ...rest }: Props = $props();
-  export { className as class };
+  
 </script>
 
 <DialogPrimitive.Overlay
@@ -20,5 +25,5 @@
     'fixed inset-0 z-50 bg-neutral-100/80 dark:bg-neutral-900/80 backdrop-blur-sm',
     className
   )}
-  {...$$restProps}
+  {...rest}
 />

src/ui/dialog/dialog-portal.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import { Dialog as DialogPrimitive } from 'bits-ui';
+  interface Props {
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { children, ...rest }: Props = $props();
   type $$Props = DialogPrimitive.PortalProps;
 </script>
 
-<DialogPrimitive.Portal {...$$restProps}>
+<DialogPrimitive.Portal {...rest}>
-  <slot />
+  {@render children?.()}
 </DialogPrimitive.Portal>

src/ui/dialog/dialog-title.svelte

@@ -4,13 +4,19 @@
 
   type $$Props = DialogPrimitive.TitleProps;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export { className as class };
+    class?: $$Props['class'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+  
 </script>
 
 <DialogPrimitive.Title
   class={cn('text-lg font-semibold leading-none tracking-tight', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </DialogPrimitive.Title>

src/ui/popover/popover-content.svelte

@@ -6,12 +6,26 @@
 
   type $$Props = PopoverPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export let transition: $$Props['transition'] = flyAndScale;
+    class?: $$Props['class'];
-  export let transitionConfig: $$Props['transitionConfig'] = undefined;
+    transition?: $$Props['transition'];
-  export let align: $$Props['align'] = 'center';
+    transitionConfig?: $$Props['transitionConfig'];
-  export let sideOffset: $$Props['sideOffset'] = 4;
+    align?: $$Props['align'];
-  export { className as class };
+    sideOffset?: $$Props['sideOffset'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let {
+    class: className = undefined,
+    transition = flyAndScale,
+    transitionConfig = undefined,
+    align = 'center',
+    sideOffset = 4,
+    children,
+    ...rest
+  }: Props = $props();
+  
 </script>
 
 <PopoverPrimitive.Content
@@ -19,11 +33,11 @@
   {transitionConfig}
   {align}
   {sideOffset}
-  {...$$restProps}
+  {...rest}
   class={cn(
     'z-50 w-auto max-w-96 rounded-md border border-neutral-200 bg-white p-3 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-900',
     className
   )}
 >
-  <slot />
+  {@render children?.()}
 </PopoverPrimitive.Content>

src/ui/tabs/tabs-content.svelte

@@ -4,9 +4,15 @@
 
   type $$Props = TabsPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export let value: $$Props['value'];
+    class?: $$Props['class'];
-  export { className as class };
+    value: $$Props['value'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, value, children, ...rest }: Props = $props();
+  
 </script>
 
 <TabsPrimitive.Content
@@ -15,7 +21,7 @@
     className
   )}
   {value}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </TabsPrimitive.Content>

src/ui/tabs/tabs-list.svelte

@@ -4,13 +4,19 @@
 
   type $$Props = TabsPrimitive.ListProps;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export { className as class };
+    class?: $$Props['class'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, children, ...rest }: Props = $props();
+  
 </script>
 
 <TabsPrimitive.List
   class={cn('mb-2 flex flex-wrap items-center justify-center space-x-1 rounded-lg', className)}
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </TabsPrimitive.List>

src/ui/tabs/tabs-trigger.svelte

@@ -5,9 +5,15 @@
   type $$Props = TabsPrimitive.TriggerProps;
   type $$Events = TabsPrimitive.TriggerEvents;
 
-  let className: $$Props['class'] = undefined;
+  interface Props {
-  export let value: $$Props['value'];
+    class?: $$Props['class'];
-  export { className as class };
+    value: $$Props['value'];
+    children?: import('svelte').Snippet;
+    [key: string]: any
+  }
+
+  let { class: className = undefined, value, children, ...rest }: Props = $props();
+  
 </script>
 
 <TabsPrimitive.Trigger
@@ -16,10 +22,10 @@
     className
   )}
   {value}
-  {...$$restProps}
+  {...rest}
   on:click
   on:keydown
   on:focus
 >
-  <slot />
+  {@render children?.()}
 </TabsPrimitive.Trigger>