@lockin90/ui-native 0.0.0-stage → 1.0.0

package/lib/module/components/FunnelChart.js

@@ -0,0 +1,255 @@
+"use strict";
+
+import { useId } from 'react';
+import { View, StyleSheet } 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. */
+
+/* FN-05 — thin bars over previous-period ghost bars */
+
+/** FN-01 band fill SELECT: solid spectrum tokens vs faint glass fill. */
+
+/** One funnel stage, top (widest) → bottom. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* ---- 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];
+
+/* 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 = [{
+  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 => Math.round(n * 100) / 100;
+
+/** Conversion-zone color — the funnel catalog's thresholds (>0.6 / >0.4). */
+const zoneColor = frac => 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
+}) {
+  return /*#__PURE__*/_jsx(SvgText, {
+    x: rd(x),
+    y: rd(y),
+    fill: fill,
+    textAnchor: anchor,
+    fontSize: 8.5,
+    fontFamily: fonts.mono,
+    letterSpacing: 0.5,
+    children: children
+  });
+}
+
+/**
+ * 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
+}) {
+  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 => isZone ? zoneColor(frac[i]) : stages[i].color ?? STAGE_COLORS[i % STAGE_COLORS.length];
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "image",
+    accessibilityLabel: ariaLabel,
+    style: [styles.root, style],
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${W} ${H}`,
+      children: [shine ?
+      /*#__PURE__*/
+      /* 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. */
+      _jsx(Defs, {
+        children: /*#__PURE__*/_jsx(Filter, {
+          id: blurId,
+          filterUnits: "userSpaceOnUse",
+          x: -10,
+          y: -10,
+          width: W + 20,
+          height: H + 20,
+          children: /*#__PURE__*/_jsx(FeGaussianBlur, {
+            stdDeviation: 3
+          })
+        })
+      }) : null, title ? /*#__PURE__*/_jsx(Label, {
+        x: PAD.l + 2,
+        y: 11,
+        fill: colors.textFaint,
+        anchor: "start",
+        children: title
+      }) : 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 /*#__PURE__*/_jsxs(G, {
+          children: [/*#__PURE__*/_jsx(Label, {
+            x: PAD.l + 96,
+            y: cy + 3,
+            fill: colors.textDim,
+            anchor: "end",
+            children: stage.label
+          }), prevFrac != null ? /*#__PURE__*/_jsx(Rect, {
+            x: BAR_X,
+            y: rd(cy - 8),
+            width: rd(BAR_MAX_W * prevFrac),
+            height: 5,
+            rx: 2.5,
+            fill: GHOST_FILL
+          }) : null, shine ? /*#__PURE__*/_jsx(Rect, {
+            x: BAR_X,
+            y: barY,
+            width: rd(barW),
+            height: barH,
+            rx: barR,
+            fill: col,
+            opacity: 0.55,
+            filter: `url(#${blurId})`
+          }) : null, /*#__PURE__*/_jsx(Rect, {
+            x: BAR_X,
+            y: barY,
+            width: rd(barW),
+            height: barH,
+            rx: barR,
+            fill: col,
+            opacity: 0.92
+          }), /*#__PURE__*/_jsx(Label, {
+            x: PAD.l + 108 + barW,
+            y: cy + 3.5,
+            fill: col,
+            anchor: "start",
+            children: `${Math.round(frac[i] * 100)}%`
+          }), drop != null ? /*#__PURE__*/_jsx(Label, {
+            x: W - PAD.r - 2,
+            y: y + 3,
+            fill: colors.zoneLow,
+            anchor: "end",
+            children: `−${drop}%`
+          }) : null]
+        }, i);
+      }) : /* ---- 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 /*#__PURE__*/_jsxs(G, {
+          children: [shine ? /*#__PURE__*/_jsx(Path, {
+            d: d,
+            fill: col,
+            fillOpacity: glass ? 0.14 : 0.4,
+            stroke: col,
+            strokeWidth: strokeW,
+            strokeOpacity: 0.8,
+            filter: `url(#${blurId})`
+          }) : null, /*#__PURE__*/_jsx(Path, {
+            d: d,
+            fill: col,
+            fillOpacity: glass ? 0.14 : 0.4,
+            stroke: col,
+            strokeWidth: strokeW,
+            strokeOpacity: 0.8
+          }), /*#__PURE__*/_jsx(Label, {
+            x: cx,
+            y: (y0 + y1) / 2 + 3,
+            fill: glass ? col : colors.text,
+            children: `${stage.label} · ${Math.round(frac[i] * 100)}%`
+          })]
+        }, i);
+      }), isCompare && ghostLabel ? /*#__PURE__*/_jsx(Label, {
+        x: W - PAD.r - 2,
+        y: H - 2,
+        fill: colors.textFaint,
+        anchor: "end",
+        children: ghostLabel
+      }) : null]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  /* fixed catalog aspect (320×150); the Svg scales the viewBox to fit */
+  root: {
+    width: '100%',
+    aspectRatio: W / H
+  }
+});
+//# sourceMappingURL=FunnelChart.js.map

package/lib/module/components/FunnelChart.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useId","View","StyleSheet","Svg","Defs","FeGaussianBlur","Filter","G","Path","Rect","Text","SvgText","colors","fonts","jsx","_jsx","jsxs","_jsxs","W","H","PAD","l","r","t","b","PLOT_W","PLOT_H","BAND_MAX_W","BAR_X","BAR_MAX_W","STAGE_COLORS","cyan","mint","lime","zoneMid","GHOST_FILL","DEFAULT_STAGES","label","value","rd","n","Math","round","zoneColor","frac","zoneHigh","zoneLow","Label","x","y","fill","anchor","children","textAnchor","fontSize","fontFamily","mono","letterSpacing","FunnelChart","stages","variant","title","shine","ghostLabel","ariaLabel","style","uid","replace","blurId","isZone","isCompare","isBars","glass","base","length","map","s","max","min","colorOf","i","color","accessibilityRole","accessibilityLabel","styles","root","width","height","viewBox","id","filterUnits","stdDeviation","textFaint","stage","rh","cy","col","barW","barY","barH","barR","prevFrac","prev","drop","textDim","rx","opacity","filter","bh","y0","y1","cx","wTop","wBot","strokeW","d","fillOpacity","stroke","strokeWidth","strokeOpacity","text","create","aspectRatio"],"sourceRoot":"../../../src","sources":["components/FunnelChart.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Gauge.js

@@ -0,0 +1,249 @@
+"use strict";
+
+import { useId } from 'react';
+import { View, Text, StyleSheet } 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). */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function zoneColor01(t) {
+  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. */
+
+/** point on a circle at `cx,cy` radius `r` for screen-angle `deg`
+ *  (0° = 3 o'clock, growing clockwise). */
+function polar(cx, cy, r, deg) {
+  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, cy, r, startDeg, endDeg) {
+  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
+}) {
+  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 => 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((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 = [];
+  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 /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, {
+      width: size,
+      height: size
+    }, style],
+    children: [/*#__PURE__*/_jsxs(Svg, {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      children: [useGradient ? /*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsx(LinearGradient, {
+          id: gradId,
+          x1: "0",
+          y1: "0",
+          x2: "1",
+          y2: "0",
+          children: gradient.map((stopColor, i) => /*#__PURE__*/_jsx(Stop, {
+            offset: i / Math.max(1, gradient.length - 1),
+            stopColor: stopColor
+          }, i))
+        })
+      }) : null, shine && !hasZones ?
+      /*#__PURE__*/
+      /* 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. */
+      _jsx(Defs, {
+        children: /*#__PURE__*/_jsx(Filter, {
+          id: `${gradId}-blur`,
+          filterUnits: "userSpaceOnUse",
+          x: -12,
+          y: -12,
+          width: size + 24,
+          height: size + 24,
+          children: /*#__PURE__*/_jsx(FeGaussianBlur, {
+            stdDeviation: 3
+          })
+        })
+      }) : null, /*#__PURE__*/_jsx(Path, {
+        d: arcPath(cx, cy, r, startDeg, endDeg),
+        fill: "none",
+        stroke: colors.border,
+        strokeWidth: thickness,
+        strokeLinecap: "round"
+      }), bands.map((b, i) => /*#__PURE__*/_jsx(Path, {
+        d: arcPath(cx, cy, r, toAngle(b.from), toAngle(b.to)),
+        fill: "none",
+        stroke: b.color,
+        strokeWidth: thickness,
+        strokeLinecap: "round"
+      }, `band-${i}`)), shine && !hasZones && v > min ? /*#__PURE__*/_jsx(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, !hasZones && v > min ? /*#__PURE__*/_jsx(Path, {
+        d: arcPath(cx, cy, r, startDeg, valueAngle),
+        fill: "none",
+        stroke: arcStroke,
+        strokeWidth: thickness,
+        strokeLinecap: "round"
+      }) : null, tickMarks.map((deg, i) => {
+        const a = polar(cx, cy, tickOuter, deg);
+        const b = polar(cx, cy, tickInner, deg);
+        return /*#__PURE__*/_jsx(Line, {
+          x1: a.x,
+          y1: a.y,
+          x2: b.x,
+          y2: b.y,
+          stroke: colors.textFaint,
+          strokeWidth: 1.5,
+          strokeLinecap: "round"
+        }, `tick-${i}`);
+      }), cap && v > min ? /*#__PURE__*/_jsx(Circle, {
+        cx: capPt.x,
+        cy: capPt.y,
+        r: thickness / 2 + 1,
+        fill: colors.text,
+        stroke: capColor,
+        strokeWidth: 2
+      }) : null]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.center,
+      pointerEvents: "none",
+      children: children ?? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [showValue ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.value, zone ? {
+            color: solid
+          } : null],
+          children: Math.round(v)
+        }) : null, label ? /*#__PURE__*/_jsx(Text, {
+          style: styles.label,
+          children: label
+        }) : null]
+      })
+    })]
+  });
+}
+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'
+  }
+});
+//# sourceMappingURL=Gauge.js.map

package/lib/module/components/Gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useId","View","Text","StyleSheet","Svg","Path","Line","Circle","Defs","FeGaussianBlur","Filter","LinearGradient","Stop","colors","fonts","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","zoneColor01","t","zoneHigh","zoneMid","zoneLow","polar","cx","cy","r","deg","a","Math","PI","x","cos","y","sin","arcPath","startDeg","endDeg","start","end","large","toFixed","Gauge","value","min","max","size","thickness","sweep","zones","color","gradient","zone","shine","ticks","tickPosition","cap","label","showValue","children","style","uid","gradId","replace","span","sw","v","outPad","t01","useGradient","Array","isArray","solid","accent","arcStroke","capColor","length","toAngle","val","hasZones","bands","slice","sort","b","to","reduce","acc","z","prev","push","from","tickMarks","n","i","tickOuter","tickInner","valueAngle","capPt","styles","root","width","height","viewBox","id","x1","y1","x2","y2","map","stopColor","offset","filterUnits","stdDeviation","d","fill","stroke","border","strokeWidth","strokeLinecap","strokeOpacity","filter","textFaint","text","center","pointerEvents","round","create","position","alignItems","justifyContent","absoluteFillObject","gap","fontFamily","display","fontWeight","letterSpacing","lineHeight","fontSize","textAlign","mono","textTransform"],"sourceRoot":"../../../src","sources":["components/Gauge.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAwB,OAAO;AAC7C,SAASC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAwC,cAAc;AACrF,OAAOC,GAAG,IAAIC,IAAI,EAAEC,IAAI,EAAEC,MAAM,EAAEC,IAAI,EAAEC,cAAc,EAAEC,MAAM,EAAEC,cAAc,EAAEC,IAAI,QAAQ,kBAAkB;AAC9G,SAASC,MAAM,EAAEC,KAAK,QAAQ,kBAAkB;;AAEhD;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AACA,SAASC,WAAWA,CAACC,CAAS,EAAU;EACtC,OAAOA,CAAC,IAAI,IAAI,GAAGT,MAAM,CAACU,QAAQ,GAAGD,CAAC,IAAI,IAAI,GAAGT,MAAM,CAACW,OAAO,GAAGX,MAAM,CAACY,OAAO;AAClF;;AAEA;AACA;AACA;;AAwDA;AACA;AACA,SAASC,KAAKA,CAACC,EAAU,EAAEC,EAAU,EAAEC,CAAS,EAAEC,GAAW,EAAE;EAC7D,MAAMC,CAAC,GAAID,GAAG,GAAGE,IAAI,CAACC,EAAE,GAAI,GAAG;EAC/B,OAAO;IAAEC,CAAC,EAAEP,EAAE,GAAGE,CAAC,GAAGG,IAAI,CAACG,GAAG,CAACJ,CAAC,CAAC;IAAEK,CAAC,EAAER,EAAE,GAAGC,CAAC,GAAGG,IAAI,CAACK,GAAG,CAACN,CAAC;EAAE,CAAC;AAC7D;;AAEA;AACA,SAASO,OAAOA,CAACX,EAAU,EAAEC,EAAU,EAAEC,CAAS,EAAEU,QAAgB,EAAEC,MAAc,EAAE;EACpF,MAAMC,KAAK,GAAGf,KAAK,CAACC,EAAE,EAAEC,EAAE,EAAEC,CAAC,EAAEU,QAAQ,CAAC;EACxC,MAAMG,GAAG,GAAGhB,KAAK,CAACC,EAAE,EAAEC,EAAE,EAAEC,CAAC,EAAEW,MAAM,CAAC;EACpC,MAAMG,KAAK,GAAGH,MAAM,GAAGD,QAAQ,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;EAC7C,OAAO,KAAKE,KAAK,CAACP,CAAC,CAACU,OAAO,CAAC,CAAC,CAAC,IAAIH,KAAK,CAACL,CAAC,CAACQ,OAAO,CAAC,CAAC,CAAC,MAAMf,CAAC,IAAIA,CAAC,MAAMc,KAAK,MAAMD,GAAG,CAACR,CAAC,CAACU,OAAO,CAAC,CAAC,CAAC,IAAIF,GAAG,CAACN,CAAC,CAACQ,OAAO,CAAC,CAAC,CAAC,EAAE;AACzH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAKA,CAAC;EACpBC,KAAK;EACLC,GAAG,GAAG,CAAC;EACPC,GAAG,GAAG,GAAG;EACTC,IAAI,GAAG,GAAG;EACVC,SAAS,GAAG,EAAE;EACdC,KAAK,GAAG,GAAG;EACXC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,IAAI,GAAG,KAAK;EACZC,KAAK,GAAG,KAAK;EACbC,KAAK,GAAG,CAAC;EACTC,YAAY,GAAG,MAAM;EACrBC,GAAG,GAAG,IAAI;EACVC,KAAK;EACLC,SAAS,GAAG,IAAI;EAChBC,QAAQ;EACRC;AACU,CAAC,EAAE;EACb,MAAMC,GAAG,GAAGhE,KAAK,CAAC,CAAC;EACnB,MAAMiE,MAAM,GAAG,iBAAiBD,GAAG,CAACE,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,EAAE;EAElE,MAAMC,IAAI,GAAGnB,GAAG,GAAGD,GAAG,IAAI,CAAC;EAC3B,MAAMqB,EAAE,GAAGpC,IAAI,CAACgB,GAAG,CAAC,CAAC,EAAEhB,IAAI,CAACe,GAAG,CAAC,GAAG,EAAEI,KAAK,CAAC,CAAC;EAC5C,MAAMkB,CAAC,GAAGrC,IAAI,CAACgB,GAAG,CAACD,GAAG,EAAEf,IAAI,CAACe,GAAG,CAACC,GAAG,EAAEF,KAAK,CAAC,CAAC;EAE7C,MAAMnB,EAAE,GAAGsB,IAAI,GAAG,CAAC;EACnB,MAAMrB,EAAE,GAAGqB,IAAI,GAAG,CAAC;EACnB;EACA,MAAMqB,MAAM,GAAGZ,YAAY,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;EAC7C,MAAM7B,CAAC,GAAG,CAACoB,IAAI,GAAGC,SAAS,IAAI,CAAC,GAAGoB,MAAM;;EAEzC;EACA,MAAMC,GAAG,GAAG,CAACF,CAAC,GAAGtB,GAAG,IAAIoB,IAAI;EAC5B,MAAMK,WAAW,GAAGC,KAAK,CAACC,OAAO,CAACpB,QAAQ,CAAC,IAAI,CAACC,IAAI;EACpD,MAAMoB,KAAK,GAAGpB,IAAI,GACdlC,WAAW,CAACkD,GAAG,CAAC,GAChB,OAAOjB,QAAQ,KAAK,QAAQ,GAC1BA,QAAQ,GACPD,KAAK,IAAIxC,MAAM,CAAC+D,MAAO;EAC9B,MAAMC,SAAS,GAAGL,WAAW,GAAG,QAAQP,MAAM,GAAG,GAAGU,KAAK;EACzD;EACA,MAAMG,QAAQ,GAAGN,WAAW,GAAGlB,QAAQ,CAACA,QAAQ,CAACyB,MAAM,GAAG,CAAC,CAAC,GAAIJ,KAAK;;EAErE;EACA;EACA,MAAMpC,QAAQ,GAAG,EAAE,GAAG,CAAC,GAAG,GAAG6B,EAAE,IAAI,CAAC;EACpC,MAAM5B,MAAM,GAAGD,QAAQ,GAAG6B,EAAE;EAC5B;EACA,MAAMY,OAAO,GAAIC,GAAW,IAAK1C,QAAQ,GAAI,CAAC0C,GAAG,GAAGlC,GAAG,IAAIoB,IAAI,GAAIC,EAAE;EAErE,MAAMc,QAAQ,GAAGT,KAAK,CAACC,OAAO,CAACtB,KAAK,CAAC,IAAIA,KAAK,CAAC2B,MAAM,GAAG,CAAC;;EAEzD;EACA,MAAMI,KAAK,GAAGD,QAAQ,GAClB9B,KAAK,CACFgC,KAAK,CAAC,CAAC,CACPC,IAAI,CAAC,CAACtD,CAAC,EAAEuD,CAAC,KAAKvD,CAAC,CAACwD,EAAE,GAAGD,CAAC,CAACC,EAAE,CAAC,CAC3BC,MAAM,CAAgD,CAACC,GAAG,EAAEC,CAAC,KAAK;IACjE,MAAMC,IAAI,GAAGF,GAAG,CAACV,MAAM,GAAGU,GAAG,CAACA,GAAG,CAACV,MAAM,GAAG,CAAC,CAAC,CAAEQ,EAAE,GAAGxC,GAAG;IACvD,MAAMwC,EAAE,GAAGvD,IAAI,CAACgB,GAAG,CAACD,GAAG,EAAEf,IAAI,CAACe,GAAG,CAACC,GAAG,EAAE0C,CAAC,CAACH,EAAE,CAAC,CAAC;IAC7C,IAAIA,EAAE,GAAGI,IAAI,EAAEF,GAAG,CAACG,IAAI,CAAC;MAAEC,IAAI,EAAEF,IAAI;MAAEJ,EAAE;MAAElC,KAAK,EAAEqC,CAAC,CAACrC;IAAM,CAAC,CAAC;IAC3D,OAAOoC,GAAG;EACZ,CAAC,EAAE,EAAE,CAAC,GACR,EAAE;;EAEN;EACA,MAAMK,SAAmB,GAAG,EAAE;EAC9B,IAAIrC,KAAK,GAAG,CAAC,EAAE;IACb,MAAMsC,CAAC,GAAGtC,KAAK;IACf,KAAK,IAAIuC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,CAAC,EAAEC,CAAC,EAAE,EAAE;MAC1BF,SAAS,CAACF,IAAI,CAACrD,QAAQ,IAAIwD,CAAC,KAAK,CAAC,GAAG,CAAC,GAAIC,CAAC,IAAID,CAAC,GAAG,CAAC,CAAC,GAAI3B,EAAE,CAAC,CAAC;IAC/D;EACF;EACA;EACA,MAAM6B,SAAS,GAAGpE,CAAC,GAAGqB,SAAS,GAAG,CAAC,IAAIQ,YAAY,KAAK,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC;EACxE,MAAMwC,SAAS,GAAGxC,YAAY,KAAK,KAAK,GAAG7B,CAAC,GAAGqB,SAAS,GAAG,CAAC,GAAG,GAAG,GAAGrB,CAAC,GAAGqB,SAAS,GAAG,CAAC,GAAG,CAAC;EAE1F,MAAMiD,UAAU,GAAGnB,OAAO,CAACX,CAAC,CAAC;EAC7B,MAAM+B,KAAK,GAAG1E,KAAK,CAACC,EAAE,EAAEC,EAAE,EAAEC,CAAC,EAAEsE,UAAU,CAAC;EAE1C,oBACEjF,KAAA,CAACjB,IAAI;IAAC8D,KAAK,EAAE,CAACsC,MAAM,CAACC,IAAI,EAAE;MAAEC,KAAK,EAAEtD,IAAI;MAAEuD,MAAM,EAAEvD;IAAK,CAAC,EAAEc,KAAK,CAAE;IAAAD,QAAA,gBAC/D5C,KAAA,CAACd,GAAG;MAACmG,KAAK,EAAEtD,IAAK;MAACuD,MAAM,EAAEvD,IAAK;MAACwD,OAAO,EAAE,OAAOxD,IAAI,IAAIA,IAAI,EAAG;MAAAa,QAAA,GAC5DU,WAAW,gBACVxD,IAAA,CAACR,IAAI;QAAAsD,QAAA,eACH9C,IAAA,CAACL,cAAc;UAAC+F,EAAE,EAAEzC,MAAO;UAAC0C,EAAE,EAAC,GAAG;UAACC,EAAE,EAAC,GAAG;UAACC,EAAE,EAAC,GAAG;UAACC,EAAE,EAAC,GAAG;UAAAhD,QAAA,EACpDR,QAAQ,CAACyD,GAAG,CAAC,CAACC,SAAS,EAAEhB,CAAC,kBACzBhF,IAAA,CAACJ,IAAI;YAEHqG,MAAM,EAAEjB,CAAC,GAAGhE,IAAI,CAACgB,GAAG,CAAC,CAAC,EAAEM,QAAQ,CAACyB,MAAM,GAAG,CAAC,CAAE;YAC7CiC,SAAS,EAAEA;UAAU,GAFhBhB,CAGN,CACF;QAAC,CACY;MAAC,CACb,CAAC,GACL,IAAI,EACPxC,KAAK,IAAI,CAAC0B,QAAQ;MAAA;MACjB;AACV;AACA;MACUlE,IAAA,CAACR,IAAI;QAAAsD,QAAA,eACH9C,IAAA,CAACN,MAAM;UACLgG,EAAE,EAAE,GAAGzC,MAAM,OAAQ;UACrBiD,WAAW,EAAC,gBAAgB;UAC5BhF,CAAC,EAAE,CAAC,EAAG;UACPE,CAAC,EAAE,CAAC,EAAG;UACPmE,KAAK,EAAEtD,IAAI,GAAG,EAAG;UACjBuD,MAAM,EAAEvD,IAAI,GAAG,EAAG;UAAAa,QAAA,eAElB9C,IAAA,CAACP,cAAc;YAAC0G,YAAY,EAAE;UAAE,CAAE;QAAC,CAC7B;MAAC,CACL,CAAC,GACL,IAAI,eAGRnG,IAAA,CAACX,IAAI;QACH+G,CAAC,EAAE9E,OAAO,CAACX,EAAE,EAAEC,EAAE,EAAEC,CAAC,EAAEU,QAAQ,EAAEC,MAAM,CAAE;QACxC6E,IAAI,EAAC,MAAM;QACXC,MAAM,EAAEzG,MAAM,CAAC0G,MAAO;QACtBC,WAAW,EAAEtE,SAAU;QACvBuE,aAAa,EAAC;MAAO,CACtB,CAAC,EAGDtC,KAAK,CAAC4B,GAAG,CAAC,CAACzB,CAAC,EAAEU,CAAC,kBACdhF,IAAA,CAACX,IAAI;QAEH+G,CAAC,EAAE9E,OAAO,CAACX,EAAE,EAAEC,EAAE,EAAEC,CAAC,EAAEmD,OAAO,CAACM,CAAC,CAACO,IAAI,CAAC,EAAEb,OAAO,CAACM,CAAC,CAACC,EAAE,CAAC,CAAE;QACtD8B,IAAI,EAAC,MAAM;QACXC,MAAM,EAAEhC,CAAC,CAACjC,KAAM;QAChBmE,WAAW,EAAEtE,SAAU;QACvBuE,aAAa,EAAC;MAAO,GALhB,QAAQzB,CAAC,EAMf,CACF,CAAC,EAKDxC,KAAK,IAAI,CAAC0B,QAAQ,IAAIb,CAAC,GAAGtB,GAAG,gBAC5B/B,IAAA,CAACX,IAAI;QACH+G,CAAC,EAAE9E,OAAO,CAACX,EAAE,EAAEC,EAAE,EAAEC,CAAC,EAAEU,QAAQ,EAAE4D,UAAU,CAAE;QAC5CkB,IAAI,EAAC,MAAM;QACXC,MAAM,EAAEzC,SAAU;QAClB2C,WAAW,EAAEtE,SAAS,GAAG,CAAE;QAC3BwE,aAAa,EAAE,GAAI;QACnBD,aAAa,EAAC,OAAO;QACrBE,MAAM,EAAE,QAAQ1D,MAAM;MAAS,CAChC,CAAC,GACA,IAAI,EAGP,CAACiB,QAAQ,IAAIb,CAAC,GAAGtB,GAAG,gBACnB/B,IAAA,CAACX,IAAI;QACH+G,CAAC,EAAE9E,OAAO,CAACX,EAAE,EAAEC,EAAE,EAAEC,CAAC,EAAEU,QAAQ,EAAE4D,UAAU,CAAE;QAC5CkB,IAAI,EAAC,MAAM;QACXC,MAAM,EAAEzC,SAAU;QAClB2C,WAAW,EAAEtE,SAAU;QACvBuE,aAAa,EAAC;MAAO,CACtB,CAAC,GACA,IAAI,EAGP3B,SAAS,CAACiB,GAAG,CAAC,CAACjF,GAAG,EAAEkE,CAAC,KAAK;QACzB,MAAMjE,CAAC,GAAGL,KAAK,CAACC,EAAE,EAAEC,EAAE,EAAEqE,SAAS,EAAEnE,GAAG,CAAC;QACvC,MAAMwD,CAAC,GAAG5D,KAAK,CAACC,EAAE,EAAEC,EAAE,EAAEsE,SAAS,EAAEpE,GAAG,CAAC;QACvC,oBACEd,IAAA,CAACV,IAAI;UAEHqG,EAAE,EAAE5E,CAAC,CAACG,CAAE;UACR0E,EAAE,EAAE7E,CAAC,CAACK,CAAE;UACRyE,EAAE,EAAEvB,CAAC,CAACpD,CAAE;UACR4E,EAAE,EAAExB,CAAC,CAAClD,CAAE;UACRkF,MAAM,EAAEzG,MAAM,CAAC+G,SAAU;UACzBJ,WAAW,EAAE,GAAI;UACjBC,aAAa,EAAC;QAAO,GAPhB,QAAQzB,CAAC,EAQf,CAAC;MAEN,CAAC,CAAC,EAGDrC,GAAG,IAAIU,CAAC,GAAGtB,GAAG,gBACb/B,IAAA,CAACT,MAAM;QACLoB,EAAE,EAAEyE,KAAK,CAAClE,CAAE;QACZN,EAAE,EAAEwE,KAAK,CAAChE,CAAE;QACZP,CAAC,EAAEqB,SAAS,GAAG,CAAC,GAAG,CAAE;QACrBmE,IAAI,EAAExG,MAAM,CAACgH,IAAK;QAClBP,MAAM,EAAExC,QAAS;QACjB0C,WAAW,EAAE;MAAE,CAChB,CAAC,GACA,IAAI;IAAA,CACL,CAAC,eAENxG,IAAA,CAACf,IAAI;MAAC8D,KAAK,EAAEsC,MAAM,CAACyB,MAAO;MAACC,aAAa,EAAC,MAAM;MAAAjE,QAAA,EAC7CA,QAAQ,iBACP5C,KAAA,CAAAE,SAAA;QAAA0C,QAAA,GACGD,SAAS,gBACR7C,IAAA,CAACd,IAAI;UAAC6D,KAAK,EAAE,CAACsC,MAAM,CAACvD,KAAK,EAAES,IAAI,GAAG;YAAEF,KAAK,EAAEsB;UAAM,CAAC,GAAG,IAAI,CAAE;UAAAb,QAAA,EACzD9B,IAAI,CAACgG,KAAK,CAAC3D,CAAC;QAAC,CACV,CAAC,GACL,IAAI,EACPT,KAAK,gBAAG5C,IAAA,CAACd,IAAI;UAAC6D,KAAK,EAAEsC,MAAM,CAACzC,KAAM;UAAAE,QAAA,EAAEF;QAAK,CAAO,CAAC,GAAG,IAAI;MAAA,CACzD;IACH,CACG,CAAC;EAAA,CACH,CAAC;AAEX;AAEA,MAAMyC,MAAM,GAAGlG,UAAU,CAAC8H,MAAM,CAAC;EAC/B3B,IAAI,EAAE;IAAE4B,QAAQ,EAAE,UAAU;IAAEC,UAAU,EAAE,QAAQ;IAAEC,cAAc,EAAE;EAAS,CAAC;EAC9EN,MAAM,EAAE;IACN,GAAG3H,UAAU,CAACkI,kBAAkB;IAChCF,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBE,GAAG,EAAE;EACP,CAAC;EACDxF,KAAK,EAAE;IACLyF,UAAU,EAAEzH,KAAK,CAAC0H,OAAO;IACzBC,UAAU,EAAE,KAAK;IACjBC,aAAa,EAAE,CAAC,CAAC;IACjBC,UAAU,EAAE,EAAE;IACdC,QAAQ,EAAE,EAAE;IACZvF,KAAK,EAAExC,MAAM,CAACgH,IAAI;IAClBgB,SAAS,EAAE;EACb,CAAC;EACDjF,KAAK,EAAE;IACL2E,UAAU,EAAEzH,KAAK,CAACgI,IAAI;IACtBF,QAAQ,EAAE,IAAI;IACdF,aAAa,EAAE,GAAG;IAClBK,aAAa,EAAE,WAAW;IAC1B1F,KAAK,EAAExC,MAAM,CAAC+G,SAAS;IACvBiB,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/GradientText.js

@@ -0,0 +1,130 @@
+"use strict";
+
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, StyleSheet, Text } from 'react-native';
+import Svg, { Defs, LinearGradient, Stop, Text as SvgText } from 'react-native-svg';
+import { gradients, fonts } from '@lockin90/tokens';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+
+/** Stop colors for the gradient fill. `still` uses the plain spectrum; animated
+ *  uses a MIRRORED spectrum (…→last→…back through the same hues→first) spanning
+ *  2× the width, so scrolling it by one width per loop is seamless — the return
+ *  leg never jumps last-stop→first-stop (e.g. flux's lime→magenta).
+ *  (Pure — extracted from the render path so the stop math is unit-testable.) */
+export function gradientTextStops(stops, still) {
+  return still ? [...stops] : [...stops, ...stops.slice(0, -1).reverse()];
+}
+/** Energy-spectrum gradient text with a slow flowing animation (native twin of the
+ *  web `.lk-gradient-text`, which scrolls `background-position` over 9s). Renders the
+ *  string into an SVG with a real linear-gradient fill (react-native-svg works on
+ *  device + react-native-web); measures the laid-out text first, then draws to it.
+ *  The gradient uses a MIRRORED spectrum spanning 2× the width; scrolling it by one
+ *  width per loop makes the flow seamless (the return leg passes back through the
+ *  same hues, so it never jumps lime→magenta). */
+export function GradientText({
+  gradient = 'flux',
+  still = false,
+  style,
+  children,
+  ...rest
+}) {
+  const [size, setSize] = useState(null);
+  const anim = useRef(new Animated.Value(0)).current;
+  const g = gradients[gradient] ?? gradients.flux;
+
+  // slow linear loop; drives the gradient window's horizontal scroll. useNativeDriver
+  // is false because SVG gradient coords aren't native-drivable — fine at this low rate.
+  useEffect(() => {
+    if (!size || still) return;
+    const loop = Animated.loop(Animated.timing(anim, {
+      toValue: 1,
+      duration: 9000,
+      easing: Easing.linear,
+      useNativeDriver: false
+    }));
+    loop.start();
+    return () => loop.stop();
+  }, [size, still, anim]);
+  const flat = StyleSheet.flatten(style) ?? {};
+  const fontSize = typeof flat.fontSize === 'number' ? flat.fontSize : 28;
+  const fontWeight = String(flat.fontWeight ?? '700');
+  const fontFamily = typeof flat.fontFamily === 'string' ? flat.fontFamily : fonts.display;
+  const letterSpacing = typeof flat.letterSpacing === 'number' ? flat.letterSpacing : undefined;
+  const text = typeof children === 'string' || typeof children === 'number' ? String(children) : '';
+
+  // Horizontal breathing room: react-native-svg lays glyphs out slightly wider than RN's Text
+  // measurement (worse with bold display fonts + negative letterSpacing), so a tight SVG width
+  // clips the last glyph. Pad both sides and draw the text CENTERED (text-anchor middle) so it
+  // never clips left or right regardless of the measurement gap.
+  const pad = Math.max(3, Math.round(fontSize * 0.14));
+
+  // pass 1 — lay out the real text (hidden) to measure it; pass 2 draws the SVG
+  if (!size || !text) {
+    return /*#__PURE__*/_jsx(Text, {
+      ...rest,
+      onLayout: e => {
+        const {
+          width,
+          height
+        } = e.nativeEvent.layout;
+        if (width && height) setSize({
+          w: Math.ceil(width) + pad * 2,
+          h: Math.ceil(height)
+        });
+      }
+      // alignSelf:'flex-start' so the hidden measurer shrinks to the glyphs' INTRINSIC
+      // width instead of stretching to the parent (which made the SVG full-width and
+      // drew the centered text mid-container). Intrinsic width → the gradient SVG is
+      // glyph-sized and follows the parent's alignment (left under a left-aligned head).
+      ,
+      style: [style, text ? {
+        opacity: 0,
+        alignSelf: 'flex-start'
+      } : null],
+      children: children
+    });
+  }
+  const id = `lk-gt-${gradient}`;
+  // The gradient window is 2× the text width; scroll it left by one width over the loop.
+  const x1 = still ? 0 : anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -size.w]
+  });
+  const x2 = still ? size.w : anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [2 * size.w, size.w]
+  });
+  // still → plain spectrum; animated → mirrored spectrum (seamless loop).
+  const stops = gradientTextStops(g.stops, still);
+  return /*#__PURE__*/_jsxs(Svg, {
+    width: size.w,
+    height: size.h,
+    accessibilityLabel: text,
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: /*#__PURE__*/_jsx(AnimatedLinearGradient, {
+        id: id,
+        gradientUnits: "userSpaceOnUse",
+        x1: x1,
+        y1: 0,
+        x2: x2,
+        y2: 0,
+        children: stops.map((c, i) => /*#__PURE__*/_jsx(Stop, {
+          offset: i / (stops.length - 1),
+          stopColor: c
+        }, i))
+      })
+    }), /*#__PURE__*/_jsx(SvgText, {
+      fill: `url(#${id})`,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      fontFamily: fontFamily,
+      letterSpacing: letterSpacing,
+      textAnchor: "middle",
+      x: size.w / 2,
+      y: size.h * 0.78,
+      children: text
+    })]
+  });
+}
+//# sourceMappingURL=GradientText.js.map