@spark-ui/components 11.1.0 → 11.1.2

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 (146) hide show
  1. package/dist/DialogTrigger-woU7vsJi.d.ts +142 -0
  2. package/dist/Input-N8AWWSmt.d.ts +41 -0
  3. package/dist/InputTrailingIcon-ZZx8PoJy.d.ts +20 -0
  4. package/dist/LabelRequiredIndicator-DRnCzHMU.d.ts +19 -0
  5. package/dist/accordion/index.d.ts +73 -0
  6. package/dist/accordion/index.js +325 -0
  7. package/dist/accordion/index.js.map +1 -0
  8. package/dist/alert-dialog/index.d.ts +119 -0
  9. package/dist/alert-dialog/index.js +1554 -0
  10. package/dist/alert-dialog/index.js.map +1 -0
  11. package/dist/avatar/index.d.ts +66 -0
  12. package/dist/avatar/index.js +1303 -0
  13. package/dist/avatar/index.js.map +1 -0
  14. package/dist/badge/index.d.ts +47 -0
  15. package/dist/badge/index.js +122 -0
  16. package/dist/badge/index.js.map +1 -0
  17. package/dist/breadcrumb/index.d.ts +64 -0
  18. package/dist/breadcrumb/index.js +327 -0
  19. package/dist/breadcrumb/index.js.map +1 -0
  20. package/dist/button/index.d.ts +41 -0
  21. package/dist/button/index.js +935 -0
  22. package/dist/button/index.js.map +1 -0
  23. package/dist/card/index.d.ts +61 -0
  24. package/dist/card/index.js +502 -0
  25. package/dist/card/index.js.map +1 -0
  26. package/dist/carousel/index.d.ts +261 -0
  27. package/dist/carousel/index.js +1801 -0
  28. package/dist/carousel/index.js.map +1 -0
  29. package/dist/checkbox/index.d.ts +120 -0
  30. package/dist/checkbox/index.js +511 -0
  31. package/dist/checkbox/index.js.map +1 -0
  32. package/dist/chip/index.d.ts +97 -0
  33. package/dist/chip/index.js +908 -0
  34. package/dist/chip/index.js.map +1 -0
  35. package/dist/collapsible/index.d.ts +43 -0
  36. package/dist/collapsible/index.js +109 -0
  37. package/dist/collapsible/index.js.map +1 -0
  38. package/dist/combobox/index.d.ts +287 -0
  39. package/dist/combobox/index.js +2588 -0
  40. package/dist/combobox/index.js.map +1 -0
  41. package/dist/dialog/index.d.ts +33 -0
  42. package/dist/dialog/index.js +1389 -0
  43. package/dist/dialog/index.js.map +1 -0
  44. package/dist/divider/index.d.ts +61 -0
  45. package/dist/divider/index.js +224 -0
  46. package/dist/divider/index.js.map +1 -0
  47. package/dist/drawer/index.d.ts +152 -0
  48. package/dist/drawer/index.js +1400 -0
  49. package/dist/drawer/index.js.map +1 -0
  50. package/dist/dropdown/index.d.ts +233 -0
  51. package/dist/dropdown/index.js +2051 -0
  52. package/dist/dropdown/index.js.map +1 -0
  53. package/dist/form-field/index.d.ts +186 -0
  54. package/dist/form-field/index.js +553 -0
  55. package/dist/form-field/index.js.map +1 -0
  56. package/dist/icon/index.d.ts +28 -0
  57. package/dist/icon/index.js +127 -0
  58. package/dist/icon/index.js.map +1 -0
  59. package/dist/icon-button/index.d.ts +16 -0
  60. package/dist/icon-button/index.js +980 -0
  61. package/dist/icon-button/index.js.map +1 -0
  62. package/dist/input/index.d.ts +78 -0
  63. package/dist/input/index.js +724 -0
  64. package/dist/input/index.js.map +1 -0
  65. package/dist/kbd/index.d.ts +9 -0
  66. package/dist/kbd/index.js +47 -0
  67. package/dist/kbd/index.js.map +1 -0
  68. package/dist/label/index.d.ts +11 -0
  69. package/dist/label/index.js +78 -0
  70. package/dist/label/index.js.map +1 -0
  71. package/dist/link-box/index.d.ts +34 -0
  72. package/dist/link-box/index.js +92 -0
  73. package/dist/link-box/index.js.map +1 -0
  74. package/dist/pagination/index.d.ts +143 -0
  75. package/dist/pagination/index.js +1353 -0
  76. package/dist/pagination/index.js.map +1 -0
  77. package/dist/popover/index.d.ts +93 -0
  78. package/dist/popover/index.js +1339 -0
  79. package/dist/popover/index.js.map +1 -0
  80. package/dist/portal/index.d.ts +13 -0
  81. package/dist/portal/index.js +37 -0
  82. package/dist/portal/index.js.map +1 -0
  83. package/dist/progress/index.d.ts +48 -0
  84. package/dist/progress/index.js +223 -0
  85. package/dist/progress/index.js.map +1 -0
  86. package/dist/progress-tracker/index.d.ts +80 -0
  87. package/dist/progress-tracker/index.js +571 -0
  88. package/dist/progress-tracker/index.js.map +1 -0
  89. package/dist/radio-group/index.d.ts +100 -0
  90. package/dist/radio-group/index.js +318 -0
  91. package/dist/radio-group/index.js.map +1 -0
  92. package/dist/rating/index.d.ts +78 -0
  93. package/dist/rating/index.js +363 -0
  94. package/dist/rating/index.js.map +1 -0
  95. package/dist/scrolling-list/index.d.ts +118 -0
  96. package/dist/scrolling-list/index.js +1426 -0
  97. package/dist/scrolling-list/index.js.map +1 -0
  98. package/dist/segmented-gauge/index.d.ts +100 -0
  99. package/dist/segmented-gauge/index.js +277 -0
  100. package/dist/segmented-gauge/index.js.map +1 -0
  101. package/dist/select/index.d.ts +167 -0
  102. package/dist/select/index.js +581 -0
  103. package/dist/select/index.js.map +1 -0
  104. package/dist/skeleton/index.d.ts +67 -0
  105. package/dist/skeleton/index.js +206 -0
  106. package/dist/skeleton/index.js.map +1 -0
  107. package/dist/slider/index.d.ts +97 -0
  108. package/dist/slider/index.js +220 -0
  109. package/dist/slider/index.js.map +1 -0
  110. package/dist/slot/index.d.ts +16 -0
  111. package/dist/slot/index.js +51 -0
  112. package/dist/slot/index.js.map +1 -0
  113. package/dist/snackbar/index.d.ts +158 -0
  114. package/dist/snackbar/index.js +1756 -0
  115. package/dist/snackbar/index.js.map +1 -0
  116. package/dist/spinner/index.d.mts +1 -1
  117. package/dist/spinner/index.d.ts +21 -0
  118. package/dist/spinner/index.js +139 -0
  119. package/dist/spinner/index.js.map +1 -0
  120. package/dist/stepper/index.d.ts +81 -0
  121. package/dist/stepper/index.js +1847 -0
  122. package/dist/stepper/index.js.map +1 -0
  123. package/dist/switch/index.d.ts +64 -0
  124. package/dist/switch/index.js +327 -0
  125. package/dist/switch/index.js.map +1 -0
  126. package/dist/tabs/index.d.ts +103 -0
  127. package/dist/tabs/index.js +1376 -0
  128. package/dist/tabs/index.js.map +1 -0
  129. package/dist/tag/index.d.ts +29 -0
  130. package/dist/tag/index.js +283 -0
  131. package/dist/tag/index.js.map +1 -0
  132. package/dist/text-link/index.d.ts +20 -0
  133. package/dist/text-link/index.js +100 -0
  134. package/dist/text-link/index.js.map +1 -0
  135. package/dist/textarea/index.d.ts +57 -0
  136. package/dist/textarea/index.js +797 -0
  137. package/dist/textarea/index.js.map +1 -0
  138. package/dist/toast/index.d.ts +56 -0
  139. package/dist/toast/index.js +1412 -0
  140. package/dist/toast/index.js.map +1 -0
  141. package/dist/toast/index.mjs +1 -1
  142. package/dist/toast/index.mjs.map +1 -1
  143. package/dist/visually-hidden/index.d.ts +16 -0
  144. package/dist/visually-hidden/index.js +67 -0
  145. package/dist/visually-hidden/index.js.map +1 -0
  146. package/package.json +5 -5
@@ -0,0 +1,511 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/checkbox/index.ts
21
+ var checkbox_exports = {};
22
+ __export(checkbox_exports, {
23
+ Checkbox: () => Checkbox3,
24
+ CheckboxGroup: () => CheckboxGroup
25
+ });
26
+ module.exports = __toCommonJS(checkbox_exports);
27
+
28
+ // src/checkbox/Checkbox.tsx
29
+ var import_form_field = require("@spark-ui/components/form-field");
30
+ var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
31
+ var import_class_variance_authority6 = require("class-variance-authority");
32
+ var import_react4 = require("react");
33
+
34
+ // src/checkbox/CheckboxGroupContext.tsx
35
+ var import_react = require("react");
36
+ var CheckboxGroupContext = (0, import_react.createContext)({});
37
+ var useCheckboxGroup = () => {
38
+ const context = (0, import_react.useContext)(CheckboxGroupContext);
39
+ return context;
40
+ };
41
+
42
+ // src/checkbox/CheckboxInput.tsx
43
+ var import_Check = require("@spark-ui/icons/Check");
44
+ var import_Minus = require("@spark-ui/icons/Minus");
45
+ var import_radix_ui3 = require("radix-ui");
46
+
47
+ // src/icon/Icon.tsx
48
+ var import_react3 = require("react");
49
+
50
+ // src/slot/Slot.tsx
51
+ var import_radix_ui = require("radix-ui");
52
+ var import_react2 = require("react");
53
+ var import_jsx_runtime = require("react/jsx-runtime");
54
+ var Slottable = import_radix_ui.Slot.Slottable;
55
+ var Slot = ({ ref, ...props }) => {
56
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
57
+ };
58
+
59
+ // src/visually-hidden/VisuallyHidden.tsx
60
+ var import_jsx_runtime2 = require("react/jsx-runtime");
61
+ var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
62
+ const Component = asChild ? Slot : "span";
63
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
64
+ Component,
65
+ {
66
+ ...props,
67
+ ref,
68
+ style: {
69
+ // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
70
+ position: "absolute",
71
+ border: 0,
72
+ width: 1,
73
+ height: 1,
74
+ padding: 0,
75
+ margin: -1,
76
+ overflow: "hidden",
77
+ clip: "rect(0, 0, 0, 0)",
78
+ whiteSpace: "nowrap",
79
+ wordWrap: "normal",
80
+ ...props.style
81
+ }
82
+ }
83
+ );
84
+ };
85
+ VisuallyHidden.displayName = "VisuallyHidden";
86
+
87
+ // src/icon/Icon.styles.tsx
88
+ var import_internal_utils = require("@spark-ui/internal-utils");
89
+ var import_class_variance_authority = require("class-variance-authority");
90
+ var iconStyles = (0, import_class_variance_authority.cva)(["fill-current shrink-0"], {
91
+ variants: {
92
+ /**
93
+ * Color scheme of the icon.
94
+ */
95
+ intent: (0, import_internal_utils.makeVariants)({
96
+ current: ["text-current"],
97
+ main: ["text-main"],
98
+ support: ["text-support"],
99
+ accent: ["text-accent"],
100
+ basic: ["text-basic"],
101
+ success: ["text-success"],
102
+ alert: ["text-alert"],
103
+ error: ["text-error"],
104
+ info: ["text-info"],
105
+ neutral: ["text-neutral"]
106
+ }),
107
+ /**
108
+ * Sets the size of the icon.
109
+ */
110
+ size: (0, import_internal_utils.makeVariants)({
111
+ current: ["u-current-font-size"],
112
+ sm: ["w-sz-16", "h-sz-16"],
113
+ md: ["w-sz-24", "h-sz-24"],
114
+ lg: ["w-sz-32", "h-sz-32"],
115
+ xl: ["w-sz-40", "h-sz-40"]
116
+ })
117
+ }
118
+ });
119
+
120
+ // src/icon/Icon.tsx
121
+ var import_jsx_runtime3 = require("react/jsx-runtime");
122
+ var Icon = ({
123
+ label,
124
+ className,
125
+ size = "current",
126
+ intent = "current",
127
+ children,
128
+ ...others
129
+ }) => {
130
+ const child = import_react3.Children.only(children);
131
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
132
+ (0, import_react3.cloneElement)(child, {
133
+ className: iconStyles({ className, size, intent }),
134
+ "data-spark-component": "icon",
135
+ "aria-hidden": "true",
136
+ focusable: "false",
137
+ ...others
138
+ }),
139
+ label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
140
+ ] });
141
+ };
142
+ Icon.displayName = "Icon";
143
+
144
+ // src/checkbox/CheckboxIndicator.tsx
145
+ var import_radix_ui2 = require("radix-ui");
146
+ var import_jsx_runtime4 = require("react/jsx-runtime");
147
+ var CheckboxIndicatorPrimitive = import_radix_ui2.Checkbox.CheckboxIndicator;
148
+ var CheckboxIndicator = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxIndicatorPrimitive, { className: "flex size-full items-center justify-center", ...props });
149
+ CheckboxIndicator.displayName = "CheckboxIndicator";
150
+
151
+ // src/checkbox/CheckboxInput.styles.ts
152
+ var import_internal_utils2 = require("@spark-ui/internal-utils");
153
+ var import_class_variance_authority2 = require("class-variance-authority");
154
+ var checkboxInputStyles = (0, import_class_variance_authority2.cva)(
155
+ [
156
+ "size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent",
157
+ "disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0",
158
+ "focus-visible:u-outline",
159
+ "hover:ring-4 hover:cursor-pointer",
160
+ "u-shadow-border-transition"
161
+ ],
162
+ {
163
+ variants: {
164
+ /**
165
+ * Color scheme of the checkbox.
166
+ */
167
+ intent: (0, import_internal_utils2.makeVariants)({
168
+ main: [
169
+ "text-on-main",
170
+ "hover:ring-main-container",
171
+ "data-[state=unchecked]:border-outline",
172
+ "data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main",
173
+ "data-[state=checked]:border-main data-[state=checked]:bg-main"
174
+ ],
175
+ support: [
176
+ "text-on-support",
177
+ "hover:ring-support-container",
178
+ "data-[state=unchecked]:border-outline",
179
+ "data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support",
180
+ "data-[state=checked]:border-support data-[state=checked]:bg-support"
181
+ ],
182
+ accent: [
183
+ "text-on-accent",
184
+ "hover:ring-accent-container",
185
+ "data-[state=unchecked]:border-outline",
186
+ "data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent",
187
+ "data-[state=checked]:border-accent data-[state=checked]:bg-accent"
188
+ ],
189
+ basic: [
190
+ "text-on-basic",
191
+ "hover:ring-basic-container",
192
+ "data-[state=unchecked]:border-outline",
193
+ "data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic",
194
+ "data-[state=checked]:border-basic data-[state=checked]:bg-basic"
195
+ ],
196
+ success: [
197
+ "text-on-success",
198
+ "hover:ring-success-container",
199
+ "data-[state=unchecked]:border-success",
200
+ "data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success",
201
+ "data-[state=checked]:border-success data-[state=checked]:bg-success"
202
+ ],
203
+ alert: [
204
+ "text-on-alert",
205
+ "hover:ring-alert-container",
206
+ "data-[state=unchecked]:border-alert",
207
+ "data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert",
208
+ "data-[state=checked]:border-alert data-[state=checked]:bg-alert"
209
+ ],
210
+ error: [
211
+ "text-on-error",
212
+ "hover:ring-error-container",
213
+ "data-[state=unchecked]:border-error",
214
+ "data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error",
215
+ "data-[state=checked]:border-error data-[state=checked]:bg-error"
216
+ ],
217
+ info: [
218
+ "text-on-info",
219
+ "hover:ring-info-container",
220
+ "data-[state=unchecked]:border-info",
221
+ "data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info",
222
+ "data-[state=checked]:border-info data-[state=checked]:bg-info"
223
+ ],
224
+ neutral: [
225
+ "text-on-neutral",
226
+ "hover:ring-neutral-container",
227
+ "data-[state=unchecked]:border-outline",
228
+ "data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral",
229
+ "data-[state=checked]:border-neutral data-[state=checked]:bg-neutral"
230
+ ]
231
+ })
232
+ },
233
+ defaultVariants: {
234
+ intent: "basic"
235
+ }
236
+ }
237
+ );
238
+
239
+ // src/checkbox/CheckboxInput.tsx
240
+ var import_jsx_runtime5 = require("react/jsx-runtime");
241
+ var CheckboxPrimitive = import_radix_ui3.Checkbox.Checkbox;
242
+ var CheckboxInput = ({
243
+ className,
244
+ icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Check.Check, {}),
245
+ indeterminateIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Minus.Minus, {}),
246
+ intent,
247
+ checked,
248
+ ref,
249
+ ...others
250
+ }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
251
+ CheckboxPrimitive,
252
+ {
253
+ ref,
254
+ className: checkboxInputStyles({ intent, className }),
255
+ checked,
256
+ ...others,
257
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: "sm", children: checked === "indeterminate" ? indeterminateIcon : icon }) })
258
+ }
259
+ );
260
+ CheckboxInput.displayName = "CheckboxInput";
261
+
262
+ // src/label/Label.tsx
263
+ var import_class_variance_authority3 = require("class-variance-authority");
264
+ var import_radix_ui4 = require("radix-ui");
265
+ var import_jsx_runtime6 = require("react/jsx-runtime");
266
+ var Label = ({ className, ref, ...others }) => {
267
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
268
+ import_radix_ui4.Label.Label,
269
+ {
270
+ ref,
271
+ "data-spark-component": "label",
272
+ className: (0, import_class_variance_authority3.cx)("text-body-1", className),
273
+ ...others
274
+ }
275
+ );
276
+ };
277
+ Label.displayName = "Label";
278
+
279
+ // src/label/LabelRequiredIndicator.tsx
280
+ var import_class_variance_authority4 = require("class-variance-authority");
281
+ var import_jsx_runtime7 = require("react/jsx-runtime");
282
+ var LabelRequiredIndicator = ({
283
+ className,
284
+ children = "*",
285
+ ref,
286
+ ...others
287
+ }) => {
288
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
289
+ "span",
290
+ {
291
+ ref,
292
+ "data-spark-component": "label-required-indicator",
293
+ role: "presentation",
294
+ "aria-hidden": "true",
295
+ className: (0, import_class_variance_authority4.cx)(className, "text-caption text-on-surface/dim-1"),
296
+ ...others,
297
+ children
298
+ }
299
+ );
300
+ };
301
+ LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
302
+
303
+ // src/label/index.ts
304
+ var Label2 = Object.assign(Label, {
305
+ RequiredIndicator: LabelRequiredIndicator
306
+ });
307
+ Label2.displayName = "Label";
308
+ LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
309
+
310
+ // src/checkbox/CheckboxLabel.styles.ts
311
+ var import_class_variance_authority5 = require("class-variance-authority");
312
+ var labelStyles = (0, import_class_variance_authority5.cva)("grow", {
313
+ variants: {
314
+ disabled: {
315
+ true: ["text-neutral/dim-2", "cursor-not-allowed"],
316
+ false: ["cursor-pointer"]
317
+ }
318
+ },
319
+ defaultVariants: {
320
+ disabled: false
321
+ }
322
+ });
323
+
324
+ // src/checkbox/CheckboxLabel.tsx
325
+ var import_jsx_runtime8 = require("react/jsx-runtime");
326
+ var CheckboxLabel = ({ disabled, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label2, { className: labelStyles({ disabled }), ...others });
327
+ CheckboxLabel.displayName = "CheckboxLabel";
328
+
329
+ // src/checkbox/Checkbox.tsx
330
+ var import_jsx_runtime9 = require("react/jsx-runtime");
331
+ var ID_PREFIX = ":checkbox";
332
+ var Checkbox3 = ({
333
+ id: idProp,
334
+ className,
335
+ intent: intentProp,
336
+ checked: checkedProp,
337
+ value,
338
+ disabled,
339
+ reverse = false,
340
+ onCheckedChange,
341
+ children,
342
+ ref: forwardedRef,
343
+ ...others
344
+ }) => {
345
+ const checkboxId = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
346
+ const innerId = idProp || checkboxId;
347
+ const innerLabelId = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
348
+ const field = (0, import_form_field.useFormFieldControl)();
349
+ const group = useCheckboxGroup();
350
+ const rootRef = (0, import_react4.useRef)(null);
351
+ const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, rootRef);
352
+ const getCheckboxAttributes = ({
353
+ fieldState,
354
+ groupState,
355
+ checkboxIntent
356
+ }) => {
357
+ const name2 = fieldState.name ?? groupState.name;
358
+ const isRequired2 = fieldState.isRequired ?? groupState.isRequired;
359
+ const state = fieldState.state ?? groupState.state;
360
+ const isInvalid2 = fieldState.isInvalid ?? groupState.isInvalid;
361
+ const isFieldEnclosed = fieldState.id !== groupState.id;
362
+ const id2 = isFieldEnclosed ? fieldState.id : void 0;
363
+ const description2 = isFieldEnclosed ? fieldState.description : void 0;
364
+ const intent2 = state ?? checkboxIntent ?? groupState.intent;
365
+ return { name: name2, isRequired: isRequired2, isInvalid: isInvalid2, id: id2, description: description2, intent: intent2 };
366
+ };
367
+ const checked = value ? group.value?.includes(value) : checkedProp;
368
+ const handleCheckedChange = (isChecked) => {
369
+ onCheckedChange?.(isChecked);
370
+ const rootRefValue = rootRef.current?.value;
371
+ if (rootRefValue && group.onCheckedChange) {
372
+ group.onCheckedChange(isChecked, rootRefValue);
373
+ }
374
+ };
375
+ const {
376
+ id,
377
+ name,
378
+ isInvalid,
379
+ description,
380
+ intent,
381
+ isRequired: isRequiredAttr
382
+ } = getCheckboxAttributes({
383
+ fieldState: field,
384
+ groupState: group,
385
+ checkboxIntent: intentProp
386
+ });
387
+ const isRequired = (0, import_react4.useMemo)(() => {
388
+ if (!group) return isRequiredAttr;
389
+ return isRequiredAttr ? !group.value?.length : false;
390
+ }, [group, isRequiredAttr]);
391
+ const checkboxLabel = children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxLabel, { disabled, htmlFor: id || innerId, id: innerLabelId, children });
392
+ const checkboxInput = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
393
+ CheckboxInput,
394
+ {
395
+ ref,
396
+ id: id || innerId,
397
+ name,
398
+ value,
399
+ intent,
400
+ checked,
401
+ disabled,
402
+ required: isRequired,
403
+ "aria-describedby": description,
404
+ "aria-invalid": isInvalid,
405
+ onCheckedChange: handleCheckedChange,
406
+ "aria-labelledby": children ? innerLabelId : field.labelId,
407
+ ...others
408
+ }
409
+ );
410
+ const content = group.reverse || reverse ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
411
+ checkboxLabel,
412
+ checkboxInput
413
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
414
+ checkboxInput,
415
+ checkboxLabel
416
+ ] });
417
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
418
+ "div",
419
+ {
420
+ "data-spark-component": "checkbox",
421
+ className: (0, import_class_variance_authority6.cx)("gap-md text-body-1 relative flex items-start", className),
422
+ children: content
423
+ }
424
+ );
425
+ };
426
+ Checkbox3.displayName = "Checkbox";
427
+
428
+ // src/checkbox/CheckboxGroup.tsx
429
+ var import_form_field2 = require("@spark-ui/components/form-field");
430
+ var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
431
+ var import_react5 = require("react");
432
+
433
+ // src/checkbox/CheckboxGroup.styles.ts
434
+ var import_class_variance_authority7 = require("class-variance-authority");
435
+ var checkboxGroupStyles = (0, import_class_variance_authority7.cva)(["flex"], {
436
+ variants: {
437
+ /**
438
+ * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.
439
+ */
440
+ orientation: {
441
+ vertical: ["flex-col", "gap-lg"],
442
+ horizontal: ["gap-xl"]
443
+ }
444
+ }
445
+ });
446
+
447
+ // src/checkbox/CheckboxGroup.tsx
448
+ var import_jsx_runtime10 = require("react/jsx-runtime");
449
+ var CheckboxGroup = ({
450
+ name: nameProp,
451
+ value: valueProp,
452
+ defaultValue,
453
+ className,
454
+ intent,
455
+ orientation = "vertical",
456
+ onCheckedChange: onCheckedChangeProp,
457
+ reverse = false,
458
+ children,
459
+ ref,
460
+ ...others
461
+ }) => {
462
+ const [value, setValue] = (0, import_use_combined_state.useCombinedState)(valueProp, defaultValue);
463
+ const field = (0, import_form_field2.useFormFieldControl)();
464
+ const onCheckedChangeRef = (0, import_react5.useRef)(onCheckedChangeProp);
465
+ const { id, labelId, description, state, isInvalid, isRequired } = field;
466
+ const name = nameProp ?? field.name;
467
+ const current = (0, import_react5.useMemo)(() => {
468
+ const handleCheckedChange = (checked, changed) => {
469
+ const values = value || [];
470
+ const modified = checked ? [...values, changed] : values.filter((val) => val !== changed);
471
+ setValue(modified);
472
+ if (onCheckedChangeRef.current) {
473
+ onCheckedChangeRef.current(modified);
474
+ }
475
+ };
476
+ return {
477
+ id,
478
+ name,
479
+ value,
480
+ intent,
481
+ state,
482
+ isInvalid,
483
+ description,
484
+ isRequired,
485
+ reverse,
486
+ onCheckedChange: handleCheckedChange
487
+ };
488
+ }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse]);
489
+ (0, import_react5.useEffect)(() => {
490
+ onCheckedChangeRef.current = onCheckedChangeProp;
491
+ }, [onCheckedChangeProp]);
492
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
493
+ "div",
494
+ {
495
+ ref,
496
+ className: checkboxGroupStyles({ className, orientation }),
497
+ role: "group",
498
+ "aria-labelledby": labelId,
499
+ "aria-describedby": description,
500
+ ...others,
501
+ children
502
+ }
503
+ ) });
504
+ };
505
+ CheckboxGroup.displayName = "CheckboxGroup";
506
+ // Annotate the CommonJS export names for ESM import in node:
507
+ 0 && (module.exports = {
508
+ Checkbox,
509
+ CheckboxGroup
510
+ });
511
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/checkbox/index.ts","../../src/checkbox/Checkbox.tsx","../../src/checkbox/CheckboxGroupContext.tsx","../../src/checkbox/CheckboxInput.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/checkbox/CheckboxIndicator.tsx","../../src/checkbox/CheckboxInput.styles.ts","../../src/label/Label.tsx","../../src/label/LabelRequiredIndicator.tsx","../../src/label/index.ts","../../src/checkbox/CheckboxLabel.styles.ts","../../src/checkbox/CheckboxLabel.tsx","../../src/checkbox/CheckboxGroup.tsx","../../src/checkbox/CheckboxGroup.styles.ts"],"sourcesContent":["export * from './Checkbox'\nexport * from './CheckboxGroup'\n","/* eslint-disable complexity */\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n Pick<CheckboxGroupContextState, 'reverse'> & {\n ref?: Ref<HTMLButtonElement>\n }\n\nconst ID_PREFIX = ':checkbox'\n\nexport const Checkbox = ({\n id: idProp,\n className,\n intent: intentProp,\n checked: checkedProp,\n value,\n disabled,\n reverse = false,\n onCheckedChange,\n children,\n ref: forwardedRef,\n ...others\n}: CheckboxProps) => {\n const checkboxId = `${ID_PREFIX}-${useId()}`\n const innerId = idProp || checkboxId\n\n const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n const field = useFormFieldControl()\n const group = useCheckboxGroup()\n\n const rootRef = useRef<HTMLButtonElement | undefined>(null)\n const ref = useMergeRefs(forwardedRef, rootRef)\n\n const getCheckboxAttributes = ({\n fieldState,\n groupState,\n checkboxIntent,\n }: {\n fieldState: ReturnType<typeof useFormFieldControl>\n groupState: ReturnType<typeof useCheckboxGroup>\n checkboxIntent: CheckboxInputProps['intent']\n }) => {\n const name = fieldState.name ?? groupState.name\n const isRequired = fieldState.isRequired ?? groupState.isRequired\n const state = fieldState.state ?? groupState.state\n const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n const isFieldEnclosed = fieldState.id !== groupState.id\n const id = isFieldEnclosed ? fieldState.id : undefined\n const description = isFieldEnclosed ? fieldState.description : undefined\n\n const intent = state ?? checkboxIntent ?? groupState.intent\n\n return { name, isRequired, isInvalid, id, description, intent }\n }\n\n const checked = value ? group.value?.includes(value) : checkedProp\n\n const handleCheckedChange = (isChecked: boolean) => {\n onCheckedChange?.(isChecked)\n\n const rootRefValue = rootRef.current?.value\n if (rootRefValue && group.onCheckedChange) {\n group.onCheckedChange(isChecked, rootRefValue)\n }\n }\n\n const {\n id,\n name,\n isInvalid,\n description,\n intent,\n isRequired: isRequiredAttr,\n } = getCheckboxAttributes({\n fieldState: field,\n groupState: group,\n checkboxIntent: intentProp,\n })\n\n const isRequired = useMemo(() => {\n if (!group) return isRequiredAttr\n\n return isRequiredAttr ? !group.value?.length : false\n }, [group, isRequiredAttr])\n\n const checkboxLabel = children && (\n <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n {children}\n </CheckboxLabel>\n )\n\n const checkboxInput = (\n <CheckboxInput\n ref={ref}\n id={id || innerId}\n name={name}\n value={value}\n intent={intent}\n checked={checked}\n disabled={disabled}\n required={isRequired}\n aria-describedby={description}\n aria-invalid={isInvalid}\n onCheckedChange={handleCheckedChange}\n aria-labelledby={children ? innerLabelId : field.labelId}\n {...others}\n />\n )\n\n const content =\n group.reverse || reverse ? (\n <>\n {checkboxLabel}\n {checkboxInput}\n </>\n ) : (\n <>\n {checkboxInput}\n {checkboxLabel}\n </>\n )\n\n return (\n <div\n data-spark-component=\"checkbox\"\n className={cx('gap-md text-body-1 relative flex items-start', className)}\n >\n {content}\n </div>\n )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n /**\n * The id of the checkbox group.\n */\n id: string\n /**\n * The name of the group. Submitted with its owning form as part of a name/value pair.\n */\n name?: string\n /**\n * The value of the checkbox group.\n */\n value?: string[]\n /**\n * A set of ids separated by a space used to describe the input component given by a set of messages.\n */\n description?: string\n /**\n * The validation state of the checkbox group.\n */\n state?: 'error' | 'success' | 'alert'\n /**\n * If true, the checkbox group will be invalid.\n */\n isInvalid?: boolean\n /**\n * If true, the checkbox group will be required.\n */\n isRequired?: boolean\n /**\n * Callback used to update or notify the value of the checkbox group.\n */\n onCheckedChange?: (checked: boolean, changed: string) => void\n /**\n * When true, the label will be placed on the left side of the Checkbox\n */\n reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n const context = useContext(CheckboxGroupContext)\n\n return context\n}\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n extends CheckboxInputStylesProps,\n Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n /**\n * The checked icon to use.\n */\n icon?: ReactNode\n /**\n * The indeterminate icon to use.\n */\n indeterminateIcon?: ReactNode\n /**\n * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n */\n defaultChecked?: boolean\n /**\n * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n */\n checked?: CheckedStatus\n /**\n * When true, prevents the user from interacting with the checkbox.\n */\n disabled?: boolean\n /**\n * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n */\n required?: boolean\n /**\n * The name of the checkbox. Submitted with its owning form as part of a name/value pair.\n */\n name?: string\n /**\n * The value given as data when submitted with a name.\n */\n value?: string\n /**\n * Event handler called when the checked state of the checkbox changes.\n */\n onCheckedChange?: (checked: boolean) => void\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n className,\n icon = <Check />,\n indeterminateIcon = <Minus />,\n intent,\n checked,\n ref,\n ...others\n}: CheckboxInputProps) => (\n <CheckboxPrimitive\n ref={ref}\n className={checkboxInputStyles({ intent, className })}\n checked={checked}\n {...others}\n >\n <CheckboxIndicator>\n <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n </CheckboxIndicator>\n </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n /**\n * The svg icon that will be wrapped\n */\n children: ReactNode\n /**\n * The accessible label for the icon. This label will be visually hidden but announced to screen\n * reader users, similar to `alt` text for `img` tags.\n */\n label?: string\n}\n\nexport const Icon = ({\n label,\n className,\n size = 'current',\n intent = 'current',\n children,\n ...others\n}: IconProps) => {\n const child = Children.only(children)\n\n return (\n <>\n {cloneElement(child as ReactElement<Record<string, any>>, {\n className: iconStyles({ className, size, intent }),\n 'data-spark-component': 'icon',\n 'aria-hidden': 'true',\n focusable: 'false',\n ...others,\n })}\n\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </>\n )\n}\n\nIcon.displayName = 'Icon'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n asChild: boolean | undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n variants: {\n /**\n * Color scheme of the icon.\n */\n intent: makeVariants<\n 'intent',\n [\n 'current',\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'error',\n 'info',\n 'neutral',\n ]\n >({\n current: ['text-current'],\n main: ['text-main'],\n support: ['text-support'],\n accent: ['text-accent'],\n basic: ['text-basic'],\n success: ['text-success'],\n alert: ['text-alert'],\n error: ['text-error'],\n info: ['text-info'],\n neutral: ['text-neutral'],\n }),\n /**\n * Sets the size of the icon.\n */\n size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n current: ['u-current-font-size'],\n sm: ['w-sz-16', 'h-sz-16'],\n md: ['w-sz-24', 'h-sz-24'],\n lg: ['w-sz-32', 'h-sz-32'],\n xl: ['w-sz-40', 'h-sz-40'],\n }),\n },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n [\n 'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n 'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n 'focus-visible:u-outline',\n 'hover:ring-4 hover:cursor-pointer',\n 'u-shadow-border-transition',\n ],\n {\n variants: {\n /**\n * Color scheme of the checkbox.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n >({\n main: [\n 'text-on-main',\n 'hover:ring-main-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n 'data-[state=checked]:border-main data-[state=checked]:bg-main',\n ],\n support: [\n 'text-on-support',\n 'hover:ring-support-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n 'data-[state=checked]:border-support data-[state=checked]:bg-support',\n ],\n accent: [\n 'text-on-accent',\n 'hover:ring-accent-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n 'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n ],\n basic: [\n 'text-on-basic',\n 'hover:ring-basic-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic',\n 'data-[state=checked]:border-basic data-[state=checked]:bg-basic',\n ],\n success: [\n 'text-on-success',\n 'hover:ring-success-container',\n 'data-[state=unchecked]:border-success',\n 'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n 'data-[state=checked]:border-success data-[state=checked]:bg-success',\n ],\n alert: [\n 'text-on-alert',\n 'hover:ring-alert-container',\n 'data-[state=unchecked]:border-alert',\n 'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n 'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n ],\n error: [\n 'text-on-error',\n 'hover:ring-error-container',\n 'data-[state=unchecked]:border-error',\n 'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n 'data-[state=checked]:border-error data-[state=checked]:bg-error',\n ],\n info: [\n 'text-on-info',\n 'hover:ring-info-container',\n 'data-[state=unchecked]:border-info',\n 'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n 'data-[state=checked]:border-info data-[state=checked]:bg-info',\n ],\n neutral: [\n 'text-on-neutral',\n 'hover:ring-neutral-container',\n 'data-[state=unchecked]:border-outline',\n 'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n 'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n ],\n }),\n },\n defaultVariants: {\n intent: 'basic',\n },\n }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { cx } from 'class-variance-authority'\nimport { Label as RadixLabel } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type LabelProps = RadixLabel.LabelProps & {\n ref?: Ref<HTMLLabelElement>\n}\n\nexport const Label = ({ className, ref, ...others }: LabelProps) => {\n return (\n <RadixLabel.Label\n ref={ref}\n data-spark-component=\"label\"\n className={cx('text-body-1', className)}\n {...others}\n />\n )\n}\n\nLabel.displayName = 'Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nexport type LabelRequiredIndicatorProps = ComponentPropsWithRef<'span'>\n\nexport const LabelRequiredIndicator = ({\n className,\n children = '*',\n ref,\n ...others\n}: LabelRequiredIndicatorProps) => {\n return (\n <span\n ref={ref}\n data-spark-component=\"label-required-indicator\"\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cx(className, 'text-caption text-on-surface/dim-1')}\n {...others}\n >\n {children}\n </span>\n )\n}\n\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n","import { Label as Root } from './Label'\nimport { LabelRequiredIndicator } from './LabelRequiredIndicator'\n\nexport const Label: typeof Root & {\n RequiredIndicator: typeof LabelRequiredIndicator\n} = Object.assign(Root, {\n RequiredIndicator: LabelRequiredIndicator,\n})\n\nLabel.displayName = 'Label'\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n\nexport type { LabelProps } from './Label'\nexport type { LabelRequiredIndicatorProps } from './LabelRequiredIndicator'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\n variants: {\n disabled: {\n true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n false: ['cursor-pointer'],\n },\n },\n defaultVariants: {\n disabled: false,\n },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n /**\n * When true, prevents the user from interacting with the checkbox item.\n */\n disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n CheckboxGroupStylesProps,\n Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n /**\n * The initial value of the checkbox group\n */\n defaultValue?: string[]\n /**\n * The callback fired when any children Checkbox is checked or unchecked\n */\n onCheckedChange?: (value: string[]) => void\n ref?: Ref<HTMLDivElement>\n}\n\nexport const CheckboxGroup = ({\n name: nameProp,\n value: valueProp,\n defaultValue,\n className,\n intent,\n orientation = 'vertical',\n onCheckedChange: onCheckedChangeProp,\n reverse = false,\n children,\n ref,\n ...others\n}: CheckboxGroupProps) => {\n const [value, setValue] = useCombinedState(valueProp, defaultValue)\n const field = useFormFieldControl()\n const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n const { id, labelId, description, state, isInvalid, isRequired } = field\n const name = nameProp ?? field.name\n\n const current = useMemo(() => {\n const handleCheckedChange = (checked: boolean, changed: string) => {\n const values = value || []\n const modified = checked ? [...values, changed] : values.filter(val => val !== changed)\n\n setValue(modified)\n\n if (onCheckedChangeRef.current) {\n onCheckedChangeRef.current(modified)\n }\n }\n\n return {\n id,\n name,\n value,\n intent,\n state,\n isInvalid,\n description,\n isRequired,\n reverse,\n onCheckedChange: handleCheckedChange,\n }\n }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n useEffect(() => {\n onCheckedChangeRef.current = onCheckedChangeProp\n }, [onCheckedChangeProp])\n\n return (\n <CheckboxGroupContext.Provider value={current}>\n <div\n ref={ref}\n className={checkboxGroupStyles({ className, orientation })}\n role=\"group\"\n aria-labelledby={labelId}\n aria-describedby={description}\n {...others}\n >\n {children}\n </div>\n </CheckboxGroupContext.Provider>\n )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n variants: {\n /**\n * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n */\n orientation: {\n vertical: ['flex-col', 'gap-lg'],\n horizontal: ['gap-xl'],\n },\n },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n"],"mappings":"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","names":["Checkbox","import_class_variance_authority","import_react","import_radix_ui","import_react","import_react","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_radix_ui","import_jsx_runtime","import_internal_utils","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_radix_ui","import_jsx_runtime","RadixLabel","import_class_variance_authority","import_jsx_runtime","Label","import_class_variance_authority","import_jsx_runtime","Label","import_jsx_runtime","Checkbox","name","isRequired","isInvalid","id","description","intent","import_form_field","import_react","import_class_variance_authority","import_jsx_runtime"]}