villela-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +596 -0
  2. package/dist/index.d.mts +249 -0
  3. package/dist/index.d.ts +249 -0
  4. package/dist/index.js +409 -0
  5. package/dist/index.mjs +377 -0
  6. package/package.json +44 -0
package/dist/index.d.mts ADDED
@@ -0,0 +1,249 @@
1
+ import React, { FC, MouseEvent, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
2
+
3
+ declare const colors: {
4
+ palette: {
5
+ primary: `var(--${string})`;
6
+ secundary: `var(--${string})`;
7
+ tertiary: `var(--${string})`;
8
+ quaternary: `var(--${string})`;
9
+ quinary: `var(--${string})`;
10
+ };
11
+ toning: {
12
+ primary: {
13
+ t30: `var(--${string})`;
14
+ t50: `var(--${string})`;
15
+ t60: `var(--${string})`;
16
+ t70: `var(--${string})`;
17
+ t80: `var(--${string})`;
18
+ t90: `var(--${string})`;
19
+ };
20
+ error: {
21
+ t30: `var(--${string})`;
22
+ t50: `var(--${string})`;
23
+ t60: `var(--${string})`;
24
+ t70: `var(--${string})`;
25
+ t80: `var(--${string})`;
26
+ t90: `var(--${string})`;
27
+ };
28
+ success: {
29
+ t30: `var(--${string})`;
30
+ t50: `var(--${string})`;
31
+ t60: `var(--${string})`;
32
+ t70: `var(--${string})`;
33
+ t80: `var(--${string})`;
34
+ t90: `var(--${string})`;
35
+ };
36
+ warning: {
37
+ t30: `var(--${string})`;
38
+ t50: `var(--${string})`;
39
+ t60: `var(--${string})`;
40
+ t70: `var(--${string})`;
41
+ t80: `var(--${string})`;
42
+ t90: `var(--${string})`;
43
+ };
44
+ base: {
45
+ t30: `var(--${string})`;
46
+ t50: `var(--${string})`;
47
+ t60: `var(--${string})`;
48
+ t70: `var(--${string})`;
49
+ t80: `var(--${string})`;
50
+ t90: `var(--${string})`;
51
+ };
52
+ };
53
+ text: {
54
+ primary: {
55
+ T60: `var(--${string})`;
56
+ T30: `var(--${string})`;
57
+ T10: `var(--${string})`;
58
+ T05: `var(--${string})`;
59
+ TO1: `var(--${string})`;
60
+ };
61
+ secundary: {
62
+ T60: `var(--${string})`;
63
+ T30: `var(--${string})`;
64
+ T10: `var(--${string})`;
65
+ T05: `var(--${string})`;
66
+ TO1: `var(--${string})`;
67
+ };
68
+ error: {
69
+ T60L: `var(--${string})`;
70
+ T30: `var(--${string})`;
71
+ T10: `var(--${string})`;
72
+ T05: `var(--${string})`;
73
+ TO1: `var(--${string})`;
74
+ };
75
+ success: {
76
+ T60: `var(--${string})`;
77
+ T30: `var(--${string})`;
78
+ T10: `var(--${string})`;
79
+ T05: `var(--${string})`;
80
+ T01: `var(--${string})`;
81
+ };
82
+ warning: {
83
+ T60: `var(--${string})`;
84
+ T30: `var(--${string})`;
85
+ T10: `var(--${string})`;
86
+ TO5: `var(--${string})`;
87
+ T01: `var(--${string})`;
88
+ };
89
+ };
90
+ };
91
+
92
+ /**
93
+ * ESPAÇAMENTO — escala baseada em múltiplos de 4px
94
+ *
95
+ * Use sempre um valor desta escala para padding, margin e gap.
96
+ * Nunca use valores arbitrários como 7px, 13px, etc.
97
+ *
98
+ * Nomenclatura:
99
+ * space[N] onde N = valor em px
100
+ */
101
+ declare const spacing: {
102
+ space: {
103
+ 0: `var(--${string})`;
104
+ 1: `var(--${string})`;
105
+ 2: `var(--${string})`;
106
+ 3: `var(--${string})`;
107
+ 4: `var(--${string})`;
108
+ 5: `var(--${string})`;
109
+ 6: `var(--${string})`;
110
+ 7: `var(--${string})`;
111
+ 8: `var(--${string})`;
112
+ 9: `var(--${string})`;
113
+ 10: `var(--${string})`;
114
+ 12: `var(--${string})`;
115
+ 14: `var(--${string})`;
116
+ 16: `var(--${string})`;
117
+ 20: `var(--${string})`;
118
+ 24: `var(--${string})`;
119
+ 28: `var(--${string})`;
120
+ 32: `var(--${string})`;
121
+ 36: `var(--${string})`;
122
+ 40: `var(--${string})`;
123
+ 48: `var(--${string})`;
124
+ 56: `var(--${string})`;
125
+ 64: `var(--${string})`;
126
+ };
127
+ };
128
+
129
+ /**
130
+ * TIPOGRAFIA
131
+ *
132
+ * TODO: substituir `fontFamily.sans` pela fonte real do Figma.
133
+ * Se for uma fonte do Google Fonts, adicionar o import no index.html / _document.tsx.
134
+ */
135
+ declare const typography: {
136
+ fontFamily: `var(--${string})`;
137
+ };
138
+
139
+ /**
140
+ * BORDER RADIUS
141
+ *
142
+ * TODO: verificar no Figma o raio padrão da marca.
143
+ * Marcas mais "sérias" tendem a usar radii menores (2-4px).
144
+ * Marcas mais "amigáveis" tendem a usar radii maiores (8-12px).
145
+ */
146
+ declare const radii: {
147
+ width: {
148
+ small: `var(--${string})`;
149
+ medium: `var(--${string})`;
150
+ large: `var(--${string})`;
151
+ };
152
+ radius: {
153
+ small: `var(--${string})`;
154
+ medium: `var(--${string})`;
155
+ large: `var(--${string})`;
156
+ rounded: `var(--${string})`;
157
+ };
158
+ };
159
+
160
+ /**
161
+ * SOMBRAS — por nível de elevação
162
+ *
163
+ * Cada nível representa uma "altura" visual do elemento em relação ao fundo.
164
+ * Use o nível mais baixo possível — sombras excessivas geram ruído visual.
165
+ *
166
+ * Níveis:
167
+ * xs → hover states, elementos com elevação mínima
168
+ * sm → cards, inputs com foco
169
+ * md → dropdowns, popovers, tooltips
170
+ * lg → modais, painéis laterais (drawers)
171
+ * xl → overlays de alta prioridade
172
+ */
173
+ declare const shadows: {
174
+ shadow: {
175
+ none: `var(--${string})`;
176
+ xs: `var(--${string})`;
177
+ sm: `var(--${string})`;
178
+ md: `var(--${string})`;
179
+ lg: `var(--${string})`;
180
+ xl: `var(--${string})`;
181
+ };
182
+ };
183
+
184
+ type ButtonVariant = "primary" | "secondary" | "tertiary";
185
+ type ButtonColor = "brand" | "error" | "warning" | "success";
186
+ type ButtonSize = "xl" | "lg" | "md" | "sm" | "icon";
187
+ type ButtonProps = {
188
+ text?: string;
189
+ variant?: ButtonVariant;
190
+ color?: ButtonColor;
191
+ size?: ButtonSize;
192
+ pill?: boolean;
193
+ iconBefore?: React.ReactNode;
194
+ iconAfter?: React.ReactNode;
195
+ isLoading?: boolean;
196
+ disabled?: boolean;
197
+ onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
198
+ htmlType?: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>["type"];
199
+ style?: React.CSSProperties;
200
+ className?: string;
201
+ };
202
+ declare const Button: FC<ButtonProps>;
203
+
204
+ type InputProps = {
205
+ label?: string;
206
+ placeholder?: string;
207
+ icon?: React.ReactNode;
208
+ type?: "text" | "password" | "email" | "number" | "tel" | "search";
209
+ error?: string;
210
+ helperText?: string;
211
+ maxLength?: number;
212
+ multiline?: boolean;
213
+ rows?: number;
214
+ forgotPasswordLabel?: string;
215
+ onForgotPassword?: () => void;
216
+ value?: string;
217
+ onChange?: (value: string) => void;
218
+ disabled?: boolean;
219
+ id?: string;
220
+ className?: string;
221
+ };
222
+ declare const Input: FC<InputProps>;
223
+
224
+ type CardValueColor = "default" | "brand" | "success" | "error" | "warning";
225
+ type CardProps = {
226
+ label: string;
227
+ value: string | number;
228
+ icon?: React.ReactNode;
229
+ iconBackground?: boolean;
230
+ sublabel?: string;
231
+ description?: string;
232
+ valueColor?: CardValueColor;
233
+ className?: string;
234
+ };
235
+ declare const Card: FC<CardProps>;
236
+
237
+ type TagColor = "brand" | "warning" | "error" | "success" | "neutral";
238
+ type TagVariant = "filled" | "outlined";
239
+ type TagSize = "lg" | "md" | "sm";
240
+ type TagProps = {
241
+ label: string;
242
+ color?: TagColor;
243
+ variant?: TagVariant;
244
+ size?: TagSize;
245
+ onRemove?: () => void;
246
+ };
247
+ declare const Tag: FC<TagProps>;
248
+
249
+ export { Button, type ButtonProps, Card, type CardProps, type CardValueColor, Input, type InputProps, Tag, type TagColor, type TagProps, type TagSize, type TagVariant, colors, radii, shadows, spacing, typography };
package/dist/index.d.ts ADDED
@@ -0,0 +1,249 @@
1
+ import React, { FC, MouseEvent, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
2
+
3
+ declare const colors: {
4
+ palette: {
5
+ primary: `var(--${string})`;
6
+ secundary: `var(--${string})`;
7
+ tertiary: `var(--${string})`;
8
+ quaternary: `var(--${string})`;
9
+ quinary: `var(--${string})`;
10
+ };
11
+ toning: {
12
+ primary: {
13
+ t30: `var(--${string})`;
14
+ t50: `var(--${string})`;
15
+ t60: `var(--${string})`;
16
+ t70: `var(--${string})`;
17
+ t80: `var(--${string})`;
18
+ t90: `var(--${string})`;
19
+ };
20
+ error: {
21
+ t30: `var(--${string})`;
22
+ t50: `var(--${string})`;
23
+ t60: `var(--${string})`;
24
+ t70: `var(--${string})`;
25
+ t80: `var(--${string})`;
26
+ t90: `var(--${string})`;
27
+ };
28
+ success: {
29
+ t30: `var(--${string})`;
30
+ t50: `var(--${string})`;
31
+ t60: `var(--${string})`;
32
+ t70: `var(--${string})`;
33
+ t80: `var(--${string})`;
34
+ t90: `var(--${string})`;
35
+ };
36
+ warning: {
37
+ t30: `var(--${string})`;
38
+ t50: `var(--${string})`;
39
+ t60: `var(--${string})`;
40
+ t70: `var(--${string})`;
41
+ t80: `var(--${string})`;
42
+ t90: `var(--${string})`;
43
+ };
44
+ base: {
45
+ t30: `var(--${string})`;
46
+ t50: `var(--${string})`;
47
+ t60: `var(--${string})`;
48
+ t70: `var(--${string})`;
49
+ t80: `var(--${string})`;
50
+ t90: `var(--${string})`;
51
+ };
52
+ };
53
+ text: {
54
+ primary: {
55
+ T60: `var(--${string})`;
56
+ T30: `var(--${string})`;
57
+ T10: `var(--${string})`;
58
+ T05: `var(--${string})`;
59
+ TO1: `var(--${string})`;
60
+ };
61
+ secundary: {
62
+ T60: `var(--${string})`;
63
+ T30: `var(--${string})`;
64
+ T10: `var(--${string})`;
65
+ T05: `var(--${string})`;
66
+ TO1: `var(--${string})`;
67
+ };
68
+ error: {
69
+ T60L: `var(--${string})`;
70
+ T30: `var(--${string})`;
71
+ T10: `var(--${string})`;
72
+ T05: `var(--${string})`;
73
+ TO1: `var(--${string})`;
74
+ };
75
+ success: {
76
+ T60: `var(--${string})`;
77
+ T30: `var(--${string})`;
78
+ T10: `var(--${string})`;
79
+ T05: `var(--${string})`;
80
+ T01: `var(--${string})`;
81
+ };
82
+ warning: {
83
+ T60: `var(--${string})`;
84
+ T30: `var(--${string})`;
85
+ T10: `var(--${string})`;
86
+ TO5: `var(--${string})`;
87
+ T01: `var(--${string})`;
88
+ };
89
+ };
90
+ };
91
+
92
+ /**
93
+ * ESPAÇAMENTO — escala baseada em múltiplos de 4px
94
+ *
95
+ * Use sempre um valor desta escala para padding, margin e gap.
96
+ * Nunca use valores arbitrários como 7px, 13px, etc.
97
+ *
98
+ * Nomenclatura:
99
+ * space[N] onde N = valor em px
100
+ */
101
+ declare const spacing: {
102
+ space: {
103
+ 0: `var(--${string})`;
104
+ 1: `var(--${string})`;
105
+ 2: `var(--${string})`;
106
+ 3: `var(--${string})`;
107
+ 4: `var(--${string})`;
108
+ 5: `var(--${string})`;
109
+ 6: `var(--${string})`;
110
+ 7: `var(--${string})`;
111
+ 8: `var(--${string})`;
112
+ 9: `var(--${string})`;
113
+ 10: `var(--${string})`;
114
+ 12: `var(--${string})`;
115
+ 14: `var(--${string})`;
116
+ 16: `var(--${string})`;
117
+ 20: `var(--${string})`;
118
+ 24: `var(--${string})`;
119
+ 28: `var(--${string})`;
120
+ 32: `var(--${string})`;
121
+ 36: `var(--${string})`;
122
+ 40: `var(--${string})`;
123
+ 48: `var(--${string})`;
124
+ 56: `var(--${string})`;
125
+ 64: `var(--${string})`;
126
+ };
127
+ };
128
+
129
+ /**
130
+ * TIPOGRAFIA
131
+ *
132
+ * TODO: substituir `fontFamily.sans` pela fonte real do Figma.
133
+ * Se for uma fonte do Google Fonts, adicionar o import no index.html / _document.tsx.
134
+ */
135
+ declare const typography: {
136
+ fontFamily: `var(--${string})`;
137
+ };
138
+
139
+ /**
140
+ * BORDER RADIUS
141
+ *
142
+ * TODO: verificar no Figma o raio padrão da marca.
143
+ * Marcas mais "sérias" tendem a usar radii menores (2-4px).
144
+ * Marcas mais "amigáveis" tendem a usar radii maiores (8-12px).
145
+ */
146
+ declare const radii: {
147
+ width: {
148
+ small: `var(--${string})`;
149
+ medium: `var(--${string})`;
150
+ large: `var(--${string})`;
151
+ };
152
+ radius: {
153
+ small: `var(--${string})`;
154
+ medium: `var(--${string})`;
155
+ large: `var(--${string})`;
156
+ rounded: `var(--${string})`;
157
+ };
158
+ };
159
+
160
+ /**
161
+ * SOMBRAS — por nível de elevação
162
+ *
163
+ * Cada nível representa uma "altura" visual do elemento em relação ao fundo.
164
+ * Use o nível mais baixo possível — sombras excessivas geram ruído visual.
165
+ *
166
+ * Níveis:
167
+ * xs → hover states, elementos com elevação mínima
168
+ * sm → cards, inputs com foco
169
+ * md → dropdowns, popovers, tooltips
170
+ * lg → modais, painéis laterais (drawers)
171
+ * xl → overlays de alta prioridade
172
+ */
173
+ declare const shadows: {
174
+ shadow: {
175
+ none: `var(--${string})`;
176
+ xs: `var(--${string})`;
177
+ sm: `var(--${string})`;
178
+ md: `var(--${string})`;
179
+ lg: `var(--${string})`;
180
+ xl: `var(--${string})`;
181
+ };
182
+ };
183
+
184
+ type ButtonVariant = "primary" | "secondary" | "tertiary";
185
+ type ButtonColor = "brand" | "error" | "warning" | "success";
186
+ type ButtonSize = "xl" | "lg" | "md" | "sm" | "icon";
187
+ type ButtonProps = {
188
+ text?: string;
189
+ variant?: ButtonVariant;
190
+ color?: ButtonColor;
191
+ size?: ButtonSize;
192
+ pill?: boolean;
193
+ iconBefore?: React.ReactNode;
194
+ iconAfter?: React.ReactNode;
195
+ isLoading?: boolean;
196
+ disabled?: boolean;
197
+ onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
198
+ htmlType?: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>["type"];
199
+ style?: React.CSSProperties;
200
+ className?: string;
201
+ };
202
+ declare const Button: FC<ButtonProps>;
203
+
204
+ type InputProps = {
205
+ label?: string;
206
+ placeholder?: string;
207
+ icon?: React.ReactNode;
208
+ type?: "text" | "password" | "email" | "number" | "tel" | "search";
209
+ error?: string;
210
+ helperText?: string;
211
+ maxLength?: number;
212
+ multiline?: boolean;
213
+ rows?: number;
214
+ forgotPasswordLabel?: string;
215
+ onForgotPassword?: () => void;
216
+ value?: string;
217
+ onChange?: (value: string) => void;
218
+ disabled?: boolean;
219
+ id?: string;
220
+ className?: string;
221
+ };
222
+ declare const Input: FC<InputProps>;
223
+
224
+ type CardValueColor = "default" | "brand" | "success" | "error" | "warning";
225
+ type CardProps = {
226
+ label: string;
227
+ value: string | number;
228
+ icon?: React.ReactNode;
229
+ iconBackground?: boolean;
230
+ sublabel?: string;
231
+ description?: string;
232
+ valueColor?: CardValueColor;
233
+ className?: string;
234
+ };
235
+ declare const Card: FC<CardProps>;
236
+
237
+ type TagColor = "brand" | "warning" | "error" | "success" | "neutral";
238
+ type TagVariant = "filled" | "outlined";
239
+ type TagSize = "lg" | "md" | "sm";
240
+ type TagProps = {
241
+ label: string;
242
+ color?: TagColor;
243
+ variant?: TagVariant;
244
+ size?: TagSize;
245
+ onRemove?: () => void;
246
+ };
247
+ declare const Tag: FC<TagProps>;
248
+
249
+ export { Button, type ButtonProps, Card, type CardProps, type CardValueColor, Input, type InputProps, Tag, type TagColor, type TagProps, type TagSize, type TagVariant, colors, radii, shadows, spacing, typography };