import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import Tabs from "./index";
import GenshiroTheme from "../../theme/genshiro";
import curveTheme from "../../theme/curve";
export default {
    title: "Controls/Tabs",
    component: Tabs,
};
export const TabsStory = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
    ];
    return _jsx(Tabs, { items: items, onChange: (v) => console.log(v) });
};
export const TabsWithSelectedValue = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
    ];
    return (_jsx(Tabs, { items: items, onChange: (v) => console.log(v), selectedValue: "tab2" }));
};
export const CardTabs = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
        {
            value: "tab4",
            label: "Tab 4",
        },
        {
            value: "tab5",
            label: "Tab 5",
        },
    ];
    return (_jsx(Tabs, { items: items, onChange: (tab) => console.log(tab), type: "cards" }));
};
export const ControlTabs = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
        {
            value: "tab4",
            label: "Tab 4",
        },
        {
            value: "tab5",
            label: "Tab 5",
        },
    ];
    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { items: [
                    {
                        value: "tab1",
                        label: "Tab 1",
                    },
                ], onChange: (tab) => console.log(tab), type: "control" }), _jsx(Tabs, { items: items, onChange: (tab) => console.log(tab), type: "control" })] }));
};
export const ControlTabsWithDisabledTab = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
        {
            value: "tab4",
            label: "Tab 4",
            disabled: true,
        },
    ];
    return (_jsx(Tabs, { items: items, onChange: (tab) => console.log(tab), type: "control" }));
};
export const ControlFlatTabs = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
        {
            value: "tab4",
            label: "Tab 4",
            disabled: true,
        },
    ];
    return (_jsx(Tabs, { items: items, onChange: (tab) => console.log(tab), type: "control-flat" }));
};
export const GenshiroControlTheme = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
        {
            value: "tab4",
            label: "Tab 4",
        },
    ];
    return (_jsx(Tabs, { items: items, onChange: (tab) => console.log(tab), type: "control", 
        // @ts-ignore
        theme: GenshiroTheme }));
};
export const GenshiroControlFlatTheme = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
        {
            value: "tab4",
            label: "Tab 4",
        },
    ];
    return (_jsx(Tabs, { items: items, onChange: (tab) => console.log(tab), type: "control-flat", 
        // @ts-ignore
        theme: GenshiroTheme }));
};
export const CurveControlTheme = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
        {
            value: "tab4",
            label: "Tab 4",
        },
    ];
    return (_jsx(Tabs, { items: items, onChange: (tab) => console.log(tab), type: "control", 
        // @ts-ignore
        theme: curveTheme }));
};
export const CurveControlFlatTheme = () => {
    const items = [
        {
            value: "tab1",
            label: "Tab 1",
        },
        {
            value: "tab2",
            label: "Tab 2",
        },
        {
            value: "tab3",
            label: "Tab 3",
        },
        {
            value: "tab4",
            label: "Tab 4",
        },
    ];
    return (_jsx(Tabs, { items: items, onChange: (tab) => console.log(tab), type: "control-flat", 
        // @ts-ignore
        theme: curveTheme }));
};
//# sourceMappingURL=index.stories.js.map