Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-mega-selectUI Primitives(4 components)
npx shadcn@latest add avatar button scroll-area skeletonUsage
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";
<MegaSelect
columns="auto"
/>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 | — |