diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 88920c9b..b3a6a73b 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type { WithElementRef } from 'bits-ui';
+  import { cn, type WithElementRef } from '$lib/utils.js';
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-  import { type VariantProps, tv } from 'tailwind-variants';
+  import { tv, type VariantProps } from 'tailwind-variants';
 
   export const buttonVariants = tv({
     base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0',
@@ -40,8 +40,6 @@
 </script>
 
 <script lang="ts">
-  import { cn } from '$lib/utils.js';
-
   let {
     class: className,
     variant = 'default',
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index b1de6663..68ada0bc 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { cn } from '$lib/utils.js';
-  import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
   import X from 'lucide-svelte/icons/x';
   import type { Snippet } from 'svelte';
   import * as Dialog from './index.js';
@@ -22,13 +22,13 @@
   <DialogPrimitive.Content
     bind:ref
     class={cn(
-      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+      'fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
       className
     )}
     {...restProps}>
     {@render children?.()}
     <DialogPrimitive.Close
-      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:text-muted-foreground">
+      class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:text-muted-foreground">
       <X class="size-4" />
       <span class="sr-only">Close</span>
     </DialogPrimitive.Close>
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
index 88af15c0..03130c6b 100644
--- a/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import type { WithElementRef } from 'bits-ui';
+  import { cn, type WithElementRef } from '$lib/utils.js';
   import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils.js';
 
   let {
     ref = $bindable(null),
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
index 0bc0d2ad..68a0e327 100644
--- a/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils.js';
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { WithElementRef } from 'bits-ui';
-  import { cn } from '$lib/utils.js';
 
   let {
     ref = $bindable(null),
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 5d1c70e3..51e2b816 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { InputType } from '$/types';
-  import { cn } from '$lib/utils.js';
-  import type { WithElementRef } from 'bits-ui';
+  import { cn, type WithElementRef } from '$lib/utils.js';
   import type { HTMLInputAttributes } from 'svelte/elements';
 
   type Props = WithElementRef<
@@ -23,7 +22,7 @@
   <input
     bind:this={ref}
     class={cn(
-      'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
       className
     )}
     type="file"
@@ -34,7 +33,7 @@
   <input
     bind:this={ref}
     class={cn(
-      'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
       className
     )}
     {type}
diff --git a/src/lib/components/ui/resizable/resizable-handle.svelte b/src/lib/components/ui/resizable/resizable-handle.svelte
index 22755a57..18b0795e 100644
--- a/src/lib/components/ui/resizable/resizable-handle.svelte
+++ b/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
+  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
   import GripVertical from 'lucide-svelte/icons/grip-vertical';
   import * as ResizablePrimitive from 'paneforge';
-  import type { WithoutChildrenOrChild } from 'bits-ui';
-  import { cn } from '$lib/utils.js';
 
   let {
     ref = $bindable(null),
@@ -17,7 +16,7 @@
 <ResizablePrimitive.PaneResizer
   bind:ref
   class={cn(
-    '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:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 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-y-1/2 data-[direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90',
+    '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-none 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}>
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
index 158e1836..c2a230e5 100644
--- a/src/lib/components/ui/switch/switch.svelte
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { cn } from '$lib/utils.js';
-  import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+  import { Switch as SwitchPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),
@@ -14,7 +14,7 @@
   bind:ref
   bind:checked
   class={cn(
-    'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-slate-700',
+    'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-slate-700',
     className
   )}
   {...restProps}>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 9ad0df42..d204561d 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,10 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };