[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
cleanup, add select
+85
-849
+1
-1
package.json
+1
-1
package.json
+1
src/lib/index.ts
+1
src/lib/index.ts
···
20
20
export { default as Prose } from '$lib/components/base/prose/Prose.svelte';
21
21
export { default as ScrollArea } from '$lib/components/base/scroll-area/ScrollArea.svelte';
22
22
export { Slider } from '$lib/components/base/slider';
23
+
export { Select } from '$lib/components/base/select/';
23
24
export { default as SliderNumber } from '$lib/components/base/slider/SliderNumber.svelte';
24
25
export { Toaster } from '$lib/components/base/sonner/';
25
26
export { toast } from 'svelte-sonner';
-10
src/docs/preview/ExcalidrawPreview.svelte
-10
src/docs/preview/ExcalidrawPreview.svelte
···
1
-
<script>
2
-
import Excalidraw from '$lib/components/extra/excalidraw/Excalidraw.svelte';
3
-
import Heading from '$lib/components/base/heading/Heading.svelte';
4
-
5
-
import svg from '$docs/assets/demo.svg?raw';
6
-
</script>
7
-
8
-
<Heading class="mb-4">Excalidraw</Heading>
9
-
10
-
<Excalidraw {svg} alt="Excalidraw Demo" caption="This is a demo of the Excalidraw component." />
+7
src/docs/site-components/components_base.ts
+7
src/docs/site-components/components_base.ts
···
19
19
import CardTooltip from '$docs/cards/base/CardTooltip.svelte';
20
20
import CardProse from '$docs/cards/base/CardProse.svelte';
21
21
import CardAccordion from '$docs/cards/base/CardAccordion.svelte';
22
+
import CardSelect from '$docs/cards/base/CardSelect.svelte';
22
23
23
24
export const baseComponents = [
24
25
{
···
146
147
className: '',
147
148
label: 'Accordion',
148
149
href: 'accordion'
150
+
},
151
+
{
152
+
component: CardSelect,
153
+
className: '',
154
+
label: 'Select',
155
+
href: 'select'
149
156
}
150
157
].sort((a, b) => a.label.localeCompare(b.label));
+35
-4
src/docs/cards/base/CardSelect.svelte
+35
-4
src/docs/cards/base/CardSelect.svelte
···
1
-
<script lang="ts">
2
-
import Select from '$lib/components/base/select/Select.svelte';
3
-
</script>
1
+
<div class={'flex min-w-max items-center justify-center gap-4 rounded-full'}>
2
+
<div class="flex items-center gap-x-1 text-sm">
3
+
<div
4
+
class={[
5
+
'inline-flex cursor-pointer items-center justify-center rounded-2xl p-1 px-2 transition-all',
6
+
'hover:text-accent-600 dark:hover:text-accent-400 outline-accent-300',
7
+
'dark:outline-accent-500/30 text-accent-600 dark:text-accent-400',
8
+
'dark:bg-accent-700/10 bg-accent-500/10 outline'
9
+
]}
10
+
>
11
+
Apple
12
+
</div>
4
13
5
-
<Select items={['Apple', 'Orange', 'Banana']} selected="Apple" />
14
+
<div
15
+
class={[
16
+
'inline-flex cursor-pointer items-center justify-center rounded-2xl p-1 px-2 transition-all',
17
+
'text-base-600 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 outline-accent-300',
18
+
'dark:outline-accent-500/30 data-[state=on]:text-accent-600 dark:data-[state=on]:text-accent-400',
19
+
'dark:data-[state=on]:bg-accent-700/10 data-[state=on]:bg-accent-500/10 data-[state=on]:outline'
20
+
]}
21
+
>
22
+
Orange
23
+
</div>
24
+
25
+
<div
26
+
class={[
27
+
'inline-flex cursor-pointer items-center justify-center rounded-2xl p-1 px-2 transition-all',
28
+
'text-base-600 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 outline-accent-300',
29
+
'dark:outline-accent-500/30 data-[state=on]:text-accent-600 dark:data-[state=on]:text-accent-400',
30
+
'dark:data-[state=on]:bg-accent-700/10 data-[state=on]:bg-accent-500/10 data-[state=on]:outline'
31
+
]}
32
+
>
33
+
Banana
34
+
</div>
35
+
</div>
36
+
</div>
-15
src/docs/preview/base/AccordionPreview.svelte
-15
src/docs/preview/base/AccordionPreview.svelte
···
1
-
<script lang="ts">
2
-
import { Accordion, AccordionItem } from '$lib/components/base/accordion';
3
-
import Subheading from '$lib/components/base/heading/Subheading.svelte';
4
-
</script>
5
-
6
-
<Subheading>Accordion</Subheading>
7
-
8
-
<Accordion type="single" class="w-full">
9
-
<AccordionItem value="item-1" title="Is it accessible?">
10
-
Yes. It adheres to the WAI-ARIA design pattern.
11
-
</AccordionItem>
12
-
<AccordionItem value="item-2" title="Is it accessible?">
13
-
Yes. It adheres to the WAI-ARIA design pattern.
14
-
</AccordionItem>
15
-
</Accordion>
-59
src/docs/preview/base/AlertPreview.svelte
-59
src/docs/preview/base/AlertPreview.svelte
···
1
-
<script>
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import { Text } from '$lib/components/base/text';
4
-
import { Alert, AlertDescription, AlertTitle } from '$lib/components/base/alert';
5
-
</script>
6
-
7
-
<Subheading>Alerts</Subheading>
8
-
9
-
<Text class="mt-4 mb-2">Default Alert</Text>
10
-
11
-
<Alert>
12
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
13
-
<path
14
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
15
-
/>
16
-
<path
17
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
18
-
/>
19
-
<path
20
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
21
-
/>
22
-
</svg>
23
-
<AlertTitle class="text-rose-500 dark:text-rose-500">Alert Title</AlertTitle>
24
-
<AlertDescription>Alert Description</AlertDescription>
25
-
</Alert>
26
-
27
-
<Alert variant="secondary">
28
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
29
-
<path
30
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
31
-
/>
32
-
<path
33
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
34
-
/>
35
-
<path
36
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
37
-
/>
38
-
</svg>
39
-
<AlertTitle>Alert Title</AlertTitle>
40
-
<AlertDescription>Alert Description</AlertDescription>
41
-
</Alert>
42
-
43
-
<Text class="mt-4 mb-2">Preset Alerts</Text>
44
-
45
-
<Alert title="Warning alert" type="warning">
46
-
<span>Alert Description</span>
47
-
</Alert>
48
-
49
-
<Alert title="Error alert" type="error">
50
-
<span>Alert Description</span>
51
-
</Alert>
52
-
53
-
<Alert title="Success alert" type="success">
54
-
<span>Alert Description</span>
55
-
</Alert>
56
-
57
-
<Alert title="Info alert" type="info">
58
-
<span>Alert Description</span>
59
-
</Alert>
-36
src/docs/preview/base/AvatarPreview.svelte
-36
src/docs/preview/base/AvatarPreview.svelte
···
1
-
<script>
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import { Text } from '$lib/components/base/text';
4
-
import { Avatar, AvatarGroup } from '$lib/components/base/avatar';
5
-
</script>
6
-
7
-
<Subheading>Avatar</Subheading>
8
-
9
-
<Text class="mt-4 mb-2">Single Avatar</Text>
10
-
11
-
<div class="flex items-center gap-2">
12
-
<Avatar fallback="AB" />
13
-
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" />
14
-
</div>
15
-
16
-
<Text class="mt-4 mb-2">Avatars Group</Text>
17
-
18
-
<AvatarGroup
19
-
users={[
20
-
{
21
-
src: 'https://github.com/flo-bit.png',
22
-
alt: 'flo-bit',
23
-
fallback: 'FB'
24
-
},
25
-
{
26
-
src: 'https://github.com/rich-harris.png',
27
-
alt: 'rich-harris',
28
-
fallback: 'RH'
29
-
},
30
-
{
31
-
src: 'https://github.com/huntabyte.png',
32
-
alt: 'huntabyte',
33
-
fallback: 'HB'
34
-
}
35
-
]}
36
-
/>
-79
src/docs/preview/base/BadgesPreview.svelte
-79
src/docs/preview/base/BadgesPreview.svelte
···
1
-
<script>
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import Badge from '$lib/components/base/badge/Badge.svelte';
4
-
import { Text } from '$lib/components/base/text';
5
-
</script>
6
-
7
-
<Subheading>Badges</Subheading>
8
-
9
-
<Text class="mt-4 mb-2">Primary</Text>
10
-
<div class="flex items-center gap-2">
11
-
<Badge size="sm"
12
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
13
-
<path
14
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
15
-
/>
16
-
<path
17
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
18
-
/>
19
-
<path
20
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
21
-
/>
22
-
</svg>Badge</Badge
23
-
>
24
-
<Badge size="md"
25
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
26
-
<path
27
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
28
-
/>
29
-
<path
30
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
31
-
/>
32
-
<path
33
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
34
-
/>
35
-
</svg>Badge</Badge
36
-
>
37
-
<Badge size="lg"
38
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
39
-
<path
40
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
41
-
/>
42
-
<path
43
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
44
-
/>
45
-
<path
46
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
47
-
/>
48
-
</svg>Badge</Badge
49
-
>
50
-
</div>
51
-
52
-
<Text class="mt-4 mb-2">Secondary</Text>
53
-
<div class="flex items-center gap-2">
54
-
<Badge size="sm" variant="secondary">Badge</Badge>
55
-
<Badge size="md" variant="secondary">Badge</Badge>
56
-
<Badge size="lg" variant="secondary">Badge</Badge>
57
-
</div>
58
-
59
-
<Text class="mt-4 mb-2">Colors</Text>
60
-
61
-
<div class="flex flex-wrap items-center gap-2">
62
-
<Badge variant="red">Red</Badge>
63
-
<Badge variant="yellow">Yellow</Badge>
64
-
<Badge variant="green">Green</Badge>
65
-
<Badge variant="blue">Blue</Badge>
66
-
<Badge variant="indigo">Indigo</Badge>
67
-
<Badge variant="violet">Violet</Badge>
68
-
<Badge variant="purple">Purple</Badge>
69
-
<Badge variant="fuchsia">Fuchsia</Badge>
70
-
<Badge variant="pink">Pink</Badge>
71
-
<Badge variant="rose">Rose</Badge>
72
-
<Badge variant="orange">Orange</Badge>
73
-
<Badge variant="amber">Amber</Badge>
74
-
<Badge variant="lime">Lime</Badge>
75
-
<Badge variant="emerald">Emerald</Badge>
76
-
<Badge variant="teal">Teal</Badge>
77
-
<Badge variant="cyan">Cyan</Badge>
78
-
<Badge variant="sky">Sky</Badge>
79
-
</div>
-8
src/docs/preview/base/BoxPreview.svelte
-8
src/docs/preview/base/BoxPreview.svelte
-169
src/docs/preview/base/ButtonsPreview.svelte
-169
src/docs/preview/base/ButtonsPreview.svelte
···
1
-
<script>
2
-
import { Button } from '$lib/components/base/button';
3
-
import { Subheading } from '$lib/components/base/heading';
4
-
import { Text } from '$lib/components/base/text';
5
-
</script>
6
-
7
-
<Subheading>Buttons</Subheading>
8
-
9
-
<Text class="mt-4">Primary</Text>
10
-
<div class="flex items-center gap-2">
11
-
<Button size="sm"
12
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
13
-
<path
14
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
15
-
/>
16
-
<path
17
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
18
-
/>
19
-
<path
20
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
21
-
/>
22
-
</svg>small</Button
23
-
>
24
-
25
-
<Button
26
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
27
-
<path
28
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
29
-
/>
30
-
<path
31
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
32
-
/>
33
-
<path
34
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
35
-
/>
36
-
</svg>normal</Button
37
-
>
38
-
39
-
<Button size="lg"
40
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
41
-
<path
42
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
43
-
/>
44
-
<path
45
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
46
-
/>
47
-
<path
48
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
49
-
/>
50
-
</svg>large</Button
51
-
>
52
-
</div>
53
-
54
-
<Text class="mt-6">Secondary</Text>
55
-
56
-
<div class="flex items-center gap-2">
57
-
<Button variant="secondary" size="sm">small</Button>
58
-
<Button variant="secondary">normal</Button>
59
-
<Button variant="secondary" size="lg">large</Button>
60
-
</div>
61
-
62
-
<Text class="mt-6">Link</Text>
63
-
<div class="flex items-center gap-2">
64
-
<Button variant="link" size="sm"
65
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
66
-
<path
67
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
68
-
/>
69
-
<path
70
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
71
-
/>
72
-
<path
73
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
74
-
/>
75
-
</svg>small</Button
76
-
>
77
-
<Button variant="link"
78
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
79
-
<path
80
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
81
-
/>
82
-
<path
83
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
84
-
/>
85
-
<path
86
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
87
-
/>
88
-
</svg>normal</Button
89
-
>
90
-
<Button variant="link" size="lg"
91
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
92
-
<path
93
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
94
-
/>
95
-
<path
96
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
97
-
/>
98
-
<path
99
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
100
-
/>
101
-
</svg>large</Button
102
-
>
103
-
</div>
104
-
105
-
<Text class="mt-6">Icons</Text>
106
-
<div>
107
-
<Button size="iconSm"
108
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
109
-
<path
110
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
111
-
/>
112
-
<path
113
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
114
-
/>
115
-
<path
116
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
117
-
/>
118
-
</svg></Button
119
-
>
120
-
121
-
<Button size="icon"
122
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
123
-
<path
124
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
125
-
/>
126
-
<path
127
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
128
-
/>
129
-
<path
130
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
131
-
/>
132
-
</svg></Button
133
-
>
134
-
135
-
<Button size="iconLg"
136
-
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
137
-
<path
138
-
d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z"
139
-
/>
140
-
<path
141
-
d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z"
142
-
/>
143
-
<path
144
-
d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z"
145
-
/>
146
-
</svg></Button
147
-
>
148
-
</div>
149
-
150
-
<Text class="mt-6">Colors</Text>
151
-
<div class="flex flex-wrap items-center gap-2">
152
-
<Button variant="red">Red</Button>
153
-
<Button variant="yellow">Yellow</Button>
154
-
<Button variant="green">Green</Button>
155
-
<Button variant="blue">Blue</Button>
156
-
<Button variant="indigo">Indigo</Button>
157
-
<Button variant="violet">Violet</Button>
158
-
<Button variant="purple">Purple</Button>
159
-
<Button variant="fuchsia">Fuchsia</Button>
160
-
<Button variant="pink">Pink</Button>
161
-
<Button variant="rose">Rose</Button>
162
-
<Button variant="orange">Orange</Button>
163
-
<Button variant="amber">Amber</Button>
164
-
<Button variant="lime">Lime</Button>
165
-
<Button variant="emerald">Emerald</Button>
166
-
<Button variant="teal">Teal</Button>
167
-
<Button variant="cyan">Cyan</Button>
168
-
<Button variant="sky">Sky</Button>
169
-
</div>
-36
src/docs/preview/base/ChatBubblePreview.svelte
-36
src/docs/preview/base/ChatBubblePreview.svelte
···
1
-
<script>
2
-
import Box from '$lib/components/base/box/Box.svelte';
3
-
import ChatBubble from '$lib/components/base/chat-bubble/ChatBubble.svelte';
4
-
import Heading from '$lib/components/base/heading/Heading.svelte';
5
-
6
-
import ImageContainer from '$lib/components/base/image-container/ImageContainer.svelte';
7
-
8
-
import cute from '$docs/assets/images/cute.jpg?as=run';
9
-
</script>
10
-
11
-
<Heading class="mb-4">Chat Bubble</Heading>
12
-
13
-
<Box class="flex flex-col gap-3">
14
-
<ChatBubble side="right" variant="secondary">
15
-
<p>Hello there</p>
16
-
</ChatBubble>
17
-
18
-
<ChatBubble>
19
-
<p>General Kenobi</p>
20
-
</ChatBubble>
21
-
22
-
<ChatBubble side="right" variant="secondary">
23
-
<p>This is a really long message that should wrap around the chat bubble and not overflow</p>
24
-
</ChatBubble>
25
-
<ChatBubble>
26
-
<p>
27
-
This is another really long message that should wrap around the chat bubble and not overflow
28
-
</p>
29
-
</ChatBubble>
30
-
31
-
<ChatBubble side="right" variant="secondary">
32
-
<p>This is me sending you an image</p>
33
-
34
-
<ImageContainer src={cute} alt="cute cat" containerClasses="-mx-1.5 rounded-xl" />
35
-
</ChatBubble>
36
-
</Box>
-34
src/docs/preview/base/CheckboxPreview.svelte
-34
src/docs/preview/base/CheckboxPreview.svelte
···
1
-
<script>
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import { Text } from '$lib/components/base/text';
4
-
import { Checkbox } from '$lib/components/base/checkbox';
5
-
import { Label } from '$lib/components/base/label';
6
-
</script>
7
-
8
-
<Subheading>Checkboxes</Subheading>
9
-
10
-
<Text class="mt-4 mb-2">Primary</Text>
11
-
<div class="flex items-center gap-2">
12
-
<Checkbox sizeVariant="sm" variant="primary" />
13
-
<Checkbox sizeVariant="default" variant="primary" />
14
-
<Checkbox sizeVariant="lg" variant="primary" />
15
-
</div>
16
-
17
-
<Text class="mt-4 mb-2">Secondary</Text>
18
-
<div class="flex items-center gap-2">
19
-
<Checkbox sizeVariant="sm" variant="secondary" />
20
-
<Checkbox sizeVariant="default" variant="secondary" />
21
-
<Checkbox sizeVariant="lg" variant="secondary" />
22
-
</div>
23
-
24
-
<Text class="mt-4 mb-2">With Label</Text>
25
-
<div class="flex items-center space-x-2">
26
-
<Checkbox id="terms" aria-labelledby="terms-label" variant="secondary" />
27
-
<Label
28
-
id="terms-label"
29
-
for="terms"
30
-
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
31
-
>
32
-
Yes, I agree to the terms and sell my soul (and no I didn't read the terms)
33
-
</Label>
34
-
</div>
-45
src/docs/preview/base/ImageCardPreview.svelte
-45
src/docs/preview/base/ImageCardPreview.svelte
···
1
-
<script>
2
-
import ImageCard from '$lib/components/base/card/ImageCard.svelte';
3
-
import { Subheading } from '$lib/components/base/heading';
4
-
import { Text } from '$lib/components/base/text';
5
-
6
-
import nature1 from '$docs/assets/images/nature1.jpg?as=run';
7
-
import nature2 from '$docs/assets/images/nature2.jpg?as=run';
8
-
import nature3 from '$docs/assets/images/nature3.jpg?as=run';
9
-
import { toast } from 'svelte-sonner';
10
-
</script>
11
-
12
-
<Subheading class="mt-8 mb-4">Image card</Subheading>
13
-
14
-
<Text class="mt-4">Full width</Text>
15
-
<ImageCard
16
-
src={nature1}
17
-
alt="Nature 1"
18
-
title="Hello World"
19
-
description="Just wanted to say hello to everyone on this beautiful planet, been traveling a lot lately and wanted to share some of the places I've been to."
20
-
href="#"
21
-
/>
22
-
23
-
<Text class="mt-8 mb-4">In a grid</Text>
24
-
<div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
25
-
<ImageCard
26
-
src={nature1}
27
-
alt="Nature 1"
28
-
title="Best places to visit"
29
-
description="This is such a long description, that it will probably be cut off and truncated after the first two lines."
30
-
href="#"
31
-
/>
32
-
<ImageCard
33
-
src={nature2}
34
-
alt="Nature 2"
35
-
title="This is a beautiful place"
36
-
description="This card will show a toast when clicked"
37
-
onclick={() => toast('Hello World')}
38
-
/>
39
-
<ImageCard
40
-
src={nature3}
41
-
alt="Nature 3"
42
-
title="Traveling is fun"
43
-
description="But this card is not clickable"
44
-
/>
45
-
</div>
-24
src/docs/preview/base/ImagePreview.svelte
-24
src/docs/preview/base/ImagePreview.svelte
···
1
-
<script>
2
-
import Subheading from '$lib/components/base/heading/Subheading.svelte';
3
-
import ImageContainer from '$lib/components/base/image-container/ImageContainer.svelte';
4
-
import Text from '$lib/components/base/text/Text.svelte';
5
-
6
-
import cute from '$docs/assets/images/cute.jpg?as=run';
7
-
import cute2 from '$docs/assets/images/cute2.jpg?as=run';
8
-
</script>
9
-
10
-
<Subheading class="mb-4">Images</Subheading>
11
-
12
-
<ImageContainer src={cute} alt="Such a cute animal" />
13
-
14
-
<Text class="mt-4">Overlay theme color</Text>
15
-
<ImageContainer src={cute2} alt="Another cute animal" useThemeColor={true} class="max-w-64" />
16
-
17
-
<Text class="mt-4">Show normal image on hover</Text>
18
-
<ImageContainer
19
-
src={cute2}
20
-
alt="Another cute animal"
21
-
useThemeColor={true}
22
-
class="max-w-64"
23
-
showNormalOnHover={true}
24
-
/>
-19
src/docs/preview/base/InputPreview.svelte
-19
src/docs/preview/base/InputPreview.svelte
···
1
-
<script>
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import { Input } from '$lib/components/base/input';
4
-
import { Text } from '$lib/components/base/text';
5
-
</script>
6
-
7
-
<Subheading>Input</Subheading>
8
-
9
-
<Text class="mt-4 mb-2">Primary</Text>
10
-
11
-
<Input sizeVariant="sm" placeholder="Enter text here (small)" />
12
-
<Input placeholder="Enter text here (default)" />
13
-
<Input sizeVariant="lg" placeholder="Enter text here (large)" />
14
-
15
-
<Text class="mt-4 mb-2">Secondary</Text>
16
-
17
-
<Input variant="secondary" sizeVariant="sm" placeholder="Enter text here (small)" />
18
-
<Input variant="secondary" placeholder="Enter text here (default)" />
19
-
<Input variant="secondary" sizeVariant="lg" placeholder="Enter text here (large)" />
-55
src/docs/preview/base/ModalPreview.svelte
-55
src/docs/preview/base/ModalPreview.svelte
···
1
-
<script>
2
-
import Button from '$lib/components/base/button/Button.svelte';
3
-
import Subheading from '$lib/components/base/heading/Subheading.svelte';
4
-
import Modal from '$lib/components/base/modal/Modal.svelte';
5
-
import Text from '$lib/components/base/text/Text.svelte';
6
-
import { toast } from 'svelte-sonner';
7
-
8
-
import cute from '$docs/assets/images/cute.jpg?as=run';
9
-
import BlueskyLoginModal, {
10
-
blueskyLoginModalState
11
-
} from '$lib/components/base/modal/BlueskyLoginModal.svelte';
12
-
import ImageContainer from '$lib/components/base/image-container/ImageContainer.svelte';
13
-
14
-
let openDefault = $state(false);
15
-
let openCustom = $state(false);
16
-
</script>
17
-
18
-
<Subheading class="mb-4">Modal</Subheading>
19
-
20
-
<Button onclick={() => (openDefault = true)}>Default Modal</Button>
21
-
22
-
<Button onclick={() => (openCustom = true)} variant="secondary">Custom Modal</Button>
23
-
24
-
<Button onclick={() => (blueskyLoginModalState.open = true)} variant="secondary"
25
-
>Bluesky Login Modal</Button
26
-
>
27
-
28
-
<Modal
29
-
bind:open={openDefault}
30
-
title="This is the default modal"
31
-
description="It has a title, description, and two buttons (yes and no)"
32
-
yesButton={{ label: 'Yes', onclick: () => toast('Yes', { description: 'Smart choice' }) }}
33
-
noButton={{ label: 'No', onclick: () => toast('No', { description: 'Why not though?' }) }}
34
-
/>
35
-
36
-
<Modal bind:open={openCustom} closeButton={false}>
37
-
<Subheading>Custom modal</Subheading>
38
-
39
-
<Text>You can put anything in here... Like an image:</Text>
40
-
41
-
<ImageContainer src={cute} alt="image in modal" useThemeColor />
42
-
43
-
<Button onclick={() => (openCustom = false)}>Cool</Button>
44
-
</Modal>
45
-
46
-
<BlueskyLoginModal
47
-
login={async (handle) => {
48
-
await new Promise((resolve, reject) =>
49
-
setTimeout(
50
-
() => reject('This is just for UI testing, login is not actually implemented :/'),
51
-
1000
52
-
)
53
-
);
54
-
}}
55
-
/>
-8
src/docs/preview/base/NumberInputPreview.svelte
-8
src/docs/preview/base/NumberInputPreview.svelte
-47
src/docs/preview/base/NumberInputPreview.svelte.d.ts
-47
src/docs/preview/base/NumberInputPreview.svelte.d.ts
···
1
-
export default NumberInputPreview;
2
-
type NumberInputPreview = SvelteComponent<
3
-
{
4
-
[x: string]: never;
5
-
},
6
-
{
7
-
[evt: string]: CustomEvent<any>;
8
-
},
9
-
{}
10
-
> & {
11
-
$$bindings?: string | undefined;
12
-
};
13
-
declare const NumberInputPreview: $$__sveltets_2_IsomorphicComponent<
14
-
{
15
-
[x: string]: never;
16
-
},
17
-
{
18
-
[evt: string]: CustomEvent<any>;
19
-
},
20
-
{},
21
-
{},
22
-
string
23
-
>;
24
-
interface $$__sveltets_2_IsomorphicComponent<
25
-
Props extends Record<string, any> = any,
26
-
Events extends Record<string, any> = any,
27
-
Slots extends Record<string, any> = any,
28
-
Exports = {},
29
-
Bindings = string
30
-
> {
31
-
new (
32
-
options: import('svelte').ComponentConstructorOptions<Props>
33
-
): import('svelte').SvelteComponent<Props, Events, Slots> & {
34
-
$$bindings?: Bindings;
35
-
} & Exports;
36
-
(
37
-
internal: unknown,
38
-
props: {
39
-
$$events?: Events;
40
-
$$slots?: Slots;
41
-
}
42
-
): Exports & {
43
-
$set?: any;
44
-
$on?: any;
45
-
};
46
-
z_$$bindings?: Bindings;
47
-
}
-16
src/docs/preview/base/ProgressPreview.svelte
-16
src/docs/preview/base/ProgressPreview.svelte
···
1
-
<script>
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import { Progress } from '$lib/components/extra/progress';
4
-
5
-
let progress = $state(20);
6
-
7
-
$effect(() => {
8
-
setInterval(() => {
9
-
progress = progress > 100 ? 0 : progress + Math.random() * 40;
10
-
}, 1000);
11
-
});
12
-
</script>
13
-
14
-
<Subheading class="mb-8">Progress</Subheading>
15
-
16
-
<Progress {progress} />
-9
src/docs/preview/base/ProsePreview.svelte
-9
src/docs/preview/base/ProsePreview.svelte
-46
src/docs/preview/base/ScrollAreaPreview.svelte
-46
src/docs/preview/base/ScrollAreaPreview.svelte
···
1
-
<script>
2
-
import Subheading from '$lib/components/base/heading/Subheading.svelte';
3
-
import ScrollArea from '$lib/components/base/scroll-area/ScrollArea.svelte';
4
-
import Text from '$lib/components/base/text/Text.svelte';
5
-
6
-
let content = `Doggo ipsum puggorino shoob I am bekom fat. Clouds such treat big ol pupper vvv, porgo. Aqua
7
-
doggo ur givin me a spook corgo heckin good boys heck much ruin diet, ur givin me a spook doggo
8
-
such treat ur givin me a spook. What a nice floof extremely cuuuuuute waggy wags floofs dat
9
-
tungg tho puggorino, smol aqua doggo dat tungg tho h*ck, sub woofer long doggo snoot you are
10
-
doing me a frighten. Boofers heck porgo adorable doggo, many pats heckin good boys. Big ol blop
11
-
very good spot aqua doggo, dat tungg tho pats smol borking doggo with a long snoot for pats,
12
-
long bois smol. Lotsa pats borkf stop it fren heckin pupperino woofer, such treat very hand that
13
-
feed shibe doge fluffer. what a nice floof vvv you are doin me a concern. Ruff you are doing me
14
-
the shock boofers borkf smol borking doggo with a long snoot for pats, fluffer stop it fren many
15
-
pats, doing me a frighten mlem ur givin me a spook. Stop it fren smol wow such tempt blep long
16
-
woofer boofers, lotsa pats shooberino doge. corgo maximum borkdrive shibe. Many pats shoob
17
-
heckin good boys I am bekom fat woofer, sub woofer long woofer. Very taste wow boof you are
18
-
doing me a frighten very good spot boofers, stop it fren mlem. Length boy lotsa pats wow very
19
-
biscit, blop. Snoot doggo length boy blep, length boy doing me a frighten. Big ol smol very
20
-
taste wow adorable doggo, extremely cuuuuuute. borking doggo boofers. Long woofer porgo dat
21
-
tungg tho boofers, blop borkdrive, h*ck mlem. Doing me a frighten long doggo blep such treat,
22
-
adorable doggo smol. Such treat smol long bois most angery pupper I have ever seen, big ol
23
-
pupper. Tungg much ruin diet fluffer shooberino blep aqua doggo, very taste wow very good spot
24
-
aqua doggo big ol pupper pupper, long doggo very taste wow borking doggo puggo. Much ruin diet
25
-
corgo you are doing me a frighten doing me a frighten, pupperino. Tungg waggy wags porgo heckin
26
-
angery woofer ruff smol borking doggo with a long snoot for pats I am bekom fat, noodle horse
27
-
thicc porgo many pats very hand that feed shibe, boof stop it fren heckin good boys and girls
28
-
length boy super chub. Blop long water shoob puggorino yapper borkf, long woofer blep. I am
29
-
bekom fat aqua doggo heck blep doggorino most angery pupper I have ever seen, pupper shoob
30
-
floofs. Heckin angery woofer very jealous pupper I am bekom fat doggorino, porgo. Aqua doggo
31
-
length boy ruff long bois shooberino, dat tungg tho very taste wow pupper. Clouds many pats doge
32
-
heckin snoot, maximum borkdrive wow such tempt you are doin me a concern. Corgo puggorino smol
33
-
borking doggo with a long snoot for pats super chub, fat boi h*ck. Dat tungg tho shoob much ruin
34
-
diet very jealous pupper, floofs shibe he made many woofs woofer, heckin good boys pupperino.`;
35
-
36
-
let classes =
37
-
'h-[200px] w-[350px] rounded-2xl border border-base-200 dark:border-base-800 text-base-900 dark:text-base-100 bg-base-100 dark:bg-base-900';
38
-
</script>
39
-
40
-
<Subheading class="mb-4">Scroll Area</Subheading>
41
-
42
-
<ScrollArea class={classes}>
43
-
<div class="p-4">
44
-
{content}
45
-
</div>
46
-
</ScrollArea>
-8
src/docs/preview/base/SelectPreview.svelte
-8
src/docs/preview/base/SelectPreview.svelte
-10
src/docs/preview/base/SliderPreview.svelte
-10
src/docs/preview/base/SliderPreview.svelte
-38
src/docs/preview/base/SonnerPreview.svelte
-38
src/docs/preview/base/SonnerPreview.svelte
···
1
-
<script lang="ts">
2
-
import { Button } from '$lib/components/base/button';
3
-
import Subheading from '$lib/components/base/heading/Subheading.svelte';
4
-
import { toast } from 'svelte-sonner';
5
-
</script>
6
-
7
-
<Subheading class="mb-4">Sonner</Subheading>
8
-
9
-
<div class="flex flex-wrap gap-4">
10
-
<Button
11
-
onclick={() =>
12
-
toast('Hello there', {
13
-
description: 'General Kenobi!'
14
-
})}>Default</Button
15
-
>
16
-
17
-
<Button
18
-
variant="green"
19
-
onclick={() =>
20
-
toast.success('Success!', {
21
-
description: "You are strong and wise and I'm very proud of you!"
22
-
})}>Success</Button
23
-
>
24
-
<Button
25
-
variant="red"
26
-
onclick={() =>
27
-
toast.error('Error!', {
28
-
description: 'These are not the droids you are looking for.'
29
-
})}>Error</Button
30
-
>
31
-
<Button
32
-
variant="blue"
33
-
onclick={() =>
34
-
toast.info('Info!', {
35
-
description: 'I heard spinning is a good trick.'
36
-
})}>Info</Button
37
-
>
38
-
</div>
-28
src/docs/preview/base/SwitchPreview.svelte
-28
src/docs/preview/base/SwitchPreview.svelte
···
1
-
<script>
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import { Switch } from '$lib/components/base/switch';
4
-
import { Label } from '$lib/components/base/label';
5
-
import { Text } from '$lib/components/base/text';
6
-
7
-
let checked = $state(false);
8
-
9
-
let checked2 = $state(true);
10
-
</script>
11
-
12
-
<Subheading class="mb-4">Switch</Subheading>
13
-
14
-
<Switch bind:checked onCheckedChange={() => (checked2 = !checked2)} />
15
-
<Switch bind:checked={checked2} onCheckedChange={() => (checked = !checked)} />
16
-
<Switch disabled />
17
-
18
-
<Text class="mt-4 mb-2">With Label</Text>
19
-
<div class="flex items-center space-x-2">
20
-
<Switch id="terms-switch" aria-labelledby="terms-switch-label" />
21
-
<Label
22
-
id="terms-switch-label"
23
-
for="terms-switch"
24
-
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
25
-
>
26
-
Yes, I agree to the terms and sell my soul (and no I didn't read the terms)
27
-
</Label>
28
-
</div>
-19
src/docs/preview/base/TextareaPreview.svelte
-19
src/docs/preview/base/TextareaPreview.svelte
···
1
-
<script>
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import { Text } from '$lib/components/base/text';
4
-
import { Textarea } from '$lib/components/base/textarea';
5
-
</script>
6
-
7
-
<Subheading>Textarea</Subheading>
8
-
9
-
<Text class="mt-4 mb-2">Primary</Text>
10
-
11
-
<Textarea placeholder="Enter text here (small)" sizeVariant="sm" />
12
-
<Textarea placeholder="Enter text here (default)" />
13
-
<Textarea placeholder="Enter text here (large)" sizeVariant="lg" />
14
-
15
-
<Text class="mt-4 mb-2">Secondary</Text>
16
-
17
-
<Textarea placeholder="Enter text here (small)" variant="secondary" sizeVariant="sm" />
18
-
<Textarea placeholder="Enter text here (default)" variant="secondary" />
19
-
<Textarea placeholder="Enter text here (large)" variant="secondary" sizeVariant="lg" />
-17
src/docs/preview/base/TooltipPreview.svelte
-17
src/docs/preview/base/TooltipPreview.svelte
···
1
-
<script>
2
-
import { Subheading } from '$lib/components/base/heading';
3
-
import { Tooltip } from '$lib/components/base/tooltip';
4
-
import { Text } from '$lib/components/base/text';
5
-
</script>
6
-
7
-
<Subheading>Tooltip</Subheading>
8
-
9
-
<Text class="mt-4 mb-2">Primary</Text>
10
-
<div class="flex w-full flex-col items-start gap-2 py-12">
11
-
<Tooltip triggerText="Hover me" triggerVariant="primary" withContext>Hello there!</Tooltip>
12
-
</div>
13
-
14
-
<Text class="mt-4 mb-2">Secondary</Text>
15
-
<div class="flex w-full flex-col items-start gap-2 py-12">
16
-
<Tooltip triggerText="Hover me" triggerVariant="secondary" withContext>Hello there!</Tooltip>
17
-
</div>
+3
-3
src/routes/docs/philosophy/Philosophy.md
+3
-3
src/routes/docs/philosophy/Philosophy.md
···
65
65
- [model-picker](/ui-kit/components/3d/model-picker/)
66
66
- [voxel-art](/ui-kit/components/3d/voxel-art/)
67
67
68
-
## Works without javascript when possible / is accessible
68
+
## Works without javascript when possible & is accessible
69
69
70
70
Whenever possible components should work without javascript.
71
-
Also all components should be accessible to the best of my knowledge.
72
-
Please let me know [if you find any issues](https://github.com/flo-bit/ui-kit/issues).
71
+
Also all components should be accessible (to the best of my knowledge).
72
+
Please let me know [if you find any issues there](https://github.com/flo-bit/ui-kit/issues).
73
73
74
74
## Dark mode
75
75
+2
-2
src/lib/components/base/prose/Prose.svelte
+2
-2
src/lib/components/base/prose/Prose.svelte
···
7
7
</script>
8
8
9
9
<div
10
-
class="prose prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-600 prose-pre:rounded-2xl w-full dark:hidden"
10
+
class="prose prose-base prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-600 prose-pre:rounded-2xl w-full dark:hidden"
11
11
>
12
12
{@render children?.()}
13
13
</div>
14
14
<div
15
-
class="prose prose-base-dark dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-pre:rounded-2xl hidden w-full dark:block"
15
+
class="prose prose-sm prose-base-dark dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-pre:rounded-2xl hidden w-full dark:block"
16
16
>
17
17
{@render children?.()}
18
18
</div>
+2
-2
src/lib/components/base/select/Select.svelte
+2
-2
src/lib/components/base/select/Select.svelte
···
29
29
30
30
<Toolbar.Root
31
31
bind:ref
32
-
class={cn('flex min-w-max items-center justify-center gap-4 rounded-full', className)}
32
+
class={className}
33
33
{...restProps}
34
34
>
35
35
<Toolbar.Group bind:value={selected} type="single" class="flex items-center gap-x-1 text-sm">
···
39
39
value={typeof item === 'string' ? item : item.value}
40
40
class={[
41
41
'inline-flex cursor-pointer items-center justify-center rounded-2xl p-1 px-2 transition-all',
42
-
'text-base-600 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 outline-accent-500',
42
+
'text-base-600 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 outline-accent-300',
43
43
'dark:outline-accent-500/30 data-[state=on]:text-accent-600 dark:data-[state=on]:text-accent-400',
44
44
'dark:data-[state=on]:bg-accent-700/10 data-[state=on]:bg-accent-500/10 data-[state=on]:outline'
45
45
]}
+1
src/lib/components/base/select/index.ts
+1
src/lib/components/base/select/index.ts
···
1
+
export { default as Select } from './Select.svelte';
+5
-2
src/routes/components/base/select/+page.svelte
+5
-2
src/routes/components/base/select/+page.svelte
+7
src/routes/components/base/select/Example.svelte
+7
src/routes/components/base/select/Example.svelte
+21
src/routes/components/base/select/Select.md
+21
src/routes/components/base/select/Select.md
···
1
+
<script lang="ts">
2
+
import SelectExample from './Example.svelte';
3
+
</script>
4
+
5
+
# Select
6
+
7
+
## Example
8
+
9
+
<SelectExample />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script lang="ts">
15
+
import { Select } from 'fuchs';
16
+
17
+
let selected = $state('Apple');
18
+
</script>
19
+
20
+
<Select bind:selected items={['Apple', 'Orange', 'Banana']} />
21
+
```