@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-223Q2T2Q.js → chunk-F3H33DQX.js}

@@ -1,16 +1,24 @@
 import { isConnectorTraversed, resolveStepState, NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Button } from './chunk-E2E3I5W2.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 { Animated, View, Text } from 'react-native';
+import { Animated, AccessibilityInfo, View, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  back: "Back",
+  next: "Next",
+  finish: "Finish",
+  stepOf: (current, total, title) => `Step ${current} of ${total}${title ? `: ${title}` : ""}`
+};
 function clamp(n, lo, hi) {
   return Math.min(hi, Math.max(lo, n));
 }
 function useDotForeground(done, active) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("wizard");
   if (done) return theme.color.goodInk;
   if (active) return theme.color.accentOnSoft;
   return theme.color.text3;
@@ -24,12 +32,19 @@ function StepDot({
   const done = stepState === "done";
   const active = stepState === "working";
   const { styles } = useStyles(sheet, { state: done ? "done" : active ? "active" : "upcoming" });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("wizard");
   const fg = useDotForeground(done, active);
   const currentAttr = active ? { "aria-current": "step" } : {};
   return /* @__PURE__ */ jsxs(View, { style: styles.dotCol, children: [
     /* @__PURE__ */ jsx(View, { style: styles.dot, ...currentAttr, children: done ? /* @__PURE__ */ jsx(Icon, { name: NODE_STATE_ICON.done, size: theme.icon.sm, color: fg }) : /* @__PURE__ */ jsx(Text, { style: [styles.dotNum, { color: fg }], children: index + 1 }) }),
-    title ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: [styles.dotLabel, { color: index <= current ? void 0 : fg }], children: title }) : null
+    title ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        numberOfLines: 2,
+        style: [styles.dotLabel, { color: index <= current ? void 0 : fg }],
+        children: title
+      }
+    ) : null
   ] });
 }
 function Wizard({
@@ -38,96 +53,102 @@ function Wizard({
   defaultStep = 0,
   onStepChange,
   onFinish,
-  backLabel = "Back",
-  nextLabel = "Next",
-  finishLabel = "Finish",
-  motion = "full"
+  backLabel: backLabelProp,
+  nextLabel: nextLabelProp,
+  finishLabel: finishLabelProp,
+  motion = "full",
+  keepMounted = true,
+  onStepInvalid,
+  showHeader = true,
+  renderFooter,
+  labels: labelsProp
 }) {
+  const labels = useLabels("wizard", DEFAULT_LABELS, labelsProp);
+  const backLabel = backLabelProp ?? labels.back;
+  const nextLabel = nextLabelProp ?? labels.next;
+  const finishLabel = finishLabelProp ?? labels.finish;
   const isControlled = step !== void 0;
   const last = Math.max(0, steps.length - 1);
   const [internal, setInternal] = React.useState(() => clamp(defaultStep, 0, last));
   const current = clamp(isControlled ? step : internal, 0, last);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("wizard");
   const activeStep = steps[current];
   const isFirst = current <= 0;
   const isLast = current >= last;
   const prev = React.useRef(current);
   const opacity = React.useRef(new Animated.Value(1)).current;
   const translateX = React.useRef(new Animated.Value(0)).current;
+  const level = useResolvedMotion(motion, "wizard");
   React.useEffect(() => {
-    if (motion === "none") {
-      prev.current = current;
+    if (prev.current === current) return;
+    const direction = current > prev.current ? 1 : -1;
+    prev.current = current;
+    AccessibilityInfo.announceForAccessibility?.(
+      labels.stepOf(current + 1, steps.length, steps[current]?.title)
+    );
+    if (level === "none") {
       opacity.setValue(1);
       translateX.setValue(0);
       return;
     }
-    const reduced = motion === "reduced" || theme.reduceMotion;
-    const direction = current >= prev.current ? 1 : -1;
-    prev.current = current;
     opacity.setValue(0);
-    translateX.setValue(reduced ? 0 : direction * theme.space.s4);
+    translateX.setValue(level === "full" ? direction * theme.space.s6 : 0);
     Animated.parallel([
-      Animated.timing(opacity, {
+      Animated.spring(opacity, {
+        ...springConfig(theme, "de"),
         toValue: 1,
-        duration: theme.duration.base,
         useNativeDriver: true
       }),
-      // The slide is travel — dropped under reduced motion, kept at `full`.
-      ...reduced ? [] : [
+      ...level === "full" ? [
         Animated.spring(translateX, {
+          ...springConfig(theme, "ds"),
           toValue: 0,
-          useNativeDriver: true,
-          speed: 18,
-          bounciness: 6
+          useNativeDriver: true
         })
-      ]
+      ] : []
     ]).start();
-  }, [current, motion, opacity, translateX, theme.reduceMotion, theme.duration.base, theme.space.s4]);
+  }, [current, level, opacity, translateX, theme, steps]);
   const goTo = (next) => {
     const clamped = clamp(next, 0, last);
     if (clamped === current) return;
     if (!isControlled) setInternal(clamped);
     onStepChange?.(clamped);
   };
+  const visited = React.useRef(/* @__PURE__ */ new Set());
+  if (activeStep) visited.current.add(activeStep.key);
   const onNext = () => {
+    if (activeStep?.validate && !activeStep.validate()) {
+      onStepInvalid?.(current);
+      return;
+    }
     if (isLast) onFinish?.();
     else goTo(current + 1);
   };
   return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        style: styles.rail,
-        accessibilityRole: "progressbar",
-        accessibilityLabel: `Step ${current + 1} of ${steps.length}${activeStep?.title ? `: ${activeStep.title}` : ""}`,
-        accessibilityValue: { min: 1, max: steps.length, now: current + 1 },
-        "aria-valuemin": 1,
-        "aria-valuemax": steps.length,
-        "aria-valuenow": current + 1,
-        children: steps.map((s, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-          i > 0 ? (
-            // The connector carries the state: solid in the done tone once the
-            // step it leaves has been traversed, muted otherwise — the shared
-            // rule, and the same green the completed dots now use.
-            /* @__PURE__ */ jsx(
-              View,
-              {
-                style: [
-                  styles.line,
-                  {
-                    backgroundColor: isConnectorTraversed(resolveStepState(i - 1, current)) ? theme.color.good : theme.color.surface3
-                  }
-                ]
-              }
-            )
-          ) : null,
-          /* @__PURE__ */ jsx(StepDot, { index: i, current, title: s.title })
-        ] }, s.key))
-      }
-    ),
-    /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { opacity, transform: [{ translateX }] }], children: activeStep?.content }),
-    /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+    showHeader ? /* @__PURE__ */ jsx(WizardSteps, { steps, current }) : null,
+    /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { opacity, transform: [{ translateX }] }], children: steps.map((s, i) => {
+      const isActive = i === current;
+      if (!isActive && !(keepMounted && visited.current.has(s.key))) return null;
+      return /* @__PURE__ */ jsx(
+        View,
+        {
+          style: isActive ? void 0 : styles.hiddenStep,
+          "aria-hidden": isActive ? void 0 : true,
+          importantForAccessibility: isActive ? "auto" : "no-hide-descendants",
+          children: s.content
+        },
+        s.key
+      );
+    }) }),
+    renderFooter ? renderFooter({
+      index: current,
+      count: steps.length,
+      isFirst,
+      isLast,
+      next: onNext,
+      back: () => goTo(current - 1)
+    }) : /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -138,11 +159,61 @@ function Wizard({
           children: backLabel
         }
       ),
-      /* @__PURE__ */ jsx(Button, { variant: "primary", trailingIcon: isLast ? "check" : "arrow-right", onPress: onNext, children: isLast ? finishLabel : nextLabel })
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          trailingIcon: isLast ? "check" : "arrow-right",
+          onPress: onNext,
+          children: isLast ? finishLabel : nextLabel
+        }
+      )
     ] })
   ] });
 }
+function WizardSteps({
+  steps,
+  current,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("wizard", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("wizard");
+  const activeStep = steps[current];
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: styles.rail,
+      accessibilityRole: "progressbar",
+      accessibilityLabel: labels.stepOf(current + 1, steps.length, activeStep?.title),
+      accessibilityValue: { min: 1, max: steps.length, now: current + 1 },
+      "aria-valuemin": 1,
+      "aria-valuemax": steps.length,
+      "aria-valuenow": current + 1,
+      children: steps.map((s, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        i > 0 ? (
+          // The connector carries the state: solid in the done tone once the
+          // step it leaves has been traversed, muted otherwise — the shared
+          // rule, and the same green the completed dots now use.
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.line,
+                {
+                  backgroundColor: isConnectorTraversed(resolveStepState(i - 1, current)) ? theme.color.good : theme.color.surface3
+                }
+              ]
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ jsx(StepDot, { index: i, current, title: s.title })
+      ] }, s.key))
+    }
+  );
+}
 var sheet = createStyleSheet((theme) => ({
+  hiddenStep: { display: "none" },
   // The wizard owns its own gutter: it is a whole flow, not a control dropped
   // into someone else's padded box, and without one the footer buttons sat flush
   // against whatever container it was placed in.
@@ -226,4 +297,4 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { Wizard };
+export { Wizard, WizardSteps };

package/dist/{chunk-CYRBHQQZ.js → chunk-F5B3UINI.js}

@@ -1,4 +1,5 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { View, Text, Pressable, Animated, Easing, PanResponder } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -19,28 +20,49 @@ var SEVERITY_DURATION = {
 function severityColors(theme, severity) {
   switch (severity) {
     case "success":
-      return { glyph: theme.color.goodOnSoft, soft: theme.color.goodSoft, edge: theme.edge.good };
+      return {
+        accent: theme.color.good,
+        glyph: theme.color.goodOnSoft,
+        soft: theme.color.goodSoft,
+        edge: theme.edge.good
+      };
     case "warning":
-      return { glyph: theme.color.warnOnSoft, soft: theme.color.warnSoft, edge: theme.edge.warn };
+      return {
+        accent: theme.color.warn,
+        glyph: theme.color.warnOnSoft,
+        soft: theme.color.warnSoft,
+        edge: theme.edge.warn
+      };
     case "error":
       return {
+        accent: theme.color.danger,
         glyph: theme.color.dangerOnSoft,
         soft: theme.color.dangerSoft,
         edge: theme.edge.danger
       };
     default:
-      return { glyph: theme.color.infoOnSoft, soft: theme.color.infoSoft, edge: theme.edge.info };
+      return {
+        accent: theme.color.info,
+        glyph: theme.color.infoOnSoft,
+        soft: theme.color.infoSoft,
+        edge: theme.edge.info
+      };
   }
 }
+var DEFAULT_LABELS = {
+  dismiss: "Dismiss"
+};
 function ToastCard({
   message,
   severity = "info",
   action,
   countdown,
-  onPress
+  onPress,
+  labels: labelsProp
 }) {
+  const labels = useLabels("toast", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("toast");
   const colors = severityColors(theme, severity);
   const actionHitSlop = Math.max(0, Math.round((theme.tapMin - theme.ctl.sm) / 2));
   const copy = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -55,32 +77,41 @@ function ToastCard({
     ),
     /* @__PURE__ */ jsx(Text, { style: styles.message, children: message })
   ] });
-  return /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
-      onPress ? /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: "Dismiss",
-          onPress,
-          style: styles.copyRegion,
-          children: copy
-        }
-      ) : /* @__PURE__ */ jsx(View, { style: styles.copyRegion, children: copy }),
-      action ? /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: action.label,
-          onPress: action.onPress,
-          hitSlop: actionHitSlop,
-          style: styles.action,
-          children: /* @__PURE__ */ jsx(Text, { style: styles.actionLabel, children: action.label })
-        }
-      ) : null
-    ] }),
-    countdown ? /* @__PURE__ */ jsx(View, { style: styles.countdownTrack, children: countdown }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.card,
+        { borderStartColor: colors.accent, borderStartWidth: theme.borderWidth.heavy }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+          onPress ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.dismiss,
+              onPress,
+              style: styles.copyRegion,
+              children: copy
+            }
+          ) : /* @__PURE__ */ jsx(View, { style: styles.copyRegion, children: copy }),
+          action ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: action.label,
+              onPress: action.onPress,
+              hitSlop: actionHitSlop,
+              style: styles.action,
+              children: /* @__PURE__ */ jsx(Text, { style: styles.actionLabel, children: action.label })
+            }
+          ) : null
+        ] }),
+        countdown ? /* @__PURE__ */ jsx(View, { style: styles.countdownTrack, children: countdown }) : null
+      ]
+    }
+  );
 }
 var TRAVEL = 12;
 function Toast({
@@ -92,9 +123,10 @@ function Toast({
   onDismiss,
   countdown = false,
   motion = "full",
-  safeAreaTop = 0
+  safeAreaTop = 0,
+  labels
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("toast");
   const { styles } = useStyles(sheet);
   const reduced = theme.reduceMotion || motion === "reduced";
   const instant = motion === "none";
@@ -229,7 +261,8 @@ function Toast({
               severity,
               action,
               countdown: bar,
-              onPress: requestDismiss
+              onPress: requestDismiss,
+              labels
             }
           )
         }

package/dist/{chunk-6X6PQ443.js → chunk-FAJI7BSC.js}

@@ -1,5 +1,6 @@
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, PanResponder, Pressable, View, Text, Easing } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -50,6 +51,13 @@ function touchDistance(e) {
   if (!a || !b) return 0;
   return Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
 }
+var DEFAULT_LABELS = {
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  recenter: "Recenter",
+  attribution: "\xA9 map data",
+  placeAction: (action, name) => `${action}, ${name}`
+};
 function BaseLayer({ width, height }) {
   const { styles } = useStyles(sheet);
   const columns = width > 0 ? Math.floor((width - SPEC.gridW) / SPEC.gridX) : 6;
@@ -66,7 +74,8 @@ function MapView({
   activePinId,
   onSelectPin,
   place,
-  attribution = "\xA9 map data",
+  attribution: attributionProp,
+  labels: labelsProp,
   onZoomIn,
   onZoomOut,
   onRecenter,
@@ -77,9 +86,11 @@ function MapView({
   motion = "full",
   children
 }) {
+  const labels = useLabels("mapView", DEFAULT_LABELS, labelsProp);
+  const attribution = attributionProp ?? labels.attribution;
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  const animateZoom = useResolvedMotion(motion) === "full";
+  const theme = useLoamTheme("map-view");
+  const animateZoom = useResolvedMotion(motion, "map-view") === "full";
   const animateZoomRef = React.useRef(animateZoom);
   animateZoomRef.current = animateZoom;
   const [viewport, setViewport] = React.useState({ width: 0, height: 0 });
@@ -178,7 +189,7 @@ function MapView({
   const controls = [
     {
       icon: "plus",
-      label: "Zoom in",
+      label: labels.zoomIn,
       handler: onZoomIn,
       onPress: () => {
         zoomTo(zoom.current * ZOOM.step, true);
@@ -187,7 +198,7 @@ function MapView({
     },
     {
       icon: "minus",
-      label: "Zoom out",
+      label: labels.zoomOut,
       handler: onZoomOut,
       onPress: () => {
         zoomTo(zoom.current / ZOOM.step, true);
@@ -196,7 +207,7 @@ function MapView({
     },
     {
       icon: "navigation",
-      label: "Recenter",
+      label: labels.recenter,
       handler: onRecenter,
       onPress: recenter
     }
@@ -265,7 +276,7 @@ function MapView({
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: `${place.actionLabel}, ${place.name}`,
+          accessibilityLabel: labels.placeAction(place.actionLabel, place.name),
           onPress: place.onAction,
           hitSlop: Math.max(0, (theme.hit.md - theme.ctl.md) / 2),
           style: styles.cardAction,