import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { fn } from '@storybook/test';
import { Icon as IconComponent } from '../icon/index.js';
import { Button } from './button.js';
/**
 * A flexible button component built with Radix UI Slot and class-variance-authority for consistent styling.
 * Perfect for forms, dialogs, navigation, and interactive elements throughout your application.
 *
 * ## Accessibility
 *
 * - Automatically includes proper focus management and keyboard navigation
 * - Use `aria-label` for icon-only buttons to provide screen reader context
 * - `disabled` state prevents interaction and is announced to assistive technology
 * - Focus-visible styles ensure keyboard navigation is clear
 *
 * ## Customization
 *
 * The component uses Tailwind CSS classes and can be customized via:
 * - `className` prop for additional styling
 * - CSS custom properties for theme-level changes
 * - Variant and size props for pre-defined styles
 */
const meta = {
    title: 'Data Display/Button',
    component: Button,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: 'select',
            options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
            description: 'The visual variant of the button',
            table: {
                type: { summary: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"' },
                defaultValue: { summary: '"default"' },
            },
        },
        size: {
            control: 'select',
            options: ['default', 'sm', 'lg', 'icon'],
            description: 'The size of the button',
            table: {
                type: { summary: '"default" | "sm" | "lg" | "icon"' },
                defaultValue: { summary: '"default"' },
            },
        },
        asChild: {
            control: 'boolean',
            description: 'Change the default rendered element for the one passed as a child, merging their props and behavior',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
        },
        disabled: {
            control: 'boolean',
            description: 'Whether the button is disabled',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
            },
        },
        children: {
            control: 'text',
            description: 'The content of the button',
            table: {
                type: { summary: 'ReactNode' },
            },
        },
        onClick: {
            action: 'clicked',
            description: 'Function called when the button is clicked',
        },
    },
    args: {
        onClick: fn(),
    },
};
export default meta;
export const Default = {
    args: {
        children: 'Button',
    },
};
export const Disabled = {
    args: {
        children: 'Disabled',
        disabled: true,
    },
};
export const WithIcon = {
    args: {
        children: (_jsxs(_Fragment, { children: [_jsx(IconComponent, { name: "DownloadFile" }), "Download"] })),
    },
};
export const IconTrailing = {
    args: {
        children: (_jsxs(_Fragment, { children: ["Continue", _jsx(IconComponent, { name: "Briefcase" })] })),
    },
};
export const Loading = {
    args: {
        disabled: true,
        children: (_jsxs(_Fragment, { children: [_jsx(IconComponent, { name: "Reload", className: "animate-spin" }), "Loading..."] })),
    },
};
export const AsChild = {
    args: {
        asChild: true,
        children: (_jsx("a", { href: "#", target: "_blank", rel: "noopener noreferrer", children: "External Link" })),
    },
};
export const AllVariants = {
    render: () => (_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { children: "Default" }), _jsx(Button, { variant: "destructive", children: "Destructive" }), _jsx(Button, { variant: "outline", children: "Outline" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "ghost", children: "Ghost" }), _jsx(Button, { variant: "link", children: "Link" })] })),
};
export const AllSizes = {
    render: () => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { children: "Default" }), _jsx(Button, { size: "lg", children: "Large" }), _jsx(Button, { size: "icon", children: _jsx(IconComponent, { name: "Settings" }) })] })),
};
//# sourceMappingURL=button.stories.js.map