@etus/ui 0.1.0

package/src/components/primitives/Tag/README.md

@@ -0,0 +1,793 @@
+# Tag
+
+## Visão Geral
+
+O **Tag** é um componente interativo para seleção, filtragem e categorização. Diferente do Badge (que é primariamente para display), o Tag é projetado para interações como seleção via checkbox, remoção e agrupamento.
+
+### Casos de Uso
+
+- Filtros selecionáveis em listas/tabelas
+- Tags removíveis em inputs de múltipla seleção
+- Categorização com contagem de items
+- Seleção de opções em formulários
+- Chips de busca/filtro
+
+### Classificação
+
+**Categoria:** Atom
+**Dependências:** `class-variance-authority`, `lucide-react`
+
+### Diferença entre Tag e Badge
+
+| Aspecto | Tag | Badge |
+|---------|-----|-------|
+| **Propósito** | Seleção/Interação | Display/Status |
+| **Cores** | Apenas neutral | 12 variantes |
+| **Checkbox** | Suportado | Não |
+| **Count** | Suportado | Não |
+| **Estados** | checked, disabled, focus | Básicos |
+
+---
+
+## Design Specs
+
+### Tamanhos (`size`)
+
+| Tamanho | Altura | Padding | Checkbox | Uso |
+|---------|--------|---------|----------|-----|
+| `sm` | `h-6` (24px) | `px-2` | 14px | Espaços compactos, filtros inline |
+| `md` | `h-7` (28px) | `px-2.5` | 16px | Uso geral (padrão) |
+| `lg` | `h-8` (32px) | `px-3` | 18px | Destaque, ações principais |
+
+### Variantes Visuais
+
+O Tag possui estilo único neutral (outline) para manter consistência visual em seleções:
+
+| Estilo | Classes | Uso |
+|--------|---------|-----|
+| `default` | `bg-background border-border text-foreground` | Estado padrão |
+| `checked` | `bg-muted border-primary` | Quando selecionado |
+
+### Estados
+
+| Estado | Aparência | Comportamento |
+|--------|-----------|---------------|
+| Default | Borda cinza, fundo transparente | - |
+| Hover | `bg-muted/50` | Feedback visual |
+| Checked | Checkbox preenchido, borda primária | Indica seleção |
+| Focus | Ring de 2px | Navegação por teclado |
+| Disabled | 50% opacidade | Sem interações |
+
+### Tokens Utilizados
+
+```css
+/* Cores */
+--background       /* Fundo default */
+--foreground       /* Texto */
+--muted            /* Fundo checked/hover */
+--muted-foreground /* Texto secundário */
+--border           /* Borda default */
+--primary          /* Checkbox checked, borda checked */
+--ring             /* Focus ring */
+
+/* Espaçamento */
+gap-1.5            /* Entre elementos */
+
+/* Tipografia */
+text-sm            /* 14px */
+font-medium        /* 500 */
+
+/* Bordas */
+rounded-md         /* var(--radius) */
+```
+
+### data-slot
+
+```html
+<span data-slot="tag">
+  <span data-slot="tag-checkbox">...</span>
+  <span data-slot="tag-content">Label</span>
+  <span data-slot="tag-count">5</span>
+  <button data-slot="tag-dismiss">...</button>
+</span>
+```
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `children` | `ReactNode` | - | Conteúdo/label do tag |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Tamanho do tag |
+| `checkbox` | `boolean` | `false` | Mostra checkbox no início |
+| `checked` | `boolean` | `false` | Estado do checkbox (controlado) |
+| `defaultChecked` | `boolean` | `false` | Estado inicial (não-controlado) |
+| `onCheckedChange` | `(checked: boolean) => void` | - | Callback de mudança |
+| `dot` | `boolean` | `false` | Mostra dot indicator |
+| `avatar` | `{ src?: string; fallback: string; alt?: string }` | - | Avatar no início |
+| `country` | `string` | - | Código ISO do país (ex: "BR") |
+| `count` | `number` | - | Número exibido ao final |
+| `onDismiss` | `() => void` | - | Callback de remoção (mostra X) |
+| `disabled` | `boolean` | `false` | Desabilita interações |
+| `className` | `string` | - | Classes CSS adicionais |
+
+> Herda todas as props de `React.ComponentProps<"span">`
+
+### TagGroup Props
+
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `children` | `ReactNode` | - | Tags filhas |
+| `layout` | `"inline" \| "wrap" \| "stack"` | `"wrap"` | Layout das tags |
+| `gap` | `"none" \| "xs" \| "sm" \| "md" \| "lg"` | `"sm"` | Espaçamento entre tags |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Alinhamento das tags |
+| `size` | `"sm" \| "md" \| "lg"` | - | Tamanho herdado pelos filhos |
+| `disabled` | `boolean` | `false` | Desabilita todos os filhos |
+| `className` | `string` | - | Classes CSS adicionais |
+
+> TagGroup usa Context para passar `size` e `disabled` para Tags filhas automaticamente
+
+### Callbacks
+
+| Callback | Tipo | Descrição |
+|----------|------|-----------|
+| `onCheckedChange` | `(checked: boolean) => void` | Quando checkbox muda |
+| `onDismiss` | `() => void` | Quando X é clicado |
+| `onClick` | `(event: MouseEvent) => void` | Click no tag (não checkbox) |
+
+### TypeScript
+
+```typescript
+import type { TagProps, TagSize } from "@etus/ui"
+
+interface TagProps {
+  children: React.ReactNode
+  size?: TagSize
+
+  // Checkbox
+  checkbox?: boolean
+  checked?: boolean
+  defaultChecked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+
+  // Leading content (mutualmente exclusivo com checkbox)
+  dot?: boolean
+  avatar?: TagAvatarProps
+  country?: string
+
+  // Trailing content
+  count?: number
+  onDismiss?: () => void
+
+  // Estados
+  disabled?: boolean
+  className?: string
+}
+
+type TagSize = "sm" | "md" | "lg"
+
+interface TagAvatarProps {
+  src?: string
+  fallback: string
+  alt?: string
+}
+
+// TagGroup types
+type TagGroupLayout = "inline" | "wrap" | "stack"
+type TagGroupGap = "none" | "xs" | "sm" | "md" | "lg"
+type TagGroupAlign = "start" | "center" | "end"
+
+interface TagGroupProps {
+  children: React.ReactNode
+  layout?: TagGroupLayout
+  gap?: TagGroupGap
+  align?: TagGroupAlign
+  size?: TagSize
+  disabled?: boolean
+  className?: string
+}
+```
+
+### Comparativo com Design Systems de Referência
+
+#### Matriz de Features (12 Design Systems)
+
+| Feature | ETUS Tag | MUI Chip | Chakra Tag | Mantine Chip | AntD Tag | Carbon Tag | NextUI Chip |
+|---------|:--------:|:--------:|:----------:|:------------:|:--------:|:----------:|:-----------:|
+| **Sizes** | 3 | 2 | 3 | 4 | - | 3 | 3 |
+| **Checkbox** | ✓ | - | - | ✓ | ✓ | ✓ | - |
+| **Dismissible** | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ |
+| **Avatar** | ✓ | ✓ | ✓ | - | - | - | ✓ |
+| **Icon** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| **Count** | ✓ | - | - | - | - | - | - |
+| **Clickable** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| **Country flag** | ✓ | - | - | - | - | - | - |
+| **Dot indicator** | ✓ | - | - | - | - | - | ✓ |
+| **Colors** | 1 | 9 | 12 | ∞ | 8 | 10 | 9 |
+| **data-slot** | ✓ | - | - | - | - | - | - |
+
+#### Nomenclatura entre Design Systems
+
+| Design System | Nome do Componente | Variante Selecionável |
+|---------------|-------------------|----------------------|
+| **ETUS** | Tag | `checkbox` prop |
+| **MUI** | Chip | `clickable` + `onClick` |
+| **Chakra UI** | Tag | `asChild` + button |
+| **Mantine** | Chip | Native checkbox/radio |
+| **Ant Design** | Tag | `CheckableTag` separado |
+| **Carbon** | Tag | `selectable` variant |
+| **NextUI/HeroUI** | Chip | `onClick` |
+
+#### Abordagens de Seleção
+
+| Design System | Abordagem | Notas |
+|---------------|-----------|-------|
+| **Mantine** | Native checkbox | Usa input real, melhor a11y |
+| **Ant Design** | Controlled state | `CheckableTag` separado |
+| **Carbon** | Variant type | `selectable` como tipo |
+| **ETUS** | Checkbox prop | Híbrido visual + input |
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes
+
+| Atributo | Uso |
+|----------|-----|
+| `role="checkbox"` | Quando `checkbox={true}` |
+| `aria-checked` | Estado do checkbox |
+| `aria-disabled` | Quando `disabled={true}` |
+| `aria-label` | Para tags sem texto visível |
+
+### Suporte a Teclado
+
+| Tecla | Ação |
+|-------|------|
+| `Tab` | Move foco para/do tag |
+| `Space` | Toggle checkbox (se habilitado) |
+| `Enter` | Toggle checkbox / Ativa click |
+| `Delete`/`Backspace` | Dismiss (se dismissível) |
+
+### Focus Management
+
+```tsx
+// Focus visible para navegação por teclado
+focus-visible:outline-none
+focus-visible:ring-2
+focus-visible:ring-ring
+focus-visible:ring-offset-2
+```
+
+### Contraste de Cores
+
+| Estado | Foreground | Background | Ratio |
+|--------|------------|------------|-------|
+| Default | `--foreground` | `--background` | ≥ 7:1 |
+| Checked | `--foreground` | `--muted` | ≥ 4.5:1 |
+| Disabled | `--muted-foreground` | `--background` | ≥ 3:1 |
+
+### Screen Readers
+
+- Checkbox é anunciado como "checkbox, not checked" / "checkbox, checked"
+- Count é lido como parte do label
+- Dismiss button tem `aria-label="Remove tag"`
+
+---
+
+## Exemplos
+
+### Uso Básico
+
+```tsx
+import { Tag } from "@etus/ui"
+
+function Example() {
+  return <Tag>Label</Tag>
+}
+```
+
+### Tamanhos
+
+```tsx
+<Tag size="sm">Small</Tag>
+<Tag size="md">Medium</Tag>
+<Tag size="lg">Large</Tag>
+```
+
+### Com Checkbox (Controlado)
+
+```tsx
+import { useState } from "react"
+import { Tag } from "@etus/ui"
+
+function SelectableTag() {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <Tag
+      checkbox
+      checked={checked}
+      onCheckedChange={setChecked}
+    >
+      React
+    </Tag>
+  )
+}
+```
+
+### Com Checkbox (Não-controlado)
+
+```tsx
+<Tag checkbox defaultChecked>
+  TypeScript
+</Tag>
+```
+
+### Grupo de Tags Selecionáveis
+
+```tsx
+function TagGroup() {
+  const [selected, setSelected] = useState<string[]>(["react"])
+
+  const technologies = ["react", "vue", "angular", "svelte"]
+
+  const toggle = (tech: string) => {
+    setSelected(prev =>
+      prev.includes(tech)
+        ? prev.filter(t => t !== tech)
+        : [...prev, tech]
+    )
+  }
+
+  return (
+    <div className="flex gap-2 flex-wrap">
+      {technologies.map(tech => (
+        <Tag
+          key={tech}
+          checkbox
+          checked={selected.includes(tech)}
+          onCheckedChange={() => toggle(tech)}
+        >
+          {tech}
+        </Tag>
+      ))}
+    </div>
+  )
+}
+```
+
+### Com Count
+
+```tsx
+<Tag count={5}>Notifications</Tag>
+<Tag count={99}>Messages</Tag>
+<Tag count={1000}>Items</Tag>
+```
+
+### Dismissível
+
+```tsx
+function DismissibleTags() {
+  const [tags, setTags] = useState(["React", "TypeScript", "Tailwind"])
+
+  const removeTag = (tag: string) => {
+    setTags(prev => prev.filter(t => t !== tag))
+  }
+
+  return (
+    <div className="flex gap-2">
+      {tags.map(tag => (
+        <Tag key={tag} onDismiss={() => removeTag(tag)}>
+          {tag}
+        </Tag>
+      ))}
+    </div>
+  )
+}
+```
+
+### Com Avatar
+
+```tsx
+<Tag avatar={{ src: "/avatar.jpg", fallback: "JD" }}>
+  John Doe
+</Tag>
+
+<Tag avatar={{ fallback: "AB" }} onDismiss={() => {}}>
+  Alice Brown
+</Tag>
+```
+
+### Com Country Flag
+
+```tsx
+<Tag country="BR">Brasil</Tag>
+<Tag country="US">United States</Tag>
+<Tag country="JP" onDismiss={() => {}}>Japan</Tag>
+```
+
+### Com Dot Indicator
+
+```tsx
+<Tag dot>Active</Tag>
+<Tag dot onDismiss={() => {}}>Online</Tag>
+```
+
+### Combinações
+
+```tsx
+// Checkbox + Count
+<Tag checkbox checked count={12}>
+  Unread
+</Tag>
+
+// Avatar + Dismiss
+<Tag
+  avatar={{ fallback: "JD" }}
+  onDismiss={() => {}}
+>
+  John Doe
+</Tag>
+
+// Country + Count + Dismiss
+<Tag
+  country="BR"
+  count={42}
+  onDismiss={() => {}}
+>
+  Brazil
+</Tag>
+```
+
+### Estados
+
+```tsx
+// Disabled
+<Tag disabled>Disabled</Tag>
+<Tag checkbox disabled>Disabled Checkbox</Tag>
+
+// Checked + Disabled
+<Tag checkbox checked disabled>
+  Locked Selection
+</Tag>
+```
+
+### TagGroup - Layouts
+
+```tsx
+import { Tag, TagGroup } from "@etus/ui"
+
+// Layout inline (padrão) - tags em linha
+<TagGroup layout="inline">
+  <Tag>React</Tag>
+  <Tag>Vue</Tag>
+  <Tag>Angular</Tag>
+</TagGroup>
+
+// Layout wrap - quebra linha automaticamente
+<TagGroup layout="wrap">
+  <Tag>JavaScript</Tag>
+  <Tag>TypeScript</Tag>
+  <Tag>Python</Tag>
+  <Tag>Go</Tag>
+  <Tag>Rust</Tag>
+</TagGroup>
+
+// Layout stack - tags empilhadas verticalmente
+<TagGroup layout="stack">
+  <Tag>First</Tag>
+  <Tag>Second</Tag>
+  <Tag>Third</Tag>
+</TagGroup>
+```
+
+### TagGroup - Gap (Espaçamento)
+
+```tsx
+<TagGroup gap="none">...</TagGroup>   {/* gap-0 */}
+<TagGroup gap="xs">...</TagGroup>     {/* gap-1 (4px) */}
+<TagGroup gap="sm">...</TagGroup>     {/* gap-1.5 (6px) - padrão */}
+<TagGroup gap="md">...</TagGroup>     {/* gap-2 (8px) */}
+<TagGroup gap="lg">...</TagGroup>     {/* gap-3 (12px) */}
+```
+
+### TagGroup - Alinhamento
+
+```tsx
+<TagGroup align="start">...</TagGroup>   {/* items-start */}
+<TagGroup align="center">...</TagGroup>  {/* items-center (padrão) */}
+<TagGroup align="end">...</TagGroup>     {/* items-end */}
+```
+
+### TagGroup - Herança de Props
+
+```tsx
+// size é herdado por todos os Tags filhos
+<TagGroup size="lg">
+  <Tag>Large Tag 1</Tag>
+  <Tag>Large Tag 2</Tag>
+  <Tag>Large Tag 3</Tag>
+</TagGroup>
+
+// disabled é herdado por todos os Tags filhos
+<TagGroup disabled>
+  <Tag>Disabled 1</Tag>
+  <Tag checkbox>Disabled 2</Tag>
+  <Tag onDismiss={() => {}}>Disabled 3</Tag>
+</TagGroup>
+
+// Combinação de herança
+<TagGroup size="sm" disabled>
+  <Tag>Small Disabled</Tag>
+  <Tag checkbox>Small Disabled Checkbox</Tag>
+</TagGroup>
+```
+
+### TagGroup - Seleção Múltipla
+
+```tsx
+function MultiSelect() {
+  const [selected, setSelected] = useState<string[]>(["react"])
+  const frameworks = ["react", "vue", "angular", "svelte"]
+
+  const toggle = (framework: string) => {
+    setSelected(prev =>
+      prev.includes(framework)
+        ? prev.filter(f => f !== framework)
+        : [...prev, framework]
+    )
+  }
+
+  return (
+    <TagGroup layout="wrap" gap="sm">
+      {frameworks.map(f => (
+        <Tag
+          key={f}
+          checkbox
+          checked={selected.includes(f)}
+          onCheckedChange={() => toggle(f)}
+        >
+          {f}
+        </Tag>
+      ))}
+    </TagGroup>
+  )
+}
+```
+
+---
+
+## Testes
+
+### Testes Unitários
+
+```tsx
+// Tag.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+import { Tag } from "./Tag"
+
+describe("Tag", () => {
+  it("renders children correctly", () => {
+    render(<Tag>Label</Tag>)
+    expect(screen.getByText("Label")).toBeInTheDocument()
+  })
+
+  it("applies size classes", () => {
+    render(<Tag size="lg">Large</Tag>)
+    expect(screen.getByText("Large").closest("[data-slot='tag']"))
+      .toHaveClass("h-8")
+  })
+
+  it("has data-slot attribute", () => {
+    render(<Tag>Test</Tag>)
+    expect(screen.getByText("Test").closest("[data-slot='tag']"))
+      .toHaveAttribute("data-slot", "tag")
+  })
+})
+```
+
+### Testes de Checkbox
+
+```tsx
+describe("Tag checkbox", () => {
+  it("renders checkbox when checkbox prop is true", () => {
+    render(<Tag checkbox>Selectable</Tag>)
+    expect(screen.getByRole("checkbox")).toBeInTheDocument()
+  })
+
+  it("toggles checked state", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Tag checkbox checked={false} onCheckedChange={handleChange}>
+        Toggle
+      </Tag>
+    )
+
+    await user.click(screen.getByRole("checkbox"))
+    expect(handleChange).toHaveBeenCalledWith(true)
+  })
+
+  it("respects disabled state", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Tag checkbox disabled onCheckedChange={handleChange}>
+        Disabled
+      </Tag>
+    )
+
+    await user.click(screen.getByRole("checkbox"))
+    expect(handleChange).not.toHaveBeenCalled()
+  })
+})
+```
+
+### Testes de Dismiss
+
+```tsx
+describe("Tag dismiss", () => {
+  it("shows dismiss button when onDismiss is provided", () => {
+    render(<Tag onDismiss={() => {}}>Dismissible</Tag>)
+    expect(screen.getByRole("button", { name: /remove/i }))
+      .toBeInTheDocument()
+  })
+
+  it("calls onDismiss when X is clicked", async () => {
+    const user = userEvent.setup()
+    const handleDismiss = vi.fn()
+
+    render(<Tag onDismiss={handleDismiss}>Remove me</Tag>)
+
+    await user.click(screen.getByRole("button", { name: /remove/i }))
+    expect(handleDismiss).toHaveBeenCalledTimes(1)
+  })
+
+  it("dismisses with Delete key", async () => {
+    const user = userEvent.setup()
+    const handleDismiss = vi.fn()
+
+    render(<Tag onDismiss={handleDismiss}>Delete me</Tag>)
+
+    screen.getByText("Delete me").focus()
+    await user.keyboard("{Delete}")
+    expect(handleDismiss).toHaveBeenCalledTimes(1)
+  })
+})
+```
+
+### Testes de Acessibilidade
+
+```tsx
+import { axe, toHaveNoViolations } from "jest-axe"
+
+expect.extend(toHaveNoViolations)
+
+describe("Tag accessibility", () => {
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Tag>Accessible</Tag>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("checkbox has proper role", () => {
+    render(<Tag checkbox>Checkbox Tag</Tag>)
+    expect(screen.getByRole("checkbox")).toBeInTheDocument()
+  })
+
+  it("is keyboard navigable", async () => {
+    const user = userEvent.setup()
+    render(<Tag checkbox>Focus me</Tag>)
+
+    await user.tab()
+    expect(screen.getByRole("checkbox")).toHaveFocus()
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+### ✅ Implementado
+
+#### `TagGroup` Component
+
+Componente para gerenciar grupo de tags com layout, espaçamento e herança de props.
+
+```tsx
+import { Tag, TagGroup } from "@etus/ui"
+
+// Layout e espaçamento
+<TagGroup layout="wrap" gap="md">
+  <Tag>React</Tag>
+  <Tag>Vue</Tag>
+  <Tag>Angular</Tag>
+</TagGroup>
+
+// Herança de size e disabled
+<TagGroup size="lg" disabled>
+  <Tag>Tag 1</Tag>
+  <Tag>Tag 2</Tag>
+</TagGroup>
+```
+
+**Features:**
+- Layout variants: `inline`, `wrap`, `stack`
+- Gap variants: `none`, `xs`, `sm`, `md`, `lg`
+- Align variants: `start`, `center`, `end`
+- Herança via Context: `size`, `disabled`
+
+### Prioridade Média
+
+#### `color` Prop
+
+Adicionar variantes de cor para casos específicos.
+
+```tsx
+// Proposta de API
+<Tag color="success">Approved</Tag>
+<Tag color="warning">Pending</Tag>
+<Tag color="error">Rejected</Tag>
+```
+
+**Referências:** MUI, Chakra, Ant Design
+
+#### `loading` State
+
+Estado de loading para operações assíncronas.
+
+```tsx
+<Tag loading>Processing...</Tag>
+```
+
+**Referências:** Ant Design, MUI
+
+### Prioridade Baixa
+
+#### `maxWidth` + Truncation
+
+Truncar texto longo com ellipsis.
+
+```tsx
+<Tag maxWidth={120}>Very long tag label that will be truncated</Tag>
+```
+
+**Referências:** Chakra UI
+
+---
+
+## Referências
+
+### Design Systems Analisados
+
+| Design System | Documentação | GitHub |
+|---------------|--------------|--------|
+| **MUI** | [Chip](https://mui.com/material-ui/react-chip/) | [mui/material-ui](https://github.com/mui/material-ui) |
+| **Chakra UI** | [Tag](https://chakra-ui.com/docs/components/tag) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
+| **Mantine** | [Chip](https://mantine.dev/core/chip/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
+| **Ant Design** | [Tag](https://ant.design/components/tag/) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
+| **Carbon** | [Tag](https://carbondesignsystem.com/components/tag/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
+| **NextUI/HeroUI** | [Chip](https://www.heroui.com/docs/components/chip) | [heroui-inc/heroui](https://github.com/heroui-inc/heroui) |
+| **Fluent UI** | [Tag](https://react.fluentui.dev/?path=/docs/components-tag--default) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
+| **Radix UI** | [ToggleGroup](https://www.radix-ui.com/primitives/docs/components/toggle-group) | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
+
+### Especificações e Padrões
+
+- [WAI-ARIA APG - Checkbox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)
+- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN - Checkbox Role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role)
+
+### Ferramentas Utilizadas
+
+- [CVA - Class Variance Authority](https://cva.style/docs)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [Lucide Icons](https://lucide.dev/icons/)