Badge Component

.changeset/swift-games-study.md

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

src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta } from "@storybook/react";
+import { Badge } from "./index";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Badge",
+	component: Badge,
+	argTypes: {
+		color: {
+			control: "select",
+			defaultValue: "green",
+			options: [
+				"green",
+				"yellow",
+				"light-purple",
+				"purple",
+				"blue",
+				"light-grey",
+				"grey",
+				"red",
+				"orange",
+				"lime",
+				"teal",
+				"turquoise",
+				"magenta"
+			]
+		},
+		size: {
+			control: "select",
+			defaultValue: "sm",
+			options: ["xs", "sm", "md"]
+		},
+		rounded: {
+			control: "boolean",
+			defaultValue: true
+		}
+	},
+	parameters: {
+		layout: "centered"
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const defaultVariant: Story = {
+	name: "Default",
+	args: {
+		rounded: true,
+		color: "green",
+		size: "sm",
+		children: "Badge"
+	}
+};

src/components/Badge/Badge.tsx

@@ -0,0 +1,49 @@
+import { cva, VariantProps } from "class-variance-authority";
+import React, { HTMLAttributes } from "react";
+import { cn } from "../../utilities";
+
+export const badgeVariants = cva("inline-flex items-center", {
+	variants: {
+		rounded: {
+			true: "rounded-rounded",
+			false: "rounded-sm"
+		},
+		size: {
+			xs: "text-text-xs px-0.5",
+			sm: "text-text-xs py-0.5 px-2 h-5",
+			md: "text-text-sm py-0.5 px-2 h-6"
+		},
+		color: {
+			green: "bg-success-100 text-success-800",
+			yellow: "bg-warning-200 text-warning-900",
+			"light-purple": "bg-primary-25 text-primary-500",
+			purple: "bg-primary-50 text-primary-500",
+			blue: "bg-blue-50 text-blue-600",
+			"light-grey": "bg-neutral-100 text-theme-text-secondary",
+			grey: "bg-neutral-200 text-theme-text-primary",
+			red: "bg-error-100 text-error-700",
+			orange: "bg-orange-100 text-orange-700",
+			lime: "bg-lime-100 text-lime-800",
+			teal: "bg-teal-100 text-teal-700",
+			turquoise: "bg-turquoise-100 text-turquoise-700",
+			magenta: "bg-magenta-100 text-magenta-700"
+		}
+	},
+	defaultVariants: {
+		color: "purple",
+		rounded: true,
+		size: "md"
+	}
+});
+
+interface ButtonVariants
+	extends Omit<HTMLAttributes<HTMLDivElement>, "color">,
+		VariantProps<typeof badgeVariants> {}
+
+export function Badge({ children, className, color, rounded, size, ...rest }: ButtonVariants) {
+	return (
+		<div {...rest} className={cn(badgeVariants({ color, rounded, size }), className)}>
+			{children}
+		</div>
+	);
+}

src/components/Badge/index.tsx

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

src/components/index.ts

@@ -7,3 +7,4 @@ export * from "./Skeleton";
 export * from "./Dropdown";
 export * from "./Table";
 export * from "./Tag";
+export * from "./Badge";