feat: formatting using linter

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 { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
-	import { buttonVariants, type Props, type Events } from ".";
+	import { buttonVariants, type Props, type Events } from '.';
 
 	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/button/index.ts

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

src/lib/components/ui/calendar/calendar-cell.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.CellProps;
 
-	export let date: $$Props["date"];
+	export let date: $$Props['date'];
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.Cell
 	{date}
 	class={cn(
-		"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
+		'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50',
 		className
 	)}
 	{...$$restProps}

src/lib/components/ui/calendar/calendar-day.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { buttonVariants } from "$lib/components/ui/button";
+	import { buttonVariants } from '$lib/components/ui/button';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.DayProps;
 	type $$Events = CalendarPrimitive.DayEvents;
 
-	export let date: $$Props["date"];
+	export let date: $$Props['date'];
-	export let month: $$Props["month"];
+	export let month: $$Props['month'];
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -17,18 +17,18 @@
 	{date}
 	{month}
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
+		buttonVariants({ variant: 'ghost' }),
-		"h-8 w-8 p-0 font-normal",
+		'h-8 w-8 p-0 font-normal',
 		// Today
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
 		// Selected
-		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
 		// Disabled
-		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 		// Unavailable
-		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
 		// Outside months
-		"data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
+		'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
 		className
 	)}
 	{...$$restProps}

src/lib/components/ui/calendar/calendar-grid-body.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.GridBodyProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 

src/lib/components/ui/calendar/calendar-grid-head.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.GridHeadProps;
 

src/lib/components/ui/calendar/calendar-grid-row.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.GridRowProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+<CalendarPrimitive.GridRow class={cn('flex', className)} {...$$restProps}>
 	<slot />
 </CalendarPrimitive.GridRow>

src/lib/components/ui/calendar/calendar-grid.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.GridProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
+<CalendarPrimitive.Grid class={cn('w-full border-collapse space-y-1', className)} {...$$restProps}>
 	<slot />
 </CalendarPrimitive.Grid>

src/lib/components/ui/calendar/calendar-head-cell.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.HeadCellProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.HeadCell
-	class={cn("w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
+	class={cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.HeaderProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.Header
-	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	class={cn('relative flex w-full items-center justify-between pt-1', className)}
 	{...$$restProps}
 >
 	<slot />

src/lib/components/ui/calendar/calendar-heading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.HeadingProps;
 
@@ -10,7 +10,7 @@
 
 <CalendarPrimitive.Heading
 	let:headingValue
-	class={cn("text-sm font-medium", className)}
+	class={cn('text-sm font-medium', className)}
 	{...$$restProps}
 >
 	<slot {headingValue}>

src/lib/components/ui/calendar/calendar-months.svelte

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

src/lib/components/ui/calendar/calendar-next-button.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { ChevronRight } from "radix-icons-svelte";
+	import { ChevronRight } from 'radix-icons-svelte';
-	import { buttonVariants } from "$lib/components/ui/button";
+	import { buttonVariants } from '$lib/components/ui/button';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.NextButtonProps;
 	type $$Events = CalendarPrimitive.NextButtonEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.NextButton
 	on:click
 	class={cn(
-		buttonVariants({ variant: "outline" }),
+		buttonVariants({ variant: 'outline' }),
-		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}
 	{...$$restProps}

src/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { ChevronLeft } from "radix-icons-svelte";
+	import { ChevronLeft } from 'radix-icons-svelte';
-	import { buttonVariants } from "$lib/components/ui/button";
+	import { buttonVariants } from '$lib/components/ui/button';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.PrevButtonProps;
 	type $$Events = CalendarPrimitive.PrevButtonEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <CalendarPrimitive.PrevButton
 	on:click
 	class={cn(
-		buttonVariants({ variant: "outline" }),
+		buttonVariants({ variant: 'outline' }),
-		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}
 	{...$$restProps}

src/lib/components/ui/calendar/calendar.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import * as Calendar from ".";
+	import * as Calendar from '.';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = CalendarPrimitive.Props;
 	type $$Events = CalendarPrimitive.Events;
 
-	export let value: $$Props["value"] = undefined;
+	export let value: $$Props['value'] = undefined;
-	export let placeholder: $$Props["placeholder"] = undefined;
+	export let placeholder: $$Props['placeholder'] = undefined;
-	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+	export let weekdayFormat: $$Props['weekdayFormat'] = 'short';
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -18,7 +18,7 @@
 	bind:value
 	bind:placeholder
 	{weekdayFormat}
-	class={cn("p-3", className)}
+	class={cn('p-3', className)}
 	{...$$restProps}
 	on:keydown
 	let:months

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

@@ -1,16 +1,16 @@
-import Root from "./calendar.svelte";
+import Root from './calendar.svelte';
-import Cell from "./calendar-cell.svelte";
+import Cell from './calendar-cell.svelte';
-import Day from "./calendar-day.svelte";
+import Day from './calendar-day.svelte';
-import Grid from "./calendar-grid.svelte";
+import Grid from './calendar-grid.svelte';
-import Header from "./calendar-header.svelte";
+import Header from './calendar-header.svelte';
-import Months from "./calendar-months.svelte";
+import Months from './calendar-months.svelte';
-import GridRow from "./calendar-grid-row.svelte";
+import GridRow from './calendar-grid-row.svelte';
-import Heading from "./calendar-heading.svelte";
+import Heading from './calendar-heading.svelte';
-import GridBody from "./calendar-grid-body.svelte";
+import GridBody from './calendar-grid-body.svelte';
-import GridHead from "./calendar-grid-head.svelte";
+import GridHead from './calendar-grid-head.svelte';
-import HeadCell from "./calendar-head-cell.svelte";
+import HeadCell from './calendar-head-cell.svelte';
-import NextButton from "./calendar-next-button.svelte";
+import NextButton from './calendar-next-button.svelte';
-import PrevButton from "./calendar-prev-button.svelte";
+import PrevButton from './calendar-prev-button.svelte';
 
 export {
 	Day,
@@ -26,5 +26,5 @@ export {
 	NextButton,
 	PrevButton,
 	//
-	Root as Calendar,
+	Root as Calendar
 };

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Button from "$lib/components/ui/button";
+	import * as Button from '$lib/components/ui/button';
 
 	type $$Props = Button.Props;
 </script>

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = FormPrimitive.DescriptionProps;
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.Description
-	class={cn("text-[0.8rem] text-muted-foreground", className)}
+	class={cn('text-[0.8rem] text-muted-foreground', className)}
 	{...$$restProps}
 	let:descriptionAttrs
 >

src/lib/components/ui/form/form-element-field.svelte

@@ -1,26 +1,26 @@
 <script lang="ts" context="module">
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	import type { FormPathLeaves, SuperForm } from "sveltekit-superforms";
+	import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
 	type T = Record<string, unknown>;
 	type U = unknown;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLDivElement>;
 
 	export let form: SuperForm<T>;
 	export let name: U;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.ElementField {form} {name} let:constraints let:errors let:tainted let:value>
-	<div class={cn("space-y-2", className)}>
+	<div class={cn('space-y-2', className)}>
 		<slot {constraints} {errors} {tainted} {value} />
 	</div>
 </FormPrimitive.ElementField>

src/lib/components/ui/form/form-field-errors.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = FormPrimitive.FieldErrorsProps & {
 		errorClasses?: string | undefined | null;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
-	export let errorClasses: $$Props["class"] = undefined;
+	export let errorClasses: $$Props['class'] = undefined;
 </script>
 
 <FormPrimitive.FieldErrors
-	class={cn("text-[0.8rem] font-medium text-destructive", className)}
+	class={cn('text-[0.8rem] font-medium text-destructive', className)}
 	{...$$restProps}
 	let:errors
 	let:fieldErrorsAttrs

src/lib/components/ui/form/form-field.svelte

@@ -1,26 +1,26 @@
 <script lang="ts" context="module">
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	import type { FormPath, SuperForm } from "sveltekit-superforms";
+	import type { FormPath, SuperForm } from 'sveltekit-superforms';
 	type T = Record<string, unknown>;
 	type U = unknown;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import type { HTMLAttributes } from "svelte/elements";
+	import type { HTMLAttributes } from 'svelte/elements';
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = FormPrimitive.FieldProps<T, U> & HTMLAttributes<HTMLElement>;
 
 	export let form: SuperForm<T>;
 	export let name: U;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.Field {form} {name} let:constraints let:errors let:tainted let:value>
-	<div class={cn("space-y-2", className)}>
+	<div class={cn('space-y-2', className)}>
 		<slot {constraints} {errors} {tainted} {value} />
 	</div>
 </FormPrimitive.Field>

src/lib/components/ui/form/form-fieldset.svelte

@@ -1,20 +1,20 @@
 <script lang="ts" context="module">
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	import type { FormPath, SuperForm } from "sveltekit-superforms";
+	import type { FormPath, SuperForm } from 'sveltekit-superforms';
 	type T = Record<string, unknown>;
 	type U = unknown;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = FormPrimitive.FieldsetProps<T, U>;
 
 	export let form: SuperForm<T>;
 	export let name: U;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
@@ -25,7 +25,7 @@
 	let:errors
 	let:tainted
 	let:value
-	class={cn("space-y-2", className)}
+	class={cn('space-y-2', className)}
 >
 	<slot {constraints} {errors} {tainted} {value} />
 </FormPrimitive.Fieldset>

src/lib/components/ui/form/form-label.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import type { Label as LabelPrimitive } from "bits-ui";
+	import type { Label as LabelPrimitive } from 'bits-ui';
-	import { getFormControl } from "formsnap";
+	import { getFormControl } from 'formsnap';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
-	import { Label } from "$lib/components/ui/label";
+	import { Label } from '$lib/components/ui/label';
 
 	type $$Props = LabelPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 
 	const { labelAttrs } = getFormControl();
 </script>
 
-<Label {...$labelAttrs} class={cn("data-[fs-error]:text-destructive", className)} {...$$restProps}>
+<Label {...$labelAttrs} class={cn('data-[fs-error]:text-destructive', className)} {...$$restProps}>
 	<slot {labelAttrs} />
 </Label>

src/lib/components/ui/form/form-legend.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import * as FormPrimitive from "formsnap";
+	import * as FormPrimitive from 'formsnap';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = FormPrimitive.LegendProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <FormPrimitive.Legend
 	{...$$restProps}
-	class={cn("text-sm font-medium leading-none data-[fs-error]:text-destructive", className)}
+	class={cn('text-sm font-medium leading-none data-[fs-error]:text-destructive', className)}
 	let:legendAttrs
 >
 	<slot {legendAttrs} />

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

@@ -1,12 +1,12 @@
-import * as FormPrimitive from "formsnap";
+import * as FormPrimitive from 'formsnap';
-import Description from "./form-description.svelte";
+import Description from './form-description.svelte';
-import Label from "./form-label.svelte";
+import Label from './form-label.svelte';
-import FieldErrors from "./form-field-errors.svelte";
+import FieldErrors from './form-field-errors.svelte';
-import Field from "./form-field.svelte";
+import Field from './form-field.svelte';
-import Button from "./form-button.svelte";
+import Button from './form-button.svelte';
-import Fieldset from "./form-fieldset.svelte";
+import Fieldset from './form-fieldset.svelte';
-import Legend from "./form-legend.svelte";
+import Legend from './form-legend.svelte';
-import ElementField from "./form-element-field.svelte";
+import ElementField from './form-element-field.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
 };

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

src/lib/components/ui/label/label.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from "bits-ui";
+	import { Label as LabelPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = LabelPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <LabelPrimitive.Root
 	class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 		className
 	)}
 	{...$$restProps}

src/routes/(auth)/auth/(components)/register-form.svelte

@@ -9,59 +9,52 @@
 </script>
 
 <div class="flex flex-col space-y-2 text-center">
-  <h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
+	<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
-  <p class="pb-6 text-sm text-muted-foreground">
+	<p class="pb-6 text-sm text-muted-foreground">Enter your details below to create a new account</p>
-    Enter your details below to create a new account
-  </p>
 </div>
 <div class={cn('grid gap-6')} {...$$restProps}>
-  <form
+	<form
-    method="POST"
+		method="POST"
-    action="?/register"
+		action="?/register"
-    use:enhance={() => {
+		use:enhance={() => {
-      isLoading = true;
+			isLoading = true;
-      return async ({ update }) => {
+			return async ({ update }) => {
-        isLoading = false;
+				isLoading = false;
-        update();
+				update();
-      };
+			};
-    }}
+		}}
-  >
+	>
-    <div class="grid gap-2">
+		<div class="grid gap-2">
-      <div class="grid gap-2">
+			<div class="grid gap-2">
-        <Label for="email">Name</Label>
+				<Label for="email">Name</Label>
-        <Input id="name" name="name" type="name" disabled={isLoading} />
+				<Input id="name" name="name" type="name" disabled={isLoading} />
-      </div>
+			</div>
-      <div class="grid gap-2">
+			<div class="grid gap-2">
-        <Label for="email">Email</Label>
+				<Label for="email">Email</Label>
-        <Input
+				<Input
-          id="email"
+					id="email"
-          name="email"
+					name="email"
-          type="email"
+					type="email"
-          autocapitalize="none"
+					autocapitalize="none"
-          autocomplete="email"
+					autocomplete="email"
-          autocorrect="off"
+					autocorrect="off"
-          disabled={isLoading}
+					disabled={isLoading}
-        />
+				/>
-      </div>
+			</div>
-      <div class="grid gap-2">
+			<div class="grid gap-2">
-        <Label for="password">Password</Label>
+				<Label for="password">Password</Label>
-        <Input id="password" name="password" type="password" disabled={isLoading} />
+				<Input id="password" name="password" type="password" disabled={isLoading} />
-      </div>
+			</div>
-      <div class="grid gap-2">
+			<div class="grid gap-2">
-        <Label for="passwordConfirm">Confirm password</Label>
+				<Label for="passwordConfirm">Confirm password</Label>
-        <Input
+				<Input id="passwordConfirm" name="passwordConfirm" type="password" disabled={isLoading} />
-          id="passwordConfirm"
+			</div>
-          name="passwordConfirm"
+			<Button type="submit" disabled={isLoading}>
-          type="password"
+				{#if isLoading}
-          disabled={isLoading}
+					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-        />
+				{/if}
-      </div>
+				Register
-      <Button type="submit" disabled={isLoading}>
+			</Button>
-        {#if isLoading}
+		</div>
-          <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+	</form>
-        {/if}
-        Register
-      </Button>
-    </div>
-  </form>
 </div>

src/routes/(auth)/auth/(components)/sso-form.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
-	import { Icons } from "$lib/components/site";
+	import { Icons } from '$lib/components/site';
-  import PocketBase from 'pocketbase';
+	import PocketBase from 'pocketbase';
 	import { PUBLIC_CLIENT_PB } from '$env/static/public';
-	import { enhance } from "$app/forms";
+	import { enhance } from '$app/forms';
-	import { Button } from "$lib/components/ui/button";
+	import { Button } from '$lib/components/ui/button';
-	import { Separator } from "$lib/components/ui/separator";
+	import { Separator } from '$lib/components/ui/separator';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { ChevronDown } from "radix-icons-svelte";
+	import { ChevronDown } from 'radix-icons-svelte';
 
 	export let isLoading = false;
-  export let providers: { name: string, icon?: any, displayName: string }[];
+
+	/* eslint-disable  @typescript-eslint/no-explicit-any */
+	export let providers: { name: string; icon?: any; displayName: string }[];
 	let currentProvider = providers[0];
 
 	const pb = new PocketBase(PUBLIC_CLIENT_PB);
-  let oauth2Form: HTMLFormElement;
+	let oauth2Form: HTMLFormElement;
 	async function loginWithOauth2(provider: string) {
 		try {
 			await pb.collection('users').authWithOAuth2({ provider });

src/routes/(auth)/auth/+page.svelte

@@ -5,7 +5,7 @@
 	import type { PageData } from './$types.js';
 	import { LoginForm, RegisterForm, SSOForm } from './(components)';
 	export let form;
-  export let data: PageData;
+	export let data: PageData;
 	const { providers } = data;
 	const providersWithIcons = providers.map((provider) => ({
 		...provider,

src/routes/(user)/settings/(components)/sidebar-nav.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
-	import { page } from "$app/stores";
+	import { page } from '$app/stores';
-	import { Button } from "$lib/components/ui/button";
+	import { Button } from '$lib/components/ui/button';
-	import { cubicInOut } from "svelte/easing";
+	import { cubicInOut } from 'svelte/easing';
-	import { crossfade } from "svelte/transition";
+	import { crossfade } from 'svelte/transition';
 
 	let className: string | undefined | null = undefined;
 	export let items: { href: string; title: string }[];
@@ -11,28 +11,25 @@
 
 	const [send, receive] = crossfade({
 		duration: 250,
-		easing: cubicInOut,
+		easing: cubicInOut
 	});
 </script>
 
-<nav class={cn("flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)}>
+<nav class={cn('flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1', className)}>
 	{#each items as item}
 		{@const isActive = $page.url.pathname === item.href}
 
 		<Button
 			href={item.href}
 			variant="ghost"
-			class={cn(
+			class={cn(!isActive && 'hover:underline', 'relative justify-start hover:bg-transparent')}
-				!isActive && "hover:underline",
-				"relative justify-start hover:bg-transparent"
-			)}
 			data-sveltekit-noscroll
 		>
 			{#if isActive}
 				<div
 					class="absolute inset-0 rounded-md bg-muted"
-					in:send={{ key: "active-sidebar-tab" }}
+					in:send={{ key: 'active-sidebar-tab' }}
-					out:receive={{ key: "active-sidebar-tab" }}
+					out:receive={{ key: 'active-sidebar-tab' }}
 				/>
 			{/if}
 			<div class="relative">

src/routes/(user)/settings/+layout.svelte

@@ -1,29 +1,27 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
+	import { Separator } from '$lib/components/ui/separator';
-	import SidebarNav from "./(components)/sidebar-nav.svelte";
+	import SidebarNav from './(components)/sidebar-nav.svelte';
 
 	const sidebarNavItems = [
 		{
-			title: "Profile",
+			title: 'Profile',
-			href: "/settings",
+			href: '/settings'
 		},
 		{
-			title: "Account",
+			title: 'Account',
-			href: "/settings/account",
+			href: '/settings/account'
 		},
 		{
-			title: "Appearance",
+			title: 'Appearance',
-			href: "/settings/appearance",
+			href: '/settings/appearance'
-		},
+		}
 	];
 </script>
 
 <div class="space-y-6 p-10 pb-16">
 	<div class="space-y-0.5">
 		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
-		<p class="text-muted-foreground">
+		<p class="text-muted-foreground">Manage your account settings and set e-mail preferences.</p>
-			Manage your account settings and set e-mail preferences.
-		</p>
 	</div>
 	<Separator class="my-6" />
 	<div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">

src/routes/(user)/settings/+page.server.ts

@@ -1,12 +1,12 @@
-import type { PageServerLoad } from "./$types";
+import type { PageServerLoad } from './$types';
-import { superValidate } from "sveltekit-superforms";
+import { superValidate } from 'sveltekit-superforms';
-import { zod } from "sveltekit-superforms/adapters";
+import { zod } from 'sveltekit-superforms/adapters';
-import { profileFormSchema } from "./profile-form.svelte";
+import { profileFormSchema } from './profile-form.svelte';
-import { fail, type Actions } from "@sveltejs/kit";
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
-		form: await superValidate(zod(profileFormSchema)),
+		form: await superValidate(zod(profileFormSchema))
 	};
 };
 
@@ -15,12 +15,12 @@ export const actions: Actions = {
 		const form = await superValidate(request, zod(profileFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
-			form,
+			form
 		};
-	},
+	}
 };

src/routes/(user)/settings/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { PageData } from "./$types";
+	import type { PageData } from './$types';
-	import ProfileForm from "./profile-form.svelte";
+	import ProfileForm from './profile-form.svelte';
-	import { Separator } from "$lib/components/ui/separator";
+	import { Separator } from '$lib/components/ui/separator';
 
 	export let data: PageData;
 </script>

src/routes/(user)/settings/account/+page.server.ts

@@ -1,17 +1,17 @@
-import type { PageServerLoad } from "./$types";
+import type { PageServerLoad } from './$types';
-import { superValidate } from "sveltekit-superforms";
+import { superValidate } from 'sveltekit-superforms';
-import { zod } from "sveltekit-superforms/adapters";
+import { zod } from 'sveltekit-superforms/adapters';
-import { usernameFormSchema } from "./username-form.svelte";
+import { usernameFormSchema } from './username-form.svelte';
-import { emailRequestFormSchema, emailConfirmFormSchema } from "./email-form.svelte";
+import { emailRequestFormSchema, emailConfirmFormSchema } from './email-form.svelte';
-import { passwordFormSchema } from "./password-form.svelte";
+import { passwordFormSchema } from './password-form.svelte';
-import { fail, type Actions } from "@sveltejs/kit";
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
 		usernameForm: await superValidate(zod(usernameFormSchema)),
 		emailRequestForm: await superValidate(zod(emailRequestFormSchema)),
 		emailConfirmForm: await superValidate(zod(emailConfirmFormSchema)),
-		passwordForm: await superValidate(zod(passwordFormSchema)),
+		passwordForm: await superValidate(zod(passwordFormSchema))
 	};
 };
 
@@ -20,50 +20,50 @@ export const actions: Actions = {
 		const form = await superValidate(request, zod(usernameFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
-			form,
+			form
 		};
 	},
 	emailRequest: async ({ request, locals }) => {
 		const form = await superValidate(request, zod(emailRequestFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').requestEmailChange(form.data.newEmail);
 		return {
-			form,
+			form
 		};
 	},
 	emailConfirm: async ({ request, locals }) => {
 		const form = await superValidate(request, zod(emailConfirmFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase
 			.collection('users')
 			.confirmEmailChange(form.data.token, form.data.password);
 		return {
-			form,
+			form
 		};
 	},
 	password: async ({ request, locals }) => {
 		const form = await superValidate(request, zod(passwordFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
-			form,
+			form
 		};
-	},
+	}
 };

src/routes/(user)/settings/account/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
+	import { Separator } from '$lib/components/ui/separator';
-	import type { PageData } from "./$types";
+	import type { PageData } from './$types';
-	import UsernameForm from "./username-form.svelte";
+	import UsernameForm from './username-form.svelte';
-	import EmailForm from "./email-form.svelte";
+	import EmailForm from './email-form.svelte';
-	import PasswordForm from "./password-form.svelte";
+	import PasswordForm from './password-form.svelte';
 
 	export let data: PageData;
 </script>
@@ -11,12 +11,14 @@
 <div class="space-y-6">
 	<div>
 		<h3 class="text-lg font-medium">Account</h3>
-		<p class="text-sm text-muted-foreground">
+		<p class="text-sm text-muted-foreground">Update your account settings.</p>
-			Update your account settings.
-		</p>
 	</div>
 	<Separator />
 	<UsernameForm user={data.user} data={data.usernameForm} />
-	<EmailForm user={data.user} requestData={data.emailRequestForm} confirmData={data.emailConfirmForm} />
+	<EmailForm
+		user={data.user}
+		requestData={data.emailRequestForm}
+		confirmData={data.emailConfirmForm}
+	/>
 	<PasswordForm data={data.passwordForm} />
 </div>

src/routes/(user)/settings/appearance/+page.server.ts

@@ -1,12 +1,12 @@
-import { superValidate } from "sveltekit-superforms";
+import { superValidate } from 'sveltekit-superforms';
-import { zod } from "sveltekit-superforms/adapters";
+import { zod } from 'sveltekit-superforms/adapters';
-import type { PageServerLoad } from "../$types";
+import type { PageServerLoad } from '../$types';
-import { appearanceFormSchema } from "./appearance-form.svelte";
+import { appearanceFormSchema } from './appearance-form.svelte';
-import { fail, type Actions } from "@sveltejs/kit";
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
-		form: await superValidate(zod(appearanceFormSchema)),
+		form: await superValidate(zod(appearanceFormSchema))
 	};
 };
 
@@ -15,12 +15,12 @@ export const actions: Actions = {
 		const form = await superValidate(request, zod(appearanceFormSchema));
 		if (!form.valid) {
 			return fail(400, {
-				form,
+				form
 			});
 		}
 		await locals.pocketBase.collection('users').update(locals.id, form.data);
 		return {
-			form,
+			form
 		};
-	},
+	}
 };

src/routes/(user)/settings/appearance/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
+	import { Separator } from '$lib/components/ui/separator';
-	import type { PageData } from "./$types";
+	import type { PageData } from './$types';
-	import AppearanceForm from "./appearance-form.svelte";
+	import AppearanceForm from './appearance-form.svelte';
 
 	export let data: PageData;
 </script>

src/routes/(user)/settings/appearance/appearance-form.svelte

@@ -13,11 +13,7 @@
 <script lang="ts">
 	import { browser, dev } from '$app/environment';
 	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
-	import SuperDebug, {
+	import SuperDebug, { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
-		type SuperValidated,
-		type Infer,
-		superForm,
-	} from 'sveltekit-superforms';
 	import * as Card from '$lib/components/ui/card';
 	import * as Form from '$lib/components/ui/form';
 	import * as RadioGroup from '$lib/components/ui/radio-group';
@@ -25,7 +21,7 @@
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
-	import { resetMode, setMode } from 'mode-watcher';
+	import { setMode } from 'mode-watcher';
 
 	export let data: SuperValidated<Infer<AppearanceFormSchema>>;
 	let isLoading = false;
@@ -38,7 +34,7 @@
 		},
 		onUpdated: ({ form: f }) => {
 			isLoading = false;
-			setMode(f.data.appearanceMode)
+			setMode(f.data.appearanceMode);
 			if (f.valid) {
 				toast.success('Appearance has been updated.');
 			} else {
@@ -52,9 +48,7 @@
 <Card.Root>
 	<Card.Header>
 		<Card.Title>Change your mode</Card.Title>
-		<Card.Description>
+		<Card.Description>You can modify the mode for your theme preference.</Card.Description>
-			You can modify the mode for your theme preference.
-		</Card.Description>
 	</Card.Header>
 	<Card.Content>
 		<form method="POST" use:enhance class="space-y-2">

src/routes/+layout.svelte

@@ -7,7 +7,7 @@
 	import DataIndicator from '$lib/components/site/data-indicator.svelte';
 	import { fly } from 'svelte/transition';
 	import { Toaster } from 'svelte-sonner';
-	import {  } from "mode-watcher";
+	import {} from 'mode-watcher';
 
 	export let data: LayoutData;