@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-VXDZFJGP.js → chunk-QHTVYA65.js}

@@ -1,15 +1,29 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React2 from 'react';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig } from './chunk-J64KGCGX.js';
+import * as React 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/labels.ts
+var DEFAULT_NAVIGATION_LABELS = {
+  back: "Back",
+  backTo: (title) => `Back to ${title}`,
+  cancel: "Cancel",
+  dismiss: "Dismiss"
+};
+
 // 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_PREDICTIVE_SCALE = 0.9;
+var NAV_PREDICTIVE_SHIFT = 0.05;
+var NAV_PREDICTIVE_SPAN = 0.4;
+var NAV_PREDICTIVE_FADE = 0.7;
 var NAV_TAB_FADE_SCALE = 0.97;
 var NAV_HERO_CONTENT_FADE_START = 0.5;
 var NAV_MODAL_TOP_INSET = 34;
@@ -48,6 +62,22 @@ function claimsHorizontalAxis(dx, dy, slop = NAV_AXIS_LOCK_SLOP) {
 function isFromLeadingEdge(x, width, rtl, edgeWidth = NAV_EDGE_HIT_WIDTH) {
   return rtl ? x >= width - edgeWidth : x <= edgeWidth;
 }
+function isFromTrailingEdge(x, width, rtl, edgeWidth = NAV_EDGE_HIT_WIDTH) {
+  return isFromLeadingEdge(x, width, !rtl, edgeWidth);
+}
+function predictiveTravel(dx, fromLeading, rtl) {
+  return dx * directionSign(rtl) * (fromLeading ? 1 : -1);
+}
+function predictivePeek(travel, width) {
+  if (width <= 0) return 0;
+  return clampProgress(travel / (width * NAV_PREDICTIVE_SPAN));
+}
+function predictiveScale(peek) {
+  return 1 - (1 - NAV_PREDICTIVE_SCALE) * clampProgress(peek);
+}
+function predictiveShift(peek, width, fromLeading, rtl) {
+  return clampProgress(peek) * width * NAV_PREDICTIVE_SHIFT * directionSign(rtl) * (fromLeading ? 1 : -1);
+}
 function modalTranslateY(progress, height) {
   return (1 - clampProgress(progress)) * height;
 }
@@ -78,15 +108,17 @@ function NavBackButton({
   previousTitle,
   platform: platformProp,
   accessibilityLabel,
-  disabled = false
+  disabled = false,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("navigation", DEFAULT_NAVIGATION_LABELS, labelsProp);
+  const theme = useLoamTheme("navigation");
   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");
+  const label = accessibilityLabel ?? (previousTitle ? labels.backTo(previousTitle) : labels.back);
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
@@ -121,38 +153,47 @@ function NavBar({
   previousTitle,
   onBack,
   backLabel,
+  labels,
   leading,
   trailing
 }) {
   const { styles } = useStyles(sheet, { platform });
-  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "header", style: styles.bar, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
     onBack ? /* @__PURE__ */ jsx(
       NavBackButton,
       {
         platform,
         previousTitle,
         accessibilityLabel: previousTitle ? void 0 : backLabel,
+        labels,
         onPress: onBack
       }
     ) : leading,
-    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.barTitle, children: title }),
+    /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", numberOfLines: 1, style: styles.barTitle, children: title }),
     trailing ? /* @__PURE__ */ jsx(View, { style: styles.barTrailing, children: trailing }) : null
   ] });
 }
+function setInert(node, hidden) {
+  if (Platform.OS !== "web" || node == null) return;
+  node.inert = hidden;
+}
 function navPlatform(platform) {
   return platform === "Android" ? "Android" : "iOS";
 }
-function NavigationStack({
+function NavStack({
   screens,
   onPop,
   onExit,
   platform: platformProp,
   swipeEnabled,
-  backLabel = "Back",
+  backLabel: backLabelProp,
+  labels: labelsProp,
   announce = true,
   style
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("navigation", DEFAULT_NAVIGATION_LABELS, labelsProp);
+  const backLabel = backLabelProp ?? labels.back;
+  const theme = useLoamTheme("navigation");
   const platform = platformProp ?? navPlatform(theme.platform);
   const { styles } = useStyles(sheet, { platform });
   const rtl = theme.rtl;
@@ -161,25 +202,27 @@ function NavigationStack({
   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 [width, setWidth] = React.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 progress = React.useRef(new Animated.Value(1)).current;
+  const peek = React.useRef(new Animated.Value(0)).current;
+  const [peekFrom, setPeekFrom] = React.useState(null);
+  const [exiting, setExiting] = React.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 });
+  const pageEasing = React.useMemo(() => Easing.bezier(...page.easing), [page.easing]);
+  const live = React.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(
+  const screenRef = React.useRef(null);
+  const announceRef = React.useRef(null);
+  const pendingFocusRef = React.useRef(null);
+  const skipExitRef = React.useRef(false);
+  const historyRef = React.useRef(null);
+  const revealTop = React.useCallback(
     (screen) => {
       if (announce) {
         const text = screen.announcement ?? screen.title;
@@ -190,7 +233,7 @@ function NavigationStack({
     },
     [announce]
   );
-  React2.useEffect(() => {
+  React.useEffect(() => {
     const wanted = pendingFocusRef.current;
     if (wanted === null || wanted !== top?.key) return;
     pendingFocusRef.current = null;
@@ -199,7 +242,7 @@ function NavigationStack({
     const tag = findNodeHandle(node);
     if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
   });
-  React2.useEffect(() => {
+  React.useEffect(() => {
     const previous = historyRef.current;
     if (top) historyRef.current = { depth, key: top.key, screen: top };
     if (!top) return;
@@ -208,6 +251,8 @@ function NavigationStack({
     if (skipExitRef.current) {
       skipExitRef.current = false;
       progress.setValue(1);
+      peek.setValue(0);
+      setPeekFrom(null);
       revealTop(top);
       return;
     }
@@ -236,7 +281,7 @@ function NavigationStack({
     }
     revealTop(top);
   }, [depth, top?.key]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (platform !== "Android") return;
     const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
       const { top: current, below: parent, onPop: pop, onExit: exit } = live.current;
@@ -250,11 +295,33 @@ function NavigationStack({
     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(
+  const swipeActive = (swipeEnabled ?? true) && canPop && exiting === null;
+  const startXRef = React.useRef(0);
+  const fromLeadingRef = React.useRef(true);
+  const swipeRef = React.useRef({ active: swipeActive, page, pageEasing, platform, theme });
+  swipeRef.current = { active: swipeActive, page, pageEasing, platform, theme };
+  const settle = (t, android, speed, w) => {
+    if (android) {
+      const velocity2 = w > 0 ? speed / (w * NAV_PREDICTIVE_SPAN) * 1e3 : 0;
+      Animated.spring(peek, {
+        toValue: 0,
+        ...springConfig(t, "ss", { velocity: velocity2 }),
+        useNativeDriver: true
+      }).start(({ finished }) => {
+        if (finished) setPeekFrom(null);
+      });
+      return;
+    }
+    const velocity = w > 0 ? -speed / w * 1e3 : 0;
+    Animated.spring(progress, {
+      toValue: 1,
+      ...springConfig(t, "ss", { velocity }),
+      useNativeDriver: true
+    }).start();
+  };
+  const settleRef = React.useRef(settle);
+  settleRef.current = settle;
+  const pan = React.useMemo(
     () => PanResponder.create({
       onStartShouldSetPanResponderCapture: (e) => {
         startXRef.current = e.nativeEvent.locationX;
@@ -264,16 +331,39 @@ function NavigationStack({
         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);
+        const x = startXRef.current;
+        if (isFromLeadingEdge(x, w, isRtl)) {
+          fromLeadingRef.current = true;
+          return true;
+        }
+        if (swipeRef.current.platform === "Android" && isFromTrailingEdge(x, w, isRtl)) {
+          fromLeadingRef.current = false;
+          return true;
+        }
+        return false;
+      },
+      onPanResponderGrant: () => {
+        if (swipeRef.current.platform !== "Android") return;
+        peek.stopAnimation();
+        setPeekFrom(fromLeadingRef.current ? "leading" : "trailing");
       },
       onPanResponderMove: (_e, g) => {
         const { width: w, rtl: isRtl } = live.current;
+        if (swipeRef.current.platform === "Android") {
+          const travel = predictiveTravel(g.dx, fromLeadingRef.current, isRtl);
+          peek.setValue(predictivePeek(travel, w));
+          return;
+        }
         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)) {
+        const { page: spec, pageEasing: easing, platform: os } = swipeRef.current;
+        const android = os === "Android";
+        const fromLeading2 = android ? fromLeadingRef.current : true;
+        const travel = predictiveTravel(g.dx, fromLeading2, isRtl);
+        const speed = predictiveTravel(g.vx, fromLeading2, isRtl);
+        if (current && shouldCompletePop(travel, speed, w, false)) {
           Animated.timing(progress, {
             toValue: 0,
             duration: spec.duration,
@@ -282,41 +372,68 @@ function NavigationStack({
           }).start(({ finished }) => {
             if (!finished) return;
             skipExitRef.current = true;
-            pop?.(current, "edge-swipe");
+            pop?.(current, android ? "system-back" : "edge-swipe");
           });
           return;
         }
-        Animated.spring(progress, { toValue: 1, useNativeDriver: true }).start();
+        settleRef.current(swipeRef.current.theme, android, speed, w);
       },
       onPanResponderTerminate: () => {
-        Animated.spring(progress, { toValue: 1, useNativeDriver: true }).start();
+        const { platform: os, theme: t } = swipeRef.current;
+        settleRef.current(t, os === "Android", 0, live.current.width);
       }
     }),
-    [progress]
+    [progress, peek]
   );
-  const overTranslateX = React2.useMemo(
+  const overTranslateX = React.useMemo(
     () => progress.interpolate({
       inputRange: [0, 1],
       outputRange: [incomingTranslateX(0, width, rtl), incomingTranslateX(1, width, rtl)]
     }),
     [progress, width, rtl]
   );
-  const underTranslateX = React2.useMemo(
+  const underTranslateX = React.useMemo(
     () => progress.interpolate({
       inputRange: [0, 1],
       outputRange: [parallaxTranslateX(0, width, rtl), parallaxTranslateX(1, width, rtl)]
     }),
     [progress, width, rtl]
   );
-  const dimOpacity = React2.useMemo(
+  const dimOpacity = React.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 }] };
+  const fromLeading = peekFrom !== "trailing";
+  const peekScale = React.useMemo(
+    () => peek.interpolate({
+      inputRange: [0, 1],
+      outputRange: [predictiveScale(0), predictiveScale(1)]
+    }),
+    [peek]
+  );
+  const peekShift = React.useMemo(
+    () => peek.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, predictiveShift(1, width, fromLeading, rtl)]
+    }),
+    [peek, width, fromLeading, rtl]
+  );
+  const peekUnwind = React.useMemo(
+    () => peek.interpolate({ inputRange: [0, 1], outputRange: [1, 0], extrapolate: "clamp" }),
+    [peek]
+  );
+  const peekFade = React.useMemo(
+    () => peek.interpolate({ inputRange: [0, 1], outputRange: [1, NAV_PREDICTIVE_FADE] }),
+    [peek]
+  );
+  const overStyle = reduce ? { opacity: Animated.multiply(progress, peekFade) } : {
+    transform: [{ translateX: Animated.add(overTranslateX, peekShift) }, { scale: peekScale }]
+  };
+  const underStyle = reduce ? {} : { transform: [{ translateX: Animated.multiply(underTranslateX, peekUnwind) }] };
+  const underDim = Animated.multiply(dimOpacity, peekUnwind);
   if (!over) return /* @__PURE__ */ jsx(View, { style: [styles.root, style] });
   const rootScreen = screens[0];
   const overIsRoot = over === rootScreen;
@@ -325,9 +442,18 @@ function NavigationStack({
     under ? /* @__PURE__ */ jsxs(
       Animated.View,
       {
-        ref: exiting ? screenRef : void 0,
+        ref: (node) => {
+          if (exiting) screenRef.current = node;
+          setInert(node, !exiting);
+        },
         role: "group",
         accessibilityLabel: under.title,
+        ...exiting ? null : {
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          pointerEvents: "none",
+          "aria-hidden": true
+        },
         style: [styles.screen, underIsRoot ? styles.screenRoot : styles.screenPushed, underStyle],
         children: [
           under.hideBar ? null : /* @__PURE__ */ jsx(
@@ -337,7 +463,8 @@ function NavigationStack({
               title: under.title,
               leading: under.leading,
               trailing: under.trailing,
-              backLabel
+              backLabel,
+              labels: labelsProp
             }
           ),
           /* @__PURE__ */ jsx(View, { style: styles.body, children: under.content }),
@@ -345,7 +472,7 @@ function NavigationStack({
             Animated.View,
             {
               pointerEvents: "none",
-              style: [StyleSheet.absoluteFill, styles.dim, { opacity: dimOpacity }]
+              style: [StyleSheet.absoluteFill, styles.dim, { opacity: underDim }]
             }
           )
         ]
@@ -355,11 +482,22 @@ function NavigationStack({
     /* @__PURE__ */ jsxs(
       Animated.View,
       {
-        ref: exiting ? void 0 : screenRef,
+        ref: (node) => {
+          if (!exiting) screenRef.current = node;
+          setInert(node, exiting !== null);
+        },
         role: "group",
         accessibilityLabel: over.title,
         pointerEvents: exiting ? "none" : "auto",
-        style: [styles.screen, overIsRoot ? styles.screenRoot : styles.screenPushed, overStyle],
+        accessibilityElementsHidden: exiting !== null,
+        importantForAccessibility: exiting ? "no-hide-descendants" : "auto",
+        ...exiting ? { "aria-hidden": true } : null,
+        style: [
+          styles.screen,
+          overIsRoot ? styles.screenRoot : styles.screenPushed,
+          peekFrom !== null && !reduce ? styles.screenPeeking : null,
+          overStyle
+        ],
         ...swipeActive ? pan.panHandlers : {},
         children: [
           over.hideBar ? null : /* @__PURE__ */ jsx(
@@ -374,7 +512,8 @@ function NavigationStack({
               } : void 0,
               leading: over.leading,
               trailing: over.trailing,
-              backLabel
+              backLabel,
+              labels: labelsProp
             }
           ),
           /* @__PURE__ */ jsx(View, { style: styles.body, children: over.content })
@@ -407,6 +546,12 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface,
     ...theme.shadow.lg
   },
+  // A screen held in a predictive-back preview reads as a card lifted off the
+  // stack: rounded and clipped to the radius while it is shrunk.
+  screenPeeking: {
+    borderRadius: theme.radius.lg,
+    overflow: "hidden"
+  },
   // The wash over the parallaxing parent. `scrimLight` already carries the
   // alpha, so the animation only scales it from 0 to 1.
   dim: {
@@ -415,7 +560,7 @@ var sheet = createStyleSheet((theme) => ({
   body: {
     flex: 1
   },
-  // Matches `Header`'s metrics: `layout.appbarH` is the only height in the
+  // Matches `NavHeader`'s metrics: `layout.appbarH` is the only height in the
   // system that branches on platform (44 on iOS, 64 on Android).
   bar: {
     flexDirection: "row",
@@ -488,27 +633,35 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 var FALLBACK_PANEL_HEIGHT = 640;
+function setInert2(node, hidden) {
+  if (Platform.OS !== "web" || node == null) return;
+  node.inert = hidden;
+}
 function NavModal({
   open,
   title,
   onDismiss,
-  dismissLabel = "Cancel",
+  dismissLabel: dismissLabelProp,
   confirmLabel,
   onConfirm,
   children,
   announcement,
-  scrimLabel = "Dismiss"
+  scrimLabel: scrimLabelProp,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("navigation", DEFAULT_NAVIGATION_LABELS, labelsProp);
+  const dismissLabel = dismissLabelProp ?? labels.cancel;
+  const scrimLabel = scrimLabelProp ?? labels.dismiss;
+  const theme = useLoamTheme("navigation");
   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 [mounted, setMounted] = React.useState(open);
+  const progress = React.useRef(new Animated.Value(0)).current;
+  const heightRef = React.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(() => {
+  const enterEasing = React.useMemo(() => Easing.bezier(...enter.easing), [enter.easing]);
+  const exitEasing = React.useMemo(() => Easing.bezier(...exit.easing), [exit.easing]);
+  React.useEffect(() => {
     if (open) {
       setMounted(true);
       AccessibilityInfo.announceForAccessibility(announcement ?? title);
@@ -524,7 +677,7 @@ function NavModal({
       if (finished) setMounted(false);
     });
   }, [open]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!mounted || !open) return;
     progress.setValue(0);
     Animated.timing(progress, {
@@ -534,7 +687,7 @@ function NavModal({
       useNativeDriver: true
     }).start();
   }, [mounted]);
-  const [panelHeight, setPanelHeight] = React2.useState(FALLBACK_PANEL_HEIGHT);
+  const [panelHeight, setPanelHeight] = React.useState(FALLBACK_PANEL_HEIGHT);
   const onPanelLayout = (e) => {
     const next = e.nativeEvent.layout.height;
     if (next > 0 && next !== heightRef.current) {
@@ -542,7 +695,7 @@ function NavModal({
       setPanelHeight(next);
     }
   };
-  const translateY = React2.useMemo(
+  const translateY = React.useMemo(
     () => progress.interpolate({
       inputRange: [0, 1],
       outputRange: [modalTranslateY(0, panelHeight), modalTranslateY(1, panelHeight)]
@@ -610,18 +763,18 @@ function NavTabView({
   announce = true,
   style
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("navigation");
   const { styles } = useStyles(sheet2);
   const page = theme.motion.page;
-  const pageEasing = React2.useMemo(() => Easing.bezier(...page.easing), [page.easing]);
+  const pageEasing = React.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] : []));
+  const [outgoing, setOutgoing] = React.useState(null);
+  const previousRef = React.useRef(active);
+  const visited = React.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 fade = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
     const previous = previousRef.current;
     previousRef.current = active;
     if (!active || !previous || previous.value === active.value) return;
@@ -652,6 +805,7 @@ function NavTabView({
     return /* @__PURE__ */ jsx(
       Animated.View,
       {
+        ref: (node) => setInert2(node, !isActive),
         role: "group",
         accessibilityLabel: pane.title,
         importantForAccessibility: isActive ? "auto" : "no-hide-descendants",
@@ -675,21 +829,21 @@ function NavHero({
   accessibilityLabel,
   announcement
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("navigation");
   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 heroEasing = React.useMemo(() => Easing.bezier(...hero.easing), [hero.easing]);
+  const [mounted, setMounted] = React.useState(active);
+  const progress = React.useRef(new Animated.Value(0)).current;
+  const [bounds, setBounds] = React.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);
+  const endRef = React.useRef(onMorphEnd);
   endRef.current = onMorphEnd;
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (active) {
       setMounted(true);
       if (announcement ?? accessibilityLabel) {
@@ -709,7 +863,7 @@ function NavHero({
       endRef.current?.(false);
     });
   }, [active]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!mounted || !active) return;
     progress.setValue(0);
     Animated.timing(progress, {
@@ -871,4 +1025,4 @@ var sheet2 = createStyleSheet((theme) => ({
   }
 }));
 
-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 };
+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_PREDICTIVE_FADE, NAV_PREDICTIVE_SCALE, NAV_PREDICTIVE_SHIFT, NAV_PREDICTIVE_SPAN, NAV_SWIPE_COMPLETE_FRACTION, NAV_SWIPE_COMPLETE_VELOCITY, NAV_TAB_FADE_SCALE, NavBackButton, NavHero, NavModal, NavStack, NavTabView, claimsHorizontalAxis, clampProgress, directionSign, heroContentOpacity, heroTransform, incomingTranslateX, isFromLeadingEdge, isFromTrailingEdge, modalTranslateY, parallaxDimOpacity, parallaxTranslateX, predictivePeek, predictiveScale, predictiveShift, predictiveTravel, progressFromEdgeSwipe, shouldCompletePop, tabFadeScale };

package/dist/{chunk-TUTI5HOZ.js → chunk-QIKT7LIB.js}

@@ -1,9 +1,12 @@
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/description-list/description-list.tsx
+var DEFAULT_LABELS = {
+  pair: (term, description) => `${term}, ${description}`
+};
 var DescriptionListContext = React.createContext({
   layout: "stacked",
   density: "comfortable"
@@ -15,12 +18,13 @@ function DescriptionList({
   items,
   // Accepted for API consistency; static data drives no motion.
   motion: _motion,
-  children
+  children,
+  labels
 }) {
   const { styles } = useStyles(sheet);
   const ctx = React.useMemo(
-    () => ({ layout, density }),
-    [layout, density]
+    () => ({ layout, density, labels }),
+    [layout, density, labels]
   );
   const rows = [
     ...items?.map((entry, i) => /* @__PURE__ */ jsx(DescriptionItem, { term: entry.term, description: entry.description }, `item-${i}`)) ?? [],
@@ -33,13 +37,15 @@ function DescriptionList({
 }
 function DescriptionItem({
   term,
-  description
+  description,
+  labels: labelsProp
 }) {
-  const { layout, density } = React.useContext(DescriptionListContext);
+  const { layout, density, labels: ctxLabels } = React.useContext(DescriptionListContext);
+  const labels = useLabels("descriptionList", DEFAULT_LABELS, labelsProp ?? ctxLabels);
   const { styles } = useStyles(sheet, { layout, density });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("description-list");
   const isInline = layout === "inline";
-  const pairLabel = typeof term === "string" && typeof description === "string" ? `${term}, ${description}` : void 0;
+  const pairLabel = typeof term === "string" && typeof description === "string" ? labels.pair(term, description) : void 0;
   return /* @__PURE__ */ jsxs(
     View,
     {