@lavalogic/scoria 0.11.14 → 0.12.0

package/dist/Components/InputProps.d.ts

@@ -0,0 +1,15 @@
+import type { FocusEventHandler, KeyboardEventHandler } from 'svelte/elements';
+import type { PartialIconProps } from './PartialIconProps.js';
+export interface InputProps {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    showInput?: boolean;
+    leftIcon?: PartialIconProps;
+    inputRef?: HTMLInputElement | undefined;
+    onblur?: FocusEventHandler<HTMLInputElement>;
+    onfocus?: FocusEventHandler<HTMLInputElement>;
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+}

package/dist/Components/InputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/LoadingModal.svelte

@@ -12,7 +12,7 @@
 
 	let { showModal, message }: LoadingModalProps = $props();
 
-	let dialog: HTMLDialogElement;
+	let dialog: HTMLDialogElement | undefined;
 
 	$effect(() => {
 		if (dialog && showModal) {
@@ -21,7 +21,7 @@
 	});
 
 	$effect(() => {
-		if (showModal == false && dialog) dialog.close?.();
+		if (!showModal && dialog) dialog.close();
 	});
 
 	function uncloseable(

package/dist/Components/Modal.svelte

@@ -1,19 +1,15 @@
 <svelte:options runes />
 
 <script module lang="ts">
-	import { onMount, tick, type Snippet } from 'svelte';
-	import Action from './Action.svelte';
 	import { DATAMatrix } from '../Helpers/Datamatrix.js';
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { devCatch, passthrough } from '../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../scss/colours.js';
+	import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
 	import { Size } from '../Types/Internal/Size.js';
+	import { onMount, tick, type Snippet } from 'svelte';
+	import Action from './Action.svelte';
 	import DataMatrixIcon from './DataMatrixIcon.svelte';
-	import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
-
-	export interface DefaultTimer {
-		time: number;
-		action: 'submit' | 'close';
-	}
+	import type { DefaultTimer } from './Touch/DefaultTimer.js';
 
 	export interface ModalProps {
 		header: string | Snippet;
@@ -21,7 +17,7 @@
 		onclose?: () => void;
 
 		onsubmit?: ((e: SubmitEvent) => void) | undefined;
-		buttons?: ButtonProp[];
+		buttons?: Array<ButtonProp>;
 		mandatory?: boolean | undefined;
 		staticHeight?: boolean | undefined;
 		staticWidth?: boolean | undefined;
@@ -64,19 +60,22 @@
 		onclose
 	}: ModalProps = $props();
 
-	let dialog: HTMLDialogElement;
+	let dialog: HTMLDialogElement | undefined;
 	let form: HTMLFormElement;
 	let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
 	let paused = $state(false);
 
 	$effect(() => {
-		if (dialog) {
-			// HACK tick helps with Portal shenanigans. will be removed if a better solution comes up
-			tick().then(() => {
-				dialog.showModal();
-				onShowCallback?.();
-			});
-		}
+		void dialog;
+		// HACK tick helps with Portal shenanigans. will be removed if a better solution comes up
+		tick()
+			.then(() => {
+				if (dialog) {
+					dialog.showModal();
+					onShowCallback?.();
+				}
+			})
+			.catch(devCatch);
 	});
 
 	let isActive = false;
@@ -87,10 +86,10 @@
 		if (defaultTimer) {
 			timeout = setTimeout(() => {
 				if (dialog && dialog.open) {
-					if (defaultTimer!.action === 'submit') {
-						form?.requestSubmit();
+					if (defaultTimer.action === 'submit') {
+						form.requestSubmit();
 					} else {
-						dialog?.close();
+						dialog.close();
 					}
 				}
 			}, defaultTimer.time);
@@ -112,14 +111,14 @@
 		if (e.key === 'Escape') {
 			e.preventDefault();
 			if (!mandatory) {
-				dialog.close();
+				dialog?.close();
 			}
 		}
 	}
 </script>
 
 <dialog
-	style="--timer: {defaultTimer && defaultTimer?.time + 'ms'}; {minWidth &&
+	style="--timer: {defaultTimer && defaultTimer.time.toString() + 'ms'}; {minWidth &&
 		`--dialog-min-width: ${minWidth};`} {minHeight &&
 		`--dialog-min-height: ${minHeight};`} {height && `--dialog-height: ${height};`} {width &&
 		`--dialog-width: ${width};`}"
@@ -157,7 +156,7 @@
 						<div class="close-button">
 							<Action
 								size={Size.DoubleXLarge}
-								onclick={() => dialog.close()}
+								onclick={() => dialog?.close()}
 								icon={{
 									name: 'cross'
 								}}
@@ -173,7 +172,7 @@
 			{/if}
 
 			{#if headerExtra}
-				{@render headerExtra?.()}
+				{@render headerExtra()}
 			{/if}
 		</div>
 

package/dist/Components/Modal.svelte.d.ts

@@ -1,15 +1,12 @@
-import { type Snippet } from 'svelte';
 import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
-export interface DefaultTimer {
-    time: number;
-    action: 'submit' | 'close';
-}
+import { type Snippet } from 'svelte';
+import type { DefaultTimer } from './Touch/DefaultTimer.js';
 export interface ModalProps {
     header: string | Snippet;
     children: Snippet;
     onclose?: () => void;
     onsubmit?: ((e: SubmitEvent) => void) | undefined;
-    buttons?: ButtonProp[];
+    buttons?: Array<ButtonProp>;
     mandatory?: boolean | undefined;
     staticHeight?: boolean | undefined;
     staticWidth?: boolean | undefined;

package/dist/Components/MultiSelect.svelte

@@ -1,53 +1,15 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import { onMount } from 'svelte';
-
-	export interface commonProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> {
-		options: V[];
-		name?: string;
-		labelProp: NonNullableKey<V>;
-		valueProp: string & keyof V;
-		disabled?: boolean;
-		required?: boolean;
-		invalid?: boolean;
-		label?: string;
-		inputId?: string;
-		width?: string;
-		height?: string;
-		onchange: (e: V[]) => void;
-		collapseSelection?: boolean;
-	}
-
-	export interface MultiSelectPropsAsObject<
-		V extends object,
-		VP extends ValueProp<V> = ValueProp<V>
-	> extends commonProps<V, VP> {
-		valueAsObject: true;
-		selectedValues: V[];
-	}
-
-	export interface MultiSelectPropsAsPrimitive<
-		V extends object,
-		VP extends ValueProp<V> = ValueProp<V>
-	> extends commonProps<V, VP> {
-		valueAsObject: false;
-		selectedValues: Array<V[VP]>;
-	}
-
-	export type MultiSelectProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> =
-		| MultiSelectPropsAsPrimitive<V, VP>
-		| MultiSelectPropsAsObject<V, VP>;
-</script>
-
-<script lang="ts" generics="T extends object">
-	import Svelecte from 'svelecte';
+<script lang="ts" generics="V extends object, VP extends ValueProp<V>">
 	import { autoPluralise, generateShortUUID, vowels } from '../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import type { ValueProp } from '../Types/Internal/Misc.js';
 	import { Size } from '../Types/Internal/Size.js';
+	import Svelecte from 'svelecte';
+	import { onMount } from 'svelte';
 	import Action from './Action.svelte';
 	import Icon from './Icon.svelte';
-	import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+	import type { MultiSelectProps } from './MultiSelectProps.js';
 
 	// HACK selectedValues is mutated by svelecte without asking, so we sometimes have to reverse it without a callback (side effects)
 	let {
@@ -66,9 +28,9 @@
 		disabled,
 		required,
 		invalid
-	}: MultiSelectProps<T> = $props();
+	}: MultiSelectProps<V, VP> = $props();
 
-	const an = $derived(name && vowels.has(name[0]?.toLocaleLowerCase()) ? 'an' : 'a');
+	const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? '') ? 'an' : 'a');
 
 	const hidden = $state(false);
 
@@ -83,16 +45,14 @@
 
 		// HACK callback for is-open on/off
 		const dropdownRef = input?.closest('div.svelecte')?.querySelector('.sv_dropdown') ?? undefined;
-		const observer = new MutationObserver(
-			(mutations: MutationRecord[], observer: MutationObserver) => {
-				for (let i = mutations.length - 1; i > -1; i--) {
-					const mutation = mutations[i];
-					if (mutation.attributeName === 'class') {
-						isExpanded = dropdownRef?.classList?.contains('is-open') ?? false;
-					}
+		const observer = new MutationObserver((mutations: Array<MutationRecord>) => {
+			for (let i = mutations.length - 1; i > -1; i--) {
+				const mutation = mutations[i];
+				if (mutation.attributeName === 'class') {
+					isExpanded = dropdownRef?.classList.contains('is-open') ?? false;
 				}
 			}
-		);
+		});
 
 		if (dropdownRef) {
 			observer.observe(dropdownRef, { attributes: true });
@@ -107,9 +67,13 @@
 
 	const isInvalid = $derived((required && !selectedValues.length) || invalid);
 
-	function usesValuesAsObjects(values: T[] | T[ValueProp<T>][]): values is T[] {
+	function usesValuesAsObjects(_values: Array<V> | Array<V[VP]>): _values is Array<V> {
 		return valueAsObject;
 	}
+
+	function usesValuesAsPrimitives(_values: Array<V> | Array<V[VP]>): _values is Array<V[VP]> {
+		return !valueAsObject;
+	}
 </script>
 
 <div
@@ -123,6 +87,7 @@
 			<span class="border">{label}</span>
 		</label>
 	{/if}
+
 	<Svelecte
 		multiple
 		{valueAsObject}
@@ -133,7 +98,7 @@
 		{options}
 		searchable
 		value={selectedValues}
-		onChange={(e: T[]) => {
+		onChange={(e: Array<V>) => {
 			onchange(e);
 		}}
 		{name}
@@ -147,20 +112,25 @@
 		placeholder="Please Select {name ? `${an} ${name}` : ''}"
 		selection={collapseSelection ? selection : undefined}
 	>
-		{#snippet option(opt)}<span class="dropdown-item">
+		{#snippet option(opt)}
+			{@const option = opt as V}
+			<span class="dropdown-item">
 				<div
 					class="toggle-icon"
 					class:yes={usesValuesAsObjects(selectedValues)
-						? selectedValues.findIndex((v) => v[valueProp] === (opt as T)[valueProp]) > -1
-						: selectedValues.findIndex((v) => v === (opt as T)[valueProp]) > -1}
+						? selectedValues.findIndex((v) => v[valueProp] === option[valueProp]) > -1
+						: usesValuesAsPrimitives(selectedValues)
+							? (selectedValues as Array<V[VP]>).findIndex((v: V[VP]) => v === option[valueProp]) >
+								-1
+							: false}
 				>
 					<Icon name="tick" size={Size.MediumSmall} />
 				</div>
-				{(opt as T)[labelProp]}</span
+				{option[labelProp]}</span
 			>
 		{/snippet}
 
-		{#snippet collapsedSelection(selectedOptions, i18n)}
+		{#snippet collapsedSelection(selectedOptions: Array<object> /*_i18n*/)}
 			<span class="selection" class:hidden
 				>{#if selectedOptions.length}{selectedOptions.length}
 					{#if name}{autoPluralise(name, selectedOptions.length)}{/if} Selected
@@ -177,23 +147,15 @@
 					size={Size.Small}
 					noTabIndex
 					colourSet={ColourSet.Auxiliary}
-					onclick={(e) => {
+					onclick={(e: MouseEvent) => {
 						if (isExpanded) {
 							e.stopPropagation();
 						}
 
 						if (selectedValues.length) {
-							if (onchange) {
-								onchange([]);
-							} else {
-								selectedValues = [];
-							}
+							onchange([]);
 						} else {
-							if (onchange) {
-								onchange(options.concat());
-							} else {
-								selectedValues = options.concat();
-							}
+							onchange(options.concat());
 						}
 					}}
 					icon={{
@@ -222,7 +184,7 @@
 		{/snippet}
 	</Svelecte>
 
-	{#snippet selection(selectedOptions: unknown[])}
+	{#snippet selection(/*_selectedOptions: Array<unknown>*/)}
 		<!-- {#if selectedOptions.length === 0}
 			<span class="selection" class:hidden
 				>Please Select {#if objectName}

package/dist/Components/MultiSelect.svelte.d.ts

@@ -1,49 +1,26 @@
-export interface commonProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> {
-    options: V[];
-    name?: string;
-    labelProp: NonNullableKey<V>;
-    valueProp: string & keyof V;
-    disabled?: boolean;
-    required?: boolean;
-    invalid?: boolean;
-    label?: string;
-    inputId?: string;
-    width?: string;
-    height?: string;
-    onchange: (e: V[]) => void;
-    collapseSelection?: boolean;
-}
-export interface MultiSelectPropsAsObject<V extends object, VP extends ValueProp<V> = ValueProp<V>> extends commonProps<V, VP> {
-    valueAsObject: true;
-    selectedValues: V[];
-}
-export interface MultiSelectPropsAsPrimitive<V extends object, VP extends ValueProp<V> = ValueProp<V>> extends commonProps<V, VP> {
-    valueAsObject: false;
-    selectedValues: Array<V[VP]>;
-}
-export type MultiSelectProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> = MultiSelectPropsAsPrimitive<V, VP> | MultiSelectPropsAsObject<V, VP>;
-import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
-declare function $$render<T extends object>(): {
-    props: MultiSelectProps<T>;
+import type { ValueProp } from '../Types/Internal/Misc.js';
+import type { MultiSelectProps } from './MultiSelectProps.js';
+declare function $$render<V extends object, VP extends ValueProp<V>>(): {
+    props: MultiSelectProps<V, VP>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
+    props(): ReturnType<typeof $$render<V, VP>>['props'];
+    events(): ReturnType<typeof $$render<V, VP>>['events'];
+    slots(): ReturnType<typeof $$render<V, VP>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <V extends object, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V extends object, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const MultiSelect: $$IsomorphicComponent;
-type MultiSelect<T extends object> = InstanceType<typeof MultiSelect<T>>;
+type MultiSelect<V extends object, VP extends ValueProp<V>> = InstanceType<typeof MultiSelect<V, VP>>;
 export default MultiSelect;

package/dist/Components/MultiSelectCommonProps.d.ts

@@ -0,0 +1,16 @@
+import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+export interface MultiSelectCommonProps<V extends object, VP extends ValueProp<V>> {
+    options: Array<V>;
+    name?: string;
+    labelProp: NonNullableKey<V>;
+    valueProp: VP;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    label?: string;
+    inputId?: string;
+    width?: string;
+    height?: string;
+    onchange: (e: Array<V>) => void;
+    collapseSelection?: boolean;
+}

package/dist/Components/MultiSelectCommonProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/MultiSelectProps.d.ts

@@ -0,0 +1,4 @@
+import type { ValueProp } from '../Types/Internal/Misc.js';
+import type { MultiSelectPropsAsObject } from './MultiSelectPropsAsObject.js';
+import type { MultiSelectPropsAsPrimitive } from './MultiSelectPropsAsPrimitive.js';
+export type MultiSelectProps<V extends object, VP extends ValueProp<V> = ValueProp<V>> = MultiSelectPropsAsPrimitive<V, VP> | MultiSelectPropsAsObject<V, VP>;

package/dist/Components/MultiSelectProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/MultiSelectPropsAsObject.d.ts

@@ -0,0 +1,6 @@
+import type { ValueProp } from '../Types/Internal/Misc.js';
+import type { MultiSelectCommonProps } from './MultiSelectCommonProps.js';
+export interface MultiSelectPropsAsObject<V extends object, VP extends ValueProp<V>> extends MultiSelectCommonProps<V, VP> {
+    valueAsObject: true;
+    selectedValues: Array<V>;
+}

package/dist/Components/MultiSelectPropsAsObject.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/MultiSelectPropsAsPrimitive.d.ts

@@ -0,0 +1,6 @@
+import type { ValueProp } from '../Types/Internal/Misc.js';
+import type { MultiSelectCommonProps } from './MultiSelectCommonProps.js';
+export interface MultiSelectPropsAsPrimitive<V extends object, VP extends ValueProp<V>> extends MultiSelectCommonProps<V, VP> {
+    valueAsObject: false;
+    selectedValues: Array<V[VP]>;
+}

package/dist/Components/MultiSelectPropsAsPrimitive.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/NumberInput.svelte

@@ -1,41 +1,10 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon, { type PartialIconProps } from './Icon.svelte';
-	import type { FormEventHandler } from 'svelte/elements';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-
-	export interface NumberInputProps {
-		value: number | null;
-
-		optional?: boolean;
-		id?: string | undefined;
-		min?: number | undefined;
-		max?: number | undefined;
-		labelTop?: string | undefined;
-		labelRight?: string | undefined;
-		placeholder?: string | undefined;
-		required?: boolean;
-		variant?: InputVariant;
-		decimal?: boolean;
-		invalid?: boolean;
-		showErrorColours?: boolean;
-		disabled?: boolean | undefined;
-		leftIcon?: PartialIconProps | undefined;
-		rightIcon?: PartialIconProps | undefined;
-		onLeftIconClick?: ((e: MouseEvent) => void) | undefined;
-		onRightIconClick?: ((e: MouseEvent) => void) | undefined;
-		inputRef?: HTMLInputElement | undefined;
-		'data-type'?: string;
-		onblur?: (e: FocusEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-		onkeydown?: (e: KeyboardEvent) => void;
-		oninput?: FormEventHandler<HTMLInputElement>;
-	}
-</script>
-
 <script lang="ts">
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { NumberInputProps } from './NumberInputProps.js';
 	let {
 		id,
 		value = $bindable(), // FIXME why is undefined allowed here?
@@ -65,13 +34,15 @@
 		'data-type': dataType
 	}: NumberInputProps = $props();
 
-	function numberValidator(node: HTMLInputElement, newValue: number | null) {
+	// HACK cannot alter signature because it's passed by a use: directive
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	function numberValidator(_node: HTMLInputElement, _newValue: number | null) {
 		return {
 			update(newValue: number) {
 				const underMinimum = min != undefined && min > newValue;
 				const overMaximum = max != undefined && max < newValue;
 
-				value = isNaN(newValue) ? 0 : underMinimum ? min! : overMaximum ? max! : newValue;
+				value = isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue;
 			}
 		};
 	}

package/dist/Components/NumberInput.svelte.d.ts

@@ -1,32 +1,4 @@
-import { type PartialIconProps } from './Icon.svelte';
-import type { FormEventHandler } from 'svelte/elements';
-import { InputVariant } from '../Types/Internal/InputVariant.js';
-export interface NumberInputProps {
-    value: number | null;
-    optional?: boolean;
-    id?: string | undefined;
-    min?: number | undefined;
-    max?: number | undefined;
-    labelTop?: string | undefined;
-    labelRight?: string | undefined;
-    placeholder?: string | undefined;
-    required?: boolean;
-    variant?: InputVariant;
-    decimal?: boolean;
-    invalid?: boolean;
-    showErrorColours?: boolean;
-    disabled?: boolean | undefined;
-    leftIcon?: PartialIconProps | undefined;
-    rightIcon?: PartialIconProps | undefined;
-    onLeftIconClick?: ((e: MouseEvent) => void) | undefined;
-    onRightIconClick?: ((e: MouseEvent) => void) | undefined;
-    inputRef?: HTMLInputElement | undefined;
-    'data-type'?: string;
-    onblur?: (e: FocusEvent) => void;
-    onfocus?: (e: FocusEvent) => void;
-    onkeydown?: (e: KeyboardEvent) => void;
-    oninput?: FormEventHandler<HTMLInputElement>;
-}
+import type { NumberInputProps } from './NumberInputProps.js';
 declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "value" | "inputRef">;
 type NumberInput = ReturnType<typeof NumberInput>;
 export default NumberInput;

package/dist/Components/NumberInputProps.d.ts

@@ -0,0 +1,29 @@
+import type { InputVariant } from '../Types/Internal/InputVariant.js';
+import type { FormEventHandler } from 'svelte/elements';
+import type { PartialIconProps } from './PartialIconProps.js';
+export interface NumberInputProps {
+    value: number | null;
+    optional?: boolean;
+    id?: string | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    labelTop?: string | undefined;
+    labelRight?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean;
+    variant?: InputVariant;
+    decimal?: boolean;
+    invalid?: boolean;
+    showErrorColours?: boolean;
+    disabled?: boolean | undefined;
+    leftIcon?: PartialIconProps | undefined;
+    rightIcon?: PartialIconProps | undefined;
+    onLeftIconClick?: ((e: MouseEvent) => void) | undefined;
+    onRightIconClick?: ((e: MouseEvent) => void) | undefined;
+    inputRef?: HTMLInputElement | undefined;
+    'data-type'?: string;
+    onblur?: (e: FocusEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    oninput?: FormEventHandler<HTMLInputElement>;
+}

package/dist/Components/NumberInputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/PartialIconProps.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from './IconProps.js';
+export interface PartialIconProps extends Partial<IconProps> {
+    name: IconProps['name'];
+}

package/dist/Components/PartialIconProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/PasswordInput.svelte

@@ -1,29 +1,11 @@
 <svelte:options runes />
 
-<script module lang="ts">
-	import Icon, { type PartialIconProps } from './Icon.svelte';
-	import type { FocusEventHandler, KeyboardEventHandler } from 'svelte/elements';
-	import Action from './Action.svelte';
+<script lang="ts">
 	import { ColourSet } from '../scss/colours.js';
 	import { Size } from '../Types/Internal/Size.js';
-
-	export interface InputProps {
-		value?: string;
-		label?: string;
-		placeholder?: string;
-		required?: boolean;
-		disabled?: boolean;
-		showInput?: boolean;
-		leftIcon?: PartialIconProps;
-		inputRef?: HTMLInputElement | undefined;
-
-		onblur?: FocusEventHandler<HTMLInputElement>;
-		onfocus?: FocusEventHandler<HTMLInputElement>;
-		onkeydown?: KeyboardEventHandler<HTMLInputElement>;
-	}
-</script>
-
-<script lang="ts">
+	import Action from './Action.svelte';
+	import Icon from './Icon.svelte';
+	import type { InputProps } from './InputProps.js';
 	let {
 		value = $bindable(''),
 		label = undefined,