@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-XHE4PGCI.js

@@ -0,0 +1,717 @@
+import { useTourInsets } from './chunk-36DA3IPO.js';
+import { StepProgress, Progress } from './chunk-L2WMOA2V.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Text, Pressable, Animated, ActivityIndicator, AccessibilityInfo } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } 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`,
+  moved: (title, position, total) => `Moved ${title} to position ${position} of ${total}`,
+  moveUp: "Move up",
+  moveDown: "Move down",
+  launcher: (label, done, total) => `${label} \u2014 ${done} of ${total} done`
+};
+var ToneGroundContext = React.createContext(false);
+function toneSolidInk(theme, tone) {
+  const c = theme.color;
+  return tone === "good" ? c.goodInk : tone === "warn" ? c.warnInk : tone === "danger" ? c.dangerInk : c.accentInk;
+}
+function ChecklistProgress({
+  done,
+  total,
+  size = "sm",
+  tone,
+  motion = "full",
+  variant = "default",
+  dismissible = false,
+  onDismiss,
+  labels: labelsProp
+}) {
+  const theme = useLoamTheme("checklist");
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("checklist", DEFAULT_LABELS, labelsProp);
+  const toned = React.useContext(ToneGroundContext);
+  return /* @__PURE__ */ jsxs(View, { style: styles.progressRow, children: [
+    /* @__PURE__ */ jsx(View, { style: styles.grow, children: variant === "steps" ? /* @__PURE__ */ jsx(
+      StepProgress,
+      {
+        size,
+        tone,
+        total: Math.max(1, total),
+        current: Math.max(1, done),
+        states: Array.from(
+          { length: Math.max(1, total) },
+          (_unused, i) => i < done ? "done" : void 0
+        ),
+        accessibilityLabel: labels.progress(done, total),
+        motion: motion === "full" ? "full" : "none"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Progress,
+      {
+        size,
+        tone,
+        value: done,
+        max: Math.max(1, total),
+        accessibilityLabel: labels.progress(done, total),
+        motion
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Text, { style: styles.count, children: [
+      done,
+      " / ",
+      total
+    ] }),
+    done < total && variant !== "minimal" ? /* @__PURE__ */ jsx(Text, { style: [styles.left, toned ? styles.leftToned : null], children: labels.left(total - done) }) : null,
+    dismissible ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.collapse,
+        onPress: onDismiss,
+        hitSlop: theme.space[10],
+        style: ({ pressed }) => [
+          styles.iconButton,
+          pressed ? { backgroundColor: theme.state.pressed } : null
+        ],
+        children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.xs, color: theme.color.text3 })
+      }
+    ) : null
+  ] });
+}
+function ChecklistRow({
+  item,
+  divided = false,
+  onAction,
+  onToggle,
+  groupProps,
+  onMove,
+  collapsed = false,
+  motion = "full",
+  padding = "md",
+  labels: labelsProp
+}) {
+  const theme = useLoamTheme("checklist");
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("checklist", DEFAULT_LABELS, labelsProp);
+  const level = useResolvedMotion(motion, "checklist");
+  const fold = useFold(collapsed, level);
+  const android = isAndroidIdiom(theme);
+  const mark = /* @__PURE__ */ jsx(View, { style: [styles.mark, item.done ? styles.markDone : null], children: item.done ? /* @__PURE__ */ jsx(TickIn, { motion: level, children: /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.accentInk }) }) : null });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessibilityElementsHidden: collapsed,
+      "aria-hidden": collapsed || void 0,
+      importantForAccessibility: collapsed ? "no-hide-descendants" : "auto",
+      pointerEvents: collapsed ? "none" : "auto",
+      style: [styles.fold, fold.style],
+      children: /* @__PURE__ */ jsxs(
+        View,
+        {
+          onLayout: fold.onLayout,
+          style: [
+            styles.row,
+            padding === "sm" ? styles.rowSm : padding === "lg" ? styles.rowLg : null,
+            divided && !collapsed ? styles.rowDivided : null
+          ],
+          children: [
+            onToggle ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "checkbox",
+                accessibilityState: { checked: Boolean(item.done) },
+                "aria-checked": Boolean(item.done),
+                accessibilityLabel: item.title,
+                hitSlop: theme.space[10],
+                android_ripple: android ? { color: theme.state.pressed, borderless: true, radius: theme.space[20] } : void 0,
+                onPress: () => onToggle(!item.done),
+                onLongPress: groupProps?.onLongPress,
+                accessibilityActions: onMove ? [
+                  { name: "moveUp", label: labels.moveUp },
+                  { name: "moveDown", label: labels.moveDown }
+                ] : void 0,
+                onAccessibilityAction: onMove ? (e) => onMove(e.nativeEvent.actionName === "moveUp" ? -1 : 1) : void 0,
+                children: mark
+              }
+            ) : mark,
+            /* @__PURE__ */ jsxs(View, { style: styles.rowText, children: [
+              /* @__PURE__ */ jsxs(View, { style: styles.rowTitleLine, children: [
+                /* @__PURE__ */ jsx(
+                  StrikeTitle,
+                  {
+                    motion: level,
+                    done: Boolean(item.done),
+                    textStyle: [styles.rowTitle, android ? styles.rowTitleAndroid : null],
+                    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.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 ?? labels.start }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function useFold(collapsed, level) {
+  const theme = useLoamTheme("checklist");
+  const p = React.useRef(new Animated.Value(collapsed ? 0 : 1)).current;
+  const [height, setHeight] = React.useState(null);
+  React.useEffect(() => {
+    const toValue = collapsed ? 0 : 1;
+    if (level === "none") {
+      p.setValue(toValue);
+      return;
+    }
+    Animated.timing(p, {
+      toValue,
+      delay: collapsed && level === "full" ? theme.spring.ds.duration : 0,
+      duration: level === "full" ? theme.spring.ds.duration : theme.duration.fast,
+      useNativeDriver: false
+    }).start();
+  }, [collapsed, level, p, theme.duration.fast, theme.spring.ds.duration]);
+  return {
+    onLayout: (e) => {
+      const h = e.nativeEvent.layout.height;
+      setHeight((prev) => prev === h ? prev : h);
+    },
+    style: {
+      opacity: p,
+      // Until measured, an open row sizes itself and a closed one is 0.
+      ...height === null ? collapsed ? { height: 0 } : null : { height: p.interpolate({ inputRange: [0, 1], outputRange: [0, height] }) }
+    }
+  };
+}
+function TickIn({
+  children,
+  motion
+}) {
+  const theme = useLoamTheme("checklist");
+  const p = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (motion === "none") {
+      p.setValue(1);
+      return;
+    }
+    if (motion === "reduced" || 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, motion]);
+  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,
+  motion,
+  textStyle,
+  doneStyle,
+  children
+}) {
+  const theme = useLoamTheme("checklist");
+  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: motion === "none" ? 0 : motion === "reduced" ? theme.duration.fast : theme.spring.ds.duration,
+      useNativeDriver: false
+    }).start();
+  }, [done, p, motion, theme.duration.fast, 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({
+  title,
+  description,
+  items,
+  onItemAction,
+  onToggle,
+  onToggleMany,
+  onReorder,
+  onDismiss,
+  dismissLabel,
+  showCompletePanel = false,
+  completeTitle,
+  completeBody,
+  completeAction,
+  showProgress = true,
+  hideCompleted = false,
+  width = "md",
+  motion = "full",
+  variant = "default",
+  elevation = "default",
+  padding = "none",
+  tone = "neutral",
+  loading = false,
+  interactive = true,
+  labels: labelsProp
+}) {
+  const theme = useLoamTheme("checklist");
+  const android = isAndroidIdiom(theme);
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("checklist", DEFAULT_LABELS, labelsProp);
+  const level = useResolvedMotion(motion, "checklist");
+  const anchor = React.useRef(null);
+  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);
+  const ids = items.map((i) => i.id);
+  const toggleRange = (index) => {
+    const from = Math.max(0, anchor.current ? ids.indexOf(anchor.current) : index);
+    const [lo, hi] = from <= index ? [from, index] : [index, from];
+    const value = !items[index].done;
+    const changed = items.slice(lo, hi + 1).filter((i) => Boolean(i.done) !== value);
+    anchor.current = items[index].id;
+    if (!changed.length) return;
+    if (changed.length > 1 && onToggleMany) onToggleMany(changed, value);
+    else changed.forEach((i) => onToggle?.(i, value));
+  };
+  const move = (index, delta) => {
+    const to = index + delta;
+    if (!onReorder || to < 0 || to >= items.length) return;
+    const next = [...ids];
+    next.splice(to, 0, next.splice(index, 1)[0]);
+    onReorder(next);
+    AccessibilityInfo.announceForAccessibility?.(
+      labels.moved(items[index].title, to + 1, items.length)
+    );
+  };
+  const sized = typeof width === "number" ? { width } : { width: width === "sm" ? theme.panel.xl : theme.dialog.sm };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "summary",
+      accessibilityLabel: title,
+      "aria-busy": loading || void 0,
+      style: [
+        styles.panel,
+        sized,
+        styles.panelFit,
+        variant === "elevated" ? theme.shadow.lg : null,
+        variant === "outline" || elevation === "flat" ? { shadowOpacity: 0, elevation: 0 } : null,
+        elevation === "raised" ? theme.shadow.lg : null,
+        padding !== "none" ? {
+          padding: padding === "sm" ? theme.space.s2 : padding === "md" ? theme.space.s4 : theme.space[24]
+        } : null,
+        tone !== "neutral" ? { borderColor: softToneSkin(theme, tone).edge } : null
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles.panelHead,
+              tone !== "neutral" ? { backgroundColor: softToneSkin(theme, tone).fill } : null
+            ],
+            children: [
+              /* @__PURE__ */ jsxs(View, { style: styles.panelHeadRow, children: [
+                /* @__PURE__ */ jsxs(View, { style: styles.grow, children: [
+                  /* @__PURE__ */ jsx(Text, { style: [styles.panelTitle, android ? styles.panelTitleAndroid : null], children: title }),
+                  description ? /* @__PURE__ */ jsx(Text, { style: styles.panelDescription, children: description }) : null
+                ] }),
+                onDismiss ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: dismissLabel ?? labels.collapse,
+                    onPress: onDismiss,
+                    hitSlop: theme.space[10],
+                    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
+              ] }),
+              showProgress ? /* @__PURE__ */ jsx(ToneGroundContext.Provider, { value: tone !== "neutral", children: /* @__PURE__ */ jsx(
+                ChecklistProgress,
+                {
+                  done,
+                  total: items.length,
+                  motion: level,
+                  labels: labelsProp
+                }
+              ) }) : null
+            ]
+          }
+        ),
+        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, android ? styles.panelTitleAndroid : null], children: completeTitle ?? labels.allSet })
+          ] }),
+          completeBody ? /* @__PURE__ */ jsx(Text, { style: styles.rowDescription, children: completeBody }) : null,
+          completeAction
+        ] }) : loading ? /* @__PURE__ */ jsx(View, { testID: "checklist-loading", style: styles.loadingRows, children: [0, 1, 2].map((n) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", decorative: true }, n)) }) : /* @__PURE__ */ jsx(View, { children: items.map((item, i) => /* @__PURE__ */ jsx(
+          ChecklistRow,
+          {
+            item,
+            divided: i > 0,
+            collapsed: hideCompleted && Boolean(item.done),
+            labels: labelsProp,
+            onAction: interactive && onItemAction ? () => onItemAction(item) : void 0,
+            onToggle: interactive && onToggle ? (next) => {
+              anchor.current = item.id;
+              onToggle(item, next);
+            } : void 0,
+            groupProps: interactive && onToggle ? { onLongPress: () => toggleRange(i) } : void 0,
+            onMove: interactive && onReorder ? (delta) => move(i, delta) : void 0,
+            motion: level
+          },
+          item.id
+        )) })
+      ]
+    }
+  );
+}
+function ChecklistLauncher({
+  done,
+  total,
+  label: labelProp,
+  onPress,
+  pinned = true,
+  disabled = false,
+  dismissible = false,
+  onDismiss,
+  fullWidth = false,
+  leading,
+  trailing,
+  loading = false,
+  size = "lg",
+  tone = "accent",
+  variant = "default",
+  motion = "full",
+  labels: labelsProp
+}) {
+  const theme = useLoamTheme("checklist");
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("checklist", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.setup;
+  const insets = useTourInsets();
+  const level = useResolvedMotion(motion, "checklist");
+  const pulse = React.useRef(new Animated.Value(0)).current;
+  const lastDone = React.useRef(done);
+  React.useEffect(() => {
+    if (lastDone.current === done) return;
+    lastDone.current = done;
+    if (level === "none") return;
+    pulse.setValue(1);
+    const anim = level === "full" ? Animated.spring(pulse, { toValue: 0, ...springConfig(theme, "fs"), useNativeDriver: true }) : Animated.timing(pulse, { toValue: 0, ...motionTiming(level), useNativeDriver: true });
+    anim.start();
+  }, [done, level, theme, pulse]);
+  const skin = softToneSkin(theme, tone);
+  const solid = variant === "solid";
+  const solidInk = toneSolidInk(theme, tone);
+  const ink = solid ? solidInk : skin.ink;
+  const pill = /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: labels.launcher(label, done, total),
+      accessibilityState: { disabled, busy: loading || void 0 },
+      "aria-busy": loading || void 0,
+      disabled,
+      onPress: disabled || loading ? void 0 : onPress,
+      style: ({ pressed }) => [
+        styles.launcher,
+        { height: theme.ctl[size] },
+        pinned && !dismissible ? styles.launcherPinned : null,
+        // A stylesheet cannot read a runtime inset; `TourHost`'s is composed in here.
+        pinned && !dismissible ? { end: theme.space[16] + insets.right, bottom: theme.space[16] + insets.bottom } : null,
+        variant === "outline" ? { backgroundColor: "transparent" } : null,
+        variant === "tonal" ? { backgroundColor: skin.fill, borderColor: skin.edge } : null,
+        solid ? { backgroundColor: skin.edge, borderColor: skin.edge } : null,
+        fullWidth ? { alignSelf: "stretch", justifyContent: "space-between" } : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        pressed && !disabled ? { backgroundColor: theme.state.pressed } : null
+      ],
+      children: [
+        leading,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.launcherLabel,
+              tone !== "accent" || variant !== "default" ? { color: ink } : null
+            ],
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles.launcherBadge,
+              { backgroundColor: solid ? theme.color.surface : skin.edge },
+              level === "full" ? { transform: [{ scale: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.12] }) }] } : level === "reduced" ? { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 0.5] }) } : null
+            ],
+            children: loading ? (
+              // The pill's own name and `aria-busy` carry the state; a bare
+              // progressbar would need a second name.
+              /* @__PURE__ */ jsx(ActivityIndicator, { "aria-hidden": true, color: solid ? theme.color.text : solidInk })
+            ) : /* @__PURE__ */ jsxs(Text, { style: [styles.launcherCount, solid ? { color: skin.ink } : { color: solidInk }], children: [
+              done,
+              "/",
+              total
+            ] })
+          }
+        ),
+        trailing
+      ]
+    }
+  );
+  if (!dismissible) return pill;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.launcherGroup,
+        pinned ? styles.launcherPinned : null,
+        pinned ? { end: theme.space[16] + insets.right, bottom: theme.space[16] + insets.bottom } : null
+      ],
+      children: [
+        pill,
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.collapse,
+            onPress: onDismiss,
+            style: styles.iconButton,
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text3 })
+          }
+        )
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  panel: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden",
+    ...theme.shadow.md
+  },
+  panelFit: { maxWidth: "100%" },
+  fold: { overflow: "hidden" },
+  loadingRows: { gap: theme.space[12], padding: theme.space[16] },
+  panelHead: {
+    gap: theme.space[6],
+    paddingHorizontal: theme.space[16],
+    paddingTop: theme.space[16],
+    paddingBottom: theme.space[12],
+    borderBottomWidth: theme.borderWidth.thin,
+    borderBottomColor: theme.color.border
+  },
+  panelHeadRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space[10] },
+  // iOS 20 / 600; Android 22 / 400 (title large).
+  panelTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[20],
+    color: theme.color.text
+  },
+  panelTitleAndroid: { fontWeight: theme.fontWeight.regular, fontSize: theme.fontSize[22] },
+  panelDescription: {
+    marginTop: theme.space[4],
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  iconButton: {
+    width: theme.ctl.sm,
+    height: theme.ctl.sm,
+    alignItems: "center",
+    justifyContent: "center",
+    // The ghost icon Button sm corner.
+    borderRadius: theme.ctl.r.sm
+  },
+  progressRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[10],
+    marginTop: theme.space[4]
+  },
+  grow: { flex: 1 },
+  // The count style: mono 12 / 500 tabular in text-2.
+  count: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"]
+  },
+  meta: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3,
+    fontVariant: ["tabular-nums"]
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space[12],
+    paddingHorizontal: theme.space[16],
+    paddingVertical: theme.space[12]
+  },
+  rowSm: { paddingHorizontal: theme.space[12], paddingVertical: theme.space[8] },
+  rowLg: { paddingHorizontal: theme.space[24], paddingVertical: theme.space[16] },
+  rowDivided: { borderTopWidth: theme.borderWidth.thin, borderTopColor: theme.color.border },
+  rowText: { flex: 1, gap: theme.space[2] },
+  rowTitleLine: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
+  // Two-line rows: title 17 on iOS, 16 on Android, description under it.
+  rowTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[17],
+    color: theme.color.text
+  },
+  rowTitleAndroid: { fontSize: theme.fontSize[16], fontWeight: theme.fontWeight.medium },
+  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.fontSize[12],
+    color: theme.color.text3
+  },
+  // On a toned panel head text-3 misses AA in Dark; text-2 clears it.
+  leftToned: { color: theme.color.text2 },
+  rowDescription: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  optionalTag: {
+    ...theme.type.overline,
+    fontFamily: theme.font.mono,
+    color: theme.color.text3
+  },
+  // 20 round on a 2 px text-3 edge; done fills accent.
+  mark: {
+    marginTop: theme.space[2],
+    width: theme.space[20],
+    height: theme.space[20],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.heavy,
+    borderColor: theme.color.text3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  markDone: { borderColor: theme.color.accent, backgroundColor: theme.color.accent },
+  completeBody: { gap: theme.space[10], padding: theme.space[16] },
+  completeHead: { flexDirection: "row", alignItems: "center", gap: theme.space[10] },
+  launcher: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[10],
+    height: theme.ctl.lg,
+    paddingStart: theme.space[14],
+    paddingEnd: theme.space[8],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.lg
+  },
+  launcherGroup: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  launcherPinned: { position: "absolute", end: theme.space[16], bottom: theme.space[16] },
+  launcherLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[16],
+    color: theme.color.accentStrong
+  },
+  launcherBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    // The 28 capsule.
+    gap: theme.space[6],
+    height: theme.space[28],
+    paddingHorizontal: theme.space[10],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  launcherCount: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.accentInk,
+    fontVariant: ["tabular-nums"]
+  }
+}));
+
+export { Checklist, ChecklistLauncher, ChecklistProgress, ChecklistRow };