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

@etus/ui 0.1.1 → 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/ProgressBar/README.md DELETED Viewed

@@ -1,772 +0,0 @@
-# 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)