@softize/opus 30.0.0 → 31.1.0

package/src/ui/docs/content/command.md

@@ -11,13 +11,21 @@ escolher um valor em um formulário, use [`Select`](/ui/select).
   <CommandList>
     <CommandEmpty>Nada encontrado.</CommandEmpty>
     <CommandGroup heading="Sessões">
-      <CommandItem><FolderGit2 /> Onboarding do faturamento</CommandItem>
-      <CommandItem><FolderGit2 /> Integração com o ERP</CommandItem>
+      <CommandItem>
+        <FolderGit2 /> Onboarding do faturamento
+      </CommandItem>
+      <CommandItem>
+        <FolderGit2 /> Integração com o ERP
+      </CommandItem>
     </CommandGroup>
     <CommandSeparator />
     <CommandGroup heading="Ações">
-      <CommandItem><Plus /> Criar sessão <CommandShortcut>⌘N</CommandShortcut></CommandItem>
-      <CommandItem><Play /> Iniciar ambiente</CommandItem>
+      <CommandItem>
+        <Plus /> Criar sessão <CommandShortcut>⌘N</CommandShortcut>
+      </CommandItem>
+      <CommandItem>
+        <Play /> Iniciar ambiente
+      </CommandItem>
     </CommandGroup>
   </CommandList>
 </Command>
@@ -26,23 +34,23 @@ escolher um valor em um formulário, use [`Select`](/ui/select).
 ## Paleta de comandos em modal
 
 `CommandDialog` apresenta a mesma lista dentro de um [`Dialog`](/ui/dialog), com um cabeçalho
-compacto que mostra o título e o botão de fechar. A descrição fica disponível somente para
+padrão que mostra o título e o botão de fechar. A descrição fica disponível somente para
 tecnologias assistivas. O componente não registra atalho de teclado: para abrir a paleta com
 ⌘K, o aplicativo escuta o evento e altera `open`, como no exemplo.
 
 ```tsx preview
-const [open, setOpen] = useState(false)
+const [open, setOpen] = useState(false);
 
 useEffect(() => {
   const onKeyDown = (event: KeyboardEvent): void => {
-    if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
-      event.preventDefault()
-      setOpen((current) => !current)
+    if (event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      setOpen((current) => !current);
     }
-  }
-  document.addEventListener('keydown', onKeyDown)
-  return () => document.removeEventListener('keydown', onKeyDown)
-}, [])
+  };
+  document.addEventListener("keydown", onKeyDown);
+  return () => document.removeEventListener("keydown", onKeyDown);
+}, []);
 
 render(
   <>
@@ -54,63 +62,67 @@ render(
       <CommandList>
         <CommandEmpty>Nada encontrado.</CommandEmpty>
         <CommandGroup heading="IA">
-          <CommandItem onSelect={() => setOpen(false)}><Bot /> Chamar agente</CommandItem>
-          <CommandItem onSelect={() => setOpen(false)}><Sparkles /> Importar skill</CommandItem>
+          <CommandItem onSelect={() => setOpen(false)}>
+            <Bot /> Chamar agente
+          </CommandItem>
+          <CommandItem onSelect={() => setOpen(false)}>
+            <Sparkles /> Importar skill
+          </CommandItem>
         </CommandGroup>
       </CommandList>
     </CommandDialog>
   </>,
-)
+);
 ```
 
 ## Propriedades de Command
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `shouldFilter` | `boolean` | `true` | Com `false`, desliga a filtragem e a ordenação automáticas; o aplicativo passa a renderizar somente os itens que correspondem à busca. |
-| `filter` | `(value: string, search: string, keywords?: string[]) => number` | | Pontua cada item para a busca atual, de `0` (oculto) a `1` (melhor resultado). |
-| `value` | `string` | | Item destacado no modo controlado. |
-| `onValueChange` | `(value: string) => void` | | Chamado quando o item destacado muda. |
-| `loop` | `boolean` | `false` | Faz as setas voltarem ao início ou ao fim da lista. |
-| `label` | `string` | | Nome acessível do menu, sem exibição visual. |
-| `className` | `string` | | Classes adicionais aplicadas à raiz. |
+| Propriedade     | Tipo                                                             | Padrão  | Descrição                                                                                                                              |
+| --------------- | ---------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `shouldFilter`  | `boolean`                                                        | `true`  | Com `false`, desliga a filtragem e a ordenação automáticas; o aplicativo passa a renderizar somente os itens que correspondem à busca. |
+| `filter`        | `(value: string, search: string, keywords?: string[]) => number` |         | Pontua cada item para a busca atual, de `0` (oculto) a `1` (melhor resultado).                                                         |
+| `value`         | `string`                                                         |         | Item destacado no modo controlado.                                                                                                     |
+| `onValueChange` | `(value: string) => void`                                        |         | Chamado quando o item destacado muda.                                                                                                  |
+| `loop`          | `boolean`                                                        | `false` | Faz as setas voltarem ao início ou ao fim da lista.                                                                                    |
+| `label`         | `string`                                                         |         | Nome acessível do menu, sem exibição visual.                                                                                           |
+| `className`     | `string`                                                         |         | Classes adicionais aplicadas à raiz.                                                                                                   |
 
 ## Propriedades de CommandInput
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `placeholder` | `string` | | Texto exibido enquanto a busca está vazia. |
-| `value` | `string` | | Texto da busca no modo controlado. |
-| `onValueChange` | `(search: string) => void` | | Chamado quando o texto da busca muda. |
-| `disabled` | `boolean` | `false` | Desabilita o campo de busca. |
-| `className` | `string` | | Classes adicionais aplicadas ao campo; o ícone de busca fica no wrapper. |
+| Propriedade     | Tipo                       | Padrão  | Descrição                                                                |
+| --------------- | -------------------------- | ------- | ------------------------------------------------------------------------ |
+| `placeholder`   | `string`                   |         | Texto exibido enquanto a busca está vazia.                               |
+| `value`         | `string`                   |         | Texto da busca no modo controlado.                                       |
+| `onValueChange` | `(search: string) => void` |         | Chamado quando o texto da busca muda.                                    |
+| `disabled`      | `boolean`                  | `false` | Desabilita o campo de busca.                                             |
+| `className`     | `string`                   |         | Classes adicionais aplicadas ao campo; o ícone de busca fica no wrapper. |
 
 ## Propriedades de CommandDialog
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `open` | `boolean` | | Estado do modal no modo controlado. |
-| `onOpenChange` | `(open: boolean) => void` | | Atualiza o estado do modal; pode ser conectado ao atalho do aplicativo. |
-| `title` | `string` | `'Paleta de comandos'` | Título exibido no header compacto; também nomeia o diálogo para tecnologias assistivas. |
-| `description` | `string` | `'Busque um comando para executar…'` | Descrição disponível somente para tecnologias assistivas. |
-| `showCloseButton` | `boolean` | `true` | Exibe o botão de fechamento. |
-| `className` | `string` | | Classes do conteúdo do diálogo, como a largura. |
+| Propriedade       | Tipo                      | Padrão                               | Descrição                                                                             |
+| ----------------- | ------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------- |
+| `open`            | `boolean`                 |                                      | Estado do modal no modo controlado.                                                   |
+| `onOpenChange`    | `(open: boolean) => void` |                                      | Atualiza o estado do modal; pode ser conectado ao atalho do aplicativo.               |
+| `title`           | `string`                  | `'Paleta de comandos'`               | Título exibido no header padrão; também nomeia o diálogo para tecnologias assistivas. |
+| `description`     | `string`                  | `'Busque um comando para executar…'` | Descrição disponível somente para tecnologias assistivas.                             |
+| `showCloseButton` | `boolean`                 | `true`                               | Exibe o botão de fechamento.                                                          |
+| `className`       | `string`                  |                                      | Classes do conteúdo do diálogo, como a largura.                                       |
 
 ## Propriedades de CommandItem
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `onSelect` | `(value: string) => void` | | Chamado ao selecionar o item por clique ou teclado. |
-| `value` | `string` | | Valor estável usado na busca e no destaque. Sem ele, o valor é inferido do texto do item. |
-| `keywords` | `string[]` | | Termos adicionais considerados na busca. |
-| `disabled` | `boolean` | `false` | Impede a seleção do item. |
+| Propriedade | Tipo                      | Padrão  | Descrição                                                                                 |
+| ----------- | ------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `onSelect`  | `(value: string) => void` |         | Chamado ao selecionar o item por clique ou teclado.                                       |
+| `value`     | `string`                  |         | Valor estável usado na busca e no destaque. Sem ele, o valor é inferido do texto do item. |
+| `keywords`  | `string[]`                |         | Termos adicionais considerados na busca.                                                  |
+| `disabled`  | `boolean`                 | `false` | Impede a seleção do item.                                                                 |
 
 ## Propriedades de CommandGroup
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `heading` | `React.ReactNode` | | Título exibido acima dos itens do grupo. |
-| `value` | `string` | | Identificador do grupo; obrigatório e único quando não há `heading`. |
+| Propriedade | Tipo              | Padrão | Descrição                                                            |
+| ----------- | ----------------- | ------ | -------------------------------------------------------------------- |
+| `heading`   | `React.ReactNode` |        | Título exibido acima dos itens do grupo.                             |
+| `value`     | `string`          |        | Identificador do grupo; obrigatório e único quando não há `heading`. |
 
 `CommandList` limita a altura a `18.75rem` e rola o excedente; `CommandEmpty` aparece somente quando
 nenhum item corresponde à busca; `CommandSeparator` divide grupos; e `CommandShortcut` mostra, à