{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "scroll-fade",
"title": "Scroll Fade",
"description": "A scroll container with top/bottom token-gradient fades that appear while more content exists in that direction, plus an optional click-to-scroll 'more below' indicator pill — built for long sidebar navs and list panels.",
"dependencies": [
"@untitledui/icons@^0.0.22"
],
"registryDependencies": [
"@nx-ui/utils"
],
"files": [
{
"path": "components/blocks/scroll-fade.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * ScrollFade — wraps scrollable content and overlays top/bottom gradient fades\n * that appear only while more content exists in that direction, so a long list\n * (a sidebar nav, a picker, an inbox) visibly communicates \"there's more\".\n *\n * It owns a scroll container of its own (filling whatever flex space its parent\n * grants), with a zero-cost sentinel element at each end watched by an\n * IntersectionObserver: when the top sentinel scrolls out of view the top fade\n * appears, likewise for the bottom; both hide when the content fits. The fades\n * derive their colour from a theme token (default: the sidebar surface via\n * `from-sidebar`), so they hold up across brand themes and dark mode — pass\n * the `from-*` utility matching the surface behind the list (`from-background`\n * on a page card, `from-popover` inside a popover).\n *\n * Beyond the fades, an optional `indicator` renders a small \"more below\" pill —\n * a chevron (plus an optional `indicatorLabel`, e.g. \"More\" or a count hint\n * like \"4 more\") floating at the foot of the list while content remains below\n * the fold. Clicking it scrolls down a viewport; it fades out (and leaves the\n * tab order) once the bottom is reached. Reduced motion gets instant scrolling\n * and no transition.\n *\n * Typical app-shell wiring — inside an AppSidebar's content area:\n *\n * ```tsx\n * }>\n * \n * \n * \n * \n * ```\n */\nfunction ScrollFade({\n className,\n fadeFrom = \"from-sidebar\",\n indicator = false,\n indicatorLabel,\n children,\n}: {\n className?: string\n /** from-* token utility for the fade colour (defaults to the sidebar bg). */\n fadeFrom?: string\n /**\n * Show the \"there's more down here\" pill while content remains below the\n * fold. Clicking it scrolls down one viewport.\n */\n indicator?: boolean\n /** Optional pill text beside the chevron — e.g. \"More\" or \"4 more\". */\n indicatorLabel?: React.ReactNode\n children: React.ReactNode\n}) {\n const scrollRef = React.useRef(null)\n const topRef = React.useRef(null)\n const bottomRef = React.useRef(null)\n // Start \"at the ends\" so nothing fades until the observer reports otherwise.\n const [atTop, setAtTop] = React.useState(true)\n const [atBottom, setAtBottom] = React.useState(true)\n\n React.useEffect(() => {\n const root = scrollRef.current\n const top = topRef.current\n const bottom = bottomRef.current\n if (!root || !top || !bottom) return\n\n const observer = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (entry.target === top) setAtTop(entry.isIntersecting)\n else if (entry.target === bottom) setAtBottom(entry.isIntersecting)\n }\n },\n { root }\n )\n observer.observe(top)\n observer.observe(bottom)\n return () => observer.disconnect()\n }, [])\n\n const scrollTowardsBottom = React.useCallback(() => {\n const root = scrollRef.current\n if (!root) return\n const reduceMotion = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\"\n ).matches\n root.scrollBy({\n top: Math.max(root.clientHeight * 0.8, 120),\n behavior: reduceMotion ? \"auto\" : \"smooth\",\n })\n }, [])\n\n return (\n \n \n \n {indicator ? (\n \n \n \n {indicatorLabel}\n \n \n ) : null}\n \n )\n}\n\nexport { ScrollFade }\n",
"type": "registry:component"
}
],
"type": "registry:block"
}