import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CometSpinner } from './comet-spinner.js';
const meta = {
    title: 'Primitives/CometSpinner',
    component: CometSpinner,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
        size: {
            control: 'select',
            options: ['sm', 'md', 'lg'],
        },
        duration: {
            control: { type: 'range', min: 1, max: 10, step: 0.5 },
        },
    },
};
export default meta;
export const Default = {
    args: {
        size: 'md',
    },
};
export const Small = {
    args: {
        size: 'sm',
    },
};
export const Large = {
    args: {
        size: 'lg',
    },
};
export const AllSizes = {
    render: () => (_jsxs("div", { className: "flex items-center gap-6", children: [_jsx(CometSpinner, { size: "sm" }), _jsx(CometSpinner, { size: "md" }), _jsx(CometSpinner, { size: "lg" })] })),
};
export const CustomColor = {
    render: () => (_jsxs("div", { className: "flex items-center gap-6", children: [_jsx(CometSpinner, { className: "text-primary" }), _jsx(CometSpinner, { className: "text-destructive" }), _jsx(CometSpinner, { className: "text-muted-foreground" })] })),
};
export const SlowRotation = {
    args: {
        size: 'lg',
        duration: 8,
    },
};
export const OnDarkBackground = {
    render: () => (_jsxs("div", { className: "flex items-center gap-6 rounded-lg bg-zinc-900 p-8", children: [_jsx(CometSpinner, { size: "sm", className: "text-indigo-400" }), _jsx(CometSpinner, { size: "md", className: "text-cyan-400" }), _jsx(CometSpinner, { size: "lg", className: "text-violet-400" })] })),
};
