extend examples with all components

src/lib/PinInput.svelte

@@ -15,7 +15,7 @@
 		length: number;
 		required?: boolean;
 		name: string;
-		value: string;
+		value?: string;
 		oncomplete?: (value: string) => void;
 		onchange?: (value: string) => void;
 	} = $props();

src/routes/+page.svelte

@@ -3,6 +3,18 @@
 	import Checkbox from '$lib/Checkbox.svelte';
 	import Combobox from '$lib/Combobox.svelte';
 	import Dateinput from '$lib/Dateinput.svelte';
+	import FramelessButton from '$lib/FramelessButton.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 Select from '$lib/Select.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);
 </script>
@@ -17,12 +29,16 @@
 <h2 class="mb-2 text-2xl font-semibold">Component Library</h2>
 
 <div class="component">
-	<p class="title">Button</p>
+	<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>
 	</div>
 </div>
 
@@ -75,6 +91,73 @@
 	</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 name="pin" length={6} />
+</div>
+
+<div class="component">
+	<p class="title">Radio Group</p>
+	<RadioGroup
+		name="example-radio-group"
+		label="Choose an option"
+		items={['male', 'female', 'other', 'prefer not to say']}
+	/>
+</div>
+
+<div class="component">
+	<p class="title">Select</p>
+	<Select
+		name="example-select"
+		label="Select an option"
+		options={[
+			{ label: 'Option 1', value: 'option1' },
+			{ label: 'Option 2', value: 'option2' },
+			{ label: 'Option 3', value: 'option3' }
+		]}
+	/>
+</div>
+
+<div class="component">
+	<p class="title">Styled Raw Input, Text Input</p>
+
+	<StyledRawInput name="example-raw-input" placeholder="Type here..." />
+	<TextInput name="example-text-input" placeholder="Enter text..." />
+</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"
+		items={['item one', 'item two', 'item three']}
+	/>
+</div>
+
+<div class="component">
+	<p class="title">Toggle Select</p>
+
+	<ToggleSelect name="example-toggle-select">Toggle Me!</ToggleSelect>
+</div>
+
 <style lang="postcss">
 	@reference '$lib/styles/theme.css';