@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-avUr.1

package/dist/types/components/avatar/MrlAvatar/MrlAvatar.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+type AvatarKind = (typeof avatarValues.kind)[number];
+type AvatarSize = (typeof avatarValues.size)[number];
+interface avatarDefaults {
+    kind: AvatarKind;
+    size: AvatarSize;
+    avatarColor: string;
+}
+export interface MrlAvatarPropTypes {
+    alt?: string;
+    dataQa?: string;
+    image?: React.ReactNode | string;
+    kind?: AvatarKind;
+    name?: string;
+    onImageError?: React.ReactEventHandler<HTMLImageElement>;
+    showBorder?: boolean;
+    size?: AvatarSize;
+    avatarColor?: string;
+}
+declare const avatarValues: {
+    kind: readonly ["default", "facilitator", "lock"];
+    size: readonly ["xsmall", "small", "medium", "large"];
+};
+export declare const defaultAvatarValues: avatarDefaults;
+/**
+ * Renders an avatar component
+ * @param {MrlAvatarPropTypes} props the props for your MrlAvatar
+ * @returns {React.ReactElement} an avatar containing the props you pass
+ */
+export declare const MrlAvatar: ({ alt, avatarColor, dataQa, kind, image, name, onImageError, showBorder, size, ...rest }: MrlAvatarPropTypes) => React.ReactElement;
+export {};

package/dist/types/components/avatar/MrlAvatar/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlAvatar';

package/dist/types/components/avatar/MrlAvatarButton/MrlAvatarButton.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { MrlAvatarPropTypes } from '../MrlAvatar/MrlAvatar';
+import { MrlButtonState, TooltipConfig } from '../../button/MrlButton/MrlButton';
+import { ToggleAria } from '../../button/constants';
+export interface MrlAvatarButtonPropTypes extends MrlAvatarPropTypes, React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * An optional class name to add to button wrapping the MrlAvatar.
+     */
+    buttonClassName?: string;
+    /**
+     * An optional boolean prop to include the button in roving tabindex
+     */
+    includeInRoving?: boolean;
+    /**
+     * Selected state variant when the button is a Toggle Button. Setting this prop
+     * informs the component that this is a toggle button and to add that functionality
+     */
+    isToggleButton?: boolean;
+    /**
+     * An optional aria-label to apply to the button element
+     */
+    label?: string;
+    /**
+     * Displays a spinner in the button to indicate some action is in progress.
+     */
+    loading?: boolean;
+    /**
+     * Text for the spinner when the button is in a loading state.
+     */
+    loadingText?: string;
+    /**
+     * onClick event for the button.
+     */
+    onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Changes the state of the button based on user permissions or actions.
+     */
+    state?: MrlButtonState;
+    /**
+     * Determines which aria setup to use for various toggle/selected styles.
+     * pressed - use for an traditional “toggle button”
+     * selected - use for tabs and custom select options
+     * expanded - use for menus, panels, and popovers
+     * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)
+     * 		or [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs
+     */
+    toggleAria?: ToggleAria;
+    /**
+     * Tooltip configuration for the button
+     */
+    tooltip?: TooltipConfig;
+    /**
+     * Reference to the DOM element that is the MrlAvatarButton
+     */
+    triggerRef?: React.RefObject<HTMLButtonElement>;
+}
+/**
+ * Renders an avatar button
+ * @param {MrlAvatarButtonPropTypes} props the props for your MrlAvatarButton
+ * @returns {React.ReactElement} an avatar button containing the props you pass
+ */
+export declare const MrlAvatarButton: ({ buttonClassName, dataQa, id, includeInRoving, isToggleButton, label, loading, loadingText, onClick, size, state, toggleAria, tooltip, triggerRef, ...rest }: MrlAvatarButtonPropTypes) => React.ReactElement;

package/dist/types/components/avatar/MrlAvatarButton/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlAvatarButton';

package/dist/types/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlAvatar';
+export * from './MrlAvatarButton';

package/dist/types/components/badge/MrlBadge/MrlBadge.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { MrlComponentProps } from '../../../utils';
+export type MrlBadgeKinds = 'default' | 'error' | 'info' | 'success' | 'warning';
+export interface MrlBadgeProps extends Omit<MrlComponentProps, 'style' | 'attrs'>, React.ComponentProps<'div'> {
+    className?: string;
+    /**
+     * Pass a custom icon to any badge kind.
+     * Should be passed as an MrlSvg JSX Element.
+     */
+    icon?: JSX.Element;
+    kind?: MrlBadgeKinds;
+    /**
+     * Displays a default icon for non-default badge kinds.
+     * To have an icon in `kind="default"` you must use the `icon` prop.
+     */
+    showIcon?: boolean;
+    text: string;
+}
+/**
+ * Badges are a common user interface element that
+ * can be used to draw attention to content.
+ * @param props - component props
+ * @returns a MrlBadge React component.
+ */
+export declare const MrlBadge: ({ className, icon, kind, showIcon, text, ...remainingProps }: MrlBadgeProps) => JSX.Element;

package/dist/types/components/badge/MrlBadge/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlBadge';

package/dist/types/components/badge/MrlBadgeNotification/MrlBadgeNotification.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { MrlComponentProps } from '../../../utils';
+export type MrlBadgeNotificationKinds = 'general' | 'info';
+export interface MrlBadgeNotificationProps extends Omit<MrlComponentProps, 'style' | 'attrs'>, React.ComponentProps<'div'> {
+    className?: string;
+    kind?: MrlBadgeNotificationKinds;
+    /**
+     * A string of text to tell screen reader users what type of notification this is.
+     * Defaults to 'notification'.
+     */
+    notificationText?: string;
+    /**
+     * Used to turn a notification from a hint to numeric.
+     * NOTE: Must pass a `number`, not a `string`.
+     */
+    number?: number;
+}
+/**
+ * Badge notifications are a common user interface element that can be used to
+ * draw attention to new or unread content, alerts, or updates.
+ * @param props - component props
+ * @returns a MrlBadgeNotification React component.
+ */
+export declare const MrlBadgeNotification: ({ className, kind, notificationText, number, ...remainingProps }: MrlBadgeNotificationProps) => JSX.Element;

package/dist/types/components/badge/MrlBadgeNotification/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlBadgeNotification';

package/dist/types/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlBadge';
+export * from './MrlBadgeNotification';

package/dist/types/components/breadcrumb/MrlBreadcrumbItem/MrlBreadcrumbItem.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+export type BreadcrumbItemLink = {
+    text: string;
+    link: string;
+} | {
+    text: string;
+    link: React.ComponentPropsWithoutRef<typeof Link>;
+};
+export type BreadcrumbItem = {
+    isSelected?: boolean;
+    hasSeparator?: boolean;
+    isTruncated?: boolean;
+} & BreadcrumbItemLink;
+export interface MrlBreadcrumbItemProps extends React.ComponentPropsWithRef<'li'> {
+    /**
+     * Children to be rendered within the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Determines whether a separator should be displayed after this breadcrumb item.
+     */
+    hasSeparator?: BreadcrumbItem['hasSeparator'];
+    /**
+     * Indicates whether this breadcrumb item represents the currently selected or
+     * active page.
+     */
+    isSelected?: BreadcrumbItem['isSelected'];
+    /**
+     * Specifies whether the text content of this breadcrumb item should be truncated
+     * if it exceeds a certain width. This is useful for handling long page titles
+     * or labels within the breadcrumb.
+     */
+    isTruncated?: boolean;
+    link?: BreadcrumbItem['link'];
+    text?: BreadcrumbItem['text'];
+}
+/**
+ * MrlBreadcrumbItem component.
+ * @param props The MrlBreadcrumbItem component properties.
+ * @returns The MrlBreadcrumbItem component.
+ */
+export declare function MrlBreadcrumbItem(props: MrlBreadcrumbItemProps): JSX.Element;

package/dist/types/components/breadcrumb/MrlBreadcrumbItem/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlBreadcrumbItem';

package/dist/types/components/breadcrumb/MrlBreadcrumbSeparator/MrlBreadcrumbSeparator.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * MrlBreadcrumbSeparator component.
+ * @returns The MrlBreadcrumbSeparator component.
+ */
+export declare function MrlBreadcrumbSeparator(): JSX.Element;

package/dist/types/components/breadcrumb/MrlBreadcrumbSeparator/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlBreadcrumbSeparator';

package/dist/types/components/breadcrumb/MrlBreadcrumbs/MrlBreadcrumbs.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { BreadcrumbItem } from '../MrlBreadcrumbItem';
+/**
+ * Props for the MrlBreadcrumbs component.
+ */
+export interface MrlBreadcrumbsProps extends React.ComponentPropsWithRef<'nav'> {
+    /**
+     * A string value used for data-qa attribute.
+     */
+    ['data-qa']?: string;
+    /**
+     * The aria-label of the nav element
+     */
+    ['aria-label']: string;
+    /**
+     * This prop accepts an array of objects, where each object represents a single breadcrumb item.
+     * It's used to define the structure, content, and behavior of the breadcrumbs displayed in the component.
+     * The `link` prop could be either the props of a react-router-dom link or a string. If a string is provided it will
+     * render a regular link.
+     */
+    items: BreadcrumbItem[];
+}
+/**
+ * MrlBreadcrumbs component.
+ * @param props The MrlBreadcrumbs component properties.
+ * @returns The MrlBreadcrumbs component.
+ */
+export declare function MrlBreadcrumbs(props: MrlBreadcrumbsProps): JSX.Element;

package/dist/types/components/breadcrumb/MrlBreadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlBreadcrumbs';

package/dist/types/components/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MrlBreadcrumbItem';
+export * from './MrlBreadcrumbs';
+export * from './MrlBreadcrumbSeparator';

package/dist/types/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { MrlSvgAnimateProps } from '../../svg/MrlSvgAnimate/MrlSvgAnimate';
+import { MrlIconButtonProps } from '../MrlIconButton/MrlIconButton';
+import './MrlAnimatedIconButton.scss';
+interface MrlAnimatedIconButtonProps extends Omit<MrlIconButtonProps, 'icon'> {
+    icon: MrlSvgAnimateProps;
+}
+export declare const MrlAnimatedIconButton: React.ForwardRefExoticComponent<Omit<MrlAnimatedIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/components/button/MrlAnimatedIconButton/index.d.ts

@@ -0,0 +1 @@
+export { MrlAnimatedIconButton } from './MrlAnimatedIconButton';

package/dist/types/components/button/MrlButton/MrlButton.d.ts

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { allowedButtonValues, MrlButtonKind, MrlButtonSize, ToggleAria, IconPosition } from '../constants';
+import { MrlTooltipAnchor, MrlTooltipPosition } from '../../';
+import { AttrsObject, MrlComponentProps } from '../../../utils';
+import './MrlButton.global.scss';
+export type MrlButtonState = (typeof allowedButtonValues.states)[number];
+export type ToggleStyle = (typeof allowedButtonValues.toggleStyles)[number];
+export interface TooltipConfig {
+    /**
+     * The text to display in the tooltip
+     */
+    text: string;
+    /**
+     * The position of the tooltip relative to the button
+     */
+    position?: MrlTooltipPosition;
+    /**
+     * The anchor of the tooltip relative to the button
+     */
+    anchor?: MrlTooltipAnchor;
+    /**
+     * The data-qa attribute for the tooltip
+     */
+    dataQa?: string;
+}
+export interface MrlButtonProps extends Omit<MrlComponentProps, 'style'>, React.ComponentProps<'button'> {
+    /**
+     * Applies additional HTML attributes to the button element.
+     *
+     * @deprecated
+     */
+    attrs?: AttrsObject;
+    /**
+     * Allow developers to add badge to buttons.
+     */
+    badge?: React.ReactElement;
+    /**
+     * @deprecated - Use state="disabled" or "selected-disabled" or "skeleton" instead.
+     * Allow developers to change the disabled state based on user interactions.
+     */
+    disabled?: boolean;
+    /**
+     * Allows developers the ability to disable built in event listeners so they can manage user
+     * interactions from the application.
+     */
+    disableEvents?: boolean;
+    /**
+     * Allow developers to add icon to buttons.
+     */
+    icon?: React.ReactElement;
+    /**
+     * Allows developers to right-align an icon within a button.
+     */
+    iconPos?: IconPosition;
+    /**
+     * Changes the visual emphasis of the button.
+     */
+    kind?: MrlButtonKind;
+    /**
+     * Displays a spinner in the button to indicate some action is in progress.
+     */
+    loading?: boolean;
+    /**
+     * Text for the spinner when the button is in a loading state.
+     */
+    loadingText?: string;
+    /**
+     * onClick event for the button.
+     */
+    onClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Changes the size of the button so it can scale with its surrounding context.
+     */
+    size?: MrlButtonSize;
+    /**
+     * Changes the state of the button based on user permissions or actions.
+     */
+    state?: MrlButtonState;
+    /**
+     * The textual label describing the button's purpose/action.
+     * Icon buttons require a text label to ensure accessibility.
+     */
+    text: string;
+    /**
+     * Determines which aria setup to use for various toggle/selected styles.
+     * pressed - use for an traditional “toggle button”
+     * selected - use for tabs and custom select options
+     * expanded - use for menus, panels, and popovers
+     * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)
+     * 		or [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs
+     */
+    toggleAria?: ToggleAria;
+    /**
+     * Tooltip configuration for the button
+     */
+    tooltip?: TooltipConfig;
+    /**
+     * Selected state variant when the button is a Toggle Button. The visual styles
+     * are also impacted by the "kind" prop. Toggle buttons are only supported
+     * when "kind" is set to either "ghost" or "ghost-inverse". Setting this prop
+     * informs the component that this is a toggle button and to add that functionality
+     */
+    toggleStyle?: ToggleStyle;
+}
+export declare const MrlButton: React.ForwardRefExoticComponent<Omit<MrlButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/button/MrlButton/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlButton';

package/dist/types/components/button/MrlIconButton/MrlIconButton.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { MrlButtonKind, MrlButtonSize, MrlGhostIconButtonSize, ToggleAria } from '../constants';
+import { AttrsObject, MrlComponentProps } from '../../../utils';
+import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipVariant } from '../../tooltip/constants';
+import { MrlButtonState, ToggleStyle } from '../../';
+import './MrlIconButton.scss';
+export interface MrlIconButtonProps extends Omit<MrlComponentProps, 'style'>, React.ComponentProps<'button'> {
+    /**
+     * Applies additional HTML attributes to the button element.
+     * @deprecated
+     */
+    attrs?: AttrsObject;
+    /**
+     * Allow developers to add badge to buttons.
+     */
+    badge?: React.ReactElement;
+    /** Additional class to add to the button */
+    className?: string;
+    /**
+     * Allows developers the ability to disable built in event listeners so they can manage user
+     * interactions from the application.
+     */
+    disableEvents?: boolean;
+    /** Whether to disable the tooltip hover action that keeps it open */
+    disableTooltipHover?: boolean;
+    /**
+     * The icon that will be rendered.
+     */
+    icon: React.ReactElement;
+    /**
+     * Changes the visual emphasis of the button.
+     *
+     * Note: size="xsmall" should ONLY be used with a kind of `ghost` or `ghost-inverse`.
+     */
+    kind?: MrlButtonKind;
+    /**
+     * Displays a spinner in the button to indicate some action is in progress.
+     */
+    loading?: boolean;
+    /**
+     * Text for the spinner when the button is in a loading state.
+     */
+    loadingText?: string;
+    /**
+     * onClick event for the button.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * onKeyDown event for the button.
+     */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * onMouseUp event for the button.
+     */
+    onMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The placement of the tooltip in relation to the button.
+     */
+    position?: MrlTooltipPosition;
+    /**
+     * Changes the size of the button so it can scale with its surrounding context.
+     *
+     * Note: size="xsmall" should ONLY be used with a kind of `ghost` or `ghost-inverse`.
+     */
+    size?: MrlButtonSize | MrlGhostIconButtonSize;
+    /**
+     * Changes the state of the button based on user permissions or actions.
+     *
+     * Note: The Basic Button does not fully support state="disabled", use
+     * the 'disabled' prop instead. Since it does not support state="disabled",
+     * it also doesn't not support state="selected-disabled".
+     */
+    state?: MrlButtonState;
+    /**
+     * The textual label describing the button's purpose/action.
+     * Icon buttons require a text label to ensure accessibility.
+     */
+    text: string;
+    /**
+     * The arrow position of the tooltip in relation to the button.
+     */
+    tipAnchor?: MrlTooltipAnchor;
+    /**
+     * Determines which aria setup to use for various toggle/selected styles.
+     * pressed - use for an traditional “toggle button”
+     * selected - use for tabs and custom select options
+     * expanded - use for menus, panels, and popovers
+     * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)
+     * 		or [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs
+     */
+    toggleAria?: ToggleAria;
+    /**
+     * Selected state variant when the button is a Toggle Button. The visual styles
+     * are also impacted by the "kind" prop. Toggle buttons are only supported
+     * when "kind" is set to either "ghost" or "ghost-inverse". Setting this prop
+     * informs the component that this is a toggle button and to add that functionality
+     */
+    toggleStyle?: ToggleStyle;
+    /** tooltip varient kind */
+    tooltipKind?: MrlTooltipVariant;
+    /**
+     * An optional class name to add to the tooltip wrapper.
+     */
+    wrapperClassName?: string;
+    /**
+     * Controlled state that overrides the internal state management.
+     * When provided, this takes precedence over the `state` prop and allows
+     * the parent component to fully control the icon button's state.
+     */
+    controlledState?: MrlButtonState;
+}
+export declare const MrlIconButton: React.ForwardRefExoticComponent<Omit<MrlIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/button/MrlIconButton/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlIconButton';

package/dist/types/components/button/MrlProcessingButton/MrlProcessingButton.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { MrlButtonProps } from '../MrlButton';
+import { DSIconType } from '../../svg';
+import { DataQa } from '../../../utils/dataQa';
+export declare const DEFAULT_RESET_TIME = 4000;
+export declare const DEFAULT_FEEDBACK_TIME = 500;
+export type PossibleState = 'normal' | 'processing' | 'success' | 'error';
+export type MrlProcessingButtonConfig = {
+    normal: {
+        text: string;
+        icon?: DSIconType;
+    };
+    processing: {
+        action: () => Promise<void>;
+        /**
+         * The minimum time to show the processing state before executing the action.
+         * This provides visual feedback to users that their action was registered.
+         */
+        feedbackTime?: number;
+        text?: string;
+    };
+    success?: {
+        text: string;
+        icon?: DSIconType;
+    };
+    error?: {
+        text: string;
+        icon?: DSIconType;
+    };
+};
+export interface MrlProcessingButtonProps extends Omit<MrlButtonProps, 'ref' | 'text'>, DataQa {
+    /**
+     * The configuration for the processing button.
+     */
+    processingButtonConfig: MrlProcessingButtonConfig;
+    /**
+     * The time to wait before resetting the button to the normal state.
+     */
+    resetTime?: number;
+}
+/**
+ * A specialized button component that provides visual feedback during processing operations.
+ *
+ * The MrlProcessingButton extends the standard MrlButton with additional processing state
+ * management and user feedback capabilities. It automatically handles the transition between
+ * normal, loading, and completion states to provide clear visual feedback to users.
+ *
+ * @param props - The component props extending MrlButtonProps with additional processing capabilities
+ * @returns a MrlProcessingButton React component
+ */
+export declare function MrlProcessingButton(props: MrlProcessingButtonProps): React.JSX.Element;

package/dist/types/components/button/MrlProcessingButton/actions.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copies text to the clipboard using the browser's clipboard API
+ * @param text - The text to copy to clipboard
+ * @param processing_time - The time to wait before copying the text to the clipboard
+ * @returns Promise that resolves when text is copied
+ */
+export declare function copyToClipboard(text: string, processing_time?: number): Promise<void>;
+/**
+ * Actions for the MrlProcessingButton
+ */
+export declare const MRL_PROCESSING_BUTTON_ACTIONS: {
+    copyToClipboard: typeof copyToClipboard;
+};

package/dist/types/components/button/MrlProcessingButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlProcessingButton';
+export * from './actions';

package/dist/types/components/button/constants.d.ts

@@ -0,0 +1,33 @@
+import { MrlButtonState } from './MrlButton';
+export declare const allowedButtonValues: {
+    iconPositions: readonly ["before", "after"];
+    kinds: readonly ["secondary", "primary", "ghost", "inverse", "ghost-inverse", "primary-native", "secondary-native"];
+    sizes: readonly ["xsmall", "small", "medium", "large"];
+    states: readonly ["default", "disabled", "selected", "selected-disabled", "skeleton"];
+    toggleAriaTypes: readonly ["expanded", "pressed", "selected", "checked"];
+    toggleStyles: readonly ["default", "secondary"];
+    types: readonly ["button", "reset", "submit"];
+};
+export type MrlButtonType = (typeof allowedButtonValues.types)[number];
+export type MrlButtonKind = (typeof allowedButtonValues.kinds)[number];
+export type MrlButtonSize = (typeof allowedButtonValues.sizes)[number];
+export type ToggleAria = (typeof allowedButtonValues.toggleAriaTypes)[number];
+export type IconPosition = (typeof allowedButtonValues.iconPositions)[number];
+export type MrlGhostIconButtonSize = (typeof allowedButtonValues.sizes)[number] | 'xsmall';
+export interface ButtonDefaults {
+    attrs: {
+        [key: string]: unknown;
+    };
+    disabled: boolean;
+    iconPos: IconPosition;
+    kind: MrlButtonKind;
+    size: MrlButtonSize;
+    state: MrlButtonState;
+    text: string;
+    toggleAria: ToggleAria;
+}
+/**
+ * Default values for props on the Button component;
+ * Shared between the component and Storybook
+ */
+export declare const buttonDefaults: ButtonDefaults;

package/dist/types/components/button/helpers.d.ts

@@ -0,0 +1,40 @@
+import { MrlButtonState, ToggleStyle } from './MrlButton';
+import { MrlButtonKind, MrlGhostIconButtonSize } from './constants';
+import { SpinnerComponent } from '../loader/constants';
+/**
+ * Determines what loader should be displayed in which types of buttons.
+ *
+ * @private
+ * @param {MrlButtonKind} [buttonKind] - the kind of the current button.
+ * @param {MrlGhostIconButtonSize} [buttonSize] - the size of the current button.
+ * @returns {SpinnerComponent} - an MrlSpinner element themed to the button.
+ */
+export declare const _spinnerProps: (buttonKind: MrlButtonKind, buttonSize: MrlGhostIconButtonSize) => SpinnerComponent;
+/**
+ * Determines if the button is disabled since multiple states represent disabled
+ *
+ * @private
+ * @param {MrlButtonState} [currentState] - the value of this.state from the component.
+ * @param {boolean} [isLoading] - if the button is loading
+ * @param {MrlButtonState} [enforcedState] - optionally pass in a state to check against.
+ * 		This is used for @Watch statements where this.state is not consistent.
+ * @returns {boolean} - if the button is disabled
+ */
+export declare const _isDisabled: (currentState: MrlButtonState, isLoading: boolean, enforcedState?: MrlButtonState) => boolean;
+/**
+ * Determines if the button is selected since multiple states represent selected
+ *
+ * @private
+ * @param {MrlButtonState} [currentState] - the value of this.state from the component.
+ * @param {MrlButtonState} [enforcedState] - optionally pass in a state to check against.
+ * 		This is used for @Watch statements where this.state is not consistent.
+ * @returns {boolean} - if the button is disabled
+ */
+export declare const _isSelected: (currentState: MrlButtonState, enforcedState?: MrlButtonState) => boolean;
+/**
+ * MrlIconButton and MrlAnimatedIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'
+ *
+ * @param {ToggleStyle} toggleStyle type of toggle
+ * @returns {boolean} returns boolean if it's togglable
+ */
+export declare const _isToggleButton: (toggleStyle: ToggleStyle) => boolean;

package/dist/types/components/button/index.d.ts

@@ -0,0 +1,4 @@
+export * from './MrlAnimatedIconButton';
+export * from './MrlButton';
+export * from './MrlIconButton';
+export * from './MrlProcessingButton';