@wow-two-beta/ui 0.0.6 → 0.0.8

package/dist/chunk-X2LTOZ7F.js

@@ -0,0 +1,1119 @@
+import { useFormControl, FormControlProvider } from './chunk-WEM32VIJ.js';
+import { useControlled } from './chunk-4P2TFUVW.js';
+import { useId } from './chunk-KDXJQNB6.js';
+import { tv } from './chunk-BMBIZLO4.js';
+import { Icon } from './chunk-TDX22OWF.js';
+import { cn } from './chunk-KZ4VFY2T.js';
+import * as React from 'react';
+import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1 } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload } from 'lucide-react';
+
+var Label = forwardRef(
+  ({ className, required, htmlFor, id, children, ...props }, ref) => {
+    const ctx = useFormControl();
+    const isRequired = required ?? ctx?.isRequired ?? false;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ref,
+        htmlFor: htmlFor ?? ctx?.id,
+        id: id ?? ctx?.labelId,
+        className: cn(
+          "text-sm font-medium text-foreground",
+          ctx?.isDisabled && "opacity-60",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          isRequired && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-destructive", "aria-hidden": "true", children: "*" })
+        ]
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var FormHelperText = forwardRef(
+  ({ className, id, ...props }, ref) => {
+    const ctx = useFormControl();
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: id ?? ctx?.helperId,
+        className: cn("text-sm text-muted-foreground", className),
+        ...props
+      }
+    );
+  }
+);
+FormHelperText.displayName = "FormHelperText";
+var FormErrorMessage = forwardRef(
+  ({ className, id, ...props }, ref) => {
+    const ctx = useFormControl();
+    if (ctx && !ctx.isInvalid) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: id ?? ctx?.errorId,
+        role: "alert",
+        className: cn("text-sm text-destructive", className),
+        ...props
+      }
+    );
+  }
+);
+FormErrorMessage.displayName = "FormErrorMessage";
+var Fieldset = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      ref,
+      className: cn("m-0 min-w-0 border-0 p-0", className),
+      ...props
+    }
+  )
+);
+Fieldset.displayName = "Fieldset";
+var Legend = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "legend",
+    {
+      ref,
+      className: cn("mb-2 text-sm font-medium text-foreground", className),
+      ...props
+    }
+  )
+);
+Legend.displayName = "Legend";
+
+// src/forms/_styles.ts
+var inputBaseVariants = tv({
+  base: "flex w-full rounded-md border bg-background text-foreground placeholder:text-subtle-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 read-only:bg-muted",
+  variants: {
+    size: {
+      sm: "h-8 px-2.5 text-sm",
+      md: "h-10 px-3 text-sm",
+      lg: "h-12 px-4 text-base"
+    },
+    state: {
+      default: "border-input hover:border-border-strong",
+      invalid: "border-destructive focus-visible:ring-destructive"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    state: "default"
+  }
+});
+var TextInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "text",
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+TextInput.displayName = "TextInput";
+var EmailInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "email",
+        autoComplete: "email",
+        inputMode: "email",
+        spellCheck: false,
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+EmailInput.displayName = "EmailInput";
+var TelInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "tel",
+        autoComplete: "tel",
+        inputMode: "tel",
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+TelInput.displayName = "TelInput";
+var UrlInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "url",
+        autoComplete: "url",
+        inputMode: "url",
+        spellCheck: false,
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+UrlInput.displayName = "UrlInput";
+var NumberInput = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, step = 1, ...props }, forwardedRef) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    const inputRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const adjust = (direction) => {
+      const el = inputRef.current;
+      if (!el || typeof el.stepUp !== "function") return;
+      if (direction === 1) el.stepUp(step);
+      else el.stepDown(step);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    const isDisabled = disabled ?? ctx?.isDisabled ?? false;
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "number",
+          inputMode: "decimal",
+          step,
+          id: id ?? ctx?.id,
+          disabled: isDisabled,
+          required: required ?? ctx?.isRequired,
+          readOnly: readOnly ?? ctx?.isReadOnly,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+          className: cn(inputBaseVariants({ size, state: finalState }), "pr-12 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isDisabled,
+            onClick: () => adjust(-1),
+            "aria-label": "Decrement",
+            className: "grid h-7 w-6 place-items-center rounded text-muted-foreground hover:bg-muted disabled:opacity-50",
+            children: /* @__PURE__ */ jsx(Icon, { icon: Minus, size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isDisabled,
+            onClick: () => adjust(1),
+            "aria-label": "Increment",
+            className: "grid h-7 w-6 place-items-center rounded text-muted-foreground hover:bg-muted disabled:opacity-50",
+            children: /* @__PURE__ */ jsx(Icon, { icon: Plus, size: 14 })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+var PasswordInput = forwardRef(
+  ({
+    className,
+    size,
+    state,
+    id,
+    disabled,
+    required,
+    readOnly,
+    toggleable = true,
+    autoComplete = "current-password",
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = useState(false);
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    const isDisabled = disabled ?? ctx?.isDisabled ?? false;
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: visible ? "text" : "password",
+          autoComplete,
+          spellCheck: false,
+          id: id ?? ctx?.id,
+          disabled: isDisabled,
+          required: required ?? ctx?.isRequired,
+          readOnly: readOnly ?? ctx?.isReadOnly,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+          className: cn(inputBaseVariants({ size, state: finalState }), toggleable && "pr-10"),
+          ...props
+        }
+      ),
+      toggleable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: isDisabled,
+          onClick: () => setVisible((v) => !v),
+          "aria-label": visible ? "Hide password" : "Show password",
+          "aria-pressed": visible,
+          className: "absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded text-muted-foreground hover:bg-muted disabled:opacity-50",
+          children: /* @__PURE__ */ jsx(Icon, { icon: visible ? EyeOff : Eye, size: 16 })
+        }
+      )
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var SearchInput = forwardRef(
+  ({
+    className,
+    size,
+    state,
+    id,
+    disabled,
+    required,
+    readOnly,
+    clearable = true,
+    onClear,
+    onChange,
+    defaultValue,
+    value,
+    ...props
+  }, forwardedRef) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    const isDisabled = disabled ?? ctx?.isDisabled ?? false;
+    const inputRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const isControlled = value !== void 0;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
+    const currentValue = isControlled ? value : uncontrolled;
+    const showClear = clearable && String(currentValue ?? "").length > 0;
+    const handleClear = () => {
+      const el = inputRef.current;
+      if (el) {
+        const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+        setter?.call(el, "");
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        el.focus();
+      }
+      if (!isControlled) setUncontrolled("");
+      onClear?.();
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: Search,
+          size: 16,
+          className: "absolute left-3 top-1/2 -translate-y-1/2 text-subtle-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "search",
+          id: id ?? ctx?.id,
+          value: isControlled ? value : void 0,
+          defaultValue: !isControlled ? defaultValue : void 0,
+          onChange: (e) => {
+            if (!isControlled) setUncontrolled(e.target.value);
+            onChange?.(e);
+          },
+          disabled: isDisabled,
+          required: required ?? ctx?.isRequired,
+          readOnly: readOnly ?? ctx?.isReadOnly,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+          className: cn(
+            inputBaseVariants({ size, state: finalState }),
+            "pl-9",
+            showClear && "pr-9",
+            "[&::-webkit-search-cancel-button]:appearance-none"
+          ),
+          ...props
+        }
+      ),
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: isDisabled,
+          onClick: handleClear,
+          "aria-label": "Clear search",
+          className: "absolute right-1 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded text-subtle-foreground hover:bg-muted hover:text-muted-foreground",
+          children: /* @__PURE__ */ jsx(Icon, { icon: X, size: 14 })
+        }
+      )
+    ] });
+  }
+);
+SearchInput.displayName = "SearchInput";
+var Textarea = forwardRef(
+  ({ className, size, state, id, disabled, required, readOnly, rows = 3, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        rows,
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(
+          inputBaseVariants({ size, state: finalState }),
+          "h-auto resize-y py-2",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var SIZE_CLASS = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+var Checkbox = forwardRef(
+  ({ className, size = "md", indeterminate, id, disabled, required, checked, ...props }, ref) => {
+    const ctx = useFormControl();
+    const isDisabled = disabled ?? ctx?.isDisabled;
+    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", SIZE_CLASS[size], className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          id: id ?? ctx?.id,
+          disabled: isDisabled,
+          required: required ?? ctx?.isRequired,
+          checked,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+          className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "pointer-events-none grid h-full w-full place-items-center rounded-sm border border-input bg-background text-primary-foreground transition-colors",
+            "peer-checked:border-primary peer-checked:bg-primary",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1",
+            "peer-disabled:opacity-50",
+            indeterminate && "border-primary bg-primary"
+          ),
+          children: indeterminate ? /* @__PURE__ */ jsx(Minus, { size: Math.round(SIZE_CLASS[size].length * 1.4), className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 opacity-0 peer-checked:opacity-100" })
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var SIZE_CLASS2 = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+var Radio = forwardRef(
+  ({ className, size = "md", id, disabled, required, ...props }, ref) => {
+    const ctx = useFormControl();
+    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", SIZE_CLASS2[size], className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "radio",
+          id: id ?? ctx?.id,
+          disabled: disabled ?? ctx?.isDisabled,
+          required: required ?? ctx?.isRequired,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "pointer-events-none grid h-full w-full place-items-center rounded-full border border-input bg-background transition-colors",
+            "peer-checked:border-primary",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1",
+            "peer-disabled:opacity-50"
+          ),
+          children: /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary opacity-0 peer-checked:opacity-100" })
+        }
+      )
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var TRACK_CLASS = {
+  sm: "h-4 w-7",
+  md: "h-5 w-9",
+  lg: "h-6 w-11"
+};
+var THUMB_CLASS = {
+  sm: "h-3 w-3 peer-checked:translate-x-3",
+  md: "h-4 w-4 peer-checked:translate-x-4",
+  lg: "h-5 w-5 peer-checked:translate-x-5"
+};
+var Switch = forwardRef(
+  ({ className, size = "md", id, disabled, required, ...props }, ref) => {
+    const ctx = useFormControl();
+    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", TRACK_CLASS[size], className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          role: "switch",
+          id: id ?? ctx?.id,
+          disabled: disabled ?? ctx?.isDisabled,
+          required: required ?? ctx?.isRequired,
+          "aria-invalid": ctx?.isInvalid || void 0,
+          className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "pointer-events-none flex h-full w-full items-center rounded-full bg-input px-0.5 transition-colors",
+            "peer-checked:bg-primary",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1",
+            "peer-disabled:opacity-50"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "rounded-full bg-background shadow-sm transition-transform duration-150",
+                THUMB_CLASS[size]
+              )
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var TRACK_CLASS2 = {
+  sm: "h-1",
+  md: "h-1.5",
+  lg: "h-2"
+};
+var Slider = forwardRef(
+  ({ className, size = "md", id, disabled, required, min = 0, max = 100, ...props }, ref) => {
+    const ctx = useFormControl();
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "range",
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        min,
+        max,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        className: cn(
+          "w-full appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
+          // WebKit
+          "[&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-muted",
+          `[&::-webkit-slider-runnable-track]:${TRACK_CLASS2[size]}`,
+          "[&::-webkit-slider-thumb]:mt-[-6px] [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background",
+          // Firefox
+          `[&::-moz-range-track]:${TRACK_CLASS2[size]}`,
+          "[&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted",
+          "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-background",
+          "focus-visible:outline-none focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-ring",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+var FormField = forwardRef(
+  ({ label, helper, error, isRequired, isDisabled, isReadOnly, children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    FormControlProvider,
+    {
+      isInvalid: Boolean(error),
+      isRequired,
+      isDisabled,
+      isReadOnly,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn("flex flex-col gap-1.5", className),
+          ...props,
+          children: [
+            label && /* @__PURE__ */ jsx(Label, { children: label }),
+            children,
+            error ? /* @__PURE__ */ jsx(FormErrorMessage, { children: error }) : helper && /* @__PURE__ */ jsx(FormHelperText, { children: helper })
+          ]
+        }
+      )
+    }
+  )
+);
+FormField.displayName = "FormField";
+var CheckboxField = forwardRef(
+  ({ label, description, id, wrapperClassName, className, ...props }, ref) => {
+    const generated = useId();
+    const inputId = id ?? generated;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn("flex items-start gap-2.5 cursor-pointer", wrapperClassName),
+        children: [
+          /* @__PURE__ */ jsx(Checkbox, { ref, id: inputId, className, ...props }),
+          /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+CheckboxField.displayName = "CheckboxField";
+var RadioField = forwardRef(
+  ({ label, description, id, wrapperClassName, className, ...props }, ref) => {
+    const generated = useId();
+    const inputId = id ?? generated;
+    return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("flex items-start gap-2.5 cursor-pointer", wrapperClassName), children: [
+      /* @__PURE__ */ jsx(Radio, { ref, id: inputId, className, ...props }),
+      /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label }),
+        description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: description })
+      ] })
+    ] });
+  }
+);
+RadioField.displayName = "RadioField";
+var SwitchField = forwardRef(
+  ({ label, description, side = "left", id, wrapperClassName, className, ...props }, ref) => {
+    const generated = useId();
+    const inputId = id ?? generated;
+    const text = /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label }),
+      description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: description })
+    ] });
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "flex cursor-pointer items-start gap-3",
+          side === "right" && "flex-row-reverse justify-between",
+          wrapperClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Switch, { ref, id: inputId, className, ...props }),
+          text
+        ]
+      }
+    );
+  }
+);
+SwitchField.displayName = "SwitchField";
+var CheckboxGroup = forwardRef(
+  ({
+    legend,
+    value,
+    defaultValue,
+    onValueChange,
+    isDisabled,
+    orientation = "vertical",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [selected, setSelected] = useControlled({
+      controlled: value,
+      default: defaultValue ?? [],
+      onChange: onValueChange
+    });
+    const toggle = (v) => {
+      if (v === void 0) return;
+      setSelected(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v]);
+    };
+    return /* @__PURE__ */ jsxs(Fieldset, { ref, disabled: isDisabled, className: cn(className), ...props, children: [
+      legend && /* @__PURE__ */ jsx(Legend, { children: legend }),
+      /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: Children.map(children, (child) => {
+        if (!isValidElement(child)) return child;
+        const c = child;
+        const v = c.props.value;
+        return cloneElement(c, {
+          checked: v !== void 0 && selected.includes(v),
+          onChange: () => toggle(v)
+        });
+      }) })
+    ] });
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+var RadioGroup = forwardRef(
+  ({
+    legend,
+    name,
+    value,
+    defaultValue,
+    onValueChange,
+    isDisabled,
+    orientation = "vertical",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const generatedName = useId$1();
+    const groupName = name ?? generatedName;
+    const [selected, setSelected] = useControlled({
+      controlled: value,
+      default: defaultValue ?? null,
+      onChange: onValueChange
+    });
+    return /* @__PURE__ */ jsxs(Fieldset, { ref, disabled: isDisabled, className: cn(className), ...props, children: [
+      legend && /* @__PURE__ */ jsx(Legend, { children: legend }),
+      /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: Children.map(children, (child) => {
+        if (!isValidElement(child)) return child;
+        const c = child;
+        const v = c.props.value;
+        return cloneElement(c, {
+          name: groupName,
+          checked: v !== void 0 && selected === v,
+          onChange: () => setSelected(v ?? null)
+        });
+      }) })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var SIZE = {
+  sm: "h-9 w-9 text-base",
+  md: "h-11 w-11 text-lg",
+  lg: "h-14 w-14 text-xl"
+};
+var PinInput = forwardRef(
+  ({
+    length = 6,
+    value,
+    defaultValue,
+    onValueChange,
+    onComplete,
+    type = "numeric",
+    size = "md",
+    mask,
+    isDisabled,
+    className,
+    ...props
+  }, ref) => {
+    const [val, setVal] = useControlled({
+      controlled: value,
+      default: defaultValue ?? "",
+      onChange: onValueChange
+    });
+    const cells = Array.from({ length }, (_, i) => val[i] ?? "");
+    const inputs = useRef([]);
+    const wrapperRef = useRef(null);
+    useImperativeHandle(ref, () => wrapperRef.current);
+    const isAllowed = (ch) => type === "numeric" ? /^[0-9]$/.test(ch) : /^[A-Za-z0-9]$/.test(ch);
+    const update = (next) => {
+      const trimmed = next.slice(0, length);
+      setVal(trimmed);
+      if (trimmed.length === length) onComplete?.(trimmed);
+    };
+    const handleChange = (i, raw) => {
+      const ch = raw.slice(-1);
+      if (ch && !isAllowed(ch)) return;
+      const arr = cells.slice();
+      arr[i] = ch;
+      const next = arr.join("").slice(0, length);
+      update(next);
+      if (ch && i < length - 1) inputs.current[i + 1]?.focus();
+    };
+    const handleKeyDown = (i, e) => {
+      if (e.key === "Backspace" && !cells[i] && i > 0) {
+        inputs.current[i - 1]?.focus();
+      } else if (e.key === "ArrowLeft" && i > 0) {
+        e.preventDefault();
+        inputs.current[i - 1]?.focus();
+      } else if (e.key === "ArrowRight" && i < length - 1) {
+        e.preventDefault();
+        inputs.current[i + 1]?.focus();
+      }
+    };
+    const handlePaste = (e) => {
+      const pasted = e.clipboardData.getData("text").replace(/\s+/g, "");
+      const filtered = pasted.split("").filter(isAllowed).join("");
+      if (filtered) {
+        e.preventDefault();
+        update(filtered);
+        const focusIdx = Math.min(filtered.length, length - 1);
+        inputs.current[focusIdx]?.focus();
+      }
+    };
+    return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: cn("inline-flex gap-2", className), ...props, children: cells.map((ch, i) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputs.current[i] = el;
+        },
+        type: mask ? "password" : "text",
+        inputMode: type === "numeric" ? "numeric" : "text",
+        autoComplete: "one-time-code",
+        maxLength: 1,
+        disabled: isDisabled,
+        value: ch,
+        onChange: (e) => handleChange(i, e.target.value),
+        onKeyDown: (e) => handleKeyDown(i, e),
+        onPaste: handlePaste,
+        className: cn(
+          inputBaseVariants({ state: "default" }),
+          "text-center font-medium",
+          SIZE[size]
+        )
+      },
+      i
+    )) });
+  }
+);
+PinInput.displayName = "PinInput";
+function applyMask(raw, mask) {
+  let out = "";
+  let r = 0;
+  for (let m = 0; m < mask.length && r < raw.length; m++) {
+    const tok = mask[m];
+    const ch = raw[r];
+    if (!tok || !ch) break;
+    if (tok === "#") {
+      if (/[0-9]/.test(ch)) {
+        out += ch;
+        r++;
+      } else {
+        r++;
+        m--;
+      }
+    } else if (tok === "A") {
+      if (/[A-Za-z]/.test(ch)) {
+        out += ch;
+        r++;
+      } else {
+        r++;
+        m--;
+      }
+    } else if (tok === "*") {
+      if (/[A-Za-z0-9]/.test(ch)) {
+        out += ch;
+        r++;
+      } else {
+        r++;
+        m--;
+      }
+    } else {
+      out += tok;
+      if (ch === tok) r++;
+    }
+  }
+  return out;
+}
+var MaskedInput = forwardRef(
+  ({ className, size, state, mask, value, defaultValue, onValueChange, id, disabled, required, readOnly, ...props }, ref) => {
+    const ctx = useFormControl();
+    const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
+    const [val, setVal] = useControlled({
+      controlled: value,
+      default: defaultValue ?? "",
+      onChange: onValueChange
+    });
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "text",
+        value: val,
+        onChange: (e) => setVal(applyMask(e.target.value, mask)),
+        id: id ?? ctx?.id,
+        disabled: disabled ?? ctx?.isDisabled,
+        required: required ?? ctx?.isRequired,
+        readOnly: readOnly ?? ctx?.isReadOnly,
+        "aria-invalid": ctx?.isInvalid || void 0,
+        "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        ...props
+      }
+    );
+  }
+);
+MaskedInput.displayName = "MaskedInput";
+var CurrencyInput = forwardRef(
+  ({ symbol = "$", className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: symbol }),
+    /* @__PURE__ */ jsx(NumberInput, { ref, ...props, className: "pl-7" })
+  ] })
+);
+CurrencyInput.displayName = "CurrencyInput";
+var PercentInput = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(NumberInput, { ref, ...props, className: "pr-16" }),
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-12 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: "%" })
+  ] })
+);
+PercentInput.displayName = "PercentInput";
+var CharacterCount = forwardRef(
+  ({ value, max, showMax = true, className, ...props }, ref) => {
+    const over = value > max;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "aria-live": "polite",
+        className: cn(
+          "text-right text-xs",
+          over ? "text-destructive" : "text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          value,
+          showMax && ` / ${max}`
+        ]
+      }
+    );
+  }
+);
+CharacterCount.displayName = "CharacterCount";
+var InputAddon = forwardRef(
+  ({ leading, trailing, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex w-full items-stretch [&>*]:rounded-none",
+        "[&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md",
+        "[&>*:not(:first-child)]:-ml-px",
+        className
+      ),
+      ...props,
+      children: [
+        leading && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center border border-input bg-muted px-3 text-sm text-muted-foreground", children: leading }),
+        children,
+        trailing && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center border border-input bg-muted px-3 text-sm text-muted-foreground", children: trailing })
+      ]
+    }
+  )
+);
+InputAddon.displayName = "InputAddon";
+var InputGroup = forwardRef(
+  ({ orientation = "horizontal", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex w-full",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        orientation === "horizontal" ? "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px" : "[&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px",
+        className
+      ),
+      ...props
+    }
+  )
+);
+InputGroup.displayName = "InputGroup";
+var LabeledInput = forwardRef(
+  ({ label, children, trailing, className, ...props }, ref) => {
+    const generated = useId();
+    const id = children.props.id ?? generated;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
+        trailing && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: trailing })
+      ] }),
+      React.cloneElement(children, { id })
+    ] });
+  }
+);
+LabeledInput.displayName = "LabeledInput";
+var SIZE2 = {
+  sm: "p-3 text-xs",
+  md: "p-4 text-sm",
+  lg: "p-5 text-base"
+};
+var ChoiceCard = forwardRef(
+  ({ label, description, icon, size = "md", id, className, ...props }, ref) => {
+    const generated = useId();
+    const inputId = id ?? generated;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "group relative block cursor-pointer rounded-lg border border-input bg-card text-card-foreground transition-colors",
+          "hover:border-border-strong has-[:checked]:border-primary has-[:checked]:bg-primary-soft/30",
+          "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
+          SIZE2[size],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Radio, { ref, id: inputId, className: "absolute right-3 top-3", ...props }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 pr-7", children: [
+            icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: icon }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground", children: label }),
+              description && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-muted-foreground", children: description })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ChoiceCard.displayName = "ChoiceCard";
+var LABELS = ["Too weak", "Weak", "Fair", "Strong", "Excellent"];
+var TONE = ["bg-destructive", "bg-destructive", "bg-warning", "bg-success", "bg-success"];
+function scorePassword(pw) {
+  let score = 0;
+  if (pw.length >= 8) score++;
+  if (pw.length >= 12) score++;
+  if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) score++;
+  if (/\d/.test(pw)) score++;
+  if (/[^A-Za-z0-9]/.test(pw)) score++;
+  return Math.min(4, score);
+}
+var PasswordStrength = forwardRef(
+  ({ value, score, hideLabel, className, ...props }, ref) => {
+    const s = score ?? (value.length === 0 ? 0 : scorePassword(value));
+    const label = LABELS[s] ?? "";
+    const tone = TONE[s] ?? "bg-destructive";
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1", "aria-hidden": "true", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-1 flex-1 rounded-full bg-muted transition-colors",
+            i < s && tone
+          )
+        },
+        i
+      )) }),
+      !hideLabel && value && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: label })
+    ] });
+  }
+);
+PasswordStrength.displayName = "PasswordStrength";
+var SIZE3 = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-12 px-6 text-base"
+};
+var FilePicker = forwardRef(
+  ({ label = "Choose file", onFilesChange, preview, size = "md", className, disabled, ...props }, ref) => {
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-3", className), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => inputRef.current?.click(),
+          className: cn(
+            "inline-flex items-center gap-2 rounded-md border border-input bg-background font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            SIZE3[size]
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: Upload, size: 16 }),
+            label
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          disabled,
+          className: "sr-only",
+          onChange: (e) => onFilesChange?.(e.target.files),
+          ...props
+        }
+      ),
+      preview && /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-muted-foreground", children: preview })
+    ] });
+  }
+);
+FilePicker.displayName = "FilePicker";
+
+export { CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CurrencyInput, EmailInput, Fieldset, FilePicker, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, MaskedInput, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, SearchInput, Slider, Switch, SwitchField, TelInput, TextInput, Textarea, UrlInput };
+//# sourceMappingURL=chunk-X2LTOZ7F.js.map
+//# sourceMappingURL=chunk-X2LTOZ7F.js.map