chore: format shadcn components

.github/workflows/spelling.yml

@@ -59,12 +59,12 @@ name: Check Spelling
 on:
   push:
     branches:
-    - "**"
+      - '**'
     tags-ignore:
-    - "**"
+      - '**'
   pull_request_target:
     branches:
-    - "**"
+      - '**'
     types:
       - 'opened'
       - 'reopened'
@@ -105,8 +105,7 @@ jobs:
           experimental_apply_changes_via_bot: 1
           use_sarif: ${{ (!github.event.pull_request || (github.event.pull_request.head.repo.full_name == github.repository)) && 1 }}
           extra_dictionary_limit: 20
-        extra_dictionaries:
+          extra_dictionaries: cspell:software-terms/dict/softwareTerms.txt
-          cspell:software-terms/dict/softwareTerms.txt
 
   comment-push:
     name: Report (Push)
@@ -163,4 +162,4 @@ jobs:
         with:
           experimental_apply_changes_via_bot: 1
           checkout: true
-        ssh_key: "${{ secrets.CHECK_SPELLING }}"
+          ssh_key: '${{ secrets.CHECK_SPELLING }}'

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
 	plugins: {
 		tailwindcss: {},
-    autoprefixer: {},
+		autoprefixer: {}
-  },
+	}
-}
+};

src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.ActionProps;
 	type $$Events = AlertDialogPrimitive.ActionEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 

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 } from "$lib/components/ui/button/index.js";
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.CancelProps;
 	type $$Events = AlertDialogPrimitive.CancelEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <AlertDialogPrimitive.Cancel
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
 	{...$$restProps}
 	on:click
 	on:keydown

src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import * as AlertDialog from "./index.js";
+	import * as AlertDialog from './index.js';
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
+	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
 	export { className as class };
 </script>
 
@@ -17,7 +17,7 @@
 		{transition}
 		{transitionConfig}
 		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  sm:rounded-lg md:w-full",
+			'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  sm:rounded-lg md:w-full',
 			className
 		)}
 		{...$$restProps}

src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.DescriptionProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <AlertDialogPrimitive.Description
-	class={cn("text-sm text-muted-foreground", className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />

src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <div
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
 	{...$$restProps}
 >
 	<slot />

src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
 	<slot />
 </div>

src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { fade } from "svelte/transition";
+	import { fade } from 'svelte/transition';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.OverlayProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let transition: $$Props["transition"] = fade;
+	export let transition: $$Props['transition'] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	export let transitionConfig: $$Props['transitionConfig'] = {
-		duration: 150,
+		duration: 150
 	};
 	export { className as class };
 </script>
@@ -16,6 +16,6 @@
 <AlertDialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
 	{...$$restProps}
 />

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';
 
 	type $$Props = AlertDialogPrimitive.PortalProps;
 </script>

src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = AlertDialogPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let level: $$Props["level"] = "h3";
+	export let level: $$Props['level'] = 'h3';
 	export { className as class };
 </script>
 
-<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
+<AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {level} {...$$restProps}>
 	<slot />
 </AlertDialogPrimitive.Title>

src/lib/components/ui/alert-dialog/index.ts

@@ -1,14 +1,14 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
-import Title from "./alert-dialog-title.svelte";
+import Title from './alert-dialog-title.svelte';
-import Action from "./alert-dialog-action.svelte";
+import Action from './alert-dialog-action.svelte';
-import Cancel from "./alert-dialog-cancel.svelte";
+import Cancel from './alert-dialog-cancel.svelte';
-import Portal from "./alert-dialog-portal.svelte";
+import Portal from './alert-dialog-portal.svelte';
-import Footer from "./alert-dialog-footer.svelte";
+import Footer from './alert-dialog-footer.svelte';
-import Header from "./alert-dialog-header.svelte";
+import Header from './alert-dialog-header.svelte';
-import Overlay from "./alert-dialog-overlay.svelte";
+import Overlay from './alert-dialog-overlay.svelte';
-import Content from "./alert-dialog-content.svelte";
+import Content from './alert-dialog-content.svelte';
-import Description from "./alert-dialog-description.svelte";
+import Description from './alert-dialog-description.svelte';
 
 const Root = AlertDialogPrimitive.Root;
 const Trigger = AlertDialogPrimitive.Trigger;
@@ -36,5 +36,5 @@ export {
 	Trigger as AlertDialogTrigger,
 	Overlay as AlertDialogOverlay,
 	Content as AlertDialogContent,
-	Description as AlertDialogDescription,
+	Description as AlertDialogDescription
 };

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { type Variant, badgeVariants } from "./index.js";
+	import { type Variant, badgeVariants } from './index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	let className: string | undefined | null = undefined;
 	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
+	export let variant: Variant = 'default';
 	export { className as class };
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
+	this={href ? 'a' : 'span'}
 	{href}
 	class={cn(badgeVariants({ variant, className }))}
 	{...$$restProps}

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

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

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
+	import { Button as ButtonPrimitive } from 'bits-ui';
-	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { type Events, type Props, buttonVariants } from './index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = Props;
 	type $$Events = Events;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let variant: $$Props["variant"] = "default";
+	export let variant: $$Props['variant'] = 'default';
-	export let size: $$Props["size"] = "default";
+	export let size: $$Props['size'] = 'default';
-	export let builders: $$Props["builders"] = [];
+	export let builders: $$Props['builders'] = [];
 	export { className as class };
 </script>
 

src/lib/components/ui/card/card-content.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>

src/lib/components/ui/card/card-description.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
 	<slot />
 </p>

src/lib/components/ui/card/card-footer.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
 	<slot />
 </div>

src/lib/components/ui/card/card-header.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
 	<slot />
 </div>

src/lib/components/ui/card/card-title.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import type { HeadingLevel } from "./index.js";
+	import type { HeadingLevel } from './index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let tag: $$Props["tag"] = "h3";
+	export let tag: $$Props['tag'] = 'h3';
 	export { className as class };
 </script>
 
 <svelte:element
 	this={tag}
-	class={cn("font-semibold leading-none tracking-tight", className)}
+	class={cn('font-semibold leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />

src/lib/components/ui/card/card.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+	class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
 	{...$$restProps}
 	on:click
 	on:focusin

src/lib/components/ui/card/index.ts

@@ -1,9 +1,9 @@
-import Root from "./card.svelte";
+import Root from './card.svelte';
-import Content from "./card-content.svelte";
+import Content from './card-content.svelte';
-import Description from "./card-description.svelte";
+import Description from './card-description.svelte';
-import Footer from "./card-footer.svelte";
+import Footer from './card-footer.svelte';
-import Header from "./card-header.svelte";
+import Header from './card-header.svelte';
-import Title from "./card-title.svelte";
+import Title from './card-title.svelte';
 
 export {
 	Root,
@@ -18,7 +18,7 @@ export {
 	Description as CardDescription,
 	Footer as CardFooter,
 	Header as CardHeader,
-	Title as CardTitle,
+	Title as CardTitle
 };
 
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

src/lib/components/ui/popover/index.ts

@@ -1,5 +1,5 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
+import { Popover as PopoverPrimitive } from 'bits-ui';
-import Content from "./popover-content.svelte";
+import Content from './popover-content.svelte';
 const Root = PopoverPrimitive.Root;
 const Trigger = PopoverPrimitive.Trigger;
 const Close = PopoverPrimitive.Close;
@@ -13,5 +13,5 @@ export {
 	Root as Popover,
 	Content as PopoverContent,
 	Trigger as PopoverTrigger,
-	Close as PopoverClose,
+	Close as PopoverClose
 };

src/lib/components/ui/popover/popover-content.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { Popover as PopoverPrimitive } from 'bits-ui';
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = PopoverPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
+	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
-	export let align: $$Props["align"] = "center";
+	export let align: $$Props['align'] = 'center';
-	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let sideOffset: $$Props['sideOffset'] = 4;
 	export { className as class };
 </script>
 
@@ -19,7 +19,7 @@
 	{sideOffset}
 	{...$$restProps}
 	class={cn(
-		"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+		'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
 		className
 	)}
 >

src/lib/components/ui/scroll-area/index.ts

@@ -1,10 +1,10 @@
-import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Scrollbar from './scroll-area-scrollbar.svelte';
-import Root from "./scroll-area.svelte";
+import Root from './scroll-area.svelte';
 
 export {
 	Root,
 	Scrollbar,
 	//,
 	Root as ScrollArea,
-	Scrollbar as ScrollAreaScrollbar,
+	Scrollbar as ScrollAreaScrollbar
 };

src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
-		orientation?: "vertical" | "horizontal";
+		orientation?: 'vertical' | 'horizontal';
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let orientation: $$Props["orientation"] = "vertical";
+	export let orientation: $$Props['orientation'] = 'vertical';
 	export { className as class };
 </script>
 
 <ScrollAreaPrimitive.Scrollbar
 	{orientation}
 	class={cn(
-		"flex touch-none select-none transition-colors",
+		'flex touch-none select-none transition-colors',
-		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
-		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-px',
 		className
 	)}
 >
 	<slot />
 	<ScrollAreaPrimitive.Thumb
-		class={cn("relative rounded-full bg-border", orientation === "vertical" && "flex-1")}
+		class={cn('relative rounded-full bg-border', orientation === 'vertical' && 'flex-1')}
 	/>
 </ScrollAreaPrimitive.Scrollbar>

src/lib/components/ui/scroll-area/scroll-area.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
-	import { Scrollbar } from "./index.js";
+	import { Scrollbar } from './index.js';
-	import { cn } from "$lib/utils.js";
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ScrollAreaPrimitive.Props & {
-		orientation?: "vertical" | "horizontal" | "both";
+		orientation?: 'vertical' | 'horizontal' | 'both';
 		scrollbarXClasses?: string;
 		scrollbarYClasses?: string;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
-	export let orientation = "vertical";
+	export let orientation = 'vertical';
-	export let scrollbarXClasses: string = "";
+	export let scrollbarXClasses: string = '';
-	export let scrollbarYClasses: string = "";
+	export let scrollbarYClasses: string = '';
 </script>
 
-<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn('relative overflow-hidden', className)}>
 	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
 		<ScrollAreaPrimitive.Content>
 			<slot />
 		</ScrollAreaPrimitive.Content>
 	</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 />

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
 };

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

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

src/lib/components/ui/sonner/index.ts

@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte';

src/lib/components/ui/sonner/sonner.svelte

@@ -1,6 +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 { mode } from 'mode-watcher';
 
 	type $$Props = SonnerProps;
 </script>
@@ -10,11 +10,12 @@
 	class="toaster group"
 	toastOptions={{
 		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			toast:
-			description: "group-[.toast]:text-muted-foreground",
+				'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			description: 'group-[.toast]:text-muted-foreground',
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+			actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-		},
+			cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+		}
 	}}
 	{...$$restProps}
 />

src/lib/components/ui/tooltip/index.ts

@@ -1,5 +1,5 @@
-import { Tooltip as TooltipPrimitive } from "bits-ui";
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
-import Content from "./tooltip-content.svelte";
+import Content from './tooltip-content.svelte';
 
 const Root = TooltipPrimitive.Root;
 const Trigger = TooltipPrimitive.Trigger;
@@ -11,5 +11,5 @@ export {
 	//
 	Root as Tooltip,
 	Content as TooltipContent,
-	Trigger as TooltipTrigger,
+	Trigger as TooltipTrigger
 };

src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn, flyAndScale } from '$lib/utils.js';
 
 	type $$Props = TooltipPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let sideOffset: $$Props['sideOffset'] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
+	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		y: 8,
-		duration: 150,
+		duration: 150
 	};
 	export { className as class };
 </script>
@@ -19,7 +19,7 @@
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
+		'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground',
 		className
 	)}
 	{...$$restProps}