@arolariu/components
Version:
🎨 70+ 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! ⚡
32 lines (31 loc) • 1.55 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Corner, Root, ScrollAreaScrollbar, ScrollAreaThumb, Viewport } from "@radix-ui/react-scroll-area";
import { forwardRef } from "react";
import { cn } from "../../lib/utilities.js";
const ScrollArea = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(Root, {
ref: ref,
className: cn("relative overflow-hidden", className),
...props,
children: [
/*#__PURE__*/ jsx(Viewport, {
className: "h-full w-full rounded-[inherit]",
children: children
}),
/*#__PURE__*/ jsx(ScrollBar, {}),
/*#__PURE__*/ jsx(Corner, {})
]
}));
ScrollArea.displayName = Root.displayName;
const ScrollBar = /*#__PURE__*/ forwardRef(({ className, orientation = "vertical", ...props }, ref)=>/*#__PURE__*/ jsx(ScrollAreaScrollbar, {
ref: ref,
orientation: orientation,
className: cn("flex touch-none transition-colors select-none", "vertical" === orientation && "h-full w-2.5 border-l border-l-transparent p-[1px]", "horizontal" === orientation && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className),
...props,
children: /*#__PURE__*/ jsx(ScrollAreaThumb, {
className: "relative flex-1 rounded-full bg-neutral-200 dark:bg-neutral-800"
})
}));
ScrollBar.displayName = ScrollAreaScrollbar.displayName;
export { ScrollArea, ScrollBar };
//# sourceMappingURL=scroll-area.js.map