progress

website/src/lib/components/ButtonWithTooltip.svelte

@@ -1,28 +1,36 @@
 <script lang="ts">
     import { Button } from '$lib/components/ui/button/index.js';
     import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-    import type { Builder } from 'bits-ui';
+    import type { Snippet } from 'svelte';
 
-    export let variant:
-        | 'default'
-        | 'secondary'
-        | 'link'
-        | 'destructive'
-        | 'outline'
-        | 'ghost'
-        | undefined = 'default';
-    export let label: string;
-    export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
-    export let builders: Builder[] = [];
+    const {
+        variant = 'default',
+        label,
+        side = 'top',
+        class: className = '',
+        children,
+        onclick,
+    }: {
+        variant?: 'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost';
+        label: string;
+        side?: 'top' | 'right' | 'bottom' | 'left';
+        class?: string;
+        children: Snippet;
+        onclick?: (event: MouseEvent) => void;
+    } = $props();
 </script>
 
-<Tooltip.Root>
-    <Tooltip.Trigger asChild let:builder>
-        <Button builders={[...builders, builder]} {variant} {...$$restProps} on:click>
-            <slot />
-        </Button>
-    </Tooltip.Trigger>
-    <Tooltip.Content {side}>
-        <span>{label}</span>
-    </Tooltip.Content>
-</Tooltip.Root>
+<Tooltip.Provider>
+    <Tooltip.Root>
+        <Tooltip.Trigger>
+            {#snippet child({ props })}
+                <Button {...props} {variant} class={className} {onclick}>
+                    {@render children()}
+                </Button>
+            {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content {side}>
+            <span>{label}</span>
+        </Tooltip.Content>
+    </Tooltip.Root>
+</Tooltip.Provider>