@atlaskit/button 16.10.2 → 16.11.0

package/dist/esm/new-button/variants/shared/xcss.js

@@ -5,7 +5,7 @@ import { xcss } from '@atlaskit/primitives';
 import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 import colors from './colors';
 var fontSize = getFontSize();
-var heights = {
+export var heights = {
   default: "".concat(32 / fontSize, "em"),
   compact: "".concat(24 / fontSize, "em"),
   none: 'auto'
@@ -34,6 +34,19 @@ var verticalAlign = {
   compact: 'middle',
   none: 'baseline'
 };
+var splitBorderStyles = {
+  ':first-of-type': {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  ':last-of-type': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  },
+  ':focus-visible': {
+    zIndex: 1
+  }
+};
 function getColor(_ref) {
   var group = _ref.group,
     key = _ref.key;
@@ -45,11 +58,13 @@ function getColors(_ref2) {
     interactionState = _ref2$interactionStat === void 0 ? 'default' : _ref2$interactionStat,
     isDisabled = _ref2.isDisabled,
     isSelected = _ref2.isSelected,
+    isHighlighted = _ref2.isHighlighted,
+    isActiveOverSelected = _ref2.isActiveOverSelected,
     hasOverlay = _ref2.hasOverlay;
   var key = interactionState;
   // Overlay does not change color on interaction, revert to 'default' or resting state
   key = hasOverlay ? 'default' : key;
-  key = isSelected ? 'selected' : key;
+  key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
   // Disabled colors overrule everything else
   key = isDisabled ? 'disabled' : key;
   return {
@@ -68,27 +83,51 @@ export function getXCSS(_ref3) {
     spacing = _ref3.spacing,
     isDisabled = _ref3.isDisabled,
     isSelected = _ref3.isSelected,
+    isHighlighted = _ref3.isHighlighted,
+    isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
     shouldFitContainer = _ref3.shouldFitContainer,
     isLink = _ref3.isLink,
+    isSplit = _ref3.isSplit,
+    isNavigationSplit = _ref3.isNavigationSplit,
     hasOverlay = _ref3.hasOverlay,
     hasIconBefore = _ref3.hasIconBefore,
     hasIconAfter = _ref3.hasIconAfter;
   var baseColors = getColors({
     appearance: appearance,
     isSelected: isSelected,
+    isHighlighted: isHighlighted,
+    isActiveOverSelected: isActiveOverSelected,
     isDisabled: isDisabled
   });
   var combinedBaseColorStyles = isLink ? _objectSpread(_objectSpread({}, baseColors), {}, {
     textDecoration: 'none',
     // Disabling visited styles (by re-declaring the base colors)
     ':visited': baseColors
+  }) : isNavigationSplit && !isSelected ? _objectSpread(_objectSpread({}, baseColors), {}, {
+    backgroundColor: 'color.background.neutral.subtle'
   }) : baseColors;
   var height = heights[spacing];
   var width = shouldFitContainer ? '100%' : 'auto';
-  width = isIconButton ? height : width;
-  var paddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
-  var paddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  width = isIconButton ? isNavigationSplit ? '24px' : height : width;
+  var defaultPaddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
+  var defaultPaddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  var splitButtonStyles = isSplit ? splitBorderStyles : {};
+  var getNavigationSplitButtonPaddings = function getNavigationSplitButtonPaddings() {
+    if (isNavigationSplit) {
+      return {
+        paddingInlineStart: 'space.075',
+        paddingInlineEnd: 'space.075'
+      };
+    }
+    return {
+      paddingInlineStart: isIconButton ? 'space.0' : defaultPaddingInlineStart,
+      paddingInlineEnd: isIconButton ? 'space.0' : defaultPaddingInlineEnd
+    };
+  };
+  var _getNavigationSplitBu = getNavigationSplitButtonPaddings(),
+    paddingInlineStart = _getNavigationSplitBu.paddingInlineStart,
+    paddingInlineEnd = _getNavigationSplitBu.paddingInlineEnd;
   return xcss(_objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center',
     borderWidth: 'border.width.0',
@@ -107,8 +146,8 @@ export function getXCSS(_ref3) {
     whiteSpace: 'nowrap',
     height: height,
     paddingBlock: 'space.0',
-    paddingInlineStart: isIconButton ? 'space.0' : paddingInlineStart,
-    paddingInlineEnd: isIconButton ? 'space.0' : paddingInlineEnd,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
     columnGap: gap[spacing],
     verticalAlign: verticalAlign[spacing],
     width: width,
@@ -119,7 +158,8 @@ export function getXCSS(_ref3) {
   } : {}), {}, {
     ':hover': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'hover',
       hasOverlay: hasOverlay
@@ -130,7 +170,8 @@ export function getXCSS(_ref3) {
     }),
     ':active': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'active',
       hasOverlay: hasOverlay
@@ -138,5 +179,5 @@ export function getXCSS(_ref3) {
       // background, box-shadow
       transitionDuration: '0s, 0s'
     })
-  }));
+  }, splitButtonStyles));
 }

package/dist/esm/old-button/shared/button-base.js

@@ -109,7 +109,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.2",
+    packageVersion: "16.11.0",
     analyticsData: analyticsContext
   });
 

package/dist/types/entry-points/new.d.ts

@@ -2,4 +2,5 @@ export { default, type ButtonProps, } from '../new-button/variants/default/butto
 export { default as LinkButton, type LinkButtonProps, } from '../new-button/variants/default/link';
 export { default as IconButton, type IconButtonProps, } from '../new-button/variants/icon/button';
 export { default as LinkIconButton, type LinkIconButtonProps, } from '../new-button/variants/icon/link';
+export { SplitButton } from '../new-button/containers/split-button';
 export type { Appearance, Spacing } from '../new-button/variants/types';

package/dist/types/entry-points/unsafe.d.ts

@@ -1 +1,4 @@
 export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
+export { default as UNSAFE_ICON_BUTTON } from '../new-button/variants/icon/button';
+export { SplitButton as UNSAFE_SPLIT_BUTTON, SplitButtonContainer as UNSAFE_SPLIT_BUTTON_CONTAINER, Divider as UNSAFE_DIVIDER, getActions as UNSAFE_GET_ACTIONS, } from '../new-button/containers/split-button';
+export { SplitButtonContext as UNSAFE_SPLIT_BUTTON_CONTEXT } from '../new-button/containers/split-button/split-button-context';

package/dist/types/new-button/containers/split-button/index.d.ts

@@ -0,0 +1,3 @@
+export { SplitButton, SplitButtonWithSlots, Divider, SplitButtonContainer, } from './split-button';
+export { getActions } from './utils';
+export { SplitButtonContext, useSplitButtonContext, } from './split-button-context';

package/dist/types/new-button/containers/split-button/split-button-context.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { SplitButtonAppearance, SplitButtonSpacing } from './types';
+type NavigationSplitButtonContextProps = {
+    appearance: 'navigation';
+    isHighlighted: boolean;
+};
+type MainSplitButtonContextProps = {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+};
+type SplitButtonContextProps = NavigationSplitButtonContextProps | MainSplitButtonContextProps;
+/**
+ * TODO: Add jsdoc
+ */
+export declare const SplitButtonContext: import("react").Context<SplitButtonContextProps | undefined>;
+type UseSplitButtonContext = {
+    appearance: SplitButtonAppearance | 'subtle';
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    /**
+     * isSelected state has limited relevance (e.g. dropdown-menu trigger button).
+     * There is no isSelected state for color variants (e.g. primary, danger, warning).
+     * Hens we provide ability to override the isSelected state with isActiveOverSelected to display `active` state instead of `selected` state.
+     */
+    isActiveOverSelected: boolean;
+    isNavigationSplitButton: boolean;
+    isHighlighted: boolean;
+};
+type NavigationSplitButtonContext = UseSplitButtonContext & {
+    appearance: 'subtle';
+    spacing: 'default';
+    isDisabled: false;
+    isActiveOverSelected: false;
+    isNavigationSplitButton: true;
+    isHighlighted: boolean;
+};
+type MainSplitButtonContext = UseSplitButtonContext & {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    isActiveOverSelected: true;
+    isNavigationSplitButton: false;
+    isHighlighted: false;
+};
+export declare const useSplitButtonContext: () => NavigationSplitButtonContext | MainSplitButtonContext | undefined;
+export {};

package/dist/types/new-button/containers/split-button/split-button.d.ts

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonSpacing } from './types';
+type DividerProps = {
+    appearance: SplitButtonContextAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add JSDoc
+ */
+export declare const Divider: ({ appearance, spacing, isDisabled, }: DividerProps) => jsx.JSX.Element;
+/**
+ * TODO: Add JSdoc
+ */
+export declare const SplitButtonContainer: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
+type SplitButtonProps = {
+    /**
+     * Only two children are allowed.
+     * First child is the primary action, second child is the secondary action.
+     * The assumption is that for both children trees there is a button reading the context.
+     */
+    children: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add description when adding docs
+ */
+export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
+type SplitButtonWithSlotsProps = {
+    primaryAction: ReactNode;
+    secondaryAction: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+/**
+ * TODO: Decide on API
+ */
+export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => jsx.JSX.Element;
+export {};

package/dist/types/new-button/containers/split-button/types.d.ts

@@ -0,0 +1,4 @@
+import type { Appearance, Spacing } from '../../variants/types';
+export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary' | 'danger' | 'warning'>;
+export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
+export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;

package/dist/types/new-button/containers/split-button/utils.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export declare const getActions: (children: ReactNode) => {
+    PrimaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+    SecondaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+};

package/dist/types/new-button/variants/shared/use-button-base.d.ts

@@ -33,5 +33,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, interactionName, isDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ analyticsContext, appearance: propAppearance, autoFocus, buttonType, interactionName, isDisabled: propIsDisabled, isSelected, isIconButton, hasIconBefore, hasIconAfter, children, onClick: providedOnClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types/new-button/variants/shared/xcss.d.ts

@@ -1,10 +1,15 @@
 import { xcss } from '@atlaskit/primitives';
 import { type Appearance, type Spacing } from '../types';
+export declare const heights: {
+    [key in Spacing]: string;
+};
 export type GetXCSSArgs = {
     appearance: Appearance;
     spacing: Spacing;
     isDisabled: boolean;
     isSelected: boolean;
+    isHighlighted: boolean;
+    isActiveOverSelected: boolean;
     shouldFitContainer: boolean;
     hasOverlay: boolean;
     isIconButton: boolean;
@@ -14,5 +19,13 @@ export type GetXCSSArgs = {
      * If the button is a LinkButton
      */
     isLink: boolean;
+    /**
+     * If the button is a SplitButton
+     */
+    isSplit: boolean;
+    /**
+     * If the button is a PrimarySplitButton used in atlassian-navigation
+     */
+    isNavigationSplit: boolean;
 };
-export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, isLink, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

package/dist/types/old-button/types.d.ts

@@ -78,8 +78,8 @@ export type BaseOwnProps = {
     testId?: string;
     component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
     /**
-     * An optional name used to identify this component to press listeners. E.g. interaction tracing
-     * @see https://hello.atlassian.net/wiki/spaces/UFO/pages/2010358949/UFO+Integration+into+Design+System+components
+     * An optional name used to identify this component to press listeners. For example, interaction tracing. For more information,
+     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration)
      */
     interactionName?: string;
     /**

package/dist/types-ts4.5/containers/button-group.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { Appearance } from '../old-button/types';
+export type ButtonGroupProps = {
+    /**
+     * The appearance to apply to all buttons.
+     */
+    appearance?: Appearance;
+    children?: React.ReactNode;
+};
+export default function ButtonGroup({ appearance, children, }: ButtonGroupProps): jsx.JSX.Element;

package/dist/types-ts4.5/entry-points/button-group.d.ts

@@ -0,0 +1 @@
+export { default } from '../containers/button-group';

package/dist/types-ts4.5/entry-points/custom-theme-button.d.ts

@@ -0,0 +1,2 @@
+export { default, Theme } from '../old-button/custom-theme-button';
+export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from '../old-button/custom-theme-button/custom-theme-button-types';

package/dist/types-ts4.5/entry-points/loading-button.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../old-button/loading-button';
+export type { LoadingButtonProps, LoadingButtonOwnProps, } from '../old-button/loading-button';

package/dist/types-ts4.5/entry-points/new.d.ts

@@ -0,0 +1,6 @@
+export { default, type ButtonProps, } from '../new-button/variants/default/button';
+export { default as LinkButton, type LinkButtonProps, } from '../new-button/variants/default/link';
+export { default as IconButton, type IconButtonProps, } from '../new-button/variants/icon/button';
+export { default as LinkIconButton, type LinkIconButtonProps, } from '../new-button/variants/icon/link';
+export { SplitButton } from '../new-button/containers/split-button';
+export type { Appearance, Spacing } from '../new-button/variants/types';

package/dist/types-ts4.5/entry-points/standard-button.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Must import '@emotion/core' in order to resolve type error
+ * https://product-fabric.atlassian.net/browse/DSP-3222
+ */
+import '@emotion/react';
+export { default } from '../old-button/button';
+export type { ButtonProps } from '../old-button/button';

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -0,0 +1,4 @@
+export type { Appearance, Spacing, BaseOwnProps, BaseProps, } from '../old-button/types';
+export type { ButtonProps } from './standard-button';
+export type { LoadingButtonProps, LoadingButtonOwnProps, } from './loading-button';
+export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from './custom-theme-button';

package/dist/types-ts4.5/entry-points/unsafe.d.ts

@@ -0,0 +1,4 @@
+export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
+export { default as UNSAFE_ICON_BUTTON } from '../new-button/variants/icon/button';
+export { SplitButton as UNSAFE_SPLIT_BUTTON, SplitButtonContainer as UNSAFE_SPLIT_BUTTON_CONTAINER, Divider as UNSAFE_DIVIDER, getActions as UNSAFE_GET_ACTIONS, } from '../new-button/containers/split-button';
+export { SplitButtonContext as UNSAFE_SPLIT_BUTTON_CONTEXT } from '../new-button/containers/split-button/split-button-context';

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,8 @@
+export type { Appearance, Spacing, BaseOwnProps, BaseProps, } from './entry-points/types';
+export { default, } from './entry-points/standard-button';
+export type { ButtonProps } from './entry-points/standard-button';
+export { default as LoadingButton } from './entry-points/loading-button';
+export type { LoadingButtonProps, LoadingButtonOwnProps, } from './entry-points/loading-button';
+export { default as CustomThemeButton, Theme, } from './entry-points/custom-theme-button';
+export type { ThemeTokens, ThemeProps, InteractionState, CustomThemeButtonProps, CustomThemeButtonOwnProps, } from './entry-points/custom-theme-button';
+export { default as ButtonGroup } from './entry-points/button-group';

package/dist/types-ts4.5/new-button/containers/split-button/index.d.ts

@@ -0,0 +1,3 @@
+export { SplitButton, SplitButtonWithSlots, Divider, SplitButtonContainer, } from './split-button';
+export { getActions } from './utils';
+export { SplitButtonContext, useSplitButtonContext, } from './split-button-context';

package/dist/types-ts4.5/new-button/containers/split-button/split-button-context.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { SplitButtonAppearance, SplitButtonSpacing } from './types';
+type NavigationSplitButtonContextProps = {
+    appearance: 'navigation';
+    isHighlighted: boolean;
+};
+type MainSplitButtonContextProps = {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+};
+type SplitButtonContextProps = NavigationSplitButtonContextProps | MainSplitButtonContextProps;
+/**
+ * TODO: Add jsdoc
+ */
+export declare const SplitButtonContext: import("react").Context<SplitButtonContextProps | undefined>;
+type UseSplitButtonContext = {
+    appearance: SplitButtonAppearance | 'subtle';
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    /**
+     * isSelected state has limited relevance (e.g. dropdown-menu trigger button).
+     * There is no isSelected state for color variants (e.g. primary, danger, warning).
+     * Hens we provide ability to override the isSelected state with isActiveOverSelected to display `active` state instead of `selected` state.
+     */
+    isActiveOverSelected: boolean;
+    isNavigationSplitButton: boolean;
+    isHighlighted: boolean;
+};
+type NavigationSplitButtonContext = UseSplitButtonContext & {
+    appearance: 'subtle';
+    spacing: 'default';
+    isDisabled: false;
+    isActiveOverSelected: false;
+    isNavigationSplitButton: true;
+    isHighlighted: boolean;
+};
+type MainSplitButtonContext = UseSplitButtonContext & {
+    appearance: SplitButtonAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled: boolean;
+    isActiveOverSelected: true;
+    isNavigationSplitButton: false;
+    isHighlighted: false;
+};
+export declare const useSplitButtonContext: () => NavigationSplitButtonContext | MainSplitButtonContext | undefined;
+export {};

package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import type { SplitButtonAppearance, SplitButtonContextAppearance, SplitButtonSpacing } from './types';
+type DividerProps = {
+    appearance: SplitButtonContextAppearance;
+    spacing: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add JSDoc
+ */
+export declare const Divider: ({ appearance, spacing, isDisabled, }: DividerProps) => jsx.JSX.Element;
+/**
+ * TODO: Add JSdoc
+ */
+export declare const SplitButtonContainer: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
+type SplitButtonProps = {
+    /**
+     * Only two children are allowed.
+     * First child is the primary action, second child is the secondary action.
+     * The assumption is that for both children trees there is a button reading the context.
+     */
+    children: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+};
+/**
+ * TODO: Add description when adding docs
+ */
+export declare const SplitButton: ({ children, appearance, spacing, isDisabled, }: SplitButtonProps) => jsx.JSX.Element;
+type SplitButtonWithSlotsProps = {
+    primaryAction: ReactNode;
+    secondaryAction: ReactNode;
+    appearance?: SplitButtonAppearance;
+    spacing?: SplitButtonSpacing;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+/**
+ * TODO: Decide on API
+ */
+export declare const SplitButtonWithSlots: ({ primaryAction, secondaryAction, appearance, spacing, isDisabled, }: SplitButtonWithSlotsProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/new-button/containers/split-button/types.d.ts

@@ -0,0 +1,4 @@
+import type { Appearance, Spacing } from '../../variants/types';
+export type SplitButtonAppearance = Extract<Appearance, 'default' | 'primary' | 'danger' | 'warning'>;
+export type SplitButtonContextAppearance = SplitButtonAppearance | 'navigation';
+export type SplitButtonSpacing = Extract<Spacing, 'default' | 'compact'>;

package/dist/types-ts4.5/new-button/containers/split-button/utils.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export declare const getActions: (children: ReactNode) => {
+    PrimaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+    SecondaryAction: import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal;
+};

package/dist/types-ts4.5/new-button/variants/default/button.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import { type CommonDefaultButtonProps } from './types';
+type Element = HTMLButtonElement;
+type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<Element>>;
+export type ButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+/**
+ * __Button__
+ *
+ * @warning __UNSAFE__ Button is not yet safe for production use.
+ *
+ * A button triggers an event or action.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+export default Button;

package/dist/types-ts4.5/new-button/variants/default/link.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import { type CommonDefaultButtonProps } from './types';
+type Element = HTMLAnchorElement;
+type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.AnchorHTMLAttributes<Element>>;
+export type LinkButtonProps = CommonDefaultButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+/**
+ * __Link Button__
+ *
+ * A link button renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+declare const LinkButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonDefaultButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>>;
+export default LinkButton;

package/dist/types-ts4.5/new-button/variants/default/types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type CommonDefaultButtonProps = {
+    /**
+     * Places an icon within the button, after the button's text
+     */
+    iconAfter?: React.ReactChild;
+    /**
+     * Places an icon within the button, before the button's text
+     */
+    iconBefore?: React.ReactChild;
+    /**
+     * Option to fit button width to its parent width
+     */
+    shouldFitContainer?: boolean;
+};

package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts

@@ -0,0 +1,15 @@
+import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
+import { type CommonDefaultButtonProps } from './types';
+type UseDefaultButtonArgs<TagName extends HTMLElement> = UseButtonBaseArgs<TagName> & CommonDefaultButtonProps;
+type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
+/**
+ * __Use default button base__
+ *
+ * A React hook that accepts a set of default Button props,
+ * and processes them to return consistent base props for usage
+ * across Button and LinkButton variants.
+ *
+ * @private
+ */
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore, iconAfter, interactionName, isDisabled, isSelected, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+export default useDefaultButton;

package/dist/types-ts4.5/new-button/variants/icon/button.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import { type CommonIconButtonProps } from './types';
+type Element = HTMLButtonElement;
+type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.ButtonHTMLAttributes<Element>>;
+export type IconButtonProps = CommonIconButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+/**
+ * __Icon Button__
+ *
+ * TODO: Description
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+export default IconButton;

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type AdditionalHTMLElementPropsExtender, type CombinedButtonProps } from '../types';
+import { type CommonIconButtonProps } from './types';
+type Element = HTMLAnchorElement;
+type AdditionalHTMLElementProps = AdditionalHTMLElementPropsExtender<React.AnchorHTMLAttributes<Element>>;
+export type LinkIconButtonProps = CommonIconButtonProps & CombinedButtonProps<Element, AdditionalHTMLElementProps>;
+/**
+ * __Link Button__
+ *
+ * A link button renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/button/examples)
+ * - [Code](https://atlassian.design/components/button/code)
+ * - [Usage](https://atlassian.design/components/button/usage)
+ */
+declare const LinkIconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<CommonIconButtonProps & Omit<AdditionalHTMLElementProps, keyof import("../types").CommonButtonProps<TagName>> & import("../types").CommonButtonProps<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>>;
+export default LinkIconButton;

package/dist/types-ts4.5/new-button/variants/icon/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export type CommonIconButtonProps = {
+    /**
+     * TODO: Consider locking-down icon props by converting from slot props to component props
+     * Places an icon within the button, after the button's text
+     */
+    icon: React.ReactChild;
+};

package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts

@@ -0,0 +1,15 @@
+import { type UseButtonBaseArgs, type UseButtonBaseReturn } from '../shared/use-button-base';
+import { type CommonIconButtonProps } from './types';
+type UseIconButtonArgs<TagName extends HTMLElement> = UseButtonBaseArgs<TagName> & CommonIconButtonProps;
+type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>;
+/**
+ * __Use icon button__
+ *
+ * A React hook that accepts a set of icon Button props,
+ * and processes them to return consistent base props for usage
+ * across IconButton and LinkIconButton variants.
+ *
+ * @private
+ */
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, icon, interactionName, isDisabled, isSelected, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+export default useIconButton;