laif-ds/dist/agent-docs/components/Command.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # 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.