@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-5NU33TXK.js

@@ -0,0 +1,529 @@
+import { CopyButton } from './chunk-TYOSA7JG.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Easing, View, Text, Share } from 'react-native';
+import { Svg, Path } from 'react-native-svg';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/qr-code/qr-encode.ts
+var LEVEL_INDEX = { L: 0, M: 1, Q: 2, H: 3 };
+var FORMAT_BITS = { L: 1, M: 0, Q: 3, H: 2 };
+var ECC_PER_BLOCK = [
+  [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+  [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
+  [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+  [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]
+];
+var BLOCKS = [
+  [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
+  [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
+  [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
+  [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81]
+];
+function rawDataModules(ver) {
+  let result = (16 * ver + 128) * ver + 64;
+  if (ver >= 2) {
+    const n = Math.floor(ver / 7) + 2;
+    result -= (25 * n - 10) * n - 55;
+    if (ver >= 7) result -= 36;
+  }
+  return result;
+}
+function dataCodewords(ver, lv) {
+  return Math.floor(rawDataModules(ver) / 8) - ECC_PER_BLOCK[lv][ver] * BLOCKS[lv][ver];
+}
+function gfMul(x, y) {
+  let z = 0;
+  for (let i = 7; i >= 0; i--) {
+    z = z << 1 ^ (z >>> 7) * 285;
+    z ^= (y >>> i & 1) * x;
+  }
+  return z & 255;
+}
+function rsDivisor(degree) {
+  const result = new Array(degree).fill(0);
+  result[degree - 1] = 1;
+  let root = 1;
+  for (let i = 0; i < degree; i++) {
+    for (let j = 0; j < degree; j++) {
+      result[j] = gfMul(result[j], root);
+      if (j + 1 < degree) result[j] ^= result[j + 1];
+    }
+    root = gfMul(root, 2);
+  }
+  return result;
+}
+function rsRemainder(data, divisor) {
+  const result = new Array(divisor.length).fill(0);
+  for (const b of data) {
+    const factor = b ^ result.shift();
+    result.push(0);
+    divisor.forEach((coef, i) => {
+      result[i] ^= gfMul(coef, factor);
+    });
+  }
+  return result;
+}
+function utf8(text) {
+  const out = [];
+  for (const ch of text) {
+    const c = ch.codePointAt(0);
+    if (c < 128) out.push(c);
+    else if (c < 2048) out.push(192 | c >> 6, 128 | c & 63);
+    else if (c < 65536) out.push(224 | c >> 12, 128 | c >> 6 & 63, 128 | c & 63);
+    else {
+      out.push(240 | c >> 18, 128 | c >> 12 & 63, 128 | c >> 6 & 63, 128 | c & 63);
+    }
+  }
+  return out;
+}
+function alignmentPositions(ver, size) {
+  if (ver === 1) return [];
+  const n = Math.floor(ver / 7) + 2;
+  const step = ver === 32 ? 26 : Math.ceil((ver * 4 + 4) / (n * 2 - 2)) * 2;
+  const result = [6];
+  for (let pos = size - 7; result.length < n; pos -= step) result.splice(1, 0, pos);
+  return result;
+}
+function maskBit(mask, x, y) {
+  switch (mask) {
+    case 0:
+      return (x + y) % 2 === 0;
+    case 1:
+      return y % 2 === 0;
+    case 2:
+      return x % 3 === 0;
+    case 3:
+      return (x + y) % 3 === 0;
+    case 4:
+      return (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0;
+    case 5:
+      return x * y % 2 + x * y % 3 === 0;
+    case 6:
+      return (x * y % 2 + x * y % 3) % 2 === 0;
+    default:
+      return ((x + y) % 2 + x * y % 3) % 2 === 0;
+  }
+}
+function penalty(m) {
+  const size = m.length;
+  let score = 0;
+  const finder = [true, false, true, true, true, false, true];
+  const line = (get) => {
+    let run = 1;
+    for (let i = 1; i <= size; i++) {
+      if (i < size && get(i) === get(i - 1)) run++;
+      else {
+        if (run >= 5) score += 3 + run - 5;
+        run = 1;
+      }
+    }
+    const at = (i) => i < 0 || i >= size ? false : get(i);
+    for (let i = -4; i < size; i++) {
+      if (!finder.every((v, k) => at(i + k) === v)) continue;
+      const before = [1, 2, 3, 4].every((k) => !at(i - k));
+      const after = [7, 8, 9, 10].every((k) => !at(i + k));
+      if (before) score += 40;
+      if (after) score += 40;
+    }
+  };
+  for (let y = 0; y < size; y++) line((x) => m[y][x]);
+  for (let x = 0; x < size; x++) line((y) => m[y][x]);
+  let dark = 0;
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const c = m[y][x];
+      if (c) dark++;
+      if (x + 1 < size && y + 1 < size && c === m[y][x + 1] && c === m[y + 1][x] && c === m[y + 1][x + 1]) {
+        score += 3;
+      }
+    }
+  }
+  const total = size * size;
+  score += (Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1) * 10;
+  return score;
+}
+function encodeQr(text, level = "M", mask) {
+  const lv = LEVEL_INDEX[level];
+  const bytes = utf8(text);
+  let ver = 1;
+  for (; ver <= 40; ver++) {
+    const countBits = ver <= 9 ? 8 : 16;
+    if (4 + countBits + bytes.length * 8 <= dataCodewords(ver, lv) * 8) break;
+  }
+  if (ver > 40) return null;
+  const bits = [];
+  const put = (val, len) => {
+    for (let i2 = len - 1; i2 >= 0; i2--) bits.push(val >>> i2 & 1);
+  };
+  put(4, 4);
+  put(bytes.length, ver <= 9 ? 8 : 16);
+  for (const b of bytes) put(b, 8);
+  const capacity = dataCodewords(ver, lv) * 8;
+  put(0, Math.min(4, capacity - bits.length));
+  put(0, (8 - bits.length % 8) % 8);
+  for (let pad = 236; bits.length < capacity; pad ^= 236 ^ 17) put(pad, 8);
+  const data = [];
+  for (let i2 = 0; i2 < bits.length; i2 += 8) {
+    data.push(bits.slice(i2, i2 + 8).reduce((acc, b) => acc << 1 | b, 0));
+  }
+  const numBlocks = BLOCKS[lv][ver];
+  const eccLen = ECC_PER_BLOCK[lv][ver];
+  const rawCodewords = Math.floor(rawDataModules(ver) / 8);
+  const numShort = numBlocks - rawCodewords % numBlocks;
+  const shortLen = Math.floor(rawCodewords / numBlocks);
+  const divisor = rsDivisor(eccLen);
+  const blocks = [];
+  for (let i2 = 0, k = 0; i2 < numBlocks; i2++) {
+    const len = shortLen - eccLen + (i2 < numShort ? 0 : 1);
+    const dat = data.slice(k, k + len);
+    k += len;
+    const ecc = rsRemainder(dat, divisor);
+    if (i2 < numShort) dat.push(0);
+    blocks.push(dat.concat(ecc));
+  }
+  const codewords = [];
+  for (let i2 = 0; i2 < blocks[0].length; i2++) {
+    blocks.forEach((block, j) => {
+      if (i2 !== shortLen - eccLen || j >= numShort) codewords.push(block[i2]);
+    });
+  }
+  const size = ver * 4 + 17;
+  const modules = Array.from({ length: size }, () => new Array(size).fill(false));
+  const isFn = Array.from({ length: size }, () => new Array(size).fill(false));
+  const setFn = (x, y, dark) => {
+    modules[y][x] = dark;
+    isFn[y][x] = true;
+  };
+  for (let i2 = 0; i2 < size; i2++) {
+    setFn(6, i2, i2 % 2 === 0);
+    setFn(i2, 6, i2 % 2 === 0);
+  }
+  for (const [cx, cy] of [
+    [3, 3],
+    [size - 4, 3],
+    [3, size - 4]
+  ]) {
+    for (let dy = -4; dy <= 4; dy++) {
+      for (let dx = -4; dx <= 4; dx++) {
+        const d = Math.max(Math.abs(dx), Math.abs(dy));
+        const x = cx + dx;
+        const y = cy + dy;
+        if (x >= 0 && x < size && y >= 0 && y < size) setFn(x, y, d !== 2 && d !== 4);
+      }
+    }
+  }
+  const align = alignmentPositions(ver, size);
+  const n = align.length;
+  for (let i2 = 0; i2 < n; i2++) {
+    for (let j = 0; j < n; j++) {
+      if (i2 === 0 && j === 0 || i2 === 0 && j === n - 1 || i2 === n - 1 && j === 0) continue;
+      for (let dy = -2; dy <= 2; dy++) {
+        for (let dx = -2; dx <= 2; dx++) {
+          setFn(align[i2] + dx, align[j] + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+        }
+      }
+    }
+  }
+  const drawFormat = (m) => {
+    const d = FORMAT_BITS[level] << 3 | m;
+    let rem = d;
+    for (let i2 = 0; i2 < 10; i2++) rem = rem << 1 ^ (rem >>> 9) * 1335;
+    const f = (d << 10 | rem) ^ 21522;
+    const bit = (i2) => (f >>> i2 & 1) !== 0;
+    for (let i2 = 0; i2 <= 5; i2++) setFn(8, i2, bit(i2));
+    setFn(8, 7, bit(6));
+    setFn(8, 8, bit(7));
+    setFn(7, 8, bit(8));
+    for (let i2 = 9; i2 < 15; i2++) setFn(14 - i2, 8, bit(i2));
+    for (let i2 = 0; i2 < 8; i2++) setFn(size - 1 - i2, 8, bit(i2));
+    for (let i2 = 8; i2 < 15; i2++) setFn(8, size - 15 + i2, bit(i2));
+    setFn(8, size - 8, true);
+  };
+  drawFormat(0);
+  if (ver >= 7) {
+    let rem = ver;
+    for (let i2 = 0; i2 < 12; i2++) rem = rem << 1 ^ (rem >>> 11) * 7973;
+    const v = ver << 12 | rem;
+    for (let i2 = 0; i2 < 18; i2++) {
+      const dark = (v >>> i2 & 1) !== 0;
+      const a = size - 11 + i2 % 3;
+      const b = Math.floor(i2 / 3);
+      setFn(a, b, dark);
+      setFn(b, a, dark);
+    }
+  }
+  let i = 0;
+  for (let right = size - 1; right >= 1; right -= 2) {
+    if (right === 6) right = 5;
+    for (let vert = 0; vert < size; vert++) {
+      for (let j = 0; j < 2; j++) {
+        const x = right - j;
+        const upward = (right + 1 & 2) === 0;
+        const y = upward ? size - 1 - vert : vert;
+        if (!isFn[y][x] && i < codewords.length * 8) {
+          modules[y][x] = (codewords[i >>> 3] >>> 7 - (i & 7) & 1) !== 0;
+          i++;
+        }
+      }
+    }
+  }
+  const applyMask = (m) => {
+    for (let y = 0; y < size; y++) {
+      for (let x = 0; x < size; x++) {
+        if (!isFn[y][x] && maskBit(m, x, y)) modules[y][x] = !modules[y][x];
+      }
+    }
+  };
+  let chosen = mask ?? -1;
+  if (chosen < 0) {
+    let best = Infinity;
+    for (let m = 0; m < 8; m++) {
+      applyMask(m);
+      drawFormat(m);
+      const p = penalty(modules);
+      if (p < best) {
+        best = p;
+        chosen = m;
+      }
+      applyMask(m);
+    }
+  }
+  applyMask(chosen);
+  drawFormat(chosen);
+  return { size, version: ver, modules };
+}
+var DEFAULT_LABELS = {
+  orEnter: "Or enter",
+  share: "Share",
+  expired: "Code expired",
+  refresh: "Refresh",
+  scanned: "Scanned",
+  error: "Couldn\u2019t make the code",
+  loading: "Making the code",
+  code: "QR code"
+};
+var QR_CODE_PX = { sm: 128, md: 200, lg: 240 };
+function quietModules(n) {
+  return Math.max(4, Math.ceil(0.09 * n / (1 - 0.18)));
+}
+function modulePath(qr) {
+  let d = "";
+  qr.modules.forEach((row, y) => {
+    for (let x = 0; x < qr.size; x++) {
+      if (!row[x]) continue;
+      let w = 1;
+      while (x + w < qr.size && row[x + w]) w++;
+      d += `M${x} ${y}h${w}v1h-${w}z`;
+      x += w - 1;
+    }
+  });
+  return d;
+}
+function QRCode({
+  value,
+  size = "md",
+  label,
+  fallbackText,
+  mark,
+  level,
+  expiresAt,
+  status: statusProp = "ready",
+  scannedDetail,
+  onRefresh,
+  export: exports = [],
+  onBrightnessChange,
+  labels: labelsProp,
+  testID,
+  motion = "none"
+}) {
+  const labels = useLabels("qrCode", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("qr-code");
+  const { styles } = useStyles(sheet);
+  const px = QR_CODE_PX[size];
+  const ecl = mark ? "H" : level ?? "M";
+  const qr = React.useMemo(() => encodeQr(value, ecl), [value, ecl]);
+  const expiry = expiresAt === void 0 ? void 0 : +expiresAt;
+  const [lapsed, setLapsed] = React.useState(() => expiry !== void 0 && expiry <= Date.now());
+  React.useEffect(() => {
+    if (expiry === void 0) return setLapsed(false);
+    const left = expiry - Date.now();
+    setLapsed(left <= 0);
+    if (left <= 0) return;
+    const t = setTimeout(() => setLapsed(true), Math.min(left, 2 ** 31 - 1));
+    return () => clearTimeout(t);
+  }, [expiry]);
+  const status = statusProp === "ready" && !qr ? "error" : statusProp === "ready" && lapsed ? "expired" : statusProp;
+  const scannable = status === "ready" && !!qr;
+  const fade = useResolvedMotion(motion, "qr-code") === "full" && !theme.reduceMotion;
+  const appear = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (!fade || !scannable) {
+      appear.setValue(1);
+      return;
+    }
+    appear.setValue(0);
+    const run = Animated.timing(appear, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, [fade, scannable, appear, theme.motion.enter.duration, theme.motion.enter.easing]);
+  const brightness = React.useRef(onBrightnessChange);
+  brightness.current = onBrightnessChange;
+  React.useEffect(() => {
+    if (!scannable) return;
+    brightness.current?.(true);
+    return () => brightness.current?.(false);
+  }, [scannable]);
+  const box = [
+    styles.box,
+    { width: px, height: px, borderRadius: size === "lg" ? theme.radius.lg : theme.radius.md }
+  ];
+  let plate;
+  if (status === "loading") {
+    plate = /* @__PURE__ */ jsx(View, { style: [box, styles.loading], accessibilityState: { busy: true }, children: /* @__PURE__ */ jsx(Spinner, { size: "md", accessibilityLabel: labels.loading }) });
+  } else if (status === "error" || !qr) {
+    plate = /* @__PURE__ */ jsxs(View, { style: [box, styles.error], accessibilityRole: "alert", children: [
+      /* @__PURE__ */ jsx(IconTile, { icon: "alert-circle", tone: "danger", size: "md" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.coverLine, children: labels.error })
+    ] });
+  } else {
+    const q = quietModules(qr.size);
+    const total = qr.size + q * 2;
+    const covered = status === "expired" || status === "scanned";
+    plate = /* @__PURE__ */ jsxs(View, { style: [box, styles.plate], children: [
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          accessible: true,
+          accessibilityRole: "image",
+          accessibilityLabel: label ?? labels.code,
+          accessibilityElementsHidden: covered,
+          importantForAccessibility: covered ? "no-hide-descendants" : "auto",
+          children: /* @__PURE__ */ jsx(Svg, { width: px - 2, height: px - 2, viewBox: `${-q} ${-q} ${total} ${total}`, children: /* @__PURE__ */ jsx(Path, { d: modulePath(qr), fill: theme.media.onInk }) })
+        }
+      ),
+      mark ? /* @__PURE__ */ jsx(View, { style: [styles.mark, { width: px * 0.2, height: px * 0.2 }], children: mark }) : null,
+      covered ? (
+        // A cover, never a fade: a faded expired code still scans.
+        /* @__PURE__ */ jsxs(View, { testID: `qr-cover-${status}`, style: styles.cover, accessibilityLiveRegion: "polite", children: [
+          /* @__PURE__ */ jsx(View, { style: styles.coverFill }),
+          status === "expired" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.coverTitle, children: labels.expired }),
+            onRefresh ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", leadingIcon: "refresh", onPress: onRefresh, children: labels.refresh }) : null
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(IconTile, { icon: "check", tone: "good", size: "md" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.coverTitle, children: labels.scanned }),
+            scannedDetail ? /* @__PURE__ */ jsx(Text, { style: styles.coverLine, children: scannedDetail }) : null
+          ] })
+        ] })
+      ) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(View, { testID, style: styles.root, children: [
+    fade && scannable ? /* @__PURE__ */ jsx(Animated.View, { testID: "qr-fade", style: { opacity: appear }, children: plate }) : plate,
+    label ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null,
+    fallbackText ? /* @__PURE__ */ jsxs(View, { style: styles.fallback, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.orEnter, children: labels.orEnter }),
+      /* @__PURE__ */ jsx(Text, { style: styles.code, children: fallbackText }),
+      /* @__PURE__ */ jsx(CopyButton, { value: fallbackText, size: "xs" })
+    ] }) : null,
+    exports.length > 0 && scannable ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        leadingIcon: "share",
+        onPress: () => void Share.share({ message: fallbackText ?? value }),
+        children: labels.share
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { alignItems: "center", gap: theme.space[12] },
+  box: { overflow: "hidden", alignItems: "center", justifyContent: "center" },
+  plate: {
+    backgroundColor: theme.media.ink,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  loading: { backgroundColor: theme.color.surface3 },
+  error: {
+    gap: theme.space[8],
+    padding: theme.space[16],
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  mark: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    padding: theme.space[4],
+    borderRadius: theme.radius.xs,
+    backgroundColor: theme.media.ink
+  },
+  cover: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[8],
+    padding: theme.space[12]
+  },
+  // Surface at 96 % (the scale step nearest the spec's 94 %): hidden, not dimmed.
+  coverFill: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0,
+    backgroundColor: theme.color.surface,
+    opacity: theme.opacity[96]
+  },
+  coverTitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  coverLine: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.space[20],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  fallback: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
+  orEnter: { fontFamily: theme.font.sans, fontSize: theme.fontSize[13], color: theme.color.text2 },
+  code: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text,
+    writingDirection: "ltr"
+  }
+}));
+
+export { QRCode, QR_CODE_PX, encodeQr };