{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section-label",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "section-label.tsx",
      "target": "components/ui/section-label.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SectionLabelTone = \"accent\" | \"accent-alt\";\n\nexport interface SectionLabelProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  index?: string;\n  title: React.ReactNode;\n  aside?: React.ReactNode;\n  /** Optional lede below the label row. Turns the label into a section header. */\n  description?: React.ReactNode;\n  tone?: SectionLabelTone;\n}\n\nconst indexTone: Record<SectionLabelTone, string> = {\n  accent: \"text-accent [filter:drop-shadow(var(--usva-glow-accent-strong))]\",\n  \"accent-alt\": \"text-accent-alt\",\n};\n\nexport const SectionLabel = React.forwardRef<HTMLDivElement, SectionLabelProps>(\n  (\n    { className, index, title, aside, description, tone = \"accent\", ...props },\n    ref,\n  ) => {\n    const row = (\n      <div className=\"flex items-center gap-3.5\">\n        {index != null && (\n          <span\n            className={cn(\n              \"font-mono text-[0.7rem] font-medium uppercase leading-none tracking-[0.2em] tabular-nums\",\n              indexTone[tone],\n            )}\n          >\n            {index}\n          </span>\n        )}\n        <h2 className=\"text-balance text-sm font-medium lowercase leading-none tracking-[0.01em] text-ink\">\n          {title}\n        </h2>\n        <span aria-hidden=\"true\" className=\"hairline-accent h-px flex-1\" />\n        {aside != null && (\n          <span className=\"shrink-0 font-mono text-[0.7rem] leading-none tabular-nums text-muted\">\n            {aside}\n          </span>\n        )}\n      </div>\n    );\n\n    if (description == null) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {row}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        {row}\n        <p className=\"max-w-prose text-pretty text-sm leading-relaxed text-muted\">\n          {description}\n        </p>\n      </div>\n    );\n  },\n);\nSectionLabel.displayName = \"SectionLabel\";\n"
    }
  ]
}