nocturna-ui 0.0.4 → 0.0.6

package/README.md

@@ -2,169 +2,138 @@
 
 > **Primitivos góticos e brutalistas forjados para a web que não teme a escuridão.**
 
-A **Nocturna UI** é uma biblioteca de componentes React focada em interfaces de alto contraste, tipografia serifada e estética minimalista/gótica. Na **v0.0.4**, expandimos nosso arsenal com componentes de feedback, navegação e um sistema robusto de notificações (Toasts) desacoplado.
+A **Nocturna UI** é uma biblioteca de componentes React focada em interfaces de alto contraste, tipografia serifada e estética minimalista.
 
-[Showcase (DEMO)](https://gothd.github.io/nocturna-ui/) | [NPM](https://www.npmjs.com/package/nocturna-ui) | [UNPKG](https://unpkg.com/nocturna-ui/)
+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)
+[![Coverage](https://img.shields.io/codecov/c/github/gothd/nocturna-ui?style=flat-square&color=white)](https://codecov.io/gh/gothd/nocturna-ui)
 
 ---
 
-## 🕸️ Arsenal de Componentes
-
-| Primitivo                  | Descrição                                                     |
-| :------------------------- | :------------------------------------------------------------ |
-| **VoidButton**             | Botão brutalista com suporte a tamanhos sm/md/lg.             |
-| **CryptModal**             | Modal com portal, trava de foco e suporte a tecla ESC.        |
-| **RitualSelect**           | Select customizado com suporte total a navegação via teclado. |
-| **AltarMenu** `Novo`       | Menu dropdown acessível para ações e navegação.               |
-| **GrimoireAccordion**      | Acordeão com animação de altura dinâmica via Framer Motion.   |
-| **SoulTabs**               | Sistema de abas para organização de conteúdos densos.         |
-| **VeinInput**              | Input de texto com labels integrados e validação visual.      |
-| **HexCheckbox**            | Checkbox temático com animação de escala e ícone custom.      |
-| **OmenToast** `Novo`       | Sistema de notificações (Toasts) via Hook ou Global.          |
-| **RuneTooltip** `Novo`     | Tooltips informativos com posicionamento automático.          |
-| **VesselProgress** `Novo`  | Barras de progresso (Valor ou Timer/Indeterminate).           |
-| **AbyssScroll** `Novo`     | Container com scrollbar customizada cross-browser.            |
-| **SpectreSkeleton** `Novo` | Placeholders de carregamento (Avatar, Card).                  |
-| **SigilBadge**             | Emblemas para status e tags em versões Solid ou Outline.      |
-| **AbyssSeparator**         | Divisor de seção com suporte a labels e sigilos.              |
-| **NocturnaCard**           | Container clássico com sombras rígidas (hard shadows).        |
+## 🔮 Documentação Completa
+
+Para ver os componentes em ação, tabelas de propriedades interativas e exemplos avançados, visite nosso Grimório Digital:
+
+### [👉 Acessar Documentação (Playground)](https://gothd.github.io/nocturna-ui/)
 
 ---
 
 ## 🌑 Instalação
 
-### 1. Instale o pacote
-
 ```bash
 npm install nocturna-ui
 ```
 
-### 2. Dependências (Peer Dependencies)
+### Dependências
 
-Para garantir animações fluidas e evitar conflitos de versão do React, certifique-se de ter instalado:
+A biblioteca requer React e Framer Motion.
 
 ```bash
 npm install react react-dom framer-motion
 ```
 
-_(Nota: Os ícones internos utilizam Lucide React e já estão inclusos no pacote. Você não precisa instalá-lo separadamente, a menos que queira usar os mesmos ícones em sua aplicação)._
+---
 
-### 3. Setup do Provider
+## 🩸 Setup Inicial
 
-Para que o sistema de **Toasts** (OmenToast) funcione, você deve envolver sua aplicação com o `OmenToastProvider`:
+Importe o CSS global e envolva sua aplicação no `ToastProvider` para habilitar o sistema de notificações.
 
 ```tsx
-// src/App.tsx ou src/layout.tsx
-import { OmenToastProvider } from "nocturna-ui";
-import "nocturna-ui/dist/style.css"; // Importação vital dos estilos
+// No seu arquivo raiz (main.tsx ou App.tsx)
+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>;
 }
 ```
 
 ---
 
-## 🩸 Como Usar
+## 🎨 Paleta Cyber Goth
 
-### Componentes Básicos
+A versão 0.0.6 introduz 5 variantes de cor principais que permeiam todos os componentes:
 
-```tsx
-import { VoidButton, SigilBadge } from "nocturna-ui";
-
-export const Ritual = () => (
-  <div className="flex gap-4">
-    <SigilBadge variant="blood">Status: Ativo</SigilBadge>
-    <VoidButton variant="void" onClick={() => console.log("Invocado")}>
-      Iniciar Ritual
-    </VoidButton>
-  </div>
-);
-```
+| 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    |
+
+---
 
-### Hook de Toast (React)
+## 🕸️ Uso Básico
 
-Dentro de qualquer componente filho do Provider:
+Componentes padronizados e tipados:
 
 ```tsx
-import { useToast, VoidButton } from "nocturna-ui";
+import { Button, Card, Badge, useToast } from "nocturna-ui";
 
-export const SummonToast = () => {
+export const Ritual = () => {
   const { toast } = useToast();
 
   return (
-    <VoidButton
-      onClick={() =>
-        toast({
-          title: "Oferenda Aceita",
-          description: "Os dados foram salvos no grimório.",
-          type: "success",
-          variant: "void",
-        })
-      }
-    >
-      Salvar
-    </VoidButton>
+    <Card title="Protocolo de Rede" variant="secondary">
+      <div className="flex gap-4 mb-4">
+        <Badge variant="secondary">Online</Badge>
+        <Badge variant="primary" styleType="solid">
+          v2.4
+        </Badge>
+      </div>
+
+      <Button
+        variant="accent"
+        onClick={() =>
+          toast({
+            title: "Upload Iniciado",
+            type: "success", // Automático: Usa cor secondary
+          })
+        }
+      >
+        Transferir Dados
+      </Button>
+    </Card>
   );
 };
 ```
 
 ---
 
-## 📜 Uso via CDN (Vanilla JS / HTML)
+## 📜 Uso via CDN (Vanilla JS)
 
-A **Nocturna UI** injeta uma ponte global (`window.NocturnaUI`) quando carregada via script tag, permitindo o uso do sistema de Toasts mesmo fora do React.
-
-**Ordem de Importação:**
+A biblioteca injeta uma ponte global `window.NocturnaUI` para uso sem bundlers.
 
 ```html
 <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
 <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.4/dist/index.umd.js"></script>
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/nocturna-ui@0.0.4/dist/style.css"
-/>
-```
-
-**Inicialização e Uso:**
+<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" />
 
-```html
 <div id="root"></div>
 
 <script>
-  // 1. Inicializa o Provider (Necessário para a Bridge funcionar)
+  const { ToastProvider, Button } = window.NocturnaUI;
+
   const root = ReactDOM.createRoot(document.getElementById("root"));
-  root.render(React.createElement(window.NocturnaUI.OmenToastProvider));
-
-  // 2. Dispara Toasts via JavaScript Puro
-  function invocarMensagem() {
-    if (window.NocturnaUI && window.NocturnaUI.toaster) {
-      window.NocturnaUI.toaster.toast({
-        title: "Vanilla JS",
-        description: "O sistema de notificações funciona sem build steps.",
-        variant: "blood",
-        type: "warning",
-      });
-    }
-  }
+  root.render(React.createElement(ToastProvider));
 </script>
-
-<button onclick="invocarMensagem()">Testar Toast</button>
 ```
 
----
+_Veja o [exemplo completo aqui](./examples/cdn/index.html)._
 
-## 🛠️ Tecnologias
+---
 
-- **TypeScript** - Tipagem estrita para rituais seguros.
-- **Tailwind CSS** - Estilização atômica encapsulada (sem conflitos de classe).
-- **Framer Motion** - Animações de entrada e saída (Accordions, Modais, Toasts).
-- **Lucide React** - Iconografia leve e consistente.
+## 🧪 Desenvolvimento
 
----
+```bash
+npm test               # Roda testes unitários
+npm run test:coverage  # Relatório detalhado
+```
 
-Desenvolvido com 🖤 por **gothd**. ☕️
+Desenvolvido com 🖤 por **gothd**.

package/dist/components/Accordion.d.ts

@@ -1,12 +1,25 @@
 import { default as React } from 'react';
-interface GrimoireAccordionItem {
-    id: string;
-    title: string;
-    content: React.ReactNode;
+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.
+     */
+    items: Array<{
+        /** Identificador único para controle de estado */
+        id: string;
+        /** Texto do cabeçalho (sempre uppercase/serif) */
+        title: string;
+        /** Conteúdo a ser revelado (ReactNode) */
+        content: React.ReactNode;
+    }>;
+    /**
+     * Define a estética visual.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
 }
-interface GrimoireAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
-    items: GrimoireAccordionItem[];
-    variant?: "void" | "blood";
-}
-export declare const GrimoireAccordion: ({ items, variant, className, ...props }: GrimoireAccordionProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * 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 Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Badge.d.ts

@@ -1,9 +1,32 @@
 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;
-    variant?: "void" | "blood";
+    /**
+     * Define o tema de cores.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    /**
+     * Dimensões e escala de fonte do badge.
+     * - `sm`: Para contextos densos ou listas.
+     * - `md`: Tamanho padrão para labels independentes.
+     * @default "md"
+     */
     size?: "sm" | "md";
+    /**
+     * Estilo de preenchimento.
+     * - `outline`: Borda colorida, fundo transparente.
+     * - `solid`: Fundo preenchido, texto preto (exceto danger que pode ser branco).
+     * @default "outline"
+     */
     styleType?: "outline" | "solid";
 }
-export declare const SigilBadge: React.ForwardRefExoticComponent<SigilBadgeProps & React.RefAttributes<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 Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/dist/components/Button.d.ts

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

package/dist/components/Card.d.ts

@@ -1,10 +1,36 @@
 import { default as React } from 'react';
-interface NocturnaCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: "void" | "blood";
-    title: string;
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Define o tema visual do card.
+     * @default "primary"
+     */
+    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.
+     */
+    title?: string;
+    /**
+     * Texto de apoio renderizado logo abaixo do título em fonte sans-serif.
+     */
     description?: string;
+    /**
+     * Controla a tag HTML usada para o título (acessibilidade).
+     * Permite ajustar a hierarquia semântica sem mudar o estilo visual.
+     * @default "h3"
+     */
     headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /**
+     * Polimorfismo: Define qual elemento HTML raiz será renderizado.
+     * Útil para semântica (ex: transformar em `section`, `article` ou `li`).
+     * @default "div"
+     */
     as?: React.ElementType;
 }
-export declare const NocturnaCard: React.ForwardRefExoticComponent<NocturnaCardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Container fundamental da Nocturna UI.
+ * 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 Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Checkbox.d.ts

@@ -1,7 +1,20 @@
 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.
+     */
     label?: string;
-    variant?: "void" | "blood";
+    /**
+     * Define o tema visual do componente.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
 }
-export declare const HexCheckbox: React.ForwardRefExoticComponent<HexCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * 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 Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/Input.d.ts

@@ -1,9 +1,30 @@
 import { default as React } from 'react';
-interface VeinInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    variant?: "void" | "blood";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * 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?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    /**
+     * Dimensões do input.
+     * - `sm`: Compacto (32px altura aprox).
+     * - `md`: Padrão (48px altura aprox).
+     * @default "md"
+     */
     size?: "sm" | "md";
+    /**
+     * Rótulo exibido acima do campo.
+     */
     label?: string;
+    /**
+     * Mensagem de erro.
+     * Se existir, o input assume a cor `danger` automaticamente.
+     */
     error?: string;
 }
-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,17 +1,38 @@
 import { default as React } from 'react';
-interface AltarMenuItem {
-    id: string;
-    label: string;
-    icon?: React.ReactNode;
-    onClick: () => void;
-    danger?: boolean;
-    disabled?: boolean;
-}
-interface AltarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-    items: AltarMenuItem[];
-    variant?: "void" | "blood";
+export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Lista de itens do menu. */
+    items: Array<{
+        /** 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. */
+        danger?: boolean;
+        /** Desabilita o item. */
+        disabled?: boolean;
+    }>;
+    /**
+     * 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. */
     align?: "left" | "right";
 }
-export declare const AltarMenu: React.ForwardRefExoticComponent<AltarMenuProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+/**
+ * Menu Dropdown acessível.
+ *
+ * **Comportamento de Teclado:**
+ * - `Enter` / `Espaço`: Abre o menu (se focado no gatilho) ou ativa item.
+ * - `Setas (Cima/Baixo)`: Navega entre os itens e previne scroll da página.
+ * - `Home` / `End`: Vai para o primeiro ou último item.
+ * - `Esc`: Fecha o menu e retorna foco ao gatilho.
+ * - `Tab`: Fecha o menu e segue fluxo natural da página.
+ */
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Modal.d.ts

@@ -1,11 +1,43 @@
 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`.
+     */
     isOpen: boolean;
+    /**
+     * Função chamada quando o modal solicita fechamento.
+     * Disparada por: tecla ESC, clique no overlay ou clique no botão 'X'.
+     */
     onClose: () => void;
-    title: string;
+    /**
+     * Título principal do modal.
+     * Se fornecido, renderiza um `h2` padrão e configura `aria-labelledby`.
+     * Se omitido, você deve fornecer seu próprio cabeçalho dentro de `children` para acessibilidade visual.
+     */
+    title?: string;
+    /**
+     * Descrição opcional abaixo do título.
+     * Usada automaticamente para o atributo `aria-describedby`.
+     */
     description?: string;
+    /**
+     * Conteúdo interno do modal.
+     */
     children?: React.ReactNode;
-    variant?: "void" | "blood";
+    /**
+     * Define o tema visual do modal.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
 }
-export declare const CryptModal: React.ForwardRefExoticComponent<CryptModalProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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 Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Progress.d.ts

@@ -1,13 +1,54 @@
 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"`.
+     * @default 0
+     */
     value?: number;
+    /**
+     * Valor máximo da escala.
+     * @default 100
+     */
     max?: number;
-    variant?: "void" | "blood";
+    /**
+     * Define o tema visual da barra.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    /**
+     * Rótulo exibido acima da barra.
+     * Renderizado em uppercase e fonte serifada.
+     */
     label?: string;
+    /**
+     * Se verdadeiro, exibe a porcentagem numérica no lado direito do rótulo.
+     * Funciona apenas no modo `value`.
+     * @default false
+     */
     showValue?: boolean;
+    /**
+     * Define o comportamento da barra.
+     * - `value`: Progresso manual controlado pela prop `value`.
+     * - `timer`: Barra decrescente automática baseada na `duration`.
+     * - `indeterminate`: Animação de "loading" infinito para estados de espera.
+     * @default "value"
+     */
     mode?: "value" | "timer" | "indeterminate";
+    /**
+     * Duração da animação em milissegundos.
+     * Utilizado apenas quando `mode="timer"`.
+     * @default 5000
+     */
     duration?: number;
+    /**
+     * Pausa a animação do timer se verdadeiro.
+     * @default false
+     */
     paused?: boolean;
 }
-export declare const VesselProgress: React.ForwardRefExoticComponent<VesselProgressProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+/**
+ * Barra de progresso multifuncional com estética brutalista.
+ * Suporta exibição de valores percentuais, timers decrescentes e estados de carregamento indeterminado.
+ */
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Scroll.d.ts

@@ -1,8 +1,29 @@
 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.
+     */
     children: React.ReactNode;
-    variant?: "void" | "blood";
+    /**
+     * Define o tema visual da barra de rolagem.
+     * @default "primary"
+     */
+    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).
+     * @default "400px"
+     */
     maxHeight?: string | number;
 }
-export declare const AbyssScroll: React.ForwardRefExoticComponent<AbyssScrollProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Container de rolagem com scrollbar customizada cross-browser (Webkit & Firefox).
+ *
+ * **Features:**
+ * - Acessível via teclado (`tabindex="0"` permite foco e uso das setas).
+ * - Estilização profunda de scrollbar para manter a imersão gótica.
+ * - Suporte a conteúdo dinâmico.
+ */
+export declare const Scroll: React.ForwardRefExoticComponent<ScrollProps & React.RefAttributes<HTMLDivElement>>;
 export {};