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

package/dist/chunk-2A5NIQAK.js

@@ -0,0 +1,254 @@
+import { PhaseAnnouncement, NoteBlock } from './chunk-N32RGOA5.js';
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from './chunk-KMI5ML5I.js';
+import { decorativeProps, camInk } from './chunk-RW6ZL2FQ.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Text, Platform, findNodeHandle, AccessibilityInfo } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { DONE_LABEL, permissionScreen, PERMISSION } from '@btndprojects/loam-analyzer';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var STATE_ICON = {
+  undetermined: "camera",
+  prompting: "camera",
+  granted: "camera",
+  denied: "lock",
+  unavailable: "monitor"
+};
+function ScreenShell({
+  state,
+  icon,
+  onPrimary,
+  onSecondary,
+  inert = false,
+  announce = true,
+  autoFocus = false,
+  body
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(permissionSheet, { inert });
+  const screen = permissionScreen(state);
+  const copy = body ?? screen.body;
+  const heading = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (!autoFocus) return;
+    const node = heading.current;
+    if (!node || Platform.OS === "web") return;
+    const tag = findNodeHandle(node);
+    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
+  }, [autoFocus]);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: `loam-permission-${state}`,
+      style: styles.shell,
+      children: /* @__PURE__ */ jsxs(Card, { variant: "elevated", style: styles.card, children: [
+        /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? `${screen.heading}. ${copy}` : null }),
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsx(View, { accessible: false, style: styles.glyph, ...decorativeProps(), children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: icon ?? STATE_ICON[state],
+              size: theme.icon.lg,
+              color: theme.color.infoOnSoft
+            }
+          ) }),
+          /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx(Text, { ref: heading, accessibilityRole: "header", style: styles.heading, children: screen.heading }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.body, children: copy })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(NoteBlock, { title: PERMISSION[state].label, description: screen.note }) }),
+        /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+          screen.secondary ? /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, disabled: inert, onPress: onSecondary, children: screen.secondary }) }) : null,
+          /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, disabled: inert, onPress: onPrimary, children: screen.primary }) })
+        ] }) })
+      ] })
+    }
+  );
+}
+function PermissionPrimer({
+  privacyStatement,
+  prompting = false,
+  onContinue,
+  onUpload,
+  autoFocus,
+  announce
+}) {
+  return /* @__PURE__ */ jsx(
+    ScreenShell,
+    {
+      state: prompting ? "prompting" : "undetermined",
+      inert: prompting,
+      body: privacyStatement,
+      onPrimary: onContinue,
+      onSecondary: onUpload,
+      autoFocus,
+      announce
+    }
+  );
+}
+function CameraDenied({
+  onOpenSettings,
+  onUpload,
+  autoFocus,
+  announce
+}) {
+  return /* @__PURE__ */ jsx(
+    ScreenShell,
+    {
+      state: "denied",
+      onPrimary: onOpenSettings,
+      onSecondary: onUpload,
+      autoFocus,
+      announce
+    }
+  );
+}
+function CameraUnavailable({
+  onUpload,
+  autoFocus,
+  announce
+}) {
+  return /* @__PURE__ */ jsx(
+    ScreenShell,
+    {
+      state: "unavailable",
+      onPrimary: onUpload,
+      autoFocus,
+      announce
+    }
+  );
+}
+function CameraPermissionScreen({
+  state,
+  onRequestPermission,
+  onOpenSettings,
+  onUpload,
+  privacyStatement,
+  autoFocus,
+  announce
+}) {
+  if (state === "granted") return null;
+  if (state === "denied") {
+    return /* @__PURE__ */ jsx(
+      CameraDenied,
+      {
+        onOpenSettings,
+        onUpload,
+        autoFocus,
+        announce
+      }
+    );
+  }
+  if (state === "unavailable") {
+    return /* @__PURE__ */ jsx(CameraUnavailable, { onUpload, autoFocus, announce });
+  }
+  return /* @__PURE__ */ jsx(
+    PermissionPrimer,
+    {
+      prompting: state === "prompting",
+      privacyStatement,
+      onContinue: onRequestPermission,
+      onUpload,
+      autoFocus,
+      announce
+    }
+  );
+}
+function CaptureDone({
+  label = DONE_LABEL,
+  actionLabel = "Take another",
+  onTakeAnother,
+  announce = true
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(permissionSheet);
+  return /* @__PURE__ */ jsxs(View, { testID: "loam-capture-done", style: styles.done, children: [
+    /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? label : null }),
+    /* @__PURE__ */ jsx(View, { accessible: false, style: styles.doneMark, ...decorativeProps(), children: /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.lg, color: theme.color.goodInk }) }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.doneLabel, { color: camInk(theme) }], children: label }),
+    /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, onPress: onTakeAnother, children: actionLabel })
+  ] });
+}
+var permissionSheet = createStyleSheet((theme) => ({
+  shell: {
+    width: "100%",
+    alignItems: "center",
+    variants: {
+      // The OS owns the dialog that is up. We draw nothing over it, and we do
+      // not leave live controls under it either.
+      inert: {
+        true: { opacity: theme.state.disabledOpacity, pointerEvents: "none" },
+        false: { pointerEvents: "auto" }
+      }
+    }
+  },
+  card: {
+    width: "100%",
+    maxWidth: theme.panel.lg
+  },
+  glyph: {
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.infoSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.info
+  },
+  heading: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.title3.fontSize,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
+  body: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15],
+    lineHeight: theme.fontSize[15] * theme.lineHeight.relaxed,
+    color: theme.color.text2
+  },
+  // The slots share one row when both labels fit on a line and each takes the
+  // full width when they do not. Equal zero-basis slots split a 360pt card
+  // into two ~135pt halves, and "Upload instead" at `lg` wrapped onto two lines
+  // inside its button.
+  actions: {
+    width: "100%",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  actionSlot: {
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: "auto"
+  },
+  done: {
+    width: "100%",
+    maxWidth: theme.panel.sm,
+    alignSelf: "center",
+    alignItems: "center",
+    gap: theme.space[12],
+    padding: theme.space[16],
+    borderRadius: theme.radius.xl,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  doneMark: {
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.good
+  },
+  doneLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15]
+  }
+}));
+
+export { CameraDenied, CameraPermissionScreen, CameraUnavailable, CaptureDone, PermissionPrimer };

package/dist/chunk-2GK6PHGE.js

@@ -0,0 +1,363 @@
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Pressable, Text, Animated, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function formatTime(seconds) {
+  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+}
+function AudioMiniBar({
+  title,
+  meta,
+  playing = false,
+  progress,
+  onPress,
+  onTogglePlay
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  return /* @__PURE__ */ jsxs(View, { style: styles.mini, children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `${title}${meta ? `, ${meta}` : ""}. Expand player`,
+        onPress,
+        style: styles.miniBody,
+        children: [
+          /* @__PURE__ */ jsx(View, { style: styles.miniArt }),
+          /* @__PURE__ */ jsxs(View, { style: styles.miniText, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.miniTitle, numberOfLines: 1, children: title }),
+            meta ? /* @__PURE__ */ jsx(Text, { style: styles.miniMeta, numberOfLines: 1, children: meta }) : null
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: playing ? "Pause" : "Play",
+        onPress: onTogglePlay,
+        hitSlop: Math.max(0, (theme.tapMin - theme.ctl.iconBtn) / 2),
+        style: styles.miniTransport,
+        children: /* @__PURE__ */ jsx(Icon, { name: playing ? "pause" : "play", size: 16, color: theme.color.accentInk })
+      }
+    ),
+    progress != null ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [styles.miniProgress, { width: `${Math.max(0, Math.min(1, progress)) * 100}%` }]
+      }
+    ) : null
+  ] });
+}
+function AudioSheet({
+  title,
+  meta,
+  playing = false,
+  position = 0,
+  duration = 0,
+  onTogglePlay,
+  onSkipBack,
+  onSkipForward,
+  onCollapse
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const pct = duration > 0 ? Math.min(1, Math.max(0, position / duration)) : 0;
+  return /* @__PURE__ */ jsxs(View, { style: styles.sheetBody, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Collapse player",
+        onPress: onCollapse,
+        style: styles.grabberHit,
+        children: /* @__PURE__ */ jsx(View, { style: styles.grabber })
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: styles.artwork, children: /* @__PURE__ */ jsx(Text, { style: styles.artworkLabel, children: "Artwork 1:1" }) }),
+    /* @__PURE__ */ jsxs(View, { style: styles.sheetText, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: title }),
+      meta ? /* @__PURE__ */ jsx(Text, { style: styles.sheetMeta, children: meta }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.progressWrap, children: [
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          accessibilityRole: "progressbar",
+          accessibilityLabel: "Playback position",
+          "aria-valuemin": 0,
+          "aria-valuemax": Math.round(duration),
+          "aria-valuenow": Math.round(position),
+          style: styles.progressTrack,
+          children: /* @__PURE__ */ jsx(View, { style: [styles.progressFill, { width: `${pct * 100}%` }] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(View, { style: styles.timeRow, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.time, children: formatTime(position) }),
+        /* @__PURE__ */ jsxs(Text, { style: styles.time, children: [
+          "-",
+          formatTime(Math.max(0, duration - position))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.transportRow, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Skip back",
+          onPress: onSkipBack,
+          style: styles.transportSecondary,
+          children: /* @__PURE__ */ jsx(Icon, { name: "skip-back", size: 22, color: theme.color.text2 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: playing ? "Pause" : "Play",
+          onPress: onTogglePlay,
+          style: styles.transportPrimary,
+          children: /* @__PURE__ */ jsx(Icon, { name: playing ? "pause" : "play", size: 26, color: theme.color.accentInk })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Skip forward",
+          onPress: onSkipForward,
+          style: styles.transportSecondary,
+          children: /* @__PURE__ */ jsx(Icon, { name: "skip-forward", size: 22, color: theme.color.text2 })
+        }
+      )
+    ] })
+  ] });
+}
+function AudioPlayerCollapsible({
+  expanded,
+  onExpandedChange,
+  sheetHeight = 420,
+  motion = "full",
+  ...rest
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const resolvedMotion = useResolvedMotion(motion);
+  const [ownExpanded, setOwnExpanded] = React.useState(false);
+  const isExpanded = expanded ?? ownExpanded;
+  const fade = React.useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  const expand = React.useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  React.useEffect(() => {
+    const to = isExpanded ? 1 : 0;
+    if (resolvedMotion === "none") {
+      fade.setValue(to);
+      expand.setValue(to);
+      return;
+    }
+    Animated.timing(fade, {
+      toValue: to,
+      duration: theme.duration.slow,
+      easing: Easing.bezier(...theme.easing.spring),
+      useNativeDriver: false
+    }).start();
+    if (resolvedMotion === "full") {
+      Animated.timing(expand, {
+        toValue: to,
+        duration: theme.duration.slow,
+        easing: Easing.bezier(...theme.easing.spring),
+        useNativeDriver: false
+      }).start();
+    } else {
+      expand.setValue(to);
+    }
+  }, [isExpanded, resolvedMotion, fade, expand, theme.duration.slow, theme.easing.spring]);
+  const setExpanded = (next) => {
+    if (expanded == null) setOwnExpanded(next);
+    onExpandedChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.collapsible, children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: { opacity: fade.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }) },
+        children: /* @__PURE__ */ jsx(AudioMiniBar, { ...rest, onPress: () => setExpanded(true) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          styles.sheet,
+          {
+            height: expand.interpolate({ inputRange: [0, 1], outputRange: [0, sheetHeight] }),
+            opacity: fade
+          },
+          { pointerEvents: isExpanded ? "auto" : "none" }
+        ],
+        children: /* @__PURE__ */ jsx(AudioSheet, { ...rest, onCollapse: () => setExpanded(false) })
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  collapsible: { position: "relative" },
+  // ---- mini bar ----
+  mini: {
+    position: "relative",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[11],
+    paddingVertical: theme.space[9],
+    paddingHorizontal: theme.space[11],
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden",
+    ...theme.shadow.md
+  },
+  miniBody: { flexDirection: "row", alignItems: "center", gap: theme.space.s3, flex: 1 },
+  miniArt: {
+    width: theme.space[34],
+    height: theme.space[34],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.surface3
+  },
+  miniText: { flex: 1, minWidth: 0 },
+  miniTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text
+  },
+  miniMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3
+  },
+  miniTransport: {
+    // Square icon button on the control-size ramp (icon-button tier = 36).
+    width: theme.ctl.iconBtn,
+    height: theme.ctl.iconBtn,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  miniProgress: {
+    position: "absolute",
+    left: 0,
+    bottom: 0,
+    height: theme.space[2],
+    backgroundColor: theme.color.accent
+  },
+  // ---- expanded sheet ----
+  sheet: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: "hidden",
+    borderTopLeftRadius: theme.radius.xl,
+    borderTopRightRadius: theme.radius.xl,
+    backgroundColor: theme.color.surface,
+    // The sheet sits directly on the content with no scrim of its own, so its
+    // top edge is the entire boundary — and `shadow.lg` zeroes out under high
+    // contrast, where `surface` on `bg` is a ~1.06 ratio. `edge.neutral` is the
+    // rule that still says where the sheet starts, and it is `transparent`
+    // until the preference flips, so the resting sheet is untouched.
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.edge.neutral,
+    ...theme.shadow.lg
+  },
+  sheetBody: {
+    paddingTop: theme.space[14],
+    paddingHorizontal: theme.space[20],
+    paddingBottom: theme.space[20],
+    gap: theme.space.s4,
+    flex: 1
+  },
+  grabberHit: { alignSelf: "center", minHeight: theme.tapMin, justifyContent: "center" },
+  grabber: {
+    width: theme.space[38],
+    height: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3
+  },
+  artwork: {
+    height: theme.space[152],
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  artworkLabel: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    // Uppercase wants the caps tracking step, which is a ratio — multiply it by
+    // the size rather than restating the product as a bare 1.2.
+    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
+    textTransform: "uppercase",
+    // On the `surface3` artwork placeholder, `text3` is 4.16:1 (WCAG fail);
+    // primary `text` clears 4.5:1.
+    color: theme.color.text
+  },
+  sheetText: { gap: theme.space[3] },
+  sheetTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    color: theme.color.text
+  },
+  sheetMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text3
+  },
+  progressWrap: { gap: theme.space[6] },
+  progressTrack: {
+    height: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3
+  },
+  progressFill: {
+    height: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  timeRow: { flexDirection: "row", justifyContent: "space-between" },
+  time: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    color: theme.color.text3
+  },
+  transportRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[22]
+  },
+  transportSecondary: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  transportPrimary: {
+    width: theme.space[58],
+    height: theme.space[58],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+
+export { AudioMiniBar, AudioPlayerCollapsible, AudioSheet };

package/dist/chunk-2WUTXHMU.js

@@ -0,0 +1 @@
+