@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-LRJNDEIA.js → chunk-WRDSPUE7.js}

@@ -1,18 +1,32 @@
-import { useTourInsets } from './chunk-JUAMLEHX.js';
-import { Progress } from './chunk-2ZZ7TDJ4.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { View, Text, Pressable } from 'react-native';
+import { useTourInsets } from './chunk-H7DWSL4O.js';
+import { Progress } from './chunk-5UTRIXQ6.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig, useReducedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Text, Pressable, Animated } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  collapse: "Collapse checklist",
+  allSet: "All set",
+  setup: "Setup",
+  optional: "optional",
+  start: "Start",
+  progress: (done, total) => `${done} of ${total} done`,
+  left: (remaining) => `${remaining} left`,
+  launcher: (label, done, total) => `${label} \u2014 ${done} of ${total} done`
+};
 function ChecklistProgress({
   done,
   total,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
+  const labels = useLabels("checklist", DEFAULT_LABELS, labelsProp);
   return /* @__PURE__ */ jsxs(View, { style: styles.progressRow, children: [
     /* @__PURE__ */ jsx(View, { style: styles.grow, children: /* @__PURE__ */ jsx(
       Progress,
@@ -20,7 +34,7 @@ function ChecklistProgress({
         size: "sm",
         value: done,
         max: Math.max(1, total),
-        accessibilityLabel: `${done} of ${total} done`,
+        accessibilityLabel: labels.progress(done, total),
         motion
       }
     ) }),
@@ -28,18 +42,21 @@ function ChecklistProgress({
       done,
       " / ",
       total
-    ] })
+    ] }),
+    done < total ? /* @__PURE__ */ jsx(Text, { style: styles.left, children: labels.left(total - done) }) : null
   ] });
 }
 function ChecklistRow({
   item,
   divided = false,
   onAction,
-  onToggle
+  onToggle,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("checklist");
   const { styles } = useStyles(sheet);
-  const mark = /* @__PURE__ */ jsx(View, { style: [styles.mark, item.done ? styles.markDone : null], children: item.done ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.goodInk }) : null });
+  const labels = useLabels("checklist", DEFAULT_LABELS, labelsProp);
+  const mark = /* @__PURE__ */ jsx(View, { style: [styles.mark, item.done ? styles.markDone : null], children: item.done ? /* @__PURE__ */ jsx(TickIn, { children: /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.goodInk }) }) : null });
   return /* @__PURE__ */ jsxs(View, { style: [styles.row, divided ? styles.rowDivided : null], children: [
     onToggle ? /* @__PURE__ */ jsx(
       Pressable,
@@ -55,13 +72,88 @@ function ChecklistRow({
     ) : mark,
     /* @__PURE__ */ jsxs(View, { style: styles.rowText, children: [
       /* @__PURE__ */ jsxs(View, { style: styles.rowTitleLine, children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles.rowTitle, item.done ? styles.rowTitleDone : null], children: item.title }),
-        item.optional ? /* @__PURE__ */ jsx(Text, { style: styles.optionalTag, children: "optional" }) : null
+        /* @__PURE__ */ jsx(StrikeTitle, { done: Boolean(item.done), textStyle: styles.rowTitle, doneStyle: styles.rowTitleDone, children: item.title }),
+        item.optional ? /* @__PURE__ */ jsx(Text, { style: styles.optionalTag, children: labels.optional }) : null
       ] }),
-      item.description ? /* @__PURE__ */ jsx(Text, { style: styles.rowDescription, children: item.description }) : null
+      item.description ? /* @__PURE__ */ jsx(Text, { style: styles.rowDescription, children: item.description }) : null,
+      item.disabled && item.disabledReason && !item.done ? /* @__PURE__ */ jsx(Text, { style: styles.rowReason, children: item.disabledReason }) : null
     ] }),
     item.meta ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: item.meta }) : null,
-    !item.done && onAction ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", disabled: item.disabled, onPress: onAction, children: item.actionLabel ?? "Start" }) : null
+    !item.done && onAction ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", disabled: item.disabled, onPress: onAction, children: item.actionLabel ?? labels.start }) : null
+  ] });
+}
+function TickIn({ children }) {
+  const theme = useLoamTheme("checklist");
+  const p = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (theme.reduceMotion) {
+      Animated.timing(p, { toValue: 1, duration: theme.duration.fast, useNativeDriver: true }).start();
+      return;
+    }
+    Animated.spring(p, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true }).start();
+  }, [p, theme]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: {
+        opacity: p.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" }),
+        transform: [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }) }]
+      },
+      children
+    }
+  );
+}
+function StrikeTitle({
+  done,
+  textStyle,
+  doneStyle,
+  children
+}) {
+  const theme = useLoamTheme("checklist");
+  const reduced = useReducedMotion();
+  const [line, setLine] = React.useState(null);
+  const p = React.useRef(new Animated.Value(done ? 1 : 0)).current;
+  React.useEffect(() => {
+    Animated.timing(p, {
+      toValue: done ? 1 : 0,
+      duration: reduced ? theme.duration.fast : theme.spring.ds.duration,
+      useNativeDriver: false
+    }).start();
+  }, [done, p, reduced, theme.spring.ds.duration]);
+  const single = line !== null && line.lines <= 1;
+  return /* @__PURE__ */ jsxs(View, { style: { flexShrink: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          textStyle,
+          done ? doneStyle : null,
+          single ? { textDecorationLine: "none" } : null
+        ],
+        onTextLayout: (e) => {
+          const ls = e.nativeEvent.lines;
+          const width = ls.reduce((m, l) => Math.max(m, l.width), 0);
+          setLine(
+            (prev) => prev && prev.width === width && prev.lines === ls.length ? prev : { width, lines: ls.length }
+          );
+        },
+        children
+      }
+    ),
+    single && line ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          start: 0,
+          top: "55%",
+          height: 1,
+          backgroundColor: theme.color.text3,
+          width: p.interpolate({ inputRange: [0, 1], outputRange: [0, line.width] })
+        }
+      }
+    ) : null
   ] });
 }
 function Checklist({
@@ -71,15 +163,18 @@ function Checklist({
   onItemAction,
   onToggle,
   onDismiss,
-  dismissLabel = "Collapse checklist",
-  completeTitle = "All set",
+  dismissLabel,
+  showCompletePanel = false,
+  completeTitle,
   completeBody,
   completeAction,
   showProgress = true,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("checklist");
   const { styles } = useStyles(sheet);
+  const labels = useLabels("checklist", DEFAULT_LABELS, labelsProp);
   const required = items.filter((i) => !i.optional);
   const done = items.filter((i) => i.done).length;
   const complete = required.length > 0 && required.every((i) => i.done);
@@ -94,7 +189,7 @@ function Checklist({
           Pressable,
           {
             accessibilityRole: "button",
-            accessibilityLabel: dismissLabel,
+            accessibilityLabel: dismissLabel ?? labels.collapse,
             onPress: onDismiss,
             hitSlop: theme.space[10],
             style: styles.iconButton,
@@ -102,12 +197,12 @@ function Checklist({
           }
         ) : null
       ] }),
-      showProgress ? /* @__PURE__ */ jsx(ChecklistProgress, { done, total: items.length, motion }) : null
+      showProgress ? /* @__PURE__ */ jsx(ChecklistProgress, { done, total: items.length, motion, labels: labelsProp }) : null
     ] }),
-    complete ? /* @__PURE__ */ jsxs(View, { style: styles.completeBody, children: [
+    showCompletePanel && complete ? /* @__PURE__ */ jsxs(View, { style: styles.completeBody, accessibilityLiveRegion: "polite", children: [
       /* @__PURE__ */ jsxs(View, { style: styles.completeHead, children: [
         /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: theme.icon.md, color: theme.color.good }),
-        /* @__PURE__ */ jsx(Text, { style: styles.panelTitle, children: completeTitle })
+        /* @__PURE__ */ jsx(Text, { style: styles.panelTitle, children: completeTitle ?? labels.allSet })
       ] }),
       completeBody ? /* @__PURE__ */ jsx(Text, { style: styles.rowDescription, children: completeBody }) : null,
       completeAction
@@ -116,6 +211,7 @@ function Checklist({
       {
         item,
         divided: i > 0,
+        labels: labelsProp,
         onAction: onItemAction ? () => onItemAction(item) : void 0,
         onToggle: onToggle ? (next) => onToggle(item, next) : void 0
       },
@@ -126,19 +222,22 @@ function Checklist({
 function ChecklistLauncher({
   done,
   total,
-  label = "Setup",
+  label: labelProp,
   onPress,
-  pinned = true
+  pinned = true,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("checklist");
   const { styles } = useStyles(sheet);
+  const labels = useLabels("checklist", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.setup;
   const insets = useTourInsets();
   const pct = Math.round(done / Math.max(1, total) * 100);
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityLabel: `${label} \u2014 ${done} of ${total} done`,
+      accessibilityLabel: labels.launcher(label, done, total),
       onPress,
       style: ({ pressed }) => [
         styles.launcher,
@@ -208,7 +307,12 @@ var sheet = createStyleSheet((theme) => ({
     justifyContent: "center",
     borderRadius: theme.radius.full
   },
-  progressRow: { flexDirection: "row", alignItems: "center", gap: theme.space[10], marginTop: theme.space[4] },
+  progressRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[10],
+    marginTop: theme.space[4]
+  },
   grow: { flex: 1 },
   meta: {
     fontFamily: theme.font.mono,
@@ -233,6 +337,17 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.text
   },
   rowTitleDone: { color: theme.color.text3, textDecorationLine: "line-through" },
+  rowReason: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  left: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3
+  },
   rowDescription: {
     fontFamily: theme.font.sans,
     fontSize: theme.type.footnote.fontSize,

package/dist/{chunk-C2NTXVWM.js → chunk-XBZGDDMR.js}

@@ -1,17 +1,24 @@
-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, Easing, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  title: "There's a problem"
+};
 function ErrorSummary({
   errors,
-  title = "There's a problem",
+  title: titleProp,
   onFocusField,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("errorSummary", DEFAULT_LABELS, labelsProp);
+  const title = titleProp ?? labels.title;
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("error-summary");
   const animated = motion === "full" && !theme.reduceMotion;
   const progress = React.useRef(new Animated.Value(animated ? 0 : 1)).current;
   const enterEasing = React.useMemo(