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

package/dist/chunk-2ZZ7TDJ4.js

@@ -0,0 +1,324 @@
+import { resolveStepState } from './chunk-YLLCXTMC.js';
+import { NumberRoll } from './chunk-CUMUNPXY.js';
+import * as React from 'react';
+import { Animated, Easing, View, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LATE_LABEL = "Still working\u2026";
+var INDETERMINATE_SPAN = 0.4;
+var INDETERMINATE_CYCLES = 2;
+var INDETERMINATE_REST = 0.5;
+function clamp(n, lo, hi) {
+  return Math.max(lo, Math.min(hi, n));
+}
+function useFillColor(tone) {
+  const theme = useLoamTheme();
+  switch (tone) {
+    case "good":
+      return theme.color.good;
+    case "warn":
+      return theme.color.warn;
+    case "danger":
+      return theme.color.danger;
+    default:
+      return theme.color.accent;
+  }
+}
+function Progress({
+  value,
+  max = 100,
+  size = "md",
+  tone = "accent",
+  showValue = false,
+  label,
+  late = false,
+  lateLabel = DEFAULT_LATE_LABEL,
+  motion = "full",
+  animateValue = false,
+  accessibilityLabel
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { size });
+  const fillColor = useFillColor(tone);
+  const indeterminate = value === void 0;
+  const fraction = indeterminate || max <= 0 ? 0 : clamp(value / max, 0, 1);
+  const now = Math.round(fraction * 100);
+  const animateSweep = motion === "full" && !theme.reduceMotion;
+  const showHeader = late || label !== void 0;
+  const progress = React.useRef(new Animated.Value(fraction)).current;
+  React.useEffect(() => {
+    if (indeterminate) return;
+    Animated.timing(progress, {
+      toValue: fraction,
+      duration: theme.duration.base,
+      easing: Easing.bezier(...theme.easing.base),
+      // Layout (width) interpolation can't run on the native driver.
+      useNativeDriver: false
+    }).start();
+  }, [indeterminate, fraction, progress, theme.duration.base, theme.easing.base]);
+  const slide = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (!indeterminate) return;
+    if (!animateSweep) {
+      slide.setValue(INDETERMINATE_REST);
+      return;
+    }
+    slide.setValue(0);
+    const loop = Animated.loop(
+      Animated.timing(slide, {
+        toValue: 1,
+        duration: theme.loop.spin * INDETERMINATE_CYCLES,
+        easing: Easing.bezier(...theme.easing.base),
+        // `left` is a layout prop, so this one can't run on the native driver.
+        useNativeDriver: false
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [indeterminate, slide, theme.loop.spin, theme.easing.base, animateSweep]);
+  const width = progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] });
+  const left = slide.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["-40%", "100%"]
+  });
+  return /* @__PURE__ */ jsxs(View, { style: styles.outer, children: [
+    showHeader ? /* @__PURE__ */ jsx(View, { style: styles.header, children: late ? (
+      // `role="status"` (aria-live: polite on rn-web) announces the copy
+      // swap when work goes late, rather than silently sweeping on.
+      /* @__PURE__ */ jsx(View, { accessibilityRole: "text", role: "status", style: styles.latePill, children: /* @__PURE__ */ jsx(Text, { style: styles.lateText, children: lateLabel }) })
+    ) : label !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.wrap, children: [
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          accessibilityRole: "progressbar",
+          accessibilityLabel,
+          accessibilityValue: indeterminate ? void 0 : { min: 0, max, now },
+          accessibilityState: indeterminate ? { busy: true } : void 0,
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-valuenow": indeterminate ? void 0 : now,
+          style: styles.track,
+          children: indeterminate ? /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: [
+                styles.fill,
+                { backgroundColor: fillColor, width: `${INDETERMINATE_SPAN * 100}%`, left }
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(Animated.View, { style: [styles.fill, { backgroundColor: fillColor, left: 0, width }] })
+        }
+      ),
+      showValue && !indeterminate ? animateValue ? /* @__PURE__ */ jsx(
+        NumberRoll,
+        {
+          value: now,
+          formatValue: (n) => `${n}%`,
+          textStyle: {
+            fontFamily: theme.font.mono,
+            fontSize: theme.fontSize[14],
+            color: theme.color.text2
+          },
+          motion,
+          style: styles.valueRoll
+        }
+      ) : /* @__PURE__ */ jsxs(Text, { style: styles.value, children: [
+        now,
+        "%"
+      ] }) : null
+    ] })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // Column that stacks the optional header (late chip / caption) over the bar.
+  // With no header it wraps a single child, so the bar's layout is unchanged.
+  outer: {
+    flexDirection: "column",
+    gap: theme.space.s2,
+    alignSelf: "stretch"
+  },
+  header: { flexDirection: "row", alignItems: "center" },
+  // Warn-toned "still working" chip: soft tint + tone edge (which becomes the
+  // full tone and carries the meaning when the tint collapses under high
+  // contrast), with the AA-safe on-soft ink.
+  latePill: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.warnSoft,
+    borderColor: theme.edge.warn,
+    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.full,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2]
+  },
+  lateText: {
+    fontFamily: theme.font.sans,
+    color: theme.color.warnOnSoft,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing
+  },
+  wrap: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    alignSelf: "stretch"
+  },
+  track: {
+    flex: 1,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
+    overflow: "hidden",
+    variants: {
+      size: {
+        sm: { height: theme.space[4] },
+        md: { height: theme.space[8] }
+      }
+    }
+  },
+  fill: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    borderRadius: theme.radius.full
+  },
+  value: {
+    minWidth: theme.space[40],
+    textAlign: "right",
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  },
+  // Same reserved width as the static read-out, right-aligned, for the roll.
+  valueRoll: { minWidth: theme.space[40], justifyContent: "flex-end" }
+}));
+var STEP_WORD = {
+  working: "in progress",
+  waiting: "waiting",
+  done: "done",
+  crashed: "failed",
+  conflict: "conflict",
+  pending: "pending"
+};
+function stepFill(theme, state) {
+  switch (state) {
+    case "working":
+      return theme.status.working;
+    case "waiting":
+      return theme.status.waiting;
+    case "done":
+      return theme.status.done;
+    case "crashed":
+      return theme.status.crashed;
+    case "conflict":
+      return theme.status.conflict;
+    default:
+      return theme.color.surface3;
+  }
+}
+function StepProgress({
+  total,
+  current,
+  states,
+  size = "md",
+  label,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(stepSheet, { size });
+  const count = Math.max(1, Math.trunc(total));
+  const cur = Math.min(Math.max(Math.trunc(current), 1), count);
+  const curIndex = cur - 1;
+  const curState = resolveStepState(curIndex, curIndex, states);
+  const readout = `Step ${cur} of ${count}`;
+  const valueText = curState === "working" ? readout : `${readout}, ${STEP_WORD[curState]}`;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "progressbar",
+      accessibilityLabel,
+      accessibilityValue: { min: 1, max: count, now: cur, text: valueText },
+      "aria-valuemin": 1,
+      "aria-valuemax": count,
+      "aria-valuenow": cur,
+      "aria-valuetext": valueText,
+      testID,
+      style: [styles.outer, style],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          label !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: label }) : null,
+          /* @__PURE__ */ jsx(Text, { style: [styles.readout, label === void 0 && styles.readoutLead], children: readout })
+        ] }),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            style: styles.segRow,
+            children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+              View,
+              {
+                style: [
+                  styles.seg,
+                  { backgroundColor: stepFill(theme, resolveStepState(i, curIndex, states)) }
+                ]
+              },
+              i
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+var stepSheet = createStyleSheet((theme) => ({
+  outer: { flexDirection: "column", gap: theme.space.s2, alignSelf: "stretch" },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.s2
+  },
+  caption: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing
+  },
+  readout: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing
+  },
+  // With no caption the read-out leads on its own, in primary ink.
+  readoutLead: { color: theme.color.text, fontWeight: theme.fontWeight.semibold },
+  segRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1, alignSelf: "stretch" },
+  seg: {
+    flex: 1,
+    borderRadius: theme.radius.full,
+    variants: {
+      size: {
+        sm: { height: theme.space[4] },
+        md: { height: theme.space[8] }
+      }
+    }
+  }
+}));
+
+export { Progress, StepProgress };