@nori-ui/core 0.0.5 → 1.0.2

package/dist/chunk-ZQMNGPLE.js

@@ -0,0 +1,981 @@
+import { defaultSemanticIcons } from './chunk-7Z4NMNX6.js';
+import { px } from './chunk-5A2QOOVN.js';
+import { cn } from './chunk-CHXHRJNZ.js';
+import { useThemeColors } from './chunk-R5JMDDCB.js';
+import { __name } from './chunk-WCQVDF3K.js';
+import { useId, useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { Platform, useWindowDimensions, View, Pressable, Text, Modal, ScrollView } from 'react-native';
+import { jsxs, jsx } from 'nativewind/jsx-runtime';
+
+var DEFAULT_PAGE_SIZE = 50;
+var DEFAULT_ITEM_HEIGHT = 36;
+var DEFAULT_MAX_MENU = 320;
+var SEARCH_DEBOUNCE_MS = 150;
+var VIRTUAL_OVERSCAN = 4;
+var TYPE_AHEAD_RESET_MS = 500;
+var defaultFilter = /* @__PURE__ */ __name((option, search) => {
+  if (!search) {
+    return true;
+  }
+  return option.label.toLowerCase().includes(search.toLowerCase());
+}, "defaultFilter");
+var Select = /* @__PURE__ */ __name((props) => {
+  const {
+    options: staticOptions,
+    loadOptions,
+    pageSize = DEFAULT_PAGE_SIZE,
+    searchable: searchableProp,
+    searchPlaceholder = "Search\u2026",
+    filterOption,
+    renderOption,
+    placeholder = "Select\u2026",
+    locale,
+    sortByLocale = true,
+    noOptionsMessage = "No options",
+    loadingMessage = "Loading\u2026",
+    disabled = false,
+    dir = "ltr",
+    virtualized: virtualizedProp,
+    itemHeight = DEFAULT_ITEM_HEIGHT,
+    maxMenuHeight = DEFAULT_MAX_MENU,
+    className,
+    testID
+  } = props;
+  const ariaLabel = props["aria-label"];
+  const multiple = props.multiple === true;
+  const maxSelected = multiple ? props.maxSelected : void 0;
+  const maxChips = multiple ? props.maxChips ?? 3 : void 0;
+  const baseId = useId();
+  const colors = useThemeColors();
+  const [open, setOpen] = useState(false);
+  const controlledValues = multiple ? props.value : props.value !== void 0 ? [props.value] : void 0;
+  const defaultValues = multiple ? props.defaultValue ?? [] : props.defaultValue !== void 0 ? [props.defaultValue] : [];
+  const [innerValues, setInnerValues] = useState(defaultValues);
+  const isControlled = controlledValues !== void 0;
+  const currentValues = isControlled ? controlledValues : innerValues;
+  const current = currentValues[0];
+  const [searchInput, setSearchInput] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedSearch(searchInput), SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [searchInput]);
+  const [asyncItems, setAsyncItems] = useState([]);
+  const [asyncLoading, setAsyncLoading] = useState(false);
+  const [asyncTotal, setAsyncTotal] = useState(void 0);
+  const asyncRequestId = useRef(0);
+  const isAsync = loadOptions !== void 0;
+  useEffect(() => {
+    if (!isAsync || !loadOptions || !open) {
+      return;
+    }
+    const requestId = ++asyncRequestId.current;
+    setAsyncLoading(true);
+    setAsyncItems([]);
+    setAsyncTotal(void 0);
+    loadOptions({ search: debouncedSearch, offset: 0, limit: pageSize }).then((result) => {
+      if (requestId !== asyncRequestId.current) {
+        return;
+      }
+      setAsyncItems(result.items.slice());
+      setAsyncTotal(result.total);
+    }).catch(() => {
+    }).finally(() => {
+      if (requestId === asyncRequestId.current) {
+        setAsyncLoading(false);
+      }
+    });
+  }, [debouncedSearch, isAsync, loadOptions, pageSize, open]);
+  const loadMore = useCallback(() => {
+    if (!isAsync || !loadOptions || asyncLoading) {
+      return;
+    }
+    const haveAll = asyncTotal !== void 0 && asyncItems.length >= asyncTotal;
+    if (haveAll) {
+      return;
+    }
+    const requestId = ++asyncRequestId.current;
+    setAsyncLoading(true);
+    loadOptions({ search: debouncedSearch, offset: asyncItems.length, limit: pageSize }).then((result) => {
+      if (requestId !== asyncRequestId.current) {
+        return;
+      }
+      setAsyncItems((prev) => prev.concat(result.items));
+      if (result.total !== void 0) {
+        setAsyncTotal(result.total);
+      }
+    }).catch(() => void 0).finally(() => {
+      if (requestId === asyncRequestId.current) {
+        setAsyncLoading(false);
+      }
+    });
+  }, [asyncItems.length, asyncLoading, asyncTotal, debouncedSearch, isAsync, loadOptions, pageSize]);
+  const visibleOptions = useMemo(() => {
+    const source = isAsync ? asyncItems : staticOptions ?? [];
+    const filtered = isAsync ? source.slice() : source.filter((opt) => (filterOption ?? defaultFilter)(opt, debouncedSearch));
+    if (locale && sortByLocale) {
+      const collator = new Intl.Collator(locale, { sensitivity: "base", numeric: true });
+      return filtered.slice().sort((a, b) => {
+        const ga = a.group ?? "";
+        const gb = b.group ?? "";
+        const groupDelta = collator.compare(ga, gb);
+        if (groupDelta !== 0) {
+          return groupDelta;
+        }
+        return collator.compare(a.label, b.label);
+      });
+    }
+    return filtered;
+  }, [isAsync, asyncItems, staticOptions, filterOption, debouncedSearch, locale, sortByLocale]);
+  const selectedOption = useMemo(() => {
+    const all = isAsync ? asyncItems : staticOptions ?? [];
+    return all.find((o) => o.value === current);
+  }, [asyncItems, isAsync, staticOptions, current]);
+  const selectedOptions = useMemo(() => {
+    if (!multiple) {
+      return [];
+    }
+    const all = isAsync ? asyncItems : staticOptions ?? [];
+    const map = new Map(all.map((o) => [o.value, o]));
+    return currentValues.map((v) => map.get(v)).filter((o) => o !== void 0);
+  }, [multiple, currentValues, asyncItems, isAsync, staticOptions]);
+  const searchable = searchableProp ?? (isAsync || staticOptions !== void 0 && staticOptions.length >= 10);
+  const virtualized = virtualizedProp ?? visibleOptions.length > 100;
+  useEffect(() => {
+    setActiveIndex((idx) => Math.min(Math.max(0, idx), Math.max(0, visibleOptions.length - 1)));
+  }, [visibleOptions.length]);
+  const onSelect = useCallback(
+    (option) => {
+      if (option.disabled) {
+        return;
+      }
+      if (multiple) {
+        const has = currentValues.includes(option.value);
+        let nextValues;
+        if (has) {
+          nextValues = currentValues.filter((v) => v !== option.value);
+        } else {
+          if (maxSelected !== void 0 && currentValues.length >= maxSelected) {
+            return;
+          }
+          nextValues = [...currentValues, option.value];
+        }
+        if (!isControlled) {
+          setInnerValues(nextValues);
+        }
+        const allOpts = [
+          ...staticOptions ?? [],
+          ...asyncItems
+        ];
+        const optMap = new Map(allOpts.map((o) => [o.value, o]));
+        const selectedOpts = nextValues.map((v) => optMap.get(v)).filter((o) => o !== void 0);
+        props.onChange?.(nextValues, selectedOpts);
+        return;
+      }
+      if (!isControlled) {
+        setInnerValues([option.value]);
+      }
+      props.onChange?.(option.value, option);
+      setOpen(false);
+      setSearchInput("");
+    },
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `props` is the discriminated union — destructuring it would defeat the narrowing; the asyncItems / staticOptions captures intentionally re-trigger the callback when the option pool changes
+    [multiple, isControlled, currentValues, maxSelected, staticOptions, asyncItems, props]
+  );
+  const clearAll = useCallback(() => {
+    if (!isControlled) {
+      setInnerValues([]);
+    }
+    props.onChange?.([], []);
+  }, [isControlled, props]);
+  const moveActive = useCallback(
+    (delta) => {
+      setActiveIndex((idx) => {
+        if (visibleOptions.length === 0) {
+          return 0;
+        }
+        let next = (idx + delta + visibleOptions.length) % visibleOptions.length;
+        for (let attempts = 0; attempts < visibleOptions.length; attempts += 1) {
+          if (!visibleOptions[next]?.disabled) {
+            return next;
+          }
+          next = (next + delta + visibleOptions.length) % visibleOptions.length;
+        }
+        return idx;
+      });
+    },
+    [visibleOptions]
+  );
+  const typeAheadRef = useRef({
+    buffer: "",
+    timer: null
+  });
+  useEffect(() => {
+    return () => {
+      if (typeAheadRef.current.timer) {
+        clearTimeout(typeAheadRef.current.timer);
+        typeAheadRef.current.timer = null;
+      }
+    };
+  }, []);
+  const handleTypeAhead = useCallback(
+    (char) => {
+      if (visibleOptions.length === 0) {
+        return;
+      }
+      if (typeAheadRef.current.timer) {
+        clearTimeout(typeAheadRef.current.timer);
+      }
+      const nextBuffer = typeAheadRef.current.buffer + char.toLowerCase();
+      typeAheadRef.current.buffer = nextBuffer;
+      typeAheadRef.current.timer = setTimeout(() => {
+        typeAheadRef.current.buffer = "";
+        typeAheadRef.current.timer = null;
+      }, TYPE_AHEAD_RESET_MS);
+      const allSame = nextBuffer.length > 1 && nextBuffer.split("").every((c) => c === nextBuffer[0]);
+      const cycleMode = nextBuffer.length === 1 || allSame;
+      const needle = cycleMode ? nextBuffer.charAt(0) : nextBuffer;
+      const len = visibleOptions.length;
+      const startFrom = cycleMode ? (activeIndex + 1) % len : 0;
+      for (let i = 0; i < len; i += 1) {
+        const idx = (startFrom + i) % len;
+        const opt = visibleOptions[idx];
+        if (!opt || opt.disabled) {
+          continue;
+        }
+        if (opt.label.toLowerCase().startsWith(needle)) {
+          setActiveIndex(idx);
+          return;
+        }
+      }
+    },
+    [visibleOptions, activeIndex]
+  );
+  const handleListKeyDown = useCallback(
+    (event) => {
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          moveActive(1);
+          return true;
+        case "ArrowUp":
+          event.preventDefault();
+          moveActive(-1);
+          return true;
+        case "Home": {
+          event.preventDefault();
+          const idx = visibleOptions.findIndex((o) => !o.disabled);
+          if (idx >= 0) {
+            setActiveIndex(idx);
+          }
+          return true;
+        }
+        case "End": {
+          event.preventDefault();
+          for (let i = visibleOptions.length - 1; i >= 0; i -= 1) {
+            if (!visibleOptions[i]?.disabled) {
+              setActiveIndex(i);
+              break;
+            }
+          }
+          return true;
+        }
+        case "Enter": {
+          const opt = visibleOptions[activeIndex];
+          if (opt) {
+            event.preventDefault();
+            onSelect(opt);
+          }
+          return true;
+        }
+        case "Escape":
+          event.preventDefault();
+          setOpen(false);
+          if (Platform.OS === "web") {
+            const trigger = triggerRef.current;
+            trigger?.focus?.();
+          }
+          return true;
+        case "Tab":
+          setOpen(false);
+          return true;
+      }
+      return false;
+    },
+    [moveActive, activeIndex, visibleOptions, onSelect]
+  );
+  const handleSearchKeyDown = useCallback(
+    (event) => {
+      handleListKeyDown(event);
+    },
+    [handleListKeyDown]
+  );
+  const handlePopupKeyDown = useCallback(
+    (event) => {
+      if (handleListKeyDown(event)) {
+        return;
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.key !== " ") {
+        event.preventDefault();
+        handleTypeAhead(event.key);
+      }
+    },
+    [handleListKeyDown, handleTypeAhead]
+  );
+  const handleTriggerKeyDown = useCallback(
+    (event) => {
+      switch (event.key) {
+        case " ":
+        case "Enter":
+        case "ArrowDown":
+        case "ArrowUp":
+          event.preventDefault();
+          setOpen(true);
+          return;
+      }
+      if (!disabled && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        setOpen(true);
+        handleTypeAhead(event.key);
+      }
+    },
+    [disabled, handleTypeAhead]
+  );
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const popupRef = useRef(null);
+  useEffect(() => {
+    if (Platform.OS !== "web" || typeof document === "undefined" || typeof document.addEventListener !== "function") {
+      return;
+    }
+    if (!open) {
+      return;
+    }
+    const onDocClick = /* @__PURE__ */ __name((event) => {
+      const node = containerRef.current;
+      const popup = popupRef.current;
+      const target = event.target;
+      if (node?.contains(target)) {
+        return;
+      }
+      if (popup?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    }, "onDocClick");
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, [open]);
+  const [triggerRect, setTriggerRect] = useState(
+    null
+  );
+  const measureTrigger = useCallback(() => {
+    const node = triggerRef.current;
+    if (!node) {
+      return;
+    }
+    if (Platform.OS === "web" && typeof node.getBoundingClientRect === "function") {
+      const rect = node.getBoundingClientRect();
+      setTriggerRect({ top: rect.top, left: rect.left, width: rect.width, height: rect.height });
+      return;
+    }
+    if (typeof node.measure === "function") {
+      node.measure((_x, _y, w, h, pageX, pageY) => {
+        setTriggerRect({ top: pageY, left: pageX, width: w, height: h });
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (Platform.OS !== "web" || typeof window === "undefined" || typeof window.addEventListener !== "function") {
+      return;
+    }
+    measureTrigger();
+    window.addEventListener("scroll", measureTrigger, true);
+    window.addEventListener("resize", measureTrigger);
+    return () => {
+      window.removeEventListener("scroll", measureTrigger, true);
+      window.removeEventListener("resize", measureTrigger);
+    };
+  }, [open, measureTrigger]);
+  useEffect(() => {
+    if (!open || searchable || Platform.OS !== "web") {
+      return;
+    }
+    const id = requestAnimationFrame(() => {
+      const node = popupRef.current;
+      node?.focus?.();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [open, searchable]);
+  const onListScroll = useCallback(
+    (event) => {
+      if (!isAsync) {
+        return;
+      }
+      const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+      const remaining = contentSize.height - contentOffset.y - layoutMeasurement.height;
+      if (remaining < itemHeight * 4) {
+        loadMore();
+      }
+    },
+    [isAsync, itemHeight, loadMore]
+  );
+  const triggerStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: px(colors.spacing["2"]),
+    paddingHorizontal: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["2"]),
+    minHeight: 36,
+    // component-density literal — not from theme
+    borderWidth: 1,
+    borderColor: colors.semantic.border.default,
+    borderRadius: px(colors.radius.md),
+    backgroundColor: colors.semantic.background.elevated,
+    opacity: disabled ? 0.6 : 1
+  };
+  const winDims = useWindowDimensions();
+  const popupStyle = triggerRect ? {
+    position: Platform.OS === "web" ? "fixed" : "absolute",
+    top: triggerRect.top + triggerRect.height + px(colors.spacing["1"]),
+    left: dir === "rtl" ? void 0 : triggerRect.left,
+    right: dir === "rtl" ? Platform.OS === "web" && typeof window !== "undefined" ? window.innerWidth - (triggerRect.left + triggerRect.width) : winDims.width - (triggerRect.left + triggerRect.width) : void 0,
+    minWidth: Math.max(200, triggerRect.width),
+    backgroundColor: colors.semantic.background.elevated,
+    borderRadius: px(colors.radius.lg),
+    borderWidth: 1,
+    borderColor: colors.semantic.border.default,
+    // 2147483646 (max int32 - 1) so we sit above any third-party
+    // chrome (toasts, modals, dev banners) without picking a fight
+    // for the very top slot. Combined with portaling to body below,
+    // this also dodges any ancestor stacking context that would
+    // otherwise trap our z-index inside a sibling preview frame.
+    zIndex: 2147483646,
+    ...{ boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)" }
+  } : {
+    // Trigger not yet measured — render off-screen until the
+    // first measurement lands. Avoids a one-frame flash at (0,0).
+    position: Platform.OS === "web" ? "fixed" : "absolute",
+    top: -9999,
+    left: -9999
+  };
+  const containerProps = {
+    ref: /* @__PURE__ */ __name((node) => {
+      containerRef.current = node;
+    }, "ref"),
+    ...testID !== void 0 ? { testID } : {},
+    dir
+  };
+  return /* @__PURE__ */ jsxs(View, { ...containerProps, className: cn("relative", className), style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+        },
+        ...{
+          onKeyDown: handleTriggerKeyDown,
+          role: "combobox",
+          accessibilityRole: "combobox",
+          "aria-expanded": open,
+          "aria-controls": `${baseId}-listbox`,
+          "aria-haspopup": "listbox",
+          tabIndex: disabled ? -1 : 0,
+          ...ariaLabel !== void 0 ? { "aria-label": ariaLabel, accessibilityLabel: ariaLabel } : {},
+          ...disabled ? { "aria-disabled": true, disabled: true } : {}
+        },
+        onPress: () => {
+          if (disabled) {
+            return;
+          }
+          measureTrigger();
+          setOpen((v) => !v);
+        },
+        style: triggerStyle,
+        children: [
+          multiple ? /* @__PURE__ */ jsx(MultiTriggerLabel, { options: selectedOptions, placeholder, maxChips: maxChips ?? 3 }) : /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: selectedOption ? colors.semantic.text.default : colors.semantic.text.muted,
+                fontFamily: colors.fontFamily.body,
+                fontSize: px(colors.fontSize.sm),
+                flex: 1
+              },
+              numberOfLines: 1,
+              children: selectedOption?.label ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(defaultSemanticIcons.chevronDown, { size: 16, color: colors.semantic.text.muted })
+        ]
+      }
+    ),
+    open ? renderPopup() : null
+  ] });
+  function renderPopup() {
+    const popup = /* @__PURE__ */ jsxs(
+      View,
+      {
+        ref: (node) => {
+          popupRef.current = node;
+        },
+        ...{
+          role: "listbox",
+          id: `${baseId}-listbox`,
+          ...multiple ? { "aria-multiselectable": true } : {},
+          // Without a search field there's no input to capture
+          // keystrokes — make the popup itself focusable and own
+          // arrow / Enter / Escape / type-ahead. With a search
+          // field these belong to the input below.
+          ...searchable ? {} : { tabIndex: -1, onKeyDown: handlePopupKeyDown }
+        },
+        style: popupStyle,
+        children: [
+          searchable ? /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              value: searchInput,
+              onChange: setSearchInput,
+              onKeyDown: handleSearchKeyDown,
+              placeholder: searchPlaceholder,
+              dir
+            }
+          ) : null,
+          multiple && currentValues.length > 0 ? /* @__PURE__ */ jsx(MultiSelectionHeader, { count: currentValues.length, onClearAll: clearAll }) : null,
+          /* @__PURE__ */ jsx(
+            SelectList,
+            {
+              options: visibleOptions,
+              activeIndex,
+              currentValue: current,
+              selectedValues: currentValues,
+              multiple,
+              onSelect,
+              onActiveChange: setActiveIndex,
+              ...renderOption !== void 0 ? { renderOption } : {},
+              itemHeight,
+              maxHeight: maxMenuHeight,
+              virtualized,
+              loading: isAsync && asyncLoading,
+              loadingMessage,
+              noOptionsMessage,
+              listboxId: `${baseId}-listbox`,
+              onScroll: onListScroll
+            }
+          )
+        ]
+      }
+    );
+    if (Platform.OS === "web" && typeof document !== "undefined") {
+      return createPortal(popup, document.body);
+    }
+    return /* @__PURE__ */ jsxs(Modal, { transparent: true, visible: true, animationType: "fade", onRequestClose: () => setOpen(false), statusBarTranslucent: true, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          onPress: () => setOpen(false),
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0
+          }
+        }
+      ),
+      popup
+    ] });
+  }
+}, "Select");
+var SearchInput = /* @__PURE__ */ __name(({ value, onChange, onKeyDown, placeholder, dir }) => {
+  const colors = useThemeColors();
+  const inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current?.focus?.();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        paddingHorizontal: px(colors.spacing["2"]),
+        paddingVertical: px(colors.spacing["2"]),
+        borderBottomWidth: 1,
+        borderBottomColor: colors.semantic.border.default
+      },
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value,
+          onChange: (event) => onChange(event.target.value),
+          onKeyDown,
+          placeholder,
+          dir,
+          "aria-label": "Search options",
+          style: {
+            width: "100%",
+            // Inline `padding: '6px 8px'` shorthand intentionally kept as a
+            // string for the native HTML <input> — it's not an RN style prop.
+            padding: `${px(colors.spacing["2"]) - 2}px ${px(colors.spacing["2"])}px`,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            color: colors.semantic.text.default,
+            backgroundColor: colors.semantic.background.elevated,
+            border: `1px solid ${colors.semantic.border.default}`,
+            borderRadius: px(colors.radius.sm),
+            outline: "none"
+          }
+        }
+      )
+    }
+  );
+}, "SearchInput");
+var SelectList = /* @__PURE__ */ __name(({
+  options,
+  activeIndex,
+  currentValue,
+  selectedValues,
+  multiple,
+  onSelect,
+  onActiveChange,
+  renderOption,
+  itemHeight,
+  maxHeight,
+  virtualized,
+  loading,
+  loadingMessage,
+  noOptionsMessage,
+  listboxId,
+  onScroll
+}) => {
+  const colors = useThemeColors();
+  const [scrollTop, setScrollTop] = useState(0);
+  const totalHeight = options.length * itemHeight;
+  const visibleStart = virtualized ? Math.max(0, Math.floor(scrollTop / itemHeight) - VIRTUAL_OVERSCAN) : 0;
+  const visibleEnd = virtualized ? Math.min(options.length, Math.ceil((scrollTop + maxHeight) / itemHeight) + VIRTUAL_OVERSCAN) : options.length;
+  const handleScroll = /* @__PURE__ */ __name((event) => {
+    if (virtualized) {
+      setScrollTop(event.nativeEvent.contentOffset.y);
+    }
+    onScroll(event);
+  }, "handleScroll");
+  if (loading && options.length === 0) {
+    return /* @__PURE__ */ jsx(View, { style: { padding: px(colors.spacing["4"]), alignItems: "center" }, children: /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          color: colors.semantic.text.muted,
+          fontFamily: colors.fontFamily.body,
+          fontSize: px(colors.fontSize.sm)
+        },
+        children: loadingMessage
+      }
+    ) });
+  }
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx(View, { style: { padding: px(colors.spacing["4"]), alignItems: "center" }, children: /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          color: colors.semantic.text.muted,
+          fontFamily: colors.fontFamily.body,
+          fontSize: px(colors.fontSize.sm)
+        },
+        children: noOptionsMessage
+      }
+    ) });
+  }
+  const items = [];
+  let lastGroup;
+  for (let i = visibleStart; i < visibleEnd; i += 1) {
+    const opt = options[i];
+    if (!opt) {
+      continue;
+    }
+    if (opt.group !== lastGroup && opt.group !== void 0) {
+      items.push(
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              paddingHorizontal: px(colors.spacing["3"]),
+              paddingTop: px(colors.spacing["2"]),
+              paddingBottom: px(colors.spacing["1"]),
+              position: virtualized ? "absolute" : "relative",
+              top: virtualized ? i * itemHeight - px(colors.spacing["4"]) : void 0,
+              left: 0,
+              right: 0
+            },
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  color: colors.semantic.text.muted,
+                  fontFamily: colors.fontFamily.body,
+                  fontSize: 11,
+                  // group header — component-density literal — not from theme (smaller than xs)
+                  fontWeight: colors.fontWeight.semibold,
+                  textTransform: "uppercase",
+                  letterSpacing: 0.5
+                },
+                children: opt.group
+              }
+            )
+          },
+          `grp-${i}-${opt.group}`
+        )
+      );
+      lastGroup = opt.group;
+    }
+    const selected = multiple ? selectedValues.includes(opt.value) : opt.value === currentValue;
+    const active = i === activeIndex;
+    const itemNode = renderOption ? renderOption(opt, { selected, active }) : /* @__PURE__ */ jsx(DefaultOptionRow, { option: opt, selected, active, multiple });
+    items.push(
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          ...{
+            role: "option",
+            accessibilityRole: "none",
+            "aria-selected": selected,
+            onMouseEnter: /* @__PURE__ */ __name(() => onActiveChange(i), "onMouseEnter"),
+            ...opt.disabled ? { "aria-disabled": true, disabled: true } : {}
+          },
+          onPress: () => onSelect(opt),
+          style: {
+            position: virtualized ? "absolute" : "relative",
+            top: virtualized ? i * itemHeight : void 0,
+            left: 0,
+            right: 0,
+            height: itemHeight,
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: px(colors.spacing["3"]),
+            backgroundColor: active ? colors.semantic.background.subtle : "transparent",
+            opacity: opt.disabled ? 0.5 : 1
+          },
+          children: itemNode
+        },
+        `opt-${i}-${opt.value}`
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      nativeID: listboxId,
+      onScroll: handleScroll,
+      scrollEventThrottle: 16,
+      style: { maxHeight },
+      contentContainerStyle: virtualized ? { height: totalHeight, position: "relative" } : void 0,
+      children: items
+    }
+  );
+}, "SelectList");
+var DefaultOptionRow = /* @__PURE__ */ __name(({
+  option,
+  selected,
+  active,
+  multiple = false
+}) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", flex: 1, gap: px(colors.spacing["2"]) }, children: [
+    multiple ? (
+      // Inline checkbox-style indicator. We don't reuse <Checkbox>
+      // here because the row is already a Pressable — nesting two
+      // pressable surfaces breaks tap handling on native; this
+      // is purely visual (the Pressable parent owns the toggle).
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          "aria-hidden": true,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          style: {
+            width: 18,
+            height: 18,
+            borderWidth: 1,
+            borderRadius: px(colors.radius.sm),
+            borderColor: selected ? colors.semantic.interactive.primary : colors.semantic.border.strong,
+            backgroundColor: selected ? colors.semantic.interactive.primary : "transparent",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: selected ? /* @__PURE__ */ jsx(defaultSemanticIcons.check, { size: 12, color: colors.semantic.text.inverted }) : null
+        }
+      )
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          color: colors.semantic.text.default,
+          fontFamily: colors.fontFamily.body,
+          fontSize: px(colors.fontSize.sm),
+          fontWeight: selected ? colors.fontWeight.semibold : colors.fontWeight.regular,
+          flex: 1
+        },
+        numberOfLines: 1,
+        children: option.label
+      }
+    ),
+    selected && !multiple ? /* @__PURE__ */ jsx(defaultSemanticIcons.check, { size: 16, color: colors.semantic.interactive.primary }) : null,
+    active ? null : null
+  ] });
+}, "DefaultOptionRow");
+var MultiTriggerLabel = /* @__PURE__ */ __name(({
+  options,
+  placeholder,
+  maxChips
+}) => {
+  const colors = useThemeColors();
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: {
+          color: colors.semantic.text.muted,
+          fontFamily: colors.fontFamily.body,
+          fontSize: px(colors.fontSize.sm),
+          flex: 1
+        },
+        numberOfLines: 1,
+        children: placeholder
+      }
+    );
+  }
+  if (options.length > maxChips) {
+    return /* @__PURE__ */ jsxs(
+      Text,
+      {
+        style: {
+          color: colors.semantic.text.default,
+          fontFamily: colors.fontFamily.body,
+          fontSize: px(colors.fontSize.sm),
+          fontWeight: colors.fontWeight.medium,
+          fontVariant: ["tabular-nums"],
+          flex: 1
+        },
+        numberOfLines: 1,
+        children: [
+          options.length,
+          " selected"
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        rowGap: px(colors.spacing["1"]),
+        columnGap: px(colors.spacing["1"]),
+        flex: 1
+      },
+      children: options.map((opt) => /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: px(colors.spacing["2"]),
+            paddingVertical: 2,
+            borderRadius: px(colors.radius.sm),
+            backgroundColor: colors.semantic.background.subtle,
+            borderWidth: 1,
+            borderColor: colors.semantic.border.default
+          },
+          children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: colors.semantic.text.default,
+                fontFamily: colors.fontFamily.body,
+                fontSize: px(colors.fontSize.sm)
+              },
+              numberOfLines: 1,
+              children: opt.label
+            }
+          )
+        },
+        `chip-${opt.value}`
+      ))
+    }
+  );
+}, "MultiTriggerLabel");
+var MultiSelectionHeader = /* @__PURE__ */ __name(({ count, onClearAll }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: px(colors.spacing["3"]),
+        paddingVertical: px(colors.spacing["2"]),
+        borderBottomWidth: 1,
+        borderBottomColor: colors.semantic.border.default
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            style: {
+              color: colors.semantic.text.muted,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              fontVariant: ["tabular-nums"]
+            },
+            children: [
+              count,
+              " selected"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            role: "button",
+            accessibilityRole: "button",
+            "aria-label": "Clear all",
+            accessibilityLabel: "Clear all",
+            onPress: onClearAll,
+            style: ({ pressed }) => ({
+              paddingHorizontal: px(colors.spacing["2"]),
+              paddingVertical: 2,
+              borderRadius: px(colors.radius.sm),
+              opacity: pressed ? 0.6 : 1
+            }),
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  color: colors.semantic.interactive.primary,
+                  fontFamily: colors.fontFamily.body,
+                  fontSize: px(colors.fontSize.sm),
+                  fontWeight: colors.fontWeight.medium
+                },
+                children: "Clear all"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, "MultiSelectionHeader");
+
+export { Select };
+//# sourceMappingURL=chunk-ZQMNGPLE.js.map
+//# sourceMappingURL=chunk-ZQMNGPLE.js.map