@react-spectrum/s2 3.0.0-nightly-dcc0752f8-241031 → 3.0.0-nightly-e37ad74f5-241101
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/ActionButton.cjs +1 -1
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +3 -3
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/DropZone.cjs +10 -3
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +12 -0
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +10 -3
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Radio.cjs +2 -2
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +8 -4
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +2 -2
- package/dist/Radio.mjs.map +1 -1
- package/dist/StatusLight.cjs +2 -0
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css +8 -0
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs +2 -0
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/types.d.ts +6 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/ActionButton.tsx +2 -2
- package/src/DropZone.tsx +21 -5
- package/src/Radio.tsx +3 -1
- package/src/StatusLight.tsx +2 -1
- package/style/dist/spectrum-theme.cjs +1 -0
- package/style/dist/spectrum-theme.cjs.map +1 -1
package/dist/ActionButton.cjs
CHANGED
|
@@ -251,7 +251,7 @@ function $6e265ff388155b91$var$ActionButton(props, ref) {
|
|
|
251
251
|
}
|
|
252
252
|
]
|
|
253
253
|
],
|
|
254
|
-
children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $9ZEgK$reactjsxruntime.jsx)((0, $
|
|
254
|
+
children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $9ZEgK$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
|
|
255
255
|
children: props.children
|
|
256
256
|
}) : props.children
|
|
257
257
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA0CM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2HN,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAyE;AAExH,SAAS,mCAAa,KAAwB,EAAE,GAAoC;IAClF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAE9D,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;gBACnE,aAAa,MAAM,WAAW;gBAC9B,MAAM,MAAM,IAAI,IAAI;gBACpB,SAAS,MAAM,OAAO;YACxB,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA0CM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2HN,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAyE;AAExH,SAAS,mCAAa,KAAwB,EAAE,GAAoC;IAClF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAE9D,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;gBACnE,aAAa,MAAM,WAAW;gBAC9B,MAAM,MAAM,IAAI,IAAI;gBACpB,SAAS,MAAM,OAAO;YACxB,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F;AAEA;;;CAGC,GACD,IAAI,0DAAgB,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ActionButton.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 {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /**\n * The size of the ActionButton.\n *\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n staticColor?: 'black' | 'white',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /** Whether the ActionButton should be selected (controlled). */\n isSelected?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the ActionButton. */\n children?: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps>({\n ...focusRing(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n staticColor: {\n white: {\n ...baseColor('transparent-white-100'),\n default: {\n default: 'transparent-white-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-white-800'),\n isDisabled: {\n default: 'transparent-white-100',\n isQuiet: 'transparent'\n }\n }\n },\n black: {\n ...baseColor('transparent-black-100'),\n default: {\n default: 'transparent-black-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-black-800'),\n isDisabled: {\n default: 'transparent-black-100',\n isQuiet: 'transparent'\n }\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n staticColor: {\n white: {\n default: baseColor('transparent-white-800'),\n isSelected: 'black',\n isDisabled: 'transparent-white-400'\n },\n black: {\n default: baseColor('transparent-black-800'),\n isSelected: 'white',\n isDisabled: 'transparent-black-400'\n }\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n staticColor: {\n white: 'white',\n black: 'black'\n },\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n paddingY: 0,\n borderRadius: 'control',\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const ActionButtonContext = createContext<ContextValue<ActionButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n staticColor: props.staticColor,\n size: props.size || 'M',\n isQuiet: props.isQuiet\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n}\n\n/**\n * ActionButtons allow users to perform an action.\n * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.\n */\nlet _ActionButton = forwardRef(ActionButton);\nexport {_ActionButton as ActionButton};\n"],"names":[],"version":3,"file":"ActionButton.cjs.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACoDyB;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;;;;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;;;;EAmJQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtJK;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAmJQ","sources":["2931924df01dc677","packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["@import \"3cf237010a171787\";\n@import \"c38bef69f8745925\";\n@import \"3059048d79d64c86\";\n@import \"9bc41819d7d08688\";\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 {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton
|
|
1
|
+
{"mappings":"ACoDyB;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;;;;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;;;;EAmJQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtJK;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAmJQ","sources":["2931924df01dc677","packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["@import \"3cf237010a171787\";\n@import \"c38bef69f8745925\";\n@import \"3059048d79d64c86\";\n@import \"9bc41819d7d08688\";\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 {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /**\n * The size of the ActionButton.\n *\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n staticColor?: 'black' | 'white',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /** Whether the ActionButton should be selected (controlled). */\n isSelected?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the ActionButton. */\n children?: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps>({\n ...focusRing(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n staticColor: {\n white: {\n ...baseColor('transparent-white-100'),\n default: {\n default: 'transparent-white-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-white-800'),\n isDisabled: {\n default: 'transparent-white-100',\n isQuiet: 'transparent'\n }\n }\n },\n black: {\n ...baseColor('transparent-black-100'),\n default: {\n default: 'transparent-black-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-black-800'),\n isDisabled: {\n default: 'transparent-black-100',\n isQuiet: 'transparent'\n }\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n staticColor: {\n white: {\n default: baseColor('transparent-white-800'),\n isSelected: 'black',\n isDisabled: 'transparent-white-400'\n },\n black: {\n default: baseColor('transparent-black-800'),\n isSelected: 'white',\n isDisabled: 'transparent-black-400'\n }\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n staticColor: {\n white: 'white',\n black: 'black'\n },\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n paddingY: 0,\n borderRadius: 'control',\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const ActionButtonContext = createContext<ContextValue<ActionButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n staticColor: props.staticColor,\n size: props.size || 'M',\n isQuiet: props.isQuiet\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n}\n\n/**\n * ActionButtons allow users to perform an action.\n * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.\n */\nlet _ActionButton = forwardRef(ActionButton);\nexport {_ActionButton as ActionButton};\n"],"names":[],"version":3,"file":"ActionButton.css.map"}
|
package/dist/ActionButton.mjs
CHANGED
|
@@ -3,11 +3,11 @@ import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa} from "./Cen
|
|
|
3
3
|
import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons/Icon.mjs";
|
|
4
4
|
import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
|
|
5
5
|
import {SkeletonContext as $5ad421ec19460c48$export$74e166679b1f49ee} from "../icons/Skeleton.mjs";
|
|
6
|
-
import {TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
|
|
6
|
+
import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
|
|
7
7
|
import {useFormProps as $9b916426527cebe7$export$a6b5be5c6b451665} from "./Form.mjs";
|
|
8
8
|
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
|
|
9
9
|
import {jsx as $hl1Zj$jsx} from "react/jsx-runtime";
|
|
10
|
-
import {OverlayTriggerStateContext as $hl1Zj$OverlayTriggerStateContext, Button as $hl1Zj$Button, Provider as $hl1Zj$Provider
|
|
10
|
+
import {OverlayTriggerStateContext as $hl1Zj$OverlayTriggerStateContext, Button as $hl1Zj$Button, Provider as $hl1Zj$Provider} from "react-aria-components";
|
|
11
11
|
import {createContext as $hl1Zj$createContext, useContext as $hl1Zj$useContext, forwardRef as $hl1Zj$forwardRef} from "react";
|
|
12
12
|
import {useFocusableRef as $hl1Zj$useFocusableRef} from "@react-spectrum/utils";
|
|
13
13
|
|
|
@@ -243,7 +243,7 @@ function $da878a05ab4a403e$var$ActionButton(props, ref) {
|
|
|
243
243
|
}
|
|
244
244
|
]
|
|
245
245
|
],
|
|
246
|
-
children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $hl1Zj$jsx)((0, $
|
|
246
|
+
children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $hl1Zj$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
|
|
247
247
|
children: props.children
|
|
248
248
|
}) : props.children
|
|
249
249
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA0CM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2HN,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAyE;AAExH,SAAS,mCAAa,KAAwB,EAAE,GAAoC;IAClF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,iCAAyB;IAE9D,qBACE,gBAAC,CAAA,GAAA,aAAQ;QACN,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;gBACnE,aAAa,MAAM,WAAW;gBAC9B,MAAM,MAAM,IAAI,IAAI;gBACpB,SAAS,MAAM,OAAO;YACxB,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA0CM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2HN,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAyE;AAExH,SAAS,mCAAa,KAAwB,EAAE,GAAoC;IAClF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,iCAAyB;IAE9D,qBACE,gBAAC,CAAA,GAAA,aAAQ;QACN,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;gBACnE,aAAa,MAAM,WAAW;gBAC9B,MAAM,MAAM,IAAI,IAAI;gBACpB,SAAS,MAAM,OAAO;YACxB,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F;AAEA;;;CAGC,GACD,IAAI,0DAAgB,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ActionButton.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 {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /**\n * The size of the ActionButton.\n *\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n staticColor?: 'black' | 'white',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /** Whether the ActionButton should be selected (controlled). */\n isSelected?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the ActionButton. */\n children?: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps>({\n ...focusRing(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n staticColor: {\n white: {\n ...baseColor('transparent-white-100'),\n default: {\n default: 'transparent-white-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-white-800'),\n isDisabled: {\n default: 'transparent-white-100',\n isQuiet: 'transparent'\n }\n }\n },\n black: {\n ...baseColor('transparent-black-100'),\n default: {\n default: 'transparent-black-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-black-800'),\n isDisabled: {\n default: 'transparent-black-100',\n isQuiet: 'transparent'\n }\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n staticColor: {\n white: {\n default: baseColor('transparent-white-800'),\n isSelected: 'black',\n isDisabled: 'transparent-white-400'\n },\n black: {\n default: baseColor('transparent-black-800'),\n isSelected: 'white',\n isDisabled: 'transparent-black-400'\n }\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n staticColor: {\n white: 'white',\n black: 'black'\n },\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n paddingY: 0,\n borderRadius: 'control',\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const ActionButtonContext = createContext<ContextValue<ActionButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\nfunction ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n staticColor: props.staticColor,\n size: props.size || 'M',\n isQuiet: props.isQuiet\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n}\n\n/**\n * ActionButtons allow users to perform an action.\n * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.\n */\nlet _ActionButton = forwardRef(ActionButton);\nexport {_ActionButton as ActionButton};\n"],"names":[],"version":3,"file":"ActionButton.mjs.map"}
|
package/dist/DropZone.cjs
CHANGED
|
@@ -88,7 +88,10 @@ const $797cda10ca96fc86$var$banner = function anonymous(props) {
|
|
|
88
88
|
rules += ' _1c';
|
|
89
89
|
rules += ' _2d';
|
|
90
90
|
rules += ' o-375tou';
|
|
91
|
-
rules += '
|
|
91
|
+
rules += ' lJ';
|
|
92
|
+
if (props.size === "L") rules += ' ry';
|
|
93
|
+
else if (props.size === "S") rules += ' rv';
|
|
94
|
+
else rules += ' rx';
|
|
92
95
|
if (props.isPressed) rules += ' b_____F';
|
|
93
96
|
else if (props.isFocusVisible) rules += ' b_____F';
|
|
94
97
|
else if (props.isHovered) rules += ' b_____F';
|
|
@@ -109,6 +112,7 @@ const $797cda10ca96fc86$var$banner = function anonymous(props) {
|
|
|
109
112
|
function $797cda10ca96fc86$var$DropZone(props, ref) {
|
|
110
113
|
let stringFormatter = (0, $faaBC$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
|
|
111
114
|
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $797cda10ca96fc86$export$14a72053295ff9a6);
|
|
115
|
+
let { size: size = 'M' } = props;
|
|
112
116
|
let domRef = (0, $faaBC$reactspectrumutils.useDOMRef)(ref);
|
|
113
117
|
return /*#__PURE__*/ (0, $faaBC$reactjsxruntime.jsx)((0, $faaBC$reactariacomponents.DropZone), {
|
|
114
118
|
...props,
|
|
@@ -120,12 +124,15 @@ function $797cda10ca96fc86$var$DropZone(props, ref) {
|
|
|
120
124
|
/*#__PURE__*/ (0, $faaBC$reactjsxruntime.jsx)((0, $55f1b8940d3e02db$exports.IllustratedMessageContext).Provider, {
|
|
121
125
|
value: {
|
|
122
126
|
isInDropZone: true,
|
|
123
|
-
isDropTarget: renderProps.isDropTarget
|
|
127
|
+
isDropTarget: renderProps.isDropTarget,
|
|
128
|
+
size: size
|
|
124
129
|
},
|
|
125
130
|
children: props.children
|
|
126
131
|
}),
|
|
127
132
|
renderProps.isDropTarget && props.isFilled && /*#__PURE__*/ (0, $faaBC$reactjsxruntime.jsx)("div", {
|
|
128
|
-
className: $797cda10ca96fc86$var$banner(
|
|
133
|
+
className: $797cda10ca96fc86$var$banner({
|
|
134
|
+
size: size
|
|
135
|
+
}),
|
|
129
136
|
children: /*#__PURE__*/ (0, $faaBC$reactjsxruntime.jsx)("span", {
|
|
130
137
|
children: props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')
|
|
131
138
|
})
|
package/dist/DropZone.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+BM,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAA4D;AAEvG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,+BAAS,KAAoB,EAAE,GAA2B;IACjE,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,KACR,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,mCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAC5F,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,mDAAwB,EAAE,QAAQ;wBAAC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACzG,MAAM,QAAQ;;oBAEf,YAAY,YAAY,IAAI,MAAM,QAAQ,kBAC1C,gCAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gCAAC;sCACE,MAAM,cAAc,GAAG,MAAM,cAAc,GAAG,gBAAgB,MAAM,CAAC;;;;;;AAQtF;AAEA;;CAEC,GACD,IAAI,2CAAY,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/DropZone.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, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children?: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<DropZoneProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\nfunction DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n}\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nlet _DropZone = /*#__PURE__*/ forwardRef(DropZone);\nexport {_DropZone as DropZone};\n"],"names":[],"version":3,"file":"DropZone.cjs.map"}
|
package/dist/DropZone.css
CHANGED
|
@@ -115,6 +115,18 @@
|
|
|
115
115
|
min-height: var(--o);
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
+
.lJ {
|
|
119
|
+
width: fit-content;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.rx {
|
|
123
|
+
max-width: calc(12rem * var(--s2-scale));
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.rv {
|
|
127
|
+
max-width: calc(10rem * var(--s2-scale));
|
|
128
|
+
}
|
|
129
|
+
|
|
118
130
|
.ry {
|
|
119
131
|
max-width: calc(13rem * var(--s2-scale));
|
|
120
132
|
}
|
package/dist/DropZone.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"AC2CiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBF;;;;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;;;;;AAxBE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAwBF","sources":["1c1855bb3a6aeea4","packages/@react-spectrum/s2/src/DropZone.tsx"],"sourcesContent":["@import \"ab564bdb126b567b\";\n@import \"d5049ba06c2da1c6\";\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, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children?: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<DropZoneProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\nfunction DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n}\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nlet _DropZone = /*#__PURE__*/ forwardRef(DropZone);\nexport {_DropZone as DropZone};\n"],"names":[],"version":3,"file":"DropZone.css.map"}
|
package/dist/DropZone.mjs
CHANGED
|
@@ -81,7 +81,10 @@ const $fb6e45fba2483f65$var$banner = function anonymous(props) {
|
|
|
81
81
|
rules += ' _1c';
|
|
82
82
|
rules += ' _2d';
|
|
83
83
|
rules += ' o-375tou';
|
|
84
|
-
rules += '
|
|
84
|
+
rules += ' lJ';
|
|
85
|
+
if (props.size === "L") rules += ' ry';
|
|
86
|
+
else if (props.size === "S") rules += ' rv';
|
|
87
|
+
else rules += ' rx';
|
|
85
88
|
if (props.isPressed) rules += ' b_____F';
|
|
86
89
|
else if (props.isFocusVisible) rules += ' b_____F';
|
|
87
90
|
else if (props.isHovered) rules += ' b_____F';
|
|
@@ -102,6 +105,7 @@ const $fb6e45fba2483f65$var$banner = function anonymous(props) {
|
|
|
102
105
|
function $fb6e45fba2483f65$var$DropZone(props, ref) {
|
|
103
106
|
let stringFormatter = (0, $4h9kk$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4h9kk$intlStringsmjs))), '@react-spectrum/s2');
|
|
104
107
|
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $fb6e45fba2483f65$export$14a72053295ff9a6);
|
|
108
|
+
let { size: size = 'M' } = props;
|
|
105
109
|
let domRef = (0, $4h9kk$useDOMRef)(ref);
|
|
106
110
|
return /*#__PURE__*/ (0, $4h9kk$jsx)((0, $4h9kk$DropZone), {
|
|
107
111
|
...props,
|
|
@@ -113,12 +117,15 @@ function $fb6e45fba2483f65$var$DropZone(props, ref) {
|
|
|
113
117
|
/*#__PURE__*/ (0, $4h9kk$jsx)((0, $4950413ac998f607$export$d661ef89ad42d682).Provider, {
|
|
114
118
|
value: {
|
|
115
119
|
isInDropZone: true,
|
|
116
|
-
isDropTarget: renderProps.isDropTarget
|
|
120
|
+
isDropTarget: renderProps.isDropTarget,
|
|
121
|
+
size: size
|
|
117
122
|
},
|
|
118
123
|
children: props.children
|
|
119
124
|
}),
|
|
120
125
|
renderProps.isDropTarget && props.isFilled && /*#__PURE__*/ (0, $4h9kk$jsx)("div", {
|
|
121
|
-
className: $fb6e45fba2483f65$var$banner(
|
|
126
|
+
className: $fb6e45fba2483f65$var$banner({
|
|
127
|
+
size: size
|
|
128
|
+
}),
|
|
122
129
|
children: /*#__PURE__*/ (0, $4h9kk$jsx)("span", {
|
|
123
130
|
children: props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')
|
|
124
131
|
})
|
package/dist/DropZone.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+BM,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAA4D;AAEvG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAS,+BAAS,KAAoB,EAAE,GAA2B;IACjE,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,KACR,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,eAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAC5F,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAwB,EAAE,QAAQ;wBAAC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACzG,MAAM,QAAQ;;oBAEf,YAAY,YAAY,IAAI,MAAM,QAAQ,kBAC1C,gBAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gBAAC;sCACE,MAAM,cAAc,GAAG,MAAM,cAAc,GAAG,gBAAgB,MAAM,CAAC;;;;;;AAQtF;AAEA;;CAEC,GACD,IAAI,2CAAY,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/DropZone.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, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children?: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<DropZoneProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\nfunction DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n}\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nlet _DropZone = /*#__PURE__*/ forwardRef(DropZone);\nexport {_DropZone as DropZone};\n"],"names":[],"version":3,"file":"DropZone.mjs.map"}
|
package/dist/Radio.cjs
CHANGED
|
@@ -101,8 +101,8 @@ const $49f41f366ec3019f$var$circle = function anonymous(props) {
|
|
|
101
101
|
rules += ' _Zd';
|
|
102
102
|
rules += ' _1c';
|
|
103
103
|
rules += ' _2d';
|
|
104
|
-
rules += '
|
|
105
|
-
rules += ' _Q-
|
|
104
|
+
rules += ' _O-acw0og';
|
|
105
|
+
rules += ' _Q-375y1o';
|
|
106
106
|
rules += ' _Ra';
|
|
107
107
|
rules += ' _vf';
|
|
108
108
|
rules += ' _wf';
|
package/dist/Radio.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCN,SAAS,4BAAM,KAAiB,EAAE,GAAmC;IACnE,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,sCAAW,EAAqB;IAEpC,qBACE,gCAAC,CAAA,GAAA,gCAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAS,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: '[border-width]',\n transitionDuration: 250,\n transitionTimingFunction: 'in-out',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.cjs.map"}
|
package/dist/Radio.css
CHANGED
|
@@ -57,6 +57,10 @@
|
|
|
57
57
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
+
._Q-375x7f {
|
|
61
|
+
transition-duration: .15s;
|
|
62
|
+
}
|
|
63
|
+
|
|
60
64
|
.__a-4a7c5l {
|
|
61
65
|
grid-column-start: field;
|
|
62
66
|
}
|
|
@@ -121,12 +125,12 @@
|
|
|
121
125
|
justify-content: center;
|
|
122
126
|
}
|
|
123
127
|
|
|
124
|
-
.
|
|
125
|
-
transition-property:
|
|
128
|
+
._O-acw0og {
|
|
129
|
+
transition-property: border-width;
|
|
126
130
|
}
|
|
127
131
|
|
|
128
|
-
._Q-
|
|
129
|
-
transition-duration: .
|
|
132
|
+
._Q-375y1o {
|
|
133
|
+
transition-duration: .25s;
|
|
130
134
|
}
|
|
131
135
|
|
|
132
136
|
._Ra {
|
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: '
|
|
1
|
+
{"mappings":"ACkDgB;EAAA;;;;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: '[border-width]',\n transitionDuration: 250,\n transitionTimingFunction: 'in-out',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.css.map"}
|
package/dist/Radio.mjs
CHANGED
|
@@ -95,8 +95,8 @@ const $1ae2870af9a200f8$var$circle = function anonymous(props) {
|
|
|
95
95
|
rules += ' _Zd';
|
|
96
96
|
rules += ' _1c';
|
|
97
97
|
rules += ' _2d';
|
|
98
|
-
rules += '
|
|
99
|
-
rules += ' _Q-
|
|
98
|
+
rules += ' _O-acw0og';
|
|
99
|
+
rules += ' _Q-375y1o';
|
|
100
100
|
rules += ' _Ra';
|
|
101
101
|
rules += ' _vf';
|
|
102
102
|
rules += ' _wf';
|
package/dist/Radio.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAwCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCN,SAAS,4BAAM,KAAiB,EAAE,GAAmC;IACnE,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,IAAI,QACF,OAAO,KACP,GAAG,UACJ,GAAG,CAAA,GAAA,yCAAW,EAAqB;IAEpC,qBACE,gBAAC,CAAA,GAAA,YAAQ;QACN,GAAG,QAAQ;QACZ,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;sBAAU;YAAI,GAAG,SAAS,MAAM;kBACrG,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC;4BACC,KAAK;4BACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW;4BAC7B,WAAW,6BAAO;gCAChB,GAAG,WAAW;gCACd,cAAc,SAAS,YAAY;gCACnC,YAAY,YAAY,UAAU;sCAClC;4BACF;;;oBAEH;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAS,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Radio.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Radio as AriaRadio,\n RadioProps as AriaRadioProps,\n RadioRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\n\nexport interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {\n /**\n * The label for the element.\n */\n children?: ReactNode\n}\n\ninterface ContextProps {\n /**\n * The size of the Radio.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * Whether the Radio within a RadioGroup should be displayed with an emphasized style.\n */\n isEmphasized?: boolean\n}\n\ninterface RadioContextProps extends RadioProps, ContextProps {}\n\ninterface RenderProps extends RadioRenderProps, ContextProps {}\n\nconst wrapper = style({\n display: 'flex',\n columnGap: 'text-to-control',\n alignItems: 'baseline',\n font: 'control',\n transition: 'colors',\n color: {\n default: 'neutral',\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n gridColumnStart: {\n isInForm: 'field'\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst circle = style<RenderProps>({\n ...focusRing(),\n size: 'control-sm',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: '[border-width]',\n transitionDuration: 250,\n transitionTimingFunction: 'in-out',\n borderRadius: 'full',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: {\n default: 2,\n isSelected: '[calc((self(height) - 4px) / 2)]'\n },\n forcedColorAdjust: 'none',\n backgroundColor: 'gray-25',\n borderColor: {\n default: baseColor('gray-800'),\n forcedColors: 'ButtonBorder',\n isSelected: {\n isEmphasized: baseColor('accent-900'),\n forcedColors: 'Highlight'\n },\n isInvalid: {\n default: 'negative',\n forcedColors: 'Mark'\n },\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\nfunction Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {\n let {children, UNSAFE_className = '', UNSAFE_style} = props;\n let circleRef = useRef(null);\n let inputRef = useRef<HTMLInputElement | null>(null);\n let domRef = useFocusableRef(ref, inputRef);\n let isInForm = !!useContext(FormContext);\n let {\n size = 'M',\n ...allProps\n } = useFormProps<RadioContextProps>(props);\n\n return (\n <AriaRadio\n {...allProps}\n ref={domRef}\n inputRef={inputRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>\n {renderProps => (\n <>\n <CenterBaseline>\n <div\n ref={circleRef}\n style={pressScale(circleRef)(renderProps)}\n className={circle({\n ...renderProps,\n isEmphasized: allProps.isEmphasized,\n isSelected: renderProps.isSelected,\n size\n })} />\n </CenterBaseline>\n {children}\n </>\n )}\n </AriaRadio>\n );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nlet _Radio = /*#__PURE__*/ forwardRef(Radio);\nexport {_Radio as Radio};\n"],"names":[],"version":3,"file":"Radio.mjs.map"}
|
package/dist/StatusLight.cjs
CHANGED
|
@@ -114,6 +114,8 @@ const $dad358896b5630fa$var$light = function anonymous(props) {
|
|
|
114
114
|
else if (props.variant === "positive") rules += ' ef';
|
|
115
115
|
else if (props.variant === "neutral") rules += ' ed';
|
|
116
116
|
else if (props.variant === "informative") rules += ' ec';
|
|
117
|
+
rules += ' __vd';
|
|
118
|
+
rules += ' __wd';
|
|
117
119
|
return rules;
|
|
118
120
|
};
|
|
119
121
|
function $dad358896b5630fa$var$StatusLight(props, ref) {
|
package/dist/StatusLight.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,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,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,uCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,EACnC,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,GAC1D,QAAQ,IAAI,CAAC;IAGf,qBACE,iCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gCAAC,CAAA,GAAA,wCAAa;0BACZ,cAAA,gCAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gCAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gCAAC,CAAA,GAAA,8BAAG;0BAAG;;;;AAGb;AAEA;;;CAGC,GACD,IAAI,4CAAe,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","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 {size, 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<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: size(10),\n L: 12,\n XL: size(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\nfunction 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']) {\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'])) {\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\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 */\nlet _StatusLight = /*#__PURE__*/ forwardRef(StatusLight);\nexport {_StatusLight as StatusLight};\n"],"names":[],"version":3,"file":"StatusLight.cjs.map"}
|
package/dist/StatusLight.css
CHANGED