[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
prettier
+300
-281
+22
-22
README.md
+22
-22
README.md
···
35
35
@plugin '@tailwindcss/forms';
36
36
37
37
@theme {
38
-
--color-base-50: var(--color-gray-50);
39
-
--color-base-100: var(--color-gray-100);
40
-
--color-base-200: var(--color-gray-200);
41
-
--color-base-300: var(--color-gray-300);
42
-
--color-base-400: var(--color-gray-400);
43
-
--color-base-500: var(--color-gray-500);
44
-
--color-base-600: var(--color-gray-600);
45
-
--color-base-700: var(--color-gray-700);
46
-
--color-base-800: var(--color-gray-800);
47
-
--color-base-900: var(--color-gray-900);
48
-
--color-base-950: var(--color-gray-950);
38
+
--color-base-50: var(--color-gray-50);
39
+
--color-base-100: var(--color-gray-100);
40
+
--color-base-200: var(--color-gray-200);
41
+
--color-base-300: var(--color-gray-300);
42
+
--color-base-400: var(--color-gray-400);
43
+
--color-base-500: var(--color-gray-500);
44
+
--color-base-600: var(--color-gray-600);
45
+
--color-base-700: var(--color-gray-700);
46
+
--color-base-800: var(--color-gray-800);
47
+
--color-base-900: var(--color-gray-900);
48
+
--color-base-950: var(--color-gray-950);
49
49
50
-
--color-accent-50: var(--color-blue-50);
51
-
--color-accent-100: var(--color-blue-100);
52
-
--color-accent-200: var(--color-blue-200);
53
-
--color-accent-300: var(--color-blue-300);
54
-
--color-accent-400: var(--color-blue-400);
55
-
--color-accent-500: var(--color-blue-500);
56
-
--color-accent-600: var(--color-blue-600);
57
-
--color-accent-700: var(--color-blue-700);
58
-
--color-accent-800: var(--color-blue-800);
59
-
--color-accent-900: var(--color-blue-900);
60
-
--color-accent-950: var(--color-blue-950);
50
+
--color-accent-50: var(--color-blue-50);
51
+
--color-accent-100: var(--color-blue-100);
52
+
--color-accent-200: var(--color-blue-200);
53
+
--color-accent-300: var(--color-blue-300);
54
+
--color-accent-400: var(--color-blue-400);
55
+
--color-accent-500: var(--color-blue-500);
56
+
--color-accent-600: var(--color-blue-600);
57
+
--color-accent-700: var(--color-blue-700);
58
+
--color-accent-800: var(--color-blue-800);
59
+
--color-accent-900: var(--color-blue-900);
60
+
--color-accent-950: var(--color-blue-950);
61
61
}
62
62
```
63
63
+1
-1
postcss.config.js
+1
-1
postcss.config.js
+79
-80
src/app.css
+79
-80
src/app.css
···
59
59
--base-950: var(--color-stone-950);
60
60
}
61
61
62
-
.red {
63
-
--accent-50: var(--color-red-50);
64
-
--accent-100: var(--color-red-100);
65
-
--accent-200: var(--color-red-200);
66
-
--accent-300: var(--color-red-300);
67
-
--accent-400: var(--color-red-400);
68
-
--accent-500: var(--color-red-500);
69
-
--accent-600: var(--color-red-600);
70
-
--accent-700: var(--color-red-700);
71
-
--accent-800: var(--color-red-800);
72
-
--accent-900: var(--color-red-900);
73
-
--accent-950: var(--color-red-950);
74
-
}
62
+
.red {
63
+
--accent-50: var(--color-red-50);
64
+
--accent-100: var(--color-red-100);
65
+
--accent-200: var(--color-red-200);
66
+
--accent-300: var(--color-red-300);
67
+
--accent-400: var(--color-red-400);
68
+
--accent-500: var(--color-red-500);
69
+
--accent-600: var(--color-red-600);
70
+
--accent-700: var(--color-red-700);
71
+
--accent-800: var(--color-red-800);
72
+
--accent-900: var(--color-red-900);
73
+
--accent-950: var(--color-red-950);
74
+
}
75
75
76
76
.orange {
77
77
--accent-50: var(--color-orange-50);
···
296
296
--accent-950: var(--color-rose-950);
297
297
}
298
298
299
-
.gray {
300
-
--base-50: var(--color-gray-50);
301
-
--base-100: var(--color-gray-100);
302
-
--base-200: var(--color-gray-200);
303
-
--base-300: var(--color-gray-300);
304
-
--base-400: var(--color-gray-400);
305
-
--base-500: var(--color-gray-500);
306
-
--base-600: var(--color-gray-600);
307
-
--base-700: var(--color-gray-700);
308
-
--base-800: var(--color-gray-800);
309
-
--base-900: var(--color-gray-900);
310
-
--base-950: var(--color-gray-950);
311
-
}
299
+
.gray {
300
+
--base-50: var(--color-gray-50);
301
+
--base-100: var(--color-gray-100);
302
+
--base-200: var(--color-gray-200);
303
+
--base-300: var(--color-gray-300);
304
+
--base-400: var(--color-gray-400);
305
+
--base-500: var(--color-gray-500);
306
+
--base-600: var(--color-gray-600);
307
+
--base-700: var(--color-gray-700);
308
+
--base-800: var(--color-gray-800);
309
+
--base-900: var(--color-gray-900);
310
+
--base-950: var(--color-gray-950);
311
+
}
312
312
313
-
.zinc {
314
-
--base-50: var(--color-zinc-50);
315
-
--base-100: var(--color-zinc-100);
316
-
--base-200: var(--color-zinc-200);
317
-
--base-300: var(--color-zinc-300);
318
-
--base-400: var(--color-zinc-400);
319
-
--base-500: var(--color-zinc-500);
320
-
--base-600: var(--color-zinc-600);
321
-
--base-700: var(--color-zinc-700);
322
-
--base-800: var(--color-zinc-800);
323
-
--base-900: var(--color-zinc-900);
324
-
--base-950: var(--color-zinc-950);
325
-
}
313
+
.zinc {
314
+
--base-50: var(--color-zinc-50);
315
+
--base-100: var(--color-zinc-100);
316
+
--base-200: var(--color-zinc-200);
317
+
--base-300: var(--color-zinc-300);
318
+
--base-400: var(--color-zinc-400);
319
+
--base-500: var(--color-zinc-500);
320
+
--base-600: var(--color-zinc-600);
321
+
--base-700: var(--color-zinc-700);
322
+
--base-800: var(--color-zinc-800);
323
+
--base-900: var(--color-zinc-900);
324
+
--base-950: var(--color-zinc-950);
325
+
}
326
326
327
-
.neutral {
328
-
--base-50: var(--color-neutral-50);
329
-
--base-100: var(--color-neutral-100);
330
-
--base-200: var(--color-neutral-200);
331
-
--base-300: var(--color-neutral-300);
332
-
--base-400: var(--color-neutral-400);
333
-
--base-500: var(--color-neutral-500);
334
-
--base-600: var(--color-neutral-600);
335
-
--base-700: var(--color-neutral-700);
336
-
--base-800: var(--color-neutral-800);
337
-
--base-900: var(--color-neutral-900);
338
-
--base-950: var(--color-neutral-950);
339
-
}
327
+
.neutral {
328
+
--base-50: var(--color-neutral-50);
329
+
--base-100: var(--color-neutral-100);
330
+
--base-200: var(--color-neutral-200);
331
+
--base-300: var(--color-neutral-300);
332
+
--base-400: var(--color-neutral-400);
333
+
--base-500: var(--color-neutral-500);
334
+
--base-600: var(--color-neutral-600);
335
+
--base-700: var(--color-neutral-700);
336
+
--base-800: var(--color-neutral-800);
337
+
--base-900: var(--color-neutral-900);
338
+
--base-950: var(--color-neutral-950);
339
+
}
340
340
341
-
.stone {
342
-
--base-50: var(--color-stone-50);
343
-
--base-100: var(--color-stone-100);
344
-
--base-200: var(--color-stone-200);
345
-
--base-300: var(--color-stone-300);
346
-
--base-400: var(--color-stone-400);
347
-
--base-500: var(--color-stone-500);
348
-
--base-600: var(--color-stone-600);
349
-
--base-700: var(--color-stone-700);
350
-
--base-800: var(--color-stone-800);
351
-
--base-900: var(--color-stone-900);
352
-
--base-950: var(--color-stone-950);
353
-
}
354
-
355
-
.slate {
356
-
--base-50: var(--color-slate-50);
357
-
--base-100: var(--color-slate-100);
358
-
--base-200: var(--color-slate-200);
359
-
--base-300: var(--color-slate-300);
360
-
--base-400: var(--color-slate-400);
361
-
--base-500: var(--color-slate-500);
362
-
--base-600: var(--color-slate-600);
363
-
--base-700: var(--color-slate-700);
364
-
--base-800: var(--color-slate-800);
365
-
--base-900: var(--color-slate-900);
366
-
--base-950: var(--color-slate-950);
367
-
}
368
-
341
+
.stone {
342
+
--base-50: var(--color-stone-50);
343
+
--base-100: var(--color-stone-100);
344
+
--base-200: var(--color-stone-200);
345
+
--base-300: var(--color-stone-300);
346
+
--base-400: var(--color-stone-400);
347
+
--base-500: var(--color-stone-500);
348
+
--base-600: var(--color-stone-600);
349
+
--base-700: var(--color-stone-700);
350
+
--base-800: var(--color-stone-800);
351
+
--base-900: var(--color-stone-900);
352
+
--base-950: var(--color-stone-950);
353
+
}
354
+
355
+
.slate {
356
+
--base-50: var(--color-slate-50);
357
+
--base-100: var(--color-slate-100);
358
+
--base-200: var(--color-slate-200);
359
+
--base-300: var(--color-slate-300);
360
+
--base-400: var(--color-slate-400);
361
+
--base-500: var(--color-slate-500);
362
+
--base-600: var(--color-slate-600);
363
+
--base-700: var(--color-slate-700);
364
+
--base-800: var(--color-slate-800);
365
+
--base-900: var(--color-slate-900);
366
+
--base-950: var(--color-slate-950);
367
+
}
369
368
}
+1
-1
src/app.html
+1
-1
src/app.html
···
64
64
}
65
65
</script>
66
66
</head>
67
-
<body data-sveltekit-preload-data="hover" class="bg-base-50 transition-colors dark:bg-base-950">
67
+
<body data-sveltekit-preload-data="hover" class="bg-base-50 dark:bg-base-950 transition-colors">
68
68
<div style="display: contents">%sveltekit.body%</div>
69
69
</body>
70
70
</html>
+5
-5
src/routes/+page.svelte
+5
-5
src/routes/+page.svelte
···
79
79
]}
80
80
>
81
81
<div class="w-full">
82
-
<Subheading class="text-pretty text-lg sm:text-xl sm:font-bold"
82
+
<Subheading class="text-lg text-pretty sm:text-xl sm:font-bold"
83
83
>Work in progress, please wait a few months for an actually working version...</Subheading
84
84
>
85
85
86
-
<Progress {progress} class="mb-6 mt-4" />
86
+
<Progress {progress} class="mt-4 mb-6" />
87
87
</div>
88
88
<div class="mt-4">
89
89
<div class="flex items-center space-x-2">
···
91
91
<Label
92
92
id="terms-label"
93
93
for="terms"
94
-
class="text-pretty text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
94
+
class="text-sm leading-none font-medium text-pretty peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
95
95
>
96
96
I don't care, just show me what you got
97
97
</Label>
···
127
127
<div class="flex w-full max-w-full flex-col items-start justify-center gap-2">
128
128
<Subheading>Me and my bros</Subheading>
129
129
130
-
<div class="mb-4 text-sm text-base-600 dark:text-base-400">
130
+
<div class="text-base-600 dark:text-base-400 mb-4 text-sm">
131
131
They don't actually know me :(
132
132
</div>
133
133
<AvatarGroup
···
230
230
</ScrollArea>
231
231
</div>
232
232
233
-
<Subheading class="mb-2 mt-8">Login here:</Subheading>
233
+
<Subheading class="mt-8 mb-2">Login here:</Subheading>
234
234
<div class="mt-2 flex gap-2">
235
235
<Input placeholder="Enter password" class="grow" />
236
236
+2
-2
src/lib/preview/AlertPreview.svelte
+2
-2
src/lib/preview/AlertPreview.svelte
···
6
6
7
7
<Subheading>Alerts</Subheading>
8
8
9
-
<Text class="mb-2 mt-4">Default Alert</Text>
9
+
<Text class="mt-4 mb-2">Default Alert</Text>
10
10
11
11
<Alert>
12
12
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
···
40
40
<AlertDescription>Alert Description</AlertDescription>
41
41
</Alert>
42
42
43
-
<Text class="mb-2 mt-4">Preset Alerts</Text>
43
+
<Text class="mt-4 mb-2">Preset Alerts</Text>
44
44
45
45
<Alert title="Warning alert" type="warning">
46
46
<span>Alert Description</span>
+2
-2
src/lib/preview/AvatarPreview.svelte
+2
-2
src/lib/preview/AvatarPreview.svelte
···
6
6
7
7
<Subheading>Avatar</Subheading>
8
8
9
-
<Text class="mb-2 mt-4">Single Avatar</Text>
9
+
<Text class="mt-4 mb-2">Single Avatar</Text>
10
10
11
11
<div class="flex items-center gap-2">
12
12
<Avatar fallback="AB" />
13
13
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" />
14
14
</div>
15
15
16
-
<Text class="mb-2 mt-4">Avatars Group</Text>
16
+
<Text class="mt-4 mb-2">Avatars Group</Text>
17
17
18
18
<AvatarGroup
19
19
users={[
+3
-3
src/lib/preview/BadgesPreview.svelte
+3
-3
src/lib/preview/BadgesPreview.svelte
···
6
6
7
7
<Subheading>Badges</Subheading>
8
8
9
-
<Text class="mb-2 mt-4">Primary</Text>
9
+
<Text class="mt-4 mb-2">Primary</Text>
10
10
<div class="flex items-center gap-2">
11
11
<Badge size="sm"
12
12
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
···
49
49
>
50
50
</div>
51
51
52
-
<Text class="mb-2 mt-4">Secondary</Text>
52
+
<Text class="mt-4 mb-2">Secondary</Text>
53
53
<div class="flex items-center gap-2">
54
54
<Badge size="sm" variant="secondary">Badge</Badge>
55
55
<Badge size="md" variant="secondary">Badge</Badge>
56
56
<Badge size="lg" variant="secondary">Badge</Badge>
57
57
</div>
58
58
59
-
<Text class="mb-2 mt-4">Colors</Text>
59
+
<Text class="mt-4 mb-2">Colors</Text>
60
60
61
61
<div class="flex flex-wrap items-center gap-2">
62
62
<Badge variant="red">Red</Badge>
+4
-4
src/lib/preview/CheckboxPreview.svelte
+4
-4
src/lib/preview/CheckboxPreview.svelte
···
7
7
8
8
<Subheading>Checkboxes</Subheading>
9
9
10
-
<Text class="mb-2 mt-4">Primary</Text>
10
+
<Text class="mt-4 mb-2">Primary</Text>
11
11
<div class="flex items-center gap-2">
12
12
<Checkbox sizeVariant="sm" variant="primary" />
13
13
<Checkbox sizeVariant="default" variant="primary" />
14
14
<Checkbox sizeVariant="lg" variant="primary" />
15
15
</div>
16
16
17
-
<Text class="mb-2 mt-4">Secondary</Text>
17
+
<Text class="mt-4 mb-2">Secondary</Text>
18
18
<div class="flex items-center gap-2">
19
19
<Checkbox sizeVariant="sm" variant="secondary" />
20
20
<Checkbox sizeVariant="default" variant="secondary" />
21
21
<Checkbox sizeVariant="lg" variant="secondary" />
22
22
</div>
23
23
24
-
<Text class="mb-2 mt-4">With Label</Text>
24
+
<Text class="mt-4 mb-2">With Label</Text>
25
25
<div class="flex items-center space-x-2">
26
26
<Checkbox id="terms" aria-labelledby="terms-label" variant="secondary" />
27
27
<Label
28
28
id="terms-label"
29
29
for="terms"
30
-
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
30
+
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
31
31
>
32
32
Yes, I agree to the terms and sell my soul (and no I didn't read the terms)
33
33
</Label>
+2
-2
src/lib/preview/ColorSelectPreview.svelte
+2
-2
src/lib/preview/ColorSelectPreview.svelte
···
6
6
7
7
<Subheading>Color Select</Subheading>
8
8
9
-
<Text class="mb-2 mt-4">Tailwind Classes</Text>
9
+
<Text class="mt-4 mb-2">Tailwind Classes</Text>
10
10
<ColorSelect
11
11
colors={[
12
12
{ class: 'bg-red-500', label: 'red' },
···
16
16
]}
17
17
/>
18
18
19
-
<Text class="mb-2 mt-4">Custom Colors</Text>
19
+
<Text class="mt-4 mb-2">Custom Colors</Text>
20
20
<ColorSelect
21
21
colors={[
22
22
{ value: '#690B22', label: 'red' },
+2
-2
src/lib/preview/GithubCornerPreview.svelte
+2
-2
src/lib/preview/GithubCornerPreview.svelte
···
6
6
<Subheading>Github Corner</Subheading>
7
7
8
8
<div
9
-
class="relative mt-6 h-96 w-full overflow-hidden rounded-2xl border border-base-300 p-6 dark:border-base-900"
9
+
class="border-base-300 dark:border-base-900 relative mt-6 h-96 w-full overflow-hidden rounded-2xl border p-6"
10
10
>
11
-
<div class="text-pretty pr-52 text-7xl font-bold text-base-950 dark:text-base-50">
11
+
<div class="text-base-950 dark:text-base-50 pr-52 text-7xl font-bold text-pretty">
12
12
My cool github project
13
13
</div>
14
14
<GithubCorner class="absolute" href="https://github.com/flo-bit/ui-kit" />
-1
src/lib/preview/ImagePreview.svelte
-1
src/lib/preview/ImagePreview.svelte
+2
-2
src/lib/preview/InputPreview.svelte
+2
-2
src/lib/preview/InputPreview.svelte
···
6
6
7
7
<Subheading>Input</Subheading>
8
8
9
-
<Text class="mb-2 mt-4">Primary</Text>
9
+
<Text class="mt-4 mb-2">Primary</Text>
10
10
11
11
<Input sizeVariant="sm" placeholder="Enter text here (small)" />
12
12
<Input placeholder="Enter text here (default)" />
13
13
<Input sizeVariant="lg" placeholder="Enter text here (large)" />
14
14
15
-
<Text class="mb-2 mt-4">Secondary</Text>
15
+
<Text class="mt-4 mb-2">Secondary</Text>
16
16
17
17
<Input variant="secondary" sizeVariant="sm" placeholder="Enter text here (small)" />
18
18
<Input variant="secondary" placeholder="Enter text here (default)" />
+4
-4
src/lib/preview/LineGraphPreview.svelte
+4
-4
src/lib/preview/LineGraphPreview.svelte
···
1
1
<script>
2
-
import Subheading from "$lib/components/heading/Subheading.svelte";
3
-
import LineGraph from "$lib/components/line-graph/LineGraph.svelte";
2
+
import Subheading from '$lib/components/heading/Subheading.svelte';
3
+
import LineGraph from '$lib/components/line-graph/LineGraph.svelte';
4
4
5
5
const data = [
6
6
{ x: new Date('2020-01-01'), value: 10 },
···
10
10
{ x: new Date('2020-04-04'), value: 20 },
11
11
{ x: new Date('2020-04-20'), value: 80 },
12
12
{ x: new Date('2020-05-05'), value: 50 },
13
-
{ x: new Date('2020-05-20'), value: 10 },
13
+
{ x: new Date('2020-05-20'), value: 10 }
14
14
];
15
15
</script>
16
16
17
17
<Subheading class="mb-6">Line Graph</Subheading>
18
18
19
-
<LineGraph data={data} />
19
+
<LineGraph {data} />
+2
-2
src/lib/preview/LoadersPreview.svelte
+2
-2
src/lib/preview/LoadersPreview.svelte
···
14
14
</script>
15
15
16
16
<Subheading class="mb-2">Loader</Subheading>
17
-
<Text class="mb-2 mt-4">Bar Loader</Text>
17
+
<Text class="mt-4 mb-2">Bar Loader</Text>
18
18
19
19
<Progress {progress} />
20
20
21
-
<Text class="mb-2 mt-4">Pulse Loader</Text>
21
+
<Text class="mt-4 mb-2">Pulse Loader</Text>
22
22
23
23
<PulseLoader />
+1
-1
src/lib/preview/PhonePreview.svelte
+1
-1
src/lib/preview/PhonePreview.svelte
···
6
6
<Subheading class="mb-4">Phone</Subheading>
7
7
8
8
<Phone>
9
-
<div class="flex h-full w-full items-center justify-center bg-accent-200 p-8">
9
+
<div class="bg-accent-200 flex h-full w-full items-center justify-center p-8">
10
10
<div class="text-3xl font-bold text-black">Hello there</div>
11
11
</div>
12
12
</Phone>
+3
-2
src/lib/preview/SelectTheme.svelte
+3
-2
src/lib/preview/SelectTheme.svelte
···
16
16
import Text from '$lib/components/text/Text.svelte';
17
17
import { onMount, tick } from 'svelte';
18
18
19
-
20
19
let accentColors = [
21
20
{ class: 'bg-red-500', label: 'red' },
22
21
{ class: 'bg-orange-500', label: 'orange' },
···
78
77
79
78
localStorage.setItem('accentColor', JSON.stringify(color.label));
80
79
81
-
window.dispatchEvent(new CustomEvent('theme-changed', { detail: { accentColor: color.label } }));
80
+
window.dispatchEvent(
81
+
new CustomEvent('theme-changed', { detail: { accentColor: color.label } })
82
+
);
82
83
}}
83
84
/>
84
85
+2
-2
src/lib/preview/SliderPreview.svelte
+2
-2
src/lib/preview/SliderPreview.svelte
+2
-2
src/lib/preview/TextareaPreview.svelte
+2
-2
src/lib/preview/TextareaPreview.svelte
···
6
6
7
7
<Subheading>Textarea</Subheading>
8
8
9
-
<Text class="mb-2 mt-4">Primary</Text>
9
+
<Text class="mt-4 mb-2">Primary</Text>
10
10
11
11
<Textarea placeholder="Enter text here (small)" sizeVariant="sm" />
12
12
<Textarea placeholder="Enter text here (default)" />
13
13
<Textarea placeholder="Enter text here (large)" sizeVariant="lg" />
14
14
15
-
<Text class="mb-2 mt-4">Secondary</Text>
15
+
<Text class="mt-4 mb-2">Secondary</Text>
16
16
17
17
<Textarea placeholder="Enter text here (small)" variant="secondary" sizeVariant="sm" />
18
18
<Textarea placeholder="Enter text here (default)" variant="secondary" />
+2
-2
src/lib/preview/TooltipPreview.svelte
+2
-2
src/lib/preview/TooltipPreview.svelte
···
6
6
7
7
<Subheading>Tooltip</Subheading>
8
8
9
-
<Text class="mb-2 mt-4">Primary</Text>
9
+
<Text class="mt-4 mb-2">Primary</Text>
10
10
<div class="flex w-full flex-col items-start gap-2 py-12">
11
11
<Tooltip triggerText="Hover me" triggerVariant="primary" withContext>Hello there!</Tooltip>
12
12
</div>
13
13
14
-
<Text class="mb-2 mt-4">Secondary</Text>
14
+
<Text class="mt-4 mb-2">Secondary</Text>
15
15
<div class="flex w-full flex-col items-start gap-2 py-12">
16
16
<Tooltip triggerText="Hover me" triggerVariant="secondary" withContext>Hello there!</Tooltip>
17
17
</div>
+2
-2
src/lib/preview/VideoPlayerPreview.svelte
+2
-2
src/lib/preview/VideoPlayerPreview.svelte
···
10
10
11
11
<Subheading>Video Player</Subheading>
12
12
13
-
<Text class="mb-4 mt-4">Fullscreen Video Player</Text>
13
+
<Text class="mt-4 mb-4">Fullscreen Video Player</Text>
14
14
<Button onclick={() => videoPlayer.show('https://www.youtube.com/watch?v=u1ZB_rGFyeU')}
15
15
>Show Video</Button
16
16
>
17
17
18
-
<Text class="mb-4 mt-8">Inline Video Player</Text>
18
+
<Text class="mt-8 mb-4">Inline Video Player</Text>
19
19
20
20
<VideoPlayer id="https://www.youtube.com/watch?v=u1ZB_rGFyeU" />
21
21
+6
-2
src/routes/components/+layout.svelte
+6
-2
src/routes/components/+layout.svelte
···
33
33
<div class="flex items-center gap-4">
34
34
<Popover.Root>
35
35
<Popover.Trigger class="flex items-center -space-x-2">
36
-
<div class="bg-accent-500 border-accent-700 dark:border-accent-400 z-10 size-6 rounded-full border"></div>
36
+
<div
37
+
class="bg-accent-500 border-accent-700 dark:border-accent-400 z-10 size-6 rounded-full border"
38
+
></div>
37
39
38
-
<div class="bg-base-500 border-base-700 dark:border-base-400 size-6 rounded-full border"></div>
40
+
<div
41
+
class="bg-base-500 border-base-700 dark:border-base-400 size-6 rounded-full border"
42
+
></div>
39
43
</Popover.Trigger>
40
44
<Popover.Content>
41
45
<SelectTheme showTitle={false} />
+2
-2
src/lib/components/alert/alert-title.svelte
+2
-2
src/lib/components/alert/alert-title.svelte
···
2
2
import type { HTMLAttributes } from 'svelte/elements';
3
3
import type { WithElementRef } from 'bits-ui';
4
4
import { cn } from '$lib/utils';
5
-
5
+
6
6
let {
7
7
ref = $bindable(null),
8
8
class: className,
···
18
18
role="heading"
19
19
aria-level={level}
20
20
bind:this={ref}
21
-
class={cn('mb-2 text-sm font-medium leading-none last:mb-0', className)}
21
+
class={cn('mb-2 text-sm leading-none font-medium last:mb-0', className)}
22
22
{...restProps}
23
23
>
24
24
{@render children?.()}
+6
-1
src/lib/components/alert/alert.svelte
+6
-1
src/lib/components/alert/alert.svelte
···
76
76
}
77
77
</script>
78
78
79
-
<div bind:this={ref} class={cn(alertVariants({ variant: variant ?? 'default' }), className)} {...restProps} role="alert">
79
+
<div
80
+
bind:this={ref}
81
+
class={cn(alertVariants({ variant: variant ?? 'default' }), className)}
82
+
{...restProps}
83
+
role="alert"
84
+
>
80
85
{#if type === 'warning'}
81
86
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
82
87
<path
+1
-1
src/lib/components/avatar/Avatar.svelte
+1
-1
src/lib/components/avatar/Avatar.svelte
···
30
30
31
31
<AvatarPrimitive.Root
32
32
class={cn(
33
-
'relative flex size-10 shrink-0 overflow-hidden rounded-full border border-base-200 bg-base-100 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50',
33
+
'border-base-200 bg-base-100 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50 relative flex size-10 shrink-0 overflow-hidden rounded-full border',
34
34
className
35
35
)}
36
36
{...restProps}
+1
-1
src/lib/components/avatar/AvatarGroup.svelte
+1
-1
src/lib/components/avatar/AvatarGroup.svelte
+1
-1
src/lib/components/badge/Badge.svelte
+1
-1
src/lib/components/badge/Badge.svelte
···
1
1
<script lang="ts" module>
2
2
import { type VariantProps, tv } from 'tailwind-variants';
3
3
import { cn } from '$lib/utils';
4
-
4
+
5
5
export const badgeVariants = tv({
6
6
base: 'inline-flex items-center justify-center whitespace-nowrap rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 duration-300 active:duration-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',
7
7
variants: {
+3
-3
src/lib/components/color-select/ColorSelect.svelte
+3
-3
src/lib/components/color-select/ColorSelect.svelte
···
34
34
{#each colors as color}
35
35
<button
36
36
class={cn(
37
-
'peer cursor-pointer items-center justify-center rounded-full p-0.5 outline-offset-2 outline-base-900 transition-all duration-100 focus:outline-2 focus:outline-offset-2 focus:outline-base-900 dark:outline-base-100 dark:focus:outline-base-100',
38
-
'size-8 rounded-full border border-base-600 border-opacity-30 transition-all dark:border-base-400 dark:border-opacity-30',
37
+
'peer outline-base-900 focus:outline-base-900 dark:outline-base-100 dark:focus:outline-base-100 cursor-pointer items-center justify-center rounded-full p-0.5 outline-offset-2 transition-all duration-100 focus:outline-2 focus:outline-offset-2',
38
+
'border-base-600 border-opacity-30 dark:border-base-400 dark:border-opacity-30 size-8 rounded-full border transition-all',
39
39
selected.label === color.label
40
-
? 'bg-opacity-100 outline-2 group-focus-within:outline-base-500 focus:group-focus-within:outline-base-900 dark:group-focus-within:outline-base-400 dark:focus:group-focus-within:outline-base-100'
40
+
? 'bg-opacity-100 group-focus-within:outline-base-500 focus:group-focus-within:outline-base-900 dark:group-focus-within:outline-base-400 dark:focus:group-focus-within:outline-base-100 outline-2'
41
41
: 'opacity-90 outline-0 hover:opacity-100 focus:opacity-100',
42
42
colorsClass,
43
43
color.class
+1
-1
src/lib/components/depth3d/Depth3D.svelte
+1
-1
src/lib/components/depth3d/Depth3D.svelte
···
32
32
src={sceneProps.image.image}
33
33
alt=""
34
34
class={cn(
35
-
'h-80 w-80 rounded-2xl border border-base-400 bg-base-100 object-cover dark:border-base-700 dark:bg-base-900',
35
+
'border-base-400 bg-base-100 dark:border-base-700 dark:bg-base-900 h-80 w-80 rounded-2xl border object-cover',
36
36
className
37
37
)}
38
38
/>
+4
-2
src/lib/components/excalidraw/Excalidraw.svelte
+4
-2
src/lib/components/excalidraw/Excalidraw.svelte
···
83
83
{@html modifiedSvg}
84
84
</div>
85
85
{#if caption}
86
-
<figcaption class={cn('mt-4 text-center text-xs text-base-700 dark:text-base-300', captionClass)}>
86
+
<figcaption
87
+
class={cn('text-base-700 dark:text-base-300 mt-4 text-center text-xs', captionClass)}
88
+
>
87
89
{caption}
88
90
</figcaption>
89
91
{/if}
···
91
93
92
94
<noscript>
93
95
<div
94
-
class="w-full rounded-2xl border border-base-200 bg-base-100 p-4 text-sm text-base-700 dark:border-base-700 dark:bg-base-900 dark:text-base-300"
96
+
class="border-base-200 bg-base-100 text-base-700 dark:border-base-700 dark:bg-base-900 dark:text-base-300 w-full rounded-2xl border p-4 text-sm"
95
97
>
96
98
JavaScript is required to view this content.
97
99
</div>
+1
-1
src/lib/components/github-corner/GithubCorner.svelte
+1
-1
src/lib/components/github-corner/GithubCorner.svelte
···
9
9
<a
10
10
{target}
11
11
class={cn(
12
-
'github-corner fixed -right-1 -top-1 z-50 fill-accent-600 text-base-50 dark:fill-accent-500 dark:text-base-950',
12
+
'github-corner fill-accent-600 text-base-50 dark:fill-accent-500 dark:text-base-950 fixed -top-1 -right-1 z-50',
13
13
className
14
14
)}
15
15
{...restProps}
+1
-1
src/lib/components/heading/Heading.svelte
+1
-1
src/lib/components/heading/Heading.svelte
···
17
17
<svelte:element
18
18
this={'h' + level}
19
19
bind:this={ref}
20
-
class={cn('text-2xl font-semibold text-base-900 dark:text-base-50', className)}
20
+
class={cn('text-base-900 dark:text-base-50 text-2xl font-semibold', className)}
21
21
{...restProps}
22
22
>
23
23
{@render children?.()}
+1
-1
src/lib/components/heading/Subheading.svelte
+1
-1
src/lib/components/heading/Subheading.svelte
···
17
17
<svelte:element
18
18
this={'h' + level}
19
19
bind:this={ref}
20
-
class={cn('text-base font-semibold text-base-900 dark:text-base-50 sm:text-lg', className)}
20
+
class={cn('text-base-900 dark:text-base-50 text-base font-semibold sm:text-lg', className)}
21
21
{...restProps}
22
22
>
23
23
{@render children?.()}
+2
-2
src/lib/components/label/Label.svelte
+2
-2
src/lib/components/label/Label.svelte
···
1
1
<script lang="ts">
2
2
import { Label as LabelPrimitive } from 'bits-ui';
3
3
import { cn } from '$lib/utils';
4
-
4
+
5
5
let {
6
6
ref = $bindable(null),
7
7
class: className,
···
12
12
<LabelPrimitive.Root
13
13
bind:ref
14
14
class={cn(
15
-
'text-sm font-medium leading-none text-base-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-base-50',
15
+
'text-base-900 dark:text-base-50 text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
16
16
className
17
17
)}
18
18
{...restProps}
+60
-52
src/lib/components/line-graph/LineGraph.svelte
+60
-52
src/lib/components/line-graph/LineGraph.svelte
···
8
8
import { format } from 'date-fns';
9
9
10
10
const defaultValueFormat = (value: any) => {
11
-
return formatDate(value, PeriodType.Month, { variant: 'short' })
11
+
return formatDate(value, PeriodType.Month, { variant: 'short' });
12
12
};
13
13
14
14
let { data } = $props();
15
15
</script>
16
16
17
-
<div class="h-44 w-full overflow-visible p-4">
18
-
<Chart
19
-
data={data}
20
-
xScale={scaleTime()}
21
-
x="x"
22
-
y="value"
23
-
yDomain={[0, null]}
24
-
yNice
25
-
tooltip={{ mode: 'bisect-x' }}
17
+
<div class="h-44 w-full overflow-visible p-4">
18
+
<Chart
19
+
{data}
20
+
xScale={scaleTime()}
21
+
x="x"
22
+
y="value"
23
+
yDomain={[0, null]}
24
+
yNice
25
+
tooltip={{ mode: 'bisect-x' }}
26
+
>
27
+
<Svg>
28
+
<Axis
29
+
placement="left"
30
+
grid={{ class: 'stroke-accent-700/10' }}
31
+
tickLabelProps={{
32
+
rotate: 315,
33
+
textAnchor: 'end',
34
+
class: 'fill-accent-700 dark:fill-accent-600 font-medium text-xs'
35
+
}}
36
+
ticks={4}
37
+
classes={{
38
+
tickLabel: 'pl-4'
39
+
}}
40
+
/>
41
+
42
+
<Axis
43
+
placement="bottom"
44
+
tickLabelProps={{
45
+
class: 'fill-accent-700 dark:fill-accent-600 font-medium text-xs'
46
+
}}
47
+
rule
48
+
format={defaultValueFormat}
49
+
ticks={Math.min(data.length, 10)}
50
+
/>
51
+
<Spline
52
+
class="stroke-accent-500 fill-transparent stroke-4 [stroke-linecap:round]"
53
+
curve={curveCatmullRom}
54
+
/>
55
+
<Highlight
56
+
lines
57
+
points={{
58
+
class:
59
+
'fill-transparent outline-accent-700 dark:outline-accent-200 outline-4 rounded-full'
60
+
}}
61
+
/>
62
+
</Svg>
63
+
64
+
<Tooltip.Root
65
+
let:data
66
+
class="border-base-300 bg-base-200/80 dark:border-base-800 dark:bg-base-900/80 rounded-2xl border py-2 backdrop-blur-xs"
26
67
>
27
-
<Svg>
28
-
<Axis
29
-
placement="left"
30
-
grid={{ class: 'stroke-accent-700/10' }}
31
-
tickLabelProps={{
32
-
rotate: 315,
33
-
textAnchor: 'end',
34
-
class: 'fill-accent-700 dark:fill-accent-600 font-medium text-xs'
35
-
}}
36
-
ticks={4}
37
-
classes={{
38
-
tickLabel: 'pl-4'
39
-
}}
40
-
/>
41
-
42
-
<Axis
43
-
placement="bottom"
44
-
tickLabelProps={{
45
-
class: 'fill-accent-700 dark:fill-accent-600 font-medium text-xs'
46
-
}}
47
-
rule
48
-
format={defaultValueFormat}
49
-
ticks={Math.min(data.length, 10)}
50
-
/>
51
-
<Spline class="stroke-4 [stroke-linecap:round] stroke-accent-500 fill-transparent" curve={curveCatmullRom} />
52
-
<Highlight lines points={{ class: 'fill-transparent outline-accent-700 dark:outline-accent-200 outline-4 rounded-full' }} />
53
-
</Svg>
54
-
55
-
<Tooltip.Root let:data class="border-base-300 bg-base-200/80 dark:border-base-800 dark:bg-base-900/80 rounded-2xl border py-2 backdrop-blur-xs">
56
-
<Tooltip.Header class="text-accent-600 border-b-0 text-xs font-medium"
57
-
>{format(data.x, 'MMMM do')}</Tooltip.Header
58
-
>
59
-
<Tooltip.List>
60
-
<Tooltip.Item
61
-
label=""
62
-
value={data.value}
63
-
class="text-accent-500 font-bold flex gap-2"
64
-
/>
65
-
</Tooltip.List>
66
-
</Tooltip.Root>
67
-
</Chart>
68
-
</div>
68
+
<Tooltip.Header class="text-accent-600 border-b-0 text-xs font-medium"
69
+
>{format(data.x, 'MMMM do')}</Tooltip.Header
70
+
>
71
+
<Tooltip.List>
72
+
<Tooltip.Item label="" value={data.value} class="text-accent-500 flex gap-2 font-bold" />
73
+
</Tooltip.List>
74
+
</Tooltip.Root>
75
+
</Chart>
76
+
</div>
+7
-7
src/lib/components/phone/Phone.svelte
+7
-7
src/lib/components/phone/Phone.svelte
···
2
2
const { children } = $props();
3
3
</script>
4
4
5
-
<div class="relative mx-auto h-[712px] w-[350px] max-w-full rounded-[60px] bg-accent-500">
6
-
<div class="absolute -left-0.5 top-20 h-8 w-3 rounded-xs bg-accent-500"></div>
7
-
<div class="absolute -left-[3px] top-[140px] h-14 w-3 rounded-xs bg-accent-500"></div>
8
-
<div class="absolute -left-[3px] top-[210px] h-14 w-3 rounded-xs bg-accent-500"></div>
9
-
<div class="absolute -right-[3px] top-[180px] h-20 w-3 rounded-xs bg-accent-500"></div>
5
+
<div class="bg-accent-500 relative mx-auto h-[712px] w-[350px] max-w-full rounded-[60px]">
6
+
<div class="bg-accent-500 absolute top-20 -left-0.5 h-8 w-3 rounded-xs"></div>
7
+
<div class="bg-accent-500 absolute top-[140px] -left-[3px] h-14 w-3 rounded-xs"></div>
8
+
<div class="bg-accent-500 absolute top-[210px] -left-[3px] h-14 w-3 rounded-xs"></div>
9
+
<div class="bg-accent-500 absolute top-[180px] -right-[3px] h-20 w-3 rounded-xs"></div>
10
10
11
11
<div class="absolute top-[18px] z-10 flex w-full justify-center">
12
12
<div class="h-7 w-24 rounded-full bg-black"></div>
13
13
</div>
14
14
15
-
<div class="absolute -right-[3px] top-[180px] h-20 w-3 rounded-xs bg-accent-500"></div>
15
+
<div class="bg-accent-500 absolute top-[180px] -right-[3px] h-20 w-3 rounded-xs"></div>
16
16
17
17
<div class="absolute inset-0 h-full w-full p-3">
18
-
<div class="relative h-full w-full overflow-hidden rounded-[50px] bg-accent-200">
18
+
<div class="bg-accent-200 relative h-full w-full overflow-hidden rounded-[50px]">
19
19
{@render children?.()}
20
20
</div>
21
21
</div>
+3
-3
src/lib/components/popover/index.ts
+3
-3
src/lib/components/popover/index.ts
···
1
-
import { Popover as PopoverPrimitive } from "bits-ui";
2
-
import Content from "./popover-content.svelte";
1
+
import { Popover as PopoverPrimitive } from 'bits-ui';
2
+
import Content from './popover-content.svelte';
3
3
const Root = PopoverPrimitive.Root;
4
4
const Trigger = PopoverPrimitive.Trigger;
5
5
const Close = PopoverPrimitive.Close;
···
13
13
Root as Popover,
14
14
Content as PopoverContent,
15
15
Trigger as PopoverTrigger,
16
-
Close as PopoverClose,
16
+
Close as PopoverClose
17
17
};
+3
-3
src/lib/components/progress/Progress.svelte
+3
-3
src/lib/components/progress/Progress.svelte
···
27
27
<ProgressPrimitive.Root
28
28
bind:ref
29
29
class={cn(
30
-
'relative h-2 w-full overflow-hidden rounded-2xl bg-base-100 dark:bg-base-900',
30
+
'bg-base-100 dark:bg-base-900 relative h-2 w-full overflow-hidden rounded-2xl',
31
31
className
32
32
)}
33
33
{value}
···
36
36
>
37
37
<div
38
38
class={cn(
39
-
'absolute h-full w-full rounded-2xl border border-base-300 dark:border-base-800',
39
+
'border-base-300 dark:border-base-800 absolute h-full w-full rounded-2xl border',
40
40
backgroundClass
41
41
)}
42
42
></div>
43
43
44
44
<div
45
45
class={cn(
46
-
'absolute h-full w-full rounded-2xl border-accent-600/50 bg-accent-500/50 transition-all duration-300 ease-in-out dark:border-accent-600/50 dark:bg-accent-900/70',
46
+
'border-accent-600/50 bg-accent-500/50 dark:border-accent-600/50 dark:bg-accent-900/70 absolute h-full w-full rounded-2xl transition-all duration-300 ease-in-out',
47
47
progress > 0 ? 'border' : '',
48
48
progressClass
49
49
)}
+3
-3
src/lib/components/pulse-loader/PulseLoader.svelte
+3
-3
src/lib/components/pulse-loader/PulseLoader.svelte
···
12
12
</script>
13
13
14
14
<div class={cn('relative inline-flex size-3', className)} {...restProps} bind:this={ref}>
15
-
<div class="-z-10 h-full w-full rounded-full border border-accent-600/40 bg-accent-600/40"></div>
16
-
<div class="absolute inset-0 h-full w-full animate-ping rounded-full bg-accent-500/50"></div>
15
+
<div class="border-accent-600/40 bg-accent-600/40 -z-10 h-full w-full rounded-full border"></div>
16
+
<div class="bg-accent-500/50 absolute inset-0 h-full w-full animate-ping rounded-full"></div>
17
17
<div
18
-
class="absolute inset-0 z-10 h-full w-full animate-pulse rounded-full border border-accent-500/50 bg-accent-500/50"
18
+
class="border-accent-500/50 bg-accent-500/50 absolute inset-0 z-10 h-full w-full animate-pulse rounded-full border"
19
19
></div>
20
20
</div>
+4
-4
src/lib/components/quote/Quote.svelte
+4
-4
src/lib/components/quote/Quote.svelte
···
48
48
<div class="h-24 w-24 shrink-0 md:h-32 md:w-32">
49
49
<AvatarPrimitive.Root
50
50
class={cn(
51
-
'relative flex h-24 w-24 shrink-0 overflow-hidden rounded-2xl border border-base-200 bg-base-100 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50 md:h-32 md:w-32',
51
+
'border-base-200 bg-base-100 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50 relative flex h-24 w-24 shrink-0 overflow-hidden rounded-2xl border md:h-32 md:w-32',
52
52
className
53
53
)}
54
54
>
55
55
{#if imageUseThemeColor}
56
-
<div class="absolute inset-0 z-20 size-full bg-accent-500/30"></div>
56
+
<div class="bg-accent-500/30 absolute inset-0 z-20 size-full"></div>
57
57
{/if}
58
58
{#if author?.src}
59
59
<AvatarPrimitive.Image
···
74
74
</AvatarPrimitive.Root>
75
75
</div>
76
76
<div class="flex flex-col gap-2">
77
-
<blockquote class="text-lg font-medium text-base-900 dark:text-base-50">
77
+
<blockquote class="text-base-900 dark:text-base-50 text-lg font-medium">
78
78
<p>
79
79
"{quote}"
80
80
</p>
81
81
</blockquote>
82
82
83
83
<div class="flex items-center gap-2 text-sm">
84
-
<div class="font-medium text-accent-600 dark:text-accent-500">{author?.name}</div>
84
+
<div class="text-accent-600 dark:text-accent-500 font-medium">{author?.name}</div>
85
85
86
86
<div class="text-base-600 dark:text-base-400">{author?.role}</div>
87
87
</div>
+2
-2
src/lib/components/ring-chart/RingChart.svelte
+2
-2
src/lib/components/ring-chart/RingChart.svelte
+2
-2
src/lib/components/scroll-area/ScrollArea.svelte
+2
-2
src/lib/components/scroll-area/ScrollArea.svelte
···
33
33
<ScrollArea.Scrollbar
34
34
{orientation}
35
35
class={cn(
36
-
'z-10 flex touch-none select-none transition-colors',
36
+
'z-10 flex touch-none transition-colors select-none',
37
37
orientation === 'vertical' && 'h-full w-2 border-l border-l-transparent p-px',
38
38
orientation === 'horizontal' && 'h-2 w-full border-t border-t-transparent p-px',
39
39
className
···
42
42
>
43
43
<ScrollArea.Thumb
44
44
class={[
45
-
'relative rounded-full bg-base-300 transition-colors hover:bg-base-400 dark:bg-base-700 dark:hover:bg-base-600',
45
+
'bg-base-300 hover:bg-base-400 dark:bg-base-700 dark:hover:bg-base-600 relative rounded-full transition-colors',
46
46
orientation === 'vertical' && 'flex-1'
47
47
]}
48
48
/>
+2
-2
src/lib/components/select/Select.svelte
+2
-2
src/lib/components/select/Select.svelte
···
26
26
<Toolbar.Root
27
27
bind:ref
28
28
class={cn(
29
-
'rounded-full border-accent-300/10 bg-accent-300/5 dark:border-accent-600/5 dark:bg-accent-700/5 flex gap-4 min-w-max items-center justify-center border',
29
+
'border-accent-300/10 bg-accent-300/5 dark:border-accent-600/5 dark:bg-accent-700/5 flex min-w-max items-center justify-center gap-4 rounded-full border',
30
30
className
31
31
)}
32
32
{...restProps}
···
36
36
<Toolbar.GroupItem
37
37
aria-label="align left"
38
38
value={typeof item === 'string' ? item : item.value}
39
-
class="cursor-pointer rounded-2xl p-1 text-base-600 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 px-2 data-[state=on]:outline outline-accent-200 dark:outline-accent-900/50 data-[state=on]:text-accent-600 dark:data-[state=on]:text-accent-400 dark:data-[state=on]:bg-accent-700/10 data-[state=on]:bg-accent-500/10 inline-flex items-center justify-center transition-all"
39
+
class="text-base-600 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 outline-accent-200 dark:outline-accent-900/50 data-[state=on]:text-accent-600 dark:data-[state=on]:text-accent-400 dark:data-[state=on]:bg-accent-700/10 data-[state=on]:bg-accent-500/10 inline-flex cursor-pointer items-center justify-center rounded-2xl p-1 px-2 transition-all data-[state=on]:outline"
40
40
>
41
41
{typeof item === 'string' ? item : item.label}
42
42
</Toolbar.GroupItem>
+2
-2
src/lib/components/slider/index.ts
+2
-2
src/lib/components/slider/index.ts
+7
-6
src/lib/components/slider/slider.svelte
+7
-6
src/lib/components/slider/slider.svelte
···
20
20
bind:value={value as never}
21
21
{orientation}
22
22
class={cn(
23
-
"relative flex touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
23
+
"relative flex touch-none items-center select-none data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
24
24
className
25
25
)}
26
26
{...restProps}
···
28
28
{#snippet children({ thumbs })}
29
29
<span
30
30
data-orientation={orientation}
31
-
class="relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
31
+
class="relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full data-[orientation='vertical']:w-2"
32
32
>
33
-
34
-
<div class="bg-base-300/30 rounded-full dark:bg-base-800 border border-base-400/50 dark:border-base-700 absolute inset-0"></div>
33
+
<div
34
+
class="bg-base-300/30 dark:bg-base-800 border-base-400/50 dark:border-base-700 absolute inset-0 rounded-full border"
35
+
></div>
35
36
36
37
<SliderPrimitive.Range
37
-
class="absolute bg-accent-400 rounded-full dark:bg-accent-600 data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
38
+
class="bg-accent-400 dark:bg-accent-600 absolute rounded-full data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
38
39
/>
39
40
</span>
40
41
{#each thumbs as thumb}
41
42
<SliderPrimitive.Thumb
42
43
index={thumb}
43
-
class="block size-6 rounded-full border-2 border-accent-400 dark:border-accent-600 bg-accent-600 dark:bg-accent-800 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-400 disabled:pointer-events-none disabled:opacity-50"
44
+
class="border-accent-400 dark:border-accent-600 bg-accent-600 dark:bg-accent-800 focus-visible:outline-accent-700 dark:focus-visible:outline-accent-400 block size-6 rounded-full border-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50"
44
45
/>
45
46
{/each}
46
47
{/snippet}
+2
-2
src/lib/components/star-rating/StarRating.svelte
+2
-2
src/lib/components/star-rating/StarRating.svelte
···
37
37
{#each Array.from({ length: 5 }).map((_, i) => i + 1) as i}
38
38
<button
39
39
class={cn(
40
-
'group rounded-xl cursor-pointer focus-visible:outline-2 focus-visible:outline-base-900 dark:focus-visible:outline-base-100',
40
+
'group focus-visible:outline-base-900 dark:focus-visible:outline-base-100 cursor-pointer rounded-xl focus-visible:outline-2',
41
41
buttonClasses
42
42
)}
43
43
onclick={() => (rating = i)}
···
82
82
<svg
83
83
class={cn(
84
84
size,
85
-
'shrink-0 stroke-base-400 text-base-100 dark:stroke-base-700 dark:text-base-800',
85
+
'stroke-base-400 text-base-100 dark:stroke-base-700 dark:text-base-800 shrink-0',
86
86
i <= rating &&
87
87
'stroke-accent-600 text-accent-400 dark:stroke-accent-500/80 dark:text-accent-500/50',
88
88
svgClasses
+2
-2
src/lib/components/switch/index.ts
+2
-2
src/lib/components/switch/index.ts
+4
-4
src/lib/components/switch/switch.svelte
+4
-4
src/lib/components/switch/switch.svelte
···
1
1
<script lang="ts">
2
-
import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui";
3
-
import { cn } from "$lib/utils";
2
+
import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
3
+
import { cn } from '$lib/utils';
4
4
5
5
let {
6
6
ref = $bindable(null),
···
14
14
bind:ref
15
15
bind:checked
16
16
class={cn(
17
-
"focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=checked]:bg-accent-500/30 dark:data-[state=checked]:bg-accent-500/20 data-[state=checked]:border-accent-500/30 data-[state=unchecked]:bg-base-500/20 data-[state=unchecked]:border-base-400/30 peer inline-flex h-6 w-10.5 shrink-0 cursor-pointer items-center rounded-full border transition-all focus-visible:outline-base-900 hover:scale-105 disabled:hover:scale-100 dark:focus-visible:outline-base-100 disabled:cursor-not-allowed disabled:opacity-50",
17
+
'data-[state=checked]:bg-accent-500/30 dark:data-[state=checked]:bg-accent-500/20 data-[state=checked]:border-accent-500/30 data-[state=unchecked]:bg-base-500/20 data-[state=unchecked]:border-base-400/30 peer focus-visible:outline-base-900 dark:focus-visible:outline-base-100 inline-flex h-6 w-10.5 shrink-0 cursor-pointer items-center rounded-full border transition-all hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100',
18
18
className
19
19
)}
20
20
{...restProps}
21
21
>
22
22
<SwitchPrimitive.Thumb
23
23
class={cn(
24
-
"bg-base-500 data-[state=checked]:bg-accent-600 dark:bg-base-600 dark:data-[state=checked]:bg-accent-500 pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
24
+
'bg-base-500 data-[state=checked]:bg-accent-600 dark:bg-base-600 dark:data-[state=checked]:bg-accent-500 pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
25
25
)}
26
26
/>
27
27
</SwitchPrimitive.Root>
+2
-2
src/lib/components/text/Text.svelte
+2
-2
src/lib/components/text/Text.svelte
···
2
2
import type { WithElementRef } from 'bits-ui';
3
3
import type { HTMLAttributes } from 'svelte/elements';
4
4
import { cn } from '$lib/utils';
5
-
5
+
6
6
let {
7
7
ref = $bindable(null),
8
8
class: className,
···
13
13
14
14
<p
15
15
bind:this={ref}
16
-
class={cn('text-sm font-medium text-base-700 dark:text-base-200', className)}
16
+
class={cn('text-base-700 dark:text-base-200 text-sm font-medium', className)}
17
17
{...restProps}
18
18
>
19
19
{@render children?.()}
+1
-1
src/lib/components/theme-toggle/ThemeToggle.svelte
+1
-1
src/lib/components/theme-toggle/ThemeToggle.svelte
···
57
57
variant="link"
58
58
onclick={toggleTheme}
59
59
class={cn(
60
-
'theme-toggle flex items-center justify-center rounded-lg focus-visible:outline-2 focus-visible:outline-base-900 dark:focus-visible:outline-base-100',
60
+
'theme-toggle focus-visible:outline-base-900 dark:focus-visible:outline-base-100 flex items-center justify-center rounded-lg focus-visible:outline-2',
61
61
className
62
62
)}
63
63
{...restProps}
+2
-2
src/lib/components/tooltip/tooltip-content.svelte
+2
-2
src/lib/components/tooltip/tooltip-content.svelte
···
1
1
<script lang="ts">
2
2
import { Tooltip as TooltipPrimitive } from 'bits-ui';
3
3
import { cn } from '$lib/utils';
4
-
4
+
5
5
let {
6
6
ref = $bindable(null),
7
7
class: className,
···
14
14
bind:ref
15
15
{sideOffset}
16
16
class={cn(
17
-
'z-50 overflow-hidden rounded-2xl border border-base-200 bg-base-100 px-3 py-1.5 text-sm text-base-900 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-base-800 dark:bg-base-900 dark:text-base-50',
17
+
'border-base-200 bg-base-100 text-base-900 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-base-800 dark:bg-base-900 dark:text-base-50 z-50 overflow-hidden rounded-2xl border px-3 py-1.5 text-sm',
18
18
className
19
19
)}
20
20
{...restProps}
+2
-2
src/lib/components/video-player/FullscreenVideoPlayer.svelte
+2
-2
src/lib/components/video-player/FullscreenVideoPlayer.svelte
···
100
100
101
101
<div
102
102
class={[
103
-
'relative mx-4 aspect-video max-h-screen w-full overflow-hidden rounded-xl border border-base-400 bg-white object-cover dark:border-white/10 dark:bg-white/5 sm:mx-20',
103
+
'border-base-400 relative mx-4 aspect-video max-h-screen w-full overflow-hidden rounded-xl border bg-white object-cover sm:mx-20 dark:border-white/10 dark:bg-white/5',
104
104
className
105
105
]}
106
106
style="filter: url(#blur-sm); width: 100%;"
···
122
122
onclick={() => {
123
123
videoPlayer.hide();
124
124
}}
125
-
class="absolute right-2 top-2 z-20 p-2 text-base-900 backdrop-blur-xs dark:text-base-50"
125
+
class="text-base-900 dark:text-base-50 absolute top-2 right-2 z-20 p-2 backdrop-blur-xs"
126
126
>
127
127
<svg
128
128
xmlns="http://www.w3.org/2000/svg"
+1
-1
src/lib/components/video-player/VideoPlayer.svelte
+1
-1
src/lib/components/video-player/VideoPlayer.svelte
···
54
54
{#if id}
55
55
<div
56
56
class={cn(
57
-
'relative aspect-video w-full overflow-hidden rounded-2xl border border-base-400 bg-white object-cover dark:border-white/10 dark:bg-white/5',
57
+
'border-base-400 relative aspect-video w-full overflow-hidden rounded-2xl border bg-white object-cover dark:border-white/10 dark:bg-white/5',
58
58
className
59
59
)}
60
60
style="filter: url(#blur-fullscreen); width: 100%;"
+1
-1
src/lib/sections/bento/Bento.svelte
+1
-1
src/lib/sections/bento/Bento.svelte
···
20
20
21
21
<ScrollArea type="scroll" class="h-[100dvh] w-screen">
22
22
<div class="flex min-h-screen items-center justify-center p-8">
23
-
<div class="h-full w-full max-w-5xl text-base-900 dark:text-base-50">
23
+
<div class="text-base-900 dark:text-base-50 h-full w-full max-w-5xl">
24
24
<div
25
25
class={[
26
26
'mb-6 flex w-full items-start justify-between rounded-2xl p-6 md:items-center',
+2
-2
src/routes/components/line-graph/+page.svelte
+2
-2
src/routes/components/line-graph/+page.svelte
+2
-2
src/routes/components/slider/+page.svelte
+2
-2
src/routes/components/slider/+page.svelte