@aurea-uds/react 0.6.0 → 0.8.0

package/dist/internal.d.ts

@@ -26,6 +26,7 @@ export declare const useDensity: () => {
     density?: AureaDensity;
     setDensity: (d: AureaDensity) => void;
 };
+export declare const DentroDoProviderContext: React.Context<boolean>;
 export declare const PortalContext: React.Context<HTMLElement | null | undefined>;
 export declare const usePortalContainer: () => HTMLElement | null | undefined;
 export interface Reordenavel<E extends HTMLElement> {

package/dist/internal.js

@@ -48,6 +48,17 @@ export const useDensity = () => useContext(DensityContext);
 // Agora tem, e entra pelo provider, UMA vez, como o sprite: é configuração de aplicação, não
 // prop de componente (foi a lição do achado A4, com 52 sítios repassando `spriteUrl` à mão).
 // `undefined` é o default e mantém o comportamento de sempre: `document.body`.
+// 🔴 A SENTINELA DE "ESTOU DENTRO DE UM PROVIDER" — 09/09/2026, e ela existe por um defeito
+// medido, não por precaução. O `useAureaTheme` (porta `/system`) escrevia o `data-theme` no
+// documento DIRETO; o efeito do `AureaProvider` só reescreve o atributo quando o valor DELE muda,
+// e não mudava. Resultado: o CSS ia para claro e o contexto continuava dizendo escuro, então todo
+// componente que lê `useTheme()` renderizava do jeito errado — sem erro, sem aviso, publicado.
+// ⚠ POR QUE UMA SENTINELA E NÃO "olhar o ThemeContext": o padrão dele é
+// `{theme:undefined,setTheme:noop}` DE PROPÓSITO — `useTheme()` fora de um provider devolve isso
+// em vez de lançar, e um componente isolado num teste depende disso. Então o valor do contexto
+// NÃO distingue "sem provider" de "provider que ainda não adotou tema". Só um booleano que
+// apenas o provider fornece distingue.
+export const DentroDoProviderContext = createContext(false);
 export const PortalContext = createContext(undefined);
 export const usePortalContainer = () => useContext(PortalContext);
 export function useReorder({ count, order, onReorder, rowSelector, handleSelector }) {

package/dist/system.js

@@ -8,7 +8,7 @@ import { Toast as BaseToast } from "@base-ui/react/toast";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { DirectionProvider } from "@base-ui/react/direction-provider";
 import { peleDoEixo } from "./pure.js";
-import { cx, StringsContext, SpriteContext, PortalContext, ThemeContext, DensityContext, usePortalContainer, defaultStrings, defaultSpriteUrl, useSpriteUrl, useAureaStrings } from "./internal.js";
+import { cx, StringsContext, SpriteContext, PortalContext, ThemeContext, DensityContext, DentroDoProviderContext, usePortalContainer, defaultStrings, defaultSpriteUrl, useSpriteUrl, useAureaStrings } from "./internal.js";
 // `theme` e `density` seguem a convenção controlado/não-controlado do resto da biblioteca
 // (`Toggle`, `ToggleGroup`): passe `theme` para mandar, `defaultTheme` para semear, e ouça por
 // `onThemeChange`. Sem nenhum dos dois, o provider ADOTA o que o documento já trouxer no
@@ -30,9 +30,17 @@ export function AureaProvider({ children, strings, direction = "ltr", spriteUrl
         // `toggleTheme` existe porque é o gesto real: um botão de tema não escolhe entre dois
         // valores, ele inverte o atual. Deixar isso para o consumidor é como o catálogo e os docs
         // acabaram com duas implementações divergentes da mesma coisa.
-        toggleTheme: () => temaCtx.set(temaCtx.valor === "light" ? "dark" : "light") }), [temaCtx]);
+        // 🔴 ERA `valor==="light"?"dark":"light"`, e o caso "ninguém escolheu ainda" saía INVERTIDO:
+        // com `valor` indefinido aquilo dava `light`, então quem está no claro do sistema clicava e
+        // NÃO VIA NADA ACONTECER — exatamente o defeito contra o qual o comentário do `useAureaTheme`
+        // avisa, 90 linhas abaixo, e que um teste de lá já cobrava. Os dois `toggleTheme` da
+        // biblioteca discordavam no mesmo caso de borda.
+        // ⚠ Achado em 09/09/2026 SÓ porque o `useAureaTheme` passou a delegar para cá: a divergência
+        // existia desde sempre e nenhum teste a pegava, porque cada metade era testada sozinha.
+        // Agora a regra é uma: desconhecido resolve para claro e alterna para ESCURO.
+        toggleTheme: () => temaCtx.set(temaCtx.valor === "dark" ? "light" : "dark") }), [temaCtx]);
     const dens = React.useMemo(() => ({ density: densCtx.valor, setDensity: densCtx.set }), [densCtx]);
-    return _jsx(StringsContext.Provider, { value: value, children: _jsx(SpriteContext.Provider, { value: spriteUrl, children: _jsx(PortalContext.Provider, { value: portalContainer, children: _jsx(ThemeContext.Provider, { value: tema, children: _jsx(DensityContext.Provider, { value: dens, children: _jsx(DirectionProvider, { direction: direction, children: _jsx(BaseToast.Provider, { children: _jsxs(BaseTooltip.Provider, { children: [children, _jsx(AureaToastViewport, {})] }) }) }) }) }) }) }) });
+    return _jsx(DentroDoProviderContext.Provider, { value: true, children: _jsx(StringsContext.Provider, { value: value, children: _jsx(SpriteContext.Provider, { value: spriteUrl, children: _jsx(PortalContext.Provider, { value: portalContainer, children: _jsx(ThemeContext.Provider, { value: tema, children: _jsx(DensityContext.Provider, { value: dens, children: _jsx(DirectionProvider, { direction: direction, children: _jsx(BaseToast.Provider, { children: _jsxs(BaseTooltip.Provider, { children: [children, _jsx(AureaToastViewport, {})] }) }) }) }) }) }) }) }) });
 }
 /** Um eixo de apresentação que vive no `<html>`: tema ou densidade. A conta é a mesma para os
  *  dois, e escrevê-la duas vezes seria o defeito do §21 cometido dentro do próprio conserto
@@ -98,15 +106,43 @@ const semServidor = () => null;
 export function useAureaTheme() {
     const theme = React.useSyncExternalStore(assinaHtml, leAtributo("data-theme"), semServidor);
     const density = React.useSyncExternalStore(assinaHtml, leAtributo("data-density"), semServidor);
+    // 🔴 QUEM ESCREVE MUDA CONFORME HAJA PROVIDER — conserto de 09/09/2026, com o defeito medido
+    // em `tests/unit/tema-fonte-unica.test.tsx`. Escrever o atributo direto DENTRO de um
+    // `AureaProvider` faz o CSS mudar e o contexto ficar para trás: o efeito do provider só
+    // reescreve o atributo quando o valor DELE muda, e ele não mudou. Delegar resolve na origem —
+    // o provider vira o único que escreve, e o atributo continua saindo dele.
+    // ⚠ E a LEITURA continua vindo do DOM nos dois casos, de propósito: o provider escreve o
+    // atributo, então o DOM é o denominador comum, e é ele que o CSS obedece.
+    const dentroDeProvider = React.useContext(DentroDoProviderContext);
+    const ctxTema = React.useContext(ThemeContext);
+    const ctxDens = React.useContext(DensityContext);
     return React.useMemo(() => ({
         theme, density,
-        setTheme: (t) => { document.documentElement.dataset.theme = t; },
-        setDensity: (d) => { document.documentElement.dataset.density = d; },
+        setTheme: (t) => {
+            if (dentroDeProvider) {
+                ctxTema.setTheme(t);
+                return;
+            }
+            document.documentElement.dataset.theme = t;
+        },
+        setDensity: (d) => {
+            if (dentroDeProvider) {
+                ctxDens.setDensity(d);
+                return;
+            }
+            document.documentElement.dataset.density = d;
+        },
         // Alternar é sobre o que está NA TELA, então `null` (servidor, ou ninguém escolheu ainda)
         // resolve para claro e vira escuro — e não o contrário, que deixaria o primeiro clique sem
         // efeito visível em quem estava no claro do sistema.
-        toggleTheme: () => { document.documentElement.dataset.theme = theme === "dark" ? "light" : "dark"; },
-    }), [theme, density]);
+        toggleTheme: () => {
+            if (dentroDeProvider) {
+                ctxTema.toggleTheme();
+                return;
+            }
+            document.documentElement.dataset.theme = theme === "dark" ? "light" : "dark";
+        },
+    }), [theme, density, dentroDeProvider, ctxTema, ctxDens]);
 }
 function AureaToastList() {
     const { toasts } = BaseToast.useToastManager();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "React components for Aurea UDS. Import @aurea-uds/fonts/css and @aurea-uds/core/css alongside.",
   "keywords": [
     "aurea",
@@ -112,9 +112,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsc"
-  },
   "dependencies": {
     "@base-ui/react": "^1.6.0"
   },
@@ -176,5 +173,8 @@
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.0",
     "recharts": "^3.10.1"
+  },
+  "scripts": {
+    "build": "tsc"
   }
-}
+}