@fluentui/react-card 0.0.0-nightly-20250827-0407.1 → 0.0.0-nightly-20250829-0406.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -15
- package/dist/index.d.ts +17 -4
- package/lib/components/Card/Card.types.js.map +1 -1
- package/lib/components/Card/CardContext.js.map +1 -1
- package/lib/components/Card/renderCard.js.map +1 -1
- package/lib/components/Card/useCard.js +32 -10
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardSelectable.js +5 -2
- package/lib/components/Card/useCardSelectable.js.map +1 -1
- package/lib/components/Card/useCardStyles.styles.js +89 -7
- package/lib/components/Card/useCardStyles.styles.js.map +1 -1
- package/lib/components/Card/useCardStyles.styles.raw.js +40 -3
- package/lib/components/Card/useCardStyles.styles.raw.js.map +1 -1
- package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
- package/lib-commonjs/components/Card/Card.types.js.map +1 -1
- package/lib-commonjs/components/Card/CardContext.js.map +1 -1
- package/lib-commonjs/components/Card/renderCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +32 -10
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCardSelectable.js +5 -2
- package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.styles.js +167 -6
- package/lib-commonjs/components/Card/useCardStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.styles.raw.js +40 -3
- package/lib-commonjs/components/Card/useCardStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
- package/package.json +12 -12
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport { FocusOutlineStyleOptions, createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it.\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n },\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n});\n\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus',\n }),\n },\n\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within',\n }),\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the last element.\n // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n flexGrow: 1,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n },\n\n interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor',\n },\n },\n\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n },\n\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected,\n },\n },\n\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n },\n },\n\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n },\n\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: 1,\n },\n\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n 'use no memo';\n\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n };\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n };\n\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle,\n };\n\n const selectedMap = {\n filled: styles.filledInteractiveSelected,\n 'filled-alternative': styles.filledAlternativeInteractiveSelected,\n outline: styles.outlineInteractiveSelected,\n subtle: styles.subtleInteractiveSelected,\n };\n const interactiveMap = {\n filled: styles.filledInteractive,\n 'filled-alternative': styles.filledAlternativeInteractive,\n outline: styles.outlineInteractive,\n subtle: styles.subtleInteractive,\n };\n\n const isSelectableOrInteractive = state.interactive || state.selectable;\n\n const focusedClassName = React.useMemo(() => {\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n\n return '';\n }\n\n return styles.focused;\n }, [state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n resetStyles,\n orientationMap[state.orientation],\n sizeMap[state.size],\n appearanceMap[state.appearance],\n isSelectableOrInteractive && styles.interactive,\n isSelectableOrInteractive && interactiveMap[state.appearance],\n state.selected && selectedMap[state.appearance],\n focusedClassName,\n isSelectableOrInteractive && styles.highContrastInteractive,\n state.selected && styles.highContrastSelected,\n state.root.className,\n );\n\n if (state.floatingAction) {\n state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","backgroundColor","colorNeutralBackground1","boxShadow","shadow4","borderColor","colorTransparentStroke","filledInteractive","cursor","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","zIndex","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles, GriffelStyle } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport { FocusOutlineStyleOptions, createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it.\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n },\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n});\n\nconst disabledStyles: GriffelStyle = {\n cursor: 'not-allowed',\n userSelect: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n boxShadow: tokens.shadow2,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n zIndex: `calc(${tokens.zIndexContent} + 1)`,\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n};\n\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus',\n }),\n },\n\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within',\n }),\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the last element.\n // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n flexGrow: 1,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n },\n\n interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor',\n },\n },\n\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n },\n\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected,\n },\n },\n\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n },\n },\n outlineDisabled: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '&:hover, &:active': {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n },\n\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: tokens.zIndexContent,\n },\n\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n },\n\n disabled: {\n ...disabledStyles,\n '&:hover, &:active': disabledStyles,\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n 'use no memo';\n\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n };\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n };\n\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle,\n };\n\n const selectedMap = {\n filled: styles.filledInteractiveSelected,\n 'filled-alternative': styles.filledAlternativeInteractiveSelected,\n outline: styles.outlineInteractiveSelected,\n subtle: styles.subtleInteractiveSelected,\n };\n const interactiveMap = {\n filled: styles.filledInteractive,\n 'filled-alternative': styles.filledAlternativeInteractive,\n outline: styles.outlineInteractive,\n subtle: styles.subtleInteractive,\n };\n\n const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n\n const focusedClassName = React.useMemo(() => {\n if (state.disabled) {\n return '';\n }\n\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n\n return '';\n }\n\n return styles.focused;\n }, [state.disabled, state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n resetStyles,\n orientationMap[state.orientation],\n sizeMap[state.size],\n appearanceMap[state.appearance],\n isSelectableOrInteractive && styles.interactive,\n isSelectableOrInteractive && interactiveMap[state.appearance],\n state.selected && selectedMap[state.appearance],\n focusedClassName,\n isSelectableOrInteractive && styles.highContrastInteractive,\n state.selected && styles.highContrastSelected,\n state.disabled && styles.disabled,\n state.disabled && state.appearance === 'outline' && styles.outlineDisabled,\n state.root.className,\n );\n\n if (state.floatingAction) {\n state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","disabledStyles","cursor","userSelect","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","inset","zIndex","zIndexContent","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","colorNeutralBackground1","shadow4","colorTransparentStroke","filledInteractive","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","outlineDisabled","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","disabled","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/CardFooter/renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n assertSlots<CardFooterSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardFooter_unstable","state","root","children","action"],"mappings":";;;;+
|
1
|
+
{"version":3,"sources":["../src/components/CardFooter/renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState): JSXElement => {\n assertSlots<CardFooterSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardFooter_unstable","state","root","children","action"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/CardHeader/renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n assertSlots<CardHeaderSlots>(state);\n\n return (\n <state.root>\n {state.image && <state.image />}\n {state.header && <state.header />}\n {state.description && <state.description />}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardHeader_unstable","state","root","image","header","description","action"],"mappings":";;;;+
|
1
|
+
{"version":3,"sources":["../src/components/CardHeader/renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState): JSXElement => {\n assertSlots<CardHeaderSlots>(state);\n\n return (\n <state.root>\n {state.image && <state.image />}\n {state.header && <state.header />}\n {state.description && <state.description />}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardHeader_unstable","state","root","image","header","description","action"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,KAAK,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,KAAK,EAAA,CAAA;YAC3BF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;YAC7BH,MAAMI,WAAW,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,WAAW,EAAA,CAAA;YACvCJ,MAAMK,MAAM,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/CardPreview/renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\n assertSlots<CardPreviewSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.logo && <state.logo />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardPreview_unstable","state","root","children","logo"],"mappings":";;;;+
|
1
|
+
{"version":3,"sources":["../src/components/CardPreview/renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState): JSXElement => {\n assertSlots<CardPreviewSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.logo && <state.logo />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardPreview_unstable","state","root","children","logo"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;;;AAGhC,EAAE"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-card",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20250829-0406.1",
|
4
4
|
"private": false,
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
6
6
|
"main": "lib-commonjs/index.js",
|
@@ -14,21 +14,21 @@
|
|
14
14
|
"license": "MIT",
|
15
15
|
"devDependencies": {
|
16
16
|
"@fluentui/eslint-plugin": "*",
|
17
|
-
"@fluentui/react-button": "0.0.0-nightly-
|
18
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
19
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
20
|
-
"@fluentui/react-provider": "0.0.0-nightly-
|
17
|
+
"@fluentui/react-button": "0.0.0-nightly-20250829-0406.1",
|
18
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20250829-0406.1",
|
19
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20250829-0406.1",
|
20
|
+
"@fluentui/react-provider": "0.0.0-nightly-20250829-0406.1",
|
21
21
|
"@fluentui/scripts-api-extractor": "*",
|
22
22
|
"@fluentui/scripts-cypress": "*"
|
23
23
|
},
|
24
24
|
"dependencies": {
|
25
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
26
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
27
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
28
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
29
|
-
"@fluentui/react-text": "0.0.0-nightly-
|
30
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
31
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
25
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20250829-0406.1",
|
26
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20250829-0406.1",
|
27
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20250829-0406.1",
|
28
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20250829-0406.1",
|
29
|
+
"@fluentui/react-text": "0.0.0-nightly-20250829-0406.1",
|
30
|
+
"@fluentui/react-theme": "0.0.0-nightly-20250829-0406.1",
|
31
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20250829-0406.1",
|
32
32
|
"@griffel/react": "^1.5.22",
|
33
33
|
"@swc/helpers": "^0.5.1"
|
34
34
|
},
|