Badge

npx @glasskit-ui/cli add badge

npm install @glasskit-ui/react

// components/lib/utils.tsexport type ClassValue = string | number | null | undefined | false;/** * Join truthy class names. Dependency-free on purpose: the lens components * style via bespoke semantic classes (no conflicting Tailwind utilities to * de-dupe), so this needs no clsx/tailwind-merge and resolves from anywhere * the registry is vendored. */export function cn(...inputs: ClassValue[]): string {  return inputs.filter(Boolean).join(" ");}/** * Accessible name from a free-form `label` prop: the label itself when it's a * plain string, otherwise undefined (a ReactNode can't become an aria-label). */export function stringLabel(label: unknown): string | undefined {  return typeof label === "string" ? label : undefined;}

// components/glasskit/badge.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <Badge> — a small count or status pill (notification counts, live state). * Pure display. Subtle surface by default; emphasis='accent' gives it the accent * gradient for the one thing that needs to draw the eye. */export function Badge({  children,  emphasis = "default",  className,}: {  children: ReactNode;  /** Visual weight — accent for the one badge that matters. */  emphasis?: "default" | "accent";  className?: string;}) {  return (    <span      className={cn(        "gk-badge t-caption",        emphasis === "accent" && "gk-badge--accent",        className,      )}    >      {children}    </span>  );}