@dtcode/ui 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,44 @@
-# Temporary Holding Version
+# @dtcode/ui
 
-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.
+Componentes React e tokens do Design System dtcode, para projetos com React 19 e Tailwind CSS v4.
+Documentação completa, com exemplos e props de cada componente, no site do Design System.
+
+## Instalação
+
+```bash
+npm install @dtcode/ui
+```
+
+O pacote é público no npm, sem token. Ele também é publicado no GitHub Packages da organização com o nome
+`@appsdtcode/ui` (lá o escopo precisa ser o dono do repositório), para quem usa o registro do GitHub.
+
+## Estilos
+
+No CSS global, depois do Tailwind:
+
+```css
+@import "tailwindcss";
+@import "@dtcode/ui/styles.css";
+```
+
+O `styles.css` traz os tokens (tema claro e escuro, com `data-theme="dark"` no `<html>`), a base visual e
+os ícones, e já avisa o Tailwind para gerar as classes usadas pelos componentes.
+
+Carregue as fontes no `<head>`: Lexend, Public Sans, JetBrains Mono e Material Symbols Rounded.
+
+## Uso
+
+```tsx
+import { Button, Field, Input } from "@dtcode/ui";
+
+<Field label="E-mail" htmlFor="email">
+  <Input id="email" type="email" icon="mail" />
+</Field>
+<Button>Salvar</Button>
+```
+
+## Desenvolvimento
+
+O código fica em `packages/ui/src` no repositório do Design System; o site de documentação usa esse
+código direto. `npm run build:ui` na raiz gera o `dist/`. Para publicar, suba o `version` em
+`packages/ui/package.json` e faça o merge na `main`: o workflow `publish-ui` publica a versão nova no npm e no GitHub Packages.

package/dist/alert.d.ts

@@ -0,0 +1,8 @@
+export type AlertTone = "info" | "success" | "warning" | "danger";
+export declare function Alert({ tone, title, icon, className, children, }: {
+    tone?: AlertTone;
+    title?: React.ReactNode;
+    icon?: string;
+    className?: string;
+    children?: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/alert.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import { Icon } from "./icon.js";
+const tones = {
+    info: { cls: "bg-info-bg border-info-border text-info-fg", icon: "info" },
+    success: { cls: "bg-success-bg border-success-border text-success-fg", icon: "check_circle" },
+    warning: { cls: "bg-warning-bg border-warning-border text-warning-fg", icon: "warning" },
+    danger: { cls: "bg-danger-bg border-danger-border text-danger-fg", icon: "error" },
+};
+export function Alert({ tone = "info", title, icon, className, children, }) {
+    const t = tones[tone];
+    return (_jsxs("div", { role: tone === "danger" || tone === "warning" ? "alert" : "status", className: cn("flex items-start gap-3 rounded-md border px-4 py-3.5 text-sm", t.cls, className), children: [_jsx(Icon, { name: icon ?? t.icon, size: 20, className: "mt-px" }), _jsxs("div", { className: "grid gap-0.5", children: [title && _jsx("strong", { className: "font-display font-semibold", children: title }), children && _jsx("div", { children: children })] })] }));
+}

package/dist/badge.d.ts

@@ -0,0 +1,7 @@
+export type BadgeTone = "neutral" | "brand" | "accent" | "success" | "warning" | "danger" | "info";
+export declare function Badge({ tone, icon, className, children, }: {
+    tone?: BadgeTone;
+    icon?: string;
+    className?: string;
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/badge.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import { Icon } from "./icon.js";
+const tones = {
+    neutral: "bg-surface-sunken text-fg-2",
+    brand: "bg-tint text-tint-fg",
+    accent: "bg-magenta-100 text-magenta-800 dark:bg-magenta-500/15 dark:text-magenta-200",
+    success: "bg-success-bg text-success-fg",
+    warning: "bg-warning-bg text-warning-fg",
+    danger: "bg-danger-bg text-danger-fg",
+    info: "bg-info-bg text-info-fg",
+};
+export function Badge({ tone = "neutral", icon, className, children, }) {
+    return (_jsxs("span", { className: cn("inline-flex h-[22px] items-center gap-1 rounded-pill px-2.5 font-display text-[11px] font-semibold tracking-[.06em] uppercase", tones[tone], className), children: [icon && _jsx(Icon, { name: icon, size: 13 }), children] }));
+}

package/dist/button.d.ts

@@ -0,0 +1,22 @@
+export type ButtonVariant = "primary" | "secondary" | "accent" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+export declare function buttonClasses({ variant, size, block, loading, className, }?: {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    block?: boolean;
+    loading?: boolean;
+    className?: string;
+}): string;
+export type ButtonProps = React.ComponentProps<"button"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Material Symbol exibido antes do texto. */
+    icon?: string;
+    /** Material Symbol exibido depois do texto. */
+    iconRight?: string;
+    loading?: boolean;
+    /** Texto anunciado por leitores de tela durante o carregamento. */
+    loadingLabel?: string;
+    block?: boolean;
+};
+export declare function Button({ variant, size, icon, iconRight, loading, loadingLabel, block, className, children, disabled, type, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import { Icon } from "./icon.js";
+import { Loader } from "./loader.js";
+const base = "group/btn inline-flex items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold " +
+    "transition-[translate,scale,box-shadow,background-color,color,opacity] duration-150 ease-brand " +
+    "hover:-translate-y-px active:translate-y-0 active:scale-[.97] " +
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+const disabledCls = "disabled:pointer-events-none disabled:opacity-45 disabled:shadow-none";
+// Carregando (como no login): mantém a cor do botão, sem esmaecer como desabilitado, e só bloqueia o clique.
+const loadingCls = "pointer-events-none cursor-progress";
+const variants = {
+    primary: "bg-action text-on-action shadow-2 hover:bg-action-hover hover:shadow-3",
+    secondary: "bg-surface text-fg border-border-strong shadow-1 hover:bg-surface-subtle",
+    // Gradiente da marca com texto roxo: branco sobre magenta não atinge 4,5:1.
+    accent: "bg-[image:var(--grad-marca)] text-roxo-900 shadow-[0_8px_20px_-6px_rgb(239_47_177/.55)] hover:shadow-[0_12px_24px_-6px_rgb(239_47_177/.6)]",
+    ghost: "bg-transparent text-fg hover:bg-surface-subtle",
+    danger: "bg-vermelho-600 text-white shadow-2 hover:bg-vermelho-800",
+};
+const sizes = {
+    sm: "h-8 px-3 text-[13px] rounded-md",
+    md: "h-10 px-[18px] text-sm rounded-md",
+    lg: "h-13 px-6 text-[17px] font-bold rounded-lg",
+};
+const iconSize = { sm: 16, md: 18, lg: 20 };
+export function buttonClasses({ variant = "primary", size = "md", block, loading, className, } = {}) {
+    return cn(base, variants[variant], sizes[size], loading ? loadingCls : disabledCls, block && "w-full", className);
+}
+export function Button({ variant, size = "md", icon, iconRight, loading, loadingLabel, block, className, children, disabled, type = "button", ...props }) {
+    return (_jsxs("button", { type: type, className: buttonClasses({ variant, size, block, loading, className }), disabled: disabled || loading, "aria-busy": loading || undefined, ...props, children: [loading ? (
+            // No accent o fundo já é o gradiente da marca: os losangos ficam na cor do texto para aparecer.
+            _jsx(Loader, { size: "sm", label: loadingLabel, className: variant === "accent" ? "[&_i]:bg-current [&_i]:bg-none" : undefined })) : (icon && _jsx(Icon, { name: icon, size: iconSize[size] })), children, iconRight && !loading && (_jsx(Icon, { name: iconRight, size: iconSize[size], className: "transition-[translate] duration-200 ease-brand group-hover/btn:translate-x-0.5" }))] }));
+}

package/dist/card.d.ts

@@ -0,0 +1,3 @@
+export declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+/** Classes de cartão clicável (para usar em <Link>). */
+export declare const interactiveCard: string;

package/dist/card.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+export function Card({ className, ...props }) {
+    return _jsx("div", { className: cn("rounded-lg border border-border bg-surface shadow-1", className), ...props });
+}
+/** Classes de cartão clicável (para usar em <Link>). */
+export const interactiveCard = "group rounded-lg border border-border bg-surface shadow-1 transition-[translate,box-shadow,border-color] duration-200 ease-brand " +
+    "hover:-translate-y-0.5 hover:border-border-strong hover:shadow-3 active:translate-y-0";

package/dist/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cn.js

@@ -0,0 +1,4 @@
+import clsx from "clsx";
+export function cn(...inputs) {
+    return clsx(inputs);
+}

package/dist/icon.d.ts

@@ -0,0 +1,10 @@
+type IconProps = {
+    /** Nome do Material Symbol (ex.: "home", "search"). Sempre preenchido, conforme o MIV. */
+    name: string;
+    size?: number;
+    className?: string;
+    /** Rótulo acessível. Sem ele o ícone é decorativo. */
+    label?: string;
+};
+export declare function Icon({ name, size, className, label }: IconProps): import("react").JSX.Element;
+export {};

package/dist/icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+export function Icon({ name, size = 20, className, label }) {
+    return (_jsx("span", { className: cn("icon", className), style: { fontSize: size }, "aria-hidden": label ? undefined : true, role: label ? "img" : undefined, "aria-label": label, children: name }));
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./alert.js";
+export * from "./badge.js";
+export * from "./button.js";
+export * from "./card.js";
+export * from "./icon.js";
+export * from "./input.js";
+export * from "./loader.js";
+export * from "./segmented.js";
+export * from "./switch.js";
+export * from "./tabs.js";
+export * from "./cn.js";

package/dist/index.js

@@ -0,0 +1,11 @@
+export * from "./alert.js";
+export * from "./badge.js";
+export * from "./button.js";
+export * from "./card.js";
+export * from "./icon.js";
+export * from "./input.js";
+export * from "./loader.js";
+export * from "./segmented.js";
+export * from "./switch.js";
+export * from "./tabs.js";
+export * from "./cn.js";

package/dist/input.d.ts

@@ -0,0 +1,16 @@
+export type InputProps = React.ComponentProps<"input"> & {
+    icon?: string;
+    invalid?: boolean;
+};
+export declare function Input({ icon, invalid, className, ...props }: InputProps): import("react").JSX.Element;
+type FieldProps = {
+    label: React.ReactNode;
+    htmlFor: string;
+    hint?: React.ReactNode;
+    error?: React.ReactNode;
+    action?: React.ReactNode;
+    children: React.ReactNode;
+};
+/** Agrupa rótulo, controle, dica e erro com a associação de acessibilidade correta. */
+export declare function Field({ label, htmlFor, hint, error, action, children }: FieldProps): import("react").JSX.Element;
+export {};

package/dist/input.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import { Icon } from "./icon.js";
+export function Input({ icon, invalid, className, ...props }) {
+    const input = (_jsx("input", { "aria-invalid": invalid || undefined, className: cn("peer h-10 w-full rounded-md border bg-surface px-3 text-sm text-fg placeholder:text-muted", "border-border-strong transition-[border-color,box-shadow,background-color] duration-200 hover:border-neutro-400 dark:hover:border-white/30", "focus:border-magenta-500 focus:shadow-[0_0_0_3px_rgb(239_47_177/.18)] focus:outline-none", "disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-70", invalid && "border-danger focus:border-danger focus:shadow-[0_0_0_3px_rgb(209_42_31/.18)]", icon && "pl-9", className), ...props }));
+    if (!icon)
+        return input;
+    return (_jsxs("div", { className: "relative", children: [input, _jsx(Icon, { name: icon, size: 18, className: "pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-muted transition-colors peer-focus:text-accent" })] }));
+}
+/** Agrupa rótulo, controle, dica e erro com a associação de acessibilidade correta. */
+export function Field({ label, htmlFor, hint, error, action, children }) {
+    return (_jsxs("div", { className: "group/field grid gap-1.5", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("label", { htmlFor: htmlFor, className: "text-[13px] font-semibold text-fg transition-colors group-focus-within/field:text-accent", children: label }), action] }), children, error ? (_jsxs("p", { id: `${htmlFor}-error`, className: "flex animate-fade-in items-center gap-1 text-xs font-medium text-danger", children: [_jsx(Icon, { name: "error", size: 14 }), error] })) : (hint && (_jsx("p", { id: `${htmlFor}-hint`, className: "text-xs text-muted", children: hint })))] }));
+}

package/dist/loader.d.ts

@@ -0,0 +1,6 @@
+/** Os três losangos do símbolo dtcode, pulsando em sequência. */
+export declare function Loader({ size, className, label }: {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    label?: string;
+}): import("react").JSX.Element;

package/dist/loader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+/** Os três losangos do símbolo dtcode, pulsando em sequência. */
+export function Loader({ size = "md", className, label = "Carregando" }) {
+    const s = { sm: 5, md: 9, lg: 14 }[size];
+    const gap = { sm: 2, md: 3, lg: 4 }[size];
+    return (_jsxs("span", { role: "status", "aria-label": label, className: cn("inline-grid rotate-45", className), style: { gridTemplateColumns: `repeat(2, ${s}px)`, gridTemplateRows: `repeat(2, ${s}px)`, gap }, children: [[
+                { area: "1 / 1", delay: "0s" },
+                { area: "1 / 2", delay: ".15s" },
+                { area: "2 / 2", delay: ".3s" },
+            ].map((d) => (_jsx("i", { className: "animate-[ds-pulse_1.2s_cubic-bezier(.2,.7,.2,1)_infinite] rounded-[28%] bg-[image:var(--grad-marca)]", style: { gridArea: d.area, animationDelay: d.delay } }, d.area))), _jsx("style", { children: `@keyframes ds-pulse{0%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}` })] }));
+}

package/dist/segmented.d.ts

@@ -0,0 +1,12 @@
+type Option<T extends string> = {
+    value: T;
+    label: string;
+};
+/** Grupo de opções exclusivas (radiogroup) — usado nos controles do playground. */
+export declare function Segmented<T extends string>({ value, onChange, options, label, }: {
+    value: T;
+    onChange: (v: T) => void;
+    options: Option<T>[];
+    label: string;
+}): import("react").JSX.Element;
+export {};

package/dist/segmented.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+/** Grupo de opções exclusivas (radiogroup) — usado nos controles do playground. */
+export function Segmented({ value, onChange, options, label, }) {
+    return (_jsx("div", { role: "radiogroup", "aria-label": label, className: "inline-flex flex-wrap gap-0.5 rounded-md border border-border bg-surface-sunken p-[3px]", children: options.map((o) => {
+            const on = o.value === value;
+            return (_jsx("button", { type: "button", role: "radio", "aria-checked": on, onClick: () => onChange(o.value), className: cn("rounded-[6px] px-2.5 py-1.5 text-xs font-semibold transition-[background-color,color,box-shadow,scale] duration-200 active:scale-95", on ? "bg-surface text-fg shadow-1" : "text-fg-2 hover:text-fg"), children: o.label }, o.value));
+        }) }));
+}

package/dist/styles.css

@@ -0,0 +1,355 @@
+/* @dtcode/ui: tokens (claro e escuro), base, movimento e ícones. Importe depois do Tailwind. */
+@source "./";
+
+/* Arquivo gerado por scripts/build-tokens.mjs. Não edite à mão: altere src/tokens/tokens.json. */
+
+:root {
+  --roxo-50: #F4F0FB;
+  --roxo-100: #E9E1F7;
+  --roxo-200: #D2C2EF;
+  --roxo-300: #B096E2;
+  --roxo-400: #8A63D0;
+  --roxo-500: #6A3DBA;
+  --roxo-600: #5126A0;
+  --roxo-700: #3D1883;
+  --roxo-800: #2C0D69;
+  --roxo-900: #1F0052;
+  --roxo-950: #12002F;
+  --magenta-50: #FEF0F8;
+  --magenta-100: #FDDCF0;
+  --magenta-200: #FAB8E1;
+  --magenta-300: #F68AD0;
+  --magenta-400: #F25CBF;
+  --magenta-500: #EF2FB1;
+  --magenta-600: #CF1F96;
+  --magenta-700: #A8167A;
+  --magenta-800: #82115F;
+  --magenta-900: #5E0C45;
+  --coral-400: #FF9199;
+  --neutro-0: #FFFFFF;
+  --neutro-25: #FAFAFC;
+  --neutro-50: #F5F4F8;
+  --neutro-100: #EDECF2;
+  --neutro-200: #DEDDE5;
+  --neutro-300: #C4C2CF;
+  --neutro-400: #9C99AB;
+  --neutro-500: #75728A;
+  --neutro-600: #57546B;
+  --neutro-700: #3F3C52;
+  --neutro-800: #2A2738;
+  --neutro-900: #181624;
+  --verde-50: #E7F6EF;
+  --verde-200: #BFE6D3;
+  --verde-600: #12805C;
+  --verde-800: #0C5A40;
+  --ambar-50: #FFF4E0;
+  --ambar-200: #F6D9A6;
+  --ambar-600: #A35A00;
+  --ambar-800: #6E3D00;
+  --vermelho-50: #FDECEA;
+  --vermelho-200: #F7C4BF;
+  --vermelho-600: #D12A1F;
+  --vermelho-800: #8F1A12;
+  --azul-50: #EAF1FE;
+  --azul-200: #C9DAFB;
+  --azul-600: #2D63D8;
+  --azul-800: #1D3F8A;
+  --grad-marca: linear-gradient(90deg, var(--coral-400) 0%, var(--magenta-500) 100%);
+  --grad-hero: radial-gradient(120% 90% at 85% 10%, rgb(239 47 177 / .35) 0%, rgb(239 47 177 / 0) 55%), radial-gradient(90% 80% at 0% 100%, rgb(106 61 186 / .55) 0%, rgb(106 61 186 / 0) 60%), linear-gradient(160deg, var(--roxo-950) 0%, var(--roxo-900) 55%, var(--roxo-800) 100%);
+  --r-sm: 6px;
+  --r-md: 8px;
+  --r-lg: 16px;
+  --r-xl: 24px;
+  --r-pill: 999px;
+}
+
+:root {
+  color-scheme: light;
+  --bg: var(--neutro-25);
+  --surface: var(--neutro-0);
+  --surface-subtle: var(--neutro-50);
+  --surface-sunken: var(--neutro-100);
+  --border: var(--neutro-200);
+  --border-strong: var(--neutro-300);
+  --fg: var(--roxo-900);
+  --fg-2: var(--neutro-600);
+  --muted: var(--neutro-500);
+  --link: var(--magenta-700);
+  --action: var(--roxo-900);
+  --action-hover: var(--roxo-800);
+  --on-action: var(--neutro-0);
+  --accent: var(--magenta-600);
+  --sidebar: var(--roxo-900);
+  --sidebar-fg: rgb(255 255 255 / .72);
+  --sidebar-active: rgb(255 255 255 / .08);
+  --canvas-dot: rgb(31 0 82 / .12);
+  --focus: var(--magenta-500);
+  --tint: var(--roxo-50);
+  --tint-fg: var(--roxo-700);
+  --success-bg: var(--verde-50);
+  --success-border: var(--verde-200);
+  --success-fg: var(--verde-800);
+  --success: var(--verde-600);
+  --warning-bg: var(--ambar-50);
+  --warning-border: var(--ambar-200);
+  --warning-fg: var(--ambar-800);
+  --warning: var(--ambar-600);
+  --danger-bg: var(--vermelho-50);
+  --danger-border: var(--vermelho-200);
+  --danger-fg: var(--vermelho-800);
+  --danger: var(--vermelho-600);
+  --info-bg: var(--azul-50);
+  --info-border: var(--azul-200);
+  --info-fg: var(--azul-800);
+  --info: var(--azul-600);
+  --elev-1: 0 1px 2px rgb(31 0 82 / .06), 0 1px 3px rgb(31 0 82 / .08);
+  --elev-2: 0 4px 6px rgb(31 0 82 / .07), 0 1px 3px rgb(31 0 82 / .08);
+  --elev-3: 0 15px 35px rgb(31 0 82 / .10), 0 5px 15px rgb(0 0 0 / .06);
+  --elev-4: 0 30px 60px -12px rgb(31 0 82 / .25), 0 18px 36px -18px rgb(0 0 0 / .2);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #0B0019;
+  --surface: #140230;
+  --surface-subtle: #1A0739;
+  --surface-sunken: #0F0024;
+  --border: rgb(255 255 255 / .10);
+  --border-strong: rgb(255 255 255 / .18);
+  --fg: #F6F2FF;
+  --fg-2: #C9C0E0;
+  --muted: #A79DC2;
+  --link: var(--magenta-300);
+  --action: var(--roxo-50);
+  --action-hover: var(--neutro-0);
+  --on-action: var(--roxo-900);
+  --accent: var(--magenta-400);
+  --sidebar: #0F0024;
+  --sidebar-fg: rgb(255 255 255 / .72);
+  --sidebar-active: rgb(255 255 255 / .07);
+  --canvas-dot: rgb(255 255 255 / .08);
+  --focus: var(--magenta-400);
+  --tint: rgb(176 150 226 / .14);
+  --tint-fg: var(--roxo-200);
+  --success-bg: rgb(18 128 92 / .14);
+  --success-border: rgb(18 128 92 / .4);
+  --success-fg: #A6EBCB;
+  --success: #5FD3A2;
+  --warning-bg: rgb(163 90 0 / .16);
+  --warning-border: rgb(163 90 0 / .45);
+  --warning-fg: #FFD7A0;
+  --warning: #FFB547;
+  --danger-bg: rgb(209 42 31 / .16);
+  --danger-border: rgb(209 42 31 / .45);
+  --danger-fg: #FFB8B2;
+  --danger: #FF7A70;
+  --info-bg: rgb(45 99 216 / .14);
+  --info-border: rgb(45 99 216 / .35);
+  --info-fg: #B9CEFA;
+  --info: #7FA6F5;
+  --elev-1: none;
+  --elev-2: none;
+  --elev-3: 0 0 0 1px rgb(255 255 255 / .06);
+  --elev-4: 0 30px 60px -12px rgb(0 0 0 / .6);
+}
+
+@theme inline {
+  --color-roxo-50: var(--roxo-50);
+  --color-roxo-100: var(--roxo-100);
+  --color-roxo-200: var(--roxo-200);
+  --color-roxo-300: var(--roxo-300);
+  --color-roxo-400: var(--roxo-400);
+  --color-roxo-500: var(--roxo-500);
+  --color-roxo-600: var(--roxo-600);
+  --color-roxo-700: var(--roxo-700);
+  --color-roxo-800: var(--roxo-800);
+  --color-roxo-900: var(--roxo-900);
+  --color-roxo-950: var(--roxo-950);
+  --color-magenta-50: var(--magenta-50);
+  --color-magenta-100: var(--magenta-100);
+  --color-magenta-200: var(--magenta-200);
+  --color-magenta-300: var(--magenta-300);
+  --color-magenta-400: var(--magenta-400);
+  --color-magenta-500: var(--magenta-500);
+  --color-magenta-600: var(--magenta-600);
+  --color-magenta-700: var(--magenta-700);
+  --color-magenta-800: var(--magenta-800);
+  --color-magenta-900: var(--magenta-900);
+  --color-coral-400: var(--coral-400);
+  --color-neutro-0: var(--neutro-0);
+  --color-neutro-25: var(--neutro-25);
+  --color-neutro-50: var(--neutro-50);
+  --color-neutro-100: var(--neutro-100);
+  --color-neutro-200: var(--neutro-200);
+  --color-neutro-300: var(--neutro-300);
+  --color-neutro-400: var(--neutro-400);
+  --color-neutro-500: var(--neutro-500);
+  --color-neutro-600: var(--neutro-600);
+  --color-neutro-700: var(--neutro-700);
+  --color-neutro-800: var(--neutro-800);
+  --color-neutro-900: var(--neutro-900);
+  --color-verde-50: var(--verde-50);
+  --color-verde-200: var(--verde-200);
+  --color-verde-600: var(--verde-600);
+  --color-verde-800: var(--verde-800);
+  --color-ambar-50: var(--ambar-50);
+  --color-ambar-200: var(--ambar-200);
+  --color-ambar-600: var(--ambar-600);
+  --color-ambar-800: var(--ambar-800);
+  --color-vermelho-50: var(--vermelho-50);
+  --color-vermelho-200: var(--vermelho-200);
+  --color-vermelho-600: var(--vermelho-600);
+  --color-vermelho-800: var(--vermelho-800);
+  --color-azul-50: var(--azul-50);
+  --color-azul-200: var(--azul-200);
+  --color-azul-600: var(--azul-600);
+  --color-azul-800: var(--azul-800);
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-subtle: var(--surface-subtle);
+  --color-surface-sunken: var(--surface-sunken);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-fg: var(--fg);
+  --color-fg-2: var(--fg-2);
+  --color-muted: var(--muted);
+  --color-link: var(--link);
+  --color-action: var(--action);
+  --color-action-hover: var(--action-hover);
+  --color-on-action: var(--on-action);
+  --color-accent: var(--accent);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-fg: var(--sidebar-fg);
+  --color-sidebar-active: var(--sidebar-active);
+  --color-canvas-dot: var(--canvas-dot);
+  --color-focus: var(--focus);
+  --color-tint: var(--tint);
+  --color-tint-fg: var(--tint-fg);
+  --color-success-bg: var(--success-bg);
+  --color-success-border: var(--success-border);
+  --color-success-fg: var(--success-fg);
+  --color-success: var(--success);
+  --color-warning-bg: var(--warning-bg);
+  --color-warning-border: var(--warning-border);
+  --color-warning-fg: var(--warning-fg);
+  --color-warning: var(--warning);
+  --color-danger-bg: var(--danger-bg);
+  --color-danger-border: var(--danger-border);
+  --color-danger-fg: var(--danger-fg);
+  --color-danger: var(--danger);
+  --color-info-bg: var(--info-bg);
+  --color-info-border: var(--info-border);
+  --color-info-fg: var(--info-fg);
+  --color-info: var(--info);
+  --shadow-1: var(--elev-1);
+  --shadow-2: var(--elev-2);
+  --shadow-3: var(--elev-3);
+  --shadow-4: var(--elev-4);
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --radius-xl: var(--r-xl);
+  --radius-pill: var(--r-pill);
+}
+
+/* Base do Design System dtcode: tema escuro, fontes, movimento, estilos de base e ícones.
+   Vai no dist/styles.css do pacote @dtcode/ui, no globals.css do site e no ds.css do kit para copiar (scripts/build-templates.mjs).
+   Só entra aqui o que os componentes do pacote precisam; estilos do app ficam em globals.css. */
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme inline {
+  --font-display: var(--font-lexend, "Lexend"), system-ui, sans-serif;
+  --font-sans: var(--font-public-sans, "Public Sans"), system-ui, sans-serif;
+  --font-mono: var(--font-jetbrains, "JetBrains Mono"), ui-monospace, monospace;
+  --ease-brand: cubic-bezier(0.2, 0.7, 0.2, 1);
+
+  /* Movimento — curtas e suaves; todas respeitam prefers-reduced-motion (ver fim do arquivo) */
+  --animate-fade-in: fade-in 0.2s ease-out backwards;
+  --animate-fade-up: fade-up 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
+  --animate-scale-in: scale-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
+  --animate-slide-in-left: slide-in-left 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
+  --animate-pop: pop 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
+  --animate-spin-in: spin-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
+  --animate-shake: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) backwards;
+  /* Usa a propriedade `translate` (não `transform`) para não anular o rotate-45 dos losangos */
+  --animate-float: float 6s ease-in-out infinite;
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+  }
+  @keyframes fade-up {
+    from { opacity: 0; translate: 0 6px; }
+  }
+  @keyframes scale-in {
+    from { opacity: 0; scale: 0.96; }
+  }
+  @keyframes slide-in-left {
+    from { translate: -100% 0; }
+  }
+  @keyframes pop {
+    0% { scale: 0.92; opacity: 0.6; }
+    60% { scale: 1.03; opacity: 1; }
+    100% { scale: 1; }
+  }
+  @keyframes spin-in {
+    from { rotate: -90deg; opacity: 0; scale: 0.6; }
+  }
+  @keyframes shake {
+    20%, 60% { translate: -4px 0; }
+    40%, 80% { translate: 4px 0; }
+  }
+  @keyframes float {
+    0%, 100% { translate: 0 0; }
+    50% { translate: 0 -10px; }
+  }
+}
+
+@layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+  body {
+    background: var(--bg);
+    color: var(--fg);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+  h1, h2, h3, h4 {
+    font-family: var(--font-display);
+    letter-spacing: -0.01em;
+  }
+  :focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+  ::selection {
+    background: var(--magenta-200);
+    color: var(--roxo-900);
+  }
+}
+
+@layer components {
+  /* Ícones preenchidos (regra do MIV): Material Symbols Rounded */
+  .icon {
+    font-family: "Material Symbols Rounded";
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    display: inline-block;
+    white-space: nowrap;
+    direction: ltr;
+    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
+    -webkit-font-smoothing: antialiased;
+    user-select: none;
+    flex: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/switch.d.ts

@@ -0,0 +1,2 @@
+import * as RadixSwitch from "@radix-ui/react-switch";
+export declare function Switch({ className, ...props }: React.ComponentProps<typeof RadixSwitch.Root>): import("react").JSX.Element;

package/dist/switch.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixSwitch from "@radix-ui/react-switch";
+import { cn } from "./cn.js";
+export function Switch({ className, ...props }) {
+    return (_jsx(RadixSwitch.Root, { className: cn("group/switch relative h-[22px] w-[38px] flex-none cursor-pointer rounded-pill bg-neutro-300 transition-colors duration-200", "data-[state=checked]:bg-magenta-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white/20", className), ...props, children: _jsx(RadixSwitch.Thumb, { className: "block h-4 w-4 translate-x-[3px] group-active/switch:w-5 data-[state=checked]:group-active/switch:translate-x-[15px] rounded-full bg-white shadow-[0_1px_2px_rgb(0_0_0/.25)] transition-[translate,width] duration-200 ease-brand data-[state=checked]:translate-x-[19px]" }) }));
+}

package/dist/tabs.d.ts

@@ -0,0 +1,7 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+export declare const Tabs: import("react").ForwardRefExoticComponent<RadixTabs.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function TabsList({ className, ...props }: React.ComponentProps<typeof RadixTabs.List>): import("react").JSX.Element;
+export declare function TabsTrigger({ icon, className, children, ...props }: React.ComponentProps<typeof RadixTabs.Trigger> & {
+    icon?: string;
+}): import("react").JSX.Element;
+export declare function TabsContent({ className, ...props }: React.ComponentProps<typeof RadixTabs.Content>): import("react").JSX.Element;

package/dist/tabs.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { cn } from "./cn.js";
+import { Icon } from "./icon.js";
+export const Tabs = RadixTabs.Root;
+export function TabsList({ className, ...props }) {
+    return _jsx(RadixTabs.List, { className: cn("flex gap-1 overflow-x-auto border-b border-border", className), ...props });
+}
+export function TabsTrigger({ icon, className, children, ...props }) {
+    return (_jsxs(RadixTabs.Trigger, { className: cn("relative -mb-px flex items-center gap-1.5 px-3 py-2.5 text-[13px] font-semibold whitespace-nowrap text-fg-2", "transition-colors hover:text-fg data-[state=active]:text-fg", "after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full after:bg-[image:var(--grad-marca)] after:opacity-0 after:scale-x-50 after:transition-[opacity,scale] after:duration-250 after:ease-brand data-[state=active]:after:opacity-100 data-[state=active]:after:scale-x-100", className), ...props, children: [icon && _jsx(Icon, { name: icon, size: 17 }), children] }));
+}
+export function TabsContent({ className, ...props }) {
+    return _jsx(RadixTabs.Content, { className: cn("data-[state=active]:animate-fade-in", className), ...props });
+}

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@dtcode/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Componentes React e tokens do Design System dtcode (Tailwind CSS v4).",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/appsdtcode/Design-System.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwindcss": ">=4"
+  },
+  "dependencies": {
+    "@radix-ui/react-switch": "^1.4.1",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "typescript": "^5"
+  }
+}