import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MoveHorizontal, MoveLeft, MoveRight } from "lucide-react";
import { ToggleItem } from "../../ToggleItem";
import { ToggleGroup } from "../ToggleGroup";
const meta = {
    title: "Components/ToggleGroup",
    component: ToggleGroup,
    subcomponents: {
        ToggleItem: ToggleItem,
    },
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { ToggleGroup, ToggleItem } from '@openuidev/react-ui';\n```",
            },
        },
    },
    argTypes: {
        type: {
            control: "radio",
            options: ["single", "multiple"],
            description: "The type of toggle group",
            table: {
                category: "Appearance",
                type: { summary: "string" },
                defaultValue: { summary: "single" },
            },
        },
        children: {
            control: false,
            description: "The children of the toggle group",
            table: {
                category: "Content",
                type: { summary: "ToggleItemProps[]| ToggleItemProps" },
            },
        },
        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: ["autodocs", "!dev"],
};
export default meta;
export const SingleSelection = {
    args: {
        type: "single",
    },
    render: (args) => (_jsxs(ToggleGroup, { ...args, "aria-label": "Text alignment", children: [_jsx(ToggleItem, { value: "left", children: "Left" }), _jsx(ToggleItem, { value: "center", children: "Center" }), _jsx(ToggleItem, { value: "right", children: "Right" })] })),
};
export const MultipleSelection = {
    args: {
        type: "multiple",
        defaultValue: ["bold", "italic"],
    },
    render: (args) => (_jsxs(ToggleGroup, { ...args, "aria-label": "Text formatting", children: [_jsx(ToggleItem, { value: "bold", children: "Bold" }), _jsx(ToggleItem, { value: "italic", children: "Italic" }), _jsx(ToggleItem, { value: "underline", children: "Underline" })] })),
};
export const Disabled = {
    args: {
        type: "single",
        defaultValue: "left",
    },
    render: (args) => (_jsxs(ToggleGroup, { ...args, "aria-label": "Text alignment", children: [_jsx(ToggleItem, { value: "left", children: "Left" }), _jsx(ToggleItem, { value: "center", disabled: true, children: "Center" }), _jsx(ToggleItem, { value: "right", children: "Right" })] })),
};
export const WithIcons = {
    args: {
        type: "single",
        defaultValue: "left",
    },
    render: (args) => (_jsxs(ToggleGroup, { ...args, "aria-label": "Text alignment", children: [_jsx(ToggleItem, { value: "left", children: _jsx(MoveLeft, { size: 14 }) }), _jsx(ToggleItem, { value: "center", children: _jsx(MoveHorizontal, { size: 14 }) }), _jsx(ToggleItem, { value: "right", children: _jsx(MoveRight, { size: 14 }) })] })),
};
//# sourceMappingURL=ToggleGroup.stories.js.map