@simpledotstudio/simple-avatar-select/README.md

SimpleAvatarSelect - A reusable React component

# SimpleAvatarSelect

A reusable avatarselect component for React applications.

## Installation

```bash
npm install @simpledotstudio/simple-avatar-select
```

## Usage

```tsx
import { SimpleAvatarSelect } from '@simpledotstudio/simple-avatar-select';

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

## 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
<SimpleAvatarSelect variant="default">Default</SimpleAvatarSelect>
<SimpleAvatarSelect variant="primary">Primary</SimpleAvatarSelect>
<SimpleAvatarSelect variant="secondary">Secondary</SimpleAvatarSelect>
```

### Sizes

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

### States

```tsx
<SimpleAvatarSelect disabled>Disabled</SimpleAvatarSelect>
```

## 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 build the component:

```bash
npm run build
```