refactor: migrate to Svelte 5

use runes ($props, $state, $derived, $effect, etc)

apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte

@@ -5,42 +5,58 @@
 <script lang="ts">
     import { cx } from 'classix'
 
-    export let tag = 'button'
-    export let url: string = undefined
-    export let color: string = undefined
-    export let size: string = undefined
-    export let type: 'button' | 'reset' | 'submit' = undefined
-    export let clone = false
-    export let disabled: boolean = undefined
-    export let label: string = undefined
+    let {
+        tag = 'button',
+        url,
+        color,
+        size,
+        type,
+        clone = false,
+        disabled,
+        label,
+        children,
+        onclick,
+        ...props
+    }: {
+        tag?: string
+        url?: string
+        color?: string
+        size?: string
+        type?: 'button' | 'reset' | 'submit'
+        clone?: boolean
+        disabled?: boolean
+        label?: string
+        children?: any
+        onclick?: any
+        class?: string
+    } = $props()
 
-    const className = 'button-circle'
-    $: classes = cx(
-        className,
-        ...[color, size].map(variant => variant && `${className}--${variant}`),
+    const buttonClass = 'button-circle'
+    const classes = $derived(cx(
+        buttonClass,
+        ...[color, size].map(variant => variant && `${buttonClass}--${variant}`),
         clone ? 'has-clone' : null,
-        $$props.class
-    )
+        props.class,
+    ))
 </script>
 
+{#snippet content()}
+    {#if clone}
+        {#each Array(2) as _}
+            {@render children()}
+        {/each}
+    {:else}
+        {@render children()}
+    {/if}
+{/snippet}
+
+
 {#if tag === 'a'}
-    <a href={url} class={classes} tabindex="0" aria-label={label} on:click>
-        {#if clone}
-            {#each Array(2) as _}
-                <slot />
-            {/each}
-        {:else}
-            <slot />
-        {/if}
+    <a href={url} class={classes} tabindex="0" aria-label={label} {onclick}>
+        {@render content()}
     </a>
 {:else}
-    <button {type} class={classes} disabled={disabled} tabindex="0" aria-label={label} on:click>
-        {#if clone}
-            {#each Array(2) as _}
-                <slot />
-            {/each}
-        {:else}
-            <slot />
-        {/if}
+    <button {type} class={classes} disabled={disabled} tabindex="0" aria-label={label} {onclick}>
+        {@render content()}
     </button>
 {/if}