From 058e20fa2d4c0398c0aa40fbf0f2dcd7bbeec4d1 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Wed, 10 Dec 2025 19:04:44 -0800
Subject: [PATCH] checkbox: support MaybeGetter pattern

---
 src/lib/Checkbox.svelte | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/lib/Checkbox.svelte b/src/lib/Checkbox.svelte
index 6295b68..3623b64 100644
--- a/src/lib/Checkbox.svelte
+++ b/src/lib/Checkbox.svelte
@@ -5,14 +5,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { validate } from '@svelte-toolkit/validate';
-	import { generateIdentifier } from './util';
+	import { generateIdentifier, resolveGetter, type MaybeGetter } from './util';
 	import type { ClassValue } from 'svelte/elements';
 	import { Check, Minus } from 'phosphor-svelte';
 
 	interface Props {
 		name?: string;
 		required?: boolean;
-		value?: CheckboxState;
+		value?: MaybeGetter<CheckboxState>;
 		color?: 'default' | 'contrast';
 		class?: ClassValue | null | undefined;
 		children?: Snippet;
@@ -32,17 +32,19 @@
 	let id = $derived(generateIdentifier('checkbox', name));
 
 	let valid = $state(true);
-	let Icon = $derived(value === 'indeterminate' ? Minus : value ? Check : undefined);
+	let Icon = $derived(
+		resolveGetter(value) === 'indeterminate' ? Minus : resolveGetter(value) ? Check : undefined
+	);
 </script>
 
 <div class={['flex items-center', classValue]}>
 	<input
 		type="hidden"
 		{name}
-		value={value?.toString() ?? 'false'}
+		value={resolveGetter(value)?.toString() ?? 'false'}
 		use:validate={{
 			valfunc: () => {
-				if (required && value !== true) {
+				if (required && resolveGetter(value) !== true) {
 					return false;
 				}
 				return true;
@@ -64,7 +66,8 @@
 			!valid && 'border border-red-500'
 		]}
 		onclick={() => {
-			if (value === false || value === undefined || value === 'indeterminate') {
+			const resolved = resolveGetter(value);
+			if (resolved === false || resolved === undefined || resolved === 'indeterminate') {
 				value = true;
 			} else {
 				value = false;