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

package/dist/chunk-J4KLDGI4.js

@@ -0,0 +1 @@
+

package/dist/chunk-J7Q7VCVC.js

@@ -0,0 +1,254 @@
+import { useThinkingPulse } from './chunk-XXXEFXY5.js';
+import { NODE_STATE_WORD, NODE_STATE_ICON, NODE_STATE_SHAPE } from './chunk-YLLCXTMC.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Text, ScrollView, Animated, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var NODE_BOX = { sm: 28, md: 36, lg: 44 };
+var NODE_ICON = { sm: 14, md: 18, lg: 22 };
+function StageNode({
+  state,
+  size,
+  pulse
+}) {
+  const { styles } = useStyles(sheet, { state });
+  const theme = useLoamTheme();
+  const box = NODE_BOX[size];
+  const pulseStyle = useThinkingPulse(pulse);
+  const glyphColor = state === "pending" ? theme.color.text3 : theme.status[state];
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [
+        styles.node,
+        { width: box, height: box, borderRadius: shapeRadius(state, theme.radius.full) },
+        pulseStyle
+      ],
+      children: /* @__PURE__ */ jsx(Icon, { name: NODE_STATE_ICON[state], size: NODE_ICON[size], color: glyphColor })
+    }
+  );
+}
+function shapeRadius(state, full) {
+  return NODE_STATE_SHAPE[state] === "round" ? full : 8;
+}
+function Connector({
+  from,
+  orientation,
+  motion
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const horizontal = orientation === "horizontal";
+  const completed = from === "done";
+  const animate = motion === "full" && completed && !theme.reduceMotion;
+  const grow = React.useRef(new Animated.Value(animate ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!animate) {
+      grow.setValue(completed ? 1 : 0);
+      return;
+    }
+    const anim = Animated.timing(grow, {
+      toValue: 1,
+      duration: theme.motion.expand.duration,
+      easing: Easing.bezier(...theme.motion.expand.easing),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [animate, completed, grow, theme.motion.expand.duration, theme.motion.expand.easing]);
+  const fillStyle = horizontal ? { transform: [{ scaleX: completed ? grow : 0 }] } : { transform: [{ scaleY: completed ? grow : 0 }] };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: horizontal ? styles.trackH : styles.trackV,
+      children: /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          style: [
+            horizontal ? styles.fillH : styles.fillV,
+            { backgroundColor: theme.color.accent },
+            fillStyle
+          ]
+        }
+      )
+    }
+  );
+}
+function StageTimeline({
+  stages,
+  orientation = "horizontal",
+  size = "md",
+  motion = "full",
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet, { size });
+  const theme = useLoamTheme();
+  const horizontal = orientation === "horizontal";
+  const lastIndex = stages.length - 1;
+  const pulseOn = motion === "full" && !theme.reduceMotion;
+  const items = stages.map((stage, index) => {
+    const isWorking = stage.state === "working";
+    const name = `${stage.label}: ${NODE_STATE_WORD[stage.state]}`;
+    const next = stages[index + 1];
+    const showConnector = index < lastIndex && next !== void 0;
+    const currentAttr = isWorking ? { "aria-current": "step" } : {};
+    if (horizontal) {
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            role: "listitem",
+            accessibilityRole: "text",
+            accessibilityLabel: name,
+            "aria-label": name,
+            ...currentAttr,
+            style: styles.stageH,
+            children: [
+              /* @__PURE__ */ jsx(StageNode, { state: stage.state, size, pulse: isWorking && pulseOn }),
+              /* @__PURE__ */ jsx(Text, { style: styles.label, numberOfLines: 2, children: stage.label }),
+              stage.detail ? /* @__PURE__ */ jsx(Text, { style: styles.detail, numberOfLines: 1, children: stage.detail }) : null
+            ]
+          }
+        ),
+        showConnector ? /* @__PURE__ */ jsx(Connector, { from: stage.state, orientation, motion }) : null
+      ] }, stage.id);
+    }
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        role: "listitem",
+        accessibilityRole: "text",
+        accessibilityLabel: name,
+        "aria-label": name,
+        ...currentAttr,
+        style: styles.stageV,
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.railV, children: [
+            /* @__PURE__ */ jsx(StageNode, { state: stage.state, size, pulse: isWorking && pulseOn }),
+            showConnector ? /* @__PURE__ */ jsx(Connector, { from: stage.state, orientation, motion }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: [styles.textV, showConnector && { paddingBottom: theme.space.s5 }], children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.label, children: stage.label }),
+            stage.detail ? /* @__PURE__ */ jsx(Text, { style: styles.detail, children: stage.detail }) : null
+          ] })
+        ]
+      },
+      stage.id
+    );
+  });
+  if (horizontal) {
+    return /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        focusable: true,
+        role: "list",
+        accessibilityRole: "list",
+        testID,
+        contentContainerStyle: styles.rowH,
+        style,
+        children: items
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", testID, style: [styles.colV, style], children: items });
+}
+var sheet = createStyleSheet((theme) => ({
+  rowH: { flexDirection: "row", alignItems: "flex-start" },
+  colV: { flexDirection: "column", alignSelf: "flex-start" },
+  stageH: {
+    alignItems: "center",
+    paddingHorizontal: theme.space.s2,
+    gap: theme.space.s2,
+    // A stable column width so labels line up and the row scrolls predictably.
+    variants: {
+      size: {
+        sm: { width: theme.space[84] },
+        md: { width: theme.space[96] },
+        lg: { width: theme.space[112] }
+      }
+    }
+  },
+  stageV: { flexDirection: "row", alignItems: "stretch", gap: theme.space.s3 },
+  railV: { alignItems: "center" },
+  textV: { flexShrink: 1, gap: theme.space.s1, paddingTop: theme.space[2] },
+  // The node ring: the soft tint fill + full-tone border. The border tone is
+  // per-state (below); the soft fill likewise. Shape (radius) is set inline.
+  node: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: theme.borderWidth.thick,
+    variants: {
+      state: {
+        working: {
+          backgroundColor: theme.status.workingSoft,
+          borderColor: theme.status.working
+        },
+        waiting: {
+          backgroundColor: theme.status.waitingSoft,
+          borderColor: theme.status.waiting
+        },
+        done: { backgroundColor: theme.status.doneSoft, borderColor: theme.status.done },
+        crashed: {
+          backgroundColor: theme.status.crashedSoft,
+          borderColor: theme.status.crashed
+        },
+        conflict: {
+          backgroundColor: theme.status.conflictSoft,
+          borderColor: theme.status.conflict
+        },
+        pending: {
+          backgroundColor: theme.color.surface2,
+          borderColor: theme.color.borderStrong
+        }
+      }
+    }
+  },
+  label: {
+    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
+  },
+  detail: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing
+  },
+  // Connector track (muted) + fill (accent, scaled). Horizontal aligns to the
+  // node centre via a top margin (½ of the md node box − ½ rail); vertical runs
+  // down the rail column and stretches to the next node.
+  trackH: {
+    height: theme.space[2],
+    minWidth: theme.space[40],
+    flexShrink: 1,
+    marginTop: theme.space[17],
+    marginHorizontal: theme.space.s1,
+    borderRadius: theme.radius[2],
+    backgroundColor: theme.color.borderStrong,
+    overflow: "hidden"
+  },
+  trackV: {
+    width: theme.space[2],
+    minHeight: theme.space[24],
+    flex: 1,
+    marginVertical: theme.space.s1,
+    borderRadius: theme.radius[2],
+    backgroundColor: theme.color.borderStrong,
+    overflow: "hidden"
+  },
+  fillH: { height: "100%", width: "100%", transformOrigin: "left" },
+  fillV: { height: "100%", width: "100%", transformOrigin: "top" }
+}));
+
+export { StageTimeline };

package/dist/chunk-JDEOITQ2.js

@@ -0,0 +1 @@
+

package/dist/chunk-JNH2TYIN.js

@@ -0,0 +1,96 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { ScrollView, Pressable, View } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Toolbar({
+  children,
+  accessibilityLabel,
+  overflow = "wrap",
+  density = "comfortable",
+  justify = "start",
+  onMorePress
+}) {
+  const { styles } = useStyles(sheet, { density, justify });
+  const theme = useLoamTheme();
+  if (overflow === "scroll" || overflow === "menu") {
+    return /* @__PURE__ */ jsxs(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        accessibilityRole: "toolbar",
+        accessibilityLabel,
+        style: styles.scrollRoot,
+        contentContainerStyle: styles.scrollContent,
+        children: [
+          children,
+          overflow === "menu" ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: "More",
+              onPress: onMorePress,
+              hitSlop: 8,
+              style: styles.more,
+              children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: theme.icon.md, color: theme.color.text })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { accessibilityRole: "toolbar", accessibilityLabel, style: styles.wrapRoot, children });
+}
+var sheet = createStyleSheet((theme) => ({
+  // A wrapping row. `toolbarH` sets the resting height of a single-line strip;
+  // extra lines grow it naturally.
+  wrapRoot: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    minHeight: theme.layout.toolbarH,
+    paddingHorizontal: theme.space.s1,
+    variants: {
+      density: {
+        comfortable: { gap: theme.space.s2, paddingVertical: theme.space.s1 },
+        compact: { gap: theme.space.s1, paddingVertical: 0 }
+      },
+      justify: {
+        start: { justifyContent: "flex-start" },
+        between: { justifyContent: "space-between" }
+      }
+    }
+  },
+  // The scroll container itself must not grow to fill its parent's cross axis,
+  // so `flexGrow: 0` keeps it toolbar-height.
+  scrollRoot: {
+    minHeight: theme.layout.toolbarH,
+    flexGrow: 0
+  },
+  // `justify` has no meaning on a horizontally-scrolling content row (it sizes
+  // to its content), so this style intentionally omits that variant group.
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: theme.space.s1,
+    variants: {
+      density: {
+        comfortable: { gap: theme.space.s2 },
+        compact: { gap: theme.space.s1 }
+      }
+    }
+  },
+  // The trailing "More" affordance for `overflow="menu"`. A real ≥44pt target
+  // (`tapMin`), squared off.
+  more: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md
+  }
+}));
+
+export { Toolbar };