fix(ui): prop typing on various components

Signed-off-by: Jordan Shatford <[email protected]>

packages/ui/src/lib/components/Alert.svelte

@@ -47,18 +47,15 @@
 </script>
 
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { Icon } from '../icons';
 	import { toIcon } from '../utilities';
 
-	interface $$Props extends HTMLAttributes<HTMLDivElement>, AlertVariants {
-		title?: string;
-		description?: string;
-	}
+	let className: string = '';
+	export { className as class };
 
-	export let variant: $$Props['variant'] = 'default';
-	export let title: $$Props['title'] = undefined;
-	export let description: $$Props['title'] = undefined;
+	export let variant: AlertVariants['variant'] = 'default';
+	export let title: string | undefined = undefined;
+	export let description: string | undefined = undefined;
 
 	const icon = toIcon(variant);
 
@@ -67,7 +64,7 @@
 	});
 </script>
 
-<div {...$$restProps} role="alert" class={divClass({ class: $$props.class })}>
+<div {...$$restProps} role="alert" class={divClass({ class: className })}>
 	<div class={iconDivClass()}>
 		{#if icon}
 			<Icon src={icon} theme="solid" class={iconClass()} />

packages/ui/src/lib/components/Badge.svelte

@@ -61,16 +61,13 @@
 		close: undefined;
 	}>();
 
-	interface $$Props extends HTMLAttributes<HTMLSpanElement>, BadgeVariants {
-		closable?: boolean;
-		icon?: boolean | IconSource;
-		loading?: boolean;
-	}
+	let className: string = '';
+	export { className as class };
 
-	export let variant: $$Props['variant'] = 'default';
-	export let closable: $$Props['closable'] = false;
-	export let icon: $$Props['icon'] = false;
-	export let loading: $$Props['loading'] = false;
+	export let variant: BadgeVariants['variant'] = 'default';
+	export let closable: boolean = false;
+	export let icon: boolean | IconSource = false;
+	export let loading: boolean = false;
 
 	const _icon = typeof icon === 'object' ? icon : toIcon(variant, { loading });
 
@@ -80,7 +77,7 @@
 	});
 </script>
 
-<span {...$$restProps} class={spanClass({ class: $$props.class })}>
+<span {...$$restProps} class={spanClass({ class: className })}>
 	<span class={iconWrapperClass()}>
 		{#if _icon}
 			<Icon src={_icon} theme="solid" class={iconClass()} />

packages/ui/src/lib/components/Confirm.svelte

@@ -59,23 +59,18 @@
 </script>
 
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { fly, fade } from 'svelte/transition';
 	import { Icon } from '../icons';
 	import { toIcon } from '../utilities';
 
-	interface $$Props extends HTMLAttributes<HTMLDivElement>, ConfirmVariants {
-		title: string;
-		description: string;
-		confirmText: string;
-		cancelText: string;
-	}
+	let className: string = '';
+	export { className as class };
 
-	export let variant: $$Props['variant'] = 'info';
-	export let title: $$Props['title'] = 'Confirm?';
-	export let description: $$Props['description'] = '';
-	export let confirmText: $$Props['confirmText'] = 'Confirm';
-	export let cancelText: $$Props['cancelText'] = 'Cancel';
+	export let variant: ConfirmVariants['variant'] = 'info';
+	export let title: string = 'Confirm?';
+	export let description: string = '';
+	export let confirmText: string = 'Confirm';
+	export let cancelText: string = 'Cancel';
 
 	const icon = toIcon(variant);
 
@@ -130,7 +125,7 @@
 			<span class={trickCenteringSpanClass()} aria-hidden="true">&#8203;</span>
 			<div
 				{...$$restProps}
-				class={contentDivClass({ class: $$props.class })}
+				class={contentDivClass({ class: className })}
 				in:fly={{ y: -10, delay: 200, duration: 200 }}
 				out:fly={{ y: -10, duration: 200 }}
 			>