@lavalogic/scoria 0.11.14 → 0.12.0

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

@@ -1,18 +1,4 @@
-import { type PartialIconProps } from './Icon.svelte';
-import type { FocusEventHandler, KeyboardEventHandler } from 'svelte/elements';
-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>;
-}
+import type { InputProps } from './InputProps.js';
 declare const PasswordInput: import("svelte").Component<InputProps, {}, "value" | "inputRef" | "showInput">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;

package/dist/Components/Portal.svelte

@@ -1,16 +1,10 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface PortalProps {
-		target?: HTMLElement;
-		children: Snippet;
-	}
-</script>
-
 <script lang="ts">
-	import { type Snippet } from 'svelte';
+	import { browser } from '$app/environment';
+	import type { PortalProps } from './PortalProps.js';
 
-	let { target = globalThis.document?.body, children }: PortalProps = $props();
+	let { target = browser ? globalThis.document.body : undefined, children }: PortalProps = $props();
 
 	let ref: HTMLElement | undefined = $state();
 

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

@@ -1,8 +1,4 @@
-export interface PortalProps {
-    target?: HTMLElement;
-    children: Snippet;
-}
-import { type Snippet } from 'svelte';
+import type { PortalProps } from './PortalProps.js';
 declare const Portal: import("svelte").Component<PortalProps, {}, "">;
 type Portal = ReturnType<typeof Portal>;
 export default Portal;

package/dist/Components/PortalProps.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+export interface PortalProps {
+    target?: HTMLElement;
+    children: Snippet;
+}

package/dist/Components/PortalProps.js

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

package/dist/Components/ProgressBubble.svelte

@@ -1,19 +1,12 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import { getCanvasContext } from '../Helpers/Helpers.svelte.js';
+<script lang="ts">
+	import { devCatch, getCanvasContext } from '../Helpers/Helpers.svelte.js';
 	import { tick } from 'svelte';
-	import type { BubbleColour } from './Bubble.svelte';
-
-	export interface BubbleProps {
-		value: [number, number];
+	import type { BubbleColour } from './BubbleColour.js';
+	import type { ProgressBubbleProps } from './ProgressBubbleProps.js';
 
-		colours?: BubbleColour | Promise<BubbleColour> | undefined;
-	}
-</script>
-
-<script lang="ts">
-	let { value, colours }: BubbleProps = $props();
+	let { value, colours }: ProgressBubbleProps = $props();
 
 	let current = $derived(value[0]);
 	// let current = $derived(37)
@@ -27,16 +20,18 @@
 	$effect(() => {
 		if (progress && progressBarRef) {
 			const oldRef = progressBarRef;
-			tick().then(() => {
-				if (oldRef === progressBarRef) {
-					const textWidth = getCanvasContext().measureText(`__${progress}__`).width;
-					const progresValueWidth = progressBarRef.getBoundingClientRect().width;
+			tick()
+				.then(() => {
+					if (oldRef === progressBarRef) {
+						const textWidth = getCanvasContext()?.measureText(`__${progress}__`).width ?? 0;
+						const progresValueWidth = progressBarRef.getBoundingClientRect().width;
 
-					fitsInProgressBar = progresValueWidth > textWidth;
-				} else {
-					fitsInProgressBar = false;
-				}
-			});
+						fitsInProgressBar = progresValueWidth > textWidth;
+					} else {
+						fitsInProgressBar = false;
+					}
+				})
+				.catch(devCatch);
 		}
 	});
 
@@ -49,7 +44,10 @@
 					.then((c) => {
 						awaitedColours = c;
 					})
-					.catch((awaitedColours = undefined));
+					.catch((e: unknown) => {
+						devCatch(e);
+						awaitedColours = undefined;
+					});
 			} else {
 				awaitedColours = colours;
 			}

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

@@ -1,8 +1,4 @@
-import type { BubbleColour } from './Bubble.svelte';
-export interface BubbleProps {
-    value: [number, number];
-    colours?: BubbleColour | Promise<BubbleColour> | undefined;
-}
-declare const ProgressBubble: import("svelte").Component<BubbleProps, {}, "">;
+import type { ProgressBubbleProps } from './ProgressBubbleProps.js';
+declare const ProgressBubble: import("svelte").Component<ProgressBubbleProps, {}, "">;
 type ProgressBubble = ReturnType<typeof ProgressBubble>;
 export default ProgressBubble;

package/dist/Components/ProgressBubbleProps.d.ts

@@ -0,0 +1,5 @@
+import type { BubbleColour } from './BubbleColour.js';
+export interface ProgressBubbleProps {
+    value: [number, number];
+    colours?: BubbleColour | Promise<BubbleColour> | undefined;
+}

package/dist/Components/ProgressBubbleProps.js

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

package/dist/Components/QuerySelect.svelte

@@ -5,10 +5,10 @@
 		labelProp: NonNullableKey<V>;
 		valueProp: VP;
 
-		query: (value: string) => Promise<V[]>;
+		query: (value: string) => Promise<Array<V>>;
 		onchange: (newValue: V | null) => void;
 
-		options?: V[];
+		options?: Array<V>;
 		name?: string;
 		disabled?: boolean;
 		width?: string;
@@ -37,7 +37,7 @@
 	> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
 		valueAsObject: false;
 		value: V[VP] | null;
-		options: V[];
+		options: Array<V>;
 	}
 
 	export type QuerySelectProps<V extends object, VP extends ValueProp<V>> =
@@ -49,19 +49,21 @@
 <script lang="ts" generics="V extends object, VP extends ValueProp<V>">
 	import { ToastContext } from '../Contexts/ToastContext.svelte.js';
 
+	import { dev } from '$app/environment';
 	import {
+		devCatch,
 		generateShortUUID,
 		getErrorMessage,
 		isErrorResponse,
 		vowels
 	} from '../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../scss/colours.js';
-	import Svelecte from 'svelecte';
-	import { getContext, onMount, tick, untrack } from 'svelte';
-	import Action from './Action.svelte';
+	import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import { Validity } from '../Types/Internal/Validity.js';
-	import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+	import Svelecte from 'svelecte';
+	import { getContext, onMount, type Snippet, tick, untrack } from 'svelte';
+	import Action from './Action.svelte';
 
 	let {
 		label,
@@ -79,7 +81,7 @@
 		focusOnLoad = false,
 		inputId = generateShortUUID(),
 		value: selectedValue,
-		options = $bindable<V[]>([]),
+		options = $bindable<Array<V>>([]),
 		isValid,
 		onchange,
 		onfocus
@@ -92,9 +94,9 @@
 		const searchValue = (input as HTMLInputElement).value;
 
 		const currentHandler = (timeoutHandler = setTimeout(() => {
-			tryQuery(currentHandler, searchValue);
+			tryQuery(currentHandler, searchValue).catch(devCatch);
 		}, 500) as unknown as number);
-		tryQuery(currentHandler, searchValue);
+		tryQuery(currentHandler, searchValue).catch(devCatch);
 	}
 
 	let ref: Svelecte | undefined = $state();
@@ -103,18 +105,29 @@
 	let isLoading = $state(false);
 	let hasRegisteredListeners = $state(false);
 
+	function isObjectValue(value: unknown): value is V {
+		return value !== null && typeof value == 'object' && labelProp in value && valueProp in value;
+	}
+
 	$effect.pre(() => {
 		void selectedValue;
 		untrack(() => {
 			if (selectedValue != null) {
 				if (valueAsObject) {
-					if (!options.some((opt: V) => opt[valueProp] === (selectedValue as V)[valueProp])) {
-						options.push(selectedValue! as V);
+					if (isObjectValue(selectedValue)) {
+						if (!options.some((opt: V) => opt[valueProp] === selectedValue[valueProp])) {
+							options.push(selectedValue);
+						}
+					} else if (dev) {
+						console.warn(`valueAsObject is true but the value doesn't match`, selectedValue);
+						return;
 					}
 				} else if (!options.some((opt: V) => opt[valueProp] === selectedValue)) {
 					options.push({
+						//best-effort solution. Not a good one
+						// eslint-disable-next-line @typescript-eslint/no-base-to-string
 						[labelProp]: selectedValue.toString(),
-						[valueProp as VP]: selectedValue
+						[valueProp]: selectedValue
 					} as V);
 				}
 			}
@@ -137,7 +150,7 @@
 		if (focusOnLoad && !hasAutoFocused) {
 			hasAutoFocused = true;
 
-			const input = e as HTMLInputElement;
+			const input = e;
 
 			input.click();
 
@@ -161,12 +174,20 @@
 		}
 	}
 
+	// HACK svelecte type shenanigans
+	function isFocusable(ref: unknown): ref is HTMLInputElement {
+		return ref != null;
+	}
+
 	onMount(() => {
 		if (focusOnLoad) {
-			tick().then(() => {
-				// FIXME uncomment
-				ref?.focus();
-			});
+			tick()
+				.then(() => {
+					if (isFocusable(ref)) {
+						ref.focus();
+					}
+				})
+				.catch(devCatch);
 		}
 
 		const input = document.getElementById(inputId);
@@ -179,16 +200,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 });
@@ -203,7 +222,7 @@
 
 	$effect(() => {
 		if (loadingDiv && isLoading) {
-			loadingDiv?.classList.add('is-loading');
+			loadingDiv.classList.add('is-loading');
 		} else {
 			loadingDiv?.classList.remove('is-loading');
 		}
@@ -215,12 +234,12 @@
 
 			const inputElement = e;
 
-			loadingDiv = inputElement?.parentElement?.parentElement?.nextElementSibling as
+			loadingDiv = inputElement.parentElement?.parentElement?.nextElementSibling as
 				| HTMLDivElement
 				| undefined;
 
 			const currentHandler = (timeoutHandler = setTimeout(() => {
-				tryQuery(currentHandler, '');
+				tryQuery(currentHandler, '').catch(devCatch);
 			}, 500) as unknown as number);
 
 			inputElement.addEventListener('input', (e) => {
@@ -229,23 +248,25 @@
 				const searchValue = (e.target as HTMLInputElement).value;
 
 				const currentHandler = (timeoutHandler = setTimeout(() => {
-					tryQuery(currentHandler, searchValue);
+					tryQuery(currentHandler, searchValue).catch(devCatch);
 				}, 500) as unknown as number);
 			});
 
 			inputElement.addEventListener('keydown', (e) => {
 				if (e.key === 'Enter') {
-					tick().then(() => {
-						const searchValue = (e.target as HTMLInputElement).value;
-						if (searchValue) {
-							// dispatch('search', { value: inputElement.value });
-							clearTimeout(timeoutHandler);
-
-							const currentHandler = (timeoutHandler = setTimeout(() => {
-								tryQuery(currentHandler, searchValue, true);
-							}, 1) as unknown as number);
-						}
-					});
+					tick()
+						.then(() => {
+							const searchValue = (e.target as HTMLInputElement).value;
+							if (searchValue) {
+								// dispatch('search', { value: inputElement.value });
+								clearTimeout(timeoutHandler);
+
+								const currentHandler = (timeoutHandler = setTimeout(() => {
+									tryQuery(currentHandler, searchValue, true).catch(devCatch);
+								}, 1) as unknown as number);
+							}
+						})
+						.catch(devCatch);
 				}
 			});
 		}
@@ -283,8 +304,8 @@
 		}
 	}
 
-	const an = $derived(vowels.has(name[0]?.toLocaleLowerCase()) ? 'an' : 'a');
-	let hidden = $state(false);
+	const an = $derived(vowels.has(name[0].toLocaleLowerCase()) ? 'an' : 'a');
+
 	let isExpanded = $state(false);
 </script>
 
@@ -328,13 +349,13 @@
 		lazyDropdown
 		{valueAsObject}
 		{options}
-		value={selectedValue as any[]}
+		value={selectedValue as Array<unknown>}
 		{onChange}
 		selectOnTab
 		deselectMode={required && !clearable ? 'none' : 'toggle'}
 		keepSelectionInList
 		{name}
-		{selection}
+		selection={selection as (selectedOptions: Array<object>) => ReturnType<Snippet>}
 		{append}
 	>
 		{#snippet toggleIcon()}
@@ -353,7 +374,7 @@
 					noTabIndex
 					colourSet={ColourSet.Auxiliary}
 					size={Size.Small}
-					onclick={(e) => {
+					onclick={(e: MouseEvent) => {
 						if (isExpanded) {
 							e.stopPropagation();
 						}
@@ -380,11 +401,11 @@
 		</div>
 	{/snippet}
 
-	{#snippet selection(selectedOptions: Array<object>)}
+	{#snippet selection(selectedOptions: Array<V>)}
 		{#if selectedOptions.length == 0}
-			<span class="selection" class:hidden>Please Select {an} {name}</span>
+			<span class="selection">Please Select {an} {name}</span>
 		{:else}
-			<span class="selection">{(selectedOptions as V[])[0][labelProp]}</span>
+			<span class="selection">{selectedOptions[0][labelProp]}</span>
 		{/if}
 	{/snippet}
 </div>

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

@@ -1,9 +1,9 @@
 interface QuerySelectPropsAsObjectCommonProps<V extends object, VP extends ValueProp<V>> {
     labelProp: NonNullableKey<V>;
     valueProp: VP;
-    query: (value: string) => Promise<V[]>;
+    query: (value: string) => Promise<Array<V>>;
     onchange: (newValue: V | null) => void;
-    options?: V[];
+    options?: Array<V>;
     name?: string;
     disabled?: boolean;
     width?: string;
@@ -24,7 +24,7 @@ export interface QuerySelectPropsAsObject<V extends object, VP extends ValueProp
 export interface QuerySelectPropsAsPrimitive<V extends object, VP extends ValueProp<V>> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
     valueAsObject: false;
     value: V[VP] | null;
-    options: V[];
+    options: Array<V>;
 }
 export type QuerySelectProps<V extends object, VP extends ValueProp<V>> = QuerySelectPropsAsObject<V, VP> | QuerySelectPropsAsPrimitive<V, VP>;
 import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';

package/dist/Components/SingleSelect.svelte

@@ -1,64 +1,15 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import { generateShortUUID, vowels } from '../Helpers/Helpers.svelte.js';
+<script lang="ts" generics="V extends object, VP extends ValueProp<V>">
+	import { devCatch, generateShortUUID, vowels } from '../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../scss/colours.js';
-	import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+	import type { ValueProp } from '../Types/Internal/Misc.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import Svelecte from 'svelecte';
 	import { onMount, tick } from 'svelte';
 	import Action from './Action.svelte';
+	import type { SingleSelectProps } from './SingleSelectProps.js';
 
-	interface SingleSelectCommonProps<V extends object, VP extends ValueProp<V>> {
-		options: V[];
-
-		labelProp: NonNullableKey<V>;
-		valueProp: VP;
-		// value: V | V[VP] | null;
-
-		onchange: (newValue: V | null) => void;
-
-		name?: string;
-		width?: string;
-		height?: string;
-		label?: string;
-		minHeight?: string;
-		focusOnLoad?: boolean;
-		searchable?: boolean;
-		creatable?: boolean;
-		onCreateOption?: (option: V) => void;
-		virtual?: boolean;
-		clearable?: boolean;
-		disabled?: boolean;
-		borderless?: boolean;
-		forceUpwards?: boolean;
-		lazyDropdown?: boolean;
-		required?: boolean;
-		invalid?: boolean;
-		inputId?: string;
-		createFilter?: (value: string) => boolean;
-		onkeydown?: (e: KeyboardEvent) => void;
-		onfocus?: (target: HTMLInputElement) => void;
-	}
-
-	export interface SingleSelectPropsAsObject<V extends object, VP extends ValueProp<V>>
-		extends SingleSelectCommonProps<V, VP> {
-		valueAsObject: true;
-		value: V | null;
-	}
-
-	export interface SingleSelectPropsAsPrimitive<V extends object, VP extends ValueProp<V>>
-		extends SingleSelectCommonProps<V, VP> {
-		valueAsObject: false;
-		value: V[VP] | null;
-	}
-
-	export type SingleSelectProps<V extends object, VP extends ValueProp<V>> =
-		| SingleSelectPropsAsPrimitive<V, VP>
-		| SingleSelectPropsAsObject<V, VP>;
-</script>
-
-<script lang="ts" generics="V extends object, VP extends ValueProp<V>">
 	const {
 		label,
 		options,
@@ -67,7 +18,7 @@
 		focusOnLoad = false,
 		searchable = true,
 		creatable = false,
-		virtual = false,
+
 		createFilter,
 		disabled,
 		width,
@@ -84,14 +35,15 @@
 		inputId = generateShortUUID(),
 		value: selectedValue,
 		onchange,
-		onkeydown,
+		// onkeydown, // TODO
 		onfocus,
 		onCreateOption
 	}: SingleSelectProps<V, VP> = $props();
 
 	// FIXME this in combination with the effect may trigger a double assignment on mount. We will need to test it.
-	let currentValue: V | V[VP] | null = $state(selectedValue);
-	let ref: Svelecte | undefined = $state();
+
+	let currentValue = $derived(selectedValue);
+	let ref = $state<Svelecte | undefined>();
 	let wrapperRef: HTMLDivElement | undefined = $state();
 
 	$effect.pre(() => {
@@ -113,7 +65,7 @@
 	// 	}
 	// });
 
-	const an = $derived(name && vowels.has(name[0]?.toLocaleLowerCase()) ? 'an' : 'a');
+	const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? '') ? 'an' : 'a');
 
 	const isInvalid = $derived((required && !currentValue) || invalid);
 
@@ -152,10 +104,11 @@
 
 	onMount(() => {
 		if (focusOnLoad) {
-			tick().then(() => {
-				// FIXME uncomment
-				ref?.focus();
-			});
+			tick()
+				.then(() => {
+					(ref as HTMLSelectElement | undefined)?.focus();
+				})
+				.catch(devCatch);
 		}
 
 		const input = document.getElementById(inputId);
@@ -168,11 +121,11 @@
 
 		// HACK callback for is-open on/off
 		const dropdownRef = input?.closest('div.svelecte')?.querySelector('.sv_dropdown') ?? undefined;
-		const observer = new MutationObserver((mutations: MutationRecord[]) => {
+		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;
+					isExpanded = dropdownRef?.classList.contains('is-open') ?? false;
 				}
 			}
 		});
@@ -194,12 +147,16 @@
 	// 		currentValue = selectedValue;
 	// 	}
 	// }
+
+	function isObject(value: SingleSelectProps<V, VP>['value']): value is V | null {
+		return typeof value == 'object';
+	}
 </script>
 
 <div
 	class="select-wrapper"
 	class:no-border={borderless}
-	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}--dropdown-bottom: calc(${dropdownBottom}px + 1px);${`--sv-min-height: ${minHeight ?? '2rem'};`}`}
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''} --dropdown-bottom: calc(${dropdownBottom}px + 1px); --sv-min-height: ${minHeight ?? '2rem'};`}
 	class:invalid={isInvalid}
 	class:force-upwards={forceUpwards}
 	bind:this={wrapperRef}
@@ -237,7 +194,7 @@
 		placeholder="Please Select {name ? `${an} ${name}` : ''}"
 		{lazyDropdown}
 		value={// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		currentValue as any[]}
+		currentValue as Array<any>}
 		onChange={onchange}
 		{searchable}
 		selectOnTab
@@ -251,7 +208,7 @@
 				{#if clearable && currentValue}
 					<Action
 						noTabIndex
-						onclick={(e) => {
+						onclick={(e: MouseEvent) => {
 							if (isExpanded) {
 								e.stopPropagation();
 							}
@@ -286,13 +243,13 @@
 				<Icon name="chevron-down" size={Size.MediumSmall} />
 			</div> -->
 		{/snippet}
-		<!--  eslint-disable-next-line @typescript-eslint/no-explicit-any  -->
-		{#snippet selection(selectedOptions: Array<any>)}
+
+		{#snippet selection(/*_selectedOptions: Array<any>*/)}
 			<!-- <span class="selection">hello</span> -->
 
 			<span class="selection" class:invalid={isInvalid}>
-				{#if typeof selectedValue == 'object'}
-					{(selectedValue as V | null)?.[labelProp]}
+				{#if isObject(selectedValue)}
+					{selectedValue?.[labelProp]}
 				{:else}
 					{options.find((it) => it[valueProp] === selectedValue)?.[labelProp]}
 				{/if}

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

@@ -1,40 +1,5 @@
-import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
-interface SingleSelectCommonProps<V extends object, VP extends ValueProp<V>> {
-    options: V[];
-    labelProp: NonNullableKey<V>;
-    valueProp: VP;
-    onchange: (newValue: V | null) => void;
-    name?: string;
-    width?: string;
-    height?: string;
-    label?: string;
-    minHeight?: string;
-    focusOnLoad?: boolean;
-    searchable?: boolean;
-    creatable?: boolean;
-    onCreateOption?: (option: V) => void;
-    virtual?: boolean;
-    clearable?: boolean;
-    disabled?: boolean;
-    borderless?: boolean;
-    forceUpwards?: boolean;
-    lazyDropdown?: boolean;
-    required?: boolean;
-    invalid?: boolean;
-    inputId?: string;
-    createFilter?: (value: string) => boolean;
-    onkeydown?: (e: KeyboardEvent) => void;
-    onfocus?: (target: HTMLInputElement) => void;
-}
-export interface SingleSelectPropsAsObject<V extends object, VP extends ValueProp<V>> extends SingleSelectCommonProps<V, VP> {
-    valueAsObject: true;
-    value: V | null;
-}
-export interface SingleSelectPropsAsPrimitive<V extends object, VP extends ValueProp<V>> extends SingleSelectCommonProps<V, VP> {
-    valueAsObject: false;
-    value: V[VP] | null;
-}
-export type SingleSelectProps<V extends object, VP extends ValueProp<V>> = SingleSelectPropsAsPrimitive<V, VP> | SingleSelectPropsAsObject<V, VP>;
+import type { ValueProp } from '../Types/Internal/Misc.js';
+import type { SingleSelectProps } from './SingleSelectProps.js';
 declare function $$render<V extends object, VP extends ValueProp<V>>(): {
     props: SingleSelectProps<V, VP>;
     exports: {};