@etus/ui 0.1.0

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

@@ -0,0 +1,772 @@
+# Progress
+
+## Visão Geral
+
+O **Progress** é o componente de indicador de progresso do Design System ETUS, usado para exibir o estado de conclusão de uma operação ou tarefa. Construído sobre o `@radix-ui/react-progress`, oferece acessibilidade nativa e animações suaves.
+
+### Casos de Uso
+
+- Upload de arquivos com indicador de progresso
+- Carregamento de dados em segundo plano
+- Etapas de formulários multi-step
+- Indicadores de completude de perfil
+- Barras de progresso em downloads
+- Indicadores de leitura de artigos (scroll progress)
+
+### Classificação
+
+**Categoria:** Atom (Primitivo)
+**Dependências:** `@radix-ui/react-progress`
+
+---
+
+## Design Specs
+
+### Anatomia
+
+```
++------------------------------------------+
+|  [===================>                ]  |  <- Root (track)
+|        ^-- Indicator (preenchimento)     |
++------------------------------------------+
+```
+
+### Dimensões
+
+| Propriedade | Valor | Token/Classe |
+|-------------|-------|--------------|
+| Altura | 8px | `h-2` |
+| Largura | 100% | `w-full` |
+| Border Radius | Full (pill) | `rounded-full` |
+
+### Estados
+
+| Estado | Comportamento | Visual |
+|--------|---------------|--------|
+| Default | Exibe progresso atual | Track + Indicator |
+| 0% | Vazio | Apenas track visível |
+| 100% | Completo | Indicator preenche todo track |
+| Indeterminate | Animação contínua | `value={null}` |
+
+### Tokens Utilizados
+
+```css
+/* Cores (default) */
+--muted                /* Cor do track */
+--success              /* Cor do indicator (verde brand) */
+
+/* Cores (variantes) */
+--primary              /* color="primary" */
+--warning              /* color="warning" */
+--destructive          /* color="error" */
+
+/* Dimensões (size variants) */
+h-1                    /* size="xs" */
+h-1.5                  /* size="sm" */
+h-2                    /* size="md" (default) */
+h-3                    /* size="lg" */
+h-4                    /* size="xl" */
+w-full                 /* Largura: 100% */
+
+/* Bordas */
+rounded-full           /* Border radius circular */
+
+/* Transições */
+transition-all         /* Animação suave do indicator */
+motion-reduce:transition-none /* Respeita preferências de movimento */
+```
+
+### data-slot
+
+```html
+<div data-slot="progress-bar-container">  <!-- Wrapper (quando label !== "none") -->
+  <div data-slot="progress-bar">          <!-- Root (track) -->
+    <div data-slot="progress-bar-indicator">...</div>
+    <span data-slot="progress-bar-tooltip">...</span>  <!-- Floating labels -->
+  </div>
+  <span data-slot="progress-bar-label">...</span>  <!-- Right/Bottom labels -->
+</div>
+```
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `value` | `number \| null` | `0` | Valor do progresso (0-100). `null` para indeterminate |
+| `max` | `number` | `100` | Valor máximo |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Variante de tamanho (altura) |
+| `color` | `"default" \| "primary" \| "success" \| "warning" \| "error"` | `"default"` | Variante de cor |
+| `label` | `"none" \| "right" \| "bottom" \| "top-floating" \| "bottom-floating"` | `"none"` | Posição do label de porcentagem |
+| `formatValue` | `(value: number) => string` | `(v) => \`${v}%\`` | Função para formatar o valor exibido |
+| `showValue` | `boolean` | `true` quando `label !== "none"` | Se deve mostrar o valor como texto |
+| `getValueLabel` | `(value: number, max: number) => string` | - | Função para gerar label acessível (ARIA) |
+| `className` | `string` | - | Classes CSS adicionais |
+| `ref` | `Ref<HTMLDivElement>` | - | Referência ao elemento DOM |
+
+> Herda todas as props de `React.ComponentProps<typeof ProgressPrimitive.Root>`
+
+### Callbacks
+
+| Callback | Tipo | Descrição |
+|----------|------|-----------|
+| `onValueChange` | `(value: number) => void` | Disparado quando valor muda (controlado) |
+
+### TypeScript
+
+```typescript
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+// Props do componente
+type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root>
+
+// Uso com tipagem
+const progress: number = 75
+<Progress value={progress} />
+```
+
+### Comparativo com Design Systems de Referência
+
+#### Matriz de Features (14 Design Systems)
+
+| Feature | ETUS | Shadcn | Radix | Chakra | MUI | Mantine | AntD | NextUI | Spectrum | Ariakit | Fluent | Carbon | Blueprint | Prime |
+|---------|:----:|:------:|:-----:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|:-----:|
+| **Determinate** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ |
+| **Indeterminate** | ~ | ~ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ |
+| **Circular** | - | - | - | ✓ | ✓ | ✓ | ✓ | - | ✓ | - | ✓ | - | - | ✓ |
+| **Stripe animated** | - | - | - | ✓ | - | ✓ | ✓ | ✓ | - | - | - | - | ✓ | ✓ |
+| **Label** | ✓ | - | - | ✓ | - | ✓ | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ |
+| **Floating Label** | ✓ | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Color variants** | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | - | - | ✓ | ✓ |
+| **Size variants** | ✓ | - | - | ✓ | - | ✓ | ✓ | ✓ | ✓ | - | ✓ | ✓ | - | ✓ |
+| **Buffer** | - | - | - | - | ✓ | - | - | - | - | - | - | - | - | - |
+| **Segments** | - | - | - | - | - | ✓ | ✓ | - | - | - | - | - | - | - |
+| **data-slot** | ✓ | ✓ | - | - | - | - | - | ✓ | - | - | - | - | - | - |
+| **ARIA nativo** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | - | ✓ | ✓ | ✓ | ✓ |
+
+**Legenda:** ✓ = Suporte completo | ~ = Parcial | - = Não suportado
+
+#### Comparativo de Props por Design System
+
+| Prop | ETUS | Chakra | MUI | Mantine | AntD | NextUI | Fluent |
+|------|:----:|:------:|:---:|:-------:|:----:|:------:|:------:|
+| `value` | ✓ | ✓ | ✓ | ✓ | `percent` | ✓ | ✓ |
+| `max` | ✓ | `max` | - | - | - | `maxValue` | `max` |
+| `min` | - | `min` | - | - | - | `minValue` | - |
+| `size` | ✓ | ✓ | - | ✓ | ✓ | ✓ | `thickness` |
+| `color` | ✓ | `colorScheme` | `color` | `color` | `strokeColor` | `color` | - |
+| `isIndeterminate` | ~ | ✓ | - | - | - | `isIndeterminate` | - |
+| `hasStripe` | - | ✓ | - | `striped` | - | `isStriped` | - |
+| `isAnimated` | - | `isAnimated` | - | `animated` | - | - | - |
+| `showValueLabel` | ✓ | - | - | - | `showInfo` | `showValueLabel` | - |
+| `label` | ✓ | - | - | `label` | - | `label` | `description` |
+| `formatValue` | ✓ | - | - | - | `format` | `formatOptions` | - |
+| `radius` | - | - | - | `radius` | - | `radius` | - |
+
+#### Análise por Categoria
+
+**Headless/Primitivos (máxima flexibilidade):**
+- **Radix UI** - Primitivo acessível, sem estilos, base do ETUS
+- **React Aria/Spectrum** - Hooks de comportamento, ARIA completo
+- **Ariakit** - Não possui componente Progress nativo
+
+**Styled/Opinionated (produtividade):**
+- **Chakra UI** - `colorScheme`, `hasStripe`, `isAnimated`, muito completo
+- **MUI** - Linear e Circular, buffer, variantes de cor
+- **Mantine** - Sections, `animated`, `striped`, label integrado
+- **Ant Design** - Steps integrado, `strokeColor`, dashboard style
+
+**Hybrid (meio-termo):**
+- **Shadcn/ui** - Wrapper simples sobre Radix, base do ETUS
+- **NextUI** - Tailwind + variants, `showValueLabel`
+- **ETUS** - Baseado em Shadcn, extensível via className
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes (Radix Built-in)
+
+| Atributo | Valor | Descrição |
+|----------|-------|-----------|
+| `role` | `"progressbar"` | Identifica como barra de progresso |
+| `aria-valuenow` | `number` | Valor atual |
+| `aria-valuemin` | `0` | Valor mínimo |
+| `aria-valuemax` | `100` | Valor máximo (ou prop `max`) |
+| `aria-valuetext` | `string` | Texto descritivo (via `getValueLabel`) |
+| `aria-label` | `string` | Label quando não há texto visível |
+
+### Screen Readers
+
+O Radix Progress já implementa todos os atributos ARIA necessários automaticamente:
+
+```tsx
+// Radix gera automaticamente:
+<div
+  role="progressbar"
+  aria-valuenow={75}
+  aria-valuemin={0}
+  aria-valuemax={100}
+>
+```
+
+### Label Personalizado
+
+```tsx
+// Adicionar label acessível personalizado
+<Progress
+  value={75}
+  getValueLabel={(value, max) => `${value} de ${max} itens completados`}
+/>
+// Anuncia: "75 de 100 itens completados"
+```
+
+### Estados Indeterminate
+
+```tsx
+// value={null} indica estado indeterminate
+<Progress value={null} aria-label="Carregando dados..." />
+// Screen reader anuncia estado indeterminate
+```
+
+### Comparativo A11y (14 Design Systems)
+
+| Feature | ETUS | Radix | React Aria | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon |
+|---------|:----:|:-----:|:----------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|
+| **role="progressbar"** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | ✓ |
+| **aria-valuenow** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | ✓ |
+| **aria-valuemin/max** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | ✓ |
+| **aria-valuetext** | ✓ | ✓ | ✓ | ✓ | - | - | ~ | ✓ | ✓ | ✓ |
+| **aria-label** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | ✓ |
+| **Indeterminate state** | ~ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| **Live regions** | - | - | ✓ | - | - | - | - | - | ✓ | ✓ |
+| **High contrast** | - | - | ✓ | - | - | - | - | - | ✓ | ✓ |
+
+**Legenda:** ✓ = Suporte completo | ~ = Parcial/Manual | - = Não suportado
+
+### Conformidade WCAG
+
+| Critério | Status | Notas |
+|----------|--------|-------|
+| 1.3.1 Info and Relationships | ✓ | `role="progressbar"` semântico |
+| 4.1.2 Name, Role, Value | ✓ | ARIA values automáticos |
+| 1.4.1 Use of Color | ~ | Requer contexto adicional |
+| 1.4.11 Non-text Contrast | ✓ | Contraste adequado indicator/track |
+
+---
+
+## Exemplos
+
+### Uso Básico
+
+```tsx
+import { Progress } from "@etus/ui"
+
+function Example() {
+  return <Progress value={33} />
+}
+```
+
+### Com Estado Controlado
+
+```tsx
+import { useState, useEffect } from "react"
+import { Progress } from "@etus/ui"
+
+function ControlledProgress() {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prev) => (prev >= 100 ? 0 : prev + 10))
+    }, 500)
+    return () => clearInterval(timer)
+  }, [])
+
+  return <Progress value={progress} />
+}
+```
+
+### Diferentes Valores
+
+```tsx
+<Progress value={0} />   {/* Vazio */}
+<Progress value={25} />  {/* 25% */}
+<Progress value={50} />  {/* 50% */}
+<Progress value={75} />  {/* 75% */}
+<Progress value={100} /> {/* Completo */}
+```
+
+### Com Label Acessível
+
+```tsx
+<Progress
+  value={75}
+  getValueLabel={(value, max) => `${value}% concluído`}
+  aria-label="Progresso do upload"
+/>
+```
+
+### Alturas Customizadas
+
+```tsx
+{/* Fino */}
+<Progress value={50} className="h-1" />
+
+{/* Padrão */}
+<Progress value={50} className="h-2" />
+
+{/* Médio */}
+<Progress value={50} className="h-3" />
+
+{/* Grosso */}
+<Progress value={50} className="h-4" />
+```
+
+### Cores Customizadas
+
+```tsx
+{/* Sucesso */}
+<Progress
+  value={100}
+  className="[&>div]:bg-green-500 bg-green-500/20"
+/>
+
+{/* Warning */}
+<Progress
+  value={60}
+  className="[&>div]:bg-yellow-500 bg-yellow-500/20"
+/>
+
+{/* Error */}
+<Progress
+  value={30}
+  className="[&>div]:bg-red-500 bg-red-500/20"
+/>
+```
+
+### Com Texto de Porcentagem
+
+```tsx
+function ProgressWithLabel() {
+  const [progress, setProgress] = useState(66)
+
+  return (
+    <div className="space-y-2">
+      <div className="flex justify-between text-sm">
+        <span>Progresso</span>
+        <span>{progress}%</span>
+      </div>
+      <Progress value={progress} />
+    </div>
+  )
+}
+```
+
+### Upload de Arquivo
+
+```tsx
+function FileUpload() {
+  const [uploadProgress, setUploadProgress] = useState(0)
+  const [status, setStatus] = useState<"idle" | "uploading" | "complete">("idle")
+
+  const handleUpload = async (file: File) => {
+    setStatus("uploading")
+    // Simular upload
+    for (let i = 0; i <= 100; i += 10) {
+      await new Promise((r) => setTimeout(r, 200))
+      setUploadProgress(i)
+    }
+    setStatus("complete")
+  }
+
+  return (
+    <div className="space-y-4">
+      <input type="file" onChange={(e) => handleUpload(e.target.files?.[0]!)} />
+
+      {status !== "idle" && (
+        <div className="space-y-2">
+          <Progress
+            value={uploadProgress}
+            className={cn(
+              status === "complete" && "[&>div]:bg-green-500"
+            )}
+          />
+          <p className="text-sm text-muted-foreground">
+            {status === "uploading"
+              ? `Enviando... ${uploadProgress}%`
+              : "Upload concluído!"
+            }
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+### Multi-step Form
+
+```tsx
+function MultiStepForm() {
+  const [step, setStep] = useState(1)
+  const totalSteps = 4
+  const progress = (step / totalSteps) * 100
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span>Etapa {step} de {totalSteps}</span>
+          <span>{Math.round(progress)}%</span>
+        </div>
+        <Progress value={progress} />
+      </div>
+
+      {/* Conteúdo do step */}
+      <div className="min-h-[200px] border rounded-lg p-4">
+        Conteúdo da etapa {step}
+      </div>
+
+      <div className="flex justify-between">
+        <Button
+          variant="outline"
+          onClick={() => setStep((s) => Math.max(1, s - 1))}
+          disabled={step === 1}
+        >
+          Anterior
+        </Button>
+        <Button
+          onClick={() => setStep((s) => Math.min(totalSteps, s + 1))}
+          disabled={step === totalSteps}
+        >
+          Próximo
+        </Button>
+      </div>
+    </div>
+  )
+}
+```
+
+### Scroll Progress (Leitura de Artigo)
+
+```tsx
+function ScrollProgress() {
+  const [scrollProgress, setScrollProgress] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight
+      const progress = (scrollTop / docHeight) * 100
+      setScrollProgress(progress)
+    }
+
+    window.addEventListener("scroll", handleScroll)
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  return (
+    <Progress
+      value={scrollProgress}
+      className="fixed top-0 left-0 right-0 z-50 h-1 rounded-none"
+    />
+  )
+}
+```
+
+### Animação com Gradient
+
+```tsx
+<Progress
+  value={75}
+  className="h-3 [&>div]:bg-gradient-to-r [&>div]:from-blue-500 [&>div]:to-purple-500"
+/>
+```
+
+---
+
+## Testes
+
+### Testes Unitários
+
+```tsx
+// Progress.test.tsx
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { Progress } from "./ProgressBar"
+
+describe("Progress", () => {
+  it("renders with correct role", () => {
+    render(<Progress value={50} />)
+    expect(screen.getByRole("progressbar")).toBeInTheDocument()
+  })
+
+  it("has correct aria-valuenow", () => {
+    render(<Progress value={75} />)
+    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "75")
+  })
+
+  it("has correct aria-valuemin and aria-valuemax", () => {
+    render(<Progress value={50} />)
+    const progressbar = screen.getByRole("progressbar")
+    expect(progressbar).toHaveAttribute("aria-valuemin", "0")
+    expect(progressbar).toHaveAttribute("aria-valuemax", "100")
+  })
+
+  it("applies custom max value", () => {
+    render(<Progress value={5} max={10} />)
+    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuemax", "10")
+  })
+
+  it("has data-slot attribute", () => {
+    render(<Progress value={50} />)
+    expect(screen.getByRole("progressbar")).toHaveAttribute("data-slot", "progress")
+  })
+
+  it("merges custom className", () => {
+    render(<Progress value={50} className="custom-class" />)
+    expect(screen.getByRole("progressbar")).toHaveClass("custom-class")
+  })
+})
+```
+
+### Testes de Acessibilidade
+
+```tsx
+import { axe, toHaveNoViolations } from "jest-axe"
+
+expect.extend(toHaveNoViolations)
+
+describe("Progress accessibility", () => {
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Progress value={50} aria-label="Loading" />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("supports getValueLabel for custom announcements", () => {
+    render(
+      <Progress
+        value={75}
+        getValueLabel={(value) => `${value} percent complete`}
+      />
+    )
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-valuetext",
+      "75 percent complete"
+    )
+  })
+
+  it("handles indeterminate state", () => {
+    render(<Progress value={null} aria-label="Loading" />)
+    const progressbar = screen.getByRole("progressbar")
+    // Radix remove aria-valuenow para indeterminate
+    expect(progressbar).not.toHaveAttribute("aria-valuenow")
+  })
+})
+```
+
+### Testes de Estilo
+
+```tsx
+describe("Progress styling", () => {
+  it("indicator transforms based on value", () => {
+    render(<Progress value={50} />)
+    const indicator = screen.getByRole("progressbar").querySelector("[data-slot='progress-indicator']")
+    expect(indicator).toHaveStyle({ transform: "translateX(-50%)" })
+  })
+
+  it("indicator at 0% is fully hidden", () => {
+    render(<Progress value={0} />)
+    const indicator = screen.getByRole("progressbar").querySelector("[data-slot='progress-indicator']")
+    expect(indicator).toHaveStyle({ transform: "translateX(-100%)" })
+  })
+
+  it("indicator at 100% is fully visible", () => {
+    render(<Progress value={100} />)
+    const indicator = screen.getByRole("progressbar").querySelector("[data-slot='progress-indicator']")
+    expect(indicator).toHaveStyle({ transform: "translateX(-0%)" })
+  })
+})
+```
+
+### Cenários Críticos
+
+```tsx
+describe("Progress edge cases", () => {
+  it("handles value of 0", () => {
+    render(<Progress value={0} />)
+    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "0")
+  })
+
+  it("handles value of 100", () => {
+    render(<Progress value={100} />)
+    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "100")
+  })
+
+  it("handles undefined value (defaults to 0)", () => {
+    render(<Progress />)
+    const indicator = screen.getByRole("progressbar").querySelector("[data-slot='progress-indicator']")
+    expect(indicator).toHaveStyle({ transform: "translateX(-100%)" })
+  })
+
+  it("handles value greater than max", () => {
+    render(<Progress value={150} max={100} />)
+    // Comportamento depende do Radix - geralmente clamp
+    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "150")
+  })
+
+  it("handles negative value", () => {
+    render(<Progress value={-10} />)
+    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "-10")
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+### ✅ Implementado
+
+#### `size` variants ✅
+
+Tamanhos pré-definidos via CVA.
+
+```tsx
+<ProgressBar value={50} size="xs" />  // h-1
+<ProgressBar value={50} size="sm" />  // h-1.5
+<ProgressBar value={50} size="md" />  // h-2 (default)
+<ProgressBar value={50} size="lg" />  // h-3
+<ProgressBar value={50} size="xl" />  // h-4
+```
+
+#### `color` variants ✅
+
+Cores semânticas para diferentes estados.
+
+```tsx
+<ProgressBar value={50} />                    // default (verde success)
+<ProgressBar value={50} color="primary" />    // azul primary
+<ProgressBar value={50} color="success" />    // verde success
+<ProgressBar value={50} color="warning" />    // amarelo warning
+<ProgressBar value={50} color="error" />      // vermelho destructive
+```
+
+#### `label` positions ✅
+
+Label de porcentagem com 5 posições.
+
+```tsx
+<ProgressBar value={75} label="none" />           // Sem label (default)
+<ProgressBar value={75} label="right" />          // Label à direita inline
+<ProgressBar value={75} label="bottom" />         // Label abaixo da barra
+<ProgressBar value={75} label="top-floating" />   // Tooltip flutuante acima
+<ProgressBar value={75} label="bottom-floating" /> // Tooltip flutuante abaixo
+```
+
+#### `formatValue` ✅
+
+Formatação customizada do valor exibido.
+
+```tsx
+<ProgressBar
+  value={75}
+  label="right"
+  formatValue={(v) => `${v} de 100`}
+/>
+// Renderiza: "75 de 100"
+```
+
+### Prioridade Média (Futuro)
+
+#### Indeterminate Animation
+
+Animação nativa para estado indeterminate.
+
+```tsx
+// Proposta de API
+<ProgressBar value={null} />
+// Renderiza animação de loading contínuo
+```
+
+**Referências:** MUI, Chakra, Mantine (todos têm animação built-in)
+
+### Prioridade Baixa (Futuro)
+
+#### `striped` + `animated`
+
+Efeito de listras animadas.
+
+```tsx
+// Proposta de API
+interface ProgressBarProps {
+  striped?: boolean
+  animated?: boolean
+}
+
+// Uso
+<ProgressBar value={50} striped animated />
+```
+
+**Referências:** Chakra (`hasStripe`, `isAnimated`), Mantine, Blueprint
+
+#### `CircularProgress`
+
+Variante circular do Progress.
+
+```tsx
+// Componente separado
+<CircularProgress value={75} size={120} />
+```
+
+**Referências:** MUI, Chakra, React Aria/Spectrum
+
+### Decisões de Design
+
+| Feature | Status | Justificativa |
+|---------|--------|---------------|
+| `size` | ✅ Implementado | 5 variantes (xs, sm, md, lg, xl) |
+| `color` | ✅ Implementado | 5 variantes (default, primary, success, warning, error) |
+| `label` | ✅ Implementado | 5 posições incluindo floating tooltips |
+| `formatValue` | ✅ Implementado | Customização do texto exibido |
+| Indeterminate anim | ⏳ Pendente | Estado loading é essencial |
+| `striped` | ~ Avaliar | Pode ser feito via className |
+| `CircularProgress` | ~ Avaliar | Componente separado |
+
+---
+
+## Referências
+
+### Design Systems Analisados
+
+| Design System | Documentação Progress | GitHub |
+|---------------|----------------------|--------|
+| **Shadcn/ui** | [Progress](https://ui.shadcn.com/docs/components/progress) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
+| **Radix UI** | [Progress](https://www.radix-ui.com/primitives/docs/components/progress) | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
+| **React Aria** | [ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html) | [adobe/react-spectrum](https://github.com/adobe/react-spectrum) |
+| **Chakra UI** | [Progress](https://chakra-ui.com/docs/components/progress) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
+| **MUI** | [Progress](https://mui.com/material-ui/react-progress/) | [mui/material-ui](https://github.com/mui/material-ui) |
+| **Mantine** | [Progress](https://mantine.dev/core/progress/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
+| **Ant Design** | [Progress](https://ant.design/components/progress) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
+| **NextUI** | [Progress](https://nextui.org/docs/components/progress) | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
+| **Fluent UI** | [ProgressBar](https://react.fluentui.dev/?path=/docs/components-progressbar) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
+| **Carbon** | [ProgressBar](https://carbondesignsystem.com/components/progress-bar/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
+| **Blueprint** | [ProgressBar](https://blueprintjs.com/docs/#core/components/progress-bar) | [palantir/blueprint](https://github.com/palantir/blueprint) |
+| **PrimeReact** | [ProgressBar](https://primereact.org/progressbar/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
+
+### Especificações e Padrões
+
+- [WAI-ARIA APG - Meter Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/)
+- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN - Progress Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)
+- [HTML Spec - Progress](https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element)
+
+### Ferramentas Utilizadas
+
+- [Radix Progress](https://www.radix-ui.com/primitives/docs/components/progress)
+- [Tailwind CSS](https://tailwindcss.com/docs)