checkbox: support disabled state

src/lib/Checkbox.svelte

@@ -5,14 +5,15 @@
 <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;
+		disabled?: boolean;
+		value?: MaybeGetter<CheckboxState>;
 		color?: 'default' | 'contrast';
 		class?: ClassValue | null | undefined;
 		children?: Snippet;
@@ -22,6 +23,7 @@
 	let {
 		name,
 		required = false,
+		disabled = false,
 		value = $bindable(),
 		color = 'contrast',
 		class: classValue,
@@ -32,17 +34,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;
@@ -56,15 +60,18 @@
 	<button
 		type="button"
 		{id}
+		{disabled}
 		class={[
 			'text-sui-text flex size-7 shrink-0 appearance-none items-center',
-			'justify-center rounded-lg shadow transition-all hover:opacity-75',
+			'justify-center rounded-lg shadow transition-all',
 			color === 'default' && 'bg-white',
 			color === 'contrast' && 'border-text/40 border bg-white',
-			!valid && 'border border-red-500'
+			!valid && 'border border-red-500',
+			disabled ? 'cursor-not-allowed opacity-50' : 'hover:opacity-75'
 		]}
 		onclick={() => {
-			if (value === false || value === undefined || value === 'indeterminate') {
+			const resolved = resolveGetter(value);
+			if (resolved === false || resolved === undefined || resolved === 'indeterminate') {
 				value = true;
 			} else {
 				value = false;