Status Badge

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7// Status badge — the design-system pill: mono label + leading icon + status color.
8// Variants mirror the protocol vocabulary (decision outcomes + principal/audit tags).
9// Soft fills are derived from the semantic var via color-mix so they track the theme.
10const statusBadgeVariants = cva(
11  "inline-flex items-center gap-1.5 rounded-full border py-[5px] pl-[9px] pr-[11px] font-mono text-xs font-medium [&_svg]:size-[13px] [&_svg]:shrink-0",
12  {
13    variants: {
14      variant: {
15        allow:
16          "text-[var(--delego-allow)] border-[color-mix(in_oklch,var(--delego-allow)_32%,transparent)] bg-[color-mix(in_oklch,var(--delego-allow)_10%,transparent)]",
17        approval:
18          "text-[var(--delego-approval)] border-[color-mix(in_oklch,var(--delego-approval)_32%,transparent)] bg-[color-mix(in_oklch,var(--delego-approval)_10%,transparent)]",
19        deny: "text-[var(--delego-deny)] border-[color-mix(in_oklch,var(--delego-deny)_32%,transparent)] bg-[color-mix(in_oklch,var(--delego-deny)_10%,transparent)]",
20        indigo:
21          "text-[var(--delego-indigo)] border-[color-mix(in_oklch,var(--delego-indigo)_34%,transparent)] bg-[color-mix(in_oklch,var(--delego-indigo)_12%,transparent)]",
22        neutral: "text-foreground/80 border-border bg-card",
23      },
24    },
25    defaultVariants: {
26      variant: "neutral",
27    },
28  }
29)
30 
31function StatusBadge({
32  className,
33  variant,
34  asChild = false,
35  ...props
36}: React.ComponentProps<"span"> &
37  VariantProps<typeof statusBadgeVariants> & {
38    asChild?: boolean
39  }) {
40  const Comp = asChild ? Slot : "span"
41  return (
42    <Comp
43      data-slot="status-badge"
44      className={cn(statusBadgeVariants({ variant, className }))}
45      {...props}
46    />
47  )
48}
49 
50export { StatusBadge, statusBadgeVariants }