@wow-two-beta/ui 0.0.48 → 0.0.50

package/dist/{chunk-CMBKBLJE.js → chunk-VTVWJBOP.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-2CDU2ZKL.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-3YNJTBYF.js';
+import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-2TKPRR4X.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, dataAttr, surfaceVariants, Equality } from './chunk-WU5JMO3N.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';
@@ -1567,7 +1567,7 @@ var selectTriggerVariants = tv({
   base: "flex w-full items-center justify-between gap-2 rounded-md border bg-popover text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 data-[state=open]:border-border-strong",
   variants: {
     size: {
-      xs: "h-7 gap-1.5 px-2 text-xs",
+      xs: "h-7 gap-1.5 px-2.5 text-[11px]",
       sm: "h-8 px-2.5 text-sm",
       md: "h-10 px-3 text-sm",
       lg: "h-12 px-4 text-base"
@@ -1582,7 +1582,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 +1589,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 +1610,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 +1700,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 +1719,7 @@ function SelectImpl({
       disabled,
       isLoading,
       clearable,
-      serializer,
+      serializeKeyFn,
       name,
       invalid
     ]
@@ -1716,17 +1733,39 @@ function SelectImpl({
         if (!o) setQuery("");
       },
       placement,
-      offset: 6,
+      offset: 4,
       children
     }
   ) });
 }
 var Select = SelectImpl;
+var TRIGGER_ICON_CLASSES = {
+  xs: "h-3 w-3",
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+var TRIGGER_CLEAR_BOX_CLASSES = {
+  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 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",
       {
@@ -1738,34 +1777,41 @@ 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: "grid h-4 w-4 place-items-center rounded-sm text-subtle-foreground hover:bg-muted hover:text-foreground",
-                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
-              }
-            ),
-            ctx.isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-subtle-foreground" }) : /* @__PURE__ */ jsx(
+                  },
+                  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,
               {
                 className: cn(
-                  "h-4 w-4 text-muted-foreground transition-transform",
+                  iconClass,
+                  "text-muted-foreground transition-transform",
                   ctx.open && "rotate-180"
                 )
               }
@@ -1779,8 +1825,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({
@@ -1788,6 +1834,7 @@ function SelectContent({
   searchable = false,
   searchPlaceholder = "Search\u2026",
   noResultsLabel = "No results",
+  matchWidth = false,
   variant,
   tone,
   radius,
@@ -1808,7 +1855,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: [
@@ -1828,11 +1876,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: [
@@ -1841,7 +1891,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) })
       ]
     }
   );
@@ -1850,26 +1900,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;
@@ -7401,5 +7452,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-CMBKBLJE.js.map
-//# sourceMappingURL=chunk-CMBKBLJE.js.map
+//# sourceMappingURL=chunk-VTVWJBOP.js.map
+//# sourceMappingURL=chunk-VTVWJBOP.js.map