@hex-core/components 0.1.0 → 0.2.0

package/dist/index.js

@@ -16,8 +16,10 @@ function cn(...inputs) {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   [
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
-    "transition-all duration-200 ease-out",
+    // Tokens consumed (fall back to Tailwind defaults when no theme is loaded):
+    // --gap-sm, --duration-normal, --control-height-{sm,md,lg}, --space-{2,3,4,8}
+    "inline-flex items-center justify-center gap-[var(--gap-sm,0.5rem)] whitespace-nowrap rounded-md text-sm font-medium",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     "disabled:pointer-events-none disabled:opacity-50",
     "active:scale-[0.98]",
@@ -50,10 +52,10 @@ var buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8 text-base",
-        icon: "h-10 w-10"
+        default: "h-[var(--control-height-md,2.5rem)] px-[var(--space-4,1rem)] py-[var(--space-2,0.5rem)]",
+        sm: "h-[var(--control-height-sm,2.25rem)] rounded-md px-[var(--space-3,0.75rem)]",
+        lg: "h-[var(--control-height-lg,2.75rem)] rounded-md px-[var(--space-8,2rem)] text-base",
+        icon: "h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)]"
       }
     },
     defaultVariants: {
@@ -123,8 +125,8 @@ var Input = React2.forwardRef(
       {
         type,
         className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-          "transition-all duration-200 ease-out",
+          "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",
           "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
           "placeholder:text-muted-foreground",
@@ -164,8 +166,8 @@ var Textarea = React4.forwardRef(
       "textarea",
       {
         className: cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-          "transition-all duration-200 ease-out",
+          "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",
           "placeholder:text-muted-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -192,7 +194,7 @@ var Checkbox = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ref,
     className: cn(
       "group h-4 w-4 shrink-0 rounded-sm border border-input",
-      "transition-all duration-200 ease-out",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "shadow-sm",
       "hover:border-ring/50 hover:shadow-md",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -247,8 +249,8 @@ var Switch = React6.forwardRef(
     SwitchPrimitive.Root,
     {
       className: cn(
-        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
-        "transition-all duration-200 ease-out",
+        "peer inline-flex h-6 w-[var(--control-height-lg,2.75rem)] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
+        "transition-all duration-[var(--duration-normal,200ms)] ease-out",
         "shadow-sm",
         "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",
@@ -263,7 +265,7 @@ var Switch = React6.forwardRef(
         {
           className: cn(
             "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0",
-            "transition-transform duration-200 ease-out",
+            "transition-transform duration-[var(--duration-normal,200ms)] ease-out",
             "data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
           )
         }
@@ -279,7 +281,7 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 var badgeVariants = cva3(
   [
     "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold",
-    "transition-all duration-200 ease-out",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
   ].join(" "),
   {
@@ -332,8 +334,8 @@ var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) =
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm",
-      "transition-all duration-200 ease-out shadow-sm",
+      "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",
       "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",
@@ -386,7 +388,7 @@ var SelectContent = React8.forwardRef(({ className, children, position = "popper
       SelectPrimitive.Viewport,
       {
         className: cn(
-          "p-1",
+          "p-[var(--space-1,0.25rem)]",
           position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         ),
         children
@@ -399,7 +401,7 @@ var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    className: cn("py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm font-semibold", className),
     ...props
   }
 ));
@@ -409,8 +411,8 @@ var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "transition-all duration-200 ease-out",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
@@ -441,7 +443,7 @@ var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-muted", className),
     ...props
   }
 ));
@@ -455,7 +457,7 @@ var RadioGroup = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   RadioGroupPrimitive.Root,
   {
     className: cn(
-      "grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-row",
+      "grid gap-[var(--gap-sm,0.5rem)] data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-row",
       className
     ),
     ref,
@@ -469,7 +471,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-200 ease-out shadow-sm",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-sm",
       "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",
@@ -499,7 +501,7 @@ var Slider = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
         {
           className: cn(
             "block h-5 w-5 rounded-full border-2 border-primary bg-background",
-            "transition-all duration-200 ease-out shadow-md",
+            "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-md",
             "hover:shadow-lg hover:scale-110",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             "disabled:pointer-events-none disabled:opacity-50"
@@ -520,7 +522,7 @@ import { jsx as jsx12 } from "react/jsx-runtime";
 var toggleVariants = cva4(
   [
     "inline-flex items-center justify-center rounded-md text-sm font-medium",
-    "transition-all duration-200 ease-out",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out",
     "hover:bg-muted hover:text-muted-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",
@@ -534,9 +536,9 @@ var toggleVariants = cva4(
         outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
       },
       size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11"
+        default: "h-[var(--control-height-md,2.5rem)] px-[var(--space-3,0.75rem)] min-w-[var(--control-height-md,2.5rem)]",
+        sm: "h-[var(--control-height-sm,2.25rem)] px-2.5 min-w-[var(--control-height-sm,2.25rem)]",
+        lg: "h-[var(--control-height-lg,2.75rem)] px-5 min-w-[var(--control-height-lg,2.75rem)]"
       }
     },
     defaultVariants: { variant: "default", size: "default" }
@@ -598,7 +600,7 @@ var Avatar = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   AvatarPrimitive.Root,
   {
     ref,
-    className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
+    className: cn("relative flex h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)] shrink-0 overflow-hidden rounded-full", className),
     ...props
   }
 ));
@@ -685,7 +687,7 @@ var ScrollBar = React15.forwardRef(({ className, orientation = "vertical", ...pr
     ref,
     orientation,
     className: cn(
-      "flex touch-none select-none transition-all duration-200 ease-out",
+      "flex touch-none select-none transition-all duration-[var(--duration-normal,200ms)] ease-out",
       orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
@@ -710,7 +712,7 @@ var Card = React16.forwardRef(
       ref,
       className: cn(
         "rounded-lg border bg-card text-card-foreground",
-        "shadow-sm transition-all duration-200 ease-out",
+        "shadow-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
         "hover:shadow-md",
         className
       ),
@@ -720,7 +722,14 @@ var Card = React16.forwardRef(
 );
 Card.displayName = "Card";
 var CardHeader = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-[var(--space-6,1.5rem)]", className),
+      ...props
+    }
+  )
 );
 CardHeader.displayName = "CardHeader";
 var CardTitle = React16.forwardRef(
@@ -737,11 +746,18 @@ CardTitle.displayName = "CardTitle";
 var CardDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18("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-6 pt-0", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("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("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center p-[var(--space-6,1.5rem)] pt-0", className),
+      ...props
+    }
+  )
 );
 CardFooter.displayName = "CardFooter";
 
@@ -755,7 +771,7 @@ var TabsList = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "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",
       className
     ),
     ...props
@@ -767,8 +783,8 @@ var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium",
-      "transition-all duration-200 ease-out",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-[var(--space-3,0.75rem)] py-1.5 text-sm font-medium",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "ring-offset-background hover:text-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",
@@ -784,7 +800,7 @@ var TabsContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "mt-2 ring-offset-background",
+      "mt-[var(--space-2,0.5rem)] ring-offset-background",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     ),
@@ -805,8 +821,8 @@ var AccordionTrigger = React18.forwardRef(({ className, children, ...props }, re
   {
     ref,
     className: cn(
-      "flex flex-1 items-center justify-between py-4 font-medium",
-      "transition-all duration-200 ease-out",
+      "flex flex-1 items-center justify-between py-[var(--space-4,1rem)] font-medium",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "hover:underline",
       "[&[data-state=open]>svg]:rotate-180",
       className
@@ -826,7 +842,7 @@ var AccordionTrigger = React18.forwardRef(({ className, children, ...props }, re
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          className: "h-4 w-4 shrink-0 transition-transform duration-200",
+          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" })
         }
@@ -841,7 +857,7 @@ var AccordionContent = React18.forwardRef(({ className, children, ...props }, re
     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-4 pt-0", className), children })
+    children: /* @__PURE__ */ jsx20("div", { className: cn("pb-[var(--space-4,1rem)] pt-0", className), children })
   }
 ));
 AccordionContent.displayName = "AccordionContent";
@@ -875,9 +891,9 @@ var DialogContent = React19.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4",
-        "border bg-background p-6 shadow-lg rounded-lg",
-        "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "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",
+        "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",
         className
@@ -890,7 +906,7 @@ var DialogContent = React19.forwardRef(({ className, children, ...props }, ref)
           {
             className: cn(
               "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background",
-              "transition-all duration-200 ease-out hover:opacity-100",
+              "transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               "disabled:pointer-events-none"
             ),
@@ -990,9 +1006,9 @@ var AlertDialogContent = React20.forwardRef(({ className, ...props }, ref) => /*
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4",
-        "border bg-background p-6 shadow-lg rounded-lg",
-        "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "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",
+        "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",
         className
@@ -1046,9 +1062,9 @@ var AlertDialogAction = React20.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
+      "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",
       "bg-destructive text-destructive-foreground shadow-sm",
-      "transition-all duration-200 ease-out",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "hover:bg-destructive/90 hover:shadow-md",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:pointer-events-none disabled:opacity-50",
@@ -1064,12 +1080,12 @@ var AlertDialogCancel = React20.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
+      "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",
-      "transition-all duration-200 ease-out",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "hover:bg-accent hover:text-accent-foreground hover:shadow-md",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "mt-2 sm:mt-0",
+      "mt-[var(--space-2,0.5rem)] sm:mt-0",
       "active:scale-[0.98]",
       className
     ),
@@ -1094,7 +1110,7 @@ var DropdownMenuContent = React21.forwardRef(({ className, sideOffset = 4, ...pr
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border 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",
@@ -1110,11 +1126,11 @@ var DropdownMenuItem = React21.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-      "transition-all duration-200 ease-out",
+      "relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "pl-[var(--space-8,2rem)]",
       className
     ),
     ...props
@@ -1126,8 +1142,8 @@ var DropdownMenuCheckboxItem = React21.forwardRef(({ className, children, checke
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "transition-all duration-200 ease-out",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
@@ -1160,8 +1176,8 @@ var DropdownMenuRadioItem = React21.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "transition-all duration-200 ease-out",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
@@ -1178,7 +1194,7 @@ var DropdownMenuLabel = React21.forwardRef(({ className, inset, ...props }, ref)
   DropdownMenuPrimitive.Label,
   {
     ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+    className: cn("px-[var(--space-2,0.5rem)] py-1.5 text-sm font-semibold", inset && "pl-[var(--space-8,2rem)]", className),
     ...props
   }
 ));
@@ -1187,7 +1203,7 @@ var DropdownMenuSeparator = React21.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-muted", className),
     ...props
   }
 ));
@@ -1216,7 +1232,7 @@ var PopoverContent = React22.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      "z-50 w-72 rounded-md border 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",
@@ -1241,7 +1257,7 @@ var TooltipContent = React23.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md",
+      "z-50 overflow-hidden rounded-md bg-primary px-[var(--space-3,0.75rem)] py-1.5 text-xs text-primary-foreground shadow-md",
       "animate-in fade-in-0 zoom-in-95",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -1359,8 +1375,8 @@ import * as React25 from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var alertVariants = cva5(
   [
-    "relative w-full rounded-lg border px-4 py-3 text-sm",
-    "transition-all duration-200 ease-out",
+    "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",
     "[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-foreground",
     "[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]"
   ].join(" "),
@@ -1388,7 +1404,7 @@ var AlertTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "h5",
   {
     ref,
-    className: cn("mb-1 font-medium leading-none tracking-tight", className),
+    className: cn("mb-[var(--space-1,0.25rem)] font-medium leading-none tracking-tight", className),
     ...props
   }
 ));
@@ -1439,7 +1455,7 @@ var HoverCardContent = React26.forwardRef(({ className, align = "center", sideOf
     align,
     sideOffset,
     className: cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      "z-50 w-64 rounded-md border 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",
@@ -1465,7 +1481,7 @@ var ContextMenuContent = React27.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border 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",
@@ -1480,11 +1496,11 @@ var ContextMenuItem = React27.forwardRef(({ className, inset, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-      "transition-all duration-200 ease-out",
+      "relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "pl-[var(--space-8,2rem)]",
       className
     ),
     ...props
@@ -1496,8 +1512,8 @@ var ContextMenuCheckboxItem = React27.forwardRef(({ className, children, checked
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "transition-all duration-200 ease-out",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
@@ -1530,8 +1546,8 @@ var ContextMenuRadioItem = React27.forwardRef(({ className, children, ...props }
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "transition-all duration-200 ease-out",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
@@ -1548,7 +1564,7 @@ var ContextMenuLabel = React27.forwardRef(({ className, inset, ...props }, ref)
   ContextMenuPrimitive.Label,
   {
     ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className),
+    className: cn("px-[var(--space-2,0.5rem)] py-1.5 text-sm font-semibold text-foreground", inset && "pl-[var(--space-8,2rem)]", className),
     ...props
   }
 ));
@@ -1557,7 +1573,7 @@ var ContextMenuSeparator = React27.forwardRef(({ className, ...props }, ref) =>
   ContextMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-border", className),
     ...props
   }
 ));
@@ -1581,7 +1597,7 @@ var Menubar = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      "flex h-[var(--control-height-md,2.5rem)] items-center space-x-1 rounded-md border bg-background p-[var(--space-1,0.25rem)]",
       className
     ),
     ...props
@@ -1597,8 +1613,8 @@ var MenubarTrigger = React28.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none",
-      "transition-all duration-200 ease-out",
+      "flex cursor-default select-none items-center rounded-sm px-[var(--space-3,0.75rem)] py-1.5 text-sm font-medium outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       className
@@ -1615,7 +1631,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-1 text-popover-foreground shadow-md",
+      "z-50 min-w-[12rem] overflow-hidden rounded-md border 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",
@@ -1630,11 +1646,11 @@ var MenubarItem = React28.forwardRef(({ className, inset, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-      "transition-all duration-200 ease-out",
+      "relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "pl-[var(--space-8,2rem)]",
       className
     ),
     ...props
@@ -1645,7 +1661,7 @@ var MenubarLabel = React28.forwardRef(({ className, inset, ...props }, ref) => /
   MenubarPrimitive.Label,
   {
     ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+    className: cn("px-[var(--space-2,0.5rem)] py-1.5 text-sm font-semibold", inset && "pl-[var(--space-8,2rem)]", className),
     ...props
   }
 ));
@@ -1654,7 +1670,7 @@ var MenubarSeparator = React28.forwardRef(({ className, ...props }, ref) => /* @
   MenubarPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-muted", className),
     ...props
   }
 ));
@@ -1698,7 +1714,7 @@ var NavigationMenuList = React29.forwardRef(({ className, ...props }, ref) => /*
 NavigationMenuList.displayName = "NavigationMenuList";
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva6(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-all duration-200 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"
+  "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(
   NavigationMenuPrimitive.Trigger,
@@ -1718,7 +1734,7 @@ var NavigationMenuTrigger = React29.forwardRef(({ className, children, ...props
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180",
+          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" })
         }
@@ -1782,7 +1798,7 @@ var BreadcrumbList = React30.forwardRef(
     {
       ref,
       className: cn(
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-[var(--gap-sm,0.5rem)].5",
         className
       ),
       ...props
@@ -1807,7 +1823,7 @@ var BreadcrumbLink = React30.forwardRef(({ asChild, className, ...props }, ref)
     Comp,
     {
       ref,
-      className: cn("transition-all duration-200 ease-out hover:text-foreground", className),
+      className: cn("transition-all duration-[var(--duration-normal,200ms)] ease-out hover:text-foreground", className),
       ...props
     }
   );
@@ -1851,7 +1867,7 @@ function BreadcrumbEllipsis({ className, ...props }) {
   return /* @__PURE__ */ jsxs12(
     "span",
     {
-      className: cn("flex h-9 w-9 items-center justify-center", className),
+      className: cn("flex h-[var(--control-height-sm,2.25rem)] w-[var(--control-height-sm,2.25rem)] items-center justify-center", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxs12(
@@ -1914,7 +1930,7 @@ var TableRow = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "border-b transition-all duration-200 ease-out hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-muted/50 data-[state=selected]:bg-muted",
       className
     ),
     ...props
@@ -1926,7 +1942,7 @@ var TableHead = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-[var(--control-height-md,2.5rem)] px-[var(--space-4,1rem)] text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className
     ),
     ...props
@@ -1937,7 +1953,7 @@ var TableCell = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "td",
   {
     ref,
-    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    className: cn("p-[var(--space-4,1rem)] align-middle [&:has([role=checkbox])]:pr-0", className),
     ...props
   }
 ));
@@ -1946,7 +1962,7 @@ var TableCaption = React31.forwardRef(({ className, ...props }, ref) => /* @__PU
   "caption",
   {
     ref,
-    className: cn("mt-4 text-sm text-muted-foreground", className),
+    className: cn("mt-[var(--space-4,1rem)] text-sm text-muted-foreground", className),
     ...props
   }
 ));
@@ -2080,7 +2096,7 @@ function PaginationEllipsis({ className, ...props }) {
   return /* @__PURE__ */ jsxs14(
     "span",
     {
-      className: cn("flex h-9 w-9 items-center justify-center", className),
+      className: cn("flex h-[var(--control-height-sm,2.25rem)] w-[var(--control-height-sm,2.25rem)] items-center justify-center", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxs14(
@@ -2121,25 +2137,25 @@ function Calendar({
     DayPicker,
     {
       showOutsideDays,
-      className: cn("relative p-3", className),
+      className: cn("relative p-[var(--space-3,0.75rem)]", className),
       classNames: {
-        months: "flex flex-col sm:flex-row gap-4",
-        month: "flex flex-col gap-4",
+        months: "flex flex-col sm:flex-row gap-[var(--gap-md,1rem)]",
+        month: "flex flex-col gap-[var(--gap-md,1rem)]",
         month_caption: "flex h-7 items-center justify-center",
         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-200 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 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-200 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 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",
-        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        week: "flex w-full mt-2",
+        weekday: "text-muted-foreground rounded-md w-[var(--control-height-sm,2.25rem)] font-normal text-[0.8rem]",
+        week: "flex w-full mt-[var(--space-2,0.5rem)]",
         day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].range-end)]:rounded-r-md [&:has([aria-selected].range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
-        day_button: "inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal transition-all duration-200 ease-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-selected:opacity-100",
+        day_button: "inline-flex h-[var(--control-height-sm,2.25rem)] w-[var(--control-height-sm,2.25rem)] items-center justify-center rounded-md p-0 text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-selected:opacity-100",
         selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         today: "bg-accent text-accent-foreground",
         outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
@@ -2198,7 +2214,7 @@ function DatePicker({
         disabled,
         "aria-label": ariaLabel ?? placeholder,
         className: cn(
-          "inline-flex h-10 w-[240px] items-center justify-start gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm font-normal transition-all duration-200 ease-out",
+          "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",
           "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",
@@ -2256,7 +2272,7 @@ var InputOTP = React34.forwardRef(
     {
       ref,
       containerClassName: cn(
-        "flex items-center gap-2 has-[:disabled]:opacity-50",
+        "flex items-center gap-[var(--gap-sm,0.5rem)] has-[:disabled]:opacity-50",
         containerClassName
       ),
       className: cn("disabled:cursor-not-allowed", className),
@@ -2279,7 +2295,7 @@ var InputOTPSlot = React34.forwardRef(
       {
         ref,
         className: cn(
-          "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all duration-200 ease-out",
+          "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",
           "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
@@ -2334,10 +2350,10 @@ function CommandDialog({
       /* @__PURE__ */ jsx40(DialogTitle, { children: title }),
       /* @__PURE__ */ jsx40(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsx40(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx40(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
+    /* @__PURE__ */ jsx40(DialogContent, { className: "overflow-hidden p-0", 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 }) })
   ] });
 }
-var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", 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: [
   /* @__PURE__ */ jsxs17(
     "svg",
     {
@@ -2348,7 +2364,7 @@ var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className: "mr-2 h-4 w-4 shrink-0 opacity-50",
+      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" }),
@@ -2361,7 +2377,7 @@ var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
     {
       ref,
       className: cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-[var(--control-height-lg,2.75rem)] w-full rounded-md bg-transparent py-[var(--space-3,0.75rem)] text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props
@@ -2378,14 +2394,14 @@ var CommandList = React35.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = "CommandList";
-var CommandEmpty = React35.forwardRef((props, ref) => /* @__PURE__ */ jsx40(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React35.forwardRef((props, ref) => /* @__PURE__ */ jsx40(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(
   CommandPrimitive.Group,
   {
     ref,
     className: cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-[var(--space-1,0.25rem)] text-foreground [&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
       className
     ),
     ...props
@@ -2396,7 +2412,7 @@ var CommandSeparator = React35.forwardRef(({ className, ...props }, ref) => /* @
   CommandPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 h-px bg-border", className),
+    className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-border", className),
     ...props
   }
 ));
@@ -2406,7 +2422,7 @@ var CommandItem = React35.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-all duration-200 ease-out",
+      "relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none transition-all duration-[var(--duration-normal,200ms)] ease-out",
       "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
       "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -2457,7 +2473,7 @@ function Combobox({
         "aria-label": ariaLabel,
         disabled,
         className: cn(
-          "inline-flex h-10 w-[240px] items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-normal transition-all duration-200 ease-out",
+          "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",
           "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",
@@ -2509,7 +2525,7 @@ function Combobox({
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   className: cn(
-                    "mr-2 h-4 w-4",
+                    "mr-[var(--space-2,0.5rem)] h-4 w-4",
                     value === option.value ? "opacity-100" : "opacity-0"
                   ),
                   "aria-hidden": "true",
@@ -2552,9 +2568,9 @@ var SheetOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__PU
 SheetOverlay.displayName = "SheetOverlay";
 var sheetVariants = cva7(
   cn(
-    "fixed z-50 gap-4 bg-background p-6 shadow-lg",
+    "fixed z-50 gap-[var(--gap-md,1rem)] bg-background p-[var(--space-6,1.5rem)] shadow-lg",
     "transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out",
-    "data-[state=closed]:duration-300 data-[state=open]:duration-500"
+    "data-[state=closed]:duration-[var(--duration-slow,300ms)] data-[state=open]:duration-500"
   ),
   {
     variants: {
@@ -2585,7 +2601,7 @@ var SheetContent = React37.forwardRef(({ side = "right", className, children, ..
           {
             className: cn(
               "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background",
-              "transition-all duration-200 ease-out hover:opacity-100",
+              "transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               "disabled:pointer-events-none"
             ),
@@ -2692,7 +2708,7 @@ var DrawerContent = React38.forwardRef(({ className, children, ...props }, ref)
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx43("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx43("div", { className: "mx-auto mt-[var(--space-4,1rem)] h-2 w-[100px] rounded-full bg-muted", "aria-hidden": "true" }),
         children
       ]
     }
@@ -2703,13 +2719,13 @@ function DrawerHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx43(
     "div",
     {
-      className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
+      className: cn("grid gap-1.5 p-[var(--space-4,1rem)] text-center sm:text-left", className),
       ...props
     }
   );
 }
 function DrawerFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx43("div", { className: cn("mt-auto flex flex-col gap-2 p-4", 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 });
 }
 var DrawerTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   DrawerPrimitive.Title,
@@ -2759,7 +2775,7 @@ function ResizableHandle({ withHandle, className, ...props }) {
     ResizablePrimitiveSeparator,
     {
       className: cn(
-        "relative flex w-px items-center justify-center bg-border transition-all duration-200 ease-out hover:bg-ring data-[separator=active]:bg-ring",
+        "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",
         "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",
@@ -2837,7 +2853,7 @@ SidebarProvider.displayName = "SidebarProvider";
 var sidebarVariants = cva8(
   cn(
     "flex h-full shrink-0 flex-col border-r bg-background text-foreground",
-    "transition-[width] duration-200 ease-out"
+    "transition-[width] duration-[var(--duration-normal,200ms)] ease-out"
   ),
   {
     variants: {
@@ -2893,8 +2909,8 @@ var SidebarTrigger = React39.forwardRef(
           }
         },
         className: cn(
-          "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground",
-          "transition-all duration-200 ease-out hover:bg-accent hover:text-accent-foreground",
+          "inline-flex h-[var(--control-height-sm,2.25rem)] w-[var(--control-height-sm,2.25rem)] items-center justify-center rounded-md text-muted-foreground",
+          "transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-accent hover:text-accent-foreground",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           className
         ),
@@ -2930,7 +2946,7 @@ var SidebarHeader = React39.forwardRef(
     "div",
     {
       ref,
-      className: cn("flex items-center gap-2 border-b p-4", className),
+      className: cn("flex items-center gap-[var(--gap-sm,0.5rem)] border-b p-[var(--space-4,1rem)]", className),
       ...props
     }
   )
@@ -2941,7 +2957,7 @@ var SidebarContent = React39.forwardRef(
     "div",
     {
       ref,
-      className: cn("flex-1 overflow-auto p-2", className),
+      className: cn("flex-1 overflow-auto p-[var(--space-2,0.5rem)]", className),
       ...props
     }
   )
@@ -2952,7 +2968,7 @@ var SidebarFooter = React39.forwardRef(
     "div",
     {
       ref,
-      className: cn("mt-auto border-t p-4", className),
+      className: cn("mt-auto border-t p-[var(--space-4,1rem)]", className),
       ...props
     }
   )
@@ -2969,8 +2985,8 @@ var SidebarItem = React39.forwardRef(
         "aria-current": active ? "page" : void 0,
         "data-active": active ? "" : void 0,
         className: cn(
-          "inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium",
-          "transition-all duration-200 ease-out",
+          "inline-flex w-full items-center gap-[var(--gap-sm,0.5rem)] rounded-md px-[var(--space-3,0.75rem)] 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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "data-[active]:bg-accent data-[active]:text-accent-foreground",