@timbal-ai/timbal-react 1.4.0 → 1.5.0

package/dist/ui.cjs

@@ -169,6 +169,7 @@ __export(ui_exports, {
   InputOTPHiddenInput: () => InputOTPHiddenInput,
   InputOTPSeparator: () => InputOTPSeparator,
   InputOTPSlot: () => InputOTPSlot,
+  Kanban: () => Kanban,
   Kbd: () => Kbd,
   KbdGroup: () => KbdGroup,
   Label: () => Label,
@@ -273,6 +274,7 @@ __export(ui_exports, {
   TooltipContent: () => TooltipContent,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
+  UntitledButton: () => UntitledButton,
   alertVariants: () => alertVariants,
   avatarChartVariantClass: () => avatarChartVariantClass,
   badgeVariants: () => badgeVariants,
@@ -286,6 +288,7 @@ __export(ui_exports, {
   overlaySurfaceClass: () => overlaySurfaceClass,
   toast: () => toast,
   toggleVariants: () => toggleVariants,
+  untitledButtonVariants: () => untitledButtonVariants,
   useChart: () => useChart,
   useToast: () => useToast
 });
@@ -293,6 +296,7 @@ module.exports = __toCommonJS(ui_exports);
 
 // src/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
 
 // src/utils.ts
 var import_clsx = require("clsx");
@@ -301,6 +305,387 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
+// src/ui/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SOLID_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-solid";
+var BORDERED_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-bordered";
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  cn(
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap font-medium",
+    "transition-all duration-300 ease-in-out outline-none border",
+    "focus-visible:ring-4 focus-visible:ring-primary/20 focus-visible:ring-offset-0",
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:pointer-events-none",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
+    // Overflow hidden can clip out-of-bounds shadow, so we use precise overflow management and rounded-[inherit] on pseudo overlays
+    "after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0"
+  ),
+  {
+    variants: {
+      color: {
+        primary: cn(
+          // Exact Premium Untitled UI primary BLACK / dark charcoal: gradient + borders
+          "bg-gradient-to-b from-[#344054] to-[#0F1117] text-white border-[#1A1E29]",
+          "hover:border-[#181C26]",
+          "active:border-[#0A0D14]",
+          SOLID_SKEUOMORPHIC_SHADOW,
+          // Hover/active overlays for beautiful animation (the gradient is static, the overlay opacity is transitioned)
+          "after:bg-white/[0.08] hover:after:opacity-100 active:after:bg-black/[0.12]",
+          // Premium Dark Mode inversion: Primary becomes white, popping out elegantly
+          "dark:bg-gradient-to-b dark:from-white dark:to-[#F9FAFB] dark:text-[#10121C] dark:border-white",
+          "dark:hover:border-[#D0D5DD] dark:hover:text-[#10121C]",
+          "dark:shadow-skeuomorphic-bordered",
+          "dark:after:bg-black/[0.04] dark:active:after:bg-black/[0.08]"
+        ),
+        secondary: cn(
+          // Exact Untitled UI secondary: premium white/gray gradient + borders
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#344054] border-[#D0D5DD]",
+          "hover:text-[#1D2939] hover:border-[#D0D5DD]",
+          BORDERED_SKEUOMORPHIC_SHADOW,
+          // Hover/active overlays for white/gray gradient
+          "after:bg-black/[0.03] hover:after:opacity-100 active:after:bg-black/[0.08]",
+          // Premium Dark Mode inversion: Secondary becomes dark charcoal/gray, merging into the background
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#D1D5DB] dark:border-[#344054]",
+          "dark:hover:border-[#475467] dark:hover:text-white",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        ),
+        tertiary: cn(
+          "bg-transparent text-[#475467] border-transparent",
+          "hover:bg-[#F9FAFB] hover:text-[#344054]",
+          "active:bg-[#F2F4F7] active:text-[#1D2939]",
+          "after:hidden",
+          // No overlay needed for transparent surfaces
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:bg-[#1F242F] dark:hover:text-white dark:active:bg-[#11131A]"
+        ),
+        link: cn(
+          "h-auto! bg-transparent p-0! border-transparent text-[#1F242F] hover:text-[#10121C]",
+          "hover:underline",
+          "after:hidden",
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:text-white"
+        ),
+        "primary-destructive": cn(
+          // Exact Untitled UI primary destructive: premium red gradient + borders (vibrant and subtle, not too dark)
+          "bg-gradient-to-b from-[#D92D20] to-[#B42318] text-white border-[#B42318]",
+          "hover:border-[#9E1B12]",
+          "active:border-[#84140D]",
+          SOLID_SKEUOMORPHIC_SHADOW,
+          // Destructive red hover/active overlays
+          "after:bg-white/[0.12] hover:after:opacity-100 active:after:bg-black/[0.15]"
+        ),
+        "secondary-destructive": cn(
+          // Exact Untitled UI secondary destructive: soft red bordered
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#B42318] border-[#FDA29B]",
+          "hover:text-[#9E1B12] hover:border-[#FDA29B]",
+          BORDERED_SKEUOMORPHIC_SHADOW,
+          // Hover overlay
+          "after:bg-red-500/[0.04] hover:after:opacity-100 active:after:bg-red-950/[0.08]",
+          // Dark Mode Secondary Destructive: Charcoal fill with red borders and label
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#F87171] dark:border-[#9E1B12]/50",
+          "dark:hover:border-[#F87171]/40",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        )
+      },
+      size: {
+        xs: "h-8 gap-1 rounded-md px-2.5 text-xs",
+        sm: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        md: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        lg: "h-11 gap-2 rounded-lg px-4 text-base",
+        xl: "h-12 gap-2 rounded-lg px-5 text-base",
+        default: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        icon: "h-10 w-10 rounded-lg",
+        "icon-xs": "h-8 w-8 rounded-md",
+        "icon-sm": "h-9 w-9 rounded-lg",
+        "icon-lg": "h-11 w-11 rounded-lg"
+      },
+      shape: {
+        pill: "rounded-full!",
+        rounded: ""
+        // defaults to the size variant's standard rounded-lg
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "default",
+      shape: "rounded"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  color,
+  size,
+  shape,
+  iconLeading,
+  iconTrailing,
+  isLoading = false,
+  asChild = false,
+  disabled,
+  type = "button",
+  children,
+  ...props
+}) {
+  const isDisabled = disabled || isLoading;
+  let resolvedColor = "primary";
+  if (color) {
+    resolvedColor = color;
+  } else if (variant) {
+    if (variant === "default" || variant === "informative") resolvedColor = "primary";
+    else if (variant === "secondary" || variant === "outline") resolvedColor = "secondary";
+    else if (variant === "destructive") resolvedColor = "primary-destructive";
+    else if (variant === "ghost") resolvedColor = "tertiary";
+    else if (variant === "link") resolvedColor = "link";
+  }
+  const classes = cn(
+    buttonVariants({
+      color: resolvedColor,
+      size: size ?? "default",
+      shape: shape ?? "rounded"
+    }),
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_radix_ui.Slot.Root,
+      {
+        className: classes,
+        "aria-disabled": isDisabled ? true : void 0,
+        "data-slot": "button",
+        "data-variant": resolvedColor,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      "data-slot": "button",
+      "data-variant": resolvedColor,
+      className: classes,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : iconLeading,
+        children,
+        !isLoading ? iconTrailing : null
+      ]
+    }
+  );
+}
+
+// src/ui/untitled-button.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SOLID_SKEUOMORPHIC_SHADOW2 = "shadow-skeuomorphic-solid";
+var BORDERED_SKEUOMORPHIC_SHADOW2 = "shadow-skeuomorphic-bordered";
+var untitledButtonVariants = (0, import_class_variance_authority2.cva)(
+  cn(
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap font-medium",
+    "transition-all duration-300 ease-in-out outline-none border",
+    "focus-visible:ring-4 focus-visible:ring-primary/20 focus-visible:ring-offset-0",
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
+    // Overflow hidden can clip out-of-bounds shadow, so we use precise overflow management and rounded-[inherit] on pseudo overlays
+    "after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0"
+  ),
+  {
+    variants: {
+      color: {
+        primary: cn(
+          // Exact Premium Untitled UI primary BLACK / dark charcoal: gradient + borders
+          "bg-gradient-to-b from-[#344054] to-[#0F1117] text-white border-[#1A1E29]",
+          "hover:border-[#181C26]",
+          "active:border-[#0A0D14]",
+          SOLID_SKEUOMORPHIC_SHADOW2,
+          // Hover/active overlays for beautiful animation (the gradient is static, the overlay opacity is transitioned)
+          "after:bg-white/[0.08] hover:after:opacity-100 active:after:bg-black/[0.12]",
+          // Premium Dark Mode inversion: Primary becomes white, popping out elegantly
+          "dark:bg-gradient-to-b dark:from-white dark:to-[#F9FAFB] dark:text-[#10121C] dark:border-white",
+          "dark:hover:border-[#D0D5DD] dark:hover:text-[#10121C]",
+          "dark:shadow-skeuomorphic-bordered",
+          "dark:after:bg-black/[0.04] dark:active:after:bg-black/[0.08]"
+        ),
+        secondary: cn(
+          // Exact Untitled UI secondary: premium white/gray gradient + borders
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#344054] border-[#D0D5DD]",
+          "hover:text-[#1D2939] hover:border-[#D0D5DD]",
+          BORDERED_SKEUOMORPHIC_SHADOW2,
+          // Hover/active overlays for white/gray gradient
+          "after:bg-black/[0.03] hover:after:opacity-100 active:after:bg-black/[0.08]",
+          // Premium Dark Mode inversion: Secondary becomes dark charcoal/gray, merging into the background
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#D1D5DB] dark:border-[#344054]",
+          "dark:hover:border-[#475467] dark:hover:text-white",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        ),
+        tertiary: cn(
+          "bg-transparent text-[#475467] border-transparent",
+          "hover:bg-[#F9FAFB] hover:text-[#344054]",
+          "active:bg-[#F2F4F7] active:text-[#1D2939]",
+          "after:hidden",
+          // No overlay needed for transparent surfaces
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:bg-[#1F242F] dark:hover:text-white dark:active:bg-[#11131A]"
+        ),
+        link: cn(
+          "h-auto! bg-transparent p-0! border-transparent text-[#1F242F] hover:text-[#10121C]",
+          "hover:underline",
+          "after:hidden",
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:text-white"
+        ),
+        "primary-destructive": cn(
+          // Exact Untitled UI primary destructive: premium red gradient + borders (vibrant and subtle, not too dark)
+          "bg-gradient-to-b from-[#D92D20] to-[#B42318] text-white border-[#B42318]",
+          "hover:border-[#9E1B12]",
+          "active:border-[#84140D]",
+          SOLID_SKEUOMORPHIC_SHADOW2,
+          // Destructive red hover/active overlays
+          "after:bg-white/[0.12] hover:after:opacity-100 active:after:bg-black/[0.15]"
+        ),
+        "secondary-destructive": cn(
+          // Exact Untitled UI secondary destructive: soft red bordered
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#B42318] border-[#FDA29B]",
+          "hover:text-[#9E1B12] hover:border-[#FDA29B]",
+          BORDERED_SKEUOMORPHIC_SHADOW2,
+          // Hover overlay
+          "after:bg-red-500/[0.04] hover:after:opacity-100 active:after:bg-red-950/[0.08]",
+          // Dark Mode Secondary Destructive: Charcoal fill with red borders and label
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#F87171] dark:border-[#9E1B12]/50",
+          "dark:hover:border-[#F87171]/40",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        )
+      },
+      size: {
+        sm: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        md: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        lg: "h-11 gap-2 rounded-lg px-4 text-base",
+        xl: "h-12 gap-2 rounded-lg px-5 text-base"
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md"
+    }
+  }
+);
+function UntitledButton({
+  className,
+  color,
+  size,
+  iconLeading,
+  iconTrailing,
+  isLoading = false,
+  asChild = false,
+  disabled,
+  type = "button",
+  children,
+  ...props
+}) {
+  const isDisabled = disabled || isLoading;
+  const classes = cn(untitledButtonVariants({ color, size }), className);
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_radix_ui2.Slot.Root,
+      {
+        className: classes,
+        "aria-disabled": isDisabled ? true : void 0,
+        "data-slot": "untitled-button",
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      "data-slot": "untitled-button",
+      className: classes,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : iconLeading,
+        children,
+        !isLoading ? iconTrailing : null
+      ]
+    }
+  );
+}
+
+// src/ui/tooltip.tsx
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_radix_ui3.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui3.Tooltip.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui3.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui3.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_radix_ui3.Tooltip.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background 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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-2.5 py-1 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui3.Tooltip.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/ui/avatar.tsx
+var React = __toESM(require("react"), 1);
+var import_radix_ui4 = require("radix-ui");
+
 // src/design/button-tokens.ts
 var TIMBAL_V2_ELEVATED_GRADIENT = "bg-gradient-to-b from-elevated-from to-elevated-to";
 var TIMBAL_V2_MODAL_SURFACE = cn(
@@ -308,14 +693,6 @@ var TIMBAL_V2_MODAL_SURFACE = cn(
   "border border-border shadow-card-elevated"
 );
 var TIMBAL_V2_PRIMARY_GRADIENT = "bg-gradient-to-b from-primary-fill-from to-primary-fill-to";
-var TIMBAL_V2_FROM_LEGACY_BUTTON = {
-  default: "primary",
-  destructive: "destructive",
-  outline: "secondary",
-  secondary: "secondary",
-  ghost: "ghost",
-  link: "link"
-};
 var TIMBAL_V2_SIZE_HEIGHT = {
   xs: "min-h-8 h-8",
   sm: "min-h-9 h-9",
@@ -351,6 +728,11 @@ var TIMBAL_V2_FILL = {
     "group-hover/tbv2:from-destructive-fill-hover-from group-hover/tbv2:to-destructive-fill-hover-to",
     "group-active/tbv2:from-destructive-fill-active-from group-active/tbv2:to-destructive-fill-active-to"
   ].join(" "),
+  "destructive-solid": [
+    "bg-gradient-to-b from-destructive-solid-from to-destructive-solid-to",
+    "group-hover/tbv2:from-destructive-solid-hover-from group-hover/tbv2:to-destructive-solid-hover-to",
+    "group-active/tbv2:from-destructive-solid-active-from group-active/tbv2:to-destructive-solid-active-to"
+  ].join(" "),
   secondary: [
     TIMBAL_V2_ELEVATED_GRADIENT,
     "group-hover/tbv2:from-secondary-fill-hover-from group-hover/tbv2:to-secondary-fill-hover-to",
@@ -367,6 +749,7 @@ var TIMBAL_V2_LABEL = {
   primary: "text-primary-foreground",
   informative: "text-primary-foreground",
   destructive: "text-destructive",
+  "destructive-solid": "text-destructive-foreground",
   secondary: "text-foreground",
   ghost: "text-foreground",
   link: "text-foreground underline decoration-foreground/25 underline-offset-2 group-hover/tbv2:decoration-foreground/45"
@@ -375,6 +758,7 @@ var TIMBAL_V2_BORDER = {
   primary: "",
   informative: "border border-foreground/15",
   destructive: "border border-destructive/45",
+  "destructive-solid": "",
   secondary: "border border-border",
   ghost: "",
   link: ""
@@ -383,6 +767,7 @@ var TIMBAL_V2_SHADOW = {
   primary: "shadow-card",
   informative: "shadow-card",
   destructive: "shadow-card",
+  "destructive-solid": "shadow-card",
   secondary: "shadow-card",
   ghost: "",
   link: ""
@@ -420,270 +805,26 @@ var TIMBAL_V2_SWITCH_TRACK_OFF = cn(
 );
 var TIMBAL_V2_SWITCH_THUMB = cn(
   TIMBAL_V2_ELEVATED_GRADIENT,
-  "border border-border/80 shadow-sm"
-);
-var TIMBAL_V2_ELEVATED_SURFACE = cn(
-  TIMBAL_V2_ELEVATED_GRADIENT,
-  "border border-border shadow-card"
-);
-var TIMBAL_V2_SECONDARY_CHROME = [
-  TIMBAL_V2_ELEVATED_GRADIENT,
-  "border border-border shadow-card",
-  "transition-[background-color,box-shadow,border-color] duration-200 ease-in-out",
-  "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
-  "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
-].join(" ");
-var TIMBAL_V2_LOGO_TILE = cn(
-  "bg-gradient-to-b from-white to-neutral-100",
-  "border border-neutral-200",
-  "shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.08)]"
-);
-
-// src/ui/timbal-v2-button.tsx
-var React = __toESM(require("react"), 1);
-var import_radix_ui = require("radix-ui");
-var import_jsx_runtime = require("react/jsx-runtime");
-var TIMBAL_V2_FILL_AS_CHILD = {
-  primary: [
-    "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
-    "hover:from-primary-fill-hover-from hover:to-primary-fill-hover-to",
-    "active:from-primary-fill-active-from active:to-primary-fill-active-to"
-  ].join(" "),
-  informative: [
-    TIMBAL_V2_PRIMARY_GRADIENT,
-    "hover:from-primary-fill-hover-from hover:to-primary-fill-hover-to",
-    "active:from-primary-fill-active-from active:to-primary-fill-active-to",
-    "active:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]"
-  ].join(" "),
-  destructive: [
-    TIMBAL_V2_ELEVATED_GRADIENT,
-    "hover:from-destructive-fill-hover-from hover:to-destructive-fill-hover-to",
-    "active:from-destructive-fill-active-from active:to-destructive-fill-active-to"
-  ].join(" "),
-  secondary: [
-    TIMBAL_V2_ELEVATED_GRADIENT,
-    "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
-    "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
-  ].join(" "),
-  ghost: [
-    "bg-transparent",
-    "hover:bg-ghost-fill-hover",
-    "active:bg-ghost-fill-active"
-  ].join(" "),
-  link: "bg-transparent"
-};
-var TIMBAL_V2_LABEL_AS_CHILD = {
-  ...TIMBAL_V2_LABEL,
-  link: "text-foreground underline decoration-foreground/25 underline-offset-2 hover:decoration-foreground/45"
-};
-var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
-  variant = "secondary",
-  size = "sm",
-  isIconOnly = false,
-  isLoading = false,
-  fullWidth = false,
-  shape: _shape = "pill",
-  asChild = false,
-  className,
-  disabled,
-  type = "button",
-  children,
-  ...props
-}, ref) {
-  const isDisabled = disabled || isLoading;
-  const sizeClass2 = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
-  const radiusClass = "rounded-full";
-  const sharedRootClass = cn(
-    "relative box-border inline-flex items-center justify-center gap-2 whitespace-nowrap border-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-    sizeClass2,
-    radiusClass,
-    TIMBAL_V2_BORDER[variant],
-    TIMBAL_V2_SHADOW[variant],
-    fullWidth && "w-full",
-    isDisabled && "pointer-events-none opacity-50",
-    className
-  );
-  if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_radix_ui.Slot.Root,
-      {
-        ref,
-        "aria-disabled": isDisabled ? true : void 0,
-        "data-slot": "timbal-v2-button",
-        "data-variant": variant,
-        className: cn(
-          sharedRootClass,
-          TIMBAL_V2_FILL_AS_CHILD[variant],
-          !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
-          TIMBAL_V2_LABEL_AS_CHILD[variant]
-        ),
-        ...props,
-        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
-    {
-      ref,
-      type,
-      disabled: isDisabled,
-      "data-slot": "timbal-v2-button",
-      "data-variant": variant,
-      className: cn(
-        "group/tbv2 flex-col items-stretch overflow-hidden bg-transparent p-0",
-        sharedRootClass
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
-              TIMBAL_V2_FILL[variant]
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: cn(
-              "relative z-10 flex min-h-0 flex-1 items-center justify-center gap-1 leading-tight",
-              !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
-              TIMBAL_V2_LABEL[variant]
-            ),
-            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
-          }
-        )
-      ]
-    }
-  );
-});
-
-// src/ui/button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var LEGACY_SIZE_TO_V2 = {
-  default: "md",
-  xs: "xs",
-  sm: "sm",
-  lg: "lg",
-  icon: "sm",
-  "icon-xs": "xs",
-  "icon-sm": "sm",
-  "icon-lg": "lg"
-};
-var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "",
-        destructive: "",
-        outline: "",
-        secondary: "",
-        ghost: "",
-        link: ""
-      },
-      size: {
-        default: "",
-        xs: "",
-        sm: "",
-        lg: "",
-        icon: "",
-        "icon-xs": "",
-        "icon-sm": "",
-        "icon-lg": ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
+  "border border-border/80 shadow-sm"
+);
+var TIMBAL_V2_ELEVATED_SURFACE = cn(
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border shadow-card"
+);
+var TIMBAL_V2_SECONDARY_CHROME = [
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "border border-border shadow-card",
+  "transition-[background-color,box-shadow,border-color] duration-200 ease-in-out",
+  "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+  "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
+].join(" ");
+var TIMBAL_V2_LOGO_TILE = cn(
+  "bg-gradient-to-b from-white to-neutral-100",
+  "border border-neutral-200",
+  "shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.08)]"
 );
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const v2Variant = TIMBAL_V2_FROM_LEGACY_BUTTON[variant ?? "default"];
-  const v2Size = LEGACY_SIZE_TO_V2[size ?? "default"];
-  const isIconOnly = typeof size === "string" && size.startsWith("icon");
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    TimbalV2Button,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      variant: v2Variant,
-      size: v2Size,
-      shape: "pill",
-      isIconOnly,
-      asChild,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-
-// src/ui/tooltip.tsx
-var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_radix_ui2.Tooltip.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Tooltip.Root, { "data-slot": "tooltip", ...props });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_radix_ui2.Tooltip.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-foreground text-background 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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Tooltip.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
 
 // src/ui/avatar.tsx
-var React2 = __toESM(require("react"), 1);
-var import_radix_ui3 = require("radix-ui");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var AVATAR_PRIMARY_FALLBACK_CLASS = cn(
   TIMBAL_V2_SECONDARY_PILL_ROOT,
@@ -693,11 +834,11 @@ var AVATAR_PRIMARY_FALLBACK_CLASS = cn(
 var AVATAR_SECONDARY_FILL_STYLE = {
   backgroundImage: "linear-gradient(to bottom, var(--elevated-from), var(--elevated-to))"
 };
-var AvatarChromeContext = React2.createContext(
+var AvatarChromeContext = React.createContext(
   null
 );
 function useAvatarChrome() {
-  return React2.useContext(AvatarChromeContext);
+  return React.useContext(AvatarChromeContext);
 }
 function isBrandedVariant(variant) {
   return variant === "secondary" || variant === "primary" || variant === "chart";
@@ -717,15 +858,15 @@ function Avatar({
   children,
   ...props
 }) {
-  const [chrome, setChrome] = React2.useState(rootVariant ?? "muted");
-  React2.useLayoutEffect(() => {
+  const [chrome, setChrome] = React.useState(rootVariant ?? "muted");
+  React.useLayoutEffect(() => {
     if (rootVariant !== void 0) {
       setChrome(rootVariant);
     }
   }, [rootVariant]);
   const branded = isBrandedVariant(chrome);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvatarChromeContext.Provider, { value: { chrome, setChrome }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    import_radix_ui3.Avatar.Root,
+    import_radix_ui4.Avatar.Root,
     {
       "data-slot": "avatar",
       "data-size": size,
@@ -756,7 +897,7 @@ function AvatarImage({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_radix_ui3.Avatar.Image,
+    import_radix_ui4.Avatar.Image,
     {
       "data-slot": "avatar-image",
       className: cn(
@@ -776,12 +917,12 @@ function AvatarFallback({
   ...props
 }) {
   const chromeCtx = useAvatarChrome();
-  React2.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     chromeCtx?.setChrome(variant);
   }, [chromeCtx, variant]);
   const branded = isBrandedVariant(variant);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_radix_ui3.Avatar.Fallback,
+    import_radix_ui4.Avatar.Fallback,
     {
       "data-slot": "avatar-fallback",
       "data-variant": branded ? "secondary" : variant,
@@ -790,8 +931,8 @@ function AvatarFallback({
         branded ? cn(
           "bg-transparent font-medium",
           TIMBAL_V2_LABEL.secondary,
-          "text-sm group-data-[size=sm]/avatar:text-xs"
-        ) : "bg-muted font-normal text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
+          "text-xs group-data-[size=sm]/avatar:text-[10px]"
+        ) : "bg-muted font-normal text-muted-foreground text-xs group-data-[size=sm]/avatar:text-[10px]",
         className
       ),
       style,
@@ -803,34 +944,34 @@ function AvatarFallback({
 
 // src/ui/dialog.tsx
 var import_lucide_react = require("lucide-react");
-var import_radix_ui4 = require("radix-ui");
+var import_radix_ui5 = require("radix-ui");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Dialog.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui5.Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui5.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui5.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Dialog.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui5.Dialog.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_radix_ui4.Dialog.Overlay,
+    import_radix_ui5.Dialog.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -850,7 +991,7 @@ function DialogContent({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      import_radix_ui4.Dialog.Content,
+      import_radix_ui5.Dialog.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -862,7 +1003,7 @@ function DialogContent({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-            import_radix_ui4.Dialog.Close,
+            import_radix_ui5.Dialog.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-[opacity,background-color] hover:bg-ghost-fill-hover hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -882,7 +1023,7 @@ function DialogTitle({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_radix_ui4.Dialog.Title,
+    import_radix_ui5.Dialog.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg leading-none font-semibold", className),
@@ -895,7 +1036,7 @@ function DialogDescription({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_radix_ui4.Dialog.Description,
+    import_radix_ui5.Dialog.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -928,7 +1069,7 @@ function DialogFooter({ className, ...props }) {
 }
 
 // src/ui/dropdown-menu.tsx
-var import_radix_ui5 = require("radix-ui");
+var import_radix_ui6 = require("radix-ui");
 var import_lucide_react2 = require("lucide-react");
 
 // src/design/control-surface.ts
@@ -969,13 +1110,13 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui5.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui6.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui5.DropdownMenu.Trigger,
+    import_radix_ui6.DropdownMenu.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
       ...props
@@ -985,15 +1126,15 @@ function DropdownMenuTrigger({
 function DropdownMenuGroup({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui5.DropdownMenu.Group, { "data-slot": "dropdown-menu-group", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui6.DropdownMenu.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuContent({
   className,
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui5.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui5.DropdownMenu.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui6.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_radix_ui6.DropdownMenu.Content,
     {
       "data-slot": "dropdown-menu-content",
       sideOffset,
@@ -1013,7 +1154,7 @@ function DropdownMenuItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui5.DropdownMenu.Item,
+    import_radix_ui6.DropdownMenu.Item,
     {
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
@@ -1034,14 +1175,14 @@ function DropdownMenuCheckboxItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_radix_ui5.DropdownMenu.CheckboxItem,
+    import_radix_ui6.DropdownMenu.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
       className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui5.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui6.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.CheckIcon, { className: "size-4" }) }) }),
         children
       ]
     }
@@ -1051,7 +1192,7 @@ function DropdownMenuRadioGroup({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui5.DropdownMenu.RadioGroup,
+    import_radix_ui6.DropdownMenu.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
       ...props
@@ -1064,13 +1205,13 @@ function DropdownMenuRadioItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_radix_ui5.DropdownMenu.RadioItem,
+    import_radix_ui6.DropdownMenu.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
       className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui5.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui6.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
       ]
     }
@@ -1082,7 +1223,7 @@ function DropdownMenuLabel({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui5.DropdownMenu.Label,
+    import_radix_ui6.DropdownMenu.Label,
     {
       "data-slot": "dropdown-menu-label",
       "data-inset": inset,
@@ -1099,7 +1240,7 @@ function DropdownMenuSeparator({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui5.DropdownMenu.Separator,
+    import_radix_ui6.DropdownMenu.Separator,
     {
       "data-slot": "dropdown-menu-separator",
       className: cn("-mx-1 my-1 h-px bg-border", className),
@@ -1126,7 +1267,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui5.DropdownMenu.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui6.DropdownMenu.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -1135,7 +1276,7 @@ function DropdownMenuSubTrigger({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_radix_ui5.DropdownMenu.SubTrigger,
+    import_radix_ui6.DropdownMenu.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
@@ -1157,7 +1298,7 @@ function DropdownMenuSubContent({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui5.DropdownMenu.SubContent,
+    import_radix_ui6.DropdownMenu.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
@@ -1171,22 +1312,22 @@ function DropdownMenuSubContent({
 }
 
 // src/ui/popover.tsx
-var import_radix_ui6 = require("radix-ui");
+var import_radix_ui7 = require("radix-ui");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui6.Popover.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui7.Popover.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui6.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui7.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverAnchor({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui6.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui7.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({
   className,
@@ -1195,8 +1336,8 @@ function PopoverContent({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui6.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_radix_ui6.Popover.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui7.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui7.Popover.Content,
     {
       "data-slot": "popover-content",
       "data-variant": variant,
@@ -1218,23 +1359,23 @@ function PopoverContent({
 }
 
 // src/ui/select.tsx
-var import_radix_ui7 = require("radix-ui");
+var import_radix_ui8 = require("radix-ui");
 var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui7.Select.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui8.Select.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui7.Select.Group, { "data-slot": "select-group", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui8.Select.Group, { "data-slot": "select-group", ...props });
 }
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui7.Select.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui8.Select.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -1243,7 +1384,7 @@ function SelectTrigger({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    import_radix_ui7.Select.Trigger,
+    import_radix_ui8.Select.Trigger,
     {
       "data-slot": "select-trigger",
       "data-size": size,
@@ -1255,7 +1396,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui7.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui8.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronDownIcon, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -1266,8 +1407,8 @@ function SelectContent({
   position = "popper",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui7.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    import_radix_ui7.Select.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui8.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_radix_ui8.Select.Content,
     {
       "data-slot": "select-content",
       className: cn(
@@ -1281,7 +1422,7 @@ function SelectContent({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectScrollUpButton, {}),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_radix_ui7.Select.Viewport,
+          import_radix_ui8.Select.Viewport,
           {
             className: cn(
               "p-1",
@@ -1300,7 +1441,7 @@ function SelectLabel({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_radix_ui7.Select.Label,
+    import_radix_ui8.Select.Label,
     {
       "data-slot": "select-label",
       className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className),
@@ -1314,7 +1455,7 @@ function SelectItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    import_radix_ui7.Select.Item,
+    import_radix_ui8.Select.Item,
     {
       "data-slot": "select-item",
       className: cn(
@@ -1324,8 +1465,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui7.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.CheckIcon, { className: "size-4" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui7.Select.ItemText, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui8.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui8.Select.ItemText, { children })
       ]
     }
   );
@@ -1335,7 +1476,7 @@ function SelectSeparator({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_radix_ui7.Select.Separator,
+    import_radix_ui8.Select.Separator,
     {
       "data-slot": "select-separator",
       className: cn("-mx-1 my-1 h-px bg-border", className),
@@ -1348,7 +1489,7 @@ function SelectScrollUpButton({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_radix_ui7.Select.ScrollUpButton,
+    import_radix_ui8.Select.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
       className: cn("flex cursor-default items-center justify-center py-1", className),
@@ -1362,7 +1503,7 @@ function SelectScrollDownButton({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_radix_ui7.Select.ScrollDownButton,
+    import_radix_ui8.Select.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
       className: cn("flex cursor-default items-center justify-center py-1", className),
@@ -1413,14 +1554,14 @@ function Textarea({ className, ...props }) {
 }
 
 // src/ui/label.tsx
-var import_radix_ui8 = require("radix-ui");
+var import_radix_ui9 = require("radix-ui");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function Label({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_radix_ui8.Label.Root,
+    import_radix_ui9.Label.Root,
     {
       "data-slot": "label",
       className: cn(
@@ -1434,7 +1575,7 @@ function Label({
 }
 
 // src/ui/checkbox.tsx
-var import_radix_ui9 = require("radix-ui");
+var import_radix_ui10 = require("radix-ui");
 var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function Checkbox({
@@ -1442,7 +1583,7 @@ function Checkbox({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_radix_ui9.Checkbox.Root,
+    import_radix_ui10.Checkbox.Root,
     {
       "data-slot": "checkbox",
       className: cn(
@@ -1453,11 +1594,11 @@ function Checkbox({
       ),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        import_radix_ui9.Checkbox.Indicator,
+        import_radix_ui10.Checkbox.Indicator,
         {
           "data-slot": "checkbox-indicator",
-          className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.CheckIcon, { className: "size-3.5" })
+          className: "flex items-center justify-center text-current animate-checkbox-pop",
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.CheckIcon, { className: "size-2.5 stroke-[3.5px]" })
         }
       )
     }
@@ -1465,14 +1606,14 @@ function Checkbox({
 }
 
 // src/ui/switch.tsx
-var import_radix_ui10 = require("radix-ui");
+var import_radix_ui11 = require("radix-ui");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function Switch({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_radix_ui10.Switch.Root,
+    import_radix_ui11.Switch.Root,
     {
       "data-slot": "switch",
       className: cn(
@@ -1484,7 +1625,7 @@ function Switch({
       ),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_radix_ui10.Switch.Thumb,
+        import_radix_ui11.Switch.Thumb,
         {
           "data-slot": "switch-thumb",
           className: cn(
@@ -1498,7 +1639,7 @@ function Switch({
 }
 
 // src/ui/radio-group.tsx
-var import_radix_ui11 = require("radix-ui");
+var import_radix_ui12 = require("radix-ui");
 var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function RadioGroup({
@@ -1506,7 +1647,7 @@ function RadioGroup({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_radix_ui11.RadioGroup.Root,
+    import_radix_ui12.RadioGroup.Root,
     {
       "data-slot": "radio-group",
       className: cn("grid gap-2.5", className),
@@ -1519,7 +1660,7 @@ function RadioGroupItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_radix_ui11.RadioGroup.Item,
+    import_radix_ui12.RadioGroup.Item,
     {
       "data-slot": "radio-group-item",
       className: cn(
@@ -1530,7 +1671,7 @@ function RadioGroupItem({
       ),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_radix_ui11.RadioGroup.Indicator,
+        import_radix_ui12.RadioGroup.Indicator,
         {
           "data-slot": "radio-group-indicator",
           className: "flex items-center justify-center",
@@ -1542,15 +1683,15 @@ function RadioGroupItem({
 }
 
 // src/ui/form.tsx
-var import_radix_ui12 = require("radix-ui");
+var import_radix_ui13 = require("radix-ui");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function Form({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui12.Form.Root, { "data-slot": "form", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui13.Form.Root, { "data-slot": "form", ...props });
 }
 function FormField({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui12.Form.Field, { "data-slot": "form-field", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui13.Form.Field, { "data-slot": "form-field", ...props });
 }
 function FormItem({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -1566,19 +1707,19 @@ function FormLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui12.Form.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label, { "data-slot": "form-label", className, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui13.Form.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label, { "data-slot": "form-label", className, ...props }) });
 }
 function FormControl({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui12.Form.Control, { "data-slot": "form-control", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_radix_ui13.Form.Control, { "data-slot": "form-control", ...props });
 }
 function FormMessage({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_radix_ui12.Form.Message,
+    import_radix_ui13.Form.Message,
     {
       "data-slot": "form-message",
       className: cn("text-xs text-destructive", className),
@@ -1591,7 +1732,7 @@ function FormSubmit({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_radix_ui12.Form.Submit,
+    import_radix_ui13.Form.Submit,
     {
       "data-slot": "form-submit",
       className,
@@ -1601,17 +1742,17 @@ function FormSubmit({
 }
 
 // src/ui/aspect-ratio.tsx
-var import_radix_ui13 = require("radix-ui");
+var import_radix_ui14 = require("radix-ui");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function AspectRatio({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_radix_ui13.AspectRatio.Root, { "data-slot": "aspect-ratio", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_radix_ui14.AspectRatio.Root, { "data-slot": "aspect-ratio", ...props });
 }
 
 // src/ui/breadcrumb.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_radix_ui14 = require("radix-ui");
+var import_radix_ui15 = require("radix-ui");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function Breadcrumb({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("nav", { "data-slot": "breadcrumb", "aria-label": "Breadcrumb", ...props });
@@ -1644,7 +1785,7 @@ function BreadcrumbLink({
   asChild,
   ...props
 }) {
-  const Comp = asChild ? import_radix_ui14.Slot.Root : "a";
+  const Comp = asChild ? import_radix_ui15.Slot.Root : "a";
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Comp,
     {
@@ -1803,14 +1944,14 @@ function PaginationEllipsis({
 }
 
 // src/ui/toolbar.tsx
-var import_radix_ui15 = require("radix-ui");
+var import_radix_ui16 = require("radix-ui");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function Toolbar({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_radix_ui15.Toolbar.Root,
+    import_radix_ui16.Toolbar.Root,
     {
       "data-slot": "toolbar",
       className: cn(
@@ -1826,7 +1967,7 @@ function ToolbarButton({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_radix_ui15.Toolbar.Button,
+    import_radix_ui16.Toolbar.Button,
     {
       "data-slot": "toolbar-button",
       className: cn(
@@ -1843,7 +1984,7 @@ function ToolbarSeparator({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_radix_ui15.Toolbar.Separator,
+    import_radix_ui16.Toolbar.Separator,
     {
       "data-slot": "toolbar-separator",
       className: cn("mx-1 h-6 w-px bg-border", className),
@@ -1856,7 +1997,7 @@ function ToolbarToggleGroup({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_radix_ui15.Toolbar.ToggleGroup,
+    import_radix_ui16.Toolbar.ToggleGroup,
     {
       "data-slot": "toolbar-toggle-group",
       className: cn("flex items-center gap-0.5", className),
@@ -1869,7 +2010,7 @@ function ToolbarToggleItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_radix_ui15.Toolbar.ToggleItem,
+    import_radix_ui16.Toolbar.ToggleItem,
     {
       "data-slot": "toolbar-toggle-item",
       className: cn(
@@ -1887,7 +2028,7 @@ function ToolbarLink({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_radix_ui15.Toolbar.Link,
+    import_radix_ui16.Toolbar.Link,
     {
       "data-slot": "toolbar-link",
       className: cn(
@@ -1900,7 +2041,7 @@ function ToolbarLink({
 }
 
 // src/ui/menubar.tsx
-var import_radix_ui16 = require("radix-ui");
+var import_radix_ui17 = require("radix-ui");
 var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function Menubar({
@@ -1908,7 +2049,7 @@ function Menubar({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_radix_ui16.Menubar.Root,
+    import_radix_ui17.Menubar.Root,
     {
       "data-slot": "menubar",
       className: cn(
@@ -1922,14 +2063,14 @@ function Menubar({
 function MenubarMenu({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui16.Menubar.Menu, { "data-slot": "menubar-menu", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui17.Menubar.Menu, { "data-slot": "menubar-menu", ...props });
 }
 function MenubarTrigger({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_radix_ui16.Menubar.Trigger,
+    import_radix_ui17.Menubar.Trigger,
     {
       "data-slot": "menubar-trigger",
       className: cn(
@@ -1948,8 +2089,8 @@ function MenubarContent({
   sideOffset = 8,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui16.Menubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_radix_ui16.Menubar.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui17.Menubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_radix_ui17.Menubar.Content,
     {
       "data-slot": "menubar-content",
       align,
@@ -1971,7 +2112,7 @@ function MenubarItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_radix_ui16.Menubar.Item,
+    import_radix_ui17.Menubar.Item,
     {
       "data-slot": "menubar-item",
       "data-inset": inset,
@@ -1992,14 +2133,14 @@ function MenubarCheckboxItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_radix_ui16.Menubar.CheckboxItem,
+    import_radix_ui17.Menubar.CheckboxItem,
     {
       "data-slot": "menubar-checkbox-item",
       className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui16.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui17.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CheckIcon, { className: "size-4" }) }) }),
         children
       ]
     }
@@ -2008,7 +2149,7 @@ function MenubarCheckboxItem({
 function MenubarRadioGroup({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui16.Menubar.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui17.Menubar.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
 }
 function MenubarRadioItem({
   className,
@@ -2016,13 +2157,13 @@ function MenubarRadioItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_radix_ui16.Menubar.RadioItem,
+    import_radix_ui17.Menubar.RadioItem,
     {
       "data-slot": "menubar-radio-item",
       className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui16.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui17.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
       ]
     }
@@ -2034,7 +2175,7 @@ function MenubarLabel({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_radix_ui16.Menubar.Label,
+    import_radix_ui17.Menubar.Label,
     {
       "data-slot": "menubar-label",
       "data-inset": inset,
@@ -2051,7 +2192,7 @@ function MenubarSeparator({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_radix_ui16.Menubar.Separator,
+    import_radix_ui17.Menubar.Separator,
     {
       "data-slot": "menubar-separator",
       className: cn("-mx-1 my-1 h-px bg-border", className),
@@ -2078,7 +2219,7 @@ function MenubarShortcut({
 function MenubarSub({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui16.Menubar.Sub, { "data-slot": "menubar-sub", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui17.Menubar.Sub, { "data-slot": "menubar-sub", ...props });
 }
 function MenubarSubTrigger({
   className,
@@ -2087,7 +2228,7 @@ function MenubarSubTrigger({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_radix_ui16.Menubar.SubTrigger,
+    import_radix_ui17.Menubar.SubTrigger,
     {
       "data-slot": "menubar-sub-trigger",
       "data-inset": inset,
@@ -2109,7 +2250,7 @@ function MenubarSubContent({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_radix_ui16.Menubar.SubContent,
+    import_radix_ui17.Menubar.SubContent,
     {
       "data-slot": "menubar-sub-content",
       className: cn(
@@ -2123,9 +2264,9 @@ function MenubarSubContent({
 }
 
 // src/ui/navigation-menu.tsx
-var import_radix_ui17 = require("radix-ui");
+var import_radix_ui18 = require("radix-ui");
 var import_lucide_react9 = require("lucide-react");
-var import_class_variance_authority2 = require("class-variance-authority");
+var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function NavigationMenu({
   className,
@@ -2134,7 +2275,7 @@ function NavigationMenu({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_radix_ui17.NavigationMenu.Root,
+    import_radix_ui18.NavigationMenu.Root,
     {
       "data-slot": "navigation-menu",
       "data-viewport": viewport,
@@ -2155,7 +2296,7 @@ function NavigationMenuList({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_radix_ui17.NavigationMenu.List,
+    import_radix_ui18.NavigationMenu.List,
     {
       "data-slot": "navigation-menu-list",
       className: cn(
@@ -2169,9 +2310,9 @@ function NavigationMenuList({
 function NavigationMenuItem({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_radix_ui17.NavigationMenu.Item, { "data-slot": "navigation-menu-item", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_radix_ui18.NavigationMenu.Item, { "data-slot": "navigation-menu-item", ...props });
 }
-var navigationMenuTriggerStyle = (0, import_class_variance_authority2.cva)(
+var navigationMenuTriggerStyle = (0, import_class_variance_authority3.cva)(
   "group inline-flex h-9 w-max items-center justify-center rounded-lg bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-muted/80 data-[state=open]:text-foreground"
 );
 function NavigationMenuTrigger({
@@ -2180,7 +2321,7 @@ function NavigationMenuTrigger({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_radix_ui17.NavigationMenu.Trigger,
+    import_radix_ui18.NavigationMenu.Trigger,
     {
       "data-slot": "navigation-menu-trigger",
       className: cn(navigationMenuTriggerStyle(), "group", className),
@@ -2204,11 +2345,11 @@ function NavigationMenuContent({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_radix_ui17.NavigationMenu.Content,
+    import_radix_ui18.NavigationMenu.Content,
     {
       "data-slot": "navigation-menu-content",
       className: cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-1 md:absolute md:w-auto",
         "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-border group-data-[viewport=false]/navigation-menu:shadow-card",
         className
       ),
@@ -2221,7 +2362,7 @@ function NavigationMenuViewport({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("absolute top-full left-0 isolate z-[80] flex justify-center"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_radix_ui17.NavigationMenu.Viewport,
+    import_radix_ui18.NavigationMenu.Viewport,
     {
       "data-slot": "navigation-menu-viewport",
       className: cn(
@@ -2238,11 +2379,11 @@ function NavigationMenuLink({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_radix_ui17.NavigationMenu.Link,
+    import_radix_ui18.NavigationMenu.Link,
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "flex flex-col gap-1 rounded-md p-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        "flex flex-col gap-1 rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -2254,7 +2395,7 @@ function NavigationMenuIndicator({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_radix_ui17.NavigationMenu.Indicator,
+    import_radix_ui18.NavigationMenu.Indicator,
     {
       "data-slot": "navigation-menu-indicator",
       className: cn(
@@ -2425,7 +2566,7 @@ function CommandShortcut({
 }
 
 // src/ui/calendar.tsx
-var React3 = __toESM(require("react"), 1);
+var React2 = __toESM(require("react"), 1);
 var import_lucide_react11 = require("lucide-react");
 var import_react_day_picker = require("react-day-picker");
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -2519,8 +2660,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React3.useRef(null);
-  React3.useEffect(() => {
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   const isSingle = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle;
@@ -2731,7 +2872,7 @@ function DatePickerButton({
 
 // src/ui/input-otp.tsx
 var import_lucide_react14 = require("lucide-react");
-var import_radix_ui18 = require("radix-ui");
+var import_radix_ui19 = require("radix-ui");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function InputOTP({
   className,
@@ -2740,7 +2881,7 @@ function InputOTP({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_radix_ui18.unstable_OneTimePasswordField.Root,
+    import_radix_ui19.unstable_OneTimePasswordField.Root,
     {
       "data-slot": "input-otp",
       className: cn(
@@ -2771,7 +2912,7 @@ function InputOTPSlot({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_radix_ui18.unstable_OneTimePasswordField.Input,
+    import_radix_ui19.unstable_OneTimePasswordField.Input,
     {
       "data-slot": "input-otp-slot",
       className: cn(
@@ -2788,7 +2929,7 @@ function InputOTPSlot({
 function InputOTPHiddenInput({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_radix_ui18.unstable_OneTimePasswordField.HiddenInput, { "data-slot": "input-otp-hidden-input", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_radix_ui19.unstable_OneTimePasswordField.HiddenInput, { "data-slot": "input-otp-hidden-input", ...props });
 }
 function InputOTPSeparator({
   className,
@@ -2946,20 +3087,20 @@ function InputGroupText({
 }
 
 // src/ui/accordion.tsx
-var import_radix_ui19 = require("radix-ui");
+var import_radix_ui20 = require("radix-ui");
 var import_lucide_react15 = require("lucide-react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function Accordion({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui19.Accordion.Root, { "data-slot": "accordion", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui20.Accordion.Root, { "data-slot": "accordion", ...props });
 }
 function AccordionItem({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_radix_ui19.Accordion.Item,
+    import_radix_ui20.Accordion.Item,
     {
       "data-slot": "accordion-item",
       className: cn("border-b border-border last:border-b-0", className),
@@ -2972,8 +3113,8 @@ function AccordionTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui19.Accordion.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    import_radix_ui19.Accordion.Trigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui20.Accordion.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    import_radix_ui20.Accordion.Trigger,
     {
       "data-slot": "accordion-trigger",
       className: cn(
@@ -2996,7 +3137,7 @@ function AccordionContent({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_radix_ui19.Accordion.Content,
+    import_radix_ui20.Accordion.Content,
     {
       "data-slot": "accordion-content",
       className: "overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
@@ -3007,7 +3148,7 @@ function AccordionContent({
 }
 
 // src/ui/separator.tsx
-var import_radix_ui20 = require("radix-ui");
+var import_radix_ui21 = require("radix-ui");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function Separator({
   className,
@@ -3016,7 +3157,7 @@ function Separator({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_radix_ui20.Separator.Root,
+    import_radix_ui21.Separator.Root,
     {
       "data-slot": "separator",
       decorative,
@@ -3031,8 +3172,8 @@ function Separator({
 }
 
 // src/ui/slider.tsx
-var React4 = __toESM(require("react"), 1);
-var import_radix_ui21 = require("radix-ui");
+var React3 = __toESM(require("react"), 1);
+var import_radix_ui22 = require("radix-ui");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function Slider({
   className,
@@ -3042,13 +3183,13 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const thumbs = React4.useMemo(() => {
+  const thumbs = React3.useMemo(() => {
     if (Array.isArray(value)) return value;
     if (Array.isArray(defaultValue)) return defaultValue;
     return [min];
   }, [value, defaultValue, min]);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    import_radix_ui21.Slider.Root,
+    import_radix_ui22.Slider.Root,
     {
       "data-slot": "slider",
       defaultValue,
@@ -3063,12 +3204,12 @@ function Slider({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          import_radix_ui21.Slider.Track,
+          import_radix_ui22.Slider.Track,
           {
             "data-slot": "slider-track",
             className: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
             children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-              import_radix_ui21.Slider.Range,
+              import_radix_ui22.Slider.Range,
               {
                 "data-slot": "slider-range",
                 className: "absolute bg-gradient-to-b from-primary-fill-from to-primary-fill-to data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
@@ -3077,7 +3218,7 @@ function Slider({
           }
         ),
         Array.from({ length: thumbs.length }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          import_radix_ui21.Slider.Thumb,
+          import_radix_ui22.Slider.Thumb,
           {
             "data-slot": "slider-thumb",
             className: "block size-4 shrink-0 rounded-full border border-border bg-gradient-to-b from-elevated-from to-elevated-to shadow-card outline-none transition-[box-shadow] focus-visible:ring-2 focus-visible:ring-foreground/10 disabled:pointer-events-none disabled:opacity-50"
@@ -3090,7 +3231,7 @@ function Slider({
 }
 
 // src/ui/progress.tsx
-var import_radix_ui22 = require("radix-ui");
+var import_radix_ui23 = require("radix-ui");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function Progress({
   className,
@@ -3098,7 +3239,7 @@ function Progress({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_radix_ui22.Progress.Root,
+    import_radix_ui23.Progress.Root,
     {
       "data-slot": "progress",
       className: cn(
@@ -3107,7 +3248,7 @@ function Progress({
       ),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        import_radix_ui22.Progress.Indicator,
+        import_radix_ui23.Progress.Indicator,
         {
           "data-slot": "progress-indicator",
           className: "h-full w-full flex-1 bg-gradient-to-b from-primary-fill-from to-primary-fill-to transition-transform",
@@ -3119,10 +3260,10 @@ function Progress({
 }
 
 // src/ui/badge.tsx
-var import_radix_ui23 = require("radix-ui");
-var import_class_variance_authority3 = require("class-variance-authority");
+var import_radix_ui24 = require("radix-ui");
+var import_class_variance_authority4 = require("class-variance-authority");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var badgeVariants = (0, import_class_variance_authority3.cva)(
+var badgeVariants = (0, import_class_variance_authority4.cva)(
   "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
@@ -3144,7 +3285,7 @@ function Badge({
   asChild = false,
   ...props
 }) {
-  const Comp = asChild ? import_radix_ui23.Slot.Root : "span";
+  const Comp = asChild ? import_radix_ui24.Slot.Root : "span";
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Comp,
     {
@@ -3157,59 +3298,85 @@ function Badge({
 
 // src/ui/sheet.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_radix_ui24 = require("radix-ui");
-var import_class_variance_authority4 = require("class-variance-authority");
+var import_radix_ui25 = require("radix-ui");
+var import_class_variance_authority5 = require("class-variance-authority");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui24.Dialog.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui25.Dialog.Root, { "data-slot": "sheet", ...props });
 }
 function SheetTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui24.Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui25.Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
 }
 function SheetClose({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui24.Dialog.Close, { "data-slot": "sheet-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui25.Dialog.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui24.Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui25.Dialog.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_radix_ui24.Dialog.Overlay,
+    import_radix_ui25.Dialog.Overlay,
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[70] bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[70] bg-black/40 backdrop-blur-[2px] duration-300",
         className
       ),
       ...props
     }
   );
 }
-var sheetContentVariants = (0, import_class_variance_authority4.cva)(
+var sheetContentVariants = (0, import_class_variance_authority5.cva)(
   cn(
     TIMBAL_V2_MODAL_SURFACE,
-    "data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-[70] flex flex-col gap-4 shadow-card-elevated transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500"
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 fixed z-[70] flex flex-col gap-4 shadow-card-elevated duration-300"
   ),
   {
     variants: {
       side: {
-        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b p-6",
-        bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t p-6",
-        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r p-6 sm:max-w-sm",
-        right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l p-6 sm:max-w-sm"
+        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top fixed top-4 inset-x-4 mx-auto w-[calc(100vw-2rem)] sm:max-w-lg rounded-2xl p-6",
+        bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom fixed bottom-4 inset-x-4 mx-auto w-[calc(100vw-2rem)] sm:max-w-lg rounded-2xl p-6",
+        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left fixed top-4 bottom-4 left-4 w-[calc(100vw-2rem)] rounded-2xl p-6",
+        right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right fixed top-4 bottom-4 right-4 w-[calc(100vw-2rem)] rounded-2xl p-6"
+      },
+      size: {
+        default: "",
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+        "2xl": "",
+        full: ""
       }
     },
+    compoundVariants: [
+      { side: "left", size: "default", class: "sm:max-w-md md:max-w-lg" },
+      { side: "right", size: "default", class: "sm:max-w-md md:max-w-lg" },
+      { side: "left", size: "sm", class: "sm:max-w-sm md:max-w-md" },
+      { side: "right", size: "sm", class: "sm:max-w-sm md:max-w-md" },
+      { side: "left", size: "md", class: "sm:max-w-md md:max-w-lg" },
+      { side: "right", size: "md", class: "sm:max-w-md md:max-w-lg" },
+      { side: "left", size: "lg", class: "sm:max-w-lg md:max-w-xl lg:max-w-2xl" },
+      { side: "right", size: "lg", class: "sm:max-w-lg md:max-w-xl lg:max-w-2xl" },
+      { side: "left", size: "xl", class: "sm:max-w-xl md:max-w-3xl lg:max-w-4xl" },
+      { side: "right", size: "xl", class: "sm:max-w-xl md:max-w-3xl lg:max-w-4xl" },
+      { side: "left", size: "2xl", class: "sm:max-w-2xl md:max-w-4xl lg:max-w-5xl xl:max-w-6xl" },
+      { side: "right", size: "2xl", class: "sm:max-w-2xl md:max-w-4xl lg:max-w-5xl xl:max-w-6xl" },
+      { side: "left", size: "full", class: "max-w-[calc(100vw-2rem)]" },
+      { side: "right", size: "full", class: "max-w-[calc(100vw-2rem)]" }
+    ],
     defaultVariants: {
-      side: "right"
+      side: "right",
+      size: "default"
     }
   }
 );
@@ -3217,20 +3384,21 @@ function SheetContent({
   className,
   children,
   side = "right",
+  size = "default",
   showCloseButton = true,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SheetPortal, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SheetOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-      import_radix_ui24.Dialog.Content,
+      import_radix_ui25.Dialog.Content,
       {
         "data-slot": "sheet-content",
-        className: cn(sheetContentVariants({ side }), className),
+        className: cn(sheetContentVariants({ side, size }), className),
         ...props,
         children: [
           children,
-          showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_radix_ui24.Dialog.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 transition-[opacity,background-color] hover:bg-ghost-fill-hover hover:opacity-100 focus:ring-2 focus:ring-foreground/10 focus:outline-hidden disabled:pointer-events-none", children: [
+          showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_radix_ui25.Dialog.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 transition-[opacity,background-color] hover:bg-ghost-fill-hover hover:opacity-100 focus:ring-2 focus:ring-foreground/10 focus:outline-hidden disabled:pointer-events-none", children: [
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react16.XIcon, { className: "size-4" }),
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: "Close" })
           ] }) : null
@@ -3264,7 +3432,7 @@ function SheetTitle({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_radix_ui24.Dialog.Title,
+    import_radix_ui25.Dialog.Title,
     {
       "data-slot": "sheet-title",
       className: cn("text-lg font-semibold text-foreground", className),
@@ -3277,7 +3445,7 @@ function SheetDescription({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_radix_ui24.Dialog.Description,
+    import_radix_ui25.Dialog.Description,
     {
       "data-slot": "sheet-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -3287,29 +3455,29 @@ function SheetDescription({
 }
 
 // src/ui/alert-dialog.tsx
-var import_radix_ui25 = require("radix-ui");
+var import_radix_ui26 = require("radix-ui");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function AlertDialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui25.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui26.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
 }
 function AlertDialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui25.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui26.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
 }
 function AlertDialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui25.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui26.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
 function AlertDialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_radix_ui25.AlertDialog.Overlay,
+    import_radix_ui26.AlertDialog.Overlay,
     {
       "data-slot": "alert-dialog-overlay",
       className: cn(
@@ -3327,7 +3495,7 @@ function AlertDialogContent({
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(AlertDialogPortal, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AlertDialogOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      import_radix_ui25.AlertDialog.Content,
+      import_radix_ui26.AlertDialog.Content,
       {
         "data-slot": "alert-dialog-content",
         className: cn(
@@ -3368,7 +3536,7 @@ function AlertDialogTitle({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_radix_ui25.AlertDialog.Title,
+    import_radix_ui26.AlertDialog.Title,
     {
       "data-slot": "alert-dialog-title",
       className: cn("text-lg font-semibold", className),
@@ -3381,7 +3549,7 @@ function AlertDialogDescription({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_radix_ui25.AlertDialog.Description,
+    import_radix_ui26.AlertDialog.Description,
     {
       "data-slot": "alert-dialog-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -3394,7 +3562,7 @@ function AlertDialogAction({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_radix_ui25.AlertDialog.Action,
+    import_radix_ui26.AlertDialog.Action,
     {
       "data-slot": "alert-dialog-action",
       className,
@@ -3407,7 +3575,7 @@ function AlertDialogCancel({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_radix_ui25.AlertDialog.Cancel,
+    import_radix_ui26.AlertDialog.Cancel,
     {
       "data-slot": "alert-dialog-cancel",
       className,
@@ -3417,24 +3585,24 @@ function AlertDialogCancel({
 }
 
 // src/ui/collapsible.tsx
-var import_radix_ui26 = require("radix-ui");
+var import_radix_ui27 = require("radix-ui");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui26.Collapsible.Root, { "data-slot": "collapsible", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui27.Collapsible.Root, { "data-slot": "collapsible", ...props });
 }
 function CollapsibleTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui26.Collapsible.Trigger, { "data-slot": "collapsible-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui27.Collapsible.Trigger, { "data-slot": "collapsible-trigger", ...props });
 }
 function CollapsibleContent({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_radix_ui26.Collapsible.Content,
+    import_radix_ui27.Collapsible.Content,
     {
       "data-slot": "collapsible-content",
       className: cn(
@@ -3447,7 +3615,7 @@ function CollapsibleContent({
 }
 
 // src/ui/scroll-area.tsx
-var import_radix_ui27 = require("radix-ui");
+var import_radix_ui28 = require("radix-ui");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function ScrollArea({
   className,
@@ -3455,14 +3623,14 @@ function ScrollArea({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-    import_radix_ui27.ScrollArea.Root,
+    import_radix_ui28.ScrollArea.Root,
     {
       "data-slot": "scroll-area",
       className: cn("relative overflow-hidden", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_radix_ui27.ScrollArea.Viewport,
+          import_radix_ui28.ScrollArea.Viewport,
           {
             "data-slot": "scroll-area-viewport",
             className: "size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-foreground/10",
@@ -3470,7 +3638,7 @@ function ScrollArea({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrollBar, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_radix_ui27.ScrollArea.Corner, {})
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_radix_ui28.ScrollArea.Corner, {})
       ]
     }
   );
@@ -3481,7 +3649,7 @@ function ScrollBar({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_radix_ui27.ScrollArea.ScrollAreaScrollbar,
+    import_radix_ui28.ScrollArea.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
       orientation,
@@ -3493,7 +3661,7 @@ function ScrollBar({
       ),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-        import_radix_ui27.ScrollArea.ScrollAreaThumb,
+        import_radix_ui28.ScrollArea.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
           className: "relative flex-1 rounded-full bg-border"
@@ -3504,10 +3672,10 @@ function ScrollBar({
 }
 
 // src/ui/toggle.tsx
-var import_radix_ui28 = require("radix-ui");
-var import_class_variance_authority5 = require("class-variance-authority");
+var import_radix_ui29 = require("radix-ui");
+var import_class_variance_authority6 = require("class-variance-authority");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var toggleVariants = (0, import_class_variance_authority5.cva)(
+var toggleVariants = (0, import_class_variance_authority6.cva)(
   "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium whitespace-nowrap outline-none transition-[color,box-shadow,background-color,border-color] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
   {
     variants: {
@@ -3544,7 +3712,7 @@ function Toggle({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    import_radix_ui28.Toggle.Root,
+    import_radix_ui29.Toggle.Root,
     {
       "data-slot": "toggle",
       className: cn(toggleVariants({ variant, size, className })),
@@ -3554,14 +3722,14 @@ function Toggle({
 }
 
 // src/ui/toggle-group.tsx
-var import_radix_ui29 = require("radix-ui");
+var import_radix_ui30 = require("radix-ui");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function ToggleGroup({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    import_radix_ui29.ToggleGroup.Root,
+    import_radix_ui30.ToggleGroup.Root,
     {
       "data-slot": "toggle-group",
       className: cn("flex items-center gap-1", className),
@@ -3574,7 +3742,7 @@ function ToggleGroupItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    import_radix_ui29.ToggleGroup.Item,
+    import_radix_ui30.ToggleGroup.Item,
     {
       "data-slot": "toggle-group-item",
       className: cn(toggleVariants({ variant: "default", size: "default" }), className),
@@ -3584,17 +3752,17 @@ function ToggleGroupItem({
 }
 
 // src/ui/hover-card.tsx
-var import_radix_ui30 = require("radix-ui");
+var import_radix_ui31 = require("radix-ui");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function HoverCard({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_radix_ui30.HoverCard.Root, { "data-slot": "hover-card", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_radix_ui31.HoverCard.Root, { "data-slot": "hover-card", ...props });
 }
 function HoverCardTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_radix_ui30.HoverCard.Trigger, { "data-slot": "hover-card-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_radix_ui31.HoverCard.Trigger, { "data-slot": "hover-card-trigger", ...props });
 }
 function HoverCardContent({
   className,
@@ -3602,8 +3770,8 @@ function HoverCardContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_radix_ui30.HoverCard.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    import_radix_ui30.HoverCard.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_radix_ui31.HoverCard.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_radix_ui31.HoverCard.Content,
     {
       "data-slot": "hover-card-content",
       align,
@@ -3619,30 +3787,30 @@ function HoverCardContent({
 }
 
 // src/ui/context-menu.tsx
-var import_radix_ui31 = require("radix-ui");
+var import_radix_ui32 = require("radix-ui");
 var import_lucide_react17 = require("lucide-react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function ContextMenu({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui31.ContextMenu.Root, { "data-slot": "context-menu", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui32.ContextMenu.Root, { "data-slot": "context-menu", ...props });
 }
 function ContextMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui31.ContextMenu.Trigger, { "data-slot": "context-menu-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui32.ContextMenu.Trigger, { "data-slot": "context-menu-trigger", ...props });
 }
 function ContextMenuGroup({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui31.ContextMenu.Group, { "data-slot": "context-menu-group", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui32.ContextMenu.Group, { "data-slot": "context-menu-group", ...props });
 }
 function ContextMenuContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui31.ContextMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_radix_ui31.ContextMenu.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui32.ContextMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_radix_ui32.ContextMenu.Content,
     {
       "data-slot": "context-menu-content",
       className: cn(
@@ -3661,7 +3829,7 @@ function ContextMenuItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_radix_ui31.ContextMenu.Item,
+    import_radix_ui32.ContextMenu.Item,
     {
       "data-slot": "context-menu-item",
       "data-inset": inset,
@@ -3682,14 +3850,14 @@ function ContextMenuCheckboxItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-    import_radix_ui31.ContextMenu.CheckboxItem,
+    import_radix_ui32.ContextMenu.CheckboxItem,
     {
       "data-slot": "context-menu-checkbox-item",
       className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui31.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui32.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.CheckIcon, { className: "size-4" }) }) }),
         children
       ]
     }
@@ -3699,7 +3867,7 @@ function ContextMenuRadioGroup({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_radix_ui31.ContextMenu.RadioGroup,
+    import_radix_ui32.ContextMenu.RadioGroup,
     {
       "data-slot": "context-menu-radio-group",
       ...props
@@ -3712,13 +3880,13 @@ function ContextMenuRadioItem({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-    import_radix_ui31.ContextMenu.RadioItem,
+    import_radix_ui32.ContextMenu.RadioItem,
     {
       "data-slot": "context-menu-radio-item",
       className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui31.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui32.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
       ]
     }
@@ -3730,7 +3898,7 @@ function ContextMenuLabel({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_radix_ui31.ContextMenu.Label,
+    import_radix_ui32.ContextMenu.Label,
     {
       "data-slot": "context-menu-label",
       "data-inset": inset,
@@ -3747,7 +3915,7 @@ function ContextMenuSeparator({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_radix_ui31.ContextMenu.Separator,
+    import_radix_ui32.ContextMenu.Separator,
     {
       "data-slot": "context-menu-separator",
       className: cn("-mx-1 my-1 h-px bg-border", className),
@@ -3774,7 +3942,7 @@ function ContextMenuShortcut({
 function ContextMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui31.ContextMenu.Sub, { "data-slot": "context-menu-sub", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_radix_ui32.ContextMenu.Sub, { "data-slot": "context-menu-sub", ...props });
 }
 function ContextMenuSubTrigger({
   className,
@@ -3783,7 +3951,7 @@ function ContextMenuSubTrigger({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-    import_radix_ui31.ContextMenu.SubTrigger,
+    import_radix_ui32.ContextMenu.SubTrigger,
     {
       "data-slot": "context-menu-sub-trigger",
       "data-inset": inset,
@@ -3805,7 +3973,7 @@ function ContextMenuSubContent({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_radix_ui31.ContextMenu.SubContent,
+    import_radix_ui32.ContextMenu.SubContent,
     {
       "data-slot": "context-menu-sub-content",
       className: cn(
@@ -3819,9 +3987,9 @@ function ContextMenuSubContent({
 }
 
 // src/ui/alert.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
+var import_class_variance_authority7 = require("class-variance-authority");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var alertVariants = (0, import_class_variance_authority6.cva)(
+var alertVariants = (0, import_class_variance_authority7.cva)(
   "relative grid w-full gap-1 rounded-xl border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:top-3.5 [&>svg]:left-4 [&>svg]:size-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
   {
     variants: {
@@ -3945,13 +4113,13 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/ui/chart.tsx
-var React5 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var RechartsPrimitive = __toESM(require("recharts"), 1);
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React5.createContext(null);
+var ChartContext = React4.createContext(null);
 function useChart() {
-  const context = React5.useContext(ChartContext);
+  const context = React4.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -3964,7 +4132,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React5.useId();
+  const uniqueId = React4.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
@@ -3978,7 +4146,7 @@ function ChartContainer({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RechartsPrimitive.ResponsiveContainer, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children })
       ]
     }
   ) });
@@ -4009,6 +4177,36 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
+var CHART_TOOLTIP_SURFACE = "rounded-xl border px-5 py-4 text-left text-[11px] leading-snug shadow-[0_12px_40px_-10px_rgba(0,0,0,0.55)] border-white/10 bg-gradient-to-b from-neutral-800 to-neutral-950 text-white dark:border-black/10 dark:from-white dark:to-neutral-100 dark:text-neutral-900";
+var CHART_TOOLTIP_TEXT = "text-white dark:text-neutral-900";
+var CHART_TOOLTIP_MUTED = "text-neutral-300 dark:text-neutral-600";
+function isCssColor(value) {
+  return typeof value === "string" && value.length > 0 && !value.startsWith("url(");
+}
+function resolvePayloadConfigKey(payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return key;
+  }
+  const row = payload;
+  const nested = "payload" in row && typeof row.payload === "object" && row.payload !== null ? row.payload : void 0;
+  if (key in row && typeof row[key] === "string") {
+    return row[key];
+  }
+  if (nested && key in nested && typeof nested[key] === "string") {
+    return nested[key];
+  }
+  if (typeof row.value === "string") {
+    return row.value;
+  }
+  return key;
+}
+function resolveSwatchColor(itemConfig, configKey, ...candidates) {
+  for (const candidate of candidates) {
+    if (isCssColor(candidate)) return candidate;
+  }
+  if (isCssColor(itemConfig?.color)) return itemConfig.color;
+  return `var(--color-${configKey})`;
+}
 function ChartTooltipContent({
   active,
   payload,
@@ -4020,12 +4218,13 @@ function ChartTooltipContent({
   labelFormatter,
   labelClassName,
   formatter,
+  valueFormatter,
   color,
   nameKey,
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React5.useMemo(() => {
+  const tooltipLabel = React4.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -4034,12 +4233,12 @@ function ChartTooltipContent({
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
     if (labelFormatter) {
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("font-medium leading-none", labelClassName), children: labelFormatter(value, payload) });
     }
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("font-medium", labelClassName), children: value });
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("font-medium leading-none", labelClassName), children: value });
   }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
   if (!active || !payload?.length) {
     return null;
@@ -4049,7 +4248,8 @@ function ChartTooltipContent({
     "div",
     {
       className: cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-[8rem] items-start gap-1.5",
+        CHART_TOOLTIP_SURFACE,
         "animate-in fade-in-0 zoom-in-95 duration-150",
         className
       ),
@@ -4057,31 +4257,35 @@ function ChartTooltipContent({
         !nestLabel ? tooltipLabel : null,
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
           const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const configKey = resolvePayloadConfigKey(item, key);
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload?.fill || item.color;
+          const indicatorColor = resolveSwatchColor(
+            itemConfig,
+            configKey,
+            color,
+            item.payload?.fill,
+            item.color
+          );
           return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "div",
             {
               className: cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-neutral-500 dark:[&>svg]:text-neutral-400",
                 indicator === "dot" && "items-center"
               ),
               children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
                 itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   "div",
                   {
-                    className: cn(
-                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                      {
-                        "h-2.5 w-2.5": indicator === "dot",
-                        "w-1": indicator === "line",
-                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                        "my-0.5": nestLabel && indicator === "dashed"
-                      }
-                    ),
+                    className: cn("shrink-0 rounded-[2px]", {
+                      "h-2.5 w-2.5": indicator === "dot",
+                      "w-1": indicator === "line",
+                      "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                      "my-0.5": nestLabel && indicator === "dashed"
+                    }),
                     style: {
-                      "--color-bg": indicatorColor,
-                      "--color-border": indicatorColor
+                      backgroundColor: indicator === "dashed" ? void 0 : indicatorColor,
+                      borderColor: indicatorColor
                     }
                   }
                 ),
@@ -4089,15 +4293,15 @@ function ChartTooltipContent({
                   "div",
                   {
                     className: cn(
-                      "flex flex-1 justify-between leading-none",
+                      "flex flex-1 justify-between gap-3 leading-none",
                       nestLabel ? "items-end" : "items-center"
                     ),
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: CHART_TOOLTIP_MUTED, children: itemConfig?.label || item.name })
                       ] }),
-                      item.value != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-foreground font-mono font-medium tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
+                      item.value != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: cn("font-medium tabular-nums", CHART_TOOLTIP_TEXT), children: valueFormatter ? valueFormatter(item.value, item) : typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
                     ]
                   }
                 )
@@ -4132,7 +4336,9 @@ function ChartLegendContent({
       ),
       children: payload.filter((item) => item.type !== "none").map((item, index) => {
         const key = `${nameKey || item.dataKey || "value"}`;
+        const configKey = resolvePayloadConfigKey(item, key);
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const swatchColor = resolveSwatchColor(itemConfig, configKey, item.color);
         return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           "div",
           {
@@ -4142,7 +4348,7 @@ function ChartLegendContent({
                 "div",
                 {
                   className: "h-2 w-2 shrink-0 rounded-[2px]",
-                  style: { backgroundColor: item.color }
+                  style: { backgroundColor: swatchColor }
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "min-w-0 truncate", children: itemConfig?.label ?? (item.value != null ? String(item.value) : null) })
@@ -4158,13 +4364,7 @@ function getPayloadConfigFromPayload(config, payload, key) {
   if (typeof payload !== "object" || payload === null) {
     return void 0;
   }
-  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
-  let configLabelKey = key;
-  if (key in payload && typeof payload[key] === "string") {
-    configLabelKey = payload[key];
-  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
-    configLabelKey = payloadPayload[key];
-  }
+  const configLabelKey = resolvePayloadConfigKey(payload, key);
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
@@ -4264,20 +4464,20 @@ function TableCaption({ className, ...props }) {
 }
 
 // src/ui/toast.tsx
-var import_radix_ui32 = require("radix-ui");
+var import_radix_ui33 = require("radix-ui");
 var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function ToastProvider({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_radix_ui32.Toast.Provider, { "data-slot": "toast-provider", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_radix_ui33.Toast.Provider, { "data-slot": "toast-provider", ...props });
 }
 function ToastViewport({
   className,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_radix_ui32.Toast.Viewport,
+    import_radix_ui33.Toast.Viewport,
     {
       "data-slot": "toast-viewport",
       className: cn(
@@ -4294,7 +4494,7 @@ function Toast({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_radix_ui32.Toast.Root,
+    import_radix_ui33.Toast.Root,
     {
       "data-slot": "toast",
       className: cn(
@@ -4313,7 +4513,7 @@ function ToastAction({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_radix_ui32.Toast.Action,
+    import_radix_ui33.Toast.Action,
     {
       "data-slot": "toast-action",
       className: cn(
@@ -4329,7 +4529,7 @@ function ToastClose({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_radix_ui32.Toast.Close,
+    import_radix_ui33.Toast.Close,
     {
       "data-slot": "toast-close",
       className: cn(
@@ -4347,7 +4547,7 @@ function ToastTitle({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_radix_ui32.Toast.Title,
+    import_radix_ui33.Toast.Title,
     {
       "data-slot": "toast-title",
       className: cn("text-sm font-medium", className),
@@ -4360,7 +4560,7 @@ function ToastDescription({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_radix_ui32.Toast.Description,
+    import_radix_ui33.Toast.Description,
     {
       "data-slot": "toast-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -4370,7 +4570,7 @@ function ToastDescription({
 }
 
 // src/ui/use-toast.ts
-var React6 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 var TOAST_LIMIT = 3;
 var TOAST_REMOVE_DELAY = 5e3;
 var listeners = /* @__PURE__ */ new Set();
@@ -4423,8 +4623,8 @@ function toast(input) {
   return memoryState.add(input);
 }
 function useToast() {
-  const [state, setState] = React6.useState(memoryState);
-  React6.useEffect(() => {
+  const [state, setState] = React5.useState(memoryState);
+  React5.useEffect(() => {
     listeners.add(setState);
     return () => {
       listeners.delete(setState);
@@ -4479,30 +4679,159 @@ var ShimmerComponent = ({
     () => (children?.length ?? 0) * spread,
     [children, spread]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    MotionComponent,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    MotionComponent,
+    {
+      animate: { backgroundPosition: "0% center" },
+      className: cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      ),
+      initial: { backgroundPosition: "100% center" },
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
+      },
+      transition: {
+        repeat: Number.POSITIVE_INFINITY,
+        duration,
+        ease: "linear"
+      },
+      children
+    }
+  );
+};
+var Shimmer = (0, import_react2.memo)(ShimmerComponent);
+
+// src/ui/timbal-v2-button.tsx
+var React6 = __toESM(require("react"), 1);
+var import_radix_ui34 = require("radix-ui");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var TIMBAL_V2_FILL_AS_CHILD = {
+  primary: [
+    "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
+    "hover:from-primary-fill-hover-from hover:to-primary-fill-hover-to",
+    "active:from-primary-fill-active-from active:to-primary-fill-active-to"
+  ].join(" "),
+  informative: [
+    TIMBAL_V2_PRIMARY_GRADIENT,
+    "hover:from-primary-fill-hover-from hover:to-primary-fill-hover-to",
+    "active:from-primary-fill-active-from active:to-primary-fill-active-to",
+    "active:[background-image:linear-gradient(to_top,rgba(0,0,0,0.08),transparent_55%)]"
+  ].join(" "),
+  destructive: [
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "hover:from-destructive-fill-hover-from hover:to-destructive-fill-hover-to",
+    "active:from-destructive-fill-active-from active:to-destructive-fill-active-to"
+  ].join(" "),
+  "destructive-solid": [
+    "bg-gradient-to-b from-destructive-solid-from to-destructive-solid-to",
+    "hover:from-destructive-solid-hover-from hover:to-destructive-solid-hover-to",
+    "active:from-destructive-solid-active-from active:to-destructive-solid-active-to"
+  ].join(" "),
+  secondary: [
+    TIMBAL_V2_ELEVATED_GRADIENT,
+    "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+    "active:from-secondary-fill-active-from active:to-secondary-fill-active-to"
+  ].join(" "),
+  ghost: [
+    "bg-transparent",
+    "hover:bg-ghost-fill-hover",
+    "active:bg-ghost-fill-active"
+  ].join(" "),
+  link: "bg-transparent"
+};
+var TIMBAL_V2_LABEL_AS_CHILD = {
+  ...TIMBAL_V2_LABEL,
+  link: "text-foreground underline decoration-foreground/25 underline-offset-2 hover:decoration-foreground/45"
+};
+var TimbalV2Button = React6.forwardRef(function TimbalV2Button2({
+  variant = "secondary",
+  size = "sm",
+  isIconOnly = false,
+  isLoading = false,
+  fullWidth = false,
+  shape = "pill",
+  asChild = false,
+  className,
+  disabled,
+  type = "button",
+  children,
+  ...props
+}, ref) {
+  const isDisabled = disabled || isLoading;
+  const sizeClass2 = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
+  const radiusClass = shape === "rect" ? "rounded-lg" : "rounded-full";
+  const sharedRootClass = cn(
+    "relative box-border inline-flex items-center justify-center gap-2 whitespace-nowrap border-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    sizeClass2,
+    radiusClass,
+    TIMBAL_V2_BORDER[variant],
+    TIMBAL_V2_SHADOW[variant],
+    fullWidth && "w-full",
+    isDisabled && "pointer-events-none opacity-50",
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      import_radix_ui34.Slot.Root,
+      {
+        ref,
+        "aria-disabled": isDisabled ? true : void 0,
+        "data-slot": "timbal-v2-button",
+        "data-variant": variant,
+        className: cn(
+          sharedRootClass,
+          TIMBAL_V2_FILL_AS_CHILD[variant],
+          !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
+          TIMBAL_V2_LABEL_AS_CHILD[variant]
+        ),
+        ...props,
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    "button",
     {
-      animate: { backgroundPosition: "0% center" },
+      ref,
+      type,
+      disabled: isDisabled,
+      "data-slot": "timbal-v2-button",
+      "data-variant": variant,
       className: cn(
-        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
-        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
-        className
+        "group/tbv2 flex-col items-stretch overflow-hidden bg-transparent p-0",
+        sharedRootClass
       ),
-      initial: { backgroundPosition: "100% center" },
-      style: {
-        "--spread": `${dynamicSpread}px`,
-        backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
-      },
-      transition: {
-        repeat: Number.POSITIVE_INFINITY,
-        duration,
-        ease: "linear"
-      },
-      children
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+              TIMBAL_V2_FILL[variant]
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          "span",
+          {
+            className: cn(
+              "relative z-10 flex min-h-0 flex-1 items-center justify-center gap-1 leading-tight",
+              !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
+              TIMBAL_V2_LABEL[variant]
+            ),
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
+          }
+        )
+      ]
     }
   );
-};
-var Shimmer = (0, import_react2.memo)(ShimmerComponent);
+});
 
 // src/ui/pill-segmented-tabs.tsx
 var import_react3 = require("react");
@@ -4539,7 +4868,7 @@ var pillSegmentedActiveIndicatorClass = cn(
 );
 
 // src/ui/pill-segmented-tabs.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var PillTab = ({
   tabKey,
   label,
@@ -4553,7 +4882,7 @@ var PillTab = ({
   const handlePress = (0, import_react3.useCallback)(() => {
     if (!disabled) onSelect(tabKey);
   }, [disabled, onSelect, tabKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "button",
     {
       type: "button",
@@ -4566,15 +4895,15 @@ var PillTab = ({
         !disabled && (isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground")
       ),
       children: [
-        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        isActive && animateIndicator ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           import_react4.motion.div,
           {
             layoutId,
             className: pillSegmentedActiveIndicatorClass,
             transition: { type: "spring", duration: 0.3, bounce: 0.15 }
           }
-        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
+        ) : isActive ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: pillSegmentedActiveIndicatorClass, "aria-hidden": true }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "relative z-10 whitespace-nowrap", children: label })
       ]
     }
   );
@@ -4594,7 +4923,7 @@ var PillSegmentedTabs = ({
   const isFlush = trackVariant === "flush";
   const trackClass = isFlush ? pillSegmentedTrackFlushClass : pillSegmentedTrackClass;
   const segmentClassName = isFlush ? pillSegmentedFlushSegmentClass : pillSegmentedSegmentClass;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn(trackClass, className), children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     PillTab,
     {
       tabKey: tab.key,
@@ -4613,7 +4942,7 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
 
 // src/ui/avatar-group.tsx
 var React7 = __toESM(require("react"), 1);
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var spacingClass = {
   sm: "-space-x-2",
   md: "-space-x-3"
@@ -4628,7 +4957,7 @@ function AvatarGroup({
   const items = React7.Children.toArray(children);
   const overflow = typeof max === "number" ? items.length - max : 0;
   const visible = typeof max === "number" ? items.slice(0, max) : items;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
       "data-slot": "avatar-group",
@@ -4641,7 +4970,7 @@ function AvatarGroup({
       ...props,
       children: [
         visible,
-        overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
           "span",
           {
             "aria-label": `${overflow} more`,
@@ -4659,7 +4988,7 @@ function AvatarGroup({
 
 // src/ui/stepper.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Stepper({
   steps,
   current,
@@ -4668,7 +4997,7 @@ function Stepper({
   ...props
 }) {
   const isVertical = orientation === "vertical";
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "ol",
     {
       "data-slot": "stepper",
@@ -4683,7 +5012,7 @@ function Stepper({
         const active = index === current;
         const last = index === steps.length - 1;
         const connectorFilled = index < current;
-        return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
           "li",
           {
             "aria-current": active ? "step" : void 0,
@@ -4693,8 +5022,8 @@ function Stepper({
               last && !isVertical && "flex-none"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("flex items-center gap-2", isVertical && "flex-col"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("flex items-center gap-2", isVertical && "flex-col"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                   "span",
                   {
                     className: cn(
@@ -4703,10 +5032,10 @@ function Stepper({
                       active && "border-primary text-primary",
                       !complete && !active && "border-border text-muted-foreground"
                     ),
-                    children: complete ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react19.CheckIcon, { className: "size-3.5", "aria-hidden": true }) : index + 1
+                    children: complete ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react19.CheckIcon, { className: "size-3.5", "aria-hidden": true }) : index + 1
                   }
                 ),
-                !last ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                !last ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                   "span",
                   {
                     "aria-hidden": true,
@@ -4718,8 +5047,8 @@ function Stepper({
                   }
                 ) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("min-w-0", isVertical && "pb-4"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("min-w-0", isVertical && "pb-4"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                   "p",
                   {
                     className: cn(
@@ -4729,7 +5058,7 @@ function Stepper({
                     children: step.label
                   }
                 ),
-                step.description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: step.description }) : null
+                step.description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: step.description }) : null
               ] })
             ]
           },
@@ -4741,49 +5070,104 @@ function Stepper({
 }
 
 // src/ui/timeline.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var dotToneClass = {
-  default: "border-border bg-card",
-  primary: "border-primary bg-primary",
-  success: "border-emerald-500 bg-emerald-500",
-  warn: "border-amber-500 bg-amber-500",
-  danger: "border-destructive bg-destructive"
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var timelineRowGap = {
+  sm: "pb-4",
+  default: "pb-6"
 };
-function Timeline({ items, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ol", { "data-slot": "timeline", className: cn("flex flex-col", className), ...props, children: items.map((item, index) => {
+var toneStyles = {
+  default: {
+    border: "border-neutral-300 dark:border-neutral-700",
+    dot: "bg-neutral-400 dark:bg-neutral-500",
+    icon: "text-neutral-500 dark:text-neutral-400"
+  },
+  primary: {
+    border: "border-primary/50 dark:border-primary/40",
+    dot: "bg-primary",
+    icon: "text-primary"
+  },
+  success: {
+    border: "border-emerald-500/40 dark:border-emerald-500/30",
+    dot: "bg-emerald-500",
+    icon: "text-emerald-500"
+  },
+  warn: {
+    border: "border-amber-500/40 dark:border-amber-500/30",
+    dot: "bg-amber-500",
+    icon: "text-amber-500"
+  },
+  danger: {
+    border: "border-destructive/40 dark:border-destructive/30",
+    dot: "bg-destructive",
+    icon: "text-destructive"
+  }
+};
+function Timeline({ items, size = "default", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("ol", { "data-slot": "timeline", className: cn("flex flex-col", className), ...props, children: items.map((item, index) => {
     const last = index === items.length - 1;
     const tone = item.tone ?? "default";
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("li", { className: "relative flex gap-3 pb-5 last:pb-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-          "span",
-          {
-            className: cn(
-              "z-[1] mt-0.5 inline-flex size-3 shrink-0 items-center justify-center rounded-full border-2",
-              dotToneClass[tone],
-              item.icon && "size-6"
-            ),
-            children: item.icon
-          }
-        ),
-        !last ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "w-px flex-1 bg-border" }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-0 flex-1 pb-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-medium text-foreground", children: item.title }),
-          item.meta ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: item.meta }) : null
-        ] }),
-        item.description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: item.description }) : null
-      ] })
-    ] }, item.id);
+    const styles = toneStyles[tone];
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      "li",
+      {
+        className: cn("relative flex gap-3.5 last:pb-0", timelineRowGap[size]),
+        children: [
+          !last ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "absolute left-2.5 bottom-0 w-[1.5px] -translate-x-1/2 bg-neutral-200 dark:bg-neutral-800",
+                item.icon ? "top-6" : "top-3"
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "relative flex w-5 shrink-0 justify-center pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            "span",
+            {
+              className: cn(
+                "relative z-10 flex shrink-0 items-center justify-center rounded-full border-[1.5px] bg-background transition-colors",
+                styles.border,
+                item.icon ? "size-6" : "size-4"
+              ),
+              children: item.icon ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("text-xs", styles.icon), children: item.icon }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "size-1.5 rounded-full",
+                    styles.dot
+                  )
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "min-w-0 flex-1 pb-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-sm font-normal text-foreground", children: item.title }),
+              item.meta ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: item.meta }) : null
+            ] }),
+            item.description ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "mt-0.5 text-[13px] leading-relaxed text-muted-foreground", children: item.description }) : null
+          ] })
+        ]
+      },
+      item.id
+    );
   }) });
 }
 
 // src/ui/rating.tsx
 var React8 = __toESM(require("react"), 1);
 var import_lucide_react20 = require("lucide-react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var sizeClass = { sm: "size-4", md: "size-5", lg: "size-6" };
+var ratingFillClass = {
+  amber: "fill-amber-400 text-amber-400",
+  primary: "fill-primary text-primary",
+  success: "fill-emerald-500 text-emerald-500",
+  warn: "fill-amber-500 text-amber-500",
+  danger: "fill-destructive text-destructive"
+};
+var ratingEmptyClass = "fill-transparent text-muted-foreground/40";
 function Rating({
   value: valueProp,
   defaultValue = 0,
@@ -4792,6 +5176,7 @@ function Rating({
   readOnly = false,
   disabled = false,
   size = "md",
+  tone = "amber",
   label = "Rating",
   className
 }) {
@@ -4807,20 +5192,20 @@ function Rating({
     onChange?.(next);
   };
   if (!interactive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "span",
       {
         "data-slot": "rating",
         role: "img",
         "aria-label": `${label}: ${value} of ${max}`,
         className: cn("inline-flex items-center gap-0.5", disabled && "opacity-50", className),
-        children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           import_lucide_react20.StarIcon,
           {
             "aria-hidden": true,
             className: cn(
               sizeClass[size],
-              i < value ? "fill-amber-400 text-amber-400" : "fill-transparent text-muted-foreground/40"
+              i < value ? ratingFillClass[tone] : ratingEmptyClass
             )
           },
           i
@@ -4828,7 +5213,7 @@ function Rating({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "span",
     {
       "data-slot": "rating",
@@ -4839,7 +5224,7 @@ function Rating({
       children: Array.from({ length: max }, (_, i) => {
         const unit = i + 1;
         const filled = unit <= shown;
-        return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "button",
           {
             type: "button",
@@ -4851,13 +5236,13 @@ function Rating({
             onFocus: () => setHover(unit),
             onBlur: () => setHover(null),
             className: "rounded-sm p-0.5 transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               import_lucide_react20.StarIcon,
               {
                 className: cn(
                   sizeClass[size],
                   "transition-colors",
-                  filled ? "fill-amber-400 text-amber-400" : "fill-transparent text-muted-foreground/40"
+                  filled ? ratingFillClass[tone] : ratingEmptyClass
                 )
               }
             )
@@ -4872,7 +5257,7 @@ function Rating({
 // src/ui/number-field.tsx
 var React9 = __toESM(require("react"), 1);
 var import_lucide_react21 = require("lucide-react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var heightClass = { sm: "h-9", default: "h-10" };
 var stepButtonClass = "inline-flex aspect-square h-full items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/15";
 function clamp(n, min, max) {
@@ -4901,7 +5286,7 @@ function NumberField({
     if (!isControlled) setUncontrolled(clamped);
     onValueChange?.(clamped);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
       "data-slot": "number-field",
@@ -4913,7 +5298,7 @@ function NumberField({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "button",
           {
             type: "button",
@@ -4922,10 +5307,10 @@ function NumberField({
             disabled: disabled || typeof min === "number" && value <= min,
             onClick: () => commit(value - step),
             className: cn(stepButtonClass, "border-r border-border"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react21.MinusIcon, { className: "size-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react21.MinusIcon, { className: "size-4" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "input",
           {
             type: "number",
@@ -4949,7 +5334,7 @@ function NumberField({
             ...inputProps
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "button",
           {
             type: "button",
@@ -4958,7 +5343,7 @@ function NumberField({
             disabled: disabled || typeof max === "number" && value >= max,
             onClick: () => commit(value + step),
             className: cn(stepButtonClass, "border-l border-border"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react21.PlusIcon, { className: "size-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react21.PlusIcon, { className: "size-4" })
           }
         )
       ]
@@ -4969,7 +5354,11 @@ function NumberField({
 // src/ui/tag-input.tsx
 var React10 = __toESM(require("react"), 1);
 var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var tagInputSizeClass = {
+  sm: "min-h-9 gap-1 px-1.5 py-1",
+  default: "min-h-10 gap-1.5 px-2 py-1.5"
+};
 function TagInput({
   value: valueProp,
   defaultValue = [],
@@ -4979,6 +5368,7 @@ function TagInput({
   dedupe = true,
   max,
   disabled,
+  size = "default",
   ariaLabel,
   className,
   inputClassName
@@ -5013,38 +5403,39 @@ function TagInput({
       removeAt(tags.length - 1);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     "div",
     {
       "data-slot": "tag-input",
       className: cn(
         controlSurfaceClass,
-        "flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-lg px-2 py-1.5",
+        "flex w-full flex-wrap items-center rounded-lg",
+        tagInputSizeClass[size],
         disabled && "pointer-events-none opacity-50",
         className
       ),
       children: [
-        tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
           "span",
           {
             className: "inline-flex items-center gap-1 rounded-md bg-muted py-0.5 pl-2 pr-1 text-xs font-medium text-foreground",
             children: [
               tag,
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 "button",
                 {
                   type: "button",
                   "aria-label": `Remove ${tag}`,
                   onClick: () => removeAt(index),
                   className: "inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react22.XIcon, { className: "size-3", "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react22.XIcon, { className: "size-3", "aria-hidden": true })
                 }
               )
             ]
           },
           `${tag}-${index}`
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           "input",
           {
             type: "text",
@@ -5068,16 +5459,41 @@ function TagInput({
 
 // src/ui/banner.tsx
 var import_lucide_react23 = require("lucide-react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var bannerToneClass = {
-  default: "border-border bg-muted/50 text-foreground",
-  primary: "border-primary/20 bg-primary/10 text-foreground",
-  success: "border-emerald-500/25 bg-emerald-500/10 text-foreground [&_[data-banner-icon]]:text-emerald-600 dark:[&_[data-banner-icon]]:text-emerald-400",
-  warn: "border-amber-500/25 bg-amber-500/10 text-foreground [&_[data-banner-icon]]:text-amber-600 dark:[&_[data-banner-icon]]:text-amber-400",
-  danger: "border-destructive/25 bg-destructive/10 text-foreground [&_[data-banner-icon]]:text-destructive"
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var bannerSoftClass = {
+  default: "border-border/50 bg-muted/30 text-foreground/90 dark:bg-muted/15",
+  primary: "border-primary/15 bg-primary/5 text-primary-800 dark:text-primary-200 [&_[data-banner-icon]]:text-primary",
+  success: "border-emerald-500/15 bg-emerald-500/5 text-emerald-800 dark:text-emerald-300 [&_[data-banner-icon]]:text-emerald-600 dark:[&_[data-banner-icon]]:text-emerald-400",
+  warn: "border-amber-500/15 bg-amber-500/5 text-amber-800 dark:text-amber-300 [&_[data-banner-icon]]:text-amber-600 dark:[&_[data-banner-icon]]:text-amber-400",
+  danger: "border-destructive/15 bg-destructive/5 text-destructive dark:text-red-300 [&_[data-banner-icon]]:text-destructive"
+};
+var bannerSolidClass = {
+  default: "border-transparent bg-foreground text-background shadow-sm",
+  primary: "border-transparent bg-gradient-to-r from-primary to-primary/95 text-primary-foreground shadow-sm shadow-primary/5",
+  success: "border-transparent bg-gradient-to-r from-emerald-600 to-emerald-500 text-white shadow-sm shadow-emerald-500/5 dark:from-emerald-500 dark:to-emerald-400",
+  warn: "border-transparent bg-gradient-to-r from-amber-500 to-amber-400 text-white shadow-sm shadow-amber-500/5 dark:from-amber-500 dark:to-amber-400",
+  danger: "border-transparent bg-gradient-to-r from-destructive to-destructive/95 text-destructive-foreground shadow-sm shadow-destructive/5"
+};
+var bannerOutlineClass = {
+  default: "border-border/80 bg-background/50 text-foreground/90 backdrop-blur-sm shadow-sm",
+  primary: "border-primary/30 bg-primary/[0.02] text-foreground [&_[data-banner-icon]]:text-primary shadow-sm",
+  success: "border-emerald-500/30 bg-emerald-500/[0.02] text-foreground [&_[data-banner-icon]]:text-emerald-600 dark:[&_[data-banner-icon]]:text-emerald-400 shadow-sm",
+  warn: "border-amber-500/30 bg-amber-500/[0.02] text-foreground [&_[data-banner-icon]]:text-amber-600 dark:[&_[data-banner-icon]]:text-amber-400 shadow-sm",
+  danger: "border-destructive/30 bg-destructive/[0.02] text-foreground [&_[data-banner-icon]]:text-destructive shadow-sm"
+};
+var bannerVariantClass = {
+  soft: bannerSoftClass,
+  solid: bannerSolidClass,
+  outline: bannerOutlineClass
+};
+var bannerSizeClass = {
+  sm: "gap-2.5 px-3.5 py-2 text-xs",
+  default: "gap-3 px-4 py-3 text-sm"
 };
 function Banner({
   tone = "default",
+  variant = "soft",
+  size = "default",
   icon,
   title,
   actions,
@@ -5086,32 +5502,60 @@ function Banner({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  const isSolid = variant === "solid";
+  const isSingleLine = !title;
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "div",
     {
       "data-slot": "banner",
+      "data-variant": variant,
       role: "status",
       className: cn(
-        "flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-sm",
-        bannerToneClass[tone],
+        "flex w-full rounded-xl border transition-all duration-200",
+        isSingleLine ? "items-center" : "items-start",
+        bannerSizeClass[size],
+        bannerVariantClass[variant][tone],
         className
       ),
       ...props,
       children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "data-banner-icon": true, className: "mt-0.5 shrink-0 [&_svg]:size-4", children: icon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "font-medium", children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: cn("text-muted-foreground", title && "mt-0.5"), children }) : null
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "span",
+          {
+            "data-banner-icon": true,
+            className: cn(
+              "shrink-0 [&_svg]:size-4",
+              isSingleLine ? "self-center" : "mt-0.5"
+            ),
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "font-medium tracking-tight", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            "div",
+            {
+              className: cn(
+                isSolid ? "opacity-90" : "text-muted-foreground",
+                title && "mt-0.5"
+              ),
+              children
+            }
+          ) : null
         ] }),
-        actions ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null,
-        onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null,
+        onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "button",
           {
             type: "button",
             "aria-label": "Dismiss",
             onClick: onDismiss,
-            className: "-mr-1 -mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react23.XIcon, { className: "size-4", "aria-hidden": true })
+            className: cn(
+              "-mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
+              isSingleLine ? "self-center" : "-mt-0.5",
+              isSolid ? "opacity-80 hover:bg-background/15 hover:opacity-100" : "text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react23.XIcon, { className: "size-4", "aria-hidden": true })
           }
         ) : null
       ]
@@ -5122,7 +5566,7 @@ function Banner({
 // src/ui/copy-button.tsx
 var React11 = __toESM(require("react"), 1);
 var import_lucide_react24 = require("lucide-react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function CopyButton({
   value,
   timeout = 1500,
@@ -5148,7 +5592,7 @@ function CopyButton({
     }
   };
   const Icon = copied ? import_lucide_react24.CheckIcon : import_lucide_react24.CopyIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "button",
     {
       type: "button",
@@ -5165,7 +5609,7 @@ function CopyButton({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { className: "size-4 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { className: "size-4 shrink-0", "aria-hidden": true }),
         children
       ]
     }
@@ -5173,34 +5617,54 @@ function CopyButton({
 }
 
 // src/ui/snippet.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var snippetVariantClass = {
+  muted: "border-border bg-muted/40",
+  outline: "border-border bg-transparent",
+  ghost: "border-transparent bg-foreground/[0.04]"
+};
+var snippetSizeClass = {
+  sm: "gap-1.5 py-1 pl-2.5 pr-1 text-xs",
+  default: "gap-2 py-1.5 pl-3 pr-1.5 text-sm"
+};
 function Snippet({
   children,
   symbol,
+  variant = "muted",
+  size = "default",
   hideCopy = false,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       "data-slot": "snippet",
+      "data-variant": variant,
       className: cn(
-        "flex items-center gap-2 rounded-lg border border-border bg-muted/40 py-1.5 pl-3 pr-1.5 font-mono text-sm",
+        "flex items-center rounded-lg border font-mono",
+        snippetVariantClass[variant],
+        snippetSizeClass[size],
         className
       ),
       ...props,
       children: [
-        symbol ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { "aria-hidden": true, className: "select-none text-muted-foreground", children: symbol }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("code", { className: "min-w-0 flex-1 truncate text-foreground", children }),
-        hideCopy ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CopyButton, { value: children, className: "size-7 shrink-0" })
+        symbol ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { "aria-hidden": true, className: "select-none text-muted-foreground", children: symbol }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("code", { className: "min-w-0 flex-1 truncate text-foreground", children }),
+        hideCopy ? null : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          CopyButton,
+          {
+            value: children,
+            className: cn("shrink-0", size === "sm" ? "size-6" : "size-7")
+          }
+        )
       ]
     }
   );
 }
 
 // src/ui/circular-progress.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var toneClass = {
   primary: "text-primary",
   success: "text-emerald-500",
@@ -5223,7 +5687,7 @@ function CircularProgress({
   const circumference = 2 * Math.PI * radius;
   const pct = indeterminate ? 0.25 : Math.min(Math.max(value / max, 0), 1);
   const dashOffset = circumference * (1 - pct);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "div",
     {
       "data-slot": "circular-progress",
@@ -5235,7 +5699,7 @@ function CircularProgress({
       style: { width: size, height: size },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
           "svg",
           {
             width: size,
@@ -5243,7 +5707,7 @@ function CircularProgress({
             viewBox: `0 0 ${size} ${size}`,
             className: cn(toneClass[tone], indeterminate && "animate-spin"),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                 "circle",
                 {
                   cx: size / 2,
@@ -5254,7 +5718,7 @@ function CircularProgress({
                   className: "stroke-current opacity-15"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                 "circle",
                 {
                   cx: size / 2,
@@ -5272,7 +5736,385 @@ function CircularProgress({
             ]
           }
         ),
-        showLabel && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-[0.7rem] font-medium tabular-nums text-foreground", children: label ?? `${Math.round(pct * 100)}%` }) : null
+        showLabel && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-[0.7rem] font-medium tabular-nums text-foreground", children: label ?? `${Math.round(pct * 100)}%` }) : null
+      ]
+    }
+  );
+}
+
+// src/ui/kanban.tsx
+var React12 = __toESM(require("react"), 1);
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_utilities = require("@dnd-kit/utilities");
+var import_lucide_react25 = require("lucide-react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var columnTitleToneClass = {
+  default: "text-foreground",
+  primary: "text-blue-600 dark:text-blue-400",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warn: "text-amber-600 dark:text-amber-400",
+  danger: "text-rose-600 dark:text-rose-400"
+};
+var cardVariantClass = {
+  default: "border border-border/70 bg-card shadow-sm hover:border-border hover:shadow-md",
+  outline: "border border-border bg-card hover:border-foreground/25",
+  muted: "border border-transparent bg-muted/60 hover:bg-muted"
+};
+var cardToneClass = {
+  default: "bg-card shadow-sm hover:shadow-md",
+  primary: "bg-card shadow-sm hover:shadow-md",
+  success: "bg-card shadow-sm hover:shadow-md",
+  warn: "bg-card shadow-sm hover:shadow-md",
+  danger: "bg-card shadow-sm hover:shadow-md"
+};
+function cardSurfaceClass(variant, tone) {
+  return variant === "tonal" ? cardToneClass[tone] : cardVariantClass[variant];
+}
+var densityColumnClass = {
+  default: "w-72 gap-2.5",
+  compact: "w-64 gap-2"
+};
+var densityListClass = {
+  default: "gap-2.5",
+  compact: "gap-2"
+};
+var densityCardClass = {
+  default: "rounded-lg p-2",
+  compact: "rounded-lg p-1.5"
+};
+function defaultGetCardId(card) {
+  return card.id;
+}
+function SortableCard({
+  card,
+  cardId,
+  column,
+  density,
+  variant,
+  disabled,
+  dragHandle,
+  className,
+  renderCard
+}) {
+  const {
+    attributes,
+    listeners: listeners2,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, import_sortable.useSortable)({ id: cardId, disabled });
+  const style = {
+    transform: import_utilities.CSS.Translate.toString(transform),
+    transition
+  };
+  const dragHandleProps = disabled ? void 0 : { ...attributes, ...listeners2 };
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      "data-slot": "kanban-card",
+      "data-dragging": isDragging ? "" : void 0,
+      className: cn(
+        "group/kanban-card relative text-sm text-foreground transition",
+        densityCardClass[density],
+        cardSurfaceClass(variant, column.tone ?? "default"),
+        isDragging && "opacity-40",
+        className
+      ),
+      children: [
+        !disabled && dragHandle === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Drag card",
+            className: "absolute right-1.5 top-1.5 z-10 grid size-6 cursor-grab touch-none place-items-center rounded-md text-muted-foreground/40 opacity-0 transition hover:bg-foreground/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 group-hover/kanban-card:opacity-100 active:cursor-grabbing",
+            ...attributes,
+            ...listeners2,
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react25.GripVerticalIcon, { className: "size-4", "aria-hidden": true })
+          }
+        ) : null,
+        renderCard(card, { column, isDragging, isOverlay: false, dragHandleProps })
+      ]
+    }
+  );
+}
+function KanbanColumnView({
+  column,
+  cardIds,
+  density,
+  cardVariant,
+  disabled,
+  dragHandle,
+  emptyColumnLabel,
+  className,
+  cardClassName,
+  getCardId,
+  renderColumnHeader,
+  renderCard
+}) {
+  const tone = column.tone ?? "default";
+  const { setNodeRef, isOver } = (0, import_core.useDroppable)({ id: column.id, disabled });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    "div",
+    {
+      "data-slot": "kanban-column",
+      className: cn(
+        "flex shrink-0 flex-col",
+        densityColumnClass[density],
+        className
+      ),
+      children: [
+        renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col gap-0.5 px-1 pb-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              "h3",
+              {
+                className: cn(
+                  "min-w-0 flex-1 truncate text-xs font-medium",
+                  columnTitleToneClass[tone]
+                ),
+                children: column.title
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "shrink-0 text-xs font-normal tabular-nums text-muted-foreground/60", children: column.cards.length }),
+            column.action ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "shrink-0", children: column.action }) : null
+          ] }),
+          column.description ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: column.description }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_sortable.SortableContext, { items: cardIds, strategy: import_sortable.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "div",
+          {
+            ref: setNodeRef,
+            "data-slot": "kanban-column-body",
+            className: cn(
+              "flex min-h-16 flex-1 flex-col rounded-xl transition-colors",
+              densityListClass[density],
+              isOver && "bg-muted/50"
+            ),
+            children: column.cards.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex flex-1 items-center justify-center rounded-xl border border-dashed border-border/60 px-2 py-8 text-center text-xs text-muted-foreground/70", children: emptyColumnLabel ?? "Drop here" }) : column.cards.map((card) => {
+              const id = getCardId(card);
+              return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                SortableCard,
+                {
+                  card,
+                  cardId: id,
+                  column,
+                  density,
+                  variant: cardVariant,
+                  disabled,
+                  dragHandle,
+                  className: cardClassName,
+                  renderCard
+                },
+                id
+              );
+            })
+          }
+        ) }),
+        column.footer ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-0.5 pt-0.5", children: column.footer }) : null
+      ]
+    }
+  );
+}
+function cloneColumns(columns) {
+  return columns.map((col) => ({ ...col, cards: [...col.cards] }));
+}
+function locateCard(columns, getCardId, cardId) {
+  for (const col of columns) {
+    const index = col.cards.findIndex((c) => getCardId(c) === cardId);
+    if (index !== -1) return { columnId: col.id, index };
+  }
+  return null;
+}
+function Kanban({
+  columns: columnsProp,
+  defaultColumns,
+  onColumnsChange,
+  onMove,
+  renderCard,
+  renderColumnHeader,
+  getCardId = defaultGetCardId,
+  emptyColumnLabel,
+  density = "default",
+  cardVariant = "default",
+  dragHandle = "auto",
+  disabled = false,
+  className,
+  columnClassName,
+  cardClassName,
+  ...rest
+}) {
+  const ariaLabel = rest["aria-label"] ?? "Kanban board";
+  const isControlled = columnsProp !== void 0;
+  const [internal, setInternal] = React12.useState(
+    () => cloneColumns(defaultColumns ?? columnsProp ?? [])
+  );
+  const [activeId, setActiveId] = React12.useState(null);
+  const dragOriginRef = React12.useRef(null);
+  React12.useEffect(() => {
+    if (isControlled && activeId === null) {
+      setInternal(cloneColumns(columnsProp));
+    }
+  }, [columnsProp, isControlled, activeId]);
+  const columns = internal;
+  const columnIds = React12.useMemo(
+    () => new Set(columns.map((c) => c.id)),
+    [columns]
+  );
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor, { activationConstraint: { distance: 6 } }),
+    (0, import_core.useSensor)(import_core.KeyboardSensor, { coordinateGetter: import_sortable.sortableKeyboardCoordinates })
+  );
+  const activeCard = React12.useMemo(() => {
+    if (!activeId) return null;
+    for (const col of columns) {
+      const card = col.cards.find((c) => getCardId(c) === activeId);
+      if (card) return { card, column: col };
+    }
+    return null;
+  }, [activeId, columns, getCardId]);
+  const resolveTargetColumnId = (overId) => {
+    if (columnIds.has(overId)) return overId;
+    const loc = locateCard(columns, getCardId, overId);
+    return loc?.columnId;
+  };
+  const handleDragStart = (event) => {
+    const id = String(event.active.id);
+    setActiveId(id);
+    dragOriginRef.current = locateCard(columns, getCardId, id);
+  };
+  const handleDragOver = (event) => {
+    const { active, over } = event;
+    if (!over) return;
+    const activeCardId = String(active.id);
+    const overId = String(over.id);
+    const from = locateCard(columns, getCardId, activeCardId);
+    const toColumnId = resolveTargetColumnId(overId);
+    if (!from || !toColumnId || from.columnId === toColumnId) return;
+    setInternal((prev) => {
+      const next = cloneColumns(prev);
+      const fromCol = next.find((c) => c.id === from.columnId);
+      const toCol = next.find((c) => c.id === toColumnId);
+      if (!fromCol || !toCol) return prev;
+      const movingIndex = fromCol.cards.findIndex(
+        (c) => getCardId(c) === activeCardId
+      );
+      if (movingIndex === -1) return prev;
+      const [moving] = fromCol.cards.splice(movingIndex, 1);
+      const overIsCard = !columnIds.has(overId);
+      const overIndex = overIsCard ? toCol.cards.findIndex((c) => getCardId(c) === overId) : toCol.cards.length;
+      const insertAt = overIndex === -1 ? toCol.cards.length : overIndex;
+      toCol.cards.splice(insertAt, 0, moving);
+      return next;
+    });
+  };
+  const finishDrag = (event) => {
+    const { active, over } = event;
+    const origin = dragOriginRef.current;
+    const movedCard = activeCard?.card;
+    dragOriginRef.current = null;
+    setActiveId(null);
+    if (!over || !origin) return;
+    const activeCardId = String(active.id);
+    const overId = String(over.id);
+    let next = columns;
+    const current = locateCard(columns, getCardId, activeCardId);
+    const toColumnId = resolveTargetColumnId(overId) ?? current?.columnId;
+    if (current && toColumnId && current.columnId === toColumnId) {
+      const col = columns.find((c) => c.id === toColumnId);
+      if (col) {
+        const oldIndex = col.cards.findIndex((c) => getCardId(c) === activeCardId);
+        const overIsCard = !columnIds.has(overId);
+        const overIndex = overIsCard ? col.cards.findIndex((c) => getCardId(c) === overId) : col.cards.length - 1;
+        const newIndex = overIndex === -1 ? col.cards.length - 1 : overIndex;
+        if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
+          next = columns.map(
+            (c) => c.id === toColumnId ? { ...c, cards: (0, import_sortable.arrayMove)(c.cards, oldIndex, newIndex) } : c
+          );
+        }
+      }
+    }
+    if (next !== columns) setInternal(next);
+    const finalLoc = locateCard(next, getCardId, activeCardId);
+    const moved = finalLoc && (finalLoc.columnId !== origin.columnId || finalLoc.index !== origin.index);
+    if (moved) {
+      if (movedCard) {
+        onMove?.({
+          card: movedCard,
+          cardId: activeCardId,
+          from: origin,
+          to: finalLoc,
+          columns: next
+        });
+      }
+      onColumnsChange?.(next);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    import_core.DndContext,
+    {
+      sensors,
+      collisionDetection: import_core.closestCorners,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: finishDrag,
+      onDragCancel: () => {
+        dragOriginRef.current = null;
+        setActiveId(null);
+        if (isControlled) setInternal(cloneColumns(columnsProp));
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "div",
+          {
+            "data-slot": "kanban",
+            role: "list",
+            "aria-label": ariaLabel,
+            className: cn(
+              "flex w-full items-start overflow-x-auto p-1.5 pb-6 -m-1.5",
+              density === "compact" ? "gap-3" : "gap-4",
+              className
+            ),
+            children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              KanbanColumnView,
+              {
+                column,
+                cardIds: column.cards.map(getCardId),
+                density,
+                cardVariant,
+                disabled,
+                dragHandle,
+                emptyColumnLabel,
+                className: columnClassName,
+                cardClassName,
+                getCardId,
+                renderColumnHeader,
+                renderCard
+              },
+              column.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_core.DragOverlay, { children: activeCard ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "div",
+          {
+            "data-slot": "kanban-card-overlay",
+            className: cn(
+              "text-sm text-foreground shadow-xl ring-1 ring-black/5",
+              densityCardClass[density],
+              cardSurfaceClass(cardVariant, activeCard.column.tone ?? "default"),
+              "rotate-2 cursor-grabbing"
+            ),
+            children: renderCard(activeCard.card, {
+              column: activeCard.column,
+              isDragging: true,
+              isOverlay: true
+            })
+          }
+        ) : null })
       ]
     }
   );
@@ -5418,6 +6260,7 @@ function CircularProgress({
   InputOTPHiddenInput,
   InputOTPSeparator,
   InputOTPSlot,
+  Kanban,
   Kbd,
   KbdGroup,
   Label,
@@ -5522,6 +6365,7 @@ function CircularProgress({
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  UntitledButton,
   alertVariants,
   avatarChartVariantClass,
   badgeVariants,
@@ -5535,6 +6379,7 @@ function CircularProgress({
   overlaySurfaceClass,
   toast,
   toggleVariants,
+  untitledButtonVariants,
   useChart,
   useToast
 });