@thangnqdev/ui 0.1.0

package/dist/forms/index.cjs

@@ -0,0 +1,2287 @@
+'use strict';
+
+var React3 = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var reactDom = require('react-dom');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+
+// src/forms/FormField.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var labelVariants = classVarianceAuthority.cva(
+  "text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[var(--ui-text-primary)] inline-flex items-center gap-1",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      error: {
+        true: "text-[var(--ui-error)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: false
+    }
+  }
+);
+var Label = React3.forwardRef(
+  ({ className, size, error, required, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        ref,
+        className: cn(labelVariants({ size, error }), className),
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ui-error)] ml-0.5", "aria-hidden": "true", children: "*" })
+        ]
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var FormFieldContext = React3.createContext(null);
+function useFormField() {
+  const context = React3.useContext(FormFieldContext);
+  return context;
+}
+var FormField = React3.forwardRef(
+  ({ className, isRequired, isInvalid, isDisabled, children, ...props }, ref) => {
+    const generatedId = React3.useId();
+    const id = props.id || generatedId;
+    const labelId = `${id}-label`;
+    const descriptionId = `${id}-description`;
+    const errorId = `${id}-error`;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldContext.Provider,
+      {
+        value: {
+          id,
+          labelId,
+          descriptionId,
+          errorId,
+          isRequired,
+          isInvalid,
+          isDisabled
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("space-y-1.5 w-full", className), ...props, children })
+      }
+    );
+  }
+);
+FormField.displayName = "FormField";
+var FormLabel = React3.forwardRef(
+  ({ className, required, children, ...props }, ref) => {
+    const context = useFormField();
+    const isRequired = required ?? context?.isRequired;
+    const isError = context?.isInvalid;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Label,
+      {
+        ref,
+        id: context?.labelId,
+        htmlFor: context?.id,
+        required: isRequired,
+        error: isError,
+        className,
+        ...props,
+        children
+      }
+    );
+  }
+);
+FormLabel.displayName = "FormLabel";
+var FormHelperText = React3.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const context = useFormField();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref,
+        id: context?.descriptionId,
+        className: cn("text-xs text-[var(--ui-text-muted)]", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+FormHelperText.displayName = "FormHelperText";
+var FormErrorMessage = React3.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const context = useFormField();
+    if (!context?.isInvalid && !children) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref,
+        id: context?.errorId,
+        role: "alert",
+        className: cn("text-xs font-medium text-[var(--ui-error)]", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+FormErrorMessage.displayName = "FormErrorMessage";
+var inputVariants = classVarianceAuthority.cva(
+  "w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)]/70 backdrop-blur-md text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]/70 focus-visible:border-[var(--ui-primary)] focus-visible:shadow-[0_0_16px_rgba(99,102,241,0.2)] disabled:cursor-not-allowed disabled:opacity-50 shadow-inner",
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 text-xs",
+        md: "h-10 px-3.5 text-sm",
+        lg: "h-12 px-4 text-base"
+      },
+      variant: {
+        default: "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]",
+        filled: "bg-[var(--ui-bg-secondary)] border-transparent hover:bg-[var(--ui-bg-tertiary)]"
+      },
+      isInvalid: {
+        true: "border-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]/70 focus-visible:shadow-[0_0_16px_rgba(244,63,94,0.25)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+      isInvalid: false
+    }
+  }
+);
+var Input = React3.forwardRef(
+  ({
+    className,
+    type = "text",
+    size,
+    variant,
+    isInvalid: customInvalid,
+    prefixIcon,
+    suffixIcon,
+    clearable,
+    onClear,
+    value,
+    onChange,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    const formField = useFormField();
+    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const inputId = id || formField?.id;
+    const isControlled = value !== void 0;
+    const [uncontrolledVal, setUncontrolledVal] = React3.useState(
+      props.defaultValue !== void 0 ? String(props.defaultValue) : ""
+    );
+    const innerRef = React3__default.default.useRef(null);
+    const handleRef = (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setUncontrolledVal(e.target.value);
+      }
+      onChange?.(e);
+    };
+    const handleClear = () => {
+      if (!isControlled && innerRef.current) {
+        innerRef.current.value = "";
+        setUncontrolledVal("");
+        const event = new Event("input", { bubbles: true });
+        innerRef.current.dispatchEvent(event);
+      }
+      onClear?.();
+    };
+    const hasValue = isControlled ? Boolean(value) : Boolean(uncontrolledVal || innerRef.current?.value);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full flex items-center", children: [
+      prefixIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 flex items-center pointer-events-none text-[var(--ui-text-muted)]", children: prefixIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: handleRef,
+          id: inputId,
+          type,
+          disabled: isDisabled,
+          ...isControlled ? { value } : {},
+          onChange: handleChange,
+          "aria-invalid": isInvalid,
+          "aria-describedby": isInvalid ? formField?.errorId : formField?.descriptionId || void 0,
+          className: cn(
+            inputVariants({ size, variant, isInvalid }),
+            prefixIcon && "pl-9",
+            (suffixIcon || clearable && hasValue) && "pr-9",
+            className
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-3 flex items-center gap-1 text-[var(--ui-text-muted)]", children: [
+        clearable && hasValue && !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleClear,
+            className: "p-0.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] transition-colors",
+            "aria-label": "Clear input",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        suffixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none flex items-center", children: suffixIcon })
+      ] })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Kbd = React3.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "kbd",
+      {
+        ref,
+        className: cn(
+          "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--ui-border-default)] bg-[var(--ui-bg-tertiary)] px-1.5 font-mono text-[10px] font-semibold text-[var(--ui-text-muted)] opacity-100 shadow-sm",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+var SearchInput = React3.forwardRef(
+  ({ shortcut, clearable = true, suffixIcon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        ref,
+        type: "search",
+        clearable,
+        prefixIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "w-4 h-4" }),
+        suffixIcon: shortcut ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: shortcut }),
+          suffixIcon
+        ] }) : suffixIcon,
+        ...props
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+var PasswordInput = React3.forwardRef(
+  ({ showToggle = true, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React3.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        ref,
+        type: showPassword ? "text" : "password",
+        suffixIcon: showToggle ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowPassword(!showPassword),
+            className: "p-1 rounded hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] pointer-events-auto transition-colors",
+            "aria-label": showPassword ? "Hide password" : "Show password",
+            children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4" })
+          }
+        ) : void 0,
+        ...props
+      }
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var textareaVariants = classVarianceAuthority.cva(
+  "w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] p-3 text-sm text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]",
+  {
+    variants: {
+      variant: {
+        default: "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]",
+        filled: "bg-[var(--ui-bg-secondary)] border-transparent hover:bg-[var(--ui-bg-tertiary)]"
+      },
+      isInvalid: {
+        true: "border-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]",
+        false: ""
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      isInvalid: false,
+      resize: "vertical"
+    }
+  }
+);
+var Textarea = React3.forwardRef(
+  ({
+    className,
+    variant,
+    isInvalid: customInvalid,
+    resize,
+    autoResize = false,
+    disabled,
+    value,
+    onChange,
+    id,
+    ...props
+  }, ref) => {
+    const formField = useFormField();
+    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const inputId = id || formField?.id;
+    const innerRef = React3.useRef(null);
+    const setMergedRef = (element) => {
+      innerRef.current = element;
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref) {
+        ref.current = element;
+      }
+    };
+    const handleInput = () => {
+      if (autoResize && innerRef.current) {
+        innerRef.current.style.height = "auto";
+        innerRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+      }
+    };
+    React3.useEffect(() => {
+      if (autoResize && innerRef.current) {
+        handleInput();
+      }
+    }, [value, autoResize]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: setMergedRef,
+        id: inputId,
+        disabled: isDisabled,
+        value,
+        onChange: (e) => {
+          handleInput();
+          onChange?.(e);
+        },
+        "aria-invalid": isInvalid,
+        "aria-describedby": isInvalid ? formField?.errorId : formField?.descriptionId || void 0,
+        className: cn(
+          textareaVariants({
+            variant,
+            isInvalid,
+            resize: autoResize ? "none" : resize
+          }),
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var selectVariants = classVarianceAuthority.cva(
+  "w-full rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:cursor-not-allowed disabled:opacity-50 appearance-none pr-10",
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 text-xs",
+        md: "h-10 px-3.5 text-sm",
+        lg: "h-12 px-4 text-base"
+      },
+      variant: {
+        default: "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]",
+        filled: "bg-[var(--ui-bg-secondary)] border-transparent hover:bg-[var(--ui-bg-tertiary)]"
+      },
+      isInvalid: {
+        true: "border-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+      isInvalid: false
+    }
+  }
+);
+var Select = React3.forwardRef(
+  ({
+    className,
+    size,
+    variant,
+    isInvalid: customInvalid,
+    options,
+    placeholder,
+    disabled,
+    children,
+    id,
+    ...props
+  }, ref) => {
+    const formField = useFormField();
+    const isInvalid = customInvalid ?? formField?.isInvalid ?? false;
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const inputId = id || formField?.id;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          ref,
+          id: inputId,
+          disabled: isDisabled,
+          "aria-invalid": isInvalid,
+          "aria-describedby": isInvalid ? formField?.errorId : formField?.descriptionId || void 0,
+          className: cn(selectVariants({ size, variant, isInvalid }), className),
+          ...props,
+          children: [
+            placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+            options ? options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)) : children
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 flex items-center pointer-events-none text-[var(--ui-text-muted)]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-4 h-4" }) })
+    ] });
+  }
+);
+Select.displayName = "Select";
+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)]",
+  {
+    variants: {
+      size: {
+        sm: "w-4 h-4 text-xs",
+        md: "w-5 h-5 text-sm",
+        lg: "w-6 h-6 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Checkbox = React3.forwardRef(
+  ({ className, size, indeterminate = false, label, checked, disabled, id, onChange, ...props }, ref) => {
+    const formField = useFormField();
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const checkboxId = id || formField?.id;
+    return /* @__PURE__ */ 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",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          "flex gap-2",
+          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+var RadioGroupContext = 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",
+  {
+    variants: {
+      size: {
+        sm: "w-4 h-4",
+        md: "w-5 h-5",
+        lg: "w-6 h-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Radio = React3.forwardRef(
+  ({ className, size, label, value, checked, disabled, id, onChange, ...props }, ref) => {
+    const group = React3.useContext(RadioGroupContext);
+    const isChecked = checked ?? (group?.value !== void 0 ? group.value === value : false);
+    const isDisabled = disabled ?? group?.disabled ?? false;
+    const name = props.name || group?.name;
+    const handleChange = (e) => {
+      onChange?.(e);
+      if (group?.onChange) {
+        group.onChange(value);
+      }
+    };
+    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: "radio",
+            name,
+            value,
+            id,
+            disabled: isDisabled,
+            checked: isChecked,
+            onChange: handleChange,
+            className: "sr-only peer",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              radioVariants({ size }),
+              isChecked && "border-[var(--ui-primary)]",
+              className
+            ),
+            children: isChecked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-[var(--ui-primary)] animate-in zoom-in-75 duration-150" })
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-[var(--ui-text-primary)]", children: label })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = React3.forwardRef(
+  ({
+    className,
+    name,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    orientation = "vertical",
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const [val, setVal] = React3__default.default.useState(defaultValue || "");
+    const currentValue = controlledValue !== void 0 ? controlledValue : val;
+    const handleChange = (newValue) => {
+      setVal(newValue);
+      onValueChange?.(newValue);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadioGroupContext.Provider,
+      {
+        value: {
+          name,
+          value: currentValue,
+          onChange: handleChange,
+          disabled
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            role: "radiogroup",
+            className: cn(
+              "flex gap-2",
+              orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var switchVariants = classVarianceAuthority.cva(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all duration-200 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#34c759]/30 disabled:cursor-not-allowed disabled:opacity-50 bg-[var(--ui-border-strong)] data-[state=checked]:bg-[#34c759] dark:data-[state=checked]:bg-[#30d158] shadow-inner",
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9 p-0.5",
+        md: "h-6.5 w-12 p-0.5",
+        lg: "h-8 w-15 p-1"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var switchThumbVariants = classVarianceAuthority.cva(
+  "pointer-events-none block rounded-full bg-white shadow-[0_2px_4px_rgba(0,0,0,0.25)] ring-0 transition-transform duration-200 ease-out data-[state=unchecked]:translate-x-0",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 data-[state=checked]:translate-x-4",
+        md: "h-5.5 w-5.5 data-[state=checked]:translate-x-5.5",
+        lg: "h-6 w-6 data-[state=checked]:translate-x-7"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Switch = React3.forwardRef(
+  ({ className, size, label, checked, defaultChecked, onCheckedChange, disabled, id, onChange, ...props }, ref) => {
+    const isControlled = checked !== void 0;
+    const [internalChecked, setInternalChecked] = React3.useState(defaultChecked ?? false);
+    const isChecked = isControlled ? checked : internalChecked;
+    const formField = useFormField();
+    const isDisabled = disabled ?? formField?.isDisabled ?? false;
+    const switchId = id || formField?.id;
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalChecked(e.target.checked);
+      }
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("inline-flex items-center gap-3 select-none cursor-pointer", isDisabled && "cursor-not-allowed opacity-50"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            role: "switch",
+            id: switchId,
+            disabled: isDisabled,
+            checked: isChecked,
+            onChange: handleChange,
+            className: "sr-only peer",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-state": isChecked ? "checked" : "unchecked",
+            className: cn(switchVariants({ size }), className),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-state": isChecked ? "checked" : "unchecked",
+                className: cn(switchThumbVariants({ size }))
+              }
+            )
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-[var(--ui-text-primary)]", children: label })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var Slider = React3.forwardRef(
+  ({
+    className,
+    value: controlledValue,
+    defaultValue = 0,
+    min = 0,
+    max = 100,
+    step = 1,
+    showValue = false,
+    formatValue = (v) => `${v}`,
+    onChange,
+    disabled,
+    ...props
+  }, ref) => {
+    const [val, setVal] = React3__default.default.useState(defaultValue);
+    const currentValue = controlledValue !== void 0 ? controlledValue : val;
+    const percentage = Math.min(100, Math.max(0, (currentValue - min) / (max - min) * 100));
+    const handleChange = (e) => {
+      const num = Number(e.target.value);
+      setVal(num);
+      onChange?.(num);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { 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: "h-full bg-[var(--ui-primary)] transition-all duration-75",
+            style: { width: `${percentage}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: "range",
+            min,
+            max,
+            step,
+            value: currentValue,
+            disabled,
+            onChange: handleChange,
+            className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed",
+            ...props
+          }
+        ),
+        /* @__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 transition-transform duration-75 -translate-x-1/2",
+            style: { left: `${percentage}%` }
+          }
+        )
+      ] }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[2.5rem] text-right", children: formatValue(currentValue) })
+    ] });
+  }
+);
+Slider.displayName = "Slider";
+var RangeSlider = React3.forwardRef(
+  ({
+    min = 0,
+    max = 100,
+    step = 1,
+    value: controlledValue,
+    defaultValue = [20, 80],
+    onChange,
+    showValue = false,
+    formatValue = (v) => `${v}`,
+    className,
+    disabled = false
+  }, 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 handleMaxChange = (e) => {
+      const val = Math.max(Number(e.target.value), minVal + step);
+      setStateValue([minVal, val]);
+      onChange?.([minVal, val]);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full flex items-center gap-4", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full flex items-center h-6 select-none touch-none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-2 rounded-full bg-[var(--ui-border-default)] overflow-hidden relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute h-full bg-[var(--ui-primary)]",
+            style: {
+              left: `${minPercentage}%`,
+              width: `${maxPercentage - minPercentage}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "range",
+            min,
+            max,
+            step,
+            value: minVal,
+            disabled,
+            onChange: handleMinChange,
+            className: "absolute inset-0 w-full h-full opacity-0 pointer-events-auto cursor-pointer z-20"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "range",
+            min,
+            max,
+            step,
+            value: maxVal,
+            disabled,
+            onChange: handleMaxChange,
+            className: "absolute inset-0 w-full h-full opacity-0 pointer-events-auto cursor-pointer z-30"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none -translate-x-1/2 z-10",
+            style: { left: `${minPercentage}%` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute w-5 h-5 rounded-full bg-white border-2 border-[var(--ui-primary)] shadow-md pointer-events-none -translate-x-1/2 z-10",
+            style: { left: `${maxPercentage}%` }
+          }
+        )
+      ] }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold font-mono text-[var(--ui-text-secondary)] min-w-[5rem] text-right", children: [
+        formatValue(minVal),
+        " - ",
+        formatValue(maxVal)
+      ] })
+    ] });
+  }
+);
+RangeSlider.displayName = "RangeSlider";
+var PinInput = React3.forwardRef(
+  ({
+    className,
+    length = 4,
+    value: controlledValue,
+    defaultValue = "",
+    onChange,
+    onComplete,
+    mask = false,
+    disabled = false,
+    isInvalid = false,
+    autoFocus = false,
+    ...props
+  }, ref) => {
+    const [pins, setPins] = React3.useState(() => {
+      const initial = (controlledValue !== void 0 ? controlledValue : defaultValue).slice(0, length);
+      return Array.from({ length }, (_, i) => initial[i] || "");
+    });
+    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();
+      }
+    }, [autoFocus]);
+    const handleDigitChange = (index, val) => {
+      const sanitized = val.replace(/[^0-9a-zA-Z]/g, "").slice(-1);
+      const newPins = [...pins];
+      newPins[index] = sanitized;
+      setPins(newPins);
+      const combined = newPins.join("");
+      onChange?.(combined);
+      if (sanitized && index < length - 1) {
+        inputsRef.current[index + 1]?.focus();
+      }
+      if (combined.length === length && !newPins.includes("")) {
+        onComplete?.(combined);
+      }
+    };
+    const handleKeyDown = (index, e) => {
+      if (e.key === "Backspace" && !pins[index] && index > 0) {
+        inputsRef.current[index - 1]?.focus();
+      }
+    };
+    const handlePaste = (e) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text").slice(0, length);
+      if (!pasted) return;
+      const newPins = Array.from({ length }, (_, i) => pasted[i] || "");
+      setPins(newPins);
+      const combined = newPins.join("");
+      onChange?.(combined);
+      const nextEmptyIndex = newPins.findIndex((p) => !p);
+      const focusIndex = nextEmptyIndex === -1 ? length - 1 : nextEmptyIndex;
+      inputsRef.current[focusIndex]?.focus();
+      if (combined.length === length && !newPins.includes("")) {
+        onComplete?.(combined);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "group", "aria-label": "PIN Code Input", className: cn("flex items-center gap-2", className), ...props, children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputsRef.current[index] = el;
+        },
+        type: mask ? "password" : "text",
+        inputMode: "numeric",
+        maxLength: 1,
+        disabled,
+        value: pins[index],
+        onChange: (e) => handleDigitChange(index, e.target.value),
+        onKeyDown: (e) => handleKeyDown(index, e),
+        onPaste: handlePaste,
+        className: cn(
+          "w-11 h-12 text-center text-lg font-bold font-mono rounded-[var(--ui-radius-md)] border bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:opacity-50 disabled:cursor-not-allowed",
+          isInvalid ? "border-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)]"
+        )
+      },
+      index
+    )) });
+  }
+);
+PinInput.displayName = "PinInput";
+function Portal({ children, container }) {
+  const [mounted, setMounted] = React3.useState(false);
+  React3.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  if (!mounted) return null;
+  const target = container || (typeof document !== "undefined" ? document.body : null);
+  if (!target) return null;
+  return reactDom.createPortal(children, target);
+}
+var Popover = ({
+  trigger,
+  children,
+  isOpen: controlledIsOpen,
+  onClose,
+  placement = "bottom",
+  className
+}) => {
+  const [internalIsOpen, setInternalIsOpen] = React3.useState(false);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const [coords, setCoords] = React3.useState({ top: 0, left: 0 });
+  const triggerRef = React3.useRef(null);
+  const popoverRef = React3.useRef(null);
+  const calculatePosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      let top = 0;
+      let left = 0;
+      if (placement === "bottom") {
+        top = rect.bottom + window.scrollY + 8;
+        left = rect.left + window.scrollX;
+      } else if (placement === "top") {
+        top = rect.top + window.scrollY - 8;
+        left = rect.left + window.scrollX;
+      } else if (placement === "right") {
+        top = rect.top + window.scrollY;
+        left = rect.right + window.scrollX + 8;
+      } else if (placement === "left") {
+        top = rect.top + window.scrollY;
+        left = rect.left + window.scrollX - 8;
+      }
+      setCoords({ top, left });
+    }
+  };
+  const handleToggle = () => {
+    if (!isOpen) {
+      calculatePosition();
+    }
+    if (controlledIsOpen !== void 0) {
+      if (isOpen) onClose?.();
+    } else {
+      setInternalIsOpen(!internalIsOpen);
+    }
+  };
+  React3.useEffect(() => {
+    if (isOpen) {
+      calculatePosition();
+    }
+  }, [isOpen]);
+  React3.useEffect(() => {
+    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);
+        }
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleOutside);
+      window.addEventListener("resize", calculatePosition);
+      window.addEventListener("scroll", calculatePosition);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("resize", calculatePosition);
+      window.removeEventListener("scroll", calculatePosition);
+    };
+  }, [isOpen, controlledIsOpen, onClose]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleToggle, className: "w-full inline-block cursor-pointer", children: trigger }),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: popoverRef,
+        style: {
+          top: `${coords.top}px`,
+          left: `${coords.left}px`,
+          position: "absolute"
+        },
+        className: cn(
+          "z-50 min-w-[12rem] rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] p-4 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95",
+          placement === "top" && "-translate-y-full",
+          placement === "left" && "-translate-x-full",
+          className
+        ),
+        children
+      }
+    ) })
+  ] });
+};
+function formatDate(d) {
+  if (!d) return "";
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function formatDisplayDate(d) {
+  if (!d) return "";
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+}
+var DatePicker = React3.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    placeholder = "Select date...",
+    minDate,
+    maxDate,
+    disabled = false,
+    clearable = true,
+    className,
+    presets
+  }, ref) => {
+    const [internalDate, setInternalDate] = React3.useState(
+      defaultValue !== void 0 ? defaultValue : null
+    );
+    const selectedDate = controlledValue !== void 0 ? controlledValue : internalDate;
+    const [viewDate, setViewDate] = React3.useState(selectedDate || /* @__PURE__ */ new Date());
+    const [isOpen, setIsOpen] = React3.useState(false);
+    React3.useEffect(() => {
+      if (selectedDate) {
+        setViewDate(selectedDate);
+      }
+    }, [selectedDate]);
+    const handleSelectDate = (d) => {
+      setInternalDate(d);
+      onChange?.(d);
+      setIsOpen(false);
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      setInternalDate(null);
+      onChange?.(null);
+    };
+    const prevMonth = () => {
+      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1));
+    };
+    const nextMonth = () => {
+      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1));
+    };
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDayIndex = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const daysInPrevMonth = new Date(year, month, 0).getDate();
+    const days = [];
+    for (let i = firstDayIndex - 1; i >= 0; i--) {
+      const d = new Date(year, month - 1, daysInPrevMonth - i);
+      const isDis = minDate && d < minDate || maxDate && d > maxDate;
+      days.push({ date: d, currentMonth: false, disabled: Boolean(isDis) });
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      const d = new Date(year, month, i);
+      const isDis = minDate && d < minDate || maxDate && d > maxDate;
+      days.push({ date: d, currentMonth: true, disabled: Boolean(isDis) });
+    }
+    const totalSlots = days.length > 35 ? 42 : 35;
+    const remainingSlots = totalSlots - days.length;
+    for (let i = 1; i <= remainingSlots; i++) {
+      const d = new Date(year, month + 1, i);
+      const isDis = minDate && d < minDate || maxDate && d > maxDate;
+      days.push({ date: d, currentMonth: false, disabled: Boolean(isDis) });
+    }
+    const todayStr = formatDate(/* @__PURE__ */ new Date());
+    const selectedStr = selectedDate ? formatDate(selectedDate) : "";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        isOpen,
+        onClose: () => setIsOpen(false),
+        trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            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: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedDate ? "text-[var(--ui-text-primary)] font-medium" : "text-[var(--ui-text-muted)]", children: selectedDate ? formatDisplayDate(selectedDate) : placeholder })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: clearable && selectedDate && !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" })
+                }
+              ) })
+            ]
+          }
+        ),
+        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(
+                "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" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  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" })
+                }
+              )
+            ] })
+          ] }),
+          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;
+    const [viewDate, setViewDate] = React3.useState(range.from || /* @__PURE__ */ new Date());
+    const [isOpen, setIsOpen] = React3.useState(false);
+    const handleDayClick = (d) => {
+      let next;
+      if (!range.from || range.from && range.to) {
+        next = { from: d, to: null };
+      } else {
+        if (d < range.from) {
+          next = { from: d, to: range.from };
+        } else {
+          next = { from: range.from, to: d };
+          setIsOpen(false);
+        }
+      }
+      setInternalRange(next);
+      onChange?.(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();
+    const month = viewDate.getMonth();
+    const firstDayIndex = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const days = [];
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push(new Date(year, month, i));
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        isOpen,
+        onClose: () => setIsOpen(false),
+        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",
+            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",
+                {
+                  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" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__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");
+    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);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        isOpen,
+        onClose: () => setIsOpen(false),
+        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",
+            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 })
+            ] })
+          }
+        ),
+        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: m
+              },
+              m
+            )) })
+          ] })
+        ] })
+      }
+    ) });
+  }
+);
+TimePicker.displayName = "TimePicker";
+var chipVariants = classVarianceAuthority.cva(
+  "inline-flex items-center gap-1.5 rounded-full font-medium transition-colors select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)] border border-[var(--ui-border-default)]",
+        primary: "bg-[var(--ui-primary)]/15 text-[var(--ui-primary)] border border-[var(--ui-primary)]/30",
+        secondary: "bg-[var(--ui-secondary)]/15 text-[var(--ui-secondary)] border border-[var(--ui-secondary)]/30",
+        success: "bg-[var(--ui-success-subtle)] text-[var(--ui-success)] border border-[var(--ui-success)]/30",
+        warning: "bg-[var(--ui-warning-subtle)] text-[var(--ui-warning)] border border-[var(--ui-warning)]/30",
+        error: "bg-[var(--ui-error-subtle)] text-[var(--ui-error)] border border-[var(--ui-error)]/30"
+      },
+      size: {
+        sm: "h-6 px-2.5 text-xs",
+        md: "h-7 px-3 text-xs",
+        lg: "h-8 px-3.5 text-sm"
+      },
+      clickable: {
+        true: "cursor-pointer hover:opacity-80 active:scale-95",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      clickable: false
+    }
+  }
+);
+var Chip = React3.forwardRef(
+  ({ className, variant, size, clickable, onRemove, icon, children, onClick, ...props }, ref) => {
+    const isClickable = Boolean(clickable || onClick);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        onClick,
+        className: cn(chipVariants({ variant, size, clickable: isClickable }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+          onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove();
+              },
+              "aria-label": "Remove chip",
+              className: "p-0.5 rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors -mr-1",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+var Combobox = React3.forwardRef(
+  ({
+    options,
+    value: controlledVal,
+    defaultValue = "",
+    onChange,
+    placeholder = "Select option...",
+    searchPlaceholder = "Search items...",
+    emptyText = "No items found.",
+    disabled = false,
+    clearable = true,
+    className
+  }, ref) => {
+    const [internalVal, setInternalVal] = React3.useState(defaultValue);
+    const selectedValue = controlledVal !== void 0 ? controlledVal : internalVal;
+    const [search, setSearch] = React3.useState("");
+    const [isOpen, setIsOpen] = React3.useState(false);
+    const [highlightIndex, setHighlightIndex] = React3.useState(0);
+    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);
+    const handleSelect = (val) => {
+      setInternalVal(val);
+      onChange?.(val);
+      setIsOpen(false);
+      setSearch("");
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      setInternalVal("");
+      onChange?.("");
+    };
+    const handleKeyDown = (e) => {
+      if (!isOpen) {
+        if (e.key === "ArrowDown" || e.key === "Enter") {
+          setIsOpen(true);
+        }
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightIndex((prev) => (prev + 1) % Math.max(1, filteredOptions.length));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightIndex((prev) => (prev - 1 + filteredOptions.length) % Math.max(1, filteredOptions.length));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (filteredOptions[highlightIndex] && !filteredOptions[highlightIndex].disabled) {
+          handleSelect(filteredOptions[highlightIndex].value);
+        }
+      } else if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    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);
+                },
+                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
+            );
+          }) })
+        ] })
+      }
+    ) });
+  }
+);
+Combobox.displayName = "Combobox";
+var MultiSelect = React3.forwardRef(
+  ({
+    options,
+    value: controlledVal,
+    defaultValue = [],
+    onChange,
+    placeholder = "Select items...",
+    searchPlaceholder = "Search options...",
+    maxCount = 3,
+    disabled = false,
+    className
+  }, ref) => {
+    const [internalVal, setInternalVal] = React3.useState(defaultValue);
+    const selectedValues = controlledVal !== void 0 ? controlledVal : internalVal;
+    const [search, setSearch] = React3.useState("");
+    const [isOpen, setIsOpen] = React3.useState(false);
+    const filteredOptions = options.filter(
+      (opt) => opt.label.toLowerCase().includes(search.toLowerCase()) || opt.value.toLowerCase().includes(search.toLowerCase())
+    );
+    const toggleOption = (val) => {
+      const next = selectedValues.includes(val) ? selectedValues.filter((v) => v !== val) : [...selectedValues, val];
+      setInternalVal(next);
+      onChange?.(next);
+    };
+    const removeTag = (val, e) => {
+      e?.stopPropagation?.();
+      const next = selectedValues.filter((v) => v !== val);
+      setInternalVal(next);
+      onChange?.(next);
+    };
+    const clearAll = (e) => {
+      e?.stopPropagation?.();
+      setInternalVal([]);
+      onChange?.([]);
+    };
+    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(
+          "div",
+          {
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            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",
+              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.jsx("div", { className: "flex flex-wrap items-center gap-1.5 flex-1", children: selectedValues.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ui-text-muted)] text-sm", children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                selectedValues.slice(0, maxCount).map((val) => {
+                  const opt = options.find((o) => o.value === val);
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    Chip,
+                    {
+                      size: "sm",
+                      variant: "primary",
+                      onRemove: () => removeTag(val, {}),
+                      children: opt?.label || val
+                    },
+                    val
+                  );
+                }),
+                selectedValues.length > maxCount && /* @__PURE__ */ jsxRuntime.jsxs(Chip, { size: "sm", variant: "secondary", children: [
+                  "+",
+                  selectedValues.length - maxCount,
+                  " more"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-[var(--ui-text-muted)]", children: [
+                selectedValues.length > 0 && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    onClick: clearAll,
+                    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-76 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),
+                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) => {
+            const isChecked = selectedValues.includes(opt.value);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                onClick: () => 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)]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+                    opt.icon,
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: opt.label })
+                  ] }),
+                  isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] shrink-0" })
+                ]
+              },
+              opt.value
+            );
+          }) })
+        ] })
+      }
+    ) });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+var buttonVariants = classVarianceAuthority.cva(
+  "relative inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--ui-primary)]/30 active:scale-[0.97] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        primary: "bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] text-white shadow-sm hover:shadow-[0_4px_16px_rgba(0,113,227,0.35)] border border-white/20",
+        secondary: "bg-[var(--ui-bg-tertiary)] hover:bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)] shadow-sm",
+        outline: "border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]/60 backdrop-blur-xl text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] hover:border-[var(--ui-border-strong)] shadow-sm",
+        ghost: "bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]/70",
+        danger: "bg-[var(--ui-error)] hover:bg-[var(--ui-error)]/90 text-white shadow-sm hover:shadow-[0_4px_16px_rgba(255,59,48,0.35)] border border-white/15",
+        link: "bg-transparent text-[var(--ui-primary)] underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal",
+        glass: "bg-white/10 dark:bg-white/10 backdrop-blur-2xl border border-white/20 dark:border-white/15 text-[var(--ui-text-primary)] hover:bg-white/20 dark:hover:bg-white/15 shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_32px_rgba(0,113,227,0.25)]"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs rounded-[var(--ui-radius-sm)] gap-1",
+        sm: "h-8.5 px-3.5 text-xs rounded-[var(--ui-radius-md)] gap-1.5",
+        md: "h-10 px-4.5 text-sm rounded-[var(--ui-radius-md)] gap-2 font-semibold",
+        lg: "h-12 px-6 text-base rounded-[var(--ui-radius-lg)] gap-2.5 font-semibold",
+        xl: "h-14 px-8 text-lg rounded-[var(--ui-radius-xl)] gap-3 font-bold"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      fullWidth: false
+    }
+  }
+);
+var Button = React3.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    fullWidth,
+    loading = false,
+    loadingText,
+    leftIcon,
+    rightIcon,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        disabled: isDisabled,
+        className: cn(buttonVariants({ variant, size, fullWidth }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/35 to-transparent pointer-events-none"
+            }
+          ),
+          loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText || children })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: leftIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+            rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: rightIcon })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+var FileUpload = React3.forwardRef(
+  ({
+    accept,
+    maxSizeMB = 10,
+    multiple = true,
+    maxFiles = 5,
+    disabled = false,
+    onFilesSelected,
+    onFileRemove,
+    className,
+    label = "Drag & drop files here, or browse",
+    description = "Supports images, documents, and media up to 10MB"
+  }, ref) => {
+    const [isDragOver, setIsDragOver] = React3.useState(false);
+    const [fileList, setFileList] = React3.useState([]);
+    const inputRef = React3.useRef(null);
+    const processFiles = (incoming) => {
+      if (!incoming) return;
+      const validFiles = [];
+      const newUploaded = [];
+      Array.from(incoming).forEach((file) => {
+        if (fileList.length + newUploaded.length >= maxFiles) return;
+        const isOversized = file.size > maxSizeMB * 1024 * 1024;
+        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
+        };
+        newUploaded.push(fileObj);
+        if (!isOversized) validFiles.push(file);
+      });
+      setFileList((prev) => [...prev, ...newUploaded]);
+      if (validFiles.length > 0) {
+        onFilesSelected?.(validFiles);
+      }
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      if (!disabled) setIsDragOver(true);
+    };
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (disabled) return;
+      processFiles(e.dataTransfer.files);
+    };
+    const handleFileChange = (e) => {
+      processFiles(e.target.files);
+      if (inputRef.current) inputRef.current.value = "";
+    };
+    const removeFile = (id) => {
+      setFileList((prev) => prev.filter((f) => f.id !== id));
+      onFileRemove?.(id);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("w-full space-y-4", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          onClick: () => !disabled && inputRef.current?.click(),
+          className: cn(
+            "relative rounded-2xl p-6 sm:p-8 text-center border-2 border-dashed transition-all cursor-pointer flex flex-col items-center justify-center gap-3 select-none",
+            disabled ? "opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)]/30" : isDragOver ? "border-[var(--ui-primary)] bg-[var(--ui-primary)]/10 shadow-lg shadow-blue-500/20 scale-[0.99]" : "border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)]/60 hover:bg-[var(--ui-bg-secondary)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "file",
+                accept,
+                multiple,
+                disabled,
+                onChange: handleFileChange,
+                className: "hidden"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-2xl bg-[var(--ui-primary)]/15 text-[var(--ui-primary)] flex items-center justify-center shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: "w-6 h-6" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-bold text-[var(--ui-text-primary)]", children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: description })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xs", variant: "outline", className: "rounded-full px-4 mt-1 pointer-events-none", children: "Browse Files" })
+          ]
+        }
+      ),
+      fileList.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-mono font-bold text-[var(--ui-text-muted)] uppercase tracking-wider", children: [
+          "Files (",
+          fileList.length,
+          "/",
+          maxFiles,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: fileList.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "p-3 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] flex items-center justify-between gap-3 shadow-xs animate-in fade-in duration-200",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 truncate", children: [
+                item.previewUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: item.previewUrl,
+                    alt: item.name,
+                    className: "w-10 h-10 rounded-xl object-cover border border-[var(--ui-border-subtle)] shrink-0"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--ui-bg-tertiary)] flex items-center justify-center text-[var(--ui-text-muted)] shrink-0", children: item.type.includes("pdf") ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { className: "w-5 h-5" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate space-y-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-[var(--ui-text-primary)] block truncate", children: item.name }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[11px] text-[var(--ui-text-muted)] font-mono", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatFileSize(item.size) }),
+                    item.status === "completed" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-emerald-500 font-semibold flex items-center gap-0.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-3 h-3" }),
+                      " Ready"
+                    ] }),
+                    item.status === "error" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-rose-500 font-semibold flex items-center gap-0.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-3 h-3" }),
+                      " ",
+                      item.errorMessage
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => removeFile(item.id),
+                  className: "p-1.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-rose-500 transition-colors",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+                }
+              )
+            ]
+          },
+          item.id
+        )) })
+      ] })
+    ] });
+  }
+);
+FileUpload.displayName = "FileUpload";
+var NumberInput = React3.forwardRef(
+  ({
+    value: controlledVal,
+    defaultValue = 0,
+    onChange,
+    min = -Infinity,
+    max = Infinity,
+    step = 1,
+    precision = 0,
+    size = "md",
+    stepperPosition = "right",
+    disabled = false,
+    className,
+    ...props
+  }, ref) => {
+    const [internalVal, setInternalVal] = React3.useState(defaultValue);
+    const value = controlledVal !== void 0 ? controlledVal : internalVal;
+    const clamp = (num) => {
+      let clamped = Math.min(max, Math.max(min, num));
+      if (precision > 0) {
+        clamped = parseFloat(clamped.toFixed(precision));
+      }
+      return clamped;
+    };
+    const handleIncrement = () => {
+      if (disabled) return;
+      const next = clamp(value + step);
+      setInternalVal(next);
+      onChange?.(next);
+    };
+    const handleDecrement = () => {
+      if (disabled) return;
+      const next = clamp(value - step);
+      setInternalVal(next);
+      onChange?.(next);
+    };
+    const handleInputChange = (e) => {
+      const val = e.target.value;
+      if (val === "" || val === "-") {
+        return;
+      }
+      const parsed = parseFloat(val);
+      if (!isNaN(parsed)) {
+        const next = clamp(parsed);
+        setInternalVal(next);
+        onChange?.(next);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        handleIncrement();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        handleDecrement();
+      }
+    };
+    const heightClass = size === "sm" ? "h-8 text-xs" : size === "lg" ? "h-12 text-base" : "h-10 text-sm";
+    if (stepperPosition === "split") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex items-center rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] overflow-hidden shadow-inner", className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            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)]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: "number",
+            value,
+            disabled,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            className: cn("w-20 text-center font-mono font-semibold bg-transparent text-[var(--ui-text-primary)] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", heightClass),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            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)]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full inline-flex items-center", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          type: "number",
+          value,
+          disabled,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          className: cn(
+            "w-full rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] px-3.5 pr-10 font-mono font-semibold text-[var(--ui-text-primary)] transition-all shadow-inner focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/50 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+            heightClass,
+            disabled && "opacity-50 cursor-not-allowed"
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-1 top-1 bottom-1 flex flex-col justify-center border-l border-[var(--ui-border-subtle)] pl-1 pr-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            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",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            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",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3 h-3" })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+function formatCurrencyString(val, separator = ",") {
+  if (isNaN(val)) return "0";
+  const parts = val.toString().split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+  return parts.join(".");
+}
+var CurrencyInput = React3.forwardRef(
+  ({
+    value: controlledVal,
+    defaultValue = 0,
+    onChange,
+    currency = "USD",
+    currencySymbol,
+    position = "prefix",
+    disabled = false,
+    className,
+    ...props
+  }, 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));
+    React3.useEffect(() => {
+      setDisplayVal(formatCurrencyString(value));
+    }, [value]);
+    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);
+    };
+    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 }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          type: "text",
+          value: displayVal,
+          disabled,
+          onChange: handleInputChange,
+          className: cn(
+            "w-full h-10 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] px-3.5 font-mono font-bold text-sm text-[var(--ui-text-primary)] transition-all shadow-inner focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/50",
+            !isSuffix && "pl-8",
+            isSuffix && "pr-12",
+            disabled && "opacity-50 cursor-not-allowed"
+          ),
+          ...props
+        }
+      ),
+      isSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-3.5 text-xs font-bold text-[var(--ui-text-muted)] pointer-events-none font-mono uppercase", children: currency })
+    ] });
+  }
+);
+CurrencyInput.displayName = "CurrencyInput";
+function applyMask(rawVal, mask, maskChar = "#") {
+  const digitsOnly = rawVal.replace(/\D/g, "");
+  if (!digitsOnly) return { formatted: "", unmasked: "" };
+  let formatted = "";
+  let digitIndex = 0;
+  for (let i = 0; i < mask.length; i++) {
+    const char = mask[i];
+    if (char === maskChar) {
+      if (digitIndex < digitsOnly.length) {
+        formatted += digitsOnly[digitIndex++];
+      } else {
+        break;
+      }
+    } else {
+      if (digitIndex < digitsOnly.length) {
+        formatted += char;
+      }
+    }
+  }
+  return { formatted, unmasked: digitsOnly };
+}
+var MaskedInput = React3.forwardRef(
+  ({
+    mask,
+    maskChar = "#",
+    value: controlledVal,
+    defaultValue = "",
+    onValueChange,
+    prefixIcon,
+    suffixIcon,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => {
+    const [internalVal, setInternalVal] = React3.useState(
+      applyMask(defaultValue, mask, maskChar).formatted
+    );
+    const displayValue = controlledVal !== void 0 ? applyMask(controlledVal, mask, maskChar).formatted : internalVal;
+    const handleInputChange = (e) => {
+      const { formatted, unmasked } = applyMask(e.target.value, mask, maskChar);
+      setInternalVal(formatted);
+      onValueChange?.(unmasked, formatted);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full flex items-center", className), children: [
+      prefixIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3.5 flex items-center pointer-events-none text-[var(--ui-text-muted)]", children: prefixIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          type: "text",
+          value: displayValue,
+          disabled,
+          onChange: handleInputChange,
+          className: cn(
+            "w-full h-10 rounded-[var(--ui-radius-md)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)] px-3.5 font-mono text-sm text-[var(--ui-text-primary)] transition-all shadow-inner focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/50",
+            prefixIcon && "pl-9",
+            suffixIcon && "pr-9",
+            disabled && "opacity-50 cursor-not-allowed"
+          ),
+          ...props
+        }
+      ),
+      suffixIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3.5 flex items-center pointer-events-none text-[var(--ui-text-muted)]", children: suffixIcon })
+    ] });
+  }
+);
+MaskedInput.displayName = "MaskedInput";
+
+exports.Checkbox = Checkbox;
+exports.CheckboxGroup = CheckboxGroup;
+exports.Combobox = Combobox;
+exports.CurrencyInput = CurrencyInput;
+exports.DatePicker = DatePicker;
+exports.DateRangePicker = DateRangePicker;
+exports.FileUpload = FileUpload;
+exports.FormErrorMessage = FormErrorMessage;
+exports.FormField = FormField;
+exports.FormHelperText = FormHelperText;
+exports.FormLabel = FormLabel;
+exports.Input = Input;
+exports.MaskedInput = MaskedInput;
+exports.MultiSelect = MultiSelect;
+exports.NumberInput = NumberInput;
+exports.PasswordInput = PasswordInput;
+exports.PinInput = PinInput;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.RangeSlider = RangeSlider;
+exports.SearchInput = SearchInput;
+exports.Select = Select;
+exports.Slider = Slider;
+exports.Switch = Switch;
+exports.Textarea = Textarea;
+exports.TimePicker = TimePicker;
+exports.applyMask = applyMask;
+exports.checkboxVariants = checkboxVariants;
+exports.formatCurrencyString = formatCurrencyString;
+exports.formatDate = formatDate;
+exports.formatDisplayDate = formatDisplayDate;
+exports.formatFileSize = formatFileSize;
+exports.inputVariants = inputVariants;
+exports.radioVariants = radioVariants;
+exports.selectVariants = selectVariants;
+exports.switchThumbVariants = switchThumbVariants;
+exports.switchVariants = switchVariants;
+exports.textareaVariants = textareaVariants;
+exports.useFormField = useFormField;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map