feat: add Label

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 };

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>
+  );
+};