@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-QDYDBCFP.js

@@ -1,197 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { View, Image, Text } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var SIZE_PX = { xs: 28, sm: 36, md: 48, lg: 60, xl: 76 };
-function useStatusColor(status) {
-  const theme = useLoamTheme();
-  if (!status) return void 0;
-  switch (status) {
-    case "online":
-      return theme.color.good;
-    case "offline":
-      return theme.color.text3;
-    case "busy":
-      return theme.color.danger;
-    case "away":
-      return theme.color.warn;
-  }
-}
-function hashToChartIndex(seed) {
-  const s = seed ?? "";
-  let h = 0;
-  for (let i = 0; i < s.length; i += 1) h = h * 31 + s.charCodeAt(i) >>> 0;
-  return h % 6;
-}
-function hashedColors(theme, seed) {
-  const fills = [
-    { bg: theme.chart.c1, ink: theme.chart.c1Ink },
-    { bg: theme.chart.c2, ink: theme.chart.c2Ink },
-    { bg: theme.chart.c3, ink: theme.chart.c3Ink },
-    { bg: theme.chart.c4, ink: theme.chart.c4Ink },
-    { bg: theme.chart.c5, ink: theme.chart.c5Ink },
-    { bg: theme.chart.c6, ink: theme.chart.c6Ink }
-  ];
-  return fills[hashToChartIndex(seed)];
-}
-function initialsFromName(name) {
-  const words = (name ?? "").trim().split(/\s+/).filter(Boolean);
-  const first = words[0];
-  if (!first) return "";
-  if (words.length === 1) return first.slice(0, 2).toUpperCase();
-  const last = words[words.length - 1] ?? first;
-  return (first[0] + last[0]).toUpperCase();
-}
-function Avatar({
-  src,
-  name,
-  id,
-  size = "md",
-  status,
-  presence = "dot",
-  shape = "circle",
-  accent = false,
-  hashed = false,
-  // Inert (see prop docs); destructured so it never reaches a native element.
-  motion: _motion = "full"
-}) {
-  const { styles } = useStyles(sheet, { size, accent });
-  const theme = useLoamTheme();
-  const [errored, setErrored] = React.useState(false);
-  const statusColor = useStatusColor(status);
-  const dim = SIZE_PX[size];
-  const showImage = Boolean(src) && !errored;
-  const initials = initialsFromName(name);
-  const hashPair = hashed && initials ? hashedColors(theme, id ?? name) : void 0;
-  const fg = hashPair ? hashPair.ink : accent ? theme.color.accentOnSoft : theme.color.text2;
-  const label = name ?? "Avatar";
-  const shapeRadius = shape === "circle" ? theme.radius.full : shape === "rounded" ? theme.radius.lg : Math.round(dim * 0.32);
-  const shapeStyle = {
-    borderRadius: shapeRadius,
-    ...shape === "squircle" ? { borderCurve: "continuous" } : null
-  };
-  const dotSize = Math.round(dim * 0.28);
-  const ring = 2.5;
-  const dotStyle = {
-    position: "absolute",
-    right: 0,
-    bottom: 0,
-    width: dotSize,
-    height: dotSize,
-    borderRadius: theme.radius.full,
-    borderWidth: ring,
-    borderColor: theme.color.surface,
-    backgroundColor: statusColor
-  };
-  const ringStyle = {
-    position: "absolute",
-    top: -ring - 1,
-    left: -ring - 1,
-    right: -ring - 1,
-    bottom: -ring - 1,
-    borderRadius: shape === "circle" ? theme.radius.full : shapeRadius + ring + 1,
-    borderWidth: ring,
-    borderColor: statusColor,
-    ...shape === "squircle" ? { borderCurve: "continuous" } : null
-  };
-  return /* @__PURE__ */ jsxs(View, { style: styles.root, accessibilityRole: "image", accessibilityLabel: label, children: [
-    /* @__PURE__ */ jsx(View, { style: [styles.circle, shapeStyle, hashPair ? { backgroundColor: hashPair.bg } : null], children: showImage ? /* @__PURE__ */ jsx(Image, { source: { uri: src }, style: styles.image, onError: () => setErrored(true) }) : initials ? /* @__PURE__ */ jsx(Text, { style: [styles.initials, { color: fg }], children: initials }) : /* @__PURE__ */ jsx(Icon, { name: "user", size: Math.round(dim * 0.5), color: fg }) }),
-    statusColor && presence === "ring" ? /* @__PURE__ */ jsx(View, { style: ringStyle, accessibilityRole: "image", accessibilityLabel: status }) : null,
-    statusColor && presence === "dot" ? /* @__PURE__ */ jsx(View, { style: dotStyle, accessibilityRole: "image", accessibilityLabel: status }) : null
-  ] });
-}
-function AvatarGroup({ children, size = "md", max }) {
-  const { styles } = useStyles(sheet, { size, accent: false });
-  const theme = useLoamTheme();
-  const dim = SIZE_PX[size];
-  const ring = 2.5;
-  const overlap = Math.round(dim * 0.3);
-  const all = React.Children.toArray(children);
-  const visible = typeof max === "number" ? all.slice(0, max) : all;
-  const extra = all.length - visible.length;
-  const wrapper = (index) => ({
-    backgroundColor: theme.color.surface,
-    borderRadius: theme.radius.full,
-    padding: ring,
-    marginStart: index === 0 ? 0 : -overlap
-  });
-  return /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
-    visible.map((child, i) => /* @__PURE__ */ jsx(View, { style: wrapper(i), children: React.isValidElement(child) ? React.cloneElement(child, { size }) : child }, i)),
-    extra > 0 ? /* @__PURE__ */ jsx(View, { style: wrapper(visible.length), children: /* @__PURE__ */ jsx(View, { style: styles.circle, children: /* @__PURE__ */ jsxs(Text, { style: styles.overflow, children: [
-      "+",
-      extra
-    ] }) }) }) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  root: { position: "relative" },
-  group: { flexDirection: "row", alignItems: "center" },
-  circle: {
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-    borderRadius: theme.radius.full,
-    variants: {
-      size: {
-        xs: { width: theme.space[28], height: theme.space[28] },
-        sm: { width: theme.space[36], height: theme.space[36] },
-        md: { width: theme.space[48], height: theme.space[48] },
-        lg: { width: theme.space[60], height: theme.space[60] },
-        xl: { width: theme.space[76], height: theme.space[76] }
-      },
-      // The disc *is* the avatar, so it needs an edge that outlives its fill:
-      // `accentSoft` collapses to the plain surface under high contrast and the
-      // initials would be left floating. Every size sets an explicit width and
-      // height, so the border draws inside the box and changes no layout.
-      accent: {
-        true: {
-          backgroundColor: theme.color.accentSoft,
-          borderWidth: theme.borderWidth.base,
-          borderColor: theme.edge.accent
-        },
-        false: {
-          backgroundColor: theme.color.surface2,
-          borderWidth: theme.borderWidth.base,
-          borderColor: theme.edge.neutral
-        }
-      }
-    }
-  },
-  image: { width: "100%", height: "100%" },
-  initials: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[11] },
-        sm: { fontSize: theme.fontSize[14] },
-        md: { fontSize: theme.fontSize[19] },
-        lg: { fontSize: theme.fontSize[24] },
-        xl: { fontSize: theme.fontSize[30] }
-      },
-      accent: {
-        true: { color: theme.color.accentOnSoft },
-        false: { color: theme.color.text2 }
-      }
-    }
-  },
-  overflow: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    color: theme.color.text2,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[9] },
-        sm: { fontSize: theme.fontSize[12] },
-        md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[20] },
-        xl: { fontSize: theme.fontSize[25] }
-      },
-      accent: {}
-    }
-  }
-}));
-
-export { Avatar, AvatarGroup, hashToChartIndex, initialsFromName };

package/dist/chunk-QJJ6MADV.js

@@ -1,274 +0,0 @@
-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 };