@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-YC6WORFL.js → chunk-RAESDNU5.js}

@@ -1,10 +1,11 @@
-import { Coachmark, CoachmarkDots } from './chunk-P23EQNRQ.js';
-import { useTourHost, Highlight, Beacon, useTourInsets } from './chunk-JUAMLEHX.js';
-import { Progress } from './chunk-2ZZ7TDJ4.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Coachmark, CoachmarkDots } from './chunk-ZYQ23DPT.js';
+import { useTourHost, Highlight, Beacon, useTourInsets } from './chunk-36DA3IPO.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { BackHandler, Pressable, View, Text } from 'react-native';
+import { BackHandler, AccessibilityInfo, Pressable, Text, View } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { materializeTour, resolveText, stepsForSurface, kindFor, canAttachGate, isStepGated, highlightFor, shouldSkipMissingStep, hintRuns } from '@btndprojects/loam-engage';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -20,7 +21,10 @@ var DEFAULT_LABELS = {
   resume: "Resume tour",
   beacon: "Something new here",
   opening: "Opening",
-  step: "Step"
+  openingRoute: (route) => `Opening ${route}`,
+  step: "Step",
+  stepOf: (step, current, total) => `${step} ${current} of ${total}`,
+  resumeWithCounter: (label, counter) => `${label} \u2014 ${counter}`
 };
 var TourContext = React.createContext(null);
 function TourProvider({
@@ -28,7 +32,9 @@ function TourProvider({
   defaultActiveId = null
 }) {
   const [activeId, setActiveId] = React.useState(defaultActiveId);
-  const listeners = React.useRef(/* @__PURE__ */ new Set());
+  const listeners = React.useRef(
+    /* @__PURE__ */ new Set()
+  );
   const value = React.useMemo(
     () => ({
       activeId,
@@ -75,12 +81,14 @@ function Tour({
   onDismiss,
   onEvent,
   minimisable = true,
+  dismissOnBack = true,
+  renderCard,
   labels: labelOverrides,
   motion = "full"
 }) {
   const ctx = React.useContext(TourContext);
   const host = useTourHost();
-  const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+  const labels = useLabels("tour", DEFAULT_LABELS, labelOverrides);
   const touch = surface !== "pointer";
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
   const open = openProp ?? (id && ctx ? ctx.activeId === id : uncontrolledOpen);
@@ -187,7 +195,9 @@ function Tour({
       if (timer) clearTimeout(timer);
     };
   }, [anchorName, host]);
-  const needsRoute = Boolean(open && !minimised && step?.route && route !== void 0 && route !== step.route);
+  const needsRoute = Boolean(
+    open && !minimised && step?.route && route !== void 0 && route !== step.route
+  );
   const navigatedFor = React.useRef(null);
   React.useEffect(() => {
     if (!needsRoute || !onNavigate || !step?.route) return;
@@ -260,19 +270,28 @@ function Tour({
     if (want && route === want && before !== route) advanceRef.current("route");
   }, [route, open, minimised, advanceOn, step]);
   React.useEffect(() => {
-    if (!open || minimised) return;
+    if (!open || minimised || !dismissOnBack) return;
     const sub = BackHandler.addEventListener("hardwareBackPress", () => {
       close("back");
       return true;
     });
     return () => sub.remove();
-  }, [open, minimised, close]);
+  }, [open, minimised, dismissOnBack, close]);
+  const stepTitle = step ? t(step.title) : void 0;
+  const announced = React.useRef(index);
+  React.useEffect(() => {
+    if (!open || announced.current === index) return;
+    announced.current = index;
+    if (stepTitle)
+      AccessibilityInfo.announceForAccessibility(`${stepTitle}, ${index + 1} of ${total}`);
+  }, [open, index, total, stepTitle]);
   if (!open || !step || total === 0) return null;
   if (minimised) {
     return /* @__PURE__ */ jsx(
       TourLauncher,
       {
         label: labels.resume,
+        labels,
         counter: `${index + 1}/${total}`,
         motion,
         onPress: () => {
@@ -289,7 +308,7 @@ function Tour({
   const variant = cardVariant ?? (kind === "modal" || !resolved ? "centered" : touch ? "docked" : "anchored");
   if (kind === "beacon" && resolved && !beaconOpen) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Highlight, { kind: highlight, target: resolved, padding: step.padding, motion }),
+      /* @__PURE__ */ jsx(Highlight, { kind: highlight, target: resolved, halo: step.padding, motion }),
       /* @__PURE__ */ jsx(
         Beacon,
         {
@@ -301,43 +320,42 @@ function Tour({
       )
     ] });
   }
+  const cardProps = {
+    step,
+    index,
+    total,
+    titles: visible.map((s) => t(s.title) ?? ""),
+    name,
+    target: variant === "anchored" ? resolved : void 0,
+    variant,
+    gated,
+    locale,
+    defaultLocale,
+    waiting: waiting ? step.route ? labels.openingRoute(step.route) : labels.opening : void 0,
+    labels,
+    motion,
+    onNext: () => advance("next"),
+    onBack: index > 0 ? () => setIndex(index - 1) : void 0,
+    onSkipStep: () => skipStep("user-skipped"),
+    onSelectStep: setIndex,
+    onClose: () => close("user"),
+    onMinimise: minimisable ? () => {
+      setMinimised(true);
+      emitRef.current("tour_minimised");
+    } : void 0,
+    onAction: onAction ? (action) => onAction(action, step) : void 0
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    resolved ? /* @__PURE__ */ jsx(Highlight, { kind: highlight, target: resolved, padding: step.padding, motion }) : null,
-    /* @__PURE__ */ jsx(
-      TourStepCard,
-      {
-        step,
-        index,
-        total,
-        titles: visible.map((s) => t(s.title) ?? ""),
-        name,
-        target: variant === "anchored" ? resolved : void 0,
-        variant,
-        gated,
-        locale,
-        defaultLocale,
-        waiting: waiting ? `${labels.opening} ${step.route ?? ""}`.trim() : void 0,
-        labels,
-        motion,
-        onNext: () => advance("next"),
-        onBack: index > 0 ? () => setIndex(index - 1) : void 0,
-        onSkipStep: () => skipStep("user-skipped"),
-        onSelectStep: setIndex,
-        onClose: () => close("user"),
-        onMinimise: minimisable ? () => {
-          setMinimised(true);
-          emitRef.current("tour_minimised");
-        } : void 0,
-        onAction: onAction ? (action) => onAction(action, step) : void 0
-      },
-      index
-    )
+    resolved ? /* @__PURE__ */ jsx(Highlight, { kind: highlight, target: resolved, halo: step.padding, motion }) : null,
+    /* @__PURE__ */ jsx(React.Fragment, { children: renderCard ? renderCard(cardProps) : /* @__PURE__ */ jsx(TourStepCard, { ...cardProps }) }, renderCard ? index : variant)
   ] });
 }
 function TourHint({ text }) {
   const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("tour");
+  const ios = isAndroidIdiom(theme) ? null : styles.hintIos;
   return /* @__PURE__ */ jsx(Fragment, { children: hintRuns(text).map(
-    (run, i) => run.key ? /* @__PURE__ */ jsx(Text, { style: styles.hintKey, children: run.text }, i) : /* @__PURE__ */ jsx(Text, { children: run.text }, i)
+    (run, i) => run.key ? /* @__PURE__ */ jsx(Text, { style: [ios, styles.hintKey], children: run.text }, i) : /* @__PURE__ */ jsx(Text, { style: ios, children: run.text }, i)
   ) });
 }
 function TourStepCard({
@@ -362,13 +380,14 @@ function TourStepCard({
   defaultLocale,
   motion = "full"
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("tour");
   const { styles } = useStyles(sheet);
-  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const labels = useLabels("tour", DEFAULT_LABELS, labelOverrides);
   const t = (value) => resolveText(value, locale, defaultLocale);
   const isLast = index === total - 1;
   const kind = kindFor(step.kind, Boolean(step.anchor));
   const cta = step.cta;
+  const ios = !isAndroidIdiom(theme);
   return /* @__PURE__ */ jsxs(
     Coachmark,
     {
@@ -379,7 +398,10 @@ function TourStepCard({
       kicker: name,
       title: t(step.title) ?? "",
       body: typeof step.body === "string" ? step.body : void 0,
-      media: step.media,
+      media: step.media ? /* @__PURE__ */ jsx(View, { style: styles.media, children: step.media }) : void 0,
+      titleStyle: ios ? styles.titleIos : void 0,
+      bodyStyle: ios ? styles.bodyIos : void 0,
+      dockOffset: ios ? theme.space[12] : void 0,
       hint: waiting ?? (gated ? /* @__PURE__ */ jsx(TourHint, { text: t(step.hint) ?? labels.waiting }) : void 0),
       motion,
       onClose,
@@ -390,18 +412,37 @@ function TourStepCard({
           accessibilityRole: "button",
           accessibilityLabel: labels.minimise,
           onPress: onMinimise,
-          hitSlop: theme.space[10],
-          style: styles.iconButton,
+          hitSlop: (theme.hit.sm - theme.ctl.sm) / 2,
+          android_ripple: { color: theme.state.pressed, borderless: true },
+          style: ({ pressed }) => [
+            styles.iconButton,
+            pressed ? { backgroundColor: theme.state.pressed } : null
+          ],
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text3 })
         }
       ) : null,
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        onBack ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onPress: onBack, children: labels.back }) : null,
-        gated ? step.skippable === false ? null : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onPress: onSkipStep, children: labels.skipStep }) : /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", onPress: onNext, children: isLast ? labels.finish : labels.next })
+        onBack ? /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", onPress: onBack, children: labels.back }) : null,
+        gated ? step.skippable === false ? null : /* @__PURE__ */ jsx(Button, { size: "lg", variant: "ghost", onPress: onSkipStep, children: labels.skipStep }) : /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", onPress: onNext, children: isLast ? labels.finish : labels.next })
       ] }),
       children: [
         typeof step.body !== "string" && step.body ? /* @__PURE__ */ jsx(Fragment, { children: step.body }) : null,
-        cta ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", trailingIcon: "arrow-right", onPress: () => onAction?.(cta.action), children: cta.label }) : null,
+        cta ? (
+          // A Link, not a button: it leaves the card's own flow.
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "link",
+              onPress: () => onAction?.(cta.action),
+              hitSlop: (theme.hit.sm - theme.fontSize[15]) / 2,
+              style: styles.cta,
+              children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Text, { style: [styles.ctaText, pressed ? styles.ctaPressed : null], children: cta.label }),
+                /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: theme.icon.xs, color: theme.color.accentStrong })
+              ] })
+            }
+          )
+        ) : null,
         /* @__PURE__ */ jsx(
           TourProgress,
           {
@@ -409,6 +450,7 @@ function TourStepCard({
             total,
             titles,
             stepLabel: labels.step,
+            labels,
             onSelect: onSelectStep
           }
         )
@@ -421,66 +463,91 @@ function TourProgress({
   total,
   titles,
   onSelect,
-  stepLabel = "Step"
+  stepLabel: stepLabelProp,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { style: styles.progress, children: [
-    /* @__PURE__ */ jsx(
-      Progress,
-      {
-        size: "sm",
-        value: index + 1,
-        max: Math.max(1, total),
-        accessibilityLabel: `${stepLabel} ${index + 1} of ${total}`
-      }
-    ),
-    /* @__PURE__ */ jsxs(View, { style: styles.progressRail, children: [
-      /* @__PURE__ */ jsx(
-        CoachmarkDots,
-        {
-          total,
-          index,
-          onSelect,
-          stepLabel,
-          titles
-        }
-      ),
-      /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
-        index + 1,
-        " / ",
-        total
-      ] })
-    ] })
-  ] });
+  const labels = useLabels("tour", DEFAULT_LABELS, labelsProp);
+  const stepLabel = stepLabelProp ?? labels.step;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: labels.stepOf(stepLabel, index + 1, total),
+      style: styles.progress,
+      children: [
+        /* @__PURE__ */ jsx(
+          CoachmarkDots,
+          {
+            total,
+            index,
+            onSelect,
+            stepLabel,
+            titles
+          }
+        ),
+        /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
+          index + 1,
+          " / ",
+          total
+        ] })
+      ]
+    }
+  );
 }
 function TourLauncher({
-  label = "Resume tour",
+  label: labelProp,
   counter,
   onPress,
-  pinned = true
+  icon,
+  pinned = true,
+  dismissible = false,
+  onDismiss,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("tour");
+  const labels = useLabels("tour", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.resume;
   const { styles } = useStyles(sheet);
   const insets = useTourInsets();
-  return /* @__PURE__ */ jsxs(
+  const wrap = dismissible && onDismiss !== void 0;
+  const place = pinned ? { end: theme.space[16] + insets.right, bottom: theme.space[16] + insets.bottom } : null;
+  const pill = /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityLabel: counter ? `${label} \u2014 ${counter}` : label,
+      accessibilityLabel: counter ? labels.resumeWithCounter(label, counter) : label,
       onPress,
       style: ({ pressed }) => [
         styles.launcher,
-        pinned ? styles.launcherPinned : null,
-        pinned ? { right: theme.space[16] + insets.right, bottom: theme.space[16] + insets.bottom } : null,
+        pinned && !wrap ? styles.launcherPinned : null,
+        !wrap ? place : null,
         pressed ? { backgroundColor: theme.state.pressed } : null
       ],
       children: [
-        /* @__PURE__ */ jsx(Icon, { name: "star", size: theme.icon.sm, color: theme.color.accentStrong }),
+        icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.accentStrong }) : null,
         /* @__PURE__ */ jsx(Text, { style: styles.launcherLabel, children: label }),
-        counter ? /* @__PURE__ */ jsx(Text, { style: styles.counter, children: counter }) : null
+        counter ? /* @__PURE__ */ jsx(View, { style: styles.launcherBadge, children: /* @__PURE__ */ jsx(Text, { style: styles.count, children: counter }) }) : null
       ]
     }
   );
+  if (!wrap) return pill;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.launcherGroup, pinned ? styles.launcherPinned : null, place], children: [
+    pill,
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.leave,
+        onPress: onDismiss,
+        style: ({ pressed }) => [
+          styles.launcherDismiss,
+          pressed ? { backgroundColor: theme.state.pressed } : null
+        ],
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text2 })
+      }
+    )
+  ] });
 }
 var sheet = createStyleSheet((theme) => ({
   /** A control named inside a gated hint, shaped like the app's own label. */
@@ -489,46 +556,105 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.text,
     textTransform: "none"
   },
+  hintIos: { fontSize: theme.fontSize[13] },
+  // A ghost icon Button sm: its square, its corner, its pressed layer.
   iconButton: {
     width: theme.ctl.sm,
     height: theme.ctl.sm,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radius.full
+    borderRadius: theme.ctl.r.sm
+  },
+  titleIos: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing
+  },
+  bodyIos: {
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight
   },
-  progress: { gap: theme.space[8], marginTop: theme.space[2] },
-  progressRail: { flexDirection: "row", alignItems: "center", gap: theme.space[6] },
+  media: { borderRadius: theme.radius.sm, overflow: "hidden" },
+  cta: { flexDirection: "row", alignItems: "center", alignSelf: "flex-start", gap: theme.space[4] },
+  ctaText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[15],
+    color: theme.color.accentStrong
+  },
+  ctaPressed: { textDecorationLine: "underline" },
+  progress: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    height: theme.space[32],
+    marginTop: theme.space[2]
+  },
+  // The count style: mono 12 / 500, text-2, tabular.
   counter: {
-    marginLeft: "auto",
+    marginStart: "auto",
     fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.color.text3,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2,
     fontVariant: ["tabular-nums"]
   },
+  count: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"]
+  },
+  // The ChecklistLauncher recipe.
   launcher: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.space[9],
+    gap: theme.space[10],
     height: theme.ctl.lg,
-    paddingHorizontal: theme.space[15],
+    paddingStart: theme.space[14],
+    paddingEnd: theme.space[8],
     borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.thin,
+    borderWidth: theme.borderWidth.thick,
     // The pill's edge is the only thing separating it from the screen behind,
     // so it is a graphical edge at 3:1 — the measured accent, not the raw one.
     borderColor: theme.focus.ringColor,
     backgroundColor: theme.color.surface,
     ...theme.shadow.lg
   },
+  launcherGroup: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
+  launcherDismiss: {
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.lg
+  },
   launcherPinned: {
     position: "absolute",
-    right: theme.space[16],
+    end: theme.space[16],
     bottom: theme.space[16]
   },
   launcherLabel: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[16],
     color: theme.color.accentStrong
+  },
+  // The 28 capsule.
+  launcherBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.space[28],
+    paddingHorizontal: theme.space[10],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface2
   }
 }));
 

package/dist/chunk-RBYQUXNL.js

@@ -0,0 +1 @@
+

package/dist/chunk-RCM3DT5E.js

@@ -0,0 +1 @@
+