forlogic-core 2.1.3 → 2.1.5

package/docs/design-system/buttons-actions.md

@@ -11,37 +11,37 @@ Botão compacto otimizado para ações em linhas de tabela e menus dropdown. OBR
 
 **Uso:**
 ```tsx
-import { 
-  ActionButton,  // ou: import { ActionMenu } from "forlogic-core"
-  DropdownMenu, 
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem 
-} from "forlogic-core"
-import { Edit, Trash } from 'lucide-react'
-
-// 💡 Alias disponível: ActionMenu = ActionButton
-
-// ✅ CORRETO: Uso padrão em tabelas CRUD
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <ActionButton />
-  </DropdownMenuTrigger>
-  <DropdownMenuContent align="end">
-    <DropdownMenuItem onClick={() => handleEdit(item)}>
-      <Edit className="mr-2 h-4 w-4" />
-      Editar
-    </DropdownMenuItem>
-    <DropdownMenuItem onClick={() => handleDelete(item)}>
-      <Trash className="mr-2 h-4 w-4" />
-      Excluir
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>
-
-// ✅ CORRETO: Com ícone customizado
-<ActionButton>
-  <Edit size={12} />
+import { 
+  ActionButton,  // ou: import { ActionMenu } from "forlogic-core"
+  DropdownMenu, 
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem 
+} from "forlogic-core"
+import { Edit, Trash } from 'lucide-react'
+
+// 💡 Alias disponível: ActionMenu = ActionButton
+
+// ✅ CORRETO: Uso padrão em tabelas CRUD
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <ActionButton />
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end">
+    <DropdownMenuItem onClick={() => handleEdit(item)}>
+      <Edit className="mr-2 h-4 w-4" />
+      Editar
+    </DropdownMenuItem>
+    <DropdownMenuItem onClick={() => handleDelete(item)}>
+      <Trash className="mr-2 h-4 w-4" />
+      Excluir
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+
+// ✅ CORRETO: Com ícone customizado
+<ActionButton>
+  <Edit size={12} />
 </ActionButton>
 ```
 
@@ -54,15 +54,15 @@ import { Edit, Trash } from 'lucide-react'
 
 **Exemplos:**
 ```tsx
-// ❌ NUNCA faça isso em tabelas CRUD
+// ❌ NUNCA faça isso em tabelas CRUD
 <Button variant=
 ```
 ```tsx
-// ✅ SEMPRE use ActionButton em tabelas
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <ActionButton />
-  </DropdownMenuTrigger>
+// ✅ SEMPRE use ActionButton em tabelas
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <ActionButton />
+  </DropdownMenuTrigger>
   <DropdownMenuContent align=
 ```
 
@@ -76,20 +76,20 @@ import { Edit, Trash } from 'lucide-react'
 **Notas:**
 - 💡 Alias: Também disponível como 
 -  — import { ActionMenu } from 
-- ,
+- ,
         
-- ,
+- ,
         
 - ghost
 - icon
-- ,
+- ,
         
-- ,
+- ,
         
-- ,
+- ,
         
 
-> Fonte: `src\design-system\docs\components\ActionButtonDoc.tsx`
+> Fonte: `src/design-system/docs/components/ActionButtonDoc.tsx`
 
 ---
 
@@ -99,10 +99,10 @@ Componente de botão com variantes semânticas, tamanhos e estados. Use para aç
 
 **Uso:**
 ```tsx
-import { Button } from "forlogic-core"
-
-<Button>Click me</Button>
-<Button variant="primary">Primary</Button>
+import { Button } from "forlogic-core"
+
+<Button>Click me</Button>
+<Button variant="primary">Primary</Button>
 <Button variant="destructive">Delete</Button>
 ```
 
@@ -117,8 +117,8 @@ import { Button } from "forlogic-core"
 <Button variant=
 ```
 ```tsx
-// ⚠️ DEPRECATED: Variantes mantidas para compatibilidade
-// Use as variantes semânticas (primary, secondary, etc.)
+// ⚠️ DEPRECATED: Variantes mantidas para compatibilidade
+// Use as variantes semânticas (primary, secondary, etc.)
 <Button variant=
 ```
 ```tsx
@@ -128,9 +128,9 @@ import { Button } from "forlogic-core"
 <Button size=
 ```
 ```tsx
-<Button>Normal</Button>
-<Button disabled>Disabled</Button>
-<Button disabled>
+<Button>Normal</Button>
+<Button disabled>Disabled</Button>
+<Button disabled>
   <Loader2 className=
 ```
 ```tsx
@@ -157,7 +157,7 @@ import { Button } from "forlogic-core"
 -  usa 
 -  (8px) para consistência com inputs e selects.
 
-> Fonte: `src\design-system\docs\components\ButtonDoc.tsx`
+> Fonte: `src/design-system/docs/components/ButtonDoc.tsx`
 
 ---
 
@@ -167,10 +167,10 @@ Componente de botão com variantes semânticas, tamanhos e estados. Use para aç
 
 **Uso:**
 ```tsx
-import { Button } from "forlogic-core"
-
-<Button>Click me</Button>
-<Button variant="primary">Primary</Button>
+import { Button } from "forlogic-core"
+
+<Button>Click me</Button>
+<Button variant="primary">Primary</Button>
 <Button variant="destructive">Delete</Button>
 ```
 
@@ -185,8 +185,8 @@ import { Button } from "forlogic-core"
 <Button variant=
 ```
 ```tsx
-// ⚠️ DEPRECATED: Variantes mantidas para compatibilidade
-// Use as variantes semânticas (primary, secondary, etc.)
+// ⚠️ DEPRECATED: Variantes mantidas para compatibilidade
+// Use as variantes semânticas (primary, secondary, etc.)
 <Button variant=
 ```
 ```tsx
@@ -196,9 +196,9 @@ import { Button } from "forlogic-core"
 <Button size=
 ```
 ```tsx
-<Button>Normal</Button>
-<Button disabled>Disabled</Button>
-<Button disabled>
+<Button>Normal</Button>
+<Button disabled>Disabled</Button>
+<Button disabled>
   <Loader2 className=
 ```
 ```tsx
@@ -225,7 +225,7 @@ import { Button } from "forlogic-core"
 -  usa 
 -  (8px) para consistência com inputs e selects.
 
-> Fonte: `src\design-system\docs\components\ButtonDoc.tsx`
+> Fonte: `src/design-system/docs/components/ButtonDoc.tsx`
 
 ---
 
@@ -235,37 +235,37 @@ Botão compacto otimizado para ações em linhas de tabela e menus dropdown. OBR
 
 **Uso:**
 ```tsx
-import { 
-  ActionButton,  // ou: import { ActionMenu } from "forlogic-core"
-  DropdownMenu, 
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem 
-} from "forlogic-core"
-import { Edit, Trash } from 'lucide-react'
-
-// 💡 Alias disponível: ActionMenu = ActionButton
-
-// ✅ CORRETO: Uso padrão em tabelas CRUD
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <ActionButton />
-  </DropdownMenuTrigger>
-  <DropdownMenuContent align="end">
-    <DropdownMenuItem onClick={() => handleEdit(item)}>
-      <Edit className="mr-2 h-4 w-4" />
-      Editar
-    </DropdownMenuItem>
-    <DropdownMenuItem onClick={() => handleDelete(item)}>
-      <Trash className="mr-2 h-4 w-4" />
-      Excluir
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>
-
-// ✅ CORRETO: Com ícone customizado
-<ActionButton>
-  <Edit size={12} />
+import { 
+  ActionButton,  // ou: import { ActionMenu } from "forlogic-core"
+  DropdownMenu, 
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem 
+} from "forlogic-core"
+import { Edit, Trash } from 'lucide-react'
+
+// 💡 Alias disponível: ActionMenu = ActionButton
+
+// ✅ CORRETO: Uso padrão em tabelas CRUD
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <ActionButton />
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end">
+    <DropdownMenuItem onClick={() => handleEdit(item)}>
+      <Edit className="mr-2 h-4 w-4" />
+      Editar
+    </DropdownMenuItem>
+    <DropdownMenuItem onClick={() => handleDelete(item)}>
+      <Trash className="mr-2 h-4 w-4" />
+      Excluir
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+
+// ✅ CORRETO: Com ícone customizado
+<ActionButton>
+  <Edit size={12} />
 </ActionButton>
 ```
 
@@ -278,15 +278,15 @@ import { Edit, Trash } from 'lucide-react'
 
 **Exemplos:**
 ```tsx
-// ❌ NUNCA faça isso em tabelas CRUD
+// ❌ NUNCA faça isso em tabelas CRUD
 <Button variant=
 ```
 ```tsx
-// ✅ SEMPRE use ActionButton em tabelas
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <ActionButton />
-  </DropdownMenuTrigger>
+// ✅ SEMPRE use ActionButton em tabelas
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <ActionButton />
+  </DropdownMenuTrigger>
   <DropdownMenuContent align=
 ```
 
@@ -300,20 +300,20 @@ import { Edit, Trash } from 'lucide-react'
 **Notas:**
 - 💡 Alias: Também disponível como 
 -  — import { ActionMenu } from 
-- ,
+- ,
         
-- ,
+- ,
         
 - ghost
 - icon
-- ,
+- ,
         
-- ,
+- ,
         
-- ,
+- ,
         
 
-> Fonte: `src\design-system\docs\components\ActionButtonDoc.tsx`
+> Fonte: `src/design-system/docs/components/ActionButtonDoc.tsx`
 
 ---
 
@@ -323,11 +323,11 @@ Um controle que permite ao usuário alternar entre marcado e desmarcado.
 
 **Uso:**
 ```tsx
-import { Switch, Label } from "forlogic-core"
-
-<div className="flex items-center space-x-2">
-  <Switch id="airplane-mode" />
-  <Label htmlFor="airplane-mode">Modo Avião</Label>
+import { Switch, Label } from "forlogic-core"
+
+<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode" />
+  <Label htmlFor="airplane-mode">Modo Avião</Label>
 </div>
 ```
 
@@ -344,7 +344,7 @@ import { Switch, Label } from "forlogic-core"
 
 **Exemplos:**
 ```tsx
-// Desligado
+// Desligado
 <Switch id=
 ```
 ```tsx
@@ -366,7 +366,7 @@ import { Switch, Label } from
 - Indicadores visuais de foco visíveis
 - Estado desabilitado comunicado via aria-disabled
 
-> Fonte: `src\design-system\docs\components\SwitchDoc.tsx`
+> Fonte: `src/design-system/docs/components/SwitchDoc.tsx`
 
 ---
 
@@ -376,22 +376,22 @@ Botões de dois estados que podem estar ligados ou desligados, individualmente o
 
 **Uso:**
 ```tsx
-import { Toggle, ToggleGroup, ToggleGroupItem } from "forlogic-core"
-import { Bold, Italic } from "lucide-react"
-
-// Toggle individual
-<Toggle aria-label="Alternar negrito">
-  <Bold className="h-4 w-4" />
-</Toggle>
-
-// Toggle em grupo (seleção única)
-<ToggleGroup type="single" defaultValue="center">
-  <ToggleGroupItem value="left" aria-label="Alinhar à esquerda">
-    <AlignLeft className="h-4 w-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="center" aria-label="Centralizar">
-    <AlignCenter className="h-4 w-4" />
-  </ToggleGroupItem>
+import { Toggle, ToggleGroup, ToggleGroupItem } from "forlogic-core"
+import { Bold, Italic } from "lucide-react"
+
+// Toggle individual
+<Toggle aria-label="Alternar negrito">
+  <Bold className="h-4 w-4" />
+</Toggle>
+
+// Toggle em grupo (seleção única)
+<ToggleGroup type="single" defaultValue="center">
+  <ToggleGroupItem value="left" aria-label="Alinhar à esquerda">
+    <AlignLeft className="h-4 w-4" />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="center" aria-label="Centralizar">
+    <AlignCenter className="h-4 w-4" />
+  </ToggleGroupItem>
 </ToggleGroup>
 ```
 
@@ -428,6 +428,6 @@ import { ToggleGroup, ToggleGroupItem } from
 - Indicadores visuais de foco e estado ativo
 - ToggleGroup implementa padrão roving tabindex
 
-> Fonte: `src\design-system\docs\components\ToggleDoc.tsx`
+> Fonte: `src/design-system/docs/components/ToggleDoc.tsx`
 
 ---