import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Popover, PopoverContent, PopoverTrigger } from './popover';
import { Button } from './button';
import { Input } from './input';
import { Label } from './label';
const meta = {
    title: 'UI/Popover',
    component: Popover,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
};
export default meta;
export const Default = {
    render: () => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open popover" }) }), _jsx(PopoverContent, { className: "w-80", children: _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "leading-none font-medium", children: "Dimensions" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Set the dimensions for the layer." })] }), _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { htmlFor: "width", children: "Width" }), _jsx(Input, { id: "width", defaultValue: "100%", className: "col-span-2 h-8" })] }), _jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { htmlFor: "maxWidth", children: "Max. width" }), _jsx(Input, { id: "maxWidth", defaultValue: "300px", className: "col-span-2 h-8" })] }), _jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { htmlFor: "height", children: "Height" }), _jsx(Input, { id: "height", defaultValue: "25px", className: "col-span-2 h-8" })] }), _jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { htmlFor: "maxHeight", children: "Max. height" }), _jsx(Input, { id: "maxHeight", defaultValue: "none", className: "col-span-2 h-8" })] })] })] }) })] })),
};
export const Simple = {
    render: () => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { children: "Click me" }) }), _jsx(PopoverContent, { children: _jsx("p", { children: "This is a simple popover with some text content." }) })] })),
};
export const TopPlacement = {
    render: () => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open top" }) }), _jsx(PopoverContent, { side: "top", children: _jsx("p", { children: "This popover appears above the trigger." }) })] })),
};
export const RightPlacement = {
    render: () => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open right" }) }), _jsx(PopoverContent, { side: "right", children: _jsx("p", { children: "This popover appears to the right of the trigger." }) })] })),
};
