npm - @etus/ui - Versions diffs - 0.1.0 → 0.1.2 - Mend

@etus/ui 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1080) hide show

package/src/components/primitives/Heading/README.md DELETED Viewed

@@ -1,820 +0,0 @@
-# Heading
-## Visão Geral
-O **Heading** e o componente de tipografia semantica do Design System ETUS, usado para criar hierarquia visual e estrutura de conteudo. Como elemento atomico, renderiza elementos HTML h1-h6 com separacao entre nivel semantico (para acessibilidade/SEO) e tamanho visual (para design).
-### Casos de Uso
-- Titulos de paginas e secoes
-- Hierarquia de conteudo em artigos
-- Cabecalhos de cards e modais
-- Titulos de formularios
-- Navegacao por headings para screen readers
-### Classificacao
-**Categoria:** Atom (Primitivo)
-**Dependencias:** `@radix-ui/react-slot`, `class-variance-authority`
----
-## Design Specs
-### Niveis Semanticos (`level`)
-| Nivel | Elemento | Tamanho Padrao | Uso |
-|-------|----------|----------------|-----|
-| `1` | `<h1>` | `text-4xl lg:text-5xl` | Titulo principal da pagina (1 por pagina) |
-| `2` | `<h2>` | `text-3xl` | Secoes principais |
-| `3` | `<h3>` | `text-2xl` | Subsecoes |
-| `4` | `<h4>` | `text-xl` | Grupos de conteudo |
-| `5` | `<h5>` | `text-lg` | Detalhes importantes |
-| `6` | `<h6>` | `text-base` | Informacoes auxiliares |
-### Tamanhos Visuais (`size`)
-| Tamanho | Classes | Uso |
-|---------|---------|-----|
-| `4xl` | `text-4xl lg:text-5xl font-bold` | Hero, titulos principais |
-| `3xl` | `text-3xl` | Secoes de destaque |
-| `2xl` | `text-2xl` | Subsecoes |
-| `xl` | `text-xl` | Cabecalhos de cards |
-| `lg` | `text-lg` | Titulos de listas |
-| `base` | `text-base` | Titulos inline |
-| `sm` | `text-sm` | Labels de secoes |
-### Pesos (`weight`)
-| Peso | Classe | Uso |
-|------|--------|-----|
-| `normal` | `font-normal` | Texto corrido |
-| `medium` | `font-medium` | Enfase leve |
-| `semibold` | `font-semibold` | Padrao para headings |
-| `bold` | `font-bold` | Destaque forte |
-| `extrabold` | `font-extrabold` | Hero text |
-### Alinhamento (`align`)
-| Alinhamento | Classe | Uso |
-|-------------|--------|-----|
-| `left` | `text-left` | Padrao, leitura ocidental |
-| `center` | `text-center` | Titulos hero, cards centrados |
-| `right` | `text-right` | Layouts RTL, casos especiais |
-### Cores (`color`)
-| Cor | Token | Uso |
-|-----|-------|-----|
-| `default` | `text-foreground` | Padrao, alto contraste |
-| `muted` | `text-muted-foreground` | Titulos secundarios |
-| `primary` | `text-primary` | Destaque, branding |
-| `destructive` | `text-destructive` | Alertas, erros |
-### Tokens Utilizados
-```css
-/* Cores */
---foreground           /* Cor padrao do texto */
---muted-foreground     /* Texto secundario */
---primary              /* Cor de destaque */
---destructive          /* Cor de erro/alerta */
-/* Tipografia */
-text-sm                /* 14px */
-text-base              /* 16px */
-text-lg                /* 18px */
-text-xl                /* 20px */
-text-2xl               /* 24px */
-text-3xl               /* 30px */
-text-4xl               /* 36px */
-text-5xl               /* 48px */
-/* Font Weight */
-font-normal            /* 400 */
-font-medium            /* 500 */
-font-semibold          /* 600 */
-font-bold              /* 700 */
-font-extrabold         /* 800 */
-/* Espacamento */
-tracking-tight         /* letter-spacing: -0.025em */
-scroll-m-20            /* scroll-margin-top: 5rem */
-```
-### data-slot
-```html
-<h2 data-slot="heading" data-level="2">...</h2>
-```
----
-## API
-### Props
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` | Nivel semantico do heading (h1-h6) |
-| `size` | `"4xl" \| "3xl" \| "2xl" \| "xl" \| "lg" \| "base" \| "sm"` | - | Tamanho visual (sobrescreve tamanho do nivel) |
-| `weight` | `"normal" \| "medium" \| "semibold" \| "bold" \| "extrabold"` | `"semibold"` | Peso da fonte |
-| `align` | `"left" \| "center" \| "right"` | `"left"` | Alinhamento do texto |
-| `color` | `"default" \| "muted" \| "primary" \| "destructive"` | `"default"` | Cor do texto |
-| `truncate` | `boolean` | `false` | Trunca texto com ellipsis |
-| `asChild` | `boolean` | `false` | Renderiza children como elemento (polimorfismo) |
-| `className` | `string` | - | Classes CSS adicionais |
-| `children` | `ReactNode` | - | Conteudo do heading |
-| `ref` | `Ref<HTMLHeadingElement>` | - | Referencia ao elemento DOM |
-> Herda todas as props de `React.ComponentProps<"h1">`
-### TypeScript
-```typescript
-import { type VariantProps } from "class-variance-authority"
-// Variants exportadas
-const headingVariants = cva(/* ... */)
-// Tipos exportados
-type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
-// Props do componente
-interface HeadingProps
-  extends Omit<React.ComponentProps<"h1">, "color">,
-    VariantProps<typeof headingVariants> {
-  level?: HeadingLevel
-  size?: VariantProps<typeof headingVariants>["size"]
-  asChild?: boolean
-}
-// Tipos derivados uteis
-type HeadingSize = NonNullable<VariantProps<typeof headingVariants>["size"]>
-type HeadingWeight = NonNullable<VariantProps<typeof headingVariants>["weight"]>
-```
-### 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 |
-|---------|:----:|:------:|:-----:|:----------:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|
-| **Niveis h1-h6** | 6 | - | - | - | 6 | 6 | 6 | 5 | - | - | - | - | - | 6 |
-| **Tamanhos** | 7 | - | - | - | 9 | 6 | 7 | - | - | - | - | - | 7 | - |
-| **CVA/cva** | ok | ok | - | - | - | - | - | - | ok | - | - | - | - | - |
-| **asChild/Slot** | ok | - | ok | - | - | - | - | - | ok | ok | ok | - | - | - |
-| **size independente** | ok | - | - | - | - | - | ok | - | - | - | - | - | - | - |
-| **weight** | 5 | - | - | - | 9 | - | ok | - | - | - | - | ok | ok | - |
-| **align** | 3 | - | - | - | 4 | ok | ok | - | - | - | - | - | - | - |
-| **color variants** | 4 | - | - | - | ok | ok | ok | - | ok | - | - | ok | - | - |
-| **truncate** | ok | - | - | - | ok | ok | ok | ok | - | - | - | ok | - | - |
-| **data-slot** | ok | ok | - | - | - | - | - | - | ok | - | - | - | - | - |
-| **gradient** | - | - | - | - | ok | - | ok | - | - | - | - | - | - | - |
-| **responsive size** | ok | - | - | - | ok | ok | ok | - | - | - | - | ok | - | - |
-#### Comparativo de APIs por Design System
-| Design System | Componente | API Principal |
-|---------------|------------|---------------|
-| **ETUS** | `Heading` | `level`, `size`, `weight`, `align`, `color` |
-| **Chakra UI** | `Heading` | `as`, `size` (2xs-4xl), `fontWeight`, `textAlign` |
-| **MUI** | `Typography` | `variant` (h1-h6), `component`, `align`, `color` |
-| **Mantine** | `Title` | `order` (1-6), `size`, `fw`, `ta`, `c` |
-| **Ant Design** | `Typography.Title` | `level` (1-5), `type`, `ellipsis` |
-| **Blueprint** | `H1-H6` | Componentes separados por nivel |
-| **Fluent UI** | `Text` | `variant`, `size`, `weight`, `align` |
-| **Carbon** | `Heading` | Componentes por nivel ou `as` prop |
-#### Comparativo de Props por Design System
-| Prop | ETUS | Chakra | MUI | Mantine | AntD | NextUI | Fluent |
-|------|:----:|:------:|:---:|:-------:|:----:|:------:|:------:|
-| `level`/`order` | `level` | `as` | `variant` | `order` | `level` | - | `variant` |
-| `size` | ok | ok | - | ok | - | ok | ok |
-| `weight` | ok | `fontWeight` | - | `fw` | - | - | ok |
-| `align` | ok | `textAlign` | ok | `ta` | - | - | ok |
-| `color` | ok | `color` | ok | `c` | `type` | `color` | ok |
-| `truncate` | ok | `noOfLines` | `noWrap` | `lineClamp` | `ellipsis` | - | `truncate` |
-| `gradient` | - | `bgGradient` | - | `gradient` | - | - | - |
-| `asChild`/`as` | ok | ok | `component` | `component` | - | ok | `as` |
-#### Analise por Categoria
-**Headless/Primitivos (sem estilos):**
-- **Radix UI** - Sem componente Heading, apenas Slot
-- **Headless UI** - Sem componente tipografico
-- **Ariakit** - Sem componente Heading dedicado
-- **React Aria** - Hooks para landmarks, sem tipografia
-**Styled/Opinionated (alta produtividade):**
-- **Chakra UI** - `Heading` + `Text`, excelente DX com style props
-- **MUI** - `Typography` unificado com variants h1-h6
-- **Mantine** - `Title` + `Text`, props abreviadas (fw, ta, c)
-- **Ant Design** - `Typography.Title`, suporte a ellipsis avancado
-**Hybrid (meio-termo):**
-- **Shadcn/ui** - Sem componente Heading oficial (usa HTML direto)
-- **NextUI** - Sem componente tipografico dedicado
-- **ETUS** - CVA + Tailwind, nivel e tamanho independentes
-**Enterprise:**
-- **Fluent UI** - `Text` com muitas variants
-- **Carbon** - Componentes por nivel ou prop `as`
-- **Blueprint** - Componentes separados H1, H2, H3...
----
-## Acessibilidade (A11y)
-### ARIA Attributes
-| Atributo | Uso |
-|----------|-----|
-| `id` | Para navegacao por ancora (#secao) |
-| `aria-level` | Automatico via elemento h1-h6 |
-| `aria-labelledby` | Quando heading rotula uma secao |
-### Hierarquia de Headings
-```tsx
-// CORRETO: Hierarquia sequencial
-<Heading level={1}>Pagina</Heading>
-<Heading level={2}>Secao</Heading>
-<Heading level={3}>Subsecao</Heading>
-// ERRADO: Pular niveis
-<Heading level={1}>Pagina</Heading>
-<Heading level={3}>Subsecao</Heading> // Pulou h2!
-```
-### Separacao Semantica vs Visual
-```tsx
-// H2 semantico com aparencia visual de H1
-// Util quando ja existe um H1 na pagina
-<Heading level={2} size="4xl">
-  Titulo de Destaque
-</Heading>
-```
-### Suporte a Teclado
-| Tecla | Acao |
-|-------|------|
-| `Tab` | Navega para links/botoes dentro do heading |
-| `H` (screen reader) | Navega entre headings |
-| `1-6` (screen reader) | Navega para headings do nivel especifico |
-### Contraste de Cores
-Todos os pares de cores seguem WCAG 2.1 AA (minimo 4.5:1):
-| Cor | Token | Background | Ratio |
-|-----|-------|------------|-------|
-| default | `--foreground` | `--background` | >= 4.5:1 |
-| muted | `--muted-foreground` | `--background` | >= 4.5:1 |
-| primary | `--primary` | `--background` | >= 4.5:1 |
-| destructive | `--destructive` | `--background` | >= 4.5:1 |
-### Screen Readers
-- Anunciam automaticamente o nivel do heading
-- Permitem navegacao rapida por headings
-- Criam outline do documento
-### Comparativo A11y (14 Design Systems)
-| Feature | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint | PrimeReact |
-|---------|:----:|:----------:|:-----:|:-------:|:--------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|:----------:|
-| **Semantica h1-h6** | ok | - | - | - | - | ok | ok | ok | ok | - | ok | ok | ok | ok |
-| **aria-level automatico** | ok | - | - | - | - | ok | ok | ok | ok | - | ok | ok | ok | ok |
-| **Contraste AA** | ok | ok | ok | ok | ok | ok | ok | ok | ok | ok | ok | ok | ok | ok |
-| **Skip links** | ~ | ok | - | - | - | ~ | ~ | ~ | ~ | - | ok | ok | ~ | ~ |
-| **Landmark support** | ~ | ok | - | ok | - | ~ | ~ | ~ | ~ | - | ok | ok | ~ | ~ |
-| **Reduced motion** | ok | ok | - | - | - | ok | ok | ok | - | ok | ok | ok | - | - |
-**Legenda:** ok = Suporte completo | ~ = Parcial/Manual | - = Nao aplicavel
-#### Abordagens de Acessibilidade
-| Design System | Abordagem | Notas |
-|---------------|-----------|-------|
-| **ETUS** | Semantica via `level` prop | Permite size independente para flexibilidade visual |
-| **Chakra UI** | `as` prop define elemento | Semantica acoplada ao elemento |
-| **MUI** | `variant` + `component` | Separacao possivel mas verbosa |
-| **Mantine** | `order` prop | Similar ao ETUS |
-| **Ant Design** | `level` prop | Limitado a 5 niveis |
----
-## Exemplos
-### Uso Basico
-```tsx
-import { Heading } from "@etus/ui"
-function Example() {
-  return <Heading>Titulo da Secao</Heading>
-}
-```
-### Todos os Niveis
-```tsx
-<Heading level={1}>Heading 1 - Titulo Principal</Heading>
-<Heading level={2}>Heading 2 - Secao</Heading>
-<Heading level={3}>Heading 3 - Subsecao</Heading>
-<Heading level={4}>Heading 4 - Grupo</Heading>
-<Heading level={5}>Heading 5 - Detalhe</Heading>
-<Heading level={6}>Heading 6 - Auxiliar</Heading>
-```
-### Tamanhos Visuais Independentes
-```tsx
-// H2 semantico com tamanho visual de H1 (para SEO/a11y)
-<Heading level={2} size="4xl">
-  Titulo Hero
-</Heading>
-// H3 semantico com tamanho pequeno
-<Heading level={3} size="sm">
-  Label de Secao
-</Heading>
-```
-### Pesos e Cores
-```tsx
-<Heading weight="bold">Negrito</Heading>
-<Heading weight="normal">Normal</Heading>
-<Heading color="primary">Primario</Heading>
-<Heading color="muted">Secundario</Heading>
-<Heading color="destructive">Erro</Heading>
-```
-### Alinhamento
-```tsx
-<Heading align="left">Alinhado a Esquerda</Heading>
-<Heading align="center">Centralizado</Heading>
-<Heading align="right">Alinhado a Direita</Heading>
-```
-### Truncamento
-```tsx
-<div className="w-48">
-  <Heading truncate>
-    Este titulo muito longo sera truncado com ellipsis
-  </Heading>
-</div>
-```
-### Polimorfismo com asChild
-```tsx
-import { Link } from "@tanstack/react-router"
-// Heading como link
-<Heading asChild level={2}>
-  <Link to="/secao">Ir para Secao</Link>
-</Heading>
-// Heading como span (quando ja existe heading pai)
-<Heading asChild level={3} size="lg">
-  <span>Subtitulo Inline</span>
-</Heading>
-```
-### Composicao com Cards
-```tsx
-import { Card, CardHeader, CardContent } from "@etus/ui"
-function ArticleCard() {
-  return (
-    <Card>
-      <CardHeader>
-        <Heading level={3} size="xl">
-          Titulo do Artigo
-        </Heading>
-      </CardHeader>
-      <CardContent>
-        <p>Conteudo do artigo...</p>
-      </CardContent>
-    </Card>
-  )
-}
-```
-### Hierarquia de Pagina Completa
-```tsx
-function ArticlePage() {
-  return (
-    <article>
-      <Heading level={1}>Guia Completo de React 19</Heading>
-      <section>
-        <Heading level={2}>Introducao</Heading>
-        <p>...</p>
-        <Heading level={3}>Pre-requisitos</Heading>
-        <p>...</p>
-      </section>
-      <section>
-        <Heading level={2}>Novos Hooks</Heading>
-        <Heading level={3}>useTransition</Heading>
-        <p>...</p>
-        <Heading level={3}>useDeferredValue</Heading>
-        <p>...</p>
-      </section>
-    </article>
-  )
-}
-```
-### Responsividade
-```tsx
-// Tamanho responsivo via className
-<Heading className="text-2xl md:text-3xl lg:text-4xl">
-  Titulo Responsivo
-</Heading>
-// Centralizado apenas em mobile
-<Heading className="text-center md:text-left">
-  Mobile Centered
-</Heading>
-```
-### Com Container Queries
-```tsx
-<div className="@container">
-  <Heading className="text-xl @md:text-2xl @lg:text-3xl">
-    Container Aware Heading
-  </Heading>
-</div>
-```
----
-## Testes
-### Testes Unitarios
-```tsx
-// Heading.test.tsx
-import { render, screen } from "@testing-library/react"
-import { describe, expect, it } from "vitest"
-import { Heading } from "./Heading"
-describe("Heading", () => {
-  it("renders children correctly", () => {
-    render(<Heading>Test Heading</Heading>)
-    expect(screen.getByRole("heading", { name: "Test Heading" })).toBeInTheDocument()
-  })
-  it("renders correct heading level", () => {
-    render(<Heading level={1}>H1 Heading</Heading>)
-    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument()
-  })
-  it("renders h2 by default", () => {
-    render(<Heading>Default Heading</Heading>)
-    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument()
-  })
-  it("applies size classes independently of level", () => {
-    render(<Heading level={2} size="4xl">Large H2</Heading>)
-    const heading = screen.getByRole("heading")
-    expect(heading).toHaveClass("text-4xl")
-    expect(heading.tagName).toBe("H2")
-  })
-  it("applies weight classes", () => {
-    render(<Heading weight="bold">Bold</Heading>)
-    expect(screen.getByRole("heading")).toHaveClass("font-bold")
-  })
-  it("applies color classes", () => {
-    render(<Heading color="primary">Primary</Heading>)
-    expect(screen.getByRole("heading")).toHaveClass("text-primary")
-  })
-  it("applies align classes", () => {
-    render(<Heading align="center">Centered</Heading>)
-    expect(screen.getByRole("heading")).toHaveClass("text-center")
-  })
-  it("applies truncate class", () => {
-    render(<Heading truncate>Truncated</Heading>)
-    expect(screen.getByRole("heading")).toHaveClass("truncate")
-  })
-  it("merges custom className", () => {
-    render(<Heading className="custom-class">Test</Heading>)
-    expect(screen.getByRole("heading")).toHaveClass("custom-class")
-  })
-  it("has data-slot attribute", () => {
-    render(<Heading>Test</Heading>)
-    expect(screen.getByRole("heading")).toHaveAttribute("data-slot", "heading")
-  })
-  it("has data-level attribute", () => {
-    render(<Heading level={3}>Test</Heading>)
-    expect(screen.getByRole("heading")).toHaveAttribute("data-level", "3")
-  })
-})
-```
-### Testes de Acessibilidade
-```tsx
-import { axe, toHaveNoViolations } from "jest-axe"
-expect.extend(toHaveNoViolations)
-describe("Heading accessibility", () => {
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Heading>Accessible</Heading>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-  it("all levels pass accessibility", async () => {
-    const { container } = render(
-      <>
-        <Heading level={1}>H1</Heading>
-        <Heading level={2}>H2</Heading>
-        <Heading level={3}>H3</Heading>
-        <Heading level={4}>H4</Heading>
-        <Heading level={5}>H5</Heading>
-        <Heading level={6}>H6</Heading>
-      </>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-  it("maintains correct heading hierarchy", () => {
-    render(
-      <>
-        <Heading level={1}>Page Title</Heading>
-        <Heading level={2}>Section</Heading>
-        <Heading level={3}>Subsection</Heading>
-      </>
-    )
-    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument()
-    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument()
-    expect(screen.getByRole("heading", { level: 3 })).toBeInTheDocument()
-  })
-  it("color variants maintain sufficient contrast", async () => {
-    const { container } = render(
-      <>
-        <Heading color="default">Default</Heading>
-        <Heading color="muted">Muted</Heading>
-        <Heading color="primary">Primary</Heading>
-        <Heading color="destructive">Destructive</Heading>
-      </>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-})
-```
-### Testes de Composicao (asChild)
-```tsx
-describe("Heading asChild", () => {
-  it("renders as child element", () => {
-    render(
-      <Heading asChild level={2}>
-        <a href="/test">Link Heading</a>
-      </Heading>
-    )
-    const link = screen.getByRole("link", { name: "Link Heading" })
-    expect(link).toBeInTheDocument()
-    expect(link).toHaveAttribute("href", "/test")
-    expect(link).toHaveClass("tracking-tight") // Mantem estilos
-  })
-  it("forwards ref to child element", () => {
-    const ref = { current: null }
-    render(
-      <Heading asChild ref={ref}>
-        <span>Span Heading</span>
-      </Heading>
-    )
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement)
-  })
-  it("applies data-slot to child element", () => {
-    render(
-      <Heading asChild>
-        <div>Div Heading</div>
-      </Heading>
-    )
-    expect(screen.getByText("Div Heading")).toHaveAttribute("data-slot", "heading")
-  })
-})
-```
-### Cenarios Criticos
-```tsx
-describe("Heading edge cases", () => {
-  it("handles empty children", () => {
-    const { container } = render(<Heading>{""}</Heading>)
-    expect(container.querySelector("h2")).toBeInTheDocument()
-  })
-  it("handles long text with truncate", () => {
-    const longText = "A".repeat(500)
-    render(<Heading truncate>{longText}</Heading>)
-    expect(screen.getByRole("heading")).toHaveClass("truncate")
-  })
-  it("preserves all heading levels correctly", () => {
-    const levels = [1, 2, 3, 4, 5, 6] as const
-    levels.forEach((level) => {
-      const { unmount } = render(<Heading level={level}>Test</Heading>)
-      expect(screen.getByRole("heading").tagName).toBe(`H${level}`)
-      unmount()
-    })
-  })
-  it("size prop overrides level default size", () => {
-    render(<Heading level={1} size="sm">Small H1</Heading>)
-    const heading = screen.getByRole("heading")
-    expect(heading).toHaveClass("text-sm")
-    expect(heading).not.toHaveClass("text-4xl")
-  })
-})
-```
----
-## Roadmap / Features Futuras
-Baseado na analise comparativa com 14 design systems, as seguintes features sao candidatas para implementacao futura:
-### Prioridade Alta
-#### `gradient`
-Texto com gradiente de cores.
-```tsx
-// Proposta de API
-interface HeadingProps {
-  gradient?: {
-    from: string
-    to: string
-    direction?: "to-r" | "to-l" | "to-t" | "to-b"
-  }
-}
-// Uso
-<Heading gradient={{ from: "primary", to: "blue-500" }}>
-  Gradient Text
-</Heading>
-```
-**Referencias:** Chakra (`bgGradient` + `bgClip="text"`), Mantine (`gradient`)
-### Prioridade Media
-#### `lineClamp` / `noOfLines`
-Limitar numero de linhas com ellipsis.
-```tsx
-// Proposta de API
-interface HeadingProps {
-  lineClamp?: number
-}
-// Uso
-<Heading lineClamp={2}>
-  Texto muito longo que sera limitado a duas linhas...
-</Heading>
-```
-**Referencias:** Chakra (`noOfLines`), Mantine (`lineClamp`), AntD (`ellipsis.rows`)
-#### `highlight`
-Destacar parte do texto.
-```tsx
-// Proposta de API
-interface HeadingProps {
-  highlight?: string | string[]
-  highlightColor?: string
-}
-// Uso
-<Heading highlight="importante">
-  Esta palavra importante esta destacada
-</Heading>
-```
-**Referencias:** Mantine (`Highlight`), Chakra (`Highlight`)
-### Prioridade Baixa
-#### `skeleton`
-Estado de loading integrado.
-```tsx
-// Proposta de API
-interface HeadingProps {
-  skeleton?: boolean
-}
-// Uso
-<Heading skeleton>Carregando...</Heading>
-```
-**Referencias:** MUI (`Skeleton`), Mantine (`Skeleton`)
-#### `copyable`
-Copiar texto ao clicar.
-```tsx
-// Proposta de API
-interface HeadingProps {
-  copyable?: boolean | { text?: string }
-}
-// Uso
-<Heading copyable>Codigo: ABC123</Heading>
-```
-**Referencias:** AntD (`copyable`)
-### Decisoes de Design
-| Feature | Recomendacao | Justificativa |
-|---------|--------------|---------------|
-| `gradient` | Avaliar | Visual impactante, demanda comum |
-| `lineClamp` | Implementar | Util para cards e listagens |
-| `highlight` | Avaliar | Casos de uso em search results |
-| `skeleton` | Evitar | Usar SkeletonLoader separado |
-| `copyable` | Evitar | Usar componente dedicado |
----
-## Referências
-### Design Systems Analisados
-| Design System | Documentacao | GitHub |
-|---------------|--------------|--------|
-| **Shadcn/ui** | [Typography](https://ui.shadcn.com/docs/components/typography) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
-| **Radix UI** | [Slot](https://www.radix-ui.com/primitives/docs/utilities/slot) | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
-| **React Aria** | [useHeading](https://react-spectrum.adobe.com/react-aria/useHeading.html) | [adobe/react-spectrum](https://github.com/adobe/react-spectrum) |
-| **Chakra UI** | [Heading](https://chakra-ui.com/docs/components/heading) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
-| **MUI** | [Typography](https://mui.com/material-ui/react-typography/) | [mui/material-ui](https://github.com/mui/material-ui) |
-| **Mantine** | [Title](https://mantine.dev/core/title/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
-| **Ant Design** | [Typography](https://ant.design/components/typography) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
-| **NextUI** | [Typography](https://nextui.org) | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
-| **Headless UI** | - | [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui) |
-| **Ariakit** | - | [ariakit/ariakit](https://github.com/ariakit/ariakit) |
-| **Fluent UI** | [Text](https://react.fluentui.dev/?path=/docs/components-text--default) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
-| **Carbon** | [Heading](https://carbondesignsystem.com/components/heading/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
-| **Blueprint** | [Headings](https://blueprintjs.com/docs/#core/components/heading) | [palantir/blueprint](https://github.com/palantir/blueprint) |
-| **PrimeReact** | - | [primefaces/primereact](https://github.com/primefaces/primereact) |
-### Especificacoes e Padroes
-- [WAI-ARIA - Heading Role](https://www.w3.org/WAI/ARIA/apg/patterns/heading/)
-- [WCAG 2.1 - Headings and Labels](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html)
-- [MDN - Heading Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
-- [HTML Spec - Headings](https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements)
-### Ferramentas Utilizadas
-- [CVA - Class Variance Authority](https://cva.style/docs)
-- [Tailwind CSS](https://tailwindcss.com/docs)
-- [Radix Slot](https://www.radix-ui.com/primitives/docs/utilities/slot)