fix ui components svelte 5 compatibility

src/lib/components/ui/button/button.module.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'themes/spacing';
 @use 'themes/mixins';
 @use 'themes/colors';
@@ -18,7 +19,9 @@
 	gap: 6px;
 	transition: 0.18s opacity ease-in-out;
 	user-select: none;
-  transition: background-color 0.18s ease-out, color 0.18s ease-out;
+	transition:
+		background-color 0.18s ease-out,
+		color 0.18s ease-out;
 	cursor: pointer;
 	outline: none;
 	position: relative;
@@ -148,11 +151,11 @@
 		}
 
 		&:hover {
-      color: darken(colors.$save-red, 30);
+			color: color.adjust(colors.$save-red, $lightness: -30%);
 
 			.accessory svg {
-        fill: darken(colors.$save-red, 30);
+				fill: color.adjust(colors.$save-red, $lightness: -30%);
-        stroke: darken(colors.$save-red, 30);
+				stroke: color.adjust(colors.$save-red, $lightness: -30%);
 			}
 		}
 	}
@@ -178,7 +181,7 @@
 	color: white;
 
 	&:hover:not(:disabled) {
-    background: darken(colors.$error, 15);
+		background: color.adjust(colors.$error, $lightness: -15%);
 	}
 
 	@include mixins.breakpoint(phone) {
@@ -209,7 +212,7 @@
 		color: colors.$error;
 
 		&:hover:not(:disabled) {
-      color: darken(colors.$error, 10);
+			color: color.adjust(colors.$error, $lightness: -10%);
 		}
 	}
 }

src/lib/components/ui/checkbox/Checkbox.svelte

@@ -1,8 +1,8 @@
 <!-- Checkbox Component -->
+<svelte:options runes={true} />
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
 	import { Check, Minus } from 'lucide-svelte';
-	import { cn } from '$lib/utils.js';
 	import styles from './checkbox.module.scss';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -31,9 +31,11 @@
 		...restProps
 	}: Props = $props();
 
-	$: if (onCheckedChange && checked !== undefined) {
+	$effect(() => {
+		if (onCheckedChange && checked !== undefined) {
 			onCheckedChange(checked);
 		}
+	});
 
 	const sizeClasses = {
 		small: styles.small,
@@ -53,12 +55,7 @@
 	{required}
 	{name}
 	{value}
-	class={cn(
+	class={`${styles.checkbox} ${sizeClasses[size]} ${variantClasses[variant]} ${className || ''}`}
-		styles.checkbox,
-		sizeClasses[size],
-		variantClasses[variant],
-		className
-	)}
 	{...restProps}
 >
 	<CheckboxPrimitive.Indicator class={styles.indicator}>

src/lib/components/ui/segmented-control/Segment.svelte

@@ -1,7 +1,7 @@
 <!-- Segment Component -->
+<svelte:options runes={true} />
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
 	import styles from './segment.module.scss';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -13,16 +13,20 @@
 	let {
 		value,
 		class: className,
-		children,
+		children: content,
 		...restProps
 	}: Props = $props();
 </script>
 
 <RadioGroupPrimitive.Item
 	{value}
-	class={cn(styles.segment, className)}
+	class={`${styles.segment} ${className || ''}`}
 	{...restProps}
 >
-	<RadioGroupPrimitive.ItemIndicator class={styles.indicator} />
+	{#snippet children({ checked })}
-	<span class={styles.label}>{children}</span>
+		{#if checked}
+			<div class={styles.indicator}></div>
+		{/if}
+		<span class={styles.label}>{@render content?.()}</span>
+	{/snippet}
 </RadioGroupPrimitive.Item>

src/lib/components/ui/segmented-control/SegmentedControl.svelte

@@ -1,7 +1,7 @@
 <!-- SegmentedControl Component -->
+<svelte:options runes={true} />
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
 	import styles from './segmented-control.module.scss';
 	import type { HTMLDivAttributes } from 'svelte/elements';
 
@@ -29,9 +29,11 @@
 		...restProps
 	}: Props = $props();
 
-	$: if (onValueChange && value !== undefined) {
+	$effect(() => {
+		if (onValueChange && value !== undefined) {
 			onValueChange(value);
 		}
+	});
 
 	const variantClasses = {
 		default: '',
@@ -49,21 +51,12 @@
 	};
 </script>
 
-<div class={cn(styles.wrapper, wrapperClass)}>
+<div class={`${styles.wrapper} ${wrapperClass || ''}`}>
 	<RadioGroupPrimitive.Root
 		bind:value
-		class={cn(
+		class={`${styles.segmentedControl} ${variantClasses[variant]} ${element ? elementClasses[element] : ''} ${grow ? styles.grow : ''} ${gap ? styles.gap : ''} ${className || ''}`}
-			styles.segmentedControl,
-			variantClasses[variant],
-			element && elementClasses[element],
-			{
-				[styles.grow]: grow,
-				[styles.gap]: gap
-			},
-			className
-		)}
 		{...restProps}
 	>
-		{children}
+		{@render children?.()}
 	</RadioGroupPrimitive.Root>
 </div>

src/lib/components/ui/switch/Switch.svelte

@@ -1,7 +1,7 @@
 <!-- Switch Component -->
+<svelte:options runes={true} />
 <script lang="ts">
 	import { Switch as SwitchPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
 	import styles from './switch.module.scss';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -28,9 +28,11 @@
 		...restProps
 	}: Props = $props();
 
-	$: if (onCheckedChange && checked !== undefined) {
+	$effect(() => {
+		if (onCheckedChange && checked !== undefined) {
 			onCheckedChange(checked);
 		}
+	});
 </script>
 
 <SwitchPrimitive.Root
@@ -39,8 +41,8 @@
 	{required}
 	{name}
 	{value}
-	class={cn(styles.switch, className)}
+	class={`${styles.switch} ${className || ''}`}
 	{...restProps}
 >
-	<SwitchPrimitive.Thumb class={cn(styles.thumb, thumbClass)} />
+	<SwitchPrimitive.Thumb class={`${styles.thumb} ${thumbClass || ''}`} />
 </SwitchPrimitive.Root>