@thecodecodex/design-system 0.1.0 → 0.2.0

package/dist/components/Notice.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export type NoticeTone = "ok" | "warn" | "danger" | "info";
+export default function Notice({ tone, title, children, role, className }: {
+    tone?: NoticeTone;
+    title?: ReactNode;
+    children?: ReactNode;
+    role?: "status" | "alert";
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Notice.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const STYLE = {
+    ok: { box: "bg-ok-soft border-ok", icon: "text-ok" },
+    warn: { box: "bg-warn-soft border-warn", icon: "text-warn" },
+    danger: { box: "bg-danger-soft border-danger", icon: "text-danger" },
+    info: { box: "bg-info-soft border-info", icon: "text-info" },
+};
+// Ícones (stroke, 24×24) por tom: check, triângulo, octógono, "i"
+const ICON = {
+    ok: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "m8.5 12 2.5 2.5 4.5-5" })] }),
+    warn: _jsxs(_Fragment, { children: [_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }), _jsx("path", { d: "M12 9v4M12 17h.01" })] }),
+    danger: _jsxs(_Fragment, { children: [_jsx("path", { d: "M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z" }), _jsx("path", { d: "M12 8v4M12 16h.01" })] }),
+    info: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 16v-4M12 8h.01" })] }),
+};
+// Faixa de aviso/resultado: fundo suave do tom, borda e ícone; o texto fica na cor do tema
+export default function Notice({ tone = "info", title, children, role, className = "" }) {
+    const { box, icon } = STYLE[tone];
+    return (_jsxs("div", { role: role, className: `flex items-start gap-3 rounded-[14px] border-[1.5px] px-4 py-3 text-sm leading-relaxed text-text-primary ${box} ${className}`, children: [_jsx("svg", { "aria-hidden": "true", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: `mt-0.5 shrink-0 ${icon}`, children: ICON[tone] }), _jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [title && _jsx("div", { className: "font-bold", children: title }), children] })] }));
+}

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export default function PageHeader({ title, description, actions, eyebrow }: {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    eyebrow?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/PageHeader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Título da tela (Roboto 900, caixa alta) + descrição + ações à direita
+export default function PageHeader({ title, description, actions, eyebrow }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-x-6 gap-y-4", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-2.5", children: [eyebrow && _jsx("span", { className: "font-mono text-[13px] font-semibold text-btn-primary", children: eyebrow }), _jsx("h1", { className: "m-0 font-display text-[clamp(1.75rem,3.5vw,2.5rem)] font-black uppercase leading-none", children: title }), description && _jsx("p", { className: "m-0 max-w-3xl text-[15px] leading-relaxed text-text-secondary", children: description })] }), actions && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions })] }));
+}

package/dist/components/Popover.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export default function Popover({ trigger, triggerLabel, triggerClass, role, panelLabel, align, width, children }: {
+    trigger: ReactNode;
+    triggerLabel?: string;
+    triggerClass?: string;
+    role?: "dialog" | "menu";
+    panelLabel: string;
+    align?: "left" | "right";
+    width?: string;
+    children: (close: () => void) => ReactNode;
+}): import("react").JSX.Element;
+export declare function MenuItem({ onSelect, danger, children }: {
+    onSelect: () => void;
+    danger?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Popover.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// Botão que abre um painel ancorado (menu, seletor): fecha com Esc, clique fora ou pela função `close`
+export default function Popover({ trigger, triggerLabel, triggerClass, role = "dialog", panelLabel, align = "right", width = "w-[320px]", children }) {
+    const [open, setOpen] = useState(false);
+    const root = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const outside = (e) => {
+            if (root.current && !root.current.contains(e.target))
+                setOpen(false);
+        };
+        const esc = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", outside);
+        document.addEventListener("keydown", esc);
+        return () => {
+            document.removeEventListener("mousedown", outside);
+            document.removeEventListener("keydown", esc);
+        };
+    }, [open]);
+    return (_jsxs("div", { ref: root, className: "relative", children: [_jsx("button", { type: "button", onClick: () => setOpen(!open), "aria-haspopup": role, "aria-expanded": open, "aria-label": triggerLabel, className: triggerClass ?? "inline-flex min-h-11 items-center gap-2 whitespace-nowrap rounded-[10px] border-2 border-border bg-surface px-3.5 text-sm font-bold text-text-primary hover:border-contrast", children: trigger }), open && (_jsx("div", { role: role, "aria-label": panelLabel, className: `absolute z-40 mt-2 ${width} max-w-[calc(100vw-32px)] rounded-[14px] border-2 border-border bg-surface p-2 text-text-primary shadow-[4px_4px_0_var(--border)] ${align === "right" ? "right-0" : "left-0"}`, children: children(() => setOpen(false)) }))] }));
+}
+// Item de menu dentro do Popover (role="menu")
+export function MenuItem({ onSelect, danger = false, children }) {
+    return (_jsx("button", { type: "button", role: "menuitem", onClick: onSelect, className: `flex min-h-10 w-full items-center gap-2 rounded-[8px] px-3 text-left text-sm font-semibold hover:bg-inset ${danger ? "text-danger" : "text-text-primary"}`, children: children }));
+}

package/dist/components/SearchField.d.ts

@@ -0,0 +1,8 @@
+export default function SearchField({ label, value, onValue, placeholder, size, className }: {
+    label: string;
+    value: string;
+    onValue: (value: string) => void;
+    placeholder?: string;
+    size?: "md" | "sm";
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/SearchField.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "./icons.js";
+import { onTextInput } from "./textInput.js";
+// Busca com ícone: o rótulo é lido por leitores de tela e vira o placeholder quando não há outro
+export default function SearchField({ label, value, onValue, placeholder, size = "md", className = "" }) {
+    return (_jsxs("label", { className: `flex items-center gap-2 rounded-[10px] border-2 border-border bg-surface px-3 focus-within:border-contrast ${size === "md" ? "min-h-11" : "min-h-9"} ${className}`, children: [_jsx("span", { className: "sr-only", children: label }), _jsx(Icon, { name: "search", size: size === "md" ? 16 : 14, className: "text-text-secondary" }), _jsx("input", { type: "search", value: value, placeholder: placeholder ?? label, className: `min-w-0 flex-1 bg-transparent outline-none ${size === "md" ? "text-sm" : "text-[13px]"}`, ...onTextInput(onValue) })] }));
+}

package/dist/components/SectionPanel.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+interface Props {
+    title?: ReactNode;
+    count?: number;
+    actions?: ReactNode;
+    bodyClass?: string;
+    className?: string;
+    id?: string;
+    children?: ReactNode;
+}
+export default function Panel({ title, count, actions, bodyClass, className, id, children }: Props): import("react").JSX.Element;
+export declare const panelRows = "flex flex-col [&>*+*]:border-t-[1.5px] [&>*+*]:border-soft";
+export {};

package/dist/components/SectionPanel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { panel, panelHeader } from "./panel.js";
+// Painel com faixa de título opcional: superfície com borda suave sobre o fundo da página
+export default function Panel({ title, count, actions, bodyClass = "p-5 sm:p-6", className = "", id, children }) {
+    const titleId = id ? `${id}-title` : undefined;
+    return (_jsxs("section", { id: id, "aria-labelledby": title ? titleId : undefined, className: `${panel} min-w-0 ${className}`, children: [title && (_jsxs("div", { className: `${panelHeader} flex-wrap justify-between`, children: [_jsxs("h2", { id: titleId, className: "m-0 text-sm font-extrabold", children: [title, count !== undefined && _jsx("span", { className: "ml-2 font-mono font-semibold normal-case tracking-normal text-text-secondary", children: count })] }), actions && _jsx("div", { className: "flex flex-wrap items-center gap-2 font-body font-bold normal-case tracking-normal", children: actions })] })), children !== undefined && _jsx("div", { className: bodyClass, children: children })] }));
+}
+// Linhas de uma lista dentro de um painel: divisória suave entre itens
+export const panelRows = "flex flex-col [&>*+*]:border-t-[1.5px] [&>*+*]:border-soft";

package/dist/components/Segmented.d.ts

@@ -1,12 +1,18 @@
 import type { ReactNode } from "react";
+interface Option<T> {
+    value: T;
+    label: ReactNode;
+    description?: ReactNode;
+    tone?: "danger";
+}
 interface Props<T extends string | number> {
     label: ReactNode;
     value: T;
-    options: {
-        value: T;
-        label: ReactNode;
-    }[];
-    onValue: (value: T) => void;
+    options: Option<T>[];
+    onValue: (value: NoInfer<T>) => void;
+    hideLabel?: boolean;
+    size?: "md" | "sm";
+    disabled?: boolean;
 }
-export default function Segmented<T extends string | number>({ label, value, options, onValue }: Props<T>): import("react").JSX.Element;
+export default function Segmented<T extends string | number>({ label, value, options, onValue, hideLabel, size, disabled }: Props<T>): import("react").JSX.Element;
 export {};

package/dist/components/Segmented.js

@@ -1,9 +1,13 @@
 "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) => {
+export default function Segmented({ label, value, options, onValue, hideLabel = false, size = "md", disabled = false }) {
+    return (_jsxs("fieldset", { className: "flex min-w-0 flex-col gap-1.5", disabled: disabled, children: [_jsx("legend", { className: hideLabel ? "sr-only" : "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)));
+                    const danger = option.tone === "danger";
+                    const colors = active
+                        ? danger ? "border-danger bg-danger text-bg-primary" : "border-border bg-text-primary text-bg-primary"
+                        : danger ? "border-danger bg-bg-primary text-danger hover:bg-danger-soft" : "border-border bg-bg-primary hover:border-contrast";
+                    return (_jsxs("label", { className: `inline-flex cursor-pointer flex-col justify-center rounded-[10px] border-2 font-bold has-[:disabled]:cursor-default has-[:disabled]:opacity-60 has-[:focus-visible]:outline-3 has-[:focus-visible]:outline-contrast ${size === "md" ? "min-h-11 px-3.5 text-sm" : "min-h-9 px-3 text-[13px]"} ${option.description ? "items-start py-2 text-left" : "items-center"} ${colors}`, children: [_jsx("input", { type: "radio", className: "sr-only", checked: active, onChange: () => onValue(option.value) }), option.label, option.description && _jsx("span", { className: `text-xs font-normal ${active ? "opacity-80" : "text-text-secondary"}`, children: option.description })] }, String(option.value)));
                 }) })] }));
 }

package/dist/components/Stat.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { StatusTone } from "./StatusTag.js";
+export default function Stat({ label, value, hint, tone, emphasis, mono, aside, className }: {
+    label: ReactNode;
+    value: ReactNode;
+    hint?: ReactNode;
+    tone?: StatusTone;
+    emphasis?: boolean;
+    mono?: boolean;
+    aside?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Stat.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VALUE = { ok: "text-ok", warn: "text-warn", danger: "text-danger", info: "text-info", neutral: "" };
+const BORDER = { ok: "border-ok", warn: "border-warn", danger: "border-danger", info: "border-info", neutral: "border-border" };
+// Número-resumo: rótulo, valor grande (Roboto 900) e dica. emphasis destaca a borda no tom
+export default function Stat({ label, value, hint, tone = "neutral", emphasis = false, mono = false, aside, className = "" }) {
+    return (_jsxs("div", { className: `flex items-center justify-between gap-3 rounded-[20px] bg-surface p-5 ${emphasis ? `border-2 ${BORDER[tone]}` : "border-[1.5px] border-soft"} ${className}`, children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx("span", { className: "text-[13px] text-text-secondary", children: label }), _jsx("span", { className: `${mono ? "font-mono text-xl font-semibold" : "font-display text-[34px] font-black leading-none"} ${VALUE[tone]}`, children: value }), hint && _jsx("span", { className: "text-xs text-text-secondary", children: hint })] }), aside] }));
+}

package/dist/components/StatusTag.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export type StatusTone = "ok" | "warn" | "danger" | "info" | "neutral";
+export declare function StatusMark({ tone, className }: {
+    tone: StatusTone;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function StatusDot({ on, className }: {
+    on: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+export default function StatusTag({ tone, children, className }: {
+    tone: StatusTone;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/StatusTag.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COLOR = {
+    ok: "text-ok",
+    warn: "text-warn",
+    danger: "text-danger",
+    info: "text-info",
+    neutral: "text-text-secondary",
+};
+// Marcador de forma por tom (círculo, triângulo, quadrado, anel): o status não depende só da cor.
+// Herda a cor do texto (bg-current).
+export function StatusMark({ tone, className = "" }) {
+    if (tone === "warn") {
+        return _jsx("span", { "aria-hidden": "true", className: `inline-block h-0 w-0 border-x-[4px] border-b-[7px] border-x-transparent border-b-current ${className}` });
+    }
+    if (tone === "danger")
+        return _jsx("span", { "aria-hidden": "true", className: `inline-block h-[7px] w-[7px] rounded-[2px] bg-current ${className}` });
+    if (tone === "neutral")
+        return _jsx("span", { "aria-hidden": "true", className: `inline-block h-[7px] w-[7px] rounded-full border-[1.5px] border-current ${className}` });
+    return _jsx("span", { "aria-hidden": "true", className: `inline-block h-[7px] w-[7px] rounded-full bg-current ${className}` });
+}
+// Ponto de ligado/desligado: cheio quando ligado, vazado quando desligado
+export function StatusDot({ on, className = "" }) {
+    return _jsx("span", { "aria-hidden": "true", className: `inline-block h-2.5 w-2.5 shrink-0 rounded-full ${on ? "bg-ok" : "border-2 border-danger"} ${className}` });
+}
+// Selo de status: contorno na cor do tom, caixa alta, marcador de forma
+export default function StatusTag({ tone, children, className = "" }) {
+    return (_jsxs("span", { className: `inline-flex items-center gap-1.5 whitespace-nowrap rounded-md border-[1.5px] border-current px-2 py-0.5 text-xs font-bold uppercase tracking-[0.06em] ${COLOR[tone]} ${className}`, children: [_jsx(StatusMark, { tone: tone }), children] }));
+}

package/dist/components/Tabs.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export default function Tabs<T extends string>({ label, items, value, onValue, variant, className }: {
+    label: string;
+    items: {
+        id: T;
+        label: ReactNode;
+    }[];
+    value: T;
+    onValue: (id: NoInfer<T>) => void;
+    variant?: "buttons" | "underline";
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Tabs.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Lista de abas. "buttons": botões com contorno (visões de uma tela) · "underline": sublinhado de contraste (arquivos, seções)
+export default function Tabs({ label, items, value, onValue, variant = "buttons", className = "" }) {
+    return (_jsx("div", { role: "tablist", "aria-label": label, className: `flex flex-wrap ${variant === "buttons" ? "gap-2" : "gap-1"} ${className}`, children: items.map((item) => {
+            const active = item.id === value;
+            const style = variant === "buttons"
+                ? `min-h-11 rounded-[10px] border-2 border-border px-4 text-sm ${active ? "bg-text-primary text-bg-primary" : "bg-surface text-text-primary hover:border-contrast"}`
+                : `min-h-11 px-2.5 text-[13px] ${active ? "text-text-primary shadow-[inset_0_-3px_0_var(--contrast)]" : "text-text-secondary hover:text-text-primary"}`;
+            return (_jsx("button", { type: "button", role: "tab", "aria-selected": active, onClick: () => onValue(item.id), className: `inline-flex items-center font-bold ${style}`, children: item.label }, item.id));
+        }) }));
+}

package/dist/components/ThemeMenu.d.ts

@@ -0,0 +1,4 @@
+import { type ThemeMenuLabels } from "./labels.js";
+export default function ThemeMenu({ labels }: {
+    labels?: Partial<ThemeMenuLabels>;
+}): import("react").JSX.Element;

package/dist/components/ThemeMenu.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { currentTheme, readPreference, setPreference, watchTheme } from "../theme/theme.js";
+import { Icon } from "./icons.js";
+import { themeMenuLabels } from "./labels.js";
+import Popover from "./Popover.js";
+// Amostra de cada tema: fundo e acento (valores de themes.css)
+const SWATCH = {
+    claro: ["#ffffff", "#0e7490"],
+    papel: ["#f6f1e7", "#9a3412"],
+    crepusculo: ["#262130", "#f2a65a"],
+    escuro: ["#12151e", "#2dfdfd"],
+    contraste: ["#000000", "#ffe500"],
+};
+const OPTIONS = ["auto", "sistema", "claro", "papel", "crepusculo", "escuro", "contraste"];
+// watchTheme registra timers e listeners globais: uma vez por aba, mesmo com o menu remontando a cada página
+let watching = false;
+const ICON_PROPS = { "aria-hidden": true, width: 13, height: 13, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+function Swatch({ preference }) {
+    if (preference === "auto" || preference === "sistema") {
+        return (_jsx("span", { className: "flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-md border-[1.5px] border-border", children: preference === "auto"
+                ? _jsxs("svg", { ...ICON_PROPS, children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 7v5l3 2" })] })
+                : _jsxs("svg", { ...ICON_PROPS, children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "12", rx: "2" }), _jsx("path", { d: "M8 20h8M12 16v4" })] }) }));
+    }
+    const [ground, accent] = SWATCH[preference];
+    return _jsx("span", { "aria-hidden": "true", className: "h-[22px] w-[22px] shrink-0 rounded-md border-[1.5px] border-border", style: { background: `linear-gradient(135deg, ${ground} 55%, ${accent} 55%)` } });
+}
+// Botão "Tema" para cabeçalhos de apps React: Auto (por horário), Sistema e os 5 temas
+export default function ThemeMenu({ labels }) {
+    const text = { ...themeMenuLabels, ...labels, names: { ...themeMenuLabels.names, ...labels?.names } };
+    const [preference, setPref] = useState("auto");
+    useEffect(() => {
+        setPref(readPreference());
+        if (!watching) {
+            watching = true;
+            watchTheme();
+        }
+        const onChange = (e) => setPref(e.detail.preference);
+        document.addEventListener("themechange", onChange);
+        return () => document.removeEventListener("themechange", onChange);
+    }, []);
+    const hint = (p) => p === "auto" ? text.autoHint.replace("{tema}", text.names[currentTheme("auto")]) : p === "sistema" ? text.systemHint : null;
+    return (_jsx(Popover, { role: "menu", panelLabel: text.title, width: "w-[280px]", trigger: _jsxs(_Fragment, { children: [_jsxs("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 3a9 9 0 0 1 0 18z", fill: "currentColor" })] }), _jsx("span", { className: "hidden sm:inline", children: text.names[preference] }), _jsxs("span", { className: "sr-only sm:hidden", children: [text.title, ": ", text.names[preference]] }), _jsx(Icon, { name: "chevronDown", size: 14, className: "text-text-secondary" })] }), children: (close) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-2.5 pb-1.5 pt-1 font-display text-xs font-extrabold uppercase tracking-[0.08em] text-text-secondary", children: text.title }), OPTIONS.map((p) => {
+                    const active = p === preference;
+                    return (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": active, onClick: () => {
+                            setPreference(p);
+                            setPref(p);
+                            close();
+                        }, className: `flex w-full items-center gap-3 rounded-[10px] px-2.5 py-2 text-left text-sm ${active ? "bg-inset" : "hover:bg-inset"}`, children: [_jsx(Swatch, { preference: p }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "font-semibold", children: text.names[p] }), hint(p) && _jsx("span", { className: "text-xs text-text-secondary", children: hint(p) })] }), active && _jsx(Icon, { name: "check" })] }, p));
+                })] })) }));
+}

package/dist/components/Toast.d.ts

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

package/dist/components/Toast.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Aviso flutuante no canto inferior direito; quem usa controla quando some
+export default function Toast({ tone = "ok", children }) {
+    const color = { ok: "border-ok text-ok", danger: "border-danger text-danger", info: "border-info text-info" }[tone];
+    return (_jsx("div", { role: "status", className: `fixed bottom-12 right-5 z-50 flex max-w-[calc(100vw-40px)] items-center gap-2 rounded-[14px] border-2 bg-surface px-4 py-3 text-sm font-semibold shadow-[4px_4px_0_var(--border)] ${color}`, children: children }));
+}

package/dist/components/icons.d.ts

@@ -0,0 +1,19 @@
+declare const PATHS: {
+    search: import("react").JSX.Element;
+    copy: import("react").JSX.Element;
+    check: import("react").JSX.Element;
+    download: import("react").JSX.Element;
+    close: import("react").JSX.Element;
+    chevronLeft: import("react").JSX.Element;
+    chevronRight: import("react").JSX.Element;
+    chevronDown: import("react").JSX.Element;
+    arrowLeft: import("react").JSX.Element;
+    arrowRight: import("react").JSX.Element;
+};
+export type IconName = keyof typeof PATHS;
+export declare function Icon({ name, size, className }: {
+    name: IconName;
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/icons.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Ícones de traço (24×24) usados pelos componentes: o pacote não depende de biblioteca de ícones
+const PATHS = {
+    search: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m20 20-3.5-3.5" })] }),
+    copy: _jsxs(_Fragment, { children: [_jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2" }), _jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })] }),
+    check: _jsx("path", { d: "M20 6 9 17l-5-5" }),
+    download: _jsxs(_Fragment, { children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("path", { d: "m7 10 5 5 5-5" }), _jsx("path", { d: "M12 15V3" })] }),
+    close: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }),
+    chevronLeft: _jsx("path", { d: "m15 18-6-6 6-6" }),
+    chevronRight: _jsx("path", { d: "m9 18 6-6-6-6" }),
+    chevronDown: _jsx("path", { d: "m6 9 6 6 6-6" }),
+    arrowLeft: _jsx("path", { d: "M19 12H5m7 7-7-7 7-7" }),
+    arrowRight: _jsx("path", { d: "M5 12h14m-7-7 7 7-7 7" }),
+};
+export function Icon({ name, size = 16, className = "" }) {
+    return (_jsx("svg", { "aria-hidden": "true", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: `shrink-0 ${className}`, children: PATHS[name] }));
+}

package/dist/components/index.d.ts

@@ -1,15 +1,36 @@
+export { default as AppShell, navLinkClass, type LinkProps, type NavGroup, type NavItem } from "./AppShell.js";
 export { default as Badge } from "./Badge.js";
+export { default as Button, buttonClass, type ButtonSize, type ButtonVariant } from "./Button.js";
 export { default as Checkbox } from "./Checkbox.js";
+export { default as ChipToggles } from "./ChipToggles.js";
+export { default as ConfirmDialog } from "./ConfirmDialog.js";
+export { default as CopyButton } from "./CopyButton.js";
+export { default as DataGrid } from "./DataGrid.js";
 export { default as DataTable, type DataTableRow } from "./DataTable.js";
+export { default as Dialog } from "./Dialog.js";
+export { default as Disclosure } from "./Disclosure.js";
 export { default as KeyValue } from "./KeyValue.js";
+export { default as LogView, type LogTone } from "./LogView.js";
+export { default as Markdown } from "./Markdown.js";
+export { default as Meter } from "./Meter.js";
+export { default as Notice, type NoticeTone } from "./Notice.js";
 export { default as NumberField } from "./NumberField.js";
+export { default as PageHeader } from "./PageHeader.js";
+export { default as Panel, panelRows } from "./SectionPanel.js";
+export { default as Popover, MenuItem } from "./Popover.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 SearchField } from "./SearchField.js";
 export { default as Segmented } from "./Segmented.js";
+export { default as Stat } from "./Stat.js";
+export { default as StatusTag, StatusDot, StatusMark, type StatusTone } from "./StatusTag.js";
 export { default as Stepper } from "./Stepper.js";
+export { default as Tabs } from "./Tabs.js";
 export { default as TextField } from "./TextField.js";
+export { default as ThemeMenu } from "./ThemeMenu.js";
+export { default as Toast } from "./Toast.js";
 export { default as ToolShell } from "./ToolShell.js";
 export { panel, panelHeader } from "./panel.js";
 export { useCopy } from "./useCopy.js";

package/dist/components/index.js

@@ -1,15 +1,36 @@
+export { default as AppShell, navLinkClass } from "./AppShell.js";
 export { default as Badge } from "./Badge.js";
+export { default as Button, buttonClass } from "./Button.js";
 export { default as Checkbox } from "./Checkbox.js";
+export { default as ChipToggles } from "./ChipToggles.js";
+export { default as ConfirmDialog } from "./ConfirmDialog.js";
+export { default as CopyButton } from "./CopyButton.js";
+export { default as DataGrid } from "./DataGrid.js";
 export { default as DataTable } from "./DataTable.js";
+export { default as Dialog } from "./Dialog.js";
+export { default as Disclosure } from "./Disclosure.js";
 export { default as KeyValue } from "./KeyValue.js";
+export { default as LogView } from "./LogView.js";
+export { default as Markdown } from "./Markdown.js";
+export { default as Meter } from "./Meter.js";
+export { default as Notice } from "./Notice.js";
 export { default as NumberField } from "./NumberField.js";
+export { default as PageHeader } from "./PageHeader.js";
+export { default as Panel, panelRows } from "./SectionPanel.js";
+export { default as Popover, MenuItem } from "./Popover.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 SearchField } from "./SearchField.js";
 export { default as Segmented } from "./Segmented.js";
+export { default as Stat } from "./Stat.js";
+export { default as StatusTag, StatusDot, StatusMark } from "./StatusTag.js";
 export { default as Stepper } from "./Stepper.js";
+export { default as Tabs } from "./Tabs.js";
 export { default as TextField } from "./TextField.js";
+export { default as ThemeMenu } from "./ThemeMenu.js";
+export { default as Toast } from "./Toast.js";
 export { default as ToolShell } from "./ToolShell.js";
 export { panel, panelHeader } from "./panel.js";
 export { useCopy } from "./useCopy.js";

package/dist/components/labels.d.ts

@@ -18,3 +18,45 @@ export interface ToolShellLabels {
 export declare const copyLabels: CopyLabels;
 export declare const outputListLabels: OutputListLabels;
 export declare const toolShellLabels: ToolShellLabels;
+export interface DialogLabels {
+    close: string;
+}
+export declare const dialogLabels: DialogLabels;
+export interface ThemeMenuLabels {
+    title: string;
+    names: Record<"auto" | "sistema" | "claro" | "papel" | "crepusculo" | "escuro" | "contraste", string>;
+    autoHint: string;
+    systemHint: string;
+}
+export declare const themeMenuLabels: ThemeMenuLabels;
+export interface AppShellLabels {
+    nav: string;
+    collapse: string;
+    expand: string;
+}
+export declare const appShellLabels: AppShellLabels;
+export interface LogViewLabels extends CopyLabels {
+    download: string;
+}
+export declare const logViewLabels: LogViewLabels;
+export interface DataGridLabels {
+    title: string;
+    filter: string;
+    rows: string;
+    oneRow: string;
+    csv: string;
+    json: string;
+    copied: string;
+    close: string;
+    page: string;
+    previous: string;
+    next: string;
+    noColumns: string;
+    empty: string;
+    truncated: string;
+}
+export declare const dataGridLabels: DataGridLabels;
+export interface ConfirmDialogLabels {
+    cancel: string;
+}
+export declare const confirmDialogLabels: ConfirmDialogLabels;

package/dist/components/labels.js

@@ -9,3 +9,37 @@ export const toolShellLabels = {
     howCode: "Ver o código ↗",
     private: "Processado no seu navegador; nada é enviado.",
 };
+export const dialogLabels = { close: "Fechar" };
+export const themeMenuLabels = {
+    title: "Tema",
+    names: {
+        auto: "Auto",
+        sistema: "Sistema",
+        claro: "Claro",
+        papel: "Papel",
+        crepusculo: "Crepúsculo",
+        escuro: "Escuro",
+        contraste: "Alto contraste",
+    },
+    autoHint: "muda conforme o horário · agora: {tema}",
+    systemHint: "segue o sistema operacional",
+};
+export const appShellLabels = { nav: "Navegação", collapse: "Recolher menu", expand: "Expandir menu" };
+export const logViewLabels = { ...copyLabels, download: "Baixar" };
+export const dataGridLabels = {
+    title: "Resultado",
+    filter: "Filtrar nesta lista",
+    rows: "{n} registros",
+    oneRow: "1 registro",
+    csv: "CSV",
+    json: "JSON",
+    copied: "Copiado!",
+    close: "Fechar resultado",
+    page: "Página {page} de {pages}",
+    previous: "Página anterior",
+    next: "Próxima página",
+    noColumns: "Comando executado. Nenhuma coluna retornada.",
+    empty: "Nenhum registro encontrado.",
+    truncated: "Truncado no limite",
+};
+export const confirmDialogLabels = { cancel: "Cancelar" };

package/package.json

@@ -1,25 +1,40 @@
 {
   "name": "@thecodecodex/design-system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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/system-design#readme",
+  "homepage": "https://github.com/thecodecodex/design-system#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/thecodecodex/system-design.git"
+    "url": "git+https://github.com/thecodecodex/design-system.git"
   },
-  "bugs": "https://github.com/thecodecodex/system-design/issues",
-  "keywords": ["design-system", "tailwindcss", "react", "preact", "themes"],
+  "bugs": "https://github.com/thecodecodex/design-system/issues",
+  "keywords": [
+    "design-system",
+    "tailwindcss",
+    "react",
+    "preact",
+    "themes"
+  ],
   "type": "module",
-  "sideEffects": ["**/*.css"],
+  "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" },
+    ".": {
+      "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"
+    "./base.css": "./src/styles/base.css",
+    "./content.css": "./src/styles/content.css"
   },
   "files": [
     "dist",