@valerius_petrini/corekit-ui 0.1.63 → 0.1.64
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.
- package/dist/components/Analytics.svelte +4 -0
- package/dist/components/Button.svelte +10 -5
- package/dist/components/Card.svelte +1 -1
- package/dist/components/Combobox.svelte +207 -0
- package/dist/components/Combobox.svelte.d.ts +4 -0
- package/dist/components/Input.svelte +46 -148
- package/dist/components/KBD.svelte +23 -0
- package/dist/components/KBD.svelte.d.ts +3 -0
- package/dist/components/Loader.svelte +35 -0
- package/dist/components/Loader.svelte.d.ts +4 -0
- package/dist/components/SEO.svelte +27 -17
- package/dist/components/Select.svelte +63 -23
- package/dist/components/Select.svelte.d.ts +1 -1
- package/dist/components/helper/BaseInput.svelte +105 -0
- package/dist/components/helper/BaseInput.svelte.d.ts +4 -0
- package/dist/components/helper/NumberInput.svelte +79 -0
- package/dist/components/helper/NumberInput.svelte.d.ts +11 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/styles/color.d.ts +1 -1
- package/dist/styles/color.js +56 -28
- package/dist/styles/layout.css +6 -0
- package/dist/styles/size.d.ts +1 -1
- package/dist/styles/size.js +36 -12
- package/dist/types/Button.d.ts +1 -0
- package/dist/types/Input.d.ts +20 -5
- package/dist/types/Input.js +1 -0
- package/dist/types/Loader.d.ts +5 -0
- package/dist/types/{Select.js → Loader.js} +0 -1
- package/dist/types/SEO.d.ts +1 -1
- package/dist/utils/debounce.d.ts +1 -0
- package/dist/utils/debounce.js +7 -0
- package/dist/utils/link.d.ts +2 -2
- package/dist/utils/link.js +2 -2
- package/package.json +1 -1
- package/dist/types/Select.d.ts +0 -12
package/dist/styles/color.js
CHANGED
|
@@ -5,7 +5,8 @@ export const colorStyleParts = {
|
|
|
5
5
|
full: "bg-rose-500 hover:bg-rose-600",
|
|
6
6
|
light: "bg-rose-500/35 hover:bg-rose-600/35 text-white/60",
|
|
7
7
|
outline: "border border-rose-500 hover:border-rose-600 text-rose-500 hover:text-rose-600 hover:bg-rose-500/10",
|
|
8
|
-
ghost: "hover:bg-rose-500"
|
|
8
|
+
ghost: "hover:bg-rose-500",
|
|
9
|
+
loader: "border-t-rose-500"
|
|
9
10
|
},
|
|
10
11
|
red: {
|
|
11
12
|
base: "bg-red-500",
|
|
@@ -13,7 +14,8 @@ export const colorStyleParts = {
|
|
|
13
14
|
full: "bg-red-500 hover:bg-red-600",
|
|
14
15
|
light: "bg-red-500/35 hover:bg-red-600/35 text-white/60",
|
|
15
16
|
outline: "border border-red-500 hover:border-red-600 text-red-500 hover:text-red-600 hover:bg-red-500/10",
|
|
16
|
-
ghost: "hover:bg-red-500"
|
|
17
|
+
ghost: "hover:bg-red-500",
|
|
18
|
+
loader: "border-t-red-500"
|
|
17
19
|
},
|
|
18
20
|
orange: {
|
|
19
21
|
base: "bg-orange-500",
|
|
@@ -21,7 +23,8 @@ export const colorStyleParts = {
|
|
|
21
23
|
full: "bg-orange-500 hover:bg-orange-600",
|
|
22
24
|
light: "bg-orange-500/35 hover:bg-orange-600/35 text-white/60",
|
|
23
25
|
outline: "border border-orange-500 hover:border-orange-600 text-orange-500 hover:text-orange-600 hover:bg-orange-500/10",
|
|
24
|
-
ghost: "hover:bg-orange-500"
|
|
26
|
+
ghost: "hover:bg-orange-500",
|
|
27
|
+
loader: "border-t-orange-500"
|
|
25
28
|
},
|
|
26
29
|
amber: {
|
|
27
30
|
base: "bg-amber-500",
|
|
@@ -29,7 +32,8 @@ export const colorStyleParts = {
|
|
|
29
32
|
full: "bg-amber-500 hover:bg-amber-600",
|
|
30
33
|
light: "bg-amber-500/35 hover:bg-amber-600/35 text-white/60",
|
|
31
34
|
outline: "border border-amber-500 hover:border-amber-600 text-amber-500 hover:text-amber-600 hover:bg-amber-500/10",
|
|
32
|
-
ghost: "hover:bg-amber-500"
|
|
35
|
+
ghost: "hover:bg-amber-500",
|
|
36
|
+
loader: "border-t-amber-500"
|
|
33
37
|
},
|
|
34
38
|
yellow: {
|
|
35
39
|
base: "bg-yellow-500",
|
|
@@ -37,7 +41,8 @@ export const colorStyleParts = {
|
|
|
37
41
|
full: "bg-yellow-500 hover:bg-yellow-600",
|
|
38
42
|
light: "bg-yellow-500/35 hover:bg-yellow-600/35 text-white/60",
|
|
39
43
|
outline: "border border-yellow-500 hover:border-yellow-600 text-yellow-500 hover:text-yellow-600 hover:bg-yellow-500/10",
|
|
40
|
-
ghost: "hover:bg-yellow-500"
|
|
44
|
+
ghost: "hover:bg-yellow-500",
|
|
45
|
+
loader: "border-t-yellow-500"
|
|
41
46
|
},
|
|
42
47
|
lime: {
|
|
43
48
|
base: "bg-lime-500",
|
|
@@ -45,7 +50,8 @@ export const colorStyleParts = {
|
|
|
45
50
|
full: "bg-lime-500 hover:bg-lime-600",
|
|
46
51
|
light: "bg-lime-500/35 hover:bg-lime-600/35 text-white/60",
|
|
47
52
|
outline: "border border-lime-500 hover:border-lime-600 text-lime-500 hover:text-lime-600 hover:bg-lime-500/10",
|
|
48
|
-
ghost: "hover:bg-lime-500"
|
|
53
|
+
ghost: "hover:bg-lime-500",
|
|
54
|
+
loader: "border-t-lime-500"
|
|
49
55
|
},
|
|
50
56
|
green: {
|
|
51
57
|
base: "bg-green-500",
|
|
@@ -53,7 +59,8 @@ export const colorStyleParts = {
|
|
|
53
59
|
full: "bg-green-500 hover:bg-green-600",
|
|
54
60
|
light: "bg-green-500/35 hover:bg-green-600/35 text-white/60",
|
|
55
61
|
outline: "border border-green-500 hover:border-green-600 text-green-500 hover:text-green-600 hover:bg-green-500/10",
|
|
56
|
-
ghost: "hover:bg-green-500"
|
|
62
|
+
ghost: "hover:bg-green-500",
|
|
63
|
+
loader: "border-t-green-500"
|
|
57
64
|
},
|
|
58
65
|
emerald: {
|
|
59
66
|
base: "bg-emerald-500",
|
|
@@ -61,7 +68,8 @@ export const colorStyleParts = {
|
|
|
61
68
|
full: "bg-emerald-500 hover:bg-emerald-600",
|
|
62
69
|
light: "bg-emerald-500/35 hover:bg-emerald-600/35 text-white/60",
|
|
63
70
|
outline: "border border-emerald-500 hover:border-emerald-600 text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10",
|
|
64
|
-
ghost: "hover:bg-emerald-500"
|
|
71
|
+
ghost: "hover:bg-emerald-500",
|
|
72
|
+
loader: "border-t-emerald-500"
|
|
65
73
|
},
|
|
66
74
|
teal: {
|
|
67
75
|
base: "bg-teal-500",
|
|
@@ -69,7 +77,8 @@ export const colorStyleParts = {
|
|
|
69
77
|
full: "bg-teal-500 hover:bg-teal-600",
|
|
70
78
|
light: "bg-teal-500/35 hover:bg-teal-600/35 text-white/60",
|
|
71
79
|
outline: "border border-teal-500 hover:border-teal-600 text-teal-500 hover:text-teal-600 hover:bg-teal-500/10",
|
|
72
|
-
ghost: "hover:bg-teal-500"
|
|
80
|
+
ghost: "hover:bg-teal-500",
|
|
81
|
+
loader: "border-t-teal-500"
|
|
73
82
|
},
|
|
74
83
|
cyan: {
|
|
75
84
|
base: "bg-cyan-500",
|
|
@@ -77,7 +86,8 @@ export const colorStyleParts = {
|
|
|
77
86
|
full: "bg-cyan-500 hover:bg-cyan-600",
|
|
78
87
|
light: "bg-cyan-500/35 hover:bg-cyan-600/35 text-white/60",
|
|
79
88
|
outline: "border border-cyan-500 hover:border-cyan-600 text-cyan-500 hover:text-cyan-600 hover:bg-cyan-500/10",
|
|
80
|
-
ghost: "hover:bg-cyan-500"
|
|
89
|
+
ghost: "hover:bg-cyan-500",
|
|
90
|
+
loader: "border-t-cyan-500"
|
|
81
91
|
},
|
|
82
92
|
blue: {
|
|
83
93
|
base: "bg-blue-500",
|
|
@@ -85,7 +95,8 @@ export const colorStyleParts = {
|
|
|
85
95
|
full: "bg-blue-500 hover:bg-blue-600",
|
|
86
96
|
light: "bg-blue-500/35 hover:bg-blue-600/35 text-white/60",
|
|
87
97
|
outline: "border border-blue-500 hover:border-blue-600 text-blue-500 hover:text-blue-600 hover:bg-blue-500/10",
|
|
88
|
-
ghost: "hover:bg-blue-500"
|
|
98
|
+
ghost: "hover:bg-blue-500",
|
|
99
|
+
loader: "border-t-blue-500"
|
|
89
100
|
},
|
|
90
101
|
indigo: {
|
|
91
102
|
base: "bg-indigo-500",
|
|
@@ -93,7 +104,8 @@ export const colorStyleParts = {
|
|
|
93
104
|
full: "bg-indigo-500 hover:bg-indigo-600",
|
|
94
105
|
light: "bg-indigo-500/35 hover:bg-indigo-600/35 text-white/60",
|
|
95
106
|
outline: "border border-indigo-500 hover:border-indigo-600 text-indigo-500 hover:text-indigo-600 hover:bg-indigo-500/10",
|
|
96
|
-
ghost: "hover:bg-indigo-500"
|
|
107
|
+
ghost: "hover:bg-indigo-500",
|
|
108
|
+
loader: "border-t-indigo-500"
|
|
97
109
|
},
|
|
98
110
|
violet: {
|
|
99
111
|
base: "bg-violet-500",
|
|
@@ -101,7 +113,8 @@ export const colorStyleParts = {
|
|
|
101
113
|
full: "bg-violet-500 hover:bg-violet-600",
|
|
102
114
|
light: "bg-violet-500/35 hover:bg-violet-600/35 text-white/60",
|
|
103
115
|
outline: "border border-violet-500 hover:border-violet-600 text-violet-500 hover:text-violet-600 hover:bg-violet-500/10",
|
|
104
|
-
ghost: "hover:bg-violet-500"
|
|
116
|
+
ghost: "hover:bg-violet-500",
|
|
117
|
+
loader: "border-t-violet-500"
|
|
105
118
|
},
|
|
106
119
|
purple: {
|
|
107
120
|
base: "bg-purple-500",
|
|
@@ -109,7 +122,8 @@ export const colorStyleParts = {
|
|
|
109
122
|
full: "bg-purple-500 hover:bg-purple-600",
|
|
110
123
|
light: "bg-purple-500/35 hover:bg-purple-600/35 text-white/60",
|
|
111
124
|
outline: "border border-purple-500 hover:border-purple-600 text-purple-500 hover:text-purple-600 hover:bg-purple-500/10",
|
|
112
|
-
ghost: "hover:bg-purple-500"
|
|
125
|
+
ghost: "hover:bg-purple-500",
|
|
126
|
+
loader: "border-t-purple-500"
|
|
113
127
|
},
|
|
114
128
|
pink: {
|
|
115
129
|
base: "bg-pink-500",
|
|
@@ -117,7 +131,8 @@ export const colorStyleParts = {
|
|
|
117
131
|
full: "bg-pink-500 hover:bg-pink-600",
|
|
118
132
|
light: "bg-pink-500/35 hover:bg-pink-600/35 text-white/60",
|
|
119
133
|
outline: "border border-pink-500 hover:border-pink-600 text-pink-500 hover:text-pink-600 hover:bg-pink-500/10",
|
|
120
|
-
ghost: "hover:bg-pink-500"
|
|
134
|
+
ghost: "hover:bg-pink-500",
|
|
135
|
+
loader: "border-t-pink-500"
|
|
121
136
|
},
|
|
122
137
|
fuchsia: {
|
|
123
138
|
base: "bg-fuchsia-500",
|
|
@@ -125,7 +140,8 @@ export const colorStyleParts = {
|
|
|
125
140
|
full: "bg-fuchsia-500 hover:bg-fuchsia-600",
|
|
126
141
|
light: "bg-fuchsia-500/35 hover:bg-fuchsia-600/35 text-white/60",
|
|
127
142
|
outline: "border border-fuchsia-500 hover:border-fuchsia-600 text-fuchsia-500 hover:text-fuchsia-600 hover:bg-fuchsia-500/10",
|
|
128
|
-
ghost: "hover:bg-fuchsia-500"
|
|
143
|
+
ghost: "hover:bg-fuchsia-500",
|
|
144
|
+
loader: "border-t-fuchsia-500"
|
|
129
145
|
},
|
|
130
146
|
gray: {
|
|
131
147
|
base: "bg-gray-500",
|
|
@@ -133,7 +149,8 @@ export const colorStyleParts = {
|
|
|
133
149
|
full: "bg-gray-500 hover:bg-gray-600",
|
|
134
150
|
light: "bg-gray-500/35 hover:bg-gray-600/35 text-white/60",
|
|
135
151
|
outline: "border border-gray-500 hover:border-gray-600 text-gray-500 hover:text-gray-600 hover:bg-gray-500/10",
|
|
136
|
-
ghost: "hover:bg-gray-500"
|
|
152
|
+
ghost: "hover:bg-gray-500",
|
|
153
|
+
loader: "border-t-gray-500"
|
|
137
154
|
},
|
|
138
155
|
sub: {
|
|
139
156
|
base: "bg-sub-background",
|
|
@@ -141,7 +158,8 @@ export const colorStyleParts = {
|
|
|
141
158
|
full: "bg-sub-background hover:bg-sub-background-hover",
|
|
142
159
|
light: "bg-sub-background hover:bg-sub-background-hover text-white/60",
|
|
143
160
|
outline: "border border-sub-background hover:border-sub-background-hover text-sub-background hover:text-sub-background-hover hover:bg-sub-background/10",
|
|
144
|
-
ghost: "hover:bg-sub-background"
|
|
161
|
+
ghost: "hover:bg-sub-background",
|
|
162
|
+
loader: "border-t-sub-background"
|
|
145
163
|
},
|
|
146
164
|
none: {
|
|
147
165
|
base: "",
|
|
@@ -149,7 +167,8 @@ export const colorStyleParts = {
|
|
|
149
167
|
full: "",
|
|
150
168
|
light: "",
|
|
151
169
|
outline: "",
|
|
152
|
-
ghost: ""
|
|
170
|
+
ghost: "",
|
|
171
|
+
loader: ""
|
|
153
172
|
},
|
|
154
173
|
white: {
|
|
155
174
|
base: "bg-white text-contrast-text",
|
|
@@ -157,7 +176,8 @@ export const colorStyleParts = {
|
|
|
157
176
|
full: "bg-white hover:bg-gray-100 text-contrast-text hover:text-contrast-text",
|
|
158
177
|
light: "bg-white/35 hover:bg-white/35 text-gray-700",
|
|
159
178
|
outline: "border border-white hover:border-gray-300 text-white hover:text-gray-300 hover:bg-white/10",
|
|
160
|
-
ghost: "hover:bg-white hover:text-contrast-text"
|
|
179
|
+
ghost: "hover:bg-white hover:text-contrast-text",
|
|
180
|
+
loader: "border-t-white"
|
|
161
181
|
},
|
|
162
182
|
black: {
|
|
163
183
|
base: "bg-black",
|
|
@@ -165,7 +185,8 @@ export const colorStyleParts = {
|
|
|
165
185
|
full: "bg-black hover:bg-stone-950",
|
|
166
186
|
light: "bg-black/35 hover:bg-black/35 text-gray-500",
|
|
167
187
|
outline: "border border-black hover:border-gray-700 text-black hover:text-gray-700 hover:bg-black/10",
|
|
168
|
-
ghost: "hover:bg-black"
|
|
188
|
+
ghost: "hover:bg-black",
|
|
189
|
+
loader: "border-t-black"
|
|
169
190
|
},
|
|
170
191
|
primary: {
|
|
171
192
|
base: "bg-primary",
|
|
@@ -173,7 +194,8 @@ export const colorStyleParts = {
|
|
|
173
194
|
full: "bg-primary hover:bg-primary/90",
|
|
174
195
|
light: "bg-primary/35 hover:bg-primary/35 text-white/60",
|
|
175
196
|
outline: "border border-primary hover:border-primary/90 text-primary hover:text-primary/90 hover:bg-primary/10",
|
|
176
|
-
ghost: "hover:bg-primary"
|
|
197
|
+
ghost: "hover:bg-primary",
|
|
198
|
+
loader: "border-t-primary"
|
|
177
199
|
},
|
|
178
200
|
secondary: {
|
|
179
201
|
base: "bg-secondary",
|
|
@@ -181,7 +203,8 @@ export const colorStyleParts = {
|
|
|
181
203
|
full: "bg-secondary hover:bg-secondary/90",
|
|
182
204
|
light: "bg-secondary/35 hover:bg-secondary/35 text-white/60",
|
|
183
205
|
outline: "border border-secondary hover:border-secondary/90 text-secondary hover:text-secondary/90 hover:bg-secondary/10",
|
|
184
|
-
ghost: "hover:bg-secondary"
|
|
206
|
+
ghost: "hover:bg-secondary",
|
|
207
|
+
loader: "border-t-secondary"
|
|
185
208
|
},
|
|
186
209
|
accent: {
|
|
187
210
|
base: "bg-accent",
|
|
@@ -189,7 +212,8 @@ export const colorStyleParts = {
|
|
|
189
212
|
full: "bg-accent hover:bg-accent/90",
|
|
190
213
|
light: "bg-accent/35 hover:bg-accent/35 text-white/60",
|
|
191
214
|
outline: "border border-accent hover:border-accent/90 text-accent hover:text-accent/90 hover:bg-accent/10",
|
|
192
|
-
ghost: "hover:bg-accent"
|
|
215
|
+
ghost: "hover:bg-accent",
|
|
216
|
+
loader: "border-t-accent"
|
|
193
217
|
},
|
|
194
218
|
error: {
|
|
195
219
|
base: "bg-red-500",
|
|
@@ -197,7 +221,8 @@ export const colorStyleParts = {
|
|
|
197
221
|
full: "bg-red-500 hover:bg-red-600",
|
|
198
222
|
light: "bg-red-500/35 hover:bg-red-600/35 text-white/60",
|
|
199
223
|
outline: "border border-red-500 hover:border-red-600 text-red-500 hover:text-red-600 hover:bg-red-500/10",
|
|
200
|
-
ghost: "hover:bg-red-500"
|
|
224
|
+
ghost: "hover:bg-red-500",
|
|
225
|
+
loader: "border-t-red-500"
|
|
201
226
|
},
|
|
202
227
|
warning: {
|
|
203
228
|
base: "bg-amber-500",
|
|
@@ -205,7 +230,8 @@ export const colorStyleParts = {
|
|
|
205
230
|
full: "bg-amber-500 hover:bg-amber-600",
|
|
206
231
|
light: "bg-amber-500/35 hover:bg-amber-600/35 text-white/60",
|
|
207
232
|
outline: "border border-amber-500 hover:border-amber-600 text-amber-500 hover:text-amber-600 hover:bg-amber-500/10",
|
|
208
|
-
ghost: "hover:bg-amber-500"
|
|
233
|
+
ghost: "hover:bg-amber-500",
|
|
234
|
+
loader: "border-t-amber-500"
|
|
209
235
|
},
|
|
210
236
|
success: {
|
|
211
237
|
base: "bg-emerald-500",
|
|
@@ -213,7 +239,8 @@ export const colorStyleParts = {
|
|
|
213
239
|
full: "bg-emerald-500 hover:bg-emerald-600",
|
|
214
240
|
light: "bg-emerald-500/35 hover:bg-emerald-600/35 text-white/60",
|
|
215
241
|
outline: "border border-emerald-500 hover:border-emerald-600 text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10",
|
|
216
|
-
ghost: "hover:bg-emerald-500"
|
|
242
|
+
ghost: "hover:bg-emerald-500",
|
|
243
|
+
loader: "border-t-emerald-500"
|
|
217
244
|
},
|
|
218
245
|
info: {
|
|
219
246
|
base: "bg-sky-500",
|
|
@@ -221,7 +248,8 @@ export const colorStyleParts = {
|
|
|
221
248
|
full: "bg-sky-500 hover:bg-sky-600",
|
|
222
249
|
light: "bg-sky-500/35 hover:bg-sky-600/35 text-white/60",
|
|
223
250
|
outline: "border border-sky-500 hover:border-sky-600 text-sky-500 hover:text-sky-600 hover:bg-sky-500/10",
|
|
224
|
-
ghost: "hover:bg-sky-500"
|
|
251
|
+
ghost: "hover:bg-sky-500",
|
|
252
|
+
loader: "border-t-sky-500"
|
|
225
253
|
}
|
|
226
254
|
};
|
|
227
255
|
export function generateColorStyle(color, variant) {
|
package/dist/styles/layout.css
CHANGED
|
@@ -20,6 +20,8 @@
|
|
|
20
20
|
--color-primary: var(--vpcui-primary);
|
|
21
21
|
--color-secondary: var(--vpcui-secondary);
|
|
22
22
|
--color-accent: var(--vpcui-accent);
|
|
23
|
+
|
|
24
|
+
--color-loader-btn-color: var(--vpcui-loader-btn-color);
|
|
23
25
|
}
|
|
24
26
|
|
|
25
27
|
:root {
|
|
@@ -41,6 +43,8 @@
|
|
|
41
43
|
--vpcui-form-background: var(--vpcui-light-50);
|
|
42
44
|
--vpcui-form-hover: var(--vpcui-light-200);
|
|
43
45
|
--vpcui-form-border: var(--vpcui-light-250);
|
|
46
|
+
|
|
47
|
+
--vpcui-loader-btn-color: rgba(255, 255, 255, 0.25);
|
|
44
48
|
}
|
|
45
49
|
|
|
46
50
|
html.dark {
|
|
@@ -62,6 +66,8 @@ html.dark {
|
|
|
62
66
|
--vpcui-form-background: var(--vpcui-dark-150);
|
|
63
67
|
--vpcui-form-border: var(--vpcui-dark-250);
|
|
64
68
|
--vpcui-form-hover: var(--vpcui-dark-200);
|
|
69
|
+
|
|
70
|
+
--vpcui-loader-btn-color: rgba(0, 0, 0, 0.25);
|
|
65
71
|
}
|
|
66
72
|
|
|
67
73
|
html {
|
package/dist/styles/size.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export type SizeStyleTheme = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full" | "none";
|
|
2
|
-
export type SizeStyleType = "button" | "buttonIcon" | "radius" | "text" | "card" | "form" | "formLabel" | "formLabelSelected" | "progress";
|
|
2
|
+
export type SizeStyleType = "button" | "buttonIcon" | "radius" | "text" | "card" | "form" | "formLabel" | "formLabelSelected" | "progress" | "loader" | "buttonLoader";
|
|
3
3
|
export type SizeStyle = SizeStyleTheme | number;
|
|
4
4
|
export declare const sizeStyleParts: Record<SizeStyleTheme, Record<SizeStyleType, string>>;
|
|
5
5
|
export declare function getSizeStyleClass(size: SizeStyle, type: SizeStyleType): string;
|
package/dist/styles/size.js
CHANGED
|
@@ -8,7 +8,9 @@ export const sizeStyleParts = {
|
|
|
8
8
|
form: "h-5 pt-1 pb-0.25",
|
|
9
9
|
formLabel: "text-[8px]",
|
|
10
10
|
formLabelSelected: "text-[6px] top-1",
|
|
11
|
-
progress: "h-0.5"
|
|
11
|
+
progress: "h-0.5",
|
|
12
|
+
loader: "h-4 w-4",
|
|
13
|
+
buttonLoader: "h-2 w-2"
|
|
12
14
|
},
|
|
13
15
|
sm: {
|
|
14
16
|
button: "text-sm h-6 px-2 py-1",
|
|
@@ -19,7 +21,9 @@ export const sizeStyleParts = {
|
|
|
19
21
|
form: "h-7 pt-3 pb-0.5",
|
|
20
22
|
formLabel: "text-[10px]",
|
|
21
23
|
formLabelSelected: "text-[8px] top-1.5",
|
|
22
|
-
progress: "h-1"
|
|
24
|
+
progress: "h-1",
|
|
25
|
+
loader: "h-6 w-6",
|
|
26
|
+
buttonLoader: "h-3 w-3"
|
|
23
27
|
},
|
|
24
28
|
md: {
|
|
25
29
|
button: "text-base h-8 px-3 py-1.5",
|
|
@@ -30,7 +34,9 @@ export const sizeStyleParts = {
|
|
|
30
34
|
form: "h-9 pt-4 pb-1",
|
|
31
35
|
formLabel: "text-xs",
|
|
32
36
|
formLabelSelected: "text-[10px] top-2",
|
|
33
|
-
progress: "h-2"
|
|
37
|
+
progress: "h-2",
|
|
38
|
+
loader: "h-8 w-8",
|
|
39
|
+
buttonLoader: "h-4 w-4"
|
|
34
40
|
},
|
|
35
41
|
lg: {
|
|
36
42
|
button: "text-lg h-10 px-4 py-2",
|
|
@@ -41,7 +47,9 @@ export const sizeStyleParts = {
|
|
|
41
47
|
form: "h-[44px] pt-5 pb-2",
|
|
42
48
|
formLabel: "text-sm",
|
|
43
49
|
formLabelSelected: "text-xs top-2.5",
|
|
44
|
-
progress: "h-3"
|
|
50
|
+
progress: "h-3",
|
|
51
|
+
loader: "h-10 w-10",
|
|
52
|
+
buttonLoader: "h-5 w-5"
|
|
45
53
|
},
|
|
46
54
|
xl: {
|
|
47
55
|
button: "text-xl h-12 px-5 py-2.5",
|
|
@@ -52,7 +60,9 @@ export const sizeStyleParts = {
|
|
|
52
60
|
form: "h-[52px] pt-6 pb-3",
|
|
53
61
|
formLabel: "text-base",
|
|
54
62
|
formLabelSelected: "text-sm top-3",
|
|
55
|
-
progress: "h-4"
|
|
63
|
+
progress: "h-4",
|
|
64
|
+
loader: "h-12 w-12",
|
|
65
|
+
buttonLoader: "h-6 w-6"
|
|
56
66
|
},
|
|
57
67
|
"2xl": {
|
|
58
68
|
button: "text-2xl h-14 px-6 py-3",
|
|
@@ -63,7 +73,9 @@ export const sizeStyleParts = {
|
|
|
63
73
|
form: "h-[60px] pt-7 pb-4",
|
|
64
74
|
formLabel: "text-lg",
|
|
65
75
|
formLabelSelected: "text-base top-3.5",
|
|
66
|
-
progress: "h-5"
|
|
76
|
+
progress: "h-5",
|
|
77
|
+
loader: "h-14 w-14",
|
|
78
|
+
buttonLoader: "h-7 w-7"
|
|
67
79
|
},
|
|
68
80
|
"3xl": {
|
|
69
81
|
button: "text-3xl h-16 px-7 py-3.5",
|
|
@@ -74,7 +86,9 @@ export const sizeStyleParts = {
|
|
|
74
86
|
form: "h-[68px] pt-8 pb-5",
|
|
75
87
|
formLabel: "text-xl",
|
|
76
88
|
formLabelSelected: "text-lg top-4",
|
|
77
|
-
progress: "h-6"
|
|
89
|
+
progress: "h-6",
|
|
90
|
+
loader: "h-16 w-16",
|
|
91
|
+
buttonLoader: "h-8 w-8"
|
|
78
92
|
},
|
|
79
93
|
"4xl": {
|
|
80
94
|
button: "text-4xl h-18 px-8 py-4",
|
|
@@ -85,7 +99,9 @@ export const sizeStyleParts = {
|
|
|
85
99
|
form: "h-[76px] pt-9 pb-6",
|
|
86
100
|
formLabel: "text-2xl",
|
|
87
101
|
formLabelSelected: "text-xl top-4.5",
|
|
88
|
-
progress: "h-7"
|
|
102
|
+
progress: "h-7",
|
|
103
|
+
loader: "h-18 w-18",
|
|
104
|
+
buttonLoader: "h-9 w-9"
|
|
89
105
|
},
|
|
90
106
|
"5xl": {
|
|
91
107
|
button: "text-5xl h-20 px-9 py-4.5",
|
|
@@ -96,7 +112,9 @@ export const sizeStyleParts = {
|
|
|
96
112
|
form: "h-[84px] pt-10 pb-5",
|
|
97
113
|
formLabel: "text-3xl",
|
|
98
114
|
formLabelSelected: "text-2xl top-5",
|
|
99
|
-
progress: "h-8"
|
|
115
|
+
progress: "h-8",
|
|
116
|
+
loader: "h-20 w-20",
|
|
117
|
+
buttonLoader: "h-10 w-10"
|
|
100
118
|
},
|
|
101
119
|
"6xl": {
|
|
102
120
|
button: "text-6xl h-24 px-10 py-5",
|
|
@@ -107,7 +125,9 @@ export const sizeStyleParts = {
|
|
|
107
125
|
form: "h-[92px] pt-12 pb-6",
|
|
108
126
|
formLabel: "text-4xl",
|
|
109
127
|
formLabelSelected: "text-3xl top-[22px]",
|
|
110
|
-
progress: "h-9"
|
|
128
|
+
progress: "h-9",
|
|
129
|
+
loader: "h-24 w-24",
|
|
130
|
+
buttonLoader: "h-11 w-11"
|
|
111
131
|
},
|
|
112
132
|
full: {
|
|
113
133
|
button: "w-full text-base h-8 px-3 py-1",
|
|
@@ -118,7 +138,9 @@ export const sizeStyleParts = {
|
|
|
118
138
|
form: "h-9 pt-4 pb-1",
|
|
119
139
|
formLabel: "text-xs",
|
|
120
140
|
formLabelSelected: "text-[10px] top-2",
|
|
121
|
-
progress: "h-2"
|
|
141
|
+
progress: "h-2",
|
|
142
|
+
loader: "h-8 w-8",
|
|
143
|
+
buttonLoader: "h-4 w-4"
|
|
122
144
|
},
|
|
123
145
|
none: {
|
|
124
146
|
button: "p-0 h-auto text-base",
|
|
@@ -129,7 +151,9 @@ export const sizeStyleParts = {
|
|
|
129
151
|
form: "h-auto px-0 py-0",
|
|
130
152
|
formLabel: "",
|
|
131
153
|
formLabelSelected: "",
|
|
132
|
-
progress: ""
|
|
154
|
+
progress: "",
|
|
155
|
+
loader: "",
|
|
156
|
+
buttonLoader: ""
|
|
133
157
|
}
|
|
134
158
|
};
|
|
135
159
|
export function getSizeStyleClass(size, type) {
|
package/dist/types/Button.d.ts
CHANGED
package/dist/types/Input.d.ts
CHANGED
|
@@ -6,16 +6,21 @@ export interface InputRequirements {
|
|
|
6
6
|
label: string;
|
|
7
7
|
requirements: RegExp | ((value: any) => boolean);
|
|
8
8
|
}
|
|
9
|
-
export interface
|
|
9
|
+
export interface BaseInputProps extends BaseComponentProps {
|
|
10
10
|
label?: string;
|
|
11
11
|
labelClass?: string;
|
|
12
12
|
divClass?: string;
|
|
13
13
|
outerDivClass?: string;
|
|
14
|
-
icon?: Component;
|
|
15
14
|
value?: any;
|
|
16
15
|
required?: boolean;
|
|
17
16
|
disabled?: boolean;
|
|
18
17
|
variant?: InputVariant;
|
|
18
|
+
size?: SizeStyle;
|
|
19
|
+
radius?: SizeStyle;
|
|
20
|
+
icon?: Component;
|
|
21
|
+
id?: `${string}-${string}-${string}-${string}-${string}`;
|
|
22
|
+
}
|
|
23
|
+
export interface InputProps extends BaseInputProps {
|
|
19
24
|
placeholder?: string;
|
|
20
25
|
min?: number;
|
|
21
26
|
max?: number;
|
|
@@ -24,9 +29,19 @@ export interface InputProps extends BaseComponentProps {
|
|
|
24
29
|
onblur?: (e?: FocusEvent) => void;
|
|
25
30
|
requirements?: InputRequirements[];
|
|
26
31
|
valid?: boolean;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
32
|
+
}
|
|
33
|
+
export interface SelectProps extends BaseInputProps {
|
|
34
|
+
options: {
|
|
35
|
+
value: any;
|
|
36
|
+
label: string;
|
|
37
|
+
}[];
|
|
38
|
+
}
|
|
39
|
+
export interface ComboboxProps extends BaseInputProps {
|
|
40
|
+
options?: string[];
|
|
41
|
+
placeholder?: string;
|
|
42
|
+
onfocus?: (e?: FocusEvent) => void;
|
|
43
|
+
onblur?: (e?: FocusEvent) => void;
|
|
44
|
+
limit?: number;
|
|
30
45
|
}
|
|
31
46
|
export interface FileInputProps extends BaseComponentProps {
|
|
32
47
|
label?: string;
|
package/dist/types/SEO.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): T;
|
package/dist/utils/link.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export declare function getLinkProps(href?: string, external?: boolean): {
|
|
1
|
+
export declare function getLinkProps(href?: string, external?: boolean, disabled?: boolean): {
|
|
2
2
|
href?: undefined;
|
|
3
3
|
target?: undefined;
|
|
4
4
|
rel?: undefined;
|
|
5
5
|
} | {
|
|
6
|
-
href: string;
|
|
6
|
+
href: string | undefined;
|
|
7
7
|
target: string | undefined;
|
|
8
8
|
rel: string | undefined;
|
|
9
9
|
};
|
package/dist/utils/link.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export function getLinkProps(href, external) {
|
|
1
|
+
export function getLinkProps(href, external, disabled) {
|
|
2
2
|
if (!href)
|
|
3
3
|
return {};
|
|
4
4
|
return {
|
|
5
|
-
href,
|
|
5
|
+
href: disabled ? undefined : href,
|
|
6
6
|
target: external ? "_blank" : undefined,
|
|
7
7
|
rel: external ? "noopener noreferrer" : undefined,
|
|
8
8
|
};
|
package/package.json
CHANGED
package/dist/types/Select.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { BaseComponentProps } from "./BaseComponent.ts";
|
|
2
|
-
export interface SelectProps extends BaseComponentProps {
|
|
3
|
-
label?: string;
|
|
4
|
-
divClass?: string;
|
|
5
|
-
optionClass?: string;
|
|
6
|
-
value?: any;
|
|
7
|
-
options: {
|
|
8
|
-
value: any;
|
|
9
|
-
label: string;
|
|
10
|
-
}[];
|
|
11
|
-
id?: `${string}-${string}-${string}-${string}-${string}`;
|
|
12
|
-
}
|