@dtcode/ui 0.2.0 → 0.4.0

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.2.0",
+  "version": "0.4.0",
   "description": "Componentes React e tokens do Design System dtcode (Tailwind CSS v4).",
   "license": "UNLICENSED",
   "repository": {
@@ -32,11 +32,15 @@
     "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"
   },
   "devDependencies": {
+    "@material-symbols/font-500": "0.48.1",
     "@types/react": "^19",
     "typescript": "^5"
   }