@bspk/ui 1.3.20 → 1.3.22

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 (290) hide show
  1. package/dist/components/Accordion/Accordion.js +1 -1
  2. package/dist/components/Accordion/Accordion.js.map +1 -1
  3. package/dist/components/Accordion/accordion.css +19 -12
  4. package/dist/components/Accordion/accordion.css.js +19 -12
  5. package/dist/components/BottomNavigation/BottomNavigation.d.ts +0 -1
  6. package/dist/components/BottomNavigation/BottomNavigation.js +0 -1
  7. package/dist/components/BottomNavigation/BottomNavigation.js.map +1 -1
  8. package/dist/components/BottomNavigation/bottom-navigation.css +1 -0
  9. package/dist/components/BottomNavigation/bottom-navigation.css.js +1 -0
  10. package/dist/components/Button/button.css +4 -0
  11. package/dist/components/Button/button.css.js +4 -0
  12. package/dist/components/Checkbox/Checkbox.js +3 -3
  13. package/dist/components/Checkbox/Checkbox.js.map +1 -1
  14. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +4 -5
  15. package/dist/components/CheckboxGroup/CheckboxGroup.js +8 -13
  16. package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
  17. package/dist/components/CheckboxGroup/CheckboxGroupExample.js +5 -0
  18. package/dist/components/CheckboxGroup/CheckboxGroupExample.js.map +1 -1
  19. package/dist/components/CheckboxGroup/checkbox-group.css +2 -0
  20. package/dist/components/CheckboxGroup/checkbox-group.css.js +2 -0
  21. package/dist/components/CheckboxGroupField/CheckboxGroupField.d.ts +3 -3
  22. package/dist/components/CheckboxGroupField/CheckboxGroupField.js +6 -4
  23. package/dist/components/CheckboxGroupField/CheckboxGroupField.js.map +1 -1
  24. package/dist/components/ChipGroup/ChipGroup.d.ts +0 -1
  25. package/dist/components/ChipGroup/ChipGroup.js +0 -1
  26. package/dist/components/ChipGroup/ChipGroup.js.map +1 -1
  27. package/dist/components/ChipGroup/chip-group.css +3 -0
  28. package/dist/components/ChipGroup/chip-group.css.js +3 -0
  29. package/dist/components/DatePicker/DatePicker.d.ts +4 -8
  30. package/dist/components/DatePicker/DatePicker.js +6 -18
  31. package/dist/components/DatePicker/DatePicker.js.map +1 -1
  32. package/dist/components/DatePicker/DatePickerExample.js +3 -3
  33. package/dist/components/DatePicker/DatePickerExample.js.map +1 -1
  34. package/dist/components/DatePickerField/DatePickerField.d.ts +4 -4
  35. package/dist/components/DatePickerField/DatePickerField.js +6 -4
  36. package/dist/components/DatePickerField/DatePickerField.js.map +1 -1
  37. package/dist/components/Dialog/Dialog.d.ts +2 -3
  38. package/dist/components/Dialog/Dialog.js +2 -3
  39. package/dist/components/Dialog/Dialog.js.map +1 -1
  40. package/dist/components/Fab/Fab.d.ts +8 -5
  41. package/dist/components/Fab/Fab.js +8 -5
  42. package/dist/components/Fab/Fab.js.map +1 -1
  43. package/dist/components/Fab/fab.css +1 -0
  44. package/dist/components/Fab/fab.css.js +1 -0
  45. package/dist/components/Field/Field.d.ts +32 -18
  46. package/dist/components/Field/Field.js +8 -38
  47. package/dist/components/Field/Field.js.map +1 -1
  48. package/dist/components/Field/FieldExample.d.ts +1 -0
  49. package/dist/components/Field/FieldExample.js +10 -3
  50. package/dist/components/Field/FieldExample.js.map +1 -1
  51. package/dist/components/Field/Fieldset.d.ts +40 -0
  52. package/dist/components/Field/Fieldset.js +44 -0
  53. package/dist/components/Field/Fieldset.js.map +1 -0
  54. package/dist/components/Field/field.css +5 -7
  55. package/dist/components/Field/field.css.js +5 -7
  56. package/dist/components/Field/index.d.ts +1 -3
  57. package/dist/components/Field/index.js +1 -3
  58. package/dist/components/Field/index.js.map +1 -1
  59. package/dist/components/Field/utils.d.ts +8 -38
  60. package/dist/components/Field/utils.js +6 -33
  61. package/dist/components/Field/utils.js.map +1 -1
  62. package/dist/components/FileUpload/FileUpload.js +1 -1
  63. package/dist/components/FileUpload/FileUpload.js.map +1 -1
  64. package/dist/components/FileUploadItem/FileUploadItem.js +1 -1
  65. package/dist/components/FileUploadItem/FileUploadItem.js.map +1 -1
  66. package/dist/components/Flex/Flex.d.ts +11 -7
  67. package/dist/components/Flex/Flex.js +12 -8
  68. package/dist/components/Flex/Flex.js.map +1 -1
  69. package/dist/components/InlineAlert/InlineAlert.d.ts +2 -2
  70. package/dist/components/InlineAlert/InlineAlert.js +2 -2
  71. package/dist/components/InlineAlert/InlineAlert.js.map +1 -1
  72. package/dist/components/Input/Input.d.ts +60 -15
  73. package/dist/components/Input/Input.js +42 -25
  74. package/dist/components/Input/Input.js.map +1 -1
  75. package/dist/components/Input/InputExample.js +4 -4
  76. package/dist/components/Input/InputExample.js.map +1 -1
  77. package/dist/components/Input/index.d.ts +0 -1
  78. package/dist/components/Input/index.js +0 -1
  79. package/dist/components/Input/index.js.map +1 -1
  80. package/dist/components/InputField/InputField.d.ts +4 -4
  81. package/dist/components/InputField/InputField.js +6 -4
  82. package/dist/components/InputField/InputField.js.map +1 -1
  83. package/dist/components/InputNumber/InputNumber.d.ts +8 -7
  84. package/dist/components/InputNumber/InputNumber.js +9 -16
  85. package/dist/components/InputNumber/InputNumber.js.map +1 -1
  86. package/dist/components/InputNumber/InputNumberExample.js +3 -3
  87. package/dist/components/InputNumber/InputNumberExample.js.map +1 -1
  88. package/dist/components/InputNumber/input-number.css +1 -0
  89. package/dist/components/InputNumber/input-number.css.js +1 -0
  90. package/dist/components/InputNumberField/InputNumberField.d.ts +4 -4
  91. package/dist/components/InputNumberField/InputNumberField.js +6 -4
  92. package/dist/components/InputNumberField/InputNumberField.js.map +1 -1
  93. package/dist/components/InputPhone/InputPhone.d.ts +8 -8
  94. package/dist/components/InputPhone/InputPhone.js +12 -18
  95. package/dist/components/InputPhone/InputPhone.js.map +1 -1
  96. package/dist/components/InputPhone/InputPhoneExample.js +3 -3
  97. package/dist/components/InputPhone/InputPhoneExample.js.map +1 -1
  98. package/dist/components/InputPhone/input-phone.css +1 -0
  99. package/dist/components/InputPhone/input-phone.css.js +1 -0
  100. package/dist/components/InputPhoneField/InputPhoneField.d.ts +4 -4
  101. package/dist/components/InputPhoneField/InputPhoneField.js +6 -4
  102. package/dist/components/InputPhoneField/InputPhoneField.js.map +1 -1
  103. package/dist/components/ListItem/list-item.css +1 -0
  104. package/dist/components/ListItem/list-item.css.js +1 -0
  105. package/dist/components/Modal/Modal.js +22 -26
  106. package/dist/components/Modal/Modal.js.map +1 -1
  107. package/dist/components/Modal/ModalExample.js +4 -1
  108. package/dist/components/Modal/ModalExample.js.map +1 -1
  109. package/dist/components/Modal/modal.css +4 -2
  110. package/dist/components/Modal/modal.css.js +4 -2
  111. package/dist/components/OTPInput/otp-input.css +1 -0
  112. package/dist/components/OTPInput/otp-input.css.js +1 -0
  113. package/dist/components/Pagination/Pagination.js +2 -2
  114. package/dist/components/Pagination/Pagination.js.map +1 -1
  115. package/dist/components/Password/Password.d.ts +9 -7
  116. package/dist/components/Password/Password.js +13 -17
  117. package/dist/components/Password/Password.js.map +1 -1
  118. package/dist/components/Password/PasswordExample.js +3 -3
  119. package/dist/components/Password/PasswordExample.js.map +1 -1
  120. package/dist/components/PasswordField/PasswordField.d.ts +4 -4
  121. package/dist/components/PasswordField/PasswordField.js +6 -4
  122. package/dist/components/PasswordField/PasswordField.js.map +1 -1
  123. package/dist/components/Popover/Popover.d.ts +0 -1
  124. package/dist/components/Popover/Popover.js +0 -1
  125. package/dist/components/Popover/Popover.js.map +1 -1
  126. package/dist/components/RadioGroup/RadioGroup.d.ts +1 -2
  127. package/dist/components/RadioGroup/RadioGroup.js +5 -11
  128. package/dist/components/RadioGroup/RadioGroup.js.map +1 -1
  129. package/dist/components/RadioGroupField/RadioGroupField.d.ts +3 -3
  130. package/dist/components/RadioGroupField/RadioGroupField.js +6 -4
  131. package/dist/components/RadioGroupField/RadioGroupField.js.map +1 -1
  132. package/dist/components/SearchBar/SearchBar.d.ts +0 -1
  133. package/dist/components/SearchBar/SearchBar.js +0 -1
  134. package/dist/components/SearchBar/SearchBar.js.map +1 -1
  135. package/dist/components/SegmentedControl/SegmentedControl.d.ts +0 -1
  136. package/dist/components/SegmentedControl/SegmentedControl.js +0 -1
  137. package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -1
  138. package/dist/components/Select/Select.d.ts +7 -6
  139. package/dist/components/Select/Select.js +10 -15
  140. package/dist/components/Select/Select.js.map +1 -1
  141. package/dist/components/Select/SelectExample.js +3 -3
  142. package/dist/components/Select/SelectExample.js.map +1 -1
  143. package/dist/components/SelectField/SelectField.d.ts +4 -4
  144. package/dist/components/SelectField/SelectField.js +6 -4
  145. package/dist/components/SelectField/SelectField.js.map +1 -1
  146. package/dist/components/Slider/Slider.d.ts +1 -2
  147. package/dist/components/Slider/Slider.js +1 -2
  148. package/dist/components/Slider/Slider.js.map +1 -1
  149. package/dist/components/Snackbar/Snackbar.d.ts +0 -1
  150. package/dist/components/Snackbar/Snackbar.js +0 -1
  151. package/dist/components/Snackbar/Snackbar.js.map +1 -1
  152. package/dist/components/Switch/Switch.d.ts +0 -1
  153. package/dist/components/Switch/Switch.js +0 -1
  154. package/dist/components/Switch/Switch.js.map +1 -1
  155. package/dist/components/TabGroup/TabGroup.d.ts +0 -1
  156. package/dist/components/TabGroup/TabGroup.js +0 -1
  157. package/dist/components/TabGroup/TabGroup.js.map +1 -1
  158. package/dist/components/TabList/TabList.d.ts +0 -1
  159. package/dist/components/TabList/TabList.js +0 -1
  160. package/dist/components/TabList/TabList.js.map +1 -1
  161. package/dist/components/TabList/tab-list.css +1 -0
  162. package/dist/components/TabList/tab-list.css.js +1 -0
  163. package/dist/components/Table/table.css +2 -1
  164. package/dist/components/Table/table.css.js +2 -1
  165. package/dist/components/Textarea/Textarea.d.ts +4 -7
  166. package/dist/components/Textarea/Textarea.js +5 -16
  167. package/dist/components/Textarea/Textarea.js.map +1 -1
  168. package/dist/components/Textarea/TextareaExample.js +3 -3
  169. package/dist/components/Textarea/TextareaExample.js.map +1 -1
  170. package/dist/components/TextareaField/TextareaField.d.ts +4 -4
  171. package/dist/components/TextareaField/TextareaField.js +6 -4
  172. package/dist/components/TextareaField/TextareaField.js.map +1 -1
  173. package/dist/components/TimePicker/TimePicker.d.ts +8 -6
  174. package/dist/components/TimePicker/TimePicker.js +10 -14
  175. package/dist/components/TimePicker/TimePicker.js.map +1 -1
  176. package/dist/components/TimePicker/TimePickerExample.js +3 -3
  177. package/dist/components/TimePicker/TimePickerExample.js.map +1 -1
  178. package/dist/components/TimePickerField/TimePickerField.d.ts +4 -4
  179. package/dist/components/TimePickerField/TimePickerField.js +6 -4
  180. package/dist/components/TimePickerField/TimePickerField.js.map +1 -1
  181. package/dist/types/common.d.ts +2 -0
  182. package/dist/types/common.js.map +1 -1
  183. package/dist/utils/demo.js +1 -1
  184. package/dist/utils/demo.js.map +1 -1
  185. package/package.json +3 -4
  186. package/src/components/Accordion/Accordion.tsx +2 -2
  187. package/src/components/Accordion/accordion.scss +10 -1
  188. package/src/components/BottomNavigation/BottomNavigation.tsx +0 -1
  189. package/src/components/BottomNavigation/bottom-navigation.scss +1 -0
  190. package/src/components/Button/button.scss +4 -0
  191. package/src/components/Checkbox/Checkbox.tsx +3 -3
  192. package/src/components/CheckboxGroup/CheckboxGroup.tsx +37 -52
  193. package/src/components/CheckboxGroup/CheckboxGroupExample.tsx +6 -0
  194. package/src/components/CheckboxGroup/checkbox-group.scss +2 -0
  195. package/src/components/CheckboxGroupField/CheckboxGroupField.tsx +15 -11
  196. package/src/components/ChipGroup/ChipGroup.tsx +0 -1
  197. package/src/components/ChipGroup/chip-group.scss +4 -0
  198. package/src/components/DatePicker/DatePicker.tsx +9 -20
  199. package/src/components/DatePicker/DatePickerExample.tsx +3 -5
  200. package/src/components/DatePickerField/DatePickerField.rtl.test.tsx +1 -1
  201. package/src/components/DatePickerField/DatePickerField.tsx +10 -6
  202. package/src/components/Dialog/Dialog.tsx +2 -3
  203. package/src/components/Fab/Fab.tsx +8 -5
  204. package/src/components/Fab/fab.scss +1 -0
  205. package/src/components/Field/Field.rtl.test.tsx +8 -6
  206. package/src/components/Field/Field.tsx +64 -61
  207. package/src/components/Field/FieldExample.tsx +27 -5
  208. package/src/components/Field/Fieldset.tsx +78 -0
  209. package/src/components/Field/field.scss +23 -27
  210. package/src/components/Field/index.tsx +1 -3
  211. package/src/components/Field/utils.ts +15 -77
  212. package/src/components/FileUpload/FileUpload.tsx +1 -1
  213. package/src/components/FileUploadItem/FileUploadItem.tsx +1 -1
  214. package/src/components/Flex/Flex.tsx +12 -7
  215. package/src/components/InlineAlert/InlineAlert.rtl.test.tsx +1 -1
  216. package/src/components/InlineAlert/InlineAlert.tsx +3 -3
  217. package/src/components/Input/Input.tsx +140 -48
  218. package/src/components/Input/InputExample.tsx +4 -6
  219. package/src/components/Input/index.tsx +0 -1
  220. package/src/components/InputField/InputField.tsx +10 -6
  221. package/src/components/InputNumber/InputNumber.tsx +11 -16
  222. package/src/components/InputNumber/InputNumberExample.tsx +7 -4
  223. package/src/components/InputNumber/input-number.scss +1 -0
  224. package/src/components/InputNumberField/InputNumberField.tsx +10 -6
  225. package/src/components/InputPhone/InputPhone.tsx +14 -18
  226. package/src/components/InputPhone/InputPhoneExample.tsx +7 -6
  227. package/src/components/InputPhone/input-phone.scss +1 -0
  228. package/src/components/InputPhoneField/InputPhoneField.tsx +10 -6
  229. package/src/components/ListItem/list-item.scss +1 -0
  230. package/src/components/Modal/Modal.tsx +26 -30
  231. package/src/components/Modal/ModalExample.tsx +7 -2
  232. package/src/components/Modal/modal.scss +1 -1
  233. package/src/components/OTPInput/otp-input.scss +1 -0
  234. package/src/components/Pagination/Pagination.tsx +2 -2
  235. package/src/components/Password/Password.tsx +15 -17
  236. package/src/components/Password/PasswordExample.tsx +13 -5
  237. package/src/components/PasswordField/PasswordField.tsx +10 -6
  238. package/src/components/Popover/Popover.tsx +0 -1
  239. package/src/components/RadioGroup/RadioGroup.tsx +14 -20
  240. package/src/components/RadioGroupField/RadioGroupField.tsx +16 -11
  241. package/src/components/SearchBar/SearchBar.tsx +0 -1
  242. package/src/components/SegmentedControl/SegmentedControl.tsx +0 -1
  243. package/src/components/Select/Select.tsx +13 -14
  244. package/src/components/Select/SelectExample.tsx +7 -4
  245. package/src/components/SelectField/SelectField.rtl.test.tsx +7 -18
  246. package/src/components/SelectField/SelectField.tsx +10 -6
  247. package/src/components/Slider/Slider.tsx +1 -2
  248. package/src/components/Snackbar/Snackbar.tsx +0 -1
  249. package/src/components/Switch/Switch.tsx +0 -1
  250. package/src/components/TabGroup/TabGroup.tsx +0 -1
  251. package/src/components/TabList/TabList.tsx +0 -1
  252. package/src/components/TabList/tab-list.scss +1 -0
  253. package/src/components/Table/table.scss +2 -1
  254. package/src/components/Textarea/Textarea.tsx +8 -17
  255. package/src/components/Textarea/TextareaExample.tsx +3 -5
  256. package/src/components/TextareaField/TextareaField.tsx +10 -6
  257. package/src/components/TimePicker/TimePicker.tsx +12 -15
  258. package/src/components/TimePicker/TimePickerExample.tsx +3 -5
  259. package/src/components/TimePickerField/TimePickerField.tsx +10 -6
  260. package/src/types/common.ts +8 -0
  261. package/src/utils/demo.ts +1 -1
  262. package/dist/components/Field/FieldDescription.d.ts +0 -9
  263. package/dist/components/Field/FieldDescription.js +0 -13
  264. package/dist/components/Field/FieldDescription.js.map +0 -1
  265. package/dist/components/Field/FieldError.d.ts +0 -11
  266. package/dist/components/Field/FieldError.js +0 -14
  267. package/dist/components/Field/FieldError.js.map +0 -1
  268. package/dist/components/Field/FieldLabel.d.ts +0 -21
  269. package/dist/components/Field/FieldLabel.js +0 -14
  270. package/dist/components/Field/FieldLabel.js.map +0 -1
  271. package/dist/components/FormField/FormField.d.ts +0 -66
  272. package/dist/components/FormField/FormField.js +0 -31
  273. package/dist/components/FormField/FormField.js.map +0 -1
  274. package/dist/components/FormField/FormFieldExample.d.ts +0 -9
  275. package/dist/components/FormField/FormFieldExample.js +0 -99
  276. package/dist/components/FormField/FormFieldExample.js.map +0 -1
  277. package/dist/components/FormField/index.d.ts +0 -1
  278. package/dist/components/FormField/index.js +0 -2
  279. package/dist/components/FormField/index.js.map +0 -1
  280. package/dist/components/Input/InputElement.d.ts +0 -82
  281. package/dist/components/Input/InputElement.js +0 -64
  282. package/dist/components/Input/InputElement.js.map +0 -1
  283. package/src/components/Field/FieldDescription.tsx +0 -17
  284. package/src/components/Field/FieldError.tsx +0 -25
  285. package/src/components/Field/FieldLabel.tsx +0 -44
  286. package/src/components/FormField/FormField.rtl.test.tsx +0 -20
  287. package/src/components/FormField/FormField.tsx +0 -95
  288. package/src/components/FormField/FormFieldExample.tsx +0 -277
  289. package/src/components/FormField/index.tsx +0 -1
  290. package/src/components/Input/InputElement.tsx +0 -192
@@ -60,7 +60,7 @@ export function Accordion({ items: itemsProp, singleOpen = true }) {
60
60
  });
61
61
  return (_jsx("div", { "data-bspk": "accordion", children: items.map(({ children, title, subtitle: subtitle, leading, trailing, disabled, id }, index) => {
62
62
  const isOpen = openSections.includes(id);
63
- return (_jsxs("section", { "data-disabled": disabled || undefined, id: id, children: [_jsxs("button", { "aria-controls": `${id}-content`, "aria-expanded": isOpen, "data-header": true, disabled: disabled || undefined, onClick: !disabled ? toggleOpen(id) : undefined, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsxs("span", { "data-title-subtitle": true, children: [_jsx("span", { "data-title": true, children: title }), subtitle && _jsx("span", { "data-subtitle": true, children: subtitle })] }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), _jsx("span", { "data-arrow": true, children: isOpen ? _jsx(SvgKeyboardArrowUp, {}) : _jsx(SvgKeyboardArrowDown, {}) })] }), isOpen && (_jsx("div", { "data-content": true, "data-hidden": !isOpen || undefined, id: `${id}-content`, children: children })), _jsx("span", { "data-divider": true })] }, id || index));
63
+ return (_jsxs("section", { "data-bspk": "accordion-item", "data-disabled": disabled || undefined, id: id, children: [_jsxs("button", { "aria-controls": `${id}-content`, "aria-expanded": isOpen, "data-header": true, disabled: disabled || undefined, onClick: !disabled ? toggleOpen(id) : undefined, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsxs("span", { "data-title-subtitle": true, children: [_jsx("span", { "data-title": true, children: title }), subtitle && _jsx("span", { "data-subtitle": true, children: subtitle })] }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), _jsx("span", { "data-arrow": true, children: isOpen ? _jsx(SvgKeyboardArrowUp, {}) : _jsx(SvgKeyboardArrowDown, {}) })] }), isOpen && (_jsx("div", { "data-content": true, id: `${id}-content`, children: children })), _jsx("span", { "data-divider": true })] }, id || index));
64
64
  }) }));
65
65
  }
66
66
  //# sourceMappingURL=Accordion.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
@@ -1,20 +1,24 @@
1
1
  [data-bspk=accordion] {
2
+ display: block;
2
3
  width: 100%;
3
4
  padding: var(--spacing-sizing-02);
4
5
  }
5
- [data-bspk=accordion] > section {
6
+ [data-bspk=accordion]:empty {
7
+ display: none;
8
+ }
9
+ [data-bspk=accordion] > [data-bspk=accordion-item] {
6
10
  --border-bottom-color: var(--stroke-neutral-base);
7
11
  display: flex;
8
12
  flex-direction: column;
9
13
  justify-content: center;
10
14
  color: var(--foreground-neutral-on-surface);
11
15
  }
12
- [data-bspk=accordion] > section[data-disabled] {
16
+ [data-bspk=accordion] > [data-bspk=accordion-item][data-disabled] {
13
17
  --border-bottom-color: var(--stroke-neutral-disabled-light);
14
18
  background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
15
19
  color: var(--foreground-neutral-disabled-on-surface);
16
20
  }
17
- [data-bspk=accordion] > section button[data-header] {
21
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] {
18
22
  display: flex;
19
23
  flex-direction: row;
20
24
  align-items: center;
@@ -28,42 +32,45 @@
28
32
  outline: none;
29
33
  min-height: var(--spacing-sizing-12);
30
34
  }
31
- [data-bspk=accordion] > section button[data-header] [data-title-subtitle] {
35
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-title-subtitle] {
32
36
  display: flex;
33
37
  flex-direction: column;
34
38
  align-items: flex-start;
35
39
  flex: 1;
36
40
  }
37
- [data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-title] {
41
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-title-subtitle] [data-title] {
38
42
  font: var(--labels-base);
39
43
  }
40
- [data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-subtitle] {
44
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-title-subtitle] [data-subtitle] {
41
45
  font: var(--body-x-small);
42
46
  color: var(--foreground-neutral-on-surface-variant-01);
43
47
  }
44
- [data-bspk=accordion] > section button[data-header] [data-arrow] {
48
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-arrow] {
45
49
  display: flex;
46
50
  align-items: center;
47
51
  justify-content: center;
48
52
  margin-left: var(--spacing-sizing-02);
49
53
  }
50
- [data-bspk=accordion] > section button[data-header]:not(:disabled):hover {
54
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-arrow] svg {
55
+ width: var(--spacing-sizing-06);
56
+ }
57
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header]:not(:disabled):hover {
51
58
  background-image: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
52
59
  }
53
- [data-bspk=accordion] > section button[data-header]:not(:disabled):active {
60
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header]:not(:disabled):active {
54
61
  background-image: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
55
62
  }
56
- [data-bspk=accordion] > section button[data-header]:disabled {
63
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header]:disabled {
57
64
  cursor: not-allowed;
58
65
  color: var(--foreground-neutral-disabled-on-surface);
59
66
  border-color: var(--stroke-neutral-disabled-light);
60
67
  }
61
- [data-bspk=accordion] > section:has(:focus-visible) {
68
+ [data-bspk=accordion] > [data-bspk=accordion-item]:has(:focus-visible) {
62
69
  outline: 2px solid var(--stroke-neutral-focus);
63
70
  border-color: var(--stroke-neutral-focus);
64
71
  margin-bottom: 1px;
65
72
  }
66
- [data-bspk=accordion] > section [data-content] {
73
+ [data-bspk=accordion] > [data-bspk=accordion-item] [data-content] {
67
74
  padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
68
75
  }
69
76
  [data-bspk=accordion] [data-divider] {
@@ -2,22 +2,26 @@
2
2
  * Do not edit this file directly. */
3
3
  const style = document.createElement('style');
4
4
  style.appendChild(document.createTextNode(`[data-bspk=accordion] {
5
+ display: block;
5
6
  width: 100%;
6
7
  padding: var(--spacing-sizing-02);
7
8
  }
8
- [data-bspk=accordion] > section {
9
+ [data-bspk=accordion]:empty {
10
+ display: none;
11
+ }
12
+ [data-bspk=accordion] > [data-bspk=accordion-item] {
9
13
  --border-bottom-color: var(--stroke-neutral-base);
10
14
  display: flex;
11
15
  flex-direction: column;
12
16
  justify-content: center;
13
17
  color: var(--foreground-neutral-on-surface);
14
18
  }
15
- [data-bspk=accordion] > section[data-disabled] {
19
+ [data-bspk=accordion] > [data-bspk=accordion-item][data-disabled] {
16
20
  --border-bottom-color: var(--stroke-neutral-disabled-light);
17
21
  background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
18
22
  color: var(--foreground-neutral-disabled-on-surface);
19
23
  }
20
- [data-bspk=accordion] > section button[data-header] {
24
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] {
21
25
  display: flex;
22
26
  flex-direction: row;
23
27
  align-items: center;
@@ -31,42 +35,45 @@ style.appendChild(document.createTextNode(`[data-bspk=accordion] {
31
35
  outline: none;
32
36
  min-height: var(--spacing-sizing-12);
33
37
  }
34
- [data-bspk=accordion] > section button[data-header] [data-title-subtitle] {
38
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-title-subtitle] {
35
39
  display: flex;
36
40
  flex-direction: column;
37
41
  align-items: flex-start;
38
42
  flex: 1;
39
43
  }
40
- [data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-title] {
44
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-title-subtitle] [data-title] {
41
45
  font: var(--labels-base);
42
46
  }
43
- [data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-subtitle] {
47
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-title-subtitle] [data-subtitle] {
44
48
  font: var(--body-x-small);
45
49
  color: var(--foreground-neutral-on-surface-variant-01);
46
50
  }
47
- [data-bspk=accordion] > section button[data-header] [data-arrow] {
51
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-arrow] {
48
52
  display: flex;
49
53
  align-items: center;
50
54
  justify-content: center;
51
55
  margin-left: var(--spacing-sizing-02);
52
56
  }
53
- [data-bspk=accordion] > section button[data-header]:not(:disabled):hover {
57
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header] [data-arrow] svg {
58
+ width: var(--spacing-sizing-06);
59
+ }
60
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header]:not(:disabled):hover {
54
61
  background-image: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
55
62
  }
56
- [data-bspk=accordion] > section button[data-header]:not(:disabled):active {
63
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header]:not(:disabled):active {
57
64
  background-image: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
58
65
  }
59
- [data-bspk=accordion] > section button[data-header]:disabled {
66
+ [data-bspk=accordion] > [data-bspk=accordion-item] button[data-header]:disabled {
60
67
  cursor: not-allowed;
61
68
  color: var(--foreground-neutral-disabled-on-surface);
62
69
  border-color: var(--stroke-neutral-disabled-light);
63
70
  }
64
- [data-bspk=accordion] > section:has(:focus-visible) {
71
+ [data-bspk=accordion] > [data-bspk=accordion-item]:has(:focus-visible) {
65
72
  outline: 2px solid var(--stroke-neutral-focus);
66
73
  border-color: var(--stroke-neutral-focus);
67
74
  margin-bottom: 1px;
68
75
  }
69
- [data-bspk=accordion] > section [data-content] {
76
+ [data-bspk=accordion] > [data-bspk=accordion-item] [data-content] {
70
77
  padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
71
78
  }
72
79
  [data-bspk=accordion] [data-divider] {
@@ -19,7 +19,6 @@ export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'o
19
19
  *
20
20
  * @example
21
21
  * import { BottomNavigation } from '@bspk/ui/BottomNavigation';
22
- * import { useState } from 'react';
23
22
  *
24
23
  * () => {
25
24
  * const [value, setValue] = useState<string>('1');
@@ -6,7 +6,6 @@ import { TabList } from '../TabList';
6
6
  *
7
7
  * @example
8
8
  * import { BottomNavigation } from '@bspk/ui/BottomNavigation';
9
- * import { useState } from 'react';
10
9
  *
11
10
  * () => {
12
11
  * const [value, setValue] = useState<string>('1');
@@ -1 +1 @@
1
- {"version":3,"file":"BottomNavigation.js","sourceRoot":"","sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAiB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,YAAY,EAAyB;IAC1G,OAAO,CACH,KAAC,OAAO,iBAAW,mBAAmB,eAAY,IAAI,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,YAAY,GAAI,CACnH,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"BottomNavigation.js","sourceRoot":"","sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAiB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,YAAY,EAAyB;IAC1G,OAAO,CACH,KAAC,OAAO,iBAAW,mBAAmB,eAAY,IAAI,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,YAAY,GAAI,CACnH,CAAC;AACN,CAAC"}
@@ -24,6 +24,7 @@ ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li {
24
24
  }
25
25
  ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[data-pseudo=focus] > ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li, ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:focus-visible {
26
26
  outline: solid 2px var(--stroke-neutral-focus);
27
+ isolation: isolate;
27
28
  }
28
29
  ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-selected=true] {
29
30
  color: var(--foreground-brand-primary);
@@ -27,6 +27,7 @@ ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li {
27
27
  }
28
28
  ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[data-pseudo=focus] > ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li, ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:focus-visible {
29
29
  outline: solid 2px var(--stroke-neutral-focus);
30
+ isolation: isolate;
30
31
  }
31
32
  ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-selected=true] {
32
33
  color: var(--foreground-brand-primary);
@@ -1,4 +1,5 @@
1
1
  [data-bspk=button] {
2
+ display: flex;
2
3
  flex-direction: row;
3
4
  gap: var(--spacing-sizing-02);
4
5
  border: none;
@@ -103,6 +104,7 @@
103
104
  }
104
105
  [data-pseudo=focus] > [data-bspk=button][data-variant=primary]:not([disabled]), [data-bspk=button][data-variant=primary]:not([disabled]):focus-visible {
105
106
  outline: solid 2px var(--stroke-neutral-focus);
107
+ isolation: isolate;
106
108
  }
107
109
  [data-bspk=button][data-variant=primary][data-destructive]:not([disabled]) {
108
110
  --primary-background: var(--status-error);
@@ -125,6 +127,7 @@
125
127
  }
126
128
  [data-pseudo=focus] > [data-bspk=button][data-variant=secondary]:not([disabled]), [data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible {
127
129
  outline: solid 2px var(--stroke-neutral-focus);
130
+ isolation: isolate;
128
131
  }
129
132
  [data-bspk=button][data-variant=secondary][data-destructive]:not([disabled]) {
130
133
  background: transparent;
@@ -146,6 +149,7 @@
146
149
  }
147
150
  [data-pseudo=focus] > [data-bspk=button][data-variant=tertiary]:not([disabled]), [data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible {
148
151
  outline: solid 2px var(--stroke-neutral-focus);
152
+ isolation: isolate;
149
153
  }
150
154
  [data-bspk=button][data-variant=tertiary][data-destructive]:not([disabled]) {
151
155
  color: var(--status-error);
@@ -2,6 +2,7 @@
2
2
  * Do not edit this file directly. */
3
3
  const style = document.createElement('style');
4
4
  style.appendChild(document.createTextNode(`[data-bspk=button] {
5
+ display: flex;
5
6
  flex-direction: row;
6
7
  gap: var(--spacing-sizing-02);
7
8
  border: none;
@@ -106,6 +107,7 @@ style.appendChild(document.createTextNode(`[data-bspk=button] {
106
107
  }
107
108
  [data-pseudo=focus] > [data-bspk=button][data-variant=primary]:not([disabled]), [data-bspk=button][data-variant=primary]:not([disabled]):focus-visible {
108
109
  outline: solid 2px var(--stroke-neutral-focus);
110
+ isolation: isolate;
109
111
  }
110
112
  [data-bspk=button][data-variant=primary][data-destructive]:not([disabled]) {
111
113
  --primary-background: var(--status-error);
@@ -128,6 +130,7 @@ style.appendChild(document.createTextNode(`[data-bspk=button] {
128
130
  }
129
131
  [data-pseudo=focus] > [data-bspk=button][data-variant=secondary]:not([disabled]), [data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible {
130
132
  outline: solid 2px var(--stroke-neutral-focus);
133
+ isolation: isolate;
131
134
  }
132
135
  [data-bspk=button][data-variant=secondary][data-destructive]:not([disabled]) {
133
136
  background: transparent;
@@ -149,6 +152,7 @@ style.appendChild(document.createTextNode(`[data-bspk=button] {
149
152
  }
150
153
  [data-pseudo=focus] > [data-bspk=button][data-variant=tertiary]:not([disabled]), [data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible {
151
154
  outline: solid 2px var(--stroke-neutral-focus);
155
+ isolation: isolate;
152
156
  }
153
157
  [data-bspk=button][data-variant=tertiary][data-destructive]:not([disabled]) {
154
158
  color: var(--status-error);
@@ -35,9 +35,9 @@ import { useEffect, useRef } from 'react';
35
35
  * @name Checkbox
36
36
  * @phase Stable
37
37
  */
38
- export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, required, ...props }) {
38
+ export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp = false, invalid, disabled, required, ...props }) {
39
+ const checked = !!checkedProp;
39
40
  const indeterminate = !!indeterminateProp;
40
- const checked = !!checkedProp && !indeterminate;
41
41
  const inputRef = useRef();
42
42
  useEffect(() => {
43
43
  if (!inputRef.current)
@@ -49,6 +49,6 @@ export function Checkbox({ checked: checkedProp = false, indeterminate: indeterm
49
49
  return;
50
50
  inputRef.current = node;
51
51
  node.indeterminate = indeterminate;
52
- }, required: required || undefined, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [checked && (_jsx("svg", { "data-checked": true, fill: "none", viewBox: "0 0 14 11", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z", fill: "currentColor" }) })), indeterminate && (_jsx("svg", { "data-indeterminate": true, fill: "none", viewBox: "0 0 12 4", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z", fill: "currentColor" }) }))] })] }));
52
+ }, required: required || undefined, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [checked && !indeterminate && (_jsx("svg", { "data-checked": true, fill: "none", viewBox: "0 0 14 11", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z", fill: "currentColor" }) })), indeterminate && (_jsx("svg", { "data-indeterminate": true, fill: "none", viewBox: "0 0 12 4", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z", fill: "currentColor" }) }))] })] }));
53
53
  }
54
54
  //# sourceMappingURL=Checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAAgB,UAAU,aACtB,mBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,GAAG,KAAK,EACxC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,CAAC;IAC9B,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAE1C,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAAgB,UAAU,aACtB,mBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CAAC,aAAa,IAAI,CAC1B,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}
@@ -1,8 +1,7 @@
1
1
  import './checkbox-group.scss';
2
- import { CheckboxProps } from '-/components/Checkbox';
3
- import { ToggleOptionProps } from '-/components/ToggleOption';
2
+ import { CheckboxOptionProps } from '-/components/CheckboxOption';
4
3
  import { ElementProps, FieldControlProps } from '-/types/common';
5
- export type CheckboxGroupOption = Pick<CheckboxProps, 'value'> & Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'>;
4
+ export type CheckboxGroupOption = Omit<CheckboxOptionProps, 'name' | 'onChange'>;
6
5
  export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> & {
7
6
  /**
8
7
  * The options for the checkboxes.
@@ -25,7 +24,7 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
25
24
  */
26
25
  selectAll?: boolean;
27
26
  /** The props for the select all checkbox. */
28
- selectAllProps?: CheckboxGroupOption;
27
+ selectAllProps?: Pick<CheckboxOptionProps, 'aria-label' | 'description' | 'label'>;
29
28
  };
30
29
  /**
31
30
  * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
@@ -58,5 +57,5 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
58
57
  * @name CheckboxGroup
59
58
  * @phase Stable
60
59
  */
61
- export declare function CheckboxGroup({ onChange, options, name, value, selectAll, selectAllProps, disabled, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
60
+ export declare function CheckboxGroup({ onChange, options, name, value, selectAll, selectAllProps, disabled, invalid, id: idProp, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, required, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
62
61
  /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -1,8 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import './checkbox-group.css.js';
3
- import { Checkbox } from '../Checkbox';
4
- import { useFieldInit } from '../Field';
5
- import { ToggleOption } from '../ToggleOption';
3
+ import { CheckboxOption } from '../CheckboxOption';
4
+ import { useId } from '../../hooks/useId';
6
5
  const ALL_LABEL = 'All';
7
6
  /**
8
7
  * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
@@ -35,15 +34,11 @@ const ALL_LABEL = 'All';
35
34
  * @name CheckboxGroup
36
35
  * @phase Stable
37
36
  */
38
- export function CheckboxGroup({ onChange, options = [], name, value = [], selectAll, selectAllProps, disabled = false, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }) {
39
- const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
40
- idProp,
41
- required,
42
- disabled,
43
- invalidProp,
44
- });
45
- return (_jsxs("div", { ...props, "aria-describedby": ariaDescribedByProp || ariaDescribedBy || undefined, "data-bspk": "checkbox-group", id: id, role: "group", children: [selectAll && (_jsx(ToggleOption, { label: selectAllProps?.label || ALL_LABEL, children: _jsx(Checkbox, { "aria-errormessage": ariaErrorMessageProp || ariaErrorMessage || undefined, "aria-label": selectAllProps?.label || ALL_LABEL, checked: !!value.length && value.length === options.length, "data-testid": "selectAll-Checkbox", disabled: disabled, indeterminate: !!value.length && value.length < options.length, invalid: invalid || undefined, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), value: "all" }) })), options.map(({ label, description, value: optionValue, disabled: optionDisabled }) => (_jsx(ToggleOption, { description: description, disabled: disabled || optionDisabled, label: label, children: _jsx(Checkbox, { "aria-errormessage": ariaErrorMessageProp || ariaErrorMessage || undefined, "aria-label": label, checked: value.includes(optionValue), disabled: disabled || optionDisabled, invalid: invalid || undefined, name: name, onChange: (checked) => {
46
- onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
47
- }, value: optionValue }) }, optionValue)))] }));
37
+ export function CheckboxGroup({ onChange, options = [], name, value = [], selectAll, selectAllProps, disabled = false, invalid = false, id: idProp, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, required, ...props }) {
38
+ const id = useId(idProp);
39
+ const availableOptions = options.filter((o) => !o.disabled);
40
+ return (_jsxs("div", { ...props, "aria-describedby": ariaDescribedBy || undefined, "data-bspk": "checkbox-group", id: id, role: "group", children: [selectAll && (_jsx(CheckboxOption, { "aria-label": ALL_LABEL, label: ALL_LABEL, ...selectAllProps, "aria-errormessage": ariaErrorMessage || undefined, checked: !!value.length && value.length === availableOptions.length, "data-testid": "selectAll-Checkbox", disabled: disabled, indeterminate: !!value.length && value.length < availableOptions.length, invalid: invalid || undefined, name: name, onChange: (checked) => onChange(checked ? availableOptions.map((o) => o.value) : []), value: "all" })), options.map(({ label, description, value: optionValue, disabled: optionDisabled }) => (_jsx(CheckboxOption, { "aria-errormessage": ariaErrorMessage || undefined, "aria-label": label, checked: value.includes(optionValue), description: description, disabled: disabled || optionDisabled, invalid: invalid || undefined, label: label, name: name, onChange: (checked) => {
41
+ onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
42
+ }, required: required, value: optionValue }, optionValue)))] }));
48
43
  }
49
44
  //# sourceMappingURL=CheckboxGroup.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAiB,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAG5E,MAAM,SAAS,GAAG,KAAK,CAAC;AA8BxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,SAAS,EACT,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,kBAAkB,EAAE,mBAAmB,EACvC,mBAAmB,EAAE,oBAAoB,EACzC,GAAG,KAAK,EAC8B;IACtC,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,OAAO,CACH,kBACQ,KAAK,sBACS,mBAAmB,IAAI,eAAe,IAAI,SAAS,eAC3D,gBAAgB,EAC1B,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,CACV,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,SAAS,YACnD,KAAC,QAAQ,yBACc,oBAAoB,IAAI,gBAAgB,IAAI,SAAS,gBAC5D,cAAc,EAAE,KAAK,IAAI,SAAS,EAC9C,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,iBAC9C,oBAAoB,EAChC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,KAAK,EAAC,KAAK,GACb,GACS,CAClB,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACnF,KAAC,YAAY,IACT,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,cAAc,EAEpC,KAAK,EAAE,KAAK,YAEZ,KAAC,QAAQ,yBACc,oBAAoB,IAAI,gBAAgB,IAAI,SAAS,gBAC5D,KAAK,EACjB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,EACpC,QAAQ,EAAE,QAAQ,IAAI,cAAc,EACpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC;oBACzF,CAAC,EACD,KAAK,EAAE,WAAW,GACpB,IAdG,WAAW,CAeL,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAuB,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,MAAM,SAAS,GAAG,KAAK,CAAC;AA6BxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,SAAS,EACT,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,EAAE,EAAE,MAAM,EACV,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,QAAQ,EACR,GAAG,KAAK,EAC8B;IACtC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAE5D,OAAO,CACH,kBAAS,KAAK,sBAAoB,eAAe,IAAI,SAAS,eAAY,gBAAgB,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,aAC1G,SAAS,IAAI,CACV,KAAC,cAAc,kBACC,SAAS,EACrB,KAAK,EAAE,SAAS,KACZ,cAAc,uBACC,gBAAgB,IAAI,SAAS,EAChD,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,KAAK,gBAAgB,CAAC,MAAM,iBACvD,oBAAoB,EAChC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,MAAM,EACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EACpF,KAAK,EAAC,KAAK,GACb,CACL,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACnF,KAAC,cAAc,yBACQ,gBAAgB,IAAI,SAAS,gBACpC,KAAK,EACjB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,EACpC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,IAAI,cAAc,EACpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAE7B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;oBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC;gBACzF,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,WAAW,IAPb,WAAW,CAQlB,CACL,CAAC,IACA,CACT,CAAC;AACN,CAAC"}
@@ -64,6 +64,11 @@ export const CheckboxGroupExample = {
64
64
  disabled: true,
65
65
  },
66
66
  { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
67
+ {
68
+ label: 'Option 4',
69
+ value: 'option4',
70
+ description: 'This is a very long label for option 4 that never seems to end and just goes on and on without stopping',
71
+ },
67
72
  ],
68
73
  },
69
74
  };
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroupExample.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAiC;IACjD;QACI,KAAK,EAAE,mBAAmB;QAC1B,SAAS,EAAE;YACP,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;oBAClD,QAAQ,EAAE,IAAI;iBACjB;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;iBACrD;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;aACxE;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,OAAO;IACP,YAAY,EAAE;QACV,SAAS,EAAE,IAAI;QACf,OAAO,EAAE;YACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;YAChF;gBACI,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,qCAAqC;gBAClD,QAAQ,EAAE,IAAI;aACjB;YACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;SACnF;KACJ;CACJ,CAAC"}
1
+ {"version":3,"file":"CheckboxGroupExample.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAiC;IACjD;QACI,KAAK,EAAE,mBAAmB;QAC1B,SAAS,EAAE;YACP,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;oBAClD,QAAQ,EAAE,IAAI;iBACjB;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;gBAChF;oBACI,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,SAAS;oBAChB,WAAW,EAAE,qCAAqC;iBACrD;gBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;aACnF;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;IACD;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,KAAK,EAAE,CAAC,SAAS,CAAC;YAClB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE;gBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;aACxE;YACD,CAAC,YAAY,CAAC,EAAE,gBAAgB;YAChC,IAAI,EAAE,gBAAgB;SACzB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,OAAO;IACP,YAAY,EAAE;QACV,SAAS,EAAE,IAAI;QACf,OAAO,EAAE;YACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;YAChF;gBACI,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,qCAAqC;gBAClD,QAAQ,EAAE,IAAI;aACjB;YACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;YAChF;gBACI,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,SAAS;gBAChB,WAAW,EACP,yGAAyG;aAChH;SACJ;KACJ;CACJ,CAAC"}
@@ -5,3 +5,5 @@
5
5
  max-width: 100%;
6
6
  --list-item-height: 'auto';
7
7
  }
8
+
9
+ /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -8,5 +8,7 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox-group] {
8
8
  max-width: 100%;
9
9
  --list-item-height: 'auto';
10
10
  }
11
+
12
+ /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
11
13
  `));
12
14
  document.head.appendChild(style);
@@ -1,6 +1,6 @@
1
1
  import { CheckboxGroupProps } from '-/components/CheckboxGroup';
2
- import { FormFieldControlProps } from '-/components/FormField';
3
- export type CheckboxGroupFieldProps = FormFieldControlProps<CheckboxGroupProps>;
2
+ import { FieldControlProps } from '-/components/Field';
3
+ export type CheckboxGroupFieldProps = FieldControlProps<CheckboxGroupProps>;
4
4
  /**
5
5
  * A field wrapper for the CheckboxGroup component.
6
6
  *
@@ -11,5 +11,5 @@ export type CheckboxGroupFieldProps = FormFieldControlProps<CheckboxGroupProps>;
11
11
  *
12
12
  * @generated
13
13
  */
14
- export declare function CheckboxGroupField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: CheckboxGroupFieldProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function CheckboxGroupField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }: CheckboxGroupFieldProps): import("react/jsx-runtime").JSX.Element;
15
15
  /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
@@ -1,6 +1,7 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { CheckboxGroup } from '../CheckboxGroup';
3
- import { Field, FieldDescription, FieldError, FieldLabel } from '../Field';
3
+ import { Fieldset, propsWithAria } from '../Field';
4
+ import { useId } from '../../hooks/useId';
4
5
  /**
5
6
  * A field wrapper for the CheckboxGroup component.
6
7
  *
@@ -11,7 +12,8 @@ import { Field, FieldDescription, FieldError, FieldLabel } from '../Field';
11
12
  *
12
13
  * @generated
13
14
  */
14
- export function CheckboxGroupField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
15
- return (_jsxs(Field, { as: "fieldset", style: style, children: [_jsx(FieldLabel, { as: "legend", labelTrailing: labelTrailing, style: style, children: label }), _jsx(CheckboxGroup, { ...controlProps }), !errorMessage && helperText && _jsx(FieldDescription, { children: helperText }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
15
+ export function CheckboxGroupField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }) {
16
+ const id = useId(idProp);
17
+ return (_jsx(Fieldset, { controlId: id, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(CheckboxGroup, { ...propsWithAria({ controlProps, id, errorMessage, helperText }) }) }));
16
18
  }
17
19
  //# sourceMappingURL=CheckboxGroupField.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroupField.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroupField/CheckboxGroupField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAsB,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrF;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACO;IACtB,OAAO,CACH,MAAC,KAAK,IAAC,EAAE,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK,aAC7B,KAAC,UAAU,IAAC,EAAE,EAAC,QAAQ,EAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,YAC7D,KAAK,GACG,EACb,KAAC,aAAa,OAAK,YAAY,GAAI,EAClC,CAAC,YAAY,IAAI,UAAU,IAAI,KAAC,gBAAgB,cAAE,UAAU,GAAoB,EAChF,YAAY,IAAI,KAAC,UAAU,cAAE,YAAY,GAAc,IACpD,CACX,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"CheckboxGroupField.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroupField/CheckboxGroupField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAsB,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAqB,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,EAAE,EAAE,MAAM,EACV,GAAG,YAAY,EACO;IACtB,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,OAAO,CACH,KAAC,QAAQ,IACL,SAAS,EAAE,EAAE,EACb,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,aAAa,OAAK,aAAa,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC,GAAI,GAC7E,CACd,CAAC;AACN,CAAC"}
@@ -15,7 +15,6 @@ export type ChipGroupProps = {
15
15
  * A component that manages the layout of a group of chips.
16
16
  *
17
17
  * @example
18
- * import { Chip } from '@bspk/ui/Chip';
19
18
  * import { ChipGroup } from '@bspk/ui/ChipGroup';
20
19
  *
21
20
  * <ChipGroup
@@ -6,7 +6,6 @@ import { Chip } from '../Chip';
6
6
  * A component that manages the layout of a group of chips.
7
7
  *
8
8
  * @example
9
- * import { Chip } from '@bspk/ui/Chip';
10
9
  * import { ChipGroup } from '@bspk/ui/ChipGroup';
11
10
  *
12
11
  * <ChipGroup
@@ -1 +1 @@
1
- {"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";;AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,IAAI,EAAa,MAAM,mBAAmB,CAAC;AAapD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,EAAkB;IAClE,OAAO,CACH,2BAAe,YAAY,iBAAc,QAAQ,KAAK,QAAQ,IAAI,SAAS,YACtE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,eAAC,IAAI,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,GAAG,GAAI,CAAC,CAAC,CAAC,CAAC,IAAI,GAC1F,CACT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";;AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,IAAI,EAAa,MAAM,mBAAmB,CAAC;AAapD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,EAAkB;IAClE,OAAO,CACH,2BAAe,YAAY,iBAAc,QAAQ,KAAK,QAAQ,IAAI,SAAS,YACtE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,eAAC,IAAI,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,GAAG,GAAI,CAAC,CAAC,CAAC,CAAC,IAAI,GAC1F,CACT,CAAC;AACN,CAAC"}
@@ -5,6 +5,9 @@
5
5
  flex-flow: row wrap;
6
6
  padding-bottom: var(--spacing-sizing-01);
7
7
  }
8
+ [data-bspk=chip-group]:empty {
9
+ display: none;
10
+ }
8
11
  [data-bspk=chip-group][data-scroll] {
9
12
  overflow: auto;
10
13
  flex-wrap: nowrap;
@@ -8,6 +8,9 @@ style.appendChild(document.createTextNode(`[data-bspk=chip-group] {
8
8
  flex-flow: row wrap;
9
9
  padding-bottom: var(--spacing-sizing-01);
10
10
  }
11
+ [data-bspk=chip-group]:empty {
12
+ display: none;
13
+ }
11
14
  [data-bspk=chip-group][data-scroll] {
12
15
  overflow: auto;
13
16
  flex-wrap: nowrap;
@@ -38,19 +38,15 @@ export type DatePickerProps = Omit<FieldControlProps, 'aria-label' | 'onChange'
38
38
  * For a more complete example with field usage, see the DatePickerField component.
39
39
  *
40
40
  * @example
41
- * import { DatePicker } from '@bspk/ui/DatePicker';
42
- * import { Field, FieldLabel } from '@bspk/ui/Field';
43
- * import { useState } from 'react';
41
+ * import { DatePicker } from '-/components/DatePicker';
44
42
  *
45
43
  * () => {
46
44
  * const [fieldDate, setFieldDate] = useState<string>();
47
45
  *
48
46
  * return (
49
47
  * <div style={{ width: 320 }}>
50
- * <Field>
51
- * <FieldLabel>Date</FieldLabel>
52
- * <DatePicker name="date1" onChange={setFieldDate} required value={fieldDate} />
53
- * <FieldDescription>The date picker allows you to select a date.</FieldDescription>
48
+ * <Field controlId="date1" helperText="The date picker allows you to select a date." label="Date">
49
+ * <DatePicker id="date1" name="date1" onChange={setFieldDate} required value={fieldDate} />
54
50
  * </Field>
55
51
  * </div>
56
52
  * );
@@ -59,5 +55,5 @@ export type DatePickerProps = Omit<FieldControlProps, 'aria-label' | 'onChange'
59
55
  * @name DatePicker
60
56
  * @phase Stable
61
57
  */
62
- export declare function DatePicker({ value, onChange, disabled, readOnly, closeCalendarOnChange, name, placeholder, invalid: invalidProp, required, size, id: idProp, 'aria-label': ariaLabel, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
58
+ export declare function DatePicker({ value, onChange, disabled, readOnly, closeCalendarOnChange, name, placeholder, invalid, required, size, id, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
63
59
  /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */