From 550ebc359452f950adf3ca796a75800de3b99b83 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Fri, 31 Jan 2025 14:24:30 +0000
Subject: [PATCH] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Upgrade=20UI=20components?=
 =?UTF-8?q?=20to=20Svelte=205=20(bits-ui)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../context-menu-checkbox-item.svelte         | 16 ++++++----
 .../context-menu/context-menu-content.svelte  | 24 +++++++++++----
 src/ui/context-menu/context-menu-item.svelte  | 16 ++++++----
 src/ui/context-menu/context-menu-label.svelte | 16 ++++++----
 src/ui/dialog/dialog-content.svelte           | 26 +++++++++++-----
 src/ui/dialog/dialog-description.svelte       | 14 ++++++---
 src/ui/dialog/dialog-footer.svelte            | 14 ++++++---
 src/ui/dialog/dialog-header.svelte            | 14 ++++++---
 src/ui/dialog/dialog-overlay.svelte           | 17 +++++++----
 src/ui/dialog/dialog-portal.svelte            | 10 +++++--
 src/ui/dialog/dialog-title.svelte             | 14 ++++++---
 src/ui/popover/popover-content.svelte         | 30 ++++++++++++++-----
 src/ui/tabs/tabs-content.svelte               | 16 ++++++----
 src/ui/tabs/tabs-list.svelte                  | 14 ++++++---
 src/ui/tabs/tabs-trigger.svelte               | 16 ++++++----
 15 files changed, 183 insertions(+), 74 deletions(-)

diff --git a/src/ui/context-menu/context-menu-checkbox-item.svelte b/src/ui/context-menu/context-menu-checkbox-item.svelte
index 60e90fc..0189250 100644
--- a/src/ui/context-menu/context-menu-checkbox-item.svelte
+++ b/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 };
-  export let checked: $$Props['checked'] = undefined;
+  
+  interface Props {
+    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>
diff --git a/src/ui/context-menu/context-menu-content.svelte b/src/ui/context-menu/context-menu-content.svelte
index 9a992e6..fe95a39 100644
--- a/src/ui/context-menu/context-menu-content.svelte
+++ b/src/ui/context-menu/context-menu-content.svelte
@@ -5,10 +5,22 @@
 
   type $$Props = ContextMenuPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = flyAndScale;
-  export let transitionConfig: $$Props['transitionConfig'] = undefined;
-  export { className as class };
+  interface Props {
+    class?: $$Props['class'];
+    transition?: $$Props['transition'];
+    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>
diff --git a/src/ui/context-menu/context-menu-item.svelte b/src/ui/context-menu/context-menu-item.svelte
index a54eb2e..3b86ddd 100644
--- a/src/ui/context-menu/context-menu-item.svelte
+++ b/src/ui/context-menu/context-menu-item.svelte
@@ -7,9 +7,15 @@
   };
   type $$Events = ContextMenuPrimitive.ItemEvents;
 
-  let className: $$Props['class'] = undefined;
-  export let inset: $$Props['inset'] = undefined;
-  export { className as class };
+  interface Props {
+    class?: $$Props['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>
diff --git a/src/ui/context-menu/context-menu-label.svelte b/src/ui/context-menu/context-menu-label.svelte
index 08bfde7..4dac93b 100644
--- a/src/ui/context-menu/context-menu-label.svelte
+++ b/src/ui/context-menu/context-menu-label.svelte
@@ -6,14 +6,20 @@
     inset?: boolean;
   };
 
-  let className: $$Props['class'] = undefined;
-  export let inset: $$Props['inset'] = undefined;
-  export { className as class };
+  interface Props {
+    class?: $$Props['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>
diff --git a/src/ui/dialog/dialog-content.svelte b/src/ui/dialog/dialog-content.svelte
index 2a83cc4..1cbd0ed 100644
--- a/src/ui/dialog/dialog-content.svelte
+++ b/src/ui/dialog/dialog-content.svelte
@@ -8,12 +8,24 @@
 
   type $$Props = DialogPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = flyAndScale;
-  export let transitionConfig: $$Props['transitionConfig'] = {
+  interface Props {
+    class?: $$Props['class'];
+    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"
     >
diff --git a/src/ui/dialog/dialog-description.svelte b/src/ui/dialog/dialog-description.svelte
index 89cd271..124ed35 100644
--- a/src/ui/dialog/dialog-description.svelte
+++ b/src/ui/dialog/dialog-description.svelte
@@ -4,10 +4,16 @@
 
   type $$Props = DialogPrimitive.DescriptionProps;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  interface Props {
+    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}>
-  <slot />
+<DialogPrimitive.Description class={cn('text-sm opacity-70 mb-2', className)} {...rest}>
+  {@render children?.()}
 </DialogPrimitive.Description>
diff --git a/src/ui/dialog/dialog-footer.svelte b/src/ui/dialog/dialog-footer.svelte
index ee5263f..8058160 100644
--- a/src/ui/dialog/dialog-footer.svelte
+++ b/src/ui/dialog/dialog-footer.svelte
@@ -4,13 +4,19 @@
 
   type $$Props = HTMLAttributes<HTMLDivElement>;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  interface Props {
+    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>
diff --git a/src/ui/dialog/dialog-header.svelte b/src/ui/dialog/dialog-header.svelte
index 2432973..3fe4a1f 100644
--- a/src/ui/dialog/dialog-header.svelte
+++ b/src/ui/dialog/dialog-header.svelte
@@ -4,10 +4,16 @@
 
   type $$Props = HTMLAttributes<HTMLDivElement>;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  interface Props {
+    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}>
-  <slot />
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...rest}>
+  {@render children?.()}
 </div>
diff --git a/src/ui/dialog/dialog-overlay.svelte b/src/ui/dialog/dialog-overlay.svelte
index fb1314f..d1c8a25 100644
--- a/src/ui/dialog/dialog-overlay.svelte
+++ b/src/ui/dialog/dialog-overlay.svelte
@@ -5,12 +5,17 @@
 
   type $$Props = DialogPrimitive.OverlayProps;
 
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = fade;
-  export let transitionConfig: $$Props['transitionConfig'] = {
+  interface Props {
+    class?: $$Props['class'];
+    transition?: $$Props['transition'];
+    transitionConfig?: $$Props['transitionConfig'];
+    [key: string]: any
+  }
+
+  let { class: className = undefined, transition = fade, transitionConfig = {
     duration: 150
-  };
-  export { className as class };
+  }, ...rest }: Props = $props();
+  
 </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}
 />
diff --git a/src/ui/dialog/dialog-portal.svelte b/src/ui/dialog/dialog-portal.svelte
index 45112b7..c0aee7d 100644
--- a/src/ui/dialog/dialog-portal.svelte
+++ b/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}>
-  <slot />
+<DialogPrimitive.Portal {...rest}>
+  {@render children?.()}
 </DialogPrimitive.Portal>
diff --git a/src/ui/dialog/dialog-title.svelte b/src/ui/dialog/dialog-title.svelte
index a4b54aa..e8d2776 100644
--- a/src/ui/dialog/dialog-title.svelte
+++ b/src/ui/dialog/dialog-title.svelte
@@ -4,13 +4,19 @@
 
   type $$Props = DialogPrimitive.TitleProps;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  interface Props {
+    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>
diff --git a/src/ui/popover/popover-content.svelte b/src/ui/popover/popover-content.svelte
index 796ce56..d13c2df 100644
--- a/src/ui/popover/popover-content.svelte
+++ b/src/ui/popover/popover-content.svelte
@@ -6,12 +6,26 @@
 
   type $$Props = PopoverPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
-  export let transition: $$Props['transition'] = flyAndScale;
-  export let transitionConfig: $$Props['transitionConfig'] = undefined;
-  export let align: $$Props['align'] = 'center';
-  export let sideOffset: $$Props['sideOffset'] = 4;
-  export { className as class };
+  interface Props {
+    class?: $$Props['class'];
+    transition?: $$Props['transition'];
+    transitionConfig?: $$Props['transitionConfig'];
+    align?: $$Props['align'];
+    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>
diff --git a/src/ui/tabs/tabs-content.svelte b/src/ui/tabs/tabs-content.svelte
index 59dfe26..86cde58 100644
--- a/src/ui/tabs/tabs-content.svelte
+++ b/src/ui/tabs/tabs-content.svelte
@@ -4,9 +4,15 @@
 
   type $$Props = TabsPrimitive.ContentProps;
 
-  let className: $$Props['class'] = undefined;
-  export let value: $$Props['value'];
-  export { className as class };
+  interface Props {
+    class?: $$Props['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>
diff --git a/src/ui/tabs/tabs-list.svelte b/src/ui/tabs/tabs-list.svelte
index bacbcf4..9165f7d 100644
--- a/src/ui/tabs/tabs-list.svelte
+++ b/src/ui/tabs/tabs-list.svelte
@@ -4,13 +4,19 @@
 
   type $$Props = TabsPrimitive.ListProps;
 
-  let className: $$Props['class'] = undefined;
-  export { className as class };
+  interface Props {
+    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>
diff --git a/src/ui/tabs/tabs-trigger.svelte b/src/ui/tabs/tabs-trigger.svelte
index 9420caf..cdf15d8 100644
--- a/src/ui/tabs/tabs-trigger.svelte
+++ b/src/ui/tabs/tabs-trigger.svelte
@@ -5,9 +5,15 @@
   type $$Props = TabsPrimitive.TriggerProps;
   type $$Events = TabsPrimitive.TriggerEvents;
 
-  let className: $$Props['class'] = undefined;
-  export let value: $$Props['value'];
-  export { className as class };
+  interface Props {
+    class?: $$Props['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>