@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.
@@ -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
+ };
@@ -1,9 +1,9 @@
1
- import {
2
- colorVariants
3
- } from "./chunk-U6ONJKJY.mjs";
4
1
  import {
5
2
  focusVisibleClasses
6
3
  } from "./chunk-2C5EQ4P3.mjs";
4
+ import {
5
+ colorVariants
6
+ } from "./chunk-67PPUTSS.mjs";
7
7
 
8
8
  // src/components/button.ts
9
9
  import { tv } from "tailwind-variants";
@@ -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
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  button
3
- } from "../chunk-25CHZW25.mjs";
4
- import "../chunk-U6ONJKJY.mjs";
3
+ } from "../chunk-KE2E5LGH.mjs";
5
4
  import "../chunk-2C5EQ4P3.mjs";
5
+ import "../chunk-67PPUTSS.mjs";
6
6
  export {
7
7
  button
8
8
  };