feat: migrate scroll-area to base ui

[rohanchkrabrty]

Description

Breaking Changes

• type prop options changed from 'auto' | 'always' | 'scroll' | 'hover' to 'always' | 'hover' | 'scroll'
• Default type changed from auto to hover

Changes
Import from @base-ui/react instead of radix-ui
Implemented style changes with Base UI's data attributes:

Docs & Tests
Updated tests for new type options and default
Updated props documentation with new type values

Summary by CodeRabbit

• New Features

  • Added className and style props to ScrollArea for enhanced customization.
  • Added render prop for custom ScrollArea rendering.

• Bug Fixes

  • Removed auto type option; ScrollArea now supports always, hover, and scroll types only.
  • Changed default scrollbar type from auto to hover.

• Documentation

  • Updated examples and documentation to reflect the new default scrollbar behavior.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Feb 4, 2026 8:33pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The scroll-area component is being refactored to remove the 'auto' type option and replace it with 'hover' as the default. The ScrollAreaRoot component is consolidated into a new primary ScrollArea component, and documentation and tests are updated to reflect the API changes.

Changes

Cohort / File(s)	Summary
Documentation apps/www/src/content/docs/components/scroll-area/demo.ts, apps/www/src/content/docs/components/scroll-area/index.mdx, apps/www/src/content/docs/components/scroll-area/props.ts	Updated demo type options from ['auto', 'always', 'scroll', 'hover'] to ['always', 'hover', 'scroll']; changed default from 'auto' to 'hover'; renamed interface from ScrollAreaRootProps to ScrollAreaProps; added className and style props; introduced render prop; removed accessibility section from docs.
Component Refactoring packages/raystack/components/scroll-area/scroll-area.tsx, packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx, packages/raystack/components/scroll-area/scroll-area-root.tsx	Created new primary ScrollArea component with forwardRef and type support; removed ScrollAreaRoot component; updated ScrollAreaScrollbar to accept type prop and use base UI primitives; changed forwardRef generic from ComponentRef to HTMLDivElement.
Styling Updates packages/raystack/components/scroll-area/scroll-area.module.css	Enhanced scrollbar transitions to include width, height, and opacity; added opacity control rules for scrollbar states (\.scrollbar-always\\, \.scrollbar-hover\\, \.scrollbar-scroll\\) with data attribute selectors.
Exports & Tests packages/raystack/components/scroll-area/index.ts, packages/raystack/components/scroll-area/__tests__/scroll-area.test.tsx, packages/raystack/index.tsx	Updated exported types from ScrollAreaRootProps to ScrollAreaProps; added ScrollAreaScrollbar and ScrollAreaType exports; updated tests to remove 'auto' type and use 'hover' as default; reordered export in main index.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A hoppy hop through scroll refrain,
Where 'auto' fades and 'hover' reigns,
New ScrollArea takes the stage,
Components dance on every page,
Default kindly shows the way! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch base-scrollarea

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}