@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-3gae8nta.js

@@ -0,0 +1,719 @@
+import {
+  fieldVariants,
+  fieldIconClasses
+} from "./components-mhd39z7x.js";
+import {
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  shapeMap,
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  useSelectionRuns,
+  useMergeSplitBlocks,
+  SelectionBackgrounds
+} from "./components-5xc2j8jz.js";
+import {
+  ScrollArea2
+} from "./components-hawvy2qz.js";
+import {
+  SizeProvider2
+} 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";
+import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function itemValue(item) {
+  return typeof item === "string" ? item : item.value;
+}
+function itemLabel(item) {
+  return typeof item === "string" ? item : item.label;
+}
+var CREATE_VALUE = "\x00create";
+function isCreateItem(item) {
+  return itemValue(item) === CREATE_VALUE;
+}
+function defaultCreateLabel(query) {
+  return `Create “${query}”`;
+}
+var ComboboxContext = createContext(null);
+var ComboboxHighlightContext = createContext(null);
+function useComboboxContext() {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx)
+    throw new Error("Combobox compound components must be inside <Combobox>");
+  return ctx;
+}
+var ComboboxContentContext = createContext(null);
+var ComboboxItemIndexContext = createContext(0);
+function toValues(v) {
+  if (v === undefined)
+    return [];
+  if (Array.isArray(v))
+    return v;
+  return v === "" ? [] : [v];
+}
+function Combobox2({
+  children,
+  items,
+  multiple,
+  value,
+  defaultValue,
+  onValueChange,
+  filter,
+  onCreate,
+  createLabel = defaultCreateLabel,
+  creatable = false,
+  hideSelected = false,
+  disabled = false,
+  name,
+  required,
+  size
+}) {
+  const isMultiple = !!multiple;
+  const [internalValues, setInternalValues] = useState(() => toValues(defaultValue));
+  const [inputValue, setInputValue] = useState("");
+  const [open, setOpen] = useState(false);
+  const [highlight, setHighlight] = useState(null);
+  const [createdItems, setCreatedItems] = useState([]);
+  const { origin, capture } = useMorphOrigin();
+  const anchorRef = useRef(null);
+  const controlledValues = useMemo(() => toValues(value), [value]);
+  const values = value !== undefined ? controlledValues : internalValues;
+  const allItems = useMemo(() => {
+    const own = createdItems.filter((made) => !items.some((item) => itemValue(item) === itemValue(made)));
+    return own.length ? [...items, ...own] : items;
+  }, [items, createdItems]);
+  const query = inputValue.trim();
+  const canCreate = !!onCreate || creatable;
+  const createItem = useMemo(() => {
+    if (!canCreate || query === "")
+      return null;
+    const lower = query.toLocaleLowerCase();
+    const exists = allItems.some((item) => itemLabel(item).toLocaleLowerCase() === lower);
+    return exists ? null : { value: CREATE_VALUE, label: query };
+  }, [canCreate, query, allItems]);
+  const itemsByValue = useMemo(() => {
+    const map = new Map;
+    for (const item of allItems)
+      map.set(itemValue(item), item);
+    if (createItem)
+      map.set(CREATE_VALUE, createItem);
+    return map;
+  }, [allItems, createItem]);
+  const selectedItems = useMemo(() => values.map((v) => itemsByValue.get(v)).filter(Boolean), [values, itemsByValue]);
+  const hideChecked = hideSelected && isMultiple;
+  const listItems = useMemo(() => {
+    const visible = hideChecked ? allItems.filter((item) => !values.includes(itemValue(item))) : allItems;
+    return createItem ? [...visible, createItem] : visible;
+  }, [allItems, hideChecked, values, createItem]);
+  const allSelected = hideChecked && query === "" && allItems.length > 0 && listItems.length === 0;
+  const onCreateRef = useRef(onCreate);
+  onCreateRef.current = onCreate;
+  const handleValueChange = useCallback((next) => {
+    const picked = Array.isArray(next) ? next : next == null ? [] : [next];
+    const created = picked.find(isCreateItem);
+    let nextValues = picked.filter((item) => !isCreateItem(item)).map(itemValue);
+    if (created) {
+      const madeQuery = itemLabel(created);
+      const made = onCreateRef.current?.(madeQuery) ?? undefined;
+      if (made !== undefined) {
+        nextValues = [...nextValues, itemValue(made)];
+      } else if (creatable) {
+        const own = { value: madeQuery, label: madeQuery };
+        setCreatedItems((prev) => prev.some((item) => itemValue(item) === madeQuery) ? prev : [...prev, own]);
+        nextValues = [...nextValues, madeQuery];
+      } else if (!isMultiple) {
+        return;
+      }
+    }
+    if (value === undefined)
+      setInternalValues(nextValues);
+    onValueChange?.(isMultiple ? nextValues : nextValues[0] ?? "");
+  }, [value, onValueChange, isMultiple, creatable]);
+  const { contains } = ComboboxPrimitive.useFilter();
+  const filterFn = useMemo(() => {
+    if (!filter && !createItem)
+      return;
+    const match = filter ? (item, q) => filter(item, q) : (item, q) => contains(item, q, itemLabel);
+    return (item, q) => isCreateItem(item) || match(item, q);
+  }, [filter, createItem, contains]);
+  const createRow = createItem ? createLabel(query) : null;
+  const ctx = useMemo(() => ({
+    values,
+    multiple: isMultiple,
+    inputValue,
+    open,
+    origin,
+    anchorRef,
+    disabled,
+    itemsByValue,
+    createRow,
+    allSelected
+  }), [values, isMultiple, inputValue, open, origin, disabled, itemsByValue, createRow, allSelected]);
+  const root = /* @__PURE__ */ jsx(ComboboxContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(ComboboxHighlightContext.Provider, {
+      value: highlight,
+      children: /* @__PURE__ */ jsx(ComboboxPrimitive.Root, {
+        items: listItems,
+        multiple: isMultiple,
+        value: isMultiple ? selectedItems : selectedItems[0] ?? null,
+        onValueChange: handleValueChange,
+        isItemEqualToValue: (a, b) => itemValue(a) === itemValue(b),
+        itemToStringLabel: itemLabel,
+        itemToStringValue: itemValue,
+        filter: filterFn,
+        open,
+        onOpenChange: (next, details) => {
+          if (next)
+            capture({ event: details.event, trigger: anchorRef.current ?? undefined });
+          setOpen(next);
+        },
+        onInputValueChange: (next) => setInputValue(next),
+        autoHighlight: ALWAYS_HIGHLIGHT,
+        onItemHighlighted: (item, details) => setHighlight(item === undefined ? null : { index: details.index, keyboard: details.reason !== "pointer" }),
+        disabled,
+        name,
+        required,
+        modal: false,
+        children
+      })
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: root
+  }) : root;
+}
+Combobox2.displayName = "Combobox";
+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");
+function FieldControls({ clearable, compact, iconSize }) {
+  const XIcon = useIcon("x");
+  const pill = useShape().variant === "pill";
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      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": "Clear",
+          className: cn2(clearButtonClass, pill && "rounded-full", compact ? "size-5" : "size-6"),
+          children: /* @__PURE__ */ jsx(XIcon, {
+            size: iconSize,
+            strokeWidth: 1.5
+          })
+        })
+      }),
+      /* @__PURE__ */ jsx(ComboboxPrimitive.Trigger, {
+        "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"
+          })
+        })
+      })
+    ]
+  });
+}
+var ComboboxInput2 = forwardRef(({ className, variant, icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref) => {
+  const shape = useShape();
+  const sizeClasses = useSize2(size);
+  const compact = sizeClasses.variant === "compact";
+  const { anchorRef } = useComboboxContext();
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-col gap-1",
+    children: [
+      /* @__PURE__ */ jsxs(ComboboxPrimitive.InputGroup, {
+        ref: anchorRef,
+        "data-invalid": !!error || undefined,
+        className: cn2(fieldVariants({ variant: variant ?? "bordered" }), "flex items-center", sizeClasses.control, sizeClasses.gap, compact ? "px-2" : "px-2.5", compact ? "min-w-[128px]" : "min-w-[160px]", shape.input, className),
+        children: [
+          Icon && /* @__PURE__ */ jsx(Icon, {
+            size: sizeClasses.icon,
+            strokeWidth: 1.5,
+            className: fieldIconClasses
+          }),
+          /* @__PURE__ */ jsx(ComboboxPrimitive.Input, {
+            ref,
+            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,
+            compact,
+            iconSize: sizeClasses.icon
+          })
+        ]
+      }),
+      error && /* @__PURE__ */ jsx("span", {
+        className: "text-caption text-destructive pl-3",
+        children: error
+      })
+    ]
+  });
+});
+ComboboxInput2.displayName = "ComboboxInput";
+function useChipRowHeight(padY) {
+  const height = useMotionValue("auto");
+  const roRef = useRef(null);
+  const padRef = useRef(padY);
+  padRef.current = padY;
+  const ref = useCallback((el) => {
+    roRef.current?.disconnect();
+    roRef.current = null;
+    if (!el)
+      return;
+    const measure = () => {
+      if (el.offsetHeight <= 0)
+        return;
+      const target = el.offsetHeight + padRef.current;
+      if (height.get() === "auto")
+        height.set(target);
+      else if (height.get() !== target)
+        animate(height, target, spring2.fast);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    roRef.current = ro;
+  }, [height]);
+  return { ref, height };
+}
+var ComboboxChips2 = forwardRef(({ className, variant, icon: Icon, placeholder = "Search…", error, clearable = false, size, ...props }, ref) => {
+  const XIcon = useIcon("x");
+  const shape = useShape();
+  const sizeClasses = useSize2(size);
+  const compact = sizeClasses.variant === "compact";
+  const { anchorRef, open, disabled, inputValue, values } = useComboboxContext();
+  const rowHeight = useChipRowHeight(compact ? 8 : 12);
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-col gap-1",
+    children: [
+      /* @__PURE__ */ jsxs(ComboboxPrimitive.Chips, {
+        ref: anchorRef,
+        render: /* @__PURE__ */ jsx(motion.div, {
+          style: { height: rowHeight.height }
+        }),
+        "data-disabled": disabled || undefined,
+        "data-invalid": !!error || undefined,
+        "data-popup-open": open || undefined,
+        className: cn2(fieldVariants({ variant: variant ?? "bordered" }), "flex items-center", "transition-[color,background-color,border-radius,box-shadow,opacity]", "!items-start", compact ? "min-h-7 py-1" : "min-h-9 py-1.5", sizeClasses.gap, compact ? "px-2" : "px-2.5", compact ? "min-w-[128px]" : "min-w-[160px]", shape.input, className),
+        children: [
+          Icon && /* @__PURE__ */ jsx("span", {
+            className: cn2("flex shrink-0 items-center", compact ? "h-5" : "h-6"),
+            children: /* @__PURE__ */ jsx(Icon, {
+              size: sizeClasses.icon,
+              strokeWidth: 1.5,
+              className: fieldIconClasses
+            })
+          }),
+          /* @__PURE__ */ jsx("div", {
+            ref: rowHeight.ref,
+            className: cn2("relative flex min-w-0 flex-1 flex-wrap items-center gap-1", !Icon && values.length > 0 && "-ml-1"),
+            children: /* @__PURE__ */ jsx(ComboboxPrimitive.Value, {
+              children: (selected) => /* @__PURE__ */ jsxs(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx(AnimatePresence, {
+                    initial: false,
+                    mode: "popLayout",
+                    children: (selected ?? []).map((item) => {
+                      const label = itemLabel(item);
+                      return /* @__PURE__ */ jsx(motion.span, {
+                        layout: true,
+                        initial: { opacity: 0, scale: 0.9 },
+                        animate: { opacity: 1, scale: 1 },
+                        exit: {
+                          opacity: 0,
+                          scale: 0.9,
+                          pointerEvents: "none",
+                          transition: spring2.fast.exit
+                        },
+                        transition: spring2.fast,
+                        style: { originX: 0 },
+                        className: "inline-flex max-w-full shrink-0",
+                        children: /* @__PURE__ */ jsxs(ComboboxPrimitive.Chip, {
+                          "aria-label": label,
+                          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
+                            }),
+                            /* @__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,
+                                strokeWidth: 2
+                              })
+                            })
+                          ]
+                        })
+                      }, itemValue(item));
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "flex min-w-6 flex-auto",
+                    children: /* @__PURE__ */ jsx(ComboboxPrimitive.Input, {
+                      ref,
+                      size: Math.max(1, inputValue.length + 1),
+                      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
+                    })
+                  })
+                ]
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx(FieldControls, {
+            clearable,
+            compact,
+            iconSize: sizeClasses.icon
+          })
+        ]
+      }),
+      error && /* @__PURE__ */ jsx("span", {
+        className: "text-caption text-destructive pl-3",
+        children: error
+      })
+    ]
+  });
+});
+ComboboxChips2.displayName = "ComboboxChips";
+var ComboboxContent2 = forwardRef(({
+  className,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  from,
+  effect,
+  hideSource,
+  tier = "moderate"
+}, ref) => {
+  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;
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx(ComboboxPrimitive.Positioner, {
+      anchor: anchorRef,
+      side,
+      align,
+      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__ */ jsx(MorphSurface, {
+            morph,
+            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
+          })
+        })
+      })
+    })
+  });
+});
+ComboboxContent2.displayName = "ComboboxContent";
+var ComboboxList2 = forwardRef(({ className, children }, ref) => {
+  const { open, values, multiple, inputValue, createRow } = useComboboxContext();
+  const highlight = useContext(ComboboxHighlightContext);
+  const PlusIcon = useIcon("plus");
+  const shape = popupShape;
+  const containerRef = useRef(null);
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow });
+  const { activeIndex, setActiveIndex, itemRects, isMeasured, handlers, registerItem, remeasure } = hover;
+  const [checkedIndices, setCheckedIndices] = useState([]);
+  useEffect(() => {
+    if (!open)
+      return;
+    remeasure();
+  }, [open, remeasure]);
+  const reflowRef = useRef(false);
+  const prevQueryRef = useRef(inputValue);
+  const armedRectsRef = useRef(itemRects);
+  if (prevQueryRef.current !== inputValue) {
+    prevQueryRef.current = inputValue;
+    armedRectsRef.current = itemRects;
+    reflowRef.current = true;
+  }
+  const reflowSnap = reflowRef.current;
+  useEffect(() => {
+    if (reflowRef.current && itemRects !== armedRectsRef.current)
+      reflowRef.current = false;
+  });
+  useEffect(() => {
+    if (!open)
+      return;
+    let inner;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => {
+        const container = containerRef.current;
+        if (container) {
+          const rows = Array.from(container.querySelectorAll("[data-fluid-hover-index]"));
+          const next = [];
+          rows.forEach((el, i) => {
+            if (values.includes(el.getAttribute("data-value") ?? ""))
+              next.push(i);
+          });
+          setCheckedIndices(next);
+        }
+      });
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      cancelAnimationFrame(inner);
+    };
+  }, [open, values, inputValue]);
+  useEffect(() => {
+    if (!highlight)
+      setActiveIndex(null);
+    else if (highlight.keyboard)
+      setActiveIndex(highlight.index);
+  }, [highlight, setActiveIndex]);
+  useEffect(() => {
+    if (open)
+      return;
+    setCheckedIndices([]);
+    setActiveIndex(null);
+  }, [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 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))
+          })
+        ]
+      })
+    })
+  });
+});
+ComboboxList2.displayName = "ComboboxList";
+var ComboboxItem2 = forwardRef(({ className, children, icon: Icon, value, disabled = false, ...props }, ref) => {
+  const comboboxCtx = useComboboxContext();
+  const contentCtx = useContext(ComboboxContentContext);
+  const index = useContext(ComboboxItemIndexContext);
+  const internalRef = useRef(null);
+  const shape = popupShape;
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  const hasMounted = useRef(false);
+  useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  const registerItem = contentCtx?.registerItem;
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
+  const isActive = contentCtx?.activeIndex === index;
+  const isChecked = comboboxCtx.values.includes(value);
+  const skipAnimation = !hasMounted.current;
+  const item = comboboxCtx.itemsByValue.get(value) ?? value;
+  return /* @__PURE__ */ jsxs(ComboboxPrimitive.Item, {
+    value: item,
+    index,
+    disabled,
+    render: /* @__PURE__ */ jsx("div", {
+      ref: (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      "data-fluid-hover-index": index,
+      "data-value": value,
+      className: cn2(`relative z-10 flex ${sizeClasses.control} shrink-0 items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.itemPx} ${sizeClasses.text} cursor-pointer outline-none select-none`, "transition-[color] duration-fast", isActive || isChecked ? "text-foreground" : "text-muted-foreground", disabled && "opacity-50 pointer-events-none", className),
+      ...props
+    }),
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: isActive || isChecked ? 2 : 1.5,
+        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",
+        children
+      }),
+      /* @__PURE__ */ jsx("span", {
+        "aria-hidden": true,
+        className: cn2("shrink-0", compact ? "w-3.5 h-3.5" : "w-4 h-4"),
+        children: /* @__PURE__ */ jsx(AnimatePresence, {
+          children: isChecked && /* @__PURE__ */ jsx(motion.svg, {
+            width: sizeClasses.icon,
+            height: sizeClasses.icon,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "text-foreground",
+            initial: { opacity: 1 },
+            animate: { opacity: 1 },
+            exit: { opacity: 1 },
+            children: /* @__PURE__ */ jsx(motion.path, {
+              d: "M4 12L9 17L20 6",
+              initial: { pathLength: skipAnimation ? 1 : 0 },
+              animate: {
+                pathLength: 1,
+                transition: { duration: spring2.fast.duration, ease: "easeOut" }
+              },
+              exit: {
+                pathLength: 0,
+                transition: { duration: 0.04, ease: "easeIn" }
+              }
+            })
+          }, "check")
+        })
+      })
+    ]
+  });
+});
+ComboboxItem2.displayName = "ComboboxItem";
+var ComboboxEmpty2 = forwardRef(({ className, children, allSelected, ...props }, ref) => {
+  const sizeClasses = useSize2();
+  const ctx = useComboboxContext();
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Empty, {
+    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
+  });
+});
+ComboboxEmpty2.displayName = "ComboboxEmpty";
+Combobox2.Input = ComboboxInput2;
+Combobox2.Chips = ComboboxChips2;
+Combobox2.Content = ComboboxContent2;
+Combobox2.List = ComboboxList2;
+Combobox2.Item = ComboboxItem2;
+Combobox2.Empty = ComboboxEmpty2;
+var combobox_default = Combobox2;
+
+export { Combobox2, ComboboxInput2, ComboboxChips2, ComboboxContent2, ComboboxList2, ComboboxItem2, ComboboxEmpty2, combobox_default };