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

package/dist/chunk-6N33LFQA.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+// src/lib/motion.ts
+function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    let cancelled = false;
+    let sub;
+    try {
+      const query = AccessibilityInfo.isReduceMotionEnabled?.();
+      query?.then((value) => {
+        if (!cancelled) setReduced(value);
+      }).catch(() => {
+      });
+      sub = AccessibilityInfo.addEventListener?.("reduceMotionChanged", (value) => {
+        setReduced(value);
+      });
+    } catch {
+    }
+    return () => {
+      cancelled = true;
+      sub?.remove?.();
+    };
+  }, []);
+  return reduced;
+}
+function useResolvedMotion(motion = "full") {
+  const osReduced = useReducedMotion();
+  if (motion === "none") return "none";
+  if (motion === "reduced") return "reduced";
+  return osReduced ? "reduced" : "full";
+}
+
+export { useReducedMotion, useResolvedMotion };

package/dist/chunk-6X6PQ443.js

@@ -0,0 +1,432 @@
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, PanResponder, Pressable, View, Text, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SPEC = {
+  /** Attribution inset from the trailing edge. */
+  attributionEnd: 8,
+  /**
+   * Attribution inset from the bottom. v2 lifted this from 4px to clear the
+   * bottom place card, which the old value sat underneath.
+   */
+  attributionBottom: 88,
+  /** Attribution size. */
+  attributionSize: 8.5,
+  /** Gap between the card's thumbnail, copy and action. */
+  cardGap: 9,
+  /** Thumbnail edge. */
+  thumb: 36,
+  /** Place-name size. */
+  nameSize: 14,
+  /** Place-meta size. */
+  metaSize: 11.5,
+  /** Base-layer grid pitch — vertical then horizontal, from `buildMapScreen`. */
+  gridX: 48,
+  gridY: 64,
+  /** Grid-line thickness. */
+  gridW: 4
+};
+var ZOOM = {
+  min: 1,
+  max: 3,
+  /** Multiplier per press of the zoom-in / zoom-out control. */
+  step: 1.5,
+  /**
+   * Wheel delta that doubles (or halves) the zoom, via `exp(-delta / decay)`.
+   * A trackpad pinch reaches the browser as a wheel event too.
+   */
+  decay: 320
+};
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function touchDistance(e) {
+  const touches = e.nativeEvent.touches;
+  const a = touches[0];
+  const b = touches[1];
+  if (!a || !b) return 0;
+  return Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
+}
+function BaseLayer({ width, height }) {
+  const { styles } = useStyles(sheet);
+  const columns = width > 0 ? Math.floor((width - SPEC.gridW) / SPEC.gridX) : 6;
+  const rows = height > 0 ? Math.floor((height - SPEC.gridW) / SPEC.gridY) : 6;
+  return /* @__PURE__ */ jsxs(View, { style: styles.base, children: [
+    Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(View, { style: [styles.gridV, { left: (i + 1) * SPEC.gridX }] }, `v${i}`)),
+    Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(View, { style: [styles.gridH, { top: (i + 1) * SPEC.gridY }] }, `h${i}`)),
+    /* @__PURE__ */ jsx(View, { style: styles.river }),
+    /* @__PURE__ */ jsx(View, { style: styles.park })
+  ] });
+}
+function MapView({
+  pins = [],
+  activePinId,
+  onSelectPin,
+  place,
+  attribution = "\xA9 map data",
+  onZoomIn,
+  onZoomOut,
+  onRecenter,
+  pannable = true,
+  zoomable = true,
+  minZoom = ZOOM.min,
+  maxZoom = ZOOM.max,
+  motion = "full",
+  children
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const animateZoom = useResolvedMotion(motion) === "full";
+  const animateZoomRef = React.useRef(animateZoom);
+  animateZoomRef.current = animateZoom;
+  const [viewport, setViewport] = React.useState({ width: 0, height: 0 });
+  const viewportRef = React.useRef(viewport);
+  const onRootLayout = (e) => {
+    const { width, height } = e.nativeEvent.layout;
+    viewportRef.current = { width, height };
+    setViewport(
+      (prev) => prev.width === width && prev.height === height ? prev : { width, height }
+    );
+  };
+  const pan = React.useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const offset = React.useRef({ x: 0, y: 0 });
+  const gestureStart = React.useRef({ x: 0, y: 0 });
+  const zoom = React.useRef(1);
+  const pinch = React.useRef(null);
+  const bounds = () => {
+    const { width, height } = viewportRef.current;
+    return {
+      x: Math.max(0, (width * zoom.current - width) / 2),
+      y: Math.max(0, (height * zoom.current - height) / 2)
+    };
+  };
+  const panTo = (x, y) => {
+    const max = bounds();
+    const next = { x: clamp(x, -max.x, max.x), y: clamp(y, -max.y, max.y) };
+    offset.current = next;
+    pan.setValue(next);
+  };
+  const zoomTo = (next, animate) => {
+    zoom.current = clamp(next, minZoom, maxZoom);
+    if (animate && animateZoomRef.current) {
+      Animated.timing(scale, {
+        toValue: zoom.current,
+        duration: theme.motion.expand.duration,
+        easing: Easing.bezier(...theme.motion.expand.easing),
+        // The pan on the same layer is gesture-driven, so this transform stays
+        // on the JS driver too — the two cannot mix drivers on one node.
+        useNativeDriver: false
+      }).start();
+    } else {
+      scale.setValue(zoom.current);
+    }
+    panTo(offset.current.x, offset.current.y);
+  };
+  const responder = React.useMemo(
+    () => PanResponder.create({
+      // Never claim the touch on start: a tap belongs to the pin (or the card)
+      // underneath. Only a real drag takes over.
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (e, g) => pannable && (Math.abs(g.dx) > 2 || Math.abs(g.dy) > 2) || zoomable && e.nativeEvent.touches.length > 1,
+      onPanResponderGrant: () => {
+        gestureStart.current = { ...offset.current };
+        pinch.current = null;
+      },
+      onPanResponderMove: (e, g) => {
+        const distance = zoomable ? touchDistance(e) : 0;
+        if (distance > 0) {
+          pinch.current ??= { distance, zoom: zoom.current };
+          zoomTo(pinch.current.zoom * distance / pinch.current.distance, false);
+          return;
+        }
+        if (!pannable) return;
+        panTo(gestureStart.current.x + g.dx, gestureStart.current.y + g.dy);
+      },
+      onPanResponderRelease: () => {
+        pinch.current = null;
+      },
+      onPanResponderTerminate: () => {
+        pinch.current = null;
+      }
+    }),
+    // `panTo`/`zoomTo` read refs, so the responder never needs rebuilding for them.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pannable, zoomable, minZoom, maxZoom]
+  );
+  const rootRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!zoomable) return;
+    const node = rootRef.current;
+    if (!node?.addEventListener || !node.removeEventListener) return;
+    const onWheel = (e) => {
+      const wheel = e;
+      wheel.preventDefault?.();
+      zoomTo(zoom.current * Math.exp(-wheel.deltaY / ZOOM.decay), false);
+    };
+    node.addEventListener("wheel", onWheel, { passive: false });
+    return () => node.removeEventListener?.("wheel", onWheel);
+  }, [zoomable, minZoom, maxZoom]);
+  const recenter = () => {
+    zoomTo(minZoom, true);
+    panTo(0, 0);
+    onRecenter?.();
+  };
+  const controls = [
+    {
+      icon: "plus",
+      label: "Zoom in",
+      handler: onZoomIn,
+      onPress: () => {
+        zoomTo(zoom.current * ZOOM.step, true);
+        onZoomIn?.();
+      }
+    },
+    {
+      icon: "minus",
+      label: "Zoom out",
+      handler: onZoomOut,
+      onPress: () => {
+        zoomTo(zoom.current / ZOOM.step, true);
+        onZoomOut?.();
+      }
+    },
+    {
+      icon: "navigation",
+      label: "Recenter",
+      handler: onRecenter,
+      onPress: recenter
+    }
+  ].filter((c) => c.handler);
+  const pinNodes = pins.map((pin) => {
+    const active = pin.id === activePinId;
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: pin.label,
+        "aria-pressed": active,
+        onPress: onSelectPin ? () => onSelectPin(pin.id) : void 0,
+        style: [
+          styles.pin,
+          active ? styles.pinActive : styles.pinIdle,
+          { left: `${pin.x}%`, top: `${pin.y}%` }
+        ],
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: pin.icon ?? "map-pin",
+            size: active ? 17 : 13,
+            color: active ? theme.color.accentInk : theme.color.text
+          }
+        )
+      },
+      pin.id
+    );
+  });
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: styles.root, onLayout: onRootLayout, children: [
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        testID: "map-pan-layer",
+        style: [
+          styles.world,
+          { transform: [{ translateX: pan.x }, { translateY: pan.y }, { scale }] }
+        ],
+        ...responder.panHandlers,
+        children: [
+          children ?? /* @__PURE__ */ jsx(BaseLayer, { width: viewport.width, height: viewport.height }),
+          pinNodes
+        ]
+      }
+    ),
+    controls.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.controls, children: controls.map((c) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: c.label,
+        onPress: c.onPress,
+        style: styles.control,
+        children: /* @__PURE__ */ jsx(Icon, { name: c.icon, size: 17, color: theme.color.text })
+      },
+      c.label
+    )) }) : null,
+    /* @__PURE__ */ jsx(Text, { style: styles.attribution, children: attribution }),
+    place ? /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.cardThumb }),
+      /* @__PURE__ */ jsxs(View, { style: styles.cardText, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.cardName, numberOfLines: 1, ellipsizeMode: "tail", children: place.name }),
+        place.meta ? /* @__PURE__ */ jsx(Text, { style: styles.cardMeta, numberOfLines: 1, ellipsizeMode: "tail", children: place.meta }) : null
+      ] }),
+      place.actionLabel ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: `${place.actionLabel}, ${place.name}`,
+          onPress: place.onAction,
+          hitSlop: Math.max(0, (theme.hit.md - theme.ctl.md) / 2),
+          style: styles.cardAction,
+          children: /* @__PURE__ */ jsx(Text, { style: styles.cardActionLabel, children: place.actionLabel })
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { flex: 1, backgroundColor: theme.color.surface2, overflow: "hidden" },
+  // The panning layer is the viewport. Travel comes from the zoom scaling it up,
+  // so nothing is laid out beyond the map's own edges at rest.
+  world: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 },
+  base: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 },
+  gridV: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: SPEC.gridW,
+    backgroundColor: theme.color.surface3
+  },
+  gridH: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: SPEC.gridW,
+    backgroundColor: theme.color.surface3
+  },
+  // Edge to edge: the -12° rotation pulls the ends ~1dp inside the map, which is
+  // cheaper than the 30% of extra width it would take to bleed past them.
+  //
+  // loam-contrast-ignore — the river and the park are base-layer texture, not
+  // information: they exist so the muted palette reads as a map. Every pin,
+  // route and label that *does* mean something is drawn over them with its own
+  // edge, and outlining a decorative river under high contrast would read as a
+  // defect rather than as help.
+  river: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: "30%",
+    height: theme.space[26],
+    backgroundColor: theme.color.infoSoft,
+    transform: [{ rotate: "-12deg" }]
+  },
+  // loam-contrast-ignore — decorative, as the river above.
+  park: {
+    position: "absolute",
+    left: "8%",
+    top: "8%",
+    width: "44%",
+    height: "22%",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.goodSoft
+  },
+  pin: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.heavy,
+    ...theme.shadow.md
+  },
+  // The raw accent stays here, unlike the accent *edges* elsewhere in the kit
+  // (see `focusRingColor()`): border and fill are the same colour, so this pin
+  // has no independent edge to measure — the boundary that matters is the filled
+  // disc against the map, and the glyph inside it rides `accentInk`. Lifting the
+  // border would either do nothing visible or split it from its own fill.
+  pinActive: {
+    width: theme.space[34],
+    height: theme.space[34],
+    marginLeft: -theme.space[17],
+    marginTop: -theme.space[34],
+    backgroundColor: theme.color.accent,
+    borderColor: theme.color.accent
+  },
+  pinIdle: {
+    width: theme.space[26],
+    height: theme.space[26],
+    marginLeft: -theme.space[13],
+    marginTop: -theme.space[26],
+    backgroundColor: theme.color.surface,
+    borderColor: theme.color.borderStrong
+  },
+  controls: {
+    position: "absolute",
+    right: theme.space.s3,
+    top: theme.space[14],
+    gap: theme.space.s2
+  },
+  control: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    alignItems: "center",
+    justifyContent: "center",
+    ...theme.shadow.sm
+  },
+  // Lifted clear of the bottom place card — the licence text has to stay legible.
+  attribution: {
+    position: "absolute",
+    right: SPEC.attributionEnd,
+    bottom: SPEC.attributionBottom,
+    fontFamily: theme.font.mono,
+    fontSize: SPEC.attributionSize,
+    color: theme.color.text3
+  },
+  card: {
+    position: "absolute",
+    left: theme.space[10],
+    right: theme.space[10],
+    bottom: theme.space[10],
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPEC.cardGap,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.lg
+  },
+  cardThumb: {
+    width: SPEC.thumb,
+    height: SPEC.thumb,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface3
+  },
+  // `minWidth: 0` lets a long place name truncate instead of shoving the action out.
+  cardText: { flex: 1, minWidth: 0, gap: theme.space[2] },
+  cardName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: SPEC.nameSize,
+    lineHeight: SPEC.nameSize * theme.lineHeight.snug,
+    color: theme.color.text
+  },
+  cardMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: SPEC.metaSize,
+    color: theme.color.text3
+  },
+  cardAction: {
+    minHeight: theme.ctl.md,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space[8],
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cardActionLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.accentInk
+  }
+}));
+
+export { MapView };

package/dist/chunk-7CFF4HXS.js

@@ -0,0 +1,126 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SecurePayLabel({
+  label,
+  showLock = true,
+  size = "sm",
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.secureRow, style], children: [
+    showLock ? /* @__PURE__ */ jsx(
+      View,
+      {
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: /* @__PURE__ */ jsx(Icon, { name: "lock", size: theme.icon.xs, color: theme.color.text2 })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Text, { style: size === "sm" ? styles.secureLabelSm : styles.secureLabelMd, children: label })
+  ] });
+}
+var TRUST_INLINE = [{ icon: "lock", label: "Encrypted" }];
+var TRUST_ROW = [
+  { icon: "lock", label: "Card details never touch our servers" },
+  { icon: "shield", label: "PCI DSS SAQ-A" },
+  { icon: "refresh", label: "30-day refund" }
+];
+function TrustRow({ level, items, style }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const resolved = items ?? (level === "inline" ? TRUST_INLINE : TRUST_ROW);
+  if (level === "inline") {
+    const first = resolved[0];
+    return /* @__PURE__ */ jsx(SecurePayLabel, { label: first?.label ?? "", showLock: first?.icon !== void 0, style });
+  }
+  return (
+    // A real list, so three facts are announced as three.
+    /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: [styles.trustList, style], children: resolved.map((item) => /* @__PURE__ */ jsxs(View, { role: "listitem", style: styles.trustItem, children: [
+      item.icon ? /* @__PURE__ */ jsx(
+        View,
+        {
+          "aria-hidden": true,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: /* @__PURE__ */ jsx(Icon, { name: item.icon, size: theme.icon.xs, color: theme.color.text3 })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(Text, { style: styles.trustLabel, children: item.label })
+    ] }, item.label)) })
+  );
+}
+function MandateNotice({
+  merchantLegalName,
+  weeks = 8,
+  title = "Direct debit mandate",
+  style
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.mandate, style], children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.overline, children: title }),
+    /* @__PURE__ */ jsx(Text, { style: styles.mandateBody, children: `By giving your IBAN and confirming this payment you authorise ${merchantLegalName} to send instructions to your bank to debit your account, and your bank to debit your account in accordance with those instructions.` }),
+    /* @__PURE__ */ jsx(Text, { style: styles.mandateBody, children: `You are entitled to a refund from your bank under the terms of your agreement with it. A refund must be claimed within ${weeks} weeks of the date your account was debited.` })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  secureRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  secureLabelSm: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing,
+    color: theme.color.text2
+  },
+  secureLabelMd: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.text2
+  },
+  trustList: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: theme.space.s4,
+    rowGap: theme.space.s1
+  },
+  trustItem: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  trustLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  mandate: {
+    gap: theme.space.s1,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  overline: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  mandateBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  }
+}));
+
+export { MandateNotice, SecurePayLabel, TRUST_INLINE, TRUST_ROW, TrustRow };