@proyecto-viviana/solidaria-components 0.7.0-rc.0 → 0.7.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (516) hide show
  1. package/README.md +58 -32
  2. package/dist/ActionBar.d.ts.map +1 -1
  3. package/dist/ActionBar.js +6 -2
  4. package/dist/ActionBar.js.map +1 -1
  5. package/dist/ActionBar.jsx +6 -2
  6. package/dist/ActionBar.jsx.map +1 -1
  7. package/dist/ActionGroup.d.ts.map +1 -1
  8. package/dist/ActionGroup.js +6 -2
  9. package/dist/ActionGroup.js.map +1 -1
  10. package/dist/ActionGroup.jsx +6 -2
  11. package/dist/ActionGroup.jsx.map +1 -1
  12. package/dist/Alert.d.ts.map +1 -1
  13. package/dist/Alert.js +5 -10
  14. package/dist/Alert.js.map +1 -1
  15. package/dist/Alert.jsx +2 -2
  16. package/dist/Alert.jsx.map +1 -1
  17. package/dist/Autocomplete.js +1 -1
  18. package/dist/Autocomplete.js.map +1 -1
  19. package/dist/Autocomplete.jsx +1 -1
  20. package/dist/Autocomplete.jsx.map +1 -1
  21. package/dist/Breadcrumbs.d.ts +8 -2
  22. package/dist/Breadcrumbs.d.ts.map +1 -1
  23. package/dist/Breadcrumbs.js +96 -15
  24. package/dist/Breadcrumbs.js.map +1 -1
  25. package/dist/Breadcrumbs.jsx +90 -15
  26. package/dist/Breadcrumbs.jsx.map +1 -1
  27. package/dist/Button.d.ts.map +1 -1
  28. package/dist/Button.js +25 -13
  29. package/dist/Button.js.map +1 -1
  30. package/dist/Button.jsx +25 -13
  31. package/dist/Button.jsx.map +1 -1
  32. package/dist/Calendar.d.ts +8 -0
  33. package/dist/Calendar.d.ts.map +1 -1
  34. package/dist/Calendar.js +70 -33
  35. package/dist/Calendar.js.map +1 -1
  36. package/dist/Calendar.jsx +57 -24
  37. package/dist/Calendar.jsx.map +1 -1
  38. package/dist/Checkbox.d.ts +1 -12
  39. package/dist/Checkbox.d.ts.map +1 -1
  40. package/dist/Checkbox.js +242 -183
  41. package/dist/Checkbox.js.map +1 -1
  42. package/dist/Checkbox.jsx +109 -67
  43. package/dist/Checkbox.jsx.map +1 -1
  44. package/dist/Collection.d.ts +124 -4
  45. package/dist/Collection.d.ts.map +1 -1
  46. package/dist/Collection.js +139 -14
  47. package/dist/Collection.js.map +1 -1
  48. package/dist/Collection.jsx +125 -14
  49. package/dist/Collection.jsx.map +1 -1
  50. package/dist/Color.d.ts +8 -567
  51. package/dist/Color.d.ts.map +1 -1
  52. package/dist/Color.js +8 -1955
  53. package/dist/Color.jsx +8 -1460
  54. package/dist/ColorArea.d.ts +104 -0
  55. package/dist/ColorArea.d.ts.map +1 -0
  56. package/dist/ColorArea.js +394 -0
  57. package/dist/ColorArea.js.map +1 -0
  58. package/dist/ColorArea.jsx +298 -0
  59. package/dist/ColorArea.jsx.map +1 -0
  60. package/dist/ColorEditor.d.ts.map +1 -1
  61. package/dist/ColorEditor.js +4 -5
  62. package/dist/ColorEditor.js.map +1 -1
  63. package/dist/ColorEditor.jsx +8 -5
  64. package/dist/ColorEditor.jsx.map +1 -1
  65. package/dist/ColorField.d.ts +89 -0
  66. package/dist/ColorField.d.ts.map +1 -0
  67. package/dist/ColorField.js +403 -0
  68. package/dist/ColorField.js.map +1 -0
  69. package/dist/ColorField.jsx +288 -0
  70. package/dist/ColorField.jsx.map +1 -0
  71. package/dist/ColorPicker.d.ts +33 -0
  72. package/dist/ColorPicker.d.ts.map +1 -0
  73. package/dist/ColorPicker.js +90 -0
  74. package/dist/ColorPicker.js.map +1 -0
  75. package/dist/ColorPicker.jsx +71 -0
  76. package/dist/ColorPicker.jsx.map +1 -0
  77. package/dist/ColorSlider.d.ts +145 -0
  78. package/dist/ColorSlider.d.ts.map +1 -0
  79. package/dist/ColorSlider.js +456 -0
  80. package/dist/ColorSlider.js.map +1 -0
  81. package/dist/ColorSlider.jsx +331 -0
  82. package/dist/ColorSlider.jsx.map +1 -0
  83. package/dist/ColorSwatch.d.ts +37 -0
  84. package/dist/ColorSwatch.d.ts.map +1 -0
  85. package/dist/ColorSwatch.js +105 -0
  86. package/dist/ColorSwatch.js.map +1 -0
  87. package/dist/ColorSwatch.jsx +88 -0
  88. package/dist/ColorSwatch.jsx.map +1 -0
  89. package/dist/ColorSwatchPicker.d.ts +82 -0
  90. package/dist/ColorSwatchPicker.d.ts.map +1 -0
  91. package/dist/ColorSwatchPicker.js +372 -0
  92. package/dist/ColorSwatchPicker.js.map +1 -0
  93. package/dist/ColorSwatchPicker.jsx +322 -0
  94. package/dist/ColorSwatchPicker.jsx.map +1 -0
  95. package/dist/ColorThumb.d.ts +16 -0
  96. package/dist/ColorThumb.d.ts.map +1 -0
  97. package/dist/ColorThumb.js +14 -0
  98. package/dist/ColorThumb.jsx +14 -0
  99. package/dist/ColorWheel.d.ts +103 -0
  100. package/dist/ColorWheel.d.ts.map +1 -0
  101. package/dist/ColorWheel.js +324 -0
  102. package/dist/ColorWheel.js.map +1 -0
  103. package/dist/ColorWheel.jsx +236 -0
  104. package/dist/ColorWheel.jsx.map +1 -0
  105. package/dist/ComboBox.d.ts +37 -22
  106. package/dist/ComboBox.d.ts.map +1 -1
  107. package/dist/ComboBox.js +82 -53
  108. package/dist/ComboBox.js.map +1 -1
  109. package/dist/ComboBox.jsx +61 -34
  110. package/dist/ComboBox.jsx.map +1 -1
  111. package/dist/ContextualHelpTrigger.d.ts.map +1 -1
  112. package/dist/ContextualHelpTrigger.js +3 -15
  113. package/dist/ContextualHelpTrigger.js.map +1 -1
  114. package/dist/ContextualHelpTrigger.jsx +3 -15
  115. package/dist/ContextualHelpTrigger.jsx.map +1 -1
  116. package/dist/DateField.d.ts +13 -2
  117. package/dist/DateField.d.ts.map +1 -1
  118. package/dist/DateField2.js +89 -26
  119. package/dist/DateField2.js.map +1 -1
  120. package/dist/DateField2.jsx +76 -27
  121. package/dist/DateField2.jsx.map +1 -1
  122. package/dist/DatePicker.d.ts +6 -27
  123. package/dist/DatePicker.d.ts.map +1 -1
  124. package/dist/DatePicker.js +1 -0
  125. package/dist/DatePicker.jsx +1 -0
  126. package/dist/DatePicker2.js +424 -171
  127. package/dist/DatePicker2.js.map +1 -1
  128. package/dist/DatePicker2.jsx +260 -55
  129. package/dist/DatePicker2.jsx.map +1 -1
  130. package/dist/Dialog.d.ts +3 -17
  131. package/dist/Dialog.d.ts.map +1 -1
  132. package/dist/Dialog.js +162 -272
  133. package/dist/Dialog.js.map +1 -1
  134. package/dist/Dialog.jsx +123 -119
  135. package/dist/Dialog.jsx.map +1 -1
  136. package/dist/Disclosure.d.ts.map +1 -1
  137. package/dist/Disclosure.js +81 -36
  138. package/dist/Disclosure.js.map +1 -1
  139. package/dist/Disclosure.jsx +50 -11
  140. package/dist/Disclosure.jsx.map +1 -1
  141. package/dist/DragAndDrop.d.ts.map +1 -1
  142. package/dist/DragAndDrop.js +9 -3
  143. package/dist/DragAndDrop.js.map +1 -1
  144. package/dist/DragAndDrop.jsx +9 -3
  145. package/dist/DragAndDrop.jsx.map +1 -1
  146. package/dist/DropZone.d.ts +8 -1
  147. package/dist/DropZone.d.ts.map +1 -1
  148. package/dist/DropZone.js +90 -70
  149. package/dist/DropZone.js.map +1 -1
  150. package/dist/DropZone.jsx +35 -11
  151. package/dist/DropZone.jsx.map +1 -1
  152. package/dist/FieldError.d.ts.map +1 -1
  153. package/dist/FieldError.js +6 -2
  154. package/dist/FieldError.js.map +1 -1
  155. package/dist/FieldError.jsx +6 -2
  156. package/dist/FieldError.jsx.map +1 -1
  157. package/dist/FileTrigger.d.ts.map +1 -1
  158. package/dist/FileTrigger.js +45 -11
  159. package/dist/FileTrigger.js.map +1 -1
  160. package/dist/FileTrigger.jsx +35 -2
  161. package/dist/FileTrigger.jsx.map +1 -1
  162. package/dist/Focusable.d.ts.map +1 -1
  163. package/dist/Focusable.js.map +1 -1
  164. package/dist/Focusable.jsx.map +1 -1
  165. package/dist/Form.d.ts.map +1 -1
  166. package/dist/Form.js +16 -3
  167. package/dist/Form.js.map +1 -1
  168. package/dist/Form.jsx +16 -3
  169. package/dist/Form.jsx.map +1 -1
  170. package/dist/GridList.d.ts +60 -27
  171. package/dist/GridList.d.ts.map +1 -1
  172. package/dist/GridList.js +179 -57
  173. package/dist/GridList.js.map +1 -1
  174. package/dist/GridList.jsx +165 -54
  175. package/dist/GridList.jsx.map +1 -1
  176. package/dist/Heading.d.ts +15 -0
  177. package/dist/Heading.d.ts.map +1 -0
  178. package/dist/Heading.js +55 -0
  179. package/dist/Heading.js.map +1 -0
  180. package/dist/Heading.jsx +40 -0
  181. package/dist/Heading.jsx.map +1 -0
  182. package/dist/Icon.d.ts.map +1 -1
  183. package/dist/Icon.js +21 -4
  184. package/dist/Icon.js.map +1 -1
  185. package/dist/Icon.jsx +12 -4
  186. package/dist/Icon.jsx.map +1 -1
  187. package/dist/Link.d.ts +2 -0
  188. package/dist/Link.d.ts.map +1 -1
  189. package/dist/Link.js +29 -16
  190. package/dist/Link.js.map +1 -1
  191. package/dist/Link.jsx +29 -16
  192. package/dist/Link.jsx.map +1 -1
  193. package/dist/ListBox.d.ts +46 -21
  194. package/dist/ListBox.d.ts.map +1 -1
  195. package/dist/ListBox.js +392 -234
  196. package/dist/ListBox.js.map +1 -1
  197. package/dist/ListBox.jsx +239 -120
  198. package/dist/ListBox.jsx.map +1 -1
  199. package/dist/Menu.d.ts +13 -5
  200. package/dist/Menu.d.ts.map +1 -1
  201. package/dist/Menu.js +502 -288
  202. package/dist/Menu.js.map +1 -1
  203. package/dist/Menu.jsx +329 -141
  204. package/dist/Menu.jsx.map +1 -1
  205. package/dist/Meter.d.ts.map +1 -1
  206. package/dist/Meter.js +6 -2
  207. package/dist/Meter.js.map +1 -1
  208. package/dist/Meter.jsx +6 -2
  209. package/dist/Meter.jsx.map +1 -1
  210. package/dist/Modal.d.ts.map +1 -1
  211. package/dist/Modal.js +24 -32
  212. package/dist/Modal.js.map +1 -1
  213. package/dist/Modal.jsx +20 -31
  214. package/dist/Modal.jsx.map +1 -1
  215. package/dist/NumberField.d.ts +2 -2
  216. package/dist/NumberField.d.ts.map +1 -1
  217. package/dist/NumberField.js +189 -84
  218. package/dist/NumberField.js.map +1 -1
  219. package/dist/NumberField.jsx +112 -29
  220. package/dist/NumberField.jsx.map +1 -1
  221. package/dist/Popover.d.ts +6 -0
  222. package/dist/Popover.d.ts.map +1 -1
  223. package/dist/Popover.js +49 -34
  224. package/dist/Popover.js.map +1 -1
  225. package/dist/Popover.jsx +49 -34
  226. package/dist/Popover.jsx.map +1 -1
  227. package/dist/Pressable.d.ts.map +1 -1
  228. package/dist/Pressable.js.map +1 -1
  229. package/dist/Pressable.jsx.map +1 -1
  230. package/dist/ProgressBar.d.ts.map +1 -1
  231. package/dist/ProgressBar.js +25 -8
  232. package/dist/ProgressBar.js.map +1 -1
  233. package/dist/ProgressBar.jsx +20 -6
  234. package/dist/ProgressBar.jsx.map +1 -1
  235. package/dist/RadioGroup.d.ts +2 -13
  236. package/dist/RadioGroup.d.ts.map +1 -1
  237. package/dist/RadioGroup.js +192 -180
  238. package/dist/RadioGroup.js.map +1 -1
  239. package/dist/RadioGroup.jsx +116 -78
  240. package/dist/RadioGroup.jsx.map +1 -1
  241. package/dist/RangeCalendar.d.ts +8 -0
  242. package/dist/RangeCalendar.d.ts.map +1 -1
  243. package/dist/RangeCalendar.js +60 -22
  244. package/dist/RangeCalendar.js.map +1 -1
  245. package/dist/RangeCalendar.jsx +49 -20
  246. package/dist/RangeCalendar.jsx.map +1 -1
  247. package/dist/RouterProvider.d.ts +18 -64
  248. package/dist/RouterProvider.d.ts.map +1 -1
  249. package/dist/RouterProvider.js +2 -107
  250. package/dist/RouterProvider.jsx +2 -101
  251. package/dist/SearchField.d.ts +1 -1
  252. package/dist/SearchField.d.ts.map +1 -1
  253. package/dist/SearchField.js +50 -34
  254. package/dist/SearchField.js.map +1 -1
  255. package/dist/SearchField.jsx +51 -30
  256. package/dist/SearchField.jsx.map +1 -1
  257. package/dist/Select.d.ts +69 -27
  258. package/dist/Select.d.ts.map +1 -1
  259. package/dist/Select.js +238 -179
  260. package/dist/Select.js.map +1 -1
  261. package/dist/Select.jsx +149 -130
  262. package/dist/Select.jsx.map +1 -1
  263. package/dist/SelectionIndicator.d.ts.map +1 -1
  264. package/dist/SelectionIndicator.js +6 -2
  265. package/dist/SelectionIndicator.js.map +1 -1
  266. package/dist/SelectionIndicator.jsx +6 -2
  267. package/dist/SelectionIndicator.jsx.map +1 -1
  268. package/dist/Separator.d.ts +2 -2
  269. package/dist/Separator.d.ts.map +1 -1
  270. package/dist/Separator.js +4 -8
  271. package/dist/Separator.js.map +1 -1
  272. package/dist/Separator.jsx +4 -8
  273. package/dist/Separator.jsx.map +1 -1
  274. package/dist/SharedElementTransition.d.ts.map +1 -1
  275. package/dist/SharedElementTransition.js +6 -2
  276. package/dist/SharedElementTransition.js.map +1 -1
  277. package/dist/SharedElementTransition.jsx +6 -2
  278. package/dist/SharedElementTransition.jsx.map +1 -1
  279. package/dist/Slider.d.ts +23 -18
  280. package/dist/Slider.d.ts.map +1 -1
  281. package/dist/Slider.js +230 -131
  282. package/dist/Slider.js.map +1 -1
  283. package/dist/Slider.jsx +175 -86
  284. package/dist/Slider.jsx.map +1 -1
  285. package/dist/StepList.d.ts +1 -1
  286. package/dist/StepList.d.ts.map +1 -1
  287. package/dist/StepList.js +32 -26
  288. package/dist/StepList.js.map +1 -1
  289. package/dist/StepList.jsx +18 -12
  290. package/dist/StepList.jsx.map +1 -1
  291. package/dist/Switch.d.ts +15 -2
  292. package/dist/Switch.d.ts.map +1 -1
  293. package/dist/Switch.js +76 -29
  294. package/dist/Switch.js.map +1 -1
  295. package/dist/Switch.jsx +65 -29
  296. package/dist/Switch.jsx.map +1 -1
  297. package/dist/Table.d.ts +19 -1
  298. package/dist/Table.d.ts.map +1 -1
  299. package/dist/Table.js +382 -143
  300. package/dist/Table.js.map +1 -1
  301. package/dist/Table.jsx +286 -52
  302. package/dist/Table.jsx.map +1 -1
  303. package/dist/Tabs.d.ts.map +1 -1
  304. package/dist/Tabs.js +122 -71
  305. package/dist/Tabs.js.map +1 -1
  306. package/dist/Tabs.jsx +68 -15
  307. package/dist/Tabs.jsx.map +1 -1
  308. package/dist/TagGroup.d.ts +28 -11
  309. package/dist/TagGroup.d.ts.map +1 -1
  310. package/dist/TagGroup.js +273 -64
  311. package/dist/TagGroup.js.map +1 -1
  312. package/dist/TagGroup.jsx +201 -39
  313. package/dist/TagGroup.jsx.map +1 -1
  314. package/dist/Text.d.ts.map +1 -1
  315. package/dist/Text.js +14 -1
  316. package/dist/Text.js.map +1 -1
  317. package/dist/Text.jsx +11 -1
  318. package/dist/Text.jsx.map +1 -1
  319. package/dist/TextField.d.ts +1 -1
  320. package/dist/TextField.d.ts.map +1 -1
  321. package/dist/TextField.js +25 -22
  322. package/dist/TextField.js.map +1 -1
  323. package/dist/TextField.jsx +25 -22
  324. package/dist/TextField.jsx.map +1 -1
  325. package/dist/TimeField.d.ts +1 -1
  326. package/dist/TimeField.d.ts.map +1 -1
  327. package/dist/TimeField.js +42 -8
  328. package/dist/TimeField.js.map +1 -1
  329. package/dist/TimeField.jsx +42 -8
  330. package/dist/TimeField.jsx.map +1 -1
  331. package/dist/Toast.d.ts +17 -1
  332. package/dist/Toast.d.ts.map +1 -1
  333. package/dist/Toast.js +121 -54
  334. package/dist/Toast.js.map +1 -1
  335. package/dist/Toast.jsx +71 -18
  336. package/dist/Toast.jsx.map +1 -1
  337. package/dist/ToggleButton.d.ts.map +1 -1
  338. package/dist/ToggleButton.js +28 -8
  339. package/dist/ToggleButton.js.map +1 -1
  340. package/dist/ToggleButton.jsx +22 -6
  341. package/dist/ToggleButton.jsx.map +1 -1
  342. package/dist/ToggleButtonGroup.d.ts.map +1 -1
  343. package/dist/ToggleButtonGroup.js +6 -2
  344. package/dist/ToggleButtonGroup.js.map +1 -1
  345. package/dist/ToggleButtonGroup.jsx +6 -2
  346. package/dist/ToggleButtonGroup.jsx.map +1 -1
  347. package/dist/TokenField.d.ts +4 -2
  348. package/dist/TokenField.d.ts.map +1 -1
  349. package/dist/TokenField.js +124 -39
  350. package/dist/TokenField.js.map +1 -1
  351. package/dist/TokenField.jsx +122 -35
  352. package/dist/TokenField.jsx.map +1 -1
  353. package/dist/Toolbar.d.ts.map +1 -1
  354. package/dist/Toolbar.js +2 -6
  355. package/dist/Toolbar.js.map +1 -1
  356. package/dist/Toolbar.jsx +2 -6
  357. package/dist/Toolbar.jsx.map +1 -1
  358. package/dist/Tooltip.d.ts.map +1 -1
  359. package/dist/Tooltip.js +30 -13
  360. package/dist/Tooltip.js.map +1 -1
  361. package/dist/Tooltip.jsx +30 -13
  362. package/dist/Tooltip.jsx.map +1 -1
  363. package/dist/Tree.d.ts +77 -28
  364. package/dist/Tree.d.ts.map +1 -1
  365. package/dist/Tree.js +669 -288
  366. package/dist/Tree.js.map +1 -1
  367. package/dist/Tree.jsx +355 -132
  368. package/dist/Tree.jsx.map +1 -1
  369. package/dist/Virtualizer.d.ts +2 -1
  370. package/dist/Virtualizer.d.ts.map +1 -1
  371. package/dist/Virtualizer2.js +63 -8
  372. package/dist/Virtualizer2.js.map +1 -1
  373. package/dist/Virtualizer2.jsx +63 -4
  374. package/dist/Virtualizer2.jsx.map +1 -1
  375. package/dist/VisuallyHidden.d.ts.map +1 -1
  376. package/dist/VisuallyHidden.js +3 -1
  377. package/dist/VisuallyHidden.js.map +1 -1
  378. package/dist/VisuallyHidden.jsx +3 -1
  379. package/dist/VisuallyHidden.jsx.map +1 -1
  380. package/dist/calendarHeadingTitle.d.ts +14 -0
  381. package/dist/calendarHeadingTitle.d.ts.map +1 -0
  382. package/dist/calendarHeadingTitle.js +23 -0
  383. package/dist/calendarHeadingTitle.js.map +1 -0
  384. package/dist/calendarHeadingTitle.jsx +23 -0
  385. package/dist/calendarHeadingTitle.jsx.map +1 -0
  386. package/dist/contexts.d.ts +6 -1
  387. package/dist/contexts.d.ts.map +1 -1
  388. package/dist/contexts.js +6 -1
  389. package/dist/contexts.js.map +1 -1
  390. package/dist/contexts.jsx +6 -1
  391. package/dist/contexts.jsx.map +1 -1
  392. package/dist/fileTriggerContext.d.ts +5 -0
  393. package/dist/fileTriggerContext.d.ts.map +1 -0
  394. package/dist/fileTriggerContext.js +7 -0
  395. package/dist/fileTriggerContext.js.map +1 -0
  396. package/dist/fileTriggerContext.jsx +7 -0
  397. package/dist/fileTriggerContext.jsx.map +1 -0
  398. package/dist/index.d.ts +17 -7
  399. package/dist/index.d.ts.map +1 -1
  400. package/dist/index.js +20 -11
  401. package/dist/index.jsx +20 -11
  402. package/dist/loadMoreSentinel.d.ts +7 -0
  403. package/dist/loadMoreSentinel.d.ts.map +1 -0
  404. package/dist/loadMoreSentinel.js +30 -0
  405. package/dist/loadMoreSentinel.js.map +1 -0
  406. package/dist/loadMoreSentinel.jsx +30 -0
  407. package/dist/loadMoreSentinel.jsx.map +1 -0
  408. package/dist/slots.d.ts +35 -0
  409. package/dist/slots.d.ts.map +1 -0
  410. package/dist/slots.js +66 -0
  411. package/dist/slots.js.map +1 -0
  412. package/dist/slots.jsx +66 -0
  413. package/dist/slots.jsx.map +1 -0
  414. package/dist/staticSelectCollection.d.ts +2 -0
  415. package/dist/staticSelectCollection.d.ts.map +1 -0
  416. package/dist/staticSelectCollection.js +2 -0
  417. package/dist/staticSelectCollection.jsx +2 -0
  418. package/dist/useDragAndDrop.d.ts +2 -0
  419. package/dist/useDragAndDrop.d.ts.map +1 -1
  420. package/dist/useDragAndDrop2.js.map +1 -1
  421. package/dist/useDragAndDrop2.jsx.map +1 -1
  422. package/dist/utils.d.ts +21 -0
  423. package/dist/utils.d.ts.map +1 -1
  424. package/dist/utils.js +48 -24
  425. package/dist/utils.js.map +1 -1
  426. package/dist/utils.jsx +39 -9
  427. package/dist/utils.jsx.map +1 -1
  428. package/dist/virtualizer/Layout.d.ts +3 -2
  429. package/dist/virtualizer/Layout.d.ts.map +1 -1
  430. package/dist/virtualizer/Layout.js.map +1 -1
  431. package/dist/virtualizer/Layout.jsx.map +1 -1
  432. package/package.json +63 -3
  433. package/src/ActionBar.tsx +6 -2
  434. package/src/ActionGroup.tsx +6 -3
  435. package/src/Alert.tsx +2 -3
  436. package/src/Autocomplete.tsx +1 -1
  437. package/src/Breadcrumbs.tsx +122 -15
  438. package/src/Button.tsx +39 -16
  439. package/src/Calendar.tsx +88 -27
  440. package/src/Checkbox.tsx +150 -124
  441. package/src/Collection.tsx +270 -17
  442. package/src/Color.tsx +8 -2632
  443. package/src/ColorArea.tsx +491 -0
  444. package/src/ColorEditor.tsx +4 -8
  445. package/src/ColorField.tsx +479 -0
  446. package/src/ColorPicker.tsx +130 -0
  447. package/src/ColorSlider.tsx +574 -0
  448. package/src/ColorSwatch.tsx +133 -0
  449. package/src/ColorSwatchPicker.tsx +631 -0
  450. package/src/ColorThumb.tsx +19 -0
  451. package/src/ColorWheel.tsx +410 -0
  452. package/src/ComboBox.tsx +127 -80
  453. package/src/ContextualHelpTrigger.tsx +4 -26
  454. package/src/DateField.tsx +123 -38
  455. package/src/DatePicker.tsx +379 -42
  456. package/src/Dialog.tsx +183 -174
  457. package/src/Disclosure.tsx +74 -21
  458. package/src/DragAndDrop.tsx +14 -3
  459. package/src/DropZone.tsx +60 -35
  460. package/src/FieldError.tsx +6 -2
  461. package/src/FileTrigger.tsx +54 -2
  462. package/src/Focusable.tsx +1 -6
  463. package/src/Form.tsx +23 -3
  464. package/src/GridList.tsx +270 -82
  465. package/src/Heading.tsx +59 -0
  466. package/src/HiddenDateInput.tsx +1 -1
  467. package/src/Icon.tsx +17 -4
  468. package/src/Link.tsx +43 -16
  469. package/src/ListBox.tsx +423 -195
  470. package/src/Menu.tsx +533 -266
  471. package/src/Meter.tsx +6 -2
  472. package/src/Modal.tsx +24 -50
  473. package/src/NumberField.tsx +137 -33
  474. package/src/Popover.tsx +70 -44
  475. package/src/Pressable.tsx +1 -6
  476. package/src/ProgressBar.tsx +23 -5
  477. package/src/RadioGroup.tsx +198 -171
  478. package/src/RangeCalendar.tsx +80 -23
  479. package/src/RouterProvider.tsx +22 -214
  480. package/src/SearchField.tsx +69 -31
  481. package/src/Select.tsx +352 -276
  482. package/src/SelectionIndicator.tsx +6 -2
  483. package/src/Separator.tsx +5 -13
  484. package/src/SharedElementTransition.tsx +6 -2
  485. package/src/Slider.tsx +268 -110
  486. package/src/StepList.tsx +25 -10
  487. package/src/Switch.tsx +101 -29
  488. package/src/Table.tsx +482 -149
  489. package/src/Tabs.tsx +90 -21
  490. package/src/TagGroup.tsx +343 -61
  491. package/src/Text.tsx +16 -1
  492. package/src/TextField.tsx +32 -23
  493. package/src/TimeField.tsx +64 -9
  494. package/src/Toast.tsx +110 -20
  495. package/src/ToggleButton.tsx +36 -6
  496. package/src/ToggleButtonGroup.tsx +6 -2
  497. package/src/TokenField.tsx +189 -54
  498. package/src/Toolbar.tsx +2 -8
  499. package/src/Tooltip.tsx +37 -17
  500. package/src/Tree.tsx +750 -266
  501. package/src/Virtualizer.tsx +106 -15
  502. package/src/VisuallyHidden.tsx +3 -1
  503. package/src/calendarHeadingTitle.ts +37 -0
  504. package/src/contexts.ts +10 -1
  505. package/src/fileTriggerContext.ts +8 -0
  506. package/src/index.ts +66 -11
  507. package/src/loadMoreSentinel.ts +31 -0
  508. package/src/slots.tsx +103 -0
  509. package/src/staticSelectCollection.tsx +25 -0
  510. package/src/useDragAndDrop.ts +5 -1
  511. package/src/utils.tsx +74 -8
  512. package/src/virtualizer/Layout.ts +3 -2
  513. package/dist/Color.js.map +0 -1
  514. package/dist/Color.jsx.map +0 -1
  515. package/dist/RouterProvider.js.map +0 -1
  516. package/dist/RouterProvider.jsx.map +0 -1
package/README.md CHANGED
@@ -1,40 +1,39 @@
1
1
  # @proyecto-viviana/solidaria-components
2
2
 
3
- SolidJS port of React Aria Components: unstyled, accessible components built on
4
- `@proyecto-viviana/solidaria` and `@proyecto-viviana/solid-stately`.
3
+ A Solid port of Adobe's React Aria Components: accessible components with no
4
+ styling. Each one ships the markup, the ARIA, and the interaction; you supply
5
+ every class.
5
6
 
6
- This package is still part of a parity port. Do not treat export coverage as a
7
- production readiness guarantee.
7
+ Use this when you want to own the look completely. If you want components that
8
+ already look like something, use a styled sibling instead.
8
9
 
9
10
  ## Install
10
11
 
12
+ Requires **Solid 2**. `solid-js` and `@solidjs/web` are peer dependencies, at
13
+ `>=2.0.0-rc.9 <3`.
14
+
11
15
  ```bash
12
- npm install @proyecto-viviana/solidaria-components solid-js
16
+ npm install @proyecto-viviana/solidaria-components@rc solid-js@next @solidjs/web@next
13
17
  ```
14
18
 
15
- ## Usage
19
+ The release candidate is on the `rc` tag. The `latest` tag is the Solid 1
20
+ line.
16
21
 
17
- ```tsx
18
- import { Button } from "@proyecto-viviana/solidaria-components";
22
+ ## Example
19
23
 
20
- export function SaveButton() {
21
- return <Button onPress={() => save()}>Save</Button>;
22
- }
23
- ```
24
-
25
- Components are headless. Style them with classes, data attributes, and render
26
- props.
24
+ Style with classes, data attributes, or a render-prop child. Render-prop
25
+ fields are plain booleans, not accessors — read `isPressed`, do not call it.
27
26
 
28
27
  ```tsx
29
28
  import { Button } from "@proyecto-viviana/solidaria-components";
30
29
 
31
- export function ToolbarButton() {
30
+ export function SaveButton(props: { onSave: () => void }) {
32
31
  return (
33
- <Button class="button">
34
- {({ isPressed, isFocusVisible }) => (
32
+ <Button class="button" onPress={props.onSave}>
33
+ {(render) => (
35
34
  <span
36
- data-pressed={isPressed() || undefined}
37
- data-focus-visible={isFocusVisible() || undefined}
35
+ data-pressed={render.isPressed || undefined}
36
+ data-focus-visible={render.isFocusVisible || undefined}
38
37
  >
39
38
  Save
40
39
  </span>
@@ -44,25 +43,52 @@ export function ToolbarButton() {
44
43
  }
45
44
  ```
46
45
 
47
- ## Current Parity Evidence
46
+ ## In the chain
47
+
48
+ ```text
49
+ solid-stately
50
+ ↓
51
+ solidaria
52
+ ↓
53
+ solidaria-components ← you are here
54
+ ↓
55
+ solid-spectrum · @proyecto-viviana/ui · kumo · geist
56
+ ```
57
+
58
+ It depends on `@proyecto-viviana/solidaria` and
59
+ `@proyecto-viviana/solid-stately`. Every styled package in the family is built
60
+ on this one.
48
61
 
49
- Do not copy guard counts into this file. `guard:rac-export-gap` allows only
50
- ticketed pending RAC names (`scripts/rac-export-gap-pending.json`). Unlisted
51
- missing names fail. Extra Solid exports are local API; document intentional
52
- additions in changesets.
62
+ ## Status
53
63
 
54
- The barrel in [`src/index.ts`](src/index.ts) is the source of truth for the
55
- current public surface. This README intentionally does not duplicate the full
56
- export list.
64
+ Published, and part of a port that is not finished. An export is a floor, not
65
+ proof that a component matches upstream.
66
+ [`src/index.ts`](src/index.ts) is the only source of truth for the public
67
+ surface — this file does not list exports, and no README carries a count.
57
68
 
58
- ## Verification
69
+ What this release candidate is known to get wrong is listed under
70
+ [known gaps](https://github.com/proyecto-viviana/ui#known-gaps-in-this-release-candidate).
71
+
72
+ ## Evidence
59
73
 
60
74
  ```bash
61
75
  vp run guard:rac-parity
62
76
  vp run guard:rac-export-gap
63
77
  vp run --filter @proyecto-viviana/solidaria-components build
64
- vp test run packages
78
+ vp run test:run
65
79
  ```
66
80
 
67
- When changing behavior, add focused tests under `test/` that use semantic
68
- queries and user-like interactions rather than implementation markers alone.
81
+ `guard:rac-export-gap` allows only the ticketed pending upstream names in
82
+ `scripts/rac-export-gap-pending.json`; an unlisted missing name fails. Extra
83
+ Solid exports are our own API and are declared in a changeset. What "ported"
84
+ means here is [the evidence bar](https://github.com/proyecto-viviana/ui/blob/main/.claude/current/certification.md).
85
+
86
+ ## Links
87
+
88
+ - Documentation: <https://ui.proyectoviviana.org>
89
+ - Repository: <https://github.com/proyecto-viviana/ui>
90
+
91
+ ## License
92
+
93
+ MIT AND Apache-2.0. Our work is MIT; the port of Adobe's React Aria Components
94
+ keeps Apache-2.0. Both licenses and the project `NOTICE` ship in this package.
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../src/ActionBar.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../src/ActionBar.tsx"],"names":[],"mappings":"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"}
package/dist/ActionBar.js CHANGED
@@ -90,8 +90,12 @@ function ActionBar(props) {
90
90
  };
91
91
  const renderProps = useRenderProps({
92
92
  children: void 0,
93
- class: local.class,
94
- style: local.style,
93
+ get class() {
94
+ return local.class;
95
+ },
96
+ get style() {
97
+ return local.style;
98
+ },
95
99
  defaultClassName: "solidaria-ActionBar"
96
100
  }, () => ({
97
101
  isOpen: isOpen(),
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBar.js","names":["<Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>","<ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>","ref={(el) => assignRef(local.ref, el)}","onKeyDown={handleKeyDown}","{local.children}","<div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>","{props.children}","style={{ position: \"relative\", ...props.style }}","<div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>","{text()}","<span class={props.class}>{text()}</span>","class={props.class}","<button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n}\n\nexport interface ActionBarRenderProps {\n /** Whether the action bar is visible. */\n isOpen: boolean;\n /** The number of selected items. */\n selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n extends\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n SlotProps {\n /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n selectedItemCount?: number | \"all\";\n /** Callback when the clear button is pressed. */\n onClearSelection?: () => void;\n /** Callback when an action is triggered. */\n onAction?: (key: Key) => void;\n /** The action buttons to display. */\n children?: JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionBarRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionBarRenderProps>;\n /** Accessible label for the action bar. @default 'Actions' */\n \"aria-label\"?: string;\n /** Identifies the element (or elements) that labels the action bar. */\n \"aria-labelledby\"?: string;\n /** Optional keydown handler on the action bar element. */\n onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n /** Screen reader announcement when the action bar becomes available. */\n actionsAvailableMessage?: string;\n /** Ref for the underlying action bar element. */\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n selectedItemCount: () => number | \"all\";\n onClearSelection?: () => void;\n onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"selectedItemCount\",\n \"onClearSelection\",\n \"onAction\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"aria-label\",\n \"aria-labelledby\",\n \"onKeyDown\",\n \"actionsAvailableMessage\",\n \"ref\",\n ]);\n\n // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n // created on first read, and createTrackedEffect forbids primitives.\n const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n const isOpen = () => selectedItemCount() !== 0;\n\n // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n // handler that clears the selection) onto it. The single `toolbar` is the\n // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n // S2 never renders and (b) nest the real action toolbar inside it, forcing\n // its role to downgrade to `group`. So the root deliberately carries no\n // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n // ActionButtonGroup at the styled layer.\n let wasOpen = false;\n createEffect(\n () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n ({ open, message }) => {\n if (open && !wasOpen && message) {\n announce(message);\n }\n wasOpen = open;\n },\n );\n\n const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n const onKeyDown = local.onKeyDown as\n | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n | undefined;\n onKeyDown?.(e);\n if (e.defaultPrevented) {\n return;\n }\n\n if (e.key === \"Escape\" && isOpen()) {\n e.preventDefault();\n e.stopPropagation();\n local.onClearSelection?.();\n }\n };\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-ActionBar\",\n },\n () => ({\n isOpen: isOpen(),\n selectedItemCount: selectedItemCount(),\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n const contextValue = createMemo<ActionBarContextValue>(() => ({\n selectedItemCount,\n onClearSelection: local.onClearSelection,\n onAction: local.onAction,\n }));\n\n return (\n <Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>\n );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n class?: string;\n style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n return (\n <div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>\n );\n}\n\nexport interface ActionBarSelectionCountProps {\n class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n const ctx = useActionBarContext();\n\n const text = () => {\n if (!ctx) return \"\";\n const count = ctx.selectedItemCount();\n if (count === \"all\") return \"All selected\";\n if (count === 0) return \"None selected\";\n return `${count} selected`;\n };\n\n return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n class?: string;\n children?: JSX.Element;\n \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n const ctx = useActionBarContext();\n\n return (\n <button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"ActionBar.js","names":["<Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>","<ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>","ref={(el) => assignRef(local.ref, el)}","onKeyDown={handleKeyDown}","{local.children}","<div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>","{props.children}","style={{ position: \"relative\", ...props.style }}","<div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>","{text()}","<span class={props.class}>{text()}</span>","class={props.class}","<button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n}\n\nexport interface ActionBarRenderProps {\n /** Whether the action bar is visible. */\n isOpen: boolean;\n /** The number of selected items. */\n selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n extends\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n SlotProps {\n /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n selectedItemCount?: number | \"all\";\n /** Callback when the clear button is pressed. */\n onClearSelection?: () => void;\n /** Callback when an action is triggered. */\n onAction?: (key: Key) => void;\n /** The action buttons to display. */\n children?: JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionBarRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionBarRenderProps>;\n /** Accessible label for the action bar. @default 'Actions' */\n \"aria-label\"?: string;\n /** Identifies the element (or elements) that labels the action bar. */\n \"aria-labelledby\"?: string;\n /** Optional keydown handler on the action bar element. */\n onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n /** Screen reader announcement when the action bar becomes available. */\n actionsAvailableMessage?: string;\n /** Ref for the underlying action bar element. */\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n selectedItemCount: () => number | \"all\";\n onClearSelection?: () => void;\n onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"selectedItemCount\",\n \"onClearSelection\",\n \"onAction\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"aria-label\",\n \"aria-labelledby\",\n \"onKeyDown\",\n \"actionsAvailableMessage\",\n \"ref\",\n ]);\n\n // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n // created on first read, and createTrackedEffect forbids primitives.\n const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n const isOpen = () => selectedItemCount() !== 0;\n\n // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n // handler that clears the selection) onto it. The single `toolbar` is the\n // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n // S2 never renders and (b) nest the real action toolbar inside it, forcing\n // its role to downgrade to `group`. So the root deliberately carries no\n // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n // ActionButtonGroup at the styled layer.\n let wasOpen = false;\n createEffect(\n () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n ({ open, message }) => {\n if (open && !wasOpen && message) {\n announce(message);\n }\n wasOpen = open;\n },\n );\n\n const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n const onKeyDown = local.onKeyDown as\n | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n | undefined;\n onKeyDown?.(e);\n if (e.defaultPrevented) {\n return;\n }\n\n if (e.key === \"Escape\" && isOpen()) {\n e.preventDefault();\n e.stopPropagation();\n local.onClearSelection?.();\n }\n };\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n get class() {\n return local.class;\n },\n get style() {\n return local.style;\n },\n defaultClassName: \"solidaria-ActionBar\",\n },\n () => ({\n isOpen: isOpen(),\n selectedItemCount: selectedItemCount(),\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n const contextValue = createMemo<ActionBarContextValue>(() => ({\n selectedItemCount,\n onClearSelection: local.onClearSelection,\n onAction: local.onAction,\n }));\n\n return (\n <Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>\n );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n class?: string;\n style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n return (\n <div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>\n );\n}\n\nexport interface ActionBarSelectionCountProps {\n class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n const ctx = useActionBarContext();\n\n const text = () => {\n if (!ctx) return \"\";\n const count = ctx.selectedItemCount();\n if (count === \"all\") return \"All selected\";\n if (count === 0) return \"None selected\";\n return `${count} selected`;\n };\n\n return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n class?: string;\n children?: JSX.Element;\n \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n const ctx = useActionBarContext();\n\n return (\n <button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>\n );\n}\n"],"mappings":"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"}
@@ -85,8 +85,12 @@ function ActionBar(props) {
85
85
  };
86
86
  const renderProps = useRenderProps({
87
87
  children: void 0,
88
- class: local.class,
89
- style: local.style,
88
+ get class() {
89
+ return local.class;
90
+ },
91
+ get style() {
92
+ return local.style;
93
+ },
90
94
  defaultClassName: "solidaria-ActionBar"
91
95
  }, () => ({
92
96
  isOpen: isOpen(),
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBar.jsx","names":["assignRef"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n}\n\nexport interface ActionBarRenderProps {\n /** Whether the action bar is visible. */\n isOpen: boolean;\n /** The number of selected items. */\n selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n extends\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n SlotProps {\n /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n selectedItemCount?: number | \"all\";\n /** Callback when the clear button is pressed. */\n onClearSelection?: () => void;\n /** Callback when an action is triggered. */\n onAction?: (key: Key) => void;\n /** The action buttons to display. */\n children?: JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionBarRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionBarRenderProps>;\n /** Accessible label for the action bar. @default 'Actions' */\n \"aria-label\"?: string;\n /** Identifies the element (or elements) that labels the action bar. */\n \"aria-labelledby\"?: string;\n /** Optional keydown handler on the action bar element. */\n onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n /** Screen reader announcement when the action bar becomes available. */\n actionsAvailableMessage?: string;\n /** Ref for the underlying action bar element. */\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n selectedItemCount: () => number | \"all\";\n onClearSelection?: () => void;\n onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"selectedItemCount\",\n \"onClearSelection\",\n \"onAction\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"aria-label\",\n \"aria-labelledby\",\n \"onKeyDown\",\n \"actionsAvailableMessage\",\n \"ref\",\n ]);\n\n // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n // created on first read, and createTrackedEffect forbids primitives.\n const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n const isOpen = () => selectedItemCount() !== 0;\n\n // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n // handler that clears the selection) onto it. The single `toolbar` is the\n // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n // S2 never renders and (b) nest the real action toolbar inside it, forcing\n // its role to downgrade to `group`. So the root deliberately carries no\n // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n // ActionButtonGroup at the styled layer.\n let wasOpen = false;\n createEffect(\n () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n ({ open, message }) => {\n if (open && !wasOpen && message) {\n announce(message);\n }\n wasOpen = open;\n },\n );\n\n const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n const onKeyDown = local.onKeyDown as\n | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n | undefined;\n onKeyDown?.(e);\n if (e.defaultPrevented) {\n return;\n }\n\n if (e.key === \"Escape\" && isOpen()) {\n e.preventDefault();\n e.stopPropagation();\n local.onClearSelection?.();\n }\n };\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-ActionBar\",\n },\n () => ({\n isOpen: isOpen(),\n selectedItemCount: selectedItemCount(),\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n const contextValue = createMemo<ActionBarContextValue>(() => ({\n selectedItemCount,\n onClearSelection: local.onClearSelection,\n onAction: local.onAction,\n }));\n\n return (\n <Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>\n );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n class?: string;\n style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n return (\n <div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>\n );\n}\n\nexport interface ActionBarSelectionCountProps {\n class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n const ctx = useActionBarContext();\n\n const text = () => {\n if (!ctx) return \"\";\n const count = ctx.selectedItemCount();\n if (count === \"all\") return \"All selected\";\n if (count === 0) return \"None selected\";\n return `${count} selected`;\n };\n\n return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n class?: string;\n children?: JSX.Element;\n \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n const ctx = useActionBarContext();\n\n return (\n <button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAASA,YAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AA2CA,MAAa,mBAAmB,cAA4C,IAAI;AAEhF,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAID,MAAM,oBAAoB,iBAAiB,MAAM,qBAAqB,CAAC;CACvE,MAAM,eAAe,kBAAkB,MAAM;CAW7C,IAAI,UAAU;CACd,oBACS;EAAE,MAAM,OAAO;EAAG,SAAS,MAAM;CAAwB,KAC/D,EAAE,MAAM,cAAc;EACrB,IAAI,QAAQ,CAAC,WAAW,SACtB,SAAS,OAAO;EAElB,UAAU;CACZ,CACF;CAEA,MAAM,iBAAuE,MAAM;EACjF,MAAM,YAAY,MAAM;EAGxB,YAAY,CAAC;EACb,IAAI,EAAE,kBACJ;EAGF,IAAI,EAAE,QAAQ,YAAY,OAAO,GAAG;GAClC,EAAE,eAAe;GACjB,EAAE,gBAAgB;GAClB,MAAM,mBAAmB;EAC3B;CACF;CAEA,MAAM,cAAc,eAClB;EACE,UAAU,KAAA;EACV,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO;EACL,QAAQ,OAAO;EACf,mBAAmB,kBAAkB;CACvC,EACF;CAEA,MAAM,mBAAmB,iBACvB,eAAe,UAAqC,EAAE,QAAQ,KAAK,CAAC,CACtE;CAEA,MAAM,eAAe,kBAAyC;EAC5D;EACA,kBAAkB,MAAM;EACxB,UAAU,MAAM;CAClB,EAAE;CAEF,OACE,CAAC,KAAK,MAAM,OAAO,GAAG;MACpB,CAAC,iBAAiB,OAAO,aAAa,GAAG;QACvC,CAAC,QACK,iBAAiB,GACrB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACZ,WAAW,SAAS,OAAO,CAAC,GAC5B,WAAW,eACX,MAAM,OAAOA,YAAU,MAAM,KAAK,EAAE,GACrC;WACE,MAAM,SAAS;QAClB,EAAE,IAAI;MACR,EAAE,iBAAiB;IACrB,EAAE;AAEN;;;;AAUA,SAAgB,mBAAmB,OAA6C;CAC9E,OACE,CAAC,IACC,OAAO,MAAM,SAAS,gCACtB,OAAO;EAAE,UAAU;EAAY,GAAG,MAAM;CAAM,GAC/C;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;;;;AASA,SAAgB,wBAAwB,OAAkD;CACxF,MAAM,MAAM,oBAAoB;CAEhC,MAAM,aAAa;EACjB,IAAI,CAAC,KAAK,OAAO;EACjB,MAAM,QAAQ,IAAI,kBAAkB;EACpC,IAAI,UAAU,OAAO,OAAO;EAC5B,IAAI,UAAU,GAAG,OAAO;EACxB,OAAO,GAAG,MAAM;CAClB;CAEA,OAAO,CAAC,KAAK,OAAO,MAAM,QAAQ,KAAK,EAAE,EAAE;AAC7C;;;;AAWA,SAAgB,qBAAqB,OAA+C;CAClF,MAAM,MAAM,oBAAoB;CAEhC,OACE,CAAC,OACC,cACA,YAAY,MAAM,iBAAiB,mBACnC,OAAO,MAAM,OACb,eAAe,KAAK,mBAAmB,GACxC;OACE,MAAM,YAAY,IAAS;IAC9B,EAAE;AAEN"}
1
+ {"version":3,"file":"ActionBar.jsx","names":["assignRef"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(el);\n } else {\n ref.current = el;\n }\n}\n\nexport interface ActionBarRenderProps {\n /** Whether the action bar is visible. */\n isOpen: boolean;\n /** The number of selected items. */\n selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n extends\n Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n SlotProps {\n /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n selectedItemCount?: number | \"all\";\n /** Callback when the clear button is pressed. */\n onClearSelection?: () => void;\n /** Callback when an action is triggered. */\n onAction?: (key: Key) => void;\n /** The action buttons to display. */\n children?: JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionBarRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionBarRenderProps>;\n /** Accessible label for the action bar. @default 'Actions' */\n \"aria-label\"?: string;\n /** Identifies the element (or elements) that labels the action bar. */\n \"aria-labelledby\"?: string;\n /** Optional keydown handler on the action bar element. */\n onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n /** Screen reader announcement when the action bar becomes available. */\n actionsAvailableMessage?: string;\n /** Ref for the underlying action bar element. */\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n selectedItemCount: () => number | \"all\";\n onClearSelection?: () => void;\n onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n const [local, domProps] = splitProps(props, [\n \"selectedItemCount\",\n \"onClearSelection\",\n \"onAction\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"aria-label\",\n \"aria-labelledby\",\n \"onKeyDown\",\n \"actionsAvailableMessage\",\n \"ref\",\n ]);\n\n // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n // created on first read, and createTrackedEffect forbids primitives.\n const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n const isOpen = () => selectedItemCount() !== 0;\n\n // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n // handler that clears the selection) onto it. The single `toolbar` is the\n // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n // S2 never renders and (b) nest the real action toolbar inside it, forcing\n // its role to downgrade to `group`. So the root deliberately carries no\n // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n // ActionButtonGroup at the styled layer.\n let wasOpen = false;\n createEffect(\n () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n ({ open, message }) => {\n if (open && !wasOpen && message) {\n announce(message);\n }\n wasOpen = open;\n },\n );\n\n const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n const onKeyDown = local.onKeyDown as\n | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n | undefined;\n onKeyDown?.(e);\n if (e.defaultPrevented) {\n return;\n }\n\n if (e.key === \"Escape\" && isOpen()) {\n e.preventDefault();\n e.stopPropagation();\n local.onClearSelection?.();\n }\n };\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n get class() {\n return local.class;\n },\n get style() {\n return local.style;\n },\n defaultClassName: \"solidaria-ActionBar\",\n },\n () => ({\n isOpen: isOpen(),\n selectedItemCount: selectedItemCount(),\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n const contextValue = createMemo<ActionBarContextValue>(() => ({\n selectedItemCount,\n onClearSelection: local.onClearSelection,\n onAction: local.onAction,\n }));\n\n return (\n <Show when={isOpen()}>\n <ActionBarContext value={contextValue()}>\n <div\n {...filteredDOMProps()}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-open={dataAttr(isOpen())}\n onKeyDown={handleKeyDown}\n ref={(el) => assignRef(local.ref, el)}\n >\n {local.children}\n </div>\n </ActionBarContext>\n </Show>\n );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n class?: string;\n style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n return (\n <div\n class={props.class ?? \"solidaria-ActionBarContainer\"}\n style={{ position: \"relative\", ...props.style }}\n >\n {props.children}\n </div>\n );\n}\n\nexport interface ActionBarSelectionCountProps {\n class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n const ctx = useActionBarContext();\n\n const text = () => {\n if (!ctx) return \"\";\n const count = ctx.selectedItemCount();\n if (count === \"all\") return \"All selected\";\n if (count === 0) return \"None selected\";\n return `${count} selected`;\n };\n\n return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n class?: string;\n children?: JSX.Element;\n \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n const ctx = useActionBarContext();\n\n return (\n <button\n type=\"button\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n class={props.class}\n onClick={() => ctx?.onClearSelection?.()}\n >\n {props.children ?? \"\\u2715\"}\n </button>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAASA,YAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AA2CA,MAAa,mBAAmB,cAA4C,IAAI;AAEhF,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAID,MAAM,oBAAoB,iBAAiB,MAAM,qBAAqB,CAAC;CACvE,MAAM,eAAe,kBAAkB,MAAM;CAW7C,IAAI,UAAU;CACd,oBACS;EAAE,MAAM,OAAO;EAAG,SAAS,MAAM;CAAwB,KAC/D,EAAE,MAAM,cAAc;EACrB,IAAI,QAAQ,CAAC,WAAW,SACtB,SAAS,OAAO;EAElB,UAAU;CACZ,CACF;CAEA,MAAM,iBAAuE,MAAM;EACjF,MAAM,YAAY,MAAM;EAGxB,YAAY,CAAC;EACb,IAAI,EAAE,kBACJ;EAGF,IAAI,EAAE,QAAQ,YAAY,OAAO,GAAG;GAClC,EAAE,eAAe;GACjB,EAAE,gBAAgB;GAClB,MAAM,mBAAmB;EAC3B;CACF;CAEA,MAAM,cAAc,eAClB;EACE,UAAU,KAAA;EACV,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,kBAAkB;CACpB,UACO;EACL,QAAQ,OAAO;EACf,mBAAmB,kBAAkB;CACvC,EACF;CAEA,MAAM,mBAAmB,iBACvB,eAAe,UAAqC,EAAE,QAAQ,KAAK,CAAC,CACtE;CAEA,MAAM,eAAe,kBAAyC;EAC5D;EACA,kBAAkB,MAAM;EACxB,UAAU,MAAM;CAClB,EAAE;CAEF,OACE,CAAC,KAAK,MAAM,OAAO,GAAG;MACpB,CAAC,iBAAiB,OAAO,aAAa,GAAG;QACvC,CAAC,QACK,iBAAiB,GACrB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACZ,WAAW,SAAS,OAAO,CAAC,GAC5B,WAAW,eACX,MAAM,OAAOA,YAAU,MAAM,KAAK,EAAE,GACrC;WACE,MAAM,SAAS;QAClB,EAAE,IAAI;MACR,EAAE,iBAAiB;IACrB,EAAE;AAEN;;;;AAUA,SAAgB,mBAAmB,OAA6C;CAC9E,OACE,CAAC,IACC,OAAO,MAAM,SAAS,gCACtB,OAAO;EAAE,UAAU;EAAY,GAAG,MAAM;CAAM,GAC/C;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;;;;AASA,SAAgB,wBAAwB,OAAkD;CACxF,MAAM,MAAM,oBAAoB;CAEhC,MAAM,aAAa;EACjB,IAAI,CAAC,KAAK,OAAO;EACjB,MAAM,QAAQ,IAAI,kBAAkB;EACpC,IAAI,UAAU,OAAO,OAAO;EAC5B,IAAI,UAAU,GAAG,OAAO;EACxB,OAAO,GAAG,MAAM;CAClB;CAEA,OAAO,CAAC,KAAK,OAAO,MAAM,QAAQ,KAAK,EAAE,EAAE;AAC7C;;;;AAWA,SAAgB,qBAAqB,OAA+C;CAClF,MAAM,MAAM,oBAAoB;CAEhC,OACE,CAAC,OACC,cACA,YAAY,MAAM,iBAAiB,mBACnC,OAAO,MAAM,OACb,eAAe,KAAK,mBAAmB,GACxC;OACE,MAAM,YAAY,IAAS;IAC9B,EAAE;AAEN"}
@@ -1 +1 @@
1
- {"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../src/ActionGroup.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAMxC,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,aAAa,EACnB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAIf,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,4CAA4C;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,CAAE,SAAQ,SAAS;IAC9F,qCAAqC;IACrC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,0CAA0C;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,sDAAsD;IACtD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,qCAAqC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,0BAA0B,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5E,mCAAmC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,sBAAsB,CAAC,CAAC;IACpD,sCAAsC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe;IAClF,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,6EAAsD,CAAC;AACtF,eAAO,MAAM,uBAAuB,+DAAyD,CAAC;AAE9F,wBAAgB,WAAW,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,EACrE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACzB,GAAG,CAAC,OAAO,CA0Hb;AAiDD,wBAAgB,qBAAqB,IAAI,uBAAuB,GAAG,IAAI,CAEtE"}
1
+ {"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../src/ActionGroup.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAMxC,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,aAAa,EACnB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAIf,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,4CAA4C;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,CAAE,SAAQ,SAAS;IAC9F,qCAAqC;IACrC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,0CAA0C;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,sDAAsD;IACtD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,qCAAqC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,0BAA0B,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5E,mCAAmC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,sBAAsB,CAAC,CAAC;IACpD,sCAAsC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe;IAClF,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,6EAAsD,CAAC;AACtF,eAAO,MAAM,uBAAuB,+DAAyD,CAAC;AAE9F,wBAAgB,WAAW,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,EACrE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACzB,GAAG,CAAC,OAAO,CA8Hb;AAiDD,wBAAgB,qBAAqB,IAAI,uBAAuB,GAAG,IAAI,CAEtE"}
@@ -96,8 +96,12 @@ function ActionGroup(props) {
96
96
  const orientation = () => local.orientation ?? "horizontal";
97
97
  const renderProps = useRenderProps({
98
98
  children: void 0,
99
- class: local.class,
100
- style: local.style,
99
+ get class() {
100
+ return local.class;
101
+ },
102
+ get style() {
103
+ return local.style;
104
+ },
101
105
  defaultClassName: "solidaria-ActionGroup"
102
106
  }, () => ({
103
107
  orientation: orientation(),
@@ -1 +1 @@
1
- {"version":3,"file":"ActionGroup.js","names":["<ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>","value={{ state: state as ListState<ActionGroupItem> }}","<ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>","value={state as ListState<ActionGroupItem>}","ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}","<For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>","<ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />","state={state as ListState<ActionGroupItem>}","<div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>","{props.renderChild(props.item, renderProps())}","<button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>"],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroup.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts\n\n/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * Based on packages/react-aria/src/actiongroup/useActionGroup.ts and\n * packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria\n * Components has no ActionGroup component, so this file wires the two hooks.\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n createActionGroup,\n createActionGroupItem,\n type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n /** The orientation of the action group. */\n orientation: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n /** Whether the item is selected. */\n isSelected: boolean;\n /** Whether the item is disabled. */\n isDisabled: boolean;\n /** Whether the item is focused. */\n isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n id: string;\n label: string;\n isDisabled?: boolean;\n [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n /** The items in the action group. */\n items: T[];\n /** The selection mode. @default 'none' */\n selectionMode?: SelectionMode;\n /** Orientation of the group. @default 'horizontal' */\n orientation?: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled?: boolean;\n /** Accessible label. */\n \"aria-label\"?: string;\n /** Labelled-by id. */\n \"aria-labelledby\"?: string;\n /** Currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** Default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Handler called when an item action is triggered. */\n onAction?: (key: Key) => void;\n /** Keys of disabled items. */\n disabledKeys?: Iterable<Key>;\n /** Render function for each item. */\n children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionGroupRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n props: ActionGroupProps<T>,\n): JSX.Element {\n const [local, ariaGroupProps, domProps] = splitProps(\n props,\n [\n \"items\",\n \"selectionMode\",\n \"orientation\",\n \"isDisabled\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"onAction\",\n \"disabledKeys\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n ],\n [\"aria-label\", \"aria-labelledby\"],\n );\n\n const state = createListState<T>({\n get items() {\n return local.items;\n },\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n getKey: (item) => item.id,\n getTextValue: (item) => item.label,\n getDisabled: (item) => !!item.isDisabled,\n });\n\n const groupAriaProps: AriaActionGroupProps<T> = {\n get items() {\n return local.items;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get orientation() {\n return local.orientation;\n },\n get \"aria-label\"() {\n return ariaGroupProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaGroupProps[\"aria-labelledby\"];\n },\n get onAction() {\n return local.onAction;\n },\n };\n\n const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n const orientation = () => local.orientation ?? \"horizontal\";\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-ActionGroup\",\n },\n () => ({\n orientation: orientation(),\n isDisabled: !!local.isDisabled,\n selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n return (\n <ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>\n );\n}\n\ninterface ActionGroupItemWrapperProps {\n item: ActionGroupItem;\n state: ListState<ActionGroupItem>;\n renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n const { buttonProps } = createActionGroupItem(\n {\n get key() {\n return props.item.id;\n },\n },\n props.state,\n );\n\n const isFocused = () => props.state.focusedKey() === props.item.id;\n const isSelected = () => {\n const keys = props.state.selectedKeys();\n return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n };\n const isDisabled = () => props.state.isDisabled(props.item.id);\n\n const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n isSelected: isSelected(),\n isDisabled: isDisabled(),\n isFocused: isFocused(),\n }));\n\n // splitProps (not object destructuring) so the reactive getters on buttonProps\n // — tabIndex (roving stop), onFocus (sets the focused key), role, aria-checked\n // — stay live. A rest-spread `{ ref, ...rest }` would FREEZE them at their\n // first-render values, pinning the roving tabIndex and killing focus tracking.\n const [, restButtonProps] = splitProps(buttonProps, [\"ref\"]);\n\n return (\n <button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>\n );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n return useContext(ActionGroupContext);\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"ActionGroup.js","names":["<ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>","value={{ state: state as ListState<ActionGroupItem> }}","<ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>","value={state as ListState<ActionGroupItem>}","ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}","<For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>","<ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />","state={state as ListState<ActionGroupItem>}","<div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>","{props.renderChild(props.item, renderProps())}","<button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>"],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroup.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts\n\n/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * Based on packages/react-aria/src/actiongroup/useActionGroup.ts and\n * packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria\n * Components has no ActionGroup component, so this file wires the two hooks.\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n createActionGroup,\n createActionGroupItem,\n type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n /** The orientation of the action group. */\n orientation: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n /** Whether the item is selected. */\n isSelected: boolean;\n /** Whether the item is disabled. */\n isDisabled: boolean;\n /** Whether the item is focused. */\n isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n id: string;\n label: string;\n isDisabled?: boolean;\n [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n /** The items in the action group. */\n items: T[];\n /** The selection mode. @default 'none' */\n selectionMode?: SelectionMode;\n /** Orientation of the group. @default 'horizontal' */\n orientation?: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled?: boolean;\n /** Accessible label. */\n \"aria-label\"?: string;\n /** Labelled-by id. */\n \"aria-labelledby\"?: string;\n /** Currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** Default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Handler called when an item action is triggered. */\n onAction?: (key: Key) => void;\n /** Keys of disabled items. */\n disabledKeys?: Iterable<Key>;\n /** Render function for each item. */\n children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionGroupRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n props: ActionGroupProps<T>,\n): JSX.Element {\n const [local, ariaGroupProps, domProps] = splitProps(\n props,\n [\n \"items\",\n \"selectionMode\",\n \"orientation\",\n \"isDisabled\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"onAction\",\n \"disabledKeys\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n ],\n [\"aria-label\", \"aria-labelledby\"],\n );\n\n const state = createListState<T>({\n get items() {\n return local.items;\n },\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n getKey: (item) => item.id,\n getTextValue: (item) => item.label,\n getDisabled: (item) => !!item.isDisabled,\n });\n\n const groupAriaProps: AriaActionGroupProps<T> = {\n get items() {\n return local.items;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get orientation() {\n return local.orientation;\n },\n get \"aria-label\"() {\n return ariaGroupProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaGroupProps[\"aria-labelledby\"];\n },\n get onAction() {\n return local.onAction;\n },\n };\n\n const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n const orientation = () => local.orientation ?? \"horizontal\";\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n get class() {\n return local.class;\n },\n get style() {\n return local.style;\n },\n defaultClassName: \"solidaria-ActionGroup\",\n },\n () => ({\n orientation: orientation(),\n isDisabled: !!local.isDisabled,\n selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n return (\n <ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>\n );\n}\n\ninterface ActionGroupItemWrapperProps {\n item: ActionGroupItem;\n state: ListState<ActionGroupItem>;\n renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n const { buttonProps } = createActionGroupItem(\n {\n get key() {\n return props.item.id;\n },\n },\n props.state,\n );\n\n const isFocused = () => props.state.focusedKey() === props.item.id;\n const isSelected = () => {\n const keys = props.state.selectedKeys();\n return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n };\n const isDisabled = () => props.state.isDisabled(props.item.id);\n\n const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n isSelected: isSelected(),\n isDisabled: isDisabled(),\n isFocused: isFocused(),\n }));\n\n // splitProps (not object destructuring) so the reactive getters on buttonProps\n // — tabIndex (roving stop), onFocus (sets the focused key), role, aria-checked\n // — stay live. A rest-spread `{ ref, ...rest }` would FREEZE them at their\n // first-render values, pinning the roving tabIndex and killing focus tracking.\n const [, restButtonProps] = splitProps(buttonProps, [\"ref\"]);\n\n return (\n <button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>\n );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n return useContext(ActionGroupContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+GA,MAAa,qBAAqB,cAA8C,IAAI;AACpF,MAAa,0BAA0B,cAAiD,IAAI;AAE5F,SAAgB,YACd,OACa;CACb,MAAM,CAAC,OAAO,gBAAgB,YAAY,WACxC,OACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,GACA,CAAC,cAAc,iBAAiB,CAClC;CAEA,MAAM,QAAQ,gBAAmB;EAC/B,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,gBAAgB;GAClB,OAAO,MAAM,iBAAiB;EAChC;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,IAAI,sBAAsB;GACxB,OAAO,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,MAAM;EACf;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,SAAS,SAAS,KAAK;EACvB,eAAe,SAAS,KAAK;EAC7B,cAAc,SAAS,CAAC,CAAC,KAAK;CAChC,CAAC;CAuBD,MAAM,EAAE,qBAAqB,kBAAkB;EApB7C,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,IAAI,cAAc;GAChB,OAAO,MAAM;EACf;EACA,IAAI,eAAe;GACjB,OAAO,eAAe;EACxB;EACA,IAAI,oBAAoB;GACtB,OAAO,eAAe;EACxB;EACA,IAAI,WAAW;GACb,OAAO,MAAM;EACf;CAG6C,GAAgB,KAAqB;CAEpF,MAAM,oBAAoB,MAAM,eAAe;CAE/C,MAAM,cAAc,eAClB;EACE,UAAU,KAAA;EACV,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,kBAAkB;CACpB,UACO;EACL,aAAa,YAAY;EACzB,YAAY,CAAC,CAAC,MAAM;EACpB,eAAgB,MAAM,iBAAiB;CACzC,EACF;CAEA,MAAM,mBAAmB,iBACvB,eAAe,UAAqC,EAAE,QAAQ,KAAK,CAAC,CACtE;CAEA,OACEA,gBAAAA,oBAAAA;EAAoBC,OAAO,EAAS,MAAoC;EAAxE,IAAA,WAAA;GACEC,OAAAA,gBAAAA,yBAAAA;IAAyBC,OAAO;IAAhC,IAAA,WAAA;KACE,IAAA,OAAA,eAAA,MA2BK;KAxBH,UAAA;MAAM,QAAA,OAAuB;OAC3B,MAAM,QAAS,iBAAyD;OACxE,QAAQ,EAAE;MACZ;KAAC,GAHDC,IAGC;;MALG;MACA;;OAKJ,IAAA,UAAA;QAAO,OAAA,YAAY,MAAM;OAAC;OAC1B,IAAA,QAAA;QAAO,OAAA,YAAY,MAAM;OAAC;OAC1B,IAAA,OAAA;QAAM,OAAA,MAAM;OAAI;OAChB,IAAA,qBAAA;QAAkB,OAAA,YAAY;OAAC;OAC/B,IAAA,kBAAA;QAAe,OAAA,SAAS,MAAM,UAAU;OAAC;;;KAX3C,OAAA,MAaEC,gBAAAA,KAAAA;MAAK,IAAA,OAAA;OAAM,OAAA,MAAM;MAAK;MAAtBA,WACI,SACAC,gBAAAA,wBAAAA;OACQ;OACC;OACP,IAAA,cAAA;QACE,OAAA,MAAM;OAIR;MACD,CAAA;KAEA,CAAA,CACF;KA3BL,mBA2BK;KA5BP,OACEE;IA4BuB;;EACP;;AAExB;AAQA,SAAS,uBAAuB,OAAiD;CAC/E,MAAM,EAAE,gBAAgB,sBACtB,EACE,IAAI,MAAM;EACR,OAAO,MAAM,KAAK;CACpB,EACF,GACA,MAAM,KACR;CAEA,MAAM,kBAAkB,MAAM,MAAM,WAAW,MAAM,MAAM,KAAK;CAChE,MAAM,mBAAmB;EACvB,MAAM,OAAO,MAAM,MAAM,aAAa;EACtC,OAAO,SAAS,SAAU,gBAAgB,OAAO,KAAK,IAAI,MAAM,KAAK,EAAE;CACzE;CACA,MAAM,mBAAmB,MAAM,MAAM,WAAW,MAAM,KAAK,EAAE;CAE7D,MAAM,cAAc,kBAA8C;EAChE,YAAY,WAAW;EACvB,YAAY,WAAW;EACvB,WAAW,UAAU;CACvB,EAAE;CAMF,MAAM,GAAG,mBAAmB,WAAW,aAAa,CAAC,KAAK,CAAC;CAGzD,IAAA,QAAA,eAAA,OAOQ;CANF,OAAA,OAAA,CAAA,iBAAA;EACJ,IAAA,kBAAA;GAAe,OAAA,SAAS,WAAW,CAAC;EAAC;EACrC,IAAA,kBAAA;GAAe,OAAA,SAAS,WAAW,CAAC;EAAC;EACrC,IAAA,iBAAA;GAAc,OAAA,SAAS,UAAU,CAAC;EAAC;;CAJrC,OAAA,OAMEC,YAAAA;EAAC,OAAA,MAAM,YAAY,MAAM,MAAM,YAAY,CAAC;CAAC,CAAA,CACvC;CAPR,mBAOQ;CARV,OACEC;AASJ;AAEA,SAAgB,wBAAwD;CACtE,OAAO,WAAW,kBAAkB;AACtC"}
@@ -93,8 +93,12 @@ function ActionGroup(props) {
93
93
  const orientation = () => local.orientation ?? "horizontal";
94
94
  const renderProps = useRenderProps({
95
95
  children: void 0,
96
- class: local.class,
97
- style: local.style,
96
+ get class() {
97
+ return local.class;
98
+ },
99
+ get style() {
100
+ return local.style;
101
+ },
98
102
  defaultClassName: "solidaria-ActionGroup"
99
103
  }, () => ({
100
104
  orientation: orientation(),
@@ -1 +1 @@
1
- {"version":3,"file":"ActionGroup.jsx","names":[],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroup.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts\n\n/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * Based on packages/react-aria/src/actiongroup/useActionGroup.ts and\n * packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria\n * Components has no ActionGroup component, so this file wires the two hooks.\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n createActionGroup,\n createActionGroupItem,\n type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n /** The orientation of the action group. */\n orientation: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n /** Whether the item is selected. */\n isSelected: boolean;\n /** Whether the item is disabled. */\n isDisabled: boolean;\n /** Whether the item is focused. */\n isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n id: string;\n label: string;\n isDisabled?: boolean;\n [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n /** The items in the action group. */\n items: T[];\n /** The selection mode. @default 'none' */\n selectionMode?: SelectionMode;\n /** Orientation of the group. @default 'horizontal' */\n orientation?: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled?: boolean;\n /** Accessible label. */\n \"aria-label\"?: string;\n /** Labelled-by id. */\n \"aria-labelledby\"?: string;\n /** Currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** Default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Handler called when an item action is triggered. */\n onAction?: (key: Key) => void;\n /** Keys of disabled items. */\n disabledKeys?: Iterable<Key>;\n /** Render function for each item. */\n children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionGroupRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n props: ActionGroupProps<T>,\n): JSX.Element {\n const [local, ariaGroupProps, domProps] = splitProps(\n props,\n [\n \"items\",\n \"selectionMode\",\n \"orientation\",\n \"isDisabled\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"onAction\",\n \"disabledKeys\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n ],\n [\"aria-label\", \"aria-labelledby\"],\n );\n\n const state = createListState<T>({\n get items() {\n return local.items;\n },\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n getKey: (item) => item.id,\n getTextValue: (item) => item.label,\n getDisabled: (item) => !!item.isDisabled,\n });\n\n const groupAriaProps: AriaActionGroupProps<T> = {\n get items() {\n return local.items;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get orientation() {\n return local.orientation;\n },\n get \"aria-label\"() {\n return ariaGroupProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaGroupProps[\"aria-labelledby\"];\n },\n get onAction() {\n return local.onAction;\n },\n };\n\n const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n const orientation = () => local.orientation ?? \"horizontal\";\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n class: local.class,\n style: local.style,\n defaultClassName: \"solidaria-ActionGroup\",\n },\n () => ({\n orientation: orientation(),\n isDisabled: !!local.isDisabled,\n selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n return (\n <ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>\n );\n}\n\ninterface ActionGroupItemWrapperProps {\n item: ActionGroupItem;\n state: ListState<ActionGroupItem>;\n renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n const { buttonProps } = createActionGroupItem(\n {\n get key() {\n return props.item.id;\n },\n },\n props.state,\n );\n\n const isFocused = () => props.state.focusedKey() === props.item.id;\n const isSelected = () => {\n const keys = props.state.selectedKeys();\n return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n };\n const isDisabled = () => props.state.isDisabled(props.item.id);\n\n const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n isSelected: isSelected(),\n isDisabled: isDisabled(),\n isFocused: isFocused(),\n }));\n\n // splitProps (not object destructuring) so the reactive getters on buttonProps\n // — tabIndex (roving stop), onFocus (sets the focused key), role, aria-checked\n // — stay live. A rest-spread `{ ref, ...rest }` would FREEZE them at their\n // first-render values, pinning the roving tabIndex and killing focus tracking.\n const [, restButtonProps] = splitProps(buttonProps, [\"ref\"]);\n\n return (\n <button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>\n );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n return useContext(ActionGroupContext);\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"ActionGroup.jsx","names":[],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroup.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts\n\n/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * Based on packages/react-aria/src/actiongroup/useActionGroup.ts and\n * packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria\n * Components has no ActionGroup component, so this file wires the two hooks.\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n createActionGroup,\n createActionGroupItem,\n type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n createListState,\n type ListState,\n type Key,\n type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n useRenderProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n /** The orientation of the action group. */\n orientation: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled: boolean;\n /** The selection mode. */\n selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n /** Whether the item is selected. */\n isSelected: boolean;\n /** Whether the item is disabled. */\n isDisabled: boolean;\n /** Whether the item is focused. */\n isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n id: string;\n label: string;\n isDisabled?: boolean;\n [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n /** The items in the action group. */\n items: T[];\n /** The selection mode. @default 'none' */\n selectionMode?: SelectionMode;\n /** Orientation of the group. @default 'horizontal' */\n orientation?: \"horizontal\" | \"vertical\";\n /** Whether the entire group is disabled. */\n isDisabled?: boolean;\n /** Accessible label. */\n \"aria-label\"?: string;\n /** Labelled-by id. */\n \"aria-labelledby\"?: string;\n /** Currently selected keys (controlled). */\n selectedKeys?: Iterable<Key>;\n /** Default selected keys (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler called when selection changes. */\n onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n /** Handler called when an item action is triggered. */\n onAction?: (key: Key) => void;\n /** Keys of disabled items. */\n disabledKeys?: Iterable<Key>;\n /** Render function for each item. */\n children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n /** CSS class for the container. */\n class?: ClassNameOrFunction<ActionGroupRenderProps>;\n /** Inline style for the container. */\n style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n props: ActionGroupProps<T>,\n): JSX.Element {\n const [local, ariaGroupProps, domProps] = splitProps(\n props,\n [\n \"items\",\n \"selectionMode\",\n \"orientation\",\n \"isDisabled\",\n \"selectedKeys\",\n \"defaultSelectedKeys\",\n \"onSelectionChange\",\n \"onAction\",\n \"disabledKeys\",\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n ],\n [\"aria-label\", \"aria-labelledby\"],\n );\n\n const state = createListState<T>({\n get items() {\n return local.items;\n },\n get selectionMode() {\n return local.selectionMode ?? \"none\";\n },\n get selectedKeys() {\n return local.selectedKeys;\n },\n get defaultSelectedKeys() {\n return local.defaultSelectedKeys;\n },\n get onSelectionChange() {\n return local.onSelectionChange;\n },\n get disabledKeys() {\n return local.disabledKeys;\n },\n getKey: (item) => item.id,\n getTextValue: (item) => item.label,\n getDisabled: (item) => !!item.isDisabled,\n });\n\n const groupAriaProps: AriaActionGroupProps<T> = {\n get items() {\n return local.items;\n },\n get isDisabled() {\n return local.isDisabled;\n },\n get orientation() {\n return local.orientation;\n },\n get \"aria-label\"() {\n return ariaGroupProps[\"aria-label\"];\n },\n get \"aria-labelledby\"() {\n return ariaGroupProps[\"aria-labelledby\"];\n },\n get onAction() {\n return local.onAction;\n },\n };\n\n const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n const orientation = () => local.orientation ?? \"horizontal\";\n\n const renderProps = useRenderProps(\n {\n children: undefined,\n get class() {\n return local.class;\n },\n get style() {\n return local.style;\n },\n defaultClassName: \"solidaria-ActionGroup\",\n },\n () => ({\n orientation: orientation(),\n isDisabled: !!local.isDisabled,\n selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n }),\n );\n\n const filteredDOMProps = createMemo(() =>\n filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n );\n\n return (\n <ActionGroupContext value={{ state: state as ListState<ActionGroupItem> }}>\n <ActionGroupStateContext value={state as ListState<ActionGroupItem>}>\n <div\n {...filteredDOMProps()}\n {...actionGroupProps}\n ref={(el: HTMLDivElement) => {\n const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n refFn?.(el);\n }}\n class={renderProps.class()}\n style={renderProps.style()}\n slot={local.slot}\n data-orientation={orientation()}\n data-disabled={dataAttr(local.isDisabled)}\n >\n <For each={local.items}>\n {(item) => (\n <ActionGroupItemWrapper\n item={item}\n state={state as ListState<ActionGroupItem>}\n renderChild={\n local.children as (\n item: ActionGroupItem,\n rp: ActionGroupItemRenderProps,\n ) => JSX.Element\n }\n />\n )}\n </For>\n </div>\n </ActionGroupStateContext>\n </ActionGroupContext>\n );\n}\n\ninterface ActionGroupItemWrapperProps {\n item: ActionGroupItem;\n state: ListState<ActionGroupItem>;\n renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n const { buttonProps } = createActionGroupItem(\n {\n get key() {\n return props.item.id;\n },\n },\n props.state,\n );\n\n const isFocused = () => props.state.focusedKey() === props.item.id;\n const isSelected = () => {\n const keys = props.state.selectedKeys();\n return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n };\n const isDisabled = () => props.state.isDisabled(props.item.id);\n\n const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n isSelected: isSelected(),\n isDisabled: isDisabled(),\n isFocused: isFocused(),\n }));\n\n // splitProps (not object destructuring) so the reactive getters on buttonProps\n // — tabIndex (roving stop), onFocus (sets the focused key), role, aria-checked\n // — stay live. A rest-spread `{ ref, ...rest }` would FREEZE them at their\n // first-render values, pinning the roving tabIndex and killing focus tracking.\n const [, restButtonProps] = splitProps(buttonProps, [\"ref\"]);\n\n return (\n <button\n {...restButtonProps}\n data-selected={dataAttr(isSelected())}\n data-disabled={dataAttr(isDisabled())}\n data-focused={dataAttr(isFocused())}\n >\n {props.renderChild(props.item, renderProps())}\n </button>\n );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n return useContext(ActionGroupContext);\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../src/Alert.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,OAAO,EAAE,YAAY,CAAC;IACtB,0CAA0C;IAC1C,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,gCAAgC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC5C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC1C,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,YAAY,CAAC;IAC5B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,sDAAgD,CAAC;AAE1E;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA2DpD;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;CAAG;AAEhF;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAU9E"}
1
+ {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../src/Alert.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAIf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,OAAO,EAAE,YAAY,CAAC;IACtB,0CAA0C;IAC1C,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,gCAAgC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC5C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC1C,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,YAAY,CAAC;IAC5B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,sDAAgD,CAAC;AAE1E;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAyDpD;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;CAAG;AAEhF;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAU9E"}
package/dist/Alert.js CHANGED
@@ -1,6 +1,6 @@
1
- import { dataAttr, filterDOMProps } from "./utils.js";
1
+ import { dataAttr, evaluateRenderChildren, filterDOMProps } from "./utils.js";
2
2
  import { Button } from "./Button.js";
3
- import { createComponent, getNextElement, insert, memo, mergeProps, runHydrationEvents, scope, spread, template } from "@solidjs/web";
3
+ import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, scope, spread, template } from "@solidjs/web";
4
4
  import { createContext, createMemo, useContext } from "solid-js";
5
5
  import { splitProps } from "@proyecto-viviana/solidaria/utils";
6
6
  //#region src/Alert.tsx
@@ -79,14 +79,9 @@ function Alert(props) {
79
79
  return dataAttr(isDismissible());
80
80
  }
81
81
  }], true);
82
- insert(_el$, scope((() => {
83
- var _c$ = memo(() => {
84
- return typeof local.children === "function";
85
- });
86
- return () => {
87
- return _c$() ? local.children(renderValues()) : local.children;
88
- };
89
- })()));
82
+ insert(_el$, scope(() => {
83
+ return evaluateRenderChildren(local.children, renderValues());
84
+ }));
90
85
  runHydrationEvents();
91
86
  return _el$;
92
87
  }
package/dist/Alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.js","names":["<AlertContext value={contextValue}>\n <div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {typeof local.children === \"function\"\n ? (local.children as (props: AlertRenderProps) => JSX.Element)(renderValues())\n : local.children}\n </div>\n </AlertContext>","value={contextValue}","role=\"alert\"","{typeof local.children === \"function\"\n ? (local.children as (props: AlertRenderProps) => JSX.Element)(renderValues())\n : local.children}","<div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {typeof local.children === \"function\"\n ? (local.children as (props: AlertRenderProps) => JSX.Element)(renderValues())\n : local.children}\n </div>","<Button\n {...props}\n aria-label={props[\"aria-label\"] ?? \"Dismiss\"}\n onPress={() => context?.onDismiss?.()}\n />","onPress={() => context?.onDismiss?.()}"],"sources":["../src/Alert.tsx"],"sourcesContent":["/**\n * Alert component for solidaria-components\n *\n * Minimal headless Alert that owns ARIA semantics (role=\"alert\")\n * and provides render props for styling. The UI layer consumes this\n * for styling/composition only.\n *\n * This is a local Solid component. The pinned React Aria Components source\n * has no Alert counterpart.\n */\n\nimport { createContext, createMemo, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n filterDOMProps,\n dataAttr,\n} from \"./utils\";\nimport { Button, type ButtonProps } from \"./Button\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertRenderProps {\n /** The variant of the alert. */\n variant: AlertVariant;\n /** Whether the alert can be dismissed. */\n isDismissible: boolean;\n}\n\nexport interface AlertProps extends SlotProps {\n /** The variant of the alert. */\n variant?: AlertVariant;\n /** Whether the alert can be dismissed. */\n isDismissible?: boolean;\n /** Handler called when the alert is dismissed. */\n onDismiss?: () => void;\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<AlertRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<AlertRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<AlertRenderProps>;\n /** The id of the element. */\n id?: string;\n}\n\nexport interface AlertContextValue {\n variant: () => AlertVariant;\n isDismissible: () => boolean;\n onDismiss?: () => void;\n}\n\nexport const AlertContext = createContext<AlertContextValue | null>(null);\n\n/**\n * An alert displays a brief, important message in a way that\n * attracts the user's attention without interrupting their task.\n *\n * This is a headless component that provides the ARIA `role=\"alert\"`\n * semantics and render props for styling.\n *\n * @example\n * ```tsx\n * <Alert variant=\"error\" isDismissible onDismiss={() => setVisible(false)}>\n * {({ variant }) => <span>Something went wrong ({variant})</span>}\n * </Alert>\n * ```\n */\nexport function Alert(props: AlertProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"variant\",\n \"isDismissible\",\n \"onDismiss\",\n ]);\n\n const variant = () => local.variant ?? \"info\";\n const isDismissible = () => !!local.isDismissible;\n\n const renderValues = createMemo<AlertRenderProps>(() => ({\n variant: variant(),\n isDismissible: isDismissible(),\n }));\n\n // Resolve class and style manually. We intentionally avoid useRenderProps()\n // because it destructures children eagerly, which would create child\n // components (e.g. AlertDismissButton) BEFORE the AlertContext.Provider\n // is in scope, breaking context for sub-components.\n const computedClass = createMemo(() => {\n const cls = local.class;\n return typeof cls === \"function\" ? cls(renderValues()) : (cls ?? \"solidaria-Alert\");\n });\n\n const computedStyle = createMemo(() => {\n const s = local.style;\n return typeof s === \"function\" ? s(renderValues()) : s;\n });\n\n const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n const contextValue: AlertContextValue = {\n variant,\n isDismissible,\n onDismiss: local.onDismiss,\n };\n\n // Children are accessed lazily inside the Provider scope (via local.children\n // in JSX) so sub-components like AlertDismissButton can read AlertContext.\n return (\n <AlertContext value={contextValue}>\n <div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {typeof local.children === \"function\"\n ? (local.children as (props: AlertRenderProps) => JSX.Element)(renderValues())\n : local.children}\n </div>\n </AlertContext>\n );\n}\n\nexport interface AlertDismissButtonProps extends Omit<ButtonProps, \"onPress\"> {}\n\n/**\n * A dismiss button for use inside an Alert.\n * Uses the headless Button for full keyboard/a11y support.\n *\n * @example\n * ```tsx\n * <Alert isDismissible onDismiss={handleDismiss}>\n * <span>Alert content</span>\n * <AlertDismissButton aria-label=\"Dismiss\">X</AlertDismissButton>\n * </Alert>\n * ```\n */\nexport function AlertDismissButton(props: AlertDismissButtonProps): JSX.Element {\n const context = useContext(AlertContext);\n\n return (\n <Button\n {...props}\n aria-label={props[\"aria-label\"] ?? \"Dismiss\"}\n onPress={() => context?.onDismiss?.()}\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAwDA,MAAa,eAAe,cAAwC,IAAI;;;;;;;;;;;;;;;AAgBxE,SAAgB,MAAM,OAAgC;CACpD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,MAAM,WAAW;CACvC,MAAM,sBAAsB,CAAC,CAAC,MAAM;CAEpC,MAAM,eAAe,kBAAoC;EACvD,SAAS,QAAQ;EACjB,eAAe,cAAc;CAC/B,EAAE;CAMF,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,MAAM,MAAM;EAClB,OAAO,OAAO,QAAQ,aAAa,IAAI,aAAa,CAAC,IAAK,OAAO;CACnE,CAAC;CAED,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,IAAI,MAAM;EAChB,OAAO,OAAO,MAAM,aAAa,EAAE,aAAa,CAAC,IAAI;CACvD,CAAC;CAED,MAAM,WAAW,iBAAiB,eAAe,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC;CAExE,MAAM,eAAkC;EACtC;EACA;EACA,WAAW,MAAM;CACnB;CAIA,OACEA,gBAAAA,cAAAA;EAAcC,OAAO;EAArB,IAAA,WAAA;GACE,IAAA,OAAA,eAAA,MAWK;GAVC,OAAA,MAAA,CAAA,UAAA;IACJC,MAAAA;IACA,IAAA,UAAA;KAAO,OAAA,cAAc;IAAC;IACtB,IAAA,QAAA;KAAO,OAAA,cAAc;IAAC;IACtB,IAAA,iBAAA;KAAc,OAAA,QAAQ;IAAC;IACvB,IAAA,qBAAA;KAAkB,OAAA,SAAS,cAAc,CAAC;IAAC;;GAN7C,OAAA,MAQEC,aAAAA;;KAAC,OAAA,OAAO,MAAM,aAAa;IAET,CAAA;IAFlB,aAAA;KAEkB,OAAA,IAAA,IADb,MAAM,SAAsD,aAAa,CAAC,IAC3E,MAAM;IAAQ;GAAC,EAAA,CAAD,CAAA,CACf;GAXL,mBAWK;GAZP,OACEC;EAYY;;AAElB;;;;;;;;;;;;;AAgBA,SAAgB,mBAAmB,OAA6C;CAC9E,MAAM,UAAU,WAAW,YAAY;CAEvC,OACEC,gBAAAA,QAAAA,WACM,OADN;EAEE,IAAA,eAAA;GAAY,OAAA,MAAM,iBAAiB;EAAS;EAC5CC,eAAe,SAAS,YAAY;CACrC,CAAA,CAAA;AAEL"}
1
+ {"version":3,"file":"Alert.js","names":["<AlertContext value={contextValue}>\n <div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {evaluateRenderChildren(local.children, renderValues())}\n </div>\n </AlertContext>","value={contextValue}","role=\"alert\"","{evaluateRenderChildren(local.children, renderValues())}","<div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {evaluateRenderChildren(local.children, renderValues())}\n </div>","<Button\n {...props}\n aria-label={props[\"aria-label\"] ?? \"Dismiss\"}\n onPress={() => context?.onDismiss?.()}\n />","onPress={() => context?.onDismiss?.()}"],"sources":["../src/Alert.tsx"],"sourcesContent":["/**\n * Alert component for solidaria-components\n *\n * Minimal headless Alert that owns ARIA semantics (role=\"alert\")\n * and provides render props for styling. The UI layer consumes this\n * for styling/composition only.\n *\n * This is a local Solid component. The pinned React Aria Components source\n * has no Alert counterpart.\n */\n\nimport { createContext, createMemo, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n type RenderChildren,\n type ClassNameOrFunction,\n type StyleOrFunction,\n type SlotProps,\n filterDOMProps,\n dataAttr,\n evaluateRenderChildren,\n} from \"./utils\";\nimport { Button, type ButtonProps } from \"./Button\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertRenderProps {\n /** The variant of the alert. */\n variant: AlertVariant;\n /** Whether the alert can be dismissed. */\n isDismissible: boolean;\n}\n\nexport interface AlertProps extends SlotProps {\n /** The variant of the alert. */\n variant?: AlertVariant;\n /** Whether the alert can be dismissed. */\n isDismissible?: boolean;\n /** Handler called when the alert is dismissed. */\n onDismiss?: () => void;\n /** The children of the component. A function may be provided to receive render props. */\n children?: RenderChildren<AlertRenderProps>;\n /** The CSS className for the element. */\n class?: ClassNameOrFunction<AlertRenderProps>;\n /** The inline style for the element. */\n style?: StyleOrFunction<AlertRenderProps>;\n /** The id of the element. */\n id?: string;\n}\n\nexport interface AlertContextValue {\n variant: () => AlertVariant;\n isDismissible: () => boolean;\n onDismiss?: () => void;\n}\n\nexport const AlertContext = createContext<AlertContextValue | null>(null);\n\n/**\n * An alert displays a brief, important message in a way that\n * attracts the user's attention without interrupting their task.\n *\n * This is a headless component that provides the ARIA `role=\"alert\"`\n * semantics and render props for styling.\n *\n * @example\n * ```tsx\n * <Alert variant=\"error\" isDismissible onDismiss={() => setVisible(false)}>\n * {({ variant }) => <span>Something went wrong ({variant})</span>}\n * </Alert>\n * ```\n */\nexport function Alert(props: AlertProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"children\",\n \"class\",\n \"style\",\n \"slot\",\n \"variant\",\n \"isDismissible\",\n \"onDismiss\",\n ]);\n\n const variant = () => local.variant ?? \"info\";\n const isDismissible = () => !!local.isDismissible;\n\n const renderValues = createMemo<AlertRenderProps>(() => ({\n variant: variant(),\n isDismissible: isDismissible(),\n }));\n\n // Resolve class and style manually. We intentionally avoid useRenderProps()\n // because it destructures children eagerly, which would create child\n // components (e.g. AlertDismissButton) BEFORE the AlertContext.Provider\n // is in scope, breaking context for sub-components.\n const computedClass = createMemo(() => {\n const cls = local.class;\n return typeof cls === \"function\" ? cls(renderValues()) : (cls ?? \"solidaria-Alert\");\n });\n\n const computedStyle = createMemo(() => {\n const s = local.style;\n return typeof s === \"function\" ? s(renderValues()) : s;\n });\n\n const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n const contextValue: AlertContextValue = {\n variant,\n isDismissible,\n onDismiss: local.onDismiss,\n };\n\n // Children are accessed lazily inside the Provider scope (via local.children\n // in JSX) so sub-components like AlertDismissButton can read AlertContext.\n return (\n <AlertContext value={contextValue}>\n <div\n {...domProps()}\n role=\"alert\"\n class={computedClass()}\n style={computedStyle()}\n data-variant={variant()}\n data-dismissible={dataAttr(isDismissible())}\n >\n {evaluateRenderChildren(local.children, renderValues())}\n </div>\n </AlertContext>\n );\n}\n\nexport interface AlertDismissButtonProps extends Omit<ButtonProps, \"onPress\"> {}\n\n/**\n * A dismiss button for use inside an Alert.\n * Uses the headless Button for full keyboard/a11y support.\n *\n * @example\n * ```tsx\n * <Alert isDismissible onDismiss={handleDismiss}>\n * <span>Alert content</span>\n * <AlertDismissButton aria-label=\"Dismiss\">X</AlertDismissButton>\n * </Alert>\n * ```\n */\nexport function AlertDismissButton(props: AlertDismissButtonProps): JSX.Element {\n const context = useContext(AlertContext);\n\n return (\n <Button\n {...props}\n aria-label={props[\"aria-label\"] ?? \"Dismiss\"}\n onPress={() => context?.onDismiss?.()}\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyDA,MAAa,eAAe,cAAwC,IAAI;;;;;;;;;;;;;;;AAgBxE,SAAgB,MAAM,OAAgC;CACpD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,MAAM,WAAW;CACvC,MAAM,sBAAsB,CAAC,CAAC,MAAM;CAEpC,MAAM,eAAe,kBAAoC;EACvD,SAAS,QAAQ;EACjB,eAAe,cAAc;CAC/B,EAAE;CAMF,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,MAAM,MAAM;EAClB,OAAO,OAAO,QAAQ,aAAa,IAAI,aAAa,CAAC,IAAK,OAAO;CACnE,CAAC;CAED,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,IAAI,MAAM;EAChB,OAAO,OAAO,MAAM,aAAa,EAAE,aAAa,CAAC,IAAI;CACvD,CAAC;CAED,MAAM,WAAW,iBAAiB,eAAe,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC;CAExE,MAAM,eAAkC;EACtC;EACA;EACA,WAAW,MAAM;CACnB;CAIA,OACEA,gBAAAA,cAAAA;EAAcC,OAAO;EAArB,IAAA,WAAA;GACE,IAAA,OAAA,eAAA,MASK;GARC,OAAA,MAAA,CAAA,UAAA;IACJC,MAAAA;IACA,IAAA,UAAA;KAAO,OAAA,cAAc;IAAC;IACtB,IAAA,QAAA;KAAO,OAAA,cAAc;IAAC;IACtB,IAAA,iBAAA;KAAc,OAAA,QAAQ;IAAC;IACvB,IAAA,qBAAA;KAAkB,OAAA,SAAS,cAAc,CAAC;IAAC;;GAN7C,OAAA,MAQEC,YAAAA;IAAC,OAAA,uBAAuB,MAAM,UAAU,aAAa,CAAC;GAAC,CAAA,CACpD;GATL,mBASK;GAVP,OACEC;EAUY;;AAElB;;;;;;;;;;;;;AAgBA,SAAgB,mBAAmB,OAA6C;CAC9E,MAAM,UAAU,WAAW,YAAY;CAEvC,OACEC,gBAAAA,QAAAA,WACM,OADN;EAEE,IAAA,eAAA;GAAY,OAAA,MAAM,iBAAiB;EAAS;EAC5CC,eAAe,SAAS,YAAY;CACrC,CAAA,CAAA;AAEL"}
package/dist/Alert.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import { dataAttr, filterDOMProps } from "./utils.jsx";
1
+ import { dataAttr, evaluateRenderChildren, filterDOMProps } from "./utils.jsx";
2
2
  import { Button } from "./Button.jsx";
3
3
  import { createContext, createMemo, useContext } from "solid-js";
4
4
  import { splitProps } from "@proyecto-viviana/solidaria/utils";
@@ -60,7 +60,7 @@ function Alert(props) {
60
60
  };
61
61
  return <AlertContext value={contextValue}>
62
62
  <div {...domProps()} role="alert" class={computedClass()} style={computedStyle()} data-variant={variant()} data-dismissible={dataAttr(isDismissible())}>
63
- {typeof local.children === "function" ? local.children(renderValues()) : local.children}
63
+ {evaluateRenderChildren(local.children, renderValues())}
64
64
  </div>
65
65
  </AlertContext>;
66
66
  }