@react-spectrum/s2 3.0.0-nightly-ab9fd5c68-241126 → 3.0.0-nightly-10a43de88-241127
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion.cjs +2 -5
- package/dist/Accordion.cjs.map +1 -1
- package/dist/Accordion.css.map +1 -1
- package/dist/Accordion.mjs +2 -5
- package/dist/Accordion.mjs.map +1 -1
- package/dist/ActionButton.cjs +2 -6
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +3 -7
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/ActionButtonGroup.cjs +2 -5
- package/dist/ActionButtonGroup.cjs.map +1 -1
- package/dist/ActionButtonGroup.css.map +1 -1
- package/dist/ActionButtonGroup.mjs +2 -5
- package/dist/ActionButtonGroup.mjs.map +1 -1
- package/dist/ActionMenu.cjs +2 -5
- package/dist/ActionMenu.cjs.map +1 -1
- package/dist/ActionMenu.mjs +2 -5
- package/dist/ActionMenu.mjs.map +1 -1
- package/dist/AlertDialog.cjs +2 -5
- package/dist/AlertDialog.cjs.map +1 -1
- package/dist/AlertDialog.css.map +1 -1
- package/dist/AlertDialog.mjs +2 -5
- package/dist/AlertDialog.mjs.map +1 -1
- package/dist/Avatar.cjs +2 -5
- package/dist/Avatar.cjs.map +1 -1
- package/dist/Avatar.css.map +1 -1
- package/dist/Avatar.mjs +2 -5
- package/dist/Avatar.mjs.map +1 -1
- package/dist/AvatarGroup.cjs +2 -5
- package/dist/AvatarGroup.cjs.map +1 -1
- package/dist/AvatarGroup.css.map +1 -1
- package/dist/AvatarGroup.mjs +2 -5
- package/dist/AvatarGroup.mjs.map +1 -1
- package/dist/Badge.cjs +2 -5
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +2 -5
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +4 -6
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +5 -7
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +4 -12
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +5 -13
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +2 -5
- package/dist/ButtonGroup.cjs.map +1 -1
- package/dist/ButtonGroup.css.map +1 -1
- package/dist/ButtonGroup.mjs +3 -6
- package/dist/ButtonGroup.mjs.map +1 -1
- package/dist/CardView.cjs +2 -3
- package/dist/CardView.cjs.map +1 -1
- package/dist/CardView.css.map +1 -1
- package/dist/CardView.mjs +3 -4
- package/dist/CardView.mjs.map +1 -1
- package/dist/Checkbox.cjs +2 -6
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +3 -7
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +2 -5
- package/dist/CheckboxGroup.cjs.map +1 -1
- package/dist/CheckboxGroup.css.map +1 -1
- package/dist/CheckboxGroup.mjs +3 -6
- package/dist/CheckboxGroup.mjs.map +1 -1
- package/dist/ClearButton.cjs +2 -3
- package/dist/ClearButton.cjs.map +1 -1
- package/dist/ClearButton.css.map +1 -1
- package/dist/ClearButton.mjs +2 -3
- package/dist/ClearButton.mjs.map +1 -1
- package/dist/CloseButton.cjs +2 -5
- package/dist/CloseButton.cjs.map +1 -1
- package/dist/CloseButton.css.map +1 -1
- package/dist/CloseButton.mjs +2 -5
- package/dist/CloseButton.mjs.map +1 -1
- package/dist/ColorArea.cjs +2 -5
- package/dist/ColorArea.cjs.map +1 -1
- package/dist/ColorArea.css.map +1 -1
- package/dist/ColorArea.mjs +2 -5
- package/dist/ColorArea.mjs.map +1 -1
- package/dist/ColorField.cjs +2 -5
- package/dist/ColorField.cjs.map +1 -1
- package/dist/ColorField.css.map +1 -1
- package/dist/ColorField.mjs +3 -6
- package/dist/ColorField.mjs.map +1 -1
- package/dist/ColorSlider.cjs +2 -5
- package/dist/ColorSlider.cjs.map +1 -1
- package/dist/ColorSlider.css.map +1 -1
- package/dist/ColorSlider.mjs +3 -6
- package/dist/ColorSlider.mjs.map +1 -1
- package/dist/ColorSwatch.cjs +2 -5
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +3 -6
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +2 -5
- package/dist/ColorSwatchPicker.cjs.map +1 -1
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +2 -5
- package/dist/ColorSwatchPicker.mjs.map +1 -1
- package/dist/ColorWheel.cjs +2 -5
- package/dist/ColorWheel.cjs.map +1 -1
- package/dist/ColorWheel.css.map +1 -1
- package/dist/ColorWheel.mjs +2 -5
- package/dist/ColorWheel.mjs.map +1 -1
- package/dist/ComboBox.cjs +2 -5
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +3 -6
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/Content.cjs +12 -19
- package/dist/Content.cjs.map +1 -1
- package/dist/Content.mjs +12 -19
- package/dist/Content.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +2 -5
- package/dist/ContextualHelp.cjs.map +1 -1
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +2 -5
- package/dist/ContextualHelp.mjs.map +1 -1
- package/dist/CustomDialog.cjs +2 -5
- package/dist/CustomDialog.cjs.map +1 -1
- package/dist/CustomDialog.css.map +1 -1
- package/dist/CustomDialog.mjs +2 -5
- package/dist/CustomDialog.mjs.map +1 -1
- package/dist/Dialog.cjs +2 -6
- package/dist/Dialog.cjs.map +1 -1
- package/dist/Dialog.css.map +1 -1
- package/dist/Dialog.mjs +2 -6
- package/dist/Dialog.mjs.map +1 -1
- package/dist/Disclosure.cjs +6 -15
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +7 -16
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs +2 -6
- package/dist/Divider.cjs.map +1 -1
- package/dist/Divider.css.map +1 -1
- package/dist/Divider.mjs +2 -6
- package/dist/Divider.mjs.map +1 -1
- package/dist/DropZone.cjs +2 -5
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +2 -5
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +6 -9
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +6 -9
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +2 -5
- package/dist/Form.cjs.map +1 -1
- package/dist/Form.css.map +1 -1
- package/dist/Form.mjs +2 -5
- package/dist/Form.mjs.map +1 -1
- package/dist/FullscreenDialog.cjs +2 -5
- package/dist/FullscreenDialog.cjs.map +1 -1
- package/dist/FullscreenDialog.css.map +1 -1
- package/dist/FullscreenDialog.mjs +2 -5
- package/dist/FullscreenDialog.mjs.map +1 -1
- package/dist/IllustratedMessage.cjs +2 -6
- package/dist/IllustratedMessage.cjs.map +1 -1
- package/dist/IllustratedMessage.css.map +1 -1
- package/dist/IllustratedMessage.mjs +2 -6
- package/dist/IllustratedMessage.mjs.map +1 -1
- package/dist/Image.cjs +2 -3
- package/dist/Image.cjs.map +1 -1
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +3 -4
- package/dist/Image.mjs.map +1 -1
- package/dist/InlineAlert.cjs +2 -6
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +3 -7
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Link.cjs +2 -6
- package/dist/Link.cjs.map +1 -1
- package/dist/Link.css.map +1 -1
- package/dist/Link.mjs +3 -7
- package/dist/Link.mjs.map +1 -1
- package/dist/Menu.cjs +2 -5
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +3 -6
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +2 -6
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +2 -6
- package/dist/Meter.mjs.map +1 -1
- package/dist/Modal.cjs +2 -5
- package/dist/Modal.cjs.map +1 -1
- package/dist/Modal.css.map +1 -1
- package/dist/Modal.mjs +3 -6
- package/dist/Modal.mjs.map +1 -1
- package/dist/NumberField.cjs +2 -5
- package/dist/NumberField.cjs.map +1 -1
- package/dist/NumberField.css.map +1 -1
- package/dist/NumberField.mjs +3 -6
- package/dist/NumberField.mjs.map +1 -1
- package/dist/Picker.cjs +2 -5
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +3 -6
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +4 -8
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +5 -9
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs +2 -6
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +2 -6
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/ProgressCircle.cjs +2 -6
- package/dist/ProgressCircle.cjs.map +1 -1
- package/dist/ProgressCircle.css.map +1 -1
- package/dist/ProgressCircle.mjs +2 -6
- package/dist/ProgressCircle.mjs.map +1 -1
- package/dist/Radio.cjs +2 -6
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +3 -7
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +2 -6
- package/dist/RadioGroup.cjs.map +1 -1
- package/dist/RadioGroup.css.map +1 -1
- package/dist/RadioGroup.mjs +3 -7
- package/dist/RadioGroup.mjs.map +1 -1
- package/dist/RangeSlider.cjs +2 -3
- package/dist/RangeSlider.cjs.map +1 -1
- package/dist/RangeSlider.mjs +3 -4
- package/dist/RangeSlider.mjs.map +1 -1
- package/dist/SearchField.cjs +2 -5
- package/dist/SearchField.cjs.map +1 -1
- package/dist/SearchField.css.map +1 -1
- package/dist/SearchField.mjs +3 -6
- package/dist/SearchField.mjs.map +1 -1
- package/dist/SegmentedControl.cjs +5 -11
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +6 -12
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +2 -3
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +3 -4
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +2 -6
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs +2 -6
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/Switch.cjs +2 -6
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +3 -7
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +9 -21
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +10 -22
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +2 -5
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +2 -5
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TagGroup.cjs +4 -6
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +4 -6
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +8 -19
- package/dist/TextField.cjs.map +1 -1
- package/dist/TextField.css.map +1 -1
- package/dist/TextField.mjs +9 -20
- package/dist/TextField.mjs.map +1 -1
- package/dist/ToggleButton.cjs +2 -6
- package/dist/ToggleButton.cjs.map +1 -1
- package/dist/ToggleButton.css.map +1 -1
- package/dist/ToggleButton.mjs +2 -6
- package/dist/ToggleButton.mjs.map +1 -1
- package/dist/ToggleButtonGroup.cjs +2 -5
- package/dist/ToggleButtonGroup.cjs.map +1 -1
- package/dist/ToggleButtonGroup.mjs +2 -5
- package/dist/ToggleButtonGroup.mjs.map +1 -1
- package/dist/Tooltip.cjs +3 -6
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +4 -7
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/types.d.ts +64 -64
- package/dist/types.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/Accordion.tsx +5 -8
- package/src/ActionButton.tsx +6 -9
- package/src/ActionButtonGroup.tsx +5 -8
- package/src/ActionMenu.tsx +5 -8
- package/src/AlertDialog.tsx +5 -8
- package/src/Avatar.tsx +5 -8
- package/src/AvatarGroup.tsx +5 -8
- package/src/Badge.tsx +5 -8
- package/src/Breadcrumbs.tsx +6 -12
- package/src/Button.tsx +10 -16
- package/src/ButtonGroup.tsx +5 -8
- package/src/CardView.tsx +2 -5
- package/src/Checkbox.tsx +6 -9
- package/src/CheckboxGroup.tsx +5 -8
- package/src/ClearButton.tsx +2 -5
- package/src/CloseButton.tsx +5 -8
- package/src/ColorArea.tsx +5 -8
- package/src/ColorField.tsx +5 -8
- package/src/ColorSlider.tsx +5 -8
- package/src/ColorSwatch.tsx +5 -8
- package/src/ColorSwatchPicker.tsx +5 -8
- package/src/ColorWheel.tsx +5 -8
- package/src/ComboBox.tsx +5 -8
- package/src/Content.tsx +12 -30
- package/src/ContextualHelp.tsx +5 -8
- package/src/CustomDialog.tsx +5 -8
- package/src/Dialog.tsx +6 -9
- package/src/Disclosure.tsx +15 -24
- package/src/Divider.tsx +6 -9
- package/src/DropZone.tsx +5 -8
- package/src/Field.tsx +6 -15
- package/src/Form.tsx +5 -8
- package/src/FullscreenDialog.tsx +5 -8
- package/src/IllustratedMessage.tsx +6 -9
- package/src/Image.tsx +3 -6
- package/src/InlineAlert.tsx +6 -9
- package/src/Link.tsx +6 -9
- package/src/Menu.tsx +5 -8
- package/src/Meter.tsx +6 -9
- package/src/Modal.tsx +5 -8
- package/src/NumberField.tsx +5 -8
- package/src/Picker.tsx +5 -8
- package/src/Popover.tsx +9 -15
- package/src/ProgressBar.tsx +6 -9
- package/src/ProgressCircle.tsx +6 -9
- package/src/Radio.tsx +6 -9
- package/src/RadioGroup.tsx +6 -9
- package/src/RangeSlider.tsx +2 -5
- package/src/SearchField.tsx +5 -8
- package/src/SegmentedControl.tsx +10 -16
- package/src/Slider.tsx +2 -5
- package/src/StatusLight.tsx +6 -9
- package/src/Switch.tsx +6 -9
- package/src/TableView.tsx +20 -32
- package/src/Tabs.tsx +5 -8
- package/src/TagGroup.tsx +7 -14
- package/src/TextField.tsx +20 -28
- package/src/ToggleButton.tsx +6 -9
- package/src/ToggleButtonGroup.tsx +5 -8
- package/src/Tooltip.tsx +5 -9
package/dist/ProgressBar.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AC2DyB;;;;;;;;;;AASA;;;;;;;;;;AAST;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArFf;EA0CI;;;;EAAA;;;;;AA1CJ;;AA0CI;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaP;;;;;;AAbO;EAAA;IAAA;;;;;;AAaP","sources":["7293bad37f188837","packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["@import \"0b8d2821d82ee250\";\n@import \"f2b8eec694697861\";\n@import \"bd67a9a4e04bbe30\";\n@import \"928e619efccddb64\";\n@import \"27fd25d02acf65a5\";\n@import \"47f66b5fa7a24be0\";\n@import \"5d9861be4320075f\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ProgressBar as AriaProgressBar,\n ProgressBarProps as AriaProgressBarProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n /**\n * The size of the ProgressBar.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean,\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n 0% {\n transform: translateX(-70%) scaleX(0.7);\n }\n 100% {\n transform: translateX(100%) scaleX(0.7);\n }\n`);\n\nconst indeterminateRTL = keyframes(`\n 0% {\n transform: translateX(100%) scaleX(0.7);\n }\n 100% {\n transform: translateX(-70%) scaleX(0.7);\n }\n`);\n\nconst wrapper = style({\n ...bar(),\n gridTemplateColumns: {\n default: {\n labelPosition: {\n top: ['1fr', 'auto'],\n side: ['auto', '1fr']\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: ['1fr'],\n side: ['auto', '1fr']\n }\n }\n },\n gridTemplateAreas: {\n default: {\n labelPosition: {\n top: [\n 'label value',\n 'bar bar'\n ],\n side: [\n 'label bar value'\n ]\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: [\n 'label',\n 'bar'\n ],\n side: [\n 'label bar'\n ]\n }\n }\n }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'accent',\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n },\n width: {\n isIndeterminate: 'full'\n },\n transformOrigin: {\n isIndeterminate: 'left'\n }\n});\n\nconst indeterminateAnimation = style({\n animation: {\n direction: {\n ltr: indeterminateLTR,\n rtl: indeterminateRTL\n }\n },\n animationDuration: 1000,\n animationIterationCount: 'infinite',\n animationTimingFunction: 'in-out',\n willChange: 'transform',\n position: 'relative'\n});\n\
|
|
1
|
+
{"mappings":"AC2DyB;;;;;;;;;;AASA;;;;;;;;;;AAST;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAaP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBkB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArFf;EA0CI;;;;EAAA;;;;;AA1CJ;;AA0CI;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAKA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAaP;;;;;;AAbO;EAAA;IAAA;;;;;;AAaP","sources":["7293bad37f188837","packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["@import \"0b8d2821d82ee250\";\n@import \"f2b8eec694697861\";\n@import \"bd67a9a4e04bbe30\";\n@import \"928e619efccddb64\";\n@import \"27fd25d02acf65a5\";\n@import \"47f66b5fa7a24be0\";\n@import \"5d9861be4320075f\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ProgressBar as AriaProgressBar,\n ProgressBarProps as AriaProgressBarProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n /**\n * The size of the ProgressBar.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean,\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n 0% {\n transform: translateX(-70%) scaleX(0.7);\n }\n 100% {\n transform: translateX(100%) scaleX(0.7);\n }\n`);\n\nconst indeterminateRTL = keyframes(`\n 0% {\n transform: translateX(100%) scaleX(0.7);\n }\n 100% {\n transform: translateX(-70%) scaleX(0.7);\n }\n`);\n\nconst wrapper = style({\n ...bar(),\n gridTemplateColumns: {\n default: {\n labelPosition: {\n top: ['1fr', 'auto'],\n side: ['auto', '1fr']\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: ['1fr'],\n side: ['auto', '1fr']\n }\n }\n },\n gridTemplateAreas: {\n default: {\n labelPosition: {\n top: [\n 'label value',\n 'bar bar'\n ],\n side: [\n 'label bar value'\n ]\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: [\n 'label',\n 'bar'\n ],\n side: [\n 'label bar'\n ]\n }\n }\n }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'accent',\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n },\n width: {\n isIndeterminate: 'full'\n },\n transformOrigin: {\n isIndeterminate: 'left'\n }\n});\n\nconst indeterminateAnimation = style({\n animation: {\n direction: {\n ltr: indeterminateLTR,\n rtl: indeterminateRTL\n }\n },\n animationDuration: 1000,\n animationIterationCount: 'infinite',\n animationTimingFunction: 'in-out',\n willChange: 'transform',\n position: 'relative'\n});\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n let {\n label, size = 'M',\n staticColor,\n isIndeterminate,\n labelPosition = 'top',\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n\n return (\n <AriaProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({...props})}>\n <div\n className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n});\n\n"],"names":[],"version":3,"file":"ProgressBar.css.map"}
|
package/dist/ProgressBar.mjs
CHANGED
|
@@ -191,7 +191,7 @@ const $b847b7cd294eafba$var$indeterminateAnimation = function anonymous(props) {
|
|
|
191
191
|
rules += ' Uc';
|
|
192
192
|
return rules;
|
|
193
193
|
};
|
|
194
|
-
|
|
194
|
+
const $b847b7cd294eafba$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $cNVLZ$forwardRef)(function ProgressBar(props, ref) {
|
|
195
195
|
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $b847b7cd294eafba$export$e9f3bf65a26ce129);
|
|
196
196
|
let { label: label, size: size = 'M', staticColor: staticColor, isIndeterminate: isIndeterminate, labelPosition: labelPosition = 'top', UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
|
|
197
197
|
let domRef = (0, $cNVLZ$useDOMRef)(ref);
|
|
@@ -241,11 +241,7 @@ function $b847b7cd294eafba$var$ProgressBar(props, ref) {
|
|
|
241
241
|
]
|
|
242
242
|
})
|
|
243
243
|
});
|
|
244
|
-
}
|
|
245
|
-
/**
|
|
246
|
-
* ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
|
|
247
|
-
* They can represent either determinate or indeterminate progress.
|
|
248
|
-
*/ const $b847b7cd294eafba$export$c17561cb55d4db30 = /*#__PURE__*/ (0, $cNVLZ$forwardRef)($b847b7cd294eafba$var$ProgressBar);
|
|
244
|
+
});
|
|
249
245
|
|
|
250
246
|
|
|
251
247
|
export {$b847b7cd294eafba$export$e9f3bf65a26ce129 as ProgressBarContext, $b847b7cd294eafba$export$c17561cb55d4db30 as ProgressBar};
|
package/dist/ProgressBar.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AASN,MAAM;AASN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM;;;;;;;;;;;AAkBC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SACF,KAAK,QAAE,OAAO,kBACd,WAAW,mBACX,eAAe,iBACf,gBAAgB,qBAChB,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,8BAAQ;YAAC,GAAG,KAAK;kBAAE;2BAAM;QAAa,GAAG,MAAM,MAAM;kBAClF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;oBACG,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAAE,MAAM;wBAAM,YAAW;wBAAQ,eAAe;wBAAe,aAAa;kCAAc;;oBAC7G,SAAS,CAAC,iCAAmB,gBAAC;wBAAK,WAAW,kCAAY;kCAAC;4BAAM,YAAY;yCAAO;wBAAW;kCAAK;;kCACrG,gBAAC;wBAAI,WAAW,kCAAY;4BAAC,GAAG,KAAK;wBAAA;kCACnC,cAAA,gBAAC;4BACC,WAAW,CAAA,GAAA,yCAAU,EAAE,2BAAK;gCAAC,GAAG,KAAK;6CAAE;4BAAW,IAAK,kBAAkB,6CAAuB;2CAAC;4BAAS,KAAK;4BAC/G,OAAO;gCAAC,OAAO,kBAAkB,YAAY,aAAa;4BAAG;;;;;;AAM3E","sources":["packages/@react-spectrum/s2/src/ProgressBar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ProgressBar as AriaProgressBar,\n ProgressBarProps as AriaProgressBarProps,\n ContextValue\n} from 'react-aria-components';\nimport {bar, track} from './bar-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ProgressBarStyleProps {\n /**\n * The size of the ProgressBar.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean,\n /**\n * The static color style to apply. Useful when the button appears over a color background.\n */\n staticColor?: 'white' | 'black',\n /**\n * The label's overall position relative to the element it is labeling.\n * @default 'top'\n */\n labelPosition?: LabelPosition\n\n}\n\nexport interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style'>, ProgressBarStyleProps, StyleProps {\n /** The content to display as the label. */\n label?: ReactNode\n}\n\nexport const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst indeterminateLTR = keyframes(`\n 0% {\n transform: translateX(-70%) scaleX(0.7);\n }\n 100% {\n transform: translateX(100%) scaleX(0.7);\n }\n`);\n\nconst indeterminateRTL = keyframes(`\n 0% {\n transform: translateX(100%) scaleX(0.7);\n }\n 100% {\n transform: translateX(-70%) scaleX(0.7);\n }\n`);\n\nconst wrapper = style({\n ...bar(),\n gridTemplateColumns: {\n default: {\n labelPosition: {\n top: ['1fr', 'auto'],\n side: ['auto', '1fr']\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: ['1fr'],\n side: ['auto', '1fr']\n }\n }\n },\n gridTemplateAreas: {\n default: {\n labelPosition: {\n top: [\n 'label value',\n 'bar bar'\n ],\n side: [\n 'label bar value'\n ]\n }\n },\n isIndeterminate: {\n labelPosition: {\n top: [\n 'label',\n 'bar'\n ],\n side: [\n 'label bar'\n ]\n }\n }\n }\n}, getAllowedOverrides());\n\nconst valueStyles = style({\n ...fieldLabel(),\n gridArea: 'value'\n});\n\nconst trackStyles = style({\n ...track(),\n height: {\n default: 6,\n size: {\n S: 4, // progress-bar-thickness-small\n M: 6, // progress-bar-thickness-medium\n L: 8, // progress-bar-thickness-large\n XL: 10 // progress-bar-thickness-extra-large\n }\n }\n});\n\nconst fill = style<ProgressBarStyleProps>({\n height: 'full',\n borderStyle: 'none',\n borderRadius: 'full',\n backgroundColor: {\n default: 'accent',\n staticColor: {\n white: {\n default: 'transparent-white-900'\n },\n // TODO: Is there a black static color in S2?\n black: {\n default: 'transparent-black-900'\n }\n },\n forcedColors: 'ButtonText'\n },\n width: {\n isIndeterminate: 'full'\n },\n transformOrigin: {\n isIndeterminate: 'left'\n }\n});\n\nconst indeterminateAnimation = style({\n animation: {\n direction: {\n ltr: indeterminateLTR,\n rtl: indeterminateRTL\n }\n },\n animationDuration: 1000,\n animationIterationCount: 'infinite',\n animationTimingFunction: 'in-out',\n willChange: 'transform',\n position: 'relative'\n});\n\n/**\n * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.\n * They can represent either determinate or indeterminate progress.\n */\nexport const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);\n let {\n label, size = 'M',\n staticColor,\n isIndeterminate,\n labelPosition = 'top',\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n let {direction} = useLocale();\n\n return (\n <AriaProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>\n {({percentage, valueText}) => (\n <>\n {label && <FieldLabel size={size} labelAlign=\"start\" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}\n {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}\n <div className={trackStyles({...props})}>\n <div\n className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}\n style={{width: isIndeterminate ? undefined : percentage + '%'}} />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n});\n\n"],"names":[],"version":3,"file":"ProgressBar.mjs.map"}
|
package/dist/ProgressCircle.cjs
CHANGED
|
@@ -73,7 +73,7 @@ const $1c116ea4b0d2d023$var$fill = function anonymous(props) {
|
|
|
73
73
|
const $1c116ea4b0d2d023$var$rotationAnimation = "-u41dq3";
|
|
74
74
|
// stroke-dashoffset represents `100 - percentage`. See below for how this works.
|
|
75
75
|
const $1c116ea4b0d2d023$var$dashoffsetAnimation = "-_1i5ccgk";
|
|
76
|
-
|
|
76
|
+
const $1c116ea4b0d2d023$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $5RNes$react.forwardRef)(function ProgressCircle(props, ref) {
|
|
77
77
|
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $1c116ea4b0d2d023$export$afffa1e5edf12209);
|
|
78
78
|
let { size: size = 'M', staticColor: staticColor, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
|
|
79
79
|
let domRef = (0, $5RNes$reactspectrumutils.useDOMRef)(ref);
|
|
@@ -127,11 +127,7 @@ function $1c116ea4b0d2d023$var$ProgressCircle(props, ref) {
|
|
|
127
127
|
]
|
|
128
128
|
})
|
|
129
129
|
});
|
|
130
|
-
}
|
|
131
|
-
/**
|
|
132
|
-
* ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
|
|
133
|
-
* They can represent determinate or indeterminate progress.
|
|
134
|
-
*/ let $1c116ea4b0d2d023$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $5RNes$react.forwardRef)($1c116ea4b0d2d023$var$ProgressCircle);
|
|
130
|
+
});
|
|
135
131
|
|
|
136
132
|
|
|
137
133
|
//# sourceMappingURL=ProgressCircle.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0BM,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAAkE;AAEnH,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAWN,MAAM;;;;;;;;AAWN,MAAM;;;;;;;;;;AAkBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0BM,MAAM,0DAAwB,CAAA,GAAA,0BAAY,EAAkE;AAEnH,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAWN,MAAM;;;;;;;;AAWN,MAAM;;;;;;;;;;AAkBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAA2B;IACpI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,cAAc;IAClB,IAAI,SAAS,KACX,cAAc;SACT,IAAI,SAAS,KAClB,cAAc;IAGhB,yGAAyG;IACzG,IAAI,SAAS,CAAC,WAAW,EAAE,cAAc,EAAE,GAAG,CAAC;IAE/C,qBACE,gCAAC,CAAA,GAAA,sCAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBACnD,GAAG,WAAW;sBACd;YACF,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iCAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,4BAAM;yCAAC;wBAAW;;kCAC/B,gCAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,2BAAK;yCAAC;wBAAW;wBAC5B,OAAO;4BACL,yFAAyF;4BACzF,gGAAgG;4BAChG,WAAW,kBAAkB,GAAG,wCAAkB,2CAA2C,EAAE,0CAAoB,4CAA4C,CAAC,GAAG;wBACrK;wBACA,2FAA2F;wBAC3F,YAAW;wBACX,sDAAsD;wBACtD,iBAAgB;wBAChB,kBAAkB,mBAAmB,cAAc,OAAO,YAAY,MAAM;wBAC5E,eAAc;;;;;AAK1B","sources":["packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n let {\n size = 'M',\n staticColor,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let strokeWidth = 3;\n if (size === 'S') {\n strokeWidth = 2;\n } else if (size === 'L') {\n strokeWidth = 4;\n }\n\n // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n return (\n <RACProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({\n ...renderProps,\n size\n }, props.styles)}>\n {({percentage, isIndeterminate}) => (\n <svg\n fill=\"none\"\n width=\"100%\"\n height=\"100%\">\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={track({staticColor})} />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={fill({staticColor})}\n style={{\n // These cubic-bezier timing functions were derived from the previous animation keyframes\n // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n }}\n // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n pathLength=\"100\"\n // Add extra gap between dashes so 0% works in Chrome.\n strokeDasharray=\"100 200\"\n strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n strokeLinecap=\"round\" />\n </svg>\n )}\n </RACProgressBar>\n );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACuCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAWD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBG;;AAWF;EAAA;IAAA;;;;IAWD;;;;;;AAAA;;;;AAkBa;;;;;;;;;;AAWE","sources":["899fc8f7586d17bf","packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["@import \"766ebfa3e9b99037\";\n@import \"cdcaa7bc1c97d336\";\n@import \"788ab0411a865673\";\n@import \"73f154e47fb53c5b\";\n@import \"6c6d672d6676880a\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\
|
|
1
|
+
{"mappings":"ACuCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAWD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtBG;;AAWF;EAAA;IAAA;;;;IAWD;;;;;;AAAA;;;;AAkBa;;;;;;;;;;AAWE","sources":["899fc8f7586d17bf","packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["@import \"766ebfa3e9b99037\";\n@import \"cdcaa7bc1c97d336\";\n@import \"788ab0411a865673\";\n@import \"73f154e47fb53c5b\";\n@import \"6c6d672d6676880a\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n let {\n size = 'M',\n staticColor,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let strokeWidth = 3;\n if (size === 'S') {\n strokeWidth = 2;\n } else if (size === 'L') {\n strokeWidth = 4;\n }\n\n // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n return (\n <RACProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({\n ...renderProps,\n size\n }, props.styles)}>\n {({percentage, isIndeterminate}) => (\n <svg\n fill=\"none\"\n width=\"100%\"\n height=\"100%\">\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={track({staticColor})} />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={fill({staticColor})}\n style={{\n // These cubic-bezier timing functions were derived from the previous animation keyframes\n // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n }}\n // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n pathLength=\"100\"\n // Add extra gap between dashes so 0% works in Chrome.\n strokeDasharray=\"100 200\"\n strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n strokeLinecap=\"round\" />\n </svg>\n )}\n </RACProgressBar>\n );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.css.map"}
|
package/dist/ProgressCircle.mjs
CHANGED
|
@@ -66,7 +66,7 @@ const $41ddd91dbbf0c389$var$fill = function anonymous(props) {
|
|
|
66
66
|
const $41ddd91dbbf0c389$var$rotationAnimation = "-u41dq3";
|
|
67
67
|
// stroke-dashoffset represents `100 - percentage`. See below for how this works.
|
|
68
68
|
const $41ddd91dbbf0c389$var$dashoffsetAnimation = "-_1i5ccgk";
|
|
69
|
-
|
|
69
|
+
const $41ddd91dbbf0c389$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $8ijGz$forwardRef)(function ProgressCircle(props, ref) {
|
|
70
70
|
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $41ddd91dbbf0c389$export$afffa1e5edf12209);
|
|
71
71
|
let { size: size = 'M', staticColor: staticColor, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
|
|
72
72
|
let domRef = (0, $8ijGz$useDOMRef)(ref);
|
|
@@ -120,11 +120,7 @@ function $41ddd91dbbf0c389$var$ProgressCircle(props, ref) {
|
|
|
120
120
|
]
|
|
121
121
|
})
|
|
122
122
|
});
|
|
123
|
-
}
|
|
124
|
-
/**
|
|
125
|
-
* ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
|
|
126
|
-
* They can represent determinate or indeterminate progress.
|
|
127
|
-
*/ let $41ddd91dbbf0c389$export$c79b9d6b4cc92af7 = /*#__PURE__*/ (0, $8ijGz$forwardRef)($41ddd91dbbf0c389$var$ProgressCircle);
|
|
123
|
+
});
|
|
128
124
|
|
|
129
125
|
|
|
130
126
|
export {$41ddd91dbbf0c389$export$afffa1e5edf12209 as ProgressCircleContext, $41ddd91dbbf0c389$export$c79b9d6b4cc92af7 as ProgressCircle};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0BM,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAkE;AAEnH,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAWN,MAAM;;;;;;;;AAWN,MAAM;;;;;;;;;;AAkBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;
|
|
1
|
+
{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0BM,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAkE;AAEnH,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAWN,MAAM;;;;;;;;AAWN,MAAM;;;;;;;;;;AAkBN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAcC,MAAM,4CAAiB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,eAAe,KAA0B,EAAE,GAA2B;IACpI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,cAAc;IAClB,IAAI,SAAS,KACX,cAAc;SACT,IAAI,SAAS,KAClB,cAAc;IAGhB,yGAAyG;IACzG,IAAI,SAAS,CAAC,WAAW,EAAE,cAAc,EAAE,GAAG,CAAC;IAE/C,qBACE,gBAAC,CAAA,GAAA,kBAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBACnD,GAAG,WAAW;sBACd;YACF,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iBAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,4BAAM;yCAAC;wBAAW;;kCAC/B,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,2BAAK;yCAAC;wBAAW;wBAC5B,OAAO;4BACL,yFAAyF;4BACzF,gGAAgG;4BAChG,WAAW,kBAAkB,GAAG,wCAAkB,2CAA2C,EAAE,0CAAoB,4CAA4C,CAAC,GAAG;wBACrK;wBACA,2FAA2F;wBAC3F,YAAW;wBACX,sDAAsD;wBACtD,iBAAgB;wBAChB,kBAAkB,mBAAmB,cAAc,OAAO,YAAY,MAAM;wBAC5E,eAAc;;;;;AAK1B","sources":["packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n /**\n * The size of the ProgressCircle.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** The static color style to apply. Useful when the button appears over a color background. */\n staticColor?: 'black' | 'white',\n /**\n * Whether presentation is indeterminate when progress isn't known.\n */\n isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n size: {\n default: 32,\n size: {\n S: 16,\n L: 64\n }\n },\n aspectRatio: 'square'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'gray-300',\n staticColor: {\n white: 'transparent-white-300',\n black: 'transparent-black-300'\n },\n forcedColors: 'Background'\n }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n stroke: {\n default: 'blue-900',\n staticColor: {\n white: 'transparent-white-900',\n black: 'transparent-black-900'\n },\n forcedColors: 'Highlight'\n },\n rotate: -90,\n transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight\n}\n\nconst rotationAnimation = keyframes(`\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n 0%, 100% {\n stroke-dashoffset: 75;\n }\n\n 30% {\n stroke-dashoffset: 20;\n }\n`);\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nexport const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n let {\n size = 'M',\n staticColor,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let strokeWidth = 3;\n if (size === 'S') {\n strokeWidth = 2;\n } else if (size === 'L') {\n strokeWidth = 4;\n }\n\n // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n return (\n <RACProgressBar\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({\n ...renderProps,\n size\n }, props.styles)}>\n {({percentage, isIndeterminate}) => (\n <svg\n fill=\"none\"\n width=\"100%\"\n height=\"100%\">\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={track({staticColor})} />\n <circle\n cx=\"50%\"\n cy=\"50%\"\n r={radius}\n strokeWidth={strokeWidth}\n className={fill({staticColor})}\n style={{\n // These cubic-bezier timing functions were derived from the previous animation keyframes\n // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n }}\n // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n pathLength=\"100\"\n // Add extra gap between dashes so 0% works in Chrome.\n strokeDasharray=\"100 200\"\n strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n strokeLinecap=\"round\" />\n </svg>\n )}\n </RACProgressBar>\n );\n});\n"],"names":[],"version":3,"file":"ProgressCircle.mjs.map"}
|
package/dist/Radio.cjs
CHANGED
|
@@ -150,7 +150,7 @@ const $49f41f366ec3019f$var$circle = function anonymous(props) {
|
|
|
150
150
|
else rules += ' -_375toq_k-k';
|
|
151
151
|
return rules;
|
|
152
152
|
};
|
|
153
|
-
|
|
153
|
+
const $49f41f366ec3019f$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, $fd22C$react.forwardRef)(function Radio(props, ref) {
|
|
154
154
|
let { children: children, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style } = props;
|
|
155
155
|
let circleRef = (0, $fd22C$react.useRef)(null);
|
|
156
156
|
let inputRef = (0, $fd22C$react.useRef)(null);
|
|
@@ -185,11 +185,7 @@ function $49f41f366ec3019f$var$Radio(props, ref) {
|
|
|
185
185
|
]
|
|
186
186
|
})
|
|
187
187
|
});
|
|
188
|
-
}
|
|
189
|
-
/**
|
|
190
|
-
* Radio buttons allow users to select a single option from a list of mutually exclusive options.
|
|
191
|
-
* All possible options are exposed up front for users to compare.
|
|
192
|
-
*/ let $49f41f366ec3019f$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, $fd22C$react.forwardRef)($49f41f366ec3019f$var$Radio);
|
|
188
|
+
});
|
|
193
189
|
|
|
194
190
|
|
|
195
191
|
//# sourceMappingURL=Radio.cjs.map
|
package/dist/Radio.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCC,MAAM,4CAAQ,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAAmC;IACjH,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,sCAAW,EAAqB;IAEpC,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n});\n"],"names":[],"version":3,"file":"Radio.cjs.map"}
|
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;;;;;;AAAA;EAAA;IAAA;;;;IAmBD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["9fa8f4e96c5d74b7","packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["@import \"4c55815e8f2cdad6\";\n@import \"4d824628f052c21a\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\
|
|
1
|
+
{"mappings":"ACkDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmBD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnBC;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAmBD;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["9fa8f4e96c5d74b7","packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["@import \"4c55815e8f2cdad6\";\n@import \"4d824628f052c21a\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n});\n"],"names":[],"version":3,"file":"Radio.css.map"}
|
package/dist/Radio.mjs
CHANGED
|
@@ -4,7 +4,7 @@ import {FormContext as $9b916426527cebe7$export$c24727297075ec6a, useFormProps a
|
|
|
4
4
|
import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
|
|
5
5
|
import {jsx as $Ipfg8$jsx, jsxs as $Ipfg8$jsxs, Fragment as $Ipfg8$Fragment} from "react/jsx-runtime";
|
|
6
6
|
import {Radio as $Ipfg8$Radio} from "react-aria-components";
|
|
7
|
-
import {
|
|
7
|
+
import {forwardRef as $Ipfg8$forwardRef, useRef as $Ipfg8$useRef, useContext as $Ipfg8$useContext} from "react";
|
|
8
8
|
import {useFocusableRef as $Ipfg8$useFocusableRef} from "@react-spectrum/utils";
|
|
9
9
|
|
|
10
10
|
/*
|
|
@@ -144,7 +144,7 @@ const $1ae2870af9a200f8$var$circle = function anonymous(props) {
|
|
|
144
144
|
else rules += ' -_375toq_k-k';
|
|
145
145
|
return rules;
|
|
146
146
|
};
|
|
147
|
-
|
|
147
|
+
const $1ae2870af9a200f8$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, $Ipfg8$forwardRef)(function Radio(props, ref) {
|
|
148
148
|
let { children: children, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style } = props;
|
|
149
149
|
let circleRef = (0, $Ipfg8$useRef)(null);
|
|
150
150
|
let inputRef = (0, $Ipfg8$useRef)(null);
|
|
@@ -179,11 +179,7 @@ function $1ae2870af9a200f8$var$Radio(props, ref) {
|
|
|
179
179
|
]
|
|
180
180
|
})
|
|
181
181
|
});
|
|
182
|
-
}
|
|
183
|
-
/**
|
|
184
|
-
* Radio buttons allow users to select a single option from a list of mutually exclusive options.
|
|
185
|
-
* All possible options are exposed up front for users to compare.
|
|
186
|
-
*/ let $1ae2870af9a200f8$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, $Ipfg8$forwardRef)($1ae2870af9a200f8$var$Radio);
|
|
182
|
+
});
|
|
187
183
|
|
|
188
184
|
|
|
189
185
|
export {$1ae2870af9a200f8$export$d7b12c4107be0d61 as Radio};
|
package/dist/Radio.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCC,MAAM,4CAAQ,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAAmC;IACjH,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,yCAAW,EAAqB;IAEpC,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'default',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n});\n"],"names":[],"version":3,"file":"Radio.mjs.map"}
|
package/dist/RadioGroup.cjs
CHANGED
|
@@ -32,7 +32,7 @@ $parcel$export(module.exports, "RadioGroup", () => $10d624be839a1d01$export$a98f
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
const $10d624be839a1d01$export$a79eda4ff50e30b6 = /*#__PURE__*/ (0, $ijW5U$react.createContext)(null);
|
|
35
|
-
|
|
35
|
+
const $10d624be839a1d01$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, $ijW5U$react.forwardRef)(function RadioGroup(props, ref) {
|
|
36
36
|
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $10d624be839a1d01$export$a79eda4ff50e30b6);
|
|
37
37
|
let formContext = (0, $ijW5U$react.useContext)((0, $bfa4962d90c8af48$exports.FormContext));
|
|
38
38
|
props = (0, $bfa4962d90c8af48$exports.useFormProps)(props);
|
|
@@ -152,11 +152,7 @@ function $10d624be839a1d01$var$RadioGroup(props, ref) {
|
|
|
152
152
|
]
|
|
153
153
|
})
|
|
154
154
|
});
|
|
155
|
-
}
|
|
156
|
-
/**
|
|
157
|
-
* Radio groups allow users to select a single option from a list of mutually exclusive options.
|
|
158
|
-
* All possible options are exposed up front for users to compare.
|
|
159
|
-
*/ let $10d624be839a1d01$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, $ijW5U$react.forwardRef)($10d624be839a1d01$var$RadioGroup);
|
|
155
|
+
});
|
|
160
156
|
|
|
161
157
|
|
|
162
158
|
//# sourceMappingURL=RadioGroup.cjs.map
|
package/dist/RadioGroup.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuCM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAA8D;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuCM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAA8D;AAMpG,MAAM,4CAAa,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IACxH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,YACZ,QAAQ,gBACR,YAAY,iBACZ,gBAAgB,mBAChB,aAAa,6BACb,qBAAqB,cACrB,OAAO,kBACP,cAAc,8BACd,mBAAmB,kBACnB,YAAY,EACZ,GAAG,YACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,qCAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOJ;kBACxB;2BACA;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;kCACE,gCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,gCAAC;wBACC,WAAW;;;;;;;;;;;;;0BAcR;yCAAC;wBAAW;kCACf,cAAA,gCAAC,CAAA,GAAA,qCAAU,EAAE,QAAQ;4BAAC,OAAO;gCAAC,GAAG,WAAW;sCAAE;8CAAM;4BAAY;sCAC7D;;;kCAGL,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;wBACb,aAAa;kCACZ;;;;;AAMb","sources":["packages/@react-spectrum/s2/src/RadioGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n RadioGroup as AriaRadioGroup,\n RadioGroupProps as AriaRadioGroupProps,\n ContextValue\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The Radios contained within the RadioGroup.\n */\n children?: ReactNode,\n /**\n * The size of the RadioGroup.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The axis the radio elements should align with.\n *\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * Whether the RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\nexport const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n description,\n errorMessage,\n children,\n isEmphasized,\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator = 'icon',\n size = 'M',\n orientation = 'vertical',\n UNSAFE_className = '',\n UNSAFE_style,\n ...groupProps\n } = props;\n\n return (\n <AriaRadioGroup\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style({\n ...field(),\n // Double the usual gap because of the internal padding within checkbox that spectrum has.\n '--field-gap': {\n type: 'rowGap',\n value: '[calc(var(--field-height) - 1lh)]'\n }\n }, getAllowedOverrides())({\n size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {({isDisabled, isInvalid}) => (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <div\n className={style({\n gridArea: 'input',\n display: 'flex',\n flexDirection: {\n orientation: {\n vertical: 'column',\n horizontal: 'row'\n }\n },\n flexWrap: 'wrap',\n // Spectrum uses a fixed spacing value for horizontal (column),\n // but the gap changes depending on t-shirt size in vertical (row).\n columnGap: 16,\n rowGap: '--field-gap'\n })({orientation})}>\n <FormContext.Provider value={{...formContext, size, isEmphasized}}>\n {children}\n </FormContext.Provider>\n </div>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}\n showErrorIcon>\n {errorMessage}\n </HelpText>\n </>\n )}\n </AriaRadioGroup>\n );\n});\n"],"names":[],"version":3,"file":"RadioGroup.cjs.map"}
|
package/dist/RadioGroup.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"ACkFoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBb;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAzBa;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAyBb","sources":["c8770acef16e2ce8","packages/@react-spectrum/s2/src/RadioGroup.tsx"],"sourcesContent":["@import \"759b4f838d0febfe\";\n@import \"c4a9a0d82a5b8e9f\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n RadioGroup as AriaRadioGroup,\n RadioGroupProps as AriaRadioGroupProps,\n ContextValue\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The Radios contained within the RadioGroup.\n */\n children?: ReactNode,\n /**\n * The size of the RadioGroup.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The axis the radio elements should align with.\n *\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * Whether the RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\nexport const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n description,\n errorMessage,\n children,\n isEmphasized,\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator = 'icon',\n size = 'M',\n orientation = 'vertical',\n UNSAFE_className = '',\n UNSAFE_style,\n ...groupProps\n } = props;\n\n return (\n <AriaRadioGroup\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style({\n ...field(),\n // Double the usual gap because of the internal padding within checkbox that spectrum has.\n '--field-gap': {\n type: 'rowGap',\n value: '[calc(var(--field-height) - 1lh)]'\n }\n }, getAllowedOverrides())({\n size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {({isDisabled, isInvalid}) => (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <div\n className={style({\n gridArea: 'input',\n display: 'flex',\n flexDirection: {\n orientation: {\n vertical: 'column',\n horizontal: 'row'\n }\n },\n flexWrap: 'wrap',\n // Spectrum uses a fixed spacing value for horizontal (column),\n // but the gap changes depending on t-shirt size in vertical (row).\n columnGap: 16,\n rowGap: '--field-gap'\n })({orientation})}>\n <FormContext.Provider value={{...formContext, size, isEmphasized}}>\n {children}\n </FormContext.Provider>\n </div>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}\n showErrorIcon>\n {errorMessage}\n </HelpText>\n </>\n )}\n </AriaRadioGroup>\n );\n});\n"],"names":[],"version":3,"file":"RadioGroup.css.map"}
|
package/dist/RadioGroup.mjs
CHANGED
|
@@ -4,7 +4,7 @@ import {FormContext as $9b916426527cebe7$export$c24727297075ec6a, useFormProps a
|
|
|
4
4
|
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
|
|
5
5
|
import {jsx as $fZVHt$jsx, jsxs as $fZVHt$jsxs, Fragment as $fZVHt$Fragment} from "react/jsx-runtime";
|
|
6
6
|
import {RadioGroup as $fZVHt$RadioGroup} from "react-aria-components";
|
|
7
|
-
import {createContext as $fZVHt$createContext,
|
|
7
|
+
import {createContext as $fZVHt$createContext, forwardRef as $fZVHt$forwardRef, useContext as $fZVHt$useContext} from "react";
|
|
8
8
|
import {useDOMRef as $fZVHt$useDOMRef} from "@react-spectrum/utils";
|
|
9
9
|
|
|
10
10
|
/*
|
|
@@ -25,7 +25,7 @@ import {useDOMRef as $fZVHt$useDOMRef} from "@react-spectrum/utils";
|
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
const $9a2afae66771094f$export$a79eda4ff50e30b6 = /*#__PURE__*/ (0, $fZVHt$createContext)(null);
|
|
28
|
-
|
|
28
|
+
const $9a2afae66771094f$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, $fZVHt$forwardRef)(function RadioGroup(props, ref) {
|
|
29
29
|
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $9a2afae66771094f$export$a79eda4ff50e30b6);
|
|
30
30
|
let formContext = (0, $fZVHt$useContext)((0, $9b916426527cebe7$export$c24727297075ec6a));
|
|
31
31
|
props = (0, $9b916426527cebe7$export$a6b5be5c6b451665)(props);
|
|
@@ -145,11 +145,7 @@ function $9a2afae66771094f$var$RadioGroup(props, ref) {
|
|
|
145
145
|
]
|
|
146
146
|
})
|
|
147
147
|
});
|
|
148
|
-
}
|
|
149
|
-
/**
|
|
150
|
-
* Radio groups allow users to select a single option from a list of mutually exclusive options.
|
|
151
|
-
* All possible options are exposed up front for users to compare.
|
|
152
|
-
*/ let $9a2afae66771094f$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, $fZVHt$forwardRef)($9a2afae66771094f$var$RadioGroup);
|
|
148
|
+
});
|
|
153
149
|
|
|
154
150
|
|
|
155
151
|
export {$9a2afae66771094f$export$a79eda4ff50e30b6 as RadioGroupContext, $9a2afae66771094f$export$a98f0dcb43a68a25 as RadioGroup};
|
package/dist/RadioGroup.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuCM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAA8D;
|
|
1
|
+
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAuCM,MAAM,0DAAoB,CAAA,GAAA,oBAAY,EAA8D;AAMpG,MAAM,4CAAa,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA2B;IACxH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,YACZ,QAAQ,gBACR,YAAY,iBACZ,gBAAgB,mBAChB,aAAa,6BACb,qBAAqB,cACrB,OAAO,kBACP,cAAc,8BACd,mBAAmB,kBACnB,YAAY,EACZ,GAAG,YACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,iBAAa;QACX,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOJ;kBACxB;2BACA;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;kCACE,gBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,gBAAC;wBACC,WAAW;;;;;;;;;;;;;0BAcR;yCAAC;wBAAW;kCACf,cAAA,gBAAC,CAAA,GAAA,yCAAU,EAAE,QAAQ;4BAAC,OAAO;gCAAC,GAAG,WAAW;sCAAE;8CAAM;4BAAY;sCAC7D;;;kCAGL,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;wBACb,aAAa;kCACZ;;;;;AAMb","sources":["packages/@react-spectrum/s2/src/RadioGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n RadioGroup as AriaRadioGroup,\n RadioGroupProps as AriaRadioGroupProps,\n ContextValue\n} from 'react-aria-components';\nimport {DOMRef, DOMRefValue, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel, HelpText} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The Radios contained within the RadioGroup.\n */\n children?: ReactNode,\n /**\n * The size of the RadioGroup.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The axis the radio elements should align with.\n *\n * @default 'vertical'\n */\n orientation?: Orientation,\n /**\n * Whether the RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\nexport const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nexport const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let domRef = useDOMRef(ref);\n\n let {\n label,\n description,\n errorMessage,\n children,\n isEmphasized,\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator = 'icon',\n size = 'M',\n orientation = 'vertical',\n UNSAFE_className = '',\n UNSAFE_style,\n ...groupProps\n } = props;\n\n return (\n <AriaRadioGroup\n {...groupProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style({\n ...field(),\n // Double the usual gap because of the internal padding within checkbox that spectrum has.\n '--field-gap': {\n type: 'rowGap',\n value: '[calc(var(--field-height) - 1lh)]'\n }\n }, getAllowedOverrides())({\n size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {({isDisabled, isInvalid}) => (\n <>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <div\n className={style({\n gridArea: 'input',\n display: 'flex',\n flexDirection: {\n orientation: {\n vertical: 'column',\n horizontal: 'row'\n }\n },\n flexWrap: 'wrap',\n // Spectrum uses a fixed spacing value for horizontal (column),\n // but the gap changes depending on t-shirt size in vertical (row).\n columnGap: 16,\n rowGap: '--field-gap'\n })({orientation})}>\n <FormContext.Provider value={{...formContext, size, isEmphasized}}>\n {children}\n </FormContext.Provider>\n </div>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}\n showErrorIcon>\n {errorMessage}\n </HelpText>\n </>\n )}\n </AriaRadioGroup>\n );\n});\n"],"names":[],"version":3,"file":"RadioGroup.mjs.map"}
|