@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-VXDZFJGP.js

@@ -1,874 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React2 from 'react';
-import { StyleSheet, Pressable, Text, useWindowDimensions, Animated, Easing, AccessibilityInfo, Platform, findNodeHandle, BackHandler, PanResponder, View } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-// src/navigation/geometry.ts
-var NAV_PARALLAX_RATIO = 0.3;
-var NAV_EDGE_HIT_WIDTH = 20;
-var NAV_AXIS_LOCK_SLOP = 8;
-var NAV_SWIPE_COMPLETE_FRACTION = 0.5;
-var NAV_SWIPE_COMPLETE_VELOCITY = 0.5;
-var NAV_TAB_FADE_SCALE = 0.97;
-var NAV_HERO_CONTENT_FADE_START = 0.5;
-var NAV_MODAL_TOP_INSET = 34;
-var NAV_MODAL_HEADER_HEIGHT = 48;
-function clampProgress(progress) {
-  if (Number.isNaN(progress)) return 0;
-  return Math.max(0, Math.min(1, progress));
-}
-function directionSign(rtl) {
-  return rtl ? -1 : 1;
-}
-function incomingTranslateX(progress, width, rtl) {
-  return (1 - clampProgress(progress)) * width * directionSign(rtl);
-}
-function parallaxTranslateX(progress, width, rtl) {
-  return -clampProgress(progress) * width * NAV_PARALLAX_RATIO * directionSign(rtl);
-}
-function parallaxDimOpacity(progress) {
-  return clampProgress(progress);
-}
-function progressFromEdgeSwipe(dx, width, rtl) {
-  if (width <= 0) return 1;
-  const travelled = dx * directionSign(rtl);
-  return 1 - clampProgress(travelled / width);
-}
-function shouldCompletePop(dx, vx, width, rtl) {
-  const sign = directionSign(rtl);
-  const travelled = dx * sign;
-  const velocity = vx * sign;
-  if (travelled <= 0) return false;
-  return travelled >= width * NAV_SWIPE_COMPLETE_FRACTION || velocity >= NAV_SWIPE_COMPLETE_VELOCITY;
-}
-function claimsHorizontalAxis(dx, dy, slop = NAV_AXIS_LOCK_SLOP) {
-  return Math.abs(dx) > slop && Math.abs(dx) > Math.abs(dy);
-}
-function isFromLeadingEdge(x, width, rtl, edgeWidth = NAV_EDGE_HIT_WIDTH) {
-  return rtl ? x >= width - edgeWidth : x <= edgeWidth;
-}
-function modalTranslateY(progress, height) {
-  return (1 - clampProgress(progress)) * height;
-}
-function tabFadeScale(progress) {
-  const p = clampProgress(progress);
-  return NAV_TAB_FADE_SCALE + (1 - NAV_TAB_FADE_SCALE) * p;
-}
-function heroContentOpacity(progress) {
-  const p = clampProgress(progress);
-  if (p <= NAV_HERO_CONTENT_FADE_START) return 0;
-  return (p - NAV_HERO_CONTENT_FADE_START) / (1 - NAV_HERO_CONTENT_FADE_START);
-}
-function heroTransform(from, to, progress) {
-  const p = clampProgress(progress);
-  const scaleX = to.width > 0 ? from.width / to.width : 1;
-  const scaleY = to.height > 0 ? from.height / to.height : 1;
-  const dx = from.x + from.width / 2 - (to.x + to.width / 2);
-  const dy = from.y + from.height / 2 - (to.y + to.height / 2);
-  return {
-    translateX: dx * (1 - p),
-    translateY: dy * (1 - p),
-    scaleX: scaleX + (1 - scaleX) * p,
-    scaleY: scaleY + (1 - scaleY) * p
-  };
-}
-function NavBackButton({
-  onPress,
-  previousTitle,
-  platform: platformProp,
-  accessibilityLabel,
-  disabled = false
-}) {
-  const theme = useLoamTheme();
-  const platform = platformProp ?? navPlatform(theme.platform);
-  const { styles } = useStyles(sheet, { platform });
-  const back = theme.rtl ? "chevron-right" : "chevron-left";
-  const arrow = theme.rtl ? "arrow-right" : "arrow-left";
-  const showTitle = platform === "iOS" && previousTitle !== void 0;
-  const label = accessibilityLabel ?? (previousTitle ? `Back to ${previousTitle}` : "Back");
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel: label,
-      accessibilityState: { disabled },
-      disabled,
-      onPress: disabled ? void 0 : onPress,
-      hitSlop: theme.space.s2,
-      style: ({ pressed }) => [
-        styles.back,
-        disabled ? styles.backDisabled : null,
-        pressed && !disabled ? styles.backPressed : null
-      ],
-      children: [
-        /* @__PURE__ */ jsx(
-          Icon,
-          {
-            name: platform === "iOS" ? back : arrow,
-            size: theme.icon.md,
-            color: theme.color.accentStrong
-          }
-        ),
-        showTitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.backLabel, children: previousTitle }) : null
-      ]
-    }
-  );
-}
-function NavBar({
-  platform,
-  title,
-  previousTitle,
-  onBack,
-  backLabel,
-  leading,
-  trailing
-}) {
-  const { styles } = useStyles(sheet, { platform });
-  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "header", style: styles.bar, children: [
-    onBack ? /* @__PURE__ */ jsx(
-      NavBackButton,
-      {
-        platform,
-        previousTitle,
-        accessibilityLabel: previousTitle ? void 0 : backLabel,
-        onPress: onBack
-      }
-    ) : leading,
-    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.barTitle, children: title }),
-    trailing ? /* @__PURE__ */ jsx(View, { style: styles.barTrailing, children: trailing }) : null
-  ] });
-}
-function navPlatform(platform) {
-  return platform === "Android" ? "Android" : "iOS";
-}
-function NavigationStack({
-  screens,
-  onPop,
-  onExit,
-  platform: platformProp,
-  swipeEnabled,
-  backLabel = "Back",
-  announce = true,
-  style
-}) {
-  const theme = useLoamTheme();
-  const platform = platformProp ?? navPlatform(theme.platform);
-  const { styles } = useStyles(sheet, { platform });
-  const rtl = theme.rtl;
-  const reduce = theme.reduceMotion;
-  const window = useWindowDimensions();
-  const depth = screens.length;
-  const top = depth > 0 ? screens[depth - 1] : void 0;
-  const below = depth > 1 ? screens[depth - 2] : void 0;
-  const [width, setWidth] = React2.useState(window.width);
-  const onRootLayout = (e) => {
-    const next = e.nativeEvent.layout.width;
-    if (next > 0) setWidth(next);
-  };
-  const progress = React2.useRef(new Animated.Value(1)).current;
-  const [exiting, setExiting] = React2.useState(null);
-  const over = exiting ?? top;
-  const under = exiting ? top : below;
-  const page = theme.motion.page;
-  const pageEasing = React2.useMemo(() => Easing.bezier(...page.easing), [page.easing]);
-  const live = React2.useRef({ top, below, onPop, onExit, width, rtl });
-  live.current = { top, below, onPop, onExit, width, rtl };
-  const screenRef = React2.useRef(null);
-  const announceRef = React2.useRef(null);
-  const pendingFocusRef = React2.useRef(null);
-  const skipExitRef = React2.useRef(false);
-  const historyRef = React2.useRef(null);
-  const revealTop = React2.useCallback(
-    (screen) => {
-      if (announce) {
-        const text = screen.announcement ?? screen.title;
-        if (announceRef.current !== text) AccessibilityInfo.announceForAccessibility(text);
-        announceRef.current = text;
-      }
-      pendingFocusRef.current = screen.key;
-    },
-    [announce]
-  );
-  React2.useEffect(() => {
-    const wanted = pendingFocusRef.current;
-    if (wanted === null || wanted !== top?.key) return;
-    pendingFocusRef.current = null;
-    const node = screenRef.current;
-    if (!node || Platform.OS === "web") return;
-    const tag = findNodeHandle(node);
-    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
-  });
-  React2.useEffect(() => {
-    const previous = historyRef.current;
-    if (top) historyRef.current = { depth, key: top.key, screen: top };
-    if (!top) return;
-    if (!previous) return;
-    if (previous.key === top.key) return;
-    if (skipExitRef.current) {
-      skipExitRef.current = false;
-      progress.setValue(1);
-      revealTop(top);
-      return;
-    }
-    if (depth < previous.depth) {
-      setExiting(previous.screen);
-      progress.setValue(1);
-      Animated.timing(progress, {
-        toValue: 0,
-        duration: page.duration,
-        easing: pageEasing,
-        useNativeDriver: true
-      }).start(({ finished }) => {
-        if (finished) {
-          setExiting(null);
-          progress.setValue(1);
-        }
-      });
-    } else {
-      progress.setValue(0);
-      Animated.timing(progress, {
-        toValue: 1,
-        duration: page.duration,
-        easing: pageEasing,
-        useNativeDriver: true
-      }).start();
-    }
-    revealTop(top);
-  }, [depth, top?.key]);
-  React2.useEffect(() => {
-    if (platform !== "Android") return;
-    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
-      const { top: current, below: parent, onPop: pop, onExit: exit } = live.current;
-      if (!current || !parent) {
-        exit?.();
-        return false;
-      }
-      pop?.(current, "system-back");
-      return true;
-    });
-    return () => subscription?.remove();
-  }, [platform]);
-  const canPop = under !== void 0 && over !== void 0;
-  const swipeActive = (swipeEnabled ?? platform === "iOS") && canPop && exiting === null;
-  const startXRef = React2.useRef(0);
-  const swipeRef = React2.useRef({ active: swipeActive, page, pageEasing });
-  swipeRef.current = { active: swipeActive, page, pageEasing };
-  const pan = React2.useMemo(
-    () => PanResponder.create({
-      onStartShouldSetPanResponderCapture: (e) => {
-        startXRef.current = e.nativeEvent.locationX;
-        return false;
-      },
-      onMoveShouldSetPanResponder: (_e, g) => {
-        if (!swipeRef.current.active) return false;
-        if (!claimsHorizontalAxis(g.dx, g.dy)) return false;
-        const { width: w, rtl: isRtl } = live.current;
-        return isFromLeadingEdge(startXRef.current, w, isRtl);
-      },
-      onPanResponderMove: (_e, g) => {
-        const { width: w, rtl: isRtl } = live.current;
-        progress.setValue(progressFromEdgeSwipe(g.dx, w, isRtl));
-      },
-      onPanResponderRelease: (_e, g) => {
-        const { top: current, width: w, rtl: isRtl, onPop: pop } = live.current;
-        const { page: spec, pageEasing: easing } = swipeRef.current;
-        if (current && shouldCompletePop(g.dx, g.vx, w, isRtl)) {
-          Animated.timing(progress, {
-            toValue: 0,
-            duration: spec.duration,
-            easing,
-            useNativeDriver: true
-          }).start(({ finished }) => {
-            if (!finished) return;
-            skipExitRef.current = true;
-            pop?.(current, "edge-swipe");
-          });
-          return;
-        }
-        Animated.spring(progress, { toValue: 1, useNativeDriver: true }).start();
-      },
-      onPanResponderTerminate: () => {
-        Animated.spring(progress, { toValue: 1, useNativeDriver: true }).start();
-      }
-    }),
-    [progress]
-  );
-  const overTranslateX = React2.useMemo(
-    () => progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [incomingTranslateX(0, width, rtl), incomingTranslateX(1, width, rtl)]
-    }),
-    [progress, width, rtl]
-  );
-  const underTranslateX = React2.useMemo(
-    () => progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [parallaxTranslateX(0, width, rtl), parallaxTranslateX(1, width, rtl)]
-    }),
-    [progress, width, rtl]
-  );
-  const dimOpacity = React2.useMemo(
-    () => progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [parallaxDimOpacity(0), parallaxDimOpacity(1)]
-    }),
-    [progress]
-  );
-  const overStyle = reduce ? { opacity: progress } : { transform: [{ translateX: overTranslateX }] };
-  const underStyle = reduce ? {} : { transform: [{ translateX: underTranslateX }] };
-  if (!over) return /* @__PURE__ */ jsx(View, { style: [styles.root, style] });
-  const rootScreen = screens[0];
-  const overIsRoot = over === rootScreen;
-  const underIsRoot = under !== void 0 && under === rootScreen;
-  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], onLayout: onRootLayout, children: [
-    under ? /* @__PURE__ */ jsxs(
-      Animated.View,
-      {
-        ref: exiting ? screenRef : void 0,
-        role: "group",
-        accessibilityLabel: under.title,
-        style: [styles.screen, underIsRoot ? styles.screenRoot : styles.screenPushed, underStyle],
-        children: [
-          under.hideBar ? null : /* @__PURE__ */ jsx(
-            NavBar,
-            {
-              platform,
-              title: under.title,
-              leading: under.leading,
-              trailing: under.trailing,
-              backLabel
-            }
-          ),
-          /* @__PURE__ */ jsx(View, { style: styles.body, children: under.content }),
-          reduce ? null : /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              pointerEvents: "none",
-              style: [StyleSheet.absoluteFill, styles.dim, { opacity: dimOpacity }]
-            }
-          )
-        ]
-      },
-      under.key
-    ) : null,
-    /* @__PURE__ */ jsxs(
-      Animated.View,
-      {
-        ref: exiting ? void 0 : screenRef,
-        role: "group",
-        accessibilityLabel: over.title,
-        pointerEvents: exiting ? "none" : "auto",
-        style: [styles.screen, overIsRoot ? styles.screenRoot : styles.screenPushed, overStyle],
-        ...swipeActive ? pan.panHandlers : {},
-        children: [
-          over.hideBar ? null : /* @__PURE__ */ jsx(
-            NavBar,
-            {
-              platform,
-              title: over.title,
-              previousTitle: under?.title,
-              onBack: canPop ? () => {
-                const { top: current, onPop: pop } = live.current;
-                if (current) pop?.(current, "back-button");
-              } : void 0,
-              leading: over.leading,
-              trailing: over.trailing,
-              backLabel
-            }
-          ),
-          /* @__PURE__ */ jsx(View, { style: styles.body, children: over.content })
-        ]
-      },
-      over.key
-    )
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  root: {
-    flex: 1,
-    overflow: "hidden",
-    backgroundColor: theme.color.bg
-  },
-  screen: {
-    ...StyleSheet.absoluteFillObject,
-    flexDirection: "column"
-  },
-  // The base screen sits on the canvas; a pushed one is a `surface` card with
-  // `shadow.lg` (the design reference's `box-shadow: var(--sh-lg)`), which also
-  // carries `elevation` for Android's depth model.
-  screenRoot: {
-    backgroundColor: theme.color.bg
-  },
-  // loam-contrast-ignore — a pushed screen is full-bleed and its parent is
-  // dimmed by `scrimLight` (which high contrast leaves alone), so the shadow is
-  // depth during the transition, never the thing that draws the screen.
-  screenPushed: {
-    backgroundColor: theme.color.surface,
-    ...theme.shadow.lg
-  },
-  // The wash over the parallaxing parent. `scrimLight` already carries the
-  // alpha, so the animation only scales it from 0 to 1.
-  dim: {
-    backgroundColor: theme.color.scrimLight
-  },
-  body: {
-    flex: 1
-  },
-  // Matches `Header`'s metrics: `layout.appbarH` is the only height in the
-  // system that branches on platform (44 on iOS, 64 on Android).
-  bar: {
-    flexDirection: "row",
-    alignItems: "center",
-    height: theme.layout.appbarH,
-    paddingHorizontal: theme.space.s3,
-    gap: theme.space.s2,
-    backgroundColor: theme.color.surface,
-    borderBottomWidth: theme.borderWidth.base,
-    borderBottomColor: theme.color.border
-  },
-  // Headline is the nav-bar title role on both ramps (HIG headline / M3 title).
-  // Android indents it, because its arrow carries no label to space it away
-  // from — the reference's `margin-inline-start: 8px`.
-  barTitle: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.headline.fontSize,
-    lineHeight: theme.type.headline.lineHeight,
-    letterSpacing: theme.type.headline.letterSpacing,
-    color: theme.color.text,
-    variants: {
-      platform: {
-        iOS: {},
-        Android: { marginStart: theme.space.s2 }
-      }
-    }
-  },
-  barTrailing: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s1
-  },
-  back: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s1,
-    minHeight: theme.tapMin,
-    paddingEnd: theme.space.s1,
-    borderRadius: theme.radius.full,
-    variants: {
-      platform: {
-        // The chevron sits tight against its label; a bare arrow gets a square
-        // touch target instead.
-        iOS: { minWidth: theme.space.s7 },
-        Android: { minWidth: theme.tapMin, justifyContent: "center" }
-      }
-    }
-  },
-  backPressed: {
-    backgroundColor: theme.state.pressed
-  },
-  backDisabled: {
-    opacity: theme.state.disabledOpacity
-  },
-  backLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.body.fontSize,
-    lineHeight: theme.type.body.lineHeight,
-    letterSpacing: theme.type.body.letterSpacing,
-    color: theme.color.accentStrong,
-    variants: {
-      platform: {
-        iOS: {},
-        Android: { display: "none" }
-      }
-    }
-  }
-}));
-var FALLBACK_PANEL_HEIGHT = 640;
-function NavModal({
-  open,
-  title,
-  onDismiss,
-  dismissLabel = "Cancel",
-  confirmLabel,
-  onConfirm,
-  children,
-  announcement,
-  scrimLabel = "Dismiss"
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet2);
-  const [mounted, setMounted] = React2.useState(open);
-  const progress = React2.useRef(new Animated.Value(0)).current;
-  const heightRef = React2.useRef(FALLBACK_PANEL_HEIGHT);
-  const enter = theme.motion.enter;
-  const exit = theme.motion.exit;
-  const enterEasing = React2.useMemo(() => Easing.bezier(...enter.easing), [enter.easing]);
-  const exitEasing = React2.useMemo(() => Easing.bezier(...exit.easing), [exit.easing]);
-  React2.useEffect(() => {
-    if (open) {
-      setMounted(true);
-      AccessibilityInfo.announceForAccessibility(announcement ?? title);
-      return;
-    }
-    if (!mounted) return;
-    Animated.timing(progress, {
-      toValue: 0,
-      duration: exit.duration,
-      easing: exitEasing,
-      useNativeDriver: true
-    }).start(({ finished }) => {
-      if (finished) setMounted(false);
-    });
-  }, [open]);
-  React2.useEffect(() => {
-    if (!mounted || !open) return;
-    progress.setValue(0);
-    Animated.timing(progress, {
-      toValue: 1,
-      duration: enter.duration,
-      easing: enterEasing,
-      useNativeDriver: true
-    }).start();
-  }, [mounted]);
-  const [panelHeight, setPanelHeight] = React2.useState(FALLBACK_PANEL_HEIGHT);
-  const onPanelLayout = (e) => {
-    const next = e.nativeEvent.layout.height;
-    if (next > 0 && next !== heightRef.current) {
-      heightRef.current = next;
-      setPanelHeight(next);
-    }
-  };
-  const translateY = React2.useMemo(
-    () => progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [modalTranslateY(0, panelHeight), modalTranslateY(1, panelHeight)]
-    }),
-    [progress, panelHeight]
-  );
-  if (!mounted) return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsxs(View, { style: styles.overlayRoot, pointerEvents: "box-none", children: [
-    /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, styles.scrim, { opacity: progress }], children: /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        style: StyleSheet.absoluteFill,
-        accessibilityRole: "button",
-        accessibilityLabel: scrimLabel,
-        onPress: onDismiss
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(
-      Animated.View,
-      {
-        role: "dialog",
-        accessibilityViewIsModal: true,
-        accessibilityLabel: title,
-        onLayout: onPanelLayout,
-        style: [styles.panel, { transform: [{ translateY }] }],
-        children: [
-          /* @__PURE__ */ jsxs(View, { style: styles.modalBar, children: [
-            /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                accessibilityRole: "button",
-                accessibilityLabel: dismissLabel,
-                onPress: onDismiss,
-                style: ({ pressed }) => [
-                  styles.modalAction,
-                  pressed ? styles.modalActionPressed : null
-                ],
-                children: /* @__PURE__ */ jsx(Text, { style: styles.modalDismiss, children: dismissLabel })
-              }
-            ),
-            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.modalTitle, children: title }),
-            confirmLabel ? /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                accessibilityRole: "button",
-                accessibilityLabel: confirmLabel,
-                onPress: onConfirm,
-                style: ({ pressed }) => [
-                  styles.modalAction,
-                  pressed ? styles.modalActionPressed : null
-                ],
-                children: /* @__PURE__ */ jsx(Text, { style: styles.modalConfirm, children: confirmLabel })
-              }
-            ) : /* @__PURE__ */ jsx(View, { style: styles.modalAction })
-          ] }),
-          /* @__PURE__ */ jsx(View, { style: styles.modalBody, children })
-        ]
-      }
-    )
-  ] });
-}
-function NavTabView({
-  value,
-  tabs,
-  announce = true,
-  style
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet2);
-  const page = theme.motion.page;
-  const pageEasing = React2.useMemo(() => Easing.bezier(...page.easing), [page.easing]);
-  const active = tabs.find((tab) => tab.value === value);
-  const [outgoing, setOutgoing] = React2.useState(null);
-  const previousRef = React2.useRef(active);
-  const visited = React2.useRef(new Set(active ? [active.value] : []));
-  if (active) visited.current.add(active.value);
-  const panes = tabs.filter((tab) => visited.current.has(tab.value));
-  const fade = React2.useRef(new Animated.Value(1)).current;
-  React2.useEffect(() => {
-    const previous = previousRef.current;
-    previousRef.current = active;
-    if (!active || !previous || previous.value === active.value) return;
-    if (announce) AccessibilityInfo.announceForAccessibility(active.announcement ?? active.title);
-    setOutgoing(previous);
-    fade.setValue(0);
-    Animated.timing(fade, {
-      toValue: 1,
-      duration: page.duration,
-      easing: pageEasing,
-      useNativeDriver: true
-    }).start(({ finished }) => {
-      if (finished) setOutgoing(null);
-    });
-  }, [value]);
-  const incomingScale = fade.interpolate({
-    inputRange: [0, 1],
-    outputRange: [NAV_TAB_FADE_SCALE, 1]
-  });
-  const outgoingOpacity = fade.interpolate({ inputRange: [0, 1], outputRange: [1, 0] });
-  const outgoingScale = fade.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, NAV_TAB_FADE_SCALE]
-  });
-  return /* @__PURE__ */ jsx(View, { style: [styles.tabRoot, style], children: panes.map((pane) => {
-    const isActive = pane.value === value;
-    const isOutgoing = outgoing?.value === pane.value;
-    return /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        role: "group",
-        accessibilityLabel: pane.title,
-        importantForAccessibility: isActive ? "auto" : "no-hide-descendants",
-        pointerEvents: isActive ? "auto" : "none",
-        style: [
-          styles.tabPane,
-          isActive ? { opacity: fade, transform: [{ scale: incomingScale }] } : isOutgoing ? { opacity: outgoingOpacity, transform: [{ scale: outgoingScale }] } : styles.tabPaneHidden
-        ],
-        children: pane.content
-      },
-      pane.value
-    );
-  }) });
-}
-function NavHero({
-  active,
-  from,
-  to,
-  children,
-  onMorphEnd,
-  accessibilityLabel,
-  announcement
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet2);
-  const reduce = theme.reduceMotion;
-  const hero = theme.motion.hero;
-  const heroEasing = React2.useMemo(() => Easing.bezier(...hero.easing), [hero.easing]);
-  const [mounted, setMounted] = React2.useState(active);
-  const progress = React2.useRef(new Animated.Value(0)).current;
-  const [bounds, setBounds] = React2.useState(null);
-  const onRootLayout = (e) => {
-    const { width, height } = e.nativeEvent.layout;
-    if (width > 0 && height > 0) setBounds({ x: 0, y: 0, width, height });
-  };
-  const endRef = React2.useRef(onMorphEnd);
-  endRef.current = onMorphEnd;
-  React2.useEffect(() => {
-    if (active) {
-      setMounted(true);
-      if (announcement ?? accessibilityLabel) {
-        AccessibilityInfo.announceForAccessibility(announcement ?? accessibilityLabel);
-      }
-      return;
-    }
-    if (!mounted) return;
-    Animated.timing(progress, {
-      toValue: 0,
-      duration: hero.duration,
-      easing: heroEasing,
-      useNativeDriver: true
-    }).start(({ finished }) => {
-      if (!finished) return;
-      setMounted(false);
-      endRef.current?.(false);
-    });
-  }, [active]);
-  React2.useEffect(() => {
-    if (!mounted || !active) return;
-    progress.setValue(0);
-    Animated.timing(progress, {
-      toValue: 1,
-      duration: hero.duration,
-      easing: heroEasing,
-      useNativeDriver: true
-    }).start(({ finished }) => {
-      if (finished) endRef.current?.(true);
-    });
-  }, [mounted]);
-  const target = to ?? bounds;
-  const start = target ? heroTransform(from, target, 0) : null;
-  const morphStyle = reduce || !start ? { opacity: progress } : {
-    transform: [
-      {
-        translateX: progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [start.translateX, 0]
-        })
-      },
-      {
-        translateY: progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [start.translateY, 0]
-        })
-      },
-      {
-        scaleX: progress.interpolate({ inputRange: [0, 1], outputRange: [start.scaleX, 1] })
-      },
-      {
-        scaleY: progress.interpolate({ inputRange: [0, 1], outputRange: [start.scaleY, 1] })
-      }
-    ]
-  };
-  const contentOpacity = reduce ? progress : progress.interpolate({
-    inputRange: [NAV_HERO_CONTENT_FADE_START, 1],
-    outputRange: [0, 1],
-    extrapolate: "clamp"
-  });
-  const frame = to ? { position: "absolute", top: to.y, start: to.x, width: to.width, height: to.height } : StyleSheet.absoluteFillObject;
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      style: styles.overlayRoot,
-      pointerEvents: mounted ? "auto" : "none",
-      onLayout: onRootLayout,
-      children: mounted ? /* @__PURE__ */ jsx(
-        Animated.View,
-        {
-          role: "group",
-          accessibilityLabel,
-          style: [styles.heroSurface, frame, morphStyle],
-          children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.heroContent, { opacity: contentOpacity }], children })
-        }
-      ) : null
-    }
-  );
-}
-var sheet2 = createStyleSheet((theme) => ({
-  // Both the modal and the hero layer float over whatever container they are
-  // placed in, rather than taking part in its flow.
-  overlayRoot: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: theme.z.overlay
-  },
-  scrim: {
-    backgroundColor: theme.color.scrim
-  },
-  // `NAV_MODAL_TOP_INSET` (34px) is the design reference's literal: the sliver of
-  // the covered screen that keeps the presentation reading as "over".
-  // loam-contrast-ignore — the boundary here is the scrim, not the shadow.
-  // `color.scrim` is a 44% wash and is *not* re-resolved by high contrast, so
-  // this surface is still separated from the page when the elevation zeroes
-  // out. A border would put a hairline around every modal for no gain.
-  panel: {
-    position: "absolute",
-    top: NAV_MODAL_TOP_INSET,
-    start: 0,
-    end: 0,
-    bottom: 0,
-    backgroundColor: theme.color.surface,
-    borderTopStartRadius: theme.radius["2xl"],
-    borderTopEndRadius: theme.radius["2xl"],
-    overflow: "hidden",
-    zIndex: theme.z.modal,
-    ...theme.shadow.lg
-  },
-  modalBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    height: NAV_MODAL_HEADER_HEIGHT,
-    paddingHorizontal: theme.space.s3,
-    gap: theme.space.s2,
-    borderBottomWidth: theme.borderWidth.base,
-    borderBottomColor: theme.color.border
-  },
-  modalAction: {
-    minHeight: theme.tapMin,
-    minWidth: theme.space.s7,
-    justifyContent: "center",
-    borderRadius: theme.radius.full,
-    paddingHorizontal: theme.space.s1
-  },
-  modalActionPressed: {
-    backgroundColor: theme.state.pressed
-  },
-  // The dismiss is quieter than the confirm on purpose — it is always available,
-  // so it does not need to compete.
-  modalDismiss: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.body.fontSize,
-    lineHeight: theme.type.body.lineHeight,
-    color: theme.color.text2
-  },
-  modalConfirm: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.body.fontSize,
-    lineHeight: theme.type.body.lineHeight,
-    color: theme.color.accentStrong
-  },
-  modalTitle: {
-    flex: 1,
-    textAlign: "center",
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.headline.fontSize,
-    lineHeight: theme.type.headline.lineHeight,
-    letterSpacing: theme.type.headline.letterSpacing,
-    color: theme.color.text
-  },
-  modalBody: {
-    flex: 1,
-    padding: theme.layout.screenPad
-  },
-  tabRoot: {
-    flex: 1,
-    overflow: "hidden"
-  },
-  // Panes overlap so they can cross-fade; the inactive ones are taken out of
-  // layout (and out of the accessibility tree) rather than stacked invisibly.
-  tabPane: {
-    ...StyleSheet.absoluteFillObject
-  },
-  tabPaneHidden: {
-    display: "none"
-  },
-  heroSurface: {
-    backgroundColor: theme.color.surface,
-    borderRadius: theme.radius.md,
-    overflow: "hidden",
-    zIndex: theme.z.raised
-  },
-  heroContent: {
-    flex: 1
-  }
-}));
-
-export { NAV_AXIS_LOCK_SLOP, NAV_EDGE_HIT_WIDTH, NAV_HERO_CONTENT_FADE_START, NAV_MODAL_HEADER_HEIGHT, NAV_MODAL_TOP_INSET, NAV_PARALLAX_RATIO, NAV_SWIPE_COMPLETE_FRACTION, NAV_SWIPE_COMPLETE_VELOCITY, NAV_TAB_FADE_SCALE, NavBackButton, NavHero, NavModal, NavTabView, NavigationStack, claimsHorizontalAxis, clampProgress, directionSign, heroContentOpacity, heroTransform, incomingTranslateX, isFromLeadingEdge, modalTranslateY, parallaxDimOpacity, parallaxTranslateX, progressFromEdgeSwipe, shouldCompletePop, tabFadeScale };