npm - @react-spectrum/s2 - Versions diffs - 3.0.0-nightly-c904e066c-240917 → 3.0.0-nightly-9e79420c1-240919 - Mend

@react-spectrum/s2 3.0.0-nightly-c904e066c-240917 → 3.0.0-nightly-9e79420c1-240919

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.

Files changed (22) hide show

package/dist/Card.cjs +1 -0
package/dist/Card.cjs.map +1 -1
package/dist/Card.css +4 -0
package/dist/Card.css.map +1 -1
package/dist/Card.mjs +1 -0
package/dist/Card.mjs.map +1 -1
package/dist/CardView.cjs +8 -4
package/dist/CardView.cjs.map +1 -1
package/dist/CardView.css.map +1 -1
package/dist/CardView.mjs +8 -4
package/dist/CardView.mjs.map +1 -1
package/dist/ProgressCircle.cjs +69 -254
package/dist/ProgressCircle.cjs.map +1 -1
package/dist/ProgressCircle.css +58 -484
package/dist/ProgressCircle.css.map +1 -1
package/dist/ProgressCircle.mjs +69 -254
package/dist/ProgressCircle.mjs.map +1 -1
package/dist/types.d.ts.map +1 -1
package/package.json +14 -14
package/src/Card.tsx +1 -0
package/src/CardView.tsx +3 -1
package/src/ProgressCircle.tsx +73 -433

package/dist/Card.cjs CHANGED Viewed

@@ -127,6 +127,7 @@ let $230078a1c4ce81d8$var$card = function anonymous(props, overrides) {
     else rules += ' __vc';
     if (props.variant === "quiet") rules += ' __wd';
     else rules += ' __wc';
+    rules += ' __mf';
     rules += ' __R-yksgrp';
     if (props.isCardView) rules += ' __Da';
     if (props.isLink) rules += ' __Hc';

package/dist/Card.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Card.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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n /* The size of the Card. /\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' \| 'style' \| 'children'>, StyleProps {\n /* The children of the Card. /\n children: ReactNode \| ((renderProps: CardRenderProps) => ReactNode),\n /\n The size of the Card.\n * @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /\n The amount of internal padding within the Card.\n * @default 'regular'\n /\n density?: 'compact' \| 'regular' \| 'spacious',\n /\n The visual style of the Card.\n * @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'quiet'\n}\n\nconst borderRadius = {\n default: 'lg',\n size: {\n XS: 'default',\n S: 'default'\n }\n} as const;\n\nlet card = style({\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius,\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n variant: {\n primary: 'elevated',\n secondary: 'layer-1'\n },\n forcedColors: 'ButtonFace'\n }\n },\n backgroundColor: {\n default: '--s2-container-bg',\n variant: {\n tertiary: 'transparent',\n quiet: 'transparent'\n }\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated',\n forcedColors: '[0 0 0 1px ButtonBorder]',\n variant: {\n tertiary: {\n // Render border with box-shadow to avoid affecting layout.\n default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isSelected: 'none',\n forcedColors: '[0 0 0 1px ButtonBorder]'\n },\n quiet: 'none'\n }\n },\n forcedColorAdjust: 'none',\n transition: 'default',\n fontFamily: 'sans',\n overflow: {\n default: 'clip',\n variant: {\n quiet: 'visible'\n }\n },\n disableTapHighlight: true,\n userSelect: {\n isCardView: 'none'\n },\n cursor: {\n isLink: 'pointer'\n },\n width: {\n size: {\n XS: 112,\n S: 192,\n M: 240,\n L: 320,\n XL: size(400)\n },\n isCardView: 'full'\n },\n height: 'full',\n '--card-spacing': {\n type: 'paddingTop',\n value: {\n density: {\n compact: {\n size: {\n XS: size(6),\n S: 8,\n M: 12,\n L: 16,\n XL: 20\n }\n },\n regular: {\n size: {\n XS: 8,\n S: 12,\n M: 16,\n L: 20,\n XL: 24\n }\n },\n spacious: {\n size: {\n XS: 12,\n S: 16,\n M: 20,\n L: 24,\n XL: 28\n }\n }\n }\n }\n },\n '--card-padding-y': {\n type: 'paddingTop',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n '--card-padding-x': {\n type: 'paddingStart',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n paddingY: '--card-padding-y',\n paddingX: '--card-padding-x',\n boxSizing: 'border-box',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n // Focus ring moves to preview when quiet.\n variant: {\n quiet: 'none'\n }\n }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n position: 'absolute',\n inset: 0,\n zIndex: 2,\n borderRadius,\n pointerEvents: 'none',\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: 'gray-1000',\n transition: 'default',\n opacity: {\n default: 0,\n isSelected: 1\n },\n // Quiet cards with no checkbox have an extra inner stroke\n // to distinguish the selection indicator from the preview.\n outlineColor: 'gray-25',\n outlineOffset: -4,\n outlineStyle: {\n default: 'none',\n isStrokeInner: 'solid'\n },\n outlineWidth: 2\n});\n\nlet preview = style({\n position: 'relative',\n transition: 'default',\n overflow: 'clip',\n marginX: '[calc(var(--card-padding-x) -1)]',\n marginTop: '[calc(var(--card-padding-y) * -1)]',\n marginBottom: {\n ':last-child': '[calc(var(--card-padding-y) * -1)]'\n },\n borderRadius: {\n isQuiet: borderRadius\n },\n boxShadow: {\n isQuiet: {\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated'\n }\n },\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isQuiet: {\n isFocusVisible: 'solid'\n }\n }\n});\n\nconst image = style({\n width: 'full',\n aspectRatio: '[3/2]',\n objectFit: 'cover',\n userSelect: 'none',\n pointerEvents: 'none'\n});\n\nlet title = style({\n font: 'title',\n fontSize: {\n size: {\n XS: 'title-xs',\n S: 'title-xs',\n M: 'title-sm',\n L: 'title',\n XL: 'title-lg'\n }\n },\n lineClamp: 3,\n gridArea: 'title'\n});\n\nlet description = style({\n font: 'body',\n fontSize: {\n size: {\n XS: 'body-2xs',\n S: 'body-2xs',\n M: 'body-xs',\n L: 'body-sm',\n XL: 'body'\n }\n },\n lineClamp: 3,\n gridArea: 'description'\n});\n\nlet content = style({\n display: 'grid',\n // By default, all elements are displayed in a stack.\n // If an action menu is present, place it next to the title.\n gridTemplateColumns: {\n default: ['1fr'],\n ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n },\n gridTemplateAreas: {\n default: [\n 'title',\n 'description'\n ],\n ':has([data-slot=menu])': [\n 'title menu',\n 'description description'\n ]\n },\n columnGap: 4,\n flexGrow: 1,\n alignItems: 'baseline',\n alignContent: 'space-between',\n rowGap: {\n size: {\n XS: 4,\n S: 4,\n M: size(6),\n L: size(6),\n XL: 8\n }\n },\n paddingTop: {\n default: '--card-spacing',\n ':first-child': 0\n },\n paddingBottom: {\n default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n ':last-child': 0\n }\n});\n\nlet footer = style({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'end',\n justifyContent: 'space-between',\n gap: 8,\n paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const CardViewContext = createContext<'div' \| typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n isQuiet: boolean,\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n isSelected: boolean,\n isHovered: boolean,\n isFocusVisible: boolean,\n isPressed: boolean,\n isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n isQuiet: false,\n size: 'M',\n isSelected: false,\n isHovered: false,\n isFocusVisible: false,\n isPressed: false,\n isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n XS: 'XS',\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n [props] = useSpectrumContextProps(props, ref, CardContext);\n let domRef = useDOMRef(ref);\n let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n let isQuiet = variant === 'quiet';\n let isSkeleton = useIsSkeleton();\n let children = (\n <Provider\n values={[\n [ImageContext, {alt: '', styles: image}],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n title: {styles: title({size})},\n description: {styles: description({size})}\n }\n }],\n [ContentContext, {styles: content({size})}],\n [DividerContext, {size: 'S'}],\n [FooterContext, {styles: footer}],\n [ActionMenuContext, {\n isQuiet: true,\n size: actionButtonSize[size],\n isDisabled: isSkeleton,\n // @ts-ignore\n 'data-slot': 'menu',\n styles: style({gridArea: 'menu'})\n }],\n [SkeletonContext, isSkeleton]\n ]}>\n <ImageCoordinator>\n {typeof props.children === 'function' ? props.children({size}) : props.children}\n </ImageCoordinator>\n </Provider>\n );\n\n let ElementType = useContext(CardViewContext);\n if (ElementType === 'div' \|\| isSkeleton) {\n return (\n <div\n {...filterDOMProps(otherProps)}\n id={String(id)}\n // @ts-ignore - React < 19 compat\n inert={isSkeleton ? 'true' : undefined}\n ref={domRef}\n className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n style={UNSAFE_style}>\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n {children}\n </InternalCardContext.Provider>\n </div>\n );\n }\n\n let press = pressScale(domRef, UNSAFE_style);\n return (\n <ElementType\n {...props}\n ref={domRef}\n className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n style={renderProps => \n // Only the preview in quiet cards scales down on press\n variant === 'quiet' ? UNSAFE_style : press(renderProps) \n }>\n {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n {/* Selection indicator and checkbox move inside the preview for quiet cards /}\n {!isQuiet && <SelectionIndicator />}\n {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n <CardCheckbox />\n }\n {/ this makes the :first-child selector work even with the checkbox */}\n <div className={style({display: 'contents'})}>\n {children}\n </div>\n </InternalCardContext.Provider>\n )}\n </ElementType>\n );\n});\n\nfunction SelectionIndicator() {\n let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n return (\n <div\n className={selectionIndicator({\n size,\n isSelected,\n // Add an inner stroke only for quiet cards with no checkbox to \n // help distinguish the selected state from the preview.\n isStrokeInner: isQuiet && !isCheckboxSelection\n })} />\n );\n}\n\nfunction CardCheckbox() {\n let {size} = useContext(InternalCardContext);\n return (\n <div\n className={style({\n position: 'absolute',\n top: '--card-spacing',\n insetStart: '--card-spacing',\n zIndex: 2,\n padding: 4,\n backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n borderRadius: 'default',\n boxShadow: 'emphasized'\n })}>\n <Checkbox\n slot=\"selection\"\n excludeFromTabOrder\n size={size === 'XS' ? 'S' : size} />\n </div>\n );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n let {UNSAFE_className, UNSAFE_style} = props;\n let domRef = useDOMRef(ref);\n return (\n <div\n {...filterDOMProps(props)}\n slot=\"preview\"\n ref={domRef}\n className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n {isQuiet && <SelectionIndicator />}\n {isQuiet && isCheckboxSelection && <CardCheckbox />}\n <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n {props.children}\n </div>\n </div>\n );\n});\n\nconst collection = style({\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: {\n default: 4,\n size: {\n XS: 2,\n S: 2\n }\n }\n});\n\nconst collectionImage = style({\n width: 'full',\n aspectRatio: {\n default: 'square',\n ':nth-last-child(4):first-child': '[3/2]'\n },\n gridColumnEnd: {\n ':nth-last-child(4):first-child': 'span 3'\n },\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size} = useContext(InternalCardContext)!;\n return (\n <CardPreview {...props} ref={ref}>\n <div className={collection({size})}>\n <ImageContext.Provider value={{styles: collectionImage}}>\n {props.children}\n </ImageContext.Provider>\n </div>\n </CardPreview>\n );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n return (\n <Card {...props} ref={ref} density=\"regular\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: 'square',\n objectFit: 'contain',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [IllustrationContext, {\n render(icon) {\n return (\n <SkeletonWrapper>\n <div\n className={style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'gray-100',\n aspectRatio: 'square'\n })}>\n {icon}\n </div>\n </SkeletonWrapper>\n );\n },\n styles: style({\n height: 'auto',\n maxSize: 160,\n // TODO: this is made up.\n width: '[50%]'\n })\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst avatarSize = {\n XS: 24,\n S: 48,\n M: 64,\n L: 64,\n XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and avatar.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[3/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [AvatarContext, {\n size: avatarSize[size],\n UNSAFE_style: {\n '--size': avatarSize[size] + 'px'\n } as CSSProperties,\n styles: style({\n position: 'relative',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n }\n }),\n isOverBackground: true\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst buttonSize = {\n XS: 'S',\n S: 'S',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and thumbnail.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n slots: {\n preview: {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[5/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n },\n thumbnail: {\n alt: '',\n styles: style({\n position: 'relative',\n pointerEvents: 'none',\n userSelect: 'none',\n size: {\n size: {\n XS: 24,\n S: 36,\n M: 40,\n L: 44,\n XL: 56\n }\n },\n borderRadius: {\n default: 'default',\n size: {\n XS: 'sm',\n S: 'sm'\n }\n },\n objectFit: 'cover',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n },\n outlineStyle: 'solid',\n outlineWidth: {\n default: 2,\n size: {\n XS: 1\n }\n },\n outlineColor: '--s2-container-bg'\n })({size})\n }\n }\n }],\n [FooterContext, {\n styles: mergeStyles(footer, style({\n justifyContent: 'end'\n }))\n }],\n [ButtonContext, {size: buttonSize[size]}],\n [LinkButtonContext, {size: buttonSize[size]}]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n"],"names":[],"version":3,"file":"Card.cjs.map"}
1	+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Card.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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n /* The size of the Card. /\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' \| 'style' \| 'children'>, StyleProps {\n /* The children of the Card. /\n children: ReactNode \| ((renderProps: CardRenderProps) => ReactNode),\n /\n The size of the Card.\n * @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /\n The amount of internal padding within the Card.\n * @default 'regular'\n /\n density?: 'compact' \| 'regular' \| 'spacious',\n /\n The visual style of the Card.\n * @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'quiet'\n}\n\nconst borderRadius = {\n default: 'lg',\n size: {\n XS: 'default',\n S: 'default'\n }\n} as const;\n\nlet card = style({\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius,\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n variant: {\n primary: 'elevated',\n secondary: 'layer-1'\n },\n forcedColors: 'ButtonFace'\n }\n },\n backgroundColor: {\n default: '--s2-container-bg',\n variant: {\n tertiary: 'transparent',\n quiet: 'transparent'\n }\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated',\n forcedColors: '[0 0 0 1px ButtonBorder]',\n variant: {\n tertiary: {\n // Render border with box-shadow to avoid affecting layout.\n default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isSelected: 'none',\n forcedColors: '[0 0 0 1px ButtonBorder]'\n },\n quiet: 'none'\n }\n },\n forcedColorAdjust: 'none',\n transition: 'default',\n fontFamily: 'sans',\n overflow: {\n default: 'clip',\n variant: {\n quiet: 'visible'\n }\n },\n contain: 'layout',\n disableTapHighlight: true,\n userSelect: {\n isCardView: 'none'\n },\n cursor: {\n isLink: 'pointer'\n },\n width: {\n size: {\n XS: 112,\n S: 192,\n M: 240,\n L: 320,\n XL: size(400)\n },\n isCardView: 'full'\n },\n height: 'full',\n '--card-spacing': {\n type: 'paddingTop',\n value: {\n density: {\n compact: {\n size: {\n XS: size(6),\n S: 8,\n M: 12,\n L: 16,\n XL: 20\n }\n },\n regular: {\n size: {\n XS: 8,\n S: 12,\n M: 16,\n L: 20,\n XL: 24\n }\n },\n spacious: {\n size: {\n XS: 12,\n S: 16,\n M: 20,\n L: 24,\n XL: 28\n }\n }\n }\n }\n },\n '--card-padding-y': {\n type: 'paddingTop',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n '--card-padding-x': {\n type: 'paddingStart',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n paddingY: '--card-padding-y',\n paddingX: '--card-padding-x',\n boxSizing: 'border-box',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n // Focus ring moves to preview when quiet.\n variant: {\n quiet: 'none'\n }\n }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n position: 'absolute',\n inset: 0,\n zIndex: 2,\n borderRadius,\n pointerEvents: 'none',\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: 'gray-1000',\n transition: 'default',\n opacity: {\n default: 0,\n isSelected: 1\n },\n // Quiet cards with no checkbox have an extra inner stroke\n // to distinguish the selection indicator from the preview.\n outlineColor: 'gray-25',\n outlineOffset: -4,\n outlineStyle: {\n default: 'none',\n isStrokeInner: 'solid'\n },\n outlineWidth: 2\n});\n\nlet preview = style({\n position: 'relative',\n transition: 'default',\n overflow: 'clip',\n marginX: '[calc(var(--card-padding-x) -1)]',\n marginTop: '[calc(var(--card-padding-y) * -1)]',\n marginBottom: {\n ':last-child': '[calc(var(--card-padding-y) * -1)]'\n },\n borderRadius: {\n isQuiet: borderRadius\n },\n boxShadow: {\n isQuiet: {\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated'\n }\n },\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isQuiet: {\n isFocusVisible: 'solid'\n }\n }\n});\n\nconst image = style({\n width: 'full',\n aspectRatio: '[3/2]',\n objectFit: 'cover',\n userSelect: 'none',\n pointerEvents: 'none'\n});\n\nlet title = style({\n font: 'title',\n fontSize: {\n size: {\n XS: 'title-xs',\n S: 'title-xs',\n M: 'title-sm',\n L: 'title',\n XL: 'title-lg'\n }\n },\n lineClamp: 3,\n gridArea: 'title'\n});\n\nlet description = style({\n font: 'body',\n fontSize: {\n size: {\n XS: 'body-2xs',\n S: 'body-2xs',\n M: 'body-xs',\n L: 'body-sm',\n XL: 'body'\n }\n },\n lineClamp: 3,\n gridArea: 'description'\n});\n\nlet content = style({\n display: 'grid',\n // By default, all elements are displayed in a stack.\n // If an action menu is present, place it next to the title.\n gridTemplateColumns: {\n default: ['1fr'],\n ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n },\n gridTemplateAreas: {\n default: [\n 'title',\n 'description'\n ],\n ':has([data-slot=menu])': [\n 'title menu',\n 'description description'\n ]\n },\n columnGap: 4,\n flexGrow: 1,\n alignItems: 'baseline',\n alignContent: 'space-between',\n rowGap: {\n size: {\n XS: 4,\n S: 4,\n M: size(6),\n L: size(6),\n XL: 8\n }\n },\n paddingTop: {\n default: '--card-spacing',\n ':first-child': 0\n },\n paddingBottom: {\n default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n ':last-child': 0\n }\n});\n\nlet footer = style({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'end',\n justifyContent: 'space-between',\n gap: 8,\n paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const CardViewContext = createContext<'div' \| typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n isQuiet: boolean,\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n isSelected: boolean,\n isHovered: boolean,\n isFocusVisible: boolean,\n isPressed: boolean,\n isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n isQuiet: false,\n size: 'M',\n isSelected: false,\n isHovered: false,\n isFocusVisible: false,\n isPressed: false,\n isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n XS: 'XS',\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n [props] = useSpectrumContextProps(props, ref, CardContext);\n let domRef = useDOMRef(ref);\n let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n let isQuiet = variant === 'quiet';\n let isSkeleton = useIsSkeleton();\n let children = (\n <Provider\n values={[\n [ImageContext, {alt: '', styles: image}],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n title: {styles: title({size})},\n description: {styles: description({size})}\n }\n }],\n [ContentContext, {styles: content({size})}],\n [DividerContext, {size: 'S'}],\n [FooterContext, {styles: footer}],\n [ActionMenuContext, {\n isQuiet: true,\n size: actionButtonSize[size],\n isDisabled: isSkeleton,\n // @ts-ignore\n 'data-slot': 'menu',\n styles: style({gridArea: 'menu'})\n }],\n [SkeletonContext, isSkeleton]\n ]}>\n <ImageCoordinator>\n {typeof props.children === 'function' ? props.children({size}) : props.children}\n </ImageCoordinator>\n </Provider>\n );\n\n let ElementType = useContext(CardViewContext);\n if (ElementType === 'div' \|\| isSkeleton) {\n return (\n <div\n {...filterDOMProps(otherProps)}\n id={String(id)}\n // @ts-ignore - React < 19 compat\n inert={isSkeleton ? 'true' : undefined}\n ref={domRef}\n className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n style={UNSAFE_style}>\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n {children}\n </InternalCardContext.Provider>\n </div>\n );\n }\n\n let press = pressScale(domRef, UNSAFE_style);\n return (\n <ElementType\n {...props}\n ref={domRef}\n className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n style={renderProps => \n // Only the preview in quiet cards scales down on press\n variant === 'quiet' ? UNSAFE_style : press(renderProps) \n }>\n {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n {/* Selection indicator and checkbox move inside the preview for quiet cards /}\n {!isQuiet && <SelectionIndicator />}\n {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n <CardCheckbox />\n }\n {/ this makes the :first-child selector work even with the checkbox */}\n <div className={style({display: 'contents'})}>\n {children}\n </div>\n </InternalCardContext.Provider>\n )}\n </ElementType>\n );\n});\n\nfunction SelectionIndicator() {\n let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n return (\n <div\n className={selectionIndicator({\n size,\n isSelected,\n // Add an inner stroke only for quiet cards with no checkbox to \n // help distinguish the selected state from the preview.\n isStrokeInner: isQuiet && !isCheckboxSelection\n })} />\n );\n}\n\nfunction CardCheckbox() {\n let {size} = useContext(InternalCardContext);\n return (\n <div\n className={style({\n position: 'absolute',\n top: '--card-spacing',\n insetStart: '--card-spacing',\n zIndex: 2,\n padding: 4,\n backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n borderRadius: 'default',\n boxShadow: 'emphasized'\n })}>\n <Checkbox\n slot=\"selection\"\n excludeFromTabOrder\n size={size === 'XS' ? 'S' : size} />\n </div>\n );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n let {UNSAFE_className, UNSAFE_style} = props;\n let domRef = useDOMRef(ref);\n return (\n <div\n {...filterDOMProps(props)}\n slot=\"preview\"\n ref={domRef}\n className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n {isQuiet && <SelectionIndicator />}\n {isQuiet && isCheckboxSelection && <CardCheckbox />}\n <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n {props.children}\n </div>\n </div>\n );\n});\n\nconst collection = style({\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: {\n default: 4,\n size: {\n XS: 2,\n S: 2\n }\n }\n});\n\nconst collectionImage = style({\n width: 'full',\n aspectRatio: {\n default: 'square',\n ':nth-last-child(4):first-child': '[3/2]'\n },\n gridColumnEnd: {\n ':nth-last-child(4):first-child': 'span 3'\n },\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size} = useContext(InternalCardContext)!;\n return (\n <CardPreview {...props} ref={ref}>\n <div className={collection({size})}>\n <ImageContext.Provider value={{styles: collectionImage}}>\n {props.children}\n </ImageContext.Provider>\n </div>\n </CardPreview>\n );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n return (\n <Card {...props} ref={ref} density=\"regular\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: 'square',\n objectFit: 'contain',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [IllustrationContext, {\n render(icon) {\n return (\n <SkeletonWrapper>\n <div\n className={style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'gray-100',\n aspectRatio: 'square'\n })}>\n {icon}\n </div>\n </SkeletonWrapper>\n );\n },\n styles: style({\n height: 'auto',\n maxSize: 160,\n // TODO: this is made up.\n width: '[50%]'\n })\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst avatarSize = {\n XS: 24,\n S: 48,\n M: 64,\n L: 64,\n XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and avatar.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[3/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [AvatarContext, {\n size: avatarSize[size],\n UNSAFE_style: {\n '--size': avatarSize[size] + 'px'\n } as CSSProperties,\n styles: style({\n position: 'relative',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n }\n }),\n isOverBackground: true\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst buttonSize = {\n XS: 'S',\n S: 'S',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and thumbnail.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n slots: {\n preview: {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[5/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n },\n thumbnail: {\n alt: '',\n styles: style({\n position: 'relative',\n pointerEvents: 'none',\n userSelect: 'none',\n size: {\n size: {\n XS: 24,\n S: 36,\n M: 40,\n L: 44,\n XL: 56\n }\n },\n borderRadius: {\n default: 'default',\n size: {\n XS: 'sm',\n S: 'sm'\n }\n },\n objectFit: 'cover',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n },\n outlineStyle: 'solid',\n outlineWidth: {\n default: 2,\n size: {\n XS: 1\n }\n },\n outlineColor: '--s2-container-bg'\n })({size})\n }\n }\n }],\n [FooterContext, {\n styles: mergeStyles(footer, style({\n justifyContent: 'end'\n }))\n }],\n [ButtonContext, {size: buttonSize[size]}],\n [LinkButtonContext, {size: buttonSize[size]}]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n"],"names":[],"version":3,"file":"Card.cjs.map"}

package/dist/Card.css CHANGED Viewed

@@ -45,6 +45,10 @@
     overflow-y: visible;
   }
+  .__mf {
+    contain: layout;
+  }
   .__R-yksgrp {
     -webkit-tap-highlight-color: #0000;
   }

package/dist/Card.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"ACmEW;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqIc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BA;;;;EAQF;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeJ;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkEK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CQ;;;;EA2BT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiDG;;;;EAaW;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCA;;;;EAsDI;;;;EAAA;;;;EAUA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCgB;;;;;AAnpB/B;EA8JG;;;;EAoCF;;;;;;EAAA;;;;EAeM;;;;EAAA;;;;EAeJ;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EA0OU;;;;EAAA;;;;EAgHF;;;;EAmDI;;;;;AA7mBf;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkMC;;;;IAeM;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAeJ;;;;IAwSQ;;;;IAAA;;;;IAqGI;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAxeD","sources":["27dbcfc551a48112","packages/@react-spectrum/s2/src/Card.tsx"],"sourcesContent":["@import \"9676e19758d368a4\";\n@import \"9cc465424d704be7\";\n@import \"b4efa57acde91f85\";\n@import \"f57f71196abb1d28\";\n@import \"44a5ae9af0c054ae\";\n@import \"48ed75c27807afc0\";\n@import \"28998c3ec0251ce6\";\n@import \"ea2c50216b0a0718\";\n@import \"30bca749b2da4e64\";\n@import \"5bf63158ce80a5e0\";\n@import \"28b6c8bfee7405e7\";\n@import \"7a5f81e38f8d58eb\";\n@import \"7c08b7bb8a077bd7\";\n@import \"8f467e26d8d8379d\";\n@import \"ba6b63e77ed10969\";\n@import \"869e3fec8de34346\";\n@import \"01cf628ec62a9765\";\n@import \"2d338271f1c4eae3\";\n@import \"b32a7b92a27cc986\";\n@import \"be5fbd81d74e2675\";\n@import \"90d2029319751f7e\";\n@import \"fe0cf0648767137f\";\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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n /* The size of the Card. /\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' \| 'style' \| 'children'>, StyleProps {\n /* The children of the Card. /\n children: ReactNode \| ((renderProps: CardRenderProps) => ReactNode),\n /\n The size of the Card.\n * @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /\n The amount of internal padding within the Card.\n * @default 'regular'\n /\n density?: 'compact' \| 'regular' \| 'spacious',\n /\n The visual style of the Card.\n * @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'quiet'\n}\n\nconst borderRadius = {\n default: 'lg',\n size: {\n XS: 'default',\n S: 'default'\n }\n} as const;\n\nlet card = style({\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius,\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n variant: {\n primary: 'elevated',\n secondary: 'layer-1'\n },\n forcedColors: 'ButtonFace'\n }\n },\n backgroundColor: {\n default: '--s2-container-bg',\n variant: {\n tertiary: 'transparent',\n quiet: 'transparent'\n }\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated',\n forcedColors: '[0 0 0 1px ButtonBorder]',\n variant: {\n tertiary: {\n // Render border with box-shadow to avoid affecting layout.\n default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isSelected: 'none',\n forcedColors: '[0 0 0 1px ButtonBorder]'\n },\n quiet: 'none'\n }\n },\n forcedColorAdjust: 'none',\n transition: 'default',\n fontFamily: 'sans',\n overflow: {\n default: 'clip',\n variant: {\n quiet: 'visible'\n }\n },\n disableTapHighlight: true,\n userSelect: {\n isCardView: 'none'\n },\n cursor: {\n isLink: 'pointer'\n },\n width: {\n size: {\n XS: 112,\n S: 192,\n M: 240,\n L: 320,\n XL: size(400)\n },\n isCardView: 'full'\n },\n height: 'full',\n '--card-spacing': {\n type: 'paddingTop',\n value: {\n density: {\n compact: {\n size: {\n XS: size(6),\n S: 8,\n M: 12,\n L: 16,\n XL: 20\n }\n },\n regular: {\n size: {\n XS: 8,\n S: 12,\n M: 16,\n L: 20,\n XL: 24\n }\n },\n spacious: {\n size: {\n XS: 12,\n S: 16,\n M: 20,\n L: 24,\n XL: 28\n }\n }\n }\n }\n },\n '--card-padding-y': {\n type: 'paddingTop',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n '--card-padding-x': {\n type: 'paddingStart',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n paddingY: '--card-padding-y',\n paddingX: '--card-padding-x',\n boxSizing: 'border-box',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n // Focus ring moves to preview when quiet.\n variant: {\n quiet: 'none'\n }\n }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n position: 'absolute',\n inset: 0,\n zIndex: 2,\n borderRadius,\n pointerEvents: 'none',\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: 'gray-1000',\n transition: 'default',\n opacity: {\n default: 0,\n isSelected: 1\n },\n // Quiet cards with no checkbox have an extra inner stroke\n // to distinguish the selection indicator from the preview.\n outlineColor: 'gray-25',\n outlineOffset: -4,\n outlineStyle: {\n default: 'none',\n isStrokeInner: 'solid'\n },\n outlineWidth: 2\n});\n\nlet preview = style({\n position: 'relative',\n transition: 'default',\n overflow: 'clip',\n marginX: '[calc(var(--card-padding-x) -1)]',\n marginTop: '[calc(var(--card-padding-y) * -1)]',\n marginBottom: {\n ':last-child': '[calc(var(--card-padding-y) * -1)]'\n },\n borderRadius: {\n isQuiet: borderRadius\n },\n boxShadow: {\n isQuiet: {\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated'\n }\n },\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isQuiet: {\n isFocusVisible: 'solid'\n }\n }\n});\n\nconst image = style({\n width: 'full',\n aspectRatio: '[3/2]',\n objectFit: 'cover',\n userSelect: 'none',\n pointerEvents: 'none'\n});\n\nlet title = style({\n font: 'title',\n fontSize: {\n size: {\n XS: 'title-xs',\n S: 'title-xs',\n M: 'title-sm',\n L: 'title',\n XL: 'title-lg'\n }\n },\n lineClamp: 3,\n gridArea: 'title'\n});\n\nlet description = style({\n font: 'body',\n fontSize: {\n size: {\n XS: 'body-2xs',\n S: 'body-2xs',\n M: 'body-xs',\n L: 'body-sm',\n XL: 'body'\n }\n },\n lineClamp: 3,\n gridArea: 'description'\n});\n\nlet content = style({\n display: 'grid',\n // By default, all elements are displayed in a stack.\n // If an action menu is present, place it next to the title.\n gridTemplateColumns: {\n default: ['1fr'],\n ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n },\n gridTemplateAreas: {\n default: [\n 'title',\n 'description'\n ],\n ':has([data-slot=menu])': [\n 'title menu',\n 'description description'\n ]\n },\n columnGap: 4,\n flexGrow: 1,\n alignItems: 'baseline',\n alignContent: 'space-between',\n rowGap: {\n size: {\n XS: 4,\n S: 4,\n M: size(6),\n L: size(6),\n XL: 8\n }\n },\n paddingTop: {\n default: '--card-spacing',\n ':first-child': 0\n },\n paddingBottom: {\n default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n ':last-child': 0\n }\n});\n\nlet footer = style({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'end',\n justifyContent: 'space-between',\n gap: 8,\n paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const CardViewContext = createContext<'div' \| typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n isQuiet: boolean,\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n isSelected: boolean,\n isHovered: boolean,\n isFocusVisible: boolean,\n isPressed: boolean,\n isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n isQuiet: false,\n size: 'M',\n isSelected: false,\n isHovered: false,\n isFocusVisible: false,\n isPressed: false,\n isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n XS: 'XS',\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n [props] = useSpectrumContextProps(props, ref, CardContext);\n let domRef = useDOMRef(ref);\n let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n let isQuiet = variant === 'quiet';\n let isSkeleton = useIsSkeleton();\n let children = (\n <Provider\n values={[\n [ImageContext, {alt: '', styles: image}],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n title: {styles: title({size})},\n description: {styles: description({size})}\n }\n }],\n [ContentContext, {styles: content({size})}],\n [DividerContext, {size: 'S'}],\n [FooterContext, {styles: footer}],\n [ActionMenuContext, {\n isQuiet: true,\n size: actionButtonSize[size],\n isDisabled: isSkeleton,\n // @ts-ignore\n 'data-slot': 'menu',\n styles: style({gridArea: 'menu'})\n }],\n [SkeletonContext, isSkeleton]\n ]}>\n <ImageCoordinator>\n {typeof props.children === 'function' ? props.children({size}) : props.children}\n </ImageCoordinator>\n </Provider>\n );\n\n let ElementType = useContext(CardViewContext);\n if (ElementType === 'div' \|\| isSkeleton) {\n return (\n <div\n {...filterDOMProps(otherProps)}\n id={String(id)}\n // @ts-ignore - React < 19 compat\n inert={isSkeleton ? 'true' : undefined}\n ref={domRef}\n className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n style={UNSAFE_style}>\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n {children}\n </InternalCardContext.Provider>\n </div>\n );\n }\n\n let press = pressScale(domRef, UNSAFE_style);\n return (\n <ElementType\n {...props}\n ref={domRef}\n className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n style={renderProps => \n // Only the preview in quiet cards scales down on press\n variant === 'quiet' ? UNSAFE_style : press(renderProps) \n }>\n {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n {/* Selection indicator and checkbox move inside the preview for quiet cards /}\n {!isQuiet && <SelectionIndicator />}\n {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n <CardCheckbox />\n }\n {/ this makes the :first-child selector work even with the checkbox */}\n <div className={style({display: 'contents'})}>\n {children}\n </div>\n </InternalCardContext.Provider>\n )}\n </ElementType>\n );\n});\n\nfunction SelectionIndicator() {\n let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n return (\n <div\n className={selectionIndicator({\n size,\n isSelected,\n // Add an inner stroke only for quiet cards with no checkbox to \n // help distinguish the selected state from the preview.\n isStrokeInner: isQuiet && !isCheckboxSelection\n })} />\n );\n}\n\nfunction CardCheckbox() {\n let {size} = useContext(InternalCardContext);\n return (\n <div\n className={style({\n position: 'absolute',\n top: '--card-spacing',\n insetStart: '--card-spacing',\n zIndex: 2,\n padding: 4,\n backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n borderRadius: 'default',\n boxShadow: 'emphasized'\n })}>\n <Checkbox\n slot=\"selection\"\n excludeFromTabOrder\n size={size === 'XS' ? 'S' : size} />\n </div>\n );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n let {UNSAFE_className, UNSAFE_style} = props;\n let domRef = useDOMRef(ref);\n return (\n <div\n {...filterDOMProps(props)}\n slot=\"preview\"\n ref={domRef}\n className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n {isQuiet && <SelectionIndicator />}\n {isQuiet && isCheckboxSelection && <CardCheckbox />}\n <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n {props.children}\n </div>\n </div>\n );\n});\n\nconst collection = style({\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: {\n default: 4,\n size: {\n XS: 2,\n S: 2\n }\n }\n});\n\nconst collectionImage = style({\n width: 'full',\n aspectRatio: {\n default: 'square',\n ':nth-last-child(4):first-child': '[3/2]'\n },\n gridColumnEnd: {\n ':nth-last-child(4):first-child': 'span 3'\n },\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size} = useContext(InternalCardContext)!;\n return (\n <CardPreview {...props} ref={ref}>\n <div className={collection({size})}>\n <ImageContext.Provider value={{styles: collectionImage}}>\n {props.children}\n </ImageContext.Provider>\n </div>\n </CardPreview>\n );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n return (\n <Card {...props} ref={ref} density=\"regular\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: 'square',\n objectFit: 'contain',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [IllustrationContext, {\n render(icon) {\n return (\n <SkeletonWrapper>\n <div\n className={style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'gray-100',\n aspectRatio: 'square'\n })}>\n {icon}\n </div>\n </SkeletonWrapper>\n );\n },\n styles: style({\n height: 'auto',\n maxSize: 160,\n // TODO: this is made up.\n width: '[50%]'\n })\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst avatarSize = {\n XS: 24,\n S: 48,\n M: 64,\n L: 64,\n XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and avatar.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[3/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [AvatarContext, {\n size: avatarSize[size],\n UNSAFE_style: {\n '--size': avatarSize[size] + 'px'\n } as CSSProperties,\n styles: style({\n position: 'relative',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n }\n }),\n isOverBackground: true\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst buttonSize = {\n XS: 'S',\n S: 'S',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and thumbnail.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n slots: {\n preview: {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[5/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n },\n thumbnail: {\n alt: '',\n styles: style({\n position: 'relative',\n pointerEvents: 'none',\n userSelect: 'none',\n size: {\n size: {\n XS: 24,\n S: 36,\n M: 40,\n L: 44,\n XL: 56\n }\n },\n borderRadius: {\n default: 'default',\n size: {\n XS: 'sm',\n S: 'sm'\n }\n },\n objectFit: 'cover',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n },\n outlineStyle: 'solid',\n outlineWidth: {\n default: 2,\n size: {\n XS: 1\n }\n },\n outlineColor: '--s2-container-bg'\n })({size})\n }\n }\n }],\n [FooterContext, {\n styles: mergeStyles(footer, style({\n justifyContent: 'end'\n }))\n }],\n [ButtonContext, {size: buttonSize[size]}],\n [LinkButtonContext, {size: buttonSize[size]}]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n"],"names":[],"version":3,"file":"Card.css.map"}
1	+ {"mappings":"ACmEW;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsIc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BA;;;;EAQF;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeJ;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkEK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CQ;;;;EA2BT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiDG;;;;EAaW;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCA;;;;EAsDI;;;;EAAA;;;;EAUA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCgB;;;;;AAppB/B;EA+JG;;;;EAoCF;;;;;;EAAA;;;;EAeM;;;;EAAA;;;;EAeJ;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EA0OU;;;;EAAA;;;;EAgHF;;;;EAmDI;;;;;AA9mBf;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAmMC;;;;IAeM;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAeJ;;;;IAwSQ;;;;IAAA;;;;IAqGI;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAxeD","sources":["27dbcfc551a48112","packages/@react-spectrum/s2/src/Card.tsx"],"sourcesContent":["@import \"9676e19758d368a4\";\n@import \"9cc465424d704be7\";\n@import \"b4efa57acde91f85\";\n@import \"f57f71196abb1d28\";\n@import \"44a5ae9af0c054ae\";\n@import \"48ed75c27807afc0\";\n@import \"28998c3ec0251ce6\";\n@import \"ea2c50216b0a0718\";\n@import \"30bca749b2da4e64\";\n@import \"5bf63158ce80a5e0\";\n@import \"28b6c8bfee7405e7\";\n@import \"7a5f81e38f8d58eb\";\n@import \"7c08b7bb8a077bd7\";\n@import \"8f467e26d8d8379d\";\n@import \"ba6b63e77ed10969\";\n@import \"869e3fec8de34346\";\n@import \"01cf628ec62a9765\";\n@import \"2d338271f1c4eae3\";\n@import \"b32a7b92a27cc986\";\n@import \"be5fbd81d74e2675\";\n@import \"90d2029319751f7e\";\n@import \"fe0cf0648767137f\";\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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n /* The size of the Card. /\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' \| 'style' \| 'children'>, StyleProps {\n /* The children of the Card. /\n children: ReactNode \| ((renderProps: CardRenderProps) => ReactNode),\n /\n The size of the Card.\n * @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /\n The amount of internal padding within the Card.\n * @default 'regular'\n /\n density?: 'compact' \| 'regular' \| 'spacious',\n /\n The visual style of the Card.\n * @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'quiet'\n}\n\nconst borderRadius = {\n default: 'lg',\n size: {\n XS: 'default',\n S: 'default'\n }\n} as const;\n\nlet card = style({\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius,\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n variant: {\n primary: 'elevated',\n secondary: 'layer-1'\n },\n forcedColors: 'ButtonFace'\n }\n },\n backgroundColor: {\n default: '--s2-container-bg',\n variant: {\n tertiary: 'transparent',\n quiet: 'transparent'\n }\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated',\n forcedColors: '[0 0 0 1px ButtonBorder]',\n variant: {\n tertiary: {\n // Render border with box-shadow to avoid affecting layout.\n default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isSelected: 'none',\n forcedColors: '[0 0 0 1px ButtonBorder]'\n },\n quiet: 'none'\n }\n },\n forcedColorAdjust: 'none',\n transition: 'default',\n fontFamily: 'sans',\n overflow: {\n default: 'clip',\n variant: {\n quiet: 'visible'\n }\n },\n contain: 'layout',\n disableTapHighlight: true,\n userSelect: {\n isCardView: 'none'\n },\n cursor: {\n isLink: 'pointer'\n },\n width: {\n size: {\n XS: 112,\n S: 192,\n M: 240,\n L: 320,\n XL: size(400)\n },\n isCardView: 'full'\n },\n height: 'full',\n '--card-spacing': {\n type: 'paddingTop',\n value: {\n density: {\n compact: {\n size: {\n XS: size(6),\n S: 8,\n M: 12,\n L: 16,\n XL: 20\n }\n },\n regular: {\n size: {\n XS: 8,\n S: 12,\n M: 16,\n L: 20,\n XL: 24\n }\n },\n spacious: {\n size: {\n XS: 12,\n S: 16,\n M: 20,\n L: 24,\n XL: 28\n }\n }\n }\n }\n },\n '--card-padding-y': {\n type: 'paddingTop',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n '--card-padding-x': {\n type: 'paddingStart',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n paddingY: '--card-padding-y',\n paddingX: '--card-padding-x',\n boxSizing: 'border-box',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n // Focus ring moves to preview when quiet.\n variant: {\n quiet: 'none'\n }\n }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n position: 'absolute',\n inset: 0,\n zIndex: 2,\n borderRadius,\n pointerEvents: 'none',\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: 'gray-1000',\n transition: 'default',\n opacity: {\n default: 0,\n isSelected: 1\n },\n // Quiet cards with no checkbox have an extra inner stroke\n // to distinguish the selection indicator from the preview.\n outlineColor: 'gray-25',\n outlineOffset: -4,\n outlineStyle: {\n default: 'none',\n isStrokeInner: 'solid'\n },\n outlineWidth: 2\n});\n\nlet preview = style({\n position: 'relative',\n transition: 'default',\n overflow: 'clip',\n marginX: '[calc(var(--card-padding-x) -1)]',\n marginTop: '[calc(var(--card-padding-y) * -1)]',\n marginBottom: {\n ':last-child': '[calc(var(--card-padding-y) * -1)]'\n },\n borderRadius: {\n isQuiet: borderRadius\n },\n boxShadow: {\n isQuiet: {\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated'\n }\n },\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isQuiet: {\n isFocusVisible: 'solid'\n }\n }\n});\n\nconst image = style({\n width: 'full',\n aspectRatio: '[3/2]',\n objectFit: 'cover',\n userSelect: 'none',\n pointerEvents: 'none'\n});\n\nlet title = style({\n font: 'title',\n fontSize: {\n size: {\n XS: 'title-xs',\n S: 'title-xs',\n M: 'title-sm',\n L: 'title',\n XL: 'title-lg'\n }\n },\n lineClamp: 3,\n gridArea: 'title'\n});\n\nlet description = style({\n font: 'body',\n fontSize: {\n size: {\n XS: 'body-2xs',\n S: 'body-2xs',\n M: 'body-xs',\n L: 'body-sm',\n XL: 'body'\n }\n },\n lineClamp: 3,\n gridArea: 'description'\n});\n\nlet content = style({\n display: 'grid',\n // By default, all elements are displayed in a stack.\n // If an action menu is present, place it next to the title.\n gridTemplateColumns: {\n default: ['1fr'],\n ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n },\n gridTemplateAreas: {\n default: [\n 'title',\n 'description'\n ],\n ':has([data-slot=menu])': [\n 'title menu',\n 'description description'\n ]\n },\n columnGap: 4,\n flexGrow: 1,\n alignItems: 'baseline',\n alignContent: 'space-between',\n rowGap: {\n size: {\n XS: 4,\n S: 4,\n M: size(6),\n L: size(6),\n XL: 8\n }\n },\n paddingTop: {\n default: '--card-spacing',\n ':first-child': 0\n },\n paddingBottom: {\n default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n ':last-child': 0\n }\n});\n\nlet footer = style({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'end',\n justifyContent: 'space-between',\n gap: 8,\n paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const CardViewContext = createContext<'div' \| typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n isQuiet: boolean,\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n isSelected: boolean,\n isHovered: boolean,\n isFocusVisible: boolean,\n isPressed: boolean,\n isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n isQuiet: false,\n size: 'M',\n isSelected: false,\n isHovered: false,\n isFocusVisible: false,\n isPressed: false,\n isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n XS: 'XS',\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n [props] = useSpectrumContextProps(props, ref, CardContext);\n let domRef = useDOMRef(ref);\n let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n let isQuiet = variant === 'quiet';\n let isSkeleton = useIsSkeleton();\n let children = (\n <Provider\n values={[\n [ImageContext, {alt: '', styles: image}],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n title: {styles: title({size})},\n description: {styles: description({size})}\n }\n }],\n [ContentContext, {styles: content({size})}],\n [DividerContext, {size: 'S'}],\n [FooterContext, {styles: footer}],\n [ActionMenuContext, {\n isQuiet: true,\n size: actionButtonSize[size],\n isDisabled: isSkeleton,\n // @ts-ignore\n 'data-slot': 'menu',\n styles: style({gridArea: 'menu'})\n }],\n [SkeletonContext, isSkeleton]\n ]}>\n <ImageCoordinator>\n {typeof props.children === 'function' ? props.children({size}) : props.children}\n </ImageCoordinator>\n </Provider>\n );\n\n let ElementType = useContext(CardViewContext);\n if (ElementType === 'div' \|\| isSkeleton) {\n return (\n <div\n {...filterDOMProps(otherProps)}\n id={String(id)}\n // @ts-ignore - React < 19 compat\n inert={isSkeleton ? 'true' : undefined}\n ref={domRef}\n className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n style={UNSAFE_style}>\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n {children}\n </InternalCardContext.Provider>\n </div>\n );\n }\n\n let press = pressScale(domRef, UNSAFE_style);\n return (\n <ElementType\n {...props}\n ref={domRef}\n className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n style={renderProps => \n // Only the preview in quiet cards scales down on press\n variant === 'quiet' ? UNSAFE_style : press(renderProps) \n }>\n {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n {/* Selection indicator and checkbox move inside the preview for quiet cards /}\n {!isQuiet && <SelectionIndicator />}\n {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n <CardCheckbox />\n }\n {/ this makes the :first-child selector work even with the checkbox */}\n <div className={style({display: 'contents'})}>\n {children}\n </div>\n </InternalCardContext.Provider>\n )}\n </ElementType>\n );\n});\n\nfunction SelectionIndicator() {\n let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n return (\n <div\n className={selectionIndicator({\n size,\n isSelected,\n // Add an inner stroke only for quiet cards with no checkbox to \n // help distinguish the selected state from the preview.\n isStrokeInner: isQuiet && !isCheckboxSelection\n })} />\n );\n}\n\nfunction CardCheckbox() {\n let {size} = useContext(InternalCardContext);\n return (\n <div\n className={style({\n position: 'absolute',\n top: '--card-spacing',\n insetStart: '--card-spacing',\n zIndex: 2,\n padding: 4,\n backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n borderRadius: 'default',\n boxShadow: 'emphasized'\n })}>\n <Checkbox\n slot=\"selection\"\n excludeFromTabOrder\n size={size === 'XS' ? 'S' : size} />\n </div>\n );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n let {UNSAFE_className, UNSAFE_style} = props;\n let domRef = useDOMRef(ref);\n return (\n <div\n {...filterDOMProps(props)}\n slot=\"preview\"\n ref={domRef}\n className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n {isQuiet && <SelectionIndicator />}\n {isQuiet && isCheckboxSelection && <CardCheckbox />}\n <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n {props.children}\n </div>\n </div>\n );\n});\n\nconst collection = style({\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: {\n default: 4,\n size: {\n XS: 2,\n S: 2\n }\n }\n});\n\nconst collectionImage = style({\n width: 'full',\n aspectRatio: {\n default: 'square',\n ':nth-last-child(4):first-child': '[3/2]'\n },\n gridColumnEnd: {\n ':nth-last-child(4):first-child': 'span 3'\n },\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size} = useContext(InternalCardContext)!;\n return (\n <CardPreview {...props} ref={ref}>\n <div className={collection({size})}>\n <ImageContext.Provider value={{styles: collectionImage}}>\n {props.children}\n </ImageContext.Provider>\n </div>\n </CardPreview>\n );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n return (\n <Card {...props} ref={ref} density=\"regular\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: 'square',\n objectFit: 'contain',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [IllustrationContext, {\n render(icon) {\n return (\n <SkeletonWrapper>\n <div\n className={style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'gray-100',\n aspectRatio: 'square'\n })}>\n {icon}\n </div>\n </SkeletonWrapper>\n );\n },\n styles: style({\n height: 'auto',\n maxSize: 160,\n // TODO: this is made up.\n width: '[50%]'\n })\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst avatarSize = {\n XS: 24,\n S: 48,\n M: 64,\n L: 64,\n XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and avatar.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[3/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [AvatarContext, {\n size: avatarSize[size],\n UNSAFE_style: {\n '--size': avatarSize[size] + 'px'\n } as CSSProperties,\n styles: style({\n position: 'relative',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n }\n }),\n isOverBackground: true\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst buttonSize = {\n XS: 'S',\n S: 'S',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and thumbnail.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n slots: {\n preview: {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[5/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n },\n thumbnail: {\n alt: '',\n styles: style({\n position: 'relative',\n pointerEvents: 'none',\n userSelect: 'none',\n size: {\n size: {\n XS: 24,\n S: 36,\n M: 40,\n L: 44,\n XL: 56\n }\n },\n borderRadius: {\n default: 'default',\n size: {\n XS: 'sm',\n S: 'sm'\n }\n },\n objectFit: 'cover',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n },\n outlineStyle: 'solid',\n outlineWidth: {\n default: 2,\n size: {\n XS: 1\n }\n },\n outlineColor: '--s2-container-bg'\n })({size})\n }\n }\n }],\n [FooterContext, {\n styles: mergeStyles(footer, style({\n justifyContent: 'end'\n }))\n }],\n [ButtonContext, {size: buttonSize[size]}],\n [LinkButtonContext, {size: buttonSize[size]}]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n"],"names":[],"version":3,"file":"Card.css.map"}

package/dist/Card.mjs CHANGED Viewed

@@ -114,6 +114,7 @@ let $68e4e6fe083e22fd$var$card = function anonymous(props, overrides) {
     else rules += ' __vc';
     if (props.variant === "quiet") rules += ' __wd';
     else rules += ' __wc';
+    rules += ' __mf';
     rules += ' __R-yksgrp';
     if (props.isCardView) rules += ' __Da';
     if (props.isLink) rules += ' __Hc';

package/dist/Card.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Card.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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n /* The size of the Card. /\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' \| 'style' \| 'children'>, StyleProps {\n /* The children of the Card. /\n children: ReactNode \| ((renderProps: CardRenderProps) => ReactNode),\n /\n The size of the Card.\n * @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /\n The amount of internal padding within the Card.\n * @default 'regular'\n /\n density?: 'compact' \| 'regular' \| 'spacious',\n /\n The visual style of the Card.\n * @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'quiet'\n}\n\nconst borderRadius = {\n default: 'lg',\n size: {\n XS: 'default',\n S: 'default'\n }\n} as const;\n\nlet card = style({\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius,\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n variant: {\n primary: 'elevated',\n secondary: 'layer-1'\n },\n forcedColors: 'ButtonFace'\n }\n },\n backgroundColor: {\n default: '--s2-container-bg',\n variant: {\n tertiary: 'transparent',\n quiet: 'transparent'\n }\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated',\n forcedColors: '[0 0 0 1px ButtonBorder]',\n variant: {\n tertiary: {\n // Render border with box-shadow to avoid affecting layout.\n default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isSelected: 'none',\n forcedColors: '[0 0 0 1px ButtonBorder]'\n },\n quiet: 'none'\n }\n },\n forcedColorAdjust: 'none',\n transition: 'default',\n fontFamily: 'sans',\n overflow: {\n default: 'clip',\n variant: {\n quiet: 'visible'\n }\n },\n disableTapHighlight: true,\n userSelect: {\n isCardView: 'none'\n },\n cursor: {\n isLink: 'pointer'\n },\n width: {\n size: {\n XS: 112,\n S: 192,\n M: 240,\n L: 320,\n XL: size(400)\n },\n isCardView: 'full'\n },\n height: 'full',\n '--card-spacing': {\n type: 'paddingTop',\n value: {\n density: {\n compact: {\n size: {\n XS: size(6),\n S: 8,\n M: 12,\n L: 16,\n XL: 20\n }\n },\n regular: {\n size: {\n XS: 8,\n S: 12,\n M: 16,\n L: 20,\n XL: 24\n }\n },\n spacious: {\n size: {\n XS: 12,\n S: 16,\n M: 20,\n L: 24,\n XL: 28\n }\n }\n }\n }\n },\n '--card-padding-y': {\n type: 'paddingTop',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n '--card-padding-x': {\n type: 'paddingStart',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n paddingY: '--card-padding-y',\n paddingX: '--card-padding-x',\n boxSizing: 'border-box',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n // Focus ring moves to preview when quiet.\n variant: {\n quiet: 'none'\n }\n }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n position: 'absolute',\n inset: 0,\n zIndex: 2,\n borderRadius,\n pointerEvents: 'none',\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: 'gray-1000',\n transition: 'default',\n opacity: {\n default: 0,\n isSelected: 1\n },\n // Quiet cards with no checkbox have an extra inner stroke\n // to distinguish the selection indicator from the preview.\n outlineColor: 'gray-25',\n outlineOffset: -4,\n outlineStyle: {\n default: 'none',\n isStrokeInner: 'solid'\n },\n outlineWidth: 2\n});\n\nlet preview = style({\n position: 'relative',\n transition: 'default',\n overflow: 'clip',\n marginX: '[calc(var(--card-padding-x) -1)]',\n marginTop: '[calc(var(--card-padding-y) * -1)]',\n marginBottom: {\n ':last-child': '[calc(var(--card-padding-y) * -1)]'\n },\n borderRadius: {\n isQuiet: borderRadius\n },\n boxShadow: {\n isQuiet: {\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated'\n }\n },\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isQuiet: {\n isFocusVisible: 'solid'\n }\n }\n});\n\nconst image = style({\n width: 'full',\n aspectRatio: '[3/2]',\n objectFit: 'cover',\n userSelect: 'none',\n pointerEvents: 'none'\n});\n\nlet title = style({\n font: 'title',\n fontSize: {\n size: {\n XS: 'title-xs',\n S: 'title-xs',\n M: 'title-sm',\n L: 'title',\n XL: 'title-lg'\n }\n },\n lineClamp: 3,\n gridArea: 'title'\n});\n\nlet description = style({\n font: 'body',\n fontSize: {\n size: {\n XS: 'body-2xs',\n S: 'body-2xs',\n M: 'body-xs',\n L: 'body-sm',\n XL: 'body'\n }\n },\n lineClamp: 3,\n gridArea: 'description'\n});\n\nlet content = style({\n display: 'grid',\n // By default, all elements are displayed in a stack.\n // If an action menu is present, place it next to the title.\n gridTemplateColumns: {\n default: ['1fr'],\n ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n },\n gridTemplateAreas: {\n default: [\n 'title',\n 'description'\n ],\n ':has([data-slot=menu])': [\n 'title menu',\n 'description description'\n ]\n },\n columnGap: 4,\n flexGrow: 1,\n alignItems: 'baseline',\n alignContent: 'space-between',\n rowGap: {\n size: {\n XS: 4,\n S: 4,\n M: size(6),\n L: size(6),\n XL: 8\n }\n },\n paddingTop: {\n default: '--card-spacing',\n ':first-child': 0\n },\n paddingBottom: {\n default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n ':last-child': 0\n }\n});\n\nlet footer = style({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'end',\n justifyContent: 'space-between',\n gap: 8,\n paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const CardViewContext = createContext<'div' \| typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n isQuiet: boolean,\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n isSelected: boolean,\n isHovered: boolean,\n isFocusVisible: boolean,\n isPressed: boolean,\n isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n isQuiet: false,\n size: 'M',\n isSelected: false,\n isHovered: false,\n isFocusVisible: false,\n isPressed: false,\n isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n XS: 'XS',\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n [props] = useSpectrumContextProps(props, ref, CardContext);\n let domRef = useDOMRef(ref);\n let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n let isQuiet = variant === 'quiet';\n let isSkeleton = useIsSkeleton();\n let children = (\n <Provider\n values={[\n [ImageContext, {alt: '', styles: image}],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n title: {styles: title({size})},\n description: {styles: description({size})}\n }\n }],\n [ContentContext, {styles: content({size})}],\n [DividerContext, {size: 'S'}],\n [FooterContext, {styles: footer}],\n [ActionMenuContext, {\n isQuiet: true,\n size: actionButtonSize[size],\n isDisabled: isSkeleton,\n // @ts-ignore\n 'data-slot': 'menu',\n styles: style({gridArea: 'menu'})\n }],\n [SkeletonContext, isSkeleton]\n ]}>\n <ImageCoordinator>\n {typeof props.children === 'function' ? props.children({size}) : props.children}\n </ImageCoordinator>\n </Provider>\n );\n\n let ElementType = useContext(CardViewContext);\n if (ElementType === 'div' \|\| isSkeleton) {\n return (\n <div\n {...filterDOMProps(otherProps)}\n id={String(id)}\n // @ts-ignore - React < 19 compat\n inert={isSkeleton ? 'true' : undefined}\n ref={domRef}\n className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n style={UNSAFE_style}>\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n {children}\n </InternalCardContext.Provider>\n </div>\n );\n }\n\n let press = pressScale(domRef, UNSAFE_style);\n return (\n <ElementType\n {...props}\n ref={domRef}\n className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n style={renderProps => \n // Only the preview in quiet cards scales down on press\n variant === 'quiet' ? UNSAFE_style : press(renderProps) \n }>\n {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n {/* Selection indicator and checkbox move inside the preview for quiet cards /}\n {!isQuiet && <SelectionIndicator />}\n {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n <CardCheckbox />\n }\n {/ this makes the :first-child selector work even with the checkbox */}\n <div className={style({display: 'contents'})}>\n {children}\n </div>\n </InternalCardContext.Provider>\n )}\n </ElementType>\n );\n});\n\nfunction SelectionIndicator() {\n let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n return (\n <div\n className={selectionIndicator({\n size,\n isSelected,\n // Add an inner stroke only for quiet cards with no checkbox to \n // help distinguish the selected state from the preview.\n isStrokeInner: isQuiet && !isCheckboxSelection\n })} />\n );\n}\n\nfunction CardCheckbox() {\n let {size} = useContext(InternalCardContext);\n return (\n <div\n className={style({\n position: 'absolute',\n top: '--card-spacing',\n insetStart: '--card-spacing',\n zIndex: 2,\n padding: 4,\n backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n borderRadius: 'default',\n boxShadow: 'emphasized'\n })}>\n <Checkbox\n slot=\"selection\"\n excludeFromTabOrder\n size={size === 'XS' ? 'S' : size} />\n </div>\n );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n let {UNSAFE_className, UNSAFE_style} = props;\n let domRef = useDOMRef(ref);\n return (\n <div\n {...filterDOMProps(props)}\n slot=\"preview\"\n ref={domRef}\n className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n {isQuiet && <SelectionIndicator />}\n {isQuiet && isCheckboxSelection && <CardCheckbox />}\n <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n {props.children}\n </div>\n </div>\n );\n});\n\nconst collection = style({\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: {\n default: 4,\n size: {\n XS: 2,\n S: 2\n }\n }\n});\n\nconst collectionImage = style({\n width: 'full',\n aspectRatio: {\n default: 'square',\n ':nth-last-child(4):first-child': '[3/2]'\n },\n gridColumnEnd: {\n ':nth-last-child(4):first-child': 'span 3'\n },\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size} = useContext(InternalCardContext)!;\n return (\n <CardPreview {...props} ref={ref}>\n <div className={collection({size})}>\n <ImageContext.Provider value={{styles: collectionImage}}>\n {props.children}\n </ImageContext.Provider>\n </div>\n </CardPreview>\n );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n return (\n <Card {...props} ref={ref} density=\"regular\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: 'square',\n objectFit: 'contain',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [IllustrationContext, {\n render(icon) {\n return (\n <SkeletonWrapper>\n <div\n className={style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'gray-100',\n aspectRatio: 'square'\n })}>\n {icon}\n </div>\n </SkeletonWrapper>\n );\n },\n styles: style({\n height: 'auto',\n maxSize: 160,\n // TODO: this is made up.\n width: '[50%]'\n })\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst avatarSize = {\n XS: 24,\n S: 48,\n M: 64,\n L: 64,\n XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and avatar.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[3/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [AvatarContext, {\n size: avatarSize[size],\n UNSAFE_style: {\n '--size': avatarSize[size] + 'px'\n } as CSSProperties,\n styles: style({\n position: 'relative',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n }\n }),\n isOverBackground: true\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst buttonSize = {\n XS: 'S',\n S: 'S',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and thumbnail.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n slots: {\n preview: {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[5/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n },\n thumbnail: {\n alt: '',\n styles: style({\n position: 'relative',\n pointerEvents: 'none',\n userSelect: 'none',\n size: {\n size: {\n XS: 24,\n S: 36,\n M: 40,\n L: 44,\n XL: 56\n }\n },\n borderRadius: {\n default: 'default',\n size: {\n XS: 'sm',\n S: 'sm'\n }\n },\n objectFit: 'cover',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n },\n outlineStyle: 'solid',\n outlineWidth: {\n default: 2,\n size: {\n XS: 1\n }\n },\n outlineColor: '--s2-container-bg'\n })({size})\n }\n }\n }],\n [FooterContext, {\n styles: mergeStyles(footer, style({\n justifyContent: 'end'\n }))\n }],\n [ButtonContext, {size: buttonSize[size]}],\n [LinkButtonContext, {size: buttonSize[size]}]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n"],"names":[],"version":3,"file":"Card.mjs.map"}
1	+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Card.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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n /* The size of the Card. /\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' \| 'style' \| 'children'>, StyleProps {\n /* The children of the Card. /\n children: ReactNode \| ((renderProps: CardRenderProps) => ReactNode),\n /\n The size of the Card.\n * @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /\n The amount of internal padding within the Card.\n * @default 'regular'\n /\n density?: 'compact' \| 'regular' \| 'spacious',\n /\n The visual style of the Card.\n * @default 'primary'\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'quiet'\n}\n\nconst borderRadius = {\n default: 'lg',\n size: {\n XS: 'default',\n S: 'default'\n }\n} as const;\n\nlet card = style({\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n borderRadius,\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n variant: {\n primary: 'elevated',\n secondary: 'layer-1'\n },\n forcedColors: 'ButtonFace'\n }\n },\n backgroundColor: {\n default: '--s2-container-bg',\n variant: {\n tertiary: 'transparent',\n quiet: 'transparent'\n }\n },\n boxShadow: {\n default: 'emphasized',\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated',\n forcedColors: '[0 0 0 1px ButtonBorder]',\n variant: {\n tertiary: {\n // Render border with box-shadow to avoid affecting layout.\n default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n isSelected: 'none',\n forcedColors: '[0 0 0 1px ButtonBorder]'\n },\n quiet: 'none'\n }\n },\n forcedColorAdjust: 'none',\n transition: 'default',\n fontFamily: 'sans',\n overflow: {\n default: 'clip',\n variant: {\n quiet: 'visible'\n }\n },\n contain: 'layout',\n disableTapHighlight: true,\n userSelect: {\n isCardView: 'none'\n },\n cursor: {\n isLink: 'pointer'\n },\n width: {\n size: {\n XS: 112,\n S: 192,\n M: 240,\n L: 320,\n XL: size(400)\n },\n isCardView: 'full'\n },\n height: 'full',\n '--card-spacing': {\n type: 'paddingTop',\n value: {\n density: {\n compact: {\n size: {\n XS: size(6),\n S: 8,\n M: 12,\n L: 16,\n XL: 20\n }\n },\n regular: {\n size: {\n XS: 8,\n S: 12,\n M: 16,\n L: 20,\n XL: 24\n }\n },\n spacious: {\n size: {\n XS: 12,\n S: 16,\n M: 20,\n L: 24,\n XL: 28\n }\n }\n }\n }\n },\n '--card-padding-y': {\n type: 'paddingTop',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n '--card-padding-x': {\n type: 'paddingStart',\n value: {\n default: '--card-spacing',\n variant: {\n quiet: 0\n }\n }\n },\n paddingY: '--card-padding-y',\n paddingX: '--card-padding-x',\n boxSizing: 'border-box',\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid',\n // Focus ring moves to preview when quiet.\n variant: {\n quiet: 'none'\n }\n }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n position: 'absolute',\n inset: 0,\n zIndex: 2,\n borderRadius,\n pointerEvents: 'none',\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: 'gray-1000',\n transition: 'default',\n opacity: {\n default: 0,\n isSelected: 1\n },\n // Quiet cards with no checkbox have an extra inner stroke\n // to distinguish the selection indicator from the preview.\n outlineColor: 'gray-25',\n outlineOffset: -4,\n outlineStyle: {\n default: 'none',\n isStrokeInner: 'solid'\n },\n outlineWidth: 2\n});\n\nlet preview = style({\n position: 'relative',\n transition: 'default',\n overflow: 'clip',\n marginX: '[calc(var(--card-padding-x) -1)]',\n marginTop: '[calc(var(--card-padding-y) * -1)]',\n marginBottom: {\n ':last-child': '[calc(var(--card-padding-y) * -1)]'\n },\n borderRadius: {\n isQuiet: borderRadius\n },\n boxShadow: {\n isQuiet: {\n isHovered: 'elevated',\n isFocusVisible: 'elevated',\n isSelected: 'elevated'\n }\n },\n ...focusRing(),\n outlineStyle: {\n default: 'none',\n isQuiet: {\n isFocusVisible: 'solid'\n }\n }\n});\n\nconst image = style({\n width: 'full',\n aspectRatio: '[3/2]',\n objectFit: 'cover',\n userSelect: 'none',\n pointerEvents: 'none'\n});\n\nlet title = style({\n font: 'title',\n fontSize: {\n size: {\n XS: 'title-xs',\n S: 'title-xs',\n M: 'title-sm',\n L: 'title',\n XL: 'title-lg'\n }\n },\n lineClamp: 3,\n gridArea: 'title'\n});\n\nlet description = style({\n font: 'body',\n fontSize: {\n size: {\n XS: 'body-2xs',\n S: 'body-2xs',\n M: 'body-xs',\n L: 'body-sm',\n XL: 'body'\n }\n },\n lineClamp: 3,\n gridArea: 'description'\n});\n\nlet content = style({\n display: 'grid',\n // By default, all elements are displayed in a stack.\n // If an action menu is present, place it next to the title.\n gridTemplateColumns: {\n default: ['1fr'],\n ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n },\n gridTemplateAreas: {\n default: [\n 'title',\n 'description'\n ],\n ':has([data-slot=menu])': [\n 'title menu',\n 'description description'\n ]\n },\n columnGap: 4,\n flexGrow: 1,\n alignItems: 'baseline',\n alignContent: 'space-between',\n rowGap: {\n size: {\n XS: 4,\n S: 4,\n M: size(6),\n L: size(6),\n XL: 8\n }\n },\n paddingTop: {\n default: '--card-spacing',\n ':first-child': 0\n },\n paddingBottom: {\n default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n ':last-child': 0\n }\n});\n\nlet footer = style({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'end',\n justifyContent: 'space-between',\n gap: 8,\n paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const CardViewContext = createContext<'div' \| typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n isQuiet: boolean,\n size: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n isSelected: boolean,\n isHovered: boolean,\n isFocusVisible: boolean,\n isPressed: boolean,\n isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n isQuiet: false,\n size: 'M',\n isSelected: false,\n isHovered: false,\n isFocusVisible: false,\n isPressed: false,\n isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n XS: 'XS',\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n [props] = useSpectrumContextProps(props, ref, CardContext);\n let domRef = useDOMRef(ref);\n let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n let isQuiet = variant === 'quiet';\n let isSkeleton = useIsSkeleton();\n let children = (\n <Provider\n values={[\n [ImageContext, {alt: '', styles: image}],\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n title: {styles: title({size})},\n description: {styles: description({size})}\n }\n }],\n [ContentContext, {styles: content({size})}],\n [DividerContext, {size: 'S'}],\n [FooterContext, {styles: footer}],\n [ActionMenuContext, {\n isQuiet: true,\n size: actionButtonSize[size],\n isDisabled: isSkeleton,\n // @ts-ignore\n 'data-slot': 'menu',\n styles: style({gridArea: 'menu'})\n }],\n [SkeletonContext, isSkeleton]\n ]}>\n <ImageCoordinator>\n {typeof props.children === 'function' ? props.children({size}) : props.children}\n </ImageCoordinator>\n </Provider>\n );\n\n let ElementType = useContext(CardViewContext);\n if (ElementType === 'div' \|\| isSkeleton) {\n return (\n <div\n {...filterDOMProps(otherProps)}\n id={String(id)}\n // @ts-ignore - React < 19 compat\n inert={isSkeleton ? 'true' : undefined}\n ref={domRef}\n className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n style={UNSAFE_style}>\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n {children}\n </InternalCardContext.Provider>\n </div>\n );\n }\n\n let press = pressScale(domRef, UNSAFE_style);\n return (\n <ElementType\n {...props}\n ref={domRef}\n className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n style={renderProps => \n // Only the preview in quiet cards scales down on press\n variant === 'quiet' ? UNSAFE_style : press(renderProps) \n }>\n {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n {/* Selection indicator and checkbox move inside the preview for quiet cards /}\n {!isQuiet && <SelectionIndicator />}\n {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n <CardCheckbox />\n }\n {/ this makes the :first-child selector work even with the checkbox */}\n <div className={style({display: 'contents'})}>\n {children}\n </div>\n </InternalCardContext.Provider>\n )}\n </ElementType>\n );\n});\n\nfunction SelectionIndicator() {\n let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n return (\n <div\n className={selectionIndicator({\n size,\n isSelected,\n // Add an inner stroke only for quiet cards with no checkbox to \n // help distinguish the selected state from the preview.\n isStrokeInner: isQuiet && !isCheckboxSelection\n })} />\n );\n}\n\nfunction CardCheckbox() {\n let {size} = useContext(InternalCardContext);\n return (\n <div\n className={style({\n position: 'absolute',\n top: '--card-spacing',\n insetStart: '--card-spacing',\n zIndex: 2,\n padding: 4,\n backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n borderRadius: 'default',\n boxShadow: 'emphasized'\n })}>\n <Checkbox\n slot=\"selection\"\n excludeFromTabOrder\n size={size === 'XS' ? 'S' : size} />\n </div>\n );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n let {UNSAFE_className, UNSAFE_style} = props;\n let domRef = useDOMRef(ref);\n return (\n <div\n {...filterDOMProps(props)}\n slot=\"preview\"\n ref={domRef}\n className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n {isQuiet && <SelectionIndicator />}\n {isQuiet && isCheckboxSelection && <CardCheckbox />}\n <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n {props.children}\n </div>\n </div>\n );\n});\n\nconst collection = style({\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: {\n default: 4,\n size: {\n XS: 2,\n S: 2\n }\n }\n});\n\nconst collectionImage = style({\n width: 'full',\n aspectRatio: {\n default: 'square',\n ':nth-last-child(4):first-child': '[3/2]'\n },\n gridColumnEnd: {\n ':nth-last-child(4):first-child': 'span 3'\n },\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n let {size} = useContext(InternalCardContext)!;\n return (\n <CardPreview {...props} ref={ref}>\n <div className={collection({size})}>\n <ImageContext.Provider value={{styles: collectionImage}}>\n {props.children}\n </ImageContext.Provider>\n </div>\n </CardPreview>\n );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n return (\n <Card {...props} ref={ref} density=\"regular\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: 'square',\n objectFit: 'contain',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [IllustrationContext, {\n render(icon) {\n return (\n <SkeletonWrapper>\n <div\n className={style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'gray-100',\n aspectRatio: 'square'\n })}>\n {icon}\n </div>\n </SkeletonWrapper>\n );\n },\n styles: style({\n height: 'auto',\n maxSize: 160,\n // TODO: this is made up.\n width: '[50%]'\n })\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst avatarSize = {\n XS: 24,\n S: 48,\n M: 64,\n L: 64,\n XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and avatar.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[3/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n }],\n [AvatarContext, {\n size: avatarSize[size],\n UNSAFE_style: {\n '--size': avatarSize[size] + 'px'\n } as CSSProperties,\n styles: style({\n position: 'relative',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n }\n }),\n isOverBackground: true\n }]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n\nconst buttonSize = {\n XS: 'S',\n S: 'S',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' \| 'variant'> {\n // Quiet is not supported due to lack of indent between preview and thumbnail.\n variant?: 'primary' \| 'secondary' \| 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n let {size = 'M'} = props;\n return (\n <Card {...props} ref={ref} density=\"spacious\">\n {composeRenderProps(props.children, children => (\n <Provider\n values={[\n [ImageContext, {\n slots: {\n preview: {\n alt: '',\n styles: style({\n width: 'full',\n aspectRatio: '[5/1]',\n objectFit: 'cover',\n pointerEvents: 'none',\n userSelect: 'none'\n })\n },\n thumbnail: {\n alt: '',\n styles: style({\n position: 'relative',\n pointerEvents: 'none',\n userSelect: 'none',\n size: {\n size: {\n XS: 24,\n S: 36,\n M: 40,\n L: 44,\n XL: 56\n }\n },\n borderRadius: {\n default: 'default',\n size: {\n XS: 'sm',\n S: 'sm'\n }\n },\n objectFit: 'cover',\n marginTop: {\n default: 0,\n ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n },\n outlineStyle: 'solid',\n outlineWidth: {\n default: 2,\n size: {\n XS: 1\n }\n },\n outlineColor: '--s2-container-bg'\n })({size})\n }\n }\n }],\n [FooterContext, {\n styles: mergeStyles(footer, style({\n justifyContent: 'end'\n }))\n }],\n [ButtonContext, {size: buttonSize[size]}],\n [LinkButtonContext, {size: buttonSize[size]}]\n ]}>\n {children}\n </Provider>\n ))}\n </Card>\n );\n});\n"],"names":[],"version":3,"file":"Card.mjs.map"}

package/dist/CardView.cjs CHANGED Viewed

@@ -425,16 +425,20 @@ function $1aaf8931044a97bd$var$CardView(props, ref) {
         items: props.items,
         onLoadMore: props.onLoadMore
     }, domRef);
+    let ctx = (0, $gDulG$react.useMemo)(()=>({
+            size: size,
+            variant: variant
+        }), [
+        size,
+        variant
+    ]);
     return /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.UNSTABLE_Virtualizer), {
         layout: layout,
         layoutOptions: options,
         children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $230078a1c4ce81d8$exports.CardViewContext).Provider, {
             value: (0, $gDulG$reactariacomponents.GridListItem),
             children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $230078a1c4ce81d8$exports.CardContext).Provider, {
-                value: {
-                    size: size,
-                    variant: variant
-                },
+                value: ctx,
                 children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $a4f1585b527b9b7a$exports.ImageCoordinator), {
                     children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponents.GridList), {
                         ref: domRef,