@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/{chunk-AWJOCGFZ.js → chunk-M656FYNH.js}

@@ -1,13 +1,20 @@
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { Animated, AccessibilityInfo, Easing, Pressable, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var DEFAULT_DURATION = 1200;
+var DEFAULT_LABELS = {
+  hint: "Press and hold to confirm. Releasing early cancels.",
+  confirmed: "Confirmed",
+  holding: "Keep holding to confirm",
+  cancelled: "Cancelled"
+};
 function useForeground(variant, disabled) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("hold-to-confirm");
   if (disabled) return theme.color.text3;
   return variant === "primary" ? theme.color.accentInk : theme.color.dangerInk;
 }
@@ -23,10 +30,12 @@ function HoldToConfirm({
   leadingIcon,
   motion = "full",
   accessibilityLabel,
-  onProgress
+  onProgress,
+  labels: labelsProp
 }) {
+  const labels = useLabels("holdToConfirm", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { variant, size, disabled, fullWidth });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("hold-to-confirm");
   const fg = useForeground(variant, disabled);
   const iconSize = theme.ctl.icon[size];
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
@@ -60,14 +69,14 @@ function HoldToConfirm({
   const fireConfirm = React.useCallback(() => {
     clear();
     setHolding(false);
-    setMessage("Confirmed");
+    setMessage(labels.confirmed);
     haptics.impact("heavy");
     onConfirm();
-  }, [clear, onConfirm]);
+  }, [clear, onConfirm, labels.confirmed]);
   const start = React.useCallback(() => {
     if (disabled || timer.current !== void 0) return;
     setHolding(true);
-    setMessage("Keep holding to confirm");
+    setMessage(labels.holding);
     progress.stopAnimation();
     progress.setValue(0);
     Animated.timing(progress, {
@@ -80,7 +89,7 @@ function HoldToConfirm({
       Animated.spring(scale, { toValue: 0.97, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
     }
     timer.current = setTimeout(fireConfirm, duration);
-  }, [disabled, duration, motion, progress, scale, fireConfirm]);
+  }, [disabled, duration, motion, progress, scale, fireConfirm, labels.holding]);
   const cancel = React.useCallback(() => {
     if (motion === "full") {
       Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
@@ -88,7 +97,7 @@ function HoldToConfirm({
     if (timer.current === void 0) return;
     clear();
     setHolding(false);
-    setMessage("Cancelled");
+    setMessage(labels.cancelled);
     progress.stopAnimation();
     Animated.timing(progress, {
       toValue: 0,
@@ -96,7 +105,7 @@ function HoldToConfirm({
       easing: Easing.bezier(...theme.motion.exit.easing),
       useNativeDriver: false
     }).start();
-  }, [clear, motion, progress, scale, theme.motion.exit]);
+  }, [clear, motion, progress, scale, theme.motion.exit, labels.cancelled]);
   React.useEffect(() => clear, [clear]);
   const width = progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] });
   const label = holding && confirmingLabel ? confirmingLabel : children;
@@ -106,7 +115,7 @@ function HoldToConfirm({
     {
       accessibilityRole: "button",
       accessibilityLabel: a11yLabel,
-      accessibilityHint: "Press and hold to confirm. Releasing early cancels.",
+      accessibilityHint: labels.hint,
       accessibilityState: { disabled },
       disabled,
       onPress: disabled || !srEnabled ? void 0 : fireConfirm,
@@ -174,13 +183,16 @@ var sheet = createStyleSheet((theme) => ({
       fullWidth: { true: { alignSelf: "stretch" }, false: {} }
     }
   },
-  // Translucent state-layer fill, anchored to the start edge, behind the label.
+  // Darkening fill, anchored to the start edge, behind the label. A state-layer
+  // tint (~10%) vanishes on a saturated danger/accent fill; the scrim at 70%
+  // reads clearly in both themes while keeping the on-ink label legible.
   fill: {
     position: "absolute",
     top: 0,
     bottom: 0,
     start: 0,
-    backgroundColor: theme.state.pressed
+    backgroundColor: theme.color.scrim,
+    opacity: theme.opacity[72]
   },
   label: {
     fontFamily: theme.font.sans,

package/dist/{chunk-35OFI3JG.js → chunk-MKSNFG7H.js}

@@ -1,9 +1,12 @@
-import { Thinking } from './chunk-XXXEFXY5.js';
-import { Spinner } from './chunk-O7AE6DAF.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Thinking } from './chunk-W74TXYFB.js';
+import { Spinner } from './chunk-KQZ3GLHR.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { StyleSheet, View, Text, Pressable } from 'react-native';
+import { StyleSheet, View, Text, Pressable, Animated } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { MOTION_MOVE } from '@btndprojects/loam-tokens';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var SYSTEM_STATE_META = {
@@ -13,8 +16,13 @@ var SYSTEM_STATE_META = {
   maintenance: { tone: "warn", icon: "wrench", code: "Soon" },
   offline: { tone: "info", icon: "wifi-off", code: "Offline" }
 };
+var DEFAULT_LABELS = {
+  copyErrorId: (id) => `Copy error id ${id}`,
+  soon: "Soon",
+  offline: "Offline"
+};
 function useTone(tone) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("system-state");
   switch (tone) {
     case "danger":
       return theme.color.dangerOnSoft;
@@ -37,11 +45,14 @@ function SystemState({
   secondaryLabel,
   onSecondary,
   errorId,
-  onCopyErrorId
+  onCopyErrorId,
+  labels: labelsProp
 }) {
+  const labels = useLabels("systemState", DEFAULT_LABELS, labelsProp);
   const meta = SYSTEM_STATE_META[variant];
+  const variantCode = variant === "maintenance" ? labels.soon : variant === "offline" ? labels.offline : meta.code;
   const { styles } = useStyles(sheet, { tone: meta.tone });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("system-state");
   const tone = useTone(meta.tone);
   if (process.env.NODE_ENV !== "production" && !primaryLabel && !secondaryLabel) {
     console.warn(
@@ -51,14 +62,14 @@ function SystemState({
   return /* @__PURE__ */ jsxs(View, { style: styles.base, accessibilityRole: "alert", children: [
     /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
       /* @__PURE__ */ jsx(View, { style: styles.tile, children: /* @__PURE__ */ jsx(Icon, { name: icon ?? meta.icon, size: theme.icon.xl, color: tone }) }),
-      /* @__PURE__ */ jsx(Text, { style: [styles.code, { color: tone }], children: code ?? meta.code }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.code, { color: tone }], children: code ?? variantCode }),
       /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
       description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
       errorId ? /* @__PURE__ */ jsxs(
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: `Copy error id ${errorId}`,
+          accessibilityLabel: labels.copyErrorId(errorId),
           onPress: onCopyErrorId ? () => onCopyErrorId(errorId) : void 0,
           style: ({ pressed }) => [styles.errorChip, pressed && styles.pressed],
           children: [
@@ -244,29 +255,45 @@ function useLate(active, after) {
   }, [active, after]);
   return late;
 }
+var AREA_DEFAULT_LABELS = {
+  loading: "Loading",
+  late: "Still working\u2026",
+  errorTitle: "Couldn\u2019t load this",
+  retry: "Try again",
+  refresh: "Refresh",
+  refreshing: (refresh) => `${refresh}\u2026`,
+  empty: "Nothing here yet."
+};
 function AreaState({
   state = "idle",
   children,
   minHeight = 160,
   loadingContent,
-  loadingLabel = "Loading",
-  lateLabel = "Still working\u2026",
+  loadingLabel: loadingLabelProp,
+  lateLabel: lateLabelProp,
   loadingFloor,
   lateAfter,
   empty,
   error,
-  errorTitle = "Couldn\u2019t load this",
+  errorTitle: errorTitleProp,
   errorDescription,
-  retryLabel = "Try again",
+  retryLabel: retryLabelProp,
   onRetry,
   staleLabel,
-  refreshLabel = "Refresh",
+  refreshLabel: refreshLabelProp,
   onRefresh,
   refreshing = false,
   idle,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("system-state");
+  const labels = useLabels("areaState", AREA_DEFAULT_LABELS, labelsProp);
+  const loadingLabel = loadingLabelProp ?? labels.loading;
+  const lateLabel = lateLabelProp ?? labels.late;
+  const errorTitle = errorTitleProp ?? labels.errorTitle;
+  const retryLabel = retryLabelProp ?? labels.retry;
+  const refreshLabel = refreshLabelProp ?? labels.refresh;
   const { styles } = useStyles(areaSheet);
   const floor = loadingFloor ?? theme.timing.loadingFloor;
   const lateMs = lateAfter ?? theme.timing.lateAfter;
@@ -274,6 +301,32 @@ function AreaState({
   const showLoading = useLoadingFloor(isLoading, floor);
   const late = useLate(isLoading, lateMs);
   const busy = isLoading || showLoading;
+  const level = useResolvedMotion(motion, "system-state");
+  const phase = showLoading ? "loading" : state === "stale" ? "ready" : state;
+  const shownPhase = React.useRef(phase);
+  const through = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (shownPhase.current === phase) return;
+    shownPhase.current = phase;
+    if (level === "none") return;
+    through.setValue(0);
+    Animated.spring(through, {
+      ...springConfig(theme, "de"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, [phase, level, through, theme]);
+  const throughStyle = {
+    opacity: through,
+    transform: level === "full" ? [
+      {
+        scale: through.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1 - MOTION_MOVE.scaleIn, 1]
+        })
+      }
+    ] : []
+  };
   const loadingView = /* @__PURE__ */ jsxs(View, { style: styles.center, children: [
     loadingContent ?? /* @__PURE__ */ jsx(Spinner, { size: "lg", accessibilityLabel: loadingLabel, motion }),
     late ? (
@@ -310,7 +363,7 @@ function AreaState({
         body = /* @__PURE__ */ jsx(View, { style: styles.fill });
         break;
       case "empty":
-        body = empty ?? /* @__PURE__ */ jsx(View, { style: styles.center, children: /* @__PURE__ */ jsx(Text, { style: styles.errorBody, children: "Nothing here yet." }) });
+        body = empty ?? /* @__PURE__ */ jsx(View, { style: styles.center, children: /* @__PURE__ */ jsx(Text, { style: styles.errorBody, children: labels.empty }) });
         break;
       case "error":
         body = errorView;
@@ -333,13 +386,13 @@ function AreaState({
               Pressable,
               {
                 accessibilityRole: "button",
-                accessibilityLabel: refreshing ? `${refreshLabel}\u2026` : refreshLabel,
+                accessibilityLabel: refreshing ? labels.refreshing(refreshLabel) : refreshLabel,
                 accessibilityState: { busy: refreshing, disabled: refreshing },
                 disabled: refreshing,
                 onPress: refreshing ? void 0 : onRefresh,
                 style: ({ pressed }) => [styles.refresh, pressed && styles.pressed],
                 children: [
-                  refreshing ? /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: `${refreshLabel}\u2026` }) : /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.xs, color: theme.color.text }),
+                  refreshing ? /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: labels.refreshing(refreshLabel) }) : /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.xs, color: theme.color.text }),
                   /* @__PURE__ */ jsx(Text, { style: styles.refreshLabel, children: refreshLabel })
                 ]
               }
@@ -364,7 +417,7 @@ function AreaState({
       "aria-busy": busy,
       accessibilityState: { busy },
       ...{ "aria-live": "polite" },
-      children: body
+      children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.fill, throughStyle], children: body })
     }
   );
 }

package/dist/{chunk-4GBOGOTV.js → chunk-NBEF4EPJ.js}

@@ -1,10 +1,15 @@
-import { NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { NODE_STATE_WORD, NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { View, Animated, Text, Easing } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  states: { ...NODE_STATE_WORD },
+  latest: (count) => `${count} new`
+};
 function toneSkin(theme, tone) {
   switch (tone) {
     case "accent":
@@ -52,9 +57,10 @@ function TimelineItem({
   isLast = true,
   animatedStyle
 }) {
-  const { density } = React.useContext(TimelineContext);
+  const { density, labels: ctxLabels } = React.useContext(TimelineContext);
+  const labels = useLabels("timeline", DEFAULT_LABELS, ctxLabels);
   const { styles } = useStyles(sheet, { density });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("timeline");
   const g = GEOMETRY[density];
   const nodeIcon = icon ?? (state ? NODE_STATE_ICON[state] : void 0);
   const skin = tone ? toneSkin(theme, tone) : state ? {
@@ -72,6 +78,9 @@ function TimelineItem({
       View,
       {
         testID: state ? `timeline-node-${state}` : `timeline-node-tone-${tone}`,
+        accessible: state ? true : void 0,
+        role: state ? "img" : void 0,
+        accessibilityLabel: state ? labels.states[state] : void 0,
         style: {
           width: g.node,
           height: g.node,
@@ -134,11 +143,12 @@ function Timeline({
   density = "comfortable",
   motion = "none",
   label,
+  labels,
   style,
   children
 }) {
   const { styles } = useStyles(sheet, { density });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("timeline");
   const staggered = motion === "full" && !theme.reduceMotion;
   const childArray = items ? null : React.Children.toArray(children).filter(React.isValidElement);
   const count = items ? items.length : childArray?.length ?? 0;
@@ -150,7 +160,7 @@ function Timeline({
     );
   }
   const values = valuesRef.current;
-  const ctx = React.useMemo(() => ({ density }), [density]);
+  const ctx = React.useMemo(() => ({ density, labels }), [density, labels]);
   React.useEffect(() => {
     if (!staggered) {
       values.forEach((v) => v.setValue(1));

package/dist/chunk-NNCOFLNE.js

@@ -0,0 +1,24 @@
+// src/lib/storage.ts
+function storageKey(component, id, version = 1) {
+  return `loam.${component}.${id}.v${version}`;
+}
+function readStored(storage, key) {
+  if (!storage) return null;
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function writeStored(storage, key, value) {
+  if (!storage) return;
+  try {
+    storage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+
+export { readStored, storageKey, writeStored };

package/dist/{chunk-4YQOR7JM.js → chunk-NTQ2F3AU.js}

@@ -1,17 +1,18 @@
-import { SearchExpand } from './chunk-47FWHGUN.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { Pressable, View, Text } from 'react-native';
+import { ExpandingSearchField } from './chunk-DVGBZ3TX.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import * as React from 'react';
+import { Pressable, View, Animated, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-function HeaderAction({
+function NavHeaderAction({
   icon,
   accessibilityLabel,
   onPress,
   disabled = false
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("nav-header");
   const { styles } = useStyles(sheet, { align: "left", large: false });
   const color = disabled ? theme.color.text3 : theme.color.text;
   return /* @__PURE__ */ jsx(
@@ -27,48 +28,100 @@ function HeaderAction({
     }
   );
 }
-function Header({
+var DEFAULT_LABELS = {
+  back: "Back"
+};
+var STRETCH = 1.06;
+var SHRINK = 0.9;
+function NavHeader({
   title,
   subtitle,
   leading,
-  leadingLabel = "Back",
+  leadingLabel,
   onLeadingPress,
   leadingSlot,
   trailing,
   align = "left",
   large = false,
   search = false,
-  searchPlaceholder = "Search",
+  searchPlaceholder,
+  labels: labelsProp,
   searchRecents = [],
   searchValue,
   onSearchChangeText,
   onSearchCancel,
-  searchSlot
+  searchSlot,
+  scrollY
 }) {
+  const labels = useLabels("navHeader", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { align, large });
+  const theme = useLoamTheme("nav-header");
   const showSearch = search || searchSlot != null;
+  const collapsing = large && scrollY != null;
+  const [span, setSpan] = React.useState(theme.space[48]);
+  const largeStyle = collapsing ? {
+    opacity: scrollY.interpolate({
+      inputRange: [0, span * 0.6],
+      outputRange: [1, 0],
+      extrapolate: "clamp"
+    }),
+    transform: [
+      {
+        scale: scrollY.interpolate({
+          inputRange: [-span, 0, span],
+          outputRange: [STRETCH, 1, SHRINK],
+          extrapolate: "clamp"
+        })
+      }
+    ],
+    transformOrigin: "left center"
+  } : null;
+  const inlineStyle = collapsing ? {
+    opacity: scrollY.interpolate({
+      inputRange: [span * 0.5, span],
+      outputRange: [0, 1],
+      extrapolate: "clamp"
+    })
+  } : null;
   return /* @__PURE__ */ jsxs(View, { accessibilityRole: "header", style: styles.container, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
       /* @__PURE__ */ jsx(View, { style: styles.leftSide, children: leadingSlot != null ? leadingSlot : leading ? /* @__PURE__ */ jsx(
-        HeaderAction,
+        NavHeaderAction,
         {
           icon: leading,
-          accessibilityLabel: leadingLabel,
+          accessibilityLabel: leadingLabel ?? labels.back,
           onPress: onLeadingPress
         }
       ) : null }),
-      /* @__PURE__ */ jsx(View, { style: styles.titleWrap, children: large ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(View, { style: styles.titleWrap, children: collapsing ? /* @__PURE__ */ jsx(
+        Animated.Text,
+        {
+          numberOfLines: 1,
+          style: [styles.title, inlineStyle],
+          "aria-hidden": true,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: title
+        }
+      ) : large ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.title, children: title }),
         subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.subtitle, children: subtitle }) : null
       ] }) }),
       /* @__PURE__ */ jsx(View, { style: styles.rightSide, children: trailing })
     ] }),
-    large ? /* @__PURE__ */ jsxs(View, { style: styles.largeBlock, children: [
-      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.largeTitle, children: title }),
-      subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.largeSubtitle, children: subtitle }) : null
-    ] }) : null,
+    large ? /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: styles.largeBlock,
+        onLayout: (e) => setSpan(Math.max(1, e.nativeEvent.layout.height)),
+        children: [
+          /* @__PURE__ */ jsx(Animated.Text, { numberOfLines: 1, style: [styles.largeTitle, largeStyle], children: title }),
+          subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.largeSubtitle, children: subtitle }) : null
+        ]
+      }
+    ) : null,
     showSearch ? /* @__PURE__ */ jsx(View, { style: styles.searchRow, children: searchSlot != null ? searchSlot : /* @__PURE__ */ jsx(
-      SearchExpand,
+      ExpandingSearchField,
       {
         placeholder: searchPlaceholder,
         recents: searchRecents,
@@ -124,7 +177,7 @@ var sheet = createStyleSheet((theme) => ({
     }
   },
   // `type.headline` (17/22/600) is the nav-bar title role on both ramps (HIG
-  // headline / M3 title), is what `NavigationStack`'s own `NavBar` already uses
+  // headline / M3 title), is what `NavStack`'s own `NavBar` already uses
   // for the same element, and is what the design reference draws (16/700). The
   // deprecated `fontSize[20]` (20) it replaced was the web h3, and left no room
   // for a subtitle inside the 44dp row.
@@ -201,4 +254,4 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { Header, HeaderAction };
+export { NavHeader, NavHeaderAction };