@syscore/ui-library 1.14.0 → 1.15.0

package/client/components/icons/UtilityCheck.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface UtilityCheckProps {
+  className?: string;
+}
+
+export const UtilityCheck: React.FC<UtilityCheckProps> = ({ className }) => {
+  return (
+    <div className={cn("flex items-center justify-center", className)}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="7"
+        height="5"
+        viewBox="0 0 7 5"
+        fill="none"
+      >
+        <path
+          d="M0.75 2.30556L2.30556 3.86111L5.41667 0.75"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  );
+};

package/client/components/ui/checkbox.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import { UtilityCheck } from "../icons/UtilityCheck";
 
 import { cn } from "@/lib/utils";
 
@@ -13,9 +13,9 @@ const Checkbox = React.forwardRef<
     className={cn("checkbox", className)}
     {...props}
   >
-    <CheckboxPrimitive.Indicator className="checkbox-indicator">
-      <Check className="icon-4" />
-    </CheckboxPrimitive.Indicator>
+    <span className="checkbox-indicator">
+      <UtilityCheck />
+    </span>
   </CheckboxPrimitive.Root>
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;

package/client/global.css

@@ -533,6 +533,7 @@ layer(base);
   --radius-lg: 12px;
   --radius-md: 8px;
   --radius-sm: 6px;
+  --radius-xs: 3px;
 
   /* Figma Design System Colors */
   --color-white: #fff;
@@ -1537,11 +1538,14 @@ body {
 
 /* Checkbox Styles */
 .checkbox {
-  height: 1rem;
-  width: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 0.875rem;
+  width: 0.875rem;
   flex-shrink: 0;
-  border-radius: calc(var(--radius-sm, 6px));
-  border: 1px solid hsl(var(--primary));
+  border-radius: var(--radius-xs, 3px);
+  border: 1.5px solid var(--color-gray-400, #9fa2ab);
   transition: all 0.15s ease-in-out;
 }
 
@@ -1558,22 +1562,26 @@ body {
 }
 
 .checkbox[data-state="checked"] {
-  background-color: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
+  background-color: var(--color-cyan-400, #39c9ea);
+  border-color: var(--color-cyan-700, #128ba6);
+  color: var(--color-white, #fff);
+}
+
+.checkbox[data-state="unchecked"] {
+  background-color: transparent;
+  border-color: var(--color-gray-400, #9fa2ab);
+  color: var(--color-gray-100, #eff1f2);
 }
 
 .checkbox-indicator {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
   color: currentColor;
 }
 
-.checkbox-indicator svg {
-  height: 1rem;
-  width: 1rem;
-}
-
 /* Alert Styles */
 .alert {
   position: relative;
@@ -2485,7 +2493,7 @@ body {
 
 .dialog-content-inner {
   padding: 1.5rem;
-  border-radius: 28px;
+  border-radius: 24px;
   background-color: var(--color-gray-50, #f9f9fa);
 }
 

package/client/ui/{Checkbox/Checkbox.stories.tsx → Checkbox.stories.tsx}

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Checkbox } from "../../components/ui/checkbox";
 import { useState } from "react";
+import { Checkbox } from "../components/ui/checkbox";
 
 const meta = {
-  title: "UI/Checkbox",
+  title: "Review/Checkbox",
   component: Checkbox,
   tags: ["autodocs"],
   parameters: {
@@ -18,14 +18,24 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => {
     const [checked, setChecked] = useState(false);
-    return <Checkbox checked={checked} onCheckedChange={setChecked} />;
+    return (
+      <Checkbox
+        checked={checked}
+        onCheckedChange={(value) => setChecked(value === true)}
+      />
+    );
   },
 };
 
 export const Checked: Story = {
   render: () => {
     const [checked, setChecked] = useState(true);
-    return <Checkbox checked={checked} onCheckedChange={setChecked} />;
+    return (
+      <Checkbox
+        checked={checked}
+        onCheckedChange={(value) => setChecked(value === true)}
+      />
+    );
   },
 };
 
@@ -42,7 +52,11 @@ export const WithLabel: Story = {
     const [checked, setChecked] = useState(false);
     return (
       <div className="flex items-center space-x-2">
-        <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
+        <Checkbox
+          id="terms"
+          checked={checked}
+          onCheckedChange={(value) => setChecked(value === true)}
+        />
         <label
           htmlFor="terms"
           className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"