{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-badge",
  "type": "registry:ui",
  "title": "Status badge",
  "description": "Tailwind status badge with a tinted fill, hairline border and colored dot in neutral, success, warning, danger, accent and info tones that read as one set.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/status-badge.tsx",
      "type": "registry:ui",
      "target": "components/ui/status-badge.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * StatusBadge — tinted fill, hairline edge, and a status dot that carries the\n * meaning. Tones share lightness so a row of badges reads as one set.\n */\nconst statusBadgeVariants = cva(\n  [\n    \"inline-flex h-[22px] items-center gap-1.5 rounded-md border px-2 text-xs font-medium whitespace-nowrap\",\n    \"before:size-1.5 before:shrink-0 before:rounded-full before:bg-current\",\n  ].join(\" \"),\n  {\n    variants: {\n      tone: {\n        neutral: \"border-border bg-sunken text-fg-muted before:bg-fg-subtle\",\n        success: \"border-success/20 bg-success/10 text-success\",\n        warning: \"border-warning/25 bg-warning/12 text-[color-mix(in_oklch,var(--warning)_70%,var(--fg))]\",\n        danger: \"border-danger/20 bg-danger/10 text-danger\",\n        accent: \"border-accent-line bg-accent-soft text-accent-fg\",\n        info: \"border-info/20 bg-info/10 text-info\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  }\n)\n\nfunction StatusBadge({ className, tone, children, ...props }: React.ComponentProps<\"span\"> & VariantProps<typeof statusBadgeVariants>) {\n  return <span data-slot=\"status-badge\" data-tone={tone ?? \"neutral\"} className={cn(statusBadgeVariants({ tone }), className)} {...props}>{children}</span>\n}\nexport { StatusBadge, statusBadgeVariants }\n"
    }
  ]
}