@rendra-ui/web 2.2.1 → 2.2.2
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 +54 -54
- package/dist/base.css +1 -1
- package/dist/{button-CO0x1yjg.js → button-BgSglLWN.js} +4 -4
- package/dist/{button-CO0x1yjg.js.map → button-BgSglLWN.js.map} +1 -1
- package/dist/chart.js +5 -5
- package/dist/cli/auditar.js +1 -1
- package/dist/cli/codigos.js +2 -2
- 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-BM6MSZpE.js → cn-Bo1YMupg.js} +2 -2
- package/dist/{cn-BM6MSZpE.js.map → cn-Bo1YMupg.js.map} +1 -1
- package/dist/{components-2fCoBfBU.js → components-Dl15AjD-.js} +2 -2
- package/dist/{components-2fCoBfBU.js.map → components-Dl15AjD-.js.map} +1 -1
- package/dist/components.css +1 -1
- package/dist/document-viewer.js +4 -4
- package/dist/{empty-state-8rIk7QlP.js → empty-state-Be_tReTU.js} +3 -3
- package/dist/{empty-state-8rIk7QlP.js.map → empty-state-Be_tReTU.js.map} +1 -1
- package/dist/index.js +9 -9
- package/dist/index.js.map +1 -1
- package/dist/{rendra-provider-BC4KBTfU.js → rendra-provider-DPulIoQB.js} +2 -2
- package/dist/{rendra-provider-BC4KBTfU.js.map → rendra-provider-DPulIoQB.js.map} +1 -1
- package/dist/rich-text-editor.js +3 -3
- package/dist/router-bridge.js +2 -2
- package/dist/tokens.css +1 -1
- package/dist/{tooltip-BLc_n2IB.js → tooltip-dC9gqkuv.js} +3 -3
- package/dist/{tooltip-BLc_n2IB.js.map → tooltip-dC9gqkuv.js.map} +1 -1
- package/dist/types/components/ui/rendra-credit.d.ts +1 -1
- package/dist/{use-breakpoint-BqhYKT3L.js → use-breakpoint-BUHd0Cbz.js} +2 -2
- package/dist/{use-breakpoint-BqhYKT3L.js.map → use-breakpoint-BUHd0Cbz.js.map} +1 -1
- package/dist/widget-grid.js +2 -2
- package/package.json +8 -5
package/README.md
CHANGED
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
**Template de sistema e layout de sistema administrativo em React, gratuito e open source: design system completo e boilerplate com tokens, três templates, componentes, AppShell, telas prontas (dashboard, listagem, cadastro, CRM kanban, agenda e chat omnichannel), Storybook e testes de layout.** Feito para ser o ponto de partida de todos os projetos: layouts previsíveis, espaçamento equilibrado e funcionamento completo no celular. Para aplicar a outro sistema, você troca cores, fonte e ícones da marca, e nenhum componente muda.
|
|
4
4
|
|
|
5
|
-
      [      [](https://github.com/bsmagalhaes/rendra-ui-web/actions/workflows/ci.yml)
|
|
6
6
|
|
|
7
|
-
**Veja funcionando, sem instalar nada:** [demo do app](https://bsmagalhaes.github.io/rendra-
|
|
7
|
+
**Veja funcionando, sem instalar nada:** [demo do app](https://bsmagalhaes.github.io/rendra-ui-web/) · [galeria com códigos de modelo](https://bsmagalhaes.github.io/rendra-ui-web/galeria/) · [Storybook](https://bsmagalhaes.github.io/rendra-ui-web/storybook/) · [vitrine de componentes](https://bsmagalhaes.github.io/rendra-ui-web/componentes/) · [atendimento](https://bsmagalhaes.github.io/rendra-ui-web/atendimento/) · [agenda](https://bsmagalhaes.github.io/rendra-ui-web/agenda/) · [kanban](https://bsmagalhaes.github.io/rendra-ui-web/kanban/). No demo, o menu do avatar troca modelo, paleta, modo e layout ao vivo.
|
|
8
8
|
|
|
9
|
-
| Atendimento omnichannel
|
|
10
|
-
|
|
|
11
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
9
|
+
| Atendimento omnichannel | Painel com widgets ajustáveis |
|
|
10
|
+
| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=safira-atendimento) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=safira-dashboard-ajuste) |
|
|
12
12
|
|
|
13
|
-
| Calendário e agenda
|
|
14
|
-
|
|
|
15
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
13
|
+
| Calendário e agenda | Kanban |
|
|
14
|
+
| ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
15
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=safira-calendario) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=aurora-kanban) |
|
|
16
16
|
|
|
17
17
|
---
|
|
18
18
|
|
|
@@ -41,11 +41,11 @@ E duas de boas práticas, verificadas pelo `npm run check:rules`: **nunca botão
|
|
|
41
41
|
|
|
42
42
|
## Galeria
|
|
43
43
|
|
|
44
|
-
> **Clique em qualquer imagem** para abri-la em popup na [galeria do demo](https://bsmagalhaes.github.io/rendra-
|
|
44
|
+
> **Clique em qualquer imagem** para abri-la em popup na [galeria do demo](https://bsmagalhaes.github.io/rendra-ui-web/galeria/), com setas para passar e Esc para fechar. (O GitHub não permite popup dentro do README; por isso as telas já aparecem em tamanho de leitura aqui e os grupos extras abrem na própria página.)
|
|
45
45
|
|
|
46
46
|
## Códigos de modelo
|
|
47
47
|
|
|
48
|
-
Cada escolha visual tem um código curto: **T** para o tema (formato e fonte), **C** para as cores e **M** para o menu. `T1-C4-M5`, por exemplo, é o tema Safira com as cores Ardósia e o menu superior. Escolha na [galeria](https://bsmagalhaes.github.io/rendra-
|
|
48
|
+
Cada escolha visual tem um código curto: **T** para o tema (formato e fonte), **C** para as cores e **M** para o menu. `T1-C4-M5`, por exemplo, é o tema Safira com as cores Ardósia e o menu superior. Escolha na [galeria](https://bsmagalhaes.github.io/rendra-ui-web/galeria/), onde cada captura mostra seu código e o bloco "Monte seu código" abre o demo já aplicado, e informe o código no briefing: a IA já sabe o que aplicar e pula essas perguntas.
|
|
49
49
|
|
|
50
50
|
| Tema | Cores | Menu |
|
|
51
51
|
| ------------------------------ | ---------------------------------------- | --------------------------------------------------- |
|
|
@@ -56,7 +56,7 @@ Cada escolha visual tem um código curto: **T** para o tema (formato e fonte), *
|
|
|
56
56
|
| | | **M5** menu superior com lista suspensa |
|
|
57
57
|
| | | **M6** menu superior com mega menu |
|
|
58
58
|
|
|
59
|
-
No demo, o endereço também aplica um código: [`/?codigo=T1-C4-M5`](https://bsmagalhaes.github.io/rendra-
|
|
59
|
+
No demo, o endereço também aplica um código: [`/?codigo=T1-C4-M5`](https://bsmagalhaes.github.io/rendra-ui-web/?codigo=T1-C4-M5). Os códigos ficam em [`src/config/presets.ts`](src/config/presets.ts).
|
|
60
60
|
|
|
61
61
|
### Os três templates
|
|
62
62
|
|
|
@@ -64,44 +64,44 @@ Cada template tem formato, fonte, símbolo e paleta próprios.
|
|
|
64
64
|
|
|
65
65
|
**Rendra Safira**: quadrado, como uma pedra lapidada. Azul #0B6FE0, verde #98D10A e fonte Poppins.
|
|
66
66
|
|
|
67
|
-
| Painel
|
|
68
|
-
|
|
|
69
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
67
|
+
| Painel | Listagem de clientes |
|
|
68
|
+
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
|
69
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=safira-painel) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=safira-clientes) |
|
|
70
70
|
|
|
71
71
|
**Rendra Equilíbrio**: o meio-termo, nem quadrado nem 100% arredondado. Violeta, ciano e fonte DM Sans.
|
|
72
72
|
|
|
73
|
-
| Painel
|
|
74
|
-
|
|
|
75
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
73
|
+
| Painel | Listagem de clientes |
|
|
74
|
+
| ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
75
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=equilibrio-painel) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=equilibrio-clientes) |
|
|
76
76
|
|
|
77
77
|
**Rendra Aurora**: 100% arredondado, como um novo dia. Verde-petróleo, laranja e fonte Inter.
|
|
78
78
|
|
|
79
|
-
| Painel
|
|
80
|
-
|
|
|
81
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
79
|
+
| Painel | Listagem de clientes |
|
|
80
|
+
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
|
81
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=aurora-painel) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=aurora-clientes) |
|
|
82
82
|
|
|
83
83
|
**Paleta Ardósia**: combinável com qualquer modelo. Azul-ardósia #2E414D e laranja #EA600D; com texto branco pedido, o gerador escurece o botão laranja para #C5510B, o tom mais próximo que passa AA (aqui no modelo Equilíbrio).
|
|
84
84
|
|
|
85
|
-
| Painel
|
|
86
|
-
|
|
|
87
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
85
|
+
| Painel | Listagem de clientes |
|
|
86
|
+
| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
87
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=ardosia-painel) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=ardosia-clientes) |
|
|
88
88
|
|
|
89
89
|
### Calendário, agenda e kanban
|
|
90
90
|
|
|
91
|
-
| Agenda da semana (T2-C2)
|
|
92
|
-
|
|
|
93
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
91
|
+
| Agenda da semana (T2-C2) | Kanban no celular (T1-C1) |
|
|
92
|
+
| --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
93
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=equilibrio-agenda) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=safira-kanban-mobile) |
|
|
94
94
|
|
|
95
95
|
<details>
|
|
96
96
|
<summary><strong>Tipos de menu: M1 a M6</strong> (clique para abrir aqui mesmo)</summary>
|
|
97
97
|
|
|
98
|
-
| M1: lateral recolhida, segunda barra
|
|
99
|
-
|
|
|
100
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
101
|
-
| **M3: lateral expandida, segunda barra**
|
|
102
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
103
|
-
| **M5: superior, lista suspensa**
|
|
104
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
98
|
+
| M1: lateral recolhida, segunda barra | M2: lateral recolhida, submenu na sidebar |
|
|
99
|
+
| ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
|
100
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=menu-m1) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=menu-m2) |
|
|
101
|
+
| **M3: lateral expandida, segunda barra** | **M4: lateral expandida, submenu na sidebar** |
|
|
102
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=menu-m3) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=menu-m4) |
|
|
103
|
+
| **M5: superior, lista suspensa** | **M6: superior, mega menu** |
|
|
104
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=menu-m5) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=menu-m6) |
|
|
105
105
|
|
|
106
106
|
</details>
|
|
107
107
|
|
|
@@ -110,11 +110,11 @@ Cada template tem formato, fonte, símbolo e paleta próprios.
|
|
|
110
110
|
|
|
111
111
|
O modelo (formato, fonte e símbolo) e a paleta (cores, degradês e sidebar) são camadas independentes: qualquer modelo aceita qualquer paleta. São 12 combinações (3 modelos × 4 paletas), todas na mesma tela de detalhe do cliente.
|
|
112
112
|
|
|
113
|
-
| Modelo \ Paleta | Safira
|
|
114
|
-
| --------------------------- |
|
|
115
|
-
| **Safira** (quadrado) | [](https://bsmagalhaes.github.io/rendra-
|
|
116
|
-
| **Equilíbrio** (meio-termo) | [](https://bsmagalhaes.github.io/rendra-
|
|
117
|
-
| **Aurora** (arredondado) | [](https://bsmagalhaes.github.io/rendra-
|
|
113
|
+
| Modelo \ Paleta | Safira | Equilíbrio | Aurora | Ardósia |
|
|
114
|
+
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
115
|
+
| **Safira** (quadrado) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-safira-safira) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-safira-equilibrio) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-safira-aurora) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-safira-ardosia) |
|
|
116
|
+
| **Equilíbrio** (meio-termo) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-equilibrio-safira) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-equilibrio-equilibrio) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-equilibrio-aurora) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-equilibrio-ardosia) |
|
|
117
|
+
| **Aurora** (arredondado) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-aurora-safira) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-aurora-equilibrio) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-aurora-aurora) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=matriz-aurora-ardosia) |
|
|
118
118
|
|
|
119
119
|
</details>
|
|
120
120
|
|
|
@@ -123,26 +123,26 @@ O modelo (formato, fonte e símbolo) e a paleta (cores, degradês e sidebar) sã
|
|
|
123
123
|
|
|
124
124
|
Mesmo componente, mesma API: no celular a tabela vira cards, a sidebar vira gaveta e a navegação ganha uma barra inferior.
|
|
125
125
|
|
|
126
|
-
| Safira
|
|
127
|
-
|
|
|
128
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
126
|
+
| Safira | Equilíbrio | Aurora | Tabela em cards |
|
|
127
|
+
| --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
128
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=safira-mobile) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=equilibrio-mobile) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=aurora-mobile) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=equilibrio-mobile-tabela) |
|
|
129
129
|
|
|
130
130
|
</details>
|
|
131
131
|
|
|
132
132
|
<details>
|
|
133
133
|
<summary><strong>Modo escuro e outras telas</strong> (clique para abrir aqui mesmo)</summary>
|
|
134
134
|
|
|
135
|
-
| Modo escuro (Safira)
|
|
136
|
-
|
|
|
137
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
135
|
+
| Modo escuro (Safira) | Modo escuro (Equilíbrio) |
|
|
136
|
+
| --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
137
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=safira-escuro) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=equilibrio-escuro) |
|
|
138
138
|
|
|
139
|
-
| Drawer com rodapé fixo (30/70)
|
|
140
|
-
|
|
|
141
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
139
|
+
| Drawer com rodapé fixo (30/70) | Mega menu no menu superior |
|
|
140
|
+
| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
141
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=safira-drawer) | [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=aurora-mega-menu) |
|
|
142
142
|
|
|
143
|
-
| Login (Aurora)
|
|
144
|
-
|
|
|
145
|
-
| [](https://bsmagalhaes.github.io/rendra-
|
|
143
|
+
| Login (Aurora) |
|
|
144
|
+
| ------------------------------------------------------------------------------------------------------------- |
|
|
145
|
+
| [](https://bsmagalhaes.github.io/rendra-ui-web/galeria/?imagem=aurora-login) |
|
|
146
146
|
|
|
147
147
|
</details>
|
|
148
148
|
|
|
@@ -205,7 +205,7 @@ Login, esqueci a senha, verificação em duas etapas (2FA), nova senha, cadastro
|
|
|
205
205
|
- **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.
|
|
206
206
|
- **Regressão visual** (`npm run test:visual`): 128 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.
|
|
207
207
|
- **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.
|
|
208
|
-
- **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.
|
|
208
|
+
- **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`).
|
|
209
209
|
- **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.
|
|
210
210
|
|
|
211
211
|
---
|
|
@@ -234,13 +234,13 @@ Todos apontam para o mesmo fluxo ([`AGENTS.md`](AGENTS.md)) e as mesmas regras (
|
|
|
234
234
|
**Para um projeto novo**, cole na sua IA:
|
|
235
235
|
|
|
236
236
|
```text
|
|
237
|
-
Clone https://github.com/bsmagalhaes/rendra-
|
|
237
|
+
Clone https://github.com/bsmagalhaes/rendra-ui-web e use como base do meu novo sistema. Siga o AGENTS.md do repositório.
|
|
238
238
|
```
|
|
239
239
|
|
|
240
240
|
**Para migrar o layout de um sistema existente**, abra a IA na pasta do seu sistema e cole:
|
|
241
241
|
|
|
242
242
|
```text
|
|
243
|
-
Aplique neste projeto o design system https://github.com/bsmagalhaes/rendra-
|
|
243
|
+
Aplique neste projeto o design system https://github.com/bsmagalhaes/rendra-ui-web. Leia, nesta ordem: https://github.com/bsmagalhaes/rendra-ui-web/blob/main/AGENTS.md, https://github.com/bsmagalhaes/rendra-ui-web/blob/main/DESIGN_RULES.md, https://github.com/bsmagalhaes/rendra-ui-web/blob/main/docs/PROMPT_MIGRACAO.md e https://github.com/bsmagalhaes/rendra-ui-web/blob/main/docs/COMO_APLICAR.md, e siga o fluxo de migração, começando pelo briefing.
|
|
244
244
|
```
|
|
245
245
|
|
|
246
246
|
A versão completa do prompt de migração, que escolhe entre os três caminhos (pacote npm, cópia de arquivos-fonte ou clone e refazer) e aponta para as regras no repositório de referência, está em [docs/PROMPT_MIGRACAO.md](docs/PROMPT_MIGRACAO.md). O roteiro do briefing está em [docs/BRIEFING_MODELO.md](docs/BRIEFING_MODELO.md).
|
|
@@ -328,7 +328,7 @@ Comece por este repositório (`degit`, ou clone e apague o `.git`) quando o proj
|
|
|
328
328
|
Os componentes são publicados como um **registry do shadcn/ui** junto com o demo. Para trazer a versão mais nova de um componente, com as dependências dele, num projeto que **não** nasceu deste boilerplate:
|
|
329
329
|
|
|
330
330
|
```bash
|
|
331
|
-
npx shadcn@latest add https://bsmagalhaes.github.io/rendra-
|
|
331
|
+
npx shadcn@latest add https://bsmagalhaes.github.io/rendra-ui-web/r/select.json
|
|
332
332
|
# ou, com o components.json do boilerplate:
|
|
333
333
|
npx shadcn@latest add @rendra/select
|
|
334
334
|
```
|
package/dist/base.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/*! Rendra Design System v2.2.
|
|
2
|
-
import { t as cn } from "./cn-
|
|
3
|
-
import { p as resolveCatalogCode } from "./components-
|
|
1
|
+
/*! Rendra Design System v2.2.2 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { t as cn } from "./cn-Bo1YMupg.js";
|
|
3
|
+
import { p as resolveCatalogCode } from "./components-Dl15AjD-.js";
|
|
4
4
|
import { Loader2 } from "lucide-react";
|
|
5
5
|
import { Slot } from "radix-ui";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -140,4 +140,4 @@ var Button = forwardRef(function Button({ className, variant, size, icon, iconRi
|
|
|
140
140
|
//#endregion
|
|
141
141
|
export { usePrefersReducedMotion as i, buttonVariants as n, Spinner as r, Button as t };
|
|
142
142
|
|
|
143
|
-
//# sourceMappingURL=button-
|
|
143
|
+
//# sourceMappingURL=button-BgSglLWN.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-
|
|
1
|
+
{"version":3,"file":"button-BgSglLWN.js","names":[],"sources":["../src/hooks/use-reduced-motion.ts","../src/components/ui/spinner.tsx","../src/components/ui/button.tsx"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\n/*\n * Único hook de leitura de \"menos movimento\" do sistema operacional (prefers-reduced-motion).\n * Usado pelo Spinner e pelo Progress indeterminado para parar a animação sem depender só do\n * CSS, e assim ficar testável (mocke matchMedia para simular a preferência).\n */\n\nfunction subscribe(cb: () => void) {\n const mq = matchMedia('(prefers-reduced-motion: reduce)')\n mq.addEventListener('change', cb)\n return () => mq.removeEventListener('change', cb)\n}\n\nfunction getCurrent() {\n return matchMedia('(prefers-reduced-motion: reduce)').matches\n}\n\nexport function usePrefersReducedMotion() {\n return useSyncExternalStore(subscribe, getCurrent, () => false)\n}\n","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","import { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\nimport { resolveCatalogCode } from '@/catalog/components'\nimport { Spinner } from '@/components/ui/spinner'\nimport { cn } from '@/lib/cn'\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-150 ease-out select-none active:scale-98 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\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 classes = cn(buttonVariants({ variant, size, iconOnly, fullWidth }), className)\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 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":";;;;;;;;;AAQA,SAAS,UAAU,IAAgB;CACjC,MAAM,KAAK,WAAW,kCAAkC;CACxD,GAAG,iBAAiB,UAAU,EAAE;CAChC,aAAa,GAAG,oBAAoB,UAAU,EAAE;AAClD;AAEA,SAAS,aAAa;CACpB,OAAO,WAAW,kCAAkC,CAAC,CAAC;AACxD;AAEA,SAAgB,0BAA0B;CACxC,OAAO,qBAAqB,WAAW,kBAAkB,KAAK;AAChE;;;ACFA,IAAM,YAA+D;CACnE,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,QAAQ,EAAE,OAAO,MAAM,OAAO,aAA2B;CACvE,MAAM,UAAU,wBAAwB;CACxC,MAAM,OACJ,oBAAC,SAAD;EAAS,eAAA;EAAY,WAAW,GAAG,UAAU,OAAO,UAAU,KAAK,cAAc;CAAI,CAAA;CAGvF,IAAI,CAAC,OACH,OACE,oBAAC,QAAD;EAAM,eAAY;EAAW,eAAA;EAAY,WAAW,GAAG,eAAe,SAAS;EAC5E,UAAA;CACG,CAAA;CAIV,OACE,qBAAC,QAAD;EACE,eAAY;EACZ,MAAK;EACL,WAAW,GAAG,kCAAkC,SAAS;EAH3D,UAAA,CAKG,MACD,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA,CACnC;;AAEV;;;;;;;;ACpCA,IAAa,iBAAiB,IAC5B,uaACA;CACE,UAAU;EACR,SAAS;GAEP,SACE;GACF,WACE;GACF,SACE;GAEF,OACE;GACF,aACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,UAAU;GAAE,MAAM;GAAQ,OAAO;EAAG;EACpC,WAAW;GAAE,MAAM;GAAU,OAAO;EAAG;CACzC;CACA,kBAAkB;EAChB;GAAE,UAAU;GAAM,MAAM;GAAM,WAAW;EAAe;EACxD;GAAE,UAAU;GAAM,MAAM;GAAM,WAAW;EAAe;EACxD;GAAE,UAAU;GAAM,MAAM;GAAM,WAAW;EAAe;EACxD;GAAE,SAAS;GAAQ,WAAW;EAAc;CAC9C;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,UAAU;EAAO,WAAW;CAAM;AACvF,CACF;AAoBA,IAAa,SAAS,WAA2C,SAAS,OACxE,EACE,WACA,SACA,MACA,MACA,WACA,WAAW,OACX,UAAU,OACV,YAAY,OACZ,UAAU,OACV,UACA,OAAO,UACP,UACA,GAAG,SAEL,KACA;CAIA,MAAM,UAAU,GAAG,eAAe;EAAE;EAAS;EAAM;EAAU;CAAU,CAAC,GAAG,SAAS;CACpF,MAAM,OAAO,mBAAmB,UAAU,EAAE,SAAS,WAAW,UAAU,CAAC;CAE3E,IAAI,SACF,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,eAAa;EAAM,WAAW;EAAS,GAAI;EAC7D;CACQ,CAAA;CAMf,MAAM,UAAU,UAAU,oBAAC,SAAD,EAAS,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,IAAI;CAC3E,OACE,qBAAC,UAAD;EACO;EACC;EACN,eAAa;EACb,WAAW;EACX,UAAU,YAAY;EACtB,aAAW,WAAW,KAAA;EACtB,GAAI;EAPN,UAAA;GASG;GACA,WAAY,UAAU,OAAO,WAAY;GACzC,CAAC,YAAY;EACR;;AAEZ,CAAC"}
|
package/dist/chart.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/*! Rendra Design System v2.2.
|
|
2
|
-
import { t as cn } from "./cn-
|
|
3
|
-
import { p as resolveCatalogCode } from "./components-
|
|
4
|
-
import { t as Button } from "./button-
|
|
5
|
-
import { n as useBreakpoint } from "./use-breakpoint-
|
|
1
|
+
/*! Rendra Design System v2.2.2 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { t as cn } from "./cn-Bo1YMupg.js";
|
|
3
|
+
import { p as resolveCatalogCode } from "./components-Dl15AjD-.js";
|
|
4
|
+
import { t as Button } from "./button-BgSglLWN.js";
|
|
5
|
+
import { n as useBreakpoint } from "./use-breakpoint-BUHd0Cbz.js";
|
|
6
6
|
import { ArrowDown, BarChart3, List } from "lucide-react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { useId, useRef, useState } from "react";
|
package/dist/cli/auditar.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.2.
|
|
1
|
+
/*! Rendra Design System v2.2.2 | 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.
|
|
2
|
-
import { t as CATALOG } from "../components-
|
|
1
|
+
/*! Rendra Design System v2.2.2 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { t as CATALOG } from "../components-Dl15AjD-.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() {
|
package/dist/cli/help.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.2.
|
|
1
|
+
/*! Rendra Design System v2.2.2 | 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";
|
package/dist/cli/trocar.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/*! Rendra Design System v2.2.
|
|
2
|
-
import { f as getCatalogEntry } from "../components-
|
|
1
|
+
/*! Rendra Design System v2.2.2 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { f as getCatalogEntry } from "../components-Dl15AjD-.js";
|
|
3
3
|
import { existsSync, readFileSync, readdirSync, statSync, writeFileSync } from "node:fs";
|
|
4
4
|
import { join, relative, sep } from "node:path";
|
|
5
5
|
//#region src/cli/trocar.ts
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.2.
|
|
1
|
+
/*! Rendra Design System v2.2.2 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
2
|
import { join } from "node:path";
|
|
3
3
|
import { createRequire } from "node:module";
|
|
4
4
|
import { pathToFileURL } from "node:url";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.2.
|
|
1
|
+
/*! Rendra Design System v2.2.2 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
2
|
import { clsx } from "clsx";
|
|
3
3
|
import { extendTailwindMerge } from "tailwind-merge";
|
|
4
4
|
//#region src/lib/cn.ts
|
|
@@ -19,4 +19,4 @@ function cn(...inputs) {
|
|
|
19
19
|
//#endregion
|
|
20
20
|
export { cn as t };
|
|
21
21
|
|
|
22
|
-
//# sourceMappingURL=cn-
|
|
22
|
+
//# sourceMappingURL=cn-Bo1YMupg.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cn-
|
|
1
|
+
{"version":3,"file":"cn-Bo1YMupg.js","names":[],"sources":["../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n// Ensina o tailwind-merge sobre os tokens próprios, para que text-xs e text-primary-text\n// não sejam tratados como conflito, e h-control-md substitua h-12 corretamente. text-label e\n// text-help são tamanho (rótulo e orientação do campo); text-label-foreground é cor.\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n 'font-size': [{ text: ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', 'label', 'help'] }],\n },\n },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;AAMA,IAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,aAAa,EACX,aAAa,CAAC,EAAE,MAAM;CAAC;CAAM;CAAM;CAAQ;CAAM;CAAM;CAAO;CAAO;CAAS;AAAM,EAAE,CAAC,EACzF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Rendra Design System v2.2.
|
|
1
|
+
/*! Rendra Design System v2.2.2 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
2
|
//#region src/catalog/components.ts
|
|
3
3
|
/** Formato do código: de 3 a 4 letras maiúsculas, hífen, três dígitos. */
|
|
4
4
|
var COMPONENT_CODE_PATTERN = /^[A-Z]{3,4}-\d{3}$/;
|
|
@@ -797,4 +797,4 @@ function assertCatalogIntegrity() {
|
|
|
797
797
|
//#endregion
|
|
798
798
|
export { catalogByComponent as a, findComponentsWithoutDefault as c, findPresetCollisions as d, getCatalogEntry as f, assertCatalogIntegrity as i, findDuplicateCodes as l, CATALOG_EXCLUDED_FILES as n, filesMissingCatalogEntry as o, resolveCatalogCode as p, COMPONENT_CODE_PATTERN as r, findComponentsWithMultipleDefaults as s, CATALOG as t, findInvalidFormatCodes as u };
|
|
799
799
|
|
|
800
|
-
//# sourceMappingURL=components-
|
|
800
|
+
//# sourceMappingURL=components-Dl15AjD-.js.map
|