@wow-two-beta/ui 0.0.6 → 0.0.8

package/dist/chunk-NJZS7RIH.js

@@ -1,604 +0,0 @@
-import { useFormControl } from './chunk-Q27NAHVB.js';
-import { Icon } from './chunk-TDX22OWF.js';
-import { tv } from './chunk-BMBIZLO4.js';
-import { cn } from './chunk-KZ4VFY2T.js';
-import { forwardRef, useRef, useImperativeHandle, useState } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Minus, Plus, EyeOff, Eye, Search, X, Check } 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-neutral-900",
-          ctx?.isDisabled && "opacity-60",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          isRequired && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-danger-500", "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-neutral-500", 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-danger-600", 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-neutral-900", className),
-      ...props
-    }
-  )
-);
-Legend.displayName = "Legend";
-
-// src/forms/_styles.ts
-var inputBaseVariants = tv({
-  base: "flex w-full rounded-md border bg-white text-neutral-900 placeholder:text-neutral-400 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-60 read-only:bg-neutral-50",
-  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-neutral-300 hover:border-neutral-400",
-      invalid: "border-danger-500 focus-visible:ring-danger-500"
-    }
-  },
-  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-neutral-500 hover:bg-neutral-100 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-neutral-500 hover:bg-neutral-100 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-neutral-500 hover:bg-neutral-100 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-neutral-400"
-        }
-      ),
-      /* @__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-neutral-400 hover:bg-neutral-100 hover:text-neutral-600",
-          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-neutral-300 bg-white text-white transition-colors",
-            "peer-checked:border-brand-600 peer-checked:bg-brand-600",
-            "peer-focus-visible:ring-2 peer-focus-visible:ring-brand-500 peer-focus-visible:ring-offset-1",
-            "peer-disabled:opacity-50",
-            indeterminate && "border-brand-600 bg-brand-600"
-          ),
-          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-neutral-300 bg-white transition-colors",
-            "peer-checked:border-brand-600",
-            "peer-focus-visible:ring-2 peer-focus-visible:ring-brand-500 peer-focus-visible:ring-offset-1",
-            "peer-disabled:opacity-50"
-          ),
-          children: /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-brand-600 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-neutral-300 px-0.5 transition-colors",
-            "peer-checked:bg-brand-600",
-            "peer-focus-visible:ring-2 peer-focus-visible:ring-brand-500 peer-focus-visible:ring-offset-1",
-            "peer-disabled:opacity-50"
-          ),
-          children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "rounded-full bg-white 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-neutral-200",
-          `[&::-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-brand-600 [&::-webkit-slider-thumb]:bg-white",
-          // Firefox
-          `[&::-moz-range-track]:${TRACK_CLASS2[size]}`,
-          "[&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-neutral-200",
-          "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand-600 [&::-moz-range-thumb]:bg-white",
-          "focus-visible:outline-none focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-brand-500",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-Slider.displayName = "Slider";
-
-export { Checkbox, EmailInput, Fieldset, FormErrorMessage, FormHelperText, Label, Legend, NumberInput, PasswordInput, Radio, SearchInput, Slider, Switch, TelInput, TextInput, Textarea, UrlInput };
-//# sourceMappingURL=chunk-NJZS7RIH.js.map
-//# sourceMappingURL=chunk-NJZS7RIH.js.map