@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.
- package/dist/Accordion.cjs +1 -1
- package/dist/Accordion.cjs.map +1 -1
- package/dist/Accordion.css.map +1 -1
- package/dist/Accordion.mjs +2 -2
- package/dist/Accordion.mjs.map +1 -1
- package/dist/ActionButton.cjs +10 -32
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +20 -60
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +10 -32
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/Avatar.cjs +2 -4
- package/dist/Avatar.cjs.map +1 -1
- package/dist/Avatar.css +4 -16
- package/dist/Avatar.css.map +1 -1
- package/dist/Avatar.mjs +2 -4
- package/dist/Avatar.mjs.map +1 -1
- package/dist/Badge.cjs +5 -16
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +10 -30
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +5 -16
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +12 -41
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +38 -86
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +12 -41
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +19 -59
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +37 -113
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +19 -59
- package/dist/Button.mjs.map +1 -1
- package/dist/Card.cjs +27 -67
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +42 -117
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +27 -67
- package/dist/Card.mjs.map +1 -1
- package/dist/Checkbox.cjs +9 -27
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +17 -49
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +9 -27
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +5 -16
- package/dist/CheckboxGroup.cjs.map +1 -1
- package/dist/CheckboxGroup.css +10 -30
- package/dist/CheckboxGroup.css.map +1 -1
- package/dist/CheckboxGroup.mjs +5 -16
- package/dist/CheckboxGroup.mjs.map +1 -1
- package/dist/ClearButton.cjs +6 -17
- package/dist/ClearButton.cjs.map +1 -1
- package/dist/ClearButton.css +11 -35
- package/dist/ClearButton.css.map +1 -1
- package/dist/ClearButton.mjs +6 -17
- package/dist/ClearButton.mjs.map +1 -1
- package/dist/CloseButton.cjs +10 -32
- package/dist/CloseButton.cjs.map +1 -1
- package/dist/CloseButton.css +20 -64
- package/dist/CloseButton.css.map +1 -1
- package/dist/CloseButton.mjs +10 -32
- package/dist/CloseButton.mjs.map +1 -1
- package/dist/ColorArea.cjs +4 -16
- package/dist/ColorArea.cjs.map +1 -1
- package/dist/ColorArea.css +8 -28
- package/dist/ColorArea.css.map +1 -1
- package/dist/ColorArea.mjs +4 -16
- package/dist/ColorArea.mjs.map +1 -1
- package/dist/ColorField.cjs +5 -16
- package/dist/ColorField.cjs.map +1 -1
- package/dist/ColorField.css +10 -30
- package/dist/ColorField.css.map +1 -1
- package/dist/ColorField.mjs +5 -16
- package/dist/ColorField.mjs.map +1 -1
- package/dist/ColorHandle.cjs +5 -15
- package/dist/ColorHandle.cjs.map +1 -1
- package/dist/ColorHandle.css +10 -30
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorHandle.mjs +5 -15
- package/dist/ColorHandle.mjs.map +1 -1
- package/dist/ColorSlider.cjs +6 -17
- package/dist/ColorSlider.cjs.map +1 -1
- package/dist/ColorSlider.css +34 -50
- package/dist/ColorSlider.css.map +1 -1
- package/dist/ColorSlider.mjs +6 -17
- package/dist/ColorSlider.mjs.map +1 -1
- package/dist/ColorSwatch.cjs +8 -26
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +16 -52
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +8 -26
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +6 -16
- package/dist/ColorSwatchPicker.cjs.map +1 -1
- package/dist/ColorSwatchPicker.css +8 -28
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +6 -16
- package/dist/ColorSwatchPicker.mjs.map +1 -1
- package/dist/ComboBox.cjs +22 -71
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +64 -152
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +22 -71
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +1 -1
- package/dist/ContextualHelp.css +2 -6
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +1 -1
- package/dist/Dialog.cjs +2 -2
- package/dist/Dialog.css +2 -2
- package/dist/Dialog.mjs +2 -2
- package/dist/Disclosure.cjs +34 -68
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +55 -91
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +36 -70
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/DropZone.cjs +2 -4
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +4 -16
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +2 -4
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +16 -47
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +31 -95
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +16 -47
- package/dist/Field.mjs.map +1 -1
- package/dist/IllustratedMessage.cjs +6 -20
- package/dist/IllustratedMessage.cjs.map +1 -1
- package/dist/IllustratedMessage.css +10 -24
- package/dist/IllustratedMessage.css.map +1 -1
- package/dist/IllustratedMessage.mjs +6 -20
- package/dist/IllustratedMessage.mjs.map +1 -1
- package/dist/Image.cjs +2 -2
- package/dist/Image.css +2 -2
- package/dist/Image.mjs +2 -2
- package/dist/InlineAlert.cjs +2 -5
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +11 -15
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +2 -5
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Menu.cjs +22 -67
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +32 -96
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +22 -67
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +22 -68
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +63 -139
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +22 -68
- package/dist/Meter.mjs.map +1 -1
- package/dist/Modal.cjs +2 -2
- package/dist/Modal.css +2 -2
- package/dist/Modal.mjs +2 -2
- package/dist/NumberField.cjs +23 -71
- package/dist/NumberField.cjs.map +1 -1
- package/dist/NumberField.css +63 -146
- package/dist/NumberField.css.map +1 -1
- package/dist/NumberField.mjs +23 -71
- package/dist/NumberField.mjs.map +1 -1
- package/dist/Picker.cjs +23 -67
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +50 -130
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +23 -67
- package/dist/Picker.mjs.map +1 -1
- package/dist/ProgressBar.cjs +23 -69
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +64 -140
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +23 -69
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/ProgressCircle.cjs +6 -20
- package/dist/ProgressCircle.cjs.map +1 -1
- package/dist/ProgressCircle.css +12 -40
- package/dist/ProgressCircle.css.map +1 -1
- package/dist/ProgressCircle.mjs +6 -20
- package/dist/ProgressCircle.mjs.map +1 -1
- package/dist/Provider.css +7 -0
- package/dist/Provider.css.map +1 -1
- package/dist/Radio.cjs +8 -26
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +16 -48
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +8 -26
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +5 -16
- package/dist/RadioGroup.cjs.map +1 -1
- package/dist/RadioGroup.css +10 -30
- package/dist/RadioGroup.css.map +1 -1
- package/dist/RadioGroup.mjs +5 -16
- package/dist/RadioGroup.mjs.map +1 -1
- package/dist/SearchField.cjs +5 -16
- package/dist/SearchField.cjs.map +1 -1
- package/dist/SearchField.css +10 -30
- package/dist/SearchField.css.map +1 -1
- package/dist/SearchField.mjs +5 -16
- package/dist/SearchField.mjs.map +1 -1
- package/dist/SegmentedControl.cjs +8 -14
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +9 -29
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +8 -14
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +63 -196
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +61 -181
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +63 -196
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +9 -27
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css +17 -49
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs +9 -27
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/Switch.cjs +6 -15
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +10 -26
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +6 -15
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +42 -86
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +65 -129
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +42 -86
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +4 -15
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +18 -34
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +4 -15
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TagGroup.cjs +14 -37
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +23 -67
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +14 -37
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +11 -34
- package/dist/TextField.cjs.map +1 -1
- package/dist/TextField.css +22 -66
- package/dist/TextField.css.map +1 -1
- package/dist/TextField.mjs +11 -34
- package/dist/TextField.mjs.map +1 -1
- package/dist/Tooltip.cjs +2 -4
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +4 -12
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +2 -4
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +17 -17
- package/page.css +7 -0
- package/src/Accordion.tsx +1 -1
- package/src/Disclosure.tsx +13 -7
- package/src/page.macro.ts +11 -0
- package/style/dist/spectrum-theme.cjs +2 -8
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +2 -8
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/types.d.ts +1 -4
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +4 -4
package/dist/ProgressCircle.mjs
CHANGED
|
@@ -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
|
-
|
|
38
|
-
|
|
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
|
-
|
|
50
|
-
|
|
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
|
|
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
|
}
|
package/dist/Provider.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACuEA;EAAA
|
|
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
|
-
|
|
97
|
-
|
|
98
|
-
|
|
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
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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) {
|
package/dist/Radio.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM
|
|
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
|
-
.
|
|
89
|
-
width: 1rem;
|
|
88
|
+
.lf {
|
|
89
|
+
width: calc(1rem * var(--s2-scale));
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
.
|
|
93
|
-
width: .875rem;
|
|
92
|
+
.lK {
|
|
93
|
+
width: calc(.875rem * var(--s2-scale));
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
.
|
|
97
|
-
width: 1.125rem;
|
|
96
|
+
.lL {
|
|
97
|
+
width: calc(1.125rem * var(--s2-scale));
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
.
|
|
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-
|
|
233
|
-
--k: 1rem;
|
|
232
|
+
.-_375toq_k-f {
|
|
233
|
+
--k: calc(1rem * var(--s2-scale));
|
|
234
234
|
}
|
|
235
235
|
|
|
236
|
-
.-_375toq_k-
|
|
237
|
-
--k: .875rem;
|
|
236
|
+
.-_375toq_k-K {
|
|
237
|
+
--k: calc(.875rem * var(--s2-scale));
|
|
238
238
|
}
|
|
239
239
|
|
|
240
|
-
.-_375toq_k-
|
|
241
|
-
--k: 1.125rem;
|
|
240
|
+
.-_375toq_k-L {
|
|
241
|
+
--k: calc(1.125rem * var(--s2-scale));
|
|
242
242
|
}
|
|
243
243
|
|
|
244
|
-
.-_375toq_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
|
|
package/dist/Radio.css.map
CHANGED
|
@@ -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
|
|
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
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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
|
-
|
|
152
|
-
|
|
153
|
-
|
|
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) {
|
package/dist/Radio.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM
|
|
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"}
|
package/dist/RadioGroup.cjs
CHANGED
|
@@ -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
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
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';
|
package/dist/RadioGroup.cjs.map
CHANGED
|
@@ -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
|
|
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"}
|
package/dist/RadioGroup.css
CHANGED
|
@@ -70,24 +70,24 @@
|
|
|
70
70
|
line-height: 1.3;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
.-aqrvqh_k-
|
|
74
|
-
--field-height: 2rem;
|
|
73
|
+
.-aqrvqh_k-j {
|
|
74
|
+
--field-height: calc(2rem * var(--s2-scale));
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
.-aqrvqh_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-
|
|
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-
|
|
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-
|
|
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
|
|
package/dist/RadioGroup.css.map
CHANGED
|
@@ -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
|
|
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"}
|
package/dist/RadioGroup.mjs
CHANGED
|
@@ -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
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
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';
|
package/dist/RadioGroup.mjs.map
CHANGED
|
@@ -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
|
|
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"}
|