feat: add checkbox component (#69)

cungminh2710 · May 13, 2024 · f557931 · f557931
1 parent 0b639c0
commit f557931
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/packages/ui/src/checkbox.tsx b/packages/ui/src/checkbox.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from './lib/utils';
+
+const Checkbox = forwardRef<
+	ElementRef<typeof CheckboxPrimitive.Root>,
+	ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			'data-[state=checked]:text-primary-foreground squared-sm peer h-4 w-4 shrink-0 rounded border  border-black disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-black',
+			className,
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+			<Check className='h-4 w-4' />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/packages/ui/src/styles/tailwind.css b/packages/ui/src/styles/tailwind.css
@@ -802,6 +802,12 @@ body {
   gap: 1rem;
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -820,12 +826,6 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
@@ -866,6 +866,11 @@ body {
   border-width: 2px;
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .border-destructive\/50 {
   border-color: hsl(var(--destructive) / 0.5);
 }
@@ -1042,6 +1047,10 @@ body {
   color: hsl(var(--card-foreground));
 }
 
+.text-current {
+  color: currentColor;
+}
+
 .text-destructive {
   color: hsl(var(--destructive));
 }
@@ -1346,6 +1355,11 @@ body {
   background-color: hsl(var(--background));
 }
 
+.data-\[state\=checked\]\:bg-black[data-state=checked] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .data-\[state\=checked\]\:bg-primary[data-state=checked] {
   background-color: hsl(var(--primary));
 }
@@ -1358,6 +1372,10 @@ body {
   color: hsl(var(--foreground));
 }
 
+.data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
+  color: hsl(var(--primary-foreground));
+}
+
 .data-\[state\=active\]\:shadow-sm[data-state=active] {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);