@spark-ui/components 17.2.3 → 17.2.4-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DialogContent.styles-BSxCCi-u.mjs +62 -0
- package/dist/DialogContent.styles-BSxCCi-u.mjs.map +1 -0
- package/dist/DialogContent.styles-CAhJtUud.js +2 -0
- package/dist/DialogContent.styles-CAhJtUud.js.map +1 -0
- package/dist/FormFieldRequiredIndicator-CtgkvPZo.js +2 -0
- package/dist/FormFieldRequiredIndicator-CtgkvPZo.js.map +1 -0
- package/dist/FormFieldRequiredIndicator-DOGQ_HxO.mjs +14 -0
- package/dist/FormFieldRequiredIndicator-DOGQ_HxO.mjs.map +1 -0
- package/dist/accordion/index.js +2 -2
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +99 -161
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert-dialog/index.js +2 -2
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs +169 -235
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/avatar/index.js +2 -2
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +187 -224
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/badge/index.js +2 -2
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +115 -81
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.js +2 -2
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs +73 -106
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button/index.js +1 -2
- package/dist/button/index.mjs +2 -5
- package/dist/button-BTDRzvpB.js +2 -0
- package/dist/button-BTDRzvpB.js.map +1 -0
- package/dist/button-_YZ_4J42.mjs +643 -0
- package/dist/button-_YZ_4J42.mjs.map +1 -0
- package/dist/card/index.js +2 -2
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +327 -394
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js +2 -2
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +515 -618
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox/index.js +2 -2
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs +213 -246
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/chip/index.js +2 -2
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +601 -652
- package/dist/chip/index.mjs.map +1 -1
- package/dist/chunk-C91j1N6u.js +1 -0
- package/dist/circular-meter/index.js +2 -2
- package/dist/circular-meter/index.js.map +1 -1
- package/dist/circular-meter/index.mjs +354 -309
- package/dist/circular-meter/index.mjs.map +1 -1
- package/dist/collapsible/index.js +2 -2
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs +53 -53
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/combobox/index.js +2 -2
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +721 -876
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dialog/index.js +2 -2
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs +181 -206
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/divider/index.js +2 -2
- package/dist/divider/index.js.map +1 -1
- package/dist/divider/index.mjs +178 -183
- package/dist/divider/index.mjs.map +1 -1
- package/dist/drawer/index.js +2 -2
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs +277 -309
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown/index.js +2 -2
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs +429 -492
- package/dist/dropdown/index.mjs.map +1 -1
- package/dist/file-upload/index.js +2 -2
- package/dist/file-upload/index.js.map +1 -1
- package/dist/file-upload/index.mjs +540 -677
- package/dist/file-upload/index.mjs.map +1 -1
- package/dist/form-field/index.js +1 -2
- package/dist/form-field/index.mjs +2 -284
- package/dist/form-field-B8QzM655.mjs +231 -0
- package/dist/form-field-B8QzM655.mjs.map +1 -0
- package/dist/form-field-Bu_0E9tb.js +2 -0
- package/dist/form-field-Bu_0E9tb.js.map +1 -0
- package/dist/icon/index.js +1 -2
- package/dist/icon/index.mjs +2 -5
- package/dist/icon-CRPcdgYp.js +2 -0
- package/dist/icon-CRPcdgYp.js.map +1 -0
- package/dist/icon-D05Uqh8_.mjs +41 -0
- package/dist/icon-D05Uqh8_.mjs.map +1 -0
- package/dist/icon-button/index.js +1 -2
- package/dist/icon-button/index.mjs +2 -5
- package/dist/icon-button-6p3O7NIm.mjs +28 -0
- package/dist/icon-button-6p3O7NIm.mjs.map +1 -0
- package/dist/icon-button-CykysbgJ.js +2 -0
- package/dist/icon-button-CykysbgJ.js.map +1 -0
- package/dist/input/index.js +1 -2
- package/dist/input/index.mjs +2 -455
- package/dist/input-CmYeHYWQ.mjs +355 -0
- package/dist/input-CmYeHYWQ.mjs.map +1 -0
- package/dist/input-DNr40G2Z.js +2 -0
- package/dist/input-DNr40G2Z.js.map +1 -0
- package/dist/input-otp/index.js +2 -2
- package/dist/input-otp/index.js.map +1 -1
- package/dist/input-otp/index.mjs +344 -407
- package/dist/input-otp/index.mjs.map +1 -1
- package/dist/kbd/index.js +2 -2
- package/dist/kbd/index.js.map +1 -1
- package/dist/kbd/index.mjs +12 -17
- package/dist/kbd/index.mjs.map +1 -1
- package/dist/label/index.js +1 -2
- package/dist/label/index.mjs +2 -40
- package/dist/label-BqRlrca0.mjs +31 -0
- package/dist/label-BqRlrca0.mjs.map +1 -0
- package/dist/label-DU0p0d-f.js +2 -0
- package/dist/label-DU0p0d-f.js.map +1 -0
- package/dist/link-box/index.js +2 -2
- package/dist/link-box/index.js.map +1 -1
- package/dist/link-box/index.mjs +36 -34
- package/dist/link-box/index.mjs.map +1 -1
- package/dist/meter/index.js +2 -2
- package/dist/meter/index.js.map +1 -1
- package/dist/meter/index.mjs +149 -171
- package/dist/meter/index.mjs.map +1 -1
- package/dist/pagination/index.js +2 -2
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +253 -214
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover/index.js +1 -2
- package/dist/popover/index.mjs +2 -239
- package/dist/popover-CxZAQmw6.mjs +211 -0
- package/dist/popover-CxZAQmw6.mjs.map +1 -0
- package/dist/popover-GOovJ27J.js +2 -0
- package/dist/popover-GOovJ27J.js.map +1 -0
- package/dist/portal/index.js +2 -2
- package/dist/portal/index.js.map +1 -1
- package/dist/portal/index.mjs +8 -7
- package/dist/portal/index.mjs.map +1 -1
- package/dist/progress/index.js +1 -2
- package/dist/progress/index.mjs +2 -178
- package/dist/progress-cEf3tFbn.mjs +132 -0
- package/dist/progress-cEf3tFbn.mjs.map +1 -0
- package/dist/progress-rJZcPJsZ.js +2 -0
- package/dist/progress-rJZcPJsZ.js.map +1 -0
- package/dist/progress-tracker/index.js +2 -2
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs +303 -380
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/radio-group/index.js +2 -2
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs +204 -213
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/rating/index.js +2 -2
- package/dist/rating/index.js.map +1 -1
- package/dist/rating/index.mjs +189 -244
- package/dist/rating/index.mjs.map +1 -1
- package/dist/rating-display/index.js +2 -2
- package/dist/rating-display/index.js.map +1 -1
- package/dist/rating-display/index.mjs +165 -166
- package/dist/rating-display/index.mjs.map +1 -1
- package/dist/scrolling-list/index.js +2 -2
- package/dist/scrolling-list/index.js.map +1 -1
- package/dist/scrolling-list/index.mjs +216 -273
- package/dist/scrolling-list/index.mjs.map +1 -1
- package/dist/segmented-control/index.js +2 -2
- package/dist/segmented-control/index.js.map +1 -1
- package/dist/segmented-control/index.mjs +146 -180
- package/dist/segmented-control/index.mjs.map +1 -1
- package/dist/segmented-gauge/index.js +2 -2
- package/dist/segmented-gauge/index.js.map +1 -1
- package/dist/segmented-gauge/index.mjs +146 -195
- package/dist/segmented-gauge/index.mjs.map +1 -1
- package/dist/select/index.js +2 -2
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +279 -327
- package/dist/select/index.mjs.map +1 -1
- package/dist/skeleton/index.js +2 -2
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs +92 -114
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.js +2 -2
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs +259 -326
- package/dist/slider/index.mjs.map +1 -1
- package/dist/slot/index.js +2 -2
- package/dist/slot/index.js.map +1 -1
- package/dist/slot/index.mjs +12 -7
- package/dist/slot/index.mjs.map +1 -1
- package/dist/snackbar/index.js +2 -2
- package/dist/snackbar/index.js.map +1 -1
- package/dist/snackbar/index.mjs +404 -529
- package/dist/snackbar/index.mjs.map +1 -1
- package/dist/spinner/index.js +1 -2
- package/dist/spinner/index.mjs +2 -5
- package/dist/spinner-DFUoYvmm.js +2 -0
- package/dist/spinner-DFUoYvmm.js.map +1 -0
- package/dist/spinner-DULLiM6a.mjs +56 -0
- package/dist/spinner-DULLiM6a.mjs.map +1 -0
- package/dist/src/avatar/index.d.mts +2 -2
- package/dist/src/avatar/index.d.ts +2 -2
- package/dist/src/file-upload/index.d.mts +1 -1
- package/dist/src/file-upload/index.d.ts +1 -1
- package/dist/stepper/index.js +2 -2
- package/dist/stepper/index.js.map +1 -1
- package/dist/stepper/index.mjs +139 -176
- package/dist/stepper/index.mjs.map +1 -1
- package/dist/switch/index.js +2 -2
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +194 -197
- package/dist/switch/index.mjs.map +1 -1
- package/dist/tabs/index.js +2 -2
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +337 -389
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tag/index.js +2 -2
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs +192 -211
- package/dist/tag/index.mjs.map +1 -1
- package/dist/text-link/index.js +2 -2
- package/dist/text-link/index.js.map +1 -1
- package/dist/text-link/index.mjs +44 -5
- package/dist/text-link/index.mjs.map +1 -1
- package/dist/textarea/index.js +2 -2
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +51 -50
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.js +2 -2
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +314 -367
- package/dist/toast/index.mjs.map +1 -1
- package/dist/useRenderSlot-DP4fYerF.mjs +11 -0
- package/dist/useRenderSlot-DP4fYerF.mjs.map +1 -0
- package/dist/useRenderSlot-Xxf_s88b.js +2 -0
- package/dist/useRenderSlot-Xxf_s88b.js.map +1 -0
- package/dist/visually-hidden/index.js +2 -2
- package/dist/visually-hidden/index.js.map +1 -1
- package/dist/visually-hidden/index.mjs +25 -5
- package/dist/visually-hidden/index.mjs.map +1 -1
- package/package.json +4 -4
- package/dist/Button-1M9DcZl0.mjs +0 -704
- package/dist/Button-1M9DcZl0.mjs.map +0 -1
- package/dist/Button-FZceRWG2.js +0 -2
- package/dist/Button-FZceRWG2.js.map +0 -1
- package/dist/DialogContent.styles-CziMQtYr.js +0 -2
- package/dist/DialogContent.styles-CziMQtYr.js.map +0 -1
- package/dist/DialogContent.styles-Du7_Dkde.mjs +0 -60
- package/dist/DialogContent.styles-Du7_Dkde.mjs.map +0 -1
- package/dist/FormFieldRequiredIndicator-CHfcoT2y.js +0 -2
- package/dist/FormFieldRequiredIndicator-CHfcoT2y.js.map +0 -1
- package/dist/FormFieldRequiredIndicator-DTnCGiX2.mjs +0 -13
- package/dist/FormFieldRequiredIndicator-DTnCGiX2.mjs.map +0 -1
- package/dist/Icon-BO327oHU.mjs +0 -57
- package/dist/Icon-BO327oHU.mjs.map +0 -1
- package/dist/Icon-C-cNTnzd.js +0 -2
- package/dist/Icon-C-cNTnzd.js.map +0 -1
- package/dist/IconButton-BR1bJSQA.js +0 -2
- package/dist/IconButton-BR1bJSQA.js.map +0 -1
- package/dist/IconButton-DdB3Pq13.mjs +0 -43
- package/dist/IconButton-DdB3Pq13.mjs.map +0 -1
- package/dist/Slot-DLY1rJrG.mjs +0 -14
- package/dist/Slot-DLY1rJrG.mjs.map +0 -1
- package/dist/Slot-DQ8z2zsy.js +0 -2
- package/dist/Slot-DQ8z2zsy.js.map +0 -1
- package/dist/Spinner-Br4Rp9V2.js +0 -2
- package/dist/Spinner-Br4Rp9V2.js.map +0 -1
- package/dist/Spinner-Co3AjkQV.mjs +0 -68
- package/dist/Spinner-Co3AjkQV.mjs.map +0 -1
- package/dist/TextLink-5MvP0P8D.js +0 -2
- package/dist/TextLink-5MvP0P8D.js.map +0 -1
- package/dist/TextLink-Cc_LeVcx.mjs +0 -57
- package/dist/TextLink-Cc_LeVcx.mjs.map +0 -1
- package/dist/VisuallyHidden-CB6Nx76j.js +0 -2
- package/dist/VisuallyHidden-CB6Nx76j.js.map +0 -1
- package/dist/VisuallyHidden-DjlV0-CW.mjs +0 -28
- package/dist/VisuallyHidden-DjlV0-CW.mjs.map +0 -1
- package/dist/button/index.js.map +0 -1
- package/dist/button/index.mjs.map +0 -1
- package/dist/form-field/index.js.map +0 -1
- package/dist/form-field/index.mjs.map +0 -1
- package/dist/icon/index.js.map +0 -1
- package/dist/icon/index.mjs.map +0 -1
- package/dist/icon-button/index.js.map +0 -1
- package/dist/icon-button/index.mjs.map +0 -1
- package/dist/input/index.js.map +0 -1
- package/dist/input/index.mjs.map +0 -1
- package/dist/label/index.js.map +0 -1
- package/dist/label/index.mjs.map +0 -1
- package/dist/popover/index.js.map +0 -1
- package/dist/popover/index.mjs.map +0 -1
- package/dist/progress/index.js.map +0 -1
- package/dist/progress/index.mjs.map +0 -1
- package/dist/spinner/index.js.map +0 -1
- package/dist/spinner/index.mjs.map +0 -1
- package/dist/useRenderSlot-Bta2kdp4.mjs +0 -10
- package/dist/useRenderSlot-Bta2kdp4.mjs.map +0 -1
- package/dist/useRenderSlot-DATwjgpo.js +0 -2
- package/dist/useRenderSlot-DATwjgpo.js.map +0 -1
package/dist/checkbox/index.mjs
CHANGED
|
@@ -1,249 +1,216 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import { useCombinedState as
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
})
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
true: ["text-neutral/dim-2", "cursor-not-allowed"],
|
|
114
|
-
false: ["cursor-pointer"]
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
defaultVariants: {
|
|
118
|
-
disabled: !1
|
|
119
|
-
}
|
|
120
|
-
}), O = ({ disabled: a, ...c }) => /* @__PURE__ */ e(ue, { className: xe({ disabled: a }), ...c });
|
|
1
|
+
import { t as e } from "../icon-D05Uqh8_.mjs";
|
|
2
|
+
import { t } from "../label-BqRlrca0.mjs";
|
|
3
|
+
import { cva as n, cx as r } from "class-variance-authority";
|
|
4
|
+
import { createContext as i, useContext as a, useEffect as o, useId as s, useMemo as c, useRef as l } from "react";
|
|
5
|
+
import { Checkbox as u } from "radix-ui";
|
|
6
|
+
import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
7
|
+
import { makeVariants as m } from "@spark-ui/internal-utils";
|
|
8
|
+
import { useMergeRefs as h } from "@spark-ui/hooks/use-merge-refs";
|
|
9
|
+
import { useFormFieldControl as g } from "@spark-ui/components/form-field";
|
|
10
|
+
import { Check as _ } from "@spark-ui/icons/Check";
|
|
11
|
+
import { Minus as v } from "@spark-ui/icons/Minus";
|
|
12
|
+
import { useCombinedState as y } from "@spark-ui/hooks/use-combined-state";
|
|
13
|
+
//#region src/checkbox/CheckboxGroupContext.tsx
|
|
14
|
+
var b = i({}), x = () => a(b), S = u.CheckboxIndicator, C = (e) => /* @__PURE__ */ f(S, {
|
|
15
|
+
className: "flex size-full items-center justify-center",
|
|
16
|
+
...e
|
|
17
|
+
});
|
|
18
|
+
C.displayName = "CheckboxIndicator";
|
|
19
|
+
//#endregion
|
|
20
|
+
//#region src/checkbox/CheckboxInput.styles.ts
|
|
21
|
+
var w = n([
|
|
22
|
+
"size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent",
|
|
23
|
+
"disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0",
|
|
24
|
+
"focus-visible:u-outline",
|
|
25
|
+
"hover:ring-4 hover:cursor-pointer",
|
|
26
|
+
"u-shadow-border-transition"
|
|
27
|
+
], {
|
|
28
|
+
variants: { intent: m({
|
|
29
|
+
main: [
|
|
30
|
+
"text-on-main",
|
|
31
|
+
"hover:ring-main-container",
|
|
32
|
+
"data-[state=unchecked]:border-outline",
|
|
33
|
+
"data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main",
|
|
34
|
+
"data-[state=checked]:border-main data-[state=checked]:bg-main"
|
|
35
|
+
],
|
|
36
|
+
support: [
|
|
37
|
+
"text-on-support",
|
|
38
|
+
"hover:ring-support-container",
|
|
39
|
+
"data-[state=unchecked]:border-outline",
|
|
40
|
+
"data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support",
|
|
41
|
+
"data-[state=checked]:border-support data-[state=checked]:bg-support"
|
|
42
|
+
],
|
|
43
|
+
accent: [
|
|
44
|
+
"text-on-accent",
|
|
45
|
+
"hover:ring-accent-container",
|
|
46
|
+
"data-[state=unchecked]:border-outline",
|
|
47
|
+
"data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent",
|
|
48
|
+
"data-[state=checked]:border-accent data-[state=checked]:bg-accent"
|
|
49
|
+
],
|
|
50
|
+
success: [
|
|
51
|
+
"text-on-success",
|
|
52
|
+
"hover:ring-success-container",
|
|
53
|
+
"data-[state=unchecked]:border-success",
|
|
54
|
+
"data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success",
|
|
55
|
+
"data-[state=checked]:border-success data-[state=checked]:bg-success"
|
|
56
|
+
],
|
|
57
|
+
alert: [
|
|
58
|
+
"text-on-alert",
|
|
59
|
+
"hover:ring-alert-container",
|
|
60
|
+
"data-[state=unchecked]:border-alert",
|
|
61
|
+
"data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert",
|
|
62
|
+
"data-[state=checked]:border-alert data-[state=checked]:bg-alert"
|
|
63
|
+
],
|
|
64
|
+
error: [
|
|
65
|
+
"text-on-error",
|
|
66
|
+
"hover:ring-error-container",
|
|
67
|
+
"data-[state=unchecked]:border-error",
|
|
68
|
+
"data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error",
|
|
69
|
+
"data-[state=checked]:border-error data-[state=checked]:bg-error"
|
|
70
|
+
],
|
|
71
|
+
info: [
|
|
72
|
+
"text-on-info",
|
|
73
|
+
"hover:ring-info-container",
|
|
74
|
+
"data-[state=unchecked]:border-info",
|
|
75
|
+
"data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info",
|
|
76
|
+
"data-[state=checked]:border-info data-[state=checked]:bg-info"
|
|
77
|
+
],
|
|
78
|
+
neutral: [
|
|
79
|
+
"text-on-neutral",
|
|
80
|
+
"hover:ring-neutral-container",
|
|
81
|
+
"data-[state=unchecked]:border-outline",
|
|
82
|
+
"data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral",
|
|
83
|
+
"data-[state=checked]:border-neutral data-[state=checked]:bg-neutral"
|
|
84
|
+
]
|
|
85
|
+
}) },
|
|
86
|
+
defaultVariants: { intent: "support" }
|
|
87
|
+
}), T = u.Checkbox, E = ({ className: t, icon: n = /* @__PURE__ */ f(_, {}), indeterminateIcon: r = /* @__PURE__ */ f(v, {}), intent: i, checked: a, ref: o, ...s }) => /* @__PURE__ */ f(T, {
|
|
88
|
+
ref: o,
|
|
89
|
+
className: w({
|
|
90
|
+
intent: i,
|
|
91
|
+
className: t
|
|
92
|
+
}),
|
|
93
|
+
checked: a,
|
|
94
|
+
...s,
|
|
95
|
+
children: /* @__PURE__ */ f(C, { children: /* @__PURE__ */ f(e, {
|
|
96
|
+
size: "sm",
|
|
97
|
+
children: a === "indeterminate" ? r : n
|
|
98
|
+
}) })
|
|
99
|
+
});
|
|
100
|
+
E.displayName = "CheckboxInput";
|
|
101
|
+
//#endregion
|
|
102
|
+
//#region src/checkbox/CheckboxLabel.styles.ts
|
|
103
|
+
var D = n("grow", {
|
|
104
|
+
variants: { disabled: {
|
|
105
|
+
true: ["text-neutral/dim-2", "cursor-not-allowed"],
|
|
106
|
+
false: ["cursor-pointer"]
|
|
107
|
+
} },
|
|
108
|
+
defaultVariants: { disabled: !1 }
|
|
109
|
+
}), O = ({ disabled: e, ...n }) => /* @__PURE__ */ f(t, {
|
|
110
|
+
className: D({ disabled: e }),
|
|
111
|
+
...n
|
|
112
|
+
});
|
|
121
113
|
O.displayName = "CheckboxLabel";
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
"aria-describedby": L,
|
|
169
|
-
"aria-invalid": $,
|
|
170
|
-
onCheckedChange: y,
|
|
171
|
-
"aria-labelledby": h ? p : d.labelId,
|
|
172
|
-
...z
|
|
173
|
-
}
|
|
174
|
-
), Q = t.reverse || s ? /* @__PURE__ */ E(M, { children: [
|
|
175
|
-
q,
|
|
176
|
-
j
|
|
177
|
-
] }) : /* @__PURE__ */ E(M, { children: [
|
|
178
|
-
j,
|
|
179
|
-
q
|
|
180
|
-
] });
|
|
181
|
-
return /* @__PURE__ */ e(
|
|
182
|
-
"span",
|
|
183
|
-
{
|
|
184
|
-
"data-spark-component": "checkbox",
|
|
185
|
-
className: re("gap-md text-body-1 relative flex items-start", c),
|
|
186
|
-
children: Q
|
|
187
|
-
}
|
|
188
|
-
);
|
|
114
|
+
//#endregion
|
|
115
|
+
//#region src/checkbox/Checkbox.tsx
|
|
116
|
+
var k = ":checkbox", A = ({ id: e, className: t, intent: n, checked: i, value: a, disabled: o, reverse: u = !1, onCheckedChange: m, children: _, ref: v, ...y }) => {
|
|
117
|
+
let b = `${k}-${s()}`, S = e || b, C = `${k}-${s()}`, w = g(), T = x(), D = l(null), A = h(v, D), j = ({ fieldState: e, groupState: t, checkboxIntent: n }) => {
|
|
118
|
+
let r = e.name ?? t.name, i = e.isRequired ?? t.isRequired, a = e.state ?? t.state, o = e.isInvalid ?? t.isInvalid, s = e.id !== t.id;
|
|
119
|
+
return {
|
|
120
|
+
name: r,
|
|
121
|
+
isRequired: i,
|
|
122
|
+
isInvalid: o,
|
|
123
|
+
id: s ? e.id : void 0,
|
|
124
|
+
description: s ? e.description : void 0,
|
|
125
|
+
intent: a ?? n ?? t.intent
|
|
126
|
+
};
|
|
127
|
+
}, M = a ? T.value?.includes(a) : i, N = (e) => {
|
|
128
|
+
m?.(e);
|
|
129
|
+
let t = D.current?.value;
|
|
130
|
+
t && T.onCheckedChange && T.onCheckedChange(e, t);
|
|
131
|
+
}, { id: P, name: F, isInvalid: I, description: L, intent: R, isRequired: z } = j({
|
|
132
|
+
fieldState: w,
|
|
133
|
+
groupState: T,
|
|
134
|
+
checkboxIntent: n
|
|
135
|
+
}), B = c(() => T ? z ? !T.value?.length : !1 : z, [T, z]), V = _ && /* @__PURE__ */ f(O, {
|
|
136
|
+
disabled: o,
|
|
137
|
+
htmlFor: P || S,
|
|
138
|
+
id: C,
|
|
139
|
+
children: _
|
|
140
|
+
}), H = /* @__PURE__ */ f(E, {
|
|
141
|
+
ref: A,
|
|
142
|
+
id: P || S,
|
|
143
|
+
name: F,
|
|
144
|
+
value: a,
|
|
145
|
+
intent: R,
|
|
146
|
+
checked: M,
|
|
147
|
+
disabled: o,
|
|
148
|
+
required: B,
|
|
149
|
+
"aria-describedby": L,
|
|
150
|
+
"aria-invalid": I,
|
|
151
|
+
onCheckedChange: N,
|
|
152
|
+
"aria-labelledby": _ ? C : w.labelId,
|
|
153
|
+
...y
|
|
154
|
+
}), U = T.reverse || u ? /* @__PURE__ */ p(d, { children: [V, H] }) : /* @__PURE__ */ p(d, { children: [H, V] });
|
|
155
|
+
return /* @__PURE__ */ f("span", {
|
|
156
|
+
"data-spark-component": "checkbox",
|
|
157
|
+
className: r("gap-md text-body-1 relative flex items-start", t),
|
|
158
|
+
children: U
|
|
159
|
+
});
|
|
189
160
|
};
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
children: h
|
|
241
|
-
}
|
|
242
|
-
) });
|
|
161
|
+
A.displayName = "Checkbox";
|
|
162
|
+
//#endregion
|
|
163
|
+
//#region src/checkbox/CheckboxGroup.styles.ts
|
|
164
|
+
var j = n(["flex"], { variants: { orientation: {
|
|
165
|
+
vertical: ["flex-col", "gap-lg"],
|
|
166
|
+
horizontal: ["gap-xl"]
|
|
167
|
+
} } }), M = ({ name: e, value: t, defaultValue: n, className: r, intent: i, orientation: a = "vertical", onCheckedChange: s, reverse: u = !1, children: d, ref: p, ...m }) => {
|
|
168
|
+
let [h, _] = y(t, n), v = g(), x = l(s), { id: S, labelId: C, description: w, state: T, isInvalid: E, isRequired: D } = v, O = e ?? v.name, k = c(() => ({
|
|
169
|
+
id: S,
|
|
170
|
+
name: O,
|
|
171
|
+
value: h,
|
|
172
|
+
intent: i,
|
|
173
|
+
state: T,
|
|
174
|
+
isInvalid: E,
|
|
175
|
+
description: w,
|
|
176
|
+
isRequired: D,
|
|
177
|
+
reverse: u,
|
|
178
|
+
onCheckedChange: (e, t) => {
|
|
179
|
+
let n = h || [], r = e ? [...n, t] : n.filter((e) => e !== t);
|
|
180
|
+
_(r), x.current && x.current(r);
|
|
181
|
+
}
|
|
182
|
+
}), [
|
|
183
|
+
S,
|
|
184
|
+
O,
|
|
185
|
+
h,
|
|
186
|
+
i,
|
|
187
|
+
T,
|
|
188
|
+
E,
|
|
189
|
+
w,
|
|
190
|
+
D,
|
|
191
|
+
_,
|
|
192
|
+
u
|
|
193
|
+
]);
|
|
194
|
+
return o(() => {
|
|
195
|
+
x.current = s;
|
|
196
|
+
}, [s]), /* @__PURE__ */ f(b.Provider, {
|
|
197
|
+
value: k,
|
|
198
|
+
children: /* @__PURE__ */ f("div", {
|
|
199
|
+
ref: p,
|
|
200
|
+
className: j({
|
|
201
|
+
className: r,
|
|
202
|
+
orientation: a
|
|
203
|
+
}),
|
|
204
|
+
role: "group",
|
|
205
|
+
"aria-labelledby": C,
|
|
206
|
+
"aria-describedby": w,
|
|
207
|
+
...m,
|
|
208
|
+
children: d
|
|
209
|
+
})
|
|
210
|
+
});
|
|
243
211
|
};
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
//# sourceMappingURL=index.mjs.map
|
|
212
|
+
M.displayName = "CheckboxGroup";
|
|
213
|
+
//#endregion
|
|
214
|
+
export { A as Checkbox, M as CheckboxGroup };
|
|
215
|
+
|
|
216
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/checkbox/CheckboxGroupContext.tsx","../../src/checkbox/CheckboxIndicator.tsx","../../src/checkbox/CheckboxInput.styles.ts","../../src/checkbox/CheckboxInput.tsx","../../src/checkbox/CheckboxLabel.styles.ts","../../src/checkbox/CheckboxLabel.tsx","../../src/checkbox/Checkbox.tsx","../../src/checkbox/CheckboxGroup.styles.ts","../../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["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 { 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', '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 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: 'support',\n },\n }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\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 { 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 { 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 <span\n data-spark-component=\"checkbox\"\n className={cx('gap-md text-body-1 relative flex items-start', className)}\n >\n {content}\n </span>\n )\n}\n\nCheckbox.displayName = 'Checkbox'\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","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\n ? [...values, changed]\n : values.filter((val: string) => 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"],"names":["CheckboxGroupContext","createContext","useCheckboxGroup","useContext","CheckboxIndicatorPrimitive","Checkbox","CheckboxIndicator","props","jsx","checkboxInputStyles","cva","makeVariants","CheckboxPrimitive","CheckboxInput","className","icon","Check","indeterminateIcon","Minus","intent","checked","ref","others","Icon","labelStyles","CheckboxLabel","disabled","Label","ID_PREFIX","idProp","intentProp","checkedProp","value","reverse","onCheckedChange","children","forwardedRef","checkboxId","useId","innerId","innerLabelId","field","useFormFieldControl","group","rootRef","useRef","useMergeRefs","getCheckboxAttributes","fieldState","groupState","checkboxIntent","name","isRequired","state","isInvalid","isFieldEnclosed","id","description","handleCheckedChange","isChecked","rootRefValue","isRequiredAttr","useMemo","checkboxLabel","checkboxInput","content","jsxs","Fragment","cx","checkboxGroupStyles","CheckboxGroup","nameProp","valueProp","defaultValue","orientation","onCheckedChangeProp","setValue","useCombinedState","onCheckedChangeRef","labelId","current","changed","values","modified","val","useEffect"],"mappings":";;;;;;;;;;;;AA2CO,MAAMA,IAAuBC,GAAkD,EAAE,GAE3EC,KAAmB,MACdC,GAAWH,CAAoB,GC3C3CI,KAA6BC,EAAS,mBAM/BC,IAAoB,CAACC,MAChC,gBAAAC,EAACJ,MAA2B,WAAU,8CAA8C,GAAGG,GAAO;AAGhGD,EAAkB,cAAc;ACVzB,MAAMG,KAAsBC;AAAA,EACjC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA,MAIR,QAAQC,GAGN;AAAA,QACA,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF,CACD;AAAA,IAAA;AAAA,IAEH,iBAAiB;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,GCvEMC,KAAoBP,EAAS,UA4CtBQ,IAAgB,CAAC;AAAA,EAC5B,WAAAC;AAAA,EACA,MAAAC,sBAAQC,IAAA,EAAM;AAAA,EACd,mBAAAC,sBAAqBC,IAAA,EAAM;AAAA,EAC3B,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAd;AAAA,EAACI;AAAA,EAAA;AAAA,IACC,KAAAS;AAAA,IACA,WAAWZ,GAAoB,EAAE,QAAAU,GAAQ,WAAAL,GAAW;AAAA,IACpD,SAAAM;AAAA,IACC,GAAGE;AAAA,IAEJ,UAAA,gBAAAd,EAACF,GAAA,EACC,UAAA,gBAAAE,EAACe,IAAA,EAAK,MAAK,MAAM,UAAAH,MAAY,kBAAkBH,IAAoBF,EAAA,CAAK,EAAA,CAC1E;AAAA,EAAA;AACF;AAGFF,EAAc,cAAc;AC1ErB,MAAMW,KAAcd,EAAI,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM,CAAC,sBAAsB,oBAAoB;AAAA,MACjD,OAAO,CAAC,gBAAgB;AAAA,IAAA;AAAA,EAC1B;AAAA,EAEF,iBAAiB;AAAA,IACf,UAAU;AAAA,EAAA;AAEd,CAAC,GCFYe,IAAgB,CAAC,EAAE,UAAAC,GAAU,GAAGJ,QAC3C,gBAAAd,EAACmB,IAAA,EAAM,WAAWH,GAAY,EAAE,UAAAE,EAAA,CAAU,GAAI,GAAGJ,EAAA,CAAQ;AAG3DG,EAAc,cAAc;ACA5B,MAAMG,IAAY,aAELvB,KAAW,CAAC;AAAA,EACvB,IAAIwB;AAAA,EACJ,WAAAf;AAAA,EACA,QAAQgB;AAAA,EACR,SAASC;AAAA,EACT,OAAAC;AAAA,EACA,UAAAN;AAAA,EACA,SAAAO,IAAU;AAAA,EACV,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAKC;AAAA,EACL,GAAGd;AACL,MAAqB;AACnB,QAAMe,IAAa,GAAGT,CAAS,IAAIU,GAAO,IACpCC,IAAUV,KAAUQ,GAEpBG,IAAe,GAAGZ,CAAS,IAAIU,GAAO,IAEtCG,IAAQC,EAAA,GACRC,IAAQzC,GAAA,GAER0C,IAAUC,EAAsC,IAAI,GACpDxB,IAAMyB,GAAaV,GAAcQ,CAAO,GAExCG,IAAwB,CAAC;AAAA,IAC7B,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,MAKI;AACJ,UAAMC,IAAOH,EAAW,QAAQC,EAAW,MACrCG,IAAaJ,EAAW,cAAcC,EAAW,YACjDI,IAAQL,EAAW,SAASC,EAAW,OACvCK,IAAYN,EAAW,aAAaC,EAAW,WAE/CM,IAAkBP,EAAW,OAAOC,EAAW,IAC/CO,IAAKD,IAAkBP,EAAW,KAAK,QACvCS,KAAcF,IAAkBP,EAAW,cAAc,QAEzD7B,KAASkC,KAASH,KAAkBD,EAAW;AAErD,WAAO,EAAE,MAAAE,GAAM,YAAAC,GAAY,WAAAE,GAAW,IAAAE,GAAI,aAAAC,IAAa,QAAAtC,GAAAA;AAAAA,EACzD,GAEMC,IAAUY,IAAQW,EAAM,OAAO,SAASX,CAAK,IAAID,GAEjD2B,IAAsB,CAACC,MAAuB;AAClD,IAAAzB,IAAkByB,CAAS;AAE3B,UAAMC,IAAehB,EAAQ,SAAS;AACtC,IAAIgB,KAAgBjB,EAAM,mBACxBA,EAAM,gBAAgBgB,GAAWC,CAAY;AAAA,EAEjD,GAEM;AAAA,IACJ,IAAAJ;AAAA,IACA,MAAAL;AAAA,IACA,WAAAG;AAAA,IACA,aAAAG;AAAA,IACA,QAAAtC;AAAA,IACA,YAAY0C;AAAA,EAAA,IACVd,EAAsB;AAAA,IACxB,YAAYN;AAAA,IACZ,YAAYE;AAAA,IACZ,gBAAgBb;AAAA,EAAA,CACjB,GAEKsB,IAAaU,EAAQ,MACpBnB,IAEEkB,IAAiB,CAAClB,EAAM,OAAO,SAAS,KAF5BkB,GAGlB,CAAClB,GAAOkB,CAAc,CAAC,GAEpBE,IAAgB5B,KACpB,gBAAA3B,EAACiB,GAAA,EAAc,UAAAC,GAAoB,SAAS8B,KAAMjB,GAAS,IAAIC,GAC5D,UAAAL,EAAA,CACH,GAGI6B,IACJ,gBAAAxD;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,KAAAQ;AAAA,MACA,IAAImC,KAAMjB;AAAA,MACV,MAAAY;AAAA,MACA,OAAAnB;AAAA,MACA,QAAAb;AAAA,MACA,SAAAC;AAAA,MACA,UAAAM;AAAA,MACA,UAAU0B;AAAA,MACV,oBAAkBK;AAAA,MAClB,gBAAcH;AAAA,MACd,iBAAiBI;AAAA,MACjB,mBAAiBvB,IAAWK,IAAeC,EAAM;AAAA,MAChD,GAAGnB;AAAA,IAAA;AAAA,EAAA,GAIF2C,IACJtB,EAAM,WAAWV,IACf,gBAAAiC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAJ;AAAA,IACAC;AAAA,EAAA,EAAA,CACH,IAEA,gBAAAE,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAH;AAAA,IACAD;AAAA,EAAA,GACH;AAGJ,SACE,gBAAAvD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,WAAW4D,GAAG,gDAAgDtD,CAAS;AAAA,MAEtE,UAAAmD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA5D,GAAS,cAAc;AC1IhB,MAAMgE,KAAsB3D,EAAI,CAAC,MAAM,GAAG;AAAA,EAC/C,UAAU;AAAA;AAAA;AAAA;AAAA,IAIR,aAAa;AAAA,MACX,UAAU,CAAC,YAAY,QAAQ;AAAA,MAC/B,YAAY,CAAC,QAAQ;AAAA,IAAA;AAAA,EACvB;AAEJ,CAAC,GCUY4D,KAAgB,CAAC;AAAA,EAC5B,MAAMC;AAAA,EACN,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,WAAA3D;AAAA,EACA,QAAAK;AAAA,EACA,aAAAuD,IAAc;AAAA,EACd,iBAAiBC;AAAA,EACjB,SAAA1C,IAAU;AAAA,EACV,UAAAE;AAAA,EACA,KAAAd;AAAA,EACA,GAAGC;AACL,MAA0B;AACxB,QAAM,CAACU,GAAO4C,CAAQ,IAAIC,GAAiBL,GAAWC,CAAY,GAC5DhC,IAAQC,EAAA,GACRoC,IAAqBjC,EAAO8B,CAAmB,GAE/C,EAAE,IAAAnB,GAAI,SAAAuB,GAAS,aAAAtB,GAAa,OAAAJ,GAAO,WAAAC,GAAW,YAAAF,MAAeX,GAC7DU,IAAOoB,KAAY9B,EAAM,MAEzBuC,IAAUlB,EAAQ,OAcf;AAAA,IACL,IAAAN;AAAA,IACA,MAAAL;AAAA,IACA,OAAAnB;AAAA,IACA,QAAAb;AAAA,IACA,OAAAkC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAG;AAAA,IACA,YAAAL;AAAA,IACA,SAAAnB;AAAA,IACA,iBAvB0B,CAACb,GAAkB6D,MAAoB;AACjE,YAAMC,IAASlD,KAAS,CAAA,GAClBmD,IAAW/D,IACb,CAAC,GAAG8D,GAAQD,CAAO,IACnBC,EAAO,OAAO,CAACE,MAAgBA,MAAQH,CAAO;AAElD,MAAAL,EAASO,CAAQ,GAEbL,EAAmB,WACrBA,EAAmB,QAAQK,CAAQ;AAAA,IAEvC;AAAA,EAYmB,IAElB,CAAC3B,GAAIL,GAAMnB,GAAOb,GAAQkC,GAAOC,GAAWG,GAAaL,GAAYwB,GAAU3C,CAAO,CAAC;AAE1F,SAAAoD,GAAU,MAAM;AACd,IAAAP,EAAmB,UAAUH;AAAA,EAC/B,GAAG,CAACA,CAAmB,CAAC,GAGtB,gBAAAnE,EAACR,EAAqB,UAArB,EAA8B,OAAOgF,GACpC,UAAA,gBAAAxE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAa;AAAA,MACA,WAAWgD,GAAoB,EAAE,WAAAvD,GAAW,aAAA4D,GAAa;AAAA,MACzD,MAAK;AAAA,MACL,mBAAiBK;AAAA,MACjB,oBAAkBtB;AAAA,MACjB,GAAGnC;AAAA,MAEH,UAAAa;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEAmC,GAAc,cAAc;"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/checkbox/CheckboxGroupContext.tsx","../../src/checkbox/CheckboxIndicator.tsx","../../src/checkbox/CheckboxInput.styles.ts","../../src/checkbox/CheckboxInput.tsx","../../src/checkbox/CheckboxLabel.styles.ts","../../src/checkbox/CheckboxLabel.tsx","../../src/checkbox/Checkbox.tsx","../../src/checkbox/CheckboxGroup.styles.ts","../../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["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 { 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', '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 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: 'support',\n },\n }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\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\n 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 { 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 { 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\n// oxlint-disable-next-line max-lines-per-function\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 <span\n data-spark-component=\"checkbox\"\n className={cx('gap-md text-body-1 relative flex items-start', className)}\n >\n {content}\n </span>\n )\n}\n\nCheckbox.displayName = 'Checkbox'\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","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\n 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\n ? [...values, changed]\n : values.filter((val: string) => 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"],"mappings":"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"}
|