bake canonical build harness (deterministic /ship for forks) [music]

src/components/ui/badge.tsx

@@ -1,33 +1,29 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
 import { cn } from "@/lib/utils";
 
-const badgeStyles: Record<string, string> = {
-  default: "bg-indigo-600 text-white",
-  secondary: "bg-slate-100 text-slate-900",
-  outline: "border border-slate-300 text-slate-900",
-  destructive: "bg-red-600 text-white",
-  success: "bg-emerald-100 text-emerald-700",
-};
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  variant?: keyof typeof badgeStyles;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
-export function Badge({ className, variant = "default", ...props }: BadgeProps) {
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold",
-        badgeStyles[variant] || badgeStyles.default,
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export function badgeVariants(opts?: { variant?: string; className?: string }) {
-  return cn("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold", badgeStyles[opts?.variant || "default"], opts?.className);
-}
-
-export default Badge;
+export { Badge, badgeVariants };