@dtcode/ui 0.3.0 → 0.4.0

package/dist/sheet.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { cn } from "./cn.js";
+import { overlayClasses } from "./dialog.js";
+import { Icon } from "./icon.js";
+export const Sheet = RadixDialog.Root;
+export const SheetTrigger = RadixDialog.Trigger;
+export const SheetClose = RadixDialog.Close;
+/** Painel lateral à direita (até 520px) para ver ou editar um item sem sair da lista. */
+export function SheetContent({ title, description, footer, className, children, ...props }) {
+    return (_jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { className: overlayClasses }), _jsxs(RadixDialog.Content, { ...(description ? {} : { "aria-describedby": undefined }), className: cn("fixed inset-y-0 right-0 z-50 flex w-full max-w-[520px] animate-slide-in-right flex-col border-l border-border bg-surface text-fg shadow-4 focus:outline-none", className), ...props, children: [_jsxs("div", { className: "flex items-start gap-3 border-b border-border px-6 py-5", children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [_jsx(RadixDialog.Title, { className: "font-display text-lg leading-snug font-semibold", children: title }), description && _jsx(RadixDialog.Description, { className: "text-sm text-fg-2", children: description })] }), _jsx(RadixDialog.Close, { "aria-label": "Fechar", className: "-mt-1 -mr-2 grid size-9 flex-none place-items-center rounded-md text-muted transition-colors hover:bg-surface-subtle hover:text-fg", children: _jsx(Icon, { name: "close", size: 20 }) })] }), _jsx("div", { className: "grid flex-1 content-start gap-7 overflow-y-auto px-6 py-6", children: children }), footer && _jsx("div", { className: "flex flex-wrap justify-end gap-2 border-t border-border px-6 py-4", children: footer })] })] }));
+}
+/** Bloco com título dentro do painel. */
+export function SheetSection({ title, className, children }) {
+    return (_jsxs("section", { className: cn("grid gap-3", className), children: [_jsx("h3", { className: "font-display text-xs font-semibold tracking-[.1em] text-fg-2 uppercase", children: title }), children] }));
+}
+/** Lista de rótulo e valor (ex.: dados de um registro). */
+export function DefinitionList({ items, className }) {
+    return (_jsx("dl", { className: cn("grid grid-cols-[minmax(0,140px)_minmax(0,1fr)] gap-x-4 gap-y-2.5 text-sm", className), children: items.map((item, i) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-fg-2", children: item.label }), _jsx("dd", { className: "min-w-0 break-words text-fg", children: item.value })] }, i))) }));
+}

package/dist/skeleton.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Bloco de carregamento no formato do conteúdo (listas, tabelas, números).
+ * Use quando a estrutura da tela já é conhecida; para uma ação em andamento, use o Loader.
+ */
+export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;

package/dist/skeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+/**
+ * Bloco de carregamento no formato do conteúdo (listas, tabelas, números).
+ * Use quando a estrutura da tela já é conhecida; para uma ação em andamento, use o Loader.
+ */
+export function Skeleton({ className, ...props }) {
+    return _jsx("div", { "aria-hidden": true, className: cn("h-4 animate-pulse rounded-md bg-border", className), ...props });
+}

package/dist/styles.css

@@ -263,7 +263,7 @@
 
 /* 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. */
+   Só entra aqui o que os componentes e as classes utilitárias do pacote precisam; estilos do app ficam em globals.css. */
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
@@ -278,6 +278,7 @@
   --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-slide-in-right: slide-in-right 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;
@@ -296,6 +297,9 @@
   @keyframes slide-in-left {
     from { translate: -100% 0; }
   }
+  @keyframes slide-in-right {
+    from { translate: 100% 0; }
+  }
   @keyframes pop {
     0% { scale: 0.92; opacity: 0.6; }
     60% { scale: 1.03; opacity: 1; }
@@ -353,6 +357,71 @@
     user-select: none;
     flex: none;
   }
+
+  /* Rótulo de seção — padrão das páginas do MIV: RÓTULO ——— */
+  .eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    font: 600 0.75rem/1 var(--font-display);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--fg-2);
+  }
+  .eyebrow::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--border-strong);
+  }
+
+  .text-gradient {
+    background: var(--grad-marca);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  /* Rolagem sobre fundo escuro (sidebar): quase invisível, aparece ao passar o mouse */
+  .scrollbar-dark {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.2s;
+  }
+  .scrollbar-dark:hover,
+  .scrollbar-dark:focus-within {
+    scrollbar-color: rgb(255 255 255 / 0.22) transparent;
+  }
+  .scrollbar-dark::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+  .scrollbar-dark:hover::-webkit-scrollbar-thumb {
+    background-color: rgb(255 255 255 / 0.22);
+  }
+
+  /* Entrada em cascata dos filhos diretos */
+  .stagger > * {
+    animation: var(--animate-fade-up);
+  }
+  .stagger > :nth-child(2) { animation-delay: 25ms; }
+  .stagger > :nth-child(3) { animation-delay: 50ms; }
+  .stagger > :nth-child(4) { animation-delay: 75ms; }
+  .stagger > :nth-child(5) { animation-delay: 100ms; }
+  .stagger > :nth-child(6) { animation-delay: 125ms; }
+  .stagger > :nth-child(n + 7) { animation-delay: 150ms; }
+
+  .bg-hero {
+    background: var(--grad-hero);
+  }
+
+  .bg-dots {
+    background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1.2px);
+    background-size: 16px 16px;
+  }
+  .bg-dots-light {
+    background-image: radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1.2px);
+    background-size: 18px 18px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -362,3 +431,228 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Símbolo animado (AnimatedSymbol): montagem, brilho, partículas e parallax. Vai no dist/styles.css. */
+
+@layer components {
+  /*
+   * Símbolo animado (tela de login) — componente AnimatedSymbol do pacote.
+   * Ordem dos <path> no SVG oficial: losango de cima, do meio, de baixo e o chevron.
+   * Linha do tempo: 0–1,3 s peças voam de longe (desfocadas, girando) e se encaixam · ~1,3 s impacto
+   * (ondas em losango + aura + halo) · 2 s chevron pisca como cursor de terminal · 2 s+ flutuação, brilho
+   * pulsando, reflexo de luz, balanço de cada peça e partículas em losango subindo.
+   * Hover: visão explodida (as peças se afastam um pouco; --spread anima de 0 a 1).
+   * Parallax: o JS do componente define --px/--py (-1..1) conforme o ponteiro; a inclinação 3D usa
+   * `transform` no palco e o deslocamento por peça usa `transform` nos <path>, que se soma às
+   * propriedades `translate`/`rotate`/`scale` usadas pelas animações.
+   */
+  .symbol-stage {
+    --px: 0;
+    --py: 0;
+    transition: --spread 0.6s cubic-bezier(0.22, 1.3, 0.36, 1);
+  }
+  .symbol-stage:hover {
+    --spread: 1;
+  }
+  .symbol-tilt {
+    transform: perspective(800px) rotateX(calc(var(--py) * -14deg)) rotateY(calc(var(--px) * 16deg));
+    transform-style: preserve-3d;
+  }
+
+  .symbol-live {
+    overflow: visible;
+    animation:
+      symbol-float 5s ease-in-out 2s infinite,
+      symbol-glow 5s ease-in-out 1.3s infinite;
+  }
+  .symbol-live path {
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  /* unidades em px aqui são do viewBox do SVG (350 de largura) */
+  .symbol-live path:nth-of-type(1) {
+    --from: -210% -300%;
+    --spin: -150deg;
+    transform: translate(calc(var(--px) * -18px), calc(var(--py) * -14px - var(--spread) * 22px));
+    animation:
+      piece-assemble 1.25s cubic-bezier(0.22, 1.25, 0.36, 1) backwards,
+      piece-bob 3.4s ease-in-out 2s infinite;
+  }
+  .symbol-live path:nth-of-type(2) {
+    --from: 360% -80%;
+    --spin: 170deg;
+    transform: translate(calc(var(--px) * 26px + var(--spread) * 24px), calc(var(--py) * 10px));
+    animation:
+      piece-assemble 1.25s cubic-bezier(0.22, 1.25, 0.36, 1) 0.15s backwards,
+      piece-bob 3.9s ease-in-out 2.3s infinite;
+  }
+  .symbol-live path:nth-of-type(3) {
+    --from: -190% 320%;
+    --spin: 130deg;
+    transform: translate(calc(var(--px) * -10px), calc(var(--py) * 18px + var(--spread) * 22px));
+    animation:
+      piece-assemble 1.25s cubic-bezier(0.22, 1.25, 0.36, 1) 0.3s backwards,
+      piece-bob 3.6s ease-in-out 2.6s infinite;
+  }
+  .symbol-live path:nth-of-type(4) {
+    --from: -700% 0;
+    --spin: 0deg;
+    transform: translate(calc(var(--px) * 34px - var(--spread) * 30px), 0);
+    animation:
+      piece-assemble 0.85s cubic-bezier(0.22, 1.5, 0.36, 1) 0.85s backwards,
+      chevron-blink 0.9s steps(1) 1.9s 2,
+      chevron-nudge 4s ease-in-out 3.8s infinite;
+  }
+
+  /* Reflexo de luz: cópia branca do símbolo, revelada por uma faixa de máscara que atravessa as peças */
+  .symbol-live.symbol-shine {
+    mix-blend-mode: overlay;
+    -webkit-mask-image: linear-gradient(115deg, transparent 42%, #000 50%, transparent 58%);
+    mask-image: linear-gradient(115deg, transparent 42%, #000 50%, transparent 58%);
+    -webkit-mask-size: 300% 100%;
+    mask-size: 300% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: 130% 0;
+    mask-position: 130% 0;
+    animation:
+      symbol-float 5s ease-in-out 2s infinite,
+      shine-sweep 5.5s ease-in-out 2.2s infinite;
+  }
+
+  /* Ondas em losango no momento do encaixe */
+  .symbol-ring {
+    position: absolute;
+    width: 58%;
+    aspect-ratio: 1;
+    border: 2px solid rgb(255 145 153 / 0.75);
+    border-radius: 26%;
+    rotate: 45deg;
+    opacity: 0;
+    pointer-events: none;
+    animation: ring-burst 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s both;
+  }
+  .symbol-ring--late {
+    border-color: rgb(239 47 177 / 0.55);
+    animation-delay: 1.42s;
+  }
+
+  /* Halo de luz atrás do símbolo: dá contraste ao chevron roxo sobre o fundo escuro */
+  .symbol-halo {
+    position: absolute;
+    width: 78%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgb(255 236 246 / 0.55), rgb(255 145 153 / 0.18) 45%, transparent 70%);
+    filter: blur(18px);
+    opacity: 0;
+    pointer-events: none;
+    animation:
+      aurora-in 1.4s ease-out 1.15s both,
+      halo-breathe 5s ease-in-out 2.6s infinite;
+  }
+
+  /* Partículas em losango (motivo da marca) subindo devagar em volta do símbolo */
+  .symbol-particles {
+    position: absolute;
+    inset: -35% -45%;
+    pointer-events: none;
+  }
+  .symbol-particles span {
+    position: absolute;
+    left: var(--x);
+    bottom: 18%;
+    width: var(--s);
+    aspect-ratio: 1;
+    border-radius: 28%;
+    rotate: 45deg;
+    background: linear-gradient(135deg, #ff9199, #ef2fb1);
+    box-shadow: 0 0 12px rgb(239 47 177 / 0.6);
+    opacity: 0;
+    animation: particle-rise var(--d) ease-in-out var(--delay) infinite;
+  }
+
+  /* Aura colorida atrás do símbolo: acende no impacto e gira devagar */
+  .symbol-aurora {
+    position: absolute;
+    width: 150%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: conic-gradient(from 0deg, #ef2fb1, #6a3dba, #ff9199, #3d1883, #ef2fb1);
+    filter: blur(70px);
+    opacity: 0;
+    pointer-events: none;
+    animation:
+      aurora-in 1.6s ease-out 1.1s both,
+      aurora-spin 16s linear infinite;
+  }
+
+  @keyframes piece-assemble {
+    from {
+      translate: var(--from);
+      rotate: var(--spin);
+      scale: 0.3;
+      opacity: 0;
+      filter: blur(14px);
+    }
+    30% {
+      opacity: 1;
+    }
+    70% {
+      filter: blur(0);
+    }
+  }
+  @keyframes piece-bob {
+    0%, 100% { translate: 0 0; }
+    50% { translate: 0 -7%; }
+  }
+  @keyframes chevron-blink {
+    0% { opacity: 0.15; }
+    50% { opacity: 1; }
+  }
+  @keyframes halo-breathe {
+    0%, 100% { opacity: 0.5; scale: 1; }
+    50% { opacity: 0.8; scale: 1.08; }
+  }
+  @keyframes particle-rise {
+    0% { translate: 0 0; opacity: 0; scale: 0.4; }
+    15% { opacity: var(--o, 0.85); scale: 1; }
+    75% { opacity: calc(var(--o, 0.85) * 0.6); }
+    100% { translate: var(--drift) -240px; opacity: 0; scale: 0.6; }
+  }
+  @keyframes chevron-nudge {
+    0%, 55%, 100% { translate: 0 0; }
+    25% { translate: 30% 0; }
+  }
+  @keyframes symbol-float {
+    0%, 100% { translate: 0 0; }
+    50% { translate: 0 -16px; }
+  }
+  @keyframes symbol-glow {
+    0%, 100% { filter: drop-shadow(0 18px 36px rgb(239 47 177 / 0.35)); }
+    50% { filter: drop-shadow(0 26px 60px rgb(239 47 177 / 0.65)); }
+  }
+  @keyframes shine-sweep {
+    0% { -webkit-mask-position: 130% 0; mask-position: 130% 0; }
+    40%, 100% { -webkit-mask-position: -30% 0; mask-position: -30% 0; }
+  }
+  @keyframes ring-burst {
+    0% { opacity: 0; scale: 0.45; }
+    8% { opacity: 1; }
+    100% { opacity: 0; scale: 2.6; }
+  }
+  @keyframes aurora-in {
+    from { opacity: 0; scale: 0.3; }
+    to { opacity: 0.5; scale: 1; }
+  }
+  @keyframes aurora-spin {
+    to { rotate: 360deg; }
+  }
+}
+
+/* Permite animar --spread (visão explodida do símbolo do login) com transição */
+@property --spread {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}

package/dist/table.d.ts

@@ -0,0 +1,7 @@
+/** Tabela de dados. A moldura rola na horizontal quando falta espaço. */
+export declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react").JSX.Element;
+export declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react").JSX.Element;
+export declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react").JSX.Element;
+export declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react").JSX.Element;
+export declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react").JSX.Element;
+export declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react").JSX.Element;

package/dist/table.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+/** Tabela de dados. A moldura rola na horizontal quando falta espaço. */
+export function Table({ className, ...props }) {
+    return (_jsx("div", { className: "w-full overflow-x-auto rounded-lg border border-border bg-surface", children: _jsx("table", { className: cn("w-full border-collapse text-left text-sm", className), ...props }) }));
+}
+export function TableHeader({ className, ...props }) {
+    return _jsx("thead", { className: cn("border-b border-border bg-surface-subtle", className), ...props });
+}
+export function TableBody({ className, ...props }) {
+    return _jsx("tbody", { className: cn("[&>tr:not(:last-child)]:border-b [&>tr:not(:last-child)]:border-border", className), ...props });
+}
+export function TableRow({ className, ...props }) {
+    return _jsx("tr", { className: cn("transition-colors [tbody>&]:hover:bg-surface-subtle", className), ...props });
+}
+export function TableHead({ className, ...props }) {
+    return _jsx("th", { scope: "col", className: cn("px-4 py-3 font-display text-xs font-semibold tracking-[.06em] whitespace-nowrap text-fg-2 uppercase", className), ...props });
+}
+export function TableCell({ className, ...props }) {
+    return _jsx("td", { className: cn("px-4 py-3 align-middle text-fg", className), ...props });
+}

package/dist/textarea.d.ts

@@ -0,0 +1,5 @@
+export type TextareaProps = React.ComponentProps<"textarea"> & {
+    invalid?: boolean;
+};
+/** Campo de texto longo, com o visual do Input. Use dentro de <Field> para rótulo, dica e erro. */
+export declare function Textarea({ invalid, className, rows, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import { controlClasses } from "./input.js";
+/** Campo de texto longo, com o visual do Input. Use dentro de <Field> para rótulo, dica e erro. */
+export function Textarea({ invalid, className, rows = 4, ...props }) {
+    return (_jsx("textarea", { rows: rows, "aria-invalid": invalid || undefined, className: controlClasses({ invalid, className: cn("min-h-20 resize-y py-2.5 leading-relaxed", className) }), ...props }));
+}

package/dist/theme-script.d.ts

@@ -0,0 +1,11 @@
+export type Theme = "light" | "dark" | "system";
+export declare const DARK = "(prefers-color-scheme: dark)";
+/**
+ * Script para o <head>, antes de qualquer CSS: aplica o tema salvo antes da primeira pintura
+ * (sem piscar o tema errado). No Next.js, use <script dangerouslySetInnerHTML={{ __html: themeScript() }} />;
+ * no Vite, cole o retorno num <script> do index.html.
+ */
+export declare function themeScript({ defaultTheme, storageKey }?: {
+    defaultTheme?: Theme;
+    storageKey?: string;
+}): string;

package/dist/theme-script.js

@@ -0,0 +1,10 @@
+// Fora do arquivo "use client" do tema: o script é montado no servidor (layout do Next.js) ou no build.
+export const DARK = "(prefers-color-scheme: dark)";
+/**
+ * Script para o <head>, antes de qualquer CSS: aplica o tema salvo antes da primeira pintura
+ * (sem piscar o tema errado). No Next.js, use <script dangerouslySetInnerHTML={{ __html: themeScript() }} />;
+ * no Vite, cole o retorno num <script> do index.html.
+ */
+export function themeScript({ defaultTheme = "light", storageKey = "theme" } = {}) {
+    return `(function(){try{var t=localStorage.getItem(${JSON.stringify(storageKey)});if(t!=="light"&&t!=="dark"&&t!=="system")t=${JSON.stringify(defaultTheme)};if(t==="system")t=matchMedia(${JSON.stringify(DARK)}).matches?"dark":"light";var r=document.documentElement;r.dataset.theme=t;r.style.colorScheme=t}catch(e){}})()`;
+}

package/dist/theme.d.ts

@@ -0,0 +1,24 @@
+import { type Theme } from "./theme-script.js";
+export type { Theme };
+type Resolved = "light" | "dark";
+type ThemeApi = {
+    /** Escolha salva. undefined até o navegador ler a preferência (no servidor e na hidratação). */
+    theme: Theme | undefined;
+    /** Tema aplicado de fato ("system" vira light ou dark). */
+    resolvedTheme: Resolved | undefined;
+    setTheme: (theme: Theme) => void;
+};
+/**
+ * Tema claro/escuro para qualquer app React (Next.js, Vite…). Grava a escolha no localStorage e
+ * aplica data-theme no <html>, que é o que os tokens do styles.css usam.
+ */
+export declare function ThemeProvider({ children, defaultTheme, storageKey, disableTransitionOnChange, }: {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+    /** Desliga as transições no instante da troca, para nada animar de uma cor para a outra. */
+    disableTransitionOnChange?: boolean;
+}): import("react").JSX.Element;
+export declare function useTheme(): ThemeApi;
+/** Botão que alterna entre claro e escuro. */
+export declare function ThemeToggle({ className, ...props }: Omit<React.ComponentProps<"button">, "onClick" | "children">): import("react").JSX.Element;

package/dist/theme.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useSyncExternalStore } from "react";
+import { cn } from "./cn.js";
+import { Icon } from "./icon.js";
+import { DARK } from "./theme-script.js";
+const ThemeContext = createContext(null);
+// Avisa as outras instâncias na mesma aba (o evento "storage" só chega às outras abas).
+const CHANGE = "dtcode-theme-change";
+function applyTheme(resolved, disableTransition) {
+    const root = document.documentElement;
+    if (root.dataset.theme === resolved)
+        return;
+    let style;
+    if (disableTransition) {
+        style = document.createElement("style");
+        style.textContent = "*,*::before,*::after{transition:none!important}";
+        document.head.appendChild(style);
+    }
+    root.dataset.theme = resolved;
+    root.style.colorScheme = resolved;
+    if (style) {
+        void getComputedStyle(root).opacity; // força o recálculo antes de devolver as transições
+        const el = style;
+        setTimeout(() => el.remove(), 1);
+    }
+}
+const subscribeSystem = (onChange) => {
+    const mq = matchMedia(DARK);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+};
+/**
+ * Tema claro/escuro para qualquer app React (Next.js, Vite…). Grava a escolha no localStorage e
+ * aplica data-theme no <html>, que é o que os tokens do styles.css usam.
+ */
+export function ThemeProvider({ children, defaultTheme = "light", storageKey = "theme", disableTransitionOnChange = true, }) {
+    const subscribeStored = useCallback((onChange) => {
+        const onStorage = (e) => {
+            if (e.key === storageKey)
+                onChange();
+        };
+        window.addEventListener("storage", onStorage);
+        window.addEventListener(CHANGE, onChange);
+        return () => {
+            window.removeEventListener("storage", onStorage);
+            window.removeEventListener(CHANGE, onChange);
+        };
+    }, [storageKey]);
+    const readStored = useCallback(() => {
+        try {
+            return localStorage.getItem(storageKey);
+        }
+        catch {
+            return null;
+        }
+    }, [storageKey]);
+    const stored = useSyncExternalStore(subscribeStored, readStored, () => undefined);
+    const systemDark = useSyncExternalStore(subscribeSystem, () => matchMedia(DARK).matches, () => undefined);
+    const theme = stored === undefined ? undefined : stored === "light" || stored === "dark" || stored === "system" ? stored : defaultTheme;
+    const resolvedTheme = theme === "system" ? (systemDark ? "dark" : "light") : theme;
+    useEffect(() => {
+        if (resolvedTheme)
+            applyTheme(resolvedTheme, disableTransitionOnChange);
+    }, [resolvedTheme, disableTransitionOnChange]);
+    const setTheme = useCallback((next) => {
+        try {
+            localStorage.setItem(storageKey, next);
+        }
+        catch {
+            // Sem localStorage (modo privado restrito): aplica só nesta página.
+            applyTheme(next === "system" ? (matchMedia(DARK).matches ? "dark" : "light") : next, disableTransitionOnChange);
+        }
+        window.dispatchEvent(new Event(CHANGE));
+    }, [storageKey, disableTransitionOnChange]);
+    const api = useMemo(() => ({ theme, resolvedTheme, setTheme }), [theme, resolvedTheme, setTheme]);
+    return _jsx(ThemeContext.Provider, { value: api, children: children });
+}
+export function useTheme() {
+    const api = useContext(ThemeContext);
+    if (!api)
+        throw new Error("useTheme precisa estar dentro de <ThemeProvider>.");
+    return api;
+}
+/** Botão que alterna entre claro e escuro. */
+export function ThemeToggle({ className, ...props }) {
+    const { resolvedTheme, setTheme } = useTheme();
+    const mounted = resolvedTheme !== undefined;
+    const dark = resolvedTheme === "dark";
+    return (_jsx("button", { type: "button", onClick: () => setTheme(dark ? "light" : "dark"), "aria-label": dark ? "Usar tema claro" : "Usar tema escuro", className: cn("grid size-9 place-items-center rounded-md border border-border bg-surface text-fg-2 transition-[color,border-color,scale] hover:border-border-strong hover:text-fg active:scale-90", className), ...props, children: _jsx(Icon, { name: dark ? "light_mode" : "dark_mode", size: 18, className: mounted ? "animate-spin-in" : undefined }, dark ? "sol" : "lua") }));
+}

package/dist/toast.d.ts

@@ -0,0 +1,24 @@
+export type ToastTone = "success" | "info" | "danger";
+export type ToastOptions = {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    tone?: ToastTone;
+    /** Botão de ação (ex.: Desfazer). Clicar fecha o aviso. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Tempo na tela em ms. Padrão: 5 s, ou 8 s quando há ação. Infinity mantém até fechar. */
+    duration?: number;
+};
+type ToastApi = {
+    toast: (options: ToastOptions) => number;
+    dismiss: (id: number) => void;
+};
+/** Avisos rápidos. Envolva o app uma vez e chame useToast() onde precisar. */
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/** toast({ title, tone, action }) mostra um aviso; dismiss(id) fecha antes do tempo. */
+export declare function useToast(): ToastApi;
+export {};

package/dist/toast.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "./cn.js";
+import { Icon } from "./icon.js";
+const ToastContext = createContext(null);
+const tones = {
+    success: { icon: "check_circle", cls: "text-success" },
+    info: { icon: "info", cls: "text-info" },
+    danger: { icon: "error", cls: "text-danger" },
+};
+/** Avisos rápidos. Envolva o app uma vez e chame useToast() onde precisar. */
+export function ToastProvider({ children }) {
+    const [items, setItems] = useState([]);
+    const next = useRef(0);
+    const dismiss = useCallback((id) => setItems((list) => list.filter((t) => t.id !== id)), []);
+    const toast = useCallback((options) => {
+        const id = ++next.current;
+        // No máximo 3 na tela: o mais antigo sai.
+        setItems((list) => [...list.slice(-2), { ...options, id }]);
+        return id;
+    }, []);
+    const api = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx("div", { role: "region", "aria-label": "Avisos", "aria-live": "polite", className: "pointer-events-none fixed right-4 bottom-4 z-[60] grid w-[min(380px,calc(100%-32px))] gap-2", children: items.map((t) => (_jsx(ToastCard, { item: t, dismiss: dismiss }, t.id))) })] }));
+}
+function ToastCard({ item, dismiss }) {
+    const tone = tones[item.tone ?? "success"];
+    const [paused, setPaused] = useState(false);
+    const duration = item.duration ?? (item.action ? 8000 : 5000);
+    const { id } = item;
+    const onDismiss = () => dismiss(id);
+    useEffect(() => {
+        if (paused || !Number.isFinite(duration))
+            return;
+        const timer = setTimeout(() => dismiss(id), duration);
+        return () => clearTimeout(timer);
+    }, [paused, duration, dismiss, id]);
+    return (_jsxs("div", { role: item.tone === "danger" ? "alert" : "status", onPointerEnter: () => setPaused(true), onPointerLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: () => setPaused(false), className: "pointer-events-auto flex animate-fade-up items-start gap-3 rounded-lg border border-border bg-surface p-4 text-sm text-fg shadow-3", children: [_jsx(Icon, { name: tone.icon, size: 20, className: cn("mt-px", tone.cls) }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [_jsx("strong", { className: "font-semibold", children: item.title }), item.description && _jsx("span", { className: "text-fg-2", children: item.description })] }), item.action && (_jsx("button", { type: "button", onClick: () => {
+                    item.action?.onClick();
+                    onDismiss();
+                }, className: "flex-none rounded-md px-2 py-1 font-semibold text-link transition-colors hover:bg-surface-subtle", children: item.action.label })), _jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Fechar aviso", className: "-m-1 grid size-7 flex-none place-items-center rounded-md text-muted hover:bg-surface-subtle hover:text-fg", children: _jsx(Icon, { name: "close", size: 18 }) })] }));
+}
+/** toast({ title, tone, action }) mostra um aviso; dismiss(id) fecha antes do tempo. */
+export function useToast() {
+    const api = useContext(ToastContext);
+    if (!api)
+        throw new Error("useToast precisa estar dentro de <ToastProvider>.");
+    return api;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtcode/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Componentes React e tokens do Design System dtcode (Tailwind CSS v4).",
   "license": "UNLICENSED",
   "repository": {
@@ -32,6 +32,9 @@
     "tailwindcss": ">=4"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.4.1",
+    "@radix-ui/react-dialog": "^1.3.1",
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
     "@radix-ui/react-switch": "^1.4.1",
     "@radix-ui/react-tabs": "^1.2.1",
     "clsx": "^2.1.1"