import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ScrollArea, ScrollBar } from './scroll-area.js';
const meta = {
    title: 'Primitives/ScrollArea',
    component: ScrollArea,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
};
export default meta;
const items = Array.from({ length: 24 }, (_, index) => `Activity event ${index + 1}`);
export const Default = {
    render: () => (_jsx(ScrollArea, { className: "h-72 w-64 rounded-md border", children: _jsxs("div", { className: "p-4", children: [_jsx("h4", { className: "mb-4 text-sm leading-none font-medium", children: "Recent activity" }), items.map((item) => (_jsx("div", { className: "border-t py-2 text-sm", children: item }, item)))] }) })),
};
export const Horizontal = {
    render: () => (_jsxs(ScrollArea, { className: "w-80 rounded-md border whitespace-nowrap", children: [_jsx("div", { className: "flex w-max gap-4 p-4", children: items.slice(0, 10).map((item) => (_jsx("div", { className: "bg-muted h-24 w-36 rounded-md p-3 text-sm", children: item }, item))) }), _jsx(ScrollBar, { orientation: "horizontal" })] })),
};
export const BothAxes = {
    render: () => (_jsxs(ScrollArea, { className: "h-64 w-80 rounded-md border", children: [_jsx("div", { className: "grid w-[560px] grid-cols-4 gap-3 p-4", children: items.map((item) => (_jsx("div", { className: "bg-muted rounded-md p-3 text-sm", children: item }, item))) }), _jsx(ScrollBar, { orientation: "horizontal" })] })),
};
