@foxui/core 0.4.1 → 0.4.3
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/README.md +0 -2
- package/dist/components/alert/alert.svelte +20 -19
- package/dist/components/badge/Badge.svelte +24 -25
- package/dist/components/badge/Badge.svelte.d.ts +21 -21
- package/dist/components/button/Button.svelte +25 -25
- package/dist/components/button/Button.svelte.d.ts +23 -23
- package/dist/components/checkbox/checkbox.svelte +9 -8
- package/dist/components/checkbox/checkbox.svelte.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,35 +6,36 @@
|
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
default:
|
|
9
|
-
'bg-accent-500/
|
|
9
|
+
'backdrop-blur-lg bg-accent-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-accent-700/5 dark:inset-shadow-accent-500/2 shadow-accent-500/5 dark:shadow-accent-500/2 dark:bg-accent-950/20 [&>div:first-of-type]:text-accent-800 [&>svg]:text-accent-700 dark:[&>svg]:text-accent-400 dark:[&>div:first-of-type]:text-accent-300 text-accent-800 dark:text-accent-300 border-accent-500/20 dark:border-accent-500/10',
|
|
10
10
|
secondary:
|
|
11
|
-
'bg-base-500/10 [&>div:first-of-type]:text-base-
|
|
12
|
-
|
|
11
|
+
'backdrop-blur-lg bg-base-200/70 shadow-lg transform-all inset-shadow-sm inset-shadow-base-700/5 dark:inset-shadow-base-500/2 shadow-base-500/5 dark:shadow-base-950/10 dark:bg-base-900/40 [&>div:first-of-type]:text-base-800 [&>svg]:text-base-700 dark:[&>svg]:text-base-400 dark:[&>div:first-of-type]:text-base-200 text-base-800 dark:text-base-300 border-base-500/20 dark:border-base-500/10',
|
|
12
|
+
|
|
13
|
+
red: 'backdrop-blur-lg bg-red-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-red-700/5 dark:inset-shadow-red-500/2 shadow-red-500/5 dark:shadow-red-500/2 dark:bg-red-950/20 [&>div:first-of-type]:text-red-800 [&>svg]:text-red-700 dark:[&>svg]:text-red-400 dark:[&>div:first-of-type]:text-red-300 text-red-800 dark:text-red-300 border-red-500/20 dark:border-red-500/10',
|
|
13
14
|
orange:
|
|
14
|
-
'bg-orange-500/
|
|
15
|
+
'backdrop-blur-lg bg-orange-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-orange-700/5 dark:inset-shadow-orange-500/2 shadow-orange-500/5 dark:shadow-orange-500/2 dark:bg-orange-950/20 [&>div:first-of-type]:text-orange-800 [&>svg]:text-orange-700 dark:[&>svg]:text-orange-400 dark:[&>div:first-of-type]:text-orange-300 text-orange-800 dark:text-orange-300 border-orange-500/20 dark:border-orange-500/10',
|
|
15
16
|
amber:
|
|
16
|
-
'bg-amber-500/
|
|
17
|
+
'backdrop-blur-lg bg-amber-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-amber-700/5 dark:inset-shadow-amber-500/2 shadow-amber-500/5 dark:shadow-amber-500/2 dark:bg-amber-950/20 [&>div:first-of-type]:text-amber-800 [&>svg]:text-amber-700 dark:[&>svg]:text-amber-400 dark:[&>div:first-of-type]:text-amber-300 text-amber-800 dark:text-amber-300 border-amber-500/20 dark:border-amber-500/10',
|
|
17
18
|
yellow:
|
|
18
|
-
'bg-yellow-500/
|
|
19
|
-
lime: 'bg-lime-500/
|
|
19
|
+
'backdrop-blur-lg bg-yellow-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-yellow-700/5 dark:inset-shadow-yellow-500/2 shadow-yellow-500/5 dark:shadow-yellow-500/2 dark:bg-yellow-950/20 [&>div:first-of-type]:text-yellow-800 [&>svg]:text-yellow-700 dark:[&>svg]:text-yellow-400 dark:[&>div:first-of-type]:text-yellow-300 text-yellow-800 dark:text-yellow-300 border-yellow-500/20 dark:border-yellow-500/10',
|
|
20
|
+
lime: 'backdrop-blur-lg bg-lime-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-lime-700/5 dark:inset-shadow-lime-500/2 shadow-lime-500/5 dark:shadow-lime-500/2 dark:bg-lime-950/20 [&>div:first-of-type]:text-lime-800 [&>svg]:text-lime-700 dark:[&>svg]:text-lime-400 dark:[&>div:first-of-type]:text-lime-300 text-lime-800 dark:text-lime-300 border-lime-500/20 dark:border-lime-500/10',
|
|
20
21
|
green:
|
|
21
|
-
'bg-green-500/
|
|
22
|
+
'backdrop-blur-lg bg-green-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-green-700/5 dark:inset-shadow-green-500/2 shadow-green-500/5 dark:shadow-green-500/2 dark:bg-green-950/20 [&>div:first-of-type]:text-green-800 [&>svg]:text-green-700 dark:[&>svg]:text-green-400 dark:[&>div:first-of-type]:text-green-300 text-green-800 dark:text-green-300 border-green-500/20 dark:border-green-500/10',
|
|
22
23
|
emerald:
|
|
23
|
-
'bg-emerald-500/
|
|
24
|
-
teal: 'bg-teal-500/
|
|
25
|
-
cyan: 'bg-cyan-500/
|
|
26
|
-
sky: 'bg-sky-500/
|
|
27
|
-
blue: 'bg-blue-500/
|
|
24
|
+
'backdrop-blur-lg bg-emerald-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-emerald-700/5 dark:inset-shadow-emerald-500/2 shadow-emerald-500/5 dark:shadow-emerald-500/2 dark:bg-emerald-950/20 [&>div:first-of-type]:text-emerald-800 [&>svg]:text-emerald-700 dark:[&>svg]:text-emerald-400 dark:[&>div:first-of-type]:text-emerald-300 text-emerald-800 dark:text-emerald-300 border-emerald-500/20 dark:border-emerald-500/10',
|
|
25
|
+
teal: 'backdrop-blur-lg bg-teal-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-teal-700/5 dark:inset-shadow-teal-500/2 shadow-teal-500/5 dark:shadow-teal-500/2 dark:bg-teal-950/20 [&>div:first-of-type]:text-teal-800 [&>svg]:text-teal-700 dark:[&>svg]:text-teal-400 dark:[&>div:first-of-type]:text-teal-300 text-teal-800 dark:text-teal-300 border-teal-500/20 dark:border-teal-500/10',
|
|
26
|
+
cyan: 'backdrop-blur-lg bg-cyan-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-cyan-700/5 dark:inset-shadow-cyan-500/2 shadow-cyan-500/5 dark:shadow-cyan-500/2 dark:bg-cyan-950/20 [&>div:first-of-type]:text-cyan-800 [&>svg]:text-cyan-700 dark:[&>svg]:text-cyan-400 dark:[&>div:first-of-type]:text-cyan-300 text-cyan-800 dark:text-cyan-300 border-cyan-500/20 dark:border-cyan-500/10',
|
|
27
|
+
sky: 'backdrop-blur-lg bg-sky-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-sky-700/5 dark:inset-shadow-sky-500/2 shadow-sky-500/5 dark:shadow-sky-500/2 dark:bg-sky-950/20 [&>div:first-of-type]:text-sky-800 [&>svg]:text-sky-700 dark:[&>svg]:text-sky-400 dark:[&>div:first-of-type]:text-sky-300 text-sky-800 dark:text-sky-300 border-sky-500/20 dark:border-sky-500/10',
|
|
28
|
+
blue: 'backdrop-blur-lg bg-blue-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-blue-700/5 dark:inset-shadow-blue-500/2 shadow-blue-500/5 dark:shadow-blue-500/2 dark:bg-blue-950/20 [&>div:first-of-type]:text-blue-800 [&>svg]:text-blue-700 dark:[&>svg]:text-blue-400 dark:[&>div:first-of-type]:text-blue-300 text-blue-800 dark:text-blue-300 border-blue-500/20 dark:border-blue-500/10',
|
|
28
29
|
indigo:
|
|
29
|
-
'bg-indigo-500/
|
|
30
|
+
'backdrop-blur-lg bg-indigo-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-indigo-700/5 dark:inset-shadow-indigo-500/2 shadow-indigo-500/5 dark:shadow-indigo-500/2 dark:bg-indigo-950/20 [&>div:first-of-type]:text-indigo-800 [&>svg]:text-indigo-700 dark:[&>svg]:text-indigo-400 dark:[&>div:first-of-type]:text-indigo-300 text-indigo-800 dark:text-indigo-300 border-indigo-500/20 dark:border-indigo-500/10',
|
|
30
31
|
violet:
|
|
31
|
-
'bg-violet-500/
|
|
32
|
+
'backdrop-blur-lg bg-violet-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-violet-700/5 dark:inset-shadow-violet-500/2 shadow-violet-500/5 dark:shadow-violet-500/2 dark:bg-violet-950/20 [&>div:first-of-type]:text-violet-800 [&>svg]:text-violet-700 dark:[&>svg]:text-violet-400 dark:[&>div:first-of-type]:text-violet-300 text-violet-800 dark:text-violet-300 border-violet-500/20 dark:border-violet-500/10',
|
|
32
33
|
purple:
|
|
33
|
-
'bg-purple-500/
|
|
34
|
+
'backdrop-blur-lg bg-purple-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-purple-700/5 dark:inset-shadow-purple-500/2 shadow-purple-500/5 dark:shadow-purple-500/2 dark:bg-purple-950/20 [&>div:first-of-type]:text-purple-800 [&>svg]:text-purple-700 dark:[&>svg]:text-purple-400 dark:[&>div:first-of-type]:text-purple-300 text-purple-800 dark:text-purple-300 border-purple-500/20 dark:border-purple-500/10',
|
|
34
35
|
fuchsia:
|
|
35
|
-
'bg-fuchsia-500/
|
|
36
|
-
pink: 'bg-pink-500/
|
|
37
|
-
rose: 'bg-rose-500/
|
|
36
|
+
'backdrop-blur-lg bg-fuchsia-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-fuchsia-700/5 dark:inset-shadow-fuchsia-500/2 shadow-fuchsia-500/5 dark:shadow-fuchsia-500/2 dark:bg-fuchsia-950/20 [&>div:first-of-type]:text-fuchsia-800 [&>svg]:text-fuchsia-700 dark:[&>svg]:text-fuchsia-400 dark:[&>div:first-of-type]:text-fuchsia-300 text-fuchsia-800 dark:text-fuchsia-300 border-fuchsia-500/20 dark:border-fuchsia-500/10',
|
|
37
|
+
pink: 'backdrop-blur-lg bg-pink-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-pink-700/5 dark:inset-shadow-pink-500/2 shadow-pink-500/5 dark:shadow-pink-500/2 dark:bg-pink-950/20 [&>div:first-of-type]:text-pink-800 [&>svg]:text-pink-700 dark:[&>svg]:text-pink-400 dark:[&>div:first-of-type]:text-pink-300 text-pink-800 dark:text-pink-300 border-pink-500/20 dark:border-pink-500/10',
|
|
38
|
+
rose: 'backdrop-blur-lg bg-rose-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-rose-700/5 dark:inset-shadow-rose-500/2 shadow-rose-500/5 dark:shadow-rose-500/2 dark:bg-rose-950/20 [&>div:first-of-type]:text-rose-800 [&>svg]:text-rose-700 dark:[&>svg]:text-rose-400 dark:[&>div:first-of-type]:text-rose-300 text-rose-800 dark:text-rose-300 border-rose-500/20 dark:border-rose-500/10'
|
|
38
39
|
}
|
|
39
40
|
},
|
|
40
41
|
defaultVariants: {
|
|
@@ -7,40 +7,39 @@
|
|
|
7
7
|
variants: {
|
|
8
8
|
variant: {
|
|
9
9
|
primary:
|
|
10
|
-
'border border-accent-500/
|
|
10
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-accent-500/5 dark:shadow-accent-500/2 inset-shadow-sm inset-shadow-accent-700/5 dark:inset-shadow-accent-500/2 border border-accent-500/15 dark:border-accent-500/15 bg-accent-200/50 dark:bg-accent-950/20 text-accent-900 dark:text-accent-400',
|
|
11
11
|
primary_shift:
|
|
12
|
-
'border border-[oklch(from_var(--color-accent-500)_l_c_calc(h+35)_/_0.
|
|
12
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-[oklch(from_var(--color-accent-500)_l_c_calc(h+35)_/_0.05)] dark:shadow-[oklch(from_var(--color-accent-500)_l_c_calc(h+35)_/_0.02)] inset-shadow-sm inset-shadow-[oklch(from_var(--color-accent-700)_l_c_calc(h+35)_/_0.05)] dark:inset-shadow-[oklch(from_var(--color-accent-500)_l_c_calc(h+35)_/_0.02)] border border-[oklch(from_var(--color-accent-500)_l_c_calc(h+35)_/_0.15)] dark:border-[oklch(from_var(--color-accent-500)_l_c_calc(h+35)_/_0.15)] bg-[oklch(from_var(--color-accent-200)_l_c_calc(h+35)_/_0.5)] dark:bg-[oklch(from_var(--color-accent-950)_l_c_calc(h+35)_/_0.2)] text-[oklch(from_var(--color-accent-900)_l_c_calc(h+35))] dark:text-[oklch(from_var(--color-accent-400)_l_c_calc(h+35))]',
|
|
13
13
|
primary_shift_2:
|
|
14
|
-
'border border-[oklch(from_var(--color-accent-500)_l_c_calc(h+70)_/_0.
|
|
14
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-[oklch(from_var(--color-accent-500)_l_c_calc(h+70)_/_0.05)] dark:shadow-[oklch(from_var(--color-accent-500)_l_c_calc(h+70)_/_0.02)] inset-shadow-sm inset-shadow-[oklch(from_var(--color-accent-700)_l_c_calc(h+70)_/_0.05)] dark:inset-shadow-[oklch(from_var(--color-accent-500)_l_c_calc(h+70)_/_0.02)] border border-[oklch(from_var(--color-accent-500)_l_c_calc(h+70)_/_0.15)] dark:border-[oklch(from_var(--color-accent-500)_l_c_calc(h+70)_/_0.15)] bg-[oklch(from_var(--color-accent-200)_l_c_calc(h+70)_/_0.5)] dark:bg-[oklch(from_var(--color-accent-950)_l_c_calc(h+70)_/_0.2)] text-[oklch(from_var(--color-accent-900)_l_c_calc(h+70))] dark:text-[oklch(from_var(--color-accent-400)_l_c_calc(h+70))]',
|
|
15
15
|
secondary:
|
|
16
|
-
'bg-base-300/
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-base-500/5 dark:shadow-base-500/2 inset-shadow-sm inset-shadow-base-700/2 dark:inset-shadow-base-500/2 bg-base-300/40 dark:bg-base-800/30 text-base-900 dark:text-base-50 border border-base-300/50 dark:border-base-700/30',
|
|
17
|
+
red: 'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-red-500/5 dark:shadow-red-500/2 inset-shadow-sm inset-shadow-red-700/5 dark:inset-shadow-red-500/2 border border-red-500/15 dark:border-red-500/15 bg-red-200/50 dark:bg-red-950/20 text-red-900 dark:text-red-400',
|
|
18
|
+
orange:
|
|
19
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-orange-500/5 dark:shadow-orange-500/2 inset-shadow-sm inset-shadow-orange-700/5 dark:inset-shadow-orange-500/2 border border-orange-500/15 dark:border-orange-500/15 bg-orange-200/50 dark:bg-orange-950/20 text-orange-900 dark:text-orange-400',
|
|
20
|
+
amber:
|
|
21
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-amber-500/5 dark:shadow-amber-500/2 inset-shadow-sm inset-shadow-amber-700/5 dark:inset-shadow-amber-500/2 border border-amber-500/15 dark:border-amber-500/15 bg-amber-200/50 dark:bg-amber-950/20 text-amber-900 dark:text-amber-400',
|
|
19
22
|
yellow:
|
|
20
|
-
'border border-yellow-500/
|
|
23
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-yellow-500/5 dark:shadow-yellow-500/2 inset-shadow-sm inset-shadow-yellow-700/5 dark:inset-shadow-yellow-500/2 border border-yellow-500/15 dark:border-yellow-500/15 bg-yellow-200/50 dark:bg-yellow-950/20 text-yellow-900 dark:text-yellow-400',
|
|
24
|
+
lime: 'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-lime-500/5 dark:shadow-lime-500/2 inset-shadow-sm inset-shadow-lime-700/5 dark:inset-shadow-lime-500/2 border border-lime-500/15 dark:border-lime-500/15 bg-lime-200/50 dark:bg-lime-950/20 text-lime-900 dark:text-lime-400',
|
|
21
25
|
green:
|
|
22
|
-
'border border-green-500/
|
|
23
|
-
|
|
26
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-green-500/5 dark:shadow-green-500/2 inset-shadow-sm inset-shadow-green-700/5 dark:inset-shadow-green-500/2 border border-green-500/15 dark:border-green-500/15 bg-green-200/50 dark:bg-green-950/20 text-green-900 dark:text-green-400',
|
|
27
|
+
emerald:
|
|
28
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-emerald-500/5 dark:shadow-emerald-500/2 inset-shadow-sm inset-shadow-emerald-700/5 dark:inset-shadow-emerald-500/2 border border-emerald-500/15 dark:border-emerald-500/15 bg-emerald-200/50 dark:bg-emerald-950/20 text-emerald-900 dark:text-emerald-400',
|
|
29
|
+
teal: 'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-teal-500/5 dark:shadow-teal-500/2 inset-shadow-sm inset-shadow-teal-700/5 dark:inset-shadow-teal-500/2 border border-teal-500/15 dark:border-teal-500/15 bg-teal-200/50 dark:bg-teal-950/20 text-teal-900 dark:text-teal-400',
|
|
30
|
+
cyan: 'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-cyan-500/5 dark:shadow-cyan-500/2 inset-shadow-sm inset-shadow-cyan-700/5 dark:inset-shadow-cyan-500/2 border border-cyan-500/15 dark:border-cyan-500/15 bg-cyan-200/50 dark:bg-cyan-950/20 text-cyan-900 dark:text-cyan-400',
|
|
31
|
+
sky: 'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-sky-500/5 dark:shadow-sky-500/2 inset-shadow-sm inset-shadow-sky-700/5 dark:inset-shadow-sky-500/2 border border-sky-500/15 dark:border-sky-500/15 bg-sky-200/50 dark:bg-sky-950/20 text-sky-900 dark:text-sky-400',
|
|
32
|
+
blue: 'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-blue-500/5 dark:shadow-blue-500/2 inset-shadow-sm inset-shadow-blue-700/5 dark:inset-shadow-blue-500/2 border border-blue-500/15 dark:border-blue-500/15 bg-blue-200/50 dark:bg-blue-950/20 text-blue-900 dark:text-blue-400',
|
|
24
33
|
indigo:
|
|
25
|
-
'border border-indigo-500/
|
|
34
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-indigo-500/5 dark:shadow-indigo-500/2 inset-shadow-sm inset-shadow-indigo-700/5 dark:inset-shadow-indigo-500/2 border border-indigo-500/15 dark:border-indigo-500/15 bg-indigo-200/50 dark:bg-indigo-950/20 text-indigo-900 dark:text-indigo-400',
|
|
26
35
|
violet:
|
|
27
|
-
'border border-violet-500/
|
|
36
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-violet-500/5 dark:shadow-violet-500/2 inset-shadow-sm inset-shadow-violet-700/5 dark:inset-shadow-violet-500/2 border border-violet-500/15 dark:border-violet-500/15 bg-violet-200/50 dark:bg-violet-950/20 text-violet-900 dark:text-violet-400',
|
|
28
37
|
purple:
|
|
29
|
-
'border border-purple-500/
|
|
38
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-purple-500/5 dark:shadow-purple-500/2 inset-shadow-sm inset-shadow-purple-700/5 dark:inset-shadow-purple-500/2 border border-purple-500/15 dark:border-purple-500/15 bg-purple-200/50 dark:bg-purple-950/20 text-purple-900 dark:text-purple-400',
|
|
30
39
|
fuchsia:
|
|
31
|
-
'border border-fuchsia-500/
|
|
32
|
-
pink: 'border border-pink-500/
|
|
33
|
-
rose: 'border border-rose-500/
|
|
34
|
-
orange:
|
|
35
|
-
'border border-orange-500/20 dark:border-orange-500/20 bg-orange-500/10 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400',
|
|
36
|
-
amber:
|
|
37
|
-
'border border-amber-500/20 dark:border-amber-500/20 bg-amber-500/10 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400',
|
|
38
|
-
lime: 'border border-lime-500/20 dark:border-lime-500/20 bg-lime-500/10 dark:bg-lime-500/10 text-lime-700 dark:text-lime-400',
|
|
39
|
-
emerald:
|
|
40
|
-
'border border-emerald-500/20 dark:border-emerald-500/20 bg-emerald-500/10 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
|
|
41
|
-
teal: 'border border-teal-500/20 dark:border-teal-500/20 bg-teal-500/10 dark:bg-teal-500/10 text-teal-700 dark:text-teal-400',
|
|
42
|
-
cyan: 'border border-cyan-500/20 dark:border-cyan-500/20 bg-cyan-500/10 dark:bg-cyan-500/10 text-cyan-700 dark:text-cyan-400',
|
|
43
|
-
sky: 'border border-sky-500/20 dark:border-sky-500/20 bg-sky-500/10 dark:bg-sky-500/10 text-sky-700 dark:text-sky-400'
|
|
40
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-fuchsia-500/5 dark:shadow-fuchsia-500/2 inset-shadow-sm inset-shadow-fuchsia-700/5 dark:inset-shadow-fuchsia-500/2 border border-fuchsia-500/15 dark:border-fuchsia-500/15 bg-fuchsia-200/50 dark:bg-fuchsia-950/20 text-fuchsia-900 dark:text-fuchsia-400',
|
|
41
|
+
pink: 'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-pink-500/5 dark:shadow-pink-500/2 inset-shadow-sm inset-shadow-pink-700/5 dark:inset-shadow-pink-500/2 border border-pink-500/15 dark:border-pink-500/15 bg-pink-200/50 dark:bg-pink-950/20 text-pink-900 dark:text-pink-400',
|
|
42
|
+
rose: 'backdrop-blur-md backdrop-brightness-105 shadow-lg shadow-rose-500/5 dark:shadow-rose-500/2 inset-shadow-sm inset-shadow-rose-700/5 dark:inset-shadow-rose-500/2 border border-rose-500/15 dark:border-rose-500/15 bg-rose-200/50 dark:bg-rose-950/20 text-rose-900 dark:text-rose-400'
|
|
44
43
|
},
|
|
45
44
|
size: {
|
|
46
45
|
sm: 'px-2 text-xs py-0.5 [&_svg]:size-3 gap-1.5',
|
|
@@ -6,8 +6,15 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
|
|
|
6
6
|
primary_shift_2: string;
|
|
7
7
|
secondary: string;
|
|
8
8
|
red: string;
|
|
9
|
+
orange: string;
|
|
10
|
+
amber: string;
|
|
9
11
|
yellow: string;
|
|
12
|
+
lime: string;
|
|
10
13
|
green: string;
|
|
14
|
+
emerald: string;
|
|
15
|
+
teal: string;
|
|
16
|
+
cyan: string;
|
|
17
|
+
sky: string;
|
|
11
18
|
blue: string;
|
|
12
19
|
indigo: string;
|
|
13
20
|
violet: string;
|
|
@@ -15,13 +22,6 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
|
|
|
15
22
|
fuchsia: string;
|
|
16
23
|
pink: string;
|
|
17
24
|
rose: string;
|
|
18
|
-
orange: string;
|
|
19
|
-
amber: string;
|
|
20
|
-
lime: string;
|
|
21
|
-
emerald: string;
|
|
22
|
-
teal: string;
|
|
23
|
-
cyan: string;
|
|
24
|
-
sky: string;
|
|
25
25
|
};
|
|
26
26
|
size: {
|
|
27
27
|
sm: string;
|
|
@@ -35,8 +35,15 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
|
|
|
35
35
|
primary_shift_2: string;
|
|
36
36
|
secondary: string;
|
|
37
37
|
red: string;
|
|
38
|
+
orange: string;
|
|
39
|
+
amber: string;
|
|
38
40
|
yellow: string;
|
|
41
|
+
lime: string;
|
|
39
42
|
green: string;
|
|
43
|
+
emerald: string;
|
|
44
|
+
teal: string;
|
|
45
|
+
cyan: string;
|
|
46
|
+
sky: string;
|
|
40
47
|
blue: string;
|
|
41
48
|
indigo: string;
|
|
42
49
|
violet: string;
|
|
@@ -44,13 +51,6 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
|
|
|
44
51
|
fuchsia: string;
|
|
45
52
|
pink: string;
|
|
46
53
|
rose: string;
|
|
47
|
-
orange: string;
|
|
48
|
-
amber: string;
|
|
49
|
-
lime: string;
|
|
50
|
-
emerald: string;
|
|
51
|
-
teal: string;
|
|
52
|
-
cyan: string;
|
|
53
|
-
sky: string;
|
|
54
54
|
};
|
|
55
55
|
size: {
|
|
56
56
|
sm: string;
|
|
@@ -64,8 +64,15 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
|
|
|
64
64
|
primary_shift_2: string;
|
|
65
65
|
secondary: string;
|
|
66
66
|
red: string;
|
|
67
|
+
orange: string;
|
|
68
|
+
amber: string;
|
|
67
69
|
yellow: string;
|
|
70
|
+
lime: string;
|
|
68
71
|
green: string;
|
|
72
|
+
emerald: string;
|
|
73
|
+
teal: string;
|
|
74
|
+
cyan: string;
|
|
75
|
+
sky: string;
|
|
69
76
|
blue: string;
|
|
70
77
|
indigo: string;
|
|
71
78
|
violet: string;
|
|
@@ -73,13 +80,6 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
|
|
|
73
80
|
fuchsia: string;
|
|
74
81
|
pink: string;
|
|
75
82
|
rose: string;
|
|
76
|
-
orange: string;
|
|
77
|
-
amber: string;
|
|
78
|
-
lime: string;
|
|
79
|
-
emerald: string;
|
|
80
|
-
teal: string;
|
|
81
|
-
cyan: string;
|
|
82
|
-
sky: string;
|
|
83
83
|
};
|
|
84
84
|
size: {
|
|
85
85
|
sm: string;
|
|
@@ -5,43 +5,43 @@
|
|
|
5
5
|
import { cn } from '../../utils';
|
|
6
6
|
|
|
7
7
|
export const buttonVariants = tv({
|
|
8
|
-
base: 'touch-manipulation hover:cursor-pointer
|
|
8
|
+
base: 'touch-manipulation hover:cursor-pointer hover:scale-101 focus-visible:scale-101 disabled:hover:scale-100 motion-safe:focus-visible:transition-transform focus-visible:outline-2 outline-offset-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl active:scale-98 text-sm font-medium motion-safe:transition-all disabled:pointer-events-none disabled:opacity-60 duration-800 active:duration-100 hover:duration-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
11
|
primary:
|
|
12
|
-
'focus-visible:outline-accent-500 border border-accent-500/
|
|
12
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-accent-500/5 dark:shadow-accent-500/2 disabled:shadow-md active:shadow-md inset-shadow-sm inset-shadow-accent-700/5 dark:inset-shadow-accent-500/2 focus-visible:outline-accent-500 border border-accent-500/15 dark:border-accent-500/15 hover:bg-accent-200/60 dark:hover:bg-accent-950/25 bg-accent-200/50 dark:bg-accent-950/20 text-accent-950 dark:text-accent-400',
|
|
13
13
|
secondary:
|
|
14
|
-
'focus-visible:outline-base-800 dark:focus-visible:outline-base-200 bg-base-300/
|
|
14
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-base-500/5 dark:shadow-base-500/2 active:shadow-md inset-shadow-sm inset-shadow-base-700/2 dark:inset-shadow-base-500/2 focus-visible:outline-base-800 dark:focus-visible:outline-base-200 bg-base-300/40 dark:bg-base-800/30 text-base-900 dark:text-base-50 hover:bg-base-300/45 dark:hover:bg-base-800/35 border border-base-300/50 dark:border-base-700/30',
|
|
15
15
|
link: 'focus-visible:outline-base-900 dark:focus-visible:outline-base-50 text-base-800 dark:text-base-200 font-semibold hover:text-accent-600 dark:hover:text-accent-400 data-[current=true]:text-accent-600 dark:data-[current=true]:text-accent-400',
|
|
16
16
|
ghost:
|
|
17
17
|
'focus-visible:outline-base-900 dark:focus-visible:outline-base-50 text-base-800 dark:text-base-200 font-semibold hover:text-accent-600 hover:bg-accent-400/5 data-[current=true]:bg-accent-500/5 dark:hover:text-accent-400 dark:hover:bg-accent-700/5 data-[current=true]:text-accent-600 dark:data-[current=true]:text-accent-400 dark:data-[current=true]:bg-accent-500/5',
|
|
18
18
|
|
|
19
|
-
red: 'focus-visible:outline-red-500 border border-red-500/
|
|
19
|
+
red: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-red-500/5 dark:shadow-red-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-red-500/15 inset-shadow-sm inset-shadow-red-700/5 dark:inset-shadow-red-500/2 focus-visible:outline-red-500 border border-red-500/15 dark:border-red-500/15 hover:bg-red-200/60 dark:hover:bg-red-950/30 bg-red-200/50 dark:bg-red-950/20 text-red-800 dark:text-red-400',
|
|
20
|
+
orange:
|
|
21
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-orange-500/5 dark:shadow-orange-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-orange-500/15 inset-shadow-sm inset-shadow-orange-700/5 dark:inset-shadow-orange-500/2 focus-visible:outline-orange-500 border border-orange-500/15 dark:border-orange-500/15 hover:bg-orange-200/60 dark:hover:bg-orange-950/30 bg-orange-200/50 dark:bg-orange-950/20 text-orange-800 dark:text-orange-400',
|
|
22
|
+
amber:
|
|
23
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-amber-500/5 dark:shadow-amber-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-amber-500/15 inset-shadow-sm inset-shadow-amber-700/5 dark:inset-shadow-amber-500/2 focus-visible:outline-amber-500 border border-amber-500/15 dark:border-amber-500/15 hover:bg-amber-200/60 dark:hover:bg-amber-950/30 bg-amber-200/50 dark:bg-amber-950/20 text-amber-800 dark:text-amber-400',
|
|
20
24
|
yellow:
|
|
21
|
-
'focus-visible:outline-yellow-500 border border-yellow-500/
|
|
25
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-yellow-500/5 dark:shadow-yellow-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-yellow-500/15 inset-shadow-sm inset-shadow-yellow-700/5 dark:inset-shadow-yellow-500/2 focus-visible:outline-yellow-500 border border-yellow-500/15 dark:border-yellow-500/15 hover:bg-yellow-200/60 dark:hover:bg-yellow-950/30 bg-yellow-200/50 dark:bg-yellow-950/20 text-yellow-800 dark:text-yellow-400',
|
|
26
|
+
lime: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-lime-500/5 dark:shadow-lime-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-lime-500/15 inset-shadow-sm inset-shadow-lime-700/5 dark:inset-shadow-lime-500/2 focus-visible:outline-lime-500 border border-lime-500/15 dark:border-lime-500/15 hover:bg-lime-200/60 dark:hover:bg-lime-950/30 bg-lime-200/50 dark:bg-lime-950/20 text-lime-800 dark:text-lime-400',
|
|
22
27
|
green:
|
|
23
|
-
'focus-visible:outline-green-500 border border-green-500/
|
|
24
|
-
|
|
28
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-green-500/5 dark:shadow-green-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-green-500/15 inset-shadow-sm inset-shadow-green-700/5 dark:inset-shadow-green-500/2 focus-visible:outline-green-500 border border-green-500/15 dark:border-green-500/15 hover:bg-green-200/60 dark:hover:bg-green-950/30 bg-green-200/50 dark:bg-green-950/20 text-green-800 dark:text-green-400',
|
|
29
|
+
emerald:
|
|
30
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-emerald-500/5 dark:shadow-emerald-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-emerald-500/15 inset-shadow-sm inset-shadow-emerald-700/5 dark:inset-shadow-emerald-500/2 focus-visible:outline-emerald-500 border border-emerald-500/15 dark:border-emerald-500/15 hover:bg-emerald-200/60 dark:hover:bg-emerald-950/30 bg-emerald-200/50 dark:bg-emerald-950/20 text-emerald-800 dark:text-emerald-400',
|
|
31
|
+
teal: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-teal-500/5 dark:shadow-teal-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-teal-500/15 inset-shadow-sm inset-shadow-teal-700/5 dark:inset-shadow-teal-500/2 focus-visible:outline-teal-500 border border-teal-500/15 dark:border-teal-500/15 hover:bg-teal-200/60 dark:hover:bg-teal-950/30 bg-teal-200/50 dark:bg-teal-950/20 text-teal-800 dark:text-teal-400',
|
|
32
|
+
cyan: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-cyan-500/5 dark:shadow-cyan-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-cyan-500/15 inset-shadow-sm inset-shadow-cyan-700/5 dark:inset-shadow-cyan-500/2 focus-visible:outline-cyan-500 border border-cyan-500/15 dark:border-cyan-500/15 hover:bg-cyan-200/60 dark:hover:bg-cyan-950/30 bg-cyan-200/50 dark:bg-cyan-950/20 text-cyan-800 dark:text-cyan-400',
|
|
33
|
+
sky: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-sky-500/5 dark:shadow-sky-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-sky-500/15 inset-shadow-sm inset-shadow-sky-700/5 dark:inset-shadow-sky-500/2 focus-visible:outline-sky-500 border border-sky-500/15 dark:border-sky-500/15 hover:bg-sky-200/60 dark:hover:bg-sky-950/30 bg-sky-200/50 dark:bg-sky-950/20 text-sky-800 dark:text-sky-400',
|
|
34
|
+
blue: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-blue-500/5 dark:shadow-blue-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-blue-500/15 inset-shadow-sm inset-shadow-blue-700/5 dark:inset-shadow-blue-500/2 focus-visible:outline-blue-500 border border-blue-500/15 dark:border-blue-500/15 hover:bg-blue-200/60 dark:hover:bg-blue-950/30 bg-blue-200/50 dark:bg-blue-950/20 text-blue-800 dark:text-blue-400',
|
|
25
35
|
indigo:
|
|
26
|
-
'focus-visible:outline-indigo-500 border border-indigo-500/
|
|
36
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-indigo-500/5 dark:shadow-indigo-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-indigo-500/15 inset-shadow-sm inset-shadow-indigo-700/5 dark:inset-shadow-indigo-500/2 focus-visible:outline-indigo-500 border border-indigo-500/15 dark:border-indigo-500/15 hover:bg-indigo-200/60 dark:hover:bg-indigo-950/30 bg-indigo-200/50 dark:bg-indigo-950/20 text-indigo-800 dark:text-indigo-400',
|
|
27
37
|
violet:
|
|
28
|
-
'focus-visible:outline-violet-500 border border-violet-500/
|
|
38
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-violet-500/5 dark:shadow-violet-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-violet-500/15 inset-shadow-sm inset-shadow-violet-700/5 dark:inset-shadow-violet-500/2 focus-visible:outline-violet-500 border border-violet-500/15 dark:border-violet-500/15 hover:bg-violet-200/60 dark:hover:bg-violet-950/30 bg-violet-200/50 dark:bg-violet-950/20 text-violet-800 dark:text-violet-400',
|
|
29
39
|
purple:
|
|
30
|
-
'focus-visible:outline-purple-500 border border-purple-500/
|
|
40
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-purple-500/5 dark:shadow-purple-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-purple-500/15 inset-shadow-sm inset-shadow-purple-700/5 dark:inset-shadow-purple-500/2 focus-visible:outline-purple-500 border border-purple-500/15 dark:border-purple-500/15 hover:bg-purple-200/60 dark:hover:bg-purple-950/30 bg-purple-200/50 dark:bg-purple-950/20 text-purple-800 dark:text-purple-400',
|
|
31
41
|
fuchsia:
|
|
32
|
-
'focus-visible:outline-fuchsia-500 border border-fuchsia-500/
|
|
33
|
-
pink: 'focus-visible:outline-pink-500 border border-pink-500/
|
|
34
|
-
rose: 'focus-visible:outline-rose-500 border border-rose-500/
|
|
35
|
-
orange:
|
|
36
|
-
'focus-visible:outline-orange-500 border border-orange-500/20 dark:border-orange-500/20 hover:bg-orange-500/20 dark:hover:bg-orange-500/20 bg-orange-500/10 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400',
|
|
37
|
-
amber:
|
|
38
|
-
'focus-visible:outline-amber-500 border border-amber-500/20 dark:border-amber-500/20 hover:bg-amber-500/20 dark:hover:bg-amber-500/20 bg-amber-500/10 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400',
|
|
39
|
-
lime: 'focus-visible:outline-lime-500 border border-lime-500/20 dark:border-lime-500/20 hover:bg-lime-500/20 dark:hover:bg-lime-500/20 bg-lime-500/10 dark:bg-lime-500/10 text-lime-700 dark:text-lime-400',
|
|
40
|
-
emerald:
|
|
41
|
-
'focus-visible:outline-emerald-500 border border-emerald-500/20 dark:border-emerald-500/20 hover:bg-emerald-500/20 dark:hover:bg-emerald-500/20 bg-emerald-500/10 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
|
|
42
|
-
teal: 'focus-visible:outline-teal-500 border border-teal-500/20 dark:border-teal-500/20 hover:bg-teal-500/20 dark:hover:bg-teal-500/20 bg-teal-500/10 dark:bg-teal-500/10 text-teal-700 dark:text-teal-400',
|
|
43
|
-
cyan: 'focus-visible:outline-cyan-500 border border-cyan-500/20 dark:border-cyan-500/20 hover:bg-cyan-500/20 dark:hover:bg-cyan-500/20 bg-cyan-500/10 dark:bg-cyan-500/10 text-cyan-700 dark:text-cyan-400',
|
|
44
|
-
sky: 'focus-visible:outline-sky-500 border border-sky-500/20 dark:border-sky-500/20 hover:bg-sky-500/20 dark:hover:bg-sky-500/20 bg-sky-500/10 dark:bg-sky-500/10 text-sky-700 dark:text-sky-400'
|
|
42
|
+
'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-fuchsia-500/5 dark:shadow-fuchsia-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-fuchsia-500/15 inset-shadow-sm inset-shadow-fuchsia-700/5 dark:inset-shadow-fuchsia-500/2 focus-visible:outline-fuchsia-500 border border-fuchsia-500/15 dark:border-fuchsia-500/15 hover:bg-fuchsia-200/60 dark:hover:bg-fuchsia-950/30 bg-fuchsia-200/50 dark:bg-fuchsia-950/20 text-fuchsia-800 dark:text-fuchsia-400',
|
|
43
|
+
pink: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-pink-500/5 dark:shadow-pink-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-pink-500/15 inset-shadow-sm inset-shadow-pink-700/5 dark:inset-shadow-pink-500/2 focus-visible:outline-pink-500 border border-pink-500/15 dark:border-pink-500/15 hover:bg-pink-200/60 dark:hover:bg-pink-950/30 bg-pink-200/50 dark:bg-pink-950/20 text-pink-800 dark:text-pink-400',
|
|
44
|
+
rose: 'backdrop-blur-md backdrop-brightness-105 shadow-lg transform-all shadow-rose-500/5 dark:shadow-rose-500/2 disabled:shadow-md active:shadow-md focus-visible:inset-shadow-rose-500/15 inset-shadow-sm inset-shadow-rose-700/5 dark:inset-shadow-rose-500/2 focus-visible:outline-rose-500 border border-rose-500/15 dark:border-rose-500/15 hover:bg-rose-200/60 dark:hover:bg-rose-950/30 bg-rose-200/50 dark:bg-rose-950/20 text-rose-800 dark:text-rose-400'
|
|
45
45
|
},
|
|
46
46
|
size: {
|
|
47
47
|
default: 'px-3 py-1.5',
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
{#if href}
|
|
86
86
|
<a
|
|
87
87
|
bind:this={ref}
|
|
88
|
-
class={cn(buttonVariants({ variant, size }), className)}
|
|
88
|
+
class={cn('rounded-box', buttonVariants({ variant, size }), className)}
|
|
89
89
|
{href}
|
|
90
90
|
{...restProps}
|
|
91
91
|
>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
{:else}
|
|
95
95
|
<button
|
|
96
96
|
bind:this={ref}
|
|
97
|
-
class={cn(buttonVariants({ variant, size }), className)}
|
|
97
|
+
class={cn('rounded-box', buttonVariants({ variant, size }), className)}
|
|
98
98
|
{type}
|
|
99
99
|
{...restProps}
|
|
100
100
|
>
|
|
@@ -8,8 +8,15 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
8
8
|
link: string;
|
|
9
9
|
ghost: string;
|
|
10
10
|
red: string;
|
|
11
|
+
orange: string;
|
|
12
|
+
amber: string;
|
|
11
13
|
yellow: string;
|
|
14
|
+
lime: string;
|
|
12
15
|
green: string;
|
|
16
|
+
emerald: string;
|
|
17
|
+
teal: string;
|
|
18
|
+
cyan: string;
|
|
19
|
+
sky: string;
|
|
13
20
|
blue: string;
|
|
14
21
|
indigo: string;
|
|
15
22
|
violet: string;
|
|
@@ -17,13 +24,6 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
17
24
|
fuchsia: string;
|
|
18
25
|
pink: string;
|
|
19
26
|
rose: string;
|
|
20
|
-
orange: string;
|
|
21
|
-
amber: string;
|
|
22
|
-
lime: string;
|
|
23
|
-
emerald: string;
|
|
24
|
-
teal: string;
|
|
25
|
-
cyan: string;
|
|
26
|
-
sky: string;
|
|
27
27
|
};
|
|
28
28
|
size: {
|
|
29
29
|
default: string;
|
|
@@ -33,15 +33,22 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
33
33
|
iconSm: string;
|
|
34
34
|
iconLg: string;
|
|
35
35
|
};
|
|
36
|
-
}, undefined, "touch-manipulation hover:cursor-pointer
|
|
36
|
+
}, undefined, "touch-manipulation hover:cursor-pointer hover:scale-101 focus-visible:scale-101 disabled:hover:scale-100 motion-safe:focus-visible:transition-transform focus-visible:outline-2 outline-offset-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl active:scale-98 text-sm font-medium motion-safe:transition-all disabled:pointer-events-none disabled:opacity-60 duration-800 active:duration-100 hover:duration-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
|
|
37
37
|
variant: {
|
|
38
38
|
primary: string;
|
|
39
39
|
secondary: string;
|
|
40
40
|
link: string;
|
|
41
41
|
ghost: string;
|
|
42
42
|
red: string;
|
|
43
|
+
orange: string;
|
|
44
|
+
amber: string;
|
|
43
45
|
yellow: string;
|
|
46
|
+
lime: string;
|
|
44
47
|
green: string;
|
|
48
|
+
emerald: string;
|
|
49
|
+
teal: string;
|
|
50
|
+
cyan: string;
|
|
51
|
+
sky: string;
|
|
45
52
|
blue: string;
|
|
46
53
|
indigo: string;
|
|
47
54
|
violet: string;
|
|
@@ -49,13 +56,6 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
49
56
|
fuchsia: string;
|
|
50
57
|
pink: string;
|
|
51
58
|
rose: string;
|
|
52
|
-
orange: string;
|
|
53
|
-
amber: string;
|
|
54
|
-
lime: string;
|
|
55
|
-
emerald: string;
|
|
56
|
-
teal: string;
|
|
57
|
-
cyan: string;
|
|
58
|
-
sky: string;
|
|
59
59
|
};
|
|
60
60
|
size: {
|
|
61
61
|
default: string;
|
|
@@ -72,8 +72,15 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
72
72
|
link: string;
|
|
73
73
|
ghost: string;
|
|
74
74
|
red: string;
|
|
75
|
+
orange: string;
|
|
76
|
+
amber: string;
|
|
75
77
|
yellow: string;
|
|
78
|
+
lime: string;
|
|
76
79
|
green: string;
|
|
80
|
+
emerald: string;
|
|
81
|
+
teal: string;
|
|
82
|
+
cyan: string;
|
|
83
|
+
sky: string;
|
|
77
84
|
blue: string;
|
|
78
85
|
indigo: string;
|
|
79
86
|
violet: string;
|
|
@@ -81,13 +88,6 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
81
88
|
fuchsia: string;
|
|
82
89
|
pink: string;
|
|
83
90
|
rose: string;
|
|
84
|
-
orange: string;
|
|
85
|
-
amber: string;
|
|
86
|
-
lime: string;
|
|
87
|
-
emerald: string;
|
|
88
|
-
teal: string;
|
|
89
|
-
cyan: string;
|
|
90
|
-
sky: string;
|
|
91
91
|
};
|
|
92
92
|
size: {
|
|
93
93
|
default: string;
|
|
@@ -97,7 +97,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
97
97
|
iconSm: string;
|
|
98
98
|
iconLg: string;
|
|
99
99
|
};
|
|
100
|
-
}, undefined, "touch-manipulation hover:cursor-pointer
|
|
100
|
+
}, undefined, "touch-manipulation hover:cursor-pointer hover:scale-101 focus-visible:scale-101 disabled:hover:scale-100 motion-safe:focus-visible:transition-transform focus-visible:outline-2 outline-offset-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl active:scale-98 text-sm font-medium motion-safe:transition-all disabled:pointer-events-none disabled:opacity-60 duration-800 active:duration-100 hover:duration-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", unknown, unknown, undefined>>;
|
|
101
101
|
export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
|
|
102
102
|
export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
|
|
103
103
|
export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
|
|
@@ -2,19 +2,20 @@
|
|
|
2
2
|
import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
|
|
3
3
|
import { type VariantProps, tv } from 'tailwind-variants';
|
|
4
4
|
import { cn } from '../../utils';
|
|
5
|
+
import { draw } from 'svelte/transition';
|
|
5
6
|
|
|
6
7
|
export const checkboxVariants = tv({
|
|
7
|
-
base: 'peer cursor-pointer box-content
|
|
8
|
+
base: 'peer cursor-pointer box-content shrink-0 inline-flex items-center justify-center rounded-lg border transition-colors duration-100 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent-500 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
|
|
8
9
|
variants: {
|
|
9
10
|
variant: {
|
|
10
11
|
primary:
|
|
11
|
-
'border-accent-
|
|
12
|
+
'backdrop-blur-lg border-accent-500/40 bg-accent-100/60 focus-visible:outline-accent-500 data-[state=checked]:border-accent-500/60 data-[state=checked]:bg-accent-200/60 data-[state=checked]:text-accent-900 dark:border-accent-500/20 dark:bg-accent-950/20 dark:text-accent-500 dark:data-[state=checked]:border-accent-500/30 dark:data-[state=checked]:bg-accent-900/40 dark:data-[state=checked]:text-accent-200',
|
|
12
13
|
secondary:
|
|
13
|
-
'border-base-300 bg-base-100 focus-visible:outline-base-900 dark:focus-visible:outline-base-100 data-[state=checked]:border-base-400 data-[state=checked]:bg-base-200 data-[state=checked]:text-base-900 dark:border-base-
|
|
14
|
+
'backdrop-blur-lg border-base-300 bg-base-100/80 focus-visible:outline-base-900 dark:focus-visible:outline-base-100 data-[state=checked]:border-base-400 data-[state=checked]:bg-base-200/80 data-[state=checked]:text-base-900 dark:border-base-600/40 dark:bg-base-950/40 dark:text-base-50 dark:data-[state=checked]:border-base-500/80 dark:data-[state=checked]:bg-base-500/30 dark:data-[state=checked]:text-base-100'
|
|
14
15
|
},
|
|
15
16
|
sizeVariant: {
|
|
16
17
|
default: 'size-5',
|
|
17
|
-
sm: 'size-4',
|
|
18
|
+
sm: 'size-4 rounded-md',
|
|
18
19
|
lg: 'size-6'
|
|
19
20
|
}
|
|
20
21
|
},
|
|
@@ -69,12 +70,12 @@
|
|
|
69
70
|
>
|
|
70
71
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
|
|
71
72
|
</svg>
|
|
72
|
-
{:else}
|
|
73
|
+
{:else if checked}
|
|
73
74
|
<svg
|
|
74
75
|
xmlns="http://www.w3.org/2000/svg"
|
|
75
76
|
fill="none"
|
|
76
77
|
viewBox="0 0 24 24"
|
|
77
|
-
stroke-width="
|
|
78
|
+
stroke-width="3"
|
|
78
79
|
stroke="currentColor"
|
|
79
80
|
class={[
|
|
80
81
|
sizeVariant === 'sm' && 'size-3.5',
|
|
@@ -83,9 +84,9 @@
|
|
|
83
84
|
!checked && 'text-transparent'
|
|
84
85
|
]}
|
|
85
86
|
>
|
|
86
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
|
87
|
+
<path in:draw={{ duration: 100 }} stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
|
87
88
|
</svg>
|
|
88
89
|
{/if}
|
|
89
90
|
</div>
|
|
90
91
|
{/snippet}
|
|
91
|
-
</CheckboxPrimitive.Root>
|
|
92
|
+
</CheckboxPrimitive.Root>
|
|
@@ -10,7 +10,7 @@ export declare const checkboxVariants: import("tailwind-variants").TVReturnType<
|
|
|
10
10
|
sm: string;
|
|
11
11
|
lg: string;
|
|
12
12
|
};
|
|
13
|
-
}, undefined, "peer cursor-pointer box-content
|
|
13
|
+
}, undefined, "peer cursor-pointer box-content shrink-0 inline-flex items-center justify-center rounded-lg border transition-colors duration-100 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent-500 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", {
|
|
14
14
|
variant: {
|
|
15
15
|
primary: string;
|
|
16
16
|
secondary: string;
|
|
@@ -30,7 +30,7 @@ export declare const checkboxVariants: import("tailwind-variants").TVReturnType<
|
|
|
30
30
|
sm: string;
|
|
31
31
|
lg: string;
|
|
32
32
|
};
|
|
33
|
-
}, undefined, "peer cursor-pointer box-content
|
|
33
|
+
}, undefined, "peer cursor-pointer box-content shrink-0 inline-flex items-center justify-center rounded-lg border transition-colors duration-100 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent-500 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", unknown, unknown, undefined>>;
|
|
34
34
|
export type CheckboxVariant = VariantProps<typeof checkboxVariants>['variant'];
|
|
35
35
|
export type CheckboxSize = VariantProps<typeof checkboxVariants>['sizeVariant'];
|
|
36
36
|
export type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps> & {
|