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

package/dist/chunk-RUZHTGKB.js

@@ -0,0 +1,237 @@
+import { Progress } from './chunk-2ZZ7TDJ4.js';
+import { Sheet } from './chunk-ZVFE5QGU.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Text, Modal } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function ReleaseSummary({
+  release,
+  productName = "Version"
+}) {
+  const { styles } = useStyles(sheet);
+  const meta = [release.from ? `from ${release.from}` : null, release.size].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs(View, { style: styles.summaryRow, children: [
+    /* @__PURE__ */ jsxs(Text, { style: styles.version, children: [
+      productName,
+      " ",
+      release.version
+    ] }),
+    meta ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: meta }) : null
+  ] });
+}
+function ReleaseNotes({ notes }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  if (!notes.length) return null;
+  return /* @__PURE__ */ jsx(View, { style: styles.notes, children: notes.map((n) => /* @__PURE__ */ jsxs(View, { style: styles.noteRow, children: [
+    /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.good }),
+    /* @__PURE__ */ jsx(Text, { style: styles.noteText, children: n })
+  ] }, n)) });
+}
+function ReleaseMeta({ release }) {
+  const { styles } = useStyles(sheet);
+  const pairs = [
+    ["Installed", release.from],
+    ["Required", release.version],
+    ["Download", release.size]
+  ];
+  return /* @__PURE__ */ jsx(View, { style: styles.chips, children: pairs.filter((pair) => Boolean(pair[1])).map(([k, v]) => /* @__PURE__ */ jsx(View, { style: styles.chip, children: /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
+    k,
+    " \xB7 ",
+    v
+  ] }) }, k)) });
+}
+function UpdateNotice({
+  release,
+  open = true,
+  state: stateProp,
+  defaultState = "available",
+  onStateChange,
+  progress = 0,
+  onDownload,
+  onCancel,
+  onApply,
+  onSnooze,
+  applyLabel = "Restart",
+  productName = "Version",
+  layout = "sheet",
+  motion = "full"
+}) {
+  const { styles } = useStyles(sheet);
+  const [uncontrolled, setUncontrolled] = React.useState(defaultState);
+  const state = stateProp ?? uncontrolled;
+  const pct = Math.max(0, Math.min(100, Math.round(progress)));
+  const go = (next) => {
+    if (stateProp === void 0) setUncontrolled(next);
+    onStateChange?.(next);
+  };
+  const kicker = state === "ready" ? "Update ready" : state === "downloading" ? "Downloading" : "Update available";
+  const content = /* @__PURE__ */ jsxs(View, { accessibilityLiveRegion: "polite", style: styles.body, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: kicker }),
+    /* @__PURE__ */ jsx(ReleaseSummary, { release, productName }),
+    state !== "downloading" ? /* @__PURE__ */ jsx(ReleaseNotes, { notes: release.notes ?? [] }) : null,
+    state === "downloading" ? /* @__PURE__ */ jsxs(View, { style: styles.progressBlock, children: [
+      /* @__PURE__ */ jsx(Progress, { size: "sm", value: pct, accessibilityLabel: "Download progress", motion }),
+      /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
+        pct,
+        "% \xB7 you can keep working"
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(View, { style: styles.actions, children: state === "available" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      onSnooze ? /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", onPress: onSnooze, children: "Not now" }) : null,
+      /* @__PURE__ */ jsx(View, { style: styles.grow }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "lg",
+          variant: "primary",
+          leadingIcon: "download",
+          onPress: () => {
+            go("downloading");
+            onDownload?.();
+          },
+          children: "Download"
+        }
+      )
+    ] }) : state === "downloading" ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "lg",
+        variant: "outline",
+        onPress: () => {
+          go("available");
+          onCancel?.();
+        },
+        children: "Cancel"
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.applyNote, children: "Applies on restart. Your open work is restored." }),
+      /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", leadingIcon: "refresh", onPress: onApply, children: applyLabel })
+    ] }) })
+  ] });
+  if (layout === "inline") return content;
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose: onSnooze, dismissible: Boolean(onSnooze), motion, children: content });
+}
+function BlockingUpdate({
+  open = true,
+  release,
+  title = "This build can no longer connect.",
+  actionLabel = "Update and restart",
+  onApply
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible: open,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: () => {
+      },
+      children: /* @__PURE__ */ jsx(View, { style: styles.blockScrim, children: /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", accessibilityViewIsModal: true, style: styles.blockCard, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.blockKicker, children: "Required update" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.blockTitle, children: title }),
+        release.reason ? /* @__PURE__ */ jsx(Text, { style: styles.blockReason, children: release.reason }) : null,
+        /* @__PURE__ */ jsx(ReleaseMeta, { release }),
+        /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, variant: "primary", leadingIcon: "download", onPress: onApply, children: actionLabel })
+      ] }) })
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  body: { gap: theme.space[11] },
+  kicker: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.accentStrong
+  },
+  summaryRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space[8] },
+  version: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    color: theme.color.text
+  },
+  meta: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3,
+    fontVariant: ["tabular-nums"]
+  },
+  notes: { gap: theme.space[5] },
+  noteRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space[8] },
+  noteText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2
+  },
+  progressBlock: { gap: theme.space[6] },
+  // Wraps: on a phone the restart note and a large button do not share 340px
+  // without squeezing the note to three 115px lines.
+  actions: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space[9] },
+  grow: { flex: 1 },
+  applyNote: {
+    flexGrow: 1,
+    flexBasis: theme.panel.xs,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  chips: { flexDirection: "row", flexWrap: "wrap", gap: theme.space[8] },
+  chip: {
+    paddingHorizontal: theme.space[10],
+    paddingVertical: theme.space[5],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  blockScrim: {
+    flex: 1,
+    backgroundColor: theme.color.scrim,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.space[24]
+  },
+  blockCard: {
+    width: "100%",
+    maxWidth: theme.dialog.md,
+    gap: theme.space[14],
+    padding: theme.space[24],
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.lg
+  },
+  blockKicker: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.danger
+  },
+  blockTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title1.fontSize,
+    lineHeight: theme.type.title1.lineHeight,
+    color: theme.color.text
+  },
+  blockReason: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text2
+  }
+}));
+
+export { BlockingUpdate, ReleaseMeta, ReleaseNotes, ReleaseSummary, UpdateNotice };

package/dist/chunk-RW6ZL2FQ.js

@@ -0,0 +1,284 @@
+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 { profile, gateHintDisplay } from '@btndprojects/loam-analyzer';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function camGlass(theme) {
+  return {
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  };
+}
+function camInk(theme) {
+  return theme.media.ink;
+}
+function camMeta(theme) {
+  return {
+    fontFamily: theme.font.mono,
+    color: theme.white.a10,
+    letterSpacing: theme.tracking.wider
+  };
+}
+var GATE_ANNOUNCE_MS = 1200;
+function pressedProps(on) {
+  return { "aria-pressed": on };
+}
+function decorativeProps() {
+  return { "aria-hidden": true };
+}
+function untabbableProps() {
+  return { tabIndex: -1 };
+}
+var AnnounceContext = React.createContext(null);
+function SurfaceLiveRegion({ children }) {
+  const [message, setMessage] = React.useState("");
+  const announce = React.useCallback((m) => setMessage(m), []);
+  const { styles } = useStyles(chromeSheet);
+  return /* @__PURE__ */ jsxs(AnnounceContext.Provider, { value: announce, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "status",
+        accessibilityLiveRegion: "polite",
+        style: styles.srOnly,
+        ...{ "aria-live": "polite" },
+        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: message })
+      }
+    )
+  ] });
+}
+function useSurfaceAnnounce() {
+  return React.useContext(AnnounceContext);
+}
+function GlassIconButton({
+  icon,
+  label,
+  on,
+  size = "md",
+  radius = "full",
+  onPress
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(chromeSheet, { size, radius, on: on === true });
+  const glyph = on ? theme.media.onInk : camInk(theme);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: on === void 0 ? void 0 : { selected: on },
+      onPress,
+      hitSlop: Math.max(0, (theme.hit.lg - (size === "lg" ? theme.ctl.lg : theme.ctl.md)) / 2),
+      style: styles.glassButton,
+      ...on === void 0 ? {} : pressedProps(on),
+      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: size === "lg" ? theme.icon.lg : theme.icon.md, color: glyph })
+    }
+  );
+}
+function chipColours(theme, tone) {
+  switch (tone) {
+    case "good":
+      return { fill: theme.color.good, ink: theme.color.goodInk };
+    case "warn":
+      return { fill: theme.color.warn, ink: theme.color.warnInk };
+    case "danger":
+      return { fill: theme.color.danger, ink: theme.color.dangerInk };
+    case "info":
+      return { fill: theme.color.info, ink: theme.color.infoInk };
+    default:
+      return { ink: camInk(theme) };
+  }
+}
+function GuidanceChip({
+  text,
+  tone = "neutral",
+  icon
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(chromeSheet, { tone });
+  const { ink } = chipColours(theme, tone);
+  return (
+    // The tone is on the testID as well as in the fill, so a test can read the
+    // *pill* rather than the live region that repeats its words.
+    /* @__PURE__ */ jsxs(View, { testID: `loam-chip-${tone}`, style: styles.chip, children: [
+      icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: ink }) : null,
+      /* @__PURE__ */ jsx(Text, { style: [styles.chipText, { color: ink }], children: text })
+    ] })
+  );
+}
+function GateHint({
+  profile: profileProp,
+  gate = { pass: true, failing: [] },
+  countdown = null,
+  live = true,
+  throttleMs = GATE_ANNOUNCE_MS
+}) {
+  const resolved = profile(profileProp);
+  const display = gateHintDisplay(resolved, gate, countdown);
+  const surface = useSurfaceAnnounce();
+  const [own, setOwn] = React.useState("");
+  const { styles } = useStyles(chromeSheet);
+  const sink = React.useRef(setOwn);
+  sink.current = surface ?? setOwn;
+  const last = React.useRef({ text: "", at: 0 });
+  React.useEffect(() => {
+    if (!live) return;
+    const text = display.text;
+    if (text === last.current.text) return;
+    const wait = last.current.at === 0 ? 0 : last.current.at + throttleMs - Date.now();
+    if (wait <= 0) {
+      last.current = { text, at: Date.now() };
+      sink.current(text);
+      return;
+    }
+    const timer = setTimeout(() => {
+      last.current = { text, at: Date.now() };
+      sink.current(text);
+    }, wait);
+    return () => clearTimeout(timer);
+  }, [display.text, live, throttleMs]);
+  return /* @__PURE__ */ jsxs(View, { style: styles.centreRow, children: [
+    /* @__PURE__ */ jsx(GuidanceChip, { text: display.text, tone: display.tone, icon: display.icon }),
+    surface ? null : /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "status",
+        accessibilityLiveRegion: "polite",
+        style: styles.srOnly,
+        ...{ "aria-live": "polite" },
+        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: own })
+      }
+    )
+  ] });
+}
+function ViewfinderTopBar({
+  title,
+  subtitle,
+  align = "start",
+  closeLabel = "Close camera",
+  onClose,
+  children
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(chromeSheet, { align });
+  const ink = camInk(theme);
+  return /* @__PURE__ */ jsxs(View, { style: styles.topBar, children: [
+    onClose ? /* @__PURE__ */ jsx(GlassIconButton, { icon: "x", label: closeLabel, onPress: onClose }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.titlePlate, children: [
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.title, { color: ink }], children: title }),
+      subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.subtitle, { color: ink }], children: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.topBarEnd, children })
+  ] });
+}
+var chromeSheet = createStyleSheet((theme) => ({
+  // A 1×1 clipped box rather than `display:'none'`: a hidden region is not
+  // announced, and RN has no `sr-only` utility.
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  },
+  centreRow: {
+    flexDirection: "row",
+    justifyContent: "center"
+  },
+  glassButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flexGrow: 0,
+    flexShrink: 0,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5,
+    variants: {
+      size: {
+        // 36 and 44 drawn, 44 hit at both (see `hitSlop` on the Pressable).
+        md: { width: theme.ctl.md, height: theme.ctl.md },
+        lg: { width: theme.ctl.lg, height: theme.ctl.lg }
+      },
+      radius: {
+        full: { borderRadius: theme.radius.full },
+        sm: { borderRadius: theme.radius.sm }
+      },
+      // "On" inverts the plate to an opaque fill, so the state is not a colour.
+      on: {
+        true: { backgroundColor: theme.media.ink, borderColor: theme.media.ink },
+        false: { backgroundColor: theme.black.a12 }
+      }
+    }
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    paddingHorizontal: theme.space[12],
+    paddingVertical: theme.space[6],
+    borderRadius: theme.radius.full,
+    maxWidth: theme.panel.lg,
+    variants: {
+      tone: {
+        neutral: {
+          backgroundColor: theme.black.a12,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.white.a5
+        },
+        good: { backgroundColor: theme.color.good },
+        warn: { backgroundColor: theme.color.warn },
+        danger: { backgroundColor: theme.color.danger },
+        info: { backgroundColor: theme.color.info }
+      }
+    }
+  },
+  chipText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    flexShrink: 1
+  },
+  topBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    padding: theme.space[8]
+  },
+  titlePlate: {
+    flexShrink: 1,
+    minWidth: theme.space[0],
+    flexDirection: "column",
+    paddingHorizontal: theme.space[10],
+    paddingVertical: theme.space[4],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5,
+    variants: {
+      align: {
+        start: { alignItems: "flex-start" },
+        center: { alignItems: "center", marginHorizontal: "auto" }
+      }
+    }
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold
+  },
+  subtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[11]
+  },
+  topBarEnd: {
+    marginStart: "auto",
+    flexShrink: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8]
+  }
+}));
+
+export { GATE_ANNOUNCE_MS, GateHint, GlassIconButton, GuidanceChip, SurfaceLiveRegion, ViewfinderTopBar, camGlass, camInk, camMeta, decorativeProps, pressedProps, untabbableProps, useSurfaceAnnounce };