@thinkbuff/figma-react
Version:
A Figma React UI components for creating plugins and widgets
38 lines (35 loc) • 1.46 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { cn } from '../../utils/cn.mjs';
const ScrollBar = forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
ScrollAreaPrimitive.ScrollAreaScrollbar,
{
ref,
orientation,
className: cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" && "h-full w-1.5 border-l border-l-transparent p-px",
orientation === "horizontal" && "h-1.5 border-t border-t-transparent p-px",
className
),
...props,
children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-grow rounded-full bg-figma-text-secondary" })
}
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
const ScrollArea = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
ScrollAreaPrimitive.Root,
{
ref,
className: cn("relative overflow-hidden", className),
...props,
children: [
/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit] [&>div]:!block", children }),
/* @__PURE__ */ jsx(ScrollBar, {}),
/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
]
}
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
export { ScrollArea, ScrollBar };