@etus/ui 0.1.1 → 0.1.3

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

@@ -1,730 +0,0 @@
-# StatusIndicator
-
-## Visão Geral
-
-O **StatusIndicator** é um componente primitivo do Design System ETUS que exibe visualmente o estado de um elemento, processo ou entidade. Como indicador atômico, comunica rapidamente informações de status através de cor, forma e animação opcional.
-
-### Casos de Uso
-
-- Status de usuário (online, offline, ausente, ocupado)
-- Estado de conexão (conectado, desconectado, reconectando)
-- Status de processos (sucesso, erro, aviso, pendente)
-- Indicadores de saúde de sistemas
-- Status de disponibilidade de recursos
-- Sinalização de notificações não lidas
-
-### Classificação
-
-**Categoria:** Atom (Primitivo)
-**Dependências:** `class-variance-authority`
-
----
-
-## Design Specs
-
-### Variantes (`variant`)
-
-| Variante  | Uso                     | Tokens                     |
-| --------- | ----------------------- | -------------------------- |
-| `online`  | Usuário/sistema ativo   | `bg-success`, verde        |
-| `offline` | Usuário/sistema inativo | `bg-muted`, cinza          |
-| `busy`    | Ocupado/indisponível    | `bg-destructive`, vermelho |
-| `away`    | Ausente/afastado        | `bg-warning`, amarelo      |
-| `pending` | Aguardando/processando  | `bg-info`, azul            |
-| `error`   | Estado de erro          | `bg-destructive`, vermelho |
-| `success` | Operação bem-sucedida   | `bg-success`, verde        |
-| `warning` | Atenção necessária      | `bg-warning`, amarelo      |
-| `info`    | Informativo             | `bg-info`, azul            |
-| `neutral` | Estado neutro/padrão    | `bg-muted`, cinza          |
-
-### Tamanhos (`size`)
-
-| Tamanho | Dimensão          | Uso                                 |
-| ------- | ----------------- | ----------------------------------- |
-| `xs`    | `size-1.5` (6px)  | Indicadores inline, badges          |
-| `sm`    | `size-2` (8px)    | Avatares pequenos, listas compactas |
-| `md`    | `size-2.5` (10px) | Uso geral, avatares                 |
-| `lg`    | `size-3` (12px)   | Destaque, headers                   |
-| `xl`    | `size-4` (16px)   | Status principal, dashboards        |
-
-### Formas (`shape`)
-
-| Forma    | Classes        | Uso                       |
-| -------- | -------------- | ------------------------- |
-| `circle` | `rounded-full` | Padrão, status de usuário |
-| `square` | `rounded-sm`   | Indicadores de sistema    |
-| `dot`    | `rounded-full` | Minimalista, inline       |
-
-### Estados
-
-| Estado  | Classes/Atributos | Comportamento                   |
-| ------- | ----------------- | ------------------------------- |
-| Default | -                 | Aparência base                  |
-| Pulse   | `animate-pulse`   | Animação de pulso para atenção  |
-| Ping    | `animate-ping`    | Efeito de onda para notificação |
-
-### Tokens Utilizados
-
-```css
-/* Root */
---status-indicator-root-border-radius   /* 9999px (full) */
---status-indicator-root-shrink          /* 0 */
-
-/* Tamanhos do Dot */
---status-indicator-dot-size-xs          /* spacing.1-5 (6px) */
---status-indicator-dot-size-sm          /* spacing.2 (8px) */
---status-indicator-dot-size-default     /* spacing.2-5 (10px) */
---status-indicator-dot-size-lg          /* spacing.3 (12px) */
-
-/* Cores do Dot */
---status-indicator-dot-color-success    /* success (verde) */
---status-indicator-dot-color-warning    /* warning (amarelo) */
---status-indicator-dot-color-error      /* destructive (vermelho) */
---status-indicator-dot-color-info       /* text.info (azul) */
---status-indicator-dot-color-neutral    /* muted-foreground (cinza) */
-
-/* Label */
---status-indicator-label-font-size      /* 0.875rem */
---status-indicator-label-color          /* foreground */
---status-indicator-label-gap            /* spacing.2 */
-
-/* Bordas */
-rounded-full       /* Circular */
-rounded-sm         /* Quadrado suave */
-
-/* Animacoes */
-animate-pulse      /* Pulso suave */
-animate-ping       /* Efeito de onda */
-```
-
-### data-slot
-
-```html
-<span data-slot="status-indicator">...</span>
-```
-
----
-
-## API
-
-### Props
-
-| Prop        | Tipo                                                                                                                 | Padrão      | Descrição                           |
-| ----------- | -------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------- |
-| `variant`   | `"online" \| "offline" \| "busy" \| "away" \| "pending" \| "error" \| "success" \| "warning" \| "info" \| "neutral"` | `"neutral"` | Estilo visual do indicador          |
-| `size`      | `"xs" \| "sm" \| "md" \| "lg" \| "xl"`                                                                               | `"md"`      | Tamanho do indicador                |
-| `shape`     | `"circle" \| "square" \| "dot"`                                                                                      | `"circle"`  | Forma do indicador                  |
-| `pulse`     | `boolean`                                                                                                            | `false`     | Ativa animação de pulso             |
-| `ping`      | `boolean`                                                                                                            | `false`     | Ativa efeito de onda (ping)         |
-| `label`     | `string`                                                                                                             | -           | Texto acessível para screen readers |
-| `className` | `string`                                                                                                             | -           | Classes CSS adicionais              |
-| `ref`       | `Ref<HTMLSpanElement>`                                                                                               | -           | Referência ao elemento DOM          |
-
-> Herda todas as props de `React.ComponentProps<"span">`
-
-### TypeScript
-
-```typescript
-import { type VariantProps } from "class-variance-authority";
-
-// Variants exportadas
-const statusIndicatorVariants = cva(/* ... */);
-
-// Props do componente
-type StatusIndicatorProps = React.ComponentProps<"span"> &
-  VariantProps<typeof statusIndicatorVariants> & {
-    pulse?: boolean;
-    ping?: boolean;
-    label?: string;
-  };
-
-// Tipos derivados úteis
-type StatusIndicatorVariant = NonNullable<
-  VariantProps<typeof statusIndicatorVariants>["variant"]
->;
-type StatusIndicatorSize = NonNullable<
-  VariantProps<typeof statusIndicatorVariants>["size"]
->;
-type StatusIndicatorShape = NonNullable<
-  VariantProps<typeof statusIndicatorVariants>["shape"]
->;
-```
-
-### 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 | Spectrum | Primer |
-| ------------------- | :--: | :----: | :---: | :----: | :-: | :-----: | :--: | :----: | :------: | :-----: | :----: | :----: | :------: | :----: |
-| **Status variants** |  10  |   -    |   -   |   4    |  4  |    4    |  3   |   4    |    -     |    -    |   8    |   4    |    6     |   8    |
-| **Tamanhos**        |  5   |   -    |   -   |   3    |  3  |    4    |  3   |   3    |    -     |    -    |   4    |   3    |    3     |   4    |
-| **Animação pulse**  |  ✓   |   -    |   -   |   -    |  -  |    ✓    |  ✓   |   ✓    |    -     |    -    |   ✓    |   -    |    ✓     |   ✓    |
-| **Animação ping**   |  ✓   |   -    |   -   |   -    |  -  |    -    |  -   |   ✓    |    -     |    -    |   -    |   -    |    -     |   -    |
-| **Formas**          |  3   |   -    |   -   |   -    |  2  |    2    |  -   |   -    |    -     |    -    |   -    |   -    |    -     |   -    |
-| **CVA/cva**         |  ✓   |   -    |   -   |   -    |  -  |    -    |  -   |   ✓    |    -     |    -    |   -    |   -    |    -     |   -    |
-| **data-slot**       |  ✓   |   -    |   -   |   -    |  -  |    -    |  -   |   ✓    |    -     |    -    |   -    |   -    |    -     |   -    |
-| **Com Avatar**      |  -   |   -    |   -   |   ✓    |  ✓  |    ✓    |  ✓   |   ✓    |    -     |    -    |   ✓    |   ✓    |    ✓     |   ✓    |
-| **Posicionamento**  |  -   |   -    |   -   |   ✓    |  ✓  |    ✓    |  ✓   |   ✓    |    -     |    -    |   ✓    |   -    |    ✓     |   ✓    |
-| **Texto inline**    |  -   |   -    |   -   |   -    |  -  |    ✓    |  -   |   -    |    -     |    -    |   ✓    |   ✓    |    ✓     |   ✓    |
-
-#### Comparativo de Variantes por Design System
-
-| Design System  | Variantes Disponíveis                                                                            |
-| -------------- | ------------------------------------------------------------------------------------------------ |
-| **ETUS**       | `online`, `offline`, `busy`, `away`, `pending`, `error`, `success`, `warning`, `info`, `neutral` |
-| **Fluent UI**  | `available`, `away`, `busy`, `doNotDisturb`, `offline`, `outOfOffice`, `unknown`, `blocked`      |
-| **Primer**     | `success`, `attention`, `severe`, `danger`, `done`, `sponsors`, `closed`, `default`              |
-| **Chakra UI**  | `success`, `warning`, `error`, `info` (via Badge)                                                |
-| **MUI**        | `success`, `error`, `warning`, `info` (via Badge dot)                                            |
-| **Mantine**    | `default`, `primary`, `success`, `warning`                                                       |
-| **Ant Design** | `success`, `processing`, `default`, `error`, `warning`                                           |
-| **Spectrum**   | `positive`, `negative`, `notice`, `info`, `neutral`, `gray`                                      |
-
-#### Comparativo de Props por Design System
-
-| Prop                 | ETUS |    Chakra     |      MUI       |   Mantine    |     AntD     |   NextUI    |       Fluent       |  Primer  |
-| -------------------- | :--: | :-----------: | :------------: | :----------: | :----------: | :---------: | :----------------: | :------: |
-| `variant`/`status`   |  ✓   | `colorScheme` |    `color`     |   `color`    |   `status`   |   `color`   |      `status`      | `status` |
-| `size`               |  ✓   |       ✓       |      `sx`      |      ✓       |      -       |      ✓      |         ✓          |  `size`  |
-| `pulse`/`processing` |  ✓   |       -       |       -        | `processing` | `processing` |      ✓      | `activeAppearance` |    -     |
-| `shape`              |  ✓   |       -       |   `variant`    |      -       |      -       |      -      |         -          |    -     |
-| `label`/`aria-label` |  ✓   |       ✓       |       ✓        |      ✓       |      -       |      ✓      |         ✓          |    ✓     |
-| `position`           |  -   |       ✓       | `anchorOrigin` |  `position`  |      -       | `placement` |         -          |    -     |
-| `withBorder`         |  -   |       -       |       -        |      ✓       |      -       |      ✓      | `outOfOfficeIcon`  |    -     |
-
-#### Análise por Categoria
-
-**Componentes Dedicados:**
-
-- **Fluent UI** - `PresenceBadge` completo, 8 status, integração com Avatar
-- **Primer** - `StateLabel` e `StatusLabel` com contexto semântico
-- **Spectrum** - `StatusLight` com texto inline
-
-**Integrado com Badge/Avatar:**
-
-- **Chakra UI** - Usa `AvatarBadge` com positioning
-- **MUI** - `Badge` com `variant="dot"` e `anchorOrigin`
-- **Mantine** - `Indicator` component separado
-- **Ant Design** - `Badge` com `status` prop
-- **NextUI** - `Badge` com `content` e `placement`
-
-**Sem Componente Nativo:**
-
-- **Shadcn/ui** - Sem componente, composição manual
-- **Radix UI** - Sem primitivo de status
-- **Headless UI** - Sem implementação
-- **Ariakit** - Sem componente dedicado
-
----
-
-## Acessibilidade (A11y)
-
-### ARIA Attributes
-
-| Atributo             | Uso                                   |
-| -------------------- | ------------------------------------- |
-| `role="status"`      | Indica região de status ao vivo       |
-| `aria-label`         | Descreve o status para screen readers |
-| `aria-live="polite"` | Anuncia mudanças de status            |
-| `aria-hidden`        | Quando puramente decorativo           |
-
-### Screen Readers
-
-```tsx
-// Indicador com label acessível
-<StatusIndicator variant="online" label="Usuário online" />
-
-// Output HTML
-<span
-  role="status"
-  aria-label="Usuário online"
-  data-slot="status-indicator"
->
-  <span className="sr-only">Usuário online</span>
-</span>
-```
-
-### Contraste de Cores
-
-Todas as cores de status seguem WCAG 2.1 AA:
-
-| Variante            | Cor                | Contraste           |
-| ------------------- | ------------------ | ------------------- |
-| `online`/`success`  | Verde (#22c55e)    | >= 3:1 contra fundo |
-| `offline`/`neutral` | Cinza (#6b7280)    | >= 3:1 contra fundo |
-| `busy`/`error`      | Vermelho (#ef4444) | >= 3:1 contra fundo |
-| `away`/`warning`    | Amarelo (#f59e0b)  | >= 3:1 contra fundo |
-| `pending`/`info`    | Azul (#3b82f6)     | >= 3:1 contra fundo |
-
-### Reduced Motion
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  .animate-pulse,
-  .animate-ping {
-    animation: none;
-  }
-}
-```
-
-### Comparativo A11y (14 Design Systems)
-
-| Feature            | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Spectrum | Primer |
-| ------------------ | :--: | :--------: | :---: | :-----: | :------: | :----: | :-: | :-----: | :--: | :----: | :----: | :----: | :------: | :----: |
-| **role="status"**  |  ✓   |     ✓      |   -   |    ✓    |    -     |   ~    |  ~  |    ~    |  -   |   ~    |   ✓    |   ✓    |    ✓     |   ✓    |
-| **aria-label**     |  ✓   |     ✓      |   -   |    ✓    |    -     |   ✓    |  ✓  |    ✓    |  -   |   ✓    |   ✓    |   ✓    |    ✓     |   ✓    |
-| **aria-live**      |  ✓   |     ✓      |   -   |    ✓    |    -     |   ~    |  ~  |    ~    |  -   |   ~    |   ✓    |   ✓    |    ✓     |   ✓    |
-| **sr-only text**   |  ✓   |     ✓      |   -   |    ✓    |    -     |   ✓    |  ✓  |    ✓    |  -   |   ✓    |   ✓    |   ✓    |    ✓     |   ✓    |
-| **Reduced motion** |  ✓   |     ✓      |   -   |    -    |    -     |   ✓    |  ✓  |    ✓    |  -   |   ✓    |   ✓    |   ✓    |    ✓     |   ✓    |
-| **High contrast**  |  -   |     ✓      |   -   |    -    |    -     |   -    |  -  |    -    |  -   |   -    |   ✓    |   ✓    |    ✓     |   ✓    |
-
-**Legenda:** ✓ = Suporte completo | ~ = Parcial/Manual | - = Não suportado
-
----
-
-## Exemplos
-
-### Uso Básico
-
-```tsx
-import { StatusIndicator } from "@etus/ui";
-
-function Example() {
-  return <StatusIndicator variant="online" label="Online" />;
-}
-```
-
-### Variantes de Status
-
-```tsx
-// Status de usuário
-<StatusIndicator variant="online" label="Online" />
-<StatusIndicator variant="offline" label="Offline" />
-<StatusIndicator variant="busy" label="Ocupado" />
-<StatusIndicator variant="away" label="Ausente" />
-
-// Status semânticos
-<StatusIndicator variant="success" label="Sucesso" />
-<StatusIndicator variant="error" label="Erro" />
-<StatusIndicator variant="warning" label="Aviso" />
-<StatusIndicator variant="info" label="Informação" />
-<StatusIndicator variant="pending" label="Pendente" />
-```
-
-### Tamanhos
-
-```tsx
-<StatusIndicator variant="online" size="xs" label="Extra pequeno" />
-<StatusIndicator variant="online" size="sm" label="Pequeno" />
-<StatusIndicator variant="online" size="md" label="Médio" />
-<StatusIndicator variant="online" size="lg" label="Grande" />
-<StatusIndicator variant="online" size="xl" label="Extra grande" />
-```
-
-### Com Animações
-
-```tsx
-// Pulso para indicar atividade
-<StatusIndicator variant="online" pulse label="Ativo" />
-
-// Ping para notificação
-<StatusIndicator variant="pending" ping label="Processando" />
-```
-
-### Formas
-
-```tsx
-<StatusIndicator variant="online" shape="circle" />
-<StatusIndicator variant="online" shape="square" />
-<StatusIndicator variant="online" shape="dot" />
-```
-
-### Composição com Avatar
-
-```tsx
-import { Avatar, AvatarImage, AvatarFallback } from "@etus/ui";
-
-function UserAvatar({ status }: { status: "online" | "offline" | "busy" }) {
-  return (
-    <div className="relative inline-block">
-      <Avatar>
-        <AvatarImage src="/user.jpg" alt="Usuário" />
-        <AvatarFallback>US</AvatarFallback>
-      </Avatar>
-      <StatusIndicator
-        variant={status}
-        size="sm"
-        className="absolute bottom-0 right-0 ring-2 ring-background"
-        label={`Status: ${status}`}
-      />
-    </div>
-  );
-}
-```
-
-### Lista de Usuários
-
-```tsx
-function UserList({ users }: { users: User[] }) {
-  return (
-    <ul className="space-y-2">
-      {users.map((user) => (
-        <li key={user.id} className="flex items-center gap-3">
-          <StatusIndicator
-            variant={user.status}
-            size="sm"
-            label={`${user.name} está ${user.status}`}
-          />
-          <span>{user.name}</span>
-        </li>
-      ))}
-    </ul>
-  );
-}
-```
-
-### Status de Conexão
-
-```tsx
-function ConnectionStatus({
-  isConnected,
-  isReconnecting,
-}: {
-  isConnected: boolean;
-  isReconnecting: boolean;
-}) {
-  const variant = isConnected
-    ? "online"
-    : isReconnecting
-      ? "pending"
-      : "offline";
-  const label = isConnected
-    ? "Conectado"
-    : isReconnecting
-      ? "Reconectando..."
-      : "Desconectado";
-
-  return (
-    <div className="flex items-center gap-2">
-      <StatusIndicator variant={variant} pulse={isReconnecting} label={label} />
-      <span className="text-sm text-muted-foreground">{label}</span>
-    </div>
-  );
-}
-```
-
-### Dashboard de Status
-
-```tsx
-function SystemStatus({ services }: { services: Service[] }) {
-  return (
-    <div className="grid gap-4">
-      {services.map((service) => (
-        <div
-          key={service.id}
-          className="flex items-center justify-between p-4 border rounded-lg"
-        >
-          <div className="flex items-center gap-3">
-            <StatusIndicator
-              variant={service.healthy ? "success" : "error"}
-              size="lg"
-              pulse={!service.healthy}
-              label={`${service.name}: ${service.healthy ? "Operacional" : "Com problemas"}`}
-            />
-            <div>
-              <p className="font-medium">{service.name}</p>
-              <p className="text-sm text-muted-foreground">
-                {service.description}
-              </p>
-            </div>
-          </div>
-          <span className="text-sm">
-            {service.healthy ? "Operacional" : "Com problemas"}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-### Inline com Texto
-
-```tsx
-<p className="flex items-center gap-2">
-  Servidor
-  <StatusIndicator variant="online" size="xs" label="online" />
-  <span className="text-success">online</span>
-</p>
-```
-
----
-
-## Testes
-
-### Testes Unitários
-
-```tsx
-// StatusIndicator.test.tsx
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { StatusIndicator } from "./StatusIndicator";
-
-describe("StatusIndicator", () => {
-  it("renders with default variant", () => {
-    render(<StatusIndicator label="Status" />);
-    expect(screen.getByRole("status")).toBeInTheDocument();
-  });
-
-  it("applies variant classes", () => {
-    render(<StatusIndicator variant="online" label="Online" />);
-    expect(screen.getByRole("status")).toHaveClass("bg-success");
-  });
-
-  it("applies size classes", () => {
-    render(<StatusIndicator size="lg" label="Grande" />);
-    expect(screen.getByRole("status")).toHaveClass("size-3");
-  });
-
-  it("applies shape classes", () => {
-    render(<StatusIndicator shape="square" label="Quadrado" />);
-    expect(screen.getByRole("status")).toHaveClass("rounded-sm");
-  });
-
-  it("merges custom className", () => {
-    render(<StatusIndicator className="custom-class" label="Custom" />);
-    expect(screen.getByRole("status")).toHaveClass("custom-class");
-  });
-
-  it("has data-slot attribute", () => {
-    render(<StatusIndicator label="Test" />);
-    expect(screen.getByRole("status")).toHaveAttribute(
-      "data-slot",
-      "status-indicator",
-    );
-  });
-});
-```
-
-### Testes de Animação
-
-```tsx
-describe("StatusIndicator animations", () => {
-  it("applies pulse animation when pulse is true", () => {
-    render(<StatusIndicator pulse label="Pulsando" />);
-    expect(screen.getByRole("status")).toHaveClass("animate-pulse");
-  });
-
-  it("applies ping animation when ping is true", () => {
-    render(<StatusIndicator ping label="Ping" />);
-    // Verificar estrutura com elemento de ping
-    expect(
-      screen.getByRole("status").querySelector(".animate-ping"),
-    ).toBeInTheDocument();
-  });
-
-  it("does not apply animations by default", () => {
-    render(<StatusIndicator label="Sem animação" />);
-    const indicator = screen.getByRole("status");
-    expect(indicator).not.toHaveClass("animate-pulse");
-    expect(indicator.querySelector(".animate-ping")).not.toBeInTheDocument();
-  });
-});
-```
-
-### Testes de Acessibilidade
-
-```tsx
-import { axe, toHaveNoViolations } from "jest-axe";
-
-expect.extend(toHaveNoViolations);
-
-describe("StatusIndicator accessibility", () => {
-  it("has no accessibility violations", async () => {
-    const { container } = render(
-      <StatusIndicator variant="online" label="Usuário online" />,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it("has role status", () => {
-    render(<StatusIndicator label="Status" />);
-    expect(screen.getByRole("status")).toBeInTheDocument();
-  });
-
-  it("has aria-label when label prop is provided", () => {
-    render(<StatusIndicator label="Usuário online" />);
-    expect(screen.getByRole("status")).toHaveAttribute(
-      "aria-label",
-      "Usuário online",
-    );
-  });
-
-  it("includes sr-only text for screen readers", () => {
-    render(<StatusIndicator label="Online" />);
-    expect(screen.getByText("Online")).toHaveClass("sr-only");
-  });
-
-  it("can be aria-hidden when decorative", () => {
-    render(<StatusIndicator aria-hidden="true" />);
-    expect(screen.queryByRole("status")).not.toBeInTheDocument();
-  });
-});
-```
-
-### Cenários Críticos
-
-```tsx
-describe("StatusIndicator edge cases", () => {
-  it("renders without label (decorative)", () => {
-    render(<StatusIndicator variant="online" aria-hidden="true" />);
-    // Não deve ter role="status" quando decorativo
-  });
-
-  it("updates variant dynamically", () => {
-    const { rerender } = render(
-      <StatusIndicator variant="online" label="Status" />,
-    );
-    expect(screen.getByRole("status")).toHaveClass("bg-success");
-
-    rerender(<StatusIndicator variant="offline" label="Status" />);
-    expect(screen.getByRole("status")).toHaveClass("bg-muted");
-  });
-
-  it("combines multiple variants correctly", () => {
-    render(
-      <StatusIndicator
-        variant="pending"
-        size="lg"
-        shape="square"
-        pulse
-        label="Processando"
-      />,
-    );
-    const indicator = screen.getByRole("status");
-    expect(indicator).toHaveClass(
-      "bg-info",
-      "size-3",
-      "rounded-sm",
-      "animate-pulse",
-    );
-  });
-
-  it("forwards ref correctly", () => {
-    const ref = { current: null };
-    render(<StatusIndicator ref={ref} label="Test" />);
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-  });
-});
-```
-
----
-
-## Roadmap / Features Futuras
-
-Baseado na análise comparativa com 14 design systems:
-
-### Prioridade Alta
-
-#### Componente `StatusIndicator.WithLabel`
-
-Compound component com texto inline.
-
-```tsx
-// Proposta de API
-<StatusIndicator.WithLabel variant="online">
-  Online
-</StatusIndicator.WithLabel>
-
-// Alternativa via prop
-<StatusIndicator variant="online" showLabel>
-  Online
-</StatusIndicator>
-```
-
-**Referências:** Spectrum (`StatusLight`), Carbon, Primer
-
-#### Posicionamento para Avatar
-
-Utilitário para posicionar sobre avatares.
-
-```tsx
-// Proposta de API
-<StatusIndicator.Badge position="bottom-right">
-  <Avatar>...</Avatar>
-  <StatusIndicator variant="online" />
-</StatusIndicator.Badge>
-```
-
-**Referências:** Chakra (`AvatarBadge`), MUI (`Badge`), Mantine (`Indicator`)
-
-### Prioridade Média
-
-#### Ring/Border opcional
-
-Borda para destacar sobre fundos coloridos.
-
-```tsx
-// Proposta de API
-interface StatusIndicatorProps {
-  withRing?: boolean;
-  ringColor?: string;
-}
-
-// Uso
-<StatusIndicator variant="online" withRing />;
-```
-
-**Referências:** NextUI, Mantine
-
-#### Suporte a ícones custom
-
-Ícone dentro do indicador.
-
-```tsx
-// Proposta de API
-<StatusIndicator variant="busy" icon={<PhoneOff />} />
-```
-
-**Referências:** Fluent UI (`outOfOfficeIcon`)
-
-### Decisões de Design
-
-| Feature     | Recomendação  | Justificativa                    |
-| ----------- | ------------- | -------------------------------- |
-| `withLabel` | ✓ Implementar | Muito comum em dashboards        |
-| `position`  | ✓ Implementar | Integração com Avatar essencial  |
-| `withRing`  | ⚠️ Avaliar    | Pode usar `ring-*` via className |
-| `icon`      | ✗ Evitar      | Complexidade, usar composição    |
-
----
-
-## Referências
-
-### Design Systems Analisados
-
-| Design System  | Componente      | Documentação                                                                           |
-| -------------- | --------------- | -------------------------------------------------------------------------------------- |
-| **Fluent UI**  | PresenceBadge   | [Docs](https://react.fluentui.dev/?path=/docs/components-badge-presencebadge--default) |
-| **Primer**     | StateLabel      | [Docs](https://primer.style/react/StateLabel)                                          |
-| **Spectrum**   | StatusLight     | [Docs](https://react-spectrum.adobe.com/react-spectrum/StatusLight.html)               |
-| **Chakra UI**  | AvatarBadge     | [Docs](https://chakra-ui.com/docs/components/avatar)                                   |
-| **MUI**        | Badge (dot)     | [Docs](https://mui.com/material-ui/react-badge/)                                       |
-| **Mantine**    | Indicator       | [Docs](https://mantine.dev/core/indicator/)                                            |
-| **Ant Design** | Badge (status)  | [Docs](https://ant.design/components/badge)                                            |
-| **NextUI**     | Badge           | [Docs](https://nextui.org/docs/components/badge)                                       |
-| **Carbon**     | StatusIndicator | [Docs](https://carbondesignsystem.com/components/status-indicator/usage/)              |
-
-### Especificações e Padrões
-
-- [WAI-ARIA - Status Role](https://www.w3.org/TR/wai-aria-1.2/#status)
-- [WAI-ARIA - Live Regions](https://www.w3.org/TR/wai-aria-1.2/#live_region_roles)
-- [WCAG 2.1 - Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)
-- [MDN - ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
-
-### Ferramentas Utilizadas
-
-- [CVA - Class Variance Authority](https://cva.style/docs)
-- [Tailwind CSS](https://tailwindcss.com/docs)
-- [Lucide Icons](https://lucide.dev/icons/)