@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/FunnelChart.tsx

@@ -0,0 +1,310 @@
+import { useId } from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Defs, FeGaussianBlur, Filter, G, Path, Rect, Text as SvgText } from 'react-native-svg';
+import { colors, fonts } from '@lockin90/tokens';
+
+/* FunnelChart — the shared catalog conversion-funnel family (FN-01/03/04/05,
+   lockin90-design/charts/funnel-charts.html): centered trapezoid bands or
+   left-aligned stage bars drawn in a fixed 320×150 viewBox, mono labels,
+   coral per-stage drop-off, optional previous-period ghost bars. Native twin
+   of `@lockin90/ui` FunnelChart — same prop API; shine is a Gaussian-blurred
+   duplicate shape (Fabric-native SVG filters). The web-only ADMIN operator funnel
+   (`@lockin90/ui/admin`) is a different component and has no native twin. */
+
+export type FunnelChartVariant =
+  | 'band-funnel' /* FN-01 — centered symmetric trapezoid bands + stage labels */
+  | 'bar-funnel' /* FN-03 — left-aligned stage bars + % + coral drop labels */
+  | 'zone-funnel' /* FN-04 — bar funnel, stage color = conversion zone */
+  | 'compare-funnel'; /* FN-05 — thin bars over previous-period ghost bars */
+
+/** FN-01 band fill SELECT: solid spectrum tokens vs faint glass fill. */
+export type FunnelChartFill = 'tokens' | 'glass';
+
+/** One funnel stage, top (widest) → bottom. */
+export interface FunnelStage {
+  /** Stage name, drawn in mono (e.g. "SIGNED UP"). */
+  label: string;
+  /** Stage size — raw count or 0–1 fraction; geometry + the printed % are
+   *  normalized against the FIRST stage's value (the funnel top = 100%). */
+  value: number;
+  /** Previous-period value (same units) — the ghost bar in `compare-funnel`. */
+  prev?: number;
+  /** Color token override for this stage (e.g. `colors.violet`). Ignored by
+   *  `zone-funnel`, where the conversion zone owns the color. */
+  color?: string;
+}
+
+export interface FunnelChartProps {
+  /** Ordered stages, funnel top first. */
+  stages?: FunnelStage[];
+  /** Catalog variant (FN-01 / FN-03 / FN-04 / FN-05). */
+  variant?: FunnelChartVariant;
+  /** Band fill for `band-funnel` — solid spectrum tokens vs faint glass. */
+  fill?: FunnelChartFill;
+  /** Top-left mono caption (e.g. 'ONBOARDING · THIS MONTH'). */
+  title?: string;
+  /** Soft color glow behind the bands/bars (the catalog glow modifier). */
+  shine?: boolean;
+  /** Footer caption for `compare-funnel`'s ghost bars. */
+  ghostLabel?: string;
+  /** Accessible description of the chart. */
+  ariaLabel?: string;
+  /** Optional container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/* ---- catalog geometry (viewBox units — charts/catalog.js) ---- */
+const W = 320;
+const H = 150;
+const PAD = { l: 10, r: 12, t: 16, b: 14 };
+const PLOT_W = W - PAD.l - PAD.r; // 298
+const PLOT_H = H - PAD.t - PAD.b; // 120
+/** widest band = 78% of the plot width, centered */
+const BAND_MAX_W = PLOT_W * 0.78;
+/** bar variants reserve a 96px label gutter left + % / drop labels right */
+const BAR_X = PAD.l + 102;
+const BAR_MAX_W = PLOT_W - 118; // 180
+
+/* catalog stage palette (funnel-charts.html STAGES), wraps for longer funnels */
+const STAGE_COLORS = [colors.cyan, colors.mint, colors.lime, colors.zoneMid] as const;
+
+/* previous-period ghost fill — the catalog's white-14%. No token equivalent:
+   glass2 (.075) is half as bright, border2 (.16) is a border token. */
+const GHOST_FILL = 'rgba(255, 255, 255, 0.14)';
+
+const DEFAULT_STAGES: FunnelStage[] = [
+  { label: 'SIGNED UP', value: 1 },
+  { label: 'CONNECTED DEVICE', value: 0.72 },
+  { label: 'FIRST SYNC', value: 0.58 },
+  { label: 'DAY-7 ACTIVE', value: 0.34 },
+];
+
+/** Round for compact attribute values. */
+const rd = (n: number) => Math.round(n * 100) / 100;
+
+/** Conversion-zone color — the funnel catalog's thresholds (>0.6 / >0.4). */
+const zoneColor = (frac: number): string =>
+  frac > 0.6 ? colors.zoneHigh : frac > 0.4 ? colors.zoneMid : colors.zoneLow;
+
+/** Mono catalog label (8.5px JetBrains Mono, ~.06em tracking). */
+function Label({
+  x,
+  y,
+  fill,
+  anchor = 'middle',
+  children,
+}: {
+  x: number;
+  y: number;
+  fill: string;
+  anchor?: 'start' | 'middle' | 'end';
+  children: string;
+}) {
+  return (
+    <SvgText
+      x={rd(x)}
+      y={rd(y)}
+      fill={fill}
+      textAnchor={anchor}
+      fontSize={8.5}
+      fontFamily={fonts.mono}
+      letterSpacing={0.5}
+    >
+      {children}
+    </SvgText>
+  );
+}
+
+/**
+ * FunnelChart — conversion-funnel chart for product surfaces (catalog family
+ * FN-01…FN-05). `band-funnel` draws the classic centered trapezoid bands
+ * (solid spectrum tokens or faint `glass` fill); the bar variants draw
+ * left-aligned stage bars with the conversion % after each bar and the coral
+ * per-stage drop-off at the right — `zone-funnel` colors each bar by its
+ * conversion zone, `compare-funnel` layers thin bars over previous-period
+ * ghost bars. Values are normalized against the first stage.
+ */
+export function FunnelChart({
+  stages = DEFAULT_STAGES,
+  variant = 'band-funnel',
+  fill = 'tokens',
+  title,
+  shine = false,
+  ghostLabel = 'GHOST = LAST MONTH',
+  ariaLabel = 'Conversion funnel',
+  style,
+}: FunnelChartProps) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const blurId = `lk-fnl-blur-${uid}`;
+  const isZone = variant === 'zone-funnel';
+  const isCompare = variant === 'compare-funnel';
+  const isBars = variant !== 'band-funnel';
+  const glass = fill === 'glass';
+
+  // normalize against the funnel top (first stage = 100%), clamped 0–1
+  const base = stages.length > 0 && stages[0].value > 0 ? stages[0].value : 1;
+  const frac = stages.map((s) => Math.max(0, Math.min(1, s.value / base)));
+  const n = stages.length || 1;
+
+  const colorOf = (i: number): string =>
+    isZone ? zoneColor(frac[i]) : (stages[i].color ?? STAGE_COLORS[i % STAGE_COLORS.length]);
+
+  return (
+    <View
+      accessibilityRole="image"
+      accessibilityLabel={ariaLabel}
+      style={[styles.root, style]}
+    >
+      <Svg width="100%" height="100%" viewBox={`0 0 ${W} ${H}`}>
+        {shine ? (
+          /* real Gaussian blur for the shine (Fabric-native in react-native-svg
+             15) — the native twin of the web `drop-shadow(0 0 6px glow)`. Region
+             in user space so thin bars/bands never clip the blur to their bbox. */
+          <Defs>
+            <Filter
+              id={blurId}
+              filterUnits="userSpaceOnUse"
+              x={-10}
+              y={-10}
+              width={W + 20}
+              height={H + 20}
+            >
+              <FeGaussianBlur stdDeviation={3} />
+            </Filter>
+          </Defs>
+        ) : null}
+        {title ? (
+          <Label x={PAD.l + 2} y={11} fill={colors.textFaint} anchor="start">
+            {title}
+          </Label>
+        ) : null}
+
+        {isBars
+          ? /* ---- FN-03/04/05 · left-aligned stage bars ---- */
+            stages.map((stage, i) => {
+              const rh = PLOT_H / n;
+              const y = PAD.t + 6 + i * rh;
+              const cy = y + rh / 2;
+              const col = colorOf(i);
+              const barW = Math.max(8, BAR_MAX_W * frac[i]);
+              const barY = rd(cy - (isCompare ? 1 : 6));
+              const barH = isCompare ? 7 : 12;
+              const barR = isCompare ? 3.5 : 6;
+              const prevFrac =
+                isCompare && stage.prev != null
+                  ? Math.max(0, Math.min(1, stage.prev / base))
+                  : null;
+              const drop =
+                i > 0 && frac[i - 1] > 0
+                  ? Math.max(0, Math.round((1 - frac[i] / frac[i - 1]) * 100))
+                  : null;
+
+              return (
+                <G key={i}>
+                  <Label x={PAD.l + 96} y={cy + 3} fill={colors.textDim} anchor="end">
+                    {stage.label}
+                  </Label>
+                  {prevFrac != null ? (
+                    <Rect
+                      x={BAR_X}
+                      y={rd(cy - 8)}
+                      width={rd(BAR_MAX_W * prevFrac)}
+                      height={5}
+                      rx={2.5}
+                      fill={GHOST_FILL}
+                    />
+                  ) : null}
+                  {/* shine — a Gaussian-blurred duplicate of the bar behind it: the
+                      same soft glow the web bar gets from `drop-shadow(0 0 6px col)`.
+                      (Feather copies read as banded outlines on device.) */}
+                  {shine ? (
+                    <Rect
+                      x={BAR_X}
+                      y={barY}
+                      width={rd(barW)}
+                      height={barH}
+                      rx={barR}
+                      fill={col}
+                      opacity={0.55}
+                      filter={`url(#${blurId})`}
+                    />
+                  ) : null}
+                  <Rect
+                    x={BAR_X}
+                    y={barY}
+                    width={rd(barW)}
+                    height={barH}
+                    rx={barR}
+                    fill={col}
+                    opacity={0.92}
+                  />
+                  <Label x={PAD.l + 108 + barW} y={cy + 3.5} fill={col} anchor="start">
+                    {`${Math.round(frac[i] * 100)}%`}
+                  </Label>
+                  {drop != null ? (
+                    <Label x={W - PAD.r - 2} y={y + 3} fill={colors.zoneLow} anchor="end">
+                      {`−${drop}%`}
+                    </Label>
+                  ) : null}
+                </G>
+              );
+            })
+          : /* ---- FN-01 · centered trapezoid bands ---- */
+            stages.map((stage, i) => {
+              const bh = (PLOT_H - 18) / n;
+              const y0 = PAD.t + 8 + i * (bh + 4);
+              const y1 = y0 + bh;
+              const cx = W / 2;
+              const wTop = BAND_MAX_W * (i === 0 ? frac[0] : frac[i - 1]);
+              const wBot = BAND_MAX_W * frac[i];
+              const col = colorOf(i);
+              const strokeW = glass ? 1.4 : 1;
+              const d = `M${rd(cx - wTop / 2)} ${rd(y0)}L${rd(cx + wTop / 2)} ${rd(
+                y0,
+              )}L${rd(cx + wBot / 2)} ${rd(y1)}L${rd(cx - wBot / 2)} ${rd(y1)}Z`;
+
+              return (
+                <G key={i}>
+                  {/* shine — a Gaussian-blurred duplicate of the band behind it
+                      (same fill + edge silhouette): the soft glow the web band gets
+                      from `drop-shadow(0 0 6px col)` on its fill+stroke. */}
+                  {shine ? (
+                    <Path
+                      d={d}
+                      fill={col}
+                      fillOpacity={glass ? 0.14 : 0.4}
+                      stroke={col}
+                      strokeWidth={strokeW}
+                      strokeOpacity={0.8}
+                      filter={`url(#${blurId})`}
+                    />
+                  ) : null}
+                  <Path
+                    d={d}
+                    fill={col}
+                    fillOpacity={glass ? 0.14 : 0.4}
+                    stroke={col}
+                    strokeWidth={strokeW}
+                    strokeOpacity={0.8}
+                  />
+                  <Label x={cx} y={(y0 + y1) / 2 + 3} fill={glass ? col : colors.text}>
+                    {`${stage.label} · ${Math.round(frac[i] * 100)}%`}
+                  </Label>
+                </G>
+              );
+            })}
+
+        {isCompare && ghostLabel ? (
+          <Label x={W - PAD.r - 2} y={H - 2} fill={colors.textFaint} anchor="end">
+            {ghostLabel}
+          </Label>
+        ) : null}
+      </Svg>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  /* fixed catalog aspect (320×150); the Svg scales the viewBox to fit */
+  root: { width: '100%', aspectRatio: W / H },
+});

package/src/components/Gauge.tsx

@@ -0,0 +1,329 @@
+import { useId, type ReactNode } from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Path, Line, Circle, Defs, FeGaussianBlur, Filter, LinearGradient, Stop } from 'react-native-svg';
+import { colors, fonts } from '@lockin90/tokens';
+
+/** Zone verdict color for a normalized 0..1 value (catalog thresholds). */
+function zoneColor01(t: number): string {
+  return t >= 0.62 ? colors.zoneHigh : t >= 0.38 ? colors.zoneMid : colors.zoneLow;
+}
+
+/** A colored band on the [min,max] scale, filled up to its `to` value. Bands
+ *  are stacked low→high; each paints from the previous band's `to` up to its
+ *  own. */
+export interface GaugeZone {
+  /** upper bound of this band on the [min,max] scale */
+  to: number;
+  /** the band color — a hex/rgb color string */
+  color: string;
+}
+
+export interface GaugeProps {
+  /** the current value, clamped to [min,max] */
+  value: number;
+  /** scale floor (default 0) */
+  min?: number;
+  /** scale ceiling (default 100) */
+  max?: number;
+  /** overall square box size in px (default 140) */
+  size?: number;
+  /** arc stroke width in px (default 12) */
+  thickness?: number;
+  /** total sweep in degrees, opening at bottom-center (default 270) */
+  sweep?: number;
+  /** colored zone bands up to each `to` on the [min,max] scale. When omitted a
+   *  single accent progress arc to `value` is drawn over the track. */
+  zones?: GaugeZone[];
+  /** value-arc color (default `colors.accent`). Ignored when a `gradient`
+   *  array is given or `zone` is on. */
+  color?: string;
+  /** value-arc gradient along the sweep (left → right). An array (≥2) paints N
+   *  evenly-spaced gradient stops — e.g. `[colors.zoneLow, colors.zoneMid,
+   *  colors.zoneHigh]` is the DN-13 red→amber→green strain gauge; a single
+   *  string is treated like a solid `color`. */
+  gradient?: string | string[];
+  /** color the value arc + readout by the value's zone verdict on the
+   *  [min,max] scale (≥62% → high, ≥38% → mid, else low). */
+  zone?: boolean;
+  /** glow underlay — a Gaussian-blurred duplicate of the value arc (the
+   *  catalog's shine modifier; off by default). */
+  shine?: boolean;
+  /** number of tick marks along the arc (default 0 = off) */
+  ticks?: number;
+  /** tick placement: `span` straddles the arc (default, legacy) · `out` sits
+   *  just outside it (DN-13 gauge-270 look). `out` shrinks the arc radius by
+   *  8px so the outer ticks fit the viewBox (native SVG clips). */
+  tickPosition?: 'span' | 'out';
+  /** draw the end-cap dot at the current value (default true) */
+  cap?: boolean;
+  /** small caption under the value */
+  label?: string;
+  /** show the numeric value readout (default true) */
+  showValue?: boolean;
+  /** override the centered content (replaces value + label) */
+  children?: ReactNode;
+  /** optional wrapper style */
+  style?: StyleProp<ViewStyle>;
+}
+
+/** point on a circle at `cx,cy` radius `r` for screen-angle `deg`
+ *  (0° = 3 o'clock, growing clockwise). */
+function polar(cx: number, cy: number, r: number, deg: number) {
+  const a = (deg * Math.PI) / 180;
+  return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
+}
+
+/** SVG arc path from `startDeg` to `endDeg` (clockwise) on a circle. */
+function arcPath(cx: number, cy: number, r: number, startDeg: number, endDeg: number) {
+  const start = polar(cx, cy, r, startDeg);
+  const end = polar(cx, cy, r, endDeg);
+  const large = endDeg - startDeg > 180 ? 1 : 0;
+  return `M ${start.x.toFixed(2)} ${start.y.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)}`;
+}
+
+/**
+ * Gauge — an arc/dial primitive: a partial-circle track (default 270° sweep,
+ * open at the bottom-center) showing a `value` on a [min,max] scale. Supports
+ * colored `zones` bands (low/mid/high), a progress arc + round end cap to the
+ * current value, optional `ticks`, and a centered value/label readout. Covers
+ * the catalog gauges: DN-13 `gauge-270` (`gradient` + `ticks` +
+ * `tickPosition="out"`) and DN-14 `half-gauge` (`sweep={180}`). Distinct
+ * from `Ring` (a full-circle 0–100 single-color progress); Gauge adds an
+ * arbitrary sweep, a min/max scale, multi-zone bands and ticks.
+ */
+export function Gauge({
+  value,
+  min = 0,
+  max = 100,
+  size = 140,
+  thickness = 12,
+  sweep = 270,
+  zones,
+  color,
+  gradient,
+  zone = false,
+  shine = false,
+  ticks = 0,
+  tickPosition = 'span',
+  cap = true,
+  label,
+  showValue = true,
+  children,
+  style,
+}: GaugeProps) {
+  const uid = useId();
+  const gradId = `lk-gauge-grad-${uid.replace(/[^a-zA-Z0-9]/g, '')}`;
+
+  const span = max - min || 1;
+  const sw = Math.max(0, Math.min(360, sweep));
+  const v = Math.max(min, Math.min(max, value));
+
+  const cx = size / 2;
+  const cy = size / 2;
+  // reserve room for outside ticks — native SVG clips at the viewBox
+  const outPad = tickPosition === 'out' ? 8 : 0;
+  const r = (size - thickness) / 2 - outPad;
+
+  // value-arc paint: zone verdict > N-stop gradient > single color > accent
+  const t01 = (v - min) / span;
+  const useGradient = Array.isArray(gradient) && !zone;
+  const solid = zone
+    ? zoneColor01(t01)
+    : typeof gradient === 'string'
+      ? gradient
+      : (color ?? colors.accent);
+  const arcStroke = useGradient ? `url(#${gradId})` : solid;
+  // cap tint follows the arc (gradient → its last stop, where the arc ends)
+  const capColor = useGradient ? gradient[gradient.length - 1]! : solid;
+
+  // The gap is centered at the bottom (screen-angle 90°). The arc starts to the
+  // left of bottom and sweeps clockwise over the top to the right of bottom.
+  const startDeg = 90 + (360 - sw) / 2;
+  const endDeg = startDeg + sw;
+  /** map a [min,max] value to its screen-angle along the sweep */
+  const toAngle = (val: number) => startDeg + ((val - min) / span) * sw;
+
+  const hasZones = Array.isArray(zones) && zones.length > 0;
+
+  // zone band arcs, stacked low→high from `min`
+  const bands = hasZones
+    ? zones!
+        .slice()
+        .sort((a, b) => a.to - b.to)
+        .reduce<{ from: number; to: number; color: string }[]>((acc, z) => {
+          const prev = acc.length ? acc[acc.length - 1]!.to : min;
+          const to = Math.max(min, Math.min(max, z.to));
+          if (to > prev) acc.push({ from: prev, to, color: z.color });
+          return acc;
+        }, [])
+    : [];
+
+  // tick angles evenly spaced across the sweep (inclusive of both ends)
+  const tickMarks: number[] = [];
+  if (ticks > 0) {
+    const n = ticks;
+    for (let i = 0; i < n; i++) {
+      tickMarks.push(startDeg + (n === 1 ? 0 : (i / (n - 1)) * sw));
+    }
+  }
+  // `span` straddles the arc (legacy); `out` sits just past its outer edge (DN-13)
+  const tickOuter = r + thickness / 2 + (tickPosition === 'out' ? 7.5 : 2);
+  const tickInner = tickPosition === 'out' ? r + thickness / 2 + 2.5 : r - thickness / 2 - 2;
+
+  const valueAngle = toAngle(v);
+  const capPt = polar(cx, cy, r, valueAngle);
+
+  return (
+    <View style={[styles.root, { width: size, height: size }, style]}>
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        {useGradient ? (
+          <Defs>
+            <LinearGradient id={gradId} x1="0" y1="0" x2="1" y2="0">
+              {gradient.map((stopColor, i) => (
+                <Stop
+                  key={i}
+                  offset={i / Math.max(1, gradient.length - 1)}
+                  stopColor={stopColor}
+                />
+              ))}
+            </LinearGradient>
+          </Defs>
+        ) : null}
+        {shine && !hasZones ? (
+          /* real Gaussian blur for the shine (Fabric-native in react-native-svg 15) —
+             the native twin of the web value arc's `blur(6px)` underlay. Region in
+             user space so short/flat arcs never clip the blur to their bbox. */
+          <Defs>
+            <Filter
+              id={`${gradId}-blur`}
+              filterUnits="userSpaceOnUse"
+              x={-12}
+              y={-12}
+              width={size + 24}
+              height={size + 24}
+            >
+              <FeGaussianBlur stdDeviation={3} />
+            </Filter>
+          </Defs>
+        ) : null}
+
+        {/* track — the full sweep, faint */}
+        <Path
+          d={arcPath(cx, cy, r, startDeg, endDeg)}
+          fill="none"
+          stroke={colors.border}
+          strokeWidth={thickness}
+          strokeLinecap="round"
+        />
+
+        {/* zone bands (when provided) */}
+        {bands.map((b, i) => (
+          <Path
+            key={`band-${i}`}
+            d={arcPath(cx, cy, r, toAngle(b.from), toAngle(b.to))}
+            fill="none"
+            stroke={b.color}
+            strokeWidth={thickness}
+            strokeLinecap="round"
+          />
+        ))}
+
+        {/* shine — a Gaussian-blurred duplicate of the value arc behind it: the
+            same soft glow the web arc gets from its `blur(6px)` underlay.
+            (Discrete "feather" copies read as banded outlines on device.) */}
+        {shine && !hasZones && v > min ? (
+          <Path
+            d={arcPath(cx, cy, r, startDeg, valueAngle)}
+            fill="none"
+            stroke={arcStroke}
+            strokeWidth={thickness + 5}
+            strokeOpacity={0.5}
+            strokeLinecap="round"
+            filter={`url(#${gradId}-blur)`}
+          />
+        ) : null}
+
+        {/* progress arc to value — only when there are no zones */}
+        {!hasZones && v > min ? (
+          <Path
+            d={arcPath(cx, cy, r, startDeg, valueAngle)}
+            fill="none"
+            stroke={arcStroke}
+            strokeWidth={thickness}
+            strokeLinecap="round"
+          />
+        ) : null}
+
+        {/* ticks */}
+        {tickMarks.map((deg, i) => {
+          const a = polar(cx, cy, tickOuter, deg);
+          const b = polar(cx, cy, tickInner, deg);
+          return (
+            <Line
+              key={`tick-${i}`}
+              x1={a.x}
+              y1={a.y}
+              x2={b.x}
+              y2={b.y}
+              stroke={colors.textFaint}
+              strokeWidth={1.5}
+              strokeLinecap="round"
+            />
+          );
+        })}
+
+        {/* end cap — a dot marking the current value on the arc */}
+        {cap && v > min ? (
+          <Circle
+            cx={capPt.x}
+            cy={capPt.y}
+            r={thickness / 2 + 1}
+            fill={colors.text}
+            stroke={capColor}
+            strokeWidth={2}
+          />
+        ) : null}
+      </Svg>
+
+      <View style={styles.center} pointerEvents="none">
+        {children ?? (
+          <>
+            {showValue ? (
+              <Text style={[styles.value, zone ? { color: solid } : null]}>
+                {Math.round(v)}
+              </Text>
+            ) : null}
+            {label ? <Text style={styles.label}>{label}</Text> : null}
+          </>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { position: 'relative', alignItems: 'center', justifyContent: 'center' },
+  center: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+  },
+  value: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    letterSpacing: -1,
+    lineHeight: 34,
+    fontSize: 34,
+    color: colors.text,
+    textAlign: 'center',
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    letterSpacing: 1.6,
+    textTransform: 'uppercase',
+    color: colors.textFaint,
+    textAlign: 'center',
+  },
+});