Aurora Badge

1"use client"
2 
3// BREAKING: badgeVariants export removed in this version. See badgeVariants deprecation shim below.
4 
5import * as React from "react"
6import { Slot, Slottable } from "@radix-ui/react-slot"
7import { X } from "lucide-react"
8import { cn } from "@/lib/utils"
9 
10// Warn-once so repeated renders (and React strict-mode double-invokes) don't
11// spam the console with the same deprecation notice.
12const warned = new Set<string>()
13function devWarn(message: string): void {
14  if (process.env.NODE_ENV === "production") return
15  if (warned.has(message)) return
16  warned.add(message)
17  console.warn(message)
18}
19 
20// ---------------------------------------------------------------------------
21// Tones
22// ---------------------------------------------------------------------------
23// CD parity: six tone families. `violet` was removed from the system; CD's
24// expressive accents are cyan (primary), rose (secondary), and orange (warn).
25 
26export type BadgeTone =
27  | "info"
28  | "success"
29  | "warn"
30  | "error"
31  | "neutral"
32  | "rose"
33  | "cyan"
34 
35/** Fill style — orthogonal to tone. CD parity: soft (default) / solid / outline. */
36export type BadgeFill = "soft" | "solid" | "outline"
37 
38type ToneTokens = {
39  /** Base accent — the saturated hue for dot, solid fill, outline border. */
40  accent: string
41  /** Soft-fill text color (light, legible on the tinted surface). */
42  text: string
43  /** Soft-fill border. */
44  border: string
45  /** Soft-fill tinted surface. */
46  bg: string
47  /** Text color used on a bright solid fill (dark, for contrast). */
48  solidText: string
49}
50 
51const badgeToneMap: Record<BadgeTone, ToneTokens> = {
52  info: {
53    accent:    "var(--aurora-info)",
54    text:      "var(--aurora-info-foreground)",
55    border:    "var(--aurora-info-border)",
56    bg:        "var(--aurora-info-surface)",
57    solidText: "var(--aurora-page-bg)",
58  },
59  success: {
60    accent:    "var(--aurora-success)",
61    text:      "var(--aurora-success-foreground)",
62    border:    "var(--aurora-success-border)",
63    bg:        "var(--aurora-success-surface)",
64    solidText: "var(--aurora-page-bg)",
65  },
66  warn: {
67    accent:    "var(--aurora-warn)",
68    text:      "var(--aurora-warn-foreground)",
69    border:    "var(--aurora-warn-border)",
70    bg:        "var(--aurora-warn-surface)",
71    solidText: "var(--aurora-page-bg)",
72  },
73  error: {
74    accent:    "var(--aurora-error)",
75    text:      "var(--aurora-error-foreground)",
76    border:    "var(--aurora-error-border)",
77// … truncated