npm package: @sarthakb009/model-selector
Description: Model Selector
Author: Sarthak
Latest version: 1.0.2

# ModelSelector

A React dropdown component for selecting AI models with search, descriptions, and custom icons. Perfect for AI applications, model switching interfaces, or configuration panels. Built with TypeScript.

## Installation

```bash
npm install @sarthakb009/model-selector
```

## Peer Dependencies

Make sure you have these installed in your project:

```bash
npm install react react-dom lucide-react
```

Required versions:
- `react` ^18.0.0
- `react-dom` ^18.0.0
- `lucide-react` ^0.294.0

## Usage

### Basic Example

```tsx
import { ModelSelector } from '@sarthakb009/model-selector';
import { Sparkles, Box } from 'lucide-react';
import { useState } from 'react';

function App() {
  const [selectedId, setSelectedId] = useState('gpt-4');

  const models = [
    {
      id: 'gpt-4',
      name: 'GPT-4',
      provider: 'OpenAI',
      description: 'Most capable model',
      icon: Sparkles,
    },
    {
      id: 'gpt-3.5',
      name: 'GPT-3.5 Turbo',
      provider: 'OpenAI',
      description: 'Fast and efficient',
      icon: Box,
    },
  ];

  return (
    <ModelSelector
      selectedId={selectedId}
      models={models}
      onChange={(modelId) => {
        setSelectedId(modelId);
        console.log('Selected:', modelId);
      }}
    />
  );
}
```

### With Sizes

```tsx
import { ModelSelector } from '@sarthakb009/model-selector';

function App() {
  return (
    <>
      <ModelSelector
        selectedId={selectedId}
        models={models}
        onChange={setSelectedId}
        size="sm" // 'sm' | 'md' | 'lg'
      />
      
      <ModelSelector
        selectedId={selectedId}
        models={models}
        onChange={setSelectedId}
        size="lg"
      />
    </>
  );
}
```

### With Loading State

```tsx
import { ModelSelector } from '@sarthakb009/model-selector';

function App() {
  return (
    <ModelSelector
      selectedId={selectedId}
      models={models}
      onChange={setSelectedId}
      isLoading={true}
    />
  );
}
```

### Disabled State

```tsx
import { ModelSelector } from '@sarthakb009/model-selector';

function App() {
  return (
    <ModelSelector
      selectedId={selectedId}
      models={models}
      onChange={setSelectedId}
      disabled={true}
    />
  );
}
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `selectedId` | `string` | - | **Yes** | The currently selected model ID |
| `models` | `ModelData[]` | - | **Yes** | Array of available models |
| `onChange` | `(modelId: string) => void` | - | **Yes** | Callback fired when a model is selected |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | No | Visual size of the component |
| `className` | `string` | `undefined` | No | Additional CSS classes |
| `disabled` | `boolean` | `false` | No | Disable interaction |
| `isLoading` | `boolean` | `false` | No | Show loading spinner state |

## ModelData Type

```tsx
interface ModelData {
  id: string;
  name: string;
  provider: string;
  description?: string;
  icon?: LucideIcon;
  tags?: string[];
}
```

## Features

- ✅ **Dropdown Interface**: Clean, accessible dropdown
- ✅ **Model Information**: Display name, provider, and description
- ✅ **Custom Icons**: Support for Lucide icons
- ✅ **Multiple Sizes**: Small, medium, and large variants
- ✅ **Loading State**: Built-in loading indicator
- ✅ **Keyboard Navigation**: Full keyboard support
- ✅ **Click Outside**: Closes when clicking outside
- ✅ **TypeScript**: Full TypeScript support with exported types
- ✅ **Accessible**: Proper ARIA labels and focus management

## TypeScript

The component is written in TypeScript and exports all types:

```tsx
import {
  ModelSelector,
  ModelSelectorProps,
  ModelData,
  ModelSize,
} from '@sarthakb009/model-selector';

const model: ModelData = {
  id: 'gpt-4',
  name: 'GPT-4',
  provider: 'OpenAI',
  description: 'Most capable model',
};

const props: ModelSelectorProps = {
  selectedId: 'gpt-4',
  models: [model],
  onChange: (id) => console.log(id),
  size: 'md' as ModelSize,
};
```

## License

MIT