{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "description": "A scrolling region with an overlay scrollbar that shows while in use.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/scroll-area.tsx",
      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { Ref } from \"react\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  durations,\n  radii,\n  space,\n  strokes,\n} from \"@/lib/constella/tokens.stylex\";\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\nconst horizontal = \":is([data-orientation='horizontal'])\";\n// Shown while the pointer is over the area or it's scrolling, like an overlay scrollbar.\nconst shown = \":is([data-hovering], [data-scrolling])\";\n\nconst styles = stylex.create({\n  root: {\n    position: \"relative\",\n  },\n  viewport: {\n    borderStartStartRadius: \"inherit\",\n    borderStartEndRadius: \"inherit\",\n    borderEndStartRadius: \"inherit\",\n    borderEndEndRadius: \"inherit\",\n    height: \"100%\",\n    width: \"100%\",\n  },\n  scrollbar: {\n    display: \"flex\",\n    flexDirection: { default: \"row\", [horizontal]: \"column\" },\n    height: { default: \"100%\", [horizontal]: space.popup },\n    opacity: { default: 0, [shown]: 1 },\n    paddingBlockEnd: strokes.border,\n    paddingBlockStart: strokes.border,\n    paddingInlineEnd: strokes.border,\n    paddingInlineStart: strokes.border,\n    touchAction: \"none\",\n    transitionDuration: durations.hover,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: \"ease\",\n    userSelect: \"none\",\n    width: { default: space.popup, [horizontal]: \"100%\" },\n  },\n  thumb: {\n    backgroundColor: colors.border,\n    borderStartStartRadius: radii.full,\n    borderStartEndRadius: radii.full,\n    borderEndStartRadius: radii.full,\n    borderEndEndRadius: radii.full,\n    flex: 1,\n    position: \"relative\",\n  },\n});\n\n/** Renders the viewport, a vertical scrollbar unless `hideScrollbar`, and the corner around its children. `viewportRef` and `viewportSx` reach the element that scrolls, for a virtualizer to watch or a scroll fade. */\nfunction ScrollArea({\n  children,\n  hideScrollbar = false,\n  sx,\n  viewportRef,\n  viewportSx,\n  ...props\n}: Styled<ScrollAreaPrimitive.Root.Props> & {\n  hideScrollbar?: boolean;\n  viewportRef?: Ref<HTMLDivElement>;\n  viewportSx?: stylex.StyleXStyles;\n}) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      {...props}\n      {...stylex.props(styles.root, sx)}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        ref={viewportRef}\n        {...stylex.props(styles.viewport, viewportSx)}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      {!hideScrollbar && <ScrollBar />}\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  orientation = \"vertical\",\n  sx,\n  ...props\n}: Styled<ScrollAreaPrimitive.Scrollbar.Props>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-orientation={orientation}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n      {...stylex.props(styles.scrollbar, sx)}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        {...stylex.props(styles.thumb)}\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/scroll-area/index.md",
  "type": "registry:ui"
}