@react-spectrum/s2 3.0.0-nightly-ab9fd5c68-241125 → 3.0.0-nightly-10a43de88-241127

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 (359) hide show
  1. package/dist/Accordion.cjs +2 -5
  2. package/dist/Accordion.cjs.map +1 -1
  3. package/dist/Accordion.css.map +1 -1
  4. package/dist/Accordion.mjs +2 -5
  5. package/dist/Accordion.mjs.map +1 -1
  6. package/dist/ActionButton.cjs +2 -6
  7. package/dist/ActionButton.cjs.map +1 -1
  8. package/dist/ActionButton.css.map +1 -1
  9. package/dist/ActionButton.mjs +3 -7
  10. package/dist/ActionButton.mjs.map +1 -1
  11. package/dist/ActionButtonGroup.cjs +2 -5
  12. package/dist/ActionButtonGroup.cjs.map +1 -1
  13. package/dist/ActionButtonGroup.css.map +1 -1
  14. package/dist/ActionButtonGroup.mjs +2 -5
  15. package/dist/ActionButtonGroup.mjs.map +1 -1
  16. package/dist/ActionMenu.cjs +2 -5
  17. package/dist/ActionMenu.cjs.map +1 -1
  18. package/dist/ActionMenu.mjs +2 -5
  19. package/dist/ActionMenu.mjs.map +1 -1
  20. package/dist/AlertDialog.cjs +2 -5
  21. package/dist/AlertDialog.cjs.map +1 -1
  22. package/dist/AlertDialog.css.map +1 -1
  23. package/dist/AlertDialog.mjs +2 -5
  24. package/dist/AlertDialog.mjs.map +1 -1
  25. package/dist/Avatar.cjs +2 -5
  26. package/dist/Avatar.cjs.map +1 -1
  27. package/dist/Avatar.css.map +1 -1
  28. package/dist/Avatar.mjs +2 -5
  29. package/dist/Avatar.mjs.map +1 -1
  30. package/dist/AvatarGroup.cjs +2 -5
  31. package/dist/AvatarGroup.cjs.map +1 -1
  32. package/dist/AvatarGroup.css.map +1 -1
  33. package/dist/AvatarGroup.mjs +2 -5
  34. package/dist/AvatarGroup.mjs.map +1 -1
  35. package/dist/Badge.cjs +2 -5
  36. package/dist/Badge.cjs.map +1 -1
  37. package/dist/Badge.css.map +1 -1
  38. package/dist/Badge.mjs +2 -5
  39. package/dist/Badge.mjs.map +1 -1
  40. package/dist/Breadcrumbs.cjs +4 -6
  41. package/dist/Breadcrumbs.cjs.map +1 -1
  42. package/dist/Breadcrumbs.css.map +1 -1
  43. package/dist/Breadcrumbs.mjs +5 -7
  44. package/dist/Breadcrumbs.mjs.map +1 -1
  45. package/dist/Button.cjs +4 -12
  46. package/dist/Button.cjs.map +1 -1
  47. package/dist/Button.css.map +1 -1
  48. package/dist/Button.mjs +5 -13
  49. package/dist/Button.mjs.map +1 -1
  50. package/dist/ButtonGroup.cjs +2 -5
  51. package/dist/ButtonGroup.cjs.map +1 -1
  52. package/dist/ButtonGroup.css.map +1 -1
  53. package/dist/ButtonGroup.mjs +3 -6
  54. package/dist/ButtonGroup.mjs.map +1 -1
  55. package/dist/CardView.cjs +2 -3
  56. package/dist/CardView.cjs.map +1 -1
  57. package/dist/CardView.css.map +1 -1
  58. package/dist/CardView.mjs +3 -4
  59. package/dist/CardView.mjs.map +1 -1
  60. package/dist/Checkbox.cjs +2 -6
  61. package/dist/Checkbox.cjs.map +1 -1
  62. package/dist/Checkbox.css.map +1 -1
  63. package/dist/Checkbox.mjs +3 -7
  64. package/dist/Checkbox.mjs.map +1 -1
  65. package/dist/CheckboxGroup.cjs +2 -5
  66. package/dist/CheckboxGroup.cjs.map +1 -1
  67. package/dist/CheckboxGroup.css.map +1 -1
  68. package/dist/CheckboxGroup.mjs +3 -6
  69. package/dist/CheckboxGroup.mjs.map +1 -1
  70. package/dist/ClearButton.cjs +2 -3
  71. package/dist/ClearButton.cjs.map +1 -1
  72. package/dist/ClearButton.css.map +1 -1
  73. package/dist/ClearButton.mjs +2 -3
  74. package/dist/ClearButton.mjs.map +1 -1
  75. package/dist/CloseButton.cjs +2 -5
  76. package/dist/CloseButton.cjs.map +1 -1
  77. package/dist/CloseButton.css.map +1 -1
  78. package/dist/CloseButton.mjs +2 -5
  79. package/dist/CloseButton.mjs.map +1 -1
  80. package/dist/ColorArea.cjs +2 -5
  81. package/dist/ColorArea.cjs.map +1 -1
  82. package/dist/ColorArea.css.map +1 -1
  83. package/dist/ColorArea.mjs +2 -5
  84. package/dist/ColorArea.mjs.map +1 -1
  85. package/dist/ColorField.cjs +2 -5
  86. package/dist/ColorField.cjs.map +1 -1
  87. package/dist/ColorField.css.map +1 -1
  88. package/dist/ColorField.mjs +3 -6
  89. package/dist/ColorField.mjs.map +1 -1
  90. package/dist/ColorSlider.cjs +2 -5
  91. package/dist/ColorSlider.cjs.map +1 -1
  92. package/dist/ColorSlider.css.map +1 -1
  93. package/dist/ColorSlider.mjs +3 -6
  94. package/dist/ColorSlider.mjs.map +1 -1
  95. package/dist/ColorSwatch.cjs +2 -5
  96. package/dist/ColorSwatch.cjs.map +1 -1
  97. package/dist/ColorSwatch.css.map +1 -1
  98. package/dist/ColorSwatch.mjs +3 -6
  99. package/dist/ColorSwatch.mjs.map +1 -1
  100. package/dist/ColorSwatchPicker.cjs +2 -5
  101. package/dist/ColorSwatchPicker.cjs.map +1 -1
  102. package/dist/ColorSwatchPicker.css.map +1 -1
  103. package/dist/ColorSwatchPicker.mjs +2 -5
  104. package/dist/ColorSwatchPicker.mjs.map +1 -1
  105. package/dist/ColorWheel.cjs +2 -5
  106. package/dist/ColorWheel.cjs.map +1 -1
  107. package/dist/ColorWheel.css.map +1 -1
  108. package/dist/ColorWheel.mjs +2 -5
  109. package/dist/ColorWheel.mjs.map +1 -1
  110. package/dist/ComboBox.cjs +2 -5
  111. package/dist/ComboBox.cjs.map +1 -1
  112. package/dist/ComboBox.css.map +1 -1
  113. package/dist/ComboBox.mjs +3 -6
  114. package/dist/ComboBox.mjs.map +1 -1
  115. package/dist/Content.cjs +12 -19
  116. package/dist/Content.cjs.map +1 -1
  117. package/dist/Content.mjs +12 -19
  118. package/dist/Content.mjs.map +1 -1
  119. package/dist/ContextualHelp.cjs +2 -5
  120. package/dist/ContextualHelp.cjs.map +1 -1
  121. package/dist/ContextualHelp.css.map +1 -1
  122. package/dist/ContextualHelp.mjs +2 -5
  123. package/dist/ContextualHelp.mjs.map +1 -1
  124. package/dist/CustomDialog.cjs +2 -5
  125. package/dist/CustomDialog.cjs.map +1 -1
  126. package/dist/CustomDialog.css.map +1 -1
  127. package/dist/CustomDialog.mjs +2 -5
  128. package/dist/CustomDialog.mjs.map +1 -1
  129. package/dist/Dialog.cjs +2 -6
  130. package/dist/Dialog.cjs.map +1 -1
  131. package/dist/Dialog.css.map +1 -1
  132. package/dist/Dialog.mjs +2 -6
  133. package/dist/Dialog.mjs.map +1 -1
  134. package/dist/Disclosure.cjs +6 -15
  135. package/dist/Disclosure.cjs.map +1 -1
  136. package/dist/Disclosure.css.map +1 -1
  137. package/dist/Disclosure.mjs +7 -16
  138. package/dist/Disclosure.mjs.map +1 -1
  139. package/dist/Divider.cjs +2 -6
  140. package/dist/Divider.cjs.map +1 -1
  141. package/dist/Divider.css.map +1 -1
  142. package/dist/Divider.mjs +2 -6
  143. package/dist/Divider.mjs.map +1 -1
  144. package/dist/DropZone.cjs +2 -5
  145. package/dist/DropZone.cjs.map +1 -1
  146. package/dist/DropZone.css.map +1 -1
  147. package/dist/DropZone.mjs +2 -5
  148. package/dist/DropZone.mjs.map +1 -1
  149. package/dist/Field.cjs +6 -9
  150. package/dist/Field.cjs.map +1 -1
  151. package/dist/Field.css.map +1 -1
  152. package/dist/Field.mjs +6 -9
  153. package/dist/Field.mjs.map +1 -1
  154. package/dist/Form.cjs +2 -5
  155. package/dist/Form.cjs.map +1 -1
  156. package/dist/Form.css.map +1 -1
  157. package/dist/Form.mjs +2 -5
  158. package/dist/Form.mjs.map +1 -1
  159. package/dist/FullscreenDialog.cjs +2 -5
  160. package/dist/FullscreenDialog.cjs.map +1 -1
  161. package/dist/FullscreenDialog.css.map +1 -1
  162. package/dist/FullscreenDialog.mjs +2 -5
  163. package/dist/FullscreenDialog.mjs.map +1 -1
  164. package/dist/IllustratedMessage.cjs +2 -6
  165. package/dist/IllustratedMessage.cjs.map +1 -1
  166. package/dist/IllustratedMessage.css.map +1 -1
  167. package/dist/IllustratedMessage.mjs +2 -6
  168. package/dist/IllustratedMessage.mjs.map +1 -1
  169. package/dist/Image.cjs +2 -3
  170. package/dist/Image.cjs.map +1 -1
  171. package/dist/Image.css.map +1 -1
  172. package/dist/Image.mjs +3 -4
  173. package/dist/Image.mjs.map +1 -1
  174. package/dist/InlineAlert.cjs +2 -6
  175. package/dist/InlineAlert.cjs.map +1 -1
  176. package/dist/InlineAlert.css.map +1 -1
  177. package/dist/InlineAlert.mjs +3 -7
  178. package/dist/InlineAlert.mjs.map +1 -1
  179. package/dist/Link.cjs +2 -6
  180. package/dist/Link.cjs.map +1 -1
  181. package/dist/Link.css.map +1 -1
  182. package/dist/Link.mjs +3 -7
  183. package/dist/Link.mjs.map +1 -1
  184. package/dist/Menu.cjs +2 -5
  185. package/dist/Menu.cjs.map +1 -1
  186. package/dist/Menu.css.map +1 -1
  187. package/dist/Menu.mjs +3 -6
  188. package/dist/Menu.mjs.map +1 -1
  189. package/dist/Meter.cjs +2 -6
  190. package/dist/Meter.cjs.map +1 -1
  191. package/dist/Meter.css.map +1 -1
  192. package/dist/Meter.mjs +2 -6
  193. package/dist/Meter.mjs.map +1 -1
  194. package/dist/Modal.cjs +2 -5
  195. package/dist/Modal.cjs.map +1 -1
  196. package/dist/Modal.css.map +1 -1
  197. package/dist/Modal.mjs +3 -6
  198. package/dist/Modal.mjs.map +1 -1
  199. package/dist/NumberField.cjs +2 -5
  200. package/dist/NumberField.cjs.map +1 -1
  201. package/dist/NumberField.css.map +1 -1
  202. package/dist/NumberField.mjs +3 -6
  203. package/dist/NumberField.mjs.map +1 -1
  204. package/dist/Picker.cjs +2 -5
  205. package/dist/Picker.cjs.map +1 -1
  206. package/dist/Picker.css.map +1 -1
  207. package/dist/Picker.mjs +3 -6
  208. package/dist/Picker.mjs.map +1 -1
  209. package/dist/Popover.cjs +4 -8
  210. package/dist/Popover.cjs.map +1 -1
  211. package/dist/Popover.css.map +1 -1
  212. package/dist/Popover.mjs +5 -9
  213. package/dist/Popover.mjs.map +1 -1
  214. package/dist/ProgressBar.cjs +2 -6
  215. package/dist/ProgressBar.cjs.map +1 -1
  216. package/dist/ProgressBar.css.map +1 -1
  217. package/dist/ProgressBar.mjs +2 -6
  218. package/dist/ProgressBar.mjs.map +1 -1
  219. package/dist/ProgressCircle.cjs +2 -6
  220. package/dist/ProgressCircle.cjs.map +1 -1
  221. package/dist/ProgressCircle.css.map +1 -1
  222. package/dist/ProgressCircle.mjs +2 -6
  223. package/dist/ProgressCircle.mjs.map +1 -1
  224. package/dist/Radio.cjs +2 -6
  225. package/dist/Radio.cjs.map +1 -1
  226. package/dist/Radio.css.map +1 -1
  227. package/dist/Radio.mjs +3 -7
  228. package/dist/Radio.mjs.map +1 -1
  229. package/dist/RadioGroup.cjs +2 -6
  230. package/dist/RadioGroup.cjs.map +1 -1
  231. package/dist/RadioGroup.css.map +1 -1
  232. package/dist/RadioGroup.mjs +3 -7
  233. package/dist/RadioGroup.mjs.map +1 -1
  234. package/dist/RangeSlider.cjs +2 -3
  235. package/dist/RangeSlider.cjs.map +1 -1
  236. package/dist/RangeSlider.mjs +3 -4
  237. package/dist/RangeSlider.mjs.map +1 -1
  238. package/dist/SearchField.cjs +2 -5
  239. package/dist/SearchField.cjs.map +1 -1
  240. package/dist/SearchField.css.map +1 -1
  241. package/dist/SearchField.mjs +3 -6
  242. package/dist/SearchField.mjs.map +1 -1
  243. package/dist/SegmentedControl.cjs +5 -11
  244. package/dist/SegmentedControl.cjs.map +1 -1
  245. package/dist/SegmentedControl.css.map +1 -1
  246. package/dist/SegmentedControl.mjs +6 -12
  247. package/dist/SegmentedControl.mjs.map +1 -1
  248. package/dist/Slider.cjs +2 -3
  249. package/dist/Slider.cjs.map +1 -1
  250. package/dist/Slider.css.map +1 -1
  251. package/dist/Slider.mjs +3 -4
  252. package/dist/Slider.mjs.map +1 -1
  253. package/dist/StatusLight.cjs +2 -6
  254. package/dist/StatusLight.cjs.map +1 -1
  255. package/dist/StatusLight.css.map +1 -1
  256. package/dist/StatusLight.mjs +2 -6
  257. package/dist/StatusLight.mjs.map +1 -1
  258. package/dist/Switch.cjs +2 -6
  259. package/dist/Switch.cjs.map +1 -1
  260. package/dist/Switch.css.map +1 -1
  261. package/dist/Switch.mjs +3 -7
  262. package/dist/Switch.mjs.map +1 -1
  263. package/dist/TableView.cjs +9 -21
  264. package/dist/TableView.cjs.map +1 -1
  265. package/dist/TableView.css.map +1 -1
  266. package/dist/TableView.mjs +10 -22
  267. package/dist/TableView.mjs.map +1 -1
  268. package/dist/Tabs.cjs +2 -5
  269. package/dist/Tabs.cjs.map +1 -1
  270. package/dist/Tabs.css.map +1 -1
  271. package/dist/Tabs.mjs +2 -5
  272. package/dist/Tabs.mjs.map +1 -1
  273. package/dist/TagGroup.cjs +4 -6
  274. package/dist/TagGroup.cjs.map +1 -1
  275. package/dist/TagGroup.css.map +1 -1
  276. package/dist/TagGroup.mjs +4 -6
  277. package/dist/TagGroup.mjs.map +1 -1
  278. package/dist/TextField.cjs +8 -19
  279. package/dist/TextField.cjs.map +1 -1
  280. package/dist/TextField.css.map +1 -1
  281. package/dist/TextField.mjs +9 -20
  282. package/dist/TextField.mjs.map +1 -1
  283. package/dist/ToggleButton.cjs +2 -6
  284. package/dist/ToggleButton.cjs.map +1 -1
  285. package/dist/ToggleButton.css.map +1 -1
  286. package/dist/ToggleButton.mjs +2 -6
  287. package/dist/ToggleButton.mjs.map +1 -1
  288. package/dist/ToggleButtonGroup.cjs +2 -5
  289. package/dist/ToggleButtonGroup.cjs.map +1 -1
  290. package/dist/ToggleButtonGroup.mjs +2 -5
  291. package/dist/ToggleButtonGroup.mjs.map +1 -1
  292. package/dist/Tooltip.cjs +3 -6
  293. package/dist/Tooltip.cjs.map +1 -1
  294. package/dist/Tooltip.css.map +1 -1
  295. package/dist/Tooltip.mjs +4 -7
  296. package/dist/Tooltip.mjs.map +1 -1
  297. package/dist/types.d.ts +64 -64
  298. package/dist/types.d.ts.map +1 -1
  299. package/package.json +17 -17
  300. package/src/Accordion.tsx +5 -8
  301. package/src/ActionButton.tsx +6 -9
  302. package/src/ActionButtonGroup.tsx +5 -8
  303. package/src/ActionMenu.tsx +5 -8
  304. package/src/AlertDialog.tsx +5 -8
  305. package/src/Avatar.tsx +5 -8
  306. package/src/AvatarGroup.tsx +5 -8
  307. package/src/Badge.tsx +5 -8
  308. package/src/Breadcrumbs.tsx +6 -12
  309. package/src/Button.tsx +10 -16
  310. package/src/ButtonGroup.tsx +5 -8
  311. package/src/CardView.tsx +2 -5
  312. package/src/Checkbox.tsx +6 -9
  313. package/src/CheckboxGroup.tsx +5 -8
  314. package/src/ClearButton.tsx +2 -5
  315. package/src/CloseButton.tsx +5 -8
  316. package/src/ColorArea.tsx +5 -8
  317. package/src/ColorField.tsx +5 -8
  318. package/src/ColorSlider.tsx +5 -8
  319. package/src/ColorSwatch.tsx +5 -8
  320. package/src/ColorSwatchPicker.tsx +5 -8
  321. package/src/ColorWheel.tsx +5 -8
  322. package/src/ComboBox.tsx +5 -8
  323. package/src/Content.tsx +12 -30
  324. package/src/ContextualHelp.tsx +5 -8
  325. package/src/CustomDialog.tsx +5 -8
  326. package/src/Dialog.tsx +6 -9
  327. package/src/Disclosure.tsx +15 -24
  328. package/src/Divider.tsx +6 -9
  329. package/src/DropZone.tsx +5 -8
  330. package/src/Field.tsx +6 -15
  331. package/src/Form.tsx +5 -8
  332. package/src/FullscreenDialog.tsx +5 -8
  333. package/src/IllustratedMessage.tsx +6 -9
  334. package/src/Image.tsx +3 -6
  335. package/src/InlineAlert.tsx +6 -9
  336. package/src/Link.tsx +6 -9
  337. package/src/Menu.tsx +5 -8
  338. package/src/Meter.tsx +6 -9
  339. package/src/Modal.tsx +5 -8
  340. package/src/NumberField.tsx +5 -8
  341. package/src/Picker.tsx +5 -8
  342. package/src/Popover.tsx +9 -15
  343. package/src/ProgressBar.tsx +6 -9
  344. package/src/ProgressCircle.tsx +6 -9
  345. package/src/Radio.tsx +6 -9
  346. package/src/RadioGroup.tsx +6 -9
  347. package/src/RangeSlider.tsx +2 -5
  348. package/src/SearchField.tsx +5 -8
  349. package/src/SegmentedControl.tsx +10 -16
  350. package/src/Slider.tsx +2 -5
  351. package/src/StatusLight.tsx +6 -9
  352. package/src/Switch.tsx +6 -9
  353. package/src/TableView.tsx +20 -32
  354. package/src/Tabs.tsx +5 -8
  355. package/src/TagGroup.tsx +7 -14
  356. package/src/TextField.tsx +20 -28
  357. package/src/ToggleButton.tsx +6 -9
  358. package/src/ToggleButtonGroup.tsx +5 -8
  359. package/src/Tooltip.tsx +5 -9
@@ -1 +1 @@
1
- {"mappings":"AC2DyB;;;;;;;;;;AASA;;;;;;;;;;AAST;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArFf;EA0CI;;;;EAAA;;;;;AA1CJ;;AA0CI;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaP;;;;;;AAbO;EAAA;IAAA;;;;;;AAaP","sources":["7293bad37f188837","packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["@import \"0b8d2821d82ee250\";\n@import \"f2b8eec694697861\";\n@import \"bd67a9a4e04bbe30\";\n@import \"928e619efccddb64\";\n@import \"27fd25d02acf65a5\";\n@import \"47f66b5fa7a24be0\";\n@import \"5d9861be4320075f\";\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\nimport {\n ProgressBar as AriaProgressBar,\n ProgressBarProps as AriaProgressBarProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n /**\n * The size of the ProgressBar.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean,\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n 0% {\n transform: translateX(-70%) scaleX(0.7);\n }\n 100% {\n transform: translateX(100%) scaleX(0.7);\n }\n`);\n\nconst indeterminateRTL = keyframes(`\n 0% {\n transform: translateX(100%) scaleX(0.7);\n }\n 100% {\n transform: translateX(-70%) scaleX(0.7);\n }\n`);\n\nconst wrapper = style({\n ...bar(),\n gridTemplateColumns: {\n default: {\n labelPosition: {\n top: ['1fr', 'auto'],\n side: ['auto', '1fr']\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: ['1fr'],\n side: ['auto', '1fr']\n }\n }\n },\n gridTemplateAreas: {\n default: {\n labelPosition: {\n top: [\n 'label value',\n 'bar bar'\n ],\n side: [\n 'label bar value'\n ]\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: [\n 'label',\n 'bar'\n ],\n side: [\n 'label bar'\n ]\n }\n }\n }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'accent',\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n },\n width: {\n isIndeterminate: 'full'\n },\n transformOrigin: {\n isIndeterminate: 'left'\n }\n});\n\nconst indeterminateAnimation = style({\n animation: {\n direction: {\n ltr: indeterminateLTR,\n rtl: indeterminateRTL\n }\n },\n animationDuration: 1000,\n animationIterationCount: 'infinite',\n animationTimingFunction: 'in-out',\n willChange: 'transform',\n position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n let {\n label, size = 'M',\n staticColor,\n isIndeterminate,\n labelPosition = 'top',\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n\n return (\n <AriaProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({...props})}>\n <div\n className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.css.map"}
1
+ {"mappings":"AC2DyB;;;;;;;;;;AASA;;;;;;;;;;AAST;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArFf;EA0CI;;;;EAAA;;;;;AA1CJ;;AA0CI;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaP;;;;;;AAbO;EAAA;IAAA;;;;;;AAaP","sources":["7293bad37f188837","packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["@import \"0b8d2821d82ee250\";\n@import \"f2b8eec694697861\";\n@import \"bd67a9a4e04bbe30\";\n@import \"928e619efccddb64\";\n@import \"27fd25d02acf65a5\";\n@import \"47f66b5fa7a24be0\";\n@import \"5d9861be4320075f\";\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\nimport {\n ProgressBar as AriaProgressBar,\n ProgressBarProps as AriaProgressBarProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n /**\n * The size of the ProgressBar.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean,\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n 0% {\n transform: translateX(-70%) scaleX(0.7);\n }\n 100% {\n transform: translateX(100%) scaleX(0.7);\n }\n`);\n\nconst indeterminateRTL = keyframes(`\n 0% {\n transform: translateX(100%) scaleX(0.7);\n }\n 100% {\n transform: translateX(-70%) scaleX(0.7);\n }\n`);\n\nconst wrapper = style({\n ...bar(),\n gridTemplateColumns: {\n default: {\n labelPosition: {\n top: ['1fr', 'auto'],\n side: ['auto', '1fr']\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: ['1fr'],\n side: ['auto', '1fr']\n }\n }\n },\n gridTemplateAreas: {\n default: {\n labelPosition: {\n top: [\n 'label value',\n 'bar bar'\n ],\n side: [\n 'label bar value'\n ]\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: [\n 'label',\n 'bar'\n ],\n side: [\n 'label bar'\n ]\n }\n }\n }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'accent',\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n },\n width: {\n isIndeterminate: 'full'\n },\n transformOrigin: {\n isIndeterminate: 'left'\n }\n});\n\nconst indeterminateAnimation = style({\n animation: {\n direction: {\n ltr: indeterminateLTR,\n rtl: indeterminateRTL\n }\n },\n animationDuration: 1000,\n animationIterationCount: 'infinite',\n animationTimingFunction: 'in-out',\n willChange: 'transform',\n position: 'relative'\n});\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n let {\n label, size = 'M',\n staticColor,\n isIndeterminate,\n labelPosition = 'top',\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n\n return (\n <AriaProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({...props})}>\n <div\n className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n});\n\n"],"names":[],"version":3,"file":"ProgressBar.css.map"}
@@ -191,7 +191,7 @@ const $b847b7cd294eafba$var$indeterminateAnimation = function anonymous(props) {
191
191
  rules += ' Uc';
192
192
  return rules;
193
193
  };
194
- function $b847b7cd294eafba$var$ProgressBar(props, ref) {
194
+ const $b847b7cd294eafba$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $cNVLZ$forwardRef)(function ProgressBar(props, ref) {
195
195
  [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $b847b7cd294eafba$export$e9f3bf65a26ce129);
196
196
  let { label: label, size: size = 'M', staticColor: staticColor, isIndeterminate: isIndeterminate, labelPosition: labelPosition = 'top', UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
197
197
  let domRef = (0, $cNVLZ$useDOMRef)(ref);
@@ -241,11 +241,7 @@ function $b847b7cd294eafba$var$ProgressBar(props, ref) {
241
241
  ]
242
242
  })
243
243
  });
244
- }
245
- /**
246
- * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
247
- * They can represent either determinate or indeterminate progress.
248
- */ const $b847b7cd294eafba$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $cNVLZ$forwardRef)($b847b7cd294eafba$var$ProgressBar);
244
+ });
249
245
 
250
246
 
251
247
  export {$b847b7cd294eafba$export$e9f3bf65a26ce129 as ProgressBarContext, $b847b7cd294eafba$export$c17561cb55d4db30 as ProgressBar};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;;;;;;;;;;;AAcN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;QAAa,GAAG,MAAM,MAAM;kBAClF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gBAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACrG,gBAAC;wBAAI,WAAW,kCAAY;4BAAC,GAAG,KAAK;wBAAA;kCACnC,cAAA,gBAAC;4BACC,WAAW,CAAA,GAAA,yCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;6CAAE;4BAAW,IAAK,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BAC/G,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E;AAEA;;;CAGC,GACD,MAAM,4CAAe,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["/*\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\nimport {\n ProgressBar as AriaProgressBar,\n ProgressBarProps as AriaProgressBarProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n /**\n * The size of the ProgressBar.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean,\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n 0% {\n transform: translateX(-70%) scaleX(0.7);\n }\n 100% {\n transform: translateX(100%) scaleX(0.7);\n }\n`);\n\nconst indeterminateRTL = keyframes(`\n 0% {\n transform: translateX(100%) scaleX(0.7);\n }\n 100% {\n transform: translateX(-70%) scaleX(0.7);\n }\n`);\n\nconst wrapper = style({\n ...bar(),\n gridTemplateColumns: {\n default: {\n labelPosition: {\n top: ['1fr', 'auto'],\n side: ['auto', '1fr']\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: ['1fr'],\n side: ['auto', '1fr']\n }\n }\n },\n gridTemplateAreas: {\n default: {\n labelPosition: {\n top: [\n 'label value',\n 'bar bar'\n ],\n side: [\n 'label bar value'\n ]\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: [\n 'label',\n 'bar'\n ],\n side: [\n 'label bar'\n ]\n }\n }\n }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'accent',\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n },\n width: {\n isIndeterminate: 'full'\n },\n transformOrigin: {\n isIndeterminate: 'left'\n }\n});\n\nconst indeterminateAnimation = style({\n animation: {\n direction: {\n ltr: indeterminateLTR,\n rtl: indeterminateRTL\n }\n },\n animationDuration: 1000,\n animationIterationCount: 'infinite',\n animationTimingFunction: 'in-out',\n willChange: 'transform',\n position: 'relative'\n});\n\nfunction ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n let {\n label, size = 'M',\n staticColor,\n isIndeterminate,\n labelPosition = 'top',\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n\n return (\n <AriaProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({...props})}>\n <div\n className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n}\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nconst _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);\nexport {_ProgressBar as ProgressBar};\n\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}
1
+ {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;;;;;;;;;;;AAkBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;QAAa,GAAG,MAAM,MAAM;kBAClF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gBAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACrG,gBAAC;wBAAI,WAAW,kCAAY;4BAAC,GAAG,KAAK;wBAAA;kCACnC,cAAA,gBAAC;4BACC,WAAW,CAAA,GAAA,yCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;6CAAE;4BAAW,IAAK,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BAC/G,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E","sources":["packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["/*\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\nimport {\n ProgressBar as AriaProgressBar,\n ProgressBarProps as AriaProgressBarProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n /**\n * The size of the ProgressBar.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean,\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n 0% {\n transform: translateX(-70%) scaleX(0.7);\n }\n 100% {\n transform: translateX(100%) scaleX(0.7);\n }\n`);\n\nconst indeterminateRTL = keyframes(`\n 0% {\n transform: translateX(100%) scaleX(0.7);\n }\n 100% {\n transform: translateX(-70%) scaleX(0.7);\n }\n`);\n\nconst wrapper = style({\n ...bar(),\n gridTemplateColumns: {\n default: {\n labelPosition: {\n top: ['1fr', 'auto'],\n side: ['auto', '1fr']\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: ['1fr'],\n side: ['auto', '1fr']\n }\n }\n },\n gridTemplateAreas: {\n default: {\n labelPosition: {\n top: [\n 'label value',\n 'bar bar'\n ],\n side: [\n 'label bar value'\n ]\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: [\n 'label',\n 'bar'\n ],\n side: [\n 'label bar'\n ]\n }\n }\n }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'accent',\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n },\n width: {\n isIndeterminate: 'full'\n },\n transformOrigin: {\n isIndeterminate: 'left'\n }\n});\n\nconst indeterminateAnimation = style({\n animation: {\n direction: {\n ltr: indeterminateLTR,\n rtl: indeterminateRTL\n }\n },\n animationDuration: 1000,\n animationIterationCount: 'infinite',\n animationTimingFunction: 'in-out',\n willChange: 'transform',\n position: 'relative'\n});\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n let {\n label, size = 'M',\n staticColor,\n isIndeterminate,\n labelPosition = 'top',\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n\n return (\n <AriaProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({...props})}>\n <div\n className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n});\n\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}
@@ -73,7 +73,7 @@ const $1c116ea4b0d2d023$var$fill = function anonymous(props) {
73
73
  const $1c116ea4b0d2d023$var$rotationAnimation = "-u41dq3";
74
74
  // stroke-dashoffset represents `100 - percentage`. See below for how this works.
75
75
  const $1c116ea4b0d2d023$var$dashoffsetAnimation = "-_1i5ccgk";
76
- function $1c116ea4b0d2d023$var$ProgressCircle(props, ref) {
76
+ const $1c116ea4b0d2d023$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $5RNes$react.forwardRef)(function ProgressCircle(props, ref) {
77
77
  [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $1c116ea4b0d2d023$export$afffa1e5edf12209);
78
78
  let { size: size = 'M', staticColor: staticColor, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
79
79
  let domRef = (0, $5RNes$reactspectrumutils.useDOMRef)(ref);
@@ -127,11 +127,7 @@ function $1c116ea4b0d2d023$var$ProgressCircle(props, ref) {
127
127
  ]
128
128
  })
129
129
  });
130
- }
131
- /**
132
- * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
133
- * They can represent determinate or indeterminate progress.
134
- */ let $1c116ea4b0d2d023$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $5RNes$react.forwardRef)($1c116ea4b0d2d023$var$ProgressCircle);
130
+ });
135
131
 
136
132
 
137
133
  //# sourceMappingURL=ProgressCircle.cjs.map
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0BM,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAAkE;AAEnH,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAWN,MAAM;;;;;;;;AAWN,MAAM;;;;;;;;;;AAkBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAUN,SAAS,qCAAe,KAA0B,EAAE,GAA2B;IAC7E,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,cAAc;IAClB,IAAI,SAAS,KACX,cAAc;SACT,IAAI,SAAS,KAClB,cAAc;IAGhB,yGAAyG;IACzG,IAAI,SAAS,CAAC,WAAW,EAAE,cAAc,EAAE,GAAG,CAAC;IAE/C,qBACE,gCAAC,CAAA,GAAA,sCAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBACnD,GAAG,WAAW;sBACd;YACF,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iCAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,4BAAM;yCAAC;wBAAW;;kCAC/B,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,2BAAK;yCAAC;wBAAW;wBAC5B,OAAO;4BACL,yFAAyF;4BACzF,gGAAgG;4BAChG,WAAW,kBAAkB,GAAG,wCAAkB,2CAA2C,EAAE,0CAAoB,4CAA4C,CAAC,GAAG;wBACrK;wBACA,2FAA2F;wBAC3F,YAAW;wBACX,sDAAsD;wBACtD,iBAAgB;wBAChB,kBAAkB,mBAAmB,cAAc,OAAO,YAAY,MAAM;wBAC5E,eAAc;;;;;AAK1B;AAEA;;;CAGC,GACD,IAAI,4CAAkB,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["/*\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\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\nfunction ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n let {\n size = 'M',\n staticColor,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let strokeWidth = 3;\n if (size === 'S') {\n strokeWidth = 2;\n } else if (size === 'L') {\n strokeWidth = 4;\n }\n\n // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n return (\n <RACProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({\n ...renderProps,\n size\n }, props.styles)}>\n {({percentage, isIndeterminate}) => (\n <svg\n fill=\"none\"\n width=\"100%\"\n height=\"100%\">\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={track({staticColor})} />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={fill({staticColor})}\n style={{\n // These cubic-bezier timing functions were derived from the previous animation keyframes\n // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n }}\n // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n pathLength=\"100\"\n // Add extra gap between dashes so 0% works in Chrome.\n strokeDasharray=\"100 200\"\n strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n strokeLinecap=\"round\" />\n </svg>\n )}\n </RACProgressBar>\n );\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nlet _ProgressCircle = /*#__PURE__*/ forwardRef(ProgressCircle);\nexport {_ProgressCircle as ProgressCircle};\n"],"names":[],"version":3,"file":"ProgressCircle.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0BM,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAAkE;AAEnH,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAWN,MAAM;;;;;;;;AAWN,MAAM;;;;;;;;;;AAkBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAA2B;IACpI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,cAAc;IAClB,IAAI,SAAS,KACX,cAAc;SACT,IAAI,SAAS,KAClB,cAAc;IAGhB,yGAAyG;IACzG,IAAI,SAAS,CAAC,WAAW,EAAE,cAAc,EAAE,GAAG,CAAC;IAE/C,qBACE,gCAAC,CAAA,GAAA,sCAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBACnD,GAAG,WAAW;sBACd;YACF,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iCAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,4BAAM;yCAAC;wBAAW;;kCAC/B,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,2BAAK;yCAAC;wBAAW;wBAC5B,OAAO;4BACL,yFAAyF;4BACzF,gGAAgG;4BAChG,WAAW,kBAAkB,GAAG,wCAAkB,2CAA2C,EAAE,0CAAoB,4CAA4C,CAAC,GAAG;wBACrK;wBACA,2FAA2F;wBAC3F,YAAW;wBACX,sDAAsD;wBACtD,iBAAgB;wBAChB,kBAAkB,mBAAmB,cAAc,OAAO,YAAY,MAAM;wBAC5E,eAAc;;;;;AAK1B","sources":["packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["/*\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\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n let {\n size = 'M',\n staticColor,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let strokeWidth = 3;\n if (size === 'S') {\n strokeWidth = 2;\n } else if (size === 'L') {\n strokeWidth = 4;\n }\n\n // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n return (\n <RACProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({\n ...renderProps,\n size\n }, props.styles)}>\n {({percentage, isIndeterminate}) => (\n <svg\n fill=\"none\"\n width=\"100%\"\n height=\"100%\">\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={track({staticColor})} />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={fill({staticColor})}\n style={{\n // These cubic-bezier timing functions were derived from the previous animation keyframes\n // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n }}\n // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n pathLength=\"100\"\n // Add extra gap between dashes so 0% works in Chrome.\n strokeDasharray=\"100 200\"\n strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n strokeLinecap=\"round\" />\n </svg>\n )}\n </RACProgressBar>\n );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"ACuCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAWD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBG;;AAWF;EAAA;IAAA;;;;IAWD;;;;;;AAAA;;;;AAkBa;;;;;;;;;;AAWE","sources":["899fc8f7586d17bf","packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["@import \"766ebfa3e9b99037\";\n@import \"cdcaa7bc1c97d336\";\n@import \"788ab0411a865673\";\n@import \"73f154e47fb53c5b\";\n@import \"6c6d672d6676880a\";\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\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\nfunction ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n let {\n size = 'M',\n staticColor,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let strokeWidth = 3;\n if (size === 'S') {\n strokeWidth = 2;\n } else if (size === 'L') {\n strokeWidth = 4;\n }\n\n // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n return (\n <RACProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({\n ...renderProps,\n size\n }, props.styles)}>\n {({percentage, isIndeterminate}) => (\n <svg\n fill=\"none\"\n width=\"100%\"\n height=\"100%\">\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={track({staticColor})} />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={fill({staticColor})}\n style={{\n // These cubic-bezier timing functions were derived from the previous animation keyframes\n // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n }}\n // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n pathLength=\"100\"\n // Add extra gap between dashes so 0% works in Chrome.\n strokeDasharray=\"100 200\"\n strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n strokeLinecap=\"round\" />\n </svg>\n )}\n </RACProgressBar>\n );\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nlet _ProgressCircle = /*#__PURE__*/ forwardRef(ProgressCircle);\nexport {_ProgressCircle as ProgressCircle};\n"],"names":[],"version":3,"file":"ProgressCircle.css.map"}
1
+ {"mappings":"ACuCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAWD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBG;;AAWF;EAAA;IAAA;;;;IAWD;;;;;;AAAA;;;;AAkBa;;;;;;;;;;AAWE","sources":["899fc8f7586d17bf","packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["@import \"766ebfa3e9b99037\";\n@import \"cdcaa7bc1c97d336\";\n@import \"788ab0411a865673\";\n@import \"73f154e47fb53c5b\";\n@import \"6c6d672d6676880a\";\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\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n let {\n size = 'M',\n staticColor,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let strokeWidth = 3;\n if (size === 'S') {\n strokeWidth = 2;\n } else if (size === 'L') {\n strokeWidth = 4;\n }\n\n // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n return (\n <RACProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({\n ...renderProps,\n size\n }, props.styles)}>\n {({percentage, isIndeterminate}) => (\n <svg\n fill=\"none\"\n width=\"100%\"\n height=\"100%\">\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={track({staticColor})} />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={fill({staticColor})}\n style={{\n // These cubic-bezier timing functions were derived from the previous animation keyframes\n // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n }}\n // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n pathLength=\"100\"\n // Add extra gap between dashes so 0% works in Chrome.\n strokeDasharray=\"100 200\"\n strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n strokeLinecap=\"round\" />\n </svg>\n )}\n </RACProgressBar>\n );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.css.map"}
@@ -66,7 +66,7 @@ const $41ddd91dbbf0c389$var$fill = function anonymous(props) {
66
66
  const $41ddd91dbbf0c389$var$rotationAnimation = "-u41dq3";
67
67
  // stroke-dashoffset represents `100 - percentage`. See below for how this works.
68
68
  const $41ddd91dbbf0c389$var$dashoffsetAnimation = "-_1i5ccgk";
69
- function $41ddd91dbbf0c389$var$ProgressCircle(props, ref) {
69
+ const $41ddd91dbbf0c389$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $8ijGz$forwardRef)(function ProgressCircle(props, ref) {
70
70
  [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $41ddd91dbbf0c389$export$afffa1e5edf12209);
71
71
  let { size: size = 'M', staticColor: staticColor, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
72
72
  let domRef = (0, $8ijGz$useDOMRef)(ref);
@@ -120,11 +120,7 @@ function $41ddd91dbbf0c389$var$ProgressCircle(props, ref) {
120
120
  ]
121
121
  })
122
122
  });
123
- }
124
- /**
125
- * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
126
- * They can represent determinate or indeterminate progress.
127
- */ let $41ddd91dbbf0c389$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $8ijGz$forwardRef)($41ddd91dbbf0c389$var$ProgressCircle);
123
+ });
128
124
 
129
125
 
130
126
  export {$41ddd91dbbf0c389$export$afffa1e5edf12209 as ProgressCircleContext, $41ddd91dbbf0c389$export$c79b9d6b4cc92af7 as ProgressCircle};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0BM,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAkE;AAEnH,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAWN,MAAM;;;;;;;;AAWN,MAAM;;;;;;;;;;AAkBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAUN,SAAS,qCAAe,KAA0B,EAAE,GAA2B;IAC7E,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,cAAc;IAClB,IAAI,SAAS,KACX,cAAc;SACT,IAAI,SAAS,KAClB,cAAc;IAGhB,yGAAyG;IACzG,IAAI,SAAS,CAAC,WAAW,EAAE,cAAc,EAAE,GAAG,CAAC;IAE/C,qBACE,gBAAC,CAAA,GAAA,kBAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBACnD,GAAG,WAAW;sBACd;YACF,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iBAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,4BAAM;yCAAC;wBAAW;;kCAC/B,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,2BAAK;yCAAC;wBAAW;wBAC5B,OAAO;4BACL,yFAAyF;4BACzF,gGAAgG;4BAChG,WAAW,kBAAkB,GAAG,wCAAkB,2CAA2C,EAAE,0CAAoB,4CAA4C,CAAC,GAAG;wBACrK;wBACA,2FAA2F;wBAC3F,YAAW;wBACX,sDAAsD;wBACtD,iBAAgB;wBAChB,kBAAkB,mBAAmB,cAAc,OAAO,YAAY,MAAM;wBAC5E,eAAc;;;;;AAK1B;AAEA;;;CAGC,GACD,IAAI,4CAAkB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["/*\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\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\nfunction ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n let {\n size = 'M',\n staticColor,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let strokeWidth = 3;\n if (size === 'S') {\n strokeWidth = 2;\n } else if (size === 'L') {\n strokeWidth = 4;\n }\n\n // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n return (\n <RACProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({\n ...renderProps,\n size\n }, props.styles)}>\n {({percentage, isIndeterminate}) => (\n <svg\n fill=\"none\"\n width=\"100%\"\n height=\"100%\">\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={track({staticColor})} />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={fill({staticColor})}\n style={{\n // These cubic-bezier timing functions were derived from the previous animation keyframes\n // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n }}\n // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n pathLength=\"100\"\n // Add extra gap between dashes so 0% works in Chrome.\n strokeDasharray=\"100 200\"\n strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n strokeLinecap=\"round\" />\n </svg>\n )}\n </RACProgressBar>\n );\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nlet _ProgressCircle = /*#__PURE__*/ forwardRef(ProgressCircle);\nexport {_ProgressCircle as ProgressCircle};\n"],"names":[],"version":3,"file":"ProgressCircle.mjs.map"}
1
+ {"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0BM,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAkE;AAEnH,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAWN,MAAM;;;;;;;;AAWN,MAAM;;;;;;;;;;AAkBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAA2B;IACpI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,cAAc;IAClB,IAAI,SAAS,KACX,cAAc;SACT,IAAI,SAAS,KAClB,cAAc;IAGhB,yGAAyG;IACzG,IAAI,SAAS,CAAC,WAAW,EAAE,cAAc,EAAE,GAAG,CAAC;IAE/C,qBACE,gBAAC,CAAA,GAAA,kBAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBACnD,GAAG,WAAW;sBACd;YACF,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iBAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,4BAAM;yCAAC;wBAAW;;kCAC/B,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,2BAAK;yCAAC;wBAAW;wBAC5B,OAAO;4BACL,yFAAyF;4BACzF,gGAAgG;4BAChG,WAAW,kBAAkB,GAAG,wCAAkB,2CAA2C,EAAE,0CAAoB,4CAA4C,CAAC,GAAG;wBACrK;wBACA,2FAA2F;wBAC3F,YAAW;wBACX,sDAAsD;wBACtD,iBAAgB;wBAChB,kBAAkB,mBAAmB,cAAc,OAAO,YAAY,MAAM;wBAC5E,eAAc;;;;;AAK1B","sources":["packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["/*\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\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n let {\n size = 'M',\n staticColor,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let strokeWidth = 3;\n if (size === 'S') {\n strokeWidth = 2;\n } else if (size === 'L') {\n strokeWidth = 4;\n }\n\n // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n return (\n <RACProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({\n ...renderProps,\n size\n }, props.styles)}>\n {({percentage, isIndeterminate}) => (\n <svg\n fill=\"none\"\n width=\"100%\"\n height=\"100%\">\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={track({staticColor})} />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={fill({staticColor})}\n style={{\n // These cubic-bezier timing functions were derived from the previous animation keyframes\n // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n }}\n // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n pathLength=\"100\"\n // Add extra gap between dashes so 0% works in Chrome.\n strokeDasharray=\"100 200\"\n strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n strokeLinecap=\"round\" />\n </svg>\n )}\n </RACProgressBar>\n );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.mjs.map"}
package/dist/Radio.cjs CHANGED
@@ -150,7 +150,7 @@ const $49f41f366ec3019f$var$circle = function anonymous(props) {
150
150
  else rules += ' -_375toq_k-k';
151
151
  return rules;
152
152
  };
153
- function $49f41f366ec3019f$var$Radio(props, ref) {
153
+ const $49f41f366ec3019f$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, $fd22C$react.forwardRef)(function Radio(props, ref) {
154
154
  let { children: children, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style } = props;
155
155
  let circleRef = (0, $fd22C$react.useRef)(null);
156
156
  let inputRef = (0, $fd22C$react.useRef)(null);
@@ -185,11 +185,7 @@ function $49f41f366ec3019f$var$Radio(props, ref) {
185
185
  ]
186
186
  })
187
187
  });
188
- }
189
- /**
190
- * Radio buttons allow users to select a single option from a list of mutually exclusive options.
191
- * All possible options are exposed up front for users to compare.
192
- */ let $49f41f366ec3019f$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, $fd22C$react.forwardRef)($49f41f366ec3019f$var$Radio);
188
+ });
193
189
 
194
190
 
195
191
  //# sourceMappingURL=Radio.cjs.map
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCN,SAAS,4BAAM,KAAiB,EAAE,GAAmC;IACnE,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,sCAAW,EAAqB;IAEpC,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAS,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\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\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCC,MAAM,4CAAQ,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAAmC;IACjH,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,sCAAW,EAAqB;IAEpC,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\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\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n});\n"],"names":[],"version":3,"file":"Radio.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"ACkDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnBC;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAmBD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["9fa8f4e96c5d74b7","packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["@import \"4c55815e8f2cdad6\";\n@import \"4d824628f052c21a\";\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\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.css.map"}
1
+ {"mappings":"ACkDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnBC;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAmBD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["9fa8f4e96c5d74b7","packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["@import \"4c55815e8f2cdad6\";\n@import \"4d824628f052c21a\";\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\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n});\n"],"names":[],"version":3,"file":"Radio.css.map"}
package/dist/Radio.mjs CHANGED
@@ -4,7 +4,7 @@ import {FormContext as $9b916426527cebe7$export$c24727297075ec6a, useFormProps a
4
4
  import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
5
5
  import {jsx as $Ipfg8$jsx, jsxs as $Ipfg8$jsxs, Fragment as $Ipfg8$Fragment} from "react/jsx-runtime";
6
6
  import {Radio as $Ipfg8$Radio} from "react-aria-components";
7
- import {useRef as $Ipfg8$useRef, useContext as $Ipfg8$useContext, forwardRef as $Ipfg8$forwardRef} from "react";
7
+ import {forwardRef as $Ipfg8$forwardRef, useRef as $Ipfg8$useRef, useContext as $Ipfg8$useContext} from "react";
8
8
  import {useFocusableRef as $Ipfg8$useFocusableRef} from "@react-spectrum/utils";
9
9
 
10
10
  /*
@@ -144,7 +144,7 @@ const $1ae2870af9a200f8$var$circle = function anonymous(props) {
144
144
  else rules += ' -_375toq_k-k';
145
145
  return rules;
146
146
  };
147
- function $1ae2870af9a200f8$var$Radio(props, ref) {
147
+ const $1ae2870af9a200f8$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, $Ipfg8$forwardRef)(function Radio(props, ref) {
148
148
  let { children: children, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style } = props;
149
149
  let circleRef = (0, $Ipfg8$useRef)(null);
150
150
  let inputRef = (0, $Ipfg8$useRef)(null);
@@ -179,11 +179,7 @@ function $1ae2870af9a200f8$var$Radio(props, ref) {
179
179
  ]
180
180
  })
181
181
  });
182
- }
183
- /**
184
- * Radio buttons allow users to select a single option from a list of mutually exclusive options.
185
- * All possible options are exposed up front for users to compare.
186
- */ let $1ae2870af9a200f8$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, $Ipfg8$forwardRef)($1ae2870af9a200f8$var$Radio);
182
+ });
187
183
 
188
184
 
189
185
  export {$1ae2870af9a200f8$export$d7b12c4107be0d61 as Radio};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCN,SAAS,4BAAM,KAAiB,EAAE,GAAmC;IACnE,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,yCAAW,EAAqB;IAEpC,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAS,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\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\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.mjs.map"}
1
+ {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCC,MAAM,4CAAQ,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAAmC;IACjH,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,yCAAW,EAAqB;IAEpC,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\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\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n});\n"],"names":[],"version":3,"file":"Radio.mjs.map"}
@@ -32,7 +32,7 @@ $parcel$export(module.exports, "RadioGroup", () => $10d624be839a1d01$export$a98f
32
32
 
33
33
 
34
34
  const $10d624be839a1d01$export$a79eda4ff50e30b6 = /*#__PURE__*/ (0, $ijW5U$react.createContext)(null);
35
- function $10d624be839a1d01$var$RadioGroup(props, ref) {
35
+ const $10d624be839a1d01$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, $ijW5U$react.forwardRef)(function RadioGroup(props, ref) {
36
36
  [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $10d624be839a1d01$export$a79eda4ff50e30b6);
37
37
  let formContext = (0, $ijW5U$react.useContext)((0, $bfa4962d90c8af48$exports.FormContext));
38
38
  props = (0, $bfa4962d90c8af48$exports.useFormProps)(props);
@@ -152,11 +152,7 @@ function $10d624be839a1d01$var$RadioGroup(props, ref) {
152
152
  ]
153
153
  })
154
154
  });
155
- }
156
- /**
157
- * Radio groups allow users to select a single option from a list of mutually exclusive options.
158
- * All possible options are exposed up front for users to compare.
159
- */ let $10d624be839a1d01$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, $ijW5U$react.forwardRef)($10d624be839a1d01$var$RadioGroup);
155
+ });
160
156
 
161
157
 
162
158
  //# sourceMappingURL=RadioGroup.cjs.map
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuCM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAA8D;AAE3G,SAAS,iCAAW,KAAsB,EAAE,GAA2B;IACrE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,YACZ,QAAQ,gBACR,YAAY,iBACZ,gBAAgB,mBAChB,aAAa,6BACb,qBAAqB,cACrB,OAAO,kBACP,cAAc,8BACd,mBAAmB,kBACnB,YAAY,EACZ,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,qCAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOJ;kBACxB;2BACA;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;kCACE,gCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,gCAAC;wBACC,WAAW;;;;;;;;;;;;;0BAcR;yCAAC;wBAAW;kCACf,cAAA,gCAAC,CAAA,GAAA,qCAAU,EAAE,QAAQ;4BAAC,OAAO;gCAAC,GAAG,WAAW;sCAAE;8CAAM;4BAAY;sCAC7D;;;kCAGL,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;wBACb,aAAa;kCACZ;;;;;AAMb;AAEA;;;CAGC,GACD,IAAI,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/RadioGroup.tsx"],"sourcesContent":["/*\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\nimport {\n RadioGroup as AriaRadioGroup,\n RadioGroupProps as AriaRadioGroupProps,\n ContextValue\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The Radios contained within the RadioGroup.\n */\n children?: ReactNode,\n /**\n * The size of the RadioGroup.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The axis the radio elements should align with.\n *\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * Whether the RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\nexport const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n description,\n errorMessage,\n children,\n isEmphasized,\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator = 'icon',\n size = 'M',\n orientation = 'vertical',\n UNSAFE_className = '',\n UNSAFE_style,\n ...groupProps\n } = props;\n\n return (\n <AriaRadioGroup\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style({\n ...field(),\n // Double the usual gap because of the internal padding within checkbox that spectrum has.\n '--field-gap': {\n type: 'rowGap',\n value: '[calc(var(--field-height) - 1lh)]'\n }\n }, getAllowedOverrides())({\n size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {({isDisabled, isInvalid}) => (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <div\n className={style({\n gridArea: 'input',\n display: 'flex',\n flexDirection: {\n orientation: {\n vertical: 'column',\n horizontal: 'row'\n }\n },\n flexWrap: 'wrap',\n // Spectrum uses a fixed spacing value for horizontal (column),\n // but the gap changes depending on t-shirt size in vertical (row).\n columnGap: 16,\n rowGap: '--field-gap'\n })({orientation})}>\n <FormContext.Provider value={{...formContext, size, isEmphasized}}>\n {children}\n </FormContext.Provider>\n </div>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}\n showErrorIcon>\n {errorMessage}\n </HelpText>\n </>\n )}\n </AriaRadioGroup>\n );\n}\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);\nexport {_RadioGroup as RadioGroup};\n"],"names":[],"version":3,"file":"RadioGroup.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuCM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAA8D;AAMpG,MAAM,4CAAa,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IACxH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,YACZ,QAAQ,gBACR,YAAY,iBACZ,gBAAgB,mBAChB,aAAa,6BACb,qBAAqB,cACrB,OAAO,kBACP,cAAc,8BACd,mBAAmB,kBACnB,YAAY,EACZ,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,qCAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOJ;kBACxB;2BACA;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;kCACE,gCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,gCAAC;wBACC,WAAW;;;;;;;;;;;;;0BAcR;yCAAC;wBAAW;kCACf,cAAA,gCAAC,CAAA,GAAA,qCAAU,EAAE,QAAQ;4BAAC,OAAO;gCAAC,GAAG,WAAW;sCAAE;8CAAM;4BAAY;sCAC7D;;;kCAGL,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;wBACb,aAAa;kCACZ;;;;;AAMb","sources":["packages/@react-spectrum/s2/src/RadioGroup.tsx"],"sourcesContent":["/*\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\nimport {\n RadioGroup as AriaRadioGroup,\n RadioGroupProps as AriaRadioGroupProps,\n ContextValue\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The Radios contained within the RadioGroup.\n */\n children?: ReactNode,\n /**\n * The size of the RadioGroup.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The axis the radio elements should align with.\n *\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * Whether the RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\nexport const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n description,\n errorMessage,\n children,\n isEmphasized,\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator = 'icon',\n size = 'M',\n orientation = 'vertical',\n UNSAFE_className = '',\n UNSAFE_style,\n ...groupProps\n } = props;\n\n return (\n <AriaRadioGroup\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style({\n ...field(),\n // Double the usual gap because of the internal padding within checkbox that spectrum has.\n '--field-gap': {\n type: 'rowGap',\n value: '[calc(var(--field-height) - 1lh)]'\n }\n }, getAllowedOverrides())({\n size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {({isDisabled, isInvalid}) => (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <div\n className={style({\n gridArea: 'input',\n display: 'flex',\n flexDirection: {\n orientation: {\n vertical: 'column',\n horizontal: 'row'\n }\n },\n flexWrap: 'wrap',\n // Spectrum uses a fixed spacing value for horizontal (column),\n // but the gap changes depending on t-shirt size in vertical (row).\n columnGap: 16,\n rowGap: '--field-gap'\n })({orientation})}>\n <FormContext.Provider value={{...formContext, size, isEmphasized}}>\n {children}\n </FormContext.Provider>\n </div>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}\n showErrorIcon>\n {errorMessage}\n </HelpText>\n </>\n )}\n </AriaRadioGroup>\n );\n});\n"],"names":[],"version":3,"file":"RadioGroup.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"AC8EoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBb;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAzBa;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAyBb","sources":["c8770acef16e2ce8","packages/@react-spectrum/s2/src/RadioGroup.tsx"],"sourcesContent":["@import \"759b4f838d0febfe\";\n@import \"c4a9a0d82a5b8e9f\";\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\nimport {\n RadioGroup as AriaRadioGroup,\n RadioGroupProps as AriaRadioGroupProps,\n ContextValue\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The Radios contained within the RadioGroup.\n */\n children?: ReactNode,\n /**\n * The size of the RadioGroup.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The axis the radio elements should align with.\n *\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * Whether the RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\nexport const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n description,\n errorMessage,\n children,\n isEmphasized,\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator = 'icon',\n size = 'M',\n orientation = 'vertical',\n UNSAFE_className = '',\n UNSAFE_style,\n ...groupProps\n } = props;\n\n return (\n <AriaRadioGroup\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style({\n ...field(),\n // Double the usual gap because of the internal padding within checkbox that spectrum has.\n '--field-gap': {\n type: 'rowGap',\n value: '[calc(var(--field-height) - 1lh)]'\n }\n }, getAllowedOverrides())({\n size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {({isDisabled, isInvalid}) => (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <div\n className={style({\n gridArea: 'input',\n display: 'flex',\n flexDirection: {\n orientation: {\n vertical: 'column',\n horizontal: 'row'\n }\n },\n flexWrap: 'wrap',\n // Spectrum uses a fixed spacing value for horizontal (column),\n // but the gap changes depending on t-shirt size in vertical (row).\n columnGap: 16,\n rowGap: '--field-gap'\n })({orientation})}>\n <FormContext.Provider value={{...formContext, size, isEmphasized}}>\n {children}\n </FormContext.Provider>\n </div>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}\n showErrorIcon>\n {errorMessage}\n </HelpText>\n </>\n )}\n </AriaRadioGroup>\n );\n}\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);\nexport {_RadioGroup as RadioGroup};\n"],"names":[],"version":3,"file":"RadioGroup.css.map"}
1
+ {"mappings":"ACkFoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBb;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAzBa;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAyBb","sources":["c8770acef16e2ce8","packages/@react-spectrum/s2/src/RadioGroup.tsx"],"sourcesContent":["@import \"759b4f838d0febfe\";\n@import \"c4a9a0d82a5b8e9f\";\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\nimport {\n RadioGroup as AriaRadioGroup,\n RadioGroupProps as AriaRadioGroupProps,\n ContextValue\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The Radios contained within the RadioGroup.\n */\n children?: ReactNode,\n /**\n * The size of the RadioGroup.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The axis the radio elements should align with.\n *\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * Whether the RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\nexport const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n description,\n errorMessage,\n children,\n isEmphasized,\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator = 'icon',\n size = 'M',\n orientation = 'vertical',\n UNSAFE_className = '',\n UNSAFE_style,\n ...groupProps\n } = props;\n\n return (\n <AriaRadioGroup\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style({\n ...field(),\n // Double the usual gap because of the internal padding within checkbox that spectrum has.\n '--field-gap': {\n type: 'rowGap',\n value: '[calc(var(--field-height) - 1lh)]'\n }\n }, getAllowedOverrides())({\n size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {({isDisabled, isInvalid}) => (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <div\n className={style({\n gridArea: 'input',\n display: 'flex',\n flexDirection: {\n orientation: {\n vertical: 'column',\n horizontal: 'row'\n }\n },\n flexWrap: 'wrap',\n // Spectrum uses a fixed spacing value for horizontal (column),\n // but the gap changes depending on t-shirt size in vertical (row).\n columnGap: 16,\n rowGap: '--field-gap'\n })({orientation})}>\n <FormContext.Provider value={{...formContext, size, isEmphasized}}>\n {children}\n </FormContext.Provider>\n </div>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}\n showErrorIcon>\n {errorMessage}\n </HelpText>\n </>\n )}\n </AriaRadioGroup>\n );\n});\n"],"names":[],"version":3,"file":"RadioGroup.css.map"}
@@ -4,7 +4,7 @@ import {FormContext as $9b916426527cebe7$export$c24727297075ec6a, useFormProps a
4
4
  import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
5
5
  import {jsx as $fZVHt$jsx, jsxs as $fZVHt$jsxs, Fragment as $fZVHt$Fragment} from "react/jsx-runtime";
6
6
  import {RadioGroup as $fZVHt$RadioGroup} from "react-aria-components";
7
- import {createContext as $fZVHt$createContext, useContext as $fZVHt$useContext, forwardRef as $fZVHt$forwardRef} from "react";
7
+ import {createContext as $fZVHt$createContext, forwardRef as $fZVHt$forwardRef, useContext as $fZVHt$useContext} from "react";
8
8
  import {useDOMRef as $fZVHt$useDOMRef} from "@react-spectrum/utils";
9
9
 
10
10
  /*
@@ -25,7 +25,7 @@ import {useDOMRef as $fZVHt$useDOMRef} from "@react-spectrum/utils";
25
25
 
26
26
 
27
27
  const $9a2afae66771094f$export$a79eda4ff50e30b6 = /*#__PURE__*/ (0, $fZVHt$createContext)(null);
28
- function $9a2afae66771094f$var$RadioGroup(props, ref) {
28
+ const $9a2afae66771094f$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, $fZVHt$forwardRef)(function RadioGroup(props, ref) {
29
29
  [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $9a2afae66771094f$export$a79eda4ff50e30b6);
30
30
  let formContext = (0, $fZVHt$useContext)((0, $9b916426527cebe7$export$c24727297075ec6a));
31
31
  props = (0, $9b916426527cebe7$export$a6b5be5c6b451665)(props);
@@ -145,11 +145,7 @@ function $9a2afae66771094f$var$RadioGroup(props, ref) {
145
145
  ]
146
146
  })
147
147
  });
148
- }
149
- /**
150
- * Radio groups allow users to select a single option from a list of mutually exclusive options.
151
- * All possible options are exposed up front for users to compare.
152
- */ let $9a2afae66771094f$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, $fZVHt$forwardRef)($9a2afae66771094f$var$RadioGroup);
148
+ });
153
149
 
154
150
 
155
151
  export {$9a2afae66771094f$export$a79eda4ff50e30b6 as RadioGroupContext, $9a2afae66771094f$export$a98f0dcb43a68a25 as RadioGroup};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuCM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAA8D;AAE3G,SAAS,iCAAW,KAAsB,EAAE,GAA2B;IACrE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,YACZ,QAAQ,gBACR,YAAY,iBACZ,gBAAgB,mBAChB,aAAa,6BACb,qBAAqB,cACrB,OAAO,kBACP,cAAc,8BACd,mBAAmB,kBACnB,YAAY,EACZ,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,iBAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOJ;kBACxB;2BACA;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;kCACE,gBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,gBAAC;wBACC,WAAW;;;;;;;;;;;;;0BAcR;yCAAC;wBAAW;kCACf,cAAA,gBAAC,CAAA,GAAA,yCAAU,EAAE,QAAQ;4BAAC,OAAO;gCAAC,GAAG,WAAW;sCAAE;8CAAM;4BAAY;sCAC7D;;;kCAGL,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;wBACb,aAAa;kCACZ;;;;;AAMb;AAEA;;;CAGC,GACD,IAAI,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/RadioGroup.tsx"],"sourcesContent":["/*\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\nimport {\n RadioGroup as AriaRadioGroup,\n RadioGroupProps as AriaRadioGroupProps,\n ContextValue\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The Radios contained within the RadioGroup.\n */\n children?: ReactNode,\n /**\n * The size of the RadioGroup.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The axis the radio elements should align with.\n *\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * Whether the RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\nexport const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nfunction RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n description,\n errorMessage,\n children,\n isEmphasized,\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator = 'icon',\n size = 'M',\n orientation = 'vertical',\n UNSAFE_className = '',\n UNSAFE_style,\n ...groupProps\n } = props;\n\n return (\n <AriaRadioGroup\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style({\n ...field(),\n // Double the usual gap because of the internal padding within checkbox that spectrum has.\n '--field-gap': {\n type: 'rowGap',\n value: '[calc(var(--field-height) - 1lh)]'\n }\n }, getAllowedOverrides())({\n size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {({isDisabled, isInvalid}) => (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <div\n className={style({\n gridArea: 'input',\n display: 'flex',\n flexDirection: {\n orientation: {\n vertical: 'column',\n horizontal: 'row'\n }\n },\n flexWrap: 'wrap',\n // Spectrum uses a fixed spacing value for horizontal (column),\n // but the gap changes depending on t-shirt size in vertical (row).\n columnGap: 16,\n rowGap: '--field-gap'\n })({orientation})}>\n <FormContext.Provider value={{...formContext, size, isEmphasized}}>\n {children}\n </FormContext.Provider>\n </div>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}\n showErrorIcon>\n {errorMessage}\n </HelpText>\n </>\n )}\n </AriaRadioGroup>\n );\n}\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);\nexport {_RadioGroup as RadioGroup};\n"],"names":[],"version":3,"file":"RadioGroup.mjs.map"}
1
+ {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuCM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAA8D;AAMpG,MAAM,4CAAa,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IACxH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,YACZ,QAAQ,gBACR,YAAY,iBACZ,gBAAgB,mBAChB,aAAa,6BACb,qBAAqB,cACrB,OAAO,kBACP,cAAc,8BACd,mBAAmB,kBACnB,YAAY,EACZ,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,iBAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOJ;kBACxB;2BACA;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;kCACE,gBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,gBAAC;wBACC,WAAW;;;;;;;;;;;;;0BAcR;yCAAC;wBAAW;kCACf,cAAA,gBAAC,CAAA,GAAA,yCAAU,EAAE,QAAQ;4BAAC,OAAO;gCAAC,GAAG,WAAW;sCAAE;8CAAM;4BAAY;sCAC7D;;;kCAGL,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;wBACb,aAAa;kCACZ;;;;;AAMb","sources":["packages/@react-spectrum/s2/src/RadioGroup.tsx"],"sourcesContent":["/*\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\nimport {\n RadioGroup as AriaRadioGroup,\n RadioGroupProps as AriaRadioGroupProps,\n ContextValue\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The Radios contained within the RadioGroup.\n */\n children?: ReactNode,\n /**\n * The size of the RadioGroup.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The axis the radio elements should align with.\n *\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * Whether the RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\nexport const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n description,\n errorMessage,\n children,\n isEmphasized,\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator = 'icon',\n size = 'M',\n orientation = 'vertical',\n UNSAFE_className = '',\n UNSAFE_style,\n ...groupProps\n } = props;\n\n return (\n <AriaRadioGroup\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style({\n ...field(),\n // Double the usual gap because of the internal padding within checkbox that spectrum has.\n '--field-gap': {\n type: 'rowGap',\n value: '[calc(var(--field-height) - 1lh)]'\n }\n }, getAllowedOverrides())({\n size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {({isDisabled, isInvalid}) => (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <div\n className={style({\n gridArea: 'input',\n display: 'flex',\n flexDirection: {\n orientation: {\n vertical: 'column',\n horizontal: 'row'\n }\n },\n flexWrap: 'wrap',\n // Spectrum uses a fixed spacing value for horizontal (column),\n // but the gap changes depending on t-shirt size in vertical (row).\n columnGap: 16,\n rowGap: '--field-gap'\n })({orientation})}>\n <FormContext.Provider value={{...formContext, size, isEmphasized}}>\n {children}\n </FormContext.Provider>\n </div>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}\n showErrorIcon>\n {errorMessage}\n </HelpText>\n </>\n )}\n </AriaRadioGroup>\n );\n});\n"],"names":[],"version":3,"file":"RadioGroup.mjs.map"}