feat: style for the checkbox component (#351)

openlitedotdev · Aug 16, 2024 · 8ef4683 · 8ef4683
1 parent c3f070b
commit 8ef4683
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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',
   },
 })