import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tooltip, TooltipProvider } from "./tooltip.js";
const meta = {
    title: "UI/Tooltip",
    component: Tooltip,
    parameters: {
        layout: "centered",
        chromatic: {
            disableSnapshot: true,
        },
        docs: {
            description: {
                component: `A tooltip is a popup that displays informative text when users hover over an element.
        Tooltips must be wrapped in a TooltipProvider component to function properly. The provider is
        responsible for managing tooltip state and positioning.`,
            },
        },
    },
    tags: ["autodocs"],
    decorators: [
        (Story) => (_jsx(TooltipProvider, { children: _jsx(Story, {}) })),
    ],
    argTypes: {
        content: {
            description: "The content to display in the tooltip",
            control: "text",
        },
        children: {
            description: "The trigger element for the tooltip",
            control: false,
        },
        defaultOpen: {
            description: "The initial open state of the tooltip",
            control: "boolean",
        },
        open: {
            description: "Controlled open state of the tooltip",
            control: "boolean",
        },
        onOpenChange: {
            description: "Event handler called when the open state changes",
            control: false,
        },
        className: {
            description: "Additional CSS/Tailwind classes to apply to the tooltip content",
            control: "text",
        },
        align: {
            description: "The alignment of the tooltip content",
            control: "select",
            options: ["center", "start", "end"],
        },
        side: {
            description: "The side of the trigger that the tooltip should align to",
            control: "select",
            options: ["top", "right", "bottom", "left"],
        },
    },
};
export default meta;
export const Default = {
    args: {
        content: "This is a tooltip",
        children: _jsx("button", { children: "Hover me" }),
    },
};
export const CustomStyle = {
    args: {
        content: "Custom styled tooltip",
        children: _jsx("button", { children: "Hover for custom tooltip" }),
        className: "bg-blue-500 text-white dark:bg-blue-600 dark:text-white",
    },
};
export const DefaultOpen = {
    args: {
        content: "This tooltip starts open",
        children: _jsx("button", { children: "Already showing tooltip" }),
        defaultOpen: true,
    },
};
export const Alignments = {
    render: () => (_jsxs("div", { children: [_jsx("div", { className: "mb-8 text-center text-lg font-medium", children: "Tooltip alignments" }), _jsxs("div", { className: "flex items-center justify-center gap-32", children: [_jsx(Tooltip, { content: "Start aligned", align: "start", children: _jsx("button", { children: "Start" }) }), _jsx(Tooltip, { content: "Center aligned", align: "center", children: _jsx("button", { children: "Center" }) }), _jsx(Tooltip, { content: "End aligned", align: "end", children: _jsx("button", { children: "End" }) })] })] })),
};
export const DifferentSides = {
    render: () => (_jsxs("div", { children: [_jsx("div", { className: "mb-8 text-center text-lg font-medium", children: "Tooltip side positions" }), _jsxs("div", { className: "flex items-center justify-center gap-32", children: [_jsx(Tooltip, { content: "Above", side: "top", children: _jsx("button", { children: "Top" }) }), _jsx(Tooltip, { content: "Right side", side: "right", children: _jsx("button", { children: "Right" }) }), _jsx(Tooltip, { content: "Below", side: "bottom", children: _jsx("button", { children: "Bottom" }) }), _jsx(Tooltip, { content: "Left side", side: "left", children: _jsx("button", { children: "Left" }) })] })] })),
};
//# sourceMappingURL=tooltip.stories.js.map