@multiplatform.one/forms 6.0.0

package/dist/jsx/fields/Combobox/index.mjs

@@ -0,0 +1,1716 @@
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
+import { CaretDownIcon, CheckIcon, MagnifyingGlassIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import { useClick, useDismiss, useInteractions, useListNavigation, useRole, FloatingFocusManager } from "@floating-ui/react";
+import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
+import { Chip } from "../../Chip/index.mjs";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { Input as InputParts } from "../../InputParts/index.mjs";
+import { Spinner } from "../../Spinner/index.mjs";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
+import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
+import { SyncFocusToOpen, ScrollArrow } from "../../shared/floatingList.mjs";
+import { FloatingPanel, useFloatingPanel, panelTransition, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.mjs";
+import { zIndex } from "../../shared/zIndex.mjs";
+import { useDragScroll } from "../../shared/useDragScroll.mjs";
+import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+const scrollArrowBuffer = 28;
+const ComboboxRow = styled(View, {
+  name: "ComboboxRow",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "$2",
+  paddingHorizontal: "$3",
+  cursor: "default",
+  outlineStyle: "none",
+  hoverStyle: {
+    backgroundColor: formInputColors.background.focus
+  },
+  focusStyle: {
+    outlineStyle: "none"
+  },
+  focusVisibleStyle: {
+    outlineStyle: "none"
+  },
+  variants: {
+    selected: {
+      true: {
+        backgroundColor: formInputColors.background.base
+      },
+      false: {
+        backgroundColor: "transparent"
+      }
+    },
+    size: {
+      "...size": val => ({
+        height: val
+      })
+    }
+  }
+});
+const GroupHeader = styled(Text, {
+  name: "ComboboxGroupHeader",
+  paddingHorizontal: "$3",
+  paddingVertical: "$2",
+  paddingTop: "$3",
+  fontWeight: "600",
+  fontSize: "$2",
+  opacity: 0.6,
+  numberOfLines: 1,
+  userSelect: "none",
+  cursor: "default"
+});
+function groupComboboxOptions(options) {
+  const hasGroups = options.some(o => o.group);
+  if (!hasGroups) {
+    return {
+      items: options.map((option, index) => ({
+        type: "option",
+        option,
+        flatIndex: index
+      })),
+      flatOptions: options
+    };
+  }
+  const ungrouped = options.filter(o => !o.group);
+  const grouped = options.filter(o => o.group);
+  const groups = /* @__PURE__ */new Map();
+  for (const option of grouped) {
+    const groupLabel = option.group;
+    if (!groups.has(groupLabel)) {
+      groups.set(groupLabel, []);
+    }
+    groups.get(groupLabel).push(option);
+  }
+  const items = [];
+  const flatOptions = [];
+  for (const option of ungrouped) {
+    items.push({
+      type: "option",
+      option,
+      flatIndex: flatOptions.length
+    });
+    flatOptions.push(option);
+  }
+  for (const [groupLabel, groupOptions] of groups) {
+    items.push({
+      type: "header",
+      label: groupLabel
+    });
+    for (const option of groupOptions) {
+      items.push({
+        type: "option",
+        option,
+        flatIndex: flatOptions.length
+      });
+      flatOptions.push(option);
+    }
+  }
+  return {
+    items,
+    flatOptions
+  };
+}
+const ComboboxItem = memo(function ComboboxItem2({
+  option,
+  index,
+  isSelected,
+  isActive,
+  suppressHover,
+  handlers
+}) {
+  const ctx = handlers.current;
+  const itemProps = ctx.getItemProps({
+    onClick(event) {
+      ctx.onSelect(option, index, event);
+    }
+  });
+  const defaultOnKeyDown = itemProps.onKeyDown;
+  return /* @__PURE__ */jsxs(ComboboxRow, {
+    ref: node => {
+      ctx.listItemsRef.current[index] = node;
+    },
+    ...itemProps,
+    "data-combobox-index": index,
+    "data-active": isActive,
+    onKeyDown: e => {
+      if (["j", "k"].includes(e.key)) {
+        ctx.onItemKeyDown?.(e, index);
+      } else {
+        defaultOnKeyDown?.(e);
+      }
+    },
+    ...(ctx.onItemHover ? {
+      onMouseEnter: ctx.onItemHover
+    } : {}),
+    role: "option",
+    tabIndex: -1,
+    selected: isSelected,
+    "aria-selected": isSelected,
+    "data-state": isSelected ? "active" : "inactive",
+    size: ctx.knobProps.sizeToken,
+    ...(suppressHover ? {
+      hoverStyle: {
+        backgroundColor: isActive ? formInputColors.background.focus : isSelected ? formInputColors.background.base : "transparent"
+      },
+      backgroundColor: isActive ? formInputColors.background.focus : isSelected ? formInputColors.background.base : void 0
+    } : {
+      hoverStyle: {
+        backgroundColor: isSelected ? formInputColors.background.base : formInputColors.background.focus
+      }
+    }),
+    ...(ctx.knobProps.transition ? {
+      animation: ctx.knobProps.transition
+    } : void 0),
+    children: [/* @__PURE__ */jsx(Text, {
+      fontFamily: ctx.knobProps.body.fontFamily,
+      fontWeight: ctx.knobProps.body.fontWeight,
+      color: ctx.textColor,
+      numberOfLines: 1,
+      flex: 1,
+      children: option.label
+    }), isSelected && /* @__PURE__ */jsx(CheckIcon, {
+      size: 14
+    })]
+  });
+});
+function FloatingComboboxCore({
+  options,
+  value,
+  onValueChange,
+  onBlur,
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
+  onSearch,
+  loading,
+  onLoadMore,
+  hasMore,
+  disabled,
+  id,
+  tabIndexOverride,
+  popoverWidth,
+  trigger: triggerRender,
+  knobProps,
+  multiple,
+  dismissible,
+  creatable,
+  onCreate,
+  createLabel = 'Create "{value}"',
+  hideSearch,
+  searchValue,
+  open: openProp,
+  onOpenChange
+}) {
+  const inTableCell = useIsInTableCell();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = openProp !== void 0 ? openProp : internalOpen;
+  const setOpen = useCallback(nextOpen => {
+    if (openProp !== void 0) {
+      onOpenChange?.(nextOpen);
+    } else {
+      setInternalOpen(nextOpen);
+    }
+  }, [openProp, onOpenChange]);
+  const [internalFilter, setInternalFilter] = useState("");
+  const filter = searchValue !== void 0 ? searchValue : internalFilter;
+  const [activeIndex, setActiveIndex] = useState(null);
+  const textColor = knobProps.textAccentColor;
+  const labelCacheRef = useRef(/* @__PURE__ */new Map());
+  for (const o of options) labelCacheRef.current.set(o.value, o.label);
+  const getLabel = useCallback(v => labelCacheRef.current.get(v) ?? v, []);
+  const selectedValues = useMemo(() => {
+    if (!multiple) return [];
+    const vals = Array.isArray(value) ? value : value ? [value] : [];
+    return [...vals].sort((a, b) => getLabel(a).localeCompare(getLabel(b)));
+  }, [multiple, value, getLabel]);
+  const selectedOption = useMemo(() => multiple ? void 0 : options.find(option => option.value === value), [options, value, multiple]);
+  const selectedOptions = useMemo(() => multiple ? options.filter(o => selectedValues.includes(o.value)) : [], [options, selectedValues, multiple]);
+  const isSelected = useCallback(optionValue => multiple ? selectedValues.includes(optionValue) : optionValue === value, [multiple, selectedValues, value]);
+  const handleDismiss = useCallback(valueToRemove => {
+    if (!multiple) return;
+    const current = Array.isArray(value) ? value : value ? [value] : [];
+    const next = current.filter(v => v !== valueToRemove);
+    onValueChange?.(next);
+  }, [multiple, value, onValueChange]);
+  const filtered = useMemo(() => {
+    if (onSearch || !filter) return options;
+    const query = filter.toLowerCase();
+    return options.filter(option => option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query));
+  }, [options, filter, onSearch]);
+  const showCreateOption = useMemo(() => {
+    if (!creatable || !filter.trim()) return false;
+    const trimmed = filter.trim().toLowerCase();
+    return !options.some(o => o.label.toLowerCase() === trimmed || o.value.toLowerCase() === trimmed);
+  }, [creatable, filter, options]);
+  const handleCreate = useCallback(() => {
+    if (!onCreate || !filter.trim()) return;
+    const newOption = onCreate(filter.trim());
+    if (newOption) {
+      if (multiple) {
+        const current = Array.isArray(value) ? value : value ? [value] : [];
+        onValueChange?.([...current, newOption.value]);
+      } else {
+        onValueChange?.(newOption.value);
+        setOpen(false);
+      }
+    }
+    setInternalFilter("");
+  }, [onCreate, filter, multiple, value, onValueChange]);
+  const initialOrderRef = useRef(null);
+  const hasSearchedRef = useRef(false);
+  const sortedFiltered = useMemo(() => {
+    if (filter.trim()) {
+      hasSearchedRef.current = true;
+      return filtered;
+    }
+    if (!multiple) return filtered;
+    if (!open) return filtered;
+    if (hasSearchedRef.current) return filtered;
+    if (initialOrderRef.current === null) {
+      const current = Array.isArray(value) ? value : value ? [value] : [];
+      const snap = new Set(current);
+      if (snap.size === 0) {
+        initialOrderRef.current = filtered;
+      } else {
+        const first = filtered.filter(o => snap.has(o.value)).sort((a, b) => a.label.localeCompare(b.label));
+        const rest = filtered.filter(o => !snap.has(o.value));
+        initialOrderRef.current = [...first, ...rest];
+      }
+    }
+    return initialOrderRef.current;
+  }, [filtered, filter, open, multiple, value]);
+  const {
+    items: groupedItems,
+    flatOptions: _flatOptions
+  } = useMemo(() => groupComboboxOptions(sortedFiltered), [sortedFiltered]);
+  const searchCleanupRef = useRef(null);
+  useEffect(() => {
+    if (!onSearch || !open) return;
+    const timerId = setTimeout(() => {
+      searchCleanupRef.current?.();
+      const cleanup = onSearch(filter);
+      searchCleanupRef.current = cleanup ?? null;
+    }, 200);
+    return () => {
+      clearTimeout(timerId);
+      searchCleanupRef.current?.();
+      searchCleanupRef.current = null;
+    };
+  }, [filter, onSearch, open]);
+  const listItemsRef = useRef([]);
+  const searchInputRef = useRef(null);
+  const listScrollRef = useRef(null);
+  const keyboardNavRef = useRef(false);
+  const lastMousePosRef = useRef(null);
+  const currentMousePosRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const lastKeyboardNavTimeRef = useRef(0);
+  const overlayStyle = useRef(null);
+  const searchTopRef = useRef(null);
+  const grownRef = useRef(false);
+  const lastScrollTopRef = useRef(0);
+  const growConstraintRef = useRef(null);
+  const filterRef = useRef(filter);
+  filterRef.current = filter;
+  const repositionRef = useRef(null);
+  const panel = useFloatingPanel({
+    open,
+    onOpenChange: nextOpen => {
+      setOpen(nextOpen);
+      if (!nextOpen) onBlur?.();
+    },
+    disabled,
+    repositionRef,
+    wheelGrowRef: grownRef,
+    scrollBoundaryRef: listScrollRef,
+    middleware: [],
+    useAutoUpdate: false,
+    onBeforeOpen: () => {
+      overlayStyle.current = null;
+      searchTopRef.current = null;
+      grownRef.current = false;
+      lastScrollTopRef.current = 0;
+    }
+  });
+  const {
+    scrollRef: dragScrollRef,
+    dragProps
+  } = useDragScroll({
+    direction: "vertical"
+  });
+  useEffect(() => {
+    if (listScrollRef.current) {
+      dragScrollRef.current = listScrollRef.current;
+    }
+  }, [open, dragScrollRef]);
+  const justResetFromFilterRef = useRef(false);
+  useEffect(() => {
+    if (open) {
+      justResetFromFilterRef.current = true;
+      setActiveIndex(0);
+      hasSelectedSinceOpenRef.current = false;
+    } else {
+      setInternalFilter("");
+      setActiveIndex(null);
+      lastMousePosRef.current = null;
+      initialOrderRef.current = null;
+      hasSearchedRef.current = false;
+    }
+  }, [open]);
+  const activeIndexRef = useRef(activeIndex);
+  activeIndexRef.current = activeIndex;
+  const sortedFilteredRef = useRef(sortedFiltered);
+  sortedFilteredRef.current = sortedFiltered;
+  const showCreateOptionRef = useRef(showCreateOption);
+  showCreateOptionRef.current = showCreateOption;
+  const multipleRef = useRef(multiple);
+  multipleRef.current = multiple;
+  const repositionOverlay = useCallback(source => {
+    const dropdownElement = panel.refs.floating.current;
+    const trigger = panel.triggerRef.current;
+    const listScrollElement = listScrollRef.current;
+    if (!dropdownElement || !trigger) return;
+    const suppressTransition = source === "init" || source === "filter";
+    if (suppressTransition) dropdownElement.style.transition = "none";
+    const triggerBounds = trigger.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    const minWidth = popoverWidth ?? triggerBounds.width + 8;
+    const maxWidth = viewportWidth - 20;
+    dropdownElement.style.minWidth = `${minWidth}px`;
+    dropdownElement.style.maxWidth = `${maxWidth}px`;
+    if (popoverWidth) dropdownElement.style.width = `${popoverWidth}px`;
+    const searchBarElement = dropdownElement.children[0];
+    const searchBarHeight = searchBarElement?.offsetHeight ?? 0;
+    const listContentHeight = listScrollElement?.scrollHeight ?? 0;
+    const computedStyle = getComputedStyle(dropdownElement);
+    const borderHeight = (parseFloat(computedStyle.borderTopWidth) || 0) + (parseFloat(computedStyle.borderBottomWidth) || 0);
+    const contentHeight = searchBarHeight + listContentHeight + borderHeight;
+    const isDropup = panel.placement.startsWith("top");
+    let top;
+    if (searchTopRef.current === null) {
+      if (isDropup) {
+        const availableAbove = triggerBounds.bottom - panelViewportPadding;
+        const initialHeight = Math.min(contentHeight, availableAbove);
+        top = triggerBounds.bottom - initialHeight;
+      } else {
+        top = triggerBounds.top;
+      }
+      searchTopRef.current = top;
+      const maxAvailable2 = isDropup ? triggerBounds.bottom - top : viewportHeight - top - panelViewportPadding;
+      let height2 = Math.min(contentHeight, maxAvailable2);
+      height2 = Math.max(120, height2);
+      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.left = `${triggerBounds.left}px`;
+      dropdownElement.style.height = `${height2}px`;
+      dropdownElement.style.maxHeight = "";
+      overlayStyle.current = {
+        top,
+        maxHeight: height2
+      };
+      if (listScrollRef.current) listScrollRef.current.scrollTop = 0;
+      void dropdownElement.offsetHeight;
+      if (suppressTransition) dropdownElement.style.transition = panelTransition;
+      requestAnimationFrame(() => {
+        if (listScrollRef.current) {
+          panel.updateArrows(listScrollRef.current);
+          requestAnimationFrame(() => {
+            if (listScrollRef.current) panel.updateArrows(listScrollRef.current);
+          });
+        }
+      });
+      return;
+    } else if (source === "wheel") {
+      top = searchTopRef.current;
+      const currentHeight = overlayStyle.current?.maxHeight ?? 0;
+      let grownHeight = currentHeight;
+      const constraint = growConstraintRef.current;
+      if (constraint !== "no-down") {
+        const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + currentHeight));
+        grownHeight += canGrowDown;
+      }
+      if (constraint !== "no-up") {
+        const canGrowUp = Math.max(0, top - panelViewportPadding);
+        top -= canGrowUp;
+        grownHeight += canGrowUp;
+      }
+      grownHeight = Math.min(grownHeight, contentHeight);
+      searchTopRef.current = top;
+      const maxAvailable2 = viewportHeight - top - panelViewportPadding;
+      let height2 = Math.min(grownHeight, maxAvailable2);
+      height2 = Math.max(120, height2);
+      const triggerTop = triggerBounds.top;
+      const triggerBottom = triggerBounds.bottom;
+      if (!isDropup) {
+        top = Math.min(top, triggerTop);
+      } else {
+        const panelBottom = top + height2;
+        if (panelBottom < triggerBottom) {
+          top = triggerBottom - height2;
+        }
+      }
+      searchTopRef.current = top;
+      const cached2 = overlayStyle.current;
+      if (!cached2 || cached2.top !== top || cached2.maxHeight !== height2) {
+        dropdownElement.style.top = `${top}px`;
+        dropdownElement.style.left = `${triggerBounds.left}px`;
+        dropdownElement.style.height = `${height2}px`;
+        dropdownElement.style.maxHeight = "";
+        overlayStyle.current = {
+          top,
+          maxHeight: height2
+        };
+      }
+      void dropdownElement.offsetHeight;
+      requestAnimationFrame(() => {
+        if (listScrollRef.current) {
+          panel.updateArrows(listScrollRef.current);
+        }
+      });
+      return;
+    } else {
+      top = searchTopRef.current;
+    }
+    const hasTyped = filterRef.current.length > 0;
+    const maxAvailable = !hasTyped && isDropup ? triggerBounds.bottom - top : viewportHeight - top - panelViewportPadding;
+    let height = Math.min(contentHeight, maxAvailable);
+    height = Math.max(120, height);
+    const cached = overlayStyle.current;
+    if (!cached || cached.top !== top || cached.maxHeight !== height) {
+      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.left = `${triggerBounds.left}px`;
+      dropdownElement.style.height = `${height}px`;
+      dropdownElement.style.maxHeight = "";
+      overlayStyle.current = {
+        top,
+        maxHeight: height
+      };
+    }
+    void dropdownElement.offsetHeight;
+    if (suppressTransition) dropdownElement.style.transition = panelTransition;
+    requestAnimationFrame(() => {
+      if (listScrollRef.current) {
+        panel.updateArrows(listScrollRef.current);
+        requestAnimationFrame(() => {
+          if (listScrollRef.current) panel.updateArrows(listScrollRef.current);
+        });
+      }
+    });
+  }, [panel.placement, panel.updateArrows, popoverWidth, panel.refs]);
+  repositionRef.current = () => repositionOverlay("wheel");
+  useLayoutEffect(() => {
+    if (!open || !panel.mounted) return;
+    grownRef.current = false;
+    repositionOverlay("filter");
+  }, [open, panel.mounted, filtered.length, loading, repositionOverlay]);
+  useEffect(() => {
+    if (open && panel.mounted && !hideSearch) {
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    }
+  }, [open, panel.mounted, hideSearch]);
+  const loadMoreTriggeredRef = useRef(false);
+  const repositionOverlayRef = useRef(repositionOverlay);
+  repositionOverlayRef.current = repositionOverlay;
+  const handleListScroll = useCallback(event => {
+    const element = event.target;
+    panel.updateArrows(element);
+    const arrowDir = panel.arrowScrollDirRef.current;
+    if (arrowDir) {
+      panel.arrowScrollDirRef.current = null;
+      lastScrollTopRef.current = element.scrollTop;
+      growConstraintRef.current = arrowDir === "down" ? "no-down" : "no-up";
+      repositionOverlayRef.current("wheel");
+      growConstraintRef.current = null;
+      return;
+    }
+    lastScrollTopRef.current = element.scrollTop;
+    if (onLoadMore && hasMore && !loading) {
+      const nearBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 100;
+      if (nearBottom && !loadMoreTriggeredRef.current) {
+        loadMoreTriggeredRef.current = true;
+        onLoadMore();
+      } else if (!nearBottom) {
+        loadMoreTriggeredRef.current = false;
+      }
+    }
+  }, [panel.updateArrows, onLoadMore, hasMore, loading]);
+  useEffect(() => {
+    if (!open) return;
+    const frame = requestAnimationFrame(() => {
+      const scrollElement = listScrollRef.current;
+      if (scrollElement) panel.updateArrows(scrollElement);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open, filtered, panel.updateArrows]);
+  useEffect(() => {
+    if (!open || typeof document === "undefined") return;
+    const onMove = e => {
+      const {
+        clientX: x,
+        clientY: y
+      } = e;
+      currentMousePosRef.current = {
+        x,
+        y
+      };
+      if (keyboardNavRef.current) return;
+      const floating = panel.refs.floating.current;
+      if (!floating) return;
+      const el = document.elementFromPoint(x, y);
+      if (!el || !floating.contains(el)) return;
+      const row = el.closest?.("[data-combobox-index]");
+      const actualIndex = row?.getAttribute("data-combobox-index");
+      const list = sortedFilteredRef.current;
+      const len = list.length + (showCreateOptionRef.current ? 1 : 0);
+      const activeIdx = activeIndexRef.current;
+      const n = actualIndex != null ? Number(actualIndex) : null;
+      const next = n != null && n >= 0 && n < len ? n : activeIdx;
+      if (next !== activeIdx) {
+        setActiveIndex(next);
+      }
+    };
+    document.addEventListener("mousemove", onMove, {
+      passive: true
+    });
+    return () => document.removeEventListener("mousemove", onMove);
+  }, [open, panel.refs]);
+  useLayoutEffect(() => {
+    keyboardNavRef.current = false;
+    const len = sortedFiltered.length + (showCreateOption ? 1 : 0);
+    listItemsRef.current.length = len;
+    justResetFromFilterRef.current = true;
+    const rawPos = currentMousePosRef.current ?? lastMousePosRef.current;
+    const pos = rawPos && (rawPos.x > 0 || rawPos.y > 0) ? rawPos : null;
+    if (pos && typeof document !== "undefined") {
+      const el = document.elementFromPoint(pos.x, pos.y);
+      const row = el?.closest?.("[data-combobox-index]");
+      const idx = row?.getAttribute("data-combobox-index");
+      if (idx != null) {
+        const n = Number(idx);
+        if (n >= 0 && n < len) setActiveIndex(n);else setActiveIndex(null);
+      } else {
+        setActiveIndex(null);
+      }
+    } else {
+      setActiveIndex(0);
+    }
+  }, [filter, sortedFiltered.length, showCreateOption]);
+  const click = useClick(panel.context, {
+    event: "mousedown",
+    keyboardHandlers: false
+  });
+  const dismiss = useDismiss(panel.context);
+  const role = useRole(panel.context, {
+    role: "listbox"
+  });
+  const listNav = useListNavigation(panel.context, {
+    listRef: listItemsRef,
+    activeIndex,
+    onNavigate: index => {
+      if (index !== null) {
+        keyboardNavRef.current = true;
+        lastKeyboardNavTimeRef.current = Date.now();
+        lastMousePosRef.current = {
+          ...currentMousePosRef.current
+        };
+        setActiveIndex(index);
+      }
+    },
+    virtual: true,
+    loop: true,
+    scrollItemIntoView: false,
+    focusItemOnHover: false
+    // We use elementFromPoint in mousemove handlers - floating-ui's indexOf can be stale after filter
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  } = useInteractions([click, dismiss, role, listNav]);
+  const lastSelectedIndexRef = useRef(null);
+  const hasSelectedSinceOpenRef = useRef(false);
+  const handleSelect = useCallback((option, index, event) => {
+    hasSelectedSinceOpenRef.current = true;
+    if (multiple) {
+      const current = Array.isArray(value) ? value : value ? [value] : [];
+      if (event?.shiftKey && lastSelectedIndexRef.current != null) {
+        const from = Math.min(lastSelectedIndexRef.current, index);
+        const to = Math.max(lastSelectedIndexRef.current, index);
+        const rangeValues = sortedFiltered.slice(from, to + 1).map(o => o.value);
+        const merged = /* @__PURE__ */new Set([...current, ...rangeValues]);
+        onValueChange?.([...merged]);
+      } else {
+        const next = current.includes(option.value) ? current.filter(v => v !== option.value) : [...current, option.value];
+        onValueChange?.(next);
+        lastSelectedIndexRef.current = index;
+      }
+    } else {
+      onValueChange?.(option.value);
+      setOpen(false);
+    }
+  }, [onValueChange, multiple, value, sortedFiltered]);
+  const handleListMouseMove = useCallback(e => {
+    const {
+      clientX,
+      clientY
+    } = e;
+    currentMousePosRef.current = {
+      x: clientX,
+      y: clientY
+    };
+    if (!keyboardNavRef.current && typeof document !== "undefined") {
+      const el = document.elementFromPoint(clientX, clientY);
+      const row = el?.closest?.("[data-combobox-index]");
+      const actualIndex = row?.getAttribute("data-combobox-index");
+      const list = sortedFilteredRef.current;
+      const len = list.length + (showCreateOptionRef.current ? 1 : 0);
+      const activeIdx = activeIndexRef.current;
+      const n = actualIndex != null ? Number(actualIndex) : null;
+      const next = n != null && n >= 0 && n < len ? n : activeIdx;
+      if (next !== activeIdx) setActiveIndex(next);
+    }
+    const last = lastMousePosRef.current;
+    const posChanged = last != null && (clientX !== last.x || clientY !== last.y);
+    if (!posChanged) return;
+    const now = Date.now();
+    if (now - lastKeyboardNavTimeRef.current < 200) return;
+    lastMousePosRef.current = {
+      x: clientX,
+      y: clientY
+    };
+    keyboardNavRef.current = false;
+  }, []);
+  const handlersRef = useRef({});
+  const handleSelectRef = useRef(handleSelect);
+  handleSelectRef.current = handleSelect;
+  useEffect(() => {
+    if (!open || typeof document === "undefined") return;
+    const onKeyDown = e => {
+      const floatingEl = panel.refs.floating.current;
+      const triggerEl = panel.triggerRef.current;
+      const target = e.target;
+      const inPanel = target && (floatingEl?.contains(target) || triggerEl?.contains(target));
+      if (!inPanel) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(false);
+      } else if (e.key === "Enter" || e.key === " ") {
+        const target2 = e.target;
+        if (e.key === " " && target2?.tagName === "INPUT" && target2.type !== "checkbox") return;
+        e.preventDefault();
+        e.stopPropagation();
+        const idx = activeIndexRef.current;
+        const list = sortedFilteredRef.current;
+        const createIdx = showCreateOptionRef.current ? list.length : -1;
+        if (idx === createIdx && showCreateOptionRef.current) {
+          handleCreate();
+        } else if (e.key === "Enter" && multipleRef.current && hasSelectedSinceOpenRef.current) {
+          setOpen(false);
+        } else if (idx != null && list[idx]) {
+          handleSelectRef.current(list[idx], idx);
+          if (e.key === "Enter" || !multipleRef.current) setOpen(false);
+        } else {
+          setOpen(false);
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, {
+      capture: true
+    });
+    return () => document.removeEventListener("keydown", onKeyDown, {
+      capture: true
+    });
+  }, [open, showCreateOption, handleCreate, setOpen]);
+  const referenceProps = getReferenceProps({
+    ref: panel.setReferenceRef,
+    onKeyDown(event) {
+      if (event.key === "Enter" || event.code === "Space" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "j" || event.key === "k") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex(0);
+      }
+    }
+  });
+  const boxEventProps = {};
+  for (const [key, val] of Object.entries(referenceProps)) {
+    if (key === "ref" || typeof val === "function") boxEventProps[key] = val;
+    if (key.startsWith("aria-") || key === "role" || key === "tabIndex") boxEventProps[key] = val;
+  }
+  boxEventProps.tabIndex = disabled ? -1 : tabIndexOverride ?? 0;
+  boxEventProps.role = "combobox";
+  boxEventProps["aria-haspopup"] = "listbox";
+  boxEventProps["aria-expanded"] = open;
+  const totalNavigableItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
+  const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  const handleItemKeyDown = useCallback((e, _index) => {
+    const isDown = e.key === "j";
+    const isUp = e.key === "k";
+    if (isDown || isUp) {
+      e.preventDefault();
+      e.stopPropagation();
+      keyboardNavRef.current = true;
+      lastKeyboardNavTimeRef.current = Date.now();
+      lastMousePosRef.current = {
+        ...currentMousePosRef.current
+      };
+      setActiveIndex(prev => {
+        const next = isDown ? prev == null ? 0 : prev + 1 : prev == null ? totalNavigableItems - 1 : prev - 1;
+        return isDown ? next >= totalNavigableItems ? 0 : next : next < 0 ? totalNavigableItems - 1 : next;
+      });
+    }
+  }, [totalNavigableItems]);
+  handlersRef.current = {
+    getItemProps,
+    onSelect: handleSelect,
+    onItemHover: void 0,
+    onItemKeyDown: handleItemKeyDown,
+    knobProps,
+    textColor,
+    listItemsRef
+  };
+  const handleSearchKeyDown = useCallback(event => {
+    const isDown = event.key === "ArrowDown" || event.key === "j";
+    const isUp = event.key === "ArrowUp" || event.key === "k";
+    if (isDown) {
+      event.preventDefault();
+      keyboardNavRef.current = true;
+      lastKeyboardNavTimeRef.current = Date.now();
+      lastMousePosRef.current = {
+        ...currentMousePosRef.current
+      };
+      setActiveIndex(prev => {
+        const next = prev == null ? 0 : prev + 1;
+        return next >= totalNavigableItems ? 0 : next;
+      });
+    } else if (isUp) {
+      event.preventDefault();
+      keyboardNavRef.current = true;
+      lastKeyboardNavTimeRef.current = Date.now();
+      lastMousePosRef.current = {
+        ...currentMousePosRef.current
+      };
+      setActiveIndex(prev => {
+        const next = prev == null ? totalNavigableItems - 1 : prev - 1;
+        return next < 0 ? totalNavigableItems - 1 : next;
+      });
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (activeIndex === createOptionIndex && showCreateOption) {
+        handleCreate();
+      } else if (event.key === "Enter" && multiple && hasSelectedSinceOpenRef.current) {
+        setOpen(false);
+      } else if (activeIndex != null && sortedFiltered[activeIndex]) {
+        handleSelect(sortedFiltered[activeIndex], activeIndex);
+        if (event.key === "Enter" || !multiple) setOpen(false);
+      } else {
+        setOpen(false);
+      }
+    } else if (event.key === "Escape") {
+      setOpen(false);
+    }
+  }, [sortedFiltered, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple]);
+  useEffect(() => {
+    if (activeIndex == null) return;
+    const scrollContainer = listScrollRef.current;
+    if (!scrollContainer) return;
+    const rafId = requestAnimationFrame(() => {
+      const item = listItemsRef.current[activeIndex];
+      const container = listScrollRef.current;
+      if (!item || !container) return;
+      const containerRect = container.getBoundingClientRect();
+      const itemRect = item.getBoundingClientRect();
+      const bottomEdge = containerRect.bottom - scrollArrowBuffer;
+      const topEdge = containerRect.top + scrollArrowBuffer;
+      let didScroll = false;
+      let scrollDir = null;
+      if (itemRect.bottom > bottomEdge) {
+        scrollDir = "down";
+        container.scrollTop += itemRect.bottom - bottomEdge;
+        didScroll = true;
+      } else if (itemRect.top < topEdge) {
+        scrollDir = "up";
+        container.scrollTop -= topEdge - itemRect.top;
+        didScroll = true;
+      }
+      if (didScroll && scrollDir && !justResetFromFilterRef.current) {
+        lastScrollTopRef.current = container.scrollTop;
+        growConstraintRef.current = scrollDir === "down" ? "no-down" : "no-up";
+        repositionOverlayRef.current("wheel");
+        growConstraintRef.current = null;
+      }
+      justResetFromFilterRef.current = false;
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [activeIndex, multiple ? value : void 0]);
+  const triggerContent = triggerRender ? /* @__PURE__ */jsx(View, {
+    ...boxEventProps,
+    "data-testid": "combobox-trigger",
+    children: triggerRender(multiple ? selectedOptions : selectedOption, open)
+  }) : /* @__PURE__ */jsxs(InputParts.Box, {
+    ...boxEventProps,
+    "data-testid": "combobox-trigger",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    disabled,
+    size: knobProps.sizeToken,
+    ...(inTableCell ? {} : {
+      borderRadius: knobProps.borderRadius.borderRadius,
+      borderWidth: knobProps.borderRadius.borderWidth
+    }),
+    children: [/* @__PURE__ */jsx(SyncFocusToOpen, {
+      open
+    }), /* @__PURE__ */jsx(View, {
+      flex: 1,
+      paddingHorizontal: "$3",
+      paddingVertical: "$2",
+      id,
+      justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+      alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+      children: multiple && selectedValues.length > 0 ? /* @__PURE__ */jsx(View, {
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        gap: "$1.5",
+        alignItems: "center",
+        maxHeight: getFieldHeight(knobProps.sizeToken) * 0.75,
+        overflow: "hidden",
+        overflowX: "auto",
+        children: selectedValues.map(v => /* @__PURE__ */jsx(Chip, {
+          size: {
+            $3: "$2",
+            $4: "$3",
+            $5: "$4"
+          }[knobProps.sizeToken] ?? "$3",
+          color: "gray",
+          onDismiss: dismissible && !disabled ? () => handleDismiss(v) : void 0,
+          children: getLabel(v)
+        }, v))
+      }) : /* @__PURE__ */jsx(Text, {
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        color: selectedOption ? textColor : formCommonColors.muted,
+        numberOfLines: 1,
+        userSelect: "none",
+        children: selectedOption?.label ?? placeholder
+      })
+    }), /* @__PURE__ */jsx(View, {
+      paddingRight: "$2",
+      alignSelf: "center",
+      children: /* @__PURE__ */jsx(CaretDownIcon, {
+        size: 16
+      })
+    })]
+  });
+  return /* @__PURE__ */jsxs(Fragment2, {
+    children: [triggerContent, panel.mounted && /* @__PURE__ */jsx(FloatingFocusManager, {
+      context: panel.context,
+      modal: false,
+      initialFocus: -1,
+      children: /* @__PURE__ */jsxs(YStack, {
+        outlineWidth: 0,
+        pointerEvents: panel.visible ? "auto" : "none",
+        ...getFloatingProps({
+          ref: panel.refs.setFloating
+        }),
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          zIndex: zIndex.dropdown,
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
+          opacity: panel.visible ? 1 : 0,
+          transform: panel.visible ? "scale(1)" : "scale(0.96)",
+          transition: panelTransition,
+          transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+          boxSizing: "border-box"
+        },
+        backgroundColor: "$background",
+        borderRadius: panel.dropdownRadius,
+        borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
+        borderColor: panel.hasBorder ? formInputColors.border.focus : "transparent",
+        "data-testid": "combobox-dropdown",
+        children: [!hideSearch && /* @__PURE__ */jsx(InputParts, {
+          size: knobProps.sizeToken,
+          children: /* @__PURE__ */jsxs(InputParts.Box, {
+            borderWidth: 0,
+            borderBottomWidth: 1,
+            borderBottomColor: formCommonColors.divider,
+            borderRadius: 0,
+            elevation: void 0,
+            children: [/* @__PURE__ */jsx(InputParts.Section, {
+              children: /* @__PURE__ */jsx(InputParts.Icon, {
+                adornment: "leading",
+                children: /* @__PURE__ */jsx(MagnifyingGlassIcon, {})
+              })
+            }), /* @__PURE__ */jsx(InputParts.Section, {
+              children: /* @__PURE__ */jsx(InputParts.Area, {
+                ref: searchInputRef,
+                defaultValue: "",
+                onChangeText: text => setInternalFilter(text),
+                placeholder: searchPlaceholder,
+                onKeyDown: handleSearchKeyDown
+              })
+            }), loading ? /* @__PURE__ */jsx(InputParts.Section, {
+              children: /* @__PURE__ */jsx(InputParts.Icon, {
+                adornment: "trailing",
+                children: /* @__PURE__ */jsx(Spinner, {
+                  size: "small"
+                })
+              })
+            }) : filter ? /* @__PURE__ */jsx(InputParts.Section, {
+              children: /* @__PURE__ */jsx(InputParts.Button, {
+                onPress: () => setInternalFilter(""),
+                children: /* @__PURE__ */jsx(InputParts.Icon, {
+                  children: /* @__PURE__ */jsx(XIcon, {})
+                })
+              })
+            }) : null]
+          })
+        }), /* @__PURE__ */jsxs(YStack, {
+          ref: listScrollRef,
+          overflow: "scroll",
+          flex: 1,
+          minHeight: 0,
+          onScroll: handleListScroll,
+          onMouseMove: handleListMouseMove,
+          onPointerDown: dragProps.onPointerDown,
+          style: dragProps.style,
+          children: [/* @__PURE__ */jsx(ScrollArrow, {
+            direction: "up",
+            scrollRef: listScrollRef,
+            visible: panel.arrowUp,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          }), sortedFiltered.length > 0 ? /* @__PURE__ */jsxs(Fragment, {
+            children: [multiple ? sortedFiltered.map((option, index) => /* @__PURE__ */jsx(ComboboxItem, {
+              option,
+              index,
+              isSelected: isSelected(option.value),
+              isActive: index === activeIndex,
+              suppressHover: activeIndex != null,
+              handlers: handlersRef
+            }, option.value)) : groupedItems.map((item, _i) => item.type === "header" ? /* @__PURE__ */jsx(GroupHeader, {
+              color: textColor,
+              children: item.label
+            }, `header-${item.label}`) : /* @__PURE__ */jsx(ComboboxItem, {
+              option: item.option,
+              index: item.flatIndex,
+              isSelected: isSelected(item.option.value),
+              isActive: item.flatIndex === activeIndex,
+              suppressHover: activeIndex != null,
+              handlers: handlersRef
+            }, item.option.value)), showCreateOption && /* @__PURE__ */jsxs(ComboboxRow, {
+              role: "option",
+              tabIndex: -1,
+              selected: false,
+              size: knobProps.sizeToken,
+              "data-combobox-index": createOptionIndex,
+              "data-active": createOptionIndex === activeIndex,
+              backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : void 0,
+              hoverStyle: activeIndex != null ? {
+                backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
+              } : void 0,
+              onPress: handleCreate,
+              ...(knobProps.transition ? {
+                animation: knobProps.transition
+              } : void 0),
+              children: [/* @__PURE__ */jsx(PlusIcon, {
+                size: 14,
+                color: knobProps.textAccentColor
+              }), /* @__PURE__ */jsx(Text, {
+                fontFamily: knobProps.body.fontFamily,
+                fontWeight: knobProps.body.fontWeight,
+                color: textColor,
+                numberOfLines: 1,
+                flex: 1,
+                children: createLabel.replace("{value}", filter.trim())
+              })]
+            })]
+          }, filter) : showCreateOption ? /* @__PURE__ */jsxs(View, {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "$2",
+            paddingHorizontal: "$3",
+            height: knobProps.sizeToken,
+            "data-combobox-index": createOptionIndex,
+            "data-active": createOptionIndex === activeIndex,
+            onPress: handleCreate,
+            hoverStyle: activeIndex != null ? {
+              backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
+            } : {
+              backgroundColor: formInputColors.background.focus
+            },
+            backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent",
+            pressStyle: {
+              backgroundColor: formInputColors.background.focus
+            },
+            ...(knobProps.transition ? {
+              animation: knobProps.transition
+            } : void 0),
+            children: [/* @__PURE__ */jsx(PlusIcon, {
+              size: 14,
+              color: knobProps.textAccentColor
+            }), /* @__PURE__ */jsx(Text, {
+              fontFamily: knobProps.body.fontFamily,
+              fontWeight: knobProps.body.fontWeight,
+              color: textColor,
+              numberOfLines: 1,
+              flex: 1,
+              children: createLabel.replace("{value}", filter.trim())
+            })]
+          }) : /* @__PURE__ */jsx(View, {
+            ...knobProps.panelPadding,
+            alignItems: "center",
+            children: /* @__PURE__ */jsx(Text, {
+              color: formCommonColors.muted,
+              fontSize: knobProps.sizeToken,
+              fontFamily: knobProps.body.fontFamily,
+              fontWeight: knobProps.body.fontWeight,
+              children: emptyMessage
+            })
+          }), hasMore && loading && /* @__PURE__ */jsx(View, {
+            padding: "$2",
+            alignItems: "center",
+            children: /* @__PURE__ */jsx(Spinner, {
+              size: "small"
+            })
+          }), /* @__PURE__ */jsx(ScrollArrow, {
+            direction: "down",
+            scrollRef: listScrollRef,
+            visible: panel.arrowDown,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          })]
+        })]
+      })
+    })]
+  });
+}
+const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, textColor, mutedColor, loading, onKeyDown) => /* @__PURE__ */jsxs(XStack, {
+  alignItems: "center",
+  gap: "$2",
+  paddingHorizontal: "$3",
+  height: knobProps.sizeToken,
+  borderBottomWidth: 1,
+  borderBottomColor: formCommonColors.divider,
+  children: [/* @__PURE__ */jsx(MagnifyingGlassIcon, {
+    size: 16,
+    color: mutedColor
+  }), /* @__PURE__ */jsx(TInput, {
+    unstyled: true,
+    flex: 1,
+    placeholder: searchPlaceholder,
+    value: filter,
+    onChangeText: setFilter,
+    onKeyDown,
+    fontFamily: knobProps.body.fontFamily,
+    fontWeight: knobProps.body.fontWeight,
+    color: textColor,
+    placeholderTextColor: mutedColor,
+    autoFocus: true
+  }), loading ? /* @__PURE__ */jsx(Spinner, {
+    size: "small"
+  }) : filter ? /* @__PURE__ */jsx(View, {
+    onPress: () => setFilter(""),
+    opacity: 0.6,
+    children: /* @__PURE__ */jsx(XIcon, {
+      size: 16
+    })
+  }) : null]
+});
+function NativeComboboxCore({
+  options,
+  value,
+  onValueChange,
+  onBlur,
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
+  onSearch,
+  loading,
+  onLoadMore,
+  hasMore,
+  disabled,
+  id,
+  trigger: triggerRender,
+  knobProps,
+  multiple,
+  dismissible,
+  creatable,
+  onCreate,
+  createLabel = 'Create "{value}"',
+  hideSearch,
+  searchValue,
+  open: openProp,
+  onOpenChange
+}) {
+  const inTableCell = useIsInTableCell();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = openProp !== void 0 ? openProp : internalOpen;
+  const setOpen = useCallback(nextOpen => {
+    if (openProp !== void 0) {
+      onOpenChange?.(nextOpen);
+    } else {
+      setInternalOpen(nextOpen);
+    }
+  }, [openProp, onOpenChange]);
+  const [internalFilter, setInternalFilter] = useState("");
+  const filter = searchValue !== void 0 ? searchValue : internalFilter;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef(null);
+  const textColor = knobProps.textAccentColor;
+  const theme = useTheme();
+  const mutedColor = theme.color7?.val ?? "$color7";
+  const labelCacheRef = useRef(/* @__PURE__ */new Map());
+  for (const o of options) labelCacheRef.current.set(o.value, o.label);
+  const getLabel = useCallback(v => labelCacheRef.current.get(v) ?? v, []);
+  const selectedValues = useMemo(() => {
+    if (!multiple) return [];
+    const vals = Array.isArray(value) ? value : value ? [value] : [];
+    return [...vals].sort((a, b) => getLabel(a).localeCompare(getLabel(b)));
+  }, [multiple, value, options]);
+  const selectedOption = useMemo(() => multiple ? void 0 : options.find(o => o.value === value), [options, value, multiple]);
+  const selectedOptions = useMemo(() => multiple ? options.filter(o => selectedValues.includes(o.value)) : [], [options, selectedValues, multiple]);
+  const isSelectedFn = useCallback(optionValue => multiple ? selectedValues.includes(optionValue) : optionValue === value, [multiple, selectedValues, value]);
+  const handleDismiss = useCallback(valueToRemove => {
+    if (!multiple) return;
+    const current = Array.isArray(value) ? value : value ? [value] : [];
+    const next = current.filter(v => v !== valueToRemove);
+    onValueChange?.(next);
+  }, [multiple, value, onValueChange]);
+  const filtered = useMemo(() => {
+    if (onSearch || !filter) return options;
+    const query = filter.toLowerCase();
+    return options.filter(option => option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query));
+  }, [options, filter, onSearch]);
+  const showCreateOption = useMemo(() => {
+    if (!creatable || !filter.trim()) return false;
+    const trimmed = filter.trim().toLowerCase();
+    return !options.some(o => o.label.toLowerCase() === trimmed || o.value.toLowerCase() === trimmed);
+  }, [creatable, filter, options]);
+  const handleCreate = useCallback(() => {
+    if (!onCreate || !filter.trim()) return;
+    const newOption = onCreate(filter.trim());
+    if (newOption) {
+      if (multiple) {
+        const current = Array.isArray(value) ? value : value ? [value] : [];
+        onValueChange?.([...current, newOption.value]);
+      } else {
+        onValueChange?.(newOption.value);
+        setOpen(false);
+      }
+    }
+    setInternalFilter("");
+  }, [onCreate, filter, multiple, value, onValueChange]);
+  const hasScrollableContent = filtered.length > 6;
+  const sheetTransition = knobProps.transition ?? "medium";
+  const sortedFiltered = useMemo(() => {
+    if (filter.trim()) return filtered;
+    const current = Array.isArray(value) ? value : value ? [value] : [];
+    if (current.length === 0) return filtered;
+    const first = filtered.filter(o => current.includes(o.value)).sort((a, b) => getLabel(a.value).localeCompare(getLabel(b.value)));
+    const rest = filtered.filter(o => !current.includes(o.value));
+    return [...first, ...rest];
+  }, [filtered, value, filter, getLabel]);
+  const searchCleanupRef = useRef(null);
+  useEffect(() => {
+    if (!onSearch || !open) return;
+    const timerId = setTimeout(() => {
+      searchCleanupRef.current?.();
+      const cleanup = onSearch(filter);
+      searchCleanupRef.current = cleanup ?? null;
+    }, 200);
+    return () => {
+      clearTimeout(timerId);
+      searchCleanupRef.current?.();
+      searchCleanupRef.current = null;
+    };
+  }, [filter, onSearch, open]);
+  useEffect(() => {
+    if (open) {
+      setActiveIndex(0);
+      requestAnimationFrame(() => listRef.current?.focus());
+    } else {
+      setInternalFilter("");
+    }
+  }, [open]);
+  const totalItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
+  const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  const handleSelect = useCallback(option => {
+    if (multiple) {
+      const current = Array.isArray(value) ? value : value ? [value] : [];
+      const next = current.includes(option.value) ? current.filter(v => v !== option.value) : [...current, option.value];
+      onValueChange?.(next);
+    } else {
+      onValueChange?.(option.value);
+      setOpen(false);
+    }
+  }, [onValueChange, multiple, value]);
+  const handleSearchKeyDown = useCallback(e => {
+    const isDown = e.key === "ArrowDown" || e.key === "j";
+    const isUp = e.key === "ArrowUp" || e.key === "k";
+    if (isDown) {
+      e.preventDefault();
+      listRef.current?.focus();
+      setActiveIndex(prev => {
+        const next = prev == null ? 0 : prev + 1;
+        return next >= totalItems ? 0 : next;
+      });
+    } else if (isUp) {
+      e.preventDefault();
+      listRef.current?.focus();
+      setActiveIndex(prev => {
+        const next = prev == null ? totalItems - 1 : prev - 1;
+        return next < 0 ? totalItems - 1 : next;
+      });
+    }
+  }, [totalItems]);
+  const handleListKeyDown = useCallback(e => {
+    if (totalItems === 0) return;
+    const isDown = e.key === "ArrowDown" || e.key === "j";
+    const isUp = e.key === "ArrowUp" || e.key === "k";
+    if (isDown) {
+      e.preventDefault();
+      setActiveIndex(prev => {
+        const next = prev == null ? 0 : prev + 1;
+        return next >= totalItems ? 0 : next;
+      });
+    } else if (isUp) {
+      e.preventDefault();
+      setActiveIndex(prev => {
+        const next = prev == null ? totalItems - 1 : prev - 1;
+        return next < 0 ? totalItems - 1 : next;
+      });
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (activeIndex === createOptionIndex && showCreateOption) {
+        handleCreate();
+      } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
+        handleSelect(sortedFiltered[activeIndex]);
+        if (e.key === "Enter" || !multiple) setOpen(false);
+      }
+    }
+  }, [totalItems, createOptionIndex, showCreateOption, activeIndex, sortedFiltered, handleCreate, handleSelect, multiple]);
+  useEffect(() => {
+    if (!open || typeof document === "undefined") return;
+    const onKeyDown = e => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+      } else if (e.key === "Enter" || e.key === " ") {
+        const target = e.target;
+        if (e.key === " " && target?.tagName === "INPUT" && target.type !== "checkbox") return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (activeIndex === createOptionIndex && showCreateOption) {
+          handleCreate();
+        } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
+          handleSelect(sortedFiltered[activeIndex]);
+          if (e.key === "Enter" || !multiple) setOpen(false);
+        } else {
+          setOpen(false);
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, {
+      capture: true
+    });
+    return () => document.removeEventListener("keydown", onKeyDown, {
+      capture: true
+    });
+  }, [open, activeIndex, createOptionIndex, showCreateOption, sortedFiltered, handleCreate, handleSelect, multiple]);
+  const handleOpenChange = useCallback(val => {
+    setOpen(val);
+    if (!val) onBlur?.();
+  }, [onBlur]);
+  const searchHeader = hideSearch ? void 0 : comboboxSearchHeader(knobProps, filter, setInternalFilter, searchPlaceholder, textColor, mutedColor, loading ?? false, handleSearchKeyDown);
+  const listContent = /* @__PURE__ */jsxs(View, {
+    ref: listRef,
+    tabIndex: 0,
+    onKeyDown: handleListKeyDown,
+    outlineStyle: "none",
+    flex: 1,
+    children: [sortedFiltered.length > 0 ? /* @__PURE__ */jsxs(Fragment2, {
+      children: [sortedFiltered.map((option, i) => {
+        const selected = isSelectedFn(option.value);
+        const active = i === activeIndex;
+        const prevGroup = i > 0 ? sortedFiltered[i - 1].group : void 0;
+        const showGroupHeader = option.group && option.group !== prevGroup;
+        return /* @__PURE__ */jsxs(View, {
+          children: [showGroupHeader && /* @__PURE__ */jsx(GroupHeader, {
+            color: textColor,
+            children: option.group
+          }), /* @__PURE__ */jsxs(View, {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "$2",
+            paddingHorizontal: "$3",
+            height: knobProps.sizeToken,
+            onPress: () => handleSelect(option),
+            onMouseEnter: () => setActiveIndex(i),
+            hoverStyle: activeIndex != null ? {
+              backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent"
+            } : {
+              backgroundColor: selected ? formInputColors.background.base : formInputColors.background.focus
+            },
+            backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent",
+            pressStyle: {
+              backgroundColor: formInputColors.background.focus
+            },
+            children: [/* @__PURE__ */jsx(Text, {
+              fontFamily: knobProps.body.fontFamily,
+              fontWeight: knobProps.body.fontWeight,
+              color: textColor,
+              numberOfLines: 1,
+              flex: 1,
+              children: option.label
+            }), selected && /* @__PURE__ */jsx(CheckIcon, {
+              size: 14
+            })]
+          })]
+        }, option.value);
+      }), showCreateOption && /* @__PURE__ */jsxs(View, {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: "$2",
+        paddingHorizontal: "$3",
+        height: knobProps.sizeToken,
+        onPress: handleCreate,
+        onMouseEnter: () => setActiveIndex(createOptionIndex),
+        hoverStyle: activeIndex != null ? {
+          backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
+        } : {
+          backgroundColor: formInputColors.background.focus
+        },
+        backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent",
+        pressStyle: {
+          backgroundColor: formInputColors.background.focus
+        },
+        children: [/* @__PURE__ */jsx(PlusIcon, {
+          size: 14,
+          color: textColor
+        }), /* @__PURE__ */jsx(Text, {
+          fontFamily: knobProps.body.fontFamily,
+          fontWeight: knobProps.body.fontWeight,
+          color: textColor,
+          numberOfLines: 1,
+          flex: 1,
+          children: createLabel.replace("{value}", filter.trim())
+        })]
+      })]
+    }) : showCreateOption ? /* @__PURE__ */jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: "$2",
+      paddingHorizontal: "$3",
+      height: knobProps.sizeToken,
+      onPress: handleCreate,
+      onMouseEnter: () => setActiveIndex(createOptionIndex),
+      hoverStyle: activeIndex != null ? {
+        backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
+      } : {
+        backgroundColor: formInputColors.background.focus
+      },
+      backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent",
+      pressStyle: {
+        backgroundColor: formInputColors.background.focus
+      },
+      children: [/* @__PURE__ */jsx(PlusIcon, {
+        size: 14,
+        color: textColor
+      }), /* @__PURE__ */jsx(Text, {
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        color: textColor,
+        numberOfLines: 1,
+        flex: 1,
+        children: createLabel.replace("{value}", filter.trim())
+      })]
+    }) : /* @__PURE__ */jsx(View, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      children: /* @__PURE__ */jsx(Text, {
+        color: formCommonColors.muted,
+        fontSize: knobProps.sizeToken,
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        children: emptyMessage
+      })
+    }), hasMore && loading && /* @__PURE__ */jsx(View, {
+      padding: "$2",
+      alignItems: "center",
+      children: /* @__PURE__ */jsx(Spinner, {
+        size: "small"
+      })
+    })]
+  });
+  const triggerContent = triggerRender ? /* @__PURE__ */jsx(View, {
+    "data-testid": "combobox-trigger",
+    children: triggerRender(multiple ? selectedOptions : selectedOption, open)
+  }) : /* @__PURE__ */jsxs(InputParts.Box, {
+    "data-testid": "combobox-trigger",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    disabled,
+    size: knobProps.sizeToken,
+    ...(inTableCell ? {} : {
+      borderRadius: knobProps.borderRadius.borderRadius,
+      borderWidth: knobProps.borderRadius.borderWidth
+    }),
+    tabIndex: disabled ? -1 : 0,
+    onKeyDown: e => {
+      if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
+        e.preventDefault();
+        if (!open) handleOpenChange(true);
+      }
+    },
+    children: [/* @__PURE__ */jsx(View, {
+      flex: 1,
+      paddingHorizontal: "$3",
+      paddingVertical: "$2",
+      id,
+      justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+      alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+      children: multiple && selectedValues.length > 0 ? /* @__PURE__ */jsx(View, {
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        gap: "$1.5",
+        alignItems: "center",
+        maxHeight: getFieldHeight(knobProps.sizeToken) * 0.75,
+        overflow: "hidden",
+        overflowX: "auto",
+        children: selectedValues.map(v => /* @__PURE__ */jsx(Chip, {
+          size: {
+            $3: "$2",
+            $4: "$3",
+            $5: "$4"
+          }[knobProps.sizeToken] ?? "$3",
+          color: "gray",
+          onDismiss: dismissible && !disabled ? () => handleDismiss(v) : void 0,
+          children: getLabel(v)
+        }, v))
+      }) : /* @__PURE__ */jsx(Text, {
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        color: selectedOption ? textColor : formCommonColors.muted,
+        numberOfLines: 1,
+        children: selectedOption?.label ?? placeholder
+      })
+    }), /* @__PURE__ */jsx(View, {
+      paddingRight: "$2",
+      alignSelf: "center",
+      children: /* @__PURE__ */jsx(CaretDownIcon, {
+        size: 16
+      })
+    })]
+  });
+  return /* @__PURE__ */jsx(FloatingPanel, {
+    open,
+    onOpenChange: handleOpenChange,
+    sheet: true,
+    trigger: triggerContent,
+    header: searchHeader,
+    scrollable: hasScrollableContent,
+    disabled,
+    contentPadding: "none",
+    transition: typeof sheetTransition === "string" ? sheetTransition : "medium",
+    scrollViewProps: {
+      onScroll: e => {
+        if (!onLoadMore || !hasMore || loading) return;
+        const {
+          layoutMeasurement,
+          contentOffset,
+          contentSize
+        } = e.nativeEvent;
+        if (contentSize.height - contentOffset.y - layoutMeasurement.height < 100) {
+          onLoadMore();
+        }
+      },
+      scrollEventThrottle: 100
+    },
+    children: listContent
+  });
+}
+function Combobox({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  onSearch,
+  loading,
+  onLoadMore,
+  hasMore,
+  trigger,
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  readOnly,
+  size: sizeProp,
+  id: idProp,
+  onBlur,
+  popoverWidth,
+  tabIndex: tabIndexProp,
+  multiple,
+  dismissible,
+  skeleton,
+  compact,
+  creatable,
+  onCreate,
+  createLabel,
+  hideSearch,
+  searchValue,
+  open,
+  onOpenChange,
+  ...rest
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const viewportGtSm = useViewportGtSm();
+  const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
+  const shouldUseSheet = !isWeb || !effectiveGtSm;
+  const textColor = knobProps.textAccentColor;
+  if (skeleton) {
+    return /* @__PURE__ */jsxs(InputParts, {
+      size: sizeProp || knobProps.sizeToken,
+      children: [label && /* @__PURE__ */jsx(Skeleton, {
+        variant: "text",
+        width: "30%",
+        height: 14
+      }), /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: knobProps.sizeToken
+      })]
+    });
+  }
+  const renderReadOnly = selectValue => {
+    if (multiple && Array.isArray(selectValue)) {
+      const labels = selectValue.map(v => options.find(o => o.value === v)?.label ?? v).join(", ");
+      return /* @__PURE__ */jsx(Text, {
+        fontSize: knobProps.sizeToken,
+        color: textColor,
+        paddingVertical: "$2",
+        paddingHorizontal: "$3",
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        children: labels || "-"
+      });
+    }
+    const sv = typeof selectValue === "string" ? selectValue : void 0;
+    const selected = options.find(option => option.value === sv);
+    const displayText = selected?.label ?? (sv || "-");
+    return /* @__PURE__ */jsx(Text, {
+      fontSize: knobProps.sizeToken,
+      color: textColor,
+      paddingVertical: "$2",
+      paddingHorizontal: "$3",
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      children: displayText
+    });
+  };
+  const renderComboboxContent = (selectValue, handleValueChange, handleBlur) => {
+    if (readOnly) return renderReadOnly(selectValue);
+    const ComboboxCore = shouldUseSheet ? NativeComboboxCore : FloatingComboboxCore;
+    return /* @__PURE__ */jsx(ComboboxCore, {
+      options,
+      value: selectValue,
+      onValueChange: value => {
+        if (disabled) return;
+        handleValueChange?.(value);
+        onValueChange?.(value);
+      },
+      onBlur: handleBlur,
+      placeholder,
+      searchPlaceholder,
+      emptyMessage,
+      onSearch,
+      loading,
+      onLoadMore,
+      hasMore,
+      disabled,
+      id,
+      tabIndexOverride: tabIndexProp,
+      popoverWidth,
+      trigger,
+      knobProps,
+      multiple,
+      dismissible,
+      creatable,
+      onCreate,
+      createLabel,
+      hideSearch,
+      searchValue,
+      open,
+      onOpenChange
+    });
+  };
+  if (trigger) {
+    return renderComboboxContent(valueProp, onValueChange, onBlur);
+  }
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      helperText,
+      required,
+      size: sizeProp,
+      knobProps,
+      ...rest,
+      children: /* @__PURE__ */jsx(InputParts, {
+        size: sizeProp || knobProps.sizeToken,
+        children: renderComboboxContent(valueProp ?? defaultValue, onValueChange, onBlur)
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = getFieldError(field, error);
+      return /* @__PURE__ */jsx(FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size: sizeProp,
+        knobProps,
+        ...rest,
+        children: /* @__PURE__ */jsx(InputParts, {
+          size: sizeProp || knobProps.sizeToken,
+          children: renderComboboxContent(field.state.value, value => field.handleChange(value), mergeFieldHandler(field, "handleBlur", onBlur))
+        })
+      });
+    }
+  });
+}
+export { Combobox };
+//# sourceMappingURL=index.mjs.map