update badge/button/separator/skeleton component to svelte 5

frontend/src/lib/components/ui/badge/badge.svelte

@@ -1,18 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
 <script lang="ts">
-	import { cn } from "$lib/utils";
+	import type { WithElementRef } from "bits-ui";
-	import { badgeVariants, type Variant } from ".";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	let className: string | undefined | null = undefined;
+	let {
-	export let href: string | undefined = undefined;
+		ref = $bindable(null),
-	export let variant: Variant = "default";
+		href,
-	export { className as class };
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
 </script>
 
 <svelte:element
 	this={href ? "a" : "span"}
+	bind:this={ref}
 	{href}
 	class={cn(badgeVariants({ variant, className }))}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </svelte:element>

frontend/src/lib/components/ui/badge/index.ts

@@ -1,22 +1,2 @@
-import { tv, type VariantProps } from "tailwind-variants";
 export { default as Badge } from "./badge.svelte";
-
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
-export const badgeVariants = tv({
-	base: "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-	variants: {
-		variant: {
-			default:
-				"bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
-			secondary:
-				"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
-			destructive:
-				"bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
-			outline: "text-foreground"
-		}
-	},
-	defaultVariants: {
-		variant: "default"
-	}
-});
-
-export type Variant = VariantProps<typeof badgeVariants>["variant"];

frontend/src/lib/components/ui/button/button.svelte

@@ -1,24 +1,81 @@
-<script lang="ts">
+<script lang="ts" module>
-	import { Button as ButtonPrimitive } from 'bits-ui'
+	import type { WithElementRef } from 'bits-ui'
-	import { cn } from '$lib/utils'
+	import type {
-	import { buttonVariants, type Props, type Events } from '.'
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+	} from 'svelte/elements'
+	import { type VariantProps, tv } from 'tailwind-variants'
+
+	export const buttonVariants = tv({
+		base: 'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		variants: {
+			variant: {
+				default:
+					'bg-primary-foreground text-primary hover:bg-primary-foreground/70',
+				brand: 'bg-brand text-brand-foreground hover:bg-brand/80',
+				destructive:
+					'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+				outline:
+					'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-10 px-4 py-2',
+				sm: 'h-9 rounded-md px-3',
+				lg: 'h-11 rounded-md px-8',
+				icon: 'h-10 w-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	})
+
+	export type ButtonVariant = VariantProps<
+		typeof buttonVariants
+	>['variant']
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size']
 
-	type $$Props = Props
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-	type $$Events = Events
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant
+			size?: ButtonSize
+		}
+</script>
+
+<script lang="ts">
+	import { cn } from '$lib/utils.js'
 
-	let className: $$Props['class'] = undefined
+	let {
-	export let variant: $$Props['variant'] = 'default'
+		class: className,
-	export let size: $$Props['size'] = 'default'
+		variant = 'default',
-	export let builders: $$Props['builders'] = []
+		size = 'default',
-	export { className as class }
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		children,
+		...restProps
+	}: ButtonProps = $props()
 </script>
 
-<ButtonPrimitive.Root
+{#if href}
-	{builders}
+	<a
-	class={cn(buttonVariants({ variant, size, className }))}
+		bind:this={ref}
-	type="button"
+		class={cn(buttonVariants({ variant, size, className }))}
-	{...$$restProps}
+		{href}
-	on:click
+		{...restProps}>
-	on:keydown>
+		{@render children?.()}
-	<slot />
+	</a>
-</ButtonPrimitive.Root>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, className }))}
+		{type}
+		{...restProps}>
+		{@render children?.()}
+	</button>
+{/if}

frontend/src/lib/components/ui/button/index.ts

@@ -1,53 +1,17 @@
-import Root from './button.svelte'
+import Root, {
-import { tv, type VariantProps } from 'tailwind-variants'
+	type ButtonProps,
-import type { Button as ButtonPrimitive } from 'bits-ui'
+	type ButtonSize,
-
+	type ButtonVariant,
-const buttonVariants = tv({
+	buttonVariants,
-	base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 flex gap-2',
+} from "./button.svelte";
-	variants: {
-		variant: {
-			default:
-				'bg-primary-foreground text-primary hover:bg-primary-foreground/70',
-			brand: 'bg-brand text-brand-foreground hover:bg-brand/80',
-			destructive:
-				'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-			outline:
-				'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-			secondary:
-				'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-			ghost: 'hover:bg-accent hover:text-accent-foreground',
-			link: 'text-primary underline-offset-4 hover:underline',
-		},
-		size: {
-			default: 'h-10 px-4 py-2',
-			sm: 'h-9 rounded-md px-3',
-			lg: 'h-11 rounded-md px-8',
-			icon: 'h-10 w-10',
-		},
-	},
-	defaultVariants: {
-		variant: 'default',
-		size: 'default',
-	},
-})
-
-type Variant = VariantProps<typeof buttonVariants>['variant']
-type Size = VariantProps<typeof buttonVariants>['size']
-
-type Props = ButtonPrimitive.Props & {
-	variant?: Variant
-	size?: Size
-}
-
-type Events = ButtonPrimitive.Events
 
 export {
 	Root,
-	type Props,
+	type ButtonProps as Props,
-	type Events,
 	//
 	Root as Button,
-	type Props as ButtonProps,
-	type Events as ButtonEvents,
 	buttonVariants,
-}
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};

frontend/src/lib/components/ui/separator/separator.svelte

@@ -1,23 +1,22 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from 'bits-ui'
+	import { Separator as SeparatorPrimitive } from "bits-ui";
-	import { cn } from '$lib/utils.js'
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = SeparatorPrimitive.Props
+	let {
-
+		ref = $bindable(null),
-	let className: $$Props['class'] = undefined
+		class: className,
-	export let orientation: $$Props['orientation'] = 'horizontal'
+		orientation = "horizontal",
-	export let decorative: $$Props['decorative'] = undefined
+		...restProps
-	export { className as class }
+	}: SeparatorPrimitive.RootProps = $props();
 </script>
 
 <SeparatorPrimitive.Root
+	bind:ref
 	class={cn(
-		'bg-border shrink-0',
+		"bg-border shrink-0",
-		orientation === 'horizontal'
+		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
-			? 'h-[1px] w-full'
+		className
-			: 'min-h-full w-[1px] self-stretch',
-		className,
 	)}
 	{orientation}
-	{decorative}
+	{...restProps}
-	{...$$restProps} />
+/>

frontend/src/lib/components/ui/skeleton/skeleton.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+	let {
-
+		ref = $bindable(null),
-	let className: $$Props["class"] = undefined;
+		class: className,
-	export { className as class };
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
 </script>
 
-<div class={cn("animate-pulse rounded-md bg-muted", className)} {...$$restProps} />
+<div
+	bind:this={ref}
+	class={cn("bg-muted animate-pulse rounded-md", className)}
+	{...restProps}
+></div>