import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SwitchItem } from "../../SwitchItem";
import { SwitchGroup } from "../SwitchGroup";
const meta = {
    title: "Components/SwitchGroup",
    component: SwitchGroup,
    subcomponents: {
        SwitchItem: SwitchItem,
    },
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { SwitchGroup, SwitchItem } from '@openuidev/react-ui';\n```",
            },
        },
    },
    argTypes: {
        variant: {
            control: "radio",
            options: ["clear", "card", "sunk"],
            defaultValue: "clear",
            description: "The variant of the switch group",
            table: {
                category: "Appearance",
                type: { summary: "string" },
                defaultValue: { summary: "clear" },
            },
        },
        children: {
            control: false,
            description: "Accepts SwitchItem components",
            table: {
                category: "Content",
                type: { summary: "SwitchItemProps[]| SwitchItemProps" },
            },
        },
        className: {
            control: false,
            description: "Additional CSS class name for custom styling",
            table: {
                category: "Styling",
            },
        },
        style: {
            control: false,
            description: "Additional CSS style for custom styling",
            table: {
                category: "Styling",
            },
        },
    },
    tags: ["!dev", "autodocs"],
};
export default meta;
export const SwitchGroupStory = {
    args: {
        variant: "card",
    },
    render: (args) => (_jsxs(SwitchGroup, { ...args, children: [_jsx(SwitchItem, { value: "option1", label: "Option 1", description: "Option 1 description" }), _jsx(SwitchItem, { value: "option2", label: "Option 2", description: "Option 2 description" }), _jsx(SwitchItem, { value: "option3", label: "Option 3", description: "Option 3 description" })] })),
};
export const WithLongDescription = {
    args: {
        variant: "card",
    },
    render: (args) => (_jsxs(SwitchGroup, { ...args, children: [_jsx(SwitchItem, { value: "long1", label: "First option with a long description", description: "This is a long description that elaborates on the choice in great detail so that readers can fully understand the implications of selecting this option. It provides context, examples, and any caveats that might be relevant when making a selection." }), _jsx(SwitchItem, { value: "long2", label: "Second option with a long description", description: "Another extended description that spans multiple sentences to showcase how the component behaves with verbose content. It should wrap correctly and remain readable without breaking the layout of the switch group." }), _jsx(SwitchItem, { value: "long3", label: "Third option with a long description", description: "A very long explanation that includes more nuance about the option, possible trade-offs, and guidance for when this might be preferred. This helps validate the design for accessibility and usability with real-world copy lengths." })] })),
};
//# sourceMappingURL=SwitchGroup.stories.js.map