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/Spinner/README.md DELETED Viewed

@@ -1,767 +0,0 @@
-# Spinner
-## Visão Geral
-O **Spinner** é o componente de indicador de carregamento do Design System ETUS, usado para comunicar ao usuário que uma operação está em andamento. Como elemento atômico, é utilizado em composições como botões com estado de loading, overlays de carregamento e skeleton screens.
-### Casos de Uso
-- Indicar carregamento de dados (fetch, API calls)
-- Estado de loading em botões durante submissão
-- Carregamento de conteúdo lazy-loaded
-- Processamento de formulários
-- Transições de página
-- Upload/download de arquivos
-### Classificação
-**Categoria:** Atom (Primitive)
-**Dependências:** `lucide-react` (Loader2Icon)
----
-## Design Specs
-### Implementação Base
-O Spinner utiliza o ícone `Loader2Icon` do Lucide com animação CSS `animate-spin`.
-```tsx
-<Loader2Icon className="size-4 animate-spin" />
-```
-### Tamanhos Recomendados
-| Tamanho | Classes | Dimensão | Uso |
-|---------|---------|----------|-----|
-| `xs` | `size-3` | 12px | Inline em texto, badges |
-| `sm` | `size-4` | 16px | **Padrão**, botões pequenos |
-| `md` | `size-5` | 20px | Botões default |
-| `lg` | `size-6` | 24px | Cards, seções |
-| `xl` | `size-8` | 32px | Páginas, modais |
-| `2xl` | `size-12` | 48px | Full-page loaders |
-### Estados Visuais
-| Estado | Comportamento |
-|--------|---------------|
-| Default | Rotação contínua em 360° |
-| Reduced Motion | Animação pausada ou opacity pulse |
-### Tokens Utilizados
-```css
-/* Animação */
-animate-spin          /* animation: spin 1s linear infinite */
-/* Tamanhos */
-size-4                /* 16px - padrão */
-/* Cores (herdadas) */
-currentColor          /* Herda cor do elemento pai */
-text-muted-foreground /* Cor comum para spinners */
-text-primary          /* Ênfase */
-/* Duração da animação */
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-```
-### Velocidades de Animação
-| Velocidade | Classes | Duração | Uso |
-|------------|---------|---------|-----|
-| Lenta | `animate-spin [animation-duration:1.5s]` | 1.5s | Operações longas |
-| Normal | `animate-spin` | 1s | **Padrão** |
-| Rápida | `animate-spin [animation-duration:0.5s]` | 0.5s | Feedback imediato |
----
-## API
-### Props
-| Prop | Tipo | Padrão | Descrição |
-|------|------|--------|-----------|
-| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"sm"` | Tamanho do spinner |
-| `color` | `"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "error" \| "current"` | `"current"` | Cor do spinner |
-| `className` | `string` | - | Classes CSS adicionais |
-| `aria-label` | `string` | `"Loading"` | Label para screen readers |
-| `role` | `string` | `"status"` | Role ARIA do elemento |
-> Herda todas as props de `React.ComponentProps<"svg">`
-### TypeScript
-```typescript
-import type { SpinnerProps, SpinnerSize, SpinnerColor } from "@etus/ui"
-// Tipos exportados
-type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl"
-type SpinnerColor = "default" | "primary" | "secondary" | "success" | "warning" | "error" | "current"
-// Props do componente
-interface SpinnerProps extends React.ComponentProps<"svg"> {
-  size?: SpinnerSize
-  color?: SpinnerColor
-}
-```
-### Comparativo com Design Systems de Referência
-#### Matriz de Features (14 Design Systems)
-| Feature | ETUS | Shadcn | Radix | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon | Blueprint | PrimeReact |
-|---------|:----:|:------:|:-----:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|:----------:|
-| **Componente dedicado** | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | ✓ |
-| **size prop** | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | - |
-| **color prop** | ✓ | - | - | ✓ | ✓ | ✓ | - | ✓ | - | - | ✓ | - | ✓ | - |
-| **thickness prop** | - | - | - | ✓ | ✓ | ✓ | - | - | - | - | - | - | - | - |
-| **speed prop** | - | - | - | ✓ | - | - | - | - | - | - | - | - | - | - |
-| **label prop** | - | - | - | ✓ | - | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | - | - |
-| **Variantes visuais** | - | - | - | - | ✓ | - | - | ✓ | - | - | ✓ | ✓ | - | - |
-| **Determinado/Indeterminado** | - | - | - | - | ✓ | - | ✓ | - | - | - | ✓ | ✓ | ✓ | ✓ |
-| **aria-label built-in** | ✓ | - | - | ✓ | ✓ | ✓ | - | ✓ | - | - | ✓ | ✓ | - | - |
-| **role="status"** | ✓ | - | - | ✓ | - | ✓ | - | - | - | - | ✓ | ✓ | - | - |
-| **Reduced motion** | - | - | - | ✓ | ✓ | ✓ | - | ✓ | - | - | ✓ | ✓ | - | - |
-#### Comparativo de Implementações
-| Design System | Implementação | Customização |
-|---------------|---------------|--------------|
-| **ETUS** | Ícone SVG (Lucide) | Via className |
-| **Chakra UI** | SVG com circle animado | Props: size, color, thickness, speed |
-| **MUI** | CircularProgress | Props: size, color, variant |
-| **Mantine** | SVG loader | Props: size, color, type |
-| **Ant Design** | SVG spinning | Props: size, tip, indicator |
-| **NextUI** | SVG customizado | Props: size, color, label |
-| **Fluent UI** | SVG com animação | Props: size, label, appearance |
-| **Carbon** | Loading component | Props: small, withOverlay, description |
-| **Blueprint** | Spinner component | Props: size, intent, value |
-#### Tipos de Spinners por Design System
-| Design System | Tipos Disponíveis |
-|---------------|-------------------|
-| **ETUS** | Circle (Loader2) |
-| **Chakra UI** | Spinner (circle) |
-| **MUI** | Circular, Linear |
-| **Mantine** | Oval, Bars, Dots |
-| **Ant Design** | Default, Custom indicator |
-| **NextUI** | Default, Gradient |
-| **Fluent UI** | Spinner, ProgressBar |
-| **Carbon** | Small, Default, Overlay |
-| **Blueprint** | Spinner (determinate/indeterminate) |
-| **PrimeReact** | ProgressSpinner |
----
-## Acessibilidade (A11y)
-### ARIA Attributes
-| Atributo | Valor | Uso |
-|----------|-------|-----|
-| `role` | `"status"` | Indica região de status dinâmico |
-| `aria-label` | `"Loading"` | Label descritivo para screen readers |
-| `aria-live` | `"polite"` | Anúncio não-intrusivo (opcional) |
-| `aria-busy` | `"true"` | Indica conteúdo em carregamento (no container) |
-### Implementação Atual
-```tsx
-<Loader2Icon
-  role="status"
-  aria-label="Loading"
-  className="size-4 animate-spin"
-/>
-```
-### Boas Práticas
-```tsx
-// 1. Container com aria-busy
-<div aria-busy={isLoading}>
-  {isLoading ? <Spinner /> : <Content />}
-</div>
-// 2. Label personalizado
-<Spinner aria-label="Carregando dados do usuário" />
-// 3. Com texto visível (hidden para SR)
-<div className="flex items-center gap-2">
-  <Spinner aria-hidden="true" />
-  <span>Carregando...</span>
-</div>
-// 4. Live region para anúncios
-<div role="status" aria-live="polite">
-  {isLoading && <Spinner />}
-  {isLoading && <span className="sr-only">Carregando...</span>}
-</div>
-```
-### Reduced Motion
-```tsx
-// CSS para respeitar preferência do usuário
-@media (prefers-reduced-motion: reduce) {
-  .animate-spin {
-    animation: none;
-    /* Alternativa: opacity pulse */
-    animation: pulse 2s ease-in-out infinite;
-  }
-}
-// Ou inline via className
-<Spinner className="motion-reduce:animate-none motion-reduce:opacity-70" />
-```
-### Contraste de Cores
-O Spinner herda `currentColor` do elemento pai, garantindo contraste adequado quando usado com cores semânticas do design system.
-| Contexto | Classe | Contraste |
-|----------|--------|-----------|
-| Texto principal | `text-foreground` | >= 4.5:1 |
-| Texto secundário | `text-muted-foreground` | >= 4.5:1 |
-| Sobre primária | `text-primary-foreground` | >= 4.5:1 |
-| Destrutivo | `text-destructive` | >= 4.5:1 |
-### Comparativo A11y (14 Design Systems)
-| Feature | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint | PrimeReact |
-|---------|:----:|:----------:|:-----:|:-------:|:--------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|:----------:|
-| **role="status"** | ✓ | ✓ | - | ✓ | - | ✓ | - | ✓ | - | - | ✓ | ✓ | - | - |
-| **aria-label** | ✓ | ✓ | - | ✓ | - | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ | - | - |
-| **aria-live** | - | ✓ | - | ✓ | - | - | - | - | - | - | ✓ | ✓ | - | - |
-| **Reduced motion** | - | ✓ | - | - | - | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ | - | - |
-| **aria-valuenow** | - | ✓ | - | - | - | - | ✓ | - | - | - | ✓ | ✓ | ✓ | ✓ |
-| **aria-valuetext** | - | ✓ | - | - | - | - | ✓ | - | - | - | ✓ | ✓ | - | - |
-| **Focus management** | - | ✓ | - | ✓ | - | - | - | - | - | - | ✓ | ✓ | - | - |
-**Legenda:** ✓ = Suporte completo | - = Não suportado
----
-## Exemplos
-### Uso Básico
-```tsx
-import { Spinner } from "@etus/ui"
-function Example() {
-  return <Spinner />
-}
-```
-### Tamanhos (via prop)
-```tsx
-<Spinner size="xs" />  {/* 12px */}
-<Spinner size="sm" />  {/* 16px (padrão) */}
-<Spinner size="md" />  {/* 20px */}
-<Spinner size="lg" />  {/* 24px */}
-<Spinner size="xl" />  {/* 32px */}
-```
-### Cores (via prop)
-```tsx
-// Cor padrão (herda do pai)
-<Spinner color="current" />
-// Cores semânticas
-<Spinner color="default" />   {/* text-muted-foreground */}
-<Spinner color="primary" />   {/* text-primary */}
-<Spinner color="secondary" /> {/* text-secondary-foreground */}
-<Spinner color="success" />   {/* text-success */}
-<Spinner color="warning" />   {/* text-warning */}
-<Spinner color="error" />     {/* text-destructive */}
-```
-### Combinações
-```tsx
-// Grande e primário
-<Spinner size="lg" color="primary" />
-// Pequeno e erro
-<Spinner size="xs" color="error" />
-```
-### Em Botão com Loading
-```tsx
-import { Button } from "@etus/ui"
-import { Spinner } from "@etus/ui"
-function SubmitButton({ isLoading }: { isLoading: boolean }) {
-  return (
-    <Button disabled={isLoading}>
-      {isLoading && <Spinner className="text-current" />}
-      {isLoading ? "Salvando..." : "Salvar"}
-    </Button>
-  )
-}
-```
-### Centralizado em Container
-```tsx
-function LoadingCard() {
-  return (
-    <div className="flex h-48 items-center justify-center rounded-lg border">
-      <Spinner className="size-8 text-muted-foreground" />
-    </div>
-  )
-}
-```
-### Full Page Loading
-```tsx
-function PageLoader() {
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
-      <div className="flex flex-col items-center gap-4">
-        <Spinner className="size-12 text-primary" />
-        <p className="text-sm text-muted-foreground">Carregando...</p>
-      </div>
-    </div>
-  )
-}
-```
-### Inline com Texto
-```tsx
-function InlineLoading() {
-  return (
-    <p className="flex items-center gap-2 text-sm text-muted-foreground">
-      <Spinner className="size-3" aria-hidden="true" />
-      Processando pagamento...
-    </p>
-  )
-}
-```
-### Condicional com Suspense
-```tsx
-import { Suspense } from "react"
-function DataLoader() {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex justify-center p-8">
-          <Spinner className="size-6" />
-        </div>
-      }
-    >
-      <AsyncComponent />
-    </Suspense>
-  )
-}
-```
-### Com Skeleton
-```tsx
-function SkeletonWithSpinner() {
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-3">
-        <Spinner className="size-5" />
-        <span className="text-sm">Carregando dados...</span>
-      </div>
-      <div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
-      <div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
-    </div>
-  )
-}
-```
-### Velocidade Customizada
-```tsx
-// Lento (operações longas)
-<Spinner className="[animation-duration:1.5s]" />
-// Rápido (feedback imediato)
-<Spinner className="[animation-duration:0.5s]" />
-```
-### Acessibilidade Completa
-```tsx
-function AccessibleLoader({ label = "Carregando" }: { label?: string }) {
-  return (
-    <div role="status" aria-live="polite" className="flex items-center gap-2">
-      <Spinner aria-hidden="true" />
-      <span className="sr-only">{label}</span>
-    </div>
-  )
-}
-```
-### Com Container aria-busy
-```tsx
-function DataTable({ isLoading, data }) {
-  return (
-    <div aria-busy={isLoading} aria-describedby="loading-status">
-      {isLoading && (
-        <div id="loading-status" className="flex justify-center p-4">
-          <Spinner />
-          <span className="sr-only">Carregando tabela de dados</span>
-        </div>
-      )}
-      {!isLoading && <Table data={data} />}
-    </div>
-  )
-}
-```
----
-## Testes
-### Testes Unitários
-```tsx
-// Spinner.test.tsx
-import { render, screen } from "@testing-library/react"
-import { describe, expect, it } from "vitest"
-import { Spinner } from "./Spinner"
-describe("Spinner", () => {
-  it("renders correctly", () => {
-    render(<Spinner />)
-    expect(screen.getByRole("status")).toBeInTheDocument()
-  })
-  it("has correct aria-label", () => {
-    render(<Spinner />)
-    expect(screen.getByLabelText("Loading")).toBeInTheDocument()
-  })
-  it("applies default classes", () => {
-    render(<Spinner data-testid="spinner" />)
-    const spinner = screen.getByTestId("spinner")
-    expect(spinner).toHaveClass("size-4", "animate-spin")
-  })
-  it("merges custom className", () => {
-    render(<Spinner className="size-8 text-primary" data-testid="spinner" />)
-    const spinner = screen.getByTestId("spinner")
-    expect(spinner).toHaveClass("size-8", "text-primary", "animate-spin")
-  })
-  it("allows custom aria-label", () => {
-    render(<Spinner aria-label="Processando dados" />)
-    expect(screen.getByLabelText("Processando dados")).toBeInTheDocument()
-  })
-  it("is an SVG element", () => {
-    render(<Spinner data-testid="spinner" />)
-    const spinner = screen.getByTestId("spinner")
-    expect(spinner.tagName).toBe("svg")
-  })
-})
-```
-### Testes de Acessibilidade
-```tsx
-import { axe, toHaveNoViolations } from "jest-axe"
-expect.extend(toHaveNoViolations)
-describe("Spinner accessibility", () => {
-  it("has no accessibility violations", async () => {
-    const { container } = render(<Spinner />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-  it("has role status", () => {
-    render(<Spinner />)
-    expect(screen.getByRole("status")).toBeInTheDocument()
-  })
-  it("is announced to screen readers", () => {
-    render(<Spinner aria-label="Carregando conteúdo" />)
-    expect(screen.getByRole("status")).toHaveAccessibleName("Carregando conteúdo")
-  })
-  it("works with aria-hidden when text is visible", async () => {
-    const { container } = render(
-      <div className="flex items-center gap-2">
-        <Spinner aria-hidden="true" />
-        <span>Carregando...</span>
-      </div>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-})
-```
-### Testes de Integração (com Button)
-```tsx
-describe("Spinner in Button", () => {
-  it("renders inside button with loading state", () => {
-    render(
-      <Button disabled>
-        <Spinner data-testid="spinner" />
-        Salvando...
-      </Button>
-    )
-    expect(screen.getByRole("button")).toBeDisabled()
-    expect(screen.getByTestId("spinner")).toBeInTheDocument()
-  })
-  it("spinner inherits button text color", () => {
-    render(
-      <Button className="text-white">
-        <Spinner className="text-current" data-testid="spinner" />
-        Loading
-      </Button>
-    )
-    expect(screen.getByTestId("spinner")).toHaveClass("text-current")
-  })
-})
-```
-### Testes Visuais (Storybook)
-```tsx
-// Spinner.stories.tsx
-import type { Meta, StoryObj } from "@storybook/react"
-import { Spinner } from "./Spinner"
-const meta: Meta<typeof Spinner> = {
-  component: Spinner,
-  tags: ["autodocs"],
-}
-export default meta
-type Story = StoryObj<typeof Spinner>
-export const Default: Story = {}
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Spinner className="size-3" />
-      <Spinner className="size-4" />
-      <Spinner className="size-6" />
-      <Spinner className="size-8" />
-      <Spinner className="size-12" />
-    </div>
-  ),
-}
-export const Colors: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Spinner className="text-primary" />
-      <Spinner className="text-muted-foreground" />
-      <Spinner className="text-destructive" />
-      <Spinner className="text-emerald-500" />
-    </div>
-  ),
-}
-export const InButton: Story = {
-  render: () => (
-    <Button disabled>
-      <Spinner />
-      Carregando...
-    </Button>
-  ),
-}
-```
-### Cenários Críticos
-```tsx
-describe("Spinner edge cases", () => {
-  it("handles multiple spinners on page", () => {
-    render(
-      <>
-        <Spinner data-testid="spinner-1" />
-        <Spinner data-testid="spinner-2" />
-        <Spinner data-testid="spinner-3" />
-      </>
-    )
-    expect(screen.getAllByRole("status")).toHaveLength(3)
-  })
-  it("respects additional SVG props", () => {
-    render(
-      <Spinner
-        data-testid="spinner"
-        strokeWidth={3}
-        onClick={() => {}}
-      />
-    )
-    expect(screen.getByTestId("spinner")).toHaveAttribute("stroke-width", "3")
-  })
-  it("works in SSR context", () => {
-    // Spinner não depende de window/document
-    const { container } = render(<Spinner />)
-    expect(container.querySelector("svg")).toBeInTheDocument()
-  })
-})
-```
----
-## Roadmap / Features Futuras
-Baseado na análise comparativa com 14 design systems:
-### ✅ Implementado
-#### Variantes CVA
-Props `size` e `color` para controle via CVA.
-```tsx
-// Tamanhos disponíveis
-<Spinner size="xs" />  {/* 12px */}
-<Spinner size="sm" />  {/* 16px (padrão) */}
-<Spinner size="md" />  {/* 20px */}
-<Spinner size="lg" />  {/* 24px */}
-<Spinner size="xl" />  {/* 32px */}
-// Cores disponíveis
-<Spinner color="default" />   {/* text-muted-foreground */}
-<Spinner color="primary" />   {/* text-primary */}
-<Spinner color="secondary" /> {/* text-secondary-foreground */}
-<Spinner color="success" />   {/* text-success */}
-<Spinner color="warning" />   {/* text-warning */}
-<Spinner color="error" />     {/* text-destructive */}
-<Spinner color="current" />   {/* text-current (padrão) */}
-```
-**Referências:** Chakra, MUI, Mantine, NextUI
-### Prioridade Média
-#### `label` prop
-Texto descritivo para contexto.
-```tsx
-interface SpinnerProps {
-  label?: string
-  showLabel?: boolean
-}
-// Uso
-<Spinner label="Carregando dados" showLabel />
-```
-**Referências:** Chakra, Mantine, AntD (tip), Fluent UI, Carbon
-#### Reduced Motion Automático
-```tsx
-// Detectar preferência e ajustar animação
-const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
-<Spinner className={prefersReducedMotion ? "animate-pulse" : "animate-spin"} />
-```
-**Referências:** Chakra, MUI, Mantine, NextUI, Fluent UI, Carbon
-### Prioridade Baixa
-#### Variantes Visuais
-Diferentes estilos de spinner.
-```tsx
-interface SpinnerProps {
-  variant?: "circle" | "dots" | "bars" | "pulse"
-}
-// Uso
-<Spinner variant="dots" />
-```
-**Referências:** Mantine (Loader types), MUI (CircularProgress, LinearProgress)
-#### Spinner Determinado
-Progress com valor definido.
-```tsx
-interface SpinnerProps {
-  value?: number // 0-100
-  indeterminate?: boolean
-}
-// Uso
-<Spinner value={75} />
-```
-**Referências:** MUI, AntD, Fluent UI, Carbon, Blueprint
-### Decisões de Design
-| Feature | Recomendação | Justificativa |
-|---------|--------------|---------------|
-| `size` prop | ✅ Implementar | Ergonomia, evita className |
-| `color` prop | ✅ Implementar | Consistência com outros componentes |
-| `label` prop | ⚠️ Avaliar | className + texto visível funciona |
-| Reduced motion | ✅ Implementar | A11y importante |
-| Variantes visuais | ❌ Evitar | Manter simplicidade |
-| Determinado | ❌ Criar componente separado | Progress != Spinner |
----
-## Referências
-### Design Systems Analisados
-| Design System | Documentação Spinner | GitHub |
-|---------------|---------------------|--------|
-| **Shadcn/ui** | Não tem dedicado (usa Lucide) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
-| **Chakra UI** | [Spinner](https://chakra-ui.com/docs/components/spinner) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
-| **MUI** | [CircularProgress](https://mui.com/material-ui/react-circular-progress/) | [mui/material-ui](https://github.com/mui/material-ui) |
-| **Mantine** | [Loader](https://mantine.dev/core/loader/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
-| **Ant Design** | [Spin](https://ant.design/components/spin) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
-| **NextUI** | [Spinner](https://nextui.org/docs/components/spinner) | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
-| **Fluent UI** | [Spinner](https://react.fluentui.dev/?path=/docs/components-spinner--default) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
-| **Carbon** | [Loading](https://carbondesignsystem.com/components/loading/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
-| **Blueprint** | [Spinner](https://blueprintjs.com/docs/#core/components/spinner) | [palantir/blueprint](https://github.com/palantir/blueprint) |
-| **PrimeReact** | [ProgressSpinner](https://primereact.org/progressspinner/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
-| **React Aria** | [ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html) | [adobe/react-spectrum](https://github.com/adobe/react-spectrum) |
-| **Ariakit** | Não tem dedicado | [ariakit/ariakit](https://github.com/ariakit/ariakit) |
-| **Headless UI** | Não tem dedicado | [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui) |
-| **Radix UI** | Não tem dedicado | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
-### Especificações e Padrões
-- [WAI-ARIA APG - Meter Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/)
-- [MDN - role="status"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role)
-- [WCAG 2.1 - Prefers Reduced Motion](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)
-- [MDN - prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
-### Ferramentas Utilizadas
-- [Lucide Icons - Loader2](https://lucide.dev/icons/loader-2)
-- [Tailwind CSS - animate-spin](https://tailwindcss.com/docs/animation#spin)