[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
random work in progress
+227
-60
+30
convert.ts
+30
convert.ts
···
1
+
const text =
2
+
"'backdrop-blur-lg bg-accent-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-accent-700/10 dark:inset-shadow-accent-500/5 shadow-accent-500/10 dark:shadow-accent-500/5 dark:bg-accent-950/40 [&>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',";
3
+
4
+
const replaceColor = (color: string) => {
5
+
return color + ':' + text.replaceAll('accent', color);
6
+
};
7
+
8
+
const colors = [
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);
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
···
5
5
import { base } from '$app/paths';
6
6
7
7
let { children } = $props();
8
+
9
+
let showImage = $state(false);
10
+
11
+
let images = ['test.jpg', 'gradient.jpg', 'mountains.jpg', 'dark_mountains.jpg'];
12
+
let currentImage = $state(0);
8
13
</script>
14
+
15
+
<svelte:body
16
+
onkeydown={(e) => {
17
+
if (e.key === 'i') {
18
+
showImage = !showImage;
19
+
} else if (e.key === 'ArrowRight') {
20
+
currentImage = (currentImage + 1) % images.length;
21
+
} else if (e.key === 'ArrowLeft') {
22
+
currentImage = (currentImage - 1 + images.length) % images.length;
23
+
}
24
+
}}
25
+
/>
9
26
10
27
{@render children()}
11
28
···
18
35
/>
19
36
20
37
<Toaster />
38
+
39
+
{#if showImage}
40
+
<img
41
+
src={base + '/' + images[currentImage]}
42
+
alt="fox ui"
43
+
class="pointer-events-none fixed inset-0 -z-50 h-full w-full object-cover brightness-100 filter"
44
+
/>
45
+
{/if}
46
+
47
+
<!-- <div class="fixed inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
48
+
<div class="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-accent-700 to-accent-900 opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
49
+
</div> -->
+2
packages/base/src/lib/components/index.ts
+2
packages/base/src/lib/components/index.ts
+11
apps/docs/src/routes/(main)/test/+page.svelte
+11
apps/docs/src/routes/(main)/test/+page.svelte
···
1
+
<script lang="ts">
2
+
import { SvercleContainer } from '@fuxui/base';
3
+
4
+
const h = 400;
5
+
const w = 400;
6
+
</script>
7
+
8
+
9
+
<div class="svercle overflow-visible" style="--height: {h}; --width:{w}">
10
+
<SvercleContainer curve={0.3} anchor={0.4} fill="#fff" class="text-black px-3 py-5">Hello!</SvercleContainer>
11
+
</div>
+19
-19
packages/base/src/lib/components/alert/alert.svelte
+19
-19
packages/base/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/10 dark:inset-shadow-accent-500/5 shadow-accent-500/10 dark:shadow-accent-500/5 dark:bg-accent-950/40 [&>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-300/70 shadow-lg transform-all inset-shadow-sm inset-shadow-base-700/10 dark:inset-shadow-base-500/5 shadow-base-500/10 dark:shadow-base-500/5 dark:bg-base-800/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
+
red: 'backdrop-blur-lg bg-red-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-red-700/10 dark:inset-shadow-red-500/5 shadow-red-500/10 dark:shadow-red-500/5 dark:bg-red-950/40 [&>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
13
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',
14
+
'backdrop-blur-lg bg-orange-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-orange-700/10 dark:inset-shadow-orange-500/5 shadow-orange-500/10 dark:shadow-orange-500/5 dark:bg-orange-950/40 [&>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
15
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',
16
+
'backdrop-blur-lg bg-amber-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-amber-700/10 dark:inset-shadow-amber-500/5 shadow-amber-500/10 dark:shadow-amber-500/5 dark:bg-amber-950/40 [&>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
17
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',
18
+
'backdrop-blur-lg bg-yellow-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-yellow-700/10 dark:inset-shadow-yellow-500/5 shadow-yellow-500/10 dark:shadow-yellow-500/5 dark:bg-yellow-950/40 [&>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',
19
+
lime: 'backdrop-blur-lg bg-lime-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-lime-700/10 dark:inset-shadow-lime-500/5 shadow-lime-500/10 dark:shadow-lime-500/5 dark:bg-lime-950/40 [&>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
20
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',
21
+
'backdrop-blur-lg bg-green-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-green-700/10 dark:inset-shadow-green-500/5 shadow-green-500/10 dark:shadow-green-500/5 dark:bg-green-950/40 [&>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
22
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',
23
+
'backdrop-blur-lg bg-emerald-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-emerald-700/10 dark:inset-shadow-emerald-500/5 shadow-emerald-500/10 dark:shadow-emerald-500/5 dark:bg-emerald-950/40 [&>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',
24
+
teal: 'backdrop-blur-lg bg-teal-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-teal-700/10 dark:inset-shadow-teal-500/5 shadow-teal-500/10 dark:shadow-teal-500/5 dark:bg-teal-950/40 [&>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',
25
+
cyan: 'backdrop-blur-lg bg-cyan-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-cyan-700/10 dark:inset-shadow-cyan-500/5 shadow-cyan-500/10 dark:shadow-cyan-500/5 dark:bg-cyan-950/40 [&>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',
26
+
sky: 'backdrop-blur-lg bg-sky-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-sky-700/10 dark:inset-shadow-sky-500/5 shadow-sky-500/10 dark:shadow-sky-500/5 dark:bg-sky-950/40 [&>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',
27
+
blue: 'backdrop-blur-lg bg-blue-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-blue-700/10 dark:inset-shadow-blue-500/5 shadow-blue-500/10 dark:shadow-blue-500/5 dark:bg-blue-950/40 [&>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
28
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',
29
+
'backdrop-blur-lg bg-indigo-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-indigo-700/10 dark:inset-shadow-indigo-500/5 shadow-indigo-500/10 dark:shadow-indigo-500/5 dark:bg-indigo-950/40 [&>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
30
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',
31
+
'backdrop-blur-lg bg-violet-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-violet-700/10 dark:inset-shadow-violet-500/5 shadow-violet-500/10 dark:shadow-violet-500/5 dark:bg-violet-950/40 [&>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
32
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',
33
+
'backdrop-blur-lg bg-purple-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-purple-700/10 dark:inset-shadow-purple-500/5 shadow-purple-500/10 dark:shadow-purple-500/5 dark:bg-purple-950/40 [&>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
34
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'
35
+
'backdrop-blur-lg bg-fuchsia-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-fuchsia-700/10 dark:inset-shadow-fuchsia-500/5 shadow-fuchsia-500/10 dark:shadow-fuchsia-500/5 dark:bg-fuchsia-950/40 [&>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',
36
+
pink: 'backdrop-blur-lg bg-pink-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-pink-700/10 dark:inset-shadow-pink-500/5 shadow-pink-500/10 dark:shadow-pink-500/5 dark:bg-pink-950/40 [&>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',
37
+
rose: 'backdrop-blur-lg bg-rose-100/70 shadow-lg transform-all inset-shadow-sm inset-shadow-rose-700/10 dark:inset-shadow-rose-500/5 shadow-rose-500/10 dark:shadow-rose-500/5 dark:bg-rose-950/40 [&>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
38
}
39
39
},
40
40
defaultVariants: {
+2
-2
packages/base/src/lib/components/card/ImageCard.svelte
+2
-2
packages/base/src/lib/components/card/ImageCard.svelte
···
28
28
<div
29
29
class={cn(
30
30
'group relative flex w-full flex-col gap-5 transition-opacity duration-300 ease-in-out',
31
-
href || onclick ? 'hover:opacity-80' : '',
31
+
href || onclick ? '' : '',
32
32
className
33
33
)}
34
34
>
···
38
38
containerClasses="w-full rounded-2xl overflow-hidden"
39
39
class={[
40
40
'aspect-video w-full object-cover transition-all duration-500 ease-in-out',
41
-
href || onclick ? 'group-hover:scale-105' : ''
41
+
href || onclick ? 'group-hover:scale-101 group-hover:brightness-105' : ''
42
42
]}
43
43
></ImageContainer>
44
44
<div class="flex max-w-xl flex-col gap-2">
+3
-3
packages/base/src/lib/components/checkbox/checkbox.svelte
+3
-3
packages/base/src/lib/components/checkbox/checkbox.svelte
···
4
4
import { cn } from '../../utils';
5
5
6
6
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',
7
+
base: 'peer cursor-pointer box-content shrink-0 inline-flex items-center justify-center rounded-lg 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
8
variants: {
9
9
variant: {
10
10
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',
11
+
'border-accent-500/40 backdrop-blur-lg 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/50 dark:text-accent-500 dark:data-[state=checked]:border-accent-500/30 dark:data-[state=checked]:bg-accent-700/50 dark:data-[state=checked]:text-accent-200',
12
12
secondary:
13
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
14
},
15
15
sizeVariant: {
16
16
default: 'size-5',
17
-
sm: 'size-4',
17
+
sm: 'size-4 rounded-md',
18
18
lg: 'size-6'
19
19
}
20
20
},
+3
packages/base/src/lib/components/number-input/NumberInput.svelte
+3
packages/base/src/lib/components/number-input/NumberInput.svelte
+2
packages/base/src/lib/components/svercle/index.ts
+2
packages/base/src/lib/components/svercle/index.ts
+33
packages/base/src/lib/components/svercle/svercle-container.svelte
+33
packages/base/src/lib/components/svercle/svercle-container.svelte
···
1
+
<script lang="ts">
2
+
import type { Snippet } from 'svelte';
3
+
import Svercle from './svercle.svelte';
4
+
import { cn } from '../../utils';
5
+
6
+
let {
7
+
curve = 5,
8
+
anchor = 0,
9
+
fill = '#f00',
10
+
stroke = 'red',
11
+
children,
12
+
class: className,
13
+
...restProps
14
+
}: {
15
+
curve?: number;
16
+
anchor?: number;
17
+
fill?: string;
18
+
stroke?: string;
19
+
children?: Snippet;
20
+
class?: string;
21
+
} = $props();
22
+
</script>
23
+
24
+
<div
25
+
class={cn(
26
+
'relative grid h-full w-full place-items-center [&_svg]:absolute [&_svg]:left-0 [&_svg]:top-0 [&_svg]:z-[-1] [&_svg]:h-full [&_svg]:w-full',
27
+
className
28
+
)}
29
+
{...restProps}
30
+
>
31
+
<Svercle {curve} {anchor} {fill} {stroke} />
32
+
{@render children?.()}
33
+
</div>
+46
packages/base/src/lib/components/svercle/svercle.svelte
+46
packages/base/src/lib/components/svercle/svercle.svelte
···
1
+
<svelte:options namespace="svg" />
2
+
3
+
<script lang="ts">
4
+
let {
5
+
fill = '#fff',
6
+
curve = 5,
7
+
anchor = 0,
8
+
stroke = 'red'
9
+
}: { fill?: string; curve?: number; anchor?: number; stroke?: string } = $props();
10
+
11
+
const height = 1000;
12
+
const width = 1000;
13
+
const halfHeight = height / 2;
14
+
const halfWidth = width / 2;
15
+
16
+
const curveShiftW = Math.round(halfWidth * (1 - curve));
17
+
const curveShiftH = Math.round(halfHeight * (1 - curve));
18
+
const anchorShiftW = Math.round(halfWidth * anchor);
19
+
const anchorShiftH = Math.round(halfHeight * anchor);
20
+
21
+
const path = `
22
+
M 0,${halfHeight - anchorShiftH}
23
+
C 0,${curveShiftH - anchorShiftH} ${curveShiftW - anchorShiftW},0 ${halfWidth - anchorShiftW},0
24
+
S ${curveShiftW + anchorShiftW},0 ${halfWidth + anchorShiftW},0
25
+
${width},${curveShiftH - anchorShiftH} ${width},${halfHeight - anchorShiftH}
26
+
${width},${curveShiftH + anchorShiftH} ${width},${halfHeight + anchorShiftH}
27
+
${width - curveShiftW + anchorShiftW},${height} ${halfWidth + anchorShiftW},${height}
28
+
${width - curveShiftW - anchorShiftW},${height} ${halfWidth - anchorShiftW},${height}
29
+
0,${height - curveShiftH + anchorShiftH} 0,${halfHeight + anchorShiftH}
30
+
0,${height + curveShiftH - anchorShiftH} 0,${halfHeight - anchorShiftH}
31
+
`;
32
+
</script>
33
+
34
+
<svg
35
+
class="svercle-svg-element"
36
+
version="1.1"
37
+
xmlns="http://www.w3.org/2000/svg"
38
+
xmlns:xlink="http://www.w3.org/1999/xlink"
39
+
height="100%"
40
+
width="100%"
41
+
preserveAspectRatio="none"
42
+
viewBox="{-halfWidth * 0.2} {-halfHeight * 0.2} {width * 1.2} {height * 1.2}"
43
+
stroke-width="20"
44
+
>
45
+
<path {fill} d={path} {stroke} />
46
+
</svg>