From f740866366831d52eb816aa3c87e7b24dcb73d89 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Tue, 28 May 2024 22:37:03 +0900
Subject: [PATCH] feat: add Label

---
 packages/react/components/Label.tsx      | 38 ++++++++++++++++++++++++
 packages/react/stories/Label.stories.tsx | 24 +++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 packages/react/components/Label.tsx
 create mode 100644 packages/react/stories/Label.stories.tsx

diff --git a/packages/react/components/Label.tsx b/packages/react/components/Label.tsx
new file mode 100644
index 0000000..b88355f
--- /dev/null
+++ b/packages/react/components/Label.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { VariantProps, vcn } from "../shared";
+
+const [labelVariant, resolveLabelVariantProps] = vcn({
+  base: "",
+  variants: {
+    vertical: {
+      true: "flex flex-col gap-2 justify-center items-start",
+      false: "",
+    },
+    horizontal: {
+      true: "flex flex-row gap-2 justify-start items-center",
+      false: "",
+    },
+  },
+  defaults: {
+    vertical: false,
+    horizontal: false,
+  },
+});
+
+interface LabelProps
+  extends VariantProps<typeof labelVariant>,
+    React.ComponentPropsWithoutRef<"label"> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {
+  const [variantProps, otherPropsCompressed] = resolveLabelVariantProps(props);
+
+  return (
+    <label
+      ref={ref}
+      {...otherPropsCompressed}
+      className={labelVariant(variantProps)}
+    />
+  );
+});
+
+export { Label };
diff --git a/packages/react/stories/Label.stories.tsx b/packages/react/stories/Label.stories.tsx
new file mode 100644
index 0000000..d57bc9f
--- /dev/null
+++ b/packages/react/stories/Label.stories.tsx
@@ -0,0 +1,24 @@
+import { Input } from "../components/Input";
+import { Label } from "../components/Label";
+
+export default {
+  title: "React/Label",
+};
+
+export const WithInput = () => {
+  return (
+    <Label>
+      <p>Email</p>
+      <Input type="text" />
+    </Label>
+  );
+};
+
+export const HorizontalWithInput = () => {
+  return (
+    <Label horizontal>
+      <p>Email</p>
+      <Input type="text" />
+    </Label>
+  );
+};