@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/{components-2dxkv6zm.js → components-2c0qcfx4.js}

@@ -1,16 +1,17 @@
+"use client";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
   FluidHoverHighlight2
-} from "./components-kvr7f9hy.js";
+} from "./components-qdm3yh26.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
 
 // primitives/fluid-hover/index.tsx
 import {
@@ -41,7 +42,7 @@ var containerAxisClass = {
 };
 var FluidHoverItem2 = forwardRef(({ index, disabled = false, className, children, ...props }, ref) => {
   const list = useContext(FluidHoverContext);
-  const shape = useShape();
+  const shape = useShape2();
   const innerRef = useRef(null);
   useRegisterFluidHoverItem2(list?.registerItem, index, innerRef);
   const axis = list?.axis ?? "y";
@@ -77,7 +78,7 @@ var FluidHover2 = forwardRef(({
   ...props
 }, ref) => {
   const containerRef = useRef(null);
-  const shape = useShape();
+  const shape = useShape2();
   const resolvedAxis = axis ?? ((columns ?? 1) > 1 ? "xy" : "y");
   const resolvedColumns = resolvedAxis === "xy" ? Math.max(1, columns ?? 2) : 1;
   const hover = useFluidHover2(containerRef, {

package/dist/shared/{components-473g814w.js → components-2mt9te6d.js}

@@ -1,61 +1,72 @@
+"use client";
 import {
-  shapeMap,
-  useShape
-} from "./components-cv16mryv.js";
+  fieldIconClasses2
+} from "./components-124epb7f.js";
+import {
+  shapeMap2,
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
+import {
+  useFieldBox2
+} from "./components-6zng858q.js";
+import {
+  useReduceMotion2
+} from "./components-de99ykt7.js";
 import {
-  fieldIconClasses,
-  useFieldBox
-} from "./components-raknhppb.js";
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
-  opensInPlace,
-  inPlaceOffset,
-  useMorphOrigin,
-  useMorph
-} from "./components-hqeq3w9q.js";
+  opensInPlace2,
+  inPlaceOffset2,
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
 import {
   FluidHoverHighlight2
-} from "./components-kvr7f9hy.js";
+} from "./components-qdm3yh26.js";
+import {
+  useIcon2
+} from "./components-jqpefjsn.js";
+import {
+  MorphSurface2
+} from "./components-4y816hwp.js";
 import {
-  useIcon
-} from "./components-zrkzcayz.js";
+  popupScrollAreaClass2,
+  popupViewportClass2,
+  isDisabledRow2
+} from "./components-h6p86be3.js";
 import {
-  MorphSurface
-} from "./components-0q0sqfh4.js";
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
+import {
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
 import {
-  useSelectionRuns,
-  useMergeSplitBlocks,
-  SelectionBackgrounds
-} from "./components-5xc2j8jz.js";
+  useSelectionRuns2,
+  useMergeSplitBlocks2,
+  SelectionBackgrounds2
+} from "./components-8tt3xbb5.js";
 import {
   ScrollArea2
-} from "./components-hawvy2qz.js";
+} from "./components-2z48g4fp.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
-import {
-  popupScrollAreaClass,
-  popupViewportClass,
-  isDisabledRow
-} from "./components-vynjtrk6.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+} from "./components-dcc02hs2.js";
 
 // components/inputs/combobox/index.tsx
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
@@ -76,6 +87,11 @@ 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";
@@ -117,15 +133,24 @@ function Combobox2({
   disabled = false,
   name,
   required,
+  inputValue: inputValueProp,
+  defaultInputValue,
+  onInputValueChange,
+  loading = false,
+  loadingLabel = "Loading…",
+  readOnly = false,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
   size
 }) {
   const isMultiple = !!multiple;
   const [internalValues, setInternalValues] = useState(() => toValues(defaultValue));
-  const [inputValue, setInputValue] = useState("");
-  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useControllableState2(inputValueProp, defaultInputValue ?? "", onInputValueChange);
+  const [open, setOpen] = useControllableState2(openProp, defaultOpen, onOpenChange);
   const [highlight, setHighlight] = useState(null);
   const [createdItems, setCreatedItems] = useState([]);
-  const { origin, capture } = useMorphOrigin();
+  const { origin, capture } = useMorphOrigin2();
   const anchorRef = useRef(null);
   const controlledValues = useMemo(() => toValues(value), [value]);
   const values = value !== undefined ? controlledValues : internalValues;
@@ -182,6 +207,8 @@ 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);
@@ -198,8 +225,26 @@ function Combobox2({
     disabled,
     itemsByValue,
     createRow,
-    allSelected
-  }), [values, isMultiple, inputValue, open, origin, disabled, itemsByValue, createRow, allSelected]);
+    allSelected,
+    loading,
+    loadingLabel,
+    readOnly,
+    setOpen
+  }), [
+    values,
+    isMultiple,
+    inputValue,
+    open,
+    origin,
+    disabled,
+    itemsByValue,
+    createRow,
+    allSelected,
+    loading,
+    loadingLabel,
+    readOnly,
+    setOpen
+  ]);
   const root = /* @__PURE__ */ jsx(ComboboxContext.Provider, {
     value: ctx,
     children: /* @__PURE__ */ jsx(ComboboxHighlightContext.Provider, {
@@ -219,10 +264,13 @@ function Combobox2({
             capture({ event: details.event, trigger: anchorRef.current ?? undefined });
           setOpen(next);
         },
+        inputValue: inputValueProp,
+        defaultInputValue,
         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,
@@ -236,17 +284,25 @@ function Combobox2({
   }) : root;
 }
 Combobox2.displayName = "Combobox";
-var popupShape = shapeMap.rounded;
+var popupShape = shapeMap2.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, compact, iconSize }) {
-  const XIcon = useIcon("x");
-  const pill = useShape().variant === "pill";
+  const XIcon = useIcon2("x");
+  const Loader = useIcon2("loader-circle");
+  const pill = useShape2().variant === "pill";
+  const { loading, readOnly } = useComboboxContext();
+  const reduced = useReduceMotion2();
+  const swap = (shown) => reduced ? { opacity: shown ? 1 : 0 } : shown ? SHOWN : HIDDEN;
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      clearable && /* @__PURE__ */ jsx("span", {
+      clearable && !readOnly && /* @__PURE__ */ jsx("span", {
         className: cn2("flex shrink-0 items-center justify-center", compact ? "size-5" : "size-6"),
         children: /* @__PURE__ */ jsx(ComboboxPrimitive.Clear, {
           "aria-label": "Clear",
@@ -261,28 +317,52 @@ function FieldControls({ clearable, compact, iconSize }) {
         "aria-label": "Open",
         tabIndex: -1,
         className: cn2(fieldButtonClass, compact ? "size-5" : "size-6"),
-        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"
-          })
+        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"
+              })
+            })
+          ]
         })
       })
     ]
   });
 }
 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 { anchorRef, readOnly } = useComboboxContext();
+  const { size: sizeClasses, props: boxProps } = useFieldBox2({ variant, invalid: !!error, readOnly, size });
   const compact = sizeClasses.variant === "compact";
-  const { anchorRef } = useComboboxContext();
   return /* @__PURE__ */ jsxs("div", {
     className: "flex flex-col gap-1",
     children: [
@@ -294,7 +374,7 @@ var ComboboxInput2 = forwardRef(({ className, variant = "bordered", icon: Icon,
           Icon && /* @__PURE__ */ jsx(Icon, {
             size: sizeClasses.icon,
             strokeWidth: 1.5,
-            className: fieldIconClasses
+            className: fieldIconClasses2
           }),
           /* @__PURE__ */ jsx(ComboboxPrimitive.Input, {
             ref,
@@ -345,10 +425,10 @@ function useChipRowHeight(padY) {
   return { ref, height };
 }
 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 XIcon = useIcon2("x");
+  const shape = useShape2();
+  const { anchorRef, open, disabled, inputValue, values, readOnly } = useComboboxContext();
+  const { size: sizeClasses, props: boxProps } = useFieldBox2({ variant, invalid: !!error, disabled, readOnly, size });
   const compact = sizeClasses.variant === "compact";
   const rowHeight = useChipRowHeight(compact ? 8 : 12);
   return /* @__PURE__ */ jsxs("div", {
@@ -368,7 +448,7 @@ var ComboboxChips2 = forwardRef(({ className, variant = "bordered", icon: Icon,
             children: /* @__PURE__ */ jsx(Icon, {
               size: sizeClasses.icon,
               strokeWidth: 1.5,
-              className: fieldIconClasses
+              className: fieldIconClasses2
             })
           }),
           /* @__PURE__ */ jsx("div", {
@@ -400,10 +480,10 @@ var ComboboxChips2 = forwardRef(({ className, variant = "bordered", icon: Icon,
                           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: "truncate",
-                              children: label
+                              className: cn2(typeof itemNode(item) === "string" ? "truncate" : "flex min-w-0 items-center", readOnly && "pr-1.5"),
+                              children: itemNode(item)
                             }),
-                            /* @__PURE__ */ jsx(ComboboxPrimitive.ChipRemove, {
+                            !readOnly && /* @__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, {
@@ -455,10 +535,11 @@ var ComboboxContent2 = forwardRef(({
   from,
   effect,
   hideSource,
-  tier = "moderate"
+  tier = "moderate",
+  footer
 }, ref) => {
-  const { open, origin, anchorRef } = useComboboxContext();
-  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  const { open, origin, anchorRef, setOpen, inputValue } = useComboboxContext();
+  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
   const level = Math.min(useSurface2() + 2, 8);
   const shape = popupShape;
@@ -467,20 +548,26 @@ var ComboboxContent2 = forwardRef(({
       anchor: anchorRef,
       side,
       align,
-      sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : sideOffset,
+      sideOffset: opensInPlace2({ effect, hideSource }) ? inPlaceOffset2 : 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__ */ jsx(MorphSurface, {
+          children: /* @__PURE__ */ jsxs(MorphSurface2, {
             morph,
-            bg: SURFACE_BG[level],
-            shadow: SURFACE_SHADOW[3],
+            bg: SURFACE_BG2[level],
+            shadow: SURFACE_SHADOW2[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: [
+              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
+              })
+            ]
           })
         })
       })
@@ -489,12 +576,14 @@ var ComboboxContent2 = forwardRef(({
 });
 ComboboxContent2.displayName = "ComboboxContent";
 var ComboboxList2 = forwardRef(({ className, children }, ref) => {
-  const { open, values, multiple, inputValue, createRow } = useComboboxContext();
+  const { open, values, multiple, inputValue, createRow, loading, loadingLabel } = useComboboxContext();
+  const Loader = useIcon2("loader-circle");
+  const sizeClasses = useSize2();
   const highlight = useContext(ComboboxHighlightContext);
-  const PlusIcon = useIcon("plus");
+  const PlusIcon = useIcon2("plus");
   const shape = popupShape;
   const containerRef = useRef(null);
-  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow });
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow2 });
   const { activeIndex, setActiveIndex, itemRects, isMeasured, handlers, registerItem, remeasure } = hover;
   const [checkedIndices, setCheckedIndices] = useState([]);
   useEffect(() => {
@@ -552,64 +641,81 @@ var ComboboxList2 = forwardRef(({ className, children }, ref) => {
   }, [open, setActiveIndex]);
   const firstChecked = checkedIndices[0];
   const checkedRect = isMeasured && !multiple && firstChecked !== undefined ? itemRects[firstChecked] ?? null : null;
-  const runs = useSelectionRuns(multiple ? checkedIndices : []);
-  const blocks = useMergeSplitBlocks(runs, isMeasured && open ? itemRects : [], shape.bgRadius);
+  const runs = useSelectionRuns2(multiple ? checkedIndices : []);
+  const blocks = useMergeSplitBlocks2(runs, isMeasured && open ? itemRects : [], shape.bgRadius);
   const contentCtx = useMemo(() => ({ registerItem, activeIndex }), [registerItem, activeIndex]);
   return /* @__PURE__ */ jsx(ComboboxContentContext.Provider, {
     value: contentCtx,
-    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))
-          })
-        ]
-      })
+    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
+            })
+          ]
+        })
+      ]
     })
   });
 });
@@ -656,7 +762,7 @@ var ComboboxItem2 = forwardRef(({ className, children, icon: Icon, value, disabl
         className: "shrink-0 transition-[color,stroke-width] duration-fast"
       }),
       /* @__PURE__ */ jsx("span", {
-        className: "flex-1 min-w-0 truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1",
+        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"),
         children
       }),
       /* @__PURE__ */ jsx("span", {
@@ -702,7 +808,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.allSelected && allSelected !== undefined ? allSelected : children
+    children: ctx.loading ? null : ctx.allSelected && allSelected !== undefined ? allSelected : children
   });
 });
 ComboboxEmpty2.displayName = "ComboboxEmpty";

package/dist/shared/{components-hawvy2qz.js → components-2z48g4fp.js}

@@ -1,9 +1,13 @@
+"use client";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
+import {
+  useTouchPrimary2
+} from "./components-drxrtnp2.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 
 // primitives/scroll-area/index.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
@@ -12,35 +16,10 @@ import {
   forwardRef,
   useContext
 } from "react";
-
-// lib/use-touch-primary.tsx
-import { useEffect, useState } from "react";
-function useTouchPrimary() {
-  const [isTouchPrimary, setIsTouchPrimary] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined")
-      return;
-    const controller = new AbortController;
-    const { signal } = controller;
-    const handleTouch = () => {
-      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-      const prefersTouch = window.matchMedia("(pointer: coarse)").matches;
-      setIsTouchPrimary(hasTouch && prefersTouch);
-    };
-    const mq = window.matchMedia("(pointer: coarse)");
-    mq.addEventListener("change", handleTouch, { signal });
-    window.addEventListener("pointerdown", handleTouch, { signal });
-    handleTouch();
-    return () => controller.abort();
-  }, []);
-  return isTouchPrimary;
-}
-
-// primitives/scroll-area/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var ScrollAreaContext = createContext(false);
 var ScrollArea2 = forwardRef(({ className, children, viewportClassName, orientation = "vertical", ...props }, ref) => {
-  const isTouch = useTouchPrimary();
+  const isTouch = useTouchPrimary2();
   return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, {
     value: isTouch,
     children: isTouch ? /* @__PURE__ */ jsx("div", {
@@ -83,7 +62,7 @@ var ScrollArea2 = forwardRef(({ className, children, viewportClassName, orientat
 ScrollArea2.displayName = "ScrollArea";
 var ScrollBar2 = forwardRef(({ className, orientation = "vertical", ...props }, ref) => {
   const isTouch = useContext(ScrollAreaContext);
-  const shape = useShape();
+  const shape = useShape2();
   if (isTouch)
     return null;
   return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {