@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/dist/shared/{components-w0xq6q9k.js → components-w1r67ag9.js}

@@ -1,72 +1,61 @@
-"use client";
 import {
-  fieldIconClasses2
-} from "./components-124epb7f.js";
-import {
-  shapeMap2,
-  useShape2
-} from "./components-71nbt03m.js";
+  shapeMap,
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
+} from "./components-0sn7ypjw.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
-import {
-  useFieldBox2
-} from "./components-hdzrqqpx.js";
+} from "./components-ezxhrmer.js";
 import {
-  useReduceMotion2
-} from "./components-de99ykt7.js";
-import {
-  spring2
-} from "./components-3ey0hzpb.js";
+  fieldIconClasses,
+  useFieldBox
+} from "./components-raknhppb.js";
 import {
-  opensInPlace2,
-  inPlaceOffset2,
-  useMorphOrigin2,
-  useMorph2
-} from "./components-awra5sff.js";
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
   FluidHoverHighlight2
-} from "./components-qdm3yh26.js";
+} from "./components-kvr7f9hy.js";
 import {
-  useIcon2
-} from "./components-jqpefjsn.js";
+  useIcon
+} from "./components-zrkzcayz.js";
 import {
-  MorphSurface2
-} from "./components-4y816hwp.js";
-import {
-  popupScrollAreaClass2,
-  popupViewportClass2,
-  isDisabledRow2
-} from "./components-h6p86be3.js";
-import {
-  SURFACE_BG2,
-  SURFACE_SHADOW2
-} from "./components-vf45j12c.js";
+  MorphSurface
+} from "./components-0q0sqfh4.js";
 import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-dhgk6mbt.js";
-import {
-  useControllableState2
-} from "./components-tz1fv35x.js";
+} from "./components-zx6b6yby.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-yhgq0qxx.js";
+} from "./components-59efxjd9.js";
 import {
-  useSelectionRuns2,
-  useMergeSplitBlocks2,
-  SelectionBackgrounds2
-} from "./components-8tt3xbb5.js";
+  useSelectionRuns,
+  useMergeSplitBlocks,
+  SelectionBackgrounds
+} from "./components-5xc2j8jz.js";
 import {
   ScrollArea2
-} from "./components-ctqmge8t.js";
+} from "./components-b0eac83j.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
+} from "./components-jjw69c4c.js";
+import {
+  popupScrollAreaClass,
+  popupViewportClass,
+  isDisabledRow
+} from "./components-vynjtrk6.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/inputs/combobox/index.tsx
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
@@ -87,11 +76,6 @@ function itemValue(item) {
   return typeof item === "string" ? item : item.value;
 }
 function itemLabel(item) {
-  if (typeof item === "string")
-    return item;
-  return item.textValue ?? (typeof item.label === "string" ? item.label : item.value);
-}
-function itemNode(item) {
   return typeof item === "string" ? item : item.label;
 }
 var CREATE_VALUE = "\x00create";
@@ -101,7 +85,6 @@ function isCreateItem(item) {
 function defaultCreateLabel(query) {
   return `Create “${query}”`;
 }
-var NO_LABELS = {};
 var ComboboxContext = createContext(null);
 var ComboboxHighlightContext = createContext(null);
 function useComboboxContext() {
@@ -134,26 +117,15 @@ function Combobox2({
   disabled = false,
   name,
   required,
-  inputValue: inputValueProp,
-  defaultInputValue,
-  onInputValueChange,
-  labels,
-  loading = false,
-  loadingLabel = "Loading…",
-  readOnly = false,
-  open: openProp,
-  defaultOpen = false,
-  onOpenChange,
   size
 }) {
   const isMultiple = !!multiple;
   const [internalValues, setInternalValues] = useState(() => toValues(defaultValue));
-  const inputDetails = useRef(undefined);
-  const [inputValue, setInputValue] = useControllableState2(inputValueProp, defaultInputValue ?? "", (next) => onInputValueChange?.(next, inputDetails.current));
-  const [open, setOpen] = useControllableState2(openProp, defaultOpen, onOpenChange);
+  const [inputValue, setInputValue] = useState("");
+  const [open, setOpen] = useState(false);
   const [highlight, setHighlight] = useState(null);
   const [createdItems, setCreatedItems] = useState([]);
-  const { origin, capture } = useMorphOrigin2();
+  const { origin, capture } = useMorphOrigin();
   const anchorRef = useRef(null);
   const controlledValues = useMemo(() => toValues(value), [value]);
   const values = value !== undefined ? controlledValues : internalValues;
@@ -210,8 +182,6 @@ function Combobox2({
   }, [value, onValueChange, isMultiple, creatable]);
   const { contains } = ComboboxPrimitive.useFilter();
   const filterFn = useMemo(() => {
-    if (filter === null)
-      return null;
     if (!filter && !createItem)
       return;
     const match = filter ? (item, q) => filter(item, q) : (item, q) => contains(item, q, itemLabel);
@@ -228,28 +198,8 @@ function Combobox2({
     disabled,
     itemsByValue,
     createRow,
-    allSelected,
-    loading,
-    loadingLabel,
-    readOnly,
-    setOpen,
-    labels: labels ?? NO_LABELS
-  }), [
-    values,
-    isMultiple,
-    inputValue,
-    open,
-    origin,
-    disabled,
-    itemsByValue,
-    createRow,
-    allSelected,
-    loading,
-    loadingLabel,
-    readOnly,
-    setOpen,
-    labels
-  ]);
+    allSelected
+  }), [values, isMultiple, inputValue, open, origin, disabled, itemsByValue, createRow, allSelected]);
   const root = /* @__PURE__ */ jsx(ComboboxContext.Provider, {
     value: ctx,
     children: /* @__PURE__ */ jsx(ComboboxHighlightContext.Provider, {
@@ -269,16 +219,10 @@ function Combobox2({
             capture({ event: details.event, trigger: anchorRef.current ?? undefined });
           setOpen(next);
         },
-        inputValue: inputValueProp,
-        defaultInputValue,
-        onInputValueChange: (next, details) => {
-          inputDetails.current = details;
-          setInputValue(next);
-        },
+        onInputValueChange: (next) => setInputValue(next),
         autoHighlight: ALWAYS_HIGHLIGHT,
         onItemHighlighted: (item, details) => setHighlight(item === undefined ? null : { index: details.index, keyboard: details.reason !== "pointer" }),
         disabled,
-        readOnly,
         name,
         required,
         modal: false,
@@ -292,33 +236,20 @@ function Combobox2({
   }) : root;
 }
 Combobox2.displayName = "Combobox";
-var popupShape = shapeMap2.rounded;
+var popupShape = shapeMap.rounded;
 var ALWAYS_HIGHLIGHT = "always";
 var fieldButtonClass = "flex shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors duration-fast hover:text-foreground focus-visible:ring-1 focus-visible:ring-focus-ring data-[disabled]:pointer-events-none";
 var clearButtonClass = cn2(fieldButtonClass, "hover:bg-hover active:bg-active transition-[color,background-color]");
 var chipRemoveClass = cn2(fieldButtonClass, "rounded hover:bg-active");
-var SHOWN = { opacity: 1, scale: 1, filter: "blur(0px)" };
-var HIDDEN = { opacity: 0, scale: 0.6, filter: "blur(4px)" };
-var swapEnter = { type: "tween", duration: spring2.fast.duration, ease: "easeOut" };
-var swapLeave = { type: "tween", ...spring2.fast.exit, ease: "easeIn" };
-function FieldControls({
-  clearable,
-  hideTrigger,
-  compact,
-  iconSize
-}) {
-  const XIcon = useIcon2("x");
-  const Loader = useIcon2("loader-circle");
-  const pill = useShape2().variant === "pill";
-  const { loading, readOnly, labels } = useComboboxContext();
-  const reduced = useReduceMotion2();
-  const swap = (shown) => reduced ? { opacity: shown ? 1 : 0 } : shown ? SHOWN : HIDDEN;
+function FieldControls({ clearable, compact, iconSize }) {
+  const XIcon = useIcon("x");
+  const pill = useShape().variant === "pill";
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      clearable && !readOnly && /* @__PURE__ */ jsx("span", {
+      clearable && /* @__PURE__ */ jsx("span", {
         className: cn2("flex shrink-0 items-center justify-center", compact ? "size-5" : "size-6"),
         children: /* @__PURE__ */ jsx(ComboboxPrimitive.Clear, {
-          "aria-label": labels.clear ?? "Clear",
+          "aria-label": "Clear",
           className: cn2(clearButtonClass, pill && "rounded-full", compact ? "size-5" : "size-6"),
           children: /* @__PURE__ */ jsx(XIcon, {
             size: iconSize,
@@ -326,68 +257,32 @@ function FieldControls({
           })
         })
       }),
-      !hideTrigger && /* @__PURE__ */ jsx(ComboboxPrimitive.Trigger, {
-        "aria-label": labels.open ?? "Open",
+      /* @__PURE__ */ jsx(ComboboxPrimitive.Trigger, {
+        "aria-label": "Open",
         tabIndex: -1,
         className: cn2(fieldButtonClass, compact ? "size-5" : "size-6"),
-        children: /* @__PURE__ */ jsxs("span", {
-          className: "grid",
-          style: { width: iconSize, height: iconSize },
-          children: [
-            /* @__PURE__ */ jsx(motion.span, {
-              className: "col-start-1 row-start-1 flex",
-              initial: false,
-              animate: swap(!loading),
-              transition: loading ? swapLeave : swapEnter,
-              children: /* @__PURE__ */ jsx("svg", {
-                width: iconSize,
-                height: iconSize,
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: 2,
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                className: cn2("transition-colors duration-fast", readOnly && "invisible"),
-                children: /* @__PURE__ */ jsx("path", {
-                  d: "M6 9l6 6 6-6"
-                })
-              })
-            }),
-            /* @__PURE__ */ jsx(motion.span, {
-              "aria-hidden": true,
-              className: "col-start-1 row-start-1 flex",
-              initial: false,
-              animate: swap(loading),
-              transition: loading ? swapEnter : swapLeave,
-              children: /* @__PURE__ */ jsx(Loader, {
-                size: iconSize,
-                strokeWidth: 1.5,
-                className: "animate-spin motion-reduce:animate-none"
-              })
-            })
-          ]
+        children: /* @__PURE__ */ jsx("svg", {
+          width: iconSize,
+          height: iconSize,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "transition-colors duration-fast",
+          children: /* @__PURE__ */ jsx("path", {
+            d: "M6 9l6 6 6-6"
+          })
         })
       })
     ]
   });
 }
-var ComboboxInput2 = forwardRef(({
-  className,
-  variant = "bordered",
-  icon: Icon,
-  placeholder,
-  error,
-  invalid,
-  hideTrigger = false,
-  clearable = false,
-  size,
-  ...props
-}, ref) => {
-  const { anchorRef, readOnly, labels } = useComboboxContext();
-  const box = useFieldBox2({ variant, invalid: error ? true : invalid, readOnly, size });
-  const { size: sizeClasses, props: boxProps } = box;
+var ComboboxInput2 = forwardRef(({ className, variant = "bordered", icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref) => {
+  const { size: sizeClasses, props: boxProps } = useFieldBox({ variant, invalid: !!error, size });
   const compact = sizeClasses.variant === "compact";
+  const { anchorRef } = useComboboxContext();
   return /* @__PURE__ */ jsxs("div", {
     className: "flex flex-col gap-1",
     children: [
@@ -399,18 +294,17 @@ var ComboboxInput2 = forwardRef(({
           Icon && /* @__PURE__ */ jsx(Icon, {
             size: sizeClasses.icon,
             strokeWidth: 1.5,
-            className: fieldIconClasses2
+            className: fieldIconClasses
           }),
           /* @__PURE__ */ jsx(ComboboxPrimitive.Input, {
             ref,
-            placeholder: placeholder ?? labels.placeholder ?? "Search…",
-            "aria-invalid": box.invalid || undefined,
+            placeholder,
+            "aria-invalid": !!error || undefined,
             className: cn2("min-w-0 flex-1 rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, compact ? "leading-5" : "leading-6"),
             ...props
           }),
           /* @__PURE__ */ jsx(FieldControls, {
             clearable,
-            hideTrigger,
             compact,
             iconSize: sizeClasses.icon
           })
@@ -450,23 +344,11 @@ function useChipRowHeight(padY) {
   }, [height]);
   return { ref, height };
 }
-var ComboboxChips2 = forwardRef(({
-  className,
-  variant = "bordered",
-  icon: Icon,
-  placeholder,
-  error,
-  invalid,
-  hideTrigger = false,
-  clearable = false,
-  size,
-  ...props
-}, ref) => {
-  const XIcon = useIcon2("x");
-  const shape = useShape2();
-  const { anchorRef, open, disabled, inputValue, values, readOnly, labels } = useComboboxContext();
-  const box = useFieldBox2({ variant, invalid: error ? true : invalid, disabled, readOnly, size });
-  const { size: sizeClasses, props: boxProps } = box;
+var ComboboxChips2 = forwardRef(({ className, variant = "bordered", icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref) => {
+  const XIcon = useIcon("x");
+  const shape = useShape();
+  const { anchorRef, open, disabled, inputValue, values } = useComboboxContext();
+  const { size: sizeClasses, props: boxProps } = useFieldBox({ variant, invalid: !!error, disabled, size });
   const compact = sizeClasses.variant === "compact";
   const rowHeight = useChipRowHeight(compact ? 8 : 12);
   return /* @__PURE__ */ jsxs("div", {
@@ -486,7 +368,7 @@ var ComboboxChips2 = forwardRef(({
             children: /* @__PURE__ */ jsx(Icon, {
               size: sizeClasses.icon,
               strokeWidth: 1.5,
-              className: fieldIconClasses2
+              className: fieldIconClasses
             })
           }),
           /* @__PURE__ */ jsx("div", {
@@ -518,11 +400,11 @@ var ComboboxChips2 = forwardRef(({
                           className: cn2("inline-flex max-w-full shrink-0 items-center gap-0.5 bg-hover pl-2 pr-0.5 text-foreground outline-none", shape.variant === "pill" ? "rounded-full" : "rounded-md", "focus-visible:ring-1 focus-visible:ring-focus-ring", compact ? "h-5 text-caption-compact" : "h-6 text-caption"),
                           children: [
                             /* @__PURE__ */ jsx("span", {
-                              className: cn2(typeof itemNode(item) === "string" ? "truncate" : "flex min-w-0 items-center", readOnly && "pr-1.5"),
-                              children: itemNode(item)
+                              className: "truncate",
+                              children: label
                             }),
-                            !readOnly && /* @__PURE__ */ jsx(ComboboxPrimitive.ChipRemove, {
-                              "aria-label": labels.remove ? labels.remove(label) : `Remove ${label}`,
+                            /* @__PURE__ */ jsx(ComboboxPrimitive.ChipRemove, {
+                              "aria-label": `Remove ${label}`,
                               className: cn2(chipRemoveClass, shape.variant === "pill" && "rounded-full", compact ? "size-4" : "size-5"),
                               children: /* @__PURE__ */ jsx(XIcon, {
                                 size: compact ? 10 : 12,
@@ -539,8 +421,8 @@ var ComboboxChips2 = forwardRef(({
                     children: /* @__PURE__ */ jsx(ComboboxPrimitive.Input, {
                       ref,
                       size: Math.max(1, inputValue.length + 1),
-                      placeholder: selected?.length ? undefined : placeholder ?? labels.placeholder ?? "Search…",
-                      "aria-invalid": box.invalid || undefined,
+                      placeholder: selected?.length ? undefined : placeholder,
+                      "aria-invalid": !!error || undefined,
                       className: cn2("w-full min-w-0 rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", compact ? "h-5 leading-5" : "h-6 leading-6", sizeClasses.text),
                       ...props
                     })
@@ -551,7 +433,6 @@ var ComboboxChips2 = forwardRef(({
           }),
           /* @__PURE__ */ jsx(FieldControls, {
             clearable,
-            hideTrigger,
             compact,
             iconSize: sizeClasses.icon
           })
@@ -574,11 +455,10 @@ var ComboboxContent2 = forwardRef(({
   from,
   effect,
   hideSource,
-  tier = "moderate",
-  footer
+  tier = "moderate"
 }, ref) => {
-  const { open, origin, anchorRef, setOpen, inputValue } = useComboboxContext();
-  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
+  const { open, origin, anchorRef } = useComboboxContext();
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
   const level = Math.min(useSurface2() + 2, 8);
   const shape = popupShape;
@@ -587,26 +467,20 @@ var ComboboxContent2 = forwardRef(({
       anchor: anchorRef,
       side,
       align,
-      sideOffset: opensInPlace2({ effect, hideSource }) ? inPlaceOffset2 : sideOffset,
+      sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : sideOffset,
       className: "z-50 outline-none",
       children: /* @__PURE__ */ jsx(ComboboxPrimitive.Popup, {
         ref: morph.popupRef,
         className: "relative select-none outline-none",
         children: /* @__PURE__ */ jsx(SurfaceProvider2, {
           value: level,
-          children: /* @__PURE__ */ jsxs(MorphSurface2, {
+          children: /* @__PURE__ */ jsx(MorphSurface, {
             morph,
-            bg: SURFACE_BG2[level],
-            shadow: SURFACE_SHADOW2[3],
+            bg: SURFACE_BG[level],
+            shadow: SURFACE_SHADOW[3],
             radius: shape.container,
             className: cn2(`flex flex-col min-w-[var(--anchor-width)] max-h-[min(300px,var(--available-height))] overflow-hidden ${shape.container}`, className),
-            children: [
-              children,
-              footer !== undefined && /* @__PURE__ */ jsx("div", {
-                className: "shrink-0 border-t border-border p-1",
-                children: typeof footer === "function" ? footer({ close: () => setOpen(false), query: inputValue.trim() }) : footer
-              })
-            ]
+            children
           })
         })
       })
@@ -615,14 +489,12 @@ var ComboboxContent2 = forwardRef(({
 });
 ComboboxContent2.displayName = "ComboboxContent";
 var ComboboxList2 = forwardRef(({ className, children }, ref) => {
-  const { open, values, multiple, inputValue, createRow, loading, loadingLabel } = useComboboxContext();
-  const Loader = useIcon2("loader-circle");
-  const sizeClasses = useSize2();
+  const { open, values, multiple, inputValue, createRow } = useComboboxContext();
   const highlight = useContext(ComboboxHighlightContext);
-  const PlusIcon = useIcon2("plus");
+  const PlusIcon = useIcon("plus");
   const shape = popupShape;
   const containerRef = useRef(null);
-  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow2 });
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow });
   const { activeIndex, setActiveIndex, itemRects, isMeasured, handlers, registerItem, remeasure } = hover;
   const [checkedIndices, setCheckedIndices] = useState([]);
   useEffect(() => {
@@ -680,81 +552,64 @@ var ComboboxList2 = forwardRef(({ className, children }, ref) => {
   }, [open, setActiveIndex]);
   const firstChecked = checkedIndices[0];
   const checkedRect = isMeasured && !multiple && firstChecked !== undefined ? itemRects[firstChecked] ?? null : null;
-  const runs = useSelectionRuns2(multiple ? checkedIndices : []);
-  const blocks = useMergeSplitBlocks2(runs, isMeasured && open ? itemRects : [], shape.bgRadius);
+  const runs = useSelectionRuns(multiple ? checkedIndices : []);
+  const blocks = useMergeSplitBlocks(runs, isMeasured && open ? itemRects : [], shape.bgRadius);
   const contentCtx = useMemo(() => ({ registerItem, activeIndex }), [registerItem, activeIndex]);
   return /* @__PURE__ */ jsx(ComboboxContentContext.Provider, {
     value: contentCtx,
-    children: /* @__PURE__ */ jsxs(ScrollArea2, {
-      className: popupScrollAreaClass2,
-      viewportClassName: cn2(popupViewportClass2, "scroll-fade"),
-      children: [
-        /* @__PURE__ */ jsxs(ComboboxPrimitive.List, {
-          ref: (node) => {
-            containerRef.current = node;
-            if (typeof ref === "function")
-              ref(node);
-            else if (ref)
-              ref.current = node;
-          },
-          onMouseEnter: handlers.onMouseEnter,
-          onMouseMove: handlers.onMouseMove,
-          onMouseLeave: handlers.onMouseLeave,
-          onClick: handlers.onClick,
-          className: cn2("relative flex flex-col p-1 outline-none data-[empty]:p-0", className),
-          children: [
-            open && multiple && /* @__PURE__ */ jsx(SelectionBackgrounds2, {
-              blocks: reflowSnap ? blocks.map((b) => ({ ...b, instant: true })) : blocks
-            }),
-            open && !multiple && /* @__PURE__ */ jsx(AnimatePresence, {
-              children: checkedRect && /* @__PURE__ */ jsx(motion.div, {
-                "aria-hidden": true,
-                className: `absolute ${shape.bg} bg-active pointer-events-none`,
-                initial: false,
-                animate: {
-                  top: checkedRect.top,
-                  left: checkedRect.left,
-                  width: checkedRect.width,
-                  height: checkedRect.height,
-                  opacity: 1
-                },
-                exit: { opacity: 0, transition: spring2.moderate.exit },
-                transition: reflowSnap ? { duration: 0 } : { ...spring2.moderate, opacity: { duration: spring2.fast.duration } }
-              }, "checked")
-            }),
-            open && /* @__PURE__ */ jsx(FluidHoverHighlight2, {
-              hover,
-              className: shape.bg,
-              transition: reflowSnap ? false : undefined
-            }),
-            /* @__PURE__ */ jsx(ComboboxPrimitive.Collection, {
-              children: (item, index) => /* @__PURE__ */ jsx(ComboboxItemIndexContext.Provider, {
-                value: index,
-                children: isCreateItem(item) ? /* @__PURE__ */ jsx(ComboboxItem2, {
-                  value: CREATE_VALUE,
-                  icon: PlusIcon,
-                  children: createRow
-                }) : children(item, index)
-              }, itemValue(item))
-            })
-          ]
-        }),
-        loading && /* @__PURE__ */ jsxs("div", {
-          role: "status",
-          className: cn2("flex shrink-0 items-center justify-center text-muted-foreground", sizeClasses.control, sizeClasses.itemPx, sizeClasses.gap, sizeClasses.text),
-          children: [
-            /* @__PURE__ */ jsx(Loader, {
-              size: sizeClasses.icon,
-              strokeWidth: 1.5,
-              className: "shrink-0 animate-spin motion-reduce:animate-none"
-            }),
-            /* @__PURE__ */ jsx("span", {
-              className: "truncate [text-box:trim-both_cap_alphabetic]",
-              children: loadingLabel
-            })
-          ]
-        })
-      ]
+    children: /* @__PURE__ */ jsx(ScrollArea2, {
+      className: popupScrollAreaClass,
+      viewportClassName: cn2(popupViewportClass, "scroll-fade"),
+      children: /* @__PURE__ */ jsxs(ComboboxPrimitive.List, {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function")
+            ref(node);
+          else if (ref)
+            ref.current = node;
+        },
+        onMouseEnter: handlers.onMouseEnter,
+        onMouseMove: handlers.onMouseMove,
+        onMouseLeave: handlers.onMouseLeave,
+        onClick: handlers.onClick,
+        className: cn2("relative flex flex-col p-1 outline-none data-[empty]:p-0", className),
+        children: [
+          open && multiple && /* @__PURE__ */ jsx(SelectionBackgrounds, {
+            blocks: reflowSnap ? blocks.map((b) => ({ ...b, instant: true })) : blocks
+          }),
+          open && !multiple && /* @__PURE__ */ jsx(AnimatePresence, {
+            children: checkedRect && /* @__PURE__ */ jsx(motion.div, {
+              "aria-hidden": true,
+              className: `absolute ${shape.bg} bg-active pointer-events-none`,
+              initial: false,
+              animate: {
+                top: checkedRect.top,
+                left: checkedRect.left,
+                width: checkedRect.width,
+                height: checkedRect.height,
+                opacity: 1
+              },
+              exit: { opacity: 0, transition: spring2.moderate.exit },
+              transition: reflowSnap ? { duration: 0 } : { ...spring2.moderate, opacity: { duration: spring2.fast.duration } }
+            }, "checked")
+          }),
+          open && /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+            hover,
+            className: shape.bg,
+            transition: reflowSnap ? false : undefined
+          }),
+          /* @__PURE__ */ jsx(ComboboxPrimitive.Collection, {
+            children: (item, index) => /* @__PURE__ */ jsx(ComboboxItemIndexContext.Provider, {
+              value: index,
+              children: isCreateItem(item) ? /* @__PURE__ */ jsx(ComboboxItem2, {
+                value: CREATE_VALUE,
+                icon: PlusIcon,
+                children: createRow
+              }) : children(item, index)
+            }, itemValue(item))
+          })
+        ]
+      })
     })
   });
 });
@@ -801,7 +656,7 @@ var ComboboxItem2 = forwardRef(({ className, children, icon: Icon, value, disabl
         className: "shrink-0 transition-[color,stroke-width] duration-fast"
       }),
       /* @__PURE__ */ jsx("span", {
-        className: cn2("flex-1 min-w-0", typeof children === "string" || typeof children === "number" ? "truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1" : "flex items-center"),
+        className: "flex-1 min-w-0 truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1",
         children
       }),
       /* @__PURE__ */ jsx("span", {
@@ -847,7 +702,7 @@ var ComboboxEmpty2 = forwardRef(({ className, children, allSelected, ...props },
     ref,
     className: cn2("px-3 text-center text-muted-foreground [&:not(:empty)]:py-6", sizeClasses.text, className),
     ...props,
-    children: ctx.loading ? null : ctx.allSelected && allSelected !== undefined ? allSelected : children
+    children: ctx.allSelected && allSelected !== undefined ? allSelected : children
   });
 });
 ComboboxEmpty2.displayName = "ComboboxEmpty";