@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-LRJNDEIA.js

@@ -0,0 +1,302 @@
+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 { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ChecklistProgress({
+  done,
+  total,
+  motion = "full"
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { style: styles.progressRow, children: [
+    /* @__PURE__ */ jsx(View, { style: styles.grow, children: /* @__PURE__ */ jsx(
+      Progress,
+      {
+        size: "sm",
+        value: done,
+        max: Math.max(1, total),
+        accessibilityLabel: `${done} of ${total} done`,
+        motion
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
+      done,
+      " / ",
+      total
+    ] })
+  ] });
+}
+function ChecklistRow({
+  item,
+  divided = false,
+  onAction,
+  onToggle
+}) {
+  const theme = useLoamTheme();
+  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 });
+  return /* @__PURE__ */ jsxs(View, { style: [styles.row, divided ? 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],
+        onPress: () => onToggle(!item.done),
+        children: mark
+      }
+    ) : 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
+      ] }),
+      item.description ? /* @__PURE__ */ jsx(Text, { style: styles.rowDescription, children: item.description }) : 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
+  ] });
+}
+function Checklist({
+  title,
+  description,
+  items,
+  onItemAction,
+  onToggle,
+  onDismiss,
+  dismissLabel = "Collapse checklist",
+  completeTitle = "All set",
+  completeBody,
+  completeAction,
+  showProgress = true,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  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);
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "summary", accessibilityLabel: title, style: styles.panel, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.panelHead, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.panelHeadRow, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.grow, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.panelTitle, children: title }),
+          description ? /* @__PURE__ */ jsx(Text, { style: styles.panelDescription, children: description }) : null
+        ] }),
+        onDismiss ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: dismissLabel,
+            onPress: onDismiss,
+            hitSlop: theme.space[10],
+            style: styles.iconButton,
+            children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text3 })
+          }
+        ) : null
+      ] }),
+      showProgress ? /* @__PURE__ */ jsx(ChecklistProgress, { done, total: items.length, motion }) : null
+    ] }),
+    complete ? /* @__PURE__ */ jsxs(View, { style: styles.completeBody, 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 })
+      ] }),
+      completeBody ? /* @__PURE__ */ jsx(Text, { style: styles.rowDescription, children: completeBody }) : null,
+      completeAction
+    ] }) : /* @__PURE__ */ jsx(View, { children: items.map((item, i) => /* @__PURE__ */ jsx(
+      ChecklistRow,
+      {
+        item,
+        divided: i > 0,
+        onAction: onItemAction ? () => onItemAction(item) : void 0,
+        onToggle: onToggle ? (next) => onToggle(item, next) : void 0
+      },
+      item.id
+    )) })
+  ] });
+}
+function ChecklistLauncher({
+  done,
+  total,
+  label = "Setup",
+  onPress,
+  pinned = true
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  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`,
+      onPress,
+      style: ({ pressed }) => [
+        styles.launcher,
+        pinned ? styles.launcherPinned : null,
+        // A stylesheet cannot read a runtime inset; `TourHost`'s is composed in here.
+        pinned ? { right: theme.space[16] + insets.right, bottom: theme.space[16] + insets.bottom } : null,
+        pressed ? { backgroundColor: theme.state.pressed } : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "list-ul", size: theme.icon.sm, color: theme.color.accentStrong }),
+        /* @__PURE__ */ jsx(Text, { style: styles.launcherLabel, children: label }),
+        /* @__PURE__ */ jsxs(View, { style: styles.launcherBadge, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              style: styles.launcherTrack,
+              children: /* @__PURE__ */ jsx(View, { style: [styles.launcherFill, { width: `${pct}%` }] })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
+            done,
+            "/",
+            total
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+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.lg
+  },
+  panelHead: {
+    gap: theme.space[6],
+    paddingHorizontal: theme.space[16],
+    paddingTop: theme.space[14],
+    paddingBottom: theme.space[12],
+    borderBottomWidth: theme.borderWidth.thin,
+    borderBottomColor: theme.color.border
+  },
+  panelHeadRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space[10] },
+  panelTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    color: theme.color.text
+  },
+  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",
+    borderRadius: theme.radius.full
+  },
+  progressRow: { flexDirection: "row", alignItems: "center", gap: theme.space[10], marginTop: theme.space[4] },
+  grow: { flex: 1 },
+  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[11],
+    paddingHorizontal: theme.space[16],
+    paddingVertical: theme.space[12]
+  },
+  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] },
+  rowTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.text
+  },
+  rowTitleDone: { color: theme.color.text3, textDecorationLine: "line-through" },
+  rowDescription: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  optionalTag: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  mark: {
+    marginTop: theme.space[2],
+    width: theme.space[18],
+    height: theme.space[18],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  markDone: { borderColor: theme.color.good, backgroundColor: theme.color.good },
+  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,
+    paddingLeft: theme.space[14],
+    paddingRight: theme.space[8],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thin,
+    // Graphical edge at 3:1 — the measured accent, not the raw one.
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.lg
+  },
+  launcherPinned: { position: "absolute", right: theme.space[16], bottom: theme.space[16] },
+  launcherLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.accentStrong
+  },
+  launcherBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[7],
+    paddingHorizontal: theme.space[8],
+    paddingVertical: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface2
+  },
+  launcherTrack: {
+    width: theme.space[32],
+    height: theme.space[3],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
+    overflow: "hidden"
+  },
+  launcherFill: { height: "100%", backgroundColor: theme.color.accent }
+}));
+
+export { Checklist, ChecklistLauncher, ChecklistProgress, ChecklistRow };

package/dist/chunk-LSS54GLJ.js

@@ -0,0 +1,116 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TruncationNotice({
+  shown,
+  total,
+  noun = "items",
+  onShowAll,
+  actionIcon = "arrow-down",
+  variant = "inline",
+  size = "md",
+  // Accepted for API consistency; intentionally unused (static feedback).
+  motion: _motion = "full"
+}) {
+  const { styles } = useStyles(sheet, { variant, size });
+  const theme = useLoamTheme();
+  if (shown >= total) return null;
+  const message = `Showing ${shown.toLocaleString()} of ${total.toLocaleString()} ${noun}`;
+  const iconSize = size === "sm" ? theme.icon.xs : theme.icon.sm;
+  const pad = variant === "bar" ? size === "sm" ? { paddingHorizontal: theme.space.s3, paddingVertical: theme.space.s2 } : { paddingHorizontal: theme.space.s4, paddingVertical: theme.space.s3 } : null;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.base, pad], children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.message, children: message }),
+    onShowAll ? /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `Show all ${total.toLocaleString()} ${noun}`,
+        onPress: onShowAll,
+        hitSlop: { top: theme.space.s2, bottom: theme.space.s2 },
+        style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
+        children: [
+          /* @__PURE__ */ jsxs(Text, { style: styles.actionLabel, children: [
+            "Show all ",
+            total.toLocaleString()
+          ] }),
+          actionIcon ? /* @__PURE__ */ jsx(Icon, { name: actionIcon, size: iconSize, color: theme.color.accentStrong }) : null
+        ]
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  /** Press feedback for the action affordance. */
+  pressed: { opacity: theme.state.pressedOpacity },
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    variants: {
+      variant: {
+        inline: { alignSelf: "flex-start", gap: theme.space.s2 },
+        bar: {
+          alignSelf: "stretch",
+          justifyContent: "space-between",
+          gap: theme.space.s3,
+          borderTopWidth: theme.borderWidth.base,
+          borderTopColor: theme.color.border,
+          backgroundColor: theme.color.surface2
+        }
+      },
+      size: { sm: {}, md: {} }
+    }
+  },
+  // Muted secondary ink; clears AA on surface / surface-2 in both modes. Tabular
+  // figures keep the digits aligned as the counts change.
+  message: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.type.caption1.fontSize,
+          lineHeight: theme.type.caption1.lineHeight,
+          letterSpacing: theme.type.caption1.letterSpacing
+        },
+        md: {
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          letterSpacing: theme.type.footnote.letterSpacing
+        }
+      },
+      variant: {}
+    }
+  },
+  action: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1
+  },
+  actionLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.accentStrong,
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.type.caption1.fontSize,
+          lineHeight: theme.type.caption1.lineHeight,
+          letterSpacing: theme.type.caption1.letterSpacing
+        },
+        md: {
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          letterSpacing: theme.type.footnote.letterSpacing
+        }
+      },
+      variant: {}
+    }
+  }
+}));
+
+export { TruncationNotice };

package/dist/chunk-LZLHELAG.js

@@ -0,0 +1,137 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var VARIANT_KIND = {
+  empty: "accent",
+  "no-results": "muted",
+  error: "danger",
+  "no-permission": "info",
+  offline: "warn",
+  stale: "muted"
+};
+var VARIANT_ICON = {
+  empty: "mail",
+  "no-results": "search",
+  error: "refresh",
+  "no-permission": "lock",
+  offline: "wifi-off",
+  stale: "clock"
+};
+function useForeground(kind) {
+  const theme = useLoamTheme();
+  switch (kind) {
+    case "muted":
+      return theme.color.text2;
+    case "danger":
+      return theme.color.dangerOnSoft;
+    case "warn":
+      return theme.color.warnOnSoft;
+    case "info":
+      return theme.color.infoOnSoft;
+    default:
+      return theme.color.accentOnSoft;
+  }
+}
+function EmptyState({
+  variant = "empty",
+  icon,
+  title,
+  description,
+  actionLabel,
+  onAction,
+  // Inert (see prop docs); destructured so it never reaches a native element.
+  motion: _motion = "full"
+}) {
+  const kind = VARIANT_KIND[variant];
+  const { styles } = useStyles(sheet, { kind });
+  const theme = useLoamTheme();
+  const fg = useForeground(kind);
+  const iconName = icon ?? VARIANT_ICON[variant];
+  const pillInk = kind === "muted" ? theme.color.text : theme.color.accentInk;
+  return /* @__PURE__ */ jsxs(View, { style: styles.base, children: [
+    /* @__PURE__ */ jsx(View, { style: styles.tile, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: 30, color: fg }) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
+    description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
+    actionLabel ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: actionLabel,
+        onPress: onAction,
+        style: ({ pressed }) => [styles.pill, pressed && styles.pressed],
+        children: /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, { color: pillInk }], children: actionLabel })
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s4
+  },
+  tile: {
+    width: theme.space[76],
+    height: theme.space[76],
+    borderRadius: theme.radius.xl,
+    alignItems: "center",
+    justifyContent: "center",
+    // The tile is a fixed 76pt square, so the tone edge draws inside it and
+    // costs no layout. Without it a re-resolved palette leaves the glyph on a
+    // bare surface with no tile behind it.
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent",
+    variants: {
+      kind: {
+        accent: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
+        muted: { backgroundColor: theme.color.surface2, borderColor: theme.edge.neutral },
+        danger: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
+        warn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        info: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info }
+      }
+    }
+  },
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.fontSize[26],
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    lineHeight: Math.round(theme.fontSize[14] * 1.55),
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  pill: {
+    borderRadius: theme.radius.full,
+    paddingVertical: theme.space.s3,
+    paddingHorizontal: theme.space.s5,
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      kind: {
+        accent: { backgroundColor: theme.color.accent },
+        muted: { backgroundColor: theme.color.surface2 },
+        danger: { backgroundColor: theme.color.accent },
+        warn: { backgroundColor: theme.color.accent },
+        info: { backgroundColor: theme.color.accent }
+      }
+    }
+  },
+  pressed: {
+    transform: [{ scale: 0.95 }]
+  },
+  pillLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14]
+  }
+}));
+
+export { EmptyState };

package/dist/chunk-M2LUXGKZ.js

@@ -0,0 +1 @@
+