kaleido-ui 0.2.8 → 0.2.9
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/web/{chunk-7F5GSNHE.js → chunk-MKZZD3FM.js} +9 -2
- package/dist/web/chunk-O3VC3EQT.js +143 -0
- package/dist/web/components/charts/index.js +10 -10
- package/dist/web/components/metric-card.js +1 -1
- package/dist/web/components/trend-chart.js +1 -1
- package/dist/web/index.cjs +70 -29
- package/dist/web/index.d.cts +7 -1
- package/dist/web/index.d.ts +7 -1
- package/dist/web/index.js +17 -17
- package/dist/web/primitives/toaster.js +2 -2
- package/package.json +1 -1
- package/dist/web/chunk-STMNX3QT.js +0 -109
- package/dist/web/{chunk-YCOP3ZRE.js → chunk-Z5LVT3BD.js} +3 -3
|
@@ -364,9 +364,16 @@ function TrendChart({
|
|
|
364
364
|
);
|
|
365
365
|
}
|
|
366
366
|
function SolidFill({ id, tone }) {
|
|
367
|
+
const danger = tone === "danger";
|
|
367
368
|
return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
368
|
-
/* @__PURE__ */ jsx(
|
|
369
|
-
|
|
369
|
+
/* @__PURE__ */ jsx(
|
|
370
|
+
"stop",
|
|
371
|
+
{
|
|
372
|
+
offset: "0%",
|
|
373
|
+
style: { stopColor: danger ? `color-mix(in srgb, ${toneFill[tone]}, white 12%)` : `color-mix(in oklab, ${toneFill[tone]}, white 35%)` }
|
|
374
|
+
}
|
|
375
|
+
),
|
|
376
|
+
/* @__PURE__ */ jsx("stop", { offset: "100%", style: { stopColor: danger ? `color-mix(in srgb, ${toneFill[tone]}, black 22%)` : toneFill[tone] } })
|
|
370
377
|
] });
|
|
371
378
|
}
|
|
372
379
|
function Texture({
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
Icon
|
|
4
|
+
} from "./chunk-A6MSV4MA.js";
|
|
5
|
+
import {
|
|
6
|
+
eyebrow
|
|
7
|
+
} from "./chunk-MTQOAMDW.js";
|
|
8
|
+
import {
|
|
9
|
+
cn
|
|
10
|
+
} from "./chunk-PMGIJMRO.js";
|
|
11
|
+
|
|
12
|
+
// src/web/components/metric-card.tsx
|
|
13
|
+
import { useId, useLayoutEffect, useRef } from "react";
|
|
14
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
+
var toneClasses = {
|
|
16
|
+
primary: "bg-primary/10 text-brand",
|
|
17
|
+
purple: "bg-network-arkade/10 text-network-arkade-fg",
|
|
18
|
+
blue: "bg-info/10 text-info-fg",
|
|
19
|
+
info: "bg-info/10 text-info-fg",
|
|
20
|
+
warning: "bg-warning/10 text-warning-fg",
|
|
21
|
+
success: "bg-success/10 text-success-fg",
|
|
22
|
+
muted: "bg-secondary/15 text-secondary-content"
|
|
23
|
+
};
|
|
24
|
+
function MetricCard({
|
|
25
|
+
label,
|
|
26
|
+
value,
|
|
27
|
+
description,
|
|
28
|
+
icon,
|
|
29
|
+
tone = "muted",
|
|
30
|
+
size = "compact",
|
|
31
|
+
iconPlacement,
|
|
32
|
+
trend,
|
|
33
|
+
definition,
|
|
34
|
+
change,
|
|
35
|
+
labelStyle = "eyebrow",
|
|
36
|
+
className,
|
|
37
|
+
...rest
|
|
38
|
+
}) {
|
|
39
|
+
const labelId = useId();
|
|
40
|
+
const valueRef = useRef(null);
|
|
41
|
+
const comfortable = size === "comfortable";
|
|
42
|
+
const placement = iconPlacement ?? (comfortable ? "end" : "label");
|
|
43
|
+
const hasEnd = placement === "end" || !!trend;
|
|
44
|
+
const iconBox = comfortable ? "size-9 rounded-xl shadow-raised" : placement === "end" ? "size-7 rounded-lg" : "size-5 rounded-md";
|
|
45
|
+
const iconGlyph = comfortable ? "text-icon-lg" : placement === "end" ? "text-icon-md" : "text-icon-xs";
|
|
46
|
+
useLayoutEffect(() => {
|
|
47
|
+
const el = valueRef.current;
|
|
48
|
+
const column = el?.parentElement;
|
|
49
|
+
if (!el || !column || !hasEnd) return;
|
|
50
|
+
const fit = () => {
|
|
51
|
+
el.style.fontSize = "";
|
|
52
|
+
const base = parseFloat(getComputedStyle(el).fontSize);
|
|
53
|
+
let size2 = base;
|
|
54
|
+
while (el.scrollWidth > el.clientWidth + 0.5 && size2 > base * 0.6) {
|
|
55
|
+
size2 -= 1;
|
|
56
|
+
el.style.fontSize = `${size2}px`;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
fit();
|
|
60
|
+
const observer = new ResizeObserver(fit);
|
|
61
|
+
observer.observe(column);
|
|
62
|
+
return () => observer.disconnect();
|
|
63
|
+
}, [value, hasEnd, comfortable]);
|
|
64
|
+
const iconNode = icon ? /* @__PURE__ */ jsx(
|
|
65
|
+
"span",
|
|
66
|
+
{
|
|
67
|
+
"data-slot": "metric-card-icon",
|
|
68
|
+
className: cn(
|
|
69
|
+
"flex shrink-0 items-center justify-center",
|
|
70
|
+
iconBox,
|
|
71
|
+
toneClasses[tone]
|
|
72
|
+
),
|
|
73
|
+
children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconGlyph }) : icon
|
|
74
|
+
}
|
|
75
|
+
) : null;
|
|
76
|
+
const labelNode = /* @__PURE__ */ jsx(
|
|
77
|
+
"span",
|
|
78
|
+
{
|
|
79
|
+
id: labelId,
|
|
80
|
+
"data-slot": "metric-card-label",
|
|
81
|
+
className: labelStyle === "title" ? "text-body font-semibold text-foreground" : cn(eyebrow, "text-muted-foreground"),
|
|
82
|
+
children: label
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
return /* @__PURE__ */ jsxs(
|
|
86
|
+
"div",
|
|
87
|
+
{
|
|
88
|
+
role: "group",
|
|
89
|
+
"aria-labelledby": rest["aria-label"] ? void 0 : labelId,
|
|
90
|
+
"data-slot": "metric-card",
|
|
91
|
+
"data-size": size,
|
|
92
|
+
className: cn(
|
|
93
|
+
comfortable ? "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-4 shadow-card" : "rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-2.5 shadow-raised",
|
|
94
|
+
hasEnd ? "flex items-stretch justify-between gap-3" : "space-y-1",
|
|
95
|
+
className
|
|
96
|
+
),
|
|
97
|
+
...rest,
|
|
98
|
+
children: [
|
|
99
|
+
/* @__PURE__ */ jsxs("div", { className: hasEnd ? "flex min-w-0 flex-1 flex-col justify-between gap-4" : "contents", children: [
|
|
100
|
+
/* @__PURE__ */ jsxs("div", { className: hasEnd ? labelStyle === "title" ? "space-y-0" : "space-y-1" : "contents", children: [
|
|
101
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
102
|
+
placement === "label" && iconNode,
|
|
103
|
+
labelNode
|
|
104
|
+
] }),
|
|
105
|
+
definition && /* @__PURE__ */ jsx("p", { "data-slot": "metric-card-definition", className: "m-0 text-caption text-muted-foreground", children: definition })
|
|
106
|
+
] }),
|
|
107
|
+
/* @__PURE__ */ jsxs("div", { className: hasEnd ? "space-y-1" : "contents", children: [
|
|
108
|
+
/* @__PURE__ */ jsx(
|
|
109
|
+
"p",
|
|
110
|
+
{
|
|
111
|
+
ref: valueRef,
|
|
112
|
+
"data-slot": "metric-card-value",
|
|
113
|
+
className: cn(
|
|
114
|
+
"m-0 font-bold tabular-nums text-foreground",
|
|
115
|
+
hasEnd && "whitespace-nowrap",
|
|
116
|
+
comfortable ? "text-headline" : "text-body"
|
|
117
|
+
),
|
|
118
|
+
children: value
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
change && /* @__PURE__ */ jsx("p", { "data-slot": "metric-card-change", className: cn("m-0 tabular-nums text-foreground", comfortable ? "text-caption" : "text-xxs"), children: change }),
|
|
122
|
+
description && /* @__PURE__ */ jsx(
|
|
123
|
+
"p",
|
|
124
|
+
{
|
|
125
|
+
"data-slot": "metric-card-description",
|
|
126
|
+
className: cn("m-0 text-muted-foreground", comfortable ? "text-caption" : "text-xxs"),
|
|
127
|
+
children: description
|
|
128
|
+
}
|
|
129
|
+
)
|
|
130
|
+
] })
|
|
131
|
+
] }),
|
|
132
|
+
hasEnd && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end justify-between gap-3", children: [
|
|
133
|
+
placement === "end" && iconNode,
|
|
134
|
+
trend && /* @__PURE__ */ jsx("div", { "data-slot": "metric-card-trend", className: "min-h-0 flex-1", children: trend })
|
|
135
|
+
] })
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
export {
|
|
142
|
+
MetricCard
|
|
143
|
+
};
|
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../chunk-LOGZGZWN.js";
|
|
3
|
-
import {
|
|
4
|
-
AreaChart,
|
|
5
|
-
LineChart
|
|
6
|
-
} from "../../chunk-FB23RQN5.js";
|
|
7
|
-
import {
|
|
8
|
-
Meter
|
|
9
|
-
} from "../../chunk-QRK4J3P3.js";
|
|
10
|
-
import {
|
|
11
|
-
MixedChart
|
|
12
|
-
} from "../../chunk-DE4ALHAW.js";
|
|
13
3
|
import {
|
|
14
4
|
ScatterChart
|
|
15
5
|
} from "../../chunk-2OINBKHY.js";
|
|
@@ -26,6 +16,16 @@ import {
|
|
|
26
16
|
DonutChart,
|
|
27
17
|
foldSegments
|
|
28
18
|
} from "../../chunk-E3YQSYXF.js";
|
|
19
|
+
import {
|
|
20
|
+
AreaChart,
|
|
21
|
+
LineChart
|
|
22
|
+
} from "../../chunk-FB23RQN5.js";
|
|
23
|
+
import {
|
|
24
|
+
Meter
|
|
25
|
+
} from "../../chunk-QRK4J3P3.js";
|
|
26
|
+
import {
|
|
27
|
+
MixedChart
|
|
28
|
+
} from "../../chunk-DE4ALHAW.js";
|
|
29
29
|
import {
|
|
30
30
|
ChartFrame,
|
|
31
31
|
ChartLegend,
|
package/dist/web/index.cjs
CHANGED
|
@@ -10450,15 +10450,35 @@ function MetricCard({
|
|
|
10450
10450
|
trend,
|
|
10451
10451
|
definition,
|
|
10452
10452
|
change,
|
|
10453
|
+
labelStyle = "eyebrow",
|
|
10453
10454
|
className,
|
|
10454
10455
|
...rest
|
|
10455
10456
|
}) {
|
|
10456
10457
|
const labelId = (0, import_react30.useId)();
|
|
10458
|
+
const valueRef = (0, import_react30.useRef)(null);
|
|
10457
10459
|
const comfortable = size === "comfortable";
|
|
10458
10460
|
const placement = iconPlacement ?? (comfortable ? "end" : "label");
|
|
10459
10461
|
const hasEnd = placement === "end" || !!trend;
|
|
10460
10462
|
const iconBox = comfortable ? "size-9 rounded-xl shadow-raised" : placement === "end" ? "size-7 rounded-lg" : "size-5 rounded-md";
|
|
10461
10463
|
const iconGlyph = comfortable ? "text-icon-lg" : placement === "end" ? "text-icon-md" : "text-icon-xs";
|
|
10464
|
+
(0, import_react30.useLayoutEffect)(() => {
|
|
10465
|
+
const el = valueRef.current;
|
|
10466
|
+
const column = el?.parentElement;
|
|
10467
|
+
if (!el || !column || !hasEnd) return;
|
|
10468
|
+
const fit = () => {
|
|
10469
|
+
el.style.fontSize = "";
|
|
10470
|
+
const base = parseFloat(getComputedStyle(el).fontSize);
|
|
10471
|
+
let size2 = base;
|
|
10472
|
+
while (el.scrollWidth > el.clientWidth + 0.5 && size2 > base * 0.6) {
|
|
10473
|
+
size2 -= 1;
|
|
10474
|
+
el.style.fontSize = `${size2}px`;
|
|
10475
|
+
}
|
|
10476
|
+
};
|
|
10477
|
+
fit();
|
|
10478
|
+
const observer = new ResizeObserver(fit);
|
|
10479
|
+
observer.observe(column);
|
|
10480
|
+
return () => observer.disconnect();
|
|
10481
|
+
}, [value, hasEnd, comfortable]);
|
|
10462
10482
|
const iconNode = icon ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
|
|
10463
10483
|
"span",
|
|
10464
10484
|
{
|
|
@@ -10471,7 +10491,15 @@ function MetricCard({
|
|
|
10471
10491
|
children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Icon, { name: icon, className: iconGlyph }) : icon
|
|
10472
10492
|
}
|
|
10473
10493
|
) : null;
|
|
10474
|
-
const labelNode = /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
|
|
10494
|
+
const labelNode = /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
|
|
10495
|
+
"span",
|
|
10496
|
+
{
|
|
10497
|
+
id: labelId,
|
|
10498
|
+
"data-slot": "metric-card-label",
|
|
10499
|
+
className: labelStyle === "title" ? "text-body font-semibold text-foreground" : cn(eyebrow, "text-muted-foreground"),
|
|
10500
|
+
children: label
|
|
10501
|
+
}
|
|
10502
|
+
);
|
|
10475
10503
|
return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
|
|
10476
10504
|
"div",
|
|
10477
10505
|
{
|
|
@@ -10486,34 +10514,40 @@ function MetricCard({
|
|
|
10486
10514
|
),
|
|
10487
10515
|
...rest,
|
|
10488
10516
|
children: [
|
|
10489
|
-
/* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: hasEnd ? "min-w-0 flex-1
|
|
10490
|
-
/* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "
|
|
10491
|
-
|
|
10492
|
-
|
|
10517
|
+
/* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: hasEnd ? "flex min-w-0 flex-1 flex-col justify-between gap-4" : "contents", children: [
|
|
10518
|
+
/* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: hasEnd ? labelStyle === "title" ? "space-y-0" : "space-y-1" : "contents", children: [
|
|
10519
|
+
/* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
10520
|
+
placement === "label" && iconNode,
|
|
10521
|
+
labelNode
|
|
10522
|
+
] }),
|
|
10523
|
+
definition && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("p", { "data-slot": "metric-card-definition", className: "m-0 text-caption text-muted-foreground", children: definition })
|
|
10493
10524
|
] }),
|
|
10494
|
-
|
|
10495
|
-
|
|
10496
|
-
|
|
10497
|
-
|
|
10498
|
-
|
|
10499
|
-
|
|
10500
|
-
|
|
10501
|
-
|
|
10502
|
-
|
|
10503
|
-
|
|
10504
|
-
|
|
10505
|
-
|
|
10506
|
-
|
|
10507
|
-
|
|
10508
|
-
"p",
|
|
10509
|
-
|
|
10510
|
-
"
|
|
10511
|
-
|
|
10512
|
-
|
|
10513
|
-
|
|
10514
|
-
|
|
10525
|
+
/* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: hasEnd ? "space-y-1" : "contents", children: [
|
|
10526
|
+
/* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
|
|
10527
|
+
"p",
|
|
10528
|
+
{
|
|
10529
|
+
ref: valueRef,
|
|
10530
|
+
"data-slot": "metric-card-value",
|
|
10531
|
+
className: cn(
|
|
10532
|
+
"m-0 font-bold tabular-nums text-foreground",
|
|
10533
|
+
hasEnd && "whitespace-nowrap",
|
|
10534
|
+
comfortable ? "text-headline" : "text-body"
|
|
10535
|
+
),
|
|
10536
|
+
children: value
|
|
10537
|
+
}
|
|
10538
|
+
),
|
|
10539
|
+
change && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("p", { "data-slot": "metric-card-change", className: cn("m-0 tabular-nums text-foreground", comfortable ? "text-caption" : "text-xxs"), children: change }),
|
|
10540
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
|
|
10541
|
+
"p",
|
|
10542
|
+
{
|
|
10543
|
+
"data-slot": "metric-card-description",
|
|
10544
|
+
className: cn("m-0 text-muted-foreground", comfortable ? "text-caption" : "text-xxs"),
|
|
10545
|
+
children: description
|
|
10546
|
+
}
|
|
10547
|
+
)
|
|
10548
|
+
] })
|
|
10515
10549
|
] }),
|
|
10516
|
-
hasEnd && /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex shrink-0 flex-col items-end justify-between gap-
|
|
10550
|
+
hasEnd && /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex shrink-0 flex-col items-end justify-between gap-3", children: [
|
|
10517
10551
|
placement === "end" && iconNode,
|
|
10518
10552
|
trend && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { "data-slot": "metric-card-trend", className: "min-h-0 flex-1", children: trend })
|
|
10519
10553
|
] })
|
|
@@ -11351,9 +11385,16 @@ function TrendChart({
|
|
|
11351
11385
|
);
|
|
11352
11386
|
}
|
|
11353
11387
|
function SolidFill({ id, tone }) {
|
|
11388
|
+
const danger = tone === "danger";
|
|
11354
11389
|
return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
|
|
11355
|
-
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
|
|
11356
|
-
|
|
11390
|
+
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
|
|
11391
|
+
"stop",
|
|
11392
|
+
{
|
|
11393
|
+
offset: "0%",
|
|
11394
|
+
style: { stopColor: danger ? `color-mix(in srgb, ${toneFill[tone]}, white 12%)` : `color-mix(in oklab, ${toneFill[tone]}, white 35%)` }
|
|
11395
|
+
}
|
|
11396
|
+
),
|
|
11397
|
+
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)("stop", { offset: "100%", style: { stopColor: danger ? `color-mix(in srgb, ${toneFill[tone]}, black 22%)` : toneFill[tone] } })
|
|
11357
11398
|
] });
|
|
11358
11399
|
}
|
|
11359
11400
|
function Texture({
|
package/dist/web/index.d.cts
CHANGED
|
@@ -2953,6 +2953,12 @@ interface MetricCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children
|
|
|
2953
2953
|
* direction; colour, if any, is the caller's accent on them.
|
|
2954
2954
|
*/
|
|
2955
2955
|
change?: ReactNode;
|
|
2956
|
+
/**
|
|
2957
|
+
* How the label is set: `eyebrow` (default) is the small spaced caps line;
|
|
2958
|
+
* `title` is a title-case, semibold line, for large tiles where the label
|
|
2959
|
+
* names the card.
|
|
2960
|
+
*/
|
|
2961
|
+
labelStyle?: 'eyebrow' | 'title';
|
|
2956
2962
|
}
|
|
2957
2963
|
/**
|
|
2958
2964
|
* A single figure with its label: a balance, a count, a rate.
|
|
@@ -2961,7 +2967,7 @@ interface MetricCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children
|
|
|
2961
2967
|
* that replaces the value (an error line, a dash) is announced as belonging to
|
|
2962
2968
|
* that metric. Pass `aria-label` to override the name.
|
|
2963
2969
|
*/
|
|
2964
|
-
declare function MetricCard({ label, value, description, icon, tone, size, iconPlacement, trend, definition, change, className, ...rest }: MetricCardProps): react_jsx_runtime.JSX.Element;
|
|
2970
|
+
declare function MetricCard({ label, value, description, icon, tone, size, iconPlacement, trend, definition, change, labelStyle, className, ...rest }: MetricCardProps): react_jsx_runtime.JSX.Element;
|
|
2965
2971
|
|
|
2966
2972
|
type CopyState = 'idle' | 'copied' | 'failed';
|
|
2967
2973
|
interface CopyCallbacks {
|
package/dist/web/index.d.ts
CHANGED
|
@@ -2953,6 +2953,12 @@ interface MetricCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children
|
|
|
2953
2953
|
* direction; colour, if any, is the caller's accent on them.
|
|
2954
2954
|
*/
|
|
2955
2955
|
change?: ReactNode;
|
|
2956
|
+
/**
|
|
2957
|
+
* How the label is set: `eyebrow` (default) is the small spaced caps line;
|
|
2958
|
+
* `title` is a title-case, semibold line, for large tiles where the label
|
|
2959
|
+
* names the card.
|
|
2960
|
+
*/
|
|
2961
|
+
labelStyle?: 'eyebrow' | 'title';
|
|
2956
2962
|
}
|
|
2957
2963
|
/**
|
|
2958
2964
|
* A single figure with its label: a balance, a count, a rate.
|
|
@@ -2961,7 +2967,7 @@ interface MetricCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children
|
|
|
2961
2967
|
* that replaces the value (an error line, a dash) is announced as belonging to
|
|
2962
2968
|
* that metric. Pass `aria-label` to override the name.
|
|
2963
2969
|
*/
|
|
2964
|
-
declare function MetricCard({ label, value, description, icon, tone, size, iconPlacement, trend, definition, change, className, ...rest }: MetricCardProps): react_jsx_runtime.JSX.Element;
|
|
2970
|
+
declare function MetricCard({ label, value, description, icon, tone, size, iconPlacement, trend, definition, change, labelStyle, className, ...rest }: MetricCardProps): react_jsx_runtime.JSX.Element;
|
|
2965
2971
|
|
|
2966
2972
|
type CopyState = 'idle' | 'copied' | 'failed';
|
|
2967
2973
|
interface CopyCallbacks {
|
package/dist/web/index.js
CHANGED
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "./chunk-LOGZGZWN.js";
|
|
3
|
-
import {
|
|
4
|
-
AreaChart,
|
|
5
|
-
LineChart
|
|
6
|
-
} from "./chunk-FB23RQN5.js";
|
|
7
|
-
import {
|
|
8
|
-
Meter
|
|
9
|
-
} from "./chunk-QRK4J3P3.js";
|
|
10
|
-
import {
|
|
11
|
-
MixedChart
|
|
12
|
-
} from "./chunk-DE4ALHAW.js";
|
|
13
3
|
import {
|
|
14
4
|
ScatterChart
|
|
15
5
|
} from "./chunk-2OINBKHY.js";
|
|
@@ -27,12 +17,18 @@ import {
|
|
|
27
17
|
foldSegments
|
|
28
18
|
} from "./chunk-E3YQSYXF.js";
|
|
29
19
|
import {
|
|
30
|
-
|
|
31
|
-
|
|
20
|
+
AreaChart,
|
|
21
|
+
LineChart
|
|
22
|
+
} from "./chunk-FB23RQN5.js";
|
|
32
23
|
import {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
24
|
+
Meter
|
|
25
|
+
} from "./chunk-QRK4J3P3.js";
|
|
26
|
+
import {
|
|
27
|
+
MixedChart
|
|
28
|
+
} from "./chunk-DE4ALHAW.js";
|
|
29
|
+
import {
|
|
30
|
+
Toaster
|
|
31
|
+
} from "./chunk-Z5LVT3BD.js";
|
|
36
32
|
import {
|
|
37
33
|
Toast,
|
|
38
34
|
ToastAction,
|
|
@@ -71,11 +67,15 @@ import {
|
|
|
71
67
|
import {
|
|
72
68
|
WithdrawSuccess
|
|
73
69
|
} from "./chunk-WURSWAKE.js";
|
|
70
|
+
import {
|
|
71
|
+
toast,
|
|
72
|
+
useToast
|
|
73
|
+
} from "./chunk-TS4UYWJJ.js";
|
|
74
74
|
import {
|
|
75
75
|
TrendChart,
|
|
76
76
|
trendChartLabelIndices,
|
|
77
77
|
trendChartTicks
|
|
78
|
-
} from "./chunk-
|
|
78
|
+
} from "./chunk-MKZZD3FM.js";
|
|
79
79
|
import {
|
|
80
80
|
ChartFrame,
|
|
81
81
|
ChartLegend,
|
|
@@ -232,7 +232,7 @@ import {
|
|
|
232
232
|
} from "./chunk-XDSOOOYL.js";
|
|
233
233
|
import {
|
|
234
234
|
MetricCard
|
|
235
|
-
} from "./chunk-
|
|
235
|
+
} from "./chunk-O3VC3EQT.js";
|
|
236
236
|
import {
|
|
237
237
|
MobileHeroAnimation
|
|
238
238
|
} from "./chunk-25RRZDZ2.js";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Toaster
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-TS4UYWJJ.js";
|
|
4
|
+
} from "../chunk-Z5LVT3BD.js";
|
|
6
5
|
import "../chunk-2VAS6VYJ.js";
|
|
6
|
+
import "../chunk-TS4UYWJJ.js";
|
|
7
7
|
import "../chunk-BGUBHWIO.js";
|
|
8
8
|
import "../chunk-JY3H7ZAI.js";
|
|
9
9
|
import "../chunk-OWSKP527.js";
|
package/package.json
CHANGED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import {
|
|
3
|
-
Icon
|
|
4
|
-
} from "./chunk-A6MSV4MA.js";
|
|
5
|
-
import {
|
|
6
|
-
eyebrow
|
|
7
|
-
} from "./chunk-MTQOAMDW.js";
|
|
8
|
-
import {
|
|
9
|
-
cn
|
|
10
|
-
} from "./chunk-PMGIJMRO.js";
|
|
11
|
-
|
|
12
|
-
// src/web/components/metric-card.tsx
|
|
13
|
-
import { useId } from "react";
|
|
14
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
-
var toneClasses = {
|
|
16
|
-
primary: "bg-primary/10 text-brand",
|
|
17
|
-
purple: "bg-network-arkade/10 text-network-arkade-fg",
|
|
18
|
-
blue: "bg-info/10 text-info-fg",
|
|
19
|
-
info: "bg-info/10 text-info-fg",
|
|
20
|
-
warning: "bg-warning/10 text-warning-fg",
|
|
21
|
-
success: "bg-success/10 text-success-fg",
|
|
22
|
-
muted: "bg-secondary/15 text-secondary-content"
|
|
23
|
-
};
|
|
24
|
-
function MetricCard({
|
|
25
|
-
label,
|
|
26
|
-
value,
|
|
27
|
-
description,
|
|
28
|
-
icon,
|
|
29
|
-
tone = "muted",
|
|
30
|
-
size = "compact",
|
|
31
|
-
iconPlacement,
|
|
32
|
-
trend,
|
|
33
|
-
definition,
|
|
34
|
-
change,
|
|
35
|
-
className,
|
|
36
|
-
...rest
|
|
37
|
-
}) {
|
|
38
|
-
const labelId = useId();
|
|
39
|
-
const comfortable = size === "comfortable";
|
|
40
|
-
const placement = iconPlacement ?? (comfortable ? "end" : "label");
|
|
41
|
-
const hasEnd = placement === "end" || !!trend;
|
|
42
|
-
const iconBox = comfortable ? "size-9 rounded-xl shadow-raised" : placement === "end" ? "size-7 rounded-lg" : "size-5 rounded-md";
|
|
43
|
-
const iconGlyph = comfortable ? "text-icon-lg" : placement === "end" ? "text-icon-md" : "text-icon-xs";
|
|
44
|
-
const iconNode = icon ? /* @__PURE__ */ jsx(
|
|
45
|
-
"span",
|
|
46
|
-
{
|
|
47
|
-
"data-slot": "metric-card-icon",
|
|
48
|
-
className: cn(
|
|
49
|
-
"flex shrink-0 items-center justify-center",
|
|
50
|
-
iconBox,
|
|
51
|
-
toneClasses[tone]
|
|
52
|
-
),
|
|
53
|
-
children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconGlyph }) : icon
|
|
54
|
-
}
|
|
55
|
-
) : null;
|
|
56
|
-
const labelNode = /* @__PURE__ */ jsx("span", { id: labelId, "data-slot": "metric-card-label", className: cn(eyebrow, "text-muted-foreground"), children: label });
|
|
57
|
-
return /* @__PURE__ */ jsxs(
|
|
58
|
-
"div",
|
|
59
|
-
{
|
|
60
|
-
role: "group",
|
|
61
|
-
"aria-labelledby": rest["aria-label"] ? void 0 : labelId,
|
|
62
|
-
"data-slot": "metric-card",
|
|
63
|
-
"data-size": size,
|
|
64
|
-
className: cn(
|
|
65
|
-
comfortable ? "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-4 shadow-card" : "rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-2.5 shadow-raised",
|
|
66
|
-
hasEnd ? "flex items-stretch justify-between gap-3" : "space-y-1",
|
|
67
|
-
className
|
|
68
|
-
),
|
|
69
|
-
...rest,
|
|
70
|
-
children: [
|
|
71
|
-
/* @__PURE__ */ jsxs("div", { className: hasEnd ? "min-w-0 flex-1 space-y-1" : "contents", children: [
|
|
72
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
73
|
-
placement === "label" && iconNode,
|
|
74
|
-
labelNode
|
|
75
|
-
] }),
|
|
76
|
-
definition && /* @__PURE__ */ jsx("p", { "data-slot": "metric-card-definition", className: "m-0 text-caption text-muted-foreground", children: definition }),
|
|
77
|
-
/* @__PURE__ */ jsx(
|
|
78
|
-
"p",
|
|
79
|
-
{
|
|
80
|
-
"data-slot": "metric-card-value",
|
|
81
|
-
className: cn(
|
|
82
|
-
"m-0 font-bold tabular-nums text-foreground",
|
|
83
|
-
comfortable ? "text-headline" : "text-body"
|
|
84
|
-
),
|
|
85
|
-
children: value
|
|
86
|
-
}
|
|
87
|
-
),
|
|
88
|
-
change && /* @__PURE__ */ jsx("p", { "data-slot": "metric-card-change", className: cn("m-0 tabular-nums text-foreground", comfortable ? "text-caption" : "text-xxs"), children: change }),
|
|
89
|
-
description && /* @__PURE__ */ jsx(
|
|
90
|
-
"p",
|
|
91
|
-
{
|
|
92
|
-
"data-slot": "metric-card-description",
|
|
93
|
-
className: cn("m-0 text-muted-foreground", comfortable ? "text-caption" : "text-xxs"),
|
|
94
|
-
children: description
|
|
95
|
-
}
|
|
96
|
-
)
|
|
97
|
-
] }),
|
|
98
|
-
hasEnd && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end justify-between gap-2", children: [
|
|
99
|
-
placement === "end" && iconNode,
|
|
100
|
-
trend && /* @__PURE__ */ jsx("div", { "data-slot": "metric-card-trend", className: "min-h-0 flex-1", children: trend })
|
|
101
|
-
] })
|
|
102
|
-
]
|
|
103
|
-
}
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
export {
|
|
108
|
-
MetricCard
|
|
109
|
-
};
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
useToast
|
|
4
|
-
} from "./chunk-TS4UYWJJ.js";
|
|
5
2
|
import {
|
|
6
3
|
Toast,
|
|
7
4
|
ToastClose,
|
|
@@ -10,6 +7,9 @@ import {
|
|
|
10
7
|
ToastTitle,
|
|
11
8
|
ToastViewport
|
|
12
9
|
} from "./chunk-2VAS6VYJ.js";
|
|
10
|
+
import {
|
|
11
|
+
useToast
|
|
12
|
+
} from "./chunk-TS4UYWJJ.js";
|
|
13
13
|
import {
|
|
14
14
|
useCopyToClipboard
|
|
15
15
|
} from "./chunk-BGUBHWIO.js";
|