Badge

import type { ComponentProps } from "react";

const base =
  "inline-flex h-(--tui-badge-height) shrink-0 items-center gap-(--tui-badge-gap) rounded-(--tui-badge-radius) px-(--tui-badge-padding-x) font-(family-name:--tui-font) text-(length:--tui-badge-font-size) font-(--tui-badge-font-weight) leading-none whitespace-nowrap";

const variants = {
  solid: { root: "bg-(--tui-badge-solid-bg) text-(--tui-badge-solid-fg)", dot: "bg-(--tui-badge-solid-dot)" },
  soft: { root: "bg-(--tui-badge-soft-bg) text-(--tui-badge-soft-fg)", dot: "bg-(--tui-badge-soft-dot)" },
  // No fill at all: the dot and the word, for a status inside a row of text.
  outline: { root: "bg-transparent px-0! text-(--tui-badge-outline-fg)", dot: "bg-(--tui-badge-outline-dot)" },
};

export interface BadgeProps extends ComponentProps<"span"> {
  variant?: keyof typeof variants;
  /** The dot before the label. On by default. */
  dot?: boolean;
}

export function Badge({ variant = "soft", dot = true, className, children, ...props }: BadgeProps) {
  return (
    <span data-slot="badge" {...props} className={[base, variants[variant].root, className].filter(Boolean).join(" ")}>
      {dot && <span aria-hidden data-slot="badge-dot" className={`size-(--tui-badge-dot-size) shrink-0 rounded-full ${variants[variant].dot}`} />}
      {children}
    </span>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Badge */
  --tui-badge-height: calc(var(--tui-space) * 6.5);
  --tui-badge-padding-x: calc(var(--tui-space) * 2.5);
  --tui-badge-gap: calc(var(--tui-space) * 1.5);
  --tui-badge-dot-size: 6px;
  --tui-badge-radius: calc(var(--tui-radius) * 3);
  --tui-badge-font-size: calc(var(--tui-text) - 2px);
  --tui-badge-font-weight: 500;
  --tui-badge-soft-bg: color-mix(in srgb, var(--tui-bg) 93%, var(--tui-fg));
  --tui-badge-soft-fg: var(--tui-fg);
  --tui-badge-soft-dot: var(--tui-success);
  --tui-badge-solid-bg: var(--tui-primary);
  --tui-badge-solid-fg: var(--tui-primary-fg);
  --tui-badge-solid-dot: var(--tui-primary-fg);
  --tui-badge-outline-fg: var(--tui-muted-fg);
  --tui-badge-outline-dot: var(--tui-success);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}