51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T32d8,import * as React from "react"; import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area"; import { cn } from "@/lib/utils"; import "./scroll-area.css"; type FadeEdge = "top" | "bottom" | "left" | "right" | "x" | "y"; type FadeEdges = boolean | FadeEdge | FadeEdge[]; function parseFadeEdges(fadeEdges: FadeEdges): { top: boolean; bottom: boolean; left: boolean; right: boolean; } { if (fadeEdges === true) { return { top: true, bottom: true, left: true, right: true }; } if (fadeEdges === false) { return { top: false, bottom: false, left: false, right: false }; } const edges = Array.isArray(fadeEdges) ? fadeEdges : [fadeEdges]; const result = { top: false, bottom: false, left: false, right: false }; for (const edge of edges) { if (edge === "x") { result.left = true; result.right = true; } else if (edge === "y") { result.top = true; result.bottom = true; } else { result[edge] = true; } } return result; } type OverscrollBehavior = "auto" | "contain" | "none"; type ContentMinWidth = "viewport" | "fit-content"; type ContentHeight = "auto" | "fill"; type ScrollAreaProps = BaseScrollArea.Root.Props & { fadeEdges?: FadeEdges; scrollbarGutter?: boolean; persistScrollbar?: boolean; hideScrollbar?: boolean; nativeScroll?: boolean; overscrollBehavior?: OverscrollBehavior; /** * How wide the content wrapper is allowed to get. `"viewport"` keeps it at * the visible width; `"fit-content"` restores Base UI's default of growing * to the widest child. See the note on the `Content` element below. */ contentMinWidth?: ContentMinWidth; /** * How tall the content wrapper is allowed to get. `"auto"` tracks the * children; `"fill"` stretches it to at least the viewport height so a flex * child can push a footer down with `mt-auto`. Children of a `"fill"` wrapper * size themselves with `flex-1`, not `h-full` — see the note on the `Content` * element below. */ contentHeight?: ContentHeight; /** Ref callback for the scrollable viewport element. Useful for virtualization. */ viewportRef?: (element: HTMLDivElement | null) => void; /** Additional className for the viewport element */ viewportClassName?: string; /** * Additional className for the content wrapper element. Needed when a child * relies on a percentage height against its parent (e.g. Base UI's Select * list gets `max-height: 100%` with `alignItemWithTrigger`), which only * resolves if the wrapper has a definite height like `h-full`. Ignored with * `nativeScroll` (no content wrapper exists there). */ contentClassName?: string; }; function ScrollArea({ className, children, fadeEdges = false, scrollbarGutter = false, persistScrollbar = false, hideScrollbar = false, nativeScroll = false, overscrollBehavior = "contain", contentMinWidth = "viewport", contentHeight = "auto", viewportRef, viewportClassName, contentClassName, ...props }: ScrollAreaProps) { if (process.env.NODE_ENV !== "production") { if (persistScrollbar && hideScrollbar) { console.error( "ScrollArea: `persistScrollbar` and `hideScrollbar` cannot be used together.", ); } if (nativeScroll && persistScrollbar) { console.error( "ScrollArea: `persistScrollbar` is not supported with `nativeScroll`.", ); } if (nativeScroll && contentClassName) { console.error( "ScrollArea: `contentClassName` is ignored with `nativeScroll` (no content wrapper exists there).", ); } } if (nativeScroll) { // Base UI className can be a function; NativeScrollArea only accepts string. const nativeClassName = typeof className === "string" ? className : undefined; return ( {children} ); } const fade = parseFadeEdges(fadeEdges); const hasFade = fade.top || fade.bottom || fade.left || fade.right; return ( {children} {!hideScrollbar && ( <> )} ); } function ScrollBar({ className, persist = false, ...props }: BaseScrollArea.Scrollbar.Props & { persist?: boolean; }) { return ( ); } /** * Native scroll variant. Fade edges use CSS scroll-driven animations * (Chrome 115+); static fallback elsewhere. */ function NativeScrollArea({ className, viewportClassName, children, fadeEdges = false, hideScrollbar = false, scrollbarGutter = false, overscrollBehavior, ref, style, ...props }: Omit< React.ComponentProps<"div">, "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" > & { fadeEdges?: FadeEdges; hideScrollbar?: boolean; scrollbarGutter?: boolean; overscrollBehavior?: OverscrollBehavior; viewportClassName?: string; ref?: (element: HTMLDivElement | null) => void; }) { const fade = parseFadeEdges(fadeEdges); const hasFade = fade.top || fade.bottom || fade.left || fade.right; // Fixed reveal distance, clamped to the scroll range so short scrollers // still reach a full fade instead of only partially revealing it. const reveal = "min(var(--scroll-fade-reveal,6rem),100%)"; const fadeAnimations = [ fade.top && { name: "scroll-fade-reveal-top", timeline: "scroll(y self)", range: `0 ${reveal}`, }, fade.bottom && { name: "scroll-fade-reveal-bottom", timeline: "scroll(y self)", range: `calc(100% - ${reveal}) 100%`, }, fade.left && { name: "scroll-fade-reveal-left", timeline: "scroll(x self)", range: `0 ${reveal}`, }, fade.right && { name: "scroll-fade-reveal-right", timeline: "scroll(x self)", range: `calc(100% - ${reveal}) 100%`, }, ].filter(Boolean) as { name: string; timeline: string; range: string }[]; const animationStyle: React.CSSProperties | undefined = hasFade ? { animationName: fadeAnimations.map((a) => a.name).join(", "), animationTimeline: fadeAnimations.map((a) => a.timeline).join(", "), animationRange: fadeAnimations.map((a) => a.range).join(", "), animationTimingFunction: "ease-in-out", animationDuration: "1ms", animationFillMode: "both", } : undefined; return (

{children}

); } export { ScrollArea }; export type { ScrollAreaProps, FadeEdges, FadeEdge, OverscrollBehavior, ContentMinWidth, ContentHeight, }; 53:T91e,/* ------------------------------------------------------------------------------------------------- * Scroll-Driven Animations for Native Scroll Fade Edges (Progressive Enhancement) * Chrome 115+, Safari 26+ (future), Firefox flag-only * Fallback: Static fade on both ends of each configured edge * -------------------------------------------------------------------------------------------------*/ /* Animatable custom properties for fade amounts (length-percentage so the * fade size can be a percentage of the container, e.g. min(12%, 2.5rem)) */ @property --scroll-fade-top { syntax: ""; inherits: false; initial-value: 0px; } @property --scroll-fade-bottom { syntax: ""; inherits: false; initial-value: 0px; } @property --scroll-fade-left { syntax: ""; inherits: false; initial-value: 0px; } @property --scroll-fade-right { syntax: ""; inherits: false; initial-value: 0px; } /** * Per-edge fade reveal animations. * * Each edge animates a single fade amount between 0 and --scroll-fade-size. * The scroll distance over which the fade eases in/out is driven by * animation-range (set on the element), not by keyframe percentages, so the * reveal is a fixed pixel distance independent of content length. */ @keyframes scroll-fade-reveal-top { from { --scroll-fade-top: 0px; } to { --scroll-fade-top: var(--scroll-fade-size); } } @keyframes scroll-fade-reveal-bottom { from { --scroll-fade-bottom: var(--scroll-fade-size); } to { --scroll-fade-bottom: 0px; } } @keyframes scroll-fade-reveal-left { from { --scroll-fade-left: 0px; } to { --scroll-fade-left: var(--scroll-fade-size); } } @keyframes scroll-fade-reveal-right { from { --scroll-fade-right: var(--scroll-fade-size); } to { --scroll-fade-right: 0px; } } /** * Fallback for browsers without scroll-driven animations: a static fade on * each configured edge. Without scroll awareness both ends stay faded. */ @supports not (animation-timeline: scroll()) { [data-native-scroll] { --scroll-fade-top: var(--scroll-fade-size); --scroll-fade-bottom: var(--scroll-fade-size); --scroll-fade-left: var(--scroll-fade-size); --scroll-fade-right: var(--scroll-fade-size); } } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"registry/default/scroll-area/scroll-area.tsx","content":"$52","type":"registry:ui","target":"components/ui/cubby-ui/scroll-area/scroll-area.tsx"},{"path":"registry/default/scroll-area/scroll-area.css","content":"$53","type":"registry:file","target":"components/ui/cubby-ui/scroll-area/scroll-area.css"}],"className":"h-[70svh] min-h-80"}]]}]