nocturna-ui 0.0.1 → 0.0.2

package/README.md

@@ -1,64 +1,53 @@
-# 🦇 Nocturna UI
-
-> **Primitivos góticos e brutalistas 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. Desenvolvida para ser leve, acessível e agnóstica de configuração.
-
-[Showcase (DEMO)](https://gothd.github.io/nocturna-ui/) | [NPM](https://www.npmjs.com/) | [UNPKG](https://unpkg.com/nocturna-ui/)
-
----
-
-## 🌑 Destaques Técnicos
-
-- **React + TypeScript**: Tipagem estrita para uma experiência de desenvolvimento segura.
-- **Tailwind CSS**: Estilização performática via utilitários.
-- **Multi-distribuição**: Suporte nativo para ESM, CJS e UMD (CDN).
-- **Zero Runtime CSS**: O usuário não precisa ter Tailwind instalado para usar a lib.
-- **CI/CD**: Deploy automatizado para GitHub Pages e versionamento via Tags.
-
-## 🕸️ Instalação
-
-### Via NPM
-
-```bash
-npm install nocturna-ui
-```
-
-No seu arquivo principal:
-
-```tsx
-import "nocturna-ui/style.css";
-import { VoidButton, NocturnaCard } from "nocturna-ui";
-```
-
-### Via CDN (UNPKG)
-
-Ideal para prototipagem rápida ou uso sem build tools.
-
-```html
-<link
-  rel="stylesheet"
-  href="[https://unpkg.com/nocturna-ui/dist/style.css](https://unpkg.com/nocturna-ui/dist/style.css)"
-/>
-<script src="[https://unpkg.com/nocturna-ui/dist/index.umd.js](https://unpkg.com/nocturna-ui/dist/index.umd.js)"></script>
-```
-
-## 🩸 Componentes Atuais
-
-- [x] **VoidButton**: Botão brutalista com variantes Ghost e Blood.
-- [x] **NocturnaCard**: Container com sombras rígidas e foco tipográfico.
-- [ ] **NocturnaInput**: (Em breve)
-- [ ] **ShadowOverlay**: (Em breve)
-
----
-
-## 🛠️ Desenvolvimento local
-
-1. Clone o repositório.
-2. `npm install` na raiz para a biblioteca.
-3. `cd playground && npm install` para o showcase.
-4. `npm run dev` na raiz para buildar em tempo real.
-
----
-
-Desevolvido com 🖤 por **gothd**.
+# 🦇 Nocturna UI
+
+> **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.2, expandimos nosso arsenal com componentes complexos e foco total em acessibilidade.
+
+[Showcase (DEMO)](https://gothd.github.io/nocturna-ui/) | [NPM](https://www.npmjs.com/package/nocturna-ui) | [UNPKG](https://unpkg.com/nocturna-ui/)
+
+---
+
+## 🌑 Novidades da v0.0.2
+
+- **Acessibilidade**: Implementação de _Focus Trap_ em modais, navegação por teclado em selects e atributos ARIA completos.
+- **Utilitário `cn`**: Integração de `tailwind-merge` e `clsx` para garantir que seus estilos customizados nunca conflitem com os da lib.
+- **React Portals**: Diálogos e Modais agora são renderizados fora da árvore principal para evitar problemas de z-index.
+- **Expansão do Grimório**: Adição de Accordion, Tabs, Badges, Separators e Checkboxes.
+
+## 🕸️ Componentes Disponíveis
+
+| Primitivo             | Descrição                                                     |
+| :-------------------- | :------------------------------------------------------------ |
+| **VoidButton**        | Botão brutalista com suporte a tamanhos sm/md/lg.             |
+| **CryptModal**        | Modal com portal e trava de foco para acessibilidade.         |
+| **RitualSelect**      | Select customizado com suporte total a navegação via teclado. |
+| **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 estados de erro e animação de pulso.       |
+| **HexCheckbox**       | Checkbox temático com animação de escala.                     |
+| **AbyssSeparator**    | Divisor de seção com suporte a labels e sigilos.              |
+| **SigilBadge**        | Emblemas para status e tags em versões Solid ou Outline.      |
+| **NocturnaCard**      | Container clássico com sombras rígidas (hard shadows).        |
+
+## 🩸 Instalação e Uso
+
+```bash
+npm install nocturna-ui
+
+```
+
+```tsx
+import "nocturna-ui/dist/style.css";
+import { VoidButton, CryptModal } from "nocturna-ui";
+
+export const Ritual = () => (
+  <VoidButton variant="blood" size="lg">
+    Iniciar Invocação
+  </VoidButton>
+);
+```
+
+---
+
+Desenvolvido com 🖤 por **gothd**. ☕️

package/dist/components/Accordion.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface GrimoireAccordionItem {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+}
+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 {};

package/dist/components/Badge.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface SigilBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
+    variant?: "void" | "blood";
+    size?: "sm" | "md";
+    styleType?: "outline" | "solid";
+}
+export declare const SigilBadge: ({ children, variant, size, styleType, className, ...props }: SigilBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Button.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "ghost" | "blood";
+interface VoidButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "void" | "blood";
+    size?: "sm" | "md" | "lg";
 }
-export declare const VoidButton: ({ variant, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VoidButton: ({ variant, size, className, ...props }: VoidButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Card.d.ts

@@ -1,9 +1,8 @@
 import { default as React } from 'react';
-interface CardProps {
+interface NocturnaCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "void" | "blood";
     title: string;
     description?: string;
-    children?: React.ReactNode;
-    variant?: "void" | "blood";
 }
-export declare const NocturnaCard: ({ title, description, children, variant, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NocturnaCard: ({ title, description, variant, className, children, ...props }: NocturnaCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface HexCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    variant?: "void" | "blood";
+}
+export declare const HexCheckbox: ({ label, variant, checked, className, ...props }: HexCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Input.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface VeinInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    variant?: "void" | "blood";
+    size?: "sm" | "md";
+    label?: string;
+    error?: string;
+    inputSize?: React.InputHTMLAttributes<HTMLInputElement>["size"];
+}
+export declare const VeinInput: ({ variant, size, label, error, className, inputSize, ...props }: VeinInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Modal.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface CryptModalProps extends React.HTMLAttributes<HTMLDivElement> {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+    variant?: "void" | "blood";
+}
+export declare const CryptModal: ({ isOpen, onClose, title, description, children, variant, className, ...props }: CryptModalProps) => React.ReactPortal | null;
+export {};

package/dist/components/Select.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+interface RitualSelectOption {
+    value: string;
+    label: string;
+}
+interface RitualSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    options: RitualSelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    variant?: "void" | "blood";
+    size?: "sm" | "md" | "lg";
+}
+export declare const RitualSelect: ({ options, value, onChange, placeholder, label, variant, size, className, }: RitualSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Separator.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface AbyssSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "void" | "blood";
+    label?: string;
+}
+export declare const AbyssSeparator: ({ variant, label, className, ...props }: AbyssSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tabs.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface Tab {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+interface SoulTabsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    tabs: Tab[];
+    variant?: "void" | "blood";
+}
+export declare const SoulTabs: ({ tabs, variant, className, ...props }: SoulTabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};