@wow-two-beta/ui 0.0.14 → 0.0.16

package/dist/{chunk-BQTO7XY6.js → chunk-ILYL6ROC.js}

@@ -1,15 +1,17 @@
-import { PopoverTrigger, Popover, PopoverContent } from './chunk-FS6DTWWH.js';
+import { listboxVariants, listboxItemVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-FFQENBTW.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-2VAZKEQD.js';
+import { Tag } from './chunk-ZCA365IX.js';
 import { useControlled } from './chunk-4P2TFUVW.js';
-import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-YMSAS7M7.js';
-import { useId } from './chunk-KDXJQNB6.js';
 import { tv, dataAttr } from './chunk-BMBIZLO4.js';
 import { Icon } from './chunk-TDX22OWF.js';
+import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-NC2CBGX2.js';
 import { composeRefs } from './chunk-DN7WBRIV.js';
+import { useId } from './chunk-KDXJQNB6.js';
 import { cn } from './chunk-KZ4VFY2T.js';
 import * as React from 'react';
 import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useMemo, useCallback, useEffect, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, Calendar as Calendar$1, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, Calendar as Calendar$1, Clock, UploadCloud, ChevronLeft, ChevronRight } from 'lucide-react';
 
 var Label = forwardRef(
   ({ className, required, htmlFor, id, children, ...props }, ref) => {
@@ -1115,32 +1117,6 @@ var FilePicker = forwardRef(
   }
 );
 FilePicker.displayName = "FilePicker";
-
-// src/forms/listbox/Listbox.variants.ts
-var listboxVariants = tv({
-  base: "flex max-h-72 flex-col gap-0.5 overflow-y-auto rounded-md border border-border bg-popover p-1 text-sm text-popover-foreground shadow-md outline-none"
-});
-var listboxItemVariants = tv({
-  base: "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-  variants: {
-    state: {
-      default: "text-popover-foreground",
-      active: "bg-muted text-foreground",
-      selected: "bg-primary-soft text-primary-soft-foreground",
-      disabled: "pointer-events-none opacity-50"
-    }
-  },
-  defaultVariants: { state: "default" }
-});
-var listboxGroupLabelVariants = tv({
-  base: "px-2 py-1.5 text-xs font-semibold text-muted-foreground"
-});
-var listboxSeparatorVariants = tv({
-  base: "-mx-1 my-1 h-px bg-border"
-});
-var listboxEmptyVariants = tv({
-  base: "px-2 py-6 text-center text-sm text-muted-foreground"
-});
 var ListboxContext = createContext(null);
 function useListboxContext() {
   const ctx = useContext(ListboxContext);
@@ -3725,7 +3701,546 @@ var StepperPanel = forwardRef(function StepperPanel2({ value, className, childre
 Stepper.List = StepperList;
 Stepper.Step = StepperStep;
 Stepper.Panel = StepperPanel;
+var TagsInput = forwardRef(function TagsInput2({
+  value,
+  defaultValue,
+  onValueChange,
+  inputValue,
+  onInputChange,
+  placeholder = "Add tag\u2026",
+  delimiters = [","],
+  validate = (t) => t.trim().length > 0,
+  allowDuplicates = false,
+  max,
+  invalid,
+  disabled,
+  readOnly,
+  name,
+  tagVariant = "neutral",
+  size,
+  className,
+  onKeyDown,
+  onBlur,
+  ...rest
+}, forwardedRef) {
+  const [tags, setTags] = useControlled({
+    controlled: value,
+    default: defaultValue ?? [],
+    onChange: onValueChange
+  });
+  const [text, setText] = useControlled({
+    controlled: inputValue,
+    default: "",
+    onChange: onInputChange
+  });
+  const inputRef = useRef(null);
+  const [pendingDelete, setPendingDelete] = useState(false);
+  const state = invalid ? "invalid" : "default";
+  const commit = useCallback(
+    (raw) => {
+      const trimmed = raw.trim();
+      if (!trimmed || !validate(trimmed)) return;
+      if (!allowDuplicates && tags.includes(trimmed)) return;
+      if (max != null && tags.length >= max) return;
+      setTags([...tags, trimmed]);
+      setText("");
+    },
+    [tags, validate, allowDuplicates, max, setTags, setText]
+  );
+  const removeAt = useCallback(
+    (idx) => {
+      setTags(tags.filter((_, i) => i !== idx));
+    },
+    [tags, setTags]
+  );
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || disabled || readOnly) return;
+    if (e.key === "Enter" || e.key === "Tab" && text) {
+      if (text) {
+        e.preventDefault();
+        commit(text);
+        setPendingDelete(false);
+      }
+      return;
+    }
+    if (delimiters.includes(e.key)) {
+      e.preventDefault();
+      commit(text);
+      setPendingDelete(false);
+      return;
+    }
+    if (e.key === "Backspace" && !text && tags.length > 0) {
+      if (pendingDelete) {
+        e.preventDefault();
+        removeAt(tags.length - 1);
+        setPendingDelete(false);
+      } else {
+        setPendingDelete(true);
+      }
+      return;
+    }
+    setPendingDelete(false);
+  };
+  const handleContainerClick = (e) => {
+    if (e.target === e.currentTarget) inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      onClick: handleContainerClick,
+      "data-disabled": disabled || void 0,
+      "data-readonly": readOnly || void 0,
+      "data-invalid": invalid || void 0,
+      className: cn(
+        inputBaseVariants({ size, state }),
+        "h-auto min-h-10 flex-wrap items-center gap-1.5 py-1.5",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      ),
+      children: [
+        tags.map((t, i) => /* @__PURE__ */ jsx(
+          Tag,
+          {
+            variant: tagVariant,
+            "data-pending-delete": pendingDelete && i === tags.length - 1 ? "" : void 0,
+            onClose: !disabled && !readOnly ? () => removeAt(i) : void 0,
+            className: cn(pendingDelete && i === tags.length - 1 && "ring-1 ring-ring"),
+            children: t
+          },
+          `${t}-${i}`
+        )),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...rest,
+            ref: composeRefs(forwardedRef, inputRef),
+            type: "text",
+            value: text,
+            placeholder: tags.length === 0 ? placeholder : void 0,
+            disabled,
+            readOnly,
+            "aria-invalid": invalid || void 0,
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: handleKeyDown,
+            onBlur: (e) => {
+              onBlur?.(e);
+              if (text) commit(text);
+              setPendingDelete(false);
+            },
+            className: "min-w-[6rem] flex-1 border-0 bg-transparent p-0 text-sm outline-none placeholder:text-subtle-foreground disabled:cursor-not-allowed"
+          }
+        ),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: tags.join(",") })
+      ]
+    }
+  );
+});
+TagsInput.displayName = "TagsInput";
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0) return true;
+  const fileType = file.type.toLowerCase();
+  const fileName = file.name.toLowerCase();
+  return tokens.some((t) => {
+    if (t.startsWith(".")) return fileName.endsWith(t);
+    if (t.endsWith("/*")) return fileType.startsWith(t.slice(0, -1));
+    return fileType === t;
+  });
+}
+var FileUpload = forwardRef(function FileUpload2({
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles,
+  onFilesChange,
+  disabled,
+  invalid,
+  label = "Drop files here, or click to browse",
+  hint,
+  children,
+  className,
+  name,
+  ...rest
+}, forwardedRef) {
+  const inputRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => inputRef.current);
+  const dragCounter = useRef(0);
+  const [dragState, setDragState] = useState("idle");
+  const partition = useCallback(
+    (files) => {
+      const accepted = [];
+      const rejected = [];
+      const arr = Array.from(files);
+      for (const f of arr) {
+        if (!matchesAccept(f, accept)) {
+          rejected.push({ file: f, reason: "type" });
+          continue;
+        }
+        if (maxSize != null && f.size > maxSize) {
+          rejected.push({ file: f, reason: "size" });
+          continue;
+        }
+        accepted.push(f);
+      }
+      if (maxFiles != null && accepted.length > maxFiles) {
+        const overflow = accepted.splice(maxFiles);
+        for (const f of overflow) rejected.push({ file: f, reason: "count" });
+      }
+      return [accepted, rejected];
+    },
+    [accept, maxSize, maxFiles]
+  );
+  const openPicker = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  const handleDragEnter = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    dragCounter.current += 1;
+    const items = e.dataTransfer?.items;
+    let reject = false;
+    if (items && (accept || maxSize)) {
+      if (accept) {
+        const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+        for (let i = 0; i < items.length; i++) {
+          const it = items[i];
+          if (!it || it.kind !== "file") continue;
+          const t = it.type.toLowerCase();
+          const ok = tokens.some((tk) => {
+            if (tk.startsWith(".")) return false;
+            if (tk.endsWith("/*")) return t.startsWith(tk.slice(0, -1));
+            return t === tk;
+          });
+          if (!ok) {
+            reject = true;
+            break;
+          }
+        }
+      }
+    }
+    setDragState(reject ? "reject" : "over");
+  };
+  const handleDragOver = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  };
+  const handleDragLeave = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    dragCounter.current -= 1;
+    if (dragCounter.current <= 0) {
+      dragCounter.current = 0;
+      setDragState("idle");
+    }
+  };
+  const handleDrop = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    dragCounter.current = 0;
+    setDragState("idle");
+    const files = e.dataTransfer?.files;
+    if (!files || files.length === 0) return;
+    const [accepted, rejected] = partition(files);
+    onFilesChange?.(accepted, rejected);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openPicker();
+    }
+  };
+  const showError = invalid || dragState === "reject";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled || void 0,
+        "data-drag-state": dragState,
+        "data-invalid": showError || void 0,
+        onClick: openPicker,
+        onKeyDown: handleKeyDown,
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        className: cn(
+          "flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-input bg-background px-6 py-10 text-center text-sm text-muted-foreground transition-colors",
+          "hover:border-border-strong hover:bg-muted/40",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          dragState === "over" && "border-primary bg-primary-soft/30 text-foreground",
+          showError && "border-destructive bg-destructive-soft/30 text-destructive",
+          disabled && "cursor-not-allowed opacity-60 hover:border-input hover:bg-background"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: UploadCloud,
+              size: 28,
+              className: cn(
+                "text-muted-foreground",
+                dragState === "over" && "text-primary",
+                showError && "text-destructive"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground", children: label }),
+          hint && /* @__PURE__ */ jsx("div", { className: "text-xs", children: hint }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              disabled,
+              name,
+              className: "sr-only",
+              onChange: (e) => {
+                const files = e.target.files;
+                if (!files || files.length === 0) return;
+                const [accepted, rejected] = partition(files);
+                onFilesChange?.(accepted, rejected);
+                e.target.value = "";
+              }
+            }
+          )
+        ]
+      }
+    ),
+    children
+  ] });
+});
+FileUpload.displayName = "FileUpload";
+var EditableContext = createContext(null);
+function useEditableContext() {
+  const ctx = useContext(EditableContext);
+  if (!ctx) throw new Error("Editable.* must be used inside <Editable>");
+  return ctx;
+}
+function Editable({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  editing: editingProp,
+  defaultEditing = false,
+  onEditingChange,
+  placeholder = "Click to edit",
+  submitOnBlur = true,
+  submitOnEnter = true,
+  cancelOnEscape = true,
+  disabled = false,
+  readOnly = false,
+  name,
+  className,
+  children
+}) {
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  const [editing, setEditing] = useControlled({
+    controlled: editingProp,
+    default: defaultEditing,
+    onChange: onEditingChange
+  });
+  const [draft, setDraft] = useState(value);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (editing) setDraft(value);
+  }, [editing, value]);
+  const submit = useCallback(() => {
+    setValue(draft);
+    setEditing(false);
+  }, [draft, setValue, setEditing]);
+  const cancel = useCallback(() => {
+    setDraft(value);
+    setEditing(false);
+  }, [value, setEditing]);
+  const ctx = useMemo(
+    () => ({
+      value,
+      draft,
+      setDraft,
+      editing,
+      setEditing,
+      submit,
+      cancel,
+      placeholder,
+      disabled,
+      readOnly,
+      submitOnBlur,
+      submitOnEnter,
+      cancelOnEscape,
+      inputRef
+    }),
+    [
+      value,
+      draft,
+      editing,
+      setEditing,
+      submit,
+      cancel,
+      placeholder,
+      disabled,
+      readOnly,
+      submitOnBlur,
+      submitOnEnter,
+      cancelOnEscape
+    ]
+  );
+  return /* @__PURE__ */ jsx(EditableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-1.5", className), children: [
+    children,
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value })
+  ] }) });
+}
+var EditablePreview = forwardRef(
+  function EditablePreview2({ className, onClick, onKeyDown, ...rest }, forwardedRef) {
+    const ctx = useEditableContext();
+    if (ctx.editing) return null;
+    const isEmpty = !ctx.value;
+    const interactive = !ctx.disabled && !ctx.readOnly;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: forwardedRef,
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : -1,
+        "aria-disabled": !interactive || void 0,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented || !interactive) return;
+          ctx.setEditing(true);
+        },
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented || !interactive) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            ctx.setEditing(true);
+          }
+        },
+        className: cn(
+          "cursor-text rounded-sm px-1 py-0.5 text-sm text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isEmpty && "italic text-subtle-foreground",
+          !interactive && "cursor-default hover:bg-transparent",
+          className
+        ),
+        ...rest,
+        children: ctx.value || ctx.placeholder
+      }
+    );
+  }
+);
+var EditableInput = forwardRef(
+  function EditableInput2({ className, size, state, onKeyDown, onBlur, ...rest }, forwardedRef) {
+    const ctx = useEditableContext();
+    useEffect(() => {
+      if (ctx.editing && ctx.inputRef.current) {
+        ctx.inputRef.current.focus();
+        const len = ctx.inputRef.current.value.length;
+        ctx.inputRef.current.setSelectionRange(len, len);
+      }
+    }, [ctx.editing, ctx.inputRef]);
+    if (!ctx.editing) return null;
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      if (ctx.submitOnEnter && e.key === "Enter") {
+        e.preventDefault();
+        ctx.submit();
+      } else if (ctx.cancelOnEscape && e.key === "Escape") {
+        e.preventDefault();
+        ctx.cancel();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: composeRefs(forwardedRef, ctx.inputRef),
+        type: "text",
+        value: ctx.draft,
+        disabled: ctx.disabled,
+        readOnly: ctx.readOnly,
+        onChange: (e) => ctx.setDraft(e.target.value),
+        onKeyDown: handleKeyDown,
+        onBlur: (e) => {
+          onBlur?.(e);
+          if (e.defaultPrevented) return;
+          if (ctx.submitOnBlur) ctx.submit();
+        },
+        className: cn(inputBaseVariants({ size, state }), className),
+        ...rest
+      }
+    );
+  }
+);
+var EditableSubmit = forwardRef(
+  function EditableSubmit2({ className, onClick, children, type = "button", ...rest }, forwardedRef) {
+    const ctx = useEditableContext();
+    if (!ctx.editing) return null;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: forwardedRef,
+        type,
+        "aria-label": "Submit",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.submit();
+        },
+        className: cn(
+          "inline-flex h-8 w-8 items-center justify-center rounded-md text-success transition-colors hover:bg-success-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        ...rest,
+        children: children ?? /* @__PURE__ */ jsx(Icon, { icon: Check, size: 14 })
+      }
+    );
+  }
+);
+var EditableCancel = forwardRef(
+  function EditableCancel2({ className, onClick, children, type = "button", ...rest }, forwardedRef) {
+    const ctx = useEditableContext();
+    if (!ctx.editing) return null;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: forwardedRef,
+        type,
+        "aria-label": "Cancel",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.cancel();
+        },
+        className: cn(
+          "inline-flex h-8 w-8 items-center justify-center rounded-md text-destructive transition-colors hover:bg-destructive-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        ...rest,
+        children: children ?? /* @__PURE__ */ jsx(Icon, { icon: X, size: 14 })
+      }
+    );
+  }
+);
+Editable.Preview = EditablePreview;
+Editable.Input = EditableInput;
+Editable.Submit = EditableSubmit;
+Editable.Cancel = EditableCancel;
 
-export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, DateField, DatePicker, DateRangePicker, EmailInput, Fieldset, FilePicker, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, colorSwatchVariants };
-//# sourceMappingURL=chunk-BQTO7XY6.js.map
-//# sourceMappingURL=chunk-BQTO7XY6.js.map
+export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, Fieldset, FilePicker, FileUpload, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, colorSwatchVariants };
+//# sourceMappingURL=chunk-ILYL6ROC.js.map
+//# sourceMappingURL=chunk-ILYL6ROC.js.map