nocturna-ui 0.0.5 → 0.0.6

package/README.md

@@ -4,7 +4,7 @@
 
 A **Nocturna UI** é uma biblioteca de componentes React focada em interfaces de alto contraste, tipografia serifada e estética minimalista.
 
-Na **v0.0.5**, introduzimos o sistema de **Aliases**, permitindo importações mais limpas (ex: `Button` ao invés de `VoidButton`), e melhoramos a cobertura de testes.
+Na **v0.0.6**, introduzimos a identidade visual **Cyber Goth**, nomes de componentes padronizados (API Limpa) e tokens semânticos de cor.
 
 [![NPM Version](https://img.shields.io/npm/v/nocturna-ui?color=000000&label=npm&style=flat-square)](https://www.npmjs.com/package/nocturna-ui)
 [![Tests](https://github.com/gothd/nocturna-ui/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/gothd/nocturna-ui/actions)
@@ -38,23 +38,37 @@ npm install react react-dom framer-motion
 
 ## 🩸 Setup Inicial
 
-Para que os componentes funcionem corretamente, você deve importar o CSS global e envolver sua aplicação no `OmenToastProvider` (mesmo que não use notificações imediatamente, ele configura contextos globais).
+Importe o CSS global e envolva sua aplicação no `ToastProvider` para habilitar o sistema de notificações.
 
 ```tsx
 // No seu arquivo raiz (main.tsx ou App.tsx)
-import { OmenToastProvider } from "nocturna-ui";
+import { ToastProvider } from "nocturna-ui";
 import "nocturna-ui/style.css"; // ⚠️ Importação vital dos estilos
 
 export default function App({ children }) {
-  return <OmenToastProvider>{children}</OmenToastProvider>;
+  return <ToastProvider>{children}</ToastProvider>;
 }
 ```
 
 ---
 
-## 🕸️ Uso Básico (Aliases)
+## 🎨 Paleta Cyber Goth
 
-Você não precisa mais decorar nomes místicos como `VoidButton` ou `CryptModal`. Utilize os Aliases funcionais:
+A versão 0.0.6 introduz 5 variantes de cor principais que permeiam todos os componentes:
+
+| Token       | Cor (Hex) | Significado Semântico | Estética      |
+| ----------- | --------- | --------------------- | ------------- |
+| `primary`   | `#FFFFFF` | Padrão / Neutro       | Bone White    |
+| `secondary` | `#00FF41` | Sucesso               | Malware Green |
+| `accent`    | `#FF007F` | Destaque              | Phantom Pink  |
+| `danger`    | `#DC2626` | Erro / Perigo         | Sanguine Red  |
+| `warning`   | `#FFD700` | Alerta                | Cyber Gold    |
+
+---
+
+## 🕸️ Uso Básico
+
+Componentes padronizados e tipados:
 
 ```tsx
 import { Button, Card, Badge, useToast } from "nocturna-ui";
@@ -63,38 +77,30 @@ export const Ritual = () => {
   const { toast } = useToast();
 
   return (
-    <Card title="Invocação">
+    <Card title="Protocolo de Rede" variant="secondary">
       <div className="flex gap-4 mb-4">
-        <Badge variant="blood">Status: Pendente</Badge>
+        <Badge variant="secondary">Online</Badge>
+        <Badge variant="primary" styleType="solid">
+          v2.4
+        </Badge>
       </div>
 
       <Button
-        variant="void"
-        onClick={() => toast({ title: "Pacto Realizado", type: "success" })}
+        variant="accent"
+        onClick={() =>
+          toast({
+            title: "Upload Iniciado",
+            type: "success", // Automático: Usa cor secondary
+          })
+        }
       >
-        Confirmar
+        Transferir Dados
       </Button>
     </Card>
   );
 };
 ```
 
-### Tabela de Aliases
-
-| Alias      | Componente Original | Função               |
-| ---------- | ------------------- | -------------------- |
-| `Button`   | `VoidButton`        | Ações principais     |
-| `Input`    | `VeinInput`         | Entrada de dados     |
-| `Select`   | `RitualSelect`      | Seleção acessível    |
-| `Modal`    | `CryptModal`        | Diálogos e alertas   |
-| `Toast`    | `OmenToast`         | Notificações         |
-| `Menu`     | `AltarMenu`         | Dropdowns            |
-| `Tabs`     | `SoulTabs`          | Navegação em abas    |
-| `Card`     | `NocturnaCard`      | Container estrutural |
-| `Skeleton` | `SpectreSkeleton`   | Estados de loading   |
-
-_Consulte a [documentação completa](https://gothd.github.io/nocturna-ui/) para a lista total de props e variantes._
-
 ---
 
 ## 📜 Uso via CDN (Vanilla JS)
@@ -106,24 +112,20 @@ A biblioteca injeta uma ponte global `window.NocturnaUI` para uso sem bundlers.
 <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 <script src="https://unpkg.com/framer-motion@11/dist/framer-motion.js"></script>
 
-<script src="https://unpkg.com/nocturna-ui@0.0.5/dist/index.umd.js"></script>
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/nocturna-ui@0.0.5/dist/style.css"
-/>
+<script src="https://unpkg.com/nocturna-ui@0.0.6/dist/index.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/nocturna-ui@0.0.6/dist/style.css" />
 
 <div id="root"></div>
 
 <script>
   const { ToastProvider, Button } = window.NocturnaUI;
 
-  // Renderização manual necessária em Vanilla JS
   const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(React.createElement(ToastProvider));
 </script>
 ```
 
-_Veja o [exemplo de uso completo pela CDN, com o ToastProvider](./examples/cdn/index.html)._
+_Veja o [exemplo completo aqui](./examples/cdn/index.html)._
 
 ---
 
@@ -131,7 +133,7 @@ _Veja o [exemplo de uso completo pela CDN, com o ToastProvider](./examples/cdn/i
 
 ```bash
 npm test               # Roda testes unitários
-npm run test:coverage  # Relatório de cobertura
+npm run test:coverage  # Relatório detalhado
 ```
 
 Desenvolvido com 🖤 por **gothd**.

package/dist/components/Accordion.d.ts

@@ -1,10 +1,5 @@
 import { default as React } from 'react';
-export interface GrimoireAccordionItem {
-    id: string;
-    title: string;
-    content: React.ReactNode;
-}
-interface GrimoireAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Lista de seções do acordeão.
      * Define o ID, título e conteúdo de cada painel.
@@ -19,15 +14,12 @@ interface GrimoireAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     }>;
     /**
      * Define a estética visual.
-     * - `void`: Monocromático (Borda Branca).
-     * - `blood`: Tons de vermelho sangue (Borda Vermelha).
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
 }
 /**
  * Componente de Acordeão com animações de altura (Framer Motion) e estética brutalista.
  * Possui bordas sobrepostas para criar um efeito de lista contínua.
  */
-export declare const GrimoireAccordion: ({ items, variant, className, ...props }: GrimoireAccordionProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Badge.d.ts

@@ -1,16 +1,14 @@
 import { default as React } from 'react';
-interface SigilBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
      * O conteúdo do emblema (geralmente texto curto ou ícone).
      */
     children: React.ReactNode;
     /**
      * Define o tema de cores.
-     * - `void`: Padrão monocromático (Preto/Branco).
-     * - `blood`: Tema agressivo (Vermelho/Preto) para erros ou destaques críticos.
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /**
      * Dimensões e escala de fonte do badge.
      * - `sm`: Para contextos densos ou listas.
@@ -20,8 +18,8 @@ interface SigilBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: "sm" | "md";
     /**
      * Estilo de preenchimento.
-     * - `outline`: Borda colorida com fundo transparente/preto.
-     * - `solid`: Fundo preenchido com a cor da variante.
+     * - `outline`: Borda colorida, fundo transparente.
+     * - `solid`: Fundo preenchido, texto preto (exceto danger que pode ser branco).
      * @default "outline"
      */
     styleType?: "outline" | "solid";
@@ -30,5 +28,5 @@ interface SigilBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  * Componente de Badge (Emblema) para status, tags ou categorias.
  * Utiliza tipografia serifada e uppercase para reforçar a estética gótica/brutalista.
  */
-export declare const SigilBadge: React.ForwardRefExoticComponent<SigilBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/dist/components/Button.d.ts

@@ -1,21 +1,18 @@
 import { default as React } from 'react';
-interface VoidButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Define o estilo visual do botão.
-     * - `void`: Estilo padrão preto e branco.
-     * - `blood`: Estilo vermelho escuro para ações perigosas ou destaque.
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /**
-     * Controla o tamanho e o padding do botão.
+     * Controla o tamanho e o padding.
      * @default "md"
      */
     size?: "sm" | "md" | "lg";
 }
 /**
- * O botão primário da Nocturna UI.
- * Utiliza sombras rígidas e transições brutas.
+ * Botão primário com estética brutalista.
+ * Utiliza sombras rígidas (hard shadows) e transições de alto contraste.
  */
-export declare const VoidButton: React.ForwardRefExoticComponent<VoidButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Card.d.ts

@@ -1,12 +1,10 @@
 import { default as React } from 'react';
-interface NocturnaCardProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Define o tema visual do card.
-     * - `void`: Borda branca e sombra branca no hover.
-     * - `blood`: Borda vermelha escura e sombra avermelhada no hover.
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /**
      * Título principal do card. Renderizado em uppercase e fonte serifada.
      * Se omitido, o cabeçalho não será renderizado.
@@ -34,5 +32,5 @@ interface NocturnaCardProps extends React.HTMLAttributes<HTMLDivElement> {
  * Possui comportamento de Flex Column para garantir que o conteúdo ocupe a altura disponível,
  * além de sombras rígidas (hard shadows) interativas no hover.
  */
-export declare const NocturnaCard: React.ForwardRefExoticComponent<NocturnaCardProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-interface HexCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     /**
      * Texto opcional exibido ao lado do checkbox.
      * Renderizado com tipografia sans-serif e uppercase.
@@ -7,16 +7,14 @@ interface HexCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
     label?: string;
     /**
      * Define o tema visual do componente.
-     * - `void`: Padrão monocromático (Borda Branca / Check Preto).
-     * - `blood`: Tema vermelho escuro (Borda Vermelha / Check Branco).
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
 }
 /**
  * Checkbox customizado com estética brutalista.
  * Mantém acessibilidade total escondendo o input nativo (`sr-only`)
  * mas preservando a navegabilidade via teclado e leitores de tela.
  */
-export declare const HexCheckbox: React.ForwardRefExoticComponent<HexCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/Input.d.ts

@@ -1,37 +1,30 @@
 import { default as React } from 'react';
-interface VeinInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /**
-     * Define o tema visual do input.
-     * - `void`: Padrão monocromático (Borda Branca).
-     * - `blood`: Tema vermelho escuro (Borda Vermelha e Texto Vermelho).
-     * @default "void"
+     * Define o tema visual do input seguindo a paleta Cyber Goth.
+     * - `primary`: Bone White (Padrão)
+     * - `secondary`: Malware Green
+     * - `accent`: Phantom Pink
+     * - `danger`: Sanguine Red
+     * - `warning`: Cyber Gold
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /**
-     * Dimensões do input (altura e padding).
-     * - `sm`: Compacto para formulários densos.
-     * - `md`: Tamanho padrão para legibilidade.
+     * Dimensões do input.
+     * - `sm`: Compacto (32px altura aprox).
+     * - `md`: Padrão (48px altura aprox).
      * @default "md"
      */
     size?: "sm" | "md";
     /**
-     * Texto do rótulo exibido acima do campo.
-     * Automaticamente vinculado ao input via `htmlFor` e `id`.
+     * Rótulo exibido acima do campo.
      */
     label?: string;
     /**
      * Mensagem de erro.
-     * Se fornecido:
-     * 1. Altera a cor da borda para vermelho.
-     * 2. Exibe a mensagem abaixo do input.
-     * 3. Adiciona `aria-invalid="true"` e vincula a mensagem via `aria-describedby` para leitores de tela.
+     * Se existir, o input assume a cor `danger` automaticamente.
      */
     error?: string;
 }
-/**
- * Campo de entrada de texto com estética brutalista.
- * Prioriza acessibilidade automática (vínculo label-input e tratamento de erros ARIA).
- * O foco gera uma sombra rígida (hard shadow) característica da Nocturna UI.
- */
-export declare const VeinInput: React.ForwardRefExoticComponent<VeinInputProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Menu.d.ts

@@ -1,19 +1,5 @@
 import { default as React } from 'react';
-export interface AltarMenuItem {
-    /** Identificador único do item. */
-    id: string;
-    /** Texto do item. */
-    label: string;
-    /** Ícone opcional à esquerda. */
-    icon?: React.ReactNode;
-    /** Ação ao clicar. */
-    onClick: () => void;
-    /** Indica ação destrutiva (vermelho). */
-    danger?: boolean;
-    /** Desabilita o item. */
-    disabled?: boolean;
-}
-interface AltarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Lista de itens do menu. */
     items: Array<{
         /** Identificador único do item. */
@@ -24,13 +10,16 @@ interface AltarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
         icon?: React.ReactNode;
         /** Ação ao clicar. */
         onClick: () => void;
-        /** Indica ação destrutiva (vermelho). */
+        /** Indica ação destrutiva. */
         danger?: boolean;
         /** Desabilita o item. */
         disabled?: boolean;
     }>;
-    /** Tema visual: 'void' (Padrão) ou 'blood' (Crítico). */
-    variant?: "void" | "blood";
+    /**
+     * Define o tema visual do menu.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /** Elemento gatilho opcional. Se omitido, usa ícone padrão. */
     trigger?: React.ReactNode;
     /** Alinhamento do dropdown. */
@@ -46,5 +35,4 @@ interface AltarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
  * - `Esc`: Fecha o menu e retorna foco ao gatilho.
  * - `Tab`: Fecha o menu e segue fluxo natural da página.
  */
-export declare const AltarMenu: React.ForwardRefExoticComponent<AltarMenuProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Modal.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-interface CryptModalProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Controla a visibilidade do modal.
      * O componente é renderizado via React Portal no `document.body`.
@@ -26,20 +26,18 @@ interface CryptModalProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     children?: React.ReactNode;
     /**
-     * Define o tema visual.
-     * - `void`: Monocromático (Borda Branca).
-     * - `blood`: Tema de alerta/erro (Borda Vermelha).
-     * @default "void"
+     * Define o tema visual do modal.
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
 }
 /**
- * Modal acessível com estética brutalista (Crypt).
+ * Modal acessível com estética brutalista.
  *
  * **Features Automáticas:**
  * - **Focus Trap:** Mantém o foco do teclado preso dentro do modal.
  * - **Scroll Lock:** Impede a rolagem da página de fundo.
  * - **Close on ESC:** Fecha ao pressionar Escape.
  */
-export declare const CryptModal: React.ForwardRefExoticComponent<CryptModalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Progress.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-interface VesselProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Valor atual do progresso.
      * Utilizado apenas quando `mode="value"`.
@@ -13,11 +13,9 @@ interface VesselProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     max?: number;
     /**
      * Define o tema visual da barra.
-     * - `void`: Padrão monocromático (Branco).
-     * - `blood`: Tema de perigo/erro (Vermelho Escuro).
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /**
      * Rótulo exibido acima da barra.
      * Renderizado em uppercase e fonte serifada.
@@ -53,5 +51,4 @@ interface VesselProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  * Barra de progresso multifuncional com estética brutalista.
  * Suporta exibição de valores percentuais, timers decrescentes e estados de carregamento indeterminado.
  */
-export declare const VesselProgress: React.ForwardRefExoticComponent<VesselProgressProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Scroll.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-interface AbyssScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ScrollProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Conteúdo que será rolado.
      * Deve exceder a altura definida em `maxHeight` para ativar a rolagem.
@@ -7,11 +7,9 @@ interface AbyssScrollProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /**
      * Define o tema visual da barra de rolagem.
-     * - `void`: Trilho escuro com polegar (thumb) branco.
-     * - `blood`: Trilho e polegar em tons de vermelho sangue.
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /**
      * Altura máxima do container antes de ativar a rolagem.
      * Aceita valores CSS válidos (ex: "400px", "50vh", 300).
@@ -27,5 +25,5 @@ interface AbyssScrollProps extends React.HTMLAttributes<HTMLDivElement> {
  * - Estilização profunda de scrollbar para manter a imersão gótica.
  * - Suporte a conteúdo dinâmico.
  */
-export declare const AbyssScroll: React.ForwardRefExoticComponent<AbyssScrollProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Scroll: React.ForwardRefExoticComponent<ScrollProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Select.d.ts

@@ -3,7 +3,7 @@ export interface RitualSelectOption {
     value: string;
     label: string;
 }
-interface RitualSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> {
+export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> {
     /**
      * Lista de opções disponíveis para seleção.
      */
@@ -34,11 +34,9 @@ interface RitualSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
     label?: string;
     /**
      * Define o tema visual.
-     * - `void`: Padrão monocromático.
-     * - `blood`: Tema avermelhado (Erro/Alerta).
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /**
      * Altura do componente.
      * - `sm`: Compacto (32px).
@@ -52,5 +50,4 @@ interface RitualSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
  * Select customizado (Combobox) com suporte a navegação por teclado e estética brutalista.
  * Substitui o `<select>` nativo para permitir estilização profunda do dropdown.
  */
-export declare const RitualSelect: React.ForwardRefExoticComponent<RitualSelectProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Separator.d.ts

@@ -1,12 +1,10 @@
 import { default as React } from 'react';
-interface AbyssSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Define o tema visual das linhas e do texto.
-     * - `void`: Linhas brancas (Padrão).
-     * - `blood`: Linhas vermelho-sangue (Para áreas de perigo ou destaque).
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /**
      * Texto opcional exibido no centro do separador.
      * As linhas se ajustam automaticamente ao redor do texto.
@@ -24,5 +22,5 @@ interface AbyssSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
  * Divisor visual com estética brutalista.
  * Cria uma linha horizontal (ou duas, se houver rótulo) para separar seções de conteúdo.
  */
-export declare const AbyssSeparator: React.ForwardRefExoticComponent<AbyssSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Skeleton.d.ts

@@ -1,12 +1,10 @@
 import { default as React } from 'react';
-interface SpectreSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Define o tema visual do esqueleto.
-     * - `void`: Cinza escuro/preto (Padrão).
-     * - `blood`: Vermelho escuro translúcido.
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /** Largura manual (ex: "100%", 200). */
     width?: string | number;
     /** Altura manual (ex: "1rem", 40). */
@@ -20,13 +18,13 @@ interface SpectreSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  * Possui `aria-hidden="true"` automaticamente, pois é um elemento puramente visual
  * e não deve ser lido por leitores de tela.
  */
-export declare const SpectreSkeleton: React.ForwardRefExoticComponent<SpectreSkeletonProps & React.RefAttributes<HTMLDivElement>>;
-interface SpectreSkeletonLineProps extends React.HTMLAttributes<HTMLDivElement> {
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonLineProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Define o tema visual do esqueleto.
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /**
      * Largura manual.
      * @default "100%"
@@ -42,8 +40,8 @@ interface SpectreSkeletonLineProps extends React.HTMLAttributes<HTMLDivElement>
  * Wrapper conveniente para simular linhas de texto.
  * Altura padrão de 1rem.
  */
-export declare const SpectreSkeletonLine: React.ForwardRefExoticComponent<SpectreSkeletonLineProps & React.RefAttributes<HTMLDivElement>>;
-interface SpectreSkeletonAvatarProps extends Omit<SpectreSkeletonProps, "width" | "height"> {
+export declare const SkeletonLine: React.ForwardRefExoticComponent<SkeletonLineProps & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonAvatarProps extends Omit<SkeletonProps, "width" | "height"> {
     /**
      * Tamanhos predefinidos para avatares.
      * - `sm`: 32px (w-8)
@@ -56,9 +54,9 @@ interface SpectreSkeletonAvatarProps extends Omit<SpectreSkeletonProps, "width"
 /**
  * Wrapper quadrado para simular avatares ou ícones de perfil.
  */
-export declare const SpectreSkeletonAvatar: React.ForwardRefExoticComponent<SpectreSkeletonAvatarProps & React.RefAttributes<HTMLDivElement>>;
-interface SpectreSkeletonCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: "void" | "blood";
+export declare const SkeletonAvatar: React.ForwardRefExoticComponent<SkeletonAvatarProps & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
     /** Número de linhas de texto simuladas no corpo do card. */
     lines?: number;
     /** Se verdadeiro, renderiza uma linha de título mais larga. */
@@ -68,5 +66,5 @@ interface SpectreSkeletonCardProps extends React.HTMLAttributes<HTMLDivElement>
  * Padrão composto que simula um Card completo (Título + Texto).
  * Útil para estados de loading de feeds ou grids.
  */
-export declare const SpectreSkeletonCard: React.ForwardRefExoticComponent<SpectreSkeletonCardProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SkeletonCard: React.ForwardRefExoticComponent<SkeletonCardProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Tabs.d.ts

@@ -1,10 +1,5 @@
 import { default as React } from 'react';
-export interface Tab {
-    id: string;
-    label: string;
-    content: React.ReactNode;
-}
-interface SoulTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Array de objetos que definem as abas.
      * Cada objeto deve conter `{ id, label, content }`.
@@ -19,11 +14,9 @@ interface SoulTabsProps extends React.HTMLAttributes<HTMLDivElement> {
     }>;
     /**
      * Define o tema visual.
-     * - `void`: Padrão monocromático (Branco/Preto).
-     * - `blood`: Tema avermelhado (Vermelho/Preto).
-     * @default "void"
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
 }
 /**
  * Componente de navegação em abas acessível.
@@ -33,5 +26,4 @@ interface SoulTabsProps extends React.HTMLAttributes<HTMLDivElement> {
  * - **Animações:** Transição suave (fade/slide) ao trocar de conteúdo.
  * - **ARIA:** Roles e atributos corretos (`tablist`, `tab`, `tabpanel`).
  */
-export declare const SoulTabs: React.ForwardRefExoticComponent<SoulTabsProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;