@ryvora/react-scrollable-list/README.md

📜↔️ Horizontally scrollable list with navigation buttons for React. Perfect for carousels and tab lists!

# Scrollable List 📜↔️

Ahoy, Content Navigator! ⛵

The `scrollable-list` module is your trusty first mate for creating horizontally scrolling lists with snazzy previous/next buttons! ◀️▶️ It's perfect for image carousels, tab lists, or any collection of items that needs to fit into a constrained space while still being fully accessible.

It's like a conveyor belt for your UI elements, making sure users can see everything without overwhelming them! 🎢

## What it Offers:

- ↔️ **Horizontal Scrolling:** Smoothly scrolls content left and right.
- 👆 **Navigation Buttons:** Provides `PreviousButton` and `NextButton` that automatically enable/disable based on scroll position.
- 📦 **Composable Structure:**
  - `ScrollableList.Root`: The main container.
  - `ScrollableList.Viewport`: The actual scrollable area.
  - `ScrollableList.Item`: For individual items in the list.
  - `ScrollableList.PreviousButton`: Button to scroll left/previous.
  - `ScrollableList.NextButton`: Button to scroll right/next.
- 🛠️ **Customizable:** Style it to your heart's content!

## Example Ahoy!

```tsx
import * as ScrollableList from '@ryvora/react-scrollable-list';
import React from 'react';

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];

function MyScrollingTabs() {
  return (
    <ScrollableList.Root style={{ maxWidth: '300px', border: '1px solid #ccc' }}>
      <ScrollableList.PreviousButton>‹</ScrollableList.PreviousButton>
      <ScrollableList.Viewport style={{ padding: '10px 0' }}>
        {items.map((item) => (
          <ScrollableList.Item
            key={item}
            style={{
              display: 'inline-block',
              padding: '8px 12px',
              margin: '0 5px',
              border: '1px solid #eee',
              whiteSpace: 'nowrap',
            }}
          >
            {item}
          </ScrollableList.Item>
        ))}
      </ScrollableList.Viewport>
      <ScrollableList.NextButton>›</ScrollableList.NextButton>
    </ScrollableList.Root>
  );
}
```

Let your content flow freely and beautifully! 🌊✨