rename ComboboxItem -> ComboboxOption

src/lib/Combobox.svelte

@@ -1,16 +1,16 @@
 <script lang="ts" module>
-	export type ComboboxItem = {
+	export type ComboboxOption = {
 		value: string;
 		label?: string;
 		infotext?: string;
 		preview?: string;
 		disabled?: boolean;
-		icon?: Snippet<[item: ComboboxItem]>;
+		icon?: Snippet<[item: ComboboxOption]>;
-		render?: Snippet<[item: ComboboxItem]>;
+		render?: Snippet<[item: ComboboxOption]>;
 	};
 
-	const getLabel = (item: ComboboxItem | undefined): string => item?.label ?? item?.value ?? '';
+	const getLabel = (item: ComboboxOption | undefined): string => item?.label ?? item?.value ?? '';
-	const getPreview = (item: ComboboxItem | undefined): string => item?.preview ?? getLabel(item);
+	const getPreview = (item: ComboboxOption | undefined): string => item?.preview ?? getLabel(item);
 </script>
 
 <script lang="ts">
@@ -29,24 +29,24 @@
 
 	interface Props {
 		name?: string;
-		value?: ComboboxItem;
+		value?: ComboboxOption;
 		open?: boolean;
 		usePreview?: boolean | 'auto';
 		matchWidth?: boolean;
-		options: ComboboxItem[];
+		options: ComboboxOption[];
 		required?: boolean;
-		invalidMessage?: string;
+		invalidMessage?: string | null;
 		label?: string;
 		placeholder?: string;
 		notFoundMessage?: string;
 		class?: ClassValue | null | undefined;
 		onvalidate?: (e: InputValidatorEvent) => void;
-		onchange?: (item: ComboboxItem) => void;
+		onchange?: (item: ComboboxOption) => void;
 	}
 
 	let {
 		name,
-		value = $bindable<ComboboxItem | undefined>(undefined),
+		value = $bindable<ComboboxOption | undefined>(undefined),
 		open = $bindable(false),
 		usePreview = 'auto',
 		matchWidth = false,
@@ -78,7 +78,7 @@
 			: options.filter((item) => getLabel(item).toLowerCase().includes(searchValue.toLowerCase()))
 	);
 
-	let highlighted = $derived.by((): ComboboxItem | undefined => {
+	let highlighted = $derived.by((): ComboboxOption | undefined => {
 		if (filteredItems.length === 0) return undefined;
 		if (value !== undefined && filteredItems.find((v) => v.value === value?.value)) return value;
 		return filteredItems[0];
@@ -98,7 +98,10 @@
 		return filteredItems.findIndex((item) => item.value === highlighted?.value);
 	};
 
-	const minWidth: Action<HTMLDivElement, { options: ComboboxItem[] }> = (container, buildOpts) => {
+	const minWidth: Action<HTMLDivElement, { options: ComboboxOption[] }> = (
+		container,
+		buildOpts
+	) => {
 		const f = (opts: typeof buildOpts) => {
 			if (matchWidth && searchInput) {
 				container.style.width = searchInput.scrollWidth + 'px';
@@ -348,9 +351,11 @@
 	</div>
 
 	<!-- Error message if invalid -->
-	<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
+	{#if invalidMessage !== null}
-		<Label for={id} error>{invalidMessage}</Label>
+		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
-	</div>
+			<Label for={id} error>{invalidMessage}</Label>
+		</div>
+	{/if}
 </div>
 
 {#snippet searchInputBox(caret: boolean = true)}

src/lib/PhoneInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Label from './Label.svelte';
 	import { Country, type ICountry } from 'country-state-city';
-	import Combobox, { type ComboboxItem } from './Combobox.svelte';
+	import Combobox, { type ComboboxOption } from './Combobox.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
 	import { AsYouType, type PhoneNumber, type CountryCode } from 'libphonenumber-js';
 	import { generateIdentifier } from './util';
@@ -32,7 +32,7 @@
 	const id = $derived(generateIdentifier('phone-input', name));
 	let lastRawValue = $state('');
 	let country = $state<ICountry | undefined>();
-	let selectedCountryItem = $state<ComboboxItem | undefined>();
+	let selectedCountryItem = $state<ComboboxOption | undefined>();
 	let countriesOpen = $state<boolean>(false);
 	let countriesValid = $state<boolean>(true);
 	let numberValid = $state<boolean>(true);
@@ -45,7 +45,7 @@
 		},
 		{} as Record<string, ICountry>
 	);
-	const options: ComboboxItem[] = countries.map((country) => ({
+	const options: ComboboxOption[] = countries.map((country) => ({
 		value: country.isoCode,
 		label: `${country.name} (+${country.phonecode})`,
 		preview: `+${country.phonecode}`,
@@ -103,7 +103,7 @@
 	});
 </script>
 
-{#snippet renderIcon(item: ComboboxItem)}
+{#snippet renderIcon(item: ComboboxOption)}
 	{#if countrycodeMap[item.value]?.flag}
 		{countrycodeMap[item.value].flag}
 	{/if}
@@ -133,6 +133,7 @@
 				onvalidate={(e) => {
 					countriesValid = e.detail.valid;
 				}}
+				invalidMessage={null}
 			/>
 		</div>
 

src/lib/TimezoneInput.svelte

@@ -20,7 +20,7 @@
 <script lang="ts">
 	import type { ClassValue } from 'svelte/elements';
 
-	import Combobox, { type ComboboxItem } from './Combobox.svelte';
+	import Combobox, { type ComboboxOption } from './Combobox.svelte';
 
 	interface Props {
 		label?: string;
@@ -64,7 +64,7 @@
 			return a.timeZone.localeCompare(b.timeZone);
 		});
 
-	const options: ComboboxItem[] = sortedTimeZones.map((timeZone) => {
+	const options: ComboboxOption[] = sortedTimeZones.map((timeZone) => {
 		const infotext = [...new Set([timeZone.short, timeZone.offset])]
 			.filter((item) => item !== undefined)
 			.join(' · ');
@@ -82,10 +82,10 @@
 			acc[option.value] = option;
 			return acc;
 		},
-		{} as Record<string, ComboboxItem>
+		{} as Record<string, ComboboxOption>
 	);
 
-	let timezone = $state<ComboboxItem | undefined>(
+	let timezone = $state<ComboboxOption | undefined>(
 		optionsMap[Intl.DateTimeFormat().resolvedOptions().timeZone]
 	);
 
@@ -106,6 +106,6 @@
 	class={classValue}
 />
 
-{#snippet timezoneLabel(item: ComboboxItem)}
+{#snippet timezoneLabel(item: ComboboxOption)}
 	{@html wbr(item.label ?? 'Missing label')}
 {/snippet}

src/lib/index.ts

@@ -2,7 +2,7 @@
 export { default as Button } from './Button.svelte';
 export { default as CenterBox } from './CenterBox.svelte';
 export { default as Checkbox, type CheckboxState } from './Checkbox.svelte';
-export { default as Combobox, type ComboboxItem } from './Combobox.svelte';
+export { default as Combobox, type ComboboxOption } from './Combobox.svelte';
 export { default as DateInput } from './DateInput.svelte';
 export { default as Dialog } from './Dialog.svelte';
 export { default as FramelessButton } from './FramelessButton.svelte';