@etus/ui 0.1.0 → 0.1.2

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

@@ -1,759 +0,0 @@
-# Icon
-
-## Visão Geral
-
-O **Icon** e o componente atomico para renderizacao de icones SVG no Design System ETUS. Funciona como um wrapper flexivel sobre a biblioteca Lucide React, padronizando tamanhos, cores e comportamentos de acessibilidade para todos os icones da interface.
-
-### Casos de Uso
-
-- Icones de acao em botoes e links
-- Indicadores visuais de status
-- Decoracao em componentes compostos (Card, Alert, Badge)
-- Navegacao e orientacao visual
-- Feedback de estados (loading, success, error)
-
-### Classificacao
-
-**Categoria:** Atom (Primitivo)
-**Dependencias:** `lucide-react`, `class-variance-authority`
-
----
-
-## Design Specs
-
-### Variantes (`variant`)
-
-| Variante | Uso | Tokens |
-|----------|-----|--------|
-| `default` | Herda cor do contexto | `text-current` |
-| `muted` | Icones secundarios | `text-muted-foreground` |
-| `primary` | Destaque primario | `text-primary` |
-| `destructive` | Acoes perigosas | `text-destructive` |
-| `success` | Feedback positivo | `text-green-600` |
-| `warning` | Alertas | `text-yellow-600` |
-
-### Tamanhos (`size`)
-
-| Tamanho | Dimensao | Classe | Uso |
-|---------|----------|--------|-----|
-| `xs` | 12px | `size-3` | Badges, indicadores |
-| `sm` | 16px | `size-4` | Botoes pequenos, inline |
-| `md` | 20px | `size-5` | Uso geral, default |
-| `lg` | 24px | `size-6` | Headers, destaque |
-| `xl` | 32px | `size-8` | Empty states, hero |
-| `2xl` | 48px | `size-12` | Ilustracoes |
-
-### Estados
-
-| Estado | Classes/Atributos | Comportamento |
-|--------|-------------------|---------------|
-| Default | - | Aparencia base |
-| Hover | `group-hover:*` | Responde ao hover do pai |
-| Disabled | `opacity-50` | 50% opacidade |
-| Spinning | `animate-spin` | Animacao de rotacao |
-| Pulsing | `animate-pulse` | Animacao de pulso |
-
-### Tokens Utilizados
-
-```css
-/* Cores */
---foreground         /* text-current herda */
---muted-foreground   /* Variante muted */
---primary            /* Variante primary */
---destructive        /* Variante destructive */
-
-/* Tamanhos (Tailwind size-*) */
-size-3               /* 12px - xs */
-size-4               /* 16px - sm */
-size-5               /* 20px - md (default) */
-size-6               /* 24px - lg */
-size-8               /* 32px - xl */
-size-12              /* 48px - 2xl */
-
-/* Animacoes */
-animate-spin         /* Rotacao continua */
-animate-pulse        /* Pulso de opacidade */
-
-/* Transicoes */
-transition-colors    /* Mudanca de cor suave */
-```
-
-### data-slot
-
-```html
-<svg data-slot="icon">...</svg>
-```
-
----
-
-## API
-
-### Props
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `name` | `LucideIcon` | - | Componente de icone Lucide |
-| `variant` | `"default" \| "muted" \| "primary" \| "destructive" \| "success" \| "warning"` | `"default"` | Estilo de cor |
-| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `"md"` | Tamanho do icone |
-| `spin` | `boolean` | `false` | Ativa animacao de rotacao |
-| `pulse` | `boolean` | `false` | Ativa animacao de pulso |
-| `className` | `string` | - | Classes CSS adicionais |
-| `aria-label` | `string` | - | Label para screen readers |
-| `aria-hidden` | `boolean` | `true` | Oculta de screen readers (decorativo) |
-| `ref` | `Ref<SVGSVGElement>` | - | Referencia ao elemento SVG |
-
-> Herda todas as props de `React.ComponentProps<"svg">`
-
-### Callbacks
-
-| Callback | Tipo | Descricao |
-|----------|------|-----------|
-| `onClick` | `(event: MouseEvent) => void` | Disparado ao clicar (se interativo) |
-| `onMouseEnter` | `(event: MouseEvent) => void` | Disparado ao hover |
-| `onMouseLeave` | `(event: MouseEvent) => void` | Disparado ao sair do hover |
-
-### TypeScript
-
-```typescript
-import { type VariantProps } from "class-variance-authority"
-import type { LucideIcon } from "lucide-react"
-
-// Variants exportadas
-const iconVariants = cva(/* ... */)
-
-// Props do componente
-interface IconProps extends React.ComponentProps<"svg">,
-  VariantProps<typeof iconVariants> {
-  name: LucideIcon
-  spin?: boolean
-  pulse?: boolean
-}
-
-// Tipos derivados uteis
-type IconVariant = NonNullable<VariantProps<typeof iconVariants>["variant"]>
-type IconSize = NonNullable<VariantProps<typeof iconVariants>["size"]>
-
-// Re-export de tipos Lucide
-export type { LucideIcon, LucideProps } from "lucide-react"
-```
-
-### Comparativo com Design Systems de Referencia
-
-#### Matriz de Features (14 Design Systems)
-
-| Feature | ETUS | Shadcn | Radix | React Aria | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon | Blueprint | PrimeReact |
-|---------|:----:|:------:|:-----:|:----------:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|:----------:|
-| **Wrapper Component** | Y | - | - | - | Y | Y | Y | Y | Y | - | - | Y | Y | Y | Y |
-| **Size Variants** | 6 | - | - | - | 6 | 3 | 5 | 4 | 4 | - | - | 5 | 4 | 4 | 4 |
-| **Color Variants** | 6 | - | - | - | Y | Y | Y | Y | Y | - | - | Y | Y | - | Y |
-| **CVA/cva** | Y | - | - | - | - | - | - | - | Y | - | - | - | - | - | - |
-| **Spin Animation** | Y | - | - | - | Y | - | Y | Y | Y | - | - | Y | - | Y | Y |
-| **Library Agnostic** | - | - | - | - | - | Y | - | Y | - | - | - | Y | Y | Y | - |
-| **Custom SVG** | Y | - | - | - | Y | Y | Y | Y | Y | - | - | Y | Y | Y | Y |
-| **Icon Sprites** | - | - | - | - | - | - | - | Y | - | - | - | - | Y | - | - |
-| **data-slot** | Y | Y | - | - | - | - | - | - | Y | - | - | - | - | - | - |
-| **aria-hidden auto** | Y | - | - | - | Y | Y | Y | Y | Y | - | - | Y | Y | Y | Y |
-
-#### Comparativo de Props por Design System
-
-| Prop | ETUS | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon |
-|------|:----:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|
-| `size` | Y | `boxSize` | `fontSize` | `size` | `style` | `size` | `size` | `size` |
-| `color` | `variant` | `color` | `color` | `color` | `style` | `color` | `primaryFill` | - |
-| `spin` | Y | Y | - | - | `spin` | - | - | - |
-| `name` | Y | - | - | - | `component` | - | - | `icon` |
-| `as` | - | Y | `component` | - | `component` | - | - | - |
-| `viewBox` | Y | Y | `viewBox` | - | - | - | - | - |
-| `focusable` | - | Y | - | - | - | - | `focusable` | - |
-| `title` | - | - | `titleAccess` | - | - | - | `title` | `description` |
-
-#### Abordagens de Icones por Design System
-
-| Design System | Abordagem | Biblioteca | Notas |
-|---------------|-----------|------------|-------|
-| **ETUS** | Wrapper + Lucide | lucide-react | Wrapper padronizado |
-| **Shadcn/ui** | Direto | lucide-react | Sem wrapper, usa direto |
-| **Chakra UI** | Wrapper generico | @chakra-ui/icons | createIcon() utility |
-| **MUI** | Wrapper + SVG | @mui/icons-material | SvgIcon base component |
-| **Mantine** | Componente | @tabler/icons-react | Tabler icons integrado |
-| **Ant Design** | Wrapper | @ant-design/icons | createFromIconfontCN |
-| **NextUI** | Direto | lucide-react | Sem wrapper proprio |
-| **Fluent UI** | Bundle | @fluentui/react-icons | Icon library propria |
-| **Carbon** | Wrapper | @carbon/icons-react | Sprites suportados |
-| **Blueprint** | Componente | @blueprintjs/icons | Icon enum type-safe |
-| **PrimeReact** | CSS/Font | primeicons | Font icon fallback |
-
----
-
-## Acessibilidade (A11y)
-
-### ARIA Attributes
-
-| Atributo | Uso |
-|----------|-----|
-| `aria-hidden="true"` | Padrao para icones decorativos |
-| `aria-label` | Quando icone tem significado (sem texto) |
-| `role="img"` | Quando icone e informativo |
-| `role="presentation"` | Alternativa a aria-hidden |
-| `focusable="false"` | Previne foco em SVG |
-
-### Regras de Uso
-
-```tsx
-// Decorativo (acompanha texto) - padrao
-<Icon name={Mail} aria-hidden="true" />
-<span>Enviar email</span>
-
-// Informativo (sem texto acompanhante)
-<Icon name={AlertTriangle} aria-label="Aviso: acao necessaria" role="img" />
-
-// Em botao (botao tem o label)
-<Button aria-label="Deletar item">
-  <Icon name={Trash} aria-hidden="true" />
-</Button>
-
-// Icone interativo standalone (evitar - preferir IconButton)
-<Icon
-  name={Close}
-  aria-label="Fechar"
-  role="button"
-  tabIndex={0}
-  onClick={handleClose}
-/>
-```
-
-### Suporte a Teclado
-
-| Tecla | Acao |
-|-------|------|
-| `Tab` | Pula icones decorativos (focusable=false) |
-| `Enter/Space` | Ativa se role="button" |
-
-### Focus Management
-
-```tsx
-// Icones NAO devem receber foco por padrao
-<svg focusable="false" aria-hidden="true">
-
-// Se interativo (raro), adicionar focus visible
-focus-visible:ring-2
-focus-visible:ring-ring
-focus-visible:ring-offset-2
-focus-visible:outline-none
-```
-
-### Contraste de Cores
-
-Icones devem manter contraste minimo de 3:1 com o fundo:
-
-| Variante | Token | Uso |
-|----------|-------|-----|
-| default | `currentColor` | Herda do texto pai |
-| muted | `--muted-foreground` | Verificar contraste |
-| primary | `--primary` | OK em fundos claros |
-| destructive | `--destructive` | OK em fundos claros |
-
-### Screen Readers
-
-- Icones decorativos: sempre `aria-hidden="true"`
-- Icones informativos: sempre `aria-label` descritivo
-- Evitar redundancia: se texto acompanha, icone e decorativo
-- Loading spinners: usar `role="status"` + `aria-label="Carregando"`
-
-### Reduced Motion
-
-```tsx
-// Respeitar preferencia do usuario
-@media (prefers-reduced-motion: reduce) {
-  .animate-spin,
-  .animate-pulse {
-    animation: none;
-  }
-}
-
-// Ou via Tailwind
-motion-reduce:animate-none
-```
-
-### Comparativo A11y (14 Design Systems)
-
-| Feature | ETUS | React Aria | Radix | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint |
-|---------|:----:|:----------:|:-----:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|
-| **aria-hidden auto** | Y | - | - | Y | Y | Y | Y | Y | Y | Y | Y |
-| **aria-label prop** | Y | - | - | Y | `titleAccess` | - | - | - | Y | `description` | `title` |
-| **focusable=false** | Y | - | - | Y | Y | - | - | - | Y | Y | - |
-| **role="img"** | opt | - | - | opt | opt | - | - | - | opt | opt | - |
-| **Reduced motion** | Y | - | - | Y | Y | Y | - | Y | Y | Y | - |
-| **SVG title** | - | - | - | - | Y | - | - | - | Y | Y | Y |
-
-**Legenda:** Y = Suporte completo | opt = Opcional/manual | - = Nao suportado
-
----
-
-## Exemplos
-
-### Uso Basico
-
-```tsx
-import { Icon } from "@etus/ui"
-import { Mail } from "lucide-react"
-
-function Example() {
-  return <Icon name={Mail} />
-}
-```
-
-### Variantes de Cor
-
-```tsx
-import { Icon } from "@etus/ui"
-import {
-  CheckCircle,
-  AlertTriangle,
-  XCircle,
-  Info
-} from "lucide-react"
-
-<Icon name={Info} variant="default" />
-<Icon name={Info} variant="muted" />
-<Icon name={CheckCircle} variant="success" />
-<Icon name={AlertTriangle} variant="warning" />
-<Icon name={XCircle} variant="destructive" />
-<Icon name={Info} variant="primary" />
-```
-
-### Tamanhos
-
-```tsx
-<Icon name={Star} size="xs" />  {/* 12px */}
-<Icon name={Star} size="sm" />  {/* 16px */}
-<Icon name={Star} size="md" />  {/* 20px - default */}
-<Icon name={Star} size="lg" />  {/* 24px */}
-<Icon name={Star} size="xl" />  {/* 32px */}
-<Icon name={Star} size="2xl" /> {/* 48px */}
-```
-
-### Com Animacoes
-
-```tsx
-import { Loader2, Heart } from "lucide-react"
-
-// Spinner de loading
-<Icon name={Loader2} spin />
-
-// Pulso (atencao)
-<Icon name={Heart} pulse variant="destructive" />
-
-// Combinado com tamanho
-<Icon name={Loader2} spin size="lg" variant="primary" />
-```
-
-### Composicao com Texto
-
-```tsx
-// Inline com texto
-<p className="flex items-center gap-2">
-  <Icon name={Mail} size="sm" aria-hidden />
-  contato@exemplo.com
-</p>
-
-// Em lista
-<ul className="space-y-2">
-  <li className="flex items-center gap-2">
-    <Icon name={Check} variant="success" size="sm" />
-    Item concluido
-  </li>
-</ul>
-```
-
-### Com Botao
-
-```tsx
-import { Button } from "@etus/ui"
-import { Send, Loader2 } from "lucide-react"
-
-// Icone no botao
-<Button>
-  <Icon name={Send} size="sm" aria-hidden />
-  Enviar
-</Button>
-
-// Loading state
-<Button disabled>
-  <Icon name={Loader2} spin size="sm" aria-hidden />
-  Enviando...
-</Button>
-```
-
-### Icone Acessivel (Informativo)
-
-```tsx
-// Quando icone tem significado proprio
-<Icon
-  name={AlertTriangle}
-  variant="warning"
-  aria-label="Aviso importante"
-  role="img"
-  aria-hidden={false}
-/>
-
-// Status indicator
-<span className="flex items-center gap-1">
-  <Icon
-    name={Circle}
-    size="xs"
-    className="fill-green-500 text-green-500"
-    aria-label="Status: Online"
-    role="img"
-    aria-hidden={false}
-  />
-  <span className="sr-only">Online</span>
-</span>
-```
-
-### Responsividade
-
-```tsx
-// Tamanho responsivo via className
-<Icon
-  name={Menu}
-  className="size-5 md:size-6 lg:size-8"
-/>
-
-// Visibilidade responsiva
-<Icon
-  name={Menu}
-  className="md:hidden"
-/>
-<Icon
-  name={LayoutGrid}
-  className="hidden md:block"
-/>
-```
-
-### Com Container Queries
-
-```tsx
-<div className="@container">
-  <Icon
-    name={Search}
-    className="@xs:size-4 @sm:size-5 @md:size-6"
-  />
-</div>
-```
-
-### Customizacao Avancada
-
-```tsx
-// Stroke width customizado
-<Icon
-  name={Heart}
-  strokeWidth={1.5}
-  className="size-8"
-/>
-
-// Preenchimento
-<Icon
-  name={Star}
-  className="fill-yellow-400 text-yellow-500"
-/>
-
-// Hover no pai
-<button className="group">
-  <Icon
-    name={Heart}
-    className="group-hover:fill-red-500 group-hover:text-red-500 transition-colors"
-  />
-</button>
-```
-
----
-
-## Testes
-
-### Testes Unitarios
-
-```tsx
-// Icon.test.tsx
-import { render, screen } from "@testing-library/react"
-import { describe, expect, it } from "vitest"
-import { Icon } from "./Icon"
-import { Mail, AlertTriangle, Loader2 } from "lucide-react"
-
-describe("Icon", () => {
-  it("renders correctly", () => {
-    render(<Icon name={Mail} aria-label="Email" />)
-    expect(screen.getByLabelText("Email")).toBeInTheDocument()
-  })
-
-  it("applies size classes", () => {
-    const { container } = render(<Icon name={Mail} size="lg" />)
-    expect(container.querySelector("svg")).toHaveClass("size-6")
-  })
-
-  it("applies variant classes", () => {
-    const { container } = render(<Icon name={Mail} variant="primary" />)
-    expect(container.querySelector("svg")).toHaveClass("text-primary")
-  })
-
-  it("merges custom className", () => {
-    const { container } = render(<Icon name={Mail} className="custom-class" />)
-    expect(container.querySelector("svg")).toHaveClass("custom-class")
-  })
-
-  it("has data-slot attribute", () => {
-    const { container } = render(<Icon name={Mail} />)
-    expect(container.querySelector("svg")).toHaveAttribute("data-slot", "icon")
-  })
-
-  it("applies spin animation", () => {
-    const { container } = render(<Icon name={Loader2} spin />)
-    expect(container.querySelector("svg")).toHaveClass("animate-spin")
-  })
-
-  it("applies pulse animation", () => {
-    const { container } = render(<Icon name={Mail} pulse />)
-    expect(container.querySelector("svg")).toHaveClass("animate-pulse")
-  })
-})
-```
-
-### Testes de Acessibilidade
-
-```tsx
-import { axe, toHaveNoViolations } from "jest-axe"
-
-expect.extend(toHaveNoViolations)
-
-describe("Icon accessibility", () => {
-  it("has no accessibility violations when decorative", async () => {
-    const { container } = render(
-      <div>
-        <Icon name={Mail} aria-hidden="true" />
-        <span>Email</span>
-      </div>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-
-  it("has no accessibility violations when informative", async () => {
-    const { container } = render(
-      <Icon name={AlertTriangle} aria-label="Warning" role="img" />
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-
-  it("is hidden from screen readers by default", () => {
-    const { container } = render(<Icon name={Mail} />)
-    expect(container.querySelector("svg")).toHaveAttribute("aria-hidden", "true")
-  })
-
-  it("is not focusable by default", () => {
-    const { container } = render(<Icon name={Mail} />)
-    expect(container.querySelector("svg")).toHaveAttribute("focusable", "false")
-  })
-
-  it("can be made accessible with aria-label", () => {
-    render(
-      <Icon
-        name={AlertTriangle}
-        aria-label="Aviso"
-        aria-hidden={false}
-        role="img"
-      />
-    )
-    expect(screen.getByRole("img", { name: "Aviso" })).toBeInTheDocument()
-  })
-})
-```
-
-### Testes de Interacao
-
-```tsx
-import userEvent from "@testing-library/user-event"
-
-describe("Icon interactions", () => {
-  it("responds to click when onClick provided", async () => {
-    const user = userEvent.setup()
-    const handleClick = vi.fn()
-
-    const { container } = render(
-      <Icon name={Mail} onClick={handleClick} />
-    )
-
-    await user.click(container.querySelector("svg")!)
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-
-  it("does not receive focus by default", () => {
-    const { container } = render(<Icon name={Mail} />)
-    const svg = container.querySelector("svg")!
-
-    svg.focus()
-    expect(svg).not.toHaveFocus()
-  })
-})
-```
-
-### Testes de Variantes
-
-```tsx
-describe("Icon variants", () => {
-  const sizes = ["xs", "sm", "md", "lg", "xl", "2xl"] as const
-  const variants = ["default", "muted", "primary", "destructive", "success", "warning"] as const
-
-  it.each(sizes)("renders size %s correctly", (size) => {
-    const { container } = render(<Icon name={Mail} size={size} />)
-    expect(container.querySelector("svg")).toBeInTheDocument()
-  })
-
-  it.each(variants)("renders variant %s correctly", (variant) => {
-    const { container } = render(<Icon name={Mail} variant={variant} />)
-    expect(container.querySelector("svg")).toBeInTheDocument()
-  })
-
-  it("combines size and variant", () => {
-    const { container } = render(
-      <Icon name={Mail} size="lg" variant="destructive" />
-    )
-    const svg = container.querySelector("svg")
-    expect(svg).toHaveClass("size-6")
-    expect(svg).toHaveClass("text-destructive")
-  })
-})
-```
-
-### Cenarios Criticos
-
-```tsx
-describe("Icon edge cases", () => {
-  it("forwards ref correctly", () => {
-    const ref = { current: null }
-    render(<Icon name={Mail} ref={ref} />)
-    expect(ref.current).toBeInstanceOf(SVGSVGElement)
-  })
-
-  it("passes through SVG props", () => {
-    const { container } = render(
-      <Icon name={Mail} strokeWidth={1.5} />
-    )
-    expect(container.querySelector("svg")).toHaveAttribute("stroke-width", "1.5")
-  })
-
-  it("handles missing name gracefully", () => {
-    // @ts-expect-error - testing runtime behavior
-    expect(() => render(<Icon name={undefined} />)).not.toThrow()
-  })
-
-  it("respects reduced motion preference", () => {
-    // Mock matchMedia
-    window.matchMedia = vi.fn().mockImplementation(query => ({
-      matches: query === "(prefers-reduced-motion: reduce)",
-      media: query,
-      onchange: null,
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-    }))
-
-    const { container } = render(<Icon name={Loader2} spin />)
-    // Component should still have the class, CSS handles the actual behavior
-    expect(container.querySelector("svg")).toHaveClass("animate-spin")
-  })
-})
-```
-
----
-
-## Roadmap / Features Futuras
-
-Baseado na analise comparativa com 14 design systems:
-
-### Prioridade Alta
-
-#### Icon Sprites Support
-
-```tsx
-// Proposta de API
-<IconSprite href="/icons.svg" />
-<Icon name="mail" sprite /> // Usa sprite ao inves de inline
-```
-
-**Referencias:** Carbon, Ant Design
-
-### Prioridade Media
-
-#### `asChild` Pattern
-
-```tsx
-// Renderizar como outro elemento
-<Icon asChild name={ExternalLink}>
-  <a href="..." />
-</Icon>
-```
-
-#### Custom Icon Factory
-
-```tsx
-// Criar icones customizados
-const CustomIcon = createIcon({
-  path: "M10 0...",
-  viewBox: "0 0 24 24",
-  displayName: "CustomIcon"
-})
-```
-
-**Referencias:** Chakra UI (`createIcon`)
-
-### Prioridade Baixa
-
-#### Icon Font Fallback
-
-```tsx
-// Fallback para icon fonts
-<Icon name="mail" fallback="fa-envelope" />
-```
-
-### Decisoes de Design
-
-| Feature | Recomendacao | Justificativa |
-|---------|--------------|---------------|
-| `name` prop | Y Implementar | Type-safety com Lucide |
-| Size variants | Y Implementar | Consistencia com Button |
-| Color variants | Y Implementar | Padronizacao de estados |
-| `spin`/`pulse` | Y Implementar | Loading states comuns |
-| Sprites | Avaliar | Performance vs complexidade |
-| Icon font | X Evitar | SVG superior em qualidade |
-
----
-
-## Referências
-
-### Design Systems Analisados
-
-| Design System | Documentacao Icon | GitHub |
-|---------------|-------------------|--------|
-| **Shadcn/ui** | Usa Lucide direto | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
-| **Chakra UI** | [Icon](https://chakra-ui.com/docs/components/icon) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
-| **MUI** | [SvgIcon](https://mui.com/material-ui/api/svg-icon/) | [mui/material-ui](https://github.com/mui/material-ui) |
-| **Mantine** | [ThemeIcon](https://mantine.dev/core/theme-icon/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
-| **Ant Design** | [Icon](https://ant.design/components/icon) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
-| **NextUI** | Usa Lucide direto | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
-| **Fluent UI** | [Icon](https://react.fluentui.dev/?path=/docs/icons-icons) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
-| **Carbon** | [Icon](https://carbondesignsystem.com/guidelines/icons/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
-| **Blueprint** | [Icon](https://blueprintjs.com/docs/#core/components/icon) | [palantir/blueprint](https://github.com/palantir/blueprint) |
-| **PrimeReact** | [Icons](https://primereact.org/icons/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
-
-### Especificacoes e Padroes
-
-- [WAI-ARIA - Images](https://www.w3.org/WAI/tutorials/images/)
-- [SVG Accessibility](https://www.w3.org/TR/SVG2/access.html)
-- [Lucide Icons](https://lucide.dev/guide/)
-- [WCAG 2.1 - Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html)
-
-### Ferramentas Utilizadas
-
-- [Lucide React](https://lucide.dev/guide/packages/lucide-react)
-- [CVA - Class Variance Authority](https://cva.style/docs)
-- [Tailwind CSS](https://tailwindcss.com/docs)