import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { LoadingSkeleton } from './loading-skeleton.js';
const meta = {
    title: 'Composed/LoadingSkeleton',
    component: LoadingSkeleton,
    parameters: {
        layout: 'padded',
    },
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: 'select',
            options: ['line', 'circle', 'card'],
        },
        width: {
            control: 'text',
        },
        height: {
            control: 'text',
        },
    },
};
export default meta;
export const Line = {
    args: {
        variant: 'line',
    },
};
export const Circle = {
    args: {
        variant: 'circle',
    },
};
export const Card = {
    args: {
        variant: 'card',
    },
};
export const CustomDimensions = {
    args: {
        variant: 'line',
        width: '250px',
        height: '20px',
    },
};
export const Group = {
    render: () => (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(LoadingSkeleton, { variant: "circle" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(LoadingSkeleton, { variant: "line", width: "60%" }), _jsx(LoadingSkeleton, { variant: "line", width: "40%" })] })] }), _jsx(LoadingSkeleton, { variant: "card" }), _jsxs("div", { className: "space-y-2", children: [_jsx(LoadingSkeleton, { variant: "line" }), _jsx(LoadingSkeleton, { variant: "line", width: "80%" }), _jsx(LoadingSkeleton, { variant: "line", width: "90%" })] })] })),
};
