@thecodecodex/design-system 0.0.0-stage → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Douglas Capeletti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,86 @@
-# Temporary Holding Version
+# @thecodecodex/design-system
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Design system do [thecodecodex.com](https://thecodecodex.com): tokens e 5 temas para **Tailwind CSS v4** e componentes de formulário em **React** (funcionam também em Preact via `preact/compat`).
+
+## Instalação
+
+```bash
+pnpm add @thecodecodex/design-system
+```
+
+## CSS
+
+No CSS principal do app, depois do Tailwind:
+
+```css
+@import "tailwindcss";
+@import "@thecodecodex/design-system/styles.css";
+/* para o Tailwind gerar as classes usadas pelos componentes (caminho relativo a este CSS) */
+@source "../node_modules/@thecodecodex/design-system/dist";
+```
+
+`styles.css` = `tokens.css` + `themes.css` + `base.css`. Para não aplicar os estilos base (títulos, foco, tabelas, barras de rolagem), importe só `tokens.css` e `themes.css`.
+
+Utilidades geradas: `bg-surface`, `bg-inset`, `bg-ground`, `text-text-primary`, `text-text-secondary`, `bg-btn-primary`, `text-on-accent`, `border-border`, `border-soft`, `text-contrast`, `bg-chart-1`, `bg-diff-add`, `bg-cat-*` etc.
+
+### Fontes
+
+Os tokens usam `--font-roboto` (display), `--font-poppins` (corpo) e `--font-jetbrains-mono` (mono). Cada app carrega as fontes e define essas variáveis (ex.: `next/font` com `variable: "--font-roboto"`, ou Astro Fonts).
+
+## Temas
+
+`claro`, `papel`, `crepusculo`, `escuro`, `contraste`, mais as preferências `auto` (por horário) e `sistema`. A classe `.theme-<nome>` vai no `<html>`; temas escuros recebem também `.dark` (variante `dark:` do Tailwind).
+
+Script anti-flash no `<head>`, antes do primeiro paint:
+
+```tsx
+// Next.js (app/layout.tsx)
+import { themeInitScript } from "@thecodecodex/design-system/theme"
+
+<html suppressHydrationWarning>
+  <head><script dangerouslySetInnerHTML={{ __html: themeInitScript }} /></head>
+```
+
+```astro
+---
+import { themeInitScript } from "@thecodecodex/design-system/theme"
+---
+<script is:inline set:html={themeInitScript} />
+```
+
+No cliente: `watchTheme()` mantém o tema certo (virada de horário, mudança no SO, outra aba); `setPreference("papel")` troca e salva. O evento `themechange` é disparado em `document`.
+
+## Componentes
+
+```tsx
+import { Badge, NumberField, Segmented, ToolShell, ParamGroup } from "@thecodecodex/design-system"
+```
+
+`Badge`, `Checkbox`, `DataTable`, `KeyValue`, `NumberField`, `OutputList`, `ParamGroup`, `Presets`, `RangeField`, `Segmented`, `Stepper`, `TextField`, `ToolShell`, as classes `panel`/`panelHeader` e os hooks `useCopy` e `useHydrated`.
+
+Textos fixos vêm em pt-BR; passe `labels` para traduzir (ex.: `<OutputList labels={{ copy: "Copy", copied: "Copied!" }} … />`).
+
+### Preact
+
+Com `preact({ compat: true })` (Astro) ou o alias `react → preact/compat` no bundler, os componentes funcionam sem mudanças.
+
+No Astro, empacote o pacote também no SSR/prerender, senão o Node carrega o React real (instalado como peer) e os hooks quebram:
+
+```js
+// astro.config.mjs
+const bundled = { resolve: { noExternal: ["@thecodecodex/design-system"] } }
+export default defineConfig({
+  integrations: [preact({ compat: true })],
+  vite: { environments: { ssr: bundled, prerender: bundled } },
+})
+```
+
+## Desenvolvimento
+
+```bash
+pnpm install
+pnpm check   # tsc + eslint + vitest
+pnpm build   # gera dist/
+```
+
+Publicação: atualize `version` no `package.json`, faça a tag `vX.Y.Z` e envie; o workflow `publish.yml` publica no npm com provenance.

package/dist/components/Badge.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export default function Badge({ tone, children }: {
+    tone: "ok" | "error" | "neutral";
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Badge.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Selo de status: ok (válido), error (inválido) ou neutral
+export default function Badge({ tone, children }) {
+    const styles = { ok: "bg-btn-primary text-on-accent", error: "bg-contrast text-on-accent", neutral: "border-2 border-border" }[tone];
+    return _jsx("span", { className: `inline-flex items-center rounded-md px-2.5 py-1 text-[13px] font-bold ${styles}`, children: children });
+}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+interface Props {
+    label: ReactNode;
+    checked: boolean;
+    onChecked: (checked: boolean) => void;
+}
+export default function Checkbox({ label, checked, onChecked }: Props): import("react").JSX.Element;
+export {};

package/dist/components/Checkbox.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Linha inteira clicável, em recuo (bg-inset) para se destacar dos campos de texto
+export default function Checkbox({ label, checked, onChecked }) {
+    return (_jsxs("label", { className: "flex min-h-11 cursor-pointer items-center gap-3 rounded-[10px] bg-inset px-3 py-2 text-sm font-semibold has-[:focus-visible]:outline-3 has-[:focus-visible]:outline-contrast", children: [_jsx("input", { type: "checkbox", className: "size-5 flex-none accent-[var(--btn-primary)]", checked: checked, onChange: (e) => onChecked(e.currentTarget.checked) }), label] }));
+}

package/dist/components/DataTable.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface DataTableRow {
+    key: string;
+    label: ReactNode;
+    cells: ReactNode[];
+    highlight?: boolean;
+}
+interface Props {
+    headers: ReactNode[];
+    rows: DataTableRow[];
+}
+export default function DataTable({ headers, rows }: Props): import("react").JSX.Element;
+export {};

package/dist/components/DataTable.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cellClass = "border-0 px-4 py-3";
+// `plain` desliga o estilo de tabela dos artigos (.post table) definido em global.css
+export default function DataTable({ headers, rows }) {
+    return (_jsx("div", { className: "overflow-x-auto rounded-2xl border-2 border-border", children: _jsxs("table", { className: "plain w-full border-collapse whitespace-nowrap text-left text-sm", children: [_jsx("thead", { className: "bg-text-primary text-bg-primary", children: _jsx("tr", { children: headers.map((header, i) => (_jsx("th", { className: `${cellClass} border-0 font-semibold`, children: header }, i))) }) }), _jsx("tbody", { className: "font-mono", children: rows.map((row) => (_jsxs("tr", { className: `border-b border-border/15 last:border-b-0 ${row.highlight ? "bg-cat-note text-cat-fg" : "hover:bg-bg-secondary"}`, children: [_jsx("td", { className: `${cellClass} font-body font-semibold`, children: row.label }), row.cells.map((cell, i) => (_jsx("td", { className: `${cellClass} ${row.highlight ? "font-bold" : ""}`, children: cell }, i)))] }, row.key))) })] }) }));
+}

package/dist/components/KeyValue.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { type CopyLabels } from "./labels.js";
+interface Props {
+    labels?: Partial<CopyLabels>;
+    rows: {
+        label: ReactNode;
+        value: string;
+        copyable?: boolean;
+    }[];
+}
+export default function KeyValue({ labels, rows }: Props): import("react").JSX.Element;
+export {};

package/dist/components/KeyValue.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { copyLabels } from "./labels.js";
+import { useCopy } from "./useCopy.js";
+// Tabela de rótulo → valor (resultados de conversões), com copiar por linha
+export default function KeyValue({ labels, rows }) {
+    const text = { ...copyLabels, ...labels };
+    const { copied, copy } = useCopy();
+    return (_jsx("dl", { className: "flex flex-col overflow-hidden rounded-[14px] border-2 border-border", children: rows.map((row, i) => (_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 border-border/20 px-4 py-2.5 [&:not(:first-child)]:border-t-[1.5px]", children: [_jsx("dt", { className: "w-40 flex-none text-sm font-semibold text-text-secondary", children: row.label }), _jsx("dd", { className: "m-0 min-w-0 flex-1 break-all font-mono text-[15px]", children: row.value }), row.copyable !== false && row.value && (_jsx("button", { type: "button", className: "text-sm font-bold text-btn-primary hover:text-contrast", onClick: () => copy(row.value, `${i}`), "aria-live": "polite", children: copied === `${i}` ? text.copied : text.copy }))] }, i))) }));
+}

package/dist/components/NumberField.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+interface Props {
+    label: ReactNode;
+    value: number;
+    onValue: (value: number) => void;
+    step?: number;
+    prefix?: string;
+    suffix?: string;
+    hint?: ReactNode;
+    large?: boolean;
+    className?: string;
+}
+export default function NumberField({ label, value, onValue, step, prefix, suffix, hint, large, className }: Props): import("react").JSX.Element;
+export {};

package/dist/components/NumberField.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { onTextInput } from "./textInput.js";
+export default function NumberField({ label, value, onValue, step = 1, prefix, suffix, hint, large = false, className = "" }) {
+    return (_jsxs("label", { className: `flex flex-col gap-1.5 text-sm font-semibold ${className}`, children: [label, _jsxs("span", { className: `flex items-stretch overflow-hidden rounded-[10px] border-2 border-border bg-surface font-mono focus-within:outline-3 focus-within:outline-offset-1 focus-within:outline-contrast ${large ? "h-14 text-[22px] font-bold" : "h-12 text-base"}`, children: [prefix && _jsx("span", { className: "flex flex-none items-center border-r-[1.5px] border-soft bg-inset px-3 font-body text-sm font-semibold text-text-secondary", children: prefix }), _jsx("input", { type: "number", inputMode: "decimal", step: step, className: "min-w-0 flex-1 bg-transparent px-3 text-text-primary outline-none", value: value, ...onTextInput((raw) => onValue(Number(raw) || 0)) }), suffix && _jsx("span", { className: "flex flex-none items-center border-l-[1.5px] border-soft bg-inset px-3 font-body text-sm font-semibold text-text-secondary", children: suffix })] }), hint && _jsx("span", { className: "text-[13px] font-normal text-text-secondary", children: hint })] }));
+}

package/dist/components/OutputList.d.ts

@@ -0,0 +1,8 @@
+import { type OutputListLabels } from "./labels.js";
+interface Props {
+    labels?: Partial<OutputListLabels>;
+    values: string[];
+    label?: string;
+}
+export default function OutputList({ labels, values, label }: Props): import("react").JSX.Element;
+export {};

package/dist/components/OutputList.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { outputListLabels } from "./labels.js";
+import { useCopy } from "./useCopy.js";
+const button = "inline-flex h-10 flex-none items-center rounded-[10px] border-2 border-border bg-bg-primary px-3 text-sm font-bold hover:border-contrast";
+// Lista de valores gerados, cada um com "copiar", e um "copiar todos" (um por linha)
+export default function OutputList({ labels, values, label }) {
+    const text = { ...outputListLabels, ...labels };
+    const { copied, copy } = useCopy();
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h2", { className: "m-0 text-base tracking-[0.04em] sm:text-lg", children: label ?? text.result }), values.length > 1 && (_jsx("button", { type: "button", className: button, onClick: () => copy(values.join("\n"), "__all"), "aria-live": "polite", children: copied === "__all" ? text.copied : text.copyAll }))] }), _jsx("ul", { className: "flex flex-col gap-2", "data-test": "tool-output", children: values.map((value, i) => (_jsxs("li", { className: "flex items-center gap-3 rounded-[14px] border-2 border-border bg-bg-primary py-2 pl-4 pr-2", children: [_jsx("code", { className: "min-w-0 flex-1 break-all font-mono text-[15px] sm:text-base", "data-test": "tool-value", children: value }), _jsx("button", { type: "button", className: button, onClick: () => copy(value, `${i}`), "aria-live": "polite", children: copied === `${i}` ? text.copied : text.copy })] }, `${i}-${value}`))) })] }));
+}

package/dist/components/ParamGroup.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+interface Props {
+    title?: string;
+    children: ReactNode;
+    collapsible?: boolean;
+}
+export default function ParamGroup({ title, children, collapsible }: Props): import("react").JSX.Element;
+export {};

package/dist/components/ParamGroup.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Número do bloco: contador CSS zerado no painel de parâmetros (ToolShell), então blocos condicionais não deixam buracos
+const badge = "inline-flex size-5 flex-none items-center justify-center rounded-md bg-text-primary font-mono text-[11px] font-bold not-italic text-bg-primary before:content-[counter(param)]";
+const heading = "flex items-center gap-2 text-xs font-bold uppercase tracking-[0.08em] text-text-secondary";
+const block = "border-soft [counter-increment:param] [&:not(:first-child)]:border-t-[1.5px]";
+const body = "flex flex-col gap-4";
+// Bloco numerado do painel de parâmetros
+export default function ParamGroup({ title, children, collapsible = false }) {
+    if (collapsible && title) {
+        return (_jsxs("details", { open: true, className: `group ${block}`, children: [_jsxs("summary", { className: `${heading} min-h-[52px] cursor-pointer list-none px-5 sm:px-6 [&::-webkit-details-marker]:hidden`, children: [_jsx("span", { "aria-hidden": "true", className: badge }), _jsx("span", { children: title }), _jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", className: "ml-auto transition-transform group-open:rotate-180", children: _jsx("path", { d: "M6 9l6 6 6-6" }) })] }), _jsx("div", { className: `${body} px-5 pb-5 sm:px-6 sm:pb-6`, children: children })] }));
+    }
+    return (_jsxs("div", { role: title ? "group" : undefined, "aria-label": title, className: `${block} ${body} p-5 sm:p-6`, children: [title && (_jsxs("span", { className: heading, children: [_jsx("span", { "aria-hidden": "true", className: badge }), title] })), children] }));
+}

package/dist/components/Presets.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+interface Props<T> {
+    label?: ReactNode;
+    value: T;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    onValue: (value: T) => void;
+}
+export default function Presets<T>({ label, value, options, onValue }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/Presets.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Valores de exemplo em pílulas, logo abaixo do campo que eles preenchem
+export default function Presets({ label, value, options, onValue }) {
+    return (_jsxs("div", { className: "-mt-1 flex flex-wrap items-center gap-1.5", children: [label && _jsx("span", { className: "mr-0.5 text-[13px] font-semibold text-text-secondary", children: label }), options.map((option) => (_jsx("button", { type: "button", "aria-pressed": option.value === value, className: "h-8 min-w-10 rounded-full border-[1.5px] border-soft bg-surface px-2.5 font-mono text-xs font-semibold hover:border-contrast aria-pressed:border-text-primary aria-pressed:bg-text-primary aria-pressed:text-bg-primary", onClick: () => onValue(option.value), children: option.label }, String(option.value))))] }));
+}

package/dist/components/RangeField.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+interface Props {
+    label: ReactNode;
+    value: number;
+    onValue: (value: number) => void;
+    min: number;
+    max: number;
+    step?: number;
+    unit?: string;
+    hint?: ReactNode;
+}
+export default function RangeField({ label, value, onValue, min, max, step, unit, hint }: Props): import("react").JSX.Element;
+export {};

package/dist/components/RangeField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { onTextInput } from "./textInput.js";
+// Slider para ajuste rápido + número para valor exato (o slider sozinho é impreciso, principalmente no celular)
+export default function RangeField({ label, value, onValue, min, max, step = 1, unit, hint }) {
+    const set = (raw) => {
+        const number = Number(raw);
+        if (Number.isFinite(number))
+            onValue(number);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm font-semibold", children: [label, _jsxs("span", { className: "flex items-center gap-3", children: [_jsx("input", { type: "range", min: min, max: max, step: step, value: value, className: "h-11 min-w-0 flex-1 accent-[var(--btn-primary)]", ...onTextInput(set) }), _jsxs("span", { className: "flex h-12 w-28 flex-none items-center gap-1.5 rounded-[10px] border-2 border-border bg-bg-primary px-3 font-mono focus-within:outline-3 focus-within:outline-offset-1 focus-within:outline-contrast", children: [_jsx("input", { type: "number", inputMode: "decimal", min: min, max: max, step: step, value: value, "aria-label": typeof label === "string" ? label : undefined, className: "min-w-0 flex-1 bg-transparent text-base text-text-primary outline-none", ...onTextInput(set) }), unit && _jsx("span", { className: "text-sm font-bold text-text-secondary", children: unit })] })] })] }), hint && _jsx("span", { className: "text-[13px] font-normal leading-snug text-text-secondary", children: hint })] }));
+}

package/dist/components/Segmented.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+interface Props<T extends string | number> {
+    label: ReactNode;
+    value: T;
+    options: {
+        value: T;
+        label: ReactNode;
+    }[];
+    onValue: (value: T) => void;
+}
+export default function Segmented<T extends string | number>({ label, value, options, onValue }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/Segmented.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Grupo de opções exclusivas (radio) com cara de botões
+export default function Segmented({ label, value, options, onValue }) {
+    return (_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsx("legend", { className: "mb-1.5 text-sm font-semibold", children: label }), _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((option) => {
+                    const active = option.value === value;
+                    return (_jsxs("label", { className: `inline-flex min-h-11 cursor-pointer items-center rounded-[10px] border-2 border-border px-3.5 text-sm font-bold has-[:focus-visible]:outline-3 has-[:focus-visible]:outline-contrast ${active ? "bg-text-primary text-bg-primary" : "bg-bg-primary hover:border-contrast"}`, children: [_jsx("input", { type: "radio", className: "sr-only", checked: active, onChange: () => onValue(option.value) }), option.label] }, String(option.value)));
+                }) })] }));
+}

package/dist/components/Stepper.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+interface Props {
+    label: ReactNode;
+    value: number;
+    onValue: (value: number) => void;
+    min?: number;
+    max?: number;
+    hint?: ReactNode;
+}
+export default function Stepper({ label, value, onValue, min, max, hint }: Props): import("react").JSX.Element;
+export {};

package/dist/components/Stepper.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { onTextInput } from "./textInput.js";
+import { useId } from "react";
+// Inteiro pequeno (dependentes, quantidade): − valor +, com o campo ainda editável
+export default function Stepper({ label, value, onValue, min = 0, max = Number.MAX_SAFE_INTEGER, hint }) {
+    const id = useId();
+    const set = (next) => onValue(Math.min(max, Math.max(min, Math.round(next) || min)));
+    const button = "flex w-11 flex-none items-center justify-center bg-inset text-lg font-bold hover:text-contrast disabled:cursor-not-allowed disabled:opacity-40";
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("label", { htmlFor: id, className: "flex min-w-0 flex-col gap-0.5 text-sm font-semibold", children: [label, hint && _jsx("span", { className: "text-[13px] font-normal leading-snug text-text-secondary", children: hint })] }), _jsxs("span", { className: "flex h-11 flex-none overflow-hidden rounded-[10px] border-2 border-border focus-within:outline-3 focus-within:outline-offset-1 focus-within:outline-contrast", children: [_jsx("button", { type: "button", className: button, disabled: value <= min, onClick: () => set(value - 1), "aria-label": typeof label === "string" ? `− ${label}` : "−", "aria-controls": id, children: "\u2212" }), _jsx("input", { id: id, type: "number", inputMode: "numeric", min: min, max: max === Number.MAX_SAFE_INTEGER ? undefined : max, step: 1, value: value, ...onTextInput((raw) => set(Number(raw))), className: "w-14 border-x-[1.5px] border-soft bg-surface text-center font-mono text-base font-bold text-text-primary outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none" }), _jsx("button", { type: "button", className: button, disabled: value >= max, onClick: () => set(value + 1), "aria-label": typeof label === "string" ? `+ ${label}` : "+", "aria-controls": id, children: "+" })] })] }));
+}

package/dist/components/TextField.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+interface Props {
+    label: ReactNode;
+    value: string;
+    onValue: (value: string) => void;
+    placeholder?: string | undefined;
+    multiline?: boolean;
+    rows?: number;
+    type?: "text" | "datetime-local";
+    invalid?: boolean;
+    hint?: ReactNode;
+    className?: string;
+}
+export default function TextField({ label, value, onValue, placeholder, multiline, rows, type, invalid, hint, className }: Props): import("react").JSX.Element;
+export {};

package/dist/components/TextField.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { onTextInput } from "./textInput.js";
+const box = "rounded-[10px] border-2 bg-bg-primary px-3 font-mono text-base text-text-primary outline-none focus:outline-3 focus:outline-offset-1 focus:outline-contrast";
+export default function TextField({ label, value, onValue, placeholder, multiline = false, rows = 4, type = "text", invalid = false, hint, className = "" }) {
+    const border = invalid ? "border-contrast" : "border-border";
+    return (_jsxs("label", { className: `flex flex-col gap-1.5 text-sm font-semibold ${className}`, children: [label, multiline ? (_jsx("textarea", { rows: rows, spellCheck: false, className: `${box} ${border} min-h-24 resize-y py-2.5 leading-relaxed`, value: value, placeholder: placeholder, ...onTextInput(onValue) })) : (_jsx("input", { type: type, step: type === "datetime-local" ? 1 : undefined, spellCheck: false, autoComplete: "off", className: `${box} ${border} h-12`, value: value, placeholder: placeholder, ...onTextInput(onValue) })), hint && _jsx("span", { className: "text-[13px] font-normal text-text-secondary", children: hint })] }));
+}

package/dist/components/ToolShell.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type ToolShellLabels } from "./labels.js";
+interface Props {
+    labels?: Partial<ToolShellLabels>;
+    ready: boolean;
+    params?: ReactNode;
+    paramsTitle?: string;
+    children: ReactNode;
+    how?: ReactNode;
+    sourceUrl?: string;
+    notice?: ReactNode;
+}
+export default function ToolShell({ labels, ready, params, paramsTitle, children, how, sourceUrl, notice }: Props): import("react").JSX.Element;
+export {};

package/dist/components/ToolShell.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toolShellLabels } from "./labels.js";
+import { useCopy } from "./useCopy.js";
+import { panel, panelHeader } from "./panel.js";
+// Layout comum das ferramentas: parâmetros + resultado, "Como funciona?" e aviso de privacidade
+export default function ToolShell({ labels, ready, params, paramsTitle, children, how, sourceUrl, notice }) {
+    const text = { ...toolShellLabels, ...labels };
+    const { copied, copy } = useCopy(2000);
+    return (_jsxs("div", { className: "flex flex-col gap-6", "data-tool": ready ? "ready" : "loading", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 md:justify-end", children: [_jsx("span", { className: "text-[13px] text-text-secondary", children: text.shareHint }), _jsxs("button", { type: "button", className: "inline-flex h-11 items-center gap-2 rounded-[10px] bg-text-primary px-4 text-sm font-bold text-bg-primary hover:bg-bg-tertiary-hover", onClick: () => copy(window.location.href, "link"), "aria-live": "polite", "data-test": "copy-link", children: [_jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1" }) }), copied === "link" ? text.linkCopied : text.copyLink] })] }), notice && _jsx("p", { className: "m-0 rounded-[14px] border-2 border-dashed border-soft bg-surface px-4 py-3 text-sm leading-relaxed text-text-secondary", children: notice }), _jsxs("div", { className: "flex flex-wrap items-start gap-6", children: [params && (_jsxs("form", { className: `${panel} flex min-w-0 flex-[1_1_320px] flex-col md:max-w-[440px]`, onSubmit: (e) => e.preventDefault(), children: [_jsx("span", { className: panelHeader, children: paramsTitle ?? text.params }), _jsx("div", { className: "flex flex-col [counter-reset:param]", children: params })] })), _jsx("section", { className: `${panel} flex min-w-0 flex-[999_1_480px] flex-col gap-5 p-5 sm:p-6`, children: children })] }), (how || sourceUrl) && (_jsxs("details", { id: "how", className: `${panel} scroll-mt-24 px-5`, children: [_jsx("summary", { className: "flex min-h-[52px] cursor-pointer items-center font-bold", children: text.how }), how && _jsx("div", { className: "mb-3 mt-1 max-w-4xl text-sm leading-relaxed text-text-secondary", children: how }), sourceUrl && (_jsx("a", { href: sourceUrl, className: "mb-4 inline-block font-mono text-sm font-bold text-btn-primary hover:text-contrast", children: text.howCode }))] })), _jsxs("p", { className: "m-0 flex items-center gap-2 text-[13px] text-text-secondary", children: [_jsxs("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }), _jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })] }), text.private] })] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,17 @@
+export { default as Badge } from "./Badge.js";
+export { default as Checkbox } from "./Checkbox.js";
+export { default as DataTable, type DataTableRow } from "./DataTable.js";
+export { default as KeyValue } from "./KeyValue.js";
+export { default as NumberField } from "./NumberField.js";
+export { default as OutputList } from "./OutputList.js";
+export { default as ParamGroup } from "./ParamGroup.js";
+export { default as Presets } from "./Presets.js";
+export { default as RangeField } from "./RangeField.js";
+export { default as Segmented } from "./Segmented.js";
+export { default as Stepper } from "./Stepper.js";
+export { default as TextField } from "./TextField.js";
+export { default as ToolShell } from "./ToolShell.js";
+export { panel, panelHeader } from "./panel.js";
+export { useCopy } from "./useCopy.js";
+export { readParam, useHydrated, writeParams } from "./useHydrated.js";
+export * from "./labels.js";

package/dist/components/index.js

@@ -0,0 +1,17 @@
+export { default as Badge } from "./Badge.js";
+export { default as Checkbox } from "./Checkbox.js";
+export { default as DataTable } from "./DataTable.js";
+export { default as KeyValue } from "./KeyValue.js";
+export { default as NumberField } from "./NumberField.js";
+export { default as OutputList } from "./OutputList.js";
+export { default as ParamGroup } from "./ParamGroup.js";
+export { default as Presets } from "./Presets.js";
+export { default as RangeField } from "./RangeField.js";
+export { default as Segmented } from "./Segmented.js";
+export { default as Stepper } from "./Stepper.js";
+export { default as TextField } from "./TextField.js";
+export { default as ToolShell } from "./ToolShell.js";
+export { panel, panelHeader } from "./panel.js";
+export { useCopy } from "./useCopy.js";
+export { readParam, useHydrated, writeParams } from "./useHydrated.js";
+export * from "./labels.js";

package/dist/components/labels.d.ts

@@ -0,0 +1,20 @@
+export interface CopyLabels {
+    copy: string;
+    copied: string;
+}
+export interface OutputListLabels extends CopyLabels {
+    copyAll: string;
+    result: string;
+}
+export interface ToolShellLabels {
+    shareHint: string;
+    copyLink: string;
+    linkCopied: string;
+    params: string;
+    how: string;
+    howCode: string;
+    private: string;
+}
+export declare const copyLabels: CopyLabels;
+export declare const outputListLabels: OutputListLabels;
+export declare const toolShellLabels: ToolShellLabels;

package/dist/components/labels.js

@@ -0,0 +1,11 @@
+export const copyLabels = { copy: "Copiar", copied: "Copiado!" };
+export const outputListLabels = { ...copyLabels, copyAll: "Copiar todos", result: "Resultado" };
+export const toolShellLabels = {
+    shareHint: "O link guarda o que está na tela.",
+    copyLink: "Copiar link com valores",
+    linkCopied: "Link copiado!",
+    params: "Parâmetros",
+    how: "Como é calculado?",
+    howCode: "Ver o código ↗",
+    private: "Processado no seu navegador; nada é enviado.",
+};

package/dist/components/panel.d.ts

@@ -0,0 +1,2 @@
+export declare const panel = "rounded-[20px] border-[1.5px] border-soft bg-surface";
+export declare const panelHeader = "flex items-center gap-3 rounded-t-[20px] border-b-[1.5px] border-soft bg-inset px-5 py-3.5 font-display text-sm font-extrabold uppercase tracking-[0.08em] sm:px-6";

package/dist/components/panel.js

@@ -0,0 +1,4 @@
+// Painéis das ferramentas: superfície (bg-primary) sobre o fundo da página (--ground), com borda suave
+export const panel = "rounded-[20px] border-[1.5px] border-soft bg-surface";
+// Faixa de título no topo de um painel (ex.: "Parâmetros")
+export const panelHeader = "flex items-center gap-3 rounded-t-[20px] border-b-[1.5px] border-soft bg-inset px-5 py-3.5 font-display text-sm font-extrabold uppercase tracking-[0.08em] sm:px-6";

package/dist/components/textInput.d.ts

@@ -0,0 +1,10 @@
+type TextElement = HTMLInputElement | HTMLTextAreaElement;
+export declare function onTextInput<T extends TextElement>(handler: (value: string) => void): {
+    onChange: (event: {
+        currentTarget: T;
+    }) => void;
+    onInput: (event: {
+        currentTarget: T;
+    }) => void;
+};
+export {};

package/dist/components/textInput.js

@@ -0,0 +1,7 @@
+// Dispara a cada tecla em React e em Preact: o React precisa de onChange (input controlado),
+// e o Preact sem compat (ou com o jsx-runtime puro) só dispara onChange no blur, então registra também onInput.
+// Os dois chamam o mesmo handler com o mesmo valor, o que é idempotente.
+export function onTextInput(handler) {
+    const listener = (event) => handler(event.currentTarget.value);
+    return { onChange: listener, onInput: listener };
+}

package/dist/components/useCopy.d.ts

@@ -0,0 +1,4 @@
+export declare function useCopy(timeout?: number): {
+    copied: string | undefined;
+    copy: (value: string, id?: string) => Promise<void>;
+};

package/dist/components/useCopy.js

@@ -0,0 +1,17 @@
+"use client";
+import { useState } from "react";
+// Copia para a área de transferência e mantém o estado "copiado" por alguns segundos
+export function useCopy(timeout = 1500) {
+    const [copied, setCopied] = useState(undefined);
+    const copy = async (value, id = value) => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(id);
+            window.setTimeout(() => setCopied((current) => (current === id ? undefined : current)), timeout);
+        }
+        catch {
+            // sem permissão de clipboard: o usuário ainda pode selecionar o texto
+        }
+    };
+    return { copied, copy };
+}

package/dist/components/useHydrated.d.ts

@@ -0,0 +1,3 @@
+export declare function useHydrated(): boolean;
+export declare function readParam(name: string): string | null;
+export declare function writeParams(values: Record<string, string | undefined>): void;

package/dist/components/useHydrated.js

@@ -0,0 +1,18 @@
+"use client";
+import { useEffect, useState } from "react";
+// false no HTML estático e true após a hidratação: valores aleatórios e leitura da URL só acontecem no cliente
+export function useHydrated() {
+    const [hydrated, setHydrated] = useState(false);
+    useEffect(() => setHydrated(true), []);
+    return hydrated;
+}
+// Lê um parâmetro da URL uma única vez, após hidratar
+export function readParam(name) {
+    return typeof window === "undefined" ? null : new URLSearchParams(window.location.search).get(name);
+}
+// Atualiza (ou remove) parâmetros da URL sem recarregar, para links compartilháveis
+export function writeParams(values) {
+    const url = new URL(window.location.href);
+    Object.entries(values).forEach(([key, value]) => (value ? url.searchParams.set(key, value) : url.searchParams.delete(key)));
+    window.history.replaceState(null, "", url);
+}

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./theme.js";
+export { themeInitScript } from "./inline-script.js";

package/dist/theme/index.js

@@ -0,0 +1,2 @@
+export * from "./theme.js";
+export { themeInitScript } from "./inline-script.js";

package/dist/theme/inline-script.d.ts

@@ -0,0 +1 @@
+export declare const themeInitScript: string;

package/dist/theme/inline-script.js

@@ -0,0 +1,19 @@
+import { AUTO_SCHEDULE, DARK_THEMES, STORAGE_KEY, THEMES } from "./theme.js";
+// Script para o <head>, antes do primeiro paint (sem flash): versão mínima de resolveTheme + applyTheme.
+// Gerado a partir das constantes de theme.ts, então horários e nomes nunca ficam dessincronizados.
+export const themeInitScript = `(() => {
+  const themes = ${JSON.stringify(THEMES)}
+  const schedule = ${JSON.stringify([...AUTO_SCHEDULE].reverse())}
+  let pref = null
+  try { pref = localStorage.getItem(${JSON.stringify(STORAGE_KEY)}) } catch { /* modo privado */ }
+  if (pref === "light") pref = "claro"
+  if (pref === "dark") pref = "escuro"
+  if (!["auto", "sistema", ...themes].includes(pref)) pref = "auto"
+  const h = new Date().getHours()
+  const auto = (schedule.find((slot) => h >= slot.from) || schedule[0]).theme
+  const theme = pref === "auto" ? auto : pref === "sistema" ? (matchMedia("(prefers-color-scheme: dark)").matches ? "escuro" : "claro") : pref
+  const root = document.documentElement
+  root.classList.add("theme-" + theme)
+  if (${JSON.stringify([...DARK_THEMES])}.includes(theme)) root.classList.add("dark")
+  root.dataset.theme = theme
+})()`;

package/dist/theme/theme.d.ts

@@ -0,0 +1,21 @@
+export declare const THEMES: readonly ["claro", "papel", "crepusculo", "escuro", "contraste"];
+export type Theme = (typeof THEMES)[number];
+export declare const THEME_PREFERENCES: readonly ["auto", "sistema", "claro", "papel", "crepusculo", "escuro", "contraste"];
+export type ThemePreference = (typeof THEME_PREFERENCES)[number];
+export declare const DEFAULT_PREFERENCE: ThemePreference;
+export declare const STORAGE_KEY = "theme";
+export declare const DARK_THEMES: ReadonlySet<Theme>;
+export declare const AUTO_SCHEDULE: ReadonlyArray<{
+    from: number;
+    theme: Theme;
+}>;
+export declare const AUTO_RECHECK_MS: number;
+export declare function themeForHour(hour: number): Theme;
+export declare function normalizePreference(raw: string | null | undefined): ThemePreference;
+export declare function resolveTheme(preference: ThemePreference, hour: number, systemDark: boolean): Theme;
+export declare function isDarkTheme(theme: Theme): boolean;
+export declare function readPreference(): ThemePreference;
+export declare function applyTheme(theme: Theme, root?: HTMLElement): void;
+export declare function currentTheme(preference?: ThemePreference): Theme;
+export declare function setPreference(preference: ThemePreference): Theme;
+export declare function watchTheme(): void;

package/dist/theme/theme.js

@@ -0,0 +1,92 @@
+// Temas do design system: a classe .theme-<nome> vai no <html> (valores em src/styles/themes.css).
+// O script anti-flash (inline-script.ts) é gerado a partir destas constantes.
+export const THEMES = ["claro", "papel", "crepusculo", "escuro", "contraste"];
+export const THEME_PREFERENCES = ["auto", "sistema", ...THEMES];
+export const DEFAULT_PREFERENCE = "auto";
+export const STORAGE_KEY = "theme";
+// Temas que recebem também a classe .dark (variante dark: do Tailwind, Shiki e Mermaid escuros)
+export const DARK_THEMES = new Set(["crepusculo", "escuro", "contraste"]);
+// Modo Auto: cada tema vale a partir da hora indicada (horário local). Antes da primeira faixa (madrugada) vale o tema da noite.
+const NIGHT_THEME = "escuro";
+export const AUTO_SCHEDULE = [
+    { from: 6, theme: "claro" },
+    { from: 12, theme: "papel" },
+    { from: 17, theme: "crepusculo" },
+    { from: 20, theme: NIGHT_THEME },
+];
+export const AUTO_RECHECK_MS = 5 * 60 * 1000;
+export function themeForHour(hour) {
+    const current = [...AUTO_SCHEDULE].reverse().find((slot) => hour >= slot.from);
+    return current?.theme ?? NIGHT_THEME;
+}
+// Aceita valores antigos ("light"/"dark") e descarta lixo do localStorage
+export function normalizePreference(raw) {
+    if (raw === "light")
+        return "claro";
+    if (raw === "dark")
+        return "escuro";
+    return THEME_PREFERENCES.includes(raw ?? "") ? raw : DEFAULT_PREFERENCE;
+}
+export function resolveTheme(preference, hour, systemDark) {
+    if (preference === "auto")
+        return themeForHour(hour);
+    if (preference === "sistema")
+        return systemDark ? "escuro" : "claro";
+    return preference;
+}
+export function isDarkTheme(theme) {
+    return DARK_THEMES.has(theme);
+}
+// --- Navegador ---
+export function readPreference() {
+    try {
+        return normalizePreference(localStorage.getItem(STORAGE_KEY));
+    }
+    catch {
+        return DEFAULT_PREFERENCE;
+    }
+}
+function systemPrefersDark() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+export function applyTheme(theme, root = document.documentElement) {
+    THEMES.forEach((name) => root.classList.toggle(`theme-${name}`, name === theme));
+    root.classList.toggle("dark", isDarkTheme(theme));
+    root.dataset.theme = theme;
+}
+export function currentTheme(preference = readPreference()) {
+    return resolveTheme(preference, new Date().getHours(), systemPrefersDark());
+}
+export function setPreference(preference) {
+    try {
+        localStorage.setItem(STORAGE_KEY, preference);
+    }
+    catch {
+        // modo privado: o tema vale só para esta página
+    }
+    const theme = currentTheme(preference);
+    applyTheme(theme);
+    document.dispatchEvent(new CustomEvent("themechange", { detail: { preference, theme } }));
+    return theme;
+}
+// Mantém o tema certo enquanto a página fica aberta (virada de horário, mudança no SO, outra aba)
+export function watchTheme() {
+    const refresh = () => {
+        const preference = readPreference();
+        const theme = currentTheme(preference);
+        applyTheme(theme);
+        document.dispatchEvent(new CustomEvent("themechange", { detail: { preference, theme } }));
+    };
+    setInterval(() => {
+        if (readPreference() === "auto")
+            refresh();
+    }, AUTO_RECHECK_MS);
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+        if (readPreference() === "sistema")
+            refresh();
+    });
+    window.addEventListener("storage", (event) => {
+        if (event.key === STORAGE_KEY)
+            refresh();
+    });
+}

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@thecodecodex/design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "description": "Design system do thecodecodex.com: tokens e temas para Tailwind CSS v4 e componentes React",
+  "license": "MIT",
+  "author": "Douglas Capeletti",
+  "homepage": "https://github.com/thecodecodex/design-system#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thecodecodex/design-system.git"
+  },
+  "bugs": "https://github.com/thecodecodex/design-system/issues",
+  "keywords": ["design-system", "tailwindcss", "react", "preact", "themes"],
+  "type": "module",
+  "sideEffects": ["**/*.css"],
+  "exports": {
+    ".": { "types": "./dist/components/index.d.ts", "default": "./dist/components/index.js" },
+    "./theme": { "types": "./dist/theme/index.d.ts", "default": "./dist/theme/index.js" },
+    "./styles.css": "./src/styles/index.css",
+    "./tokens.css": "./src/styles/tokens.css",
+    "./themes.css": "./src/styles/themes.css",
+    "./base.css": "./src/styles/base.css"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "check": "tsc && eslint && vitest run",
+    "test": "vitest run",
+    "lint": "eslint",
+    "prepublishOnly": "pnpm check && pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@stylistic/eslint-plugin": "^2.13.0",
+    "@types/react": "^19.3.0",
+    "eslint": "^9.39.4",
+    "globals": "^15.15.0",
+    "react": "^19.3.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.59.0",
+    "vitest": "^5.0.5"
+  },
+  "packageManager": "pnpm@12.14.0"
+}

package/src/styles/base.css

@@ -0,0 +1,112 @@
+/* Base: barras de rolagem, foco, títulos, tabelas e seleção (opcional: importe só tokens.css e themes.css para dispensá-la) */
+@layer base {
+
+  /* Barras de rolagem: padrão (Firefox, Chrome/Edge 121+); a da página usa o fundo como trilho,
+     as internas (tabelas, sumário, diagramas) ficam finas e com trilho transparente */
+  * {
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+    scrollbar-width: thin;
+  }
+
+  html {
+    scrollbar-color: var(--scrollbar-thumb) var(--ground);
+    scrollbar-width: auto;
+  }
+
+  /* Safari ainda não tem scrollbar-color: mesmo visual via pseudo-elementos */
+  @supports not (scrollbar-color: auto) {
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    html::-webkit-scrollbar-track {
+      background: var(--ground);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border: 2px solid transparent;
+      border-radius: 999px;
+      background: var(--scrollbar-thumb) padding-box;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--scrollbar-thumb-hover) padding-box;
+    }
+
+    ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+  }
+
+  /* alto contraste: barras na largura normal, mais fáceis de pegar */
+  .theme-contraste,
+  .theme-contraste * {
+    scrollbar-width: auto;
+  }
+
+  body {
+    transition: background-color 0.6s ease, color 0.6s ease;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    body {
+      transition: none;
+    }
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  /* Foco visível por teclado em todo o site */
+  :focus-visible {
+    outline: 3px solid var(--contrast);
+    outline-offset: 2px;
+  }
+
+  h1 {
+    @apply font-display uppercase font-black leading-none mb-6 mt-12;
+    font-size: clamp(2rem, 4vw, 2.5rem);
+  }
+
+  h2 {
+    @apply font-display uppercase font-extrabold leading-none mb-5 mt-10;
+    font-size: clamp(1.6rem, 3vw, 2rem);
+  }
+
+  h3 {
+    @apply font-display font-bold leading-none mb-4 mt-8;
+    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
+  }
+
+  h4 {
+    @apply font-display tracking-wide font-semibold leading-none mb-4 mt-6;
+    font-size: clamp(1.2rem, 2vw, 1.6rem);
+  }
+
+  h5 {
+    @apply font-display tracking-wide font-medium leading-none mb-3 mt-5;
+    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
+  }
+
+  h6 {
+    @apply font-display font-normal leading-none mb-2 mt-4;
+    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
+  }
+
+  table:not(.plain),
+  table:not(.plain) th,
+  table:not(.plain) td {
+    border: 1px solid var(--border);
+  }
+
+  ::selection {
+    color: var(--bg-primary);
+    background: var(--contrast);
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,4 @@
+/* Importe depois de @import "tailwindcss" */
+@import "./tokens.css";
+@import "./themes.css";
+@import "./base.css";

package/src/styles/themes.css

@@ -0,0 +1,184 @@
+/* Temas: a classe .theme-* vai no <html> (ver @thecodecodex/design-system/theme) */
+@layer base {
+  :root,
+  .theme-claro {
+    --text-primary: #12151e;
+    --text-secondary: #4b5563;
+    --text-tertiary: #ffffff;
+    --bg-primary: #ffffff;
+    --bg-secondary: #f3f4f6;
+    --bg-tertiary: #12151e;
+    --bg-tertiary-hover: #1f2937;
+    --btn-primary: #0e7490;
+    --on-accent: #ffffff;
+    --border: #12151e;
+    --contrast: #fd2d78;
+    /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
+    --chart-1: #2a78d6;
+    --chart-2: #eb6834;
+    /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
+    --diff-add: #dcfce7;
+    --diff-add-strong: #86efac;
+    --diff-del: #fee2e2;
+    --diff-del-strong: #fca5a5;
+    --cat-guide: #12151e;
+    --cat-guide-fg: #ffffff;
+    --cat-guide-accent: #22d3ee;
+    --cat-note: #fef9c3;
+    --cat-tool: #cffafe;
+    --cat-project: #ffe4ec;
+    --cat-fg: #12151e;
+    --cat-dev: #e0e7ff;
+    /* fundo da página: contrasta com as superfícies (bg-primary) */
+    --ground: #eef0f3;
+    /* controles nativos (barras de rolagem, campos de data, select) no mesmo modo do tema */
+    color-scheme: light;
+  }
+
+  .theme-papel {
+    --text-primary: #2a2118;
+    --text-secondary: #5c4f3f;
+    --text-tertiary: #f6f1e7;
+    --bg-primary: #f6f1e7;
+    --bg-secondary: #ebe3d2;
+    --bg-tertiary: #2a2118;
+    --bg-tertiary-hover: #3d3226;
+    --btn-primary: #9a3412;
+    --on-accent: #ffffff;
+    --border: #2a2118;
+    --contrast: #e8590c;
+    /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
+    --chart-1: #2a78d6;
+    --chart-2: #eb6834;
+    /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
+    --diff-add: #dcefd4;
+    --diff-add-strong: #9fd18a;
+    --diff-del: #f6d9d0;
+    --diff-del-strong: #eba58f;
+    --cat-guide: #2a2118;
+    --cat-guide-fg: #f6f1e7;
+    --cat-guide-accent: #f2a65a;
+    --cat-note: #f1e2a6;
+    --cat-tool: #d6e5dc;
+    --cat-project: #f0d5ca;
+    --cat-fg: #2a2118;
+    --cat-dev: #e2dcef;
+    /* fundo da página: contrasta com as superfícies (bg-primary) */
+    --ground: #e6dcc6;
+    /* controles nativos (barras de rolagem, campos de data, select) no mesmo modo do tema */
+    color-scheme: light;
+  }
+
+  .theme-crepusculo {
+    --text-primary: #efe6da;
+    --text-secondary: #bcb0a0;
+    --text-tertiary: #262130;
+    --bg-primary: #262130;
+    --bg-secondary: #332c3f;
+    --bg-tertiary: #efe6da;
+    --bg-tertiary-hover: #ddd2c4;
+    --btn-primary: #f2a65a;
+    --on-accent: #262130;
+    --border: #efe6da;
+    --contrast: #ff7aa8;
+    /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
+    --chart-1: #3987e5;
+    --chart-2: #d95926;
+    /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
+    --diff-add: #1f3a2a;
+    --diff-add-strong: #2f6b45;
+    --diff-del: #4a2328;
+    --diff-del-strong: #8a3a44;
+    --cat-guide: #efe6da;
+    --cat-guide-fg: #262130;
+    --cat-guide-accent: #9a3412;
+    --cat-note: #4a4020;
+    --cat-tool: #1e3f45;
+    --cat-project: #4d2639;
+    --cat-fg: #efe6da;
+    --cat-dev: #2e3557;
+    /* fundo da página: contrasta com as superfícies (bg-primary) */
+    --ground: #1c1824;
+    /* controles nativos (barras de rolagem, campos de data, select) no mesmo modo do tema */
+    color-scheme: dark;
+  }
+
+  .theme-escuro {
+    --text-primary: #e5e7eb;
+    --text-secondary: #9ca3af;
+    --text-tertiary: #12151e;
+    --bg-primary: #12151e;
+    --bg-secondary: #1f2937;
+    --bg-tertiary: #e5e7eb;
+    --bg-tertiary-hover: #d1d5db;
+    --btn-primary: #2dfdfd;
+    --on-accent: #12151e;
+    --border: #e5e7eb;
+    --contrast: #3efd2d;
+    /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
+    --chart-1: #3987e5;
+    --chart-2: #d95926;
+    /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
+    --diff-add: #12341f;
+    --diff-add-strong: #1d6b3a;
+    --diff-del: #3f1a1d;
+    --diff-del-strong: #8a2a33;
+    --cat-guide: #e5e7eb;
+    --cat-guide-fg: #12151e;
+    --cat-guide-accent: #0e7490;
+    --cat-note: #3d3914;
+    --cat-tool: #0f3a40;
+    --cat-project: #44182c;
+    --cat-fg: #e5e7eb;
+    --cat-dev: #252a52;
+    /* fundo da página: contrasta com as superfícies (bg-primary) */
+    --ground: #0b0e14;
+    /* controles nativos (barras de rolagem, campos de data, select) no mesmo modo do tema */
+    color-scheme: dark;
+  }
+
+  .theme-contraste {
+    --text-primary: #ffffff;
+    --text-secondary: #e6e6e6;
+    --text-tertiary: #000000;
+    --bg-primary: #000000;
+    --bg-secondary: #161616;
+    --bg-tertiary: #ffffff;
+    --bg-tertiary-hover: #e6e6e6;
+    --btn-primary: #ffe500;
+    --on-accent: #000000;
+    --border: #ffffff;
+    --contrast: #00e5ff;
+    /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
+    --chart-1: #3987e5;
+    --chart-2: #d95926;
+    /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
+    --diff-add: #003d1a;
+    --diff-add-strong: #00692c;
+    --diff-del: #4d0010;
+    --diff-del-strong: #8a001f;
+    --cat-guide: #ffffff;
+    --cat-guide-fg: #000000;
+    --cat-guide-accent: #000000;
+    --cat-note: #ffe500;
+    --cat-tool: #00e5ff;
+    --cat-project: #ff9ec9;
+    --cat-fg: #000000;
+    --cat-dev: #ffffff;
+    /* fundo da página: contrasta com as superfícies (bg-primary) */
+    --ground: #000000;
+    /* controles nativos (barras de rolagem, campos de data, select) no mesmo modo do tema */
+    color-scheme: dark;
+    --scrollbar-thumb: #ffffff;
+    --scrollbar-thumb-hover: var(--contrast);
+    --soft: #8c8c8c;
+  }
+
+  /* borda suave: derivada da borda do tema (o alto contraste define a sua) */
+  :where(:root) {
+    --soft: color-mix(in srgb, var(--border) 18%, transparent);
+    /* barras de rolagem: derivadas do texto secundário (o alto contraste define as suas) */
+    --scrollbar-thumb: color-mix(in srgb, var(--text-secondary) 55%, transparent);
+    --scrollbar-thumb-hover: var(--text-secondary);
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,43 @@
+/* Tokens do design system: variante dark e mapeamento das variáveis do tema para utilidades do Tailwind */
+/* .dark é aplicada junto com qualquer tema escuro (crepúsculo, escuro, alto contraste) — ver src/utils/theme.ts */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-display: var(--font-roboto);
+  --font-body: var(--font-poppins);
+  --font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
+  --radius-xl: 0.75rem;
+
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-bg-primary: var(--bg-primary);
+  --color-bg-secondary: var(--bg-secondary);
+  --color-bg-tertiary: var(--bg-tertiary);
+  --color-bg-tertiary-hover: var(--bg-tertiary-hover);
+  --color-btn-primary: var(--btn-primary);
+  --color-border: var(--border);
+  --color-contrast: var(--contrast);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-diff-add: var(--diff-add);
+  --color-diff-add-strong: var(--diff-add-strong);
+  --color-diff-del: var(--diff-del);
+  --color-diff-del-strong: var(--diff-del-strong);
+  --color-on-accent: var(--on-accent);
+  /* Camadas: fundo da página (ground) < superfície (bg-primary, cards e campos) < recuo (bg-secondary) */
+  --color-ground: var(--ground);
+  --color-surface: var(--bg-primary);
+  --color-inset: var(--bg-secondary);
+  --color-soft: var(--soft);
+
+  /* Cores de categoria (docs/redesign/01-tokens-e-temas.md) */
+  --color-cat-guide: var(--cat-guide);
+  --color-cat-guide-fg: var(--cat-guide-fg);
+  --color-cat-guide-accent: var(--cat-guide-accent);
+  --color-cat-note: var(--cat-note);
+  --color-cat-tool: var(--cat-tool);
+  --color-cat-project: var(--cat-project);
+  --color-cat-dev: var(--cat-dev);
+  --color-cat-fg: var(--cat-fg);
+}