{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-pill",
  "title": "Status Pill",
  "description": "A dot and a few words: operational, degraded, closed.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/status-pill/status-pill.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type StatusTone = \"ok\" | \"warn\" | \"down\" | \"idle\"\n\nexport type StatusPillProps = Omit<\n  React.HTMLAttributes<HTMLSpanElement>,\n  \"children\"\n> & {\n  children: React.ReactNode\n  tone?: StatusTone\n  /** Makes the pill a link, for a status page or a health check. */\n  href?: string\n  /** A quiet line rather than a pill. */\n  plain?: boolean\n}\n\nconst dot: Record<StatusTone, string> = {\n  ok: \"bg-accent\",\n  warn: \"bg-[color-mix(in_oklab,var(--destructive)_55%,var(--accent))]\",\n  down: \"bg-destructive\",\n  idle: \"bg-muted-foreground\",\n}\n\n/**\n * A dot and a few words: all systems operational, market closed, degraded.\n * The words carry it -- the dot is decoration, so the state is never told by\n * colour alone.\n */\nexport function StatusPill({\n  children,\n  tone = \"ok\",\n  href,\n  plain = false,\n  className,\n  ...rootProps\n}: StatusPillProps) {\n  const content = (\n    <>\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"status-pill-dot\"\n        className={cn(\"size-1.5 shrink-0 rounded-full\", dot[tone])}\n      />\n      {children}\n    </>\n  )\n\n  const shape = cn(\n    \"inline-flex items-center gap-2 text-xs\",\n    plain\n      ? \"text-muted-foreground\"\n      : \"border-border bg-card text-muted-foreground min-h-8 rounded-full border px-2.5\",\n    href &&\n      \"hover:text-foreground transition-colors duration-150 no-underline motion-reduce:transition-none\",\n    className\n  )\n\n  if (href) {\n    return (\n      <a data-slot=\"status-pill\" data-tone={tone} href={href} className={shape}>\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <span\n      data-slot=\"status-pill\"\n      data-tone={tone}\n      className={shape}\n      {...rootProps}\n    >\n      {content}\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "feedback",
    "status"
  ],
  "type": "registry:ui"
}