@kopexa/theme 1.4.3 → 1.4.4
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/chunk-32L6KXLV.mjs +324 -0
- package/dist/chunk-67PPUTSS.mjs +53 -0
- package/dist/{chunk-25CHZW25.mjs → chunk-KE2E5LGH.mjs} +3 -3
- package/dist/components/button.js +24 -2
- package/dist/components/button.mjs +2 -2
- package/dist/components/chip.d.mts +356 -0
- package/dist/components/chip.d.ts +356 -0
- package/dist/components/chip.js +396 -0
- package/dist/components/chip.mjs +7 -0
- package/dist/components/dropdown-menu.d.mts +3 -3
- package/dist/components/dropdown-menu.d.ts +3 -3
- package/dist/components/index.d.mts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +362 -21
- package/dist/components/index.mjs +7 -3
- package/dist/index.css +98 -19
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +362 -21
- package/dist/index.mjs +8 -4
- package/dist/utils/variants.d.mts +20 -0
- package/dist/utils/variants.d.ts +20 -0
- package/dist/utils/variants.js +24 -2
- package/dist/utils/variants.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-U6ONJKJY.mjs +0 -31
- /package/dist/{chunk-HNTFXPSN.mjs → chunk-N2UQGV46.mjs} +0 -0
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
import {
|
|
2
|
+
colorVariants
|
|
3
|
+
} from "./chunk-67PPUTSS.mjs";
|
|
4
|
+
|
|
5
|
+
// src/components/chip.ts
|
|
6
|
+
import { tv } from "tailwind-variants";
|
|
7
|
+
var chip = tv({
|
|
8
|
+
slots: {
|
|
9
|
+
root: [
|
|
10
|
+
"relative",
|
|
11
|
+
"max-w-fit",
|
|
12
|
+
"min-w-min",
|
|
13
|
+
"inline-flex",
|
|
14
|
+
"items-center",
|
|
15
|
+
"justify-between",
|
|
16
|
+
"box-border",
|
|
17
|
+
"whitespace-nowrap",
|
|
18
|
+
"isolate"
|
|
19
|
+
],
|
|
20
|
+
content: "flex-1 text-inherit font-normal",
|
|
21
|
+
indicator: "relative flex size-2 ml-1",
|
|
22
|
+
indicatorPulse: "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
|
|
23
|
+
indicatorDot: "relative inline-flex size-2 rounded-full",
|
|
24
|
+
status: "flex items-center gap-2 border-r pr-1 font-medium ml-1",
|
|
25
|
+
closeButton: [
|
|
26
|
+
"z-10 appearance-none outline-none select-none transition-opacity",
|
|
27
|
+
"opacity-70 hover:opacity-100 cursor-pointer active:opacity-50"
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
variants: {
|
|
31
|
+
variant: {
|
|
32
|
+
solid: {},
|
|
33
|
+
bordered: {
|
|
34
|
+
root: "border-2 bg-transparent"
|
|
35
|
+
},
|
|
36
|
+
faded: {
|
|
37
|
+
root: "border-2"
|
|
38
|
+
},
|
|
39
|
+
flat: {}
|
|
40
|
+
},
|
|
41
|
+
color: {
|
|
42
|
+
default: {
|
|
43
|
+
status: "border-default-200 dark:border-default-700"
|
|
44
|
+
},
|
|
45
|
+
primary: {
|
|
46
|
+
status: "border-primary-200 dark:border-primary-700"
|
|
47
|
+
},
|
|
48
|
+
secondary: {
|
|
49
|
+
status: "border-secondary-200 dark:border-secondary-700"
|
|
50
|
+
},
|
|
51
|
+
success: {
|
|
52
|
+
status: "border-success-200 dark:border-success-700"
|
|
53
|
+
},
|
|
54
|
+
destructive: {
|
|
55
|
+
status: "border-destructive-200 dark:border-destructive-700"
|
|
56
|
+
},
|
|
57
|
+
warning: {
|
|
58
|
+
status: "border-warning-200 dark:border-warning-700"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
indicatorColor: {
|
|
62
|
+
default: {
|
|
63
|
+
indicatorDot: "bg-accent"
|
|
64
|
+
},
|
|
65
|
+
primary: {
|
|
66
|
+
indicatorDot: "bg-primary"
|
|
67
|
+
},
|
|
68
|
+
secondary: {
|
|
69
|
+
indicatorDot: "bg-secondary"
|
|
70
|
+
},
|
|
71
|
+
success: {
|
|
72
|
+
indicatorDot: "bg-success"
|
|
73
|
+
},
|
|
74
|
+
warning: {
|
|
75
|
+
indicatorDot: "bg-warning"
|
|
76
|
+
},
|
|
77
|
+
destructive: {
|
|
78
|
+
indicatorDot: "bg-destructive"
|
|
79
|
+
},
|
|
80
|
+
info: {
|
|
81
|
+
indicatorDot: "bg-info"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
indicator: {
|
|
85
|
+
true: {},
|
|
86
|
+
false: {}
|
|
87
|
+
},
|
|
88
|
+
indicatorVariant: {
|
|
89
|
+
pulse: {}
|
|
90
|
+
},
|
|
91
|
+
size: {
|
|
92
|
+
sm: {
|
|
93
|
+
root: "px-1 h-6 text-[11px] [&_svg]:size-3",
|
|
94
|
+
status: "text-[11px]",
|
|
95
|
+
content: "px-1",
|
|
96
|
+
closeButton: ["[&_svg]:size-3", "px-1"]
|
|
97
|
+
},
|
|
98
|
+
md: {
|
|
99
|
+
root: "px-1 h-7 text-sm [&_svg]:size-4",
|
|
100
|
+
status: "text-sm",
|
|
101
|
+
content: "px-2",
|
|
102
|
+
closeButton: ["[&_svg]:size-4", "px-2"]
|
|
103
|
+
},
|
|
104
|
+
lg: {
|
|
105
|
+
root: "px-2 h-8 text-md [&_svg]:size-5",
|
|
106
|
+
status: "text-md",
|
|
107
|
+
content: "px-2",
|
|
108
|
+
closeButton: ["[&_svg]:size-5", "px-2"]
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
isCloseable: {
|
|
112
|
+
true: {},
|
|
113
|
+
false: {}
|
|
114
|
+
},
|
|
115
|
+
radius: {
|
|
116
|
+
none: {
|
|
117
|
+
root: "rounded-none"
|
|
118
|
+
},
|
|
119
|
+
sm: {
|
|
120
|
+
root: "rounded-sm"
|
|
121
|
+
},
|
|
122
|
+
md: {
|
|
123
|
+
root: "rounded-md"
|
|
124
|
+
},
|
|
125
|
+
lg: {
|
|
126
|
+
root: "rounded-lg"
|
|
127
|
+
},
|
|
128
|
+
full: {
|
|
129
|
+
root: "rounded-full"
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
disabled: {
|
|
133
|
+
true: {
|
|
134
|
+
root: "opacity-50 pointer-events-none"
|
|
135
|
+
},
|
|
136
|
+
false: {}
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
defaultVariants: {
|
|
140
|
+
color: "default",
|
|
141
|
+
variant: "solid",
|
|
142
|
+
size: "sm",
|
|
143
|
+
radius: "full",
|
|
144
|
+
indicatorVariant: "pulse",
|
|
145
|
+
indicatorColor: "success"
|
|
146
|
+
},
|
|
147
|
+
compoundVariants: [
|
|
148
|
+
// solid / color
|
|
149
|
+
{
|
|
150
|
+
variant: "solid",
|
|
151
|
+
color: "default",
|
|
152
|
+
class: {
|
|
153
|
+
root: colorVariants.solid.default
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
variant: "solid",
|
|
158
|
+
color: "primary",
|
|
159
|
+
class: {
|
|
160
|
+
root: colorVariants.solid.primary
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
variant: "solid",
|
|
165
|
+
color: "secondary",
|
|
166
|
+
class: {
|
|
167
|
+
root: colorVariants.solid.secondary
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
variant: "solid",
|
|
172
|
+
color: "success",
|
|
173
|
+
class: {
|
|
174
|
+
root: colorVariants.solid.success
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
variant: "solid",
|
|
179
|
+
color: "warning",
|
|
180
|
+
class: {
|
|
181
|
+
root: colorVariants.solid.warning
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
variant: "solid",
|
|
186
|
+
color: "destructive",
|
|
187
|
+
class: {
|
|
188
|
+
root: colorVariants.solid.destructive
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
// bordered / color
|
|
192
|
+
{
|
|
193
|
+
variant: "bordered",
|
|
194
|
+
color: "default",
|
|
195
|
+
class: {
|
|
196
|
+
root: colorVariants.outline.default
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
variant: "bordered",
|
|
201
|
+
color: "primary",
|
|
202
|
+
class: {
|
|
203
|
+
root: colorVariants.outline.primary
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
variant: "bordered",
|
|
208
|
+
color: "secondary",
|
|
209
|
+
class: {
|
|
210
|
+
root: colorVariants.outline.secondary
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
variant: "bordered",
|
|
215
|
+
color: "success",
|
|
216
|
+
class: {
|
|
217
|
+
root: colorVariants.outline.success
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
variant: "bordered",
|
|
222
|
+
color: "warning",
|
|
223
|
+
class: {
|
|
224
|
+
root: colorVariants.outline.warning
|
|
225
|
+
}
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
variant: "bordered",
|
|
229
|
+
color: "destructive",
|
|
230
|
+
class: {
|
|
231
|
+
root: colorVariants.outline.destructive
|
|
232
|
+
}
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
variant: "flat",
|
|
236
|
+
color: "default",
|
|
237
|
+
class: {
|
|
238
|
+
root: colorVariants.flat.default
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
variant: "flat",
|
|
243
|
+
color: "primary",
|
|
244
|
+
class: {
|
|
245
|
+
root: colorVariants.flat.primary
|
|
246
|
+
}
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
variant: "flat",
|
|
250
|
+
color: "secondary",
|
|
251
|
+
class: {
|
|
252
|
+
root: colorVariants.flat.secondary
|
|
253
|
+
}
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
variant: "flat",
|
|
257
|
+
color: "success",
|
|
258
|
+
class: {
|
|
259
|
+
root: colorVariants.flat.success
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
variant: "flat",
|
|
264
|
+
color: "warning",
|
|
265
|
+
class: {
|
|
266
|
+
root: colorVariants.flat.warning
|
|
267
|
+
}
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
variant: "flat",
|
|
271
|
+
color: "destructive",
|
|
272
|
+
class: {
|
|
273
|
+
root: colorVariants.flat.destructive
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
// faded / color
|
|
277
|
+
{
|
|
278
|
+
variant: "faded",
|
|
279
|
+
color: "default",
|
|
280
|
+
class: {
|
|
281
|
+
root: colorVariants.faded.default
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
variant: "faded",
|
|
286
|
+
color: "primary",
|
|
287
|
+
class: {
|
|
288
|
+
root: colorVariants.faded.primary
|
|
289
|
+
}
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
variant: "faded",
|
|
293
|
+
color: "secondary",
|
|
294
|
+
class: {
|
|
295
|
+
root: colorVariants.faded.secondary
|
|
296
|
+
}
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
variant: "faded",
|
|
300
|
+
color: "success",
|
|
301
|
+
class: {
|
|
302
|
+
root: colorVariants.faded.success
|
|
303
|
+
}
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
variant: "faded",
|
|
307
|
+
color: "warning",
|
|
308
|
+
class: {
|
|
309
|
+
root: colorVariants.faded.warning
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
variant: "faded",
|
|
314
|
+
color: "destructive",
|
|
315
|
+
class: {
|
|
316
|
+
root: colorVariants.faded.destructive
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
]
|
|
320
|
+
});
|
|
321
|
+
|
|
322
|
+
export {
|
|
323
|
+
chip
|
|
324
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
// src/utils/variants.ts
|
|
2
|
+
var solid = {
|
|
3
|
+
default: "bg-accent text-accent-foreground",
|
|
4
|
+
primary: "bg-primary text-primary-foreground",
|
|
5
|
+
secondary: "bg-secondary text-secondary-foreground",
|
|
6
|
+
destructive: "bg-destructive text-destructive-foreground",
|
|
7
|
+
warning: "bg-warning text-warning-foreground",
|
|
8
|
+
success: "bg-success text-success-foreground"
|
|
9
|
+
};
|
|
10
|
+
var outline = {
|
|
11
|
+
default: "bg-transparent border border-accent text-accent-foreground",
|
|
12
|
+
primary: "bg-transparent border-primary text-primary",
|
|
13
|
+
secondary: "bg-transparent border-secondary text-secondary-foreground",
|
|
14
|
+
destructive: "bg-transparent border-destructive text-destructive",
|
|
15
|
+
warning: "bg-transparent border-warning text-warning",
|
|
16
|
+
success: "bg-transparent border-success text-success"
|
|
17
|
+
};
|
|
18
|
+
var flat = {
|
|
19
|
+
default: "bg-accent/40 text-accent-700",
|
|
20
|
+
primary: "bg-primary/20 text-primary-600",
|
|
21
|
+
secondary: "bg-secondary/20 text-secondary-600",
|
|
22
|
+
success: "bg-success/20 text-success-700 dark:text-success",
|
|
23
|
+
warning: "bg-warning/20 text-warning-700 dark:text-warning",
|
|
24
|
+
destructive: "bg-danger/20 text-danger-600 dark:text-danger-500",
|
|
25
|
+
foreground: "bg-foreground/10 text-foreground"
|
|
26
|
+
};
|
|
27
|
+
var faded = {
|
|
28
|
+
default: "border-default bg-accent/30 text-default-foreground",
|
|
29
|
+
primary: "border-default bg-accent/30 text-primary",
|
|
30
|
+
secondary: "border-default bg-accent/30 text-secondary-foreground",
|
|
31
|
+
success: "border-default bg-accent/30 text-success",
|
|
32
|
+
warning: "border-default bg-accent/30 text-warning",
|
|
33
|
+
destructive: "border-default bg-accent/30 text-danger",
|
|
34
|
+
foreground: "border-default bg-accent/30 text-foreground"
|
|
35
|
+
};
|
|
36
|
+
var ghost = {
|
|
37
|
+
primary: "bg-transparent text-primary",
|
|
38
|
+
secondary: "bg-transparent text-secondary",
|
|
39
|
+
destructive: "bg-transparent text-destructive",
|
|
40
|
+
warning: "bg-transparent text-warning",
|
|
41
|
+
success: "bg-transparent text-success"
|
|
42
|
+
};
|
|
43
|
+
var colorVariants = {
|
|
44
|
+
solid,
|
|
45
|
+
ghost,
|
|
46
|
+
outline,
|
|
47
|
+
flat,
|
|
48
|
+
faded
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export {
|
|
52
|
+
colorVariants
|
|
53
|
+
};
|
|
@@ -33,6 +33,7 @@ var focusVisibleClasses = [
|
|
|
33
33
|
|
|
34
34
|
// src/utils/variants.ts
|
|
35
35
|
var solid = {
|
|
36
|
+
default: "bg-accent text-accent-foreground",
|
|
36
37
|
primary: "bg-primary text-primary-foreground",
|
|
37
38
|
secondary: "bg-secondary text-secondary-foreground",
|
|
38
39
|
destructive: "bg-destructive text-destructive-foreground",
|
|
@@ -40,12 +41,31 @@ var solid = {
|
|
|
40
41
|
success: "bg-success text-success-foreground"
|
|
41
42
|
};
|
|
42
43
|
var outline = {
|
|
44
|
+
default: "bg-transparent border border-accent text-accent-foreground",
|
|
43
45
|
primary: "bg-transparent border-primary text-primary",
|
|
44
|
-
secondary: "bg-transparent border-secondary text-secondary",
|
|
46
|
+
secondary: "bg-transparent border-secondary text-secondary-foreground",
|
|
45
47
|
destructive: "bg-transparent border-destructive text-destructive",
|
|
46
48
|
warning: "bg-transparent border-warning text-warning",
|
|
47
49
|
success: "bg-transparent border-success text-success"
|
|
48
50
|
};
|
|
51
|
+
var flat = {
|
|
52
|
+
default: "bg-accent/40 text-accent-700",
|
|
53
|
+
primary: "bg-primary/20 text-primary-600",
|
|
54
|
+
secondary: "bg-secondary/20 text-secondary-600",
|
|
55
|
+
success: "bg-success/20 text-success-700 dark:text-success",
|
|
56
|
+
warning: "bg-warning/20 text-warning-700 dark:text-warning",
|
|
57
|
+
destructive: "bg-danger/20 text-danger-600 dark:text-danger-500",
|
|
58
|
+
foreground: "bg-foreground/10 text-foreground"
|
|
59
|
+
};
|
|
60
|
+
var faded = {
|
|
61
|
+
default: "border-default bg-accent/30 text-default-foreground",
|
|
62
|
+
primary: "border-default bg-accent/30 text-primary",
|
|
63
|
+
secondary: "border-default bg-accent/30 text-secondary-foreground",
|
|
64
|
+
success: "border-default bg-accent/30 text-success",
|
|
65
|
+
warning: "border-default bg-accent/30 text-warning",
|
|
66
|
+
destructive: "border-default bg-accent/30 text-danger",
|
|
67
|
+
foreground: "border-default bg-accent/30 text-foreground"
|
|
68
|
+
};
|
|
49
69
|
var ghost = {
|
|
50
70
|
primary: "bg-transparent text-primary",
|
|
51
71
|
secondary: "bg-transparent text-secondary",
|
|
@@ -56,7 +76,9 @@ var ghost = {
|
|
|
56
76
|
var colorVariants = {
|
|
57
77
|
solid,
|
|
58
78
|
ghost,
|
|
59
|
-
outline
|
|
79
|
+
outline,
|
|
80
|
+
flat,
|
|
81
|
+
faded
|
|
60
82
|
};
|
|
61
83
|
|
|
62
84
|
// src/components/button.ts
|