@cloudflare/kumo 1.13.1 → 1.14.1
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/CHANGELOG.md +35 -0
- package/ai/component-registry.json +57 -30
- package/ai/component-registry.md +247 -19
- package/ai/schemas.ts +3 -2
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +10 -2
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +175 -173
- package/dist/ai/schemas.js.map +1 -1
- package/dist/chunks/Legend-mkh1v83sz972e29d.js +407 -0
- package/dist/chunks/Legend-mkh1v83sz972e29d.js.map +1 -0
- package/dist/chunks/{breadcrumbs-e564gabk59go37cg.js → breadcrumbs-gr907zcoo65rpn90.js} +2 -2
- package/dist/chunks/{breadcrumbs-e564gabk59go37cg.js.map → breadcrumbs-gr907zcoo65rpn90.js.map} +1 -1
- package/dist/chunks/{button-b1yp3lbrhjr9eg07.js → button-d82sexqgnd834eaa.js} +2 -2
- package/dist/chunks/{button-b1yp3lbrhjr9eg07.js.map → button-d82sexqgnd834eaa.js.map} +1 -1
- package/dist/chunks/{checkbox-khvh0efmlzvlo6qi.js → checkbox-f4qsbq6xycaji7qw.js} +3 -3
- package/dist/chunks/{checkbox-khvh0efmlzvlo6qi.js.map → checkbox-f4qsbq6xycaji7qw.js.map} +1 -1
- package/dist/chunks/{clipboard-text-jvrlvyz5ulm49h5b.js → clipboard-text-fvggzgqrza82t5om.js} +4 -4
- package/dist/chunks/{clipboard-text-jvrlvyz5ulm49h5b.js.map → clipboard-text-fvggzgqrza82t5om.js.map} +1 -1
- package/dist/chunks/{combobox-i3mdp6f01dvpoc5j.js → combobox-om4zw74o076sa00p.js} +61 -50
- package/dist/chunks/combobox-om4zw74o076sa00p.js.map +1 -0
- package/dist/chunks/{command-palette-l8dym46a74o7j8ci.js → command-palette-ejoszjfivybu9yi5.js} +3 -3
- package/dist/chunks/{command-palette-l8dym46a74o7j8ci.js.map → command-palette-ejoszjfivybu9yi5.js.map} +1 -1
- package/dist/chunks/{dialog-emk68n0piw8u7hkb.js → dialog-gkmecnx48ge38jrr.js} +11 -11
- package/dist/chunks/dialog-gkmecnx48ge38jrr.js.map +1 -0
- package/dist/chunks/{dropdown-ejgjnn9gq3daua1h.js → dropdown-i8n7nv3cvkvb1x3e.js} +2 -2
- package/dist/chunks/{dropdown-ejgjnn9gq3daua1h.js.map → dropdown-i8n7nv3cvkvb1x3e.js.map} +1 -1
- package/dist/chunks/{empty-crbntv0dhud7besh.js → empty-h3qhwtx0z8arupc9.js} +2 -2
- package/dist/chunks/{empty-crbntv0dhud7besh.js.map → empty-h3qhwtx0z8arupc9.js.map} +1 -1
- package/dist/chunks/{field-ftrgblg9mbmz9eo3.js → field-lc4gr226y5aqlctf.js} +3 -3
- package/dist/chunks/{field-ftrgblg9mbmz9eo3.js.map → field-lc4gr226y5aqlctf.js.map} +1 -1
- package/dist/chunks/input-area-ce3bf8m8wvot44kg.js +74 -0
- package/dist/chunks/input-area-ce3bf8m8wvot44kg.js.map +1 -0
- package/dist/chunks/{input-group-g6qyhe5jvpe02hee.js → input-group-kttdor9mr32k289o.js} +3 -3
- package/dist/chunks/{input-group-g6qyhe5jvpe02hee.js.map → input-group-kttdor9mr32k289o.js.map} +1 -1
- package/dist/chunks/{input-me56hug8sl0u650q.js → input-nvne68upfj8b2bk6.js} +20 -20
- package/dist/chunks/input-nvne68upfj8b2bk6.js.map +1 -0
- package/dist/chunks/{label-eooot7dhtfvw7n3x.js → label-e42o95ab0dxmchxb.js} +3 -3
- package/dist/chunks/{label-eooot7dhtfvw7n3x.js.map → label-e42o95ab0dxmchxb.js.map} +1 -1
- package/dist/chunks/{layer-card-8azgeai6zsrdbeoj.js → layer-card-mu2w82x6ko1nhhtr.js} +7 -7
- package/dist/chunks/{layer-card-8azgeai6zsrdbeoj.js.map → layer-card-mu2w82x6ko1nhhtr.js.map} +1 -1
- package/dist/chunks/{link-moetfdbgxda0yhwg.js → link-lpzl5s47pmobk361.js} +2 -2
- package/dist/chunks/{link-moetfdbgxda0yhwg.js.map → link-lpzl5s47pmobk361.js.map} +1 -1
- package/dist/chunks/{menubar-c2zwv4mbo3xqq7is.js → menubar-ifxxdoa35zz79z1q.js} +2 -2
- package/dist/chunks/{menubar-c2zwv4mbo3xqq7is.js.map → menubar-ifxxdoa35zz79z1q.js.map} +1 -1
- package/dist/chunks/{meter-em2hfu8j2rhmf5ae.js → meter-fbtqfg0okpwmaiju.js} +2 -2
- package/dist/chunks/{meter-em2hfu8j2rhmf5ae.js.map → meter-fbtqfg0okpwmaiju.js.map} +1 -1
- package/dist/chunks/{pagination-xt93wvwvow4z44lc.js → pagination-owm6h66jjgv1tjoe.js} +3 -3
- package/dist/chunks/{pagination-xt93wvwvow4z44lc.js.map → pagination-owm6h66jjgv1tjoe.js.map} +1 -1
- package/dist/chunks/{popover-irccwetx73p8pnua.js → popover-dd7hi5ajeoq9od1i.js} +2 -2
- package/dist/chunks/{popover-irccwetx73p8pnua.js.map → popover-dd7hi5ajeoq9od1i.js.map} +1 -1
- package/dist/chunks/radio-ff1csb328f12smd4.js +200 -0
- package/dist/chunks/radio-ff1csb328f12smd4.js.map +1 -0
- package/dist/chunks/{select-jxxef2rf76pgdrf8.js → select-go7a0z3evkh9cfxq.js} +41 -34
- package/dist/chunks/select-go7a0z3evkh9cfxq.js.map +1 -0
- package/dist/chunks/{sensitive-input-i7ey1w0ky7nco012.js → sensitive-input-gtzk3vit4i35n95g.js} +34 -34
- package/dist/chunks/sensitive-input-gtzk3vit4i35n95g.js.map +1 -0
- package/dist/chunks/switch-cpbp0i75jnazkani.js +241 -0
- package/dist/chunks/switch-cpbp0i75jnazkani.js.map +1 -0
- package/dist/chunks/{table-d4ql7fjvok30xs1f.js → table-g41yb7ruredizqr8.js} +3 -3
- package/dist/chunks/table-g41yb7ruredizqr8.js.map +1 -0
- package/dist/chunks/{tabs-n3rcvuzx0gbslyy6.js → tabs-hy6oa7xtf96d9mxt.js} +27 -27
- package/dist/chunks/{tabs-n3rcvuzx0gbslyy6.js.map → tabs-hy6oa7xtf96d9mxt.js.map} +1 -1
- package/dist/chunks/{toast-j05qj3vk688ht1i1.js → toast-j5gtfc50xpzzd0hc.js} +3 -3
- package/dist/chunks/{toast-j05qj3vk688ht1i1.js.map → toast-j5gtfc50xpzzd0hc.js.map} +1 -1
- package/dist/chunks/{tooltip-es2dwwbhftg4k2jy.js → tooltip-k68wcv9mrigb7rcb.js} +2 -2
- package/dist/chunks/{tooltip-es2dwwbhftg4k2jy.js.map → tooltip-k68wcv9mrigb7rcb.js.map} +1 -1
- package/dist/chunks/{vendor-base-ui-kxxocm122zr4pipe.js → vendor-base-ui-cpvkrhz4zgw9nw2b.js} +18 -18
- package/dist/chunks/{vendor-base-ui-kxxocm122zr4pipe.js.map → vendor-base-ui-cpvkrhz4zgw9nw2b.js.map} +1 -1
- package/dist/code.js +1 -1
- package/dist/code.js.map +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/chart.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/flow.js +1435 -1431
- package/dist/components/flow.js.map +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/layer-card.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/tooltip.js +1 -1
- package/dist/index.js +70 -69
- package/dist/primitives/accordion.js +1 -1
- package/dist/primitives/alert-dialog.js +1 -1
- package/dist/primitives/autocomplete.js +1 -1
- package/dist/primitives/avatar.js +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/primitives/checkbox-group.js +1 -1
- package/dist/primitives/checkbox.js +1 -1
- package/dist/primitives/collapsible.js +1 -1
- package/dist/primitives/combobox.js +1 -1
- package/dist/primitives/context-menu.js +1 -1
- package/dist/primitives/csp-provider.js +1 -1
- package/dist/primitives/dialog.js +1 -1
- package/dist/primitives/direction-provider.js +1 -1
- package/dist/primitives/drawer.js +1 -1
- package/dist/primitives/field.js +1 -1
- package/dist/primitives/fieldset.js +1 -1
- package/dist/primitives/form.js +1 -1
- package/dist/primitives/input.js +1 -1
- package/dist/primitives/menu.js +1 -1
- package/dist/primitives/menubar.js +1 -1
- package/dist/primitives/meter.js +1 -1
- package/dist/primitives/navigation-menu.js +1 -1
- package/dist/primitives/number-field.js +1 -1
- package/dist/primitives/popover.js +1 -1
- package/dist/primitives/preview-card.js +1 -1
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/radio-group.js +1 -1
- package/dist/primitives/radio.js +1 -1
- package/dist/primitives/scroll-area.js +1 -1
- package/dist/primitives/select.js +1 -1
- package/dist/primitives/separator.js +1 -1
- package/dist/primitives/slider.js +1 -1
- package/dist/primitives/switch.js +1 -1
- package/dist/primitives/tabs.js +1 -1
- package/dist/primitives/toast.js +1 -1
- package/dist/primitives/toggle-group.js +1 -1
- package/dist/primitives/toggle.js +1 -1
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives/tooltip.js +1 -1
- package/dist/primitives.js +1 -1
- package/dist/scripts/theme-generator/config.d.ts.map +1 -1
- package/dist/scripts/theme-generator/config.js +12 -3
- package/dist/scripts/theme-generator/config.js.map +1 -1
- package/dist/src/code/code-highlighted.d.ts +2 -2
- package/dist/src/code/code-highlighted.d.ts.map +1 -1
- package/dist/src/code/provider.d.ts +2 -2
- package/dist/src/code/provider.d.ts.map +1 -1
- package/dist/src/components/chart/EChart.d.ts +7 -2
- package/dist/src/components/chart/EChart.d.ts.map +1 -1
- package/dist/src/components/combobox/combobox.d.ts.map +1 -1
- package/dist/src/components/flow/diagram.d.ts.map +1 -1
- package/dist/src/components/input/input-area.d.ts.map +1 -1
- package/dist/src/components/radio/index.d.ts +1 -1
- package/dist/src/components/radio/index.d.ts.map +1 -1
- package/dist/src/components/radio/radio.d.ts +43 -4
- package/dist/src/components/radio/radio.d.ts.map +1 -1
- package/dist/src/components/select/select.d.ts.map +1 -1
- package/dist/src/components/switch/switch.d.ts +8 -8
- package/dist/src/components/switch/switch.d.ts.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-binding.css +5 -0
- package/dist/styles/kumo-standalone.css +1 -1
- package/dist/styles/theme-kumo.css +7 -0
- package/package.json +3 -6
- package/scripts/theme-generator/config.ts +12 -3
- package/dist/chunks/Legend-fu32ev5ph2ehbfzy.js +0 -402
- package/dist/chunks/Legend-fu32ev5ph2ehbfzy.js.map +0 -1
- package/dist/chunks/combobox-i3mdp6f01dvpoc5j.js.map +0 -1
- package/dist/chunks/dialog-emk68n0piw8u7hkb.js.map +0 -1
- package/dist/chunks/input-area-hxtyrqpp44m18j72.js +0 -59
- package/dist/chunks/input-area-hxtyrqpp44m18j72.js.map +0 -1
- package/dist/chunks/input-me56hug8sl0u650q.js.map +0 -1
- package/dist/chunks/radio-394mfs3au5m8cgd8.js +0 -125
- package/dist/chunks/radio-394mfs3au5m8cgd8.js.map +0 -1
- package/dist/chunks/select-jxxef2rf76pgdrf8.js.map +0 -1
- package/dist/chunks/sensitive-input-i7ey1w0ky7nco012.js.map +0 -1
- package/dist/chunks/switch-b0xo8fxsfzv87krj.js +0 -257
- package/dist/chunks/switch-b0xo8fxsfzv87krj.js.map +0 -1
- package/dist/chunks/table-d4ql7fjvok30xs1f.js.map +0 -1
|
@@ -1,402 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as f, jsxs as D } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef as J, useRef as v, useEffect as N, useMemo as H } from "react";
|
|
4
|
-
import { c as F } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
-
var k = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Neutral = "#82B6FF", e.NeutralLight = "#B9D6FF", e.Disabled = "#B6B6B6", e.DisabledLight = "#D9D9D9", e))(k || {}), X = /* @__PURE__ */ ((e) => (e.Attention = "#FC574AE6", e.Warning = "#F8A054E6", e.Neutral = "#82B6FFE6", e.NeutralLight = "#B9D6FFE6", e.Disabled = "#B6B6B6E6", e.DisabledLight = "#D9D9D9E6", e))(X || {});
|
|
6
|
-
const P = [
|
|
7
|
-
"#086FFF",
|
|
8
|
-
"#CF7EE9",
|
|
9
|
-
"#73CEE6",
|
|
10
|
-
"#5B5FEF",
|
|
11
|
-
"#82B6FF",
|
|
12
|
-
"#F5609F",
|
|
13
|
-
"#C2BDF3",
|
|
14
|
-
"#8D1EB1",
|
|
15
|
-
"#EBCAF6",
|
|
16
|
-
"#7366E4"
|
|
17
|
-
/* Indigo2 */
|
|
18
|
-
], W = [
|
|
19
|
-
"#086FFFE6",
|
|
20
|
-
"#CF7EE9E6",
|
|
21
|
-
"#73CEE6E6",
|
|
22
|
-
"#5B5FEFE6",
|
|
23
|
-
"#82B6FFE6",
|
|
24
|
-
"#F5609FE6",
|
|
25
|
-
"#C2BDF3E6",
|
|
26
|
-
"#8D1EB1E6",
|
|
27
|
-
"#EBCAF6E6",
|
|
28
|
-
"#7366E4E6"
|
|
29
|
-
/* Indigo2 */
|
|
30
|
-
];
|
|
31
|
-
var _;
|
|
32
|
-
((e) => {
|
|
33
|
-
function n(r, t = !1) {
|
|
34
|
-
return t ? X[r] : k[r];
|
|
35
|
-
}
|
|
36
|
-
e.semantic = n;
|
|
37
|
-
function l(r, t = !1) {
|
|
38
|
-
return t ? W[r % W.length] : P[r % P.length];
|
|
39
|
-
}
|
|
40
|
-
e.color = l;
|
|
41
|
-
})(_ || (_ = {}));
|
|
42
|
-
const K = J(function({
|
|
43
|
-
echarts: n,
|
|
44
|
-
options: l,
|
|
45
|
-
className: r,
|
|
46
|
-
isDarkMode: t,
|
|
47
|
-
height: h = 350,
|
|
48
|
-
onEvents: u
|
|
49
|
-
}, c) {
|
|
50
|
-
const m = v(null), i = v(null), E = v({}), d = v({}), y = v(/* @__PURE__ */ new Set());
|
|
51
|
-
return N(() => {
|
|
52
|
-
if (!m.current) return;
|
|
53
|
-
const a = n.init(
|
|
54
|
-
m.current,
|
|
55
|
-
t ? "dark" : {
|
|
56
|
-
color: t ? W : P
|
|
57
|
-
}
|
|
58
|
-
);
|
|
59
|
-
return i.current = a, typeof c == "function" ? c(a) : c && (c.current = a), () => {
|
|
60
|
-
for (const p of y.current) {
|
|
61
|
-
const s = d.current[p];
|
|
62
|
-
s && a.off(p, s);
|
|
63
|
-
}
|
|
64
|
-
y.current.clear(), typeof c == "function" ? c(null) : c && (c.current = null), i.current = null, a.dispose();
|
|
65
|
-
};
|
|
66
|
-
}, [m, t]), N(() => {
|
|
67
|
-
const a = i.current;
|
|
68
|
-
a && a.setOption(l, { notMerge: !0, lazyUpdate: !0 });
|
|
69
|
-
}, [t, l]), N(() => {
|
|
70
|
-
E.current = u ?? {};
|
|
71
|
-
}, [u]), N(() => {
|
|
72
|
-
const a = i.current;
|
|
73
|
-
if (!a) return;
|
|
74
|
-
const p = /* @__PURE__ */ new Set();
|
|
75
|
-
for (const [s, b] of Object.entries(u ?? {}))
|
|
76
|
-
typeof b == "function" && (p.add(s), d.current[s] || (d.current[s] = (x) => {
|
|
77
|
-
E.current[s]?.(x);
|
|
78
|
-
}), y.current.has(s) || a.on(s, d.current[s]));
|
|
79
|
-
for (const s of y.current) {
|
|
80
|
-
if (p.has(s)) continue;
|
|
81
|
-
const b = d.current[s];
|
|
82
|
-
b && a.off(s, b);
|
|
83
|
-
}
|
|
84
|
-
y.current = p;
|
|
85
|
-
}, [n, t, u]), N(() => {
|
|
86
|
-
const a = i.current, p = m.current;
|
|
87
|
-
if (!a || !p) return;
|
|
88
|
-
let s = !0;
|
|
89
|
-
const b = new ResizeObserver(() => {
|
|
90
|
-
if (s) {
|
|
91
|
-
s = !1;
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
a.resize();
|
|
95
|
-
});
|
|
96
|
-
return b.observe(p), () => b.disconnect();
|
|
97
|
-
}, []), /* @__PURE__ */ f("div", { ref: m, className: F("w-full", r), style: { height: h } });
|
|
98
|
-
});
|
|
99
|
-
K.displayName = "Chart";
|
|
100
|
-
function se({
|
|
101
|
-
echarts: e,
|
|
102
|
-
type: n = "line",
|
|
103
|
-
data: l,
|
|
104
|
-
xAxisName: r,
|
|
105
|
-
xAxisTickCount: t,
|
|
106
|
-
xAxisTickFormat: h,
|
|
107
|
-
yAxisTickFormat: u,
|
|
108
|
-
yAxisTickLabelFormat: c,
|
|
109
|
-
yAxisName: m,
|
|
110
|
-
yAxisTickCount: i,
|
|
111
|
-
tooltipValueFormat: E,
|
|
112
|
-
onTimeRangeChange: d,
|
|
113
|
-
height: y = 350,
|
|
114
|
-
incomplete: a,
|
|
115
|
-
isDarkMode: p,
|
|
116
|
-
gradient: s,
|
|
117
|
-
loading: b
|
|
118
|
-
}) {
|
|
119
|
-
const x = v(null), M = a?.before, G = a?.after, U = H(() => {
|
|
120
|
-
const g = [], I = n === "bar" ? { type: "bar", stack: "total" } : { type: "line", showSymbol: !1 };
|
|
121
|
-
for (const o of l) {
|
|
122
|
-
const B = M && n === "line" ? o.data.filter((A) => A[0] <= M) : [], w = G && n === "line" ? o.data.filter((A) => A[0] >= G) : [], S = B.length > 0 || w.length > 0 ? o.data.slice(
|
|
123
|
-
Math.max(0, B.length - 1),
|
|
124
|
-
Math.max(0, o.data.length - w.length + 1)
|
|
125
|
-
) : o.data, R = s && n === "line" ? {
|
|
126
|
-
color: new e.graphic.LinearGradient(0, 0, 0, 1, [
|
|
127
|
-
{ offset: 0, color: T(o.color, 0.4) },
|
|
128
|
-
{ offset: 1, color: T(o.color, 0) }
|
|
129
|
-
])
|
|
130
|
-
} : void 0;
|
|
131
|
-
g.push({
|
|
132
|
-
data: S,
|
|
133
|
-
color: o.color,
|
|
134
|
-
name: o.name,
|
|
135
|
-
...R ? { areaStyle: R } : {},
|
|
136
|
-
...I
|
|
137
|
-
});
|
|
138
|
-
const L = {
|
|
139
|
-
color: o.color,
|
|
140
|
-
name: o.name,
|
|
141
|
-
type: "line",
|
|
142
|
-
lineStyle: { type: "dashed" },
|
|
143
|
-
showSymbol: !1
|
|
144
|
-
};
|
|
145
|
-
B.length > 0 && g.push({
|
|
146
|
-
...L,
|
|
147
|
-
data: B
|
|
148
|
-
}), w.length > 0 && g.push({
|
|
149
|
-
...L,
|
|
150
|
-
data: w
|
|
151
|
-
});
|
|
152
|
-
}
|
|
153
|
-
return {
|
|
154
|
-
aria: {
|
|
155
|
-
enabled: !0
|
|
156
|
-
},
|
|
157
|
-
brush: {
|
|
158
|
-
snapToData: !0,
|
|
159
|
-
xAxisIndex: "all",
|
|
160
|
-
brushType: "lineX",
|
|
161
|
-
brushMode: "single",
|
|
162
|
-
outOfBrush: {
|
|
163
|
-
colorAlpha: 0.3
|
|
164
|
-
},
|
|
165
|
-
brushStyle: {
|
|
166
|
-
borderWidth: 1,
|
|
167
|
-
color: "rgba(120,140,180,0.3)",
|
|
168
|
-
borderColor: "rgba(120,140,180,0.8)"
|
|
169
|
-
}
|
|
170
|
-
},
|
|
171
|
-
tooltip: {
|
|
172
|
-
trigger: "axis",
|
|
173
|
-
axisPointer: { type: "shadow" },
|
|
174
|
-
formatter: (o) => {
|
|
175
|
-
const B = Array.isArray(o) ? o : [o], w = /* @__PURE__ */ new Set(), S = B.filter(($) => w.has($.seriesName) ? !1 : (w.add($.seriesName), !0)), R = S[0], L = R?.value?.[0] ?? R?.axisValue, A = L != null ? `<div style="font-weight:600;margin-bottom:4px;">${V(L)}</div>` : "", q = S.map(($) => {
|
|
176
|
-
const z = $?.value?.[1], C = E ?? c;
|
|
177
|
-
return `${$.marker} ${$.seriesName}: <strong>${C ? C(z) : z}</strong>`;
|
|
178
|
-
}).join("<br/>");
|
|
179
|
-
return `${A}${q}`;
|
|
180
|
-
}
|
|
181
|
-
},
|
|
182
|
-
backgroundColor: "transparent",
|
|
183
|
-
toolbox: { show: !1 },
|
|
184
|
-
xAxis: {
|
|
185
|
-
name: r,
|
|
186
|
-
nameLocation: "middle",
|
|
187
|
-
nameGap: 30,
|
|
188
|
-
type: "time",
|
|
189
|
-
splitLine: {
|
|
190
|
-
show: !1
|
|
191
|
-
},
|
|
192
|
-
axisLine: { show: !1 },
|
|
193
|
-
splitNumber: t ?? 5,
|
|
194
|
-
...h && {
|
|
195
|
-
axisLabel: {
|
|
196
|
-
formatter: (o) => h(o)
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
},
|
|
200
|
-
yAxis: {
|
|
201
|
-
name: m,
|
|
202
|
-
nameLocation: "middle",
|
|
203
|
-
nameGap: 40,
|
|
204
|
-
type: "value",
|
|
205
|
-
axisTick: { show: !0 },
|
|
206
|
-
axisLabel: {
|
|
207
|
-
margin: 15,
|
|
208
|
-
...u && {
|
|
209
|
-
formatter: (o) => u(o)
|
|
210
|
-
}
|
|
211
|
-
},
|
|
212
|
-
splitLine: {
|
|
213
|
-
show: !0,
|
|
214
|
-
lineStyle: { type: "dashed", width: 1 }
|
|
215
|
-
},
|
|
216
|
-
splitNumber: i
|
|
217
|
-
},
|
|
218
|
-
grid: {
|
|
219
|
-
left: m ? 30 : 24,
|
|
220
|
-
right: 24,
|
|
221
|
-
top: 24,
|
|
222
|
-
bottom: r ? 30 : 24
|
|
223
|
-
},
|
|
224
|
-
series: g
|
|
225
|
-
};
|
|
226
|
-
}, [
|
|
227
|
-
l,
|
|
228
|
-
r,
|
|
229
|
-
t,
|
|
230
|
-
h,
|
|
231
|
-
u,
|
|
232
|
-
c,
|
|
233
|
-
m,
|
|
234
|
-
i,
|
|
235
|
-
E,
|
|
236
|
-
M,
|
|
237
|
-
G,
|
|
238
|
-
n,
|
|
239
|
-
s,
|
|
240
|
-
e
|
|
241
|
-
]), Y = H(() => d ? {
|
|
242
|
-
brushend: (g) => {
|
|
243
|
-
const I = g.areas[0].coordRange;
|
|
244
|
-
d(I[0], I[1]), x.current?.dispatchAction({ type: "brush", areas: [] });
|
|
245
|
-
}
|
|
246
|
-
} : {}, [d]), j = !!d;
|
|
247
|
-
return N(() => {
|
|
248
|
-
const g = x.current;
|
|
249
|
-
if (g && j)
|
|
250
|
-
return g.dispatchAction({
|
|
251
|
-
type: "takeGlobalCursor",
|
|
252
|
-
key: "brush",
|
|
253
|
-
brushOption: {
|
|
254
|
-
brushType: "lineX",
|
|
255
|
-
brushMode: "single"
|
|
256
|
-
}
|
|
257
|
-
}), () => {
|
|
258
|
-
g.dispatchAction({
|
|
259
|
-
type: "takeGlobalCursor",
|
|
260
|
-
key: "brush",
|
|
261
|
-
brushOption: {
|
|
262
|
-
brushType: !1
|
|
263
|
-
}
|
|
264
|
-
});
|
|
265
|
-
};
|
|
266
|
-
}, [x, j, b]), /* @__PURE__ */ D("div", { className: "relative w-full", style: { height: y }, children: [
|
|
267
|
-
b && /* @__PURE__ */ f(Q, { height: y, isDarkMode: p }),
|
|
268
|
-
!b && /* @__PURE__ */ f(
|
|
269
|
-
K,
|
|
270
|
-
{
|
|
271
|
-
echarts: e,
|
|
272
|
-
ref: x,
|
|
273
|
-
options: U,
|
|
274
|
-
height: y,
|
|
275
|
-
isDarkMode: p,
|
|
276
|
-
onEvents: Y
|
|
277
|
-
}
|
|
278
|
-
)
|
|
279
|
-
] });
|
|
280
|
-
}
|
|
281
|
-
function Q({
|
|
282
|
-
height: e,
|
|
283
|
-
isDarkMode: n
|
|
284
|
-
}) {
|
|
285
|
-
const l = e / 2, r = Math.min(e * 0.12, 28), t = 400, h = 120, u = [];
|
|
286
|
-
for (let i = 0; i <= h; i++) {
|
|
287
|
-
const E = -t + i / h * t * 3, d = l + Math.sin(i / h * 2 * Math.PI * 3) * r;
|
|
288
|
-
u.push(`${i === 0 ? "M" : "L"}${E.toFixed(2)},${d.toFixed(2)}`);
|
|
289
|
-
}
|
|
290
|
-
const c = u.join(" "), m = n ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
|
|
291
|
-
return /* @__PURE__ */ f(
|
|
292
|
-
"div",
|
|
293
|
-
{
|
|
294
|
-
"aria-hidden": "true",
|
|
295
|
-
className: "absolute inset-0 overflow-hidden",
|
|
296
|
-
style: { height: e },
|
|
297
|
-
children: /* @__PURE__ */ f(
|
|
298
|
-
"svg",
|
|
299
|
-
{
|
|
300
|
-
width: "100%",
|
|
301
|
-
height: e,
|
|
302
|
-
viewBox: `0 0 ${t} ${e}`,
|
|
303
|
-
preserveAspectRatio: "none",
|
|
304
|
-
className: "w-full animate-pulse",
|
|
305
|
-
children: /* @__PURE__ */ f(
|
|
306
|
-
"path",
|
|
307
|
-
{
|
|
308
|
-
d: c,
|
|
309
|
-
fill: "none",
|
|
310
|
-
stroke: m,
|
|
311
|
-
strokeWidth: "2",
|
|
312
|
-
style: {
|
|
313
|
-
animation: "kumo-chart-wave 2.4s linear infinite",
|
|
314
|
-
transformOrigin: "0 0"
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
)
|
|
318
|
-
}
|
|
319
|
-
)
|
|
320
|
-
}
|
|
321
|
-
);
|
|
322
|
-
}
|
|
323
|
-
function T(e, n) {
|
|
324
|
-
const l = Math.max(0, Math.min(1, n)), r = e.match(
|
|
325
|
-
/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
|
|
326
|
-
);
|
|
327
|
-
if (r)
|
|
328
|
-
return `rgba(${r[1]}, ${r[2]}, ${r[3]}, ${l})`;
|
|
329
|
-
let t = e.replace(/^#/, "");
|
|
330
|
-
t.length === 3 && (t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2]), t.length === 8 && (t = t.slice(0, 6));
|
|
331
|
-
const h = parseInt(t.slice(0, 2), 16), u = parseInt(t.slice(2, 4), 16), c = parseInt(t.slice(4, 6), 16);
|
|
332
|
-
return `rgba(${h}, ${u}, ${c}, ${l})`;
|
|
333
|
-
}
|
|
334
|
-
function O(e) {
|
|
335
|
-
return e.toString().padStart(2, "0");
|
|
336
|
-
}
|
|
337
|
-
function V(e) {
|
|
338
|
-
const n = new Date(e);
|
|
339
|
-
return `${n.getFullYear()}-${O(n.getMonth() + 1)}-${O(n.getDate())} ${O(n.getHours())}:${O(n.getMinutes())}:${O(n.getSeconds())}`;
|
|
340
|
-
}
|
|
341
|
-
function Z({ color: e, value: n, name: l, unit: r, inactive: t }) {
|
|
342
|
-
return /* @__PURE__ */ D("div", { className: "inline-flex flex-col gap-2 min-w-42 py-2", children: [
|
|
343
|
-
/* @__PURE__ */ D("div", { className: "flex items-center gap-2", children: [
|
|
344
|
-
/* @__PURE__ */ f(
|
|
345
|
-
"span",
|
|
346
|
-
{
|
|
347
|
-
className: F("size-2 rounded-full inline-block", {
|
|
348
|
-
"opacity-50": t
|
|
349
|
-
}),
|
|
350
|
-
style: { backgroundColor: e }
|
|
351
|
-
}
|
|
352
|
-
),
|
|
353
|
-
/* @__PURE__ */ f("span", { className: F("text-xs", { "opacity-50": t }), children: l })
|
|
354
|
-
] }),
|
|
355
|
-
/* @__PURE__ */ D("div", { className: "flex items-baseline gap-0.5", children: [
|
|
356
|
-
/* @__PURE__ */ f(
|
|
357
|
-
"span",
|
|
358
|
-
{
|
|
359
|
-
className: F("text-lg font-medium leading-none", {
|
|
360
|
-
"opacity-50": t
|
|
361
|
-
}),
|
|
362
|
-
children: n
|
|
363
|
-
}
|
|
364
|
-
),
|
|
365
|
-
r && /* @__PURE__ */ f(
|
|
366
|
-
"span",
|
|
367
|
-
{
|
|
368
|
-
className: F("text-xs text-kumo-subtle leading-none", {
|
|
369
|
-
"opacity-50": t
|
|
370
|
-
}),
|
|
371
|
-
children: r
|
|
372
|
-
}
|
|
373
|
-
)
|
|
374
|
-
] })
|
|
375
|
-
] });
|
|
376
|
-
}
|
|
377
|
-
function ee({ color: e, value: n, name: l, inactive: r }) {
|
|
378
|
-
return /* @__PURE__ */ D("div", { className: "inline-flex items-center gap-2", children: [
|
|
379
|
-
/* @__PURE__ */ f(
|
|
380
|
-
"span",
|
|
381
|
-
{
|
|
382
|
-
className: F("size-2 rounded-full inline-block", {
|
|
383
|
-
"opacity-50": r
|
|
384
|
-
}),
|
|
385
|
-
style: { backgroundColor: e }
|
|
386
|
-
}
|
|
387
|
-
),
|
|
388
|
-
/* @__PURE__ */ f("span", { className: F("text-xs", { "opacity-50": r }), children: l }),
|
|
389
|
-
/* @__PURE__ */ f("span", { className: F("text-xs font-medium", { "opacity-50": r }), children: n })
|
|
390
|
-
] });
|
|
391
|
-
}
|
|
392
|
-
const oe = {
|
|
393
|
-
SmallItem: ee,
|
|
394
|
-
LargeItem: Z
|
|
395
|
-
};
|
|
396
|
-
export {
|
|
397
|
-
K as C,
|
|
398
|
-
se as T,
|
|
399
|
-
oe as a,
|
|
400
|
-
_ as b
|
|
401
|
-
};
|
|
402
|
-
//# sourceMappingURL=Legend-fu32ev5ph2ehbfzy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Legend-fu32ev5ph2ehbfzy.js","sources":["../../src/components/chart/Color.ts","../../src/components/chart/EChart.tsx","../../src/components/chart/TimeseriesChart.tsx","../../src/components/chart/Legend.tsx"],"sourcesContent":["/**\n * Categorical colors for light mode — used when assigning colors to data series\n * by index (e.g. the first series gets Blue, the second gets Violet, etc.).\n */\nenum ChartCategoricalLightColors {\n Blue = \"#086FFF\",\n Violet = \"#CF7EE9\",\n Cyan = \"#73CEE6\",\n Indigo = \"#5B5FEF\",\n LightBlue = \"#82B6FF\",\n Pink = \"#F5609F\",\n Indigo3 = \"#C2BDF3\",\n Violet2 = \"#8D1EB1\",\n Violet3 = \"#EBCAF6\",\n Indigo2 = \"#7366E4\",\n}\n\n/**\n * Categorical colors for dark mode — same hues as the light palette but with\n * `E6` alpha (90% opacity) appended to soften contrast on dark backgrounds.\n */\nenum ChartCategoricalDarkColors {\n Blue = \"#086FFFE6\",\n Violet = \"#CF7EE9E6\",\n Cyan = \"#73CEE6E6\",\n Indigo = \"#5B5FEFE6\",\n LightBlue = \"#82B6FFE6\",\n Pink = \"#F5609FE6\",\n Indigo3 = \"#C2BDF3E6\",\n Violet2 = \"#8D1EB1E6\",\n Violet3 = \"#EBCAF6E6\",\n Indigo2 = \"#7366E4E6\",\n}\n\n/**\n * Semantic colors for light mode — used to convey meaning (status, severity)\n * rather than just distinguishing series. Use via `ChartPalette.semantic()`.\n */\nenum ChartSemanticLightColors {\n Attention = \"#FC574A\",\n Warning = \"#F8A054\",\n Neutral = \"#82B6FF\",\n NeutralLight = \"#B9D6FF\",\n Disabled = \"#B6B6B6\",\n DisabledLight = \"#D9D9D9\",\n}\n\n/**\n * Semantic colors for dark mode — same meanings as the light palette but with\n * `E6` alpha (90% opacity) for dark backgrounds.\n */\nenum ChartSemanticDarkColors {\n Attention = \"#FC574AE6\",\n Warning = \"#F8A054E6\",\n Neutral = \"#82B6FFE6\",\n NeutralLight = \"#B9D6FFE6\",\n Disabled = \"#B6B6B6E6\",\n DisabledLight = \"#D9D9D9E6\",\n}\n\n/**\n * Ordered list of categorical colors for light mode, indexed by series position.\n * Used as the default ECharts color palette when `isDarkMode` is `false`.\n */\nexport const CHART_LIGHT_COLORS = [\n ChartCategoricalLightColors.Blue,\n ChartCategoricalLightColors.Violet,\n ChartCategoricalLightColors.Cyan,\n ChartCategoricalLightColors.Indigo,\n ChartCategoricalLightColors.LightBlue,\n ChartCategoricalLightColors.Pink,\n ChartCategoricalLightColors.Indigo3,\n ChartCategoricalLightColors.Violet2,\n ChartCategoricalLightColors.Violet3,\n ChartCategoricalLightColors.Indigo2,\n];\n\n/**\n * Ordered list of categorical colors for dark mode, indexed by series position.\n * Used as the default ECharts color palette when `isDarkMode` is `true`.\n */\nexport const CHART_DARK_COLORS = [\n ChartCategoricalDarkColors.Blue,\n ChartCategoricalDarkColors.Violet,\n ChartCategoricalDarkColors.Cyan,\n ChartCategoricalDarkColors.Indigo,\n ChartCategoricalDarkColors.LightBlue,\n ChartCategoricalDarkColors.Pink,\n ChartCategoricalDarkColors.Indigo3,\n ChartCategoricalDarkColors.Violet2,\n ChartCategoricalDarkColors.Violet3,\n ChartCategoricalDarkColors.Indigo2,\n];\n\n/**\n * Utilities for resolving Kumo chart colors by semantic name or series index.\n * Both functions accept an `isDarkMode` flag and return the appropriate hex color.\n */\nexport namespace ChartPalette {\n /**\n * Returns the hex color for a named semantic value (status, severity, etc.).\n *\n * @example\n * ```ts\n * ChartPalette.semantic(\"Attention\") // \"#FC574A\" (light)\n * ChartPalette.semantic(\"Warning\", true) // \"#F8A054E6\" (dark)\n * ```\n */\n export function semantic(\n name:\n | \"Attention\"\n | \"Warning\"\n | \"Neutral\"\n | \"NeutralLight\"\n | \"Disabled\"\n | \"DisabledLight\",\n isDarkMode = false,\n ) {\n return isDarkMode\n ? ChartSemanticDarkColors[name]\n : ChartSemanticLightColors[name];\n }\n\n /**\n * Returns the categorical color for a given series index.\n * Wraps around via modulo when `index` exceeds the palette length (10 colors).\n *\n * @example\n * ```ts\n * ChartPalette.color(0) // Blue (light)\n * ChartPalette.color(0, true) // Blue with E6 alpha (dark)\n * ChartPalette.color(10) // wraps back to Blue\n * ```\n */\n export function color(index: number, isDarkMode = false) {\n return isDarkMode\n ? CHART_DARK_COLORS[index % CHART_DARK_COLORS.length]\n : CHART_LIGHT_COLORS[index % CHART_LIGHT_COLORS.length];\n }\n}\n","import type * as echarts from \"echarts/core\";\nimport type { EChartsOption } from \"echarts\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { CHART_DARK_COLORS, CHART_LIGHT_COLORS } from \"./Color\";\n\n/** Parameters passed to mouse event handlers on chart elements */\ntype EChartsMouseEventParams = {\n /** The type of component that triggered the event (e.g. \"series\", \"markPoint\") */\n componentType: string;\n /** Series type (e.g. \"line\", \"bar\") — present when componentType is \"series\" */\n seriesType?: string;\n /** Zero-based index of the series in the option.series array */\n seriesIndex?: number;\n /** Name of the series */\n seriesName?: string;\n /** Name of the data item */\n name?: string;\n /** Zero-based index of the data item within its series */\n dataIndex?: number;\n /** Raw data item value */\n data?: any;\n /** Sub-type of data (e.g. \"node\", \"edge\" for graph series) */\n dataType?: string;\n /** Numeric or array value of the data item */\n value?: number | any[];\n /** Resolved color of the series or data item */\n color?: string;\n};\n\n/**\n * ECharts event handlers that can be attached to a `Chart`.\n * Pass a subset via the `onEvents` prop; handlers are registered lazily and\n * cleaned up automatically when removed or when the chart is unmounted.\n */\nexport interface ChartEvents {\n // Mouse events — fired on chart elements (series, marks, etc.)\n click: (params: EChartsMouseEventParams) => void;\n dblclick: (params: EChartsMouseEventParams) => void;\n mousedown: (params: EChartsMouseEventParams) => void;\n mousemove: (params: EChartsMouseEventParams) => void;\n mouseup: (params: EChartsMouseEventParams) => void;\n mouseover: (params: EChartsMouseEventParams) => void;\n mouseout: (params: EChartsMouseEventParams) => void;\n /** Fired when the pointer leaves the chart canvas entirely */\n globalout: (params: any) => void;\n contextmenu: (params: any) => void;\n\n // Legend events\n /** Fired when any legend item's selected state changes */\n legendselectchanged: (params: {\n name: string;\n /** Map of series name → selected state for all legend items */\n selected: Record<string, boolean>;\n }) => void;\n legendselected: (params: any) => void;\n legendunselected: (params: any) => void;\n legendscroll: (params: any) => void;\n\n // Data zoom / timeline events\n datazoom: (params: any) => void;\n datarangeselected: (params: any) => void;\n timelinechanged: (params: any) => void;\n timelineplaychanged: (params: any) => void;\n\n // Toolbox events\n restore: (params: any) => void;\n dataviewchanged: (params: any) => void;\n magictypechanged: (params: any) => void;\n\n // Pie chart selection events\n pieselectchanged: (params: any) => void;\n pieselected: (params: any) => void;\n pieunselected: (params: any) => void;\n\n // Map / geo selection events\n mapselectchanged: (params: any) => void;\n mapselected: (params: any) => void;\n mapunselected: (params: any) => void;\n geoselectchanged: (params: any) => void;\n geoselected: (params: any) => void;\n geounselected: (params: any) => void;\n\n axisareaselected: (params: any) => void;\n\n // Brush / selection events\n brush: (params: any) => void;\n brushselected: (params: any) => void;\n /** Fired when the user finishes drawing a brush selection */\n brushend: (params: {\n areas: Array<{\n /** Coordinate range covered by the brush — interpretation depends on axis type */\n coordRange: any;\n brushType?: string;\n panelId?: string;\n range?: any;\n }>;\n }) => void;\n}\n\n/** Props for the low-level `Chart` wrapper around Apache ECharts */\nexport interface ChartProps {\n /**\n * The ECharts core instance imported by the consumer.\n * Passed in rather than imported directly so the consumer controls which\n * ECharts modules are bundled (tree-shaking).\n */\n echarts: typeof echarts;\n /** ECharts option object — passed through to `chart.setOption()` with `notMerge: true` */\n options: EChartsOption;\n /** Additional CSS classes applied to the chart container `<div>` */\n className?: string;\n /**\n * When `true`, initialises ECharts with its built-in dark theme.\n * Changing this value after mount destroys and re-creates the chart instance.\n */\n isDarkMode?: boolean;\n /** Height of the chart container in pixels. Defaults to `350`. */\n height?: number;\n /** Subset of ECharts events to listen for. Handlers are bound/unbound reactively. */\n onEvents?: Partial<ChartEvents>;\n}\n\n/**\n * Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).\n *\n * Manages the ECharts instance lifecycle (init, option updates, event binding,\n * resize observation, and disposal). Exposes the raw `echarts.ECharts` instance\n * via `ref` for imperative access when needed.\n *\n * Prefer `TimeseriesChart` for time-series data; use this component when you\n * need full control over the ECharts option object.\n *\n * @example\n * ```tsx\n * import * as echarts from \"echarts/core\";\n * import { BarChart } from \"echarts/charts\";\n * import { GridComponent } from \"echarts/components\";\n * import { CanvasRenderer } from \"echarts/renderers\";\n *\n * echarts.use([BarChart, GridComponent, CanvasRenderer]);\n *\n * <Chart\n * echarts={echarts}\n * options={{ xAxis: { data: [\"A\", \"B\"] }, yAxis: {}, series: [{ type: \"bar\", data: [1, 2] }] }}\n * />\n * ```\n */\nexport const Chart = forwardRef<echarts.ECharts, ChartProps>(function Chart(\n {\n echarts,\n options,\n className,\n isDarkMode,\n height = 350,\n onEvents,\n }: ChartProps,\n ref,\n) {\n // Ref to the container DOM node that ECharts renders into\n const elRef = useRef<HTMLDivElement | null>(null);\n // Ref to the active ECharts instance\n const chartRef = useRef<echarts.ECharts | null>(null);\n // Keeps the latest onEvents object without triggering re-binding on every render\n const handlersRef = useRef<Partial<ChartEvents>>({});\n // Stable wrapper functions per event name — avoids creating new closures on re-render\n const wrappersRef = useRef<Record<string, (params: any) => void>>({});\n // Tracks which event names are currently bound to the chart instance\n const boundEventsRef = useRef<Set<string>>(new Set());\n\n // Init and cleanup\n useEffect(() => {\n if (!elRef.current) return;\n\n const chart = echarts.init(\n elRef.current,\n isDarkMode\n ? \"dark\"\n : {\n color: isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS,\n },\n );\n chartRef.current = chart;\n\n if (typeof ref === \"function\") ref(chart);\n else if (ref) ref.current = chart;\n\n return () => {\n for (const event of boundEventsRef.current) {\n const wrapper = wrappersRef.current[event];\n if (wrapper) chart.off(event, wrapper);\n }\n boundEventsRef.current.clear();\n if (typeof ref === \"function\") ref(null);\n else if (ref) ref.current = null;\n chartRef.current = null;\n chart.dispose();\n };\n }, [elRef, isDarkMode]);\n\n // Update options\n useEffect(() => {\n const chart = chartRef.current;\n if (!chart) return;\n\n chart.setOption(options, { notMerge: true, lazyUpdate: true });\n }, [isDarkMode, options]);\n\n // Keep handlersRef in sync so wrapper closures always call the latest handler\n // without needing to re-bind listeners on every render\n useEffect(() => {\n handlersRef.current = onEvents ?? {};\n }, [onEvents]);\n\n // Reactively bind and unbind event listeners when onEvents changes.\n // Uses stable wrapper functions (wrappersRef) so the same function reference\n // is passed to both chart.on() and chart.off(), which ECharts requires.\n useEffect(() => {\n const chart = chartRef.current;\n if (!chart) return;\n\n const nextBound = new Set<string>();\n\n for (const [event, handler] of Object.entries(onEvents ?? {})) {\n if (typeof handler !== \"function\") continue;\n nextBound.add(event);\n\n if (!wrappersRef.current[event]) {\n wrappersRef.current[event] = (params: any) => {\n const current = handlersRef.current as Record<\n string,\n ((p: any) => void) | undefined\n >;\n current[event]?.(params);\n };\n }\n\n if (!boundEventsRef.current.has(event)) {\n chart.on(event, wrappersRef.current[event]);\n }\n }\n\n for (const event of boundEventsRef.current) {\n if (nextBound.has(event)) continue;\n const wrapper = wrappersRef.current[event];\n if (wrapper) {\n chart.off(event, wrapper);\n }\n }\n\n boundEventsRef.current = nextBound;\n }, [echarts, isDarkMode, onEvents]);\n\n // Resize handling\n useEffect(() => {\n const chart = chartRef.current;\n const el = elRef.current;\n if (!chart || !el) return;\n\n // Flag to skip the very first trigger\n let isInitial = true;\n\n const ro = new ResizeObserver(() => {\n if (isInitial) {\n isInitial = false;\n return; // Skip the first resize to let the animation play\n }\n chart.resize();\n });\n\n ro.observe(el);\n\n return () => ro.disconnect();\n }, []);\n\n return (\n <div ref={elRef} className={cn(\"w-full\", className)} style={{ height }} />\n );\n});\n\nChart.displayName = \"Chart\";\n","import type * as echarts from \"echarts/core\";\nimport type { LineSeriesOption, BarSeriesOption } from \"echarts/charts\";\nimport type { EChartsOption } from \"echarts\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { Chart, ChartEvents } from \"./EChart\";\n\n/** A single data series rendered on a `TimeseriesChart` */\nexport interface TimeseriesData {\n /** Display name shown in tooltips and legends */\n name: string;\n /** Array of `[timestamp_ms, value]` tuples ordered by time */\n data: [number, number][];\n /** Hex color string used for this series' line, bars, and legend dot */\n color: string;\n}\n\n/** Props for `TimeseriesChart` */\nexport interface TimeseriesChartProps {\n /**\n * The ECharts core instance imported by the consumer.\n * Passed in rather than imported directly so the consumer controls which\n * ECharts modules are bundled (tree-shaking).\n */\n echarts: typeof echarts;\n /** Visual style of each series. Defaults to `\"line\"`. */\n type?: \"line\" | \"bar\";\n /** Array of time series data to display on the chart */\n data: TimeseriesData[];\n /** Label for the x-axis (time axis) */\n xAxisName?: string;\n /** Number of ticks to display on the x-axis */\n xAxisTickCount?: number;\n /**\n * Custom formatter for x-axis tick labels.\n * Receives the raw timestamp in milliseconds and returns a display string,\n * overriding ECharts' built-in time formatting.\n */\n xAxisTickFormat?: (value: number) => string;\n /**\n * Custom formatter for y-axis tick labels.\n * Receives the raw value and returns a display string.\n * When omitted, ECharts' built-in formatter is used.\n */\n yAxisTickFormat?: (value: number) => string;\n /**\n * @deprecated Use `tooltipValueFormat` instead. This prop formats tooltip\n * values, not y-axis tick labels. It will be removed in a future major version.\n */\n yAxisTickLabelFormat?: (value: number) => string;\n /** Label for the y-axis (value axis) */\n yAxisName?: string;\n /** Number of ticks to display on the y-axis */\n yAxisTickCount?: number;\n /**\n * Custom formatter for tooltip values.\n * Receives the raw y-value and returns a display string.\n * When omitted, the raw value is shown. Takes precedence over the\n * deprecated `yAxisTickLabelFormat` prop.\n */\n tooltipValueFormat?: (value: number) => string;\n /** Indicates incomplete data periods with optional before/after timestamps in ms */\n incomplete?: { before?: number; after?: number };\n /** Height of the chart in pixels. Defaults to `350`. */\n height?: number;\n /** Callback fired when user selects a time range via brush selection */\n onTimeRangeChange?: (from: number, to: number) => void;\n /** When `true`, switches the chart to ECharts' built-in dark theme */\n isDarkMode?: boolean;\n /**\n * When `true`, renders a vertical gradient fill beneath each line series.\n * The gradient fades from the series' color at the top to transparent at the bottom.\n * Has no effect when `type` is `\"bar\"`.\n */\n gradient?: boolean;\n /**\n * When `true`, hides the chart and displays an animated sine-wave skeleton\n * that oscillates back and forth to indicate that data is being fetched.\n */\n loading?: boolean;\n}\n\n/**\n * TimeseriesChart — a time-series line or bar chart.\n *\n * Built on `Chart` (Apache ECharts) with opinionated defaults for time-series data:\n * a time-typed x-axis, dashed lines for incomplete data periods, brush-based\n * time range selection, and automatic tooltip deduplication.\n *\n * @example\n * ```tsx\n * import * as echarts from \"echarts/core\";\n * import { LineChart } from \"echarts/charts\";\n * import { GridComponent, TooltipComponent, BrushComponent, ToolboxComponent } from \"echarts/components\";\n * import { CanvasRenderer } from \"echarts/renderers\";\n *\n * echarts.use([LineChart, GridComponent, TooltipComponent, BrushComponent, ToolboxComponent, CanvasRenderer]);\n *\n * const [range, setRange] = useState<[number, number]>();\n *\n * <TimeseriesChart\n * echarts={echarts}\n * data={[{ name: \"Requests\", data: [[Date.now(), 42]], color: \"#086FFF\" }]}\n * xAxisName=\"Time\"\n * xAxisTickFormat={(ts) => new Date(ts).toLocaleTimeString()}\n * yAxisName=\"Count\"\n * yAxisTickFormat={(value) => `${value / 1000}k`}\n * tooltipValueFormat={(value) => `${value.toFixed(2)} req/s`}\n * onTimeRangeChange={(from, to) => setRange([from, to])}\n * />\n * ```\n */\nexport function TimeseriesChart({\n echarts,\n type = \"line\",\n data,\n xAxisName,\n xAxisTickCount,\n xAxisTickFormat,\n yAxisTickFormat,\n yAxisTickLabelFormat,\n yAxisName,\n yAxisTickCount,\n tooltipValueFormat,\n onTimeRangeChange,\n height = 350,\n incomplete,\n isDarkMode,\n gradient,\n loading,\n}: TimeseriesChartProps) {\n const chartRef = useRef<echarts.ECharts | null>(null);\n const incompleteBefore = incomplete?.before;\n const incompleteAfter = incomplete?.after;\n\n const options = useMemo(() => {\n const transformSeries: Array<LineSeriesOption | BarSeriesOption> = [];\n\n const seriesType =\n type === \"bar\"\n ? ({ type: \"bar\", stack: \"total\" } as const)\n : ({ type: \"line\", showSymbol: false } as const);\n\n for (const s of data) {\n const incompleteBeforePoints =\n incompleteBefore && type === \"line\"\n ? s.data.filter((point) => point[0] <= incompleteBefore)\n : [];\n\n const incompleteAfterPoints =\n incompleteAfter && type === \"line\"\n ? s.data.filter((point) => point[0] >= incompleteAfter)\n : [];\n\n const completePoints =\n incompleteBeforePoints.length > 0 || incompleteAfterPoints.length > 0\n ? s.data.slice(\n Math.max(0, incompleteBeforePoints.length - 1),\n Math.max(0, s.data.length - incompleteAfterPoints.length + 1),\n )\n : s.data;\n\n // Main complete data series\n const areaStyle =\n gradient && type === \"line\"\n ? {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: colorWithOpacity(s.color, 0.4) },\n { offset: 1, color: colorWithOpacity(s.color, 0) },\n ]),\n }\n : undefined;\n\n transformSeries.push({\n data: completePoints,\n color: s.color,\n name: s.name,\n ...(areaStyle ? { areaStyle } : {}),\n ...seriesType,\n });\n\n // Incomplete data series with dashed lines\n const incompleteSeriesConfig = {\n color: s.color,\n name: s.name,\n type: \"line\" as const,\n lineStyle: { type: \"dashed\" as const },\n showSymbol: false,\n };\n\n if (incompleteBeforePoints.length > 0) {\n transformSeries.push({\n ...incompleteSeriesConfig,\n data: incompleteBeforePoints,\n });\n }\n\n if (incompleteAfterPoints.length > 0) {\n transformSeries.push({\n ...incompleteSeriesConfig,\n data: incompleteAfterPoints,\n });\n }\n }\n\n return {\n aria: {\n enabled: true,\n },\n brush: {\n snapToData: true,\n xAxisIndex: \"all\" as const,\n brushType: \"lineX\" as const,\n brushMode: \"single\" as const,\n outOfBrush: {\n colorAlpha: 0.3,\n },\n brushStyle: {\n borderWidth: 1,\n color: \"rgba(120,140,180,0.3)\",\n borderColor: \"rgba(120,140,180,0.8)\",\n },\n },\n tooltip: {\n trigger: \"axis\" as const,\n axisPointer: { type: \"shadow\" as const },\n formatter: (params: any) => {\n const items = Array.isArray(params) ? params : [params];\n\n // Track seen series names to avoid duplicates in tooltip\n // This is needed because incomplete data series (dashed lines) and complete data series\n // can overlap at the same timestamp, causing duplicate entries in the tooltip\n const seenNames = new Set<string>();\n const filteredParams = items.filter((param: any) => {\n if (seenNames.has(param.seriesName)) return false;\n seenNames.add(param.seriesName);\n return true;\n });\n\n const first = filteredParams[0];\n const ts = first?.value?.[0] ?? first?.axisValue;\n const header =\n ts != null\n ? `<div style=\"font-weight:600;margin-bottom:4px;\">${formatTimestamp(ts)}</div>`\n : \"\";\n\n const rows = filteredParams\n .map((param: any) => {\n const value = param?.value?.[1];\n const formatFn = tooltipValueFormat ?? yAxisTickLabelFormat;\n return `${param.marker} ${param.seriesName}: <strong>${formatFn ? formatFn(value) : value}</strong>`;\n })\n .join(\"<br/>\");\n\n return `${header}${rows}`;\n },\n },\n backgroundColor: \"transparent\",\n toolbox: { show: false },\n xAxis: {\n name: xAxisName,\n nameLocation: \"middle\" as const,\n nameGap: 30,\n type: \"time\" as const,\n splitLine: {\n show: false,\n },\n axisLine: { show: false },\n splitNumber: xAxisTickCount ?? 5,\n ...(xAxisTickFormat && {\n axisLabel: {\n formatter: (value: number) => xAxisTickFormat(value),\n },\n }),\n },\n yAxis: {\n name: yAxisName,\n nameLocation: \"middle\" as const,\n nameGap: 40,\n type: \"value\" as const,\n axisTick: { show: true },\n axisLabel: {\n margin: 15,\n ...(yAxisTickFormat && {\n formatter: (value: number) => yAxisTickFormat(value),\n }),\n },\n splitLine: {\n show: true,\n lineStyle: { type: \"dashed\" as const, width: 1 },\n },\n splitNumber: yAxisTickCount,\n },\n grid: {\n left: yAxisName ? 30 : 24,\n right: 24,\n top: 24,\n bottom: xAxisName ? 30 : 24,\n },\n series: transformSeries,\n };\n }, [\n data,\n xAxisName,\n xAxisTickCount,\n xAxisTickFormat,\n yAxisTickFormat,\n yAxisTickLabelFormat,\n yAxisName,\n yAxisTickCount,\n tooltipValueFormat,\n incompleteBefore,\n incompleteAfter,\n type,\n gradient,\n echarts,\n ]);\n\n const events = useMemo<Partial<ChartEvents>>(() => {\n if (!onTimeRangeChange) return {};\n\n return {\n brushend: (params) => {\n const range = params.areas[0].coordRange;\n onTimeRangeChange(range[0], range[1]);\n chartRef.current?.dispatchAction({ type: \"brush\", areas: [] });\n },\n };\n }, [onTimeRangeChange]);\n\n // Activate the lineX brush cursor when a time-range callback is provided,\n // and deactivate it on cleanup so the cursor resets when the prop is removed.\n const hasTimeRangeCallback = !!onTimeRangeChange;\n useEffect(() => {\n const chart = chartRef.current;\n if (chart && hasTimeRangeCallback) {\n chart.dispatchAction({\n type: \"takeGlobalCursor\",\n key: \"brush\",\n brushOption: {\n brushType: \"lineX\" as const,\n brushMode: \"single\" as const,\n },\n });\n\n return () => {\n chart.dispatchAction({\n type: \"takeGlobalCursor\",\n key: \"brush\",\n brushOption: {\n brushType: false,\n },\n });\n };\n }\n // `loading` controls whether <Chart> is mounted. When it flips to false,\n // chartRef.current becomes available and the brush cursor must be activated.\n // Without this dep, the effect won't re-run after Chart mounts.\n }, [chartRef, hasTimeRangeCallback, loading]);\n\n return (\n <div className=\"relative w-full\" style={{ height }}>\n {loading && <ChartWaveLoader height={height} isDarkMode={isDarkMode} />}\n {!loading && (\n <Chart\n echarts={echarts}\n ref={chartRef}\n options={options as EChartsOption}\n height={height}\n isDarkMode={isDarkMode}\n onEvents={events}\n />\n )}\n </div>\n );\n}\n\n/**\n * Animated sine-wave skeleton shown while `TimeseriesChart` is in `loading` state.\n * Renders multiple staggered wave paths that sweep continuously left-to-right,\n * mimicking the motion of live time-series data being drawn.\n */\nfunction ChartWaveLoader({\n height,\n isDarkMode,\n}: {\n height: number;\n isDarkMode?: boolean;\n}) {\n const mid = height / 2;\n const amp = Math.min(height * 0.12, 28);\n const period = 400;\n const steps = 120;\n\n const points: string[] = [];\n for (let i = 0; i <= steps; i++) {\n const x = -period + (i / steps) * period * 3;\n const y = mid + Math.sin((i / steps) * 2 * Math.PI * 3) * amp;\n points.push(`${i === 0 ? \"M\" : \"L\"}${x.toFixed(2)},${y.toFixed(2)}`);\n }\n const d = points.join(\" \");\n\n const strokeColor = isDarkMode ? \"rgba(255,255,255,0.5)\" : \"rgba(0,0,0,0.2)\";\n\n return (\n <div\n aria-hidden=\"true\"\n className=\"absolute inset-0 overflow-hidden\"\n style={{ height }}\n >\n <svg\n width=\"100%\"\n height={height}\n viewBox={`0 0 ${period} ${height}`}\n preserveAspectRatio=\"none\"\n className=\"w-full animate-pulse\"\n >\n <path\n d={d}\n fill=\"none\"\n stroke={strokeColor}\n strokeWidth=\"2\"\n style={{\n animation: `kumo-chart-wave 2.4s linear infinite`,\n transformOrigin: \"0 0\",\n }}\n />\n </svg>\n </div>\n );\n}\n\n/**\n * Returns an `rgba(r, g, b, alpha)` string for any hex or rgb(a) color input,\n * replacing whatever opacity was already present with the given `alpha` (0–1).\n *\n * Handles:\n * - 6-digit hex: `#RRGGBB`\n * - 8-digit hex: `#RRGGBBAA` ← strips existing alpha\n * - 3-digit hex: `#RGB`\n * - `rgb(r, g, b)`\n * - `rgba(r, g, b, a)` ← replaces existing alpha\n */\nfunction colorWithOpacity(color: string, alpha: number): string {\n const a = Math.max(0, Math.min(1, alpha));\n\n // rgb / rgba\n const rgbMatch = color.match(\n /rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i,\n );\n if (rgbMatch) {\n return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${a})`;\n }\n\n // hex — strip leading #\n let hex = color.replace(/^#/, \"\");\n\n // expand 3-digit → 6-digit\n if (hex.length === 3) {\n hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n }\n\n // strip 8-digit alpha → keep only 6\n if (hex.length === 8) {\n hex = hex.slice(0, 6);\n }\n\n const r = parseInt(hex.slice(0, 2), 16);\n const g = parseInt(hex.slice(2, 4), 16);\n const b = parseInt(hex.slice(4, 6), 16);\n\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n}\n\n/** Zero-pads a number to two digits (e.g. `5` → `\"05\"`) */\nfunction pad(n: number) {\n return n.toString().padStart(2, \"0\");\n}\n\n/**\n * Formats a timestamp as `\"YYYY-MM-DD HH:mm:ss\"` for use in chart tooltips.\n * Accepts a Unix timestamp in milliseconds, an ISO date string, or a `Date` object.\n */\nfunction formatTimestamp(ts: number | string | Date): string {\n const d = new Date(ts);\n return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;\n}\n","import { cn } from \"../../utils\";\n\n/** Shared props for both legend item variants */\ninterface LegendItemProps {\n /** Series name shown as a label */\n name: string;\n /** Hex color string for the series indicator dot */\n color: string;\n /** Formatted value string to display */\n value: string;\n /** Optional unit label shown after the value (e.g. `\"ms\"`, `\"%\"`) */\n unit?: string;\n /** When `true`, renders the item at 50% opacity to indicate a deselected state */\n inactive?: boolean;\n}\n\n/**\n * Large legend item — stacked layout with a colored dot + series name on top\n * and a large value with an optional small unit below. Use for prominent\n * single-metric displays such as dashboard cards.\n */\nfunction LargeItem({ color, value, name, unit, inactive }: LegendItemProps) {\n return (\n <div className=\"inline-flex flex-col gap-2 min-w-42 py-2\">\n <div className=\"flex items-center gap-2\">\n <span\n className={cn(\"size-2 rounded-full inline-block\", {\n \"opacity-50\": inactive,\n })}\n style={{ backgroundColor: color }}\n />\n <span className={cn(\"text-xs\", { \"opacity-50\": inactive })}>\n {name}\n </span>\n </div>\n <div className=\"flex items-baseline gap-0.5\">\n <span\n className={cn(\"text-lg font-medium leading-none\", {\n \"opacity-50\": inactive,\n })}\n >\n {value}\n </span>\n {unit && (\n <span\n className={cn(\"text-xs text-kumo-subtle leading-none\", {\n \"opacity-50\": inactive,\n })}\n >\n {unit}\n </span>\n )}\n </div>\n </div>\n );\n}\n\n/**\n * Small legend item — inline layout with a colored dot, series name, and value\n * on a single row. Use for compact legends below or beside a chart.\n */\nfunction SmallItem({ color, value, name, inactive }: LegendItemProps) {\n return (\n <div className=\"inline-flex items-center gap-2\">\n <span\n className={cn(\"size-2 rounded-full inline-block\", {\n \"opacity-50\": inactive,\n })}\n style={{ backgroundColor: color }}\n />\n <span className={cn(\"text-xs\", { \"opacity-50\": inactive })}>{name}</span>\n <span className={cn(\"text-xs font-medium\", { \"opacity-50\": inactive })}>\n {value}\n </span>\n </div>\n );\n}\n\n/**\n * ChartLegend — pre-built legend item components for use alongside a chart.\n *\n * - `ChartLegend.SmallItem` — compact inline layout; suited for multi-series legends\n * - `ChartLegend.LargeItem` — stacked layout with a large value; suited for single-metric cards\n *\n * @example\n * ```tsx\n * <ChartLegend.SmallItem name=\"Requests\" color=\"#086FFF\" value=\"1,234\" />\n * <ChartLegend.LargeItem name=\"Latency\" color=\"#CF7EE9\" value=\"42\" unit=\"ms\" inactive />\n * ```\n */\nexport const ChartLegend = {\n SmallItem,\n LargeItem,\n};\n"],"names":["ChartSemanticLightColors","ChartSemanticDarkColors","CHART_LIGHT_COLORS","CHART_DARK_COLORS","ChartPalette","semantic","name","isDarkMode","color","index","Chart","forwardRef","echarts","options","className","height","onEvents","ref","elRef","useRef","chartRef","handlersRef","wrappersRef","boundEventsRef","useEffect","chart","event","wrapper","nextBound","handler","params","el","isInitial","ro","jsx","cn","TimeseriesChart","type","data","xAxisName","xAxisTickCount","xAxisTickFormat","yAxisTickFormat","yAxisTickLabelFormat","yAxisName","yAxisTickCount","tooltipValueFormat","onTimeRangeChange","incomplete","gradient","loading","incompleteBefore","incompleteAfter","useMemo","transformSeries","seriesType","s","incompleteBeforePoints","point","incompleteAfterPoints","completePoints","areaStyle","colorWithOpacity","incompleteSeriesConfig","items","seenNames","filteredParams","param","first","ts","header","formatTimestamp","rows","value","formatFn","events","range","hasTimeRangeCallback","ChartWaveLoader","mid","amp","period","steps","points","x","y","d","strokeColor","alpha","a","rgbMatch","hex","r","g","b","pad","n","LargeItem","unit","inactive","jsxs","SmallItem","ChartLegend"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-i3mdp6f01dvpoc5j.js","sources":["../../src/components/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxBase } from \"@base-ui/react/combobox\";\nimport { CaretDownIcon, CheckIcon, XIcon } from \"@phosphor-icons/react\";\nimport {\n Fragment,\n createContext,\n useContext,\n type PropsWithChildren,\n type ReactNode,\n} from \"react\";\nimport {\n inputVariants,\n KUMO_INPUT_VARIANTS,\n type KumoInputSize,\n} from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Combobox variant definitions. */\nexport const KUMO_COMBOBOX_VARIANTS = {\n size: KUMO_INPUT_VARIANTS.size,\n inputSide: {\n right: {\n classes: \"\",\n description: \"Input positioned inline to the right of chips\",\n },\n top: {\n classes: \"\",\n description: \"Input positioned above chips\",\n },\n },\n} as const;\n\nexport const KUMO_COMBOBOX_DEFAULT_VARIANTS = {\n size: \"base\",\n inputSide: \"right\",\n} as const;\n\n// Context to pass size down to sub-components\nconst ComboboxSizeContext = createContext<KumoInputSize>(\"base\");\n\n// Derived types from KUMO_COMBOBOX_VARIANTS\nexport type KumoComboboxSize = keyof typeof KUMO_COMBOBOX_VARIANTS.size;\nexport type KumoComboboxInputSide =\n keyof typeof KUMO_COMBOBOX_VARIANTS.inputSide;\n\nexport interface KumoComboboxVariantsProps {\n /**\n * Size of the combobox trigger. Matches Input component sizes.\n * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n * - `\"base\"` — Default size (h-9 / 36px)\n * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n * @default \"base\"\n */\n size?: KumoComboboxSize;\n /**\n * Position of the text input relative to chips in multi-select mode.\n * - `\"right\"` — Input inline to the right of chips\n * - `\"top\"` — Input above chips\n * @default \"right\"\n */\n inputSide?: KumoComboboxInputSide;\n}\n\nexport function comboboxVariants({\n inputSide = KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide,\n}: KumoComboboxVariantsProps = {}) {\n return cn(KUMO_COMBOBOX_VARIANTS.inputSide[inputSide].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type ComboboxInputSide = KumoComboboxInputSide;\nexport type ComboboxSize = KumoComboboxSize;\n\nexport type ComboboxRootProps<\n Value = unknown,\n Multiple extends boolean | undefined = false,\n> = ComboboxBase.Root.Props<Value, Multiple>;\n\n/**\n * Combobox component props (simplified for documentation; the actual Root is generic).\n *\n * Combobox provides an autocomplete/typeahead input with a filterable dropdown.\n * Supports single-select, multi-select with chips, grouped items, and Field wrapper integration.\n *\n * @example\n * ```tsx\n * // Single-select with search input\n * <Combobox value={value} onValueChange={setValue} items={options}>\n * <Combobox.TriggerInput placeholder=\"Search…\" />\n * <Combobox.Content>\n * <Combobox.List>\n * {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n * </Combobox.List>\n * <Combobox.Empty>No results</Combobox.Empty>\n * </Combobox.Content>\n * </Combobox>\n *\n * // Multi-select with chips\n * <Combobox multiple items={options} label=\"Tags\">\n * <Combobox.TriggerMultipleWithInput\n * placeholder=\"Add tag…\"\n * renderItem={(item) => <Combobox.Chip value={item}>{item.label}</Combobox.Chip>}\n * />\n * <Combobox.Content>\n * <Combobox.List>\n * {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n * </Combobox.List>\n * </Combobox.Content>\n * </Combobox>\n * ```\n */\nexport interface ComboboxProps extends KumoComboboxVariantsProps {\n /** Array of items to display in the dropdown */\n items: unknown[];\n /** Currently selected value(s) */\n value?: unknown;\n /** Callback when selection changes */\n onValueChange?: (value: unknown) => void;\n /** Enable multi-select mode */\n multiple?: boolean;\n /** Combobox content (trigger, content, items) */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n /** Label content for the combobox (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Whether the combobox is required */\n required?: boolean;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the combobox */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<Value, Multiple extends boolean | undefined = false>({\n label,\n required,\n labelTooltip,\n description,\n error,\n children,\n size = \"base\",\n ...props\n}: ComboboxBase.Root.Props<Value, Multiple> & {\n label?: ReactNode;\n required?: boolean;\n labelTooltip?: ReactNode;\n description?: ReactNode;\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n size?: KumoComboboxSize;\n}) {\n const comboboxControl = (\n <ComboboxSizeContext.Provider value={size}>\n <ComboboxBase.Root {...props}>{children}</ComboboxBase.Root>\n </ComboboxSizeContext.Provider>\n );\n\n // Render with Field wrapper if label, description, or error are provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {comboboxControl}\n </Field>\n );\n }\n\n // Render bare combobox without Field wrapper\n return comboboxControl;\n}\n\nfunction Content({\n children,\n className,\n align = \"start\",\n sideOffset = 4,\n alignOffset,\n side,\n}: PropsWithChildren<{\n className?: string;\n align?: ComboboxBase.Positioner.Props[\"align\"];\n alignOffset?: ComboboxBase.Positioner.Props[\"alignOffset\"];\n side?: ComboboxBase.Positioner.Props[\"side\"];\n sideOffset?: ComboboxBase.Positioner.Props[\"sideOffset\"];\n}>) {\n return (\n <ComboboxBase.Portal>\n <ComboboxBase.Positioner\n className=\"outline-none\"\n align={align}\n sideOffset={sideOffset}\n alignOffset={alignOffset}\n side={side}\n >\n <ComboboxBase.Popup\n className={cn(\n \"flex flex-col\", // flexbox layout for sticky input + scrollable list\n \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n \"bg-kumo-control text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n className,\n )}\n >\n {children}\n </ComboboxBase.Popup>\n </ComboboxBase.Positioner>\n </ComboboxBase.Portal>\n );\n}\n\n// Size-dependent styles for TriggerValue icon\nconst triggerValueIconStyles: Record<\n KumoComboboxSize,\n { padding: string; iconSize: number; iconRight: string }\n> = {\n xs: { padding: \"pr-5\", iconSize: 12, iconRight: \"right-1\" },\n sm: { padding: \"pr-6\", iconSize: 14, iconRight: \"right-1.5\" },\n base: { padding: \"pr-8\", iconSize: 16, iconRight: \"right-2\" },\n lg: { padding: \"pr-10\", iconSize: 18, iconRight: \"right-3\" },\n};\n\nfunction TriggerValue({\n className,\n ...props\n}: ComboboxBase.Value.Props & { className?: string }) {\n const size = useContext(ComboboxSizeContext);\n const iconStyles = triggerValueIconStyles[size];\n\n return (\n <ComboboxBase.Trigger\n className={cn(\n inputVariants({ size }),\n \"relative flex items-center\",\n iconStyles.padding,\n className,\n )}\n >\n <ComboboxBase.Value>{props.children}</ComboboxBase.Value>\n <ComboboxBase.Icon\n className={cn(\n \"absolute top-1/2 -translate-y-1/2 flex items-center text-kumo-subtle\",\n iconStyles.iconRight,\n )}\n >\n <CaretDownIcon\n size={iconStyles.iconSize}\n className=\"fill-current\"\n />\n </ComboboxBase.Icon>\n </ComboboxBase.Trigger>\n );\n}\n\n// Size-dependent styles for TriggerInput icons\nconst triggerInputIconStyles: Record<\n KumoComboboxSize,\n { padding: string; iconSize: number; clearRight: string; caretRight: string }\n> = {\n xs: {\n padding: \"pr-7\",\n iconSize: 12,\n clearRight: \"right-5\",\n caretRight: \"right-1\",\n },\n sm: {\n padding: \"pr-9\",\n iconSize: 14,\n clearRight: \"right-6\",\n caretRight: \"right-1.5\",\n },\n base: {\n padding: \"pr-12\",\n iconSize: 16,\n clearRight: \"right-8\",\n caretRight: \"right-2\",\n },\n lg: {\n padding: \"pr-14\",\n iconSize: 18,\n clearRight: \"right-9\",\n caretRight: \"right-3\",\n },\n};\n\nfunction TriggerInput(props: ComboboxBase.Input.Props) {\n const size = useContext(ComboboxSizeContext);\n const iconStyles = triggerInputIconStyles[size];\n\n return (\n <div\n className={cn(\"relative inline-block w-full max-w-xs\", props.className)}\n >\n <ComboboxBase.Input\n {...props}\n className={cn(inputVariants({ size }), \"w-full\", iconStyles.padding)}\n />\n\n <ComboboxBase.Clear\n className={cn(\n \"absolute top-1/2 flex -translate-y-1/2 cursor-pointer bg-transparent p-0\",\n iconStyles.clearRight,\n )}\n >\n <XIcon size={iconStyles.iconSize} />\n </ComboboxBase.Clear>\n\n <ComboboxBase.Trigger className=\"p-0\">\n <ComboboxBase.Icon\n className={cn(\n \"absolute top-1/2 flex -translate-y-1/2 cursor-pointer text-kumo-subtle\",\n iconStyles.caretRight,\n )}\n >\n <CaretDownIcon\n size={iconStyles.iconSize}\n className=\"fill-current\"\n />\n </ComboboxBase.Icon>\n </ComboboxBase.Trigger>\n </div>\n );\n}\n\nfunction Item({ children, ...props }: ComboboxBase.Item.Props) {\n return (\n <ComboboxBase.Item\n {...props}\n className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay\"\n >\n <div className=\"col-start-1\">{children}</div>\n <ComboboxBase.ItemIndicator className=\"col-start-2 flex items-center\">\n <CheckIcon />\n </ComboboxBase.ItemIndicator>\n </ComboboxBase.Item>\n );\n}\n\nfunction Empty(props: ComboboxBase.Empty.Props) {\n return (\n <ComboboxBase.Empty\n {...props}\n className={cn(\n \"mx-1.5 shrink-0 px-4 py-2 text-[0.925rem] leading-4 text-kumo-subtle empty:m-0 empty:p-0\",\n )}\n children={props.children ?? \"No labels found.\"}\n />\n );\n}\n\nfunction Input(props: ComboboxBase.Input.Props) {\n return (\n <ComboboxBase.Input\n {...props}\n className={cn(\n inputVariants(),\n \"mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2\",\n props.className,\n )}\n />\n );\n}\n\nfunction List({\n className,\n ...props\n}: ComboboxBase.List.Props & { className?: string }) {\n return (\n <ComboboxBase.List\n {...props}\n className={cn(\n \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n className,\n )}\n />\n );\n}\n\nfunction GroupLabel(props: ComboboxBase.GroupLabel.Props) {\n return (\n <ComboboxBase.GroupLabel\n {...props}\n className={cn(\n \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n props.className,\n )}\n />\n );\n}\n\nfunction Group(props: ComboboxBase.Group.Props) {\n return (\n <ComboboxBase.Group\n {...props}\n className=\"border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n />\n );\n}\n\nfunction Chip(props: ComboboxBase.Chip.Props) {\n return (\n <ComboboxBase.Chip\n {...props}\n className=\"flex items-center gap-1 rounded-md bg-kumo-overlay px-2 py-1\"\n >\n {props.children}\n <ComboboxBase.ChipRemove className=\"cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover\">\n <XIcon size={12} weight=\"bold\" />\n </ComboboxBase.ChipRemove>\n </ComboboxBase.Chip>\n );\n}\n\n// Map size to min-height class for TriggerMultipleWithInput\nconst sizeToMinHeight: Record<KumoComboboxSize, string> = {\n xs: \"min-h-5\",\n sm: \"min-h-6.5\",\n base: \"min-h-9\",\n lg: \"min-h-10\",\n};\n\nfunction TriggerMultipleWithInput<ValueType>({\n placeholder,\n renderItem,\n className,\n inputSide = \"right\",\n value: controlledValue,\n}: {\n placeholder?: string;\n renderItem: (value: ValueType) => React.ReactNode;\n className?: string;\n inputSide?: \"right\" | \"top\";\n /** Optional controlled value for rendering chips (use when pre-selecting values) */\n value?: ValueType[];\n}) {\n const size = useContext(ComboboxSizeContext);\n // Determine which value to use for rendering chips\n const chipsToRender = controlledValue;\n\n return (\n <ComboboxBase.Chips\n className={cn(\n inputVariants({ size }),\n cn(\"flex flex-col\", \"gap-1 p-1\", sizeToMinHeight[size], \"h-auto\"),\n className,\n )}\n >\n {inputSide === \"top\" && (\n <ComboboxBase.Input\n placeholder={placeholder}\n className=\"w-full px-2 py-1 outline-none\"\n />\n )}\n {/* Chips container */}\n <div className=\"flex flex-wrap gap-1\">\n {/* Render chips from controlled value if provided */}\n {chipsToRender !== undefined &&\n chipsToRender.length > 0 &&\n chipsToRender.map((item) => renderItem(item))}\n {/* Also render from BaseUI's internal value for user selections */}\n <ComboboxBase.Value>\n {(internalValue: ValueType[]) => {\n // Skip rendering if using controlled value (to avoid duplicates)\n if (chipsToRender !== undefined) return null;\n return (\n <Fragment>\n {internalValue.map((item) => renderItem(item))}\n </Fragment>\n );\n }}\n </ComboboxBase.Value>\n {inputSide === \"right\" && (\n <ComboboxBase.Input\n placeholder={placeholder}\n className=\"min-w-[100px] flex-1 px-2 py-1 outline-none\"\n />\n )}\n </div>\n </ComboboxBase.Chips>\n );\n}\n\nRoot.displayName = \"Combobox.Root\";\nContent.displayName = \"Combobox.Content\";\nTriggerValue.displayName = \"Combobox.TriggerValue\";\nTriggerInput.displayName = \"Combobox.TriggerInput\";\nItem.displayName = \"Combobox.Item\";\nChip.displayName = \"Combobox.Chip\";\nTriggerMultipleWithInput.displayName = \"Combobox.TriggerMultipleWithInput\";\n\n/**\n * Combobox — autocomplete input with filterable dropdown list.\n *\n * Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`,\n * `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`,\n * `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.\n *\n * @example\n * ```tsx\n * <Combobox items={fruits} label=\"Fruit\">\n * <Combobox.TriggerInput placeholder=\"Pick a fruit…\" />\n * <Combobox.Content>\n * <Combobox.List>\n * {(item) => <Combobox.Item value={item}>{item}</Combobox.Item>}\n * </Combobox.List>\n * </Combobox.Content>\n * </Combobox>\n * ```\n *\n * @see https://base-ui.com/react/components/combobox\n */\nexport const Combobox = Object.assign(Root, {\n // Helper components\n Content,\n TriggerValue,\n TriggerInput,\n TriggerMultipleWithInput,\n\n // Slightly modified BaseUI\n Chip,\n Item,\n\n // Styled BaseUI\n Input,\n Empty,\n GroupLabel,\n Group,\n\n // Styled BaseUI\n List,\n\n // BaseUI\n Collection: ComboboxBase.Collection,\n});\n"],"names":["KUMO_INPUT_VARIANTS","ComboboxSizeContext","createContext","Root","label","required","labelTooltip","description","error","children","size","props","comboboxControl","jsx","ComboboxBase.Root","Field","Content","className","align","sideOffset","alignOffset","side","ComboboxBase.Portal","ComboboxBase.Positioner","ComboboxBase.Popup","cn","triggerValueIconStyles","TriggerValue","useContext","iconStyles","jsxs","ComboboxBase.Trigger","inputVariants","ComboboxBase.Value","ComboboxBase.Icon","CaretDownIcon","triggerInputIconStyles","TriggerInput","ComboboxBase.Input","ComboboxBase.Clear","XIcon","Item","ComboboxBase.Item","ComboboxBase.ItemIndicator","CheckIcon","Empty","ComboboxBase.Empty","Input","List","ComboboxBase.List","GroupLabel","ComboboxBase.GroupLabel","Group","ComboboxBase.Group","Chip","ComboboxBase.Chip","ComboboxBase.ChipRemove","sizeToMinHeight","TriggerMultipleWithInput","placeholder","renderItem","inputSide","controlledValue","chipsToRender","ComboboxBase.Chips","item","internalValue","Fragment","Combobox","ComboboxBase.Collection"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-emk68n0piw8u7hkb.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n} from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { AlertDialog as AlertDialogBase } from \"@base-ui/react/alert-dialog\";\nimport { Surface } from \"../surface\";\nimport { cn } from \"../../utils/cn\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. */\nexport const KUMO_DIALOG_VARIANTS = {\n size: {\n base: {\n classes: \"sm:min-w-96\",\n description: \"Default dialog width\",\n },\n sm: {\n classes: \"min-w-72\",\n description: \"Small dialog for simple confirmations\",\n },\n lg: {\n classes: \"min-w-[32rem]\",\n description: \"Large dialog for complex content\",\n },\n xl: {\n classes: \"min-w-[48rem]\",\n description: \"Extra large dialog for detailed views\",\n },\n },\n role: {\n dialog: {\n classes: \"\",\n description: \"Standard dialog for general-purpose modals\",\n },\n alertdialog: {\n classes: \"\",\n description:\n \"Alert dialog for confirmation flows requiring explicit user acknowledgment\",\n },\n },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n size: \"base\",\n role: \"dialog\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n dimensions: {\n sm: {\n width: 350,\n titleSize: 20,\n descSize: 16,\n padding: 16,\n gap: 8,\n buttonSize: \"sm\",\n },\n base: {\n width: 384,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n lg: {\n width: 512,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n xl: {\n width: 768,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n },\n baseTokens: {\n background: \"color-surface\",\n text: \"text-color-surface\",\n borderRadius: 12,\n shadow: \"shadow-m\",\n },\n backdrop: {\n background: \"color-surface-secondary\",\n opacity: 0.8,\n },\n header: {\n title: { fontWeight: 600, color: \"text-color-surface\" },\n closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n },\n description: {\n fontWeight: 400,\n color: \"text-color-muted\",\n },\n buttons: {\n primary: { background: \"color-primary\", text: \"white\" },\n secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\nexport type KumoDialogRole = keyof typeof KUMO_DIALOG_VARIANTS.role;\n\nexport interface KumoDialogVariantsProps {\n /**\n * Dialog width.\n * - `\"sm\"` — Small (min 288px) for simple confirmations\n * - `\"base\"` — Default (min 384px)\n * - `\"lg\"` — Large (min 512px) for complex content\n * - `\"xl\"` — Extra large (min 768px) for detailed views\n * @default \"base\"\n */\n size?: KumoDialogSize;\n}\n\n// ============================================================================\n// Dialog Role Context\n// ============================================================================\n\nconst DialogRoleContext = createContext<KumoDialogRole>(\"dialog\");\n\nfunction useDialogRole() {\n return useContext(DialogRoleContext);\n}\n\nexport function dialogVariants({\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n return cn(\n // Base styles\n \"shadow-m fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n // Apply size from KUMO_DIALOG_VARIANTS\n KUMO_DIALOG_VARIANTS.size[size].classes,\n );\n}\n\n/**\n * Dialog component props — the modal content panel.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Confirm Action</Dialog.Title>\n * <Dialog.Description>Are you sure?</Dialog.Description>\n * <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n */\nexport type DialogProps = KumoDialogVariantsProps & {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Dialog content (typically Title, Description, Close, and action buttons). */\n children: ReactNode;\n /** Inline styles. */\n style?: CSSProperties;\n};\n\n/**\n * Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Delete Item</Dialog.Title>\n * <Dialog.Description>This action cannot be undone.</Dialog.Description>\n * <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n *\n * @example Alert Dialog for destructive actions\n * ```tsx\n * <Dialog.Root role=\"alertdialog\">\n * <Dialog.Trigger render={(p) => <Button variant=\"destructive\" {...p}>Delete Project</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Delete Project?</Dialog.Title>\n * <Dialog.Description>This action cannot be undone.</Dialog.Description>\n * <Dialog.Close render={(p) => <Button variant=\"secondary\" {...p}>Cancel</Button>} />\n * <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n */\nfunction DialogContent({\n className,\n children,\n style,\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n const role = useDialogRole();\n const BasePortal =\n role === \"alertdialog\" ? AlertDialogBase.Portal : DialogBase.Portal;\n const BaseBackdrop =\n role === \"alertdialog\" ? AlertDialogBase.Backdrop : DialogBase.Backdrop;\n const BasePopup =\n role === \"alertdialog\" ? AlertDialogBase.Popup : DialogBase.Popup;\n\n return (\n <BasePortal>\n <BaseBackdrop className=\"fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n <Surface\n as={BasePopup}\n className={cn(dialogVariants({ size }), className)}\n style={\n {\n transitionProperty: \"scale, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n \"--tw-shadow\":\n \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n ...style,\n } as CSSProperties\n }\n >\n {children}\n </Surface>\n </BasePortal>\n );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\n\nexport type DialogRootProps = BaseDialogRootProps & {\n /**\n * The ARIA role for the dialog.\n * - `\"dialog\"` — Standard dialog for general-purpose modals. Dismissible via outside click by default.\n * - `\"alertdialog\"` — Alert dialog for destructive or confirmation flows. Not dismissible via outside click.\n *\n * Use `role=\"alertdialog\"` for:\n * - Destructive actions (delete, discard, remove)\n * - Confirmation dialogs requiring explicit user acknowledgment\n * - Actions that cannot be undone\n *\n * @default \"dialog\"\n */\n role?: KumoDialogRole;\n};\n\nfunction DialogRoot({\n children,\n role = KUMO_DIALOG_DEFAULT_VARIANTS.role,\n ...props\n}: DialogRootProps) {\n const BaseRoot =\n role === \"alertdialog\" ? AlertDialogBase.Root : DialogBase.Root;\n return (\n <DialogRoleContext.Provider value={role}>\n <BaseRoot {...props}>{children}</BaseRoot>\n </DialogRoleContext.Provider>\n );\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n typeof DialogBase.Trigger\n>;\n\nexport type DialogTriggerProps = BaseDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n const role = useDialogRole();\n const BaseTrigger =\n role === \"alertdialog\" ? AlertDialogBase.Trigger : DialogBase.Trigger;\n return <BaseTrigger {...props}>{children}</BaseTrigger>;\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n const role = useDialogRole();\n const BaseTitle =\n role === \"alertdialog\" ? AlertDialogBase.Title : DialogBase.Title;\n return <BaseTitle className={className} {...props} />;\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n const role = useDialogRole();\n const BaseDescription =\n role === \"alertdialog\"\n ? AlertDialogBase.Description\n : DialogBase.Description;\n return <BaseDescription className={className} {...props} />;\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n const role = useDialogRole();\n const BaseClose =\n role === \"alertdialog\" ? AlertDialogBase.Close : DialogBase.Close;\n return <BaseClose {...props}>{children}</BaseClose>;\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n Root: DialogRoot,\n Trigger: DialogTrigger,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n});\n\nexport {\n Dialog,\n DialogRoot,\n DialogTrigger,\n DialogTitle,\n DialogDescription,\n DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","DialogRoleContext","createContext","useDialogRole","useContext","dialogVariants","size","cn","DialogContent","className","children","style","role","AlertDialogBase.Portal","DialogBase.Portal","jsx","AlertDialogBase.Backdrop","DialogBase.Backdrop","Surface","AlertDialogBase.Popup","DialogBase.Popup","DialogRoot","props","BaseRoot","AlertDialogBase.Root","DialogBase.Root","DialogTrigger","BaseTrigger","AlertDialogBase.Trigger","DialogBase.Trigger","DialogTitle","BaseTitle","AlertDialogBase.Title","DialogBase.Title","DialogDescription","BaseDescription","AlertDialogBase.Description","DialogBase.Description","DialogClose","BaseClose","AlertDialogBase.Close","DialogBase.Close","Dialog"],"mappings":"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"}
|