forlogic-core 2.2.6 → 2.2.8

package/docs/design-system/selectors.md

@@ -7,37 +7,47 @@ Categoria: **Seletores** | 7 componentes
 
 ### TreeSelect (ComboTree)
 
-Componente de seleção hierárquica (tree view) com busca recursiva, expansão por chevron e seleção por label. Também disponível como TreeSelect.
+Componente de seleção hierárquica (tree view) com busca recursiva, expansão por chevron e seleção por label. Também disponível como TreeSelect. O item selecionado é destacado com background accent, fonte medium e borda esquerda primary (mesmo padrão do Combobox). Use `showCheck` para adicionar o ícone de check à esquerda.
 
 **Uso:**
 ```tsx
-import { ComboTree, type ComboTreeOption } from 'forlogic-core';
-// 💡 Alias disponível: import { TreeSelect, type TreeSelectProps } from 'forlogic-core';
-import { Folder, FolderOpen, FileText } from 'lucide-react';
-
-const options: ComboTreeOption[] = [
-  {
-    value: 'quality',
-    label: 'Qualidade',
-    icon: Folder,
-    iconOpen: FolderOpen,
-    children: [
-      { value: 'docs', label: 'Documentos', icon: FileText },
-      { value: 'occurrences', label: 'Ocorrências', icon: FileText },
-    ],
-  },
-  { value: 'hr', label: 'RH' },
-];
-
-<ComboTree
-  options={options}
-  value={selected}
-  onChange={setSelected}
-  label="Departamento"
-  placeholder="Selecione..."
+import { ComboTree, type ComboTreeOption } from 'forlogic-core';
+// 💡 Alias disponível: import { TreeSelect, type TreeSelectProps } from 'forlogic-core';
+import { Folder, FolderOpen, FileText } from 'lucide-react';
+
+const options: ComboTreeOption[] = [
+  {
+    value: 'quality',
+    label: 'Qualidade',
+    icon: Folder,
+    iconOpen: FolderOpen,
+    children: [
+      { value: 'docs', label: 'Documentos', icon: FileText },
+      { value: 'occurrences', label: 'Ocorrências', icon: FileText },
+    ],
+  },
+  { value: 'hr', label: 'RH' },
+];
+
+<ComboTree
+  options={options}
+  value={selected}
+  onChange={setSelected}
+  label="Departamento"
+  placeholder="Selecione..."
 />
 ```
 
+**Exemplos:**
+```tsx
+<ComboTree
+  showCheck
+  options={options}
+  value={value}
+  onChange={(v) => setValue(v as string)}
+  label=
+```
+
 **Acessibilidade:**
 - Navegação por teclado com Tab e Enter
 - Aria-expanded indica estado de expansão dos nós
@@ -47,173 +57,181 @@ const options: ComboTreeOption[] = [
 **Notas:**
 - 💡 Alias: Também disponível como 
 -  — import { TreeSelect } from 
-- ,
+- ,
         
-- ,
+- ,
         
-- ,
+- ,
         
 
-> Fonte: `src/design-system/docs/components/ComboTreeDoc.tsx`
+> Fonte: `src\design-system\docs\components\ComboTreeDoc.tsx`
 
 ---
 
 ### AutoComplete (Combobox)
 
-Componente versátil para seleção única ou múltipla com busca inteligente. Combina Popover e Command para autocomplete. Também disponível como AutoComplete. O componente Command é usado internamente para fornecer funcionalidades de busca e navegação por teclado.
+Componente versátil para seleção única ou múltipla com busca inteligente. Combina Popover e Command para autocomplete. Também disponível como AutoComplete. O item selecionado é destacado por uma cor de fundo (accent) e fonte em negrito; o ícone de check à esquerda é opcional via prop showCheck. Quando clearable está ativo, um botão X aparece dentro do controle, à esquerda do chevron, para limpar a seleção.
 
 **Uso:**
 ```tsx
-import { Combobox } from "forlogic-core"
-
-const options = [
-  { value: 'next.js', label: 'Next.js' },
-  { value: 'sveltekit', label: 'SvelteKit' },
-]
-
-// Seleção única
-<Combobox
-  options={options}
-  value={selected}
-  onChange={setSelected}
-  placeholder="Select..."
-/>
-
-// Seleção múltipla
-<Combobox
-  multiple
-  options={options}
-  value={selectedArray}
-  onChange={setSelectedArray}
-  placeholder="Select multiple..."
-/>
-
-// Seleção única com botão limpar (clearable=true por padrão)
-<Combobox
-  options={options}
-  value={selected}
-  onChange={setSelected}
-  placeholder="Selecione..."
-  clearable
-/>
-
-// Desabilitar botão limpar
-<Combobox
-  options={options}
-  value={selected}
-  onChange={setSelected}
-  clearable={false}
-/>
-
-// =====================
-// POPOVER COM COMMAND
-// =====================
-import { Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Button } from "forlogic-core"
-
-<Popover open={open} onOpenChange={setOpen}>
-  <PopoverTrigger asChild>
-    <Button variant="outline">
-      {selectedStatus ? selectedStatus.label : "+ Definir status"}
-    </Button>
-  </PopoverTrigger>
-  <PopoverContent className="p-0 bg-popover" side="right" align="start">
-    <Command>
-      <CommandInput placeholder="Alterar status..." />
-      <CommandList>
-        <CommandEmpty>Nenhum resultado.</CommandEmpty>
-        <CommandGroup>
-          {statuses.map((status) => (
-            <CommandItem
-              key={status.value}
-              value={status.value}
-              onSelect={(value) => {
-                setSelectedStatus(statuses.find((s) => s.value === value))
-                setOpen(false)
-              }}
-            >
-              {status.label}
-            </CommandItem>
-          ))}
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  </PopoverContent>
-</Popover>
-
-// =====================
-// DROPDOWN MENU COM COMMAND
-// =====================
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from "forlogic-core"
-
-<DropdownMenu open={open} onOpenChange={setOpen}>
-  <DropdownMenuTrigger asChild>
-    <Button variant="ghost" size="sm">
-      <MoreVertical className="h-4 w-4" />
-    </Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent align="end" className="w-[200px] bg-popover">
-    <DropdownMenuLabel>Ações</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger>Aplicar label</DropdownMenuSubTrigger>
-      <DropdownMenuSubContent className="p-0 bg-popover">
-        <Command>
-          <CommandInput placeholder="Filtrar label..." />
-          <CommandList>
-            <CommandEmpty>Nenhum label encontrado.</CommandEmpty>
-            <CommandGroup>
-              {labels.map((label) => (
-                <CommandItem
-                  key={label}
-                  value={label}
-                  onSelect={(value) => {
-                    setLabel(value)
-                    setOpen(false)
-                  }}
-                >
-                  {label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </DropdownMenuSubContent>
-    </DropdownMenuSub>
-  </DropdownMenuContent>
-</DropdownMenu>
-
-// =====================
-// RESPONSIVO (Popover/Drawer)
-// =====================
-import { useMediaQuery } from "@/design-system/hooks/useMediaQuery"
-import { Drawer, DrawerTrigger, DrawerContent } from "forlogic-core"
-
-function ResponsiveCombobox() {
-  const isDesktop = useMediaQuery("(min-width: 768px)")
-
-  if (isDesktop) {
-    return (
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button>Definir status</Button>
-        </PopoverTrigger>
-        <PopoverContent className="p-0 bg-popover">
-          <StatusList />
-        </PopoverContent>
-      </Popover>
-    )
-  }
-
-  return (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button>Definir status</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <StatusList />
-      </DrawerContent>
-    </Drawer>
-  )
+import { Combobox } from "forlogic-core"
+
+const options = [
+  { value: 'next.js', label: 'Next.js' },
+  { value: 'sveltekit', label: 'SvelteKit' },
+]
+
+// Seleção única
+<Combobox
+  options={options}
+  value={selected}
+  onChange={setSelected}
+  placeholder="Select..."
+/>
+
+// Seleção múltipla
+<Combobox
+  multiple
+  options={options}
+  value={selectedArray}
+  onChange={setSelectedArray}
+  placeholder="Select multiple..."
+/>
+
+// Seleção única com botão limpar
+<Combobox
+  options={options}
+  value={selected}
+  onChange={setSelected}
+  placeholder="Selecione..."
+  clearable
+/>
+
+// Exibir ícone de check no item selecionado (padrão é false)
+<Combobox
+  options={options}
+  value={selected}
+  onChange={setSelected}
+  showCheck
+/>
+
+// Desabilitar botão limpar
+<Combobox
+  options={options}
+  value={selected}
+  onChange={setSelected}
+  clearable={false}
+/>
+
+// =====================
+// POPOVER COM COMMAND
+// =====================
+import { Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Button } from "forlogic-core"
+
+<Popover open={open} onOpenChange={setOpen}>
+  <PopoverTrigger asChild>
+    <Button variant="outline">
+      {selectedStatus ? selectedStatus.label : "+ Definir status"}
+    </Button>
+  </PopoverTrigger>
+  <PopoverContent className="p-0 bg-popover" side="right" align="start">
+    <Command>
+      <CommandInput placeholder="Alterar status..." />
+      <CommandList>
+        <CommandEmpty>Nenhum resultado.</CommandEmpty>
+        <CommandGroup>
+          {statuses.map((status) => (
+            <CommandItem
+              key={status.value}
+              value={status.value}
+              onSelect={(value) => {
+                setSelectedStatus(statuses.find((s) => s.value === value))
+                setOpen(false)
+              }}
+            >
+              {status.label}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  </PopoverContent>
+</Popover>
+
+// =====================
+// DROPDOWN MENU COM COMMAND
+// =====================
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from "forlogic-core"
+
+<DropdownMenu open={open} onOpenChange={setOpen}>
+  <DropdownMenuTrigger asChild>
+    <Button variant="ghost" size="sm">
+      <MoreVertical className="h-4 w-4" />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end" className="w-[200px] bg-popover">
+    <DropdownMenuLabel>Ações</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>Aplicar label</DropdownMenuSubTrigger>
+      <DropdownMenuSubContent className="p-0 bg-popover">
+        <Command>
+          <CommandInput placeholder="Filtrar label..." />
+          <CommandList>
+            <CommandEmpty>Nenhum label encontrado.</CommandEmpty>
+            <CommandGroup>
+              {labels.map((label) => (
+                <CommandItem
+                  key={label}
+                  value={label}
+                  onSelect={(value) => {
+                    setLabel(value)
+                    setOpen(false)
+                  }}
+                >
+                  {label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  </DropdownMenuContent>
+</DropdownMenu>
+
+// =====================
+// RESPONSIVO (Popover/Drawer)
+// =====================
+import { useMediaQuery } from "@/design-system/hooks/useMediaQuery"
+import { Drawer, DrawerTrigger, DrawerContent } from "forlogic-core"
+
+function ResponsiveCombobox() {
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  if (isDesktop) {
+    return (
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button>Definir status</Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0 bg-popover">
+          <StatusList />
+        </PopoverContent>
+      </Popover>
+    )
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Definir status</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <StatusList />
+      </DrawerContent>
+    </Drawer>
+  )
 }
 ```
 
@@ -228,46 +246,56 @@ function ResponsiveCombobox() {
 **Notas:**
 - 💡 Alias: Também disponível como 
 -  — import { AutoComplete } from 
-- ,
+- ,
         
 
-> Fonte: `src/design-system/docs/components/ComboboxDoc.tsx`
+> Fonte: `src\design-system\docs\components\ComboboxDoc.tsx`
 
 ---
 
 ### TreeSelect (ComboTree)
 
-Componente de seleção hierárquica (tree view) com busca recursiva, expansão por chevron e seleção por label. Também disponível como TreeSelect.
+Componente de seleção hierárquica (tree view) com busca recursiva, expansão por chevron e seleção por label. Também disponível como TreeSelect. O item selecionado é destacado com background accent, fonte medium e borda esquerda primary (mesmo padrão do Combobox). Use `showCheck` para adicionar o ícone de check à esquerda.
 
 **Uso:**
 ```tsx
-import { ComboTree, type ComboTreeOption } from 'forlogic-core';
-// 💡 Alias disponível: import { TreeSelect, type TreeSelectProps } from 'forlogic-core';
-import { Folder, FolderOpen, FileText } from 'lucide-react';
-
-const options: ComboTreeOption[] = [
-  {
-    value: 'quality',
-    label: 'Qualidade',
-    icon: Folder,
-    iconOpen: FolderOpen,
-    children: [
-      { value: 'docs', label: 'Documentos', icon: FileText },
-      { value: 'occurrences', label: 'Ocorrências', icon: FileText },
-    ],
-  },
-  { value: 'hr', label: 'RH' },
-];
-
-<ComboTree
-  options={options}
-  value={selected}
-  onChange={setSelected}
-  label="Departamento"
-  placeholder="Selecione..."
+import { ComboTree, type ComboTreeOption } from 'forlogic-core';
+// 💡 Alias disponível: import { TreeSelect, type TreeSelectProps } from 'forlogic-core';
+import { Folder, FolderOpen, FileText } from 'lucide-react';
+
+const options: ComboTreeOption[] = [
+  {
+    value: 'quality',
+    label: 'Qualidade',
+    icon: Folder,
+    iconOpen: FolderOpen,
+    children: [
+      { value: 'docs', label: 'Documentos', icon: FileText },
+      { value: 'occurrences', label: 'Ocorrências', icon: FileText },
+    ],
+  },
+  { value: 'hr', label: 'RH' },
+];
+
+<ComboTree
+  options={options}
+  value={selected}
+  onChange={setSelected}
+  label="Departamento"
+  placeholder="Selecione..."
 />
 ```
 
+**Exemplos:**
+```tsx
+<ComboTree
+  showCheck
+  options={options}
+  value={value}
+  onChange={(v) => setValue(v as string)}
+  label=
+```
+
 **Acessibilidade:**
 - Navegação por teclado com Tab e Enter
 - Aria-expanded indica estado de expansão dos nós
@@ -277,14 +305,14 @@ const options: ComboTreeOption[] = [
 **Notas:**
 - 💡 Alias: Também disponível como 
 -  — import { TreeSelect } from 
-- ,
+- ,
         
-- ,
+- ,
         
-- ,
+- ,
         
 
-> Fonte: `src/design-system/docs/components/ComboTreeDoc.tsx`
+> Fonte: `src\design-system\docs\components\ComboTreeDoc.tsx`
 
 ---
 
@@ -294,15 +322,15 @@ Seletor de cores com paleta predefinida e seletor customizado.
 
 **Uso:**
 ```tsx
-import { ColorPicker } from "forlogic-core"
-import { useState } from 'react'
-
-const [color, setColor] = useState('#3b82f6')
-
-<ColorPicker
-  value={color}
-  onChange={setColor}
-  label="Escolha uma cor"
+import { ColorPicker } from "forlogic-core"
+import { useState } from 'react'
+
+const [color, setColor] = useState('#3b82f6')
+
+<ColorPicker
+  value={color}
+  onChange={setColor}
+  label="Escolha uma cor"
 />
 ```
 
@@ -312,14 +340,19 @@ const [color, setColor] = useState('#3b82f6')
 | `value` | `string` | #3b82f6 | Cor atual selecionada (formato hexadecimal). |
 | `onChange` | `(color: string) => void` | - | Callback quando a cor é alterada. |
 | `label` | `string` | - | Label opcional para o campo. |
+| `showHexValue` | `boolean` | true | Exibe o valor hexadecimal ao lado do swatch. Quando false, mostra apenas a cor. |
 
 **Acessibilidade:**
+- Navegação por teclado completa: abre com Espaço ou ↓, navega com setas, seleciona com Enter
+- Home/End pulam para a primeira/última cor da paleta
+- Esc ou Tab fecham o popover sem alterar a seleção
+- Popover fecha automaticamente ao clicar/selecionar uma cor
+- Foco inicial na cor atualmente selecionada ao abrir o popover
 - Botão com papel semântico correto
 - Input de cor nativo acessível
 - Labels descritivos para cores predefinidas
-- Navegação por teclado completa
 
-> Fonte: `src/design-system/docs/components/ColorPickerDoc.tsx`
+> Fonte: `src\design-system\docs\components\ColorPickerDoc.tsx`
 
 ---
 
@@ -329,15 +362,16 @@ Seletor de ícones Material Symbols Outlined com opção 'sem ícone'.
 
 **Uso:**
 ```tsx
-import { IconPicker } from "forlogic-core"
-import { useState } from 'react'
-
-const [icon, setIcon] = useState<string | null>('star_rate')
-
-<IconPicker
-  value={icon}
-  onChange={setIcon}
-  label="Escolha um ícone"
+import { IconPicker } from "forlogic-core"
+import { useState } from 'react'
+
+const [icon, setIcon] = useState<string | null>('star_rate')
+
+<IconPicker
+  value={icon}
+  onChange={setIcon}
+  label="Escolha um ícone"
+  color="text-blue-600"
 />
 ```
 
@@ -349,13 +383,15 @@ const [icon, setIcon] = useState<string | null>('star_rate')
 | `label` | `string` | - | Label opcional para o campo. |
 
 **Acessibilidade:**
-- Grid acessível por teclado
+- Navegação por teclado completa: abre com Espaço ou ↓, navega com setas, seleciona com Enter
+- Home/End pulam para o primeiro/último ícone da grid
+- Esc ou Tab fecham o popover sem alterar a seleção
 - Títulos descritivos em cada ícone
 - Indicador visual de seleção
 - Scroll area com navegação adequada
 - Opção para remover ícone selecionado
 
-> Fonte: `src/design-system/docs/components/IconPickerDoc.tsx`
+> Fonte: `src\design-system\docs\components\IconPickerDoc.tsx`
 
 ---
 
@@ -365,24 +401,24 @@ Componentes para seleção de datas. O Calendar exibe um calendário interativo,
 
 **Uso:**
 ```tsx
-import { Calendar, DatePicker } from "forlogic-core"
-import { useState } from "react"
-
-// Calendar
-const [date, setDate] = useState<Date | undefined>(new Date())
-
-<Calendar
-  mode="single"
-  selected={date}
-  onSelect={setDate}
-  className="rounded-md border"
-/>
-
-// Date Picker
-<DatePicker 
-  date={date}
-  onDateChange={setDate}
-  placeholder="Selecione uma data"
+import { Calendar, DatePicker } from "forlogic-core"
+import { useState } from "react"
+
+// Calendar
+const [date, setDate] = useState<Date | undefined>(new Date())
+
+<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+  className="rounded-md border"
+/>
+
+// Date Picker
+<DatePicker 
+  date={date}
+  onDateChange={setDate}
+  placeholder="Selecione uma data"
 />
 ```
 
@@ -393,7 +429,7 @@ const [date, setDate] = useState<Date | undefined>(new Date())
 - Labels e roles ARIA apropriados
 - Gerenciamento de foco adequado
 
-> Fonte: `src/design-system/docs/components/CalendarDoc.tsx`
+> Fonte: `src\design-system\docs\components\CalendarDoc.tsx`
 
 ---
 
@@ -403,12 +439,12 @@ Indica o progresso de preenchimento de campos obrigatórios em formulários com
 
 **Uso:**
 ```tsx
-import { RequiredFieldsCounter } from "@/design-system/components/RequiredFieldsCounter"
-
-// Progresso parcial
-<RequiredFieldsCounter filled={2} total={5} />
-
-// Formulário completo
+import { RequiredFieldsCounter } from "@/design-system/components/RequiredFieldsCounter"
+
+// Progresso parcial
+<RequiredFieldsCounter filled={2} total={5} />
+
+// Formulário completo
 <RequiredFieldsCounter filled={5} total={5} />
 ```
 
@@ -437,9 +473,9 @@ import { RequiredFieldsCounter } from "@/design-system/components/RequiredFields
 -  definida no tailwind.config.ts
 - Importar de 
 -  ou diretamente de 
-- ,
+- ,
         
 
-> Fonte: `src/design-system/docs/components/RequiredFieldsCounterDoc.tsx`
+> Fonte: `src\design-system\docs\components\RequiredFieldsCounterDoc.tsx`
 
 ---