@thecodecodex/design-system 0.2.1 → 0.3.0

package/README.md

@@ -99,6 +99,10 @@ Apps e painéis:
 | `LogView` | console de log: cabeçalho, barra com filtros, copiar/baixar, linhas destacadas por tom, rola até o fim |
 | `DataGrid` | resultado de consulta: filtro, paginação, CSV, JSON, NULL e booleanos destacados |
 | `Markdown` | markdown enxuto renderizado como elementos React (sem HTML cru) |
+| `TopBar` | barra de topo sem menu lateral (marca + ações), alinhada ao container da página |
+| `GameCard` | cartão-link de jogo: ícone em tile `bg-cat-*`, selo, descrição, jogadores, modos e ação |
+| `GameIcon` | ilustrações coloridas de jogos (`gameIconNames`), separadas dos ícones de interface |
+| `Tag` | rótulo informativo `neutral`/`accent` (modo, variante), sem tom de status |
 | `ThemeMenu` | botão "Tema" com Auto, Sistema e os 5 temas (chama `watchTheme` uma vez por aba) |
 
 ```tsx

package/dist/components/GameCard.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { LinkProps } from "./AppShell.js";
+export type GameCardTone = "tool" | "project" | "note" | "dev" | "guide";
+export default function GameCard({ href, title, description, icon, tone, tag, players, modes, action, playersLabel, renderLink }: {
+    href: string;
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    tone?: GameCardTone;
+    tag?: ReactNode;
+    players?: string;
+    modes?: string[];
+    action?: ReactNode;
+    playersLabel?: string;
+    renderLink?: (props: LinkProps) => ReactNode;
+}): ReactNode;

package/dist/components/GameCard.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon } from "./icons.js";
+const TONES = {
+    tool: "bg-cat-tool text-cat-fg",
+    project: "bg-cat-project text-cat-fg",
+    note: "bg-cat-note text-cat-fg",
+    dev: "bg-cat-dev text-cat-fg",
+    guide: "bg-cat-guide text-cat-guide-fg",
+};
+const anchor = (props) => _jsx("a", { ...props });
+// Cartão-link de um item jogável (ou de catálogo): ícone em tile colorido, selo, título, descrição e rodapé de metadados
+export default function GameCard({ href, title, description, icon, tone = "tool", tag, players, modes = [], action = "Jogar", playersLabel = "Jogadores", renderLink = anchor }) {
+    return renderLink({
+        href,
+        className: "group flex flex-col justify-between gap-4 rounded-[20px] border-[1.5px] border-soft bg-surface p-5 text-text-primary transition-[border-color,transform] duration-150 hover:-translate-y-0.5 hover:border-contrast motion-reduce:transition-none motion-reduce:hover:translate-y-0",
+        children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-3.5", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [icon && _jsx("span", { "aria-hidden": "true", className: `flex h-14 w-14 shrink-0 items-center justify-center rounded-[14px] ${TONES[tone]}`, children: icon }), tag] }), _jsxs("div", { children: [_jsx("h3", { className: "m-0 font-display text-lg font-extrabold leading-tight group-hover:underline group-hover:underline-offset-[3px]", children: title }), description && _jsx("p", { className: "m-0 mt-1.5 line-clamp-2 text-[13px] leading-normal text-text-secondary", children: description })] })] }), _jsxs("div", { className: "flex items-center justify-between gap-2 border-t-[1.5px] border-soft pt-3", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2 font-mono text-xs font-semibold text-text-secondary", children: [players && (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsxs("svg", { role: "img", "aria-label": playersLabel, width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "9", cy: "8", r: "3.5" }), _jsx("path", { d: "M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6" })] }), players] })), players && modes.length > 0 && _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), modes.length > 0 && _jsx("span", { className: "truncate", children: modes.join(" · ") })] }), _jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-[13px] font-bold transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none", children: [action, _jsx(Icon, { name: "arrowRight", size: 14 })] })] })] })),
+    });
+}

package/dist/components/GameIcon.d.ts

@@ -0,0 +1,52 @@
+interface Layer {
+    d: string;
+    f: string;
+    s: string;
+    w: number;
+}
+declare const ICONS: {
+    "tic-tac-toe": Layer[];
+    "connect-four": Layer[];
+    snake: Layer[];
+    checkers: Layer[];
+    reversi: Layer[];
+    minesweeper: Layer[];
+    "game-2048": Layer[];
+    solitaire: Layer[];
+    pife: Layer[];
+    cacheta: Layer[];
+    "mexe-mexe": Layer[];
+    canastra: Layer[];
+    chess: Layer[];
+    backgammon: Layer[];
+    ludo: Layer[];
+    mill: Layer[];
+    "peg-solitaire": Layer[];
+    battleship: Layer[];
+    domino: Layer[];
+    yahtzee: Layer[];
+    poker: Layer[];
+    blackjack: Layer[];
+    monopoly: Layer[];
+    truco: Layer[];
+    sueca: Layer[];
+    hearts: Layer[];
+    spades: Layer[];
+    "mau-mau": Layer[];
+    "party-cards": Layer[];
+    detetive: Layer[];
+    war: Layer[];
+    scrabble: Layer[];
+    "imagem-e-acao": Layer[];
+    perfil: Layer[];
+};
+export type GameIconName = keyof typeof ICONS;
+export declare const gameIconNames: GameIconName[];
+export declare function isGameIconName(name: string): name is GameIconName;
+export default function GameIcon({ name, size, title, className }: {
+    name: GameIconName;
+    size?: number;
+    title?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/GameIcon.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function C(x, y, r) {
+    return "M" + (x - r) + " " + y + "a" + r + " " + r + " 0 1 0 " + (2 * r) + " 0a" + r + " " + r + " 0 1 0 " + (-2 * r) + " 0";
+}
+function R(x, y, w, h) {
+    const r = 1.2;
+    return "M" + (x + r) + " " + y + "h" + (w - 2 * r) + "a" + r + " " + r + " 0 0 1 " + r + " " + r + "v" + (h - 2 * r) + "a" + r + " " + r + " 0 0 1 -" + r + " " + r + "h" + (-(w - 2 * r)) + "a" + r + " " + r + " 0 0 1 -" + r + " -" + r + "v" + (-(h - 2 * r)) + "a" + r + " " + r + " 0 0 1 " + r + " -" + r + "z";
+}
+function HE(x, y) {
+    return "M" + x + " " + (y + 3) + "s-3.5-2.2-3.5-4.4a1.75 1.75 0 0 1 3.5-.9 1.75 1.75 0 0 1 3.5.9c0 2.2-3.5 4.4-3.5 4.4z";
+}
+function DI(x, y) {
+    return "M" + x + " " + (y - 3.5) + "l2.8 3.5-2.8 3.5-2.8-3.5z";
+}
+function SP(x, y) {
+    return "M" + x + " " + (y - 3.5) + "s3.5 2.5 3.5 4.8a1.6 1.6 0 0 1-3.5.8 1.6 1.6 0 0 1-3.5-.8c0-2.3 3.5-4.8 3.5-4.8zM" + x + " " + (y + 1) + "l-1.2 2.5h2.4z";
+}
+function CL(x, y) {
+    return C(x, y - 1.6, 1.5) + C(x - 1.6, y + .8, 1.5) + C(x + 1.6, y + .8, 1.5) + "M" + x + " " + (y + .5) + "v2.6";
+}
+const K = "#1d1d24", W = "#ffffff", RD = "#e5484d", YE = "#ffc53d", GR = "#30a46c", BL = "#3e63dd", OR = "#f76b15", PU = "#8e4ec6", BR = "#a0703c", FE = "#2f8a57", PK = "#ff8fb1", GY = "#c9ccd3";
+function L(d, f = "none", s = K, w = 1.3) {
+    return { d, f, s, w };
+}
+const CARDW = L(R(5, 3, 14, 18), W);
+const ICONS = {
+    "tic-tac-toe": [L(R(3, 3, 18, 18), W), L("M9 4v16M15 4v16M4 9h16M4 15h16", "none", K, 1.4), L("M4.9 4.9l2.2 2.2M7.1 4.9L4.9 7.1M16.9 16.9l2.2 2.2M19.1 16.9l-2.2 2.2M10.9 10.9l2.2 2.2M13.1 10.9l-2.2 2.2", "none", RD, 1.8), L(C(18, 6, 1.3) + C(6, 18, 1.3), "none", BL, 1.8)],
+    "connect-four": [L(R(3, 4, 18, 16), BL), L(C(8, 9.5, 1.8), RD), L(C(12, 9.5, 1.8), W), L(C(16, 9.5, 1.8), YE), L(C(8, 14.5, 1.8), YE), L(C(12, 14.5, 1.8), RD), L(C(16, 14.5, 1.8), RD)],
+    "snake": [L("M4 19c0-3 2-4 5-4h5c2 0 3-1 3-2.5S16 10 14 10H9C7 10 6 9 6 7.5S7 5 9 5h7", "none", K, 4.6), L("M4 19c0-3 2-4 5-4h5c2 0 3-1 3-2.5S16 10 14 10H9C7 10 6 9 6 7.5S7 5 9 5h7", "none", GR, 2.6), L(C(17.5, 5, 2.4), GR), L(C(18.2, 4.4, .6), K, "none")],
+    "checkers": [L(C(12, 15, 7), RD), L(C(12, 10, 7), RD), L(C(12, 10, 4.5), "none", K, 1), L("M9 11.5l.8-3 2.2 1.8 2.2-1.8.8 3z", YE)],
+    "reversi": [L(R(3, 3, 18, 18), FE), L(C(8.5, 8.5, 3), W), L(C(15.5, 8.5, 3), K), L(C(8.5, 15.5, 3), K), L(C(15.5, 15.5, 3), W)],
+    "minesweeper": [L(R(3, 3, 18, 18), GY), L("M12 5.5v15M4.5 13h15M6.7 7.7l10.6 10.6M17.3 7.7L6.7 18.3", "none", K, 2), L(C(12, 13, 5), K), L(C(10.3, 11.3, 1.3), W, "none")],
+    "game-2048": [L(R(3, 3, 8, 8), YE), L(R(13, 3, 8, 8), OR), L(R(3, 13, 8, 8), RD), L(R(13, 13, 8, 8), "#ffe8a3")],
+    "solitaire": [L(R(9, 3, 12, 16), BL), L(R(11, 5, 8, 12), "none", W, 1), L(R(3, 6, 12, 16), W), L(SP(9, 13), K, "none")],
+    "pife": [L(R(3, 8, 9, 13), W), L(HE(7.5, 13.5), RD, "none"), L(R(8, 5.5, 9, 13), W), L(CL(12.5, 11), K, "none"), L(R(13, 3, 8, 13), W), L(DI(17, 9), RD, "none")],
+    "cacheta": [CARDW, L("M12 6.5l1.6 3.4 3.7.4-2.8 2.5.8 3.7-3.3-1.9-3.3 1.9.8-3.7-2.8-2.5 3.7-.4z", YE)],
+    "mexe-mexe": [L(R(2, 4, 20, 16), FE), L(R(4.5, 7, 6.5, 10), W), L(HE(7.75, 11.3), RD, "none"), L(R(13, 7, 6.5, 10), W), L(SP(16.25, 12), K, "none")],
+    "canastra": [L(R(3, 9, 9, 12), W), L(R(7, 6, 9, 12), W), L(R(11, 3, 9, 12), W), L(DI(15.5, 9), RD, "none")],
+    "chess": [L("M6.5 21h11l-1-3h-9zM8.5 18l-.7-7h8.4l-.7 7zM7 11V6h2v2h2V6h2v2h2V6h2v5z", W)],
+    "backgammon": [L(R(2, 4, 20, 16), BR), L("M4 5l2 6.5L8 5z", RD, "none"), L("M10 5l2 6.5 2-6.5z", W, "none"), L("M16 5l2 6.5 2-6.5z", RD, "none"), L("M4 19l2-6.5 2 6.5z", W, "none"), L("M10 19l2-6.5 2 6.5z", RD, "none"), L("M16 19l2-6.5 2 6.5z", W, "none")],
+    "ludo": [L(R(3, 3, 9, 9), RD), L(R(12, 3, 9, 9), GR), L(R(3, 12, 9, 9), BL), L(R(12, 12, 9, 9), YE), L(C(12, 12, 3), W)],
+    "mill": [L(R(3, 3, 18, 18), "#e9c98f"), L("M7 7h10v10H7zM12 3v4M12 17v4M3 12h4M17 12h4", "none", K, 1.2), L(C(12, 7, 1.9), W), L(C(17, 17, 1.9), K), L(C(7, 12, 1.9), W), L(C(17, 7, 1.9), K)],
+    "peg-solitaire": [L("M9 3h6v6h6v6h-6v6H9v-6H3V9h6z", BR), L(C(12, 6, 1) + C(12, 18, 1) + C(6, 12, 1) + C(18, 12, 1), K, "none"), L(C(12, 12, 2), YE)],
+    "battleship": [L("M2 19c2 0 2-1 4-1s2 1 4 1 2-1 4-1 2 1 4 1 2-1 4-1", "none", BL, 1.8), L("M7 14v-4h10v4M10 10V6h4v4", GY), L("M2.5 14h19l-3 4h-13z", GY), L("M12 6V3l3.5 1.2L12 5.4", RD)],
+    "domino": [L(R(7, 2, 10, 20), W), L("M7 12h10", "none", K, 1.3), L(C(10, 5, 1) + C(12, 7, 1) + C(14, 9, 1) + C(10, 15, 1) + C(14, 15, 1) + C(10, 19, 1) + C(14, 19, 1), K, "none")],
+    "yahtzee": [L(R(3, 9, 11, 11), W), L(C(6, 12, 1) + C(8.5, 14.5, 1) + C(11, 17, 1), K, "none"), L(R(11, 3, 10, 10), RD), L(C(13.5, 5.5, .9) + C(18.5, 5.5, .9) + C(13.5, 10.5, .9) + C(18.5, 10.5, .9), W, "none")],
+    "poker": [L(C(12, 12, 9), RD), L("M12 3v3.5M12 17.5V21M3 12h3.5M17.5 12H21M5.6 5.6l2.5 2.5M15.9 15.9l2.5 2.5M18.4 5.6l-2.5 2.5M8.1 15.9l-2.5 2.5", "none", W, 2.2), L(C(12, 12, 5), W), L(C(12, 12, 9), "none", K, 1.3)],
+    "blackjack": [L(R(10, 3, 11, 15), W), L(HE(15.5, 9), RD, "none"), L(R(3, 6, 11, 15), W), L(SP(8.5, 13.5), K, "none")],
+    "monopoly": [L("M3 11.5l9-7.5 9 7.5z", RD), L(R(5, 11.5, 14, 9), GR), L(R(10, 14.5, 4, 6), W)],
+    "truco": [CARDW, L(CL(12, 11.5), K, "none"), L("M7.5 6h2M14.5 18h2", "none", RD, 1.6)],
+    "sueca": [CARDW, L(DI(12, 12), RD, "none"), L("M7.5 6h2M14.5 18h2", "none", RD, 1.6)],
+    "hearts": [CARDW, L(HE(12, 11), RD, "none")],
+    "spades": [CARDW, L(SP(12, 12), K, "none")],
+    "mau-mau": [L(R(5, 3, 14, 18), OR), L("M8 18L16 6", "none", W, 5), L("M9.5 11a3 3 0 0 1 4.6-1.2M14.5 13a3 3 0 0 1-4.6 1.2M14.6 8.4l-.4 1.6-1.6-.3M9.4 15.6l.4-1.6 1.6.3", "none", K, 1.3)],
+    "party-cards": [L("M2.5 8c4 0 6.5-2 9.5-2s5.5 2 9.5 2c0 6.5-4 10.5-9.5 10.5S2.5 14.5 2.5 8z", PU), L("M6 10.5c1-1 3-1 4 0-1 1.2-3 1.2-4 0zM14 10.5c1-1 3-1 4 0-1 1.2-3 1.2-4 0z", W), L("M12 14.5c1 0 1.5.5 1.5 1", "none", YE, 1.4)],
+    "detetive": [L("M14.5 14.5l6 6", "none", BR, 3.4), L(C(10, 10, 6.5), "#cfe8ff"), L("M7 8a3.5 3.5 0 0 1 3-2", "none", W, 1.6)],
+    "war": [L("M2 21c3-5 7-7 10-7s7 2 10 7z", GR), L("M12 14V3", "none", K, 1.6), L("M12 3.5h7.5l-2.2 3 2.2 3H12z", RD)],
+    "scrabble": [L(R(4, 4, 16, 16), "#f3d9a4"), L("M8.5 16.5l3.5-9 3.5 9M9.8 13.2h4.4", "none", K, 1.8)],
+    "imagem-e-acao": [L("M4 20l1-4L16 5l3 3L8 19z", YE), L("M4 20l1-4 3 3z", "#f2c7a0"), L("M16 5l3 3 1.5-1.5a1.4 1.4 0 0 0 0-2l-1-1a1.4 1.4 0 0 0-2 0z", PK)],
+    "perfil": [L(R(3, 5, 18, 14), W), L(C(8.5, 10.5, 2.3), BL), L("M5 17.5a3.5 3.5 0 0 1 7 0z", BL), L("M14 10h4M14 13.5h3", "none", K, 1.4), L("M18 16.5h.01", "none", RD, 2)]
+};
+export const gameIconNames = Object.keys(ICONS);
+export function isGameIconName(name) {
+    return name in ICONS;
+}
+export default function GameIcon({ name, size = 40, title, className = "" }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", className: `shrink-0 ${className}`, ...(title ? { role: "img", "aria-label": title } : { "aria-hidden": true }), children: ICONS[name].map((l, i) => (_jsx("path", { d: l.d, fill: l.f, stroke: l.s, strokeWidth: l.w, strokeLinecap: "round", strokeLinejoin: "round" }, i))) }));
+}

package/dist/components/Tag.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export type TagTone = "neutral" | "accent";
+export default function Tag({ tone, children, className }: {
+    tone?: TagTone;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Tag.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TONES = {
+    neutral: "border-soft text-text-secondary",
+    accent: "border-btn-primary bg-btn-primary text-on-accent",
+};
+// Rótulo informativo (modo, variante, novidade): sem tom de status, não substitui StatusTag nem Badge
+export default function Tag({ tone = "neutral", children, className = "" }) {
+    return (_jsx("span", { className: `inline-flex items-center whitespace-nowrap rounded-md border-[1.5px] px-2 py-0.5 font-mono text-[11px] font-bold uppercase tracking-[0.06em] ${TONES[tone]} ${className}`, children: children }));
+}

package/dist/components/TextField.d.ts

@@ -10,6 +10,10 @@ interface Props {
     invalid?: boolean;
     hint?: ReactNode;
     className?: string;
+    inputMode?: "text" | "numeric" | "decimal" | "tel" | "email" | "url" | "search";
+    maxLength?: number;
+    align?: "left" | "center";
+    size?: "md" | "lg";
 }
-export default function TextField({ label, value, onValue, placeholder, multiline, rows, type, invalid, hint, className }: Props): import("react").JSX.Element;
+export default function TextField({ label, value, onValue, placeholder, multiline, rows, type, invalid, hint, className, inputMode, maxLength, align, size }: Props): import("react").JSX.Element;
 export {};

package/dist/components/TextField.js

@@ -2,7 +2,8 @@
 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 = "" }) {
+export default function TextField({ label, value, onValue, placeholder, multiline = false, rows = 4, type = "text", invalid = false, hint, className = "", inputMode, maxLength, align = "left", size = "md" }) {
     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 })] }));
+    const field = `${align === "center" ? "text-center" : ""} ${size === "lg" ? "text-[22px] font-bold tracking-[0.45em] indent-[0.45em]" : ""}`;
+    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} ${field} h-12`, inputMode: inputMode, maxLength: maxLength, "aria-invalid": invalid || undefined, value: value, placeholder: placeholder, ...onTextInput(onValue) })), hint && _jsx("span", { className: "text-[13px] font-normal text-text-secondary", children: hint })] }));
 }

package/dist/components/TopBar.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export default function TopBar({ brand, actions, sticky, maxWidth, className }: {
+    brand: ReactNode;
+    actions?: ReactNode;
+    sticky?: boolean;
+    maxWidth?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/TopBar.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Barra de topo de sites e apps sem menu lateral: marca à esquerda, ações à direita (o topo do AppShell)
+export default function TopBar({ brand, actions, sticky = true, maxWidth = "max-w-[1248px]", className = "" }) {
+    return (_jsx("header", { className: `${sticky ? "sticky top-0 z-40" : ""} w-full border-b-2 border-border bg-surface ${className}`, children: _jsxs("div", { className: `mx-auto flex w-full ${maxWidth} flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-2.5 md:px-6`, children: [_jsx("div", { className: "min-w-0", children: brand }), actions && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions })] }) }));
+}

package/dist/components/index.d.ts

@@ -8,6 +8,8 @@ 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 GameCard, type GameCardTone } from "./GameCard.js";
+export { default as GameIcon, gameIconNames, isGameIconName, type GameIconName } from "./GameIcon.js";
 export { default as Disclosure } from "./Disclosure.js";
 export { default as KeyValue } from "./KeyValue.js";
 export { default as LogView, type LogTone } from "./LogView.js";
@@ -26,6 +28,8 @@ 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 Tag, type TagTone } from "./Tag.js";
+export { default as TopBar } from "./TopBar.js";
 export { default as Stepper } from "./Stepper.js";
 export { default as Tabs } from "./Tabs.js";
 export { default as TextField } from "./TextField.js";

package/dist/components/index.js

@@ -8,6 +8,8 @@ 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 GameCard } from "./GameCard.js";
+export { default as GameIcon, gameIconNames, isGameIconName } from "./GameIcon.js";
 export { default as Disclosure } from "./Disclosure.js";
 export { default as KeyValue } from "./KeyValue.js";
 export { default as LogView } from "./LogView.js";
@@ -26,6 +28,8 @@ 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 Tag } from "./Tag.js";
+export { default as TopBar } from "./TopBar.js";
 export { default as Stepper } from "./Stepper.js";
 export { default as Tabs } from "./Tabs.js";
 export { default as TextField } from "./TextField.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecodecodex/design-system",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Design system do thecodecodex.com: tokens e temas para Tailwind CSS v4 e componentes React",
   "license": "MIT",
   "author": "Douglas Capeletti",