@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.
Files changed (302) hide show
  1. package/dist/DialogContent.styles-BSxCCi-u.mjs +62 -0
  2. package/dist/DialogContent.styles-BSxCCi-u.mjs.map +1 -0
  3. package/dist/DialogContent.styles-CAhJtUud.js +2 -0
  4. package/dist/DialogContent.styles-CAhJtUud.js.map +1 -0
  5. package/dist/FormFieldRequiredIndicator-CtgkvPZo.js +2 -0
  6. package/dist/FormFieldRequiredIndicator-CtgkvPZo.js.map +1 -0
  7. package/dist/FormFieldRequiredIndicator-DOGQ_HxO.mjs +14 -0
  8. package/dist/FormFieldRequiredIndicator-DOGQ_HxO.mjs.map +1 -0
  9. package/dist/accordion/index.js +2 -2
  10. package/dist/accordion/index.js.map +1 -1
  11. package/dist/accordion/index.mjs +99 -161
  12. package/dist/accordion/index.mjs.map +1 -1
  13. package/dist/alert-dialog/index.js +2 -2
  14. package/dist/alert-dialog/index.js.map +1 -1
  15. package/dist/alert-dialog/index.mjs +169 -235
  16. package/dist/alert-dialog/index.mjs.map +1 -1
  17. package/dist/avatar/index.js +2 -2
  18. package/dist/avatar/index.js.map +1 -1
  19. package/dist/avatar/index.mjs +187 -224
  20. package/dist/avatar/index.mjs.map +1 -1
  21. package/dist/badge/index.js +2 -2
  22. package/dist/badge/index.js.map +1 -1
  23. package/dist/badge/index.mjs +115 -81
  24. package/dist/badge/index.mjs.map +1 -1
  25. package/dist/breadcrumb/index.js +2 -2
  26. package/dist/breadcrumb/index.js.map +1 -1
  27. package/dist/breadcrumb/index.mjs +73 -106
  28. package/dist/breadcrumb/index.mjs.map +1 -1
  29. package/dist/button/index.js +1 -2
  30. package/dist/button/index.mjs +2 -5
  31. package/dist/button-BTDRzvpB.js +2 -0
  32. package/dist/button-BTDRzvpB.js.map +1 -0
  33. package/dist/button-_YZ_4J42.mjs +643 -0
  34. package/dist/button-_YZ_4J42.mjs.map +1 -0
  35. package/dist/card/index.js +2 -2
  36. package/dist/card/index.js.map +1 -1
  37. package/dist/card/index.mjs +327 -394
  38. package/dist/card/index.mjs.map +1 -1
  39. package/dist/carousel/index.js +2 -2
  40. package/dist/carousel/index.js.map +1 -1
  41. package/dist/carousel/index.mjs +515 -618
  42. package/dist/carousel/index.mjs.map +1 -1
  43. package/dist/checkbox/index.js +2 -2
  44. package/dist/checkbox/index.js.map +1 -1
  45. package/dist/checkbox/index.mjs +213 -246
  46. package/dist/checkbox/index.mjs.map +1 -1
  47. package/dist/chip/index.js +2 -2
  48. package/dist/chip/index.js.map +1 -1
  49. package/dist/chip/index.mjs +601 -652
  50. package/dist/chip/index.mjs.map +1 -1
  51. package/dist/chunk-C91j1N6u.js +1 -0
  52. package/dist/circular-meter/index.js +2 -2
  53. package/dist/circular-meter/index.js.map +1 -1
  54. package/dist/circular-meter/index.mjs +354 -309
  55. package/dist/circular-meter/index.mjs.map +1 -1
  56. package/dist/collapsible/index.js +2 -2
  57. package/dist/collapsible/index.js.map +1 -1
  58. package/dist/collapsible/index.mjs +53 -53
  59. package/dist/collapsible/index.mjs.map +1 -1
  60. package/dist/combobox/index.js +2 -2
  61. package/dist/combobox/index.js.map +1 -1
  62. package/dist/combobox/index.mjs +721 -876
  63. package/dist/combobox/index.mjs.map +1 -1
  64. package/dist/dialog/index.js +2 -2
  65. package/dist/dialog/index.js.map +1 -1
  66. package/dist/dialog/index.mjs +181 -206
  67. package/dist/dialog/index.mjs.map +1 -1
  68. package/dist/divider/index.js +2 -2
  69. package/dist/divider/index.js.map +1 -1
  70. package/dist/divider/index.mjs +178 -183
  71. package/dist/divider/index.mjs.map +1 -1
  72. package/dist/drawer/index.js +2 -2
  73. package/dist/drawer/index.js.map +1 -1
  74. package/dist/drawer/index.mjs +277 -309
  75. package/dist/drawer/index.mjs.map +1 -1
  76. package/dist/dropdown/index.js +2 -2
  77. package/dist/dropdown/index.js.map +1 -1
  78. package/dist/dropdown/index.mjs +429 -492
  79. package/dist/dropdown/index.mjs.map +1 -1
  80. package/dist/file-upload/index.js +2 -2
  81. package/dist/file-upload/index.js.map +1 -1
  82. package/dist/file-upload/index.mjs +540 -677
  83. package/dist/file-upload/index.mjs.map +1 -1
  84. package/dist/form-field/index.js +1 -2
  85. package/dist/form-field/index.mjs +2 -284
  86. package/dist/form-field-B8QzM655.mjs +231 -0
  87. package/dist/form-field-B8QzM655.mjs.map +1 -0
  88. package/dist/form-field-Bu_0E9tb.js +2 -0
  89. package/dist/form-field-Bu_0E9tb.js.map +1 -0
  90. package/dist/icon/index.js +1 -2
  91. package/dist/icon/index.mjs +2 -5
  92. package/dist/icon-CRPcdgYp.js +2 -0
  93. package/dist/icon-CRPcdgYp.js.map +1 -0
  94. package/dist/icon-D05Uqh8_.mjs +41 -0
  95. package/dist/icon-D05Uqh8_.mjs.map +1 -0
  96. package/dist/icon-button/index.js +1 -2
  97. package/dist/icon-button/index.mjs +2 -5
  98. package/dist/icon-button-6p3O7NIm.mjs +28 -0
  99. package/dist/icon-button-6p3O7NIm.mjs.map +1 -0
  100. package/dist/icon-button-CykysbgJ.js +2 -0
  101. package/dist/icon-button-CykysbgJ.js.map +1 -0
  102. package/dist/input/index.js +1 -2
  103. package/dist/input/index.mjs +2 -455
  104. package/dist/input-CmYeHYWQ.mjs +355 -0
  105. package/dist/input-CmYeHYWQ.mjs.map +1 -0
  106. package/dist/input-DNr40G2Z.js +2 -0
  107. package/dist/input-DNr40G2Z.js.map +1 -0
  108. package/dist/input-otp/index.js +2 -2
  109. package/dist/input-otp/index.js.map +1 -1
  110. package/dist/input-otp/index.mjs +344 -407
  111. package/dist/input-otp/index.mjs.map +1 -1
  112. package/dist/kbd/index.js +2 -2
  113. package/dist/kbd/index.js.map +1 -1
  114. package/dist/kbd/index.mjs +12 -17
  115. package/dist/kbd/index.mjs.map +1 -1
  116. package/dist/label/index.js +1 -2
  117. package/dist/label/index.mjs +2 -40
  118. package/dist/label-BqRlrca0.mjs +31 -0
  119. package/dist/label-BqRlrca0.mjs.map +1 -0
  120. package/dist/label-DU0p0d-f.js +2 -0
  121. package/dist/label-DU0p0d-f.js.map +1 -0
  122. package/dist/link-box/index.js +2 -2
  123. package/dist/link-box/index.js.map +1 -1
  124. package/dist/link-box/index.mjs +36 -34
  125. package/dist/link-box/index.mjs.map +1 -1
  126. package/dist/meter/index.js +2 -2
  127. package/dist/meter/index.js.map +1 -1
  128. package/dist/meter/index.mjs +149 -171
  129. package/dist/meter/index.mjs.map +1 -1
  130. package/dist/pagination/index.js +2 -2
  131. package/dist/pagination/index.js.map +1 -1
  132. package/dist/pagination/index.mjs +253 -214
  133. package/dist/pagination/index.mjs.map +1 -1
  134. package/dist/popover/index.js +1 -2
  135. package/dist/popover/index.mjs +2 -239
  136. package/dist/popover-CxZAQmw6.mjs +211 -0
  137. package/dist/popover-CxZAQmw6.mjs.map +1 -0
  138. package/dist/popover-GOovJ27J.js +2 -0
  139. package/dist/popover-GOovJ27J.js.map +1 -0
  140. package/dist/portal/index.js +2 -2
  141. package/dist/portal/index.js.map +1 -1
  142. package/dist/portal/index.mjs +8 -7
  143. package/dist/portal/index.mjs.map +1 -1
  144. package/dist/progress/index.js +1 -2
  145. package/dist/progress/index.mjs +2 -178
  146. package/dist/progress-cEf3tFbn.mjs +132 -0
  147. package/dist/progress-cEf3tFbn.mjs.map +1 -0
  148. package/dist/progress-rJZcPJsZ.js +2 -0
  149. package/dist/progress-rJZcPJsZ.js.map +1 -0
  150. package/dist/progress-tracker/index.js +2 -2
  151. package/dist/progress-tracker/index.js.map +1 -1
  152. package/dist/progress-tracker/index.mjs +303 -380
  153. package/dist/progress-tracker/index.mjs.map +1 -1
  154. package/dist/radio-group/index.js +2 -2
  155. package/dist/radio-group/index.js.map +1 -1
  156. package/dist/radio-group/index.mjs +204 -213
  157. package/dist/radio-group/index.mjs.map +1 -1
  158. package/dist/rating/index.js +2 -2
  159. package/dist/rating/index.js.map +1 -1
  160. package/dist/rating/index.mjs +189 -244
  161. package/dist/rating/index.mjs.map +1 -1
  162. package/dist/rating-display/index.js +2 -2
  163. package/dist/rating-display/index.js.map +1 -1
  164. package/dist/rating-display/index.mjs +165 -166
  165. package/dist/rating-display/index.mjs.map +1 -1
  166. package/dist/scrolling-list/index.js +2 -2
  167. package/dist/scrolling-list/index.js.map +1 -1
  168. package/dist/scrolling-list/index.mjs +216 -273
  169. package/dist/scrolling-list/index.mjs.map +1 -1
  170. package/dist/segmented-control/index.js +2 -2
  171. package/dist/segmented-control/index.js.map +1 -1
  172. package/dist/segmented-control/index.mjs +146 -180
  173. package/dist/segmented-control/index.mjs.map +1 -1
  174. package/dist/segmented-gauge/index.js +2 -2
  175. package/dist/segmented-gauge/index.js.map +1 -1
  176. package/dist/segmented-gauge/index.mjs +146 -195
  177. package/dist/segmented-gauge/index.mjs.map +1 -1
  178. package/dist/select/index.js +2 -2
  179. package/dist/select/index.js.map +1 -1
  180. package/dist/select/index.mjs +279 -327
  181. package/dist/select/index.mjs.map +1 -1
  182. package/dist/skeleton/index.js +2 -2
  183. package/dist/skeleton/index.js.map +1 -1
  184. package/dist/skeleton/index.mjs +92 -114
  185. package/dist/skeleton/index.mjs.map +1 -1
  186. package/dist/slider/index.js +2 -2
  187. package/dist/slider/index.js.map +1 -1
  188. package/dist/slider/index.mjs +259 -326
  189. package/dist/slider/index.mjs.map +1 -1
  190. package/dist/slot/index.js +2 -2
  191. package/dist/slot/index.js.map +1 -1
  192. package/dist/slot/index.mjs +12 -7
  193. package/dist/slot/index.mjs.map +1 -1
  194. package/dist/snackbar/index.js +2 -2
  195. package/dist/snackbar/index.js.map +1 -1
  196. package/dist/snackbar/index.mjs +404 -529
  197. package/dist/snackbar/index.mjs.map +1 -1
  198. package/dist/spinner/index.js +1 -2
  199. package/dist/spinner/index.mjs +2 -5
  200. package/dist/spinner-DFUoYvmm.js +2 -0
  201. package/dist/spinner-DFUoYvmm.js.map +1 -0
  202. package/dist/spinner-DULLiM6a.mjs +56 -0
  203. package/dist/spinner-DULLiM6a.mjs.map +1 -0
  204. package/dist/src/avatar/index.d.mts +2 -2
  205. package/dist/src/avatar/index.d.ts +2 -2
  206. package/dist/src/file-upload/index.d.mts +1 -1
  207. package/dist/src/file-upload/index.d.ts +1 -1
  208. package/dist/stepper/index.js +2 -2
  209. package/dist/stepper/index.js.map +1 -1
  210. package/dist/stepper/index.mjs +139 -176
  211. package/dist/stepper/index.mjs.map +1 -1
  212. package/dist/switch/index.js +2 -2
  213. package/dist/switch/index.js.map +1 -1
  214. package/dist/switch/index.mjs +194 -197
  215. package/dist/switch/index.mjs.map +1 -1
  216. package/dist/tabs/index.js +2 -2
  217. package/dist/tabs/index.js.map +1 -1
  218. package/dist/tabs/index.mjs +337 -389
  219. package/dist/tabs/index.mjs.map +1 -1
  220. package/dist/tag/index.js +2 -2
  221. package/dist/tag/index.js.map +1 -1
  222. package/dist/tag/index.mjs +192 -211
  223. package/dist/tag/index.mjs.map +1 -1
  224. package/dist/text-link/index.js +2 -2
  225. package/dist/text-link/index.js.map +1 -1
  226. package/dist/text-link/index.mjs +44 -5
  227. package/dist/text-link/index.mjs.map +1 -1
  228. package/dist/textarea/index.js +2 -2
  229. package/dist/textarea/index.js.map +1 -1
  230. package/dist/textarea/index.mjs +51 -50
  231. package/dist/textarea/index.mjs.map +1 -1
  232. package/dist/toast/index.js +2 -2
  233. package/dist/toast/index.js.map +1 -1
  234. package/dist/toast/index.mjs +314 -367
  235. package/dist/toast/index.mjs.map +1 -1
  236. package/dist/useRenderSlot-DP4fYerF.mjs +11 -0
  237. package/dist/useRenderSlot-DP4fYerF.mjs.map +1 -0
  238. package/dist/useRenderSlot-Xxf_s88b.js +2 -0
  239. package/dist/useRenderSlot-Xxf_s88b.js.map +1 -0
  240. package/dist/visually-hidden/index.js +2 -2
  241. package/dist/visually-hidden/index.js.map +1 -1
  242. package/dist/visually-hidden/index.mjs +25 -5
  243. package/dist/visually-hidden/index.mjs.map +1 -1
  244. package/package.json +4 -4
  245. package/dist/Button-1M9DcZl0.mjs +0 -704
  246. package/dist/Button-1M9DcZl0.mjs.map +0 -1
  247. package/dist/Button-FZceRWG2.js +0 -2
  248. package/dist/Button-FZceRWG2.js.map +0 -1
  249. package/dist/DialogContent.styles-CziMQtYr.js +0 -2
  250. package/dist/DialogContent.styles-CziMQtYr.js.map +0 -1
  251. package/dist/DialogContent.styles-Du7_Dkde.mjs +0 -60
  252. package/dist/DialogContent.styles-Du7_Dkde.mjs.map +0 -1
  253. package/dist/FormFieldRequiredIndicator-CHfcoT2y.js +0 -2
  254. package/dist/FormFieldRequiredIndicator-CHfcoT2y.js.map +0 -1
  255. package/dist/FormFieldRequiredIndicator-DTnCGiX2.mjs +0 -13
  256. package/dist/FormFieldRequiredIndicator-DTnCGiX2.mjs.map +0 -1
  257. package/dist/Icon-BO327oHU.mjs +0 -57
  258. package/dist/Icon-BO327oHU.mjs.map +0 -1
  259. package/dist/Icon-C-cNTnzd.js +0 -2
  260. package/dist/Icon-C-cNTnzd.js.map +0 -1
  261. package/dist/IconButton-BR1bJSQA.js +0 -2
  262. package/dist/IconButton-BR1bJSQA.js.map +0 -1
  263. package/dist/IconButton-DdB3Pq13.mjs +0 -43
  264. package/dist/IconButton-DdB3Pq13.mjs.map +0 -1
  265. package/dist/Slot-DLY1rJrG.mjs +0 -14
  266. package/dist/Slot-DLY1rJrG.mjs.map +0 -1
  267. package/dist/Slot-DQ8z2zsy.js +0 -2
  268. package/dist/Slot-DQ8z2zsy.js.map +0 -1
  269. package/dist/Spinner-Br4Rp9V2.js +0 -2
  270. package/dist/Spinner-Br4Rp9V2.js.map +0 -1
  271. package/dist/Spinner-Co3AjkQV.mjs +0 -68
  272. package/dist/Spinner-Co3AjkQV.mjs.map +0 -1
  273. package/dist/TextLink-5MvP0P8D.js +0 -2
  274. package/dist/TextLink-5MvP0P8D.js.map +0 -1
  275. package/dist/TextLink-Cc_LeVcx.mjs +0 -57
  276. package/dist/TextLink-Cc_LeVcx.mjs.map +0 -1
  277. package/dist/VisuallyHidden-CB6Nx76j.js +0 -2
  278. package/dist/VisuallyHidden-CB6Nx76j.js.map +0 -1
  279. package/dist/VisuallyHidden-DjlV0-CW.mjs +0 -28
  280. package/dist/VisuallyHidden-DjlV0-CW.mjs.map +0 -1
  281. package/dist/button/index.js.map +0 -1
  282. package/dist/button/index.mjs.map +0 -1
  283. package/dist/form-field/index.js.map +0 -1
  284. package/dist/form-field/index.mjs.map +0 -1
  285. package/dist/icon/index.js.map +0 -1
  286. package/dist/icon/index.mjs.map +0 -1
  287. package/dist/icon-button/index.js.map +0 -1
  288. package/dist/icon-button/index.mjs.map +0 -1
  289. package/dist/input/index.js.map +0 -1
  290. package/dist/input/index.mjs.map +0 -1
  291. package/dist/label/index.js.map +0 -1
  292. package/dist/label/index.mjs.map +0 -1
  293. package/dist/popover/index.js.map +0 -1
  294. package/dist/popover/index.mjs.map +0 -1
  295. package/dist/progress/index.js.map +0 -1
  296. package/dist/progress/index.mjs.map +0 -1
  297. package/dist/spinner/index.js.map +0 -1
  298. package/dist/spinner/index.mjs.map +0 -1
  299. package/dist/useRenderSlot-Bta2kdp4.mjs +0 -10
  300. package/dist/useRenderSlot-Bta2kdp4.mjs.map +0 -1
  301. package/dist/useRenderSlot-DATwjgpo.js +0 -2
  302. package/dist/useRenderSlot-DATwjgpo.js.map +0 -1
@@ -1,249 +1,216 @@
1
- import { jsx as e, jsxs as E, Fragment as M } from "react/jsx-runtime";
2
- import { useFormFieldControl as D } from "@spark-ui/components/form-field";
3
- import { useMergeRefs as ae } from "@spark-ui/hooks/use-merge-refs";
4
- import { cva as V, cx as re } from "class-variance-authority";
5
- import { createContext as ne, useContext as oe, useId as A, useRef as X, useMemo as _, useEffect as ce } from "react";
6
- import { Check as se } from "@spark-ui/icons/Check";
7
- import { Minus as ie } from "@spark-ui/icons/Minus";
8
- import { Checkbox as B } from "radix-ui";
9
- import { I as de } from "../Icon-BO327oHU.mjs";
10
- import { makeVariants as le } from "@spark-ui/internal-utils";
11
- import { Label as ue } from "../label/index.mjs";
12
- import { useCombinedState as be } from "@spark-ui/hooks/use-combined-state";
13
- const H = ne({}), he = () => oe(H), me = B.CheckboxIndicator, J = (a) => /* @__PURE__ */ e(me, { className: "flex size-full items-center justify-center", ...a });
14
- J.displayName = "CheckboxIndicator";
15
- const ke = V(
16
- [
17
- "size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent",
18
- "disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0",
19
- "focus-visible:u-outline",
20
- "hover:ring-4 hover:cursor-pointer",
21
- "u-shadow-border-transition"
22
- ],
23
- {
24
- variants: {
25
- /**
26
- * Color scheme of the checkbox.
27
- */
28
- intent: le({
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
- },
87
- defaultVariants: {
88
- intent: "support"
89
- }
90
- }
91
- ), pe = B.Checkbox, K = ({
92
- className: a,
93
- icon: c = /* @__PURE__ */ e(se, {}),
94
- indeterminateIcon: u = /* @__PURE__ */ e(ie, {}),
95
- intent: b,
96
- checked: n,
97
- ref: i,
98
- ...s
99
- }) => /* @__PURE__ */ e(
100
- pe,
101
- {
102
- ref: i,
103
- className: ke({ intent: b, className: a }),
104
- checked: n,
105
- ...s,
106
- children: /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(de, { size: "sm", children: n === "indeterminate" ? u : c }) })
107
- }
108
- );
109
- K.displayName = "CheckboxInput";
110
- const xe = V("grow", {
111
- variants: {
112
- disabled: {
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
- const P = ":checkbox", fe = ({
123
- id: a,
124
- className: c,
125
- intent: u,
126
- checked: b,
127
- value: n,
128
- disabled: i,
129
- reverse: s = !1,
130
- onCheckedChange: g,
131
- children: h,
132
- ref: F,
133
- ...z
134
- }) => {
135
- const m = `${P}-${A()}`, k = a || m, p = `${P}-${A()}`, d = D(), t = he(), C = X(null), x = ae(F, C), v = ({
136
- fieldState: r,
137
- groupState: o,
138
- checkboxIntent: T
139
- }) => {
140
- const U = r.name ?? o.name, W = r.isRequired ?? o.isRequired, Y = r.state ?? o.state, Z = r.isInvalid ?? o.isInvalid, w = r.id !== o.id, S = w ? r.id : void 0, ee = w ? r.description : void 0, te = Y ?? T ?? o.intent;
141
- return { name: U, isRequired: W, isInvalid: Z, id: S, description: ee, intent: te };
142
- }, I = n ? t.value?.includes(n) : b, y = (r) => {
143
- g?.(r);
144
- const o = C.current?.value;
145
- o && t.onCheckedChange && t.onCheckedChange(r, o);
146
- }, {
147
- id: f,
148
- name: G,
149
- isInvalid: $,
150
- description: L,
151
- intent: R,
152
- isRequired: l
153
- } = v({
154
- fieldState: d,
155
- groupState: t,
156
- checkboxIntent: u
157
- }), N = _(() => t ? l ? !t.value?.length : !1 : l, [t, l]), q = h && /* @__PURE__ */ e(O, { disabled: i, htmlFor: f || k, id: p, children: h }), j = /* @__PURE__ */ e(
158
- K,
159
- {
160
- ref: x,
161
- id: f || k,
162
- name: G,
163
- value: n,
164
- intent: R,
165
- checked: I,
166
- disabled: i,
167
- required: N,
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
- fe.displayName = "Checkbox";
191
- const ge = V(["flex"], {
192
- variants: {
193
- /**
194
- * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.
195
- */
196
- orientation: {
197
- vertical: ["flex-col", "gap-lg"],
198
- horizontal: ["gap-xl"]
199
- }
200
- }
201
- }), Ce = ({
202
- name: a,
203
- value: c,
204
- defaultValue: u,
205
- className: b,
206
- intent: n,
207
- orientation: i = "vertical",
208
- onCheckedChange: s,
209
- reverse: g = !1,
210
- children: h,
211
- ref: F,
212
- ...z
213
- }) => {
214
- const [m, k] = be(c, u), p = D(), d = X(s), { id: t, labelId: C, description: x, state: v, isInvalid: I, isRequired: y } = p, f = a ?? p.name, G = _(() => ({
215
- id: t,
216
- name: f,
217
- value: m,
218
- intent: n,
219
- state: v,
220
- isInvalid: I,
221
- description: x,
222
- isRequired: y,
223
- reverse: g,
224
- onCheckedChange: (L, R) => {
225
- const l = m || [], N = L ? [...l, R] : l.filter((q) => q !== R);
226
- k(N), d.current && d.current(N);
227
- }
228
- }), [t, f, m, n, v, I, x, y, k, g]);
229
- return ce(() => {
230
- d.current = s;
231
- }, [s]), /* @__PURE__ */ e(H.Provider, { value: G, children: /* @__PURE__ */ e(
232
- "div",
233
- {
234
- ref: F,
235
- className: ge({ className: b, orientation: i }),
236
- role: "group",
237
- "aria-labelledby": C,
238
- "aria-describedby": x,
239
- ...z,
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
- Ce.displayName = "CheckboxGroup";
245
- export {
246
- fe as Checkbox,
247
- Ce as CheckboxGroup
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":"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"}
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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"}