@a-type/ui 5.0.21 → 6.0.0

package/dist/components/box/Box.module.css

@@ -0,0 +1,236 @@
+@layer box {
+	.root {
+		display: flex;
+		position: relative;
+
+		&[data-direction='row'] {
+			flex-direction: row;
+		}
+		&[data-direction='col'] {
+			flex-direction: column;
+		}
+		&[data-direction='row-reverse'] {
+			flex-direction: row-reverse;
+		}
+		&[data-direction='col-reverse'] {
+			flex-direction: column-reverse;
+		}
+
+		&[data-wrap='wrap'],
+		&[data-wrap='true'] {
+			flex-wrap: wrap;
+		}
+		&[data-wrap='nowrap'] {
+			flex-wrap: nowrap;
+		}
+
+		&[data-gap='none'] {
+			gap: 0;
+		}
+		&[data-gap='xs'] {
+			gap: var(--m-spacing-xs);
+		}
+		&[data-gap='sm'] {
+			gap: var(--m-spacing-sm);
+		}
+		&[data-gap='md'],
+		&[data-gap='true'] {
+			gap: var(--m-spacing-md);
+		}
+		&[data-gap='lg'] {
+			gap: var(--m-spacing-lg);
+		}
+		&[data-gap='xl'] {
+			gap: var(--m-spacing-xl);
+		}
+
+		&[data-items='start'] {
+			align-items: flex-start;
+		}
+		&[data-items='center'] {
+			align-items: center;
+		}
+		&[data-items='end'] {
+			align-items: flex-end;
+		}
+		&[data-items='stretch'] {
+			align-items: stretch;
+		}
+		&[data-justify='start'] {
+			justify-content: flex-start;
+		}
+		&[data-justify='center'] {
+			justify-content: center;
+		}
+		&[data-justify='end'] {
+			justify-content: flex-end;
+		}
+		&[data-justify='between'] {
+			justify-content: space-between;
+		}
+		&[data-justify='around'] {
+			justify-content: space-around;
+		}
+		&[data-justify='evenly'] {
+			justify-content: space-evenly;
+		}
+
+		&[data-p='none'] {
+			padding: 0;
+		}
+		&[data-p='xs'] {
+			padding: var(--m-spacing-xs);
+		}
+		&[data-p='sm'] {
+			padding: var(--m-spacing-sm);
+		}
+		&[data-p='md'] {
+			padding: var(--m-spacing-md);
+		}
+		&[data-p='lg'],
+		&[data-p='true'] {
+			padding: var(--m-spacing-lg);
+		}
+		&[data-p='xl'] {
+			padding: var(--m-spacing-xl);
+		}
+
+		&[data-rounded='none'] {
+			border-radius: 0;
+		}
+		&[data-rounded='xs'] {
+			border-radius: var(--m-radius-xs);
+		}
+		&[data-rounded='sm'] {
+			border-radius: var(--m-radius-sm);
+		}
+		&[data-rounded='md'],
+		&[data-rounded='true'] {
+			border-radius: var(--m-radius-md);
+		}
+		&[data-rounded='lg'] {
+			border-radius: var(--m-radius-lg);
+		}
+
+		&[data-w='auto'] {
+			width: auto;
+		}
+		&[data-w='full'] {
+			width: 100%;
+		}
+		&[data-h='auto'] {
+			height: auto;
+		}
+		&[data-h='full'] {
+			height: 100%;
+		}
+
+		&[data-overflow='visible'] {
+			overflow: visible;
+		}
+		&[data-overflow='hidden'] {
+			overflow: hidden;
+		}
+		&[data-overflow='scroll'] {
+			overflow: scroll;
+		}
+		&[data-overflow='auto'] {
+			overflow: auto;
+		}
+		&[data-overflow='clip'] {
+			overflow: clip;
+		}
+		&[data-overflow='auto-y'] {
+			overflow-y: auto;
+			overflow-x: clip;
+		}
+		&[data-overflow='auto-x'] {
+			overflow-x: auto;
+			overflow-y: clip;
+		}
+
+		&[data-border='true'] {
+			@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+		}
+
+		&[data-surface='ambient'],
+		&[data-surface='true'] {
+			@apply --mx-bg(var(--m-surface-ambient-bg));
+			@apply --mx-fg(var(--m-surface-ambient-fg));
+			&[data-border='true'] {
+				@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+			}
+		}
+		&[data-surface='secondary'] {
+			@apply --mx-bg(var(--m-surface-secondary-bg));
+			@apply --mx-fg(var(--m-surface-secondary-fg));
+			&[data-border='true'] {
+				@apply --mx-borderColor(var(--m-surface-secondary-borderColor));
+			}
+		}
+		&[data-surface='primary'] {
+			@apply --mx-bg(var(--m-surface-primary-bg));
+			@apply --mx-fg(var(--m-surface-primary-fg));
+			&[data-border='true'] {
+				@apply --mx-borderColor(var(--m-surface-primary-borderColor));
+			}
+		}
+
+		&[data-glass='true'] {
+			@apply --mx-bg-faded(80%);
+			@apply --mx-borderColor-faded(80%);
+		}
+
+		&[data-grow='true'] {
+			flex-grow: 1;
+		}
+		&[data-shrink='true'] {
+			flex-shrink: 1;
+		}
+
+		@apply --mx-shadow;
+		--mx-shadow-value: var(--shadow-inset) var(--shadow-x, 0)
+			calc(var(--shadow-y, 0) * var(--shadow-invert, 1)) var(--shadow-blur, 0)
+			var(--shadow-spread, 0) var(--shadow-color, transparent);
+		--shadow-inset: ;
+		&[data-elevated='sm'] {
+			--shadow-x: var(--m-shadow-sm-x);
+			--shadow-y: var(--m-shadow-sm-y);
+			--shadow-blur: var(--m-shadow-sm-blur);
+			--shadow-spread: var(--m-shadow-sm-spread);
+			--shadow-color: var(--m-shadow-sm-color);
+		}
+		&[data-elevated='md'],
+		&[data-elevated='true'] {
+			--shadow-x: var(--m-shadow-md-x);
+			--shadow-y: var(--m-shadow-md-y);
+			--shadow-blur: var(--m-shadow-md-blur);
+			--shadow-spread: var(--m-shadow-md-spread);
+			--shadow-color: var(--m-shadow-md-color);
+		}
+		&[data-elevated='lg'] {
+			--shadow-x: var(--m-shadow-lg-x);
+			--shadow-y: var(--m-shadow-lg-y);
+			--shadow-blur: var(--m-shadow-lg-blur);
+			--shadow-spread: var(--m-shadow-lg-spread);
+			--shadow-color: var(--m-shadow-lg-color);
+		}
+		&[data-elevated='xl'] {
+			--shadow-x: var(--m-shadow-xl-x);
+			--shadow-y: var(--m-shadow-xl-y);
+			--shadow-blur: var(--m-shadow-xl-blur);
+			--shadow-spread: var(--m-shadow-xl-spread);
+			--shadow-color: var(--m-shadow-xl-color);
+		}
+		&[data-shadow-up='true'] {
+			--shadow-invert: -1;
+		}
+		&[data-shadow-inset='true'] {
+			--shadow-inset: inset;
+		}
+
+		&[data-container='true'] {
+			container-type: inline-size;
+		}
+	}
+}

package/dist/components/box/Box.stories.d.ts

@@ -0,0 +1,46 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Box } from './Box.js';
+declare const meta: {
+    title: string;
+    component: typeof Box;
+    argTypes: {
+        border: {
+            type: "boolean";
+            defaultValue: boolean;
+        };
+        surface: {
+            type: "boolean";
+            defaultValue: boolean;
+        };
+        elevated: {
+            type: "string";
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        layout: {
+            type: "string";
+        };
+        wrap: {
+            type: "boolean";
+        };
+        container: {
+            type: "boolean";
+        };
+        children: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Box>;
+export declare const Default: Story;
+export declare const Surfaces: Story;

package/dist/components/box/Box.stories.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button/Button.js';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { Progress } from '../progress/Progress.js';
+import { Slider } from '../slider/Slider.js';
+import { Switch } from '../switch/Switch.js';
+import { ToggleGroup } from '../toggleGroup/toggleGroup.js';
+import { Box } from './Box.js';
+const meta = {
+    title: 'Components/Box',
+    component: Box,
+    argTypes: {
+        border: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        surface: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        elevated: {
+            type: 'string',
+            options: [
+                'sm',
+                'md',
+                'lg',
+                'xl',
+                '-sm',
+                '-md',
+                '-lg',
+                '-xl',
+                'sm-up',
+                'md-up',
+                'lg-up',
+                'xl-up',
+                '-sm-up',
+                '-md-up',
+                '-lg-up',
+                '-xl-up',
+            ],
+            control: {
+                type: 'select',
+            },
+        },
+        layout: {
+            type: 'string',
+        },
+        wrap: {
+            type: 'boolean',
+        },
+        container: {
+            type: 'boolean',
+        },
+        children: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Button, { emphasis: "primary", children: "Primary" }), _jsx(Button, { emphasis: "ghost", children: "Ghost" }), _jsx(Button, { children: "Default" })] })),
+        p: 'md',
+        gap: 'md',
+        border: true,
+    },
+};
+function SurfaceContent({ name }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [name, " Surface"] }), _jsxs(Box, { gap: true, layout: "center start", children: [_jsx(Button, { emphasis: "primary", children: "Primary" }), _jsx(Button, { emphasis: "ghost", children: "Ghost" }), _jsx(Checkbox, { checked: true }), _jsx(Switch, { checked: true })] }), _jsx(Progress, { value: 50, style: { width: '100%' } }), _jsxs(ToggleGroup, { defaultValue: ['one'], children: [_jsx(ToggleGroup.Item, { value: "one", children: "One" }), _jsx(ToggleGroup.Item, { value: "two", children: "Two" })] }), _jsx(Slider, { defaultValue: [30], style: { width: '100%' } })] }));
+}
+export const Surfaces = {
+    render(args) {
+        return (_jsxs("div", Object.assign({ className: "bg-main-wash", style: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(2, 1fr)',
+                gap: 'var(--m-spacing-lg)',
+            } }, args, { children: [_jsx(Box, Object.assign({}, args, { surface: "ambient", p: "lg", col: true, gap: true, children: _jsx(SurfaceContent, { name: "Ambient" }) })), _jsx(Box, Object.assign({}, args, { surface: "primary", className: "@mode-primary", p: "lg", col: true, gap: true, children: _jsx(SurfaceContent, { name: "Primary" }) })), _jsx(Box, Object.assign({}, args, { surface: "secondary", className: "@mode-primary", p: "lg", col: true, gap: true, children: _jsx(SurfaceContent, { name: "Secondary" }) })), _jsx(Box, Object.assign({}, args, { surface: true, className: "@mode-accent", p: "lg", col: true, gap: true, children: _jsx(SurfaceContent, { name: "Accent" }) })), _jsx(Box, Object.assign({}, args, { surface: true, className: "@mode-neutral", p: "lg", col: true, gap: true, children: _jsx(SurfaceContent, { name: "Neutral" }) })), _jsx(Box, Object.assign({}, args, { surface: true, className: "@mode-attention", p: "lg", col: true, gap: true, children: _jsx(SurfaceContent, { name: "Attention" }) })), _jsx(Box, Object.assign({}, args, { surface: true, className: "@mode-success", p: "lg", col: true, gap: true, children: _jsx(SurfaceContent, { name: "Success" }) }))] })));
+    },
+};
+//# sourceMappingURL=Box.stories.js.map

package/dist/components/box/Box.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../../src/components/box/Box.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/button/Button.d.ts

@@ -0,0 +1,30 @@
+import { ButtonProps as BaseButtonProps } from '@base-ui/react/button';
+import { ButtonHTMLAttributes, Ref } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Pick<BaseButtonProps, 'render' | 'focusableWhenDisabled'> {
+    emphasis?: 'primary' | 'default' | 'ghost' | 'light' | 'unstyled';
+    size?: 'default' | 'small' | 'wrapper';
+    toggled?: boolean;
+    toggleMode?: 'color-and-indicator' | 'color' | 'indicator' | 'state-only';
+    visuallyDisabled?: boolean;
+    loading?: boolean;
+    visuallyFocused?: boolean;
+    disableIconMode?: boolean;
+    forceIconMode?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    disableDropdownTriggerIcon?: boolean;
+    disableDefaultLoadingIndicator?: boolean;
+}
+export declare function ButtonRoot({ className, emphasis, size, toggled, toggleMode, visuallyDisabled, visuallyFocused, loading, children, disabled, disableIconMode, forceIconMode, disableDropdownTriggerIcon, disableDefaultLoadingIndicator, ref, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ButtonRoot {
+    var displayName: string;
+}
+export declare const ButtonToggleIndicator: import("react").NamedExoticComponent<{
+    value: boolean;
+}>;
+export declare const ButtonIcon: import("react").FunctionComponent<Omit<import("../../behaviors/iconOnly.js").IconWrapperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Button: typeof ButtonRoot & {
+    ToggleIndicator: import("react").NamedExoticComponent<{
+        value: boolean;
+    }>;
+    Icon: import("react").FunctionComponent<Omit<import("../../behaviors/iconOnly.js").IconWrapperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/button/Button.js

@@ -0,0 +1,57 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as BaseButton, } from '@base-ui/react/button';
+import { clsx } from 'clsx';
+import { AnimatePresence, motion } from 'motion/react';
+import { memo } from 'react';
+import { IconWrapper, useIconOnlyDataAttributes, } from '../../behaviors/iconOnly.js';
+import { withClassName } from '../../hooks.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { DropdownMenuTriggerIcon } from '../dropdownMenu/DropdownMenu.js';
+import { useIsDropdownTrigger } from '../dropdownMenu/DropdownTriggerContext.js';
+import { IconLoadingProvider } from '../icon/IconLoadingContext.js';
+import { Icon } from '../icon/index.js';
+import { Spinner } from '../spinner/index.js';
+import cls from './Button.module.css';
+export function ButtonRoot(_a) {
+    var { className, emphasis = 'default', size, toggled, toggleMode = 'color-and-indicator', visuallyDisabled, visuallyFocused, loading, children, disabled, disableIconMode, forceIconMode, disableDropdownTriggerIcon, disableDefaultLoadingIndicator, ref } = _a, props = __rest(_a, ["className", "emphasis", "size", "toggled", "toggleMode", "visuallyDisabled", "visuallyFocused", "loading", "children", "disabled", "disableIconMode", "forceIconMode", "disableDropdownTriggerIcon", "disableDefaultLoadingIndicator", "ref"]);
+    const isFormSubmitting = false;
+    const isSubmitLoading = 'type' in props && props.type === 'submit' && isFormSubmitting;
+    const isLoading = loading || isSubmitLoading;
+    const iconOnlyTools = useIconOnlyDataAttributes(children);
+    const isDropdownTriggerFromContext = useIsDropdownTrigger();
+    const isDropdownTrigger = !disableDropdownTriggerIcon &&
+        !iconOnlyTools.info.hasIconOnly &&
+        isDropdownTriggerFromContext;
+    const finalRef = useMergedRef(ref, iconOnlyTools.ref);
+    const buttonProps = Object.assign(Object.assign(Object.assign({ ref: finalRef }, iconOnlyTools.props), props), { disabled: disabled || isLoading, 'data-input-border-flush': true, 'data-disabled': visuallyDisabled, 'data-focus-visible': visuallyFocused ? true : undefined, 'data-size': size, 'data-loading': isLoading, 'data-dropdown-trigger': isDropdownTrigger ? true : undefined, tabIndex: visuallyDisabled ? -1 : undefined, 'data-toggleable': toggled !== undefined, 'data-disable-icon-mode': disableIconMode, 'data-force-icon-mode': forceIconMode, 'data-emphasis': emphasis, className: clsx(emphasis === 'unstyled' ? cls.unstyled : cls.root, size === 'small' ? '@mode-dense' : '', className) });
+    // set state when toggleable
+    if (toggled !== undefined) {
+        buttonProps['aria-pressed'] = !!toggled;
+    }
+    return (_jsx(IconLoadingProvider, { value: isLoading, children: _jsxs(BaseButton, Object.assign({}, buttonProps, { children: [_jsx(AnimatePresence, { children: isLoading && !disableDefaultLoadingIndicator && (_jsx(motion.div, { initial: { width: 0, marginLeft: '-0.5rem' }, animate: { width: 'auto', marginLeft: 0 }, exit: { width: 0, marginLeft: '-0.5rem' }, className: clsx('my-auto inline-block flex flex-shrink-0 overflow-hidden', '[[data-has-icon=true]_&]:hidden'), "data-default-loader": true, children: _jsx(Spinner, { size: 15, className: "inline-block h-1em w-1em" }) }, "spinner")) }), toggled !== undefined &&
+                    (toggleMode === 'indicator' ||
+                        toggleMode === 'color-and-indicator') && (_jsx(ButtonToggleIndicator, { value: toggled })), children, isDropdownTrigger && (_jsx(IconLoadingProvider, { value: false, children: _jsx(DropdownMenuTriggerIcon, { render: _jsx(Icon, { name: "chevron" }) }) }))] })) }));
+}
+ButtonRoot.displayName = 'Button';
+export const ButtonToggleIndicator = memo(function ToggleIndicator({ value, }) {
+    return (_jsx(Icon, { "aria-hidden": true, name: "check", className: cls.toggleIndicator, "data-open": !!value, loading: false }));
+});
+// allows custom icons to trigger icon button behavior
+export const ButtonIcon = withClassName(IconWrapper, 'icon', cls.icon);
+ButtonIcon.displayName = 'ButtonIcon';
+export const Button = Object.assign(ButtonRoot, {
+    ToggleIndicator: ButtonToggleIndicator,
+    Icon: ButtonIcon,
+});
+//# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/components/button/Button.module.css

@@ -0,0 +1,126 @@
+.root {
+	user-select: none;
+	appearance: none;
+	cursor: pointer;
+	transition: all var(--m-duration) var(--m-easing);
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-sm);
+	align-self: center;
+
+	position: relative;
+	overflow: visible;
+	white-space: nowrap;
+
+	@apply --mx-action-secondary;
+
+	font-size: var(--m-text-secondary-size);
+	line-height: 1;
+	font-family: inherit;
+	font-weight: 500;
+
+	@apply --mx-shadow(var(--m-shadow-sm));
+	@apply --mx-ring;
+
+	&[data-emphasis='primary'] {
+		@apply --mx-action-primary;
+	}
+	&[data-emphasis='light'] {
+		@apply --mx-action-light;
+	}
+	&[data-emphasis='default'] {
+		@apply --mx-action-secondary;
+	}
+	&[data-emphasis='ghost'] {
+		@apply --mx-action-ambient;
+		--mx-ring-value: 0 0 0 0 transparent;
+		--mx-shadow-value: 0 0 0 0 transparent;
+
+		font-weight: 600;
+
+		&:hover,
+		&:focus {
+			--mx-bg-applied: inherit;
+			--mx-bg-ref: --fn-color-heavier(
+				color-mix(var(--mx-bg-applied), var(--m-color-main-light) 10%),
+				1
+			);
+		}
+	}
+	&[data-emphasis='ghost'],
+	&[data-emphasis='default'] {
+		&[aria-pressed='true'] {
+			@apply --mx-bg(var(--m-color-main-light));
+		}
+	}
+
+	&[data-has-icon='true'][data-has-label='false']:not(
+			[data-disable-icon-mode='true']
+		):not([data-size='wrapper']),
+	&[data-force-icon-mode='true']:not([data-size='wrapper']) {
+		padding: var(--m-spacing-md);
+
+		&[data-size='small'] {
+			padding: var(--m-spacing-sm);
+		}
+
+		&:not([aria-pressed='true']) {
+			aspect-ratio: 1/1;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	&[data-size='small'] {
+		min-height: --fn-literal(28px);
+	}
+	&[data-size='wrapper'] {
+		padding: 0;
+		width: fit-content;
+	}
+
+	@apply --mx-hover;
+	@apply --mx-active;
+	@apply --mx-focus;
+	@apply --mx-disabled;
+
+	/* Always turn off background for toggleable buttons that aren't pressed */
+	&[data-toggleable='true'][aria-pressed='false']:not(:hover) {
+		@apply --mx-bg(transparent);
+		--mx-bg-contrast: var(--m-global-trueLightColor);
+	}
+}
+
+.unstyled {
+	@apply --mx-bg(transparent);
+	margin: 0;
+	padding: 0;
+	appearance: none;
+	border: none;
+	cursor: pointer;
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		box-shadow: 0 0 0 4px var(--m-color-main-ink);
+	}
+}
+
+.icon {
+	display: flex;
+	flex-shrink: 0;
+}
+
+.toggleIndicator {
+	width: 0;
+	transition: width var(--m-duration) var(--m-easing);
+
+	&[data-open='true'] {
+		width: --fn-literal(15px);
+	}
+	&[data-open='false'] {
+		margin-left: calc(-1 * var(--m-spacing-sm));
+	}
+}

package/dist/components/button/Button.stories.d.ts

@@ -0,0 +1,37 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Button } from './Button.js';
+declare const meta: {
+    title: string;
+    component: typeof import("./Button.js").ButtonRoot & {
+        ToggleIndicator: import("react").NamedExoticComponent<{
+            value: boolean;
+        }>;
+        Icon: import("react").FunctionComponent<Omit<import("../../behaviors/iconOnly.js").IconWrapperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+    args: {
+        children: string;
+        loading: false;
+        emphasis: "default";
+        size: "default";
+        visuallyDisabled: false;
+        disabled: false;
+        visuallyFocused: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const AllButtons: Story;
+export declare const WithIcon: Story;
+export declare const IconOnly: Story;
+export declare const IconTransition: Story;
+export declare const Toggled: Story;
+export declare const ToggledIcon: Story;
+export declare const Alignment: Story;
+export declare const ConfirmedButtonDemo: Story;
+export declare const FragmentTest: Story;