@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.
Files changed (158) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/ai/component-registry.json +317 -13
  3. package/ai/component-registry.md +507 -26
  4. package/ai/schemas.ts +18 -2
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.d.ts +57 -2
  7. package/dist/ai/schemas.d.ts.map +1 -1
  8. package/dist/ai/schemas.js +366 -341
  9. package/dist/ai/schemas.js.map +1 -1
  10. package/dist/chunks/{Legend-mkh1v83sz972e29d.js → Legend-bov5dqf08wemc2qj.js} +112 -100
  11. package/dist/chunks/Legend-bov5dqf08wemc2qj.js.map +1 -0
  12. package/dist/chunks/{checkbox-bvzuggmadtqawis4.js → checkbox-lawmt1894wr6rpgi.js} +3 -3
  13. package/dist/chunks/{checkbox-bvzuggmadtqawis4.js.map → checkbox-lawmt1894wr6rpgi.js.map} +1 -1
  14. package/dist/chunks/{clipboard-text-mwcknzn75qdvigrd.js → clipboard-text-ohx8kkpxisz382rj.js} +3 -3
  15. package/dist/chunks/{clipboard-text-mwcknzn75qdvigrd.js.map → clipboard-text-ohx8kkpxisz382rj.js.map} +1 -1
  16. package/dist/chunks/{combobox-ndbaroqh1c0u49ye.js → combobox-ft0u7rfaxawk0r0c.js} +4 -4
  17. package/dist/chunks/{combobox-ndbaroqh1c0u49ye.js.map → combobox-ft0u7rfaxawk0r0c.js.map} +1 -1
  18. package/dist/chunks/{command-palette-ejoszjfivybu9yi5.js → command-palette-b31nq4wk7o7gx4sa.js} +2 -2
  19. package/dist/chunks/{command-palette-ejoszjfivybu9yi5.js.map → command-palette-b31nq4wk7o7gx4sa.js.map} +1 -1
  20. package/dist/chunks/{dialog-gkmecnx48ge38jrr.js → dialog-l5tmwxrzp9g83jmw.js} +2 -2
  21. package/dist/chunks/{dialog-gkmecnx48ge38jrr.js.map → dialog-l5tmwxrzp9g83jmw.js.map} +1 -1
  22. package/dist/chunks/{dropdown-i8n7nv3cvkvb1x3e.js → dropdown-icy3xatdwhzr4une.js} +2 -2
  23. package/dist/chunks/{dropdown-i8n7nv3cvkvb1x3e.js.map → dropdown-icy3xatdwhzr4une.js.map} +1 -1
  24. package/dist/chunks/{field-lweivfadxgpqhuqi.js → field-csje72m7j9403fj5.js} +3 -3
  25. package/dist/chunks/{field-lweivfadxgpqhuqi.js.map → field-csje72m7j9403fj5.js.map} +1 -1
  26. package/dist/chunks/hcl-hcu7d6ja6t540ijn.js +8 -0
  27. package/dist/chunks/hcl-hcu7d6ja6t540ijn.js.map +1 -0
  28. package/dist/chunks/{input-area-obli4ufvu40bfpgp.js → input-area-jko15sbc6zeage3l.js} +4 -4
  29. package/dist/chunks/{input-area-obli4ufvu40bfpgp.js.map → input-area-jko15sbc6zeage3l.js.map} +1 -1
  30. package/dist/chunks/{input-ko2dne1givlxq7sz.js → input-c8jmidy7gdqfiky1.js} +3 -3
  31. package/dist/chunks/{input-ko2dne1givlxq7sz.js.map → input-c8jmidy7gdqfiky1.js.map} +1 -1
  32. package/dist/chunks/{input-group-dwtsd04lzf2bcsdo.js → input-group-cjsy8kh4vf9312xl.js} +2 -2
  33. package/dist/chunks/{input-group-dwtsd04lzf2bcsdo.js.map → input-group-cjsy8kh4vf9312xl.js.map} +1 -1
  34. package/dist/chunks/{label-kjahhybc191quieo.js → label-i46xnnzdh9bsxk6a.js} +2 -2
  35. package/dist/chunks/{label-kjahhybc191quieo.js.map → label-i46xnnzdh9bsxk6a.js.map} +1 -1
  36. package/dist/chunks/{link-lpzl5s47pmobk361.js → link-o7yfj4kwgl19fklp.js} +2 -2
  37. package/dist/chunks/{link-lpzl5s47pmobk361.js.map → link-o7yfj4kwgl19fklp.js.map} +1 -1
  38. package/dist/chunks/{menubar-ifxxdoa35zz79z1q.js → menubar-g1wqqjuyyfvsim83.js} +2 -2
  39. package/dist/chunks/{menubar-ifxxdoa35zz79z1q.js.map → menubar-g1wqqjuyyfvsim83.js.map} +1 -1
  40. package/dist/chunks/{meter-fbtqfg0okpwmaiju.js → meter-cqkrg5axjenbsuue.js} +2 -2
  41. package/dist/chunks/{meter-fbtqfg0okpwmaiju.js.map → meter-cqkrg5axjenbsuue.js.map} +1 -1
  42. package/dist/chunks/{pagination-eo0gzzm7v5w8niqe.js → pagination-e3dp8bd80s35f7sd.js} +3 -3
  43. package/dist/chunks/{pagination-eo0gzzm7v5w8niqe.js.map → pagination-e3dp8bd80s35f7sd.js.map} +1 -1
  44. package/dist/chunks/{popover-dd7hi5ajeoq9od1i.js → popover-jurf834u2uywluux.js} +2 -2
  45. package/dist/chunks/{popover-dd7hi5ajeoq9od1i.js.map → popover-jurf834u2uywluux.js.map} +1 -1
  46. package/dist/chunks/{radio-oi9iw7ls1t04j377.js → radio-l9dzm6sohcvvrsdc.js} +2 -2
  47. package/dist/chunks/{radio-oi9iw7ls1t04j377.js.map → radio-l9dzm6sohcvvrsdc.js.map} +1 -1
  48. package/dist/chunks/{select-0m0xklfwdlx8dwba.js → select-hnt87e3cfos48qql.js} +3 -3
  49. package/dist/chunks/{select-0m0xklfwdlx8dwba.js.map → select-hnt87e3cfos48qql.js.map} +1 -1
  50. package/dist/chunks/{sensitive-input-rjpykxn2llh0thx1.js → sensitive-input-lvtccf3iqc06lj7b.js} +4 -4
  51. package/dist/chunks/{sensitive-input-rjpykxn2llh0thx1.js.map → sensitive-input-lvtccf3iqc06lj7b.js.map} +1 -1
  52. package/dist/chunks/sidebar-l6rk9o5qf8k5vth1.js +875 -0
  53. package/dist/chunks/sidebar-l6rk9o5qf8k5vth1.js.map +1 -0
  54. package/dist/chunks/{switch-lv4mrrkfl5uc99xo.js → switch-fukrbip86khvqjn7.js} +3 -3
  55. package/dist/chunks/{switch-lv4mrrkfl5uc99xo.js.map → switch-fukrbip86khvqjn7.js.map} +1 -1
  56. package/dist/chunks/{table-fh7jmfip27vdapxm.js → table-orfgzwvxh8yr90dk.js} +2 -2
  57. package/dist/chunks/{table-fh7jmfip27vdapxm.js.map → table-orfgzwvxh8yr90dk.js.map} +1 -1
  58. package/dist/chunks/{tabs-hy6oa7xtf96d9mxt.js → tabs-n0t7iro7wr0pzgk2.js} +2 -2
  59. package/dist/chunks/{tabs-hy6oa7xtf96d9mxt.js.map → tabs-n0t7iro7wr0pzgk2.js.map} +1 -1
  60. package/dist/chunks/{toast-kswfqmjysxcrwij3.js → toast-r9ajsces7xp8l85w.js} +8 -8
  61. package/dist/chunks/{toast-kswfqmjysxcrwij3.js.map → toast-r9ajsces7xp8l85w.js.map} +1 -1
  62. package/dist/chunks/{tooltip-k68wcv9mrigb7rcb.js → tooltip-hnc71tg4gz2gpcvc.js} +2 -2
  63. package/dist/chunks/{tooltip-k68wcv9mrigb7rcb.js.map → tooltip-hnc71tg4gz2gpcvc.js.map} +1 -1
  64. package/dist/chunks/{vendor-base-ui-cpvkrhz4zgw9nw2b.js → vendor-base-ui-ccr5l0ynrievzzv3.js} +564 -563
  65. package/dist/chunks/{vendor-base-ui-cpvkrhz4zgw9nw2b.js.map → vendor-base-ui-ccr5l0ynrievzzv3.js.map} +1 -1
  66. package/dist/code/server.js +2 -1
  67. package/dist/code/server.js.map +1 -1
  68. package/dist/code.js +14 -13
  69. package/dist/code.js.map +1 -1
  70. package/dist/components/chart.js +1 -1
  71. package/dist/components/checkbox.js +1 -1
  72. package/dist/components/clipboard-text.js +1 -1
  73. package/dist/components/combobox.js +1 -1
  74. package/dist/components/command-palette.js +1 -1
  75. package/dist/components/dialog.js +1 -1
  76. package/dist/components/dropdown.js +1 -1
  77. package/dist/components/field.js +1 -1
  78. package/dist/components/flow.js +2138 -2087
  79. package/dist/components/flow.js.map +1 -1
  80. package/dist/components/input.js +3 -3
  81. package/dist/components/label.js +1 -1
  82. package/dist/components/link.js +1 -1
  83. package/dist/components/menubar.js +1 -1
  84. package/dist/components/meter.js +1 -1
  85. package/dist/components/pagination.js +1 -1
  86. package/dist/components/popover.js +1 -1
  87. package/dist/components/radio.js +1 -1
  88. package/dist/components/select.js +1 -1
  89. package/dist/components/sensitive-input.js +1 -1
  90. package/dist/components/sidebar.js +35 -0
  91. package/dist/components/sidebar.js.map +1 -0
  92. package/dist/components/switch.js +1 -1
  93. package/dist/components/table.js +1 -1
  94. package/dist/components/tabs.js +1 -1
  95. package/dist/components/toast.js +2 -2
  96. package/dist/components/tooltip.js +1 -1
  97. package/dist/index.js +194 -163
  98. package/dist/index.js.map +1 -1
  99. package/dist/primitives/accordion.js +1 -1
  100. package/dist/primitives/alert-dialog.js +1 -1
  101. package/dist/primitives/autocomplete.js +1 -1
  102. package/dist/primitives/avatar.js +1 -1
  103. package/dist/primitives/button.js +1 -1
  104. package/dist/primitives/checkbox-group.js +1 -1
  105. package/dist/primitives/checkbox.js +1 -1
  106. package/dist/primitives/collapsible.js +1 -1
  107. package/dist/primitives/combobox.js +1 -1
  108. package/dist/primitives/context-menu.js +1 -1
  109. package/dist/primitives/csp-provider.js +1 -1
  110. package/dist/primitives/dialog.js +1 -1
  111. package/dist/primitives/direction-provider.js +1 -1
  112. package/dist/primitives/drawer.js +1 -1
  113. package/dist/primitives/field.js +1 -1
  114. package/dist/primitives/fieldset.js +1 -1
  115. package/dist/primitives/form.js +1 -1
  116. package/dist/primitives/input.js +1 -1
  117. package/dist/primitives/menu.js +1 -1
  118. package/dist/primitives/menubar.js +1 -1
  119. package/dist/primitives/meter.js +1 -1
  120. package/dist/primitives/navigation-menu.js +1 -1
  121. package/dist/primitives/number-field.js +1 -1
  122. package/dist/primitives/popover.js +1 -1
  123. package/dist/primitives/preview-card.js +1 -1
  124. package/dist/primitives/progress.js +1 -1
  125. package/dist/primitives/radio-group.js +1 -1
  126. package/dist/primitives/radio.js +1 -1
  127. package/dist/primitives/scroll-area.js +1 -1
  128. package/dist/primitives/select.js +1 -1
  129. package/dist/primitives/separator.js +1 -1
  130. package/dist/primitives/slider.js +1 -1
  131. package/dist/primitives/switch.js +1 -1
  132. package/dist/primitives/tabs.js +1 -1
  133. package/dist/primitives/toast.js +1 -1
  134. package/dist/primitives/toggle-group.js +1 -1
  135. package/dist/primitives/toggle.js +1 -1
  136. package/dist/primitives/toolbar.js +1 -1
  137. package/dist/primitives/tooltip.js +1 -1
  138. package/dist/primitives.js +1 -1
  139. package/dist/src/code/provider.d.ts.map +1 -1
  140. package/dist/src/code/server.d.ts.map +1 -1
  141. package/dist/src/code/types.d.ts +1 -1
  142. package/dist/src/code/types.d.ts.map +1 -1
  143. package/dist/src/components/chart/EChart.d.ts.map +1 -1
  144. package/dist/src/components/chart/TimeseriesChart.d.ts +11 -1
  145. package/dist/src/components/chart/TimeseriesChart.d.ts.map +1 -1
  146. package/dist/src/components/flow/diagram.d.ts.map +1 -1
  147. package/dist/src/components/flow/node.d.ts.map +1 -1
  148. package/dist/src/components/flow/parallel.d.ts.map +1 -1
  149. package/dist/src/components/sidebar/index.d.ts +2 -0
  150. package/dist/src/components/sidebar/index.d.ts.map +1 -0
  151. package/dist/src/components/sidebar/sidebar.d.ts +556 -0
  152. package/dist/src/components/sidebar/sidebar.d.ts.map +1 -0
  153. package/dist/src/index.d.ts +1 -0
  154. package/dist/src/index.d.ts.map +1 -1
  155. package/dist/styles/kumo-standalone.css +1 -1
  156. package/package.json +6 -2
  157. package/scripts/component-registry/index.ts +12 -0
  158. 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 Q, useRef as v, useEffect as N, useMemo as H } from "react";
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 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 = [
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
- ], W = [
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 ? X[n] : k[n];
34
+ return t ? K[n] : X[n];
35
35
  }
36
36
  e.semantic = r;
37
- function l(n, t = !1) {
38
- return t ? W[n % W.length] : P[n % P.length];
37
+ function a(n, t = !1) {
38
+ return t ? j[n % j.length] : W[n % W.length];
39
39
  }
40
- e.color = l;
41
- })(_ || (_ = {}));
42
- const K = Q(function({
40
+ e.color = a;
41
+ })(T || (T = {}));
42
+ const Y = U(function({
43
43
  echarts: r,
44
- options: l,
44
+ options: a,
45
45
  optionUpdateBehavior: n,
46
46
  className: t,
47
47
  isDarkMode: c,
48
48
  height: m = 350,
49
- onEvents: h
49
+ onEvents: p
50
50
  }, i) {
51
- const u = v(null), b = v(null), y = v({}), F = v({}), E = v(/* @__PURE__ */ new Set());
52
- return N(() => {
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 a = r.init(
54
+ const l = r.init(
55
55
  u.current,
56
56
  c ? "dark" : {
57
- color: c ? W : P
57
+ color: c ? j : W
58
58
  }
59
59
  );
60
- return b.current = a, typeof i == "function" ? i(a) : i && (i.current = a), () => {
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 && a.off(d, 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, a.dispose();
65
+ E.current.clear(), typeof i == "function" ? i(null) : i && (i.current = null), b.current = null, l.dispose();
66
66
  };
67
- }, [u, c]), N(() => {
68
- const a = b.current;
69
- a && a.setOption(l, {
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, l]), N(() => {
75
- y.current = h ?? {};
76
- }, [h]), N(() => {
77
- const a = b.current;
78
- if (!a) return;
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, p] of Object.entries(h ?? {}))
81
- typeof p == "function" && (d.add(s), F.current[s] || (F.current[s] = (R) => {
82
- y.current[s]?.(R);
83
- }), E.current.has(s) || a.on(s, F.current[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 p = F.current[s];
87
- p && a.off(s, p);
86
+ const h = F.current[s];
87
+ h && l.off(s, h);
88
88
  }
89
89
  E.current = d;
90
- }, [r, c, h]), N(() => {
91
- const a = b.current, d = u.current;
92
- if (!a || !d) return;
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 p = new ResizeObserver(() => {
94
+ const h = new ResizeObserver(() => {
95
95
  if (s) {
96
96
  s = !1;
97
97
  return;
98
98
  }
99
- a.resize();
99
+ l.resize();
100
100
  });
101
- return p.observe(d), () => p.disconnect();
102
- }, []), /* @__PURE__ */ f("div", { ref: u, className: w("w-full", t), style: { height: m } });
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
- K.displayName = "Chart";
105
- function se({
113
+ Y.displayName = "Chart";
114
+ function oe({
106
115
  echarts: e,
107
116
  type: r = "line",
108
- data: l,
117
+ data: a,
109
118
  xAxisName: n,
110
119
  xAxisTickCount: t,
111
120
  xAxisTickFormat: c,
112
121
  yAxisTickFormat: m,
113
- yAxisTickLabelFormat: h,
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: a,
129
+ isDarkMode: l,
121
130
  gradient: d,
122
- loading: s
131
+ loading: s,
132
+ ariaDescription: h
123
133
  }) {
124
- const p = v(null), R = E?.before, I = E?.after, Y = H(() => {
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 l) {
127
- const $ = R && r === "line" ? o.data.filter((O) => O[0] <= R) : [], x = I && r === "line" ? o.data.filter((O) => O[0] >= I) : [], G = $.length > 0 || x.length > 0 ? o.data.slice(
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: T(o.color, 0.4) },
133
- { offset: 1, color: T(o.color, 0) }
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;">${V(A)}</div>` : "", J = G.map((B) => {
181
- const z = B?.value?.[1], C = b ?? h;
182
- return `${B.marker} ${B.seriesName}: <strong>${C ? C(z) : z}</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}${J}`;
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
- l,
243
+ a,
233
244
  n,
234
245
  t,
235
246
  c,
236
247
  m,
237
- h,
248
+ p,
238
249
  i,
239
250
  u,
240
251
  b,
241
- R,
242
- I,
252
+ D,
253
+ P,
243
254
  r,
244
255
  d,
245
- e
246
- ]), q = H(() => y ? {
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]), p.current?.dispatchAction({ type: "brush", areas: [] });
261
+ y(S[0], S[1]), v.current?.dispatchAction({ type: "brush", areas: [] });
250
262
  }
251
- } : {}, [y]), j = !!y;
252
- return N(() => {
253
- const g = p.current;
254
- if (g && j)
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
- }, [p, j, s]), /* @__PURE__ */ M("div", { className: "relative w-full", style: { height: F }, children: [
272
- s && /* @__PURE__ */ f(U, { height: F, isDarkMode: a }),
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
- K,
286
+ Y,
275
287
  {
276
288
  echarts: e,
277
- ref: p,
278
- options: Y,
289
+ ref: v,
290
+ options: q,
279
291
  height: F,
280
- isDarkMode: a,
281
- onEvents: q
292
+ isDarkMode: l,
293
+ onEvents: J
282
294
  }
283
295
  )
284
296
  ] });
285
297
  }
286
- function U({
298
+ function V({
287
299
  height: e,
288
300
  isDarkMode: r
289
301
  }) {
290
- const l = e / 2, n = Math.min(e * 0.12, 28), t = 400, c = 120, m = [];
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 = l + Math.sin(u / c * 2 * Math.PI * 3) * n;
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 h = m.join(" "), i = r ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.2)";
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: h,
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 T(e, r) {
329
- const l = Math.max(0, Math.min(1, r)), n = e.match(
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]}, ${l})`;
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), h = parseInt(t.slice(4, 6), 16);
337
- return `rgba(${c}, ${m}, ${h}, ${l})`;
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 D(e) {
351
+ function I(e) {
340
352
  return e.toString().padStart(2, "0");
341
353
  }
342
- function V(e) {
354
+ function Z(e) {
343
355
  const r = new Date(e);
344
- return `${r.getFullYear()}-${D(r.getMonth() + 1)}-${D(r.getDate())} ${D(r.getHours())}:${D(r.getMinutes())}:${D(r.getSeconds())}`;
356
+ return `${r.getFullYear()}-${I(r.getMonth() + 1)}-${I(r.getDate())} ${I(r.getHours())}:${I(r.getMinutes())}:${I(r.getSeconds())}`;
345
357
  }
346
- function Z({ color: e, value: r, name: l, unit: n, inactive: t }) {
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: l })
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 ee({ color: e, value: r, name: l, inactive: n }) {
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: l }),
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 oe = {
398
- SmallItem: ee,
399
- LargeItem: Z
409
+ const ae = {
410
+ SmallItem: te,
411
+ LargeItem: ee
400
412
  };
401
413
  export {
402
- K as C,
403
- se as T,
404
- oe as a,
405
- _ as b
414
+ Y as C,
415
+ oe as T,
416
+ ae as a,
417
+ T as b
406
418
  };
407
- //# sourceMappingURL=Legend-mkh1v83sz972e29d.js.map
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-kjahhybc191quieo.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-cpvkrhz4zgw9nw2b.js";
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-bvzuggmadtqawis4.js.map
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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"}