@arolariu/components/dist/esm/components/ui/scroll-area.js

🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import "react";
import { Corner, Root, ScrollAreaScrollbar, ScrollAreaThumb, Viewport } from "@radix-ui/react-scroll-area";
import { cn } from "../../lib/utils.js";
function ScrollArea({ className, children, ...props }) {
    return /*#__PURE__*/ jsxs(Root, {
        "data-slot": "scroll-area",
        className: cn("relative", className),
        ...props,
        children: [
            /*#__PURE__*/ jsx(Viewport, {
                "data-slot": "scroll-area-viewport",
                className: "focus-visible:ring-neutral-950/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 dark:focus-visible:ring-neutral-300/50",
                children: children
            }),
            /*#__PURE__*/ jsx(ScrollBar, {}),
            /*#__PURE__*/ jsx(Corner, {})
        ]
    });
}
function ScrollBar({ className, orientation = "vertical", ...props }) {
    return /*#__PURE__*/ jsx(ScrollAreaScrollbar, {
        "data-slot": "scroll-area-scrollbar",
        orientation: orientation,
        className: cn("flex touch-none p-px transition-colors select-none", "vertical" === orientation && "h-full w-2.5 border-l border-l-transparent", "horizontal" === orientation && "h-2.5 flex-col border-t border-t-transparent", className),
        ...props,
        children: /*#__PURE__*/ jsx(ScrollAreaThumb, {
            "data-slot": "scroll-area-thumb",
            className: "bg-neutral-200 relative flex-1 rounded-full dark:bg-neutral-800"
        })
    });
}
export { ScrollArea, ScrollBar };

//# sourceMappingURL=scroll-area.js.map