Radio group

<script lang="ts">
	import * as Radio from '#lib/ui/radio/index.js';

	let room = $state('baghdad');
</script>

<Radio.Group legend="Reading room" bind:value={room}>
	<Radio.Item value="baghdad">Bayt al-Hikma, Baghdad</Radio.Item>
	<Radio.Item value="cordoba">Library of Córdoba</Radio.Item>
	<Radio.Item value="fez">Al-Qarawiyyin, Fez</Radio.Item>
</Radio.Group>

<script lang="ts">
	import * as Radio from '#lib/ui/radio/index.js';

	let copy = $state('scribe');
</script>

<Radio.Group legend="How should we copy it?" bind:value={copy}>
	<Radio.Item value="scribe" hint="Hand-copied on paper from the Samarkand mills."
		>Scribe</Radio.Item
	>
	<Radio.Item value="illuminated" hint="With gold leaf and lapis. Takes a season.">
		Illuminated
	</Radio.Item>
	<Radio.Item value="summary" hint="The key chapters only." disabled>Summary</Radio.Item>
</Radio.Group>

<script lang="ts">
	import * as Radio from '#lib/ui/radio/index.js';

	let script = $state('naskh');
</script>

<Radio.Group legend="Script" orientation="horizontal" bind:value={script}>
	<Radio.Item value="kufic">Kufic</Radio.Item>
	<Radio.Item value="naskh">Naskh</Radio.Item>
	<Radio.Item value="thuluth">Thuluth</Radio.Item>
</Radio.Group>

<script lang="ts">
	import * as Radio from '#lib/ui/radio/index.js';

	let script = $state<string>();
</script>

<Radio.Group
	legend="Script for the copy"
	bind:value={script}
	required
	hint="The copyist can write in one script per manuscript."
	error={script ? undefined : 'Choose a script for the copy.'}
>
	<Radio.Item value="muhaqqaq">Muhaqqaq</Radio.Item>
	<Radio.Item value="rayhani">Rayhani</Radio.Item>
	<Radio.Item value="tawqi">Tawqi‘</Radio.Item>
</Radio.Group>