@hex-core/components 0.1.0 → 1.0.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",
@@ -486,30 +488,46 @@ RadioGroupItem.displayName = "RadioGroupItem";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React10 from "react";
 import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-var Slider = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs4(
-  SliderPrimitive.Root,
-  {
-    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" }) }),
-      (props.value ?? props.defaultValue ?? [0]).map((_, i) => /* @__PURE__ */ jsx11(
-        SliderPrimitive.Thumb,
-        {
-          className: cn(
-            "block h-5 w-5 rounded-full border-2 border-primary bg-background",
-            "transition-all duration-200 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"
-          )
-        },
-        i
-      ))
-    ]
+var Slider = React10.forwardRef(({ className, thumbLabels, ...props }, ref) => {
+  const values = props.value ?? props.defaultValue ?? [0];
+  const rootLabel = props["aria-label"];
+  const rootLabelledBy = props["aria-labelledby"];
+  if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && thumbLabels && thumbLabels.length !== values.length) {
+    console.warn(
+      `Slider: thumbLabels.length (${thumbLabels.length}) does not match value.length (${values.length}). Missing labels fall back to indexed names; extra labels are ignored.`
+    );
   }
-));
+  return /* @__PURE__ */ jsxs4(
+    SliderPrimitive.Root,
+    {
+      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" }) }),
+        values.map((_, i) => {
+          const explicit = thumbLabels?.[i];
+          const fallback = values.length === 1 ? rootLabel : rootLabel ? `${rootLabel} (${i + 1} of ${values.length})` : void 0;
+          return /* @__PURE__ */ jsx11(
+            SliderPrimitive.Thumb,
+            {
+              "aria-label": explicit ?? fallback,
+              "aria-labelledby": explicit || fallback ? void 0 : rootLabelledBy,
+              className: cn(
+                "block h-5 w-5 rounded-full border-2 border-primary bg-background",
+                "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"
+              )
+            },
+            i
+          );
+        })
+      ]
+    }
+  );
+});
 Slider.displayName = "Slider";
 
 // src/primitives/toggle/toggle.tsx
@@ -520,7 +538,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 +552,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 +616,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
   }
 ));
@@ -664,14 +682,24 @@ Progress.displayName = "Progress";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React15 from "react";
 import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var ScrollArea = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
+var ScrollArea = React15.forwardRef(({ className, children, viewportTabIndex = 0, ...props }, ref) => /* @__PURE__ */ jsxs5(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx17(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx17(
+        ScrollAreaPrimitive.Viewport,
+        {
+          tabIndex: viewportTabIndex,
+          className: cn(
+            "h-full w-full rounded-[inherit]",
+            viewportTabIndex >= 0 && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          ),
+          children
+        }
+      ),
       /* @__PURE__ */ jsx17(ScrollBar, { orientation: "vertical" }),
       /* @__PURE__ */ jsx17(ScrollBar, { orientation: "horizontal" }),
       /* @__PURE__ */ jsx17(ScrollAreaPrimitive.Corner, {})
@@ -685,7 +713,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 +738,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 +748,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 +772,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 +797,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 +809,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 +826,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 +847,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 +868,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 +883,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";
@@ -868,29 +910,29 @@ var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(DialogPortal, { children: [
+var DialogContent = React19.forwardRef(({ className, children, scrollable = true, ...props }, ref) => /* @__PURE__ */ jsxs7(DialogPortal, { children: [
   /* @__PURE__ */ jsx21(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%] 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%]",
+        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",
+        "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
       ),
       ...props,
       children: [
-        children,
+        scrollable ? /* @__PURE__ */ jsx21("div", { className: "grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]", children }) : children,
         /* @__PURE__ */ jsxs7(
           DialogPrimitive.Close,
           {
             className: cn(
-              "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background",
-              "transition-all duration-200 ease-out hover:opacity-100",
+              "absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background bg-background/80 backdrop-blur-sm",
+              "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 +1032,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 +1088,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 +1106,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 +1136,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 +1152,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 +1168,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 +1202,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 +1220,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 +1229,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 +1258,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 +1283,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 +1401,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 +1430,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 +1481,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 +1507,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 +1522,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 +1538,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 +1572,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 +1590,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 +1599,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 +1623,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 +1639,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 +1657,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 +1672,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 +1687,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 +1696,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 +1740,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 +1760,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 +1824,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 +1849,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 +1893,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 +1956,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 +1968,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 +1979,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 +1988,10 @@ var TableCaption = React31.forwardRef(({ className, ...props }, ref) => /* @__PU
   "caption",
   {
     ref,
-    className: cn("mt-4 text-sm text-muted-foreground", className),
+    className: cn(
+      "caption-bottom mt-[var(--space-4,1rem)] text-sm text-muted-foreground",
+      className
+    ),
     ...props
   }
 ));
@@ -1959,13 +2004,19 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import { jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
-function DataTable({ columns, data }) {
+function DataTable({
+  columns,
+  data,
+  caption,
+  "aria-label": ariaLabel
+}) {
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel()
   });
-  return /* @__PURE__ */ jsx35("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs13(Table, { children: [
+  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." }) }) })
   ] }) });
@@ -2080,7 +2131,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 +2172,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 +2249,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 +2307,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 +2330,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 +2385,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", 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 }) })
   ] });
 }
-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 +2399,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 +2412,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 +2429,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
@@ -2393,10 +2444,12 @@ var CommandGroup = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 CommandGroup.displayName = "CommandGroup";
 var CommandSeparator = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
-  CommandPrimitive.Separator,
+  "div",
   {
     ref,
-    className: cn("-mx-1 h-px bg-border", className),
+    role: "none",
+    "data-cmdk-separator": "",
+    className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-border", className),
     ...props
   }
 ));
@@ -2406,7 +2459,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",
@@ -2442,9 +2495,11 @@ function Combobox({
   emptyText = "No results found.",
   disabled,
   className,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
 }) {
   const [open, setOpen] = React36.useState(false);
+  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(
@@ -2454,10 +2509,12 @@ function Combobox({
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "listbox",
+        "aria-controls": open ? listboxId : void 0,
         "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
         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",
@@ -2486,7 +2543,7 @@ function Combobox({
     ) }),
     /* @__PURE__ */ jsx41(PopoverContent, { className: "w-[240px] p-0", align: "start", children: /* @__PURE__ */ jsxs18(Command, { children: [
       /* @__PURE__ */ jsx41(CommandInput, { placeholder: searchPlaceholder }),
-      /* @__PURE__ */ jsxs18(CommandList, { children: [
+      /* @__PURE__ */ jsxs18(CommandList, { id: listboxId, children: [
         /* @__PURE__ */ jsx41(CommandEmpty, { children: emptyText }),
         /* @__PURE__ */ jsx41(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs18(
           CommandItem,
@@ -2509,7 +2566,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 +2609,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 +2642,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 +2749,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 +2760,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 +2816,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 +2894,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 +2950,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 +2987,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 +2998,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 +3009,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 +3026,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",
@@ -3690,7 +3747,7 @@ var dialogSchema = {
       "Putting too many primary actions in DialogFooter"
     ],
     relatedComponents: ["alert-dialog", "popover", "sheet"],
-    accessibilityNotes: "Radix traps focus, handles Escape to close, and wires aria-labelledby/describedby to DialogTitle/DialogDescription. Always include a DialogTitle.",
+    accessibilityNotes: "Radix traps focus, handles Escape to close, and wires aria-labelledby/describedby to DialogTitle/DialogDescription. Always include a DialogTitle. DialogContent is constrained to `max-h-[calc(100vh-2rem)]` and scrolls internally so long content stays inside the focus trap.",
     tokenBudget: 600
   },
   tags: ["dialog", "modal", "overlay", "popup", "form"]
@@ -4208,6 +4265,24 @@ var sliderSchema = {
       default: "horizontal",
       description: "Slider direction",
       enumValues: ["horizontal", "vertical"]
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      required: false,
+      description: "Accessible label for the slider as a whole. Mirrored onto a single thumb automatically; for range sliders prefer thumbLabels."
+    },
+    {
+      name: "aria-labelledby",
+      type: "string",
+      required: false,
+      description: "Id of an external visible label that names the slider."
+    },
+    {
+      name: "thumbLabels",
+      type: "object",
+      required: false,
+      description: "Per-thumb accessible labels (string[]). Required for range sliders so each thumb has a meaningful name (e.g. ['Minimum price', 'Maximum price']). For a single-thumb slider, the Root's aria-label is mirrored onto the thumb automatically and thumbLabels is only needed when overriding that default."
     }
   ],
   variants: [],
@@ -4237,10 +4312,12 @@ var sliderSchema = {
       "Using Slider for exact values without showing the number",
       "Missing min/max bounds",
       "Using step=1 for fractional values (set step=0.01)",
-      "Not providing aria-label when there's no visible label"
+      "Not providing aria-label / aria-labelledby when there's no visible label",
+      "Range slider with only Root aria-label and no thumbLabels \u2014 both thumbs fall back to '(N of 2)' indexed names instead of meaningful per-thumb labels",
+      "thumbLabels.length !== value.length \u2014 extra labels are ignored, missing labels fall back to indexed names (dev-mode warning)"
     ],
     relatedComponents: ["input"],
-    accessibilityNotes: "Arrow keys step by step, Home/End jump to min/max, PageUp/PageDown step larger. Radix handles aria-valuemin/max/now. Add aria-label if no visible label.",
+    accessibilityNotes: "Arrow keys step by step, Home/End jump to min/max, PageUp/PageDown step larger. Radix handles aria-valuemin/max/now. Each thumb has its own accessible name: explicit via thumbLabels[i], else mirrored from the Root's aria-label (single thumb) or indexed '(i of N)' fallback (range). Add aria-label / aria-labelledby on the Root when there's no visible label.",
     tokenBudget: 450
   },
   tags: ["slider", "range", "form", "numeric", "input"]
@@ -4667,7 +4744,14 @@ var scrollAreaSchema = {
       description: "When scrollbars are visible",
       enumValues: ["auto", "always", "scroll", "hover"]
     },
-    { name: "className", type: "string", required: false, description: "Set dimensions via Tailwind (e.g. h-72 w-48)" }
+    { name: "className", type: "string", required: false, description: "Set dimensions via Tailwind (e.g. h-72 w-48)" },
+    {
+      name: "viewportTabIndex",
+      type: "number",
+      required: false,
+      default: 0,
+      description: "tabIndex applied to the scroll viewport. Defaults to 0 so keyboard users can scroll without a pointer; pass -1 to skip the viewport in the tab order when wrapping decorative or already-keyboard-reachable content."
+    }
   ],
   variants: [],
   slots: [
@@ -4697,10 +4781,11 @@ var scrollAreaSchema = {
     commonMistakes: [
       "Forgetting to set height/width \u2014 scrollbars don't appear",
       "Using for the whole page",
-      "Nesting ScrollAreas (confusing UX)"
+      "Nesting ScrollAreas (confusing UX)",
+      "Wrapping decorative or already-keyboard-reachable content without setting viewportTabIndex={-1} \u2014 adds an unnecessary tab stop"
     ],
     relatedComponents: [],
-    accessibilityNotes: "Radix doesn't make the viewport focusable by default \u2014 add tabIndex={0} on a focusable child or the viewport to enable keyboard scrolling (arrow keys, PgUp/PgDn, Home/End). For long lists, consider pagination or virtualization.",
+    accessibilityNotes: "The viewport is keyboard-focusable by default (viewportTabIndex=0) so users can scroll long content via arrow keys / PgUp / PgDn / Home / End without a pointer. Pass viewportTabIndex={-1} when the contents are already in the tab order or purely decorative. For very long lists, consider pagination or virtualization.",
     tokenBudget: 350
   },
   tags: ["scroll-area", "scroll", "overflow", "scrollbar", "layout"]
@@ -5234,7 +5319,19 @@ var dataTableSchema = {
   subcategory: "data",
   props: [
     { name: "columns", type: "object", required: true, description: "ColumnDef<TData, TValue>[] from @tanstack/react-table" },
-    { name: "data", type: "object", required: true, description: "Array of row data" }
+    { name: "data", type: "object", required: true, description: "Array of row data" },
+    {
+      name: "caption",
+      type: "ReactNode",
+      required: false,
+      description: "Visible caption rendered below the table; announced by screen readers when entering the table"
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      required: false,
+      description: "Accessible label forwarded as aria-label on the underlying <table>; use when no visible caption is shown"
+    }
   ],
   variants: [],
   slots: [],
@@ -5258,10 +5355,11 @@ var dataTableSchema = {
       "Forgetting getCoreRowModel() (table renders nothing)",
       "Recreating columns array on every render (breaks memoization \u2014 wrap in useMemo or define outside the component)",
       "Using accessorKey with nested paths without accessorFn",
-      "Not adding filter/sort row models when those features are needed"
+      "Not adding filter/sort row models when those features are needed",
+      "Shipping a table without `caption` or `aria-label` \u2014 the table is unlabelled to assistive tech"
     ],
     relatedComponents: ["table", "pagination"],
-    accessibilityNotes: "Uses semantic <table> via Hex UI Table primitives. Add aria-sort to sortable column headers. Announce filter/sort changes via aria-live for dynamic updates.",
+    accessibilityNotes: "Pass either `caption` (visible) or `aria-label` so screen readers announce the table when the user enters it. Add aria-sort to sortable column headers. Announce filter/sort changes via aria-live for dynamic updates.",
     tokenBudget: 900
   },
   tags: ["data-table", "tanstack", "sortable", "filterable", "paginated"]
@@ -5675,10 +5773,11 @@ var commandSchema = {
       "Forgetting CommandList \u2014 items won't be scrollable or grouped properly",
       "Giving CommandItem non-unique values (breaks filtering and controlled state)",
       "Overriding CommandInput className to remove the border/padding \u2014 breaks the \u2318K icon layout",
-      "Not rendering CommandEmpty \u2014 the list looks broken when a search has no matches"
+      "Not rendering CommandEmpty \u2014 the list looks broken when a search has no matches",
+      "Querying CommandSeparator via cmdk's internal Separator state \u2014 Hex UI renders it as a presentational div with role='none' (and the `data-cmdk-separator` attribute preserved for selector compatibility) so it can sit inside CommandList's role=listbox without violating ARIA"
     ],
     relatedComponents: ["combobox", "dialog", "dropdown-menu"],
-    accessibilityNotes: "cmdk wires role=listbox/option and aria-activedescendant. Use the `label` prop on Command for a screen-reader-only name when no visible heading exists.",
+    accessibilityNotes: "cmdk wires role=listbox/option and aria-activedescendant. Use the `label` prop on Command for a screen-reader-only name when no visible heading exists. CommandSeparator renders with role='none' (still selectable via `[data-cmdk-separator]`) so listbox-children rules are satisfied.",
     tokenBudget: 900
   },
   tags: ["command", "cmdk", "palette", "search", "launcher"]
@@ -5742,7 +5841,13 @@ var comboboxSchema = {
       name: "aria-label",
       type: "string",
       required: false,
-      description: "Accessible label \u2014 required when no adjacent visible <label> is used"
+      description: "Accessible label \u2014 required when no adjacent visible label is used"
+    },
+    {
+      name: "aria-labelledby",
+      type: "string",
+      required: false,
+      description: "Id of an external visible label that names the combobox"
     }
   ],
   variants: [],
@@ -5773,10 +5878,10 @@ var comboboxSchema = {
       "Using the label as the value \u2014 fine if stable, but prefer a short stable `value` string",
       "Forgetting to bind value + onChange \u2014 uncontrolled mode doesn't exist on this wrapper",
       "Mixing translated labels without keying on value \u2014 label changes won't update selection",
-      "Missing aria-label when there's no adjacent visible <label>"
+      "Missing aria-label / aria-labelledby \u2014 role='combobox' does not allow name from contents, so without one of these the trigger has no accessible name"
     ],
     relatedComponents: ["command", "popover", "select"],
-    accessibilityNotes: "Trigger has role='combobox' + aria-expanded. Popover traps focus inside the CommandInput. Options are announced via cmdk's aria-activedescendant wiring.",
+    accessibilityNotes: "Trigger has role='combobox' + aria-expanded + aria-haspopup='listbox'. aria-controls points at the inner CommandList (a useId-stabilized listbox). Pass aria-label or aria-labelledby \u2014 combobox does not derive its name from contents.",
     tokenBudget: 900
   },
   tags: ["combobox", "select", "search", "cmdk", "input"]