Badge

1import { cva, type VariantProps } from "class-variance-authority";
2import { html, LitElement, nothing } from "lit";
3import { customElement, property } from "lit/decorators.js";
4import { TW } from "@/lib/tailwindMixin";
5import { cn } from "@/lib/utils";
6 
7export const badgeVariants = cva(
8  "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",
9  {
10    variants: {
11      variant: {
12        default:
13          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
14        secondary:
15          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
16        destructive:
17          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
18        outline: "text-foreground",
19      },
20    },
21    defaultVariants: {
22      variant: "default",
23    },
24  },
25);
26 
27export type BadgeVariants = VariantProps<typeof badgeVariants>;
28 
29@customElement("ui-badge")
30export class Badge extends TW(LitElement) {
31  @property({ type: String }) variant: BadgeVariants["variant"] = "default";
32 
33  @property({ type: String, attribute: "aria-label" }) accessor ariaLabel:
34    | string
35    | null = null;
36 
37  private get badgeClasses() {
38    return badgeVariants({ variant: this.variant });
39  }
40 
41  override render() {
42    return html`
43      <span
44        class=${cn(this.badgeClasses, this.className)}
45        role="status"
46        aria-label=${this.ariaLabel || nothing}
47      >
48        <slot></slot>
49      </span>
50    `;
51  }
52}
53 
54declare global {
55  interface HTMLElementTagNameMap {
56    "ui-badge": Badge;
57  }
58}