@vaneui/ui 0.3.1-alpha.20250914202143.38eda80 → 0.3.1-alpha.20250916140129.7475230

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 (71) hide show
  1. package/dist/components/ui/classes/gapClasses.d.ts +3 -0
  2. package/dist/components/ui/classes/gapClasses.d.ts.map +1 -0
  3. package/dist/components/ui/props/border.d.ts +0 -18
  4. package/dist/components/ui/props/border.d.ts.map +1 -1
  5. package/dist/components/ui/theme/appearance/appearanceTheme.d.ts +10 -0
  6. package/dist/components/ui/theme/appearance/appearanceTheme.d.ts.map +1 -1
  7. package/dist/components/ui/theme/appearance/genericVariantTheme.d.ts +2 -0
  8. package/dist/components/ui/theme/appearance/genericVariantTheme.d.ts.map +1 -1
  9. package/dist/components/ui/theme/appearance/shadowAppearanceTheme.d.ts +10 -0
  10. package/dist/components/ui/theme/appearance/shadowAppearanceTheme.d.ts.map +1 -1
  11. package/dist/components/ui/theme/containerTheme.d.ts.map +1 -1
  12. package/dist/components/ui/theme/gridTheme.d.ts.map +1 -1
  13. package/dist/components/ui/theme/layout/borderTheme.d.ts +7 -0
  14. package/dist/components/ui/theme/layout/borderTheme.d.ts.map +1 -1
  15. package/dist/components/ui/theme/layout/directionTheme.d.ts +4 -0
  16. package/dist/components/ui/theme/layout/directionTheme.d.ts.map +1 -1
  17. package/dist/components/ui/theme/layout/displayTheme.d.ts +11 -0
  18. package/dist/components/ui/theme/layout/displayTheme.d.ts.map +1 -1
  19. package/dist/components/ui/theme/layout/focusVisibleTheme.d.ts +5 -0
  20. package/dist/components/ui/theme/layout/focusVisibleTheme.d.ts.map +1 -1
  21. package/dist/components/ui/theme/layout/hideTheme.d.ts +5 -0
  22. package/dist/components/ui/theme/layout/hideTheme.d.ts.map +1 -1
  23. package/dist/components/ui/theme/layout/itemsTheme.d.ts +5 -0
  24. package/dist/components/ui/theme/layout/itemsTheme.d.ts.map +1 -1
  25. package/dist/components/ui/theme/layout/justifyTheme.d.ts +8 -0
  26. package/dist/components/ui/theme/layout/justifyTheme.d.ts.map +1 -1
  27. package/dist/components/ui/theme/layout/overflowTheme.d.ts +15 -0
  28. package/dist/components/ui/theme/layout/overflowTheme.d.ts.map +1 -1
  29. package/dist/components/ui/theme/layout/positionTheme.d.ts +5 -0
  30. package/dist/components/ui/theme/layout/positionTheme.d.ts.map +1 -1
  31. package/dist/components/ui/theme/layout/radiusTheme.d.ts +3 -0
  32. package/dist/components/ui/theme/layout/radiusTheme.d.ts.map +1 -1
  33. package/dist/components/ui/theme/layout/ringTheme.d.ts +5 -0
  34. package/dist/components/ui/theme/layout/ringTheme.d.ts.map +1 -1
  35. package/dist/components/ui/theme/layout/wrapTheme.d.ts +3 -0
  36. package/dist/components/ui/theme/layout/wrapTheme.d.ts.map +1 -1
  37. package/dist/components/ui/theme/list/listStyleTheme.d.ts +2 -0
  38. package/dist/components/ui/theme/list/listStyleTheme.d.ts.map +1 -1
  39. package/dist/components/ui/theme/size/breakpointTheme.d.ts +5 -0
  40. package/dist/components/ui/theme/size/breakpointTheme.d.ts.map +1 -1
  41. package/dist/components/ui/theme/size/gapTheme.d.ts +5 -0
  42. package/dist/components/ui/theme/size/gapTheme.d.ts.map +1 -1
  43. package/dist/components/ui/theme/size/paddingTheme.d.ts +5 -0
  44. package/dist/components/ui/theme/size/paddingTheme.d.ts.map +1 -1
  45. package/dist/components/ui/theme/size/plTheme.d.ts +1 -0
  46. package/dist/components/ui/theme/size/plTheme.d.ts.map +1 -1
  47. package/dist/components/ui/theme/size/pxTheme.d.ts +1 -0
  48. package/dist/components/ui/theme/size/pxTheme.d.ts.map +1 -1
  49. package/dist/components/ui/theme/size/pyTheme.d.ts +1 -0
  50. package/dist/components/ui/theme/size/pyTheme.d.ts.map +1 -1
  51. package/dist/components/ui/theme/size/sizeTheme.d.ts +5 -0
  52. package/dist/components/ui/theme/size/sizeTheme.d.ts.map +1 -1
  53. package/dist/components/ui/theme/typography/fontFamilyTheme.d.ts +3 -0
  54. package/dist/components/ui/theme/typography/fontFamilyTheme.d.ts.map +1 -1
  55. package/dist/components/ui/theme/typography/fontStyleTheme.d.ts +2 -0
  56. package/dist/components/ui/theme/typography/fontStyleTheme.d.ts.map +1 -1
  57. package/dist/components/ui/theme/typography/fontWeightTheme.d.ts +9 -0
  58. package/dist/components/ui/theme/typography/fontWeightTheme.d.ts.map +1 -1
  59. package/dist/components/ui/theme/typography/textAlignTheme.d.ts +4 -0
  60. package/dist/components/ui/theme/typography/textAlignTheme.d.ts.map +1 -1
  61. package/dist/components/ui/theme/typography/textDecorationTheme.d.ts +4 -0
  62. package/dist/components/ui/theme/typography/textDecorationTheme.d.ts.map +1 -1
  63. package/dist/components/ui/theme/typography/textTransformTheme.d.ts +4 -0
  64. package/dist/components/ui/theme/typography/textTransformTheme.d.ts.map +1 -1
  65. package/dist/index.esm.js +142 -36
  66. package/dist/index.esm.js.map +1 -1
  67. package/dist/index.js +141 -43
  68. package/dist/index.js.map +1 -1
  69. package/dist/ui.css +57 -74
  70. package/dist/vars.css +35 -25
  71. package/package.json +1 -1
package/dist/ui.css CHANGED
@@ -16,7 +16,6 @@
16
16
  --color-red-600: oklch(57.7% 0.245 27.325);
17
17
  --color-red-700: oklch(50.5% 0.213 27.518);
18
18
  --color-red-800: oklch(44.4% 0.177 26.899);
19
- --color-red-900: oklch(39.6% 0.141 25.723);
20
19
  --color-orange-500: oklch(70.5% 0.213 47.604);
21
20
  --color-amber-50: oklch(98.7% 0.022 95.277);
22
21
  --color-amber-100: oklch(96.2% 0.059 95.617);
@@ -27,15 +26,13 @@
27
26
  --color-yellow-50: oklch(98.7% 0.026 102.212);
28
27
  --color-yellow-100: oklch(97.3% 0.071 103.193);
29
28
  --color-yellow-200: oklch(94.5% 0.129 101.54);
29
+ --color-yellow-600: oklch(68.1% 0.162 75.834);
30
30
  --color-yellow-800: oklch(47.6% 0.114 61.907);
31
- --color-yellow-900: oklch(42.1% 0.095 57.708);
32
31
  --color-green-50: oklch(98.2% 0.018 155.826);
33
32
  --color-green-200: oklch(92.5% 0.084 155.995);
34
33
  --color-green-500: oklch(72.3% 0.219 149.579);
35
34
  --color-green-600: oklch(62.7% 0.194 149.214);
36
35
  --color-green-700: oklch(52.7% 0.154 150.069);
37
- --color-green-800: oklch(44.8% 0.119 151.328);
38
- --color-green-900: oklch(39.3% 0.095 152.535);
39
36
  --color-emerald-50: oklch(97.9% 0.021 166.113);
40
37
  --color-emerald-100: oklch(95% 0.052 163.051);
41
38
  --color-emerald-200: oklch(90.5% 0.093 164.15);
@@ -62,7 +59,7 @@
62
59
  --color-indigo-100: oklch(93% 0.034 272.788);
63
60
  --color-indigo-400: oklch(67.3% 0.182 276.935);
64
61
  --color-indigo-500: oklch(58.5% 0.233 277.117);
65
- --color-indigo-800: oklch(39.8% 0.195 277.366);
62
+ --color-indigo-700: oklch(45.7% 0.24 277.023);
66
63
  --color-violet-400: oklch(70.2% 0.183 293.541);
67
64
  --color-violet-600: oklch(54.1% 0.281 293.009);
68
65
  --color-purple-600: oklch(55.8% 0.288 302.321);
@@ -74,7 +71,6 @@
74
71
  --color-rose-600: oklch(58.6% 0.253 17.585);
75
72
  --color-rose-700: oklch(51.4% 0.222 16.935);
76
73
  --color-rose-800: oklch(45.5% 0.188 13.697);
77
- --color-rose-900: oklch(41% 0.159 10.272);
78
74
  --color-gray-50: oklch(98.5% 0.002 247.839);
79
75
  --color-gray-100: oklch(96.7% 0.003 264.542);
80
76
  --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -87,6 +83,7 @@
87
83
  --color-gray-950: oklch(13% 0.028 261.692);
88
84
  --color-white: #fff;
89
85
  --spacing: 0.25rem;
86
+ --container-md: 28rem;
90
87
  --container-3xl: 48rem;
91
88
  --container-4xl: 56rem;
92
89
  --container-5xl: 64rem;
@@ -226,12 +223,12 @@
226
223
  --color-bg-filled-layout-primary: var(--color-blue-800);
227
224
  --color-bg-filled-layout-secondary: var(--color-gray-800);
228
225
  --color-bg-filled-layout-tertiary: var(--color-gray-900);
229
- --color-bg-filled-layout-accent: var(--color-indigo-800);
230
- --color-bg-filled-layout-success: var(--color-green-800);
231
- --color-bg-filled-layout-danger: var(--color-red-800);
226
+ --color-bg-filled-layout-accent: var(--color-indigo-700);
227
+ --color-bg-filled-layout-success: var(--color-green-700);
228
+ --color-bg-filled-layout-danger: var(--color-red-700);
232
229
  --color-bg-filled-layout-warning: var(--color-yellow-800);
233
- --color-bg-filled-layout-info: var(--color-blue-800);
234
- --color-bg-filled-layout-link: var(--color-blue-800);
230
+ --color-bg-filled-layout-info: var(--color-blue-700);
231
+ --color-bg-filled-layout-link: var(--color-blue-700);
235
232
  --color-border-default: var(--color-gray-200);
236
233
  --color-border-primary: var(--color-blue-200);
237
234
  --color-border-secondary: var(--color-gray-200);
@@ -242,26 +239,34 @@
242
239
  --color-border-danger: var(--color-red-200);
243
240
  --color-border-warning: var(--color-yellow-200);
244
241
  --color-border-info: var(--color-blue-200);
245
- --color-border-filled-default: var(--color-gray-900);
246
- --color-border-filled-primary: var(--color-blue-900);
247
- --color-border-filled-secondary: var(--color-gray-900);
248
- --color-border-filled-tertiary: var(--color-gray-950);
249
- --color-border-filled-accent: var(--color-rose-900);
250
- --color-border-filled-success: var(--color-green-900);
251
- --color-border-filled-danger: var(--color-red-900);
252
- --color-border-filled-warning: var(--color-yellow-900);
253
- --color-border-filled-info: var(--color-blue-900);
254
- --color-border-filled-link: var(--color-blue-900);
255
- --ui-br-xs: 0.125rem;
256
- --ui-br-sm: 0.25rem;
257
- --ui-br-md: 0.375rem;
258
- --ui-br-lg: 0.5rem;
259
- --ui-br-xl: 0.625rem;
260
- --layout-br-xs: 0.375rem;
261
- --layout-br-sm: 0.5rem;
262
- --layout-br-md: 0.625rem;
263
- --layout-br-lg: 0.75rem;
264
- --layout-br-xl: 0.875rem;
242
+ --color-border-filled-default: var(--color-gray-600);
243
+ --color-border-filled-primary: var(--color-blue-600);
244
+ --color-border-filled-secondary: var(--color-gray-700);
245
+ --color-border-filled-tertiary: var(--color-gray-800);
246
+ --color-border-filled-accent: var(--color-rose-600);
247
+ --color-border-filled-success: var(--color-green-600);
248
+ --color-border-filled-danger: var(--color-red-600);
249
+ --color-border-filled-warning: var(--color-yellow-600);
250
+ --color-border-filled-info: var(--color-blue-600);
251
+ --color-border-filled-link: var(--color-blue-600);
252
+ --ui-br-spacing: 0.125rem;
253
+ --ui-br-xs: calc(1 * var(--ui-br-spacing));
254
+ --ui-br-sm: calc(2 * var(--ui-br-spacing));
255
+ --ui-br-md: calc(3 * var(--ui-br-spacing));
256
+ --ui-br-lg: calc(4 * var(--ui-br-spacing));
257
+ --ui-br-xl: calc(5 * var(--ui-br-spacing));
258
+ --layout-br-spacing: 0.25rem;
259
+ --layout-br-xs: calc(3 * var(--layout-br-spacing));
260
+ --layout-br-sm: calc(4 * var(--layout-br-spacing));
261
+ --layout-br-md: calc(5 * var(--layout-br-spacing));
262
+ --layout-br-lg: calc(6 * var(--layout-br-spacing));
263
+ --layout-br-xl: calc(7 * var(--layout-br-spacing));
264
+ --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
265
+ --layout-gap-xs: calc(2 * var(--layout-spacing));
266
+ --layout-gap-sm: calc(3 * var(--layout-spacing));
267
+ --layout-gap-md: calc(4 * var(--layout-spacing));
268
+ --layout-gap-lg: calc(5 * var(--layout-spacing));
269
+ --layout-gap-xl: calc(6 * var(--layout-spacing));
265
270
  }
266
271
  }
267
272
  @layer base {
@@ -527,6 +532,9 @@
527
532
  .h-px {
528
533
  height: 1px;
529
534
  }
535
+ .w-1\/3 {
536
+ width: calc(1/3 * 100%);
537
+ }
530
538
  .w-3 {
531
539
  width: calc(var(--spacing) * 3);
532
540
  }
@@ -563,6 +571,9 @@
563
571
  .max-w-7xl {
564
572
  max-width: var(--container-7xl);
565
573
  }
574
+ .max-w-md {
575
+ max-width: var(--container-md);
576
+ }
566
577
  .transform {
567
578
  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
568
579
  }
@@ -653,6 +664,21 @@
653
664
  .justify-stretch {
654
665
  justify-content: stretch;
655
666
  }
667
+ .gap-\(--layout-gap-lg\) {
668
+ gap: var(--layout-gap-lg);
669
+ }
670
+ .gap-\(--layout-gap-md\) {
671
+ gap: var(--layout-gap-md);
672
+ }
673
+ .gap-\(--layout-gap-sm\) {
674
+ gap: var(--layout-gap-sm);
675
+ }
676
+ .gap-\(--layout-gap-xl\) {
677
+ gap: var(--layout-gap-xl);
678
+ }
679
+ .gap-\(--layout-gap-xs\) {
680
+ gap: var(--layout-gap-xs);
681
+ }
656
682
  .gap-0 {
657
683
  gap: calc(var(--spacing) * 0);
658
684
  }
@@ -686,9 +712,6 @@
686
712
  .gap-8 {
687
713
  gap: calc(var(--spacing) * 8);
688
714
  }
689
- .gap-10 {
690
- gap: calc(var(--spacing) * 10);
691
- }
692
715
  .gap-12 {
693
716
  gap: calc(var(--spacing) * 12);
694
717
  }
@@ -2290,11 +2313,6 @@
2290
2313
  flex-direction: column;
2291
2314
  }
2292
2315
  }
2293
- .max-lg\:gap-1 {
2294
- @media (width < 64rem) {
2295
- gap: calc(var(--spacing) * 1);
2296
- }
2297
- }
2298
2316
  .max-lg\:gap-2 {
2299
2317
  @media (width < 64rem) {
2300
2318
  gap: calc(var(--spacing) * 2);
@@ -2315,26 +2333,6 @@
2315
2333
  gap: calc(var(--spacing) * 5);
2316
2334
  }
2317
2335
  }
2318
- .max-lg\:gap-6 {
2319
- @media (width < 64rem) {
2320
- gap: calc(var(--spacing) * 6);
2321
- }
2322
- }
2323
- .max-lg\:gap-7 {
2324
- @media (width < 64rem) {
2325
- gap: calc(var(--spacing) * 7);
2326
- }
2327
- }
2328
- .max-lg\:gap-8 {
2329
- @media (width < 64rem) {
2330
- gap: calc(var(--spacing) * 8);
2331
- }
2332
- }
2333
- .max-lg\:gap-9 {
2334
- @media (width < 64rem) {
2335
- gap: calc(var(--spacing) * 9);
2336
- }
2337
- }
2338
2336
  .max-lg\:px-4 {
2339
2337
  @media (width < 64rem) {
2340
2338
  padding-inline: calc(var(--spacing) * 4);
@@ -2436,11 +2434,6 @@
2436
2434
  flex-direction: column;
2437
2435
  }
2438
2436
  }
2439
- .max-md\:gap-2 {
2440
- @media (width < 48rem) {
2441
- gap: calc(var(--spacing) * 2);
2442
- }
2443
- }
2444
2437
  .max-md\:gap-3 {
2445
2438
  @media (width < 48rem) {
2446
2439
  gap: calc(var(--spacing) * 3);
@@ -2451,16 +2444,6 @@
2451
2444
  gap: calc(var(--spacing) * 4);
2452
2445
  }
2453
2446
  }
2454
- .max-md\:gap-6 {
2455
- @media (width < 48rem) {
2456
- gap: calc(var(--spacing) * 6);
2457
- }
2458
- }
2459
- .max-md\:gap-8 {
2460
- @media (width < 48rem) {
2461
- gap: calc(var(--spacing) * 8);
2462
- }
2463
- }
2464
2447
  .max-md\:px-3 {
2465
2448
  @media (width < 48rem) {
2466
2449
  padding-inline: calc(var(--spacing) * 3);
package/dist/vars.css CHANGED
@@ -114,13 +114,13 @@
114
114
  --color-bg-filled-layout-primary: var(--color-blue-800);
115
115
  --color-bg-filled-layout-secondary: var(--color-gray-800);
116
116
  --color-bg-filled-layout-tertiary: var(--color-gray-900);
117
- --color-bg-filled-layout-accent: var(--color-indigo-800);
118
- --color-bg-filled-layout-success: var(--color-green-800);
119
- --color-bg-filled-layout-danger: var(--color-red-800);
117
+ --color-bg-filled-layout-accent: var(--color-indigo-700);
118
+ --color-bg-filled-layout-success: var(--color-green-700);
119
+ --color-bg-filled-layout-danger: var(--color-red-700);
120
120
  --color-bg-filled-layout-warning: var(--color-yellow-800);
121
- --color-bg-filled-layout-info: var(--color-blue-800);
121
+ --color-bg-filled-layout-info: var(--color-blue-700);
122
122
  --color-bg-filled-layout-transparent: transparent;
123
- --color-bg-filled-layout-link: var(--color-blue-800);
123
+ --color-bg-filled-layout-link: var(--color-blue-700);
124
124
 
125
125
  /* Border Colors */
126
126
  --color-border-default: var(--color-gray-200);
@@ -135,28 +135,38 @@
135
135
  --color-border-info: var(--color-blue-200);
136
136
 
137
137
  /* Filled Button Border Colors */
138
- --color-border-filled-default: var(--color-gray-900);
139
- --color-border-filled-primary: var(--color-blue-900);
140
- --color-border-filled-secondary: var(--color-gray-900);
141
- --color-border-filled-tertiary: var(--color-gray-950);
142
- --color-border-filled-accent: var(--color-rose-900);
143
- --color-border-filled-success: var(--color-green-900);
144
- --color-border-filled-danger: var(--color-red-900);
145
- --color-border-filled-warning: var(--color-yellow-900);
146
- --color-border-filled-info: var(--color-blue-900);
147
- --color-border-filled-link: var(--color-blue-900);
138
+ --color-border-filled-default: var(--color-gray-600);
139
+ --color-border-filled-primary: var(--color-blue-600);
140
+ --color-border-filled-secondary: var(--color-gray-700);
141
+ --color-border-filled-tertiary: var(--color-gray-800);
142
+ --color-border-filled-accent: var(--color-rose-600);
143
+ --color-border-filled-success: var(--color-green-600);
144
+ --color-border-filled-danger: var(--color-red-600);
145
+ --color-border-filled-warning: var(--color-yellow-600);
146
+ --color-border-filled-info: var(--color-blue-600);
147
+ --color-border-filled-link: var(--color-blue-600);
148
148
 
149
149
  /* UI Component Border Radius Sizes */
150
- --ui-br-xs: 0.125rem;
151
- --ui-br-sm: 0.25rem;
152
- --ui-br-md: 0.375rem;
153
- --ui-br-lg: 0.5rem;
154
- --ui-br-xl: 0.625rem;
150
+ --ui-br-spacing: 0.125rem;
151
+ --ui-br-xs: calc(1 * var(--ui-br-spacing));
152
+ --ui-br-sm: calc(2 * var(--ui-br-spacing));
153
+ --ui-br-md: calc(3 * var(--ui-br-spacing));
154
+ --ui-br-lg: calc(4 * var(--ui-br-spacing));
155
+ --ui-br-xl: calc(5 * var(--ui-br-spacing));
155
156
 
156
157
  /* Layout Component Border Radius Sizes */
157
- --layout-br-xs: 0.375rem;
158
- --layout-br-sm: 0.5rem;
159
- --layout-br-md: 0.625rem;
160
- --layout-br-lg: 0.75rem;
161
- --layout-br-xl: 0.875rem;
158
+ --layout-br-spacing: 0.25rem;
159
+ --layout-br-xs: calc(3 * var(--layout-br-spacing));
160
+ --layout-br-sm: calc(4 * var(--layout-br-spacing));
161
+ --layout-br-md: calc(5 * var(--layout-br-spacing));
162
+ --layout-br-lg: calc(6 * var(--layout-br-spacing));
163
+ --layout-br-xl: calc(7 * var(--layout-br-spacing));
164
+
165
+ /* Layout Component Gap Sizes */
166
+ --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
167
+ --layout-gap-xs: calc(2 * var(--layout-spacing));
168
+ --layout-gap-sm: calc(3 * var(--layout-spacing));
169
+ --layout-gap-md: calc(4 * var(--layout-spacing));
170
+ --layout-gap-lg: calc(5 * var(--layout-spacing));
171
+ --layout-gap-xl: calc(6 * var(--layout-spacing));
162
172
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.3.1-alpha.20250914202143.38eda80",
3
+ "version": "0.3.1-alpha.20250916140129.7475230",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",