[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
improve alerts, buttons, checkboxes
+121
-56
+30
convert.ts
+30
convert.ts
···
1
+
const text =
2
+
"'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 focus-visible:inset-shadow-accent-500/15 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/30 bg-accent-200/50 dark:bg-accent-950/20 text-accent-800 dark:text-accent-400',";
3
+
const replaceColor = (color: string) => {
4
+
return color + ':' + text.replaceAll('accent', color);
5
+
};
6
+
7
+
const colors = [
8
+
'base',
9
+
'red',
10
+
'orange',
11
+
'amber',
12
+
'yellow',
13
+
'lime',
14
+
'green',
15
+
'emerald',
16
+
'teal',
17
+
'cyan',
18
+
'sky',
19
+
'blue',
20
+
'indigo',
21
+
'violet',
22
+
'purple',
23
+
'fuchsia',
24
+
'pink',
25
+
'rose'
26
+
];
27
+
28
+
const result = colors.map(replaceColor).join('\n');
29
+
30
+
console.log(result);
+5
.changeset/red-berries-beam.md
+5
.changeset/red-berries-beam.md
apps/docs/static/dark_mountains.jpg
apps/docs/static/dark_mountains.jpg
This is a binary file and will not be displayed.
apps/docs/static/gradient.jpg
apps/docs/static/gradient.jpg
This is a binary file and will not be displayed.
apps/docs/static/mountains.jpg
apps/docs/static/mountains.jpg
This is a binary file and will not be displayed.
apps/docs/static/test.jpg
apps/docs/static/test.jpg
This is a binary file and will not be displayed.
+29
apps/docs/src/routes/+layout.svelte
+29
apps/docs/src/routes/+layout.svelte
···
3
3
4
4
import { Head, Toaster } from '@foxui/all';
5
5
import { base } from '$app/paths';
6
+
import { dev } from '$app/environment';
6
7
7
8
let { children } = $props();
9
+
10
+
let showImage = $state(false);
11
+
12
+
let images = ['test.jpg', 'gradient.jpg', 'mountains.jpg', 'dark_mountains.jpg'];
13
+
let currentImage = $state(0);
8
14
</script>
15
+
16
+
<svelte:body
17
+
onkeydown={(e) => {
18
+
if(!dev) return;
19
+
20
+
if (e.key === 'i') {
21
+
showImage = !showImage;
22
+
} else if (e.key === 'ArrowRight') {
23
+
currentImage = (currentImage + 1) % images.length;
24
+
} else if (e.key === 'ArrowLeft') {
25
+
currentImage = (currentImage - 1 + images.length) % images.length;
26
+
}
27
+
}}
28
+
/>
9
29
10
30
{@render children()}
11
31
···
18
38
/>
19
39
20
40
<Toaster />
41
+
42
+
43
+
{#if showImage}
44
+
<img
45
+
src={base + '/' + images[currentImage]}
46
+
alt="fox ui"
47
+
class="pointer-events-none fixed inset-0 -z-50 h-full w-full object-cover brightness-100 filter"
48
+
/>
49
+
{/if}
+20
-19
packages/core/src/lib/components/alert/alert.svelte
+20
-19
packages/core/src/lib/components/alert/alert.svelte
···
6
6
variants: {
7
7
variant: {
8
8
default:
9
-
'bg-accent-500/10 [&>div:first-of-type]:text-accent-700 [&>svg]:text-accent-600 dark:[&>svg]:text-accent-500 dark:[&>div:first-of-type]:text-accent-400 dark:bg-accent-500/5 text-accent-600 dark:text-accent-400 border-accent-500/20 dark:border-accent-500/10',
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-700 [&>svg]:text-base-600 dark:[&>svg]:text-base-400 dark:[&>div:first-of-type]:text-base-300 dark:bg-base-500/5 text-base-600 dark:text-base-400 border-base-500/20 dark:border-base-500/10',
12
-
red: 'bg-red-500/10 [&>div:first-of-type]:text-red-700 [&>svg]:text-red-600 dark:[&>svg]:text-red-500 dark:[&>div:first-of-type]:text-red-400 dark:bg-red-500/5 text-red-600 dark:text-red-400 border-red-500/20 dark:border-red-500/10',
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/10 [&>div:first-of-type]:text-orange-700 [&>svg]:text-orange-600 dark:[&>svg]:text-orange-500 dark:[&>div:first-of-type]:text-orange-400 dark:bg-orange-500/5 text-orange-600 dark:text-orange-400 border-orange-500/20 dark:border-orange-500/10',
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/10 [&>div:first-of-type]:text-amber-700 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-500 dark:[&>div:first-of-type]:text-amber-400 dark:bg-amber-500/5 text-amber-600 dark:text-amber-400 border-amber-500/20 dark:border-amber-500/10',
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/10 [&>div:first-of-type]:text-yellow-700 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-500 dark:[&>div:first-of-type]:text-yellow-400 dark:bg-yellow-500/5 text-yellow-600 dark:text-yellow-400 border-yellow-500/20 dark:border-yellow-500/10',
19
-
lime: 'bg-lime-500/10 [&>div:first-of-type]:text-lime-700 [&>svg]:text-lime-600 dark:[&>svg]:text-lime-500 dark:[&>div:first-of-type]:text-lime-400 dark:bg-lime-500/5 text-lime-600 dark:text-lime-400 border-lime-500/20 dark:border-lime-500/10',
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/10 [&>div:first-of-type]:text-green-700 [&>svg]:text-green-600 dark:[&>svg]:text-green-500 dark:[&>div:first-of-type]:text-green-400 dark:bg-green-500/5 text-green-600 dark:text-green-400 border-green-500/20 dark:border-green-500/10',
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/10 [&>div:first-of-type]:text-emerald-700 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-500 dark:[&>div:first-of-type]:text-emerald-400 dark:bg-emerald-500/5 text-emerald-600 dark:text-emerald-400 border-emerald-500/20 dark:border-emerald-500/10',
24
-
teal: 'bg-teal-500/10 [&>div:first-of-type]:text-teal-700 [&>svg]:text-teal-600 dark:[&>svg]:text-teal-500 dark:[&>div:first-of-type]:text-teal-400 dark:bg-teal-500/5 text-teal-600 dark:text-teal-400 border-teal-500/20 dark:border-teal-500/10',
25
-
cyan: 'bg-cyan-500/10 [&>div:first-of-type]:text-cyan-700 [&>svg]:text-cyan-600 dark:[&>svg]:text-cyan-500 dark:[&>div:first-of-type]:text-cyan-400 dark:bg-cyan-500/5 text-cyan-600 dark:text-cyan-400 border-cyan-500/20 dark:border-cyan-500/10',
26
-
sky: 'bg-sky-500/10 [&>div:first-of-type]:text-sky-700 [&>svg]:text-sky-600 dark:[&>svg]:text-sky-500 dark:[&>div:first-of-type]:text-sky-400 dark:bg-sky-500/5 text-sky-600 dark:text-sky-400 border-sky-500/20 dark:border-sky-500/10',
27
-
blue: 'bg-blue-500/10 [&>div:first-of-type]:text-blue-700 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-500 dark:[&>div:first-of-type]:text-blue-400 dark:bg-blue-500/5 text-blue-600 dark:text-blue-400 border-blue-500/20 dark:border-blue-500/10',
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/10 [&>div:first-of-type]:text-indigo-700 [&>svg]:text-indigo-600 dark:[&>svg]:text-indigo-500 dark:[&>div:first-of-type]:text-indigo-400 dark:bg-indigo-500/5 text-indigo-600 dark:text-indigo-400 border-indigo-500/20 dark:border-indigo-500/10',
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/10 [&>div:first-of-type]:text-violet-700 [&>svg]:text-violet-600 dark:[&>svg]:text-violet-500 dark:[&>div:first-of-type]:text-violet-400 dark:bg-violet-500/5 text-violet-600 dark:text-violet-400 border-violet-500/20 dark:border-violet-500/10',
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/10 [&>div:first-of-type]:text-purple-700 [&>svg]:text-purple-600 dark:[&>svg]:text-purple-500 dark:[&>div:first-of-type]:text-purple-400 dark:bg-purple-500/5 text-purple-600 dark:text-purple-400 border-purple-500/20 dark:border-purple-500/10',
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/10 [&>div:first-of-type]:text-fuchsia-700 [&>svg]:text-fuchsia-600 dark:[&>svg]:text-fuchsia-500 dark:[&>div:first-of-type]:text-fuchsia-400 dark:bg-fuchsia-500/5 text-fuchsia-600 dark:text-fuchsia-400 border-fuchsia-500/20 dark:border-fuchsia-500/10',
36
-
pink: 'bg-pink-500/10 [&>div:first-of-type]:text-pink-700 [&>svg]:text-pink-600 dark:[&>svg]:text-pink-500 dark:[&>div:first-of-type]:text-pink-400 dark:bg-pink-500/5 text-pink-600 dark:text-pink-400 border-pink-500/20 dark:border-pink-500/10',
37
-
rose: 'bg-rose-500/10 [&>div:first-of-type]:text-rose-700 [&>svg]:text-rose-600 dark:[&>svg]:text-rose-500 dark:[&>div:first-of-type]:text-rose-400 dark:bg-rose-500/5 text-rose-600 dark:text-rose-400 border-rose-500/20 dark:border-rose-500/10'
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: {
+9
-8
packages/core/src/lib/components/checkbox/checkbox.svelte
+9
-8
packages/core/src/lib/components/checkbox/checkbox.svelte
···
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 size-4 shrink-0 inline-flex items-center justify-center rounded-2xl border 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
+
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-200 bg-accent-100 focus-visible:outline-accent-500 data-[state=checked]:border-accent-300 data-[state=checked]:bg-accent-200 data-[state=checked]:text-accent-600 dark:border-accent-500/20 dark:bg-accent-500/5 dark:text-accent-500 dark:data-[state=checked]:border-accent-500/30 dark:data-[state=checked]:bg-accent-500/20 dark:data-[state=checked]:text-accent-500',
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-700 dark:bg-base-900 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
+
'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
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="2.5"
78
+
stroke-width="3"
78
79
stroke="currentColor"
79
80
class={[
80
81
sizeVariant === 'sm' && 'size-3.5',
···
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>
-1
apps/docs/src/routes/(main)/components/core/prose/Prose.md
-1
apps/docs/src/routes/(main)/components/core/prose/Prose.md