# Command

## Overview

Command palette and command list built on `cmdk`. Provides an input for filtering, groups, items, separators, and a dialog wrapper for modal usage.

---

## Props

### Command (Root)

| Prop        | Type              | Default      | Description                                   |
| ----------- | ----------------- | ------------ | --------------------------------------------- |
| `className` | `string`          | `""`         | Additional classes for layout/size.           |
| `children`  | `React.ReactNode` | **required** | Compose with input, list, groups, items, etc. |

### CommandDialog

Wraps a `Dialog` and renders a `Command` inside.

| Prop           | Type                     | Default                            | Description                       |
| -------------- | ------------------------ | ---------------------------------- | --------------------------------- |
| `open`         | `boolean`                | `undefined`                        | Controlled open state.            |
| `onOpenChange` | `(open: boolean) => any` | `undefined`                        | Called when dialog state changes. |
| `title`        | `string`                 | `"Command Palette"`                | Accessible dialog title.          |
| `description`  | `string`                 | `"Search for a command to run..."` | Accessible dialog description.    |

### Subcomponents

- `CommandInput`: Search input with a leading search icon.
- `CommandList`: Scrollable list container.
- `CommandEmpty`: Empty state when no results match.
- `CommandGroup`: Group with optional `heading` prop.
- `CommandItem`: Selectable item (supports disabled state).
- `CommandSeparator`: Visual separator between groups.
- `CommandShortcut`: Right-aligned shortcut hint (e.g., `⌘K`).

---

## Behavior

- **Filtering**: Typing in `CommandInput` filters visible items.
- **Keyboard**: Arrow keys navigate, Enter selects, Esc can close the dialog.
- **Accessibility**: Proper roles/aria set by `cmdk` and dialog wrapper.

---

## Examples

### Basic List

```tsx
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "laif-ds";

export function BasicCommand() {
  return (
    <Command className="border-d-border w-[400px] rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search</CommandItem>
          <CommandItem>Settings</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="User">
          <CommandItem>
            Profile
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>Billing</CommandItem>
          <CommandItem>Logout</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}
```

### Command Dialog

```tsx
import { useState } from "react";
import { Button } from "laif-ds";
import {
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
} from "laif-ds";

export function CommandDialogExample() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)} variant="outline">
        Open Command Dialog
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem>Calendar</CommandItem>
            <CommandItem>Search</CommandItem>
            <CommandItem>Settings</CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="User">
            <CommandItem>Profile</CommandItem>
            <CommandItem>Billing</CommandItem>
            <CommandItem>Logout</CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  );
}
```

---

## Notes

- **Shortcuts**: Use `CommandShortcut` for right-aligned hints within `CommandItem`.
- **Layout**: Set explicit width on `Command` (e.g., `w-[400px]`) when used inline.
- **Dialog**: `CommandDialog` hides its title/description visually but preserves accessibility.