@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-OCHPK5YV.js

@@ -0,0 +1,609 @@
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useReducedMotion } from './chunk-J64KGCGX.js';
+import * as React3 from 'react';
+import { resolveAnalyzerLabels, localizeProfile, profile, gateHintDisplay } from '@btndprojects/loam-analyzer';
+import { ActivityIndicator, View, Text, Animated, Easing, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_ANALYZER_UI_LABELS = {
+  uploadPhoto: "Upload a photo",
+  expertControls: "Expert controls",
+  placeholderFeed: "live feed \xB7 placeholder",
+  webcamFront: "webcam \xB7 front",
+  rearCamera: "rear camera",
+  feedLive: (facing, ratio, zoom) => `${facing} \xB7 ${ratio} \xB7 ${zoom}x \xB7 placeholder feed`,
+  feedCaptured: (ratio) => `frozen frame \xB7 ${ratio} \xB7 placeholder`,
+  feedAnalysing: "frozen frame \xB7 analysing",
+  feedFrozen: "frozen frame",
+  feedDone: "captured frame",
+  startingCamera: "Starting camera",
+  analysing: "Analysing",
+  resultReady: "Result ready",
+  analysisFailed: "Analysis failed",
+  plate: {
+    plant: "plant subject",
+    document: "document page",
+    barcode: "barcode",
+    car: "vehicle",
+    id: "identity document",
+    generic: "scene"
+  }
+};
+function useAnalyzerLabels(own) {
+  const base = useLabels("analyzer", DEFAULT_ANALYZER_UI_LABELS, own);
+  return React3.useMemo(
+    () => ({ ...base, plate: { ...DEFAULT_ANALYZER_UI_LABELS.plate, ...base.plate } }),
+    [base]
+  );
+}
+var NO_COPY = {};
+function useAnalyzerCopy(own) {
+  const provided = useLabels("analyzerCopy", NO_COPY);
+  const scoped = React3.useContext(AnalyzerCopyScope);
+  return React3.useMemo(() => resolveAnalyzerLabels(provided, scoped, own), [provided, scoped, own]);
+}
+var AnalyzerCopyScope = React3.createContext(void 0);
+var DEFAULT_VIEWFINDER_LABELS = {
+  closeCamera: "Close camera",
+  dismiss: "Dismiss",
+  removeNamed: (name) => `Remove ${name}`,
+  autoCapturing: "Auto-capturing",
+  capture: "Capture",
+  torch: "Torch",
+  grid: "Grid",
+  flipCamera: "Flip camera",
+  zoom: "Zoom",
+  zoomStop: (stop) => `${stop}x`,
+  capturedPages: "Captured pages",
+  captureSequence: "Capture sequence",
+  stepCaptured: (name) => `${name} \u2014 captured, tap to redo`,
+  expertControls: "Expert controls",
+  expert: "Expert",
+  closeExpert: "Close expert controls",
+  level: "Level",
+  torchLevels: { off: "off", low: "low", high: "high" },
+  formats: { pipeline: "Pipeline-native", full: "Full sensor" },
+  uploadPhoto: "Upload a photo",
+  cameraDevice: "Camera device",
+  identifying: "Identifying",
+  holdSteady: "Hold steady",
+  openResult: (name, confidence) => `${name} ${confidence}, open result`,
+  identifyCandidate: (name) => `Identify ${name}`,
+  loading: "Loading",
+  inView: "In view",
+  inViewEmpty: "Nothing in view"
+};
+function useViewfinderLabels(own) {
+  const merged = useLabels("viewfinder", DEFAULT_VIEWFINDER_LABELS, own);
+  const provided = useLabels("viewfinder", NONE);
+  return React3.useMemo(
+    () => ({
+      ...merged,
+      torchLevels: {
+        ...DEFAULT_VIEWFINDER_LABELS.torchLevels,
+        ...provided.torchLevels,
+        ...own?.torchLevels
+      },
+      formats: { ...DEFAULT_VIEWFINDER_LABELS.formats, ...provided.formats, ...own?.formats }
+    }),
+    [merged, provided, own]
+  );
+}
+var NONE = {};
+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,
+    // `a13`, not `a10`: at 38% the metadata measured 2:1 on the scrim over a
+    // bright feed. 70% still reads as secondary beside the full-white ink.
+    color: theme.white.a13,
+    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 };
+}
+function camToneColour(theme, tone) {
+  if (!tone || tone === "neutral") return void 0;
+  return theme.color[tone];
+}
+function camToneEdge(theme, tone) {
+  const c = camToneColour(theme, tone);
+  return c ? { borderColor: c } : null;
+}
+function BusySpinner({ color }) {
+  const t = useViewfinderLabels();
+  return /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color, accessibilityLabel: t.loading });
+}
+function busyProps(loading) {
+  return loading ? { "aria-busy": true } : {};
+}
+function busyStyle(theme, loading) {
+  return loading ? { opacity: theme.state.disabledOpacity } : null;
+}
+function disabledProps(disabled) {
+  return disabled ? { "aria-disabled": true } : {};
+}
+function disabledStyle(theme, disabled) {
+  return disabled ? { opacity: theme.state.disabledOpacity } : null;
+}
+var AnnounceContext = React3.createContext(null);
+function SurfaceLiveRegion({ children }) {
+  const [message, setMessage] = React3.useState("");
+  const announce = React3.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 React3.useContext(AnnounceContext);
+}
+function useEnterFade(motion) {
+  const theme = useLoamTheme("viewfinder");
+  const osReduced = useReducedMotion();
+  const still = motion === void 0 || motion === "none" || osReduced || theme.reduceMotion === true;
+  const enter = React3.useRef(new Animated.Value(still ? 1 : 0)).current;
+  const duration = motion === "reduced" ? theme.motion.enter.duration / 2 : theme.motion.enter.duration;
+  React3.useEffect(() => {
+    if (still) {
+      enter.setValue(1);
+      return;
+    }
+    const anim = Animated.timing(enter, {
+      toValue: 1,
+      duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [still, enter, duration, theme.motion.enter.easing]);
+  return enter;
+}
+function PillRemoveButton({
+  label,
+  onPress,
+  color,
+  disabled = false
+}) {
+  const theme = useLoamTheme("viewfinder");
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      hitSlop: theme.space[8],
+      style: { marginStart: theme.space[4] },
+      disabled,
+      onPress: disabled ? void 0 : onPress,
+      children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.xs, color })
+    }
+  );
+}
+function GlassIconButton({
+  icon,
+  label,
+  on,
+  size = "md",
+  radius = "full",
+  disabled = false,
+  variant = "glass",
+  loading = false,
+  tone = "neutral",
+  motion = "full",
+  trailingIcon,
+  fullWidth = false,
+  onPress
+}) {
+  const theme = useLoamTheme("viewfinder");
+  const { styles } = useStyles(chromeSheet, { size, radius, on: on === true });
+  const solid = variant === "solid";
+  const accent = camToneColour(theme, tone);
+  const glyph = on || solid ? theme.media.onInk : accent ?? camInk(theme);
+  const still = motion !== "full" || theme.reduceMotion;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: {
+        ...on === void 0 ? null : { selected: on },
+        ...disabled ? { disabled: true } : null,
+        ...loading ? { busy: true } : null
+      },
+      disabled,
+      onPress: loading ? void 0 : onPress,
+      hitSlop: Math.max(0, (theme.hit.lg - theme.ctl[size]) / 2),
+      style: ({ pressed }) => [
+        styles.glassButton,
+        trailingIcon || fullWidth ? { width: "auto", minWidth: theme.ctl[size], paddingHorizontal: theme.space[8], gap: theme.space[4] } : null,
+        fullWidth ? { alignSelf: "stretch" } : null,
+        solid && !on ? { backgroundColor: theme.media.ink, borderColor: theme.media.ink } : null,
+        accent && !on && !solid ? { borderColor: accent } : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        pressed && !still && !disabled ? { opacity: theme.state.pressedOpacity } : null
+      ],
+      ...on === void 0 ? {} : pressedProps(on),
+      ...busyProps(loading),
+      children: [
+        loading ? /* @__PURE__ */ jsx(BusySpinner, { color: glyph }) : /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon[size === "sm" ? "sm" : size === "lg" ? "lg" : "md"], color: glyph }),
+        trailingIcon && !loading ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: theme.icon[size === "sm" ? "sm" : size === "lg" ? "lg" : "md"], color: glyph }) : null
+      ]
+    }
+  );
+}
+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",
+  size = "md",
+  variant = "solid",
+  loading = false,
+  disabled = false,
+  icon,
+  selected = false,
+  removable = false,
+  onRemove,
+  removeLabel,
+  motion,
+  labels
+}) {
+  const theme = useLoamTheme("viewfinder");
+  const t = useViewfinderLabels(labels);
+  const enter = useEnterFade(motion);
+  const outline = variant === "outline" && tone !== "neutral";
+  const { styles } = useStyles(chromeSheet, { tone: outline ? "neutral" : tone });
+  const { ink: toneInk } = chipColours(theme, tone);
+  const ink = outline ? camInk(theme) : toneInk;
+  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(
+      Animated.View,
+      {
+        testID: `loam-chip-${tone}`,
+        "aria-current": selected ? true : void 0,
+        style: [
+          styles.chip,
+          size === "sm" ? {
+            paddingHorizontal: theme.space[8],
+            paddingVertical: theme.space[4],
+            minHeight: theme.ctl.xs
+          } : null,
+          outline ? { borderColor: theme.color[tone] } : null,
+          selected ? { backgroundColor: theme.white.a5, borderColor: theme.media.ink } : null,
+          motion === void 0 ? null : { opacity: enter },
+          disabledStyle(theme, disabled)
+        ],
+        ...busyProps(loading),
+        ...disabledProps(disabled),
+        children: [
+          loading ? /* @__PURE__ */ jsx(BusySpinner, { color: ink }) : icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: ink }) : null,
+          /* @__PURE__ */ jsx(Text, { style: [styles.chipText, { color: ink }], children: text }),
+          removable ? /* @__PURE__ */ jsx(PillRemoveButton, { label: removeLabel ?? t.removeNamed(text), onPress: onRemove, color: ink, disabled }) : null
+        ]
+      }
+    )
+  );
+}
+function HintTrail({
+  action,
+  dismissible,
+  onDismiss,
+  label
+}) {
+  if (!action && !dismissible) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    action,
+    dismissible ? /* @__PURE__ */ jsx(GlassIconButton, { icon: "x", size: "sm", label, onPress: onDismiss }) : null
+  ] });
+}
+function GateHint({
+  profile: profileProp,
+  gate = { pass: true, failing: [] },
+  countdown = null,
+  live = true,
+  throttleMs = GATE_ANNOUNCE_MS,
+  copy,
+  variant = "solid",
+  size = "md",
+  loading = false,
+  icon,
+  action,
+  dismissible = false,
+  onDismiss,
+  motion = "full"
+}) {
+  const words = useAnalyzerCopy(copy);
+  const theme = useLoamTheme("viewfinder");
+  const reduced = useReducedMotion();
+  const t = useViewfinderLabels();
+  const fade = React3.useRef(new Animated.Value(1)).current;
+  const resolved = React3.useMemo(
+    () => localizeProfile(profile(profileProp), words),
+    [profileProp, words]
+  );
+  const display = gateHintDisplay(resolved, gate, countdown, words);
+  const surface = useSurfaceAnnounce();
+  const [own, setOwn] = React3.useState("");
+  const { styles } = useStyles(chromeSheet);
+  const sink = React3.useRef(setOwn);
+  sink.current = surface ?? setOwn;
+  const last = React3.useRef({ text: "", at: 0 });
+  React3.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]);
+  const still = motion !== "full" || reduced || theme.reduceMotion;
+  React3.useEffect(() => {
+    if (still) {
+      fade.setValue(1);
+      return;
+    }
+    fade.setValue(0);
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.swap.duration,
+      easing: Easing.bezier(...theme.motion.swap.easing),
+      useNativeDriver: true
+    }).start();
+  }, [display.text, still, fade, theme.motion.swap.duration, theme.motion.swap.easing]);
+  return /* @__PURE__ */ jsxs(View, { style: styles.centreRow, children: [
+    /* @__PURE__ */ jsx(Animated.View, { style: { opacity: fade }, children: /* @__PURE__ */ jsx(
+      GuidanceChip,
+      {
+        text: display.text,
+        tone: display.tone,
+        variant,
+        size,
+        loading,
+        icon: icon === false ? void 0 : icon ?? display.icon
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      HintTrail,
+      {
+        action,
+        dismissible: dismissible || onDismiss != null,
+        onDismiss,
+        label: t.dismiss
+      }
+    ),
+    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,
+  labels,
+  onClose,
+  children,
+  tone = "neutral",
+  loading = false,
+  density = "comfortable",
+  size = "md",
+  variant = "glass",
+  orientation = "horizontal"
+}) {
+  const t = useViewfinderLabels(labels);
+  const theme = useLoamTheme("viewfinder");
+  const { styles } = useStyles(chromeSheet, { align });
+  const ink = camInk(theme);
+  const vertical = orientation === "vertical";
+  const compact = density === "compact";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.topBar,
+        vertical ? { flexDirection: "column", alignItems: "flex-start" } : null,
+        compact ? { padding: theme.space[4], gap: theme.space[4] } : null,
+        busyStyle(theme, loading)
+      ],
+      ...busyProps(loading),
+      children: [
+        onClose ? /* @__PURE__ */ jsx(GlassIconButton, { icon: "x", label: closeLabel ?? t.closeCamera, onPress: onClose }) : null,
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles.titlePlate,
+              size === "sm" ? { minHeight: theme.ctl.sm, paddingVertical: theme.space[2] } : null,
+              variant === "plain" ? { backgroundColor: "transparent", borderColor: "transparent" } : [camToneEdge(theme, tone), variant === "outline" ? { backgroundColor: "transparent" } : null]
+            ],
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  numberOfLines: 1,
+                  style: [styles.title, size === "sm" ? { fontSize: theme.fontSize[12] } : null, { color: ink }],
+                  children: title
+                }
+              ),
+              subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.subtitle, { color: ink }], children: subtitle }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: [styles.topBarEnd, vertical ? { flexDirection: "column", marginStart: 0 } : null], 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",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  glassButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flexGrow: 0,
+    flexShrink: 0,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5,
+    variants: {
+      size: {
+        // 30, 36 and 44 drawn, 44 hit at all three (see `hitSlop` on the Pressable).
+        sm: { width: theme.ctl.sm, height: theme.ctl.sm },
+        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],
+    minHeight: theme.ctl.sm,
+    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],
+    minHeight: theme.ctl.md,
+    justifyContent: "center",
+    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 { AnalyzerCopyScope, BusySpinner, GATE_ANNOUNCE_MS, GateHint, GlassIconButton, GuidanceChip, HintTrail, PillRemoveButton, SurfaceLiveRegion, ViewfinderTopBar, busyProps, busyStyle, camGlass, camInk, camMeta, camToneColour, camToneEdge, decorativeProps, disabledProps, disabledStyle, pressedProps, untabbableProps, useAnalyzerCopy, useAnalyzerLabels, useEnterFade, useSurfaceAnnounce, useViewfinderLabels };