@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250429

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 (365) hide show
  1. package/dist/Accordion.cjs +4 -5
  2. package/dist/Accordion.cjs.map +1 -1
  3. package/dist/Accordion.css +2 -4
  4. package/dist/Accordion.css.map +1 -1
  5. package/dist/Accordion.mjs +4 -5
  6. package/dist/Accordion.mjs.map +1 -1
  7. package/dist/ActionBar.cjs +72 -63
  8. package/dist/ActionBar.cjs.map +1 -1
  9. package/dist/ActionBar.css +70 -63
  10. package/dist/ActionBar.css.map +1 -1
  11. package/dist/ActionBar.mjs +72 -63
  12. package/dist/ActionBar.mjs.map +1 -1
  13. package/dist/ActionButton.cjs +161 -160
  14. package/dist/ActionButton.cjs.map +1 -1
  15. package/dist/ActionButton.css +174 -168
  16. package/dist/ActionButton.css.map +1 -1
  17. package/dist/ActionButton.mjs +161 -160
  18. package/dist/ActionButton.mjs.map +1 -1
  19. package/dist/ActionButtonGroup.cjs +17 -18
  20. package/dist/ActionButtonGroup.cjs.map +1 -1
  21. package/dist/ActionButtonGroup.css +9 -11
  22. package/dist/ActionButtonGroup.css.map +1 -1
  23. package/dist/ActionButtonGroup.mjs +17 -18
  24. package/dist/ActionButtonGroup.mjs.map +1 -1
  25. package/dist/AlertDialog.cjs +4 -4
  26. package/dist/AlertDialog.css +3 -5
  27. package/dist/AlertDialog.css.map +1 -1
  28. package/dist/AlertDialog.mjs +4 -4
  29. package/dist/Avatar.cjs +21 -21
  30. package/dist/Avatar.css +14 -16
  31. package/dist/Avatar.css.map +1 -1
  32. package/dist/Avatar.mjs +21 -21
  33. package/dist/AvatarGroup.cjs +131 -110
  34. package/dist/AvatarGroup.cjs.map +1 -1
  35. package/dist/AvatarGroup.css +43 -49
  36. package/dist/AvatarGroup.css.map +1 -1
  37. package/dist/AvatarGroup.mjs +131 -110
  38. package/dist/AvatarGroup.mjs.map +1 -1
  39. package/dist/Badge.cjs +150 -149
  40. package/dist/Badge.cjs.map +1 -1
  41. package/dist/Badge.css +140 -134
  42. package/dist/Badge.css.map +1 -1
  43. package/dist/Badge.mjs +150 -149
  44. package/dist/Badge.mjs.map +1 -1
  45. package/dist/Breadcrumbs.cjs +169 -154
  46. package/dist/Breadcrumbs.cjs.map +1 -1
  47. package/dist/Breadcrumbs.css +119 -105
  48. package/dist/Breadcrumbs.css.map +1 -1
  49. package/dist/Breadcrumbs.mjs +169 -154
  50. package/dist/Breadcrumbs.mjs.map +1 -1
  51. package/dist/Button.cjs +321 -275
  52. package/dist/Button.cjs.map +1 -1
  53. package/dist/Button.css +245 -215
  54. package/dist/Button.css.map +1 -1
  55. package/dist/Button.mjs +321 -275
  56. package/dist/Button.mjs.map +1 -1
  57. package/dist/ButtonGroup.cjs +27 -25
  58. package/dist/ButtonGroup.cjs.map +1 -1
  59. package/dist/ButtonGroup.css +15 -17
  60. package/dist/ButtonGroup.css.map +1 -1
  61. package/dist/ButtonGroup.mjs +27 -25
  62. package/dist/ButtonGroup.mjs.map +1 -1
  63. package/dist/Card.cjs +316 -299
  64. package/dist/Card.cjs.map +1 -1
  65. package/dist/Card.css +242 -215
  66. package/dist/Card.css.map +1 -1
  67. package/dist/Card.mjs +316 -299
  68. package/dist/Card.mjs.map +1 -1
  69. package/dist/CardView.cjs +29 -30
  70. package/dist/CardView.cjs.map +1 -1
  71. package/dist/CardView.css +19 -19
  72. package/dist/CardView.mjs +29 -30
  73. package/dist/CardView.mjs.map +1 -1
  74. package/dist/CenterBaseline.cjs +2 -2
  75. package/dist/CenterBaseline.css +3 -5
  76. package/dist/CenterBaseline.css.map +1 -1
  77. package/dist/CenterBaseline.mjs +2 -2
  78. package/dist/Checkbox.cjs +114 -112
  79. package/dist/Checkbox.cjs.map +1 -1
  80. package/dist/Checkbox.css +99 -93
  81. package/dist/Checkbox.css.map +1 -1
  82. package/dist/Checkbox.mjs +114 -112
  83. package/dist/Checkbox.mjs.map +1 -1
  84. package/dist/CheckboxGroup.cjs +54 -54
  85. package/dist/CheckboxGroup.css +42 -42
  86. package/dist/CheckboxGroup.mjs +54 -54
  87. package/dist/ClearButton.cjs +19 -19
  88. package/dist/ClearButton.css +19 -21
  89. package/dist/ClearButton.css.map +1 -1
  90. package/dist/ClearButton.mjs +19 -19
  91. package/dist/CloseButton.cjs +64 -62
  92. package/dist/CloseButton.cjs.map +1 -1
  93. package/dist/CloseButton.css +48 -48
  94. package/dist/CloseButton.mjs +64 -62
  95. package/dist/CloseButton.mjs.map +1 -1
  96. package/dist/ColorArea.cjs +28 -28
  97. package/dist/ColorArea.css +17 -17
  98. package/dist/ColorArea.mjs +28 -28
  99. package/dist/ColorField.cjs +41 -41
  100. package/dist/ColorField.css +33 -33
  101. package/dist/ColorField.mjs +41 -41
  102. package/dist/ColorHandle.cjs +29 -29
  103. package/dist/ColorHandle.css +45 -45
  104. package/dist/ColorHandle.mjs +29 -29
  105. package/dist/ColorSlider.cjs +68 -64
  106. package/dist/ColorSlider.cjs.map +1 -1
  107. package/dist/ColorSlider.css +64 -58
  108. package/dist/ColorSlider.css.map +1 -1
  109. package/dist/ColorSlider.mjs +68 -64
  110. package/dist/ColorSlider.mjs.map +1 -1
  111. package/dist/ColorSwatch.cjs +44 -38
  112. package/dist/ColorSwatch.cjs.map +1 -1
  113. package/dist/ColorSwatch.css +29 -31
  114. package/dist/ColorSwatch.css.map +1 -1
  115. package/dist/ColorSwatch.mjs +44 -38
  116. package/dist/ColorSwatch.mjs.map +1 -1
  117. package/dist/ColorSwatchPicker.cjs +31 -32
  118. package/dist/ColorSwatchPicker.cjs.map +1 -1
  119. package/dist/ColorSwatchPicker.css +48 -48
  120. package/dist/ColorSwatchPicker.css.map +1 -1
  121. package/dist/ColorSwatchPicker.mjs +31 -32
  122. package/dist/ColorSwatchPicker.mjs.map +1 -1
  123. package/dist/ColorWheel.cjs +28 -28
  124. package/dist/ColorWheel.css +18 -18
  125. package/dist/ColorWheel.mjs +28 -28
  126. package/dist/ComboBox.cjs +108 -108
  127. package/dist/ComboBox.css +101 -101
  128. package/dist/ComboBox.mjs +108 -108
  129. package/dist/ContextualHelp.cjs +5 -5
  130. package/dist/ContextualHelp.css +58 -44
  131. package/dist/ContextualHelp.css.map +1 -1
  132. package/dist/ContextualHelp.mjs +5 -5
  133. package/dist/CustomDialog.cjs +38 -38
  134. package/dist/CustomDialog.css +26 -26
  135. package/dist/CustomDialog.mjs +38 -38
  136. package/dist/Dialog.cjs +18 -18
  137. package/dist/Dialog.css +86 -72
  138. package/dist/Dialog.css.map +1 -1
  139. package/dist/Dialog.mjs +18 -18
  140. package/dist/Disclosure.cjs +139 -133
  141. package/dist/Disclosure.cjs.map +1 -1
  142. package/dist/Disclosure.css +144 -120
  143. package/dist/Disclosure.css.map +1 -1
  144. package/dist/Disclosure.mjs +139 -133
  145. package/dist/Disclosure.mjs.map +1 -1
  146. package/dist/Divider.cjs +47 -47
  147. package/dist/Divider.css +26 -26
  148. package/dist/Divider.mjs +47 -47
  149. package/dist/DropZone.cjs +68 -64
  150. package/dist/DropZone.cjs.map +1 -1
  151. package/dist/DropZone.css +66 -60
  152. package/dist/DropZone.css.map +1 -1
  153. package/dist/DropZone.mjs +68 -64
  154. package/dist/DropZone.mjs.map +1 -1
  155. package/dist/Field.cjs +192 -186
  156. package/dist/Field.cjs.map +1 -1
  157. package/dist/Field.css +167 -159
  158. package/dist/Field.css.map +1 -1
  159. package/dist/Field.mjs +192 -186
  160. package/dist/Field.mjs.map +1 -1
  161. package/dist/Form.cjs +11 -12
  162. package/dist/Form.cjs.map +1 -1
  163. package/dist/Form.css +9 -11
  164. package/dist/Form.css.map +1 -1
  165. package/dist/Form.mjs +11 -12
  166. package/dist/Form.mjs.map +1 -1
  167. package/dist/FullscreenDialog.cjs +5 -5
  168. package/dist/FullscreenDialog.css +94 -80
  169. package/dist/FullscreenDialog.css.map +1 -1
  170. package/dist/FullscreenDialog.mjs +5 -5
  171. package/dist/IllustratedMessage.cjs +185 -160
  172. package/dist/IllustratedMessage.cjs.map +1 -1
  173. package/dist/IllustratedMessage.css +93 -91
  174. package/dist/IllustratedMessage.css.map +1 -1
  175. package/dist/IllustratedMessage.mjs +185 -160
  176. package/dist/IllustratedMessage.mjs.map +1 -1
  177. package/dist/Image.cjs +14 -14
  178. package/dist/Image.css +14 -16
  179. package/dist/Image.css.map +1 -1
  180. package/dist/Image.mjs +14 -14
  181. package/dist/InlineAlert.cjs +130 -122
  182. package/dist/InlineAlert.cjs.map +1 -1
  183. package/dist/InlineAlert.css +109 -95
  184. package/dist/InlineAlert.css.map +1 -1
  185. package/dist/InlineAlert.mjs +130 -122
  186. package/dist/InlineAlert.mjs.map +1 -1
  187. package/dist/Link.cjs +57 -47
  188. package/dist/Link.cjs.map +1 -1
  189. package/dist/Link.css +52 -44
  190. package/dist/Link.css.map +1 -1
  191. package/dist/Link.mjs +57 -47
  192. package/dist/Link.mjs.map +1 -1
  193. package/dist/Menu.cjs +353 -325
  194. package/dist/Menu.cjs.map +1 -1
  195. package/dist/Menu.css +189 -189
  196. package/dist/Menu.css.map +1 -1
  197. package/dist/Menu.mjs +353 -325
  198. package/dist/Menu.mjs.map +1 -1
  199. package/dist/Meter.cjs +116 -114
  200. package/dist/Meter.cjs.map +1 -1
  201. package/dist/Meter.css +106 -104
  202. package/dist/Meter.css.map +1 -1
  203. package/dist/Meter.mjs +116 -114
  204. package/dist/Meter.mjs.map +1 -1
  205. package/dist/Modal.cjs +62 -59
  206. package/dist/Modal.cjs.map +1 -1
  207. package/dist/Modal.css +52 -51
  208. package/dist/Modal.css.map +1 -1
  209. package/dist/Modal.mjs +62 -59
  210. package/dist/Modal.mjs.map +1 -1
  211. package/dist/NotificationBadge.cjs +66 -62
  212. package/dist/NotificationBadge.cjs.map +1 -1
  213. package/dist/NotificationBadge.css +78 -72
  214. package/dist/NotificationBadge.css.map +1 -1
  215. package/dist/NotificationBadge.mjs +66 -62
  216. package/dist/NotificationBadge.mjs.map +1 -1
  217. package/dist/NumberField.cjs +133 -133
  218. package/dist/NumberField.css +120 -120
  219. package/dist/NumberField.mjs +133 -133
  220. package/dist/Picker.cjs +209 -207
  221. package/dist/Picker.cjs.map +1 -1
  222. package/dist/Picker.css +179 -173
  223. package/dist/Picker.css.map +1 -1
  224. package/dist/Picker.mjs +209 -207
  225. package/dist/Picker.mjs.map +1 -1
  226. package/dist/Popover.cjs +124 -93
  227. package/dist/Popover.cjs.map +1 -1
  228. package/dist/Popover.css +67 -83
  229. package/dist/Popover.css.map +1 -1
  230. package/dist/Popover.mjs +124 -93
  231. package/dist/Popover.mjs.map +1 -1
  232. package/dist/ProgressBar.cjs +132 -130
  233. package/dist/ProgressBar.cjs.map +1 -1
  234. package/dist/ProgressBar.css +119 -117
  235. package/dist/ProgressBar.css.map +1 -1
  236. package/dist/ProgressBar.mjs +132 -130
  237. package/dist/ProgressBar.mjs.map +1 -1
  238. package/dist/ProgressCircle.cjs +32 -32
  239. package/dist/ProgressCircle.css +20 -20
  240. package/dist/ProgressCircle.css.map +1 -1
  241. package/dist/ProgressCircle.mjs +32 -32
  242. package/dist/Provider.cjs +11 -11
  243. package/dist/Provider.css +9 -11
  244. package/dist/Provider.css.map +1 -1
  245. package/dist/Provider.mjs +11 -11
  246. package/dist/Radio.cjs +101 -99
  247. package/dist/Radio.cjs.map +1 -1
  248. package/dist/Radio.css +101 -95
  249. package/dist/Radio.css.map +1 -1
  250. package/dist/Radio.mjs +101 -99
  251. package/dist/Radio.mjs.map +1 -1
  252. package/dist/RadioGroup.cjs +52 -52
  253. package/dist/RadioGroup.css +42 -42
  254. package/dist/RadioGroup.mjs +52 -52
  255. package/dist/SearchField.cjs +52 -52
  256. package/dist/SearchField.css +54 -54
  257. package/dist/SearchField.mjs +52 -52
  258. package/dist/SegmentedControl.cjs +123 -119
  259. package/dist/SegmentedControl.cjs.map +1 -1
  260. package/dist/SegmentedControl.css +110 -104
  261. package/dist/SegmentedControl.css.map +1 -1
  262. package/dist/SegmentedControl.mjs +123 -119
  263. package/dist/SegmentedControl.mjs.map +1 -1
  264. package/dist/Slider.cjs +251 -248
  265. package/dist/Slider.cjs.map +1 -1
  266. package/dist/Slider.css +166 -157
  267. package/dist/Slider.css.map +1 -1
  268. package/dist/Slider.mjs +251 -248
  269. package/dist/Slider.mjs.map +1 -1
  270. package/dist/StatusLight.cjs +74 -70
  271. package/dist/StatusLight.cjs.map +1 -1
  272. package/dist/StatusLight.css +70 -64
  273. package/dist/StatusLight.css.map +1 -1
  274. package/dist/StatusLight.mjs +74 -70
  275. package/dist/StatusLight.mjs.map +1 -1
  276. package/dist/Switch.cjs +110 -108
  277. package/dist/Switch.cjs.map +1 -1
  278. package/dist/Switch.css +86 -80
  279. package/dist/Switch.css.map +1 -1
  280. package/dist/Switch.mjs +110 -108
  281. package/dist/Switch.mjs.map +1 -1
  282. package/dist/TableView.cjs +334 -329
  283. package/dist/TableView.cjs.map +1 -1
  284. package/dist/TableView.css +193 -193
  285. package/dist/TableView.css.map +1 -1
  286. package/dist/TableView.mjs +334 -329
  287. package/dist/TableView.mjs.map +1 -1
  288. package/dist/Tabs.cjs +153 -149
  289. package/dist/Tabs.cjs.map +1 -1
  290. package/dist/Tabs.css +102 -96
  291. package/dist/Tabs.css.map +1 -1
  292. package/dist/Tabs.mjs +153 -149
  293. package/dist/Tabs.mjs.map +1 -1
  294. package/dist/TabsPicker.cjs +131 -129
  295. package/dist/TabsPicker.cjs.map +1 -1
  296. package/dist/TabsPicker.css +132 -126
  297. package/dist/TabsPicker.css.map +1 -1
  298. package/dist/TabsPicker.mjs +131 -129
  299. package/dist/TabsPicker.mjs.map +1 -1
  300. package/dist/TagGroup.cjs +197 -193
  301. package/dist/TagGroup.cjs.map +1 -1
  302. package/dist/TagGroup.css +164 -158
  303. package/dist/TagGroup.css.map +1 -1
  304. package/dist/TagGroup.mjs +197 -193
  305. package/dist/TagGroup.mjs.map +1 -1
  306. package/dist/TextField.cjs +67 -65
  307. package/dist/TextField.cjs.map +1 -1
  308. package/dist/TextField.css +71 -65
  309. package/dist/TextField.css.map +1 -1
  310. package/dist/TextField.mjs +67 -65
  311. package/dist/TextField.mjs.map +1 -1
  312. package/dist/Toast.cjs +138 -136
  313. package/dist/Toast.cjs.map +1 -1
  314. package/dist/Toast.css +117 -111
  315. package/dist/Toast.css.map +1 -1
  316. package/dist/Toast.mjs +138 -136
  317. package/dist/Toast.mjs.map +1 -1
  318. package/dist/ToggleButton.cjs +3 -3
  319. package/dist/ToggleButton.css +12 -14
  320. package/dist/ToggleButton.css.map +1 -1
  321. package/dist/ToggleButton.mjs +3 -3
  322. package/dist/Tooltip.cjs +99 -72
  323. package/dist/Tooltip.cjs.map +1 -1
  324. package/dist/Tooltip.css +87 -87
  325. package/dist/Tooltip.css.map +1 -1
  326. package/dist/Tooltip.mjs +99 -72
  327. package/dist/Tooltip.mjs.map +1 -1
  328. package/dist/TreeView.cjs +169 -157
  329. package/dist/TreeView.cjs.map +1 -1
  330. package/dist/TreeView.css +155 -153
  331. package/dist/TreeView.css.map +1 -1
  332. package/dist/TreeView.mjs +169 -157
  333. package/dist/TreeView.mjs.map +1 -1
  334. package/dist/types.d.ts +1 -1
  335. package/dist/types.d.ts.map +1 -1
  336. package/icons/Skeleton.cjs +3 -3
  337. package/icons/Skeleton.cjs.map +1 -1
  338. package/icons/Skeleton.css +8 -10
  339. package/icons/Skeleton.css.map +1 -1
  340. package/icons/Skeleton.mjs +3 -3
  341. package/icons/Skeleton.mjs.map +1 -1
  342. package/package.json +22 -22
  343. package/src/Card.tsx +3 -3
  344. package/src/Disclosure.tsx +3 -3
  345. package/src/TableView.tsx +1 -4
  346. package/src/style-utils.ts +0 -2
  347. package/style/__tests__/style-macro.test.js +323 -27
  348. package/style/dist/properties.cjs +4 -0
  349. package/style/dist/properties.cjs.map +1 -0
  350. package/style/dist/properties.mjs +6 -0
  351. package/style/dist/properties.mjs.map +1 -0
  352. package/style/dist/spectrum-theme.cjs +123 -124
  353. package/style/dist/spectrum-theme.cjs.map +1 -1
  354. package/style/dist/spectrum-theme.mjs +124 -125
  355. package/style/dist/spectrum-theme.mjs.map +1 -1
  356. package/style/dist/style-macro.cjs +244 -263
  357. package/style/dist/style-macro.cjs.map +1 -1
  358. package/style/dist/style-macro.mjs +240 -259
  359. package/style/dist/style-macro.mjs.map +1 -1
  360. package/style/dist/types.d.ts +84 -80
  361. package/style/dist/types.d.ts.map +1 -1
  362. package/style/properties.json +2422 -0
  363. package/style/spectrum-theme.ts +101 -110
  364. package/style/style-macro.ts +319 -220
  365. package/style/types.ts +8 -4
@@ -1 +1 @@
1
- {"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;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;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}
1
+ {"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;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;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}
@@ -28,87 +28,91 @@ import {useDOMRef as $2PVgW$useDOMRef} from "@react-spectrum/utils";
28
28
 
29
29
  const $cd71613dba8ee178$export$d8f8c0b091d8cb9b = /*#__PURE__*/ (0, $2PVgW$createContext)(null);
30
30
  const $cd71613dba8ee178$var$wrapper = function anonymous(props, overrides) {
31
- let rules = " .";
32
- let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
33
- rules += matches.join('');
34
- let $l = false;
35
- for (let p of matches)if (/^\s*l/.test(p)) $l = true;
36
- rules += ' _0d';
37
- rules += ' ibH';
38
- rules += ' iG';
39
- rules += ' jbH';
40
- rules += ' jG';
41
- rules += ' _2d';
42
- if (!$l) rules += ' le';
43
- rules += ' _d-bc1l9oh';
44
- rules += ' _d-1uotwbwg';
45
- rules += ' _d-eo0c6sf';
46
- rules += ' _d-enzzrge';
47
- rules += ' _d-enzykdd';
48
- rules += ' _d-enzwzjc';
49
- rules += ' _d-enzrfpb';
50
- rules += ' _da';
31
+ let rules = " ";
32
+ let width = false;
33
+ let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
34
+ for (let p of matches){
35
+ if (p[1] === "f") width = true;
36
+ rules += p[0];
37
+ }
38
+ rules += ' ma';
39
+ rules += ' pc';
40
+ rules += ' pad';
41
+ rules += ' kb';
42
+ rules += ' kac';
43
+ rules += ' Fb';
44
+ if (!width) rules += ' fe';
45
+ rules += ' bh';
46
+ rules += ' bdf';
47
+ rules += ' beg';
48
+ rules += ' bfa';
49
+ rules += ' bgb';
50
+ rules += ' bhd';
51
+ rules += ' bje';
52
+ rules += ' bic';
51
53
  if (props.size === "XL") {
52
- rules += ' _ebj';
53
- rules += ' _ei';
54
+ rules += ' ah';
55
+ rules += ' aac';
54
56
  } else if (props.size === "L") {
55
- rules += ' _ebh';
56
- rules += ' _eg';
57
+ rules += ' ae';
58
+ rules += ' aad';
57
59
  } else if (props.size === "S") {
58
- rules += ' _ebd';
59
- rules += ' _ec';
60
+ rules += ' af';
61
+ rules += ' aag';
60
62
  } else if (props.size === "XS") {
61
- rules += ' _ebb';
62
- rules += ' _ea';
63
+ rules += ' ai';
64
+ rules += ' aaj';
63
65
  } else {
64
- rules += ' _ebf';
65
- rules += ' _ee';
66
+ rules += ' aa';
67
+ rules += ' aab';
66
68
  }
67
- rules += ' _fb';
68
- rules += ' _g-1x99dlob';
69
- rules += ' _ga';
70
- if (props.variant === "neutral") rules += ' al';
69
+ rules += ' Da';
70
+ rules += ' Ea';
71
+ rules += ' Ca';
72
+ rules += ' gb';
73
+ rules += ' gca';
74
+ if (props.variant === "neutral") rules += ' dw';
71
75
  else {
72
- if (props.isPressed) rules += ' ao';
73
- else if (props.isFocusVisible) rules += ' ao';
74
- else if (props.isHovered) rules += ' ao';
75
- else rules += ' an';
76
+ if (props.isPressed) rules += ' db';
77
+ else if (props.isFocusVisible) rules += ' db';
78
+ else if (props.isHovered) rules += ' db';
79
+ else rules += ' da';
76
80
  }
77
- rules += ' __S-yksgrp';
81
+ rules += ' _Ga';
78
82
  return rules;
79
83
  };
80
84
  const $cd71613dba8ee178$var$light = function anonymous(props) {
81
- let rules = " .";
82
- if (props.size === "XL") rules += ' lC';
83
- else if (props.size === "L") rules += ' lA';
84
- else if (props.size === "M") rules += ' ly';
85
- else if (props.size === "S") rules += ' lw';
86
- if (props.size === "XL") rules += ' kC';
87
- else if (props.size === "L") rules += ' kA';
88
- else if (props.size === "M") rules += ' ky';
89
- else if (props.size === "S") rules += ' kw';
90
- if (props.isSkeleton) rules += ' eF';
91
- else if (props.variant === "silver") rules += ' ex';
92
- else if (props.variant === "brown") rules += ' ew';
93
- else if (props.variant === "cinnamon") rules += ' ev';
94
- else if (props.variant === "turquoise") rules += ' eu';
95
- else if (props.variant === "pink") rules += ' et';
96
- else if (props.variant === "yellow") rules += ' ej';
97
- else if (props.variant === "seafoam") rules += ' en';
98
- else if (props.variant === "indigo") rules += ' ep';
99
- else if (props.variant === "magenta") rules += ' es';
100
- else if (props.variant === "purple") rules += ' eq';
101
- else if (props.variant === "fuchsia") rules += ' er';
102
- else if (props.variant === "cyan") rules += ' eo';
103
- else if (props.variant === "chartreuse") rules += ' ek';
104
- else if (props.variant === "celery") rules += ' el';
105
- else if (props.variant === "negative") rules += ' ee';
106
- else if (props.variant === "notice") rules += ' eg';
107
- else if (props.variant === "positive") rules += ' ef';
108
- else if (props.variant === "neutral") rules += ' ed';
109
- else if (props.variant === "informative") rules += ' ec';
110
- rules += ' __wd';
111
- rules += ' __xd';
85
+ let rules = " ";
86
+ if (props.size === "XL") rules += ' fm';
87
+ else if (props.size === "L") rules += ' fs';
88
+ else if (props.size === "M") rules += ' fD';
89
+ else if (props.size === "S") rules += ' fC';
90
+ if (props.size === "XL") rules += ' ei';
91
+ else if (props.size === "L") rules += ' eq';
92
+ else if (props.size === "M") rules += ' ep';
93
+ else if (props.size === "S") rules += ' ej';
94
+ if (props.isSkeleton) rules += ' Ov';
95
+ else if (props.variant === "silver") rules += ' Oo';
96
+ else if (props.variant === "brown") rules += ' Oq';
97
+ else if (props.variant === "cinnamon") rules += ' Os';
98
+ else if (props.variant === "turquoise") rules += ' Ol';
99
+ else if (props.variant === "pink") rules += ' Ow';
100
+ else if (props.variant === "yellow") rules += ' Ou';
101
+ else if (props.variant === "seafoam") rules += ' Om';
102
+ else if (props.variant === "indigo") rules += ' On';
103
+ else if (props.variant === "magenta") rules += ' Ox';
104
+ else if (props.variant === "purple") rules += ' Or';
105
+ else if (props.variant === "fuchsia") rules += ' Ot';
106
+ else if (props.variant === "cyan") rules += ' OA';
107
+ else if (props.variant === "chartreuse") rules += ' Op';
108
+ else if (props.variant === "celery") rules += ' OB';
109
+ else if (props.variant === "negative") rules += ' Ob';
110
+ else if (props.variant === "notice") rules += ' Od';
111
+ else if (props.variant === "positive") rules += ' Oe';
112
+ else if (props.variant === "neutral") rules += ' Oc';
113
+ else if (props.variant === "informative") rules += ' Of';
114
+ rules += ' _od';
115
+ rules += ' _hd';
112
116
  return rules;
113
117
  };
114
118
  const $cd71613dba8ee178$export$5f84c37a31c6e41c = /*#__PURE__*/ (0, $2PVgW$forwardRef)(function StatusLight(props, ref) {
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,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,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,yCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChE,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,KAAM,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACzF,QAAQ,IAAI,CAAC;IAGf,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gBAAC,CAAA,GAAA,yCAAa;0BACZ,cAAA,gBAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gBAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gBAAC,CAAA,GAAA,yCAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.mjs.map"}
1
+ {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,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,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,yCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChE,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,KAAM,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACzF,QAAQ,IAAI,CAAC;IAGf,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gBAAC,CAAA,GAAA,yCAAa;0BACZ,cAAA,gBAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gBAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gBAAC,CAAA,GAAA,yCAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.mjs.map"}
package/dist/Switch.cjs CHANGED
@@ -35,146 +35,148 @@ $parcel$export(module.exports, "Switch", () => $0bb99ae32af8596c$export$b5d5cf89
35
35
 
36
36
  const $0bb99ae32af8596c$export$8699e3b644d5a28a = /*#__PURE__*/ (0, $bxoLC$react.createContext)(null);
37
37
  const $0bb99ae32af8596c$var$wrapper = function anonymous(props, overrides) {
38
- let rules = " .";
39
- let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
40
- rules += matches.join('');
41
- let $l = false;
42
- let $__b = false;
38
+ let rules = " ";
39
+ let width = false;
40
+ let gridColumnStart = false;
41
+ let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
43
42
  for (let p of matches){
44
- if (/^\s*l/.test(p)) $l = true;
45
- if (/^\s*__b/.test(p)) $__b = true;
43
+ if (p[1] === "f") width = true;
44
+ if (p[1] === "L") gridColumnStart = true;
45
+ rules += p[0];
46
46
  }
47
- rules += ' _0d';
48
- rules += ' jF';
49
- rules += ' _2d';
50
- if (!$l) rules += ' le';
51
- rules += ' _d-bc1l9oh';
52
- rules += ' _d-1uotwbwg';
53
- rules += ' _d-eo0c6sf';
54
- rules += ' _d-enzzrge';
55
- rules += ' _d-enzykdd';
56
- rules += ' _d-enzwzjc';
57
- rules += ' _d-enzrfpb';
58
- rules += ' _da';
47
+ rules += ' ma';
48
+ rules += ' kh';
49
+ rules += ' Fb';
50
+ if (!width) rules += ' fe';
51
+ rules += ' bh';
52
+ rules += ' bdf';
53
+ rules += ' beg';
54
+ rules += ' bfa';
55
+ rules += ' bgb';
56
+ rules += ' bhd';
57
+ rules += ' bje';
58
+ rules += ' bic';
59
59
  if (props.size === "XL") {
60
- rules += ' _ebj';
61
- rules += ' _ei';
60
+ rules += ' ah';
61
+ rules += ' aac';
62
62
  } else if (props.size === "L") {
63
- rules += ' _ebh';
64
- rules += ' _eg';
63
+ rules += ' ae';
64
+ rules += ' aad';
65
65
  } else if (props.size === "S") {
66
- rules += ' _ebd';
67
- rules += ' _ec';
66
+ rules += ' af';
67
+ rules += ' aag';
68
68
  } else if (props.size === "XS") {
69
- rules += ' _ebb';
70
- rules += ' _ea';
69
+ rules += ' ai';
70
+ rules += ' aaj';
71
71
  } else {
72
- rules += ' _ebf';
73
- rules += ' _ee';
72
+ rules += ' aa';
73
+ rules += ' aab';
74
74
  }
75
- rules += ' _fb';
76
- rules += ' _g-1x99dlob';
77
- rules += ' _ga';
75
+ rules += ' Da';
76
+ rules += ' Ea';
77
+ rules += ' Ca';
78
+ rules += ' gb';
79
+ rules += ' gca';
78
80
  if (props.isDisabled) {
79
- rules += ' aa_____O';
80
- rules += ' aj';
81
+ rules += ' dc';
82
+ rules += ' dbe';
81
83
  } else {
82
- if (props.isPressed) rules += ' ao';
83
- else if (props.isFocusVisible) rules += ' ao';
84
- else if (props.isHovered) rules += ' ao';
85
- else rules += ' an';
84
+ if (props.isPressed) rules += ' db';
85
+ else if (props.isFocusVisible) rules += ' db';
86
+ else if (props.isHovered) rules += ' db';
87
+ else rules += ' da';
86
88
  }
87
- rules += ' _Pb';
88
- rules += ' _R-375x7f';
89
- rules += ' _Sa';
90
- if (!$__b) {
91
- if (props.isInForm) rules += ' __b-e10s0d';
89
+ rules += ' _ib';
90
+ rules += ' _ka';
91
+ rules += ' _ea';
92
+ if (props.isInForm) {
93
+ if (!gridColumnStart) rules += ' LhJUGr';
92
94
  }
93
- rules += ' __S-yksgrp';
95
+ rules += ' _Ga';
94
96
  return rules;
95
97
  };
96
98
  const $0bb99ae32af8596c$var$track = function anonymous(props) {
97
- let rules = " .";
98
- if (props.isFocusVisible) rules += ' _Mb';
99
- else rules += ' _Ma';
100
- rules += ' da_____M';
101
- rules += ' dx';
102
- rules += ' _Oc';
103
- rules += ' _N-3t1z';
104
- rules += ' _wf';
105
- rules += ' _xf';
106
- rules += ' _yf';
107
- rules += ' _zf';
108
- rules += ' -rcxrzo_l--unb2ci';
109
- if (props.size === "XL") rules += ' -_14pdrm5_k-g';
110
- else if (props.size === "L") rules += ' -_14pdrm5_k-m';
111
- else if (props.size === "S") rules += ' -_14pdrm5_k-l';
112
- else rules += ' -_14pdrm5_k-k';
113
- rules += ' l-rcxrzo';
114
- rules += ' k-14pdrm5';
115
- rules += ' __oa';
116
- rules += ' uc';
117
- rules += ' vc';
118
- rules += ' sc';
119
- rules += ' tc';
99
+ let rules = " ";
100
+ if (props.isFocusVisible) rules += ' tb';
101
+ else rules += ' ta';
102
+ rules += ' Bb';
103
+ rules += ' Bba';
104
+ rules += ' _ga';
105
+ rules += ' _ya';
106
+ rules += ' za';
107
+ rules += ' xa';
120
108
  rules += ' wa';
121
- rules += ' _Pa';
122
- rules += ' _R-375x7f';
123
- rules += ' _Sa';
124
- rules += ' _Ab';
125
- if (props.isSelected) rules += ' ca';
109
+ rules += ' ya';
110
+ rules += ' -ERv7Xb-fmDIzbc';
111
+ if (props.size === "XL") rules += ' -LsrJQc-ea';
112
+ else if (props.size === "L") rules += ' -LsrJQc-eh';
113
+ else if (props.size === "S") rules += ' -LsrJQc-ei';
114
+ else rules += ' -LsrJQc-eg';
115
+ rules += ' fAkyXj';
116
+ rules += ' epk5ROc';
117
+ rules += ' _qa';
118
+ rules += ' _nb';
119
+ rules += ' _ma';
120
+ rules += ' _ta';
121
+ rules += ' _sa';
122
+ rules += ' Ra';
123
+ rules += ' _ia';
124
+ rules += ' _ka';
125
+ rules += ' _ea';
126
+ rules += ' _0a';
127
+ if (props.isSelected) rules += ' qe';
126
128
  else if (props.isDisabled) {
127
- rules += ' ca_____O';
128
- rules += ' cj';
129
+ rules += ' qg';
130
+ rules += ' qbd';
129
131
  } else {
130
- rules += ' ca_____I';
131
- if (props.isPressed) rules += ' co';
132
- else if (props.isFocusVisible) rules += ' co';
133
- else if (props.isHovered) rules += ' co';
134
- else rules += ' cn';
132
+ if (props.isPressed) rules += ' qa';
133
+ else if (props.isFocusVisible) rules += ' qa';
134
+ else if (props.isHovered) rules += ' qa';
135
+ else rules += ' qh';
136
+ rules += ' qbc';
135
137
  }
136
138
  if (props.isSelected) {
137
139
  if (props.isDisabled) {
138
- rules += ' ba_____O';
139
- rules += ' bj';
140
+ rules += ' cE';
141
+ rules += ' cbo';
140
142
  } else {
141
- rules += ' ba_____M';
142
143
  if (props.isEmphasized) {
143
- if (props.isPressed) rules += ' bz';
144
- else if (props.isFocusVisible) rules += ' bz';
145
- else if (props.isHovered) rules += ' bz';
146
- else rules += ' by';
144
+ if (props.isPressed) rules += ' cw';
145
+ else if (props.isFocusVisible) rules += ' cw';
146
+ else if (props.isHovered) rules += ' cw';
147
+ else rules += ' cK';
147
148
  } else {
148
- if (props.isPressed) rules += ' bo';
149
- else if (props.isFocusVisible) rules += ' bo';
150
- else if (props.isHovered) rules += ' bo';
151
- else rules += ' bn';
149
+ if (props.isPressed) rules += ' cc';
150
+ else if (props.isFocusVisible) rules += ' cc';
151
+ else if (props.isHovered) rules += ' cc';
152
+ else rules += ' cm';
152
153
  }
154
+ rules += ' cbg';
153
155
  }
154
- } else rules += ' bd';
156
+ } else rules += ' cj';
155
157
  return rules;
156
158
  };
157
159
  const $0bb99ae32af8596c$var$handle = function anonymous(props) {
158
- let rules = " .";
159
- rules += ' kb';
160
- rules += ' _cb';
161
- rules += ' _wf';
162
- rules += ' _xf';
163
- rules += ' _yf';
164
- rules += ' _zf';
165
- if (props.isSelected) rules += ' bd';
160
+ let rules = " ";
161
+ rules += ' ef';
162
+ rules += ' _Oa';
163
+ rules += ' za';
164
+ rules += ' xa';
165
+ rules += ' wa';
166
+ rules += ' ya';
167
+ if (props.isSelected) rules += ' cj';
166
168
  else if (props.isDisabled) {
167
- rules += ' ba_____O';
168
- rules += ' bj';
169
+ rules += ' cE';
170
+ rules += ' cbo';
169
171
  } else {
170
- if (props.isPressed) rules += ' bo';
171
- else if (props.isFocusVisible) rules += ' bo';
172
- else if (props.isHovered) rules += ' bo';
173
- else rules += ' bn';
172
+ if (props.isPressed) rules += ' cc';
173
+ else if (props.isFocusVisible) rules += ' cc';
174
+ else if (props.isHovered) rules += ' cc';
175
+ else rules += ' cm';
174
176
  }
175
- rules += ' _Pa';
176
- rules += ' _R-375x7f';
177
- rules += ' _Sa';
177
+ rules += ' _ia';
178
+ rules += ' _ka';
179
+ rules += ' _ea';
178
180
  return rules;
179
181
  };
180
182
  // Use an inline style to calculate the transform so we can combine it with the press scale.
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAqCM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAA2E;AAEpH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,EAAoB,GAAM,CAAA;QAC3D,wHAAwH;QACxH,0GAA0G;QAC1G,8GAA8G;QAC9G,sHAAsH;QACtH,uHAAuH;QACvH,mDAAmD;QACnD,EAAE;QACF,qDAAqD;QACrD,EAAE;QACF,uFAAuF;QACvF,EAAE;QACF,6DAA6D;QAC7D,8DAA8D;QAC9D,EAAE;QACF,+FAA+F;QAC/F,EAAE;QACF,4CAA4C;QAC5C,mDAAmD;QACnD,WAAW,aAEP,wHACA;IACN,CAAA;AAMO,MAAM,4CAAS,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,OAAO,KAAkB,EAAE,GAAmC;IACpH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,qBACE,gCAAC,CAAA,GAAA,iCAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACrH,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,WAAW,4BAAM;gCACf,GAAG,WAAW;gCACd,MAAM,MAAM,IAAI,IAAI;gCACpB,cAAc,MAAM,YAAY;4BAClC;sCACA,cAAA,gCAAC;gCACC,KAAK;gCACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW,sCAAgB;gCAC7C,WAAW,6BAAO;;;;oBAGvB;;;;AAKX","sources":["packages/@react-spectrum/s2/src/Switch.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 Switch as AriaSwitch,\n SwitchProps as AriaSwitchProps,\n ContextValue,\n SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n /**\n * The size of the Switch.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Switch should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n width: 'fit',\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 track = style<RenderProps>({\n ...focusRing(),\n borderRadius: 'full',\n '--trackWidth': {\n type: 'width',\n value: fontRelative(26)\n },\n '--trackHeight': {\n type: 'height',\n value: 'control-sm'\n },\n width: '--trackWidth',\n height: '--trackHeight',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n forcedColorAdjust: 'none',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n },\n isSelected: 'transparent'\n },\n backgroundColor: {\n default: 'gray-25',\n isSelected: {\n default: 'neutral',\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight',\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n }\n});\n\nconst handle = style<RenderProps>({\n height: 'full',\n aspectRatio: 'square',\n borderRadius: 'full',\n backgroundColor: {\n default: 'neutral',\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n },\n isSelected: 'gray-25'\n },\n transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected}: SwitchRenderProps) => ({\n // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n // the desired effect. Given the following formula:\n //\n // scale = perspective / (perspective - translateZ)\n //\n // and desired scale factors (accounting for the 2px border on each side of the track):\n //\n // defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n // selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n //\n // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n //\n // defaultPerspective = trackHeight - 8px\n // selectedPerspective = 2 * (trackHeight - 6px)\n transform: isSelected\n // The selected state also translates the X position to the end of the track (minus the borders).\n ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nexport const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let handleRef = useRef(null);\n let isInForm = !!useContext(FormContext);\n props = useFormProps(props);\n return (\n <AriaSwitch\n {...props}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n className={track({\n ...renderProps,\n size: props.size || 'M',\n isEmphasized: props.isEmphasized\n })}>\n <div\n ref={handleRef}\n style={pressScale(handleRef, transformStyle)(renderProps)}\n className={handle(renderProps)} />\n </div>\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaSwitch>\n );\n});\n"],"names":[],"version":3,"file":"Switch.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAqCM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAA2E;AAEpH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,EAAoB,GAAM,CAAA;QAC3D,wHAAwH;QACxH,0GAA0G;QAC1G,8GAA8G;QAC9G,sHAAsH;QACtH,uHAAuH;QACvH,mDAAmD;QACnD,EAAE;QACF,qDAAqD;QACrD,EAAE;QACF,uFAAuF;QACvF,EAAE;QACF,6DAA6D;QAC7D,8DAA8D;QAC9D,EAAE;QACF,+FAA+F;QAC/F,EAAE;QACF,4CAA4C;QAC5C,mDAAmD;QACnD,WAAW,aAEP,wHACA;IACN,CAAA;AAMO,MAAM,4CAAS,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,OAAO,KAAkB,EAAE,GAAmC;IACpH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,qBACE,gCAAC,CAAA,GAAA,iCAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACrH,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,WAAW,4BAAM;gCACf,GAAG,WAAW;gCACd,MAAM,MAAM,IAAI,IAAI;gCACpB,cAAc,MAAM,YAAY;4BAClC;sCACA,cAAA,gCAAC;gCACC,KAAK;gCACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW,sCAAgB;gCAC7C,WAAW,6BAAO;;;;oBAGvB;;;;AAKX","sources":["packages/@react-spectrum/s2/src/Switch.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 Switch as AriaSwitch,\n SwitchProps as AriaSwitchProps,\n ContextValue,\n SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n /**\n * The size of the Switch.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Switch should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n width: 'fit',\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 track = style<RenderProps>({\n ...focusRing(),\n borderRadius: 'full',\n '--trackWidth': {\n type: 'width',\n value: fontRelative(26)\n },\n '--trackHeight': {\n type: 'height',\n value: 'control-sm'\n },\n width: '--trackWidth',\n height: '--trackHeight',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n forcedColorAdjust: 'none',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n },\n isSelected: 'transparent'\n },\n backgroundColor: {\n default: 'gray-25',\n isSelected: {\n default: 'neutral',\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight',\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n }\n});\n\nconst handle = style<RenderProps>({\n height: 'full',\n aspectRatio: 'square',\n borderRadius: 'full',\n backgroundColor: {\n default: 'neutral',\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n },\n isSelected: 'gray-25'\n },\n transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected}: SwitchRenderProps) => ({\n // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n // the desired effect. Given the following formula:\n //\n // scale = perspective / (perspective - translateZ)\n //\n // and desired scale factors (accounting for the 2px border on each side of the track):\n //\n // defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n // selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n //\n // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n //\n // defaultPerspective = trackHeight - 8px\n // selectedPerspective = 2 * (trackHeight - 6px)\n transform: isSelected\n // The selected state also translates the X position to the end of the track (minus the borders).\n ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nexport const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let handleRef = useRef(null);\n let isInForm = !!useContext(FormContext);\n props = useFormProps(props);\n return (\n <AriaSwitch\n {...props}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n className={track({\n ...renderProps,\n size: props.size || 'M',\n isEmphasized: props.isEmphasized\n })}>\n <div\n ref={handleRef}\n style={pressScale(handleRef, transformStyle)(renderProps)}\n className={handle(renderProps)} />\n </div>\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaSwitch>\n );\n});\n"],"names":[],"version":3,"file":"Switch.cjs.map"}