ComboBox

let committed: string | null = null;

<combobox.Context name="timezone">
	<ComboBox
		mix={[
			is("100%"),
			maxIs("24rem"),
			combobox.onComboboxChange<HTMLDivElement>((event) => {
				committed = event.value;
				void handle.update();
			}),
		]}
	>
		<Label htmlFor="preview-timezone">Time zone</Label>

		<ComboBox.Group>
			<ComboBox.Input
				id="preview-timezone"
				placeholder="Search a city, country or offset"
				mix={[comboboxFilter()]}
			/>
			<ComboBox.Button aria-label="Show every time zone" />
		</ComboBox.Group>

		<div mix={[floatingSurface(), combobox.popover(), p(1), maxBs("13rem"), overflowY("auto")]}>
			<div mix={[vstack({ gap: 0, align: "stretch" }), combobox.list()]}>
				{ZONES.map((zone) => (
					<Item
						key={zone.value}
						mix={[
							rounded("md"),
							cursor("pointer"),
							combobox.option({
								label: zone.label,
								value: zone.value,
								searchValue: zone.search,
							}),
						]}
					>
						<Item.Content>
							<Item.Title>{zone.label}</Item.Title>
							<Item.Description>{zone.detail}</Item.Description>
						</Item.Content>
					</Item>
				))}
			</div>
		</div>

		<input type="hidden" mix={[combobox.hiddenInput()]} />

		<Description id="preview-timezone-hint">
			Meeting invitations are sent in this zone. Submitted value: {committed ?? "none yet"}
		</Description>
	</ComboBox>
</combobox.Context>