import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronRight, User } from "lucide-react";
import { ListItem } from "../../ListItem";
import { ListBlock } from "../ListBlock";
const meta = {
    title: "Components/ListBlock",
    component: ListBlock,
    subcomponents: {
        ListItem: ListItem,
    },
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { ListBlock, ListItem } from '@openuidev/react-ui';\n```",
            },
        },
    },
    decorators: [
        (Story) => (_jsx("div", { style: { width: "400px" }, children: _jsx(Story, {}) })),
    ],
    argTypes: {
        variant: {
            control: "select",
            options: ["number", "icon", "image"],
            description: "Controls the indicator type for every ListItem in the list.",
            table: { category: "Appearance", defaultValue: { summary: "number" } },
        },
        children: { control: false, table: { category: "Content" } },
        className: { control: false, table: { category: "Appearance" } },
        style: { control: false, table: { category: "Appearance" } },
    },
    tags: ["!dev", "autodocs"],
};
export default meta;
export const NumberWithSubtitle = {
    render: () => (_jsxs(ListBlock, { variant: "number", children: [_jsx(ListItem, { title: "Set up your workspace", subtitle: "Install dependencies and configure your environment" }), _jsx(ListItem, { title: "Create your first component", subtitle: "Build a reusable UI element" }), _jsx(ListItem, { title: "Publish to production", subtitle: "Deploy and share your work" })] })),
};
export const NumberNoSubtitle = {
    render: () => (_jsxs(ListBlock, { variant: "number", children: [_jsx(ListItem, { title: "Set up your workspace" }), _jsx(ListItem, { title: "Create your first component" }), _jsx(ListItem, { title: "Publish to production" })] })),
};
export const NumberClickable = {
    render: () => (_jsxs(ListBlock, { variant: "number", children: [_jsx(ListItem, { title: "Set up your workspace", subtitle: "Install dependencies and configure your environment", actionLabel: "Start", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Step 1") }), _jsx(ListItem, { title: "Create your first component", subtitle: "Build a reusable UI element", actionLabel: "Start", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Step 2") }), _jsx(ListItem, { title: "Publish to production", subtitle: "Deploy and share your work", actionLabel: "Start", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Step 3") })] })),
};
export const IconWithSubtitle = {
    render: () => (_jsxs(ListBlock, { variant: "icon", children: [_jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "John Doe", subtitle: "Software Engineer" }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Jane Smith", subtitle: "Product Designer" }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Ankit Das", subtitle: "Software Developer" })] })),
};
export const IconNoSubtitle = {
    render: () => (_jsxs(ListBlock, { variant: "icon", children: [_jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "John Doe" }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Jane Smith" }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Ankit Das" })] })),
};
export const IconClickable = {
    render: () => (_jsxs(ListBlock, { variant: "icon", children: [_jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "John Doe", subtitle: "Software Engineer", actionLabel: "View Profile", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("John Doe") }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Jane Smith", subtitle: "Product Designer", actionLabel: "View Profile", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Jane Smith") }), _jsx(ListItem, { icon: _jsx(User, { size: 16 }), title: "Ankit Das", subtitle: "Software Developer", actionLabel: "View Profile", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Ankit Das") })] })),
};
export const ImageWithSubtitle = {
    render: () => (_jsxs(ListBlock, { variant: "image", children: [_jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=1", alt: "John" }, title: "John Doe", subtitle: "Software Engineer" }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=2", alt: "Jane" }, title: "Jane Smith", subtitle: "Product Designer" }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=3", alt: "Ankit" }, title: "Ankit Das", subtitle: "Software Developer" })] })),
};
export const ImageNoSubtitle = {
    render: () => (_jsxs(ListBlock, { variant: "image", children: [_jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=1", alt: "John" }, title: "John Doe" }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=2", alt: "Jane" }, title: "Jane Smith" }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=3", alt: "Ankit" }, title: "Ankit Das" })] })),
};
export const ImageClickable = {
    render: () => (_jsxs(ListBlock, { variant: "image", children: [_jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=1", alt: "John" }, title: "John Doe", subtitle: "Software Engineer", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("John Doe") }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=2", alt: "Jane" }, title: "Jane Smith", subtitle: "Product Designer", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Jane Smith") }), _jsx(ListItem, { image: { src: "https://i.pravatar.cc/40?img=3", alt: "Ankit" }, title: "Ankit Das", subtitle: "Software Developer", actionIcon: _jsx(ChevronRight, { size: 16 }), onClick: () => alert("Ankit Das") })] })),
};
//# sourceMappingURL=ListBlock.stories.js.map