@pagedotapp/page-scroll-list/README.md

PageScrollList - A reusable React component

# PageScrollList

A reusable scrolllist component for React applications.

## Installation

```bash
npm install @pagedotapp/page-scroll-list
```

## Usage

```tsx
import { PageScrollList } from "@pagedotapp/page-scroll-list"

function App() {
	return (
		<PageScrollList variant="primary" size="medium">
			PageScrollList Content
		</PageScrollList>
	)
}
```

## Props

| Prop        | Type                                    | Default     | Description               |
| ----------- | --------------------------------------- | ----------- | ------------------------- |
| `children`  | `React.ReactNode`                       | -           | Component children        |
| `className` | `string`                                | `''`        | Additional CSS class name |
| `variant`   | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant         |
| `size`      | `'small' \| 'medium' \| 'large'`        | `'medium'`  | Component size            |
| `disabled`  | `boolean`                               | `false`     | Disabled state            |

## Examples

### Variants

```tsx
<PageScrollList variant="default">Default</PageScrollList>
<PageScrollList variant="primary">Primary</PageScrollList>
<PageScrollList variant="secondary">Secondary</PageScrollList>
```

### Sizes

```tsx
<PageScrollList size="small">Small</PageScrollList>
<PageScrollList size="medium">Medium</PageScrollList>
<PageScrollList size="large">Large</PageScrollList>
```

### States

```tsx
<PageScrollList disabled>Disabled</PageScrollList>
```

## Styling

The component uses CSS modules for styling. You can override styles by passing a custom `className` or by targeting the component's CSS classes in your global styles.

## Development

To run the component in development mode:

```bash
npm run storybook
```

To run tests:

```bash
npm run test
```

To lint the component:

```bash
npm run lint
```