@aurea-uds/react 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/actions.d.ts +35 -7
  2. package/dist/actions.js +76 -7
  3. package/dist/communication.js +3 -2
  4. package/dist/data-grid.js +149 -9
  5. package/dist/disclosure.d.ts +9 -0
  6. package/dist/disclosure.js +19 -0
  7. package/dist/escala.d.ts +26 -0
  8. package/dist/escala.js +17 -0
  9. package/dist/feedback-client.d.ts +5 -2
  10. package/dist/feedback-client.js +28 -2
  11. package/dist/file-input.js +2 -2
  12. package/dist/graph.js +8 -3
  13. package/dist/identity-client.d.ts +2 -1
  14. package/dist/identity-client.js +6 -2
  15. package/dist/index.d.ts +5 -3
  16. package/dist/index.js +11 -2
  17. package/dist/inputs-client.d.ts +28 -11
  18. package/dist/inputs-client.js +46 -18
  19. package/dist/inputs.d.ts +1 -0
  20. package/dist/inputs.js +4 -0
  21. package/dist/internal.d.ts +24 -2
  22. package/dist/internal.js +30 -1
  23. package/dist/layout-client.d.ts +4 -0
  24. package/dist/layout-client.js +41 -1
  25. package/dist/layout.d.ts +2 -1
  26. package/dist/layout.js +3 -1
  27. package/dist/markup.d.ts +46 -14
  28. package/dist/markup.js +67 -17
  29. package/dist/navigation-client.d.ts +8 -2
  30. package/dist/navigation-client.js +60 -3
  31. package/dist/overlays.d.ts +79 -4
  32. package/dist/overlays.js +65 -6
  33. package/dist/pure.d.ts +98 -0
  34. package/dist/pure.js +120 -2
  35. package/dist/qrcode.d.ts +2 -1
  36. package/dist/qrcode.js +3 -2
  37. package/dist/responsivo-runtime.d.ts +20 -0
  38. package/dist/responsivo-runtime.js +201 -0
  39. package/dist/system.d.ts +12 -4
  40. package/dist/system.js +86 -8
  41. package/package.json +5 -5
package/dist/system.js CHANGED
@@ -7,7 +7,14 @@ import React from "react";
7
7
  import { Toast as BaseToast } from "@base-ui/react/toast";
8
8
  import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
9
9
  import { DirectionProvider } from "@base-ui/react/direction-provider";
10
- import { cx, StringsContext, SpriteContext, PortalContext, defaultStrings, defaultSpriteUrl, useSpriteUrl, useAureaStrings, usePortalContainer } from "./internal.js";
10
+ import { peleDoEixo } from "./pure.js";
11
+ import { cx, StringsContext, SpriteContext, PortalContext, ThemeContext, DensityContext, DentroDoProviderContext, usePortalContainer, defaultStrings, defaultSpriteUrl, useSpriteUrl, useAureaStrings } from "./internal.js";
12
+ // `theme` e `density` seguem a convenção controlado/não-controlado do resto da biblioteca
13
+ // (`Toggle`, `ToggleGroup`): passe `theme` para mandar, `defaultTheme` para semear, e ouça por
14
+ // `onThemeChange`. Sem nenhum dos dois, o provider ADOTA o que o documento já trouxer no
15
+ // `<html>` — e essa é a parte que importa: o `data-theme` do markup existe para não haver
16
+ // piscada de tema no carregamento, e um provider que o sobrescrevesse na primeira pintura
17
+ // reintroduziria exatamente a piscada que ele evita.
11
18
  // `portalContainer` (achado B7, Parte C do PLANO-1.0): onde TODO popup da biblioteca é montado.
12
19
  // Configuração de aplicação, então entra aqui uma vez — o mesmo raciocínio do `spriteUrl`, e
13
20
  // pela mesma razão medida: com prop por componente seriam nove sítios repassando a mesma coisa
@@ -15,9 +22,52 @@ import { cx, StringsContext, SpriteContext, PortalContext, defaultStrings, defau
15
22
  // Sem ela nada muda: o Base UI monta no `document.body`, que é o que permite empilhar e
16
23
  // posicionar sem herdar `overflow` nem `transform`. Com ela, o consumidor aponta para um nó
17
24
  // dentro do landmark dele e o conteúdo do popup deixa de ficar fora de qualquer marco.
18
- export function AureaProvider({ children, strings, direction = "ltr", spriteUrl = defaultSpriteUrl, portalContainer }) {
25
+ export function AureaProvider({ children, strings, direction = "ltr", spriteUrl = defaultSpriteUrl, portalContainer, theme, defaultTheme, onThemeChange, density, defaultDensity, onDensityChange }) {
19
26
  const value = React.useMemo(() => strings ? { ...defaultStrings, ...strings } : defaultStrings, [strings]);
20
- return _jsx(StringsContext.Provider, { value: value, children: _jsx(SpriteContext.Provider, { value: spriteUrl, children: _jsx(PortalContext.Provider, { value: portalContainer, children: _jsx(DirectionProvider, { direction: direction, children: _jsx(BaseToast.Provider, { children: _jsxs(BaseTooltip.Provider, { children: [children, _jsx(AureaToastViewport, {})] }) }) }) }) }) });
27
+ const temaCtx = useEixoDoDocumento("theme", theme, defaultTheme, onThemeChange);
28
+ const densCtx = useEixoDoDocumento("density", density, defaultDensity, onDensityChange);
29
+ const tema = React.useMemo(() => ({ theme: temaCtx.valor, setTheme: temaCtx.set,
30
+ // `toggleTheme` existe porque é o gesto real: um botão de tema não escolhe entre dois
31
+ // valores, ele inverte o atual. Deixar isso para o consumidor é como o catálogo e os docs
32
+ // acabaram com duas implementações divergentes da mesma coisa.
33
+ // 🔴 ERA `valor==="light"?"dark":"light"`, e o caso "ninguém escolheu ainda" saía INVERTIDO:
34
+ // com `valor` indefinido aquilo dava `light`, então quem está no claro do sistema clicava e
35
+ // NÃO VIA NADA ACONTECER — exatamente o defeito contra o qual o comentário do `useAureaTheme`
36
+ // avisa, 90 linhas abaixo, e que um teste de lá já cobrava. Os dois `toggleTheme` da
37
+ // biblioteca discordavam no mesmo caso de borda.
38
+ // ⚠ Achado em 09/09/2026 SÓ porque o `useAureaTheme` passou a delegar para cá: a divergência
39
+ // existia desde sempre e nenhum teste a pegava, porque cada metade era testada sozinha.
40
+ // Agora a regra é uma: desconhecido resolve para claro e alterna para ESCURO.
41
+ toggleTheme: () => temaCtx.set(temaCtx.valor === "dark" ? "light" : "dark") }), [temaCtx]);
42
+ const dens = React.useMemo(() => ({ density: densCtx.valor, setDensity: densCtx.set }), [densCtx]);
43
+ 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, {})] }) }) }) }) }) }) }) }) });
44
+ }
45
+ /** Um eixo de apresentação que vive no `<html>`: tema ou densidade. A conta é a mesma para os
46
+ * dois, e escrevê-la duas vezes seria o defeito do §21 cometido dentro do próprio conserto
47
+ * dele. */
48
+ function useEixoDoDocumento(attr, controlado, semente, aviso) {
49
+ // Nada de ler `document` durante o render: em SSR ele não existe, e o valor lido no cliente
50
+ // divergiria do renderizado no servidor (erro de hidratação). O estado nasce da semente, e o
51
+ // efeito abaixo adota o que o documento já traz.
52
+ const [interno, setInterno] = React.useState(semente);
53
+ const valor = controlado ?? interno;
54
+ React.useEffect(() => {
55
+ const raiz = document.documentElement;
56
+ if (valor === undefined) {
57
+ const doDoc = raiz.dataset[attr];
58
+ if (doDoc)
59
+ setInterno(doDoc); // adota o markup em vez de sobrescrevê-lo
60
+ return;
61
+ }
62
+ if (raiz.dataset[attr] !== valor)
63
+ raiz.dataset[attr] = valor;
64
+ }, [attr, valor]);
65
+ const set = React.useCallback((v) => {
66
+ if (controlado === undefined)
67
+ setInterno(v);
68
+ aviso?.(v);
69
+ }, [controlado, aviso]);
70
+ return React.useMemo(() => ({ valor, set }), [valor, set]);
21
71
  }
22
72
  export const useToast = () => BaseToast.useToastManager();
23
73
  // useAureaTheme (M7): ler e trocar os DOIS eixos que a Aurea põe no <html> — `data-theme` e
@@ -56,15 +106,43 @@ const semServidor = () => null;
56
106
  export function useAureaTheme() {
57
107
  const theme = React.useSyncExternalStore(assinaHtml, leAtributo("data-theme"), semServidor);
58
108
  const density = React.useSyncExternalStore(assinaHtml, leAtributo("data-density"), semServidor);
109
+ // 🔴 QUEM ESCREVE MUDA CONFORME HAJA PROVIDER — conserto de 09/09/2026, com o defeito medido
110
+ // em `tests/unit/tema-fonte-unica.test.tsx`. Escrever o atributo direto DENTRO de um
111
+ // `AureaProvider` faz o CSS mudar e o contexto ficar para trás: o efeito do provider só
112
+ // reescreve o atributo quando o valor DELE muda, e ele não mudou. Delegar resolve na origem —
113
+ // o provider vira o único que escreve, e o atributo continua saindo dele.
114
+ // ⚠ E a LEITURA continua vindo do DOM nos dois casos, de propósito: o provider escreve o
115
+ // atributo, então o DOM é o denominador comum, e é ele que o CSS obedece.
116
+ const dentroDeProvider = React.useContext(DentroDoProviderContext);
117
+ const ctxTema = React.useContext(ThemeContext);
118
+ const ctxDens = React.useContext(DensityContext);
59
119
  return React.useMemo(() => ({
60
120
  theme, density,
61
- setTheme: (t) => { document.documentElement.dataset.theme = t; },
62
- setDensity: (d) => { document.documentElement.dataset.density = d; },
121
+ setTheme: (t) => {
122
+ if (dentroDeProvider) {
123
+ ctxTema.setTheme(t);
124
+ return;
125
+ }
126
+ document.documentElement.dataset.theme = t;
127
+ },
128
+ setDensity: (d) => {
129
+ if (dentroDeProvider) {
130
+ ctxDens.setDensity(d);
131
+ return;
132
+ }
133
+ document.documentElement.dataset.density = d;
134
+ },
63
135
  // Alternar é sobre o que está NA TELA, então `null` (servidor, ou ninguém escolheu ainda)
64
136
  // resolve para claro e vira escuro — e não o contrário, que deixaria o primeiro clique sem
65
137
  // efeito visível em quem estava no claro do sistema.
66
- toggleTheme: () => { document.documentElement.dataset.theme = theme === "dark" ? "light" : "dark"; },
67
- }), [theme, density]);
138
+ toggleTheme: () => {
139
+ if (dentroDeProvider) {
140
+ ctxTema.toggleTheme();
141
+ return;
142
+ }
143
+ document.documentElement.dataset.theme = theme === "dark" ? "light" : "dark";
144
+ },
145
+ }), [theme, density, dentroDeProvider, ctxTema, ctxDens]);
68
146
  }
69
147
  function AureaToastList() {
70
148
  const { toasts } = BaseToast.useToastManager();
@@ -77,4 +155,4 @@ function AureaToastViewport() {
77
155
  }
78
156
  // spriteUrl aqui é OVERRIDE local (dois sprites na mesma página, por exemplo). O normal é
79
157
  // não passar nada e deixar o AureaProvider dizer de onde vêm os glifos.
80
- export function Icon({ name, spriteUrl, size = "md", className, ...props }) { const base = useSpriteUrl(); return _jsx("svg", { "aria-hidden": "true", className: cx("icon", size !== "md" && `icon-${size}`, className), ...props, children: _jsx("use", { href: `${spriteUrl ?? base}#i-${name}` }) }); }
158
+ export function Icon({ name, spriteUrl, size, className, ...props }) { const base = useSpriteUrl(); return _jsx("svg", { "aria-hidden": "true", className: cx("icon", peleDoEixo("icon", size), className), ...props, children: _jsx("use", { href: `${spriteUrl ?? base}#i-${name}` }) }); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurea-uds/react",
3
- "version": "0.5.0",
3
+ "version": "0.7.0",
4
4
  "description": "React components for Aurea UDS. Import @aurea-uds/fonts/css and @aurea-uds/core/css alongside.",
5
5
  "keywords": [
6
6
  "aurea",
@@ -112,9 +112,6 @@
112
112
  "files": [
113
113
  "dist"
114
114
  ],
115
- "scripts": {
116
- "build": "tsc"
117
- },
118
115
  "dependencies": {
119
116
  "@base-ui/react": "^1.6.0"
120
117
  },
@@ -176,5 +173,8 @@
176
173
  "react-day-picker": "^10.0.1",
177
174
  "react-dom": "^19.2.0",
178
175
  "recharts": "^3.10.1"
176
+ },
177
+ "scripts": {
178
+ "build": "tsc"
179
179
  }
180
- }
180
+ }