@cloudflare/kumo 1.7.0 → 1.9.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 (174) hide show
  1. package/CHANGELOG.md +65 -0
  2. package/ai/component-registry.json +146 -70
  3. package/ai/component-registry.md +178 -46
  4. package/ai/schemas.ts +11 -8
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.d.ts +54 -44
  7. package/dist/ai/schemas.d.ts.map +1 -1
  8. package/dist/banner-BKDBfLHA.js +75 -0
  9. package/dist/banner-BKDBfLHA.js.map +1 -0
  10. package/dist/catalog.js +1 -1
  11. package/dist/{checkbox-Dt8iSNOg.js → checkbox-CfFoTNFI.js} +60 -60
  12. package/dist/checkbox-CfFoTNFI.js.map +1 -0
  13. package/dist/{clipboard-text-CeoyR28P.js → clipboard-text-1d0rHIhb.js} +24 -24
  14. package/dist/{clipboard-text-CeoyR28P.js.map → clipboard-text-1d0rHIhb.js.map} +1 -1
  15. package/dist/{combobox-BIC-YZ2L.js → combobox-vnvi22pn.js} +83 -61
  16. package/dist/combobox-vnvi22pn.js.map +1 -0
  17. package/dist/{command-palette-D3MNR7w9.js → command-palette-B80cqB7K.js} +2 -2
  18. package/dist/{command-palette-D3MNR7w9.js.map → command-palette-B80cqB7K.js.map} +1 -1
  19. package/dist/components/banner.js +1 -1
  20. package/dist/components/checkbox.js +1 -1
  21. package/dist/components/clipboard-text.js +1 -1
  22. package/dist/components/combobox.js +1 -1
  23. package/dist/components/command-palette.js +1 -1
  24. package/dist/components/dialog.js +1 -1
  25. package/dist/components/dropdown.js +1 -1
  26. package/dist/components/field.js +1 -1
  27. package/dist/components/flow.js +1472 -1412
  28. package/dist/components/flow.js.map +1 -1
  29. package/dist/components/input.js +3 -3
  30. package/dist/components/label.js +1 -1
  31. package/dist/components/link.js +1 -1
  32. package/dist/components/menubar.js +1 -1
  33. package/dist/components/meter.js +1 -1
  34. package/dist/components/pagination.js +1 -1
  35. package/dist/components/popover.js +1 -1
  36. package/dist/components/radio.js +1 -1
  37. package/dist/components/select.js +1 -1
  38. package/dist/components/sensitive-input.js +1 -1
  39. package/dist/components/switch.js +1 -1
  40. package/dist/components/table.js +1 -1
  41. package/dist/components/tabs.js +1 -1
  42. package/dist/components/toast.js +2 -2
  43. package/dist/components/tooltip.js +1 -1
  44. package/dist/{dialog-toS9krNF.js → dialog-C4BIM-74.js} +6 -6
  45. package/dist/{dialog-toS9krNF.js.map → dialog-C4BIM-74.js.map} +1 -1
  46. package/dist/dropdown-CfS4QcSR.js +295 -0
  47. package/dist/dropdown-CfS4QcSR.js.map +1 -0
  48. package/dist/{field-DCq04TgZ.js → field-B8xISAuX.js} +5 -5
  49. package/dist/{field-DCq04TgZ.js.map → field-B8xISAuX.js.map} +1 -1
  50. package/dist/index.js +29 -29
  51. package/dist/{input-CCR8NGG7.js → input-DCzpefuq.js} +3 -3
  52. package/dist/{input-CCR8NGG7.js.map → input-DCzpefuq.js.map} +1 -1
  53. package/dist/{input-area-DU2Yvp_t.js → input-area-DCaAN9nG.js} +3 -3
  54. package/dist/{input-area-DU2Yvp_t.js.map → input-area-DCaAN9nG.js.map} +1 -1
  55. package/dist/{input-group-C365-qBq.js → input-group-BbaVpJnA.js} +2 -2
  56. package/dist/{input-group-C365-qBq.js.map → input-group-BbaVpJnA.js.map} +1 -1
  57. package/dist/{label-zjtV7oXa.js → label-Cd6nCDWj.js} +2 -2
  58. package/dist/{label-zjtV7oXa.js.map → label-Cd6nCDWj.js.map} +1 -1
  59. package/dist/{link-C8pUZ4Q-.js → link-DJq9RWpK.js} +11 -11
  60. package/dist/{link-C8pUZ4Q-.js.map → link-DJq9RWpK.js.map} +1 -1
  61. package/dist/{menubar-D7WvAf6x.js → menubar-Chchzst0.js} +2 -2
  62. package/dist/{menubar-D7WvAf6x.js.map → menubar-Chchzst0.js.map} +1 -1
  63. package/dist/{meter-jQGKS1z4.js → meter-Wk7_EhaO.js} +4 -4
  64. package/dist/{meter-jQGKS1z4.js.map → meter-Wk7_EhaO.js.map} +1 -1
  65. package/dist/pagination-DFHoZwPJ.js +208 -0
  66. package/dist/pagination-DFHoZwPJ.js.map +1 -0
  67. package/dist/{popover-syU1104E.js → popover-D20xpmdk.js} +22 -20
  68. package/dist/{popover-syU1104E.js.map → popover-D20xpmdk.js.map} +1 -1
  69. package/dist/primitives/accordion.js +1 -1
  70. package/dist/primitives/alert-dialog.js +1 -1
  71. package/dist/primitives/autocomplete.js +1 -1
  72. package/dist/primitives/avatar.js +1 -1
  73. package/dist/primitives/button.js +1 -1
  74. package/dist/primitives/checkbox-group.js +1 -1
  75. package/dist/primitives/checkbox.js +1 -1
  76. package/dist/primitives/collapsible.js +1 -1
  77. package/dist/primitives/combobox.js +1 -1
  78. package/dist/primitives/context-menu.js +1 -1
  79. package/dist/primitives/csp-provider.js +6 -0
  80. package/dist/primitives/csp-provider.js.map +1 -0
  81. package/dist/primitives/dialog.js +1 -1
  82. package/dist/primitives/direction-provider.js +1 -1
  83. package/dist/primitives/drawer.js +6 -0
  84. package/dist/primitives/drawer.js.map +1 -0
  85. package/dist/primitives/field.js +1 -1
  86. package/dist/primitives/fieldset.js +2 -2
  87. package/dist/primitives/form.js +1 -1
  88. package/dist/primitives/input.js +1 -1
  89. package/dist/primitives/menu.js +1 -1
  90. package/dist/primitives/menubar.js +1 -1
  91. package/dist/primitives/meter.js +1 -1
  92. package/dist/primitives/navigation-menu.js +2 -2
  93. package/dist/primitives/number-field.js +1 -1
  94. package/dist/primitives/popover.js +1 -1
  95. package/dist/primitives/preview-card.js +2 -2
  96. package/dist/primitives/progress.js +2 -2
  97. package/dist/primitives/radio-group.js +1 -1
  98. package/dist/primitives/radio.js +2 -2
  99. package/dist/primitives/scroll-area.js +1 -1
  100. package/dist/primitives/select.js +1 -1
  101. package/dist/primitives/separator.js +1 -1
  102. package/dist/primitives/slider.js +1 -1
  103. package/dist/primitives/switch.js +1 -1
  104. package/dist/primitives/tabs.js +1 -1
  105. package/dist/primitives/toast.js +1 -1
  106. package/dist/primitives/toggle-group.js +1 -1
  107. package/dist/primitives/toggle.js +1 -1
  108. package/dist/primitives/toolbar.js +1 -1
  109. package/dist/primitives/tooltip.js +1 -1
  110. package/dist/primitives.js +31 -29
  111. package/dist/{radio-CWMtSx65.js → radio-ibVa4Y8a.js} +18 -18
  112. package/dist/{radio-CWMtSx65.js.map → radio-ibVa4Y8a.js.map} +1 -1
  113. package/dist/{schemas-DbIwo0ET.js → schemas-CdpAeJKO.js} +278 -275
  114. package/dist/{schemas-DbIwo0ET.js.map → schemas-CdpAeJKO.js.map} +1 -1
  115. package/dist/{select-G6JqBVkg.js → select-DtcT1zGm.js} +21 -21
  116. package/dist/{select-G6JqBVkg.js.map → select-DtcT1zGm.js.map} +1 -1
  117. package/dist/{sensitive-input-DNFpycoy.js → sensitive-input-DHDRZRC7.js} +4 -4
  118. package/dist/{sensitive-input-DNFpycoy.js.map → sensitive-input-DHDRZRC7.js.map} +1 -1
  119. package/dist/src/components/banner/banner.d.ts +28 -11
  120. package/dist/src/components/banner/banner.d.ts.map +1 -1
  121. package/dist/src/components/checkbox/checkbox.d.ts.map +1 -1
  122. package/dist/src/components/combobox/combobox.d.ts +4 -1
  123. package/dist/src/components/combobox/combobox.d.ts.map +1 -1
  124. package/dist/src/components/dropdown/dropdown.d.ts +26 -16
  125. package/dist/src/components/dropdown/dropdown.d.ts.map +1 -1
  126. package/dist/src/components/flow/connectors.d.ts +3 -1
  127. package/dist/src/components/flow/connectors.d.ts.map +1 -1
  128. package/dist/src/components/flow/diagram.d.ts +1 -0
  129. package/dist/src/components/flow/diagram.d.ts.map +1 -1
  130. package/dist/src/components/flow/node.d.ts +5 -1
  131. package/dist/src/components/flow/node.d.ts.map +1 -1
  132. package/dist/src/components/flow/parallel.d.ts +10 -2
  133. package/dist/src/components/flow/parallel.d.ts.map +1 -1
  134. package/dist/src/components/pagination/pagination.d.ts +134 -13
  135. package/dist/src/components/pagination/pagination.d.ts.map +1 -1
  136. package/dist/src/components/popover/popover.d.ts +7 -1
  137. package/dist/src/components/popover/popover.d.ts.map +1 -1
  138. package/dist/src/components/toast/toast.d.ts +4 -4
  139. package/dist/src/components/toast/toast.d.ts.map +1 -1
  140. package/dist/src/components/tooltip/tooltip.d.ts +1 -1
  141. package/dist/src/components/tooltip/tooltip.d.ts.map +1 -1
  142. package/dist/src/primitives/csp-provider.d.ts +13 -0
  143. package/dist/src/primitives/csp-provider.d.ts.map +1 -0
  144. package/dist/src/primitives/drawer.d.ts +13 -0
  145. package/dist/src/primitives/drawer.d.ts.map +1 -0
  146. package/dist/src/primitives/index.d.ts +2 -0
  147. package/dist/src/primitives/index.d.ts.map +1 -1
  148. package/dist/styles/kumo-standalone.css +1 -1
  149. package/dist/{switch-CmsZ4z-g.js → switch-DrbaX2iC.js} +15 -15
  150. package/dist/{switch-CmsZ4z-g.js.map → switch-DrbaX2iC.js.map} +1 -1
  151. package/dist/{table-Dc0AGcLV.js → table-CH9KC36S.js} +2 -2
  152. package/dist/{table-Dc0AGcLV.js.map → table-CH9KC36S.js.map} +1 -1
  153. package/dist/{tabs-BpD1iUiz.js → tabs-B-Fxc6Zo.js} +2 -2
  154. package/dist/{tabs-BpD1iUiz.js.map → tabs-B-Fxc6Zo.js.map} +1 -1
  155. package/dist/{toast-BrR0pjLE.js → toast-DUYp3EtH.js} +6 -6
  156. package/dist/{toast-BrR0pjLE.js.map → toast-DUYp3EtH.js.map} +1 -1
  157. package/dist/{tooltip-daVJYtXY.js → tooltip-D-KwZQDV.js} +2 -2
  158. package/dist/{tooltip-daVJYtXY.js.map → tooltip-D-KwZQDV.js.map} +1 -1
  159. package/dist/vendor-base-ui-Bsg5ebHI.js +22806 -0
  160. package/dist/vendor-base-ui-Bsg5ebHI.js.map +1 -0
  161. package/dist/{vendor-utils-DD8jNJwD.js → vendor-utils-DKXfkDYu.js} +100 -101
  162. package/dist/vendor-utils-DKXfkDYu.js.map +1 -0
  163. package/package.json +10 -2
  164. package/dist/banner-4fkH6Sbt.js +0 -51
  165. package/dist/banner-4fkH6Sbt.js.map +0 -1
  166. package/dist/checkbox-Dt8iSNOg.js.map +0 -1
  167. package/dist/combobox-BIC-YZ2L.js.map +0 -1
  168. package/dist/dropdown-BquiYKKC.js +0 -263
  169. package/dist/dropdown-BquiYKKC.js.map +0 -1
  170. package/dist/pagination-BN80iKY6.js +0 -100
  171. package/dist/pagination-BN80iKY6.js.map +0 -1
  172. package/dist/vendor-base-ui-9w7J6BvW.js +0 -20448
  173. package/dist/vendor-base-ui-9w7J6BvW.js.map +0 -1
  174. package/dist/vendor-utils-DD8jNJwD.js.map +0 -1
@@ -2,10 +2,10 @@
2
2
  import { jsx as e, jsxs as C } from "react/jsx-runtime";
3
3
  import { forwardRef as y, createContext as F, useContext as K } from "react";
4
4
  import { MinusIcon as w, CheckIcon as j } from "@phosphor-icons/react";
5
- import { c as g } from "./cn-Bhsu1vx2.js";
6
- import { L as E } from "./label-zjtV7oXa.js";
7
- import { H as I, J as L, K as R, L as _, C as G, N as D, O as H } from "./vendor-base-ui-9w7J6BvW.js";
8
- const J = {
5
+ import { c as f } from "./cn-Bhsu1vx2.js";
6
+ import { L as E } from "./label-Cd6nCDWj.js";
7
+ import { K as I, L, N as R, O as _, C as G, P as D, Q as M } from "./vendor-base-ui-Bsg5ebHI.js";
8
+ const Q = {
9
9
  variant: {
10
10
  default: {
11
11
  classes: "[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring",
@@ -22,24 +22,24 @@ const J = {
22
22
  controlFirst: !0
23
23
  }), A = y(
24
24
  ({
25
- className: c,
25
+ className: s,
26
26
  checked: l,
27
27
  indeterminate: i,
28
28
  disabled: r,
29
29
  variant: m = "default",
30
- label: n,
31
- labelTooltip: u,
32
- controlFirst: d = !0,
30
+ label: o,
31
+ labelTooltip: d,
32
+ controlFirst: u = !0,
33
33
  onCheckedChange: h,
34
34
  onValueChange: k,
35
- onChange: s,
35
+ onChange: c,
36
36
  required: x,
37
37
  name: p,
38
- ...o
39
- }, b) => {
38
+ ...n
39
+ }, g) => {
40
40
  if (process.env.NODE_ENV !== "production") {
41
- const t = !!n, a = !!o["aria-label"], f = !!o["aria-labelledby"];
42
- !t && !a && !f && console.warn(
41
+ const t = !!o, a = !!n["aria-label"], b = !!n["aria-labelledby"];
42
+ !t && !a && !b && console.warn(
43
43
  `[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:
44
44
  - label prop: <Checkbox label='Accept terms' />
45
45
  - aria-label: <Checkbox aria-label='Select item' />
@@ -50,46 +50,46 @@ const J = {
50
50
  const N = /* @__PURE__ */ e(
51
51
  I,
52
52
  {
53
- ref: b,
53
+ ref: g,
54
54
  name: p,
55
55
  checked: l,
56
56
  indeterminate: i,
57
57
  disabled: r,
58
58
  onCheckedChange: (t, a) => {
59
- if (h?.(t), k?.(t), s) {
60
- const f = Object.assign(a.event, {
59
+ if (h?.(t), k?.(t), c) {
60
+ const b = Object.assign(a.event, {
61
61
  target: { checked: t }
62
62
  });
63
- s(f);
63
+ c(b);
64
64
  }
65
65
  },
66
- className: g(
66
+ className: f(
67
67
  "flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring",
68
68
  m === "error" ? "ring-kumo-danger" : "ring-kumo-line",
69
69
  !r && "hover:ring-kumo-ring focus-visible:ring-kumo-ring",
70
- "data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast",
70
+ "data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast",
71
71
  r && "cursor-not-allowed opacity-50",
72
- c
72
+ s
73
73
  ),
74
- ...o,
74
+ ...n,
75
75
  children: /* @__PURE__ */ e(
76
76
  L,
77
77
  {
78
78
  className: "flex items-center justify-center text-kumo-inverse",
79
79
  render: (t, a) => {
80
- const f = a.indeterminate ? w : j;
81
- return /* @__PURE__ */ e("span", { ...t, children: (a.checked || a.indeterminate) && /* @__PURE__ */ e(f, { weight: "bold", size: 12 }) });
80
+ const b = a.indeterminate ? w : j;
81
+ return /* @__PURE__ */ e("span", { ...t, children: (a.checked || a.indeterminate) && /* @__PURE__ */ e(b, { weight: "bold", size: 12 }) });
82
82
  }
83
83
  }
84
84
  )
85
85
  }
86
86
  );
87
- return n ? /* @__PURE__ */ e(R, { className: "inline-flex", children: /* @__PURE__ */ C(
87
+ return o ? /* @__PURE__ */ e(R, { className: "inline-flex", children: /* @__PURE__ */ C(
88
88
  _,
89
89
  {
90
- className: g(
90
+ className: f(
91
91
  "inline-flex items-center gap-2",
92
- d ? "flex-row" : "flex-row-reverse justify-end",
92
+ u ? "flex-row" : "flex-row-reverse justify-end",
93
93
  r ? "cursor-not-allowed" : "cursor-pointer"
94
94
  ),
95
95
  children: [
@@ -98,9 +98,9 @@ const J = {
98
98
  E,
99
99
  {
100
100
  showOptional: x === !1,
101
- tooltip: u,
101
+ tooltip: d,
102
102
  asContent: !0,
103
- children: n
103
+ children: o
104
104
  }
105
105
  )
106
106
  ]
@@ -111,97 +111,97 @@ const J = {
111
111
  A.displayName = "Checkbox";
112
112
  const B = y(
113
113
  ({
114
- className: c,
114
+ className: s,
115
115
  checked: l,
116
116
  indeterminate: i,
117
117
  disabled: r,
118
118
  variant: m = "default",
119
- label: n,
120
- value: u,
121
- onCheckedChange: d,
119
+ label: o,
120
+ value: d,
121
+ onCheckedChange: u,
122
122
  onValueChange: h,
123
123
  name: k
124
- }, s) => {
125
- const { controlFirst: x } = K(O), p = (o) => {
126
- d?.(o), h?.(o);
124
+ }, c) => {
125
+ const { controlFirst: x } = K(O), p = (n) => {
126
+ u?.(n), h?.(n);
127
127
  };
128
128
  return /* @__PURE__ */ C(
129
129
  "label",
130
130
  {
131
- className: g(
131
+ className: f(
132
132
  "relative inline-flex items-center gap-2",
133
133
  // Control first (default): checkbox before label
134
134
  // Label first: label before checkbox using flex-row-reverse
135
135
  !x && "flex-row-reverse justify-end",
136
136
  r ? "cursor-not-allowed opacity-50" : "cursor-pointer",
137
- c
137
+ s
138
138
  ),
139
139
  children: [
140
140
  /* @__PURE__ */ e(
141
141
  I,
142
142
  {
143
- ref: s,
144
- value: u,
143
+ ref: c,
144
+ value: d,
145
145
  name: k,
146
146
  checked: l,
147
147
  indeterminate: i,
148
148
  disabled: r,
149
149
  onCheckedChange: p,
150
- className: g(
150
+ className: f(
151
151
  "peer flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring",
152
152
  m === "error" ? "ring-kumo-danger" : "ring-kumo-line",
153
153
  !r && "group-hover:ring-kumo-ring hover:ring-kumo-ring focus-visible:ring-kumo-ring",
154
- "data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast"
154
+ "data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast"
155
155
  ),
156
156
  children: /* @__PURE__ */ e(
157
157
  L,
158
158
  {
159
159
  className: "flex items-center justify-center text-kumo-inverse",
160
- render: (o, b) => {
161
- const v = b.indeterminate ? w : j;
162
- return /* @__PURE__ */ e("span", { ...o, children: (b.checked || b.indeterminate) && /* @__PURE__ */ e(v, { weight: "bold", size: 12 }) });
160
+ render: (n, g) => {
161
+ const v = g.indeterminate ? w : j;
162
+ return /* @__PURE__ */ e("span", { ...n, children: (g.checked || g.indeterminate) && /* @__PURE__ */ e(v, { weight: "bold", size: 12 }) });
163
163
  }
164
164
  }
165
165
  )
166
166
  }
167
167
  ),
168
- /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: n })
168
+ /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: o })
169
169
  ]
170
170
  }
171
171
  );
172
172
  }
173
173
  );
174
174
  B.displayName = "Checkbox.Item";
175
- function M({
176
- legend: c,
175
+ function P({
176
+ legend: s,
177
177
  children: l,
178
178
  error: i,
179
179
  description: r,
180
180
  defaultValue: m,
181
- value: n,
182
- onValueChange: u,
183
- allValues: d,
181
+ value: o,
182
+ onValueChange: d,
183
+ allValues: u,
184
184
  disabled: h,
185
185
  controlFirst: k = !0,
186
- className: s
186
+ className: c
187
187
  }) {
188
188
  return /* @__PURE__ */ e(O.Provider, { value: { controlFirst: k }, children: /* @__PURE__ */ e(
189
189
  G,
190
190
  {
191
191
  defaultValue: m,
192
- value: n,
193
- onValueChange: u,
194
- allValues: d,
192
+ value: o,
193
+ onValueChange: d,
194
+ allValues: u,
195
195
  disabled: h,
196
196
  children: /* @__PURE__ */ C(
197
197
  D,
198
198
  {
199
- className: g(
199
+ className: f(
200
200
  "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
201
- s
201
+ c
202
202
  ),
203
203
  children: [
204
- /* @__PURE__ */ e(H, { className: "text-lg font-medium text-kumo-default", children: c }),
204
+ /* @__PURE__ */ e(M, { className: "text-lg font-medium text-kumo-default", children: s }),
205
205
  /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: l }),
206
206
  i && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: i }),
207
207
  r && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: r })
@@ -213,12 +213,12 @@ function M({
213
213
  }
214
214
  const S = Object.assign(A, {
215
215
  Item: B,
216
- Group: M
216
+ Group: P
217
217
  });
218
218
  S.displayName = "Checkbox";
219
219
  export {
220
220
  S as C,
221
- J as K,
221
+ Q as K,
222
222
  W as a
223
223
  };
224
- //# sourceMappingURL=checkbox-Dt8iSNOg.js.map
224
+ //# sourceMappingURL=checkbox-CfFoTNFI.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox-CfFoTNFI.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 \"flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring\",\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 className=\"flex items-center justify-center text-kumo-inverse\"\n render={(renderProps, state) => {\n const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n return (\n <span {...renderProps}>\n {(state.checked || state.indeterminate) && (\n <Icon weight=\"bold\" size={12} />\n )}\n </span>\n );\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 \"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 \"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 flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring\",\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 className=\"flex items-center justify-center text-kumo-inverse\"\n render={(props, state) => {\n const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n return (\n <span {...props}>\n {(state.checked || state.indeterminate) && (\n <Icon weight=\"bold\" size={12} />\n )}\n </span>\n );\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","Icon","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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"}
@@ -3,9 +3,9 @@ import { jsxs as c, jsx as e } from "react/jsx-runtime";
3
3
  import { CheckIcon as N, CopyIcon as R } from "@phosphor-icons/react";
4
4
  import { forwardRef as A, useState as S, useRef as P, useCallback as _ } from "react";
5
5
  import { B as I } from "./button-Bh96oxRL.js";
6
- import { i as O } from "./input-CCR8NGG7.js";
7
- import { c as a } from "./cn-Bhsu1vx2.js";
8
- import { P as M, Q as V, U as j, V as B, W as U, X as D, Y as E, Z as L, _ as X, $ as K, a0 as W, a1 as F, a2 as Q } from "./vendor-base-ui-9w7J6BvW.js";
6
+ import { i as O } from "./input-DCzpefuq.js";
7
+ import { c as i } from "./cn-Bhsu1vx2.js";
8
+ import { U as M, V, W as j, X as B, Y as U, Z as D, _ as E, $ as L, a0 as X, a1 as K, a2 as W, a3 as F, a4 as Y } from "./vendor-base-ui-Bsg5ebHI.js";
9
9
  const h = M(), y = {
10
10
  size: {
11
11
  sm: {
@@ -33,37 +33,37 @@ const h = M(), y = {
33
33
  end: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full"
34
34
  }
35
35
  };
36
- function Y({
36
+ function Z({
37
37
  size: t = C.size
38
38
  } = {}) {
39
- return a(
39
+ return i(
40
40
  // Base styles
41
41
  "flex items-center overflow-hidden bg-kumo-base px-0 font-mono",
42
42
  // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS
43
43
  y.size[t].classes
44
44
  );
45
45
  }
46
- function Z() {
46
+ function $() {
47
47
  const { toasts: t } = X();
48
48
  return /* @__PURE__ */ e(K, { className: "pointer-events-none fixed inset-0 z-50", children: t.map((s) => /* @__PURE__ */ e(W, { toast: s, className: "absolute", children: /* @__PURE__ */ e(
49
49
  F,
50
50
  {
51
51
  toast: s,
52
- className: a(
52
+ className: i(
53
53
  "flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans",
54
54
  "shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill"
55
55
  ),
56
- children: /* @__PURE__ */ e(Q, {})
56
+ children: /* @__PURE__ */ e(Y, {})
57
57
  }
58
58
  ) }, s.id)) });
59
59
  }
60
- function $({ children: t }) {
60
+ function q({ children: t }) {
61
61
  return /* @__PURE__ */ e(E, { children: /* @__PURE__ */ c(L, { toastManager: h, children: [
62
- /* @__PURE__ */ e(Z, {}),
62
+ /* @__PURE__ */ e($, {}),
63
63
  t
64
64
  ] }) });
65
65
  }
66
- const q = A(
66
+ const G = A(
67
67
  ({
68
68
  text: t,
69
69
  className: s,
@@ -83,12 +83,12 @@ const q = A(
83
83
  else if (typeof document < "u") {
84
84
  const o = document.createElement("textarea");
85
85
  o.value = t, o.setAttribute("readonly", ""), o.style.position = "absolute", o.style.left = "-9999px", document.body.appendChild(o);
86
- const i = document.getSelection(), T = i?.rangeCount ? i.getRangeAt(0) : null;
86
+ const a = document.getSelection(), T = a?.rangeCount ? a.getRangeAt(0) : null;
87
87
  o.select();
88
88
  try {
89
89
  document.execCommand("copy");
90
90
  } finally {
91
- document.body.removeChild(o), T && (i?.removeAllRanges(), i?.addRange(T));
91
+ document.body.removeChild(o), T && (a?.removeAllRanges(), a?.addRange(T));
92
92
  }
93
93
  }
94
94
  d(!0), n ? h.add({
@@ -119,7 +119,7 @@ const q = A(
119
119
  /* @__PURE__ */ e(
120
120
  "span",
121
121
  {
122
- className: a(
122
+ className: i(
123
123
  "flex items-center gap-1 transition-all duration-200",
124
124
  r ? l.slide.animate : l.slide.initial
125
125
  ),
@@ -129,7 +129,7 @@ const q = A(
129
129
  /* @__PURE__ */ e(
130
130
  "span",
131
131
  {
132
- className: a(
132
+ className: i(
133
133
  "flex items-center justify-center transition-all duration-200",
134
134
  r ? l.slide.end : l.slide.animate
135
135
  ),
@@ -143,26 +143,26 @@ const q = A(
143
143
  "div",
144
144
  {
145
145
  ref: w,
146
- className: a(
146
+ className: i(
147
147
  O({ size: x.buttonSize }),
148
- Y({ size: m }),
148
+ Z({ size: m }),
149
149
  s
150
150
  ),
151
151
  children: [
152
152
  /* @__PURE__ */ e("span", { className: "grow truncate ps-4 pe-2", children: t }),
153
- n ? /* @__PURE__ */ e($, { children: /* @__PURE__ */ c(
153
+ n ? /* @__PURE__ */ e(q, { children: /* @__PURE__ */ c(
154
154
  V,
155
155
  {
156
156
  disabled: r,
157
- onOpenChange: (o, i) => {
158
- i.reason === "trigger-press" && i.cancel();
157
+ onOpenChange: (o, a) => {
158
+ a.reason === "trigger-press" && a.cancel();
159
159
  },
160
160
  children: [
161
161
  /* @__PURE__ */ e(j, { render: g }),
162
162
  /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(U, { side: u, sideOffset: 8, children: /* @__PURE__ */ e(
163
163
  D,
164
164
  {
165
- className: a(
165
+ className: i(
166
166
  "flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default",
167
167
  "shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill"
168
168
  ),
@@ -178,8 +178,8 @@ const q = A(
178
178
  );
179
179
  }
180
180
  );
181
- q.displayName = "ClipboardText";
181
+ G.displayName = "ClipboardText";
182
182
  export {
183
- q as C
183
+ G as C
184
184
  };
185
- //# sourceMappingURL=clipboard-text-CeoyR28P.js.map
185
+ //# sourceMappingURL=clipboard-text-1d0rHIhb.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"clipboard-text-CeoyR28P.js","sources":["../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\nexport const KUMO_CLIPBOARD_TEXT_VARIANTS = {\n size: {\n sm: {\n classes: \"text-xs\",\n buttonSize: \"sm\" as const,\n description: \"Small clipboard text for compact UIs\",\n },\n base: {\n classes: \"text-sm\",\n buttonSize: \"base\" as const,\n description: \"Default clipboard text size\",\n },\n lg: {\n classes: \"text-sm\",\n buttonSize: \"lg\" as const,\n description: \"Large clipboard text for prominent display\",\n },\n },\n} as const;\n\nexport const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n size: \"lg\",\n} as const;\n\nconst clipboardTextAnimations = {\n slide: {\n initial:\n \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n animate: \"translate-y-0 opacity-100\",\n end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n },\n} as const;\n\n// Derived types from KUMO_CLIPBOARD_TEXT_VARIANTS\nexport type KumoClipboardTextSize =\n keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface KumoClipboardTextVariantsProps {\n /**\n * Size of the clipboard text field.\n * - `\"sm\"` — Small clipboard text for compact UIs\n * - `\"base\"` — Default clipboard text size\n * - `\"lg\"` — Large clipboard text for prominent display\n * @default \"lg\"\n */\n size?: KumoClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: KumoClipboardTextVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex items-center overflow-hidden bg-kumo-base px-0 font-mono\",\n // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS\n KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = KumoClipboardTextSize;\n\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n /** The text to display and copy to clipboard. */\n text: string;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Callback fired after text is copied to clipboard. */\n onCopy?: () => void;\n /**\n * Tooltip config. Shows tooltip on hover, anchored toast on click.\n * @example\n * ```tsx\n * <ClipboardText\n * text=\"abc123\"\n * tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n * />\n * ```\n */\n tooltip?: {\n /** Text shown in tooltip on hover. @default \"Copy\" */\n text?: string;\n /** Text shown in toast after copying. @default \"Copied\" */\n copiedText?: string;\n /** Tooltip/toast placement. @default \"top\" */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n };\n /** Accessible labels for i18n. */\n labels?: {\n /** @default \"Copy to clipboard\" */\n copyAction?: string;\n };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n const { toasts } = Toast.useToastManager();\n return (\n <Toast.Viewport className=\"pointer-events-none fixed inset-0 z-50\">\n {toasts.map((toast) => (\n <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n <Toast.Root\n toast={toast}\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n <Toast.Description />\n </Toast.Root>\n </Toast.Positioner>\n ))}\n </Toast.Viewport>\n );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n return (\n <Tooltip.Provider>\n <Toast.Provider toastManager={clipboardToastManager}>\n <AnchoredToasts />\n {children}\n </Toast.Provider>\n </Tooltip.Provider>\n );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\n * ```\n */\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n (\n {\n text,\n className,\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n onCopy,\n tooltip,\n labels: { copyAction = \"Copy to clipboard\" } = {},\n },\n ref,\n ) => {\n const [copied, setCopied] = useState(false);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n // Destructure tooltip config with defaults\n const {\n text: tooltipText = \"Copy\",\n copiedText = \"Copied\",\n side: tooltipSide = \"top\",\n } = tooltip ?? {};\n\n const copyToClipboard = useCallback(async () => {\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = text;\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 } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n\n setCopied(true);\n\n // Show anchored toast if tooltip mode is enabled\n if (tooltip) {\n clipboardToastManager.add({\n description: copiedText,\n positionerProps: {\n anchor: buttonRef.current,\n side: tooltipSide,\n sideOffset: 8,\n },\n timeout: 1500,\n onClose() {\n setCopied(false);\n },\n });\n } else {\n // Reset copied state after delay when no tooltip\n setTimeout(() => setCopied(false), 1500);\n }\n\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n }\n }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n const copyButton = (\n <Button\n ref={buttonRef}\n size={sizeConfig.buttonSize}\n variant=\"ghost\"\n className=\"rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200\"\n onClick={copyToClipboard}\n aria-label={copyAction}\n >\n <span\n className={cn(\n \"flex items-center gap-1 transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.animate\n : clipboardTextAnimations.slide.initial,\n )}\n >\n <CheckIcon />\n </span>\n <span\n className={cn(\n \"flex items-center justify-center transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.end\n : clipboardTextAnimations.slide.animate,\n )}\n >\n <CopyIcon />\n </span>\n </Button>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n inputVariants({ size: sizeConfig.buttonSize }),\n clipboardTextVariants({ size }),\n className,\n )}\n >\n <span className=\"grow truncate ps-4 pe-2\">{text}</span>\n {tooltip ? (\n <TooltipWrapper>\n <Tooltip.Root\n disabled={copied}\n onOpenChange={(open, eventDetails) => {\n // Prevent tooltip from closing when button is clicked\n if (eventDetails.reason === \"trigger-press\") {\n eventDetails.cancel();\n }\n }}\n >\n <Tooltip.Trigger render={copyButton} />\n <Tooltip.Portal>\n <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n <Tooltip.Popup\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n {tooltipText}\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n </TooltipWrapper>\n ) : (\n copyButton\n )}\n <span className=\"sr-only\" aria-live=\"polite\">\n {copied ? copiedText : \"\"}\n </span>\n </div>\n );\n },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}
1
+ {"version":3,"file":"clipboard-text-1d0rHIhb.js","sources":["../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\nexport const KUMO_CLIPBOARD_TEXT_VARIANTS = {\n size: {\n sm: {\n classes: \"text-xs\",\n buttonSize: \"sm\" as const,\n description: \"Small clipboard text for compact UIs\",\n },\n base: {\n classes: \"text-sm\",\n buttonSize: \"base\" as const,\n description: \"Default clipboard text size\",\n },\n lg: {\n classes: \"text-sm\",\n buttonSize: \"lg\" as const,\n description: \"Large clipboard text for prominent display\",\n },\n },\n} as const;\n\nexport const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n size: \"lg\",\n} as const;\n\nconst clipboardTextAnimations = {\n slide: {\n initial:\n \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n animate: \"translate-y-0 opacity-100\",\n end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n },\n} as const;\n\n// Derived types from KUMO_CLIPBOARD_TEXT_VARIANTS\nexport type KumoClipboardTextSize =\n keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface KumoClipboardTextVariantsProps {\n /**\n * Size of the clipboard text field.\n * - `\"sm\"` — Small clipboard text for compact UIs\n * - `\"base\"` — Default clipboard text size\n * - `\"lg\"` — Large clipboard text for prominent display\n * @default \"lg\"\n */\n size?: KumoClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: KumoClipboardTextVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex items-center overflow-hidden bg-kumo-base px-0 font-mono\",\n // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS\n KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = KumoClipboardTextSize;\n\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n /** The text to display and copy to clipboard. */\n text: string;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Callback fired after text is copied to clipboard. */\n onCopy?: () => void;\n /**\n * Tooltip config. Shows tooltip on hover, anchored toast on click.\n * @example\n * ```tsx\n * <ClipboardText\n * text=\"abc123\"\n * tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n * />\n * ```\n */\n tooltip?: {\n /** Text shown in tooltip on hover. @default \"Copy\" */\n text?: string;\n /** Text shown in toast after copying. @default \"Copied\" */\n copiedText?: string;\n /** Tooltip/toast placement. @default \"top\" */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n };\n /** Accessible labels for i18n. */\n labels?: {\n /** @default \"Copy to clipboard\" */\n copyAction?: string;\n };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n const { toasts } = Toast.useToastManager();\n return (\n <Toast.Viewport className=\"pointer-events-none fixed inset-0 z-50\">\n {toasts.map((toast) => (\n <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n <Toast.Root\n toast={toast}\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n <Toast.Description />\n </Toast.Root>\n </Toast.Positioner>\n ))}\n </Toast.Viewport>\n );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n return (\n <Tooltip.Provider>\n <Toast.Provider toastManager={clipboardToastManager}>\n <AnchoredToasts />\n {children}\n </Toast.Provider>\n </Tooltip.Provider>\n );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\n * ```\n */\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n (\n {\n text,\n className,\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n onCopy,\n tooltip,\n labels: { copyAction = \"Copy to clipboard\" } = {},\n },\n ref,\n ) => {\n const [copied, setCopied] = useState(false);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n // Destructure tooltip config with defaults\n const {\n text: tooltipText = \"Copy\",\n copiedText = \"Copied\",\n side: tooltipSide = \"top\",\n } = tooltip ?? {};\n\n const copyToClipboard = useCallback(async () => {\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = text;\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 } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n\n setCopied(true);\n\n // Show anchored toast if tooltip mode is enabled\n if (tooltip) {\n clipboardToastManager.add({\n description: copiedText,\n positionerProps: {\n anchor: buttonRef.current,\n side: tooltipSide,\n sideOffset: 8,\n },\n timeout: 1500,\n onClose() {\n setCopied(false);\n },\n });\n } else {\n // Reset copied state after delay when no tooltip\n setTimeout(() => setCopied(false), 1500);\n }\n\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n }\n }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n const copyButton = (\n <Button\n ref={buttonRef}\n size={sizeConfig.buttonSize}\n variant=\"ghost\"\n className=\"rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200\"\n onClick={copyToClipboard}\n aria-label={copyAction}\n >\n <span\n className={cn(\n \"flex items-center gap-1 transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.animate\n : clipboardTextAnimations.slide.initial,\n )}\n >\n <CheckIcon />\n </span>\n <span\n className={cn(\n \"flex items-center justify-center transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.end\n : clipboardTextAnimations.slide.animate,\n )}\n >\n <CopyIcon />\n </span>\n </Button>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n inputVariants({ size: sizeConfig.buttonSize }),\n clipboardTextVariants({ size }),\n className,\n )}\n >\n <span className=\"grow truncate ps-4 pe-2\">{text}</span>\n {tooltip ? (\n <TooltipWrapper>\n <Tooltip.Root\n disabled={copied}\n onOpenChange={(open, eventDetails) => {\n // Prevent tooltip from closing when button is clicked\n if (eventDetails.reason === \"trigger-press\") {\n eventDetails.cancel();\n }\n }}\n >\n <Tooltip.Trigger render={copyButton} />\n <Tooltip.Portal>\n <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n <Tooltip.Popup\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n {tooltipText}\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n </TooltipWrapper>\n ) : (\n copyButton\n )}\n <span className=\"sr-only\" aria-live=\"polite\">\n {copied ? copiedText : \"\"}\n </span>\n </div>\n );\n },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}