diff --git a/package.json b/package.json
index 7e4b7b4..caa2e9e 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
 		"@eslint/js": "latest",
 		"@fontsource-variable/geist": "^5.2.9",
 		"@internationalized/date": "^3.12.1",
-		"@lucide/svelte": "^1.16.0",
+		"@lucide/svelte": "^1.21.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.8",
 		"@sveltejs/kit": "^2.57.0",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 682c40d..038e17c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,8 +28,8 @@ importers:
         specifier: ^3.12.1
         version: 3.12.1
       '@lucide/svelte':
-        specifier: ^1.16.0
-        version: 1.16.0(svelte@5.55.9(@typescript-eslint/types@8.59.4))
+        specifier: ^1.21.0
+        version: 1.21.0(svelte@5.55.9(@typescript-eslint/types@8.59.4))
       '@sveltejs/adapter-cloudflare':
         specifier: ^7.2.8
         version: 7.2.8(@sveltejs/kit@2.61.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.9(@typescript-eslint/types@8.59.4))(vite@8.0.14(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.3)))(svelte@5.55.9(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.14(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.3)))(wrangler@4.94.0(@cloudflare/workers-types@4.20260523.1))
@@ -1386,8 +1386,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@lucide/svelte@1.16.0':
-    resolution: {integrity: sha512-AvvPJnaWxeiNkAljI5MsSEc84yHPLMaWQIAJOcbX7k9au/f9ITS7cxTTQiautDiOFKVOXiYdZ+d6mtl88J+Kbg==}
+  '@lucide/svelte@1.21.0':
+    resolution: {integrity: sha512-MEv//A7Jv3kHukZowv/DWp1MAtUzJKYwtJsmnQ7X98lCgtac3z3NbaToDl3Q6jO3gS9sougFpcD+t+YuxOkRMw==}
     peerDependencies:
       svelte: ^5
 
@@ -4815,7 +4815,7 @@ snapshots:
   '@libsql/win32-x64-msvc@0.5.29':
     optional: true
 
-  '@lucide/svelte@1.16.0(svelte@5.55.9(@typescript-eslint/types@8.59.4))':
+  '@lucide/svelte@1.21.0(svelte@5.55.9(@typescript-eslint/types@8.59.4))':
     dependencies:
       svelte: 5.55.9(@typescript-eslint/types@8.59.4)
 
diff --git a/src/lib/components/ui/accordion/accordion-content.svelte b/src/lib/components/ui/accordion/accordion-content.svelte
index df57c0d..b0617ae 100644
--- a/src/lib/components/ui/accordion/accordion-content.svelte
+++ b/src/lib/components/ui/accordion/accordion-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,12 +13,12 @@
 <AccordionPrimitive.Content
 	bind:ref
 	data-slot="accordion-content"
-	class="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
 	{...restProps}
 >
 	<div
 		class={cn(
-			'pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+			"pt-0 pb-2.5 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
 			className
 		)}
 	>
diff --git a/src/lib/components/ui/accordion/accordion-item.svelte b/src/lib/components/ui/accordion/accordion-item.svelte
index c10721e..9d3919d 100644
--- a/src/lib/components/ui/accordion/accordion-item.svelte
+++ b/src/lib/components/ui/accordion/accordion-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <AccordionPrimitive.Item
 	bind:ref
 	data-slot="accordion-item"
-	class={cn('not-last:border-b', className)}
+	class={cn("not-last:border-b", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/accordion/accordion-trigger.svelte b/src/lib/components/ui/accordion/accordion-trigger.svelte
index 59ad5bc..2a46555 100644
--- a/src/lib/components/ui/accordion/accordion-trigger.svelte
+++ b/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 
@@ -11,7 +11,7 @@
 		children,
 		...restProps
 	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
-		level?: AccordionPrimitive.HeaderProps['level'];
+		level?: AccordionPrimitive.HeaderProps["level"];
 	} = $props();
 </script>
 
@@ -20,19 +20,13 @@
 		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+			"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDownIcon
-			data-slot="accordion-trigger-icon"
-			class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
-		/>
-		<ChevronUpIcon
-			data-slot="accordion-trigger-icon"
-			class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
-		/>
+		<ChevronDownIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+		<ChevronUpIcon data-slot="accordion-trigger-icon" class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>
diff --git a/src/lib/components/ui/accordion/accordion.svelte b/src/lib/components/ui/accordion/accordion.svelte
index 0820834..b19a3c5 100644
--- a/src/lib/components/ui/accordion/accordion.svelte
+++ b/src/lib/components/ui/accordion/accordion.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value={value as never}
 	data-slot="accordion"
-	class={cn('cn-accordion flex w-full flex-col', className)}
+	class={cn("cn-accordion flex w-full flex-col", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/accordion/index.ts b/src/lib/components/ui/accordion/index.ts
index 660e6e6..ac343a1 100644
--- a/src/lib/components/ui/accordion/index.ts
+++ b/src/lib/components/ui/accordion/index.ts
@@ -1,7 +1,7 @@
-import Root from './accordion.svelte';
-import Content from './accordion-content.svelte';
-import Item from './accordion-item.svelte';
-import Trigger from './accordion-trigger.svelte';
+import Root from "./accordion.svelte";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
 
 export {
 	Root,
@@ -12,5 +12,5 @@ export {
 	Root as Accordion,
 	Content as AccordionContent,
 	Item as AccordionItem,
-	Trigger as AccordionTrigger
+	Trigger as AccordionTrigger,
 };
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
index b3ec08e..7e63004 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import {
 		buttonVariants,
 		type ButtonVariant,
-		type ButtonSize
-	} from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/format.js';
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = 'default',
-		size = 'default',
+		variant = "default",
+		size = "default",
 		...restProps
 	}: AlertDialogPrimitive.ActionProps & {
 		variant?: ButtonVariant;
@@ -22,6 +22,6 @@
 <AlertDialogPrimitive.Action
 	bind:ref
 	data-slot="alert-dialog-action"
-	class={cn(buttonVariants({ variant, size }), 'cn-alert-dialog-action', className)}
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-action", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
index 0aa03b7..a4ce03c 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import {
 		buttonVariants,
 		type ButtonVariant,
-		type ButtonSize
-	} from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/format.js';
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = 'outline',
-		size = 'default',
+		variant = "outline",
+		size = "default",
 		...restProps
 	}: AlertDialogPrimitive.CancelProps & {
 		variant?: ButtonVariant;
@@ -22,6 +22,6 @@
 <AlertDialogPrimitive.Cancel
 	bind:ref
 	data-slot="alert-dialog-cancel"
-	class={cn(buttonVariants({ variant, size }), 'cn-alert-dialog-cancel', className)}
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-cancel", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index 4802e83..c9b3eb3 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import AlertDialogPortal from './alert-dialog-portal.svelte';
-	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
-	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		size = 'default',
+		size = "default",
 		portalProps,
 		...restProps
 	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
-		size?: 'default' | 'sm';
+		size?: "default" | "sm";
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
 	} = $props();
 </script>
@@ -24,7 +24,7 @@
 		data-slot="alert-dialog-content"
 		data-size={size}
 		class={cn(
-			'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
index 8c38a12..5024f3f 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <AlertDialogPrimitive.Description
 	bind:ref
 	data-slot="alert-dialog-description"
-	class={cn(
-		'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
-		className
-	)}
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
index 816b967..f4214db 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-dialog-footer"
 	class={cn(
-		'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+		"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
index 2802615..d6df4d3 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-header"
-	class={cn(
-		'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
-		className
-	)}
+	class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
index b32543a..3f634f3 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-media"
-	class={cn(
-		"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
-		className
-	)}
+	class={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
index de118e6..9ffcc85 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <AlertDialogPrimitive.Overlay
 	bind:ref
 	data-slot="alert-dialog-overlay"
-	class={cn(
-		'fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
-		className
-	)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
index dd3ac7d..f0a19a8 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 
 	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
index ecd7b5e..652da33 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <AlertDialogPrimitive.Title
 	bind:ref
 	data-slot="alert-dialog-title"
-	class={cn(
-		'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
-		className
-	)}
+	class={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte b/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
index 51a3da1..b22d1d5 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/alert-dialog/alert-dialog.svelte b/src/lib/components/ui/alert-dialog/alert-dialog.svelte
index cde7911..7ea78bb 100644
--- a/src/lib/components/ui/alert-dialog/alert-dialog.svelte
+++ b/src/lib/components/ui/alert-dialog/alert-dialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
 </script>
diff --git a/src/lib/components/ui/alert-dialog/index.ts b/src/lib/components/ui/alert-dialog/index.ts
index 260a544..ca81c2a 100644
--- a/src/lib/components/ui/alert-dialog/index.ts
+++ b/src/lib/components/ui/alert-dialog/index.ts
@@ -1,15 +1,15 @@
-import Root from './alert-dialog.svelte';
-import Portal from './alert-dialog-portal.svelte';
-import Trigger from './alert-dialog-trigger.svelte';
-import Title from './alert-dialog-title.svelte';
-import Action from './alert-dialog-action.svelte';
-import Cancel from './alert-dialog-cancel.svelte';
-import Footer from './alert-dialog-footer.svelte';
-import Header from './alert-dialog-header.svelte';
-import Overlay from './alert-dialog-overlay.svelte';
-import Content from './alert-dialog-content.svelte';
-import Description from './alert-dialog-description.svelte';
-import Media from './alert-dialog-media.svelte';
+import Root from "./alert-dialog.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+import Media from "./alert-dialog-media.svelte";
 
 export {
 	Root,
@@ -36,5 +36,5 @@ export {
 	Overlay as AlertDialogOverlay,
 	Content as AlertDialogContent,
 	Description as AlertDialogDescription,
-	Media as AlertDialogMedia
+	Media as AlertDialogMedia,
 };
diff --git a/src/lib/components/ui/alert/alert-action.svelte b/src/lib/components/ui/alert/alert-action.svelte
index 8673155..1877d38 100644
--- a/src/lib/components/ui/alert/alert-action.svelte
+++ b/src/lib/components/ui/alert/alert-action.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-action"
-	class={cn('absolute top-2 right-2', className)}
+	class={cn("absolute top-2 right-2", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/alert/alert-description.svelte b/src/lib/components/ui/alert/alert-description.svelte
index 5b26b3e..7ee6039 100644
--- a/src/lib/components/ui/alert/alert-description.svelte
+++ b/src/lib/components/ui/alert/alert-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-description"
 	class={cn(
-		'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+		"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/alert/alert-title.svelte b/src/lib/components/ui/alert/alert-title.svelte
index a148944..3e339a3 100644
--- a/src/lib/components/ui/alert/alert-title.svelte
+++ b/src/lib/components/ui/alert/alert-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-title"
 	class={cn(
-		'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte
index 2eb9ca3..abf7487 100644
--- a/src/lib/components/ui/alert/alert.svelte
+++ b/src/lib/components/ui/alert/alert.svelte
@@ -1,31 +1,30 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const alertVariants = tv({
 		base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
 		variants: {
 			variant: {
-				default: 'bg-card text-card-foreground',
-				destructive:
-					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current'
-			}
+				default: "bg-card text-card-foreground",
+				destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
 		},
 		defaultVariants: {
-			variant: 'default'
-		}
+			variant: "default",
+		},
 	});
 
-	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = 'default',
+		variant = "default",
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
diff --git a/src/lib/components/ui/alert/index.ts b/src/lib/components/ui/alert/index.ts
index 0bc9d9c..071b113 100644
--- a/src/lib/components/ui/alert/index.ts
+++ b/src/lib/components/ui/alert/index.ts
@@ -1,8 +1,8 @@
-import Root from './alert.svelte';
-import Description from './alert-description.svelte';
-import Title from './alert-title.svelte';
-import Action from './alert-action.svelte';
-export { alertVariants, type AlertVariant } from './alert.svelte';
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+import Action from "./alert-action.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
 
 export {
 	Root,
@@ -13,5 +13,5 @@ export {
 	Root as Alert,
 	Description as AlertDescription,
 	Title as AlertTitle,
-	Action as AlertAction
+	Action as AlertAction,
 };
diff --git a/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte b/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
index 1df5d5d..815aab0 100644
--- a/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
+++ b/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AspectRatio as AspectRatioPrimitive } from 'bits-ui';
+	import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: AspectRatioPrimitive.RootProps = $props();
 </script>
diff --git a/src/lib/components/ui/aspect-ratio/index.ts b/src/lib/components/ui/aspect-ratio/index.ts
index 1d9517e..985c75f 100644
--- a/src/lib/components/ui/aspect-ratio/index.ts
+++ b/src/lib/components/ui/aspect-ratio/index.ts
@@ -1,3 +1,3 @@
-import Root from './aspect-ratio.svelte';
+import Root from "./aspect-ratio.svelte";
 
 export { Root, Root as AspectRatio };
diff --git a/src/lib/components/ui/avatar/avatar-badge.svelte b/src/lib/components/ui/avatar/avatar-badge.svelte
index 02f71f5..ca9d9ed 100644
--- a/src/lib/components/ui/avatar/avatar-badge.svelte
+++ b/src/lib/components/ui/avatar/avatar-badge.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,10 +14,10 @@
 	bind:this={ref}
 	data-slot="avatar-badge"
 	class={cn(
-		'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
-		'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
-		'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
-		'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+		"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+		"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+		"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+		"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
index ffd27ca..63c8b02 100644
--- a/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="avatar-fallback"
 	class={cn(
-		'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
+		"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/avatar/avatar-group-count.svelte b/src/lib/components/ui/avatar/avatar-group-count.svelte
index 4474a68..c89684a 100644
--- a/src/lib/components/ui/avatar/avatar-group-count.svelte
+++ b/src/lib/components/ui/avatar/avatar-group-count.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="avatar-group-count"
 	class={cn(
-		'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+		"bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/avatar/avatar-group.svelte b/src/lib/components/ui/avatar/avatar-group.svelte
index 285fa59..78714fc 100644
--- a/src/lib/components/ui/avatar/avatar-group.svelte
+++ b/src/lib/components/ui/avatar/avatar-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="avatar-group"
 	class={cn(
-		'cn-avatar-group group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+		"cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
index a65d6b1..f41cf8f 100644
--- a/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <AvatarPrimitive.Image
 	bind:ref
 	data-slot="avatar-image"
-	class={cn('aspect-square size-full rounded-full object-cover', className)}
+	class={cn("rounded-full aspect-square size-full object-cover", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
index 183ce74..ea6fde5 100644
--- a/src/lib/components/ui/avatar/avatar.svelte
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
-		loadingStatus = $bindable('loading'),
-		size = 'default',
+		loadingStatus = $bindable("loading"),
+		size = "default",
 		class: className,
 		...restProps
 	}: AvatarPrimitive.RootProps & {
-		size?: 'default' | 'sm' | 'lg';
+		size?: "default" | "sm" | "lg";
 	} = $props();
 </script>
 
@@ -19,7 +19,7 @@
 	data-slot="avatar"
 	data-size={size}
 	class={cn(
-		'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+		"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
index c4530fb..38ccef8 100644
--- a/src/lib/components/ui/avatar/index.ts
+++ b/src/lib/components/ui/avatar/index.ts
@@ -1,9 +1,9 @@
-import Root from './avatar.svelte';
-import Image from './avatar-image.svelte';
-import Fallback from './avatar-fallback.svelte';
-import Badge from './avatar-badge.svelte';
-import Group from './avatar-group.svelte';
-import GroupCount from './avatar-group-count.svelte';
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+import Badge from "./avatar-badge.svelte";
+import Group from "./avatar-group.svelte";
+import GroupCount from "./avatar-group-count.svelte";
 
 export {
 	Root,
@@ -18,5 +18,5 @@ export {
 	Fallback as AvatarFallback,
 	Badge as AvatarBadge,
 	Group as AvatarGroup,
-	GroupCount as AvatarGroupCount
+	GroupCount as AvatarGroupCount,
 };
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
index 240105d..51bbc23 100644
--- a/src/lib/components/ui/badge/badge.svelte
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -1,36 +1,35 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
+		base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-				destructive:
-					'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
-				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
-				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
-				link: 'text-primary underline-offset-4 hover:underline'
-			}
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
 		},
 		defaultVariants: {
-			variant: 'default'
-		}
+			variant: "default",
+		},
 	});
 
-	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		href,
 		class: className,
-		variant = 'default',
+		variant = "default",
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
@@ -39,7 +38,7 @@
 </script>
 
 <svelte:element
-	this={href ? 'a' : 'span'}
+	this={href ? "a" : "span"}
 	bind:this={ref}
 	data-slot="badge"
 	{href}
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
index f05fb87..64e0aa9 100644
--- a/src/lib/components/ui/badge/index.ts
+++ b/src/lib/components/ui/badge/index.ts
@@ -1,2 +1,2 @@
-export { default as Badge } from './badge.svelte';
-export { badgeVariants, type BadgeVariant } from './badge.svelte';
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
index 0e9ca6b..9e1e22c 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
 	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
 
 	let {
@@ -15,9 +15,9 @@
 	data-slot="breadcrumb-ellipsis"
 	role="presentation"
 	aria-hidden="true"
-	class={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}
+	class={cn("size-5 [&>svg]:size-4 flex items-center justify-center", className)}
 	{...restProps}
 >
-	<MoreHorizontalIcon />
+	<MoreHorizontalIcon  />
 	<span class="sr-only">More</span>
 </span>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
index 8015209..e9c77ea 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <li
 	bind:this={ref}
 	data-slot="breadcrumb-item"
-	class={cn('inline-flex items-center gap-1', className)}
+	class={cn("gap-1 inline-flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
index 562d7dd..e6bc17d 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,10 +15,10 @@
 	} = $props();
 
 	const attrs = $derived({
-		'data-slot': 'breadcrumb-link',
-		class: cn('hover:text-foreground transition-colors', className),
+		"data-slot": "breadcrumb-link",
+		class: cn("hover:text-foreground transition-colors", className),
 		href,
-		...restProps
+		...restProps,
 	});
 </script>
 
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
index 25bd4a8..4873cf0 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLOlAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <ol
 	bind:this={ref}
 	data-slot="breadcrumb-list"
-	class={cn(
-		'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
-		className
-	)}
+	class={cn("text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
index a79cea3..5fb6979 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,7 +16,7 @@
 	role="link"
 	aria-disabled="true"
 	aria-current="page"
-	class={cn('font-normal text-foreground', className)}
+	class={cn("text-foreground font-normal", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
index a7901ae..0f62fba 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLLiAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLLiAttributes } from "svelte/elements";
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 
 	let {
@@ -16,12 +16,12 @@
 	data-slot="breadcrumb-separator"
 	role="presentation"
 	aria-hidden="true"
-	class={cn('[&>svg]:size-3.5', className)}
+	class={cn("[&>svg]:size-3.5", className)}
 	{...restProps}
 >
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<ChevronRightIcon />
+		<ChevronRightIcon  />
 	{/if}
 </li>
diff --git a/src/lib/components/ui/breadcrumb/breadcrumb.svelte b/src/lib/components/ui/breadcrumb/breadcrumb.svelte
index 1cfcb5a..29ea3f5 100644
--- a/src/lib/components/ui/breadcrumb/breadcrumb.svelte
+++ b/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils/format.js';
+	import type { WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot="breadcrumb"
 	aria-label="breadcrumb"
-	class={cn('cn-breadcrumb', className)}
+	class={cn("cn-breadcrumb", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/breadcrumb/index.ts b/src/lib/components/ui/breadcrumb/index.ts
index 773fd60..dc914ec 100644
--- a/src/lib/components/ui/breadcrumb/index.ts
+++ b/src/lib/components/ui/breadcrumb/index.ts
@@ -1,10 +1,10 @@
-import Root from './breadcrumb.svelte';
-import Ellipsis from './breadcrumb-ellipsis.svelte';
-import Item from './breadcrumb-item.svelte';
-import Separator from './breadcrumb-separator.svelte';
-import Link from './breadcrumb-link.svelte';
-import List from './breadcrumb-list.svelte';
-import Page from './breadcrumb-page.svelte';
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
 
 export {
 	Root,
@@ -21,5 +21,5 @@ export {
 	Separator as BreadcrumbSeparator,
 	Link as BreadcrumbLink,
 	List as BreadcrumbList,
-	Page as BreadcrumbPage
+	Page as BreadcrumbPage,
 };
diff --git a/src/lib/components/ui/button-group/button-group-separator.svelte b/src/lib/components/ui/button-group/button-group-separator.svelte
index 4bc3b58..a13f023 100644
--- a/src/lib/components/ui/button-group/button-group-separator.svelte
+++ b/src/lib/components/ui/button-group/button-group-separator.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
-	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Separator } from "$lib/components/ui/separator/index.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		orientation = 'vertical',
+		orientation = "vertical",
 		...restProps
 	}: ComponentProps<typeof Separator> = $props();
 </script>
@@ -16,7 +16,7 @@
 	data-slot="button-group-separator"
 	{orientation}
 	class={cn(
-		'relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',
+		"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/button-group/button-group-text.svelte b/src/lib/components/ui/button-group/button-group-text.svelte
index 6844306..67c0a28 100644
--- a/src/lib/components/ui/button-group/button-group-text.svelte
+++ b/src/lib/components/ui/button-group/button-group-text.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -14,11 +14,8 @@
 
 	const mergedProps = $derived({
 		...restProps,
-		class: cn(
-			"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
-			className
-		),
-		'data-slot': 'button-group-text'
+		class: cn("bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className),
+		"data-slot": "button-group-text",
 	});
 </script>
 
diff --git a/src/lib/components/ui/button-group/button-group.svelte b/src/lib/components/ui/button-group/button-group.svelte
index b1280d1..06d48dc 100644
--- a/src/lib/components/ui/button-group/button-group.svelte
+++ b/src/lib/components/ui/button-group/button-group.svelte
@@ -1,33 +1,33 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const buttonGroupVariants = tv({
 		base: "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
 		variants: {
 			orientation: {
 				horizontal:
-					'[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
+					"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
 				vertical:
-					'[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0'
-			}
+					"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+			},
 		},
 		defaultVariants: {
-			orientation: 'horizontal'
-		}
+			orientation: "horizontal",
+		},
 	});
 
-	export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>['orientation'];
+	export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		orientation = 'horizontal',
+		orientation = "horizontal",
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		orientation?: ButtonGroupOrientation;
diff --git a/src/lib/components/ui/button-group/index.ts b/src/lib/components/ui/button-group/index.ts
index 99d0e67..664167f 100644
--- a/src/lib/components/ui/button-group/index.ts
+++ b/src/lib/components/ui/button-group/index.ts
@@ -1,6 +1,6 @@
-import Root, { buttonGroupVariants, type ButtonGroupOrientation } from './button-group.svelte';
-import Text from './button-group-text.svelte';
-import Separator from './button-group-separator.svelte';
+import Root, { buttonGroupVariants, type ButtonGroupOrientation } from "./button-group.svelte";
+import Text from "./button-group-text.svelte";
+import Separator from "./button-group-separator.svelte";
 
 export {
 	Root,
@@ -11,5 +11,5 @@ export {
 	//
 	Root as ButtonGroup,
 	Text as ButtonGroupText,
-	Separator as ButtonGroupSeparator
+	Separator as ButtonGroupSeparator,
 };
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index cf8fa7c..89cedcb 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,51 +1,41 @@
 <script lang="ts" module>
-	import { resolve } from '$app/paths';
-	import type { PathnameWithSearchOrHash } from '$app/types';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
 		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-				outline:
-					'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-				secondary:
-					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-				ghost:
-					'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-				destructive:
-					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
-				link: 'text-primary underline-offset-4 hover:underline'
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default:
-					'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
 				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
 				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-				icon: 'size-8',
-				'icon-xs':
-					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-				'icon-sm':
-					'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
-				'icon-lg': 'size-9'
-			}
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				icon: "size-8",
+				"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
+			},
 		},
 		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
+			variant: "default",
+			size: "default",
+		},
 	});
 
-	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
 	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		Omit<WithElementRef<HTMLAnchorAttributes>, 'href'> & {
-			href?: PathnameWithSearchOrHash;
+		WithElementRef<HTMLAnchorAttributes> & {
 			variant?: ButtonVariant;
 			size?: ButtonSize;
 		};
@@ -54,35 +44,26 @@
 <script lang="ts">
 	let {
 		class: className,
-		variant = 'default',
-		size = 'default',
+		variant = "default",
+		size = "default",
 		ref = $bindable(null),
 		href = undefined,
-		type = 'button',
+		type = "button",
 		disabled,
 		children,
 		...restProps
 	}: ButtonProps = $props();
 </script>
 
-{#if href && disabled}
+{#if href}
 	<a
 		bind:this={ref}
 		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
-		aria-disabled="true"
-		role="link"
-		tabindex={-1}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else if href}
-	<a
-		bind:this={ref}
-		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		href={resolve(href as '/')}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
 		{...restProps}
 	>
 		{@render children?.()}
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index 5414d9d..fb585d7 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -2,8 +2,8 @@ import Root, {
 	type ButtonProps,
 	type ButtonSize,
 	type ButtonVariant,
-	buttonVariants
-} from './button.svelte';
+	buttonVariants,
+} from "./button.svelte";
 
 export {
 	Root,
@@ -13,5 +13,5 @@ export {
 	buttonVariants,
 	type ButtonProps,
 	type ButtonSize,
-	type ButtonVariant
+	type ButtonVariant,
 };
diff --git a/src/lib/components/ui/calendar/calendar-caption.svelte b/src/lib/components/ui/calendar/calendar-caption.svelte
index 670ee83..5c93037 100644
--- a/src/lib/components/ui/calendar/calendar-caption.svelte
+++ b/src/lib/components/ui/calendar/calendar-caption.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { ComponentProps } from 'svelte';
-	import type Calendar from './calendar.svelte';
-	import CalendarMonthSelect from './calendar-month-select.svelte';
-	import CalendarYearSelect from './calendar-year-select.svelte';
-	import { DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date';
+	import type { ComponentProps } from "svelte";
+	import type Calendar from "./calendar.svelte";
+	import CalendarMonthSelect from "./calendar-month-select.svelte";
+	import CalendarYearSelect from "./calendar-year-select.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
 
 	let {
 		captionLayout,
@@ -14,13 +14,13 @@
 		month,
 		locale,
 		placeholder = $bindable(),
-		monthIndex = 0
+		monthIndex = 0,
 	}: {
-		captionLayout: ComponentProps<typeof Calendar>['captionLayout'];
-		months: ComponentProps<typeof CalendarMonthSelect>['months'];
-		monthFormat: ComponentProps<typeof CalendarMonthSelect>['monthFormat'];
-		years: ComponentProps<typeof CalendarYearSelect>['years'];
-		yearFormat: ComponentProps<typeof CalendarYearSelect>['yearFormat'];
+		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+		months: ComponentProps<typeof CalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof CalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
 		month: DateValue;
 		placeholder: DateValue | undefined;
 		locale: string;
@@ -29,13 +29,13 @@
 
 	function formatYear(date: DateValue) {
 		const dateObj = date.toDate(getLocalTimeZone());
-		if (typeof yearFormat === 'function') return yearFormat(dateObj.getFullYear());
+		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
 		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
 	}
 
 	function formatMonth(date: DateValue) {
 		const dateObj = date.toDate(getLocalTimeZone());
-		if (typeof monthFormat === 'function') return monthFormat(dateObj.getMonth() + 1);
+		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
 		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
 	}
 </script>
@@ -58,15 +58,15 @@
 	<CalendarYearSelect {years} {yearFormat} value={month.year} />
 {/snippet}
 
-{#if captionLayout === 'dropdown'}
+{#if captionLayout === "dropdown"}
 	{@render MonthSelect()}
 	{@render YearSelect()}
-{:else if captionLayout === 'dropdown-months'}
+{:else if captionLayout === "dropdown-months"}
 	{@render MonthSelect()}
 	{#if placeholder}
 		{formatYear(placeholder)}
 	{/if}
-{:else if captionLayout === 'dropdown-years'}
+{:else if captionLayout === "dropdown-years"}
 	{#if placeholder}
 		{formatMonth(placeholder)}
 	{/if}
diff --git a/src/lib/components/ui/calendar/calendar-cell.svelte b/src/lib/components/ui/calendar/calendar-cell.svelte
index b200466..7ceb5e1 100644
--- a/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		'relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)',
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-day.svelte b/src/lib/components/ui/calendar/calendar-day.svelte
index 7d31616..edc8c9d 100644
--- a/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/src/lib/components/ui/calendar/calendar-day.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from "$lib/utils.js";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
@@ -12,21 +12,21 @@
 <CalendarPrimitive.Day
 	bind:ref
 	class={cn(
-		'flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none',
-		'[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
-		'not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground',
-		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground',
-		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:text-foreground',
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none",
+		"[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+		"not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:text-foreground",
 		// Outside months
-		'[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground',
+		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
 		// Disabled
-		'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		// Unavailable
-		'data-[unavailable]:text-muted-foreground data-[unavailable]:line-through',
+		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
 		// focus
-		'focus:relative focus:border-ring focus:ring-ring/50',
+		"focus:border-ring focus:ring-ring/50 focus:relative",
 		// inner spans
-		'[&>span]:text-xs [&>span]:opacity-70',
+		"[&>span]:text-xs [&>span]:opacity-70",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-grid-body.svelte b/src/lib/components/ui/calendar/calendar-grid-body.svelte
index a1a2ce3..8cd86de 100644
--- a/src/lib/components/ui/calendar/calendar-grid-body.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/calendar/calendar-grid-head.svelte b/src/lib/components/ui/calendar/calendar-grid-head.svelte
index a60d63a..333edc4 100644
--- a/src/lib/components/ui/calendar/calendar-grid-head.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/calendar/calendar-grid-row.svelte b/src/lib/components/ui/calendar/calendar-grid-row.svelte
index b41ce7e..9032236 100644
--- a/src/lib/components/ui/calendar/calendar-grid-row.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,4 +9,4 @@
 	}: CalendarPrimitive.GridRowProps = $props();
 </script>
 
-<CalendarPrimitive.GridRow bind:ref class={cn('flex', className)} {...restProps} />
+<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
diff --git a/src/lib/components/ui/calendar/calendar-grid.svelte b/src/lib/components/ui/calendar/calendar-grid.svelte
index 42eabfb..5fbb18f 100644
--- a/src/lib/components/ui/calendar/calendar-grid.svelte
+++ b/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <CalendarPrimitive.Grid
 	bind:ref
-	class={cn('flex w-full border-collapse flex-col', className)}
+	class={cn("flex w-full border-collapse flex-col", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/calendar/calendar-head-cell.svelte b/src/lib/components/ui/calendar/calendar-head-cell.svelte
index 1992397..131807e 100644
--- a/src/lib/components/ui/calendar/calendar-head-cell.svelte
+++ b/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <CalendarPrimitive.HeadCell
 	bind:ref
 	class={cn(
-		'w-(--cell-size) rounded-md text-[0.8rem] font-normal text-muted-foreground',
+		"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-header.svelte b/src/lib/components/ui/calendar/calendar-header.svelte
index dee4af1..c39e955 100644
--- a/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/src/lib/components/ui/calendar/calendar-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Header
 	bind:ref
 	class={cn(
-		'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
+		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-heading.svelte b/src/lib/components/ui/calendar/calendar-heading.svelte
index 60f570a..a9b9810 100644
--- a/src/lib/components/ui/calendar/calendar-heading.svelte
+++ b/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <CalendarPrimitive.Heading
 	bind:ref
-	class={cn('px-(--cell-size) text-sm font-medium', className)}
+	class={cn("px-(--cell-size) text-sm font-medium", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/calendar/calendar-month-select.svelte b/src/lib/components/ui/calendar/calendar-month-select.svelte
index 428054b..63e76f6 100644
--- a/src/lib/components/ui/calendar/calendar-month-select.svelte
+++ b/src/lib/components/ui/calendar/calendar-month-select.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
@@ -14,13 +14,13 @@
 
 <span
 	class={cn(
-		'relative flex rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
 		className
 	)}
 >
 	<CalendarPrimitive.MonthSelect
 		bind:ref
-		class="absolute inset-0 bg-background opacity-0 dark:bg-popover dark:text-popover-foreground"
+		class="bg-background dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
 		{...restProps}
 	>
 		{#snippet child({ props, monthItems, selectedMonthItem })}
@@ -37,11 +37,11 @@
 				{/each}
 			</select>
 			<span
-				class="flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
-				<ChevronDownIcon class={cn('size-4', className)} />
+				<ChevronDownIcon class={cn("size-4", className)} />
 			</span>
 		{/snippet}
 	</CalendarPrimitive.MonthSelect>
diff --git a/src/lib/components/ui/calendar/calendar-month.svelte b/src/lib/components/ui/calendar/calendar-month.svelte
index 8c564ef..7bdafe7 100644
--- a/src/lib/components/ui/calendar/calendar-month.svelte
+++ b/src/lib/components/ui/calendar/calendar-month.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { type WithElementRef, cn } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { type WithElementRef, cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<div {...restProps} bind:this={ref} class={cn('flex w-full flex-col gap-4', className)}>
+<div {...restProps} bind:this={ref} class={cn("flex w-full flex-col gap-4", className)}>
 	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/calendar/calendar-months.svelte b/src/lib/components/ui/calendar/calendar-months.svelte
index db0d341..f717a9d 100644
--- a/src/lib/components/ui/calendar/calendar-months.svelte
+++ b/src/lib/components/ui/calendar/calendar-months.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 
 <div
 	bind:this={ref}
-	class={cn('relative flex flex-col gap-4 md:flex-row', className)}
+	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/calendar/calendar-nav.svelte b/src/lib/components/ui/calendar/calendar-nav.svelte
index 5ce494d..27f33d7 100644
--- a/src/lib/components/ui/calendar/calendar-nav.svelte
+++ b/src/lib/components/ui/calendar/calendar-nav.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <nav
 	{...restProps}
 	bind:this={ref}
-	class={cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', className)}
+	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
 >
 	{@render children?.()}
 </nav>
diff --git a/src/lib/components/ui/calendar/calendar-next-button.svelte b/src/lib/components/ui/calendar/calendar-next-button.svelte
index 04590dc..cc5e8a9 100644
--- a/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/format.js';
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		variant = 'ghost',
+		variant = "ghost",
 		...restProps
 	}: CalendarPrimitive.NextButtonProps & {
 		variant?: ButtonVariant;
@@ -16,14 +16,14 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRightIcon class={cn('size-4', className)} />
+	<ChevronRightIcon class={cn("size-4", className)} />
 {/snippet}
 
 <CalendarPrimitive.NextButton
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-prev-button.svelte b/src/lib/components/ui/calendar/calendar-prev-button.svelte
index e0102b8..fc0dd6c 100644
--- a/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
-	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/format.js';
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		variant = 'ghost',
+		variant = "ghost",
 		...restProps
 	}: CalendarPrimitive.PrevButtonProps & {
 		variant?: ButtonVariant;
@@ -16,14 +16,14 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class={cn('size-4', className)} />
+	<ChevronLeftIcon class={cn("size-4", className)} />
 {/snippet}
 
 <CalendarPrimitive.PrevButton
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/calendar/calendar-year-select.svelte b/src/lib/components/ui/calendar/calendar-year-select.svelte
index 8647acb..bb580be 100644
--- a/src/lib/components/ui/calendar/calendar-year-select.svelte
+++ b/src/lib/components/ui/calendar/calendar-year-select.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
@@ -13,13 +13,13 @@
 
 <span
 	class={cn(
-		'relative flex rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
 		className
 	)}
 >
 	<CalendarPrimitive.YearSelect
 		bind:ref
-		class="absolute inset-0 opacity-0 dark:bg-popover dark:text-popover-foreground"
+		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
 		{...restProps}
 	>
 		{#snippet child({ props, yearItems, selectedYearItem })}
@@ -36,11 +36,11 @@
 				{/each}
 			</select>
 			<span
-				class="flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
-				<ChevronDownIcon class={cn('size-4', className)} />
+				<ChevronDownIcon class={cn("size-4", className)} />
 			</span>
 		{/snippet}
 	</CalendarPrimitive.YearSelect>
diff --git a/src/lib/components/ui/calendar/calendar.svelte b/src/lib/components/ui/calendar/calendar.svelte
index ef7bfec..463d571 100644
--- a/src/lib/components/ui/calendar/calendar.svelte
+++ b/src/lib/components/ui/calendar/calendar.svelte
@@ -1,41 +1,41 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import * as Calendar from './index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { ButtonVariant } from '../button/button.svelte';
-	import { isEqualMonth, type DateValue } from '@internationalized/date';
-	import type { Snippet } from 'svelte';
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ButtonVariant } from "../button/button.svelte";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		placeholder = $bindable(),
 		class: className,
-		weekdayFormat = 'short',
-		buttonVariant = 'ghost',
-		captionLayout = 'label',
-		locale = 'en-US',
+		weekdayFormat = "short",
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
 		months: monthsProp,
 		years,
 		monthFormat: monthFormatProp,
-		yearFormat = 'numeric',
+		yearFormat = "numeric",
 		day,
 		disableDaysOutsideMonth = false,
 		...restProps
 	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
 		buttonVariant?: ButtonVariant;
-		captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
-		months?: CalendarPrimitive.MonthSelectProps['months'];
-		years?: CalendarPrimitive.YearSelectProps['years'];
-		monthFormat?: CalendarPrimitive.MonthSelectProps['monthFormat'];
-		yearFormat?: CalendarPrimitive.YearSelectProps['yearFormat'];
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: CalendarPrimitive.MonthSelectProps["months"];
+		years?: CalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
 		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
 	} = $props();
 
 	const monthFormat = $derived.by(() => {
 		if (monthFormatProp) return monthFormatProp;
-		if (captionLayout.startsWith('dropdown')) return 'short';
-		return 'long';
+		if (captionLayout.startsWith("dropdown")) return "short";
+		return "long";
 	});
 </script>
 
@@ -50,7 +50,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{weekdayFormat}
 	{disableDaysOutsideMonth}
 	class={cn(
-		'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+		"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
 		className
 	)}
 	{locale}
@@ -97,7 +97,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 											{#if day}
 												{@render day({
 													day: date,
-													outsideMonth: !isEqualMonth(date, month.value)
+													outsideMonth: !isEqualMonth(date, month.value),
 												})}
 											{:else}
 												<Calendar.Day />
diff --git a/src/lib/components/ui/calendar/index.ts b/src/lib/components/ui/calendar/index.ts
index 180d173..f3a16d2 100644
--- a/src/lib/components/ui/calendar/index.ts
+++ b/src/lib/components/ui/calendar/index.ts
@@ -1,21 +1,21 @@
-import Root from './calendar.svelte';
-import Cell from './calendar-cell.svelte';
-import Day from './calendar-day.svelte';
-import Grid from './calendar-grid.svelte';
-import Header from './calendar-header.svelte';
-import Months from './calendar-months.svelte';
-import GridRow from './calendar-grid-row.svelte';
-import Heading from './calendar-heading.svelte';
-import GridBody from './calendar-grid-body.svelte';
-import GridHead from './calendar-grid-head.svelte';
-import HeadCell from './calendar-head-cell.svelte';
-import NextButton from './calendar-next-button.svelte';
-import PrevButton from './calendar-prev-button.svelte';
-import MonthSelect from './calendar-month-select.svelte';
-import YearSelect from './calendar-year-select.svelte';
-import Month from './calendar-month.svelte';
-import Nav from './calendar-nav.svelte';
-import Caption from './calendar-caption.svelte';
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";
 
 export {
 	Day,
@@ -36,5 +36,5 @@ export {
 	MonthSelect,
 	Caption,
 	//
-	Root as Calendar
+	Root as Calendar,
 };
diff --git a/src/lib/components/ui/card/card-action.svelte b/src/lib/components/ui/card/card-action.svelte
index 56f455e..7c48844 100644
--- a/src/lib/components/ui/card/card-action.svelte
+++ b/src/lib/components/ui/card/card-action.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-action"
 	class={cn(
-		'cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+		"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
index 814b10e..4f60ee3 100644
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-content"
-	class={cn('px-4 group-data-[size=sm]/card:px-3', className)}
+	class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
index 6004eb8..9b20ac7 100644
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <p
 	bind:this={ref}
 	data-slot="card-description"
-	class={cn('text-sm text-muted-foreground', className)}
+	class={cn("text-muted-foreground text-sm", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
index 38c3d03..1efff6d 100644
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn(
-		'flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3',
-		className
-	)}
+	class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
index 68ad8ff..7eb69e1 100644
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-header"
 	class={cn(
-		'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',
+		"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
index da77384..1523fc5 100644
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-title"
-	class={cn('text-base leading-snug font-medium group-data-[size=sm]/card:text-sm', className)}
+	class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
index 554417f..2b4f81a 100644
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -1,24 +1,21 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		size = 'default',
+		size = "default",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: 'default' | 'sm' } = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn(
-		'group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
-		className
-	)}
+	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
index 77d3674..4d3fce4 100644
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@@ -1,10 +1,10 @@
-import Root from './card.svelte';
-import Content from './card-content.svelte';
-import Description from './card-description.svelte';
-import Footer from './card-footer.svelte';
-import Header from './card-header.svelte';
-import Title from './card-title.svelte';
-import Action from './card-action.svelte';
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
 
 export {
 	Root,
@@ -21,5 +21,5 @@ export {
 	Footer as CardFooter,
 	Header as CardHeader,
 	Title as CardTitle,
-	Action as CardAction
+	Action as CardAction,
 };
diff --git a/src/lib/components/ui/carousel/carousel-content.svelte b/src/lib/components/ui/carousel/carousel-content.svelte
index 7e65a4a..84c71f8 100644
--- a/src/lib/components/ui/carousel/carousel-content.svelte
+++ b/src/lib/components/ui/carousel/carousel-content.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import emblaCarouselSvelte from 'embla-carousel-svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { getEmblaContext } from './context.js';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import emblaCarouselSvelte from "embla-carousel-svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,7 +11,7 @@
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 
-	const emblaCtx = getEmblaContext('<Carousel.Content/>');
+	const emblaCtx = getEmblaContext("<Carousel.Content/>");
 </script>
 
 <div
@@ -19,20 +19,20 @@
 	class="overflow-hidden"
 	use:emblaCarouselSvelte={{
 		options: {
-			container: '[data-embla-container]',
-			slides: '[data-embla-slide]',
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
 			...emblaCtx.options,
-			axis: emblaCtx.orientation === 'horizontal' ? 'x' : 'y'
+			axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
 		},
-		plugins: emblaCtx.plugins
+		plugins: emblaCtx.plugins,
 	}}
 	onemblaInit={emblaCtx.onInit}
 >
 	<div
 		bind:this={ref}
 		class={cn(
-			'flex',
-			emblaCtx.orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col',
+			"flex",
+			emblaCtx.orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
 			className
 		)}
 		data-embla-container=""
diff --git a/src/lib/components/ui/carousel/carousel-item.svelte b/src/lib/components/ui/carousel/carousel-item.svelte
index 847249c..ebf1649 100644
--- a/src/lib/components/ui/carousel/carousel-item.svelte
+++ b/src/lib/components/ui/carousel/carousel-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { getEmblaContext } from './context.js';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,7 +10,7 @@
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 
-	const emblaCtx = getEmblaContext('<Carousel.Item/>');
+	const emblaCtx = getEmblaContext("<Carousel.Item/>");
 </script>
 
 <div
@@ -19,8 +19,8 @@
 	role="group"
 	aria-roledescription="slide"
 	class={cn(
-		'min-w-0 shrink-0 grow-0 basis-full',
-		emblaCtx.orientation === 'horizontal' ? 'ps-4' : 'pt-4',
+		"min-w-0 shrink-0 grow-0 basis-full",
+		emblaCtx.orientation === "horizontal" ? "ps-4" : "pt-4",
 		className
 	)}
 	data-embla-slide=""
diff --git a/src/lib/components/ui/carousel/carousel-next.svelte b/src/lib/components/ui/carousel/carousel-next.svelte
index 081e787..194932a 100644
--- a/src/lib/components/ui/carousel/carousel-next.svelte
+++ b/src/lib/components/ui/carousel/carousel-next.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { WithoutChildren } from 'bits-ui';
-	import { getEmblaContext } from './context.js';
-	import { cn } from '$lib/utils/format.js';
-	import { Button, type Props } from '$lib/components/ui/button/index.js';
+	import type { WithoutChildren } from "bits-ui";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+	import { Button, type Props } from "$lib/components/ui/button/index.js";
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = 'outline',
-		size = 'icon-sm',
+		variant = "outline",
+		size = "icon-sm",
 		...restProps
 	}: WithoutChildren<Props> = $props();
 
-	const emblaCtx = getEmblaContext('<Carousel.Next/>');
+	const emblaCtx = getEmblaContext("<Carousel.Next/>");
 </script>
 
 <Button
@@ -23,10 +23,10 @@
 	aria-disabled={!emblaCtx.canScrollNext}
 	disabled={!emblaCtx.canScrollNext}
 	class={cn(
-		'absolute touch-manipulation rounded-full',
-		emblaCtx.orientation === 'horizontal'
-			? '-end-12 top-1/2 -translate-y-1/2'
-			: 'start-1/2 -bottom-12 -translate-x-1/2 rotate-90',
+		"rounded-full absolute touch-manipulation",
+		emblaCtx.orientation === "horizontal"
+			? "-end-12 top-1/2 -translate-y-1/2"
+			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
 		className
 	)}
 	onclick={emblaCtx.scrollNext}
@@ -34,6 +34,6 @@
 	bind:ref
 	{...restProps}
 >
-	<ChevronRightIcon />
+	<ChevronRightIcon  />
 	<span class="sr-only">Next slide</span>
 </Button>
diff --git a/src/lib/components/ui/carousel/carousel-previous.svelte b/src/lib/components/ui/carousel/carousel-previous.svelte
index fd2c2dc..5020ab8 100644
--- a/src/lib/components/ui/carousel/carousel-previous.svelte
+++ b/src/lib/components/ui/carousel/carousel-previous.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { WithoutChildren } from 'bits-ui';
-	import { getEmblaContext } from './context.js';
-	import { cn } from '$lib/utils/format.js';
-	import { Button, type Props } from '$lib/components/ui/button/index.js';
+	import type { WithoutChildren } from "bits-ui";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "$lib/utils.js";
+	import { Button, type Props } from "$lib/components/ui/button/index.js";
 	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = 'outline',
-		size = 'icon-sm',
+		variant = "outline",
+		size = "icon-sm",
 		...restProps
 	}: WithoutChildren<Props> = $props();
 
-	const emblaCtx = getEmblaContext('<Carousel.Previous/>');
+	const emblaCtx = getEmblaContext("<Carousel.Previous/>");
 </script>
 
 <Button
@@ -23,10 +23,10 @@
 	aria-disabled={!emblaCtx.canScrollPrev}
 	disabled={!emblaCtx.canScrollPrev}
 	class={cn(
-		'absolute touch-manipulation rounded-full',
-		emblaCtx.orientation === 'horizontal'
-			? '-start-12 top-1/2 -translate-y-1/2'
-			: 'start-1/2 -top-12 -translate-x-1/2 rotate-90',
+		"rounded-full absolute touch-manipulation",
+		emblaCtx.orientation === "horizontal"
+			? "-start-12 top-1/2 -translate-y-1/2"
+			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
 		className
 	)}
 	onclick={emblaCtx.scrollPrev}
@@ -34,6 +34,6 @@
 	{...restProps}
 	bind:ref
 >
-	<ChevronLeftIcon />
+	<ChevronLeftIcon  />
 	<span class="sr-only">Previous slide</span>
 </Button>
diff --git a/src/lib/components/ui/carousel/carousel.svelte b/src/lib/components/ui/carousel/carousel.svelte
index 6f7c828..b3933b8 100644
--- a/src/lib/components/ui/carousel/carousel.svelte
+++ b/src/lib/components/ui/carousel/carousel.svelte
@@ -3,16 +3,16 @@
 		type CarouselAPI,
 		type CarouselProps,
 		type EmblaContext,
-		setEmblaContext
-	} from './context.js';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+		setEmblaContext,
+	} from "./context.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		opts = {},
 		plugins = [],
 		setApi = () => {},
-		orientation = 'horizontal',
+		orientation = "horizontal",
 		class: className,
 		children,
 		...restProps
@@ -32,7 +32,7 @@
 		onInit,
 		scrollSnaps: [],
 		selectedIndex: 0,
-		scrollTo
+		scrollTo,
 	});
 
 	setEmblaContext(carouselState);
@@ -57,10 +57,10 @@
 	}
 
 	function handleKeyDown(e: KeyboardEvent) {
-		if (e.key === 'ArrowLeft') {
+		if (e.key === "ArrowLeft") {
 			e.preventDefault();
 			scrollPrev();
-		} else if (e.key === 'ArrowRight') {
+		} else if (e.key === "ArrowRight") {
 			e.preventDefault();
 			scrollNext();
 		}
@@ -71,13 +71,13 @@
 		setApi(carouselState.api);
 
 		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
-		carouselState.api.on('select', onSelect);
+		carouselState.api.on("select", onSelect);
 		onSelect();
 	}
 
 	$effect(() => {
 		return () => {
-			carouselState.api?.off('select', onSelect);
+			carouselState.api?.off("select", onSelect);
 		};
 	});
 </script>
@@ -85,7 +85,7 @@
 <div
 	bind:this={ref}
 	data-slot="carousel"
-	class={cn('relative', className)}
+	class={cn("relative", className)}
 	role="region"
 	aria-roledescription="carousel"
 	{...restProps}
diff --git a/src/lib/components/ui/carousel/context.ts b/src/lib/components/ui/carousel/context.ts
index 93babe1..a5fd74f 100644
--- a/src/lib/components/ui/carousel/context.ts
+++ b/src/lib/components/ui/carousel/context.ts
@@ -1,13 +1,13 @@
-import type { WithElementRef } from '$lib/utils/format.js';
+import type { WithElementRef } from "$lib/utils.js";
 import type {
 	EmblaCarouselSvelteType,
-	default as emblaCarouselSvelte
-} from 'embla-carousel-svelte';
-import { getContext, hasContext, setContext } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+	default as emblaCarouselSvelte,
+} from "embla-carousel-svelte";
+import { getContext, hasContext, setContext } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 
 export type CarouselAPI =
-	NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (
+	NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (
 		evt: CustomEvent<infer CarouselAPI>
 	) => void
 		? CarouselAPI
@@ -15,8 +15,8 @@ export type CarouselAPI =
 
 type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
 
-export type CarouselOptions = EmblaCarouselConfig['options'];
-export type CarouselPlugins = EmblaCarouselConfig['plugins'];
+export type CarouselOptions = EmblaCarouselConfig["options"];
+export type CarouselPlugins = EmblaCarouselConfig["plugins"];
 
 ////
 
@@ -24,14 +24,14 @@ export type CarouselProps = {
 	opts?: CarouselOptions;
 	plugins?: CarouselPlugins;
 	setApi?: (api: CarouselAPI | undefined) => void;
-	orientation?: 'horizontal' | 'vertical';
+	orientation?: "horizontal" | "vertical";
 } & WithElementRef<HTMLAttributes<HTMLDivElement>>;
 
-const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
 
 export type EmblaContext = {
 	api: CarouselAPI | undefined;
-	orientation: 'horizontal' | 'vertical';
+	orientation: "horizontal" | "vertical";
 	scrollNext: () => void;
 	scrollPrev: () => void;
 	canScrollNext: boolean;
@@ -50,7 +50,7 @@ export function setEmblaContext(config: EmblaContext): EmblaContext {
 	return config;
 }
 
-export function getEmblaContext(name = 'This component') {
+export function getEmblaContext(name = "This component") {
 	if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
 		throw new Error(`${name} must be used within a <Carousel.Root> component`);
 	}
diff --git a/src/lib/components/ui/carousel/index.ts b/src/lib/components/ui/carousel/index.ts
index 2d92c70..957fc74 100644
--- a/src/lib/components/ui/carousel/index.ts
+++ b/src/lib/components/ui/carousel/index.ts
@@ -1,8 +1,8 @@
-import Root from './carousel.svelte';
-import Content from './carousel-content.svelte';
-import Item from './carousel-item.svelte';
-import Previous from './carousel-previous.svelte';
-import Next from './carousel-next.svelte';
+import Root from "./carousel.svelte";
+import Content from "./carousel-content.svelte";
+import Item from "./carousel-item.svelte";
+import Previous from "./carousel-previous.svelte";
+import Next from "./carousel-next.svelte";
 
 export {
 	Root,
@@ -15,5 +15,5 @@ export {
 	Content as CarouselContent,
 	Item as CarouselItem,
 	Previous as CarouselPrevious,
-	Next as CarouselNext
+	Next as CarouselNext,
 };
diff --git a/src/lib/components/ui/chart/chart-container.svelte b/src/lib/components/ui/chart/chart-container.svelte
index 9aa967e..1eb8e39 100644
--- a/src/lib/components/ui/chart/chart-container.svelte
+++ b/src/lib/components/ui/chart/chart-container.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import ChartStyle from './chart-style.svelte';
-	import { setChartContext, type ChartConfig } from './chart-utils.js';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import ChartStyle from "./chart-style.svelte";
+	import { setChartContext, type ChartConfig } from "./chart-utils.js";
 
 	const uid = $props.id();
 
@@ -17,12 +17,12 @@
 		config: ChartConfig;
 	} = $props();
 
-	const chartId = $derived(`chart-${id || uid.replace(/:/g, '')}`);
+	const chartId = $derived(`chart-${id || uid.replace(/:/g, "")}`);
 
 	setChartContext({
 		get config() {
 			return config;
-		}
+		},
 	});
 </script>
 
@@ -31,46 +31,46 @@
 	data-chart={chartId}
 	data-slot="chart"
 	class={cn(
-		'flex aspect-video justify-center overflow-visible text-xs',
+		"flex aspect-video justify-center overflow-visible text-xs",
 		// Overrides
 		//
 		// Stroke around dots/marks when hovering
-		'[&_.lc-highlight-point]:stroke-transparent',
+		"[&_.lc-highlight-point]:stroke-transparent",
 		// override the default stroke color of lines
-		'[&_.lc-line]:stroke-border/50',
+		"[&_.lc-line]:stroke-border/50",
 
 		// by default, layerchart shows a line intersecting the point when hovering, this hides that
-		'[&_.lc-highlight-line]:stroke-0',
+		"[&_.lc-highlight-line]:stroke-0",
 
 		// by default, when you hover a point on a stacked series chart, it will drop the opacity
 		// of the other series, this overrides that
-		'[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible',
+		"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible",
 
 		// We don't want the little tick lines between the axis labels and the chart, so we remove
 		// the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
 		// chart.
-		'[&_.lc-axis-tick]:stroke-0',
+		"[&_.lc-axis-tick]:stroke-0",
 
 		// We don't want to display the rule on the x/y axis, as there is already going to be
 		// a grid line there and rule ends up overlapping the marks because it is rendered after
 		// the marks
-		'[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0',
-		'[&_.lc-grid-x-radial-circle]:stroke-border [&_.lc-grid-x-radial-line]:stroke-border',
-		'[&_.lc-grid-y-radial-circle]:stroke-border [&_.lc-grid-y-radial-line]:stroke-border',
+		"[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0",
+		"[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border",
+		"[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border",
 
 		// Legend adjustments
-		'[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5',
-		'[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4',
-		'[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]',
+		"[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5",
+		"[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4",
+		"[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]",
 
 		// Labels
-		'[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent',
+		"[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent",
 
 		// Tick labels on th x/y axes
-		'[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal',
-		'[&_.lc-tooltip-rects-g]:fill-transparent',
-		'[&_.lc-layout-svg-g]:fill-transparent',
-		'[&_.lc-root-container]:w-full',
+		"[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal",
+		"[&_.lc-tooltip-rects-g]:fill-transparent",
+		"[&_.lc-layout-svg-g]:fill-transparent",
+		"[&_.lc-root-container]:w-full",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/chart/chart-style.svelte b/src/lib/components/ui/chart/chart-style.svelte
index 1e77982..ea1b3b2 100644
--- a/src/lib/components/ui/chart/chart-style.svelte
+++ b/src/lib/components/ui/chart/chart-style.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { THEMES, type ChartConfig } from './chart-utils.js';
+	import { THEMES, type ChartConfig } from "./chart-utils.js";
 
 	let { id, config }: { id: string; config: ChartConfig } = $props();
 
@@ -19,18 +19,18 @@
 				return color ? `\t--color-${key}: ${color};` : null;
 			});
 
-			content += color.join('\n') + '\n}';
+			content += color.join("\n") + "\n}";
 
 			themeContents.push(content);
 		}
 
-		return themeContents.join('\n');
+		return themeContents.join("\n");
 	});
 </script>
 
 {#if themeContents}
 	{#key id}
-		<svelte:element this={'style'}>
+		<svelte:element this={"style"}>
 			{themeContents}
 		</svelte:element>
 	{/key}
diff --git a/src/lib/components/ui/chart/chart-tooltip.svelte b/src/lib/components/ui/chart/chart-tooltip.svelte
index e5bf3fb..e0da9ca 100644
--- a/src/lib/components/ui/chart/chart-tooltip.svelte
+++ b/src/lib/components/ui/chart/chart-tooltip.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from './chart-utils.js';
-	import { getChartContext, Tooltip as TooltipPrimitive } from 'layerchart';
-	import type { Snippet } from 'svelte';
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from "./chart-utils.js";
+	import { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
+	import type { Snippet } from "svelte";
 
-	function defaultFormatter(value: unknown) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function defaultFormatter(value: any, _payload: TooltipPayload[]) {
 		return `${value}`;
 	}
 
@@ -13,7 +14,7 @@
 		ref = $bindable(null),
 		class: className,
 		hideLabel = false,
-		indicator = 'dot',
+		indicator = "dot",
 		hideIndicator = false,
 		labelKey,
 		label,
@@ -26,14 +27,13 @@
 	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
 		hideLabel?: boolean;
 		label?: string;
-		indicator?: 'line' | 'dot' | 'dashed';
+		indicator?: "line" | "dot" | "dashed";
 		nameKey?: string;
 		labelKey?: string;
 		hideIndicator?: boolean;
 		labelClassName?: string;
-		labelFormatter?:
-			| ((value: unknown, payload: TooltipPayload[]) => string | number | Snippet)
-			| null;
+		labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+			((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
 		formatter?: Snippet<
 			[
 				{
@@ -42,7 +42,7 @@
 					item: TooltipPayload;
 					index: number;
 					payload: TooltipPayload[];
-				}
+				},
 			]
 		>;
 	} = $props();
@@ -65,7 +65,7 @@
 		// Get the x-axis label value from the raw tooltip data (e.g. a Date or month string)
 		const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;
 
-		const key = labelKey ?? item?.label ?? item?.key ?? 'value';
+		const key = labelKey ?? item?.label ?? item?.key ?? "value";
 		const itemConfig = getPayloadConfigFromPayload(
 			chart.config,
 			item,
@@ -74,7 +74,7 @@
 		);
 
 		let value: unknown;
-		if (!labelKey && typeof label === 'string') {
+		if (!labelKey && typeof label === "string") {
 			value = chart.config[label as keyof typeof chart.config]?.label ?? label;
 		} else if (labelKey) {
 			value = itemConfig?.label ?? dataLabel;
@@ -87,13 +87,13 @@
 		return labelFormatter(value, visibleSeries);
 	});
 
-	const nestLabel = $derived(visibleSeries.length === 1 && indicator !== 'dot');
+	const nestLabel = $derived(visibleSeries.length === 1 && indicator !== "dot");
 </script>
 
 {#snippet TooltipLabel()}
 	{#if formattedLabel}
-		<div class={cn('font-medium', labelClassName)}>
-			{#if typeof formattedLabel === 'function'}
+		<div class={cn("font-medium", labelClassName)}>
+			{#if typeof formattedLabel === "function"}
 				{@render formattedLabel()}
 			{:else}
 				{formattedLabel}
@@ -106,7 +106,7 @@
 	<div
 		bind:this={ref}
 		class={cn(
-			'grid min-w-[9rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+			"border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
 			className
 		)}
 		{...restProps}
@@ -116,7 +116,7 @@
 		{/if}
 		<div class="grid gap-1.5">
 			{#each visibleSeries as item, i (item.key + i)}
-				{@const key = `${nameKey || item.key || item.label || 'value'}`}
+				{@const key = `${nameKey || item.key || item.label || "value"}`}
 				{@const itemConfig = getPayloadConfigFromPayload(
 					chart.config,
 					item,
@@ -126,8 +126,8 @@
 				{@const indicatorColor = color || item.config?.color || item.color}
 				<div
 					class={cn(
-						'flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground',
-						indicator === 'dot' && 'items-center'
+						"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
+						indicator === "dot" && "items-center"
 					)}
 				>
 					{#if formatter && item.value !== undefined && item.label}
@@ -136,7 +136,7 @@
 							name: item.label,
 							item,
 							index: i,
-							payload: visibleSeries
+							payload: visibleSeries,
 						})}
 					{:else}
 						{#if itemConfig?.icon}
@@ -144,18 +144,22 @@
 						{:else if !hideIndicator}
 							<div
 								style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
-								class={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
-									'size-2.5': indicator === 'dot',
-									'h-full w-1': indicator === 'line',
-									'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
-									'my-0.5': nestLabel && indicator === 'dashed'
-								})}
+								class={cn(
+									"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+									{
+										"size-2.5": indicator === "dot",
+										"h-full w-1": indicator === "line",
+										"w-0 border-[1.5px] border-dashed bg-transparent":
+											indicator === "dashed",
+										"my-0.5": nestLabel && indicator === "dashed",
+									}
+								)}
 							></div>
 						{/if}
 						<div
 							class={cn(
-								'flex flex-1 shrink-0 justify-between leading-none',
-								nestLabel ? 'items-end' : 'items-center'
+								"flex flex-1 shrink-0 justify-between leading-none",
+								nestLabel ? "items-end" : "items-center"
 							)}
 						>
 							<div class="grid gap-1.5">
@@ -167,7 +171,7 @@
 								</span>
 							</div>
 							{#if item.value !== undefined}
-								<span class="font-mono font-medium text-foreground tabular-nums">
+								<span class="text-foreground font-mono font-medium tabular-nums">
 									{item.value.toLocaleString()}
 								</span>
 							{/if}
diff --git a/src/lib/components/ui/chart/chart-utils.ts b/src/lib/components/ui/chart/chart-utils.ts
index 3c0cced..a289e35 100644
--- a/src/lib/components/ui/chart/chart-utils.ts
+++ b/src/lib/components/ui/chart/chart-utils.ts
@@ -1,7 +1,7 @@
-import type { Tooltip } from 'layerchart';
-import { getContext, setContext, type Component, type Snippet } from 'svelte';
+import type { Tooltip } from "layerchart";
+import { getContext, setContext, type Component, type Snippet } from "svelte";
 
-export const THEMES = { light: '', dark: '.dark' } as const;
+export const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
 	[k in string]: {
@@ -25,10 +25,10 @@ export function getPayloadConfigFromPayload(
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	data?: Record<string, any> | null
 ) {
-	if (typeof payload !== 'object' || payload === null) return undefined;
+	if (typeof payload !== "object" || payload === null) return undefined;
 
 	const payloadConfig =
-		'config' in payload && typeof payload.config === 'object' && payload.config !== null
+		"config" in payload && typeof payload.config === "object" && payload.config !== null
 			? payload.config
 			: undefined;
 
@@ -38,15 +38,15 @@ export function getPayloadConfigFromPayload(
 		configLabelKey = payload.key;
 	} else if (payload.label === key) {
 		configLabelKey = payload.label;
-	} else if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+	} else if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
 		configLabelKey = payload[key as keyof typeof payload] as string;
 	} else if (
 		payloadConfig !== undefined &&
 		key in payloadConfig &&
-		typeof payloadConfig[key as keyof typeof payloadConfig] === 'string'
+		typeof payloadConfig[key as keyof typeof payloadConfig] === "string"
 	) {
 		configLabelKey = payloadConfig[key as keyof typeof payloadConfig] as string;
-	} else if (data != null && key in data && typeof data[key] === 'string') {
+	} else if (data != null && key in data && typeof data[key] === "string") {
 		configLabelKey = data[key] as string;
 	}
 
@@ -57,7 +57,7 @@ type ChartContextValue = {
 	config: ChartConfig;
 };
 
-const chartContextKey = Symbol('chart-context');
+const chartContextKey = Symbol("chart-context");
 
 export function setChartContext(value: ChartContextValue) {
 	return setContext(chartContextKey, value);
diff --git a/src/lib/components/ui/chart/index.ts b/src/lib/components/ui/chart/index.ts
index 25cfcd4..f22375e 100644
--- a/src/lib/components/ui/chart/index.ts
+++ b/src/lib/components/ui/chart/index.ts
@@ -1,6 +1,6 @@
-import ChartContainer from './chart-container.svelte';
-import ChartTooltip from './chart-tooltip.svelte';
+import ChartContainer from "./chart-container.svelte";
+import ChartTooltip from "./chart-tooltip.svelte";
 
-export { getPayloadConfigFromPayload, type ChartConfig } from './chart-utils.js';
+export { getPayloadConfigFromPayload, type ChartConfig } from "./chart-utils.js";
 
 export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };
diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte
index 43e2b38..27b0da6 100644
--- a/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import MinusIcon from '@lucide/svelte/icons/minus';
 
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
@@ -27,12 +27,12 @@
 	{#snippet children({ checked, indeterminate })}
 		<div
 			data-slot="checkbox-indicator"
-			class="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
 		>
 			{#if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{:else if indeterminate}
-				<MinusIcon />
+				<MinusIcon  />
 			{/if}
 		</div>
 	{/snippet}
diff --git a/src/lib/components/ui/checkbox/index.ts b/src/lib/components/ui/checkbox/index.ts
index 5c27671..6d92d94 100644
--- a/src/lib/components/ui/checkbox/index.ts
+++ b/src/lib/components/ui/checkbox/index.ts
@@ -1,6 +1,6 @@
-import Root from './checkbox.svelte';
+import Root from "./checkbox.svelte";
 export {
 	Root,
 	//
-	Root as Checkbox
+	Root as Checkbox,
 };
diff --git a/src/lib/components/ui/collapsible/collapsible-content.svelte b/src/lib/components/ui/collapsible/collapsible-content.svelte
index 59b068c..bdabb55 100644
--- a/src/lib/components/ui/collapsible/collapsible-content.svelte
+++ b/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
 </script>
diff --git a/src/lib/components/ui/collapsible/collapsible-trigger.svelte b/src/lib/components/ui/collapsible/collapsible-trigger.svelte
index c88ceba..ece7ad6 100644
--- a/src/lib/components/ui/collapsible/collapsible-trigger.svelte
+++ b/src/lib/components/ui/collapsible/collapsible-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/collapsible/collapsible.svelte b/src/lib/components/ui/collapsible/collapsible.svelte
index 7a8c5da..39cdd4e 100644
--- a/src/lib/components/ui/collapsible/collapsible.svelte
+++ b/src/lib/components/ui/collapsible/collapsible.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/collapsible/index.ts b/src/lib/components/ui/collapsible/index.ts
index 8181f64..169b479 100644
--- a/src/lib/components/ui/collapsible/index.ts
+++ b/src/lib/components/ui/collapsible/index.ts
@@ -1,6 +1,6 @@
-import Root from './collapsible.svelte';
-import Trigger from './collapsible-trigger.svelte';
-import Content from './collapsible-content.svelte';
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
 
 export {
 	Root,
@@ -9,5 +9,5 @@ export {
 	//
 	Root as Collapsible,
 	Content as CollapsibleContent,
-	Trigger as CollapsibleTrigger
+	Trigger as CollapsibleTrigger,
 };
diff --git a/src/lib/components/ui/command/command-dialog.svelte b/src/lib/components/ui/command/command-dialog.svelte
index 6783e0f..63b445c 100644
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
-	import type { Snippet } from 'svelte';
-	import Command from './command.svelte';
-	import * as Dialog from '$lib/components/ui/dialog/index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import Command from "./command.svelte";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		open = $bindable(false),
 		ref = $bindable(null),
-		value = $bindable(''),
-		title = 'Command Palette',
-		description = 'Search for a command to run...',
+		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run...",
 		showCloseButton = false,
 		portalProps,
 		children,
@@ -33,7 +33,7 @@
 		<Dialog.Description>{description}</Dialog.Description>
 	</Dialog.Header>
 	<Dialog.Content
-		class={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)}
+		class={cn("rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0", className)}
 		{showCloseButton}
 		{portalProps}
 	>
diff --git a/src/lib/components/ui/command/command-empty.svelte b/src/lib/components/ui/command/command-empty.svelte
index dd2c522..6726cd8 100644
--- a/src/lib/components/ui/command/command-empty.svelte
+++ b/src/lib/components/ui/command/command-empty.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <CommandPrimitive.Empty
 	bind:ref
 	data-slot="command-empty"
-	class={cn('py-6 text-center text-sm', className)}
+	class={cn("py-6 text-center text-sm", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/command/command-group.svelte b/src/lib/components/ui/command/command-group.svelte
index b51fd8a..f5da0df 100644
--- a/src/lib/components/ui/command/command-group.svelte
+++ b/src/lib/components/ui/command/command-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive, useId } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Command as CommandPrimitive, useId } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -17,15 +17,14 @@
 <CommandPrimitive.Group
 	bind:ref
 	data-slot="command-group"
-	class={cn(
-		'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
-		className
-	)}
+	class={cn("text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium", className)}
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
 	{#if heading}
-		<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+		<CommandPrimitive.GroupHeading
+			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+		>
 			{heading}
 		</CommandPrimitive.GroupHeading>
 	{/if}
diff --git a/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte
index b6bfcec..1ca256f 100644
--- a/src/lib/components/ui/command/command-input.svelte
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -1,26 +1,24 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
-	import * as InputGroup from '$lib/components/ui/input-group/index.js';
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import * as InputGroup from "$lib/components/ui/input-group/index.js";
 	import SearchIcon from '@lucide/svelte/icons/search';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		value = $bindable(''),
+		value = $bindable(""),
 		...restProps
 	}: CommandPrimitive.InputProps = $props();
 </script>
 
 <div data-slot="command-input-wrapper" class="p-1 pb-0">
-	<InputGroup.Root
-		class="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!"
-	>
+	<InputGroup.Root class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
 		<CommandPrimitive.Input
 			{value}
 			data-slot="command-input"
 			class={cn(
-				'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+				"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
 				className
 			)}
 			{...restProps}
diff --git a/src/lib/components/ui/command/command-item.svelte b/src/lib/components/ui/command/command-item.svelte
index 64981de..4246840 100644
--- a/src/lib/components/ui/command/command-item.svelte
+++ b/src/lib/components/ui/command/command-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
@@ -15,13 +15,11 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+		"group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<CheckIcon
-		class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
-	/>
+	<CheckIcon class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
 </CommandPrimitive.Item>
diff --git a/src/lib/components/ui/command/command-link-item.svelte b/src/lib/components/ui/command/command-link-item.svelte
index 39dc0c8..ada6d2c 100644
--- a/src/lib/components/ui/command/command-link-item.svelte
+++ b/src/lib/components/ui/command/command-link-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/command/command-list.svelte b/src/lib/components/ui/command/command-list.svelte
index eda2aa9..f663bd3 100644
--- a/src/lib/components/ui/command/command-list.svelte
+++ b/src/lib/components/ui/command/command-list.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <CommandPrimitive.List
 	bind:ref
 	data-slot="command-list"
-	class={cn(
-		'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
-		className
-	)}
+	class={cn("no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/command/command-loading.svelte b/src/lib/components/ui/command/command-loading.svelte
index 0aaf5c3..19dd298 100644
--- a/src/lib/components/ui/command/command-loading.svelte
+++ b/src/lib/components/ui/command/command-loading.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'bits-ui';
+	import { Command as CommandPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
 </script>
diff --git a/src/lib/components/ui/command/command-separator.svelte b/src/lib/components/ui/command/command-separator.svelte
index d864a10..35c4c95 100644
--- a/src/lib/components/ui/command/command-separator.svelte
+++ b/src/lib/components/ui/command/command-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <CommandPrimitive.Separator
 	bind:ref
 	data-slot="command-separator"
-	class={cn('-mx-1 h-px bg-border', className)}
+	class={cn("bg-border -mx-1 h-px", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/command/command-shortcut.svelte b/src/lib/components/ui/command/command-shortcut.svelte
index aee8ed8..5322e6a 100644
--- a/src/lib/components/ui/command/command-shortcut.svelte
+++ b/src/lib/components/ui/command/command-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="command-shortcut"
-	class={cn(
-		'ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground',
-		className
-	)}
+	class={cn("text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/command/command.svelte b/src/lib/components/ui/command/command.svelte
index a0ef092..c814599 100644
--- a/src/lib/components/ui/command/command.svelte
+++ b/src/lib/components/ui/command/command.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from "bits-ui";
 
 	export type CommandRootApi = CommandPrimitive.Root;
 
 	let {
 		api = $bindable(null),
 		ref = $bindable(null),
-		value = $bindable(''),
+		value = $bindable(""),
 		class: className,
 		...restProps
 	}: CommandPrimitive.RootProps & {
@@ -20,9 +20,6 @@
 	bind:value
 	bind:ref
 	data-slot="command"
-	class={cn(
-		'flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground',
-		className
-	)}
+	class={cn("bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/command/index.ts b/src/lib/components/ui/command/index.ts
index d0c9476..5435fbe 100644
--- a/src/lib/components/ui/command/index.ts
+++ b/src/lib/components/ui/command/index.ts
@@ -1,14 +1,14 @@
-import Root from './command.svelte';
-import Loading from './command-loading.svelte';
-import Dialog from './command-dialog.svelte';
-import Empty from './command-empty.svelte';
-import Group from './command-group.svelte';
-import Item from './command-item.svelte';
-import Input from './command-input.svelte';
-import List from './command-list.svelte';
-import Separator from './command-separator.svelte';
-import Shortcut from './command-shortcut.svelte';
-import LinkItem from './command-link-item.svelte';
+import Root from "./command.svelte";
+import Loading from "./command-loading.svelte";
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Item from "./command-item.svelte";
+import Input from "./command-input.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+import LinkItem from "./command-link-item.svelte";
 
 export {
 	Root,
@@ -33,5 +33,5 @@ export {
 	List as CommandList,
 	Separator as CommandSeparator,
 	Shortcut as CommandShortcut,
-	Loading as CommandLoading
+	Loading as CommandLoading,
 };
diff --git a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
index 0a762d5..9ffcfbe 100644
--- a/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { Snippet } from 'svelte';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
 	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
@@ -25,15 +25,15 @@
 	data-slot="context-menu-checkbox-item"
 	data-inset={inset}
 	class={cn(
-		"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute right-2">
+		<span class="absolute right-2 pointer-events-none">
 			{#if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/src/lib/components/ui/context-menu/context-menu-content.svelte b/src/lib/components/ui/context-menu/context-menu-content.svelte
index 0b948f7..5f32420 100644
--- a/src/lib/components/ui/context-menu/context-menu-content.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
-	import ContextMenuPortal from './context-menu-portal.svelte';
-	import type { ComponentProps } from 'svelte';
-	import type { WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import ContextMenuPortal from "./context-menu-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -20,7 +20,7 @@
 		bind:ref
 		data-slot="context-menu-content"
 		class={cn(
-			'z-50 min-w-36 overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 overflow-x-hidden overflow-y-auto outline-none",
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/context-menu/context-menu-group-heading.svelte b/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
index b793991..0c0f459 100644
--- a/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,6 +16,6 @@
 	bind:ref
 	data-slot="context-menu-group-heading"
 	data-inset={inset}
-	class={cn('px-2 py-1.5 text-sm font-medium text-foreground data-inset:ps-8', className)}
+	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-inset:ps-8", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/context-menu/context-menu-group.svelte b/src/lib/components/ui/context-menu/context-menu-group.svelte
index 0a5a142..c7c1e06 100644
--- a/src/lib/components/ui/context-menu/context-menu-group.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();
 </script>
diff --git a/src/lib/components/ui/context-menu/context-menu-item.svelte b/src/lib/components/ui/context-menu/context-menu-item.svelte
index 56d87ba..fccba28 100644
--- a/src/lib/components/ui/context-menu/context-menu-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		inset,
-		variant = 'default',
+		variant = "default",
 		...restProps
 	}: ContextMenuPrimitive.ItemProps & {
 		inset?: boolean;
-		variant?: 'default' | 'destructive';
+		variant?: "default" | "destructive";
 	} = $props();
 </script>
 
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/context-menu/context-menu-label.svelte b/src/lib/components/ui/context-menu/context-menu-label.svelte
index 215ef12..8b9e9c6 100644
--- a/src/lib/components/ui/context-menu/context-menu-label.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -17,10 +17,7 @@
 	bind:this={ref}
 	data-slot="context-menu-label"
 	data-inset={inset}
-	class={cn(
-		'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7 data-inset:pl-8',
-		className
-	)}
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-inset:pl-8", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/context-menu/context-menu-portal.svelte b/src/lib/components/ui/context-menu/context-menu-portal.svelte
index d03821a..96b1e3e 100644
--- a/src/lib/components/ui/context-menu/context-menu-portal.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 
 	let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-group.svelte b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
index bd63b9f..964cb55 100644
--- a/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(''),
+		value = $bindable(""),
 		...restProps
 	}: ContextMenuPrimitive.RadioGroupProps = $props();
 </script>
diff --git a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
index 3b477f7..ad4e56f 100644
--- a/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
@@ -19,15 +19,15 @@
 	data-slot="context-menu-radio-item"
 	data-inset={inset}
 	class={cn(
-		"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute right-2">
+		<span class="absolute right-2 pointer-events-none">
 			{#if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
diff --git a/src/lib/components/ui/context-menu/context-menu-separator.svelte b/src/lib/components/ui/context-menu/context-menu-separator.svelte
index 1c8d587..7f5b237 100644
--- a/src/lib/components/ui/context-menu/context-menu-separator.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <ContextMenuPrimitive.Separator
 	bind:ref
 	data-slot="context-menu-separator"
-	class={cn('-mx-1 my-1 h-px bg-border', className)}
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/context-menu/context-menu-shortcut.svelte b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
index 972881c..3305abc 100644
--- a/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="context-menu-shortcut"
-	class={cn(
-		'ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground',
-		className
-	)}
+	class={cn("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-content.svelte b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
index 5ff4372..fa46397 100644
--- a/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <ContextMenuPrimitive.SubContent
 	bind:ref
 	data-slot="context-menu-sub-content"
-	class={cn(
-		'min-w-32 rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-		className
-	)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
index 8007cd1..af016c5 100644
--- a/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 
 	let {
@@ -19,7 +19,7 @@
 	data-slot="context-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/context-menu/context-menu-sub.svelte b/src/lib/components/ui/context-menu/context-menu-sub.svelte
index c47f6f3..a03827b 100644
--- a/src/lib/components/ui/context-menu/context-menu-sub.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-sub.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();
 </script>
diff --git a/src/lib/components/ui/context-menu/context-menu-trigger.svelte b/src/lib/components/ui/context-menu/context-menu-trigger.svelte
index f4b58f6..f6a1542 100644
--- a/src/lib/components/ui/context-menu/context-menu-trigger.svelte
+++ b/src/lib/components/ui/context-menu/context-menu-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <ContextMenuPrimitive.Trigger
 	bind:ref
 	data-slot="context-menu-trigger"
-	class={cn('cn-context-menu-trigger select-none', className)}
+	class={cn("cn-context-menu-trigger select-none", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/context-menu/context-menu.svelte b/src/lib/components/ui/context-menu/context-menu.svelte
index 486e3ad..cfaefb3 100644
--- a/src/lib/components/ui/context-menu/context-menu.svelte
+++ b/src/lib/components/ui/context-menu/context-menu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
 </script>
diff --git a/src/lib/components/ui/context-menu/index.ts b/src/lib/components/ui/context-menu/index.ts
index 6c62da9..cbeaee1 100644
--- a/src/lib/components/ui/context-menu/index.ts
+++ b/src/lib/components/ui/context-menu/index.ts
@@ -1,19 +1,19 @@
-import Root from './context-menu.svelte';
-import Sub from './context-menu-sub.svelte';
-import Portal from './context-menu-portal.svelte';
-import Trigger from './context-menu-trigger.svelte';
-import Group from './context-menu-group.svelte';
-import RadioGroup from './context-menu-radio-group.svelte';
-import Item from './context-menu-item.svelte';
-import GroupHeading from './context-menu-group-heading.svelte';
-import Content from './context-menu-content.svelte';
-import Shortcut from './context-menu-shortcut.svelte';
-import RadioItem from './context-menu-radio-item.svelte';
-import Separator from './context-menu-separator.svelte';
-import SubContent from './context-menu-sub-content.svelte';
-import SubTrigger from './context-menu-sub-trigger.svelte';
-import CheckboxItem from './context-menu-checkbox-item.svelte';
-import Label from './context-menu-label.svelte';
+import Root from "./context-menu.svelte";
+import Sub from "./context-menu-sub.svelte";
+import Portal from "./context-menu-portal.svelte";
+import Trigger from "./context-menu-trigger.svelte";
+import Group from "./context-menu-group.svelte";
+import RadioGroup from "./context-menu-radio-group.svelte";
+import Item from "./context-menu-item.svelte";
+import GroupHeading from "./context-menu-group-heading.svelte";
+import Content from "./context-menu-content.svelte";
+import Shortcut from "./context-menu-shortcut.svelte";
+import RadioItem from "./context-menu-radio-item.svelte";
+import Separator from "./context-menu-separator.svelte";
+import SubContent from "./context-menu-sub-content.svelte";
+import SubTrigger from "./context-menu-sub-trigger.svelte";
+import CheckboxItem from "./context-menu-checkbox-item.svelte";
+import Label from "./context-menu-label.svelte";
 
 export {
 	Root,
@@ -48,5 +48,5 @@ export {
 	SubContent as ContextMenuSubContent,
 	SubTrigger as ContextMenuSubTrigger,
 	CheckboxItem as ContextMenuCheckboxItem,
-	Label as ContextMenuLabel
+	Label as ContextMenuLabel,
 };
diff --git a/src/lib/components/ui/data-table/data-table.svelte.ts b/src/lib/components/ui/data-table/data-table.svelte.ts
index 6507920..f3c30a7 100644
--- a/src/lib/components/ui/data-table/data-table.svelte.ts
+++ b/src/lib/components/ui/data-table/data-table.svelte.ts
@@ -4,8 +4,8 @@ import {
 	type TableOptionsResolved,
 	type TableState,
 	type Updater,
-	createTable
-} from '@tanstack/table-core';
+	createTable,
+} from "@tanstack/table-core";
 
 /**
  * Creates a reactive TanStack table object for Svelte.
@@ -44,7 +44,7 @@ export function createSvelteTable<TData extends RowData>(options: TableOptions<T
 				options: Partial<TableOptions<TData>>
 			) => {
 				return mergeObjects(defaultOptions, options);
-			}
+			},
 		},
 		options
 	);
@@ -62,7 +62,7 @@ export function createSvelteTable<TData extends RowData>(options: TableOptions<T
 					else state = mergeObjects(state, updater);
 
 					options.onStateChange?.(updater);
-				}
+				},
 			});
 		});
 	}
@@ -92,7 +92,7 @@ export function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(
 	...sources: Sources
 ): Intersection<{ [K in keyof Sources]: Sources[K] }> {
 	const resolve = <T extends object>(src: MaybeThunk<T>): T | undefined =>
-		typeof src === 'function' ? (src() ?? undefined) : src;
+		typeof src === "function" ? (src() ?? undefined) : src;
 
 	const findSourceWithKey = (key: PropertyKey) => {
 		for (let i = sources.length - 1; i >= 0; i--) {
@@ -135,8 +135,8 @@ export function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(
 				enumerable: true,
 				// eslint-disable-next-line @typescript-eslint/no-explicit-any
 				value: (src as any)[key],
-				writable: true
+				writable: true,
 			};
-		}
+		},
 	}) as Intersection<{ [K in keyof Sources]: Sources[K] }>;
 }
diff --git a/src/lib/components/ui/data-table/flex-render.svelte b/src/lib/components/ui/data-table/flex-render.svelte
index 9de044d..ac82a58 100644
--- a/src/lib/components/ui/data-table/flex-render.svelte
+++ b/src/lib/components/ui/data-table/flex-render.svelte
@@ -2,9 +2,9 @@
 	lang="ts"
 	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
 >
-	import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
-	import { RenderComponentConfig, RenderSnippetConfig } from './render-helpers.js';
-	import type { Attachment } from 'svelte/attachments';
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
+	import type { Attachment } from "svelte/attachments";
 	type Props = {
 		/** The cell or header field of the current cell's column definition. */
 		content?: TContext extends HeaderContext<TData, TValue>
@@ -22,7 +22,7 @@
 	let { content, context, attach }: Props = $props();
 </script>
 
-{#if typeof content === 'string'}
+{#if typeof content === "string"}
 	{content}
 {:else if content instanceof Function}
 	<!-- It's unlikely that a CellContext will be passed to a Header -->
diff --git a/src/lib/components/ui/data-table/index.ts b/src/lib/components/ui/data-table/index.ts
index 05fb821..5f4e77e 100644
--- a/src/lib/components/ui/data-table/index.ts
+++ b/src/lib/components/ui/data-table/index.ts
@@ -1,3 +1,3 @@
-export { default as FlexRender } from './flex-render.svelte';
-export { renderComponent, renderSnippet } from './render-helpers.js';
-export { createSvelteTable } from './data-table.svelte.js';
+export { default as FlexRender } from "./flex-render.svelte";
+export { renderComponent, renderSnippet } from "./render-helpers.js";
+export { createSvelteTable } from "./data-table.svelte.js";
diff --git a/src/lib/components/ui/data-table/render-helpers.ts b/src/lib/components/ui/data-table/render-helpers.ts
index aea5dc2..fa036d6 100644
--- a/src/lib/components/ui/data-table/render-helpers.ts
+++ b/src/lib/components/ui/data-table/render-helpers.ts
@@ -1,4 +1,4 @@
-import type { Component, ComponentProps, Snippet } from 'svelte';
+import type { Component, ComponentProps, Snippet } from "svelte";
 
 /**
  * A helper class to make it easy to identify Svelte components in
@@ -77,7 +77,7 @@ export class RenderSnippetConfig<TProps> {
 export function renderComponent<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	T extends Component<any>,
-	Props extends ComponentProps<T>
+	Props extends ComponentProps<T>,
 >(component: T, props: Props = {} as Props) {
 	return new RenderComponentConfig(component, props);
 }
diff --git a/src/lib/components/ui/dialog/dialog-close.svelte b/src/lib/components/ui/dialog/dialog-close.svelte
index 4141704..de68f2f 100644
--- a/src/lib/components/ui/dialog/dialog-close.svelte
+++ b/src/lib/components/ui/dialog/dialog-close.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { Dialog as DialogPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
-		type = 'button',
+		type = "button",
 		...restProps
 	}: DialogPrimitive.CloseProps = $props();
 </script>
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index 77723c9..c0551ee 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import DialogPortal from './dialog-portal.svelte';
-	import type { Snippet } from 'svelte';
-	import * as Dialog from './index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import DialogPortal from "./dialog-portal.svelte";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
 	import XIcon from '@lucide/svelte/icons/x';
 
 	let {
@@ -28,7 +28,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
 			className
 		)}
 		{...restProps}
@@ -38,7 +38,7 @@
 			<DialogPrimitive.Close data-slot="dialog-close">
 				{#snippet child({ props })}
 					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
-						<XIcon />
+						<XIcon  />
 						<span class="sr-only">Close</span>
 					</Button>
 				{/snippet}
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
index af9cf2f..0102d91 100644
--- a/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn(
-		'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
-		className
-	)}
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
index 90dc9f0..e23160a 100644
--- a/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Button } from "$lib/components/ui/button/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -18,10 +18,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-footer"
-	class={cn(
-		'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
-		className
-	)}
+	class={cn("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
index 6de3bd8..c3ce8a2 100644
--- a/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
-	class={cn('flex flex-col gap-2', className)}
+	class={cn("gap-2 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
index c9198f2..19f69f0 100644
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <DialogPrimitive.Overlay
 	bind:ref
 	data-slot="dialog-overlay"
-	class={cn(
-		'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
-		className
-	)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dialog/dialog-portal.svelte b/src/lib/components/ui/dialog/dialog-portal.svelte
index a60a85e..ccfa79c 100644
--- a/src/lib/components/ui/dialog/dialog-portal.svelte
+++ b/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { Dialog as DialogPrimitive } from "bits-ui";
 
 	let { ...restProps }: DialogPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
index 7647c74..6ff1a4a 100644
--- a/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn('text-base leading-none font-medium', className)}
+	class={cn("text-base leading-none font-medium", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dialog/dialog-trigger.svelte b/src/lib/components/ui/dialog/dialog-trigger.svelte
index 9264541..589ee0c 100644
--- a/src/lib/components/ui/dialog/dialog-trigger.svelte
+++ b/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { Dialog as DialogPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
-		type = 'button',
+		type = "button",
 		...restProps
 	}: DialogPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/dialog/dialog.svelte b/src/lib/components/ui/dialog/dialog.svelte
index c1444b2..211672c 100644
--- a/src/lib/components/ui/dialog/dialog.svelte
+++ b/src/lib/components/ui/dialog/dialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { Dialog as DialogPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
 </script>
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
index 9143f72..076cef5 100644
--- a/src/lib/components/ui/dialog/index.ts
+++ b/src/lib/components/ui/dialog/index.ts
@@ -1,13 +1,13 @@
-import Root from './dialog.svelte';
-import Portal from './dialog-portal.svelte';
-import Title from './dialog-title.svelte';
-import Footer from './dialog-footer.svelte';
-import Header from './dialog-header.svelte';
-import Overlay from './dialog-overlay.svelte';
-import Content from './dialog-content.svelte';
-import Description from './dialog-description.svelte';
-import Trigger from './dialog-trigger.svelte';
-import Close from './dialog-close.svelte';
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
 
 export {
 	Root,
@@ -30,5 +30,5 @@ export {
 	Overlay as DialogOverlay,
 	Content as DialogContent,
 	Description as DialogDescription,
-	Close as DialogClose
+	Close as DialogClose,
 };
diff --git a/src/lib/components/ui/drawer/drawer-close.svelte b/src/lib/components/ui/drawer/drawer-close.svelte
index aea8d1e..95c2479 100644
--- a/src/lib/components/ui/drawer/drawer-close.svelte
+++ b/src/lib/components/ui/drawer/drawer-close.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
 
 	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
 </script>
diff --git a/src/lib/components/ui/drawer/drawer-content.svelte b/src/lib/components/ui/drawer/drawer-content.svelte
index bca6bd9..c5b6cb9 100644
--- a/src/lib/components/ui/drawer/drawer-content.svelte
+++ b/src/lib/components/ui/drawer/drawer-content.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
-	import DrawerPortal from './drawer-portal.svelte';
-	import DrawerOverlay from './drawer-overlay.svelte';
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
-	import type { WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import DrawerPortal from "./drawer-portal.svelte";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -22,14 +22,11 @@
 	<DrawerPrimitive.Content
 		bind:ref
 		data-slot="drawer-content"
-		class={cn(
-			'group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
-			className
-		)}
+		class={cn("bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50", className)}
 		{...restProps}
 	>
 		<div
-			class="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+			class="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
 		></div>
 		{@render children?.()}
 	</DrawerPrimitive.Content>
diff --git a/src/lib/components/ui/drawer/drawer-description.svelte b/src/lib/components/ui/drawer/drawer-description.svelte
index 1aa52bb..2763a1a 100644
--- a/src/lib/components/ui/drawer/drawer-description.svelte
+++ b/src/lib/components/ui/drawer/drawer-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
-	import { cn } from '$lib/utils/format.js';
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <DrawerPrimitive.Description
 	bind:ref
 	data-slot="drawer-description"
-	class={cn('text-sm text-muted-foreground', className)}
+	class={cn("text-muted-foreground text-sm", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/drawer/drawer-footer.svelte b/src/lib/components/ui/drawer/drawer-footer.svelte
index 967b486..56a1fc6 100644
--- a/src/lib/components/ui/drawer/drawer-footer.svelte
+++ b/src/lib/components/ui/drawer/drawer-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="drawer-footer"
-	class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/drawer/drawer-header.svelte b/src/lib/components/ui/drawer/drawer-header.svelte
index 8deabd2..861f956 100644
--- a/src/lib/components/ui/drawer/drawer-header.svelte
+++ b/src/lib/components/ui/drawer/drawer-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="drawer-header"
-	class={cn(
-		'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left',
-		className
-	)}
+	class={cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/drawer/drawer-nested.svelte b/src/lib/components/ui/drawer/drawer-nested.svelte
index a04cf84..834af94 100644
--- a/src/lib/components/ui/drawer/drawer-nested.svelte
+++ b/src/lib/components/ui/drawer/drawer-nested.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
 
 	let {
 		shouldScaleBackground = true,
diff --git a/src/lib/components/ui/drawer/drawer-overlay.svelte b/src/lib/components/ui/drawer/drawer-overlay.svelte
index 5611d17..84df1e8 100644
--- a/src/lib/components/ui/drawer/drawer-overlay.svelte
+++ b/src/lib/components/ui/drawer/drawer-overlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
-	import { cn } from '$lib/utils/format.js';
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <DrawerPrimitive.Overlay
 	bind:ref
 	data-slot="drawer-overlay"
-	class={cn(
-		'fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
-		className
-	)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/drawer/drawer-portal.svelte b/src/lib/components/ui/drawer/drawer-portal.svelte
index 5a2b942..5a0dd74 100644
--- a/src/lib/components/ui/drawer/drawer-portal.svelte
+++ b/src/lib/components/ui/drawer/drawer-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
 
 	let { ...restProps }: DrawerPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/drawer/drawer-title.svelte b/src/lib/components/ui/drawer/drawer-title.svelte
index bf9624c..fc3649b 100644
--- a/src/lib/components/ui/drawer/drawer-title.svelte
+++ b/src/lib/components/ui/drawer/drawer-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
-	import { cn } from '$lib/utils/format.js';
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <DrawerPrimitive.Title
 	bind:ref
 	data-slot="drawer-title"
-	class={cn('text-base font-medium text-foreground', className)}
+	class={cn("text-foreground text-base font-medium", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/drawer/drawer-trigger.svelte b/src/lib/components/ui/drawer/drawer-trigger.svelte
index 672d356..f1877d8 100644
--- a/src/lib/components/ui/drawer/drawer-trigger.svelte
+++ b/src/lib/components/ui/drawer/drawer-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
 
 	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/drawer/drawer.svelte b/src/lib/components/ui/drawer/drawer.svelte
index a93bdd6..0cb57ff 100644
--- a/src/lib/components/ui/drawer/drawer.svelte
+++ b/src/lib/components/ui/drawer/drawer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
 
 	let {
 		shouldScaleBackground = true,
diff --git a/src/lib/components/ui/drawer/index.ts b/src/lib/components/ui/drawer/index.ts
index 3f1766e..1656cac 100644
--- a/src/lib/components/ui/drawer/index.ts
+++ b/src/lib/components/ui/drawer/index.ts
@@ -1,14 +1,14 @@
-import Root from './drawer.svelte';
-import Content from './drawer-content.svelte';
-import Description from './drawer-description.svelte';
-import Overlay from './drawer-overlay.svelte';
-import Footer from './drawer-footer.svelte';
-import Header from './drawer-header.svelte';
-import Title from './drawer-title.svelte';
-import NestedRoot from './drawer-nested.svelte';
-import Close from './drawer-close.svelte';
-import Trigger from './drawer-trigger.svelte';
-import Portal from './drawer-portal.svelte';
+import Root from "./drawer.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import Title from "./drawer-title.svelte";
+import NestedRoot from "./drawer-nested.svelte";
+import Close from "./drawer-close.svelte";
+import Trigger from "./drawer-trigger.svelte";
+import Portal from "./drawer-portal.svelte";
 
 export {
 	Root,
@@ -34,5 +34,5 @@ export {
 	Title as DrawerTitle,
 	Trigger as DrawerTrigger,
 	Portal as DrawerPortal,
-	Close as DrawerClose
+	Close as DrawerClose,
 };
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
index c0bf94b..e0e1971 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index b5a7ee9..a81b48d 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import MinusIcon from '@lucide/svelte/icons/minus';
 	import CheckIcon from '@lucide/svelte/icons/check';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -23,20 +23,20 @@
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
 		<span
-			class="pointer-events-none absolute right-2 flex items-center justify-center"
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
 			data-slot="dropdown-menu-checkbox-item-indicator"
 		>
 			{#if indeterminate}
-				<MinusIcon />
+				<MinusIcon  />
 			{:else if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index c101c75..261a5b0 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import DropdownMenuPortal from './dropdown-menu-portal.svelte';
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import type { ComponentProps } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		sideOffset = 4,
-		align = 'start',
+		align = "start",
 		portalProps,
 		class: className,
 		...restProps
@@ -23,7 +23,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			'z-50 w-(--bits-dropdown-menu-anchor-width) min-w-32 overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
index 54d3566..433540f 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -17,6 +17,6 @@
 	bind:ref
 	data-slot="dropdown-menu-group-heading"
 	data-inset={inset}
-	class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8', className)}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
index 261ab7e..aca1f7b 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
 </script>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index 13a1c2e..c425190 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		inset,
-		variant = 'default',
+		variant = "default",
 		...restProps
 	}: DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
-		variant?: 'default' | 'destructive';
+		variant?: "default" | "destructive";
 	} = $props();
 </script>
 
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index 66e8802..e0c534f 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -17,10 +17,7 @@
 	bind:this={ref}
 	data-slot="dropdown-menu-label"
 	data-inset={inset}
-	class={cn(
-		'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7 data-[inset]:pl-8',
-		className
-	)}
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
index 089a25c..274cfef 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
 	let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
index 3e98749..189aef4 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index c051f85..c8aa07b 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import CheckIcon from '@lucide/svelte/icons/check';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,18 +15,18 @@
 	bind:ref
 	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
 		<span
-			class="pointer-events-none absolute right-2 flex items-center justify-center"
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
 			data-slot="dropdown-menu-radio-item-indicator"
 		>
 			{#if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index 7c941f1..90f1b6f 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <DropdownMenuPrimitive.Separator
 	bind:ref
 	data-slot="dropdown-menu-separator"
-	class={cn('-mx-1 my-1 h-px bg-border', className)}
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index a2bfc6c..ed7cc85 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="dropdown-menu-shortcut"
-	class={cn(
-		'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',
-		className
-	)}
+	class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 7710ddd..b5750d4 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <DropdownMenuPrimitive.SubContent
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
-	class={cn(
-		'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-		className
-	)}
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index ec660b7..fab0275 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-	import { cn } from '$lib/utils/format.js';
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[inset]:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
index 9cfa3b8..f044581 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
 </script>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
index 032b645..cb05344 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
index fbbb790..cb4bc62 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
 </script>
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
index b097e3f..7850c6a 100644
--- a/src/lib/components/ui/dropdown-menu/index.ts
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -1,20 +1,20 @@
-import Root from './dropdown-menu.svelte';
-import Sub from './dropdown-menu-sub.svelte';
-import CheckboxGroup from './dropdown-menu-checkbox-group.svelte';
-import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
-import Content from './dropdown-menu-content.svelte';
-import Group from './dropdown-menu-group.svelte';
-import Item from './dropdown-menu-item.svelte';
-import Label from './dropdown-menu-label.svelte';
-import RadioGroup from './dropdown-menu-radio-group.svelte';
-import RadioItem from './dropdown-menu-radio-item.svelte';
-import Separator from './dropdown-menu-separator.svelte';
-import Shortcut from './dropdown-menu-shortcut.svelte';
-import Trigger from './dropdown-menu-trigger.svelte';
-import SubContent from './dropdown-menu-sub-content.svelte';
-import SubTrigger from './dropdown-menu-sub-trigger.svelte';
-import GroupHeading from './dropdown-menu-group-heading.svelte';
-import Portal from './dropdown-menu-portal.svelte';
+import Root from "./dropdown-menu.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
 
 export {
 	CheckboxGroup,
@@ -50,5 +50,5 @@ export {
 	Sub,
 	SubContent,
 	SubTrigger,
-	Trigger
+	Trigger,
 };
diff --git a/src/lib/components/ui/empty/empty-content.svelte b/src/lib/components/ui/empty/empty-content.svelte
index ca19822..607b9f7 100644
--- a/src/lib/components/ui/empty/empty-content.svelte
+++ b/src/lib/components/ui/empty/empty-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty-content"
 	class={cn(
-		'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
+		"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/empty/empty-description.svelte b/src/lib/components/ui/empty/empty-description.svelte
index 5e35c46..024228b 100644
--- a/src/lib/components/ui/empty/empty-description.svelte
+++ b/src/lib/components/ui/empty/empty-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty-description"
 	class={cn(
-		'text-sm/relaxed text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+		"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/empty/empty-header.svelte b/src/lib/components/ui/empty/empty-header.svelte
index cdda172..7112f66 100644
--- a/src/lib/components/ui/empty/empty-header.svelte
+++ b/src/lib/components/ui/empty/empty-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-header"
-	class={cn('flex max-w-sm flex-col items-center gap-2', className)}
+	class={cn("gap-2 flex max-w-sm flex-col items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/empty/empty-media.svelte b/src/lib/components/ui/empty/empty-media.svelte
index fb192d5..95819a4 100644
--- a/src/lib/components/ui/empty/empty-media.svelte
+++ b/src/lib/components/ui/empty/empty-media.svelte
@@ -1,31 +1,31 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const emptyMediaVariants = tv({
-		base: 'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: 'bg-transparent',
-				icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4"
-			}
+				default: "bg-transparent",
+				icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
+			},
 		},
 		defaultVariants: {
-			variant: 'default'
-		}
+			variant: "default",
+		},
 	});
 
-	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>['variant'];
+	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		variant = 'default',
+		variant = "default",
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
 </script>
diff --git a/src/lib/components/ui/empty/empty-title.svelte b/src/lib/components/ui/empty/empty-title.svelte
index cc6fd8f..4ab45eb 100644
--- a/src/lib/components/ui/empty/empty-title.svelte
+++ b/src/lib/components/ui/empty/empty-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-title"
-	class={cn('text-sm font-medium tracking-tight', className)}
+	class={cn("text-sm font-medium tracking-tight", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/empty/empty.svelte b/src/lib/components/ui/empty/empty.svelte
index 6cfcb3b..3aef062 100644
--- a/src/lib/components/ui/empty/empty.svelte
+++ b/src/lib/components/ui/empty/empty.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty"
 	class={cn(
-		'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
+		"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/empty/index.ts b/src/lib/components/ui/empty/index.ts
index cae5ff9..ae4c106 100644
--- a/src/lib/components/ui/empty/index.ts
+++ b/src/lib/components/ui/empty/index.ts
@@ -1,9 +1,9 @@
-import Root from './empty.svelte';
-import Header from './empty-header.svelte';
-import Media from './empty-media.svelte';
-import Title from './empty-title.svelte';
-import Description from './empty-description.svelte';
-import Content from './empty-content.svelte';
+import Root from "./empty.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Description from "./empty-description.svelte";
+import Content from "./empty-content.svelte";
 
 export {
 	Root,
@@ -18,5 +18,5 @@ export {
 	Media as EmptyMedia,
 	Title as EmptyTitle,
 	Description as EmptyDescription,
-	Content as EmptyContent
+	Content as EmptyContent,
 };
diff --git a/src/lib/components/ui/field/field-content.svelte b/src/lib/components/ui/field/field-content.svelte
index 7a3789d..1545c43 100644
--- a/src/lib/components/ui/field/field-content.svelte
+++ b/src/lib/components/ui/field/field-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="field-content"
-	class={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
+	class={cn("gap-0.5 group/field-content flex flex-1 flex-col leading-snug", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/field/field-description.svelte b/src/lib/components/ui/field/field-description.svelte
index 2fb1688..7518366 100644
--- a/src/lib/components/ui/field/field-description.svelte
+++ b/src/lib/components/ui/field/field-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,9 +14,9 @@
 	bind:this={ref}
 	data-slot="field-description"
 	class={cn(
-		'text-left text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
-		'last:mt-0 nth-last-2:-mt-1',
-		'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+		"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+		"last:mt-0 nth-last-2:-mt-1",
+		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/field/field-error.svelte b/src/lib/components/ui/field/field-error.svelte
index a5feb8f..2381b36 100644
--- a/src/lib/components/ui/field/field-error.svelte
+++ b/src/lib/components/ui/field/field-error.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -38,7 +38,7 @@
 		bind:this={ref}
 		role="alert"
 		data-slot="field-error"
-		class={cn('text-sm font-normal text-destructive', className)}
+		class={cn("text-destructive text-sm font-normal", className)}
 		{...restProps}
 	>
 		{#if children}
diff --git a/src/lib/components/ui/field/field-group.svelte b/src/lib/components/ui/field/field-group.svelte
index a0635e4..3795195 100644
--- a/src/lib/components/ui/field/field-group.svelte
+++ b/src/lib/components/ui/field/field-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="field-group"
 	class={cn(
-		'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+		"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/field/field-label.svelte b/src/lib/components/ui/field/field-label.svelte
index 430af92..da58659 100644
--- a/src/lib/components/ui/field/field-label.svelte
+++ b/src/lib/components/ui/field/field-label.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
+	import { Label } from "$lib/components/ui/label/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -15,8 +15,8 @@
 	bind:ref
 	data-slot="field-label"
 	class={cn(
-		'group/field-label peer/field-label flex w-fit gap-2 leading-snug leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',
-		'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+		"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug",
+		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/field/field-legend.svelte b/src/lib/components/ui/field/field-legend.svelte
index f6c51fc..75bf8d2 100644
--- a/src/lib/components/ui/field/field-legend.svelte
+++ b/src/lib/components/ui/field/field-legend.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = 'legend',
+		variant = "legend",
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
-		variant?: 'legend' | 'label';
+		variant?: "legend" | "label";
 	} = $props();
 </script>
 
@@ -17,10 +17,7 @@
 	bind:this={ref}
 	data-slot="field-legend"
 	data-variant={variant}
-	class={cn(
-		'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
-		className
-	)}
+	class={cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/field/field-separator.svelte b/src/lib/components/ui/field/field-separator.svelte
index f74bb1f..5aa7739 100644
--- a/src/lib/components/ui/field/field-separator.svelte
+++ b/src/lib/components/ui/field/field-separator.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -20,13 +20,13 @@
 	bind:this={ref}
 	data-slot="field-separator"
 	data-content={hasContent}
-	class={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
+	class={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
 	{...restProps}
 >
 	<Separator class="absolute inset-0 top-1/2" />
 	{#if children}
 		<span
-			class="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+			class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
 			data-slot="field-separator-content"
 		>
 			{@render children()}
diff --git a/src/lib/components/ui/field/field-set.svelte b/src/lib/components/ui/field/field-set.svelte
index 11be4b4..27ee330 100644
--- a/src/lib/components/ui/field/field-set.svelte
+++ b/src/lib/components/ui/field/field-set.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLFieldsetAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLFieldsetAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <fieldset
 	bind:this={ref}
 	data-slot="field-set"
-	class={cn(
-		'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-		className
-	)}
+	class={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/field/field-title.svelte b/src/lib/components/ui/field/field-title.svelte
index d405ff0..30dec2c 100644
--- a/src/lib/components/ui/field/field-title.svelte
+++ b/src/lib/components/ui/field/field-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="field-label"
-	class={cn(
-		'flex w-fit items-center gap-2 text-sm leading-snug leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
-		className
-	)}
+	class={cn("gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/field/field.svelte b/src/lib/components/ui/field/field.svelte
index 8366ba1..03d23c0 100644
--- a/src/lib/components/ui/field/field.svelte
+++ b/src/lib/components/ui/field/field.svelte
@@ -1,33 +1,33 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const fieldVariants = tv({
-		base: 'data-[invalid=true]:text-destructive gap-2 group/field flex w-full',
+		base: "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
 		variants: {
 			orientation: {
-				vertical: 'cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+				vertical: "cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto",
 				horizontal:
-					'cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+					"cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
 				responsive:
-					'cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
-			}
+					"cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+			},
 		},
 		defaultVariants: {
-			orientation: 'vertical'
-		}
+			orientation: "vertical",
+		},
 	});
 
-	export type FieldOrientation = VariantProps<typeof fieldVariants>['orientation'];
+	export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		orientation = 'vertical',
+		orientation = "vertical",
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
diff --git a/src/lib/components/ui/field/index.ts b/src/lib/components/ui/field/index.ts
index 0c207d8..a644a95 100644
--- a/src/lib/components/ui/field/index.ts
+++ b/src/lib/components/ui/field/index.ts
@@ -1,13 +1,13 @@
-import Field from './field.svelte';
-import Set from './field-set.svelte';
-import Legend from './field-legend.svelte';
-import Group from './field-group.svelte';
-import Content from './field-content.svelte';
-import Label from './field-label.svelte';
-import Title from './field-title.svelte';
-import Description from './field-description.svelte';
-import Separator from './field-separator.svelte';
-import Error from './field-error.svelte';
+import Field from "./field.svelte";
+import Set from "./field-set.svelte";
+import Legend from "./field-legend.svelte";
+import Group from "./field-group.svelte";
+import Content from "./field-content.svelte";
+import Label from "./field-label.svelte";
+import Title from "./field-title.svelte";
+import Description from "./field-description.svelte";
+import Separator from "./field-separator.svelte";
+import Error from "./field-error.svelte";
 
 export {
 	Field,
@@ -29,5 +29,5 @@ export {
 	Title as FieldTitle,
 	Description as FieldDescription,
 	Separator as FieldSeparator,
-	Error as FieldError
+	Error as FieldError,
 };
diff --git a/src/lib/components/ui/form/form-button.svelte b/src/lib/components/ui/form/form-button.svelte
index 0b31006..48d3936 100644
--- a/src/lib/components/ui/form/form-button.svelte
+++ b/src/lib/components/ui/form/form-button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, type ButtonProps } from '$lib/components/ui/button/index.js';
+	import { Button, type ButtonProps } from "$lib/components/ui/button/index.js";
 
 	let { ref = $bindable(null), ...restProps }: ButtonProps = $props();
 </script>
diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
index 200c54d..a5f42be 100644
--- a/src/lib/components/ui/form/form-description.svelte
+++ b/src/lib/components/ui/form/form-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as FormPrimitive from 'formsnap';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import * as FormPrimitive from "formsnap";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <FormPrimitive.Description
 	bind:ref
 	data-slot="form-description"
-	class={cn('text-sm text-muted-foreground', className)}
+	class={cn("text-muted-foreground text-sm", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/form/form-element-field.svelte b/src/lib/components/ui/form/form-element-field.svelte
index a17368b..c3ba111 100644
--- a/src/lib/components/ui/form/form-element-field.svelte
+++ b/src/lib/components/ui/form/form-element-field.svelte
@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
-	import * as FormPrimitive from 'formsnap';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/format.js';
+	import * as FormPrimitive from "formsnap";
+	import type { FormPathLeaves } from "sveltekit-superforms";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 
 <FormPrimitive.ElementField {form} {name}>
 	{#snippet children({ constraints, errors, tainted, value })}
-		<div bind:this={ref} class={cn('space-y-2', className)} {...restProps}>
+		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
 			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
 		</div>
 	{/snippet}
diff --git a/src/lib/components/ui/form/form-field-errors.svelte b/src/lib/components/ui/form/form-field-errors.svelte
index d786ac3..b4c6fba 100644
--- a/src/lib/components/ui/form/form-field-errors.svelte
+++ b/src/lib/components/ui/form/form-field-errors.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as FormPrimitive from 'formsnap';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import * as FormPrimitive from "formsnap";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 
 <FormPrimitive.FieldErrors
 	bind:ref
-	class={cn('text-sm font-medium text-destructive', className)}
+	class={cn("text-destructive text-sm font-medium", className)}
 	{...restProps}
 >
 	{#snippet children({ errors, errorProps })}
diff --git a/src/lib/components/ui/form/form-field.svelte b/src/lib/components/ui/form/form-field.svelte
index 0b93466..7481fda 100644
--- a/src/lib/components/ui/form/form-field.svelte
+++ b/src/lib/components/ui/form/form-field.svelte
@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import * as FormPrimitive from 'formsnap';
-	import type { FormPath } from 'sveltekit-superforms';
-	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import * as FormPrimitive from "formsnap";
+	import type { FormPath } from "sveltekit-superforms";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,12 @@
 
 <FormPrimitive.Field {form} {name}>
 	{#snippet children({ constraints, errors, tainted, value })}
-		<div bind:this={ref} data-slot="form-item" class={cn('space-y-2', className)} {...restProps}>
+		<div
+			bind:this={ref}
+			data-slot="form-item"
+			class={cn("space-y-2", className)}
+			{...restProps}
+		>
 			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
 		</div>
 	{/snippet}
diff --git a/src/lib/components/ui/form/form-fieldset.svelte b/src/lib/components/ui/form/form-fieldset.svelte
index 638fa77..2c85857 100644
--- a/src/lib/components/ui/form/form-fieldset.svelte
+++ b/src/lib/components/ui/form/form-fieldset.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import * as FormPrimitive from 'formsnap';
-	import type { FormPath } from 'sveltekit-superforms';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import * as FormPrimitive from "formsnap";
+	import type { FormPath } from "sveltekit-superforms";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,4 +12,4 @@
 	}: WithoutChild<FormPrimitive.FieldsetProps<T, U>> = $props();
 </script>
 
-<FormPrimitive.Fieldset bind:ref {form} {name} class={cn('space-y-2', className)} {...restProps} />
+<FormPrimitive.Fieldset bind:ref {form} {name} class={cn("space-y-2", className)} {...restProps} />
diff --git a/src/lib/components/ui/form/form-label.svelte b/src/lib/components/ui/form/form-label.svelte
index 280d1e2..8749360 100644
--- a/src/lib/components/ui/form/form-label.svelte
+++ b/src/lib/components/ui/form/form-label.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as FormPrimitive from 'formsnap';
-	import { Label } from '$lib/components/ui/label/index.js';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import * as FormPrimitive from "formsnap";
+	import { Label } from "$lib/components/ui/label/index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,7 +16,7 @@
 		<Label
 			{...props}
 			data-slot="form-label"
-			class={cn('data-[fs-error]:text-destructive', className)}
+			class={cn("data-[fs-error]:text-destructive", className)}
 		>
 			{@render children?.()}
 		</Label>
diff --git a/src/lib/components/ui/form/form-legend.svelte b/src/lib/components/ui/form/form-legend.svelte
index 476d37f..b3c9043 100644
--- a/src/lib/components/ui/form/form-legend.svelte
+++ b/src/lib/components/ui/form/form-legend.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as FormPrimitive from 'formsnap';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import * as FormPrimitive from "formsnap";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <FormPrimitive.Legend
 	bind:ref
-	class={cn('text-sm leading-none font-medium data-[fs-error]:text-destructive', className)}
+	class={cn("data-[fs-error]:text-destructive text-sm leading-none font-medium", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/form/index.ts b/src/lib/components/ui/form/index.ts
index 2d129aa..0713927 100644
--- a/src/lib/components/ui/form/index.ts
+++ b/src/lib/components/ui/form/index.ts
@@ -1,12 +1,12 @@
-import * as FormPrimitive from 'formsnap';
-import Description from './form-description.svelte';
-import Label from './form-label.svelte';
-import FieldErrors from './form-field-errors.svelte';
-import Field from './form-field.svelte';
-import Fieldset from './form-fieldset.svelte';
-import Legend from './form-legend.svelte';
-import ElementField from './form-element-field.svelte';
-import Button from './form-button.svelte';
+import * as FormPrimitive from "formsnap";
+import Description from "./form-description.svelte";
+import Label from "./form-label.svelte";
+import FieldErrors from "./form-field-errors.svelte";
+import Field from "./form-field.svelte";
+import Fieldset from "./form-fieldset.svelte";
+import Legend from "./form-legend.svelte";
+import ElementField from "./form-element-field.svelte";
+import Button from "./form-button.svelte";
 
 const Control = FormPrimitive.Control;
 
@@ -29,5 +29,5 @@ export {
 	Fieldset as FormFieldset,
 	Legend as FormLegend,
 	ElementField as FormElementField,
-	Button as FormButton
+	Button as FormButton,
 };
diff --git a/src/lib/components/ui/hover-card/hover-card-content.svelte b/src/lib/components/ui/hover-card/hover-card-content.svelte
index 7c28c1f..f5cb652 100644
--- a/src/lib/components/ui/hover-card/hover-card-content.svelte
+++ b/src/lib/components/ui/hover-card/hover-card-content.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import HoverCardPortal from './hover-card-portal.svelte';
-	import type { ComponentProps } from 'svelte';
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import HoverCardPortal from "./hover-card-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		align = 'center',
+		align = "center",
 		sideOffset = 4,
 		portalProps,
 		...restProps
@@ -23,7 +23,7 @@
 		{align}
 		{sideOffset}
 		class={cn(
-			'z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden",
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/hover-card/hover-card-portal.svelte b/src/lib/components/ui/hover-card/hover-card-portal.svelte
index 9dc2582..6c62dc2 100644
--- a/src/lib/components/ui/hover-card/hover-card-portal.svelte
+++ b/src/lib/components/ui/hover-card/hover-card-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
 
 	let { ...restProps }: HoverCardPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/hover-card/hover-card-trigger.svelte b/src/lib/components/ui/hover-card/hover-card-trigger.svelte
index 2d42f89..322172b 100644
--- a/src/lib/components/ui/hover-card/hover-card-trigger.svelte
+++ b/src/lib/components/ui/hover-card/hover-card-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: HoverCardPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/hover-card/hover-card.svelte b/src/lib/components/ui/hover-card/hover-card.svelte
index ffc075d..5191656 100644
--- a/src/lib/components/ui/hover-card/hover-card.svelte
+++ b/src/lib/components/ui/hover-card/hover-card.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: HoverCardPrimitive.RootProps = $props();
 </script>
diff --git a/src/lib/components/ui/hover-card/index.ts b/src/lib/components/ui/hover-card/index.ts
index 098f691..dd312fb 100644
--- a/src/lib/components/ui/hover-card/index.ts
+++ b/src/lib/components/ui/hover-card/index.ts
@@ -1,7 +1,7 @@
-import Root from './hover-card.svelte';
-import Content from './hover-card-content.svelte';
-import Trigger from './hover-card-trigger.svelte';
-import Portal from './hover-card-portal.svelte';
+import Root from "./hover-card.svelte";
+import Content from "./hover-card-content.svelte";
+import Trigger from "./hover-card-trigger.svelte";
+import Portal from "./hover-card-portal.svelte";
 
 export {
 	Root,
@@ -11,5 +11,5 @@ export {
 	Root as HoverCard,
 	Content as HoverCardContent,
 	Trigger as HoverCardTrigger,
-	Portal as HoverCardPortal
+	Portal as HoverCardPortal,
 };
diff --git a/src/lib/components/ui/input-group/index.ts b/src/lib/components/ui/input-group/index.ts
index 1bbeedf..fe1f55d 100644
--- a/src/lib/components/ui/input-group/index.ts
+++ b/src/lib/components/ui/input-group/index.ts
@@ -1,9 +1,9 @@
-import Root from './input-group.svelte';
-import Addon from './input-group-addon.svelte';
-import Button from './input-group-button.svelte';
-import Input from './input-group-input.svelte';
-import Text from './input-group-text.svelte';
-import Textarea from './input-group-textarea.svelte';
+import Root from "./input-group.svelte";
+import Addon from "./input-group-addon.svelte";
+import Button from "./input-group-button.svelte";
+import Input from "./input-group-input.svelte";
+import Text from "./input-group-text.svelte";
+import Textarea from "./input-group-textarea.svelte";
 
 export {
 	Root,
@@ -18,5 +18,5 @@ export {
 	Button as InputGroupButton,
 	Input as InputGroupInput,
 	Text as InputGroupText,
-	Textarea as InputGroupTextarea
+	Textarea as InputGroupTextarea,
 };
diff --git a/src/lib/components/ui/input-group/input-group-addon.svelte b/src/lib/components/ui/input-group/input-group-addon.svelte
index 72d255d..ea075ea 100644
--- a/src/lib/components/ui/input-group/input-group-addon.svelte
+++ b/src/lib/components/ui/input-group/input-group-addon.svelte
@@ -1,34 +1,33 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 	export const inputGroupAddonVariants = tv({
 		base: "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
 		variants: {
 			align: {
-				'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
-				'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
-				'block-start':
-					'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
-				'block-end':
-					'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start'
-			}
+				"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+				"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+				"block-start":
+					"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+				"block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+			},
 		},
 		defaultVariants: {
-			align: 'inline-start'
-		}
+			align: "inline-start",
+		},
 	});
 
-	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		align = 'inline-start',
+		align = "inline-start",
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		align?: InputGroupAddonAlign;
@@ -42,10 +41,10 @@
 	data-align={align}
 	class={cn(inputGroupAddonVariants({ align }), className)}
 	onclick={(e) => {
-		if ((e.target as HTMLElement).closest('button')) {
+		if ((e.target as HTMLElement).closest("button")) {
 			return;
 		}
-		e.currentTarget.parentElement?.querySelector('input')?.focus();
+		e.currentTarget.parentElement?.querySelector("input")?.focus();
 	}}
 	{...restProps}
 >
diff --git a/src/lib/components/ui/input-group/input-group-button.svelte b/src/lib/components/ui/input-group/input-group-button.svelte
index 1e7b7a1..adb05b9 100644
--- a/src/lib/components/ui/input-group/input-group-button.svelte
+++ b/src/lib/components/ui/input-group/input-group-button.svelte
@@ -1,38 +1,38 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	const inputGroupButtonVariants = tv({
-		base: 'gap-2 text-sm flex items-center shadow-none',
+		base: "gap-2 text-sm flex items-center shadow-none",
 		variants: {
 			size: {
 				xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-				sm: 'cn-input-group-button-size-sm',
-				'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
-				'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
-			}
+				sm: "cn-input-group-button-size-sm",
+				"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+				"icon-sm": "size-8 p-0 has-[>svg]:p-0",
+			},
 		},
 		defaultVariants: {
-			size: 'xs'
-		}
+			size: "xs",
+		},
 	});
 
-	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>["size"];
 </script>
 
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		type = 'button',
-		variant = 'ghost',
-		size = 'xs',
+		type = "button",
+		variant = "ghost",
+		size = "xs",
 		...restProps
-	}: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+	}: Omit<ComponentProps<typeof Button>, "href" | "size"> & {
 		size?: InputGroupButtonSize;
 	} = $props();
 </script>
diff --git a/src/lib/components/ui/input-group/input-group-input.svelte b/src/lib/components/ui/input-group/input-group-input.svelte
index 7e60d27..316c0cb 100644
--- a/src/lib/components/ui/input-group/input-group-input.svelte
+++ b/src/lib/components/ui/input-group/input-group-input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
-	import { Input } from '$lib/components/ui/input/index.js';
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Input } from "$lib/components/ui/input/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,10 +14,7 @@
 <Input
 	bind:ref
 	data-slot="input-group-control"
-	class={cn(
-		'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
-		className
-	)}
+	class={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1", className)}
 	bind:value
 	{...props}
 />
diff --git a/src/lib/components/ui/input-group/input-group-text.svelte b/src/lib/components/ui/input-group/input-group-text.svelte
index 281904c..77907c6 100644
--- a/src/lib/components/ui/input-group/input-group-text.svelte
+++ b/src/lib/components/ui/input-group/input-group-text.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -12,10 +12,7 @@
 
 <span
 	bind:this={ref}
-	class={cn(
-		"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/input-group/input-group-textarea.svelte b/src/lib/components/ui/input-group/input-group-textarea.svelte
index 4bab2c7..9fbabe6 100644
--- a/src/lib/components/ui/input-group/input-group-textarea.svelte
+++ b/src/lib/components/ui/input-group/input-group-textarea.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import { Textarea } from '$lib/components/ui/textarea/index.js';
-	import type { ComponentProps } from 'svelte';
+	import { cn } from "$lib/utils.js";
+	import { Textarea } from "$lib/components/ui/textarea/index.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -14,10 +14,7 @@
 <Textarea
 	bind:ref
 	data-slot="input-group-control"
-	class={cn(
-		'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
-		className
-	)}
+	class={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none", className)}
 	bind:value
 	{...props}
 />
diff --git a/src/lib/components/ui/input-group/input-group.svelte b/src/lib/components/ui/input-group/input-group.svelte
index 369dbdf..42b91be 100644
--- a/src/lib/components/ui/input-group/input-group.svelte
+++ b/src/lib/components/ui/input-group/input-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	data-slot="input-group"
 	role="group"
 	class={cn(
-		'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+		"group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
 		className
 	)}
 	{...props}
diff --git a/src/lib/components/ui/input-otp/index.ts b/src/lib/components/ui/input-otp/index.ts
index 3cacc0c..e9ae273 100644
--- a/src/lib/components/ui/input-otp/index.ts
+++ b/src/lib/components/ui/input-otp/index.ts
@@ -1,7 +1,7 @@
-import Root from './input-otp.svelte';
-import Group from './input-otp-group.svelte';
-import Slot from './input-otp-slot.svelte';
-import Separator from './input-otp-separator.svelte';
+import Root from "./input-otp.svelte";
+import Group from "./input-otp-group.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Separator from "./input-otp-separator.svelte";
 
 export {
 	Root,
@@ -11,5 +11,5 @@ export {
 	Root as InputOTP,
 	Group as InputOTPGroup,
 	Slot as InputOTPSlot,
-	Separator as InputOTPSeparator
+	Separator as InputOTPSeparator,
 };
diff --git a/src/lib/components/ui/input-otp/input-otp-group.svelte b/src/lib/components/ui/input-otp/input-otp-group.svelte
index 1708597..9f32109 100644
--- a/src/lib/components/ui/input-otp/input-otp-group.svelte
+++ b/src/lib/components/ui/input-otp/input-otp-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="input-otp-group"
-	class={cn(
-		'flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
-		className
-	)}
+	class={cn("has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-3 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/input-otp/input-otp-separator.svelte b/src/lib/components/ui/input-otp/input-otp-separator.svelte
index 2e2d974..99fdbb9 100644
--- a/src/lib/components/ui/input-otp/input-otp-separator.svelte
+++ b/src/lib/components/ui/input-otp/input-otp-separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { WithElementRef } from '$lib/utils/format.js';
-	import { cn } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
+	import { cn } from "$lib/utils.js";
 	import MinusIcon from '@lucide/svelte/icons/minus';
 
 	let {
@@ -16,12 +16,12 @@
 	bind:this={ref}
 	data-slot="input-otp-separator"
 	role="separator"
-	class={cn("flex items-center [&_svg:not([class*='size-'])]:size-4", className)}
+	class={cn("[&_svg:not([class*='size-'])]:size-4 flex items-center", className)}
 	{...restProps}
 >
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<MinusIcon />
+		<MinusIcon  />
 	{/if}
 </div>
diff --git a/src/lib/components/ui/input-otp/input-otp-slot.svelte b/src/lib/components/ui/input-otp/input-otp-slot.svelte
index dc50249..c55bf08 100644
--- a/src/lib/components/ui/input-otp/input-otp-slot.svelte
+++ b/src/lib/components/ui/input-otp/input-otp-slot.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { PinInput as InputOTPPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { PinInput as InputOTPPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	bind:ref
 	data-slot="input-otp-slot"
 	class={cn(
-		'relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40',
+		"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10",
 		className
 	)}
 	{...restProps}
@@ -25,7 +25,7 @@
 		<div
 			class="cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center"
 		>
-			<div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px"></div>
 		</div>
 	{/if}
 </InputOTPPrimitive.Cell>
diff --git a/src/lib/components/ui/input-otp/input-otp.svelte b/src/lib/components/ui/input-otp/input-otp.svelte
index bd34f71..709bb22 100644
--- a/src/lib/components/ui/input-otp/input-otp.svelte
+++ b/src/lib/components/ui/input-otp/input-otp.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { PinInput as InputOTPPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { PinInput as InputOTPPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		value = $bindable(''),
+		value = $bindable(""),
 		...restProps
 	}: InputOTPPrimitive.RootProps = $props();
 </script>
@@ -16,7 +16,7 @@
 	data-slot="input-otp"
 	spellcheck={false}
 	class={cn(
-		'cn-input-otp-input flex items-center gap-2 disabled:cursor-not-allowed has-disabled:opacity-50',
+		"cn-input-otp-input gap-2 flex items-center disabled:cursor-not-allowed has-disabled:opacity-50",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
index 15c0933..f47b6d3 100644
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@@ -1,7 +1,7 @@
-import Root from './input.svelte';
+import Root from "./input.svelte";
 
 export {
 	Root,
 	//
-	Root as Input
+	Root as Input,
 };
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 58f6dd0..fe7db38 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
-	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 
 	type Props = WithElementRef<
-		Omit<HTMLInputAttributes, 'type'> &
-			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
 	>;
 
 	let {
@@ -15,17 +15,17 @@
 		type,
 		files = $bindable(),
 		class: className,
-		'data-slot': dataSlot = 'input',
+		"data-slot": dataSlot = "input",
 		...restProps
 	}: Props = $props();
 </script>
 
-{#if type === 'file'}
+{#if type === "file"}
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		type="file"
@@ -38,7 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		{type}
diff --git a/src/lib/components/ui/item/index.ts b/src/lib/components/ui/item/index.ts
index 3b548a5..168bc3e 100644
--- a/src/lib/components/ui/item/index.ts
+++ b/src/lib/components/ui/item/index.ts
@@ -1,13 +1,13 @@
-import Root from './item.svelte';
-import Group from './item-group.svelte';
-import Separator from './item-separator.svelte';
-import Header from './item-header.svelte';
-import Footer from './item-footer.svelte';
-import Content from './item-content.svelte';
-import Title from './item-title.svelte';
-import Description from './item-description.svelte';
-import Actions from './item-actions.svelte';
-import Media from './item-media.svelte';
+import Root from "./item.svelte";
+import Group from "./item-group.svelte";
+import Separator from "./item-separator.svelte";
+import Header from "./item-header.svelte";
+import Footer from "./item-footer.svelte";
+import Content from "./item-content.svelte";
+import Title from "./item-title.svelte";
+import Description from "./item-description.svelte";
+import Actions from "./item-actions.svelte";
+import Media from "./item-media.svelte";
 
 export {
 	Root,
@@ -30,5 +30,5 @@ export {
 	Title as ItemTitle,
 	Description as ItemDescription,
 	Actions as ItemActions,
-	Media as ItemMedia
+	Media as ItemMedia,
 };
diff --git a/src/lib/components/ui/item/item-actions.svelte b/src/lib/components/ui/item/item-actions.svelte
index a116b09..4f661a3 100644
--- a/src/lib/components/ui/item/item-actions.svelte
+++ b/src/lib/components/ui/item/item-actions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-actions"
-	class={cn('flex items-center gap-2', className)}
+	class={cn("gap-2 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/item/item-content.svelte b/src/lib/components/ui/item/item-content.svelte
index 03158a5..2649b79 100644
--- a/src/lib/components/ui/item/item-content.svelte
+++ b/src/lib/components/ui/item/item-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="item-content"
 	class={cn(
-		'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
+		"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/item/item-description.svelte b/src/lib/components/ui/item/item-description.svelte
index f604c26..a15632b 100644
--- a/src/lib/components/ui/item/item-description.svelte
+++ b/src/lib/components/ui/item/item-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="item-description"
 	class={cn(
-		'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+		"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/item/item-footer.svelte b/src/lib/components/ui/item/item-footer.svelte
index fa0047e..cd68c38 100644
--- a/src/lib/components/ui/item/item-footer.svelte
+++ b/src/lib/components/ui/item/item-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-footer"
-	class={cn('flex basis-full items-center justify-between gap-2', className)}
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/item/item-group.svelte b/src/lib/components/ui/item/item-group.svelte
index ad2b608..3e58e36 100644
--- a/src/lib/components/ui/item/item-group.svelte
+++ b/src/lib/components/ui/item/item-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,10 +14,7 @@
 	bind:this={ref}
 	role="list"
 	data-slot="item-group"
-	class={cn(
-		'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
-		className
-	)}
+	class={cn("gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/item/item-header.svelte b/src/lib/components/ui/item/item-header.svelte
index cce9d9e..e1116f4 100644
--- a/src/lib/components/ui/item/item-header.svelte
+++ b/src/lib/components/ui/item/item-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-header"
-	class={cn('flex basis-full items-center justify-between gap-2', className)}
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/item/item-media.svelte b/src/lib/components/ui/item/item-media.svelte
index d25bbec..45def5a 100644
--- a/src/lib/components/ui/item/item-media.svelte
+++ b/src/lib/components/ui/item/item-media.svelte
@@ -1,33 +1,32 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const itemMediaVariants = tv({
-		base: 'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none',
+		base: "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
 		variants: {
 			variant: {
-				default: 'bg-transparent',
+				default: "bg-transparent",
 				icon: "[&_svg:not([class*='size-'])]:size-4",
-				image:
-					'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover'
-			}
+				image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+			},
 		},
 		defaultVariants: {
-			variant: 'default'
-		}
+			variant: "default",
+		},
 	});
 
-	export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>['variant'];
+	export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		variant = 'default',
+		variant = "default",
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: ItemMediaVariant } = $props();
 </script>
diff --git a/src/lib/components/ui/item/item-separator.svelte b/src/lib/components/ui/item/item-separator.svelte
index 1fa0856..992541c 100644
--- a/src/lib/components/ui/item/item-separator.svelte
+++ b/src/lib/components/ui/item/item-separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -14,6 +14,6 @@
 	bind:ref
 	data-slot="item-separator"
 	orientation="horizontal"
-	class={cn('my-2', className)}
+	class={cn("my-2", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/item/item-title.svelte b/src/lib/components/ui/item/item-title.svelte
index 5ca5adc..c9a0f9b 100644
--- a/src/lib/components/ui/item/item-title.svelte
+++ b/src/lib/components/ui/item/item-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-title"
-	class={cn(
-		'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
-		className
-	)}
+	class={cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/item/item.svelte b/src/lib/components/ui/item/item.svelte
index 5d7cbfb..6906163 100644
--- a/src/lib/components/ui/item/item.svelte
+++ b/src/lib/components/ui/item/item.svelte
@@ -1,34 +1,34 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const itemVariants = tv({
-		base: '[a]:hover:bg-muted rounded-lg border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
+		base: "[a]:hover:bg-muted rounded-lg border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
 		variants: {
 			variant: {
-				default: 'border-transparent',
-				outline: 'border-border',
-				muted: 'bg-muted/50 border-transparent'
+				default: "border-transparent",
+				outline: "border-border",
+				muted: "bg-muted/50 border-transparent",
 			},
 			size: {
-				default: 'gap-2.5 px-3 py-2.5',
-				sm: 'gap-2.5 px-3 py-2.5',
-				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0'
-			}
+				default: "gap-2.5 px-3 py-2.5",
+				sm: "gap-2.5 px-3 py-2.5",
+				xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+			},
 		},
 		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
+			variant: "default",
+			size: "default",
+		},
 	});
 
-	export type ItemSize = VariantProps<typeof itemVariants>['size'];
-	export type ItemVariant = VariantProps<typeof itemVariants>['variant'];
+	export type ItemSize = VariantProps<typeof itemVariants>["size"];
+	export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -45,10 +45,10 @@
 
 	const mergedProps = $derived({
 		class: cn(itemVariants({ variant, size }), className),
-		'data-slot': 'item',
-		'data-variant': variant,
-		'data-size': size,
-		...restProps
+		"data-slot": "item",
+		"data-variant": variant,
+		"data-size": size,
+		...restProps,
 	});
 </script>
 
diff --git a/src/lib/components/ui/kbd/index.ts b/src/lib/components/ui/kbd/index.ts
index 8881fc5..6aa7f07 100644
--- a/src/lib/components/ui/kbd/index.ts
+++ b/src/lib/components/ui/kbd/index.ts
@@ -1,10 +1,10 @@
-import Root from './kbd.svelte';
-import Group from './kbd-group.svelte';
+import Root from "./kbd.svelte";
+import Group from "./kbd-group.svelte";
 
 export {
 	Root,
 	Group,
 	//
 	Root as Kbd,
-	Group as KbdGroup
+	Group as KbdGroup,
 };
diff --git a/src/lib/components/ui/kbd/kbd-group.svelte b/src/lib/components/ui/kbd/kbd-group.svelte
index e7e8201..1676c67 100644
--- a/src/lib/components/ui/kbd/kbd-group.svelte
+++ b/src/lib/components/ui/kbd/kbd-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <kbd
 	bind:this={ref}
 	data-slot="kbd-group"
-	class={cn('inline-flex items-center gap-1', className)}
+	class={cn("gap-1 inline-flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/kbd/kbd.svelte b/src/lib/components/ui/kbd/kbd.svelte
index ed2ba90..034ef5a 100644
--- a/src/lib/components/ui/kbd/kbd.svelte
+++ b/src/lib/components/ui/kbd/kbd.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="kbd"
 	class={cn(
-		"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+		"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
index 808d141..8bfca0b 100644
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@@ -1,7 +1,7 @@
-import Root from './label.svelte';
+import Root from "./label.svelte";
 
 export {
 	Root,
 	//
-	Root as Label
+	Root as Label,
 };
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
index 9866a6a..d5e3086 100644
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="label"
 	class={cn(
-		'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+		"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/menubar/index.ts b/src/lib/components/ui/menubar/index.ts
index 1fe1e02..2440d7a 100644
--- a/src/lib/components/ui/menubar/index.ts
+++ b/src/lib/components/ui/menubar/index.ts
@@ -1,20 +1,20 @@
-import Root from './menubar.svelte';
-import Menu from './menubar-menu.svelte';
-import Sub from './menubar-sub.svelte';
-import RadioGroup from './menubar-radio-group.svelte';
-import CheckboxItem from './menubar-checkbox-item.svelte';
-import Content from './menubar-content.svelte';
-import Item from './menubar-item.svelte';
-import Group from './menubar-group.svelte';
-import RadioItem from './menubar-radio-item.svelte';
-import Separator from './menubar-separator.svelte';
-import Shortcut from './menubar-shortcut.svelte';
-import SubContent from './menubar-sub-content.svelte';
-import SubTrigger from './menubar-sub-trigger.svelte';
-import Trigger from './menubar-trigger.svelte';
-import Label from './menubar-label.svelte';
-import GroupHeading from './menubar-group-heading.svelte';
-import Portal from './menubar-portal.svelte';
+import Root from "./menubar.svelte";
+import Menu from "./menubar-menu.svelte";
+import Sub from "./menubar-sub.svelte";
+import RadioGroup from "./menubar-radio-group.svelte";
+import CheckboxItem from "./menubar-checkbox-item.svelte";
+import Content from "./menubar-content.svelte";
+import Item from "./menubar-item.svelte";
+import Group from "./menubar-group.svelte";
+import RadioItem from "./menubar-radio-item.svelte";
+import Separator from "./menubar-separator.svelte";
+import Shortcut from "./menubar-shortcut.svelte";
+import SubContent from "./menubar-sub-content.svelte";
+import SubTrigger from "./menubar-sub-trigger.svelte";
+import Trigger from "./menubar-trigger.svelte";
+import Label from "./menubar-label.svelte";
+import GroupHeading from "./menubar-group-heading.svelte";
+import Portal from "./menubar-portal.svelte";
 
 export {
 	Root,
@@ -51,5 +51,5 @@ export {
 	RadioGroup as MenubarRadioGroup,
 	Label as MenubarLabel,
 	GroupHeading as MenubarGroupHeading,
-	Portal as MenubarPortal
+	Portal as MenubarPortal,
 };
diff --git a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
index 1e9668e..764568f 100644
--- a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { Snippet } from 'svelte';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
 	import MinusIcon from '@lucide/svelte/icons/minus';
 	import CheckIcon from '@lucide/svelte/icons/check';
 
@@ -26,19 +26,19 @@
 	data-slot="menubar-checkbox-item"
 	data-inset={inset}
 	class={cn(
-		'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked: checked, indeterminate: indeterminate })}
 		<span
-			class="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
 		>
 			{#if indeterminate}
-				<MinusIcon />
+				<MinusIcon  />
 			{:else if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/src/lib/components/ui/menubar/menubar-content.svelte b/src/lib/components/ui/menubar/menubar-content.svelte
index cc6ac5f..855da75 100644
--- a/src/lib/components/ui/menubar/menubar-content.svelte
+++ b/src/lib/components/ui/menubar/menubar-content.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import MenubarPortal from './menubar-portal.svelte';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import MenubarPortal from "./menubar-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 8,
 		alignOffset = -4,
-		align = 'start',
-		side = 'bottom',
+		align = "start",
+		side = "bottom",
 		portalProps,
 		...restProps
 	}: MenubarPrimitive.ContentProps & {
@@ -27,7 +27,7 @@
 		{side}
 		{sideOffset}
 		class={cn(
-			'z-50 min-w-36 origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',
+			"bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 z-50 min-w-36 origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100",
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/menubar/menubar-group-heading.svelte b/src/lib/components/ui/menubar/menubar-group-heading.svelte
index 661a7fd..c5b8f92 100644
--- a/src/lib/components/ui/menubar/menubar-group-heading.svelte
+++ b/src/lib/components/ui/menubar/menubar-group-heading.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import type { ComponentProps } from 'svelte';
+	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -17,6 +17,6 @@
 	bind:ref
 	data-slot="menubar-group-heading"
 	data-inset={inset}
-	class={cn('px-2 py-1.5 text-sm font-medium data-[inset]:ps-8', className)}
+	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:ps-8", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/menubar/menubar-group.svelte b/src/lib/components/ui/menubar/menubar-group.svelte
index 6c02051..f75b75a 100644
--- a/src/lib/components/ui/menubar/menubar-group.svelte
+++ b/src/lib/components/ui/menubar/menubar-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/menubar/menubar-item.svelte b/src/lib/components/ui/menubar/menubar-item.svelte
index 8fc2289..17f41b2 100644
--- a/src/lib/components/ui/menubar/menubar-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-item.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		inset = undefined,
-		variant = 'default',
+		variant = "default",
 		...restProps
 	}: MenubarPrimitive.ItemProps & {
 		inset?: boolean;
-		variant?: 'default' | 'destructive';
+		variant?: "default" | "destructive";
 	} = $props();
 </script>
 
@@ -19,9 +19,6 @@
 	data-slot="menubar-item"
 	data-inset={inset}
 	data-variant={variant}
-	class={cn(
-		"group/menubar-item flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
-		className
-	)}
+	class={cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/menubar-item flex items-center", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/menubar/menubar-label.svelte b/src/lib/components/ui/menubar/menubar-label.svelte
index 611cbf5..4e399ce 100644
--- a/src/lib/components/ui/menubar/menubar-label.svelte
+++ b/src/lib/components/ui/menubar/menubar-label.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import { type WithElementRef } from 'bits-ui';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from "$lib/utils.js";
+	import { type WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -18,7 +18,7 @@
 	bind:this={ref}
 	data-slot="menubar-label"
 	data-inset={inset}
-	class={cn('px-1.5 py-1 text-sm font-medium data-inset:pl-7', className)}
+	class={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/menubar/menubar-menu.svelte b/src/lib/components/ui/menubar/menubar-menu.svelte
index 648c9c8..fe3cffa 100644
--- a/src/lib/components/ui/menubar/menubar-menu.svelte
+++ b/src/lib/components/ui/menubar/menubar-menu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
 
 	let { ...restProps }: MenubarPrimitive.MenuProps = $props();
 </script>
diff --git a/src/lib/components/ui/menubar/menubar-portal.svelte b/src/lib/components/ui/menubar/menubar-portal.svelte
index a489ba1..5907ff4 100644
--- a/src/lib/components/ui/menubar/menubar-portal.svelte
+++ b/src/lib/components/ui/menubar/menubar-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
 
 	let { ...restProps }: MenubarPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/menubar/menubar-radio-group.svelte b/src/lib/components/ui/menubar/menubar-radio-group.svelte
index 804c340..e9615a0 100644
--- a/src/lib/components/ui/menubar/menubar-radio-group.svelte
+++ b/src/lib/components/ui/menubar/menubar-radio-group.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(''),
+		value = $bindable(""),
 		...restProps
 	}: MenubarPrimitive.RadioGroupProps = $props();
 </script>
diff --git a/src/lib/components/ui/menubar/menubar-radio-item.svelte b/src/lib/components/ui/menubar/menubar-radio-item.svelte
index 0d53231..f0f5479 100644
--- a/src/lib/components/ui/menubar/menubar-radio-item.svelte
+++ b/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
@@ -19,17 +19,17 @@
 	data-slot="menubar-radio-item"
 	data-inset={inset}
 	class={cn(
-		"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
 		<span
-			class="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
 		>
 			{#if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
diff --git a/src/lib/components/ui/menubar/menubar-separator.svelte b/src/lib/components/ui/menubar/menubar-separator.svelte
index bc7659d..a2caf6e 100644
--- a/src/lib/components/ui/menubar/menubar-separator.svelte
+++ b/src/lib/components/ui/menubar/menubar-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <MenubarPrimitive.Separator
 	bind:ref
 	data-slot="menubar-separator"
-	class={cn('-mx-1 my-1 h-px bg-border', className)}
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/menubar/menubar-shortcut.svelte b/src/lib/components/ui/menubar/menubar-shortcut.svelte
index bb12f15..4307ac8 100644
--- a/src/lib/components/ui/menubar/menubar-shortcut.svelte
+++ b/src/lib/components/ui/menubar/menubar-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="menubar-shortcut"
-	class={cn(
-		'ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground',
-		className
-	)}
+	class={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/menubar/menubar-sub-content.svelte b/src/lib/components/ui/menubar/menubar-sub-content.svelte
index ad0b523..5276303 100644
--- a/src/lib/components/ui/menubar/menubar-sub-content.svelte
+++ b/src/lib/components/ui/menubar/menubar-sub-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <MenubarPrimitive.SubContent
 	bind:ref
 	data-slot="menubar-sub-content"
-	class={cn(
-		'min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-		className
-	)}
+	class={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/menubar/menubar-sub-trigger.svelte b/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
index 5e7c904..bc14b1c 100644
--- a/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
+++ b/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 
 	let {
@@ -19,7 +19,7 @@
 	data-slot="menubar-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/menubar/menubar-sub.svelte b/src/lib/components/ui/menubar/menubar-sub.svelte
index 89bb482..82f962e 100644
--- a/src/lib/components/ui/menubar/menubar-sub.svelte
+++ b/src/lib/components/ui/menubar/menubar-sub.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: MenubarPrimitive.SubProps = $props();
 </script>
diff --git a/src/lib/components/ui/menubar/menubar-trigger.svelte b/src/lib/components/ui/menubar/menubar-trigger.svelte
index f7069cd..054d0e1 100644
--- a/src/lib/components/ui/menubar/menubar-trigger.svelte
+++ b/src/lib/components/ui/menubar/menubar-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <MenubarPrimitive.Trigger
 	bind:ref
 	data-slot="menubar-trigger"
-	class={cn(
-		'flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted',
-		className
-	)}
+	class={cn("hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/menubar/menubar.svelte b/src/lib/components/ui/menubar/menubar.svelte
index b623518..0ddea26 100644
--- a/src/lib/components/ui/menubar/menubar.svelte
+++ b/src/lib/components/ui/menubar/menubar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <MenubarPrimitive.Root
 	bind:ref
 	data-slot="menubar"
-	class={cn('flex h-8 items-center gap-0.5 rounded-lg border p-[3px]', className)}
+	class={cn("h-8 gap-0.5 rounded-lg border p-[3px] flex items-center", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/native-select/index.ts b/src/lib/components/ui/native-select/index.ts
index 7ccb913..4aebbe1 100644
--- a/src/lib/components/ui/native-select/index.ts
+++ b/src/lib/components/ui/native-select/index.ts
@@ -1,6 +1,6 @@
-import Root from './native-select.svelte';
-import Option from './native-select-option.svelte';
-import OptGroup from './native-select-opt-group.svelte';
+import Root from "./native-select.svelte";
+import Option from "./native-select-option.svelte";
+import OptGroup from "./native-select-opt-group.svelte";
 
 export {
 	Root,
@@ -8,5 +8,5 @@ export {
 	OptGroup,
 	Root as NativeSelect,
 	Option as NativeSelectOption,
-	OptGroup as NativeSelectOptGroup
+	OptGroup as NativeSelectOptGroup,
 };
diff --git a/src/lib/components/ui/native-select/native-select-opt-group.svelte b/src/lib/components/ui/native-select/native-select-opt-group.svelte
index fc315ac..16339f1 100644
--- a/src/lib/components/ui/native-select/native-select-opt-group.svelte
+++ b/src/lib/components/ui/native-select/native-select-opt-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLOptgroupAttributes } from 'svelte/elements';
-	import type { WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLOptgroupAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/native-select/native-select-option.svelte b/src/lib/components/ui/native-select/native-select-option.svelte
index f9a316e..aabe994 100644
--- a/src/lib/components/ui/native-select/native-select-option.svelte
+++ b/src/lib/components/ui/native-select/native-select-option.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLOptionAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLOptionAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <option
 	bind:this={ref}
 	data-slot="native-select-option"
-	class={cn('bg-[Canvas] text-[CanvasText]', className)}
+	class={cn("bg-[Canvas] text-[CanvasText]", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/native-select/native-select.svelte b/src/lib/components/ui/native-select/native-select.svelte
index 499a7da..d73238b 100644
--- a/src/lib/components/ui/native-select/native-select.svelte
+++ b/src/lib/components/ui/native-select/native-select.svelte
@@ -1,18 +1,17 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import type { HTMLSelectAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLSelectAttributes } from "svelte/elements";
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
-	type NativeSelectProps = Omit<HTMLSelectAttributes, 'size'> & {
-		ref?: HTMLSelectElement | null;
-		size?: 'sm' | 'default';
+	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes>, "size"> & {
+		size?: "sm" | "default";
 	};
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
-		size = 'default',
+		size = "default",
 		children,
 		...restProps
 	}: NativeSelectProps = $props();
@@ -20,7 +19,7 @@
 
 <div
 	class={cn(
-		'cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50',
+		"cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50",
 		className
 	)}
 	data-slot="native-select-wrapper"
@@ -31,14 +30,10 @@
 		bind:this={ref}
 		data-slot="native-select"
 		data-size={size}
-		class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+		class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
 		{...restProps}
 	>
 		{@render children?.()}
 	</select>
-	<ChevronDownIcon
-		class="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
-		aria-hidden
-		data-slot="native-select-icon"
-	/>
+	<ChevronDownIcon class="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none" aria-hidden data-slot="native-select-icon" />
 </div>
diff --git a/src/lib/components/ui/navigation-menu/index.ts b/src/lib/components/ui/navigation-menu/index.ts
index 9af7ef6..bbc250f 100644
--- a/src/lib/components/ui/navigation-menu/index.ts
+++ b/src/lib/components/ui/navigation-menu/index.ts
@@ -1,11 +1,11 @@
-import Root from './navigation-menu.svelte';
-import Content from './navigation-menu-content.svelte';
-import Indicator from './navigation-menu-indicator.svelte';
-import Item from './navigation-menu-item.svelte';
-import Link from './navigation-menu-link.svelte';
-import List from './navigation-menu-list.svelte';
-import Trigger from './navigation-menu-trigger.svelte';
-import Viewport from './navigation-menu-viewport.svelte';
+import Root from "./navigation-menu.svelte";
+import Content from "./navigation-menu-content.svelte";
+import Indicator from "./navigation-menu-indicator.svelte";
+import Item from "./navigation-menu-item.svelte";
+import Link from "./navigation-menu-link.svelte";
+import List from "./navigation-menu-list.svelte";
+import Trigger from "./navigation-menu-trigger.svelte";
+import Viewport from "./navigation-menu-viewport.svelte";
 
 export {
 	Root,
@@ -24,5 +24,5 @@ export {
 	Link as NavigationMenuLink,
 	List as NavigationMenuList,
 	Trigger as NavigationMenuTrigger,
-	Viewport as NavigationMenuViewport
+	Viewport as NavigationMenuViewport,
 };
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
index 2068879..20ef1b7 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="navigation-menu-content"
 	class={cn(
-		'top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95',
+		"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
index 40766fe..99f0e72 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-indicator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,10 @@
 	bind:ref
 	data-slot="navigation-menu-indicator"
 	class={cn(
-		'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',
+		"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
 		className
 	)}
 	{...restProps}
 >
-	<div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md"></div>
+	<div class="bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45"></div>
 </NavigationMenuPrimitive.Indicator>
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
index 1ead4bc..4760458 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <NavigationMenuPrimitive.Item
 	bind:ref
 	data-slot="navigation-menu-item"
-	class={cn('cn-navigation-menu-item relative', className)}
+	class={cn("cn-navigation-menu-item relative", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
index 018ecc8..57ace4d 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-link.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <NavigationMenuPrimitive.Link
 	bind:ref
 	data-slot="navigation-menu-link"
-	class={cn(
-		"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
index ea542a6..6f36137 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-list.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,9 @@
 <NavigationMenuPrimitive.List
 	bind:ref
 	data-slot="navigation-menu-list"
-	class={cn('group flex flex-1 list-none items-center justify-center gap-0', className)}
+	class={cn(
+		"gap-0 group flex flex-1 list-none items-center justify-center",
+		className
+	)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
index 43d40b7..f11a8bb 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte
@@ -1,14 +1,14 @@
 <script lang="ts" module>
-	import { cn } from '$lib/utils/format.js';
-	import { tv } from 'tailwind-variants';
+	import { cn } from "$lib/utils.js";
+	import { tv } from "tailwind-variants";
 
 	export const navigationMenuTriggerStyle = tv({
-		base: 'hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none'
+		base: "hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none",
 	});
 </script>
 
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	let {
 		ref = $bindable(null),
@@ -21,12 +21,9 @@
 <NavigationMenuPrimitive.Trigger
 	bind:ref
 	data-slot="navigation-menu-trigger"
-	class={cn(navigationMenuTriggerStyle(), 'group', className)}
+	class={cn(navigationMenuTriggerStyle(), "group", className)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon
-		class="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
-		aria-hidden="true"
-	/>
+	<ChevronDownIcon class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
 </NavigationMenuPrimitive.Trigger>
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte b/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
index c216626..c43ef64 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu-viewport.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,12 +9,12 @@
 	}: NavigationMenuPrimitive.ViewportProps = $props();
 </script>
 
-<div class={cn('absolute start-0 top-full isolate z-50 flex justify-center')}>
+<div class={cn("absolute start-0 top-full isolate z-50 flex justify-center")}>
 	<NavigationMenuPrimitive.Viewport
 		bind:ref
 		data-slot="navigation-menu-viewport"
 		class={cn(
-			'origin-top-center relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)] data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90',
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full overflow-hidden md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)]",
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/navigation-menu/navigation-menu.svelte b/src/lib/components/ui/navigation-menu/navigation-menu.svelte
index 965d823..27cd0d6 100644
--- a/src/lib/components/ui/navigation-menu/navigation-menu.svelte
+++ b/src/lib/components/ui/navigation-menu/navigation-menu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { NavigationMenu as NavigationMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
-	import NavigationMenuViewport from './navigation-menu-viewport.svelte';
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import NavigationMenuViewport from "./navigation-menu-viewport.svelte";
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 	data-slot="navigation-menu"
 	data-viewport={viewport}
 	class={cn(
-		'group/navigation-menu relative flex max-w-max max-w-max flex-1 items-center justify-center',
+		"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/pagination/index.ts b/src/lib/components/ui/pagination/index.ts
index 452fe7e..214b851 100644
--- a/src/lib/components/ui/pagination/index.ts
+++ b/src/lib/components/ui/pagination/index.ts
@@ -1,12 +1,12 @@
-import Root from './pagination.svelte';
-import Content from './pagination-content.svelte';
-import Item from './pagination-item.svelte';
-import Link from './pagination-link.svelte';
-import PrevButton from './pagination-prev-button.svelte';
-import NextButton from './pagination-next-button.svelte';
-import Ellipsis from './pagination-ellipsis.svelte';
-import Previous from './pagination-previous.svelte';
-import Next from './pagination-next.svelte';
+import Root from "./pagination.svelte";
+import Content from "./pagination-content.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+import Previous from "./pagination-previous.svelte";
+import Next from "./pagination-next.svelte";
 
 export {
 	Root,
@@ -27,5 +27,5 @@ export {
 	NextButton as PaginationNextButton, // old
 	Ellipsis as PaginationEllipsis,
 	Previous as PaginationPrevious,
-	Next as PaginationNext
+	Next as PaginationNext,
 };
diff --git a/src/lib/components/ui/pagination/pagination-content.svelte b/src/lib/components/ui/pagination/pagination-content.svelte
index 76f9617..cdf7415 100644
--- a/src/lib/components/ui/pagination/pagination-content.svelte
+++ b/src/lib/components/ui/pagination/pagination-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <ul
 	bind:this={ref}
 	data-slot="pagination-content"
-	class={cn('flex items-center gap-0.5', className)}
+	class={cn("gap-0.5 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index 61e8e01..ca9b8c3 100644
--- a/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
 	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
 
 	let {
@@ -14,12 +14,9 @@
 	bind:this={ref}
 	aria-hidden="true"
 	data-slot="pagination-ellipsis"
-	class={cn(
-		"flex size-8 items-center items-center justify-center justify-center [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center", className)}
 	{...restProps}
 >
-	<MoreHorizontalIcon />
+	<MoreHorizontalIcon  />
 	<span class="sr-only">More pages</span>
 </span>
diff --git a/src/lib/components/ui/pagination/pagination-item.svelte b/src/lib/components/ui/pagination/pagination-item.svelte
index a5c9601..fd7ffc3 100644
--- a/src/lib/components/ui/pagination/pagination-item.svelte
+++ b/src/lib/components/ui/pagination/pagination-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from 'svelte/elements';
-	import type { WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
diff --git a/src/lib/components/ui/pagination/pagination-link.svelte b/src/lib/components/ui/pagination/pagination-link.svelte
index 7d177c2..d147bd2 100644
--- a/src/lib/components/ui/pagination/pagination-link.svelte
+++ b/src/lib/components/ui/pagination/pagination-link.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
-	import { buttonVariants, type ButtonSize } from '$lib/components/ui/button/index.js';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import { buttonVariants, type ButtonSize } from "$lib/components/ui/button/index.js";
 	let {
 		ref = $bindable(null),
 		class: className,
-		size = 'icon',
+		size = "icon",
 		isActive,
 		page,
 		children,
@@ -23,13 +23,13 @@
 <PaginationPrimitive.Page
 	bind:ref
 	{page}
-	aria-current={isActive ? 'page' : undefined}
+	aria-current={isActive ? "page" : undefined}
 	data-slot="pagination-link"
 	data-active={isActive}
 	data-size={size}
 	class={cn(
-		buttonVariants({ size, variant: isActive ? 'outline' : 'ghost' }),
-		'cn-pagination-link',
+		buttonVariants({ size, variant: isActive ? "outline" : "ghost" }),
+		"cn-pagination-link",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/pagination/pagination-next-button.svelte b/src/lib/components/ui/pagination/pagination-next-button.svelte
index aa6a1a5..51a2c59 100644
--- a/src/lib/components/ui/pagination/pagination-next-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-	import { cn } from '$lib/utils/format.js';
-	import { buttonVariants } from '../button/index.js';
+	import { cn } from "$lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,13 +14,13 @@
 
 {#snippet Fallback()}
 	<span>Next</span>
-	<ChevronRightIcon class={cn('size-4', className)} />
+	<ChevronRightIcon class={cn("size-4", className)} />
 {/snippet}
 
 <PaginationPrimitive.NextButton
 	bind:ref
 	aria-label="Go to next page"
-	class={cn(buttonVariants({ variant: 'ghost' }), 'pr-1.5!', className)}
+	class={cn(buttonVariants({ variant: "ghost" }), "pr-1.5!", className)}
 	{...restProps}
 >
 	{#if children}
diff --git a/src/lib/components/ui/pagination/pagination-next.svelte b/src/lib/components/ui/pagination/pagination-next.svelte
index 6023c28..1cde81f 100644
--- a/src/lib/components/ui/pagination/pagination-next.svelte
+++ b/src/lib/components/ui/pagination/pagination-next.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 
 	let {
@@ -14,7 +14,11 @@
 <PaginationPrimitive.NextButton
 	bind:ref
 	aria-label="Go to next page"
-	class={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pr-1.5!', className)}
+	class={cn(
+		buttonVariants({ variant: "ghost", size: "default" }),
+		"pr-1.5!",
+		className
+	)}
 	{...restProps}
 >
 	<span class="cn-pagination-next-text hidden sm:block">Next</span>
diff --git a/src/lib/components/ui/pagination/pagination-prev-button.svelte b/src/lib/components/ui/pagination/pagination-prev-button.svelte
index c399bad..f97ee7b 100644
--- a/src/lib/components/ui/pagination/pagination-prev-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
 	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
-	import { cn } from '$lib/utils/format.js';
-	import { buttonVariants } from '../button/index.js';
+	import { cn } from "$lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,14 +13,14 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class={cn('size-4', className)} />
+	<ChevronLeftIcon class={cn("size-4", className)} />
 	<span>Previous</span>
 {/snippet}
 
 <PaginationPrimitive.PrevButton
 	bind:ref
 	aria-label="Go to previous page"
-	class={cn(buttonVariants({ variant: 'ghost' }), 'pl-1.5!', className)}
+	class={cn(buttonVariants({ variant: "ghost" }), "pl-1.5!", className)}
 	{...restProps}
 >
 	{#if children}
diff --git a/src/lib/components/ui/pagination/pagination-previous.svelte b/src/lib/components/ui/pagination/pagination-previous.svelte
index efa4419..b344d29 100644
--- a/src/lib/components/ui/pagination/pagination-previous.svelte
+++ b/src/lib/components/ui/pagination/pagination-previous.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
 
 	let {
@@ -14,7 +14,11 @@
 <PaginationPrimitive.PrevButton
 	bind:ref
 	aria-label="Go to previous page"
-	class={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pl-1.5!', className)}
+	class={cn(
+		buttonVariants({ variant: "ghost", size: "default" }),
+		"pl-1.5!",
+		className
+	)}
 	{...restProps}
 >
 	<ChevronLeftIcon data-icon="inline-start" />
diff --git a/src/lib/components/ui/pagination/pagination.svelte b/src/lib/components/ui/pagination/pagination.svelte
index 0dcc6cd..8fdb5e8 100644
--- a/src/lib/components/ui/pagination/pagination.svelte
+++ b/src/lib/components/ui/pagination/pagination.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
 
-	import { cn } from '$lib/utils/format.js';
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -23,6 +23,6 @@
 	{count}
 	{perPage}
 	{siblingCount}
-	class={cn('cn-pagination mx-auto flex w-full justify-center', className)}
+	class={cn("cn-pagination mx-auto flex w-full justify-center", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts
index 7ca18f4..5f18036 100644
--- a/src/lib/components/ui/popover/index.ts
+++ b/src/lib/components/ui/popover/index.ts
@@ -1,11 +1,11 @@
-import Root from './popover.svelte';
-import Close from './popover-close.svelte';
-import Content from './popover-content.svelte';
-import Description from './popover-description.svelte';
-import Header from './popover-header.svelte';
-import Title from './popover-title.svelte';
-import Trigger from './popover-trigger.svelte';
-import Portal from './popover-portal.svelte';
+import Root from "./popover.svelte";
+import Close from "./popover-close.svelte";
+import Content from "./popover-content.svelte";
+import Description from "./popover-description.svelte";
+import Header from "./popover-header.svelte";
+import Title from "./popover-title.svelte";
+import Trigger from "./popover-trigger.svelte";
+import Portal from "./popover-portal.svelte";
 
 export {
 	Root,
@@ -24,5 +24,5 @@ export {
 	Title as PopoverTitle,
 	Trigger as PopoverTrigger,
 	Close as PopoverClose,
-	Portal as PopoverPortal
+	Portal as PopoverPortal,
 };
diff --git a/src/lib/components/ui/popover/popover-close.svelte b/src/lib/components/ui/popover/popover-close.svelte
index dc4dec4..c360925 100644
--- a/src/lib/components/ui/popover/popover-close.svelte
+++ b/src/lib/components/ui/popover/popover-close.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { Popover as PopoverPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
 </script>
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
index b433678..dd9a38f 100644
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
-	import PopoverPortal from './popover-portal.svelte';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import PopoverPortal from "./popover-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 4,
-		align = 'center',
+		align = "center",
 		portalProps,
 		...restProps
 	}: PopoverPrimitive.ContentProps & {
@@ -23,7 +23,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden",
 			className
 		)}
 		{...restProps}
diff --git a/src/lib/components/ui/popover/popover-description.svelte b/src/lib/components/ui/popover/popover-description.svelte
index 3fae95b..c28ab23 100644
--- a/src/lib/components/ui/popover/popover-description.svelte
+++ b/src/lib/components/ui/popover/popover-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="popover-description"
-	class={cn('text-muted-foreground', className)}
+	class={cn("text-muted-foreground", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/popover/popover-header.svelte b/src/lib/components/ui/popover/popover-header.svelte
index 77b388b..69b85b1 100644
--- a/src/lib/components/ui/popover/popover-header.svelte
+++ b/src/lib/components/ui/popover/popover-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="popover-header"
-	class={cn('flex flex-col gap-0.5 text-sm', className)}
+	class={cn("flex flex-col gap-0.5 text-sm", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/popover/popover-portal.svelte b/src/lib/components/ui/popover/popover-portal.svelte
index 25efb87..dd8265f 100644
--- a/src/lib/components/ui/popover/popover-portal.svelte
+++ b/src/lib/components/ui/popover/popover-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { Popover as PopoverPrimitive } from "bits-ui";
 
 	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/popover/popover-title.svelte b/src/lib/components/ui/popover/popover-title.svelte
index 5d7bab7..ee9f2ff 100644
--- a/src/lib/components/ui/popover/popover-title.svelte
+++ b/src/lib/components/ui/popover/popover-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="popover-title" class={cn('font-medium', className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="popover-title"
+	class={cn("font-medium", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/popover/popover-trigger.svelte b/src/lib/components/ui/popover/popover-trigger.svelte
index 875a2a9..586323c 100644
--- a/src/lib/components/ui/popover/popover-trigger.svelte
+++ b/src/lib/components/ui/popover/popover-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn } from "$lib/utils.js";
+	import { Popover as PopoverPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <PopoverPrimitive.Trigger
 	bind:ref
 	data-slot="popover-trigger"
-	class={cn('', className)}
+	class={cn("", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/popover/popover.svelte b/src/lib/components/ui/popover/popover.svelte
index f39b867..6b1aa5f 100644
--- a/src/lib/components/ui/popover/popover.svelte
+++ b/src/lib/components/ui/popover/popover.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { Popover as PopoverPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
 </script>
diff --git a/src/lib/components/ui/progress/index.ts b/src/lib/components/ui/progress/index.ts
index 97f57fc..25eee61 100644
--- a/src/lib/components/ui/progress/index.ts
+++ b/src/lib/components/ui/progress/index.ts
@@ -1,7 +1,7 @@
-import Root from './progress.svelte';
+import Root from "./progress.svelte";
 
 export {
 	Root,
 	//
-	Root as Progress
+	Root as Progress,
 };
diff --git a/src/lib/components/ui/progress/progress.svelte b/src/lib/components/ui/progress/progress.svelte
index 9657a29..c4d1508 100644
--- a/src/lib/components/ui/progress/progress.svelte
+++ b/src/lib/components/ui/progress/progress.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Progress as ProgressPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Progress as ProgressPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,17 +14,14 @@
 <ProgressPrimitive.Root
 	bind:ref
 	data-slot="progress"
-	class={cn(
-		'relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted',
-		className
-	)}
+	class={cn("bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden", className)}
 	{value}
 	{max}
 	{...restProps}
 >
 	<div
 		data-slot="progress-indicator"
-		class="size-full flex-1 bg-primary transition-all"
+		class="bg-primary size-full flex-1 transition-all"
 		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
 	></div>
 </ProgressPrimitive.Root>
diff --git a/src/lib/components/ui/radio-group/index.ts b/src/lib/components/ui/radio-group/index.ts
index a8bb80f..90b33fe 100644
--- a/src/lib/components/ui/radio-group/index.ts
+++ b/src/lib/components/ui/radio-group/index.ts
@@ -1,10 +1,10 @@
-import Root from './radio-group.svelte';
-import Item from './radio-group-item.svelte';
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
 
 export {
 	Root,
 	Item,
 	//
 	Root as RadioGroup,
-	Item as RadioGroupItem
+	Item as RadioGroupItem,
 };
diff --git a/src/lib/components/ui/radio-group/radio-group-item.svelte b/src/lib/components/ui/radio-group/radio-group-item.svelte
index 5d1b5bd..e27c3b0 100644
--- a/src/lib/components/ui/radio-group/radio-group-item.svelte
+++ b/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
 	import CircleIcon from '@lucide/svelte/icons/circle';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot="radio-group-item"
 	class={cn(
-		'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...restProps}
@@ -22,9 +22,7 @@
 	{#snippet children({ checked })}
 		<div data-slot="radio-group-indicator" class="flex size-4 items-center justify-center">
 			{#if checked}
-				<CircleIcon
-					class="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground"
-				/>
+				<CircleIcon class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
 			{/if}
 		</div>
 	{/snippet}
diff --git a/src/lib/components/ui/radio-group/radio-group.svelte b/src/lib/components/ui/radio-group/radio-group.svelte
index 6f3e07c..9d3dd86 100644
--- a/src/lib/components/ui/radio-group/radio-group.svelte
+++ b/src/lib/components/ui/radio-group/radio-group.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		value = $bindable(''),
+		value = $bindable(""),
 		...restProps
 	}: RadioGroupPrimitive.RootProps = $props();
 </script>
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="radio-group"
-	class={cn('grid w-full gap-2', className)}
+	class={cn("grid gap-2 w-full", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/range-calendar/index.ts b/src/lib/components/ui/range-calendar/index.ts
index 264cd7a..d2d258b 100644
--- a/src/lib/components/ui/range-calendar/index.ts
+++ b/src/lib/components/ui/range-calendar/index.ts
@@ -1,21 +1,21 @@
-import Root from './range-calendar.svelte';
-import Cell from './range-calendar-cell.svelte';
-import Day from './range-calendar-day.svelte';
-import Grid from './range-calendar-grid.svelte';
-import Header from './range-calendar-header.svelte';
-import Months from './range-calendar-months.svelte';
-import GridRow from './range-calendar-grid-row.svelte';
-import Heading from './range-calendar-heading.svelte';
-import HeadCell from './range-calendar-head-cell.svelte';
-import NextButton from './range-calendar-next-button.svelte';
-import PrevButton from './range-calendar-prev-button.svelte';
-import MonthSelect from './range-calendar-month-select.svelte';
-import YearSelect from './range-calendar-year-select.svelte';
-import Caption from './range-calendar-caption.svelte';
-import Nav from './range-calendar-nav.svelte';
-import Month from './range-calendar-month.svelte';
-import GridBody from './range-calendar-grid-body.svelte';
-import GridHead from './range-calendar-grid-head.svelte';
+import Root from "./range-calendar.svelte";
+import Cell from "./range-calendar-cell.svelte";
+import Day from "./range-calendar-day.svelte";
+import Grid from "./range-calendar-grid.svelte";
+import Header from "./range-calendar-header.svelte";
+import Months from "./range-calendar-months.svelte";
+import GridRow from "./range-calendar-grid-row.svelte";
+import Heading from "./range-calendar-heading.svelte";
+import HeadCell from "./range-calendar-head-cell.svelte";
+import NextButton from "./range-calendar-next-button.svelte";
+import PrevButton from "./range-calendar-prev-button.svelte";
+import MonthSelect from "./range-calendar-month-select.svelte";
+import YearSelect from "./range-calendar-year-select.svelte";
+import Caption from "./range-calendar-caption.svelte";
+import Nav from "./range-calendar-nav.svelte";
+import Month from "./range-calendar-month.svelte";
+import GridBody from "./range-calendar-grid-body.svelte";
+import GridHead from "./range-calendar-grid-head.svelte";
 
 export {
 	Day,
@@ -36,5 +36,5 @@ export {
 	Nav,
 	Month,
 	//
-	Root as RangeCalendar
+	Root as RangeCalendar,
 };
diff --git a/src/lib/components/ui/range-calendar/range-calendar-caption.svelte b/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
index 406bc49..944654d 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { ComponentProps } from 'svelte';
-	import type RangeCalendar from './range-calendar.svelte';
-	import RangeCalendarMonthSelect from './range-calendar-month-select.svelte';
-	import RangeCalendarYearSelect from './range-calendar-year-select.svelte';
-	import { DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date';
+	import type { ComponentProps } from "svelte";
+	import type RangeCalendar from "./range-calendar.svelte";
+	import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
+	import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
 
 	let {
 		captionLayout,
@@ -14,13 +14,13 @@
 		month,
 		locale,
 		placeholder = $bindable(),
-		monthIndex = 0
+		monthIndex = 0,
 	}: {
-		captionLayout: ComponentProps<typeof RangeCalendar>['captionLayout'];
-		months: ComponentProps<typeof RangeCalendarMonthSelect>['months'];
-		monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>['monthFormat'];
-		years: ComponentProps<typeof RangeCalendarYearSelect>['years'];
-		yearFormat: ComponentProps<typeof RangeCalendarYearSelect>['yearFormat'];
+		captionLayout: ComponentProps<typeof RangeCalendar>["captionLayout"];
+		months: ComponentProps<typeof RangeCalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof RangeCalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof RangeCalendarYearSelect>["yearFormat"];
 		month: DateValue;
 		placeholder: DateValue | undefined;
 		locale: string;
@@ -29,13 +29,13 @@
 
 	function formatYear(date: DateValue) {
 		const dateObj = date.toDate(getLocalTimeZone());
-		if (typeof yearFormat === 'function') return yearFormat(dateObj.getFullYear());
+		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
 		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
 	}
 
 	function formatMonth(date: DateValue) {
 		const dateObj = date.toDate(getLocalTimeZone());
-		if (typeof monthFormat === 'function') return monthFormat(dateObj.getMonth() + 1);
+		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
 		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
 	}
 </script>
@@ -58,15 +58,15 @@
 	<RangeCalendarYearSelect {years} {yearFormat} value={month.year} />
 {/snippet}
 
-{#if captionLayout === 'dropdown'}
+{#if captionLayout === "dropdown"}
 	{@render MonthSelect()}
 	{@render YearSelect()}
-{:else if captionLayout === 'dropdown-months'}
+{:else if captionLayout === "dropdown-months"}
 	{@render MonthSelect()}
 	{#if placeholder}
 		{formatYear(placeholder)}
 	{/if}
-{:else if captionLayout === 'dropdown-years'}
+{:else if captionLayout === "dropdown-years"}
 	{#if placeholder}
 		{formatMonth(placeholder)}
 	{/if}
diff --git a/src/lib/components/ui/range-calendar/range-calendar-cell.svelte b/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
index c73c9a7..e042cf1 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <RangeCalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		'relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-e-(--cell-radius) [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:has([data-range-end])]:rounded-e-(--cell-radius) dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:rounded-none [&:has([data-range-middle])]:bg-accent first:[&:has([data-range-middle])]:rounded-s-(--cell-radius) last:[&:has([data-range-middle])]:rounded-e-(--cell-radius) dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-range-start])]:rounded-s-(--cell-radius) dark:[&:has([data-range-start])]:hover:bg-accent [&:has([data-selected])]:bg-accent [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)',
+		"dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-selected])]:bg-accent relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-e-(--cell-radius) [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:has([data-range-end])]:rounded-e-(--cell-radius) [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-s-(--cell-radius) last:[&:has([data-range-middle])]:rounded-e-(--cell-radius) [&:has([data-range-start])]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/range-calendar/range-calendar-day.svelte b/src/lib/components/ui/range-calendar/range-calendar-day.svelte
index 56428b5..0890592 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-day.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-day.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,24 +12,24 @@
 <RangeCalendarPrimitive.Day
 	bind:ref
 	class={cn(
-		'flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none',
-		'not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground',
-		'data-[range-middle]:rounded-none [&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground',
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none",
+		"not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground data-[range-middle]:rounded-none",
 		// range Start
-		'data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-start]:hover:text-foreground',
+		"data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-start]:hover:text-foreground",
 		// range End
-		'data-[range-end]:bg-primary data-[range-end]:text-primary-foreground data-[range-end]:hover:text-foreground',
+		"data-[range-end]:bg-primary data-[range-end]:text-primary-foreground data-[range-end]:hover:text-foreground",
 		// Outside months
-		'[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground',
+		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
 		// Disabled
-		'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		// Unavailable
-		'data-[unavailable]:line-through',
-		'dark:data-[range-middle]:hover:bg-accent/0',
+		"data-[unavailable]:line-through",
+		"dark:data-[range-middle]:hover:bg-accent/0",
 		// focus
-		'focus:relative focus:border-ring focus:ring-ring/50',
+		"focus:border-ring focus:ring-ring/50 focus:relative",
 		// inner spans
-		'[&>span]:text-xs [&>span]:opacity-70',
+		"[&>span]:text-xs [&>span]:opacity-70",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte b/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
index 7f8a667..45a31d1 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: RangeCalendarPrimitive.GridBodyProps = $props();
 </script>
diff --git a/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte b/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
index a46660b..e311625 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: RangeCalendarPrimitive.GridHeadProps = $props();
 </script>
diff --git a/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte b/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
index b5828c3..3286b2a 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,4 +9,4 @@
 	}: RangeCalendarPrimitive.GridRowProps = $props();
 </script>
 
-<RangeCalendarPrimitive.GridRow bind:ref class={cn('flex', className)} {...restProps} />
+<RangeCalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
diff --git a/src/lib/components/ui/range-calendar/range-calendar-grid.svelte b/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
index 093449d..3d74b2f 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-grid.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <RangeCalendarPrimitive.Grid
 	bind:ref
-	class={cn('mt-4 flex w-full border-collapse flex-col gap-1', className)}
+	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte b/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
index 524ee9c..93a60c0 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <RangeCalendarPrimitive.HeadCell
 	bind:ref
 	class={cn(
-		'w-(--cell-size) rounded-md text-[0.8rem] font-normal text-muted-foreground',
+		"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/range-calendar/range-calendar-header.svelte b/src/lib/components/ui/range-calendar/range-calendar-header.svelte
index a20418c..ec1e6ea 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-header.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 <RangeCalendarPrimitive.Header
 	bind:ref
 	class={cn(
-		'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
+		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/range-calendar/range-calendar-heading.svelte b/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
index 6566c82..3b3325f 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +11,6 @@
 
 <RangeCalendarPrimitive.Heading
 	bind:ref
-	class={cn('px-(--cell-size) text-sm font-medium', className)}
+	class={cn("px-(--cell-size) text-sm font-medium", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte b/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte
index e5a3b06..d12c18f 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-month-select.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
@@ -14,7 +14,7 @@
 
 <span
 	class={cn(
-		'relative flex rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
 		className
 	)}
 >
@@ -33,11 +33,11 @@
 				{/each}
 			</select>
 			<span
-				class="flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
-				<ChevronDownIcon class={cn('size-4', className)} />
+				<ChevronDownIcon class={cn("size-4", className)} />
 			</span>
 		{/snippet}
 	</RangeCalendarPrimitive.MonthSelect>
diff --git a/src/lib/components/ui/range-calendar/range-calendar-month.svelte b/src/lib/components/ui/range-calendar/range-calendar-month.svelte
index 56b9251..e747fae 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-month.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-month.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { type WithElementRef, cn } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { type WithElementRef, cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<div {...restProps} bind:this={ref} class={cn('flex flex-col', className)}>
+<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
 	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/range-calendar/range-calendar-months.svelte b/src/lib/components/ui/range-calendar/range-calendar-months.svelte
index db0d341..f717a9d 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-months.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-months.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +12,7 @@
 
 <div
 	bind:this={ref}
-	class={cn('relative flex flex-col gap-4 md:flex-row', className)}
+	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/range-calendar/range-calendar-nav.svelte b/src/lib/components/ui/range-calendar/range-calendar-nav.svelte
index 5ce494d..27f33d7 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-nav.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-nav.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <nav
 	{...restProps}
 	bind:this={ref}
-	class={cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', className)}
+	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
 >
 	{@render children?.()}
 </nav>
diff --git a/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte b/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
index ddf2095..2c82cd4 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/format.js';
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		variant = 'ghost',
+		variant = "ghost",
 		...restProps
 	}: RangeCalendarPrimitive.NextButtonProps & {
 		variant?: ButtonVariant;
@@ -16,14 +16,14 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRightIcon class={cn('size-4', className)} />
+	<ChevronRightIcon class={cn("size-4", className)} />
 {/snippet}
 
 <RangeCalendarPrimitive.NextButton
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte b/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
index c5de30b..0b912f8 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
-	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/format.js';
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		variant = 'ghost',
+		variant = "ghost",
 		...restProps
 	}: RangeCalendarPrimitive.PrevButtonProps & {
 		variant?: ButtonVariant;
@@ -16,14 +16,14 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class={cn('size-4', className)} />
+	<ChevronLeftIcon class={cn("size-4", className)} />
 {/snippet}
 
 <RangeCalendarPrimitive.PrevButton
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte b/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte
index 1751489..926aa3a 100644
--- a/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar-year-select.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
@@ -13,7 +13,7 @@
 
 <span
 	class={cn(
-		'relative flex rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
 		className
 	)}
 >
@@ -32,11 +32,11 @@
 				{/each}
 			</select>
 			<span
-				class="flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
+				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
-				<ChevronDownIcon class={cn('size-4', className)} />
+				<ChevronDownIcon class={cn("size-4", className)} />
 			</span>
 		{/snippet}
 	</RangeCalendarPrimitive.YearSelect>
diff --git a/src/lib/components/ui/range-calendar/range-calendar.svelte b/src/lib/components/ui/range-calendar/range-calendar.svelte
index f004fec..a2c01f1 100644
--- a/src/lib/components/ui/range-calendar/range-calendar.svelte
+++ b/src/lib/components/ui/range-calendar/range-calendar.svelte
@@ -1,41 +1,41 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
-	import * as RangeCalendar from './index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { ButtonVariant } from '$lib/components/ui/button/index.js';
-	import type { Snippet } from 'svelte';
-	import { isEqualMonth, type DateValue } from '@internationalized/date';
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import * as RangeCalendar from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ButtonVariant } from "$lib/components/ui/button/index.js";
+	import type { Snippet } from "svelte";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		placeholder = $bindable(),
-		weekdayFormat = 'short',
+		weekdayFormat = "short",
 		class: className,
-		buttonVariant = 'ghost',
-		captionLayout = 'label',
-		locale = 'en-US',
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
 		months: monthsProp,
 		years,
 		monthFormat: monthFormatProp,
-		yearFormat = 'numeric',
+		yearFormat = "numeric",
 		day,
 		disableDaysOutsideMonth = false,
 		...restProps
 	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
 		buttonVariant?: ButtonVariant;
-		captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
-		months?: RangeCalendarPrimitive.MonthSelectProps['months'];
-		years?: RangeCalendarPrimitive.YearSelectProps['years'];
-		monthFormat?: RangeCalendarPrimitive.MonthSelectProps['monthFormat'];
-		yearFormat?: RangeCalendarPrimitive.YearSelectProps['yearFormat'];
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: RangeCalendarPrimitive.MonthSelectProps["months"];
+		years?: RangeCalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: RangeCalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: RangeCalendarPrimitive.YearSelectProps["yearFormat"];
 		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
 	} = $props();
 
 	const monthFormat = $derived.by(() => {
 		if (monthFormatProp) return monthFormatProp;
-		if (captionLayout.startsWith('dropdown')) return 'short';
-		return 'long';
+		if (captionLayout.startsWith("dropdown")) return "short";
+		return "long";
 	});
 </script>
 
@@ -46,7 +46,7 @@
 	{weekdayFormat}
 	{disableDaysOutsideMonth}
 	class={cn(
-		'group/calendar bg-background p-2 p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+		"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar p-3 [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
 		className
 	)}
 	{locale}
@@ -94,7 +94,7 @@
 											{#if day}
 												{@render day({
 													day: date,
-													outsideMonth: !isEqualMonth(date, month.value)
+													outsideMonth: !isEqualMonth(date, month.value),
 												})}
 											{:else}
 												<RangeCalendar.Day />
diff --git a/src/lib/components/ui/resizable/index.ts b/src/lib/components/ui/resizable/index.ts
index 39b8b59..2e37f11 100644
--- a/src/lib/components/ui/resizable/index.ts
+++ b/src/lib/components/ui/resizable/index.ts
@@ -1,6 +1,6 @@
-import { Pane } from 'paneforge';
-import Handle from './resizable-handle.svelte';
-import PaneGroup from './resizable-pane-group.svelte';
+import { Pane } from "paneforge";
+import Handle from "./resizable-handle.svelte";
+import PaneGroup from "./resizable-pane-group.svelte";
 
 export {
 	PaneGroup,
@@ -9,5 +9,5 @@ export {
 	//
 	PaneGroup as ResizablePaneGroup,
 	Pane as ResizablePane,
-	Handle as ResizableHandle
+	Handle as ResizableHandle,
 };
diff --git a/src/lib/components/ui/resizable/resizable-handle.svelte b/src/lib/components/ui/resizable/resizable-handle.svelte
index cd73f1e..4650600 100644
--- a/src/lib/components/ui/resizable/resizable-handle.svelte
+++ b/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as ResizablePrimitive from 'paneforge';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import * as ResizablePrimitive from "paneforge";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,12 +16,12 @@
 	bind:ref
 	data-slot="resizable-handle"
 	class={cn(
-		'cn-resizable-handle relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
+		"cn-resizable-handle bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90",
 		className
 	)}
 	{...restProps}
 >
 	{#if withHandle}
-		<div class="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border"></div>
+		<div class="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0"></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>
diff --git a/src/lib/components/ui/resizable/resizable-pane-group.svelte b/src/lib/components/ui/resizable/resizable-pane-group.svelte
index 0693822..4b1801d 100644
--- a/src/lib/components/ui/resizable/resizable-pane-group.svelte
+++ b/src/lib/components/ui/resizable/resizable-pane-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as ResizablePrimitive from 'paneforge';
-	import { cn } from '$lib/utils/format.js';
+	import * as ResizablePrimitive from "paneforge";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:this={paneGroup}
 	data-slot="resizable-pane-group"
 	class={cn(
-		'cn-resizable-panel-group flex h-full w-full data-[direction=vertical]:flex-col',
+		"cn-resizable-panel-group flex h-full w-full data-[direction=vertical]:flex-col",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/scroll-area/index.ts b/src/lib/components/ui/scroll-area/index.ts
index d546806..e86a25b 100644
--- a/src/lib/components/ui/scroll-area/index.ts
+++ b/src/lib/components/ui/scroll-area/index.ts
@@ -1,10 +1,10 @@
-import Scrollbar from './scroll-area-scrollbar.svelte';
-import Root from './scroll-area.svelte';
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
 
 export {
 	Root,
 	Scrollbar,
 	//,
 	Root as ScrollArea,
-	Scrollbar as ScrollAreaScrollbar
+	Scrollbar as ScrollAreaScrollbar,
 };
diff --git a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
index 54f23a6..b9518f3 100644
--- a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		orientation = 'vertical',
+		orientation = "vertical",
 		children,
 		...restProps
 	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
@@ -17,7 +17,7 @@
 	data-orientation={orientation}
 	{orientation}
 	class={cn(
-		'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',
+		"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
 		className
 	)}
 	{...restProps}
@@ -25,6 +25,6 @@
 	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
 		data-slot="scroll-area-thumb"
-		class="relative flex-1 rounded-full bg-border"
+		class="rounded-full bg-border relative flex-1"
 	/>
 </ScrollAreaPrimitive.Scrollbar>
diff --git a/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
index 81d5fc1..d4d96d0 100644
--- a/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
-	import { Scrollbar } from './index.js';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		viewportRef = $bindable(null),
 		class: className,
-		orientation = 'vertical',
-		scrollbarXClasses = '',
-		scrollbarYClasses = '',
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
 		children,
 		...restProps
 	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
-		orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
 		scrollbarXClasses?: string | undefined;
 		scrollbarYClasses?: string | undefined;
 		viewportRef?: HTMLElement | null;
@@ -23,20 +23,20 @@
 <ScrollAreaPrimitive.Root
 	bind:ref
 	data-slot="scroll-area"
-	class={cn('relative', className)}
+	class={cn("relative", className)}
 	{...restProps}
 >
 	<ScrollAreaPrimitive.Viewport
 		bind:ref={viewportRef}
 		data-slot="scroll-area-viewport"
-		class="cn-scroll-area-viewport size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+		class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
 	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
-	{#if orientation === 'vertical' || orientation === 'both'}
+	{#if orientation === "vertical" || orientation === "both"}
 		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
 	{/if}
-	{#if orientation === 'horizontal' || orientation === 'both'}
+	{#if orientation === "horizontal" || orientation === "both"}
 		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
 	{/if}
 	<ScrollAreaPrimitive.Corner />
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
index 305c47a..4dec358 100644
--- a/src/lib/components/ui/select/index.ts
+++ b/src/lib/components/ui/select/index.ts
@@ -1,14 +1,14 @@
-import Root from './select.svelte';
-import Group from './select-group.svelte';
-import Label from './select-label.svelte';
-import Item from './select-item.svelte';
-import Content from './select-content.svelte';
-import Trigger from './select-trigger.svelte';
-import Separator from './select-separator.svelte';
-import ScrollDownButton from './select-scroll-down-button.svelte';
-import ScrollUpButton from './select-scroll-up-button.svelte';
-import GroupHeading from './select-group-heading.svelte';
-import Portal from './select-portal.svelte';
+import Root from "./select.svelte";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+import Portal from "./select-portal.svelte";
 
 export {
 	Root,
@@ -33,5 +33,5 @@ export {
 	ScrollDownButton as SelectScrollDownButton,
 	ScrollUpButton as SelectScrollUpButton,
 	GroupHeading as SelectGroupHeading,
-	Portal as SelectPortal
+	Portal as SelectPortal,
 };
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
index 7cc80f8..bb1e2ac 100644
--- a/src/lib/components/ui/select/select-content.svelte
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import SelectPortal from './select-portal.svelte';
-	import SelectScrollUpButton from './select-scroll-up-button.svelte';
-	import SelectScrollDownButton from './select-scroll-down-button.svelte';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
-	import type { WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectPortal from "./select-portal.svelte";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -27,7 +27,7 @@
 		{preventScroll}
 		data-slot="select-content"
 		class={cn(
-			'relative isolate z-50 min-w-36 overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto",
 			className
 		)}
 		{...restProps}
@@ -35,7 +35,7 @@
 		<SelectScrollUpButton />
 		<SelectPrimitive.Viewport
 			class={cn(
-				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1'
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1"
 			)}
 		>
 			{@render children?.()}
diff --git a/src/lib/components/ui/select/select-group-heading.svelte b/src/lib/components/ui/select/select-group-heading.svelte
index 56b93a6..1fab5f0 100644
--- a/src/lib/components/ui/select/select-group-heading.svelte
+++ b/src/lib/components/ui/select/select-group-heading.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 <SelectPrimitive.GroupHeading
 	bind:ref
 	data-slot="select-group-heading"
-	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/select/select-group.svelte b/src/lib/components/ui/select/select-group.svelte
index 0069813..f666cb2 100644
--- a/src/lib/components/ui/select/select-group.svelte
+++ b/src/lib/components/ui/select/select-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <SelectPrimitive.Group
 	bind:ref
 	data-slot="select-group"
-	class={cn('scroll-my-1 p-1', className)}
+	class={cn("scroll-my-1 p-1", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
index c8016a8..e4a53d2 100644
--- a/src/lib/components/ui/select/select-item.svelte
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
@@ -18,7 +18,7 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:bg-accent focus:text-accent-foreground focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
@@ -29,10 +29,12 @@
 				<CheckIcon class="cn-select-item-indicator-icon" />
 			{/if}
 		</span>
-		{#if childrenProp}
-			{@render childrenProp({ selected, highlighted })}
-		{:else}
-			{label || value}
-		{/if}
+		<span class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+			{#if childrenProp}
+				{@render childrenProp({ selected, highlighted })}
+			{:else}
+				{label || value}
+			{/if}
+		</span>
 	{/snippet}
 </SelectPrimitive.Item>
diff --git a/src/lib/components/ui/select/select-label.svelte b/src/lib/components/ui/select/select-label.svelte
index d3e595c..69bcfdf 100644
--- a/src/lib/components/ui/select/select-label.svelte
+++ b/src/lib/components/ui/select/select-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="select-label"
-	class={cn('px-1.5 py-1 text-xs text-muted-foreground', className)}
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/select/select-portal.svelte b/src/lib/components/ui/select/select-portal.svelte
index 59c4b78..424bcdd 100644
--- a/src/lib/components/ui/select/select-portal.svelte
+++ b/src/lib/components/ui/select/select-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
+	import { Select as SelectPrimitive } from "bits-ui";
 
 	let { ...restProps }: SelectPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/select/select-scroll-down-button.svelte b/src/lib/components/ui/select/select-scroll-down-button.svelte
index e0e5e0e..94f41cd 100644
--- a/src/lib/components/ui/select/select-scroll-down-button.svelte
+++ b/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
@@ -13,11 +13,8 @@
 <SelectPrimitive.ScrollDownButton
 	bind:ref
 	data-slot="select-scroll-down-button"
-	class={cn(
-		"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
 	{...restProps}
 >
-	<ChevronDownIcon />
+	<ChevronDownIcon  />
 </SelectPrimitive.ScrollDownButton>
diff --git a/src/lib/components/ui/select/select-scroll-up-button.svelte b/src/lib/components/ui/select/select-scroll-up-button.svelte
index 010ec1c..035ea09 100644
--- a/src/lib/components/ui/select/select-scroll-up-button.svelte
+++ b/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 
 	let {
@@ -13,11 +13,8 @@
 <SelectPrimitive.ScrollUpButton
 	bind:ref
 	data-slot="select-scroll-up-button"
-	class={cn(
-		"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
 	{...restProps}
 >
-	<ChevronUpIcon />
+	<ChevronUpIcon  />
 </SelectPrimitive.ScrollUpButton>
diff --git a/src/lib/components/ui/select/select-separator.svelte b/src/lib/components/ui/select/select-separator.svelte
index c8f7368..3b24bab 100644
--- a/src/lib/components/ui/select/select-separator.svelte
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { Separator as SeparatorPrimitive } from 'bits-ui';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { cn } from '$lib/utils/format.js';
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,6 +13,6 @@
 <Separator
 	bind:ref
 	data-slot="select-separator"
-	class={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
+	class={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
index 87715cf..03d06d0 100644
--- a/src/lib/components/ui/select/select-trigger.svelte
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn, type WithoutChild } from '$lib/utils/format.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		size = 'default',
+		size = "default",
 		...restProps
 	}: WithoutChild<SelectPrimitive.TriggerProps> & {
-		size?: 'sm' | 'default';
+		size?: "sm" | "default";
 	} = $props();
 </script>
 
@@ -19,11 +19,11 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon class="pointer-events-none size-4 text-muted-foreground" />
+	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
 </SelectPrimitive.Trigger>
diff --git a/src/lib/components/ui/select/select.svelte b/src/lib/components/ui/select/select.svelte
index b9bf9ba..05eb663 100644
--- a/src/lib/components/ui/select/select.svelte
+++ b/src/lib/components/ui/select/select.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
+	import { Select as SelectPrimitive } from "bits-ui";
 
 	let {
 		open = $bindable(false),
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
index 768efac..82442d2 100644
--- a/src/lib/components/ui/separator/index.ts
+++ b/src/lib/components/ui/separator/index.ts
@@ -1,7 +1,7 @@
-import Root from './separator.svelte';
+import Root from "./separator.svelte";
 
 export {
 	Root,
 	//
-	Root as Separator
+	Root as Separator,
 };
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
index 8f46632..5fd8a42 100644
--- a/src/lib/components/ui/separator/separator.svelte
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		'data-slot': dataSlot = 'separator',
+		"data-slot": dataSlot = "separator",
 		...restProps
 	}: SeparatorPrimitive.RootProps = $props();
 </script>
@@ -14,9 +14,9 @@
 	bind:ref
 	data-slot={dataSlot}
 	class={cn(
-		'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
 		// this is different in shadcn/ui but self-stretch breaks things for us
-		'data-[orientation=vertical]:h-full',
+		"data-[orientation=vertical]:h-full",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sheet/index.ts b/src/lib/components/ui/sheet/index.ts
index 781bc48..28d7da1 100644
--- a/src/lib/components/ui/sheet/index.ts
+++ b/src/lib/components/ui/sheet/index.ts
@@ -1,13 +1,13 @@
-import Root from './sheet.svelte';
-import Portal from './sheet-portal.svelte';
-import Trigger from './sheet-trigger.svelte';
-import Close from './sheet-close.svelte';
-import Overlay from './sheet-overlay.svelte';
-import Content from './sheet-content.svelte';
-import Header from './sheet-header.svelte';
-import Footer from './sheet-footer.svelte';
-import Title from './sheet-title.svelte';
-import Description from './sheet-description.svelte';
+import Root from "./sheet.svelte";
+import Portal from "./sheet-portal.svelte";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
 
 export {
 	Root,
@@ -30,5 +30,5 @@ export {
 	Header as SheetHeader,
 	Footer as SheetFooter,
 	Title as SheetTitle,
-	Description as SheetDescription
+	Description as SheetDescription,
 };
diff --git a/src/lib/components/ui/sheet/sheet-close.svelte b/src/lib/components/ui/sheet/sheet-close.svelte
index b0180c0..ae382c1 100644
--- a/src/lib/components/ui/sheet/sheet-close.svelte
+++ b/src/lib/components/ui/sheet/sheet-close.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { Dialog as SheetPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
 </script>
diff --git a/src/lib/components/ui/sheet/sheet-content.svelte b/src/lib/components/ui/sheet/sheet-content.svelte
index 9fe3512..20957dc 100644
--- a/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/src/lib/components/ui/sheet/sheet-content.svelte
@@ -1,21 +1,21 @@
 <script lang="ts" module>
-	export type Side = 'top' | 'right' | 'bottom' | 'left';
+	export type Side = "top" | "right" | "bottom" | "left";
 </script>
 
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from 'bits-ui';
-	import type { Snippet } from 'svelte';
-	import SheetPortal from './sheet-portal.svelte';
-	import SheetOverlay from './sheet-overlay.svelte';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import SheetPortal from "./sheet-portal.svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
 	import XIcon from '@lucide/svelte/icons/x';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		side = 'right',
+		side = "right",
 		showCloseButton = true,
 		portalProps,
 		children,
@@ -35,7 +35,7 @@
 		data-slot="sheet-content"
 		data-side={side}
 		class={cn(
-			'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10',
+			"bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
 			className
 		)}
 		{...restProps}
@@ -45,7 +45,7 @@
 			<SheetPrimitive.Close data-slot="sheet-close">
 				{#snippet child({ props })}
 					<Button variant="ghost" class="absolute top-3 right-3" size="icon-sm" {...props}>
-						<XIcon />
+						<XIcon  />
 						<span class="sr-only">Close</span>
 					</Button>
 				{/snippet}
diff --git a/src/lib/components/ui/sheet/sheet-description.svelte b/src/lib/components/ui/sheet/sheet-description.svelte
index c932501..333b17a 100644
--- a/src/lib/components/ui/sheet/sheet-description.svelte
+++ b/src/lib/components/ui/sheet/sheet-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <SheetPrimitive.Description
 	bind:ref
 	data-slot="sheet-description"
-	class={cn('text-sm text-muted-foreground', className)}
+	class={cn("text-muted-foreground text-sm", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/sheet/sheet-footer.svelte b/src/lib/components/ui/sheet/sheet-footer.svelte
index 2903421..ad9e07b 100644
--- a/src/lib/components/ui/sheet/sheet-footer.svelte
+++ b/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-footer"
-	class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sheet/sheet-header.svelte b/src/lib/components/ui/sheet/sheet-header.svelte
index e551c8f..504465f 100644
--- a/src/lib/components/ui/sheet/sheet-header.svelte
+++ b/src/lib/components/ui/sheet/sheet-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-header"
-	class={cn('flex flex-col gap-0.5 p-4', className)}
+	class={cn("gap-0.5 p-4 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sheet/sheet-overlay.svelte b/src/lib/components/ui/sheet/sheet-overlay.svelte
index 2d84a38..8d33847 100644
--- a/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <SheetPrimitive.Overlay
 	bind:ref
 	data-slot="sheet-overlay"
-	class={cn('fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs', className)}
+	class={cn("bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/sheet/sheet-portal.svelte b/src/lib/components/ui/sheet/sheet-portal.svelte
index 91e5178..f3085a3 100644
--- a/src/lib/components/ui/sheet/sheet-portal.svelte
+++ b/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { Dialog as SheetPrimitive } from "bits-ui";
 
 	let { ...restProps }: SheetPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/sheet/sheet-title.svelte b/src/lib/components/ui/sheet/sheet-title.svelte
index fa81724..10c1717 100644
--- a/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/src/lib/components/ui/sheet/sheet-title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <SheetPrimitive.Title
 	bind:ref
 	data-slot="sheet-title"
-	class={cn('text-base font-medium text-foreground', className)}
+	class={cn("text-foreground text-base font-medium", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/sheet/sheet-trigger.svelte b/src/lib/components/ui/sheet/sheet-trigger.svelte
index d95719a..e266975 100644
--- a/src/lib/components/ui/sheet/sheet-trigger.svelte
+++ b/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { Dialog as SheetPrimitive } from "bits-ui";
 
 	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
 </script>
diff --git a/src/lib/components/ui/sheet/sheet.svelte b/src/lib/components/ui/sheet/sheet.svelte
index d65b76b..5bf9783 100644
--- a/src/lib/components/ui/sheet/sheet.svelte
+++ b/src/lib/components/ui/sheet/sheet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { Dialog as SheetPrimitive } from "bits-ui";
 
 	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
 </script>
diff --git a/src/lib/components/ui/sidebar/constants.ts b/src/lib/components/ui/sidebar/constants.ts
index 9e59823..1347e83 100644
--- a/src/lib/components/ui/sidebar/constants.ts
+++ b/src/lib/components/ui/sidebar/constants.ts
@@ -1,6 +1,6 @@
-export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-export const SIDEBAR_WIDTH = '16rem';
-export const SIDEBAR_WIDTH_MOBILE = '18rem';
-export const SIDEBAR_WIDTH_ICON = '3rem';
-export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
diff --git a/src/lib/components/ui/sidebar/context.svelte.ts b/src/lib/components/ui/sidebar/context.svelte.ts
index 6fa2aa3..15248ad 100644
--- a/src/lib/components/ui/sidebar/context.svelte.ts
+++ b/src/lib/components/ui/sidebar/context.svelte.ts
@@ -1,6 +1,6 @@
-import { IsMobile } from '$lib/hooks/is-mobile.svelte.js';
-import { getContext, setContext } from 'svelte';
-import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
+import { IsMobile } from "$lib/hooks/is-mobile.svelte.js";
+import { getContext, setContext } from "svelte";
+import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
 
 type Getter<T> = () => T;
 
@@ -24,9 +24,9 @@ class SidebarState {
 	readonly props: SidebarStateProps;
 	open = $derived.by(() => this.props.open());
 	openMobile = $state(false);
-	setOpen: SidebarStateProps['setOpen'];
+	setOpen: SidebarStateProps["setOpen"];
 	#isMobile: IsMobile;
-	state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+	state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
 
 	constructor(props: SidebarStateProps) {
 		this.setOpen = props.setOpen;
@@ -53,11 +53,13 @@ class SidebarState {
 	};
 
 	toggle = () => {
-		return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open);
+		return this.#isMobile.current
+			? (this.openMobile = !this.openMobile)
+			: this.setOpen(!this.open);
 	};
 }
 
-const SYMBOL_KEY = 'scn-sidebar';
+const SYMBOL_KEY = "scn-sidebar";
 
 /**
  * Instantiates a new `SidebarState` instance and sets it in the context.
diff --git a/src/lib/components/ui/sidebar/index.ts b/src/lib/components/ui/sidebar/index.ts
index 280e640..318a341 100644
--- a/src/lib/components/ui/sidebar/index.ts
+++ b/src/lib/components/ui/sidebar/index.ts
@@ -1,27 +1,27 @@
-import { useSidebar } from './context.svelte.js';
-import Content from './sidebar-content.svelte';
-import Footer from './sidebar-footer.svelte';
-import GroupAction from './sidebar-group-action.svelte';
-import GroupContent from './sidebar-group-content.svelte';
-import GroupLabel from './sidebar-group-label.svelte';
-import Group from './sidebar-group.svelte';
-import Header from './sidebar-header.svelte';
-import Input from './sidebar-input.svelte';
-import Inset from './sidebar-inset.svelte';
-import MenuAction from './sidebar-menu-action.svelte';
-import MenuBadge from './sidebar-menu-badge.svelte';
-import MenuButton from './sidebar-menu-button.svelte';
-import MenuItem from './sidebar-menu-item.svelte';
-import MenuSkeleton from './sidebar-menu-skeleton.svelte';
-import MenuSubButton from './sidebar-menu-sub-button.svelte';
-import MenuSubItem from './sidebar-menu-sub-item.svelte';
-import MenuSub from './sidebar-menu-sub.svelte';
-import Menu from './sidebar-menu.svelte';
-import Provider from './sidebar-provider.svelte';
-import Rail from './sidebar-rail.svelte';
-import Separator from './sidebar-separator.svelte';
-import Trigger from './sidebar-trigger.svelte';
-import Root from './sidebar.svelte';
+import { useSidebar } from "./context.svelte.js";
+import Content from "./sidebar-content.svelte";
+import Footer from "./sidebar-footer.svelte";
+import GroupAction from "./sidebar-group-action.svelte";
+import GroupContent from "./sidebar-group-content.svelte";
+import GroupLabel from "./sidebar-group-label.svelte";
+import Group from "./sidebar-group.svelte";
+import Header from "./sidebar-header.svelte";
+import Input from "./sidebar-input.svelte";
+import Inset from "./sidebar-inset.svelte";
+import MenuAction from "./sidebar-menu-action.svelte";
+import MenuBadge from "./sidebar-menu-badge.svelte";
+import MenuButton from "./sidebar-menu-button.svelte";
+import MenuItem from "./sidebar-menu-item.svelte";
+import MenuSkeleton from "./sidebar-menu-skeleton.svelte";
+import MenuSubButton from "./sidebar-menu-sub-button.svelte";
+import MenuSubItem from "./sidebar-menu-sub-item.svelte";
+import MenuSub from "./sidebar-menu-sub.svelte";
+import Menu from "./sidebar-menu.svelte";
+import Provider from "./sidebar-provider.svelte";
+import Rail from "./sidebar-rail.svelte";
+import Separator from "./sidebar-separator.svelte";
+import Trigger from "./sidebar-trigger.svelte";
+import Root from "./sidebar.svelte";
 
 export {
 	Content,
@@ -71,5 +71,5 @@ export {
 	Separator as SidebarSeparator,
 	Trigger as SidebarTrigger,
 	Trigger,
-	useSidebar
+	useSidebar,
 };
diff --git a/src/lib/components/ui/sidebar/sidebar-content.svelte b/src/lib/components/ui/sidebar/sidebar-content.svelte
index 2e92065..2a8d7ea 100644
--- a/src/lib/components/ui/sidebar/sidebar-content.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	data-slot="sidebar-content"
 	data-sidebar="content"
 	class={cn(
-		'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+		"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sidebar/sidebar-footer.svelte b/src/lib/components/ui/sidebar/sidebar-footer.svelte
index edfb5ab..496c6c0 100644
--- a/src/lib/components/ui/sidebar/sidebar-footer.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-footer"
 	data-sidebar="footer"
-	class={cn('flex flex-col gap-2 p-2', className)}
+	class={cn("gap-2 p-2 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/src/lib/components/ui/sidebar/sidebar-group-action.svelte
index ff00b7f..1d07b97 100644
--- a/src/lib/components/ui/sidebar/sidebar-group-action.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -15,12 +15,12 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
 			className
 		),
-		'data-slot': 'sidebar-group-action',
-		'data-sidebar': 'group-action',
-		...restProps
+		"data-slot": "sidebar-group-action",
+		"data-sidebar": "group-action",
+		...restProps,
 	});
 </script>
 
diff --git a/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/src/lib/components/ui/sidebar/sidebar-group-content.svelte
index ad98b6f..7835b0e 100644
--- a/src/lib/components/ui/sidebar/sidebar-group-content.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-group-content"
 	data-sidebar="group-content"
-	class={cn('w-full text-sm', className)}
+	class={cn("text-sm w-full", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/src/lib/components/ui/sidebar/sidebar-group-label.svelte
index eca4f47..518216c 100644
--- a/src/lib/components/ui/sidebar/sidebar-group-label.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -15,12 +15,12 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0',
+			"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
 			className
 		),
-		'data-slot': 'sidebar-group-label',
-		'data-sidebar': 'group-label',
-		...restProps
+		"data-slot": "sidebar-group-label",
+		"data-sidebar": "group-label",
+		...restProps,
 	});
 </script>
 
diff --git a/src/lib/components/ui/sidebar/sidebar-group.svelte b/src/lib/components/ui/sidebar/sidebar-group.svelte
index 194f1d1..b5880d7 100644
--- a/src/lib/components/ui/sidebar/sidebar-group.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-group"
 	data-sidebar="group"
-	class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+	class={cn("p-2 relative flex w-full min-w-0 flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-header.svelte b/src/lib/components/ui/sidebar/sidebar-header.svelte
index 21cbab0..b54754a 100644
--- a/src/lib/components/ui/sidebar/sidebar-header.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-header"
 	data-sidebar="header"
-	class={cn('flex flex-col gap-2 p-2', className)}
+	class={cn("gap-2 p-2 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-input.svelte b/src/lib/components/ui/sidebar/sidebar-input.svelte
index f9fd7d9..19b3666 100644
--- a/src/lib/components/ui/sidebar/sidebar-input.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-input.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import type { ComponentProps } from 'svelte';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { cn } from '$lib/utils/format.js';
+	import type { ComponentProps } from "svelte";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(''),
+		value = $bindable(""),
 		class: className,
 		...restProps
 	}: ComponentProps<typeof Input> = $props();
@@ -16,6 +16,6 @@
 	bind:value
 	data-slot="sidebar-input"
 	data-sidebar="input"
-	class={cn('h-8 w-full bg-background shadow-none', className)}
+	class={cn("bg-background h-8 w-full shadow-none", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/sidebar/sidebar-inset.svelte b/src/lib/components/ui/sidebar/sidebar-inset.svelte
index 09090a8..19a787c 100644
--- a/src/lib/components/ui/sidebar/sidebar-inset.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <main
 	bind:this={ref}
 	data-slot="sidebar-inset"
-	class={cn(
-		'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-		className
-	)}
+	class={cn("bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
index 0af0177..26c81ed 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -17,14 +17,14 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
 			showOnHover &&
-				'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0',
+				"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
 			className
 		),
-		'data-slot': 'sidebar-menu-action',
-		'data-sidebar': 'menu-action',
-		...restProps
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		...restProps,
 	});
 </script>
 
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
index 3c84a22..6cecdb4 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	data-slot="sidebar-menu-badge"
 	data-sidebar="menu-badge"
 	class={cn(
-		'pointer-events-none absolute right-1 flex flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',
+		"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
index 9d5536b..e0c9c25 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -1,45 +1,46 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const sidebarMenuButtonVariants = tv({
-		base: 'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
+		base: "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
 		variants: {
 			variant: {
-				default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-				outline:
-					'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
 			},
 			size: {
-				default: 'h-8 text-sm',
-				sm: 'h-7 text-xs',
-				lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!'
-			}
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+			},
 		},
 		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
+			variant: "default",
+			size: "default",
+		},
 	});
 
-	export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];
-	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
+	export type SidebarMenuButtonVariant = VariantProps<
+		typeof sidebarMenuButtonVariants
+	>["variant"];
+	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
 </script>
 
 <script lang="ts">
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-	import { cn, type WithElementRef, type WithoutChildrenOrChild } from '$lib/utils/format.js';
-	import { mergeProps } from 'bits-ui';
-	import type { ComponentProps, Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { useSidebar } from './context.svelte.js';
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { mergeProps } from "bits-ui";
+	import type { ComponentProps, Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		child,
-		variant = 'default',
-		size = 'default',
+		variant = "default",
+		size = "default",
 		isActive = false,
 		tooltipContent,
 		tooltipContentProps,
@@ -57,11 +58,11 @@
 
 	const buttonProps = $derived({
 		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
-		'data-slot': 'sidebar-menu-button',
-		'data-sidebar': 'menu-button',
-		'data-size': size,
-		'data-active': isActive,
-		...restProps
+		"data-slot": "sidebar-menu-button",
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
 	});
 </script>
 
@@ -88,10 +89,10 @@
 		<Tooltip.Content
 			side="right"
 			align="center"
-			hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}
+			hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
 			{...tooltipContentProps}
 		>
-			{#if typeof tooltipContent === 'string'}
+			{#if typeof tooltipContent === "string"}
 				{tooltipContent}
 			{:else if tooltipContent}
 				{@render tooltipContent()}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-item.svelte b/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
index edcced8..4db4453 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-item"
 	data-sidebar="menu-item"
-	class={cn('group/menu-item relative', className)}
+	class={cn("group/menu-item relative", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte b/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
index 2c5e71b..1e1249b 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import { Skeleton } from "$lib/components/ui/skeleton/index.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -21,7 +21,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-skeleton"
 	data-sidebar="menu-skeleton"
-	class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+	class={cn("h-8 gap-2 rounded-md px-2 flex items-center", className)}
 	{...restProps}
 >
 	{#if showIcon}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
index 3fc9093..09ff228 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -1,32 +1,32 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		children,
 		child,
 		class: className,
-		size = 'md',
+		size = "md",
 		isActive = false,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
 		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		size?: 'sm' | 'md';
+		size?: "sm" | "md";
 		isActive?: boolean;
 	} = $props();
 
 	const mergedProps = $derived({
 		class: cn(
-			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
 			className
 		),
-		'data-slot': 'sidebar-menu-sub-button',
-		'data-sidebar': 'menu-sub-button',
-		'data-size': size,
-		'data-active': isActive,
-		...restProps
+		"data-slot": "sidebar-menu-sub-button",
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
 	});
 </script>
 
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte b/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
index b0495d6..681d0f1 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-sub-item"
 	data-sidebar="menu-sub-item"
-	class={cn('group/menu-sub-item relative', className)}
+	class={cn("group/menu-sub-item relative", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
index 5eacb37..29614ee 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,10 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-sub"
 	data-sidebar="menu-sub"
-	class={cn(
-		'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
-		className
-	)}
+	class={cn("border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu.svelte b/src/lib/components/ui/sidebar/sidebar-menu.svelte
index 8b9046b..a8cdefd 100644
--- a/src/lib/components/ui/sidebar/sidebar-menu.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu"
 	data-sidebar="menu"
-	class={cn('flex w-full min-w-0 flex-col gap-0', className)}
+	class={cn("gap-0 flex w-full min-w-0 flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/sidebar/sidebar-provider.svelte b/src/lib/components/ui/sidebar/sidebar-provider.svelte
index 1322703..5b0d0aa 100644
--- a/src/lib/components/ui/sidebar/sidebar-provider.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 	import {
 		SIDEBAR_COOKIE_MAX_AGE,
 		SIDEBAR_COOKIE_NAME,
 		SIDEBAR_WIDTH,
-		SIDEBAR_WIDTH_ICON
-	} from './constants.js';
-	import { setSidebar } from './context.svelte.js';
+		SIDEBAR_WIDTH_ICON,
+	} from "./constants.js";
+	import { setSidebar } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
@@ -31,7 +31,7 @@
 
 			// This sets the cookie to keep the sidebar state.
 			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-		}
+		},
 	});
 </script>
 
@@ -42,7 +42,7 @@
 		data-slot="sidebar-wrapper"
 		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
 		class={cn(
-			'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+			"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
 			className
 		)}
 		bind:this={ref}
diff --git a/src/lib/components/ui/sidebar/sidebar-rail.svelte b/src/lib/components/ui/sidebar/sidebar-rail.svelte
index 7134dd4..f65c869 100644
--- a/src/lib/components/ui/sidebar/sidebar-rail.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { useSidebar } from './context.svelte.js';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
@@ -22,12 +22,12 @@
 	onclick={sidebar.toggle}
 	title="Toggle Sidebar"
 	class={cn(
-		'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex',
-		'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-		'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
-		'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-		'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/sidebar/sidebar-separator.svelte b/src/lib/components/ui/sidebar/sidebar-separator.svelte
index afa11f8..18d791b 100644
--- a/src/lib/components/ui/sidebar/sidebar-separator.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -14,6 +14,6 @@
 	bind:ref
 	data-slot="sidebar-separator"
 	data-sidebar="separator"
-	class={cn('mx-2 w-auto bg-sidebar-border', className)}
+	class={cn("bg-sidebar-border mx-2 w-auto", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
index 39fa198..dd2dc50 100644
--- a/src/lib/components/ui/sidebar/sidebar-trigger.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Button } from "$lib/components/ui/button/index.js";
 	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
-	import { cn } from '$lib/utils/format.js';
-	import type { ComponentProps } from 'svelte';
-	import { useSidebar } from './context.svelte.js';
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { useSidebar } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
@@ -23,7 +23,7 @@
 	data-slot="sidebar-trigger"
 	variant="ghost"
 	size="icon-sm"
-	class={cn('cn-sidebar-trigger', className)}
+	class={cn("cn-sidebar-trigger", className)}
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);
@@ -31,6 +31,6 @@
 	}}
 	{...restProps}
 >
-	<PanelLeftIcon />
+	<PanelLeftIcon  />
 	<span class="sr-only">Toggle Sidebar</span>
 </Button>
diff --git a/src/lib/components/ui/sidebar/sidebar.svelte b/src/lib/components/ui/sidebar/sidebar.svelte
index eb568ab..9c90d4f 100644
--- a/src/lib/components/ui/sidebar/sidebar.svelte
+++ b/src/lib/components/ui/sidebar/sidebar.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-	import * as Sheet from '$lib/components/ui/sheet/index.js';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
-	import { useSidebar } from './context.svelte.js';
+	import * as Sheet from "$lib/components/ui/sheet/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+	import { useSidebar } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
-		side = 'left',
-		variant = 'sidebar',
-		collapsible = 'offcanvas',
+		side = "left",
+		variant = "sidebar",
+		collapsible = "offcanvas",
 		class: className,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		side?: 'left' | 'right';
-		variant?: 'sidebar' | 'floating' | 'inset';
-		collapsible?: 'offcanvas' | 'icon' | 'none';
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
 	} = $props();
 
 	const sidebar = useSidebar();
 </script>
 
-{#if collapsible === 'none'}
+{#if collapsible === "none"}
 	<div
 		class={cn(
-			'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
+			"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
 			className
 		)}
 		bind:this={ref}
@@ -34,14 +34,17 @@
 		{@render children?.()}
 	</div>
 {:else if sidebar.isMobile}
-	<Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
+	<Sheet.Root
+		bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)}
+		{...restProps}
+	>
 		<Sheet.Content
 			bind:ref
 			data-sidebar="sidebar"
 			data-slot="sidebar"
 			data-mobile="true"
 			class={cn(
-				'w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden',
+				"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
 				className
 			)}
 			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
@@ -59,9 +62,9 @@
 {:else}
 	<div
 		bind:this={ref}
-		class="group peer hidden text-sidebar-foreground md:block"
+		class="text-sidebar-foreground group peer hidden md:block"
 		data-state={sidebar.state}
-		data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
+		data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
 		data-variant={variant}
 		data-side={side}
 		data-slot="sidebar"
@@ -70,25 +73,25 @@
 		<div
 			data-slot="sidebar-gap"
 			class={cn(
-				'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-				'group-data-[collapsible=offcanvas]:w-0',
-				'group-data-[side=right]:rotate-180',
-				variant === 'floating' || variant === 'inset'
-					? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+				"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
+				"group-data-[collapsible=offcanvas]:w-0",
+				"group-data-[side=right]:rotate-180",
+				variant === "floating" || variant === "inset"
+					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
 			)}
 		></div>
 		<div
 			data-slot="sidebar-container"
 			class={cn(
-				'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-				side === 'left'
-					? 'start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]'
-					: 'end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]',
+				"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+				side === "left"
+					? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]"
+					: "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]",
 				// Adjust the padding for floating and inset variants.
-				variant === 'floating' || variant === 'inset'
-					? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s',
+				variant === "floating" || variant === "inset"
+					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s",
 				className
 			)}
 			{...restProps}
@@ -96,7 +99,7 @@
 			<div
 				data-sidebar="sidebar"
 				data-slot="sidebar-inner"
-				class="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+				class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
 			>
 				{@render children?.()}
 			</div>
diff --git a/src/lib/components/ui/skeleton/index.ts b/src/lib/components/ui/skeleton/index.ts
index 3120ce1..186db21 100644
--- a/src/lib/components/ui/skeleton/index.ts
+++ b/src/lib/components/ui/skeleton/index.ts
@@ -1,7 +1,7 @@
-import Root from './skeleton.svelte';
+import Root from "./skeleton.svelte";
 
 export {
 	Root,
 	//
-	Root as Skeleton
+	Root as Skeleton,
 };
diff --git a/src/lib/components/ui/skeleton/skeleton.svelte b/src/lib/components/ui/skeleton/skeleton.svelte
index 1a52aa1..1a940ee 100644
--- a/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/src/lib/components/ui/skeleton/skeleton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn('animate-pulse rounded-md bg-muted', className)}
+	class={cn("bg-muted rounded-md animate-pulse", className)}
 	{...restProps}
 ></div>
diff --git a/src/lib/components/ui/slider/index.ts b/src/lib/components/ui/slider/index.ts
index f1524fc..820f209 100644
--- a/src/lib/components/ui/slider/index.ts
+++ b/src/lib/components/ui/slider/index.ts
@@ -1,7 +1,7 @@
-import Root from './slider.svelte';
+import Root from "./slider.svelte";
 
 export {
 	Root,
 	//
-	Root as Slider
+	Root as Slider,
 };
diff --git a/src/lib/components/ui/slider/slider.svelte b/src/lib/components/ui/slider/slider.svelte
index 79204f8..cce1c7c 100644
--- a/src/lib/components/ui/slider/slider.svelte
+++ b/src/lib/components/ui/slider/slider.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Slider as SliderPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Slider as SliderPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
-		orientation = 'horizontal',
+		orientation = "horizontal",
 		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
@@ -21,7 +21,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-slot="slider"
 	{orientation}
 	class={cn(
-		'relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col',
+		"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
 		className
 	)}
 	{...restProps}
@@ -31,19 +31,21 @@ get along, so we shut typescript up by casting `value` to `never`.
 			data-slot="slider-track"
 			data-orientation={orientation}
 			class={cn(
-				'relative grow overflow-hidden rounded-full bg-muted bg-muted data-horizontal:h-1 data-horizontal:w-full data-horizontal:w-full data-vertical:h-full data-vertical:h-full data-vertical:w-1'
+				"bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 bg-muted relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full"
 			)}
 		>
 			<SliderPrimitive.Range
 				data-slot="slider-range"
-				class={cn('absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full')}
+				class={cn(
+					"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
+				)}
 			/>
 		</span>
 		{#each thumbItems as thumb (thumb.index)}
 			<SliderPrimitive.Thumb
 				data-slot="slider-thumb"
 				index={thumb.index}
-				class="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+				class="border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}
diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts
index fcaf06b..1ad9f4a 100644
--- a/src/lib/components/ui/sonner/index.ts
+++ b/src/lib/components/ui/sonner/index.ts
@@ -1 +1 @@
-export { default as Toaster } from './sonner.svelte';
+export { default as Toaster } from "./sonner.svelte";
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
index d671283..34b456d 100644
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
 	import Loader2Icon from '@lucide/svelte/icons/loader-2';
 	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
 	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
@@ -10,7 +11,7 @@
 </script>
 
 <Sonner
-	theme="light"
+	theme={mode.current}
 	class="toaster group"
 	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
 	{...restProps}
diff --git a/src/lib/components/ui/spinner/index.ts b/src/lib/components/ui/spinner/index.ts
index 2e459c6..f8b1ced 100644
--- a/src/lib/components/ui/spinner/index.ts
+++ b/src/lib/components/ui/spinner/index.ts
@@ -1 +1 @@
-export { default as Spinner } from './spinner.svelte';
+export { default as Spinner } from "./spinner.svelte";
diff --git a/src/lib/components/ui/spinner/spinner.svelte b/src/lib/components/ui/spinner/spinner.svelte
index 4bb8eca..b469ded 100644
--- a/src/lib/components/ui/spinner/spinner.svelte
+++ b/src/lib/components/ui/spinner/spinner.svelte
@@ -1,26 +1,18 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/format.js';
+	import { cn } from "$lib/utils.js";
 	import Loader2Icon from '@lucide/svelte/icons/loader-2';
-	import type { SVGAttributes } from 'svelte/elements';
+	import type { SVGAttributes } from "svelte/elements";
 
 	let {
 		class: className,
-		role = 'status',
+		role = "status",
 		// we add name, color, and stroke for compatibility with different icon libraries props
 		name,
 		color,
 		stroke,
-		'aria-label': ariaLabel = 'Loading',
+		"aria-label": ariaLabel = "Loading",
 		...restProps
 	}: SVGAttributes<SVGSVGElement> = $props();
 </script>
 
-<Loader2Icon
-	{role}
-	name={name === null ? undefined : name}
-	color={color === null ? undefined : color}
-	stroke={stroke === null ? undefined : stroke}
-	aria-label={ariaLabel}
-	class={cn('size-4 animate-spin', className)}
-	{...restProps}
-/>
+<Loader2Icon {role} name={name === null ? undefined : name} color={color === null ? undefined : color} stroke={stroke === null ? undefined : stroke} aria-label={ariaLabel} class={cn("size-4 animate-spin", className)} {...restProps} />
diff --git a/src/lib/components/ui/switch/index.ts b/src/lib/components/ui/switch/index.ts
index 129f8f5..f5533db 100644
--- a/src/lib/components/ui/switch/index.ts
+++ b/src/lib/components/ui/switch/index.ts
@@ -1,7 +1,7 @@
-import Root from './switch.svelte';
+import Root from "./switch.svelte";
 
 export {
 	Root,
 	//
-	Root as Switch
+	Root as Switch,
 };
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
index 6ce0976..6aa57d5 100644
--- a/src/lib/components/ui/switch/switch.svelte
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		checked = $bindable(false),
-		size = 'default',
+		size = "default",
 		...restProps
 	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
-		size?: 'sm' | 'default';
+		size?: "sm" | "default";
 	} = $props();
 </script>
 
@@ -19,13 +19,13 @@
 	data-slot="switch"
 	data-size={size}
 	class={cn(
-		'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+		"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
-		class="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 rtl:data-[state=checked]:translate-x-[calc(-100%)] group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform rtl:data-[state=checked]:translate-x-[calc(-100%)]"
 	/>
 </SwitchPrimitive.Root>
diff --git a/src/lib/components/ui/table/index.ts b/src/lib/components/ui/table/index.ts
index 99239ae..14695c8 100644
--- a/src/lib/components/ui/table/index.ts
+++ b/src/lib/components/ui/table/index.ts
@@ -1,11 +1,11 @@
-import Root from './table.svelte';
-import Body from './table-body.svelte';
-import Caption from './table-caption.svelte';
-import Cell from './table-cell.svelte';
-import Footer from './table-footer.svelte';
-import Head from './table-head.svelte';
-import Header from './table-header.svelte';
-import Row from './table-row.svelte';
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
 
 export {
 	Root,
@@ -24,5 +24,5 @@ export {
 	Footer as TableFooter,
 	Head as TableHead,
 	Header as TableHeader,
-	Row as TableRow
+	Row as TableRow,
 };
diff --git a/src/lib/components/ui/table/table-body.svelte b/src/lib/components/ui/table/table-body.svelte
index c7b3e45..935feae 100644
--- a/src/lib/components/ui/table/table-body.svelte
+++ b/src/lib/components/ui/table/table-body.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -10,11 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody
-	bind:this={ref}
-	data-slot="table-body"
-	class={cn('[&_tr:last-child]:border-0', className)}
-	{...restProps}
->
+<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
 	{@render children?.()}
 </tbody>
diff --git a/src/lib/components/ui/table/table-caption.svelte b/src/lib/components/ui/table/table-caption.svelte
index d00fb22..4696cff 100644
--- a/src/lib/components/ui/table/table-caption.svelte
+++ b/src/lib/components/ui/table/table-caption.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <caption
 	bind:this={ref}
 	data-slot="table-caption"
-	class={cn('mt-4 text-sm text-muted-foreground', className)}
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/table/table-cell.svelte b/src/lib/components/ui/table/table-cell.svelte
index bdc9ada..a998bf6 100644
--- a/src/lib/components/ui/table/table-cell.svelte
+++ b/src/lib/components/ui/table/table-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLTdAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -10,11 +10,6 @@
 	}: WithElementRef<HTMLTdAttributes> = $props();
 </script>
 
-<td
-	bind:this={ref}
-	data-slot="table-cell"
-	class={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
-	{...restProps}
->
+<td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
 	{@render children?.()}
 </td>
diff --git a/src/lib/components/ui/table/table-footer.svelte b/src/lib/components/ui/table/table-footer.svelte
index baac170..b9b14eb 100644
--- a/src/lib/components/ui/table/table-footer.svelte
+++ b/src/lib/components/ui/table/table-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <tfoot
 	bind:this={ref}
 	data-slot="table-footer"
-	class={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/table/table-head.svelte b/src/lib/components/ui/table/table-head.svelte
index e1fa0d6..267c4e0 100644
--- a/src/lib/components/ui/table/table-head.svelte
+++ b/src/lib/components/ui/table/table-head.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLThAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -10,14 +10,6 @@
 	}: WithElementRef<HTMLThAttributes> = $props();
 </script>
 
-<th
-	bind:this={ref}
-	data-slot="table-head"
-	class={cn(
-		'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
-		className
-	)}
-	{...restProps}
->
+<th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
 	{@render children?.()}
 </th>
diff --git a/src/lib/components/ui/table/table-header.svelte b/src/lib/components/ui/table/table-header.svelte
index 05547de..f47d259 100644
--- a/src/lib/components/ui/table/table-header.svelte
+++ b/src/lib/components/ui/table/table-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <thead
 	bind:this={ref}
 	data-slot="table-header"
-	class={cn('[&_tr]:border-b', className)}
+	class={cn("[&_tr]:border-b", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/src/lib/components/ui/table/table-row.svelte b/src/lib/components/ui/table/table-row.svelte
index 2e464f3..90b4e2a 100644
--- a/src/lib/components/ui/table/table-row.svelte
+++ b/src/lib/components/ui/table/table-row.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -10,14 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
 </script>
 
-<tr
-	bind:this={ref}
-	data-slot="table-row"
-	class={cn(
-		'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-		className
-	)}
-	{...restProps}
->
+<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)} {...restProps}>
 	{@render children?.()}
 </tr>
diff --git a/src/lib/components/ui/table/table.svelte b/src/lib/components/ui/table/table.svelte
index 6d50bd2..d95a02e 100644
--- a/src/lib/components/ui/table/table.svelte
+++ b/src/lib/components/ui/table/table.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLTableAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/format.js';
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,12 +11,7 @@
 </script>
 
 <div data-slot="table-container" class="relative w-full overflow-x-auto">
-	<table
-		bind:this={ref}
-		data-slot="table"
-		class={cn('w-full caption-bottom text-sm', className)}
-		{...restProps}
-	>
+	<table bind:this={ref} data-slot="table" class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
 		{@render children?.()}
 	</table>
 </div>
diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
index 2ea3623..31267e5 100644
--- a/src/lib/components/ui/tabs/index.ts
+++ b/src/lib/components/ui/tabs/index.ts
@@ -1,7 +1,7 @@
-import Root from './tabs.svelte';
-import Content from './tabs-content.svelte';
-import List, { tabsListVariants, type TabsListVariant } from './tabs-list.svelte';
-import Trigger from './tabs-trigger.svelte';
+import Root from "./tabs.svelte";
+import Content from "./tabs-content.svelte";
+import List, { tabsListVariants, type TabsListVariant } from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
 
 export {
 	Root,
@@ -14,5 +14,5 @@ export {
 	Root as Tabs,
 	Content as TabsContent,
 	List as TabsList,
-	Trigger as TabsTrigger
+	Trigger as TabsTrigger,
 };
diff --git a/src/lib/components/ui/tabs/tabs-content.svelte b/src/lib/components/ui/tabs/tabs-content.svelte
index 868bbcc..394ab3e 100644
--- a/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/src/lib/components/ui/tabs/tabs-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <TabsPrimitive.Content
 	bind:ref
 	data-slot="tabs-content"
-	class={cn('flex-1 text-sm outline-none', className)}
+	class={cn("text-sm flex-1 outline-none", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
index 8b656eb..18dce00 100644
--- a/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -1,29 +1,29 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const tabsListVariants = tv({
-		base: 'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+		base: "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
 		variants: {
 			variant: {
-				default: 'cn-tabs-list-variant-default bg-muted',
-				line: 'cn-tabs-list-variant-line gap-1 bg-transparent'
-			}
+				default: "cn-tabs-list-variant-default bg-muted",
+				line: "cn-tabs-list-variant-line gap-1 bg-transparent",
+			},
 		},
 		defaultVariants: {
-			variant: 'default'
-		}
+			variant: "default",
+		},
 	});
 
-	export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
-		variant = 'default',
+		variant = "default",
 		class: className,
 		...restProps
 	}: TabsPrimitive.ListProps & {
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
index 22c2bb5..8a0be4a 100644
--- a/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,10 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-		'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
-		'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
-		'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+		"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+		"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+		"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/tabs/tabs.svelte b/src/lib/components/ui/tabs/tabs.svelte
index 3abb3ee..bfb900d 100644
--- a/src/lib/components/ui/tabs/tabs.svelte
+++ b/src/lib/components/ui/tabs/tabs.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(''),
+		value = $bindable(""),
 		class: className,
 		...restProps
 	}: TabsPrimitive.RootProps = $props();
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="tabs"
-	class={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
+	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
 	{...restProps}
 />
diff --git a/src/lib/components/ui/textarea/index.ts b/src/lib/components/ui/textarea/index.ts
index 9ccb3bf..ace797a 100644
--- a/src/lib/components/ui/textarea/index.ts
+++ b/src/lib/components/ui/textarea/index.ts
@@ -1,7 +1,7 @@
-import Root from './textarea.svelte';
+import Root from "./textarea.svelte";
 
 export {
 	Root,
 	//
-	Root as Textarea
+	Root as Textarea,
 };
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
index 11a4aad..2e779ff 100644
--- a/src/lib/components/ui/textarea/textarea.svelte
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/format.js';
-	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
-		'data-slot': dataSlot = 'textarea',
+		"data-slot": dataSlot = "textarea",
 		...restProps
 	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value
diff --git a/src/lib/components/ui/toggle-group/index.ts b/src/lib/components/ui/toggle-group/index.ts
index 73160fc..12b14b9 100644
--- a/src/lib/components/ui/toggle-group/index.ts
+++ b/src/lib/components/ui/toggle-group/index.ts
@@ -1,10 +1,10 @@
-import Root from './toggle-group.svelte';
-import Item from './toggle-group-item.svelte';
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
 
 export {
 	Root,
 	Item,
 	//
 	Root as ToggleGroup,
-	Item as ToggleGroupItem
+	Item as ToggleGroupItem,
 };
diff --git a/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
index 6916f1b..f685ae3 100644
--- a/src/lib/components/ui/toggle-group/toggle-group-item.svelte
+++ b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
-	import { getToggleGroupCtx } from './toggle-group.svelte';
-	import { cn } from '$lib/utils/format.js';
-	import { type ToggleVariants, toggleVariants } from '$lib/components/ui/toggle/index.js';
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from "$lib/utils.js";
+	import { type ToggleVariants, toggleVariants } from "$lib/components/ui/toggle/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -23,10 +23,10 @@
 	data-size={ctx.size || size}
 	data-spacing={ctx.spacing}
 	class={cn(
-		'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+		"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
 		toggleVariants({
 			variant: ctx.variant || variant,
-			size: ctx.size || size
+			size: ctx.size || size,
 		}),
 		className
 	)}
diff --git a/src/lib/components/ui/toggle-group/toggle-group.svelte b/src/lib/components/ui/toggle-group/toggle-group.svelte
index 4c7bcab..98b062b 100644
--- a/src/lib/components/ui/toggle-group/toggle-group.svelte
+++ b/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -1,41 +1,41 @@
 <script lang="ts" module>
-	import { getContext, setContext } from 'svelte';
-	import type { VariantProps } from 'tailwind-variants';
-	import { toggleVariants } from '$lib/components/ui/toggle/index.js';
+	import { getContext, setContext } from "svelte";
+	import type { VariantProps } from "tailwind-variants";
+	import { toggleVariants } from "$lib/components/ui/toggle/index.js";
 
 	type ToggleVariants = VariantProps<typeof toggleVariants>;
 
 	interface ToggleGroupContext extends ToggleVariants {
 		spacing?: number;
-		orientation?: 'horizontal' | 'vertical';
+		orientation?: "horizontal" | "vertical";
 	}
 
 	export function setToggleGroupCtx(props: ToggleGroupContext) {
-		setContext('toggleGroup', props);
+		setContext("toggleGroup", props);
 	}
 
 	export function getToggleGroupCtx() {
-		return getContext<Required<ToggleGroupContext>>('toggleGroup');
+		return getContext<Required<ToggleGroupContext>>("toggleGroup");
 	}
 </script>
 
 <script lang="ts">
-	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
-		size = 'default',
+		size = "default",
 		spacing = 0,
-		orientation = 'horizontal',
-		variant = 'default',
+		orientation = "horizontal",
+		variant = "default",
 		...restProps
 	}: ToggleGroupPrimitive.RootProps &
 		ToggleVariants & {
 			spacing?: number;
-			orientation?: 'horizontal' | 'vertical';
+			orientation?: "horizontal" | "vertical";
 		} = $props();
 
 	setToggleGroupCtx({
@@ -50,7 +50,7 @@
 		},
 		get orientation() {
 			return orientation;
-		}
+		},
 	});
 </script>
 
@@ -68,7 +68,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-spacing={spacing}
 	style={`--gap: ${spacing}`}
 	class={cn(
-		'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch',
+		"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/toggle/index.ts b/src/lib/components/ui/toggle/index.ts
index 0f18d3b..8cb2936 100644
--- a/src/lib/components/ui/toggle/index.ts
+++ b/src/lib/components/ui/toggle/index.ts
@@ -1,13 +1,13 @@
-import Root from './toggle.svelte';
+import Root from "./toggle.svelte";
 export {
 	toggleVariants,
 	type ToggleSize,
 	type ToggleVariant,
-	type ToggleVariants
-} from './toggle.svelte';
+	type ToggleVariants,
+} from "./toggle.svelte";
 
 export {
 	Root,
 	//
-	Root as Toggle
+	Root as Toggle,
 };
diff --git a/src/lib/components/ui/toggle/toggle.svelte b/src/lib/components/ui/toggle/toggle.svelte
index a5c224a..8e50317 100644
--- a/src/lib/components/ui/toggle/toggle.svelte
+++ b/src/lib/components/ui/toggle/toggle.svelte
@@ -1,41 +1,40 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const toggleVariants = tv({
 		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: 'bg-transparent',
-				outline: 'border-input hover:bg-muted border bg-transparent'
+				default: "bg-transparent",
+				outline: "border-input hover:bg-muted border bg-transparent",
 			},
 			size: {
-				default:
-					'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
 				sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-				lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2'
-			}
+				lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			},
 		},
 		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
+			variant: "default",
+			size: "default",
+		},
 	});
 
-	export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
-	export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
 	export type ToggleVariants = VariantProps<typeof toggleVariants>;
 </script>
 
 <script lang="ts">
-	import { Toggle as TogglePrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		pressed = $bindable(false),
 		class: className,
-		size = 'default',
-		variant = 'default',
+		size = "default",
+		variant = "default",
 		...restProps
 	}: TogglePrimitive.RootProps & {
 		variant?: ToggleVariant;
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
index 809e219..1718604 100644
--- a/src/lib/components/ui/tooltip/index.ts
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -1,8 +1,8 @@
-import Root from './tooltip.svelte';
-import Trigger from './tooltip-trigger.svelte';
-import Content from './tooltip-content.svelte';
-import Provider from './tooltip-provider.svelte';
-import Portal from './tooltip-portal.svelte';
+import Root from "./tooltip.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Portal from "./tooltip-portal.svelte";
 
 export {
 	Root,
@@ -15,5 +15,5 @@ export {
 	Content as TooltipContent,
 	Trigger as TooltipTrigger,
 	Provider as TooltipProvider,
-	Portal as TooltipPortal
+	Portal as TooltipPortal,
 };
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
index ef6e6d5..0cf0694 100644
--- a/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/format.js';
-	import TooltipPortal from './tooltip-portal.svelte';
-	import type { ComponentProps } from 'svelte';
-	import type { WithoutChildrenOrChild } from '$lib/utils/format.js';
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import TooltipPortal from "./tooltip-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 0,
-		side = 'top',
+		side = "top",
 		children,
 		arrowClasses,
 		portalProps,
@@ -27,7 +27,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			'z-50 inline-flex w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)",
 			className
 		)}
 		{...restProps}
@@ -37,11 +37,11 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						'z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground',
-						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]',
-						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]',
-						'data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2',
-						'data-[side=left]:-translate-y-[calc(50%-3px)]',
+						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
+						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%-3px)]",
 						arrowClasses
 					)}
 					{...props}
diff --git a/src/lib/components/ui/tooltip/tooltip-portal.svelte b/src/lib/components/ui/tooltip/tooltip-portal.svelte
index 7d328f0..d234f7d 100644
--- a/src/lib/components/ui/tooltip/tooltip-portal.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
 
 	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
 </script>
diff --git a/src/lib/components/ui/tooltip/tooltip-provider.svelte b/src/lib/components/ui/tooltip/tooltip-provider.svelte
index fde5bb2..6dba9a6 100644
--- a/src/lib/components/ui/tooltip/tooltip-provider.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
 
 	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
 </script>
diff --git a/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/src/lib/components/ui/tooltip/tooltip-trigger.svelte
index 5631d1b..c4b21fc 100644
--- a/src/lib/components/ui/tooltip/tooltip-trigger.svelte
+++ b/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -1,7 +1,7 @@
-<script lang="ts">
-	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps<T> = $props();
 </script>
 
 <TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/src/lib/components/ui/tooltip/tooltip.svelte b/src/lib/components/ui/tooltip/tooltip.svelte
index 7c9d712..03c9a3d 100644
--- a/src/lib/components/ui/tooltip/tooltip.svelte
+++ b/src/lib/components/ui/tooltip/tooltip.svelte
@@ -1,7 +1,7 @@
-<script lang="ts">
-	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
 
-	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps<T> = $props();
 </script>
 
 <TooltipPrimitive.Root bind:open {...restProps} />
diff --git a/src/lib/hooks/is-mobile.svelte.ts b/src/lib/hooks/is-mobile.svelte.ts
index acbe8ef..4829c00 100644
--- a/src/lib/hooks/is-mobile.svelte.ts
+++ b/src/lib/hooks/is-mobile.svelte.ts
@@ -1,4 +1,4 @@
-import { MediaQuery } from 'svelte/reactivity';
+import { MediaQuery } from "svelte/reactivity";
 
 const DEFAULT_MOBILE_BREAKPOINT = 768;