From 47a87b90bfc13470881941e5ce1e8d87c60b4e0c Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Tue, 19 Mar 2024 11:21:36 +0000
Subject: [PATCH 1/3] feat: add box component

---
 src/components/Box/Box.stories.tsx | 32 ++++++++++++++++++++++++++++++
 src/components/Box/Box.tsx         | 24 ++++++++++++++++++++++
 src/components/Box/index.tsx       |  1 +
 src/components/index.ts            |  1 +
 4 files changed, 58 insertions(+)
 create mode 100644 src/components/Box/Box.stories.tsx
 create mode 100644 src/components/Box/Box.tsx
 create mode 100644 src/components/Box/index.tsx

diff --git a/src/components/Box/Box.stories.tsx b/src/components/Box/Box.stories.tsx
new file mode 100644
index 0000000..29de55e
--- /dev/null
+++ b/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"
+	}
+};
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
new file mode 100644
index 0000000..d63048a
--- /dev/null
+++ b/src/components/Box/Box.tsx
@@ -0,0 +1,24 @@
+import { cva, VariantProps } from "class-variance-authority";
+import React, { HTMLAttributes } from "react";
+import { cn } from "../../utilities";
+
+const boxVariants = cva("border rounded-md", {
+	variants: {
+		variant: {
+			default: "border-theme-border-moderate bg-theme-surface-primary"
+		}
+	},
+	defaultVariants: {
+		variant: "default"
+	}
+});
+
+type DefaultBoxProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof boxVariants>;
+
+export function Box({ children, className, variant, ...rest }: DefaultBoxProps) {
+	return (
+		<div {...rest} className={cn(boxVariants({ variant }), className)}>
+			{children}
+		</div>
+	);
+}
diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx
new file mode 100644
index 0000000..2a063cc
--- /dev/null
+++ b/src/components/Box/index.tsx
@@ -0,0 +1 @@
+export * from "./Box";
diff --git a/src/components/index.ts b/src/components/index.ts
index e51711f..05f0713 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from "./Button";
 export * from "./Input";
 export * from "./Sidebar";
+export * from "./Box";

From 74792730ec783d2754e8de8ba411fdfc0b3fd7c5 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Tue, 19 Mar 2024 11:22:14 +0000
Subject: [PATCH 2/3] chore: add changeset

---
 .changeset/long-seahorses-approve.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/long-seahorses-approve.md

diff --git a/.changeset/long-seahorses-approve.md b/.changeset/long-seahorses-approve.md
new file mode 100644
index 0000000..219bd13
--- /dev/null
+++ b/.changeset/long-seahorses-approve.md
@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add box component

From 669063bb810f6f97027942fb54982d30c70fdbec Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Tue, 19 Mar 2024 13:36:30 +0000
Subject: [PATCH 3/3] refactor: export types

---
 src/components/Box/Box.tsx     | 8 +++++---
 src/components/Input/Input.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
index d63048a..c4624c1 100644
--- a/src/components/Box/Box.tsx
+++ b/src/components/Box/Box.tsx
@@ -2,7 +2,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import React, { HTMLAttributes } from "react";
 import { cn } from "../../utilities";
 
-const boxVariants = cva("border rounded-md", {
+export const boxVariants = cva("border rounded-md", {
 	variants: {
 		variant: {
 			default: "border-theme-border-moderate bg-theme-surface-primary"
@@ -13,9 +13,11 @@ const boxVariants = cva("border rounded-md", {
 	}
 });
 
-type DefaultBoxProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof boxVariants>;
+export interface BoxProps
+	extends HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof boxVariants> {}
 
-export function Box({ children, className, variant, ...rest }: DefaultBoxProps) {
+export function Box({ children, className, variant, ...rest }: BoxProps) {
 	return (
 		<div {...rest} className={cn(boxVariants({ variant }), className)}>
 			{children}
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index dfb3e7a..6788346 100644
--- a/src/components/Input/Input.tsx
+++ b/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",