nocturna-ui 0.0.5 → 0.1.0

package/README.md

@@ -2,136 +2,79 @@
 
 > **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.
+A **Nocturna UI** é uma biblioteca de componentes React focada em interfaces de alto contraste e DX (Developer Experience) superior.
 
-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 versão **v0.1.0**, apresentamos a **System Props Engine** e os **Layout Primitives**, eliminando a necessidade de arquivos CSS externos para a maioria dos casos de uso.
 
-[![NPM Version](https://img.shields.io/npm/v/nocturna-ui?color=000000&label=npm&style=flat-square)](https://www.npmjs.com/package/nocturna-ui)
+[![NPM Version](https://img.shields.io/npm/v/nocturna-ui?color=ff007f&label=v0.1.0&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)
 
 ---
 
-## 🔮 Documentação Completa
+## ✨ Novidades da v0.1.0
 
-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/)
+- **System Props Engine:** Controle margens (`m`, `p`), cores (`bg`, `color`), tipografia e layout diretamente nas props dos componentes.
+- **Layout Primitives:** Novos componentes `Box`, `Stack`, `HStack`, `VStack`, `Grid` e `SimpleGrid`.
+- **Polymorphic Components:** Use a prop `as` para alterar a tag HTML semântica (ex: `as="section"`, `as="a"`) mantendo os estilos.
+- **Engine de Design Tokens:** Integração profunda com tokens de espaçamento e cores do tema Cyber Goth.
 
 ---
 
-## 🌑 Instalação
-
-```bash
-npm install nocturna-ui
-```
-
-### Dependências
+## 🔮 Documentação & Playground
 
-A biblioteca requer React e Framer Motion.
+Explore o grimório digital com exemplos interativos:
 
-```bash
-npm install react react-dom framer-motion
-```
+### [👉 Acessar Documentação (Playground)](https://gothd.github.io/nocturna-ui/)
 
 ---
 
-## 🩸 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).
-
-```tsx
-// No seu arquivo raiz (main.tsx ou App.tsx)
-import { OmenToastProvider } from "nocturna-ui";
-import "nocturna-ui/style.css"; // ⚠️ Importação vital dos estilos
+## 🌑 Instalação
 
-export default function App({ children }) {
-  return <OmenToastProvider>{children}</OmenToastProvider>;
-}
+```bash
+npm install nocturna-ui
 ```
 
----
-
-## 🕸️ Uso Básico (Aliases)
-
-Você não precisa mais decorar nomes místicos como `VoidButton` ou `CryptModal`. Utilize os Aliases funcionais:
+### Exemplo Rápido
 
 ```tsx
-import { Button, Card, Badge, useToast } from "nocturna-ui";
-
-export const Ritual = () => {
-  const { toast } = useToast();
-
-  return (
-    <Card title="Invocação">
-      <div className="flex gap-4 mb-4">
-        <Badge variant="blood">Status: Pendente</Badge>
-      </div>
-
-      <Button
-        variant="void"
-        onClick={() => toast({ title: "Pacto Realizado", type: "success" })}
-      >
-        Confirmar
+import { Button, Card, VStack, Text, Badge } from "nocturna-ui";
+
+export const App = () => (
+  <Card title="Status do Sistema" variant="secondary" w="350px">
+    <VStack gap={4}>
+      <Text color="zinc-400">Todos os sistemas operacionais.</Text>
+
+      <HStack justify="between" w="full">
+        <Badge variant="primary">v0.1.0</Badge>
+        <Badge variant="secondary" styleType="solid">
+          ONLINE
+        </Badge>
+      </HStack>
+
+      <Button variant="accent" w="full" mt={4}>
+        Executar Diagnóstico
       </Button>
-    </Card>
-  );
-};
+    </VStack>
+  </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)
+## 📜 Uso via CDN
 
-A biblioteca injeta uma ponte global `window.NocturnaUI` para uso sem bundlers.
+Para prototipagem rápida 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.5/dist/index.umd.js"></script>
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/nocturna-ui@0.0.5/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>
+<script src="https://unpkg.com/nocturna-ui@0.1.0/dist/index.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/nocturna-ui@0.1.0/dist/style.css" />
 ```
 
-_Veja o [exemplo de uso completo pela CDN, com o ToastProvider](./examples/cdn/index.html)._
+## _Veja o [exemplo completo aqui](./examples/cdn/index.html)._
 
----
+## 🤝 Contribuição
 
-## 🧪 Desenvolvimento
-
-```bash
-npm test               # Roda testes unitários
-npm run test:coverage  # Relatório de cobertura
-```
+Forks e Pull Requests são bem-vindos. Consulte o guia de contribuição para começar.
 
-Desenvolvido com 🖤 por **gothd**.
+**Licença ISC** • Criado por [Ruan Oliveira Sena](https://github.com/gothd)

package/dist/components/Accordion.d.ts

@@ -1,33 +1,27 @@
 import { default as React } from 'react';
-export interface GrimoireAccordionItem {
-    id: string;
-    title: string;
-    content: React.ReactNode;
-}
-interface GrimoireAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+import { SystemProps } from '../utils/system';
+export interface AccordionProps extends Omit<SystemProps, "as">, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
     /**
      * 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) */
+        /** Identificador único do item. Se omitido, será gerado pelo índice. */
+        id?: string;
+        /** Texto do cabeçalho */
         title: string;
         /** Conteúdo a ser revelado (ReactNode) */
         content: React.ReactNode;
     }>;
+    /** Permite múltiplas seções abertas ao mesmo tempo */
+    allowMultiple?: boolean;
     /**
      * 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" | "ghost";
 }
 /**
  * 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,16 @@
 import { default as React } from 'react';
-interface SigilBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+import { PolymorphicComponent } from '../types/polymorphic';
+import { SystemProps } from '../utils/system';
+interface BadgeProps extends SystemProps, Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
     /**
      * 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" | "ghost" | "danger" | "warning";
     /**
      * Dimensões e escala de fonte do badge.
      * - `sm`: Para contextos densos ou listas.
@@ -20,8 +20,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 +30,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: PolymorphicComponent<BadgeProps>;
 export {};

package/dist/components/Box.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { PolymorphicComponent } from '../types/polymorphic';
+import { SystemProps } from '../utils/system';
+export interface BoxProps extends SystemProps, Omit<React.HTMLAttributes<HTMLElement>, "color"> {
+}
+/**
+ * **Box** é o átomo fundamental da Nocturna UI.
+ * Ele mapeia props de estilo diretamente para estilos inline, garantindo que o design
+ * funcione independente da configuração de CSS do projeto consumidor.
+ */
+export declare const Box: PolymorphicComponent<BoxProps>;

package/dist/components/Button.d.ts

@@ -1,21 +1,25 @@
 import { default as React } from 'react';
-interface VoidButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { SystemProps } from '../utils/system';
+import { PolymorphicComponent } from 'src/types/polymorphic';
+export interface ButtonProps extends SystemProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
     /**
      * 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" | "ghost";
     /**
-     * Controla o tamanho e o padding do botão.
+     * Controla o tamanho e o padding.
      * @default "md"
      */
     size?: "sm" | "md" | "lg";
+    /**
+     * Define o estado de loading.
+     * @default false
+     */
+    isLoading?: boolean;
 }
 /**
- * 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: PolymorphicComponent<ButtonProps>;

package/dist/components/Card.d.ts

@@ -1,12 +1,12 @@
 import { default as React } from 'react';
-interface NocturnaCardProps extends React.HTMLAttributes<HTMLDivElement> {
+import { PolymorphicComponent } from '../types/polymorphic';
+import { SystemProps } from '../utils/system';
+interface CardProps extends SystemProps, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
     /**
      * 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" | "ghost";
     /**
      * Título principal do card. Renderizado em uppercase e fonte serifada.
      * Se omitido, o cabeçalho não será renderizado.
@@ -16,6 +16,10 @@ interface NocturnaCardProps extends React.HTMLAttributes<HTMLDivElement> {
      * Texto de apoio renderizado logo abaixo do título em fonte sans-serif.
      */
     description?: string;
+    /**
+     * Conteúdo opcional renderizado na base do card.
+     */
+    footer?: React.ReactNode;
     /**
      * Controla a tag HTML usada para o título (acessibilidade).
      * Permite ajustar a hierarquia semântica sem mudar o estilo visual.
@@ -23,16 +27,15 @@ interface NocturnaCardProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     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"
+     * Define a família da fonte da descrição.
+     * @default "sans"
      */
-    as?: React.ElementType;
+    descriptionFontFamily?: SystemProps["fontFamily"];
 }
 /**
  * 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 NocturnaCard: React.ForwardRefExoticComponent<NocturnaCardProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Card: PolymorphicComponent<CardProps>;
 export {};

package/dist/components/Checkbox.d.ts

@@ -1,22 +1,26 @@
 import { default as React } from 'react';
-interface HexCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+import { SystemProps } from '../utils/system';
+interface CheckboxProps extends Omit<SystemProps, "as">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "width" | "height" | "color"> {
     /**
      * Texto opcional exibido ao lado do checkbox.
-     * Renderizado com tipografia sans-serif e uppercase.
+     * Renderizado com tipografia sans-serif e uppercase por padrão.
      */
     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" | "ghost";
+    /**
+     * Se verdadeiro, o checkbox fica desabilitado e com aparência esmaecida.
+     * @default false
+     */
+    disabled?: boolean;
 }
 /**
  * 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/Flex.d.ts

@@ -0,0 +1,36 @@
+import { PolymorphicComponent } from '../types/polymorphic';
+import { BoxProps } from './Box';
+export interface FlexProps extends BoxProps {
+    /**
+     * Direção do eixo flexível.
+     * @default "row"
+     */
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    /**
+     * Alinhamento dos itens no eixo cruzado (align-items).
+     * @default "stretch"
+     */
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    /**
+     * Distribuição dos itens no eixo principal (justify-content).
+     * @default "start"
+     */
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    /**
+     * Comportamento de quebra de linha (flex-wrap).
+     * @default "nowrap"
+     */
+    wrap?: "nowrap" | "wrap" | "wrap-reverse";
+    /**
+     * Espaçamento entre os itens (gap).
+     * Aceita números (escala tailwind) ou strings arbitrárias.
+     */
+    gap?: number | string;
+}
+/**
+ * **Flex** é um container de layout flexível.
+ *
+ * Facilita o alinhamento e distribuição de espaço entre itens de forma responsiva.
+ * Substitui a necessidade de escrever classes repetitivas como `flex items-center justify-between`.
+ */
+export declare const Flex: PolymorphicComponent<FlexProps>;

package/dist/components/Grid.d.ts

@@ -0,0 +1,47 @@
+import { PolymorphicComponent } from '../types/polymorphic';
+import { BoxProps } from './Box';
+export interface GridProps extends BoxProps {
+    /**
+     * Define as colunas do grid (grid-template-columns).
+     * @example templateColumns="repeat(3, 1fr)"
+     */
+    templateColumns?: string;
+    /**
+     * Define as linhas do grid (grid-template-rows).
+     * @example templateRows="200px 1fr"
+     */
+    templateRows?: string;
+    /**
+     * Espaçamento entre itens (Gap).
+     * Aceita tokens numéricos da escala ou valores CSS.
+     */
+    gap?: number | string;
+    /** Espaçamento vertical entre linhas. */
+    rowGap?: number | string;
+    /** Espaçamento horizontal entre colunas. */
+    columnGap?: number | string;
+    /**
+     * Fluxo automático do grid.
+     * @default "row"
+     */
+    autoFlow?: "row" | "column" | "row dense" | "column dense";
+    /**
+     * Alinhamento dos itens no eixo do bloco (align-items).
+     */
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    /**
+     * Alinhamento dos itens no eixo da linha (justify-items).
+     */
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    /**
+     * Aplica o tema visual Cyber Goth ao container.
+     * Útil para criar "painéis de grade" contidos.
+     */
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning" | "ghost";
+}
+/**
+ * **Grid** é um container de layout bidimensional.
+ * * Permite posicionar itens em linhas e colunas com precisão.
+ * Suporta tokens de espaçamento e variantes visuais da Nocturna UI.
+ */
+export declare const Grid: PolymorphicComponent<GridProps>;

package/dist/components/Heading.d.ts

@@ -0,0 +1,21 @@
+import { PolymorphicComponent } from '../types/polymorphic';
+import { TextProps } from './Text';
+export interface HeadingProps extends TextProps {
+    /**
+     * Nível hierárquico do título.
+     * Afeta o tamanho da fonte e a tag HTML padrão.
+     * @default "h2"
+     */
+    level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /**
+     * Se verdadeiro, transforma o texto em caixa alta.
+     * @default true
+     */
+    uppercase?: boolean;
+}
+/**
+ * Componente para títulos e cabeçalhos.
+ * Impõe a tipografia **Serifada** (Playfair Display) e **Uppercase** por padrão,
+ * alinhado com a identidade Cyber Goth da Nocturna UI.
+ */
+export declare const Heading: PolymorphicComponent<HeadingProps>;

package/dist/components/Input.d.ts

@@ -1,37 +1,40 @@
 import { default as React } from 'react';
-interface VeinInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+import { SystemProps } from '../utils/system';
+export interface InputProps extends Omit<SystemProps, "as">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "color" | "size" | "width" | "height"> {
     /**
-     * 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
+     * - `ghost`: Stealth Mode (Sem bordas, fundo sutil)
+     * @default "primary"
      */
-    variant?: "void" | "blood";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning" | "ghost";
     /**
-     * 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;
+    /**
+     * Ícone opcional exibido no lado esquerdo do campo.
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Ícone opcional exibido no lado direito do campo.
+     */
+    rightIcon?: React.ReactNode;
 }
-/**
- * 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,36 +1,26 @@
 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> {
+import { SystemProps } from '../utils/system';
+export interface MenuProps extends Omit<SystemProps, "as">, Omit<React.HTMLAttributes<HTMLButtonElement>, "color"> {
     /** Lista de itens do menu. */
     items: Array<{
-        /** Identificador único do item. */
-        id: string;
+        /** Identificador único do item. Se omitido, será gerado pelo índice. */
+        id?: string;
         /** Texto do item. */
         label: string;
         /** Ícone opcional à esquerda. */
         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" | "ghost";
     /** Elemento gatilho opcional. Se omitido, usa ícone padrão. */
     trigger?: React.ReactNode;
     /** Alinhamento do dropdown. */
@@ -46,5 +36,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>>;