Typescript Error 2322 when assigning object to ListboxOption value parameter

[gskaplan]

Describe the bug
When following the example code, a typescript error 2322 occurs when assigning {person} to the value parameter.

The specific error states:

Type '{ id: number; name: string; unavailable: boolean; }' is not assignable to type 'string | number | string[] | null | undefined'.ts(2322)
(property) value: string | number | string[] | null | undefined

To Reproduce

1. Create an empty svelte application: pnpm create svelte@latest headless1-app
2. cd into app, then add
3. pnpm install @rgossiaux/svelte-headlessui
4. Copy and paste the sample code into VSCode editor. The error occurs immediately. package.json to follow.

<script lang="ts">
	import {
		Listbox,
		ListboxButton,
		ListboxOptions,
		ListboxOption,
	} from "@rgossiaux/svelte-headlessui";

	const people = [
		{ id: 1, name: "Durward Reynolds", unavailable: false },
		{ id: 2, name: "Kenton Towne", unavailable: false },
		{ id: 3, name: "Therese Wunsch", unavailable: false },
		{ id: 4, name: "Benedict Kessler", unavailable: true },
		{ id: 5, name: "Katelyn Rohan", unavailable: false },
	];

	let selectedPerson = people[0];
</script>

<Listbox bind:value={selectedPerson}>
	<ListboxButton>{selectedPerson.name}</ListboxButton>
	<ListboxOptions>
		{#each people as person (person.id)}
			<ListboxOption value={person} disabled={person.unavailable}>
				{person.name}
			</ListboxOption>
		{/each}
	</ListboxOptions>
</Listbox>

{
	"name": "headless1-app",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
	},
	"devDependencies": {
		"@rgossiaux/svelte-headlessui": "^2.0.0",
		"@sveltejs/adapter-auto": "^2.0.0",
		"@sveltejs/kit": "^1.20.4",
		"svelte": "^4.0.5",
		"svelte-check": "^3.4.3",
		"typescript": "^5.0.0",
		"vite": "^4.4.2"
	},
	"type": "module"
}

Please share one of:

• A REPL using https://svelte.dev/repl/ (you can import from "@rgossiaux/svelte-headlessui" there and it will install from npm)
• A git repository which reproduces the issue
• A full code snippet which reproduces the issue

Library version
2.0.0