From 9977303329a261c47e9b315d4ed7a62e6d681d0b Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 15 Mar 2025 11:06:47 -0500
Subject: [PATCH] Add checkbox readonly state

---
 src/components/Checkbox.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 2cd7020e..8fcd6ce8 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -22,7 +22,9 @@ export default function Checkbox({
     <span className={clsx(
       'relative inline-flex items-center justify-center',
       'size-5',
-      'group-has-active:opacity-70',
+      props.readOnly
+        ? 'cursor-not-allowed'
+        : 'group-has-active:opacity-70',
     )}>
       {accessory
         ? accessory
@@ -30,9 +32,14 @@ export default function Checkbox({
           ? <span className={clsx(
             boxStyles,
             'border-transparent',
-            'bg-blue-600',
+            props.readOnly
+              ? 'bg-gray-300 dark:bg-gray-700'
+              : 'bg-blue-600',
           )}>
-            <ImCheckmark className="text-white text-[11px]" />
+            <ImCheckmark className={clsx(
+              'text-white text-[11px]',
+              props.readOnly && 'dark:text-gray-400',
+            )} />
           </span>
           : <span className={clsx(
             boxStyles,