@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250429
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion.cjs +4 -5
- package/dist/Accordion.cjs.map +1 -1
- package/dist/Accordion.css +2 -4
- package/dist/Accordion.css.map +1 -1
- package/dist/Accordion.mjs +4 -5
- package/dist/Accordion.mjs.map +1 -1
- package/dist/ActionBar.cjs +72 -63
- package/dist/ActionBar.cjs.map +1 -1
- package/dist/ActionBar.css +70 -63
- package/dist/ActionBar.css.map +1 -1
- package/dist/ActionBar.mjs +72 -63
- package/dist/ActionBar.mjs.map +1 -1
- package/dist/ActionButton.cjs +161 -160
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +174 -168
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +161 -160
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/ActionButtonGroup.cjs +17 -18
- package/dist/ActionButtonGroup.cjs.map +1 -1
- package/dist/ActionButtonGroup.css +9 -11
- package/dist/ActionButtonGroup.css.map +1 -1
- package/dist/ActionButtonGroup.mjs +17 -18
- package/dist/ActionButtonGroup.mjs.map +1 -1
- package/dist/AlertDialog.cjs +4 -4
- package/dist/AlertDialog.css +3 -5
- package/dist/AlertDialog.css.map +1 -1
- package/dist/AlertDialog.mjs +4 -4
- package/dist/Avatar.cjs +21 -21
- package/dist/Avatar.css +14 -16
- package/dist/Avatar.css.map +1 -1
- package/dist/Avatar.mjs +21 -21
- package/dist/AvatarGroup.cjs +131 -110
- package/dist/AvatarGroup.cjs.map +1 -1
- package/dist/AvatarGroup.css +43 -49
- package/dist/AvatarGroup.css.map +1 -1
- package/dist/AvatarGroup.mjs +131 -110
- package/dist/AvatarGroup.mjs.map +1 -1
- package/dist/Badge.cjs +150 -149
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +140 -134
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +150 -149
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +169 -154
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +119 -105
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +169 -154
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +321 -275
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +245 -215
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +321 -275
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +27 -25
- package/dist/ButtonGroup.cjs.map +1 -1
- package/dist/ButtonGroup.css +15 -17
- package/dist/ButtonGroup.css.map +1 -1
- package/dist/ButtonGroup.mjs +27 -25
- package/dist/ButtonGroup.mjs.map +1 -1
- package/dist/Card.cjs +316 -299
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +242 -215
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +316 -299
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.cjs +29 -30
- package/dist/CardView.cjs.map +1 -1
- package/dist/CardView.css +19 -19
- package/dist/CardView.mjs +29 -30
- package/dist/CardView.mjs.map +1 -1
- package/dist/CenterBaseline.cjs +2 -2
- package/dist/CenterBaseline.css +3 -5
- package/dist/CenterBaseline.css.map +1 -1
- package/dist/CenterBaseline.mjs +2 -2
- package/dist/Checkbox.cjs +114 -112
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +99 -93
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +114 -112
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +54 -54
- package/dist/CheckboxGroup.css +42 -42
- package/dist/CheckboxGroup.mjs +54 -54
- package/dist/ClearButton.cjs +19 -19
- package/dist/ClearButton.css +19 -21
- package/dist/ClearButton.css.map +1 -1
- package/dist/ClearButton.mjs +19 -19
- package/dist/CloseButton.cjs +64 -62
- package/dist/CloseButton.cjs.map +1 -1
- package/dist/CloseButton.css +48 -48
- package/dist/CloseButton.mjs +64 -62
- package/dist/CloseButton.mjs.map +1 -1
- package/dist/ColorArea.cjs +28 -28
- package/dist/ColorArea.css +17 -17
- package/dist/ColorArea.mjs +28 -28
- package/dist/ColorField.cjs +41 -41
- package/dist/ColorField.css +33 -33
- package/dist/ColorField.mjs +41 -41
- package/dist/ColorHandle.cjs +29 -29
- package/dist/ColorHandle.css +45 -45
- package/dist/ColorHandle.mjs +29 -29
- package/dist/ColorSlider.cjs +68 -64
- package/dist/ColorSlider.cjs.map +1 -1
- package/dist/ColorSlider.css +64 -58
- package/dist/ColorSlider.css.map +1 -1
- package/dist/ColorSlider.mjs +68 -64
- package/dist/ColorSlider.mjs.map +1 -1
- package/dist/ColorSwatch.cjs +44 -38
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +29 -31
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +44 -38
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +31 -32
- package/dist/ColorSwatchPicker.cjs.map +1 -1
- package/dist/ColorSwatchPicker.css +48 -48
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +31 -32
- package/dist/ColorSwatchPicker.mjs.map +1 -1
- package/dist/ColorWheel.cjs +28 -28
- package/dist/ColorWheel.css +18 -18
- package/dist/ColorWheel.mjs +28 -28
- package/dist/ComboBox.cjs +108 -108
- package/dist/ComboBox.css +101 -101
- package/dist/ComboBox.mjs +108 -108
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +58 -44
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/CustomDialog.cjs +38 -38
- package/dist/CustomDialog.css +26 -26
- package/dist/CustomDialog.mjs +38 -38
- package/dist/Dialog.cjs +18 -18
- package/dist/Dialog.css +86 -72
- package/dist/Dialog.css.map +1 -1
- package/dist/Dialog.mjs +18 -18
- package/dist/Disclosure.cjs +139 -133
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +144 -120
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +139 -133
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs +47 -47
- package/dist/Divider.css +26 -26
- package/dist/Divider.mjs +47 -47
- package/dist/DropZone.cjs +68 -64
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +66 -60
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +68 -64
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +192 -186
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +167 -159
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +192 -186
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +11 -12
- package/dist/Form.cjs.map +1 -1
- package/dist/Form.css +9 -11
- package/dist/Form.css.map +1 -1
- package/dist/Form.mjs +11 -12
- package/dist/Form.mjs.map +1 -1
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +94 -80
- package/dist/FullscreenDialog.css.map +1 -1
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +185 -160
- package/dist/IllustratedMessage.cjs.map +1 -1
- package/dist/IllustratedMessage.css +93 -91
- package/dist/IllustratedMessage.css.map +1 -1
- package/dist/IllustratedMessage.mjs +185 -160
- package/dist/IllustratedMessage.mjs.map +1 -1
- package/dist/Image.cjs +14 -14
- package/dist/Image.css +14 -16
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +14 -14
- package/dist/InlineAlert.cjs +130 -122
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +109 -95
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +130 -122
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Link.cjs +57 -47
- package/dist/Link.cjs.map +1 -1
- package/dist/Link.css +52 -44
- package/dist/Link.css.map +1 -1
- package/dist/Link.mjs +57 -47
- package/dist/Link.mjs.map +1 -1
- package/dist/Menu.cjs +353 -325
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +189 -189
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +353 -325
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +116 -114
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +106 -104
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +116 -114
- package/dist/Meter.mjs.map +1 -1
- package/dist/Modal.cjs +62 -59
- package/dist/Modal.cjs.map +1 -1
- package/dist/Modal.css +52 -51
- package/dist/Modal.css.map +1 -1
- package/dist/Modal.mjs +62 -59
- package/dist/Modal.mjs.map +1 -1
- package/dist/NotificationBadge.cjs +66 -62
- package/dist/NotificationBadge.cjs.map +1 -1
- package/dist/NotificationBadge.css +78 -72
- package/dist/NotificationBadge.css.map +1 -1
- package/dist/NotificationBadge.mjs +66 -62
- package/dist/NotificationBadge.mjs.map +1 -1
- package/dist/NumberField.cjs +133 -133
- package/dist/NumberField.css +120 -120
- package/dist/NumberField.mjs +133 -133
- package/dist/Picker.cjs +209 -207
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +179 -173
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +209 -207
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +124 -93
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +67 -83
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +124 -93
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs +132 -130
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +119 -117
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +132 -130
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/ProgressCircle.cjs +32 -32
- package/dist/ProgressCircle.css +20 -20
- package/dist/ProgressCircle.css.map +1 -1
- package/dist/ProgressCircle.mjs +32 -32
- package/dist/Provider.cjs +11 -11
- package/dist/Provider.css +9 -11
- package/dist/Provider.css.map +1 -1
- package/dist/Provider.mjs +11 -11
- package/dist/Radio.cjs +101 -99
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +101 -95
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +101 -99
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +52 -52
- package/dist/RadioGroup.css +42 -42
- package/dist/RadioGroup.mjs +52 -52
- package/dist/SearchField.cjs +52 -52
- package/dist/SearchField.css +54 -54
- package/dist/SearchField.mjs +52 -52
- package/dist/SegmentedControl.cjs +123 -119
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +110 -104
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +123 -119
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +251 -248
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +166 -157
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +251 -248
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +74 -70
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css +70 -64
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs +74 -70
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/Switch.cjs +110 -108
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +86 -80
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +110 -108
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +334 -329
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +193 -193
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +334 -329
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +153 -149
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +102 -96
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +153 -149
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +131 -129
- package/dist/TabsPicker.cjs.map +1 -1
- package/dist/TabsPicker.css +132 -126
- package/dist/TabsPicker.css.map +1 -1
- package/dist/TabsPicker.mjs +131 -129
- package/dist/TabsPicker.mjs.map +1 -1
- package/dist/TagGroup.cjs +197 -193
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +164 -158
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +197 -193
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +67 -65
- package/dist/TextField.cjs.map +1 -1
- package/dist/TextField.css +71 -65
- package/dist/TextField.css.map +1 -1
- package/dist/TextField.mjs +67 -65
- package/dist/TextField.mjs.map +1 -1
- package/dist/Toast.cjs +138 -136
- package/dist/Toast.cjs.map +1 -1
- package/dist/Toast.css +117 -111
- package/dist/Toast.css.map +1 -1
- package/dist/Toast.mjs +138 -136
- package/dist/Toast.mjs.map +1 -1
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -14
- package/dist/ToggleButton.css.map +1 -1
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +99 -72
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +87 -87
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +99 -72
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +169 -157
- package/dist/TreeView.cjs.map +1 -1
- package/dist/TreeView.css +155 -153
- package/dist/TreeView.css.map +1 -1
- package/dist/TreeView.mjs +169 -157
- package/dist/TreeView.mjs.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/icons/Skeleton.cjs +3 -3
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +8 -10
- package/icons/Skeleton.css.map +1 -1
- package/icons/Skeleton.mjs +3 -3
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +22 -22
- package/src/Card.tsx +3 -3
- package/src/Disclosure.tsx +3 -3
- package/src/TableView.tsx +1 -4
- package/src/style-utils.ts +0 -2
- package/style/__tests__/style-macro.test.js +323 -27
- package/style/dist/properties.cjs +4 -0
- package/style/dist/properties.cjs.map +1 -0
- package/style/dist/properties.mjs +6 -0
- package/style/dist/properties.mjs.map +1 -0
- package/style/dist/spectrum-theme.cjs +123 -124
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +124 -125
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/style-macro.cjs +244 -263
- package/style/dist/style-macro.cjs.map +1 -1
- package/style/dist/style-macro.mjs +240 -259
- package/style/dist/style-macro.mjs.map +1 -1
- package/style/dist/types.d.ts +84 -80
- package/style/dist/types.d.ts.map +1 -1
- package/style/properties.json +2422 -0
- package/style/spectrum-theme.ts +101 -110
- package/style/style-macro.ts +319 -220
- package/style/types.ts +8 -4
package/dist/StatusLight.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA
|
|
1
|
+
{"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}
|
package/dist/StatusLight.mjs
CHANGED
|
@@ -28,87 +28,91 @@ import {useDOMRef as $2PVgW$useDOMRef} from "@react-spectrum/utils";
|
|
|
28
28
|
|
|
29
29
|
const $cd71613dba8ee178$export$d8f8c0b091d8cb9b = /*#__PURE__*/ (0, $2PVgW$createContext)(null);
|
|
30
30
|
const $cd71613dba8ee178$var$wrapper = function anonymous(props, overrides) {
|
|
31
|
-
let rules = "
|
|
32
|
-
let
|
|
33
|
-
|
|
34
|
-
let
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
rules += '
|
|
39
|
-
rules += '
|
|
40
|
-
rules += '
|
|
41
|
-
rules += '
|
|
42
|
-
|
|
43
|
-
rules += '
|
|
44
|
-
rules += '
|
|
45
|
-
rules += '
|
|
46
|
-
rules += '
|
|
47
|
-
rules += '
|
|
48
|
-
rules += '
|
|
49
|
-
rules += '
|
|
50
|
-
rules += '
|
|
31
|
+
let rules = " ";
|
|
32
|
+
let width = false;
|
|
33
|
+
let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
|
|
34
|
+
for (let p of matches){
|
|
35
|
+
if (p[1] === "f") width = true;
|
|
36
|
+
rules += p[0];
|
|
37
|
+
}
|
|
38
|
+
rules += ' ma';
|
|
39
|
+
rules += ' pc';
|
|
40
|
+
rules += ' pad';
|
|
41
|
+
rules += ' kb';
|
|
42
|
+
rules += ' kac';
|
|
43
|
+
rules += ' Fb';
|
|
44
|
+
if (!width) rules += ' fe';
|
|
45
|
+
rules += ' bh';
|
|
46
|
+
rules += ' bdf';
|
|
47
|
+
rules += ' beg';
|
|
48
|
+
rules += ' bfa';
|
|
49
|
+
rules += ' bgb';
|
|
50
|
+
rules += ' bhd';
|
|
51
|
+
rules += ' bje';
|
|
52
|
+
rules += ' bic';
|
|
51
53
|
if (props.size === "XL") {
|
|
52
|
-
rules += '
|
|
53
|
-
rules += '
|
|
54
|
+
rules += ' ah';
|
|
55
|
+
rules += ' aac';
|
|
54
56
|
} else if (props.size === "L") {
|
|
55
|
-
rules += '
|
|
56
|
-
rules += '
|
|
57
|
+
rules += ' ae';
|
|
58
|
+
rules += ' aad';
|
|
57
59
|
} else if (props.size === "S") {
|
|
58
|
-
rules += '
|
|
59
|
-
rules += '
|
|
60
|
+
rules += ' af';
|
|
61
|
+
rules += ' aag';
|
|
60
62
|
} else if (props.size === "XS") {
|
|
61
|
-
rules += '
|
|
62
|
-
rules += '
|
|
63
|
+
rules += ' ai';
|
|
64
|
+
rules += ' aaj';
|
|
63
65
|
} else {
|
|
64
|
-
rules += '
|
|
65
|
-
rules += '
|
|
66
|
+
rules += ' aa';
|
|
67
|
+
rules += ' aab';
|
|
66
68
|
}
|
|
67
|
-
rules += '
|
|
68
|
-
rules += '
|
|
69
|
-
rules += '
|
|
70
|
-
|
|
69
|
+
rules += ' Da';
|
|
70
|
+
rules += ' Ea';
|
|
71
|
+
rules += ' Ca';
|
|
72
|
+
rules += ' gb';
|
|
73
|
+
rules += ' gca';
|
|
74
|
+
if (props.variant === "neutral") rules += ' dw';
|
|
71
75
|
else {
|
|
72
|
-
if (props.isPressed) rules += '
|
|
73
|
-
else if (props.isFocusVisible) rules += '
|
|
74
|
-
else if (props.isHovered) rules += '
|
|
75
|
-
else rules += '
|
|
76
|
+
if (props.isPressed) rules += ' db';
|
|
77
|
+
else if (props.isFocusVisible) rules += ' db';
|
|
78
|
+
else if (props.isHovered) rules += ' db';
|
|
79
|
+
else rules += ' da';
|
|
76
80
|
}
|
|
77
|
-
rules += '
|
|
81
|
+
rules += ' _Ga';
|
|
78
82
|
return rules;
|
|
79
83
|
};
|
|
80
84
|
const $cd71613dba8ee178$var$light = function anonymous(props) {
|
|
81
|
-
let rules = "
|
|
82
|
-
if (props.size === "XL") rules += '
|
|
83
|
-
else if (props.size === "L") rules += '
|
|
84
|
-
else if (props.size === "M") rules += '
|
|
85
|
-
else if (props.size === "S") rules += '
|
|
86
|
-
if (props.size === "XL") rules += '
|
|
87
|
-
else if (props.size === "L") rules += '
|
|
88
|
-
else if (props.size === "M") rules += '
|
|
89
|
-
else if (props.size === "S") rules += '
|
|
90
|
-
if (props.isSkeleton) rules += '
|
|
91
|
-
else if (props.variant === "silver") rules += '
|
|
92
|
-
else if (props.variant === "brown") rules += '
|
|
93
|
-
else if (props.variant === "cinnamon") rules += '
|
|
94
|
-
else if (props.variant === "turquoise") rules += '
|
|
95
|
-
else if (props.variant === "pink") rules += '
|
|
96
|
-
else if (props.variant === "yellow") rules += '
|
|
97
|
-
else if (props.variant === "seafoam") rules += '
|
|
98
|
-
else if (props.variant === "indigo") rules += '
|
|
99
|
-
else if (props.variant === "magenta") rules += '
|
|
100
|
-
else if (props.variant === "purple") rules += '
|
|
101
|
-
else if (props.variant === "fuchsia") rules += '
|
|
102
|
-
else if (props.variant === "cyan") rules += '
|
|
103
|
-
else if (props.variant === "chartreuse") rules += '
|
|
104
|
-
else if (props.variant === "celery") rules += '
|
|
105
|
-
else if (props.variant === "negative") rules += '
|
|
106
|
-
else if (props.variant === "notice") rules += '
|
|
107
|
-
else if (props.variant === "positive") rules += '
|
|
108
|
-
else if (props.variant === "neutral") rules += '
|
|
109
|
-
else if (props.variant === "informative") rules += '
|
|
110
|
-
rules += '
|
|
111
|
-
rules += '
|
|
85
|
+
let rules = " ";
|
|
86
|
+
if (props.size === "XL") rules += ' fm';
|
|
87
|
+
else if (props.size === "L") rules += ' fs';
|
|
88
|
+
else if (props.size === "M") rules += ' fD';
|
|
89
|
+
else if (props.size === "S") rules += ' fC';
|
|
90
|
+
if (props.size === "XL") rules += ' ei';
|
|
91
|
+
else if (props.size === "L") rules += ' eq';
|
|
92
|
+
else if (props.size === "M") rules += ' ep';
|
|
93
|
+
else if (props.size === "S") rules += ' ej';
|
|
94
|
+
if (props.isSkeleton) rules += ' Ov';
|
|
95
|
+
else if (props.variant === "silver") rules += ' Oo';
|
|
96
|
+
else if (props.variant === "brown") rules += ' Oq';
|
|
97
|
+
else if (props.variant === "cinnamon") rules += ' Os';
|
|
98
|
+
else if (props.variant === "turquoise") rules += ' Ol';
|
|
99
|
+
else if (props.variant === "pink") rules += ' Ow';
|
|
100
|
+
else if (props.variant === "yellow") rules += ' Ou';
|
|
101
|
+
else if (props.variant === "seafoam") rules += ' Om';
|
|
102
|
+
else if (props.variant === "indigo") rules += ' On';
|
|
103
|
+
else if (props.variant === "magenta") rules += ' Ox';
|
|
104
|
+
else if (props.variant === "purple") rules += ' Or';
|
|
105
|
+
else if (props.variant === "fuchsia") rules += ' Ot';
|
|
106
|
+
else if (props.variant === "cyan") rules += ' OA';
|
|
107
|
+
else if (props.variant === "chartreuse") rules += ' Op';
|
|
108
|
+
else if (props.variant === "celery") rules += ' OB';
|
|
109
|
+
else if (props.variant === "negative") rules += ' Ob';
|
|
110
|
+
else if (props.variant === "notice") rules += ' Od';
|
|
111
|
+
else if (props.variant === "positive") rules += ' Oe';
|
|
112
|
+
else if (props.variant === "neutral") rules += ' Oc';
|
|
113
|
+
else if (props.variant === "informative") rules += ' Of';
|
|
114
|
+
rules += ' _od';
|
|
115
|
+
rules += ' _hd';
|
|
112
116
|
return rules;
|
|
113
117
|
};
|
|
114
118
|
const $cd71613dba8ee178$export$5f84c37a31c6e41c = /*#__PURE__*/ (0, $2PVgW$forwardRef)(function StatusLight(props, ref) {
|
package/dist/StatusLight.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,yCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChE,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,KAAM,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACzF,QAAQ,IAAI,CAAC;IAGf,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gBAAC,CAAA,GAAA,yCAAa;0BACZ,cAAA,gBAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gBAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gBAAC,CAAA,GAAA,yCAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n /**\n * The variant changes the color of the status light.\n * When status lights have a semantic meaning, they should use the variant for semantic colors.\n */\n variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n /**\n * The size of the StatusLight.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n /**\n * The content to display as the label.\n */\n children?: ReactNode,\n /**\n * An accessibility role for the status light. Should be set when the status\n * can change at runtime, and no more than one status light will update simultaneously.\n * For cases where multiple statuses can change at the same time, use a Toast instead.\n */\n role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n display: 'flex',\n gap: 'text-to-visual',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n color: {\n default: 'neutral',\n variant: {\n neutral: 'gray-600'\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n size: {\n size: {\n S: 8,\n M: 10,\n L: 12,\n XL: 14\n }\n },\n fill: {\n variant: {\n informative: 'informative',\n neutral: 'neutral',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n celery: 'celery',\n chartreuse: 'chartreuse',\n cyan: 'cyan',\n fuchsia: 'fuchsia',\n purple: 'purple',\n magenta: 'magenta',\n indigo: 'indigo',\n seafoam: 'seafoam',\n yellow: 'yellow',\n pink: 'pink',\n turquoise: 'turquoise',\n cinnamon: 'cinnamon',\n brown: 'brown',\n silver: 'silver'\n },\n isSkeleton: 'gray-200'\n },\n overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n let domRef = useDOMRef(ref);\n let isSkeleton = useIsSkeleton();\n\n if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n console.warn('If no children are provided, an aria-label must be specified');\n }\n\n if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n console.warn('A labelled StatusLight must have a role.');\n }\n\n return (\n <div\n {...filterDOMProps(props, {labelable: !!role})}\n ref={domRef}\n role={role}\n style={UNSAFE_style}\n className={UNSAFE_className + wrapper({size, variant}, styles)}>\n <CenterBaseline>\n <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n </svg>\n </CenterBaseline>\n <Text>{children}</Text>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"StatusLight.mjs.map"}
|
package/dist/Switch.cjs
CHANGED
|
@@ -35,146 +35,148 @@ $parcel$export(module.exports, "Switch", () => $0bb99ae32af8596c$export$b5d5cf89
|
|
|
35
35
|
|
|
36
36
|
const $0bb99ae32af8596c$export$8699e3b644d5a28a = /*#__PURE__*/ (0, $bxoLC$react.createContext)(null);
|
|
37
37
|
const $0bb99ae32af8596c$var$wrapper = function anonymous(props, overrides) {
|
|
38
|
-
let rules = "
|
|
39
|
-
let
|
|
40
|
-
|
|
41
|
-
let
|
|
42
|
-
let $__b = false;
|
|
38
|
+
let rules = " ";
|
|
39
|
+
let width = false;
|
|
40
|
+
let gridColumnStart = false;
|
|
41
|
+
let matches = (overrides || '').matchAll(/(?:^|\s)(j|l|h|i|_H|_r|M|__f|_X|_M|L|N|_f|_d|K|__B|H|G|J|I|f|u|_l)[^\s]+/g);
|
|
43
42
|
for (let p of matches){
|
|
44
|
-
if (
|
|
45
|
-
if (
|
|
43
|
+
if (p[1] === "f") width = true;
|
|
44
|
+
if (p[1] === "L") gridColumnStart = true;
|
|
45
|
+
rules += p[0];
|
|
46
46
|
}
|
|
47
|
-
rules += '
|
|
48
|
-
rules += '
|
|
49
|
-
rules += '
|
|
50
|
-
if (
|
|
51
|
-
rules += '
|
|
52
|
-
rules += '
|
|
53
|
-
rules += '
|
|
54
|
-
rules += '
|
|
55
|
-
rules += '
|
|
56
|
-
rules += '
|
|
57
|
-
rules += '
|
|
58
|
-
rules += '
|
|
47
|
+
rules += ' ma';
|
|
48
|
+
rules += ' kh';
|
|
49
|
+
rules += ' Fb';
|
|
50
|
+
if (!width) rules += ' fe';
|
|
51
|
+
rules += ' bh';
|
|
52
|
+
rules += ' bdf';
|
|
53
|
+
rules += ' beg';
|
|
54
|
+
rules += ' bfa';
|
|
55
|
+
rules += ' bgb';
|
|
56
|
+
rules += ' bhd';
|
|
57
|
+
rules += ' bje';
|
|
58
|
+
rules += ' bic';
|
|
59
59
|
if (props.size === "XL") {
|
|
60
|
-
rules += '
|
|
61
|
-
rules += '
|
|
60
|
+
rules += ' ah';
|
|
61
|
+
rules += ' aac';
|
|
62
62
|
} else if (props.size === "L") {
|
|
63
|
-
rules += '
|
|
64
|
-
rules += '
|
|
63
|
+
rules += ' ae';
|
|
64
|
+
rules += ' aad';
|
|
65
65
|
} else if (props.size === "S") {
|
|
66
|
-
rules += '
|
|
67
|
-
rules += '
|
|
66
|
+
rules += ' af';
|
|
67
|
+
rules += ' aag';
|
|
68
68
|
} else if (props.size === "XS") {
|
|
69
|
-
rules += '
|
|
70
|
-
rules += '
|
|
69
|
+
rules += ' ai';
|
|
70
|
+
rules += ' aaj';
|
|
71
71
|
} else {
|
|
72
|
-
rules += '
|
|
73
|
-
rules += '
|
|
72
|
+
rules += ' aa';
|
|
73
|
+
rules += ' aab';
|
|
74
74
|
}
|
|
75
|
-
rules += '
|
|
76
|
-
rules += '
|
|
77
|
-
rules += '
|
|
75
|
+
rules += ' Da';
|
|
76
|
+
rules += ' Ea';
|
|
77
|
+
rules += ' Ca';
|
|
78
|
+
rules += ' gb';
|
|
79
|
+
rules += ' gca';
|
|
78
80
|
if (props.isDisabled) {
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
81
|
+
rules += ' dc';
|
|
82
|
+
rules += ' dbe';
|
|
81
83
|
} else {
|
|
82
|
-
if (props.isPressed) rules += '
|
|
83
|
-
else if (props.isFocusVisible) rules += '
|
|
84
|
-
else if (props.isHovered) rules += '
|
|
85
|
-
else rules += '
|
|
84
|
+
if (props.isPressed) rules += ' db';
|
|
85
|
+
else if (props.isFocusVisible) rules += ' db';
|
|
86
|
+
else if (props.isHovered) rules += ' db';
|
|
87
|
+
else rules += ' da';
|
|
86
88
|
}
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
-
if (
|
|
91
|
-
if (
|
|
89
|
+
rules += ' _ib';
|
|
90
|
+
rules += ' _ka';
|
|
91
|
+
rules += ' _ea';
|
|
92
|
+
if (props.isInForm) {
|
|
93
|
+
if (!gridColumnStart) rules += ' LhJUGr';
|
|
92
94
|
}
|
|
93
|
-
rules += '
|
|
95
|
+
rules += ' _Ga';
|
|
94
96
|
return rules;
|
|
95
97
|
};
|
|
96
98
|
const $0bb99ae32af8596c$var$track = function anonymous(props) {
|
|
97
|
-
let rules = "
|
|
98
|
-
if (props.isFocusVisible) rules += '
|
|
99
|
-
else rules += '
|
|
100
|
-
rules += '
|
|
101
|
-
rules += '
|
|
102
|
-
rules += '
|
|
103
|
-
rules += '
|
|
104
|
-
rules += '
|
|
105
|
-
rules += '
|
|
106
|
-
rules += ' _yf';
|
|
107
|
-
rules += ' _zf';
|
|
108
|
-
rules += ' -rcxrzo_l--unb2ci';
|
|
109
|
-
if (props.size === "XL") rules += ' -_14pdrm5_k-g';
|
|
110
|
-
else if (props.size === "L") rules += ' -_14pdrm5_k-m';
|
|
111
|
-
else if (props.size === "S") rules += ' -_14pdrm5_k-l';
|
|
112
|
-
else rules += ' -_14pdrm5_k-k';
|
|
113
|
-
rules += ' l-rcxrzo';
|
|
114
|
-
rules += ' k-14pdrm5';
|
|
115
|
-
rules += ' __oa';
|
|
116
|
-
rules += ' uc';
|
|
117
|
-
rules += ' vc';
|
|
118
|
-
rules += ' sc';
|
|
119
|
-
rules += ' tc';
|
|
99
|
+
let rules = " ";
|
|
100
|
+
if (props.isFocusVisible) rules += ' tb';
|
|
101
|
+
else rules += ' ta';
|
|
102
|
+
rules += ' Bb';
|
|
103
|
+
rules += ' Bba';
|
|
104
|
+
rules += ' _ga';
|
|
105
|
+
rules += ' _ya';
|
|
106
|
+
rules += ' za';
|
|
107
|
+
rules += ' xa';
|
|
120
108
|
rules += ' wa';
|
|
121
|
-
rules += '
|
|
122
|
-
rules += '
|
|
123
|
-
rules += '
|
|
124
|
-
rules += '
|
|
125
|
-
if (props.
|
|
109
|
+
rules += ' ya';
|
|
110
|
+
rules += ' -ERv7Xb-fmDIzbc';
|
|
111
|
+
if (props.size === "XL") rules += ' -LsrJQc-ea';
|
|
112
|
+
else if (props.size === "L") rules += ' -LsrJQc-eh';
|
|
113
|
+
else if (props.size === "S") rules += ' -LsrJQc-ei';
|
|
114
|
+
else rules += ' -LsrJQc-eg';
|
|
115
|
+
rules += ' fAkyXj';
|
|
116
|
+
rules += ' epk5ROc';
|
|
117
|
+
rules += ' _qa';
|
|
118
|
+
rules += ' _nb';
|
|
119
|
+
rules += ' _ma';
|
|
120
|
+
rules += ' _ta';
|
|
121
|
+
rules += ' _sa';
|
|
122
|
+
rules += ' Ra';
|
|
123
|
+
rules += ' _ia';
|
|
124
|
+
rules += ' _ka';
|
|
125
|
+
rules += ' _ea';
|
|
126
|
+
rules += ' _0a';
|
|
127
|
+
if (props.isSelected) rules += ' qe';
|
|
126
128
|
else if (props.isDisabled) {
|
|
127
|
-
rules += '
|
|
128
|
-
rules += '
|
|
129
|
+
rules += ' qg';
|
|
130
|
+
rules += ' qbd';
|
|
129
131
|
} else {
|
|
130
|
-
rules += '
|
|
131
|
-
if (props.
|
|
132
|
-
else if (props.
|
|
133
|
-
else
|
|
134
|
-
|
|
132
|
+
if (props.isPressed) rules += ' qa';
|
|
133
|
+
else if (props.isFocusVisible) rules += ' qa';
|
|
134
|
+
else if (props.isHovered) rules += ' qa';
|
|
135
|
+
else rules += ' qh';
|
|
136
|
+
rules += ' qbc';
|
|
135
137
|
}
|
|
136
138
|
if (props.isSelected) {
|
|
137
139
|
if (props.isDisabled) {
|
|
138
|
-
rules += '
|
|
139
|
-
rules += '
|
|
140
|
+
rules += ' cE';
|
|
141
|
+
rules += ' cbo';
|
|
140
142
|
} else {
|
|
141
|
-
rules += ' ba_____M';
|
|
142
143
|
if (props.isEmphasized) {
|
|
143
|
-
if (props.isPressed) rules += '
|
|
144
|
-
else if (props.isFocusVisible) rules += '
|
|
145
|
-
else if (props.isHovered) rules += '
|
|
146
|
-
else rules += '
|
|
144
|
+
if (props.isPressed) rules += ' cw';
|
|
145
|
+
else if (props.isFocusVisible) rules += ' cw';
|
|
146
|
+
else if (props.isHovered) rules += ' cw';
|
|
147
|
+
else rules += ' cK';
|
|
147
148
|
} else {
|
|
148
|
-
if (props.isPressed) rules += '
|
|
149
|
-
else if (props.isFocusVisible) rules += '
|
|
150
|
-
else if (props.isHovered) rules += '
|
|
151
|
-
else rules += '
|
|
149
|
+
if (props.isPressed) rules += ' cc';
|
|
150
|
+
else if (props.isFocusVisible) rules += ' cc';
|
|
151
|
+
else if (props.isHovered) rules += ' cc';
|
|
152
|
+
else rules += ' cm';
|
|
152
153
|
}
|
|
154
|
+
rules += ' cbg';
|
|
153
155
|
}
|
|
154
|
-
} else rules += '
|
|
156
|
+
} else rules += ' cj';
|
|
155
157
|
return rules;
|
|
156
158
|
};
|
|
157
159
|
const $0bb99ae32af8596c$var$handle = function anonymous(props) {
|
|
158
|
-
let rules = "
|
|
159
|
-
rules += '
|
|
160
|
-
rules += '
|
|
161
|
-
rules += '
|
|
162
|
-
rules += '
|
|
163
|
-
rules += '
|
|
164
|
-
rules += '
|
|
165
|
-
if (props.isSelected) rules += '
|
|
160
|
+
let rules = " ";
|
|
161
|
+
rules += ' ef';
|
|
162
|
+
rules += ' _Oa';
|
|
163
|
+
rules += ' za';
|
|
164
|
+
rules += ' xa';
|
|
165
|
+
rules += ' wa';
|
|
166
|
+
rules += ' ya';
|
|
167
|
+
if (props.isSelected) rules += ' cj';
|
|
166
168
|
else if (props.isDisabled) {
|
|
167
|
-
rules += '
|
|
168
|
-
rules += '
|
|
169
|
+
rules += ' cE';
|
|
170
|
+
rules += ' cbo';
|
|
169
171
|
} else {
|
|
170
|
-
if (props.isPressed) rules += '
|
|
171
|
-
else if (props.isFocusVisible) rules += '
|
|
172
|
-
else if (props.isHovered) rules += '
|
|
173
|
-
else rules += '
|
|
172
|
+
if (props.isPressed) rules += ' cc';
|
|
173
|
+
else if (props.isFocusVisible) rules += ' cc';
|
|
174
|
+
else if (props.isHovered) rules += ' cc';
|
|
175
|
+
else rules += ' cm';
|
|
174
176
|
}
|
|
175
|
-
rules += '
|
|
176
|
-
rules += '
|
|
177
|
-
rules += '
|
|
177
|
+
rules += ' _ia';
|
|
178
|
+
rules += ' _ka';
|
|
179
|
+
rules += ' _ea';
|
|
178
180
|
return rules;
|
|
179
181
|
};
|
|
180
182
|
// Use an inline style to calculate the transform so we can combine it with the press scale.
|
package/dist/Switch.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAqCM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAA2E;AAEpH,MAAM
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAqCM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAA2E;AAEpH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,EAAoB,GAAM,CAAA;QAC3D,wHAAwH;QACxH,0GAA0G;QAC1G,8GAA8G;QAC9G,sHAAsH;QACtH,uHAAuH;QACvH,mDAAmD;QACnD,EAAE;QACF,qDAAqD;QACrD,EAAE;QACF,uFAAuF;QACvF,EAAE;QACF,6DAA6D;QAC7D,8DAA8D;QAC9D,EAAE;QACF,+FAA+F;QAC/F,EAAE;QACF,4CAA4C;QAC5C,mDAAmD;QACnD,WAAW,aAEP,wHACA;IACN,CAAA;AAMO,MAAM,4CAAS,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,OAAO,KAAkB,EAAE,GAAmC;IACpH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,qBACE,gCAAC,CAAA,GAAA,iCAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACrH,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,WAAW,4BAAM;gCACf,GAAG,WAAW;gCACd,MAAM,MAAM,IAAI,IAAI;gCACpB,cAAc,MAAM,YAAY;4BAClC;sCACA,cAAA,gCAAC;gCACC,KAAK;gCACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW,sCAAgB;gCAC7C,WAAW,6BAAO;;;;oBAGvB;;;;AAKX","sources":["packages/@react-spectrum/s2/src/Switch.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Switch as AriaSwitch,\n SwitchProps as AriaSwitchProps,\n ContextValue,\n SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n /**\n * The size of the Switch.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Switch should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n width: 'fit',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst track = style<RenderProps>({\n ...focusRing(),\n borderRadius: 'full',\n '--trackWidth': {\n type: 'width',\n value: fontRelative(26)\n },\n '--trackHeight': {\n type: 'height',\n value: 'control-sm'\n },\n width: '--trackWidth',\n height: '--trackHeight',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n forcedColorAdjust: 'none',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n },\n isSelected: 'transparent'\n },\n backgroundColor: {\n default: 'gray-25',\n isSelected: {\n default: 'neutral',\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight',\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n }\n});\n\nconst handle = style<RenderProps>({\n height: 'full',\n aspectRatio: 'square',\n borderRadius: 'full',\n backgroundColor: {\n default: 'neutral',\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n },\n isSelected: 'gray-25'\n },\n transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected}: SwitchRenderProps) => ({\n // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n // the desired effect. Given the following formula:\n //\n // scale = perspective / (perspective - translateZ)\n //\n // and desired scale factors (accounting for the 2px border on each side of the track):\n //\n // defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n // selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n //\n // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n //\n // defaultPerspective = trackHeight - 8px\n // selectedPerspective = 2 * (trackHeight - 6px)\n transform: isSelected\n // The selected state also translates the X position to the end of the track (minus the borders).\n ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nexport const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let handleRef = useRef(null);\n let isInForm = !!useContext(FormContext);\n props = useFormProps(props);\n return (\n <AriaSwitch\n {...props}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n className={track({\n ...renderProps,\n size: props.size || 'M',\n isEmphasized: props.isEmphasized\n })}>\n <div\n ref={handleRef}\n style={pressScale(handleRef, transformStyle)(renderProps)}\n className={handle(renderProps)} />\n </div>\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaSwitch>\n );\n});\n"],"names":[],"version":3,"file":"Switch.cjs.map"}
|