[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 popover
+207
-1
+1
src/lib/index.ts
+1
src/lib/index.ts
···
29
29
export { Text as Paragraph } from '$lib/components/base/text/';
30
30
export { Textarea } from '$lib/components/base/textarea';
31
31
export { Tooltip } from '$lib/components/base/tooltip';
32
+
export { default as Popover } from '$lib/components/base/popover/Popover.svelte';
32
33
33
34
// colors components
34
35
export { default as ColorGradientPicker } from '$lib/components/colors/color-gradient-picker/ColorGradientPicker.svelte';
+4
-1
src/routes/+page.svelte
+4
-1
src/routes/+page.svelte
···
5
5
import Navbar from '$docs/site-components/Navbar.svelte';
6
6
import Sidebar from '$docs/site-components/Sidebar.svelte';
7
7
import PublicAlphaAlert from '$docs/site-components/PublicAlphaAlert.svelte';
8
+
import { components } from '$docs/site-components/components_all';
9
+
10
+
let count = components.flatMap((c) => c.components).length;
8
11
</script>
9
12
10
13
<Navbar />
···
14
17
<h1
15
18
class="text-base-950 dark:text-base-50 my-8 mt-8 max-w-2xl text-4xl font-bold tracking-tight text-pretty md:text-5xl md:leading-14"
16
19
>
17
-
UI components built with Tailwind 4 and Svelte 5
20
+
{count} UI components built with Tailwind 4 and Svelte 5
18
21
</h1>
19
22
20
23
<PublicAlphaAlert class="w-fit" />
+6
src/docs/site-components/components_base.ts
+6
src/docs/site-components/components_base.ts
···
22
22
import CardSelect from '$docs/cards/base/CardSelect.svelte';
23
23
24
24
import type { Component } from 'svelte';
25
+
import CardPopover from '$docs/cards/base/CardPopover.svelte';
25
26
26
27
export type ComponentCard = {
27
28
component: Component;
···
142
143
component: CardSelect,
143
144
label: 'Select',
144
145
href: 'select'
146
+
},
147
+
{
148
+
component: CardPopover,
149
+
label: 'Popover',
150
+
href: 'popover'
145
151
}
146
152
].sort((a, b) => a.label.localeCompare(b.label));
+38
src/docs/cards/base/CardPopover.svelte
+38
src/docs/cards/base/CardPopover.svelte
···
1
+
<script>
2
+
import { Box, Button } from '$lib';
3
+
import Text from '$lib/components/base/text/Text.svelte';
4
+
</script>
5
+
6
+
<Box class="flex items-center justify-between gap-2">
7
+
<Text>Are you sure?</Text>
8
+
9
+
<div>
10
+
<Button tabindex={-1} variant="secondary" size="iconSm">
11
+
<svg
12
+
xmlns="http://www.w3.org/2000/svg"
13
+
fill="none"
14
+
viewBox="0 0 24 24"
15
+
stroke-width="1.5"
16
+
stroke="currentColor"
17
+
class="size-6"
18
+
>
19
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
20
+
</svg>
21
+
</Button>
22
+
23
+
<Button tabindex={-1} size="iconSm">
24
+
<svg
25
+
xmlns="http://www.w3.org/2000/svg"
26
+
fill="none"
27
+
viewBox="0 0 24 24"
28
+
stroke-width="1.5"
29
+
stroke="currentColor"
30
+
class="size-6"
31
+
>
32
+
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
33
+
</svg>
34
+
</Button>
35
+
</div>
36
+
</Box>
37
+
38
+
<Button tabindex={-1}>Confirm?</Button>
+59
src/lib/components/base/popover/Popover.svelte
+59
src/lib/components/base/popover/Popover.svelte
···
1
+
<script lang="ts">
2
+
import { cn } from '$lib';
3
+
import { buttonVariants, type ButtonSize, type ButtonVariant } from '$lib/components/base/button';
4
+
import * as Popover from '$lib/components/base/popover';
5
+
import { Popover as PopoverPrimitive } from 'bits-ui';
6
+
7
+
8
+
type Props = PopoverPrimitive.RootProps & {
9
+
triggerProps?: PopoverPrimitive.TriggerProps;
10
+
text?: string;
11
+
12
+
triggerText?: string;
13
+
triggerClasses?: string;
14
+
triggerVariant?: ButtonVariant;
15
+
triggerSize?: ButtonSize;
16
+
17
+
triggerRef?: HTMLButtonElement | null;
18
+
19
+
} & PopoverPrimitive.ContentProps & PopoverPrimitive.TriggerProps;
20
+
21
+
22
+
let {
23
+
open = $bindable(false),
24
+
onOpenChange,
25
+
children,
26
+
27
+
triggerText,
28
+
triggerClasses = '',
29
+
triggerVariant = 'primary',
30
+
triggerSize = 'default',
31
+
triggerRef = $bindable(null),
32
+
33
+
side = 'top',
34
+
sideOffset = 10,
35
+
36
+
child: myChild,
37
+
...restProps
38
+
}: Props = $props();
39
+
</script>
40
+
41
+
<Popover.Root bind:open {onOpenChange}>
42
+
{#if myChild}
43
+
<Popover.Trigger class={triggerClasses} bind:ref={triggerRef}>
44
+
{#snippet child({ props })}
45
+
{@render myChild?.({ props })}
46
+
{/snippet}
47
+
</Popover.Trigger>
48
+
{:else}
49
+
<Popover.Trigger
50
+
class={cn(buttonVariants({ variant: triggerVariant, size: triggerSize }), triggerClasses)}
51
+
bind:ref={triggerRef}
52
+
>
53
+
{triggerText}
54
+
</Popover.Trigger>
55
+
{/if}
56
+
<Popover.Content {side} {sideOffset} {...restProps}>
57
+
{@render children?.()}
58
+
</Popover.Content>
59
+
</Popover.Root>
+8
src/routes/(main)/components/base/popover/+page.svelte
+8
src/routes/(main)/components/base/popover/+page.svelte
+63
src/routes/(main)/components/base/popover/Example.svelte
+63
src/routes/(main)/components/base/popover/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Popover, ColorSelect, Button, toast } from '$lib';
3
+
4
+
let open = $state(false);
5
+
let selected: string = $state('red');
6
+
</script>
7
+
8
+
<h3>Default trigger</h3>
9
+
10
+
<Popover triggerText="click me" triggerVariant="secondary" triggerClasses="mt-2" bind:open>
11
+
<div class="flex items-center justify-between gap-2">
12
+
<div>Are you sure?</div>
13
+
<div>
14
+
<Button variant="secondary" size="iconSm" onclick={() => {
15
+
open = !open;
16
+
toast('Fair enough!');
17
+
}}>
18
+
<svg
19
+
xmlns="http://www.w3.org/2000/svg"
20
+
fill="none"
21
+
viewBox="0 0 24 24"
22
+
stroke-width="1.5"
23
+
stroke="currentColor"
24
+
class="size-6"
25
+
>
26
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
27
+
</svg>
28
+
</Button>
29
+
30
+
<Button size="iconSm" onclick={() => {
31
+
open = !open;
32
+
toast('Good choice!');
33
+
}}>
34
+
<svg
35
+
xmlns="http://www.w3.org/2000/svg"
36
+
fill="none"
37
+
viewBox="0 0 24 24"
38
+
stroke-width="1.5"
39
+
stroke="currentColor"
40
+
class="size-6"
41
+
>
42
+
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
43
+
</svg>
44
+
</Button>
45
+
</div>
46
+
</div>
47
+
</Popover>
48
+
49
+
<h3>Custom trigger</h3>
50
+
51
+
<Popover triggerText="click me">
52
+
{#snippet child({ props })}
53
+
<button
54
+
{...props}
55
+
class="mt-2 size-8 cursor-pointer rounded-full"
56
+
style="background-color: {selected}"
57
+
></button>
58
+
{/snippet}
59
+
60
+
Select a color:
61
+
62
+
<ColorSelect colors={['red', 'green', 'blue']} bind:selected class="mt-2" />
63
+
</Popover>
+28
src/routes/(main)/components/base/popover/Popover.md
+28
src/routes/(main)/components/base/popover/Popover.md
···
1
+
<script lang="ts">
2
+
import PopoverExample from './Example.svelte';
3
+
</script>
4
+
5
+
# Popover
6
+
7
+
## Example
8
+
9
+
<PopoverExample />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script lang="ts">
15
+
import { Popover } from 'fuchs';
16
+
</script>
17
+
18
+
<!-- default trigger -->
19
+
<Popover triggerText="Click me" triggerVariant="secondary">Hello this is a test</Popover>
20
+
21
+
<!-- custom trigger -->
22
+
<Popover>
23
+
{#snippet child({ props })}
24
+
<button {...props} class="bg-accent-500 size-8 rounded-full cursor-pointer mt-2"></button>
25
+
{/snippet}
26
+
Content of the popover here
27
+
</Popover>
28
+
```