@thangnqdev/ui 0.1.1 → 0.2.0

package/dist/{chunk-F5Q7BTMH.js → chunk-4CRFNALF.js}

@@ -1,19 +1,19 @@
-import { Chip } from './chunk-X76KBH4Y.js';
-import { Label } from './chunk-GXI2H5XA.js';
-import { Popover } from './chunk-H3LCNPMC.js';
-import { Kbd } from './chunk-EU2LPUYP.js';
-import { Button } from './chunk-66VWUJEI.js';
-import { __export, cn } from './chunk-4S6L5V7X.js';
-import React2, { createContext, useContext, forwardRef, useId, useState, useRef, useEffect } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useFormField, useCheckboxGroup, checkboxVariants, FormLabel, FormHelperText, FormField, FormErrorMessage, CheckboxGroupContext, CheckboxGroup, Checkbox, Chip } from './chunk-DSEL7ELZ.js';
+import { useControllableState, Popover } from './chunk-YOCGBORV.js';
+import { Kbd } from './chunk-I5O2WCGF.js';
+import { Button } from './chunk-I2FQBMVW.js';
+import { __export, cn } from './chunk-2YJBW4E2.js';
+import React, { forwardRef, useState, useRef, useEffect, createContext, useContext, useCallback, useId } from 'react';
 import { cva } from 'class-variance-authority';
-import { X, Search, EyeOff, Eye, ChevronDown, Minus, Check, ChevronLeft, ChevronRight, Calendar, Clock, ChevronsUpDown, UploadCloud, FileText, File, CheckCircle2, AlertCircle, Plus } from 'lucide-react';
+import { X, Search, EyeOff, Eye, ChevronDown, ChevronLeft, ChevronRight, Calendar, Clock, Check, ChevronsUpDown, UploadCloud, FileText, File, CheckCircle2, AlertCircle, Minus, Plus } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/forms/index.ts
 var forms_exports = {};
 __export(forms_exports, {
   Checkbox: () => Checkbox,
   CheckboxGroup: () => CheckboxGroup,
+  CheckboxGroupContext: () => CheckboxGroupContext,
   Combobox: () => Combobox,
   CurrencyInput: () => CurrencyInput,
   DatePicker: () => DatePicker,
@@ -50,93 +50,9 @@ __export(forms_exports, {
   switchThumbVariants: () => switchThumbVariants,
   switchVariants: () => switchVariants,
   textareaVariants: () => textareaVariants,
+  useCheckboxGroup: () => useCheckboxGroup,
   useFormField: () => useFormField
 });
-var FormFieldContext = createContext(null);
-function useFormField() {
-  const context = useContext(FormFieldContext);
-  return context;
-}
-var FormField = forwardRef(
-  ({ className, isRequired, isInvalid, isDisabled, children, ...props }, ref) => {
-    const generatedId = useId();
-    const id = props.id || generatedId;
-    const labelId = `${id}-label`;
-    const descriptionId = `${id}-description`;
-    const errorId = `${id}-error`;
-    return /* @__PURE__ */ jsx(
-      FormFieldContext.Provider,
-      {
-        value: {
-          id,
-          labelId,
-          descriptionId,
-          errorId,
-          isRequired,
-          isInvalid,
-          isDisabled
-        },
-        children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-1.5 w-full", className), ...props, children })
-      }
-    );
-  }
-);
-FormField.displayName = "FormField";
-var FormLabel = forwardRef(
-  ({ className, required, children, ...props }, ref) => {
-    const context = useFormField();
-    const isRequired = required ?? context?.isRequired;
-    const isError = context?.isInvalid;
-    return /* @__PURE__ */ jsx(
-      Label,
-      {
-        ref,
-        id: context?.labelId,
-        htmlFor: context?.id,
-        required: isRequired,
-        error: isError,
-        className,
-        ...props,
-        children
-      }
-    );
-  }
-);
-FormLabel.displayName = "FormLabel";
-var FormHelperText = forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const context = useFormField();
-    return /* @__PURE__ */ jsx(
-      "p",
-      {
-        ref,
-        id: context?.descriptionId,
-        className: cn("text-xs text-[var(--ui-text-muted)]", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-FormHelperText.displayName = "FormHelperText";
-var FormErrorMessage = forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const context = useFormField();
-    if (!context?.isInvalid && !children) return null;
-    return /* @__PURE__ */ jsx(
-      "p",
-      {
-        ref,
-        id: context?.errorId,
-        role: "alert",
-        className: cn("text-xs font-medium text-[var(--ui-error)]", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-FormErrorMessage.displayName = "FormErrorMessage";
 var inputVariants = cva(
   "w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)]/70 backdrop-blur-md text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]/70 focus-visible:border-[var(--ui-primary)] focus-visible:shadow-[0_0_16px_rgba(99,102,241,0.2)] disabled:cursor-not-allowed disabled:opacity-50 shadow-inner",
   {
@@ -187,7 +103,7 @@ var Input = forwardRef(
     const [uncontrolledVal, setUncontrolledVal] = useState(
       props.defaultValue !== void 0 ? String(props.defaultValue) : ""
     );
-    const innerRef = React2.useRef(null);
+    const innerRef = React.useRef(null);
     const handleRef = (node) => {
       innerRef.current = node;
       if (typeof ref === "function") {
@@ -448,77 +364,6 @@ var Select = forwardRef(
   }
 );
 Select.displayName = "Select";
-var checkboxVariants = 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)]",
-  {
-    variants: {
-      size: {
-        sm: "w-4 h-4 text-xs",
-        md: "w-5 h-5 text-sm",
-        lg: "w-6 h-6 text-base"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var Checkbox = forwardRef(
-  ({ className, size, indeterminate = false, label, checked, disabled, id, onChange, ...props }, ref) => {
-    const formField = useFormField();
-    const isDisabled = disabled ?? formField?.isDisabled ?? false;
-    const checkboxId = id || formField?.id;
-    return /* @__PURE__ */ jsxs("label", { className: cn("inline-flex items-center gap-2 select-none cursor-pointer", isDisabled && "cursor-not-allowed opacity-50"), children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            id: checkboxId,
-            disabled: isDisabled,
-            checked,
-            onChange,
-            className: "sr-only peer",
-            ...props
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              checkboxVariants({ size }),
-              (checked || indeterminate) && "bg-[var(--ui-primary)] border-[var(--ui-primary)]",
-              className
-            ),
-            children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: "w-3.5 h-3.5 stroke-[3]" }) : checked && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 stroke-[3]" })
-          }
-        )
-      ] }),
-      label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ui-text-primary)]", children: label })
-    ] });
-  }
-);
-Checkbox.displayName = "Checkbox";
-var CheckboxGroup = forwardRef(
-  ({ className, orientation = "vertical", children, value, onChange, ...props }, ref) => {
-    return /* @__PURE__ */ 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 RadioGroupContext = createContext(null);
 var radioVariants = 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",
@@ -593,7 +438,7 @@ var RadioGroup = forwardRef(
     children,
     ...props
   }, ref) => {
-    const [val, setVal] = React2.useState(defaultValue || "");
+    const [val, setVal] = React.useState(defaultValue || "");
     const currentValue = controlledValue !== void 0 ? controlledValue : val;
     const handleChange = (newValue) => {
       setVal(newValue);
@@ -722,7 +567,7 @@ var Slider = forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const [val, setVal] = React2.useState(defaultValue);
+    const [val, setVal] = React.useState(defaultValue);
     const currentValue = controlledValue !== void 0 ? controlledValue : val;
     const percentage = Math.min(100, Math.max(0, (currentValue - min) / (max - min) * 100));
     const handleChange = (e) => {
@@ -778,81 +623,192 @@ var RangeSlider = forwardRef(
     showValue = false,
     formatValue = (v) => `${v}`,
     className,
-    disabled = false
+    disabled = false,
+    name,
+    "aria-label": ariaLabel = "Range slider"
   }, ref) => {
-    const [stateValue, setStateValue] = 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 isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = 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 = useRef(null);
+    const draggingThumbRef = useRef(null);
+    const updateValues = 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 = 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));
+      }
+      e.currentTarget.setPointerCapture(e.pointerId);
     };
-    const handleMaxChange = (e) => {
-      const val = Math.max(Number(e.target.value), minVal + step);
-      setStateValue([minVal, val]);
-      onChange?.([minVal, val]);
+    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));
+      }
     };
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full flex items-center gap-4", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative w-full flex items-center h-6 select-none touch-none", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute h-full bg-[var(--ui-primary)]",
-            style: {
-              left: `${minPercentage}%`,
-              width: `${maxPercentage - minPercentage}%`
+    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__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("w-full flex items-center gap-4", disabled && "opacity-50 cursor-not-allowed", className),
+        children: [
+          /* @__PURE__ */ 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__ */ jsx("div", { className: "w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute h-full bg-[var(--ui-primary)]",
+                    style: {
+                      left: `${minPercentage}%`,
+                      width: `${Math.max(0, maxPercentage - minPercentage)}%`
+                    }
+                  }
+                ) }),
+                name && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}_min`, value: minVal }),
+                  /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}_max`, value: maxVal })
+                ] }),
+                /* @__PURE__ */ 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__ */ 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}%` }
+                  }
+                )
+              ]
             }
-          }
-        ) }),
-        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("span", { className: "text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[5rem] text-right", children: [
-        formatValue(minVal),
-        " - ",
-        formatValue(maxVal)
-      ] })
-    ] });
+          ),
+          showValue && /* @__PURE__ */ 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";
@@ -870,16 +826,13 @@ var PinInput = forwardRef(
     autoFocus = false,
     ...props
   }, ref) => {
-    const [pins, setPins] = useState(() => {
+    const isControlled = controlledValue !== void 0;
+    const [internalPins, setInternalPins] = 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 = useRef([]);
-    useEffect(() => {
-      if (controlledValue !== void 0) {
-        setPins(Array.from({ length }, (_, i) => controlledValue[i] || ""));
-      }
-    }, [controlledValue, length]);
     useEffect(() => {
       if (autoFocus && inputsRef.current[0]) {
         inputsRef.current[0].focus();
@@ -889,7 +842,9 @@ var PinInput = forwardRef(
       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) {
@@ -900,16 +855,28 @@ var PinInput = 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);
@@ -929,6 +896,7 @@ var PinInput = 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),
@@ -957,7 +925,7 @@ function formatDisplayDate(d) {
 var DatePicker = forwardRef(
   ({
     value: controlledValue,
-    defaultValue,
+    defaultValue = null,
     onChange,
     placeholder = "Select date...",
     minDate,
@@ -967,26 +935,28 @@ var DatePicker = forwardRef(
     className,
     presets
   }, ref) => {
-    const [internalDate, setInternalDate] = 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] = useState(selectedDate || /* @__PURE__ */ new Date());
     const [isOpen, setIsOpen] = useState(false);
+    const [focusedDate, setFocusedDate] = useState(selectedDate || /* @__PURE__ */ new Date());
     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));
@@ -1019,20 +989,68 @@ var DatePicker = 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__ */ jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsx(
       Popover,
       {
-        isOpen,
-        onClose: () => setIsOpen(false),
+        open: isOpen,
+        onOpenChange: setIsOpen,
         trigger: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
@@ -1042,7 +1060,11 @@ var DatePicker = forwardRef(
               /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: clearable && selectedDate && !disabled && /* @__PURE__ */ 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__ */ jsx(X, { className: "w-3.5 h-3.5" })
                 }
@@ -1050,74 +1072,131 @@ var DatePicker = forwardRef(
             ]
           }
         ),
-        children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ 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__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 pb-2 border-b border-[var(--ui-border-subtle)]", children: presets.map((preset, idx) => /* @__PURE__ */ 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__ */ jsx(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__ */ 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__ */ jsx("div", { role: "columnheader", "aria-label": d.full, className: "py-1", children: d.short }, d.short))
                 }
               ),
               /* @__PURE__ */ 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__ */ jsx(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__ */ 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__ */ jsx("div", { className: "flex flex-wrap gap-1 pb-2 border-b border-[var(--ui-border-subtle)]", children: presets.map((preset, idx) => /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "py-1", children: d }, d)) }),
-          /* @__PURE__ */ 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__ */ 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 = forwardRef(
-  ({ value: controlledVal, defaultValue, onChange, placeholder = "Select date range...", className, disabled = false }, ref) => {
-    const [internalRange, setInternalRange] = 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] = useState(range.from || /* @__PURE__ */ new Date());
     const [isOpen, setIsOpen] = useState(false);
     const handleDayClick = (d) => {
@@ -1132,8 +1211,7 @@ var DateRangePicker = 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();
@@ -1147,146 +1225,345 @@ var DateRangePicker = forwardRef(
     return /* @__PURE__ */ jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsx(
       Popover,
       {
-        isOpen,
-        onClose: () => setIsOpen(false),
+        open: isOpen,
+        onOpenChange: setIsOpen,
         trigger: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
               /* @__PURE__ */ jsx(Calendar, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" }),
               /* @__PURE__ */ jsx("span", { className: range.from ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: displayText })
             ] })
           }
         ),
-        children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ 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__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
+        children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ 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__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ 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__ */ jsx(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__ */ 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__ */ 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__ */ jsxs("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
-            Array.from({ length: firstDayIndex }).map((_, i) => /* @__PURE__ */ 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__ */ 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 = forwardRef(
-  ({ value: controlledVal, defaultValue = "12:00", onChange, format = "24h", className, disabled = false }, ref) => {
-    const [internalTime, setInternalTime] = useState(defaultValue);
-    const time = controlledVal !== void 0 ? controlledVal : internalTime;
-    const [hours, setHours] = useState(time.split(":")[0] || "12");
-    const [minutes, setMinutes] = 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] = 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 = useRef(null);
+    const minuteListRef = useRef(null);
+    const periodListRef = useRef(null);
+    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__ */ jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsx(
       Popover,
       {
-        isOpen,
-        onClose: () => setIsOpen(false),
+        open: isOpen,
+        onOpenChange: setIsOpen,
         trigger: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-              /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4 text-[var(--ui-text-muted)]" }),
-              /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold text-[var(--ui-text-primary)]", children: time })
+              /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold text-[var(--ui-text-primary)]", children: time || placeholder })
             ] })
           }
         ),
-        children: /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-xs font-bold text-[var(--ui-text-muted)] uppercase tracking-wider font-mono", children: [
-            "Select Time (",
-            format,
-            ")"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "text-sm font-bold", children: ":" }),
-            /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("span", { className: "text-xs font-bold text-[var(--ui-text-muted)] uppercase tracking-wider font-mono", children: [
+                "Select Time (",
+                format,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "text-sm font-bold", children: ":" }),
+                /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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
+                      );
+                    })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
       }
     ) });
   }
@@ -1303,135 +1580,205 @@ var Combobox = forwardRef(
     emptyText = "No items found.",
     disabled = false,
     clearable = true,
-    className
+    className,
+    name,
+    id: customId,
+    "aria-label": ariaLabel = "Select option"
   }, ref) => {
+    const baseId = useId();
+    const comboId = customId || `combobox-${baseId}`;
+    const listboxId = `listbox-${baseId}`;
     const [internalVal, setInternalVal] = useState(defaultValue);
-    const selectedValue = controlledVal !== void 0 ? controlledVal : internalVal;
+    const isControlled = controlledVal !== void 0;
+    const selectedValue = isControlled ? controlledVal : internalVal;
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [highlightIndex, setHighlightIndex] = useState(0);
+    const searchInputRef = useRef(null);
+    const triggerRef = 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);
+    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__ */ jsx("div", { ref, className: cn("relative w-full", className), children: /* @__PURE__ */ jsx(
-      Popover,
-      {
-        isOpen,
-        onClose: () => setIsOpen(false),
-        trigger: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
-                selectedOption?.icon,
-                /* @__PURE__ */ jsx("span", { className: selectedOption ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: selectedOption ? selectedOption.label : placeholder })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: [
-                clearable && selectedValue && !disabled && /* @__PURE__ */ 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__ */ jsx(X, { className: "w-3.5 h-3.5" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(ChevronsUpDown, { className: "w-4 h-4 opacity-50 shrink-0" })
-              ] })
-            ]
-          }
-        ),
-        children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 w-3.5 h-3.5 text-[var(--ui-text-muted)] pointer-events-none" }),
-            /* @__PURE__ */ 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__ */ jsxs("div", { ref, className: cn("relative w-full", className), children: [
+      name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selectedValue }),
+      /* @__PURE__ */ jsx(
+        Popover,
+        {
+          isOpen,
+          onClose: () => setIsOpen(false),
+          trigger: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
+                  selectedOption?.icon,
+                  /* @__PURE__ */ jsx("span", { className: selectedOption ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: selectedOption ? selectedOption.label : placeholder })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: [
+                  clearable && selectedValue && !disabled && /* @__PURE__ */ 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__ */ jsx(X, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ChevronsUpDown, { className: "w-4 h-4 opacity-50 shrink-0" })
+                ] })
+              ]
+            }
+          ),
+          children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative flex items-center", children: [
+              /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 w-3.5 h-3.5 text-[var(--ui-text-muted)] pointer-events-none" }),
+              /* @__PURE__ */ 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__ */ jsx("div", { id: listboxId, className: "max-h-56 overflow-y-auto space-y-0.5", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+                      opt.icon,
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx("span", { className: "block truncate", children: opt.label }),
+                        opt.description && /* @__PURE__ */ jsx("span", { className: cn("text-[10px] block truncate", isSelected ? "text-white/80" : "text-[var(--ui-text-muted)]"), children: opt.description })
+                      ] })
+                    ] }),
+                    isSelected && /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "max-h-56 overflow-y-auto space-y-0.5", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
-                    opt.icon,
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("span", { className: "block truncate", children: opt.label }),
-                      opt.description && /* @__PURE__ */ jsx("span", { className: cn("text-[10px] block truncate", isSelected ? "text-white/80" : "text-[var(--ui-text-muted)]"), children: opt.description })
-                    ] })
-                  ] }),
-                  isSelected && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 shrink-0" })
-                ]
-              },
-              opt.value
-            );
-          }) })
-        ] })
-      }
-    ) });
+                opt.value
+              );
+            }) })
+          ] })
+        }
+      )
+    ] });
   }
 );
 Combobox.displayName = "Combobox";
@@ -1448,28 +1795,69 @@ var MultiSelect = forwardRef(
     className
   }, ref) => {
     const [internalVal, setInternalVal] = useState(defaultValue);
-    const selectedValues = controlledVal !== void 0 ? controlledVal : internalVal;
+    const isControlled = controlledVal !== void 0;
+    const selectedValues = isControlled ? controlledVal : internalVal;
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = 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__ */ jsx("div", { ref, className: cn("relative w-full", className), children: /* @__PURE__ */ jsx(
       Popover,
       {
@@ -1478,9 +1866,19 @@ var MultiSelect = forwardRef(
         trigger: /* @__PURE__ */ 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: [
@@ -1509,7 +1907,7 @@ var MultiSelect = 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__ */ jsx(X, { className: "w-3.5 h-3.5" })
                   }
                 ),
@@ -1528,20 +1926,30 @@ var MultiSelect = 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__ */ jsx("div", { className: "max-h-56 overflow-y-auto space-y-0.5", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-4 text-center text-xs text-[var(--ui-text-muted)]", children: "No options found." }) : filteredOptions.map((opt) => {
+          /* @__PURE__ */ jsx("div", { className: "max-h-56 overflow-y-auto space-y-0.5", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
@@ -1583,26 +1991,58 @@ var FileUpload = forwardRef(
     const [isDragOver, setIsDragOver] = useState(false);
     const [fileList, setFileList] = useState([]);
     const inputRef = useRef(null);
+    const fileListRef = useRef(fileList);
+    fileListRef.current = fileList;
+    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) {
@@ -1628,7 +2068,13 @@ var FileUpload = 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__ */ jsxs("div", { ref, className: cn("w-full space-y-4", className), children: [
@@ -1736,8 +2182,12 @@ var NumberInput = forwardRef(
     className,
     ...props
   }, ref) => {
-    const [internalVal, setInternalVal] = 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) {
@@ -1748,14 +2198,12 @@ var NumberInput = 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;
@@ -1765,8 +2213,7 @@ var NumberInput = forwardRef(
       const parsed = parseFloat(val);
       if (!isNaN(parsed)) {
         const next = clamp(parsed);
-        setInternalVal(next);
-        onChange?.(next);
+        setValue(next);
       }
     };
     const handleKeyDown = (e) => {
@@ -1787,7 +2234,7 @@ var NumberInput = 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__ */ jsx(Minus, { className: "w-3.5 h-3.5" })
           }
         ),
@@ -1810,7 +2257,7 @@ var NumberInput = 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__ */ jsx(Plus, { className: "w-3.5 h-3.5" })
           }
         )
@@ -1841,7 +2288,7 @@ var NumberInput = 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__ */ jsx(Plus, { className: "w-3 h-3" })
           }
         ),
@@ -1851,7 +2298,7 @@ var NumberInput = 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__ */ jsx(Minus, { className: "w-3 h-3" })
           }
         )
@@ -1880,19 +2327,27 @@ var CurrencyInput = forwardRef(
   }, ref) => {
     const symbol = currencySymbol || (currency === "VND" ? "\u20AB" : currency === "EUR" ? "\u20AC" : "$");
     const isSuffix = position === "suffix" || currency === "VND";
-    const [internalVal, setInternalVal] = useState(defaultValue);
-    const value = controlledVal !== void 0 ? controlledVal : internalVal;
-    const [displayVal, setDisplayVal] = useState(formatCurrencyString(value));
+    const [value, setValue, isControlled] = useControllableState({
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      name: "CurrencyInput"
+    });
+    const [internalInputString, setInternalInputString] = useState(formatCurrencyString(value));
     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__ */ jsxs("div", { className: cn("relative w-full flex items-center", className), children: [
       !isSuffix && /* @__PURE__ */ jsx("span", { className: "absolute left-3.5 text-sm font-bold text-[var(--ui-text-muted)] pointer-events-none font-mono", children: symbol }),
@@ -1986,6 +2441,6 @@ var MaskedInput = forwardRef(
 );
 MaskedInput.displayName = "MaskedInput";
 
-export { Checkbox, CheckboxGroup, Combobox, CurrencyInput, DatePicker, DateRangePicker, FileUpload, FormErrorMessage, FormField, FormHelperText, FormLabel, Input, MaskedInput, MultiSelect, NumberInput, PasswordInput, PinInput, Radio, RadioGroup, RangeSlider, SearchInput, Select, Slider, Switch, Textarea, TimePicker, applyMask, checkboxVariants, formatCurrencyString, formatDate, formatDisplayDate, formatFileSize, forms_exports, inputVariants, radioVariants, selectVariants, switchThumbVariants, switchVariants, textareaVariants, useFormField };
-//# sourceMappingURL=chunk-F5Q7BTMH.js.map
-//# sourceMappingURL=chunk-F5Q7BTMH.js.map
+export { Combobox, CurrencyInput, DatePicker, DateRangePicker, FileUpload, Input, MaskedInput, MultiSelect, NumberInput, PasswordInput, PinInput, Radio, RadioGroup, RangeSlider, SearchInput, Select, Slider, Switch, Textarea, TimePicker, applyMask, formatCurrencyString, formatDate, formatDisplayDate, formatFileSize, forms_exports, inputVariants, radioVariants, selectVariants, switchThumbVariants, switchVariants, textareaVariants };
+//# sourceMappingURL=chunk-4CRFNALF.js.map
+//# sourceMappingURL=chunk-4CRFNALF.js.map