{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "eyebrow",
  "title": "Eyebrow",
  "description": "Mono small-caps label with optional dot or index.",
  "dependencies": [],
  "registryDependencies": [
    "@hjconsult/lib"
  ],
  "files": [
    {
      "path": "src/components/eyebrow/index.tsx",
      "content": "import type { ComponentPropsWithoutRef, Ref } from 'react'\nimport { cn } from '../../lib'\n\nexport type EyebrowTone = 'default' | 'accent'\n\nexport interface EyebrowProps extends ComponentPropsWithoutRef<'p'> {\n  as?: 'p' | 'span' | 'div'\n  /** Leading accent dot. */\n  dot?: boolean\n  /** Leading index, e.g. `1` renders as `01`. */\n  number?: number | string\n  tone?: EyebrowTone\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/** Small-caps label that sits above a heading: mono, wide tracking, optional dot or index. */\nexport function Eyebrow({\n  as = 'p',\n  dot = false,\n  number,\n  tone = 'default',\n  className,\n  children,\n  ...props\n}: EyebrowProps) {\n  const Tag = as as 'p'\n  const index = typeof number === 'number' ? String(number).padStart(2, '0') : number\n  return (\n    <Tag\n      className={cn(\n        'inline-flex items-center gap-2 font-label text-caption font-medium uppercase tracking-widest',\n        tone === 'accent' ? 'text-accent' : 'text-fg-muted',\n        className,\n      )}\n      {...props}\n    >\n      {dot ? (\n        <span aria-hidden=\"true\" className=\"size-1.5 shrink-0 rounded-full bg-accent\" />\n      ) : null}\n      {index !== undefined ? <span className=\"tabular-nums text-fg-subtle\">{index}</span> : null}\n      {children}\n    </Tag>\n  )\n}\n",
      "type": "registry:ui",
      "target": "hj/components/eyebrow/index.tsx"
    }
  ],
  "cssVars": {},
  "type": "registry:ui"
}