Feat: add scroll-area component

apps/www/src/app/examples/page.tsx

@@ -18,6 +18,7 @@ import {
   Navbar,
   Popover,
   RangePicker,
+  ScrollArea,
   Search,
   Select,
   Sheet,
@@ -1575,7 +1576,6 @@ const Page = () => {
 
                   <TextArea
                     label='Example Text Area'
-                    placeholder='Type something...'
                     value={inputValue}
                     onChange={e => setInputValue(e.target.value)}
                   />
@@ -1710,7 +1710,6 @@ const Page = () => {
 
                 <TextArea
                   label='Example Text Area'
-                  placeholder='Type something...'
                   value={inputValue}
                   onChange={e => setInputValue(e.target.value)}
                 />
@@ -2260,6 +2259,106 @@ const Page = () => {
             </Flex>
           </Flex>
 
+          <Text
+            size='large'
+            weight='medium'
+            style={{ marginTop: '32px', marginBottom: '16px' }}
+          >
+            ScrollArea Examples
+          </Text>
+
+          <Flex direction='column' gap={6}>
+            {/* Basic Vertical ScrollArea */}
+            <Flex direction='column' gap={3}>
+              <Text size='small'>Basic Vertical ScrollArea:</Text>
+              <ScrollArea
+                type='scroll'
+                style={{ height: '200px', width: '300px' }}
+              >
+                <Flex direction='column' gap={2}>
+                  {Array.from({ length: 20 }, (_, i) => (
+                    <Text key={i} size='small'>
+                      Item {i + 1}
+                    </Text>
+                  ))}
+                </Flex>
+              </ScrollArea>
+            </Flex>
+
+            {/* Basic Horizontal ScrollArea */}
+            <Flex direction='column' gap={3}>
+              <Text size='small'>Basic Horizontal ScrollArea:</Text>
+              <ScrollArea style={{ height: '150px', width: '300px' }}>
+                <Flex direction='row' gap={4} style={{ width: '600px' }}>
+                  {Array.from({ length: 10 }, (_, i) => (
+                    <Flex
+                      key={i}
+                      direction='column'
+                      gap={2}
+                      style={{ minWidth: '150px' }}
+                    >
+                      <Text weight='medium' size='small'>
+                        Column {i + 1}
+                      </Text>
+                      <Text size='small' variant='secondary'>
+                        Content here
+                      </Text>
+                    </Flex>
+                  ))}
+                </Flex>
+              </ScrollArea>
+            </Flex>
+
+            {/* Both Vertical and Horizontal Scrollbars */}
+            <Flex direction='column' gap={3}>
+              <Text size='small'>
+                Both Vertical and Horizontal Scrollbars (Corner auto-added):
+              </Text>
+              <ScrollArea style={{ height: '200px', width: '300px' }}>
+                <Flex direction='row' gap={4} style={{ width: '800px' }}>
+                  {Array.from({ length: 15 }, (_, i) => (
+                    <Flex
+                      key={i}
+                      direction='column'
+                      gap={2}
+                      style={{ minWidth: '180px' }}
+                    >
+                      <Text weight='medium' size='small'>
+                        Column {i + 1}
+                      </Text>
+                      {Array.from({ length: 20 }, (_, j) => (
+                        <Text key={j} size='small' variant='secondary'>
+                          Row {j + 1}
+                        </Text>
+                      ))}
+                    </Flex>
+                  ))}
+                </Flex>
+              </ScrollArea>
+            </Flex>
+
+            {/* Auto Scroll (default) */}
+            <Flex direction='column' gap={3}>
+              <Text size='small'>Auto Scroll (default):</Text>
+              <ScrollArea style={{ height: '250px', width: '400px' }}>
+                <Flex direction='column' gap={4}>
+                  {Array.from({ length: 50 }, (_, i) => (
+                    <Flex key={i} direction='column' gap={2}>
+                      <Text weight='medium' size='small'>
+                        Section {i + 1}
+                      </Text>
+                      <Text size='small' variant='secondary'>
+                        This is some content for section {i + 1}. The scrollbar
+                        will appear on hover and overlay the content without
+                        affecting the layout.
+                      </Text>
+                    </Flex>
+                  ))}
+                </Flex>
+              </ScrollArea>
+            </Flex>
+          </Flex>
+
           <Flex justify='center' style={{ marginTop: 40 }}>
             <Button type='submit'>Submit button</Button>
           </Flex>

apps/www/src/content/docs/components/scroll-area/demo.ts

@@ -0,0 +1,155 @@
+'use client';
+
+import { getPropsString } from '@/lib/utils';
+
+export const getCode = (props: any) => {
+  const content = `<Flex direction="column" gap={2}>
+    {Array.from({ length: 20 }, (_, i) => (
+      <Text key={i} size="small">
+        Item {i + 1}
+      </Text>
+    ))}
+  </Flex>`;
+
+  return `<ScrollArea${getPropsString(props)} style={{ height: '200px', width: '300px' }}>
+  ${content}
+</ScrollArea>`;
+};
+
+export const playground = {
+  type: 'playground',
+  controls: {
+    type: {
+      type: 'select',
+      options: ['auto', 'always', 'scroll', 'hover'],
+      defaultValue: 'auto'
+    }
+  },
+  getCode
+};
+
+export const preview = {
+  type: 'code',
+  code: `
+<ScrollArea style={{ height: '200px', width: '100%' }}>
+  <Flex direction="column" gap={2}>
+    {Array.from({ length: 20 }, (_, i) => (
+      <Text key={i} size="small">
+        Item {i + 1}
+      </Text>
+    ))}
+  </Flex>
+</ScrollArea>`
+};
+
+export const verticalDemo = {
+  type: 'code',
+  code: `
+<ScrollArea style={{ height: '200px', width: '300px' }}>
+  <Flex direction="column" gap={2}>
+    {Array.from({ length: 30 }, (_, i) => (
+      <Text key={i} size="small">
+        Item {i + 1}
+      </Text>
+    ))}
+  </Flex>
+</ScrollArea>`
+};
+
+export const horizontalDemo = {
+  type: 'code',
+  code: `
+<ScrollArea style={{ height: '150px', width: '300px' }}>
+  <Flex direction="row" gap={4} style={{ width: '600px' }}>
+    {Array.from({ length: 10 }, (_, i) => (
+      <Flex key={i} direction="column" gap={2} style={{ minWidth: '150px' }}>
+        <Text weight="medium" size="small">
+          Column {i + 1}
+        </Text>
+        <Text size="small" variant="secondary">
+          Content here
+        </Text>
+      </Flex>
+    ))}
+  </Flex>
+</ScrollArea>`
+};
+
+export const bothScrollbarsDemo = {
+  type: 'code',
+  code: `
+<ScrollArea style={{ height: '200px', width: '300px' }}>
+  <Flex direction="row" gap={4} style={{ width: '800px' }}>
+    {Array.from({ length: 15 }, (_, i) => (
+      <Flex key={i} direction="column" gap={2} style={{ minWidth: '180px' }}>
+        <Text weight="medium" size="small">
+          Column {i + 1}
+        </Text>
+        {Array.from({ length: 20 }, (_, j) => (
+          <Text key={j} size="small" variant="secondary">
+            Row {j + 1}
+          </Text>
+        ))}
+      </Flex>
+    ))}
+  </Flex>
+</ScrollArea>`
+};
+
+export const typeDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'Auto (default)',
+      code: `
+<ScrollArea style={{ height: '200px', width: '300px' }} type="auto">
+  <Flex direction="column" gap={2}>
+    {Array.from({ length: 20 }, (_, i) => (
+      <Text key={i} size="small">
+        Item {i + 1}
+      </Text>
+    ))}
+  </Flex>
+</ScrollArea>`
+    },
+    {
+      name: 'Always',
+      code: `
+<ScrollArea style={{ height: '200px', width: '300px' }} type="always">
+  <Flex direction="column" gap={2}>
+    {Array.from({ length: 20 }, (_, i) => (
+      <Text key={i} size="small">
+        Item {i + 1}
+      </Text>
+    ))}
+  </Flex>
+</ScrollArea>`
+    },
+    {
+      name: 'Hover',
+      code: `
+<ScrollArea style={{ height: '200px', width: '300px' }} type="hover">
+  <Flex direction="column" gap={2}>
+    {Array.from({ length: 20 }, (_, i) => (
+      <Text key={i} size="small">
+        Item {i + 1}
+      </Text>
+    ))}
+  </Flex>
+</ScrollArea>`
+    },
+    {
+      name: 'Scroll',
+      code: `
+<ScrollArea style={{ height: '200px', width: '300px' }} type="scroll">
+  <Flex direction="column" gap={2}>
+    {Array.from({ length: 20 }, (_, i) => (
+      <Text key={i} size="small">
+        Item {i + 1}
+      </Text>
+    ))}
+  </Flex>
+</ScrollArea>`
+    }
+  ]
+};

apps/www/src/content/docs/components/scroll-area/index.mdx

@@ -0,0 +1,73 @@
+---
+title: Scroll Area
+description: A customizable scrollable container component with smooth scrolling, hover effects, and automatic scrollbar handling. Both vertical and horizontal scrollbars are automatically rendered and shown based on content overflow.
+tag: new
+---
+
+import {
+  playground,
+  preview,
+  verticalDemo,
+  horizontalDemo,
+  bothScrollbarsDemo,
+  typeDemo,
+} from "./demo.ts";
+
+<Demo data={playground} />
+
+## Usage
+
+```tsx
+import { ScrollArea } from "@raystack/apsara";
+```
+
+## Scroll Area Props
+
+The Scroll Area component extends standard HTML div attributes, so you can use props like `style`, `id`, `onClick`, and other standard HTML attributes in addition to the props listed below.
+
+<auto-type-table path="./props.ts" name="ScrollAreaRootProps" />
+
+## Examples
+
+### Vertical Scrolling
+
+A basic vertical scroll area with a list of items. The scrollbar automatically appears when content overflows vertically.
+
+<Demo data={verticalDemo} />
+
+### Horizontal Scrolling
+
+A horizontal scroll area for wide content like tables or card grids. The scrollbar automatically appears when content overflows horizontally.
+
+<Demo data={horizontalDemo} />
+
+### Both Scrollbars
+
+When content overflows both vertically and horizontally, both scrollbars appear automatically along with the corner element.
+
+<Demo data={bothScrollbarsDemo} />
+
+### Scrollbar Type
+
+Control when the scrollbar appears using the `type` prop.
+
+<Demo data={typeDemo} />
+
+## Features
+
+- **Automatic Scrollbars**: Both vertical and horizontal scrollbars are always rendered and automatically shown when content overflows
+- **Smooth Scrolling**: Custom scrollbar with smooth transitions
+- **Hover Effects**: Scrollbar expands from 4px to 6px on hover
+- **Auto Corner**: Corner element is automatically added when both scrollbars are visible
+- **Scroll Chaining**: Scroll continues to parent page when reaching container boundaries
+- **Customizable Visibility**: Control when scrollbars appear using the `type` prop
+
+## Accessibility
+
+The Scroll Area component is built on Radix UI primitives and provides:
+
+- Keyboard navigation support
+- Screen reader compatibility
+- Proper ARIA attributes
+- Focus management
+

apps/www/src/content/docs/components/scroll-area/props.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+
+export interface ScrollAreaRootProps {
+  /**
+   * Controls when the scrollbar appears.
+   * - `auto`: Scrollbar appears only when content overflows (default)
+   * - `always`: Scrollbar is always visible
+   * - `scroll`: Scrollbar appears during scrolling
+   * - `hover`: Scrollbar appears on hover
+   * @default 'auto'
+   */
+  type?: 'auto' | 'always' | 'scroll' | 'hover';
+
+  /**
+   * Custom className for the root element.
+   */
+  className?: string;
+
+  /**
+   * Inline styles for the root element.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * The content to be scrolled. Both vertical and horizontal scrollbars are automatically rendered and shown when content overflows.
+   */
+  children?: React.ReactNode;
+}