@nori-ui/core 0.0.5 → 1.0.2

package/dist/components/Pagination/index.cjs

@@ -0,0 +1,2501 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var jsxRuntime = require('nativewind/jsx-runtime');
+var reactDom = require('react-dom');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/i18n/default-dictionary.ts
+var defaultDictionary = {
+  // generic / shared
+  "common.cancel": "Cancel",
+  "common.confirm": "Confirm",
+  "common.close": "Close",
+  "common.back": "Back",
+  "common.loading": "Loading",
+  "common.error": "Something went wrong",
+  "common.retry": "Try again",
+  // breadcrumb
+  "breadcrumb.ariaLabel": "Breadcrumb",
+  "breadcrumb.expandLabel": "Show full path",
+  "breadcrumb.ellipsisLabel": "More",
+  "breadcrumb.currentPageLabel": "Current page",
+  "breadcrumb.siblingMenuLabel": "Open sibling pages",
+  // pagination
+  "pagination.ariaLabel": "Pagination",
+  "pagination.previous": "Previous page",
+  "pagination.next": "Next page",
+  "pagination.first": "First page",
+  "pagination.last": "Last page",
+  "pagination.ellipsis": "More pages",
+  "pagination.currentPage": "Current page",
+  "pagination.gotoPage": "Go to page {{page}}",
+  "pagination.range": "Showing {{from}}\u2013{{to}} of {{total}}",
+  "pagination.pageOf": "Page {{page}} of {{total}}",
+  "pagination.pageSizeLabel": "Items per page",
+  "pagination.jumperLabel": "Go to page",
+  "pagination.jumperPlaceholder": "#",
+  // floatButton
+  "floatButton.backToTop": "Back to top",
+  // calendar
+  "calendar.header.previous": "Previous",
+  "calendar.header.next": "Next",
+  "calendar.header.openMonthView": "Open month picker",
+  "calendar.header.openYearView": "Open year picker",
+  "calendar.header.openDayView": "Open day picker",
+  "calendar.today": "Today",
+  "calendar.clear": "Clear",
+  // button
+  "button.loadingLabel": "Loading",
+  // input
+  "input.clear": "Clear",
+  "input.passwordShow": "Show password",
+  "input.passwordHide": "Hide password",
+  // checkbox / switch
+  "checkbox.checked": "Checked",
+  "checkbox.unchecked": "Unchecked",
+  "switch.on": "On",
+  "switch.off": "Off"
+};
+
+// src/i18n/resolve.ts
+function resolveI18n(input, defaults) {
+  if (typeof input === "function") {
+    return (keyOrKeys, options) => input(keyOrKeys, options);
+  }
+  const dict = input ?? {};
+  return (keyOrKeys, options) => {
+    const keys = Array.isArray(keyOrKeys) ? keyOrKeys : [keyOrKeys];
+    for (const rawKey of keys) {
+      const key = pluralize(rawKey, options?.count);
+      const template = dict[key] ?? defaults[key];
+      if (template !== void 0) {
+        return interpolate(template, options);
+      }
+    }
+    const lastKey = keys[keys.length - 1];
+    if (options?.defaultValue !== void 0) {
+      return interpolate(options.defaultValue, options);
+    }
+    return lastKey ?? "";
+  };
+}
+__name(resolveI18n, "resolveI18n");
+function pluralize(key, count) {
+  if (count === void 0) {
+    return key;
+  }
+  if (count === 1) {
+    return `${key}_one`;
+  }
+  return `${key}_other`;
+}
+__name(pluralize, "pluralize");
+function interpolate(template, options) {
+  if (!options) {
+    return template;
+  }
+  return template.replace(/\{\{\s*([A-Za-z0-9_.-]+)\s*\}\}/g, (_match, name) => {
+    const value = options[name];
+    return value === void 0 || value === null ? "" : String(value);
+  });
+}
+__name(interpolate, "interpolate");
+var defaultValue = {
+  t: resolveI18n(void 0, defaultDictionary)
+};
+var I18nContext = react.createContext(defaultValue);
+I18nContext.displayName = "I18nContext";
+
+// src/i18n/use-translation.ts
+function useTranslation() {
+  return react.useContext(I18nContext);
+}
+__name(useTranslation, "useTranslation");
+
+// src/slot/compose-refs.ts
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+__name(composeRefs, "composeRefs");
+var Slot = react.forwardRef(/* @__PURE__ */ __name(function Slot2(props, forwardedRef) {
+  const { children, ...slotProps } = props;
+  if (!react.isValidElement(children)) {
+    return null;
+  }
+  const child = react.Children.only(children);
+  const merged = mergeProps(slotProps, child.props);
+  const childRef = child.ref;
+  if (forwardedRef || childRef) {
+    merged.ref = composeRefs(forwardedRef, childRef);
+  }
+  return react.cloneElement(child, merged);
+}, "Slot"));
+Slot.displayName = "Slot";
+function mergeProps(outer, inner) {
+  const merged = { ...outer };
+  for (const key of Object.keys(inner)) {
+    const outerValue = outer[key];
+    const innerValue = inner[key];
+    if (key === "className" || key === "class") {
+      merged[key] = joinClass(outerValue, innerValue);
+      continue;
+    }
+    if (key === "style") {
+      merged[key] = {
+        ...outerValue,
+        ...innerValue
+      };
+      continue;
+    }
+    if (isEventHandler(key, outerValue, innerValue)) {
+      merged[key] = composeHandlers(outerValue, innerValue);
+      continue;
+    }
+    merged[key] = innerValue;
+  }
+  return merged;
+}
+__name(mergeProps, "mergeProps");
+function joinClass(outer, inner) {
+  const a = typeof outer === "string" ? outer : "";
+  const b = typeof inner === "string" ? inner : "";
+  const joined = [a, b].filter(Boolean).join(" ");
+  return joined.length > 0 ? joined : void 0;
+}
+__name(joinClass, "joinClass");
+function isEventHandler(key, outer, inner) {
+  if (!key.startsWith("on") || key.length < 3) {
+    return false;
+  }
+  if (key[2] !== key[2]?.toUpperCase()) {
+    return false;
+  }
+  return typeof outer === "function" && typeof inner === "function";
+}
+__name(isEventHandler, "isEventHandler");
+function composeHandlers(outer, inner) {
+  return (...args) => {
+    outer(...args);
+    inner(...args);
+  };
+}
+__name(composeHandlers, "composeHandlers");
+
+// src/theme/px.ts
+function px(value) {
+  if (typeof value === "number") {
+    return value;
+  }
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+}
+__name(px, "px");
+
+// ../tokens/build/theme.ts
+var theme = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#fafafa",
+      elevated: "#ffffff",
+      subtle: "#f4f4f5"
+    },
+    border: {
+      default: "#e4e4e7",
+      strong: "#d4d4d8"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#0d9488",
+      primaryHover: "#0f766e",
+      primaryPressed: "#115e59"
+    },
+    text: {
+      default: "#18181b",
+      inverted: "#fafafa",
+      muted: "#52525b"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var themeDark = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#18181b",
+      elevated: "#3f3f46",
+      subtle: "#27272a"
+    },
+    border: {
+      default: "#3f3f46",
+      strong: "#52525b"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#2dd4bf",
+      primaryHover: "#5eead4",
+      primaryPressed: "#99f6e4"
+    },
+    text: {
+      default: "#fafafa",
+      inverted: "#18181b",
+      muted: "#a1a1aa"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var defaultTheme = {
+  light: theme,
+  dark: themeDark
+};
+var ThemeContext = react.createContext(defaultTheme);
+ThemeContext.displayName = "ThemeContext";
+var ColorSchemeOverrideContext = react.createContext(null);
+ColorSchemeOverrideContext.displayName = "ColorSchemeOverrideContext";
+var isWeb = reactNative.Platform.OS === "web";
+function readWebScheme() {
+  if (typeof document === "undefined") {
+    return "light";
+  }
+  const root = document.documentElement;
+  if (root.classList.contains("dark")) {
+    return "dark";
+  }
+  if (root.getAttribute("data-theme") === "dark") {
+    return "dark";
+  }
+  return "light";
+}
+__name(readWebScheme, "readWebScheme");
+function useColorScheme() {
+  const override = react.useContext(ColorSchemeOverrideContext);
+  const [scheme, setScheme] = react.useState(() => {
+    if (isWeb) {
+      return readWebScheme();
+    }
+    return reactNative.Appearance.getColorScheme() ?? "light";
+  });
+  react.useEffect(() => {
+    if (isWeb) {
+      const root = document.documentElement;
+      const update = /* @__PURE__ */ __name(() => setScheme(readWebScheme()), "update");
+      const observer = new MutationObserver(update);
+      observer.observe(root, { attributes: true, attributeFilter: ["class", "data-theme"] });
+      update();
+      return () => observer.disconnect();
+    }
+    const sub = reactNative.Appearance.addChangeListener(({ colorScheme }) => {
+      setScheme(colorScheme ?? "light");
+    });
+    return () => sub.remove();
+  }, []);
+  return override ?? scheme;
+}
+__name(useColorScheme, "useColorScheme");
+
+// src/theme/use-theme-colors.ts
+function useThemeColors() {
+  const scheme = useColorScheme();
+  const themePair = react.useContext(ThemeContext);
+  return scheme === "dark" ? themePair.dark : themePair.light;
+}
+__name(useThemeColors, "useThemeColors");
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  const out = [];
+  for (const input of inputs) {
+    append(out, input);
+  }
+  return out.join(" ");
+}
+__name(cn, "cn");
+function append(out, input) {
+  if (!input) {
+    return;
+  }
+  if (typeof input === "string") {
+    if (input.length > 0) {
+      out.push(input);
+    }
+    return;
+  }
+  if (typeof input === "number") {
+    return;
+  }
+  if (Array.isArray(input)) {
+    for (const inner of input) {
+      append(out, inner);
+    }
+    return;
+  }
+  if (typeof input === "object") {
+    for (const key of Object.keys(input)) {
+      if (input[key]) {
+        out.push(key);
+      }
+    }
+  }
+}
+__name(append, "append");
+var isWeb2 = reactNative.Platform.OS === "web";
+var make = /* @__PURE__ */ __name(({ path, glyph }) => /* @__PURE__ */ __name(function PlaceholderIcon({ size = 20, color = "currentColor" }) {
+  const colors = useThemeColors();
+  if (isWeb2) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path })
+      }
+    );
+  }
+  const resolvedColor = color === "currentColor" ? colors.semantic.text.default : color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { fontSize: size, lineHeight: size, color: resolvedColor },
+      children: glyph
+    }
+  );
+}, "PlaceholderIcon"), "make");
+var defaultSemanticIcons = {
+  checkmark: make({ path: "M20 6 9 17l-5-5", glyph: "\u2713" }),
+  close: make({ path: "M18 6 6 18 M6 6l12 12", glyph: "\u2715" }),
+  eye: make({
+    path: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z",
+    glyph: "\u{1F441}"
+  }),
+  eyeOff: make({
+    path: "M17.94 17.94A10 10 0 0 1 2 12s3.5-7 10-7c2 0 3.8.6 5.4 1.5 M1 1l22 22",
+    glyph: "\u{1F648}"
+  }),
+  chevronDown: make({ path: "m6 9 6 6 6-6", glyph: "\u2304" }),
+  chevronUp: make({ path: "m18 15-6-6-6 6", glyph: "\u2303" }),
+  alertTriangle: make({
+    path: "M12 9v4 M12 17h.01 M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z",
+    glyph: "\u26A0"
+  }),
+  info: make({
+    path: "M12 8h.01 M11 12h1v4h1 M12 22C6.48 22 2 17.52 2 12 2 6.48 6.48 2 12 2c5.52 0 10 4.48 10 10 0 5.52-4.48 10-10 10z",
+    glyph: "\u24D8"
+  }),
+  check: make({ path: "M20 6 9 17l-5-5", glyph: "\u2713" }),
+  x: make({ path: "M18 6 6 18 M6 6l12 12", glyph: "\u2715" })
+};
+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 = react.useId();
+  const colors = useThemeColors();
+  const [open, setOpen] = react.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] = react.useState(defaultValues);
+  const isControlled = controlledValues !== void 0;
+  const currentValues = isControlled ? controlledValues : innerValues;
+  const current = currentValues[0];
+  const [searchInput, setSearchInput] = react.useState("");
+  const [debouncedSearch, setDebouncedSearch] = react.useState("");
+  const [activeIndex, setActiveIndex] = react.useState(0);
+  react.useEffect(() => {
+    const t = setTimeout(() => setDebouncedSearch(searchInput), SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [searchInput]);
+  const [asyncItems, setAsyncItems] = react.useState([]);
+  const [asyncLoading, setAsyncLoading] = react.useState(false);
+  const [asyncTotal, setAsyncTotal] = react.useState(void 0);
+  const asyncRequestId = react.useRef(0);
+  const isAsync = loadOptions !== void 0;
+  react.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 = react.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 = react.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 = react.useMemo(() => {
+    const all = isAsync ? asyncItems : staticOptions ?? [];
+    return all.find((o) => o.value === current);
+  }, [asyncItems, isAsync, staticOptions, current]);
+  const selectedOptions = react.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;
+  react.useEffect(() => {
+    setActiveIndex((idx) => Math.min(Math.max(0, idx), Math.max(0, visibleOptions.length - 1)));
+  }, [visibleOptions.length]);
+  const onSelect = react.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 = react.useCallback(() => {
+    if (!isControlled) {
+      setInnerValues([]);
+    }
+    props.onChange?.([], []);
+  }, [isControlled, props]);
+  const moveActive = react.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 = react.useRef({
+    buffer: "",
+    timer: null
+  });
+  react.useEffect(() => {
+    return () => {
+      if (typeAheadRef.current.timer) {
+        clearTimeout(typeAheadRef.current.timer);
+        typeAheadRef.current.timer = null;
+      }
+    };
+  }, []);
+  const handleTypeAhead = react.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 = react.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 (reactNative.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 = react.useCallback(
+    (event) => {
+      handleListKeyDown(event);
+    },
+    [handleListKeyDown]
+  );
+  const handlePopupKeyDown = react.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 = react.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 = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const popupRef = react.useRef(null);
+  react.useEffect(() => {
+    if (reactNative.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] = react.useState(
+    null
+  );
+  const measureTrigger = react.useCallback(() => {
+    const node = triggerRef.current;
+    if (!node) {
+      return;
+    }
+    if (reactNative.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 });
+      });
+    }
+  }, []);
+  react.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (reactNative.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]);
+  react.useEffect(() => {
+    if (!open || searchable || reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const id = requestAnimationFrame(() => {
+      const node = popupRef.current;
+      node?.focus?.();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [open, searchable]);
+  const onListScroll = react.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 = reactNative.useWindowDimensions();
+  const popupStyle = triggerRect ? {
+    position: reactNative.Platform.OS === "web" ? "fixed" : "absolute",
+    top: triggerRect.top + triggerRect.height + px(colors.spacing["1"]),
+    left: dir === "rtl" ? void 0 : triggerRect.left,
+    right: dir === "rtl" ? reactNative.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: reactNative.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__ */ jsxRuntime.jsxs(reactNative.View, { ...containerProps, className: cn("relative", className), style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.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__ */ jsxRuntime.jsx(MultiTriggerLabel, { options: selectedOptions, placeholder, maxChips: maxChips ?? 3 }) : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.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__ */ jsxRuntime.jsx(defaultSemanticIcons.chevronDown, { size: 16, color: colors.semantic.text.muted })
+        ]
+      }
+    ),
+    open ? renderPopup() : null
+  ] });
+  function renderPopup() {
+    const popup = /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.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__ */ jsxRuntime.jsx(
+            SearchInput,
+            {
+              value: searchInput,
+              onChange: setSearchInput,
+              onKeyDown: handleSearchKeyDown,
+              placeholder: searchPlaceholder,
+              dir
+            }
+          ) : null,
+          multiple && currentValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(MultiSelectionHeader, { count: currentValues.length, onClearAll: clearAll }) : null,
+          /* @__PURE__ */ jsxRuntime.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 (reactNative.Platform.OS === "web" && typeof document !== "undefined") {
+      return reactDom.createPortal(popup, document.body);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Modal, { transparent: true, visible: true, animationType: "fade", onRequestClose: () => setOpen(false), statusBarTranslucent: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.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 = react.useRef(null);
+  react.useEffect(() => {
+    inputRef.current?.focus?.();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: {
+        paddingHorizontal: px(colors.spacing["2"]),
+        paddingVertical: px(colors.spacing["2"]),
+        borderBottomWidth: 1,
+        borderBottomColor: colors.semantic.border.default
+      },
+      children: /* @__PURE__ */ jsxRuntime.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] = react.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__ */ jsxRuntime.jsx(reactNative.View, { style: { padding: px(colors.spacing["4"]), alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        style: {
+          color: colors.semantic.text.muted,
+          fontFamily: colors.fontFamily.body,
+          fontSize: px(colors.fontSize.sm)
+        },
+        children: loadingMessage
+      }
+    ) });
+  }
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { padding: px(colors.spacing["4"]), alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.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__ */ jsxRuntime.jsx(
+          reactNative.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__ */ jsxRuntime.jsx(
+              reactNative.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__ */ jsxRuntime.jsx(DefaultOptionRow, { option: opt, selected, active, multiple });
+    items.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.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__ */ jsxRuntime.jsx(
+    reactNative.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__ */ jsxRuntime.jsxs(reactNative.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__ */ jsxRuntime.jsx(
+        reactNative.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__ */ jsxRuntime.jsx(defaultSemanticIcons.check, { size: 12, color: colors.semantic.text.inverted }) : null
+        }
+      )
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      reactNative.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__ */ jsxRuntime.jsxs(
+      reactNative.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__ */ jsxRuntime.jsx(
+    reactNative.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__ */ jsxRuntime.jsx(
+        reactNative.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__ */ jsxRuntime.jsx(
+            reactNative.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__ */ jsxRuntime.jsxs(
+    reactNative.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__ */ jsxRuntime.jsxs(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.text.muted,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              fontVariant: ["tabular-nums"]
+            },
+            children: [
+              count,
+              " selected"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.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__ */ jsxRuntime.jsx(
+              reactNative.Text,
+              {
+                style: {
+                  color: colors.semantic.interactive.primary,
+                  fontFamily: colors.fontFamily.body,
+                  fontSize: px(colors.fontSize.sm),
+                  fontWeight: colors.fontWeight.medium
+                },
+                children: "Clear all"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, "MultiSelectionHeader");
+var range = /* @__PURE__ */ __name((from, to) => {
+  if (to < from) {
+    return [];
+  }
+  const out = new Array(to - from + 1);
+  for (let i = 0; i < out.length; i += 1) {
+    out[i] = from + i;
+  }
+  return out;
+}, "range");
+function usePagination(args) {
+  const {
+    page: controlledPage,
+    defaultPage = 1,
+    pageCount,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showFirstLast = false,
+    showPrevNext = true,
+    onPageChange
+  } = args;
+  const isControlled = controlledPage !== void 0;
+  const [uncontrolledPage, setUncontrolledPage] = react.useState(defaultPage);
+  const onChangeRef = react.useRef(onPageChange);
+  onChangeRef.current = onPageChange;
+  const safePageCount = Math.max(1, Math.floor(pageCount));
+  const rawPage = isControlled ? controlledPage : uncontrolledPage;
+  const currentPage = Math.min(Math.max(1, Math.floor(rawPage)), safePageCount);
+  const goToPage = react.useCallback(
+    (next2) => {
+      const clamped = Math.min(Math.max(1, Math.floor(next2)), Math.max(1, Math.floor(pageCount)));
+      if (!isControlled) {
+        setUncontrolledPage(clamped);
+      }
+      onChangeRef.current?.(clamped);
+    },
+    [isControlled, pageCount]
+  );
+  const prev = react.useCallback(() => goToPage(currentPage - 1), [goToPage, currentPage]);
+  const next = react.useCallback(() => goToPage(currentPage + 1), [goToPage, currentPage]);
+  const first = react.useCallback(() => goToPage(1), [goToPage]);
+  const last = react.useCallback(() => goToPage(safePageCount), [goToPage, safePageCount]);
+  const pages = react.useMemo(() => {
+    const items = [];
+    const safeSibling = Math.max(0, Math.floor(siblingCount));
+    const safeBoundary = Math.max(0, Math.floor(boundaryCount));
+    if (showFirstLast) {
+      items.push({ type: "first", disabled: currentPage <= 1 });
+    }
+    if (showPrevNext) {
+      items.push({ type: "prev", disabled: currentPage <= 1 });
+    }
+    const startPages = range(1, Math.min(safeBoundary, safePageCount));
+    const endPages = range(Math.max(safePageCount - safeBoundary + 1, safeBoundary + 1), safePageCount);
+    const siblingsStart = Math.max(
+      Math.min(currentPage - safeSibling, safePageCount - safeBoundary - safeSibling * 2 - 1),
+      safeBoundary + 2
+    );
+    const siblingsEnd = Math.min(
+      Math.max(currentPage + safeSibling, safeBoundary + safeSibling * 2 + 2),
+      endPages.length > 0 ? endPages[0] - 2 : safePageCount - 1
+    );
+    const middle = [];
+    if (siblingsStart > safeBoundary + 2) {
+      middle.push("ellipsis");
+    } else if (safeBoundary + 1 < safePageCount - safeBoundary) {
+      middle.push(safeBoundary + 1);
+    }
+    for (const p of range(siblingsStart, siblingsEnd)) {
+      middle.push(p);
+    }
+    if (siblingsEnd < safePageCount - safeBoundary - 1) {
+      middle.push("ellipsis");
+    } else if (safePageCount - safeBoundary > safeBoundary) {
+      middle.push(safePageCount - safeBoundary);
+    }
+    const seen = /* @__PURE__ */ new Set();
+    const pushPage = /* @__PURE__ */ __name((n) => {
+      if (n < 1 || n > safePageCount || seen.has(n)) {
+        return;
+      }
+      seen.add(n);
+      items.push({ type: "page", page: n, selected: n === currentPage });
+    }, "pushPage");
+    for (const n of startPages) {
+      pushPage(n);
+    }
+    for (const m of middle) {
+      if (m === "ellipsis") {
+        items.push({ type: "ellipsis" });
+      } else {
+        pushPage(m);
+      }
+    }
+    for (const n of endPages) {
+      pushPage(n);
+    }
+    if (showPrevNext) {
+      items.push({ type: "next", disabled: currentPage >= safePageCount });
+    }
+    if (showFirstLast) {
+      items.push({ type: "last", disabled: currentPage >= safePageCount });
+    }
+    return items;
+  }, [currentPage, safePageCount, siblingCount, boundaryCount, showFirstLast, showPrevNext]);
+  return {
+    page: currentPage,
+    pages,
+    canPrev: currentPage > 1,
+    canNext: currentPage < safePageCount,
+    goToPage,
+    prev,
+    next,
+    first,
+    last
+  };
+}
+__name(usePagination, "usePagination");
+var PAGINATION_COMPACT_BREAKPOINT = 480;
+var PaginationContext = react.createContext(null);
+var usePaginationContext = /* @__PURE__ */ __name((label) => {
+  const ctx = react.useContext(PaginationContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Pagination> or <Pagination.Root>.`);
+  }
+  return ctx;
+}, "usePaginationContext");
+var ItemButton = /* @__PURE__ */ __name(({ type, selected, disabled, ariaLabel, ariaCurrent, label, onPress, testID }) => {
+  const colors = useThemeColors();
+  const isChevron = type === "prev" || type === "next" || type === "first" || type === "last";
+  const isInteractive = !disabled && type !== "ellipsis";
+  const size = px(colors.spacing["8"]);
+  if (type === "ellipsis") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        style: {
+          minWidth: size,
+          minHeight: size,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              color: colors.semantic.text.muted,
+              // Optical adjust so the dots sit on the row baseline.
+              marginTop: -2,
+              letterSpacing: 1
+            },
+            children: label
+          }
+        )
+      }
+    );
+  }
+  const baseStyle = {
+    minWidth: size,
+    height: size,
+    paddingHorizontal: px(colors.spacing["2"]),
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: px(colors.radius.md),
+    // Selected: filled pill in primary. Default: transparent. Press/hover
+    // deltas overlay this in the style fn below.
+    backgroundColor: selected ? colors.semantic.interactive.primary : "transparent",
+    // A 1px transparent border is reserved on every item so the layout
+    // stays stable when the selected one shows its accent border.
+    borderWidth: 1,
+    borderColor: selected ? colors.semantic.interactive.primary : "transparent",
+    opacity: disabled ? 0.35 : 1
+  };
+  const webExtras = reactNative.Platform.OS === "web" ? {
+    transitionProperty: "background-color, color, border-color",
+    transitionDuration: "120ms",
+    transitionTimingFunction: "cubic-bezier(0.2, 0, 0, 1)"
+  } : null;
+  const staticStyle = { ...baseStyle, ...webExtras ?? {} };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      role: "button",
+      accessibilityRole: "button",
+      accessibilityLabel: ariaLabel,
+      "aria-label": ariaLabel,
+      ...ariaCurrent ? { "aria-current": ariaCurrent } : {},
+      disabled,
+      "aria-disabled": disabled || void 0,
+      onPress: isInteractive ? onPress : void 0,
+      style: reactNative.Platform.OS === "web" ? (state) => {
+        const { pressed, hovered } = state;
+        const interactive = !selected && (pressed || hovered) ? colors.semantic.background.subtle : staticStyle.backgroundColor;
+        return { ...staticStyle, backgroundColor: interactive };
+      } : staticStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            fontFamily: colors.fontFamily.body,
+            fontSize: isChevron ? px(colors.fontSize.md) : px(colors.fontSize.sm),
+            lineHeight: px(colors.fontSize.md),
+            color: selected ? colors.semantic.text.inverted : disabled ? colors.semantic.text.muted : colors.semantic.text.default,
+            fontWeight: selected ? colors.fontWeight.semibold : colors.fontWeight.medium,
+            fontVariant: ["tabular-nums"],
+            // Chevron glyphs sit a hair high in most fonts.
+            marginTop: isChevron ? -1 : 0
+          },
+          children: label
+        }
+      )
+    }
+  );
+}, "ItemButton");
+var LiveRegion = /* @__PURE__ */ __name(({ message }) => {
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          width: 1,
+          height: 1,
+          overflow: "hidden",
+          opacity: 0
+        },
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityLiveRegion: "polite", children: message })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityLiveRegion: "polite", style: { width: 0, height: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children: message }) });
+}, "LiveRegion");
+var ItemsRenderer = /* @__PURE__ */ __name(({ items, onItemPress }) => {
+  const { labels, renderItem, dir } = usePaginationContext("Pagination.Items");
+  const elements = items.map((item, idx) => {
+    const key = `${item.type}-${item.page ?? idx}-${idx}`;
+    const ariaLabel = ariaLabelFor(item, labels);
+    const ariaCurrent = item.selected ? "page" : void 0;
+    const display = displayLabelFor(item, labels, dir);
+    const onPress = /* @__PURE__ */ __name(() => onItemPress(item), "onPress");
+    if (renderItem && item.type !== "ellipsis") {
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: renderItem({
+        type: item.type,
+        ...item.page !== void 0 ? { page: item.page } : {},
+        selected: item.selected ?? false,
+        disabled: item.disabled ?? false,
+        ariaLabel,
+        ...ariaCurrent ? { ariaCurrent } : {},
+        children: display,
+        onPress
+      }) }, key);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ItemButton,
+      {
+        type: item.type,
+        ...item.page !== void 0 ? { page: item.page } : {},
+        selected: item.selected ?? false,
+        disabled: item.disabled ?? false,
+        ariaLabel,
+        ...ariaCurrent ? { ariaCurrent } : {},
+        label: display,
+        onPress
+      },
+      key
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: elements });
+}, "ItemsRenderer");
+function ariaLabelFor(item, labels) {
+  switch (item.type) {
+    case "first":
+      return labels.first;
+    case "prev":
+      return labels.prev;
+    case "next":
+      return labels.next;
+    case "last":
+      return labels.last;
+    case "ellipsis":
+      return labels.ellipsis;
+    case "page":
+      return item.selected ? labels.currentPage : labels.gotoPage(item.page ?? 0);
+  }
+}
+__name(ariaLabelFor, "ariaLabelFor");
+function displayLabelFor(item, labels, dir) {
+  const flip = dir === "rtl";
+  switch (item.type) {
+    case "first":
+      return flip ? "\xBB" : "\xAB";
+    case "last":
+      return flip ? "\xAB" : "\xBB";
+    case "prev":
+      return flip ? "\u203A" : "\u2039";
+    case "next":
+      return flip ? "\u2039" : "\u203A";
+    case "ellipsis":
+      return "\u2026";
+    case "page":
+      return String(item.page ?? "");
+  }
+}
+__name(displayLabelFor, "displayLabelFor");
+var CompactView = /* @__PURE__ */ __name(({
+  onPrev,
+  onNext,
+  canPrev,
+  canNext,
+  pageLabel
+}) => {
+  const colors = useThemeColors();
+  const { labels, dir } = usePaginationContext("Pagination(compact)");
+  const flip = dir === "rtl";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: px(colors.spacing["1"]),
+        flexGrow: 1
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ItemButton,
+          {
+            type: "prev",
+            selected: false,
+            disabled: !canPrev,
+            ariaLabel: labels.prev,
+            label: flip ? "\u203A" : "\u2039",
+            onPress: onPrev
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: {
+              flexGrow: 1,
+              alignItems: "center",
+              justifyContent: "center",
+              paddingHorizontal: px(colors.spacing["3"])
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Text,
+              {
+                style: {
+                  fontFamily: colors.fontFamily.body,
+                  fontSize: px(colors.fontSize.sm),
+                  color: colors.semantic.text.default,
+                  fontWeight: colors.fontWeight.medium,
+                  fontVariant: ["tabular-nums"]
+                },
+                children: pageLabel
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ItemButton,
+          {
+            type: "next",
+            selected: false,
+            disabled: !canNext,
+            ariaLabel: labels.next,
+            label: flip ? "\u2039" : "\u203A",
+            onPress: onNext
+          }
+        )
+      ]
+    }
+  );
+}, "CompactView");
+var ANNOUNCE_DEBOUNCE_MS = 150;
+var PaginationRoot = /* @__PURE__ */ __name((props) => {
+  const {
+    page: controlledPage,
+    defaultPage = 1,
+    pageCount,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showFirstLast = false,
+    hideOnSinglePage = true,
+    variant = "auto",
+    showRange = false,
+    itemCount,
+    pageSize: pageSizeProp,
+    onPageChange,
+    renderItem,
+    dir = "ltr",
+    previousLabel,
+    nextLabel,
+    firstLabel,
+    lastLabel,
+    ariaLabel,
+    className,
+    testID,
+    children
+  } = props;
+  const { t } = useTranslation();
+  const colors = useThemeColors();
+  const { width } = reactNative.useWindowDimensions();
+  const [internalPageSize, setInternalPageSize] = react.useState(pageSizeProp);
+  react.useEffect(() => {
+    setInternalPageSize(pageSizeProp);
+  }, [pageSizeProp]);
+  const effectivePageSize = pageSizeProp ?? internalPageSize;
+  const labels = react.useMemo(
+    () => ({
+      prev: previousLabel ?? t("pagination.previous", { defaultValue: "Previous page" }),
+      next: nextLabel ?? t("pagination.next", { defaultValue: "Next page" }),
+      first: firstLabel ?? t("pagination.first", { defaultValue: "First page" }),
+      last: lastLabel ?? t("pagination.last", { defaultValue: "Last page" }),
+      ellipsis: t("pagination.ellipsis", { defaultValue: "More pages" }),
+      currentPage: t("pagination.currentPage", { defaultValue: "Current page" }),
+      gotoPage: /* @__PURE__ */ __name((n) => t("pagination.gotoPage", { page: n, defaultValue: `Go to page ${n}` }), "gotoPage"),
+      rangeFmt: /* @__PURE__ */ __name((from, to, total) => t("pagination.range", {
+        from,
+        to,
+        total,
+        defaultValue: `Showing ${from}\u2013${to} of ${total}`
+      }), "rangeFmt"),
+      pageOfFmt: /* @__PURE__ */ __name((p, total) => t("pagination.pageOf", { page: p, total, defaultValue: `Page ${p} of ${total}` }), "pageOfFmt"),
+      pageSize: t("pagination.pageSizeLabel", { defaultValue: "Items per page" }),
+      jumperLabel: t("pagination.jumperLabel", { defaultValue: "Go to page" }),
+      jumperPlaceholder: t("pagination.jumperPlaceholder", { defaultValue: "#" })
+    }),
+    [t, previousLabel, nextLabel, firstLabel, lastLabel]
+  );
+  const [announcement, setAnnouncement] = react.useState("");
+  const announceTimer = react.useRef(null);
+  react.useEffect(() => {
+    return () => {
+      if (announceTimer.current) {
+        clearTimeout(announceTimer.current);
+      }
+    };
+  }, []);
+  const handlePageChange = react.useCallback(
+    (next) => {
+      onPageChange?.(next, effectivePageSize !== void 0 ? { pageSize: effectivePageSize } : void 0);
+      if (announceTimer.current) {
+        clearTimeout(announceTimer.current);
+      }
+      announceTimer.current = setTimeout(() => {
+        setAnnouncement(labels.pageOfFmt(next, Math.max(1, pageCount)));
+      }, ANNOUNCE_DEBOUNCE_MS);
+    },
+    [onPageChange, effectivePageSize, labels, pageCount]
+  );
+  const setPageSize = react.useCallback(
+    (next) => {
+      if (pageSizeProp === void 0) {
+        setInternalPageSize(next);
+      }
+      onPageChange?.(1, { pageSize: next });
+    },
+    [onPageChange, pageSizeProp]
+  );
+  const pagination = usePagination({
+    ...controlledPage !== void 0 ? { page: controlledPage } : {},
+    defaultPage,
+    pageCount,
+    siblingCount,
+    boundaryCount,
+    showFirstLast,
+    onPageChange: handlePageChange
+  });
+  if (hideOnSinglePage && Math.max(1, pageCount) <= 1) {
+    return null;
+  }
+  const ctxValue = {
+    page: pagination.page,
+    pageCount: Math.max(1, pageCount),
+    pageSize: effectivePageSize,
+    itemCount,
+    siblingCount,
+    boundaryCount,
+    showFirstLast,
+    dir,
+    labels,
+    ...renderItem ? { renderItem } : {},
+    goToPage: pagination.goToPage,
+    setPageSize
+  };
+  if (children !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(PaginationContext.Provider, { value: ctxValue, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ...testID !== void 0 ? { testID } : {},
+          role: "navigation",
+          "aria-label": ariaLabel ?? t("pagination.ariaLabel", { defaultValue: "Pagination" }),
+          accessibilityLabel: ariaLabel ?? t("pagination.ariaLabel", { defaultValue: "Pagination" }),
+          accessible: true,
+          className: cn("flex-row items-center flex-wrap", className),
+          style: {
+            flexDirection: "row",
+            alignItems: "center",
+            flexWrap: "wrap",
+            rowGap: px(colors.spacing["2"]),
+            columnGap: px(colors.spacing["1"]),
+            direction: dir
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(LiveRegion, { message: announcement })
+    ] });
+  }
+  const isCompact = variant === "compact" || variant === "auto" && width > 0 && width < PAGINATION_COMPACT_BREAKPOINT;
+  const onItemPress = /* @__PURE__ */ __name((item) => {
+    if (item.disabled) {
+      return;
+    }
+    switch (item.type) {
+      case "first":
+        pagination.first();
+        return;
+      case "prev":
+        pagination.prev();
+        return;
+      case "next":
+        pagination.next();
+        return;
+      case "last":
+        pagination.last();
+        return;
+      case "page":
+        if (item.page !== void 0) {
+          pagination.goToPage(item.page);
+        }
+        return;
+      case "ellipsis":
+        return;
+    }
+  }, "onItemPress");
+  const showRangeBlock = showRange && itemCount !== void 0 && effectivePageSize !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationContext.Provider, { value: ctxValue, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        role: "navigation",
+        "aria-label": ariaLabel ?? t("pagination.ariaLabel", { defaultValue: "Pagination" }),
+        accessibilityLabel: ariaLabel ?? t("pagination.ariaLabel", { defaultValue: "Pagination" }),
+        accessible: true,
+        className: cn(isCompact ? "flex-col items-stretch" : "flex-row items-center flex-wrap", className),
+        style: {
+          // Compact mode lays out as a column so the Range/PageSize
+          // block falls below the controls instead of overflowing
+          // a phone-width row. Numbered mode wraps on overflow.
+          flexDirection: isCompact ? "column" : "row",
+          alignItems: isCompact ? "stretch" : "center",
+          flexWrap: isCompact ? "nowrap" : "wrap",
+          rowGap: px(colors.spacing["2"]),
+          columnGap: px(colors.spacing["1"]),
+          direction: dir
+        },
+        children: [
+          isCompact ? /* @__PURE__ */ jsxRuntime.jsx(
+            CompactView,
+            {
+              onPrev: pagination.prev,
+              onNext: pagination.next,
+              canPrev: pagination.canPrev,
+              canNext: pagination.canNext,
+              pageLabel: labels.pageOfFmt(pagination.page, Math.max(1, pageCount))
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(ItemsRenderer, { items: pagination.pages, onItemPress }),
+          showRangeBlock ? /* @__PURE__ */ jsxRuntime.jsx(PaginationRange, {}) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(LiveRegion, { message: announcement })
+  ] });
+}, "PaginationRoot");
+var CompoundActionButton = /* @__PURE__ */ __name(({
+  actionType,
+  asChild,
+  children,
+  testID
+}) => {
+  const ctx = usePaginationContext(`Pagination.${actionType[0].toUpperCase() + actionType.slice(1)}`);
+  const disabled = actionType === "prev" || actionType === "first" ? ctx.page <= 1 : ctx.page >= ctx.pageCount;
+  const onPress = /* @__PURE__ */ __name(() => {
+    if (disabled) {
+      return;
+    }
+    switch (actionType) {
+      case "first":
+        ctx.goToPage(1);
+        return;
+      case "prev":
+        ctx.goToPage(ctx.page - 1);
+        return;
+      case "next":
+        ctx.goToPage(ctx.page + 1);
+        return;
+      case "last":
+        ctx.goToPage(ctx.pageCount);
+        return;
+    }
+  }, "onPress");
+  const ariaLabel = actionType === "prev" ? ctx.labels.prev : actionType === "next" ? ctx.labels.next : actionType === "first" ? ctx.labels.first : ctx.labels.last;
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        "aria-label": ariaLabel,
+        "aria-disabled": disabled || void 0,
+        onPress,
+        onClick: onPress,
+        children
+      }
+    );
+  }
+  const fallbackGlyph = actionType === "prev" ? "\u2039" : actionType === "next" ? "\u203A" : actionType === "first" ? "\xAB" : "\xBB";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ItemButton,
+    {
+      type: actionType,
+      selected: false,
+      disabled,
+      ariaLabel,
+      label: children ?? fallbackGlyph,
+      onPress,
+      ...testID !== void 0 ? { testID } : {}
+    }
+  );
+}, "CompoundActionButton");
+var PaginationPrev = /* @__PURE__ */ __name(({ asChild, children, testID }) => CompoundActionButton({
+  actionType: "prev",
+  ...asChild !== void 0 ? { asChild } : {},
+  ...children !== void 0 ? { children } : {},
+  ...testID !== void 0 ? { testID } : {}
+}), "PaginationPrev");
+var PaginationNext = /* @__PURE__ */ __name(({ asChild, children, testID }) => CompoundActionButton({
+  actionType: "next",
+  ...asChild !== void 0 ? { asChild } : {},
+  ...children !== void 0 ? { children } : {},
+  ...testID !== void 0 ? { testID } : {}
+}), "PaginationNext");
+var PaginationFirst = /* @__PURE__ */ __name(({ asChild, children, testID }) => CompoundActionButton({
+  actionType: "first",
+  ...asChild !== void 0 ? { asChild } : {},
+  ...children !== void 0 ? { children } : {},
+  ...testID !== void 0 ? { testID } : {}
+}), "PaginationFirst");
+var PaginationLast = /* @__PURE__ */ __name(({ asChild, children, testID }) => CompoundActionButton({
+  actionType: "last",
+  ...asChild !== void 0 ? { asChild } : {},
+  ...children !== void 0 ? { children } : {},
+  ...testID !== void 0 ? { testID } : {}
+}), "PaginationLast");
+var PaginationItem = /* @__PURE__ */ __name(({
+  page,
+  asChild,
+  children,
+  testID
+}) => {
+  const ctx = usePaginationContext("Pagination.Item");
+  const selected = page === ctx.page;
+  const onPress = /* @__PURE__ */ __name(() => ctx.goToPage(page), "onPress");
+  const ariaLabel = selected ? ctx.labels.currentPage : ctx.labels.gotoPage(page);
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        "aria-label": ariaLabel,
+        ...selected ? { "aria-current": "page" } : {},
+        onPress,
+        onClick: onPress,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ItemButton,
+    {
+      type: "page",
+      page,
+      selected,
+      disabled: false,
+      ariaLabel,
+      ...selected ? { ariaCurrent: "page" } : {},
+      label: children ?? String(page),
+      onPress,
+      ...testID !== void 0 ? { testID } : {}
+    }
+  );
+}, "PaginationItem");
+var PaginationItems = /* @__PURE__ */ __name(({ children }) => {
+  const ctx = usePaginationContext("Pagination.Items");
+  const result = usePagination({
+    page: ctx.page,
+    pageCount: ctx.pageCount,
+    siblingCount: ctx.siblingCount,
+    boundaryCount: ctx.boundaryCount,
+    showFirstLast: false,
+    showPrevNext: false
+  });
+  if (children !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ItemsRenderer,
+    {
+      items: result.pages,
+      onItemPress: (item) => {
+        if (item.type === "page" && item.page !== void 0) {
+          ctx.goToPage(item.page);
+        }
+      }
+    }
+  );
+}, "PaginationItems");
+var PaginationEllipsis = /* @__PURE__ */ __name(({ children }) => {
+  const ctx = usePaginationContext("Pagination.Ellipsis");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ItemButton,
+    {
+      type: "ellipsis",
+      selected: false,
+      disabled: true,
+      label: children ?? "\u2026",
+      ariaLabel: ctx.labels.ellipsis,
+      onPress: () => {
+      }
+    }
+  );
+}, "PaginationEllipsis");
+var PaginationRange = /* @__PURE__ */ __name(() => {
+  const ctx = usePaginationContext("Pagination.Range");
+  const colors = useThemeColors();
+  if (ctx.itemCount === void 0 || ctx.pageSize === void 0) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("<Pagination.Range> requires both `itemCount` and `pageSize` on <Pagination>.");
+    }
+    return null;
+  }
+  const from = (ctx.page - 1) * ctx.pageSize + 1;
+  const to = Math.min(ctx.itemCount, ctx.page * ctx.pageSize);
+  const message = ctx.labels.rangeFmt(from, to, ctx.itemCount);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      role: "status",
+      "aria-live": "polite",
+      style: {
+        fontFamily: colors.fontFamily.body,
+        fontSize: px(colors.fontSize.sm),
+        color: colors.semantic.text.muted,
+        fontVariant: ["tabular-nums"],
+        paddingHorizontal: px(colors.spacing["2"]),
+        // Sits on the same baseline as the 32px buttons.
+        lineHeight: px(colors.spacing["8"])
+      },
+      children: message
+    }
+  );
+}, "PaginationRange");
+var PaginationPageSize = /* @__PURE__ */ __name(({ options, testID }) => {
+  const ctx = usePaginationContext("Pagination.PageSize");
+  const colors = useThemeColors();
+  const value = ctx.pageSize !== void 0 ? String(ctx.pageSize) : "";
+  const selectOptions = react.useMemo(
+    () => options.map((n) => ({ value: String(n), label: String(n) })),
+    [options]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: px(colors.spacing["2"])
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              color: colors.semantic.text.muted
+            },
+            children: ctx.labels.pageSize
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Select,
+          {
+            ...testID !== void 0 ? { testID } : {},
+            "aria-label": ctx.labels.pageSize,
+            options: selectOptions,
+            value,
+            onChange: (v) => {
+              const n = Number(v);
+              if (Number.isFinite(n) && n > 0) {
+                ctx.setPageSize(n);
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+}, "PaginationPageSize");
+var PaginationJumper = /* @__PURE__ */ __name(({
+  showLabel = false,
+  label,
+  placeholder,
+  inputWidth = 56,
+  testID
+}) => {
+  const ctx = usePaginationContext("Pagination.Jumper");
+  const colors = useThemeColors();
+  const [draft, setDraft] = react.useState("");
+  const [focused, setFocused] = react.useState(false);
+  const [hovered, setHovered] = react.useState(false);
+  const visibleLabel = label ?? ctx.labels.jumperLabel;
+  const placeholderText = placeholder ?? ctx.labels.jumperPlaceholder;
+  const submit = /* @__PURE__ */ __name(() => {
+    const trimmed = draft.trim();
+    if (trimmed === "") {
+      return;
+    }
+    const n = Number(trimmed);
+    if (!Number.isFinite(n) || n < 1) {
+      setDraft("");
+      return;
+    }
+    const clamped = Math.min(Math.max(1, Math.floor(n)), ctx.pageCount);
+    ctx.goToPage(clamped);
+    setDraft("");
+  }, "submit");
+  const borderColor = focused ? colors.semantic.interactive.primary : hovered ? colors.semantic.border.strong : colors.semantic.border.default;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: px(colors.spacing["2"])
+      },
+      children: [
+        showLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              color: colors.semantic.text.muted
+            },
+            children: visibleLabel
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            onPointerEnter: reactNative.Platform.OS === "web" ? () => setHovered(true) : void 0,
+            onPointerLeave: reactNative.Platform.OS === "web" ? () => setHovered(false) : void 0,
+            style: {
+              width: inputWidth,
+              height: px(colors.spacing["8"]),
+              borderWidth: 1,
+              borderColor,
+              borderRadius: px(colors.radius.md),
+              backgroundColor: colors.semantic.background.elevated,
+              paddingHorizontal: px(colors.spacing["2"]),
+              justifyContent: "center",
+              // Web-only properties (silently dropped on native).
+              ...focused ? {
+                boxShadow: `0 0 0 3px ${withAlpha(colors.semantic.interactive.primary, 0.15)}`
+              } : null,
+              transitionProperty: "border-color, box-shadow",
+              transitionDuration: "120ms",
+              transitionTimingFunction: "cubic-bezier(0.2, 0, 0, 1)"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.TextInput,
+              {
+                ...testID !== void 0 ? { testID } : {},
+                value: draft,
+                onChangeText: setDraft,
+                onSubmitEditing: submit,
+                onBlur: () => {
+                  setFocused(false);
+                  submit();
+                },
+                onFocus: () => setFocused(true),
+                keyboardType: "number-pad",
+                inputMode: "numeric",
+                placeholder: placeholderText,
+                placeholderTextColor: colors.semantic.text.muted,
+                "aria-label": visibleLabel,
+                accessibilityLabel: visibleLabel,
+                returnKeyType: "go",
+                selectTextOnFocus: true,
+                style: {
+                  fontFamily: colors.fontFamily.body,
+                  fontSize: px(colors.fontSize.sm),
+                  color: colors.semantic.text.default,
+                  fontVariant: ["tabular-nums"],
+                  textAlign: "center",
+                  // Strip the browser's default outline — we draw our own
+                  // focus ring on the wrapper.
+                  ...reactNative.Platform.OS === "web" ? { outline: "none" } : null
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, "PaginationJumper");
+function withAlpha(color, alpha) {
+  if (color.startsWith("#") && (color.length === 7 || color.length === 4)) {
+    const expanded = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
+    const r = Number.parseInt(expanded.slice(1, 3), 16);
+    const g = Number.parseInt(expanded.slice(3, 5), 16);
+    const b = Number.parseInt(expanded.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  return color;
+}
+__name(withAlpha, "withAlpha");
+var Pagination = Object.assign(PaginationRoot, {
+  Items: PaginationItems,
+  Item: PaginationItem,
+  Prev: PaginationPrev,
+  Next: PaginationNext,
+  First: PaginationFirst,
+  Last: PaginationLast,
+  Ellipsis: PaginationEllipsis,
+  Range: PaginationRange,
+  PageSize: PaginationPageSize,
+  Jumper: PaginationJumper
+});
+
+exports.PAGINATION_COMPACT_BREAKPOINT = PAGINATION_COMPACT_BREAKPOINT;
+exports.Pagination = Pagination;
+exports.usePagination = usePagination;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map