@fluentui/react-button 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js

@@ -1,9 +1,9 @@
 'use client';
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
-import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
+import { shorthands, mergeClasses, makeStyles } from "@griffel/react";
+import { useButtonStyles_unstable } from "../Button/useButtonStyles.styles.js";
 export const toggleButtonClassNames = {
     root: 'fui-ToggleButton',
     icon: 'fui-ToggleButton__icon'
@@ -118,6 +118,51 @@ const useRootCheckedStyles = makeStyles({
         }
     }
 });
+const useCheckedAccessibleStyles = makeStyles({
+    // Base styles
+    base: {
+        backgroundColor: tokens.colorBrandBackground,
+        ...shorthands.borderColor('transparent'),
+        color: tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            backgroundColor: tokens.colorBrandBackgroundHover,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active,:active:focus-visible': {
+            backgroundColor: tokens.colorBrandBackgroundPressed,
+            ...shorthands.borderColor('transparent'),
+            color: tokens.colorNeutralForegroundOnBrand
+        }
+    },
+    // Appearance variations
+    outline: {
+        // There's no longer a reason to thicken the outline variant's border
+        ...shorthands.borderWidth(tokens.strokeWidthThin)
+    },
+    primary: {
+        // primary has an inner stroke for the checked style
+        outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,
+        outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,
+        // need to not have the default focus style that removes the outline
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,
+            outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`
+        })
+    },
+    subtle: {
+        // override subtle-appearance-specific icon color on hover
+        ':hover': {
+            [`& .${toggleButtonClassNames.icon}`]: {
+                color: tokens.colorNeutralForegroundOnBrand
+            }
+        }
+    },
+    transparent: {
+    },
+    secondary: {
+    }
+});
 const useRootDisabledStyles = makeStyles({
     // Base styles
     base: {
@@ -175,7 +220,7 @@ const useRootDisabledStyles = makeStyles({
     }
 });
 const useIconCheckedStyles = makeStyles({
-    // Appearance variations
+    // Appearance variations with isAccessible=false
     subtleOrTransparent: {
         color: tokens.colorNeutralForeground2BrandSelected
     },
@@ -208,19 +253,22 @@ const usePrimaryHighContrastStyles = makeStyles({
     }
 });
 export const useToggleButtonStyles_unstable = (state)=>{
-    'use no memo';
     const rootCheckedStyles = useRootCheckedStyles();
+    const accessibleCheckedStyles = useCheckedAccessibleStyles();
     const rootDisabledStyles = useRootDisabledStyles();
     const iconCheckedStyles = useIconCheckedStyles();
     const primaryHighContrastStyles = usePrimaryHighContrastStyles();
-    const { appearance, checked, disabled, disabledFocusable } = state;
+    const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles
     appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles
-    checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles
+    checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles
+    isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles
     (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name
     state.root.className);
     if (state.icon) {
-        state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
+        // eslint-disable-next-line react-hooks/immutability
+        state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
     }
     useButtonStyles_unstable(state);
     return state;

package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active,:active:focus-visible': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        border: '1px solid HighlightText',\n        outlineColor: 'Highlight',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n    },\n  },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n  // Do not use primary variant high contrast styles for toggle buttons\n  // otherwise there isn't enough difference between on/off states\n  base: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('ButtonBorder'),\n      color: 'ButtonText',\n      forcedColorAdjust: 'auto',\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  'use no memo';\n\n  const rootCheckedStyles = useRootCheckedStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n  const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base,\n    appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n      iconCheckedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active,:active:focus-visible': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        border: '1px solid HighlightText',\n        outlineColor: 'Highlight',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useCheckedAccessibleStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    // There's no longer a reason to thicken the outline variant's border\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n  },\n\n  primary: {\n    // primary has an inner stroke for the checked style\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n    outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n\n    // need to not have the default focus style that removes the outline\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n      outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`,\n    }),\n  },\n\n  subtle: {\n    // override subtle-appearance-specific icon color on hover\n    ':hover': {\n      [`& .${toggleButtonClassNames.icon}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n\n  transparent: {\n    /* No styles */\n  },\n\n  secondary: {\n    /* No styles */\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active,:active:focus-visible': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations with isAccessible=false\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n    },\n  },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n  // Do not use primary variant high contrast styles for toggle buttons\n  // otherwise there isn't enough difference between on/off states\n  base: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('ButtonBorder'),\n      color: 'ButtonText',\n      forcedColorAdjust: 'auto',\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const accessibleCheckedStyles = useCheckedAccessibleStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n  const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n  const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base,\n    appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Opt-in accessible checked styles\n    isAccessible && checked && accessibleCheckedStyles.base,\n    isAccessible && appearance && checked && accessibleCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      checked &&\n        !isAccessible &&\n        (appearance === 'subtle' || appearance === 'transparent') &&\n        iconCheckedStyles.subtleOrTransparent,\n      iconCheckedStyles.highContrast,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useCheckedAccessibleStyles","colorBrandBackground","outlineOffset","strokeWidthThickest","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"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"}

package/lib/contexts/ButtonContext.js

@@ -1,14 +1,16 @@
 'use client';
-import * as React from 'react';
+import * as React from "react";
 const buttonContext = React.createContext(undefined);
 const buttonContextDefaultValue = {};
 /**
- * @internal
  * Internal context provider used to update default values between internal components
+ *
+ * @internal
  */ export const ButtonContextProvider = buttonContext.Provider;
 /**
- * @internal
  * Internal context hook used to update default values between internal components
+ *
+ * @internal
  */ export const useButtonContext = ()=>{
     var _React_useContext;
     return (_React_useContext = React.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;

package/lib/contexts/ButtonContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n  size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = (): ButtonContextValue => {\n  return React.useContext(buttonContext) ?? buttonContextDefaultValue;\n};\n"],"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAEvD;;;CAGC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;;CAGC,GACD,OAAO,MAAMC,mBAAmB;QACvBP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;AAC5C,EAAE"}
+{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * Internal context value used to update default values between internal components\n *\n * @internal\n */\nexport interface ButtonContextValue {\n  size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * Internal context provider used to update default values between internal components\n *\n * @internal\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * Internal context hook used to update default values between internal components\n *\n * @internal\n */\nexport const useButtonContext = (): ButtonContextValue => {\n  return React.useContext(buttonContext) ?? buttonContextDefaultValue;\n};\n"],"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAW1E,MAAMC,4BAAgD,CAAC;AAEvD;;;;CAIC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAE5D;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB;QACvBP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI;AAC5C,EAAE"}

package/lib/contexts/index.js

@@ -1 +1 @@
-export { ButtonContextProvider, useButtonContext } from './ButtonContext';
+export { ButtonContextProvider, useButtonContext } from "./ButtonContext.js";

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { ButtonContextValue } from './ButtonContext';\nexport { ButtonContextProvider, useButtonContext } from './ButtonContext';\n"],"names":["ButtonContextProvider","useButtonContext"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,kBAAkB"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { ButtonContextValue } from './ButtonContext';\nexport { ButtonContextProvider, useButtonContext } from './ButtonContext';\n"],"names":["ButtonContextProvider","useButtonContext"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,qBAAkB"}

package/lib/index.js

@@ -1,13 +1,7 @@
-export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './Button';
-export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
-export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
-export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
-export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
-export { useToggleState } from './utils/index';
-export { ButtonContextProvider, useButtonContext } from './contexts/index';
-// Experimental APIs - will be uncommented in the experimental release branch
-export { useButtonBase_unstable } from './Button';
-export { useCompoundButtonBase_unstable } from './CompoundButton';
-export { useMenuButtonBase_unstable } from './MenuButton';
-export { useSplitButtonBase_unstable } from './SplitButton';
-export { useToggleButtonBase_unstable } from './ToggleButton';
+export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable, useButtonBase_unstable } from "./Button.js";
+export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from "./CompoundButton.js";
+export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable, useMenuButtonBase_unstable } from "./MenuButton.js";
+export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from "./SplitButton.js";
+export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable, useToggleButtonBase_unstable } from "./ToggleButton.js";
+export { useToggleState } from "./utils/index.js";
+export { ButtonContextProvider, useButtonContext } from "./contexts/index.js";

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\nexport { useButtonBase_unstable } from './Button';\nexport type { ButtonBaseProps, ButtonBaseState } from './Button';\nexport { useCompoundButtonBase_unstable } from './CompoundButton';\nexport type { CompoundButtonBaseProps, CompoundButtonBaseState } from './CompoundButton';\nexport { useMenuButtonBase_unstable } from './MenuButton';\nexport type { MenuButtonBaseProps, MenuButtonBaseState } from './MenuButton';\nexport { useSplitButtonBase_unstable } from './SplitButton';\nexport type { SplitButtonBaseProps, SplitButtonBaseState } from './SplitButton';\nexport { useToggleButtonBase_unstable } from './ToggleButton';\nexport type { ToggleButtonBaseProps, ToggleButtonBaseState } from './ToggleButton';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleState","ButtonContextProvider","useButtonContext","useButtonBase_unstable","useCompoundButtonBase_unstable","useMenuButtonBase_unstable","useSplitButtonBase_unstable","useToggleButtonBase_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB;AAG3E,6EAA6E;AAC7E,SAASC,sBAAsB,QAAQ,WAAW;AAElD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,0BAA0B,QAAQ,eAAe;AAE1D,SAASC,2BAA2B,QAAQ,gBAAgB;AAE5D,SAASC,4BAA4B,QAAQ,iBAAiB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n  useButtonBase_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState, ButtonBaseProps, ButtonBaseState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n  useMenuButtonBase_unstable,\n} from './MenuButton';\nexport type {\n  MenuButtonProps,\n  MenuButtonSlots,\n  MenuButtonState,\n  MenuButtonBaseProps,\n  MenuButtonBaseState,\n} from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n  useToggleButtonBase_unstable,\n} from './ToggleButton';\nexport type {\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseProps,\n  ToggleButtonBaseState,\n} from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","useMenuButtonBase_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,cAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,sBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,0BAA0B,QACrB,kBAAe;AAQtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,mBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,oBAAiB;AAQxB,SAASC,cAAc,QAAQ,mBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,sBAAmB"}

package/lib/utils/index.js

@@ -1 +1 @@
-export { useToggleState } from './useToggleState';
+export { useToggleState } from "./useToggleState.js";

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useToggleState } from './useToggleState';\n"],"names":["useToggleState"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB"}
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useToggleState } from './useToggleState';\n"],"names":["useToggleState"],"mappings":"AAAA,SAASA,cAAc,QAAQ,sBAAmB"}

package/lib/utils/useToggleState.js

@@ -1,8 +1,8 @@
 'use client';
-import * as React from 'react';
-import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+import * as React from "react";
+import { mergeCallbacks, useControllableState, useEventCallback } from "@fluentui/react-utilities";
 export function useToggleState(props, state) {
-    const { checked, defaultChecked, disabled, disabledFocusable } = props;
+    const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = props;
     const { onClick, role } = state.root;
     const [checkedValue, setCheckedValue] = useControllableState({
         state: checked,
@@ -26,6 +26,7 @@ export function useToggleState(props, state) {
     return {
         ...state,
         checked: checkedValue,
+        isAccessible,
         root: {
             ...state.root,
             [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,

package/lib/utils/useToggleState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useToggleState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n  TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n  TButtonState extends Pick<ButtonState, 'root'>,\n  TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n  const { checked, defaultChecked, disabled, disabledFocusable } = props;\n  const { onClick, role } = state.root;\n\n  const [checkedValue, setCheckedValue] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  const onToggleClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      if (!disabled && !disabledFocusable) {\n        if (ev.defaultPrevented) {\n          return;\n        }\n\n        setCheckedValue(!checkedValue);\n      }\n    },\n    [checkedValue, disabled, disabledFocusable, setCheckedValue],\n  );\n\n  return {\n    ...state,\n\n    checked: checkedValue,\n\n    root: {\n      ...state.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: useEventCallback(\n        mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n      ),\n    },\n  } as TToggleButtonState;\n}\n"],"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAInG,OAAO,SAASC,eAIdC,KAAyB,EAAEC,KAAmB;IAC9C,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGL;IACjE,MAAM,EAAEM,OAAO,EAAEC,IAAI,EAAE,GAAGN,MAAMO,IAAI;IAEpC,MAAM,CAACC,cAAcC,gBAAgB,GAAGb,qBAAqB;QAC3DI,OAAOC;QACPS,cAAcR;QACdS,cAAc;IAChB;IAEA,MAAMC,qBAAqBN,SAAS,sBAAsBA,SAAS;IAEnE,MAAMO,gBAAgBnB,MAAMoB,WAAW,CACrC,CAACC;QACC,IAAI,CAACZ,YAAY,CAACC,mBAAmB;YACnC,IAAIW,GAAGC,gBAAgB,EAAE;gBACvB;YACF;YAEAP,gBAAgB,CAACD;QACnB;IACF,GACA;QAACA;QAAcL;QAAUC;QAAmBK;KAAgB;IAG9D,OAAO;QACL,GAAGT,KAAK;QAERC,SAASO;QAETD,MAAM;YACJ,GAAGP,MAAMO,IAAI;YACb,CAACK,qBAAqB,iBAAiB,eAAe,EAAEJ;YACxDH,SAASR,iBACPF,eAAeU,SAA2EQ;QAE9F;IACF;AACF"}
+{"version":3,"sources":["../src/utils/useToggleState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n  TToggleButtonProps extends Pick<\n    ToggleButtonProps,\n    'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable' | 'isAccessible'\n  >,\n  TButtonState extends Pick<ButtonState, 'root'>,\n  TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root' | 'isAccessible'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n  const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = props;\n  const { onClick, role } = state.root;\n\n  const [checkedValue, setCheckedValue] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  const onToggleClick = React.useCallback(\n    (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      if (!disabled && !disabledFocusable) {\n        if (ev.defaultPrevented) {\n          return;\n        }\n\n        setCheckedValue(!checkedValue);\n      }\n    },\n    [checkedValue, disabled, disabledFocusable, setCheckedValue],\n  );\n\n  return {\n    ...state,\n\n    checked: checkedValue,\n\n    isAccessible,\n\n    root: {\n      ...state.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: useEventCallback(\n        mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n      ),\n    },\n  } as TToggleButtonState;\n}\n"],"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","isAccessible","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAInG,OAAO,SAASC,eAOdC,KAAyB,EAAEC,KAAmB;IAC9C,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,eAAe,KAAK,EAAE,GAAGN;IACvF,MAAM,EAAEO,OAAO,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,IAAI;IAEpC,MAAM,CAACC,cAAcC,gBAAgB,GAAGd,qBAAqB;QAC3DI,OAAOC;QACPU,cAAcT;QACdU,cAAc;IAChB;IAEA,MAAMC,qBAAqBN,SAAS,sBAAsBA,SAAS;IAEnE,MAAMO,gBAAgBpB,MAAMqB,WAAW,CACrC,CAACC;QACC,IAAI,CAACb,YAAY,CAACC,mBAAmB;YACnC,IAAIY,GAAGC,gBAAgB,EAAE;gBACvB;YACF;YAEAP,gBAAgB,CAACD;QACnB;IACF,GACA;QAACA;QAAcN;QAAUC;QAAmBM;KAAgB;IAG9D,OAAO;QACL,GAAGV,KAAK;QAERC,SAASQ;QAETJ;QAEAG,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,CAACK,qBAAqB,iBAAiB,eAAe,EAAEJ;YACxDH,SAAST,iBACPF,eAAeW,SAA2EQ;QAE9F;IACF;AACF"}

package/lib-commonjs/{Button.js → Button.cjs}

@@ -28,4 +28,4 @@ _export(exports, {
         return _index.useButton_unstable;
     }
 });
-const _index = require("./components/Button/index");
+const _index = require("./components/Button/index.cjs");

package/lib-commonjs/{Button.js.map → Button.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type {\n  ButtonBaseProps,\n  ButtonProps,\n  ButtonSlots,\n  ButtonBaseState,\n  ButtonState,\n} from './components/Button/index';\nexport {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n  useButtonBase_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eAGrBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,4BAA4B"}
+{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type {\n  ButtonBaseProps,\n  ButtonProps,\n  ButtonSlots,\n  ButtonBaseState,\n  ButtonState,\n} from './components/Button/index';\nexport {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n  useButtonBase_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eAGrBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,+BAA4B"}

package/lib-commonjs/{CompoundButton.js → CompoundButton.cjs}

@@ -18,9 +18,6 @@ _export(exports, {
     renderCompoundButton_unstable: function() {
         return _index.renderCompoundButton_unstable;
     },
-    useCompoundButtonBase_unstable: function() {
-        return _index.useCompoundButtonBase_unstable;
-    },
     useCompoundButtonStyles_unstable: function() {
         return _index.useCompoundButtonStyles_unstable;
     },
@@ -28,4 +25,4 @@ _export(exports, {
         return _index.useCompoundButton_unstable;
     }
 });
-const _index = require("./components/CompoundButton/index");
+const _index = require("./components/CompoundButton/index.cjs");

package/lib-commonjs/CompoundButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CompoundButton.ts"],"sourcesContent":["export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './components/CompoundButton/index';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './components/CompoundButton/index';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"mappings":";;;;;;;;;;;;eAEEA,qBAAc;;;eACdC,+BAAwB;;;eACxBC,oCAA6B;;;eAC7BC,uCAAgC;;;eAChCC,iCAA0B;;;uBACrB,uCAAoC"}

package/lib-commonjs/{MenuButton.js → MenuButton.cjs}

@@ -28,4 +28,4 @@ _export(exports, {
         return _index.useMenuButton_unstable;
     }
 });
-const _index = require("./components/MenuButton/index");
+const _index = require("./components/MenuButton/index.cjs");

package/lib-commonjs/{MenuButton.js.map → MenuButton.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type {\n  MenuButtonBaseProps,\n  MenuButtonProps,\n  MenuButtonSlots,\n  MenuButtonBaseState,\n  MenuButtonState,\n} from './components/MenuButton/index';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n  useMenuButtonBase_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","useMenuButtonBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,gCAAgC"}
+{"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type {\n  MenuButtonBaseProps,\n  MenuButtonBaseState,\n  MenuButtonProps,\n  MenuButtonSlots,\n  MenuButtonState,\n} from './components/MenuButton/index';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n  useMenuButtonBase_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","useMenuButtonBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,mCAAgC"}

package/lib-commonjs/{SplitButton.js → SplitButton.cjs}

@@ -18,9 +18,6 @@ _export(exports, {
     splitButtonClassNames: function() {
         return _index.splitButtonClassNames;
     },
-    useSplitButtonBase_unstable: function() {
-        return _index.useSplitButtonBase_unstable;
-    },
     useSplitButtonStyles_unstable: function() {
         return _index.useSplitButtonStyles_unstable;
     },
@@ -28,4 +25,4 @@ _export(exports, {
         return _index.useSplitButton_unstable;
     }
 });
-const _index = require("./components/SplitButton/index");
+const _index = require("./components/SplitButton/index.cjs");

package/lib-commonjs/SplitButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SplitButton.ts"],"sourcesContent":["export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './components/SplitButton/index';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,iCAA0B;;;eAC1BC,4BAAqB;;;eACrBC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,oCAAiC"}

package/lib-commonjs/{ToggleButton.js → ToggleButton.cjs}

@@ -28,4 +28,4 @@ _export(exports, {
         return _index.useToggleButton_unstable;
     }
 });
-const _index = require("./components/ToggleButton/index");
+const _index = require("./components/ToggleButton/index.cjs");

package/lib-commonjs/{ToggleButton.js.map → ToggleButton.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonBaseState,\n  ToggleButtonState,\n} from './components/ToggleButton/index';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n  useToggleButtonBase_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable"],"mappings":";;;;;;;;;;;;eAOEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eAGtBG,mCAA4B;;;eAF5BF,qCAA8B;;;eAC9BC,+BAAwB;;;uBAEnB,kCAAkC"}
+{"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type {\n  ToggleButtonBaseProps,\n  ToggleButtonProps,\n  ToggleButtonState,\n  ToggleButtonBaseState,\n} from './components/ToggleButton/index';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n  useToggleButtonBase_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable"],"mappings":";;;;;;;;;;;;eAOEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eAGtBG,mCAA4B;;;eAF5BF,qCAA8B;;;eAC9BC,+BAAwB;;;uBAEnB,qCAAkC"}

package/lib-commonjs/components/Button/{Button.js → Button.cjs}

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "Button", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _renderButton = require("./renderButton");
-const _useButton = require("./useButton");
-const _useButtonStylesstyles = require("./useButtonStyles.styles");
+const _renderButton = require("./renderButton.cjs");
+const _useButton = require("./useButton.cjs");
+const _useButtonStylesstyles = require("./useButtonStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const Button = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useButton.useButton_unstable)(props, ref);

package/lib-commonjs/components/Button/{Button.js.map → Button.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.styles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useButtonStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","Button","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BACO,iBAAiB;2BACpB,cAAc;uCACR,2BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQP,6BAAAA,EAAmBK,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOR,mCAAAA,EAAsBQ;AAC7B,0FAA0F;AAC5F,GAAuC;AAEvCJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles.styles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useButtonStyles_unstable')(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","Button","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BACO,oBAAiB;2BACpB,iBAAc;uCACR,8BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQP,6BAAAA,EAAmBK,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOR,mCAAAA,EAAsBQ;AAC7B,0FAA0F;AAC5F,GAAuC;AAEvCJ,OAAOK,WAAW,GAAG"}

package/lib-commonjs/components/Button/{Button.types.js.map → Button.types.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/Button.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n  /**\n   * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n  /**\n   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n   */\n  icon?: Slot<'span'>;\n};\n\n/**\n * A button supports different sizes.\n */\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n  /**\n   * A button can have its content and borders styled for greater emphasis or to be subtle.\n   * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n   * - 'primary': Emphasizes the button as a primary action.\n   * - 'outline': Removes background styling.\n   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   * - 'transparent': Removes background and border styling.\n   *\n   * @default 'secondary'\n   */\n  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n  /**\n   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * A button can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A button can format its icon to appear before or after its content.\n   *\n   * @default 'before'\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A button can be rounded, circular, or square.\n   *\n   * @default 'rounded'\n   */\n  shape?: 'rounded' | 'circular' | 'square';\n\n  /**\n   * A button supports different sizes.\n   *\n   * @default 'medium'\n   */\n  size?: ButtonSize;\n};\n\n/**\n * Internal use only: lists prop names related to Button design for use within Button components.\n *\n * @internal\n */\nexport type ButtonDesignPropNames = 'appearance' | 'size' | 'shape';\n\nexport type ButtonBaseProps = DistributiveOmit<ButtonProps, ButtonDesignPropNames>;\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n  Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n    /**\n     * A button can contain only an icon.\n     *\n     * @default false\n     */\n    iconOnly: boolean;\n  };\n\nexport type ButtonBaseState = DistributiveOmit<ButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/Button/Button.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n  /**\n   * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n  /**\n   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n   */\n  icon?: Slot<'span'>;\n};\n\n/**\n * A button supports different sizes.\n */\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n  /**\n   * A button can have its content and borders styled for greater emphasis or to be subtle.\n   * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n   * - 'primary': Emphasizes the button as a primary action.\n   * - 'outline': Removes background styling.\n   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   * - 'transparent': Removes background and border styling.\n   *\n   * @default 'secondary'\n   */\n  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n  /**\n   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * A button can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A button can format its icon to appear before or after its content.\n   *\n   * @default 'before'\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A button can be rounded, circular, or square.\n   *\n   * @default 'rounded'\n   */\n  shape?: 'rounded' | 'circular' | 'square';\n\n  /**\n   * A button supports different sizes.\n   *\n   * @default 'medium'\n   */\n  size?: ButtonSize;\n};\n\nexport type ButtonBaseProps = DistributiveOmit<ButtonProps, 'appearance' | 'size' | 'shape'>;\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n  Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n    /**\n     * A button can contain only an icon.\n     *\n     * @default false\n     */\n    iconOnly: boolean;\n  };\n\nexport type ButtonBaseState = DistributiveOmit<ButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/Button/{index.js → index.cjs}

@@ -19,7 +19,7 @@ _export(exports, {
         return _renderButton.renderButton_unstable;
     },
     useButtonBase_unstable: function() {
-        return _useButtonBase.useButtonBase_unstable;
+        return _useButton.useButtonBase_unstable;
     },
     useButtonStyles_unstable: function() {
         return _useButtonStylesstyles.useButtonStyles_unstable;
@@ -28,8 +28,7 @@ _export(exports, {
         return _useButton.useButton_unstable;
     }
 });
-const _Button = require("./Button");
-const _renderButton = require("./renderButton");
-const _useButton = require("./useButton");
-const _useButtonBase = require("./useButtonBase");
-const _useButtonStylesstyles = require("./useButtonStyles.styles");
+const _Button = require("./Button.cjs");
+const _renderButton = require("./renderButton.cjs");
+const _useButton = require("./useButton.cjs");
+const _useButtonStylesstyles = require("./useButtonStyles.styles.cjs");

package/lib-commonjs/components/Button/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonBaseProps, ButtonProps, ButtonSlots, ButtonBaseState, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable, useButtonBase_unstable } from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","renderButton_unstable","useButton_unstable","useButtonBase_unstable","buttonClassNames","useButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAKNI,uCAAgB;;;eAFhBH,mCAAqB;;;eACDE,iCAAsB;;;eACxBE,+CAAwB;;;eAD1CH,6BAAkB;;;wBAJJ,cAAW;8BAGI,oBAAiB;2BACI,iBAAc;uCACd,8BAA2B"}

package/lib-commonjs/components/Button/renderButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { ButtonSlots, ButtonBaseState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonBaseState): JSXElement => {\n  assertSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <state.root>\n      {iconPosition !== 'after' && state.icon && <state.icon />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":";;;;+BAWaC;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;AAQjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,GAAI,mBAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;YACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ;YAChCH,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAG5D,EAAE"}

package/lib-commonjs/components/Button/useButton.cjs

@@ -0,0 +1,58 @@
+'use client';
+"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, {
+    useButtonBase_unstable: function() {
+        return useButtonBase_unstable;
+    },
+    useButton_unstable: function() {
+        return useButton_unstable;
+    }
+});
+const _ButtonContext = require("../../contexts/ButtonContext.cjs");
+const _reactaria = require("@fluentui/react-aria");
+const _reactutilities = require("@fluentui/react-utilities");
+const useButton_unstable = (props, ref)=>{
+    const { size: contextSize } = (0, _ButtonContext.useButtonContext)();
+    const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...buttonProps } = props;
+    const state = useButtonBase_unstable(buttonProps, ref);
+    return {
+        appearance,
+        shape,
+        size,
+        ...state
+    };
+};
+const useButtonBase_unstable = (props, ref)=>{
+    const { icon, iconPosition = 'before', ...buttonProps } = props;
+    const iconShorthand = _reactutilities.slot.optional(icon, {
+        elementType: 'span'
+    });
+    var _props_disabled, _props_disabledFocusable;
+    return {
+        disabled: (_props_disabled = props.disabled) !== null && _props_disabled !== void 0 ? _props_disabled : false,
+        disabledFocusable: (_props_disabledFocusable = props.disabledFocusable) !== null && _props_disabledFocusable !== void 0 ? _props_disabledFocusable : false,
+        iconPosition,
+        iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+        components: {
+            root: 'button',
+            icon: 'span'
+        },
+        root: _reactutilities.slot.always((0, _reactaria.useARIAButtonProps)(buttonProps.as, buttonProps), {
+            elementType: 'button',
+            defaultProps: {
+                ref: ref,
+                type: props.as !== 'a' ? 'button' : undefined
+            }
+        }),
+        icon: iconShorthand
+    };
+};

package/lib-commonjs/components/Button/useButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\nimport { slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const { size: contextSize } = useButtonContext();\n  const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...buttonProps } = props;\n  const state = useButtonBase_unstable(buttonProps, ref);\n\n  return {\n    appearance,\n    shape,\n    size,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Button component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButtonBase_unstable = (\n  props: ButtonBaseProps,\n  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonBaseState => {\n  const { icon, iconPosition = 'before', ...buttonProps } = props;\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n\n  return {\n    disabled: props.disabled ?? false,\n    disabledFocusable: props.disabledFocusable ?? false,\n    iconPosition,\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n    components: { root: 'button', icon: 'span' },\n    root: slot.always<ARIAButtonSlotProps<'a'>>(useARIAButtonProps(buttonProps.as, buttonProps), {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        type: props.as !== 'a' ? 'button' : undefined,\n      },\n    }),\n    icon: iconShorthand,\n  };\n};\n"],"names":["useButtonContext","useARIAButtonProps","slot","useButton_unstable","props","ref","size","contextSize","appearance","shape","buttonProps","state","useButtonBase_unstable","icon","iconPosition","iconShorthand","optional","elementType","disabled","disabledFocusable","iconOnly","Boolean","children","components","root","always","as","defaultProps","type","undefined"],"mappings":"AAAA;;;;;;;;;;;;0BAoCaY;eAAAA;;sBAtBAT;;;;+BAXoB,kCAA+B;2BAE7B,uBAAuB;gCACrC,4BAA4B;AAQ1C,MAAMA,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGP,+BAAAA;IAC9B,MAAM,EAAEQ,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGG,aAAa,GAAGN;IACxG,MAAMO,QAAQC,uBAAuBF,aAAaL;IAElD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGK,KAAK;IACV;AACF,EAAE;AAQK,+BAA+B,CACpCP,OACAC;IAEA,MAAM,EAAEQ,IAAI,EAAEC,eAAe,QAAQ,EAAE,GAAGJ,aAAa,GAAGN;IAC1D,MAAMW,gBAAgBb,oBAAAA,CAAKc,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;QAGpDb,iBACSA;IAFrB,OAAO;QACLc,UAAUd,CAAAA,kBAAAA,MAAMc,QAAAA,AAAQ,MAAA,QAAdd,oBAAAA,KAAAA,IAAAA,kBAAkB;QAC5Be,mBAAmBf,CAAAA,2BAAAA,MAAMe,iBAAAA,AAAiB,MAAA,QAAvBf,6BAAAA,KAAAA,IAAAA,2BAA2B;QAC9CU;QACAM,UAAUC,QAAQN,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeO,QAAAA,AAAQ,KAAI,CAAClB,MAAMkB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUX,MAAM;QAAO;QAC3CW,MAAMtB,oBAAAA,CAAKuB,MAAM,KAA2BxB,6BAAAA,EAAmBS,YAAYgB,EAAE,EAAEhB,cAAc;YAC3FO,aAAa;YACbU,cAAc;gBACZtB,KAAKA;gBACLuB,MAAMxB,MAAMsB,EAAE,KAAK,MAAM,WAAWG;YACtC;QACF;QACAhB,MAAME;IACR;AACF,EAAE"}

package/lib-commonjs/components/Button/{useButtonStyles.styles.js → useButtonStyles.styles.cjs}

@@ -1080,7 +1080,6 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useButtonStyles_unstable = (state)=>{
-    'use no memo';
     const rootBaseClassName = useRootBaseClassName();
     const iconBaseClassName = useIconBaseClassName();
     const rootStyles = useRootStyles();
@@ -1089,12 +1088,14 @@ const useButtonStyles_unstable = (state)=>{
     const rootIconOnlyStyles = useRootIconOnlyStyles();
     const iconStyles = useIconStyles();
     const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles
     (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
     appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
     iconOnly && rootIconOnlyStyles[size], // User provided class name
     state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
     }
     return state;