@wow-two-beta/ui 0.0.7 → 0.0.8

package/dist/{chunk-TDEEVNSD.js → chunk-X2LTOZ7F.js}

@@ -1,10 +1,13 @@
-import { useFormControl } from './chunk-Q27NAHVB.js';
-import { Icon } from './chunk-TDX22OWF.js';
+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 { forwardRef, useRef, useImperativeHandle, useState } from 'react';
+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 } from 'lucide-react';
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload } from 'lucide-react';
 
 var Label = forwardRef(
   ({ className, required, htmlFor, id, children, ...props }, ref) => {
@@ -598,7 +601,519 @@ var Slider = forwardRef(
   }
 );
 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 { Checkbox, EmailInput, Fieldset, FormErrorMessage, FormHelperText, Label, Legend, NumberInput, PasswordInput, Radio, SearchInput, Slider, Switch, TelInput, TextInput, Textarea, UrlInput };
-//# sourceMappingURL=chunk-TDEEVNSD.js.map
-//# sourceMappingURL=chunk-TDEEVNSD.js.map
+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