@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-VLMT6KYT.js

@@ -0,0 +1,350 @@
+import { LevelMeter } from './chunk-EOLZWRV6.js';
+import { StatusDot } from './chunk-OANH27AK.js';
+import { Thinking } from './chunk-LUZFCCSD.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Text } from './chunk-L4D5LHCH.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { announce } from './chunk-W23G6JLF.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Animated, Easing } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  recording: "Recording",
+  listening: "Listening\u2026",
+  paused: "Paused",
+  saving: "Saving\u2026",
+  savingReason: "Saving the recording",
+  failed: (kind) => kind === "recording" ? "Recording stopped" : "Listening stopped",
+  stop: "Stop",
+  done: "Done",
+  pause: "Pause",
+  resume: "Resume",
+  retry: "Retry",
+  dismiss: "Dismiss",
+  started: (kind) => kind === "recording" ? "Recording started" : "Listening",
+  announcePaused: "Paused",
+  saved: "Saved"
+};
+function formatRecordingTime(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const sec = String(total % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${sec}` : `${m}:${sec}`;
+}
+function useElapsed(startedAt, running) {
+  const start = startedAt === void 0 ? void 0 : +startedAt;
+  const pausedFor = React.useRef(0);
+  const pausedAt = React.useRef(null);
+  const [now, setNow] = React.useState(() => Date.now());
+  React.useEffect(() => {
+    pausedFor.current = 0;
+    pausedAt.current = null;
+  }, [start]);
+  React.useEffect(() => {
+    if (!running) {
+      pausedAt.current ??= Date.now();
+      return void 0;
+    }
+    if (pausedAt.current !== null) {
+      pausedFor.current += Date.now() - pausedAt.current;
+      pausedAt.current = null;
+    }
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, [running]);
+  if (start === void 0) return 0;
+  const end = pausedAt.current ?? now;
+  return end - start - pausedFor.current;
+}
+function RecordingDot({ still }) {
+  const { styles: s } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const p = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (still) {
+      p.setValue(1);
+      return void 0;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(p, {
+          toValue: 0.4,
+          duration: theme.duration[700],
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        }),
+        Animated.timing(p, {
+          toValue: 1,
+          duration: theme.duration[700],
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [still, p, theme]);
+  return /* @__PURE__ */ jsx(View, { testID: "recording-dot", style: s.dotRing, children: /* @__PURE__ */ jsx(Animated.View, { style: [s.dot, { opacity: p }] }) });
+}
+function RecordingIndicator({
+  kind = "recording",
+  status = "active",
+  startedAt,
+  source,
+  level,
+  muted,
+  onStop,
+  onPause,
+  onResume,
+  onRetry,
+  onDismiss,
+  error,
+  presentation = "bar",
+  spot = "bottom-center",
+  compact = false,
+  count,
+  density = "comfortable",
+  orientation = "horizontal",
+  motion,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles: s } = useStyles(sheet);
+  const labels = useLabels("recordingIndicator", DEFAULT_LABELS, labelsProp);
+  const resolved = useResolvedMotion(motion);
+  const pill = presentation === "pill";
+  const recording = kind === "recording";
+  const elapsed = useElapsed(startedAt, status === "active");
+  const previous = React.useRef(null);
+  React.useEffect(() => {
+    const prev = previous.current;
+    previous.current = status;
+    if (status === "active" && (prev === null || prev === "paused")) announce(labels.started(kind));
+    else if (status === "paused" && prev !== "paused") announce(labels.announcePaused);
+  }, [status, kind, labels]);
+  const statusRef = React.useRef(status);
+  statusRef.current = status;
+  React.useEffect(
+    () => () => {
+      if (statusRef.current === "finishing") announce(labels.saved);
+    },
+    [labels.saved]
+  );
+  const failed = status === "failed";
+  const live = status === "active";
+  const label = failed ? labels.failed(kind) : status === "finishing" ? labels.saving : status === "paused" ? labels.paused : recording ? labels.recording : labels.listening;
+  const dot = status === "finishing" ? /* @__PURE__ */ jsx(Thinking, { size: "sm", tone: "neutral", label: "", announce: false, motion }) : failed ? /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: 16, color: theme.color.dangerOnSoft }) : status === "paused" ? /* @__PURE__ */ jsx(StatusDot, { state: "paused", size: "sm" }) : recording ? /* @__PURE__ */ jsx(RecordingDot, { still: resolved !== "full" }) : /* @__PURE__ */ jsx(View, { testID: "listening-dot", style: s.listenRing, children: /* @__PURE__ */ jsx(View, { style: s.listenDot }) });
+  const showLabel = !(pill && compact);
+  const showTime = recording && !failed && showLabel && !(pill && status === "finishing");
+  const showSource = !pill && !compact && !failed && status !== "finishing" && !!source;
+  const meterSlot = level !== void 0 && (!pill || live);
+  const ink = failed ? theme.color.dangerOnSoft : theme.color.text;
+  const vertical = spot.startsWith("top") ? s.top : s.bottom;
+  const horizontal = spot.endsWith("start") ? s.start : spot.endsWith("end") ? s.end : s.center;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessibilityRole: "summary",
+      accessibilityLabel: [
+        label,
+        showTime ? formatRecordingTime(elapsed) : "",
+        failed ? error ?? "" : source ?? ""
+      ].filter(Boolean).join(", "),
+      style: [
+        s.root,
+        failed && s.failed,
+        pill ? [s.pill, vertical, horizontal] : s.bar,
+        density === "compact" ? { minHeight: theme.space[36], paddingVertical: theme.space[2] } : null,
+        orientation === "vertical" ? { flexDirection: "column", alignItems: "flex-start", borderRadius: theme.radius[12] } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: s.slot, children: dot }),
+        /* @__PURE__ */ jsxs(View, { style: s.text, children: [
+          /* @__PURE__ */ jsxs(View, { style: s.line, children: [
+            showLabel ? /* @__PURE__ */ jsx(Text, { variant: "subheadline", numberOfLines: 1, style: [s.label, { color: ink }], children: label }) : null,
+            showTime ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                variant: "footnote",
+                style: [s.count, { color: live ? theme.color.text : theme.color.text2 }],
+                children: formatRecordingTime(elapsed)
+              }
+            ) : null,
+            count !== void 0 && count > 0 ? /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "neutral", children: String(count) }) : null
+          ] }),
+          failed && error ? /* @__PURE__ */ jsx(Text, { variant: "caption1", numberOfLines: 1, style: { color: ink }, children: error }) : showSource ? /* @__PURE__ */ jsx(Text, { variant: "caption1", tone: "secondary", numberOfLines: 1, children: source }) : null
+        ] }),
+        meterSlot ? /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: "recording-meter",
+            style: [
+              s.meter,
+              pill ? compact ? s.meterCompact : s.meterPill : null,
+              !live && s.hidden
+            ],
+            children: /* @__PURE__ */ jsx(
+              LevelMeter,
+              {
+                level,
+                size: 24,
+                bars: pill ? compact ? 8 : 12 : 24,
+                muted,
+                showStatus: false,
+                motion
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(View, { style: s.spacer }),
+        recording && onPause && onResume && live && !compact ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "md",
+            accessibilityLabel: labels.pause,
+            leadingIcon: "pause",
+            onPress: onPause
+          }
+        ) : null,
+        recording && onPause && onResume && status === "paused" ? pill ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "md",
+            accessibilityLabel: labels.resume,
+            leadingIcon: "play",
+            onPress: onResume
+          }
+        ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", onPress: onResume, children: labels.resume }) : null,
+        failed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          onRetry ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", onPress: onRetry, children: labels.retry }) : null,
+          onDismiss ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "md",
+              accessibilityLabel: labels.dismiss,
+              leadingIcon: "x",
+              onPress: onDismiss
+            }
+          ) : null
+        ] }) : onStop ? (
+          // Icon-only 36 on phones, so the meter keeps its width.
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: recording ? "danger" : "primary",
+              size: "md",
+              accessibilityLabel: recording ? labels.stop : labels.done,
+              softDisabled: status === "finishing",
+              disabledReason: status === "finishing" ? labels.savingReason : void 0,
+              onPress: onStop,
+              children: recording ? /* @__PURE__ */ jsx(View, { style: [s.stopGlyph, { backgroundColor: theme.color.dangerInk }] }) : /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, color: theme.color.accentInk })
+            }
+          )
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    minHeight: theme.space[44],
+    // Final 13: the 36 slots sit in p 3 + the 1 px edge, so the bar lands on 44 (not 46).
+    paddingVertical: theme.space[3],
+    paddingStart: theme.space[3],
+    paddingEnd: theme.space[3],
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  bar: { borderRadius: theme.radius[12], marginHorizontal: theme.space.s4 },
+  pill: {
+    position: "absolute",
+    borderRadius: theme.radius.full,
+    paddingEnd: theme.space[3],
+    ...theme.shadow.lg
+  },
+  top: { top: theme.space.s4 },
+  bottom: { bottom: theme.space.s4 },
+  start: { start: theme.space.s4 },
+  end: { end: theme.space.s4 },
+  center: { alignSelf: "center" },
+  slot: {
+    width: theme.space[36],
+    height: theme.space[36],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dotRing: {
+    width: theme.space[14],
+    height: theme.space[14],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.danger,
+    backgroundColor: theme.color.dangerSoft,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    width: theme.space[8],
+    height: theme.space[8],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.danger
+  },
+  listenRing: {
+    width: theme.space[14],
+    height: theme.space[14],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.info,
+    backgroundColor: theme.color.infoSoft,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  listenDot: {
+    width: theme.space[8],
+    height: theme.space[8],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.status.working
+  },
+  failed: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
+  meter: {
+    flex: 1,
+    minWidth: theme.space[24],
+    height: theme.space[24],
+    marginHorizontal: theme.space.s2,
+    overflow: "hidden",
+    flexDirection: "row",
+    justifyContent: "flex-end"
+  },
+  meterPill: { flex: 0, width: theme.space[48], marginHorizontal: theme.space[6] },
+  meterCompact: { flex: 0, width: theme.space[32], marginHorizontal: theme.space[6] },
+  hidden: { opacity: 0 },
+  spacer: { flex: 1 },
+  stopGlyph: { width: theme.space[10], height: theme.space[10], borderRadius: theme.radius[2] },
+  text: { flexShrink: 1, minWidth: 0 },
+  line: { flexDirection: "row", alignItems: "baseline", gap: theme.space.s2 },
+  label: { fontWeight: theme.fontWeight.semibold, color: theme.color.text },
+  count: {
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.medium,
+    fontVariant: ["tabular-nums"]
+  }
+}));
+
+export { RecordingIndicator, formatRecordingTime, useElapsed };

package/dist/chunk-VMHGBUGS.js

@@ -0,0 +1,35 @@
+import 'react';
+import { View } from 'react-native';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx } from 'react/jsx-runtime';
+
+// src/divider/divider.tsx
+function Divider({
+  inset = "full",
+  vertical = false,
+  align = "start",
+  style,
+  testID
+}) {
+  const theme = useLoamTheme("divider");
+  const start = inset === "full" ? 0 : inset === 16 ? theme.space[16] : theme.space[16] + theme.space[22] + theme.space[12];
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      "aria-hidden": true,
+      style: [
+        vertical ? { width: theme.borderWidth.thin, alignSelf: "stretch" } : {
+          height: theme.borderWidth.thin,
+          ...align === "end" ? { marginEnd: start } : { marginStart: start }
+        },
+        { backgroundColor: theme.color.border },
+        style
+      ]
+    }
+  );
+}
+
+export { Divider };