import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "../Select";
const meta = {
    title: "Components/Select",
    component: Select,
    tags: ["!dev", "autodocs"],
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@openuidev/react-ui';\n```",
            },
        },
    },
    decorators: [
        (Story) => (_jsx("div", { style: { width: "240px" }, children: _jsx(Story, {}) })),
    ],
    argTypes: {
        size: {
            control: "radio",
            options: ["sm", "md", "lg"],
            description: "The size of the select trigger",
            table: {
                type: { summary: "string" },
                defaultValue: { summary: "md" },
                category: "Appearance",
            },
        },
        showTick: {
            control: "boolean",
            description: "Whether to show the tick icon for selected items",
            table: {
                type: { summary: "boolean" },
                defaultValue: { summary: "true" },
                category: "Display",
            },
        },
        hideDropdownIcon: {
            control: "boolean",
            description: "Whether to hide the dropdown icon in the trigger",
            table: {
                type: { summary: "boolean" },
                defaultValue: { summary: "false" },
                category: "Display",
            },
        },
        placeholder: {
            control: "text",
            description: "Placeholder text for the select",
            table: {
                type: { summary: "string" },
                defaultValue: { summary: "undefined" },
                category: "Content",
            },
        },
    },
};
export default meta;
export const Basic = {
    args: {
        size: "md",
        showTick: true,
        hideDropdownIcon: false,
        placeholder: "Select an option",
    },
    render: (args) => (_jsxs(Select, { children: [_jsx(SelectTrigger, { style: { width: "228px" }, hideDropdownIcon: args.hideDropdownIcon, size: args.size, children: _jsx(SelectValue, { placeholder: args.placeholder }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Fruits" }), _jsx(SelectItem, { value: "apple", children: "Apple" }), _jsx(SelectItem, { value: "banana", children: "Banana" }), _jsx(SelectItem, { value: "blueberry", children: "Blueberry" }), _jsx(SelectItem, { value: "grapes", children: "Grapes" }), _jsx(SelectItem, { value: "pineapple", children: "Pineapple" }), _jsx(SelectSeparator, {}), _jsx(SelectLabel, { children: "Fast Food" }), _jsx(SelectItem, { value: "burger", children: "Burger" }), _jsx(SelectItem, { value: "pizza", children: "Pizza" }), _jsx(SelectItem, { value: "pasta", children: "Pasta" }), _jsx(SelectItem, { value: "salad", children: "Salad" }), _jsx(SelectItem, { value: "ice-cream", children: "Ice Cream" })] }) })] })),
};
//# sourceMappingURL=select.stories.js.map