feat: add generic parameters to Modal interfaces

packages/skeleton/src/lib/index.ts

@@ -5,7 +5,7 @@
 export type { AutocompleteOption } from './components/Autocomplete/types.js';
 export type { ConicStop } from './components/ConicGradient/types.js';
 export type { DrawerSettings, DrawerStore } from './utilities/Drawer/types.js';
-export type { ModalSettings, ModalComponent, ModalStore } from './utilities/Modal/types.js';
+export type { ModalSettings, ModalComponent, ModalParentProp, ModalStore } from './utilities/Modal/types.js';
 export type { ToastSettings, ToastStore } from './utilities/Toast/types.js';
 export type { TableSource } from './components/Table/types.js';
 export type { PaginationSettings } from './components/Paginator/types.js';

packages/skeleton/src/lib/utilities/Modal/Modal.svelte

@@ -23,7 +23,7 @@
 
 	import { focusTrap } from '../../actions/FocusTrap/focusTrap.js';
 	import { getModalStore } from './stores.js';
-	import type { ModalComponent, ModalSettings } from './types.js';
+	import type { ModalComponent, ModalParentProp, ModalSettings } from './types.js';
 
 	// Props (components)
 	/** Register a list of reusable component modals. */
@@ -211,6 +211,7 @@
 	// There is a way to self-reference component values, but it involves svelte-internal and is not yet stable.
 	// REPL: https://svelte.dev/repl/badd0f11aa99450ca69dca6690d4d5a4?version=3.52.0
 	// Source: https://discord.com/channels/457912077277855764/1037768846855118909
+  let parent: ModalParentProp;
 	$: parent = {
 		position,
 		// ---

packages/skeleton/src/lib/utilities/Modal/types.ts

@@ -1,17 +1,49 @@
 // Modal Types
 
+import type { ComponentConstructorOptions, ComponentProps, SvelteComponent } from 'svelte';
+
 export type { ModalStore } from './stores.js';
 
-export interface ModalComponent {
+export interface ModalParentProp {
+	position: string;
+	// ---
+	background: string;
+	width: string;
+	height: string;
+	padding: string;
+	spacing: string;
+	rounded: string;
+	shadow: string;
+	// ---
+	buttonNeutral: string;
+	buttonPositive: string;
+	buttonTextCancel: string;
+	buttonTextConfirm: string;
+	buttonTextSubmit: string;
+	// ---
+	regionBackdrop: string;
+	regionHeader: string;
+	regionBody: string;
+	regionFooter: string;
+	// ---
+	onClose: () => void;
+}
+
+type CustomComponent = SvelteComponent<{ parent?: Partial<ModalParentProp> }>;
+
+export interface ModalComponent<Component extends CustomComponent = CustomComponent> {
 	/** Import and provide your component reference. */
-	ref: any;
+	ref: (new (options: ComponentConstructorOptions<any>) => Component) & {
+		/** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
+		element?: typeof HTMLElement;
+	};
 	/** Provide component props as key/value pairs. */
-	props?: Record<string, unknown>;
+	props?: Omit<ComponentProps<Component>, 'parent'>;
 	/** Provide an HTML template literal for the default slot. */
 	slot?: string;
 }
 
-export interface ModalSettings {
+export interface ModalSettings<C extends CustomComponent = CustomComponent, R = any, M = any> {
 	/** Designate what type of component will display. */
 	type: 'alert' | 'confirm' | 'prompt' | 'component';
 	/** Set the modal position within the backdrop container. */
@@ -23,13 +55,13 @@ export interface ModalSettings {
 	/** Provide a URL to display an image within the modal. */
 	image?: string;
 	/** By default, used to provide a prompt value. */
-	value?: any;
+	value?: string;
 	/** Provide input attributes as key/value pairs. */
 	valueAttr?: object;
 	/** Provide your component reference key or object. */
-	component?: ModalComponent | string;
+	component?: ModalComponent<C> | string;
 	/** Provide a function. Returns the response value. */
-	response?: (r: any) => void;
+	response?: (r: R) => void;
 	/** Provide arbitrary classes to the backdrop. */
 	backdropClasses?: string;
 	/** Provide arbitrary classes to the modal window. */
@@ -41,5 +73,5 @@ export interface ModalSettings {
 	/** Override the Submit button label. */
 	buttonTextSubmit?: string;
 	/** Pass arbitrary data per modal instance. */
-	meta?: any;
+	meta?: M;
 }