@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-WRDSPUE7.js

@@ -1,417 +0,0 @@
-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",
-  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,
-      {
-        size: "sm",
-        value: done,
-        max: Math.max(1, total),
-        accessibilityLabel: labels.progress(done, total),
-        motion
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
-      done,
-      " / ",
-      total
-    ] }),
-    done < total ? /* @__PURE__ */ jsx(Text, { style: styles.left, children: labels.left(total - done) }) : null
-  ] });
-}
-function ChecklistRow({
-  item,
-  divided = false,
-  onAction,
-  onToggle,
-  labels: labelsProp
-}) {
-  const theme = useLoamTheme("checklist");
-  const { styles } = useStyles(sheet);
-  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,
-      {
-        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(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.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 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({
-  title,
-  description,
-  items,
-  onItemAction,
-  onToggle,
-  onDismiss,
-  dismissLabel,
-  showCompletePanel = false,
-  completeTitle,
-  completeBody,
-  completeAction,
-  showProgress = true,
-  motion = "full",
-  labels: labelsProp
-}) {
-  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);
-  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 ?? labels.collapse,
-            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, 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, children: completeTitle ?? labels.allSet })
-      ] }),
-      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,
-        labels: labelsProp,
-        onAction: onItemAction ? () => onItemAction(item) : void 0,
-        onToggle: onToggle ? (next) => onToggle(item, next) : void 0
-      },
-      item.id
-    )) })
-  ] });
-}
-function ChecklistLauncher({
-  done,
-  total,
-  label: labelProp,
-  onPress,
-  pinned = true,
-  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 pct = Math.round(done / Math.max(1, total) * 100);
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel: labels.launcher(label, done, total),
-      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" },
-  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,
-    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-XBZGDDMR.js

@@ -1,105 +0,0 @@
-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: titleProp,
-  onFocusField,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const labels = useLabels("errorSummary", DEFAULT_LABELS, labelsProp);
-  const title = titleProp ?? labels.title;
-  const { styles } = useStyles(sheet);
-  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(
-    () => Easing.bezier(...theme.motion.enter.easing),
-    [theme.motion.enter.easing]
-  );
-  React.useEffect(() => {
-    if (!animated) {
-      progress.setValue(1);
-      return;
-    }
-    Animated.timing(progress, {
-      toValue: 1,
-      duration: theme.motion.enter.duration,
-      easing: enterEasing,
-      useNativeDriver: true
-    }).start();
-  }, [animated, progress, enterEasing, theme.motion.enter.duration]);
-  if (errors.length === 0) return null;
-  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [-4, 0] });
-  return /* @__PURE__ */ jsxs(
-    Animated.View,
-    {
-      accessibilityRole: "alert",
-      accessibilityLabel: title,
-      style: [styles.region, { opacity: progress, transform: [{ translateY }] }],
-      children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-          /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.dangerOnSoft }),
-          /* @__PURE__ */ jsx(Text, { style: styles.title, children: title })
-        ] }),
-        /* @__PURE__ */ jsx(View, { style: styles.list, children: errors.map((err) => /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "link",
-            accessibilityLabel: err.message,
-            onPress: () => onFocusField?.(err.fieldId),
-            hitSlop: { top: theme.space[6], bottom: theme.space[6] },
-            children: /* @__PURE__ */ jsx(Text, { style: styles.link, children: err.message })
-          },
-          err.fieldId
-        )) })
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  // Danger tone via the soft tint + on-soft ink (clears AA), with the tone edge
-  // that carries the meaning under high contrast (where the tint collapses).
-  region: {
-    gap: theme.space.s2,
-    padding: theme.space.s3,
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.dangerSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.danger
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s2
-  },
-  title: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    color: theme.color.dangerOnSoft
-  },
-  list: {
-    gap: theme.space.s1,
-    paddingStart: theme.space.s1
-  },
-  link: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.medium,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.dangerOnSoft,
-    textDecorationLine: "underline"
-  }
-}));
-
-export { ErrorSummary };