@fluentui/react-button 0.0.0-nightly-20230502-0418.1 → 0.0.0-nightly-20230504-0417.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Tue, 02 May 2023 04:24:42 GMT",
-      "tag": "@fluentui/react-button_v0.0.0-nightly-20230502-0418.1",
-      "version": "0.0.0-nightly-20230502-0418.1",
+      "date": "Thu, 04 May 2023 04:24:59 GMT",
+      "tag": "@fluentui/react-button_v0.0.0-nightly-20230504-0417.1",
+      "version": "0.0.0-nightly-20230504-0417.1",
       "comments": {
         "prerelease": [
           {
@@ -16,50 +16,50 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,25 +1,25 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Tue, 02 May 2023 04:24:42 GMT and should not be manually modified.
+This log was last generated on Thu, 04 May 2023 04:24:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230502-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20230502-0418.1)
+## [0.0.0-nightly-20230504-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20230504-0417.1)
 
-Tue, 02 May 2023 04:24:42 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.10..@fluentui/react-button_v0.0.0-nightly-20230502-0418.1)
+Thu, 04 May 2023 04:24:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.10..@fluentui/react-button_v0.0.0-nightly-20230504-0417.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-aria to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-aria to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
 
 ## [9.3.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.10)
 

package/dist/index.d.ts

@@ -0,0 +1,272 @@
+/// <reference types="react" />
+
+import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Buttons give people a way to trigger an action.
+ */
+export declare const Button: ForwardRefComponent<ButtonProps>;
+
+export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
+
+/**
+ * @internal
+ * Internal context provider used to update default values between internal components
+ */
+export declare const ButtonContextProvider: React_2.Provider<ButtonContextValue | undefined>;
+
+/**
+ * @internal
+ * Internal context value used to update default values between internal components
+ */
+export declare interface ButtonContextValue {
+    size?: ButtonSize;
+}
+
+export declare type ButtonProps = ComponentProps<ButtonSlots> & {
+    /**
+     * A button can have its content and borders styled for greater emphasis or to be subtle.
+     * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.
+     * - 'primary': Emphasizes the button as a primary action.
+     * - 'outline': Removes background styling.
+     * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
+     * - 'transparent': Removes background and border styling.
+     *
+     * @default 'secondary'
+     */
+    appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
+    /**
+     * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
+     * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
+     * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
+     *
+     * @default false
+     */
+    disabledFocusable?: boolean;
+    /**
+     * A button can show that it cannot be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * A button can format its icon to appear before or after its content.
+     *
+     * @default 'before'
+     */
+    iconPosition?: 'before' | 'after';
+    /**
+     * A button can be rounded, circular, or square.
+     *
+     * @default 'rounded'
+     */
+    shape?: 'rounded' | 'circular' | 'square';
+    /**
+     * A button supports different sizes.
+     *
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+};
+
+/**
+ * A button supports different sizes.
+ */
+declare type ButtonSize = 'small' | 'medium' | 'large';
+
+export declare type ButtonSlots = {
+    /**
+     * Root of the component that renders as either a `<button>` tag or an `<a>` tag.
+     */
+    root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
+    /**
+     * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
+     */
+    icon?: Slot<'span'>;
+};
+
+export declare type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
+    /**
+     * A button can contain only an icon.
+     *
+     * @default false
+     */
+    iconOnly: boolean;
+};
+
+/**
+ * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
+ */
+export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
+
+export declare const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
+
+export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
+
+export declare type CompoundButtonSlots = ButtonSlots & {
+    /**
+     * Second line of text that describes the action this button takes.
+     */
+    secondaryContent?: Slot<'span'>;
+    /**
+     * Container that wraps the children and the secondaryContent slot.
+     */
+    contentContainer: NonNullable<Slot<'span'>>;
+};
+
+export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'>;
+
+/**
+ * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
+ * menus.
+ */
+export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;
+
+export declare const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
+
+export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
+
+export declare type MenuButtonSlots = ButtonSlots & {
+    /**
+     * Menu icon that indicates that this button has a menu that can be expanded.
+     */
+    menuIcon?: Slot<'span'>;
+};
+
+export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
+
+/**
+ * Renders a Button component by passing the state defined props to the appropriate slots.
+ */
+declare const renderButton_unstable: (state: ButtonState) => JSX.Element;
+export { renderButton_unstable }
+export { renderButton_unstable as renderToggleButton_unstable }
+
+/**
+ * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderCompoundButton_unstable: (state: CompoundButtonState) => JSX.Element;
+
+/**
+ * Renders a MenuButton component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderMenuButton_unstable: (state: MenuButtonState) => JSX.Element;
+
+/**
+ * Renders a SplitButton component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Element;
+
+/**
+ * SplitButtons are a grouping of two interactive surfaces where 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: ForwardRefComponent<SplitButtonProps>;
+
+export declare const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
+
+export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
+
+export declare type SplitButtonSlots = {
+    /**
+     * Root of the component that wraps the primary action button and menu button.
+     */
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * Button that opens menu with secondary actions in SplitButton.
+     */
+    menuButton?: Slot<typeof MenuButton>;
+    /**
+     * Button to perform primary action in SplitButton.
+     */
+    primaryActionButton?: Slot<typeof Button>;
+};
+
+export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonState, 'components' | 'iconOnly' | 'root'> & Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;
+
+/**
+ * ToggleButtons are buttons that toggle between two defined states when triggered.
+ */
+export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
+
+export declare const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
+
+export declare type ToggleButtonProps = ButtonProps & {
+    /**
+     * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Defines the controlled checked state of the `ToggleButton`.
+     * 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;
+};
+
+export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;
+
+/**
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */
+export declare const useButton_unstable: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
+
+/**
+ * @internal
+ * Internal context hook used to update default values between internal components
+ */
+export declare const useButtonContext: () => ButtonContextValue;
+
+export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonState;
+
+/**
+ * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the CompoundButton component.
+ * @param ref - User provided ref to be passed to the CompoundButton component.
+ */
+export declare const useCompoundButton_unstable: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
+
+export declare const useCompoundButtonStyles_unstable: (state: CompoundButtonState) => CompoundButtonState;
+
+/**
+ * Given user props, returns the final state for a MenuButton.
+ */
+export declare const useMenuButton_unstable: ({ menuIcon, ...props }: MenuButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
+
+export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
+
+/**
+ * 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_unstable: (props: SplitButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
+
+export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
+
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */
+export declare const useToggleButton_unstable: (props: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
+
+export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
+
+export declare function useToggleState<TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>, TButtonState extends Pick<ButtonState, 'root'>, TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState;
+
+export { }

package/lib/Button.js

@@ -0,0 +1,2 @@
+export * from './components/Button/index';
+//# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/Button.tsx"],"sourcesContent":["export * from './components/Button/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/CompoundButton.js

@@ -0,0 +1,2 @@
+export * from './components/CompoundButton/index';
+//# sourceMappingURL=CompoundButton.js.map

package/lib/CompoundButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/CompoundButton.ts"],"sourcesContent":["export * from './components/CompoundButton/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/MenuButton.js

@@ -0,0 +1,2 @@
+export * from './components/MenuButton/index';
+//# sourceMappingURL=MenuButton.js.map

package/lib/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/MenuButton.ts"],"sourcesContent":["export * from './components/MenuButton/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/SplitButton.js

@@ -0,0 +1,2 @@
+export * from './components/SplitButton/index';
+//# sourceMappingURL=SplitButton.js.map

package/lib/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/SplitButton.ts"],"sourcesContent":["export * from './components/SplitButton/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/ToggleButton.js

@@ -0,0 +1,2 @@
+export * from './components/ToggleButton/index';
+//# sourceMappingURL=ToggleButton.js.map

package/lib/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/ToggleButton.ts"],"sourcesContent":["export * from './components/ToggleButton/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/components/Button/Button.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { renderButton_unstable } from './renderButton';
+import { useButton_unstable } from './useButton';
+import { useButtonStyles_unstable } from './useButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Buttons give people a way to trigger an action.
+ */
+export const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useButton_unstable(props, ref);
+  useButtonStyles_unstable(state);
+  useCustomStyleHook_unstable('useButtonStyles_unstable')(state);
+  return renderButton_unstable(state);
+  // Casting is required due to lack of distributive union to support unions on @types/react
+});
+
+Button.displayName = 'Button';
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHook_unstable","Button","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import * 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,wBAAwB,QAAQ;AAGzC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQP,kBAAA,CAAmBK,KAAA,EAAOC,GAAA;EAExCL,wBAAA,CAAyBM,KAAA;EAEzBL,2BAAA,CAA4B,4BAA4BK,KAAA;EAExD,OAAOR,qBAAA,CAAsBQ,KAAA;EAC7B;AACF;;AAEAJ,MAAA,CAAOK,WAAW,GAAG"}

package/lib/components/Button/Button.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/Button/Button.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, 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 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"],"mappings":"AAAA"}

package/lib/components/Button/index.js

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './renderButton';
+export * from './useButton';
+export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["buttonClassNames","useButtonStyles_unstable"],"sources":["../../../src/components/Button/index.ts"],"sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"mappings":"AAAA,cAAc;AAGd,cAAc;AACd,cAAc;AACd,SAASA,gBAAgB,EAAEC,wBAAwB,QAAQ"}

package/lib/components/Button/renderButton.js

@@ -0,0 +1,17 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+/**
+ * Renders a Button component by passing the state defined props to the appropriate slots.
+ */
+export const renderButton_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlotsNext(state);
+  const {
+    iconOnly,
+    iconPosition
+  } = state;
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, iconPosition !== 'after' && slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon));
+};
+//# sourceMappingURL=renderButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","renderButton_unstable","state","slots","slotProps","iconOnly","iconPosition","root","icon","children"],"sources":["../../../src/components/Button/renderButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } 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: ButtonState) => {\n  const { slots, slotProps } = getSlotsNext<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA0BE,KAAA;EACvD,MAAM;IAAEG,QAAA;IAAUC;EAAY,CAAE,GAAGJ,KAAA;EAEnC,oBACEH,aAfJ,CAeKI,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,EAC3BD,YAAA,KAAiB,WAAWH,KAAA,CAAMK,IAAI,iBAAIT,aAhBjD,CAgBkDI,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,GACxE,CAACH,QAAA,IAAYH,KAAA,CAAMK,IAAI,CAACE,QAAQ,EAChCH,YAAA,KAAiB,WAAWH,KAAA,CAAMK,IAAI,iBAAIT,aAlBjD,CAkBkDI,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI;AAG/E"}

package/lib/components/Button/useButton.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useARIAButtonShorthand } from '@fluentui/react-aria';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { useButtonContext } from '../../contexts/ButtonContext';
+/**
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */
+export const useButton_unstable = (props, ref) => {
+  const {
+    size: contextSize
+  } = useButtonContext();
+  const {
+    appearance = 'secondary',
+    as = 'button',
+    disabled = false,
+    disabledFocusable = false,
+    icon,
+    iconPosition = 'before',
+    shape = 'rounded',
+    size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium'
+  } = props;
+  const iconShorthand = resolveShorthand(icon);
+  return {
+    // Props passed at the top-level
+    appearance,
+    disabled,
+    disabledFocusable,
+    iconPosition,
+    shape,
+    size,
+    // State calculated from a set of props
+    iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+    // Slots definition
+    components: {
+      root: 'button',
+      icon: 'span'
+    },
+    root: getNativeElementProps(as, useARIAButtonShorthand(props, {
+      required: true,
+      defaultProps: {
+        ref: ref,
+        type: 'button'
+      }
+    })),
+    icon: iconShorthand
+  };
+};
+//# sourceMappingURL=useButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useARIAButtonShorthand","getNativeElementProps","resolveShorthand","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","iconOnly","Boolean","children","components","root","required","defaultProps","type"],"sources":["../../../src/components/Button/useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { 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 {\n    appearance = 'secondary',\n    as = 'button',\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    shape = 'rounded',\n    size = contextSize ?? 'medium',\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n\n    root: getNativeElementProps(\n      as,\n      useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n        required: true,\n        defaultProps: {\n          ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n          type: 'button',\n        },\n      }),\n    ),\n    icon: iconShorthand,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAA8BC,sBAAsB,QAAQ;AAC5D,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AACxD,SAASC,gBAAgB,QAAQ;AAGjC;;;;;AAKA,OAAO,MAAMC,kBAAA,GAAqBA,CAChCC,KAAA,EACAC,GAAA,KACgB;EAChB,MAAM;IAAEC,IAAA,EAAMC;EAAW,CAAE,GAAGL,gBAAA;EAC9B,MAAM;IACJM,UAAA,GAAa;IACbC,EAAA,GAAK;IACLC,QAAA,GAAW,KAAK;IAChBC,iBAAA,GAAoB,KAAK;IACzBC,IAAA;IACAC,YAAA,GAAe;IACfC,KAAA,GAAQ;IACRR,IAAA,GAAOC,WAAA,aAAAA,WAAA,cAAAA,WAAA,GAAe;EAAQ,CAC/B,GAAGH,KAAA;EACJ,MAAMW,aAAA,GAAgBd,gBAAA,CAAiBW,IAAA;EAEvC,OAAO;IACL;IACAJ,UAAA;IACAE,QAAA;IACAC,iBAAA;IACAE,YAAA;IACAC,KAAA;IACAR,IAAA;IAEA;IACAU,QAAA,EAAUC,OAAA,CAAQ,CAAAF,aAAA,aAAAA,aAAA,uBAAAA,aAAA,CAAeG,QAAQ,KAAI,CAACd,KAAA,CAAMc,QAAQ;IAE5D;IACAC,UAAA,EAAY;MACVC,IAAA,EAAM;MACNR,IAAA,EAAM;IACR;IAEAQ,IAAA,EAAMpB,qBAAA,CACJS,EAAA,EACAV,sBAAA,CAAiDK,KAAA,EAAO;MACtDiB,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZjB,GAAA,EAAKA,GAAA;QACLkB,IAAA,EAAM;MACR;IACF;IAEFX,IAAA,EAAMG;EACR;AACF"}