@thangnqdev/ui 0.1.2 → 0.2.0

package/dist/forms/index.cjs

@@ -466,8 +466,59 @@ var Select = React3.forwardRef(
   }
 );
 Select.displayName = "Select";
+var CheckboxGroupContext = React3.createContext(null);
+var useCheckboxGroup = () => React3.useContext(CheckboxGroupContext);
+var CheckboxGroup = React3.forwardRef(
+  ({
+    className,
+    orientation = "vertical",
+    children,
+    value: controlledValue,
+    defaultValue = [],
+    onChange,
+    disabled,
+    name,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React3.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : internalValue;
+    const handleValueChange = (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxGroupContext.Provider,
+      {
+        value: {
+          value,
+          onChange: handleValueChange,
+          disabled,
+          name
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            role: "group",
+            className: cn(
+              "flex gap-2",
+              orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
 var checkboxVariants = classVarianceAuthority.cva(
-  "peer shrink-0 rounded-[var(--ui-radius-sm)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 transition-all cursor-pointer flex items-center justify-center text-[var(--ui-primary-fg)]",
+  "peer shrink-0 rounded-[var(--ui-radius-sm)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] transition-all flex items-center justify-center text-[var(--ui-primary-fg)] peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--ui-primary)] peer-focus-visible:ring-offset-2",
   {
     variants: {
       size: {
@@ -482,61 +533,96 @@ var checkboxVariants = classVarianceAuthority.cva(
   }
 );
 var Checkbox = React3.forwardRef(
-  ({ className, size, indeterminate = false, label, checked, disabled, id, onChange, ...props }, ref) => {
+  ({
+    className,
+    size,
+    indeterminate = false,
+    label,
+    checked,
+    defaultChecked = false,
+    disabled,
+    id,
+    name,
+    value: propValue,
+    onChange,
+    onCheckedChange,
+    ...props
+  }, ref) => {
     const formField = useFormField();
-    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const group = useCheckboxGroup();
+    const isGroupMember = group !== null && propValue !== void 0;
+    const isDisabled = disabled ?? group?.disabled ?? formField?.isDisabled ?? false;
     const checkboxId = id || formField?.id;
-    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("inline-flex items-center gap-2 select-none cursor-pointer", isDisabled && "cursor-not-allowed opacity-50"), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            id: checkboxId,
-            disabled: isDisabled,
-            checked,
-            onChange,
-            className: "sr-only peer",
-            ...props
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              checkboxVariants({ size }),
-              (checked || indeterminate) && "bg-[var(--ui-primary)] border-[var(--ui-primary)]",
-              className
-            ),
-            children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3.5 h-3.5 stroke-[3]" }) : checked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 stroke-[3]" })
-          }
-        )
-      ] }),
-      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-[var(--ui-text-primary)]", children: label })
-    ] });
-  }
-);
-Checkbox.displayName = "Checkbox";
-var CheckboxGroup = React3.forwardRef(
-  ({ className, orientation = "vertical", children, value, onChange, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+    const checkboxName = name || group?.name;
+    const isControlled = checked !== void 0;
+    const [internalChecked, setInternalChecked] = React3.useState(defaultChecked);
+    const isChecked = isGroupMember ? group.value.includes(String(propValue)) : isControlled ? Boolean(checked) : internalChecked;
+    const innerRef = React3.useRef(null);
+    React3.useImperativeHandle(ref, () => innerRef.current);
+    React3.useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.indeterminate = Boolean(indeterminate);
+      }
+    }, [indeterminate]);
+    const handleChange = (e) => {
+      if (isDisabled) return;
+      const newChecked = e.target.checked;
+      if (!isControlled && !isGroupMember) {
+        setInternalChecked(newChecked);
+      }
+      if (isGroupMember && group) {
+        const val = String(propValue);
+        const next = newChecked ? [...group.value, val] : group.value.filter((v) => v !== val);
+        group.onChange(next);
+      }
+      onChange?.(e);
+      onCheckedChange?.(newChecked);
+    };
+    const isVisualActive = isChecked || indeterminate;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
       {
-        ref,
-        role: "group",
         className: cn(
-          "flex gap-2",
-          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
-          className
+          "inline-flex items-center gap-2 select-none cursor-pointer group",
+          isDisabled && "cursor-not-allowed opacity-50"
         ),
-        ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: innerRef,
+                type: "checkbox",
+                id: checkboxId,
+                name: checkboxName,
+                value: propValue,
+                disabled: isDisabled,
+                checked: isChecked,
+                onChange: handleChange,
+                "aria-checked": indeterminate ? "mixed" : isChecked,
+                className: "sr-only peer",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  checkboxVariants({ size }),
+                  isVisualActive ? "bg-[var(--ui-primary)] border-[var(--ui-primary)] text-white" : "hover:border-[var(--ui-border-strong)]",
+                  className
+                ),
+                children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3.5 h-3.5 stroke-[3]" }) : isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 stroke-[3]" })
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-[var(--ui-text-primary)]", children: label })
+        ]
       }
     );
   }
 );
-CheckboxGroup.displayName = "CheckboxGroup";
+Checkbox.displayName = "Checkbox";
 var RadioGroupContext = React3.createContext(null);
 var radioVariants = classVarianceAuthority.cva(
   "peer shrink-0 rounded-full border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 transition-all cursor-pointer flex items-center justify-center",
@@ -796,81 +882,192 @@ var RangeSlider = React3.forwardRef(
     showValue = false,
     formatValue = (v) => `${v}`,
     className,
-    disabled = false
+    disabled = false,
+    name,
+    "aria-label": ariaLabel = "Range slider"
   }, ref) => {
-    const [stateValue, setStateValue] = React3.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] = React3.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 = React3.useRef(null);
+    const draggingThumbRef = React3.useRef(null);
+    const updateValues = React3.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 = React3.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__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full flex items-center gap-4", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full flex items-center h-6 select-none touch-none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute h-full bg-[var(--ui-primary)]",
-            style: {
-              left: `${minPercentage}%`,
-              width: `${maxPercentage - minPercentage}%`
+    const handlePointerUp = (e) => {
+      if (draggingThumbRef.current) {
+        draggingThumbRef.current = null;
+        try {
+          e.currentTarget.releasePointerCapture(e.pointerId);
+        } catch {
+        }
+      }
+    };
+    const handleKeyDownMin = (e) => {
+      if (disabled) return;
+      let nextMin = minVal;
+      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        nextMin = Math.min(minVal + step, maxVal);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        nextMin = Math.max(minVal - step, min);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        nextMin = min;
+      } else if (e.key === "End") {
+        e.preventDefault();
+        nextMin = maxVal;
+      }
+      if (nextMin !== minVal) {
+        updateValues(nextMin, maxVal);
+      }
+    };
+    const handleKeyDownMax = (e) => {
+      if (disabled) return;
+      let nextMax = maxVal;
+      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        nextMax = Math.min(maxVal + step, max);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        nextMax = Math.max(maxVal - step, minVal);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        nextMax = minVal;
+      } else if (e.key === "End") {
+        e.preventDefault();
+        nextMax = max;
+      }
+      if (nextMax !== maxVal) {
+        updateValues(minVal, nextMax);
+      }
+    };
+    const minPercentage = Math.min(100, Math.max(0, (minVal - min) / (max - min || 1) * 100));
+    const maxPercentage = Math.min(100, Math.max(0, (maxVal - min) / (max - min || 1) * 100));
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("w-full flex items-center gap-4", disabled && "opacity-50 cursor-not-allowed", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: trackRef,
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              className: "relative w-full flex items-center h-7 select-none touch-none cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute h-full bg-[var(--ui-primary)]",
+                    style: {
+                      left: `${minPercentage}%`,
+                      width: `${Math.max(0, maxPercentage - minPercentage)}%`
+                    }
+                  }
+                ) }),
+                name && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: `${name}_min`, value: minVal }),
+                  /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: `${name}_max`, value: maxVal })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    role: "slider",
+                    tabIndex: disabled ? -1 : 0,
+                    "aria-label": `${ariaLabel} minimum`,
+                    "aria-valuemin": min,
+                    "aria-valuemax": maxVal,
+                    "aria-valuenow": minVal,
+                    "aria-disabled": disabled,
+                    onKeyDown: handleKeyDownMin,
+                    className: cn(
+                      "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md -translate-x-1/2 z-20 cursor-grab active:cursor-grabbing transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2",
+                      disabled && "pointer-events-none"
+                    ),
+                    style: { left: `${minPercentage}%` }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    role: "slider",
+                    tabIndex: disabled ? -1 : 0,
+                    "aria-label": `${ariaLabel} maximum`,
+                    "aria-valuemin": minVal,
+                    "aria-valuemax": max,
+                    "aria-valuenow": maxVal,
+                    "aria-disabled": disabled,
+                    onKeyDown: handleKeyDownMax,
+                    className: cn(
+                      "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md -translate-x-1/2 z-20 cursor-grab active:cursor-grabbing transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2",
+                      disabled && "pointer-events-none"
+                    ),
+                    style: { left: `${maxPercentage}%` }
+                  }
+                )
+              ]
             }
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "range",
-            min,
-            max,
-            step,
-            value: minVal,
-            disabled,
-            onChange: handleMinChange,
-            className: "absolute inset-0 w-full h-full opacity-0 pointer-events-auto cursor-pointer z-20"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "range",
-            min,
-            max,
-            step,
-            value: maxVal,
-            disabled,
-            onChange: handleMaxChange,
-            className: "absolute inset-0 w-full h-full opacity-0 pointer-events-auto cursor-pointer z-30"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none -translate-x-1/2 z-10",
-            style: { left: `${minPercentage}%` }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none -translate-x-1/2 z-10",
-            style: { left: `${maxPercentage}%` }
-          }
-        )
-      ] }),
-      showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[5rem] text-right", children: [
-        formatValue(minVal),
-        " - ",
-        formatValue(maxVal)
-      ] })
-    ] });
+          ),
+          showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[5rem] text-right", children: [
+            formatValue(minVal),
+            " - ",
+            formatValue(maxVal)
+          ] })
+        ]
+      }
+    );
   }
 );
 RangeSlider.displayName = "RangeSlider";
@@ -888,16 +1085,13 @@ var PinInput = React3.forwardRef(
     autoFocus = false,
     ...props
   }, ref) => {
-    const [pins, setPins] = React3.useState(() => {
+    const isControlled = controlledValue !== void 0;
+    const [internalPins, setInternalPins] = React3.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 = React3.useRef([]);
-    React3.useEffect(() => {
-      if (controlledValue !== void 0) {
-        setPins(Array.from({ length }, (_, i) => controlledValue[i] || ""));
-      }
-    }, [controlledValue, length]);
     React3.useEffect(() => {
       if (autoFocus && inputsRef.current[0]) {
         inputsRef.current[0].focus();
@@ -907,7 +1101,9 @@ var PinInput = React3.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) {
@@ -918,16 +1114,28 @@ var PinInput = React3.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);
@@ -947,6 +1155,7 @@ var PinInput = React3.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),
@@ -972,20 +1181,67 @@ function Portal({ children, container }) {
   if (!target) return null;
   return reactDom.createPortal(children, target);
 }
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  name
+}) {
+  const isControlled = controlledValue !== void 0;
+  const isControlledRef = React3.useRef(isControlled);
+  React3.useEffect(() => {
+    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && isControlledRef.current !== isControlled) {
+      console.warn(
+        `[${name || "Component"}] is changing from ${isControlledRef.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Check the value/defaultValue props.`
+      );
+    }
+    isControlledRef.current = isControlled;
+  }, [isControlled, name]);
+  const [internalState, setInternalState] = React3.useState(defaultValue);
+  const value = isControlled ? controlledValue : internalState;
+  const setValue = React3.useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(value) : next;
+      if (!isControlled) {
+        setInternalState(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, value, onChange]
+  );
+  return [value, setValue, isControlled];
+}
 var Popover = ({
   trigger,
   children,
-  isOpen: controlledIsOpen,
+  open: controlledOpen,
+  isOpen: legacyIsOpen,
+  defaultOpen = false,
+  onOpenChange,
   onClose,
   placement = "bottom",
   className
 }) => {
-  const [internalIsOpen, setInternalIsOpen] = React3.useState(false);
-  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const activeControlled = controlledOpen !== void 0 ? controlledOpen : legacyIsOpen;
+  const handleStateChange = React3.useCallback(
+    (nextOpen) => {
+      onOpenChange?.(nextOpen);
+      if (!nextOpen) {
+        onClose?.();
+      }
+    },
+    [onOpenChange, onClose]
+  );
+  const [isOpen, setIsOpen] = useControllableState({
+    value: activeControlled,
+    defaultValue: defaultOpen,
+    onChange: handleStateChange,
+    name: "Popover"
+  });
   const [coords, setCoords] = React3.useState({ top: 0, left: 0 });
   const triggerRef = React3.useRef(null);
   const popoverRef = React3.useRef(null);
-  const calculatePosition = () => {
+  const calculatePosition = React3.useCallback(() => {
     if (triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       let top = 0;
@@ -1005,45 +1261,52 @@ var Popover = ({
       }
       setCoords({ top, left });
     }
-  };
+  }, [placement]);
   const handleToggle = () => {
     if (!isOpen) {
       calculatePosition();
     }
-    if (controlledIsOpen !== void 0) {
-      if (isOpen) onClose?.();
-    } else {
-      setInternalIsOpen(!internalIsOpen);
-    }
+    setIsOpen(!isOpen);
   };
   React3.useEffect(() => {
     if (isOpen) {
       calculatePosition();
     }
-  }, [isOpen]);
+  }, [isOpen, calculatePosition]);
   React3.useEffect(() => {
+    if (!isOpen) return;
     const handleOutside = (e) => {
       if (popoverRef.current && !popoverRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
-        if (controlledIsOpen !== void 0) {
-          onClose?.();
-        } else {
-          setInternalIsOpen(false);
-        }
+        setIsOpen(false);
       }
     };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleOutside);
-      window.addEventListener("resize", calculatePosition);
-      window.addEventListener("scroll", calculatePosition);
-    }
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition);
     return () => {
       document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition);
     };
-  }, [isOpen, controlledIsOpen, onClose]);
+  }, [isOpen, setIsOpen, calculatePosition]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleToggle, className: "w-full inline-block cursor-pointer", children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleToggle,
+        className: "w-full inline-block cursor-pointer",
+        "aria-expanded": isOpen,
+        children: trigger
+      }
+    ),
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1078,7 +1341,7 @@ function formatDisplayDate(d) {
 var DatePicker = React3.forwardRef(
   ({
     value: controlledValue,
-    defaultValue,
+    defaultValue = null,
     onChange,
     placeholder = "Select date...",
     minDate,
@@ -1088,26 +1351,28 @@ var DatePicker = React3.forwardRef(
     className,
     presets
   }, ref) => {
-    const [internalDate, setInternalDate] = React3.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] = React3.useState(selectedDate || /* @__PURE__ */ new Date());
     const [isOpen, setIsOpen] = React3.useState(false);
+    const [focusedDate, setFocusedDate] = React3.useState(selectedDate || /* @__PURE__ */ new Date());
     React3.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));
@@ -1140,20 +1405,68 @@ var DatePicker = React3.forwardRef(
     }
     const todayStr = formatDate(/* @__PURE__ */ new Date());
     const selectedStr = selectedDate ? formatDate(selectedDate) : "";
+    const focusedStr = formatDate(focusedDate);
+    const handleGridKeyDown = (e) => {
+      let nextDate = new Date(focusedDate);
+      let handled = false;
+      if (e.key === "ArrowLeft") {
+        nextDate.setDate(nextDate.getDate() - 1);
+        handled = true;
+      } else if (e.key === "ArrowRight") {
+        nextDate.setDate(nextDate.getDate() + 1);
+        handled = true;
+      } else if (e.key === "ArrowUp") {
+        nextDate.setDate(nextDate.getDate() - 7);
+        handled = true;
+      } else if (e.key === "ArrowDown") {
+        nextDate.setDate(nextDate.getDate() + 7);
+        handled = true;
+      } else if (e.key === "PageUp") {
+        nextDate.setMonth(nextDate.getMonth() - 1);
+        handled = true;
+      } else if (e.key === "PageDown") {
+        nextDate.setMonth(nextDate.getMonth() + 1);
+        handled = true;
+      } else if (e.key === "Home") {
+        nextDate.setDate(1);
+        handled = true;
+      } else if (e.key === "End") {
+        const lastDay = new Date(nextDate.getFullYear(), nextDate.getMonth() + 1, 0).getDate();
+        nextDate.setDate(lastDay);
+        handled = true;
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleSelectDate(focusedDate);
+        return;
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+        return;
+      }
+      if (handled) {
+        e.preventDefault();
+        setFocusedDate(nextDate);
+        if (nextDate.getMonth() !== viewDate.getMonth() || nextDate.getFullYear() !== viewDate.getFullYear()) {
+          setViewDate(new Date(nextDate.getFullYear(), nextDate.getMonth(), 1));
+        }
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        isOpen,
-        onClose: () => setIsOpen(false),
+        open: isOpen,
+        onOpenChange: setIsOpen,
         trigger: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
             disabled,
-            onClick: () => !disabled && setIsOpen(!isOpen),
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-label": selectedDate ? `Selected date: ${formatDisplayDate(selectedDate)}` : placeholder,
             className: cn(
-              "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer",
-              disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:ring-2 focus:ring-[var(--ui-primary)]/50"
+              "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+              disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
@@ -1163,7 +1476,11 @@ var DatePicker = React3.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: clearable && selectedDate && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Clear date",
                   onClick: handleClear,
+                  onKeyDown: (e) => e.key === "Enter" && handleClear(e),
                   className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors",
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
                 }
@@ -1171,74 +1488,131 @@ var DatePicker = React3.forwardRef(
             ]
           }
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider", children: viewDate.toLocaleString("default", { month: "long", year: "numeric" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-label": "Choose date",
+            className: "p-4 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3",
+            onKeyDown: handleGridKeyDown,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    id: "calendar-month-heading",
+                    className: "text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider",
+                    "aria-live": "polite",
+                    children: viewDate.toLocaleString("default", { month: "long", year: "numeric" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: prevMonth,
+                      "aria-label": "Previous month",
+                      className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: nextMonth,
+                      "aria-label": "Next month",
+                      className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 pb-2 border-b border-[var(--ui-border-subtle)]", children: presets.map((preset, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: prevMonth,
-                  className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
+                  onClick: () => handleSelectDate(preset.date),
+                  className: "px-2 py-0.5 rounded-md text-[10px] font-semibold bg-[var(--ui-bg-secondary)] hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-secondary)] transition-colors cursor-pointer",
+                  children: preset.label
+                },
+                idx
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  role: "row",
+                  className: "grid grid-cols-7 text-center text-[10px] font-bold text-[var(--ui-text-muted)] font-mono",
+                  children: [
+                    { short: "Su", full: "Sunday" },
+                    { short: "Mo", full: "Monday" },
+                    { short: "Tu", full: "Tuesday" },
+                    { short: "We", full: "Wednesday" },
+                    { short: "Th", full: "Thursday" },
+                    { short: "Fr", full: "Friday" },
+                    { short: "Sa", full: "Saturday" }
+                  ].map((d) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "columnheader", "aria-label": d.full, className: "py-1", children: d.short }, d.short))
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                "div",
                 {
-                  type: "button",
-                  onClick: nextMonth,
-                  className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                  role: "grid",
+                  "aria-labelledby": "calendar-month-heading",
+                  className: "grid grid-cols-7 gap-1",
+                  children: days.map((item, idx) => {
+                    const itemStr = formatDate(item.date);
+                    const isSelected = itemStr === selectedStr;
+                    const isToday = itemStr === todayStr;
+                    const isFocused = itemStr === focusedStr;
+                    const fullDateLabel = item.date.toLocaleDateString("en-US", {
+                      weekday: "long",
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric"
+                    });
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "gridcell",
+                        disabled: item.disabled,
+                        "aria-selected": isSelected,
+                        "aria-current": isToday ? "date" : void 0,
+                        "aria-label": fullDateLabel,
+                        tabIndex: isFocused ? 0 : -1,
+                        onClick: () => handleSelectDate(item.date),
+                        className: cn(
+                          "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer outline-none",
+                          item.disabled && "opacity-25 cursor-not-allowed pointer-events-none",
+                          !item.currentMonth && "text-[var(--ui-text-muted)] opacity-50",
+                          isFocused && "ring-2 ring-[var(--ui-primary)]",
+                          isSelected ? "bg-[var(--ui-primary)] text-white font-bold shadow-md shadow-blue-500/30" : isToday ? "border border-[var(--ui-primary)] text-[var(--ui-primary)]" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                        ),
+                        children: item.date.getDate()
+                      },
+                      idx
+                    );
+                  })
                 }
               )
-            ] })
-          ] }),
-          presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 pb-2 border-b border-[var(--ui-border-subtle)]", children: presets.map((preset, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleSelectDate(preset.date),
-              className: "px-2 py-0.5 rounded-md text-[10px] font-semibold bg-[var(--ui-bg-secondary)] hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-secondary)] transition-colors",
-              children: preset.label
-            },
-            idx
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 text-center text-[10px] font-bold text-[var(--ui-text-muted)] font-mono", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: d }, d)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((item, idx) => {
-            const itemStr = formatDate(item.date);
-            const isSelected = itemStr === selectedStr;
-            const isToday = itemStr === todayStr;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                disabled: item.disabled,
-                onClick: () => handleSelectDate(item.date),
-                className: cn(
-                  "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer",
-                  item.disabled && "opacity-25 cursor-not-allowed pointer-events-none",
-                  !item.currentMonth && "text-[var(--ui-text-muted)] opacity-50",
-                  isSelected ? "bg-[var(--ui-primary)] text-white font-bold shadow-md shadow-blue-500/30" : isToday ? "border border-[var(--ui-primary)] text-[var(--ui-primary)]" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
-                ),
-                children: item.date.getDate()
-              },
-              idx
-            );
-          }) })
-        ] })
+            ]
+          }
+        )
       }
     ) });
   }
 );
 DatePicker.displayName = "DatePicker";
 var DateRangePicker = React3.forwardRef(
-  ({ value: controlledVal, defaultValue, onChange, placeholder = "Select date range...", className, disabled = false }, ref) => {
-    const [internalRange, setInternalRange] = React3.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] = React3.useState(range.from || /* @__PURE__ */ new Date());
     const [isOpen, setIsOpen] = React3.useState(false);
     const handleDayClick = (d) => {
@@ -1253,8 +1627,7 @@ var DateRangePicker = React3.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();
@@ -1268,146 +1641,345 @@ var DateRangePicker = React3.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        isOpen,
-        onClose: () => setIsOpen(false),
+        open: isOpen,
+        onOpenChange: setIsOpen,
         trigger: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             disabled,
-            onClick: () => !disabled && setIsOpen(!isOpen),
-            className: "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer",
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-label": displayText,
+            className: "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: range.from ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: displayText })
-            ] })
-          }
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 w-76 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider", children: viewDate.toLocaleString("default", { month: "long", year: "numeric" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setViewDate(new Date(year, month - 1, 1)),
-                  className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)]",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: range.from ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: displayText })
+            ] })
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-label": "Choose date range",
+            className: "p-4 w-76 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { id: "range-month-heading", className: "text-xs font-bold text-[var(--ui-text-primary)] font-mono uppercase tracking-wider", children: viewDate.toLocaleString("default", { month: "long", year: "numeric" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setViewDate(new Date(year, month - 1, 1)),
+                      "aria-label": "Previous month",
+                      className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setViewDate(new Date(year, month + 1, 1)),
+                      "aria-label": "Next month",
+                      className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)] cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
                 {
-                  type: "button",
-                  onClick: () => setViewDate(new Date(year, month + 1, 1)),
-                  className: "p-1 rounded-lg hover:bg-[var(--ui-bg-tertiary)]",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                  role: "grid",
+                  "aria-labelledby": "range-month-heading",
+                  className: "grid grid-cols-7 gap-1 text-center",
+                  children: [
+                    Array.from({ length: firstDayIndex }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", {}, `empty-${i}`)),
+                    days.map((d, idx) => {
+                      const dStr = formatDate(d);
+                      const fromStr = range.from ? formatDate(range.from) : "";
+                      const toStr = range.to ? formatDate(range.to) : "";
+                      const isFrom = dStr === fromStr;
+                      const isTo = dStr === toStr;
+                      const isInRange = range.from && range.to && d > range.from && d < range.to;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          role: "gridcell",
+                          "aria-selected": Boolean(isFrom || isTo || isInRange),
+                          "aria-label": d.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" }),
+                          onClick: () => handleDayClick(d),
+                          className: cn(
+                            "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer",
+                            (isFrom || isTo) && "bg-[var(--ui-primary)] text-white shadow-md",
+                            isInRange && "bg-[var(--ui-primary)]/20 text-[var(--ui-primary)] rounded-none",
+                            !isFrom && !isTo && !isInRange && "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                          ),
+                          children: d.getDate()
+                        },
+                        idx
+                      );
+                    })
+                  ]
                 }
               )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
-            Array.from({ length: firstDayIndex }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", {}, `empty-${i}`)),
-            days.map((d, idx) => {
-              const dStr = formatDate(d);
-              const fromStr = range.from ? formatDate(range.from) : "";
-              const toStr = range.to ? formatDate(range.to) : "";
-              const isFrom = dStr === fromStr;
-              const isTo = dStr === toStr;
-              const isInRange = range.from && range.to && d > range.from && d < range.to;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => handleDayClick(d),
-                  className: cn(
-                    "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center transition-all cursor-pointer",
-                    (isFrom || isTo) && "bg-[var(--ui-primary)] text-white shadow-md",
-                    isInRange && "bg-[var(--ui-primary)]/20 text-[var(--ui-primary)] rounded-none",
-                    !isFrom && !isTo && !isInRange && "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
-                  ),
-                  children: d.getDate()
-                },
-                idx
-              );
-            })
-          ] })
-        ] })
+            ]
+          }
+        )
       }
     ) });
   }
 );
 DateRangePicker.displayName = "DateRangePicker";
 var TimePicker = React3.forwardRef(
-  ({ value: controlledVal, defaultValue = "12:00", onChange, format = "24h", className, disabled = false }, ref) => {
-    const [internalTime, setInternalTime] = React3.useState(defaultValue);
-    const time = controlledVal !== void 0 ? controlledVal : internalTime;
-    const [hours, setHours] = React3.useState(time.split(":")[0] || "12");
-    const [minutes, setMinutes] = React3.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] = React3.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 = React3.useRef(null);
+    const minuteListRef = React3.useRef(null);
+    const periodListRef = React3.useRef(null);
+    React3.useEffect(() => {
+      if (isOpen) {
+        const timer = setTimeout(() => {
+          const activeHourEl = hourListRef.current?.querySelector('[aria-selected="true"]');
+          activeHourEl?.focus();
+        }, 10);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+    const handleHourKeyDown = (e) => {
+      const idx = hourOptions.indexOf(hours);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const next = hourOptions[(idx + 1) % hourOptions.length];
+        updateTime(next, minutes, period);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prev = hourOptions[(idx - 1 + hourOptions.length) % hourOptions.length];
+        updateTime(prev, minutes, period);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        const activeMinEl = minuteListRef.current?.querySelector('[aria-selected="true"]') || minuteListRef.current?.querySelector('[role="option"]');
+        activeMinEl?.focus();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    };
+    const handleMinuteKeyDown = (e) => {
+      const idx = minuteOptions.indexOf(minutes);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const next = minuteOptions[(idx + 1) % minuteOptions.length];
+        updateTime(hours, next, period);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prev = minuteOptions[(idx - 1 + minuteOptions.length) % minuteOptions.length];
+        updateTime(hours, prev, period);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        const activeHourEl = hourListRef.current?.querySelector('[aria-selected="true"]');
+        activeHourEl?.focus();
+      } else if (e.key === "ArrowRight" && is12h) {
+        e.preventDefault();
+        const activePeriodEl = periodListRef.current?.querySelector('[aria-selected="true"]');
+        activePeriodEl?.focus();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    };
+    const handlePeriodKeyDown = (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const next = period === "AM" ? "PM" : "AM";
+        updateTime(hours, minutes, next);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        const activeMinEl = minuteListRef.current?.querySelector('[aria-selected="true"]');
+        activeMinEl?.focus();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+      }
     };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
-        isOpen,
-        onClose: () => setIsOpen(false),
+        open: isOpen,
+        onOpenChange: setIsOpen,
         trigger: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             disabled,
-            onClick: () => !disabled && setIsOpen(!isOpen),
-            className: "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner cursor-pointer",
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-label": `Selected time: ${time}`,
+            className: cn(
+              "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm shadow-inner transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+              disabled && "opacity-50 cursor-not-allowed"
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4 text-[var(--ui-text-muted)]" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm font-semibold text-[var(--ui-text-primary)]", children: time })
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm font-semibold text-[var(--ui-text-primary)]", children: time || placeholder })
             ] })
           }
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 w-52 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-bold text-[var(--ui-text-muted)] uppercase tracking-wider font-mono", children: [
-            "Select Time (",
-            format,
-            ")"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-36 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1", children: Array.from({ length: 24 }).map((_, i) => {
-              const h = String(i).padStart(2, "0");
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  onClick: () => updateTime(h, minutes),
-                  className: cn(
-                    "text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors",
-                    hours === h ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
-                  ),
-                  children: h
-                },
-                h
-              );
-            }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold", children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-36 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1", children: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "41", "45", "50", "55"].map((m) => /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                onClick: () => updateTime(hours, m),
-                className: cn(
-                  "text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors",
-                  minutes === m ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-label": "Choose time",
+            className: "p-4 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-bold text-[var(--ui-text-muted)] uppercase tracking-wider font-mono", children: [
+                "Select Time (",
+                format,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: hourListRef,
+                    tabIndex: 0,
+                    onKeyDown: handleHourKeyDown,
+                    className: "h-40 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1 focus:outline-none focus:ring-1 focus:ring-[var(--ui-primary)]",
+                    role: "listbox",
+                    "aria-label": "Hour",
+                    children: hourOptions.map((h) => {
+                      const isSelected = hours === h;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          tabIndex: isSelected ? 0 : -1,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          onClick: () => updateTime(h, minutes, period),
+                          className: cn(
+                            "text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-[var(--ui-primary)]",
+                            isSelected ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                          ),
+                          children: h
+                        },
+                        h
+                      );
+                    })
+                  }
                 ),
-                children: m
-              },
-              m
-            )) })
-          ] })
-        ] })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold", children: ":" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: minuteListRef,
+                    tabIndex: 0,
+                    onKeyDown: handleMinuteKeyDown,
+                    className: "h-40 overflow-y-auto border border-[var(--ui-border-subtle)] rounded-xl p-1 w-16 text-center space-y-1 focus:outline-none focus:ring-1 focus:ring-[var(--ui-primary)]",
+                    role: "listbox",
+                    "aria-label": "Minute",
+                    children: minuteOptions.map((m) => {
+                      const isSelected = minutes === m;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          tabIndex: isSelected ? 0 : -1,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          onClick: () => updateTime(hours, m, period),
+                          className: cn(
+                            "text-xs py-1 rounded-lg font-mono font-semibold cursor-pointer transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-[var(--ui-primary)]",
+                            isSelected ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                          ),
+                          children: m
+                        },
+                        m
+                      );
+                    })
+                  }
+                ),
+                is12h && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: periodListRef,
+                    tabIndex: 0,
+                    onKeyDown: handlePeriodKeyDown,
+                    className: "h-40 border border-[var(--ui-border-subtle)] rounded-xl p-1 w-14 text-center space-y-1 flex flex-col justify-center focus:outline-none focus:ring-1 focus:ring-[var(--ui-primary)]",
+                    role: "listbox",
+                    "aria-label": "Period",
+                    children: ["AM", "PM"].map((p) => {
+                      const isSelected = period === p;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          tabIndex: isSelected ? 0 : -1,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          onClick: () => updateTime(hours, minutes, p),
+                          className: cn(
+                            "text-xs py-2 rounded-lg font-mono font-semibold cursor-pointer transition-colors select-none outline-none focus-visible:ring-1 focus-visible:ring-[var(--ui-primary)]",
+                            isSelected ? "bg-[var(--ui-primary)] text-white" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                          ),
+                          children: p
+                        },
+                        p
+                      );
+                    })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
       }
     ) });
   }
@@ -1485,135 +2057,205 @@ var Combobox = React3.forwardRef(
     emptyText = "No items found.",
     disabled = false,
     clearable = true,
-    className
+    className,
+    name,
+    id: customId,
+    "aria-label": ariaLabel = "Select option"
   }, ref) => {
+    const baseId = React3.useId();
+    const comboId = customId || `combobox-${baseId}`;
+    const listboxId = `listbox-${baseId}`;
     const [internalVal, setInternalVal] = React3.useState(defaultValue);
-    const selectedValue = controlledVal !== void 0 ? controlledVal : internalVal;
+    const isControlled = controlledVal !== void 0;
+    const selectedValue = isControlled ? controlledVal : internalVal;
     const [search, setSearch] = React3.useState("");
     const [isOpen, setIsOpen] = React3.useState(false);
     const [highlightIndex, setHighlightIndex] = React3.useState(0);
+    const searchInputRef = React3.useRef(null);
+    const triggerRef = React3.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);
+    React3.useEffect(() => {
+      if (filteredOptions.length > 0) {
+        setHighlightIndex((prev) => Math.min(prev, filteredOptions.length - 1));
+      }
+    }, [filteredOptions.length]);
     const handleSelect = (val) => {
-      setInternalVal(val);
+      if (!isControlled) {
+        setInternalVal(val);
+      }
       onChange?.(val);
       setIsOpen(false);
       setSearch("");
+      triggerRef.current?.focus();
     };
     const handleClear = (e) => {
       e.stopPropagation();
-      setInternalVal("");
+      if (!isControlled) {
+        setInternalVal("");
+      }
       onChange?.("");
     };
     const handleKeyDown = (e) => {
       if (!isOpen) {
-        if (e.key === "ArrowDown" || e.key === "Enter") {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
           setIsOpen(true);
         }
         return;
       }
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setHighlightIndex((prev) => (prev + 1) % Math.max(1, filteredOptions.length));
+        let next = highlightIndex + 1;
+        while (next < filteredOptions.length && filteredOptions[next]?.disabled) {
+          next++;
+        }
+        if (next < filteredOptions.length) {
+          setHighlightIndex(next);
+        }
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        setHighlightIndex((prev) => (prev - 1 + filteredOptions.length) % Math.max(1, filteredOptions.length));
+        let prev = highlightIndex - 1;
+        while (prev >= 0 && filteredOptions[prev]?.disabled) {
+          prev--;
+        }
+        if (prev >= 0) {
+          setHighlightIndex(prev);
+        }
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        let first = 0;
+        while (first < filteredOptions.length && filteredOptions[first]?.disabled) {
+          first++;
+        }
+        setHighlightIndex(first);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        let last = filteredOptions.length - 1;
+        while (last >= 0 && filteredOptions[last]?.disabled) {
+          last--;
+        }
+        setHighlightIndex(last);
       } else if (e.key === "Enter") {
         e.preventDefault();
-        if (filteredOptions[highlightIndex] && !filteredOptions[highlightIndex].disabled) {
-          handleSelect(filteredOptions[highlightIndex].value);
+        const highlighted = filteredOptions[highlightIndex];
+        if (highlighted && !highlighted.disabled) {
+          handleSelect(highlighted.value);
         }
       } else if (e.key === "Escape") {
+        e.preventDefault();
         setIsOpen(false);
+        triggerRef.current?.focus();
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-      Popover,
-      {
-        isOpen,
-        onClose: () => setIsOpen(false),
-        trigger: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            disabled,
-            onClick: () => !disabled && setIsOpen(!isOpen),
-            onKeyDown: handleKeyDown,
-            className: cn(
-              "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer",
-              disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:ring-2 focus:ring-[var(--ui-primary)]/50"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
-                selectedOption?.icon,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: selectedOption ? selectedOption.label : placeholder })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: [
-                clearable && selectedValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    onClick: handleClear,
-                    className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-4 h-4 opacity-50 shrink-0" })
-              ] })
-            ]
-          }
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 w-3.5 h-3.5 text-[var(--ui-text-muted)] pointer-events-none" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "text",
-                autoFocus: true,
-                placeholder: searchPlaceholder,
-                value: search,
-                onChange: (e) => {
-                  setSearch(e.target.value);
-                  setHighlightIndex(0);
+    const activeDescendantId = filteredOptions[highlightIndex] ? `combobox-opt-${baseId}-${filteredOptions[highlightIndex].value}` : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("relative w-full", className), children: [
+      name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: selectedValue }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Popover,
+        {
+          isOpen,
+          onClose: () => setIsOpen(false),
+          trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: triggerRef,
+              id: comboId,
+              type: "button",
+              disabled,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-controls": isOpen ? listboxId : void 0,
+              "aria-label": ariaLabel,
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              onKeyDown: handleKeyDown,
+              className: cn(
+                "w-full h-10 px-3.5 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-left flex items-center justify-between text-sm transition-all shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+                disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
+                  selectedOption?.icon,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: selectedOption ? selectedOption.label : placeholder })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: [
+                  clearable && selectedValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      onClick: handleClear,
+                      className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-4 h-4 opacity-50 shrink-0" })
+                ] })
+              ]
+            }
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 w-72 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-2xl border border-[var(--ui-border-default)] shadow-2xl space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 w-3.5 h-3.5 text-[var(--ui-text-muted)] pointer-events-none" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  autoFocus: true,
+                  placeholder: searchPlaceholder,
+                  value: search,
+                  onChange: (e) => {
+                    setSearch(e.target.value);
+                    setHighlightIndex(0);
+                  },
+                  onKeyDown: handleKeyDown,
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-expanded": "true",
+                  "aria-controls": listboxId,
+                  "aria-activedescendant": activeDescendantId,
+                  className: "w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] focus:outline-none focus:border-[var(--ui-primary)] text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)]"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { id: listboxId, className: "max-h-56 overflow-y-auto space-y-0.5", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-xs text-[var(--ui-text-muted)]", children: emptyText }) : filteredOptions.map((opt, idx) => {
+              const isSelected = opt.value === selectedValue;
+              const isHighlighted = idx === highlightIndex;
+              const optId = `combobox-opt-${baseId}-${opt.value}`;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  id: optId,
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": opt.disabled,
+                  onClick: () => !opt.disabled && handleSelect(opt.value),
+                  onMouseEnter: () => !opt.disabled && setHighlightIndex(idx),
+                  className: cn(
+                    "flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium cursor-pointer transition-colors select-none",
+                    opt.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
+                    isSelected ? "bg-[var(--ui-primary)] text-white font-semibold shadow-xs" : isHighlighted ? "bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]" : "text-[var(--ui-text-primary)]"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+                      opt.icon,
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: opt.label }),
+                        opt.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] block truncate", isSelected ? "text-white/80" : "text-[var(--ui-text-muted)]"), children: opt.description })
+                      ] })
+                    ] }),
+                    isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 shrink-0" })
+                  ]
                 },
-                className: "w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] focus:outline-none focus:border-[var(--ui-primary)] text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)]"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto space-y-0.5", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-xs text-[var(--ui-text-muted)]", children: emptyText }) : filteredOptions.map((opt, idx) => {
-            const isSelected = opt.value === selectedValue;
-            const isHighlighted = idx === highlightIndex;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                role: "option",
-                "aria-selected": isSelected,
-                onClick: () => !opt.disabled && handleSelect(opt.value),
-                onMouseEnter: () => setHighlightIndex(idx),
-                className: cn(
-                  "flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium cursor-pointer transition-colors",
-                  opt.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
-                  isSelected ? "bg-[var(--ui-primary)] text-white font-semibold shadow-xs" : isHighlighted ? "bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]" : "text-[var(--ui-text-primary)]"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
-                    opt.icon,
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: opt.label }),
-                      opt.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] block truncate", isSelected ? "text-white/80" : "text-[var(--ui-text-muted)]"), children: opt.description })
-                    ] })
-                  ] }),
-                  isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 shrink-0" })
-                ]
-              },
-              opt.value
-            );
-          }) })
-        ] })
-      }
-    ) });
+                opt.value
+              );
+            }) })
+          ] })
+        }
+      )
+    ] });
   }
 );
 Combobox.displayName = "Combobox";
@@ -1630,28 +2272,69 @@ var MultiSelect = React3.forwardRef(
     className
   }, ref) => {
     const [internalVal, setInternalVal] = React3.useState(defaultValue);
-    const selectedValues = controlledVal !== void 0 ? controlledVal : internalVal;
+    const isControlled = controlledVal !== void 0;
+    const selectedValues = isControlled ? controlledVal : internalVal;
     const [search, setSearch] = React3.useState("");
     const [isOpen, setIsOpen] = React3.useState(false);
+    const [highlightedIndex, setHighlightedIndex] = React3.useState(0);
     const filteredOptions = options.filter(
       (opt) => opt.label.toLowerCase().includes(search.toLowerCase()) || opt.value.toLowerCase().includes(search.toLowerCase())
     );
     const toggleOption = (val) => {
+      const opt = options.find((o) => o.value === val);
+      if (opt?.disabled) return;
       const next = selectedValues.includes(val) ? selectedValues.filter((v) => v !== val) : [...selectedValues, val];
-      setInternalVal(next);
+      if (!isControlled) {
+        setInternalVal(next);
+      }
       onChange?.(next);
     };
     const removeTag = (val, e) => {
       e?.stopPropagation?.();
       const next = selectedValues.filter((v) => v !== val);
-      setInternalVal(next);
+      if (!isControlled) {
+        setInternalVal(next);
+      }
       onChange?.(next);
     };
     const clearAll = (e) => {
       e?.stopPropagation?.();
-      setInternalVal([]);
+      if (!isControlled) {
+        setInternalVal([]);
+      }
       onChange?.([]);
     };
+    const handleSearchKeyDown = (e) => {
+      if (filteredOptions.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          let next = (prev + 1) % filteredOptions.length;
+          while (filteredOptions[next]?.disabled && next !== prev) {
+            next = (next + 1) % filteredOptions.length;
+          }
+          return next;
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          let next = (prev - 1 + filteredOptions.length) % filteredOptions.length;
+          while (filteredOptions[next]?.disabled && next !== prev) {
+            next = (next - 1 + filteredOptions.length) % filteredOptions.length;
+          }
+          return next;
+        });
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const current = filteredOptions[highlightedIndex];
+        if (current && !current.disabled) {
+          toggleOption(current.value);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       Popover,
       {
@@ -1660,9 +2343,19 @@ var MultiSelect = React3.forwardRef(
         trigger: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            tabIndex: disabled ? -1 : 0,
+            role: "combobox",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
             onClick: () => !disabled && setIsOpen(!isOpen),
+            onKeyDown: (e) => {
+              if ((e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && !disabled) {
+                e.preventDefault();
+                setIsOpen(true);
+              }
+            },
             className: cn(
-              "min-h-10 py-1.5 px-3 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] flex flex-wrap items-center justify-between gap-1.5 text-sm transition-all shadow-inner cursor-pointer",
+              "min-h-10 py-1.5 px-3 rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] flex flex-wrap items-center justify-between gap-1.5 text-sm transition-all shadow-inner cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
               disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]"
             ),
             children: [
@@ -1691,7 +2384,7 @@ var MultiSelect = React3.forwardRef(
                   "span",
                   {
                     onClick: clearAll,
-                    className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors",
+                    className: "p-1 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer",
                     children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
                   }
                 ),
@@ -1710,20 +2403,30 @@ var MultiSelect = React3.forwardRef(
                 autoFocus: true,
                 placeholder: searchPlaceholder,
                 value: search,
-                onChange: (e) => setSearch(e.target.value),
+                onChange: (e) => {
+                  setSearch(e.target.value);
+                  setHighlightedIndex(0);
+                },
+                onKeyDown: handleSearchKeyDown,
                 className: "w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] focus:outline-none focus:border-[var(--ui-primary)] text-[var(--ui-text-primary)]"
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto space-y-0.5", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-xs text-[var(--ui-text-muted)]", children: "No options found." }) : filteredOptions.map((opt) => {
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto space-y-0.5", role: "listbox", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-xs text-[var(--ui-text-muted)]", children: "No options found." }) : filteredOptions.map((opt, index) => {
             const isChecked = selectedValues.includes(opt.value);
+            const isHighlighted = highlightedIndex === index;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                onClick: () => toggleOption(opt.value),
+                role: "option",
+                "aria-selected": isChecked,
+                "aria-disabled": opt.disabled,
+                onClick: () => !opt.disabled && toggleOption(opt.value),
                 className: cn(
-                  "flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium cursor-pointer transition-colors",
-                  isChecked ? "bg-[var(--ui-primary)]/15 text-[var(--ui-primary)] font-semibold" : "hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)]"
+                  "flex items-center justify-between px-3 py-2 rounded-xl text-xs font-medium transition-colors select-none",
+                  opt.disabled ? "opacity-40 cursor-not-allowed text-[var(--ui-text-muted)]" : "cursor-pointer",
+                  isChecked && "text-[var(--ui-primary)] font-semibold",
+                  isHighlighted && !opt.disabled && "bg-[var(--ui-primary)]/15"
                 ),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
@@ -1841,26 +2544,58 @@ var FileUpload = React3.forwardRef(
     const [isDragOver, setIsDragOver] = React3.useState(false);
     const [fileList, setFileList] = React3.useState([]);
     const inputRef = React3.useRef(null);
+    const fileListRef = React3.useRef(fileList);
+    fileListRef.current = fileList;
+    React3.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) {
@@ -1886,7 +2621,13 @@ var FileUpload = React3.forwardRef(
       if (inputRef.current) inputRef.current.value = "";
     };
     const removeFile = (id) => {
-      setFileList((prev) => prev.filter((f) => f.id !== id));
+      setFileList((prev) => {
+        const item = prev.find((f) => f.id === id);
+        if (item?.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl);
+        }
+        return prev.filter((f) => f.id !== id);
+      });
       onFileRemove?.(id);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full space-y-4", className), children: [
@@ -1994,8 +2735,12 @@ var NumberInput = React3.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [internalVal, setInternalVal] = React3.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) {
@@ -2006,14 +2751,12 @@ var NumberInput = React3.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;
@@ -2023,8 +2766,7 @@ var NumberInput = React3.forwardRef(
       const parsed = parseFloat(val);
       if (!isNaN(parsed)) {
         const next = clamp(parsed);
-        setInternalVal(next);
-        onChange?.(next);
+        setValue(next);
       }
     };
     const handleKeyDown = (e) => {
@@ -2045,7 +2787,7 @@ var NumberInput = React3.forwardRef(
             type: "button",
             disabled: disabled || value <= min,
             onClick: handleDecrement,
-            className: "px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-r border-[var(--ui-border-subtle)]",
+            className: "px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-r border-[var(--ui-border-subtle)] cursor-pointer",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3.5 h-3.5" })
           }
         ),
@@ -2068,7 +2810,7 @@ var NumberInput = React3.forwardRef(
             type: "button",
             disabled: disabled || value >= max,
             onClick: handleIncrement,
-            className: "px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-l border-[var(--ui-border-subtle)]",
+            className: "px-3 h-full flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-30 disabled:pointer-events-none text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors border-l border-[var(--ui-border-subtle)] cursor-pointer",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3.5 h-3.5" })
           }
         )
@@ -2099,7 +2841,7 @@ var NumberInput = React3.forwardRef(
             type: "button",
             disabled: disabled || value >= max,
             onClick: handleIncrement,
-            className: "px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-t text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors",
+            className: "px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-t text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors cursor-pointer",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3" })
           }
         ),
@@ -2109,7 +2851,7 @@ var NumberInput = React3.forwardRef(
             type: "button",
             disabled: disabled || value <= min,
             onClick: handleDecrement,
-            className: "px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-b text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors",
+            className: "px-1.5 h-1/2 flex items-center justify-center hover:bg-[var(--ui-bg-tertiary)] rounded-b text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] disabled:opacity-30 transition-colors cursor-pointer",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3 h-3" })
           }
         )
@@ -2138,19 +2880,27 @@ var CurrencyInput = React3.forwardRef(
   }, ref) => {
     const symbol = currencySymbol || (currency === "VND" ? "\u20AB" : currency === "EUR" ? "\u20AC" : "$");
     const isSuffix = position === "suffix" || currency === "VND";
-    const [internalVal, setInternalVal] = React3.useState(defaultValue);
-    const value = controlledVal !== void 0 ? controlledVal : internalVal;
-    const [displayVal, setDisplayVal] = React3.useState(formatCurrencyString(value));
+    const [value, setValue, isControlled] = useControllableState({
+      value: controlledVal,
+      defaultValue,
+      onChange,
+      name: "CurrencyInput"
+    });
+    const [internalInputString, setInternalInputString] = React3.useState(formatCurrencyString(value));
     React3.useEffect(() => {
-      setDisplayVal(formatCurrencyString(value));
-    }, [value]);
+      if (!isControlled) {
+        setInternalInputString(formatCurrencyString(value));
+      }
+    }, [value, isControlled]);
+    const displayVal = isControlled ? formatCurrencyString(value) : internalInputString;
     const handleInputChange = (e) => {
       const raw = e.target.value.replace(/[^0-9.]/g, "");
       const parsed = parseFloat(raw);
       const num = isNaN(parsed) ? 0 : parsed;
-      setDisplayVal(raw ? formatCurrencyString(num) : "");
-      setInternalVal(num);
-      onChange?.(num);
+      if (!isControlled) {
+        setInternalInputString(raw ? formatCurrencyString(num) : "");
+      }
+      setValue(num);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full flex items-center", className), children: [
       !isSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-3.5 text-sm font-bold text-[var(--ui-text-muted)] pointer-events-none font-mono", children: symbol }),
@@ -2246,6 +2996,7 @@ MaskedInput.displayName = "MaskedInput";
 
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
+exports.CheckboxGroupContext = CheckboxGroupContext;
 exports.Combobox = Combobox;
 exports.CurrencyInput = CurrencyInput;
 exports.DatePicker = DatePicker;
@@ -2282,6 +3033,7 @@ exports.selectVariants = selectVariants;
 exports.switchThumbVariants = switchThumbVariants;
 exports.switchVariants = switchVariants;
 exports.textareaVariants = textareaVariants;
+exports.useCheckboxGroup = useCheckboxGroup;
 exports.useFormField = useFormField;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map