@cloudflare/kumo 1.15.0 → 1.16.0
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 +34 -0
- package/ai/component-registry.json +317 -13
- package/ai/component-registry.md +507 -26
- package/ai/schemas.ts +18 -2
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +57 -2
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +366 -341
- package/dist/ai/schemas.js.map +1 -1
- package/dist/chunks/{Legend-mkh1v83sz972e29d.js → Legend-bov5dqf08wemc2qj.js} +112 -100
- package/dist/chunks/Legend-bov5dqf08wemc2qj.js.map +1 -0
- package/dist/chunks/{checkbox-bvzuggmadtqawis4.js → checkbox-lawmt1894wr6rpgi.js} +3 -3
- package/dist/chunks/{checkbox-bvzuggmadtqawis4.js.map → checkbox-lawmt1894wr6rpgi.js.map} +1 -1
- package/dist/chunks/{clipboard-text-mwcknzn75qdvigrd.js → clipboard-text-ohx8kkpxisz382rj.js} +3 -3
- package/dist/chunks/{clipboard-text-mwcknzn75qdvigrd.js.map → clipboard-text-ohx8kkpxisz382rj.js.map} +1 -1
- package/dist/chunks/{combobox-ndbaroqh1c0u49ye.js → combobox-ft0u7rfaxawk0r0c.js} +4 -4
- package/dist/chunks/{combobox-ndbaroqh1c0u49ye.js.map → combobox-ft0u7rfaxawk0r0c.js.map} +1 -1
- package/dist/chunks/{command-palette-ejoszjfivybu9yi5.js → command-palette-b31nq4wk7o7gx4sa.js} +2 -2
- package/dist/chunks/{command-palette-ejoszjfivybu9yi5.js.map → command-palette-b31nq4wk7o7gx4sa.js.map} +1 -1
- package/dist/chunks/{dialog-gkmecnx48ge38jrr.js → dialog-l5tmwxrzp9g83jmw.js} +2 -2
- package/dist/chunks/{dialog-gkmecnx48ge38jrr.js.map → dialog-l5tmwxrzp9g83jmw.js.map} +1 -1
- package/dist/chunks/{dropdown-i8n7nv3cvkvb1x3e.js → dropdown-icy3xatdwhzr4une.js} +2 -2
- package/dist/chunks/{dropdown-i8n7nv3cvkvb1x3e.js.map → dropdown-icy3xatdwhzr4une.js.map} +1 -1
- package/dist/chunks/{field-lweivfadxgpqhuqi.js → field-csje72m7j9403fj5.js} +3 -3
- package/dist/chunks/{field-lweivfadxgpqhuqi.js.map → field-csje72m7j9403fj5.js.map} +1 -1
- package/dist/chunks/hcl-hcu7d6ja6t540ijn.js +8 -0
- package/dist/chunks/hcl-hcu7d6ja6t540ijn.js.map +1 -0
- package/dist/chunks/{input-area-obli4ufvu40bfpgp.js → input-area-jko15sbc6zeage3l.js} +4 -4
- package/dist/chunks/{input-area-obli4ufvu40bfpgp.js.map → input-area-jko15sbc6zeage3l.js.map} +1 -1
- package/dist/chunks/{input-ko2dne1givlxq7sz.js → input-c8jmidy7gdqfiky1.js} +3 -3
- package/dist/chunks/{input-ko2dne1givlxq7sz.js.map → input-c8jmidy7gdqfiky1.js.map} +1 -1
- package/dist/chunks/{input-group-dwtsd04lzf2bcsdo.js → input-group-cjsy8kh4vf9312xl.js} +2 -2
- package/dist/chunks/{input-group-dwtsd04lzf2bcsdo.js.map → input-group-cjsy8kh4vf9312xl.js.map} +1 -1
- package/dist/chunks/{label-kjahhybc191quieo.js → label-i46xnnzdh9bsxk6a.js} +2 -2
- package/dist/chunks/{label-kjahhybc191quieo.js.map → label-i46xnnzdh9bsxk6a.js.map} +1 -1
- package/dist/chunks/{link-lpzl5s47pmobk361.js → link-o7yfj4kwgl19fklp.js} +2 -2
- package/dist/chunks/{link-lpzl5s47pmobk361.js.map → link-o7yfj4kwgl19fklp.js.map} +1 -1
- package/dist/chunks/{menubar-ifxxdoa35zz79z1q.js → menubar-g1wqqjuyyfvsim83.js} +2 -2
- package/dist/chunks/{menubar-ifxxdoa35zz79z1q.js.map → menubar-g1wqqjuyyfvsim83.js.map} +1 -1
- package/dist/chunks/{meter-fbtqfg0okpwmaiju.js → meter-cqkrg5axjenbsuue.js} +2 -2
- package/dist/chunks/{meter-fbtqfg0okpwmaiju.js.map → meter-cqkrg5axjenbsuue.js.map} +1 -1
- package/dist/chunks/{pagination-eo0gzzm7v5w8niqe.js → pagination-e3dp8bd80s35f7sd.js} +3 -3
- package/dist/chunks/{pagination-eo0gzzm7v5w8niqe.js.map → pagination-e3dp8bd80s35f7sd.js.map} +1 -1
- package/dist/chunks/{popover-dd7hi5ajeoq9od1i.js → popover-jurf834u2uywluux.js} +2 -2
- package/dist/chunks/{popover-dd7hi5ajeoq9od1i.js.map → popover-jurf834u2uywluux.js.map} +1 -1
- package/dist/chunks/{radio-oi9iw7ls1t04j377.js → radio-l9dzm6sohcvvrsdc.js} +2 -2
- package/dist/chunks/{radio-oi9iw7ls1t04j377.js.map → radio-l9dzm6sohcvvrsdc.js.map} +1 -1
- package/dist/chunks/{select-0m0xklfwdlx8dwba.js → select-hnt87e3cfos48qql.js} +3 -3
- package/dist/chunks/{select-0m0xklfwdlx8dwba.js.map → select-hnt87e3cfos48qql.js.map} +1 -1
- package/dist/chunks/{sensitive-input-rjpykxn2llh0thx1.js → sensitive-input-lvtccf3iqc06lj7b.js} +4 -4
- package/dist/chunks/{sensitive-input-rjpykxn2llh0thx1.js.map → sensitive-input-lvtccf3iqc06lj7b.js.map} +1 -1
- package/dist/chunks/sidebar-l6rk9o5qf8k5vth1.js +875 -0
- package/dist/chunks/sidebar-l6rk9o5qf8k5vth1.js.map +1 -0
- package/dist/chunks/{switch-lv4mrrkfl5uc99xo.js → switch-fukrbip86khvqjn7.js} +3 -3
- package/dist/chunks/{switch-lv4mrrkfl5uc99xo.js.map → switch-fukrbip86khvqjn7.js.map} +1 -1
- package/dist/chunks/{table-fh7jmfip27vdapxm.js → table-orfgzwvxh8yr90dk.js} +2 -2
- package/dist/chunks/{table-fh7jmfip27vdapxm.js.map → table-orfgzwvxh8yr90dk.js.map} +1 -1
- package/dist/chunks/{tabs-hy6oa7xtf96d9mxt.js → tabs-n0t7iro7wr0pzgk2.js} +2 -2
- package/dist/chunks/{tabs-hy6oa7xtf96d9mxt.js.map → tabs-n0t7iro7wr0pzgk2.js.map} +1 -1
- package/dist/chunks/{toast-kswfqmjysxcrwij3.js → toast-r9ajsces7xp8l85w.js} +8 -8
- package/dist/chunks/{toast-kswfqmjysxcrwij3.js.map → toast-r9ajsces7xp8l85w.js.map} +1 -1
- package/dist/chunks/{tooltip-k68wcv9mrigb7rcb.js → tooltip-hnc71tg4gz2gpcvc.js} +2 -2
- package/dist/chunks/{tooltip-k68wcv9mrigb7rcb.js.map → tooltip-hnc71tg4gz2gpcvc.js.map} +1 -1
- package/dist/chunks/{vendor-base-ui-cpvkrhz4zgw9nw2b.js → vendor-base-ui-ccr5l0ynrievzzv3.js} +564 -563
- package/dist/chunks/{vendor-base-ui-cpvkrhz4zgw9nw2b.js.map → vendor-base-ui-ccr5l0ynrievzzv3.js.map} +1 -1
- package/dist/code/server.js +2 -1
- package/dist/code/server.js.map +1 -1
- package/dist/code.js +14 -13
- package/dist/code.js.map +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/field.js +1 -1
- package/dist/components/flow.js +2138 -2087
- 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/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/sidebar.js +35 -0
- package/dist/components/sidebar.js.map +1 -0
- 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 +194 -163
- package/dist/index.js.map +1 -1
- 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/src/code/provider.d.ts.map +1 -1
- package/dist/src/code/server.d.ts.map +1 -1
- package/dist/src/code/types.d.ts +1 -1
- package/dist/src/code/types.d.ts.map +1 -1
- package/dist/src/components/chart/EChart.d.ts.map +1 -1
- package/dist/src/components/chart/TimeseriesChart.d.ts +11 -1
- package/dist/src/components/chart/TimeseriesChart.d.ts.map +1 -1
- package/dist/src/components/flow/diagram.d.ts.map +1 -1
- package/dist/src/components/flow/node.d.ts.map +1 -1
- package/dist/src/components/flow/parallel.d.ts.map +1 -1
- package/dist/src/components/sidebar/index.d.ts +2 -0
- package/dist/src/components/sidebar/index.d.ts.map +1 -0
- package/dist/src/components/sidebar/sidebar.d.ts +556 -0
- package/dist/src/components/sidebar/sidebar.d.ts.map +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-standalone.css +1 -1
- package/package.json +6 -2
- package/scripts/component-registry/index.ts +12 -0
- package/dist/chunks/Legend-mkh1v83sz972e29d.js.map +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as f, jsxs as M } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef as
|
|
3
|
+
import { forwardRef as U, useRef as N, useEffect as R, useMemo as _ } from "react";
|
|
4
4
|
import { c as w } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
-
var
|
|
6
|
-
const
|
|
5
|
+
var X = /* @__PURE__ */ ((e) => (e.Attention = "#FC574A", e.Warning = "#F8A054", e.Neutral = "#82B6FF", e.NeutralLight = "#B9D6FF", e.Disabled = "#B6B6B6", e.DisabledLight = "#D9D9D9", e))(X || {}), K = /* @__PURE__ */ ((e) => (e.Attention = "#FC574AE6", e.Warning = "#F8A054E6", e.Neutral = "#82B6FFE6", e.NeutralLight = "#B9D6FFE6", e.Disabled = "#B6B6B6E6", e.DisabledLight = "#D9D9D9E6", e))(K || {});
|
|
6
|
+
const W = [
|
|
7
7
|
"#086FFF",
|
|
8
8
|
"#CF7EE9",
|
|
9
9
|
"#73CEE6",
|
|
@@ -15,7 +15,7 @@ const P = [
|
|
|
15
15
|
"#EBCAF6",
|
|
16
16
|
"#7366E4"
|
|
17
17
|
/* Indigo2 */
|
|
18
|
-
],
|
|
18
|
+
], j = [
|
|
19
19
|
"#086FFFE6",
|
|
20
20
|
"#CF7EE9E6",
|
|
21
21
|
"#73CEE6E6",
|
|
@@ -28,109 +28,119 @@ const P = [
|
|
|
28
28
|
"#7366E4E6"
|
|
29
29
|
/* Indigo2 */
|
|
30
30
|
];
|
|
31
|
-
var
|
|
31
|
+
var T;
|
|
32
32
|
((e) => {
|
|
33
33
|
function r(n, t = !1) {
|
|
34
|
-
return t ?
|
|
34
|
+
return t ? K[n] : X[n];
|
|
35
35
|
}
|
|
36
36
|
e.semantic = r;
|
|
37
|
-
function
|
|
38
|
-
return t ?
|
|
37
|
+
function a(n, t = !1) {
|
|
38
|
+
return t ? j[n % j.length] : W[n % W.length];
|
|
39
39
|
}
|
|
40
|
-
e.color =
|
|
41
|
-
})(
|
|
42
|
-
const
|
|
40
|
+
e.color = a;
|
|
41
|
+
})(T || (T = {}));
|
|
42
|
+
const Y = U(function({
|
|
43
43
|
echarts: r,
|
|
44
|
-
options:
|
|
44
|
+
options: a,
|
|
45
45
|
optionUpdateBehavior: n,
|
|
46
46
|
className: t,
|
|
47
47
|
isDarkMode: c,
|
|
48
48
|
height: m = 350,
|
|
49
|
-
onEvents:
|
|
49
|
+
onEvents: p
|
|
50
50
|
}, i) {
|
|
51
|
-
const u =
|
|
52
|
-
return
|
|
51
|
+
const u = N(null), b = N(null), y = N({}), F = N({}), E = N(/* @__PURE__ */ new Set());
|
|
52
|
+
return R(() => {
|
|
53
53
|
if (!u.current) return;
|
|
54
|
-
const
|
|
54
|
+
const l = r.init(
|
|
55
55
|
u.current,
|
|
56
56
|
c ? "dark" : {
|
|
57
|
-
color: c ?
|
|
57
|
+
color: c ? j : W
|
|
58
58
|
}
|
|
59
59
|
);
|
|
60
|
-
return b.current =
|
|
60
|
+
return b.current = l, typeof i == "function" ? i(l) : i && (i.current = l), () => {
|
|
61
61
|
for (const d of E.current) {
|
|
62
62
|
const s = F.current[d];
|
|
63
|
-
s &&
|
|
63
|
+
s && l.off(d, s);
|
|
64
64
|
}
|
|
65
|
-
E.current.clear(), typeof i == "function" ? i(null) : i && (i.current = null), b.current = null,
|
|
65
|
+
E.current.clear(), typeof i == "function" ? i(null) : i && (i.current = null), b.current = null, l.dispose();
|
|
66
66
|
};
|
|
67
|
-
}, [u, c]),
|
|
68
|
-
const
|
|
69
|
-
|
|
67
|
+
}, [u, c]), R(() => {
|
|
68
|
+
const l = b.current;
|
|
69
|
+
l && l.setOption(a, {
|
|
70
70
|
notMerge: !1,
|
|
71
71
|
lazyUpdate: !0,
|
|
72
72
|
...n
|
|
73
73
|
});
|
|
74
|
-
}, [c, n,
|
|
75
|
-
y.current =
|
|
76
|
-
}, [
|
|
77
|
-
const
|
|
78
|
-
if (!
|
|
74
|
+
}, [c, n, a]), R(() => {
|
|
75
|
+
y.current = p ?? {};
|
|
76
|
+
}, [p]), R(() => {
|
|
77
|
+
const l = b.current;
|
|
78
|
+
if (!l) return;
|
|
79
79
|
const d = /* @__PURE__ */ new Set();
|
|
80
|
-
for (const [s,
|
|
81
|
-
typeof
|
|
82
|
-
y.current[s]?.(
|
|
83
|
-
}), E.current.has(s) ||
|
|
80
|
+
for (const [s, h] of Object.entries(p ?? {}))
|
|
81
|
+
typeof h == "function" && (d.add(s), F.current[s] || (F.current[s] = (v) => {
|
|
82
|
+
y.current[s]?.(v);
|
|
83
|
+
}), E.current.has(s) || l.on(s, F.current[s]));
|
|
84
84
|
for (const s of E.current) {
|
|
85
85
|
if (d.has(s)) continue;
|
|
86
|
-
const
|
|
87
|
-
|
|
86
|
+
const h = F.current[s];
|
|
87
|
+
h && l.off(s, h);
|
|
88
88
|
}
|
|
89
89
|
E.current = d;
|
|
90
|
-
}, [r, c,
|
|
91
|
-
const
|
|
92
|
-
if (!
|
|
90
|
+
}, [r, c, p]), R(() => {
|
|
91
|
+
const l = b.current, d = u.current;
|
|
92
|
+
if (!l || !d) return;
|
|
93
93
|
let s = !0;
|
|
94
|
-
const
|
|
94
|
+
const h = new ResizeObserver(() => {
|
|
95
95
|
if (s) {
|
|
96
96
|
s = !1;
|
|
97
97
|
return;
|
|
98
98
|
}
|
|
99
|
-
|
|
99
|
+
l.resize();
|
|
100
100
|
});
|
|
101
|
-
return
|
|
102
|
-
}, []), /* @__PURE__ */ f(
|
|
101
|
+
return h.observe(d), () => h.disconnect();
|
|
102
|
+
}, []), /* @__PURE__ */ f(
|
|
103
|
+
"div",
|
|
104
|
+
{
|
|
105
|
+
ref: u,
|
|
106
|
+
className: w("w-full", t),
|
|
107
|
+
style: { height: m },
|
|
108
|
+
tabIndex: a.aria?.enabled ? 0 : void 0,
|
|
109
|
+
role: a.aria?.enabled ? "img" : void 0
|
|
110
|
+
}
|
|
111
|
+
);
|
|
103
112
|
});
|
|
104
|
-
|
|
105
|
-
function
|
|
113
|
+
Y.displayName = "Chart";
|
|
114
|
+
function oe({
|
|
106
115
|
echarts: e,
|
|
107
116
|
type: r = "line",
|
|
108
|
-
data:
|
|
117
|
+
data: a,
|
|
109
118
|
xAxisName: n,
|
|
110
119
|
xAxisTickCount: t,
|
|
111
120
|
xAxisTickFormat: c,
|
|
112
121
|
yAxisTickFormat: m,
|
|
113
|
-
yAxisTickLabelFormat:
|
|
122
|
+
yAxisTickLabelFormat: p,
|
|
114
123
|
yAxisName: i,
|
|
115
124
|
yAxisTickCount: u,
|
|
116
125
|
tooltipValueFormat: b,
|
|
117
126
|
onTimeRangeChange: y,
|
|
118
127
|
height: F = 350,
|
|
119
128
|
incomplete: E,
|
|
120
|
-
isDarkMode:
|
|
129
|
+
isDarkMode: l,
|
|
121
130
|
gradient: d,
|
|
122
|
-
loading: s
|
|
131
|
+
loading: s,
|
|
132
|
+
ariaDescription: h
|
|
123
133
|
}) {
|
|
124
|
-
const
|
|
134
|
+
const v = N(null), D = E?.before, P = E?.after, q = _(() => {
|
|
125
135
|
const g = [], S = r === "bar" ? { type: "bar", stack: "total" } : { type: "line", showSymbol: !1 };
|
|
126
|
-
for (const o of
|
|
127
|
-
const $ =
|
|
136
|
+
for (const o of a) {
|
|
137
|
+
const $ = D && r === "line" ? o.data.filter((O) => O[0] <= D) : [], x = P && r === "line" ? o.data.filter((O) => O[0] >= P) : [], G = $.length > 0 || x.length > 0 ? o.data.slice(
|
|
128
138
|
Math.max(0, $.length - 1),
|
|
129
139
|
Math.max(0, o.data.length - x.length + 1)
|
|
130
140
|
) : o.data, L = d && r === "line" ? {
|
|
131
141
|
color: new e.graphic.LinearGradient(0, 0, 0, 1, [
|
|
132
|
-
{ offset: 0, color:
|
|
133
|
-
{ offset: 1, color:
|
|
142
|
+
{ offset: 0, color: k(o.color, 0.4) },
|
|
143
|
+
{ offset: 1, color: k(o.color, 0) }
|
|
134
144
|
])
|
|
135
145
|
} : void 0;
|
|
136
146
|
g.push({
|
|
@@ -157,7 +167,8 @@ function se({
|
|
|
157
167
|
}
|
|
158
168
|
return {
|
|
159
169
|
aria: {
|
|
160
|
-
enabled: !0
|
|
170
|
+
enabled: !0,
|
|
171
|
+
...h && { label: { description: h } }
|
|
161
172
|
},
|
|
162
173
|
brush: {
|
|
163
174
|
snapToData: !0,
|
|
@@ -177,11 +188,11 @@ function se({
|
|
|
177
188
|
trigger: "axis",
|
|
178
189
|
axisPointer: { type: "shadow" },
|
|
179
190
|
formatter: (o) => {
|
|
180
|
-
const $ = Array.isArray(o) ? o : [o], x = /* @__PURE__ */ new Set(), G = $.filter((B) => x.has(B.seriesName) ? !1 : (x.add(B.seriesName), !0)), L = G[0], A = L?.value?.[0] ?? L?.axisValue, O = A != null ? `<div style="font-weight:600;margin-bottom:4px;">${
|
|
181
|
-
const
|
|
182
|
-
return `${B.marker} ${B.seriesName}: <strong>${
|
|
191
|
+
const $ = Array.isArray(o) ? o : [o], x = /* @__PURE__ */ new Set(), G = $.filter((B) => x.has(B.seriesName) ? !1 : (x.add(B.seriesName), !0)), L = G[0], A = L?.value?.[0] ?? L?.axisValue, O = A != null ? `<div style="font-weight:600;margin-bottom:4px;">${Z(A)}</div>` : "", Q = G.map((B) => {
|
|
192
|
+
const C = B?.value?.[1], H = b ?? p;
|
|
193
|
+
return `${B.marker} ${B.seriesName}: <strong>${H ? H(C) : C}</strong>`;
|
|
183
194
|
}).join("<br/>");
|
|
184
|
-
return `${O}${
|
|
195
|
+
return `${O}${Q}`;
|
|
185
196
|
}
|
|
186
197
|
},
|
|
187
198
|
backgroundColor: "transparent",
|
|
@@ -229,29 +240,30 @@ function se({
|
|
|
229
240
|
series: g
|
|
230
241
|
};
|
|
231
242
|
}, [
|
|
232
|
-
|
|
243
|
+
a,
|
|
233
244
|
n,
|
|
234
245
|
t,
|
|
235
246
|
c,
|
|
236
247
|
m,
|
|
237
|
-
|
|
248
|
+
p,
|
|
238
249
|
i,
|
|
239
250
|
u,
|
|
240
251
|
b,
|
|
241
|
-
|
|
242
|
-
|
|
252
|
+
D,
|
|
253
|
+
P,
|
|
243
254
|
r,
|
|
244
255
|
d,
|
|
245
|
-
e
|
|
246
|
-
|
|
256
|
+
e,
|
|
257
|
+
h
|
|
258
|
+
]), J = _(() => y ? {
|
|
247
259
|
brushend: (g) => {
|
|
248
260
|
const S = g.areas[0].coordRange;
|
|
249
|
-
y(S[0], S[1]),
|
|
261
|
+
y(S[0], S[1]), v.current?.dispatchAction({ type: "brush", areas: [] });
|
|
250
262
|
}
|
|
251
|
-
} : {}, [y]),
|
|
252
|
-
return
|
|
253
|
-
const g =
|
|
254
|
-
if (g &&
|
|
263
|
+
} : {}, [y]), z = !!y;
|
|
264
|
+
return R(() => {
|
|
265
|
+
const g = v.current;
|
|
266
|
+
if (g && z)
|
|
255
267
|
return g.dispatchAction({
|
|
256
268
|
type: "takeGlobalCursor",
|
|
257
269
|
key: "brush",
|
|
@@ -268,31 +280,31 @@ function se({
|
|
|
268
280
|
}
|
|
269
281
|
});
|
|
270
282
|
};
|
|
271
|
-
}, [
|
|
272
|
-
s && /* @__PURE__ */ f(
|
|
283
|
+
}, [v, z, s]), /* @__PURE__ */ M("div", { className: "relative w-full", style: { height: F }, children: [
|
|
284
|
+
s && /* @__PURE__ */ f(V, { height: F, isDarkMode: l }),
|
|
273
285
|
!s && /* @__PURE__ */ f(
|
|
274
|
-
|
|
286
|
+
Y,
|
|
275
287
|
{
|
|
276
288
|
echarts: e,
|
|
277
|
-
ref:
|
|
278
|
-
options:
|
|
289
|
+
ref: v,
|
|
290
|
+
options: q,
|
|
279
291
|
height: F,
|
|
280
|
-
isDarkMode:
|
|
281
|
-
onEvents:
|
|
292
|
+
isDarkMode: l,
|
|
293
|
+
onEvents: J
|
|
282
294
|
}
|
|
283
295
|
)
|
|
284
296
|
] });
|
|
285
297
|
}
|
|
286
|
-
function
|
|
298
|
+
function V({
|
|
287
299
|
height: e,
|
|
288
300
|
isDarkMode: r
|
|
289
301
|
}) {
|
|
290
|
-
const
|
|
302
|
+
const a = e / 2, n = Math.min(e * 0.12, 28), t = 400, c = 120, m = [];
|
|
291
303
|
for (let u = 0; u <= c; u++) {
|
|
292
|
-
const b = -t + u / c * t * 3, y =
|
|
304
|
+
const b = -t + u / c * t * 3, y = a + Math.sin(u / c * 2 * Math.PI * 3) * n;
|
|
293
305
|
m.push(`${u === 0 ? "M" : "L"}${b.toFixed(2)},${y.toFixed(2)}`);
|
|
294
306
|
}
|
|
295
|
-
const
|
|
307
|
+
const p = m.join(" "), i = r ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
|
|
296
308
|
return /* @__PURE__ */ f(
|
|
297
309
|
"div",
|
|
298
310
|
{
|
|
@@ -310,7 +322,7 @@ function U({
|
|
|
310
322
|
children: /* @__PURE__ */ f(
|
|
311
323
|
"path",
|
|
312
324
|
{
|
|
313
|
-
d:
|
|
325
|
+
d: p,
|
|
314
326
|
fill: "none",
|
|
315
327
|
stroke: i,
|
|
316
328
|
strokeWidth: "2",
|
|
@@ -325,25 +337,25 @@ function U({
|
|
|
325
337
|
}
|
|
326
338
|
);
|
|
327
339
|
}
|
|
328
|
-
function
|
|
329
|
-
const
|
|
340
|
+
function k(e, r) {
|
|
341
|
+
const a = Math.max(0, Math.min(1, r)), n = e.match(
|
|
330
342
|
/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
|
|
331
343
|
);
|
|
332
344
|
if (n)
|
|
333
|
-
return `rgba(${n[1]}, ${n[2]}, ${n[3]}, ${
|
|
345
|
+
return `rgba(${n[1]}, ${n[2]}, ${n[3]}, ${a})`;
|
|
334
346
|
let t = e.replace(/^#/, "");
|
|
335
347
|
t.length === 3 && (t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2]), t.length === 8 && (t = t.slice(0, 6));
|
|
336
|
-
const c = parseInt(t.slice(0, 2), 16), m = parseInt(t.slice(2, 4), 16),
|
|
337
|
-
return `rgba(${c}, ${m}, ${
|
|
348
|
+
const c = parseInt(t.slice(0, 2), 16), m = parseInt(t.slice(2, 4), 16), p = parseInt(t.slice(4, 6), 16);
|
|
349
|
+
return `rgba(${c}, ${m}, ${p}, ${a})`;
|
|
338
350
|
}
|
|
339
|
-
function
|
|
351
|
+
function I(e) {
|
|
340
352
|
return e.toString().padStart(2, "0");
|
|
341
353
|
}
|
|
342
|
-
function
|
|
354
|
+
function Z(e) {
|
|
343
355
|
const r = new Date(e);
|
|
344
|
-
return `${r.getFullYear()}-${
|
|
356
|
+
return `${r.getFullYear()}-${I(r.getMonth() + 1)}-${I(r.getDate())} ${I(r.getHours())}:${I(r.getMinutes())}:${I(r.getSeconds())}`;
|
|
345
357
|
}
|
|
346
|
-
function
|
|
358
|
+
function ee({ color: e, value: r, name: a, unit: n, inactive: t }) {
|
|
347
359
|
return /* @__PURE__ */ M("div", { className: "inline-flex flex-col gap-2 min-w-42 py-2", children: [
|
|
348
360
|
/* @__PURE__ */ M("div", { className: "flex items-center gap-2", children: [
|
|
349
361
|
/* @__PURE__ */ f(
|
|
@@ -355,7 +367,7 @@ function Z({ color: e, value: r, name: l, unit: n, inactive: t }) {
|
|
|
355
367
|
style: { backgroundColor: e }
|
|
356
368
|
}
|
|
357
369
|
),
|
|
358
|
-
/* @__PURE__ */ f("span", { className: w("text-xs", { "opacity-50": t }), children:
|
|
370
|
+
/* @__PURE__ */ f("span", { className: w("text-xs", { "opacity-50": t }), children: a })
|
|
359
371
|
] }),
|
|
360
372
|
/* @__PURE__ */ M("div", { className: "flex items-baseline gap-0.5", children: [
|
|
361
373
|
/* @__PURE__ */ f(
|
|
@@ -379,7 +391,7 @@ function Z({ color: e, value: r, name: l, unit: n, inactive: t }) {
|
|
|
379
391
|
] })
|
|
380
392
|
] });
|
|
381
393
|
}
|
|
382
|
-
function
|
|
394
|
+
function te({ color: e, value: r, name: a, inactive: n }) {
|
|
383
395
|
return /* @__PURE__ */ M("div", { className: "inline-flex items-center gap-2", children: [
|
|
384
396
|
/* @__PURE__ */ f(
|
|
385
397
|
"span",
|
|
@@ -390,18 +402,18 @@ function ee({ color: e, value: r, name: l, inactive: n }) {
|
|
|
390
402
|
style: { backgroundColor: e }
|
|
391
403
|
}
|
|
392
404
|
),
|
|
393
|
-
/* @__PURE__ */ f("span", { className: w("text-xs", { "opacity-50": n }), children:
|
|
405
|
+
/* @__PURE__ */ f("span", { className: w("text-xs", { "opacity-50": n }), children: a }),
|
|
394
406
|
/* @__PURE__ */ f("span", { className: w("text-xs font-medium", { "opacity-50": n }), children: r })
|
|
395
407
|
] });
|
|
396
408
|
}
|
|
397
|
-
const
|
|
398
|
-
SmallItem:
|
|
399
|
-
LargeItem:
|
|
409
|
+
const ae = {
|
|
410
|
+
SmallItem: te,
|
|
411
|
+
LargeItem: ee
|
|
400
412
|
};
|
|
401
413
|
export {
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
414
|
+
Y as C,
|
|
415
|
+
oe as T,
|
|
416
|
+
ae as a,
|
|
417
|
+
T as b
|
|
406
418
|
};
|
|
407
|
-
//# sourceMappingURL=Legend-
|
|
419
|
+
//# sourceMappingURL=Legend-bov5dqf08wemc2qj.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Legend-bov5dqf08wemc2qj.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, SetOptionOpts } 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()` */\n options: EChartsOption;\n /**\n * Additional options passed as the second argument to `chart.setOption()`.\n * Defaults to `{ notMerge: false, lazyUpdate: true }`.\n */\n optionUpdateBehavior?: SetOptionOpts;\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 optionUpdateBehavior,\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, {\n notMerge: false,\n lazyUpdate: true,\n ...optionUpdateBehavior,\n });\n }, [isDarkMode, optionUpdateBehavior, 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\n ref={elRef}\n className={cn(\"w-full\", className)}\n style={{ height }}\n tabIndex={options.aria?.enabled ? 0 : undefined}\n role={options.aria?.enabled ? \"img\" : undefined}\n />\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 * Accessible description for screen readers. When provided, it is passed to\n * ECharts' `aria.label.description` and announced when the chart receives\n * focus. Consumers are responsible for writing a meaningful description —\n * see the W3C guidance on complex images for recommendations.\n *\n * @see https://www.w3.org/WAI/tutorials/images/complex/\n * @see https://echarts.apache.org/handbook/en/best-practices/aria/\n */\n ariaDescription?: string;\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 ariaDescription,\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 ...(ariaDescription && { label: { description: ariaDescription } }),\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 ariaDescription,\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","optionUpdateBehavior","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","ariaDescription","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","i","x","d","strokeColor","alpha","rgbMatch","hex","r","g","b","pad","n","LargeItem","unit","inactive","jsxs","SmallItem","ChartLegend"],"mappings":"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"}
|
|
@@ -3,8 +3,8 @@ import { jsx as e, jsxs as C } from "react/jsx-runtime";
|
|
|
3
3
|
import { forwardRef as N, createContext as B, useContext as F } from "react";
|
|
4
4
|
import { MinusIcon as y, CheckIcon as w } from "@phosphor-icons/react";
|
|
5
5
|
import { c as b } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
-
import { L as K } from "./label-
|
|
7
|
-
import { K as j, L, N as E, O as R, C as _, P as G, Q as M } from "./vendor-base-ui-
|
|
6
|
+
import { L as K } from "./label-i46xnnzdh9bsxk6a.js";
|
|
7
|
+
import { K as j, L, N as E, O as R, C as _, P as G, Q as M } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
|
|
8
8
|
const Q = {
|
|
9
9
|
variant: {
|
|
10
10
|
default: {
|
|
@@ -217,4 +217,4 @@ export {
|
|
|
217
217
|
Q as K,
|
|
218
218
|
W as a
|
|
219
219
|
};
|
|
220
|
-
//# sourceMappingURL=checkbox-
|
|
220
|
+
//# sourceMappingURL=checkbox-lawmt1894wr6rpgi.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-bvzuggmadtqawis4.js","sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport {\n Checkbox as BaseCheckbox,\n type CheckboxRootChangeEventDetails,\n} from \"@base-ui/react/checkbox\";\n\n/** Checkbox variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_CHECKBOX_VARIANTS = {\n variant: {\n default: {\n classes:\n \"[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring\",\n description: \"Default checkbox appearance\",\n },\n error: {\n classes: \"[&>span]:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_CHECKBOX_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_CHECKBOX_VARIANTS\nexport type KumoCheckboxVariant = keyof typeof KUMO_CHECKBOX_VARIANTS.variant;\n\nexport interface KumoCheckboxVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard checkbox appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoCheckboxVariant;\n}\n\nexport function checkboxVariants({\n variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: KumoCheckboxVariantsProps = {}) {\n return cn(KUMO_CHECKBOX_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = KumoCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n * <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n * <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n variant?: CheckboxVariant;\n /** Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Whether the checkbox is checked (controlled) */\n checked?: boolean;\n /** Whether the checkbox is in indeterminate state */\n indeterminate?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onValueChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /** Click handler */\n onClick?: (event: React.MouseEvent) => void;\n /** Name for form submission */\n name?: string;\n /** Whether the field is required */\n required?: boolean;\n /** Additional class name */\n className?: string;\n /** Accessible label when no visible label is provided */\n \"aria-label\"?: string;\n /** ID of element that labels this checkbox */\n \"aria-labelledby\"?: string;\n};\n\n/**\n * Checkbox group component props (with built-in Fieldset and CheckboxGroup)\n *\n * Usage:\n * ```tsx\n * <Checkbox.Group\n * legend=\"Choose preferences\"\n * defaultValue={['email']}\n * error=\"You must select at least one option\"\n * >\n * <Checkbox.Item label=\"Email notifications\" value=\"email\" />\n * <Checkbox.Item label=\"SMS notifications\" value=\"sms\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxGroupProps {\n /** Legend text for the group */\n legend: string;\n /** Child Checkbox.Item components */\n children: ReactNode;\n /** Error message for the group (only appears in groups, not single checkboxes) */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Values of checkboxes that should be initially checked (uncontrolled) */\n defaultValue?: string[];\n /** Values of checkboxes that should be checked (controlled) */\n value?: string[];\n /** Event handler called when checkbox values change */\n onValueChange?: (value: string[]) => void;\n /** All possible checkbox values (required for parent checkbox pattern) */\n allValues?: string[];\n /** Whether all checkboxes in the group are disabled */\n disabled?: boolean;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual checkbox item within a group\n */\nexport type CheckboxItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: CheckboxVariant;\n /** Label text displayed next to checkbox */\n label: string;\n /** Value of the checkbox (required when used in Checkbox.Group) */\n value?: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onValueChange?: (checked: boolean) => void;\n name?: string;\n};\n\n// Single checkbox with built-in Field\nconst CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n labelTooltip,\n controlFirst = true,\n onCheckedChange,\n onValueChange,\n onChange,\n required,\n name,\n ...props\n },\n ref,\n ) => {\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasAriaLabel = Boolean(props[\"aria-label\"]);\n const hasAriaLabelledBy = Boolean(props[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Checkbox label='Accept terms' />\\n\" +\n \" - aria-label: <Checkbox aria-label='Select item' />\\n\" +\n \" - aria-labelledby for custom label association\\n\" +\n \" Note: When used inside Checkbox.Group, label is optional\",\n );\n }\n }\n\n // Handle onCheckedChange (preferred) and deprecated onValueChange/onChange\n const handleCheckedChange = (\n newChecked: boolean,\n eventDetails: CheckboxRootChangeEventDetails,\n ) => {\n onCheckedChange?.(newChecked);\n onValueChange?.(newChecked);\n if (onChange) {\n // Backwards compatibility: extend native event with target.checked\n // so existing code using `e.target.checked` continues to work\n const event = Object.assign(eventDetails.event, {\n target: { checked: newChecked },\n });\n onChange(event as never);\n }\n };\n\n const checkboxControl = (\n <BaseCheckbox.Root\n ref={ref}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n className={cn(\n \"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled && \"hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n );\n\n // If no label provided, return bare checkbox (for use in other components like Dropdown)\n if (!label) {\n return checkboxControl;\n }\n\n // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n // See: https://base-ui.com/react/components/field\n return (\n <FieldBase.Root className=\"inline-flex\">\n <FieldBase.Label\n className={cn(\n \"!m-0 !min-h-0 !text-base inline-flex items-center gap-2\",\n controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n )}\n >\n {checkboxControl}\n <Label\n showOptional={required === false}\n tooltip={labelTooltip}\n asContent\n >\n {label}\n </Label>\n </FieldBase.Label>\n </FieldBase.Root>\n );\n },\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n value,\n onCheckedChange,\n onValueChange,\n name,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(CheckboxGroupContext);\n\n // Handle onCheckedChange (preferred) and deprecated onValueChange\n const handleCheckedChange = (newChecked: boolean) => {\n onCheckedChange?.(newChecked);\n onValueChange?.(newChecked);\n };\n\n return (\n <label\n className={cn(\n \"m-0 relative inline-flex items-center gap-2\",\n // Control first (default): checkbox before label\n // Label first: label before checkbox using flex-row-reverse\n !controlFirst && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseCheckbox.Root\n ref={ref}\n value={value}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n className={cn(\n \"peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled &&\n \"group-hover:ring-kumo-ring hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n )}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nCheckboxItem.displayName = \"Checkbox.Item\";\n\n// Checkbox.Group with built-in Fieldset and CheckboxGroup\nfunction CheckboxGroup({\n legend,\n children,\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n allValues,\n disabled,\n controlFirst = true,\n className,\n}: CheckboxGroupProps) {\n return (\n <CheckboxGroupContext.Provider value={{ controlFirst }}>\n <BaseCheckboxGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={onValueChange}\n allValues={allValues}\n disabled={disabled}\n >\n <Fieldset.Root\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n className,\n )}\n >\n <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseCheckboxGroup>\n </CheckboxGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n Item: CheckboxItem,\n Group: CheckboxGroup,\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["KUMO_CHECKBOX_VARIANTS","KUMO_CHECKBOX_DEFAULT_VARIANTS","CheckboxGroupContext","createContext","CheckboxBase","forwardRef","className","checked","indeterminate","disabled","variant","label","labelTooltip","controlFirst","onCheckedChange","onValueChange","onChange","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","newChecked","eventDetails","event","cn","BaseCheckbox.Indicator","renderProps","state","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","handleCheckedChange","CheckboxGroup","legend","children","error","description","defaultValue","allValues","BaseCheckboxGroup","Fieldset.Root","Fieldset.Legend","Checkbox"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"checkbox-lawmt1894wr6rpgi.js","sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport {\n Checkbox as BaseCheckbox,\n type CheckboxRootChangeEventDetails,\n} from \"@base-ui/react/checkbox\";\n\n/** Checkbox variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_CHECKBOX_VARIANTS = {\n variant: {\n default: {\n classes:\n \"[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring\",\n description: \"Default checkbox appearance\",\n },\n error: {\n classes: \"[&>span]:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_CHECKBOX_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_CHECKBOX_VARIANTS\nexport type KumoCheckboxVariant = keyof typeof KUMO_CHECKBOX_VARIANTS.variant;\n\nexport interface KumoCheckboxVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard checkbox appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoCheckboxVariant;\n}\n\nexport function checkboxVariants({\n variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: KumoCheckboxVariantsProps = {}) {\n return cn(KUMO_CHECKBOX_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = KumoCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n * <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n * <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n variant?: CheckboxVariant;\n /** Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Whether the checkbox is checked (controlled) */\n checked?: boolean;\n /** Whether the checkbox is in indeterminate state */\n indeterminate?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onValueChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /** Click handler */\n onClick?: (event: React.MouseEvent) => void;\n /** Name for form submission */\n name?: string;\n /** Whether the field is required */\n required?: boolean;\n /** Additional class name */\n className?: string;\n /** Accessible label when no visible label is provided */\n \"aria-label\"?: string;\n /** ID of element that labels this checkbox */\n \"aria-labelledby\"?: string;\n};\n\n/**\n * Checkbox group component props (with built-in Fieldset and CheckboxGroup)\n *\n * Usage:\n * ```tsx\n * <Checkbox.Group\n * legend=\"Choose preferences\"\n * defaultValue={['email']}\n * error=\"You must select at least one option\"\n * >\n * <Checkbox.Item label=\"Email notifications\" value=\"email\" />\n * <Checkbox.Item label=\"SMS notifications\" value=\"sms\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxGroupProps {\n /** Legend text for the group */\n legend: string;\n /** Child Checkbox.Item components */\n children: ReactNode;\n /** Error message for the group (only appears in groups, not single checkboxes) */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Values of checkboxes that should be initially checked (uncontrolled) */\n defaultValue?: string[];\n /** Values of checkboxes that should be checked (controlled) */\n value?: string[];\n /** Event handler called when checkbox values change */\n onValueChange?: (value: string[]) => void;\n /** All possible checkbox values (required for parent checkbox pattern) */\n allValues?: string[];\n /** Whether all checkboxes in the group are disabled */\n disabled?: boolean;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual checkbox item within a group\n */\nexport type CheckboxItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: CheckboxVariant;\n /** Label text displayed next to checkbox */\n label: string;\n /** Value of the checkbox (required when used in Checkbox.Group) */\n value?: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onValueChange?: (checked: boolean) => void;\n name?: string;\n};\n\n// Single checkbox with built-in Field\nconst CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n labelTooltip,\n controlFirst = true,\n onCheckedChange,\n onValueChange,\n onChange,\n required,\n name,\n ...props\n },\n ref,\n ) => {\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasAriaLabel = Boolean(props[\"aria-label\"]);\n const hasAriaLabelledBy = Boolean(props[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Checkbox label='Accept terms' />\\n\" +\n \" - aria-label: <Checkbox aria-label='Select item' />\\n\" +\n \" - aria-labelledby for custom label association\\n\" +\n \" Note: When used inside Checkbox.Group, label is optional\",\n );\n }\n }\n\n // Handle onCheckedChange (preferred) and deprecated onValueChange/onChange\n const handleCheckedChange = (\n newChecked: boolean,\n eventDetails: CheckboxRootChangeEventDetails,\n ) => {\n onCheckedChange?.(newChecked);\n onValueChange?.(newChecked);\n if (onChange) {\n // Backwards compatibility: extend native event with target.checked\n // so existing code using `e.target.checked` continues to work\n const event = Object.assign(eventDetails.event, {\n target: { checked: newChecked },\n });\n onChange(event as never);\n }\n };\n\n const checkboxControl = (\n <BaseCheckbox.Root\n ref={ref}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n className={cn(\n \"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled && \"hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n );\n\n // If no label provided, return bare checkbox (for use in other components like Dropdown)\n if (!label) {\n return checkboxControl;\n }\n\n // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n // See: https://base-ui.com/react/components/field\n return (\n <FieldBase.Root className=\"inline-flex\">\n <FieldBase.Label\n className={cn(\n \"!m-0 !min-h-0 !text-base inline-flex items-center gap-2\",\n controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n )}\n >\n {checkboxControl}\n <Label\n showOptional={required === false}\n tooltip={labelTooltip}\n asContent\n >\n {label}\n </Label>\n </FieldBase.Label>\n </FieldBase.Root>\n );\n },\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n value,\n onCheckedChange,\n onValueChange,\n name,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(CheckboxGroupContext);\n\n // Handle onCheckedChange (preferred) and deprecated onValueChange\n const handleCheckedChange = (newChecked: boolean) => {\n onCheckedChange?.(newChecked);\n onValueChange?.(newChecked);\n };\n\n return (\n <label\n className={cn(\n \"m-0 relative inline-flex items-center gap-2\",\n // Control first (default): checkbox before label\n // Label first: label before checkbox using flex-row-reverse\n !controlFirst && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseCheckbox.Root\n ref={ref}\n value={value}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n className={cn(\n \"peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled &&\n \"group-hover:ring-kumo-ring hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n )}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nCheckboxItem.displayName = \"Checkbox.Item\";\n\n// Checkbox.Group with built-in Fieldset and CheckboxGroup\nfunction CheckboxGroup({\n legend,\n children,\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n allValues,\n disabled,\n controlFirst = true,\n className,\n}: CheckboxGroupProps) {\n return (\n <CheckboxGroupContext.Provider value={{ controlFirst }}>\n <BaseCheckboxGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={onValueChange}\n allValues={allValues}\n disabled={disabled}\n >\n <Fieldset.Root\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n className,\n )}\n >\n <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseCheckboxGroup>\n </CheckboxGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n Item: CheckboxItem,\n Group: CheckboxGroup,\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["KUMO_CHECKBOX_VARIANTS","KUMO_CHECKBOX_DEFAULT_VARIANTS","CheckboxGroupContext","createContext","CheckboxBase","forwardRef","className","checked","indeterminate","disabled","variant","label","labelTooltip","controlFirst","onCheckedChange","onValueChange","onChange","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","newChecked","eventDetails","event","cn","BaseCheckbox.Indicator","renderProps","state","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","handleCheckedChange","CheckboxGroup","legend","children","error","description","defaultValue","allValues","BaseCheckboxGroup","Fieldset.Root","Fieldset.Legend","Checkbox"],"mappings":"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"}
|