@fluentui/react-button 1.0.0-beta.8 → 9.0.0-alpha.100

package/lib/components/Button/useButtonClasses.js

@@ -1,417 +0,0 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-import { __assign } from "tslib";
-/* eslint-disable @typescript-eslint/naming-convention */
-import { makeVariantClasses } from '@fluentui/react-theme-provider';
-import { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities';
-var GlobalClassNames = {
-    root: 'ms-Button',
-    icon: 'ms-Button-icon',
-};
-export var ButtonSizeVariants = {
-    size_smallest: {
-        height: 'var(--button-size-smallest)',
-        minHeight: 'var(--button-size-smallest)',
-    },
-    size_smaller: {
-        height: 'var(--button-size-smaller)',
-        minHeight: 'var(--button-size-smaller)',
-    },
-    size_small: {
-        height: 'var(--button-size-small)',
-        minHeight: 'var(--button-size-small)',
-    },
-    size_large: {
-        height: 'var(--button-size-large)',
-        minHeight: 'var(--button-size-large)',
-    },
-    size_larger: {
-        height: 'var(--button-size-larger)',
-        minHeight: 'var(--button-size-larger)',
-    },
-    size_largest: {
-        height: 'var(--button-size-largest)',
-        minHeight: 'var(--button-size-largest)',
-    },
-};
-export var useButtonClasses = makeVariantClasses({
-    name: 'Button',
-    prefix: '--button',
-    styles: {
-        root: [
-            GlobalClassNames.root,
-            (_a = {
-                    cursor: 'pointer',
-                    alignItems: 'center',
-                    borderStyle: 'solid',
-                    display: 'inline-flex',
-                    justifyContent: 'center',
-                    outline: 'none',
-                    position: 'relative',
-                    userSelect: 'none',
-                    boxSizing: 'border-box',
-                    verticalAlign: 'middle',
-                    textDecoration: 'none',
-                    background: 'var(--button-background)',
-                    color: 'var(--button-contentColor)',
-                    borderColor: 'var(--button-borderColor)',
-                    borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',
-                    borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',
-                    borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',
-                    borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',
-                    borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',
-                    borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',
-                    borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',
-                    borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',
-                    boxShadow: 'var(--button-boxShadow)',
-                    width: 'var(--button-width)',
-                    maxWidth: 'var(--button-maxWidth)',
-                    minWidth: 'var(--button-minWidth)',
-                    height: 'var(--button-height)',
-                    minHeight: 'var(--button-minHeight)',
-                    paddingLeft: 'var(--button-paddingLeft)',
-                    paddingRight: 'var(--button-paddingRight)',
-                    paddingTop: 'var(--button-paddingTop)',
-                    paddingBottom: 'var(--button-paddingBottom)',
-                    transition: 'var(--button-transition)',
-                    whiteSpace: 'var(--button-whiteSpace)',
-                    fontFamily: 'var(--button-fontFamily)',
-                    fontSize: 'var(--button-fontSize)',
-                    fontWeight: 'var(--button-fontWeight)',
-                    WebkitFontSmoothing: 'antialiased',
-                    MozOsxFontSmoothing: 'grayscale',
-                    ':global(.ms-Fabric--isFocusVisible) &:focus::after': (_b = {
-                            content: '""',
-                            position: 'absolute',
-                            left: -1,
-                            right: -1,
-                            top: -1,
-                            bottom: -1,
-                            borderWidth: 'var(--button-focusWidth, 2px)',
-                            borderStyle: 'solid',
-                            borderColor: 'var(--button-focusColor, black)',
-                            borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',
-                            borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',
-                            borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',
-                            borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',
-                            boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',
-                            zIndex: 1
-                        },
-                        _b[EdgeChromiumHighContrastSelector] = {
-                            borderColor: 'var(--button-highContrast-focusColor)',
-                            boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',
-                        },
-                        _b)
-                },
-                _a['& > *:not(:first-child)'] = {
-                    marginLeft: 'var(--button-contentGap)',
-                },
-                _a[EdgeChromiumHighContrastSelector] = (_c = {
-                        forcedColorAdjust: 'var(--button-forcedColorAdjust)',
-                        background: 'var(--button-highContrast-background)',
-                        borderColor: 'var(--button-highContrast-borderColor)',
-                        color: 'var(--button-highContrast-contentColor)'
-                    },
-                    _c["." + GlobalClassNames.icon] = {
-                        color: 'var(--button-highContrast-iconColor)',
-                    },
-                    _c),
-                _a['&:hover'] = (_d = {
-                        background: 'var(--button-hovered-background, var(--button-background))',
-                        color: 'var(--button-hovered-contentColor, var(--button-contentColor))',
-                        borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',
-                        boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))'
-                    },
-                    _d["." + GlobalClassNames.icon] = {
-                        color: 'var(--button-hovered-iconColor, var(--button-iconColor))',
-                    },
-                    _d[EdgeChromiumHighContrastSelector] = (_e = {
-                            background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',
-                            borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',
-                            color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))'
-                        },
-                        _e["." + GlobalClassNames.icon] = {
-                            color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',
-                        },
-                        _e),
-                    _d),
-                _a['&:active'] = (_f = {
-                        background: 'var(--button-pressed-background, var(--button-hovered-background))',
-                        color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',
-                        borderColor: 'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',
-                        boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',
-                        transform: 'var(--button-pressed-transform)',
-                        transition: 'var(--button-pressed-transition)'
-                    },
-                    _f["." + GlobalClassNames.icon] = {
-                        color: 'var(--button-pressed-iconColor, var(--button-iconColor))',
-                    },
-                    _f[EdgeChromiumHighContrastSelector] = (_g = {
-                            background: 'var(--button-highContrast-pressed-background, ' +
-                                'var(--button-highContrast-hovered-background, ' +
-                                'var(--button-highContrast-background)))',
-                            borderColor: 'var(--button-highContrast-pressed-borderColor, ' +
-                                'var(--button-highContrast-hovered-borderColor, ' +
-                                'var(--button-highContrast-borderColor)))',
-                            color: 'var(--button-highContrast-pressed-contentColor, ' +
-                                'var(--button-highContrast-hovered-contentColor, ' +
-                                'var(--button-highContarst-contentColor)))'
-                        },
-                        _g["." + GlobalClassNames.icon] = {
-                            color: 'var(--button-highContrast-pressed-iconColor, ' +
-                                'var(--button-highContrast-hovered-iconColor, ' +
-                                'var(--button-highContrast-iconColor)))',
-                        },
-                        _g),
-                    _f),
-                _a['&[aria-disabled=true]'] = (_h = {
-                        pointerEvents: 'none',
-                        opacity: 'var(--button-disabled-opacity)',
-                        backgroundColor: 'var(--button-disabled-background)',
-                        color: 'var(--button-disabled-contentColor)',
-                        borderColor: 'var(--button-disabled-borderColor)',
-                        boxShadow: 'var(--button-disabled-boxShadow)'
-                    },
-                    _h["." + GlobalClassNames.icon] = {
-                        color: 'var(--button-disabled-iconColor)',
-                    },
-                    _h[EdgeChromiumHighContrastSelector] = (_j = {
-                            background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',
-                            borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',
-                            color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))'
-                        },
-                        _j["." + GlobalClassNames.icon] = {
-                            color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',
-                        },
-                        _j),
-                    _h),
-                _a),
-        ],
-        icon: [
-            GlobalClassNames.icon,
-            {
-                color: 'var(--button-iconColor)',
-                display: 'flex',
-                flexShrink: 0,
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: 'var(--button-iconSize)',
-                height: 'var(--button-iconSize)',
-                fontSize: 'var(--button-iconSize, inherit)',
-                fontWeight: 'normal',
-                lineHeight: '1',
-            },
-        ],
-        content: {
-            lineHeight: '1',
-        },
-    },
-    variants: function (theme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
-        var fonts = theme.fonts, effects = theme.effects, palette = theme.palette, semanticColors = theme.semanticColors;
-        return __assign({ root: {
-                size: {
-                    smallest: '24px',
-                    smaller: '24px',
-                    small: '24px',
-                    regular: '32px',
-                    large: '40px',
-                    larger: '48px',
-                    largest: '64px',
-                },
-                // Sizing tokens
-                iconSize: (_b = (_a = fonts) === null || _a === void 0 ? void 0 : _a.mediumPlus) === null || _b === void 0 ? void 0 : _b.fontSize,
-                borderWidth: '1px',
-                boxShadow: 'none',
-                borderRadius: (_c = effects) === null || _c === void 0 ? void 0 : _c.roundedCorner2,
-                paddingLeft: '20px',
-                paddingRight: '20px',
-                paddingTop: '0',
-                paddingBottom: '0',
-                margin: '0',
-                width: 'auto',
-                minWidth: '96px',
-                maxWidth: '280px',
-                minHeight: 'var(--button-size-regular)',
-                contentGap: '8px',
-                // Font tokens
-                fontWeight: '600',
-                fontSize: (_e = (_d = fonts) === null || _d === void 0 ? void 0 : _d.medium) === null || _e === void 0 ? void 0 : _e.fontSize,
-                fontFamily: (_g = (_f = fonts) === null || _f === void 0 ? void 0 : _f.medium) === null || _g === void 0 ? void 0 : _g.fontFamily,
-                // Color tokens
-                focusColor: (_h = palette) === null || _h === void 0 ? void 0 : _h.black,
-                focusInnerColor: (_j = palette) === null || _j === void 0 ? void 0 : _j.white,
-                background: (_k = semanticColors) === null || _k === void 0 ? void 0 : _k.buttonBackground,
-                borderColor: (_l = semanticColors) === null || _l === void 0 ? void 0 : _l.buttonBorder,
-                contentColor: (_m = semanticColors) === null || _m === void 0 ? void 0 : _m.buttonText,
-                iconColor: 'inherit',
-                hovered: {
-                    background: (_o = semanticColors) === null || _o === void 0 ? void 0 : _o.buttonBackgroundHovered,
-                    contentColor: (_p = semanticColors) === null || _p === void 0 ? void 0 : _p.buttonTextHovered,
-                },
-                pressed: {
-                    background: (_q = semanticColors) === null || _q === void 0 ? void 0 : _q.buttonBackgroundPressed,
-                    contentColor: (_r = semanticColors) === null || _r === void 0 ? void 0 : _r.buttonTextPressed,
-                },
-                disabled: {
-                    background: (_s = semanticColors) === null || _s === void 0 ? void 0 : _s.buttonBackgroundDisabled,
-                    borderColor: (_t = semanticColors) === null || _t === void 0 ? void 0 : _t.buttonBorderDisabled,
-                    contentColor: (_u = semanticColors) === null || _u === void 0 ? void 0 : _u.buttonTextDisabled,
-                },
-                highContrast: {
-                    borderColor: 'WindowText',
-                    contentColor: 'WindowText',
-                    iconColor: 'WindowText',
-                    hovered: {
-                        borderColor: 'Highlight',
-                        contentColor: 'Highlight',
-                        iconColor: 'Highlight',
-                    },
-                    pressed: {
-                        borderColor: 'Highlight',
-                        contentColor: 'WindowText',
-                        iconColor: 'WindowText',
-                    },
-                    disabled: {
-                        background: 'Window',
-                        borderColor: 'GrayText',
-                        contentColor: 'GrayText',
-                        iconColor: 'GrayText',
-                    },
-                },
-            }, circular: {
-                borderRadius: '50000px',
-            }, block: {
-                width: '100%',
-                maxWidth: 'none',
-            }, iconOnly: {
-                minWidth: 'var(--button-height)',
-                width: 'var(--button-height, var(--button-minHeight))',
-                paddingTop: '0',
-                paddingBottom: '0',
-                paddingLeft: '0',
-                paddingRight: '0',
-            }, primary: {
-                background: 'var(--color-brand-background)',
-                borderColor: 'var(--color-brand-borderColor)',
-                contentColor: 'var(--color-brand-contentColor)',
-                iconColor: 'inherit',
-                forcedColorAdjust: 'none',
-                hovered: {
-                    background: 'var(--color-brand-hovered-background)',
-                    borderColor: 'var(--color-brand-hovered-borderColor)',
-                    contentColor: 'var(--color-brand-hovered-contentColor)',
-                },
-                pressed: {
-                    background: 'var(--color-brand-pressed-background)',
-                    borderColor: 'var(--color-brand-pressed-borderColor)',
-                    contentColor: 'var(--color-brand-pressed-contentColor)',
-                },
-                highContrast: {
-                    background: 'WindowText',
-                    borderColor: 'WindowText',
-                    contentColor: 'Window',
-                    focusColor: 'WindowText',
-                    focusInnerColor: 'Window',
-                    iconColor: 'Window',
-                    hovered: {
-                        background: 'Highlight',
-                        borderColor: 'Highlight',
-                        contentColor: 'Window',
-                        iconColor: 'Window',
-                    },
-                    pressed: {
-                        background: 'WindowText',
-                        borderColor: 'WindowText',
-                        contentColor: 'Window',
-                        iconColor: 'Window',
-                    },
-                    disabled: {
-                        background: 'Window',
-                        borderColor: 'GrayText',
-                        contentColor: 'GrayText',
-                        iconColor: 'GrayText',
-                    },
-                },
-            }, 
-            // TODO: no references to palette.
-            ghost: {
-                background: 'transparent',
-                borderColor: 'transparent',
-                contentColor: (_v = palette) === null || _v === void 0 ? void 0 : _v.neutralPrimary,
-                fontWeight: 'normal',
-                iconColor: (_w = palette) === null || _w === void 0 ? void 0 : _w.themeDarkAlt,
-                forcedColorAdjust: 'none',
-                disabled: {
-                    background: (_x = semanticColors) === null || _x === void 0 ? void 0 : _x.disabledBackground,
-                    contentColor: (_y = palette) === null || _y === void 0 ? void 0 : _y.neutralTertiary,
-                    iconColor: 'inherit',
-                },
-                expanded: {
-                    contentColor: (_z = palette) === null || _z === void 0 ? void 0 : _z.themePrimary,
-                },
-                focused: {
-                    contentColor: (_0 = palette) === null || _0 === void 0 ? void 0 : _0.neutralPrimary,
-                    iconColor: (_1 = palette) === null || _1 === void 0 ? void 0 : _1.themeDarkAlt,
-                },
-                hovered: {
-                    background: (_2 = palette) === null || _2 === void 0 ? void 0 : _2.neutralLighter,
-                    contentColor: (_3 = palette) === null || _3 === void 0 ? void 0 : _3.themePrimary,
-                    iconColor: (_4 = palette) === null || _4 === void 0 ? void 0 : _4.themePrimary,
-                },
-                pressed: {
-                    background: (_5 = palette) === null || _5 === void 0 ? void 0 : _5.neutralLight,
-                    contentColor: (_6 = palette) === null || _6 === void 0 ? void 0 : _6.black,
-                    iconColor: (_7 = palette) === null || _7 === void 0 ? void 0 : _7.themeDarker,
-                },
-                highContrast: {
-                    background: 'Window',
-                    borderColor: 'transparent',
-                    contentColor: 'WindowText',
-                    iconColor: 'WindowText',
-                    hovered: {
-                        background: 'Window',
-                        borderColor: 'transparent',
-                        contentColor: 'Highlight',
-                        iconColor: 'Highlight',
-                    },
-                    pressed: {
-                        background: 'Window',
-                        borderColor: 'transparent',
-                        contentColor: 'Highlight',
-                        iconColor: 'Highlight',
-                    },
-                    disabled: {
-                        background: 'Window',
-                        borderColor: 'transparent',
-                        contentColor: 'GrayText',
-                        iconColor: 'GrayText',
-                    },
-                },
-            }, 
-            // TODO: no references to palette.
-            transparent: {
-                background: 'transparent',
-                borderColor: 'transparent',
-                contentColor: (_8 = palette) === null || _8 === void 0 ? void 0 : _8.neutralPrimary,
-                fontWeight: 'normal',
-                iconColor: (_9 = palette) === null || _9 === void 0 ? void 0 : _9.themeDarkAlt,
-                disabled: {
-                    background: 'transparent',
-                    borderColor: 'transparent',
-                    contentColor: palette.neutralTertiary,
-                    iconColor: 'inherit',
-                },
-                hovered: {
-                    background: 'transparent',
-                    contentColor: (_10 = palette) === null || _10 === void 0 ? void 0 : _10.themePrimary,
-                    iconColor: (_11 = palette) === null || _11 === void 0 ? void 0 : _11.themePrimary,
-                },
-                pressed: {
-                    background: 'transparent',
-                    contentColor: (_12 = palette) === null || _12 === void 0 ? void 0 : _12.black,
-                    iconColor: (_13 = palette) === null || _13 === void 0 ? void 0 : _13.themeDarker,
-                },
-            } }, ButtonSizeVariants);
-    },
-});
-//# sourceMappingURL=useButtonClasses.js.map

package/lib/components/Button/useButtonClasses.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useButtonClasses.js","sourceRoot":"../src/","sources":["components/Button/useButtonClasses.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities';\nimport { ButtonState, ButtonVariants } from './Button.types';\n\nconst GlobalClassNames = {\n  root: 'ms-Button',\n  icon: 'ms-Button-icon',\n};\n\nexport const ButtonSizeVariants = {\n  size_smallest: {\n    height: 'var(--button-size-smallest)',\n    minHeight: 'var(--button-size-smallest)',\n  },\n\n  size_smaller: {\n    height: 'var(--button-size-smaller)',\n    minHeight: 'var(--button-size-smaller)',\n  },\n\n  size_small: {\n    height: 'var(--button-size-small)',\n    minHeight: 'var(--button-size-small)',\n  },\n\n  size_large: {\n    height: 'var(--button-size-large)',\n    minHeight: 'var(--button-size-large)',\n  },\n\n  size_larger: {\n    height: 'var(--button-size-larger)',\n    minHeight: 'var(--button-size-larger)',\n  },\n\n  size_largest: {\n    height: 'var(--button-size-largest)',\n    minHeight: 'var(--button-size-largest)',\n  },\n};\n\nexport const useButtonClasses = makeVariantClasses<ButtonState, ButtonVariants>({\n  name: 'Button',\n  prefix: '--button',\n\n  styles: {\n    root: [\n      GlobalClassNames.root,\n      {\n        cursor: 'pointer',\n        alignItems: 'center',\n        borderStyle: 'solid',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        outline: 'none',\n        position: 'relative',\n        userSelect: 'none',\n        boxSizing: 'border-box',\n        verticalAlign: 'middle',\n        textDecoration: 'none',\n        background: 'var(--button-background)',\n        color: 'var(--button-contentColor)',\n\n        borderColor: 'var(--button-borderColor)',\n        borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n        borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n        borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n        borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n        borderLeftWidth: 'var(--button-borderLeftWidth, var(--button-borderWidth))',\n        borderRightWidth: 'var(--button-borderRightWidth, var(--button-borderWidth))',\n        borderTopWidth: 'var(--button-borderTopWidth, var(--button-borderWidth))',\n        borderBottomWidth: 'var(--button-borderBottomWidth, var(--button-borderWidth))',\n        boxShadow: 'var(--button-boxShadow)',\n\n        width: 'var(--button-width)',\n        maxWidth: 'var(--button-maxWidth)',\n        minWidth: 'var(--button-minWidth)',\n        height: 'var(--button-height)',\n        minHeight: 'var(--button-minHeight)',\n\n        paddingLeft: 'var(--button-paddingLeft)',\n        paddingRight: 'var(--button-paddingRight)',\n        paddingTop: 'var(--button-paddingTop)',\n        paddingBottom: 'var(--button-paddingBottom)',\n\n        transition: 'var(--button-transition)',\n        whiteSpace: 'var(--button-whiteSpace)',\n\n        fontFamily: 'var(--button-fontFamily)',\n        fontSize: 'var(--button-fontSize)',\n        fontWeight: 'var(--button-fontWeight)',\n        WebkitFontSmoothing: 'antialiased',\n        MozOsxFontSmoothing: 'grayscale',\n\n        ':global(.ms-Fabric--isFocusVisible) &:focus::after': {\n          content: '\"\"',\n          position: 'absolute',\n          left: -1,\n          right: -1,\n          top: -1,\n          bottom: -1,\n          borderWidth: 'var(--button-focusWidth, 2px)',\n          borderStyle: 'solid',\n          borderColor: 'var(--button-focusColor, black)',\n          borderTopLeftRadius: 'var(--button-borderTopLeftRadius, var(--button-borderRadius))',\n          borderTopRightRadius: 'var(--button-borderTopRightRadius, var(--button-borderRadius))',\n          borderBottomLeftRadius: 'var(--button-borderBottomLeftRadius, var(--button-borderRadius))',\n          borderBottomRightRadius: 'var(--button-borderBottomRightRadius, var(--button-borderRadius))',\n          boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-focusInnerColor, white) inset',\n          zIndex: 1,\n\n          [EdgeChromiumHighContrastSelector]: {\n            borderColor: 'var(--button-highContrast-focusColor)',\n            boxShadow: '0 0 0 var(--button-focusInnerWidth, 1px) var(--button-highContrast-focusInnerColor) inset',\n          },\n        },\n\n        ['& > *:not(:first-child)']: {\n          marginLeft: 'var(--button-contentGap)',\n        },\n\n        [EdgeChromiumHighContrastSelector]: {\n          forcedColorAdjust: 'var(--button-forcedColorAdjust)',\n\n          background: 'var(--button-highContrast-background)',\n          borderColor: 'var(--button-highContrast-borderColor)',\n          color: 'var(--button-highContrast-contentColor)',\n\n          [`.${GlobalClassNames.icon}`]: {\n            color: 'var(--button-highContrast-iconColor)',\n          },\n        },\n\n        '&:hover': {\n          background: 'var(--button-hovered-background, var(--button-background))',\n          color: 'var(--button-hovered-contentColor, var(--button-contentColor))',\n          borderColor: 'var(--button-hovered-borderColor, var(--button-borderColor))',\n          boxShadow: 'var(--button-hovered-boxShadow, var(--button-boxShadow))',\n\n          [`.${GlobalClassNames.icon}`]: {\n            color: 'var(--button-hovered-iconColor, var(--button-iconColor))',\n          },\n\n          [EdgeChromiumHighContrastSelector]: {\n            background: 'var(--button-highContrast-hovered-background, var(--button-highContrast-background))',\n            borderColor: 'var(--button-highContrast-hovered-borderColor, var(--button-highContrast-borderColor))',\n            color: 'var(--button-highContrast-hovered-contentColor, var(--button-highContrast-contentColor))',\n            [`.${GlobalClassNames.icon}`]: {\n              color: 'var(--button-highContrast-hovered-iconColor, --button-highContrast-iconColor)',\n            },\n          },\n        },\n\n        '&:active': {\n          background: 'var(--button-pressed-background, var(--button-hovered-background))',\n          color: 'var(--button-pressed-contentColor, var(--button-hovered-contentColor, var(--button-contentColor)))',\n          borderColor:\n            'var(--button-pressed-borderColor, var(--button-hovered-borderColor, var(--button-borderColor)))',\n          boxShadow: 'var(--button-pressed-boxShadow, var(--button-hovered-boxShadow, var(--button-boxShadow)))',\n\n          transform: 'var(--button-pressed-transform)',\n          transition: 'var(--button-pressed-transition)',\n\n          [`.${GlobalClassNames.icon}`]: {\n            color: 'var(--button-pressed-iconColor, var(--button-iconColor))',\n          },\n\n          [EdgeChromiumHighContrastSelector]: {\n            background:\n              'var(--button-highContrast-pressed-background, ' +\n              'var(--button-highContrast-hovered-background, ' +\n              'var(--button-highContrast-background)))',\n            borderColor:\n              'var(--button-highContrast-pressed-borderColor, ' +\n              'var(--button-highContrast-hovered-borderColor, ' +\n              'var(--button-highContrast-borderColor)))',\n            color:\n              'var(--button-highContrast-pressed-contentColor, ' +\n              'var(--button-highContrast-hovered-contentColor, ' +\n              'var(--button-highContarst-contentColor)))',\n            [`.${GlobalClassNames.icon}`]: {\n              color:\n                'var(--button-highContrast-pressed-iconColor, ' +\n                'var(--button-highContrast-hovered-iconColor, ' +\n                'var(--button-highContrast-iconColor)))',\n            },\n          },\n        },\n\n        '&[aria-disabled=true]': {\n          pointerEvents: 'none',\n          opacity: 'var(--button-disabled-opacity)',\n          backgroundColor: 'var(--button-disabled-background)',\n          color: 'var(--button-disabled-contentColor)',\n          borderColor: 'var(--button-disabled-borderColor)',\n          boxShadow: 'var(--button-disabled-boxShadow)',\n\n          [`.${GlobalClassNames.icon}`]: {\n            color: 'var(--button-disabled-iconColor)',\n          },\n\n          [EdgeChromiumHighContrastSelector]: {\n            background: 'var(--button-highContrast-disabled-background, var(--button-highContrast-background))',\n            borderColor: 'var(--button-highContrast-disabled-borderColor, var(--button-highContrast-borderColor))',\n            color: 'var(--button-highContrast-disabled-contentColor, var(--button-highContrast-contentColor))',\n            [`.${GlobalClassNames.icon}`]: {\n              color: 'var(--button-highContrast-disabled-iconColor, --button-highContrast-iconColor)',\n            },\n          },\n        },\n      },\n    ],\n\n    icon: [\n      GlobalClassNames.icon,\n      {\n        color: 'var(--button-iconColor)',\n        display: 'flex',\n        flexShrink: 0,\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: 'var(--button-iconSize)',\n        height: 'var(--button-iconSize)',\n        fontSize: 'var(--button-iconSize, inherit)',\n        fontWeight: 'normal',\n        lineHeight: '1',\n      },\n    ],\n\n    content: {\n      lineHeight: '1',\n    },\n  },\n\n  variants: (theme: Theme): ButtonVariants => {\n    const { fonts, effects, palette, semanticColors } = theme;\n\n    return {\n      root: {\n        size: {\n          smallest: '24px',\n          smaller: '24px',\n          small: '24px',\n          regular: '32px',\n          large: '40px',\n          larger: '48px',\n          largest: '64px',\n        },\n\n        // Sizing tokens\n        iconSize: fonts?.mediumPlus?.fontSize as string,\n        borderWidth: '1px',\n        boxShadow: 'none',\n        borderRadius: effects?.roundedCorner2,\n        paddingLeft: '20px',\n        paddingRight: '20px',\n        paddingTop: '0',\n        paddingBottom: '0',\n        margin: '0',\n        width: 'auto',\n        minWidth: '96px',\n        maxWidth: '280px',\n        minHeight: 'var(--button-size-regular)',\n        contentGap: '8px',\n\n        // Font tokens\n        fontWeight: '600',\n        fontSize: fonts?.medium?.fontSize as string,\n        fontFamily: fonts?.medium?.fontFamily,\n\n        // Color tokens\n        focusColor: palette?.black,\n        focusInnerColor: palette?.white,\n        background: semanticColors?.buttonBackground,\n        borderColor: semanticColors?.buttonBorder,\n        contentColor: semanticColors?.buttonText,\n        iconColor: 'inherit',\n\n        hovered: {\n          background: semanticColors?.buttonBackgroundHovered,\n          contentColor: semanticColors?.buttonTextHovered,\n        },\n\n        pressed: {\n          background: semanticColors?.buttonBackgroundPressed,\n          contentColor: semanticColors?.buttonTextPressed,\n        },\n\n        disabled: {\n          background: semanticColors?.buttonBackgroundDisabled,\n          borderColor: semanticColors?.buttonBorderDisabled,\n          contentColor: semanticColors?.buttonTextDisabled,\n        },\n\n        highContrast: {\n          borderColor: 'WindowText',\n          contentColor: 'WindowText',\n          iconColor: 'WindowText',\n\n          hovered: {\n            borderColor: 'Highlight',\n            contentColor: 'Highlight',\n            iconColor: 'Highlight',\n          },\n\n          pressed: {\n            borderColor: 'Highlight',\n            contentColor: 'WindowText',\n            iconColor: 'WindowText',\n          },\n\n          disabled: {\n            background: 'Window',\n            borderColor: 'GrayText',\n            contentColor: 'GrayText',\n            iconColor: 'GrayText',\n          },\n        },\n      },\n\n      circular: {\n        borderRadius: '50000px',\n      },\n\n      block: {\n        width: '100%',\n        maxWidth: 'none',\n      },\n\n      iconOnly: {\n        minWidth: 'var(--button-height)',\n        width: 'var(--button-height, var(--button-minHeight))',\n        paddingTop: '0',\n        paddingBottom: '0',\n        paddingLeft: '0',\n        paddingRight: '0',\n      },\n\n      primary: {\n        background: 'var(--color-brand-background)',\n        borderColor: 'var(--color-brand-borderColor)',\n        contentColor: 'var(--color-brand-contentColor)',\n        iconColor: 'inherit',\n        forcedColorAdjust: 'none',\n\n        hovered: {\n          background: 'var(--color-brand-hovered-background)',\n          borderColor: 'var(--color-brand-hovered-borderColor)',\n          contentColor: 'var(--color-brand-hovered-contentColor)',\n        },\n\n        pressed: {\n          background: 'var(--color-brand-pressed-background)',\n          borderColor: 'var(--color-brand-pressed-borderColor)',\n          contentColor: 'var(--color-brand-pressed-contentColor)',\n        },\n\n        highContrast: {\n          background: 'WindowText',\n          borderColor: 'WindowText',\n          contentColor: 'Window',\n          focusColor: 'WindowText',\n          focusInnerColor: 'Window',\n          iconColor: 'Window',\n\n          hovered: {\n            background: 'Highlight',\n            borderColor: 'Highlight',\n            contentColor: 'Window',\n            iconColor: 'Window',\n          },\n\n          pressed: {\n            background: 'WindowText',\n            borderColor: 'WindowText',\n            contentColor: 'Window',\n            iconColor: 'Window',\n          },\n\n          disabled: {\n            background: 'Window',\n            borderColor: 'GrayText',\n            contentColor: 'GrayText',\n            iconColor: 'GrayText',\n          },\n        },\n      },\n\n      // TODO: no references to palette.\n      ghost: {\n        background: 'transparent',\n        borderColor: 'transparent',\n        contentColor: palette?.neutralPrimary,\n        fontWeight: 'normal',\n        iconColor: palette?.themeDarkAlt,\n        forcedColorAdjust: 'none',\n\n        disabled: {\n          background: semanticColors?.disabledBackground,\n          contentColor: palette?.neutralTertiary,\n          iconColor: 'inherit',\n        },\n\n        expanded: {\n          contentColor: palette?.themePrimary,\n        },\n\n        focused: {\n          contentColor: palette?.neutralPrimary,\n          iconColor: palette?.themeDarkAlt,\n        },\n\n        hovered: {\n          background: palette?.neutralLighter,\n          contentColor: palette?.themePrimary,\n          iconColor: palette?.themePrimary,\n        },\n\n        pressed: {\n          background: palette?.neutralLight,\n          contentColor: palette?.black,\n          iconColor: palette?.themeDarker,\n        },\n\n        highContrast: {\n          background: 'Window',\n          borderColor: 'transparent',\n          contentColor: 'WindowText',\n          iconColor: 'WindowText',\n\n          hovered: {\n            background: 'Window',\n            borderColor: 'transparent',\n            contentColor: 'Highlight',\n            iconColor: 'Highlight',\n          },\n\n          pressed: {\n            background: 'Window',\n            borderColor: 'transparent',\n            contentColor: 'Highlight',\n            iconColor: 'Highlight',\n          },\n\n          disabled: {\n            background: 'Window',\n            borderColor: 'transparent',\n            contentColor: 'GrayText',\n            iconColor: 'GrayText',\n          },\n        },\n      },\n\n      // TODO: no references to palette.\n      transparent: {\n        background: 'transparent',\n        borderColor: 'transparent',\n        contentColor: palette?.neutralPrimary,\n        fontWeight: 'normal',\n        iconColor: palette?.themeDarkAlt,\n\n        disabled: {\n          background: 'transparent',\n          borderColor: 'transparent',\n          contentColor: palette.neutralTertiary,\n          iconColor: 'inherit',\n        },\n\n        hovered: {\n          background: 'transparent',\n          contentColor: palette?.themePrimary,\n          iconColor: palette?.themePrimary,\n        },\n\n        pressed: {\n          background: 'transparent',\n          contentColor: palette?.black,\n          iconColor: palette?.themeDarker,\n        },\n      },\n\n      ...ButtonSizeVariants,\n    };\n  },\n});\n"]}

package/lib/components/Button/useButtonState.d.ts

@@ -1,6 +0,0 @@
-import { ButtonState } from './Button.types';
-/**
- * The useButton hook processes the Button draft state.
- * @param draftState - Button draft state to mutate.
- */
-export declare const useButtonState: (draftState: ButtonState) => void;

package/lib/components/Button/useButtonState.js

@@ -1,28 +0,0 @@
-/**
- * The useButton hook processes the Button draft state.
- * @param draftState - Button draft state to mutate.
- */
-export var useButtonState = function (draftState) {
-    // Update the button's tab-index, keyboard handling, and aria attributes.
-    if (draftState.as !== 'button') {
-        draftState.role = 'button';
-        if (draftState.as !== 'a') {
-            var onKeyDown_1 = draftState.onKeyDown, onClick_1 = draftState.onClick;
-            draftState['data-isFocusable'] = true;
-            draftState.tabIndex = 0;
-            draftState.onKeyDown = function (ev) {
-                if (onKeyDown_1) {
-                    onKeyDown_1(ev);
-                }
-                if (!ev.defaultPrevented && onClick_1 && (ev.which === 20 || ev.which === 13)) {
-                    // Translate the keydown enter/space to a click.
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    ev.target.click();
-                }
-            };
-        }
-    }
-    draftState.disabled = draftState['aria-disabled'] = draftState.disabled || draftState.loading;
-};
-//# sourceMappingURL=useButtonState.js.map

package/lib/components/Button/useButtonState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useButtonState.js","sourceRoot":"../src/","sources":["components/Button/useButtonState.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,UAAuB;IACpD,yEAAyE;IACzE,IAAI,UAAU,CAAC,EAAE,KAAK,QAAQ,EAAE;QAC9B,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;QAE3B,IAAI,UAAU,CAAC,EAAE,KAAK,GAAG,EAAE;YACjB,IAAA,kCAAS,EAAE,8BAAO,CAAgB;YAE1C,UAAU,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC;YACtC,UAAU,CAAC,QAAQ,GAAG,CAAC,CAAC;YAExB,UAAU,CAAC,SAAS,GAAG,UAAC,EAAoC;gBAC1D,IAAI,WAAS,EAAE;oBACb,WAAS,CAAC,EAAE,CAAC,CAAC;iBACf;gBAED,IAAI,CAAC,EAAE,CAAC,gBAAgB,IAAI,SAAO,IAAI,CAAC,EAAE,CAAC,KAAK,KAAK,EAAE,IAAI,EAAE,CAAC,KAAK,KAAK,EAAE,CAAC,EAAE;oBAC3E,gDAAgD;oBAChD,EAAE,CAAC,cAAc,EAAE,CAAC;oBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;oBAEpB,EAAE,CAAC,MAAsB,CAAC,KAAK,EAAE,CAAC;iBACpC;YACH,CAAC,CAAC;SACH;KACF;IAED,UAAU,CAAC,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,OAAO,CAAC;AAChG,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button draft state.\n * @param draftState - Button draft state to mutate.\n */\nexport const useButtonState = (draftState: ButtonState) => {\n  // Update the button's tab-index, keyboard handling, and aria attributes.\n  if (draftState.as !== 'button') {\n    draftState.role = 'button';\n\n    if (draftState.as !== 'a') {\n      const { onKeyDown, onClick } = draftState;\n\n      draftState['data-isFocusable'] = true;\n      draftState.tabIndex = 0;\n\n      draftState.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n        if (onKeyDown) {\n          onKeyDown(ev);\n        }\n\n        if (!ev.defaultPrevented && onClick && (ev.which === 20 || ev.which === 13)) {\n          // Translate the keydown enter/space to a click.\n          ev.preventDefault();\n          ev.stopPropagation();\n\n          (ev.target as HTMLElement).click();\n        }\n      };\n    }\n  }\n\n  draftState.disabled = draftState['aria-disabled'] = draftState.disabled || draftState.loading;\n};\n"]}

package/lib/components/CompoundButton/useCompoundButtonClasses.d.ts

@@ -1,4 +0,0 @@
-import { Theme } from '@fluentui/react-theme-provider';
-import { CompoundButtonState } from './CompoundButton.types';
-export declare const useClasses: (state: CompoundButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;
-export declare const useCompoundButtonClasses: (state: CompoundButtonState) => void;