nocturna-ui 0.0.6 → 0.1.0

package/README.md

@@ -2,138 +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.6**, introduzimos a identidade visual **Cyber Goth**, nomes de componentes padronizados (API Limpa) e tokens semânticos de cor.
+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
+## 🔮 Documentação & Playground
 
-```bash
-npm install nocturna-ui
-```
-
-### Dependências
+Explore o grimório digital com exemplos interativos:
 
-A biblioteca requer React e Framer Motion.
-
-```bash
-npm install react react-dom framer-motion
-```
+### [👉 Acessar Documentação (Playground)](https://gothd.github.io/nocturna-ui/)
 
 ---
 
-## 🩸 Setup Inicial
-
-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 { ToastProvider } from "nocturna-ui";
-import "nocturna-ui/style.css"; // ⚠️ Importação vital dos estilos
+## 🌑 Instalação
 
-export default function App({ children }) {
-  return <ToastProvider>{children}</ToastProvider>;
-}
+```bash
+npm install nocturna-ui
 ```
 
----
-
-## 🎨 Paleta Cyber Goth
-
-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:
+### Exemplo Rápido
 
 ```tsx
-import { Button, Card, Badge, useToast } from "nocturna-ui";
+import { Button, Card, VStack, Text, Badge } from "nocturna-ui";
 
-export const Ritual = () => {
-  const { toast } = useToast();
+export const App = () => (
+  <Card title="Status do Sistema" variant="secondary" w="350px">
+    <VStack gap={4}>
+      <Text color="zinc-400">Todos os sistemas operacionais.</Text>
 
-  return (
-    <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
+      <HStack justify="between" w="full">
+        <Badge variant="primary">v0.1.0</Badge>
+        <Badge variant="secondary" styleType="solid">
+          ONLINE
         </Badge>
-      </div>
-
-      <Button
-        variant="accent"
-        onClick={() =>
-          toast({
-            title: "Upload Iniciado",
-            type: "success", // Automático: Usa cor secondary
-          })
-        }
-      >
-        Transferir Dados
+      </HStack>
+
+      <Button variant="accent" w="full" mt={4}>
+        Executar Diagnóstico
       </Button>
-    </Card>
-  );
-};
+    </VStack>
+  </Card>
+);
 ```
 
 ---
 
-## 📜 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.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;
-
-  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 completo aqui](./examples/cdn/index.html)._
+## _Veja o [exemplo completo aqui](./examples/cdn/index.html)._
 
----
-
-## 🧪 Desenvolvimento
+## 🤝 Contribuição
 
-```bash
-npm test               # Roda testes unitários
-npm run test:coverage  # Relatório detalhado
-```
+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,22 +1,24 @@
 import { default as React } from 'react';
-export interface AccordionProps 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.
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning" | "ghost";
 }
 /**
  * Componente de Acordeão com animações de altura (Framer Motion) e estética brutalista.

package/dist/components/Badge.d.ts

@@ -1,5 +1,7 @@
 import { default as React } from 'react';
-interface BadgeProps 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).
      */
@@ -8,7 +10,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
      * Define o tema de cores.
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    variant?: "primary" | "secondary" | "accent" | "ghost" | "danger" | "warning";
     /**
      * Dimensões e escala de fonte do badge.
      * - `sm`: Para contextos densos ou listas.
@@ -28,5 +30,5 @@ interface BadgeProps 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 Badge: React.ForwardRefExoticComponent<BadgeProps & 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,18 +1,25 @@
 import { default as React } from 'react';
-export interface ButtonProps 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.
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning" | "ghost";
     /**
      * Controla o tamanho e o padding.
      * @default "md"
      */
     size?: "sm" | "md" | "lg";
+    /**
+     * Define o estado de loading.
+     * @default false
+     */
+    isLoading?: boolean;
 }
 /**
  * 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>>;
+export declare const Button: PolymorphicComponent<ButtonProps>;

package/dist/components/Card.d.ts

@@ -1,10 +1,12 @@
 import { default as React } from 'react';
-interface CardProps 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.
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    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.
@@ -14,6 +16,10 @@ interface CardProps 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.
@@ -21,16 +27,15 @@ interface CardProps 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 Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Card: PolymorphicComponent<CardProps>;
 export {};

package/dist/components/Checkbox.d.ts

@@ -1,15 +1,21 @@
 import { default as React } from 'react';
-interface CheckboxProps 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.
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    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.

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,5 +1,6 @@
 import { default as React } from 'react';
-export interface InputProps 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 seguindo a paleta Cyber Goth.
      * - `primary`: Bone White (Padrão)
@@ -7,9 +8,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * - `accent`: Phantom Pink
      * - `danger`: Sanguine Red
      * - `warning`: Cyber Gold
+     * - `ghost`: Stealth Mode (Sem bordas, fundo sutil)
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning" | "ghost";
     /**
      * Dimensões do input.
      * - `sm`: Compacto (32px altura aprox).
@@ -26,5 +28,13 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * 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;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Menu.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
-export interface MenuProps 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. */
@@ -19,7 +20,7 @@ export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
      * Define o tema visual do menu.
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning" | "ghost";
     /** Elemento gatilho opcional. Se omitido, usa ícone padrão. */
     trigger?: React.ReactNode;
     /** Alinhamento do dropdown. */

package/dist/components/Modal.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+import { SystemProps } from '../utils/system';
+interface ModalProps extends Omit<SystemProps, "as">, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
     /**
      * Controla a visibilidade do modal.
      * O componente é renderizado via React Portal no `document.body`.
@@ -29,7 +30,11 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
      * Define o tema visual do modal.
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning" | "ghost";
+    /** Define a largura máxima do modal.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg" | "xl" | "full";
 }
 /**
  * Modal acessível com estética brutalista.

package/dist/components/Progress.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+import { SystemProps } from '../utils/system';
+export interface ProgressProps extends Omit<SystemProps, "as">, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
     /**
      * Valor atual do progresso.
      * Utilizado apenas quando `mode="value"`.

package/dist/components/Scroll.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-interface ScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+import { SystemProps } from '../utils/system';
+interface ScrollProps extends Omit<SystemProps, "as">, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
     /**
      * Conteúdo que será rolado.
      * Deve exceder a altura definida em `maxHeight` para ativar a rolagem.
@@ -11,11 +12,14 @@ interface ScrollProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     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"
+     * Define a direção da rolagem.
+     * @default "vertical"
      */
-    maxHeight?: string | number;
+    orientation?: "vertical" | "horizontal" | "both";
+    /**
+     * Se verdadeiro, oculta visualmente a barra de rolagem mantendo a funcionalidade.
+     */
+    hideScrollbar?: boolean;
 }
 /**
  * Container de rolagem com scrollbar customizada cross-browser (Webkit & Firefox).

package/dist/components/Select.d.ts

@@ -1,9 +1,6 @@
 import { default as React } from 'react';
-export interface RitualSelectOption {
-    value: string;
-    label: string;
-}
-export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> {
+import { SystemProps } from '../utils/system';
+export interface SelectProps extends Omit<SystemProps, "as">, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "color"> {
     /**
      * Lista de opções disponíveis para seleção.
      */
@@ -25,7 +22,7 @@ export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     onChange?: (value: string) => void;
     /**
      * Texto exibido quando nenhum valor está selecionado.
-     * @default "Select..."
+     * @default "Selecionar..."
      */
     placeholder?: string;
     /**
@@ -36,7 +33,7 @@ export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
      * Define o tema visual.
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    variant?: "primary" | "secondary" | "accent" | "danger" | "warning" | "ghost";
     /**
      * Altura do componente.
      * - `sm`: Compacto (32px).

package/dist/components/Separator.d.ts

@@ -1,26 +1,29 @@
 import { default as React } from 'react';
-interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+import { PolymorphicComponent } from '../types/polymorphic';
+import { SystemProps } from '../utils/system';
+interface SeparatorProps extends SystemProps, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
     /**
      * Define o tema visual das linhas e do texto.
      * @default "primary"
      */
     variant?: "primary" | "secondary" | "accent" | "danger" | "warning";
+    /**
+     * Orientação do separador.
+     * - `horizontal`: Cria uma linha de largura total (padrão).
+     * - `vertical`: Cria uma linha de altura total (útil em Flex rows).
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
     /**
      * Texto opcional exibido no centro do separador.
      * As linhas se ajustam automaticamente ao redor do texto.
      * Renderizado em uppercase e com espaçamento de letras estendido.
      */
     label?: string;
-    /**
-     * Polimorfismo: Permite alterar o elemento HTML raiz.
-     * Útil para semântica (ex: renderizar como `li` em listas ou `hr` estilizado).
-     * @default "div"
-     */
-    as?: React.ElementType;
 }
 /**
  * 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 Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Separator: PolymorphicComponent<SeparatorProps>;
 export {};