{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scroll-area", "type": "registry:ui", "title": "Scroll area", "description": "Scroll container with overlay scrollbars and edge fades.", "dependencies": [ "@base-ui/react@^1.7.0" ], "registryDependencies": [ "https://control-ui.dev/r/core.json" ], "files": [ { "path": "src/registry/knob-contracts/scroll-area-knobs.ts", "target": "@components/control-ui/knob-contracts/scroll-area-knobs.ts", "type": "registry:component", "content": "// Generated from src/registry/sources/control-ui/recipes/scroll-area.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const scrollAreaKnobs = [\n \"--cui-scroll-area-thumb-radius\",\n \"--cui-scroll-area-thumb-background\",\n \"--cui-scroll-area-corner-background\",\n] as const;\nexport type ScrollAreaKnobStyle = Partial>;\n" }, { "path": "src/registry/sources/control-ui/recipes/scroll-area.css", "target": "@components/control-ui/styles/recipes/scroll-area.css", "type": "registry:file", "content": "@layer components {\n :where([data-control-family=\"scroll-area\"][data-slot=\"root\"]) {\n --cui-scroll-area-thumb-radius: 9999px;\n --cui-scroll-area-thumb-background: oklch(from var(--foreground) l c h / 0.4);\n --cui-scroll-area-corner-background: transparent;\n }\n\n :where([data-control-family=\"scroll-area\"][data-slot=\"scrollbar\"]) {\n opacity: 0;\n transition: opacity var(--duration-fast) var(--ease-standard);\n }\n\n :where([data-control-family=\"scroll-area\"][data-slot=\"scrollbar\"][data-visibility=\"always\"]),\n :where([data-control-family=\"scroll-area\"][data-slot=\"scrollbar\"][data-visibility=\"hover\"]:is([data-hovering], [data-scrolling])),\n :where([data-control-family=\"scroll-area\"][data-slot=\"scrollbar\"][data-visibility=\"scroll\"][data-scrolling]) {\n opacity: 1;\n }\n\n :where([data-control-family=\"scroll-area\"][data-slot=\"thumb\"]) {\n border-radius: var(--cui-scroll-area-thumb-radius);\n background: var(--cui-scroll-area-thumb-background);\n transition: background-color var(--duration-fast) var(--ease-standard);\n }\n\n :where([data-control-family=\"scroll-area\"][data-slot=\"viewport\"]) {\n border-radius: inherit;\n outline: none;\n }\n\n :where([data-control-family=\"scroll-area\"][data-slot=\"corner\"]) {\n background: var(--cui-scroll-area-corner-background);\n }\n}\n\n@property --cui-scroll-area-thumb-radius {\n syntax: \"\";\n inherits: true;\n initial-value: 0px;\n}\n\n@property --cui-scroll-area-thumb-background {\n syntax: \"*\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --cui-scroll-area-corner-background {\n syntax: \"\";\n inherits: true;\n initial-value: transparent;\n}\n" }, { "path": "src/registry/sources/control-ui/ui/scroll-area.tsx", "target": "@components/control-ui/ui/scroll-area.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type { ComponentProps, CSSProperties, Ref } from \"react\";\nimport type { ScrollAreaKnobStyle } from \"@/components/control-ui/knob-contracts/scroll-area-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport const scrollAreaScrollbarVisibilities = [\"scroll\", \"hover\", \"always\"] as const;\n\nexport type ScrollAreaScrollbarVisibility = (typeof scrollAreaScrollbarVisibilities)[number];\n\nexport type ScrollAreaLockAxis = \"x\" | \"y\" | \"both\";\n\nexport type ScrollAreaViewportProps = Omit, \"children\" | \"className\" | \"ref\"> & {\n \"data-control-ui\"?: string;\n \"data-control-family\"?: string;\n \"data-slot\"?: string;\n};\n\nexport type ScrollAreaProps = Omit, \"style\"> & { style?: CSSProperties & ScrollAreaKnobStyle } & {\n viewportClassName?: string;\n viewportProps?: ScrollAreaViewportProps;\n viewportRef?: Ref;\n maxHeight?: string;\n mask?: boolean;\n lockAxis?: ScrollAreaLockAxis;\n scrollbarVisibility?: ScrollAreaScrollbarVisibility;\n};\n\nconst maskXOverflowClasses = cn(\n \"data-[overflow-x-start]:mask-l-from-[calc(100%_-_var(--scroll-fade-size))]\",\n \"data-[overflow-x-end]:mask-r-from-[calc(100%_-_var(--scroll-fade-size))]\",\n);\n\nconst maskYOverflowClasses = cn(\n \"data-[overflow-y-start]:mask-t-from-[calc(100%_-_var(--scroll-fade-size))]\",\n \"data-[overflow-y-end]:mask-b-from-[calc(100%_-_var(--scroll-fade-size))]\",\n);\n\nfunction Scrollbar({\n orientation,\n visibility,\n thumbStyle,\n}: {\n orientation: \"vertical\" | \"horizontal\";\n visibility: ScrollAreaProps[\"scrollbarVisibility\"];\n thumbStyle?: CSSProperties & ScrollAreaKnobStyle;\n}) {\n return (\n \n \n \n );\n}\n\nfunction viewportStyle(maxHeight: ScrollAreaProps[\"maxHeight\"], lockX: boolean, lockY: boolean): CSSProperties | undefined {\n if (!maxHeight && !lockX && !lockY) return undefined;\n return {\n ...(maxHeight ? { maxHeight } : {}),\n ...(lockX ? { overflowX: \"hidden\" } : {}),\n ...(lockY ? { overflowY: \"hidden\" } : {}),\n };\n}\n\nexport function ScrollArea({\n className,\n viewportClassName,\n viewportProps,\n viewportRef,\n maxHeight,\n mask = true,\n lockAxis,\n scrollbarVisibility = \"scroll\",\n children,\n style,\n ...props\n}: ScrollAreaProps) {\n const lockX = lockAxis === \"x\" || lockAxis === \"both\";\n const lockY = lockAxis === \"y\" || lockAxis === \"both\";\n const resolvedViewportStyle = viewportStyle(maxHeight, lockX, lockY);\n const { style: viewportPropsStyle, ...resolvedViewportProps } = viewportProps ?? {};\n const mergedViewportStyle = viewportPropsStyle || resolvedViewportStyle ? { ...viewportPropsStyle, ...resolvedViewportStyle } : undefined;\n const thumbStyle = style;\n const cornerStyle = style;\n\n return (\n \n {/* overscroll stays at default so wheel falls through to parent — `overscroll-contain` would trap it */}\n \n \n {children}\n \n \n {!lockY && }\n {!lockX && }\n {!lockX && !lockY && (\n \n )}\n \n );\n}\n" } ], "css": { "@import \"../components/control-ui/styles/recipes/scroll-area.css\"": {} }, "meta": {} }