From 562ad81591b53171a362854ab800c5630828611a Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Mon, 24 Mar 2025 13:36:02 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Checkbox=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/tailwind-config/tailwind.config.js | 12 +++++++
 packages/ui/src/checkbox.tsx                | 40 ++++++++++++---------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js
index 13027d29c..4049cf3f0 100644
--- a/packages/tailwind-config/tailwind.config.js
+++ b/packages/tailwind-config/tailwind.config.js
@@ -49,6 +49,10 @@ module.exports = {
         accent: {
           DEFAULT: colors.gray["100"],
         },
+        "action-bar": {
+          DEFAULT: colors.gray["800"],
+          foreground: colors.white,
+        },
         muted: {
           DEFAULT: colors.gray["100"],
           background: colors.gray["50"],
@@ -63,6 +67,14 @@ module.exports = {
           background: colors.white,
           foreground: colors.gray["700"],
         },
+        sidebar: {
+          DEFAULT: colors.gray["100"],
+          foreground: colors.gray["700"],
+          accent: {
+            DEFAULT: colors.gray["200"],
+            foreground: colors.gray["800"],
+          },
+        },
       },
       keyframes: {
         wiggle: {
diff --git a/packages/ui/src/checkbox.tsx b/packages/ui/src/checkbox.tsx
index 5317760e3..e5855eaed 100644
--- a/packages/ui/src/checkbox.tsx
+++ b/packages/ui/src/checkbox.tsx
@@ -1,31 +1,37 @@
 "use client";
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
 import * as React from "react";
 
-import CheckboxCheckIcon from "./checkbox-check.svg";
 import { cn } from "./lib/utils";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "data-[state=checked]:bg-primary data-[state=checked]:border-primary-600",
-      "peer inline-flex size-5 shrink-0 items-center justify-center rounded border border-gray-200 bg-gray-50 ring-0 disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+>(({ className, checked, ...props }, ref) => {
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        "data-[state=checked]:bg-primary data-[state=checked]:border-primary-700 data-[state=checked]:active:bg-primary-700 data-[state=indeterminate]:active:bg-primary-700 data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground peer size-5 shrink-0 rounded-md border border-gray-300 focus-visible:outline-none focus-visible:ring-1 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:active:border-gray-300",
+        className,
+      )}
+      checked={checked}
+      {...props}
     >
-      <CheckboxCheckIcon className="text-primary-50 size-2.5" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
+      <CheckboxPrimitive.Indicator
+        className={cn("flex items-center justify-center text-current")}
+      >
+        {checked === "indeterminate" ? (
+          <Minus className="size-4" />
+        ) : (
+          <Check className="size-4" />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };