feat: add checkbox component (#63)

Author: Cahllagerfeld

.changeset/eighty-dryers-notice.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add checkbox component

package.json

@@ -85,6 +85,7 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-avatar": "^1.0.4",
+		"@radix-ui/react-checkbox": "^1.0.4",
 		"@radix-ui/react-collapsible": "^1.0.3",
 		"@radix-ui/react-dialog": "^1.0.5",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",

pnpm-lock.yaml

@@ -0,0 +1,32 @@
+import { Meta } from "@storybook/react";
+import { Checkbox } from "./index";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Checkbox",
+	component: Checkbox,
+	argTypes: {
+		disabled: {
+			control: "boolean",
+			defaultValue: false,
+			description: "if true, the input is disabled"
+		}
+	},
+	parameters: {
+		layout: "centered"
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const small: Story = {
+	name: "Checkbox",
+	args: {
+		checked: true,
+		disabled: false
+	}
+};

src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cn } from "../../utilities";
+
+const CheckboxRoot = CheckboxPrimitive.Root;
+
+const CheckboxIndicator = CheckboxPrimitive.Indicator;
+
+const Checkbox = React.forwardRef<
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			[
+				"flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-theme-border-bold bg-theme-surface-primary",
+				"hover:ring-4 hover:ring-theme-surface-tertiary",
+				"focus:outline-none focus:ring-4 focus:ring-theme-surface-tertiary",
+				"data-[state=checked]:border-theme-surface-strong data-[state=checked]:bg-theme-surface-strong data-[state=checked]:active:border-primary-200 data-[state=checked]:active:bg-primary-200",
+				"active:bg-theme-surface-tertiary",
+				"disabled:pointer-events-none disabled:border-neutral-300 disabled:data-[state=checked]:border-neutral-300 disabled:data-[state=checked]:bg-neutral-300"
+			],
+			className
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+			<svg
+				className="w-2 h-2 fill-white"
+				viewBox="0 0 12 10"
+				fill="black"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M4.28267 6.34605L2.09696 4.09419L0.666677 5.55738L4.28267 9.28281L11.3333 2.01874L9.91314 0.555542L4.28267 6.34605Z"
+				/>
+			</svg>
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox, CheckboxRoot, CheckboxIndicator };

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1 @@
+export * from "./Checkbox";

src/components/Checkbox/index.tsx

@@ -13,3 +13,4 @@ export * from "./Spinner";
 export * from "./Tabs";
 export * from "./Collapsible";
 export * from "./Tooltip";
+export * from "./Checkbox";