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

package/dist/chunk-QJJ6MADV.js

@@ -0,0 +1,274 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var POSTER = {
+  /** Inset from the top of the stage. */
+  padTop: 10,
+  /** Label size. Matches `type.caption2` on both platforms, but stated for clarity. */
+  fontSize: 11,
+  // loam-allow-raw: ramp key, read via theme.fontSize at the use site
+  /**
+   * Tracking as an `em` multiple. `theme.tracking` steps either side are `wide`
+   * (0.04) and `caps` (0.12), so the doc's 0.08em has no token — the value is
+   * kept and scaled by the font size, since RN `letterSpacing` is absolute.
+   */
+  trackingEm: 0.08
+};
+var PLAY_GLYPH_NUDGE = -1;
+function formatTime(seconds) {
+  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = String(s % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${sec}` : `${m}:${sec}`;
+}
+function VideoPlayer({
+  duration,
+  position,
+  playing,
+  title,
+  meta,
+  aspectRatio = 16 / 9,
+  captions = false,
+  quality,
+  playbackRate = 1,
+  onTogglePlay,
+  onSeek,
+  children,
+  // Inert (see prop docs); destructured so it never reaches a native element.
+  motion: _motion = "full"
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const [ownPlaying, setOwnPlaying] = React.useState(false);
+  const [ownPosition, setOwnPosition] = React.useState(0);
+  const [trackWidth, setTrackWidth] = React.useState(0);
+  const [controlsHeight, setControlsHeight] = React.useState(0);
+  const isPlaying = playing ?? ownPlaying;
+  const current = position ?? ownPosition;
+  const pct = duration > 0 ? Math.min(1, Math.max(0, current / duration)) : 0;
+  const toggle = () => {
+    const next = !isPlaying;
+    if (playing == null) setOwnPlaying(next);
+    onTogglePlay?.(next);
+  };
+  const seekFromX = (x) => {
+    if (trackWidth <= 0 || duration <= 0) return;
+    const next = Math.min(duration, Math.max(0, x / trackWidth * duration));
+    if (position == null) setOwnPosition(next);
+    onSeek?.(next);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.stage, { aspectRatio }], children: [
+      children ?? /* @__PURE__ */ jsx(View, { style: styles.placeholder, children: /* @__PURE__ */ jsxs(Text, { style: styles.placeholderLabel, children: [
+        "Poster ",
+        Math.round(aspectRatio * 100) / 100
+      ] }) }),
+      /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: isPlaying ? "Pause" : "Play",
+          accessibilityState: { selected: isPlaying },
+          onPress: toggle,
+          style: styles.stagePress,
+          children: [
+            /* @__PURE__ */ jsx(View, { style: [styles.scrim, isPlaying ? styles.scrimDim : null] }),
+            !isPlaying ? (
+              // Centred in the stage *above the transport bar*, with explicit insets
+              // so the answer is the same in Yoga and in the browser.
+              /* @__PURE__ */ jsx(View, { style: [styles.playSlot, { bottom: controlsHeight }], children: /* @__PURE__ */ jsx(View, { style: styles.playButton, children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "play",
+                  size: theme.icon.md,
+                  color: theme.color.text,
+                  strokeWidth: theme.icon.stroke
+                }
+              ) }) })
+            ) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [styles.controls, { pointerEvents: "box-none" }],
+          onLayout: (e) => setControlsHeight(e.nativeEvent.layout.height),
+          children: [
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "adjustable",
+                accessibilityLabel: "Seek",
+                "aria-valuemin": 0,
+                "aria-valuemax": Math.round(duration),
+                "aria-valuenow": Math.round(current),
+                "aria-valuetext": `${formatTime(current)} of ${formatTime(duration)}`,
+                accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+                onAccessibilityAction: (e) => {
+                  const delta = e.nativeEvent.actionName === "increment" ? 5 : -5;
+                  const next = Math.min(duration, Math.max(0, current + delta));
+                  if (position == null) setOwnPosition(next);
+                  onSeek?.(next);
+                },
+                onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width),
+                onPress: (e) => seekFromX(e.nativeEvent.locationX),
+                hitSlop: theme.space.s3,
+                style: styles.seek,
+                children: /* @__PURE__ */ jsxs(View, { style: styles.track, children: [
+                  /* @__PURE__ */ jsx(View, { style: [styles.fill, { width: `${pct * 100}%` }] }),
+                  /* @__PURE__ */ jsx(View, { style: [styles.knob, { start: `${pct * 100}%` }] })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs(View, { style: styles.metaRow, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: formatTime(current) }),
+              /* @__PURE__ */ jsxs(View, { style: styles.badges, children: [
+                captions ? /* @__PURE__ */ jsx(Icon, { name: "captions", size: theme.icon.xs, color: theme.color.text }) : null,
+                /* @__PURE__ */ jsxs(Text, { style: styles.metaText, children: [
+                  playbackRate,
+                  "\xD7"
+                ] }),
+                quality ? /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: quality }) : null
+              ] }),
+              /* @__PURE__ */ jsx(Text, { style: styles.metaText, children: formatTime(duration) })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    title || meta ? /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+      title ? /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }) : null,
+      meta ? /* @__PURE__ */ jsx(Text, { style: styles.metaLine, children: meta }) : null
+    ] }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden"
+  },
+  stage: { position: "relative", width: "100%", backgroundColor: theme.color.surface3 },
+  // Top-centre, not centred: the label captions the empty poster, it does not
+  // pretend to be the poster's content.
+  placeholder: {
+    ...cover(),
+    alignItems: "center",
+    justifyContent: "flex-start",
+    paddingTop: theme.space[POSTER.padTop]
+  },
+  placeholderLabel: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[POSTER.fontSize],
+    letterSpacing: theme.fontSize[POSTER.fontSize] * POSTER.trackingEm,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  stagePress: cover(),
+  // A scrim, so white control glyphs never sit on unknown pixels. Fixed black
+  // rather than the mode-aware `overlay.*`: what is underneath is video, and
+  // darkening it is the only direction that makes a white glyph legible.
+  scrim: { ...cover(), backgroundColor: theme.black.a8 },
+  scrimDim: { backgroundColor: theme.black.a4 },
+  // The band of the stage the transport bar does not cover. `bottom` is set from
+  // the bar's measured height at render time.
+  playSlot: {
+    position: "absolute",
+    top: 0,
+    start: 0,
+    end: 0,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // `tapMin`-sized *visual*, down from 56: the tap target is the whole stage, so
+  // the circle only has to be big enough to read as a play affordance. On a
+  // 16:9 stage 260pt wide, 56pt was a third of the frame's height and collided
+  // with the scrubber.
+  // loam-contrast-ignore — media chrome: the disc sits on video, `shadow.sm` is
+  // a lift rather than its boundary, and the glyph carries the state. An edge
+  // here would read as a defect over the frame.
+  playButton: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface,
+    alignItems: "center",
+    justifyContent: "center",
+    // Width is fixed, so trailing padding narrows the content box and pulls the
+    // centred glyph back by half of it — see PLAY_GLYPH_NUDGE.
+    paddingEnd: PLAY_GLYPH_NUDGE * -2,
+    ...theme.shadow.sm
+  },
+  controls: {
+    position: "absolute",
+    start: 0,
+    end: 0,
+    bottom: 0,
+    paddingHorizontal: theme.space.s3,
+    paddingBottom: theme.space.s2,
+    gap: theme.space.s1
+  },
+  // The visible rule is 4px; this row is the target it lives in.
+  seek: { height: theme.space.s5, justifyContent: "center" },
+  track: {
+    height: theme.space.s1,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.white.a9,
+    justifyContent: "center"
+  },
+  fill: {
+    position: "absolute",
+    start: 0,
+    top: 0,
+    bottom: 0,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  knob: {
+    position: "absolute",
+    width: theme.space.s3,
+    height: theme.space.s3,
+    marginStart: -theme.space.s3 / 2,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.knob
+  },
+  metaRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+  badges: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  metaText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    // The scrim over the poster is a light-mid tone in the tested (light) theme,
+    // so a bright caption failed AA (~2.3:1). The on-surface `text` token clears
+    // AA over the scrim (≥6.5:1) and matches the poster's own dark label.
+    color: theme.color.text
+  },
+  footer: { padding: theme.space.s4, gap: theme.space.s1 },
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    letterSpacing: theme.type.title3.letterSpacing,
+    color: theme.color.text
+  },
+  metaLine: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  }
+}));
+function cover() {
+  return { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 };
+}
+
+export { VideoPlayer };

package/dist/chunk-QKXCPTFS.js

@@ -0,0 +1,349 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Dimensions, Animated, Easing, View, StyleSheet, Pressable, Text, Modal } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var PANEL_FRACTION = 0.78;
+var SPEC = {
+  /** Panel top padding, before the safe-area inset is added. */
+  panelPadTop: 34,
+  /** Panel bottom padding. */
+  panelPadBottom: 22,
+  /** Gap between the panel's children (header → items, item → item). */
+  itemGap: 3,
+  /** Gap between the avatar and the name/email block. */
+  headerGap: 11,
+  /** Identity header padding: top / horizontal / bottom. */
+  headerPadTop: 6,
+  headerPadX: 10,
+  /** Gap between the name and the email. */
+  identityGap: 1,
+  /** Avatar diameter. */
+  avatar: 40,
+  /** Display-name size. */
+  nameSize: 14.5,
+  /** Email size. */
+  emailSize: 11.5
+};
+function NavDrawer({
+  open,
+  onClose,
+  items,
+  userName,
+  userEmail,
+  avatarInitials,
+  closeLabel = "Close navigation",
+  safeAreaTop = 0,
+  motion = "full",
+  inline = false
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(navDrawer);
+  const panelWidth = React.useMemo(() => Dimensions.get("window").width * PANEL_FRACTION, []);
+  const reducedMotion = theme.reduceMotion || motion === "reduced";
+  const instantMotion = motion === "none";
+  const [visible, setVisible] = React.useState(open);
+  const translateX = React.useRef(new Animated.Value(-panelWidth)).current;
+  const scrimOpacity = React.useRef(new Animated.Value(0)).current;
+  const panelOpacity = React.useRef(new Animated.Value(1)).current;
+  const slideDuration = theme.motion.enter.duration;
+  const slideEasing = React.useMemo(
+    () => Easing.bezier(...theme.motion.enter.easing),
+    [theme.motion.enter.easing]
+  );
+  const fadeDuration = theme.duration.base;
+  const fadeEasing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const animateIn = React.useCallback(() => {
+    if (instantMotion) {
+      translateX.setValue(0);
+      scrimOpacity.setValue(1);
+      panelOpacity.setValue(1);
+      return;
+    }
+    if (reducedMotion) {
+      translateX.setValue(0);
+      panelOpacity.setValue(0);
+      scrimOpacity.setValue(0);
+      Animated.parallel([
+        Animated.timing(panelOpacity, {
+          toValue: 1,
+          duration: fadeDuration,
+          easing: fadeEasing,
+          useNativeDriver: true
+        }),
+        Animated.timing(scrimOpacity, {
+          toValue: 1,
+          duration: fadeDuration,
+          easing: fadeEasing,
+          useNativeDriver: true
+        })
+      ]).start();
+      return;
+    }
+    translateX.setValue(-panelWidth);
+    scrimOpacity.setValue(0);
+    panelOpacity.setValue(1);
+    Animated.parallel([
+      Animated.timing(translateX, {
+        toValue: 0,
+        duration: slideDuration,
+        easing: slideEasing,
+        useNativeDriver: true
+      }),
+      Animated.timing(scrimOpacity, {
+        toValue: 1,
+        duration: fadeDuration,
+        easing: fadeEasing,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [
+    translateX,
+    scrimOpacity,
+    panelOpacity,
+    panelWidth,
+    slideDuration,
+    slideEasing,
+    fadeDuration,
+    fadeEasing,
+    reducedMotion,
+    instantMotion
+  ]);
+  const animateOut = React.useCallback(() => {
+    if (instantMotion) {
+      scrimOpacity.setValue(0);
+      panelOpacity.setValue(0);
+      setVisible(false);
+      return;
+    }
+    if (reducedMotion) {
+      Animated.parallel([
+        Animated.timing(panelOpacity, {
+          toValue: 0,
+          duration: fadeDuration,
+          easing: fadeEasing,
+          useNativeDriver: true
+        }),
+        Animated.timing(scrimOpacity, {
+          toValue: 0,
+          duration: fadeDuration,
+          easing: fadeEasing,
+          useNativeDriver: true
+        })
+      ]).start(({ finished }) => {
+        if (finished) setVisible(false);
+      });
+      return;
+    }
+    Animated.parallel([
+      Animated.timing(translateX, {
+        toValue: -panelWidth,
+        duration: slideDuration,
+        easing: slideEasing,
+        useNativeDriver: true
+      }),
+      Animated.timing(scrimOpacity, {
+        toValue: 0,
+        duration: fadeDuration,
+        easing: fadeEasing,
+        useNativeDriver: true
+      })
+    ]).start(({ finished }) => {
+      if (finished) setVisible(false);
+    });
+  }, [
+    translateX,
+    scrimOpacity,
+    panelOpacity,
+    panelWidth,
+    slideDuration,
+    slideEasing,
+    fadeDuration,
+    fadeEasing,
+    reducedMotion,
+    instantMotion
+  ]);
+  React.useEffect(() => {
+    if (open) {
+      setVisible(true);
+    } else if (visible) {
+      animateOut();
+    }
+  }, [open]);
+  React.useEffect(() => {
+    if (visible && open) animateIn();
+  }, [visible]);
+  const handleItemPress = (item) => {
+    item.onPress?.();
+    onClose();
+  };
+  const body = /* @__PURE__ */ jsxs(View, { style: [styles.root, inline && StyleSheet.absoluteFill], children: [
+    /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, styles.scrim, { opacity: scrimOpacity }], children: /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: StyleSheet.absoluteFill,
+        accessibilityRole: "button",
+        accessibilityLabel: closeLabel,
+        onPress: onClose
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        accessibilityViewIsModal: true,
+        accessibilityRole: "menu",
+        accessibilityLabel: userName ?? "Navigation",
+        style: [
+          styles.panel,
+          {
+            width: inline ? `${PANEL_FRACTION * 100}%` : panelWidth,
+            paddingTop: SPEC.panelPadTop + safeAreaTop,
+            opacity: panelOpacity,
+            transform: [{ translateX }]
+          }
+        ],
+        children: [
+          (avatarInitials || userName || userEmail) && /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+            avatarInitials ? /* @__PURE__ */ jsx(View, { style: styles.avatar, children: /* @__PURE__ */ jsx(Text, { style: styles.avatarText, children: avatarInitials }) }) : null,
+            /* @__PURE__ */ jsxs(View, { style: styles.identity, children: [
+              userName ? /* @__PURE__ */ jsx(Text, { style: styles.userName, numberOfLines: 1, children: userName }) : null,
+              userEmail ? /* @__PURE__ */ jsx(Text, { style: styles.userEmail, numberOfLines: 1, children: userEmail }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(View, { style: styles.list, children: items.map((item, i) => {
+            const active = item.active ?? false;
+            const fg = active ? theme.color.accentOnSoft : theme.color.text;
+            return /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                accessibilityRole: "menuitem",
+                accessibilityLabel: item.label,
+                accessibilityState: { selected: active },
+                onPress: () => handleItemPress(item),
+                style: [styles.item, active ? styles.itemActive : null],
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 20, color: fg }),
+                  /* @__PURE__ */ jsx(Text, { style: [styles.itemLabel, { color: fg }], numberOfLines: 1, children: item.label })
+                ]
+              },
+              `${item.label}-${i}`
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+  if (inline) return visible ? body : /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: onClose,
+      statusBarTranslucent: true,
+      children: body
+    }
+  );
+}
+var navDrawer = createStyleSheet((theme) => ({
+  root: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  scrim: {
+    backgroundColor: theme.color.scrim,
+    zIndex: theme.z.overlay
+  },
+  // `paddingTop` is applied at the use site — it folds in the safe-area inset.
+  // loam-contrast-ignore — the boundary here is the scrim, not the shadow.
+  // `color.scrim` is a 44% wash and is *not* re-resolved by high contrast, so
+  // this surface is still separated from the page when the elevation zeroes
+  // out. A border would put a hairline around every modal for no gain.
+  panel: {
+    height: "100%",
+    backgroundColor: theme.color.surface,
+    paddingHorizontal: theme.space.s3,
+    paddingBottom: SPEC.panelPadBottom,
+    gap: SPEC.itemGap,
+    zIndex: theme.z.modal,
+    ...theme.shadow.lg
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    minWidth: 0,
+    gap: SPEC.headerGap,
+    paddingTop: SPEC.headerPadTop,
+    paddingHorizontal: SPEC.headerPadX,
+    paddingBottom: theme.space.s4
+  },
+  avatar: {
+    width: SPEC.avatar,
+    height: SPEC.avatar,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  avatarText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.accentInk
+  },
+  // `minWidth: 0` lets a long name/email truncate instead of widening the row.
+  identity: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "column",
+    gap: SPEC.identityGap
+  },
+  userName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: SPEC.nameSize,
+    lineHeight: SPEC.nameSize * theme.lineHeight.snug,
+    color: theme.color.text
+  },
+  userEmail: {
+    fontFamily: theme.font.sans,
+    fontSize: SPEC.emailSize,
+    lineHeight: SPEC.emailSize * theme.lineHeight.snug,
+    color: theme.color.text2
+  },
+  // Horizontal padding now lives on the panel, so the rows sit inside its 12px.
+  list: {
+    gap: SPEC.itemGap
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    // Reference (buildDrawer): `gap:14px` — 14px is a step of the spacing ramp.
+    gap: theme.space[14],
+    // Reference: `padding:13px 12px` — use paddingVertical instead of fixed height.
+    paddingVertical: theme.space[13],
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    backgroundColor: "transparent",
+    // Reserved on every row, not just the active one: a border that appears with
+    // the state would move every label 1px when the selection changes.
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent"
+  },
+  itemActive: {
+    backgroundColor: theme.color.accentSoft,
+    // Which item you are on is carried by a fill alone, and a fill is what high
+    // contrast re-resolves away — the accent edge is what still says "here".
+    borderColor: theme.edge.accent
+  },
+  itemLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    // Reference (buildDrawer): `font-size:15px` — 15px, read from the ramp rather than hardcoded.
+    fontSize: theme.fontSize[15]
+  }
+}));
+
+export { NavDrawer };