{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area (Base UI)",
  "description": "Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native overflow scrolling on touch-primary devices. Base UI flavor; adapted from Lina (https://lina.sameer.sh).",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "utils",
    "https://zeron-ui.vercel.app/r/shape-context.json",
    "https://zeron-ui.vercel.app/r/use-touch-primary.json"
  ],
  "files": [
    {
      "path": "src/components/ui/scroll-area.tsx",
      "content": "\"use client\";\n\n// Scroll area built on Base UI — shape-system scrollbar, native overflow\n// fallback on touch-primary devices. Scrollbar\n// machinery adapted from Lina by SameerJS6 (https://lina.sameer.sh); built on\n// @base-ui/react/scroll-area, whose scrollbars stay mounted while scrollable\n// and expose hover/scroll state as data attributes instead of a JS-driven\n// show/hide presence animation.\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n} from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport { useShape } from \"@/lib/shape-context\";\nimport { useTouchPrimary } from \"@/hooks/use-touch-primary\";\n\n// On touch-primary devices the Base UI machinery is skipped entirely in\n// favour of native overflow scrolling (better physics, momentum,\n// rubber-banding); the context lets the exported ScrollBar no-op there.\nconst ScrollAreaContext = createContext<boolean>(false);\n\ntype Orientation = \"vertical\" | \"horizontal\" | \"both\";\n\ninterface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  viewportClassName?: string;\n  /** Which axes get scrollbars. Defaults to `\"vertical\"`. */\n  orientation?: Orientation;\n}\n\nconst ScrollArea = forwardRef<\n  ComponentRef<typeof ScrollAreaPrimitive.Root>,\n  ScrollAreaProps\n>(\n  (\n    {\n      className,\n      children,\n      viewportClassName,\n      orientation = \"vertical\",\n      ...props\n    },\n    ref\n  ) => {\n    const isTouch = useTouchPrimary();\n\n    return (\n      <ScrollAreaContext.Provider value={isTouch}>\n        {isTouch ? (\n          <div\n            ref={ref}\n            role=\"group\"\n            data-slot=\"scroll-area\"\n            aria-roledescription=\"scroll area\"\n            className={cn(\"relative overflow-hidden\", className)}\n            {...props}\n          >\n            <div\n              data-slot=\"scroll-area-viewport\"\n              className={cn(\n                \"size-full rounded-[inherit]\",\n                orientation === \"vertical\" && \"overflow-y-auto\",\n                orientation === \"horizontal\" && \"overflow-x-auto\",\n                orientation === \"both\" && \"overflow-auto\",\n                viewportClassName\n              )}\n              tabIndex={0}\n            >\n              {children}\n            </div>\n          </div>\n        ) : (\n          <ScrollAreaPrimitive.Root\n            ref={ref}\n            data-slot=\"scroll-area\"\n            className={cn(\"relative overflow-hidden\", className)}\n            {...props}\n          >\n            <ScrollAreaPrimitive.Viewport\n              data-slot=\"scroll-area-viewport\"\n              className={cn(\"size-full rounded-[inherit]\", viewportClassName)}\n            >\n              {/* Content gives Base UI an intrinsic size to measure\n                  horizontal overflow against. */}\n              <ScrollAreaPrimitive.Content>\n                {children}\n              </ScrollAreaPrimitive.Content>\n            </ScrollAreaPrimitive.Viewport>\n            {orientation !== \"horizontal\" && <ScrollBar orientation=\"vertical\" />}\n            {orientation !== \"vertical\" && <ScrollBar orientation=\"horizontal\" />}\n            {orientation === \"both\" && <ScrollAreaPrimitive.Corner />}\n          </ScrollAreaPrimitive.Root>\n        )}\n      </ScrollAreaContext.Provider>\n    );\n  }\n);\n\nScrollArea.displayName = \"ScrollArea\";\n\nconst ScrollBar = forwardRef<\n  ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,\n  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => {\n  const isTouch = useContext(ScrollAreaContext);\n  const shape = useShape();\n\n  if (isTouch) return null;\n\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      data-slot=\"scroll-area-scrollbar\"\n      // Base UI keeps the scrollbar mounted while scrollable; visibility is\n      // a plain opacity transition off its hover/scroll state attributes,\n      // matching the cue fade — 160ms in, 120ms out (exits faster, per the\n      // animation guidelines); spring tokens are framer-motion configs and\n      // don't apply here.\n      className={cn(\n        // The 10px track stays as a comfortable hit target; the thumb inside\n        // it rests narrow and low-contrast, then widens + darkens on hover so\n        // it gets out of the way until you reach for it.\n        \"group/scrollbar absolute z-raised flex touch-none select-none\",\n        // Show immediately; on hide, wait out the 150ms thumb shrink before\n        // fading so the thumb visibly narrows back first instead of the fade\n        // masking it.\n        \"opacity-0 transition-opacity duration-moderate-exit ease-out delay-160\",\n        \"data-[hovering]:duration-moderate data-[scrolling]:duration-moderate\",\n        \"data-[hovering]:opacity-100 data-[scrolling]:opacity-100\",\n        \"data-[hovering]:delay-0 data-[scrolling]:delay-0\",\n        orientation === \"vertical\" && \"top-0 right-0 h-full w-2.5\",\n        orientation === \"horizontal\" && \"bottom-0 left-0 h-2.5 w-full flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className={cn(\n          \"relative bg-scrollbar-thumb transition-[background-color,width,height] duration-moderate ease-in-out\",\n          \"group-hover/scrollbar:bg-scrollbar-thumb-hover active:!bg-scrollbar-thumb-active\",\n          shape.bg,\n          // -translate nudges the thumb 2px off the container edge; the track\n          // (and its 10px hit target) stays flush so edge-throws still land.\n          orientation === \"vertical\" &&\n            \"mx-auto my-1 w-1 -translate-x-0.5 h-[var(--scroll-area-thumb-height)] group-hover/scrollbar:w-1.5\",\n          orientation === \"horizontal\" &&\n            \"my-auto mx-1 h-1 -translate-y-0.5 w-[var(--scroll-area-thumb-width)] group-hover/scrollbar:h-1.5\"\n        )}\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n});\n\nScrollBar.displayName = \"ScrollBar\";\n\nexport { ScrollArea, ScrollBar };\nexport type { ScrollAreaProps };\n",
      "type": "registry:ui",
      "target": "components/ui/scroll-area.tsx"
    }
  ],
  "type": "registry:ui"
}