From 520a909b01732a8aa2d2a907665cfcf2c0d05fbe Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Wed, 2 Jul 2025 09:51:32 -0700
Subject: [PATCH] add checkbox component

---
 src/app.css             |  2 +
 src/app.html            |  7 ++++
 src/lib/Checkbox.svelte | 91 +++++++++++++++++++++++++++++++++++++++++
 src/routes/+page.svelte | 33 ++++++++++++---
 4 files changed, 127 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/Checkbox.svelte
diff --git a/src/app.css b/src/app.css
index d7eaddb..aa70351 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1 +1,3 @@
 @import '$lib/styles/theme.css';
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/src/app.html b/src/app.html
index f22aeaa..1deb5b4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,6 +4,13 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		<!-- Material Design Icons -->
+		<link
+			href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
+			rel="stylesheet"
+		/>
+
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/src/lib/Checkbox.svelte b/src/lib/Checkbox.svelte
new file mode 100644
index 0000000..a69bb3b
--- /dev/null
+++ b/src/lib/Checkbox.svelte
@@ -0,0 +1,91 @@
+<script lang="ts" module>
+	export type CheckboxState = 'indeterminate' | boolean;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { validate } from '@svelte-toolkit/validate';
+
+	interface Props {
+		name?: string;
+		required?: boolean;
+		value?: CheckboxState;
+		color?: 'default' | 'contrast';
+		children?: Snippet;
+		onchange: (value: CheckboxState) => void;
+	}
+
+	let {
+		name,
+		required = false,
+		value = $bindable(false),
+		color = 'contrast',
+		children,
+		onchange
+	}: Props = $props();
+
+	let id = $derived.by(() => {
+		return `checkbox-${name || Math.random().toString(36).substring(2, 15)}`;
+	});
+
+	let valid = $state(true);
+</script>
+
+<div class="flex items-center">
+	<input
+		type="hidden"
+		{name}
+		value={value.toString()}
+		use:validate={{
+			valfunc: () => {
+				if (required && value !== true) {
+					return false;
+				}
+				return true;
+			}
+		}}
+		onvalidate={(e) => {
+			valid = e.detail.valid;
+		}}
+	/>
+
+	<button
+		{id}
+		class={[
+			'text-text flex size-7 appearance-none items-center',
+			'justify-center rounded-lg shadow transition-all hover:opacity-75',
+			color === 'default' && 'bg-white',
+			color === 'contrast' && 'border-text/40 border bg-white',
+			!valid && 'border-accent-400 border'
+		]}
+		onclick={() => {
+			if (value === false || value === 'indeterminate') {
+				value = true;
+			} else {
+				value = false;
+			}
+			onchange(value);
+		}}
+	>
+		{#if value === 'indeterminate'}
+			<span class="material-symbols-outlined">remove</span>
+		{:else if value === true}
+			<span class="material-symbols-outlined">check</span>
+		{/if}
+	</button>
+
+	{#if children}
+		<label
+			class={[
+				'text-text pl-4 font-medium transition-colors select-none',
+				!valid && 'text-accent-400'
+			]}
+			for={id}
+		>
+			{@render children()}
+			{#if required}
+				<span class="text-accent-400">*</span>
+			{/if}
+		</label>
+	{/if}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ec52a66..b1eea1f 100644
--- a/src/routes/+page.svelte
+++ b/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>
