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

package/lib/components/SplitButton/SplitButton.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { SplitButtonProps } from './SplitButton.types';
+import type { SplitButtonProps } from './SplitButton.types';
+import { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled SplitButton, using the `useSplitButton` hook.
- * {@docCategory Button}
+ * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
+ * action, while interacting with the second one opens a menu with secondary actions.
  */
-export declare const SplitButton: React.ForwardRefExoticComponent<Pick<SplitButtonProps, string | number> & React.RefAttributes<HTMLElement>>;
+export declare const SplitButton: ForwardRefComponent<SplitButtonProps>;

package/lib/components/SplitButton/SplitButton.js

@@ -1,29 +1,16 @@
 import * as React from 'react';
-import { ChevronDownIcon } from '@fluentui/react-icons-mdl2';
-import { useInlineTokens } from '@fluentui/react-theme-provider';
+import { renderSplitButton } from './renderSplitButton';
 import { useSplitButton } from './useSplitButton';
-import { useSplitButtonClasses } from './useSplitButtonClasses';
-import { Button } from '../Button/index';
-import { MenuButton } from '../MenuButton/index';
+import { useSplitButtonStyles } from './useSplitButtonStyles';
 /**
- * Define a styled SplitButton, using the `useSplitButton` hook.
- * {@docCategory Button}
+ * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
+ * action, while interacting with the second one opens a menu with secondary actions.
  */
-export var SplitButton = React.forwardRef(function (props, ref) {
-    var _a = useSplitButton(props, ref, {
-        button: { as: Button },
-        menuButton: { as: MenuButton, iconOnly: true, icon: React.createElement(ChevronDownIcon, null) },
-    }), state = _a.state, render = _a.render;
-    useSplitButtonClasses(state);
-    // TODO remove any
-    /**
-     * Type 'SplitButtonState' has no properties in common with type '{
-     *  style?: CSSProperties | undefined; tokens?: string | { [key: string]: any; }
-     *  | undefined; }
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    useInlineTokens(state, '--button');
-    return render(state);
+
+export var SplitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useSplitButton(props, ref);
+  useSplitButtonStyles(state);
+  return renderSplitButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 SplitButton.displayName = 'SplitButton';
 //# sourceMappingURL=SplitButton.js.map

package/lib/components/SplitButton/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.js","sourceRoot":"../src/","sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,UAAC,KAAK,EAAE,GAAG;IAC9E,IAAA;;;MAGJ,EAHM,gBAAK,EAAE,kBAGb,CAAC;IAEH,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAE7B,kBAAkB;IAClB;;;;OAIG;IACH,8DAA8D;IAC9D,eAAe,CAAC,KAAY,EAAE,UAAU,CAAC,CAAC;IAE1C,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { ChevronDownIcon } from '@fluentui/react-icons-mdl2';\nimport { useInlineTokens } from '@fluentui/react-theme-provider';\nimport { SplitButtonProps } from './SplitButton.types';\nimport { useSplitButton } from './useSplitButton';\nimport { useSplitButtonClasses } from './useSplitButtonClasses';\nimport { Button } from '../Button/index';\nimport { MenuButton } from '../MenuButton/index';\n\n/**\n * Define a styled SplitButton, using the `useSplitButton` hook.\n * {@docCategory Button}\n */\nexport const SplitButton = React.forwardRef<HTMLElement, SplitButtonProps>((props, ref) => {\n  const { state, render } = useSplitButton(props, ref, {\n    button: { as: Button },\n    menuButton: { as: MenuButton, iconOnly: true, icon: <ChevronDownIcon /> },\n  });\n\n  useSplitButtonClasses(state);\n\n  // TODO remove any\n  /**\n   * Type 'SplitButtonState' has no properties in common with type '{\n   *  style?: CSSProperties | undefined; tokens?: string | { [key: string]: any; }\n   *  | undefined; }\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  useInlineTokens(state as any, '--button');\n\n  return render(state);\n});\n\nSplitButton.displayName = 'SplitButton';\n"]}
+{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;;AAGG;;AACH,OAAO,IAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC5F,MAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AAEA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB,CAL4F,CAM5F;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}

package/lib/components/SplitButton/SplitButton.types.d.ts

@@ -1,35 +1,19 @@
-import * as React from 'react';
-import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ButtonProps, ButtonVariants } from '../Button/Button.types';
-import { MenuButtonProps, MenuButtonState, MenuButtonTokens } from '../MenuButton/MenuButton.types';
-/**
- * {@docCategory Button}
- */
-export interface SplitButtonProps extends ButtonProps, MenuButtonProps {
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
+import type { ButtonProps, ButtonState } from '../Button/Button.types';
+import type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';
+export declare type SplitButtonSlots = {
     /**
-     * Button to perform primary action in SplitButton.
+     * Root of the component that wraps the primary action button and menu button.
      */
-    button?: ShorthandProps;
+    root: IntrinsicShorthandProps<'div'>;
     /**
-     * Divider that separates the primary action button and the menu button parts of the SplitButton
+     * Button that opens menu with secondary actions in SplitButton.
      */
-    divider?: ShorthandProps;
+    menuButton?: ObjectShorthandProps<MenuButtonProps>;
     /**
-     * Button that opens menu with secondary actions in SplitButton.
+     * Button to perform primary action in SplitButton.
      */
-    menuButton?: ShorthandProps;
-}
-export interface SplitButtonState extends Omit<SplitButtonProps, 'menu'>, MenuButtonState {
-    menuButtonRef?: React.RefObject<HTMLButtonElement>;
-}
-/**
- * {@docCategory Button}
- */
-export declare type SplitButtonTokens = MenuButtonTokens & {
-    dividerColor?: string;
-    dividerThickness?: string;
+    primaryActionButton?: ObjectShorthandProps<ButtonProps>;
 };
-/**
- * {@docCategory Button}
- */
-export declare type SplitButtonVariants = ButtonVariants<SplitButtonTokens>;
+export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
+export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonState, 'components' | 'iconOnly' | 'root'> & Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;

package/lib/components/SplitButton/SplitButton.types.js

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=SplitButton.types.js.map

package/lib/components/SplitButton/SplitButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.types.js","sourceRoot":"../src/","sources":["components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ShorthandProps } from '@fluentui/react-compose/lib/next/index';\nimport { ButtonProps, ButtonVariants } from '../Button/Button.types';\nimport { MenuButtonProps, MenuButtonState, MenuButtonTokens } from '../MenuButton/MenuButton.types';\n\n/**\n * {@docCategory Button}\n */\nexport interface SplitButtonProps extends ButtonProps, MenuButtonProps {\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  button?: ShorthandProps;\n\n  /**\n   * Divider that separates the primary action button and the menu button parts of the SplitButton\n   */\n  divider?: ShorthandProps;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: ShorthandProps;\n}\n\nexport interface SplitButtonState extends Omit<SplitButtonProps, 'menu'>, MenuButtonState {\n  menuButtonRef?: React.RefObject<HTMLButtonElement>;\n}\n\n/**\n * {@docCategory Button}\n */\nexport type SplitButtonTokens = MenuButtonTokens & {\n  dividerColor?: string;\n  dividerThickness?: string;\n};\n\n/**\n * {@docCategory Button}\n */\nexport type SplitButtonVariants = ButtonVariants<SplitButtonTokens>;\n"]}
+{"version":3,"file":"SplitButton.types.js","sourceRoot":"","sources":["../../../src/components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":""}

package/lib/components/SplitButton/index.d.ts

@@ -1,4 +1,5 @@
-export * from './SplitButton.types';
 export * from './SplitButton';
+export * from './SplitButton.types';
+export * from './renderSplitButton';
 export * from './useSplitButton';
-export * from './useSplitButtonClasses';
+export { useSplitButtonStyles } from './useSplitButtonStyles';

package/lib/components/SplitButton/index.js

@@ -1,4 +1,6 @@
 export * from './SplitButton';
+export * from './SplitButton.types';
+export * from './renderSplitButton';
 export * from './useSplitButton';
-export * from './useSplitButtonClasses';
+export { useSplitButtonStyles } from './useSplitButtonStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/SplitButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SplitButton/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './SplitButton.types';\nexport * from './SplitButton';\nexport * from './useSplitButton';\nexport * from './useSplitButtonClasses';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/components/SplitButton/renderSplitButton.d.ts

@@ -1,7 +1,5 @@
-import { SplitButtonState } from './SplitButton.types';
+import type { SplitButtonState } from './SplitButton.types';
 /**
- * Redefine the render function to add slots. Reuse the button structure but add
- * slots to children.
- * @param state
+ * Renders a SplitButton component by passing the state defined props to the appropriate slots.
  */
 export declare const renderSplitButton: (state: SplitButtonState) => JSX.Element;

package/lib/components/SplitButton/renderSplitButton.js

@@ -1,17 +1,15 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlots } from '@fluentui/react-compose/lib/next/index';
-import { splitButtonShorthandProps } from './useSplitButton';
+import { getSlots } from '@fluentui/react-utilities';
 /**
- * Redefine the render function to add slots. Reuse the button structure but add
- * slots to children.
- * @param state
+ * Renders a SplitButton component by passing the state defined props to the appropriate slots.
  */
+
 export var renderSplitButton = function (state) {
-    var _a = getSlots(state, splitButtonShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    return (React.createElement(slots.root, __assign({}, slotProps.root),
-        React.createElement(slots.button, __assign({}, slotProps.button)),
-        React.createElement(slots.divider, __assign({}, slotProps.divider)),
-        React.createElement(slots.menuButton, __assign({}, slotProps.menuButton))));
+  var _a = getSlots(state, ['root', 'menuButton', 'primaryActionButton']),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.primaryActionButton, __assign({}, slotProps.primaryActionButton)), /*#__PURE__*/React.createElement(slots.menuButton, __assign({}, slotProps.menuButton)));
 };
 //# sourceMappingURL=renderSplitButton.js.map

package/lib/components/SplitButton/renderSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderSplitButton.js","sourceRoot":"../src/","sources":["components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAElE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAE7D;;;;GAIG;AACH,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,KAAuB;IACjD,IAAA,+CAAiE,EAA/D,gBAAK,EAAE,wBAAwD,CAAC;IAExE,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI;QAC5B,oBAAC,KAAK,CAAC,MAAM,eAAK,SAAS,CAAC,MAAM,EAAI;QACtC,oBAAC,KAAK,CAAC,OAAO,eAAK,SAAS,CAAC,OAAO,EAAI;QACxC,oBAAC,KAAK,CAAC,UAAU,eAAK,SAAS,CAAC,UAAU,EAAI,CACnC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-compose/lib/next/index';\nimport { SplitButtonState } from './SplitButton.types';\nimport { splitButtonShorthandProps } from './useSplitButton';\n\n/**\n * Redefine the render function to add slots. Reuse the button structure but add\n * slots to children.\n * @param state\n */\nexport const renderSplitButton = (state: SplitButtonState) => {\n  const { slots, slotProps } = getSlots(state, splitButtonShorthandProps);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button} />\n      <slots.divider {...slotProps.divider} />\n      <slots.menuButton {...slotProps.menuButton} />\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACjD,MAAA,EAAA,GAAuB,QAAQ,CAAmB,KAAnB,EAA0B,CAAC,MAAD,EAAS,YAAT,EAAuB,qBAAvB,CAA1B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,mBAAf,CAA1B,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CADF;AAMD,CATM","sourceRoot":""}

package/lib/components/SplitButton/useSplitButton.d.ts

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import { SplitButtonProps, SplitButtonState } from './SplitButton.types';
-export declare const splitButtonShorthandProps: string[];
+import type { SplitButtonProps, SplitButtonState } from './SplitButton.types';
 /**
- * Redefine the component factory, reusing button factory.
+ * Given user props, defines default props for the SplitButton and returns processed state.
+ * @param props - User provided props to the SplitButton component.
+ * @param ref - User provided ref to be passed to the SplitButton component.
  */
-export declare const useSplitButton: (props: SplitButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: SplitButtonProps | undefined) => {
-    state: SplitButtonState;
-    render: (state: SplitButtonState) => JSX.Element;
-};
+export declare const useSplitButton: (props: SplitButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;

package/lib/components/SplitButton/useSplitButton.js

@@ -1,51 +1,73 @@
-import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import { resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index';
-import { renderSplitButton } from './renderSplitButton';
-import { useMergedRefs } from '@fluentui/react-hooks';
-export var splitButtonShorthandProps = ['icon', 'button', 'divider', 'menuButton'];
-var mergeProps = makeMergeProps({ deepMerge: splitButtonShorthandProps });
+import { __assign } from "tslib";
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { Button } from '../Button/Button';
+import { MenuButton } from '../MenuButton/MenuButton';
 /**
- * Redefine the component factory, reusing button factory.
+ * Given user props, defines default props for the SplitButton and returns processed state.
+ * @param props - User provided props to the SplitButton component.
+ * @param ref - User provided ref to be passed to the SplitButton component.
  */
-export var useSplitButton = function (props, ref, defaultProps) {
-    var _a = resolveShorthandProps(props, splitButtonShorthandProps), _b = _a.as, as = _b === void 0 ? 'span' : _b, className = _a.className, style = _a.style, primary = _a.primary, ghost = _a.ghost, disabled = _a.disabled, loading = _a.loading, circular = _a.circular, block = _a.block, menu = _a.menu, size = _a.size, transparent = _a.transparent, userProps = __rest(_a, ["as", "className", "style", "primary", "ghost", "disabled", "loading", "circular", "block", "menu", "size", "transparent"]);
-    ref = useMergedRefs(ref, React.useRef(null));
-    // A split button should be disabled when disabled or loading.
-    var disabledOrLoading = disabled || loading;
-    var state = mergeProps({
-        as: 'span',
-        className: className,
-        style: style,
-        disabled: disabled,
-        block: block,
-        primary: primary,
-        size: size,
-        transparent: transparent,
-        'aria-disabled': disabledOrLoading,
-        button: __assign({ as: 'span', ref: ref,
-            primary: primary,
-            ghost: ghost,
-            circular: circular, disabled: disabledOrLoading, loading: loading,
-            size: size,
-            transparent: transparent }, userProps),
-        divider: { as: 'span', children: null },
-        menuButton: {
-            as: 'span',
-            primary: primary,
-            ghost: ghost,
-            circular: circular,
-            size: size,
-            disabled: disabledOrLoading,
-            loading: loading,
-            transparent: transparent,
-            menu: menu,
-            children: null,
-        },
-    }, defaultProps);
-    return {
-        state: state,
-        render: renderSplitButton,
-    };
+
+export var useSplitButton = function (props, ref) {
+  var appearance = props.appearance,
+      _a = props.block,
+      block = _a === void 0 ? false : _a,
+      children = props.children,
+      _b = props.disabled,
+      disabled = _b === void 0 ? false : _b,
+      _c = props.disabledFocusable,
+      disabledFocusable = _c === void 0 ? false : _c,
+      icon = props.icon,
+      _d = props.iconPosition,
+      iconPosition = _d === void 0 ? 'before' : _d,
+      menuButton = props.menuButton,
+      primaryActionButton = props.primaryActionButton,
+      _e = props.shape,
+      shape = _e === void 0 ? 'rounded' : _e,
+      _f = props.size,
+      size = _f === void 0 ? 'medium' : _f;
+  var menuButtonShorthand = resolveShorthand(menuButton, {
+    defaultProps: {
+      appearance: appearance,
+      disabled: disabled,
+      disabledFocusable: disabledFocusable,
+      shape: shape,
+      size: size
+    }
+  });
+  var primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
+    defaultProps: {
+      appearance: appearance,
+      block: block,
+      children: children,
+      disabled: disabled,
+      disabledFocusable: disabledFocusable,
+      icon: icon,
+      iconPosition: iconPosition,
+      shape: shape,
+      size: size
+    }
+  });
+  return {
+    // Props passed at the top-level
+    appearance: appearance,
+    block: block,
+    disabled: disabled,
+    disabledFocusable: disabledFocusable,
+    iconPosition: iconPosition,
+    shape: shape,
+    size: size,
+    // Slots definition
+    components: {
+      root: 'div',
+      menuButton: MenuButton,
+      primaryActionButton: Button
+    },
+    root: getNativeElementProps('div', __assign({
+      ref: ref
+    }, props)),
+    menuButton: menuButtonShorthand,
+    primaryActionButton: primaryActionButtonShorthand
+  };
 };
 //# sourceMappingURL=useSplitButton.js.map

package/lib/components/SplitButton/useSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSplitButton.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,CAAC,IAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAErF,IAAM,UAAU,GAAG,cAAc,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,CAAC,CAAC;AAE5E;;GAEG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,UAC5B,KAAuB,EACvB,GAA2B,EAC3B,YAA+B;IAE/B,IAAM,4DAcqD,EAbzD,UAAW,EAAX,gCAAW,EACX,wBAAS,EACT,gBAAK,EACL,oBAAO,EACP,gBAAK,EACL,sBAAQ,EACR,oBAAO,EACP,sBAAQ,EACR,gBAAK,EACL,cAAI,EACJ,cAAI,EACJ,4BAAW,EACX,mJACyD,CAAC;IAE5D,GAAG,GAAG,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC,CAAC;IAE1D,8DAA8D;IAC9D,IAAM,iBAAiB,GAAG,QAAQ,IAAI,OAAO,CAAC;IAE9C,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,EAAE,EAAE,MAAM;QACV,SAAS,WAAA;QACT,KAAK,OAAA;QACL,QAAQ,UAAA;QACR,KAAK,OAAA;QACL,OAAO,SAAA;QACP,IAAI,MAAA;QACJ,WAAW,aAAA;QACX,eAAe,EAAE,iBAAiB;QAElC,MAAM,aACJ,EAAE,EAAE,MAAM,EACV,GAAG,KAAA;YACH,OAAO,SAAA;YACP,KAAK,OAAA;YACL,QAAQ,UAAA,EACR,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,SAAA;YACP,IAAI,MAAA;YACJ,WAAW,aAAA,IACR,SAAS,CACb;QAED,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QAEvC,UAAU,EAAE;YACV,EAAE,EAAE,MAAM;YACV,OAAO,SAAA;YACP,KAAK,OAAA;YACL,QAAQ,UAAA;YACR,IAAI,MAAA;YACJ,QAAQ,EAAE,iBAAiB;YAC3B,OAAO,SAAA;YACP,WAAW,aAAA;YACX,IAAI,MAAA;YACJ,QAAQ,EAAE,IAAI;SACf;KACF,EACD,YAAY,CACO,CAAC;IAEtB,OAAO;QACL,KAAK,OAAA;QACL,MAAM,EAAE,iBAAiB;KAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index';\nimport { SplitButtonProps, SplitButtonState } from './SplitButton.types';\nimport { renderSplitButton } from './renderSplitButton';\nimport { useMergedRefs } from '@fluentui/react-hooks';\n\nexport const splitButtonShorthandProps = ['icon', 'button', 'divider', 'menuButton'];\n\nconst mergeProps = makeMergeProps({ deepMerge: splitButtonShorthandProps });\n\n/**\n * Redefine the component factory, reusing button factory.\n */\nexport const useSplitButton = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: SplitButtonProps,\n) => {\n  const {\n    as = 'span',\n    className,\n    style,\n    primary,\n    ghost,\n    disabled,\n    loading,\n    circular,\n    block,\n    menu,\n    size,\n    transparent,\n    ...userProps\n  } = resolveShorthandProps(props, splitButtonShorthandProps);\n\n  ref = useMergedRefs(ref, React.useRef<HTMLElement>(null));\n\n  // A split button should be disabled when disabled or loading.\n  const disabledOrLoading = disabled || loading;\n\n  const state = mergeProps(\n    {\n      as: 'span',\n      className,\n      style,\n      disabled,\n      block,\n      primary,\n      size,\n      transparent,\n      'aria-disabled': disabledOrLoading,\n\n      button: {\n        as: 'span',\n        ref,\n        primary,\n        ghost,\n        circular,\n        disabled: disabledOrLoading,\n        loading,\n        size,\n        transparent,\n        ...userProps,\n      },\n\n      divider: { as: 'span', children: null },\n\n      menuButton: {\n        as: 'span',\n        primary,\n        ghost,\n        circular,\n        size,\n        disabled: disabledOrLoading,\n        loading,\n        transparent,\n        menu,\n        children: null,\n      },\n    },\n    defaultProps,\n  ) as SplitButtonState;\n\n  return {\n    state,\n    render: renderSplitButton,\n  };\n};\n"]}
+{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,IAAM,cAAc,GAAG,UAC5B,KAD4B,EAE5B,GAF4B,EAEyB;AAGnD,MAAA,UAAU,GAWR,KAAK,CAXG,UAAV;AAAA,MACA,EAAA,GAUE,KAAK,CAVM,KADb;AAAA,MACA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EADb;AAAA,MAEA,QAAQ,GASN,KAAK,CATC,QAFR;AAAA,MAGA,EAAA,GAQE,KAAK,CARS,QAHhB;AAAA,MAGA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAHhB;AAAA,MAIA,EAAA,GAOE,KAAK,CAPkB,iBAJzB;AAAA,MAIA,iBAAiB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAJzB;AAAA,MAKA,IAAI,GAMF,KAAK,CANH,IALJ;AAAA,MAMA,EAAA,GAKE,KAAK,CALgB,YANvB;AAAA,MAMA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EANvB;AAAA,MAOA,UAAU,GAIR,KAAK,CAJG,UAPV;AAAA,MAQA,mBAAmB,GAGjB,KAAK,CAHY,mBARnB;AAAA,MASA,EAAA,GAEE,KAAK,CAFU,KATjB;AAAA,MASA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAH,GAAY,EATjB;AAAA,MAUA,EAAA,GACE,KAAK,CADQ,IAVf;AAAA,MAUA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAVf;AAYF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UAAU,EAAA,UADE;AAEZ,MAAA,QAAQ,EAAA,QAFI;AAGZ,MAAA,iBAAiB,EAAA,iBAHL;AAIZ,MAAA,KAAK,EAAA,KAJO;AAKZ,MAAA,IAAI,EAAA;AALQ;AADyC,GAAb,CAA5C;AASA,MAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UAAU,EAAA,UADE;AAEZ,MAAA,KAAK,EAAA,KAFO;AAGZ,MAAA,QAAQ,EAAA,QAHI;AAIZ,MAAA,QAAQ,EAAA,QAJI;AAKZ,MAAA,iBAAiB,EAAA,iBALL;AAMZ,MAAA,IAAI,EAAA,IANQ;AAOZ,MAAA,YAAY,EAAA,YAPA;AAQZ,MAAA,KAAK,EAAA,KARO;AASZ,MAAA,IAAI,EAAA;AATQ;AAD2D,GAAtB,CAArD;AAcA,SAAO;AACL;AACA,IAAA,UAAU,EAAA,UAFL;AAGL,IAAA,KAAK,EAAA,KAHA;AAIL,IAAA,QAAQ,EAAA,QAJH;AAKL,IAAA,iBAAiB,EAAA,iBALZ;AAML,IAAA,YAAY,EAAA,YANP;AAOL,IAAA,KAAK,EAAA,KAPA;AAQL,IAAA,IAAI,EAAA,IARC;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAAI,MAAA,GAAG,EAAA;AAAP,KAAA,EAAY,KAAZ,CAAN,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CA7DM","sourceRoot":""}

package/lib/components/SplitButton/useSplitButtonStyles.d.ts

@@ -0,0 +1,2 @@
+import type { SplitButtonState } from './SplitButton.types';
+export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;

package/lib/components/SplitButton/useSplitButtonStyles.js

@@ -0,0 +1,77 @@
+import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+var SplitButtonClassNames = {
+  primaryActionButton: 'SplitButton-primaryActionButton',
+  menuButton: 'SplitButton-menuButton'
+};
+
+var useFocusStyles = /*#__PURE__*/__styles({
+  "primaryActionButton": {},
+  "menuButton": {}
+}, {});
+
+var useRootStyles = /*#__PURE__*/__styles({
+  "base": {
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "fsxf2b5",
+    "qhf8xq": "f10pi13n",
+    "ha4doy": "fmrv4ls",
+    "ipgm0c": ["f178uykt", "f90yzzo"],
+    "B6cuk21": ["f1bxd3c5", "f1ekv84t"],
+    "bajz6s": ["fnux5s6", "f5nfhee"],
+    "Bzqncq": ["f19wc9x7", "f5bevrs"],
+    "Flt4rd": ["f1wefiyg", "f1leuqsa"]
+  },
+  "block": {
+    "a9b677": "fly5x3f"
+  },
+  "outline": {},
+  "primary": {
+    "Bxrr62k": ["f8z1slf", "f1qj10op"],
+    "wqijrc": ["fmrqvvu", "fu0z9tm"],
+    "Bsk9mq6": ["f1naws84", "f1ry7auu"]
+  },
+  "subtle": {
+    "Bxrr62k": ["f1xobncs", "f1xirlzn"],
+    "wqijrc": ["f1hmsn3f", "fi0rm9z"],
+    "Bsk9mq6": ["fam4u78", "f1hqq1j6"]
+  },
+  "transparent": {
+    "Bxrr62k": ["f1xobncs", "f1xirlzn"],
+    "wqijrc": ["f1hmsn3f", "fi0rm9z"],
+    "Bsk9mq6": ["fam4u78", "f1hqq1j6"]
+  },
+  "circular": {},
+  "rounded": {},
+  "square": {},
+  "disabled": {
+    "Bxrr62k": ["f11wzqjl", "f1a5dzic"],
+    "wqijrc": ["fhk4lgh", "f1r7ztp2"],
+    "Bsk9mq6": ["f1ot7jx6", "f1qvd61g"]
+  }
+}, {
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f178uykt .SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f90yzzo .SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1bxd3c5 .SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1ekv84t .SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".fnux5s6 .SplitButton-menuButton{border-left-width:0;}", ".f5nfhee .SplitButton-menuButton{border-right-width:0;}", ".f19wc9x7 .SplitButton-menuButton{border-top-left-radius:0;}", ".f5bevrs .SplitButton-menuButton{border-top-right-radius:0;}", ".f1wefiyg .SplitButton-menuButton{border-bottom-left-radius:0;}", ".f1leuqsa .SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".f8z1slf .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1qj10op .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1xobncs .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1xirlzn .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f11wzqjl .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1a5dzic .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "h": [".fmrqvvu:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fu0z9tm:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1hmsn3f:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fi0rm9z:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".fhk4lgh:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1r7ztp2:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "a": [".f1naws84:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1ry7auu:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fam4u78:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1hqq1j6:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1ot7jx6:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1qvd61g:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
+});
+
+export var useSplitButtonStyles = function (state) {
+  var rootStyles = useRootStyles();
+  var focusStyles = useFocusStyles();
+  var appearance = state.appearance,
+      block = state.block,
+      disabled = state.disabled,
+      disabledFocusable = state.disabledFocusable;
+  state.root.className = mergeClasses(rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
+
+  if (state.menuButton) {
+    state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
+  }
+
+  if (state.primaryActionButton) {
+    state.primaryActionButton.className = mergeClasses(SplitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
+  }
+
+  return state;
+};
+//# sourceMappingURL=useSplitButtonStyles.js.map

package/lib/components/SplitButton/useSplitButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AAGA,IAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,iCADO;AAE5B,EAAA,UAAU,EAAE;AAFgB,CAA9B;;AAKA,IAAM,cAAc,gBAAG;AAAA;AAAA;AAAA,MAAvB;;AAaA,IAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,WAAW,GAAG,cAAc,EAAlC;AAEQ,MAAA,UAAU,GAAyC,KAAK,CAA9C,UAAV;AAAA,MAAY,KAAK,GAAkC,KAAK,CAAvC,KAAjB;AAAA,MAAmB,QAAQ,GAAwB,KAAK,CAA7B,QAA3B;AAAA,MAA6B,iBAAiB,GAAK,KAAK,CAAV,iBAA9C;AAER,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,UAAU,CAAC,IADsB,EAEjC,KAAK,IAAI,UAAU,CAAC,KAFa,EAGjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAHS,EAIjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJb,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;AAQA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CA/BM","sourceRoot":""}

package/lib/components/ToggleButton/ToggleButton.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { ToggleButtonProps } from './ToggleButton.types';
+import type { ToggleButtonProps } from './ToggleButton.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled ToggleButton, using the `useToggleButton` hook.
- * {@docCategory Button}
+ * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
-export declare const ToggleButton: React.ForwardRefExoticComponent<Pick<ToggleButtonProps, string | number> & React.RefAttributes<HTMLElement>>;
+export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;

package/lib/components/ToggleButton/ToggleButton.js

@@ -1,18 +1,15 @@
 import * as React from 'react';
+import { renderToggleButton } from './renderToggleButton';
 import { useToggleButton } from './useToggleButton';
-import { useInlineTokens } from '@fluentui/react-theme-provider';
-import { useButtonClasses } from '../Button/useButtonClasses';
-import { useToggleButtonClasses } from './useToggleButtonClasses';
+import { useToggleButtonStyles } from './useToggleButtonStyles';
 /**
- * Define a styled ToggleButton, using the `useToggleButton` hook.
- * {@docCategory Button}
+ * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
-export var ToggleButton = React.forwardRef(function (props, ref) {
-    var _a = useToggleButton(props, ref), render = _a.render, state = _a.state;
-    useButtonClasses(state);
-    useToggleButtonClasses(state);
-    useInlineTokens(state, '--button');
-    return render(state);
+
+export var ToggleButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useToggleButton(props, ref);
+  useToggleButtonStyles(state);
+  return renderToggleButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 ToggleButton.displayName = 'ToggleButton';
 //# sourceMappingURL=ToggleButton.js.map

package/lib/components/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;GAGG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAiC,UAAC,KAAK,EAAE,GAAG;IAChF,IAAA,gCAA+C,EAA7C,kBAAM,EAAE,gBAAqC,CAAC;IAEtD,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACxB,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAC9B,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEnC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\nimport { ToggleButtonProps } from './ToggleButton.types';\nimport { useToggleButton } from './useToggleButton';\nimport { useInlineTokens } from '@fluentui/react-theme-provider';\nimport { useButtonClasses } from '../Button/useButtonClasses';\nimport { useToggleButtonClasses } from './useToggleButtonClasses';\n\n/**\n * Define a styled ToggleButton, using the `useToggleButton` hook.\n * {@docCategory Button}\n */\nexport const ToggleButton = React.forwardRef<HTMLElement, ToggleButtonProps>((props, ref) => {\n  const { render, state } = useToggleButton(props, ref);\n\n  useButtonClasses(state);\n  useToggleButtonClasses(state);\n  useInlineTokens(state, '--button');\n\n  return render(state);\n});\n\nToggleButton.displayName = 'ToggleButton';\n"]}
+{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AAIA;;AAEG;;AACH,OAAO,IAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9F,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,kBAAkB,CAAC,KAAD,CAAzB,CAL8F,CAM9F;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}

package/lib/components/ToggleButton/ToggleButton.types.d.ts

@@ -1,25 +1,19 @@
-import { ButtonProps, ButtonTokens, ButtonVariants } from '../Button/Button.types';
-/**
- * {@docCategory Button}
- */
-export interface ToggleButtonProps extends ButtonProps {
+import type { ButtonProps, ButtonState } from '../Button/Button.types';
+export declare type ToggleButtonCommons = {
     /**
      * Defines the controlled checked state of the `ToggleButton`.
-     * Mutually exclusive to `defaultChecked`.
+     * If passed, `ToggleButton` ignores the `defaultChecked` property.
      * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
      * correct value based on handling `onClick` events and re-rendering.
+     * @default false
      */
-    checked?: boolean;
+    checked: boolean;
+};
+export declare type ToggleButtonProps = ButtonProps & Partial<ToggleButtonCommons> & {
     /**
-     * Defines whether the `ToggleButton` is inititally in a checked state or not when rendered.
-     * Mutually exclusive to `checked`.
+     * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.
+     * @default false
      */
     defaultChecked?: boolean;
-}
-/**
- * {@docCategory Button}
- */
-export interface ToggleButtonState extends ToggleButtonProps {
-}
-export declare type ToggleButtonTokens = ButtonTokens;
-export declare type ToggleButtonVariants = ButtonVariants<ToggleButtonTokens>;
+};
+export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;

package/lib/components/ToggleButton/ToggleButton.types.js

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=ToggleButton.types.js.map

package/lib/components/ToggleButton/ToggleButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ButtonProps, ButtonTokens, ButtonVariants } from '../Button/Button.types';\n\n/**\n * {@docCategory Button}\n */\nexport interface ToggleButtonProps extends ButtonProps {\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * Mutually exclusive to `defaultChecked`.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the `ToggleButton` is inititally in a checked state or not when rendered.\n   * Mutually exclusive to `checked`.\n   */\n  defaultChecked?: boolean;\n}\n\n/**\n * {@docCategory Button}\n */\nexport interface ToggleButtonState extends ToggleButtonProps {}\n\nexport type ToggleButtonTokens = ButtonTokens;\n\nexport type ToggleButtonVariants = ButtonVariants<ToggleButtonTokens>;\n"]}
+{"version":3,"file":"ToggleButton.types.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":""}

package/lib/components/ToggleButton/index.d.ts

@@ -1,5 +1,5 @@
+export * from './ToggleButton';
 export * from './ToggleButton.types';
+export * from './renderToggleButton';
 export * from './useToggleButton';
-export * from './useToggleButtonClasses';
-export * from './ToggleButton';
-export * from './useChecked';
+export { useToggleButtonStyles } from './useToggleButtonStyles';

package/lib/components/ToggleButton/index.js

@@ -1,5 +1,6 @@
-export * from './useToggleButton';
-export * from './useToggleButtonClasses';
 export * from './ToggleButton';
-export * from './useChecked';
+export * from './ToggleButton.types';
+export * from './renderToggleButton';
+export * from './useToggleButton';
+export { useToggleButtonStyles } from './useToggleButtonStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/ToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC","sourcesContent":["export * from './ToggleButton.types';\nexport * from './useToggleButton';\nexport * from './useToggleButtonClasses';\nexport * from './ToggleButton';\nexport * from './useChecked';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/ToggleButton/renderToggleButton.d.ts

@@ -0,0 +1 @@
+export { renderButton as renderToggleButton } from '../Button/renderButton';

package/lib/components/ToggleButton/renderToggleButton.js

@@ -0,0 +1,2 @@
+export { renderButton as renderToggleButton } from '../Button/renderButton';
+//# sourceMappingURL=renderToggleButton.js.map

package/lib/components/ToggleButton/renderToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}