import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CardHeader } from "../../CardHeader";
import { FormControl } from "../../FormControl";
import { Input } from "../../Input";
import { Label } from "../../Label";
import { Card } from "../Card";
const meta = {
    title: "Components/Card",
    component: Card,
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { Card } from '@openuidev/react-ui';\n```",
            },
        },
    },
    argTypes: {
        width: {
            control: "radio",
            options: ["standard", "full"],
            description: "Controls the width of the card component",
            table: {
                category: "Appearance",
                defaultValue: { summary: "standard" },
            },
        },
        variant: {
            control: "radio",
            options: ["card", "clear", "sunk"],
            description: "Determines the visual style of the card",
            table: {
                defaultValue: { summary: "card" },
                category: "Appearance",
            },
        },
    },
    tags: ["autodocs", "!dev"],
};
export default meta;
// Basic button stories
export const CardStory = {
    args: {
        width: "standard",
        variant: "card",
    },
    render: (args) => (_jsx("div", { style: { width: "500px" }, children: _jsxs(Card, { variant: args.variant, width: args.width, children: [_jsx(CardHeader, { title: "Card Title", subtitle: "Card Description", actions: [] }), _jsxs(FormControl, { children: [_jsx(Label, { htmlFor: "username", children: "Username" }), _jsx(Input, { id: "username", placeholder: "Enter username" })] })] }) })),
};
//# sourceMappingURL=card.stories.js.map