# Mega Select
URL: /docs/web/components/mega-select

Mega Select component.

**Demo:**

```tsx
'use client';

import { useCallback } from 'react';

import { MegaSelect } from '@docyrus/ui/components/mega-select';
import { cn } from '@docyrus/ui/primitives/lib/utils';

import { PropControls } from '@/components/prop-controls';
import { useDemoData } from '@/data/mega-select-data';

export function MegaSelectDemo() {
  const { props, controls } = useDemoData();

  const handleChoose = useCallback((value: string) => {
    console.info('Chosen:', value);
  }, []);

  return (
    <div className="w-full">
      
      <div className={cn('mt-4 flex justify-center', props.size === 'full' && 'w-full')}>
        
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-mega-select
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)

## Usage

```tsx
import {
  MegaSelect
} from "@docyrus/ui/components/mega-select";
import type {
  MegaSelectProps,
  MegaSelectSize,
  MegaSelectVariant,
  MegaSelectProviderProps,
  MegaSelectItemProps,
  MegaSelectSearchProps,
  MegaSelectCategoriesProps,
  MegaSelectGridProps,
  MegaSelectDetailProps,
  MegaSelectItem,
  MegaSelectCategory,
  MapToMegaSelectItemsConfig,
  MegaSelectContextValue
} from "@docyrus/ui/components/mega-select";

```

## Variants

| Variant | Description |
|---------|-------------|
| `default` | Default style |
| `elevated` | Elevated — `shadow-lg` |
| `flat` | Flat — `border-transparent shadow-none` |

## Sizes

| Size | Description |
|------|-------------|
| `thin` | thin — `w-90` |
| `default` | Default — `w-140` |
| `large` | large — `w-195` |
| `full` | full — `w-full` |

## Columns

| Columns | Description |
|---------|-------------|
| `auto` | Auto — `grid-cols-[repeat(auto-fill,minmax(220px,1fr))]` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `columns` | `"auto"` | `"default"` |
| `className` | `string` | — |

## Components

| Component | Description |
|-----------|-------------|
| `MegaSelect` | Public export |
| `MegaSelectProvider` | Internal — `mega-select-context.tsx` |

## Type Exports

| Type | Description |
|------|-------------|
| `MegaSelectProps` | — |
| `MegaSelectSize` | — |
| `MegaSelectVariant` | — |
| `MegaSelectProviderProps` | — |
| `MegaSelectItemProps` | — |
| `MegaSelectSearchProps` | — |
| `MegaSelectCategoriesProps` | — |
| `MegaSelectGridProps` | — |
| `MegaSelectDetailProps` | — |
| `MegaSelectItem` | — |
| `MegaSelectCategory` | — |
| `MapToMegaSelectItemsConfig` | — |
| `MegaSelectContextValue` | — |

## Type Reference

### MegaSelectProps

| Field | Type | Description |
|-------|------|-------------|

### MegaSelectSize

`"thin"` | `"default"` | `"large"` | `"full"`

### MegaSelectVariant

`"default"` | `"elevated"` | `"flat"`

### MegaSelectProviderProps

| Field | Type | Description |
|-------|------|-------------|
| `children` | `ReactNode` | — |
| `items` | `MegaSelectItem<T>[]` | — |
| `categories` | `MegaSelectCategory[]` | — |
| `value` | `string \| null` | — |
| `defaultValue` | `string` | — |
| `disabled` | `boolean` | — |
| `loading` | `boolean` | — |
| `forceOpenDetail` | `boolean` | — |
| `restrictedValue` | `string` | — |
| `defaultColor` | `string` | — |
| `defaultIcon` | `string` | — |
| `searchable` | `boolean` | — |
| `onChoose` | `(value: string, item: MegaSelectItem<T>) => void` | — |
| `onSelectionChange` | `(value: string \| null, item: MegaSelectItem<T> \| null) => void` | — |
| `onClose` | `() => void` | — |

### MegaSelectItemProps

| Field | Type | Description |
|-------|------|-------------|

### MegaSelectSearchProps

`"onChange"`

### MegaSelectGridProps

| Field | Type | Description |
|-------|------|-------------|

### MegaSelectItem

| Field | Type | Description |
|-------|------|-------------|
| `id` | `string` | — |
| `label` | `string` | — |
| `description` | `string` | — |
| `icon` | `string` | — |
| `image` | `string` | — |
| `color` | `string` | — |
| `categoryId` | `string` | — |
| `content` | `ReactNode` | — |
| `disabled` | `boolean` | — |
| `data` | `T` | — |

### MegaSelectCategory

| Field | Type | Description |
|-------|------|-------------|
| `id` | `string` | — |
| `label` | `string` | — |
| `icon` | `string` | — |

### MapToMegaSelectItemsConfig

| Field | Type | Description |
|-------|------|-------------|
| `id` | `keyof R` | — |
| `label` | `keyof R` | — |
| `description` | `keyof R` | — |
| `icon` | `keyof R` | — |
| `image` | `keyof R` | — |
| `color` | `keyof R` | — |
| `categoryId` | `keyof R` | — |

### MegaSelectContextValue

| Field | Type | Description |
|-------|------|-------------|
| `items` | `MegaSelectItem<T>[]` | — |
| `filteredItems` | `MegaSelectItem<T>[]` | — |
| `categories` | `MegaSelectCategory[]` | — |
| `selectedId` | `string \| null` | — |
| `setSelectedId` | `(id: string \| null) => void` | — |
| `searchQuery` | `string` | — |
| `setSearchQuery` | `(query: string) => void` | — |
| `activeCategory` | `string \| null` | — |
| `setActiveCategory` | `(categoryId: string \| null) => void` | — |
| `detailItem` | `MegaSelectItem<T> \| null` | — |
| `setDetailItem` | `(item: MegaSelectItem<T> \| null) => void` | — |
| `disabled` | `boolean` | — |
| `loading` | `boolean` | — |
| `forceOpenDetail` | `boolean` | — |
| `restrictedValue` | `string \| undefined` | — |
| `defaultColor` | `string \| undefined` | — |
| `defaultIcon` | `string \| undefined` | — |
| `searchable` | `boolean` | — |
| `onChoose` | `(value: string, item: MegaSelectItem<T>) => void` | — |
| `onSelectionChange` | `(value: string \| null, item: MegaSelectItem<T> \| null) => void` | — |
| `onClose` | `() => void` | — |