@lockin90/ui-native 0.0.0-stage → 1.0.0

package/lib/commonjs/components/BarChart.js

@@ -0,0 +1,641 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarChart = BarChart;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _expoLinearGradient = require("expo-linear-gradient");
+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); }
+/** One bar in the chart. */
+
+/**
+ * Catalog SVG variants (design catalog `bar-charts.html`, BC-01…BC-24).
+ * Omit `variant` for the classic flex-column bars.
+ */
+
+// BC-24
+
+/** One dot-legend entry (rendered top-right inside the plot). */
+
+/** Faithful reproduction of the design's weekday-style bars. */
+const DEFAULT_BARS = [{
+  value: 71,
+  label: 'M'
+}, {
+  value: 76,
+  label: 'T'
+}, {
+  value: 79,
+  label: 'W',
+  highlight: true
+}, {
+  value: 74,
+  label: 'T'
+}, {
+  value: 68,
+  label: 'F'
+}, {
+  value: 61,
+  label: 'S',
+  color: _tokens.colors.zoneMid
+}, {
+  value: 70,
+  label: 'S'
+}];
+
+/** default bar gradient — cyan → accent, top to bottom (matches web 180deg) */
+const DEFAULT_GRADIENT = [_tokens.colors.cyan, _tokens.colors.accent];
+
+/** brighter mint gradient used for highlighted bars (when they have no `color`) */
+const HIGHLIGHT_GRADIENT = [_tokens.gradients.mint.stops[0], _tokens.gradients.mint.stops[1]];
+
+/* ----------------------------------------------------------------------------
+   Variant SVG geometry — ported from the design catalog runtime (catalog.js):
+   320×150 viewBox, plot inset l10 r12 t16 b14. The Svg scales uniformly via a
+   fixed-aspect container so the render matches the catalog card (and web).
+   -------------------------------------------------------------------------- */
+const VB_W = 320;
+const VB_H = 150;
+const PAD = {
+  l: 10,
+  r: 12,
+  t: 16,
+  b: 14
+};
+const PLOT_W = VB_W - PAD.l - PAD.r; // 298
+const PLOT_H = VB_H - PAD.t - PAD.b; // 120
+const BASE_Y = VB_H - PAD.b; // 136
+
+/** x-position spectrum (BC-04) + rank-row palette (BC-18) — lime→magenta. */
+const SPECTRUM = [_tokens.colors.lime, _tokens.colors.mint, _tokens.colors.cyan, _tokens.colors.indigo, _tokens.colors.violet, _tokens.colors.magenta];
+
+/** default stacked-segment / grouped-pair palette (bottom→top / left→right) */
+const SERIES_COLORS = [_tokens.colors.mint, _tokens.colors.violet, _tokens.colors.cyan];
+const clamp01 = v => Math.max(0, Math.min(1, v));
+/** catalog zone thresholds: ≥0.62 high · ≥0.38 mid · else low */
+const zoneOf = f => f >= 0.62 ? _tokens.colors.zoneHigh : f >= 0.38 ? _tokens.colors.zoneMid : _tokens.colors.zoneLow;
+const fx = n => Math.round(n * 10) / 10;
+const yOf = f => PAD.t + (1 - f) * PLOT_H;
+
+/**
+ * Stacked-segment path (BC-12): round ONLY the outer corners — `rTop` on the
+ * top segment, `rBottom` on the bottom one — internal seams stay square.
+ * Ported verbatim from the catalog path math (same string as web).
+ */
+function stackSegPath(x, yTop, w, h, rTop, rBottom) {
+  const rt = Math.min(rTop, h / 2);
+  const rb = Math.min(rBottom, h / 2);
+  return `M${fx(x)} ${fx(yTop + rt)}` + `a${rt} ${rt} 0 0 1 ${rt} ${-rt}` + `h${fx(w - 2 * rt)}` + `a${rt} ${rt} 0 0 1 ${rt} ${rt}` + `v${fx(h - rt - rb)}` + `a${rb} ${rb} 0 0 1 ${-rb} ${rb}` + `h${fx(-(w - 2 * rb))}` + `a${rb} ${rb} 0 0 1 ${-rb} ${-rb}z`;
+}
+
+/** mono in-plot label (catalog C.label — 8.5px JetBrains Mono, .06em) */
+function PlotLabel({
+  x,
+  y,
+  children,
+  color = _tokens.colors.textFaint,
+  anchor = 'middle'
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+    x: fx(x),
+    y: fx(y),
+    fill: color,
+    fontSize: 8.5,
+    fontFamily: _tokens.fonts.mono,
+    letterSpacing: 0.5,
+    textAnchor: anchor,
+    children: children
+  });
+}
+
+/** The catalog-variant SVG renderer (internal). */
+function VariantChart({
+  variant,
+  bars = DEFAULT_BARS,
+  max,
+  showValues,
+  color,
+  gradientStops,
+  glass,
+  series,
+  legend,
+  title,
+  goal,
+  forecastFrom,
+  waterfallStart,
+  shine,
+  grid,
+  style
+}) {
+  const uid = (0, _react.useId)();
+  const gid = `lk-bcv-g-${uid.replace(/[^a-zA-Z0-9]/g, '')}`;
+  const blurId = `lk-bcv-blur-${uid.replace(/[^a-zA-Z0-9]/g, '')}`;
+  const hasSeries = (series?.length ?? 0) > 0 && (series[0]?.length ?? 0) > 0;
+  const n = hasSeries ? series[0].length : bars.length;
+  const values = hasSeries ? [] : bars.map(b => b.value);
+
+  // denominator: `max` wins; else the largest visible value (stacked → bar totals)
+  let denom;
+  if (max != null) {
+    denom = max;
+  } else if (hasSeries && variant === 'stacked') {
+    const totals = series[0].map((_, i) => series.reduce((acc, s) => acc + (s[i] > 0 ? s[i] : 0), 0));
+    denom = Math.max(0, ...totals);
+  } else if (hasSeries) {
+    denom = Math.max(0, ...series.flat());
+  } else {
+    denom = Math.max(0, ...values);
+  }
+  if (!(denom > 0)) denom = 1;
+  const showGrid = grid ?? variant !== 'sparkbar-micro';
+  const bwFrac = variant === 'sparkbar-micro' ? 0.5 : 0.62;
+  const rx = variant === 'sparkbar-micro' ? 1 : 3;
+  const step = PLOT_W / Math.max(1, n);
+  const bw = step * bwFrac;
+  const bx = i => PAD.l + i * step + (step - bw) / 2;
+  const fillFor = (f, i) => {
+    if (gradientStops && gradientStops.length >= 2) return `url(#${gid})`;
+    if (variant === 'zone-bars') return zoneOf(f);
+    if (variant === 'spectrum-bars') return SPECTRUM[Math.min(SPECTRUM.length - 1, Math.floor(i / n * SPECTRUM.length))];
+    if (glass) return 'rgba(255,255,255,0.14)';
+    return color ?? (variant === 'lollipop' ? _tokens.colors.cyan : _tokens.colors.mint);
+  };
+  const seriesColor = k => legend?.[k]?.color ?? SERIES_COLORS[k] ?? _tokens.colors.accent;
+
+  // today-pulse: the flagged bar (last `highlight: true`), else the newest bar
+  let hlIdx = n - 1;
+  for (let i = bars.length - 1; i >= 0; i--) {
+    if (bars[i]?.highlight) {
+      hlIdx = i;
+      break;
+    }
+  }
+  const els = [];
+  if (variant === 'rank-rows') {
+    /* ---- horizontal ranked pills (BC-18) ---- */
+    const rows = [...bars].sort((a, b) => b.value - a.value).slice(0, 6);
+    const rh = PLOT_H / Math.max(1, rows.length);
+    rows.forEach((b, i) => {
+      const f = clamp01(b.value / denom);
+      const y = PAD.t + i * rh + rh * 0.22;
+      const hh = rh * 0.52;
+      els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+        x: 78,
+        y: fx(y),
+        width: fx((PLOT_W - 72) * f),
+        height: fx(hh),
+        rx: fx(hh / 2),
+        fill: SPECTRUM[i % SPECTRUM.length]
+      }, `r${i}`));
+      if (b.label) els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(PlotLabel, {
+        x: 74,
+        y: y + hh / 2 + 3,
+        color: _tokens.colors.textDim,
+        anchor: "end",
+        children: b.label
+      }, `rl${i}`));
+    });
+  } else if (variant === 'waterfall') {
+    /* ---- floating ± steps (BC-19): values are the running LEVEL ---- */
+    let lvl = clamp01((waterfallStart ?? values[0] ?? 0) / denom);
+    values.forEach((val, i) => {
+      const nl = clamp01(val / denom);
+      const y0 = yOf(Math.max(lvl, nl));
+      const hh = Math.abs(yOf(lvl) - yOf(nl));
+      els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+        x: fx(bx(i)),
+        y: fx(y0),
+        width: fx(bw),
+        height: fx(Math.max(2, hh)),
+        rx: 2,
+        fill: nl >= lvl ? _tokens.colors.mint : _tokens.colors.zoneLow,
+        opacity: 0.9
+      }, `w${i}`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+        x1: fx(bx(i) + bw),
+        x2: fx(bx(i) + bw + (step - bw)),
+        y1: fx(yOf(nl)),
+        y2: fx(yOf(nl)),
+        stroke: "rgba(255,255,255,0.25)",
+        strokeWidth: 1
+      }, `wc${i}`));
+      lvl = nl;
+    });
+  } else if (variant === 'stacked' && hasSeries) {
+    /* ---- stacked segments (BC-12): outer corners rounded, seams square ---- */
+    for (let i = 0; i < n; i++) {
+      const segs = series.map(s => s[i] > 0 ? s[i] : 0).filter(v => v > 0);
+      const sum = segs.reduce((acc, v) => acc + v, 0);
+      if (sum <= 0) continue;
+      const tot = clamp01(sum / denom) * PLOT_H;
+      let yCur = BASE_Y;
+      segs.forEach((segVal, si) => {
+        const sh = tot * (segVal / sum) - 1;
+        yCur -= sh + 1;
+        if (sh <= 0) return;
+        const rt = si === segs.length - 1 ? 3 : 0;
+        const rb = si === 0 ? 3 : 0;
+        els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: stackSegPath(bx(i), yCur, bw, sh, rt, rb),
+          fill: seriesColor(si),
+          opacity: 0.9
+        }, `s${i}-${si}`));
+      });
+    }
+  } else if (variant === 'grouped-pair' && hasSeries) {
+    /* ---- two series side-by-side (BC-14) ---- */
+    const gw = bw / 2 - 1;
+    for (let i = 0; i < n; i++) {
+      const fa = clamp01((series[0][i] ?? 0) / denom);
+      const fb = clamp01((series[1]?.[i] ?? 0) / denom);
+      els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+        x: fx(bx(i)),
+        y: fx(yOf(fa)),
+        width: fx(gw),
+        height: fx(BASE_Y - yOf(fa)),
+        rx: 2,
+        fill: seriesColor(0)
+      }, `ga${i}`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+        x: fx(bx(i) + gw + 2),
+        y: fx(yOf(fb)),
+        width: fx(gw),
+        height: fx(BASE_Y - yOf(fb)),
+        rx: 2,
+        fill: seriesColor(1),
+        opacity: 0.85
+      }, `gb${i}`));
+    }
+  } else {
+    /* ---- the standard per-bar loop (BC-01/04/05/08/11/15/16/17/20/22/24) ---- */
+    values.forEach((val, i) => {
+      const f = clamp01(val / denom);
+      const x = bx(i);
+      if (variant === 'diverging-tide') {
+        const mid = yOf(0.5);
+        const dv = f - 0.5;
+        const hh = Math.abs(dv) * PLOT_H;
+        els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+          x: fx(x),
+          y: fx(dv >= 0 ? mid - hh : mid),
+          width: fx(bw),
+          height: fx(Math.max(2, hh)),
+          rx: rx,
+          fill: dv >= 0 ? _tokens.colors.mint : _tokens.colors.zoneLow,
+          opacity: 0.92
+        }, `b${i}`));
+        return;
+      }
+      if (variant === 'lollipop') {
+        els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+          x1: fx(x + bw / 2),
+          x2: fx(x + bw / 2),
+          y1: BASE_Y,
+          y2: fx(yOf(f)),
+          stroke: fillFor(f, i),
+          strokeWidth: 2
+        }, `ls${i}`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+          cx: fx(x + bw / 2),
+          cy: fx(yOf(f)),
+          r: 3.4,
+          fill: fillFor(f, i)
+        }, `lh${i}`));
+        return;
+      }
+      let op = 1;
+      if (variant === 'fade-history') op = 0.25 + 0.75 * (n > 1 ? i / (n - 1) : 1);
+      if (variant === 'today-pulse') op = i === hlIdx ? 1 : 0.3;
+      if (variant === 'forecast-bars' && forecastFrom != null && i >= forecastFrom) {
+        els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+          x: fx(x),
+          y: fx(yOf(f)),
+          width: fx(bw),
+          height: fx(BASE_Y - yOf(f)),
+          rx: rx,
+          fill: "none",
+          stroke: fillFor(f, i),
+          strokeWidth: 1.4,
+          strokeDasharray: "4 3",
+          opacity: 0.8
+        }, `b${i}`));
+        return;
+      }
+      if (shine) els.push(
+      /*#__PURE__*/
+      // shine — a Gaussian-blurred duplicate bar behind the crisp one (the
+      // web `.lk-bcv-shine` blur(5px) underlay)
+      (0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+        x: fx(x),
+        y: fx(yOf(f)),
+        width: fx(bw),
+        height: fx(BASE_Y - yOf(f)),
+        rx: 4,
+        fill: fillFor(f, i),
+        opacity: 0.5,
+        filter: `url(#${blurId})`
+      }, `sh${i}`));
+      els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+        x: fx(x),
+        y: fx(yOf(f)),
+        width: fx(bw),
+        height: fx(Math.max(2, BASE_Y - yOf(f))),
+        rx: rx,
+        fill: fillFor(f, i),
+        opacity: op
+      }, `b${i}`));
+      if ((variant === 'value-caps' || showValues === true) && i % 2 === 0) els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(PlotLabel, {
+        x: x + bw / 2,
+        y: yOf(f) - 5,
+        children: String(Math.round(val))
+      }, `v${i}`));
+      const lab = bars[i]?.label;
+      if (lab != null && variant !== 'sparkbar-micro') els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(PlotLabel, {
+        x: x + bw / 2,
+        y: BASE_Y + 10,
+        children: lab
+      }, `l${i}`));
+    });
+  }
+
+  /* ---- context rules & markers ---- */
+  if (goal != null) {
+    const ty = yOf(clamp01(goal / denom));
+    els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+      x1: PAD.l,
+      x2: VB_W - PAD.r,
+      y1: fx(ty),
+      y2: fx(ty),
+      stroke: _tokens.colors.zoneMid,
+      strokeWidth: 1,
+      strokeDasharray: "5 4",
+      opacity: 0.85
+    }, "goal"), /*#__PURE__*/(0, _jsxRuntime.jsx)(PlotLabel, {
+      x: VB_W - PAD.r,
+      y: ty - 4,
+      color: _tokens.colors.zoneMid,
+      anchor: "end",
+      children: "GOAL"
+    }, "goal-l"));
+  }
+  if (variant === 'today-pulse' && values.length > 0) {
+    const f = clamp01((values[hlIdx] ?? 0) / denom);
+    const c = fillFor(f, hlIdx);
+    const cx = fx(bx(hlIdx) + bw / 2);
+    const cy = fx(yOf(f) - 6);
+    els.push(
+    /*#__PURE__*/
+    // glow — a Gaussian-blurred duplicate dot (the web `.lk-bcv-pulse-dot`
+    // drop-shadow(0 0 5px)); the pulse ring is static on native
+    (0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+      cx: cx,
+      cy: cy,
+      r: 5.1,
+      fill: c,
+      opacity: 0.8,
+      filter: `url(#${blurId})`
+    }, "pg"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+      cx: cx,
+      cy: cy,
+      r: 3.6,
+      fill: c
+    }, "pd"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+      cx: cx,
+      cy: cy,
+      r: 7,
+      fill: "none",
+      stroke: c,
+      strokeWidth: 1.4,
+      opacity: 0.35
+    }, "pr"));
+  }
+  if (variant === 'forecast-bars' && forecastFrom != null) {
+    const fxx = PAD.l + forecastFrom * step;
+    els.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+      x1: fx(fxx),
+      x2: fx(fxx),
+      y1: PAD.t - 2,
+      y2: BASE_Y,
+      stroke: "rgba(255,255,255,0.22)",
+      strokeWidth: 1
+    }, "now"), /*#__PURE__*/(0, _jsxRuntime.jsx)(PlotLabel, {
+      x: fxx,
+      y: PAD.t - 5,
+      color: _tokens.colors.textDim,
+      children: "NOW"
+    }, "now-l"));
+  }
+
+  /* ---- legend (top-right, right→left like the catalog) ---- */
+  const legendEls = [];
+  if (legend && legend.length > 0) {
+    let lx = VB_W - PAD.r - 2;
+    [...legend].reverse().forEach((item, i) => {
+      legendEls.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(PlotLabel, {
+        x: lx,
+        y: 11,
+        color: _tokens.colors.textDim,
+        anchor: "end",
+        children: item.label
+      }, `lg${i}`));
+      lx -= item.label.length * 5.6 + 8;
+      legendEls.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+        cx: fx(lx),
+        cy: 8.2,
+        r: 3,
+        fill: item.color
+      }, `lgd${i}`));
+      lx -= 8;
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.vroot, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${VB_W} ${VB_H}`,
+      children: [gradientStops && gradientStops.length >= 2 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.LinearGradient, {
+          id: gid,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: gradientStops.map((stop, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+            offset: i / (gradientStops.length - 1),
+            stopColor: stop
+          }, i))
+        })
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Filter, {
+          id: blurId,
+          filterUnits: "userSpaceOnUse",
+          x: -10,
+          y: -10,
+          width: VB_W + 20,
+          height: VB_H + 20,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.FeGaussianBlur, {
+            stdDeviation: 2.5
+          })
+        })
+      }), showGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [[0.25, 0.5, 0.75].map(f => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+          x1: PAD.l,
+          x2: VB_W - PAD.r,
+          y1: fx(PAD.t + PLOT_H * f),
+          y2: fx(PAD.t + PLOT_H * f),
+          stroke: "rgba(255,255,255,0.05)",
+          strokeWidth: 1
+        }, f)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+          x1: PAD.l,
+          x2: VB_W - PAD.r,
+          y1: BASE_Y,
+          y2: BASE_Y,
+          stroke: "rgba(255,255,255,0.09)",
+          strokeWidth: 1
+        })]
+      }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PlotLabel, {
+        x: PAD.l + 2,
+        y: 11,
+        anchor: "start",
+        children: title
+      }) : null, legendEls, els]
+    })
+  });
+}
+
+/**
+ * Generic vertical bar chart. Two modes:
+ *
+ * - **Classic (no `variant`)** — a flex row of columns, each a gradient-filled
+ *   bar sized by `value / max` of the chart area, with an optional value label
+ *   above and a mono/uppercase label below. Highlighted bars get a brighter
+ *   mint gradient + glow. Per-bar `color` overrides the shared `gradient`.
+ *   Defaults reproduce the weekday example.
+ * - **Catalog variant (`variant="…"`)** — an SVG chart on the design catalog's
+ *   320×150 geometry implementing the named BC-xx form (spectrum/zone fills,
+ *   lollipop, diverging, stacked with outer-corner-only rounding, grouped,
+ *   fade, today-pulse, rank rows, waterfall, goal rule, sparkbar, forecast).
+ *   BC-01's density SELECT is simply the number of bars passed (7 / 12 / 24).
+ *
+ * Tokens-driven. Same prop API as web.
+ */
+function BarChart(props) {
+  if (props.variant) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(VariantChart, {
+      ...props,
+      variant: props.variant
+    });
+  }
+  const {
+    bars = DEFAULT_BARS,
+    max,
+    height = 150,
+    showValues = true,
+    gradient = DEFAULT_GRADIENT,
+    style
+  } = props;
+  const ref = max ?? Math.max(0, ...bars.map(b => b.value));
+  const denom = ref > 0 ? ref : 1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.root, style],
+    children: bars.map((b, i) => {
+      const pct = Math.max(0, Math.min(1, b.value / denom));
+      const barHeight = pct * height;
+      const stops = b.highlight ? HIGHLIGHT_GRADIENT : gradient;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.col,
+        children: [showValues && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.val, b.highlight && styles.valHl],
+          children: b.value
+        }), b.color ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.bar, b.highlight && styles.barHl, {
+            height: barHeight,
+            backgroundColor: b.color
+          }]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoLinearGradient.LinearGradient, {
+          colors: stops,
+          start: {
+            x: 0,
+            y: 0
+          },
+          end: {
+            x: 0,
+            y: 1
+          },
+          style: [styles.bar, b.highlight && styles.barHl, {
+            height: barHeight
+          }]
+        }), b.label != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.label, b.highlight && styles.labelHl],
+          children: b.label
+        })]
+      }, i);
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 10
+  },
+  // catalog-variant container — fixed catalog aspect, scales to the width
+  vroot: {
+    width: '100%',
+    aspectRatio: VB_W / VB_H
+  },
+  col: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 8,
+    minWidth: 0
+  },
+  // value label above each bar
+  val: {
+    fontFamily: _tokens.fonts.mono,
+    fontSize: 11,
+    color: _tokens.colors.textDim
+  },
+  valHl: {
+    color: _tokens.colors.zoneHigh
+  },
+  // the bar itself — rounded top
+  bar: {
+    width: '100%',
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4,
+    borderWidth: 1,
+    borderColor: _tokens.colors.border
+  },
+  // highlighted bar — clears border + adds a soft mint glow
+  barHl: {
+    borderColor: 'transparent',
+    shadowColor: _tokens.colors.mint,
+    shadowOpacity: 0.22,
+    shadowRadius: 18,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    elevation: 8
+  },
+  // label below each bar
+  label: {
+    fontFamily: _tokens.fonts.mono,
+    fontSize: 10,
+    color: _tokens.colors.textFaint,
+    textTransform: 'uppercase',
+    letterSpacing: 0.4
+  },
+  labelHl: {
+    color: _tokens.colors.textDim
+  }
+});
+//# sourceMappingURL=BarChart.js.map