@nori-ui/core 0.0.5 → 1.0.2

package/dist/components/Breadcrumb/index.cjs

@@ -0,0 +1,1939 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var jsxRuntime = require('nativewind/jsx-runtime');
+
+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 PopoverContext = react.createContext(null);
+var usePopoverContext = /* @__PURE__ */ __name((label) => {
+  const ctx = react.useContext(PopoverContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Popover>.`);
+  }
+  return ctx;
+}, "usePopoverContext");
+var PopoverRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [inner, setInner] = react.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = react.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const baseId = react.useId();
+  const triggerRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const [triggerRect, setTriggerRect] = react.useState(null);
+  const measureTrigger = react.useCallback(() => {
+    const node = triggerRef.current;
+    if (!node || typeof node.getBoundingClientRect !== "function") {
+      return;
+    }
+    const rect = node.getBoundingClientRect();
+    setTriggerRect({ top: rect.top, left: rect.left, width: rect.width, height: rect.height });
+  }, []);
+  const ctxValue = {
+    open: current,
+    setOpen,
+    contentId: `${baseId}-content`,
+    triggerRef,
+    contentRef,
+    triggerRect,
+    measureTrigger
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: ctxValue, children });
+}, "PopoverRoot");
+var PopoverTrigger = /* @__PURE__ */ __name(({ asChild = true, children, className, testID }) => {
+  const ctx = usePopoverContext("PopoverTrigger");
+  const onPress = react.useCallback(() => {
+    ctx.measureTrigger();
+    ctx.setOpen(!ctx.open);
+  }, [ctx]);
+  if (asChild && react.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      ctx.measureTrigger();
+      ctx.setOpen(!ctx.open);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          ctx.triggerRef.current = node;
+        },
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open,
+        "aria-controls": ctx.contentId,
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        ctx.triggerRef.current = node;
+      },
+      onPress,
+      ...{
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open,
+        "aria-controls": ctx.contentId
+      },
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: wrapStringChildren(children)
+    }
+  );
+}, "PopoverTrigger");
+function wrapStringChildren(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children });
+  }
+  return children;
+}
+__name(wrapStringChildren, "wrapStringChildren");
+var GAP = 4;
+var MIN_WIDTH = 200;
+var VIEWPORT_MARGIN = 8;
+function computePosition(rect, side, align, contentSize) {
+  const cw = contentSize?.width ?? MIN_WIDTH;
+  const ch = contentSize?.height ?? 0;
+  let top = 0;
+  let left = 0;
+  switch (side) {
+    case "top":
+      top = rect.top - GAP - ch;
+      break;
+    case "bottom":
+      top = rect.top + rect.height + GAP;
+      break;
+    case "left":
+      left = rect.left - GAP - cw;
+      break;
+    case "right":
+      left = rect.left + rect.width + GAP;
+      break;
+  }
+  if (side === "top" || side === "bottom") {
+    switch (align) {
+      case "start":
+        left = rect.left;
+        break;
+      case "center":
+        left = rect.left + rect.width / 2 - cw / 2;
+        break;
+      case "end":
+        left = rect.left + rect.width - cw;
+        break;
+    }
+  } else {
+    switch (align) {
+      case "start":
+        top = rect.top;
+        break;
+      case "center":
+        top = rect.top + rect.height / 2 - ch / 2;
+        break;
+      case "end":
+        top = rect.top + rect.height - ch;
+        break;
+    }
+  }
+  return { top, left };
+}
+__name(computePosition, "computePosition");
+var PopoverContent = /* @__PURE__ */ __name(({
+  side = "bottom",
+  align = "center",
+  children,
+  className,
+  testID,
+  ...rest
+}) => {
+  const ctx = usePopoverContext("PopoverContent");
+  const colors = useThemeColors();
+  const ariaLabel = rest["aria-label"];
+  const [contentSize, setContentSize] = react.useState(null);
+  react.useEffect(() => {
+    if (!ctx.open) {
+      return;
+    }
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    if (typeof document === "undefined") {
+      return;
+    }
+    ctx.measureTrigger();
+    const onDocMouseDown = /* @__PURE__ */ __name((event) => {
+      const target = event.target;
+      const trigger = ctx.triggerRef.current;
+      const content2 = ctx.contentRef.current;
+      if (trigger?.contains(target)) {
+        return;
+      }
+      if (content2?.contains(target)) {
+        return;
+      }
+      ctx.setOpen(false);
+    }, "onDocMouseDown");
+    const onKeyDown = /* @__PURE__ */ __name((event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        ctx.setOpen(false);
+      }
+    }, "onKeyDown");
+    const onResize = /* @__PURE__ */ __name(() => ctx.measureTrigger(), "onResize");
+    const onScroll = /* @__PURE__ */ __name(() => ctx.measureTrigger(), "onScroll");
+    document.addEventListener("mousedown", onDocMouseDown);
+    document.addEventListener("keydown", onKeyDown);
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", onDocMouseDown);
+      document.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [ctx.open, ctx.measureTrigger, ctx.setOpen, ctx.triggerRef, ctx.contentRef]);
+  react.useEffect(() => {
+    if (!ctx.open) {
+      setContentSize(null);
+    }
+  }, [ctx.open]);
+  if (!ctx.open) {
+    return null;
+  }
+  const position = ctx.triggerRect ? computePosition(ctx.triggerRect, side, align, contentSize) : null;
+  const viewportWidth = reactNative.Dimensions.get("window").width;
+  const maxContentWidth = Math.max(MIN_WIDTH, viewportWidth - VIEWPORT_MARGIN * 2);
+  const contentBaseStyle = {
+    minWidth: MIN_WIDTH,
+    maxWidth: maxContentWidth,
+    borderRadius: px(colors.radius.lg),
+    borderWidth: 1,
+    borderColor: colors.semantic.border.default,
+    backgroundColor: colors.semantic.background.elevated,
+    padding: px(colors.spacing["4"]),
+    ...reactNative.Platform.OS === "web" ? {
+      boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
+      // Subtle scale-in. Skipped on native (do nothing fancy there).
+      transition: "opacity 120ms ease-out, transform 120ms ease-out",
+      transform: "scale(1)",
+      opacity: 1
+    } : { elevation: 8 }
+  };
+  const measuredWidth = contentSize?.width ?? maxContentWidth;
+  const clampedLeft = position ? Math.min(
+    Math.max(VIEWPORT_MARGIN, position.left),
+    Math.max(VIEWPORT_MARGIN, viewportWidth - measuredWidth - VIEWPORT_MARGIN)
+  ) : 0;
+  const positionedStyle = reactNative.Platform.OS === "web" ? position ? {
+    position: "fixed",
+    top: position.top,
+    left: clampedLeft,
+    zIndex: 50
+  } : {
+    // Trigger not yet measured — render off-screen for a
+    // frame to avoid a flash at (0,0).
+    position: "fixed",
+    top: -9999,
+    left: -9999,
+    zIndex: 50
+  } : {};
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ref: (node) => {
+        ctx.contentRef.current = node;
+        if (reactNative.Platform.OS !== "web") {
+          return;
+        }
+        if (!node) {
+          return;
+        }
+        if (typeof node.getBoundingClientRect !== "function") {
+          return;
+        }
+        const rect = node.getBoundingClientRect();
+        if (!contentSize || contentSize.width !== rect.width || contentSize.height !== rect.height) {
+          setContentSize({ width: rect.width, height: rect.height });
+        }
+      },
+      ...{
+        role: "dialog",
+        id: ctx.contentId,
+        ...ariaLabel !== void 0 ? { "aria-label": ariaLabel, accessibilityLabel: ariaLabel } : {}
+      },
+      ...testID !== void 0 ? { testID } : {},
+      className: cn(
+        "rounded-lg border border-semantic-border-default bg-semantic-background-elevated",
+        className
+      ),
+      style: [contentBaseStyle, positionedStyle],
+      children
+    }
+  );
+  if (reactNative.Platform.OS === "web") {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: ctx.open, transparent: true, animationType: "fade", onRequestClose: () => ctx.setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      accessibilityRole: "none",
+      "aria-hidden": true,
+      onPress: () => ctx.setOpen(false),
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "transparent"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          onPress: (event) => event.stopPropagation?.(),
+          style: {
+            position: "absolute",
+            top: ctx.triggerRect ? side === "top" ? Math.max(VIEWPORT_MARGIN, ctx.triggerRect.top - GAP - 80) : ctx.triggerRect.top + ctx.triggerRect.height + GAP : 80,
+            // Clamp horizontally so a wide popover near the
+            // right edge can still grow leftward without
+            // overflowing the screen.
+            left: ctx.triggerRect ? Math.min(
+              Math.max(VIEWPORT_MARGIN, ctx.triggerRect.left),
+              Math.max(VIEWPORT_MARGIN, viewportWidth - measuredWidth - VIEWPORT_MARGIN)
+            ) : VIEWPORT_MARGIN * 2
+          },
+          children: content
+        }
+      )
+    }
+  ) });
+}, "PopoverContent");
+var Popover = Object.assign(PopoverRoot, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent
+});
+var BreadcrumbContext = react.createContext(null);
+var useBreadcrumbContext = /* @__PURE__ */ __name((label) => {
+  const ctx = react.useContext(BreadcrumbContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Breadcrumb>.`);
+  }
+  return ctx;
+}, "useBreadcrumbContext");
+var DEFAULT_ITEMS_BEFORE = 1;
+var DEFAULT_ITEMS_AFTER = 1;
+var COMPOUND_KIND_KEY = "__nori_breadcrumb_kind__";
+function tagComponent(component, kind) {
+  component[COMPOUND_KIND_KEY] = kind;
+  return component;
+}
+__name(tagComponent, "tagComponent");
+function getCompoundKind(node) {
+  if (!react.isValidElement(node)) {
+    return void 0;
+  }
+  const type = node.type;
+  const tagged = type?.[COMPOUND_KIND_KEY];
+  return tagged === "item" || tagged === "separator" ? tagged : void 0;
+}
+__name(getCompoundKind, "getCompoundKind");
+var DefaultChevron = /* @__PURE__ */ __name(({ dir }) => {
+  const colors = useThemeColors();
+  const flipped = dir === "rtl";
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: colors.semantic.text.muted,
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        style: { transform: flipped ? "scaleX(-1)" : void 0, flexShrink: 0 },
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        fontSize: 14,
+        lineHeight: 20,
+        color: colors.semantic.text.muted,
+        transform: flipped ? [{ scaleX: -1 }] : void 0
+      },
+      children: "\u203A"
+    }
+  );
+}, "DefaultChevron");
+var SeparatorText = /* @__PURE__ */ __name(({ children }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        fontSize: px(colors.fontSize.sm),
+        lineHeight: px(colors.fontSize.md) * 1.4,
+        color: colors.semantic.text.muted,
+        fontFamily: colors.fontFamily.body,
+        paddingHorizontal: 2
+      },
+      children
+    }
+  );
+}, "SeparatorText");
+function renderSeparator(separator, ctx) {
+  if (separator === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(DefaultChevron, { dir: ctx.dir });
+  }
+  if (typeof separator === "function") {
+    return separator(ctx);
+  }
+  if (typeof separator === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(SeparatorText, { children: separator });
+  }
+  return separator;
+}
+__name(renderSeparator, "renderSeparator");
+function useOverflowFit({
+  enabled,
+  itemCount,
+  itemsBeforeCollapse,
+  itemsAfterCollapse
+}) {
+  const [containerWidth, setContainerWidth] = react.useState(null);
+  const itemWidthsRef = react.useRef(/* @__PURE__ */ new Map());
+  const ellipsisWidthRef = react.useRef(0);
+  const separatorWidthRef = react.useRef(0);
+  const [widthsTick, setWidthsTick] = react.useState(0);
+  const onContainerLayout = react.useCallback((event) => {
+    const w = event.nativeEvent.layout.width;
+    setContainerWidth((prev) => prev !== null && Math.abs(prev - w) < 0.5 ? prev : w);
+  }, []);
+  const onItemLayout = react.useCallback(
+    (index) => (event) => {
+      const w = event.nativeEvent.layout.width;
+      const prev = itemWidthsRef.current.get(index);
+      if (prev === void 0 || Math.abs(prev - w) >= 0.5) {
+        itemWidthsRef.current.set(index, w);
+        setWidthsTick((t) => t + 1);
+      }
+    },
+    []
+  );
+  const onEllipsisLayout = react.useCallback((event) => {
+    const w = event.nativeEvent.layout.width;
+    if (Math.abs(ellipsisWidthRef.current - w) >= 0.5) {
+      ellipsisWidthRef.current = w;
+      setWidthsTick((t) => t + 1);
+    }
+  }, []);
+  const onSeparatorLayout = react.useCallback((event) => {
+    const w = event.nativeEvent.layout.width;
+    if (Math.abs(separatorWidthRef.current - w) >= 0.5) {
+      separatorWidthRef.current = w;
+      setWidthsTick((t) => t + 1);
+    }
+  }, []);
+  const visibleIndices = react.useMemo(() => {
+    const all = /* @__PURE__ */ new Set();
+    for (let i = 0; i < itemCount; i += 1) {
+      all.add(i);
+    }
+    if (!enabled || containerWidth === null || itemCount === 0) {
+      return all;
+    }
+    const widths = itemWidthsRef.current;
+    if (widths.size < itemCount) {
+      return all;
+    }
+    const sep = separatorWidthRef.current;
+    const ell = ellipsisWidthRef.current;
+    let total = 0;
+    for (let i = 0; i < itemCount; i += 1) {
+      total += widths.get(i) ?? 0;
+    }
+    total += sep * Math.max(0, itemCount - 1);
+    if (total <= containerWidth) {
+      return all;
+    }
+    const before = Math.max(0, Math.min(itemsBeforeCollapse, itemCount));
+    const after = Math.max(0, Math.min(itemsAfterCollapse, itemCount - before));
+    const anchorIndices = /* @__PURE__ */ new Set();
+    for (let i = 0; i < before; i += 1) {
+      anchorIndices.add(i);
+    }
+    for (let i = itemCount - after; i < itemCount; i += 1) {
+      anchorIndices.add(i);
+    }
+    let used = 0;
+    for (const idx of anchorIndices) {
+      used += widths.get(idx) ?? 0;
+    }
+    used += ell;
+    const sepCount = Math.max(0, anchorIndices.size + 1 - 1);
+    used += sep * sepCount;
+    if (used > containerWidth) {
+      const beforeIdx = [];
+      for (let i = 0; i < before; i += 1) {
+        beforeIdx.push(i);
+      }
+      const afterIdx = [];
+      for (let i = itemCount - after; i < itemCount; i += 1) {
+        afterIdx.push(i);
+      }
+      const minBefore = before > 0 ? 1 : 0;
+      const minAfter = after > 0 ? 1 : 0;
+      while (used > containerWidth && (beforeIdx.length > minBefore || afterIdx.length > minAfter)) {
+        if (beforeIdx.length > minBefore) {
+          const dropped = beforeIdx.pop();
+          if (dropped !== void 0) {
+            used -= (widths.get(dropped) ?? 0) + sep;
+            anchorIndices.delete(dropped);
+          }
+        }
+        if (used <= containerWidth) {
+          break;
+        }
+        if (afterIdx.length > minAfter) {
+          const dropped = afterIdx.shift();
+          if (dropped !== void 0) {
+            used -= (widths.get(dropped) ?? 0) + sep;
+            anchorIndices.delete(dropped);
+          }
+        }
+      }
+      return anchorIndices;
+    }
+    let leftCursor = before;
+    let rightCursor = itemCount - after - 1;
+    while (leftCursor <= rightCursor) {
+      const w = widths.get(leftCursor) ?? 0;
+      if (used + w + sep <= containerWidth) {
+        anchorIndices.add(leftCursor);
+        used += w + sep;
+        leftCursor += 1;
+      } else {
+        break;
+      }
+      if (leftCursor > rightCursor) {
+        break;
+      }
+      const w2 = widths.get(rightCursor) ?? 0;
+      if (used + w2 + sep <= containerWidth) {
+        anchorIndices.add(rightCursor);
+        used += w2 + sep;
+        rightCursor -= 1;
+      } else {
+        break;
+      }
+    }
+    return anchorIndices;
+  }, [containerWidth, itemCount, itemsBeforeCollapse, itemsAfterCollapse, enabled, widthsTick]);
+  const ready = !enabled || containerWidth !== null && itemWidthsRef.current.size >= itemCount;
+  return {
+    visibleIndices,
+    ready,
+    onContainerLayout,
+    onItemLayout,
+    onEllipsisLayout,
+    onSeparatorLayout
+  };
+}
+__name(useOverflowFit, "useOverflowFit");
+function applyCountCollapse(items, maxItems, before, after) {
+  if (!maxItems || items.length <= maxItems) {
+    return { visible: items, hidden: [], collapseAt: -1 };
+  }
+  const beforeArr = items.slice(0, Math.max(0, Math.min(before, items.length)));
+  const afterArr = after > 0 ? items.slice(Math.max(beforeArr.length, items.length - after)) : [];
+  const hidden = items.slice(beforeArr.length, items.length - afterArr.length);
+  const visible = [...beforeArr, ...afterArr];
+  return { visible, hidden, collapseAt: beforeArr.length };
+}
+__name(applyCountCollapse, "applyCountCollapse");
+function getBreadcrumbJsonLd(items) {
+  const elements = items.map((it, idx) => {
+    const name = typeof it.label === "string" ? it.label : void 0;
+    if (!name) {
+      return null;
+    }
+    const entry = {
+      "@type": "ListItem",
+      position: idx + 1,
+      name
+    };
+    if (it.href) {
+      entry.item = it.href;
+    }
+    return entry;
+  }).filter((x) => x !== null);
+  return JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: elements
+  });
+}
+__name(getBreadcrumbJsonLd, "getBreadcrumbJsonLd");
+function useBreadcrumbJsonLdInjection(items, enabled) {
+  react.useEffect(() => {
+    if (!enabled || reactNative.Platform.OS !== "web" || typeof document === "undefined") {
+      return;
+    }
+    const json = getBreadcrumbJsonLd(items);
+    if (!json.includes('"itemListElement":[{')) {
+      return;
+    }
+    const script = document.createElement("script");
+    script.type = "application/ld+json";
+    script.textContent = json;
+    script.setAttribute("data-nori-breadcrumb", "true");
+    document.head.appendChild(script);
+    return () => {
+      if (script.parentNode === document.head) {
+        document.head.removeChild(script);
+      }
+    };
+  }, [items, enabled]);
+}
+__name(useBreadcrumbJsonLdInjection, "useBreadcrumbJsonLdInjection");
+function truncateString(input, max) {
+  if (max <= 0 || input.length <= max) {
+    return input;
+  }
+  if (max <= 1) {
+    return "\u2026";
+  }
+  return `${input.slice(0, max - 1)}\u2026`;
+}
+__name(truncateString, "truncateString");
+var BreadcrumbRoot = /* @__PURE__ */ __name(({
+  items,
+  separator,
+  maxItems,
+  itemsBeforeCollapse = DEFAULT_ITEMS_BEFORE,
+  itemsAfterCollapse = DEFAULT_ITEMS_AFTER,
+  collapseOnOverflow,
+  expandBehavior,
+  expandLabel,
+  ellipsisLabel,
+  currentPageLabel,
+  siblingMenuLabel,
+  ariaLabel,
+  schemaOrg,
+  dir = "ltr",
+  maxLabelLength = 0,
+  children,
+  className,
+  testID
+}) => {
+  const { t } = useTranslation();
+  const colors = useThemeColors();
+  const resolvedAriaLabel = ariaLabel ?? t("breadcrumb.ariaLabel", { defaultValue: "Breadcrumb" });
+  const resolvedExpandLabel = expandLabel ?? t("breadcrumb.expandLabel", { defaultValue: "Show full path" });
+  const resolvedEllipsisLabel = ellipsisLabel ?? t("breadcrumb.ellipsisLabel", { defaultValue: "More" });
+  const resolvedCurrentPageLabel = currentPageLabel ?? t("breadcrumb.currentPageLabel", { defaultValue: "Current page" });
+  const resolvedSiblingMenuLabel = siblingMenuLabel ?? t("breadcrumb.siblingMenuLabel", { defaultValue: "Open sibling pages" });
+  const resolvedExpandBehavior = expandBehavior ?? (reactNative.Platform.OS === "web" ? "inline" : "menu");
+  if (items && items.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BreadcrumbItemsRenderer,
+      {
+        items,
+        separator,
+        maxItems,
+        itemsBeforeCollapse,
+        itemsAfterCollapse,
+        collapseOnOverflow: collapseOnOverflow ?? true,
+        expandBehavior: resolvedExpandBehavior,
+        expandLabel: resolvedExpandLabel,
+        ellipsisLabel: resolvedEllipsisLabel,
+        currentPageLabel: resolvedCurrentPageLabel,
+        siblingMenuLabel: resolvedSiblingMenuLabel,
+        ariaLabel: resolvedAriaLabel,
+        schemaOrg,
+        dir,
+        maxLabelLength,
+        ...className !== void 0 ? { className } : {},
+        ...testID !== void 0 ? { testID } : {}
+      }
+    );
+  }
+  const ctxValue = {
+    separator: separator ?? "",
+    dir,
+    currentPageLabel: resolvedCurrentPageLabel,
+    siblingMenuLabel: resolvedSiblingMenuLabel,
+    maxLabelLength
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      role: "navigation",
+      "aria-label": resolvedAriaLabel,
+      accessible: true,
+      accessibilityLabel: resolvedAriaLabel,
+      className: cn("flex-row items-center", className),
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        direction: dir,
+        fontFamily: colors.fontFamily.body
+      },
+      children
+    }
+  ) });
+}, "BreadcrumbRoot");
+var BreadcrumbItemsRenderer = /* @__PURE__ */ __name(({
+  items,
+  separator,
+  maxItems,
+  itemsBeforeCollapse,
+  itemsAfterCollapse,
+  collapseOnOverflow,
+  expandBehavior,
+  expandLabel,
+  ellipsisLabel,
+  currentPageLabel,
+  siblingMenuLabel,
+  ariaLabel,
+  schemaOrg,
+  dir,
+  maxLabelLength,
+  className,
+  testID
+}) => {
+  const [inlineExpanded, setInlineExpanded] = react.useState(false);
+  const normalizedItems = react.useMemo(() => {
+    if (items.length === 0) {
+      return items;
+    }
+    const anyCurrent = items.some((it) => it.current);
+    if (anyCurrent) {
+      return items;
+    }
+    const last = items[items.length - 1];
+    if (!last) {
+      return items;
+    }
+    const out = [...items];
+    out[out.length - 1] = { ...last, current: true };
+    return out;
+  }, [items]);
+  useBreadcrumbJsonLdInjection(normalizedItems, schemaOrg !== false);
+  const countCollapse = react.useMemo(
+    () => applyCountCollapse(
+      normalizedItems,
+      inlineExpanded ? void 0 : maxItems,
+      itemsBeforeCollapse,
+      itemsAfterCollapse
+    ),
+    [normalizedItems, maxItems, itemsBeforeCollapse, itemsAfterCollapse, inlineExpanded]
+  );
+  const widthFit = useOverflowFit({
+    enabled: collapseOnOverflow && expandBehavior !== "scroll" && !inlineExpanded,
+    itemCount: countCollapse.visible.length,
+    itemsBeforeCollapse,
+    itemsAfterCollapse
+  });
+  const widthHiddenItems = react.useMemo(() => {
+    if (!collapseOnOverflow || expandBehavior === "scroll" || inlineExpanded) {
+      return [];
+    }
+    return countCollapse.visible.filter((_, idx) => !widthFit.visibleIndices.has(idx));
+  }, [collapseOnOverflow, expandBehavior, inlineExpanded, countCollapse.visible, widthFit.visibleIndices]);
+  const allHiddenItems = react.useMemo(() => {
+    if (inlineExpanded) {
+      return [];
+    }
+    return [...countCollapse.hidden, ...widthHiddenItems];
+  }, [countCollapse.hidden, widthHiddenItems, inlineExpanded]);
+  const visibleItemsForRender = react.useMemo(() => {
+    if (inlineExpanded) {
+      return normalizedItems;
+    }
+    return countCollapse.visible.filter(
+      (_, idx) => collapseOnOverflow && expandBehavior !== "scroll" ? widthFit.visibleIndices.has(idx) : true
+    );
+  }, [
+    countCollapse.visible,
+    widthFit.visibleIndices,
+    collapseOnOverflow,
+    expandBehavior,
+    inlineExpanded,
+    normalizedItems
+  ]);
+  const ellipsisInsertAt = react.useMemo(() => {
+    if (inlineExpanded || allHiddenItems.length === 0) {
+      return -1;
+    }
+    return Math.min(itemsBeforeCollapse, visibleItemsForRender.length);
+  }, [allHiddenItems.length, inlineExpanded, visibleItemsForRender.length, itemsBeforeCollapse]);
+  const renderedCells = [];
+  const measurementCells = [];
+  visibleItemsForRender.forEach((item, idx) => {
+    if (idx === ellipsisInsertAt && allHiddenItems.length > 0) {
+      renderedCells.push(
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          BreadcrumbEllipsisInternal,
+          {
+            ellipsisLabel,
+            expandLabel,
+            expandBehavior,
+            hiddenItems: allHiddenItems,
+            onExpandInline: () => setInlineExpanded(true)
+          }
+        ) }, "__ellipsis__")
+      );
+      renderedCells.push(
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderSeparator(separator, {
+          fromIndex: idx - 1,
+          visibleCount: visibleItemsForRender.length + 1,
+          dir
+        }) }, "__sep_ellipsis__")
+      );
+    }
+    const itemKey = item.key ?? `item-${normalizedItems.indexOf(item)}`;
+    renderedCells.push(
+      /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        BreadcrumbItemRenderer,
+        {
+          item,
+          currentPageLabel,
+          siblingMenuLabel,
+          maxLabelLength
+        }
+      ) }, itemKey)
+    );
+    const isLast = idx === visibleItemsForRender.length - 1;
+    if (!isLast) {
+      renderedCells.push(
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderSeparator(separator, {
+          fromIndex: idx,
+          visibleCount: visibleItemsForRender.length,
+          dir
+        }) }, `sep-${itemKey}`)
+      );
+    }
+  });
+  if (collapseOnOverflow && expandBehavior !== "scroll") {
+    countCollapse.visible.forEach((item, idx) => {
+      const itemKey = item.key ?? `m-${idx}`;
+      measurementCells.push(
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { onLayout: widthFit.onItemLayout(idx), children: /* @__PURE__ */ jsxRuntime.jsx(
+          BreadcrumbItemRenderer,
+          {
+            item,
+            currentPageLabel,
+            siblingMenuLabel,
+            maxLabelLength
+          }
+        ) }, itemKey)
+      );
+    });
+    measurementCells.push(
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { onLayout: widthFit.onSeparatorLayout, children: renderSeparator(separator, {
+        fromIndex: 0,
+        visibleCount: countCollapse.visible.length,
+        dir
+      }) }, "__m_sep__")
+    );
+    measurementCells.push(
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { onLayout: widthFit.onEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(
+        BreadcrumbEllipsisInternal,
+        {
+          ellipsisLabel,
+          expandLabel,
+          expandBehavior: "none",
+          hiddenItems: [],
+          onExpandInline: () => void 0
+        }
+      ) }, "__m_ellipsis__")
+    );
+  }
+  const list = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      role: "list",
+      accessibilityRole: "list",
+      className: cn("flex-row items-center"),
+      style: { flexDirection: "row", alignItems: "center", flexShrink: 1, minWidth: 0 },
+      children: renderedCells
+    }
+  );
+  const wrapperStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    direction: dir,
+    flexShrink: 1,
+    minWidth: 0,
+    ...collapseOnOverflow && expandBehavior !== "scroll" ? { width: "100%" } : null,
+    // `overflow: 'hidden'` keeps the visible row from blowing past
+    // its container before the first measurement settles. Without
+    // it, native renders the natural-width row briefly on the first
+    // paint, even though the JS layout reports the correct measured
+    // width on the very next tick.
+    ...collapseOnOverflow ? { overflow: "hidden" } : null
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      role: "navigation",
+      "aria-label": ariaLabel,
+      accessible: true,
+      accessibilityLabel: ariaLabel,
+      className: cn("flex-row items-center", className),
+      style: wrapperStyle,
+      onLayout: collapseOnOverflow && expandBehavior !== "scroll" ? widthFit.onContainerLayout : void 0,
+      children: [
+        expandBehavior === "scroll" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.ScrollView,
+          {
+            horizontal: true,
+            showsHorizontalScrollIndicator: false,
+            contentContainerStyle: { flexDirection: "row", alignItems: "center" },
+            style: { flexGrow: 1 },
+            children: list
+          }
+        ) : list,
+        collapseOnOverflow && expandBehavior !== "scroll" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            "aria-hidden": true,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            style: {
+              position: "absolute",
+              opacity: 0,
+              flexDirection: "row",
+              alignItems: "center",
+              left: -99999,
+              top: 0,
+              // `pointerEvents` lives on the style object now —
+              // the prop form is deprecated in RN 0.71+ / RN-Web
+              // 0.20+ and emits a runtime warning every render.
+              pointerEvents: "none"
+            },
+            children: measurementCells
+          }
+        ) : null
+      ]
+    }
+  );
+}, "BreadcrumbItemsRenderer");
+var BreadcrumbItemRenderer = /* @__PURE__ */ __name(({ item, currentPageLabel, siblingMenuLabel, maxLabelLength }) => {
+  const colors = useThemeColors();
+  const Icon = item.icon;
+  const isLink = !item.current && (item.href !== void 0 || item.onSelect !== void 0);
+  const effectiveMax = item.maxLabelLength ?? maxLabelLength;
+  const renderLabel = /* @__PURE__ */ __name(() => {
+    if (item.loading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          style: {
+            backgroundColor: colors.semantic.background.subtle,
+            borderRadius: px(colors.radius.sm),
+            height: px(colors.fontSize.sm),
+            width: 64
+          }
+        }
+      );
+    }
+    if (typeof item.label === "string" || typeof item.label === "number") {
+      const text = String(item.label);
+      const truncated = effectiveMax > 0 ? truncateString(text, effectiveMax) : text;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          numberOfLines: 1,
+          ellipsizeMode: "tail",
+          style: {
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            color: item.current ? colors.semantic.text.default : colors.semantic.text.muted,
+            fontWeight: item.current ? colors.fontWeight.semibold : colors.fontWeight.regular
+          },
+          children: truncated
+        }
+      );
+    }
+    return item.label;
+  }, "renderLabel");
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: px(colors.spacing["1"])
+      },
+      children: [
+        Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 14, color: item.current ? colors.semantic.text.default : colors.semantic.text.muted }) : null,
+        renderLabel()
+      ]
+    }
+  );
+  if (item.current) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        role: "listitem",
+        accessibilityRole: "text",
+        style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 4 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.Text,
+            {
+              style: {
+                position: "absolute",
+                width: 1,
+                height: 1,
+                overflow: "hidden",
+                opacity: 0
+              },
+              children: [
+                currentPageLabel,
+                ":",
+                " "
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { "aria-current": "page", children: inner })
+        ]
+      }
+    );
+  }
+  if (item.siblings && item.siblings.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { role: "listitem", style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 4 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbInteractive, { item, children: inner }),
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSiblingMenu, { item, siblingMenuLabel })
+    ] });
+  }
+  if (isLink) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { role: "listitem", style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbInteractive, { item, children: inner }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { role: "listitem", style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 4 }, children: inner });
+}, "BreadcrumbItemRenderer");
+var BreadcrumbInteractive = /* @__PURE__ */ __name(({ item, children }) => {
+  const colors = useThemeColors();
+  const handlePress = react.useCallback(() => {
+    item.onSelect?.();
+  }, [item]);
+  if (reactNative.Platform.OS === "web" && item.href) {
+    const handleClick = item.onSelect ? (event) => {
+      event.preventDefault();
+      item.onSelect?.();
+    } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: item.href,
+        onClick: handleClick,
+        style: {
+          color: colors.semantic.interactive.primary,
+          textDecoration: "none",
+          fontFamily: colors.fontFamily.body
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: handlePress, accessibilityRole: "link", role: "link", children });
+}, "BreadcrumbInteractive");
+var BreadcrumbSiblingMenu = /* @__PURE__ */ __name(({ item, siblingMenuLabel }) => {
+  const colors = useThemeColors();
+  const siblings = item.siblings ?? [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        accessibilityLabel: siblingMenuLabel,
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingHorizontal: 2,
+          paddingVertical: 4
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            style: { fontSize: 10, color: colors.semantic.text.muted },
+            children: "\u25BE"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { minWidth: 200, paddingVertical: 4 }, children: siblings.map((sib, idx) => /* @__PURE__ */ jsxRuntime.jsx(SiblingRow, { sibling: sib }, sib.href ?? idx)) }) })
+  ] });
+}, "BreadcrumbSiblingMenu");
+var SiblingRow = /* @__PURE__ */ __name(({ sibling }) => {
+  const colors = useThemeColors();
+  const Icon = sibling.icon;
+  const handlePress = react.useCallback(() => {
+    sibling.onSelect?.();
+  }, [sibling]);
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: px(colors.spacing["2"]),
+        paddingVertical: px(colors.spacing["2"]),
+        paddingHorizontal: px(colors.spacing["3"]),
+        opacity: sibling.disabled ? 0.5 : 1
+      },
+      children: [
+        Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 14, color: colors.semantic.text.muted }) : null,
+        typeof sibling.label === "string" || typeof sibling.label === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              color: colors.semantic.text.default
+            },
+            children: String(sibling.label)
+          }
+        ) : sibling.label
+      ]
+    }
+  );
+  if (reactNative.Platform.OS === "web" && sibling.href && !sibling.disabled) {
+    const handleClick = sibling.onSelect ? (event) => {
+      event.preventDefault();
+      sibling.onSelect?.();
+    } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: sibling.href, onClick: handleClick, style: { textDecoration: "none", color: "inherit" }, children: inner });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: sibling.disabled ? void 0 : handlePress, accessibilityRole: "menuitem", children: inner });
+}, "SiblingRow");
+var BreadcrumbEllipsisInternal = /* @__PURE__ */ __name(({
+  ellipsisLabel,
+  expandLabel,
+  expandBehavior,
+  hiddenItems,
+  onExpandInline
+}) => {
+  const colors = useThemeColors();
+  const renderDots = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        fontFamily: colors.fontFamily.body,
+        fontSize: px(colors.fontSize.sm),
+        color: colors.semantic.text.muted,
+        paddingHorizontal: 4
+      },
+      children: "\u2026"
+    }
+  ), "renderDots");
+  if (expandBehavior === "none" || hiddenItems.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        accessibilityLabel: ellipsisLabel,
+        "aria-label": ellipsisLabel,
+        style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 4 },
+        children: renderDots()
+      }
+    );
+  }
+  if (expandBehavior === "inline") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        onPress: onExpandInline,
+        accessibilityRole: "button",
+        role: "button",
+        accessibilityLabel: expandLabel,
+        "aria-label": expandLabel,
+        style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 4 },
+        children: renderDots()
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        accessibilityLabel: expandLabel,
+        "aria-label": expandLabel,
+        style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 4 },
+        children: renderDots()
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { minWidth: 200, paddingVertical: 4 }, children: hiddenItems.map((it, idx) => {
+      const sib = { label: it.label };
+      if (it.href !== void 0) {
+        sib.href = it.href;
+      }
+      if (it.icon !== void 0) {
+        sib.icon = it.icon;
+      }
+      if (it.onSelect !== void 0) {
+        sib.onSelect = it.onSelect;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SiblingRow,
+        {
+          sibling: sib
+        },
+        typeof it.key === "string" || typeof it.key === "number" ? it.key : idx
+      );
+    }) }) })
+  ] });
+}, "BreadcrumbEllipsisInternal");
+var BreadcrumbList = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  useBreadcrumbContext("Breadcrumb.List");
+  const childArray = react.Children.toArray(children);
+  const out = [];
+  let lastWasItem = false;
+  childArray.forEach((child, idx) => {
+    const kind = getCompoundKind(child);
+    if (kind === "item") {
+      if (lastWasItem) {
+        out.push(
+          // biome-ignore lint/suspicious/noArrayIndexKey: separator position is deterministic from its preceding item index
+          /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}) }, `__autosep_${idx}`)
+        );
+      }
+      out.push(child);
+      lastWasItem = true;
+    } else {
+      out.push(child);
+      lastWasItem = false;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      role: "list",
+      accessibilityRole: "list",
+      className: cn("flex-row items-center", className),
+      style: { flexDirection: "row", alignItems: "center", flexShrink: 1, minWidth: 0 },
+      children: out
+    }
+  );
+}, "BreadcrumbList");
+var BreadcrumbItem = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  useBreadcrumbContext("Breadcrumb.Item");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      role: "listitem",
+      accessibilityRole: "text",
+      className: cn("flex-row items-center", className),
+      style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 4 },
+      children
+    }
+  );
+}, "BreadcrumbItem");
+tagComponent(BreadcrumbItem, "item");
+var BreadcrumbLink = /* @__PURE__ */ __name(({ href, onPress, asChild, children, className, testID }) => {
+  const colors = useThemeColors();
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children
+      }
+    );
+  }
+  if (reactNative.Platform.OS === "web" && href) {
+    const handleClick = onPress ? (event) => {
+      event.preventDefault();
+      onPress?.();
+    } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href,
+        onClick: handleClick,
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        style: {
+          color: colors.semantic.interactive.primary,
+          textDecoration: "none",
+          fontFamily: colors.fontFamily.body,
+          fontSize: px(colors.fontSize.sm)
+        },
+        children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.interactive.primary,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm)
+            },
+            children
+          }
+        ) : children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress, accessibilityRole: "link", role: "link", ...testID !== void 0 ? { testID } : {}, children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      style: {
+        color: colors.semantic.interactive.primary,
+        fontFamily: colors.fontFamily.body,
+        fontSize: px(colors.fontSize.sm)
+      },
+      children
+    }
+  ) : children });
+}, "BreadcrumbLink");
+var BreadcrumbPage = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useBreadcrumbContext("Breadcrumb.Page");
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      accessibilityRole: "text",
+      "aria-current": "page",
+      className: cn("flex-row items-center", className),
+      style: { flexDirection: "row", alignItems: "center" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.Text,
+          {
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              opacity: 0
+            },
+            children: [
+              ctx.currentPageLabel,
+              ":",
+              " "
+            ]
+          }
+        ),
+        typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            numberOfLines: 1,
+            style: {
+              color: colors.semantic.text.default,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              fontWeight: colors.fontWeight.semibold
+            },
+            children
+          }
+        ) : children
+      ]
+    }
+  );
+}, "BreadcrumbPage");
+var BreadcrumbSeparator = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useBreadcrumbContext("Breadcrumb.Separator");
+  const node = children ?? renderSeparator(ctx.separator, { fromIndex: 0, visibleCount: 0, dir: ctx.dir });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      "aria-hidden": true,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      role: "presentation",
+      className: cn("flex-row items-center", className),
+      style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 2 },
+      children: node
+    }
+  );
+}, "BreadcrumbSeparator");
+tagComponent(BreadcrumbSeparator, "separator");
+var BreadcrumbEllipsis = /* @__PURE__ */ __name(({ ellipsisLabel, className, testID }) => {
+  useBreadcrumbContext("Breadcrumb.Ellipsis");
+  const { t } = useTranslation();
+  const colors = useThemeColors();
+  const label = ellipsisLabel ?? t("breadcrumb.ellipsisLabel", { defaultValue: "More" });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      accessibilityLabel: label,
+      "aria-label": label,
+      className: cn("flex-row items-center", className),
+      style: { flexDirection: "row", alignItems: "center", paddingHorizontal: 4 },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            color: colors.semantic.text.muted
+          },
+          children: "\u2026"
+        }
+      )
+    }
+  );
+}, "BreadcrumbEllipsis");
+var Breadcrumb = Object.assign(BreadcrumbRoot, {
+  List: BreadcrumbList,
+  Item: BreadcrumbItem,
+  Link: BreadcrumbLink,
+  Page: BreadcrumbPage,
+  Separator: BreadcrumbSeparator,
+  Ellipsis: BreadcrumbEllipsis
+});
+
+exports.Breadcrumb = Breadcrumb;
+exports.getBreadcrumbJsonLd = getBreadcrumbJsonLd;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map