[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
add quote, small fixes
+115
-45
+1
src/lib/index.ts
+1
src/lib/index.ts
···
40
40
export { StopwatchState } from '$lib/components/extra/stopwatch/StopwatchState.svelte';
41
41
export { TimerState } from '$lib/components/extra/timer/TimerState.svelte';
42
42
export { default as Phone } from '$lib/components/extra/phone/Phone.svelte';
43
+
export { default as Quote } from '$lib/components/extra/quote/Quote.svelte';
43
44
44
45
// 3d components
45
46
export { default as ModelPicker } from '$lib/components/3d/model-picker/ModelPicker.svelte';
+1
-1
src/docs/preview/QuotePreview.svelte
+1
-1
src/docs/preview/QuotePreview.svelte
+7
src/docs/site-components/components_extra.ts
+7
src/docs/site-components/components_extra.ts
···
5
5
import CardStopwatch from '$docs/cards/extras/CardStopwatch.svelte';
6
6
import CardTimer from '$docs/cards/extras/CardTimer.svelte';
7
7
import CardPhone from '$docs/cards/extras/CardPhone.svelte';
8
+
import CardQuote from '$docs/cards/extras/CardQuote.svelte';
8
9
9
10
export const extraComponents = [
10
11
{
···
48
49
className: '',
49
50
label: 'Phone',
50
51
href: 'phone'
52
+
},
53
+
{
54
+
component: CardQuote,
55
+
className: '',
56
+
label: 'Quote',
57
+
href: 'quote'
51
58
}
52
59
].sort((a, b) => a.label.localeCompare(b.label));
src/docs/assets/images/einstein.png
src/docs/assets/images/einstein.png
This is a binary file and will not be displayed.
+15
src/docs/cards/extras/CardQuote.svelte
+15
src/docs/cards/extras/CardQuote.svelte
···
1
+
<script>
2
+
import { Quote } from '$lib';
3
+
import einstein from '$docs/assets/images/einstein.png?as=run';
4
+
</script>
5
+
6
+
<Quote
7
+
quote="Hello there, this is a quote."
8
+
author={{
9
+
name: 'Einstein',
10
+
role: 'Scientist',
11
+
src: einstein,
12
+
}}
13
+
useThemeColor
14
+
class="scale-75"
15
+
/>
+1
-1
src/docs/cards/extras/CardStopwatch.svelte
+1
-1
src/docs/cards/extras/CardStopwatch.svelte
+1
-1
src/docs/cards/extras/CardTimer.svelte
+1
-1
src/docs/cards/extras/CardTimer.svelte
+12
-5
src/lib/components/base/avatar/Avatar.svelte
+12
-5
src/lib/components/base/avatar/Avatar.svelte
···
1
1
<script lang="ts">
2
2
import { cn } from '$lib/utils';
3
3
import { Avatar as AvatarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
4
+
import Image from '../image/Image.svelte';
4
5
5
6
let {
6
7
src,
···
14
15
fallbackRef = $bindable(null),
15
16
fallbackClass,
16
17
18
+
useThemeColor = false,
19
+
17
20
class: className,
18
21
...restProps
19
22
}: WithoutChildrenOrChild<AvatarPrimitive.RootProps> & {
···
25
28
26
29
src?: string;
27
30
alt?: string;
31
+
32
+
useThemeColor?: boolean;
28
33
} = $props();
29
34
</script>
30
35
···
37
42
bind:this={ref}
38
43
>
39
44
{#if fallback}
40
-
<span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-medium">{fallback}</span>
45
+
<span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-medium"
46
+
>{fallback}</span
47
+
>
41
48
{:else}
42
49
<svg
43
50
xmlns="http://www.w3.org/2000/svg"
···
53
60
</svg>
54
61
{/if}
55
62
{#if src}
56
-
<img
57
-
class={cn('z-10 aspect-square size-full', imageClass)}
63
+
<Image
58
64
{src}
59
-
{alt}
60
-
bind:this={imageRef}
65
+
alt={alt ?? ''}
66
+
{useThemeColor}
67
+
class="z-10 aspect-square size-full object-cover"
61
68
onerror={() => {
62
69
imageRef?.classList.add('hidden');
63
70
}}
+15
-2
src/lib/components/base/image/Image.svelte
+15
-2
src/lib/components/base/image/Image.svelte
···
51
51
{src}
52
52
bind:this={ref}
53
53
{alt}
54
-
onload={() => (loaded = true)}
55
54
class={cn(
56
55
useThemeColor ? 'brightness-125 grayscale' : '',
57
56
showNormalOnHover ? 'transition-all duration-300 ease-in-out group-hover:filter-none' : '',
58
57
className
59
58
)}
60
59
{...restProps}
60
+
onload={(evt) => {
61
+
loaded = true
62
+
if(restProps.onload) {
63
+
restProps.onload(evt)
64
+
}
65
+
}}
61
66
/>
62
67
{:else}
63
68
<Img
64
69
{src}
65
70
bind:ref
66
71
{alt}
67
-
onload={() => (loaded = true)}
68
72
class={cn(
69
73
useThemeColor ? 'brightness-125 grayscale' : '',
70
74
showNormalOnHover ? 'transition-all duration-300 ease-in-out group-hover:filter-none' : '',
···
72
76
)}
73
77
width={restProps.width ? Number(restProps.width) : undefined}
74
78
height={restProps.height ? Number(restProps.height) : undefined}
79
+
75
80
loading={restProps.loading ?? 'lazy'}
76
81
decoding={restProps.decoding ?? 'async'}
82
+
77
83
sizes={restProps.sizes ?? undefined}
84
+
85
+
onload={(evt) => {
86
+
loaded = true
87
+
if(restProps.onload) {
88
+
restProps.onload(evt)
89
+
}
90
+
}}
78
91
/>
79
92
{/if}
80
93
{#if !(typeof src === 'string') && blur}
+10
-28
src/lib/components/extra/quote/Quote.svelte
+10
-28
src/lib/components/extra/quote/Quote.svelte
···
6
6
} from 'bits-ui';
7
7
import type { HTMLAttributes } from 'svelte/elements';
8
8
import { cn } from '$lib/utils';
9
+
import Avatar from '$lib/components/base/avatar/Avatar.svelte';
9
10
10
11
let {
11
12
quote,
···
14
15
15
16
ref = $bindable(null),
16
17
17
-
imageUseThemeColor = false,
18
+
useThemeColor = false,
18
19
19
20
class: className,
20
21
...restProps
···
33
34
imageClass?: string;
34
35
};
35
36
36
-
imageUseThemeColor?: boolean;
37
+
useThemeColor?: boolean;
37
38
} = $props();
38
39
</script>
39
40
···
46
47
{...restProps}
47
48
>
48
49
<div class="h-24 w-24 shrink-0 md:h-32 md:w-32">
49
-
<AvatarPrimitive.Root
50
-
class={cn(
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
-
className
53
-
)}
54
-
>
55
-
{#if imageUseThemeColor}
56
-
<div class="bg-accent-500/30 absolute inset-0 z-20 size-full"></div>
57
-
{/if}
58
-
{#if author?.src}
59
-
<AvatarPrimitive.Image
60
-
class={cn('aspect-square size-full object-cover', author.imageClass)}
61
-
src={author.src}
62
-
alt={author.alt}
63
-
style={{ filter: imageUseThemeColor ? 'grayscale(100%) brightness(1.2)' : '' }}
64
-
/>
65
-
{/if}
66
-
67
-
{#if author?.fallback}
68
-
<AvatarPrimitive.Fallback
69
-
class={cn('flex size-full items-center justify-center', author.fallbackClass)}
70
-
>
71
-
{author.fallback}
72
-
</AvatarPrimitive.Fallback>
73
-
{/if}
74
-
</AvatarPrimitive.Root>
50
+
<Avatar
51
+
{useThemeColor}
52
+
fallback={author?.fallback}
53
+
src={author?.src}
54
+
alt={author?.alt}
55
+
class="size-24 rounded-2xl text-3xl md:size-32 object-cover"
56
+
/>
75
57
</div>
76
58
<div class="flex flex-col gap-2">
77
59
<blockquote class="text-base-900 dark:text-base-50 text-lg font-medium">
+1
-1
src/lib/components/extra/stopwatch/Stopwatch.svelte
+1
-1
src/lib/components/extra/stopwatch/Stopwatch.svelte
···
33
33
<div
34
34
bind:this={ref}
35
35
class={cn(
36
-
'text-base-900 dark:text-base-100 flex w-full justify-center text-5xl font-bold sm:text-7xl',
36
+
'text-base-900 dark:text-base-100 flex w-full justify-center text-5xl font-bold',
37
37
className
38
38
)}
39
39
style="font-variant-numeric: tabular-nums;"
+1
-1
src/lib/components/extra/timer/Timer.svelte
+1
-1
src/lib/components/extra/timer/Timer.svelte
···
33
33
<div
34
34
bind:this={ref}
35
35
class={cn(
36
-
'text-base-900 dark:text-base-100 flex w-full justify-center text-5xl font-bold sm:text-7xl',
36
+
'text-base-900 dark:text-base-100 flex w-full justify-center text-5xl font-bold',
37
37
className
38
38
)}
39
39
style="font-variant-numeric: tabular-nums;"
+6
-3
src/routes/components/extras/quote/+page.svelte
+6
-3
src/routes/components/extras/quote/+page.svelte
+15
src/routes/components/extras/quote/Example.svelte
+15
src/routes/components/extras/quote/Example.svelte
···
1
+
<script>
2
+
import { Quote } from '$lib';
3
+
import einstein from '$docs/assets/images/einstein.png?as=run';
4
+
</script>
5
+
6
+
<Quote
7
+
quote="Two things are infinite, the universe and the number of javascript frameworks, and I am not yet completely sure about the universe."
8
+
author={{
9
+
name: 'Albert Einstein',
10
+
role: 'Scientist',
11
+
src: einstein,
12
+
}}
13
+
useThemeColor
14
+
class="not-prose"
15
+
/>
+27
src/routes/components/extras/quote/Quote.md
+27
src/routes/components/extras/quote/Quote.md
···
1
+
<script lang="ts">
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Quote
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Quote } from 'fuchs';
16
+
</script>
17
+
18
+
<Quote
19
+
quote="Two things are infinite, the universe and the number of javascript frameworks, and I am not yet completely sure about the universe."
20
+
author={{
21
+
name: 'Albert Einstein',
22
+
role: 'Scientist',
23
+
src: './einstein.png',
24
+
}}
25
+
useThemeColor
26
+
/>
27
+
```
+1
-1
src/routes/components/extras/stopwatch/Example.svelte
+1
-1
src/routes/components/extras/stopwatch/Example.svelte