forlogic-core 2.2.6 → 2.2.8

package/docs/design-system/inputs.md

@@ -11,24 +11,24 @@ Campo de entrada de texto com suporte a todos os tipos HTML. Inclui Label para r
 
 **Uso:**
 ```tsx
-import { Input, Label } from "forlogic-core"
-
-// Input básico
-<Input placeholder="Digite algo..." />
-
-// Com Label
-<div className="grid w-full items-center gap-1.5">
-  <Label htmlFor="email">Email</Label>
-  <Input type="email" id="email" placeholder="email@exemplo.com" />
-</div>
-
-// InputGroup com prefixo e sufixo
-import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from "forlogic-core"
-
-<InputGroup>
-  <InputGroupAddon align="inline-start">https://</InputGroupAddon>
-  <InputGroupInput placeholder="exemplo.com" />
-  <InputGroupAddon align="inline-end">.com.br</InputGroupAddon>
+import { Input, Label } from "forlogic-core"
+
+// Input básico
+<Input placeholder="Digite algo..." />
+
+// Com Label
+<div className="grid w-full items-center gap-1.5">
+  <Label htmlFor="email">Email</Label>
+  <Input type="email" id="email" placeholder="email@exemplo.com" />
+</div>
+
+// InputGroup com prefixo e sufixo
+import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from "forlogic-core"
+
+<InputGroup>
+  <InputGroupAddon align="inline-start">https://</InputGroupAddon>
+  <InputGroupInput placeholder="exemplo.com" />
+  <InputGroupAddon align="inline-end">.com.br</InputGroupAddon>
 </InputGroup>
 ```
 
@@ -60,21 +60,21 @@ import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from "
 <div className=
 ```
 ```tsx
-// Normal
+// Normal
 <Input placeholder=
 ```
 ```tsx
-// Ícone à esquerda
+// Ícone à esquerda
 <div className=
 ```
 ```tsx
-// Prefixo
-<InputGroup>
+// Prefixo
+<InputGroup>
   <InputGroupAddon align=
 ```
 ```tsx
-// Ícone de usuário
-<InputGroup>
+// Ícone de usuário
+<InputGroup>
   <InputGroupAddon align=
 ```
 
@@ -120,7 +120,7 @@ import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton } from "
 -  para feedback visual no hover.
 - 🎨 **Padrão v2**: Bordas dos inputs têm contraste aumentado (luminosidade 82% light / 25% dark) para maior realce visual.
 
-> Fonte: `src/design-system/docs/components/InputDoc.tsx`
+> Fonte: `src\design-system\docs\components\InputDoc.tsx`
 
 ---
 
@@ -130,8 +130,8 @@ Exibe um textarea de formulário ou um componente que se parece com um textarea.
 
 **Uso:**
 ```tsx
-import { Textarea } from "forlogic-core"
-
+import { Textarea } from "forlogic-core"
+
 <Textarea placeholder="Digite sua mensagem aqui." />
 ```
 
@@ -159,7 +159,7 @@ import { Textarea } from "forlogic-core"
 -  com 
 -  para feedback visual no hover.
 
-> Fonte: `src/design-system/docs/components/TextareaDoc.tsx`
+> Fonte: `src\design-system\docs\components\TextareaDoc.tsx`
 
 ---
 
@@ -169,11 +169,11 @@ Um controle que permite ao usuário alternar entre marcado e desmarcado.
 
 **Uso:**
 ```tsx
-import { Checkbox } from "forlogic-core"
-
-<div className="flex items-center space-x-2">
-  <Checkbox id="terms" />
-  <label htmlFor="terms">Accept terms and conditions</label>
+import { Checkbox } from "forlogic-core"
+
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <label htmlFor="terms">Accept terms and conditions</label>
 </div>
 ```
 
@@ -199,7 +199,7 @@ import { Checkbox } from "forlogic-core"
 - Gerenciamento adequado de foco
 - Funciona com labels de formulário
 
-> Fonte: `src/design-system/docs/components/CheckboxDoc.tsx`
+> Fonte: `src\design-system\docs\components\CheckboxDoc.tsx`
 
 ---
 
@@ -209,17 +209,17 @@ Um conjunto de botões marcáveis—conhecidos como botões de rádio—onde ape
 
 **Uso:**
 ```tsx
-import { RadioGroup, RadioGroupItem } from "forlogic-core"
-
-<RadioGroup defaultValue="option-one">
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option-one" id="r1" />
-    <Label htmlFor="r1">Option One</Label>
-  </div>
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option-two" id="r2" />
-    <Label htmlFor="r2">Option Two</Label>
-  </div>
+import { RadioGroup, RadioGroupItem } from "forlogic-core"
+
+<RadioGroup defaultValue="option-one">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-one" id="r1" />
+    <Label htmlFor="r1">Option One</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-two" id="r2" />
+    <Label htmlFor="r2">Option Two</Label>
+  </div>
 </RadioGroup>
 ```
 
@@ -251,7 +251,7 @@ import { RadioGroup, RadioGroupItem } from "forlogic-core"
 - Segue o padrão de grupo de rádio WAI-ARIA
 - Gerenciamento adequado de foco
 
-> Fonte: `src/design-system/docs/components/RadioGroupDoc.tsx`
+> Fonte: `src\design-system\docs\components\RadioGroupDoc.tsx`
 
 ---
 
@@ -261,9 +261,9 @@ Renderiza uma label acessível associada a controles de formulário.
 
 **Uso:**
 ```tsx
-import { Label } from "forlogic-core"
-
-<Label htmlFor="email">Email</Label>
+import { Label } from "forlogic-core"
+
+<Label htmlFor="email">Email</Label>
 <Input id="email" type="email" />
 ```
 
@@ -315,7 +315,7 @@ import { Label } from "forlogic-core"
 -  (12px) e 
 -  para hierarquia visual clara sem competir com o conteúdo do campo.
 
-> Fonte: `src/design-system/docs/components/LabelDoc.tsx`
+> Fonte: `src\design-system\docs\components\LabelDoc.tsx`
 
 ---
 
@@ -325,8 +325,8 @@ Um input onde o usuário seleciona um valor dentro de um intervalo determinado.
 
 **Uso:**
 ```tsx
-import { Slider } from "forlogic-core"
-
+import { Slider } from "forlogic-core"
+
 <Slider defaultValue={[50]} max={100} step={1} />
 ```
 
@@ -336,7 +336,7 @@ import { Slider } from "forlogic-core"
 - Labels e valores ARIA adequados
 - Indicadores de foco visíveis
 
-> Fonte: `src/design-system/docs/components/SliderDoc.tsx`
+> Fonte: `src\design-system\docs\components\SliderDoc.tsx`
 
 ---
 
@@ -346,16 +346,16 @@ Componente de upload de arquivo único com drag & drop, validação de tipo/tama
 
 **Uso:**
 ```tsx
-import { SingleFileUpload } from 'forlogic-core';
-
-<SingleFileUpload
-  storedFile={{ id: '1', name: 'doc.pdf', extension: 'pdf', size: 1024 }}
-  allowedExtensions={['pdf', 'docx']}
-  maxSizeInBytes={10 * 1024 * 1024}
-  onFileSelect={(file) => console.log(file)}
-  onFileRemove={() => console.log('removed')}
-  onDownload={async (f) => downloadFile(f.id)}
-  onView={(f) => openViewer(f.id)}
+import { SingleFileUpload } from 'forlogic-core';
+
+<SingleFileUpload
+  storedFile={{ id: '1', name: 'doc.pdf', extension: 'pdf', size: 1024 }}
+  allowedExtensions={['pdf', 'docx']}
+  maxSizeInBytes={10 * 1024 * 1024}
+  onFileSelect={(file) => console.log(file)}
+  onFileRemove={() => console.log('removed')}
+  onDownload={async (f) => downloadFile(f.id)}
+  onView={(f) => openViewer(f.id)}
 />
 ```
 
@@ -370,17 +370,17 @@ import { SingleFileUpload } from 'forlogic-core';
 
 **Exemplos:**
 ```tsx
-<SingleFileUpload
-  onFileSelect={(f) => handleSelect(f)}
-  onFileRemove={() => handleRemove()}
+<SingleFileUpload
+  onFileSelect={(f) => handleSelect(f)}
+  onFileRemove={() => handleRemove()}
 />
 ```
 ```tsx
-<SingleFileUpload
+<SingleFileUpload
   storedFile={{ id:
 ```
 ```tsx
-<SingleFileUpload
+<SingleFileUpload
   allowedExtensions={[
 ```
 
@@ -390,32 +390,32 @@ import { SingleFileUpload } from 'forlogic-core';
 - O componente gerencia estados internos de arquivo local vs servidor (StoredFile).
 - Tipos proibidos são bloqueados automaticamente independente da prop allowedExtensions.
 
-> Fonte: `src/design-system/docs/components/FileUploadDoc.tsx`
+> Fonte: `src\design-system\docs\components\FileUploadDoc.tsx`
 
 ---
 
 ### Select
 
-Exibe uma lista de opções para o usuário escolher—acionada por um botão.
+Exibe uma lista de opções para o usuário escolher—acionada por um botão. O item selecionado é destacado por background (accent), fonte medium e borda esquerda na cor primary. A prop `showCheck` (opcional) adiciona um ícone de check à esquerda do item selecionado.
 
 **Uso:**
 ```tsx
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "forlogic-core"
-
-<Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Theme" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="light">Light</SelectItem>
-    <SelectItem value="dark">Dark</SelectItem>
-  </SelectContent>
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "forlogic-core"
+
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+  </SelectContent>
 </Select>
 ```
 
@@ -426,6 +426,7 @@ import {
 | `value` | `string` | - | O valor selecionado controlado. |
 | `onValueChange` | `(value: string) => void` | - | Manipulador de evento quando o valor muda. |
 | `disabled` | `boolean` | false | Se o select está desabilitado. |
+| `showCheck` | `boolean` | false | Exibe o ícone de check à esquerda do item selecionado. Quando false, o item selecionado é destacado apenas pelo background, fonte medium e borda esquerda primary. |
 | `container (SelectContent)` | `HTMLElement` | - | Container HTML para portal (útil dentro de Dialog). |
 | `collisionBoundary (SelectContent)` | `HTMLElement` | - | Elemento para detecção de colisão de posicionamento. |
 
@@ -441,13 +442,17 @@ import {
 -  quando o Select estiver dentro de um Dialog para evitar problemas de scroll
 - 💡 Para seleção com busca, considere usar 
 -  ao invés de 
-- ,
+- ,
         
 - rounded-lg
 - hover:border-primary
 - transition-colors
+- ,
+        
+- Combobox
+- showCheck
 
-> Fonte: `src/design-system/docs/components/SelectDoc.tsx`
+> Fonte: `src\design-system\docs\components\SelectDoc.tsx`
 
 ---
 
@@ -457,14 +462,14 @@ Editor de texto rico construído com Tiptap, suportando formatação visual, edi
 
 **Uso:**
 ```tsx
-import { RichTextEditor } from "forlogic-core"
-
-const [content, setContent] = useState('')
-
-<RichTextEditor
-  value={content}
-  onChange={setContent}
-  placeholder="Escreva algo aqui..."
+import { RichTextEditor } from "forlogic-core"
+
+const [content, setContent] = useState('')
+
+<RichTextEditor
+  value={content}
+  onChange={setContent}
+  placeholder="Escreva algo aqui..."
 />
 ```
 
@@ -480,25 +485,25 @@ const [content, setContent] = useState('')
 
 **Exemplos:**
 ```tsx
-<RichTextEditor
-  value={content}
-  onChange={setContent}
-  showVariableHint={false}
+<RichTextEditor
+  value={content}
+  onChange={setContent}
+  showVariableHint={false}
   placeholder=
 ```
 ```tsx
-<RichTextEditor
-  value={content}
-  onChange={setContent}
-  showModeToggle={false}
-  showVariableHint={false}
+<RichTextEditor
+  value={content}
+  onChange={setContent}
+  showModeToggle={false}
+  showVariableHint={false}
   minHeight=
 ```
 ```tsx
-<RichTextEditor
-  value={content}
-  onChange={setContent}
-  disabled
+<RichTextEditor
+  value={content}
+  onChange={setContent}
+  disabled
 />
 ```
 
@@ -509,7 +514,7 @@ const [content, setContent] = useState('')
 - Contraste adequado nos estados ativo/inativo
 - Focus visível em todos os elementos interativos
 
-> Fonte: `src/design-system/docs/components/RichTextEditorDoc.tsx`
+> Fonte: `src\design-system\docs\components\RichTextEditorDoc.tsx`
 
 ---
 
@@ -519,27 +524,27 @@ Componente container que renderiza campos de formulário dinâmicos baseados em
 
 **Uso:**
 ```tsx
-import { CustomFormFields, ECustomFormFieldType, validateFields } from "forlogic-core"
-import type { FieldAssociation } from "forlogic-core"
-
-const fields: FieldAssociation[] = [
-  {
-    id: 'f1',
-    type: ECustomFormFieldType.text,
-    name: 'Nome',
-    required: true,
-    config: { multiline: false },
-    isActive: true,
-  },
-  // ...mais campos
-];
-
-const [formFields, setFormFields] = useState(fields);
-
-<CustomFormFields
-  fields={formFields}
-  onChange={setFormFields}
-  onFieldChange={(field) => console.log('Changed:', field)}
+import { CustomFormFields, ECustomFormFieldType, validateFields } from "forlogic-core"
+import type { FieldAssociation } from "forlogic-core"
+
+const fields: FieldAssociation[] = [
+  {
+    id: 'f1',
+    type: ECustomFormFieldType.text,
+    name: 'Nome',
+    required: true,
+    config: { multiline: false },
+    isActive: true,
+  },
+  // ...mais campos
+];
+
+const [formFields, setFormFields] = useState(fields);
+
+<CustomFormFields
+  fields={formFields}
+  onChange={setFormFields}
+  onFieldChange={(field) => console.log('Changed:', field)}
 />
 ```
 
@@ -551,6 +556,6 @@ const [formFields, setFormFields] = useState(fields);
 - Use setFormFieldValues() para aplicar valores salvos a uma lista de campos.
 - Campos de seleção suportam dataSource custom (dados estáticos) e users (lista de usuários do sistema).
 
-> Fonte: `src/design-system/docs/components/CustomFormFieldsDoc.tsx`
+> Fonte: `src\design-system\docs\components\CustomFormFieldsDoc.tsx`
 
 ---