@lockin90/ui-native 0.0.0-stage → 1.0.0

package/lib/commonjs/components/StatTile.js

@@ -0,0 +1,644 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatTile = StatTile;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _tokens = require("@lockin90/tokens");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/* StatTile — the catalog stat-tile (chartlet) family (ST-01/06/07/10,
+   lockin90-design/charts/stat-tiles.html): KPI chartlets — big number + delta
+   + micro-chart, drawn in the fixed 320×150 catalog viewBox. Native twin of
+   `@lockin90/ui` StatTile — same prop API + geometry; the hero `shine` blur
+   is a real Gaussian-blurred duplicate number (Fabric-native SVG filters in
+   react-native-svg 15); the verdict-dot drop-shadow stays a faint halo
+   circle. */
+
+/** Catalog variant names (`lockin90-design/charts/stat-tiles.html`). */
+
+/* ST-10 — 3 rows: label + bold value + mini-spark */
+
+/** ST-01 SELECT accessory — the micro-chart next to the number. */
+
+/** One half of the `duo-tile` (ST-07). */
+
+/** One row of the `stat-list` (ST-10). */
+
+/* --------------------------------------------------------------- geometry
+ * The catalog canvas: 320×150, pad l10 r12 t16 b14 (catalog.js). */
+const W = 320;
+const H = 150;
+const P = {
+  l: 10,
+  r: 12,
+  t: 16,
+  b: 14
+};
+
+/* ------------------------------------------- catalog deterministic data
+ * mulberry32 + genData ported from catalog.js so the default accessories
+ * reproduce the catalog cards exactly (seeds: spark 21 · bars 31 · list
+ * rows 11/12/13). */
+function mulberry32(a) {
+  return () => {
+    a |= 0;
+    a = a + 0x6d2b79f5 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+const clamp01 = v => Math.max(0.03, Math.min(0.97, v));
+function genWave(seed, n) {
+  const r = mulberry32(seed);
+  const ph = r() * 6;
+  const f = 1.15 + r() * 0.5;
+  const amp = 0.2 + r() * 0.08;
+  const base = 0.48 + r() * 0.12;
+  const v = [];
+  for (let i = 0; i < n; i++) {
+    const t = i / (n - 1);
+    v.push(clamp01(base + Math.sin(t * Math.PI * 2 * f + ph) * amp + (r() - 0.5) * 0.08));
+  }
+  return v;
+}
+function genNoisy(seed, n) {
+  const r = mulberry32(seed);
+  const b = 0.5 + (r() - 0.5) * 0.1;
+  const v = [];
+  for (let i = 0; i < n; i++) {
+    const t = i / (n - 1);
+    v.push(clamp01(b + Math.sin(t * Math.PI * 2.2 + r()) * 0.12 + (r() - 0.5) * 0.3));
+  }
+  return v;
+}
+const DEFAULT_SPARK = genWave(21, 16);
+const DEFAULT_BARS = genNoisy(31, 8);
+const DEFAULT_STATS = [{
+  value: '7:42',
+  label: 'SLEEP',
+  delta: '+22 MIN',
+  deltaUp: true
+}, {
+  value: '58',
+  label: 'HRV MS',
+  delta: '−4',
+  deltaUp: false
+}];
+const DEFAULT_ROWS = [{
+  label: 'ENERGY',
+  value: '74',
+  color: _tokens.colors.mint,
+  data: genWave(11, 16)
+}, {
+  label: 'SLEEP',
+  value: '7:42',
+  color: _tokens.colors.violet,
+  data: genWave(12, 16)
+}, {
+  label: 'STRAIN',
+  value: '14.2',
+  color: _tokens.colors.zoneMid,
+  data: genWave(13, 16)
+}];
+const DEFAULT_TITLES = {
+  'stat-tile': 'ENERGY',
+  'hero-number': 'ENERGY · NOW',
+  'duo-tile': 'LAST NIGHT',
+  'stat-list': 'TODAY · GLANCE'
+};
+
+/** approximate Space Grotesk 700 advance for the delta-x heuristic */
+function numWidth(text, size) {
+  let w = 0;
+  for (const ch of text) w += /[.,:'’]/.test(ch) ? 0.32 : 0.62;
+  return w * size;
+}
+
+/** normalize a series to 0–1 (already-normalized data passes through) */
+function normalize(data) {
+  if (data.length === 0) return data;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  if (min >= 0 && max <= 1) return data;
+  const span = max - min || 1;
+  return data.map(v => (v - min) / span);
+}
+
+/** Fritsch–Carlson monotone cubic — the catalog's `smoothPath` (no overshoot). */
+function smoothPath(p) {
+  const n = p.length;
+  if (n < 3) return p.map((q, i) => `${i ? 'L' : 'M'}${q.x.toFixed(1)} ${q.y.toFixed(1)}`).join('');
+  const dx = [];
+  const m = [];
+  const tg = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx[i] = p[i + 1].x - p[i].x;
+    m[i] = (p[i + 1].y - p[i].y) / dx[i];
+  }
+  tg[0] = m[0];
+  tg[n - 1] = m[n - 2];
+  for (let i = 1; i < n - 1; i++) tg[i] = m[i - 1] * m[i] <= 0 ? 0 : (m[i - 1] + m[i]) / 2;
+  for (let i = 0; i < n - 1; i++) {
+    if (m[i] === 0) {
+      tg[i] = 0;
+      tg[i + 1] = 0;
+    } else {
+      const a = tg[i] / m[i];
+      const b = tg[i + 1] / m[i];
+      const s = a * a + b * b;
+      if (s > 9) {
+        const tau = 3 / Math.sqrt(s);
+        tg[i] = tau * a * m[i];
+        tg[i + 1] = tau * b * m[i];
+      }
+    }
+  }
+  let d = `M${p[0].x.toFixed(1)} ${p[0].y.toFixed(1)}`;
+  for (let i = 0; i < n - 1; i++) {
+    const h = dx[i] / 3;
+    d += `C${(p[i].x + h).toFixed(1)} ${(p[i].y + h * tg[i]).toFixed(1)} ${(p[i + 1].x - h).toFixed(1)} ${(p[i + 1].y - h * tg[i + 1]).toFixed(1)} ${p[i + 1].x.toFixed(1)} ${p[i + 1].y.toFixed(1)}`;
+  }
+  return d;
+}
+
+/** open arc — 0° at 12 o'clock, clockwise (catalog `arcPath`) */
+function arcPath(cx, cy, r, a0, a1) {
+  const pol = aDeg => {
+    const a = (aDeg - 90) * Math.PI / 180;
+    return {
+      x: cx + r * Math.cos(a),
+      y: cy + r * Math.sin(a)
+    };
+  };
+  const p0 = pol(a0);
+  const p1 = pol(a1);
+  const lg = (a1 - a0) % 360 > 180 ? 1 : 0;
+  return `M${p0.x.toFixed(1)} ${p0.y.toFixed(1)}A${r} ${r} 0 ${lg} 1 ${p1.x.toFixed(1)} ${p1.y.toFixed(1)}`;
+}
+function Label({
+  x,
+  y,
+  text,
+  color = _tokens.colors.textFaint,
+  anchor = 'middle'
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+    x: x,
+    y: y,
+    fill: color,
+    fontSize: 8.5,
+    textAnchor: anchor,
+    fontFamily: _tokens.fonts.mono,
+    letterSpacing: 0.5,
+    children: text
+  });
+}
+
+/** chip-pill label (dark rect + tinted hairline) — `y` = pill center */
+function Tag({
+  x,
+  y,
+  text,
+  color,
+  anchor = 'middle'
+}) {
+  const w = text.length * 5.35 + 12;
+  let xa = anchor === 'end' ? x - w : anchor === 'start' ? x : x - w / 2;
+  xa = Math.max(P.l - 4, Math.min(xa, W - P.r - w + 4));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+      x: xa.toFixed(1),
+      y: (y - 6.5).toFixed(1),
+      width: w.toFixed(1),
+      height: 13,
+      rx: 6.5,
+      fill: "rgba(8,10,18,0.78)",
+      stroke: color,
+      strokeOpacity: 0.35,
+      strokeWidth: 0.8
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+      x: (xa + w / 2).toFixed(1),
+      y: (y + 2.8).toFixed(1),
+      fill: color,
+      fontSize: 8,
+      textAnchor: "middle",
+      fontFamily: _tokens.fonts.mono,
+      letterSpacing: 0.4,
+      children: text
+    })]
+  });
+}
+
+/** the big display number (catalog `bigNum`) */
+function BigNum({
+  x,
+  y,
+  text,
+  size = 34,
+  color = _tokens.colors.text,
+  anchor = 'start',
+  opacity
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+    x: x,
+    y: y,
+    fill: color,
+    fontSize: size,
+    fontWeight: "700",
+    textAnchor: anchor,
+    fontFamily: _tokens.fonts.display,
+    letterSpacing: -size * 0.03,
+    opacity: opacity,
+    children: text
+  });
+}
+
+/** delta chevron + mono label — up = mint, down = coral (catalog `delta`) */
+function Delta({
+  x,
+  y,
+  text,
+  up
+}) {
+  const col = up ? _tokens.colors.zoneHigh : _tokens.colors.zoneLow;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: `M${x} ${up ? y : y - 6}l4 ${up ? -6 : 6}l4 ${up ? 6 : -6}`,
+      fill: "none",
+      stroke: col,
+      strokeWidth: 1.8,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      x: x + 12,
+      y: y - 1,
+      text: text,
+      color: col,
+      anchor: "start"
+    })]
+  });
+}
+
+/** 16-pt micro sparkline + end dot (catalog `microSpark`) */
+function MicroSpark({
+  x,
+  y,
+  w,
+  h,
+  data,
+  color
+}) {
+  const vals = normalize(data);
+  if (vals.length === 0) return null;
+  const pts = vals.map((v, i) => ({
+    x: x + (vals.length <= 1 ? w / 2 : w * i / (vals.length - 1)),
+    y: y + h - v * h
+  }));
+  const last = pts[pts.length - 1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: smoothPath(pts),
+      fill: "none",
+      stroke: color,
+      strokeWidth: 1.8,
+      strokeLinecap: "round"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+      cx: last.x.toFixed(1),
+      cy: last.y.toFixed(1),
+      r: 2.4,
+      fill: color
+    })]
+  });
+}
+
+/**
+ * StatTile — the kit's KPI chartlet (catalog family `stat-tiles`,
+ * ST-01/06/07/10): the big-number widgets that carry every dashboard.
+ * Native twin of `@lockin90/ui` StatTile — same prop API + geometry; the
+ * hero `shine` blur is a real Gaussian-blurred duplicate number
+ * (Fabric-native SVG filters) and the verdict dot's drop-shadow a faint
+ * halo circle.
+ *
+ * - `stat-tile` (ST-01, default) — big 34px number + delta chevron + dim
+ *   caption; SELECT `accessory`: none / spark / bars / ring / progress,
+ *   plus an optional `verdictColor` glow-dot.
+ * - `hero-number` (ST-06) — centered 52px number + delta + insight line.
+ * - `duo-tile` (ST-07) — two stats split by a hairline.
+ * - `stat-list` (ST-10) — 3 rows of label + bold value + colored mini-spark.
+ */
+function StatTile({
+  variant = 'stat-tile',
+  title,
+  value,
+  delta,
+  deltaUp = true,
+  label,
+  accessory = 'none',
+  data,
+  accessoryColor,
+  progress = 0.72,
+  ringLabel,
+  verdictColor,
+  pill,
+  pillColor,
+  color,
+  stats = DEFAULT_STATS,
+  rows = DEFAULT_ROWS,
+  shine = false,
+  width = W,
+  height = H,
+  style
+}) {
+  const uid = (0, _react.useId)().replace(/[^a-zA-Z0-9]/g, '');
+  /* hero number mirrors the web text copy's blur(8px); the ring-accessory
+     shine mirrors its arc's blur(3px) */
+  const blur8Id = `lk-stat-blur8-${uid}`;
+  const blur3Id = `lk-stat-blur3-${uid}`;
+  const heading = title ?? DEFAULT_TITLES[variant];
+  const head = /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+    x: P.l + 8,
+    y: 26,
+    text: heading,
+    anchor: "start"
+  });
+  let accessibilityLabel;
+  let content;
+  if (variant === 'hero-number') {
+    /* --------------------------------------------------- ST-06 hero-number */
+    const val = value ?? '74';
+    const col = color ?? (shine ? _tokens.colors.mint : _tokens.colors.text);
+    const deltaText = delta ?? '+6';
+    accessibilityLabel = `${heading}: ${val}${deltaText ? `, ${deltaText}` : ''}`;
+    content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [shine ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.G, {
+        filter: `url(#${blur8Id})`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BigNum, {
+          x: W / 2,
+          y: 82,
+          text: val,
+          size: 52,
+          color: _tokens.colors.mint,
+          anchor: "middle",
+          opacity: 0.5
+        })
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(BigNum, {
+        x: W / 2,
+        y: 82,
+        text: val,
+        size: 52,
+        color: col,
+        anchor: "middle"
+      }), deltaText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Delta, {
+        x: W / 2 + 40,
+        y: 60,
+        text: deltaText,
+        up: deltaUp
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+        x: W / 2,
+        y: 102,
+        text: label ?? 'ENERGY · PEAK IN 40 MIN',
+        color: _tokens.colors.textDim
+      })]
+    });
+  } else if (variant === 'duo-tile') {
+    /* ------------------------------------------------------ ST-07 duo-tile */
+    const [a, b] = stats;
+    accessibilityLabel = `${heading}: ${a.label} ${a.value}, ${b.label} ${b.value}`;
+    content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BigNum, {
+        x: P.l + 8,
+        y: 70,
+        text: a.value,
+        size: 26
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+        x: P.l + 8,
+        y: 88,
+        text: a.label,
+        anchor: "start"
+      }), a.delta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Delta, {
+        x: P.l + 8,
+        y: 106,
+        text: a.delta,
+        up: a.deltaUp ?? true
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+        x1: W / 2,
+        x2: W / 2,
+        y1: 38,
+        y2: 112,
+        stroke: "rgba(255,255,255,0.1)",
+        strokeWidth: 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BigNum, {
+        x: W / 2 + 16,
+        y: 70,
+        text: b.value,
+        size: 26
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+        x: W / 2 + 16,
+        y: 88,
+        text: b.label,
+        anchor: "start"
+      }), b.delta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Delta, {
+        x: W / 2 + 16,
+        y: 106,
+        text: b.delta,
+        up: b.deltaUp ?? true
+      }) : null]
+    });
+  } else if (variant === 'stat-list') {
+    /* ----------------------------------------------------- ST-10 stat-list */
+    accessibilityLabel = `${heading}: ${rows.map(r => `${r.label} ${r.value}`).join(', ')}`;
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: rows.map((rw, i) => {
+        const y = 44 + i * 30;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+            x: P.l + 8,
+            y: y + 4,
+            text: rw.label,
+            anchor: "start"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+            x: P.l + 76,
+            y: y + 7,
+            fill: _tokens.colors.text,
+            fontSize: 16,
+            fontWeight: "700",
+            fontFamily: _tokens.fonts.display,
+            children: rw.value
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MicroSpark, {
+            x: 170,
+            y: y - 8,
+            w: 122,
+            h: 20,
+            data: rw.data ?? DEFAULT_SPARK,
+            color: rw.color ?? _tokens.colors.mint
+          })]
+        }, i);
+      })
+    });
+  } else {
+    /* ----------------------------------------------------- ST-01 stat-tile */
+    const val = value ?? '74';
+    const numSize = accessory === 'progress' ? 30 : 34;
+    const numY = accessory === 'progress' ? 70 : 76;
+    const numX = verdictColor ? P.l + 30 : P.l + 8;
+    const numColor = verdictColor ?? _tokens.colors.text;
+    const labY = accessory === 'progress' ? 90 : 96;
+    const deltaX = numX + numWidth(val, numSize) + 14;
+    const aColor = accessoryColor ?? (accessory === 'spark' ? _tokens.colors.cyan : _tokens.colors.mint);
+    const frac = Math.max(0, Math.min(1, progress));
+    const trackW = W - P.l - P.r - 16;
+    accessibilityLabel = `${heading}: ${val}${delta ? `, ${delta}` : ''}`;
+    content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [verdictColor ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+          cx: P.l + 14,
+          cy: 66,
+          r: 10,
+          fill: verdictColor,
+          opacity: 0.3
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+          cx: P.l + 14,
+          cy: 66,
+          r: 6,
+          fill: verdictColor
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(BigNum, {
+        x: numX,
+        y: numY,
+        text: val,
+        size: numSize,
+        color: color ?? numColor
+      }), delta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Delta, {
+        x: deltaX,
+        y: numY - 4,
+        text: delta,
+        up: deltaUp
+      }) : null, label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+        x: numX,
+        y: labY,
+        text: label,
+        color: _tokens.colors.textDim,
+        anchor: "start"
+      }) : null, accessory === 'spark' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MicroSpark, {
+        x: 176,
+        y: 46,
+        w: 118,
+        h: 44,
+        data: data ?? DEFAULT_SPARK,
+        color: aColor
+      }) : null, accessory === 'bars' ? (() => {
+        const vals = normalize(data ?? DEFAULT_BARS);
+        const bw = 108 / vals.length * 0.6;
+        return vals.map((v, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+          x: (186 + i * 108 / vals.length).toFixed(1),
+          y: (44 + 46 - v * 46).toFixed(1),
+          width: bw.toFixed(1),
+          height: (v * 46).toFixed(1),
+          rx: 1.5,
+          fill: aColor,
+          opacity: 0.5 + v * 0.5
+        }, i));
+      })() : null, accessory === 'ring' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: arcPath(236, 70, 26, 0, 359.99),
+          fill: "none",
+          stroke: "rgba(255,255,255,0.1)",
+          strokeWidth: 5
+        }), shine ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: arcPath(236, 70, 26, 0, frac * 360),
+          fill: "none",
+          stroke: aColor,
+          strokeWidth: 9,
+          strokeLinecap: "round",
+          opacity: 0.3,
+          filter: `url(#${blur3Id})`
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: arcPath(236, 70, 26, 0, frac * 360),
+          fill: "none",
+          stroke: aColor,
+          strokeWidth: 5,
+          strokeLinecap: "round"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+          x: 236,
+          y: 74,
+          fill: _tokens.colors.text,
+          fontSize: 13,
+          fontWeight: "700",
+          textAnchor: "middle",
+          fontFamily: _tokens.fonts.display,
+          children: ringLabel ?? `${Math.round(frac * 100)}%`
+        })]
+      }) : null, accessory === 'progress' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+          x: P.l + 8,
+          y: 100,
+          width: trackW,
+          height: 8,
+          rx: 4,
+          fill: "rgba(255,255,255,0.08)"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+          x: P.l + 8,
+          y: 100,
+          width: (trackW * frac).toFixed(1),
+          height: 8,
+          rx: 4,
+          fill: aColor
+        })]
+      }) : null, pill ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+        x: W - P.r - 8,
+        y: verdictColor ? 66 : 104,
+        text: pill,
+        color: pillColor ?? verdictColor ?? aColor,
+        anchor: "end"
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    accessibilityRole: "image",
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      width,
+      height
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+      width: width,
+      height: height,
+      viewBox: `0 0 ${W} ${H}`,
+      children: [shine ?
+      /*#__PURE__*/
+      /* real Gaussian blurs for the glows (Fabric-native in react-native-svg
+         15) — the native twins of the web `blur(8px)` hero copy and the
+         ring accessory's `blur(3px)`. Regions in user space over the full
+         canvas so text/arcs never clip the blur. */
+      (0, _jsxRuntime.jsxs)(_reactNativeSvg.Defs, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Filter, {
+          id: blur8Id,
+          filterUnits: "userSpaceOnUse",
+          x: -16,
+          y: -16,
+          width: W + 32,
+          height: H + 32,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.FeGaussianBlur, {
+            stdDeviation: 4
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Filter, {
+          id: blur3Id,
+          filterUnits: "userSpaceOnUse",
+          x: -10,
+          y: -10,
+          width: W + 20,
+          height: H + 20,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.FeGaussianBlur, {
+            stdDeviation: 1.5
+          })
+        })]
+      }) : null, head, content]
+    })
+  });
+}
+//# sourceMappingURL=StatTile.js.map