@react-spectrum/s2 3.0.0-nightly-93c26d8bd-241028 → 3.0.0-nightly-07431f4b1-241030

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 (273) hide show
  1. package/dist/Accordion.cjs +1 -1
  2. package/dist/Accordion.cjs.map +1 -1
  3. package/dist/Accordion.css.map +1 -1
  4. package/dist/Accordion.mjs +2 -2
  5. package/dist/Accordion.mjs.map +1 -1
  6. package/dist/ActionButton.cjs +10 -32
  7. package/dist/ActionButton.cjs.map +1 -1
  8. package/dist/ActionButton.css +20 -60
  9. package/dist/ActionButton.css.map +1 -1
  10. package/dist/ActionButton.mjs +10 -32
  11. package/dist/ActionButton.mjs.map +1 -1
  12. package/dist/Avatar.cjs +2 -4
  13. package/dist/Avatar.cjs.map +1 -1
  14. package/dist/Avatar.css +4 -16
  15. package/dist/Avatar.css.map +1 -1
  16. package/dist/Avatar.mjs +2 -4
  17. package/dist/Avatar.mjs.map +1 -1
  18. package/dist/Badge.cjs +5 -16
  19. package/dist/Badge.cjs.map +1 -1
  20. package/dist/Badge.css +10 -30
  21. package/dist/Badge.css.map +1 -1
  22. package/dist/Badge.mjs +5 -16
  23. package/dist/Badge.mjs.map +1 -1
  24. package/dist/Breadcrumbs.cjs +12 -41
  25. package/dist/Breadcrumbs.cjs.map +1 -1
  26. package/dist/Breadcrumbs.css +38 -86
  27. package/dist/Breadcrumbs.css.map +1 -1
  28. package/dist/Breadcrumbs.mjs +12 -41
  29. package/dist/Breadcrumbs.mjs.map +1 -1
  30. package/dist/Button.cjs +19 -59
  31. package/dist/Button.cjs.map +1 -1
  32. package/dist/Button.css +37 -113
  33. package/dist/Button.css.map +1 -1
  34. package/dist/Button.mjs +19 -59
  35. package/dist/Button.mjs.map +1 -1
  36. package/dist/Card.cjs +27 -67
  37. package/dist/Card.cjs.map +1 -1
  38. package/dist/Card.css +42 -117
  39. package/dist/Card.css.map +1 -1
  40. package/dist/Card.mjs +27 -67
  41. package/dist/Card.mjs.map +1 -1
  42. package/dist/Checkbox.cjs +9 -27
  43. package/dist/Checkbox.cjs.map +1 -1
  44. package/dist/Checkbox.css +17 -49
  45. package/dist/Checkbox.css.map +1 -1
  46. package/dist/Checkbox.mjs +9 -27
  47. package/dist/Checkbox.mjs.map +1 -1
  48. package/dist/CheckboxGroup.cjs +5 -16
  49. package/dist/CheckboxGroup.cjs.map +1 -1
  50. package/dist/CheckboxGroup.css +10 -30
  51. package/dist/CheckboxGroup.css.map +1 -1
  52. package/dist/CheckboxGroup.mjs +5 -16
  53. package/dist/CheckboxGroup.mjs.map +1 -1
  54. package/dist/ClearButton.cjs +6 -17
  55. package/dist/ClearButton.cjs.map +1 -1
  56. package/dist/ClearButton.css +11 -35
  57. package/dist/ClearButton.css.map +1 -1
  58. package/dist/ClearButton.mjs +6 -17
  59. package/dist/ClearButton.mjs.map +1 -1
  60. package/dist/CloseButton.cjs +10 -32
  61. package/dist/CloseButton.cjs.map +1 -1
  62. package/dist/CloseButton.css +20 -64
  63. package/dist/CloseButton.css.map +1 -1
  64. package/dist/CloseButton.mjs +10 -32
  65. package/dist/CloseButton.mjs.map +1 -1
  66. package/dist/ColorArea.cjs +4 -16
  67. package/dist/ColorArea.cjs.map +1 -1
  68. package/dist/ColorArea.css +8 -28
  69. package/dist/ColorArea.css.map +1 -1
  70. package/dist/ColorArea.mjs +4 -16
  71. package/dist/ColorArea.mjs.map +1 -1
  72. package/dist/ColorField.cjs +5 -16
  73. package/dist/ColorField.cjs.map +1 -1
  74. package/dist/ColorField.css +10 -30
  75. package/dist/ColorField.css.map +1 -1
  76. package/dist/ColorField.mjs +5 -16
  77. package/dist/ColorField.mjs.map +1 -1
  78. package/dist/ColorHandle.cjs +5 -15
  79. package/dist/ColorHandle.cjs.map +1 -1
  80. package/dist/ColorHandle.css +10 -30
  81. package/dist/ColorHandle.css.map +1 -1
  82. package/dist/ColorHandle.mjs +5 -15
  83. package/dist/ColorHandle.mjs.map +1 -1
  84. package/dist/ColorSlider.cjs +6 -17
  85. package/dist/ColorSlider.cjs.map +1 -1
  86. package/dist/ColorSlider.css +34 -50
  87. package/dist/ColorSlider.css.map +1 -1
  88. package/dist/ColorSlider.mjs +6 -17
  89. package/dist/ColorSlider.mjs.map +1 -1
  90. package/dist/ColorSwatch.cjs +8 -26
  91. package/dist/ColorSwatch.cjs.map +1 -1
  92. package/dist/ColorSwatch.css +16 -52
  93. package/dist/ColorSwatch.css.map +1 -1
  94. package/dist/ColorSwatch.mjs +8 -26
  95. package/dist/ColorSwatch.mjs.map +1 -1
  96. package/dist/ColorSwatchPicker.cjs +6 -16
  97. package/dist/ColorSwatchPicker.cjs.map +1 -1
  98. package/dist/ColorSwatchPicker.css +8 -28
  99. package/dist/ColorSwatchPicker.css.map +1 -1
  100. package/dist/ColorSwatchPicker.mjs +6 -16
  101. package/dist/ColorSwatchPicker.mjs.map +1 -1
  102. package/dist/ComboBox.cjs +22 -71
  103. package/dist/ComboBox.cjs.map +1 -1
  104. package/dist/ComboBox.css +64 -152
  105. package/dist/ComboBox.css.map +1 -1
  106. package/dist/ComboBox.mjs +22 -71
  107. package/dist/ComboBox.mjs.map +1 -1
  108. package/dist/ContextualHelp.cjs +1 -1
  109. package/dist/ContextualHelp.css +2 -6
  110. package/dist/ContextualHelp.css.map +1 -1
  111. package/dist/ContextualHelp.mjs +1 -1
  112. package/dist/Dialog.cjs +2 -2
  113. package/dist/Dialog.css +2 -2
  114. package/dist/Dialog.mjs +2 -2
  115. package/dist/Disclosure.cjs +34 -68
  116. package/dist/Disclosure.cjs.map +1 -1
  117. package/dist/Disclosure.css +55 -91
  118. package/dist/Disclosure.css.map +1 -1
  119. package/dist/Disclosure.mjs +36 -70
  120. package/dist/Disclosure.mjs.map +1 -1
  121. package/dist/DropZone.cjs +2 -4
  122. package/dist/DropZone.cjs.map +1 -1
  123. package/dist/DropZone.css +4 -16
  124. package/dist/DropZone.css.map +1 -1
  125. package/dist/DropZone.mjs +2 -4
  126. package/dist/DropZone.mjs.map +1 -1
  127. package/dist/Field.cjs +16 -47
  128. package/dist/Field.cjs.map +1 -1
  129. package/dist/Field.css +31 -95
  130. package/dist/Field.css.map +1 -1
  131. package/dist/Field.mjs +16 -47
  132. package/dist/Field.mjs.map +1 -1
  133. package/dist/IllustratedMessage.cjs +6 -20
  134. package/dist/IllustratedMessage.cjs.map +1 -1
  135. package/dist/IllustratedMessage.css +10 -24
  136. package/dist/IllustratedMessage.css.map +1 -1
  137. package/dist/IllustratedMessage.mjs +6 -20
  138. package/dist/IllustratedMessage.mjs.map +1 -1
  139. package/dist/Image.cjs +2 -2
  140. package/dist/Image.css +2 -2
  141. package/dist/Image.mjs +2 -2
  142. package/dist/InlineAlert.cjs +2 -5
  143. package/dist/InlineAlert.cjs.map +1 -1
  144. package/dist/InlineAlert.css +11 -15
  145. package/dist/InlineAlert.css.map +1 -1
  146. package/dist/InlineAlert.mjs +2 -5
  147. package/dist/InlineAlert.mjs.map +1 -1
  148. package/dist/Menu.cjs +22 -67
  149. package/dist/Menu.cjs.map +1 -1
  150. package/dist/Menu.css +32 -96
  151. package/dist/Menu.css.map +1 -1
  152. package/dist/Menu.mjs +22 -67
  153. package/dist/Menu.mjs.map +1 -1
  154. package/dist/Meter.cjs +22 -68
  155. package/dist/Meter.cjs.map +1 -1
  156. package/dist/Meter.css +63 -139
  157. package/dist/Meter.css.map +1 -1
  158. package/dist/Meter.mjs +22 -68
  159. package/dist/Meter.mjs.map +1 -1
  160. package/dist/Modal.cjs +2 -2
  161. package/dist/Modal.css +2 -2
  162. package/dist/Modal.mjs +2 -2
  163. package/dist/NumberField.cjs +23 -71
  164. package/dist/NumberField.cjs.map +1 -1
  165. package/dist/NumberField.css +63 -146
  166. package/dist/NumberField.css.map +1 -1
  167. package/dist/NumberField.mjs +23 -71
  168. package/dist/NumberField.mjs.map +1 -1
  169. package/dist/Picker.cjs +23 -67
  170. package/dist/Picker.cjs.map +1 -1
  171. package/dist/Picker.css +50 -130
  172. package/dist/Picker.css.map +1 -1
  173. package/dist/Picker.mjs +23 -67
  174. package/dist/Picker.mjs.map +1 -1
  175. package/dist/ProgressBar.cjs +23 -69
  176. package/dist/ProgressBar.cjs.map +1 -1
  177. package/dist/ProgressBar.css +64 -140
  178. package/dist/ProgressBar.css.map +1 -1
  179. package/dist/ProgressBar.mjs +23 -69
  180. package/dist/ProgressBar.mjs.map +1 -1
  181. package/dist/ProgressCircle.cjs +6 -20
  182. package/dist/ProgressCircle.cjs.map +1 -1
  183. package/dist/ProgressCircle.css +12 -40
  184. package/dist/ProgressCircle.css.map +1 -1
  185. package/dist/ProgressCircle.mjs +6 -20
  186. package/dist/ProgressCircle.mjs.map +1 -1
  187. package/dist/Provider.css +7 -0
  188. package/dist/Provider.css.map +1 -1
  189. package/dist/Radio.cjs +8 -26
  190. package/dist/Radio.cjs.map +1 -1
  191. package/dist/Radio.css +16 -48
  192. package/dist/Radio.css.map +1 -1
  193. package/dist/Radio.mjs +8 -26
  194. package/dist/Radio.mjs.map +1 -1
  195. package/dist/RadioGroup.cjs +5 -16
  196. package/dist/RadioGroup.cjs.map +1 -1
  197. package/dist/RadioGroup.css +10 -30
  198. package/dist/RadioGroup.css.map +1 -1
  199. package/dist/RadioGroup.mjs +5 -16
  200. package/dist/RadioGroup.mjs.map +1 -1
  201. package/dist/SearchField.cjs +5 -16
  202. package/dist/SearchField.cjs.map +1 -1
  203. package/dist/SearchField.css +10 -30
  204. package/dist/SearchField.css.map +1 -1
  205. package/dist/SearchField.mjs +5 -16
  206. package/dist/SearchField.mjs.map +1 -1
  207. package/dist/SegmentedControl.cjs +8 -14
  208. package/dist/SegmentedControl.cjs.map +1 -1
  209. package/dist/SegmentedControl.css +9 -29
  210. package/dist/SegmentedControl.css.map +1 -1
  211. package/dist/SegmentedControl.mjs +8 -14
  212. package/dist/SegmentedControl.mjs.map +1 -1
  213. package/dist/Slider.cjs +63 -196
  214. package/dist/Slider.cjs.map +1 -1
  215. package/dist/Slider.css +61 -181
  216. package/dist/Slider.css.map +1 -1
  217. package/dist/Slider.mjs +63 -196
  218. package/dist/Slider.mjs.map +1 -1
  219. package/dist/StatusLight.cjs +9 -27
  220. package/dist/StatusLight.cjs.map +1 -1
  221. package/dist/StatusLight.css +17 -49
  222. package/dist/StatusLight.css.map +1 -1
  223. package/dist/StatusLight.mjs +9 -27
  224. package/dist/StatusLight.mjs.map +1 -1
  225. package/dist/Switch.cjs +6 -15
  226. package/dist/Switch.cjs.map +1 -1
  227. package/dist/Switch.css +10 -26
  228. package/dist/Switch.css.map +1 -1
  229. package/dist/Switch.mjs +6 -15
  230. package/dist/Switch.mjs.map +1 -1
  231. package/dist/TableView.cjs +42 -86
  232. package/dist/TableView.cjs.map +1 -1
  233. package/dist/TableView.css +65 -129
  234. package/dist/TableView.css.map +1 -1
  235. package/dist/TableView.mjs +42 -86
  236. package/dist/TableView.mjs.map +1 -1
  237. package/dist/Tabs.cjs +4 -15
  238. package/dist/Tabs.cjs.map +1 -1
  239. package/dist/Tabs.css +18 -34
  240. package/dist/Tabs.css.map +1 -1
  241. package/dist/Tabs.mjs +4 -15
  242. package/dist/Tabs.mjs.map +1 -1
  243. package/dist/TagGroup.cjs +14 -37
  244. package/dist/TagGroup.cjs.map +1 -1
  245. package/dist/TagGroup.css +23 -67
  246. package/dist/TagGroup.css.map +1 -1
  247. package/dist/TagGroup.mjs +14 -37
  248. package/dist/TagGroup.mjs.map +1 -1
  249. package/dist/TextField.cjs +11 -34
  250. package/dist/TextField.cjs.map +1 -1
  251. package/dist/TextField.css +22 -66
  252. package/dist/TextField.css.map +1 -1
  253. package/dist/TextField.mjs +11 -34
  254. package/dist/TextField.mjs.map +1 -1
  255. package/dist/Tooltip.cjs +2 -4
  256. package/dist/Tooltip.cjs.map +1 -1
  257. package/dist/Tooltip.css +4 -12
  258. package/dist/Tooltip.css.map +1 -1
  259. package/dist/Tooltip.mjs +2 -4
  260. package/dist/Tooltip.mjs.map +1 -1
  261. package/dist/types.d.ts.map +1 -1
  262. package/package.json +17 -17
  263. package/page.css +7 -0
  264. package/src/Accordion.tsx +1 -1
  265. package/src/Disclosure.tsx +13 -7
  266. package/src/page.macro.ts +11 -0
  267. package/style/dist/spectrum-theme.cjs +2 -8
  268. package/style/dist/spectrum-theme.cjs.map +1 -1
  269. package/style/dist/spectrum-theme.mjs +2 -8
  270. package/style/dist/spectrum-theme.mjs.map +1 -1
  271. package/style/dist/types.d.ts +1 -4
  272. package/style/dist/types.d.ts.map +1 -1
  273. package/style/spectrum-theme.ts +4 -4
@@ -33,28 +33,14 @@ const $41ddd91dbbf0c389$var$wrapper = function anonymous(props, overrides) {
33
33
  if (/^\s*k/.test(p)) $k = true;
34
34
  }
35
35
  if (!$l) {
36
- if (props.size === "L") {
37
- rules += ' lbC';
38
- rules += ' lB';
39
- } else if (props.size === "S") {
40
- rules += ' lbk';
41
- rules += ' lj';
42
- } else {
43
- rules += ' lbr';
44
- rules += ' lq';
45
- }
36
+ if (props.size === "L") rules += ' lp';
37
+ else if (props.size === "S") rules += ' lf';
38
+ else rules += ' lj';
46
39
  }
47
40
  if (!$k) {
48
- if (props.size === "L") {
49
- rules += ' kbC';
50
- rules += ' kB';
51
- } else if (props.size === "S") {
52
- rules += ' kbk';
53
- rules += ' kj';
54
- } else {
55
- rules += ' kbr';
56
- rules += ' kq';
57
- }
41
+ if (props.size === "L") rules += ' kp';
42
+ else if (props.size === "S") rules += ' kf';
43
+ else rules += ' kj';
58
44
  }
59
45
  rules += ' _bb';
60
46
  return rules;
@@ -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,CAAC,EAAE,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;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,CAAC,EAAE,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"}
package/dist/Provider.css CHANGED
@@ -2,6 +2,7 @@
2
2
  :where(html) {
3
3
  --lightningcss-light: initial;
4
4
  --lightningcss-dark: ;
5
+ --s2-scale: 1;
5
6
  }
6
7
 
7
8
  @media (prefers-color-scheme: dark) {
@@ -11,6 +12,12 @@
11
12
  }
12
13
  }
13
14
 
15
+ @media not ((hover: hover) and (pointer: fine)) {
16
+ :where(html) {
17
+ --s2-scale: 1.25;
18
+ }
19
+ }
20
+
14
21
  ._A-10jn6wd {
15
22
  color-scheme: var(--lightningcss-light, light) var(--lightningcss-dark, dark);
16
23
  }
@@ -1 +1 @@
1
- {"mappings":"ACuEA;EAAA;;;;;EAAA;IAAA;;;;;;EAEqB;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;AAAA;;;;AAAA","sources":["4752c64624f60d5a","packages/@react-spectrum/s2/src/Provider.tsx"],"sourcesContent":["@import \"60fcf4ad83e6776f\";\n@import \"ac1adcd813d529e0\";\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 type {ColorScheme, Router} from '@react-types/provider';\nimport {colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {createContext, JSX, ReactNode, useContext} from 'react';\nimport {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};\nimport {I18nProvider, RouterProvider, useLocale} from 'react-aria-components';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\n\nexport interface ProviderProps extends UnsafeStyles {\n /** The content of the Provider. */\n children: ReactNode,\n /**\n * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.\n * Defaults to the browser/OS language setting.\n * @default 'en-US'\n */\n locale?: string,\n /**\n * Provides a client side router to all nested React Spectrum links to enable client side navigation.\n */\n router?: Router,\n /**\n * The color scheme for your application.\n * Defaults to operating system preferences.\n */\n colorScheme?: ColorScheme,\n /** The background for this provider. If not provided, the background is transparent. */\n background?: 'base' | 'layer-1' | 'layer-2',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StyleString,\n /**\n * The DOM element to render.\n * @default div\n */\n elementType?: keyof JSX.IntrinsicElements\n}\n\nexport const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);\n\nexport function Provider(props: ProviderProps) {\n let result = <ProviderInner {...props} />;\n let parentColorScheme = useContext(ColorSchemeContext);\n let colorScheme = props.colorScheme || parentColorScheme;\n if (colorScheme !== parentColorScheme) {\n result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;\n }\n\n if (props.locale) {\n result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;\n }\n\n if (props.router) {\n result = <RouterProvider {...props.router}>{result}</RouterProvider>;\n }\n\n return result;\n}\n\ngenerateDefaultColorSchemeStyles();\n\nlet providerStyles = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n background: {\n base: 'base',\n 'layer-1': 'layer-1',\n 'layer-2': 'layer-2'\n }\n }\n },\n backgroundColor: {\n // Don't set a background unless one is requested.\n background: {\n base: '--s2-container-bg',\n 'layer-1': '--s2-container-bg',\n 'layer-2': '--s2-container-bg'\n }\n }\n});\n\nfunction ProviderInner(props: ProviderProps) {\n let {\n elementType: Element = 'div',\n UNSAFE_style,\n UNSAFE_className = '',\n styles,\n children,\n background,\n colorScheme\n } = props;\n let {locale, direction} = useLocale();\n return (\n <Element\n lang={locale}\n dir={direction}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(\n styles,\n providerStyles({background, colorScheme})\n )}>\n {children}\n </Element>\n );\n}\n"],"names":[],"version":3,"file":"Provider.css.map"}
1
+ {"mappings":"ACuEA;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;IAAA;;;;;EAEqB;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;AAAA;;;;AAAA","sources":["4752c64624f60d5a","packages/@react-spectrum/s2/src/Provider.tsx"],"sourcesContent":["@import \"60fcf4ad83e6776f\";\n@import \"ac1adcd813d529e0\";\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 type {ColorScheme, Router} from '@react-types/provider';\nimport {colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {createContext, JSX, ReactNode, useContext} from 'react';\nimport {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};\nimport {I18nProvider, RouterProvider, useLocale} from 'react-aria-components';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\n\nexport interface ProviderProps extends UnsafeStyles {\n /** The content of the Provider. */\n children: ReactNode,\n /**\n * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.\n * Defaults to the browser/OS language setting.\n * @default 'en-US'\n */\n locale?: string,\n /**\n * Provides a client side router to all nested React Spectrum links to enable client side navigation.\n */\n router?: Router,\n /**\n * The color scheme for your application.\n * Defaults to operating system preferences.\n */\n colorScheme?: ColorScheme,\n /** The background for this provider. If not provided, the background is transparent. */\n background?: 'base' | 'layer-1' | 'layer-2',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StyleString,\n /**\n * The DOM element to render.\n * @default div\n */\n elementType?: keyof JSX.IntrinsicElements\n}\n\nexport const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);\n\nexport function Provider(props: ProviderProps) {\n let result = <ProviderInner {...props} />;\n let parentColorScheme = useContext(ColorSchemeContext);\n let colorScheme = props.colorScheme || parentColorScheme;\n if (colorScheme !== parentColorScheme) {\n result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;\n }\n\n if (props.locale) {\n result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;\n }\n\n if (props.router) {\n result = <RouterProvider {...props.router}>{result}</RouterProvider>;\n }\n\n return result;\n}\n\ngenerateDefaultColorSchemeStyles();\n\nlet providerStyles = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n background: {\n base: 'base',\n 'layer-1': 'layer-1',\n 'layer-2': 'layer-2'\n }\n }\n },\n backgroundColor: {\n // Don't set a background unless one is requested.\n background: {\n base: '--s2-container-bg',\n 'layer-1': '--s2-container-bg',\n 'layer-2': '--s2-container-bg'\n }\n }\n});\n\nfunction ProviderInner(props: ProviderProps) {\n let {\n elementType: Element = 'div',\n UNSAFE_style,\n UNSAFE_className = '',\n styles,\n children,\n background,\n colorScheme\n } = props;\n let {locale, direction} = useLocale();\n return (\n <Element\n lang={locale}\n dir={direction}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(\n styles,\n providerStyles({background, colorScheme})\n )}>\n {children}\n </Element>\n );\n}\n"],"names":[],"version":3,"file":"Provider.css.map"}
package/dist/Radio.cjs CHANGED
@@ -92,19 +92,10 @@ const $49f41f366ec3019f$var$circle = function anonymous(props) {
92
92
  rules += ' dx';
93
93
  rules += ' _Nc';
94
94
  rules += ' _M-3t1z';
95
- if (props.size === "XL") {
96
- rules += ' lbl';
97
- rules += ' lk';
98
- } else if (props.size === "L") {
99
- rules += ' lb_b';
100
- rules += ' l_a';
101
- } else if (props.size === "S") {
102
- rules += ' lb9';
103
- rules += ' l8';
104
- } else {
105
- rules += ' lbk';
106
- rules += ' lj';
107
- }
95
+ if (props.size === "XL") rules += ' lg';
96
+ else if (props.size === "L") rules += ' lL';
97
+ else if (props.size === "S") rules += ' lK';
98
+ else rules += ' lf';
108
99
  rules += ' k-375toq';
109
100
  rules += ' _8-3t1x';
110
101
  rules += ' _Zd';
@@ -153,19 +144,10 @@ const $49f41f366ec3019f$var$circle = function anonymous(props) {
153
144
  else if (props.isHovered) rules += ' co';
154
145
  else rules += ' cn';
155
146
  }
156
- if (props.size === "XL") {
157
- rules += ' -_375toq_k-bl';
158
- rules += ' -_375toq_k-k';
159
- } else if (props.size === "L") {
160
- rules += ' -_375toq_k-b_b';
161
- rules += ' -_375toq_k-_a';
162
- } else if (props.size === "S") {
163
- rules += ' -_375toq_k-b9';
164
- rules += ' -_375toq_k-8';
165
- } else {
166
- rules += ' -_375toq_k-bk';
167
- rules += ' -_375toq_k-j';
168
- }
147
+ if (props.size === "XL") rules += ' -_375toq_k-g';
148
+ else if (props.size === "L") rules += ' -_375toq_k-L';
149
+ else if (props.size === "S") rules += ' -_375toq_k-K';
150
+ else rules += ' -_375toq_k-f';
169
151
  return rules;
170
152
  };
171
153
  function $49f41f366ec3019f$var$Radio(props, ref) {
@@ -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', /* RSP v3 was 'all 200ms' */\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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', /* RSP v3 was 'all 200ms' */\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"}
package/dist/Radio.css CHANGED
@@ -85,20 +85,20 @@
85
85
  outline-offset: 2px;
86
86
  }
87
87
 
88
- .lj {
89
- width: 1rem;
88
+ .lf {
89
+ width: calc(1rem * var(--s2-scale));
90
90
  }
91
91
 
92
- .l8 {
93
- width: .875rem;
92
+ .lK {
93
+ width: calc(.875rem * var(--s2-scale));
94
94
  }
95
95
 
96
- .l_a {
97
- width: 1.125rem;
96
+ .lL {
97
+ width: calc(1.125rem * var(--s2-scale));
98
98
  }
99
99
 
100
- .lk {
101
- width: 1.25rem;
100
+ .lg {
101
+ width: calc(1.25rem * var(--s2-scale));
102
102
  }
103
103
 
104
104
  .k-375toq {
@@ -229,20 +229,20 @@
229
229
  border-color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
230
230
  }
231
231
 
232
- .-_375toq_k-j {
233
- --k: 1rem;
232
+ .-_375toq_k-f {
233
+ --k: calc(1rem * var(--s2-scale));
234
234
  }
235
235
 
236
- .-_375toq_k-8 {
237
- --k: .875rem;
236
+ .-_375toq_k-K {
237
+ --k: calc(.875rem * var(--s2-scale));
238
238
  }
239
239
 
240
- .-_375toq_k-_a {
241
- --k: 1.125rem;
240
+ .-_375toq_k-L {
241
+ --k: calc(1.125rem * var(--s2-scale));
242
242
  }
243
243
 
244
- .-_375toq_k-k {
245
- --k: 1.25rem;
244
+ .-_375toq_k-g {
245
+ --k: calc(1.25rem * var(--s2-scale));
246
246
  }
247
247
  }
248
248
 
@@ -315,38 +315,6 @@
315
315
  ._dbj {
316
316
  font-size: 1.375rem;
317
317
  }
318
-
319
- .lbk {
320
- width: 1.25rem;
321
- }
322
-
323
- .lb9 {
324
- width: 1.09375rem;
325
- }
326
-
327
- .lb_b {
328
- width: 1.40625rem;
329
- }
330
-
331
- .lbl {
332
- width: 1.5625rem;
333
- }
334
-
335
- .-_375toq_k-bk {
336
- --k: 1.25rem;
337
- }
338
-
339
- .-_375toq_k-b9 {
340
- --k: 1.09375rem;
341
- }
342
-
343
- .-_375toq_k-b_b {
344
- --k: 1.40625rem;
345
- }
346
-
347
- .-_375toq_k-bl {
348
- --k: 1.5625rem;
349
- }
350
318
  }
351
319
  }
352
320
 
@@ -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;;;;IAmBD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAnBC;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', /* RSP v3 was 'all 200ms' */\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', /* RSP v3 was 'all 200ms' */\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"}
package/dist/Radio.mjs CHANGED
@@ -86,19 +86,10 @@ const $1ae2870af9a200f8$var$circle = function anonymous(props) {
86
86
  rules += ' dx';
87
87
  rules += ' _Nc';
88
88
  rules += ' _M-3t1z';
89
- if (props.size === "XL") {
90
- rules += ' lbl';
91
- rules += ' lk';
92
- } else if (props.size === "L") {
93
- rules += ' lb_b';
94
- rules += ' l_a';
95
- } else if (props.size === "S") {
96
- rules += ' lb9';
97
- rules += ' l8';
98
- } else {
99
- rules += ' lbk';
100
- rules += ' lj';
101
- }
89
+ if (props.size === "XL") rules += ' lg';
90
+ else if (props.size === "L") rules += ' lL';
91
+ else if (props.size === "S") rules += ' lK';
92
+ else rules += ' lf';
102
93
  rules += ' k-375toq';
103
94
  rules += ' _8-3t1x';
104
95
  rules += ' _Zd';
@@ -147,19 +138,10 @@ const $1ae2870af9a200f8$var$circle = function anonymous(props) {
147
138
  else if (props.isHovered) rules += ' co';
148
139
  else rules += ' cn';
149
140
  }
150
- if (props.size === "XL") {
151
- rules += ' -_375toq_k-bl';
152
- rules += ' -_375toq_k-k';
153
- } else if (props.size === "L") {
154
- rules += ' -_375toq_k-b_b';
155
- rules += ' -_375toq_k-_a';
156
- } else if (props.size === "S") {
157
- rules += ' -_375toq_k-b9';
158
- rules += ' -_375toq_k-8';
159
- } else {
160
- rules += ' -_375toq_k-bk';
161
- rules += ' -_375toq_k-j';
162
- }
141
+ if (props.size === "XL") rules += ' -_375toq_k-g';
142
+ else if (props.size === "L") rules += ' -_375toq_k-L';
143
+ else if (props.size === "S") rules += ' -_375toq_k-K';
144
+ else rules += ' -_375toq_k-f';
163
145
  return rules;
164
146
  };
165
147
  function $1ae2870af9a200f8$var$Radio(props, ref) {
@@ -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', /* RSP v3 was 'all 200ms' */\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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', /* RSP v3 was 'all 200ms' */\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"}
@@ -89,22 +89,11 @@ function $10d624be839a1d01$var$RadioGroup(props, ref) {
89
89
  rules += ' _1d';
90
90
  rules += ' _f-1x99dlob';
91
91
  rules += ' _fa';
92
- if (props.size === "XL") {
93
- rules += ' -aqrvqh_k-by';
94
- rules += ' -aqrvqh_k-x';
95
- } else if (props.size === "L") {
96
- rules += ' -aqrvqh_k-bu';
97
- rules += ' -aqrvqh_k-r';
98
- } else if (props.size === "S") {
99
- rules += ' -aqrvqh_k-bn';
100
- rules += ' -aqrvqh_k-m';
101
- } else if (props.size === "XS") {
102
- rules += ' -aqrvqh_k-bl';
103
- rules += ' -aqrvqh_k-k';
104
- } else {
105
- rules += ' -aqrvqh_k-br';
106
- rules += ' -aqrvqh_k-q';
107
- }
92
+ if (props.size === "XL") rules += ' -aqrvqh_k-n';
93
+ else if (props.size === "L") rules += ' -aqrvqh_k-l';
94
+ else if (props.size === "S") rules += ' -aqrvqh_k-h';
95
+ else if (props.size === "XS") rules += ' -aqrvqh_k-g';
96
+ else rules += ' -aqrvqh_k-j';
108
97
  rules += ' -_1inj1bc_i--vfy389';
109
98
  rules += ' je';
110
99
  rules += ' __R-yksgrp';
@@ -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;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"}
@@ -70,24 +70,24 @@
70
70
  line-height: 1.3;
71
71
  }
72
72
 
73
- .-aqrvqh_k-q {
74
- --field-height: 2rem;
73
+ .-aqrvqh_k-j {
74
+ --field-height: calc(2rem * var(--s2-scale));
75
75
  }
76
76
 
77
- .-aqrvqh_k-k {
78
- --field-height: 1.25rem;
77
+ .-aqrvqh_k-g {
78
+ --field-height: calc(1.25rem * var(--s2-scale));
79
79
  }
80
80
 
81
- .-aqrvqh_k-m {
82
- --field-height: 1.5rem;
81
+ .-aqrvqh_k-h {
82
+ --field-height: calc(1.5rem * var(--s2-scale));
83
83
  }
84
84
 
85
- .-aqrvqh_k-r {
86
- --field-height: 2.5rem;
85
+ .-aqrvqh_k-l {
86
+ --field-height: calc(2.5rem * var(--s2-scale));
87
87
  }
88
88
 
89
- .-aqrvqh_k-x {
90
- --field-height: 3rem;
89
+ .-aqrvqh_k-n {
90
+ --field-height: calc(3rem * var(--s2-scale));
91
91
  }
92
92
 
93
93
  .-_1inj1bc_i--vfy389 {
@@ -172,26 +172,6 @@
172
172
  ._dbj {
173
173
  font-size: 1.375rem;
174
174
  }
175
-
176
- .-aqrvqh_k-br {
177
- --field-height: 2.5rem;
178
- }
179
-
180
- .-aqrvqh_k-bl {
181
- --field-height: 1.5625rem;
182
- }
183
-
184
- .-aqrvqh_k-bn {
185
- --field-height: 1.875rem;
186
- }
187
-
188
- .-aqrvqh_k-bu {
189
- --field-height: 3.125rem;
190
- }
191
-
192
- .-aqrvqh_k-by {
193
- --field-height: 3.75rem;
194
- }
195
175
  }
196
176
  }
197
177
 
@@ -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;;;;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":"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"}
@@ -82,22 +82,11 @@ function $9a2afae66771094f$var$RadioGroup(props, ref) {
82
82
  rules += ' _1d';
83
83
  rules += ' _f-1x99dlob';
84
84
  rules += ' _fa';
85
- if (props.size === "XL") {
86
- rules += ' -aqrvqh_k-by';
87
- rules += ' -aqrvqh_k-x';
88
- } else if (props.size === "L") {
89
- rules += ' -aqrvqh_k-bu';
90
- rules += ' -aqrvqh_k-r';
91
- } else if (props.size === "S") {
92
- rules += ' -aqrvqh_k-bn';
93
- rules += ' -aqrvqh_k-m';
94
- } else if (props.size === "XS") {
95
- rules += ' -aqrvqh_k-bl';
96
- rules += ' -aqrvqh_k-k';
97
- } else {
98
- rules += ' -aqrvqh_k-br';
99
- rules += ' -aqrvqh_k-q';
100
- }
85
+ if (props.size === "XL") rules += ' -aqrvqh_k-n';
86
+ else if (props.size === "L") rules += ' -aqrvqh_k-l';
87
+ else if (props.size === "S") rules += ' -aqrvqh_k-h';
88
+ else if (props.size === "XS") rules += ' -aqrvqh_k-g';
89
+ else rules += ' -aqrvqh_k-j';
101
90
  rules += ' -_1inj1bc_i--vfy389';
102
91
  rules += ' je';
103
92
  rules += ' __R-yksgrp';
@@ -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;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"}