{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scroll-area", "title": "Scroll Area", "description": "The scrollbar fades in and its thumb springs thicker when you reach for it.", "dependencies": [ "@ui-sdk/core@0.1.0-beta.2", "@ui-sdk/react@0.1.0-beta.2" ], "registryDependencies": [ "@keyframery/motion" ], "files": [ { "path": "registry/components/keyframery/primitives/scroll-area.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/scroll-area`: same parts, same props. Swap the import and keep your code.\n This file adds motion only. Colours, radii, shadows and spacing stay yours.\n - The scrollbar fades in when it should show, and its thumb slides in from the edge.\n - The thumb is slim at rest and thickens on a spring while the pointer is on its track or it is\n dragged. Give the thumb its full (hovered) thickness; at rest it is drawn at half. A\n `data-hovered` attribute on the scrollbar thickens it too, for scripted demos. */\n\nimport {\n ScrollAreaScrollbar as ScrollAreaScrollbarPart,\n ScrollAreaThumb as ScrollAreaThumbPart,\n} from \"@ui-sdk/react/scroll-area\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/scroll-area\"\n\nfunction ScrollAreaScrollbar({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ScrollAreaThumb({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { ScrollAreaScrollbar, ScrollAreaThumb }\n", "type": "registry:component", "target": "components/keyframery/primitives/scroll-area.tsx" }, { "path": "registry/components/keyframery/scroll-area.tsx", "content": "\"use client\"\n\n/* Styled scroll area: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n ScrollArea as ScrollAreaRoot,\n ScrollAreaContent as ScrollAreaContentPart,\n ScrollAreaCorner as ScrollAreaCornerPart,\n ScrollAreaScrollbar as ScrollAreaScrollbarPart,\n ScrollAreaScrollToEnd as ScrollAreaScrollToEndPart,\n ScrollAreaThumb as ScrollAreaThumbPart,\n ScrollAreaViewport as ScrollAreaViewportPart,\n} from \"@/components/keyframery/primitives/scroll-area\"\nexport { createScrollAreaController } from \"@/components/keyframery/primitives/scroll-area\"\nimport { cn } from \"@/lib/utils\"\n\n/* Give it a size. The focus ring of the viewport is drawn here, outside the fades. */\nfunction ScrollArea({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The scroller. Its edges fade as far as the content reaches past them, up to 24px:\n UI SDK writes those distances on the root and the viewport takes them with `inherit`. */\nfunction ScrollAreaViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ScrollAreaContent({\n className,\n ...props\n}: React.ComponentProps) {\n return \n}\n\n/* Hidden until the pointer is over the area or it scrolls. */\nfunction ScrollAreaScrollbar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/* A pill, drawn here at its full thickness. The primitive keeps it slim until the pointer is\n on its track or it is dragged. */\nfunction ScrollAreaThumb({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ScrollAreaCorner({\n className,\n ...props\n}: React.ComponentProps) {\n return \n}\n\n/* \"Jump to latest\": a small key that rises from the bottom edge once the view leaves the end. */\nfunction ScrollAreaScrollToEnd({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n ScrollArea,\n ScrollAreaContent,\n ScrollAreaCorner,\n ScrollAreaScrollbar,\n ScrollAreaScrollToEnd,\n ScrollAreaThumb,\n ScrollAreaViewport,\n}\n", "type": "registry:component", "target": "components/keyframery/scroll-area.tsx" } ], "type": "registry:component" }