@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/{chunk-2A5NIQAK.js → chunk-5RENVKBQ.js}

@@ -1,14 +1,23 @@
-import { PhaseAnnouncement, NoteBlock } from './chunk-N32RGOA5.js';
-import { Card, CardHeader, CardTitle, CardContent, CardFooter } from './chunk-KMI5ML5I.js';
-import { decorativeProps, camInk } from './chunk-RW6ZL2FQ.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { PhaseAnnouncement, NoteBlock } from './chunk-LKFC4CS7.js';
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from './chunk-YXOAPXMU.js';
+import { useAnalyzerCopy, decorativeProps, camInk } from './chunk-HJLPZA4X.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, motionTiming, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Text, Platform, findNodeHandle, AccessibilityInfo } from 'react-native';
+import { Animated, View, Text, Platform, findNodeHandle, AccessibilityInfo } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { DONE_LABEL, permissionScreen, PERMISSION } from '@btndprojects/loam-analyzer';
+import { permissionScreen } from '@btndprojects/loam-analyzer';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+// src/camera-permission/camera-permission-labels.ts
+var DEFAULT_CAMERA_PERMISSION_LABELS = {
+  takeAnother: "Take another"
+};
+function useCameraPermissionLabels(own) {
+  return useLabels("cameraPermission", DEFAULT_CAMERA_PERMISSION_LABELS, own);
+}
 var STATE_ICON = {
   undetermined: "camera",
   prompting: "camera",
@@ -24,13 +33,29 @@ function ScreenShell({
   inert = false,
   announce = true,
   autoFocus = false,
-  body
+  body,
+  copy: copyProp
 }) {
-  const theme = useLoamTheme();
+  const words = useAnalyzerCopy(copyProp);
+  const theme = useLoamTheme("camera-permission");
   const { styles } = useStyles(permissionSheet, { inert });
-  const screen = permissionScreen(state);
+  const screen = permissionScreen(state, words);
   const copy = body ?? screen.body;
   const heading = React.useRef(null);
+  const level = useResolvedMotion(void 0, "camera-permission");
+  const rise = React.useRef(new Animated.Value(level === "none" ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (level === "none") return;
+    if (level === "reduced") {
+      Animated.timing(rise, { ...motionTiming(level), toValue: 1, useNativeDriver: true }).start();
+    } else {
+      Animated.spring(rise, {
+        ...springConfig(theme, "ds"),
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    }
+  }, []);
   React.useLayoutEffect(() => {
     if (!autoFocus) return;
     const node = heading.current;
@@ -39,10 +64,16 @@ function ScreenShell({
     if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
   }, [autoFocus]);
   return /* @__PURE__ */ jsx(
-    View,
+    Animated.View,
     {
       testID: `loam-permission-${state}`,
-      style: styles.shell,
+      style: [
+        styles.shell,
+        {
+          opacity: rise,
+          transform: level === "full" ? [{ translateY: rise.interpolate({ inputRange: [0, 1], outputRange: [12, 0] }) }] : []
+        }
+      ],
       children: /* @__PURE__ */ jsxs(Card, { variant: "elevated", style: styles.card, children: [
         /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? `${screen.heading}. ${copy}` : null }),
         /* @__PURE__ */ jsxs(CardHeader, { children: [
@@ -57,22 +88,33 @@ function ScreenShell({
           /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx(Text, { ref: heading, accessibilityRole: "header", style: styles.heading, children: screen.heading }) }),
           /* @__PURE__ */ jsx(Text, { style: styles.body, children: copy })
         ] }),
-        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(NoteBlock, { title: PERMISSION[state].label, description: screen.note }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(NoteBlock, { title: words.permission[state].label, description: screen.note }) }),
         /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
-          screen.secondary ? /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, disabled: inert, onPress: onSecondary, children: screen.secondary }) }) : null,
+          screen.secondary ? /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "lg",
+              fullWidth: true,
+              disabled: inert,
+              onPress: onSecondary,
+              children: screen.secondary
+            }
+          ) }) : null,
           /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, disabled: inert, onPress: onPrimary, children: screen.primary }) })
         ] }) })
       ] })
     }
   );
 }
-function PermissionPrimer({
+function CameraPermissionPrimer({
   privacyStatement,
   prompting = false,
   onContinue,
   onUpload,
   autoFocus,
-  announce
+  announce,
+  copy
 }) {
   return /* @__PURE__ */ jsx(
     ScreenShell,
@@ -83,7 +125,8 @@ function PermissionPrimer({
       onPrimary: onContinue,
       onSecondary: onUpload,
       autoFocus,
-      announce
+      announce,
+      copy
     }
   );
 }
@@ -91,7 +134,8 @@ function CameraDenied({
   onOpenSettings,
   onUpload,
   autoFocus,
-  announce
+  announce,
+  copy
 }) {
   return /* @__PURE__ */ jsx(
     ScreenShell,
@@ -100,14 +144,16 @@ function CameraDenied({
       onPrimary: onOpenSettings,
       onSecondary: onUpload,
       autoFocus,
-      announce
+      announce,
+      copy
     }
   );
 }
 function CameraUnavailable({
   onUpload,
   autoFocus,
-  announce
+  announce,
+  copy
 }) {
   return /* @__PURE__ */ jsx(
     ScreenShell,
@@ -115,7 +161,8 @@ function CameraUnavailable({
       state: "unavailable",
       onPrimary: onUpload,
       autoFocus,
-      announce
+      announce,
+      copy
     }
   );
 }
@@ -126,48 +173,89 @@ function CameraPermissionScreen({
   onUpload,
   privacyStatement,
   autoFocus,
-  announce
+  announce,
+  copy
 }) {
-  if (state === "granted") return null;
-  if (state === "denied") {
+  const theme = useLoamTheme("camera-permission");
+  const level = useResolvedMotion(void 0, "camera-permission");
+  const last = React.useRef(state);
+  const fade = React.useRef(new Animated.Value(1)).current;
+  const [leaving, setLeaving] = React.useState(false);
+  const granted = state === "granted";
+  if (!granted) last.current = state;
+  React.useEffect(() => {
+    if (!granted) {
+      fade.setValue(1);
+      setLeaving(false);
+      return;
+    }
+    if (level === "none") return;
+    setLeaving(true);
+    Animated.timing(fade, {
+      duration: level === "reduced" ? theme.duration.fast : theme.duration.slow,
+      toValue: 0,
+      useNativeDriver: true
+    }).start(() => setLeaving(false));
+  }, [granted, level, fade]);
+  if (granted && !leaving) return null;
+  const shown = granted ? last.current : state;
+  return /* @__PURE__ */ jsx(Animated.View, { style: { opacity: fade }, pointerEvents: granted ? "none" : "auto", children: renderScreen(shown) });
+  function renderScreen(state2) {
+    if (state2 === "denied") {
+      return /* @__PURE__ */ jsx(
+        CameraDenied,
+        {
+          onOpenSettings,
+          onUpload,
+          autoFocus,
+          announce,
+          copy
+        }
+      );
+    }
+    if (state2 === "unavailable") {
+      return /* @__PURE__ */ jsx(
+        CameraUnavailable,
+        {
+          onUpload,
+          autoFocus,
+          announce,
+          copy
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
-      CameraDenied,
+      CameraPermissionPrimer,
       {
-        onOpenSettings,
+        prompting: state2 === "prompting",
+        privacyStatement,
+        onContinue: onRequestPermission,
         onUpload,
         autoFocus,
-        announce
+        announce,
+        copy
       }
     );
   }
-  if (state === "unavailable") {
-    return /* @__PURE__ */ jsx(CameraUnavailable, { onUpload, autoFocus, announce });
-  }
-  return /* @__PURE__ */ jsx(
-    PermissionPrimer,
-    {
-      prompting: state === "prompting",
-      privacyStatement,
-      onContinue: onRequestPermission,
-      onUpload,
-      autoFocus,
-      announce
-    }
-  );
 }
 function CaptureDone({
-  label = DONE_LABEL,
-  actionLabel = "Take another",
+  label: labelProp,
+  actionLabel,
+  labels,
+  copy,
   onTakeAnother,
   announce = true
 }) {
-  const theme = useLoamTheme();
+  const t = useCameraPermissionLabels(labels);
+  const words = useAnalyzerCopy(copy);
+  const label = labelProp ?? words.done;
+  const theme = useLoamTheme("camera-permission");
   const { styles } = useStyles(permissionSheet);
   return /* @__PURE__ */ jsxs(View, { testID: "loam-capture-done", style: styles.done, children: [
     /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? label : null }),
     /* @__PURE__ */ jsx(View, { accessible: false, style: styles.doneMark, ...decorativeProps(), children: /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.lg, color: theme.color.goodInk }) }),
     /* @__PURE__ */ jsx(Text, { style: [styles.doneLabel, { color: camInk(theme) }], children: label }),
-    /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, onPress: onTakeAnother, children: actionLabel })
+    /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, onPress: onTakeAnother, children: actionLabel ?? t.takeAnother })
   ] });
 }
 var permissionSheet = createStyleSheet((theme) => ({
@@ -251,4 +339,4 @@ var permissionSheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { CameraDenied, CameraPermissionScreen, CameraUnavailable, CaptureDone, PermissionPrimer };
+export { CameraDenied, CameraPermissionPrimer, CameraPermissionScreen, CameraUnavailable, CaptureDone };

package/dist/{chunk-2ZZ7TDJ4.js → chunk-5UTRIXQ6.js}

@@ -1,19 +1,23 @@
 import { resolveStepState } from './chunk-YLLCXTMC.js';
-import { NumberRoll } from './chunk-CUMUNPXY.js';
+import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { Animated, Easing, View, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var DEFAULT_LATE_LABEL = "Still working\u2026";
 var INDETERMINATE_SPAN = 0.4;
 var INDETERMINATE_CYCLES = 2;
 var INDETERMINATE_REST = 0.5;
+var DEFAULT_LABELS = {
+  lateLabel: "Still working\u2026",
+  percent: (percent) => `${percent}%`
+};
 function clamp(n, lo, hi) {
   return Math.max(lo, Math.min(hi, n));
 }
 function useFillColor(tone) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("progress");
   switch (tone) {
     case "good":
       return theme.color.good;
@@ -33,12 +37,14 @@ function Progress({
   showValue = false,
   label,
   late = false,
-  lateLabel = DEFAULT_LATE_LABEL,
+  lateLabel,
   motion = "full",
   animateValue = false,
-  accessibilityLabel
+  accessibilityLabel,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("progress");
+  const labels = useLabels("progress", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { size });
   const fillColor = useFillColor(tone);
   const indeterminate = value === void 0;
@@ -83,22 +89,19 @@ function Progress({
     outputRange: ["-40%", "100%"]
   });
   return /* @__PURE__ */ jsxs(View, { style: styles.outer, children: [
-    showHeader ? /* @__PURE__ */ jsx(View, { style: styles.header, children: late ? (
-      // `role="status"` (aria-live: polite on rn-web) announces the copy
-      // swap when work goes late, rather than silently sweeping on.
-      /* @__PURE__ */ jsx(View, { accessibilityRole: "text", role: "status", style: styles.latePill, children: /* @__PURE__ */ jsx(Text, { style: styles.lateText, children: lateLabel }) })
-    ) : label !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null }) : null,
+    showHeader ? /* @__PURE__ */ jsx(View, { style: styles.header, children: /* @__PURE__ */ jsx(View, { accessibilityRole: "text", role: "status", children: late ? /* @__PURE__ */ jsx(View, { style: styles.latePill, children: /* @__PURE__ */ jsx(Text, { style: styles.lateText, children: lateLabel ?? labels.lateLabel }) }) : label !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null }) }) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.wrap, children: [
       /* @__PURE__ */ jsx(
         View,
         {
           accessibilityRole: "progressbar",
-          accessibilityLabel,
-          accessibilityValue: indeterminate ? void 0 : { min: 0, max, now },
+          accessibilityLabel: accessibilityLabel ?? label,
+          accessibilityValue: indeterminate ? void 0 : { min: 0, max: 100, now },
           accessibilityState: indeterminate ? { busy: true } : void 0,
           "aria-valuemin": 0,
-          "aria-valuemax": max,
+          "aria-valuemax": 100,
           "aria-valuenow": indeterminate ? void 0 : now,
+          "aria-valuetext": indeterminate ? void 0 : labels.percent(now),
           style: styles.track,
           children: indeterminate ? /* @__PURE__ */ jsx(
             Animated.View,
@@ -115,7 +118,7 @@ function Progress({
         NumberRoll,
         {
           value: now,
-          formatValue: (n) => `${n}%`,
+          formatValue: labels.percent,
           textStyle: {
             fontFamily: theme.font.mono,
             fontSize: theme.fontSize[14],
@@ -124,10 +127,7 @@ function Progress({
           motion,
           style: styles.valueRoll
         }
-      ) : /* @__PURE__ */ jsxs(Text, { style: styles.value, children: [
-        now,
-        "%"
-      ] }) : null
+      ) : /* @__PURE__ */ jsx(Text, { style: styles.value, children: labels.percent(now) }) : null
     ] })
   ] });
 }
@@ -202,14 +202,6 @@ var sheet = createStyleSheet((theme) => ({
   // Same reserved width as the static read-out, right-aligned, for the roll.
   valueRoll: { minWidth: theme.space[40], justifyContent: "flex-end" }
 }));
-var STEP_WORD = {
-  working: "in progress",
-  waiting: "waiting",
-  done: "done",
-  crashed: "failed",
-  conflict: "conflict",
-  pending: "pending"
-};
 function stepFill(theme, state) {
   switch (state) {
     case "working":
@@ -226,6 +218,18 @@ function stepFill(theme, state) {
       return theme.color.surface3;
   }
 }
+var STEP_DEFAULT_LABELS = {
+  stepOf: (current, total) => `Step ${current} of ${total}`,
+  stepWithState: (stepOf, state) => `${stepOf}, ${state}`,
+  states: {
+    working: "in progress",
+    waiting: "waiting",
+    done: "done",
+    crashed: "failed",
+    conflict: "conflict",
+    pending: "pending"
+  }
+};
 function StepProgress({
   total,
   current,
@@ -233,22 +237,24 @@ function StepProgress({
   size = "md",
   label,
   accessibilityLabel,
+  labels: labelsProp,
   style,
   testID
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("progress");
+  const labels = useLabels("stepProgress", STEP_DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(stepSheet, { size });
   const count = Math.max(1, Math.trunc(total));
   const cur = Math.min(Math.max(Math.trunc(current), 1), count);
   const curIndex = cur - 1;
   const curState = resolveStepState(curIndex, curIndex, states);
-  const readout = `Step ${cur} of ${count}`;
-  const valueText = curState === "working" ? readout : `${readout}, ${STEP_WORD[curState]}`;
+  const readout = labels.stepOf(cur, count);
+  const valueText = curState === "working" ? readout : labels.stepWithState(readout, labels.states[curState]);
   return /* @__PURE__ */ jsxs(
     View,
     {
       accessibilityRole: "progressbar",
-      accessibilityLabel,
+      accessibilityLabel: accessibilityLabel ?? label,
       accessibilityValue: { min: 1, max: count, now: cur, text: valueText },
       "aria-valuemin": 1,
       "aria-valuemax": count,

package/dist/{chunk-LOE5YNN3.js → chunk-5VFZRGVD.js}

@@ -1,7 +1,8 @@
 import { overscrollIntent, bandIndicator, overscrollOffset, GESTURE_SLOP_PX, SCROLL_TOP_SLOP_PX, isReachExitArmed, REACH_ARM_PX } from './chunk-HU2EQNRZ.js';
-import { expandedProps } from './chunk-RQ3HASCC.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
 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 { useWindowDimensions, Animated, Easing, AccessibilityInfo, PanResponder, View, Pressable, ScrollView } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -38,23 +39,39 @@ function reachShift(windowHeight, reachZone = 0.62) {
   if (!Number.isFinite(windowHeight) || windowHeight <= 0) return REFERENCE_SHIFT;
   return Math.round(windowHeight * (1 - reachZone));
 }
+var DEFAULT_LABELS = {
+  exit: "Exit one-handed reach",
+  exitHint: "Drag up or tap to move the content back",
+  indicator: "Pull down to refresh, keep pulling for one-handed reach",
+  refreshing: "Refreshing",
+  enterAnnouncement: "One-handed reach on. Content moved down.",
+  exitAnnouncement: "One-handed reach off."
+};
 function OneHanded({
   active,
   onActiveChange,
   onRefresh,
   refreshing,
   shift,
-  exitLabel = "Exit one-handed reach",
-  exitHint = "Drag up or tap to move the content back",
-  indicatorLabel = "Pull down to refresh, keep pulling for one-handed reach",
-  refreshingLabel = "Refreshing",
-  enterAnnouncement = "One-handed reach on. Content moved down.",
-  exitAnnouncement = "One-handed reach off.",
+  exitLabel: exitLabelProp,
+  exitHint: exitHintProp,
+  indicatorLabel: indicatorLabelProp,
+  refreshingLabel: refreshingLabelProp,
+  enterAnnouncement: enterAnnouncementProp,
+  exitAnnouncement: exitAnnouncementProp,
+  labels: labelsProp,
   children,
   ...rest
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("one-handed");
+  const labels = useLabels("oneHanded", DEFAULT_LABELS, labelsProp);
+  const exitLabel = exitLabelProp ?? labels.exit;
+  const exitHint = exitHintProp ?? labels.exitHint;
+  const indicatorLabel = indicatorLabelProp ?? labels.indicator;
+  const refreshingLabel = refreshingLabelProp ?? labels.refreshing;
+  const enterAnnouncement = enterAnnouncementProp ?? labels.enterAnnouncement;
+  const exitAnnouncement = exitAnnouncementProp ?? labels.exitAnnouncement;
   const { height: windowHeight } = useWindowDimensions();
   const dropDistance = shift ?? reachShift(windowHeight, theme.layout.reachZone);
   const bandHeight = Math.max(dropDistance, EXIT_BAR_MIN_HEIGHT);
@@ -120,7 +137,15 @@ function OneHanded({
       springTo(dropScaleX, 1),
       springTo(dropScaleY, 1)
     ]).start();
-  }, [dropOpacity, dropY, dropScaleX, dropScaleY, springTo, exitEasing, theme.motion.exit.duration]);
+  }, [
+    dropOpacity,
+    dropY,
+    dropScaleX,
+    dropScaleY,
+    springTo,
+    exitEasing,
+    theme.motion.exit.duration
+  ]);
   const onRefreshRef = React.useRef(onRefresh);
   onRefreshRef.current = onRefresh;
   const controlledRefreshing = refreshing != null;
@@ -138,6 +163,7 @@ function OneHanded({
     const changed = wasRefreshing.current !== isRefreshing;
     wasRefreshing.current = isRefreshing;
     if (isRefreshing) {
+      if (changed) AccessibilityInfo.announceForAccessibility(refreshingLabel);
       spinnerOpacity.setValue(1);
       Animated.parallel([
         Animated.timing(dropOpacity, {
@@ -383,6 +409,7 @@ function OneHanded({
       {
         accessibilityRole: "progressbar",
         accessibilityLabel: isRefreshing ? refreshingLabel : indicatorLabel,
+        accessibilityState: { busy: isRefreshing },
         style: [
           styles.droplet,
           {