@fairmint/ui 0.2.31 → 0.2.32

package/dist/fairmint-ui.js

@@ -44998,6 +44998,526 @@ function EquityGrantCard({
     }
   );
 }
+const DEFAULT_RIBBON_CONFIG = {
+  baseline: 0.82,
+  xEndStagger: 9e-3,
+  xEndDraw: [0.84, 0.849, 0.858, 0.867, 0.876],
+  xEndCurve: 0.914,
+  xStart: [0.05, 0.19, 0.34, 0.5, 0.66],
+  kArr: [1.7, 2.4, 3.1, 3.9, 4.9],
+  V: [0.082, 0.102, 0.132, 0.172, 0.21],
+  vMin: [0.038, 0.04, 0.042, 0.044, 0.046],
+  xStem: [0.05, 0.04, 0.035, 0.03, 0.025],
+  labelX: [0.08, 0.24, 0.4, 0.56, 0.8],
+  labelAboveGap: [0.034, 0.03, 0.028, 0.024],
+  labelLeftGap: 0.055,
+  labelLiquidityGap: 0.016,
+  labelNudge: [
+    [0, 0],
+    [0, 0],
+    [0, 0],
+    [0, 0],
+    [0, -0.012]
+  ],
+  samples: 72
+};
+const MARK_RIBBON_RIGHT_EDGE = 0.936;
+const MARK_FIT_HORIZONTAL_COMPRESS = 0.78;
+const MARK_RIBBON_CONFIG = {
+  ...DEFAULT_RIBBON_CONFIG,
+  baseline: 0.97,
+  xEndDraw: [
+    MARK_RIBBON_RIGHT_EDGE,
+    MARK_RIBBON_RIGHT_EDGE,
+    MARK_RIBBON_RIGHT_EDGE,
+    MARK_RIBBON_RIGHT_EDGE,
+    MARK_RIBBON_RIGHT_EDGE
+  ],
+  xEndCurve: 0.94,
+  xStart: [0.08, 0.2, 0.32, 0.44, 0.56],
+  xStem: [0.028, 0.022, 0.018, 0.015, 0.012]
+};
+function labelGapAbove(i, config2) {
+  const lastBand = config2.xStart.length - 1;
+  if (i === lastBand) return config2.labelLiquidityGap;
+  return config2.labelAboveGap[i] ?? config2.labelLiquidityGap;
+}
+function mergeBounds(a, b) {
+  return {
+    minX: Math.min(a.minX, b.minX),
+    minY: Math.min(a.minY, b.minY),
+    maxX: Math.max(a.maxX, b.maxX),
+    maxY: Math.max(a.maxY, b.maxY)
+  };
+}
+function transformPathD(d, scaleX, scaleY, tx, ty) {
+  return d.replace(/(-?[\d.]+),(-?[\d.]+)/g, (_, x, y) => {
+    const px2 = Number(x) * scaleX + tx;
+    const py = Number(y) * scaleY + ty;
+    return `${px2.toFixed(1)},${py.toFixed(1)}`;
+  });
+}
+function computeMarkFitTransform(bounds, width, height, paddingRatio) {
+  const pad = paddingRatio * Math.min(width, height);
+  const bw = bounds.maxX - bounds.minX;
+  const bh = bounds.maxY - bounds.minY;
+  if (bw <= 0 || bh <= 0) {
+    return { scaleX: 1, scaleY: 1, tx: 0, ty: 0 };
+  }
+  const scaleY = (height - pad * 2) / bh;
+  let scaleX = scaleY * MARK_FIT_HORIZONTAL_COMPRESS;
+  if (bw * scaleX > width - pad * 2) {
+    scaleX = (width - pad * 2) / bw;
+  }
+  const tx = (width - bw * scaleX) / 2 - bounds.minX * scaleX;
+  const ty = (height - bh * scaleY) / 2 - bounds.minY * scaleY;
+  return { scaleX, scaleY, tx, ty };
+}
+function valAt(i, xf, config2) {
+  const { xStart, xEndCurve, kArr, V, vMin, xStem } = config2;
+  const xLo = xStart[i] - xStem[i];
+  if (xf < xLo || xf > xEndCurve) return 0;
+  if (xf < xStart[i]) return vMin[i];
+  const u = (xf - xStart[i]) / (xEndCurve - xStart[i]);
+  const grow = (Math.exp(kArr[i] * u) - 1) / (Math.exp(kArr[i]) - 1);
+  return vMin[i] + (V[i] - vMin[i]) * grow;
+}
+function cumBelow(i, xf, config2) {
+  let sum = 0;
+  for (let j = 0; j < i; j++) sum += valAt(j, xf, config2);
+  return sum;
+}
+function buildBandPath(i, width, height, config2) {
+  const { xStart, xEndCurve, xStem, baseline } = config2;
+  const samples = Math.max(1, Math.floor(config2.samples));
+  const xLo = xStart[i] - xStem[i];
+  const top = [];
+  const bot = [];
+  for (let s = 0; s <= samples; s++) {
+    const xf = xLo + (xEndCurve - xLo) * (s / samples);
+    const below = cumBelow(i, xf, config2);
+    const v = valAt(i, xf, config2);
+    const x = xf * width;
+    top.push([x, (baseline - below - v) * height]);
+    bot.push([x, (baseline - below) * height]);
+  }
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const [x, y] of [...top, ...bot]) {
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  }
+  let d = `M${top[0][0].toFixed(1)},${top[0][1].toFixed(1)}`;
+  for (let s = 1; s <= samples; s++) {
+    d += ` L${top[s][0].toFixed(1)},${top[s][1].toFixed(1)}`;
+  }
+  d += ` L${bot[samples][0].toFixed(1)},${bot[samples][1].toFixed(1)}`;
+  for (let s = samples - 1; s >= 0; s--) {
+    d += ` L${bot[s][0].toFixed(1)},${bot[s][1].toFixed(1)}`;
+  }
+  return { d: `${d} Z`, bounds: { minX, minY, maxX, maxY } };
+}
+function buildLabel(i, text, _width, _height, config2, offsetXNorm) {
+  const { baseline, xStart, xStem, labelNudge } = config2;
+  const xf = xStart[i] - xStem[i] + offsetXNorm;
+  const below = cumBelow(i, xf, config2);
+  const v = valAt(i, xf, config2);
+  const yTop = baseline - below - v;
+  const [nudgeX, nudgeY] = labelNudge[i];
+  return {
+    index: i,
+    text,
+    leftPct: (xf + nudgeX) * 100,
+    topPct: (yTop - labelGapAbove(i, config2) + nudgeY) * 100,
+    placement: "start"
+  };
+}
+function clampBandCount(count2, max2 = 5) {
+  if (!Number.isFinite(count2)) return max2;
+  return Math.min(max2, Math.max(1, Math.round(count2)));
+}
+function buildRibbonGeometry(width, height, labels, config2 = DEFAULT_RIBBON_CONFIG, bandCount = config2.xStart.length, layout = "hero") {
+  const totalBands = config2.xStart.length;
+  const visibleBands = clampBandCount(bandCount, totalBands);
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  const paths = [];
+  const clipWidthPx = [];
+  let bounds = null;
+  for (let i = 0; i < visibleBands; i++) {
+    const band = buildBandPath(i, width, height, config2);
+    paths.push(band.d);
+    clipWidthPx.push(config2.xEndDraw[i] * width);
+    bounds = bounds ? mergeBounds(bounds, band.bounds) : band.bounds;
+  }
+  let fitPaths = paths;
+  let fitClips = clipWidthPx;
+  let offsetXNorm = 0;
+  if (bounds) {
+    if (layout === "mark") {
+      const { scaleX, scaleY, tx, ty } = computeMarkFitTransform(bounds, width, height, 0.05);
+      fitPaths = paths.map((p) => transformPathD(p, scaleX, scaleY, tx, ty));
+      const alignedClipRight = MARK_RIBBON_RIGHT_EDGE * width * scaleX + tx;
+      fitClips = clipWidthPx.map(() => alignedClipRight);
+      offsetXNorm = tx / width;
+    } else if (layout === "hero") {
+      const bw = bounds.maxX - bounds.minX;
+      const tx = (width - bw) / 2 - bounds.minX;
+      fitPaths = paths.map((p) => transformPathD(p, 1, 1, tx, 0));
+      fitClips = clipWidthPx.map((w) => w + tx);
+      offsetXNorm = tx / width;
+    }
+  }
+  const paddedLabels = Array.from({ length: visibleBands }, (_, i) => labels[i] ?? "");
+  const builtLabels = paddedLabels.map(
+    (text, i) => buildLabel(i, text, width, height, config2, offsetXNorm)
+  );
+  return {
+    paths: fitPaths,
+    clipWidthPx: fitClips,
+    labels: builtLabels,
+    width,
+    height,
+    bandCount: visibleBands
+  };
+}
+function easePower1InOut(t) {
+  const p = Math.max(0, Math.min(1, t));
+  return p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2;
+}
+function easePower2Out(t) {
+  const p = Math.max(0, Math.min(1, t));
+  return 1 - (1 - p) ** 2;
+}
+function ribbonLabelRevealTime(labelIndex, duration2, config2 = DEFAULT_RIBBON_CONFIG) {
+  return Math.min(duration2, config2.labelX[labelIndex] * duration2 + 0.25);
+}
+const ribbonChartLabelDefault = "#FFFFFF";
+const ribbonChartSurface = {
+  white: "#FFFFFF",
+  black: "#0D1023"
+};
+const ribbonBandGradientStops = [
+  { idSuffix: "0", start: "#33198C", end: "#5B2BF0" },
+  { idSuffix: "1", start: "#4A22C8", end: "#7A3DF5" },
+  { idSuffix: "2", start: "#6A32E8", end: "#9A6BFF" },
+  { idSuffix: "3", start: "#8A52F5", end: "#BD84FF" },
+  { idSuffix: "4", start: "#A86BFF", end: "#E6ABFF" }
+];
+const RIBBON_BACKGROUND_CLASS = {
+  white: "fairmint-equity-ribbon--bg-white",
+  black: "fairmint-equity-ribbon--bg-black",
+  transparent: "fairmint-equity-ribbon--bg-transparent"
+};
+const DEFAULT_RIBBON_LABELS = [
+  "Cap Table",
+  "Fundraising",
+  "Grants",
+  "Secondaries",
+  "Liquidity"
+];
+const RIBBON_BAND_GRADIENTS = ribbonBandGradientStops;
+const RIBBON_SURFACE_CSS_VARS = {
+  "--fairmint-ribbon-surface-white": ribbonChartSurface.white,
+  "--fairmint-ribbon-surface-black": ribbonChartSurface.black
+};
+const REVEAL_DURATION_MS = 2300;
+const REVEAL_DELAY_MS = 420;
+function labelAnchorTransform(_placement, yOffsetPx) {
+  return `translate(0, calc(-100% + ${yOffsetPx}px))`;
+}
+function labelClassName(_placement) {
+  return "fairmint-equity-ribbon__label fairmint-equity-ribbon__label--start";
+}
+function resolveGradients(gradients, bandCount) {
+  const source = gradients ?? RIBBON_BAND_GRADIENTS;
+  return Array.from({ length: bandCount }, (_, i) => {
+    const fallback = RIBBON_BAND_GRADIENTS[i] ?? RIBBON_BAND_GRADIENTS[RIBBON_BAND_GRADIENTS.length - 1];
+    const g = source[i] ?? fallback;
+    return {
+      idSuffix: String(i),
+      start: g.start,
+      end: g.end
+    };
+  });
+}
+function EquityRibbonChart({
+  labels = DEFAULT_RIBBON_LABELS,
+  bandCount: bandCountProp = 5,
+  gradients,
+  animated = true,
+  hideLabels = false,
+  background = "transparent",
+  layout = "hero",
+  labelColor = ribbonChartLabelDefault,
+  className,
+  height,
+  style
+}) {
+  const bandCount = clampBandCount(bandCountProp);
+  const labelsKey = labels.join("
");
+  const labelsRef = useRef(labels);
+  labelsRef.current = labels;
+  const bandGradients = resolveGradients(gradients, bandCount);
+  const uid = useId$2().replace(/:/g, "");
+  const rootRef = useRef(null);
+  const playedRef = useRef(false);
+  const rafRef = useRef(null);
+  const revealGenerationRef = useRef(0);
+  const revealScheduleRef = useRef(0);
+  const cancelRevealAnimation = useCallback(() => {
+    revealGenerationRef.current += 1;
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  }, []);
+  const [geometry, setGeometry] = useState(null);
+  const [revealWidth, setRevealWidth] = useState(0);
+  const [labelStyles, setLabelStyles] = useState(
+    () => labels.slice(0, bandCount).map(() => ({ opacity: 0, transform: "translateY(6px)" }))
+  );
+  const rebuild = useCallback(() => {
+    cancelRevealAnimation();
+    const el = rootRef.current;
+    if (!el) return;
+    const width = el.clientWidth;
+    const heightPx = el.clientHeight;
+    const config2 = layout === "mark" ? MARK_RIBBON_CONFIG : void 0;
+    const built = buildRibbonGeometry(
+      width,
+      heightPx,
+      labelsRef.current,
+      config2,
+      bandCount,
+      layout
+    );
+    setGeometry(built);
+    if (built && (playedRef.current || !animated)) {
+      setRevealWidth(built.width);
+      setLabelStyles(
+        built.labels.map((lbl) => ({
+          opacity: 1,
+          transform: labelAnchorTransform(lbl.placement, 0)
+        }))
+      );
+    }
+  }, [animated, bandCount, cancelRevealAnimation, labelsKey, layout]);
+  useLayoutEffect(() => {
+    playedRef.current = false;
+    revealScheduleRef.current = 0;
+    cancelRevealAnimation();
+    if (animated) {
+      setRevealWidth(0);
+      setLabelStyles(
+        labelsRef.current.slice(0, bandCount).map(() => ({
+          opacity: 0,
+          transform: "translateY(6px)"
+        }))
+      );
+    }
+    rebuild();
+  }, [animated, bandCount, cancelRevealAnimation, rebuild]);
+  useEffect(() => () => cancelRevealAnimation(), [cancelRevealAnimation]);
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    if (typeof ResizeObserver === "undefined") {
+      rebuild();
+      return;
+    }
+    const ro = new ResizeObserver(() => {
+      rebuild();
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [rebuild]);
+  const runReveal = useCallback(() => {
+    if (!geometry || playedRef.current) return;
+    if (!animated) {
+      playedRef.current = true;
+      setRevealWidth(geometry.width);
+      setLabelStyles(
+        geometry.labels.map((lbl) => ({
+          opacity: 1,
+          transform: labelAnchorTransform(lbl.placement, 0)
+        }))
+      );
+      return;
+    }
+    const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      playedRef.current = true;
+      setRevealWidth(geometry.width);
+      setLabelStyles(
+        geometry.labels.map((lbl) => ({
+          opacity: 1,
+          transform: labelAnchorTransform(lbl.placement, 0)
+        }))
+      );
+      return;
+    }
+    playedRef.current = true;
+    setRevealWidth(0);
+    setLabelStyles(
+      geometry.labels.map((lbl) => ({
+        opacity: 0,
+        transform: labelAnchorTransform(lbl.placement, 6)
+      }))
+    );
+    const generation = revealGenerationRef.current;
+    const start = performance.now();
+    const tick = (now) => {
+      if (generation !== revealGenerationRef.current) return;
+      const elapsed = now - start;
+      const t = Math.min(1, elapsed / REVEAL_DURATION_MS);
+      const eased = easePower1InOut(t);
+      setRevealWidth(geometry.width * eased);
+      setLabelStyles(
+        geometry.labels.map((lbl, i) => {
+          const labelStart = ribbonLabelRevealTime(i, REVEAL_DURATION_MS / 1e3) * 1e3;
+          const labelDur = 550;
+          const lt2 = Math.min(1, Math.max(0, (elapsed - labelStart) / labelDur));
+          const lo = easePower2Out(lt2);
+          const y = 6 * (1 - lo);
+          return { opacity: lo, transform: labelAnchorTransform(lbl.placement, y) };
+        })
+      );
+      if (t < 1) {
+        rafRef.current = requestAnimationFrame(tick);
+      } else {
+        setRevealWidth(geometry.width);
+        setLabelStyles(
+          geometry.labels.map((lbl) => ({
+            opacity: 1,
+            transform: labelAnchorTransform(lbl.placement, 0)
+          }))
+        );
+      }
+    };
+    rafRef.current = requestAnimationFrame(tick);
+  }, [animated, geometry]);
+  useEffect(() => {
+    if (!geometry || playedRef.current) return;
+    const scheduleId = ++revealScheduleRef.current;
+    const delay = scheduleId === 1 ? REVEAL_DELAY_MS : 0;
+    const timer = window.setTimeout(() => {
+      if (scheduleId !== revealScheduleRef.current) return;
+      runReveal();
+    }, delay);
+    return () => window.clearTimeout(timer);
+  }, [geometry, runReveal]);
+  const suppressLabels = hideLabels || layout === "mark";
+  const activeGeometry = geometry && geometry.bandCount === bandCount ? geometry : null;
+  const rootClass = [
+    "fairmint-equity-ribbon",
+    RIBBON_BACKGROUND_CLASS[background],
+    layout === "mark" ? "fairmint-equity-ribbon--layout-mark" : "",
+    suppressLabels ? "fairmint-equity-ribbon--hidden-labels" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const rootStyle = {
+    ...RIBBON_SURFACE_CSS_VARS,
+    ...style,
+    ...height ? { height } : {}
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: rootClass, style: rootStyle, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "fairmint-equity-ribbon__svg",
+        preserveAspectRatio: "none",
+        "aria-hidden": "true",
+        viewBox: activeGeometry ? `0 0 ${activeGeometry.width} ${activeGeometry.height}` : "0 0 1 1",
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            bandGradients.map((g) => /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: `${uid}-bg${g.idSuffix}`,
+                x1: "0",
+                y1: "1",
+                x2: "1",
+                y2: "0",
+                children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: g.start }),
+                  /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: g.end })
+                ]
+              },
+              g.idSuffix
+            )),
+            /* @__PURE__ */ jsx("clipPath", { id: `${uid}-revealclip`, children: /* @__PURE__ */ jsx("rect", { x: 0, y: -1, width: revealWidth, height: (activeGeometry?.height ?? 1) + 2 }) }),
+            activeGeometry ? activeGeometry.paths.map((_, i) => /* @__PURE__ */ jsx("clipPath", { id: `${uid}-bandclip${i}`, children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: 0,
+                y: -1,
+                width: activeGeometry.clipWidthPx[i],
+                height: activeGeometry.height + 2
+              }
+            ) }, `bandclip-${bandGradients[i].idSuffix}`)) : null
+          ] }),
+          /* @__PURE__ */ jsx("g", { clipPath: `url(#${uid}-revealclip)`, children: activeGeometry?.paths.map((d, i) => /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "fairmint-equity-ribbon__band",
+              fill: `url(#${uid}-bg${bandGradients[i].idSuffix})`,
+              clipPath: `url(#${uid}-bandclip${i})`,
+              d
+            },
+            bandGradients[i].idSuffix
+          )) })
+        ]
+      }
+    ),
+    !suppressLabels && activeGeometry?.labels.map((lbl, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: labelClassName(lbl.placement),
+        style: {
+          left: `${lbl.leftPct}%`,
+          top: `${lbl.topPct}%`,
+          color: labelColor,
+          opacity: labelStyles[i]?.opacity ?? 0,
+          transform: labelStyles[i]?.transform
+        },
+        children: lbl.text
+      },
+      `${lbl.text}-${lbl.index}`
+    ))
+  ] });
+}
+function FairmintRibbonMark({
+  size: size2 = 64,
+  bandCount = 5,
+  gradients,
+  background = "black",
+  labelColor,
+  className,
+  style
+}) {
+  const dimension = `${size2}px`;
+  return /* @__PURE__ */ jsx(
+    EquityRibbonChart,
+    {
+      bandCount,
+      gradients,
+      background,
+      labelColor,
+      layout: "mark",
+      animated: false,
+      hideLabels: true,
+      className: ["fairmint-ribbon-mark", className].filter(Boolean).join(" "),
+      height: dimension,
+      style: { width: dimension, height: dimension, ...style }
+    }
+  );
+}
 function InvestmentCard({
   companyName,
   logoUrl,
@@ -45768,6 +46288,8 @@ export {
   ConfirmDialog,
   Container,
   Currency,
+  DEFAULT_RIBBON_CONFIG,
+  DEFAULT_RIBBON_LABELS,
   DataRow,
   DataTable,
   DateDisplay,
@@ -45780,12 +46302,14 @@ export {
   EmailField,
   EmptyState,
   EquityGrantCard,
+  EquityRibbonChart,
   ErrorFallback,
   ErrorPage,
   EthereumAddressField,
   Eyebrow,
   FairmintLogo,
   FairmintProvider,
+  FairmintRibbonMark,
   Flex,
   Form,
   FormField,
@@ -45796,6 +46320,8 @@ export {
   ListRow,
   Loader,
   LoadingSpinner,
+  MARK_RIBBON_CONFIG,
+  MARK_RIBBON_RIGHT_EDGE,
   MOBILE_BREAKPOINT,
   Menu,
   Modal,
@@ -45815,6 +46341,8 @@ export {
   PhotoCropModal,
   PinInput,
   Progress,
+  RIBBON_BACKGROUND_CLASS,
+  RIBBON_BAND_GRADIENTS,
   RadioCard,
   RedactedValue,
   ScrollArea,
@@ -45848,6 +46376,7 @@ export {
   ZERO_ETHEREUM_ADDRESS,
   ZipField,
   brandColors,
+  clampBandCount,
   colors,
   createFairmintMantineProviderProps,
   createZipSchema,