From 2ea45109d18ad55c9f9947cc75aa597e1fb254f6 Mon Sep 17 00:00:00 2001
From: David Senoner <seda18@rolmail.net>
Date: Mon, 19 May 2025 15:00:16 +0200
Subject: [PATCH] update shadcn components

---
 .../ui/accordion/accordion-trigger.svelte     |  2 +-
 .../alert-dialog/alert-dialog-content.svelte  |  4 +-
 .../ui/avatar/avatar-fallback.svelte          |  2 +-
 .../components/ui/avatar/avatar-image.svelte  |  6 +--
 src/lib/components/ui/badge/badge.svelte      |  2 +-
 .../ui/breadcrumb/breadcrumb-ellipsis.svelte  |  2 +-
 .../ui/breadcrumb/breadcrumb-separator.svelte |  2 +-
 .../ui/calendar/calendar-next-button.svelte   |  2 +-
 .../ui/calendar/calendar-prev-button.svelte   |  2 +-
 .../components/ui/calendar/calendar.svelte    |  8 +--
 src/lib/components/ui/card/card-title.svelte  |  2 +-
 .../ui/carousel/carousel-next.svelte          |  2 +-
 .../ui/carousel/carousel-previous.svelte      |  2 +-
 .../components/ui/carousel/carousel.svelte    |  2 +-
 src/lib/components/ui/carousel/context.js     |  1 -
 .../components/ui/checkbox/checkbox.svelte    | 10 ++--
 .../ui/command/command-dialog.svelte          |  3 +-
 .../ui/command/command-group.svelte           | 12 ++++-
 .../ui/command/command-input.svelte           |  4 +-
 .../ui/command/command-link-item.svelte       |  2 +-
 .../context-menu-checkbox-item.svelte         | 13 ++---
 .../context-menu/context-menu-content.svelte  | 20 +++----
 .../context-menu-radio-item.svelte            |  2 +-
 .../context-menu-sub-trigger.svelte           |  2 +-
 .../ui/data-table/data-table.svelte.js        | 29 +++++++++-
 .../ui/data-table/flex-render.svelte          | 10 ++--
 .../ui/data-table/render-helpers.js           |  4 --
 .../ui/dialog/dialog-content.svelte           |  6 +--
 .../ui/drawer/drawer-content.svelte           |  4 +-
 .../dropdown-menu-checkbox-item.svelte        | 13 ++---
 .../dropdown-menu-content.svelte              | 28 ++++++----
 .../dropdown-menu/dropdown-menu-label.svelte  |  1 -
 .../dropdown-menu-radio-item.svelte           |  2 +-
 .../dropdown-menu-shortcut.svelte             |  1 -
 .../dropdown-menu-sub-trigger.svelte          |  2 +-
 .../ui/form/form-field-errors.svelte          |  2 +-
 .../ui/hover-card/hover-card-content.svelte   | 23 ++++----
 src/lib/components/ui/index.js                | 15 ++++++
 .../ui/input-otp/input-otp-separator.svelte   |  2 +-
 .../ui/menubar/menubar-checkbox-item.svelte   | 13 ++---
 .../ui/menubar/menubar-content.svelte         | 27 +++++-----
 .../ui/menubar/menubar-radio-item.svelte      |  2 +-
 .../ui/menubar/menubar-sub-trigger.svelte     |  2 +-
 .../ui/pagination/pagination-ellipsis.svelte  |  2 +-
 .../pagination/pagination-next-button.svelte  |  2 +-
 .../pagination/pagination-prev-button.svelte  |  2 +-
 .../ui/popover/popover-content.svelte         |  3 +-
 .../ui/radio-group/radio-group-item.svelte    |  2 +-
 .../range-calendar-next-button.svelte         |  2 +-
 .../range-calendar-prev-button.svelte         |  2 +-
 .../ui/range-calendar/range-calendar.svelte   |  8 +--
 .../ui/resizable/resizable-handle.svelte      |  2 +-
 .../ui/select/select-content.svelte           |  3 +-
 .../components/ui/select/select-item.svelte   |  2 +-
 .../select/select-scroll-down-button.svelte   |  2 +-
 .../ui/select/select-scroll-up-button.svelte  |  2 +-
 .../ui/select/select-trigger.svelte           |  2 +-
 .../components/ui/sidebar/context.svelte.js   | 53 +++++++++++++------
 src/lib/components/ui/slider/slider.svelte    | 29 ++++++++--
 src/lib/components/ui/sonner/sonner.svelte    |  4 +-
 src/lib/components/ui/switch/switch.svelte    |  2 +-
 .../components/ui/table/table-footer.svelte   |  6 +--
 .../components/ui/textarea/textarea.svelte    |  2 +-
 .../ui/toggle-group/toggle-group-item.svelte  |  2 +-
 src/lib/components/ui/toggle/toggle.svelte    | 10 ++--
 65 files changed, 268 insertions(+), 171 deletions(-)
 create mode 100644 src/lib/components/ui/index.js

diff --git a/src/lib/components/ui/accordion/accordion-trigger.svelte b/src/lib/components/ui/accordion/accordion-trigger.svelte
index c919551..027a008 100644
--- a/src/lib/components/ui/accordion/accordion-trigger.svelte
+++ b/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Accordion as AccordionPrimitive } from "bits-ui";
-  import ChevronDown from "lucide-svelte/icons/chevron-down";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, level = 3, children, ...restProps } = $props();
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index e59616b..8f5e3b6 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -3,10 +3,10 @@
   import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
   import { cn } from "$lib/utils.js";
 
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
+  let { ref = $bindable(null), class: className, portalProps, ...restProps } = $props();
 </script>
 
-<AlertDialogPrimitive.Portal>
+<AlertDialogPrimitive.Portal {...portalProps}>
   <AlertDialogOverlay />
   <AlertDialogPrimitive.Content
     bind:ref
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
index 4617d62..3ad4305 100644
--- a/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -7,6 +7,6 @@
 
 <AvatarPrimitive.Fallback
   bind:ref
-  class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+  class={cn("flex size-full items-center justify-center bg-muted", className)}
   {...restProps}
 />
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
index bdca79c..6c2863a 100644
--- a/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -5,8 +5,4 @@
   let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 
-<AvatarPrimitive.Image
-  bind:ref
-  class={cn("aspect-square h-full w-full", className)}
-  {...restProps}
-/>
+<AvatarPrimitive.Image bind:ref class={cn("aspect-square size-full", className)} {...restProps} />
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
index 633da41..a039016 100644
--- a/src/lib/components/ui/badge/badge.svelte
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -36,7 +36,7 @@
   this={href ? "a" : "span"}
   bind:this={ref}
   {href}
-  class={cn(badgeVariants({ variant, className }))}
+  class={cn(badgeVariants({ variant }), className)}
   {...restProps}
 >
   {@render children?.()}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
index 48232fb..630c12d 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Ellipsis from "lucide-svelte/icons/ellipsis";
+  import Ellipsis from "@lucide/svelte/icons/ellipsis";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, ...restProps } = $props();
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
index ecfa92c..52ca6cb 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ChevronRight from "lucide-svelte/icons/chevron-right";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, children, ...restProps } = $props();
diff --git a/src/lib/components/ui/calendar/calendar-next-button.svelte b/src/lib/components/ui/calendar/calendar-next-button.svelte
index d1225ae..247706f 100644
--- a/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Calendar as CalendarPrimitive } from "bits-ui";
-  import ChevronRight from "lucide-svelte/icons/chevron-right";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import { buttonVariants } from "$lib/components/ui/button/index.js";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/calendar/calendar-prev-button.svelte b/src/lib/components/ui/calendar/calendar-prev-button.svelte
index 92a442b..f849b7e 100644
--- a/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Calendar as CalendarPrimitive } from "bits-ui";
-  import ChevronLeft from "lucide-svelte/icons/chevron-left";
+  import ChevronLeft from "@lucide/svelte/icons/chevron-left";
   import { buttonVariants } from "$lib/components/ui/button/index.js";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/calendar/calendar.svelte b/src/lib/components/ui/calendar/calendar.svelte
index 72464a9..bb65dcb 100644
--- a/src/lib/components/ui/calendar/calendar.svelte
+++ b/src/lib/components/ui/calendar/calendar.svelte
@@ -32,11 +32,11 @@ get along, so we shut typescript up by casting `value` to `never`.
       <Calendar.NextButton />
     </Calendar.Header>
     <Calendar.Months>
-      {#each months as month}
+      {#each months as month (month)}
         <Calendar.Grid>
           <Calendar.GridHead>
             <Calendar.GridRow class="flex">
-              {#each weekdays as weekday}
+              {#each weekdays as weekday (weekday)}
                 <Calendar.HeadCell>
                   {weekday.slice(0, 2)}
                 </Calendar.HeadCell>
@@ -44,9 +44,9 @@ get along, so we shut typescript up by casting `value` to `never`.
             </Calendar.GridRow>
           </Calendar.GridHead>
           <Calendar.GridBody>
-            {#each month.weeks as weekDates}
+            {#each month.weeks as weekDates (weekDates)}
               <Calendar.GridRow class="mt-2 w-full">
-                {#each weekDates as date}
+                {#each weekDates as date (date)}
                   <Calendar.Cell {date} month={month.value}>
                     <Calendar.Day />
                   </Calendar.Cell>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
index 87e4f14..f4d5775 100644
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -8,7 +8,7 @@
   role="heading"
   aria-level={level}
   bind:this={ref}
-  class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+  class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
   {...restProps}
 >
   {@render children?.()}
diff --git a/src/lib/components/ui/carousel/carousel-next.svelte b/src/lib/components/ui/carousel/carousel-next.svelte
index e1c5cda..a8e6056 100644
--- a/src/lib/components/ui/carousel/carousel-next.svelte
+++ b/src/lib/components/ui/carousel/carousel-next.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ArrowRight from "lucide-svelte/icons/arrow-right";
+  import ArrowRight from "@lucide/svelte/icons/arrow-right";
   import { getEmblaContext } from "./context.js";
   import { cn } from "$lib/utils.js";
   import { Button } from "$lib/components/ui/button/index.js";
diff --git a/src/lib/components/ui/carousel/carousel-previous.svelte b/src/lib/components/ui/carousel/carousel-previous.svelte
index 15f8ff2..f7c445c 100644
--- a/src/lib/components/ui/carousel/carousel-previous.svelte
+++ b/src/lib/components/ui/carousel/carousel-previous.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ArrowLeft from "lucide-svelte/icons/arrow-left";
+  import ArrowLeft from "@lucide/svelte/icons/arrow-left";
   import { getEmblaContext } from "./context.js";
   import { cn } from "$lib/utils.js";
   import { Button } from "$lib/components/ui/button/index.js";
diff --git a/src/lib/components/ui/carousel/carousel.svelte b/src/lib/components/ui/carousel/carousel.svelte
index 925c907..ed00696 100644
--- a/src/lib/components/ui/carousel/carousel.svelte
+++ b/src/lib/components/ui/carousel/carousel.svelte
@@ -36,7 +36,7 @@
   function scrollNext() {
     carouselState.api?.scrollNext();
   }
-  function scrollTo(index, jump) {
+  function scrollTo(index, jump?) {
     carouselState.api?.scrollTo(index, jump);
   }
 
diff --git a/src/lib/components/ui/carousel/context.js b/src/lib/components/ui/carousel/context.js
index 5002100..fc83886 100644
--- a/src/lib/components/ui/carousel/context.js
+++ b/src/lib/components/ui/carousel/context.js
@@ -1,5 +1,4 @@
 import { getContext, hasContext, setContext } from "svelte";
-////
 
 const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
 
diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte
index 6118612..996f315 100644
--- a/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,12 +1,13 @@
 <script>
   import { Checkbox as CheckboxPrimitive } from "bits-ui";
-  import Check from "lucide-svelte/icons/check";
-  import Minus from "lucide-svelte/icons/minus";
+  import Check from "@lucide/svelte/icons/check";
+  import Minus from "@lucide/svelte/icons/minus";
   import { cn } from "$lib/utils.js";
 
   let {
     ref = $bindable(null),
     checked = $bindable(false),
+    indeterminate = $bindable(false),
     class: className,
     ...restProps
   } = $props();
@@ -19,11 +20,12 @@
     className,
   )}
   bind:checked
+  bind:indeterminate
   {...restProps}
 >
-  {#snippet children({ checked })}
+  {#snippet children({ checked, indeterminate })}
     <div class="flex size-4 items-center justify-center text-current">
-      {#if checked === "indeterminate"}
+      {#if indeterminate}
         <Minus class="size-3.5" />
       {:else}
         <Check class={cn("size-3.5", !checked && "text-transparent")} />
diff --git a/src/lib/components/ui/command/command-dialog.svelte b/src/lib/components/ui/command/command-dialog.svelte
index 307da7d..475d035 100644
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -6,13 +6,14 @@
     open = $bindable(false),
     ref = $bindable(null),
     value = $bindable(""),
+    portalProps,
     children,
     ...restProps
   } = $props();
 </script>
 
 <Dialog.Root bind:open {...restProps}>
-  <Dialog.Content class="overflow-hidden p-0 shadow-lg">
+  <Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
     <Command
       class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
       {...restProps}
diff --git a/src/lib/components/ui/command/command-group.svelte b/src/lib/components/ui/command/command-group.svelte
index ef63853..5722013 100644
--- a/src/lib/components/ui/command/command-group.svelte
+++ b/src/lib/components/ui/command/command-group.svelte
@@ -1,13 +1,21 @@
 <script>
-  import { Command as CommandPrimitive } from "bits-ui";
+  import { Command as CommandPrimitive, useId } from "bits-ui";
   import { cn } from "$lib/utils.js";
 
-  let { ref = $bindable(null), class: className, children, heading, ...restProps } = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    heading,
+    value,
+    ...restProps
+  } = $props();
 </script>
 
 <CommandPrimitive.Group
   class={cn("overflow-hidden p-1 text-foreground", className)}
   bind:ref
+  value={value ?? heading ?? `----${useId()}`}
   {...restProps}
 >
   {#if heading}
diff --git a/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte
index 9e60c83..c7f3d95 100644
--- a/src/lib/components/ui/command/command-input.svelte
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Command as CommandPrimitive } from "bits-ui";
-  import Search from "lucide-svelte/icons/search";
+  import Search from "@lucide/svelte/icons/search";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, value = $bindable(""), ...restProps } = $props();
@@ -10,7 +10,7 @@
   <Search class="mr-2 size-4 shrink-0 opacity-50" />
   <CommandPrimitive.Input
     class={cn(
-      "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
       className,
     )}
     bind:ref
diff --git a/src/lib/components/ui/command/command-link-item.svelte b/src/lib/components/ui/command/command-link-item.svelte
index f5ddb3b..1e76ae5 100644
--- a/src/lib/components/ui/command/command-link-item.svelte
+++ b/src/lib/components/ui/command/command-link-item.svelte
@@ -7,7 +7,7 @@
 
 <CommandPrimitive.LinkItem
   class={cn(
-    "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
     className,
   )}
   bind:ref
diff --git a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
index 1ca0d80..acdcf54 100644
--- a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -1,12 +1,12 @@
 <script>
   import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-  import Check from "lucide-svelte/icons/check";
-  import Minus from "lucide-svelte/icons/minus";
+  import Check from "@lucide/svelte/icons/check";
+  import Minus from "@lucide/svelte/icons/minus";
   import { cn } from "$lib/utils.js";
-
   let {
     ref = $bindable(null),
     checked = $bindable(false),
+    indeterminate = $bindable(false),
     class: className,
     children: childrenProp,
     ...restProps
@@ -16,20 +16,21 @@
 <ContextMenuPrimitive.CheckboxItem
   bind:ref
   bind:checked
+  bind:indeterminate
   class={cn(
     "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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
     className,
   )}
   {...restProps}
 >
-  {#snippet children({ checked })}
+  {#snippet children({ checked, indeterminate })}
     <span class="absolute left-2 flex size-3.5 items-center justify-center">
-      {#if checked === "indeterminate"}
+      {#if indeterminate}
         <Minus class="size-3.5" />
       {:else}
         <Check class={cn("size-3.5", !checked && "text-transparent")} />
       {/if}
     </span>
-    {@render childrenProp?.({ checked })}
+    {@render childrenProp?.()}
   {/snippet}
 </ContextMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/context-menu/context-menu-content.svelte b/src/lib/components/ui/context-menu/context-menu-content.svelte
index 4127f70..864ee44 100644
--- a/src/lib/components/ui/context-menu/context-menu-content.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -2,14 +2,16 @@
   import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
   import { cn } from "$lib/utils.js";
 
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
+  let { ref = $bindable(null), portalProps, class: className, ...restProps } = $props();
 </script>
 
-<ContextMenuPrimitive.Content
-  bind:ref
-  class={cn(
-    "z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
-    className,
-  )}
-  {...restProps}
-/>
+<ContextMenuPrimitive.Portal {...portalProps}>
+  <ContextMenuPrimitive.Content
+    bind:ref
+    class={cn(
+      "z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+      className,
+    )}
+    {...restProps}
+  />
+</ContextMenuPrimitive.Portal>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
index 2f89726..e45a712 100644
--- a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-  import Circle from "lucide-svelte/icons/circle";
+  import Circle from "@lucide/svelte/icons/circle";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, children: childrenProp, ...restProps } = $props();
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
index 7e4d93a..aa86153 100644
--- a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-  import ChevronRight from "lucide-svelte/icons/chevron-right";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, inset, children, ...restProps } = $props();
diff --git a/src/lib/components/ui/data-table/data-table.svelte.js b/src/lib/components/ui/data-table/data-table.svelte.js
index 77b9587..9bdcdfe 100644
--- a/src/lib/components/ui/data-table/data-table.svelte.js
+++ b/src/lib/components/ui/data-table/data-table.svelte.js
@@ -1,3 +1,24 @@
+function _optionalChain(ops) {
+  let lastAccessLHS = undefined;
+  let value = ops[0];
+  let i = 1;
+  while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === "optionalAccess" || op === "optionalCall") && value == null) {
+      return undefined;
+    }
+    if (op === "access" || op === "optionalAccess") {
+      lastAccessLHS = value;
+      value = fn(value);
+    } else if (op === "call" || op === "optionalCall") {
+      value = fn((...args) => value.call(lastAccessLHS, ...args));
+      lastAccessLHS = undefined;
+    }
+  }
+  return value;
+}
 import { createTable } from "@tanstack/table-core";
 
 /**
@@ -52,7 +73,13 @@ export function createSvelteTable(options) {
           if (updater instanceof Function) state = updater(state);
           else state = mergeObjects(state, updater);
 
-          options.onStateChange?.(updater);
+          _optionalChain([
+            options,
+            "access",
+            (_) => _.onStateChange,
+            "optionalCall",
+            (_2) => _2(updater),
+          ]);
         },
       });
     });
diff --git a/src/lib/components/ui/data-table/flex-render.svelte b/src/lib/components/ui/data-table/flex-render.svelte
index c57d014..dc00356 100644
--- a/src/lib/components/ui/data-table/flex-render.svelte
+++ b/src/lib/components/ui/data-table/flex-render.svelte
@@ -1,8 +1,8 @@
-<script>
-  import {
-    RenderComponentConfig,
-    RenderSnippetConfig,
-  } from "$lib/components/ui/data-table/render-helpers.js";
+<script
+  lang="ts"
+  generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+  import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
   let { content, context } = $props();
 </script>
 
diff --git a/src/lib/components/ui/data-table/render-helpers.js b/src/lib/components/ui/data-table/render-helpers.js
index 8706f0c..a398e2b 100644
--- a/src/lib/components/ui/data-table/render-helpers.js
+++ b/src/lib/components/ui/data-table/render-helpers.js
@@ -15,8 +15,6 @@
  * ```
  */
 export class RenderComponentConfig {
-  component;
-  props;
   constructor(component, props = {}) {
     this.component = component;
     this.props = props;
@@ -39,8 +37,6 @@ export class RenderComponentConfig {
  * ```
  */
 export class RenderSnippetConfig {
-  snippet;
-  params;
   constructor(snippet, params) {
     this.snippet = snippet;
     this.params = params;
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index 4d096d0..bf8ce7c 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,13 +1,13 @@
 <script>
   import { Dialog as DialogPrimitive } from "bits-ui";
-  import X from "lucide-svelte/icons/x";
+  import X from "@lucide/svelte/icons/x";
   import * as Dialog from "./index.js";
   import { cn } from "$lib/utils.js";
 
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+  let { ref = $bindable(null), class: className, portalProps, children, ...restProps } = $props();
 </script>
 
-<Dialog.Portal>
+<Dialog.Portal {...portalProps}>
   <Dialog.Overlay />
   <DialogPrimitive.Content
     bind:ref
diff --git a/src/lib/components/ui/drawer/drawer-content.svelte b/src/lib/components/ui/drawer/drawer-content.svelte
index b8cde0f..aaa4797 100644
--- a/src/lib/components/ui/drawer/drawer-content.svelte
+++ b/src/lib/components/ui/drawer/drawer-content.svelte
@@ -3,10 +3,10 @@
   import DrawerOverlay from "./drawer-overlay.svelte";
   import { cn } from "$lib/utils.js";
 
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+  let { ref = $bindable(null), class: className, portalProps, children, ...restProps } = $props();
 </script>
 
-<DrawerPrimitive.Portal>
+<DrawerPrimitive.Portal {...portalProps}>
   <DrawerOverlay />
   <DrawerPrimitive.Content
     bind:ref
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index 5dc1d64..639141e 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,12 +1,12 @@
 <script>
   import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-  import Check from "lucide-svelte/icons/check";
-  import Minus from "lucide-svelte/icons/minus";
+  import Check from "@lucide/svelte/icons/check";
+  import Minus from "@lucide/svelte/icons/minus";
   import { cn } from "$lib/utils.js";
-
   let {
     ref = $bindable(null),
     checked = $bindable(false),
+    indeterminate = $bindable(false),
     class: className,
     children: childrenProp,
     ...restProps
@@ -16,20 +16,21 @@
 <DropdownMenuPrimitive.CheckboxItem
   bind:ref
   bind:checked
+  bind:indeterminate
   class={cn(
     "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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
     className,
   )}
   {...restProps}
 >
-  {#snippet children({ checked })}
+  {#snippet children({ checked, indeterminate })}
     <span class="absolute left-2 flex size-3.5 items-center justify-center">
-      {#if checked === "indeterminate"}
+      {#if indeterminate}
         <Minus class="size-4" />
       {:else}
         <Check class={cn("size-4", !checked && "text-transparent")} />
       {/if}
     </span>
-    {@render childrenProp?.({ checked })}
+    {@render childrenProp?.()}
   {/snippet}
 </DropdownMenuPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 3dce5a9..be3cee0 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -2,15 +2,23 @@
   import { cn } from "$lib/utils.js";
   import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
-  let { ref = $bindable(null), sideOffset = 4, class: className, ...restProps } = $props();
+  let {
+    ref = $bindable(null),
+    sideOffset = 4,
+    portalProps,
+    class: className,
+    ...restProps
+  } = $props();
 </script>
 
-<DropdownMenuPrimitive.Content
-  bind:ref
-  {sideOffset}
-  class={cn(
-    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
-    className,
-  )}
-  {...restProps}
-/>
+<DropdownMenuPrimitive.Portal {...portalProps}>
+  <DropdownMenuPrimitive.Content
+    bind:ref
+    {sideOffset}
+    class={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+      className,
+    )}
+    {...restProps}
+  />
+</DropdownMenuPrimitive.Portal>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index 30e6d8a..1ea039d 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -1,6 +1,5 @@
 <script>
   import { cn } from "$lib/utils.js";
-  import {} from "bits-ui";
   let { ref = $bindable(null), class: className, inset, children, ...restProps } = $props();
 </script>
 
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index e30f575..c3d15b1 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,6 +1,6 @@
 <script>
   import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-  import Circle from "lucide-svelte/icons/circle";
+  import Circle from "@lucide/svelte/icons/circle";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, children: childrenProp, ...restProps } = $props();
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index 707f197..1d2589b 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,5 +1,4 @@
 <script>
-  import {} from "bits-ui";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, children, ...restProps } = $props();
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index ac902cb..aa7a824 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -1,6 +1,6 @@
 <script>
   import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-  import ChevronRight from "lucide-svelte/icons/chevron-right";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, inset, children, ...restProps } = $props();
diff --git a/src/lib/components/ui/form/form-field-errors.svelte b/src/lib/components/ui/form/form-field-errors.svelte
index f58a639..fa80701 100644
--- a/src/lib/components/ui/form/form-field-errors.svelte
+++ b/src/lib/components/ui/form/form-field-errors.svelte
@@ -20,7 +20,7 @@
     {#if childrenProp}
       {@render childrenProp({ errors, errorProps })}
     {:else}
-      {#each errors as error}
+      {#each errors as error (error)}
         <div {...errorProps} class={cn(errorClasses)}>{error}</div>
       {/each}
     {/if}
diff --git a/src/lib/components/ui/hover-card/hover-card-content.svelte b/src/lib/components/ui/hover-card/hover-card-content.svelte
index 2a026c7..86d9897 100644
--- a/src/lib/components/ui/hover-card/hover-card-content.svelte
+++ b/src/lib/components/ui/hover-card/hover-card-content.svelte
@@ -7,17 +7,20 @@
     class: className,
     align = "center",
     sideOffset = 4,
+    portalProps,
     ...restProps
   } = $props();
 </script>
 
-<HoverCardPrimitive.Content
-  bind:ref
-  {align}
-  {sideOffset}
-  class={cn(
-    "z-50 mt-3 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-    className,
-  )}
-  {...restProps}
-/>
+<HoverCardPrimitive.Portal {...portalProps}>
+  <HoverCardPrimitive.Content
+    bind:ref
+    {align}
+    {sideOffset}
+    class={cn(
+      "z-50 mt-3 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      className,
+    )}
+    {...restProps}
+  />
+</HoverCardPrimitive.Portal>
diff --git a/src/lib/components/ui/index.js b/src/lib/components/ui/index.js
new file mode 100644
index 0000000..9c04a07
--- /dev/null
+++ b/src/lib/components/ui/index.js
@@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+const Content = CollapsiblePrimitive.Content;
+
+export {
+  //
+  Root as Collapsible,
+  Content as CollapsibleContent,
+  Trigger as CollapsibleTrigger,
+  Content,
+  Root,
+  Trigger,
+};
diff --git a/src/lib/components/ui/input-otp/input-otp-separator.svelte b/src/lib/components/ui/input-otp/input-otp-separator.svelte
index 90cc65a..d457d40 100644
--- a/src/lib/components/ui/input-otp/input-otp-separator.svelte
+++ b/src/lib/components/ui/input-otp/input-otp-separator.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Dot from "lucide-svelte/icons/dot";
+  import Dot from "@lucide/svelte/icons/dot";
 
   let { ref = $bindable(null), children, ...restProps } = $props();
 </script>
diff --git a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
index 07d0946..b03ff6a 100644
--- a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -1,13 +1,13 @@
 <script>
   import { Menubar as MenubarPrimitive } from "bits-ui";
-  import Check from "lucide-svelte/icons/check";
-  import Minus from "lucide-svelte/icons/minus";
+  import Check from "@lucide/svelte/icons/check";
+  import Minus from "@lucide/svelte/icons/minus";
   import { cn } from "$lib/utils.js";
-
   let {
     ref = $bindable(null),
     class: className,
     checked = $bindable(false),
+    indeterminate = $bindable(false),
     children: childrenProp,
     ...restProps
   } = $props();
@@ -16,20 +16,21 @@
 <MenubarPrimitive.CheckboxItem
   bind:ref
   bind:checked
+  bind:indeterminate
   class={cn(
     "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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
     className,
   )}
   {...restProps}
 >
-  {#snippet children({ checked })}
+  {#snippet children({ checked, indeterminate })}
     <span class="absolute left-2 flex size-3.5 items-center justify-center">
-      {#if checked === "indeterminate"}
+      {#if indeterminate}
         <Minus class="size-4" />
       {:else}
         <Check class={cn("size-4", !checked && "text-transparent")} />
       {/if}
     </span>
-    {@render childrenProp?.({ checked })}
+    {@render childrenProp?.()}
   {/snippet}
 </MenubarPrimitive.CheckboxItem>
diff --git a/src/lib/components/ui/menubar/menubar-content.svelte b/src/lib/components/ui/menubar/menubar-content.svelte
index 8f42a3d..fa7f004 100644
--- a/src/lib/components/ui/menubar/menubar-content.svelte
+++ b/src/lib/components/ui/menubar/menubar-content.svelte
@@ -9,19 +9,22 @@
     alignOffset = -4,
     align = "start",
     side = "bottom",
+    portalProps,
     ...restProps
   } = $props();
 </script>
 
-<MenubarPrimitive.Content
-  bind:ref
-  {sideOffset}
-  {align}
-  {alignOffset}
-  {side}
-  class={cn(
-    "z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
-    className,
-  )}
-  {...restProps}
-/>
+<MenubarPrimitive.Portal {...portalProps}>
+  <MenubarPrimitive.Content
+    bind:ref
+    {sideOffset}
+    {align}
+    {alignOffset}
+    {side}
+    class={cn(
+      "z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+      className,
+    )}
+    {...restProps}
+  />
+</MenubarPrimitive.Portal>
diff --git a/src/lib/components/ui/menubar/menubar-radio-item.svelte b/src/lib/components/ui/menubar/menubar-radio-item.svelte
index 7e724da..968d509 100644
--- a/src/lib/components/ui/menubar/menubar-radio-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Menubar as MenubarPrimitive } from "bits-ui";
-  import Circle from "lucide-svelte/icons/circle";
+  import Circle from "@lucide/svelte/icons/circle";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, children: childrenProp, ...restProps } = $props();
diff --git a/src/lib/components/ui/menubar/menubar-sub-trigger.svelte b/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
index 2cef980..364146b 100644
--- a/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
+++ b/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Menubar as MenubarPrimitive } from "bits-ui";
-  import ChevronRight from "lucide-svelte/icons/chevron-right";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import { cn } from "$lib/utils.js";
 
   let {
diff --git a/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index af7393b..354ce19 100644
--- a/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Ellipsis from "lucide-svelte/icons/ellipsis";
+  import Ellipsis from "@lucide/svelte/icons/ellipsis";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, ...restProps } = $props();
diff --git a/src/lib/components/ui/pagination/pagination-next-button.svelte b/src/lib/components/ui/pagination/pagination-next-button.svelte
index a7ec386..0867cc2 100644
--- a/src/lib/components/ui/pagination/pagination-next-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Pagination as PaginationPrimitive } from "bits-ui";
-  import ChevronRight from "lucide-svelte/icons/chevron-right";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import { buttonVariants } from "$lib/components/ui/button/index.js";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/pagination/pagination-prev-button.svelte b/src/lib/components/ui/pagination/pagination-prev-button.svelte
index 9393763..5cdf4f0 100644
--- a/src/lib/components/ui/pagination/pagination-prev-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Pagination as PaginationPrimitive } from "bits-ui";
-  import ChevronLeft from "lucide-svelte/icons/chevron-left";
+  import ChevronLeft from "@lucide/svelte/icons/chevron-left";
   import { buttonVariants } from "$lib/components/ui/button/index.js";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
index ec5b199..74a7f0b 100644
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -7,11 +7,12 @@
     class: className,
     sideOffset = 4,
     align = "center",
+    portalProps,
     ...restProps
   } = $props();
 </script>
 
-<PopoverPrimitive.Portal>
+<PopoverPrimitive.Portal {...portalProps}>
   <PopoverPrimitive.Content
     bind:ref
     {sideOffset}
diff --git a/src/lib/components/ui/radio-group/radio-group-item.svelte b/src/lib/components/ui/radio-group/radio-group-item.svelte
index 4258d1d..27a0a9c 100644
--- a/src/lib/components/ui/radio-group/radio-group-item.svelte
+++ b/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -1,6 +1,6 @@
 <script>
   import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-  import Circle from "lucide-svelte/icons/circle";
+  import Circle from "@lucide/svelte/icons/circle";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, ...restProps } = $props();
diff --git a/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte b/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
index 27744bb..19e28da 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
@@ -1,6 +1,6 @@
 <script>
   import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-  import ChevronRight from "lucide-svelte/icons/chevron-right";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import { buttonVariants } from "$lib/components/ui/button/index.js";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte b/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
index 887ddfc..2e75da0 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
@@ -1,6 +1,6 @@
 <script>
   import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-  import ChevronLeft from "lucide-svelte/icons/chevron-left";
+  import ChevronLeft from "@lucide/svelte/icons/chevron-left";
   import { buttonVariants } from "$lib/components/ui/button/index.js";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/range-calendar/range-calendar.svelte b/src/lib/components/ui/range-calendar/range-calendar.svelte
index f064fd0..b5e7f01 100644
--- a/src/lib/components/ui/range-calendar/range-calendar.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar.svelte
@@ -28,11 +28,11 @@
       <RangeCalendar.NextButton />
     </RangeCalendar.Header>
     <RangeCalendar.Months>
-      {#each months as month}
+      {#each months as month (month)}
         <RangeCalendar.Grid>
           <RangeCalendar.GridHead>
             <RangeCalendar.GridRow class="flex">
-              {#each weekdays as weekday}
+              {#each weekdays as weekday (weekday)}
                 <RangeCalendar.HeadCell>
                   {weekday.slice(0, 2)}
                 </RangeCalendar.HeadCell>
@@ -40,9 +40,9 @@
             </RangeCalendar.GridRow>
           </RangeCalendar.GridHead>
           <RangeCalendar.GridBody>
-            {#each month.weeks as weekDates}
+            {#each month.weeks as weekDates (weekDates)}
               <RangeCalendar.GridRow class="mt-2 w-full">
-                {#each weekDates as date}
+                {#each weekDates as date (date)}
                   <RangeCalendar.Cell {date} month={month.value}>
                     <RangeCalendar.Day />
                   </RangeCalendar.Cell>
diff --git a/src/lib/components/ui/resizable/resizable-handle.svelte b/src/lib/components/ui/resizable/resizable-handle.svelte
index e7ac3ef..3e950e1 100644
--- a/src/lib/components/ui/resizable/resizable-handle.svelte
+++ b/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -1,5 +1,5 @@
 <script>
-  import GripVertical from "lucide-svelte/icons/grip-vertical";
+  import GripVertical from "@lucide/svelte/icons/grip-vertical";
   import * as ResizablePrimitive from "paneforge";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
index d16824e..cd4078e 100644
--- a/src/lib/components/ui/select/select-content.svelte
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -8,12 +8,13 @@
     ref = $bindable(null),
     class: className,
     sideOffset = 4,
+    portalProps,
     children,
     ...restProps
   } = $props();
 </script>
 
-<SelectPrimitive.Portal>
+<SelectPrimitive.Portal {...portalProps}>
   <SelectPrimitive.Content
     bind:ref
     {sideOffset}
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
index c0f4984..d77f7bb 100644
--- a/src/lib/components/ui/select/select-item.svelte
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Check from "lucide-svelte/icons/check";
+  import Check from "@lucide/svelte/icons/check";
   import { Select as SelectPrimitive } from "bits-ui";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/select/select-scroll-down-button.svelte b/src/lib/components/ui/select/select-scroll-down-button.svelte
index cbebc60..139918b 100644
--- a/src/lib/components/ui/select/select-scroll-down-button.svelte
+++ b/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ChevronDown from "lucide-svelte/icons/chevron-down";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
   import { Select as SelectPrimitive } from "bits-ui";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/select/select-scroll-up-button.svelte b/src/lib/components/ui/select/select-scroll-up-button.svelte
index 0c377ee..9e8e99e 100644
--- a/src/lib/components/ui/select/select-scroll-up-button.svelte
+++ b/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ChevronUp from "lucide-svelte/icons/chevron-up";
+  import ChevronUp from "@lucide/svelte/icons/chevron-up";
   import { Select as SelectPrimitive } from "bits-ui";
   import { cn } from "$lib/utils.js";
 
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
index 4b775f6..5e1ad95 100644
--- a/src/lib/components/ui/select/select-trigger.svelte
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Select as SelectPrimitive } from "bits-ui";
-  import ChevronDown from "lucide-svelte/icons/chevron-down";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
   import { cn } from "$lib/utils.js";
 
   let { ref = $bindable(null), class: className, children, ...restProps } = $props();
diff --git a/src/lib/components/ui/sidebar/context.svelte.js b/src/lib/components/ui/sidebar/context.svelte.js
index 576b1f5..f9a25ab 100644
--- a/src/lib/components/ui/sidebar/context.svelte.js
+++ b/src/lib/components/ui/sidebar/context.svelte.js
@@ -3,14 +3,25 @@ import { getContext, setContext } from "svelte";
 import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
 
 class SidebarState {
-  props;
-  open = $derived.by(() => this.props.open());
-  openMobile = $state(false);
-  setOpen;
+  __init() {
+    this.open = $derived.by(() => this.props.open());
+  }
+  __init2() {
+    this.openMobile = $state(false);
+  }
+
   #isMobile;
-  state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+  __init3() {
+    this.state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+  }
 
   constructor(props) {
+    SidebarState.prototype.__init.call(this);
+    SidebarState.prototype.__init2.call(this);
+    SidebarState.prototype.__init3.call(this);
+    SidebarState.prototype.__init4.call(this);
+    SidebarState.prototype.__init5.call(this);
+    SidebarState.prototype.__init6.call(this);
     this.setOpen = props.setOpen;
     this.#isMobile = new IsMobile();
     this.props = props;
@@ -23,20 +34,28 @@ class SidebarState {
   }
 
   // Event handler to apply to the `<svelte:window>`
-  handleShortcutKeydown = (e) => {
-    if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      this.toggle();
-    }
-  };
+  __init4() {
+    this.handleShortcutKeydown = (e) => {
+      if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        this.toggle();
+      }
+    };
+  }
 
-  setOpenMobile = (value) => {
-    this.openMobile = value;
-  };
+  __init5() {
+    this.setOpenMobile = (value) => {
+      this.openMobile = value;
+    };
+  }
 
-  toggle = () => {
-    return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open);
-  };
+  __init6() {
+    this.toggle = () => {
+      return this.#isMobile.current
+        ? (this.openMobile = !this.openMobile)
+        : this.setOpen(!this.open);
+    };
+  }
 }
 
 const SYMBOL_KEY = "scn-sidebar";
diff --git a/src/lib/components/ui/slider/slider.svelte b/src/lib/components/ui/slider/slider.svelte
index 348083a..579f8dc 100644
--- a/src/lib/components/ui/slider/slider.svelte
+++ b/src/lib/components/ui/slider/slider.svelte
@@ -2,20 +2,39 @@
   import { Slider as SliderPrimitive } from "bits-ui";
   import { cn } from "$lib/utils.js";
 
-  let { ref = $bindable(null), value = $bindable([0]), class: className, ...restProps } = $props();
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    orientation = "horizontal",
+    class: className,
+    ...restProps
+  } = $props();
 </script>
 
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
 <SliderPrimitive.Root
   bind:ref
   bind:value
-  class={cn("relative flex w-full touch-none select-none items-center", className)}
+  {orientation}
+  class={cn(
+    "relative flex touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
+    className,
+  )}
   {...restProps}
 >
   {#snippet children({ thumbs })}
-    <span class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range class="absolute h-full bg-primary" />
+    <span
+      data-orientation={orientation}
+      class="relative grow overflow-hidden rounded-full bg-secondary data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
+    >
+      <SliderPrimitive.Range
+        class="absolute bg-primary data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+      />
     </span>
-    {#each thumbs as thumb}
+    {#each thumbs as thumb (thumb)}
       <SliderPrimitive.Thumb
         index={thumb}
         class="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
index 212446c..054a687 100644
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -2,11 +2,11 @@
   import { Toaster as Sonner } from "svelte-sonner";
   import { mode } from "mode-watcher";
 
-  let restProps = $props();
+  let { ...restProps } = $props();
 </script>
 
 <Sonner
-  theme={$mode}
+  theme={mode.current}
   class="toaster group"
   toastOptions={{
     classes: {
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
index dc1954d..d788af3 100644
--- a/src/lib/components/ui/switch/switch.svelte
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -14,7 +14,7 @@
   bind:ref
   bind:checked
   class={cn(
-    "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+    "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
     className,
   )}
   {...restProps}
diff --git a/src/lib/components/ui/table/table-footer.svelte b/src/lib/components/ui/table/table-footer.svelte
index 9fe54ea..20de460 100644
--- a/src/lib/components/ui/table/table-footer.svelte
+++ b/src/lib/components/ui/table/table-footer.svelte
@@ -4,10 +4,6 @@
   let { ref = $bindable(null), class: className, children, ...restProps } = $props();
 </script>
 
-<tfoot
-  bind:this={ref}
-  class={cn("bg-muted/50 font-medium text-primary-foreground", className)}
-  {...restProps}
->
+<tfoot bind:this={ref} class={cn("bg-muted/50 font-medium", className)} {...restProps}>
   {@render children?.()}
 </tfoot>
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
index dda47d7..873d59b 100644
--- a/src/lib/components/ui/textarea/textarea.svelte
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -7,7 +7,7 @@
 <textarea
   bind:this={ref}
   class={cn(
-    "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
     className,
   )}
   bind:value
diff --git a/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
index 83e7b98..364e363 100644
--- a/src/lib/components/ui/toggle-group/toggle-group-item.svelte
+++ b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
-  import { getToggleGroupCtx } from "$lib/components/ui/toggle-group/toggle-group.svelte";
+  import { getToggleGroupCtx } from "./toggle-group.svelte";
   import { cn } from "$lib/utils.js";
   import { toggleVariants } from "$lib/components/ui/toggle/index.js";
 
diff --git a/src/lib/components/ui/toggle/toggle.svelte b/src/lib/components/ui/toggle/toggle.svelte
index 36b5452..1cc3596 100644
--- a/src/lib/components/ui/toggle/toggle.svelte
+++ b/src/lib/components/ui/toggle/toggle.svelte
@@ -2,16 +2,16 @@
   import { tv } from "tailwind-variants";
 
   export const toggleVariants = tv({
-    base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
     variants: {
       variant: {
         default: "bg-transparent",
         outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent",
       },
       size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
+        default: "h-10 min-w-10 px-3",
+        sm: "h-9 min-w-9 px-2.5",
+        lg: "h-11 min-w-11 px-5",
       },
     },
     defaultVariants: {
@@ -38,6 +38,6 @@
 <TogglePrimitive.Root
   bind:ref
   bind:pressed
-  class={cn(toggleVariants({ variant, size, className }))}
+  class={cn(toggleVariants({ variant, size }), className)}
   {...restProps}
 />