@wow-two-beta/ui 0.0.49 → 0.0.51

package/dist/{chunk-NUI2NTIA.js → chunk-V4T56XX7.js}

@@ -1,9 +1,9 @@
-import { listboxItemVariants, listboxVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-WPC3KBRU.js';
-import { PopoverTrigger, Popover, PopoverContent } from './chunk-C6XVQ5TW.js';
-import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-5V7FBKKL.js';
+import { listboxItemVariants, listboxVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-SVJVVZO6.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-2KZJXQJ5.js';
+import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-HDQCFWFH.js';
 import { useControlled } from './chunk-NUMFGKPY.js';
 import { Icon } from './chunk-F227LKWK.js';
-import { tv, CssExtensions, dataAttr, surfaceVariants } from './chunk-34TLJSEH.js';
+import { tv, CssExtensions, ColorExtensions, dataAttr, surfaceVariants, Equality } from './chunk-BIJGZBQQ.js';
 import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-BMABNEZX.js';
 import { useId } from './chunk-KDXJQNB6.js';
 import { cn, composeRefs } from './chunk-LDRFQG44.js';
@@ -577,6 +577,7 @@ var Checkbox = forwardRef(
     indeterminate,
     variant = "solid",
     tone = "primary",
+    color,
     id,
     disabled,
     required,
@@ -592,11 +593,13 @@ var Checkbox = forwardRef(
     const boxClass = sizePreset ? BOX_SIZE_CLASS[sizePreset] : void 0;
     const iconClass = sizePreset ? ICON_SIZE_CLASS[sizePreset] : DEFAULT_ICON_CLASS;
     const boxStyle = sizeBox ? CssExtensions.resolveBoxSize(sizeBox) : void 0;
+    const colorStyle = ColorExtensions.toneColorOverride(color, tone);
+    const composedStyle = colorStyle || boxStyle ? { ...colorStyle, ...boxStyle } : void 0;
     return /* @__PURE__ */ jsxs(
       "span",
       {
         className: cn("relative inline-flex shrink-0", boxClass, className),
-        style: boxStyle,
+        style: composedStyle,
         children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -1582,7 +1585,6 @@ var selectTriggerVariants = tv({
     state: "default"
   }
 });
-var defaultEquals2 = (a, b) => Object.is(a, b);
 var SelectContext = createContext(null);
 function useSelectContext() {
   const ctx = useContext(SelectContext);
@@ -1590,15 +1592,15 @@ function useSelectContext() {
   return ctx;
 }
 function SelectImpl({
-  value,
-  defaultValue,
-  onValueChange,
-  isEqual,
+  selected,
+  defaultSelected,
+  onChange,
+  keyEquals,
   disabled = false,
   isLoading = false,
   clearable = false,
   name,
-  serialize,
+  serializeKey,
   invalid,
   defaultOpen = false,
   open: openProp,
@@ -1611,70 +1613,88 @@ function SelectImpl({
     default: defaultOpen,
     onChange: onOpenChange
   });
-  const [valueState, setValueState] = useControlled({
-    controlled: value,
-    default: defaultValue ?? null,
-    onChange: onValueChange
+  const [keyState, setKeyState] = useControlled({
+    controlled: selected,
+    default: defaultSelected ?? null,
+    onChange: void 0
+    // we emit via onChange below — needs both key + value
   });
   const [items, setItems] = useState([]);
   const [query, setQuery] = useState("");
-  const isEqualRef = useRef(isEqual);
-  isEqualRef.current = isEqual;
-  const serializeRef = useRef(serialize);
-  serializeRef.current = serialize;
-  const equals = useCallback((a, b) => {
-    const fn = isEqualRef.current;
-    return (fn ?? defaultEquals2)(a, b);
+  const keyEqualsRef = useRef(keyEquals);
+  keyEqualsRef.current = keyEquals;
+  const serializeKeyRef = useRef(serializeKey);
+  serializeKeyRef.current = serializeKey;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const keyEqualsFn = useCallback((a, b) => {
+    const fn = keyEqualsRef.current;
+    return (fn ?? Equality.strict)(a, b);
   }, []);
-  const serializer = useCallback((v) => {
-    const fn = serializeRef.current;
-    return (fn ?? ((x) => String(x)))(v);
+  const serializeKeyFn = useCallback((k) => {
+    const fn = serializeKeyRef.current;
+    return (fn ?? ((x) => String(x)))(k);
   }, []);
-  const registerItem = useCallback((entry) => {
-    setItems((prev) => {
-      const idx = prev.findIndex((p) => Object.is(p.value, entry.value));
-      if (idx >= 0) {
-        const existing = prev[idx];
-        if (existing && existing.label === entry.label && existing.text === entry.text) {
-          return prev;
+  const registerItem = useCallback(
+    (entry) => {
+      setItems((prev) => {
+        const idx = prev.findIndex((p) => Object.is(p.itemKey, entry.itemKey));
+        if (idx >= 0) {
+          const existing = prev[idx];
+          if (existing && existing.label === entry.label && existing.text === entry.text && Object.is(existing.value, entry.value)) {
+            return prev;
+          }
+          const next = prev.slice();
+          next[idx] = entry;
+          return next;
         }
-        const next = prev.slice();
-        next[idx] = entry;
-        return next;
-      }
-      return [...prev, entry];
-    });
-  }, []);
-  const unregisterItem = useCallback((v) => {
+        return [...prev, entry];
+      });
+    },
+    []
+  );
+  const unregisterItem = useCallback((k) => {
     setItems((prev) => {
-      const idx = prev.findIndex((p) => Object.is(p.value, v));
+      const idx = prev.findIndex((p) => Object.is(p.itemKey, k));
       if (idx === -1) return prev;
       const next = prev.slice();
       next.splice(idx, 1);
       return next;
     });
   }, []);
-  const onSelect = useCallback(
+  const emitChange = useCallback(
     (next) => {
-      setValueState(next);
+      onChangeRef.current?.(next);
+    },
+    []
+  );
+  const onSelect = useCallback(
+    (entry) => {
+      setKeyState(entry.itemKey);
       setOpenState(false);
       setQuery("");
+      emitChange({
+        itemKey: entry.itemKey,
+        value: entry.value,
+        label: entry.label
+      });
     },
-    [setValueState, setOpenState]
+    [setKeyState, setOpenState, emitChange]
   );
   const onClear = useCallback(() => {
-    setValueState(null);
-  }, [setValueState]);
-  const hasValue = valueState !== null && valueState !== void 0;
+    setKeyState(null);
+    emitChange(null);
+  }, [setKeyState, emitChange]);
+  const hasSelection = keyState !== null && keyState !== void 0;
   const ctx = useMemo(
     () => ({
       open: openState,
       setOpen: setOpenState,
-      value: valueState,
-      hasValue,
+      selectedKey: keyState,
+      hasSelection,
       onSelect,
       onClear,
-      isEqual: equals,
+      keyEquals: keyEqualsFn,
       items,
       registerItem,
       unregisterItem,
@@ -1683,18 +1703,18 @@ function SelectImpl({
       disabled,
       isLoading,
       clearable,
-      serialize: serializer,
+      serializeKey: serializeKeyFn,
       name,
       invalid
     }),
     [
       openState,
       setOpenState,
-      valueState,
-      hasValue,
+      keyState,
+      hasSelection,
       onSelect,
       onClear,
-      equals,
+      keyEqualsFn,
       items,
       registerItem,
       unregisterItem,
@@ -1702,7 +1722,7 @@ function SelectImpl({
       disabled,
       isLoading,
       clearable,
-      serializer,
+      serializeKeyFn,
       name,
       invalid
     ]
@@ -1716,7 +1736,7 @@ function SelectImpl({
         if (!o) setQuery("");
       },
       placement,
-      offset: 6,
+      offset: 4,
       children
     }
   ) });
@@ -1729,18 +1749,26 @@ var TRIGGER_ICON_CLASSES = {
   lg: "h-5 w-5"
 };
 var TRIGGER_CLEAR_BOX_CLASSES = {
-  xs: "h-3.5 w-3.5",
-  sm: "h-4 w-4",
-  md: "h-4 w-4",
-  lg: "h-5 w-5"
+  xs: "h-4 w-4",
+  sm: "h-5 w-5",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+var TRIGGER_DIVIDER_CLASSES = {
+  xs: "h-3",
+  sm: "h-3.5",
+  md: "h-4",
+  lg: "h-5"
 };
 var SelectTrigger = forwardRef(
   function SelectTrigger2({ size, state, className, children, ...rest }, ref) {
     const ctx = useSelectContext();
     const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
-    const showClear = ctx.clearable && ctx.hasValue && !ctx.isLoading && !ctx.disabled;
-    const iconClass = TRIGGER_ICON_CLASSES[size ?? "md"];
-    const clearBoxClass = TRIGGER_CLEAR_BOX_CLASSES[size ?? "md"];
+    const showClear = ctx.clearable && ctx.hasSelection && !ctx.isLoading && !ctx.disabled;
+    const sizeKey = size ?? "md";
+    const iconClass = TRIGGER_ICON_CLASSES[sizeKey];
+    const clearBoxClass = TRIGGER_CLEAR_BOX_CLASSES[sizeKey];
+    const dividerClass = TRIGGER_DIVIDER_CLASSES[sizeKey];
     return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -1752,32 +1780,35 @@ var SelectTrigger = forwardRef(
         ...rest,
         children: [
           children ?? /* @__PURE__ */ jsx(SelectValue, {}),
-          /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1", children: [
-            showClear && /* @__PURE__ */ jsx(
-              "span",
-              {
-                role: "button",
-                tabIndex: 0,
-                "aria-label": "Clear selection",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  ctx.onClear();
-                },
-                onPointerDown: (e) => e.stopPropagation(),
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+            showClear && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Clear selection",
+                  onClick: (e) => {
                     e.stopPropagation();
                     ctx.onClear();
-                  }
-                },
-                className: cn(
-                  "grid place-items-center rounded-sm text-subtle-foreground hover:bg-muted hover:text-foreground",
-                  clearBoxClass
-                ),
-                children: /* @__PURE__ */ jsx(X, { className: iconClass })
-              }
-            ),
+                  },
+                  onPointerDown: (e) => e.stopPropagation(),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      ctx.onClear();
+                    }
+                  },
+                  className: cn(
+                    "grid place-items-center rounded-full text-subtle-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    clearBoxClass
+                  ),
+                  children: /* @__PURE__ */ jsx(X, { className: iconClass })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("w-px bg-border", dividerClass) })
+            ] }),
             ctx.isLoading ? /* @__PURE__ */ jsx(Loader2, { className: cn(iconClass, "animate-spin text-subtle-foreground") }) : /* @__PURE__ */ jsx(
               ChevronDown,
               {
@@ -1797,8 +1828,8 @@ var SelectTrigger = forwardRef(
 function SelectValue({ placeholder, children }) {
   const ctx = useSelectContext();
   if (children) return /* @__PURE__ */ jsx("span", { className: "truncate", children });
-  const match = ctx.hasValue ? ctx.items.find((i) => ctx.isEqual(i.value, ctx.value)) : void 0;
-  const label = match?.label ?? (ctx.hasValue ? ctx.serialize(ctx.value) : null);
+  const match = ctx.hasSelection ? ctx.items.find((i) => ctx.keyEquals(i.itemKey, ctx.selectedKey)) : void 0;
+  const label = match?.label ?? (ctx.hasSelection ? ctx.serializeKey(ctx.selectedKey) : null);
   return /* @__PURE__ */ jsx("span", { className: cn("truncate text-left", !label && "text-subtle-foreground"), children: label ?? placeholder });
 }
 function SelectContent({
@@ -1806,6 +1837,7 @@ function SelectContent({
   searchable = false,
   searchPlaceholder = "Search\u2026",
   noResultsLabel = "No results",
+  matchWidth = false,
   variant,
   tone,
   radius,
@@ -1826,7 +1858,8 @@ function SelectContent({
       padding: padding ?? "none",
       elevation,
       className: cn(
-        "w-auto min-w-[var(--anchor-width)] overflow-hidden",
+        "overflow-hidden",
+        matchWidth ? "w-[var(--anchor-width)] [&_[role=option]>span.flex-1>:first-child]:truncate" : "w-auto min-w-[var(--anchor-width)]",
         className
       ),
       children: [
@@ -1846,11 +1879,13 @@ function SelectContent({
         /* @__PURE__ */ jsxs(
           Listbox,
           {
-            value: ctx.value ?? void 0,
-            onValueChange: (v) => {
-              if (v !== null && v !== void 0) ctx.onSelect(v);
+            value: ctx.selectedKey ?? void 0,
+            onValueChange: (k) => {
+              if (k === null || k === void 0) return;
+              const entry = ctx.items.find((i) => ctx.keyEquals(i.itemKey, k));
+              if (entry) ctx.onSelect(entry);
             },
-            isEqual: ctx.isEqual,
+            isEqual: ctx.keyEquals,
             variant: "flat",
             radius: "none",
             children: [
@@ -1859,7 +1894,7 @@ function SelectContent({
             ]
           }
         ),
-        ctx.name && ctx.hasValue && /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: ctx.serialize(ctx.value) })
+        ctx.name && ctx.hasSelection && /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: ctx.serializeKey(ctx.selectedKey) })
       ]
     }
   );
@@ -1868,26 +1903,27 @@ function extractText(node) {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map(extractText).join(" ");
-  if (isValidElement(node)) {
+  if (typeof node === "object" && "props" in node) {
     const props = node.props;
-    return extractText(props.children);
+    return extractText(props?.children);
   }
   return "";
 }
-var SelectItem = forwardRef(function SelectItem2({ value, disabled, text, className, children }, ref) {
+var SelectItem = forwardRef(function SelectItem2({ itemKey, value, label, children, text, disabled, className }, ref) {
   const ctx = useSelectContext();
   const { registerItem, unregisterItem, query } = ctx;
+  const resolvedValue = value === void 0 ? itemKey : value;
   const itemText = useMemo(
-    () => text ?? extractText(children),
-    [text, children]
+    () => text ?? extractText(label) ?? extractText(children),
+    [text, label, children]
   );
   useEffect(() => {
-    registerItem({ value, label: children, text: itemText });
-    return () => unregisterItem(value);
-  }, [registerItem, unregisterItem, value, children, itemText]);
+    registerItem({ itemKey, value: resolvedValue, label, text: itemText });
+    return () => unregisterItem(itemKey);
+  }, [registerItem, unregisterItem, itemKey, resolvedValue, label, itemText]);
   const matchesQuery = !query || itemText.toLowerCase().includes(query.toLowerCase());
   if (!matchesQuery) return null;
-  return /* @__PURE__ */ jsx(ListboxItem, { ref, value, disabled, className, children });
+  return /* @__PURE__ */ jsx(ListboxItem, { ref, value: itemKey, disabled, className, children: children ?? label });
 });
 Select.Trigger = SelectTrigger;
 Select.Value = SelectValue;
@@ -2308,36 +2344,45 @@ function ComboboxContent({
   const ctx = useComboboxContext();
   if (!ctx.open) return null;
   const resolvedPadding = padding ?? "xs";
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnchoredPositioner, { anchor: ctx.inputRef.current, placement, offset, children: /* @__PURE__ */ jsx(
-    DismissableLayer,
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+    AnchoredPositioner,
     {
-      onEscape: () => ctx.setOpen(false),
-      onOutsidePointerDown: (e) => {
-        if (ctx.inputRef.current?.contains(e.target)) return;
-        ctx.setOpen(false);
-      },
+      anchor: ctx.inputRef.current,
+      placement,
+      offset,
+      className: "z-dropdown",
       children: /* @__PURE__ */ jsx(
-        "div",
+        DismissableLayer,
         {
-          id: ctx.listboxId,
-          role: "listbox",
-          className: cn(
-            surfaceVariants({
-              variant,
-              tone,
-              radius,
-              padding: resolvedPadding,
-              elevation
-            }),
-            listboxVariants(),
-            className
-          ),
-          style: ctx.inputRef.current ? { minWidth: ctx.inputRef.current.offsetWidth } : void 0,
-          children
+          onEscape: () => ctx.setOpen(false),
+          onOutsidePointerDown: (e) => {
+            if (ctx.inputRef.current?.contains(e.target)) return;
+            ctx.setOpen(false);
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: ctx.listboxId,
+              role: "listbox",
+              className: cn(
+                surfaceVariants({
+                  variant,
+                  tone,
+                  radius,
+                  padding: resolvedPadding,
+                  elevation
+                }),
+                listboxVariants(),
+                className
+              ),
+              style: ctx.inputRef.current ? { minWidth: ctx.inputRef.current.offsetWidth } : void 0,
+              children
+            }
+          )
         }
       )
     }
-  ) }) });
+  ) });
 }
 var ComboboxItem = forwardRef(function ComboboxItem2({ value, disabled = false, className, children, onClick, onPointerEnter, ...rest }, forwardedRef) {
   const ctx = useComboboxContext();
@@ -7419,5 +7464,5 @@ var ChatComposer = forwardRef(
 ChatComposer.displayName = "ChatComposer";
 
 export { ADDRESS_COUNTRIES, AddressForm, BUILT_IN_EMOJI, BUILT_IN_FONTS, Calendar, CharacterCount, ChatComposer, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CodeEditor, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CronInput, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, EmojiPicker, Fieldset, FilePicker, FileUpload, FontPicker, FormErrorMessage, FormField, FormHelperText, GradientPicker, IconPicker, InputAddon, InputGroup, JSONEditor, KeyboardShortcutPicker, Knob, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MarkdownEditor, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PHONE_COUNTRIES, PasswordInput, PasswordStrength, PercentInput, PhoneInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, ReactionPicker, RecurrenceEditor, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, gradientToCss, useWizard };
-//# sourceMappingURL=chunk-NUI2NTIA.js.map
-//# sourceMappingURL=chunk-NUI2NTIA.js.map
+//# sourceMappingURL=chunk-V4T56XX7.js.map
+//# sourceMappingURL=chunk-V4T56XX7.js.map