@vtx-ui/react 0.0.1-beta.5 → 0.0.1-beta.7

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 (10) hide show
  1. package/dist/index.cjs.js +1 -1
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +1 -1
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/types/components/SideMenu/index.d.ts +1 -1
  6. package/dist/types/hooks/useTheme.d.ts +1 -244
  7. package/dist/types/theme/ThemeProvider.d.ts +2 -2
  8. package/dist/types/theme/index.d.ts +1 -1
  9. package/dist/types/theme/tokens.d.ts +265 -215
  10. package/package.json +1 -1
package/dist/types/theme/tokens.d.ts CHANGED
@@ -2,257 +2,307 @@
2
2
  * Design tokens for the VTX UI library
3
3
  * These tokens define the core visual language of the design system
4
4
  */
5
- export declare const COLOR_KEYS: number[];
5
+ export declare const COLOR_KEYS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
6
6
  /**
7
- * Normalizes a colors object so that any string value (e.g., primary: "#fff")
8
- * is expanded to an object with all color keys, while objects are left as-is.
9
- * Direct object keys (e.g., primary: { 100: "#fff" }) are preserved.
7
+ * Normalizes a colors object so that:
8
+ * - String values (e.g., primary: "#fff") are expanded to full color palettes
9
+ * - Object values with specific shades are preserved and merged with generated shades
10
+ * - Allows mixing: primary: { 500: "#fff", 600: "#000" } will generate other shades from 500
10
11
  */
11
12
  export declare function normalizeColors(colors: Record<string, any>): Record<string, any>;
12
13
  export declare const tokens: {
13
- readonly colors: {
14
- readonly primary: {
15
- readonly 50: "#eff6ff";
16
- readonly 100: "#dbeafe";
17
- readonly 200: "#bfdbfe";
18
- readonly 300: "#93c5fd";
19
- readonly 400: "#60a5fa";
20
- readonly 500: "#3b82f6";
21
- readonly 600: "#2563eb";
22
- readonly 700: "#1d4ed8";
23
- readonly 800: "#1e40af";
24
- readonly 900: "#1e3a8a";
14
+ colors: {
15
+ primary: {
16
+ 50: string;
17
+ 100: string;
18
+ 200: string;
19
+ 300: string;
20
+ 400: string;
21
+ 500: string;
22
+ 600: string;
23
+ 700: string;
24
+ 800: string;
25
+ 900: string;
25
26
  };
26
- readonly secondary: {
27
- readonly 50: "#f5f3ff";
28
- readonly 100: "#ede9fe";
29
- readonly 200: "#ddd6fe";
30
- readonly 300: "#c4b5fd";
31
- readonly 400: "#a78bfa";
32
- readonly 500: "#8b5cf6";
33
- readonly 600: "#7c3aed";
34
- readonly 700: "#6d28d9";
35
- readonly 800: "#5b21b6";
36
- readonly 900: "#4c1d95";
27
+ secondary: {
28
+ 50: string;
29
+ 100: string;
30
+ 200: string;
31
+ 300: string;
32
+ 400: string;
33
+ 500: string;
34
+ 600: string;
35
+ 700: string;
36
+ 800: string;
37
+ 900: string;
37
38
  };
38
- readonly neutral: {
39
- readonly 50: "#fafafa";
40
- readonly 100: "#f5f5f5";
41
- readonly 200: "#e5e5e5";
42
- readonly 300: "#d4d4d4";
43
- readonly 400: "#a3a3a3";
44
- readonly 500: "#737373";
45
- readonly 600: "#525252";
46
- readonly 700: "#404040";
47
- readonly 800: "#262626";
48
- readonly 900: "#171717";
39
+ neutral: {
40
+ 50: string;
41
+ 100: string;
42
+ 200: string;
43
+ 300: string;
44
+ 400: string;
45
+ 500: string;
46
+ 600: string;
47
+ 700: string;
48
+ 800: string;
49
+ 900: string;
49
50
  };
50
- readonly success: {
51
- readonly 50: "#f0fdf4";
52
- readonly 500: "#22c55e";
53
- readonly 600: "#16a34a";
54
- readonly 700: "#15803d";
51
+ success: {
52
+ 50: string;
53
+ 500: string;
54
+ 600: string;
55
+ 700: string;
55
56
  };
56
- readonly warning: {
57
- readonly 50: "#fffbeb";
58
- readonly 500: "#f59e0b";
59
- readonly 600: "#d97706";
60
- readonly 700: "#b45309";
57
+ warning: {
58
+ 50: string;
59
+ 500: string;
60
+ 600: string;
61
+ 700: string;
61
62
  };
62
- readonly error: {
63
- readonly 50: "#fef2f2";
64
- readonly 500: "#ef4444";
65
- readonly 600: "#dc2626";
66
- readonly 700: "#b91c1c";
63
+ error: {
64
+ 50: string;
65
+ 500: string;
66
+ 600: string;
67
+ 700: string;
67
68
  };
68
- readonly info: {
69
- readonly 50: "#eff6ff";
70
- readonly 500: "#3b82f6";
71
- readonly 600: "#2563eb";
72
- readonly 700: "#1d4ed8";
69
+ info: {
70
+ 50: string;
71
+ 500: string;
72
+ 600: string;
73
+ 700: string;
73
74
  };
74
75
  };
75
- readonly spacing: {
76
- readonly 0: "0";
77
- readonly 1: "0.25rem";
78
- readonly 2: "0.5rem";
79
- readonly 3: "0.75rem";
80
- readonly 4: "1rem";
81
- readonly 5: "1.25rem";
82
- readonly 6: "1.5rem";
83
- readonly 8: "2rem";
84
- readonly 10: "2.5rem";
85
- readonly 12: "3rem";
86
- readonly 16: "4rem";
87
- readonly 20: "5rem";
88
- readonly 24: "6rem";
76
+ spacing: {
77
+ 0: string;
78
+ 1: string;
79
+ 2: string;
80
+ 3: string;
81
+ 4: string;
82
+ 5: string;
83
+ 6: string;
84
+ 8: string;
85
+ 10: string;
86
+ 12: string;
87
+ 16: string;
88
+ 20: string;
89
+ 24: string;
89
90
  };
90
- readonly typography: {
91
- readonly fontFamily: {
92
- readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
93
- readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
91
+ typography: {
92
+ fontFamily: {
93
+ sans: string;
94
+ mono: string;
94
95
  };
95
- readonly fontSize: {
96
- readonly xs: "0.75rem";
97
- readonly sm: "0.875rem";
98
- readonly base: "1rem";
99
- readonly lg: "1.125rem";
100
- readonly xl: "1.25rem";
101
- readonly '2xl': "1.5rem";
102
- readonly '3xl': "1.875rem";
103
- readonly '4xl': "2.25rem";
104
- readonly '5xl': "3rem";
105
- readonly '6xl': "3.75rem";
106
- readonly '7xl': "4.5rem";
107
- readonly '8xl': "6rem";
108
- readonly '9xl': "8rem";
96
+ fontSize: {
97
+ xs: string;
98
+ sm: string;
99
+ base: string;
100
+ lg: string;
101
+ xl: string;
102
+ '2xl': string;
103
+ '3xl': string;
104
+ '4xl': string;
105
+ '5xl': string;
106
+ '6xl': string;
107
+ '7xl': string;
108
+ '8xl': string;
109
+ '9xl': string;
109
110
  };
110
- readonly fontWeight: {
111
- readonly thin: "100";
112
- readonly extralight: "200";
113
- readonly light: "300";
114
- readonly normal: "400";
115
- readonly medium: "500";
116
- readonly semibold: "600";
117
- readonly bold: "700";
118
- readonly extrabold: "800";
119
- readonly black: "900";
111
+ fontWeight: {
112
+ thin: string;
113
+ extralight: string;
114
+ light: string;
115
+ normal: string;
116
+ medium: string;
117
+ semibold: string;
118
+ bold: string;
119
+ extrabold: string;
120
+ black: string;
120
121
  };
121
- readonly lineHeight: {
122
- readonly none: "1";
123
- readonly tight: "1.25";
124
- readonly snug: "1.375";
125
- readonly normal: "1.5";
126
- readonly relaxed: "1.625";
127
- readonly loose: "2";
122
+ lineHeight: {
123
+ none: string;
124
+ tight: string;
125
+ snug: string;
126
+ normal: string;
127
+ relaxed: string;
128
+ loose: string;
128
129
  };
129
- readonly letterSpacing: {
130
- readonly tighter: "-0.05em";
131
- readonly tight: "-0.025em";
132
- readonly normal: "0";
133
- readonly wide: "0.025em";
134
- readonly wider: "0.05em";
135
- readonly widest: "0.1em";
130
+ letterSpacing: {
131
+ tighter: string;
132
+ tight: string;
133
+ normal: string;
134
+ wide: string;
135
+ wider: string;
136
+ widest: string;
136
137
  };
137
- readonly textVariants: {
138
- readonly h1: {
139
- readonly fontSize: "3.75rem";
140
- readonly fontWeight: "700";
141
- readonly lineHeight: "1.2";
142
- readonly letterSpacing: "-0.025em";
138
+ textVariants: {
139
+ h1: {
140
+ fontSize: string;
141
+ fontWeight: string;
142
+ lineHeight: string;
143
+ letterSpacing: string;
143
144
  };
144
- readonly h2: {
145
- readonly fontSize: "3rem";
146
- readonly fontWeight: "700";
147
- readonly lineHeight: "1.25";
148
- readonly letterSpacing: "-0.025em";
145
+ h2: {
146
+ fontSize: string;
147
+ fontWeight: string;
148
+ lineHeight: string;
149
+ letterSpacing: string;
149
150
  };
150
- readonly h3: {
151
- readonly fontSize: "2.25rem";
152
- readonly fontWeight: "600";
153
- readonly lineHeight: "1.3";
154
- readonly letterSpacing: "-0.025em";
151
+ h3: {
152
+ fontSize: string;
153
+ fontWeight: string;
154
+ lineHeight: string;
155
+ letterSpacing: string;
155
156
  };
156
- readonly h4: {
157
- readonly fontSize: "1.875rem";
158
- readonly fontWeight: "600";
159
- readonly lineHeight: "1.35";
160
- readonly letterSpacing: "0";
157
+ h4: {
158
+ fontSize: string;
159
+ fontWeight: string;
160
+ lineHeight: string;
161
+ letterSpacing: string;
161
162
  };
162
- readonly h5: {
163
- readonly fontSize: "1.5rem";
164
- readonly fontWeight: "600";
165
- readonly lineHeight: "1.4";
166
- readonly letterSpacing: "0";
163
+ h5: {
164
+ fontSize: string;
165
+ fontWeight: string;
166
+ lineHeight: string;
167
+ letterSpacing: string;
167
168
  };
168
- readonly h6: {
169
- readonly fontSize: "1.25rem";
170
- readonly fontWeight: "600";
171
- readonly lineHeight: "1.5";
172
- readonly letterSpacing: "0";
169
+ h6: {
170
+ fontSize: string;
171
+ fontWeight: string;
172
+ lineHeight: string;
173
+ letterSpacing: string;
173
174
  };
174
- readonly body1: {
175
- readonly fontSize: "1rem";
176
- readonly fontWeight: "400";
177
- readonly lineHeight: "1.5";
178
- readonly letterSpacing: "0";
175
+ body1: {
176
+ fontSize: string;
177
+ fontWeight: string;
178
+ lineHeight: string;
179
+ letterSpacing: string;
179
180
  };
180
- readonly body2: {
181
- readonly fontSize: "0.875rem";
182
- readonly fontWeight: "400";
183
- readonly lineHeight: "1.5";
184
- readonly letterSpacing: "0";
181
+ body2: {
182
+ fontSize: string;
183
+ fontWeight: string;
184
+ lineHeight: string;
185
+ letterSpacing: string;
185
186
  };
186
- readonly subtitle1: {
187
- readonly fontSize: "1.125rem";
188
- readonly fontWeight: "500";
189
- readonly lineHeight: "1.5";
190
- readonly letterSpacing: "0";
187
+ subtitle1: {
188
+ fontSize: string;
189
+ fontWeight: string;
190
+ lineHeight: string;
191
+ letterSpacing: string;
191
192
  };
192
- readonly subtitle2: {
193
- readonly fontSize: "1rem";
194
- readonly fontWeight: "500";
195
- readonly lineHeight: "1.5";
196
- readonly letterSpacing: "0";
193
+ subtitle2: {
194
+ fontSize: string;
195
+ fontWeight: string;
196
+ lineHeight: string;
197
+ letterSpacing: string;
197
198
  };
198
- readonly caption: {
199
- readonly fontSize: "0.75rem";
200
- readonly fontWeight: "400";
201
- readonly lineHeight: "1.5";
202
- readonly letterSpacing: "0.025em";
199
+ caption: {
200
+ fontSize: string;
201
+ fontWeight: string;
202
+ lineHeight: string;
203
+ letterSpacing: string;
203
204
  };
204
- readonly overline: {
205
- readonly fontSize: "0.75rem";
206
- readonly fontWeight: "600";
207
- readonly lineHeight: "1.5";
208
- readonly letterSpacing: "0.1em";
209
- readonly textTransform: "uppercase";
205
+ overline: {
206
+ fontSize: string;
207
+ fontWeight: string;
208
+ lineHeight: string;
209
+ letterSpacing: string;
210
+ textTransform: string;
210
211
  };
211
- readonly button: {
212
- readonly fontSize: "0.875rem";
213
- readonly fontWeight: "600";
214
- readonly lineHeight: "1.5";
215
- readonly letterSpacing: "0.025em";
212
+ button: {
213
+ fontSize: string;
214
+ fontWeight: string;
215
+ lineHeight: string;
216
+ letterSpacing: string;
216
217
  };
217
- readonly label: {
218
- readonly fontSize: "0.875rem";
219
- readonly fontWeight: "500";
220
- readonly lineHeight: "1.5";
221
- readonly letterSpacing: "0";
218
+ label: {
219
+ fontSize: string;
220
+ fontWeight: string;
221
+ lineHeight: string;
222
+ letterSpacing: string;
222
223
  };
223
224
  };
224
225
  };
225
- readonly borderRadius: {
226
- readonly none: "0";
227
- readonly sm: "0.125rem";
228
- readonly base: "0.25rem";
229
- readonly md: "0.375rem";
230
- readonly lg: "0.5rem";
231
- readonly xl: "0.75rem";
232
- readonly '2xl': "1rem";
233
- readonly full: "9999px";
226
+ borderRadius: {
227
+ none: string;
228
+ sm: string;
229
+ base: string;
230
+ md: string;
231
+ lg: string;
232
+ xl: string;
233
+ '2xl': string;
234
+ full: string;
234
235
  };
235
- readonly shadows: {
236
- readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
237
- readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
238
- readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
239
- readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
240
- readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
241
- readonly none: "none";
236
+ shadows: {
237
+ sm: string;
238
+ base: string;
239
+ md: string;
240
+ lg: string;
241
+ xl: string;
242
+ none: string;
242
243
  };
243
- readonly transitions: {
244
- readonly fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)";
245
- readonly base: "200ms cubic-bezier(0.4, 0, 0.2, 1)";
246
- readonly slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)";
244
+ transitions: {
245
+ fast: string;
246
+ base: string;
247
+ slow: string;
247
248
  };
248
- readonly zIndex: {
249
- readonly dropdown: 1000;
250
- readonly sticky: 1100;
251
- readonly modal: 1200;
252
- readonly tooltip: 1300;
253
- readonly notification: 1400;
249
+ zIndex: {
250
+ dropdown: number;
251
+ sticky: number;
252
+ modal: number;
253
+ tooltip: number;
254
+ notification: number;
254
255
  };
255
256
  };
256
- export type Tokens = typeof tokens;
257
- export type ColorScale = keyof typeof tokens.colors;
258
- export type ColorShade = keyof typeof tokens.colors.primary;
257
+ export type ColorPalette = {
258
+ 50?: string;
259
+ 100?: string;
260
+ 200?: string;
261
+ 300?: string;
262
+ 400?: string;
263
+ 500?: string;
264
+ 600?: string;
265
+ 700?: string;
266
+ 800?: string;
267
+ 900?: string;
268
+ };
269
+ export type Colors = {
270
+ primary: ColorPalette;
271
+ secondary: ColorPalette;
272
+ neutral: ColorPalette;
273
+ success: ColorPalette;
274
+ warning: ColorPalette;
275
+ error: ColorPalette;
276
+ info: ColorPalette;
277
+ };
278
+ export type CustomColorValue = string | ColorPalette;
279
+ export type CustomColors = {
280
+ primary?: CustomColorValue;
281
+ secondary?: CustomColorValue;
282
+ neutral?: CustomColorValue;
283
+ success?: CustomColorValue;
284
+ warning?: CustomColorValue;
285
+ error?: CustomColorValue;
286
+ info?: CustomColorValue;
287
+ [key: string]: CustomColorValue | undefined;
288
+ };
289
+ export type Tokens = {
290
+ colors: Colors;
291
+ spacing: Record<string | number, string>;
292
+ typography: typeof tokens.typography;
293
+ borderRadius: Record<string, string>;
294
+ shadows: Record<string, string>;
295
+ transitions: Record<string, string>;
296
+ zIndex: Record<string, number>;
297
+ };
298
+ export type CustomTokens = {
299
+ colors?: CustomColors;
300
+ spacing?: Partial<Tokens['spacing']>;
301
+ typography?: Partial<Tokens['typography']>;
302
+ borderRadius?: Partial<Tokens['borderRadius']>;
303
+ shadows?: Partial<Tokens['shadows']>;
304
+ transitions?: Partial<Tokens['transitions']>;
305
+ zIndex?: Partial<Tokens['zIndex']>;
306
+ };
307
+ export type ColorScale = keyof Colors;
308
+ export type ColorShade = keyof ColorPalette;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtx-ui/react",
3
- "version": "0.0.1-beta.5",
3
+ "version": "0.0.1-beta.7",
4
4
  "description": "A production-ready React + TypeScript UI library with enterprise-grade components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",