Command

Filterable command palette with grouped items, shortcuts, and keyboard navigation. Render inline or inside a modal CommandDialog (⌘K style).

Usage

import { Command, CommandDialog } from '@bwo-ui/react';

const items = [
  { id: 'new',   label: 'New file', group: 'File', shortcut: '⌘N', onSelect: newFile },
  { id: 'save',  label: 'Save',     group: 'File', shortcut: '⌘S', onSelect: save },
];

<CommandDialog open={open} onOpenChange={setOpen}>
  <Command items={items} />
</CommandDialog>

Props — Command

Prop	Type	Default	Description
`items`	`CommandItemEntry[]`	—	Items (grouped by their group field).
`placeholder`	`string`	—	Search input placeholder.
`filter`	`(item, query) => boolean`	—	Custom matcher (default: case-insensitive across label + keywords).
`emptyState`	`ReactNode`	—	Rendered when no items match.
`search`	`string`	—	Controlled search input value.
`onSearchChange`	`(s: string) => void`	—	Search change handler.

Props — CommandDialog

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Open change handler.
`title`	`string`	`'Command Palette'`	Accessible (screen-reader-only) title.