@fluentui/react-calendar-compat 0.0.0-nightly-20250717-0406.1 → 0.0.0-nightly-20250721-0406.1

package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js

@@ -0,0 +1,303 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    calendarPickerClassNames: function() {
+        return calendarPickerClassNames;
+    },
+    useCalendarPickerStyles_unstable: function() {
+        return useCalendarPickerStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _animations = require("../../utils/animations");
+const _Calendartypes = require("../Calendar/Calendar.types");
+const calendarPickerClassNames = {
+    root: 'fui-CalendarPicker',
+    headerContainer: 'fui-CalendarPicker__headerContainer',
+    currentItemButton: 'fui-CalendarPicker__currentItemButton',
+    navigationButtonsContainer: 'fui-CalendarPicker__navigationButtonsContainer',
+    navigationButton: 'fui-CalendarPicker__navigationButton',
+    gridContainer: 'fui-CalendarPicker__gridContainer',
+    buttonRow: 'fui-CalendarPicker__buttonRow',
+    itemButton: 'fui-CalendarPicker__itemButton',
+    current: 'fui-CalendarPicker__current',
+    selected: 'fui-CalendarPicker__selected',
+    disabled: 'fui-CalendarPicker__disabled'
+};
+const useRootStyles = (0, _react.makeStyles)({
+    base: {
+        boxSizing: 'content-box',
+        overflow: 'hidden',
+        padding: '12px',
+        width: '196px'
+    },
+    normalize: {
+        boxShadow: 'none',
+        boxSizing: 'border-box',
+        margin: '0',
+        padding: '0'
+    }
+});
+const useHeaderContainerStyles = (0, _react.makeStyles)({
+    base: {
+        display: 'flex'
+    }
+});
+const useCurrentItemButtonStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderStyle('none'),
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        color: 'inherit',
+        flexGrow: 1,
+        fontFamily: 'inherit',
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        overflow: 'visible',
+        padding: '0 4px 0 10px',
+        textAlign: 'left'
+    },
+    animation: {
+        animationDuration: _animations.DURATION_2,
+        animationFillMode: 'both',
+        animationName: _animations.FADE_IN,
+        animationTimingFunction: _animations.EASING_FUNCTION_2
+    },
+    hasHeaderClickCallback: {
+        // If this is updated, make sure to update headerIsClickable in useCalendarDayStyles as well
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
+            color: _reacttheme.tokens.colorBrandForegroundOnLightHover,
+            cursor: 'pointer',
+            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
+        },
+        '&:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed,
+            color: _reacttheme.tokens.colorBrandForegroundOnLightPressed,
+            cursor: 'pointer',
+            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
+        }
+    }
+});
+const useNavigationButtonsContainerStyles = (0, _react.makeStyles)({
+    base: {
+        alignItems: 'center',
+        display: 'flex'
+    }
+});
+const useNavigationButtonStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        border: 'none',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        display: 'block',
+        fontFamily: 'inherit',
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        height: '28px',
+        lineHeight: '28px',
+        minHeight: '28px',
+        minWidth: '28px',
+        overflow: 'visible',
+        padding: '0',
+        position: 'relative',
+        textAlign: 'center',
+        width: '28px',
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
+            color: _reacttheme.tokens.colorBrandForegroundOnLightHover,
+            cursor: 'pointer',
+            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
+        },
+        '&:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed,
+            color: _reacttheme.tokens.colorBrandForegroundOnLightPressed
+        }
+    }
+});
+const useGridContainerStyles = (0, _react.makeStyles)({
+    base: {
+        marginTop: '4px'
+    }
+});
+const useButtonRowStyles = (0, _react.makeStyles)({
+    base: {
+        marginBottom: '16px',
+        '&:last-of-type': {
+            marginBottom: 0
+        }
+    },
+    animation: {
+        animationDuration: _animations.DURATION_3,
+        animationFillMode: 'both',
+        animationTimingFunction: _animations.EASING_FUNCTION_1
+    },
+    horizontalBackward: {
+        animationName: [
+            _animations.FADE_IN,
+            _animations.SLIDE_RIGHT_IN20
+        ]
+    },
+    horizontalForward: {
+        animationName: [
+            _animations.FADE_IN,
+            _animations.SLIDE_LEFT_IN20
+        ]
+    },
+    verticalBackward: {
+        animationName: [
+            _animations.FADE_IN,
+            _animations.SLIDE_DOWN_IN20
+        ]
+    },
+    verticalForward: {
+        animationName: [
+            _animations.FADE_IN,
+            _animations.SLIDE_UP_IN20
+        ]
+    }
+});
+const useItemButtonStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        border: 'none',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        fontFamily: 'inherit',
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        height: '40px',
+        lineHeight: '40px',
+        minHeight: '40px',
+        minWidth: '40px',
+        margin: '0 12px 0 0',
+        overflow: 'visible',
+        padding: '0',
+        width: '40px',
+        '&:nth-child(4n + 4)': {
+            marginRight: 0
+        },
+        '&:nth-child(n + 9)': {
+            marginBottom: 0
+        },
+        '& div': {
+            fontWeight: _reacttheme.tokens.fontWeightRegular
+        },
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
+            color: _reacttheme.tokens.colorNeutralForeground1Static,
+            cursor: 'pointer',
+            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Window',
+                color: 'WindowText',
+                forcedColorAdjust: 'none',
+                outline: '1px solid Highlight'
+            }
+        },
+        '&:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Window',
+                color: 'Highlight',
+                forcedColorAdjust: 'none'
+            }
+        }
+    }
+});
+const useCurrentStyles = (0, _react.makeStyles)({
+    highlightCurrent: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        '@media (forced-colors: active)': {
+            backgroundColor: 'WindowText',
+            color: 'Window',
+            forcedColorAdjust: 'none'
+        },
+        '&:hover, &:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackground,
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'WindowText',
+                color: 'Window',
+                forcedColorAdjust: 'none'
+            }
+        }
+    }
+});
+const useSelectedStyles = (0, _react.makeStyles)({
+    highlightSelected: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedSelected,
+        color: _reacttheme.tokens.colorNeutralForeground1Static,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Highlight',
+            color: 'Window',
+            forcedColorAdjust: 'none'
+        },
+        '& div': {
+            fontWeight: _reacttheme.tokens.fontWeightSemibold
+        },
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedSelected,
+            color: _reacttheme.tokens.colorNeutralForeground1Static,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+                color: 'Window',
+                forcedColorAdjust: 'none'
+            }
+        },
+        '&:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed
+        }
+    }
+});
+const useDisabledStyles = (0, _react.makeStyles)({
+    base: {
+        '&, &:disabled, & button': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            pointerEvents: 'none'
+        },
+        '@media (forced-colors: active)': {
+            color: 'GrayText',
+            forcedColorAdjust: 'none'
+        }
+    }
+});
+const useCalendarPickerStyles_unstable = (props)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const headerContainerStyles = useHeaderContainerStyles();
+    const currentItemButtonStyles = useCurrentItemButtonStyles();
+    const navigationButtonsContainerStyles = useNavigationButtonsContainerStyles();
+    const navigationButtonStyles = useNavigationButtonStyles();
+    const gridContainerStyles = useGridContainerStyles();
+    const buttonRowStyles = useButtonRowStyles();
+    const itemButtonStyles = useItemButtonStyles();
+    const currentStyles = useCurrentStyles();
+    const selectedStyles = useSelectedStyles();
+    const disabledStyles = useDisabledStyles();
+    const { animateBackwards, animationDirection, className, hasHeaderClickCallback, highlightCurrent, highlightSelected } = props;
+    return {
+        root: (0, _react.mergeClasses)(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),
+        headerContainer: (0, _react.mergeClasses)(calendarPickerClassNames.headerContainer, headerContainerStyles.base),
+        currentItemButton: (0, _react.mergeClasses)(calendarPickerClassNames.currentItemButton, currentItemButtonStyles.base, animateBackwards !== undefined && currentItemButtonStyles.animation, hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback),
+        navigationButtonsContainer: (0, _react.mergeClasses)(calendarPickerClassNames.navigationButtonsContainer, navigationButtonsContainerStyles.base),
+        navigationButton: (0, _react.mergeClasses)(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),
+        gridContainer: (0, _react.mergeClasses)(calendarPickerClassNames.gridContainer, gridContainerStyles.base),
+        buttonRow: (0, _react.mergeClasses)(calendarPickerClassNames.buttonRow, buttonRowStyles.base, buttonRowStyles.animation, animateBackwards !== undefined && (animationDirection === _Calendartypes.AnimationDirection.Horizontal ? animateBackwards ? buttonRowStyles.horizontalBackward : buttonRowStyles.horizontalForward : animateBackwards ? buttonRowStyles.verticalBackward : buttonRowStyles.verticalForward)),
+        itemButton: (0, _react.mergeClasses)(calendarPickerClassNames.itemButton, itemButtonStyles.base),
+        selected: (0, _react.mergeClasses)(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),
+        current: (0, _react.mergeClasses)(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),
+        disabled: (0, _react.mergeClasses)(calendarPickerClassNames.disabled, disabledStyles.base)
+    };
+};

package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CalendarPicker/useCalendarPickerStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport {\n  DURATION_2,\n  DURATION_3,\n  EASING_FUNCTION_1,\n  EASING_FUNCTION_2,\n  FADE_IN,\n  SLIDE_DOWN_IN20,\n  SLIDE_LEFT_IN20,\n  SLIDE_RIGHT_IN20,\n  SLIDE_UP_IN20,\n} from '../../utils/animations';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarPickerStyles, CalendarPickerStyleProps } from './CalendarPicker.types';\n\n/**\n * @internal\n */\nexport const calendarPickerClassNames: SlotClassNames<CalendarPickerStyles> = {\n  root: 'fui-CalendarPicker',\n  headerContainer: 'fui-CalendarPicker__headerContainer',\n  currentItemButton: 'fui-CalendarPicker__currentItemButton',\n  navigationButtonsContainer: 'fui-CalendarPicker__navigationButtonsContainer',\n  navigationButton: 'fui-CalendarPicker__navigationButton',\n  gridContainer: 'fui-CalendarPicker__gridContainer',\n  buttonRow: 'fui-CalendarPicker__buttonRow',\n  itemButton: 'fui-CalendarPicker__itemButton',\n  current: 'fui-CalendarPicker__current',\n  selected: 'fui-CalendarPicker__selected',\n  disabled: 'fui-CalendarPicker__disabled',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    boxSizing: 'content-box',\n    overflow: 'hidden',\n    padding: '12px',\n    width: '196px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    margin: '0',\n    padding: '0',\n  },\n});\n\nconst useHeaderContainerStyles = makeStyles({\n  base: {\n    display: 'flex',\n  },\n});\n\nconst useCurrentItemButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    color: 'inherit',\n    flexGrow: 1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    overflow: 'visible',\n    padding: '0 4px 0 10px',\n    textAlign: 'left',\n  },\n  animation: {\n    animationDuration: DURATION_2,\n    animationFillMode: 'both',\n    animationName: FADE_IN,\n    animationTimingFunction: EASING_FUNCTION_2,\n  },\n  hasHeaderClickCallback: {\n    // If this is updated, make sure to update headerIsClickable in useCalendarDayStyles as well\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n  },\n});\n\nconst useNavigationButtonsContainerStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'flex',\n  },\n});\n\nconst useNavigationButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground1,\n    display: 'block',\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '28px',\n    lineHeight: '28px',\n    minHeight: '28px',\n    minWidth: '28px',\n    overflow: 'visible',\n    padding: '0',\n    position: 'relative',\n    textAlign: 'center',\n    width: '28px',\n\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n    },\n  },\n});\n\nconst useGridContainerStyles = makeStyles({\n  base: {\n    marginTop: '4px',\n  },\n});\n\nconst useButtonRowStyles = makeStyles({\n  base: {\n    marginBottom: '16px',\n    '&:last-of-type': {\n      marginBottom: 0,\n    },\n  },\n  animation: {\n    animationDuration: DURATION_3,\n    animationFillMode: 'both',\n    animationTimingFunction: EASING_FUNCTION_1,\n  },\n  horizontalBackward: {\n    animationName: [FADE_IN, SLIDE_RIGHT_IN20],\n  },\n  horizontalForward: {\n    animationName: [FADE_IN, SLIDE_LEFT_IN20],\n  },\n  verticalBackward: {\n    animationName: [FADE_IN, SLIDE_DOWN_IN20],\n  },\n  verticalForward: {\n    animationName: [FADE_IN, SLIDE_UP_IN20],\n  },\n});\n\nconst useItemButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground3,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '40px',\n    lineHeight: '40px',\n    minHeight: '40px',\n    minWidth: '40px',\n    margin: '0 12px 0 0',\n    overflow: 'visible',\n    padding: '0',\n    width: '40px',\n\n    '&:nth-child(4n + 4)': {\n      marginRight: 0,\n    },\n    '&:nth-child(n + 9)': {\n      marginBottom: 0,\n    },\n    '& div': {\n      fontWeight: tokens.fontWeightRegular,\n    },\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorNeutralForeground1Static,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n        color: 'WindowText',\n        forcedColorAdjust: 'none',\n        outline: '1px solid Highlight',\n      },\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n});\n\nconst useCurrentStyles = makeStyles({\n  highlightCurrent: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    fontWeight: tokens.fontWeightSemibold,\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'WindowText',\n      color: 'Window',\n      forcedColorAdjust: 'none',\n    },\n    '&:hover, &:hover:active': {\n      backgroundColor: tokens.colorBrandBackground,\n      color: tokens.colorNeutralForegroundOnBrand,\n\n      '@media (forced-colors: active)': {\n        backgroundColor: 'WindowText',\n        color: 'Window',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n});\n\nconst useSelectedStyles = makeStyles({\n  highlightSelected: {\n    backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    color: tokens.colorNeutralForeground1Static,\n    fontWeight: tokens.fontWeightSemibold,\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      color: 'Window',\n      forcedColorAdjust: 'none',\n    },\n    '& div': {\n      fontWeight: tokens.fontWeightSemibold,\n    },\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n      color: tokens.colorNeutralForeground1Static,\n\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'Window',\n        forcedColorAdjust: 'none',\n      },\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n    },\n  },\n});\n\nconst useDisabledStyles = makeStyles({\n  base: {\n    '&, &:disabled, & button': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      forcedColorAdjust: 'none',\n    },\n  },\n});\n\n/**\n * @internal\n *\n * Apply styling to the CalendarPicker slots based on the state\n */\nexport const useCalendarPickerStyles_unstable = (props: CalendarPickerStyleProps): CalendarPickerStyles => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const headerContainerStyles = useHeaderContainerStyles();\n  const currentItemButtonStyles = useCurrentItemButtonStyles();\n  const navigationButtonsContainerStyles = useNavigationButtonsContainerStyles();\n  const navigationButtonStyles = useNavigationButtonStyles();\n  const gridContainerStyles = useGridContainerStyles();\n  const buttonRowStyles = useButtonRowStyles();\n  const itemButtonStyles = useItemButtonStyles();\n  const currentStyles = useCurrentStyles();\n  const selectedStyles = useSelectedStyles();\n  const disabledStyles = useDisabledStyles();\n\n  const {\n    animateBackwards,\n    animationDirection,\n    className,\n    hasHeaderClickCallback,\n    highlightCurrent,\n    highlightSelected,\n  } = props;\n\n  return {\n    root: mergeClasses(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),\n    headerContainer: mergeClasses(calendarPickerClassNames.headerContainer, headerContainerStyles.base),\n    currentItemButton: mergeClasses(\n      calendarPickerClassNames.currentItemButton,\n      currentItemButtonStyles.base,\n      animateBackwards !== undefined && currentItemButtonStyles.animation,\n      hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback,\n    ),\n    navigationButtonsContainer: mergeClasses(\n      calendarPickerClassNames.navigationButtonsContainer,\n      navigationButtonsContainerStyles.base,\n    ),\n    navigationButton: mergeClasses(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),\n    gridContainer: mergeClasses(calendarPickerClassNames.gridContainer, gridContainerStyles.base),\n    buttonRow: mergeClasses(\n      calendarPickerClassNames.buttonRow,\n      buttonRowStyles.base,\n      buttonRowStyles.animation,\n      animateBackwards !== undefined &&\n        (animationDirection === AnimationDirection.Horizontal\n          ? animateBackwards\n            ? buttonRowStyles.horizontalBackward\n            : buttonRowStyles.horizontalForward\n          : animateBackwards\n          ? buttonRowStyles.verticalBackward\n          : buttonRowStyles.verticalForward),\n    ),\n    itemButton: mergeClasses(calendarPickerClassNames.itemButton, itemButtonStyles.base),\n    selected: mergeClasses(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),\n    current: mergeClasses(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),\n    disabled: mergeClasses(calendarPickerClassNames.disabled, disabledStyles.base),\n  };\n};\n"],"names":["calendarPickerClassNames","useCalendarPickerStyles_unstable","root","headerContainer","currentItemButton","navigationButtonsContainer","navigationButton","gridContainer","buttonRow","itemButton","current","selected","disabled","useRootStyles","makeStyles","base","boxSizing","overflow","padding","width","normalize","boxShadow","margin","useHeaderContainerStyles","display","useCurrentItemButtonStyles","backgroundColor","tokens","colorTransparentBackground","shorthands","borderStyle","borderRadius","borderRadiusMedium","color","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","textAlign","animation","animationDuration","DURATION_2","animationFillMode","animationName","FADE_IN","animationTimingFunction","EASING_FUNCTION_2","hasHeaderClickCallback","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useNavigationButtonsContainerStyles","alignItems","useNavigationButtonStyles","border","colorNeutralForeground1","fontSizeBase200","height","lineHeight","minHeight","minWidth","position","useGridContainerStyles","marginTop","useButtonRowStyles","marginBottom","DURATION_3","EASING_FUNCTION_1","horizontalBackward","SLIDE_RIGHT_IN20","horizontalForward","SLIDE_LEFT_IN20","verticalBackward","SLIDE_DOWN_IN20","verticalForward","SLIDE_UP_IN20","useItemButtonStyles","colorNeutralForeground3","marginRight","fontWeightRegular","colorNeutralForeground1Static","forcedColorAdjust","useCurrentStyles","highlightCurrent","colorBrandBackground","colorNeutralForegroundOnBrand","useSelectedStyles","highlightSelected","colorBrandBackgroundInvertedSelected","useDisabledStyles","colorNeutralForegroundDisabled","pointerEvents","props","rootStyles","headerContainerStyles","currentItemButtonStyles","navigationButtonsContainerStyles","navigationButtonStyles","gridContainerStyles","buttonRowStyles","itemButtonStyles","currentStyles","selectedStyles","disabledStyles","animateBackwards","animationDirection","className","mergeClasses","undefined","AnimationDirection","Horizontal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoBaA,wBAAAA;eAAAA;;IA2QAC,gCAAAA;eAAAA;;;4BA/RU;uBAC8B;4BAW9C;+BAC4B;AAO5B,MAAMD,2BAAiE;IAC5EE,MAAM;IACNC,iBAAiB;IACjBC,mBAAmB;IACnBC,4BAA4B;IAC5BC,kBAAkB;IAClBC,eAAe;IACfC,WAAW;IACXC,YAAY;IACZC,SAAS;IACTC,UAAU;IACVC,UAAU;AACZ;AAEA,MAAMC,gBAAgBC,IAAAA,iBAAAA,EAAW;IAC/BC,MAAM;QACJC,WAAW;QACXC,UAAU;QACVC,SAAS;QACTC,OAAO;IACT;IACAC,WAAW;QACTC,WAAW;QACXL,WAAW;QACXM,QAAQ;QACRJ,SAAS;IACX;AACF;AAEA,MAAMK,2BAA2BT,IAAAA,iBAAAA,EAAW;IAC1CC,MAAM;QACJS,SAAS;IACX;AACF;AAEA,MAAMC,6BAA6BX,IAAAA,iBAAAA,EAAW;IAC5CC,MAAM;QACJW,iBAAiBC,kBAAAA,CAAOC,0BAA0B;QAClD,GAAGC,iBAAAA,CAAWC,WAAW,CAAC,OAAO;QACjCC,cAAcJ,kBAAAA,CAAOK,kBAAkB;QACvCC,OAAO;QACPC,UAAU;QACVC,YAAY;QACZC,UAAUT,kBAAAA,CAAOU,eAAe;QAChCC,YAAYX,kBAAAA,CAAOY,kBAAkB;QACrCtB,UAAU;QACVC,SAAS;QACTsB,WAAW;IACb;IACAC,WAAW;QACTC,mBAAmBC,sBAAAA;QACnBC,mBAAmB;QACnBC,eAAeC,mBAAAA;QACfC,yBAAyBC,6BAAAA;IAC3B;IACAC,wBAAwB;QACtB,4FAA4F;QAC5F,WAAW;YACTvB,iBAAiBC,kBAAAA,CAAOuB,iCAAiC;YACzDjB,OAAON,kBAAAA,CAAOwB,gCAAgC;YAC9CC,QAAQ;YACRC,SAAS,CAAC,UAAU,EAAE1B,kBAAAA,CAAO2B,sBAAsB,CAAC,CAAC;QACvD;QACA,kBAAkB;YAChB5B,iBAAiBC,kBAAAA,CAAO4B,mCAAmC;YAC3DtB,OAAON,kBAAAA,CAAO6B,kCAAkC;YAChDJ,QAAQ;YACRC,SAAS,CAAC,UAAU,EAAE1B,kBAAAA,CAAO2B,sBAAsB,CAAC,CAAC;QACvD;IACF;AACF;AAEA,MAAMG,sCAAsC3C,IAAAA,iBAAAA,EAAW;IACrDC,MAAM;QACJ2C,YAAY;QACZlC,SAAS;IACX;AACF;AAEA,MAAMmC,4BAA4B7C,IAAAA,iBAAAA,EAAW;IAC3CC,MAAM;QACJW,iBAAiBC,kBAAAA,CAAOC,0BAA0B;QAClDgC,QAAQ;QACR7B,cAAcJ,kBAAAA,CAAOK,kBAAkB;QACvCC,OAAON,kBAAAA,CAAOkC,uBAAuB;QACrCrC,SAAS;QACTW,YAAY;QACZC,UAAUT,kBAAAA,CAAOmC,eAAe;QAChCC,QAAQ;QACRC,YAAY;QACZC,WAAW;QACXC,UAAU;QACVjD,UAAU;QACVC,SAAS;QACTiD,UAAU;QACV3B,WAAW;QACXrB,OAAO;QAEP,WAAW;YACTO,iBAAiBC,kBAAAA,CAAOuB,iCAAiC;YACzDjB,OAAON,kBAAAA,CAAOwB,gCAAgC;YAC9CC,QAAQ;YACRC,SAAS,CAAC,UAAU,EAAE1B,kBAAAA,CAAO2B,sBAAsB,CAAC,CAAC;QACvD;QAEA,kBAAkB;YAChB5B,iBAAiBC,kBAAAA,CAAO4B,mCAAmC;YAC3DtB,OAAON,kBAAAA,CAAO6B,kCAAkC;QAClD;IACF;AACF;AAEA,MAAMY,yBAAyBtD,IAAAA,iBAAAA,EAAW;IACxCC,MAAM;QACJsD,WAAW;IACb;AACF;AAEA,MAAMC,qBAAqBxD,IAAAA,iBAAAA,EAAW;IACpCC,MAAM;QACJwD,cAAc;QACd,kBAAkB;YAChBA,cAAc;QAChB;IACF;IACA9B,WAAW;QACTC,mBAAmB8B,sBAAAA;QACnB5B,mBAAmB;QACnBG,yBAAyB0B,6BAAAA;IAC3B;IACAC,oBAAoB;QAClB7B,eAAe;YAACC,mBAAAA;YAAS6B,4BAAAA;SAAiB;IAC5C;IACAC,mBAAmB;QACjB/B,eAAe;YAACC,mBAAAA;YAAS+B,2BAAAA;SAAgB;IAC3C;IACAC,kBAAkB;QAChBjC,eAAe;YAACC,mBAAAA;YAASiC,2BAAAA;SAAgB;IAC3C;IACAC,iBAAiB;QACfnC,eAAe;YAACC,mBAAAA;YAASmC,yBAAAA;SAAc;IACzC;AACF;AAEA,MAAMC,sBAAsBpE,IAAAA,iBAAAA,EAAW;IACrCC,MAAM;QACJW,iBAAiBC,kBAAAA,CAAOC,0BAA0B;QAClDgC,QAAQ;QACR7B,cAAcJ,kBAAAA,CAAOK,kBAAkB;QACvCC,OAAON,kBAAAA,CAAOwD,uBAAuB;QACrChD,YAAY;QACZC,UAAUT,kBAAAA,CAAOmC,eAAe;QAChCC,QAAQ;QACRC,YAAY;QACZC,WAAW;QACXC,UAAU;QACV5C,QAAQ;QACRL,UAAU;QACVC,SAAS;QACTC,OAAO;QAEP,uBAAuB;YACrBiE,aAAa;QACf;QACA,sBAAsB;YACpBb,cAAc;QAChB;QACA,SAAS;YACPjC,YAAYX,kBAAAA,CAAO0D,iBAAiB;QACtC;QACA,WAAW;YACT3D,iBAAiBC,kBAAAA,CAAOuB,iCAAiC;YACzDjB,OAAON,kBAAAA,CAAO2D,6BAA6B;YAC3ClC,QAAQ;YACRC,SAAS,CAAC,UAAU,EAAE1B,kBAAAA,CAAO2B,sBAAsB,CAAC,CAAC;YAErD,kCAAkC;gBAChC5B,iBAAiB;gBACjBO,OAAO;gBACPsD,mBAAmB;gBACnBlC,SAAS;YACX;QACF;QACA,kBAAkB;YAChB3B,iBAAiBC,kBAAAA,CAAO4B,mCAAmC;YAE3D,kCAAkC;gBAChC7B,iBAAiB;gBACjBO,OAAO;gBACPsD,mBAAmB;YACrB;QACF;IACF;AACF;AAEA,MAAMC,mBAAmB1E,IAAAA,iBAAAA,EAAW;IAClC2E,kBAAkB;QAChB/D,iBAAiBC,kBAAAA,CAAO+D,oBAAoB;QAC5CzD,OAAON,kBAAAA,CAAOgE,6BAA6B;QAC3CrD,YAAYX,kBAAAA,CAAOY,kBAAkB;QAErC,kCAAkC;YAChCb,iBAAiB;YACjBO,OAAO;YACPsD,mBAAmB;QACrB;QACA,2BAA2B;YACzB7D,iBAAiBC,kBAAAA,CAAO+D,oBAAoB;YAC5CzD,OAAON,kBAAAA,CAAOgE,6BAA6B;YAE3C,kCAAkC;gBAChCjE,iBAAiB;gBACjBO,OAAO;gBACPsD,mBAAmB;YACrB;QACF;IACF;AACF;AAEA,MAAMK,oBAAoB9E,IAAAA,iBAAAA,EAAW;IACnC+E,mBAAmB;QACjBnE,iBAAiBC,kBAAAA,CAAOmE,oCAAoC;QAC5D7D,OAAON,kBAAAA,CAAO2D,6BAA6B;QAC3ChD,YAAYX,kBAAAA,CAAOY,kBAAkB;QAErC,kCAAkC;YAChCb,iBAAiB;YACjBO,OAAO;YACPsD,mBAAmB;QACrB;QACA,SAAS;YACPjD,YAAYX,kBAAAA,CAAOY,kBAAkB;QACvC;QACA,WAAW;YACTb,iBAAiBC,kBAAAA,CAAOmE,oCAAoC;YAC5D7D,OAAON,kBAAAA,CAAO2D,6BAA6B;YAE3C,kCAAkC;gBAChC5D,iBAAiB;gBACjBO,OAAO;gBACPsD,mBAAmB;YACrB;QACF;QACA,kBAAkB;YAChB7D,iBAAiBC,kBAAAA,CAAO4B,mCAAmC;QAC7D;IACF;AACF;AAEA,MAAMwC,oBAAoBjF,IAAAA,iBAAAA,EAAW;IACnCC,MAAM;QACJ,2BAA2B;YACzBkB,OAAON,kBAAAA,CAAOqE,8BAA8B;YAC5CC,eAAe;QACjB;QACA,kCAAkC;YAChChE,OAAO;YACPsD,mBAAmB;QACrB;IACF;AACF;AAOO,MAAMtF,mCAAmC,CAACiG;IAC/C;IAEA,MAAMC,aAAatF;IACnB,MAAMuF,wBAAwB7E;IAC9B,MAAM8E,0BAA0B5E;IAChC,MAAM6E,mCAAmC7C;IACzC,MAAM8C,yBAAyB5C;IAC/B,MAAM6C,sBAAsBpC;IAC5B,MAAMqC,kBAAkBnC;IACxB,MAAMoC,mBAAmBxB;IACzB,MAAMyB,gBAAgBnB;IACtB,MAAMoB,iBAAiBhB;IACvB,MAAMiB,iBAAiBd;IAEvB,MAAM,EACJe,gBAAgB,EAChBC,kBAAkB,EAClBC,SAAS,EACT/D,sBAAsB,EACtBwC,gBAAgB,EAChBI,iBAAiB,EAClB,GAAGK;IAEJ,OAAO;QACLhG,MAAM+G,IAAAA,mBAAAA,EAAajH,yBAAyBE,IAAI,EAAEiG,WAAW/E,SAAS,EAAE+E,WAAWpF,IAAI,EAAEiG;QACzF7G,iBAAiB8G,IAAAA,mBAAAA,EAAajH,yBAAyBG,eAAe,EAAEiG,sBAAsBrF,IAAI;QAClGX,mBAAmB6G,IAAAA,mBAAAA,EACjBjH,yBAAyBI,iBAAiB,EAC1CiG,wBAAwBtF,IAAI,EAC5B+F,qBAAqBI,aAAab,wBAAwB5D,SAAS,EACnEQ,0BAA0BoD,wBAAwBpD,sBAAsB;QAE1E5C,4BAA4B4G,IAAAA,mBAAAA,EAC1BjH,yBAAyBK,0BAA0B,EACnDiG,iCAAiCvF,IAAI;QAEvCT,kBAAkB2G,IAAAA,mBAAAA,EAAajH,yBAAyBM,gBAAgB,EAAEiG,uBAAuBxF,IAAI;QACrGR,eAAe0G,IAAAA,mBAAAA,EAAajH,yBAAyBO,aAAa,EAAEiG,oBAAoBzF,IAAI;QAC5FP,WAAWyG,IAAAA,mBAAAA,EACTjH,yBAAyBQ,SAAS,EAClCiG,gBAAgB1F,IAAI,EACpB0F,gBAAgBhE,SAAS,EACzBqE,qBAAqBI,aAClBH,CAAAA,uBAAuBI,iCAAAA,CAAmBC,UAAU,GACjDN,mBACEL,gBAAgB/B,kBAAkB,GAClC+B,gBAAgB7B,iBAAiB,GACnCkC,mBACAL,gBAAgB3B,gBAAgB,GAChC2B,gBAAgBzB,eAAe,AAAfA;QAExBvE,YAAYwG,IAAAA,mBAAAA,EAAajH,yBAAyBS,UAAU,EAAEiG,iBAAiB3F,IAAI;QACnFJ,UAAUsG,IAAAA,mBAAAA,EAAajH,yBAAyBW,QAAQ,EAAEkF,qBAAqBe,eAAef,iBAAiB;QAC/GnF,SAASuG,IAAAA,mBAAAA,EAAajH,yBAAyBU,OAAO,EAAE+E,oBAAoBkB,cAAclB,gBAAgB;QAC1G7E,UAAUqG,IAAAA,mBAAAA,EAAajH,yBAAyBY,QAAQ,EAAEiG,eAAe9F,IAAI;IAC/E;AACF"}

package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCalendarYearStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCalendarYearStyles_unstable;
+    }
+});
+const _useCalendarPickerStylesstyles = require("../CalendarPicker/useCalendarPickerStyles.styles");
+const useCalendarYearStyles_unstable = (props)=>{
+    'use no memo';
+    return (0, _useCalendarPickerStylesstyles.useCalendarPickerStyles_unstable)(props);
+};

package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CalendarYear/useCalendarYearStyles.styles.ts"],"sourcesContent":["import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\nimport type { CalendarYearStyleProps, CalendarYearStyles } from './CalendarYear.types';\n\n/**\n * @internal\n *\n * Apply styling to the CalendarYear slots based on the state\n */\nexport const useCalendarYearStyles_unstable = (props: CalendarYearStyleProps): CalendarYearStyles => {\n  'use no memo';\n\n  return useCalendarPickerStyles_unstable(props);\n};\n"],"names":["useCalendarYearStyles_unstable","props","useCalendarPickerStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;+CARoC;AAQ1C,MAAMA,iCAAiC,CAACC;IAC7C;IAEA,OAAOC,IAAAA,+DAAAA,EAAiCD;AAC1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-calendar-compat",
-  "version": "0.0.0-nightly-20250717-0406.1",
+  "version": "0.0.0-nightly-20250721-0406.1",
   "description": "Calendar compat component for Fluent UI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,18 +13,18 @@
   "license": "MIT",
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20250717-0406.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250717-0406.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20250721-0406.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250721-0406.1",
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20250717-0406.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20250721-0406.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250717-0406.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250717-0406.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20250717-0406.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20250717-0406.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20250717-0406.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250721-0406.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250721-0406.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20250721-0406.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20250721-0406.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20250721-0406.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },