add checkbox component

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Button from '$lib/Button.svelte';
+	import Checkbox from '$lib/Checkbox.svelte';
 	import Combobox from '$lib/Combobox.svelte';
 </script>
 
@@ -12,14 +13,18 @@
 
 <h2 class="mb-2 text-2xl font-semibold">Component Library</h2>
 
-<p class="comp-title">Button</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>
+<div class="component">
+	<p class="title">Button</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
+		>
+	</div>
 </div>
 
 <div class="component">
-	<p class="comp-title">Combobox</p>
+	<p class="title">Combobox</p>
 
 	<Combobox
 		name="example-combobox"
@@ -35,10 +40,26 @@
 	/>
 </div>
 
+<div class="component">
+	<p class="title">Checkbox</p>
+
+	<Checkbox
+		name="example-checkbox"
+		value={'indeterminate'}
+		onchange={(value) => console.log('Checkbox value:', value)}
+	>
+		Agree to terms and conditions
+	</Checkbox>
+</div>
+
 <style lang="postcss">
 	@reference '$lib/styles/theme.css';
 
-	.comp-title {
+	.component .title {
 		@apply mb-2 text-lg font-semibold;
 	}
+
+	.component {
+		@apply mb-6 rounded-lg border p-4;
+	}
 </style>