How to use the @uifabric/foundation/lib/next/composed.composed function in @uifabric/foundation

// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { useButtonState as state } from './Button.state';
import { ButtonStyles as styles, ButtonTokens as tokens } from './Button.styles';
import { IButtonProps } from './Button.types';
import { ButtonSlots as slots, ButtonView as view } from './Button.view';

export const Button: React.StatelessComponent = composed({
  displayName: 'Button',
  slots,
  state,
  styles,
  tokens,
  view
});

export default Button;

// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { useMenuButtonState as state } from './MenuButton.state';
import { MenuButtonStyles as styles, MenuButtonTokens as tokens } from './MenuButton.styles';
import { IMenuButtonProps } from './MenuButton.types';
import { MenuButtonSlots as slots, MenuButtonView as view } from './MenuButton.view';

export const MenuButton: React.StatelessComponent = composed({
  displayName: 'MenuButton',
  slots,
  state,
  styles,
  tokens,
  view
});

export default MenuButton;

// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { ActionableStyles as styles, ActionableTokens as tokens } from './Actionable.styles';
import { IActionableProps } from './Actionable.types';
import { useActionableState as state } from './Actionable.state';
import { ActionableSlots as slots, ActionableView as view } from './Actionable.view';

export const Actionable: React.StatelessComponent = composed({
  displayName: 'Actionable',
  slots,
  state,
  styles,
  tokens,
  view
});

export default Actionable;

import * as React from 'react';
// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { useSplitButtonState as state } from './SplitButton.state';
import { SplitButtonStyles as styles, SplitButtonTokens as tokens } from './SplitButton.styles';
import { ISplitButtonProps } from './SplitButton.types';
import { SplitButtonSlots as slots, SplitButtonView as view } from './SplitButton.view';

export const SplitButton: React.StatelessComponent = composed({
  displayName: 'SplitButton',
  slots,
  state,
  styles,
  tokens,
  view
});

export default SplitButton;

const secondaryTextChild = (
    
  );

  const compoundButtonProps = {
    ...rest,
    children: [secondaryTextChild, children]
  };

  return ButtonView(compoundButtonProps, slots);
};

export const CompoundButton: React.StatelessComponent = composed({
  displayName: 'CompoundButton',
  slots: ButtonSlots,
  state,
  styles: CompoundButtonStyles,
  tokens: CompoundButtonTokens,
  view: CompoundButtonView
});

ButtonStyles as styles
} from '../Button.styles';
import { IButtonComponent, IButtonProps, IButtonTokenReturnType } from '../Button.types';
import { ButtonSlots as slots, ButtonView as view } from '../Button.view';

export const PrimaryButtonTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => [
  baseTokens,
  !!props.href && hrefTokens,
  primaryEnabledTokens,
  props.circular && circularTokens,
  props.circular && primaryCircularTokens,
  props.checked && primaryCheckedTokens,
  props.disabled && disabledTokens
];

export const PrimaryButton: React.StatelessComponent = composed({
  displayName: 'PrimaryButton',
  slots,
  state,
  styles,
  tokens: PrimaryButtonTokens,
  view
});

return {
    borderColor: semanticColors.buttonBorderDisabled,
    borderColorHovered: semanticColors.buttonBorderDisabled,
    borderColorPressed: semanticColors.buttonBorderDisabled,
    cursor: 'default'
  };
};

export const MessageBarButtonTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => {
  const regularTokens = (ButtonTokens as ITokenFunction)(props, theme);

  return [regularTokens, baseTokens, props.disabled && disabledTokens];
};

export const MessageBarButton: React.StatelessComponent = composed({
  displayName: 'MessageBarButton',
  slots,
  state,
  styles,
  tokens: MessageBarButtonTokens,
  view
});

hrefTokens,
  ButtonStyles as styles
} from '../Button.styles';
import { IButtonComponent, IButtonProps, IButtonTokenReturnType } from '../Button.types';
import { ButtonSlots as slots, ButtonView as view } from '../Button.view';

export const DefaultButtonTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => [
  baseTokens,
  !!props.href && hrefTokens,
  !props.disabled && enabledTokens,
  props.circular && circularTokens,
  props.checked && checkedTokens,
  props.disabled && disabledTokens
];

export const DefaultButton: React.StatelessComponent = composed({
  displayName: 'DefaultButton',
  slots,
  state,
  styles,
  tokens: DefaultButtonTokens,
  view
});

highContrastBackgroundColorPressed: 'Window',
    highContrastIconColor: 'GrayText',
    highContrastIconColorHovered: 'GrayText',
    highContrastIconColorPressed: 'GrayText',
    iconColor: semanticColors.disabledText,
    iconColorHovered: semanticColors.disabledText,
    iconColorPressed: semanticColors.disabledText
  };
};

const IconButtonTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => [
  baseTokens,
  props.disabled && disabledTokens
];

export const IconButton: React.StatelessComponent = composed({
  displayName: 'IconButton',
  slots,
  state,
  styles,
  tokens: IconButtonTokens,
  view
});

highContrastColorPressed: 'GrayText',
    highContrastIconColor: 'GrayText',
    highContrastIconColorHovered: 'GrayText',
    highContrastIconColorPressed: 'GrayText',
    iconColor: semanticColors.disabledBodySubtext,
    iconColorHovered: semanticColors.disabledBodySubtext,
    iconColorPressed: semanticColors.disabledBodySubtext
  };
};

const CommandBarButtonTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => [
  baseTokens,
  props.disabled && disabledTokens
];

export const CommandBarButton: React.StatelessComponent = composed({
  displayName: 'CommandBarButton',
  slots,
  state,
  styles,
  tokens: CommandBarButtonTokens,
  view
});