import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BusFront, PlaneTakeoff, Ship } from "lucide-react";
import { Card } from "../../Card/Card";
import { CardHeader } from "../../CardHeader";
import { IconButton } from "../../IconButton";
import { Image } from "../../Image";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../Tabs";
const meta = {
    title: "Components/Tabs",
    component: Tabs,
    tags: ["!dev", "autodocs"],
    parameters: {
        layout: "centered",
        docs: {
            description: {
                component: "```tsx\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@openuidev/react-ui';\n```",
            },
        },
    },
    decorators: [
        (Story) => (_jsx("div", { style: { width: "400px", margin: "2rem" }, children: _jsx(Story, {}) })),
    ],
    argTypes: {
        variant: {
            control: {
                type: "select",
                options: ["clear"],
            },
            description: "The variant of the tabs",
            table: {
                type: {
                    summary: "clear",
                },
                defaultValue: { summary: "clear" },
                category: "Appearance",
            },
        },
        defaultValue: {
            control: false,
            description: "The default value of the tabs which is used to determine which tab is selected",
            table: {
                category: "Behavior",
            },
        },
        className: {
            control: false,
            description: "Additional class name for the tabs",
            table: {
                category: "Styling",
            },
        },
        style: {
            control: false,
            description: "Additional style for the tabs",
            table: {
                category: "Styling",
            },
        },
    },
};
export default meta;
export const Title = {
    args: {
        variant: "clear",
        defaultValue: "tab1",
    },
    render: (args) => (_jsx(Card, { children: _jsxs(Tabs, { ...args, children: [_jsxs(TabsList, { variant: "title", children: [_jsx(TabsTrigger, { value: "tab1", text: "Paris" }), _jsx(TabsTrigger, { value: "tab2", text: "Tokyo" }), _jsx(TabsTrigger, { value: "tab3", text: "New York" })] }), _jsxs(TabsContent, { value: "tab1", children: [_jsx(CardHeader, { title: "Paris, France", subtitle: "The City of Light", actions: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: _jsx(PlaneTakeoff, {}) })] }), _jsx(Image, { src: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34", alt: "Eiffel Tower in Paris", scale: "fill" })] }), _jsxs(TabsContent, { value: "tab2", children: [_jsx(CardHeader, { title: "Tokyo, Japan", subtitle: "Where Tradition Meets Future", actions: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: _jsx(Ship, {}) })] }), _jsx(Image, { src: "https://images.unsplash.com/photo-1536098561742-ca998e48cbcc", alt: "Tokyo cityscape with Mount Fuji", scale: "fill" })] }), _jsxs(TabsContent, { value: "tab3", children: [_jsx(CardHeader, { title: "New York City, USA", subtitle: "The City That Never Sleeps", actions: [_jsx(IconButton, { variant: "tertiary", size: "small", icon: _jsx(BusFront, {}) })] }), _jsx(Image, { src: "https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9", alt: "New York City skyline", scale: "fill" })] })] }) })),
};
export const IconTitle = {
    args: {
        variant: "clear",
        defaultValue: "tab1",
    },
    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsxs(TabsList, { variant: "iconTitle", children: [_jsx(TabsTrigger, { value: "tab1", text: "Venice", icon: _jsx(PlaneTakeoff, {}) }), _jsx(TabsTrigger, { value: "tab2", text: "Kyoto", icon: _jsx(Ship, {}) }), _jsx(TabsTrigger, { value: "tab3", text: "Dubai", icon: _jsx(BusFront, {}) })] }), _jsx(TabsContent, { value: "tab1", children: _jsx(CardHeader, { title: "Venice, Italy", subtitle: "The Floating City" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx(CardHeader, { title: "Kyoto, Japan", subtitle: "The Cultural Heart of Japan" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx(CardHeader, { title: "Dubai, UAE", subtitle: "City of the Future" }) })] })),
};
export const IconTitleSubtext = {
    args: {
        variant: "clear",
        defaultValue: "tab1",
    },
    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsxs(TabsList, { variant: "iconTitleSubtext", children: [_jsx(TabsTrigger, { value: "tab1", text: "Venice", subtext: "Italy", icon: _jsx(PlaneTakeoff, {}) }), _jsx(TabsTrigger, { value: "tab2", text: "Kyoto", subtext: "Japan", icon: _jsx(Ship, {}) }), _jsx(TabsTrigger, { value: "tab3", text: "Dubai", subtext: "UAE", icon: _jsx(BusFront, {}) })] }), _jsx(TabsContent, { value: "tab1", children: _jsx(CardHeader, { title: "Venice, Italy", subtitle: "The Floating City" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx(CardHeader, { title: "Kyoto, Japan", subtitle: "The Cultural Heart of Japan" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx(CardHeader, { title: "Dubai, UAE", subtitle: "City of the Future" }) })] })),
};
export const ImageTitle = {
    args: {
        variant: "clear",
        defaultValue: "tab1",
    },
    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsxs(TabsList, { variant: "imageTitle", children: [_jsx(TabsTrigger, { value: "tab1", text: "Paris", image: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=64" }), _jsx(TabsTrigger, { value: "tab2", text: "Tokyo", image: "https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?w=64" }), _jsx(TabsTrigger, { value: "tab3", text: "New York", image: "https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?w=64" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx(CardHeader, { title: "Paris, France", subtitle: "The City of Light" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx(CardHeader, { title: "Tokyo, Japan", subtitle: "Where Tradition Meets Future" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx(CardHeader, { title: "New York City, USA", subtitle: "The City That Never Sleeps" }) })] })),
};
export const ImageTitleSubtext = {
    args: {
        variant: "clear",
        defaultValue: "tab1",
    },
    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsxs(TabsList, { variant: "imageTitleSubtext", children: [_jsx(TabsTrigger, { value: "tab1", text: "Paris", subtext: "France", image: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=64" }), _jsx(TabsTrigger, { value: "tab2", text: "Tokyo", subtext: "Japan", image: "https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?w=64" }), _jsx(TabsTrigger, { value: "tab3", text: "New York", subtext: "USA", image: "https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?w=64" }), _jsx(TabsTrigger, { value: "tab4", text: "London", subtext: "UK", image: "https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=64" }), _jsx(TabsTrigger, { value: "tab5", text: "Sydney", subtext: "Australia", image: "https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?w=64" }), _jsx(TabsTrigger, { value: "tab6", text: "Rome", subtext: "Italy", image: "https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=64" }), _jsx(TabsTrigger, { value: "tab7", text: "Barcelona", subtext: "Spain", image: "https://images.unsplash.com/photo-1583422409516-2895a77efded?w=64" }), _jsx(TabsTrigger, { value: "tab8", text: "Bangkok", subtext: "Thailand", image: "https://images.unsplash.com/photo-1508009603885-50cf7c579365?w=64" }), _jsx(TabsTrigger, { value: "tab9", text: "Cape Town", subtext: "South Africa", image: "https://images.unsplash.com/photo-1580060839134-75a5edca2e99?w=64" }), _jsx(TabsTrigger, { value: "tab10", text: "Amsterdam", subtext: "Netherlands", image: "https://images.unsplash.com/photo-1512470876302-972faa2aa9a4?w=64" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx(CardHeader, { title: "Paris, France", subtitle: "The City of Light" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx(CardHeader, { title: "Tokyo, Japan", subtitle: "Where Tradition Meets Future" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx(CardHeader, { title: "New York City, USA", subtitle: "The City That Never Sleeps" }) }), _jsx(TabsContent, { value: "tab4", children: _jsx(CardHeader, { title: "London, UK", subtitle: "The City of History" }) }), _jsx(TabsContent, { value: "tab5", children: _jsx(CardHeader, { title: "Sydney, Australia", subtitle: "The Harbour City" }) }), _jsx(TabsContent, { value: "tab6", children: _jsx(CardHeader, { title: "Rome, Italy", subtitle: "The Eternal City" }) }), _jsx(TabsContent, { value: "tab7", children: _jsx(CardHeader, { title: "Barcelona, Spain", subtitle: "City of Gaud\u00ED" }) }), _jsx(TabsContent, { value: "tab8", children: _jsx(CardHeader, { title: "Bangkok, Thailand", subtitle: "City of Angels" }) }), _jsx(TabsContent, { value: "tab9", children: _jsx(CardHeader, { title: "Cape Town, South Africa", subtitle: "The Mother City" }) }), _jsx(TabsContent, { value: "tab10", children: _jsx(CardHeader, { title: "Amsterdam, Netherlands", subtitle: "Venice of the North" }) })] })),
};
//# sourceMappingURL=tabs.stories.js.map