@react-spectrum/s2 0.3.1 → 0.3.2-nightly.5030
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/AvatarGroup.cjs.map +1 -1
- package/dist/AvatarGroup.css.map +1 -1
- package/dist/AvatarGroup.mjs.map +1 -1
- package/dist/Badge.cjs +103 -53
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +140 -0
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +103 -53
- package/dist/Badge.mjs.map +1 -1
- package/dist/Meter.cjs +26 -22
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +59 -47
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +26 -22
- package/dist/Meter.mjs.map +1 -1
- package/dist/ProgressBar.cjs +31 -23
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +63 -51
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +31 -23
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/Tabs.cjs +2 -2
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +2 -2
- package/dist/Tabs.mjs.map +1 -1
- package/dist/types.d.ts +16 -4
- package/dist/types.d.ts.map +1 -1
- package/package.json +14 -14
- package/src/AvatarGroup.tsx +2 -2
- package/src/Badge.tsx +101 -37
- package/src/Meter.tsx +3 -2
- package/src/ProgressBar.tsx +22 -6
- package/src/Tabs.tsx +6 -5
- package/src/bar-utils.ts +33 -8
package/dist/AvatarGroup.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAKN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,yBAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gCAAC,CAAA,GAAA,uCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iCAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gCAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/AvatarGroup.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 {AvatarContext} from './Avatar';\nimport {ContextValue} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.cjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAKN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,yBAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gCAAC,CAAA,GAAA,uCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iCAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gCAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/AvatarGroup.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 {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.cjs.map"}
|
package/dist/AvatarGroup.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACuCe;EAAA;;;;EAOF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;;;;;;;;;EAAA;;;;EAAA;;;;EAgBK;;;;EAAA;;;;;AAvBH;EAAA;;;;EAOF;;;;EAAA;;;;;AAPE;;AAOF;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAgBK","sources":["0a4c7ff616b39f15","packages/@react-spectrum/s2/src/AvatarGroup.tsx"],"sourcesContent":["@import \"4466692f07e15352\";\n@import \"a5389b273a848c34\";\n@import \"443fa43b7b24f112\";\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 {AvatarContext} from './Avatar';\nimport {ContextValue} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.css.map"}
|
|
1
|
+
{"mappings":"ACuCe;EAAA;;;;EAOF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;;;;;;;;;EAAA;;;;EAAA;;;;EAgBK;;;;EAAA;;;;;AAvBH;EAAA;;;;EAOF;;;;EAAA;;;;;AAPE;;AAOF;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAgBK","sources":["0a4c7ff616b39f15","packages/@react-spectrum/s2/src/AvatarGroup.tsx"],"sourcesContent":["@import \"4466692f07e15352\";\n@import \"a5389b273a848c34\";\n@import \"443fa43b7b24f112\";\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 {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.css.map"}
|
package/dist/AvatarGroup.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAKN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gBAAC,CAAA,GAAA,yCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iBAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gBAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/AvatarGroup.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 {AvatarContext} from './Avatar';\nimport {ContextValue} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.mjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAKN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gBAAC,CAAA,GAAA,yCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iBAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gBAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/AvatarGroup.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 {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.mjs.map"}
|
package/dist/Badge.cjs
CHANGED
|
@@ -72,12 +72,16 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
|
|
|
72
72
|
rules += ' _eb';
|
|
73
73
|
rules += ' _f-1x99dlob';
|
|
74
74
|
rules += ' _fa';
|
|
75
|
-
if (props.
|
|
76
|
-
else if (props.
|
|
77
|
-
else if (props.
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
if (props.fillStyle === "outline") rules += ' ap';
|
|
76
|
+
else if (props.fillStyle === "subtle") rules += ' ap';
|
|
77
|
+
else if (props.fillStyle === "bold") {
|
|
78
|
+
if (props.variant === "celery") rules += ' ab';
|
|
79
|
+
else if (props.variant === "charteuse") rules += ' ab';
|
|
80
|
+
else if (props.variant === "yellow") rules += ' ab';
|
|
81
|
+
else if (props.variant === "orange") rules += ' ab';
|
|
82
|
+
else if (props.variant === "notice") rules += ' ab';
|
|
83
|
+
else rules += ' ac';
|
|
84
|
+
}
|
|
81
85
|
rules += ' _2d';
|
|
82
86
|
rules += ' _1c';
|
|
83
87
|
rules += ' _vh';
|
|
@@ -95,52 +99,95 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
|
|
|
95
99
|
rules += ' -oelgqu_A--177861o';
|
|
96
100
|
rules += ' jbG';
|
|
97
101
|
rules += ' jF';
|
|
98
|
-
if (props.
|
|
99
|
-
else if (props.
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
if (props.
|
|
119
|
-
else if (props.
|
|
120
|
-
else if (props.
|
|
121
|
-
else rules += '
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
if (props.
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
else rules += '
|
|
128
|
-
|
|
129
|
-
if (props.
|
|
130
|
-
else if (props.
|
|
131
|
-
else if (props.
|
|
132
|
-
else rules += '
|
|
133
|
-
|
|
134
|
-
if (props.
|
|
135
|
-
else if (props.
|
|
136
|
-
else if (props.
|
|
137
|
-
else rules += '
|
|
138
|
-
|
|
139
|
-
if (props.
|
|
140
|
-
else if (props.
|
|
141
|
-
else if (props.
|
|
142
|
-
else rules += '
|
|
102
|
+
if (props.fillStyle === "outline") rules += ' bd';
|
|
103
|
+
else if (props.fillStyle === "subtle") {
|
|
104
|
+
if (props.variant === "silver") rules += ' b____z';
|
|
105
|
+
else if (props.variant === "cinnamon") rules += ' b____P';
|
|
106
|
+
else if (props.variant === "brown") rules += ' b____j';
|
|
107
|
+
else if (props.variant === "turquoise") rules += ' b___3';
|
|
108
|
+
else if (props.variant === "pink") rules += ' b___N';
|
|
109
|
+
else if (props.variant === "magenta") rules += ' b___x';
|
|
110
|
+
else if (props.variant === "fuchsia") rules += ' b___h';
|
|
111
|
+
else if (props.variant === "purple") rules += ' b__1';
|
|
112
|
+
else if (props.variant === "indigo") rules += ' b__L';
|
|
113
|
+
else if (props.variant === "blue") rules += ' br';
|
|
114
|
+
else if (props.variant === "cyan") rules += ' b__v';
|
|
115
|
+
else if (props.variant === "seafoam") rules += ' b__f';
|
|
116
|
+
else if (props.variant === "green") rules += ' b_Z';
|
|
117
|
+
else if (props.variant === "celery") rules += ' b_J';
|
|
118
|
+
else if (props.variant === "charteuse") rules += ' b_t';
|
|
119
|
+
else if (props.variant === "yellow") rules += ' b_d';
|
|
120
|
+
else if (props.variant === "orange") rules += ' bX';
|
|
121
|
+
else if (props.variant === "red") rules += ' bH';
|
|
122
|
+
else if (props.variant === "gray") rules += ' bg';
|
|
123
|
+
else if (props.variant === "negative") rules += ' bH';
|
|
124
|
+
else if (props.variant === "notice") rules += ' bX';
|
|
125
|
+
else if (props.variant === "positive") rules += ' b_Z';
|
|
126
|
+
else if (props.variant === "neutral") rules += ' bg';
|
|
127
|
+
else if (props.variant === "informative") rules += ' br';
|
|
128
|
+
else if (props.variant === "accent") rules += ' br';
|
|
129
|
+
} else if (props.fillStyle === "bold") {
|
|
130
|
+
if (props.variant === "silver") rules += ' b_____0';
|
|
131
|
+
else if (props.variant === "cinnamon") rules += ' b_____Y';
|
|
132
|
+
else if (props.variant === "brown") rules += ' b_____Z';
|
|
133
|
+
else if (props.variant === "turquoise") rules += ' b_____X';
|
|
134
|
+
else if (props.variant === "pink") rules += ' b_____W';
|
|
135
|
+
else if (props.variant === "magenta") rules += ' b_____V';
|
|
136
|
+
else if (props.variant === "fuchsia") rules += ' b_____U';
|
|
137
|
+
else if (props.variant === "purple") rules += ' b_____T';
|
|
138
|
+
else if (props.variant === "indigo") rules += ' b_____S';
|
|
139
|
+
else if (props.variant === "blue") rules += ' b_____E';
|
|
140
|
+
else if (props.variant === "cyan") rules += ' b_____R';
|
|
141
|
+
else if (props.variant === "seafoam") rules += ' b_____Q';
|
|
142
|
+
else if (props.variant === "green") rules += ' b_____K';
|
|
143
|
+
else if (props.variant === "celery") rules += ' b_____P';
|
|
144
|
+
else if (props.variant === "charteuse") rules += ' b_____O';
|
|
145
|
+
else if (props.variant === "yellow") rules += ' b_____N';
|
|
146
|
+
else if (props.variant === "orange") rules += ' b_____M';
|
|
147
|
+
else if (props.variant === "red") rules += ' b_____I';
|
|
148
|
+
else if (props.variant === "gray") rules += ' b_____G';
|
|
149
|
+
else if (props.variant === "negative") {
|
|
150
|
+
if (props.isPressed) rules += ' b_____J';
|
|
151
|
+
else if (props.isFocusVisible) rules += ' b_____J';
|
|
152
|
+
else if (props.isHovered) rules += ' b_____J';
|
|
153
|
+
else rules += ' b_____I';
|
|
154
|
+
} else if (props.variant === "notice") rules += ' b_____M';
|
|
155
|
+
else if (props.variant === "positive") {
|
|
156
|
+
if (props.isPressed) rules += ' b_____L';
|
|
157
|
+
else if (props.isFocusVisible) rules += ' b_____L';
|
|
158
|
+
else if (props.isHovered) rules += ' b_____L';
|
|
159
|
+
else rules += ' b_____K';
|
|
160
|
+
} else if (props.variant === "neutral") {
|
|
161
|
+
if (props.isPressed) rules += ' b_____H';
|
|
162
|
+
else if (props.isFocusVisible) rules += ' b_____H';
|
|
163
|
+
else if (props.isHovered) rules += ' b_____H';
|
|
164
|
+
else rules += ' b_____G';
|
|
165
|
+
} else if (props.variant === "informative") {
|
|
166
|
+
if (props.isPressed) rules += ' b_____F';
|
|
167
|
+
else if (props.isFocusVisible) rules += ' b_____F';
|
|
168
|
+
else if (props.isHovered) rules += ' b_____F';
|
|
169
|
+
else rules += ' b_____E';
|
|
170
|
+
} else if (props.variant === "accent") {
|
|
171
|
+
if (props.isPressed) rules += ' b_____F';
|
|
172
|
+
else if (props.isFocusVisible) rules += ' b_____F';
|
|
173
|
+
else if (props.isHovered) rules += ' b_____F';
|
|
174
|
+
else rules += ' b_____E';
|
|
175
|
+
}
|
|
143
176
|
}
|
|
177
|
+
rules += ' wa';
|
|
178
|
+
rules += ' __na';
|
|
179
|
+
rules += ' u-375tp0';
|
|
180
|
+
rules += ' v-375tp1';
|
|
181
|
+
rules += ' sc';
|
|
182
|
+
rules += ' tc';
|
|
183
|
+
if (props.fillStyle === "outline") {
|
|
184
|
+
if (props.variant === "negative") rules += ' cN';
|
|
185
|
+
else if (props.variant === "notice") rules += ' c2';
|
|
186
|
+
else if (props.variant === "positive") rules += ' c_4';
|
|
187
|
+
else if (props.variant === "neutral") rules += ' cm';
|
|
188
|
+
else if (props.variant === "informative") rules += ' cx';
|
|
189
|
+
else if (props.variant === "accent") rules += ' cx';
|
|
190
|
+
} else rules += ' ca';
|
|
144
191
|
rules += ' -rwx0fg_e-b';
|
|
145
192
|
if (props.size === "XL") {
|
|
146
193
|
rules += ' -_375tou_o-bw';
|
|
@@ -158,11 +205,13 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
|
|
|
158
205
|
rules += ' -_375tou_o-bp';
|
|
159
206
|
rules += ' -_375tou_o-o';
|
|
160
207
|
}
|
|
208
|
+
rules += ' -_375tp0_u-c';
|
|
209
|
+
rules += ' -_375tp1_v-c';
|
|
161
210
|
return rules;
|
|
162
211
|
};
|
|
163
212
|
function $660a621e3a266afc$var$Badge(props, ref) {
|
|
164
213
|
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $660a621e3a266afc$export$1d4627584e49159a);
|
|
165
|
-
let { children: children, variant: variant = 'neutral', size: size = 'S', ...otherProps } = props; // useProviderProps(props) in v3
|
|
214
|
+
let { children: children, variant: variant = 'neutral', size: size = 'S', fillStyle: fillStyle = 'bold', ...otherProps } = props; // useProviderProps(props) in v3
|
|
166
215
|
let domRef = (0, $26Nq1$reactspectrumutils.useDOMRef)(ref);
|
|
167
216
|
let isTextOnly = (0, ($parcel$interopDefault($26Nq1$react))).Children.toArray(props.children).every((c)=>!/*#__PURE__*/ (0, ($parcel$interopDefault($26Nq1$react))).isValidElement(c));
|
|
168
217
|
return /*#__PURE__*/ (0, $26Nq1$reactjsxruntime.jsx)((0, $26Nq1$reactariacomponents.Provider), {
|
|
@@ -189,7 +238,8 @@ function $660a621e3a266afc$var$Badge(props, ref) {
|
|
|
189
238
|
role: "presentation",
|
|
190
239
|
className: (props.UNSAFE_className || '') + $660a621e3a266afc$var$badge({
|
|
191
240
|
variant: variant,
|
|
192
|
-
size: size
|
|
241
|
+
size: size,
|
|
242
|
+
fillStyle: fillStyle
|
|
193
243
|
}, props.styles),
|
|
194
244
|
ref: domRef,
|
|
195
245
|
children: typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $26Nq1$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
|
package/dist/Badge.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAyCM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gCAAC;YACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;YAC9B,MAAK;YACL,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;yBAAC;sBAAS;2BAAM;YAAS,GAAG,MAAM,MAAM;YAC1F,KAAK;sBAEH,OAAO,aAAa,YAAY,2BAC5B,gCAAC,CAAA,GAAA,8BAAG;0BAAG;iBACP;;;AAKd;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Badge.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 {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n charteuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n charteuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-200',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-100',\n red: 'red-200',\n orange: 'orange-200',\n yellow: 'yellow-200',\n charteuse: 'chartreuse-200',\n celery: 'celery-200',\n green: 'green-200',\n seafoam: 'seafoam-200',\n cyan: 'cyan-200',\n blue: 'blue-200',\n indigo: 'indigo-200',\n purple: 'purple-200',\n fuchsia: 'fuchsia-200',\n magenta: 'magenta-200',\n pink: 'pink-200',\n turquoise: 'turquoise-200',\n brown: 'brown-200',\n cinnamon: 'cinnamon-200',\n silver: 'silver-200'\n }\n },\n outline: 'gray-25'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: 'accent-800',\n informative: 'informative-800',\n neutral: 'gray-700',\n positive: 'positive-700',\n notice: 'notice-700',\n negative: 'negative-800'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\nfunction Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </Provider>\n );\n}\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nlet _Badge = forwardRef(Badge);\nexport {_Badge as Badge};\n"],"names":[],"version":3,"file":"Badge.cjs.map"}
|
package/dist/Badge.css
CHANGED
|
@@ -45,6 +45,10 @@
|
|
|
45
45
|
color: #000;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
.ap {
|
|
49
|
+
color: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
|
|
50
|
+
}
|
|
51
|
+
|
|
48
52
|
._2d {
|
|
49
53
|
justify-content: center;
|
|
50
54
|
}
|
|
@@ -185,6 +189,134 @@
|
|
|
185
189
|
background-color: var(--lightningcss-light, #727272) var(--lightningcss-dark, #6c6c6c);
|
|
186
190
|
}
|
|
187
191
|
|
|
192
|
+
.bg {
|
|
193
|
+
background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.bH {
|
|
197
|
+
background-color: var(--lightningcss-light, #ffebe8) var(--lightningcss-dark, #440d05);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.bX {
|
|
201
|
+
background-color: var(--lightningcss-light, #ffeccf) var(--lightningcss-dark, #3d1500);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.b_d {
|
|
205
|
+
background-color: var(--lightningcss-light, #fff197) var(--lightningcss-dark, #2f1d00);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.b_t {
|
|
209
|
+
background-color: var(--lightningcss-light, #eaf6ad) var(--lightningcss-dark, #1e2400);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.b_J {
|
|
213
|
+
background-color: var(--lightningcss-light, #c5ff9c) var(--lightningcss-dark, #0f2600);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.b_Z {
|
|
217
|
+
background-color: var(--lightningcss-light, #d7f7e1) var(--lightningcss-dark, #00261d);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.b__f {
|
|
221
|
+
background-color: var(--lightningcss-light, #d3f6ea) var(--lightningcss-dark, #002723);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.b__v {
|
|
225
|
+
background-color: var(--lightningcss-light, #d9f4fd) var(--lightningcss-dark, #002431);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.br {
|
|
229
|
+
background-color: var(--lightningcss-light, #e5f0fe) var(--lightningcss-dark, #0f1c52);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.b__L {
|
|
233
|
+
background-color: var(--lightningcss-light, #ebeeff) var(--lightningcss-dark, #23006e);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.b__1 {
|
|
237
|
+
background-color: var(--lightningcss-light, #f4ebfc) var(--lightningcss-dark, #320060);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.b___h {
|
|
241
|
+
background-color: var(--lightningcss-light, #fde9ff) var(--lightningcss-dark, #3d004a);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.b___x {
|
|
245
|
+
background-color: var(--lightningcss-light, #ffe8f0) var(--lightningcss-dark, #4a001b);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.b___N {
|
|
249
|
+
background-color: var(--lightningcss-light, #ffe8f7) var(--lightningcss-dark, #47002c);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.b___3 {
|
|
253
|
+
background-color: var(--lightningcss-light, #d1f5f5) var(--lightningcss-dark, #002529);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.b____j {
|
|
257
|
+
background-color: var(--lightningcss-light, #f7eee1) var(--lightningcss-dark, #2c1f0b);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.b____P {
|
|
261
|
+
background-color: var(--lightningcss-light, #f9ece5) var(--lightningcss-dark, #3b1505);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.b____z {
|
|
265
|
+
background-color: var(--lightningcss-light, #efefef) var(--lightningcss-dark, #212121);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.bd {
|
|
269
|
+
background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.wa {
|
|
273
|
+
border-style: solid;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.__na {
|
|
277
|
+
box-sizing: border-box;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.u-375tp0 {
|
|
281
|
+
border-top-width: var(--u);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.v-375tp1 {
|
|
285
|
+
border-bottom-width: var(--v);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.sc {
|
|
289
|
+
border-inline-start-width: 2px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.tc {
|
|
293
|
+
border-inline-end-width: 2px;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.ca {
|
|
297
|
+
border-color: #0000;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.cx {
|
|
301
|
+
border-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.cm {
|
|
305
|
+
border-color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #afafaf);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.c_4 {
|
|
309
|
+
border-color: var(--lightningcss-light, #0ba45d) var(--lightningcss-dark, #047c4b);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.c2 {
|
|
313
|
+
border-color: var(--lightningcss-light, #e86a00) var(--lightningcss-dark, #b94900);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.cN {
|
|
317
|
+
border-color: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #e63623);
|
|
318
|
+
}
|
|
319
|
+
|
|
188
320
|
.-rwx0fg_e-b {
|
|
189
321
|
--iconPrimary: currentColor;
|
|
190
322
|
}
|
|
@@ -209,6 +341,14 @@
|
|
|
209
341
|
--o: 3rem;
|
|
210
342
|
}
|
|
211
343
|
|
|
344
|
+
.-_375tp0_u-c {
|
|
345
|
+
--u: 2px;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.-_375tp1_v-c {
|
|
349
|
+
--v: 2px;
|
|
350
|
+
}
|
|
351
|
+
|
|
212
352
|
.E-1gogtue {
|
|
213
353
|
padding-top: var(--labelPadding);
|
|
214
354
|
}
|
package/dist/Badge.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"ACqDc;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgJiB;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnJJ;EAAA;;;;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;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAgJiB","sources":["31052c90be0d94da","packages/@react-spectrum/s2/src/Badge.tsx"],"sourcesContent":["@import \"08c4d7ffd2baa021\";\n@import \"1aad76937c73131b\";\n@import \"7989dc282effbbd8\";\n@import \"a50d3ac159f93c2b\";\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 {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n charteuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n charteuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-200',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-100',\n red: 'red-200',\n orange: 'orange-200',\n yellow: 'yellow-200',\n charteuse: 'chartreuse-200',\n celery: 'celery-200',\n green: 'green-200',\n seafoam: 'seafoam-200',\n cyan: 'cyan-200',\n blue: 'blue-200',\n indigo: 'indigo-200',\n purple: 'purple-200',\n fuchsia: 'fuchsia-200',\n magenta: 'magenta-200',\n pink: 'pink-200',\n turquoise: 'turquoise-200',\n brown: 'brown-200',\n cinnamon: 'cinnamon-200',\n silver: 'silver-200'\n }\n },\n outline: 'gray-25'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: 'accent-800',\n informative: 'informative-800',\n neutral: 'gray-700',\n positive: 'positive-700',\n notice: 'notice-700',\n negative: 'negative-800'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\nfunction Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </Provider>\n );\n}\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nlet _Badge = forwardRef(Badge);\nexport {_Badge as Badge};\n"],"names":[],"version":3,"file":"Badge.css.map"}
|