[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
formating
+42
-40
+1
-3
src/lib/preview/BoxPreview.svelte
+1
-3
src/lib/preview/BoxPreview.svelte
+3
-1
src/lib/preview/ChatBubblePreview.svelte
+3
-1
src/lib/preview/ChatBubblePreview.svelte
···
19
19
<p>This is a really long message that should wrap around the chat bubble and not overflow</p>
20
20
</ChatBubble>
21
21
<ChatBubble>
22
-
<p>This is another really long message that should wrap around the chat bubble and not overflow</p>
22
+
<p>
23
+
This is another really long message that should wrap around the chat bubble and not overflow
24
+
</p>
23
25
</ChatBubble>
24
26
</Box>
+2
-2
src/lib/preview/TimerPreview.svelte
+2
-2
src/lib/preview/TimerPreview.svelte
···
15
15
<Timer bind:timer />
16
16
</Box>
17
17
18
-
<div class="flex gap-2 justify-center w-full">
18
+
<div class="flex w-full justify-center gap-2">
19
19
<Button onclick={() => timer.start()}>Start</Button>
20
20
<Button onclick={() => timer.stop()}>Stop</Button>
21
21
<Button onclick={() => timer.reset()}>Reset</Button>
22
-
</div>
22
+
</div>
+1
-1
src/lib/components/box/Box.svelte
+1
-1
src/lib/components/box/Box.svelte
···
8
8
9
9
<div
10
10
class={cn(
11
-
'relative border-base-300/50 bg-base-300/20 dark:border-base-800/50 dark:bg-base-900/30 rounded-2xl border min-h-96 w-full isolate overflow-hidden p-4 text-base-900 dark:text-base-100',
11
+
'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 min-h-96 w-full overflow-hidden rounded-2xl border p-4',
12
12
className
13
13
)}
14
14
>
+5
-1
src/lib/components/chat-bubble/ChatBubble.svelte
+5
-1
src/lib/components/chat-bubble/ChatBubble.svelte
···
78
78
<div class="grow"></div>
79
79
{/if}
80
80
81
-
<span bind:this={ref} class={cn(badgeVariants({ variant, size }), 'max-w-2/3 whitespace-normal', className)} {...restProps}>
81
+
<span
82
+
bind:this={ref}
83
+
class={cn(badgeVariants({ variant, size }), 'max-w-2/3 whitespace-normal', className)}
84
+
{...restProps}
85
+
>
82
86
{@render children?.()}
83
87
</span>
84
88
+2
-2
src/lib/components/gradient/Gradient.svelte
+2
-2
src/lib/components/gradient/Gradient.svelte
···
1
1
<div
2
-
class="absolute right-0 bottom-0 left-0 translate-y-100 flex items-center justify-center"
2
+
class="absolute right-0 bottom-0 left-0 flex translate-y-100 items-center justify-center"
3
3
aria-hidden="true"
4
4
>
5
5
<div
6
-
class="from-accent-500/50 via-accent-300/0 dark:via-accent-800/0 size-[75rem] translate-y-100 bg-radial shrink-0"
6
+
class="from-accent-500/50 via-accent-300/0 dark:via-accent-800/0 size-[75rem] shrink-0 translate-y-100 bg-radial"
7
7
></div>
8
8
</div>
+2
-2
src/lib/components/number-input/NumberInput.svelte
+2
-2
src/lib/components/number-input/NumberInput.svelte
···
62
62
<button
63
63
aria-hidden="true"
64
64
tabindex={-1}
65
-
class="flex cursor-pointer items-center pr-[.325em] pl-[.5em] disabled:cursor-not-allowed disabled:opacity-50 hover:text-accent-600 dark:hover:text-accent-400 disabled:hover:text-accent-500 dark:disabled:hover:text-accent-500 transition-colors"
65
+
class="hover:text-accent-600 dark:hover:text-accent-400 disabled:hover:text-accent-500 dark:disabled:hover:text-accent-500 flex cursor-pointer items-center pr-[.325em] pl-[.5em] transition-colors disabled:cursor-not-allowed disabled:opacity-50"
66
66
disabled={min != null && value <= min}
67
67
onpointerdown={(event) => handlePointerDown(event, -step)}
68
68
>
···
111
111
<button
112
112
aria-hidden="true"
113
113
tabindex="-1"
114
-
class="flex cursor-pointer items-center pr-[.5em] pl-[.325em] disabled:cursor-not-allowed disabled:opacity-50 hover:text-accent-600 dark:hover:text-accent-400 disabled:hover:text-accent-500 dark:disabled:hover:text-accent-500 transition-colors"
114
+
class="hover:text-accent-600 dark:hover:text-accent-400 disabled:hover:text-accent-500 dark:disabled:hover:text-accent-500 flex cursor-pointer items-center pr-[.5em] pl-[.325em] transition-colors disabled:cursor-not-allowed disabled:opacity-50"
115
115
disabled={max != null && value >= max}
116
116
onpointerdown={(event) => handlePointerDown(event, step)}
117
117
>
+4
-4
src/lib/sections/stats/Stats.svelte
+4
-4
src/lib/sections/stats/Stats.svelte
···
1
1
<script lang="ts">
2
-
import NumberFlow from '@number-flow/svelte'
2
+
import NumberFlow from '@number-flow/svelte';
3
3
import { onMount } from 'svelte';
4
-
5
4
6
5
let {
7
6
stats
···
17
16
onMount(() => {
18
17
started = true;
19
18
});
20
-
21
19
</script>
22
20
23
21
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
24
22
{#each stats as stat}
25
23
<div class="mx-auto flex max-w-xs flex-col gap-y-2">
26
24
<dt class="text-base-600 dark:text-base-400 text-base">{stat.label}</dt>
27
-
<dd class="text-base-900 dark:text-base-100 order-first text-5xl font-bold tracking-tight sm:text-7xl">
25
+
<dd
26
+
class="text-base-900 dark:text-base-100 order-first text-5xl font-bold tracking-tight sm:text-7xl"
27
+
>
28
28
<NumberFlow value={started ? stat.value : 0} />
29
29
</dd>
30
30
</div>
+1
-1
src/routes/components/gradient/+page.svelte
+1
-1
src/routes/components/gradient/+page.svelte
+18
-19
src/routes/sections/stats/+page.svelte
+18
-19
src/routes/sections/stats/+page.svelte
···
2
2
import Stats from '$lib/sections/stats/Stats.svelte';
3
3
</script>
4
4
5
-
<div class="h-screen w-screen flex items-center justify-center">
5
+
<div class="flex h-screen w-screen items-center justify-center">
6
6
<div class="w-full max-w-5xl">
7
-
<Stats
8
-
stats={[
9
-
{
10
-
label: 'Lines of code',
11
-
value: 23
12
-
},
13
-
{
14
-
label: 'Commits',
15
-
value: 123
16
-
},
17
-
{
18
-
label: 'Failed deployments',
19
-
value: 7294
20
-
}
21
-
]}
22
-
/>
23
-
</div>
24
-
7
+
<Stats
8
+
stats={[
9
+
{
10
+
label: 'Lines of code',
11
+
value: 23
12
+
},
13
+
{
14
+
label: 'Commits',
15
+
value: 123
16
+
},
17
+
{
18
+
label: 'Failed deployments',
19
+
value: 7294
20
+
}
21
+
]}
22
+
/>
23
+
</div>
25
24
</div>