add date picker component

src/routes/+page.svelte

@@ -1,7 +1,10 @@
-<script>
+<script lang="ts">
 	import Button from '$lib/Button.svelte';
 	import Checkbox from '$lib/Checkbox.svelte';
 	import Combobox from '$lib/Combobox.svelte';
+	import Dateinput from '$lib/Dateinput.svelte';
+
+	let dateInputValue = $state<Date | undefined>(undefined);
 </script>
 
 <h1 class="mb-4 text-3xl font-bold">sui — Opinionated Svelte 5 UI toolkit</h1>
@@ -52,6 +55,26 @@
 	</Checkbox>
 </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>
+
 <style lang="postcss">
 	@reference '$lib/styles/theme.css';