import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from './drawer.js';
import { Button } from './button.js';
const meta = {
    title: 'Primitives/Drawer',
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
};
export default meta;
export const Default = {
    render: () => (_jsxs(Drawer, { children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Drawer" }) }), _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Drawer Title" }), _jsx(DrawerDescription, { children: "This is a default bottom drawer with header and footer content." })] }), _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "Drawer body content goes here." }) }), _jsxs(DrawerFooter, { children: [_jsx(Button, { children: "Submit" }), _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) })] })] })] })),
};
export const RightSide = {
    render: () => (_jsxs(Drawer, { direction: "right", children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Right Drawer" }) }), _jsxs(DrawerContent, { direction: "right", children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Right Drawer" }), _jsx(DrawerDescription, { children: "This drawer slides in from the right side, commonly used for inspector panels." })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "Inspector panel content. The drawer is fixed to the right edge of the viewport." }) }), _jsx(DrawerFooter, { children: _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }) })] })] })),
};
export const RightNonModal = {
    render: () => (_jsxs(Drawer, { direction: "right", modal: false, children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Non-Modal Right Drawer" }) }), _jsxs(DrawerContent, { direction: "right", children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Non-Modal Drawer" }), _jsx(DrawerDescription, { children: "This drawer does not block interaction with the background. No overlay is rendered." })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "You can interact with elements behind this drawer while it is open." }) })] })] })),
};
export const LeftSide = {
    render: () => (_jsxs(Drawer, { direction: "left", children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Left Drawer" }) }), _jsxs(DrawerContent, { direction: "left", children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Left Drawer" }), _jsx(DrawerDescription, { children: "This drawer slides in from the left side." })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "Navigation panel or sidebar content." }) })] })] })),
};
export const TopSide = {
    render: () => (_jsxs(Drawer, { direction: "top", children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Top Drawer" }) }), _jsxs(DrawerContent, { direction: "top", children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Top Drawer" }), _jsx(DrawerDescription, { children: "This drawer slides down from the top." })] }), _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "Notification bar or alert content." }) })] })] })),
};
export const WithContent = {
    render: () => (_jsxs(Drawer, { direction: "right", children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Detail Panel" }) }), _jsxs(DrawerContent, { direction: "right", className: "w-96 sm:max-w-96", children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Feature Details" }), _jsx(DrawerDescription, { children: "Inspect the selected feature's properties." })] }), _jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto p-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Status" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Running" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Lifecycle" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Implementation" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Progress" }), _jsx("div", { className: "bg-muted h-2 rounded-full", children: _jsx("div", { className: "h-full w-3/4 rounded-full bg-blue-500" }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Description" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "A longer description of the feature that would be truncated on the canvas node but is fully visible here in the drawer panel." })] })] }), _jsx(DrawerFooter, { children: _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }) })] })] })),
};
