sui/src/routes/+page.svelte

<script lang="ts">
	import Button from '$lib/Button.svelte';
	import ActionSelect from '$lib/ActionSelect.svelte';
	import Checkbox, { type CheckboxState } from '$lib/Checkbox.svelte';
	import Combobox from '$lib/Combobox.svelte';
	import DateInput from '$lib/DateInput.svelte';
	import Dialog from '$lib/Dialog.svelte';
	import FramelessButton from '$lib/FramelessButton.svelte';
	import InputGroup from '$lib/InputGroup.svelte';
	import Link from '$lib/Link.svelte';
	import PhoneInput from '$lib/PhoneInput.svelte';
	import PinInput from '$lib/PinInput.svelte';
	import RadioGroup from '$lib/RadioGroup.svelte';
	import StyledRawInput from '$lib/StyledRawInput.svelte';
	import TextInput from '$lib/TextInput.svelte';
	import TimeInput from '$lib/TimeInput.svelte';
	import TimezoneInput from '$lib/TimezoneInput.svelte';
	import ToggleGroup from '$lib/ToggleGroup.svelte';
	import ToggleSelect from '$lib/ToggleSelect.svelte';

	let dateInputValue = $state<Date | undefined>(undefined);
	let checkboxValue = $state<CheckboxState>('indeterminate');
	let dialogOpen = $state(false);
</script>

<title>sui</title>

<h1 class="mb-4 text-3xl font-bold">sui — Opinionated Svelte 5 UI toolkit</h1>

<p class="mb-4">
	Welcome to the Svelte UI toolkit! This is a collection of components and utilities designed to
	help you build Svelte applications quickly and efficiently.
</p>

<h2 class="mb-2 text-2xl font-semibold">Component Library</h2>

<div class="component">
	<p class="title">Button, Frameless Button, & Link</p>
	<div class="flex gap-4">
		<Button icon="add" loading={false} onclick={() => alert('Button clicked!')}>Click Me</Button>
		<Button icon="add" loading={true} onclick={() => alert('Button clicked!')}
			>Loading Button</Button
		>

		<FramelessButton icon="add">Click Me</FramelessButton>

		<Link href="https://svelte.dev">Visit Svelte</Link>

		<Button onclick={() => (dialogOpen = true)}>Open Dialog</Button>
	</div>
</div>

<div class="component">
	<p class="title">Button Select</p>

	<div class="flex gap-2">
		<ActionSelect
			class="basis-1/2"
			stateless
			label="Stateless Action"
			options={[{ title: 'Yeet' }, { title: 'Yote' }, { title: 'Yote and Yeet' }]}
		/>
		<ActionSelect
			class="basis-1/2"
			label="Stateful Action"
			value={{ title: 'Initial Action', onchoose: (value) => console.log('Chosen:', value) }}
			options={[
				{ title: 'Action 1', onchoose: (value) => console.log('Action 1 chosen:', value) },
				{ title: 'Action 2', onchoose: (value) => console.log('Action 2 chosen:', value) }
			]}
		/>
	</div>
</div>

<div class="component">
	<p class="title">Combobox</p>

	<Combobox
		name="example-combobox"
		label="Select an option"
		placeholder="Choose..."
		options={[
			{ value: 'option1', label: 'Option 1' },
			{ value: 'option2', label: 'Option 2' },
			{ value: 'option3', label: 'Option 3' }
		]}
		onchange={(e) => console.log('Selected:', e.value)}
		onvalidate={(e) => console.log('Validation:', e.detail)}
	/>
</div>

<div class="component">
	<p class="title">Checkbox</p>

	<div class="flex items-center gap-4">
		<Checkbox
			name="example-checkbox"
			bind:value={checkboxValue}
			onchange={(value) => console.log('Checkbox value:', value)}
		>
			Agree to terms and conditions
		</Checkbox>
		<span>Checkbox is {checkboxValue}</span>
		<Button onclick={() => (checkboxValue = 'indeterminate')}>Set Indeterminate</Button>
	</div>
</div>

<div class="component">
	<p class="title">Dateinput</p>

	<div class="flex items-start gap-4">
		<DateInput bind:value={dateInputValue} />
		<div class="shrink-0">
			<Button
				icon="add"
				onclick={() => {
					dateInputValue = new Date();
					console.log('Dateinput value set to:', dateInputValue);
				}}
			>
				Set Current Date
			</Button>
		</div>
		<span>Selected date is {dateInputValue}</span>
	</div>
</div>

<div class="component">
	<p class="title">Phone Input</p>
	<PhoneInput label="Phone Number" name="phone" defaultISO="CA" />
</div>

<div class="component">
	<p class="title">Pin Input</p>
	<PinInput label="Please enter your 6-digit PIN" length={6} />
</div>

<div class="component">
	<p class="title">Radio Group</p>
	<RadioGroup
		name="example-radio-group"
		label="Choose an option"
		options={[
			'male',
			'female',
			'other',
			{ value: 'prefer_not_to_say', label: 'Prefer not to say' }
		]}
	/>
</div>

<div class="component">
	<p class="title">Styled Raw Input, Text Input</p>

	<InputGroup>
		<StyledRawInput placeholder="Type here..." class="basis-1/2" />
		<TextInput label="Write something here" placeholder="Enter text..." class="basis-1/2" />
	</InputGroup>
</div>

<div class="component">
	<p class="title">Time Input</p>

	<TimeInput name="example-time-input" label="Enter a time" />
</div>

<div class="component">
	<p class="title">TimezoneInput</p>

	<TimezoneInput name="example-timezone" label="Pick your timezone" />
</div>

<div class="component">
	<p class="title">Toggle Group</p>

	<ToggleGroup
		name="example-toggle-group"
		label="Toggler"
		options={['item one', 'item two', { value: 'complex', label: 'Complex item' }]}
	/>
</div>

<div class="component">
	<p class="title">Toggle Select</p>

	<ToggleSelect name="example-toggle-select">Toggle Me!</ToggleSelect>
</div>

<Dialog
	bind:open={dialogOpen}
	title="Dialog Title"
	size="sm"
	onsubmit={() => {
		dialogOpen = false;
		alert('Dialog submitted!');
	}}
>
	<p>This is a dialog content area.</p>
</Dialog>

<style lang="postcss">
	@reference '$lib/styles/tailwind.css';

	.component .title {
		@apply mb-2 text-lg font-semibold;
	}

	.component {
		@apply mb-6 rounded-lg border p-4;
	}
</style>