[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
refactor
+95
-142
+2
src/docs/cards/extras/CardColorGradientPicker.svelte
src/docs/cards/colors/CardColorGradientPicker.svelte
+2
src/docs/cards/extras/CardColorGradientPicker.svelte
src/docs/cards/colors/CardColorGradientPicker.svelte
···
1
+
<div class="px-8 w-full">
1
2
<div class="gradient-background h-4 w-full rounded-2xl relative border border-base-500">
2
3
<div class="absolute size-6 bg-accent-500 rounded-full border border-base-500 -top-3" style="left: calc(0% - 12px);"></div>
3
4
<div class="absolute size-6 bg-accent-500 rounded-full border border-base-500 -top-3" style="left: calc(50% - 12px); background: oklch(from var(--color-accent-500) l c calc(h + 30));"></div>
4
5
<div class="absolute size-6 bg-accent-500 rounded-full border border-base-500 -top-3" style="left: calc(100% - 12px); background: oklch(from var(--color-accent-500) l c calc(h + 60));"></div>
6
+
</div>
5
7
</div>
6
8
7
9
<style>
src/docs/cards/extras/CardColorPicker.svelte
src/docs/cards/colors/CardColorPicker.svelte
src/docs/cards/extras/CardColorPicker.svelte
src/docs/cards/colors/CardColorPicker.svelte
src/docs/cards/extras/CardColorSelect.svelte
src/docs/cards/colors/CardColorSelect.svelte
src/docs/cards/extras/CardColorSelect.svelte
src/docs/cards/colors/CardColorSelect.svelte
+58
-92
src/docs/site-components/Cards.svelte
+58
-92
src/docs/site-components/Cards.svelte
···
1
-
<script>
1
+
<script lang="ts">
2
2
import { base } from '$app/paths';
3
3
import { cn } from '$lib/utils';
4
4
···
8
8
import CardRingChart from '$docs/cards/graphs/CardRingChart.svelte';
9
9
import { baseComponents } from './components_base';
10
10
import { extraComponents } from './components_extra';
11
+
import { colorComponents } from './components_colors';
11
12
12
13
let graphCards = [
13
14
{
···
41
42
href: 'github-corner'
42
43
}
43
44
];
45
+
46
+
let cards: {
47
+
name: string;
48
+
components: typeof baseComponents | typeof extraComponents;
49
+
href: string;
50
+
}[] = [
51
+
{
52
+
name: 'Base components',
53
+
components: baseComponents,
54
+
href: 'base'
55
+
},
56
+
{
57
+
name: 'Colors',
58
+
components: colorComponents,
59
+
href: 'colors'
60
+
},
61
+
{
62
+
name: 'Extra components',
63
+
components: extraComponents,
64
+
href: 'extras'
65
+
}
66
+
];
44
67
</script>
45
68
46
-
<h2 class="text-base-800 dark:text-base-200 mb-4 text-xl font-semibold">Base components</h2>
47
-
<div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 xl:grid-cols-4">
48
-
{#each baseComponents as card}
49
-
<div
50
-
class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 hover:opacity-90 md:gap-4"
51
-
>
52
-
<div
53
-
class="bg-base-100 dark:bg-base-900/30 border-base-200 dark:border-base-900 pointer-events-none relative h-44 w-full overflow-hidden rounded-2xl border"
54
-
>
55
-
<div
56
-
class={cn(
57
-
'absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-2 p-6 transition-transform duration-300 will-change-transform group-hover:scale-103',
58
-
card.className
59
-
)}
60
-
aria-hidden="true"
61
-
tabindex="-1"
62
-
>
63
-
<card.component />
64
-
</div>
65
-
</div>
66
-
<a
67
-
href={base + `/components/base/${card.href}`}
68
-
class="focus-visible:outline-accent-500 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2"
69
-
>
70
-
<span class="text-base-900 dark:text-base-50 mx-2 text-sm font-semibold">{card.label}</span>
71
-
<span class="absolute inset-0"></span>
72
-
</a>
73
-
</div>
74
-
{/each}
75
-
</div>
76
-
77
-
78
-
<h2 class="text-base-800 dark:text-base-200 mb-4 text-xl font-semibold mt-24">Extra components</h2>
79
-
<div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 xl:grid-cols-4">
80
-
{#each extraComponents as card}
81
-
<div
82
-
class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 hover:opacity-90 md:gap-4"
83
-
>
84
-
<div
85
-
class="bg-base-100 dark:bg-base-900/30 border-base-200 dark:border-base-900 pointer-events-none relative h-44 w-full overflow-hidden rounded-2xl border"
86
-
>
87
-
<div
88
-
class={cn(
89
-
'absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-2 p-6 transition-transform duration-300 will-change-transform group-hover:scale-103',
90
-
card.className
91
-
)}
92
-
aria-hidden="true"
93
-
tabindex="-1"
94
-
>
95
-
<card.component />
96
-
</div>
69
+
<div class="flex w-full flex-col gap-16">
70
+
{#each cards as category}
71
+
<div>
72
+
<h2 class="text-base-800 dark:text-base-200 mb-6 text-xl font-semibold">{category.name}</h2>
73
+
<div class="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
74
+
{#each category.components as card}
75
+
<div
76
+
class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 hover:opacity-90 md:gap-4"
77
+
>
78
+
<div
79
+
class="bg-base-100 dark:bg-base-900/30 border-base-200 dark:border-base-900 pointer-events-none relative h-44 w-full overflow-hidden rounded-2xl border"
80
+
>
81
+
<div
82
+
class={cn(
83
+
'absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-2 p-6 transition-transform duration-300 will-change-transform group-hover:scale-103',
84
+
card.className
85
+
)}
86
+
aria-hidden="true"
87
+
tabindex="-1"
88
+
>
89
+
<card.component />
90
+
</div>
91
+
</div>
92
+
<a
93
+
href={base + `/components/${category.href}/${card.href}`}
94
+
class="focus-visible:outline-accent-500 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2"
95
+
>
96
+
<span class="text-base-900 dark:text-base-50 mx-2 text-sm font-semibold"
97
+
>{card.label}</span
98
+
>
99
+
<span class="absolute inset-0"></span>
100
+
</a>
101
+
</div>
102
+
{/each}
97
103
</div>
98
-
<a
99
-
href={base + `/components/extras/${card.href}`}
100
-
class="focus-visible:outline-accent-500 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2"
101
-
>
102
-
<span class="text-base-900 dark:text-base-50 mx-2 text-sm font-semibold">{card.label}</span>
103
-
<span class="absolute inset-0"></span>
104
-
</a>
105
104
</div>
106
105
{/each}
107
106
</div>
108
-
109
-
110
-
<!--
111
-
<h2 class="text-base-800 dark:text-base-200 mt-24 mb-4 text-xl font-semibold">Graph components</h2>
112
-
<div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4">
113
-
{#each graphCards as card}
114
-
<div
115
-
class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 hover:opacity-90 md:gap-4"
116
-
>
117
-
<div
118
-
class="bg-base-100 dark:bg-base-900/30 border-base-200 dark:border-base-900 pointer-events-none relative h-44 w-full overflow-hidden rounded-2xl border"
119
-
>
120
-
<div
121
-
class={cn(
122
-
'absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-2 p-6 transition-transform duration-300 will-change-transform group-hover:scale-103',
123
-
card.className
124
-
)}
125
-
aria-hidden="true"
126
-
tabindex="-1"
127
-
>
128
-
<card.component />
129
-
</div>
130
-
</div>
131
-
<a
132
-
href={base + `/components/graphs/${card.href}`}
133
-
class="focus-visible:outline-accent-500 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2"
134
-
>
135
-
<span class="text-base-900 dark:text-base-50 mx-2 text-sm font-semibold">{card.label}</span>
136
-
<span class="absolute inset-0"></span>
137
-
</a>
138
-
</div>
139
-
{/each}
140
-
</div> -->
+1
-1
src/docs/site-components/Sidebar.svelte
+1
-1
src/docs/site-components/Sidebar.svelte
+10
-21
src/docs/site-components/components_base.ts
+10
-21
src/docs/site-components/components_base.ts
···
21
21
import CardAccordion from '$docs/cards/base/CardAccordion.svelte';
22
22
import CardSelect from '$docs/cards/base/CardSelect.svelte';
23
23
24
-
export const baseComponents = [
24
+
import type { Component } from 'svelte';
25
+
26
+
export type ComponentCard = {
27
+
component: Component;
28
+
className?: string;
29
+
label: string;
30
+
href: string;
31
+
};
32
+
33
+
export const baseComponents: ComponentCard[] = [
25
34
{
26
35
component: CardAlerts,
27
-
className: '',
28
36
label: 'Alerts',
29
37
href: 'alert'
30
38
},
31
39
{
32
40
component: CardAvatar,
33
-
className: '',
34
41
label: 'Avatars',
35
42
href: 'avatar'
36
43
},
37
44
{
38
45
component: CardBadge,
39
-
className: '',
40
46
label: 'Badges',
41
47
href: 'badge'
42
48
},
43
49
{
44
50
component: CardBox,
45
-
className: '',
46
51
label: 'Box',
47
52
href: 'box'
48
53
},
49
54
{
50
55
component: CardButtons,
51
-
className: '',
52
56
label: 'Buttons',
53
57
href: 'button'
54
58
},
55
59
{
56
60
component: CardChatBubble,
57
-
className: '',
58
61
label: 'Chat Bubbles',
59
62
href: 'chat-bubble'
60
63
},
61
64
{
62
65
component: CardCheckbox,
63
-
className: '',
64
66
label: 'Checkboxes',
65
67
href: 'checkbox'
66
68
},
67
69
{
68
70
component: CardImage,
69
-
className: '',
70
71
label: 'Images',
71
72
href: 'image'
72
73
},
73
74
{
74
75
component: CardInput,
75
-
className: '',
76
76
label: 'Text Inputs',
77
77
href: 'input'
78
78
},
79
79
{
80
80
component: CardModal,
81
-
className: '',
82
81
label: 'Modals',
83
82
href: 'modal'
84
83
},
85
84
{
86
85
component: CardNumberInput,
87
-
className: '',
88
86
label: 'Number Input',
89
87
href: 'number-input'
90
88
},
···
96
94
},
97
95
{
98
96
component: CardSlider,
99
-
className: '',
100
97
label: 'Sliders',
101
98
href: 'slider'
102
99
},
103
100
{
104
101
component: CardSonner,
105
-
className: '',
106
102
label: 'Sonner',
107
103
href: 'sonner'
108
104
},
109
105
{
110
106
component: CardSwitch,
111
-
className: '',
112
107
label: 'Switches',
113
108
href: 'switch'
114
109
},
115
110
{
116
111
component: CardTextarea,
117
-
className: '',
118
112
label: 'Textarea',
119
113
href: 'textarea'
120
114
},
121
115
{
122
116
component: CardTooltip,
123
-
className: '',
124
117
label: 'Tooltips',
125
118
href: 'tooltip'
126
119
},
127
120
{
128
121
component: CardCard,
129
-
className: '',
130
122
label: 'Card',
131
123
href: 'cards'
132
124
},
···
138
130
},
139
131
{
140
132
component: CardProse,
141
-
className: '',
142
133
label: 'Prose',
143
134
href: 'prose'
144
135
},
145
136
{
146
137
component: CardAccordion,
147
-
className: '',
148
138
label: 'Accordion',
149
139
href: 'accordion'
150
140
},
151
141
{
152
142
component: CardSelect,
153
-
className: '',
154
143
label: 'Select',
155
144
href: 'select'
156
145
}
+22
src/docs/site-components/components_colors.ts
+22
src/docs/site-components/components_colors.ts
···
1
+
import CardColorPicker from '$docs/cards/colors/CardColorPicker.svelte';
2
+
import CardColorSelect from '$docs/cards/colors/CardColorSelect.svelte';
3
+
import CardColorGradientPicker from '$docs/cards/colors/CardColorGradientPicker.svelte';
4
+
import type { ComponentCard } from './components_base';
5
+
6
+
export const colorComponents: ComponentCard[] = [
7
+
{
8
+
component: CardColorPicker,
9
+
label: 'Color Picker',
10
+
href: 'color-picker'
11
+
},
12
+
{
13
+
component: CardColorSelect,
14
+
label: 'Color Select',
15
+
href: 'color-select'
16
+
},
17
+
{
18
+
component: CardColorGradientPicker,
19
+
label: 'Color Gradient Picker',
20
+
href: 'color-gradient-picker'
21
+
}
22
+
].sort((a, b) => a.label.localeCompare(b.label));
+2
-28
src/docs/site-components/components_extra.ts
+2
-28
src/docs/site-components/components_extra.ts
···
1
1
import CardExcalidraw from '$docs/cards/extras/CardExcalidraw.svelte';
2
2
import CardUndraw from '$docs/cards/extras/CardUndraw.svelte';
3
-
import CardColorPicker from '$docs/cards/extras/CardColorPicker.svelte';
4
-
import CardColorSelect from '$docs/cards/extras/CardColorSelect.svelte';
5
3
import CardStopwatch from '$docs/cards/extras/CardStopwatch.svelte';
6
4
import CardTimer from '$docs/cards/extras/CardTimer.svelte';
7
5
import CardPhone from '$docs/cards/extras/CardPhone.svelte';
8
6
import CardQuote from '$docs/cards/extras/CardQuote.svelte';
9
-
import CardColorGradientPicker from '$docs/cards/extras/CardColorGradientPicker.svelte';
7
+
import type { ComponentCard } from './components_base';
10
8
11
-
export const extraComponents = [
9
+
export const extraComponents: ComponentCard[] = [
12
10
{
13
11
component: CardExcalidraw,
14
-
className: '',
15
12
label: 'Excalidraw',
16
13
href: 'excalidraw'
17
14
},
18
15
{
19
16
component: CardUndraw,
20
-
className: '',
21
17
label: 'Undraw',
22
18
href: 'undraw'
23
19
},
24
20
{
25
-
component: CardColorPicker,
26
-
className: '',
27
-
label: 'Color Picker',
28
-
href: 'color-picker'
29
-
},
30
-
{
31
-
component: CardColorSelect,
32
-
className: '',
33
-
label: 'Color Select',
34
-
href: 'color-select'
35
-
},
36
-
{
37
21
component: CardStopwatch,
38
-
className: '',
39
22
label: 'Stopwatch',
40
23
href: 'stopwatch'
41
24
},
42
25
{
43
26
component: CardTimer,
44
-
className: '',
45
27
label: 'Timer',
46
28
href: 'timer'
47
29
},
48
30
{
49
31
component: CardPhone,
50
-
className: '',
51
32
label: 'Phone',
52
33
href: 'phone'
53
34
},
54
35
{
55
36
component: CardQuote,
56
-
className: '',
57
37
label: 'Quote',
58
38
href: 'quote'
59
-
},
60
-
{
61
-
component: CardColorGradientPicker,
62
-
className: '',
63
-
label: 'Color Gradient Picker',
64
-
href: 'color-gradient-picker'
65
39
}
66
40
].sort((a, b) => a.label.localeCompare(b.label));
src/routes/(main)/components/extras/color-gradient-picker/+page.svelte
src/routes/(main)/components/colors/color-gradient-picker/+page.svelte
src/routes/(main)/components/extras/color-gradient-picker/+page.svelte
src/routes/(main)/components/colors/color-gradient-picker/+page.svelte
src/routes/(main)/components/extras/color-gradient-picker/ColorGradientPicker.md
src/routes/(main)/components/colors/color-gradient-picker/ColorGradientPicker.md
src/routes/(main)/components/extras/color-gradient-picker/ColorGradientPicker.md
src/routes/(main)/components/colors/color-gradient-picker/ColorGradientPicker.md
src/routes/(main)/components/extras/color-gradient-picker/Example.svelte
src/routes/(main)/components/colors/color-gradient-picker/Example.svelte
src/routes/(main)/components/extras/color-gradient-picker/Example.svelte
src/routes/(main)/components/colors/color-gradient-picker/Example.svelte
src/routes/(main)/components/extras/color-picker/+page.svelte
src/routes/(main)/components/colors/color-picker/+page.svelte
src/routes/(main)/components/extras/color-picker/+page.svelte
src/routes/(main)/components/colors/color-picker/+page.svelte
src/routes/(main)/components/extras/color-picker/ColorPicker.md
src/routes/(main)/components/colors/color-picker/ColorPicker.md
src/routes/(main)/components/extras/color-picker/ColorPicker.md
src/routes/(main)/components/colors/color-picker/ColorPicker.md
src/routes/(main)/components/extras/color-picker/Example.svelte
src/routes/(main)/components/colors/color-picker/Example.svelte
src/routes/(main)/components/extras/color-picker/Example.svelte
src/routes/(main)/components/colors/color-picker/Example.svelte
src/routes/(main)/components/extras/color-select/+page.svelte
src/routes/(main)/components/colors/color-select/+page.svelte
src/routes/(main)/components/extras/color-select/+page.svelte
src/routes/(main)/components/colors/color-select/+page.svelte
src/routes/(main)/components/extras/color-select/ColorSelect.md
src/routes/(main)/components/colors/color-select/ColorSelect.md
src/routes/(main)/components/extras/color-select/ColorSelect.md
src/routes/(main)/components/colors/color-select/ColorSelect.md
src/routes/(main)/components/extras/color-select/Example.svelte
src/routes/(main)/components/colors/color-select/Example.svelte
src/routes/(main)/components/extras/color-select/Example.svelte
src/routes/(main)/components/colors/color-select/Example.svelte