{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "description": "Marker-yellow badge with ink text and optional two-frame SVG impact burst.",
  "registryDependencies": [
    "https://frame12.dev/r/frame12-styles.json",
    "https://frame12.dev/r/tag.json"
  ],
  "files": [
    {
      "path": "ui/badge.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  type SemanticStatus,\n  STATUS_GLYPHS,\n  STATUS_SR_LABELS,\n  extractTextContent,\n  startsWithStatusLabel,\n} from './tag';\n\nexport type BadgeStatus = SemanticStatus;\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  status?: BadgeStatus;\n  glyph?: string | false;\n  srLabel?: string | false;\n  pop?: boolean;\n  burst?: boolean;\n  children?: React.ReactNode;\n}\n\nexport function Burst() {\n  const lines: React.ReactElement[] = [];\n  for (let i = 0; i < 14; i++) {\n    const a = (i / 14) * Math.PI * 2;\n    const r1 = 15 + (i % 2) * 3;\n    const r2 = 25 + (i % 3) * 3;\n    lines.push(\n      <line\n        key={i}\n        x1={30 + Math.cos(a) * r1 * 1.9}\n        y1={14 + Math.sin(a) * r1 * 0.75}\n        x2={30 + Math.cos(a) * r2 * 1.9}\n        y2={14 + Math.sin(a) * r2 * 0.75}\n      />,\n    );\n  }\n  return (\n    <svg className=\"f12-burst\" viewBox=\"-20 -12 100 52\" aria-hidden=\"true\">\n      {lines}\n    </svg>\n  );\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { status, glyph, srLabel, pop = false, burst, className = '', children, ...rest },\n  ref,\n) {\n  const showBurst = burst ?? status === undefined;\n  const statusClass = status ? ` f12-status-${status}` : '';\n  const resolvedGlyph =\n    glyph === false\n      ? undefined\n      : glyph !== undefined\n        ? glyph\n        : status\n          ? STATUS_GLYPHS[status]\n          : undefined;\n  const resolvedSrLabel =\n    srLabel === false\n      ? undefined\n      : srLabel !== undefined\n        ? srLabel\n        : status\n          ? STATUS_SR_LABELS[status]\n          : undefined;\n  const childText = extractTextContent(children).trim();\n  const showSrLabel =\n    Boolean(resolvedSrLabel) &&\n    !(childText && resolvedSrLabel && startsWithStatusLabel(childText, resolvedSrLabel, status));\n\n  return (\n    <span\n      ref={ref}\n      className={`f12-badge${statusClass}${pop ? ' f12-pop pop' : ''}${className ? ` ${className}` : ''}`}\n      data-status={status}\n      {...rest}\n    >\n      {showBurst && <Burst />}\n      <span className=\"f12-badge-t\">\n        {resolvedGlyph && (\n          <span className=\"f12-status-glyph\" aria-hidden=\"true\">\n            {resolvedGlyph}\n          </span>\n        )}\n        {showSrLabel && <span className=\"f12-sr-only\">{`${resolvedSrLabel}: `}</span>}\n        {children}\n      </span>\n    </span>\n  );\n});\n",
      "type": "registry:ui",
      "target": "components/frame12/badge.tsx"
    }
  ],
  "type": "registry:ui"
}