feat: add box component (#45)

Author: Cahllagerfeld

.changeset/long-seahorses-approve.md

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

src/components/Box/Box.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta } from "@storybook/react";
+import { Box } from "./index";
+import { StoryObj } from "@storybook/react";
+import React from "react";
+
+const meta = {
+	title: "Elements/Box",
+	component: Box,
+
+	parameters: {
+		layout: "centered"
+	},
+	decorators: [
+		(Story) => (
+			<div className="w-[400px] h-[200px]">
+				<Story />
+			</div>
+		)
+	],
+	tags: ["autodocs"]
+} satisfies Meta<typeof Box>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	args: {
+		className: "h-full"
+	}
+};

src/components/Box/Box.tsx

@@ -0,0 +1,26 @@
+import { cva, VariantProps } from "class-variance-authority";
+import React, { HTMLAttributes } from "react";
+import { cn } from "../../utilities";
+
+export const boxVariants = cva("border rounded-md", {
+	variants: {
+		variant: {
+			default: "border-theme-border-moderate bg-theme-surface-primary"
+		}
+	},
+	defaultVariants: {
+		variant: "default"
+	}
+});
+
+export interface BoxProps
+	extends HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof boxVariants> {}
+
+export function Box({ children, className, variant, ...rest }: BoxProps) {
+	return (
+		<div {...rest} className={cn(boxVariants({ variant }), className)}>
+			{children}
+		</div>
+	);
+}

src/components/Box/index.tsx

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

src/components/Input/Input.tsx

@@ -2,7 +2,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { cn } from "../../utilities";
 
-const inputVariants = cva(
+export const inputVariants = cva(
 	cn([
 		"transition-all duration-200 rounded-md bg-theme-surface-primary",
 		"border-[#D0D5DD] border",

src/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./Button";
 export * from "./Input";
 export * from "./Sidebar";
+export * from "./Box";