Checkbox Component

app/(docs)/docs/layout.tsx

@@ -15,7 +15,7 @@ export default function ComponentLayout({
       <div className="hidden lg:block">
         <SideNav />
       </div>
-      <div className="lg:ml-72 mt-16 px-4 lg:px-0">{children}</div>
+      <div className="lg:ml-72 px-4 lg:px-0">{children}</div>
     </div>
   );
 }

app/(marketing)/blogs/layout.tsx

@@ -9,5 +9,5 @@ export default function BlogsLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return <div className="max-w-6xl mx-auto pt-12">{children}</div>;
+  return <div className="max-w-6xl mx-auto pt-12 px-4 lg:px-0">{children}</div>;
 }

app/(marketing)/page.tsx

@@ -222,7 +222,7 @@ export default async function Home() {
               Github Stars
             </Text>
             <Text as="h1" className="text-outlined text-7xl lg:text-8xl">
-              230+
+              300+
             </Text>
             <Image
               src="/images/shooting_star.svg"

app/(sink)/demo/components/page.tsx

@@ -6,6 +6,7 @@ import {
   Avatar,
   Badge,
   Button,
+  Checkbox,
   Menu,
   Tabs,
   TabsContent,
@@ -31,6 +32,15 @@ export default function page() {
         <BadgeStyleVariants />
       </div>
 
+      <div className="space-x-4">
+        <Checkbox />
+        <Checkbox variant="outline" />
+        <Checkbox variant="solid" />
+        <Checkbox size="sm" />
+        <Checkbox size="md" />
+        <Checkbox size="lg" />
+      </div>
+
       <div className="flex items-center space-x-4">
         <Avatar>
           <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />

app/layout.tsx

@@ -29,7 +29,7 @@ export const metadata: Metadata = {
   description:
     "RetroUI - Retro styled component library built with React and TailwindCSS for modern web apps.",
   openGraph: {
-    images: "/banner.png",
+    images: "https://retroui.dev/banner.png",
     title: "Retro Styled React UI Library | Retro UI",
   },
 };

components/SideNav.tsx

@@ -1,5 +1,5 @@
 import { navConfig } from "@/config/navigation";
-import { Text } from "@/packages/ui";
+import { Badge, Text } from "@/packages/ui";
 import Link from "next/link";
 
 export default function SideNav() {
@@ -15,6 +15,11 @@ export default function SideNav() {
               {item.children.map((child) => (
                 <Link key={child.title} href={child.href}>
                   {child.title}
+                  {child.tag && (
+                    <Badge size="sm" className="ml-2">
+                      {child.tag}
+                    </Badge>
+                  )}
                 </Link>
               ))}
             </div>

config/components.ts

@@ -26,7 +26,10 @@ export const componentConfig = {
       name: "card",
       filePath: "packages/ui/Cards/Card.tsx",
     },
-
+    checkbox: {
+      name: "checkbox",
+      filePath: "packages/ui/Form/Checkbox.tsx",
+    },
     dialog: {
       name: "dialog",
       filePath: "packages/ui/Dialog/Dialog.tsx",
@@ -141,6 +144,28 @@ export const componentConfig = {
         () => import("@/preview/components/card-style-testimonial")
       ),
     },
+    "checkbox-style-default": {
+      name: "checkbox-style-default",
+      filePath: "preview/components/checkbox-style-default.tsx",
+      preview: lazy(
+        () => import("@/preview/components/checkbox-style-default")
+      ),
+    },
+    "checkbox-style-variants": {
+      name: "checkbox-style-toggle",
+      filePath: "preview/components/checkbox-style-variants.tsx",
+      preview: lazy(
+        () => import("@/preview/components/checkbox-style-variants")
+      ),
+    },
+    "checkbox-style-sizes": {
+      name: "checkbox-style-default",
+      filePath: "preview/components/checkbox-style-sizes.tsx",
+      preview: lazy(() => import("@/preview/components/checkbox-style-sizes")),
+    },
+    "dropdown-style-default": {
+      name: "dropdown-style-default",
+    },
     "input-style-default": {
       name: "input-style-default",
       filePath: "preview/components/input-style-default.tsx",

config/navigation.ts

@@ -23,6 +23,7 @@ export const navConfig: INavigationConfig = {
         { title: "Badge", href: `${componentsRoute}/badge` },
         { title: "Button", href: `${componentsRoute}/button` },
         { title: "Card", href: `${componentsRoute}/card` },
+        { title: "Checkbox", href: `${componentsRoute}/checkbox`, tag: "New" },
         { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input` },
         { title: "Menu", href: `${componentsRoute}/menu` },

content/docs/components/checkbox.mdx

@@ -0,0 +1,40 @@
+---
+title: Checkbox
+description: Let users confirm or reject an option.
+lastUpdated: 13 Feb, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/checkbox#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Form/Checkbox.tsx
+---
+
+<ComponentShowcase name="checkbox-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-checkbox class-variance-authority lucide-react
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="checkbox" />
+<br />
+<br />
+
+## Examples
+
+### Variants
+
+<ComponentShowcase name="checkbox-style-variants" />
+<br />
+<br />
+
+### Sizes
+
+<ComponentShowcase name="checkbox-style-sizes" />

package.json

@@ -12,6 +12,7 @@
     "@headlessui/react": "^2.1.9",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",

packages/ui/Form/Checkbox.tsx

@@ -0,0 +1,49 @@
+import { cn } from "@/lib/utils";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva, VariantProps } from "class-variance-authority";
+import { Check } from "lucide-react";
+
+const checkboxVariants = cva("border-black border-2", {
+  variants: {
+    variant: {
+      default: " data-[state=checked]:bg-primary-400",
+      outline: "",
+      solid: "data-[state=checked]:bg-black *:text-white",
+    },
+    size: {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+interface CheckboxProps
+  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,
+    VariantProps<typeof checkboxVariants> {}
+
+export const Checkbox = ({
+  className,
+  size,
+  variant,
+  ...props
+}: CheckboxProps) => (
+  <CheckboxPrimitive.Root
+    className={cn(
+      checkboxVariants({
+        size,
+        variant,
+      }),
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="h-full w-full">
+      <Check className="h-full w-full" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+);

packages/ui/Form/index.tsx

@@ -1,2 +1,3 @@
-export * from "./Input"
-export * from "./Textarea"
+export * from "./Input";
+export * from "./Textarea";
+export * from "./Checkbox";