packages/ui: add Badge element

packages/ui/badge.tsx

@@ -0,0 +1,34 @@
+import { cn } from './utils';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { forwardRef } from 'react';
+
+const variants = cva('mr-2 rounded-md px-2.5 py-0.5 text-xs font-medium w-fit', {
+  defaultVariants: {
+    color: 'default',
+  },
+  variants: {
+    color: {
+      default: 'bg-blue-100 text-blue-800',
+      green: 'bg-green-100 text-green-800',
+      indigo: 'bg-indigo-100 text-indigo-800',
+      pink: 'bg-pink-100 text-pink-800',
+      purple: 'bg-purple-100 text-purple-800',
+      red: 'bg-red-100 text-red-80',
+      yellow: 'bg-yellow-100 text-yellow-800',
+    },
+  },
+});
+
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof variants> &
+  PropsWithChildren;
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ children, className, color, ...props }, ref) => (
+    <span className={cn(variants({ className, color }))} {...props} ref={ref}>
+      {children}
+    </span>
+  )
+);

packages/ui/index.tsx

@@ -1,5 +1,6 @@
 export * from './alert';
 export * from './background';
+export * from './badge';
 export * from './button';
 export * from './checkbox';
 export * from './container';