@thangnqdev/ui 0.1.2 → 0.2.1

package/dist/index.cjs

@@ -33,25 +33,32 @@ function ThemeProvider({
   attribute = "data-theme",
   enableSystem = true
 }) {
-  const [theme, setThemeState] = React66.useState(() => {
-    if (typeof window !== "undefined" && typeof window.localStorage !== "undefined") {
-      try {
-        const stored = window.localStorage.getItem(storageKey);
-        if (stored) return stored;
-      } catch {
-      }
-    }
-    return defaultTheme;
-  });
-  const [resolvedTheme, setResolvedTheme] = React66.useState("dark");
-  React66.useEffect(() => {
-    const root = document.documentElement;
-    const computeResolved = (t) => {
+  const [theme, setThemeState] = React66.useState(defaultTheme);
+  const [resolvedTheme, setResolvedTheme] = React66.useState(
+    defaultTheme === "light" ? "light" : "dark"
+  );
+  const computeResolved = React66.useCallback(
+    (t) => {
       if (t === "system" && enableSystem && typeof window !== "undefined" && window.matchMedia) {
         return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       }
       return t === "dark" ? "dark" : "light";
-    };
+    },
+    [enableSystem]
+  );
+  React66.useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const stored = window.localStorage?.getItem(storageKey);
+      if (stored && stored !== theme) {
+        setThemeState(stored);
+      }
+    } catch {
+    }
+  }, [storageKey, theme]);
+  React66.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
     const currentResolved = computeResolved(theme);
     setResolvedTheme(currentResolved);
     root.setAttribute(attribute, currentResolved);
@@ -68,20 +75,22 @@ function ThemeProvider({
       } catch {
       }
     }
-  }, [theme, attribute, enableSystem, storageKey]);
+  }, [theme, attribute, computeResolved, storageKey]);
   React66.useEffect(() => {
-    if (theme !== "system" || !enableSystem) return;
+    if (theme !== "system" || !enableSystem || typeof window === "undefined" || !window.matchMedia) return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => {
       const newResolved = mediaQuery.matches ? "dark" : "light";
       setResolvedTheme(newResolved);
-      document.documentElement.setAttribute(attribute, newResolved);
-      if (newResolved === "dark") {
-        document.documentElement.classList.add("dark");
-        document.documentElement.classList.remove("light");
-      } else {
-        document.documentElement.classList.add("light");
-        document.documentElement.classList.remove("dark");
+      if (typeof document !== "undefined") {
+        document.documentElement.setAttribute(attribute, newResolved);
+        if (newResolved === "dark") {
+          document.documentElement.classList.add("dark");
+          document.documentElement.classList.remove("light");
+        } else {
+          document.documentElement.classList.add("light");
+          document.documentElement.classList.remove("dark");
+        }
       }
     };
     mediaQuery.addEventListener("change", handleChange);
@@ -1207,9 +1216,24 @@ var ToggleGroup = React66.forwardRef(
 );
 ToggleGroup.displayName = "ToggleGroup";
 var SplitButton = React66.forwardRef(
-  ({ className, items, onMainClick, variant = "primary", size = "md", children, disabled, ...props }, ref) => {
+  ({
+    className,
+    items,
+    onMainClick,
+    variant = "primary",
+    size = "md",
+    children,
+    disabled,
+    menuAriaLabel = "More actions",
+    ...props
+  }, ref) => {
     const [isOpen, setIsOpen] = React66.useState(false);
+    const [focusedIndex, setFocusedIndex] = React66.useState(0);
     const containerRef = React66.useRef(null);
+    const triggerBtnRef = React66.useRef(null);
+    const menuRef = React66.useRef(null);
+    const menuId = `split-button-menu-${React66.useId()}`;
+    const enabledItemsIndices = items.map((item, idx) => !item.disabled ? idx : -1).filter((idx) => idx !== -1);
     React66.useEffect(() => {
       const handleOutside = (e) => {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1221,6 +1245,56 @@ var SplitButton = React66.forwardRef(
       }
       return () => document.removeEventListener("mousedown", handleOutside);
     }, [isOpen]);
+    React66.useEffect(() => {
+      if (isOpen && enabledItemsIndices.length > 0) {
+        setFocusedIndex(enabledItemsIndices[0]);
+        const timer = setTimeout(() => {
+          const itemEl = menuRef.current?.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
+          itemEl?.focus();
+        }, 10);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+    const handleMenuKeyDown = (e) => {
+      if (!isOpen) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const currentPos = enabledItemsIndices.indexOf(focusedIndex);
+        const nextPos = (currentPos + 1) % enabledItemsIndices.length;
+        const nextIdx = enabledItemsIndices[nextPos];
+        setFocusedIndex(nextIdx);
+        const buttons = menuRef.current?.querySelectorAll('[role="menuitem"]');
+        buttons?.[nextIdx]?.focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const currentPos = enabledItemsIndices.indexOf(focusedIndex);
+        const prevPos = (currentPos - 1 + enabledItemsIndices.length) % enabledItemsIndices.length;
+        const prevIdx = enabledItemsIndices[prevPos];
+        setFocusedIndex(prevIdx);
+        const buttons = menuRef.current?.querySelectorAll('[role="menuitem"]');
+        buttons?.[prevIdx]?.focus();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        if (enabledItemsIndices.length > 0) {
+          const firstIdx = enabledItemsIndices[0];
+          setFocusedIndex(firstIdx);
+          const buttons = menuRef.current?.querySelectorAll('[role="menuitem"]');
+          buttons?.[firstIdx]?.focus();
+        }
+      } else if (e.key === "End") {
+        e.preventDefault();
+        if (enabledItemsIndices.length > 0) {
+          const lastIdx = enabledItemsIndices[enabledItemsIndices.length - 1];
+          setFocusedIndex(lastIdx);
+          const buttons = menuRef.current?.querySelectorAll('[role="menuitem"]');
+          buttons?.[lastIdx]?.focus();
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+        triggerBtnRef.current?.focus();
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative inline-flex", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "inline-flex rounded-[var(--ui-radius-md)] shadow-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1238,34 +1312,62 @@ var SplitButton = React66.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
+            ref: triggerBtnRef,
             variant,
             size,
             disabled,
             onClick: () => setIsOpen(!isOpen),
+            onKeyDown: (e) => {
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setIsOpen(true);
+              }
+            },
             "aria-expanded": isOpen,
             "aria-haspopup": "menu",
-            className: "rounded-l-none px-2",
+            "aria-controls": isOpen ? menuId : void 0,
+            "aria-label": menuAriaLabel,
+            className: "rounded-l-none px-2 cursor-pointer",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("w-4 h-4 transition-transform duration-200", isOpen && "rotate-180") })
           }
         )
       ] }),
-      isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full right-0 mt-1 w-48 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-lg py-1 z-50 animate-in fade-in zoom-in-95", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          type: "button",
-          disabled: item.disabled,
-          onClick: () => {
-            item.onClick();
-            setIsOpen(false);
-          },
-          className: "w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-50 disabled:pointer-events-none transition-colors",
-          children: [
-            item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label })
-          ]
-        },
-        i
-      )) })
+          ref: menuRef,
+          id: menuId,
+          role: "menu",
+          "aria-orientation": "vertical",
+          tabIndex: -1,
+          onKeyDown: handleMenuKeyDown,
+          className: "absolute top-full right-0 mt-1 w-48 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-lg py-1 z-50 animate-in fade-in zoom-in-95 focus:outline-none",
+          children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              tabIndex: focusedIndex === i ? 0 : -1,
+              "aria-disabled": item.disabled,
+              disabled: item.disabled,
+              onClick: () => {
+                item.onClick();
+                setIsOpen(false);
+                triggerBtnRef.current?.focus();
+              },
+              className: cn(
+                "w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] focus:bg-[var(--ui-bg-tertiary)] focus:outline-none disabled:opacity-50 disabled:pointer-events-none transition-colors cursor-pointer",
+                focusedIndex === i && "bg-[var(--ui-bg-tertiary)]"
+              ),
+              children: [
+                item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label })
+              ]
+            },
+            i
+          ))
+        }
+      )
     ] });
   }
 );
@@ -1276,6 +1378,7 @@ var forms_exports = {};
 __export(forms_exports, {
   Checkbox: () => Checkbox,
   CheckboxGroup: () => CheckboxGroup,
+  CheckboxGroupContext: () => CheckboxGroupContext,
   Combobox: () => Combobox,
   CurrencyInput: () => CurrencyInput,
   DatePicker: () => DatePicker,
@@ -1312,6 +1415,7 @@ __export(forms_exports, {
   switchThumbVariants: () => switchThumbVariants,
   switchVariants: () => switchVariants,
   textareaVariants: () => textareaVariants,
+  useCheckboxGroup: () => useCheckboxGroup,
   useFormField: () => useFormField
 });
 var FormFieldContext = React66.createContext(null);
@@ -1710,8 +1814,59 @@ var Select = React66.forwardRef(
   }
 );
 Select.displayName = "Select";
+var CheckboxGroupContext = React66.createContext(null);
+var useCheckboxGroup = () => React66.useContext(CheckboxGroupContext);
+var CheckboxGroup = React66.forwardRef(
+  ({
+    className,
+    orientation = "vertical",
+    children,
+    value: controlledValue,
+    defaultValue = [],
+    onChange,
+    disabled,
+    name,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React66.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : internalValue;
+    const handleValueChange = (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxGroupContext.Provider,
+      {
+        value: {
+          value,
+          onChange: handleValueChange,
+          disabled,
+          name
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            role: "group",
+            className: cn(
+              "flex gap-2",
+              orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
 var checkboxVariants = classVarianceAuthority.cva(
-  "peer shrink-0 rounded-[var(--ui-radius-sm)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 transition-all cursor-pointer flex items-center justify-center text-[var(--ui-primary-fg)]",
+  "peer shrink-0 rounded-[var(--ui-radius-sm)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] transition-all flex items-center justify-center text-[var(--ui-primary-fg)] peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--ui-primary)] peer-focus-visible:ring-offset-2",
   {
     variants: {
       size: {
@@ -1726,61 +1881,96 @@ var checkboxVariants = classVarianceAuthority.cva(
   }
 );
 var Checkbox = React66.forwardRef(
-  ({ className, size, indeterminate = false, label, checked, disabled, id, onChange, ...props }, ref) => {
+  ({
+    className,
+    size,
+    indeterminate = false,
+    label,
+    checked,
+    defaultChecked = false,
+    disabled,
+    id,
+    name,
+    value: propValue,
+    onChange,
+    onCheckedChange,
+    ...props
+  }, ref) => {
     const formField = useFormField();
-    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const group = useCheckboxGroup();
+    const isGroupMember = group !== null && propValue !== void 0;
+    const isDisabled = disabled ?? group?.disabled ?? formField?.isDisabled ?? false;
     const checkboxId = id || formField?.id;
-    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("inline-flex items-center gap-2 select-none cursor-pointer", isDisabled && "cursor-not-allowed opacity-50"), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            id: checkboxId,
-            disabled: isDisabled,
-            checked,
-            onChange,
-            className: "sr-only peer",
-            ...props
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              checkboxVariants({ size }),
-              (checked || indeterminate) && "bg-[var(--ui-primary)] border-[var(--ui-primary)]",
-              className
-            ),
-            children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3.5 h-3.5 stroke-[3]" }) : checked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 stroke-[3]" })
-          }
-        )
-      ] }),
-      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-[var(--ui-text-primary)]", children: label })
-    ] });
-  }
-);
-Checkbox.displayName = "Checkbox";
-var CheckboxGroup = React66.forwardRef(
-  ({ className, orientation = "vertical", children, value, onChange, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+    const checkboxName = name || group?.name;
+    const isControlled = checked !== void 0;
+    const [internalChecked, setInternalChecked] = React66.useState(defaultChecked);
+    const isChecked = isGroupMember ? group.value.includes(String(propValue)) : isControlled ? Boolean(checked) : internalChecked;
+    const innerRef = React66.useRef(null);
+    React66.useImperativeHandle(ref, () => innerRef.current);
+    React66.useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.indeterminate = Boolean(indeterminate);
+      }
+    }, [indeterminate]);
+    const handleChange = (e) => {
+      if (isDisabled) return;
+      const newChecked = e.target.checked;
+      if (!isControlled && !isGroupMember) {
+        setInternalChecked(newChecked);
+      }
+      if (isGroupMember && group) {
+        const val = String(propValue);
+        const next = newChecked ? [...group.value, val] : group.value.filter((v) => v !== val);
+        group.onChange(next);
+      }
+      onChange?.(e);
+      onCheckedChange?.(newChecked);
+    };
+    const isVisualActive = isChecked || indeterminate;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
       {
-        ref,
-        role: "group",
         className: cn(
-          "flex gap-2",
-          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
-          className
+          "inline-flex items-center gap-2 select-none cursor-pointer group",
+          isDisabled && "cursor-not-allowed opacity-50"
         ),
-        ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: innerRef,
+                type: "checkbox",
+                id: checkboxId,
+                name: checkboxName,
+                value: propValue,
+                disabled: isDisabled,
+                checked: isChecked,
+                onChange: handleChange,
+                "aria-checked": indeterminate ? "mixed" : isChecked,
+                className: "sr-only peer",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  checkboxVariants({ size }),
+                  isVisualActive ? "bg-[var(--ui-primary)] border-[var(--ui-primary)] text-white" : "hover:border-[var(--ui-border-strong)]",
+                  className
+                ),
+                children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3.5 h-3.5 stroke-[3]" }) : isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 stroke-[3]" })
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-[var(--ui-text-primary)]", children: label })
+        ]
       }
     );
   }
 );
-CheckboxGroup.displayName = "CheckboxGroup";
+Checkbox.displayName = "Checkbox";
 var RadioGroupContext = React66.createContext(null);
 var radioVariants = classVarianceAuthority.cva(
   "peer shrink-0 rounded-full border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 transition-all cursor-pointer flex items-center justify-center",
@@ -2040,118 +2230,228 @@ var RangeSlider = React66.forwardRef(
     showValue = false,
     formatValue = (v) => `${v}`,
     className,
-    disabled = false
-  }, ref) => {
-    const [stateValue, setStateValue] = React66.useState(defaultValue);
-    const [minVal, maxVal] = controlledValue || stateValue;
-    const minPercentage = Math.min(100, Math.max(0, (minVal - min) / (max - min) * 100));
-    const maxPercentage = Math.min(100, Math.max(0, (maxVal - min) / (max - min) * 100));
-    const handleMinChange = (e) => {
-      const val = Math.min(Number(e.target.value), maxVal - step);
-      setStateValue([val, maxVal]);
-      onChange?.([val, maxVal]);
-    };
-    const handleMaxChange = (e) => {
-      const val = Math.max(Number(e.target.value), minVal + step);
-      setStateValue([minVal, val]);
-      onChange?.([minVal, val]);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full flex items-center gap-4", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full flex items-center h-6 select-none touch-none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute h-full bg-[var(--ui-primary)]",
-            style: {
-              left: `${minPercentage}%`,
-              width: `${maxPercentage - minPercentage}%`
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "range",
-            min,
-            max,
-            step,
-            value: minVal,
-            disabled,
-            onChange: handleMinChange,
-            className: "absolute inset-0 w-full h-full opacity-0 pointer-events-auto cursor-pointer z-20"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "range",
-            min,
-            max,
-            step,
-            value: maxVal,
-            disabled,
-            onChange: handleMaxChange,
-            className: "absolute inset-0 w-full h-full opacity-0 pointer-events-auto cursor-pointer z-30"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none -translate-x-1/2 z-10",
-            style: { left: `${minPercentage}%` }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none -translate-x-1/2 z-10",
-            style: { left: `${maxPercentage}%` }
-          }
-        )
-      ] }),
-      showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[5rem] text-right", children: [
-        formatValue(minVal),
-        " - ",
-        formatValue(maxVal)
-      ] })
-    ] });
-  }
-);
-RangeSlider.displayName = "RangeSlider";
-var PinInput = React66.forwardRef(
-  ({
-    className,
-    length = 4,
-    value: controlledValue,
-    defaultValue = "",
-    onChange,
-    onComplete,
-    mask = false,
     disabled = false,
-    isInvalid = false,
-    autoFocus = false,
-    ...props
+    name,
+    "aria-label": ariaLabel = "Range slider"
   }, ref) => {
-    const [pins, setPins] = React66.useState(() => {
-      const initial = (controlledValue !== void 0 ? controlledValue : defaultValue).slice(0, length);
-      return Array.from({ length }, (_, i) => initial[i] || "");
-    });
-    const inputsRef = React66.useRef([]);
-    React66.useEffect(() => {
-      if (controlledValue !== void 0) {
-        setPins(Array.from({ length }, (_, i) => controlledValue[i] || ""));
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = React66.useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const [minVal, maxVal] = [
+      Math.max(min, Math.min(currentValue[0], currentValue[1])),
+      Math.min(max, Math.max(currentValue[0], currentValue[1]))
+    ];
+    const trackRef = React66.useRef(null);
+    const draggingThumbRef = React66.useRef(null);
+    const updateValues = React66.useCallback(
+      (newMin, newMax) => {
+        const clampedMin = Math.max(min, Math.min(newMin, newMax));
+        const clampedMax = Math.min(max, Math.max(clampedMin, newMax));
+        const next = [clampedMin, clampedMax];
+        if (!isControlled) {
+          setInternalValue(next);
+        }
+        onChange?.(next);
+      },
+      [min, max, isControlled, onChange]
+    );
+    const getValueFromPointer = React66.useCallback(
+      (clientX) => {
+        if (!trackRef.current) return min;
+        const rect = trackRef.current.getBoundingClientRect();
+        const percent = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+        const rawValue = min + percent * (max - min);
+        const steppedValue = Math.round((rawValue - min) / step) * step + min;
+        return Math.min(max, Math.max(min, Number(steppedValue.toFixed(4))));
+      },
+      [min, max, step]
+    );
+    const handlePointerDown = (e) => {
+      if (disabled) return;
+      const clickedVal = getValueFromPointer(e.clientX);
+      const distToMin = Math.abs(clickedVal - minVal);
+      const distToMax = Math.abs(clickedVal - maxVal);
+      const targetThumb = distToMin <= distToMax ? "min" : "max";
+      draggingThumbRef.current = targetThumb;
+      if (targetThumb === "min") {
+        updateValues(Math.min(clickedVal, maxVal), maxVal);
+      } else {
+        updateValues(minVal, Math.max(clickedVal, minVal));
       }
-    }, [controlledValue, length]);
-    React66.useEffect(() => {
-      if (autoFocus && inputsRef.current[0]) {
-        inputsRef.current[0].focus();
+      e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const handlePointerMove = (e) => {
+      if (disabled || !draggingThumbRef.current) return;
+      const moveVal = getValueFromPointer(e.clientX);
+      if (draggingThumbRef.current === "min") {
+        updateValues(Math.min(moveVal, maxVal), maxVal);
+      } else {
+        updateValues(minVal, Math.max(moveVal, minVal));
       }
-    }, [autoFocus]);
-    const handleDigitChange = (index, val) => {
-      const sanitized = val.replace(/[^0-9a-zA-Z]/g, "").slice(-1);
+    };
+    const handlePointerUp = (e) => {
+      if (draggingThumbRef.current) {
+        draggingThumbRef.current = null;
+        try {
+          e.currentTarget.releasePointerCapture(e.pointerId);
+        } catch {
+        }
+      }
+    };
+    const handleKeyDownMin = (e) => {
+      if (disabled) return;
+      let nextMin = minVal;
+      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        nextMin = Math.min(minVal + step, maxVal);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        nextMin = Math.max(minVal - step, min);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        nextMin = min;
+      } else if (e.key === "End") {
+        e.preventDefault();
+        nextMin = maxVal;
+      }
+      if (nextMin !== minVal) {
+        updateValues(nextMin, maxVal);
+      }
+    };
+    const handleKeyDownMax = (e) => {
+      if (disabled) return;
+      let nextMax = maxVal;
+      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        nextMax = Math.min(maxVal + step, max);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        nextMax = Math.max(maxVal - step, minVal);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        nextMax = minVal;
+      } else if (e.key === "End") {
+        e.preventDefault();
+        nextMax = max;
+      }
+      if (nextMax !== maxVal) {
+        updateValues(minVal, nextMax);
+      }
+    };
+    const minPercentage = Math.min(100, Math.max(0, (minVal - min) / (max - min || 1) * 100));
+    const maxPercentage = Math.min(100, Math.max(0, (maxVal - min) / (max - min || 1) * 100));
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("w-full flex items-center gap-4", disabled && "opacity-50 cursor-not-allowed", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: trackRef,
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              className: "relative w-full flex items-center h-7 select-none touch-none cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute h-full bg-[var(--ui-primary)]",
+                    style: {
+                      left: `${minPercentage}%`,
+                      width: `${Math.max(0, maxPercentage - minPercentage)}%`
+                    }
+                  }
+                ) }),
+                name && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: `${name}_min`, value: minVal }),
+                  /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: `${name}_max`, value: maxVal })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    role: "slider",
+                    tabIndex: disabled ? -1 : 0,
+                    "aria-label": `${ariaLabel} minimum`,
+                    "aria-valuemin": min,
+                    "aria-valuemax": maxVal,
+                    "aria-valuenow": minVal,
+                    "aria-disabled": disabled,
+                    onKeyDown: handleKeyDownMin,
+                    className: cn(
+                      "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md -translate-x-1/2 z-20 cursor-grab active:cursor-grabbing transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2",
+                      disabled && "pointer-events-none"
+                    ),
+                    style: { left: `${minPercentage}%` }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    role: "slider",
+                    tabIndex: disabled ? -1 : 0,
+                    "aria-label": `${ariaLabel} maximum`,
+                    "aria-valuemin": minVal,
+                    "aria-valuemax": max,
+                    "aria-valuenow": maxVal,
+                    "aria-disabled": disabled,
+                    onKeyDown: handleKeyDownMax,
+                    className: cn(
+                      "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md -translate-x-1/2 z-20 cursor-grab active:cursor-grabbing transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2",
+                      disabled && "pointer-events-none"
+                    ),
+                    style: { left: `${maxPercentage}%` }
+                  }
+                )
+              ]
+            }
+          ),
+          showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[5rem] text-right", children: [
+            formatValue(minVal),
+            " - ",
+            formatValue(maxVal)
+          ] })
+        ]
+      }
+    );
+  }
+);
+RangeSlider.displayName = "RangeSlider";
+var PinInput = React66.forwardRef(
+  ({
+    className,
+    length = 4,
+    value: controlledValue,
+    defaultValue = "",
+    onChange,
+    onComplete,
+    mask = false,
+    disabled = false,
+    isInvalid = false,
+    autoFocus = false,
+    ...props
+  }, ref) => {
+    const isControlled = controlledValue !== void 0;
+    const [internalPins, setInternalPins] = React66.useState(() => {
+      const initial = (controlledValue !== void 0 ? controlledValue : defaultValue).slice(0, length);
+      return Array.from({ length }, (_, i) => initial[i] || "");
+    });
+    const pins = isControlled ? Array.from({ length }, (_, i) => controlledValue[i] || "") : internalPins;
+    const inputsRef = React66.useRef([]);
+    React66.useEffect(() => {
+      if (autoFocus && inputsRef.current[0]) {
+        inputsRef.current[0].focus();
+      }
+    }, [autoFocus]);
+    const handleDigitChange = (index, val) => {
+      const sanitized = val.replace(/[^0-9a-zA-Z]/g, "").slice(-1);
       const newPins = [...pins];
       newPins[index] = sanitized;
-      setPins(newPins);
+      if (!isControlled) {
+        setInternalPins(newPins);
+      }
       const combined = newPins.join("");
       onChange?.(combined);
       if (sanitized && index < length - 1) {
@@ -2162,16 +2462,28 @@ var PinInput = React66.forwardRef(
       }
     };
     const handleKeyDown = (index, e) => {
-      if (e.key === "Backspace" && !pins[index] && index > 0) {
+      if (e.key === "Backspace") {
+        if (!pins[index] && index > 0) {
+          const newPins = [...pins];
+          newPins[index - 1] = "";
+          if (!isControlled) setInternalPins(newPins);
+          onChange?.(newPins.join(""));
+          inputsRef.current[index - 1]?.focus();
+        }
+      } else if (e.key === "ArrowLeft" && index > 0) {
+        e.preventDefault();
         inputsRef.current[index - 1]?.focus();
+      } else if (e.key === "ArrowRight" && index < length - 1) {
+        e.preventDefault();
+        inputsRef.current[index + 1]?.focus();
       }
     };
     const handlePaste = (e) => {
       e.preventDefault();
-      const pasted = e.clipboardData.getData("text").slice(0, length);
+      const pasted = e.clipboardData.getData("text").replace(/[^0-9a-zA-Z]/g, "").slice(0, length);
       if (!pasted) return;
       const newPins = Array.from({ length }, (_, i) => pasted[i] || "");
-      setPins(newPins);
+      if (!isControlled) setInternalPins(newPins);
       const combined = newPins.join("");
       onChange?.(combined);
       const nextEmptyIndex = newPins.findIndex((p) => !p);
@@ -2191,6 +2503,7 @@ var PinInput = React66.forwardRef(
         inputMode: "numeric",
         maxLength: 1,
         disabled,
+        "aria-label": `Digit ${index + 1} of ${length}`,
         value: pins[index],
         onChange: (e) => handleDigitChange(index, e.target.value),
         onKeyDown: (e) => handleKeyDown(index, e),
@@ -2216,20 +2529,67 @@ function Portal({ children, container }) {
   if (!target) return null;
   return reactDom.createPortal(children, target);
 }
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  name
+}) {
+  const isControlled = controlledValue !== void 0;
+  const isControlledRef = React66.useRef(isControlled);
+  React66.useEffect(() => {
+    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && isControlledRef.current !== isControlled) {
+      console.warn(
+        `[${name || "Component"}] is changing from ${isControlledRef.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Check the value/defaultValue props.`
+      );
+    }
+    isControlledRef.current = isControlled;
+  }, [isControlled, name]);
+  const [internalState, setInternalState] = React66.useState(defaultValue);
+  const value = isControlled ? controlledValue : internalState;
+  const setValue = React66.useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(value) : next;
+      if (!isControlled) {
+        setInternalState(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, value, onChange]
+  );
+  return [value, setValue, isControlled];
+}
 var Popover = ({
   trigger,
   children,
-  isOpen: controlledIsOpen,
+  open: controlledOpen,
+  isOpen: legacyIsOpen,
+  defaultOpen = false,
+  onOpenChange,
   onClose,
   placement = "bottom",
   className
 }) => {
-  const [internalIsOpen, setInternalIsOpen] = React66.useState(false);
-  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const activeControlled = controlledOpen !== void 0 ? controlledOpen : legacyIsOpen;
+  const handleStateChange = React66.useCallback(
+    (nextOpen) => {
+      onOpenChange?.(nextOpen);
+      if (!nextOpen) {
+        onClose?.();
+      }
+    },
+    [onOpenChange, onClose]
+  );
+  const [isOpen, setIsOpen] = useControllableState({
+    value: activeControlled,
+    defaultValue: defaultOpen,
+    onChange: handleStateChange,
+    name: "Popover"
+  });
   const [coords, setCoords] = React66.useState({ top: 0, left: 0 });
   const triggerRef = React66.useRef(null);
   const popoverRef = React66.useRef(null);
-  const calculatePosition = () => {
+  const calculatePosition = React66.useCallback(() => {
     if (triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       let top = 0;
@@ -2249,45 +2609,52 @@ var Popover = ({
       }
       setCoords({ top, left });
     }
-  };
+  }, [placement]);
   const handleToggle = () => {
     if (!isOpen) {
       calculatePosition();
     }
-    if (controlledIsOpen !== void 0) {
-      if (isOpen) onClose?.();
-    } else {
-      setInternalIsOpen(!internalIsOpen);
-    }
+    setIsOpen(!isOpen);
   };
   React66.useEffect(() => {
     if (isOpen) {
       calculatePosition();
     }
-  }, [isOpen]);
+  }, [isOpen, calculatePosition]);
   React66.useEffect(() => {
+    if (!isOpen) return;
     const handleOutside = (e) => {
       if (popoverRef.current && !popoverRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
-        if (controlledIsOpen !== void 0) {
-          onClose?.();
-        } else {
-          setInternalIsOpen(false);
-        }
+        setIsOpen(false);
       }
     };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleOutside);
-      window.addEventListener("resize", calculatePosition);
-      window.addEventListener("scroll", calculatePosition);
-    }
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition);
     return () => {
       document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition);
     };
-  }, [isOpen, controlledIsOpen, onClose]);
+  }, [isOpen, setIsOpen, calculatePosition]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleToggle, className: "w-full inline-block cursor-pointer", children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleToggle,
+        className: "w-full inline-block cursor-pointer",
+        "aria-expanded": isOpen,
+        children: trigger
+      }
+    ),
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -2322,7 +2689,7 @@ function formatDisplayDate(d) {
 var DatePicker = React66.forwardRef(
   ({
     value: controlledValue,
-    defaultValue,
+    defaultValue = null,
     onChange,
     placeholder = "Select date...",
     minDate,
@@ -2332,26 +2699,28 @@ var DatePicker = React66.forwardRef(
     className,
     presets
   }, ref) => {
-    const [internalDate, setInternalDate] = React66.useState(
-      defaultValue !== void 0 ? defaultValue : null
-    );
-    const selectedDate = controlledValue !== void 0 ? controlledValue : internalDate;
+    const [selectedDate, setSelectedDate] = useControllableState({
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      name: "DatePicker"
+    });
     const [viewDate, setViewDate] = React66.useState(selectedDate || /* @__PURE__ */ new Date());
     const [isOpen, setIsOpen] = React66.useState(false);
+    const [focusedDate, setFocusedDate] = React66.useState(selectedDate || /* @__PURE__ */ new Date());
     React66.useEffect(() => {
       if (selectedDate) {
         setViewDate(selectedDate);
+        setFocusedDate(selectedDate);
       }
     }, [selectedDate]);
     const handleSelectDate = (d) => {
-      setInternalDate(d);
-      onChange?.(d);
+      setSelectedDate(d);
       setIsOpen(false);
     };
     const handleClear = (e) => {
       e.stopPropagation();
-      setInternalDate(null);
-      onChange?.(null);
+      setSelectedDate(null);
     };
     const prevMonth = () => {
       setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1));
@@ -2384,20 +2753,68 @@ var DatePicker = React66.forwardRef(
     }
     const todayStr = formatDate(/* @__PURE__ */ new Date());
     const selectedStr = selectedDate ? formatDate(selectedDate) : "";
+    const focusedStr = formatDate(focusedDate);
+    const handleGridKeyDown = (e) => {
+      let nextDate = new Date(focusedDate);
+      let handled = false;
+      if (e.key === "ArrowLeft") {
+        nextDate.setDate(nextDate.getDate() - 1);
+        handled = true;
+      } else if (e.key === "ArrowRight") {
+        nextDate.setDate(nextDate.getDate() + 1);
+        handled = true;
+      } else if (e.key === "ArrowUp") {
+        nextDate.setDate(nextDate.getDate() - 7);
+        handled = true;
+      } else if (e.key === "ArrowDown") {
+        nextDate.setDate(nextDate.getDate() + 7);
+        handled = true;
+      } else if (e.key === "PageUp") {
+        nextDate.setMonth(nextDate.getMonth() - 1);
+        handled = true;
+      } else if (e.key === "PageDown") {
+        nextDate.setMonth(nextDate.getMonth() + 1);
+        handled = true;
+      } else if (e.key === "Home") {
+        nextDate.setDate(1);
+        handled = true;
+      } else if (e.key === "End") {
+        const lastDay = new Date(nextDate.getFullYear(), nextDate.getMonth() + 1, 0).getDate();
+        nextDate.setDate(lastDay);
+        handled = true;
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleSelectDate(focusedDate);
+        return;
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+        return;
+      }
+      if (handled) {
+        e.preventDefault();
+        setFocusedDate(nextDate);
+        if (nextDate.getMonth() !== viewDate.getMonth() || nextDate.getFullYear() !== viewDate.getFullYear()) {
+          setViewDate(new Date(nextDate.getFullYear(), nextDate.getMonth(), 1));
+        }
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        isOpen,
-        onClose: () => setIsOpen(false),
+        open: isOpen,
+        onOpenChange: setIsOpen,
         trigger: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
             disabled,
-            onClick: () => !disabled && setIsOpen(!isOpen),
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-label": selectedDate ? `Selected date: ${formatDisplayDate(selectedDate)}` : placeholder,
             className: cn(
-              "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer",
-              disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:ring-2 focus:ring-[var(--ui-primary)]/50"
+              "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+              disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
@@ -2407,7 +2824,11 @@ var DatePicker = React66.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: clearable && selectedDate && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Clear date",
                   onClick: handleClear,
+                  onKeyDown: (e) => e.key === "Enter" && handleClear(e),
                   className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors",
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
                 }
@@ -2415,74 +2836,131 @@ var DatePicker = React66.forwardRef(
             ]
           }
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider", children: viewDate.toLocaleString("default", { month: "long", year: "numeric" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-label": "Choose date",
+            className: "p-4 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3",
+            onKeyDown: handleGridKeyDown,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    id: "calendar-month-heading",
+                    className: "text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider",
+                    "aria-live": "polite",
+                    children: viewDate.toLocaleString("default", { month: "long", year: "numeric" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: prevMonth,
+                      "aria-label": "Previous month",
+                      className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: nextMonth,
+                      "aria-label": "Next month",
+                      className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 pb-2 border-b border-[var(--ui-border-subtle)]", children: presets.map((preset, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: prevMonth,
-                  className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
+                  onClick: () => handleSelectDate(preset.date),
+                  className: "px-2 py-0.5 rounded-md text-[10px] font-semibold bg-[var(--ui-bg-secondary)] hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-secondary)] transition-colors cursor-pointer",
+                  children: preset.label
+                },
+                idx
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  role: "row",
+                  className: "grid grid-cols-7 text-center text-[10px] font-bold text-[var(--ui-text-muted)] font-mono",
+                  children: [
+                    { short: "Su", full: "Sunday" },
+                    { short: "Mo", full: "Monday" },
+                    { short: "Tu", full: "Tuesday" },
+                    { short: "We", full: "Wednesday" },
+                    { short: "Th", full: "Thursday" },
+                    { short: "Fr", full: "Friday" },
+                    { short: "Sa", full: "Saturday" }
+                  ].map((d) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "columnheader", "aria-label": d.full, className: "py-1", children: d.short }, d.short))
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                "div",
                 {
-                  type: "button",
-                  onClick: nextMonth,
-                  className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                  role: "grid",
+                  "aria-labelledby": "calendar-month-heading",
+                  className: "grid grid-cols-7 gap-1",
+                  children: days.map((item, idx) => {
+                    const itemStr = formatDate(item.date);
+                    const isSelected = itemStr === selectedStr;
+                    const isToday = itemStr === todayStr;
+                    const isFocused = itemStr === focusedStr;
+                    const fullDateLabel = item.date.toLocaleDateString("en-US", {
+                      weekday: "long",
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric"
+                    });
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "gridcell",
+                        disabled: item.disabled,
+                        "aria-selected": isSelected,
+                        "aria-current": isToday ? "date" : void 0,
+                        "aria-label": fullDateLabel,
+                        tabIndex: isFocused ? 0 : -1,
+                        onClick: () => handleSelectDate(item.date),
+                        className: cn(
+                          "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer outline-none",
+                          item.disabled && "opacity-25 cursor-not-allowed pointer-events-none",
+                          !item.currentMonth && "text-[var(--ui-text-muted)] opacity-50",
+                          isFocused && "ring-2 ring-[var(--ui-primary)]",
+                          isSelected ? "bg-[var(--ui-primary)] text-white font-bold shadow-md shadow-blue-500/30" : isToday ? "border border-[var(--ui-primary)] text-[var(--ui-primary)]" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                        ),
+                        children: item.date.getDate()
+                      },
+                      idx
+                    );
+                  })
                 }
               )
-            ] })
-          ] }),
-          presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 pb-2 border-b border-[var(--ui-border-subtle)]", children: presets.map((preset, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleSelectDate(preset.date),
-              className: "px-2 py-0.5 rounded-md text-[10px] font-semibold bg-[var(--ui-bg-secondary)] hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-secondary)] transition-colors",
-              children: preset.label
-            },
-            idx
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 text-center text-[10px] font-bold text-[var(--ui-text-muted)] font-mono", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: d }, d)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((item, idx) => {
-            const itemStr = formatDate(item.date);
-            const isSelected = itemStr === selectedStr;
-            const isToday = itemStr === todayStr;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                disabled: item.disabled,
-                onClick: () => handleSelectDate(item.date),
-                className: cn(
-                  "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer",
-                  item.disabled && "opacity-25 cursor-not-allowed pointer-events-none",
-                  !item.currentMonth && "text-[var(--ui-text-muted)] opacity-50",
-                  isSelected ? "bg-[var(--ui-primary)] text-white font-bold shadow-md shadow-blue-500/30" : isToday ? "border border-[var(--ui-primary)] text-[var(--ui-primary)]" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
-                ),
-                children: item.date.getDate()
-              },
-              idx
-            );
-          }) })
-        ] })
+            ]
+          }
+        )
       }
     ) });
   }
 );
 DatePicker.displayName = "DatePicker";
 var DateRangePicker = React66.forwardRef(
-  ({ value: controlledVal, defaultValue, onChange, placeholder = "Select date range...", className, disabled = false }, ref) => {
-    const [internalRange, setInternalRange] = React66.useState(
-      defaultValue || { from: null, to: null }
-    );
-    const range = controlledVal || internalRange;
+  ({ value: controlledVal, defaultValue = { from: null, to: null }, onChange, placeholder = "Select date range...", className, disabled = false }, ref) => {
+    const [range, setRange] = useControllableState({
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      name: "DateRangePicker"
+    });
     const [viewDate, setViewDate] = React66.useState(range.from || /* @__PURE__ */ new Date());
     const [isOpen, setIsOpen] = React66.useState(false);
     const handleDayClick = (d) => {
@@ -2497,8 +2975,7 @@ var DateRangePicker = React66.forwardRef(
           setIsOpen(false);
         }
       }
-      setInternalRange(next);
-      onChange?.(next);
+      setRange(next);
     };
     const displayText = range.from && range.to ? `${formatDisplayDate(range.from)} \u2013 ${formatDisplayDate(range.to)}` : range.from ? `${formatDisplayDate(range.from)} \u2013 ...` : placeholder;
     const year = viewDate.getFullYear();
@@ -2512,146 +2989,345 @@ var DateRangePicker = React66.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        isOpen,
-        onClose: () => setIsOpen(false),
+        open: isOpen,
+        onOpenChange: setIsOpen,
         trigger: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             disabled,
-            onClick: () => !disabled && setIsOpen(!isOpen),
-            className: "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer",
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-label": displayText,
+            className: "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: range.from ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: displayText })
             ] })
           }
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 w-76 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider", children: viewDate.toLocaleString("default", { month: "long", year: "numeric" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setViewDate(new Date(year, month - 1, 1)),
-                  className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)]",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-label": "Choose date range",
+            className: "p-4 w-76 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { id: "range-month-heading", className: "text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider", children: viewDate.toLocaleString("default", { month: "long", year: "numeric" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setViewDate(new Date(year, month - 1, 1)),
+                      "aria-label": "Previous month",
+                      className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setViewDate(new Date(year, month + 1, 1)),
+                      "aria-label": "Next month",
+                      className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
                 {
-                  type: "button",
-                  onClick: () => setViewDate(new Date(year, month + 1, 1)),
-                  className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)]",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                  role: "grid",
+                  "aria-labelledby": "range-month-heading",
+                  className: "grid grid-cols-7 gap-1 text-center",
+                  children: [
+                    Array.from({ length: firstDayIndex }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", {}, `empty-${i}`)),
+                    days.map((d, idx) => {
+                      const dStr = formatDate(d);
+                      const fromStr = range.from ? formatDate(range.from) : "";
+                      const toStr = range.to ? formatDate(range.to) : "";
+                      const isFrom = dStr === fromStr;
+                      const isTo = dStr === toStr;
+                      const isInRange = range.from && range.to && d > range.from && d < range.to;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          role: "gridcell",
+                          "aria-selected": Boolean(isFrom || isTo || isInRange),
+                          "aria-label": d.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" }),
+                          onClick: () => handleDayClick(d),
+                          className: cn(
+                            "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer",
+                            (isFrom || isTo) && "bg-[var(--ui-primary)] text-white shadow-md",
+                            isInRange && "bg-[var(--ui-primary)]/20 text-[var(--ui-primary)] rounded-none",
+                            !isFrom && !isTo && !isInRange && "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                          ),
+                          children: d.getDate()
+                        },
+                        idx
+                      );
+                    })
+                  ]
                 }
               )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
-            Array.from({ length: firstDayIndex }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", {}, `empty-${i}`)),
-            days.map((d, idx) => {
-              const dStr = formatDate(d);
-              const fromStr = range.from ? formatDate(range.from) : "";
-              const toStr = range.to ? formatDate(range.to) : "";
-              const isFrom = dStr === fromStr;
-              const isTo = dStr === toStr;
-              const isInRange = range.from && range.to && d > range.from && d < range.to;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => handleDayClick(d),
-                  className: cn(
-                    "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer",
-                    (isFrom || isTo) && "bg-[var(--ui-primary)] text-white shadow-md",
-                    isInRange && "bg-[var(--ui-primary)]/20 text-[var(--ui-primary)] rounded-none",
-                    !isFrom && !isTo && !isInRange && "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
-                  ),
-                  children: d.getDate()
-                },
-                idx
-              );
-            })
-          ] })
-        ] })
+            ]
+          }
+        )
       }
     ) });
   }
 );
 DateRangePicker.displayName = "DateRangePicker";
 var TimePicker = React66.forwardRef(
-  ({ value: controlledVal, defaultValue = "12:00", onChange, format = "24h", className, disabled = false }, ref) => {
-    const [internalTime, setInternalTime] = React66.useState(defaultValue);
-    const time = controlledVal !== void 0 ? controlledVal : internalTime;
-    const [hours, setHours] = React66.useState(time.split(":")[0] || "12");
-    const [minutes, setMinutes] = React66.useState(time.split(":")[1] || "00");
+  ({
+    value: controlledVal,
+    defaultValue,
+    onChange,
+    format = "24h",
+    className,
+    disabled = false,
+    placeholder = "Select time..."
+  }, ref) => {
+    const is12h = format === "12h";
+    const fallbackDefault = defaultValue ?? (is12h ? "12:00 PM" : "12:00");
+    const [time, setTime] = useControllableState({
+      value: controlledVal,
+      defaultValue: fallbackDefault,
+      onChange,
+      name: "TimePicker"
+    });
     const [isOpen, setIsOpen] = React66.useState(false);
-    const updateTime = (newH, newM) => {
-      const full = `${newH.padStart(2, "0")}:${newM.padStart(2, "0")}`;
-      setHours(newH);
-      setMinutes(newM);
-      setInternalTime(full);
-      onChange?.(full);
+    const parseTime = (str, is12) => {
+      if (!str) return { hours: is12 ? "12" : "12", minutes: "00", period: "AM" };
+      const trimmed = str.trim();
+      let period2 = "AM";
+      let cleanTime = trimmed;
+      if (trimmed.toLowerCase().includes("pm")) {
+        period2 = "PM";
+        cleanTime = trimmed.replace(/pm/i, "").trim();
+      } else if (trimmed.toLowerCase().includes("am")) {
+        period2 = "AM";
+        cleanTime = trimmed.replace(/am/i, "").trim();
+      }
+      const parts = cleanTime.split(":");
+      let h = parts[0] ? parts[0].padStart(2, "0") : is12 ? "12" : "00";
+      const m = parts[1] ? parts[1].padStart(2, "0") : "00";
+      return { hours: h, minutes: m, period: period2 };
+    };
+    const { hours, minutes, period } = parseTime(time, is12h);
+    const updateTime = (newH, newM, newPeriod) => {
+      let formatted;
+      if (is12h) {
+        const p = newPeriod ?? period;
+        formatted = `${newH.padStart(2, "0")}:${newM.padStart(2, "0")} ${p}`;
+      } else {
+        formatted = `${newH.padStart(2, "0")}:${newM.padStart(2, "0")}`;
+      }
+      setTime(formatted);
+    };
+    const hourOptions = is12h ? Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0")) : Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
+    const minuteOptions = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"];
+    const hourListRef = React66.useRef(null);
+    const minuteListRef = React66.useRef(null);
+    const periodListRef = React66.useRef(null);
+    React66.useEffect(() => {
+      if (isOpen) {
+        const timer = setTimeout(() => {
+          const activeHourEl = hourListRef.current?.querySelector('[aria-selected="true"]');
+          activeHourEl?.focus();
+        }, 10);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+    const handleHourKeyDown = (e) => {
+      const idx = hourOptions.indexOf(hours);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const next = hourOptions[(idx + 1) % hourOptions.length];
+        updateTime(next, minutes, period);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prev = hourOptions[(idx - 1 + hourOptions.length) % hourOptions.length];
+        updateTime(prev, minutes, period);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        const activeMinEl = minuteListRef.current?.querySelector('[aria-selected="true"]') || minuteListRef.current?.querySelector('[role="option"]');
+        activeMinEl?.focus();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    };
+    const handleMinuteKeyDown = (e) => {
+      const idx = minuteOptions.indexOf(minutes);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const next = minuteOptions[(idx + 1) % minuteOptions.length];
+        updateTime(hours, next, period);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prev = minuteOptions[(idx - 1 + minuteOptions.length) % minuteOptions.length];
+        updateTime(hours, prev, period);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        const activeHourEl = hourListRef.current?.querySelector('[aria-selected="true"]');
+        activeHourEl?.focus();
+      } else if (e.key === "ArrowRight" && is12h) {
+        e.preventDefault();
+        const activePeriodEl = periodListRef.current?.querySelector('[aria-selected="true"]');
+        activePeriodEl?.focus();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    };
+    const handlePeriodKeyDown = (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const next = period === "AM" ? "PM" : "AM";
+        updateTime(hours, minutes, next);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        const activeMinEl = minuteListRef.current?.querySelector('[aria-selected="true"]');
+        activeMinEl?.focus();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+      }
     };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        isOpen,
-        onClose: () => setIsOpen(false),
+        open: isOpen,
+        onOpenChange: setIsOpen,
         trigger: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             disabled,
-            onClick: () => !disabled && setIsOpen(!isOpen),
-            className: "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer",
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-label": `Selected time: ${time}`,
+            className: cn(
+              "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+              disabled && "opacity-50 cursor-not-allowed"
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4 text-[var(--ui-text-muted)]" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm font-semibold text-[var(--ui-text-primary)]", children: time })
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm font-semibold text-[var(--ui-text-primary)]", children: time || placeholder })
             ] })
           }
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 w-52 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-bold text-[var(--ui-text-muted)] uppercase tracking-wider font-mono", children: [
-            "Select Time (",
-            format,
-            ")"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-36 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1", children: Array.from({ length: 24 }).map((_, i) => {
-              const h = String(i).padStart(2, "0");
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  onClick: () => updateTime(h, minutes),
-                  className: cn(
-                    "text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors",
-                    hours === h ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
-                  ),
-                  children: h
-                },
-                h
-              );
-            }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold", children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-36 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1", children: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "41", "45", "50", "55"].map((m) => /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                onClick: () => updateTime(hours, m),
-                className: cn(
-                  "text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors",
-                  minutes === m ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-label": "Choose time",
+            className: "p-4 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-bold text-[var(--ui-text-muted)] uppercase tracking-wider font-mono", children: [
+                "Select Time (",
+                format,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: hourListRef,
+                    tabIndex: 0,
+                    onKeyDown: handleHourKeyDown,
+                    className: "h-40 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1 focus:outline-none focus:ring-1 focus:ring-[var(--ui-primary)]",
+                    role: "listbox",
+                    "aria-label": "Hour",
+                    children: hourOptions.map((h) => {
+                      const isSelected = hours === h;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          tabIndex: isSelected ? 0 : -1,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          onClick: () => updateTime(h, minutes, period),
+                          className: cn(
+                            "text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-[var(--ui-primary)]",
+                            isSelected ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                          ),
+                          children: h
+                        },
+                        h
+                      );
+                    })
+                  }
                 ),
-                children: m
-              },
-              m
-            )) })
-          ] })
-        ] })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold", children: ":" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: minuteListRef,
+                    tabIndex: 0,
+                    onKeyDown: handleMinuteKeyDown,
+                    className: "h-40 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1 focus:outline-none focus:ring-1 focus:ring-[var(--ui-primary)]",
+                    role: "listbox",
+                    "aria-label": "Minute",
+                    children: minuteOptions.map((m) => {
+                      const isSelected = minutes === m;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          tabIndex: isSelected ? 0 : -1,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          onClick: () => updateTime(hours, m, period),
+                          className: cn(
+                            "text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-[var(--ui-primary)]",
+                            isSelected ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                          ),
+                          children: m
+                        },
+                        m
+                      );
+                    })
+                  }
+                ),
+                is12h && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: periodListRef,
+                    tabIndex: 0,
+                    onKeyDown: handlePeriodKeyDown,
+                    className: "h-40 border border-[var(--ui-border-subtle)] rounded-xl p-1 w-14 text-center space-y-1 flex flex-col justify-center focus:outline-none focus:ring-1 focus:ring-[var(--ui-primary)]",
+                    role: "listbox",
+                    "aria-label": "Period",
+                    children: ["AM", "PM"].map((p) => {
+                      const isSelected = period === p;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          tabIndex: isSelected ? 0 : -1,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          onClick: () => updateTime(hours, minutes, p),
+                          className: cn(
+                            "text-xs py-2 rounded-lg font-mono font-semibold cursor-pointer transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-[var(--ui-primary)]",
+                            isSelected ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                          ),
+                          children: p
+                        },
+                        p
+                      );
+                    })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
       }
     ) });
   }
@@ -2729,135 +3405,205 @@ var Combobox = React66.forwardRef(
     emptyText = "No items found.",
     disabled = false,
     clearable = true,
-    className
+    className,
+    name,
+    id: customId,
+    "aria-label": ariaLabel = "Select option"
   }, ref) => {
+    const baseId = React66.useId();
+    const comboId = customId || `combobox-${baseId}`;
+    const listboxId = `listbox-${baseId}`;
     const [internalVal, setInternalVal] = React66.useState(defaultValue);
-    const selectedValue = controlledVal !== void 0 ? controlledVal : internalVal;
+    const isControlled = controlledVal !== void 0;
+    const selectedValue = isControlled ? controlledVal : internalVal;
     const [search, setSearch] = React66.useState("");
     const [isOpen, setIsOpen] = React66.useState(false);
     const [highlightIndex, setHighlightIndex] = React66.useState(0);
+    const searchInputRef = React66.useRef(null);
+    const triggerRef = React66.useRef(null);
     const filteredOptions = options.filter(
       (opt) => opt.label.toLowerCase().includes(search.toLowerCase()) || opt.value.toLowerCase().includes(search.toLowerCase()) || opt.description && opt.description.toLowerCase().includes(search.toLowerCase())
     );
     const selectedOption = options.find((opt) => opt.value === selectedValue);
+    React66.useEffect(() => {
+      if (filteredOptions.length > 0) {
+        setHighlightIndex((prev) => Math.min(prev, filteredOptions.length - 1));
+      }
+    }, [filteredOptions.length]);
     const handleSelect = (val) => {
-      setInternalVal(val);
+      if (!isControlled) {
+        setInternalVal(val);
+      }
       onChange?.(val);
       setIsOpen(false);
       setSearch("");
+      triggerRef.current?.focus();
     };
     const handleClear = (e) => {
       e.stopPropagation();
-      setInternalVal("");
+      if (!isControlled) {
+        setInternalVal("");
+      }
       onChange?.("");
     };
     const handleKeyDown = (e) => {
       if (!isOpen) {
-        if (e.key === "ArrowDown" || e.key === "Enter") {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
           setIsOpen(true);
         }
         return;
       }
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setHighlightIndex((prev) => (prev + 1) % Math.max(1, filteredOptions.length));
+        let next = highlightIndex + 1;
+        while (next < filteredOptions.length && filteredOptions[next]?.disabled) {
+          next++;
+        }
+        if (next < filteredOptions.length) {
+          setHighlightIndex(next);
+        }
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        setHighlightIndex((prev) => (prev - 1 + filteredOptions.length) % Math.max(1, filteredOptions.length));
+        let prev = highlightIndex - 1;
+        while (prev >= 0 && filteredOptions[prev]?.disabled) {
+          prev--;
+        }
+        if (prev >= 0) {
+          setHighlightIndex(prev);
+        }
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        let first = 0;
+        while (first < filteredOptions.length && filteredOptions[first]?.disabled) {
+          first++;
+        }
+        setHighlightIndex(first);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        let last = filteredOptions.length - 1;
+        while (last >= 0 && filteredOptions[last]?.disabled) {
+          last--;
+        }
+        setHighlightIndex(last);
       } else if (e.key === "Enter") {
         e.preventDefault();
-        if (filteredOptions[highlightIndex] && !filteredOptions[highlightIndex].disabled) {
-          handleSelect(filteredOptions[highlightIndex].value);
+        const highlighted = filteredOptions[highlightIndex];
+        if (highlighted && !highlighted.disabled) {
+          handleSelect(highlighted.value);
         }
       } else if (e.key === "Escape") {
+        e.preventDefault();
         setIsOpen(false);
+        triggerRef.current?.focus();
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-      Popover,
-      {
-        isOpen,
-        onClose: () => setIsOpen(false),
-        trigger: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            disabled,
-            onClick: () => !disabled && setIsOpen(!isOpen),
-            onKeyDown: handleKeyDown,
-            className: cn(
-              "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer",
-              disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:ring-2 focus:ring-[var(--ui-primary)]/50"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
-                selectedOption?.icon,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: selectedOption ? selectedOption.label : placeholder })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: [
-                clearable && selectedValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    onClick: handleClear,
-                    className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-4 h-4 opacity-50 shrink-0" })
-              ] })
-            ]
-          }
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 w-3.5 h-3.5 text-[var(--ui-text-muted)] pointer-events-none" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "text",
-                autoFocus: true,
-                placeholder: searchPlaceholder,
-                value: search,
-                onChange: (e) => {
-                  setSearch(e.target.value);
-                  setHighlightIndex(0);
+    const activeDescendantId = filteredOptions[highlightIndex] ? `combobox-opt-${baseId}-${filteredOptions[highlightIndex].value}` : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("relative w-full", className), children: [
+      name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: selectedValue }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Popover,
+        {
+          isOpen,
+          onClose: () => setIsOpen(false),
+          trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: triggerRef,
+              id: comboId,
+              type: "button",
+              disabled,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-controls": isOpen ? listboxId : void 0,
+              "aria-label": ariaLabel,
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              onKeyDown: handleKeyDown,
+              className: cn(
+                "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+                disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
+                  selectedOption?.icon,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: selectedOption ? selectedOption.label : placeholder })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: [
+                  clearable && selectedValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      onClick: handleClear,
+                      className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-4 h-4 opacity-50 shrink-0" })
+                ] })
+              ]
+            }
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 w-3.5 h-3.5 text-[var(--ui-text-muted)] pointer-events-none" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  autoFocus: true,
+                  placeholder: searchPlaceholder,
+                  value: search,
+                  onChange: (e) => {
+                    setSearch(e.target.value);
+                    setHighlightIndex(0);
+                  },
+                  onKeyDown: handleKeyDown,
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-expanded": "true",
+                  "aria-controls": listboxId,
+                  "aria-activedescendant": activeDescendantId,
+                  className: "w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] focus:outline-none focus:border-[var(--ui-primary)] text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)]"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { id: listboxId, className: "max-h-56 overflow-y-auto space-y-0.5", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-xs text-[var(--ui-text-muted)]", children: emptyText }) : filteredOptions.map((opt, idx) => {
+              const isSelected = opt.value === selectedValue;
+              const isHighlighted = idx === highlightIndex;
+              const optId = `combobox-opt-${baseId}-${opt.value}`;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  id: optId,
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": opt.disabled,
+                  onClick: () => !opt.disabled && handleSelect(opt.value),
+                  onMouseEnter: () => !opt.disabled && setHighlightIndex(idx),
+                  className: cn(
+                    "flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium cursor-pointer transition-colors select-none",
+                    opt.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
+                    isSelected ? "bg-[var(--ui-primary)] text-white font-semibold shadow-xs" : isHighlighted ? "bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]" : "text-[var(--ui-text-primary)]"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+                      opt.icon,
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: opt.label }),
+                        opt.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] block truncate", isSelected ? "text-white/80" : "text-[var(--ui-text-muted)]"), children: opt.description })
+                      ] })
+                    ] }),
+                    isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 shrink-0" })
+                  ]
                 },
-                className: "w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] focus:outline-none focus:border-[var(--ui-primary)] text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)]"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto space-y-0.5", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-xs text-[var(--ui-text-muted)]", children: emptyText }) : filteredOptions.map((opt, idx) => {
-            const isSelected = opt.value === selectedValue;
-            const isHighlighted = idx === highlightIndex;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                role: "option",
-                "aria-selected": isSelected,
-                onClick: () => !opt.disabled && handleSelect(opt.value),
-                onMouseEnter: () => setHighlightIndex(idx),
-                className: cn(
-                  "flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium cursor-pointer transition-colors",
-                  opt.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
-                  isSelected ? "bg-[var(--ui-primary)] text-white font-semibold shadow-xs" : isHighlighted ? "bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]" : "text-[var(--ui-text-primary)]"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
-                    opt.icon,
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: opt.label }),
-                      opt.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] block truncate", isSelected ? "text-white/80" : "text-[var(--ui-text-muted)]"), children: opt.description })
-                    ] })
-                  ] }),
-                  isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 shrink-0" })
-                ]
-              },
-              opt.value
-            );
-          }) })
-        ] })
-      }
-    ) });
+                opt.value
+              );
+            }) })
+          ] })
+        }
+      )
+    ] });
   }
 );
 Combobox.displayName = "Combobox";
@@ -2874,28 +3620,69 @@ var MultiSelect = React66.forwardRef(
     className
   }, ref) => {
     const [internalVal, setInternalVal] = React66.useState(defaultValue);
-    const selectedValues = controlledVal !== void 0 ? controlledVal : internalVal;
+    const isControlled = controlledVal !== void 0;
+    const selectedValues = isControlled ? controlledVal : internalVal;
     const [search, setSearch] = React66.useState("");
     const [isOpen, setIsOpen] = React66.useState(false);
+    const [highlightedIndex, setHighlightedIndex] = React66.useState(0);
     const filteredOptions = options.filter(
       (opt) => opt.label.toLowerCase().includes(search.toLowerCase()) || opt.value.toLowerCase().includes(search.toLowerCase())
     );
     const toggleOption = (val) => {
+      const opt = options.find((o) => o.value === val);
+      if (opt?.disabled) return;
       const next = selectedValues.includes(val) ? selectedValues.filter((v) => v !== val) : [...selectedValues, val];
-      setInternalVal(next);
+      if (!isControlled) {
+        setInternalVal(next);
+      }
       onChange?.(next);
     };
     const removeTag = (val, e) => {
       e?.stopPropagation?.();
       const next = selectedValues.filter((v) => v !== val);
-      setInternalVal(next);
+      if (!isControlled) {
+        setInternalVal(next);
+      }
       onChange?.(next);
     };
     const clearAll = (e) => {
       e?.stopPropagation?.();
-      setInternalVal([]);
+      if (!isControlled) {
+        setInternalVal([]);
+      }
       onChange?.([]);
     };
+    const handleSearchKeyDown = (e) => {
+      if (filteredOptions.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          let next = (prev + 1) % filteredOptions.length;
+          while (filteredOptions[next]?.disabled && next !== prev) {
+            next = (next + 1) % filteredOptions.length;
+          }
+          return next;
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          let next = (prev - 1 + filteredOptions.length) % filteredOptions.length;
+          while (filteredOptions[next]?.disabled && next !== prev) {
+            next = (next - 1 + filteredOptions.length) % filteredOptions.length;
+          }
+          return next;
+        });
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const current = filteredOptions[highlightedIndex];
+        if (current && !current.disabled) {
+          toggleOption(current.value);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
@@ -2904,9 +3691,19 @@ var MultiSelect = React66.forwardRef(
         trigger: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            tabIndex: disabled ? -1 : 0,
+            role: "combobox",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
             onClick: () => !disabled && setIsOpen(!isOpen),
+            onKeyDown: (e) => {
+              if ((e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && !disabled) {
+                e.preventDefault();
+                setIsOpen(true);
+              }
+            },
             className: cn(
-              "min-h-10 py-1.5 px-3 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] flex flex-wrap items-center justify-between gap-1.5 text-sm transition-all shadow-inner cursor-pointer",
+              "min-h-10 py-1.5 px-3 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] flex flex-wrap items-center justify-between gap-1.5 text-sm transition-all shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
               disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]"
             ),
             children: [
@@ -2935,7 +3732,7 @@ var MultiSelect = React66.forwardRef(
                   "span",
                   {
                     onClick: clearAll,
-                    className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors",
+                    className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer",
                     children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
                   }
                 ),
@@ -2954,20 +3751,30 @@ var MultiSelect = React66.forwardRef(
                 autoFocus: true,
                 placeholder: searchPlaceholder,
                 value: search,
-                onChange: (e) => setSearch(e.target.value),
+                onChange: (e) => {
+                  setSearch(e.target.value);
+                  setHighlightedIndex(0);
+                },
+                onKeyDown: handleSearchKeyDown,
                 className: "w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] focus:outline-none focus:border-[var(--ui-primary)] text-[var(--ui-text-primary)]"
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto space-y-0.5", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-xs text-[var(--ui-text-muted)]", children: "No options found." }) : filteredOptions.map((opt) => {
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto space-y-0.5", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-xs text-[var(--ui-text-muted)]", children: "No options found." }) : filteredOptions.map((opt, index) => {
             const isChecked = selectedValues.includes(opt.value);
+            const isHighlighted = highlightedIndex === index;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                onClick: () => toggleOption(opt.value),
+                role: "option",
+                "aria-selected": isChecked,
+                "aria-disabled": opt.disabled,
+                onClick: () => !opt.disabled && toggleOption(opt.value),
                 className: cn(
-                  "flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium cursor-pointer transition-colors",
-                  isChecked ? "bg-[var(--ui-primary)]/15 text-[var(--ui-primary)] font-semibold" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                  "flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium transition-colors select-none",
+                  opt.disabled ? "opacity-40 cursor-not-allowed text-[var(--ui-text-muted)]" : "cursor-pointer",
+                  isChecked && "text-[var(--ui-primary)] font-semibold",
+                  isHighlighted && !opt.disabled && "bg-[var(--ui-primary)]/15"
                 ),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
@@ -3009,26 +3816,58 @@ var FileUpload = React66.forwardRef(
     const [isDragOver, setIsDragOver] = React66.useState(false);
     const [fileList, setFileList] = React66.useState([]);
     const inputRef = React66.useRef(null);
+    const fileListRef = React66.useRef(fileList);
+    fileListRef.current = fileList;
+    React66.useEffect(() => {
+      return () => {
+        fileListRef.current.forEach((item) => {
+          if (item.previewUrl) {
+            URL.revokeObjectURL(item.previewUrl);
+          }
+        });
+      };
+    }, []);
+    const matchesAccept = (file, acceptStr) => {
+      if (!acceptStr) return true;
+      const patterns = acceptStr.split(",").map((p) => p.trim().toLowerCase());
+      const fileName = file.name.toLowerCase();
+      const fileType = file.type.toLowerCase();
+      return patterns.some((p) => {
+        if (p.startsWith(".")) {
+          return fileName.endsWith(p);
+        }
+        if (p.endsWith("/*")) {
+          const baseType = p.replace("/*", "");
+          return fileType.startsWith(baseType);
+        }
+        return fileType === p;
+      });
+    };
     const processFiles = (incoming) => {
       if (!incoming) return;
       const validFiles = [];
       const newUploaded = [];
       Array.from(incoming).forEach((file) => {
         if (fileList.length + newUploaded.length >= maxFiles) return;
+        const isAccepted = matchesAccept(file, accept);
         const isOversized = file.size > maxSizeMB * 1024 * 1024;
+        const hasError = !isAccepted || isOversized;
+        let errorMsg;
+        if (!isAccepted) errorMsg = `File type not supported (${accept})`;
+        else if (isOversized) errorMsg = `File exceeds ${maxSizeMB}MB limit`;
         const fileObj = {
           id: `${file.name}-${Date.now()}-${Math.random()}`,
           file,
           name: file.name,
           size: file.size,
           type: file.type,
-          progress: isOversized ? 0 : 100,
-          status: isOversized ? "error" : "completed",
-          errorMessage: isOversized ? `File exceeds ${maxSizeMB}MB limit` : void 0,
-          previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : void 0
+          progress: hasError ? 0 : 100,
+          status: hasError ? "error" : "completed",
+          errorMessage: errorMsg,
+          previewUrl: file.type.startsWith("image/") && !hasError ? URL.createObjectURL(file) : void 0
         };
         newUploaded.push(fileObj);
-        if (!isOversized) validFiles.push(file);
+        if (!hasError) validFiles.push(file);
       });
       setFileList((prev) => [...prev, ...newUploaded]);
       if (validFiles.length > 0) {
@@ -3054,7 +3893,13 @@ var FileUpload = React66.forwardRef(
       if (inputRef.current) inputRef.current.value = "";
     };
     const removeFile = (id) => {
-      setFileList((prev) => prev.filter((f) => f.id !== id));
+      setFileList((prev) => {
+        const item = prev.find((f) => f.id === id);
+        if (item?.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl);
+        }
+        return prev.filter((f) => f.id !== id);
+      });
       onFileRemove?.(id);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full space-y-4", className), children: [
@@ -3162,8 +4007,12 @@ var NumberInput = React66.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [internalVal, setInternalVal] = React66.useState(defaultValue);
-    const value = controlledVal !== void 0 ? controlledVal : internalVal;
+    const [value, setValue] = useControllableState({
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      name: "NumberInput"
+    });
     const clamp = (num) => {
       let clamped = Math.min(max, Math.max(min, num));
       if (precision > 0) {
@@ -3174,14 +4023,12 @@ var NumberInput = React66.forwardRef(
     const handleIncrement = () => {
       if (disabled) return;
       const next = clamp(value + step);
-      setInternalVal(next);
-      onChange?.(next);
+      setValue(next);
     };
     const handleDecrement = () => {
       if (disabled) return;
       const next = clamp(value - step);
-      setInternalVal(next);
-      onChange?.(next);
+      setValue(next);
     };
     const handleInputChange = (e) => {
       const val = e.target.value;
@@ -3191,8 +4038,7 @@ var NumberInput = React66.forwardRef(
       const parsed = parseFloat(val);
       if (!isNaN(parsed)) {
         const next = clamp(parsed);
-        setInternalVal(next);
-        onChange?.(next);
+        setValue(next);
       }
     };
     const handleKeyDown = (e) => {
@@ -3213,7 +4059,7 @@ var NumberInput = React66.forwardRef(
             type: "button",
             disabled: disabled || value <= min,
             onClick: handleDecrement,
-            className: "px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-r border-[var(--ui-border-subtle)]",
+            className: "px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-r border-[var(--ui-border-subtle)] cursor-pointer",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3.5 h-3.5" })
           }
         ),
@@ -3236,7 +4082,7 @@ var NumberInput = React66.forwardRef(
             type: "button",
             disabled: disabled || value >= max,
             onClick: handleIncrement,
-            className: "px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-l border-[var(--ui-border-subtle)]",
+            className: "px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-l border-[var(--ui-border-subtle)] cursor-pointer",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3.5 h-3.5" })
           }
         )
@@ -3267,7 +4113,7 @@ var NumberInput = React66.forwardRef(
             type: "button",
             disabled: disabled || value >= max,
             onClick: handleIncrement,
-            className: "px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-t text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors",
+            className: "px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-t text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors cursor-pointer",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3" })
           }
         ),
@@ -3277,7 +4123,7 @@ var NumberInput = React66.forwardRef(
             type: "button",
             disabled: disabled || value <= min,
             onClick: handleDecrement,
-            className: "px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-b text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors",
+            className: "px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-b text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors cursor-pointer",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3 h-3" })
           }
         )
@@ -3306,19 +4152,27 @@ var CurrencyInput = React66.forwardRef(
   }, ref) => {
     const symbol = currencySymbol || (currency === "VND" ? "\u20AB" : currency === "EUR" ? "\u20AC" : "$");
     const isSuffix = position === "suffix" || currency === "VND";
-    const [internalVal, setInternalVal] = React66.useState(defaultValue);
-    const value = controlledVal !== void 0 ? controlledVal : internalVal;
-    const [displayVal, setDisplayVal] = React66.useState(formatCurrencyString(value));
+    const [value, setValue, isControlled] = useControllableState({
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      name: "CurrencyInput"
+    });
+    const [internalInputString, setInternalInputString] = React66.useState(formatCurrencyString(value));
     React66.useEffect(() => {
-      setDisplayVal(formatCurrencyString(value));
-    }, [value]);
+      if (!isControlled) {
+        setInternalInputString(formatCurrencyString(value));
+      }
+    }, [value, isControlled]);
+    const displayVal = isControlled ? formatCurrencyString(value) : internalInputString;
     const handleInputChange = (e) => {
       const raw = e.target.value.replace(/[^0-9.]/g, "");
       const parsed = parseFloat(raw);
       const num = isNaN(parsed) ? 0 : parsed;
-      setDisplayVal(raw ? formatCurrencyString(num) : "");
-      setInternalVal(num);
-      onChange?.(num);
+      if (!isControlled) {
+        setInternalInputString(raw ? formatCurrencyString(num) : "");
+      }
+      setValue(num);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full flex items-center", className), children: [
       !isSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-3.5 text-sm font-bold text-[var(--ui-text-muted)] pointer-events-none font-mono", children: symbol }),
@@ -3440,6 +4294,7 @@ __export(overlays_exports, {
   ModalTitle: () => ModalTitle,
   Popover: () => Popover,
   Portal: () => Portal,
+  Toast: () => Toast,
   ToasterProvider: () => ToasterProvider,
   Tooltip: () => Tooltip,
   drawerVariants: () => drawerVariants,
@@ -3450,37 +4305,112 @@ __export(overlays_exports, {
   useModal: () => useModal,
   useToast: () => useToast
 });
-var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function FocusTrap({ children, active = true }) {
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]'
+].join(", ");
+var trapStack = [];
+function FocusTrap({
+  children,
+  active = true,
+  autoFocus = true,
+  restoreFocus = true
+}) {
   const rootRef = React66.useRef(null);
+  const previousActiveElementRef = React66.useRef(null);
   React66.useEffect(() => {
     if (!active) return;
+    if (typeof document !== "undefined") {
+      previousActiveElementRef.current = document.activeElement;
+    }
     const root = rootRef.current;
     if (!root) return;
-    const focusable = root.querySelectorAll(FOCUSABLE_SELECTOR);
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    if (first) {
-      first.focus();
+    trapStack.push(root);
+    if (autoFocus) {
+      const timer = setTimeout(() => {
+        const focusable = root.querySelectorAll(FOCUSABLE_SELECTOR);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else if (typeof root.focus === "function") {
+          root.focus();
+        }
+      }, 0);
+      return () => clearTimeout(timer);
     }
+    return () => {
+      const idx = trapStack.indexOf(root);
+      if (idx !== -1) trapStack.splice(idx, 1);
+    };
+  }, [active, autoFocus]);
+  React66.useEffect(() => {
+    if (!active) return;
     const handleKeyDown = (e) => {
       if (e.key !== "Tab") return;
+      const root = rootRef.current;
+      if (!root) return;
+      if (trapStack.length > 0 && trapStack[trapStack.length - 1] !== root) {
+        return;
+      }
+      const focusable = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+        (el) => el.offsetParent !== null || el.getClientRects().length > 0
+      );
+      if (focusable.length === 0) {
+        e.preventDefault();
+        root.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
       if (e.shiftKey) {
-        if (document.activeElement === first) {
+        if (document.activeElement === first || !root.contains(document.activeElement)) {
           e.preventDefault();
-          last?.focus();
+          last.focus();
         }
       } else {
-        if (document.activeElement === last) {
+        if (document.activeElement === last || !root.contains(document.activeElement)) {
           e.preventDefault();
-          first?.focus();
+          first.focus();
         }
       }
     };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [active]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, className: "contents", children });
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+      const root = rootRef.current;
+      if (root) {
+        const idx = trapStack.indexOf(root);
+        if (idx !== -1) trapStack.splice(idx, 1);
+      }
+      if (restoreFocus && previousActiveElementRef.current && typeof previousActiveElementRef.current.focus === "function") {
+        previousActiveElementRef.current.focus();
+      }
+    };
+  }, [active, restoreFocus]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, tabIndex: -1, className: "contents", style: { outline: "none" }, children });
+}
+
+// src/utils/scroll-lock.ts
+var lockCount = 0;
+var previousOverflow = "";
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = previousOverflow;
+  }
 }
 var ModalContext = React66.createContext(null);
 function useModal() {
@@ -3495,33 +4425,76 @@ function Modal({
   onClose,
   children,
   closeOnEsc = true,
-  closeOnOverlayClick = true
+  closeOnOverlayClick = true,
+  role = "dialog",
+  "aria-label": ariaLabel,
+  "aria-labelledby": customLabelledBy,
+  "aria-describedby": customDescribedBy
 }) {
+  const generatedId = React66.useId();
+  const titleId = customLabelledBy || `modal-title-${generatedId}`;
+  const descriptionId = customDescribedBy || `modal-desc-${generatedId}`;
+  const [mountedTitleId, setMountedTitleId] = React66.useState(null);
+  const [mountedDescId, setMountedDescId] = React66.useState(null);
+  const registerTitle = React66.useCallback(
+    (id) => {
+      const activeId = id || titleId;
+      setMountedTitleId(activeId);
+      return () => setMountedTitleId(null);
+    },
+    [titleId]
+  );
+  const registerDescription = React66.useCallback(
+    (id) => {
+      const activeId = id || descriptionId;
+      setMountedDescId(activeId);
+      return () => setMountedDescId(null);
+    },
+    [descriptionId]
+  );
   React66.useEffect(() => {
     if (!isOpen) return;
+    lockBodyScroll();
     const handleKeyDown = (e) => {
       if (closeOnEsc && e.key === "Escape") {
         onClose();
       }
     };
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
     window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = originalOverflow;
+      unlockBodyScroll();
     };
   }, [isOpen, closeOnEsc, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: { isOpen, onClose, closeOnOverlayClick }, children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  const resolvedLabelledBy = customLabelledBy || (ariaLabel ? void 0 : mountedTitleId || void 0);
+  const resolvedDescribedBy = customDescribedBy || (mountedDescId || void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ModalContext.Provider,
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6",
-      role: "dialog",
-      "aria-modal": "true",
-      children
+      value: {
+        isOpen,
+        onClose,
+        closeOnOverlayClick,
+        titleId,
+        descriptionId,
+        registerTitle,
+        registerDescription
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6",
+          role,
+          "aria-modal": "true",
+          "aria-label": ariaLabel,
+          "aria-labelledby": resolvedLabelledBy,
+          "aria-describedby": resolvedDescribedBy,
+          children
+        }
+      ) })
     }
-  ) }) }) });
+  ) });
 }
 var ModalOverlay = React66.forwardRef(
   ({ className, onClick, ...props }, ref) => {
@@ -3584,14 +4557,42 @@ var ModalHeader = React66.forwardRef(
 );
 ModalHeader.displayName = "ModalHeader";
 var ModalTitle = React66.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: cn("text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]", className), ...props, children });
+  ({ className, children, id, ...props }, ref) => {
+    const { titleId, registerTitle } = useModal();
+    const activeId = id || titleId;
+    React66.useEffect(() => {
+      return registerTitle(activeId);
+    }, [registerTitle, activeId]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        ref,
+        id: activeId,
+        className: cn("text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]", className),
+        ...props,
+        children
+      }
+    );
   }
 );
 ModalTitle.displayName = "ModalTitle";
 var ModalDescription = React66.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-[var(--ui-text-muted)]", className), ...props, children });
+  ({ className, children, id, ...props }, ref) => {
+    const { descriptionId, registerDescription } = useModal();
+    const activeId = id || descriptionId;
+    React66.useEffect(() => {
+      return registerDescription(activeId);
+    }, [registerDescription, activeId]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref,
+        id: activeId,
+        className: cn("text-sm text-[var(--ui-text-muted)]", className),
+        ...props,
+        children
+      }
+    );
   }
 );
 ModalDescription.displayName = "ModalDescription";
@@ -3621,7 +4622,7 @@ var ModalCloseButton = React66.forwardRef(
         },
         "aria-label": "Close dialog",
         className: cn(
-          "absolute top-4 right-4 p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors",
+          "absolute top-4 right-4 p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
           className
         ),
         ...props,
@@ -3640,32 +4641,43 @@ function AlertDialog({
   confirmText = "Confirm",
   cancelText = "Cancel",
   variant = "danger",
-  isLoading = false
+  isLoading = false,
+  closeOnOverlayClick = false
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { isOpen, onClose, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { size: "sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ModalCloseButton, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { children: description })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ModalFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: isLoading, children: cancelText }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: variant === "danger" ? "danger" : "primary",
-            size: "sm",
-            loading: isLoading,
-            onClick: onConfirm,
-            children: confirmText
-          }
-        )
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      role: "alertdialog",
+      closeOnOverlayClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { size: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalCloseButton, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ModalFooter, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: isLoading, autoFocus: true, children: cancelText }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: variant === "danger" ? "danger" : "primary",
+                size: "sm",
+                loading: isLoading,
+                onClick: onConfirm,
+                children: confirmText
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
+AlertDialog.displayName = "AlertDialog";
 var DrawerContext = React66.createContext(null);
 function useDrawer() {
   const context = React66.useContext(DrawerContext);
@@ -3695,54 +4707,68 @@ function Drawer({
   onClose,
   placement = "right",
   children,
-  closeOnEsc = true
+  closeOnEsc = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": customLabelledBy
 }) {
+  const generatedId = React66.useId();
+  const titleId = customLabelledBy || `drawer-title-${generatedId}`;
   React66.useEffect(() => {
     if (!isOpen) return;
+    lockBodyScroll();
     const handleKeyDown = (e) => {
       if (closeOnEsc && e.key === "Escape") {
         onClose();
       }
     };
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
     window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = originalOverflow;
+      unlockBodyScroll();
     };
   }, [isOpen, closeOnEsc, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        onClick: onClose,
-        className: "fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(drawerVariants({ placement })), children })
-  ] }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: { isOpen, onClose, titleId }, children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 overflow-hidden",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel ? void 0 : titleId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            onClick: onClose,
+            className: "fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(drawerVariants({ placement })), children })
+      ]
+    }
+  ) }) }) });
 }
 var DrawerHeader = React66.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const { onClose } = useDrawer();
+  ({ className, children, id, ...props }, ref) => {
+    const { onClose, titleId } = useDrawer();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
+        id: id || titleId,
         className: cn("flex items-center justify-between p-5 border-b border-[var(--ui-border-subtle)]", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 font-semibold text-base text-[var(--ui-text-primary)]", children }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               onClick: onClose,
               "aria-label": "Close drawer",
-              className: "p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors ml-4",
+              className: "p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors ml-4 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
             }
           )
@@ -3793,40 +4819,57 @@ function Tooltip({
   children,
   placement = "top",
   delayDuration = 200,
-  className
+  className,
+  id: customId
 }) {
+  const generatedId = React66.useId();
+  const tooltipId = customId || `tooltip-${generatedId}`;
   const [isVisible, setIsVisible] = React66.useState(false);
   const [coords, setCoords] = React66.useState({ top: 0, left: 0 });
   const timeoutRef = React66.useRef(null);
   const triggerRef = React66.useRef(null);
+  const calculatePosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      let top = 0;
+      let left = 0;
+      if (placement === "top") {
+        top = rect.top + window.scrollY;
+        left = rect.left + rect.width / 2 + window.scrollX;
+      } else if (placement === "bottom") {
+        top = rect.bottom + window.scrollY;
+        left = rect.left + rect.width / 2 + window.scrollX;
+      } else if (placement === "left") {
+        top = rect.top + rect.height / 2 + window.scrollY;
+        left = rect.left + window.scrollX;
+      } else if (placement === "right") {
+        top = rect.top + rect.height / 2 + window.scrollY;
+        left = rect.right + window.scrollX;
+      }
+      setCoords({ top, left });
+    }
+  };
   const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => {
-      if (triggerRef.current) {
-        const rect = triggerRef.current.getBoundingClientRect();
-        let top = 0;
-        let left = 0;
-        if (placement === "top") {
-          top = rect.top + window.scrollY;
-          left = rect.left + rect.width / 2 + window.scrollX;
-        } else if (placement === "bottom") {
-          top = rect.bottom + window.scrollY;
-          left = rect.left + rect.width / 2 + window.scrollX;
-        } else if (placement === "left") {
-          top = rect.top + rect.height / 2 + window.scrollY;
-          left = rect.left + window.scrollX;
-        } else if (placement === "right") {
-          top = rect.top + rect.height / 2 + window.scrollY;
-          left = rect.right + window.scrollX;
-        }
-        setCoords({ top, left });
-        setIsVisible(true);
-      }
+      calculatePosition();
+      setIsVisible(true);
     }, delayDuration);
   };
   const handleMouseLeave = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setIsVisible(false);
   };
+  React66.useEffect(() => {
+    if (!isVisible) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isVisible]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -3836,6 +4879,7 @@ function Tooltip({
         onMouseLeave: handleMouseLeave,
         onFocus: handleMouseEnter,
         onBlur: handleMouseLeave,
+        "aria-describedby": isVisible ? tooltipId : void 0,
         className: "inline-flex cursor-pointer",
         children
       }
@@ -3843,8 +4887,9 @@ function Tooltip({
     isVisible && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        style: { top: `${coords.top}px`, left: `${coords.left}px`, position: "absolute" },
+        id: tooltipId,
         role: "tooltip",
+        style: { top: `${coords.top}px`, left: `${coords.left}px`, position: "absolute" },
         className: cn(tooltipVariants({ placement }), className),
         children: content
       }
@@ -3881,6 +4926,38 @@ var toastIcons = {
   warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-5 h-5 text-[var(--ui-warning)] flex-shrink-0" }),
   error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-[var(--ui-error)] flex-shrink-0" })
 };
+var Toast = React66__default.default.forwardRef(
+  ({ className, title, description, type = "info", onDismiss, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: cn(toastVariants({ type }), className),
+        ...props,
+        children: [
+          toastIcons[type || "info"],
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-[var(--ui-text-primary)]", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: description })
+          ] }),
+          onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              "aria-label": "Dismiss toast",
+              className: "p-1 rounded text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors cursor-pointer",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
 function ToasterProvider({ children, position = "bottom-right" }) {
   const [toasts, setToasts] = React66.useState([]);
   const dismiss = React66.useCallback((id) => {
@@ -3953,66 +5030,86 @@ var BottomSheet = React66.forwardRef(
     description,
     className,
     showHandle = true,
-    maxHeight = "max-h-[85vh]"
+    maxHeight = "max-h-[85vh]",
+    "aria-label": ariaLabel
   }, ref) => {
-    React66.useRef(null);
+    const generatedId = React66.useId();
+    const titleId = `bottomsheet-title-${generatedId}`;
+    const descId = `bottomsheet-desc-${generatedId}`;
     React66.useEffect(() => {
+      if (!isOpen) return;
+      lockBodyScroll();
       const handleKeyDown = (e) => {
-        if (e.key === "Escape" && isOpen) {
+        if (e.key === "Escape") {
           onClose();
         }
       };
       window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+        unlockBodyScroll();
+      };
     }, [isOpen, onClose]);
     if (!isOpen) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col justify-end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          onClick: onClose,
-          className: "fixed inset-0 bg-black/60 backdrop-blur-md transition-opacity animate-in fade-in duration-300",
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref,
-          className: cn(
-            "relative z-50 w-full max-w-2xl mx-auto rounded-t-[2rem] border-t border-x border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] backdrop-blur-3xl shadow-2xl overflow-hidden flex flex-col transition-transform animate-in slide-in-from-bottom duration-300",
-            maxHeight,
-            className
+    return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex flex-col justify-end",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-describedby": description ? descId : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onClick: onClose,
+              className: "fixed inset-0 bg-black/60 backdrop-blur-md transition-opacity animate-in fade-in duration-300",
+              "aria-hidden": "true"
+            }
           ),
-          children: [
-            showHandle && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                onClick: onClose,
-                className: "w-full py-3 flex items-center justify-center cursor-grab active:cursor-grabbing",
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-1.5 rounded-full bg-[var(--ui-text-muted)]/40 hover:bg-[var(--ui-text-muted)] transition-colors" })
-              }
-            ),
-            (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-3 flex items-center justify-between border-b border-[var(--ui-border-subtle)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold tracking-tight text-[var(--ui-text-primary)]", children: title }),
-                description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: description })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onClose,
-                  className: "p-1.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 overflow-y-auto flex-1 space-y-4", children })
-          ]
-        }
-      )
-    ] }) }) });
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref,
+              className: cn(
+                "relative z-50 w-full max-w-2xl mx-auto rounded-t-[2rem] border-t border-x border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] backdrop-blur-3xl shadow-2xl overflow-hidden flex flex-col transition-transform animate-in slide-in-from-bottom duration-300",
+                maxHeight,
+                className
+              ),
+              children: [
+                showHandle && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    onClick: onClose,
+                    className: "w-full py-3 flex items-center justify-center cursor-grab active:cursor-grabbing",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-1.5 rounded-full bg-[var(--ui-text-muted)]/40 hover:bg-[var(--ui-text-muted)] transition-colors" })
+                  }
+                ),
+                (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-3 flex items-center justify-between border-b border-[var(--ui-border-subtle)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { id: titleId, className: "text-base font-bold tracking-tight text-[var(--ui-text-primary)]", children: title }),
+                    description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descId, className: "text-xs text-[var(--ui-text-muted)]", children: description })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      "aria-label": "Close sheet",
+                      className: "p-1.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 overflow-y-auto flex-1 space-y-4", children })
+              ]
+            }
+          )
+        ]
+      }
+    ) }) });
   }
 );
 BottomSheet.displayName = "BottomSheet";
@@ -4033,14 +5130,21 @@ var ContextMenuItem = ({
     "div",
     {
       role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
       "aria-disabled": disabled,
       onClick: () => {
         if (!disabled) onSelect?.();
       },
+      onKeyDown: (e) => {
+        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onSelect?.();
+        }
+      },
       className: cn(
-        "flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-medium cursor-pointer transition-colors select-none",
+        "flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-medium cursor-pointer transition-colors select-none focus:outline-none focus:bg-[var(--ui-bg-tertiary)]",
         disabled && "opacity-40 cursor-not-allowed pointer-events-none",
-        destructive ? "text-rose-500 hover:bg-rose-500/10" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]",
+        destructive ? "text-rose-500 hover:bg-rose-500/10 focus:bg-rose-500/10" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]",
         className
       ),
       ...props,
@@ -4068,20 +5172,47 @@ var ContextMenu = React66.forwardRef(
       setIsOpen(true);
     };
     React66.useEffect(() => {
+      if (!isOpen) return;
+      const timer = setTimeout(() => {
+        const firstItem = menuRef.current?.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
+        firstItem?.focus();
+      }, 10);
       const handleClickOutside = (e) => {
         if (menuRef.current && !menuRef.current.contains(e.target)) {
           setIsOpen(false);
         }
       };
       const handleKeyDown = (e) => {
-        if (e.key === "Escape") setIsOpen(false);
+        if (!menuRef.current) return;
+        const items = Array.from(
+          menuRef.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
+        );
+        if (items.length === 0) return;
+        const currentIndex = items.indexOf(document.activeElement);
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+          items[nextIndex]?.focus();
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          const prevIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+          items[prevIndex]?.focus();
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          setIsOpen(false);
+        }
       };
-      if (isOpen) {
-        window.addEventListener("click", handleClickOutside);
-        window.addEventListener("contextmenu", handleClickOutside);
-        window.addEventListener("keydown", handleKeyDown);
-      }
+      window.addEventListener("click", handleClickOutside);
+      window.addEventListener("contextmenu", handleClickOutside);
+      window.addEventListener("keydown", handleKeyDown);
       return () => {
+        clearTimeout(timer);
         window.removeEventListener("click", handleClickOutside);
         window.removeEventListener("contextmenu", handleClickOutside);
         window.removeEventListener("keydown", handleKeyDown);
@@ -4093,9 +5224,11 @@ var ContextMenu = React66.forwardRef(
         "div",
         {
           ref: menuRef,
+          role: "menu",
+          tabIndex: -1,
           style: { top: `${position.y}px`, left: `${position.x}px` },
           onClick: () => setIsOpen(false),
-          className: "fixed z-50 min-w-48 p-1.5 rounded-2xl bg-[var(--ui-bg-surface)]/90 backdrop-blur-3xl border border-[var(--ui-border-default)] shadow-2xl space-y-0.5 animate-in fade-in zoom-in-95 duration-150",
+          className: "fixed z-50 min-w-48 p-1.5 rounded-2xl bg-[var(--ui-bg-surface)]/90 backdrop-blur-3xl border border-[var(--ui-border-default)] shadow-2xl space-y-0.5 animate-in fade-in zoom-in-95 duration-150 focus:outline-none",
           children: menuContent
         }
       ) })
@@ -4189,29 +5322,114 @@ function useTabs() {
   return context;
 }
 var Tabs = React66.forwardRef(
-  ({ defaultValue = "", value: controlledValue, onValueChange, variant = "pills", className, children, ...props }, ref) => {
+  ({
+    defaultValue = "",
+    value: controlledValue,
+    onValueChange,
+    variant = "pills",
+    orientation = "horizontal",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const baseId = React66.useId();
     const [selectedTab, setSelectedTab] = React66.useState(defaultValue);
     const activeTab = controlledValue !== void 0 ? controlledValue : selectedTab;
+    const tabRegistryRef = React66.useRef(
+      /* @__PURE__ */ new Map()
+    );
+    const registerTab = (value, disabled, element) => {
+      tabRegistryRef.current.set(value, { disabled, element });
+    };
+    const unregisterTab = (value) => {
+      tabRegistryRef.current.delete(value);
+    };
     const handleTabChange = (val) => {
-      setSelectedTab(val);
+      if (!controlledValue) {
+        setSelectedTab(val);
+      }
       onValueChange?.(val);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange, variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("w-full flex flex-col space-y-4", className), ...props, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TabsContext.Provider,
+      {
+        value: {
+          activeTab,
+          setActiveTab: handleTabChange,
+          variant,
+          orientation,
+          baseId,
+          registerTab,
+          unregisterTab
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            className: cn(
+              "w-full flex space-y-4",
+              orientation === "vertical" ? "flex-row space-y-0 space-x-6" : "flex-col",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    );
   }
 );
 Tabs.displayName = "Tabs";
 var TabsList = React66.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const { variant } = useTabs();
+  ({ className, children, onKeyDown, ...props }, ref) => {
+    const { variant, orientation, activeTab, setActiveTab } = useTabs();
+    const listRef = React66.useRef(null);
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      const tabs = Array.from(
+        listRef.current?.querySelectorAll('[role="tab"]:not([disabled])') || []
+      );
+      if (tabs.length === 0) return;
+      const currentIndex = tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
+      let nextIndex = -1;
+      const isPrev = orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp";
+      const isNext = orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown";
+      if (isNext) {
+        e.preventDefault();
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % tabs.length;
+      } else if (isPrev) {
+        e.preventDefault();
+        nextIndex = currentIndex === -1 ? tabs.length - 1 : (currentIndex - 1 + tabs.length) % tabs.length;
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        nextIndex = 0;
+      } else if (e.key === "End") {
+        e.preventDefault();
+        nextIndex = tabs.length - 1;
+      }
+      if (nextIndex !== -1 && tabs[nextIndex]) {
+        const nextTab = tabs[nextIndex];
+        nextTab.focus();
+        nextTab.click();
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        ref,
+        ref: (node) => {
+          listRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
         role: "tablist",
+        "aria-orientation": orientation,
+        onKeyDown: handleKeyDown,
         className: cn(
-          "inline-flex items-center",
+          "inline-flex",
+          orientation === "vertical" ? "flex-col items-stretch gap-1" : "items-center",
           variant === "pills" && "p-1 rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] gap-1",
-          variant === "line" && "border-b border-[var(--ui-border-default)] gap-6",
+          variant === "line" && (orientation === "vertical" ? "border-r border-[var(--ui-border-default)] pr-2" : "border-b border-[var(--ui-border-default)] gap-6"),
           variant === "enclosed" && "border-b border-[var(--ui-border-default)] gap-1",
           className
         ),
@@ -4223,17 +5441,35 @@ var TabsList = React66.forwardRef(
 );
 TabsList.displayName = "TabsList";
 var TabsTrigger = React66.forwardRef(
-  ({ className, value, children, ...props }, ref) => {
-    const { activeTab, setActiveTab, variant } = useTabs();
+  ({ className, value, disabled = false, children, id, onClick, ...props }, ref) => {
+    const { activeTab, setActiveTab, variant, baseId, registerTab, unregisterTab } = useTabs();
     const isActive = activeTab === value;
+    const triggerId = id || `tab-${baseId}-${value}`;
+    const panelId = `panel-${baseId}-${value}`;
+    const innerRef = React66.useRef(null);
+    React66.useEffect(() => {
+      registerTab(value, Boolean(disabled), innerRef.current);
+      return () => unregisterTab(value);
+    }, [value, disabled, registerTab, unregisterTab]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        ref,
+        ref: (node) => {
+          innerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id: triggerId,
         role: "tab",
         type: "button",
+        disabled,
         "aria-selected": isActive,
-        onClick: () => setActiveTab(value),
+        "aria-controls": panelId,
+        tabIndex: isActive ? 0 : -1,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!disabled) setActiveTab(value);
+        },
         className: cn(
           "inline-flex items-center justify-center font-medium text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer",
           variant === "pills" && "px-3.5 py-1.5 rounded-[var(--ui-radius-md)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)]",
@@ -4252,16 +5488,24 @@ var TabsTrigger = React66.forwardRef(
 );
 TabsTrigger.displayName = "TabsTrigger";
 var TabsContent = React66.forwardRef(
-  ({ className, value, children, ...props }, ref) => {
-    const { activeTab } = useTabs();
-    if (activeTab !== value) return null;
+  ({ className, value, children, id, ...props }, ref) => {
+    const { activeTab, baseId } = useTabs();
+    const isActive = activeTab === value;
+    if (!isActive) return null;
+    const panelId = id || `panel-${baseId}-${value}`;
+    const triggerId = `tab-${baseId}-${value}`;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
+        id: panelId,
         role: "tabpanel",
+        "aria-labelledby": triggerId,
         tabIndex: 0,
-        className: cn("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] animate-in fade-in duration-150", className),
+        className: cn(
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] animate-in fade-in duration-150",
+          className
+        ),
         ...props,
         children
       }
@@ -4489,12 +5733,13 @@ function useDropdown() {
 function DropdownMenu({ children }) {
   const [isOpen, setIsOpen] = React66.useState(false);
   const [triggerRect, setTriggerRect] = React66.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: { isOpen, setIsOpen, triggerRect, setTriggerRect }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative inline-block text-left", children }) });
+  const triggerRef = React66.useRef(null);
+  const menuId = React66.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: { isOpen, setIsOpen, triggerRect, setTriggerRect, triggerRef, menuId }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative inline-block text-left", children }) });
 }
 var DropdownMenuTrigger = React66.forwardRef(
-  ({ children, onClick, ...props }, ref) => {
-    const { isOpen, setIsOpen, setTriggerRect } = useDropdown();
-    const triggerRef = React66.useRef(null);
+  ({ children, onClick, onKeyDown, ...props }, ref) => {
+    const { isOpen, setIsOpen, setTriggerRect, triggerRef, menuId } = useDropdown();
     const handleClick = (e) => {
       if (triggerRef.current) {
         setTriggerRect(triggerRef.current.getBoundingClientRect());
@@ -4502,39 +5747,110 @@ var DropdownMenuTrigger = React66.forwardRef(
       setIsOpen(!isOpen);
       onClick?.(e);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleClick, className: "inline-flex cursor-pointer", ...props, children });
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (triggerRef.current) {
+          setTriggerRect(triggerRef.current.getBoundingClientRect());
+        }
+        setIsOpen(true);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: 0,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? `menu-${menuId}` : void 0,
+        className: "inline-flex cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] rounded-[var(--ui-radius-sm)]",
+        ...props,
+        children
+      }
+    );
   }
 );
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 var DropdownMenuContent = React66.forwardRef(
   ({ className, align = "start", children, ...props }, ref) => {
-    const { isOpen, setIsOpen, triggerRect } = useDropdown();
+    const { isOpen, setIsOpen, triggerRect, triggerRef, menuId } = useDropdown();
     const menuRef = React66.useRef(null);
     React66.useEffect(() => {
+      if (!isOpen) return;
+      const timer = setTimeout(() => {
+        const firstItem = menuRef.current?.querySelector('[role="menuitem"]:not([disabled])');
+        firstItem?.focus();
+      }, 10);
       const handleOutside = (e) => {
-        if (menuRef.current && !menuRef.current.contains(e.target)) {
+        if (menuRef.current && !menuRef.current.contains(e.target) && !triggerRef.current?.contains(e.target)) {
           setIsOpen(false);
         }
       };
-      if (isOpen) {
-        document.addEventListener("mousedown", handleOutside);
-      }
-      return () => document.removeEventListener("mousedown", handleOutside);
-    }, [isOpen, setIsOpen]);
+      const handleKeyDown = (e) => {
+        if (!menuRef.current) return;
+        const items = Array.from(
+          menuRef.current.querySelectorAll('[role="menuitem"]:not([disabled])')
+        );
+        if (items.length === 0) return;
+        const currentIndex = items.indexOf(document.activeElement);
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+          items[nextIndex]?.focus();
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          const prevIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+          items[prevIndex]?.focus();
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          setIsOpen(false);
+          triggerRef.current?.focus();
+        }
+      };
+      document.addEventListener("mousedown", handleOutside);
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        clearTimeout(timer);
+        document.removeEventListener("mousedown", handleOutside);
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [isOpen, setIsOpen, triggerRef]);
     if (!isOpen || !triggerRect) return null;
     const top = triggerRect.bottom + window.scrollY + 6;
     const left = align === "end" ? triggerRect.right + window.scrollX : triggerRect.left + window.scrollX;
     return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        ref: menuRef,
+        ref: (node) => {
+          menuRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id: `menu-${menuId}`,
+        role: "menu",
+        tabIndex: -1,
         style: {
           position: "absolute",
           top: `${top}px`,
           left: `${left}px`
         },
         className: cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] p-1 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95",
+          "z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] p-1 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95 focus:outline-none",
           align === "end" && "-translate-x-full",
           className
         ),
@@ -4552,14 +5868,15 @@ var DropdownMenuItem = React66.forwardRef(
       "button",
       {
         ref,
+        role: "menuitem",
         type: "button",
         onClick: (e) => {
           onClick?.(e);
           setIsOpen(false);
         },
         className: cn(
-          "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-[var(--ui-radius-sm)] px-2.5 py-1.5 text-xs font-medium outline-none transition-colors hover:bg-[var(--ui-bg-tertiary)] disabled:pointer-events-none disabled:opacity-50 text-left",
-          destructive && "text-[var(--ui-error)] hover:bg-[var(--ui-error-subtle)]",
+          "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-[var(--ui-radius-sm)] px-2.5 py-1.5 text-xs font-medium outline-none transition-colors hover:bg-[var(--ui-bg-tertiary)] focus:bg-[var(--ui-bg-tertiary)] disabled:pointer-events-none disabled:opacity-50 text-left",
+          destructive && "text-[var(--ui-error)] hover:bg-[var(--ui-error-subtle)] focus:bg-[var(--ui-error-subtle)]",
           className
         ),
         ...props,
@@ -4575,7 +5892,7 @@ var DropdownMenuItem = React66.forwardRef(
 DropdownMenuItem.displayName = "DropdownMenuItem";
 var DropdownMenuSeparator = React66.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("-mx-1 my-1 h-px bg-[var(--ui-border-subtle)]", className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "separator", className: cn("-mx-1 my-1 h-px bg-[var(--ui-border-subtle)]", className), ...props });
   }
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
@@ -5110,79 +6427,183 @@ function DataTablePro({
   searchable = true,
   searchPlaceholder = "Search all records...",
   selectable = true,
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys = [],
   onSelectionChange,
   pageSize: initialPageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
   title,
   description,
   actions,
-  className
+  className,
+  loading = false,
+  // Multi-column sorting
+  multiSort = true,
+  sorting: controlledSorting,
+  defaultSorting = [],
+  onSortingChange,
+  // Server-side / manual mode props
+  manualPagination = false,
+  manualSorting = false,
+  manualFiltering = false,
+  pageIndex: controlledPageIndex,
+  pageCount: controlledPageCount,
+  totalCount: controlledTotalCount,
+  onPaginationChange,
+  searchQuery: controlledSearchQuery,
+  onSearchChange,
+  onSelectAllDataset,
+  emptyText = "No matching records found."
 }) {
-  const [search, setSearch] = React66.useState("");
-  const [sortKey, setSortKey] = React66.useState(null);
-  const [sortDirection, setSortDirection] = React66.useState("asc");
-  const [currentPage, setCurrentPage] = React66.useState(1);
-  const [pageSize, setPageSize] = React66.useState(initialPageSize);
-  const [selectedKeys, setSelectedKeys] = React66.useState([]);
+  const [internalSearch, setInternalSearch] = React66.useState("");
+  const search = controlledSearchQuery !== void 0 ? controlledSearchQuery : internalSearch;
+  const [internalSorting, setInternalSorting] = React66.useState(defaultSorting);
+  const currentSorting = controlledSorting !== void 0 ? controlledSorting ?? [] : internalSorting;
+  const [internalCurrentPage, setInternalCurrentPage] = React66.useState(1);
+  const currentPage = controlledPageIndex !== void 0 ? controlledPageIndex : internalCurrentPage;
+  const [internalPageSize, setInternalPageSize] = React66.useState(initialPageSize);
+  const pageSize = internalPageSize;
+  const [internalSelectedKeys, setInternalSelectedKeys] = React66.useState(defaultSelectedKeys);
+  const isSelectedControlled = controlledSelectedKeys !== void 0;
+  const selectedKeys = isSelectedControlled ? controlledSelectedKeys : internalSelectedKeys;
+  const handleSelectionUpdate = (nextKeys) => {
+    if (!isSelectedControlled) {
+      setInternalSelectedKeys(nextKeys);
+    }
+    onSelectionChange?.(nextKeys);
+  };
   const filteredData = React66.useMemo(() => {
-    if (!search.trim()) return data;
+    if (manualFiltering || !search.trim()) return data;
     const q = search.toLowerCase();
     return data.filter((row) => {
-      return Object.values(row).some((val) => {
+      return columns.some((col) => {
+        const val = col.accessor ? col.accessor(row) : row[col.key];
         if (val === null || val === void 0) return false;
         return String(val).toLowerCase().includes(q);
       });
     });
-  }, [data, search]);
+  }, [data, search, columns, manualFiltering]);
   const sortedData = React66.useMemo(() => {
-    if (!sortKey) return filteredData;
-    const col = columns.find((c) => c.key === sortKey);
+    if (manualSorting || currentSorting.length === 0) return filteredData;
     return [...filteredData].sort((a, b) => {
-      const valA = col?.accessor ? col.accessor(a) : a[sortKey];
-      const valB = col?.accessor ? col.accessor(b) : b[sortKey];
-      if (valA === valB) return 0;
-      if (valA === null || valA === void 0) return 1;
-      if (valB === null || valB === void 0) return -1;
-      const comp = valA < valB ? -1 : 1;
-      return sortDirection === "asc" ? comp : -comp;
+      for (const { key, direction } of currentSorting) {
+        const col = columns.find((c) => c.key === key);
+        let comp = 0;
+        if (col?.sortComparator) {
+          comp = col.sortComparator(a, b);
+        } else {
+          const valA = col?.accessor ? col.accessor(a) : a[key];
+          const valB = col?.accessor ? col.accessor(b) : b[key];
+          if (valA === valB) continue;
+          if (valA === null || valA === void 0) return 1;
+          if (valB === null || valB === void 0) return -1;
+          comp = valA < valB ? -1 : 1;
+        }
+        if (comp !== 0) {
+          return direction === "asc" ? comp : -comp;
+        }
+      }
+      return 0;
     });
-  }, [filteredData, sortKey, sortDirection, columns]);
-  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  }, [filteredData, currentSorting, columns, manualSorting]);
+  const totalItems = controlledTotalCount !== void 0 ? controlledTotalCount : sortedData.length;
+  const totalPages = controlledPageCount !== void 0 ? Math.max(1, controlledPageCount) : Math.max(1, Math.ceil(totalItems / pageSize));
+  React66.useEffect(() => {
+    if (!manualPagination && currentPage > totalPages && totalPages > 0) {
+      setInternalCurrentPage(totalPages);
+      onPaginationChange?.(totalPages, pageSize);
+    }
+  }, [totalPages, currentPage, manualPagination, pageSize, onPaginationChange]);
   const paginatedData = React66.useMemo(() => {
+    if (manualPagination) return data;
     const start = (currentPage - 1) * pageSize;
     return sortedData.slice(start, start + pageSize);
-  }, [sortedData, currentPage, pageSize]);
-  const handleSort = (key) => {
-    if (sortKey === key) {
-      if (sortDirection === "asc") {
-        setSortDirection("desc");
+  }, [data, sortedData, currentPage, pageSize, manualPagination]);
+  const handleSort = (key, e) => {
+    const isShift = e?.shiftKey || false;
+    let nextSorting = [...currentSorting];
+    const existingIdx = nextSorting.findIndex((s) => s.key === key);
+    if (isShift && multiSort) {
+      if (existingIdx >= 0) {
+        if (nextSorting[existingIdx].direction === "asc") {
+          nextSorting[existingIdx] = { key, direction: "desc" };
+        } else {
+          nextSorting.splice(existingIdx, 1);
+        }
       } else {
-        setSortKey(null);
-        setSortDirection("asc");
+        nextSorting.push({ key, direction: "asc" });
       }
     } else {
-      setSortKey(key);
-      setSortDirection("asc");
+      if (existingIdx >= 0 && nextSorting.length === 1) {
+        if (nextSorting[0].direction === "asc") {
+          nextSorting = [{ key, direction: "desc" }];
+        } else {
+          nextSorting = [];
+        }
+      } else {
+        nextSorting = [{ key, direction: "asc" }];
+      }
+    }
+    if (controlledSorting === void 0) {
+      setInternalSorting(nextSorting);
     }
+    onSortingChange?.(nextSorting);
   };
-  const toggleSelectAll = () => {
-    if (selectedKeys.length === paginatedData.length) {
-      setSelectedKeys([]);
-      onSelectionChange?.([]);
+  const handlePageChange = (newPage) => {
+    const clamped = Math.max(1, Math.min(totalPages, newPage));
+    if (controlledPageIndex === void 0) {
+      setInternalCurrentPage(clamped);
+    }
+    onPaginationChange?.(clamped, pageSize);
+  };
+  const handlePageSizeChange = (newSize) => {
+    setInternalPageSize(newSize);
+    if (controlledPageIndex === void 0) {
+      setInternalCurrentPage(1);
+    }
+    onPaginationChange?.(1, newSize);
+  };
+  const handleSearchChange = (query) => {
+    if (controlledSearchQuery === void 0) {
+      setInternalSearch(query);
+      if (controlledPageIndex === void 0) {
+        setInternalCurrentPage(1);
+      }
+    }
+    onSearchChange?.(query);
+  };
+  const currentPageKeys = React66.useMemo(() => paginatedData.map(keyExtractor), [paginatedData, keyExtractor]);
+  const isAllCurrentPageSelected = currentPageKeys.length > 0 && currentPageKeys.every((k) => selectedKeys.includes(k));
+  const isSomeCurrentPageSelected = currentPageKeys.some((k) => selectedKeys.includes(k)) && !isAllCurrentPageSelected;
+  const toggleSelectAllCurrentPage = () => {
+    if (isAllCurrentPageSelected) {
+      const next = selectedKeys.filter((k) => !currentPageKeys.includes(k));
+      handleSelectionUpdate(next);
     } else {
-      const allKeys = paginatedData.map(keyExtractor);
-      setSelectedKeys(allKeys);
-      onSelectionChange?.(allKeys);
+      const combined = Array.from(/* @__PURE__ */ new Set([...selectedKeys, ...currentPageKeys]));
+      handleSelectionUpdate(combined);
     }
   };
   const toggleSelectRow = (key) => {
     const next = selectedKeys.includes(key) ? selectedKeys.filter((k) => k !== key) : [...selectedKeys, key];
-    setSelectedKeys(next);
-    onSelectionChange?.(next);
+    handleSelectionUpdate(next);
+  };
+  const canSelectAllDataset = !manualPagination || typeof onSelectAllDataset === "function";
+  const selectAllDataset = () => {
+    if (manualPagination) {
+      onSelectAllDataset?.();
+      return;
+    }
+    const allKeys = sortedData.map(keyExtractor);
+    handleSelectionUpdate(allKeys);
+  };
+  const clearSelection = () => {
+    handleSelectionUpdate([]);
   };
   const exportCSV = () => {
+    const exportRows = manualPagination ? data : sortedData;
     const headers = columns.map((c) => typeof c.header === "string" ? c.header : c.key);
-    const rows = sortedData.map(
+    const rows = exportRows.map(
       (row) => columns.map((c) => {
         const val = c.accessor ? c.accessor(row) : row[c.key];
         return `"${String(val ?? "").replace(/"/g, '""')}"`;
@@ -5197,7 +6618,6 @@ function DataTablePro({
     link.click();
     document.body.removeChild(link);
   };
-  const isAllSelected = paginatedData.length > 0 && selectedKeys.length === paginatedData.length;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full space-y-4", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: [
       (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -5213,10 +6633,7 @@ function DataTablePro({
               type: "text",
               placeholder: searchPlaceholder,
               value: search,
-              onChange: (e) => {
-                setSearch(e.target.value);
-                setCurrentPage(1);
-              },
+              onChange: (e) => handleSearchChange(e.target.value),
               className: "w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/40 text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-all shadow-inner"
             }
           )
@@ -5225,83 +6642,110 @@ function DataTablePro({
         actions
       ] })
     ] }),
-    selectedKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 rounded-xl bg-[var(--ui-primary)]/15 border border-[var(--ui-primary)]/30 flex items-center justify-between animate-in fade-in duration-200", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 text-xs font-semibold text-[var(--ui-primary)]", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        "Selected ",
-        selectedKeys.length,
-        " of ",
-        sortedData.length,
-        " records"
-      ] }) }),
+    selectedKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 rounded-xl bg-[var(--ui-primary)]/15 border border-[var(--ui-primary)]/30 flex flex-wrap items-center justify-between gap-2 animate-in fade-in duration-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs font-semibold text-[var(--ui-primary)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Selected ",
+          selectedKeys.length,
+          " records"
+        ] }),
+        canSelectAllDataset && selectedKeys.length < totalItems && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: selectAllDataset,
+            className: "underline hover:text-[var(--ui-primary)]/80 cursor-pointer font-bold ml-1",
+            children: [
+              "Select all ",
+              totalItems,
+              " records"
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
           size: "xs",
           variant: "ghost",
           className: "text-xs text-rose-500 hover:text-rose-600 hover:bg-rose-500/10",
-          onClick: () => {
-            setSelectedKeys([]);
-            onSelectionChange?.([]);
-          },
+          onClick: clearSelection,
           children: "Clear Selection"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-x-auto rounded-2xl border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
-        selectable && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-x-auto rounded-2xl border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] shadow-sm", children: [
+      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-20 bg-[var(--ui-bg-surface)]/60 backdrop-blur-xs flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-6 h-6 animate-spin text-[var(--ui-primary)]" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              checked: isAllCurrentPageSelected,
+              indeterminate: isSomeCurrentPageSelected,
+              onCheckedChange: toggleSelectAllCurrentPage,
+              "aria-label": "Select all on page"
+            }
+          ) }),
+          columns.map((col) => {
+            const sortIndex = currentSorting.findIndex((s) => s.key === col.key);
+            const sortRule = sortIndex >= 0 ? currentSorting[sortIndex] : null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TableHead,
+              {
+                style: { width: col.width },
+                onClick: (e) => col.sortable !== false && handleSort(col.key, e),
+                className: cn(
+                  col.sortable !== false && "cursor-pointer select-none hover:text-[var(--ui-text-primary)] transition-colors"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.header }),
+                  col.sortable !== false && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 text-[var(--ui-text-muted)]", children: [
+                    sortRule ? sortRule.direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-3 h-3 opacity-40" }),
+                    currentSorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono font-bold text-[var(--ui-primary)]", children: sortIndex + 1 })
+                  ] })
+                ] })
+              },
+              col.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          TableCell,
           {
-            type: "checkbox",
-            checked: isAllSelected,
-            onChange: toggleSelectAll,
-            className: "rounded border-[var(--ui-border-default)] text-[var(--ui-primary)] focus:ring-[var(--ui-primary)] cursor-pointer"
+            colSpan: columns.length + (selectable ? 1 : 0),
+            className: "h-32 text-center text-xs text-[var(--ui-text-muted)]",
+            children: emptyText
           }
-        ) }),
-        columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-          TableHead,
-          {
-            style: { width: col.width },
-            onClick: () => col.sortable !== false && handleSort(col.key),
-            className: cn(
-              col.sortable !== false && "cursor-pointer select-none hover:text-[var(--ui-text-primary)] transition-colors"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.header }),
-              col.sortable !== false && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ui-text-muted)]", children: sortKey === col.key ? sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-3 h-3 opacity-40" }) })
-            ] })
-          },
-          col.key
-        ))
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length + (selectable ? 1 : 0), className: "h-32 text-center text-xs text-[var(--ui-text-muted)]", children: "No matching records found." }) }) : paginatedData.map((row, rowIdx) => {
-        const key = keyExtractor(row);
-        const isSelected = selectedKeys.includes(key);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          TableRow,
-          {
-            "data-state": isSelected ? "selected" : void 0,
-            className: cn(isSelected && "bg-[var(--ui-primary)]/10"),
-            children: [
-              selectable && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: isSelected,
-                  onChange: () => toggleSelectRow(key),
-                  className: "rounded border-[var(--ui-border-default)] text-[var(--ui-primary)] focus:ring-[var(--ui-primary)] cursor-pointer"
-                }
-              ) }),
-              columns.map((col) => {
-                const cellContent = col.render ? col.render(row, rowIdx) : col.accessor ? col.accessor(row) : row[col.key];
-                return /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: cellContent }, col.key);
-              })
-            ]
-          },
-          key
-        );
-      }) })
-    ] }) }),
+        ) }) : paginatedData.map((row, rowIdx) => {
+          const key = keyExtractor(row);
+          const isSelected = selectedKeys.includes(key);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            TableRow,
+            {
+              "data-state": isSelected ? "selected" : void 0,
+              className: cn(isSelected && "bg-[var(--ui-primary)]/10"),
+              children: [
+                selectable && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: () => toggleSelectRow(key),
+                    "aria-label": `Select row ${key}`
+                  }
+                ) }),
+                columns.map((col) => {
+                  const val = col.accessor ? col.accessor(row) : row[col.key];
+                  const cellContent = col.render ? col.render(row, rowIdx, val) : val;
+                  return /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: cellContent }, col.key);
+                })
+              ]
+            },
+            key
+          );
+        }) })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-1 text-xs text-[var(--ui-text-muted)] font-mono", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page:" }),
@@ -5309,21 +6753,18 @@ function DataTablePro({
           "select",
           {
             value: pageSize,
-            onChange: (e) => {
-              setPageSize(Number(e.target.value));
-              setCurrentPage(1);
-            },
+            onChange: (e) => handlePageSizeChange(Number(e.target.value)),
             className: "px-2 py-1 rounded-lg bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] text-[var(--ui-text-primary)] font-mono text-xs focus:outline-none",
             children: pageSizeOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--ui-text-muted)]", children: [
           "Showing ",
-          Math.min((currentPage - 1) * pageSize + 1, sortedData.length),
+          totalItems === 0 ? 0 : Math.min((currentPage - 1) * pageSize + 1, totalItems),
           "\u2013",
-          Math.min(currentPage * pageSize, sortedData.length),
+          Math.min(currentPage * pageSize, totalItems),
           " of ",
-          sortedData.length
+          totalItems
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
@@ -5332,8 +6773,9 @@ function DataTablePro({
           {
             size: "xs",
             variant: "outline",
-            disabled: currentPage === 1,
-            onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+            disabled: currentPage <= 1 || loading,
+            onClick: () => handlePageChange(currentPage - 1),
+            "aria-label": "Previous page",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-3.5 h-3.5" })
           }
         ),
@@ -5347,8 +6789,9 @@ function DataTablePro({
           {
             size: "xs",
             variant: "outline",
-            disabled: currentPage === totalPages,
-            onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+            disabled: currentPage >= totalPages || loading,
+            onClick: () => handlePageChange(currentPage + 1),
+            "aria-label": "Next page",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3.5 h-3.5" })
           }
         )
@@ -5356,100 +6799,218 @@ function DataTablePro({
     ] })
   ] });
 }
-function TreeNode({ item, level, selectedId, onSelect }) {
-  const [isExpanded, setIsExpanded] = React66.useState(Boolean(item.defaultExpanded));
-  const hasChildren = Boolean(item.children && item.children.length > 0);
-  const isSelected = selectedId === item.id;
-  const handleClick = (e) => {
-    e.stopPropagation();
-    if (hasChildren) {
-      setIsExpanded(!isExpanded);
-    }
-    onSelect?.(item);
-  };
-  const getIcon = () => {
-    if (item.icon) return item.icon;
-    if (hasChildren) {
-      return isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "w-4 h-4 text-amber-500 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "w-4 h-4 text-amber-500 shrink-0" });
-    }
-    if (item.label.endsWith(".tsx") || item.label.endsWith(".ts") || item.label.endsWith(".js")) {
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileCode, { className: "w-4 h-4 text-blue-500 shrink-0" });
-    }
-    if (item.label.endsWith(".png") || item.label.endsWith(".jpg") || item.label.endsWith(".svg")) {
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "w-4 h-4 text-purple-500 shrink-0" });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "select-none text-xs", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        onClick: handleClick,
-        style: { paddingLeft: `${level * 16 + 8}px` },
-        className: cn(
-          "flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group",
-          isSelected ? "bg-[var(--ui-primary)] text-white font-semibold shadow-xs" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
-            hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("p-0.5 rounded transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: cn("w-3 h-3", isSelected ? "text-white" : "text-[var(--ui-text-muted)]") }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4" }),
-            getIcon(),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
-          ] }),
-          item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
+var TreeView = React66.forwardRef(
+  ({
+    data,
+    selectedId,
+    defaultExpandedIds,
+    onSelect,
+    onExpandedChange,
+    className,
+    "aria-label": ariaLabel = "Tree View"
+  }, ref) => {
+    const initialExpanded = React66.useMemo(() => {
+      if (defaultExpandedIds) return new Set(defaultExpandedIds);
+      const set = /* @__PURE__ */ new Set();
+      const collect = (items) => {
+        for (const it of items) {
+          if (it.defaultExpanded) set.add(it.id);
+          if (it.children) collect(it.children);
+        }
+      };
+      collect(data);
+      return set;
+    }, [data, defaultExpandedIds]);
+    const [expandedSet, setExpandedSet] = React66.useState(initialExpanded);
+    const [focusedId, setFocusedId] = React66.useState(null);
+    const itemRefs = React66.useRef(/* @__PURE__ */ new Map());
+    const focusNode = (id) => {
+      setFocusedId(id);
+      const el = itemRefs.current.get(id);
+      if (el) {
+        el.focus();
+      }
+    };
+    const toggleExpand = (id) => {
+      setExpandedSet((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        onExpandedChange?.(Array.from(next));
+        return next;
+      });
+    };
+    const expandNode = (id) => {
+      if (!expandedSet.has(id)) {
+        setExpandedSet((prev) => {
+          const next = new Set(prev).add(id);
+          onExpandedChange?.(Array.from(next));
+          return next;
+        });
+      }
+    };
+    const collapseNode = (id) => {
+      if (expandedSet.has(id)) {
+        setExpandedSet((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          onExpandedChange?.(Array.from(next));
+          return next;
+        });
+      }
+    };
+    const visibleList = React66.useMemo(() => {
+      const list = [];
+      const traverse = (items, level, parentId) => {
+        for (const item of items) {
+          const hasChildren = Boolean(item.children && item.children.length > 0);
+          list.push({ item, level, parentId, hasChildren });
+          if (hasChildren && expandedSet.has(item.id)) {
+            traverse(item.children, level + 1, item.id);
+          }
+        }
+      };
+      traverse(data, 0, null);
+      return list;
+    }, [data, expandedSet]);
+    const handleKeyDown = (e) => {
+      if (visibleList.length === 0) return;
+      const currentIdx = focusedId ? visibleList.findIndex((f) => f.item.id === focusedId) : 0;
+      const currentFlat = visibleList[currentIdx] || visibleList[0];
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const nextIdx = Math.min(visibleList.length - 1, currentIdx + 1);
+        focusNode(visibleList[nextIdx].item.id);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prevIdx = Math.max(0, currentIdx - 1);
+        focusNode(visibleList[prevIdx].item.id);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (currentFlat.hasChildren) {
+          if (!expandedSet.has(currentFlat.item.id)) {
+            expandNode(currentFlat.item.id);
+          } else {
+            const nextIdx = currentIdx + 1;
+            if (nextIdx < visibleList.length) {
+              focusNode(visibleList[nextIdx].item.id);
+            }
+          }
+        }
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (currentFlat.hasChildren && expandedSet.has(currentFlat.item.id)) {
+          collapseNode(currentFlat.item.id);
+        } else if (currentFlat.parentId) {
+          focusNode(currentFlat.parentId);
+        }
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        focusNode(visibleList[0].item.id);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        focusNode(visibleList[visibleList.length - 1].item.id);
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (currentFlat) {
+          if (currentFlat.hasChildren) {
+            toggleExpand(currentFlat.item.id);
+          }
+          onSelect?.(currentFlat.item);
+        }
+      }
+    };
+    const getIcon = (item, hasChildren, isExpanded) => {
+      if (item.icon) return item.icon;
+      if (hasChildren) {
+        return isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "w-4 h-4 text-amber-500 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "w-4 h-4 text-amber-500 shrink-0" });
+      }
+      if (item.label.endsWith(".tsx") || item.label.endsWith(".ts") || item.label.endsWith(".js")) {
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileCode, { className: "w-4 h-4 text-blue-500 shrink-0" });
+      }
+      if (item.label.endsWith(".png") || item.label.endsWith(".jpg") || item.label.endsWith(".svg")) {
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "w-4 h-4 text-purple-500 shrink-0" });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" });
+    };
+    const renderNodes = (items, level) => {
+      return items.map((item, index) => {
+        const hasChildren = Boolean(item.children && item.children.length > 0);
+        const isExpanded = expandedSet.has(item.id);
+        const isSelected = selectedId === item.id;
+        const isFocused = focusedId === item.id || !focusedId && level === 0 && index === 0;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "none", className: "select-none text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
+              ref: (el) => {
+                if (el) itemRefs.current.set(item.id, el);
+                else itemRefs.current.delete(item.id);
+              },
+              role: "treeitem",
+              tabIndex: isFocused ? 0 : -1,
+              "aria-expanded": hasChildren ? isExpanded : void 0,
+              "aria-selected": isSelected,
+              "aria-level": level + 1,
+              "aria-posinset": index + 1,
+              "aria-setsize": items.length,
+              onClick: (e) => {
+                e.stopPropagation();
+                focusNode(item.id);
+                if (hasChildren) {
+                  toggleExpand(item.id);
+                }
+                onSelect?.(item);
+              },
+              style: { paddingLeft: `${level * 16 + 8}px` },
               className: cn(
-                "px-1.5 py-0.5 rounded-md text-[10px] font-mono",
-                isSelected ? "bg-white/20 text-white" : "bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]"
+                "flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+                isSelected ? "bg-[var(--ui-primary)] text-white font-semibold shadow-xs" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]"
               ),
-              children: item.badge
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+                  hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("p-0.5 rounded transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: cn("w-3 h-3", isSelected ? "text-white" : "text-[var(--ui-text-muted)]") }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4" }),
+                  getIcon(item, hasChildren, isExpanded),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+                ] }),
+                item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "px-1.5 py-0.5 rounded-md text-[10px] font-mono",
+                      isSelected ? "bg-white/20 text-white" : "bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]"
+                    ),
+                    children: item.badge
+                  }
+                )
+              ]
             }
-          )
-        ]
-      }
-    ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative space-y-0.5 animate-in fade-in duration-150", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]",
-          style: { left: `${level * 16 + 15}px` }
-        }
-      ),
-      item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-        TreeNode,
-        {
-          item: child,
-          level: level + 1,
-          selectedId,
-          onSelect
-        },
-        child.id
-      ))
-    ] })
-  ] });
-}
-var TreeView = React66.forwardRef(
-  ({ data, selectedId, onSelect, className }, ref) => {
+          ),
+          hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", className: "relative space-y-0.5 animate-in fade-in duration-150", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]",
+                style: { left: `${level * 16 + 15}px` }
+              }
+            ),
+            renderNodes(item.children, level + 1)
+          ] })
+        ] }, item.id);
+      });
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
+        role: "tree",
+        "aria-label": ariaLabel,
+        onKeyDown: handleKeyDown,
         className: cn(
-          "w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden",
+          "w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden outline-none",
           className
         ),
-        children: data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          TreeNode,
-          {
-            item,
-            level: 0,
-            selectedId,
-            onSelect
-          },
-          item.id
-        ))
+        children: renderNodes(data, 0)
       }
     );
   }
@@ -6232,6 +7793,7 @@ exports.CardTitle = CardTitle;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
+exports.CheckboxGroupContext = CheckboxGroupContext;
 exports.Chip = Chip;
 exports.CircularProgress = CircularProgress;
 exports.Code = Code;
@@ -6342,6 +7904,7 @@ exports.Textarea = Textarea;
 exports.ThemeProvider = ThemeProvider;
 exports.TimePicker = TimePicker;
 exports.Timeline = Timeline;
+exports.Toast = Toast;
 exports.ToasterProvider = ToasterProvider;
 exports.ToggleButton = ToggleButton;
 exports.ToggleGroup = ToggleGroup;
@@ -6389,6 +7952,7 @@ exports.toastVariants = toastVariants;
 exports.toggleVariants = toggleVariants;
 exports.tooltipVariants = tooltipVariants;
 exports.useAccordion = useAccordion;
+exports.useCheckboxGroup = useCheckboxGroup;
 exports.useDrawer = useDrawer;
 exports.useDropdown = useDropdown;
 exports.useFormField = useFormField;