@1doc/1ds-react 0.0.1 → 2.7.1

package/src/utils/overlay-stack.ts

@@ -0,0 +1,26 @@
+/**
+ * Pilha global de overlays de diálogo abertos (Modal, ConfirmDialog).
+ *
+ * Motivação (simulação de adoção, time SaaS RH): Modal e ConfirmDialog
+ * escutavam Esc no document de forma independente — um único Esc com um
+ * ConfirmDialog empilhado sobre um Modal fechava os dois. Com a pilha,
+ * apenas o overlay do TOPO reage ao Esc.
+ *
+ * Singleton por bundle (estado de módulo), compartilhado entre os
+ * componentes gerados React e Vue.
+ */
+const stack: string[] = [];
+
+/** Registra um overlay aberto no topo da pilha (idempotente). */
+export const pushOverlay = (id: string): void => {
+  if (!stack.includes(id)) stack.push(id);
+};
+
+/** Remove um overlay da pilha (ao fechar ou desmontar). */
+export const removeOverlay = (id: string): void => {
+  const index = stack.indexOf(id);
+  if (index !== -1) stack.splice(index, 1);
+};
+
+/** true se o overlay é o do topo — o único que deve reagir ao Esc. */
+export const isTopOverlay = (id: string): boolean => stack.length > 0 && stack[stack.length - 1] === id

package/src/utils/theme.ts

@@ -1,12 +1,14 @@
 /**
- * Tipos de temas disponíveis no Design System
+ * Tipos de temas oficiais do Design System
  */
-export type Theme =
-  | "1doc"
-  | "1ds-red"
-  | "1ds-green"
-  | "1ds-orange"
-  | "1ds-yellow";
+export type Theme = "1doc" | "1ds-red" | "1ds-green" | "1ds-orange" | "1ds-yellow" | "1ds-purple" | "1doc-dark" | "1ds-red-dark" | "1ds-green-dark" | "1ds-orange-dark" | "1ds-yellow-dark" | "1ds-purple-dark" | "1doc-high-contrast";
+
+/**
+ * Nome de tema aceito pelas APIs: um tema oficial OU um tema custom de
+ * marca própria registrado via registerTheme() (white-label).
+ * O truque `(string & {})` preserva o autocomplete dos oficiais.
+ */
+export type ThemeName = Theme | (string & {});
 
 /**
  * Chave do localStorage para armazenar o tema selecionado
@@ -18,14 +20,43 @@ const THEME_STORAGE_KEY = "umds-theme";
  */
 const DEFAULT_THEME: Theme = "1doc";
 
+/**
+ * Temas oficiais (fonte única para validação e getAvailableThemes)
+ */
+const OFFICIAL_THEMES: Theme[] = ["1doc", "1ds-red", "1ds-green", "1ds-orange", "1ds-yellow", "1ds-purple", "1doc-dark", "1ds-red-dark", "1ds-green-dark", "1ds-orange-dark", "1ds-yellow-dark", "1ds-purple-dark", "1doc-high-contrast"];
+
+/**
+ * Temas custom registrados em runtime (white-label).
+ */
+const customThemes: string[] = [];
+
+/**
+ * Registra um tema de marca própria (white-label) para que setTheme,
+ * getTheme, initTheme e onThemeChange o aceitem como válido.
+ *
+ * O CSS do tema é responsabilidade do consumidor: um arquivo com
+ * `[data-theme="<nome>"]` sobrescrevendo os tokens de tema
+ * (`--umds-theme-*`) ou os semânticos (`--umds-semantic-color-*`),
+ * carregado após o semantic.css.
+ *
+ * @example
+ * registerTheme("acme");
+ * registerTheme("acme-dark");
+ * setTheme("acme"); // agora válido e persistido
+ */
+export const registerTheme = (theme: string): void => {
+  if (!customThemes.includes(theme) && !OFFICIAL_THEMES.includes(theme as Theme)) {
+    customThemes.push(theme);
+  }
+};
+
 /**
  * Define o tema ativo no documento
- * @param theme - Nome do tema a ser aplicado
+ * @param theme - Nome do tema a ser aplicado (oficial ou registrado)
  */
-export const setTheme = (theme: Theme): void => {
+export const setTheme = (theme: ThemeName): void => {
   if (typeof document !== "undefined") {
     document.documentElement.setAttribute("data-theme", theme);
-
     try {
       localStorage.setItem(THEME_STORAGE_KEY, theme);
     } catch (e) {
@@ -36,17 +67,19 @@ export const setTheme = (theme: Theme): void => {
 };
 
 /**
- * Obtém o tema atual, considerando localStorage e preferências do sistema
+ * Obtém o tema atual, considerando localStorage e preferências do sistema.
+ * Temas custom precisam estar registrados (registerTheme) ANTES da leitura,
+ * senão o valor persistido é descartado em favor do padrão.
  * @returns O tema atualmente selecionado
  */
-export const getTheme = (): Theme => {
+export const getTheme = (): ThemeName => {
   if (typeof window === "undefined") {
     return DEFAULT_THEME;
   }
 
   // 1. Tenta buscar do localStorage
   try {
-    const stored = localStorage.getItem(THEME_STORAGE_KEY) as Theme | null;
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
     if (stored && isValidTheme(stored)) {
       return stored;
     }
@@ -55,9 +88,7 @@ export const getTheme = (): Theme => {
   }
 
   // 2. Tenta buscar do atributo data-theme do HTML
-  const currentTheme = document.documentElement.getAttribute(
-    "data-theme",
-  ) as Theme | null;
+  const currentTheme = document.documentElement.getAttribute("data-theme");
   if (currentTheme && isValidTheme(currentTheme)) {
     return currentTheme;
   }
@@ -68,7 +99,9 @@ export const getTheme = (): Theme => {
 
 /**
  * Inicializa o tema ao carregar a página
- * Deve ser chamado o mais cedo possível para evitar flash de conteúdo
+ * Deve ser chamado o mais cedo possível para evitar flash de conteúdo.
+ * White-label: chame registerTheme() antes de initTheme() para que o tema
+ * custom persistido no localStorage seja restaurado.
  */
 export const initTheme = (): void => {
   const theme = getTheme();
@@ -76,27 +109,20 @@ export const initTheme = (): void => {
 };
 
 /**
- * Valida se uma string é um tema válido
+ * Valida se uma string é um tema válido (oficial ou registrado)
  * @param theme - String a ser validada
  * @returns true se o tema é válido
  */
-function isValidTheme(theme: string): theme is Theme {
-  const validThemes: Theme[] = [
-    "1doc",
-    "1ds-red",
-    "1ds-green",
-    "1ds-orange",
-    "1ds-yellow",
-  ];
-  return validThemes.includes(theme as Theme);
+function isValidTheme(theme: string): boolean {
+  return OFFICIAL_THEMES.includes(theme as Theme) || customThemes.includes(theme);
 }
 
 /**
- * Retorna todos os temas disponíveis
+ * Retorna todos os temas disponíveis (oficiais + registrados)
  * @returns Array com todos os temas disponíveis
  */
-export const getAvailableThemes = (): Theme[] => {
-  return ["1doc", "1ds-red", "1ds-green", "1ds-orange", "1ds-yellow"];
+export const getAvailableThemes = (): ThemeName[] => {
+  return [...OFFICIAL_THEMES, ...customThemes];
 };
 
 /**
@@ -104,33 +130,23 @@ export const getAvailableThemes = (): Theme[] => {
  * @param callback - Função a ser executada quando o tema mudar
  * @returns Função para remover o listener
  */
-export const onThemeChange = (
-  callback: (theme: Theme) => void,
-): (() => void) => {
+export const onThemeChange = (callback: (theme: ThemeName) => void): (() => void) => {
   if (typeof window === "undefined") {
     return () => {};
   }
-
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (
-        mutation.type === "attributes" &&
-        mutation.attributeName === "data-theme"
-      ) {
-        const newTheme = document.documentElement.getAttribute(
-          "data-theme",
-        ) as Theme;
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      if (mutation.type === "attributes" && mutation.attributeName === "data-theme") {
+        const newTheme = document.documentElement.getAttribute("data-theme");
         if (newTheme && isValidTheme(newTheme)) {
           callback(newTheme);
         }
       }
     });
   });
-
   observer.observe(document.documentElement, {
     attributes: true,
-    attributeFilter: ["data-theme"],
+    attributeFilter: ["data-theme"]
   });
-
   return () => observer.disconnect();
-};
+}

package/src/utils/toast.ts

@@ -0,0 +1,89 @@
+/**
+ * Gerenciador imperativo de toasts com fila (achado 4/5 times na simulação
+ * de adoção: o Toast declarativo obrigava cada app a criar um host próprio,
+ * e mensagens em sequência se atropelavam).
+ *
+ * Uso:
+ *   1. Monte UM `<ToastStack />` na raiz do app (define a posição da pilha).
+ *   2. Dispare de qualquer lugar: `toast({ message: "Salvo!", variant: "positive" })`.
+ *
+ * O componente declarativo `<Toast />` continua existindo como primitiva
+ * para casos controlados simples.
+ *
+ * Framework-agnóstico: estado de módulo + pub/sub (singleton por bundle),
+ * consumido pelos ToastStack gerados de React e Vue.
+ */
+
+export type ToastVariant = "positive" | "negative" | "info";
+export interface ToastOptions {
+  /** Mensagem principal do toast */
+  message: string;
+  /** Descrição adicional abaixo da mensagem */
+  description?: string;
+  /** Variante semântica @default 'info' */
+  variant?: ToastVariant;
+  /** Auto-dismiss em ms; 0 = não fecha sozinho @default 5000 */
+  duration?: number;
+  /** Exibe o botão de fechar @default true */
+  closable?: boolean;
+}
+export interface ToastData {
+  id: number;
+  message: string;
+  description?: string;
+  variant: ToastVariant;
+  duration: number;
+  closable: boolean;
+}
+type ToastListener = (items: ToastData[]) => void;
+let sequence = 0;
+let items: ToastData[] = [];
+const listeners: ToastListener[] = [];
+const notify = (): void => {
+  const snapshot = [...items];
+  listeners.forEach(listener => listener(snapshot));
+};
+
+/** Enfileira um toast e retorna o id (para dismiss programático). */
+export const toast = (options: ToastOptions): number => {
+  sequence += 1;
+  const id = sequence;
+  items = [...items, {
+    variant: "info",
+    duration: 5000,
+    closable: true,
+    ...options,
+    id
+  }];
+  notify();
+  return id;
+};
+
+/** Remove um toast específico da pilha. */
+export const dismissToast = (id: number): void => {
+  const next = items.filter(item => item.id !== id);
+  if (next.length !== items.length) {
+    items = next;
+    notify();
+  }
+};
+
+/** Limpa a pilha inteira. */
+export const dismissAllToasts = (): void => {
+  if (items.length === 0) return;
+  items = [];
+  notify();
+};
+
+/**
+ * Inscreve um listener (chamado imediatamente com o estado atual).
+ * Retorna a função de desinscrição. Usado pelo ToastStack.
+ */
+export const subscribeToasts = (listener: ToastListener): (() => void) => {
+  listeners.push(listener);
+  listener([...items]);
+  return () => {
+    const index = listeners.indexOf(listener);
+    if (index !== -1) listeners.splice(index, 1);
+  };
+}

package/vitest.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "vitest/config";
+
+/**
+ * Testes unitários dos componentes GERADOS em React.
+ *
+ * Por que aqui e não no `core`: o `.lite.tsx` não roda — é fonte para o
+ * Mitosis. O que o consumidor instala é o gerado, e é dele que o teste tem de
+ * falar. Um teste que passa no core e quebra no gerado não serve.
+ *
+ * O que estes testes cobrem, e a esteira visual não: comportamento. Tecla,
+ * foco, o que o callback recebe, o que o `aria-` diz. A esteira garante que a
+ * tela não mudou; o teste garante que ela ainda FUNCIONA.
+ */
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./src/teste/setup.ts"],
+    // Os testes vivem em `src/teste/`, e NÃO ao lado do componente: a pasta
+    // `src/components` é gerada pelo Mitosis, está no .gitignore e é reescrita
+    // a cada build — um teste ali não seria versionado e sumiria no build.
+    include: ["src/teste/**/*.test.tsx"],
+    // O CSS dos componentes é importado por efeito colateral (`import "./X.css"`).
+    // Sem processá-lo, o import resolve para vazio — que é o que se quer: o
+    // teste é de comportamento, e estilo quem verifica é a regressão visual.
+    css: false,
+  },
+});

package/dist/components/Alert/Alert.css

@@ -1,188 +0,0 @@
-/* ============================================
-   Alert Component
-   Tipos: neutral, success, warning, error
-   Variantes: soft, solid
-   ============================================ */
-
-.umds-alert {
-    display: flex;
-    align-items: flex-start;
-    gap: 16px;
-    padding: 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-    width: 475px;
-    max-width: calc(100vw - 32px);
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    
-    font-family: var(--umds-semantic-font-family-base, 'Open Sans', 'Inter', sans-serif);
-    position: fixed;
-    z-index: 9999;
-}
-
-/* ----------------------------------------
-   Positioning modifiers
-   ---------------------------------------- */
-.umds-alert--top-right {
-    top: 24px;
-    right: 24px;
-}
-.umds-alert--top-left {
-    top: 24px;
-    left: 24px;
-}
-.umds-alert--top-center {
-    top: 24px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-.umds-alert--bottom-right {
-    bottom: 24px;
-    right: 24px;
-}
-.umds-alert--bottom-left {
-    bottom: 24px;
-    left: 24px;
-}
-.umds-alert--bottom-center {
-    bottom: 24px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-/* ----------------------------------------
-   Internal elements
-   ---------------------------------------- */
-.umds-alert__icon-wrapper {
-    display: flex;
-    align-items: flex-start;
-    flex-shrink: 0;
-    margin-top: 2px;
-}
-
-.umds-alert__content {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    flex: 1 1 0;
-    min-width: 0;
-}
-
-.umds-alert__title-container {
-    display: flex;
-    width: 100%;
-    align-items: flex-start;
-}
-
-.umds-alert__title-text {
-    font-weight: var(--umds-primitive-font-weight-semibold, 600) !important;
-    font-size: var(--umds-primitive-font-size-xxxxs, 12px) !important;
-    margin: 0;
-    line-height: normal;
-    letter-spacing: 0.06px;
-}
-
-.umds-alert__description-text {
-    font-weight: var(--umds-primitive-font-weight-regular, 400) !important;
-    font-size: var(--umds-primitive-font-size-xxxxs, 12px) !important;
-    margin: 0;
-    line-height: normal;
-    letter-spacing: 0.06px;
-}
-
-.umds-alert__actions {
-    display: flex;
-    gap: 8px;
-    padding-top: 8px;
-    align-items: flex-start;
-}
-
-.umds-alert__close {
-    all: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: opacity 0.2s ease, background-color 0.2s ease;
-}
-
-.umds-alert__close:hover,
-.umds-alert__close:focus-visible {
-    opacity: 0.8;
-    background-color: rgba(0, 0, 0, 0.05); /* very soft fallback highlight */
-}
-
-.umds-alert__close:focus-visible {
-    outline: 2px solid var(--umds-semantic-color-primary-pure);
-    outline-offset: 1px;
-}
-
-/* ----------------------------------------
-   Theme Variantes: SOFT
-   ---------------------------------------- */
-
-/* Neutral Soft */
-.umds-alert--soft.umds-alert--neutral {
-    background-color: var(--umds-semantic-color-background-white, white);
-    color: var(--umds-semantic-color-neutral-dark-pure, #333);
-}
-
-/* Warning Soft (Uses info tokens on 1ds standard for warning logic from figma) */
-.umds-alert--soft.umds-alert--warning {
-    background-color: var(--umds-semantic-color-feedback-info-light, #ffe9d9);
-    border: 1px solid var(--umds-semantic-color-feedback-info-pure, #db6816);
-    color: var(--umds-semantic-color-feedback-info-dark, #99470c);
-}
-
-/* Success Soft */
-.umds-alert--soft.umds-alert--success {
-    background-color: var(--umds-semantic-color-feedback-positive-light, #cef2e1);
-    border: 1px solid var(--umds-semantic-color-feedback-positive-pure, #0f874e);
-    color: var(--umds-semantic-color-feedback-positive-dark, #0f4c30);
-}
-
-/* Error Soft */
-.umds-alert--soft.umds-alert--error {
-    background-color: var(--umds-semantic-color-feedback-negative-light, #ffe6ea);
-    border: 1px solid var(--umds-semantic-color-feedback-negative-pure, #b2132e);
-    color: var(--umds-semantic-color-feedback-negative-dark, #801224);
-}
-
-/* ----------------------------------------
-   Theme Variantes: SOLID
-   ---------------------------------------- */
-
-/* Neutral Solid */
-.umds-alert--solid.umds-alert--neutral {
-    background-color: var(--umds-semantic-color-neutral-dark-pure, #333333);
-    color: var(--umds-semantic-color-neutral-light-pure, #ffffff);
-}
-
-/* Warning Solid */
-.umds-alert--solid.umds-alert--warning {
-    background-color: var(--umds-semantic-color-feedback-info-pure, #db6816);
-    color: var(--umds-semantic-color-neutral-light-pure, #ffffff);
-}
-
-/* Success Solid */
-.umds-alert--solid.umds-alert--success {
-    background-color: var(--umds-semantic-color-feedback-positive-pure, #0f874e);
-    color: var(--umds-semantic-color-neutral-light-pure, #ffffff);
-}
-
-/* Error Solid */
-.umds-alert--solid.umds-alert--error {
-    background-color: var(--umds-semantic-color-feedback-negative-pure, #b2132e);
-    color: var(--umds-semantic-color-neutral-light-pure, #ffffff);
-}
-
-/* Overrides for close icon on SOLID */
-.umds-alert--solid .umds-alert__close:hover,
-.umds-alert--solid .umds-alert__close:focus-visible {
-    background-color: rgba(255, 255, 255, 0.15); 
-}

package/dist/components/Alert/Alert.d.ts

@@ -1,65 +0,0 @@
-import './Alert.css';
-/**
- * Componente Alert é utilizado para comunicar mensagens importantes que requerem a atenção imediata do usuário.
- * Pode indicar sucessos, avisos, erros ou informações relevantes de forma clara e destacada.
- */
-export interface AlertProps {
-    /**
-     * Título do alerta.
-     */
-    title?: string;
-    /**
-     * Propriedade obrigatória do aviso que explica do que se trata o alerta.
-     */
-    description?: string;
-    /**
-     * Tipo/Cor semântico do alerta.
-     * @default 'neutral'
-     */
-    type?: "neutral" | "success" | "warning" | "error";
-    /**
-     * Estilo visual ('soft' para fundos claros; 'solid' para preenchimentos escuros/cores fortes).
-     * @default 'soft'
-     */
-    variant?: "soft" | "solid";
-    /**
-     * Posição vertical na tela para a exibição flutuante.
-     * @default 'top'
-     */
-    verticalPosition?: "top" | "bottom";
-    /**
-     * Posição horizontal na tela para a exibição flutuante.
-     * @default 'right'
-     */
-    horizontalPosition?: "left" | "center" | "right";
-    /**
-     * Tempo em milissegundos que o alerta ficará na tela e desaparecerá.
-     * Se 0, ou não definido, o alerta não desaparece de forma automática.
-     * @default 0
-     */
-    time?: number;
-    /**
-     * Define ou não a visibilidade do ícone de dispensar o aviso.
-     * @default false
-     */
-    dismissable?: boolean;
-    /**
-     * Possibilita uso de elementos HTML/Componentes JSX ou text simples no bloco de ação (links/etc).
-     */
-    content?: any;
-    /**
-     * Slot principal no Mitosis para o custom content generalizado.
-     */
-    children?: any;
-    /**
-     * Permite sobrescrever classes customizadas na raiz do container do alerta
-     */
-    className?: string;
-    /**
-     * Evento acionado ao clicar para fechar o alerta
-     */
-    onClose?: (event?: any) => void;
-    [key: string]: any;
-}
-declare function Alert(props: AlertProps): import("react/jsx-runtime").JSX.Element;
-export default Alert;

package/dist/components/Alert/Alert.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import './Alert.css';
-"use client";
-import { useState, useEffect } from "react";
-import Icon from "../Icon/Icon";
-import Text from "../Text/Text";
-function Alert(props) {
-    const [visible, setVisible] = useState(() => true);
-    const [timeoutId, setTimeoutId] = useState(() => 0);
-    function classes() {
-        return [
-            "umds-alert",
-            `umds-alert--${props.type || "neutral"}`,
-            `umds-alert--${props.variant || "soft"}`,
-            `umds-alert--${props.verticalPosition || "top"}-${props.horizontalPosition || "right"}`,
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    function iconName() {
-        const currentType = props.type || "neutral";
-        if (currentType === "success")
-            return "check-circle";
-        if (currentType === "error")
-            return "xmark-circle";
-        if (currentType === "warning")
-            return "warning-triangle";
-        return "info-circle";
-    }
-    function handleClose(event) {
-        if (event)
-            event.stopPropagation();
-        setVisible(false);
-        if (props.onClose) {
-            props.onClose(event);
-        }
-    }
-    useEffect(() => {
-        const timeProp = typeof props.time === "number" ? props.time : 0;
-        if (timeProp > 0) {
-            setTimeoutId(setTimeout(() => {
-                handleClose(null);
-            }, timeProp));
-        }
-    }, []);
-    useEffect(() => {
-        return () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, []);
-    return (_jsx(_Fragment, { children: visible ? (_jsx(_Fragment, { children: _jsxs("div", { role: "alert", ...props, className: classes(), children: [_jsx("div", { className: "umds-alert__icon-wrapper", children: _jsx(Icon, { variant: "inherit", size: "md", name: iconName() }) }), _jsxs("div", { className: "umds-alert__content", children: [props.title ? (_jsx("div", { className: "umds-alert__title-container", children: _jsx(Text, { variant: "body2", as: "p", className: "umds-alert__title-text", children: props.title }) })) : null, props.description ? (_jsx(Text, { variant: "caption", as: "p", className: "umds-alert__description-text", children: props.description })) : null, props.content || props.children ? (_jsx("div", { className: "umds-alert__actions", children: _jsx(_Fragment, { children: props.content || "{props.content || props.children}" }) })) : null] }), props.dismissable ? (_jsx("button", { type: "button", "aria-label": "Dispensar alerta", className: "umds-alert__close", onClick: (event) => handleClose(event), children: _jsx(Icon, { name: "nav-arrow-up", variant: "inherit", size: "md" }) })) : null] }) })) : null }));
-}
-export default Alert;