Initial commit

src/components/ui/badge.jsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+/**
+ * Badge — a static label. For anything that communicates lifecycle or health,
+ * use `StatusBadge` from the design system instead: it maps domain states onto
+ * these tones so the same status never renders two different colours.
+ */
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-krow-blue text-white",
+        soft: "border-transparent bg-krow-blue-tint text-krow-blue",
+        accent: "border-transparent bg-krow-yellow text-krow-blue",
+        navy: "border-transparent bg-krow-navy text-white",
+        success: "border-transparent bg-success-muted text-success",
+        warning: "border-transparent bg-warning-muted text-warning",
+        destructive: "border-transparent bg-destructive-muted text-destructive",
+        info: "border-transparent bg-info-muted text-info",
+        neutral: "border-transparent bg-neutral-muted text-ink-3",
+        outline: "border-border bg-transparent text-ink-2",
+      },
+      size: {
+        sm: "h-[18px] px-1.5 text-[10px]",
+        default: "h-5 px-2 text-[11px]",
+        lg: "h-6 px-2.5 text-caption",
+      },
+      shape: {
+        pill: "rounded-full",
+        rounded: "rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "pill",
+    },
+  }
+)
+
+const Badge = React.forwardRef(({ className, variant, size, shape, ...props }, ref) => (
+  <div ref={ref} className={cn(badgeVariants({ variant, size, shape }), className)} {...props} />
+))
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants }