[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
fixes
+89
-34
+8
.changeset/some-ideas-smell.md
+8
.changeset/some-ideas-smell.md
+8
apps/docs/src/app.html
+8
apps/docs/src/app.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
%sveltekit.head%
7
7
8
+
<script
9
+
is:inline
10
+
defer
11
+
src="https://umami-wispy-dream-8048.fly.dev/script.js"
12
+
data-website-id="e6166872-1b90-4b72-8f63-683b95fc010f"
13
+
data-domains="flo-bit.dev"
14
+
></script>
15
+
8
16
<script>
9
17
let dark = localStorage.getItem('darkMode');
10
18
if (dark) {
+4
-4
apps/docs/src/lib/site-components/Sidebar.svelte
+4
-4
apps/docs/src/lib/site-components/Sidebar.svelte
···
28
28
variant="ghost"
29
29
onclick={handleClick}
30
30
href="{base}/docs/quick-start"
31
-
class="mb-1 w-full justify-start">Quick Start</Button
31
+
class="mb-1 w-full justify-start backdrop-blur-none">Quick Start</Button
32
32
>
33
33
<Button
34
34
data-current={page.url.pathname === `${base}/docs/philosophy`}
···
36
36
variant="ghost"
37
37
onclick={handleClick}
38
38
href="{base}/docs/philosophy"
39
-
class="mb-1 w-full justify-start">Philosophy</Button
39
+
class="mb-1 w-full justify-start backdrop-blur-none">Philosophy</Button
40
40
>
41
41
<Button
42
42
data-sveltekit-keepfocus
43
43
variant="ghost"
44
44
onclick={handleClick}
45
45
href="{base}/docs/theme"
46
-
class="mb-6 w-full justify-start">Theme</Button
46
+
class="mb-6 w-full justify-start backdrop-blur-none">Theme</Button
47
47
>
48
48
49
49
<Accordion type="multiple" class="w-full" value={components.map((c) => c.href)}>
···
62
62
variant="ghost"
63
63
onclick={handleClick}
64
64
href="{base}/components/{category.href}/{component.href}"
65
-
class="w-full justify-start">{component.label}</Button
65
+
class="w-full justify-start backdrop-blur-none">{component.label}</Button
66
66
>
67
67
{/each}
68
68
</AccordionItem>
+1
-1
apps/docs/src/lib/site-components/ThemeSelectDropdown.svelte
+1
-1
apps/docs/src/lib/site-components/ThemeSelectDropdown.svelte
+1
-1
packages/base/src/lib/components/box/Box.svelte
+1
-1
packages/base/src/lib/components/box/Box.svelte
···
14
14
<div
15
15
bind:this={ref}
16
16
class={cn(
17
-
'border-base-300/50 bg-base-300/20 dark:border-base-800/50 dark:bg-base-900/30 text-base-900 dark:text-base-100 relative isolate w-full overflow-hidden rounded-2xl border p-4',
17
+
'border-base-300/50 bg-base-300/20 backdrop-blur-2xl dark:border-base-800/50 dark:bg-base-900/30 text-base-900 dark:text-base-100 relative isolate w-full overflow-hidden rounded-2xl border p-4',
18
18
className
19
19
)}
20
20
{...restProps}
+2
-2
packages/base/src/lib/components/modal/Modal.svelte
+2
-2
packages/base/src/lib/components/modal/Modal.svelte
···
76
76
{...contentProps}
77
77
class={cn(
78
78
'motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=open]:slide-in-from-bottom-1/2',
79
-
'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-1rem)] max-w-lg translate-x-[-50%] translate-y-[-50%]',
80
-
'bg-base-50 dark:bg-base-900 border-base-200/80 dark:border-base-800 gap-4 rounded-2xl border p-6',
79
+
'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-1rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] shadow-lg',
80
+
'bg-base-50/60 dark:bg-base-900/60 backdrop-blur-xl border-base-200/80 dark:border-base-800 gap-4 rounded-2xl border p-6',
81
81
className
82
82
)}
83
83
>
+1
-1
packages/base/src/lib/components/popover/popover-content.svelte
+1
-1
packages/base/src/lib/components/popover/popover-content.svelte
···
20
20
{sideOffset}
21
21
{align}
22
22
class={cn(
23
-
'bg-base-100 dark:bg-base-900 border-base-200 dark:border-base-800 text-base-900 dark:text-base-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 w-fit rounded-2xl border p-4 shadow-md outline-none',
23
+
'bg-base-100/70 dark:bg-base-900/50 backdrop-blur-xl border-base-200 dark:border-base-800 text-base-900 dark:text-base-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 w-fit rounded-2xl border p-4 shadow-md outline-none',
24
24
className
25
25
)}
26
26
{...restProps}
+5
-4
packages/base/src/lib/components/theme-toggle/ThemeToggle.svelte
+5
-4
packages/base/src/lib/components/theme-toggle/ThemeToggle.svelte
···
8
8
import { onMount } from 'svelte';
9
9
import { Button, type ButtonProps } from '../button';
10
10
import { cn } from '../../utils';
11
-
11
+
12
12
onMount(() => {
13
13
// load from local storage
14
14
const savedDarkMode = localStorage.getItem('darkMode');
···
50
50
setTheme(theme.dark);
51
51
}
52
52
53
-
const { class: className, ...restProps }: ButtonProps = $props();
53
+
let { class: className, ref = $bindable(null), ...restProps }: ButtonProps = $props();
54
54
</script>
55
55
56
56
<Button
···
60
60
'theme-toggle focus-visible:outline-base-900 dark:focus-visible:outline-base-100 flex items-center justify-center rounded-2xl focus-visible:outline-2',
61
61
className
62
62
)}
63
+
bind:ref
63
64
{...restProps}
64
65
size="icon"
65
66
>
···
69
70
viewBox="0 0 24 24"
70
71
stroke-width="1.5"
71
72
stroke="currentColor"
72
-
class="block size-5! transition-colors duration-500 dark:hidden"
73
+
class="size-5! block transition-colors duration-500 dark:hidden"
73
74
>
74
75
<path
75
76
stroke-linecap="round"
···
83
84
viewBox="0 0 24 24"
84
85
stroke-width="1.5"
85
86
stroke="currentColor"
86
-
class="hidden size-5! transition-colors duration-500 dark:block dark:text-white"
87
+
class="size-5! hidden transition-colors duration-500 dark:block dark:text-white"
87
88
>
88
89
<path
89
90
stroke-linecap="round"
+2
-1
packages/3d/src/lib/components/model-picker/base/ModelPickerScene.svelte
+2
-1
packages/3d/src/lib/components/model-picker/base/ModelPickerScene.svelte
···
37
37
38
38
<T.PerspectiveCamera makeDefault position={[0, 0, 2]} fov={50} near={0.1} far={10} />
39
39
40
-
<T.DirectionalLight args={[0xffffff, 1]} position={[-1, 1, 1]} />
40
+
<T.DirectionalLight args={[0xffffff, 2]} position={[-1, 1, 1]} />
41
+
<T.AmbientLight args={[0xffffff, 0.7]} />
41
42
42
43
<T.Group rotation={[0.5, rotation + 2.5, 0]}>
43
44
<T.Group bind:ref={group}>