{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <edu@smoothui.dev>","css":{},"dependencies":["@base-ui/react"],"description":"Styled Scroll Area for SmoothUI with Base UI / Radix twins and custom scrollbars.","devDependencies":[],"files":[{"content":"\"use client\";\n\n/**\n * SmoothUI Scroll Area — Base UI twin (default).\n * Overlay scrollbar: thin at rest, widens on track hover; fades in while\n * hovering/scrolling (Fluid Functionalism scrollbar cues).\n */\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport type { ComponentProps } from \"react\";\n\nexport interface ScrollAreaProps {\n  /** Scrollable content */\n  children?: React.ReactNode;\n  /** Optional CSS class names for the root */\n  className?: string;\n  /** Show a horizontal scrollbar when content overflows (default true) */\n  horizontal?: boolean;\n  /** Fade content at scroll edges via mask (default false) */\n  scrollFade?: boolean | \"x\" | \"y\";\n  /** Show a vertical scrollbar when content overflows (default true) */\n  vertical?: boolean;\n  /** Optional CSS class names for the viewport */\n  viewportClassName?: string;\n}\n\nexport type ScrollAreaRootProps = Omit<\n  ComponentProps<typeof ScrollAreaPrimitive.Root>,\n  \"className\"\n> & { className?: string };\nexport type ScrollAreaViewportProps = Omit<\n  ComponentProps<typeof ScrollAreaPrimitive.Viewport>,\n  \"className\"\n> & { className?: string };\nexport type ScrollAreaContentProps = Omit<\n  ComponentProps<typeof ScrollAreaPrimitive.Content>,\n  \"className\"\n> & { className?: string };\nexport type ScrollAreaScrollbarProps = Omit<\n  ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>,\n  \"className\"\n> & { className?: string };\nexport type ScrollAreaThumbProps = Omit<\n  ComponentProps<typeof ScrollAreaPrimitive.Thumb>,\n  \"className\"\n> & { className?: string };\nexport type ScrollAreaCornerProps = Omit<\n  ComponentProps<typeof ScrollAreaPrimitive.Corner>,\n  \"className\"\n> & { className?: string };\n\nexport const ScrollAreaRoot = ({\n  className,\n  ...props\n}: ScrollAreaRootProps) => (\n  <ScrollAreaPrimitive.Root\n    className={cn(\"relative overflow-hidden\", className)}\n    data-slot=\"scroll-area\"\n    {...props}\n  />\n);\n\nexport const ScrollAreaViewport = ({\n  className,\n  ...props\n}: ScrollAreaViewportProps) => (\n  <ScrollAreaPrimitive.Viewport\n    className={cn(\n      \"size-full overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring/50\",\n      className\n    )}\n    data-slot=\"scroll-area-viewport\"\n    {...props}\n  />\n);\n\nexport const ScrollAreaContent = ({\n  className,\n  ...props\n}: ScrollAreaContentProps) => (\n  <ScrollAreaPrimitive.Content\n    className={cn(className)}\n    data-slot=\"scroll-area-content\"\n    {...props}\n  />\n);\n\nexport const ScrollAreaScrollbar = ({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaScrollbarProps) => (\n  <ScrollAreaPrimitive.Scrollbar\n    className={cn(\n      \"group/scrollbar pointer-events-none z-10 m-px flex touch-none select-none opacity-0 transition-opacity duration-150 data-hovering:pointer-events-auto data-scrolling:pointer-events-auto data-hovering:opacity-100 data-scrolling:opacity-100 data-scrolling:duration-0 motion-reduce:transition-none\",\n      orientation === \"vertical\" && \"w-2.5 flex-col p-px\",\n      orientation === \"horizontal\" && \"h-2.5 flex-row p-px\",\n      className\n    )}\n    data-slot=\"scroll-area-scrollbar\"\n    orientation={orientation}\n    {...props}\n  />\n);\n\nexport const ScrollAreaThumb = ({\n  className,\n  ...props\n}: ScrollAreaThumbProps) => (\n  <ScrollAreaPrimitive.Thumb\n    className={cn(\n      \"relative flex-1 rounded-full bg-foreground/20 transition-[background-color,width,height] duration-160 ease-in-out before:absolute before:top-1/2 before:left-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2 group-hover/scrollbar:bg-foreground/35 group-active/scrollbar:bg-foreground/45\",\n      \"[[data-orientation=vertical]_&]:mx-auto [[data-orientation=vertical]_&]:my-1 [[data-orientation=vertical]_&]:w-1 [[data-orientation=vertical]_&]:-translate-x-0.5 [[data-orientation=vertical]_&]:group-hover/scrollbar:w-1.5\",\n      \"[[data-orientation=horizontal]_&]:mx-1 [[data-orientation=horizontal]_&]:my-auto [[data-orientation=horizontal]_&]:h-1 [[data-orientation=horizontal]_&]:-translate-y-0.5 [[data-orientation=horizontal]_&]:group-hover/scrollbar:h-1.5\",\n      className\n    )}\n    data-slot=\"scroll-area-thumb\"\n    {...props}\n  />\n);\n\nexport const ScrollAreaCorner = ({\n  className,\n  ...props\n}: ScrollAreaCornerProps) => (\n  <ScrollAreaPrimitive.Corner\n    className={cn(className)}\n    data-slot=\"scroll-area-corner\"\n    {...props}\n  />\n);\n\nconst scrollFadeClass = (scrollFade: ScrollAreaProps[\"scrollFade\"]) => {\n  if (!scrollFade) {\n    return;\n  }\n  if (scrollFade === \"x\") {\n    return \"scroll-fade-x\";\n  }\n  return \"scroll-fade\";\n};\n\n/**\n * SmoothUI Scroll Area — Base UI twin (default).\n * Convenience API; use the compound parts for custom layouts.\n */\nexport default function ScrollArea({\n  children,\n  className,\n  horizontal = true,\n  scrollFade = false,\n  vertical = true,\n  viewportClassName,\n}: ScrollAreaProps) {\n  return (\n    <ScrollAreaRoot className={className}>\n      <ScrollAreaViewport\n        className={cn(scrollFadeClass(scrollFade), viewportClassName)}\n      >\n        <ScrollAreaContent>{children}</ScrollAreaContent>\n      </ScrollAreaViewport>\n      {vertical ? (\n        <ScrollAreaScrollbar orientation=\"vertical\">\n          <ScrollAreaThumb />\n        </ScrollAreaScrollbar>\n      ) : null}\n      {horizontal ? (\n        <ScrollAreaScrollbar orientation=\"horizontal\">\n          <ScrollAreaThumb />\n        </ScrollAreaScrollbar>\n      ) : null}\n      {vertical && horizontal ? <ScrollAreaCorner /> : null}\n    </ScrollAreaRoot>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/scroll-area/index.tsx","type":"registry:ui"}],"name":"scroll-area","registryDependencies":[],"title":"Scroll Area","type":"registry:ui"}