Feat: add scroll-area component

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

@@ -18,6 +18,7 @@ import {
   Navbar,
   Popover,
   RangePicker,
+  ScrollArea,
   Search,
   Select,
   Sheet,
@@ -2260,6 +2261,116 @@ 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 style={{ height: '200px', width: '300px' }}>
+                <ScrollArea.Viewport>
+                  <Flex direction='column' gap={2}>
+                    {Array.from({ length: 20 }, (_, i) => (
+                      <Text key={i} size='small'>
+                        Item {i + 1}
+                      </Text>
+                    ))}
+                  </Flex>
+                </ScrollArea.Viewport>
+                <ScrollArea.Scrollbar orientation='vertical' />
+              </ScrollArea>
+            </Flex>
+
+            {/* Basic Horizontal ScrollArea */}
+            <Flex direction='column' gap={3}>
+              <Text size='small'>Basic Horizontal ScrollArea:</Text>
+              <ScrollArea style={{ height: '150px', width: '300px' }}>
+                <ScrollArea.Viewport>
+                  <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.Viewport>
+                <ScrollArea.Scrollbar orientation='horizontal' />
+              </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' }}>
+                <ScrollArea.Viewport>
+                  <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.Viewport>
+                <ScrollArea.Scrollbar orientation='vertical' />
+                <ScrollArea.Scrollbar orientation='horizontal' />
+              </ScrollArea>
+            </Flex>
+
+            {/* Long Content Example */}
+            <Flex direction='column' gap={3}>
+              <Text size='small'>Long Content Example:</Text>
+              <ScrollArea style={{ height: '250px', width: '400px' }}>
+                <ScrollArea.Viewport>
+                  <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.Viewport>
+                <ScrollArea.Scrollbar orientation='vertical' />
+              </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,152 @@
+'use client';
+
+export const preview = {
+  type: 'code',
+  code: `
+<ScrollArea style={{ height: '200px', width: '100%' }}>
+  <ScrollArea.Viewport>
+    <Flex direction="column" gap={2}>
+      {Array.from({ length: 20 }, (_, i) => (
+        <Text key={i} size="small">
+          Item {i + 1}
+        </Text>
+      ))}
+    </Flex>
+  </ScrollArea.Viewport>
+  <ScrollArea.Scrollbar orientation="vertical" />
+</ScrollArea>`
+};
+
+export const verticalDemo = {
+  type: 'code',
+  code: `
+<ScrollArea style={{ height: '200px', width: '300px' }}>
+  <ScrollArea.Viewport>
+    <Flex direction="column" gap={2}>
+      {Array.from({ length: 30 }, (_, i) => (
+        <Text key={i} size="small">
+          Item {i + 1}
+        </Text>
+      ))}
+    </Flex>
+  </ScrollArea.Viewport>
+  <ScrollArea.Scrollbar orientation="vertical" />
+</ScrollArea>`
+};
+
+export const horizontalDemo = {
+  type: 'code',
+  code: `
+<ScrollArea style={{ height: '150px', width: '300px' }}>
+  <ScrollArea.Viewport>
+    <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.Viewport>
+  <ScrollArea.Scrollbar orientation="horizontal" />
+</ScrollArea>`
+};
+
+export const bothScrollbarsDemo = {
+  type: 'code',
+  code: `
+<ScrollArea style={{ height: '200px', width: '300px' }}>
+  <ScrollArea.Viewport>
+    <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.Viewport>
+  <ScrollArea.Scrollbar orientation="vertical" />
+  <ScrollArea.Scrollbar orientation="horizontal" />
+</ScrollArea>`
+};
+
+export const typeDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'Auto (default)',
+      code: `
+<ScrollArea style={{ height: '200px', width: '300px' }} type="auto">
+  <ScrollArea.Viewport>
+    <Flex direction="column" gap={2}>
+      {Array.from({ length: 20 }, (_, i) => (
+        <Text key={i} size="small">
+          Item {i + 1}
+        </Text>
+      ))}
+    </Flex>
+  </ScrollArea.Viewport>
+  <ScrollArea.Scrollbar orientation="vertical" />
+</ScrollArea>`
+    },
+    {
+      name: 'Always',
+      code: `
+<ScrollArea style={{ height: '200px', width: '300px' }} type="always">
+  <ScrollArea.Viewport>
+    <Flex direction="column" gap={2}>
+      {Array.from({ length: 20 }, (_, i) => (
+        <Text key={i} size="small">
+          Item {i + 1}
+        </Text>
+      ))}
+    </Flex>
+  </ScrollArea.Viewport>
+  <ScrollArea.Scrollbar orientation="vertical" />
+</ScrollArea>`
+    },
+    {
+      name: 'Hover',
+      code: `
+<ScrollArea style={{ height: '200px', width: '300px' }} type="hover">
+  <ScrollArea.Viewport>
+    <Flex direction="column" gap={2}>
+      {Array.from({ length: 20 }, (_, i) => (
+        <Text key={i} size="small">
+          Item {i + 1}
+        </Text>
+      ))}
+    </Flex>
+  </ScrollArea.Viewport>
+  <ScrollArea.Scrollbar orientation="vertical" />
+</ScrollArea>`
+    },
+    {
+      name: 'Scroll',
+      code: `
+<ScrollArea style={{ height: '200px', width: '300px' }} type="scroll">
+  <ScrollArea.Viewport>
+    <Flex direction="column" gap={2}>
+      {Array.from({ length: 20 }, (_, i) => (
+        <Text key={i} size="small">
+          Item {i + 1}
+        </Text>
+      ))}
+    </Flex>
+  </ScrollArea.Viewport>
+  <ScrollArea.Scrollbar orientation="vertical" />
+</ScrollArea>`
+    }
+  ]
+};

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

@@ -0,0 +1,97 @@
+---
+title: ScrollArea
+description: A customizable scrollable container component with smooth scrolling, hover effects, and automatic corner handling for both vertical and horizontal scrollbars.
+---
+
+import {
+  preview,
+  verticalDemo,
+  horizontalDemo,
+  bothScrollbarsDemo,
+  typeDemo,
+} from "./demo.ts";
+
+<Demo data={preview} />
+
+## Usage
+
+```tsx
+import { ScrollArea } from "@raystack/apsara";
+```
+
+## Component Structure
+
+The ScrollArea component uses a composite pattern, providing modular sub-components for flexible scrollable containers:
+
+- `ScrollArea` - Root container that manages scrolling state
+- `ScrollArea.Viewport` - The scrollable content area
+- `ScrollArea.Scrollbar` - The scrollbar track and thumb (vertical or horizontal)
+- `ScrollArea.Corner` - The corner element (automatically added when both scrollbars are present)
+
+## ScrollArea Props
+
+The ScrollArea root 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" />
+
+### ScrollArea.Viewport Props
+
+The viewport is the scrollable content container. It 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="ScrollAreaViewportProps" />
+
+### ScrollArea.Scrollbar Props
+
+The scrollbar component renders the scrollbar track and thumb. When both vertical and horizontal scrollbars are present, the Corner component is automatically added. It extends standard HTML div attributes, so you can use props like `style`, `id`, and other standard HTML attributes.
+
+<auto-type-table path="./props.ts" name="ScrollAreaScrollbarProps" />
+
+### ScrollArea.Corner Props
+
+The corner component fills the space where vertical and horizontal scrollbars meet. It's automatically added when both scrollbars are present, but you can also add it manually if needed. It extends standard HTML div attributes, so you can use props like `style`, `id`, and other standard HTML attributes.
+
+<auto-type-table path="./props.ts" name="ScrollAreaCornerProps" />
+
+## Examples
+
+### Vertical Scrolling
+
+A basic vertical scroll area with a list of items.
+
+<Demo data={verticalDemo} />
+
+### Horizontal Scrolling
+
+A horizontal scroll area for wide content like tables or card grids.
+
+<Demo data={horizontalDemo} />
+
+### Both Scrollbars
+
+When both vertical and horizontal scrollbars are present, the Corner component is automatically added to fill the intersection.
+
+<Demo data={bothScrollbarsDemo} />
+
+### Scrollbar Type
+
+Control when the scrollbar appears using the `type` prop.
+
+<Demo data={typeDemo} />
+
+## Features
+
+- **Smooth Scrolling**: Custom scrollbar with smooth transitions
+- **Hover Effects**: Scrollbar expands from 4px to 6px on hover
+- **Auto Corner**: Automatically adds corner element when both scrollbars are present
+- **Scroll Chaining**: Scroll continues to parent page when reaching container boundaries
+- **Customizable**: Full control over scrollbar visibility and behavior
+
+## Accessibility
+
+The ScrollArea component is built on Radix UI primitives and provides:
+
+- Keyboard navigation support
+- Screen reader compatibility
+- Proper ARIA attributes
+- Focus management
+