feat: add Checkbox & Label

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Storybook
+storybook-static/*

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

package.json

@@ -13,11 +13,14 @@
 	},
 	"dependencies": {
 		"@biomejs/biome": "^1.9.4",
+		"@radix-ui/react-checkbox": "^1.1.3",
+		"@radix-ui/react-label": "^2.1.1",
 		"@radix-ui/react-slot": "^1.1.1",
 		"@radix-ui/react-switch": "^1.1.2",
 		"@types/node": "^22.10.6",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"lucide-react": "^0.471.1",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"tailwind-merge": "^2.6.0"

src/App.tsx

@@ -1,16 +1,18 @@
-import { useState } from 'react';
-import { Button } from './components';
+import { useState } from "react";
+import { Checkbox } from "./components/Checkbox";
+import { Label } from "./components/Label";
 
 function App() {
-  const [count, setCount] = useState(0);
+	const [count, setCount] = useState(0);
 
-  return (
-    <>
-      <Button radius="none" onClick={() => setCount((prev) => prev + 1)}>
-        Increment
-      </Button>
-    </>
-  );
+	return (
+		<div className="flex items-center justify-center w-full h-full p-4">
+			<div className="flex items-center p-32 bg-white gap-x-2">
+				<Checkbox size={"md"} id="checkbox" />
+				<Label htmlFor="checkbox">Checkbox</Label>
+			</div>
+		</div>
+	);
 }
 
 export default App;

src/components/Button/index.tsx

@@ -1,55 +1,55 @@
-import { cn } from '@/utils';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, VariantProps } from 'class-variance-authority';
-import React from 'react';
+import { cn } from "@/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import React from "react";
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-x-4 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-monad-purple text-white',
-        secondary: 'bg-berry text-white',
-        outline: 'bg-transparent text-monad-purple border border-monad-purple',
-      },
-      size: {
-        default: 'h-[45px] px-6',
-        sm: 'h-[35px] px-4 text-sm',
-        lg: 'h-[55px] px-8 text-lg',
-        icon: 'h-10 w-10',
-      },
-      radius: {
-        default: 'rounded-md',
-        full: 'rounded-full',
-        none: 'rounded-none',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-      radius: 'default',
-    },
-  }
+	"inline-flex items-center justify-center gap-x-4 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-white",
+				secondary: "bg-berry text-white",
+				outline: "bg-transparent text-primary border border-primary",
+			},
+			size: {
+				default: "h-[45px] px-6",
+				sm: "h-[35px] px-4 text-sm",
+				lg: "h-[55px] px-8 text-lg",
+				icon: "h-10 w-10",
+			},
+			radius: {
+				default: "rounded-md",
+				full: "rounded-full",
+				none: "rounded-none",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+			radius: "default",
+		},
+	},
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, radius, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, radius, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
+	({ className, variant, size, radius, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size, radius, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
 );
-Button.displayName = 'Button';
+Button.displayName = "Button";
 
 export { Button, buttonVariants };

src/components/Checkbox/index.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from ".";
+import { Label } from "../Label";
+
+const meta: Meta<typeof Checkbox> = {
+	title: "Components/Checkbox",
+	component: Checkbox,
+	parameters: {
+		layout: "centered",
+	},
+	argTypes: {
+		size: {
+			options: ["md", "sm"],
+			control: { type: "radio" },
+		},
+		disabled: {
+			control: { type: "boolean" },
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: (args) => (
+		<div className="flex items-center gap-x-2">
+			<Checkbox id="Checkbox" {...args} />
+			<Label htmlFor="Checkbox" className="text-lg font-medium text-gray-40">
+				Checkbox
+			</Label>
+		</div>
+	),
+	args: {
+		size: "md",
+	},
+};
+
+export const Sizes: Story = {
+	render: (args) => (
+		<div className="flex flex-col gap-y-4">
+			<div className="flex items-center gap-x-2">
+				<Checkbox id="checkbox-small" size={"sm"} />
+				<Label
+					htmlFor="checkbox-small"
+					className="font-medium text-md text-gray-40"
+				>
+					Checkbox
+				</Label>
+			</div>
+			<div className="flex items-center gap-x-2">
+				<Checkbox id="checkbox-medium" size={"md"} />
+				<Label
+					htmlFor="checkbox-medium"
+					className="text-lg font-medium text-gray-40"
+				>
+					Checkbox
+				</Label>
+			</div>
+		</div>
+	),
+	args: {
+		size: "md",
+	},
+};