@hex-core/components 1.0.1 → 1.2.0

package/dist/index.js

@@ -39,16 +39,17 @@ var buttonVariants = cva(
           "hover:bg-destructive/90 hover:shadow-md hover:shadow-destructive/25"
         ].join(" "),
         outline: [
+          // Self-borne shape: token border (border-input) + an inset-ring tinted with
+          // foreground so the boundary is visible on flat-white surfaces too, not only
+          // inside elevated Card/Popover/Dialog containers.
           "border border-input bg-background",
-          "shadow-sm",
-          "hover:bg-accent hover:text-accent-foreground hover:shadow-md"
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+          "hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:inset-ring-foreground/12"
         ].join(" "),
         secondary: [
           "bg-secondary text-secondary-foreground",
-          "shadow-sm",
-          // Hover: shadow-elevation only — opacity-based bg shift would push apparent
-          // contrast below 3:1 vs --card during hover, regressing WCAG 1.4.11.
-          "hover:shadow-md"
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.08]",
+          "hover:bg-secondary/80 hover:shadow-md hover:inset-ring-foreground/15"
         ].join(" "),
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
@@ -129,7 +130,9 @@ var Input = React2.forwardRef(
         className: cn(
           "flex h-[var(--control-height-md,2.5rem)] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
           "transition-all duration-[var(--duration-normal,200ms)] ease-out",
-          "shadow-sm",
+          // inset-ring gives a self-borne edge so the input field is visible on flat
+          // surfaces (token border alone is too low-contrast on bg-background=white).
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
           "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
           "placeholder:text-muted-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -170,7 +173,7 @@ var Textarea = React4.forwardRef(
         className: cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
           "transition-all duration-[var(--duration-normal,200ms)] ease-out",
-          "shadow-sm",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
           "placeholder:text-muted-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "focus-visible:shadow-md focus-visible:border-ring/50",
@@ -197,7 +200,7 @@ var Checkbox = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     className: cn(
       "group h-4 w-4 shrink-0 rounded-sm border border-input",
       "transition-all duration-[var(--duration-normal,200ms)] ease-out",
-      "shadow-sm",
+      "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
       "hover:border-ring/50 hover:shadow-md",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
@@ -257,6 +260,9 @@ var Switch = React6.forwardRef(
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        // Unchecked track shares --color-input with form borders (~1.27:1 vs white) so
+        // add an inset ring to make the track visible on flat surfaces.
+        "data-[state=unchecked]:inset-ring-1 data-[state=unchecked]:inset-ring-foreground/[0.08]",
         "hover:shadow-md",
         className
       ),
@@ -290,11 +296,9 @@ var badgeVariants = cva3(
     variants: {
       variant: {
         default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        // Hover stays at full --secondary fill — opacity-based shift would drop the
-        // composite contrast below 3:1 against --card on hover (WCAG 1.4.11).
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        secondary: "border-foreground/15 bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:border-foreground/20",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground"
+        outline: "border-foreground/20 text-foreground hover:border-foreground/30"
       }
     },
     defaultVariants: {
@@ -317,7 +321,7 @@ var Separator = React7.forwardRef(({ className, orientation = "horizontal", deco
     decorative,
     orientation,
     className: cn(
-      "shrink-0 bg-border",
+      "shrink-0 bg-foreground/[0.12]",
       orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
       className
     ),
@@ -339,7 +343,7 @@ var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) =
     ref,
     className: cn(
       "flex h-[var(--control-height-md,2.5rem)] w-full items-center justify-between rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
-      "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-sm",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
       "placeholder:text-muted-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "focus-visible:shadow-md focus-visible:border-ring/50",
@@ -379,7 +383,7 @@ var SelectContent = React8.forwardRef(({ className, children, position = "popper
     ref,
     position,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover text-popover-foreground shadow-md",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -447,7 +451,7 @@ var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-muted", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
@@ -475,7 +479,7 @@ var RadioGroupItem = React9.forwardRef(({ className, ...props }, ref) => /* @__P
     ref,
     className: cn(
       "aspect-square h-4 w-4 rounded-full border border-input",
-      "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-sm",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
       "hover:border-ring/50 hover:shadow-md",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:cursor-not-allowed disabled:opacity-50",
@@ -508,7 +512,7 @@ var Slider = React10.forwardRef(({ className, thumbLabels, ...props }, ref) => {
       className: cn("relative flex w-full touch-none select-none items-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx11(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx11(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+        /* @__PURE__ */ jsx11(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full border border-foreground/[0.08] bg-secondary", children: /* @__PURE__ */ jsx11(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
         values.map((_, i) => {
           const explicit = thumbLabels?.[i];
           const fallback = values.length === 1 ? rootLabel : rootLabel ? `${rootLabel} (${i + 1} of ${values.length})` : void 0;
@@ -553,7 +557,7 @@ var toggleVariants = cva4(
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
+        outline: "border border-input bg-transparent shadow-sm inset-ring-1 inset-ring-foreground/[0.06] hover:bg-accent hover:text-accent-foreground"
       },
       size: {
         default: "h-[var(--control-height-md,2.5rem)] px-[var(--space-3,0.75rem)] min-w-[var(--control-height-md,2.5rem)]",
@@ -650,7 +654,13 @@ AvatarFallback.displayName = "AvatarFallback";
 // src/primitives/skeleton/skeleton.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx15("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md border border-foreground/[0.06] bg-muted", className),
+      ...props
+    }
+  );
 }
 
 // src/primitives/progress/progress.tsx
@@ -666,7 +676,7 @@ var Progress = React14.forwardRef(({ className, value, max = 100, ...props }, re
       value: value ?? 0,
       max,
       className: cn(
-        "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
+        "relative h-2 w-full overflow-hidden rounded-full border border-foreground/[0.08] bg-secondary",
         className
       ),
       ...props,
@@ -723,7 +733,7 @@ var ScrollBar = React15.forwardRef(({ className, orientation = "vertical", ...pr
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx17(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ jsx17(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-foreground/[0.18]" })
   }
 ));
 ScrollBar.displayName = "ScrollBar";
@@ -732,16 +742,182 @@ ScrollBar.displayName = "ScrollBar";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 var AspectRatio = AspectRatioPrimitive.Root;
 
+// src/primitives/container/container.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var containerVariants = cva5("mx-auto w-full", {
+  variants: {
+    size: {
+      sm: "max-w-[var(--container-sm,33rem)]",
+      md: "max-w-[var(--container-md,40rem)]",
+      lg: "max-w-[var(--container-lg,50rem)]",
+      xl: "max-w-[var(--container-xl,66rem)]",
+      full: "max-w-full"
+    },
+    padding: {
+      none: "",
+      sm: "px-[var(--space-3,0.75rem)]",
+      md: "px-[var(--space-4,1rem)]",
+      lg: "px-[var(--space-8,2rem)]"
+    }
+  },
+  defaultVariants: {
+    size: "lg",
+    padding: "md"
+  }
+});
+function Container({ className, size, padding, asChild = false, ...props }) {
+  const Comp = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ jsx18(Comp, { className: cn(containerVariants({ size, padding }), className), ...props });
+}
+
+// src/primitives/stack/stack.tsx
+import { cva as cva6 } from "class-variance-authority";
+
+// src/primitives/_shared/layout-variants.ts
+var gapVariants = {
+  xs: "gap-[var(--gap-xs,0.25rem)]",
+  sm: "gap-[var(--gap-sm,0.5rem)]",
+  md: "gap-[var(--gap-md,1rem)]",
+  lg: "gap-[var(--gap-lg,1.5rem)]",
+  xl: "gap-[var(--gap-xl,2rem)]"
+};
+var justifyVariants = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+var flexAlignVariants = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var clusterAlignVariants = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+
+// src/primitives/stack/stack.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var stackVariants = cva6("flex flex-col", {
+  variants: {
+    gap: gapVariants,
+    align: flexAlignVariants,
+    justify: justifyVariants
+  },
+  defaultVariants: {
+    gap: "md",
+    align: "stretch",
+    justify: "start"
+  }
+});
+function Stack({ className, gap, align, justify, ...props }) {
+  return /* @__PURE__ */ jsx19("div", { className: cn(stackVariants({ gap, align, justify }), className), ...props });
+}
+
+// src/primitives/cluster/cluster.tsx
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var clusterVariants = cva7("flex flex-wrap", {
+  variants: {
+    gap: gapVariants,
+    align: clusterAlignVariants,
+    justify: justifyVariants
+  },
+  defaultVariants: {
+    gap: "md",
+    align: "center",
+    justify: "start"
+  }
+});
+function Cluster({ className, gap, align, justify, ...props }) {
+  return /* @__PURE__ */ jsx20("div", { className: cn(clusterVariants({ gap, align, justify }), className), ...props });
+}
+
+// src/primitives/grid/grid.tsx
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var gridVariants = cva8("grid", {
+  variants: {
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      6: "grid-cols-6",
+      "auto-fit": ""
+    },
+    gap: gapVariants,
+    align: flexAlignVariants
+  },
+  defaultVariants: {
+    cols: 3,
+    gap: "md",
+    align: "stretch"
+  }
+});
+function Grid({ className, cols, gap, align, minColWidth = "16rem", style, ...props }) {
+  const inlineStyle = cols === "auto-fit" ? { gridTemplateColumns: `repeat(auto-fit, minmax(${minColWidth}, 1fr))`, ...style } : style;
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: cn(gridVariants({ cols, gap, align }), className),
+      style: inlineStyle,
+      ...props
+    }
+  );
+}
+
+// src/primitives/spacer/spacer.tsx
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var spacerVariants = cva9("shrink-0", {
+  variants: {
+    size: {
+      xs: "[--spacer-size:var(--space-1,0.25rem)]",
+      sm: "[--spacer-size:var(--space-2,0.5rem)]",
+      md: "[--spacer-size:var(--space-4,1rem)]",
+      lg: "[--spacer-size:var(--space-8,2rem)]",
+      xl: "[--spacer-size:var(--space-16,4rem)]"
+    },
+    axis: {
+      vertical: "h-[var(--spacer-size)] w-0",
+      horizontal: "w-[var(--spacer-size)] h-0",
+      both: "h-[var(--spacer-size)] w-[var(--spacer-size)]"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    axis: "vertical"
+  }
+});
+function Spacer({ className, size, axis, ...props }) {
+  return /* @__PURE__ */ jsx22(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(spacerVariants({ size, axis }), className),
+      ...props
+    }
+  );
+}
+
 // src/components/card/card.tsx
 import * as React16 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Card = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
     "div",
     {
       ref,
       className: cn(
-        "rounded-lg border bg-card text-card-foreground",
+        "rounded-lg border border-foreground/[0.08] bg-card text-card-foreground",
         "shadow-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
         "hover:shadow-md",
         className
@@ -752,7 +928,7 @@ var Card = React16.forwardRef(
 );
 Card.displayName = "Card";
 var CardHeader = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
     "div",
     {
       ref,
@@ -763,7 +939,7 @@ var CardHeader = React16.forwardRef(
 );
 CardHeader.displayName = "CardHeader";
 var CardTitle = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
     "h3",
     {
       ref,
@@ -773,14 +949,14 @@ var CardTitle = React16.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var CardDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 CardDescription.displayName = "CardDescription";
 var CardContent = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("div", { ref, className: cn("p-[var(--space-6,1.5rem)] pt-0", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { ref, className: cn("p-[var(--space-6,1.5rem)] pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
 var CardFooter = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
     "div",
     {
       ref,
@@ -794,21 +970,21 @@ CardFooter.displayName = "CardFooter";
 // src/components/tabs/tabs.tsx
 import * as React17 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
-var TabsList = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var TabsList = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   TabsPrimitive.List,
   {
     ref,
     className: cn(
-      "inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md bg-muted p-[var(--space-1,0.25rem)] text-muted-foreground",
+      "inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md border border-foreground/[0.06] bg-muted p-[var(--space-1,0.25rem)] text-muted-foreground",
       className
     ),
     ...props
   }
 ));
 TabsList.displayName = "TabsList";
-var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -825,7 +1001,7 @@ var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var TabsContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   TabsPrimitive.Content,
   {
     ref,
@@ -842,11 +1018,11 @@ TabsContent.displayName = "TabsContent";
 // src/components/accordion/accordion.tsx
 import * as React18 from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs6 } from "react/jsx-runtime";
 var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(AccordionPrimitive.Item, { ref, className: cn("border-b", className), ...props }));
+var AccordionItem = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(AccordionPrimitive.Item, { ref, className: cn("border-b border-b-foreground/[0.08]", className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx20(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs6(
+var AccordionTrigger = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx25(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs6(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -860,7 +1036,7 @@ var AccordionTrigger = React18.forwardRef(({ className, children, ...props }, re
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx25(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -874,20 +1050,20 @@ var AccordionTrigger = React18.forwardRef(({ className, children, ...props }, re
           strokeLinejoin: "round",
           className: "h-4 w-4 shrink-0 transition-transform duration-[var(--duration-normal,200ms)]",
           "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx20("polyline", { points: "6 9 12 15 18 9" })
+          children: /* @__PURE__ */ jsx25("polyline", { points: "6 9 12 15 18 9" })
         }
       )
     ]
   }
 ) }));
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx20(
+var AccordionContent = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx25(
   AccordionPrimitive.Content,
   {
     ref,
     className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
     ...props,
-    children: /* @__PURE__ */ jsx20("div", { className: cn("pb-[var(--space-4,1rem)] pt-0", className), children })
+    children: /* @__PURE__ */ jsx25("div", { className: cn("pb-[var(--space-4,1rem)] pt-0", className), children })
   }
 ));
 AccordionContent.displayName = "AccordionContent";
@@ -895,12 +1071,12 @@ AccordionContent.displayName = "AccordionContent";
 // src/components/dialog/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React19 from "react";
-import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -915,14 +1091,14 @@ var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 DialogOverlay.displayName = "DialogOverlay";
 var DialogContent = React19.forwardRef(({ className, children, scrollable = true, ...props }, ref) => /* @__PURE__ */ jsxs7(DialogPortal, { children: [
-  /* @__PURE__ */ jsx21(DialogOverlay, {}),
+  /* @__PURE__ */ jsx26(DialogOverlay, {}),
   /* @__PURE__ */ jsxs7(
     DialogPrimitive.Content,
     {
       ref,
       className: cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
-        scrollable ? "max-h-[calc(100vh-2rem)] border bg-background shadow-lg rounded-lg" : "gap-[var(--gap-md,1rem)] border bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
+        scrollable ? "max-h-[calc(100vh-2rem)] border border-foreground/[0.08] bg-background shadow-lg rounded-lg" : "gap-[var(--gap-md,1rem)] border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
         "duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -930,7 +1106,7 @@ var DialogContent = React19.forwardRef(({ className, children, scrollable = true
       ),
       ...props,
       children: [
-        scrollable ? /* @__PURE__ */ jsx21("div", { className: "grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]", children }) : children,
+        scrollable ? /* @__PURE__ */ jsx26("div", { className: "grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]", children }) : children,
         /* @__PURE__ */ jsxs7(
           DialogPrimitive.Close,
           {
@@ -954,12 +1130,12 @@ var DialogContent = React19.forwardRef(({ className, children, scrollable = true
                   className: "h-4 w-4",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ jsx21("path", { d: "M18 6 6 18" }),
-                    /* @__PURE__ */ jsx21("path", { d: "m6 6 12 12" })
+                    /* @__PURE__ */ jsx26("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsx26("path", { d: "m6 6 12 12" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Close" })
+              /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Close" })
             ]
           }
         )
@@ -969,7 +1145,7 @@ var DialogContent = React19.forwardRef(({ className, children, scrollable = true
 ] }));
 DialogContent.displayName = "DialogContent";
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
@@ -978,7 +1154,7 @@ function DialogHeader({ className, ...props }) {
   );
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: cn(
@@ -989,7 +1165,7 @@ function DialogFooter({ className, ...props }) {
     }
   );
 }
-var DialogTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DialogTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DialogPrimitive.Title,
   {
     ref,
@@ -998,7 +1174,7 @@ var DialogTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var DialogDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DialogPrimitive.Description,
   {
     ref,
@@ -1011,11 +1187,11 @@ DialogDescription.displayName = "DialogDescription";
 // src/components/alert-dialog/alert-dialog.tsx
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React20 from "react";
-import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var AlertDialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   AlertDialogPrimitive.Overlay,
   {
     ref,
@@ -1030,14 +1206,14 @@ var AlertDialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /*
 ));
 AlertDialogOverlay.displayName = "AlertDialogOverlay";
 var AlertDialogContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs8(AlertDialogPortal, { children: [
-  /* @__PURE__ */ jsx22(AlertDialogOverlay, {}),
-  /* @__PURE__ */ jsx22(
+  /* @__PURE__ */ jsx27(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx27(
     AlertDialogPrimitive.Content,
     {
       ref,
       className: cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-[var(--gap-md,1rem)]",
-        "border bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
+        "border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
         "duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1049,7 +1225,7 @@ var AlertDialogContent = React20.forwardRef(({ className, ...props }, ref) => /*
 ] }));
 AlertDialogContent.displayName = "AlertDialogContent";
 function AlertDialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
@@ -1058,7 +1234,7 @@ function AlertDialogHeader({ className, ...props }) {
   );
 }
 function AlertDialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn(
@@ -1069,7 +1245,7 @@ function AlertDialogFooter({ className, ...props }) {
     }
   );
 }
-var AlertDialogTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var AlertDialogTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -1078,7 +1254,7 @@ var AlertDialogTitle = React20.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = "AlertDialogTitle";
-var AlertDialogDescription = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var AlertDialogDescription = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -1087,7 +1263,7 @@ var AlertDialogDescription = React20.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = "AlertDialogDescription";
-var AlertDialogAction = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var AlertDialogAction = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -1105,15 +1281,15 @@ var AlertDialogAction = React20.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = "AlertDialogAction";
-var AlertDialogCancel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var AlertDialogCancel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
   AlertDialogPrimitive.Cancel,
   {
     ref,
     className: cn(
       "inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md px-[var(--space-4,1rem)] py-[var(--space-2,0.5rem)] text-sm font-medium",
-      "border border-input bg-background shadow-sm",
+      "border border-input bg-background shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
       "transition-all duration-[var(--duration-normal,200ms)] ease-out",
-      "hover:bg-accent hover:text-accent-foreground hover:shadow-md",
+      "hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:inset-ring-foreground/12",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "mt-[var(--space-2,0.5rem)] sm:mt-0",
       "active:scale-[0.98]",
@@ -1127,20 +1303,20 @@ AlertDialogCancel.displayName = "AlertDialogCancel";
 // src/components/dropdown-menu/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as React21 from "react";
-import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuContent = React21.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx23(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx23(
+var DropdownMenuContent = React21.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx28(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx28(
   DropdownMenuPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1151,7 +1327,7 @@ var DropdownMenuContent = React21.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx23(
+var DropdownMenuItem = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx28(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1181,7 +1357,7 @@ var DropdownMenuCheckboxItem = React21.forwardRef(({ className, children, checke
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx23("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx23(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx28("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx28(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx28(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -1193,7 +1369,7 @@ var DropdownMenuCheckboxItem = React21.forwardRef(({ className, children, checke
           strokeLinejoin: "round",
           className: "h-4 w-4",
           "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx23("polyline", { points: "20 6 9 17 4 12" })
+          children: /* @__PURE__ */ jsx28("polyline", { points: "20 6 9 17 4 12" })
         }
       ) }) }),
       children
@@ -1214,13 +1390,13 @@ var DropdownMenuRadioItem = React21.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx23("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx23(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx23("svg", { viewBox: "0 0 24 24", className: "h-2 w-2 fill-current", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("circle", { cx: "12", cy: "12", r: "10" }) }) }) }),
+      /* @__PURE__ */ jsx28("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx28(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx28("svg", { viewBox: "0 0 24 24", className: "h-2 w-2 fill-current", "aria-hidden": "true", children: /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "10" }) }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuLabel = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx23(
+var DropdownMenuLabel = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx28(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1229,17 +1405,17 @@ var DropdownMenuLabel = React21.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+var DropdownMenuSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-muted", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 function DropdownMenuShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx28(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
@@ -1251,18 +1427,18 @@ function DropdownMenuShortcut({ className, ...props }) {
 // src/components/popover/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React22 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React22.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx24(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx24(
+var PopoverContent = React22.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx29(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx29(
   PopoverPrimitive.Content,
   {
     ref,
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
+      "z-50 w-72 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1277,11 +1453,11 @@ PopoverContent.displayName = "PopoverContent";
 // src/components/tooltip/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React23 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React23.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx25(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx25(
+var TooltipContent = React23.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx30(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx30(
   TooltipPrimitive.Content,
   {
     ref,
@@ -1299,7 +1475,7 @@ var TooltipContent = React23.forwardRef(({ className, sideOffset = 4, ...props }
 TooltipContent.displayName = "TooltipContent";
 
 // src/components/form/form.tsx
-import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
 import * as React24 from "react";
 import {
   Controller,
@@ -1307,13 +1483,13 @@ import {
   useFormContext,
   useFormState
 } from "react-hook-form";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Form = FormProvider;
 var FormFieldContext = React24.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsx26(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx26(Controller, { ...props }) });
+  return /* @__PURE__ */ jsx31(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx31(Controller, { ...props }) });
 };
 var FormItemContext = React24.createContext({});
 function useFormField() {
@@ -1338,13 +1514,13 @@ function useFormField() {
 var FormItem = React24.forwardRef(
   ({ className, ...props }, ref) => {
     const id = React24.useId();
-    return /* @__PURE__ */ jsx26(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx26("div", { ref, className: cn("space-y-2", className), ...props }) });
+    return /* @__PURE__ */ jsx31(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx31("div", { ref, className: cn("space-y-2", className), ...props }) });
   }
 );
 FormItem.displayName = "FormItem";
 var FormLabel = React24.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx31(
     Label,
     {
       ref,
@@ -1357,8 +1533,8 @@ var FormLabel = React24.forwardRef(({ className, ...props }, ref) => {
 FormLabel.displayName = "FormLabel";
 var FormControl = React24.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsx26(
-    Slot2,
+  return /* @__PURE__ */ jsx31(
+    Slot3,
     {
       ref,
       id: formItemId,
@@ -1371,7 +1547,7 @@ var FormControl = React24.forwardRef(({ ...props }, ref) => {
 FormControl.displayName = "FormControl";
 var FormDescription = React24.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx31(
     "p",
     {
       ref,
@@ -1386,7 +1562,7 @@ var FormMessage = React24.forwardRef(({ className, children, ...props }, ref) =>
   const { error, formMessageId } = useFormField();
   const body = error?.message ? String(error.message) : children;
   if (!body) return null;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx31(
     "p",
     {
       ref,
@@ -1400,10 +1576,10 @@ var FormMessage = React24.forwardRef(({ className, children, ...props }, ref) =>
 FormMessage.displayName = "FormMessage";
 
 // src/components/alert/alert.tsx
-import { cva as cva5 } from "class-variance-authority";
+import { cva as cva10 } from "class-variance-authority";
 import * as React25 from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var alertVariants = cva5(
+import { jsx as jsx32 } from "react/jsx-runtime";
+var alertVariants = cva10(
   [
     "relative w-full rounded-lg border px-[var(--space-4,1rem)] py-[var(--space-3,0.75rem)] text-sm",
     "transition-all duration-[var(--duration-normal,200ms)] ease-out",
@@ -1413,14 +1589,14 @@ var alertVariants = cva5(
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "border-foreground/[0.08] bg-background text-foreground",
         destructive: "border-destructive/50 text-destructive [&>svg]:text-destructive bg-destructive/5"
       }
     },
     defaultVariants: { variant: "default" }
   }
 );
-var Alert = React25.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx27(
+var Alert = React25.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx32(
   "div",
   {
     ref,
@@ -1430,7 +1606,7 @@ var Alert = React25.forwardRef(({ className, variant, ...props }, ref) => /* @__
   }
 ));
 Alert.displayName = "Alert";
-var AlertTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+var AlertTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   "h5",
   {
     ref,
@@ -1440,15 +1616,15 @@ var AlertTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 AlertTitle.displayName = "AlertTitle";
 var AlertDescription = React25.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
 );
 AlertDescription.displayName = "AlertDescription";
 
 // src/components/sonner/sonner.tsx
 import { Toaster as SonnerToaster, toast } from "sonner";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Toaster({ ...props }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx33(
     SonnerToaster,
     {
       theme: "system",
@@ -1475,17 +1651,17 @@ var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 // src/components/hover-card/hover-card.tsx
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import * as React26 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React26.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx29(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx29(
+var HoverCardContent = React26.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx34(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx34(
   HoverCardPrimitive.Content,
   {
     ref,
     align,
     sideOffset,
     className: cn(
-      "z-50 w-64 rounded-md border bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
+      "z-50 w-64 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1500,18 +1676,18 @@ HoverCardContent.displayName = "HoverCardContent";
 // src/components/context-menu/context-menu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import * as React27 from "react";
-import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx30(
+var ContextMenuContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Content,
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1521,7 +1697,7 @@ var ContextMenuContent = React27.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = "ContextMenuContent";
-var ContextMenuItem = React27.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx30(
+var ContextMenuItem = React27.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -1551,7 +1727,7 @@ var ContextMenuCheckboxItem = React27.forwardRef(({ className, children, checked
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx30("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx30(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx35(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx35(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -1563,7 +1739,7 @@ var ContextMenuCheckboxItem = React27.forwardRef(({ className, children, checked
           strokeLinejoin: "round",
           className: "h-4 w-4",
           "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx30("polyline", { points: "20 6 9 17 4 12" })
+          children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
         }
       ) }) }),
       children
@@ -1584,13 +1760,13 @@ var ContextMenuRadioItem = React27.forwardRef(({ className, children, ...props }
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx30("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx30(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx30("svg", { viewBox: "0 0 24 24", className: "h-2 w-2 fill-current", "aria-hidden": "true", children: /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "10" }) }) }) }),
+      /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx35(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx35("svg", { viewBox: "0 0 24 24", className: "h-2 w-2 fill-current", "aria-hidden": "true", children: /* @__PURE__ */ jsx35("circle", { cx: "12", cy: "12", r: "10" }) }) }) }),
       children
     ]
   }
 ));
 ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
-var ContextMenuLabel = React27.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx30(
+var ContextMenuLabel = React27.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -1599,17 +1775,17 @@ var ContextMenuLabel = React27.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = "ContextMenuLabel";
-var ContextMenuSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var ContextMenuSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
   ContextMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-border", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
 function ContextMenuShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx35(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
@@ -1621,13 +1797,13 @@ function ContextMenuShortcut({ className, ...props }) {
 // src/components/menubar/menubar.tsx
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import * as React28 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var Menubar = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+import { jsx as jsx36 } from "react/jsx-runtime";
+var Menubar = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   MenubarPrimitive.Root,
   {
     ref,
     className: cn(
-      "flex h-[var(--control-height-md,2.5rem)] items-center space-x-1 rounded-md border bg-background p-[var(--space-1,0.25rem)]",
+      "flex h-[var(--control-height-md,2.5rem)] items-center space-x-1 rounded-md border border-foreground/[0.08] bg-background p-[var(--space-1,0.25rem)]",
       className
     ),
     ...props
@@ -1638,7 +1814,7 @@ var MenubarMenu = MenubarPrimitive.Menu;
 var MenubarGroup = MenubarPrimitive.Group;
 var MenubarPortal = MenubarPrimitive.Portal;
 var MenubarRadioGroup = MenubarPrimitive.RadioGroup;
-var MenubarTrigger = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var MenubarTrigger = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   MenubarPrimitive.Trigger,
   {
     ref,
@@ -1653,7 +1829,7 @@ var MenubarTrigger = React28.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 MenubarTrigger.displayName = "MenubarTrigger";
-var MenubarContent = React28.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx31(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx31(
+var MenubarContent = React28.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx36(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx36(
   MenubarPrimitive.Content,
   {
     ref,
@@ -1661,7 +1837,7 @@ var MenubarContent = React28.forwardRef(({ className, align = "start", alignOffs
     alignOffset,
     sideOffset,
     className: cn(
-      "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
+      "z-50 min-w-[12rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -1671,7 +1847,7 @@ var MenubarContent = React28.forwardRef(({ className, align = "start", alignOffs
   }
 ) }));
 MenubarContent.displayName = "MenubarContent";
-var MenubarItem = React28.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx31(
+var MenubarItem = React28.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx36(
   MenubarPrimitive.Item,
   {
     ref,
@@ -1687,7 +1863,7 @@ var MenubarItem = React28.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 MenubarItem.displayName = "MenubarItem";
-var MenubarLabel = React28.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx31(
+var MenubarLabel = React28.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx36(
   MenubarPrimitive.Label,
   {
     ref,
@@ -1696,17 +1872,17 @@ var MenubarLabel = React28.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 MenubarLabel.displayName = "MenubarLabel";
-var MenubarSeparator = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var MenubarSeparator = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
   MenubarPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-muted", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
 MenubarSeparator.displayName = "MenubarSeparator";
 function MenubarShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx36(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
@@ -1717,9 +1893,9 @@ function MenubarShortcut({ className, ...props }) {
 
 // src/components/navigation-menu/navigation-menu.tsx
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva as cva6 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import * as React29 from "react";
-import { jsx as jsx32, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
 var NavigationMenu = React29.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
   NavigationMenuPrimitive.Root,
   {
@@ -1728,12 +1904,12 @@ var NavigationMenu = React29.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx32(NavigationMenuViewport, {})
+      /* @__PURE__ */ jsx37(NavigationMenuViewport, {})
     ]
   }
 ));
 NavigationMenu.displayName = "NavigationMenu";
-var NavigationMenuList = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var NavigationMenuList = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
   NavigationMenuPrimitive.List,
   {
     ref,
@@ -1743,7 +1919,7 @@ var NavigationMenuList = React29.forwardRef(({ className, ...props }, ref) => /*
 ));
 NavigationMenuList.displayName = "NavigationMenuList";
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
-var navigationMenuTriggerStyle = cva6(
+var navigationMenuTriggerStyle = cva11(
   "group inline-flex h-[var(--control-height-md,2.5rem)] w-max items-center justify-center rounded-md bg-background px-[var(--space-4,1rem)] py-[var(--space-2,0.5rem)] text-sm font-medium transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 );
 var NavigationMenuTrigger = React29.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
@@ -1754,7 +1930,7 @@ var NavigationMenuTrigger = React29.forwardRef(({ className, children, ...props
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx37(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -1766,14 +1942,14 @@ var NavigationMenuTrigger = React29.forwardRef(({ className, children, ...props
           strokeLinejoin: "round",
           className: "relative top-[1px] ml-[var(--space-1,0.25rem)] h-3 w-3 transition duration-[var(--duration-normal,200ms)] group-data-[state=open]:rotate-180",
           "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx32("polyline", { points: "6 9 12 15 18 9" })
+          children: /* @__PURE__ */ jsx37("polyline", { points: "6 9 12 15 18 9" })
         }
       )
     ]
   }
 ));
 NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
-var NavigationMenuContent = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var NavigationMenuContent = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
   NavigationMenuPrimitive.Content,
   {
     ref,
@@ -1786,11 +1962,11 @@ var NavigationMenuContent = React29.forwardRef(({ className, ...props }, ref) =>
 ));
 NavigationMenuContent.displayName = "NavigationMenuContent";
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx32(
+var NavigationMenuViewport = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx37(
   NavigationMenuPrimitive.Viewport,
   {
     className: cn(
-      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg",
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-foreground/[0.08] bg-popover text-popover-foreground shadow-lg",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
       "md:w-[var(--radix-navigation-menu-viewport-width)]",
       className
@@ -1800,7 +1976,7 @@ var NavigationMenuViewport = React29.forwardRef(({ className, ...props }, ref) =
   }
 ) }));
 NavigationMenuViewport.displayName = "NavigationMenuViewport";
-var NavigationMenuIndicator = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
+var NavigationMenuIndicator = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx37(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
@@ -1809,21 +1985,21 @@ var NavigationMenuIndicator = React29.forwardRef(({ className, ...props }, ref)
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx32("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    children: /* @__PURE__ */ jsx37("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-foreground/[0.12] shadow-md" })
   }
 ));
 NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
 
 // src/components/breadcrumb/breadcrumb.tsx
-import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
 import * as React30 from "react";
-import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs12 } from "react/jsx-runtime";
 var Breadcrumb = React30.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsx33("nav", { ref, "aria-label": "breadcrumb", ...props })
+  (props, ref) => /* @__PURE__ */ jsx38("nav", { ref, "aria-label": "breadcrumb", ...props })
 );
 Breadcrumb.displayName = "Breadcrumb";
 var BreadcrumbList = React30.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
     "ol",
     {
       ref,
@@ -1837,7 +2013,7 @@ var BreadcrumbList = React30.forwardRef(
 );
 BreadcrumbList.displayName = "BreadcrumbList";
 var BreadcrumbItem = React30.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
     "li",
     {
       ref,
@@ -1848,8 +2024,8 @@ var BreadcrumbItem = React30.forwardRef(
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbLink = React30.forwardRef(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot3 : "a";
-  return /* @__PURE__ */ jsx33(
+  const Comp = asChild ? Slot4 : "a";
+  return /* @__PURE__ */ jsx38(
     Comp,
     {
       ref,
@@ -1860,7 +2036,7 @@ var BreadcrumbLink = React30.forwardRef(({ asChild, className, ...props }, ref)
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
 var BreadcrumbPage = React30.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
     "span",
     {
       ref,
@@ -1878,7 +2054,7 @@ function BreadcrumbSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33("li", { role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className), ...props, children: children ?? /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx38("li", { role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className), ...props, children: children ?? /* @__PURE__ */ jsx38(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1889,7 +2065,7 @@ function BreadcrumbSeparator({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx33("polyline", { points: "9 18 15 12 9 6" })
+      children: /* @__PURE__ */ jsx38("polyline", { points: "9 18 15 12 9 6" })
     }
   ) });
 }
@@ -1913,13 +2089,13 @@ function BreadcrumbEllipsis({ className, ...props }) {
             className: "h-4 w-4",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx33("circle", { cx: "12", cy: "12", r: "1" }),
-              /* @__PURE__ */ jsx33("circle", { cx: "19", cy: "12", r: "1" }),
-              /* @__PURE__ */ jsx33("circle", { cx: "5", cy: "12", r: "1" })
+              /* @__PURE__ */ jsx38("circle", { cx: "12", cy: "12", r: "1" }),
+              /* @__PURE__ */ jsx38("circle", { cx: "19", cy: "12", r: "1" }),
+              /* @__PURE__ */ jsx38("circle", { cx: "5", cy: "12", r: "1" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx33("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx38("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
@@ -1927,9 +2103,9 @@ function BreadcrumbEllipsis({ className, ...props }) {
 
 // src/components/table/table.tsx
 import * as React31 from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Table = React31.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx34("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx34(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx39("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx39(
     "table",
     {
       ref,
@@ -1939,35 +2115,35 @@ var Table = React31.forwardRef(
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-b-foreground/[0.08]", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+var TableBody = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableFooter = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   "tfoot",
   {
     ref,
     className: cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t border-t-foreground/[0.08] bg-muted/50 font-medium [&>tr]:last:border-b-0",
       className
     ),
     ...props
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableRow = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   "tr",
   {
     ref,
     className: cn(
-      "border-b transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b border-b-foreground/[0.08] transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-muted/50 data-[state=selected]:bg-muted",
       className
     ),
     ...props
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableHead = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   "th",
   {
     ref,
@@ -1979,7 +2155,7 @@ var TableHead = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableCell = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   "td",
   {
     ref,
@@ -1988,7 +2164,7 @@ var TableCell = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
+var TableCaption = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   "caption",
   {
     ref,
@@ -2007,7 +2183,7 @@ import {
   getCoreRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -2019,18 +2195,18 @@ function DataTable({
     columns,
     getCoreRowModel: getCoreRowModel()
   });
-  return /* @__PURE__ */ jsx35("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs13(Table, { "aria-label": ariaLabel, children: [
-    caption ? /* @__PURE__ */ jsx35(TableCaption, { children: caption }) : null,
-    /* @__PURE__ */ jsx35(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx35(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx35(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsx35(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx35(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx35(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx35(TableRow, { children: /* @__PURE__ */ jsx35(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
+  return /* @__PURE__ */ jsx40("div", { className: "rounded-md border border-foreground/[0.08]", children: /* @__PURE__ */ jsxs13(Table, { "aria-label": ariaLabel, children: [
+    caption ? /* @__PURE__ */ jsx40(TableCaption, { children: caption }) : null,
+    /* @__PURE__ */ jsx40(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx40(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx40(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx40(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx40(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx40(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx40(TableRow, { children: /* @__PURE__ */ jsx40(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
   ] }) });
 }
 
 // src/components/pagination/pagination.tsx
 import * as React32 from "react";
-import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx41(
     "nav",
     {
       role: "navigation",
@@ -2041,7 +2217,7 @@ function Pagination({ className, ...props }) {
   );
 }
 var PaginationContent = React32.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
     "ul",
     {
       ref,
@@ -2052,7 +2228,7 @@ var PaginationContent = React32.forwardRef(
 );
 PaginationContent.displayName = "PaginationContent";
 var PaginationItem = React32.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36("li", { ref, className, ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41("li", { ref, className, ...props })
 );
 PaginationItem.displayName = "PaginationItem";
 function PaginationLink({
@@ -2061,7 +2237,7 @@ function PaginationLink({
   size = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx41(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -2082,7 +2258,7 @@ function PaginationPrevious({ className, ...props }) {
       className: cn("gap-1 pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx41(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -2094,10 +2270,10 @@ function PaginationPrevious({ className, ...props }) {
             strokeLinejoin: "round",
             className: "h-4 w-4",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx36("polyline", { points: "15 18 9 12 15 6" })
+            children: /* @__PURE__ */ jsx41("polyline", { points: "15 18 9 12 15 6" })
           }
         ),
-        /* @__PURE__ */ jsx36("span", { children: "Previous" })
+        /* @__PURE__ */ jsx41("span", { children: "Previous" })
       ]
     }
   );
@@ -2111,8 +2287,8 @@ function PaginationNext({ className, ...props }) {
       className: cn("gap-1 pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx36("span", { children: "Next" }),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx41("span", { children: "Next" }),
+        /* @__PURE__ */ jsx41(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -2124,7 +2300,7 @@ function PaginationNext({ className, ...props }) {
             strokeLinejoin: "round",
             className: "h-4 w-4",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx36("polyline", { points: "9 18 15 12 9 6" })
+            children: /* @__PURE__ */ jsx41("polyline", { points: "9 18 15 12 9 6" })
           }
         )
       ]
@@ -2151,13 +2327,13 @@ function PaginationEllipsis({ className, ...props }) {
             className: "h-4 w-4",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "12", r: "1" }),
-              /* @__PURE__ */ jsx36("circle", { cx: "19", cy: "12", r: "1" }),
-              /* @__PURE__ */ jsx36("circle", { cx: "5", cy: "12", r: "1" })
+              /* @__PURE__ */ jsx41("circle", { cx: "12", cy: "12", r: "1" }),
+              /* @__PURE__ */ jsx41("circle", { cx: "19", cy: "12", r: "1" }),
+              /* @__PURE__ */ jsx41("circle", { cx: "5", cy: "12", r: "1" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx41("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
@@ -2165,14 +2341,14 @@ function PaginationEllipsis({ className, ...props }) {
 
 // src/components/calendar/calendar.tsx
 import { DayPicker } from "react-day-picker";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx42(
     DayPicker,
     {
       showOutsideDays,
@@ -2184,10 +2360,10 @@ function Calendar({
         caption_label: "text-sm font-medium",
         nav: "absolute inset-x-3 top-3 z-10 flex items-center justify-between pointer-events-none [&>button]:pointer-events-auto",
         button_previous: cn(
-          "inline-flex h-7 w-7 items-center justify-center rounded-md border bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
+          "inline-flex h-7 w-7 items-center justify-center rounded-md border border-foreground/[0.08] bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
         ),
         button_next: cn(
-          "inline-flex h-7 w-7 items-center justify-center rounded-md border bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
+          "inline-flex h-7 w-7 items-center justify-center rounded-md border border-foreground/[0.08] bg-transparent p-0 opacity-60 transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
         ),
         month_grid: "w-full border-collapse space-y-1",
         weekdays: "flex",
@@ -2208,7 +2384,7 @@ function Calendar({
       components: {
         Chevron: ({ orientation, className: chevronClassName }) => {
           const rotation = orientation === "left" ? "rotate-90" : orientation === "right" ? "-rotate-90" : orientation === "up" ? "rotate-180" : "";
-          return /* @__PURE__ */ jsx37(
+          return /* @__PURE__ */ jsx42(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -2220,7 +2396,7 @@ function Calendar({
               strokeLinejoin: "round",
               className: cn("h-4 w-4", rotation, chevronClassName),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx37("polyline", { points: "6 9 12 15 18 9" })
+              children: /* @__PURE__ */ jsx42("polyline", { points: "6 9 12 15 18 9" })
             }
           );
         }
@@ -2234,7 +2410,7 @@ Calendar.displayName = "Calendar";
 // src/components/date-picker/date-picker.tsx
 import { format } from "date-fns";
 import * as React33 from "react";
-import { jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs15 } from "react/jsx-runtime";
 function DatePicker({
   value,
   onChange,
@@ -2246,7 +2422,7 @@ function DatePicker({
 }) {
   const [open, setOpen] = React33.useState(false);
   return /* @__PURE__ */ jsxs15(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx38(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsx43(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
       "button",
       {
         type: "button",
@@ -2254,6 +2430,7 @@ function DatePicker({
         "aria-label": ariaLabel ?? placeholder,
         className: cn(
           "inline-flex h-[var(--control-height-md,2.5rem)] w-[240px] items-center justify-start gap-[var(--gap-sm,0.5rem)] rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-left text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
           "hover:bg-accent hover:text-accent-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50",
@@ -2274,18 +2451,18 @@ function DatePicker({
               className: "h-4 w-4",
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ jsx38("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
-                /* @__PURE__ */ jsx38("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
-                /* @__PURE__ */ jsx38("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
-                /* @__PURE__ */ jsx38("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+                /* @__PURE__ */ jsx43("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx43("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+                /* @__PURE__ */ jsx43("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+                /* @__PURE__ */ jsx43("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx38("span", { children: value ? format(value, dateFormat) : placeholder })
+          /* @__PURE__ */ jsx43("span", { children: value ? format(value, dateFormat) : placeholder })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx38(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx43(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx43(
       Calendar,
       {
         mode: "single",
@@ -2304,9 +2481,9 @@ DatePicker.displayName = "DatePicker";
 // src/components/input-otp/input-otp.tsx
 import { OTPInput, OTPInputContext } from "input-otp";
 import * as React34 from "react";
-import { jsx as jsx39, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs16 } from "react/jsx-runtime";
 var InputOTP = React34.forwardRef(
-  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx39(
+  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx44(
     OTPInput,
     {
       ref,
@@ -2320,7 +2497,7 @@ var InputOTP = React34.forwardRef(
   )
 );
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx44("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
 var InputOTPSlot = React34.forwardRef(
   ({ index, className, ...props }, ref) => {
@@ -2335,6 +2512,7 @@ var InputOTPSlot = React34.forwardRef(
         ref,
         className: cn(
           "relative flex h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)] items-center justify-center border-y border-r border-input text-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "inset-ring-1 inset-ring-foreground/[0.06]",
           "first:rounded-l-md first:border-l last:rounded-r-md",
           isActive && "z-10 ring-2 ring-ring ring-offset-2 ring-offset-background",
           className
@@ -2342,14 +2520,14 @@ var InputOTPSlot = React34.forwardRef(
         ...props,
         children: [
           char,
-          hasFakeCaret && /* @__PURE__ */ jsx39("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx39("div", { className: "h-4 w-px animate-pulse bg-foreground duration-1000" }) })
+          hasFakeCaret && /* @__PURE__ */ jsx44("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx44("div", { className: "h-4 w-px animate-pulse bg-foreground duration-1000" }) })
         ]
       }
     );
   }
 );
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React34.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx39("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx39(
+var InputOTPSeparator = React34.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx44("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx44(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2357,7 +2535,7 @@ var InputOTPSeparator = React34.forwardRef(({ ...props }, ref) => /* @__PURE__ *
     fill: "currentColor",
     className: "h-2 w-2 text-muted-foreground",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx39("circle", { cx: "12", cy: "12", r: "6" })
+    children: /* @__PURE__ */ jsx44("circle", { cx: "12", cy: "12", r: "6" })
   }
 ) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
@@ -2365,8 +2543,8 @@ InputOTPSeparator.displayName = "InputOTPSeparator";
 // src/components/command/command.tsx
 import { Command as CommandPrimitive } from "cmdk";
 import * as React35 from "react";
-import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
-var Command = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+import { jsx as jsx45, jsxs as jsxs17 } from "react/jsx-runtime";
+var Command = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   CommandPrimitive,
   {
     ref,
@@ -2386,13 +2564,13 @@ function CommandDialog({
 }) {
   return /* @__PURE__ */ jsxs17(Dialog, { ...props, children: [
     /* @__PURE__ */ jsxs17(DialogHeader, { className: "sr-only", children: [
-      /* @__PURE__ */ jsx40(DialogTitle, { children: title }),
-      /* @__PURE__ */ jsx40(DialogDescription, { children: description })
+      /* @__PURE__ */ jsx45(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx45(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsx40(DialogContent, { className: "overflow-hidden p-0", scrollable: false, children: /* @__PURE__ */ jsx40(Command, { className: "[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
+    /* @__PURE__ */ jsx45(DialogContent, { className: "overflow-hidden p-0", scrollable: false, children: /* @__PURE__ */ jsx45(Command, { className: "[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
   ] });
 }
-var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b px-[var(--space-3,0.75rem)]", "cmdk-input-wrapper": "", children: [
+var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b border-b-foreground/[0.08] px-[var(--space-3,0.75rem)]", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsxs17(
     "svg",
     {
@@ -2406,12 +2584,12 @@ var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
       className: "mr-[var(--space-2,0.5rem)] h-4 w-4 shrink-0 opacity-50",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx40("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx40("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+        /* @__PURE__ */ jsx45("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx45("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
       ]
     }
   ),
-  /* @__PURE__ */ jsx40(
+  /* @__PURE__ */ jsx45(
     CommandPrimitive.Input,
     {
       ref,
@@ -2424,7 +2602,7 @@ var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = "CommandInput";
-var CommandList = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var CommandList = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   CommandPrimitive.List,
   {
     ref,
@@ -2433,9 +2611,9 @@ var CommandList = React35.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = "CommandList";
-var CommandEmpty = React35.forwardRef((props, ref) => /* @__PURE__ */ jsx40(CommandPrimitive.Empty, { ref, className: "py-[var(--space-6,1.5rem)] text-center text-sm", ...props }));
+var CommandEmpty = React35.forwardRef((props, ref) => /* @__PURE__ */ jsx45(CommandPrimitive.Empty, { ref, className: "py-[var(--space-6,1.5rem)] text-center text-sm", ...props }));
 CommandEmpty.displayName = "CommandEmpty";
-var CommandGroup = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var CommandGroup = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   CommandPrimitive.Group,
   {
     ref,
@@ -2447,18 +2625,18 @@ var CommandGroup = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-var CommandSeparator = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var CommandSeparator = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   "div",
   {
     ref,
     role: "none",
     "data-cmdk-separator": "",
-    className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-border", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
     ...props
   }
 ));
 CommandSeparator.displayName = "CommandSeparator";
-var CommandItem = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var CommandItem = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   CommandPrimitive.Item,
   {
     ref,
@@ -2474,7 +2652,7 @@ var CommandItem = React35.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 CommandItem.displayName = "CommandItem";
 function CommandShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx45(
     "span",
     {
       className: cn(
@@ -2489,7 +2667,7 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/combobox/combobox.tsx
 import * as React36 from "react";
-import { jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs18 } from "react/jsx-runtime";
 function Combobox({
   options,
   value,
@@ -2506,7 +2684,7 @@ function Combobox({
   const listboxId = React36.useId();
   const selected = options.find((o) => o.value === value);
   return /* @__PURE__ */ jsxs18(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsx46(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs18(
       "button",
       {
         type: "button",
@@ -2519,6 +2697,7 @@ function Combobox({
         disabled,
         className: cn(
           "inline-flex h-[var(--control-height-md,2.5rem)] w-[240px] items-center justify-between gap-[var(--gap-sm,0.5rem)] rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
           "hover:bg-accent hover:text-accent-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:pointer-events-none disabled:opacity-50",
@@ -2526,8 +2705,8 @@ function Combobox({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx41("span", { className: "truncate", children: selected ? selected.label : placeholder }),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx46("span", { className: "truncate", children: selected ? selected.label : placeholder }),
+          /* @__PURE__ */ jsx46(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -2539,17 +2718,17 @@ function Combobox({
               strokeLinejoin: "round",
               className: "h-4 w-4 shrink-0 opacity-50",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx41("polyline", { points: "6 9 12 15 18 9" })
+              children: /* @__PURE__ */ jsx46("polyline", { points: "6 9 12 15 18 9" })
             }
           )
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx41(PopoverContent, { className: "w-[240px] p-0", align: "start", children: /* @__PURE__ */ jsxs18(Command, { children: [
-      /* @__PURE__ */ jsx41(CommandInput, { placeholder: searchPlaceholder }),
+    /* @__PURE__ */ jsx46(PopoverContent, { className: "w-[240px] p-0", align: "start", children: /* @__PURE__ */ jsxs18(Command, { children: [
+      /* @__PURE__ */ jsx46(CommandInput, { placeholder: searchPlaceholder }),
       /* @__PURE__ */ jsxs18(CommandList, { id: listboxId, children: [
-        /* @__PURE__ */ jsx41(CommandEmpty, { children: emptyText }),
-        /* @__PURE__ */ jsx41(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx46(CommandEmpty, { children: emptyText }),
+        /* @__PURE__ */ jsx46(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs18(
           CommandItem,
           {
             value: option.label,
@@ -2559,7 +2738,7 @@ function Combobox({
               setOpen(false);
             },
             children: [
-              /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx46(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -2574,7 +2753,7 @@ function Combobox({
                     value === option.value ? "opacity-100" : "opacity-0"
                   ),
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx41("polyline", { points: "20 6 9 17 4 12" })
+                  children: /* @__PURE__ */ jsx46("polyline", { points: "20 6 9 17 4 12" })
                 }
               ),
               option.label
@@ -2590,14 +2769,14 @@ Combobox.displayName = "Combobox";
 
 // src/components/sheet/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva12 } from "class-variance-authority";
 import * as React37 from "react";
-import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs19 } from "react/jsx-runtime";
 var Sheet = SheetPrimitive.Root;
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var SheetOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   SheetPrimitive.Overlay,
   {
     ref,
@@ -2611,9 +2790,10 @@ var SheetOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SheetOverlay.displayName = "SheetOverlay";
-var sheetVariants = cva7(
+var sheetVariants = cva12(
   cn(
     "fixed z-50 gap-[var(--gap-md,1rem)] bg-background p-[var(--space-6,1.5rem)] shadow-lg",
+    "border-foreground/[0.08]",
     "transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out",
     "data-[state=closed]:duration-[var(--duration-slow,300ms)] data-[state=open]:duration-500"
   ),
@@ -2632,7 +2812,7 @@ var sheetVariants = cva7(
   }
 );
 var SheetContent = React37.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs19(SheetPortal, { children: [
-  /* @__PURE__ */ jsx42(SheetOverlay, {}),
+  /* @__PURE__ */ jsx47(SheetOverlay, {}),
   /* @__PURE__ */ jsxs19(
     SheetPrimitive.Content,
     {
@@ -2664,12 +2844,12 @@ var SheetContent = React37.forwardRef(({ side = "right", className, children, ..
                   className: "h-4 w-4",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ jsx42("path", { d: "M18 6 6 18" }),
-                    /* @__PURE__ */ jsx42("path", { d: "m6 6 12 12" })
+                    /* @__PURE__ */ jsx47("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsx47("path", { d: "m6 6 12 12" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "Close" })
+              /* @__PURE__ */ jsx47("span", { className: "sr-only", children: "Close" })
             ]
           }
         )
@@ -2679,7 +2859,7 @@ var SheetContent = React37.forwardRef(({ side = "right", className, children, ..
 ] }));
 SheetContent.displayName = "SheetContent";
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
@@ -2688,7 +2868,7 @@ function SheetHeader({ className, ...props }) {
   );
 }
 function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       className: cn(
@@ -2699,7 +2879,7 @@ function SheetFooter({ className, ...props }) {
     }
   );
 }
-var SheetTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var SheetTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   SheetPrimitive.Title,
   {
     ref,
@@ -2708,7 +2888,7 @@ var SheetTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = "SheetTitle";
-var SheetDescription = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var SheetDescription = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   SheetPrimitive.Description,
   {
     ref,
@@ -2721,15 +2901,15 @@ SheetDescription.displayName = "SheetDescription";
 // src/components/drawer/drawer.tsx
 import * as React38 from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
-import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs20 } from "react/jsx-runtime";
 function Drawer({ shouldScaleBackground = true, ...props }) {
-  return /* @__PURE__ */ jsx43(DrawerPrimitive.Root, { shouldScaleBackground, ...props });
+  return /* @__PURE__ */ jsx48(DrawerPrimitive.Root, { shouldScaleBackground, ...props });
 }
 Drawer.displayName = "Drawer";
 var DrawerTrigger = DrawerPrimitive.Trigger;
 var DrawerPortal = DrawerPrimitive.Portal;
 var DrawerClose = DrawerPrimitive.Close;
-var DrawerOverlay = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var DrawerOverlay = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
   DrawerPrimitive.Overlay,
   {
     ref,
@@ -2742,18 +2922,18 @@ var DrawerOverlay = React38.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 DrawerOverlay.displayName = "DrawerOverlay";
 var DrawerContent = React38.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs20(DrawerPortal, { children: [
-  /* @__PURE__ */ jsx43(DrawerOverlay, {}),
+  /* @__PURE__ */ jsx48(DrawerOverlay, {}),
   /* @__PURE__ */ jsxs20(
     DrawerPrimitive.Content,
     {
       ref,
       className: cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-foreground/[0.08] bg-background",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx43("div", { className: "mx-auto mt-[var(--space-4,1rem)] h-2 w-[100px] rounded-full bg-muted", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx48("div", { className: "mx-auto mt-[var(--space-4,1rem)] h-2 w-[100px] rounded-full bg-muted", "aria-hidden": "true" }),
         children
       ]
     }
@@ -2761,7 +2941,7 @@ var DrawerContent = React38.forwardRef(({ className, children, ...props }, ref)
 ] }));
 DrawerContent.displayName = "DrawerContent";
 function DrawerHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       className: cn("grid gap-1.5 p-[var(--space-4,1rem)] text-center sm:text-left", className),
@@ -2770,9 +2950,9 @@ function DrawerHeader({ className, ...props }) {
   );
 }
 function DrawerFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx43("div", { className: cn("mt-auto flex flex-col gap-[var(--gap-sm,0.5rem)] p-[var(--space-4,1rem)]", className), ...props });
+  return /* @__PURE__ */ jsx48("div", { className: cn("mt-auto flex flex-col gap-[var(--gap-sm,0.5rem)] p-[var(--space-4,1rem)]", className), ...props });
 }
-var DrawerTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var DrawerTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
   DrawerPrimitive.Title,
   {
     ref,
@@ -2781,7 +2961,7 @@ var DrawerTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var DrawerDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
   DrawerPrimitive.Description,
   {
     ref,
@@ -2797,12 +2977,12 @@ import {
   Panel as ResizablePrimitivePanel,
   Separator as ResizablePrimitiveSeparator
 } from "react-resizable-panels";
-import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs21 } from "react/jsx-runtime";
 function ResizablePanelGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx49(
     ResizablePrimitiveGroup,
     {
       className: cn(
@@ -2816,11 +2996,11 @@ function ResizablePanelGroup({
 ResizablePanelGroup.displayName = "ResizablePanelGroup";
 var ResizablePanel = ResizablePrimitivePanel;
 function ResizableHandle({ withHandle, className, ...props }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx49(
     ResizablePrimitiveSeparator,
     {
       className: cn(
-        "relative flex w-px items-center justify-center bg-border transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-ring data-[separator=active]:bg-ring",
+        "relative flex w-px items-center justify-center bg-foreground/[0.12] transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-ring data-[separator=active]:bg-ring",
         "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full",
@@ -2829,7 +3009,7 @@ function ResizableHandle({ withHandle, className, ...props }) {
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsx44("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsxs21(
+      children: withHandle && /* @__PURE__ */ jsx49("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsxs21(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -2838,12 +3018,12 @@ function ResizableHandle({ withHandle, className, ...props }) {
           className: "h-2.5 w-2.5",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ jsx44("circle", { cx: "9", cy: "5", r: "1" }),
-            /* @__PURE__ */ jsx44("circle", { cx: "9", cy: "12", r: "1" }),
-            /* @__PURE__ */ jsx44("circle", { cx: "9", cy: "19", r: "1" }),
-            /* @__PURE__ */ jsx44("circle", { cx: "15", cy: "5", r: "1" }),
-            /* @__PURE__ */ jsx44("circle", { cx: "15", cy: "12", r: "1" }),
-            /* @__PURE__ */ jsx44("circle", { cx: "15", cy: "19", r: "1" })
+            /* @__PURE__ */ jsx49("circle", { cx: "9", cy: "5", r: "1" }),
+            /* @__PURE__ */ jsx49("circle", { cx: "9", cy: "12", r: "1" }),
+            /* @__PURE__ */ jsx49("circle", { cx: "9", cy: "19", r: "1" }),
+            /* @__PURE__ */ jsx49("circle", { cx: "15", cy: "5", r: "1" }),
+            /* @__PURE__ */ jsx49("circle", { cx: "15", cy: "12", r: "1" }),
+            /* @__PURE__ */ jsx49("circle", { cx: "15", cy: "19", r: "1" })
           ]
         }
       ) })
@@ -2853,10 +3033,10 @@ function ResizableHandle({ withHandle, className, ...props }) {
 ResizableHandle.displayName = "ResizableHandle";
 
 // src/components/sidebar/sidebar.tsx
-import { Slot as Slot4 } from "@radix-ui/react-slot";
-import { cva as cva8 } from "class-variance-authority";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import { cva as cva13 } from "class-variance-authority";
 import * as React39 from "react";
-import { Fragment as Fragment2, jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx50, jsxs as jsxs22 } from "react/jsx-runtime";
 var SidebarContext = React39.createContext(null);
 function useSidebar() {
   const ctx = React39.useContext(SidebarContext);
@@ -2885,7 +3065,7 @@ function SidebarProvider({
     [isControlled, onOpenChange]
   );
   const value = React39.useMemo(() => ({ open, setOpen }), [open, setOpen]);
-  return /* @__PURE__ */ jsx45(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx50(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx50(
     "div",
     {
       "data-state": open ? "open" : "closed",
@@ -2895,9 +3075,9 @@ function SidebarProvider({
   ) });
 }
 SidebarProvider.displayName = "SidebarProvider";
-var sidebarVariants = cva8(
+var sidebarVariants = cva13(
   cn(
-    "flex h-full shrink-0 flex-col border-r bg-background text-foreground",
+    "flex h-full shrink-0 flex-col border-foreground/[0.08] border-r bg-background text-foreground",
     "transition-[width] duration-[var(--duration-normal,200ms)] ease-out"
   ),
   {
@@ -2920,7 +3100,7 @@ var sidebarVariants = cva8(
 var Sidebar = React39.forwardRef(
   ({ className, side = "left", children, ...props }, ref) => {
     const { open } = useSidebar();
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx50(
       "aside",
       {
         ref,
@@ -2938,9 +3118,9 @@ Sidebar.displayName = "Sidebar";
 var SidebarTrigger = React39.forwardRef(
   ({ asChild, className, onClick, "aria-label": ariaLabel, ...props }, ref) => {
     const { open, setOpen } = useSidebar();
-    const Comp = asChild ? Slot4 : "button";
+    const Comp = asChild ? Slot5 : "button";
     const resolvedAriaLabel = ariaLabel ?? (asChild ? void 0 : open ? "Collapse sidebar" : "Expand sidebar");
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx50(
       Comp,
       {
         ref,
@@ -2974,12 +3154,12 @@ var SidebarTrigger = React39.forwardRef(
               className: "h-4 w-4",
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ jsx45("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-                /* @__PURE__ */ jsx45("line", { x1: "9", y1: "3", x2: "9", y2: "21" })
+                /* @__PURE__ */ jsx50("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx50("line", { x1: "9", y1: "3", x2: "9", y2: "21" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx45("span", { className: "sr-only", children: "Toggle sidebar" })
+          /* @__PURE__ */ jsx50("span", { className: "sr-only", children: "Toggle sidebar" })
         ] })
       }
     );
@@ -2987,18 +3167,18 @@ var SidebarTrigger = React39.forwardRef(
 );
 SidebarTrigger.displayName = "SidebarTrigger";
 var SidebarHeader = React39.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
     "div",
     {
       ref,
-      className: cn("flex items-center gap-[var(--gap-sm,0.5rem)] border-b p-[var(--space-4,1rem)]", className),
+      className: cn("flex items-center gap-[var(--gap-sm,0.5rem)] border-b border-b-foreground/[0.08] p-[var(--space-4,1rem)]", className),
       ...props
     }
   )
 );
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarContent = React39.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
     "div",
     {
       ref,
@@ -3009,11 +3189,11 @@ var SidebarContent = React39.forwardRef(
 );
 SidebarContent.displayName = "SidebarContent";
 var SidebarFooter = React39.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
     "div",
     {
       ref,
-      className: cn("mt-auto border-t p-[var(--space-4,1rem)]", className),
+      className: cn("mt-auto border-t border-t-foreground/[0.08] p-[var(--space-4,1rem)]", className),
       ...props
     }
   )
@@ -3021,8 +3201,8 @@ var SidebarFooter = React39.forwardRef(
 SidebarFooter.displayName = "SidebarFooter";
 var SidebarItem = React39.forwardRef(
   ({ asChild, active, className, ...props }, ref) => {
-    const Comp = asChild ? Slot4 : "button";
-    return /* @__PURE__ */ jsx45(
+    const Comp = asChild ? Slot5 : "button";
+    return /* @__PURE__ */ jsx50(
       Comp,
       {
         ref,
@@ -4847,6 +5027,535 @@ var aspectRatioSchema = {
   tags: ["aspect-ratio", "layout", "image", "video", "ratio"]
 };
 
+// src/primitives/container/container.schema.ts
+var containerSchema = {
+  name: "container",
+  displayName: "Container",
+  description: "Centered max-width wrapper that constrains content to readable widths. Sizes map to `--container-*` prose-width tokens; padding maps to `--space-*`.",
+  category: "primitive",
+  subcategory: "layout",
+  props: [
+    {
+      name: "size",
+      type: "enum",
+      required: false,
+      default: "lg",
+      description: "Max-width preset bound to `--container-*` tokens (sm=33rem, md=40rem, lg=50rem, xl=66rem, full=100%).",
+      enumValues: ["sm", "md", "lg", "xl", "full"]
+    },
+    {
+      name: "padding",
+      type: "enum",
+      required: false,
+      default: "md",
+      description: "Horizontal padding bound to `--space-*` tokens (none=0, sm=0.75rem, md=1rem, lg=2rem).",
+      enumValues: ["none", "sm", "md", "lg"]
+    },
+    {
+      name: "asChild",
+      type: "boolean",
+      required: false,
+      default: false,
+      description: "Render as a different element via Radix `Slot`. Use to render as `<main>`, `<section>`, etc. for landmark semantics."
+    }
+  ],
+  variants: [
+    {
+      name: "size",
+      description: "Max-width preset bound to `--container-*` tokens.",
+      values: [
+        { value: "sm", description: "33rem (\u2248530px) \u2014 narrow column for short content." },
+        { value: "md", description: "40rem (\u2248640px) \u2014 comfortable reading width." },
+        { value: "lg", description: "50rem (\u2248800px) \u2014 default; standard article width." },
+        { value: "xl", description: "66rem (\u22481056px) \u2014 wider canvas for dashboards or marketing." },
+        { value: "full", description: "100% \u2014 disable max-width clamp." }
+      ],
+      default: "lg"
+    },
+    {
+      name: "padding",
+      description: "Horizontal padding bound to `--space-*` tokens.",
+      values: [
+        { value: "none", description: "0 \u2014 flush to container edges." },
+        { value: "sm", description: "0.75rem \u2014 tight gutter." },
+        { value: "md", description: "1rem \u2014 default; standard reading gutter." },
+        { value: "lg", description: "2rem \u2014 generous gutter for marketing pages." }
+      ],
+      default: "md"
+    }
+  ],
+  slots: [
+    {
+      name: "children",
+      description: "Page content to constrain \u2014 typically a section, article, or grid.",
+      required: true,
+      acceptedTypes: ["ReactNode"]
+    }
+  ],
+  dependencies: {
+    npm: ["class-variance-authority", "@radix-ui/react-slot"],
+    internal: ["lib/utils"],
+    peer: ["react"]
+  },
+  tokensUsed: [
+    "--container-sm",
+    "--container-md",
+    "--container-lg",
+    "--container-xl",
+    "--space-3",
+    "--space-4",
+    "--space-8"
+  ],
+  examples: [
+    {
+      title: "Reading-width article",
+      description: "lg size (50rem) + md padding for an article body.",
+      code: '<Container size="lg" padding="md">\n  <article>...</article>\n</Container>'
+    },
+    {
+      title: "Full-width hero",
+      description: "Use size=full when you want the section to span the viewport.",
+      code: '<Container size="full" padding="none">\n  <Hero />\n</Container>'
+    }
+  ],
+  ai: {
+    whenToUse: "Use to constrain page content to readable widths. Pair with `Stack` or `Grid` inside for vertical/grid layouts. Default for any centered article, settings page, or marketing section.",
+    whenNotToUse: 'Don\'t use inside another `Container` (double-clamping). Don\'t use as a drop-in for `<main>` semantics \u2014 it\'s a layout primitive, not a landmark. For full-bleed sections (edge-to-edge banners), pass `size="full" padding="none"`.',
+    commonMistakes: [
+      "Wrapping a `Container` in another `Container` and getting an unexpectedly narrow column",
+      'Using `padding="none"` and forgetting that children still need their own gutter \u2014 the parent contributes nothing',
+      "Treating `lg` as the largest size \u2014 `xl` (66rem) and `full` are bigger"
+    ],
+    relatedComponents: ["stack", "grid", "cluster"],
+    accessibilityNotes: "Container is presentational. Wrap in a semantic landmark (`<main>`, `<section>`, `<article>`) when the page structure needs it; Container itself renders a plain `<div>`.",
+    tokenBudget: 250
+  },
+  tags: ["container", "layout", "wrapper", "max-width", "primitive"]
+};
+
+// src/primitives/stack/stack.schema.ts
+var stackSchema = {
+  name: "stack",
+  displayName: "Stack",
+  description: 'Vertical flex flow with token-bound gap. The headless equivalent of `<div className="flex flex-col gap-X">` with consistent spacing scale.',
+  category: "primitive",
+  subcategory: "layout",
+  props: [
+    {
+      name: "gap",
+      type: "enum",
+      required: false,
+      default: "md",
+      description: "Vertical spacing between children, bound to `--gap-*` tokens.",
+      enumValues: ["xs", "sm", "md", "lg", "xl"]
+    },
+    {
+      name: "align",
+      type: "enum",
+      required: false,
+      default: "stretch",
+      description: "Cross-axis alignment (CSS `align-items`).",
+      enumValues: ["start", "center", "end", "stretch"]
+    },
+    {
+      name: "justify",
+      type: "enum",
+      required: false,
+      default: "start",
+      description: "Main-axis distribution (CSS `justify-content`).",
+      enumValues: ["start", "center", "end", "between"]
+    }
+  ],
+  variants: [
+    {
+      name: "gap",
+      description: "Vertical gap between children, bound to `--gap-*` tokens.",
+      values: [
+        { value: "xs", description: "0.25rem \u2014 barely-there spacing." },
+        { value: "sm", description: "0.5rem \u2014 tight grouping." },
+        { value: "md", description: "1rem \u2014 default; standard rhythm." },
+        { value: "lg", description: "1.5rem \u2014 section-level spacing." },
+        { value: "xl", description: "2rem \u2014 major separation." }
+      ],
+      default: "md"
+    },
+    {
+      name: "align",
+      description: "Cross-axis alignment (CSS `align-items`).",
+      values: [
+        { value: "start", description: "Children align to left edge." },
+        { value: "center", description: "Children center horizontally." },
+        { value: "end", description: "Children align to right edge." },
+        { value: "stretch", description: "Default \u2014 children fill container width." }
+      ],
+      default: "stretch"
+    },
+    {
+      name: "justify",
+      description: "Main-axis distribution (CSS `justify-content`).",
+      values: [
+        { value: "start", description: "Default \u2014 children pack to top." },
+        { value: "center", description: "Children center vertically." },
+        { value: "end", description: "Children pack to bottom." },
+        { value: "between", description: "First child to top, last to bottom, even distribution." }
+      ],
+      default: "start"
+    }
+  ],
+  slots: [
+    {
+      name: "children",
+      description: "Items to stack vertically.",
+      required: true,
+      acceptedTypes: ["ReactNode"]
+    }
+  ],
+  dependencies: {
+    npm: ["class-variance-authority"],
+    internal: ["lib/utils"],
+    peer: ["react"]
+  },
+  tokensUsed: ["--gap-xs", "--gap-sm", "--gap-md", "--gap-lg", "--gap-xl"],
+  examples: [
+    {
+      title: "Form sections",
+      description: "Lg gap separates labelled groups; nested Stack with sm gap groups label+input.",
+      code: '<Stack gap="lg">\n  <Stack gap="sm"><Label>Email</Label><Input /></Stack>\n  <Stack gap="sm"><Label>Password</Label><Input type="password" /></Stack>\n  <Button>Submit</Button>\n</Stack>'
+    },
+    {
+      title: "Centered hero",
+      description: "Center children horizontally for a centered call-to-action stack.",
+      code: '<Stack gap="md" align="center">\n  <h1>Title</h1>\n  <p>Subtitle</p>\n  <Button>Get started</Button>\n</Stack>'
+    }
+  ],
+  ai: {
+    whenToUse: "Use anywhere you'd write `flex flex-col gap-X`. Default for vertical lists of dissimilar items (label + input + helper text), section bodies, sidebar items, button groups stacked vertically.",
+    whenNotToUse: "Don't use for tabular data \u2014 use `<table>` or DataTable. Don't use for grid-like layouts \u2014 use `Grid`. Don't reach for `Stack` when a single child needs no spacing \u2014 just render the child.",
+    commonMistakes: [
+      'Setting `gap="md"` then adding `mt-*` / `space-y-*` on individual children \u2014 pick one spacing system',
+      'Using `align="center"` and wondering why children expand to full width \u2014 that\'s the `stretch` default for cross-axis',
+      "Nesting Stack inside Stack with the same gap when one Stack with two children would suffice"
+    ],
+    relatedComponents: ["cluster", "grid", "container"],
+    accessibilityNotes: "Stack is presentational. Wrap stacked navigation links in a `<nav>`, stacked form fields in a `<form>`, etc. \u2014 Stack does not contribute landmark semantics.",
+    tokenBudget: 250
+  },
+  tags: ["stack", "layout", "flex", "column", "vertical", "primitive"]
+};
+
+// src/primitives/cluster/cluster.schema.ts
+var clusterSchema = {
+  name: "cluster",
+  displayName: "Cluster",
+  description: "Horizontal flex flow with wrap and token-bound gap. Use for tag lists, button rows, breadcrumbs, and any group of equally-weighted inline items.",
+  category: "primitive",
+  subcategory: "layout",
+  props: [
+    {
+      name: "gap",
+      type: "enum",
+      required: false,
+      default: "md",
+      description: "Gap between items, bound to `--gap-*` tokens. Applies to both row and column gaps when wrapping.",
+      enumValues: ["xs", "sm", "md", "lg", "xl"]
+    },
+    {
+      name: "align",
+      type: "enum",
+      required: false,
+      default: "center",
+      description: "Cross-axis alignment (CSS `align-items`). `baseline` aligns text-baselines for mixed-size siblings; `stretch` makes items fill row height (useful for wrap-card layouts).",
+      enumValues: ["start", "center", "end", "stretch", "baseline"]
+    },
+    {
+      name: "justify",
+      type: "enum",
+      required: false,
+      default: "start",
+      description: "Main-axis distribution (CSS `justify-content`).",
+      enumValues: ["start", "center", "end", "between"]
+    }
+  ],
+  variants: [
+    {
+      name: "gap",
+      description: "Gap between items, bound to `--gap-*` tokens (applies to row + column gaps when wrapping).",
+      values: [
+        { value: "xs", description: "0.25rem \u2014 barely-there spacing." },
+        { value: "sm", description: "0.5rem \u2014 tight chip group." },
+        { value: "md", description: "1rem \u2014 default; standard rhythm." },
+        { value: "lg", description: "1.5rem \u2014 generous separation." },
+        { value: "xl", description: "2rem \u2014 section-scale spacing." }
+      ],
+      default: "md"
+    },
+    {
+      name: "align",
+      description: "Cross-axis alignment (CSS `align-items`).",
+      values: [
+        { value: "start", description: "Items align to top of row." },
+        { value: "center", description: "Default \u2014 items center vertically in the row." },
+        { value: "end", description: "Items align to bottom of row." },
+        { value: "stretch", description: "Items fill row height \u2014 use for wrap layouts of equal-height cards." },
+        { value: "baseline", description: "Text-baselines align across mixed-size siblings." }
+      ],
+      default: "center"
+    },
+    {
+      name: "justify",
+      description: "Main-axis distribution (CSS `justify-content`).",
+      values: [
+        { value: "start", description: "Default \u2014 items pack to start of row." },
+        { value: "center", description: "Items center horizontally." },
+        { value: "end", description: "Items pack to end of row." },
+        { value: "between", description: "First item flush left, last flush right, even distribution." }
+      ],
+      default: "start"
+    }
+  ],
+  slots: [
+    {
+      name: "children",
+      description: "Items to lay out horizontally with wrap.",
+      required: true,
+      acceptedTypes: ["ReactNode"]
+    }
+  ],
+  dependencies: {
+    npm: ["class-variance-authority"],
+    internal: ["lib/utils"],
+    peer: ["react"]
+  },
+  tokensUsed: ["--gap-xs", "--gap-sm", "--gap-md", "--gap-lg", "--gap-xl"],
+  examples: [
+    {
+      title: "Tag chips",
+      description: "Small gap, wraps when overflowing the row.",
+      code: '<Cluster gap="sm">\n  {tags.map((t) => <Badge key={t}>{t}</Badge>)}\n</Cluster>'
+    },
+    {
+      title: "Action bar",
+      description: "Right-aligned buttons inside a panel footer.",
+      code: '<Cluster gap="sm" justify="end">\n  <Button variant="ghost">Cancel</Button>\n  <Button>Save</Button>\n</Cluster>'
+    }
+  ],
+  ai: {
+    whenToUse: "Use for any horizontal row of items that should wrap when space runs out: tag clouds, breadcrumbs, button rows, social-link icon strips, inline metadata badges. Pick `Cluster` over `flex` when you want predictable wrap + gap behavior.",
+    whenNotToUse: "Don't use for two-element rows where you need precise positional control (left/right) \u2014 use `Stack` rotated or a flex with `justify-between` directly. Don't use for grid-aligned layouts where columns must line up across rows \u2014 use `Grid`.",
+    commonMistakes: [
+      "Forgetting that `Cluster` wraps \u2014 adding `flex-nowrap` defeats the purpose; if you don't want wrap, use a flex row or `Stack` rotated",
+      "Setting `align=\"baseline\"` for icon+text rows where the icon's bbox doesn't have a baseline \u2014 use `center` instead",
+      "Reaching for `Cluster` for tabular alignment \u2014 use `Grid` or a real `<table>` when columns must line up"
+    ],
+    relatedComponents: ["stack", "grid", "container"],
+    accessibilityNotes: "Cluster is presentational. Lists of navigational items should be wrapped in `<nav>` (and ideally `<ul>` / `<li>`). Lists of tags can use a list element for screen-reader semantics; the visual wrap is independent.",
+    tokenBudget: 250
+  },
+  tags: ["cluster", "layout", "flex", "wrap", "horizontal", "primitive"]
+};
+
+// src/primitives/grid/grid.schema.ts
+var gridSchema = {
+  name: "grid",
+  displayName: "Grid",
+  description: 'CSS grid with column-count presets and token-bound gap. Pass `cols="auto-fit"` + `minColWidth` for responsive grids without media queries.',
+  category: "primitive",
+  subcategory: "layout",
+  props: [
+    {
+      name: "cols",
+      type: "enum",
+      required: false,
+      default: "3",
+      description: 'Number of fixed columns, or `"auto-fit"` for responsive tracks (use with `minColWidth`).',
+      enumValues: ["1", "2", "3", "4", "6", "auto-fit"]
+    },
+    {
+      name: "gap",
+      type: "enum",
+      required: false,
+      default: "md",
+      description: "Gap between cells, bound to `--gap-*` tokens.",
+      enumValues: ["xs", "sm", "md", "lg", "xl"]
+    },
+    {
+      name: "align",
+      type: "enum",
+      required: false,
+      default: "stretch",
+      description: "Cell vertical alignment within their grid row.",
+      enumValues: ["start", "center", "end", "stretch"]
+    },
+    {
+      name: "minColWidth",
+      type: "string",
+      required: false,
+      default: "16rem",
+      description: 'Min track size for `cols="auto-fit"` (e.g. `"20rem"`). Ignored when `cols` is a fixed integer.'
+    }
+  ],
+  variants: [
+    {
+      name: "cols",
+      description: "Column count or `auto-fit` mode.",
+      values: [
+        { value: "1", description: "Single column \u2014 items stack vertically inside the grid." },
+        { value: "2", description: "Two even columns." },
+        { value: "3", description: "Default \u2014 three even columns." },
+        { value: "4", description: "Four even columns." },
+        { value: "6", description: "Six even columns \u2014 dense layouts." },
+        { value: "auto-fit", description: "Tracks repeat to fill width, never below `minColWidth`." }
+      ],
+      default: "3"
+    },
+    {
+      name: "gap",
+      description: "Gap between cells, bound to `--gap-*` tokens.",
+      values: [
+        { value: "xs", description: "0.25rem \u2014 minimal separation." },
+        { value: "sm", description: "0.5rem \u2014 tight grid." },
+        { value: "md", description: "1rem \u2014 default; standard rhythm." },
+        { value: "lg", description: "1.5rem \u2014 generous separation." },
+        { value: "xl", description: "2rem \u2014 major separation between cards." }
+      ],
+      default: "md"
+    },
+    {
+      name: "align",
+      description: "Cell vertical alignment within their grid row.",
+      values: [
+        { value: "start", description: "Cells align to top of row." },
+        { value: "center", description: "Cells center vertically." },
+        { value: "end", description: "Cells align to bottom of row." },
+        { value: "stretch", description: "Default \u2014 cells fill row height." }
+      ],
+      default: "stretch"
+    }
+  ],
+  slots: [
+    {
+      name: "children",
+      description: "Grid cells \u2014 typically Cards, images, or any uniform block.",
+      required: true,
+      acceptedTypes: ["ReactNode"]
+    }
+  ],
+  dependencies: {
+    npm: ["class-variance-authority"],
+    internal: ["lib/utils"],
+    peer: ["react"]
+  },
+  tokensUsed: ["--gap-xs", "--gap-sm", "--gap-md", "--gap-lg", "--gap-xl"],
+  examples: [
+    {
+      title: "Three-column card grid",
+      description: "Fixed 3 columns with medium gap.",
+      code: '<Grid cols={3} gap="md">\n  {items.map((i) => <Card key={i.id}>{i.title}</Card>)}\n</Grid>'
+    },
+    {
+      title: "Responsive auto-fit",
+      description: "Tracks fit as many 20rem columns as the viewport allows; no media queries needed.",
+      code: '<Grid cols="auto-fit" minColWidth="20rem" gap="lg">\n  {items.map(...)}\n</Grid>'
+    }
+  ],
+  ai: {
+    whenToUse: 'Use for visually-aligned grids of similar items: card galleries, image walls, dashboard tiles, settings panels. Prefer `cols="auto-fit"` + `minColWidth` over hand-written breakpoints when the column count should adapt to viewport width.',
+    whenNotToUse: "Don't use for one-dimensional flows \u2014 use `Stack` (vertical) or `Cluster` (horizontal). Don't use for tabular data \u2014 use `<table>` or DataTable. Don't fight `Grid` to make uneven columns; if cells need different sizes, use a flexbox layout or a CSS grid with named tracks directly.",
+    commonMistakes: [
+      'Setting `cols={5}` and getting nothing \u2014 the preset only supports 1/2/3/4/6 (deliberate, to avoid odd visual rhythms); use `cols="auto-fit"` for arbitrary counts',
+      'Passing `cols="auto-fit"` without `minColWidth` \u2014 the default `16rem` may not match your design intent',
+      "Using `Grid` for two children when `Cluster` or `Stack` would communicate intent better"
+    ],
+    relatedComponents: ["stack", "cluster", "container", "card"],
+    accessibilityNotes: "Grid is presentational. If the grid renders a list of similar items, wrap in `<ul>`/`<li>` for screen-reader semantics \u2014 Grid only handles visual layout.",
+    tokenBudget: 300
+  },
+  tags: ["grid", "layout", "css-grid", "responsive", "auto-fit", "primitive"]
+};
+
+// src/primitives/spacer/spacer.schema.ts
+var spacerSchema = {
+  name: "spacer",
+  displayName: "Spacer",
+  description: "Declarative whitespace block bound to `--space-*` tokens. Use when sibling spacing can't come from a parent's `gap`.",
+  category: "primitive",
+  subcategory: "layout",
+  props: [
+    {
+      name: "size",
+      type: "enum",
+      required: false,
+      default: "md",
+      description: "Spacing token (xs=0.25rem, sm=0.5rem, md=1rem, lg=2rem, xl=4rem). Bound to `--space-*`.",
+      enumValues: ["xs", "sm", "md", "lg", "xl"]
+    },
+    {
+      name: "axis",
+      type: "enum",
+      required: false,
+      default: "vertical",
+      description: "Which axis to expand. Vertical = height; horizontal = width; both = square.",
+      enumValues: ["vertical", "horizontal", "both"]
+    }
+  ],
+  variants: [
+    {
+      name: "size",
+      description: "Spacer extent bound to `--space-*` tokens.",
+      values: [
+        { value: "xs", description: "0.25rem \u2014 micro-gap." },
+        { value: "sm", description: "0.5rem \u2014 tight separation." },
+        { value: "md", description: "1rem \u2014 default; standard breathing room." },
+        { value: "lg", description: "2rem \u2014 section-scale separation." },
+        { value: "xl", description: "4rem \u2014 major separation between hero areas." }
+      ],
+      default: "md"
+    },
+    {
+      name: "axis",
+      description: "Which axis the spacer extends along.",
+      values: [
+        { value: "vertical", description: "Default \u2014 fixed height, 1px width." },
+        { value: "horizontal", description: "Fixed width, 1px height \u2014 for flex rows." },
+        { value: "both", description: "Square block \u2014 rare; usually pick one axis." }
+      ],
+      default: "vertical"
+    }
+  ],
+  slots: [],
+  dependencies: {
+    npm: ["class-variance-authority"],
+    internal: ["lib/utils"],
+    peer: ["react"]
+  },
+  tokensUsed: ["--space-1", "--space-2", "--space-4", "--space-8", "--space-16"],
+  examples: [
+    {
+      title: "Vertical breathing room",
+      description: "Push two sections apart inside a parent that doesn't manage gap.",
+      code: '<>\n  <Hero />\n  <Spacer size="xl" />\n  <Features />\n</>'
+    },
+    {
+      title: "Horizontal flex spacer",
+      description: "Push siblings to opposite ends of a flex row.",
+      code: '<div className="flex items-center">\n  <Logo />\n  <Spacer axis="horizontal" size="lg" />\n  <Nav />\n</div>'
+    }
+  ],
+  ai: {
+    whenToUse: "Use as an explicit whitespace primitive when you can't (or don't want to) use `gap` on the parent \u2014 typically: pushing siblings apart inside a flex row that already has gap-0, or inserting one-off vertical breathing room between top-level sections that aren't wrapped in a Stack.",
+    whenNotToUse: "Don't use Spacer when a `Stack` or `Cluster` parent's `gap` would do the same thing \u2014 that scales better and keeps the spacing concern with the layout primitive. Don't use Spacer to flush content to one edge of a flex container \u2014 use `ml-auto` / `justify-between` directly.",
+    commonMistakes: [
+      "Using `<Spacer />` between every child in a Stack \u2014 just set the Stack's `gap` instead",
+      'Using `axis="both"` and getting a square block where you wanted a line \u2014 `both` is rare, usually you want vertical or horizontal',
+      `Setting size="lg" on a horizontal spacer and getting nothing visible because the parent isn't a flex row \u2014 Spacer reserves space, it doesn't push siblings on its own`
+    ],
+    relatedComponents: ["stack", "cluster", "separator"],
+    accessibilityNotes: 'Spacer is `aria-hidden="true"` \u2014 screen readers skip it. Don\'t use a Spacer where a `Separator` would convey meaning (a thematic break should be `Separator`, not `Spacer`).',
+    tokenBudget: 200
+  },
+  tags: ["spacer", "layout", "whitespace", "spacing", "primitive"]
+};
+
 // src/components/collapsible/collapsible.schema.ts
 var collapsibleSchema = {
   name: "collapsible",
@@ -6270,6 +6979,7 @@ export {
   CardHeader,
   CardTitle,
   Checkbox,
+  Cluster,
   Collapsible,
   CollapsibleContent2 as CollapsibleContent,
   CollapsibleTrigger2 as CollapsibleTrigger,
@@ -6283,6 +6993,7 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  Container,
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
@@ -6337,6 +7048,7 @@ export {
   FormItem,
   FormLabel,
   FormMessage,
+  Grid,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -6412,6 +7124,8 @@ export {
   SidebarTrigger,
   Skeleton,
   Slider,
+  Spacer,
+  Stack,
   Switch,
   Table,
   TableBody,
@@ -6448,10 +7162,14 @@ export {
   calendarSchema,
   cardSchema,
   checkboxSchema,
+  clusterSchema,
+  clusterVariants,
   cn,
   collapsibleSchema,
   comboboxSchema,
   commandSchema,
+  containerSchema,
+  containerVariants,
   contextMenuSchema,
   dataTableSchema,
   datePickerSchema,
@@ -6459,6 +7177,8 @@ export {
   drawerSchema,
   dropdownMenuSchema,
   formSchema,
+  gridSchema,
+  gridVariants,
   hoverCardSchema,
   inputOTPSchema,
   inputSchema,
@@ -6479,6 +7199,10 @@ export {
   skeletonSchema,
   sliderSchema,
   sonnerSchema,
+  spacerSchema,
+  spacerVariants,
+  stackSchema,
+  stackVariants,
   switchSchema,
   tableSchema,
   tabsSchema,