import { jsx as _jsx } from "react/jsx-runtime";
import { AlertCircle, AlertTriangle, CheckCircle, User } from "lucide-react";
import { Tag } from "../Tag";
const meta = {
    title: "Components/Tag",
    component: Tag,
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { Tag } from '@openuidev/react-ui';\n```",
            },
        },
    },
    argTypes: {
        text: {
            control: "text",
            description: "The text content of the tag",
            table: {
                category: "Content",
                type: { summary: "string" },
            },
        },
        icon: {
            control: false,
            description: "The icon to display in the tag",
            table: {
                category: "Content",
                type: { summary: "ReactNode" },
            },
        },
        size: {
            control: "select",
            options: ["sm", "md", "lg"],
            description: "The size of the tag",
            table: {
                category: "Appearance",
                type: { summary: "sm | md | lg" },
                defaultValue: { summary: "md" },
            },
        },
        variant: {
            control: "select",
            options: ["neutral", "info", "success", "warning", "danger"],
            description: "The variant of the tag",
            table: {
                category: "Appearance",
                type: { summary: "neutral | info | success | warning | danger" },
                defaultValue: { summary: "neutral" },
            },
        },
        className: {
            control: false,
            description: "Additional CSS class name for custom styling",
            table: {
                category: "Styling",
                type: { summary: "string" },
            },
        },
        styles: {
            control: false,
            description: "Additional CSS styles for custom styling",
            table: {
                category: "Styling",
                type: { summary: "CSSProperties" },
            },
        },
    },
    tags: ["!dev", "!autodocs"],
};
export default meta;
// Basic Tag
export const Default = {
    args: {
        text: "User Tag",
        icon: _jsx(User, { size: 16 }),
    },
};
// Size Variants
export const Medium = {
    args: {
        text: "Medium Tag",
        size: "md",
    },
};
export const Large = {
    args: {
        text: "Large Tag",
        size: "lg",
    },
};
// Color Variants
export const Neutral = {
    args: {
        text: "Neutral Tag",
        variant: "neutral",
    },
};
export const Info = {
    args: {
        text: "Info Tag",
        variant: "info",
        icon: _jsx(AlertCircle, { size: 16 }),
    },
};
export const Success = {
    args: {
        text: "Success Tag",
        variant: "success",
        icon: _jsx(CheckCircle, { size: 16 }),
    },
};
export const Warning = {
    args: {
        text: "Warning Tag",
        variant: "warning",
        icon: _jsx(AlertTriangle, { size: 16 }),
    },
};
export const Danger = {
    args: {
        text: "Danger Tag",
        variant: "danger",
        icon: _jsx(AlertCircle, { size: 16 }),
    },
};
//# sourceMappingURL=Tag.stories.js.map