From 8ef46832ff1b24aad9642a01843223b6c3973fb2 Mon Sep 17 00:00:00 2001
From: Gerzon Rangel <128724547+gerzon05@users.noreply.github.com>
Date: Thu, 15 Aug 2024 21:11:29 -0500
Subject: [PATCH] feat: style for the checkbox component (#351)

---
 src/components/forms/checkbox/checkbox.tsx |  4 ++--
 src/plugins/components/checkbox.ts         | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/forms/checkbox/checkbox.tsx b/src/components/forms/checkbox/checkbox.tsx
index 519ba5d..19d73da 100644
--- a/src/components/forms/checkbox/checkbox.tsx
+++ b/src/components/forms/checkbox/checkbox.tsx
@@ -6,10 +6,10 @@ import { checkbox, cn } from '@/tailwind'
 export interface Comp extends React.ElementRef<typeof CheckboxPrimitive.Root> {}
 export type Props = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & VariantProps<typeof checkbox>
 
-const Checkbox = React.forwardRef<Comp, Props>(({ className, color, rounded, ...props }, ref) => (
+const Checkbox = React.forwardRef<Comp, Props>(({ className, variant, rounded, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
-    className={cn(checkbox({ color, rounded }), className)}
+    className={cn(checkbox({ variant, rounded }), className)}
     {...props}
   >
     <CheckboxPrimitive.Indicator>
diff --git a/src/plugins/components/checkbox.ts b/src/plugins/components/checkbox.ts
index 74d7d84..58dbf68 100644
--- a/src/plugins/components/checkbox.ts
+++ b/src/plugins/components/checkbox.ts
@@ -10,7 +10,7 @@ import { cva } from 'class-variance-authority'
  */
 export const checkbox = cva('peer size-4 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', {
   variants: {
-    color: {
+    variant: {
       default: 'data-[state=checked]:bg-default data-[state=checked]:text-default-foreground border border-default',
       primary: 'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border border-primary',
       success: 'data-[state=checked]:bg-success data-[state=checked]:text-success-foreground border border-success',
@@ -23,9 +23,15 @@ export const checkbox = cva('peer size-4 shrink-0 focus-visible:outline-none foc
       md: 'rounded-medium',
       lg: 'rounded-large',
     },
+    size: {
+      sm: 'size-4',
+      md: 'size-5',
+      lg: 'size-6',
+    },
   },
   defaultVariants: {
-    color: 'default',
+    variant: 'default',
     rounded: 'sm',
+    size: 'sm',
   },
 })