@snowball-tech/fractal/dist/LegacyScrollArea/ScrollArea.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{GROUP_NAME as r}from"./ScrollArea.constants.js";import i from"lodash/fp/omit.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";import*as s from"@radix-ui/react-scroll-area";const c=({children:c,orientation:l=`vertical`,scrollHideDelay:u=600,type:d=`hover`,viewport:f,...p})=>{let m=`flex touch-none select-none bg-grey-90 p-quarter transition-background-color duration-300 ease-out hover:bg-grey-70`,h=`relative flex-1 rounded-sm bg-grey-30 before:absolute before:content-empty`;return o(s.Root,{className:n(`${e}-${r}`,`overflow-hidden`,l===`vertical`||l===`both`?`h-full max-h-full min-h-0`:``,l===`horizontal`||l===`both`?`w-full min-w-0 max-w-full`:``,p.className),scrollHideDelay:u,type:d,...i([`className`],p),children:[a(s.Viewport,{className:n(`relative size-full max-h-full max-w-full`,f?.rootClassName),...i([`className`],f),children:a(`div`,{className:f?.className,children:c})}),(l===`both`||l===`vertical`)&&a(s.Scrollbar,{className:t(`fractal-scroll-area__scrollbar--y`,m,`w-1`),orientation:`vertical`,children:a(s.Thumb,{className:t(`fractal-scroll-area__scrollbar--y__thumb`,h,`!w-half before:top-1/2 before:h-full before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2`)})}),(l===`both`||l===`horizontal`)&&a(s.Scrollbar,{className:t(`fractal-scroll-area__scrollbar--x`,m,`h-1 flex-col`),orientation:`horizontal`,children:a(s.Thumb,{className:t(`fractal-scroll-area__scrollbar--x__thumb`,h,`!h-half before:top-1/2 before:h-full before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2`)})}),a(s.Corner,{className:`bg-grey-50`})]})};c.displayName=`LegacyScrollArea`;export{c as LegacyScrollArea,c as default};
//# sourceMappingURL=ScrollArea.js.map