@szum-tech/design-system 2.7.0 → 3.0.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 (126) hide show
  1. package/dist/chunk-2Y2ZCPNV.cjs +61 -0
  2. package/dist/chunk-3376ZTRC.cjs +2 -0
  3. package/dist/{chunk-S5BN23O7.cjs → chunk-3KMXFN6M.cjs} +14 -20
  4. package/dist/chunk-5AA4IE2T.cjs +27 -0
  5. package/dist/chunk-5F2Y65JH.js +32 -0
  6. package/dist/chunk-6BSR3O2J.js +53 -0
  7. package/dist/chunk-BYXBJQAS.js +1 -0
  8. package/dist/{chunk-XIPREW2R.js → chunk-DP7UEOTA.js} +173 -176
  9. package/dist/chunk-HCHVDUI6.cjs +34 -0
  10. package/dist/chunk-HD7ZDQWW.js +173 -0
  11. package/dist/chunk-I3RSTJP6.js +20 -0
  12. package/dist/chunk-I7AV5IQO.cjs +33 -0
  13. package/dist/chunk-N4O2GO6V.cjs +204 -0
  14. package/dist/chunk-NGVFYKAT.js +29 -0
  15. package/dist/chunk-NU5UQPBX.cjs +25 -0
  16. package/dist/chunk-OQCNPNPS.js +23 -0
  17. package/dist/chunk-S3ANEJJ7.cjs +22 -0
  18. package/dist/chunk-U4AWAABZ.js +4901 -0
  19. package/dist/chunk-UGSNASZM.js +25 -0
  20. package/dist/{chunk-EIXSMEDP.cjs → chunk-UIOBJSKZ.cjs} +1 -3
  21. package/dist/{chunk-I5P2HH5Z.js → chunk-WJSS32MY.js} +13 -19
  22. package/dist/{chunk-GEACYHTU.js → chunk-XJIUGEPN.js} +1 -3
  23. package/dist/chunk-Y6EVJSAH.cjs +4928 -0
  24. package/dist/{chunk-D3MOZUNH.cjs → chunk-ZV4467OW.cjs} +176 -185
  25. package/dist/components/alert-dialog/index.cjs +1 -0
  26. package/dist/components/alert-dialog/index.js +1 -0
  27. package/dist/components/avatar/index.cjs +5 -4
  28. package/dist/components/avatar/index.d.cts +5 -19
  29. package/dist/components/avatar/index.d.ts +5 -19
  30. package/dist/components/avatar/index.js +2 -1
  31. package/dist/components/badge/index.cjs +1 -0
  32. package/dist/components/badge/index.js +1 -0
  33. package/dist/components/button/index.cjs +23 -3
  34. package/dist/components/button/index.d.cts +8 -15
  35. package/dist/components/button/index.d.ts +8 -15
  36. package/dist/components/button/index.js +22 -2
  37. package/dist/components/card/index.cjs +12 -7
  38. package/dist/components/card/index.d.cts +8 -5
  39. package/dist/components/card/index.d.ts +8 -5
  40. package/dist/components/card/index.js +2 -1
  41. package/dist/components/checkbox/index.cjs +12 -0
  42. package/dist/components/checkbox/index.d.cts +8 -0
  43. package/dist/components/checkbox/index.d.ts +8 -0
  44. package/dist/components/checkbox/index.js +3 -0
  45. package/dist/components/dialog/index.cjs +1 -0
  46. package/dist/components/dialog/index.d.cts +1 -1
  47. package/dist/components/dialog/index.d.ts +1 -1
  48. package/dist/components/dialog/index.js +1 -0
  49. package/dist/components/field/index.cjs +50 -0
  50. package/dist/components/field/index.d.cts +50 -0
  51. package/dist/components/field/index.d.ts +50 -0
  52. package/dist/components/field/index.js +5 -0
  53. package/dist/components/header/index.cjs +1 -0
  54. package/dist/components/header/index.js +1 -0
  55. package/dist/components/index.cjs +158 -126
  56. package/dist/components/index.d.cts +7 -8
  57. package/dist/components/index.d.ts +7 -8
  58. package/dist/components/index.js +14 -14
  59. package/dist/components/input/index.cjs +3 -2
  60. package/dist/components/input/index.d.cts +2 -4
  61. package/dist/components/input/index.d.ts +2 -4
  62. package/dist/components/input/index.js +2 -1
  63. package/dist/components/item/index.cjs +13 -12
  64. package/dist/components/item/index.d.cts +7 -7
  65. package/dist/components/item/index.d.ts +7 -7
  66. package/dist/components/item/index.js +3 -2
  67. package/dist/components/label/index.cjs +3 -2
  68. package/dist/components/label/index.js +2 -1
  69. package/dist/components/select/index.cjs +20 -3
  70. package/dist/components/select/index.d.cts +20 -6
  71. package/dist/components/select/index.d.ts +20 -6
  72. package/dist/components/select/index.js +2 -1
  73. package/dist/components/separator/index.cjs +3 -2
  74. package/dist/components/separator/index.js +2 -1
  75. package/dist/components/sheet/index.cjs +1 -0
  76. package/dist/components/sheet/index.d.cts +1 -1
  77. package/dist/components/sheet/index.d.ts +1 -1
  78. package/dist/components/sheet/index.js +1 -0
  79. package/dist/components/spinner/index.cjs +1 -0
  80. package/dist/components/spinner/index.js +1 -0
  81. package/dist/components/stepper/index.cjs +33 -33
  82. package/dist/components/stepper/index.js +14 -14
  83. package/dist/components/textarea/index.cjs +4 -2
  84. package/dist/components/textarea/index.d.cts +2 -2
  85. package/dist/components/textarea/index.d.ts +2 -2
  86. package/dist/components/textarea/index.js +3 -1
  87. package/dist/components/tooltip/index.cjs +1 -0
  88. package/dist/components/tooltip/index.js +1 -0
  89. package/dist/contexts/index.cjs +1 -0
  90. package/dist/contexts/index.js +1 -0
  91. package/dist/hooks/index.cjs +1 -0
  92. package/dist/hooks/index.js +1 -0
  93. package/dist/icons/index.cjs +89 -18
  94. package/dist/icons/index.js +88 -1
  95. package/dist/utils/index.cjs +1 -0
  96. package/dist/utils/index.js +1 -0
  97. package/package.json +8 -9
  98. package/tailwind/global.css +5 -9
  99. package/tailwind/palette.css +149 -204
  100. package/tailwind/typography.css +33 -57
  101. package/dist/chunk-36YD6ICC.js +0 -70
  102. package/dist/chunk-4NO6IM75.cjs +0 -40
  103. package/dist/chunk-5BTQ6BQA.js +0 -24
  104. package/dist/chunk-5PBHBOXI.js +0 -30
  105. package/dist/chunk-EU7G37IS.js +0 -36
  106. package/dist/chunk-FPFRA5Q6.cjs +0 -31
  107. package/dist/chunk-FVSO3RHT.cjs +0 -17
  108. package/dist/chunk-G6VXQ7DJ.cjs +0 -63
  109. package/dist/chunk-IAI7BIAG.js +0 -31
  110. package/dist/chunk-K4TRAPRN.cjs +0 -341
  111. package/dist/chunk-MI3CQBHC.js +0 -60
  112. package/dist/chunk-OIWEXHFE.cjs +0 -33
  113. package/dist/chunk-P4J2TTH7.cjs +0 -32
  114. package/dist/chunk-UKWZ5BHD.cjs +0 -93
  115. package/dist/chunk-VZKTT6CG.js +0 -15
  116. package/dist/chunk-XTO7CMIM.js +0 -88
  117. package/dist/chunk-YJFJLF7Y.js +0 -319
  118. package/dist/chunk-ZZ3EBGSD.cjs +0 -72
  119. package/dist/components/form/index.cjs +0 -55
  120. package/dist/components/form/index.d.cts +0 -32
  121. package/dist/components/form/index.d.ts +0 -32
  122. package/dist/components/form/index.js +0 -22
  123. package/dist/components/helper-text/index.cjs +0 -10
  124. package/dist/components/helper-text/index.d.cts +0 -18
  125. package/dist/components/helper-text/index.d.ts +0 -18
  126. package/dist/components/helper-text/index.js +0 -1
@@ -1,214 +1,159 @@
1
1
  @import "tailwindcss";
2
2
 
3
3
  :root {
4
- --primary-50: oklch(97.51% 0.013 244.25);
5
- --primary-100: oklch(94.77% 0.026 246.34);
6
- --primary-200: oklch(88.95% 0.057 246.86);
7
- --primary-300: oklch(81.61% 0.097 247.33);
8
- --primary-400: oklch(73.22% 0.145 248.98);
9
- --primary-500: oklch(62.57% 0.205 254.88); /* 0085FF */
10
- --primary-600: oklch(57.8% 0.19 254.97);
11
- --primary-700: oklch(52.05% 0.169 254.68);
12
- --primary-800: oklch(47.19% 0.151 254.19);
13
- --primary-900: oklch(36.91% 0.115 253.45);
14
- --primary-950: oklch(27.44% 0.08 251.27);
15
-
16
- --success-50: oklch(97.63% 0.036 155.45);
17
- --success-100: oklch(94.33% 0.093 152.85);
18
- --success-200: oklch(88.01% 0.232 148.18);
19
- --success-300: oklch(81.7% 0.257 144.95);
20
- --success-400: oklch(76.15% 0.239 145.1);
21
- --success-500: oklch(68.58% 0.215 145.12); /* 00BA34 */
22
- --success-600: oklch(63.61% 0.198 145.34);
23
- --success-700: oklch(57.96% 0.18 145.44);
24
- --success-800: oklch(50.41% 0.155 145.77);
25
- --success-900: oklch(39.76% 0.12 146.39);
26
- --success-950: oklch(33.03% 0.098 147.09);
27
-
28
- --warning-50: oklch(98.24% 0.013 71.33);
29
- --warning-100: oklch(95.76% 0.031 70.53);
30
- --warning-200: oklch(91.19% 0.066 69.81);
31
- --warning-300: oklch(85.71% 0.109 68.61);
32
- --warning-400: oklch(80.28% 0.149 65.89);
33
- --warning-500: oklch(73.3% 0.177 57.08); /* F98600 */
34
- --warning-600: oklch(67.68% 0.164 57.12);
35
- --warning-700: oklch(61.95% 0.15 57.16);
36
- --warning-800: oklch(53.64% 0.128 58.05);
37
- --warning-900: oklch(41.27% 0.097 60.16);
38
- --warning-950: oklch(34.71% 0.081 61.03);
39
-
40
- --error-50: oklch(97.93% 0.009 17.3);
41
- --error-100: oklch(94.78% 0.023 17.56);
42
- --error-200: oklch(88.5% 0.052 18.18);
43
- --error-300: oklch(81.49% 0.087 19.13);
44
- --error-400: oklch(72.38% 0.143 21.21);
45
- --error-500: oklch(60.48% 0.223 27.1); /* E92C2C */
46
- --error-600: oklch(55.31% 0.217 28.3);
47
- --error-700: oklch(51.8% 0.203 28.25);
48
- --error-800: oklch(45.44% 0.176 28.07);
49
- --error-900: oklch(35.65% 0.136 27.68);
50
- --error-950: oklch(28.66% 0.105 27.06);
51
-
52
- --gray-50: oklch(16.84% 0 none);
53
- --gray-100: oklch(22.64% 0 none);
54
- --gray-200: oklch(33.29% 0 none);
55
- --gray-300: oklch(42.76% 0 none);
56
- --gray-400: oklch(52.08% 0 none);
57
- --gray-500: oklch(60.66% 0 none);
58
- --gray-600: oklch(68.3% 0 none);
59
- --gray-700: oklch(76.68% 0 none);
60
- --gray-800: oklch(84.52% 0 none);
61
- --gray-900: oklch(92.49% 0 none);
62
- --gray-950: oklch(96.12% 0 none);
63
-
64
- --foreground: oklch(100% 0 0); /* #ffffff */
65
- --background: oklch(97.61% 0 0); /* #f7f7f7 */
66
-
67
- --background-color-primary: oklch(62.57% 0.205 254.88 / 10%);
68
- --background-color-success: oklch(68.58% 0.215 145.12 / 10%);
69
- --background-color-warning: oklch(73.3% 0.177 57.08 / 10%);
70
- --background-color-error: oklch(60.48% 0.223 27.1 / 10%);
4
+ --radius: 0.25rem;
5
+
6
+ --background: oklch(1 0 0);
7
+ --foreground: oklch(0.145 0 0);
8
+
9
+ --primary: var(--color-blue-700);
10
+ --primary-foreground: var(--color-blue-50);
11
+
12
+ --secondary: oklch(0.97 0 0);
13
+ --secondary-foreground: oklch(0.205 0 0);
14
+
15
+ --muted: oklch(0.97 0 0);
16
+ --muted-foreground: oklch(0.556 0 0);
17
+
18
+ --accent: oklch(0.97 0 0);
19
+ --accent-foreground: oklch(0.205 0 0);
20
+
21
+ --success: var(--color-green-600);
22
+ --success-foreground: var(--color-green-50);
23
+
24
+ --warning: var(--color-yellow-600);
25
+ --warning-foreground: var(--color-yellow-50);
26
+
27
+ --error: var(--color-red-600);
28
+ --error-foreground: var(--color-red-50);
29
+
30
+ --border: oklch(0.922 0 0);
31
+
32
+ --input: oklch(0.922 0 0);
33
+
34
+ --ring: oklch(0.708 0 0);
35
+
36
+ --chart-1: var(--color-blue-300);
37
+ --chart-2: var(--color-blue-500);
38
+ --chart-3: var(--color-blue-600);
39
+ --chart-4: var(--color-blue-700);
40
+ --chart-5: var(--color-blue-800);
41
+
42
+ --sidebar: oklch(0.985 0 0);
43
+ --sidebar-foreground: oklch(0.145 0 0);
44
+ --sidebar-primary: var(--color-blue-600);
45
+ --sidebar-primary-foreground: var(--color-blue-50);
46
+ --sidebar-accent: oklch(0.97 0 0);
47
+ --sidebar-accent-foreground: oklch(0.205 0 0);
48
+ --sidebar-border: oklch(0.922 0 0);
49
+ --sidebar-ring: oklch(0.708 0 0);
50
+
51
+ --card: oklch(1 0 0);
52
+ --card-foreground: oklch(0.145 0 0);
53
+
54
+ --popover: oklch(1 0 0);
55
+ --popover-foreground: oklch(0.145 0 0);
71
56
  }
72
57
 
73
58
  .dark {
74
- --primary-50: oklch(95.73% 0.022 243.8);
75
- --primary-100: oklch(92.32% 0.039 245.9);
76
- --primary-200: oklch(84.85% 0.08 246.55);
77
- --primary-300: oklch(77.52% 0.12 248.28);
78
- --primary-400: oklch(70.34% 0.161 249.91);
79
- --primary-500: oklch(64.88% 0.192 252.97); /* #168FFF */
80
- --primary-600: oklch(55.7% 0.183 254.97);
81
- --primary-700: oklch(46.13% 0.148 254.28);
82
- --primary-800: oklch(34.89% 0.108 253.05);
83
- --primary-900: oklch(22.66% 0.063 249.41);
84
- --primary-950: oklch(15.2% 0.035 241.02);
85
-
86
- --success-50: oklch(96.87% 0.035 153.26);
87
- --success-100: oklch(94.27% 0.062 153.52);
88
- --success-200: oklch(89.38% 0.124 152.45);
89
- --success-300: oklch(85.13% 0.178 150.26);
90
- --success-400: oklch(81.67% 0.225 147.6);
91
- --success-500: oklch(73.48% 0.217 146.32); /* #17CB49 */
92
- --success-600: oklch(61.63% 0.18 146.58);
93
- --success-700: oklch(51.25% 0.148 146.84);
94
- --success-800: oklch(38.43% 0.107 147.47);
95
- --success-900: oklch(24.8% 0.063 148.91);
96
- --success-950: oklch(16.24% 0.035 154.22);
97
-
98
- --warning-50: oklch(97.72% 0.017 73.08);
99
- --warning-100: oklch(95.44% 0.036 74.07);
100
- --warning-200: oklch(90.87% 0.071 72.19);
101
- --warning-300: oklch(86.27% 0.109 71.27);
102
- --warning-400: oklch(82.23% 0.139 68.81);
103
- --warning-500: oklch(78.35% 0.163 64.42); /* #FF9F2D */
104
- --warning-600: oklch(71.78% 0.171 58.57);
105
- --warning-700: oklch(57.81% 0.137 59.27);
106
- --warning-800: oklch(44.08% 0.102 61.22);
107
- --warning-900: oklch(28.11% 0.062 67.17);
108
- --warning-950: oklch(19.24% 0.041 73.97);
109
-
110
- --error-50: oklch(95.52% 0.021 17.52);
111
- --error-100: oklch(91.33% 0.041 17.93);
112
- --error-200: oklch(83.13% 0.088 19.1);
113
- --error-300: oklch(76.23% 0.131 20.58);
114
- --error-400: oklch(69.7% 0.18 22.93);
115
- --error-500: oklch(64.72% 0.218 25.77); /* #F74141 */
116
- --error-600: oklch(60.2% 0.244 28.95);
117
- --error-700: oklch(48.81% 0.197 28.81);
118
- --error-800: oklch(35.63% 0.142 28.57);
119
- --error-900: oklch(22.44% 0.088 28.18);
120
- --error-950: oklch(14.85% 0.056 27.47);
121
-
122
- --gray-50: oklch(97.02% 0 none);
123
- --gray-100: oklch(93.7% 0 none); /* #eaeaea */
124
- --gray-200: oklch(86.07% 0 none);
125
- --gray-300: oklch(77.31% 0 none);
126
- --gray-400: oklch(69.27% 0 none);
127
- --gray-500: oklch(60.66% 0 none);
128
- --gray-600: oklch(52.08% 0 none);
129
- --gray-700: oklch(42.76% 0 none);
130
- --gray-800: oklch(32.11% 0 none);
131
- --gray-900: oklch(21.78% 0 none);
132
- --gray-950: oklch(15.91% 0 none);
133
-
134
- --foreground: oklch(17.76% 0 0); /* #111111 */
135
- --background: oklch(22.64% 0 0); /* #1C1C1C */
136
-
137
- --background-color-primary: oklch(64.88% 0.192 252.97 / 10%);
138
- --background-color-success: oklch(73.48% 0.217 146.32 / 10%);
139
- --background-color-warning: oklch(78.35% 0.163 64.42 / 10%);
140
- --background-color-error: oklch(64.72% 0.218 25.77 / 10%);
59
+ --background: oklch(0.145 0 0);
60
+ --foreground: oklch(0.985 0 0);
61
+
62
+ --primary: var(--color-blue-700);
63
+ --primary-foreground: var(--color-blue-50);
64
+
65
+ --secondary: oklch(0.269 0 0);
66
+ --secondary-foreground: oklch(0.985 0 0);
67
+
68
+ --muted: oklch(0.269 0 0);
69
+ --muted-foreground: oklch(0.708 0 0);
70
+
71
+ --accent: oklch(0.371 0 0);
72
+ --accent-foreground: oklch(0.985 0 0);
73
+
74
+ --success: var(--color-green-700);
75
+ --success-foreground: var(--color-green-50);
76
+
77
+ --warning: var(--color-yellow-700);
78
+ --warning-foreground: var(--color-yellow-50);
79
+
80
+ --error: var(--color-red-700);
81
+ --error-foreground: var(--color-red-50);
82
+
83
+ --border: oklch(1 0 0 / 10%);
84
+
85
+ --input: oklch(1 0 0 / 15%);
86
+
87
+ --ring: oklch(0.556 0 0);
88
+
89
+ --sidebar: oklch(0.205 0 0);
90
+ --sidebar-foreground: oklch(0.985 0 0);
91
+ --sidebar-primary: var(--color-blue-500);
92
+ --sidebar-primary-foreground: var(--color-blue-50);
93
+ --sidebar-accent: oklch(0.269 0 0);
94
+ --sidebar-accent-foreground: oklch(0.985 0 0);
95
+ --sidebar-border: oklch(1 0 0 / 10%);
96
+ --sidebar-ring: oklch(0.439 0 0);
97
+
98
+ --card: oklch(0.205 0 0);
99
+ --card-foreground: oklch(0.985 0 0);
100
+
101
+ --popover: oklch(0.269 0 0);
102
+ --popover-foreground: oklch(0.985 0 0);
141
103
  }
142
104
 
143
105
  @theme inline {
144
- --color-white: oklch(100% 0 0); /* #ffffff */
145
- --color-black: oklch(22.64% 0 0); /* #1c1c1c */
146
-
147
- --color-gray-50: var(--gray-50);
148
- --color-gray-100: var(--gray-100);
149
- --color-gray-200: var(--gray-200);
150
- --color-gray-300: var(--gray-300);
151
- --color-gray-400: var(--gray-400);
152
- --color-gray-500: var(--gray-500);
153
- --color-gray-600: var(--gray-600);
154
- --color-gray-700: var(--gray-700);
155
- --color-gray-800: var(--gray-800);
156
- --color-gray-900: var(--gray-900);
157
- --color-gray-950: var(--gray-950);
158
-
159
- --color-primary-50: var(--primary-50);
160
- --color-primary-100: var(--primary-100);
161
- --color-primary-200: var(--primary-200);
162
- --color-primary-300: var(--primary-300);
163
- --color-primary-400: var(--primary-400);
164
- --color-primary-500: var(--primary-500);
165
- --color-primary-600: var(--primary-600);
166
- --color-primary-700: var(--primary-700);
167
- --color-primary-800: var(--primary-800);
168
- --color-primary-900: var(--primary-900);
169
- --color-primary-950: var(--primary-950);
170
-
171
- --color-success-50: var(--success-50);
172
- --color-success-100: var(--success-100);
173
- --color-success-200: var(--success-200);
174
- --color-success-300: var(--success-300);
175
- --color-success-400: var(--success-400);
176
- --color-success-500: var(--success-500);
177
- --color-success-600: var(--success-600);
178
- --color-success-700: var(--success-700);
179
- --color-success-800: var(--success-800);
180
- --color-success-900: var(--success-900);
181
- --color-success-950: var(--success-950);
182
-
183
- --color-warning-50: var(--warning-50);
184
- --color-warning-100: var(--warning-100);
185
- --color-warning-200: var(--warning-200);
186
- --color-warning-300: var(--warning-300);
187
- --color-warning-400: var(--warning-400);
188
- --color-warning-500: var(--warning-500);
189
- --color-warning-600: var(--warning-600);
190
- --color-warning-700: var(--warning-700);
191
- --color-warning-800: var(--warning-800);
192
- --color-warning-900: var(--warning-900);
193
- --color-warning-950: var(--warning-950);
194
-
195
- --color-error-50: var(--error-50);
196
- --color-error-100: var(--error-100);
197
- --color-error-200: var(--error-200);
198
- --color-error-300: var(--error-300);
199
- --color-error-400: var(--error-400);
200
- --color-error-500: var(--error-500);
201
- --color-error-600: var(--error-600);
202
- --color-error-700: var(--error-700);
203
- --color-error-800: var(--error-800);
204
- --color-error-900: var(--error-900);
205
- --color-error-950: var(--error-950);
206
-
207
- --color-app-background: var(--background);
208
- --color-app-foreground: var(--foreground);
209
-
210
- --color-background-primary: var(--background-color-primary);
211
- --color-background-success: var(--background-color-success);
212
- --color-background-warning: var(--background-color-warning);
213
- --color-background-error: var(--background-color-error);
106
+ /* Palette colors */
107
+ --color-background: var(--background);
108
+ --color-foreground: var(--foreground);
109
+
110
+ --color-primary: var(--primary);
111
+ --color-primary-foreground: var(--primary-foreground);
112
+
113
+ --color-secondary: var(--secondary);
114
+ --color-secondary-foreground: var(--secondary-foreground);
115
+
116
+ --color-muted: var(--muted);
117
+ --color-muted-foreground: var(--muted-foreground);
118
+
119
+ --color-accent: var(--accent);
120
+ --color-accent-foreground: var(--accent-foreground);
121
+
122
+ --color-error: var(--error);
123
+ --color-error-foreground: var(--error-foreground);
124
+
125
+ --color-warning: var(--warning);
126
+ --color-warning-foreground: var(--warning-foreground);
127
+
128
+ --color-success: var(--success);
129
+ --color-success-foreground: var(--success-foreground);
130
+
131
+ /* Chart colors */
132
+ --color-chart-1: var(--chart-1);
133
+ --color-chart-2: var(--chart-2);
134
+ --color-chart-3: var(--chart-3);
135
+ --color-chart-4: var(--chart-4);
136
+ --color-chart-5: var(--chart-5);
137
+
138
+ /* Components colors */
139
+ --color-sidebar: var(--sidebar);
140
+ --color-sidebar-foreground: var(--sidebar-foreground);
141
+ --color-sidebar-primary: var(--sidebar-primary);
142
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
143
+ --color-sidebar-accent: var(--sidebar-accent);
144
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
145
+ --color-sidebar-border: var(--sidebar-border);
146
+ --color-sidebar-ring: var(--sidebar-ring);
147
+
148
+ --color-card: var(--card);
149
+ --color-card-foreground: var(--card-foreground);
150
+
151
+ --color-popover: var(--popover);
152
+ --color-popover-foreground: var(--popover-foreground);
153
+
154
+ --color-border: var(--border);
155
+ --color-input: var(--input);
156
+ --color-ring: var(--ring);
157
+
158
+ --radius: var(--radius);
214
159
  }
@@ -3,72 +3,48 @@
3
3
  @theme {
4
4
  --font-poppins: "Poppins", sans-serif;
5
5
  --font-code: "JetBrains Mono", monospace;
6
+ }
6
7
 
7
- /* HEADING */
8
- --text-heading-1: 6rem;
9
- --text-heading-1--line-height: 1.5;
10
- --text-heading-1--letter-spacing: -0.01562em;
11
- --text-heading-1--font-weight: 700;
12
-
13
- --text-heading-2: 3.75rem;
14
- --text-heading-2--line-height: 1.2;
15
- --text-heading-2--letter-spacing: -0.00833em;
16
- --text-heading-2--font-weight: 700;
17
-
18
- --text-heading-3: 3rem;
19
- --text-heading-3--line-height: 1.167;
20
- --text-heading-3--letter-spacing: 0em;
21
- --text-heading-3--font-weight: 600;
8
+ @utility typography-heading-1 {
9
+ @apply scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance;
10
+ }
22
11
 
23
- --text-heading-4: 2.125rem;
24
- --text-heading-4--line-height: 1.235;
25
- --text-heading-4--letter-spacing: 0.00735em;
26
- --text-heading-4--font-weight: 600;
12
+ @utility typography-heading-2 {
13
+ @apply border-border scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
14
+ }
27
15
 
28
- --text-heading-5: 1.5rem;
29
- --text-heading-5--line-height: 1.334;
30
- --text-heading-5--letter-spacing: 0.00735em;
31
- --text-heading-5--font-weight: 600;
16
+ @utility typography-heading-3 {
17
+ @apply scroll-m-20 text-2xl font-semibold tracking-tight;
18
+ }
32
19
 
33
- --text-heading-6: 1.25rem;
34
- --text-heading-6--line-height: 1.6;
35
- --text-heading-6--letter-spacing: 0.0075em;
36
- --text-heading-6--font-weight: 600;
20
+ @utility typography-heading-4 {
21
+ @apply scroll-m-20 text-xl font-semibold tracking-tight;
22
+ }
37
23
 
38
- --text-subtitle-1: 1rem;
39
- --text-subtitle-1--line-height: 1.75;
40
- --text-subtitle-1--letter-spacing: 0.00938em;
41
- --text-subtitle-1--font-weight: 500;
24
+ @utility typography-paragraph {
25
+ @apply leading-7 [&:not(:first-child)]:mt-6;
26
+ }
42
27
 
43
- --text-subtitle-2: 0.875rem;
44
- --text-subtitle-2--line-height: 1.57;
45
- --text-subtitle-2--letter-spacing: 0.00714em;
46
- --text-subtitle-2--font-weight: 500;
28
+ @utility typography-blockquote {
29
+ @apply border-border mt-6 border-l-2 pl-6 italic;
30
+ }
47
31
 
48
- /* BODY */
49
- --text-body-1: 1rem;
50
- --text-body-1--line-height: 1.5;
51
- --text-body-1--letter-spacing: 0.00938em;
52
- --text-body-1--font-weight: 400;
32
+ @utility typography-inline-code {
33
+ @apply bg-muted font-code relative rounded px-[0.3rem] py-[0.2rem] text-sm font-semibold;
34
+ }
53
35
 
54
- --text-body-2: 0.875rem;
55
- --text-body-2--line-height: 1.43;
56
- --text-body-2--letter-spacing: 0.01071em;
57
- --text-body-2--font-weight: 400;
36
+ @utility typography-lead {
37
+ @apply text-muted-foreground text-xl;
38
+ }
58
39
 
59
- /* Other */
60
- --text-button: 0.875rem;
61
- --text-button--line-height: 1.25rem;
62
- --text-button--letter-spacing: 0.02857em;
63
- --text-button--font-weight: 500;
40
+ @utility typography-large {
41
+ @apply text-lg font-semibold;
42
+ }
64
43
 
65
- --text-caption: 0.75rem;
66
- --text-caption--line-height: 1.66;
67
- --text-caption--letter-spacing: 0.03333em;
68
- --text-caption--font-weight: 400;
44
+ @utility typography-small {
45
+ @apply text-sm leading-none font-medium;
46
+ }
69
47
 
70
- --text-overline: 0.75rem;
71
- --text-overline--line-height: 2.66;
72
- --text-overline--letter-spacing: 0.08333em;
73
- --text-overline--font-weight: 400;
48
+ @utility typography-muted {
49
+ @apply text-muted-foreground text-sm;
74
50
  }
@@ -1,70 +0,0 @@
1
- import { cn } from './chunk-ZD2QRAOX.js';
2
- import { cva } from 'class-variance-authority';
3
- import { jsxs, jsx } from 'react/jsx-runtime';
4
-
5
- var inputCva = cva(
6
- [
7
- "bg-app-foreground font-poppins h-10 w-full appearance-none border py-2 outline-0 transition-colors duration-300 ease-in-out",
8
- "placeholder:select-none placeholder:text-gray-400",
9
- "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
10
- "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600"
11
- ],
12
- {
13
- variants: {
14
- invalid: {
15
- true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
16
- false: ["hover:border-primary-600 border-gray-600 text-gray-100"]
17
- },
18
- withStartIcon: {
19
- true: "pl-11",
20
- false: "pl-3"
21
- },
22
- withEndIcon: {
23
- true: "pr-11",
24
- false: "pr-3"
25
- }
26
- },
27
- defaultVariants: {
28
- invalid: false,
29
- withStartIcon: false,
30
- withEndIcon: false
31
- }
32
- }
33
- );
34
- var inputIconContainerCva = cva(
35
- ["pointer-events-none absolute inset-y-2 inline-flex w-10 place-content-center items-center text-center"],
36
- {
37
- variants: {
38
- disabled: {
39
- true: "text-gray-300"
40
- },
41
- site: {
42
- right: "right-0 border-l border-l-gray-800 pr-1",
43
- left: "left-0 border-r border-r-gray-800 pl-1"
44
- }
45
- },
46
- defaultVariants: {
47
- disabled: false
48
- }
49
- }
50
- );
51
- function Input({ invalid = false, startIcon, endIcon, disabled = false, className, ...props }) {
52
- const inputStyles = inputCva({ withEndIcon: !!endIcon, withStartIcon: !!startIcon, invalid });
53
- const inputIconStartContainer = inputIconContainerCva({ site: "left", disabled });
54
- const inputIconEndContainer = inputIconContainerCva({ site: "right", disabled });
55
- return /* @__PURE__ */ jsxs("div", { className: "text-body-2 relative text-gray-100", children: [
56
- startIcon ? /* @__PURE__ */ jsx("span", { className: inputIconStartContainer, children: startIcon }) : null,
57
- /* @__PURE__ */ jsx(
58
- "input",
59
- {
60
- "aria-invalid": invalid || void 0,
61
- disabled,
62
- className: cn(inputStyles, className),
63
- ...props
64
- }
65
- ),
66
- endIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: inputIconEndContainer, children: endIcon }) : null
67
- ] });
68
- }
69
-
70
- export { Input };
@@ -1,40 +0,0 @@
1
- 'use strict';
2
-
3
- var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
4
- var radixUi = require('radix-ui');
5
- var classVarianceAuthority = require('class-variance-authority');
6
- var jsxRuntime = require('react/jsx-runtime');
7
-
8
- var avatarCva = classVarianceAuthority.cva("relative flex shrink-0 overflow-hidden rounded text-gray-100", {
9
- variants: {
10
- size: {
11
- sm: "size-6 text-xs",
12
- md: "size-10 text-lg",
13
- lg: "size-14 text-2xl"
14
- }
15
- },
16
- defaultVariants: {
17
- size: "md"
18
- }
19
- });
20
- function Avatar({ className, size = "md", ref, ...props }) {
21
- const avatarStyles = avatarCva({ size });
22
- return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Avatar.Root, { ref, className: chunkH2BWO3SI_cjs.cn(avatarStyles, className), ...props });
23
- }
24
- function AvatarImage({ className, ref, ...props }) {
25
- return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Avatar.Image, { ref, className: chunkH2BWO3SI_cjs.cn("aspect-square h-full w-full", className), ...props });
26
- }
27
- function AvatarFallback({ className, ref, ...props }) {
28
- return /* @__PURE__ */ jsxRuntime.jsx(
29
- radixUi.Avatar.Fallback,
30
- {
31
- ref,
32
- className: chunkH2BWO3SI_cjs.cn("flex h-full w-full items-center justify-center bg-gray-600", className),
33
- ...props
34
- }
35
- );
36
- }
37
-
38
- exports.Avatar = Avatar;
39
- exports.AvatarFallback = AvatarFallback;
40
- exports.AvatarImage = AvatarImage;
@@ -1,24 +0,0 @@
1
- import { cn } from './chunk-ZD2QRAOX.js';
2
- import { jsx } from 'react/jsx-runtime';
3
- import { twMerge } from 'tailwind-merge';
4
-
5
- function Card({ className, ...props }) {
6
- return /* @__PURE__ */ jsx("div", { className: cn("bg-app-foreground h-full rounded border border-gray-800", className), ...props });
7
- }
8
- function CardHeader({ className, ...props }) {
9
- return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col p-6", className), ...props });
10
- }
11
- function CardTitle({ className, ...props }) {
12
- return /* @__PURE__ */ jsx("h3", { className: twMerge("text-heading-5", className), ...props });
13
- }
14
- function CardDescription({ className, ...props }) {
15
- return /* @__PURE__ */ jsx("p", { className: cn("text-body-2 text-gray-300", className), ...props });
16
- }
17
- function CardContent({ className, ...props }) {
18
- return /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ...props });
19
- }
20
- function CardFooter({ className, ...props }) {
21
- return /* @__PURE__ */ jsx("div", { className: cn("flex items-center p-6 pt-0", className), ...props });
22
- }
23
-
24
- export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
@@ -1,30 +0,0 @@
1
- import { twMerge } from 'tailwind-merge';
2
- import { cva } from 'class-variance-authority';
3
- import { jsx } from 'react/jsx-runtime';
4
-
5
- // src/components/helper-text/helper-text.tsx
6
- var helperTextCva = cva("", {
7
- variants: {
8
- type: {
9
- description: "text-body-2 text-gray-300",
10
- error: "text-caption text-error-500"
11
- }
12
- },
13
- defaultVariants: {
14
- type: "description"
15
- }
16
- });
17
- function HelperText({ className, children, type = "description", role, ref, ...props }) {
18
- return /* @__PURE__ */ jsx(
19
- "p",
20
- {
21
- ref,
22
- className: twMerge(helperTextCva({ type }), className),
23
- role: type === "error" ? "alert" : role,
24
- ...props,
25
- children
26
- }
27
- );
28
- }
29
-
30
- export { HelperText };