[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
small fixes
+56
-51
+1
-1
package.json
+1
-1
package.json
+1
-1
src/lib/components/base/accordion/accordion-item.svelte
+1
-1
src/lib/components/base/accordion/accordion-item.svelte
+12
-9
src/lib/components/base/popover/Popover.svelte
+12
-9
src/lib/components/base/popover/Popover.svelte
···
1
1
<script lang="ts">
2
2
import { cn, buttonVariants, type ButtonSize, type ButtonVariant } from '$lib';
3
-
import * as Popover from '.';
4
3
import { Popover as PopoverPrimitive } from 'bits-ui';
4
+
import { Content } from '.';
5
+
const Root = PopoverPrimitive.Root;
6
+
const Trigger = PopoverPrimitive.Trigger;
5
7
6
8
type Props = PopoverPrimitive.RootProps & {
7
9
triggerProps?: PopoverPrimitive.TriggerProps;
···
31
33
sideOffset = 10,
32
34
33
35
child: myChild,
36
+
class: className,
34
37
...restProps
35
38
}: Props = $props();
36
39
</script>
37
40
38
-
<Popover.Root bind:open {onOpenChange}>
41
+
<Root bind:open {onOpenChange}>
39
42
{#if myChild}
40
-
<Popover.Trigger class={triggerClasses} bind:ref={triggerRef}>
43
+
<Trigger class={triggerClasses} bind:ref={triggerRef}>
41
44
{#snippet child({ props })}
42
45
{@render myChild?.({ props })}
43
46
{/snippet}
44
-
</Popover.Trigger>
47
+
</Trigger>
45
48
{:else}
46
-
<Popover.Trigger
49
+
<Trigger
47
50
class={cn(buttonVariants({ variant: triggerVariant, size: triggerSize }), triggerClasses)}
48
51
bind:ref={triggerRef}
49
52
>
50
53
{triggerText}
51
-
</Popover.Trigger>
54
+
</Trigger>
52
55
{/if}
53
-
<Popover.Content {side} {sideOffset} {...restProps}>
56
+
<Content {side} {sideOffset} class={className} {...restProps}>
54
57
{@render children?.()}
55
-
</Popover.Content>
56
-
</Popover.Root>
58
+
</Content>
59
+
</Root>
+3
-1
src/lib/components/base/popover/index.ts
+3
-1
src/lib/components/base/popover/index.ts
+20
-23
src/lib/components/3d/model-picker/popover/PopoverModelPicker.svelte
+20
-23
src/lib/components/3d/model-picker/popover/PopoverModelPicker.svelte
···
1
1
<script lang="ts">
2
-
import { cn, ModelPicker } from '$lib';
3
-
import { buttonVariants } from '$lib/components/base/button';
4
-
import * as Popover from '$lib/components/base/popover';
2
+
import { ModelPicker } from '$lib';
3
+
import { Popover } from '$lib/components/base/popover';
5
4
6
5
let {
7
6
items,
···
24
23
let ref = $state(null);
25
24
</script>
26
25
27
-
<Popover.Root bind:open>
28
-
<Popover.Trigger class={cn(buttonVariants(), triggerClasses)}>
29
-
{title}
30
-
</Popover.Trigger>
31
-
<Popover.Content
32
-
side={'top'}
33
-
sideOffset={10}
34
-
class="mx-2 max-h-[60dvh] w-full max-w-[calc(100vw-1rem)] overflow-y-scroll"
35
-
>
36
-
<ModelPicker
37
-
{items}
38
-
{alwaysRotate}
39
-
onselect={({ path, label }) => {
40
-
onselect?.({ path, label });
41
-
open = false;
42
-
}}
43
-
{canvasClasses}
44
-
/>
45
-
</Popover.Content>
46
-
</Popover.Root>
26
+
<Popover
27
+
bind:open
28
+
{triggerClasses}
29
+
side={'top'}
30
+
sideOffset={10}
31
+
triggerText={title}
32
+
class="mx-2 max-h-[60dvh] w-full max-w-[calc(100vw-1rem)] overflow-y-scroll"
33
+
>
34
+
<ModelPicker
35
+
{items}
36
+
{alwaysRotate}
37
+
onselect={({ path, label }) => {
38
+
onselect?.({ path, label });
39
+
open = false;
40
+
}}
41
+
{canvasClasses}
42
+
/>
43
+
</Popover>
+19
-16
src/lib/components/colors/color-picker/popover/PopoverColorPicker.svelte
+19
-16
src/lib/components/colors/color-picker/popover/PopoverColorPicker.svelte
···
1
1
<script lang="ts">
2
2
import { cn } from '$lib';
3
-
import * as Popover from '$lib/components/base/popover';
3
+
import { Popover } from '$lib/components/base/popover/index';
4
4
import {
5
5
ColorPicker,
6
6
type OKhsv,
···
50
50
}
51
51
</script>
52
52
53
-
<Popover.Root>
54
-
<Popover.Trigger
55
-
class={cn(
56
-
'focus-visible:outline-base-900 dark:focus-visible:outline-base-100 cursor-pointer rounded-full focus-visible:outline-2 focus-visible:outline-offset-2'
57
-
)}
58
-
>
59
-
<div
60
-
class="border-base-300 dark:border-base-700 focus-visible:outline-accent-500 z-10 size-8 rounded-full border"
61
-
style={`background-color: rgb(${internalColor.r * 255}, ${internalColor.g * 255}, ${internalColor.b * 255});`}
62
-
></div>
63
-
</Popover.Trigger>
64
-
<Popover.Content {side} {sideOffset}>
65
-
<ColorPicker bind:rgb bind:oklab bind:okhsv class={className} {onchange} />
66
-
</Popover.Content>
67
-
</Popover.Root>
53
+
<Popover {side} {sideOffset}>
54
+
{#snippet child({ props })}
55
+
<button
56
+
{...props}
57
+
class={cn(
58
+
'focus-visible:outline-base-900 dark:focus-visible:outline-base-100 cursor-pointer rounded-full focus-visible:outline-2 focus-visible:outline-offset-2'
59
+
)}
60
+
>
61
+
<div
62
+
class="border-base-300 dark:border-base-700 focus-visible:outline-accent-500 z-10 size-8 rounded-full border"
63
+
style={`background-color: rgb(${internalColor.r * 255}, ${internalColor.g * 255}, ${internalColor.b * 255});`}
64
+
></div>
65
+
<span class="sr-only">Pick a color</span>
66
+
</button>
67
+
{/snippet}
68
+
69
+
<ColorPicker bind:rgb bind:oklab bind:okhsv class={className} {onchange} />
70
+
</Popover>