@fairmint/ui 0.2.31 → 0.2.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/specific/EquityRibbonChart/EquityRibbonChart.d.ts +30 -0
- package/dist/components/specific/EquityRibbonChart/EquityRibbonChart.d.ts.map +1 -0
- package/dist/components/specific/EquityRibbonChart/FairmintRibbonMark.d.ts +23 -0
- package/dist/components/specific/EquityRibbonChart/FairmintRibbonMark.d.ts.map +1 -0
- package/dist/components/specific/EquityRibbonChart/index.d.ts +9 -0
- package/dist/components/specific/EquityRibbonChart/index.d.ts.map +1 -0
- package/dist/components/specific/EquityRibbonChart/ribbonGeometry.d.ts +55 -0
- package/dist/components/specific/EquityRibbonChart/ribbonGeometry.d.ts.map +1 -0
- package/dist/components/specific/EquityRibbonChart/ribbonTheme.d.ts +13 -0
- package/dist/components/specific/EquityRibbonChart/ribbonTheme.d.ts.map +1 -0
- package/dist/fairmint-ui.cjs +529 -0
- package/dist/fairmint-ui.cjs.map +1 -1
- package/dist/fairmint-ui.js +529 -0
- package/dist/fairmint-ui.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/styles.css +85 -0
- package/dist/theme/ribbonChartColors.d.ts +31 -0
- package/dist/theme/ribbonChartColors.d.ts.map +1 -0
- package/package.json +1 -1
package/dist/fairmint-ui.cjs
CHANGED
|
@@ -45016,6 +45016,526 @@ function EquityGrantCard({
|
|
|
45016
45016
|
}
|
|
45017
45017
|
);
|
|
45018
45018
|
}
|
|
45019
|
+
const DEFAULT_RIBBON_CONFIG = {
|
|
45020
|
+
baseline: 0.82,
|
|
45021
|
+
xEndStagger: 9e-3,
|
|
45022
|
+
xEndDraw: [0.84, 0.849, 0.858, 0.867, 0.876],
|
|
45023
|
+
xEndCurve: 0.914,
|
|
45024
|
+
xStart: [0.05, 0.19, 0.34, 0.5, 0.66],
|
|
45025
|
+
kArr: [1.7, 2.4, 3.1, 3.9, 4.9],
|
|
45026
|
+
V: [0.082, 0.102, 0.132, 0.172, 0.21],
|
|
45027
|
+
vMin: [0.038, 0.04, 0.042, 0.044, 0.046],
|
|
45028
|
+
xStem: [0.05, 0.04, 0.035, 0.03, 0.025],
|
|
45029
|
+
labelX: [0.08, 0.24, 0.4, 0.56, 0.8],
|
|
45030
|
+
labelAboveGap: [0.034, 0.03, 0.028, 0.024],
|
|
45031
|
+
labelLeftGap: 0.055,
|
|
45032
|
+
labelLiquidityGap: 0.016,
|
|
45033
|
+
labelNudge: [
|
|
45034
|
+
[0, 0],
|
|
45035
|
+
[0, 0],
|
|
45036
|
+
[0, 0],
|
|
45037
|
+
[0, 0],
|
|
45038
|
+
[0, -0.012]
|
|
45039
|
+
],
|
|
45040
|
+
samples: 72
|
|
45041
|
+
};
|
|
45042
|
+
const MARK_RIBBON_RIGHT_EDGE = 0.936;
|
|
45043
|
+
const MARK_FIT_HORIZONTAL_COMPRESS = 0.78;
|
|
45044
|
+
const MARK_RIBBON_CONFIG = {
|
|
45045
|
+
...DEFAULT_RIBBON_CONFIG,
|
|
45046
|
+
baseline: 0.97,
|
|
45047
|
+
xEndDraw: [
|
|
45048
|
+
MARK_RIBBON_RIGHT_EDGE,
|
|
45049
|
+
MARK_RIBBON_RIGHT_EDGE,
|
|
45050
|
+
MARK_RIBBON_RIGHT_EDGE,
|
|
45051
|
+
MARK_RIBBON_RIGHT_EDGE,
|
|
45052
|
+
MARK_RIBBON_RIGHT_EDGE
|
|
45053
|
+
],
|
|
45054
|
+
xEndCurve: 0.94,
|
|
45055
|
+
xStart: [0.08, 0.2, 0.32, 0.44, 0.56],
|
|
45056
|
+
xStem: [0.028, 0.022, 0.018, 0.015, 0.012]
|
|
45057
|
+
};
|
|
45058
|
+
function labelGapAbove(i, config2) {
|
|
45059
|
+
const lastBand = config2.xStart.length - 1;
|
|
45060
|
+
if (i === lastBand) return config2.labelLiquidityGap;
|
|
45061
|
+
return config2.labelAboveGap[i] ?? config2.labelLiquidityGap;
|
|
45062
|
+
}
|
|
45063
|
+
function mergeBounds(a, b) {
|
|
45064
|
+
return {
|
|
45065
|
+
minX: Math.min(a.minX, b.minX),
|
|
45066
|
+
minY: Math.min(a.minY, b.minY),
|
|
45067
|
+
maxX: Math.max(a.maxX, b.maxX),
|
|
45068
|
+
maxY: Math.max(a.maxY, b.maxY)
|
|
45069
|
+
};
|
|
45070
|
+
}
|
|
45071
|
+
function transformPathD(d, scaleX, scaleY, tx, ty) {
|
|
45072
|
+
return d.replace(/(-?[\d.]+),(-?[\d.]+)/g, (_, x, y) => {
|
|
45073
|
+
const px2 = Number(x) * scaleX + tx;
|
|
45074
|
+
const py = Number(y) * scaleY + ty;
|
|
45075
|
+
return `${px2.toFixed(1)},${py.toFixed(1)}`;
|
|
45076
|
+
});
|
|
45077
|
+
}
|
|
45078
|
+
function computeMarkFitTransform(bounds, width, height, paddingRatio) {
|
|
45079
|
+
const pad = paddingRatio * Math.min(width, height);
|
|
45080
|
+
const bw = bounds.maxX - bounds.minX;
|
|
45081
|
+
const bh = bounds.maxY - bounds.minY;
|
|
45082
|
+
if (bw <= 0 || bh <= 0) {
|
|
45083
|
+
return { scaleX: 1, scaleY: 1, tx: 0, ty: 0 };
|
|
45084
|
+
}
|
|
45085
|
+
const scaleY = (height - pad * 2) / bh;
|
|
45086
|
+
let scaleX = scaleY * MARK_FIT_HORIZONTAL_COMPRESS;
|
|
45087
|
+
if (bw * scaleX > width - pad * 2) {
|
|
45088
|
+
scaleX = (width - pad * 2) / bw;
|
|
45089
|
+
}
|
|
45090
|
+
const tx = (width - bw * scaleX) / 2 - bounds.minX * scaleX;
|
|
45091
|
+
const ty = (height - bh * scaleY) / 2 - bounds.minY * scaleY;
|
|
45092
|
+
return { scaleX, scaleY, tx, ty };
|
|
45093
|
+
}
|
|
45094
|
+
function valAt(i, xf, config2) {
|
|
45095
|
+
const { xStart, xEndCurve, kArr, V, vMin, xStem } = config2;
|
|
45096
|
+
const xLo = xStart[i] - xStem[i];
|
|
45097
|
+
if (xf < xLo || xf > xEndCurve) return 0;
|
|
45098
|
+
if (xf < xStart[i]) return vMin[i];
|
|
45099
|
+
const u = (xf - xStart[i]) / (xEndCurve - xStart[i]);
|
|
45100
|
+
const grow = (Math.exp(kArr[i] * u) - 1) / (Math.exp(kArr[i]) - 1);
|
|
45101
|
+
return vMin[i] + (V[i] - vMin[i]) * grow;
|
|
45102
|
+
}
|
|
45103
|
+
function cumBelow(i, xf, config2) {
|
|
45104
|
+
let sum = 0;
|
|
45105
|
+
for (let j = 0; j < i; j++) sum += valAt(j, xf, config2);
|
|
45106
|
+
return sum;
|
|
45107
|
+
}
|
|
45108
|
+
function buildBandPath(i, width, height, config2) {
|
|
45109
|
+
const { xStart, xEndCurve, xStem, baseline } = config2;
|
|
45110
|
+
const samples = Math.max(1, Math.floor(config2.samples));
|
|
45111
|
+
const xLo = xStart[i] - xStem[i];
|
|
45112
|
+
const top = [];
|
|
45113
|
+
const bot = [];
|
|
45114
|
+
for (let s = 0; s <= samples; s++) {
|
|
45115
|
+
const xf = xLo + (xEndCurve - xLo) * (s / samples);
|
|
45116
|
+
const below = cumBelow(i, xf, config2);
|
|
45117
|
+
const v = valAt(i, xf, config2);
|
|
45118
|
+
const x = xf * width;
|
|
45119
|
+
top.push([x, (baseline - below - v) * height]);
|
|
45120
|
+
bot.push([x, (baseline - below) * height]);
|
|
45121
|
+
}
|
|
45122
|
+
let minX = Number.POSITIVE_INFINITY;
|
|
45123
|
+
let minY = Number.POSITIVE_INFINITY;
|
|
45124
|
+
let maxX = Number.NEGATIVE_INFINITY;
|
|
45125
|
+
let maxY = Number.NEGATIVE_INFINITY;
|
|
45126
|
+
for (const [x, y] of [...top, ...bot]) {
|
|
45127
|
+
minX = Math.min(minX, x);
|
|
45128
|
+
minY = Math.min(minY, y);
|
|
45129
|
+
maxX = Math.max(maxX, x);
|
|
45130
|
+
maxY = Math.max(maxY, y);
|
|
45131
|
+
}
|
|
45132
|
+
let d = `M${top[0][0].toFixed(1)},${top[0][1].toFixed(1)}`;
|
|
45133
|
+
for (let s = 1; s <= samples; s++) {
|
|
45134
|
+
d += ` L${top[s][0].toFixed(1)},${top[s][1].toFixed(1)}`;
|
|
45135
|
+
}
|
|
45136
|
+
d += ` L${bot[samples][0].toFixed(1)},${bot[samples][1].toFixed(1)}`;
|
|
45137
|
+
for (let s = samples - 1; s >= 0; s--) {
|
|
45138
|
+
d += ` L${bot[s][0].toFixed(1)},${bot[s][1].toFixed(1)}`;
|
|
45139
|
+
}
|
|
45140
|
+
return { d: `${d} Z`, bounds: { minX, minY, maxX, maxY } };
|
|
45141
|
+
}
|
|
45142
|
+
function buildLabel(i, text, _width, _height, config2, offsetXNorm) {
|
|
45143
|
+
const { baseline, xStart, xStem, labelNudge } = config2;
|
|
45144
|
+
const xf = xStart[i] - xStem[i] + offsetXNorm;
|
|
45145
|
+
const below = cumBelow(i, xf, config2);
|
|
45146
|
+
const v = valAt(i, xf, config2);
|
|
45147
|
+
const yTop = baseline - below - v;
|
|
45148
|
+
const [nudgeX, nudgeY] = labelNudge[i];
|
|
45149
|
+
return {
|
|
45150
|
+
index: i,
|
|
45151
|
+
text,
|
|
45152
|
+
leftPct: (xf + nudgeX) * 100,
|
|
45153
|
+
topPct: (yTop - labelGapAbove(i, config2) + nudgeY) * 100,
|
|
45154
|
+
placement: "start"
|
|
45155
|
+
};
|
|
45156
|
+
}
|
|
45157
|
+
function clampBandCount(count2, max2 = 5) {
|
|
45158
|
+
if (!Number.isFinite(count2)) return max2;
|
|
45159
|
+
return Math.min(max2, Math.max(1, Math.round(count2)));
|
|
45160
|
+
}
|
|
45161
|
+
function buildRibbonGeometry(width, height, labels, config2 = DEFAULT_RIBBON_CONFIG, bandCount = config2.xStart.length, layout = "hero") {
|
|
45162
|
+
const totalBands = config2.xStart.length;
|
|
45163
|
+
const visibleBands = clampBandCount(bandCount, totalBands);
|
|
45164
|
+
if (width <= 0 || height <= 0) {
|
|
45165
|
+
return null;
|
|
45166
|
+
}
|
|
45167
|
+
const paths = [];
|
|
45168
|
+
const clipWidthPx = [];
|
|
45169
|
+
let bounds = null;
|
|
45170
|
+
for (let i = 0; i < visibleBands; i++) {
|
|
45171
|
+
const band = buildBandPath(i, width, height, config2);
|
|
45172
|
+
paths.push(band.d);
|
|
45173
|
+
clipWidthPx.push(config2.xEndDraw[i] * width);
|
|
45174
|
+
bounds = bounds ? mergeBounds(bounds, band.bounds) : band.bounds;
|
|
45175
|
+
}
|
|
45176
|
+
let fitPaths = paths;
|
|
45177
|
+
let fitClips = clipWidthPx;
|
|
45178
|
+
let offsetXNorm = 0;
|
|
45179
|
+
if (bounds) {
|
|
45180
|
+
if (layout === "mark") {
|
|
45181
|
+
const { scaleX, scaleY, tx, ty } = computeMarkFitTransform(bounds, width, height, 0.05);
|
|
45182
|
+
fitPaths = paths.map((p) => transformPathD(p, scaleX, scaleY, tx, ty));
|
|
45183
|
+
const alignedClipRight = MARK_RIBBON_RIGHT_EDGE * width * scaleX + tx;
|
|
45184
|
+
fitClips = clipWidthPx.map(() => alignedClipRight);
|
|
45185
|
+
offsetXNorm = tx / width;
|
|
45186
|
+
} else if (layout === "hero") {
|
|
45187
|
+
const bw = bounds.maxX - bounds.minX;
|
|
45188
|
+
const tx = (width - bw) / 2 - bounds.minX;
|
|
45189
|
+
fitPaths = paths.map((p) => transformPathD(p, 1, 1, tx, 0));
|
|
45190
|
+
fitClips = clipWidthPx.map((w) => w + tx);
|
|
45191
|
+
offsetXNorm = tx / width;
|
|
45192
|
+
}
|
|
45193
|
+
}
|
|
45194
|
+
const paddedLabels = Array.from({ length: visibleBands }, (_, i) => labels[i] ?? "");
|
|
45195
|
+
const builtLabels = paddedLabels.map(
|
|
45196
|
+
(text, i) => buildLabel(i, text, width, height, config2, offsetXNorm)
|
|
45197
|
+
);
|
|
45198
|
+
return {
|
|
45199
|
+
paths: fitPaths,
|
|
45200
|
+
clipWidthPx: fitClips,
|
|
45201
|
+
labels: builtLabels,
|
|
45202
|
+
width,
|
|
45203
|
+
height,
|
|
45204
|
+
bandCount: visibleBands
|
|
45205
|
+
};
|
|
45206
|
+
}
|
|
45207
|
+
function easePower1InOut(t) {
|
|
45208
|
+
const p = Math.max(0, Math.min(1, t));
|
|
45209
|
+
return p < 0.5 ? 2 * p * p : 1 - (-2 * p + 2) ** 2 / 2;
|
|
45210
|
+
}
|
|
45211
|
+
function easePower2Out(t) {
|
|
45212
|
+
const p = Math.max(0, Math.min(1, t));
|
|
45213
|
+
return 1 - (1 - p) ** 2;
|
|
45214
|
+
}
|
|
45215
|
+
function ribbonLabelRevealTime(labelIndex, duration2, config2 = DEFAULT_RIBBON_CONFIG) {
|
|
45216
|
+
return Math.min(duration2, config2.labelX[labelIndex] * duration2 + 0.25);
|
|
45217
|
+
}
|
|
45218
|
+
const ribbonChartLabelDefault = "#FFFFFF";
|
|
45219
|
+
const ribbonChartSurface = {
|
|
45220
|
+
white: "#FFFFFF",
|
|
45221
|
+
black: "#0D1023"
|
|
45222
|
+
};
|
|
45223
|
+
const ribbonBandGradientStops = [
|
|
45224
|
+
{ idSuffix: "0", start: "#33198C", end: "#5B2BF0" },
|
|
45225
|
+
{ idSuffix: "1", start: "#4A22C8", end: "#7A3DF5" },
|
|
45226
|
+
{ idSuffix: "2", start: "#6A32E8", end: "#9A6BFF" },
|
|
45227
|
+
{ idSuffix: "3", start: "#8A52F5", end: "#BD84FF" },
|
|
45228
|
+
{ idSuffix: "4", start: "#A86BFF", end: "#E6ABFF" }
|
|
45229
|
+
];
|
|
45230
|
+
const RIBBON_BACKGROUND_CLASS = {
|
|
45231
|
+
white: "fairmint-equity-ribbon--bg-white",
|
|
45232
|
+
black: "fairmint-equity-ribbon--bg-black",
|
|
45233
|
+
transparent: "fairmint-equity-ribbon--bg-transparent"
|
|
45234
|
+
};
|
|
45235
|
+
const DEFAULT_RIBBON_LABELS = [
|
|
45236
|
+
"Cap Table",
|
|
45237
|
+
"Fundraising",
|
|
45238
|
+
"Grants",
|
|
45239
|
+
"Secondaries",
|
|
45240
|
+
"Liquidity"
|
|
45241
|
+
];
|
|
45242
|
+
const RIBBON_BAND_GRADIENTS = ribbonBandGradientStops;
|
|
45243
|
+
const RIBBON_SURFACE_CSS_VARS = {
|
|
45244
|
+
"--fairmint-ribbon-surface-white": ribbonChartSurface.white,
|
|
45245
|
+
"--fairmint-ribbon-surface-black": ribbonChartSurface.black
|
|
45246
|
+
};
|
|
45247
|
+
const REVEAL_DURATION_MS = 2300;
|
|
45248
|
+
const REVEAL_DELAY_MS = 420;
|
|
45249
|
+
function labelAnchorTransform(_placement, yOffsetPx) {
|
|
45250
|
+
return `translate(0, calc(-100% + ${yOffsetPx}px))`;
|
|
45251
|
+
}
|
|
45252
|
+
function labelClassName(_placement) {
|
|
45253
|
+
return "fairmint-equity-ribbon__label fairmint-equity-ribbon__label--start";
|
|
45254
|
+
}
|
|
45255
|
+
function resolveGradients(gradients, bandCount) {
|
|
45256
|
+
const source = gradients ?? RIBBON_BAND_GRADIENTS;
|
|
45257
|
+
return Array.from({ length: bandCount }, (_, i) => {
|
|
45258
|
+
const fallback = RIBBON_BAND_GRADIENTS[i] ?? RIBBON_BAND_GRADIENTS[RIBBON_BAND_GRADIENTS.length - 1];
|
|
45259
|
+
const g = source[i] ?? fallback;
|
|
45260
|
+
return {
|
|
45261
|
+
idSuffix: String(i),
|
|
45262
|
+
start: g.start,
|
|
45263
|
+
end: g.end
|
|
45264
|
+
};
|
|
45265
|
+
});
|
|
45266
|
+
}
|
|
45267
|
+
function EquityRibbonChart({
|
|
45268
|
+
labels = DEFAULT_RIBBON_LABELS,
|
|
45269
|
+
bandCount: bandCountProp = 5,
|
|
45270
|
+
gradients,
|
|
45271
|
+
animated = true,
|
|
45272
|
+
hideLabels = false,
|
|
45273
|
+
background = "transparent",
|
|
45274
|
+
layout = "hero",
|
|
45275
|
+
labelColor = ribbonChartLabelDefault,
|
|
45276
|
+
className,
|
|
45277
|
+
height,
|
|
45278
|
+
style
|
|
45279
|
+
}) {
|
|
45280
|
+
const bandCount = clampBandCount(bandCountProp);
|
|
45281
|
+
const labelsKey = labels.join("");
|
|
45282
|
+
const labelsRef = React.useRef(labels);
|
|
45283
|
+
labelsRef.current = labels;
|
|
45284
|
+
const bandGradients = resolveGradients(gradients, bandCount);
|
|
45285
|
+
const uid = React.useId().replace(/:/g, "");
|
|
45286
|
+
const rootRef = React.useRef(null);
|
|
45287
|
+
const playedRef = React.useRef(false);
|
|
45288
|
+
const rafRef = React.useRef(null);
|
|
45289
|
+
const revealGenerationRef = React.useRef(0);
|
|
45290
|
+
const revealScheduleRef = React.useRef(0);
|
|
45291
|
+
const cancelRevealAnimation = React.useCallback(() => {
|
|
45292
|
+
revealGenerationRef.current += 1;
|
|
45293
|
+
if (rafRef.current !== null) {
|
|
45294
|
+
cancelAnimationFrame(rafRef.current);
|
|
45295
|
+
rafRef.current = null;
|
|
45296
|
+
}
|
|
45297
|
+
}, []);
|
|
45298
|
+
const [geometry, setGeometry] = React.useState(null);
|
|
45299
|
+
const [revealWidth, setRevealWidth] = React.useState(0);
|
|
45300
|
+
const [labelStyles, setLabelStyles] = React.useState(
|
|
45301
|
+
() => labels.slice(0, bandCount).map(() => ({ opacity: 0, transform: "translateY(6px)" }))
|
|
45302
|
+
);
|
|
45303
|
+
const rebuild = React.useCallback(() => {
|
|
45304
|
+
cancelRevealAnimation();
|
|
45305
|
+
const el = rootRef.current;
|
|
45306
|
+
if (!el) return;
|
|
45307
|
+
const width = el.clientWidth;
|
|
45308
|
+
const heightPx = el.clientHeight;
|
|
45309
|
+
const config2 = layout === "mark" ? MARK_RIBBON_CONFIG : void 0;
|
|
45310
|
+
const built = buildRibbonGeometry(
|
|
45311
|
+
width,
|
|
45312
|
+
heightPx,
|
|
45313
|
+
labelsRef.current,
|
|
45314
|
+
config2,
|
|
45315
|
+
bandCount,
|
|
45316
|
+
layout
|
|
45317
|
+
);
|
|
45318
|
+
setGeometry(built);
|
|
45319
|
+
if (built && (playedRef.current || !animated)) {
|
|
45320
|
+
setRevealWidth(built.width);
|
|
45321
|
+
setLabelStyles(
|
|
45322
|
+
built.labels.map((lbl) => ({
|
|
45323
|
+
opacity: 1,
|
|
45324
|
+
transform: labelAnchorTransform(lbl.placement, 0)
|
|
45325
|
+
}))
|
|
45326
|
+
);
|
|
45327
|
+
}
|
|
45328
|
+
}, [animated, bandCount, cancelRevealAnimation, labelsKey, layout]);
|
|
45329
|
+
React.useLayoutEffect(() => {
|
|
45330
|
+
playedRef.current = false;
|
|
45331
|
+
revealScheduleRef.current = 0;
|
|
45332
|
+
cancelRevealAnimation();
|
|
45333
|
+
if (animated) {
|
|
45334
|
+
setRevealWidth(0);
|
|
45335
|
+
setLabelStyles(
|
|
45336
|
+
labelsRef.current.slice(0, bandCount).map(() => ({
|
|
45337
|
+
opacity: 0,
|
|
45338
|
+
transform: "translateY(6px)"
|
|
45339
|
+
}))
|
|
45340
|
+
);
|
|
45341
|
+
}
|
|
45342
|
+
rebuild();
|
|
45343
|
+
}, [animated, bandCount, cancelRevealAnimation, rebuild]);
|
|
45344
|
+
React.useEffect(() => () => cancelRevealAnimation(), [cancelRevealAnimation]);
|
|
45345
|
+
React.useEffect(() => {
|
|
45346
|
+
const el = rootRef.current;
|
|
45347
|
+
if (!el) return;
|
|
45348
|
+
if (typeof ResizeObserver === "undefined") {
|
|
45349
|
+
rebuild();
|
|
45350
|
+
return;
|
|
45351
|
+
}
|
|
45352
|
+
const ro = new ResizeObserver(() => {
|
|
45353
|
+
rebuild();
|
|
45354
|
+
});
|
|
45355
|
+
ro.observe(el);
|
|
45356
|
+
return () => ro.disconnect();
|
|
45357
|
+
}, [rebuild]);
|
|
45358
|
+
const runReveal = React.useCallback(() => {
|
|
45359
|
+
if (!geometry || playedRef.current) return;
|
|
45360
|
+
if (!animated) {
|
|
45361
|
+
playedRef.current = true;
|
|
45362
|
+
setRevealWidth(geometry.width);
|
|
45363
|
+
setLabelStyles(
|
|
45364
|
+
geometry.labels.map((lbl) => ({
|
|
45365
|
+
opacity: 1,
|
|
45366
|
+
transform: labelAnchorTransform(lbl.placement, 0)
|
|
45367
|
+
}))
|
|
45368
|
+
);
|
|
45369
|
+
return;
|
|
45370
|
+
}
|
|
45371
|
+
const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
45372
|
+
if (reduceMotion) {
|
|
45373
|
+
playedRef.current = true;
|
|
45374
|
+
setRevealWidth(geometry.width);
|
|
45375
|
+
setLabelStyles(
|
|
45376
|
+
geometry.labels.map((lbl) => ({
|
|
45377
|
+
opacity: 1,
|
|
45378
|
+
transform: labelAnchorTransform(lbl.placement, 0)
|
|
45379
|
+
}))
|
|
45380
|
+
);
|
|
45381
|
+
return;
|
|
45382
|
+
}
|
|
45383
|
+
playedRef.current = true;
|
|
45384
|
+
setRevealWidth(0);
|
|
45385
|
+
setLabelStyles(
|
|
45386
|
+
geometry.labels.map((lbl) => ({
|
|
45387
|
+
opacity: 0,
|
|
45388
|
+
transform: labelAnchorTransform(lbl.placement, 6)
|
|
45389
|
+
}))
|
|
45390
|
+
);
|
|
45391
|
+
const generation = revealGenerationRef.current;
|
|
45392
|
+
const start = performance.now();
|
|
45393
|
+
const tick = (now) => {
|
|
45394
|
+
if (generation !== revealGenerationRef.current) return;
|
|
45395
|
+
const elapsed = now - start;
|
|
45396
|
+
const t = Math.min(1, elapsed / REVEAL_DURATION_MS);
|
|
45397
|
+
const eased = easePower1InOut(t);
|
|
45398
|
+
setRevealWidth(geometry.width * eased);
|
|
45399
|
+
setLabelStyles(
|
|
45400
|
+
geometry.labels.map((lbl, i) => {
|
|
45401
|
+
const labelStart = ribbonLabelRevealTime(i, REVEAL_DURATION_MS / 1e3) * 1e3;
|
|
45402
|
+
const labelDur = 550;
|
|
45403
|
+
const lt2 = Math.min(1, Math.max(0, (elapsed - labelStart) / labelDur));
|
|
45404
|
+
const lo = easePower2Out(lt2);
|
|
45405
|
+
const y = 6 * (1 - lo);
|
|
45406
|
+
return { opacity: lo, transform: labelAnchorTransform(lbl.placement, y) };
|
|
45407
|
+
})
|
|
45408
|
+
);
|
|
45409
|
+
if (t < 1) {
|
|
45410
|
+
rafRef.current = requestAnimationFrame(tick);
|
|
45411
|
+
} else {
|
|
45412
|
+
setRevealWidth(geometry.width);
|
|
45413
|
+
setLabelStyles(
|
|
45414
|
+
geometry.labels.map((lbl) => ({
|
|
45415
|
+
opacity: 1,
|
|
45416
|
+
transform: labelAnchorTransform(lbl.placement, 0)
|
|
45417
|
+
}))
|
|
45418
|
+
);
|
|
45419
|
+
}
|
|
45420
|
+
};
|
|
45421
|
+
rafRef.current = requestAnimationFrame(tick);
|
|
45422
|
+
}, [animated, geometry]);
|
|
45423
|
+
React.useEffect(() => {
|
|
45424
|
+
if (!geometry || playedRef.current) return;
|
|
45425
|
+
const scheduleId = ++revealScheduleRef.current;
|
|
45426
|
+
const delay = scheduleId === 1 ? REVEAL_DELAY_MS : 0;
|
|
45427
|
+
const timer = window.setTimeout(() => {
|
|
45428
|
+
if (scheduleId !== revealScheduleRef.current) return;
|
|
45429
|
+
runReveal();
|
|
45430
|
+
}, delay);
|
|
45431
|
+
return () => window.clearTimeout(timer);
|
|
45432
|
+
}, [geometry, runReveal]);
|
|
45433
|
+
const suppressLabels = hideLabels || layout === "mark";
|
|
45434
|
+
const activeGeometry = geometry && geometry.bandCount === bandCount ? geometry : null;
|
|
45435
|
+
const rootClass = [
|
|
45436
|
+
"fairmint-equity-ribbon",
|
|
45437
|
+
RIBBON_BACKGROUND_CLASS[background],
|
|
45438
|
+
layout === "mark" ? "fairmint-equity-ribbon--layout-mark" : "",
|
|
45439
|
+
suppressLabels ? "fairmint-equity-ribbon--hidden-labels" : "",
|
|
45440
|
+
className ?? ""
|
|
45441
|
+
].filter(Boolean).join(" ");
|
|
45442
|
+
const rootStyle = {
|
|
45443
|
+
...RIBBON_SURFACE_CSS_VARS,
|
|
45444
|
+
...style,
|
|
45445
|
+
...height ? { height } : {}
|
|
45446
|
+
};
|
|
45447
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: rootClass, style: rootStyle, children: [
|
|
45448
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
45449
|
+
"svg",
|
|
45450
|
+
{
|
|
45451
|
+
className: "fairmint-equity-ribbon__svg",
|
|
45452
|
+
preserveAspectRatio: "none",
|
|
45453
|
+
"aria-hidden": "true",
|
|
45454
|
+
viewBox: activeGeometry ? `0 0 ${activeGeometry.width} ${activeGeometry.height}` : "0 0 1 1",
|
|
45455
|
+
children: [
|
|
45456
|
+
/* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
|
|
45457
|
+
bandGradients.map((g) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
45458
|
+
"linearGradient",
|
|
45459
|
+
{
|
|
45460
|
+
id: `${uid}-bg${g.idSuffix}`,
|
|
45461
|
+
x1: "0",
|
|
45462
|
+
y1: "1",
|
|
45463
|
+
x2: "1",
|
|
45464
|
+
y2: "0",
|
|
45465
|
+
children: [
|
|
45466
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0", stopColor: g.start }),
|
|
45467
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: g.end })
|
|
45468
|
+
]
|
|
45469
|
+
},
|
|
45470
|
+
g.idSuffix
|
|
45471
|
+
)),
|
|
45472
|
+
/* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: `${uid}-revealclip`, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: -1, width: revealWidth, height: (activeGeometry?.height ?? 1) + 2 }) }),
|
|
45473
|
+
activeGeometry ? activeGeometry.paths.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: `${uid}-bandclip${i}`, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
45474
|
+
"rect",
|
|
45475
|
+
{
|
|
45476
|
+
x: 0,
|
|
45477
|
+
y: -1,
|
|
45478
|
+
width: activeGeometry.clipWidthPx[i],
|
|
45479
|
+
height: activeGeometry.height + 2
|
|
45480
|
+
}
|
|
45481
|
+
) }, `bandclip-${bandGradients[i].idSuffix}`)) : null
|
|
45482
|
+
] }),
|
|
45483
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${uid}-revealclip)`, children: activeGeometry?.paths.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
45484
|
+
"path",
|
|
45485
|
+
{
|
|
45486
|
+
className: "fairmint-equity-ribbon__band",
|
|
45487
|
+
fill: `url(#${uid}-bg${bandGradients[i].idSuffix})`,
|
|
45488
|
+
clipPath: `url(#${uid}-bandclip${i})`,
|
|
45489
|
+
d
|
|
45490
|
+
},
|
|
45491
|
+
bandGradients[i].idSuffix
|
|
45492
|
+
)) })
|
|
45493
|
+
]
|
|
45494
|
+
}
|
|
45495
|
+
),
|
|
45496
|
+
!suppressLabels && activeGeometry?.labels.map((lbl, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
45497
|
+
"div",
|
|
45498
|
+
{
|
|
45499
|
+
className: labelClassName(lbl.placement),
|
|
45500
|
+
style: {
|
|
45501
|
+
left: `${lbl.leftPct}%`,
|
|
45502
|
+
top: `${lbl.topPct}%`,
|
|
45503
|
+
color: labelColor,
|
|
45504
|
+
opacity: labelStyles[i]?.opacity ?? 0,
|
|
45505
|
+
transform: labelStyles[i]?.transform
|
|
45506
|
+
},
|
|
45507
|
+
children: lbl.text
|
|
45508
|
+
},
|
|
45509
|
+
`${lbl.text}-${lbl.index}`
|
|
45510
|
+
))
|
|
45511
|
+
] });
|
|
45512
|
+
}
|
|
45513
|
+
function FairmintRibbonMark({
|
|
45514
|
+
size: size2 = 64,
|
|
45515
|
+
bandCount = 5,
|
|
45516
|
+
gradients,
|
|
45517
|
+
background = "black",
|
|
45518
|
+
labelColor,
|
|
45519
|
+
className,
|
|
45520
|
+
style
|
|
45521
|
+
}) {
|
|
45522
|
+
const dimension = `${size2}px`;
|
|
45523
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
45524
|
+
EquityRibbonChart,
|
|
45525
|
+
{
|
|
45526
|
+
bandCount,
|
|
45527
|
+
gradients,
|
|
45528
|
+
background,
|
|
45529
|
+
labelColor,
|
|
45530
|
+
layout: "mark",
|
|
45531
|
+
animated: false,
|
|
45532
|
+
hideLabels: true,
|
|
45533
|
+
className: ["fairmint-ribbon-mark", className].filter(Boolean).join(" "),
|
|
45534
|
+
height: dimension,
|
|
45535
|
+
style: { width: dimension, height: dimension, ...style }
|
|
45536
|
+
}
|
|
45537
|
+
);
|
|
45538
|
+
}
|
|
45019
45539
|
function InvestmentCard({
|
|
45020
45540
|
companyName,
|
|
45021
45541
|
logoUrl,
|
|
@@ -45785,6 +46305,8 @@ exports.ConfidentialityBanner = ConfidentialityBanner;
|
|
|
45785
46305
|
exports.ConfirmDialog = ConfirmDialog;
|
|
45786
46306
|
exports.Container = Container;
|
|
45787
46307
|
exports.Currency = Currency;
|
|
46308
|
+
exports.DEFAULT_RIBBON_CONFIG = DEFAULT_RIBBON_CONFIG;
|
|
46309
|
+
exports.DEFAULT_RIBBON_LABELS = DEFAULT_RIBBON_LABELS;
|
|
45788
46310
|
exports.DataRow = DataRow;
|
|
45789
46311
|
exports.DataTable = DataTable;
|
|
45790
46312
|
exports.DateDisplay = DateDisplay;
|
|
@@ -45797,12 +46319,14 @@ exports.EditableSection = EditableSection;
|
|
|
45797
46319
|
exports.EmailField = EmailField;
|
|
45798
46320
|
exports.EmptyState = EmptyState;
|
|
45799
46321
|
exports.EquityGrantCard = EquityGrantCard;
|
|
46322
|
+
exports.EquityRibbonChart = EquityRibbonChart;
|
|
45800
46323
|
exports.ErrorFallback = ErrorFallback;
|
|
45801
46324
|
exports.ErrorPage = ErrorPage;
|
|
45802
46325
|
exports.EthereumAddressField = EthereumAddressField;
|
|
45803
46326
|
exports.Eyebrow = Eyebrow;
|
|
45804
46327
|
exports.FairmintLogo = FairmintLogo;
|
|
45805
46328
|
exports.FairmintProvider = FairmintProvider;
|
|
46329
|
+
exports.FairmintRibbonMark = FairmintRibbonMark;
|
|
45806
46330
|
exports.Flex = Flex;
|
|
45807
46331
|
exports.Form = Form;
|
|
45808
46332
|
exports.FormField = FormField;
|
|
@@ -45813,6 +46337,8 @@ exports.InvestorProfileCard = InvestorProfileCard;
|
|
|
45813
46337
|
exports.ListRow = ListRow;
|
|
45814
46338
|
exports.Loader = Loader;
|
|
45815
46339
|
exports.LoadingSpinner = LoadingSpinner;
|
|
46340
|
+
exports.MARK_RIBBON_CONFIG = MARK_RIBBON_CONFIG;
|
|
46341
|
+
exports.MARK_RIBBON_RIGHT_EDGE = MARK_RIBBON_RIGHT_EDGE;
|
|
45816
46342
|
exports.MOBILE_BREAKPOINT = MOBILE_BREAKPOINT;
|
|
45817
46343
|
exports.Menu = Menu;
|
|
45818
46344
|
exports.Modal = Modal;
|
|
@@ -45832,6 +46358,8 @@ exports.PhoneField = PhoneField;
|
|
|
45832
46358
|
exports.PhotoCropModal = PhotoCropModal;
|
|
45833
46359
|
exports.PinInput = PinInput;
|
|
45834
46360
|
exports.Progress = Progress;
|
|
46361
|
+
exports.RIBBON_BACKGROUND_CLASS = RIBBON_BACKGROUND_CLASS;
|
|
46362
|
+
exports.RIBBON_BAND_GRADIENTS = RIBBON_BAND_GRADIENTS;
|
|
45835
46363
|
exports.RadioCard = RadioCard;
|
|
45836
46364
|
exports.RedactedValue = RedactedValue;
|
|
45837
46365
|
exports.ScrollArea = ScrollArea;
|
|
@@ -45865,6 +46393,7 @@ exports.WalletList = WalletList;
|
|
|
45865
46393
|
exports.ZERO_ETHEREUM_ADDRESS = ZERO_ETHEREUM_ADDRESS;
|
|
45866
46394
|
exports.ZipField = ZipField;
|
|
45867
46395
|
exports.brandColors = brandColors;
|
|
46396
|
+
exports.clampBandCount = clampBandCount;
|
|
45868
46397
|
exports.colors = colors;
|
|
45869
46398
|
exports.createFairmintMantineProviderProps = createFairmintMantineProviderProps;
|
|
45870
46399
|
exports.createZipSchema = createZipSchema;
|