@cloudflare/kumo 1.13.1 → 1.14.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 (179) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/ai/component-registry.json +47 -21
  3. package/ai/component-registry.md +243 -15
  4. package/ai/schemas.ts +3 -2
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.d.ts +10 -2
  7. package/dist/ai/schemas.d.ts.map +1 -1
  8. package/dist/ai/schemas.js +175 -173
  9. package/dist/ai/schemas.js.map +1 -1
  10. package/dist/chunks/Legend-mkh1v83sz972e29d.js +407 -0
  11. package/dist/chunks/Legend-mkh1v83sz972e29d.js.map +1 -0
  12. package/dist/chunks/{breadcrumbs-e564gabk59go37cg.js → breadcrumbs-gr907zcoo65rpn90.js} +2 -2
  13. package/dist/chunks/{breadcrumbs-e564gabk59go37cg.js.map → breadcrumbs-gr907zcoo65rpn90.js.map} +1 -1
  14. package/dist/chunks/{button-b1yp3lbrhjr9eg07.js → button-d82sexqgnd834eaa.js} +2 -2
  15. package/dist/chunks/{button-b1yp3lbrhjr9eg07.js.map → button-d82sexqgnd834eaa.js.map} +1 -1
  16. package/dist/chunks/{checkbox-khvh0efmlzvlo6qi.js → checkbox-gebzflhsvo6zkcrm.js} +3 -3
  17. package/dist/chunks/{checkbox-khvh0efmlzvlo6qi.js.map → checkbox-gebzflhsvo6zkcrm.js.map} +1 -1
  18. package/dist/chunks/{clipboard-text-jvrlvyz5ulm49h5b.js → clipboard-text-nnmfwusts804p1qd.js} +4 -4
  19. package/dist/chunks/{clipboard-text-jvrlvyz5ulm49h5b.js.map → clipboard-text-nnmfwusts804p1qd.js.map} +1 -1
  20. package/dist/chunks/{combobox-i3mdp6f01dvpoc5j.js → combobox-ds8qzpuaagb1udzg.js} +50 -39
  21. package/dist/chunks/combobox-ds8qzpuaagb1udzg.js.map +1 -0
  22. package/dist/chunks/{command-palette-l8dym46a74o7j8ci.js → command-palette-essubhvibj84mhx8.js} +3 -3
  23. package/dist/chunks/{command-palette-l8dym46a74o7j8ci.js.map → command-palette-essubhvibj84mhx8.js.map} +1 -1
  24. package/dist/chunks/{dialog-emk68n0piw8u7hkb.js → dialog-hmfums1yr41afbsx.js} +2 -2
  25. package/dist/chunks/{dialog-emk68n0piw8u7hkb.js.map → dialog-hmfums1yr41afbsx.js.map} +1 -1
  26. package/dist/chunks/{dropdown-ejgjnn9gq3daua1h.js → dropdown-nhhm3rddlt7fmd2a.js} +2 -2
  27. package/dist/chunks/{dropdown-ejgjnn9gq3daua1h.js.map → dropdown-nhhm3rddlt7fmd2a.js.map} +1 -1
  28. package/dist/chunks/{empty-crbntv0dhud7besh.js → empty-h3qhwtx0z8arupc9.js} +2 -2
  29. package/dist/chunks/{empty-crbntv0dhud7besh.js.map → empty-h3qhwtx0z8arupc9.js.map} +1 -1
  30. package/dist/chunks/{engine-javascript-hi1kqifa6nkcridk.js → engine-javascript-cvvdau2e8o59vsx6.js} +5 -5
  31. package/dist/chunks/{engine-javascript-hi1kqifa6nkcridk.js.map → engine-javascript-cvvdau2e8o59vsx6.js.map} +1 -1
  32. package/dist/chunks/{field-ftrgblg9mbmz9eo3.js → field-pcsc33yrvgq6g9ll.js} +3 -3
  33. package/dist/chunks/{field-ftrgblg9mbmz9eo3.js.map → field-pcsc33yrvgq6g9ll.js.map} +1 -1
  34. package/dist/chunks/input-area-oyw0rq0q2wm0blmb.js +74 -0
  35. package/dist/chunks/input-area-oyw0rq0q2wm0blmb.js.map +1 -0
  36. package/dist/chunks/{input-group-g6qyhe5jvpe02hee.js → input-group-fjq64pzze8kklmni.js} +3 -3
  37. package/dist/chunks/{input-group-g6qyhe5jvpe02hee.js.map → input-group-fjq64pzze8kklmni.js.map} +1 -1
  38. package/dist/chunks/{input-me56hug8sl0u650q.js → input-oaa51811nxs0z2mw.js} +20 -20
  39. package/dist/chunks/input-oaa51811nxs0z2mw.js.map +1 -0
  40. package/dist/chunks/{label-eooot7dhtfvw7n3x.js → label-m5dcn3mqhnmi0dgq.js} +3 -3
  41. package/dist/chunks/{label-eooot7dhtfvw7n3x.js.map → label-m5dcn3mqhnmi0dgq.js.map} +1 -1
  42. package/dist/chunks/{link-moetfdbgxda0yhwg.js → link-desli097365ac82o.js} +2 -2
  43. package/dist/chunks/{link-moetfdbgxda0yhwg.js.map → link-desli097365ac82o.js.map} +1 -1
  44. package/dist/chunks/{menubar-c2zwv4mbo3xqq7is.js → menubar-eir09makes5l9xby.js} +2 -2
  45. package/dist/chunks/{menubar-c2zwv4mbo3xqq7is.js.map → menubar-eir09makes5l9xby.js.map} +1 -1
  46. package/dist/chunks/{meter-em2hfu8j2rhmf5ae.js → meter-kl2puqzdbfkwrok9.js} +2 -2
  47. package/dist/chunks/{meter-em2hfu8j2rhmf5ae.js.map → meter-kl2puqzdbfkwrok9.js.map} +1 -1
  48. package/dist/chunks/{pagination-xt93wvwvow4z44lc.js → pagination-c2sv9vs43whhvznh.js} +3 -3
  49. package/dist/chunks/{pagination-xt93wvwvow4z44lc.js.map → pagination-c2sv9vs43whhvznh.js.map} +1 -1
  50. package/dist/chunks/{popover-irccwetx73p8pnua.js → popover-ji1zh9zqrj6at834.js} +2 -2
  51. package/dist/chunks/{popover-irccwetx73p8pnua.js.map → popover-ji1zh9zqrj6at834.js.map} +1 -1
  52. package/dist/chunks/radio-cnsup12f302rxkxl.js +200 -0
  53. package/dist/chunks/radio-cnsup12f302rxkxl.js.map +1 -0
  54. package/dist/chunks/{select-jxxef2rf76pgdrf8.js → select-hgn6ikyor1p6jd9r.js} +21 -14
  55. package/dist/chunks/select-hgn6ikyor1p6jd9r.js.map +1 -0
  56. package/dist/chunks/{sensitive-input-i7ey1w0ky7nco012.js → sensitive-input-drdu6upod3ucl6vt.js} +34 -34
  57. package/dist/chunks/sensitive-input-drdu6upod3ucl6vt.js.map +1 -0
  58. package/dist/chunks/switch-n7zyzirax1l016n2.js +241 -0
  59. package/dist/chunks/switch-n7zyzirax1l016n2.js.map +1 -0
  60. package/dist/chunks/{table-d4ql7fjvok30xs1f.js → table-l2yy3jtkbhvqlq43.js} +3 -3
  61. package/dist/chunks/table-l2yy3jtkbhvqlq43.js.map +1 -0
  62. package/dist/chunks/{tabs-n3rcvuzx0gbslyy6.js → tabs-omc1n6jaxkf41pvg.js} +2 -2
  63. package/dist/chunks/{tabs-n3rcvuzx0gbslyy6.js.map → tabs-omc1n6jaxkf41pvg.js.map} +1 -1
  64. package/dist/chunks/{toast-j05qj3vk688ht1i1.js → toast-bkvbwc1x3s7fbzkt.js} +3 -3
  65. package/dist/chunks/{toast-j05qj3vk688ht1i1.js.map → toast-bkvbwc1x3s7fbzkt.js.map} +1 -1
  66. package/dist/chunks/{tooltip-es2dwwbhftg4k2jy.js → tooltip-nwvv7fhpqpo2rqlc.js} +2 -2
  67. package/dist/chunks/{tooltip-es2dwwbhftg4k2jy.js.map → tooltip-nwvv7fhpqpo2rqlc.js.map} +1 -1
  68. package/dist/chunks/{vendor-base-ui-kxxocm122zr4pipe.js → vendor-base-ui-lgoligkf81eyvnde.js} +21 -21
  69. package/dist/chunks/{vendor-base-ui-kxxocm122zr4pipe.js.map → vendor-base-ui-lgoligkf81eyvnde.js.map} +1 -1
  70. package/dist/code.js +2 -2
  71. package/dist/code.js.map +1 -1
  72. package/dist/components/breadcrumbs.js +1 -1
  73. package/dist/components/button.js +1 -1
  74. package/dist/components/chart.js +1 -1
  75. package/dist/components/checkbox.js +1 -1
  76. package/dist/components/clipboard-text.js +1 -1
  77. package/dist/components/combobox.js +1 -1
  78. package/dist/components/command-palette.js +1 -1
  79. package/dist/components/dialog.js +1 -1
  80. package/dist/components/dropdown.js +1 -1
  81. package/dist/components/empty.js +1 -1
  82. package/dist/components/field.js +1 -1
  83. package/dist/components/flow.js +1435 -1431
  84. package/dist/components/flow.js.map +1 -1
  85. package/dist/components/input.js +3 -3
  86. package/dist/components/label.js +1 -1
  87. package/dist/components/link.js +1 -1
  88. package/dist/components/menubar.js +1 -1
  89. package/dist/components/meter.js +1 -1
  90. package/dist/components/pagination.js +1 -1
  91. package/dist/components/popover.js +1 -1
  92. package/dist/components/radio.js +1 -1
  93. package/dist/components/select.js +1 -1
  94. package/dist/components/sensitive-input.js +1 -1
  95. package/dist/components/switch.js +1 -1
  96. package/dist/components/table.js +1 -1
  97. package/dist/components/tabs.js +1 -1
  98. package/dist/components/toast.js +2 -2
  99. package/dist/components/tooltip.js +1 -1
  100. package/dist/index.js +69 -68
  101. package/dist/primitives/accordion.js +1 -1
  102. package/dist/primitives/alert-dialog.js +1 -1
  103. package/dist/primitives/autocomplete.js +1 -1
  104. package/dist/primitives/avatar.js +1 -1
  105. package/dist/primitives/button.js +1 -1
  106. package/dist/primitives/checkbox-group.js +1 -1
  107. package/dist/primitives/checkbox.js +1 -1
  108. package/dist/primitives/collapsible.js +1 -1
  109. package/dist/primitives/combobox.js +1 -1
  110. package/dist/primitives/context-menu.js +1 -1
  111. package/dist/primitives/csp-provider.js +1 -1
  112. package/dist/primitives/dialog.js +1 -1
  113. package/dist/primitives/direction-provider.js +1 -1
  114. package/dist/primitives/drawer.js +1 -1
  115. package/dist/primitives/field.js +1 -1
  116. package/dist/primitives/fieldset.js +1 -1
  117. package/dist/primitives/form.js +1 -1
  118. package/dist/primitives/input.js +1 -1
  119. package/dist/primitives/menu.js +1 -1
  120. package/dist/primitives/menubar.js +1 -1
  121. package/dist/primitives/meter.js +1 -1
  122. package/dist/primitives/navigation-menu.js +1 -1
  123. package/dist/primitives/number-field.js +1 -1
  124. package/dist/primitives/popover.js +1 -1
  125. package/dist/primitives/preview-card.js +1 -1
  126. package/dist/primitives/progress.js +1 -1
  127. package/dist/primitives/radio-group.js +1 -1
  128. package/dist/primitives/radio.js +1 -1
  129. package/dist/primitives/scroll-area.js +1 -1
  130. package/dist/primitives/select.js +1 -1
  131. package/dist/primitives/separator.js +1 -1
  132. package/dist/primitives/slider.js +1 -1
  133. package/dist/primitives/switch.js +1 -1
  134. package/dist/primitives/tabs.js +1 -1
  135. package/dist/primitives/toast.js +1 -1
  136. package/dist/primitives/toggle-group.js +1 -1
  137. package/dist/primitives/toggle.js +1 -1
  138. package/dist/primitives/toolbar.js +1 -1
  139. package/dist/primitives/tooltip.js +1 -1
  140. package/dist/primitives.js +1 -1
  141. package/dist/scripts/theme-generator/config.d.ts.map +1 -1
  142. package/dist/scripts/theme-generator/config.js +12 -3
  143. package/dist/scripts/theme-generator/config.js.map +1 -1
  144. package/dist/src/code/code-highlighted.d.ts +2 -2
  145. package/dist/src/code/code-highlighted.d.ts.map +1 -1
  146. package/dist/src/code/provider.d.ts +2 -2
  147. package/dist/src/code/provider.d.ts.map +1 -1
  148. package/dist/src/components/chart/EChart.d.ts +7 -2
  149. package/dist/src/components/chart/EChart.d.ts.map +1 -1
  150. package/dist/src/components/combobox/combobox.d.ts.map +1 -1
  151. package/dist/src/components/flow/diagram.d.ts.map +1 -1
  152. package/dist/src/components/input/input-area.d.ts.map +1 -1
  153. package/dist/src/components/radio/index.d.ts +1 -1
  154. package/dist/src/components/radio/index.d.ts.map +1 -1
  155. package/dist/src/components/radio/radio.d.ts +43 -4
  156. package/dist/src/components/radio/radio.d.ts.map +1 -1
  157. package/dist/src/components/select/select.d.ts.map +1 -1
  158. package/dist/src/components/switch/switch.d.ts +8 -8
  159. package/dist/src/components/switch/switch.d.ts.map +1 -1
  160. package/dist/src/index.d.ts +1 -1
  161. package/dist/src/index.d.ts.map +1 -1
  162. package/dist/styles/kumo-binding.css +5 -0
  163. package/dist/styles/kumo-standalone.css +1 -1
  164. package/dist/styles/theme-kumo.css +7 -0
  165. package/package.json +3 -6
  166. package/scripts/theme-generator/config.ts +12 -3
  167. package/dist/chunks/Legend-fu32ev5ph2ehbfzy.js +0 -402
  168. package/dist/chunks/Legend-fu32ev5ph2ehbfzy.js.map +0 -1
  169. package/dist/chunks/combobox-i3mdp6f01dvpoc5j.js.map +0 -1
  170. package/dist/chunks/input-area-hxtyrqpp44m18j72.js +0 -59
  171. package/dist/chunks/input-area-hxtyrqpp44m18j72.js.map +0 -1
  172. package/dist/chunks/input-me56hug8sl0u650q.js.map +0 -1
  173. package/dist/chunks/radio-394mfs3au5m8cgd8.js +0 -125
  174. package/dist/chunks/radio-394mfs3au5m8cgd8.js.map +0 -1
  175. package/dist/chunks/select-jxxef2rf76pgdrf8.js.map +0 -1
  176. package/dist/chunks/sensitive-input-i7ey1w0ky7nco012.js.map +0 -1
  177. package/dist/chunks/switch-b0xo8fxsfzv87krj.js +0 -257
  178. package/dist/chunks/switch-b0xo8fxsfzv87krj.js.map +0 -1
  179. package/dist/chunks/table-d4ql7fjvok30xs1f.js.map +0 -1
@@ -1,11 +1,11 @@
1
1
  "use client";
2
- import { jsxs as b, Fragment as ce, jsx as i } from "react/jsx-runtime";
2
+ import { jsxs as b, Fragment as ce, jsx as r } from "react/jsx-runtime";
3
3
  import { EyeSlash as ue, Eye as pe } from "@phosphor-icons/react";
4
4
  import { forwardRef as de, useState as w, useRef as N, useId as T, useCallback as l, useEffect as fe } from "react";
5
5
  import { c as p } from "./cn-ct4n7r74mh8y0f48.js";
6
- import { K as me, i as ve } from "./input-me56hug8sl0u650q.js";
7
- import { F as ge } from "./field-ftrgblg9mbmz9eo3.js";
8
- import { I as he } from "./vendor-base-ui-kxxocm122zr4pipe.js";
6
+ import { K as me, i as ve } from "./input-oaa51811nxs0z2mw.js";
7
+ import { F as ge } from "./field-pcsc33yrvgq6g9ll.js";
8
+ import { I as he } from "./vendor-base-ui-lgoligkf81eyvnde.js";
9
9
  const Te = me, M = {
10
10
  size: "base",
11
11
  variant: "default"
@@ -18,7 +18,7 @@ const Te = me, M = {
18
18
  onCopy: k,
19
19
  size: t = M.size,
20
20
  variant: $ = M.variant,
21
- disabled: r = !1,
21
+ disabled: i = !1,
22
22
  readOnly: d = !1,
23
23
  id: j,
24
24
  autoComplete: H = "off",
@@ -73,7 +73,7 @@ const Te = me, M = {
73
73
  A.current !== n && (A.current = n, !n && o === "masked" && c("empty"));
74
74
  const te = l(
75
75
  (e) => {
76
- if (!r) {
76
+ if (!i) {
77
77
  if (u.current) {
78
78
  const a = u.current.getBoundingClientRect();
79
79
  if (!(e.clientX >= a.left && e.clientX <= a.right && e.clientY >= a.top && e.clientY <= a.bottom)) return;
@@ -81,7 +81,7 @@ const Te = me, M = {
81
81
  o === "masked" && n && (c("revealed"), d || setTimeout(() => C.current?.focus(), 0));
82
82
  }
83
83
  },
84
- [o, n, r, d]
84
+ [o, n, i, d]
85
85
  ), ne = l(
86
86
  (e) => {
87
87
  e.stopPropagation(), o === "revealed" ? c("masked") : o === "empty" && n && c("revealed");
@@ -98,24 +98,24 @@ const Te = me, M = {
98
98
  u.current && e.relatedTarget instanceof Node && u.current.contains(e.relatedTarget) || n && c("masked");
99
99
  },
100
100
  [n]
101
- ), re = l(
101
+ ), ie = l(
102
102
  (e) => {
103
- r || o === "masked" && n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), c("revealed"), d || setTimeout(() => C.current?.focus(), 0));
103
+ i || o === "masked" && n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), c("revealed"), d || setTimeout(() => C.current?.focus(), 0));
104
104
  },
105
- [o, n, r, d]
106
- ), ie = l(
105
+ [o, n, i, d]
106
+ ), re = l(
107
107
  (e) => {
108
108
  o === "revealed" && e.key === "Escape" && (c("masked"), setTimeout(() => u.current?.focus(), 0));
109
109
  },
110
110
  [o]
111
- ), s = o === "masked" && n, _ = !r && (o === "revealed" || o === "empty" && n), se = t === "xs" || t === "sm" ? "size-3" : "size-4", D = p(
111
+ ), s = o === "masked" && n, _ = !i && (o === "revealed" || o === "empty" && n), se = t === "xs" || t === "sm" ? "size-3" : "size-4", D = p(
112
112
  ve({ size: t, variant: $, parentFocusIndicator: !0 }),
113
113
  "group/container relative flex w-full items-center",
114
- s && !r && "cursor-pointer",
115
- r && "cursor-not-allowed",
114
+ s && !i && "cursor-pointer",
115
+ i && "cursor-not-allowed",
116
116
  L
117
117
  ), P = /* @__PURE__ */ b(ce, { children: [
118
- /* @__PURE__ */ i(
118
+ /* @__PURE__ */ r(
119
119
  he,
120
120
  {
121
121
  ref: z,
@@ -124,13 +124,13 @@ const Te = me, M = {
124
124
  value: m,
125
125
  onChange: oe,
126
126
  onBlur: ae,
127
- onKeyDown: ie,
128
- disabled: r,
127
+ onKeyDown: re,
128
+ disabled: i,
129
129
  readOnly: d || s,
130
130
  autoComplete: H,
131
131
  tabIndex: s ? -1 : 0,
132
132
  className: p(
133
- "w-full border-0 bg-transparent p-0 text-kumo-default ring-0 outline-none placeholder:text-kumo-subtle disabled:cursor-not-allowed disabled:text-kumo-subtle",
133
+ "w-full border-0 bg-transparent p-0 text-kumo-default ring-0 kumo-input-placeholder disabled:cursor-not-allowed disabled:text-kumo-subtle",
134
134
  t === "xs" && "pr-5",
135
135
  t === "sm" && "pr-6",
136
136
  t === "base" && "pr-8",
@@ -141,7 +141,7 @@ const Te = me, M = {
141
141
  ...q
142
142
  }
143
143
  ),
144
- /* @__PURE__ */ i(
144
+ /* @__PURE__ */ r(
145
145
  "span",
146
146
  {
147
147
  className: p(
@@ -167,20 +167,20 @@ const Te = me, M = {
167
167
  ),
168
168
  "aria-hidden": "true",
169
169
  children: /* @__PURE__ */ b("span", { className: "relative", children: [
170
- /* @__PURE__ */ i(
170
+ /* @__PURE__ */ r(
171
171
  "span",
172
172
  {
173
173
  className: p(
174
- s && !r && "group-focus-within/container:invisible group-hover/mask:invisible"
174
+ s && !i && "group-focus-within/container:invisible group-hover/mask:invisible"
175
175
  ),
176
176
  children: "••••••••"
177
177
  }
178
178
  ),
179
- s && !r && /* @__PURE__ */ i("span", { className: "invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible", children: "Click to reveal" })
179
+ s && !i && /* @__PURE__ */ r("span", { className: "invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible", children: "Click to reveal" })
180
180
  ] })
181
181
  }
182
182
  ),
183
- /* @__PURE__ */ i(
183
+ /* @__PURE__ */ r(
184
184
  "button",
185
185
  {
186
186
  type: "button",
@@ -189,7 +189,7 @@ const Te = me, M = {
189
189
  "aria-label": o === "revealed" ? "Hide value" : "Reveal value",
190
190
  tabIndex: _ ? 0 : -1,
191
191
  className: p(
192
- "absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle outline-none hover:text-kumo-default focus:text-kumo-default",
192
+ "absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle hover:text-kumo-default focus:text-kumo-default focus-visible:ring-1 focus-visible:ring-kumo-ring focus-visible:rounded-sm",
193
193
  // Match right padding from inputVariants
194
194
  t === "xs" && "right-1.5",
195
195
  t === "sm" && "right-2",
@@ -198,10 +198,10 @@ const Te = me, M = {
198
198
  se,
199
199
  !_ && "pointer-events-none opacity-0"
200
200
  ),
201
- children: o === "revealed" ? /* @__PURE__ */ i(ue, { className: "size-full" }) : /* @__PURE__ */ i(pe, { className: "size-full" })
201
+ children: o === "revealed" ? /* @__PURE__ */ r(ue, { className: "size-full" }) : /* @__PURE__ */ r(pe, { className: "size-full" })
202
202
  }
203
203
  ),
204
- n && !r && /* @__PURE__ */ i(
204
+ n && !i && /* @__PURE__ */ r(
205
205
  "button",
206
206
  {
207
207
  type: "button",
@@ -215,28 +215,28 @@ const Te = me, M = {
215
215
  }
216
216
  )
217
217
  ] }), U = /* @__PURE__ */ b("div", { children: [
218
- s ? /* @__PURE__ */ i(
218
+ s ? /* @__PURE__ */ r(
219
219
  "div",
220
220
  {
221
221
  ref: u,
222
222
  role: "button",
223
- tabIndex: r ? -1 : 0,
223
+ tabIndex: i ? -1 : 0,
224
224
  className: D,
225
225
  onClick: te,
226
- onKeyDown: re,
226
+ onKeyDown: ie,
227
227
  "aria-label": `${G}, masked.`,
228
228
  "aria-describedby": `${K} ${V}`,
229
- "aria-disabled": r,
229
+ "aria-disabled": i,
230
230
  children: P
231
231
  }
232
- ) : /* @__PURE__ */ i("div", { ref: u, className: D, children: P }),
233
- s && /* @__PURE__ */ i("span", { id: K, className: "sr-only", children: "Click or press Enter to reveal." }),
232
+ ) : /* @__PURE__ */ r("div", { ref: u, className: D, children: P }),
233
+ s && /* @__PURE__ */ r("span", { id: K, className: "sr-only", children: "Click or press Enter to reveal." }),
234
234
  /* @__PURE__ */ b("span", { id: V, className: "sr-only", "aria-live": "polite", children: [
235
235
  o === "masked" && n && "Value hidden",
236
236
  v && "Copied to clipboard"
237
237
  ] })
238
238
  ] });
239
- return h ? /* @__PURE__ */ i(
239
+ return h ? /* @__PURE__ */ r(
240
240
  ge,
241
241
  {
242
242
  label: h,
@@ -255,4 +255,4 @@ export {
255
255
  ye as S,
256
256
  M as a
257
257
  };
258
- //# sourceMappingURL=sensitive-input-i7ey1w0ky7nco012.js.map
258
+ //# sourceMappingURL=sensitive-input-drdu6upod3ucl6vt.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sensitive-input-drdu6upod3ucl6vt.js","sources":["../../src/components/sensitive-input/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport {\n inputVariants,\n KUMO_INPUT_VARIANTS,\n type KumoInputSize,\n type KumoInputVariant,\n} from \"../input/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_SENSITIVE_INPUT_VARIANTS = KUMO_INPUT_VARIANTS;\n\nexport const KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\ntype Mode = \"masked\" | \"revealed\" | \"empty\";\n\n/**\n * SensitiveInput component props.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * <SensitiveInput label=\"Secret\" value={secret} onValueChange={setSecret} />\n * ```\n */\nexport interface SensitiveInputProps\n extends Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"size\" | \"type\" | \"value\" | \"defaultValue\"\n > {\n /** Controlled value */\n value?: string;\n /** Uncontrolled default value */\n defaultValue?: string;\n /** Simplified change handler receiving just the value */\n onValueChange?: (value: string) => void;\n /** Callback fired after value is copied to clipboard */\n onCopy?: () => void;\n /**\n * Size of the input.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default input size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Style variant of the input.\n * - `\"default\"` — Default input appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoInputVariant;\n /** Label content for the input (enables Field wrapper and sets masked state label) - 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 /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Password/secret input that masks its value by default and reveals on click.\n * Includes a built-in copy-to-clipboard button on hover.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * ```\n */\nexport const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(\n (\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onValueChange,\n onCopy,\n size = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.size,\n variant = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant,\n disabled = false,\n readOnly = false,\n id,\n autoComplete = \"off\",\n className,\n label,\n labelTooltip,\n description,\n error,\n required,\n ...inputProps\n },\n ref,\n ) => {\n // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n const ariaLabelFallback =\n typeof label === \"string\" ? label : \"Sensitive value\";\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState(defaultValue);\n const value = isControlled ? controlledValue : internalValue;\n const hasValue = value.length > 0;\n\n const [mode, setMode] = useState<Mode>(() =>\n hasValue ? \"masked\" : \"empty\",\n );\n\n const [copied, setCopied] = useState(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const liveRegionId = useId();\n const generatedId = useId();\n const inputId = id ?? generatedId;\n const maskedInstructionId = useId();\n\n const mergedRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n },\n [ref],\n );\n\n // Reset copied state after 2 seconds\n useEffect(() => {\n if (copied) {\n const timeoutId = setTimeout(() => setCopied(false), 2000);\n return () => clearTimeout(timeoutId);\n }\n }, [copied]);\n\n const copyToClipboard = useCallback(\n async (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(value);\n setCopied(true);\n onCopy?.();\n return;\n }\n } catch {\n // Fall through to manual fallback\n }\n\n if (typeof document !== \"undefined\") {\n const textarea = document.createElement(\"textarea\");\n textarea.value = value;\n textarea.setAttribute(\"readonly\", \"\");\n textarea.style.position = \"absolute\";\n textarea.style.left = \"-9999px\";\n document.body.appendChild(textarea);\n const selection = document.getSelection();\n const previousRange = selection?.rangeCount\n ? selection.getRangeAt(0)\n : null;\n textarea.select();\n try {\n document.execCommand(\"copy\");\n setCopied(true);\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n },\n [value, onCopy],\n );\n\n // Sync mode when value changes externally\n const prevHasValueRef = useRef(hasValue);\n if (prevHasValueRef.current !== hasValue) {\n prevHasValueRef.current = hasValue;\n if (!hasValue && mode === \"masked\") {\n setMode(\"empty\");\n }\n }\n\n const handleContainerClick = useCallback(\n (e: React.MouseEvent) => {\n if (disabled) return;\n // Ignore clicks that originated from outside (e.g., label click focusing input)\n // Label clicks trigger a click on the input, but the click coordinates are outside the container\n if (containerRef.current) {\n const rect = containerRef.current.getBoundingClientRect();\n const isClickInsideContainer =\n e.clientX >= rect.left &&\n e.clientX <= rect.right &&\n e.clientY >= rect.top &&\n e.clientY <= rect.bottom;\n if (!isClickInsideContainer) return;\n }\n if (mode === \"masked\" && hasValue) {\n setMode(\"revealed\");\n if (!readOnly) {\n setTimeout(() => inputRef.current?.focus(), 0);\n }\n }\n },\n [mode, hasValue, disabled, readOnly],\n );\n\n const handleToggleVisibility = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n if (mode === \"revealed\") {\n setMode(\"masked\");\n } else if (mode === \"empty\" && hasValue) {\n setMode(\"revealed\");\n }\n },\n [mode, hasValue],\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!isControlled) {\n setInternalValue(newValue);\n }\n onChange?.(e);\n onValueChange?.(newValue);\n },\n [isControlled, onChange, onValueChange],\n );\n\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n // Don't mask if focus is moving to a button inside the container (copy/eye buttons)\n if (\n containerRef.current &&\n e.relatedTarget instanceof Node &&\n containerRef.current.contains(e.relatedTarget)\n ) {\n return;\n }\n if (hasValue) {\n setMode(\"masked\");\n }\n },\n [hasValue],\n );\n\n const handleContainerKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return;\n if (mode === \"masked\" && hasValue) {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n setMode(\"revealed\");\n if (!readOnly) {\n setTimeout(() => inputRef.current?.focus(), 0);\n }\n }\n }\n },\n [mode, hasValue, disabled, readOnly],\n );\n\n const handleInputKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (mode === \"revealed\" && e.key === \"Escape\") {\n setMode(\"masked\");\n // Move focus to container to avoid focus trap (input becomes tabIndex={-1})\n setTimeout(() => containerRef.current?.focus(), 0);\n }\n },\n [mode],\n );\n\n const isMaskedWithValue = mode === \"masked\" && hasValue;\n const showEyeButton =\n !disabled && (mode === \"revealed\" || (mode === \"empty\" && hasValue));\n\n // Icon sizes matching input sizes\n const iconSize = size === \"xs\" || size === \"sm\" ? \"size-3\" : \"size-4\";\n\n const containerClassName = cn(\n inputVariants({ size, variant, parentFocusIndicator: true }),\n \"group/container relative flex w-full items-center\",\n isMaskedWithValue && !disabled && \"cursor-pointer\",\n disabled && \"cursor-not-allowed\",\n className,\n );\n\n const containerContent = (\n <>\n {/* Input - defines the width, always rendered */}\n <BaseInput\n ref={mergedRef}\n id={inputId}\n type={mode === \"revealed\" ? \"text\" : \"password\"}\n value={value}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleInputKeyDown}\n disabled={disabled}\n readOnly={readOnly || isMaskedWithValue}\n autoComplete={autoComplete}\n tabIndex={isMaskedWithValue ? -1 : 0}\n className={cn(\n \"w-full border-0 bg-transparent p-0 text-kumo-default ring-0 kumo-input-placeholder disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n size === \"xs\" && \"pr-5\",\n size === \"sm\" && \"pr-6\",\n size === \"base\" && \"pr-8\",\n size === \"lg\" && \"pr-10\",\n isMaskedWithValue && \"pointer-events-none text-transparent\",\n )}\n aria-hidden={isMaskedWithValue}\n {...inputProps}\n />\n\n {/* Mask overlay - absolutely positioned, doesn't affect layout */}\n <span\n className={cn(\n \"pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none\",\n // Match input pr padding (space for icon)\n size === \"xs\" && \"right-5\",\n size === \"sm\" && \"right-6\",\n size === \"base\" && \"right-8\",\n size === \"lg\" && \"right-10\",\n // Match the padding from inputVariants\n size === \"xs\" && \"px-1.5\",\n size === \"sm\" && \"px-2\",\n size === \"base\" && \"px-3\",\n size === \"lg\" && \"px-4\",\n // Hidden when not masked\n !isMaskedWithValue && \"invisible\",\n // When masked: enable pointer events\n isMaskedWithValue && \"pointer-events-auto\",\n // Text color - use text-kumo-default to contrast with bg-kumo-control input background\n \"text-kumo-default\",\n // Hover state - pure CSS, no React state (group for children)\n \"group/mask\",\n )}\n aria-hidden=\"true\"\n >\n {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}\n <span className=\"relative\">\n <span\n className={cn(\n isMaskedWithValue &&\n !disabled &&\n \"group-focus-within/container:invisible group-hover/mask:invisible\",\n )}\n >\n ••••••••\n </span>\n {isMaskedWithValue && !disabled && (\n <span className=\"invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible\">\n Click to reveal\n </span>\n )}\n </span>\n </span>\n\n {/* Eye button - absolutely positioned to the right */}\n <button\n type=\"button\"\n onClick={handleToggleVisibility}\n onKeyDown={(e) => e.stopPropagation()}\n aria-label={mode === \"revealed\" ? \"Hide value\" : \"Reveal value\"}\n tabIndex={showEyeButton ? 0 : -1}\n className={cn(\n \"absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle hover:text-kumo-default focus:text-kumo-default focus-visible:ring-1 focus-visible:ring-kumo-ring focus-visible:rounded-sm\",\n // Match right padding from inputVariants\n size === \"xs\" && \"right-1.5\",\n size === \"sm\" && \"right-2\",\n size === \"base\" && \"right-3\",\n size === \"lg\" && \"right-4\",\n iconSize,\n !showEyeButton && \"pointer-events-none opacity-0\",\n )}\n >\n {mode === \"revealed\" ? (\n <EyeSlash className=\"size-full\" />\n ) : (\n <Eye className=\"size-full\" />\n )}\n </button>\n\n {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}\n {hasValue && !disabled && (\n <button\n type=\"button\"\n onClick={copyToClipboard}\n onKeyDown={(e) => e.stopPropagation()}\n aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n className={cn(\n \"absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-kumo-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-kumo-ring\",\n )}\n >\n {copied ? \"Copied\" : \"Copy\"}\n </button>\n )}\n </>\n );\n\n const input = (\n <div>\n {isMaskedWithValue ? (\n <div\n ref={containerRef}\n // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).\n // Using role=\"button\" with proper keyboard handling instead.\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n className={containerClassName}\n onClick={handleContainerClick}\n onKeyDown={handleContainerKeyDown}\n aria-label={`${ariaLabelFallback}, masked.`}\n aria-describedby={`${maskedInstructionId} ${liveRegionId}`}\n aria-disabled={disabled}\n >\n {containerContent}\n </div>\n ) : (\n <div ref={containerRef} className={containerClassName}>\n {containerContent}\n </div>\n )}\n {isMaskedWithValue && (\n <span id={maskedInstructionId} className=\"sr-only\">\n Click or press Enter to reveal.\n </span>\n )}\n <span id={liveRegionId} className=\"sr-only\" aria-live=\"polite\">\n {mode === \"masked\" && hasValue && \"Value hidden\"}\n {copied && \"Copied to clipboard\"}\n </span>\n </div>\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n },\n);\n\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"names":["KUMO_SENSITIVE_INPUT_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS","SensitiveInput","forwardRef","controlledValue","defaultValue","onChange","onValueChange","onCopy","size","variant","disabled","readOnly","id","autoComplete","className","label","labelTooltip","description","error","required","inputProps","ref","ariaLabelFallback","isControlled","internalValue","setInternalValue","useState","value","hasValue","mode","setMode","copied","setCopied","inputRef","useRef","containerRef","liveRegionId","useId","generatedId","inputId","maskedInstructionId","mergedRef","useCallback","node","useEffect","timeoutId","copyToClipboard","textarea","selection","previousRange","prevHasValueRef","handleContainerClick","rect","handleToggleVisibility","handleChange","newValue","handleBlur","handleContainerKeyDown","handleInputKeyDown","isMaskedWithValue","showEyeButton","iconSize","containerClassName","cn","inputVariants","containerContent","jsxs","Fragment","jsx","BaseInput","EyeSlash","Eye","input","Field"],"mappings":"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"}
@@ -0,0 +1,241 @@
1
+ "use client";
2
+ import { jsx as e, jsxs as I } from "react/jsx-runtime";
3
+ import { forwardRef as P, createContext as K, useContext as M } from "react";
4
+ import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
5
+ import { F as O } from "./field-pcsc33yrvgq6g9ll.js";
6
+ import { P as H, Q as V, b3 as z } from "./vendor-base-ui-lgoligkf81eyvnde.js";
7
+ const $ = {
8
+ size: {
9
+ sm: {
10
+ classes: "h-5.5 w-8.5",
11
+ description: "Small switch for compact UIs"
12
+ },
13
+ base: {
14
+ classes: "h-6.5 w-10.5",
15
+ description: "Default switch size"
16
+ },
17
+ lg: {
18
+ classes: "h-7.5 w-12.5",
19
+ description: "Large switch for prominent toggles"
20
+ }
21
+ },
22
+ variant: {
23
+ default: {
24
+ classes: "",
25
+ description: "Default switch with squircle shape and brand blue color"
26
+ },
27
+ neutral: {
28
+ classes: "",
29
+ description: "Monochrome switch with squircle shape for subtle toggles"
30
+ }
31
+ }
32
+ }, ee = {
33
+ size: "base",
34
+ variant: "default"
35
+ }, A = K({
36
+ controlFirst: !0
37
+ }), T = P(
38
+ ({
39
+ className: l,
40
+ checked: c,
41
+ disabled: s,
42
+ size: n = "base",
43
+ variant: u = "default",
44
+ label: t,
45
+ labelTooltip: d,
46
+ required: f,
47
+ controlFirst: w = !0,
48
+ onCheckedChange: x,
49
+ transitioning: N,
50
+ ...r
51
+ }, v) => {
52
+ const S = typeof t == "string" ? t : "Switch", b = /* @__PURE__ */ e(
53
+ z,
54
+ {
55
+ ref: v,
56
+ checked: c,
57
+ disabled: s,
58
+ onCheckedChange: x,
59
+ nativeButton: !0,
60
+ render: (_, a) => {
61
+ const {
62
+ ref: y,
63
+ className: m,
64
+ role: g,
65
+ "aria-checked": L,
66
+ "aria-pressed": h,
67
+ ...C
68
+ } = _, k = u === "neutral", p = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", o = {
69
+ sm: { track: "h-4 w-8", thumb: "w-4", slide: "left-4" },
70
+ base: { track: "h-4.5 w-9", thumb: "w-4.5", slide: "left-4.5" },
71
+ lg: { track: "h-5 w-10", thumb: "w-5", slide: "left-5" }
72
+ }[n], R = k ? a.checked ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-kumo-base ring-kumo-line" : a.checked ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", U = k ? a.checked ? "ring-neutral-600 dark:ring-neutral-200 bg-kumo-base dark:bg-neutral-400" : "bg-kumo-base dark:bg-neutral-850 ring-neutral-300 dark:ring-neutral-700" : a.checked ? "ring-blue-600 dark:ring-blue-100 bg-kumo-base dark:bg-blue-300" : "bg-kumo-base dark:bg-neutral-850 ring-neutral-300 dark:ring-neutral-700", B = i(
73
+ "relative inline-flex items-center ring cursor-pointer border-none p-0",
74
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
75
+ "transition-colors duration-150 ease-out motion-reduce:transition-none",
76
+ "disabled:cursor-not-allowed disabled:opacity-50",
77
+ o.track,
78
+ p,
79
+ R,
80
+ l,
81
+ m
82
+ ), D = i(
83
+ "absolute top-0 bottom-0 shadow-sm ring-1",
84
+ o.thumb,
85
+ p,
86
+ U,
87
+ "transition-all duration-150 ease-out motion-reduce:transition-none",
88
+ a.checked ? o.slide : "left-0"
89
+ ), F = r.role ?? g ?? "switch", G = F === "switch" ? { "aria-checked": a.checked } : { "aria-pressed": a.checked };
90
+ return /* @__PURE__ */ e(
91
+ "button",
92
+ {
93
+ ...C,
94
+ ...r,
95
+ ref: y,
96
+ type: "button",
97
+ role: F,
98
+ ...G,
99
+ "aria-busy": N || void 0,
100
+ "aria-label": r["aria-label"] ?? S,
101
+ className: B,
102
+ children: /* @__PURE__ */ e("div", { className: D })
103
+ }
104
+ );
105
+ }
106
+ }
107
+ );
108
+ return t ? /* @__PURE__ */ e(
109
+ O,
110
+ {
111
+ label: t,
112
+ required: f,
113
+ labelTooltip: d,
114
+ controlFirst: w,
115
+ children: b
116
+ }
117
+ ) : b;
118
+ }
119
+ );
120
+ T.displayName = "Switch";
121
+ const j = P(
122
+ ({
123
+ className: l,
124
+ checked: c,
125
+ disabled: s,
126
+ size: n = "base",
127
+ variant: u = "default",
128
+ label: t,
129
+ onCheckedChange: d,
130
+ transitioning: f
131
+ }, w) => {
132
+ const { controlFirst: x } = M(A);
133
+ return /* @__PURE__ */ I(
134
+ "label",
135
+ {
136
+ className: i(
137
+ "m-0 relative inline-flex items-center gap-2",
138
+ // Control first (default): switch before label
139
+ // Label first: label before switch using flex-row-reverse
140
+ !x && "flex-row-reverse justify-end",
141
+ s ? "cursor-not-allowed opacity-50" : "cursor-pointer",
142
+ l
143
+ ),
144
+ children: [
145
+ /* @__PURE__ */ e(
146
+ z,
147
+ {
148
+ ref: w,
149
+ checked: c,
150
+ disabled: s,
151
+ onCheckedChange: d,
152
+ nativeButton: !0,
153
+ render: (N, r) => {
154
+ const {
155
+ ref: v,
156
+ className: S,
157
+ role: b,
158
+ "aria-checked": _,
159
+ "aria-pressed": a,
160
+ ...y
161
+ } = N, m = u === "neutral", g = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", h = {
162
+ sm: { track: "h-4 w-8", thumb: "w-4", slide: "left-4" },
163
+ base: { track: "h-4.5 w-9", thumb: "w-4.5", slide: "left-4.5" },
164
+ lg: { track: "h-5 w-10", thumb: "w-5", slide: "left-5" }
165
+ }[n], C = m ? r.checked ? "bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-kumo-base ring-kumo-line" : r.checked ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", k = m ? r.checked ? "ring-neutral-600 dark:ring-neutral-200 bg-kumo-base dark:bg-neutral-400" : "bg-kumo-base dark:bg-neutral-850 ring-neutral-300 dark:ring-neutral-700" : r.checked ? "ring-blue-600 dark:ring-blue-100 bg-kumo-base dark:bg-blue-300" : "bg-kumo-base dark:bg-neutral-850 ring-neutral-300 dark:ring-neutral-700", p = i(
166
+ "relative inline-flex items-center ring cursor-pointer border-none p-0",
167
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
168
+ "transition-colors duration-150 ease-out motion-reduce:transition-none",
169
+ "disabled:cursor-not-allowed disabled:opacity-50",
170
+ h.track,
171
+ g,
172
+ C,
173
+ S
174
+ ), q = i(
175
+ "absolute top-0 bottom-0 shadow-sm ring-1",
176
+ h.thumb,
177
+ g,
178
+ k,
179
+ "transition-all duration-150 ease-out motion-reduce:transition-none",
180
+ r.checked ? h.slide : "left-0"
181
+ ), o = b ?? "switch", R = o === "switch" ? { "aria-checked": r.checked } : { "aria-pressed": r.checked };
182
+ return /* @__PURE__ */ e(
183
+ "button",
184
+ {
185
+ ...y,
186
+ ref: v,
187
+ type: "button",
188
+ role: o,
189
+ ...R,
190
+ "aria-busy": f || void 0,
191
+ className: p,
192
+ children: /* @__PURE__ */ e("div", { className: q })
193
+ }
194
+ );
195
+ }
196
+ }
197
+ ),
198
+ /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: t })
199
+ ]
200
+ }
201
+ );
202
+ }
203
+ );
204
+ j.displayName = "Switch.Item";
205
+ function W({
206
+ legend: l,
207
+ children: c,
208
+ error: s,
209
+ description: n,
210
+ disabled: u,
211
+ controlFirst: t = !0,
212
+ className: d
213
+ }) {
214
+ return /* @__PURE__ */ e(A.Provider, { value: { controlFirst: t }, children: /* @__PURE__ */ I(
215
+ H,
216
+ {
217
+ className: i(
218
+ "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
219
+ d
220
+ ),
221
+ disabled: u,
222
+ children: [
223
+ /* @__PURE__ */ e(V, { className: "text-lg font-medium text-kumo-default", children: l }),
224
+ /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: c }),
225
+ s && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: s }),
226
+ n && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: n })
227
+ ]
228
+ }
229
+ ) });
230
+ }
231
+ const E = Object.assign(T, {
232
+ Item: j,
233
+ Group: W
234
+ });
235
+ E.displayName = "Switch";
236
+ export {
237
+ $ as K,
238
+ E as S,
239
+ ee as a
240
+ };
241
+ //# sourceMappingURL=switch-n7zyzirax1l016n2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"switch-n7zyzirax1l016n2.js","sources":["../../src/components/switch/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport {\n forwardRef,\n type ButtonHTMLAttributes,\n type Ref,\n type ReactNode,\n createContext,\n useContext,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Field } from \"../field/field\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\n\n/** Switch size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_SWITCH_VARIANTS = {\n size: {\n sm: {\n classes: \"h-5.5 w-8.5\",\n description: \"Small switch for compact UIs\",\n },\n base: {\n classes: \"h-6.5 w-10.5\",\n description: \"Default switch size\",\n },\n lg: {\n classes: \"h-7.5 w-12.5\",\n description: \"Large switch for prominent toggles\",\n },\n },\n variant: {\n default: {\n classes: \"\",\n description: \"Default switch with squircle shape and brand blue color\",\n },\n neutral: {\n classes: \"\",\n description: \"Monochrome switch with squircle shape for subtle toggles\",\n },\n },\n} as const;\n\nexport const KUMO_SWITCH_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_SWITCH_VARIANTS\nexport type KumoSwitchSize = keyof typeof KUMO_SWITCH_VARIANTS.size;\nexport type KumoSwitchVariant = keyof typeof KUMO_SWITCH_VARIANTS.variant;\n\nexport interface KumoSwitchVariantsProps {\n /**\n * Switch size.\n * - `\"sm\"` — Small for compact UIs\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for prominent toggles\n * @default \"base\"\n */\n size?: KumoSwitchSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard switch appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoSwitchVariant;\n}\n\nexport function switchVariants({\n size = KUMO_SWITCH_DEFAULT_VARIANTS.size,\n variant = KUMO_SWITCH_DEFAULT_VARIANTS.variant,\n}: KumoSwitchVariantsProps = {}) {\n // Fallback to defaults if invalid size/variant passed\n const sizeConfig =\n KUMO_SWITCH_VARIANTS.size[size] ?? KUMO_SWITCH_VARIANTS.size.base;\n const variantConfig =\n KUMO_SWITCH_VARIANTS.variant[variant] ??\n KUMO_SWITCH_VARIANTS.variant.default;\n return cn(sizeConfig.classes, variantConfig.classes);\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = KumoSwitchSize;\nexport type SwitchVariant = KumoSwitchVariant;\n\n// Context for passing controlFirst from Group to Items\nconst SwitchGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single switch component props (with built-in Field)\n *\n * Usage patterns:\n *\n * Basic usage:\n * ```tsx\n * <Switch label=\"Enable notifications\" checked={true} onCheckedChange={setChecked} />\n * ```\n *\n * Label first layout:\n * ```tsx\n * <Switch label=\"Dark mode\" checked={false} onCheckedChange={setChecked} controlFirst={false} />\n * ```\n *\n * Neutral variant (monochrome, squircle shape):\n * ```tsx\n * <Switch label=\"Setting\" variant=\"neutral\" checked={false} onCheckedChange={setChecked} />\n * ```\n *\n * @property {string} label - Label text for the switch (Field wrapper is built-in)\n * @property {boolean} [controlFirst] - When true (default), switch appears before label\n */\nexport type SwitchProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"children\"\n> & {\n /** Visual variant: \"default\" (pill, brand color) or \"neutral\" (squircle, monochrome) */\n variant?: SwitchVariant;\n /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /**\n * Whether the switch is required.\n * When explicitly false, shows \"(optional)\" text after the label.\n */\n required?: boolean;\n /** When true (default), switch appears before label. When false, label appears before switch. */\n controlFirst?: boolean;\n size?: KumoSwitchSize;\n checked?: boolean;\n disabled?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n transitioning?: boolean;\n};\n\n/**\n * Switch group component props (with built-in Fieldset)\n *\n * Usage:\n * ```tsx\n * <Switch.Group\n * legend=\"Notification settings\"\n * error=\"You must enable at least one notification type\"\n * >\n * <Switch.Item label=\"Email notifications\" value=\"email\" />\n * <Switch.Item label=\"SMS notifications\" value=\"sms\" />\n * </Switch.Group>\n * ```\n */\nexport interface SwitchGroupProps {\n /** Legend text for the group */\n legend: string;\n /** Child Switch.Item components */\n children: ReactNode;\n /** Error message for the group (only appears in groups, not single switches) */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Whether all switches in the group are disabled */\n disabled?: boolean;\n /** When true (default), switch appears before label. When false, label appears before switch. */\n controlFirst?: boolean;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual switch item within a group\n */\nexport type SwitchItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: SwitchVariant;\n /** Label text displayed next to switch */\n label: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n checked?: boolean;\n disabled?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n size?: KumoSwitchSize;\n transitioning?: boolean;\n};\n\n// Single switch with built-in Field\nconst SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(\n (\n {\n className,\n checked,\n disabled,\n size = \"base\",\n variant = \"default\",\n label,\n labelTooltip,\n required,\n controlFirst = true,\n onCheckedChange,\n transitioning,\n ...props\n },\n ref,\n ) => {\n // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n const ariaLabelFallback = typeof label === \"string\" ? label : \"Switch\";\n const switchControl = (\n <BaseSwitch.Root\n ref={ref}\n checked={checked}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n nativeButton\n render={(rootProps, state) => {\n const {\n ref: rootRef,\n className: baseClassName,\n role: baseRole,\n \"aria-checked\": _ariaChecked,\n \"aria-pressed\": _ariaPressed,\n ...restRootProps\n } = rootProps as typeof rootProps & {\n ref?: Ref<HTMLButtonElement>;\n className?: string;\n role?: string;\n \"aria-checked\"?: boolean;\n \"aria-pressed\"?: boolean;\n };\n\n const isNeutral = variant === \"neutral\";\n\n // Squircle-aware border-radius (used by both variants)\n const squircleRadius =\n \"rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]\";\n\n // Size styles matching Kyle's stratus implementation\n const sizeStyles = {\n sm: { track: \"h-4 w-8\", thumb: \"w-4\", slide: \"left-4\" },\n base: { track: \"h-4.5 w-9\", thumb: \"w-4.5\", slide: \"left-4.5\" },\n lg: { track: \"h-5 w-10\", thumb: \"w-5\", slide: \"left-5\" },\n };\n const s = sizeStyles[size];\n\n // Track colors based on variant\n const trackColors = isNeutral\n ? state.checked\n ? \"bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700\"\n : \"bg-neutral-150 dark:bg-kumo-base ring-kumo-line\"\n : state.checked\n ? \"bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500\"\n : \"bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600\";\n\n // Thumb colors based on variant\n const thumbColors = isNeutral\n ? state.checked\n ? \"ring-neutral-600 dark:ring-neutral-200 bg-kumo-base dark:bg-neutral-400\"\n : \"bg-kumo-base dark:bg-neutral-850 ring-neutral-300 dark:ring-neutral-700\"\n : state.checked\n ? \"ring-blue-600 dark:ring-blue-100 bg-kumo-base dark:bg-blue-300\"\n : \"bg-kumo-base dark:bg-neutral-850 ring-neutral-300 dark:ring-neutral-700\";\n\n const trackClassName = cn(\n \"relative inline-flex items-center ring cursor-pointer border-none p-0\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n \"transition-colors duration-150 ease-out motion-reduce:transition-none\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n s.track,\n squircleRadius,\n trackColors,\n className,\n baseClassName,\n );\n\n const thumbClassName = cn(\n \"absolute top-0 bottom-0 shadow-sm ring-1\",\n s.thumb,\n squircleRadius,\n thumbColors,\n \"transition-all duration-150 ease-out motion-reduce:transition-none\",\n state.checked ? s.slide : \"left-0\",\n );\n\n const role =\n (props.role as string | undefined) ?? baseRole ?? \"switch\";\n const checkedA11yProps =\n role === \"switch\"\n ? { \"aria-checked\": state.checked }\n : { \"aria-pressed\": state.checked };\n\n return (\n <button\n {...restRootProps}\n {...props}\n ref={rootRef}\n type=\"button\"\n role={role}\n {...checkedA11yProps}\n aria-busy={transitioning || undefined}\n aria-label={props[\"aria-label\"] ?? ariaLabelFallback}\n className={trackClassName}\n >\n <div className={thumbClassName} />\n </button>\n );\n }}\n />\n );\n\n // Wrap in Field (built-in) - no description for single switches\n // If no label provided, return bare switch (for use in other components)\n if (!label) {\n return switchControl;\n }\n\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n controlFirst={controlFirst}\n >\n {switchControl}\n </Field>\n );\n },\n);\n\nSwitchBase.displayName = \"Switch\";\n\n// Switch.Item for use within Switch.Group\nconst SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(\n (\n {\n className,\n checked,\n disabled,\n size = \"base\",\n variant = \"default\",\n label,\n onCheckedChange,\n transitioning,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(SwitchGroupContext);\n\n return (\n <label\n className={cn(\n \"m-0 relative inline-flex items-center gap-2\",\n // Control first (default): switch before label\n // Label first: label before switch 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 <BaseSwitch.Root\n ref={ref}\n checked={checked}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n nativeButton\n render={(rootProps, state) => {\n const {\n ref: rootRef,\n className: baseClassName,\n role: baseRole,\n \"aria-checked\": _ariaChecked,\n \"aria-pressed\": _ariaPressed,\n ...restRootProps\n } = rootProps as typeof rootProps & {\n ref?: Ref<HTMLButtonElement>;\n className?: string;\n role?: string;\n \"aria-checked\"?: boolean;\n \"aria-pressed\"?: boolean;\n };\n\n const isNeutral = variant === \"neutral\";\n\n // Squircle-aware border-radius (used by both variants)\n const squircleRadius =\n \"rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]\";\n\n // Size styles matching Kyle's stratus implementation\n const sizeStyles = {\n sm: { track: \"h-4 w-8\", thumb: \"w-4\", slide: \"left-4\" },\n base: { track: \"h-4.5 w-9\", thumb: \"w-4.5\", slide: \"left-4.5\" },\n lg: { track: \"h-5 w-10\", thumb: \"w-5\", slide: \"left-5\" },\n };\n const s = sizeStyles[size];\n\n // Track colors based on variant\n const trackColors = isNeutral\n ? state.checked\n ? \"bg-neutral-500 dark:bg-kumo-base ring-neutral-600 dark:ring-neutral-700\"\n : \"bg-neutral-150 dark:bg-kumo-base ring-kumo-line\"\n : state.checked\n ? \"bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500\"\n : \"bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600\";\n\n // Thumb colors based on variant\n const thumbColors = isNeutral\n ? state.checked\n ? \"ring-neutral-600 dark:ring-neutral-200 bg-kumo-base dark:bg-neutral-400\"\n : \"bg-kumo-base dark:bg-neutral-850 ring-neutral-300 dark:ring-neutral-700\"\n : state.checked\n ? \"ring-blue-600 dark:ring-blue-100 bg-kumo-base dark:bg-blue-300\"\n : \"bg-kumo-base dark:bg-neutral-850 ring-neutral-300 dark:ring-neutral-700\";\n\n const trackClassName = cn(\n \"relative inline-flex items-center ring cursor-pointer border-none p-0\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n \"transition-colors duration-150 ease-out motion-reduce:transition-none\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n s.track,\n squircleRadius,\n trackColors,\n baseClassName,\n );\n\n const thumbClassName = cn(\n \"absolute top-0 bottom-0 shadow-sm ring-1\",\n s.thumb,\n squircleRadius,\n thumbColors,\n \"transition-all duration-150 ease-out motion-reduce:transition-none\",\n state.checked ? s.slide : \"left-0\",\n );\n\n const role = baseRole ?? \"switch\";\n const checkedA11yProps =\n role === \"switch\"\n ? { \"aria-checked\": state.checked }\n : { \"aria-pressed\": state.checked };\n\n return (\n <button\n {...restRootProps}\n ref={rootRef}\n type=\"button\"\n role={role}\n {...checkedA11yProps}\n aria-busy={transitioning || undefined}\n className={trackClassName}\n >\n <div className={thumbClassName} />\n </button>\n );\n }}\n />\n <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nSwitchItem.displayName = \"Switch.Item\";\n\n// Switch.Group with built-in Fieldset\nfunction SwitchGroup({\n legend,\n children,\n error,\n description,\n disabled,\n controlFirst = true,\n className,\n}: SwitchGroupProps) {\n return (\n <SwitchGroupContext.Provider value={{ controlFirst }}>\n <Fieldset.Root\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n className,\n )}\n disabled={disabled}\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 </SwitchGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Switch = Object.assign(SwitchBase, {\n Item: SwitchItem,\n Group: SwitchGroup,\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["KUMO_SWITCH_VARIANTS","KUMO_SWITCH_DEFAULT_VARIANTS","SwitchGroupContext","createContext","SwitchBase","forwardRef","className","checked","disabled","size","variant","label","labelTooltip","required","controlFirst","onCheckedChange","transitioning","props","ref","ariaLabelFallback","switchControl","jsx","BaseSwitch.Root","rootProps","state","rootRef","baseClassName","baseRole","_ariaChecked","_ariaPressed","restRootProps","isNeutral","squircleRadius","s","trackColors","thumbColors","trackClassName","cn","thumbClassName","role","checkedA11yProps","Field","SwitchItem","useContext","jsxs","SwitchGroup","legend","children","error","description","Fieldset.Root","Fieldset.Legend","Switch"],"mappings":"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"}
@@ -2,7 +2,7 @@
2
2
  import { jsx as t } from "react/jsx-runtime";
3
3
  import { forwardRef as s } from "react";
4
4
  import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
5
- import { C as m } from "./checkbox-khvh0efmlzvlo6qi.js";
5
+ import { C as m } from "./checkbox-gebzflhsvo6zkcrm.js";
6
6
  const h = {
7
7
  layout: {
8
8
  auto: {
@@ -35,7 +35,7 @@ const h = {
35
35
  // Row border
36
36
  "[&_td]:p-3",
37
37
  // Cell padding
38
- "[&_th]:border-b [&_th]:border-kumo-fill [&_th]:p-3 [&_th]:font-semibold",
38
+ "[&_th]:border-b [&_th]:border-kumo-fill [&_th]:p-3 [&_th]:font-semibold [&_th]:text-base",
39
39
  // Header styles
40
40
  "[&_th]:bg-kumo-base",
41
41
  // Header background color
@@ -152,4 +152,4 @@ export {
152
152
  R as T,
153
153
  h as a
154
154
  };
155
- //# sourceMappingURL=table-d4ql7fjvok30xs1f.js.map
155
+ //# sourceMappingURL=table-l2yy3jtkbhvqlq43.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"table-l2yy3jtkbhvqlq43.js","sources":["../../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { Checkbox } from \"../checkbox\";\n\n/** Table layout and row variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_TABLE_VARIANTS = {\n layout: {\n auto: {\n classes: \"\",\n description: \"Auto table layout - columns resize based on content\",\n },\n fixed: {\n classes: \"table-fixed\",\n description:\n \"Fixed table layout - columns have equal width, controlled via colgroup\",\n },\n },\n variant: {\n default: {\n classes: \"\",\n description: \"Default row variant\",\n },\n selected: {\n classes: \"bg-kumo-tint\",\n description: \"Selected row variant\",\n },\n },\n} as const;\n\nexport const KUMO_TABLE_DEFAULT_VARIANTS = {\n layout: \"auto\",\n variant: \"default\",\n} as const;\n\nexport type KumoTableRowVariant = keyof typeof KUMO_TABLE_VARIANTS.variant;\nexport type KumoTableLayout = keyof typeof KUMO_TABLE_VARIANTS.layout;\n\n/**\n * Table root — applies layout, borders, padding, and header styles.\n *\n * @example\n * ```tsx\n * <Table layout=\"fixed\">\n * <Table.Header>\n * <Table.Row>\n * <Table.Head>Name</Table.Head>\n * <Table.Head>Status</Table.Head>\n * </Table.Row>\n * </Table.Header>\n * <Table.Body>\n * <Table.Row>\n * <Table.Cell>Worker A</Table.Cell>\n * <Table.Cell>Active</Table.Cell>\n * </Table.Row>\n * </Table.Body>\n * </Table>\n * ```\n */\nconst TableRoot = forwardRef<\n HTMLTableElement,\n React.HTMLAttributes<HTMLTableElement> & {\n /**\n * Table layout algorithm.\n * - `\"auto\"` — columns resize based on content\n * - `\"fixed\"` — equal-width columns, controlled via `<colgroup>`\n * @default \"auto\"\n */\n layout?: KumoTableLayout;\n }\n>(({ layout = \"auto\", ...props }, ref) => {\n const className = cn(\n \"w-full\",\n KUMO_TABLE_VARIANTS.layout[layout].classes,\n \"[&_td]:border-b [&_td]:border-kumo-fill [&_tr:last-child_td]:border-b-0\", // Row border\n \"[&_td]:p-3\", // Cell padding\n \"[&_th]:border-b [&_th]:border-kumo-fill [&_th]:p-3 [&_th]:font-semibold [&_th]:text-base\", // Header styles\n \"[&_th]:bg-kumo-base\", // Header background color\n \"text-left text-kumo-default\",\n props.className,\n );\n\n return <table ref={ref} {...props} className={className} />;\n});\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement> & {\n variant?: \"default\" | \"compact\";\n }\n>(({ variant = \"default\", ...props }, ref) => {\n const className = cn(\n variant === \"compact\" &&\n \"[&_th]:bg-kumo-elevated [&_th]:py-2 text-xs text-kumo-strong\",\n props.className,\n );\n\n return <thead ref={ref} {...props} className={className} />;\n});\n\nconst TableHead = forwardRef<\n HTMLTableCellElement,\n React.HTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n const className = cn(\"group relative\", props.className);\n return <th ref={ref} {...props} className={className} />;\n});\n\nconst TableRow = forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes<HTMLTableRowElement> & {\n variant?: KumoTableRowVariant;\n }\n>(({ variant = KUMO_TABLE_DEFAULT_VARIANTS.variant, ...props }, ref) => {\n const className = cn(\n KUMO_TABLE_VARIANTS.variant[variant].classes,\n props.className,\n );\n\n return <tr ref={ref} {...props} className={className} />;\n});\n\nconst TableBody = forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n return <tbody ref={ref} {...props} />;\n});\n\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n return <td ref={ref} {...props} />;\n});\n\nconst TableFooter = forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n return <tfoot ref={ref} {...props} />;\n});\n\nconst TableResizeHandle = forwardRef<\n HTMLButtonElement,\n React.HTMLAttributes<HTMLButtonElement>\n>((props, ref) => {\n return (\n <button\n ref={ref}\n {...props}\n type=\"button\"\n aria-label=\"Resize column\"\n className={cn(\n \"invisible h-full group-hover:visible\", // Make the handle invisible by default\n \"w-[10px]\", // Hitting area\n \"flex items-center justify-center\", // Center the handle\n \"cursor-col-resize touch-none select-none\", // Prevent selection and touch events\n \"absolute top-0 right-0\", // Position the handle\n \"m-0 bg-kumo-base p-0\", // Override the stratus button styles\n )}\n >\n <span className=\"h-5 w-[2px] rounded bg-kumo-ring\" />\n </button>\n );\n});\n\n/**\n * Special cell that makes the entire cell area a hit target for the checkbox.\n */\n\nconst TableCheckCell = forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes<HTMLTableCellElement> & {\n checked?: boolean;\n indeterminate?: boolean;\n onValueChange?: (checked: boolean) => void;\n label?: string;\n disabled?: boolean;\n }\n>(\n (\n { checked, indeterminate, onValueChange, label, disabled, ...props },\n ref,\n ) => {\n return (\n <TableCell\n ref={ref}\n {...props}\n className={cn(\"w-10 leading-none\", props.className)}\n >\n <Checkbox\n checked={checked}\n indeterminate={indeterminate}\n onCheckedChange={(newChecked) => {\n onValueChange?.(newChecked);\n }}\n aria-label={label ?? \"Select row\"}\n disabled={disabled}\n className=\"relative before:absolute before:-inset-3 before:content-['']\"\n />\n </TableCell>\n );\n },\n);\n\nconst TableCheckHead = forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes<HTMLTableCellElement> & {\n checked?: boolean;\n indeterminate?: boolean;\n onValueChange?: (checked: boolean) => void;\n label?: string;\n disabled?: boolean;\n }\n>(\n (\n { checked, indeterminate, onValueChange, label, disabled, ...props },\n ref,\n ) => {\n return (\n <TableHead\n ref={ref}\n {...props}\n className={cn(\"w-10 leading-none\", props.className)}\n >\n <Checkbox\n checked={checked}\n indeterminate={indeterminate}\n onCheckedChange={(newChecked) => {\n onValueChange?.(newChecked);\n }}\n aria-label={label ?? \"Select all rows\"}\n disabled={disabled}\n className=\"relative before:absolute before:-inset-3 before:content-['']\"\n />\n </TableHead>\n );\n },\n);\n\nTableRoot.displayName = \"Table\";\nTableBody.displayName = \"Table.Body\";\nTableHead.displayName = \"Table.Head\";\nTableRow.displayName = \"Table.Row\";\nTableCell.displayName = \"Table.Cell\";\nTableFooter.displayName = \"Table.Footer\";\nTableHeader.displayName = \"Table.Header\";\nTableResizeHandle.displayName = \"Table.ResizeHandle\";\nTableCheckCell.displayName = \"Table.CheckCell\";\nTableCheckHead.displayName = \"Table.CheckHead\";\n\n/**\n * Table — semantic HTML table with styled rows, cells, and selection support.\n *\n * Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`,\n * `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.\n *\n * @example\n * ```tsx\n * <Table>\n * <Table.Header>\n * <Table.Row>\n * <Table.CheckHead checked={allSelected} onValueChange={toggleAll} />\n * <Table.Head>Name</Table.Head>\n * </Table.Row>\n * </Table.Header>\n * <Table.Body>\n * {rows.map((row) => (\n * <Table.Row key={row.id} variant={selected.has(row.id) ? \"selected\" : \"default\"}>\n * <Table.CheckCell checked={selected.has(row.id)} onValueChange={() => toggle(row.id)} />\n * <Table.Cell>{row.name}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * </Table>\n * ```\n */\nexport const Table = Object.assign(TableRoot, {\n Header: TableHeader,\n Head: TableHead,\n Row: TableRow,\n Body: TableBody,\n Cell: TableCell,\n CheckCell: TableCheckCell,\n CheckHead: TableCheckHead,\n Footer: TableFooter,\n ResizeHandle: TableResizeHandle,\n});\n"],"names":["KUMO_TABLE_VARIANTS","KUMO_TABLE_DEFAULT_VARIANTS","TableRoot","forwardRef","layout","props","ref","className","cn","jsx","TableHeader","variant","TableHead","TableRow","TableBody","TableCell","TableFooter","TableResizeHandle","TableCheckCell","checked","indeterminate","onValueChange","label","disabled","Checkbox","newChecked","TableCheckHead","Table"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsxs as d, jsx as r } from "react/jsx-runtime";
3
3
  import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
4
- import { b4 as k, b5 as T, b6 as w, b7 as N } from "./vendor-base-ui-kxxocm122zr4pipe.js";
4
+ import { b4 as k, b5 as T, b6 as w, b7 as N } from "./vendor-base-ui-lgoligkf81eyvnde.js";
5
5
  const y = {
6
6
  variant: "segmented"
7
7
  };
@@ -83,4 +83,4 @@ function z({
83
83
  export {
84
84
  z as T
85
85
  };
86
- //# sourceMappingURL=tabs-n3rcvuzx0gbslyy6.js.map
86
+ //# sourceMappingURL=tabs-omc1n6jaxkf41pvg.js.map