@mvr-ui/components 1.0.75 → 1.0.76
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 +211 -211
- package/dist/page.d.mts +1 -0
- package/dist/page.d.ts +1 -0
- package/package.json +69 -69
package/README.md
CHANGED
|
@@ -1,212 +1,212 @@
|
|
|
1
|
-
# @marcos-vinicius-rodrigues/components
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
Esta é uma biblioteca de **componentes reutilizáveis** feita para aplicações em **React** e **Next.js**, com foco em produtividade, padronização visual e integração com formulários modernos.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
> ⚠️ Para utilizar esta biblioteca, é necessário ativar a licença via `LicenseProvider` com uma senha de acesso.
|
|
10
|
-
|
|
11
|
-
> Entre em contato com **@marcos-vinicius-rodrigues** para solicitar a sua chave de uso.
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
---
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
## 📦 Instalação
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
Você pode instalar via **npm** ou **yarn**:
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
|
|
29
|
-
npm install @marcos-vinicius-rodrigues/components
|
|
30
|
-
|
|
31
|
-
# ou
|
|
32
|
-
|
|
33
|
-
yarn add @marcos-vinicius-rodrigues/components
|
|
34
|
-
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
---
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
## 🔐 Ativação com LicenseProvider
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
Para que os componentes funcionem corretamente, é necessário envolver sua aplicação com o `LicenseProvider` e fornecer a senha de ativação:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
```tsx
|
|
52
|
-
|
|
53
|
-
import { LicenseProvider } from '@marcos-vinicius-rodrigues/components'
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
function App() {
|
|
58
|
-
|
|
59
|
-
return (
|
|
60
|
-
|
|
61
|
-
<LicenseProvider licenseKey="SUA_SENHA_AQUI">
|
|
62
|
-
|
|
63
|
-
{/* seus componentes aqui */}
|
|
64
|
-
|
|
65
|
-
</LicenseProvider>
|
|
66
|
-
|
|
67
|
-
)
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
---
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
## 🧩 Componentes Disponíveis
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
A biblioteca disponibiliza os seguintes componentes:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
### Campos de Formulário
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
- `CheckBox`
|
|
92
|
-
|
|
93
|
-
- `Input`
|
|
94
|
-
|
|
95
|
-
- `Label`
|
|
96
|
-
|
|
97
|
-
- `Radio`
|
|
98
|
-
|
|
99
|
-
- `Select`
|
|
100
|
-
|
|
101
|
-
- `Switch`
|
|
102
|
-
|
|
103
|
-
- `TextArea`
|
|
104
|
-
|
|
105
|
-
- `ValidateField` (validação de campos)
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
Todos os componentes são escritos em **TypeScript**, com suporte completo ao **React Hook Form**, mas funcionam de forma independente também.
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
---
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
## 🛠️ Exemplo de Uso
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
```tsx
|
|
122
|
-
|
|
123
|
-
import { Input, Label, ValidateField } from '@marcos-vinicius-rodrigues/components'
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
function MyForm() {
|
|
128
|
-
|
|
129
|
-
return (
|
|
130
|
-
|
|
131
|
-
<form>
|
|
132
|
-
|
|
133
|
-
<Label htmlFor="name">Nome</Label>
|
|
134
|
-
|
|
135
|
-
<Input id="name" placeholder="Digite seu nome" />
|
|
136
|
-
|
|
137
|
-
<ValidateField name="name" message="Campo obrigatório" />
|
|
138
|
-
|
|
139
|
-
</form>
|
|
140
|
-
|
|
141
|
-
)
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
---
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
## 💡 Requisitos
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
- React 18+
|
|
158
|
-
|
|
159
|
-
- TypeScript
|
|
160
|
-
|
|
161
|
-
- Tailwind CSS (opcional, mas recomendado para estilos nativos)
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
---
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
## 📞 Suporte
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
Entre em contato com [Marcos Vinicius Rodrigues](mailto:marcos.vinicius.engsof@gmail.com) para:
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
- Solicitar a senha de ativação
|
|
178
|
-
|
|
179
|
-
- Reportar bugs ou solicitar novos componentes
|
|
180
|
-
|
|
181
|
-
- Contribuir com melhorias
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
---
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
## 🚀 Futuras melhorias
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
- 📌 Mais componentes visuais (modais, toasts, tooltips, etc.)
|
|
194
|
-
|
|
195
|
-
- 🌙 Suporte nativo a temas (light/dark)
|
|
196
|
-
|
|
197
|
-
- 🧪 Testes automatizados
|
|
198
|
-
|
|
199
|
-
- 📚 Documentação completa com Storybook
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
---
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
## 📝 Licença
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
Uso restrito mediante autorização.
|
|
211
|
-
|
|
1
|
+
# @marcos-vinicius-rodrigues/components
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
Esta é uma biblioteca de **componentes reutilizáveis** feita para aplicações em **React** e **Next.js**, com foco em produtividade, padronização visual e integração com formulários modernos.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
> ⚠️ Para utilizar esta biblioteca, é necessário ativar a licença via `LicenseProvider` com uma senha de acesso.
|
|
10
|
+
|
|
11
|
+
> Entre em contato com **@marcos-vinicius-rodrigues** para solicitar a sua chave de uso.
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## 📦 Instalação
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
Você pode instalar via **npm** ou **yarn**:
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
|
|
29
|
+
npm install @marcos-vinicius-rodrigues/components
|
|
30
|
+
|
|
31
|
+
# ou
|
|
32
|
+
|
|
33
|
+
yarn add @marcos-vinicius-rodrigues/components
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
## 🔐 Ativação com LicenseProvider
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
Para que os componentes funcionem corretamente, é necessário envolver sua aplicação com o `LicenseProvider` e fornecer a senha de ativação:
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
|
|
53
|
+
import { LicenseProvider } from '@marcos-vinicius-rodrigues/components'
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
function App() {
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
|
|
61
|
+
<LicenseProvider licenseKey="SUA_SENHA_AQUI">
|
|
62
|
+
|
|
63
|
+
{/* seus componentes aqui */}
|
|
64
|
+
|
|
65
|
+
</LicenseProvider>
|
|
66
|
+
|
|
67
|
+
)
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
## 🧩 Componentes Disponíveis
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
A biblioteca disponibiliza os seguintes componentes:
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
### Campos de Formulário
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
- `CheckBox`
|
|
92
|
+
|
|
93
|
+
- `Input`
|
|
94
|
+
|
|
95
|
+
- `Label`
|
|
96
|
+
|
|
97
|
+
- `Radio`
|
|
98
|
+
|
|
99
|
+
- `Select`
|
|
100
|
+
|
|
101
|
+
- `Switch`
|
|
102
|
+
|
|
103
|
+
- `TextArea`
|
|
104
|
+
|
|
105
|
+
- `ValidateField` (validação de campos)
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
Todos os componentes são escritos em **TypeScript**, com suporte completo ao **React Hook Form**, mas funcionam de forma independente também.
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
## 🛠️ Exemplo de Uso
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
|
|
123
|
+
import { Input, Label, ValidateField } from '@marcos-vinicius-rodrigues/components'
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
function MyForm() {
|
|
128
|
+
|
|
129
|
+
return (
|
|
130
|
+
|
|
131
|
+
<form>
|
|
132
|
+
|
|
133
|
+
<Label htmlFor="name">Nome</Label>
|
|
134
|
+
|
|
135
|
+
<Input id="name" placeholder="Digite seu nome" />
|
|
136
|
+
|
|
137
|
+
<ValidateField name="name" message="Campo obrigatório" />
|
|
138
|
+
|
|
139
|
+
</form>
|
|
140
|
+
|
|
141
|
+
)
|
|
142
|
+
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
## 💡 Requisitos
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
- React 18+
|
|
158
|
+
|
|
159
|
+
- TypeScript
|
|
160
|
+
|
|
161
|
+
- Tailwind CSS (opcional, mas recomendado para estilos nativos)
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
## 📞 Suporte
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
Entre em contato com [Marcos Vinicius Rodrigues](mailto:marcos.vinicius.engsof@gmail.com) para:
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
- Solicitar a senha de ativação
|
|
178
|
+
|
|
179
|
+
- Reportar bugs ou solicitar novos componentes
|
|
180
|
+
|
|
181
|
+
- Contribuir com melhorias
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
## 🚀 Futuras melhorias
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
- 📌 Mais componentes visuais (modais, toasts, tooltips, etc.)
|
|
194
|
+
|
|
195
|
+
- 🌙 Suporte nativo a temas (light/dark)
|
|
196
|
+
|
|
197
|
+
- 🧪 Testes automatizados
|
|
198
|
+
|
|
199
|
+
- 📚 Documentação completa com Storybook
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
## 📝 Licença
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
Uso restrito mediante autorização.
|
|
211
|
+
|
|
212
212
|
Todos os direitos reservados © [Marcos Vinicius Rodrigues](mailto:marcos.vinicius.engsof@gmail.com)
|
package/dist/page.d.mts
CHANGED
|
@@ -261,6 +261,7 @@ declare const SelectPrimitive: typeof Select;
|
|
|
261
261
|
interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
262
262
|
label?: string;
|
|
263
263
|
description?: string;
|
|
264
|
+
checked?: boolean;
|
|
264
265
|
className?: string;
|
|
265
266
|
overrideClassName?: boolean;
|
|
266
267
|
error?: string;
|
package/dist/page.d.ts
CHANGED
|
@@ -261,6 +261,7 @@ declare const SelectPrimitive: typeof Select;
|
|
|
261
261
|
interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
262
262
|
label?: string;
|
|
263
263
|
description?: string;
|
|
264
|
+
checked?: boolean;
|
|
264
265
|
className?: string;
|
|
265
266
|
overrideClassName?: boolean;
|
|
266
267
|
error?: string;
|
package/package.json
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@mvr-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"sideEffects": false,
|
|
5
|
-
"main": "dist/page.cjs",
|
|
6
|
-
"module": "dist/page.js",
|
|
7
|
-
"types": "dist/page.d.ts",
|
|
8
|
-
"files": [
|
|
9
|
-
"dist",
|
|
10
|
-
"README.md"
|
|
11
|
-
],
|
|
12
|
-
"exports": {
|
|
13
|
-
".": {
|
|
14
|
-
"import": "./dist/page.mjs",
|
|
15
|
-
"require": "./dist/page.js",
|
|
16
|
-
"types": "./dist/page.d.ts"
|
|
17
|
-
},
|
|
18
|
-
"./dist/mvr-ui.css": "./dist/mvr-ui.css",
|
|
19
|
-
"./styles.css": "./dist/mvr-ui.css"
|
|
20
|
-
},
|
|
21
|
-
"scripts": {
|
|
22
|
-
"build": "npm run build:ts && npm run build:css",
|
|
23
|
-
"build:css": "npx @tailwindcss/cli -i app/components/globals.css -o dist/mvr-ui.css --minify",
|
|
24
|
-
"build:ts": "npx tsup",
|
|
25
|
-
"patch": "npm version patch",
|
|
26
|
-
"rise": "npm version patch && npm publish",
|
|
27
|
-
"license": "bash ./scripts/license/license.sh",
|
|
28
|
-
"reset": "npm cache clean --force && rm -rf node_modules package-lock.json && npm install"
|
|
29
|
-
},
|
|
30
|
-
"dependencies": {
|
|
31
|
-
"tailwind-merge": "^3.3.1"
|
|
32
|
-
},
|
|
33
|
-
"devDependencies": {
|
|
34
|
-
"@tailwindcss/postcss": "^4.1.16",
|
|
35
|
-
"@types/node": "^24.0.10",
|
|
36
|
-
"@types/react": "^19.1.8",
|
|
37
|
-
"@types/react-dom": "^19.1.6",
|
|
38
|
-
"autoprefixer": "^10.4.21",
|
|
39
|
-
"clsx": "^2.1.1",
|
|
40
|
-
"postcss": "^8.5.6",
|
|
41
|
-
"postcss-cli": "^11.0.1",
|
|
42
|
-
"tailwindcss": "^4.1.16",
|
|
43
|
-
"tailwindcss-animate": "^1.0.7",
|
|
44
|
-
"tsup": "^7.2.0",
|
|
45
|
-
"tw-animate-css": "^1.4.0",
|
|
46
|
-
"typescript": "^5.8.3"
|
|
47
|
-
},
|
|
48
|
-
"peerDependencies": {
|
|
49
|
-
"autoprefixer": "^10.4.21",
|
|
50
|
-
"clsx": "^2.1.1",
|
|
51
|
-
"next": ">=14.0.0",
|
|
52
|
-
"postcss": "^8.5.6",
|
|
53
|
-
"react": ">=18.0.0",
|
|
54
|
-
"react-dom": ">=18.0.0",
|
|
55
|
-
"react-hook-form": "^7.43.0 || ^7.59.0",
|
|
56
|
-
"tailwindcss": "^4.1.11"
|
|
57
|
-
},
|
|
58
|
-
"peerDependenciesMeta": {
|
|
59
|
-
"tailwindcss": {
|
|
60
|
-
"optional": true
|
|
61
|
-
},
|
|
62
|
-
"autoprefixer": {
|
|
63
|
-
"optional": true
|
|
64
|
-
},
|
|
65
|
-
"postcss": {
|
|
66
|
-
"optional": true
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@mvr-ui/components",
|
|
3
|
+
"version": "1.0.76",
|
|
4
|
+
"sideEffects": false,
|
|
5
|
+
"main": "dist/page.cjs",
|
|
6
|
+
"module": "dist/page.js",
|
|
7
|
+
"types": "dist/page.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md"
|
|
11
|
+
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./dist/page.mjs",
|
|
15
|
+
"require": "./dist/page.js",
|
|
16
|
+
"types": "./dist/page.d.ts"
|
|
17
|
+
},
|
|
18
|
+
"./dist/mvr-ui.css": "./dist/mvr-ui.css",
|
|
19
|
+
"./styles.css": "./dist/mvr-ui.css"
|
|
20
|
+
},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"build": "npm run build:ts && npm run build:css",
|
|
23
|
+
"build:css": "npx @tailwindcss/cli -i app/components/globals.css -o dist/mvr-ui.css --minify",
|
|
24
|
+
"build:ts": "npx tsup",
|
|
25
|
+
"patch": "npm version patch",
|
|
26
|
+
"rise": "npm version patch && npm publish",
|
|
27
|
+
"license": "bash ./scripts/license/license.sh",
|
|
28
|
+
"reset": "npm cache clean --force && rm -rf node_modules package-lock.json && npm install"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"tailwind-merge": "^3.3.1"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@tailwindcss/postcss": "^4.1.16",
|
|
35
|
+
"@types/node": "^24.0.10",
|
|
36
|
+
"@types/react": "^19.1.8",
|
|
37
|
+
"@types/react-dom": "^19.1.6",
|
|
38
|
+
"autoprefixer": "^10.4.21",
|
|
39
|
+
"clsx": "^2.1.1",
|
|
40
|
+
"postcss": "^8.5.6",
|
|
41
|
+
"postcss-cli": "^11.0.1",
|
|
42
|
+
"tailwindcss": "^4.1.16",
|
|
43
|
+
"tailwindcss-animate": "^1.0.7",
|
|
44
|
+
"tsup": "^7.2.0",
|
|
45
|
+
"tw-animate-css": "^1.4.0",
|
|
46
|
+
"typescript": "^5.8.3"
|
|
47
|
+
},
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"autoprefixer": "^10.4.21",
|
|
50
|
+
"clsx": "^2.1.1",
|
|
51
|
+
"next": ">=14.0.0",
|
|
52
|
+
"postcss": "^8.5.6",
|
|
53
|
+
"react": ">=18.0.0",
|
|
54
|
+
"react-dom": ">=18.0.0",
|
|
55
|
+
"react-hook-form": "^7.43.0 || ^7.59.0",
|
|
56
|
+
"tailwindcss": "^4.1.11"
|
|
57
|
+
},
|
|
58
|
+
"peerDependenciesMeta": {
|
|
59
|
+
"tailwindcss": {
|
|
60
|
+
"optional": true
|
|
61
|
+
},
|
|
62
|
+
"autoprefixer": {
|
|
63
|
+
"optional": true
|
|
64
|
+
},
|
|
65
|
+
"postcss": {
|
|
66
|
+
"optional": true
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|