import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const colors = ["primary", "secondary", "tertiary", "accent", "success", "warning", "danger", "info", "neutral"] as const;
type Color = (typeof colors)[number];

const solid: Record<Color, string> = {
  primary: "bg-primary text-on-primary",
  secondary: "bg-secondary text-on-secondary",
  tertiary: "bg-tertiary text-on-tertiary",
  accent: "bg-accent text-on-accent",
  success: "bg-success text-on-success",
  warning: "bg-warning text-on-warning",
  danger: "bg-danger text-on-danger",
  info: "bg-info text-on-info",
  neutral: "bg-surface text-on-surface",
};
const soft: Record<Color, string> = {
  primary: "bg-primary-container text-on-primary-container",
  secondary: "bg-secondary-container text-on-secondary-container",
  tertiary: "bg-tertiary-container text-on-tertiary-container",
  accent: "bg-accent-container text-on-accent-container",
  success: "bg-success-container text-on-success-container",
  warning: "bg-warning-container text-on-warning-container",
  danger: "bg-danger-container text-on-danger-container",
  info: "bg-info-container text-on-info-container",
  neutral: "bg-surface-sunken text-on-surface",
};

const badgeVariants = cva("inline-flex items-center gap-1 rounded-full px-3 py-0.5 text-xs font-bold [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0", {
  variants: {
    variant: { solid: "shadow-clay-sm", soft: "" },
    color: Object.fromEntries(colors.map((c) => [c, ""])) as Record<Color, string>,
  },
  compoundVariants: colors.flatMap((color) => [
    { variant: "solid" as const, color, className: solid[color] },
    { variant: "soft" as const, color, className: soft[color] },
  ]),
  defaultVariants: { variant: "solid", color: "primary" },
});

export function Badge({
  className,
  variant,
  color,
  ...p
}: Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> & VariantProps<typeof badgeVariants>) {
  return <span className={cn(badgeVariants({ variant, color }), className)} {...p} />;
}
export { badgeVariants };
Installation
