@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-IDM7JJMO.js

@@ -1,110 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.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';
-
-var DEFAULT_LABELS = {
-  more: "More"
-};
-function Toolbar({
-  children,
-  accessibilityLabel,
-  overflow = "wrap",
-  density = "comfortable",
-  justify = "start",
-  onMorePress,
-  labels: labelsProp
-}) {
-  const labels = useLabels("toolbar", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet, { density, justify });
-  const theme = useLoamTheme("toolbar");
-  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: labels.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 };

package/dist/chunk-IVKMZ7BB.js

@@ -1,326 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
-import * as React from 'react';
-import { Animated, View, Text, Pressable } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DEFAULT_LABELS = {
-  play: "Play",
-  pause: "Pause",
-  mute: "Mute",
-  unmute: "Unmute",
-  captions: "Captions",
-  captionsMark: "CC",
-  fullscreen: "Fullscreen",
-  seek: "Seek",
-  seekValue: (current, total) => `${current} of ${total}`,
-  poster: (aspectRatio) => `Poster ${aspectRatio}`,
-  buffering: "Buffering",
-  error: "This video couldn\u2019t be played.",
-  retry: "Retry",
-  volume: (percent) => `Volume ${percent}%`,
-  speed: (rate) => `Speed ${rate}\xD7`
-};
-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,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const labels = useLabels("videoPlayer", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme("video-player");
-  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 level = useResolvedMotion(motion, "video-player");
-  const chrome = React.useRef(new Animated.Value(isPlaying ? 0 : 1)).current;
-  const wasPlaying = React.useRef(isPlaying);
-  React.useEffect(() => {
-    if (wasPlaying.current === isPlaying) return;
-    wasPlaying.current = isPlaying;
-    const to = isPlaying ? 0 : 1;
-    if (level === "none") chrome.setValue(to);
-    else
-      Animated.spring(chrome, {
-        ...springConfig(theme, "de"),
-        toValue: to,
-        useNativeDriver: true
-      }).start();
-  }, [isPlaying, level, chrome, theme]);
-  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__ */ jsx(Text, { style: styles.placeholderLabel, children: labels.poster(String(Math.round(aspectRatio * 100) / 100)) }) }),
-      /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: isPlaying ? labels.pause : labels.play,
-          accessibilityState: { selected: isPlaying },
-          onPress: toggle,
-          style: styles.stagePress,
-          children: [
-            /* @__PURE__ */ jsx(
-              Animated.View,
-              {
-                style: [
-                  styles.scrim,
-                  { opacity: chrome.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }) }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Animated.View,
-              {
-                pointerEvents: "none",
-                accessibilityElementsHidden: isPlaying,
-                importantForAccessibility: isPlaying ? "no-hide-descendants" : "auto",
-                style: [
-                  styles.playSlot,
-                  {
-                    bottom: controlsHeight,
-                    opacity: chrome,
-                    transform: level === "full" ? [{ scale: chrome.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) }] : []
-                  }
-                ],
-                children: isPlaying && level === "none" ? null : /* @__PURE__ */ jsx(View, { style: styles.playButton, children: /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    name: "play",
-                    size: theme.icon.md,
-                    color: theme.color.text,
-                    strokeWidth: theme.icon.stroke
-                  }
-                ) })
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        View,
-        {
-          style: [styles.controls, { pointerEvents: "box-none" }],
-          onLayout: (e) => setControlsHeight(e.nativeEvent.layout.height),
-          children: [
-            /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                accessibilityRole: "adjustable",
-                accessibilityLabel: labels.seek,
-                "aria-valuemin": 0,
-                "aria-valuemax": Math.round(duration),
-                "aria-valuenow": Math.round(current),
-                "aria-valuetext": labels.seekValue(formatTime(current), 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),
-                onTouchMove: (e) => seekFromX(e.nativeEvent.locationX),
-                hitSlop: theme.space.s3,
-                style: styles.seek,
-                children: /* @__PURE__ */ jsxs(View, { style: [styles.track, { pointerEvents: "none" }], 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 },
-  // 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 };