@rendra-ui/web 2.4.0 → 2.5.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.
- package/README.md +24 -1
- package/dist/base.css +33 -1
- package/dist/{button-C6rjowQi.js → button-BzJgR2gH.js} +86 -21
- package/dist/button-BzJgR2gH.js.map +1 -0
- package/dist/chart.js +61 -15
- package/dist/chart.js.map +1 -1
- package/dist/cli/auditar.js +1 -1
- package/dist/cli/codigos.js +2 -2
- package/dist/cli/executar-auditar.js +1 -1
- package/dist/cli/help.js +1 -1
- package/dist/cli/trocar.js +2 -2
- package/dist/cli/typescript-loader.js +1 -1
- package/dist/{cn-DXDpTGsu.js → cn-Cw7M5kEP.js} +2 -2
- package/dist/{cn-DXDpTGsu.js.map → cn-Cw7M5kEP.js.map} +1 -1
- package/dist/{components-hp7iWioq.js → components-DkpspH9h.js} +2 -2
- package/dist/{components-hp7iWioq.js.map → components-DkpspH9h.js.map} +1 -1
- package/dist/components.css +169 -33
- package/dist/document-viewer.js +6 -6
- package/dist/document-viewer.js.map +1 -1
- package/dist/{empty-state-CdaDLcsB.js → empty-state-Cdb1vkMT.js} +36 -12
- package/dist/{empty-state-CdaDLcsB.js.map → empty-state-Cdb1vkMT.js.map} +1 -1
- package/dist/features-max--5VEt6M7.js +3 -0
- package/dist/index.js +1062 -339
- package/dist/index.js.map +1 -1
- package/dist/motion-context-5BRIQAJm.js +107 -0
- package/dist/motion-context-5BRIQAJm.js.map +1 -0
- package/dist/{rendra-provider-7jUgUHzR.js → rendra-provider-CRe0XdOU.js} +9 -5
- package/dist/rendra-provider-CRe0XdOU.js.map +1 -0
- package/dist/rich-text-editor.js +4 -4
- package/dist/router-bridge.js +5 -4
- package/dist/router-bridge.js.map +1 -1
- package/dist/tokens.css +63 -15
- package/dist/tooltip-BAMSaGbS.js +224 -0
- package/dist/tooltip-BAMSaGbS.js.map +1 -0
- package/dist/types/components/rendra-provider.d.ts +7 -1
- package/dist/types/components/rendra-router-bridge.d.ts +3 -1
- package/dist/types/components/ui/accordion.d.ts +1 -1
- package/dist/types/components/ui/badge.d.ts +1 -1
- package/dist/types/components/ui/button.d.ts +1 -1
- package/dist/types/components/ui/dropdown-menu.d.ts +5 -5
- package/dist/types/components/ui/picker-panel.d.ts +1 -1
- package/dist/types/components/ui/popover.d.ts +3 -3
- package/dist/types/components/ui/radio-group.d.ts +1 -1
- package/dist/types/components/ui/skeleton.d.ts +5 -1
- package/dist/types/components/ui/stat-card.d.ts +1 -1
- package/dist/types/components/ui/table.d.ts +0 -6
- package/dist/types/components/ui/tooltip.d.ts +1 -1
- package/dist/types/hooks/use-reduced-motion.d.ts +3 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/lib/motion/count.d.ts +17 -0
- package/dist/types/lib/motion/features-max.d.ts +1 -0
- package/dist/types/lib/motion/index.d.ts +5 -0
- package/dist/types/lib/motion/motion-context.d.ts +43 -0
- package/dist/types/lib/motion/native-events.d.ts +16 -0
- package/dist/types/lib/motion/presets.d.ts +92 -0
- package/dist/types/lib/motion/reorder.d.ts +7 -0
- package/dist/types/lib/motion/tokens.d.ts +66 -0
- package/dist/types/lib/motion/use-motion-presets.d.ts +8 -0
- package/dist/{use-breakpoint-Dyp-0E_c.js → use-breakpoint-O9eqFmsF.js} +2 -2
- package/dist/{use-breakpoint-Dyp-0E_c.js.map → use-breakpoint-O9eqFmsF.js.map} +1 -1
- package/dist/use-motion-presets-BrkgL8lG.js +401 -0
- package/dist/use-motion-presets-BrkgL8lG.js.map +1 -0
- package/dist/widget-grid.js +3 -3
- package/package.json +3 -1
- package/dist/button-C6rjowQi.js.map +0 -1
- package/dist/rendra-provider-7jUgUHzR.js.map +0 -1
- package/dist/tooltip-bdmbX6vC.js +0 -105
- package/dist/tooltip-bdmbX6vC.js.map +0 -1
package/README.md
CHANGED
|
@@ -200,13 +200,29 @@ Tudo configurável por props, com o padrão em `src/config/layout.ts`:
|
|
|
200
200
|
|
|
201
201
|
Login, esqueci a senha, verificação em duas etapas (2FA), nova senha, cadastro, painel com indicadores e gráficos, listagem com barra de ferramentas e filtros, detalhe com abas, formulário longo em seções, cadastro em wizard, configurações com navegação interna, criação e edição de registro em drawer (com busca de CNPJ e CEP), tarefas, atendimento omnichannel, agenda, funil de vendas em kanban, painel em widgets, galeria e página 404.
|
|
202
202
|
|
|
203
|
+
### Movimento (opcional, desligado por padrão)
|
|
204
|
+
|
|
205
|
+
O `RendraProvider` (e o `RendraRouterBridge`) aceita a prop `motion`: `'off'` (o padrão) ou `'on'`. Em `'on'` os componentes animam com o Motion (`motion` 14, já em `dependencies`); em `'off'` nada do Motion é montado. A linguagem é uma só: o que se repete dezenas de vezes por dia (tabela, abas, teclado) não anima a entrada; o toque responde em 120 ms; overlays entram em mola sem quique e saem mais rápido que entram, a partir do gatilho; nada parte de `scale(0)`; movimento reduzido vira só opacidade.
|
|
206
|
+
|
|
207
|
+
```tsx
|
|
208
|
+
<RendraProvider motion="on">{/* ... */}</RendraProvider>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
Com React Router, ponha a prop na ponte, que já entrega ao provider o link, o caminho atual e a navegação: `<RendraRouterBridge motion="on">`. Montando o `RendraProvider` direto, ele também exige `linkComponent`, `useCurrentPath`, `navigate` e `goBack`.
|
|
212
|
+
|
|
213
|
+
- **Tokens** (variáveis CSS que o host sobrescreve): `--rendra-duration-press|hover|fast|base|move|slow|draw|pulse`, `--rendra-reveal-enter|stagger|count|draw` (a chegada do painel, mais lenta, de uso único) e as curvas `--rendra-ease-out|in-out|spring|move|drawer`, com os aliases do Tailwind `ease-move` e `ease-drawer`.
|
|
214
|
+
- **Presets** em `src/lib/motion` (`presets.ts`, `tokens.ts`; no registry do shadcn vão todos os arquivos da pasta): `press`, `open`, `sheet`, `tooltip`, `swap`, `indicator`, `move`, `settle`, `reveal`, `stagger`. Os nomes antigos (`fade`, `scale`, `pop`, `slide`, `layout`, `tap`, `bump`) continuam.
|
|
215
|
+
- **Telas de comparação**: `/componentes-motion` (as mesmas seções de `/componentes`, com a chave Ligado/Desligado) e `/dashboard-motion` (painel que chega com contagem, gráficos desenhando e cascata). Ficam fora das suítes de captura.
|
|
216
|
+
- **O `off` também mudou nesta versão** (2.5.0), só em tempo, curva, origem e estado intermediário, nunca em quadro parado: o toque do botão é de 120 ms a 0,97; popover, menu, tooltip e painel do Select nascem do gatilho; toda saída de overlay dura 120 ms; o tooltip em `instant-open` não anima; a bolinha do radio e o check do checkbox partem de 0,9, não de zero; com movimento reduzido os overlays só esmaecem. As 152 capturas de referência não mudam.
|
|
217
|
+
- `npm run test:motion` mede tempo, escala, origem e gesto no navegador (`BASE_URL` para o seu servidor).
|
|
218
|
+
|
|
203
219
|
### Vitrine, Storybook e testes
|
|
204
220
|
|
|
205
221
|
- **Vitrine** na rota `/componentes`: cada componente com variantes, tamanhos e estados (padrão, hover, foco, ativo, desabilitado, carregando, erro) e as regras de composição.
|
|
206
222
|
- **Storybook 10** com mais de 100 stories: viewport de celular por padrão, com tablet e desktop, e alternância de template, paleta e modo claro/escuro na barra.
|
|
207
223
|
- **Testes de layout com Playwright** (`npm run test:layout`): 16 rotas × 5 larguras (360, 390, 768, 1280 e 1920) × 3 templates no modo claro, mais 360 e 1280 no escuro, somando 336 testes. Falham se houver rolagem horizontal, elemento maior que a tela, toque menor que 44px no celular ou erro de JavaScript, e geram capturas de todas as telas.
|
|
208
224
|
- **Testes de acessibilidade com axe-core** (`npm run test:a11y`): 144 testes, todas as rotas nos três templates, claro e escuro, mais a paleta Ardósia e o celular. Falham em qualquer violação WCAG 2.1 A ou AA, inclusive contraste.
|
|
209
|
-
- **Regressão visual** (`npm run test:visual`):
|
|
225
|
+
- **Regressão visual** (`npm run test:visual`): 152 capturas comparadas com a referência aprovada. Pegam cor que mudou, espaçamento que quebrou e ícone que sumiu. As referências são geradas no Linux do CI; depois de uma mudança visual intencional, aplique o rótulo `atualizar-visual` no Pull Request.
|
|
210
226
|
- **Testes unitários e de componente com Vitest e Testing Library** (`npm test`; `npm run test:coverage` com o piso por arquivo): comportamento de Table (ordenação, busca, paginação, seleção, ações em massa, modo remoto e cartões no celular), Select, Input (máscaras, centavos e busca de CEP e CNPJ), Modal, Drawer, campos de formulário e navegação, além de validadores, máscaras, buscas e o gerador de paletas (AA garantido em todas). Cada componente tem o teste ao lado, e ele vai junto quando você copia o componente para outro projeto.
|
|
211
227
|
- **CI no GitHub Actions**: todo Pull Request passa por tipos, lint, formatação, regras, unitários, build, Storybook e os três testes no navegador. A `main` só aceita merge com tudo verde. Os alertas de segurança do GitHub avisam de dependência vulnerável; as atualizações de versão são feitas à mão (veja o `CONTRIBUTING.md`).
|
|
212
228
|
- **Verificador de regras** (`npm run check:rules`): barra cor fixa, valor arbitrário, degrau fora da escala, estilo inline, fonte fixa, `100vh` e arquivos duplicados ou mobile. A mesma varredura, com as 17 regras, roda em qualquer projeto por `npx @rendra-ui/web auditar --all`.
|
|
@@ -459,3 +475,10 @@ Contribuições são bem-vindas pelo fluxo descrito em [CONTRIBUTING.md](CONTRIB
|
|
|
459
475
|
## Créditos
|
|
460
476
|
|
|
461
477
|
Construído sobre Tailwind CSS, shadcn/ui, Radix UI, Lucide, TanStack Table, cmdk, Sonner, React Hook Form, Zod, IMask, React Day Picker, Recharts, Storybook e Playwright. As fontes Poppins, Inter e DM Sans são distribuídas sob a SIL Open Font License. Os símbolos dos templates são ilustrativos. O logotipo é montado pelo componente `BrandLogo` com as cores da paleta ativa.
|
|
478
|
+
|
|
479
|
+
### Ferramentas de movimento
|
|
480
|
+
|
|
481
|
+
A linguagem de movimento do Rendra (tempo, curva, origem, mola e o que não anima) foi desenhada e auditada com duas skills de agente de código. Elas ficam só na máquina de quem desenvolve; o Rendra não as redistribui.
|
|
482
|
+
|
|
483
|
+
- **Emil Kowalski**: as skills `emil-design-eng`, `animate`, `review-animations`, `animation-performance`, `find-animation-opportunities` e `improve-animations`, sob a licença **MIT**. Repositório de origem: [github.com/emilkowalski/skills](https://github.com/emilkowalski/skills). As regras de frequência, de assimetria entre entrada e saída, de origem do gatilho e do orçamento de tempo que o motion deste projeto segue vêm do trabalho dele.
|
|
484
|
+
- **Impeccable**: a skill `impeccable` (modo Operar: `audit`, `polish`, `harden`), sob a licença **Apache 2.0**. Repositório de origem: [github.com/pbakaus/impeccable](https://github.com/pbakaus/impeccable).
|
package/dist/base.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
1
|
+
/*! Rendra Design System v2.5.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
2
|
|
|
3
3
|
@layer base {
|
|
4
4
|
*,
|
|
@@ -241,6 +241,38 @@
|
|
|
241
241
|
animation-iteration-count: 1 !important;
|
|
242
242
|
transition-duration: 0.01ms !important;
|
|
243
243
|
scroll-behavior: auto !important;
|
|
244
|
+
--tw-enter-scale: 1 !important;
|
|
245
|
+
--tw-enter-translate-x: 0 !important;
|
|
246
|
+
--tw-enter-translate-y: 0 !important;
|
|
247
|
+
--tw-enter-rotate: 0 !important;
|
|
248
|
+
--tw-enter-blur: 0 !important;
|
|
249
|
+
--tw-exit-scale: 1 !important;
|
|
250
|
+
--tw-exit-translate-x: 0 !important;
|
|
251
|
+
--tw-exit-translate-y: 0 !important;
|
|
252
|
+
--tw-exit-rotate: 0 !important;
|
|
253
|
+
--tw-exit-blur: 0 !important;
|
|
254
|
+
}
|
|
255
|
+
[data-state='open'],
|
|
256
|
+
[data-state='closed'],
|
|
257
|
+
[data-state='delayed-open'],
|
|
258
|
+
[data-state='instant-open'] {
|
|
259
|
+
animation-duration: var(--rendra-duration-base) !important;
|
|
260
|
+
}
|
|
261
|
+
@keyframes rd-reduced-in {
|
|
262
|
+
from {
|
|
263
|
+
opacity: 0;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
@keyframes rd-reduced-out {
|
|
267
|
+
to {
|
|
268
|
+
opacity: 0;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
[data-state='open'].overflow-hidden {
|
|
272
|
+
animation-name: rd-reduced-in !important;
|
|
273
|
+
}
|
|
274
|
+
[data-state='closed'].overflow-hidden {
|
|
275
|
+
animation-name: rd-reduced-out !important;
|
|
244
276
|
}
|
|
245
277
|
}
|
|
246
278
|
}
|
|
@@ -1,24 +1,14 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
2
|
-
import { t as cn } from "./cn-
|
|
3
|
-
import {
|
|
1
|
+
/*! Rendra Design System v2.5.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { t as cn } from "./cn-Cw7M5kEP.js";
|
|
3
|
+
import { r as useMotionMode, s as usePrefersReducedMotion } from "./motion-context-5BRIQAJm.js";
|
|
4
|
+
import { t as useMotionPresets } from "./use-motion-presets-BrkgL8lG.js";
|
|
5
|
+
import { p as resolveCatalogCode } from "./components-DkpspH9h.js";
|
|
4
6
|
import { Loader2 } from "lucide-react";
|
|
7
|
+
import { m } from "motion/react";
|
|
5
8
|
import { Slot } from "radix-ui";
|
|
9
|
+
import { forwardRef } from "react";
|
|
6
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { forwardRef, useSyncExternalStore } from "react";
|
|
8
11
|
import { cva } from "class-variance-authority";
|
|
9
|
-
//#region src/hooks/use-reduced-motion.ts
|
|
10
|
-
function subscribe(cb) {
|
|
11
|
-
const mq = matchMedia("(prefers-reduced-motion: reduce)");
|
|
12
|
-
mq.addEventListener("change", cb);
|
|
13
|
-
return () => mq.removeEventListener("change", cb);
|
|
14
|
-
}
|
|
15
|
-
function getCurrent() {
|
|
16
|
-
return matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
17
|
-
}
|
|
18
|
-
function usePrefersReducedMotion() {
|
|
19
|
-
return useSyncExternalStore(subscribe, getCurrent, () => false);
|
|
20
|
-
}
|
|
21
|
-
//#endregion
|
|
22
12
|
//#region src/components/ui/spinner.tsx
|
|
23
13
|
var sizeClass = {
|
|
24
14
|
sm: "size-icon-sm",
|
|
@@ -48,13 +38,44 @@ function Spinner({ size = "md", label, className }) {
|
|
|
48
38
|
});
|
|
49
39
|
}
|
|
50
40
|
//#endregion
|
|
41
|
+
//#region src/lib/motion/native-events.ts
|
|
42
|
+
var NATIVE_EVENTS = {
|
|
43
|
+
onDrag: "drag",
|
|
44
|
+
onDragStart: "dragstart",
|
|
45
|
+
onDragEnd: "dragend",
|
|
46
|
+
onAnimationStart: "animationstart"
|
|
47
|
+
};
|
|
48
|
+
/** Separa as quatro chaves em conflito; o resto segue para o elemento do Motion. */
|
|
49
|
+
function splitNativeEvents(props) {
|
|
50
|
+
const native = {};
|
|
51
|
+
const rest = {};
|
|
52
|
+
for (const [key, value] of Object.entries(props)) if (key in NATIVE_EVENTS) native[key] = value;
|
|
53
|
+
else rest[key] = value;
|
|
54
|
+
return {
|
|
55
|
+
native,
|
|
56
|
+
rest
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
/** Liga os manipuladores como ouvintes nativos. Devolve a função que os remove. */
|
|
60
|
+
function bindNativeEvents(el, native) {
|
|
61
|
+
const bound = [];
|
|
62
|
+
for (const [key, type] of Object.entries(NATIVE_EVENTS)) {
|
|
63
|
+
const handler = native[key];
|
|
64
|
+
if (!handler) continue;
|
|
65
|
+
const listener = ((event) => handler(event));
|
|
66
|
+
el.addEventListener(type, listener);
|
|
67
|
+
bound.push([type, listener]);
|
|
68
|
+
}
|
|
69
|
+
return () => bound.forEach(([type, listener]) => el.removeEventListener(type, listener));
|
|
70
|
+
}
|
|
71
|
+
//#endregion
|
|
51
72
|
//#region src/components/ui/button.tsx
|
|
52
73
|
/**
|
|
53
74
|
* Botão único do sistema. Variantes, tamanho, ícone, só ícone, carregamento e
|
|
54
75
|
* largura total são props: nunca crie outro arquivo de botão.
|
|
55
76
|
* Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.
|
|
56
77
|
*/
|
|
57
|
-
var buttonVariants = cva("inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-
|
|
78
|
+
var buttonVariants = cva("inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-(--rendra-duration-press) ease-out select-none active:scale-97 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
58
79
|
variants: {
|
|
59
80
|
variant: {
|
|
60
81
|
primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover hover:text-primary-hover-foreground hover:shadow-md active:bg-primary-hover active:text-primary-hover-foreground active:shadow-sm",
|
|
@@ -106,13 +127,43 @@ var buttonVariants = cva("inline-flex shrink-0 cursor-pointer items-center justi
|
|
|
106
127
|
fullWidth: false
|
|
107
128
|
}
|
|
108
129
|
});
|
|
130
|
+
/**
|
|
131
|
+
* O botão de `on`: `m.button` com toque discreto (whileTap). Os eventos que o Motion toma
|
|
132
|
+
* (`onDrag*` e `onAnimationStart`) saem das props dele e viram ouvintes nativos no elemento,
|
|
133
|
+
* então o consumidor continua recebendo o evento. Só existe em `on`; por isso os hooks de motion
|
|
134
|
+
* moram aqui e o `off` não paga nada.
|
|
135
|
+
*/
|
|
136
|
+
var MotionButton = forwardRef(function MotionButton(props, ref) {
|
|
137
|
+
const presets = useMotionPresets();
|
|
138
|
+
const { native, rest } = splitNativeEvents(props);
|
|
139
|
+
const attach = (el) => {
|
|
140
|
+
assignRef(ref, el);
|
|
141
|
+
if (!el) return;
|
|
142
|
+
const unbind = bindNativeEvents(el, native);
|
|
143
|
+
return () => {
|
|
144
|
+
unbind();
|
|
145
|
+
assignRef(ref, null);
|
|
146
|
+
};
|
|
147
|
+
};
|
|
148
|
+
return /* @__PURE__ */ jsx(m.button, {
|
|
149
|
+
ref: attach,
|
|
150
|
+
whileTap: presets.press.whileTap,
|
|
151
|
+
transition: presets.press.transition,
|
|
152
|
+
...rest
|
|
153
|
+
});
|
|
154
|
+
});
|
|
155
|
+
function assignRef(ref, value) {
|
|
156
|
+
if (typeof ref === "function") ref(value);
|
|
157
|
+
else if (ref) ref.current = value;
|
|
158
|
+
}
|
|
109
159
|
var Button = forwardRef(function Button({ className, variant, size, icon, iconRight, iconOnly = false, loading = false, fullWidth = false, asChild = false, disabled, type = "button", children, ...props }, ref) {
|
|
160
|
+
const on = useMotionMode() === "on";
|
|
110
161
|
const classes = cn(buttonVariants({
|
|
111
162
|
variant,
|
|
112
163
|
size,
|
|
113
164
|
iconOnly,
|
|
114
165
|
fullWidth
|
|
115
|
-
}), className);
|
|
166
|
+
}), on && !asChild && "transition-[color,background-color,border-color,box-shadow] active:scale-100", className);
|
|
116
167
|
const code = resolveCatalogCode("Button", { variant: variant ?? "primary" });
|
|
117
168
|
if (asChild) return /* @__PURE__ */ jsx(Slot.Root, {
|
|
118
169
|
ref,
|
|
@@ -122,6 +173,20 @@ var Button = forwardRef(function Button({ className, variant, size, icon, iconRi
|
|
|
122
173
|
children
|
|
123
174
|
});
|
|
124
175
|
const leading = loading ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) : icon;
|
|
176
|
+
if (on) return /* @__PURE__ */ jsxs(MotionButton, {
|
|
177
|
+
ref,
|
|
178
|
+
type,
|
|
179
|
+
"data-rendra": code,
|
|
180
|
+
className: classes,
|
|
181
|
+
disabled: disabled || loading,
|
|
182
|
+
"aria-busy": loading || void 0,
|
|
183
|
+
...props,
|
|
184
|
+
children: [
|
|
185
|
+
leading,
|
|
186
|
+
iconOnly ? loading ? null : children : children,
|
|
187
|
+
!iconOnly && iconRight
|
|
188
|
+
]
|
|
189
|
+
});
|
|
125
190
|
return /* @__PURE__ */ jsxs("button", {
|
|
126
191
|
ref,
|
|
127
192
|
type,
|
|
@@ -138,6 +203,6 @@ var Button = forwardRef(function Button({ className, variant, size, icon, iconRi
|
|
|
138
203
|
});
|
|
139
204
|
});
|
|
140
205
|
//#endregion
|
|
141
|
-
export {
|
|
206
|
+
export { buttonVariants as n, Spinner as r, Button as t };
|
|
142
207
|
|
|
143
|
-
//# sourceMappingURL=button-
|
|
208
|
+
//# sourceMappingURL=button-BzJgR2gH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-BzJgR2gH.js","names":[],"sources":["../src/components/ui/spinner.tsx","../src/lib/motion/native-events.ts","../src/components/ui/button.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react'\nimport { usePrefersReducedMotion } from '@/hooks/use-reduced-motion'\nimport { cn } from '@/lib/cn'\n\n/*\n * Indicador de carregamento único do sistema (A17 do plano da v2). Substitui qualquer\n * `Loader2 animate-spin` solto em Button, Input e Select. Sem label é decorativo\n * (aria-hidden); com label, anuncia o carregamento a quem usa leitor de tela. Para de girar\n * quando o sistema pede menos movimento.\n */\n\nexport interface SpinnerProps {\n size?: 'sm' | 'md' | 'lg'\n /** Nome do que está carregando. Vazio (padrão): decorativo, sem anúncio de leitor de tela. */\n label?: string\n className?: string\n}\n\nconst sizeClass: Record<NonNullable<SpinnerProps['size']>, string> = {\n sm: 'size-icon-sm',\n md: 'size-icon-md',\n lg: 'size-icon-lg',\n}\n\nexport function Spinner({ size = 'md', label, className }: SpinnerProps) {\n const reduced = usePrefersReducedMotion()\n const icon = (\n <Loader2 aria-hidden className={cn(sizeClass[size], reduced ? '' : 'animate-spin')} />\n )\n\n if (!label) {\n return (\n <span data-rendra=\"SPIN-001\" aria-hidden className={cn('inline-flex', className)}>\n {icon}\n </span>\n )\n }\n\n return (\n <span\n data-rendra=\"SPIN-001\"\n role=\"status\"\n className={cn('inline-flex items-center gap-2', className)}\n >\n {icon}\n <span className=\"sr-only\">{label}</span>\n </span>\n )\n}\n","/*\n * O Motion toma `onDrag`, `onDragStart`, `onDragEnd` e `onAnimationStart` para os gestos e\n * animações dele: tira essas props do DOM e as tipa com outra assinatura. Em `m.button` e\n * `m.li`, o consumidor que passa o evento nativo (HTML5 drag, animationstart do CSS) o perderia.\n * Estes ajudantes separam essas chaves das props e as ligam como ouvintes nativos no elemento.\n */\n\nconst NATIVE_EVENTS = {\n onDrag: 'drag',\n onDragStart: 'dragstart',\n onDragEnd: 'dragend',\n onAnimationStart: 'animationstart',\n} as const\n\ntype NativeKey = keyof typeof NATIVE_EVENTS\ntype Handler = ((event: never) => void) | undefined\n\n/** Separa as quatro chaves em conflito; o resto segue para o elemento do Motion. */\nexport function splitNativeEvents<P extends object>(props: P) {\n const native: Partial<Record<NativeKey, Handler>> = {}\n const rest: Record<string, unknown> = {}\n for (const [key, value] of Object.entries(props)) {\n if (key in NATIVE_EVENTS) native[key as NativeKey] = value as Handler\n else rest[key] = value\n }\n return { native, rest: rest as Omit<P, NativeKey> }\n}\n\n/** Liga os manipuladores como ouvintes nativos. Devolve a função que os remove. */\nexport function bindNativeEvents(el: HTMLElement, native: Partial<Record<NativeKey, Handler>>) {\n const bound: [string, EventListener][] = []\n for (const [key, type] of Object.entries(NATIVE_EVENTS)) {\n const handler = native[key as NativeKey]\n if (!handler) continue\n const listener = ((event: Event) => handler(event as never)) as EventListener\n el.addEventListener(type, listener)\n bound.push([type, listener])\n }\n return () => bound.forEach(([type, listener]) => el.removeEventListener(type, listener))\n}\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { m } from 'motion/react'\nimport { Slot } from 'radix-ui'\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react'\nimport { resolveCatalogCode } from '@/catalog/components'\nimport { Spinner } from '@/components/ui/spinner'\nimport { cn } from '@/lib/cn'\nimport { useMotionMode, useMotionPresets } from '@/lib/motion'\nimport { bindNativeEvents, splitNativeEvents } from '@/lib/motion/native-events'\n\n/**\n * Botão único do sistema. Variantes, tamanho, ícone, só ícone, carregamento e\n * largura total são props: nunca crie outro arquivo de botão.\n * Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.\n */\nexport const buttonVariants = cva(\n 'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-(--rendra-duration-press) ease-out select-none active:scale-97 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n // Hover troca para a cor de hover da marca e eleva um nível; pressionar comprime.\n primary:\n 'bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover hover:text-primary-hover-foreground hover:shadow-md active:bg-primary-hover active:text-primary-hover-foreground active:shadow-sm',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover hover:text-secondary-hover-foreground hover:shadow-md active:bg-secondary-hover active:text-secondary-hover-foreground active:shadow-sm',\n outline:\n 'border border-input bg-card text-foreground hover:border-primary hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n // Transparentes: no hover, assumem a cor primária do template.\n ghost:\n 'text-foreground hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n destructive:\n 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover hover:shadow-md active:bg-destructive-hover active:shadow-sm',\n link: 'min-h-touch min-w-touch text-primary-text underline-offset-4 hover:text-primary-hover hover:underline md:min-h-0 md:min-w-0',\n },\n size: {\n sm: 'h-control-sm px-3 text-sm [&_svg]:size-icon-sm',\n md: 'h-control-md px-4 text-sm [&_svg]:size-icon-sm',\n lg: 'h-control-lg px-6 text-base [&_svg]:size-icon-md',\n },\n iconOnly: { true: 'px-0', false: '' },\n fullWidth: { true: 'w-full', false: '' },\n },\n compoundVariants: [\n { iconOnly: true, size: 'sm', className: 'w-control-sm' },\n { iconOnly: true, size: 'md', className: 'w-control-md' },\n { iconOnly: true, size: 'lg', className: 'w-control-lg' },\n { variant: 'link', className: 'h-auto px-0' },\n ],\n defaultVariants: { variant: 'primary', size: 'md', iconOnly: false, fullWidth: false },\n },\n)\n\ntype Variants = VariantProps<typeof buttonVariants>\n\nexport interface ButtonProps\n extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<Variants, 'iconOnly' | 'fullWidth'> {\n /** Ícone à esquerda do texto (ou o próprio conteúdo, com iconOnly). */\n icon?: ReactNode\n /** Ícone à direita do texto. */\n iconRight?: ReactNode\n /** Botão só com ícone: quadrado, e aria-label passa a ser obrigatório. */\n iconOnly?: boolean\n /** Mostra indicador, bloqueia cliques e marca aria-busy. */\n loading?: boolean\n /** Ocupa toda a largura do contêiner. */\n fullWidth?: boolean\n /** Renderiza o filho (ex.: <Link>) com a aparência de botão. */\n asChild?: boolean\n}\n\ntype MotionButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {\n children: ReactNode\n}\n\n/**\n * O botão de `on`: `m.button` com toque discreto (whileTap). Os eventos que o Motion toma\n * (`onDrag*` e `onAnimationStart`) saem das props dele e viram ouvintes nativos no elemento,\n * então o consumidor continua recebendo o evento. Só existe em `on`; por isso os hooks de motion\n * moram aqui e o `off` não paga nada.\n */\nconst MotionButton = forwardRef<HTMLButtonElement, MotionButtonProps>(\n function MotionButton(props, ref) {\n const presets = useMotionPresets()\n const { native, rest } = splitNativeEvents(props)\n const attach = (el: HTMLButtonElement | null) => {\n assignRef(ref, el)\n if (!el) return\n const unbind = bindNativeEvents(el, native)\n return () => {\n unbind()\n assignRef(ref, null)\n }\n }\n return (\n <m.button\n ref={attach}\n whileTap={presets.press.whileTap}\n transition={presets.press.transition}\n {...rest}\n />\n )\n },\n)\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n if (typeof ref === 'function') ref(value)\n else if (ref) ref.current = value\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n className,\n variant,\n size,\n icon,\n iconRight,\n iconOnly = false,\n loading = false,\n fullWidth = false,\n asChild = false,\n disabled,\n type = 'button',\n children,\n ...props\n },\n ref,\n) {\n if (import.meta.env.DEV && iconOnly && !props['aria-label']) {\n console.warn('Button com iconOnly precisa de aria-label.')\n }\n const on = useMotionMode() === 'on'\n // Em `on` o toque é do whileTap: a classe `active:scale-97` sairia somando com ele, e o\n // `transform` sai da lista de transition (senão o CSS transiciona cada quadro que o Motion grava\n // e o toque chega atrasado). Com asChild nada disso: é só CSS, como em `off`.\n const classes = cn(\n buttonVariants({ variant, size, iconOnly, fullWidth }),\n on &&\n !asChild &&\n 'transition-[color,background-color,border-color,box-shadow] active:scale-100',\n className,\n )\n const code = resolveCatalogCode('Button', { variant: variant ?? 'primary' })\n\n if (asChild) {\n return (\n <Slot.Root ref={ref} data-rendra={code} className={classes} {...props}>\n {children}\n </Slot.Root>\n )\n }\n\n // Ícone dentro do botão segue o tamanho do próprio botão (sm/md -> sm, lg -> md, como o\n // [&_svg]:size-icon-* de buttonVariants já fazia com o Loader2 solto).\n const leading = loading ? <Spinner size={size === 'lg' ? 'md' : 'sm'} /> : icon\n if (on) {\n return (\n <MotionButton\n ref={ref}\n type={type}\n data-rendra={code}\n className={classes}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n {...props}\n >\n {leading}\n {iconOnly ? (loading ? null : children) : children}\n {!iconOnly && iconRight}\n </MotionButton>\n )\n }\n return (\n <button\n ref={ref}\n type={type}\n data-rendra={code}\n className={classes}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n {...props}\n >\n {leading}\n {iconOnly ? (loading ? null : children) : children}\n {!iconOnly && iconRight}\n </button>\n )\n})\n"],"mappings":"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"}
|
package/dist/chart.js
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
2
|
-
import { t as cn } from "./cn-
|
|
3
|
-
import {
|
|
4
|
-
import { t as
|
|
5
|
-
import {
|
|
1
|
+
/*! Rendra Design System v2.5.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { t as cn } from "./cn-Cw7M5kEP.js";
|
|
3
|
+
import { i as useRevealScope, r as useMotionMode } from "./motion-context-5BRIQAJm.js";
|
|
4
|
+
import { n as toCubicBezier, t as useMotionPresets } from "./use-motion-presets-BrkgL8lG.js";
|
|
5
|
+
import { p as resolveCatalogCode } from "./components-DkpspH9h.js";
|
|
6
|
+
import { t as Button } from "./button-BzJgR2gH.js";
|
|
7
|
+
import { n as useBreakpoint } from "./use-breakpoint-O9eqFmsF.js";
|
|
6
8
|
import { ArrowDown, BarChart3, List } from "lucide-react";
|
|
7
|
-
import {
|
|
9
|
+
import { m } from "motion/react";
|
|
8
10
|
import { useId, useRef, useState } from "react";
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
12
|
import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Legend, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
|
10
13
|
//#region src/components/ui/chart.tsx
|
|
11
14
|
var palette = [
|
|
@@ -75,6 +78,10 @@ function Gauge({ value, max, min = 0, target, zones = defaultZones, label, value
|
|
|
75
78
|
const tone = (zones.find((z) => frac <= z.to) ?? zones[zones.length - 1])?.tone ?? "primary";
|
|
76
79
|
const gradientId = useId();
|
|
77
80
|
const [ex, ey] = point(frac, 74);
|
|
81
|
+
const on = useMotionMode() === "on";
|
|
82
|
+
const presets = useMotionPresets();
|
|
83
|
+
const reveal = useRevealScope();
|
|
84
|
+
const [sx, sy] = point(0, 74);
|
|
78
85
|
return /* @__PURE__ */ jsxs("figure", {
|
|
79
86
|
"data-rendra": resolveCatalogCode("Chart", { type: "gauge" }),
|
|
80
87
|
className: cn("flex min-w-0 flex-col items-center gap-2", className),
|
|
@@ -125,15 +132,32 @@ function Gauge({ value, max, min = 0, target, zones = defaultZones, label, value
|
|
|
125
132
|
strokeWidth: 20,
|
|
126
133
|
strokeLinecap: "round"
|
|
127
134
|
}),
|
|
128
|
-
/* @__PURE__ */ jsx(
|
|
135
|
+
on ? /* @__PURE__ */ jsx(m.line, {
|
|
136
|
+
x1: CX,
|
|
137
|
+
y1: CY,
|
|
138
|
+
initial: {
|
|
139
|
+
x2: sx,
|
|
140
|
+
y2: sy
|
|
141
|
+
},
|
|
142
|
+
animate: {
|
|
143
|
+
x2: ex,
|
|
144
|
+
y2: ey
|
|
145
|
+
},
|
|
146
|
+
transition: {
|
|
147
|
+
duration: reveal ? presets.tokens.reveal.draw : presets.tokens.duration.draw,
|
|
148
|
+
ease: presets.tokens.ease.out
|
|
149
|
+
},
|
|
150
|
+
stroke: "var(--rendra-foreground)",
|
|
151
|
+
strokeWidth: 4,
|
|
152
|
+
strokeLinecap: "round"
|
|
153
|
+
}) : /* @__PURE__ */ jsx("line", {
|
|
129
154
|
x1: CX,
|
|
130
155
|
y1: CY,
|
|
131
156
|
x2: ex,
|
|
132
157
|
y2: ey,
|
|
133
158
|
stroke: "var(--rendra-foreground)",
|
|
134
159
|
strokeWidth: 4,
|
|
135
|
-
strokeLinecap: "round"
|
|
136
|
-
className: "transition-all duration-700"
|
|
160
|
+
strokeLinecap: "round"
|
|
137
161
|
}),
|
|
138
162
|
/* @__PURE__ */ jsx("circle", {
|
|
139
163
|
cx: CX,
|
|
@@ -195,6 +219,9 @@ function Gauge({ value, max, min = 0, target, zones = defaultZones, label, value
|
|
|
195
219
|
});
|
|
196
220
|
}
|
|
197
221
|
function Funnel({ stages, valueFormatter = fmtDefault, className, ...aria }) {
|
|
222
|
+
const on = useMotionMode() === "on";
|
|
223
|
+
const presets = useMotionPresets();
|
|
224
|
+
const Root = on ? m.figure : "figure";
|
|
198
225
|
const n = stages.length;
|
|
199
226
|
const top = stages[0]?.value || 1;
|
|
200
227
|
const last = stages[n - 1];
|
|
@@ -207,10 +234,11 @@ function Funnel({ stages, valueFormatter = fmtDefault, className, ...aria }) {
|
|
|
207
234
|
return next && s.value > 0 ? next.value / s.value * 100 : null;
|
|
208
235
|
});
|
|
209
236
|
const worst = rates.reduce((w, r, i) => r !== null && (w === null || r < (rates[w] ?? Infinity)) ? i : w, null);
|
|
210
|
-
return /* @__PURE__ */ jsxs(
|
|
237
|
+
return /* @__PURE__ */ jsxs(Root, {
|
|
211
238
|
"data-rendra": resolveCatalogCode("Chart", { type: "funnel" }),
|
|
212
239
|
className: cn("flex min-w-0 flex-col items-center", className),
|
|
213
240
|
"aria-label": aria["aria-label"],
|
|
241
|
+
...on ? presets.fade : {},
|
|
214
242
|
children: [
|
|
215
243
|
/* @__PURE__ */ jsx("ol", {
|
|
216
244
|
className: "flex w-full flex-col items-center",
|
|
@@ -276,6 +304,19 @@ function Funnel({ stages, valueFormatter = fmtDefault, className, ...aria }) {
|
|
|
276
304
|
}
|
|
277
305
|
function Cartesian({ type, data, xKey, series, stacked, colorByCategory, valueFormatter = fmtDefault, height = "md", listThreshold = 8, className, ...aria }) {
|
|
278
306
|
const { isMobile } = useBreakpoint();
|
|
307
|
+
const motion = useMotionMode();
|
|
308
|
+
const presets = useMotionPresets();
|
|
309
|
+
const reveal = useRevealScope();
|
|
310
|
+
const [drawn, setDrawn] = useState(false);
|
|
311
|
+
const ended = useRef(0);
|
|
312
|
+
const animated = type === "pie" ? 1 : series.length;
|
|
313
|
+
const draw = motion === "on" ? {
|
|
314
|
+
animationDuration: Math.round((reveal ? presets.tokens.reveal.draw : presets.tokens.duration.draw) * 1e3),
|
|
315
|
+
animationEasing: toCubicBezier(presets.tokens.ease.out),
|
|
316
|
+
onAnimationEnd: () => {
|
|
317
|
+
if (++ended.current >= animated) setDrawn(true);
|
|
318
|
+
}
|
|
319
|
+
} : {};
|
|
279
320
|
const [asList, setAsList] = useState(false);
|
|
280
321
|
const [animate, setAnimate] = useState(() => !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
|
|
281
322
|
const firstWidth = useRef(null);
|
|
@@ -360,7 +401,8 @@ function Cartesian({ type, data, xKey, series, stacked, colorByCategory, valueFo
|
|
|
360
401
|
0
|
|
361
402
|
],
|
|
362
403
|
maxBarSize: 40,
|
|
363
|
-
isAnimationActive: animate,
|
|
404
|
+
isAnimationActive: animate && !drawn,
|
|
405
|
+
...draw,
|
|
364
406
|
children: colorByCategory && data.map((_, j) => /* @__PURE__ */ jsx(Cell, { fill: colorVar(j + 1) }, j))
|
|
365
407
|
}, s.key);
|
|
366
408
|
let chart;
|
|
@@ -375,7 +417,8 @@ function Cartesian({ type, data, xKey, series, stacked, colorByCategory, valueFo
|
|
|
375
417
|
outerRadius: "85%",
|
|
376
418
|
paddingAngle: 2,
|
|
377
419
|
stroke: "var(--rendra-card)",
|
|
378
|
-
isAnimationActive: animate,
|
|
420
|
+
isAnimationActive: animate && !drawn,
|
|
421
|
+
...draw,
|
|
379
422
|
children: data.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: colorVar(i + 1) }, i))
|
|
380
423
|
}),
|
|
381
424
|
tooltip,
|
|
@@ -414,7 +457,8 @@ function Cartesian({ type, data, xKey, series, stacked, colorByCategory, valueFo
|
|
|
414
457
|
strokeWidth: 0
|
|
415
458
|
},
|
|
416
459
|
activeDot: { r: 5 },
|
|
417
|
-
isAnimationActive: animate
|
|
460
|
+
isAnimationActive: animate && !drawn,
|
|
461
|
+
...draw
|
|
418
462
|
}, s.key))
|
|
419
463
|
]
|
|
420
464
|
});
|
|
@@ -449,7 +493,8 @@ function Cartesian({ type, data, xKey, series, stacked, colorByCategory, valueFo
|
|
|
449
493
|
stroke: colors[i],
|
|
450
494
|
strokeWidth: 2,
|
|
451
495
|
fill: `url(#area-${s.key})`,
|
|
452
|
-
isAnimationActive: animate
|
|
496
|
+
isAnimationActive: animate && !drawn,
|
|
497
|
+
...draw
|
|
453
498
|
}, s.key))
|
|
454
499
|
]
|
|
455
500
|
});
|
|
@@ -469,7 +514,8 @@ function Cartesian({ type, data, xKey, series, stacked, colorByCategory, valueFo
|
|
|
469
514
|
strokeWidth: 2,
|
|
470
515
|
dot: false,
|
|
471
516
|
activeDot: { r: 4 },
|
|
472
|
-
isAnimationActive: animate
|
|
517
|
+
isAnimationActive: animate && !drawn,
|
|
518
|
+
...draw
|
|
473
519
|
}, s.key))
|
|
474
520
|
]
|
|
475
521
|
});
|
package/dist/chart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.js","names":[],"sources":["../src/components/ui/chart.tsx"],"sourcesContent":["import { ArrowDown, BarChart3, List as ListIcon } from 'lucide-react'\nimport { useId, useRef, useState, type CSSProperties } from 'react'\nimport {\n Area,\n AreaChart,\n Bar,\n BarChart,\n CartesianGrid,\n Cell,\n ComposedChart,\n Legend,\n Line,\n LineChart,\n Pie,\n PieChart,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts'\nimport { resolveCatalogCode } from '@/catalog/components'\nimport { Button } from '@/components/ui/button'\nimport { useBreakpoint } from '@/hooks/use-breakpoint'\nimport { cn } from '@/lib/cn'\n\n/*\n * Gráfico único do sistema. O tipo é a prop type, nunca um componente novo:\n * line, area, bar, pie séries sobre categorias (Recharts)\n * combo barras e linhas juntas (ex.: receita em barras e meta em linha)\n * gauge velocímetro de meta: valor, máximo, meta e faixas de cor\n * funnel funil de etapas com a taxa de conversão entre elas\n * Cores sempre do template (--chart-1 a --chart-5). Mobile: legenda abaixo, eixos\n * simplificados, lista de valores quando há muitos pontos; o funil empilha rótulo e barra.\n */\n\nexport interface ChartSeries {\n /** Chave no objeto de dados. */\n key: string\n label: string\n /** Índice da cor do template (1 a 5). Padrão: na ordem das séries. */\n color?: 1 | 2 | 3 | 4 | 5\n /** No type=\"combo\": desenha a série como barra (padrão) ou linha. */\n kind?: 'bar' | 'line'\n}\n\ninterface BaseProps {\n valueFormatter?: (n: number) => string\n /** Altura: sm (12rem), md (16rem) ou fill (a altura do contêiner, como num widget). */\n height?: 'sm' | 'md' | 'fill'\n 'aria-label': string\n className?: string\n}\n\nexport interface CartesianChartProps extends BaseProps {\n type: 'line' | 'bar' | 'area' | 'pie' | 'combo'\n data: Record<string, string | number>[]\n /** Chave da categoria (eixo X ou fatias da pizza). */\n xKey: string\n series: ChartSeries[]\n /** Barras empilhadas (bar e combo). */\n stacked?: boolean\n /** Barra de uma série só com uma cor por categoria. */\n colorByCategory?: boolean\n /** Acima deste número de pontos, o mobile oferece ver como lista. */\n listThreshold?: number\n}\n\nexport interface GaugeZone {\n /** Fim da faixa, de 0 a 1 do máximo. */\n to: number\n tone: 'error' | 'warning' | 'success' | 'primary' | 'neutral'\n}\n\nexport interface GaugeChartProps extends BaseProps {\n type: 'gauge'\n value: number\n max: number\n min?: number\n /** Meta: marcada no arco e usada no percentual atingido. */\n target?: number\n /** Faixas de cor do arco. Padrão: vermelho até 60%, amarelo até 90%, verde até o fim. */\n zones?: GaugeZone[]\n /** Texto abaixo do valor (ex.: \"Receita do mês\"). */\n label?: string\n}\n\nexport interface FunnelStage {\n label: string\n value: number\n}\n\nexport interface FunnelChartProps extends BaseProps {\n type: 'funnel'\n stages: FunnelStage[]\n}\n\nexport type ChartProps = CartesianChartProps | GaugeChartProps | FunnelChartProps\n\n// Lê as variáveis do tema direto (as --color-* do Tailwind são inline e não existem no CSS).\nconst palette = [\n '--rendra-chart-1',\n '--rendra-chart-2',\n '--rendra-chart-3',\n '--rendra-chart-4',\n '--rendra-chart-5',\n '--rendra-ring',\n]\nconst colorVar = (i: number) => `var(${palette[(i - 1) % palette.length]})`\nconst fmtDefault = (n: number) => n.toLocaleString('pt-BR')\nconst pct = (n: number) =>\n `${n.toLocaleString('pt-BR', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}%`\n\nexport function Chart(props: ChartProps) {\n if (props.type === 'gauge') return <Gauge {...props} />\n if (props.type === 'funnel') return <Funnel {...props} />\n return <Cartesian {...props} />\n}\n\n/* ================================================================ velocímetro */\n\nconst defaultZones: GaugeZone[] = [\n { to: 0.6, tone: 'error' },\n { to: 0.9, tone: 'warning' },\n { to: 1, tone: 'success' },\n]\n\nconst zoneBadge: Record<GaugeZone['tone'], string> = {\n error: 'bg-destructive-soft text-destructive-soft-foreground',\n warning: 'bg-warning-soft text-warning-soft-foreground',\n success: 'bg-success-soft text-success-soft-foreground',\n primary: 'bg-primary-soft text-primary-soft-foreground',\n neutral: 'bg-muted text-foreground',\n}\nconst zoneText: Record<GaugeZone['tone'], string> = {\n error: 'Abaixo da meta',\n warning: 'Atenção',\n success: 'No verde',\n primary: 'Em andamento',\n neutral: 'Em andamento',\n}\n\n// Meio círculo (180°), da esquerda para a direita por cima, centro em (120, 120), raio 100.\nconst CX = 120\nconst CY = 120\nconst R = 100\nconst point = (frac: number, r = R) => {\n const a = Math.PI * (1 - frac)\n return [CX + r * Math.cos(a), CY - r * Math.sin(a)] as const\n}\nconst arc = (from: number, to: number, r = R) => {\n const [x1, y1] = point(from, r)\n const [x2, y2] = point(to, r)\n return `M ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r} ${r} 0 0 1 ${x2.toFixed(2)} ${y2.toFixed(2)}`\n}\n\nfunction Gauge({\n value,\n max,\n min = 0,\n target,\n zones = defaultZones,\n label,\n valueFormatter = fmtDefault,\n className,\n ...aria\n}: GaugeChartProps) {\n const range = Math.max(1, max - min)\n const clamp = (n: number) => Math.min(1, Math.max(0, n))\n // Com meta, o ponteiro mostra o percentual da meta (100% = meta batida); sem meta, do máximo.\n const reached = target ? (value / target) * 100 : null\n const frac = reached !== null ? clamp(reached / 100) : clamp((value - min) / range)\n const zone = zones.find((z) => frac <= z.to) ?? zones[zones.length - 1]\n const tone = zone?.tone ?? 'primary'\n const gradientId = useId()\n const [ex, ey] = point(frac, R - 26)\n\n return (\n <figure\n data-rendra={resolveCatalogCode('Chart', { type: 'gauge' })}\n className={cn('flex min-w-0 flex-col items-center gap-2', className)}\n aria-label={aria['aria-label']}\n >\n <div\n role=\"meter\"\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={Math.round(frac * 100)}\n aria-valuetext={`${reached !== null ? `${pct(reached)} da meta` : valueFormatter(value)}, ${zoneText[tone]}`}\n aria-label={aria['aria-label']}\n className=\"w-full max-w-xs\"\n >\n <svg viewBox=\"0 0 240 140\" className=\"w-full\" aria-hidden>\n <defs>\n {/* Degradê contínuo: vermelho, laranja, amarelo e verde */}\n <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n <stop offset=\"0%\" stopColor=\"var(--rendra-meter-low)\" />\n <stop\n offset=\"38%\"\n stopColor=\"color-mix(in oklab, var(--rendra-meter-low), var(--rendra-meter-mid))\"\n />\n <stop offset=\"62%\" stopColor=\"var(--rendra-meter-mid)\" />\n <stop offset=\"100%\" stopColor=\"var(--rendra-meter-high)\" />\n </linearGradient>\n </defs>\n <path\n d={arc(0, 1)}\n fill=\"none\"\n stroke={`url(#${gradientId})`}\n strokeWidth={20}\n strokeLinecap=\"round\"\n />\n {/* Ponteiro fino, do centro até perto do arco */}\n <line\n x1={CX}\n y1={CY}\n x2={ex}\n y2={ey}\n stroke=\"var(--rendra-foreground)\"\n strokeWidth={4}\n strokeLinecap=\"round\"\n className=\"transition-all duration-700\"\n />\n <circle cx={CX} cy={CY} r={9} fill=\"var(--rendra-foreground)\" />\n <circle cx={CX} cy={CY} r={4} fill=\"var(--rendra-card)\" />\n <text\n x={point(0)[0]}\n y={CY + 18}\n textAnchor=\"middle\"\n fontSize={11}\n fill=\"var(--rendra-muted-foreground)\"\n >\n 0%\n </text>\n <text\n x={point(1)[0]}\n y={CY + 18}\n textAnchor=\"middle\"\n fontSize={11}\n fill=\"var(--rendra-muted-foreground)\"\n >\n 100%\n </text>\n </svg>\n </div>\n <div className=\"flex flex-col items-center gap-1 text-center\">\n <span className=\"text-3xl font-semibold tabular-nums\">\n {reached !== null ? `${Math.round(reached)}%` : valueFormatter(value)}\n </span>\n {label && <span className=\"text-sm font-medium\">{label}</span>}\n {target !== undefined && (\n <span className=\"flex flex-col text-sm text-muted-foreground tabular-nums\">\n <span>Meta: {valueFormatter(target)}</span>\n <span>Realizado: {valueFormatter(value)}</span>\n </span>\n )}\n <span className={cn('mt-1 rounded-full px-3 py-1 text-xs font-semibold', zoneBadge[tone])}>\n {zoneText[tone]}\n </span>\n </div>\n <figcaption className=\"sr-only\">{aria['aria-label']}</figcaption>\n </figure>\n )\n}\n\n/* ================================================================ funil */\n\nfunction Funnel({ stages, valueFormatter = fmtDefault, className, ...aria }: FunnelChartProps) {\n const n = stages.length\n const top = stages[0]?.value || 1\n const last = stages[n - 1]\n // Afunila por igual, de 100% a 46% da largura, como um funil de verdade.\n const width = (i: number) => 1 - (i / Math.max(1, n)) * 0.54\n // Da primária ao sucesso, escurecido com o tom da sidebar: o texto claro passa AA.\n const fill = (i: number) => {\n const p = n > 1 ? Math.round(100 - (i / (n - 1)) * 100) : 100\n return `color-mix(in oklab, color-mix(in oklab, var(--rendra-primary) ${p}%, var(--rendra-success)) 58%, var(--rendra-sidebar))`\n }\n const rates = stages.map((s, i) => {\n const next = stages[i + 1]\n return next && s.value > 0 ? (next.value / s.value) * 100 : null\n })\n const worst = rates.reduce<number | null>(\n (w, r, i) => (r !== null && (w === null || r < (rates[w] ?? Infinity)) ? i : w),\n null,\n )\n\n return (\n <figure\n data-rendra={resolveCatalogCode('Chart', { type: 'funnel' })}\n className={cn('flex min-w-0 flex-col items-center', className)}\n aria-label={aria['aria-label']}\n >\n <ol className=\"flex w-full flex-col items-center\">\n {stages.map((s, i) => {\n const rate = rates[i]\n return (\n <li key={s.label} className=\"flex w-full flex-col items-center\">\n <div\n className=\"flex h-16 w-full flex-col items-center justify-center bg-fill text-sidebar-foreground clip-trapezoid\"\n style={\n {\n '--top': width(i).toFixed(4),\n '--bottom': width(i + 1).toFixed(4),\n '--fill': fill(i),\n } as CSSProperties\n }\n >\n <span className=\"text-lg leading-tight font-semibold tabular-nums\">\n {valueFormatter(s.value)}\n </span>\n <span className=\"text-xs\">{s.label}</span>\n </div>\n {rate != null && (\n <p className=\"flex items-center gap-1 py-1 text-xs text-muted-foreground\">\n <ArrowDown className=\"size-3\" aria-hidden />\n <span className=\"font-semibold text-foreground tabular-nums\">{pct(rate)}</span>\n <span>para a próxima etapa</span>\n {i === worst && n > 2 && (\n <span className=\"font-semibold text-destructive-soft-foreground\">\n · Maior queda\n </span>\n )}\n </p>\n )}\n </li>\n )\n })}\n </ol>\n {n > 1 && last && (\n <p className=\"flex items-center gap-1 pt-2 text-sm text-muted-foreground\">\n <ArrowDown className=\"size-icon-sm\" aria-hidden />\n <span className=\"font-semibold text-foreground tabular-nums\">\n {pct((last.value / top) * 100)}\n </span>\n de conversão total do funil\n </p>\n )}\n <figcaption className=\"sr-only\">{aria['aria-label']}</figcaption>\n </figure>\n )\n}\n\n/* ================================================================ séries (Recharts) */\n\nfunction Cartesian({\n type,\n data,\n xKey,\n series,\n stacked,\n colorByCategory,\n valueFormatter = fmtDefault,\n height = 'md',\n listThreshold = 8,\n className,\n ...aria\n}: CartesianChartProps) {\n const { isMobile } = useBreakpoint()\n const [asList, setAsList] = useState(false)\n // Anima só a entrada. Se a largura muda depois (barra de rolagem que aparece, janela\n // redimensionada), o gráfico vai direto à nova forma, sem desenhar fora do card no meio do\n // caminho. Com \"reduzir movimento\" no sistema, não anima.\n const [animate, setAnimate] = useState(\n () => !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches,\n )\n const firstWidth = useRef<number | null>(null)\n const onResize = (width: number) => {\n if (firstWidth.current === null) firstWidth.current = width\n else if (Math.abs(width - firstWidth.current) > 1) setAnimate(false)\n }\n const canList = isMobile && data.length > listThreshold\n const showList = canList && asList\n const colors = series.map((s, i) => colorVar(s.color ?? i + 1))\n\n const axis = {\n stroke: 'var(--rendra-muted-foreground)',\n fontSize: 12,\n tickLine: false,\n axisLine: false,\n }\n const tooltip = (\n <Tooltip\n cursor={{ fill: 'var(--rendra-muted)', stroke: 'var(--rendra-border)' }}\n formatter={(v) => valueFormatter(Number(v))}\n contentStyle={{\n background: 'var(--rendra-popover)',\n border: '1px solid var(--rendra-border)',\n borderRadius: 'var(--rendra-shape-control)',\n color: 'var(--rendra-popover-foreground)',\n fontSize: 12,\n }}\n />\n )\n const legend = (\n <Legend\n verticalAlign=\"bottom\"\n iconType=\"circle\"\n iconSize={8}\n wrapperStyle={{ fontSize: 12, paddingTop: 12 }}\n />\n )\n const common = { data, margin: { top: 8, right: 8, left: isMobile ? -16 : 0, bottom: 0 } }\n const xAxis = (\n <XAxis dataKey={xKey} {...axis} interval=\"preserveStartEnd\" minTickGap={isMobile ? 24 : 12} />\n )\n const yAxis = (\n <YAxis\n {...axis}\n width={isMobile ? 72 : 80}\n tickCount={isMobile ? 3 : 5}\n // Mostra todas as marcas calculadas (o padrão do Recharts some com algumas).\n interval={0}\n allowDecimals={false}\n tickFormatter={(v) => valueFormatter(Number(v))}\n />\n )\n const grid = (\n <CartesianGrid vertical={false} stroke=\"var(--rendra-border)\" strokeDasharray=\"3 3\" />\n )\n const bar = (s: ChartSeries, i: number, lastBar: boolean) => (\n <Bar\n key={s.key}\n dataKey={s.key}\n name={s.label}\n fill={colors[i]}\n stackId={stacked ? 'pilha' : undefined}\n // Empilhadas: só a barra de cima tem os cantos arredondados.\n radius={!stacked || lastBar ? [4, 4, 0, 0] : [0, 0, 0, 0]}\n maxBarSize={40}\n isAnimationActive={animate}\n >\n {colorByCategory && data.map((_, j) => <Cell key={j} fill={colorVar(j + 1)} />)}\n </Bar>\n )\n\n let chart\n if (type === 'pie') {\n const s = series[0]\n chart = (\n <PieChart>\n <Pie\n data={data}\n dataKey={s?.key ?? ''}\n nameKey={xKey}\n innerRadius=\"55%\"\n outerRadius=\"85%\"\n paddingAngle={2}\n stroke=\"var(--rendra-card)\"\n isAnimationActive={animate}\n >\n {data.map((_, i) => (\n <Cell key={i} fill={colorVar(i + 1)} />\n ))}\n </Pie>\n {tooltip}\n {legend}\n </PieChart>\n )\n } else if (type === 'bar') {\n chart = (\n <BarChart {...common}>\n {grid}\n {xAxis}\n {yAxis}\n {tooltip}\n {series.length > 1 && legend}\n {series.map((s, i) => bar(s, i, i === series.length - 1))}\n </BarChart>\n )\n } else if (type === 'combo') {\n const bars = series.filter((s) => (s.kind ?? 'bar') === 'bar')\n chart = (\n <ComposedChart {...common}>\n {grid}\n {xAxis}\n {yAxis}\n {tooltip}\n {legend}\n {series.map((s, i) =>\n (s.kind ?? 'bar') === 'bar' ? (\n bar(s, i, s.key === bars[bars.length - 1]?.key)\n ) : (\n <Line\n key={s.key}\n type=\"monotone\"\n dataKey={s.key}\n name={s.label}\n stroke={colors[i]}\n strokeWidth={2}\n dot={{ r: 3, fill: colors[i], strokeWidth: 0 }}\n activeDot={{ r: 5 }}\n isAnimationActive={animate}\n />\n ),\n )}\n </ComposedChart>\n )\n } else if (type === 'area') {\n chart = (\n <AreaChart {...common}>\n <defs>\n {series.map((s, i) => (\n <linearGradient key={s.key} id={`area-${s.key}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={colors[i]} stopOpacity={0.3} />\n <stop offset=\"100%\" stopColor={colors[i]} stopOpacity={0} />\n </linearGradient>\n ))}\n </defs>\n {grid}\n {xAxis}\n {yAxis}\n {tooltip}\n {series.length > 1 && legend}\n {series.map((s, i) => (\n <Area\n key={s.key}\n type=\"monotone\"\n dataKey={s.key}\n name={s.label}\n stroke={colors[i]}\n strokeWidth={2}\n fill={`url(#area-${s.key})`}\n isAnimationActive={animate}\n />\n ))}\n </AreaChart>\n )\n } else {\n chart = (\n <LineChart {...common}>\n {grid}\n {xAxis}\n {yAxis}\n {tooltip}\n {series.length > 1 && legend}\n {series.map((s, i) => (\n <Line\n key={s.key}\n type=\"monotone\"\n dataKey={s.key}\n name={s.label}\n stroke={colors[i]}\n strokeWidth={2}\n dot={false}\n activeDot={{ r: 4 }}\n isAnimationActive={animate}\n />\n ))}\n </LineChart>\n )\n }\n\n return (\n <figure\n data-rendra={resolveCatalogCode('Chart', { type })}\n className={cn('flex min-w-0 flex-col gap-3', height === 'fill' && 'h-full', className)}\n aria-label={aria['aria-label']}\n >\n {canList && (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"self-end\"\n icon={asList ? <BarChart3 /> : <ListIcon />}\n onClick={() => setAsList((v) => !v)}\n >\n {asList ? 'Ver gráfico' : 'Ver como lista'}\n </Button>\n )}\n {showList ? (\n <ul className=\"flex flex-col divide-y\">\n {data.map((d) => (\n <li\n key={String(d[xKey])}\n className=\"flex items-center justify-between gap-3 py-2 text-sm\"\n >\n <span className=\"text-muted-foreground\">{String(d[xKey])}</span>\n <span className=\"flex gap-3 font-medium tabular-nums\">\n {series.map((s) => (\n <span key={s.key}>{valueFormatter(Number(d[s.key]))}</span>\n ))}\n </span>\n </li>\n ))}\n </ul>\n ) : (\n <div\n className={cn(\n 'w-full',\n height === 'fill'\n ? 'min-h-chart-sm flex-1'\n : height === 'sm'\n ? 'h-chart-sm'\n : 'h-chart-md',\n )}\n >\n <ResponsiveContainer width=\"100%\" height=\"100%\" onResize={onResize}>\n {chart}\n </ResponsiveContainer>\n </div>\n )}\n <figcaption className=\"sr-only\">{aria['aria-label']}</figcaption>\n </figure>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"chart.js","names":[],"sources":["../src/components/ui/chart.tsx"],"sourcesContent":["import { ArrowDown, BarChart3, List as ListIcon } from 'lucide-react'\nimport { m } from 'motion/react'\nimport { useId, useRef, useState, type CSSProperties } from 'react'\nimport {\n Area,\n AreaChart,\n Bar,\n BarChart,\n CartesianGrid,\n Cell,\n ComposedChart,\n Legend,\n Line,\n LineChart,\n Pie,\n PieChart,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from 'recharts'\nimport { resolveCatalogCode } from '@/catalog/components'\nimport { Button } from '@/components/ui/button'\nimport { useBreakpoint } from '@/hooks/use-breakpoint'\nimport { cn } from '@/lib/cn'\nimport { useMotionMode, useMotionPresets, useRevealScope } from '@/lib/motion'\nimport { toCubicBezier } from '@/lib/motion/presets'\n\n/*\n * Gráfico único do sistema. O tipo é a prop type, nunca um componente novo:\n * line, area, bar, pie séries sobre categorias (Recharts)\n * combo barras e linhas juntas (ex.: receita em barras e meta em linha)\n * gauge velocímetro de meta: valor, máximo, meta e faixas de cor\n * funnel funil de etapas com a taxa de conversão entre elas\n * Cores sempre do template (--chart-1 a --chart-5). Mobile: legenda abaixo, eixos\n * simplificados, lista de valores quando há muitos pontos; o funil empilha rótulo e barra.\n */\n\nexport interface ChartSeries {\n /** Chave no objeto de dados. */\n key: string\n label: string\n /** Índice da cor do template (1 a 5). Padrão: na ordem das séries. */\n color?: 1 | 2 | 3 | 4 | 5\n /** No type=\"combo\": desenha a série como barra (padrão) ou linha. */\n kind?: 'bar' | 'line'\n}\n\ninterface BaseProps {\n valueFormatter?: (n: number) => string\n /** Altura: sm (12rem), md (16rem) ou fill (a altura do contêiner, como num widget). */\n height?: 'sm' | 'md' | 'fill'\n 'aria-label': string\n className?: string\n}\n\nexport interface CartesianChartProps extends BaseProps {\n type: 'line' | 'bar' | 'area' | 'pie' | 'combo'\n data: Record<string, string | number>[]\n /** Chave da categoria (eixo X ou fatias da pizza). */\n xKey: string\n series: ChartSeries[]\n /** Barras empilhadas (bar e combo). */\n stacked?: boolean\n /** Barra de uma série só com uma cor por categoria. */\n colorByCategory?: boolean\n /** Acima deste número de pontos, o mobile oferece ver como lista. */\n listThreshold?: number\n}\n\nexport interface GaugeZone {\n /** Fim da faixa, de 0 a 1 do máximo. */\n to: number\n tone: 'error' | 'warning' | 'success' | 'primary' | 'neutral'\n}\n\nexport interface GaugeChartProps extends BaseProps {\n type: 'gauge'\n value: number\n max: number\n min?: number\n /** Meta: marcada no arco e usada no percentual atingido. */\n target?: number\n /** Faixas de cor do arco. Padrão: vermelho até 60%, amarelo até 90%, verde até o fim. */\n zones?: GaugeZone[]\n /** Texto abaixo do valor (ex.: \"Receita do mês\"). */\n label?: string\n}\n\nexport interface FunnelStage {\n label: string\n value: number\n}\n\nexport interface FunnelChartProps extends BaseProps {\n type: 'funnel'\n stages: FunnelStage[]\n}\n\nexport type ChartProps = CartesianChartProps | GaugeChartProps | FunnelChartProps\n\n// Lê as variáveis do tema direto (as --color-* do Tailwind são inline e não existem no CSS).\nconst palette = [\n '--rendra-chart-1',\n '--rendra-chart-2',\n '--rendra-chart-3',\n '--rendra-chart-4',\n '--rendra-chart-5',\n '--rendra-ring',\n]\nconst colorVar = (i: number) => `var(${palette[(i - 1) % palette.length]})`\nconst fmtDefault = (n: number) => n.toLocaleString('pt-BR')\nconst pct = (n: number) =>\n `${n.toLocaleString('pt-BR', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}%`\n\nexport function Chart(props: ChartProps) {\n if (props.type === 'gauge') return <Gauge {...props} />\n if (props.type === 'funnel') return <Funnel {...props} />\n return <Cartesian {...props} />\n}\n\n/* ================================================================ velocímetro */\n\nconst defaultZones: GaugeZone[] = [\n { to: 0.6, tone: 'error' },\n { to: 0.9, tone: 'warning' },\n { to: 1, tone: 'success' },\n]\n\nconst zoneBadge: Record<GaugeZone['tone'], string> = {\n error: 'bg-destructive-soft text-destructive-soft-foreground',\n warning: 'bg-warning-soft text-warning-soft-foreground',\n success: 'bg-success-soft text-success-soft-foreground',\n primary: 'bg-primary-soft text-primary-soft-foreground',\n neutral: 'bg-muted text-foreground',\n}\nconst zoneText: Record<GaugeZone['tone'], string> = {\n error: 'Abaixo da meta',\n warning: 'Atenção',\n success: 'No verde',\n primary: 'Em andamento',\n neutral: 'Em andamento',\n}\n\n// Meio círculo (180°), da esquerda para a direita por cima, centro em (120, 120), raio 100.\nconst CX = 120\nconst CY = 120\nconst R = 100\nconst point = (frac: number, r = R) => {\n const a = Math.PI * (1 - frac)\n return [CX + r * Math.cos(a), CY - r * Math.sin(a)] as const\n}\nconst arc = (from: number, to: number, r = R) => {\n const [x1, y1] = point(from, r)\n const [x2, y2] = point(to, r)\n return `M ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r} ${r} 0 0 1 ${x2.toFixed(2)} ${y2.toFixed(2)}`\n}\n\nfunction Gauge({\n value,\n max,\n min = 0,\n target,\n zones = defaultZones,\n label,\n valueFormatter = fmtDefault,\n className,\n ...aria\n}: GaugeChartProps) {\n const range = Math.max(1, max - min)\n const clamp = (n: number) => Math.min(1, Math.max(0, n))\n // Com meta, o ponteiro mostra o percentual da meta (100% = meta batida); sem meta, do máximo.\n const reached = target ? (value / target) * 100 : null\n const frac = reached !== null ? clamp(reached / 100) : clamp((value - min) / range)\n const zone = zones.find((z) => frac <= z.to) ?? zones[zones.length - 1]\n const tone = zone?.tone ?? 'primary'\n const gradientId = useId()\n const [ex, ey] = point(frac, R - 26)\n const on = useMotionMode() === 'on'\n const presets = useMotionPresets()\n const reveal = useRevealScope()\n const [sx, sy] = point(0, R - 26)\n\n return (\n <figure\n data-rendra={resolveCatalogCode('Chart', { type: 'gauge' })}\n className={cn('flex min-w-0 flex-col items-center gap-2', className)}\n aria-label={aria['aria-label']}\n >\n <div\n role=\"meter\"\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={Math.round(frac * 100)}\n aria-valuetext={`${reached !== null ? `${pct(reached)} da meta` : valueFormatter(value)}, ${zoneText[tone]}`}\n aria-label={aria['aria-label']}\n className=\"w-full max-w-xs\"\n >\n <svg viewBox=\"0 0 240 140\" className=\"w-full\" aria-hidden>\n <defs>\n {/* Degradê contínuo: vermelho, laranja, amarelo e verde */}\n <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n <stop offset=\"0%\" stopColor=\"var(--rendra-meter-low)\" />\n <stop\n offset=\"38%\"\n stopColor=\"color-mix(in oklab, var(--rendra-meter-low), var(--rendra-meter-mid))\"\n />\n <stop offset=\"62%\" stopColor=\"var(--rendra-meter-mid)\" />\n <stop offset=\"100%\" stopColor=\"var(--rendra-meter-high)\" />\n </linearGradient>\n </defs>\n <path\n d={arc(0, 1)}\n fill=\"none\"\n stroke={`url(#${gradientId})`}\n strokeWidth={20}\n strokeLinecap=\"round\"\n />\n {/* Ponteiro fino, do centro até perto do arco */}\n {on ? (\n // `on`: a agulha vai do 0% até o valor com a duração e a curva dos presets.\n <m.line\n x1={CX}\n y1={CY}\n initial={{ x2: sx, y2: sy }}\n animate={{ x2: ex, y2: ey }}\n transition={{\n duration: reveal ? presets.tokens.reveal.draw : presets.tokens.duration.draw,\n ease: presets.tokens.ease.out,\n }}\n stroke=\"var(--rendra-foreground)\"\n strokeWidth={4}\n strokeLinecap=\"round\"\n />\n ) : (\n // `off`: a agulha vai direto ao valor. Antes havia aqui uma transição de CSS em \"all\"\n // com 700 ms, que era letra morta: x2 e y2 do <line> não são propriedades de CSS (o\n // Chromium não cria transição nenhuma; provado em tests/motion.spec.ts), e \"all\" é\n // proibido pela linguagem de movimento.\n <line\n x1={CX}\n y1={CY}\n x2={ex}\n y2={ey}\n stroke=\"var(--rendra-foreground)\"\n strokeWidth={4}\n strokeLinecap=\"round\"\n />\n )}\n <circle cx={CX} cy={CY} r={9} fill=\"var(--rendra-foreground)\" />\n <circle cx={CX} cy={CY} r={4} fill=\"var(--rendra-card)\" />\n <text\n x={point(0)[0]}\n y={CY + 18}\n textAnchor=\"middle\"\n fontSize={11}\n fill=\"var(--rendra-muted-foreground)\"\n >\n 0%\n </text>\n <text\n x={point(1)[0]}\n y={CY + 18}\n textAnchor=\"middle\"\n fontSize={11}\n fill=\"var(--rendra-muted-foreground)\"\n >\n 100%\n </text>\n </svg>\n </div>\n <div className=\"flex flex-col items-center gap-1 text-center\">\n <span className=\"text-3xl font-semibold tabular-nums\">\n {reached !== null ? `${Math.round(reached)}%` : valueFormatter(value)}\n </span>\n {label && <span className=\"text-sm font-medium\">{label}</span>}\n {target !== undefined && (\n <span className=\"flex flex-col text-sm text-muted-foreground tabular-nums\">\n <span>Meta: {valueFormatter(target)}</span>\n <span>Realizado: {valueFormatter(value)}</span>\n </span>\n )}\n <span className={cn('mt-1 rounded-full px-3 py-1 text-xs font-semibold', zoneBadge[tone])}>\n {zoneText[tone]}\n </span>\n </div>\n <figcaption className=\"sr-only\">{aria['aria-label']}</figcaption>\n </figure>\n )\n}\n\n/* ================================================================ funil */\n\nfunction Funnel({ stages, valueFormatter = fmtDefault, className, ...aria }: FunnelChartProps) {\n const on = useMotionMode() === 'on'\n const presets = useMotionPresets()\n // Em `on` o contêiner do funil entra com fade.\n const Root = on ? m.figure : 'figure'\n const n = stages.length\n const top = stages[0]?.value || 1\n const last = stages[n - 1]\n // Afunila por igual, de 100% a 46% da largura, como um funil de verdade.\n const width = (i: number) => 1 - (i / Math.max(1, n)) * 0.54\n // Da primária ao sucesso, escurecido com o tom da sidebar: o texto claro passa AA.\n const fill = (i: number) => {\n const p = n > 1 ? Math.round(100 - (i / (n - 1)) * 100) : 100\n return `color-mix(in oklab, color-mix(in oklab, var(--rendra-primary) ${p}%, var(--rendra-success)) 58%, var(--rendra-sidebar))`\n }\n const rates = stages.map((s, i) => {\n const next = stages[i + 1]\n return next && s.value > 0 ? (next.value / s.value) * 100 : null\n })\n const worst = rates.reduce<number | null>(\n (w, r, i) => (r !== null && (w === null || r < (rates[w] ?? Infinity)) ? i : w),\n null,\n )\n\n return (\n <Root\n data-rendra={resolveCatalogCode('Chart', { type: 'funnel' })}\n className={cn('flex min-w-0 flex-col items-center', className)}\n aria-label={aria['aria-label']}\n {...(on ? presets.fade : {})}\n >\n <ol className=\"flex w-full flex-col items-center\">\n {stages.map((s, i) => {\n const rate = rates[i]\n return (\n <li key={s.label} className=\"flex w-full flex-col items-center\">\n <div\n className=\"flex h-16 w-full flex-col items-center justify-center bg-fill text-sidebar-foreground clip-trapezoid\"\n style={\n {\n '--top': width(i).toFixed(4),\n '--bottom': width(i + 1).toFixed(4),\n '--fill': fill(i),\n } as CSSProperties\n }\n >\n <span className=\"text-lg leading-tight font-semibold tabular-nums\">\n {valueFormatter(s.value)}\n </span>\n <span className=\"text-xs\">{s.label}</span>\n </div>\n {rate != null && (\n <p className=\"flex items-center gap-1 py-1 text-xs text-muted-foreground\">\n <ArrowDown className=\"size-3\" aria-hidden />\n <span className=\"font-semibold text-foreground tabular-nums\">{pct(rate)}</span>\n <span>para a próxima etapa</span>\n {i === worst && n > 2 && (\n <span className=\"font-semibold text-destructive-soft-foreground\">\n · Maior queda\n </span>\n )}\n </p>\n )}\n </li>\n )\n })}\n </ol>\n {n > 1 && last && (\n <p className=\"flex items-center gap-1 pt-2 text-sm text-muted-foreground\">\n <ArrowDown className=\"size-icon-sm\" aria-hidden />\n <span className=\"font-semibold text-foreground tabular-nums\">\n {pct((last.value / top) * 100)}\n </span>\n de conversão total do funil\n </p>\n )}\n <figcaption className=\"sr-only\">{aria['aria-label']}</figcaption>\n </Root>\n )\n}\n\n/* ================================================================ séries (Recharts) */\n\nfunction Cartesian({\n type,\n data,\n xKey,\n series,\n stacked,\n colorByCategory,\n valueFormatter = fmtDefault,\n height = 'md',\n listThreshold = 8,\n className,\n ...aria\n}: CartesianChartProps) {\n const { isMobile } = useBreakpoint()\n const motion = useMotionMode()\n const presets = useMotionPresets()\n const reveal = useRevealScope()\n // Gráfico é dado que o usuário lê: desenha uma vez, na primeira montagem, e rápido (`draw`,\n // 420 ms). Trocar período ou filtro não o redesenha (W11). Só dentro de um RevealScope (a\n // chegada do dashboard) o desenho dura o tempo do reveal (900 ms). O recharts aceita a curva só\n // no formato de toCubicBezier (quatro números, sem espaços). Em `off` não recebe prop nenhuma,\n // como antes.\n const [drawn, setDrawn] = useState(false)\n const ended = useRef(0)\n const animated = type === 'pie' ? 1 : series.length\n const draw =\n motion === 'on'\n ? {\n animationDuration: Math.round(\n (reveal ? presets.tokens.reveal.draw : presets.tokens.duration.draw) * 1000,\n ),\n animationEasing: toCubicBezier(presets.tokens.ease.out),\n // Só marca \"desenhado\" quando todas as séries terminaram, senão uma série pararia a\n // outra no meio do desenho.\n onAnimationEnd: () => {\n if (++ended.current >= animated) setDrawn(true)\n },\n }\n : {}\n const [asList, setAsList] = useState(false)\n // Anima só a entrada. Se a largura muda depois (barra de rolagem que aparece, janela\n // redimensionada), o gráfico vai direto à nova forma, sem desenhar fora do card no meio do\n // caminho. Com \"reduzir movimento\" no sistema, não anima.\n const [animate, setAnimate] = useState(\n () => !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches,\n )\n const firstWidth = useRef<number | null>(null)\n const onResize = (width: number) => {\n if (firstWidth.current === null) firstWidth.current = width\n else if (Math.abs(width - firstWidth.current) > 1) setAnimate(false)\n }\n const canList = isMobile && data.length > listThreshold\n const showList = canList && asList\n const colors = series.map((s, i) => colorVar(s.color ?? i + 1))\n\n const axis = {\n stroke: 'var(--rendra-muted-foreground)',\n fontSize: 12,\n tickLine: false,\n axisLine: false,\n }\n const tooltip = (\n <Tooltip\n cursor={{ fill: 'var(--rendra-muted)', stroke: 'var(--rendra-border)' }}\n formatter={(v) => valueFormatter(Number(v))}\n contentStyle={{\n background: 'var(--rendra-popover)',\n border: '1px solid var(--rendra-border)',\n borderRadius: 'var(--rendra-shape-control)',\n color: 'var(--rendra-popover-foreground)',\n fontSize: 12,\n }}\n />\n )\n const legend = (\n <Legend\n verticalAlign=\"bottom\"\n iconType=\"circle\"\n iconSize={8}\n wrapperStyle={{ fontSize: 12, paddingTop: 12 }}\n />\n )\n const common = { data, margin: { top: 8, right: 8, left: isMobile ? -16 : 0, bottom: 0 } }\n const xAxis = (\n <XAxis dataKey={xKey} {...axis} interval=\"preserveStartEnd\" minTickGap={isMobile ? 24 : 12} />\n )\n const yAxis = (\n <YAxis\n {...axis}\n width={isMobile ? 72 : 80}\n tickCount={isMobile ? 3 : 5}\n // Mostra todas as marcas calculadas (o padrão do Recharts some com algumas).\n interval={0}\n allowDecimals={false}\n tickFormatter={(v) => valueFormatter(Number(v))}\n />\n )\n const grid = (\n <CartesianGrid vertical={false} stroke=\"var(--rendra-border)\" strokeDasharray=\"3 3\" />\n )\n const bar = (s: ChartSeries, i: number, lastBar: boolean) => (\n <Bar\n key={s.key}\n dataKey={s.key}\n name={s.label}\n fill={colors[i]}\n stackId={stacked ? 'pilha' : undefined}\n // Empilhadas: só a barra de cima tem os cantos arredondados.\n radius={!stacked || lastBar ? [4, 4, 0, 0] : [0, 0, 0, 0]}\n maxBarSize={40}\n isAnimationActive={animate && !drawn}\n {...draw}\n >\n {colorByCategory && data.map((_, j) => <Cell key={j} fill={colorVar(j + 1)} />)}\n </Bar>\n )\n\n let chart\n if (type === 'pie') {\n const s = series[0]\n chart = (\n <PieChart>\n <Pie\n data={data}\n dataKey={s?.key ?? ''}\n nameKey={xKey}\n innerRadius=\"55%\"\n outerRadius=\"85%\"\n paddingAngle={2}\n stroke=\"var(--rendra-card)\"\n isAnimationActive={animate && !drawn}\n {...draw}\n >\n {data.map((_, i) => (\n <Cell key={i} fill={colorVar(i + 1)} />\n ))}\n </Pie>\n {tooltip}\n {legend}\n </PieChart>\n )\n } else if (type === 'bar') {\n chart = (\n <BarChart {...common}>\n {grid}\n {xAxis}\n {yAxis}\n {tooltip}\n {series.length > 1 && legend}\n {series.map((s, i) => bar(s, i, i === series.length - 1))}\n </BarChart>\n )\n } else if (type === 'combo') {\n const bars = series.filter((s) => (s.kind ?? 'bar') === 'bar')\n chart = (\n <ComposedChart {...common}>\n {grid}\n {xAxis}\n {yAxis}\n {tooltip}\n {legend}\n {series.map((s, i) =>\n (s.kind ?? 'bar') === 'bar' ? (\n bar(s, i, s.key === bars[bars.length - 1]?.key)\n ) : (\n <Line\n key={s.key}\n type=\"monotone\"\n dataKey={s.key}\n name={s.label}\n stroke={colors[i]}\n strokeWidth={2}\n dot={{ r: 3, fill: colors[i], strokeWidth: 0 }}\n activeDot={{ r: 5 }}\n isAnimationActive={animate && !drawn}\n {...draw}\n />\n ),\n )}\n </ComposedChart>\n )\n } else if (type === 'area') {\n chart = (\n <AreaChart {...common}>\n <defs>\n {series.map((s, i) => (\n <linearGradient key={s.key} id={`area-${s.key}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={colors[i]} stopOpacity={0.3} />\n <stop offset=\"100%\" stopColor={colors[i]} stopOpacity={0} />\n </linearGradient>\n ))}\n </defs>\n {grid}\n {xAxis}\n {yAxis}\n {tooltip}\n {series.length > 1 && legend}\n {series.map((s, i) => (\n <Area\n key={s.key}\n type=\"monotone\"\n dataKey={s.key}\n name={s.label}\n stroke={colors[i]}\n strokeWidth={2}\n fill={`url(#area-${s.key})`}\n isAnimationActive={animate && !drawn}\n {...draw}\n />\n ))}\n </AreaChart>\n )\n } else {\n chart = (\n <LineChart {...common}>\n {grid}\n {xAxis}\n {yAxis}\n {tooltip}\n {series.length > 1 && legend}\n {series.map((s, i) => (\n <Line\n key={s.key}\n type=\"monotone\"\n dataKey={s.key}\n name={s.label}\n stroke={colors[i]}\n strokeWidth={2}\n dot={false}\n activeDot={{ r: 4 }}\n isAnimationActive={animate && !drawn}\n {...draw}\n />\n ))}\n </LineChart>\n )\n }\n\n return (\n <figure\n data-rendra={resolveCatalogCode('Chart', { type })}\n className={cn('flex min-w-0 flex-col gap-3', height === 'fill' && 'h-full', className)}\n aria-label={aria['aria-label']}\n >\n {canList && (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"self-end\"\n icon={asList ? <BarChart3 /> : <ListIcon />}\n onClick={() => setAsList((v) => !v)}\n >\n {asList ? 'Ver gráfico' : 'Ver como lista'}\n </Button>\n )}\n {showList ? (\n <ul className=\"flex flex-col divide-y\">\n {data.map((d) => (\n <li\n key={String(d[xKey])}\n className=\"flex items-center justify-between gap-3 py-2 text-sm\"\n >\n <span className=\"text-muted-foreground\">{String(d[xKey])}</span>\n <span className=\"flex gap-3 font-medium tabular-nums\">\n {series.map((s) => (\n <span key={s.key}>{valueFormatter(Number(d[s.key]))}</span>\n ))}\n </span>\n </li>\n ))}\n </ul>\n ) : (\n <div\n className={cn(\n 'w-full',\n height === 'fill'\n ? 'min-h-chart-sm flex-1'\n : height === 'sm'\n ? 'h-chart-sm'\n : 'h-chart-md',\n )}\n >\n <ResponsiveContainer width=\"100%\" height=\"100%\" onResize={onResize}>\n {chart}\n </ResponsiveContainer>\n </div>\n )}\n <figcaption className=\"sr-only\">{aria['aria-label']}</figcaption>\n </figure>\n )\n}\n"],"mappings":"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"}
|
package/dist/cli/auditar.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
1
|
+
/*! Rendra Design System v2.5.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
2
|
import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
|
|
3
3
|
import { join, relative, sep } from "node:path";
|
|
4
4
|
//#region src/cli/auditar.ts
|
package/dist/cli/codigos.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
2
|
-
import { t as CATALOG } from "../components-
|
|
1
|
+
/*! Rendra Design System v2.5.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { t as CATALOG } from "../components-DkpspH9h.js";
|
|
3
3
|
//#region src/cli/codigos.ts
|
|
4
4
|
/** Todo o catálogo, na ordem cadastrada. Sem duplicata: garantido por assertCatalogIntegrity. */
|
|
5
5
|
function codigos() {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
1
|
+
/*! Rendra Design System v2.5.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
2
|
import { EXTENSAO_VARRIDA, IDS_REGRAS_GENERICAS, auditLines, auditar, casaPrefixo, coletarArquivos, percorrer, relativoA } from "./auditar.js";
|
|
3
3
|
import { formatHelp } from "./help.js";
|
|
4
4
|
import { existsSync, readFileSync } from "node:fs";
|
package/dist/cli/help.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.
|
|
1
|
+
/*! Rendra Design System v2.5.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
2
|
//#region src/cli/help.ts
|
|
3
3
|
/** Linha final de autoria, igual em toda saída publicável (CLI, banner do pacote). */
|
|
4
4
|
var AUTHOR_LINE = "Rendra Design System, por Bruno Magalhaes: brunomagalhaes.me · instagram.com/brunomagalhaes.me";
|