@clasing/ui 0.1.107 → 0.1.109

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 (7) hide show
  1. package/dist/index.d.ts +23 -19
  2. package/dist/index.es.js +2849 -2806
  3. package/dist/index.umd.js +4 -13
  4. package/dist/ui.css +1 -0
  5. package/package.json +43 -45
  6. package/dist/style.css +0 -1
  7. package/tailwind.config.js +0 -484
package/tailwind.config.js DELETED
@@ -1,484 +0,0 @@
1
- /* eslint-disable no-undef */
2
-
3
- import plugin from 'tailwindcss/plugin'
4
-
5
- /** @type {import('tailwindcss').Config} */
6
- export const content = [
7
- './src/**/*.{js,ts,jsx,tsx,mdx}',
8
- // Storybook integration
9
- './stories/**/*.{js,ts,jsx,tsx}',
10
- ]
11
- export const theme = {
12
- fontSize: {
13
- '2xs': '10px',
14
- xs: '12px',
15
- sm: '14px',
16
- base: '16px',
17
- lg: '18px',
18
- xl: '20px',
19
- '2xl': '24px',
20
- '3xl': '28px',
21
- '4xl': '32px',
22
- '5xl': '36px',
23
- '6xl': '40px',
24
- '7xl': '44px',
25
- '8xl': '48px',
26
- '9xl': '52px',
27
- },
28
- lineHeight: {
29
- xs: '16px',
30
- sm: '18px',
31
- md: '20px',
32
- lg: '24px',
33
- xl: '28px',
34
- '2xl': '32px',
35
- '3xl': '36px',
36
- '4xl': '40px',
37
- '5xl': '44px',
38
- '6xl': '48px',
39
- '7xl': '56px',
40
- },
41
- letterSpacing: {
42
- tighter: '-4px',
43
- tight: '-2px',
44
- normal: '0',
45
- wide: '2px',
46
- wider: '5px',
47
- widest: '10px',
48
- },
49
- fontFamily: {
50
- display: ['Open Sans', 'sans-serif'],
51
- title: ['Open Sans', 'sans-serif'],
52
- text: ['Open Sans', 'sans-serif'],
53
- label: ['Open Sans', 'sans-serif'],
54
- overline: ['Open Sans', 'sans-serif'],
55
- },
56
- fontWeight: {
57
- light: 300,
58
- regular: 400,
59
- semibold: 600,
60
- bold: 700,
61
- },
62
- colors: {
63
- button: {
64
- 'primary-red': {
65
- border: {
66
- enabled: 'transparent',
67
- hover: 'transparent',
68
- pressed: 'transparent',
69
- disabled: 'transparent',
70
- },
71
- background: {
72
- enabled: 'hsl(var(--color-brand-500) / <alpha-value>)',
73
- hover: 'hsl(var(--color-brand-700) / <alpha-value>)',
74
- pressed: 'hsl(var(--color-brand-900) / <alpha-value>)',
75
- disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
76
- },
77
- content: {
78
- enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
79
- hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
80
- pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
81
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
82
- },
83
- },
84
- 'primary-blue': {
85
- border: {
86
- enabled: 'transparent',
87
- hover: 'transparent',
88
- pressed: 'transparent',
89
- disabled: 'transparent',
90
- },
91
- background: {
92
- enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
93
- hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
94
- pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
95
- disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
96
- },
97
- content: {
98
- enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
99
- hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
100
- pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
101
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
102
- },
103
- },
104
- secondary: {
105
- border: {
106
- enabled: 'transparent',
107
- hover: 'transparent',
108
- pressed: 'transparent',
109
- disabled: 'transparent',
110
- },
111
- background: {
112
- enabled: 'hsl(var(--color-neutral-600) / <alpha-value>)',
113
- hover: 'hsl(var(--color-neutral-700) / <alpha-value>)',
114
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
115
- disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
116
- },
117
- content: {
118
- enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
119
- hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
120
- pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
121
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
122
- },
123
- },
124
- ghost: {
125
- border: {
126
- enabled: 'transparent',
127
- hover: 'transparent',
128
- pressed: 'transparent',
129
- disabled: 'transparent',
130
- },
131
- background: {
132
- enabled: 'hsl(var(--color-blue-050) / <alpha-value>)',
133
- hover: 'hsl(var(--color-blue-200) / <alpha-value>)',
134
- pressed: 'hsl(var(--color-blue-500) / <alpha-value>)',
135
- disabled: 'hs(var(--color-neutral-100) / <alpha-value>)',
136
- },
137
- content: {
138
- enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
139
- hover: 'hsl(var(--color-blue-500) / <alpha-value>)',
140
- pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
141
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
142
- },
143
- },
144
- outline: {
145
- background: {
146
- enabled: 'transparent',
147
- hover: 'hsl(var(--color-neutral-200) / <alpha-value>)',
148
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
149
- disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
150
- },
151
- content: {
152
- enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
153
- hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
154
- pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
155
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
156
- },
157
- border: {
158
- enabled: 'hsl(var(--color-neutral-700) / <alpha-value>)',
159
- hover: 'hsl(var(--color-neutral-700) / <alpha-value>)',
160
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
161
- disabled: 'transparent',
162
- },
163
- },
164
- destructive: {
165
- border: {
166
- enabled: 'transparent',
167
- hover: 'transparent',
168
- pressed: 'transparent',
169
- disabled: 'transparent',
170
- },
171
- background: {
172
- enabled: 'hsl(var(--color-error-light) / <alpha-value>)',
173
- hover: 'hsl(var(--color-error-light) / <alpha-value>)',
174
- pressed: 'hsl(var(--color-error-light) / <alpha-value>)',
175
- disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
176
- },
177
- content: {
178
- enabled: 'hsl(var(--color-error-main) / <alpha-value>)',
179
- hover: 'hsl(var(--color-error-main) / <alpha-value>)',
180
- pressed: 'hsl(var(--color-error-main) / <alpha-value>)',
181
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
182
- },
183
- },
184
- link: {
185
- content: {
186
- enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
187
- hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
188
- pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
189
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
190
- },
191
- border: {
192
- enabled: 'transparent',
193
- hover: 'transparent',
194
- pressed: 'transparent',
195
- disabled: 'transparent',
196
- },
197
- },
198
- icon: {
199
- fill: {
200
- border: {
201
- enabled: 'transparent',
202
- hover: 'transparent',
203
- pressed: 'transparent',
204
- disabled: 'transparent',
205
- },
206
- background: {
207
- enabled: 'hsl(var(--color-brand-500) / <alpha-value>)',
208
- hover: 'hsl(var(--color-brand-700) / <alpha-value>)',
209
- pressed: 'hsl(var(--color-brand-900) / <alpha-value>)',
210
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
211
- },
212
- content: {
213
- enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
214
- hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
215
- pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
216
- disabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
217
- },
218
- },
219
- outline: {
220
- border: {
221
- enabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
222
- hover: 'transparent',
223
- pressed: 'transparent',
224
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
225
- },
226
- background: {
227
- enabled: 'transparent',
228
- hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
229
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
230
- disabled: 'transparent',
231
- },
232
- content: {
233
- enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
234
- hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
235
- pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
236
- disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
237
- },
238
- },
239
- ghost: {
240
- border: {
241
- enabled: 'transparent',
242
- hover: 'transparent',
243
- pressed: 'transparent',
244
- disabled: 'transparent',
245
- },
246
- background: {
247
- enabled: 'transparent',
248
- hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
249
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
250
- disabled: 'transparent',
251
- },
252
- content: {
253
- enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
254
- hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
255
- pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
256
- disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
257
- },
258
- },
259
- 'blue-subtle': {
260
- border: {
261
- enabled: 'transparent',
262
- hover: 'transparent',
263
- pressed: 'transparent',
264
- disabled: 'transparent',
265
- },
266
- background: {
267
- enabled: 'transparent',
268
- hover: 'hsl(var(--color-neutral-050) / <alpha-value>)',
269
- pressed: 'hsl(var(--color-blue-000) / <alpha-value>)',
270
- disabled: 'transparent',
271
- },
272
- content: {
273
- enabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
274
- hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
275
- pressed: 'hsl(var(--color-blue-500) / <alpha-value>)',
276
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
277
- },
278
- },
279
- destructive: {
280
- border: {
281
- enabled: 'transparent',
282
- hover: 'transparent',
283
- pressed: 'transparent',
284
- disabled: 'transparent',
285
- },
286
- background: {
287
- enabled: 'hsl(var(--color-brand-200) / <alpha-value>)',
288
- hover: 'hsl(var(--color-brand-300) / <alpha-value>)',
289
- pressed: 'hsl(var(--color-brand-400) / <alpha-value>)',
290
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
291
- },
292
- content: {
293
- enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
294
- hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
295
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
296
- disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
297
- },
298
- },
299
- },
300
- },
301
- content: {
302
- text: {
303
- default: 'hsl(var(--color-neutral-900) / <alpha-value>)',
304
- subtle: 'hsl(var(--color-neutral-700) / <alpha-value>)',
305
- subtlest: 'hsl(var(--color-neutral-500) / <alpha-value>)',
306
- inverse: 'hsl(var(--color-neutral-000) / <alpha-value>)',
307
- 'inverse-subtle': 'hsl(var(--color-neutral-300) / <alpha-value>)',
308
- 'inverse-subtlest': 'hsl(var(--color-neutral-400) / <alpha-value>)',
309
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
310
- 'disabled-bolder': 'hsl(var(--color-neutral-400) / <alpha-value>)',
311
- },
312
- utility: {
313
- warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
314
- error: 'hsl(var(--color-error-main) / <alpha-value>)',
315
- success: 'hsl(var(--color-success-main) / <alpha-value>)',
316
- info: 'hsl(var(--color-info-main) / <alpha-value>)',
317
- },
318
- accent: {
319
- 'brand-subtle': 'hsl(var(--color-brand-300) / <alpha-value>)',
320
- brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
321
- 'brand-bolder': 'hsl(var(--color-brand-800) / <alpha-value>)',
322
- 'blue-subtle': 'hsl(var(--color-blue-300) / <alpha-value>)',
323
- blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
324
- 'blue-bolder': 'hsl(var(--color-blue-800) / <alpha-value>)',
325
- 'yellow-subtle': 'hsl(var(--color-yellow-200) / <alpha-value>)',
326
- yellow: 'hsl(var(--color-yellow-500) / <alpha-value>)',
327
- 'yellow-bolder': 'hsl(var(--color-yellow-800) / <alpha-value>)',
328
- 'violet-subtle': 'hsl(var(--color-violet-200) / <alpha-value>)',
329
- violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
330
- 'violet-bolder': 'hsl(var(--color-violet-800) / <alpha-value>)',
331
- },
332
- link: {
333
- default: 'hsl(var(--color-blue-500) / <alpha-value>)',
334
- hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
335
- pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
336
- },
337
- },
338
- surface: {
339
- primary: 'hsl(var(--color-white) / <alpha-value>)',
340
- secondary: 'hsl(var(--color-neutral-100) / <alpha-value>)',
341
- overlay: 'hsl(var(--color-black) / 50%)',
342
- },
343
- background: {
344
- transparent: 'transparent',
345
- white: 'hsl(var(--color-white) / <alpha-value>)',
346
- black: 'hsl(var(--color-black) / <alpha-value>)',
347
- neutral: 'hsl(var(--color-neutral-050) / <alpha-value>)',
348
- disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
349
- 'brand-subtle': 'hsl(var(--color-brand-000) / <alpha-value>)',
350
- brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
351
- 'brand-hover': 'hsl(var(--color-brand-600) / <alpha-value>)',
352
- 'brand-pressed': 'hsl(var(--color-brand-800) / <alpha-value>)',
353
- 'brand-bolder': 'hsl(var(--color-brand-900) / <alpha-value>)',
354
- 'blue-subtle': 'hsl(var(--color-blue-000) / <alpha-value>)',
355
- blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
356
- 'blue-hover': 'hsl(var(--color-blue-600) / <alpha-value>)',
357
- 'blue-pressed': 'hsl(var(--color-blue-800) / <alpha-value>)',
358
- 'blue-bolder': 'hsl(var(--color-blue-900) / <alpha-value>)',
359
- 'yellow-subtle': 'hsl(var(--color-yellow-000) / <alpha-value>)',
360
- yellow: 'hsl(var(--color-yellow-500) / <alpha-value>)',
361
- 'yellow-hover': 'hsl(var(--color-yellow-600) / <alpha-value>)',
362
- 'yellow-pressed': 'hsl(var(--color-yellow-800) / <alpha-value>)',
363
- 'yellow-bolder': 'hsl(var(--color-yellow-900) / <alpha-value>)',
364
- 'violet-subtle': 'hsl(var(--color-violet-000) / <alpha-value>)',
365
- violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
366
- 'violet-hover': 'hsl(var(--color-violet-600) / <alpha-value>)',
367
- 'violet-pressed': 'hsl(var(--color-violet-800) / <alpha-value>)',
368
- 'violet-bolder': 'hsl(var(--color-violet-900) / <alpha-value>)',
369
- utility: {
370
- 'error-light': 'hsl(var(--color-error-light) / <alpha-value>)',
371
- error: 'hsl(var(--color-error-main) / <alpha-value>)',
372
- 'warning-light': 'hsl(var(--color-warning-light) / <alpha-value>)',
373
- warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
374
- 'info-light': 'hsl(var(--color-info-light) / <alpha-value>)',
375
- info: 'hsl(var(--color-info-main) / <alpha-value>)',
376
- 'success-light': 'hsl(var(--color-success-light) / <alpha-value>)',
377
- success: 'hsl(var(--color-success-main) / <alpha-value>)',
378
- },
379
- },
380
- border: {
381
- transparent: 'transparent',
382
- subtle: 'hsl(var(--color-neutral-100) / <alpha-value>)',
383
- default: 'hsl(var(--color-neutral-300) / <alpha-value>)',
384
- bolder: 'hsl(var(--color-neutral-500) / <alpha-value>)',
385
- 'brand-subtle': 'hsl(var(--color-brand-100) / <alpha-value>)',
386
- brand: 'hsl(var(--color-brand-300) / <alpha-value>)',
387
- 'brand-bolder': 'hsl(var(--color-brand-500) / <alpha-value>)',
388
- 'blue-subtle': 'hsl(var(--color-blue-100) / <alpha-value>)',
389
- blue: 'hsl(var(--color-blue-300) / <alpha-value>)',
390
- 'blue-bolder': 'hsl(var(--color-blue-500) / <alpha-value>)',
391
- 'yellow-subtle': 'hsl(var(--color-yellow-100) / <alpha-value>)',
392
- yellow: 'hsl(var(--color-yellow-300) / <alpha-value>)',
393
- 'yellow-bolder': 'hsl(var(--color-yellow-500) / <alpha-value>)',
394
- 'violet-subtle': 'hsl(var(--color-violet-100) / <alpha-value>)',
395
- violet: 'hsl(var(--color-violet-300) / <alpha-value>)',
396
- 'violet-bolder': 'hsl(var(--color-violet-500) / <alpha-value>)',
397
- utility: {
398
- warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
399
- error: 'hsl(var(--color-error-main) / <alpha-value>)',
400
- success: 'hsl(var(--color-success-main) / <alpha-value>)',
401
- info: 'hsl(var(--color-info-main) / <alpha-value>)',
402
- },
403
- },
404
- ring: {
405
- default: 'hsl(var(--color-blue-500) / <alpha-value>)',
406
- },
407
- },
408
- borderRadius: {
409
- none: '0',
410
- xs: '2px',
411
- sm: '4px',
412
- md: '6px',
413
- lg: '8px',
414
- xl: '12px',
415
- '2xl': '16px',
416
- '3xl': '24px',
417
- '4xl': '32px',
418
- full: '9999px',
419
- },
420
- borderWidth: {
421
- none: '0',
422
- xs: '0.5px',
423
- sm: '1px',
424
- md: '2px',
425
- lg: '4px',
426
- },
427
- boxShadow: {
428
- none: 'none',
429
- xs: '0px 2px 4px 0px rgba(25, 25, 25, 0.08), 0px 0px 2px 0px rgba(25, 25, 25, 0.08)',
430
- sm: '0px 4px 8px 0px rgba(25, 25, 25, 0.10), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
431
- md: '0px 8px 16px 0px rgba(25, 25, 25, 0.10), 0px 0px 6px 0px rgba(25, 25, 25, 0.08)',
432
- lg: '0px 10px 20px 0px rgba(0, 0, 0, 0.19), 0px 0px 8px 0px rgba(25, 25, 25, 0.08)',
433
- xl: '0px 12px 24px 0px rgba(25, 25, 25, 0.10), 0px 0px 10px 0px rgba(25, 25, 25, 0.08)',
434
- '2xl':
435
- '0px 16px 32px 0px rgba(25, 25, 25, 0.10), 0px 0px 12px 0px rgba(25, 25, 25, 0.08)',
436
- },
437
- extend: {
438
- padding: {
439
- 'button-sm': '10px 20px',
440
- 'button-md': '12px 24px',
441
- 'button-lg': '16px 28px',
442
- },
443
- animation: {
444
- 'fade-in-scale-up': 'fadeInScaleUp 0.15s ease-out',
445
- 'fade-out-scale-up': 'fadeOutScaleUp 0.15s ease-out',
446
- 'fade-in-scale-down': 'fadeInScaleDown 0.15s ease-out',
447
- 'fade-out-scale-down': 'fadeOutScaleDown 0.15s ease-out',
448
- shimmer: 'shimmer-x 2s infinite',
449
- },
450
- keyframes: {
451
- 'shimmer-x': {
452
- '0%': { transform: 'translateX(-100%)' }, // Añadir keyframe inicial
453
- '100%': { transform: 'translateX(100%)' },
454
- },
455
- fadeInScaleUp: {
456
- '0%': { opacity: '0', transform: 'scale(0.9) translateY(50px)' },
457
- '100%': { opacity: '1', transform: 'scale(1) translateY(0)' },
458
- },
459
- fadeOutScaleUp: {
460
- '0%': { opacity: '1', transform: 'scale(1) translateY(0)' },
461
- '100%': { opacity: '0', transform: 'scale(0.9) translateY(50px)' },
462
- },
463
- fadeInScaleDown: {
464
- '0%': { opacity: '0', transform: 'scale(0.9) translateY(-50px)' },
465
- '100%': { opacity: '1', transform: 'scale(1) translateY(0)' },
466
- },
467
- fadeOutScaleDown: {
468
- '0%': { opacity: '1', transform: 'scale(1) translateY(0)' },
469
- '100%': { opacity: '0', transform: 'scale(0.9) translateY(-50px)' },
470
- },
471
- },
472
- transitionTimingFunction: {
473
- 'circ-in': 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
474
- 'circ-out': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
475
- 'circ-in-out': 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
476
- },
477
- },
478
- }
479
- export const plugins = [
480
- require('@tailwindcss/forms'),
481
- plugin(function ({ addVariant }) {
482
- addVariant('loading', '&.loading')
483
- }),
484
- ]