{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "eyebrow",
  "type": "registry:ui",
  "title": "Eyebrow",
  "description": "The small label above a section heading. It is a paragraph, not a heading.",
  "categories": [
    "atom"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/ui/eyebrow.tsx",
      "type": "registry:ui",
      "target": "components/ui/eyebrow.tsx",
      "content": "/**\n * Eyebrow — the small label that sits above a section heading.\n *\n * The `primary` tone puts the brand colour in a tick, not in the letters: a\n * brand colour need only clear 3:1 as a shape, but 4.5:1 as 14px text.\n *\n * a11y: never a heading. An eyebrow reads as a category, not as an outline\n * level, and promoting it to `<h3>` above an `<h2>` would invert the document\n * structure for screen-reader users navigating by heading. It renders a `<p>`\n * by default, or a `<span>` when it is already inside flow text. The tick is a\n * pseudo-element, so it is not announced.\n *\n * Dependencies: react, @/lib/utils.\n */\n\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface EyebrowProps extends Omit<ComponentPropsWithoutRef<\"p\">, \"children\"> {\n  as?: \"p\" | \"span\" | \"div\"\n  /** `muted` is the default; `primary` leads with a tick in the brand colour. */\n  tone?: \"muted\" | \"primary\" | \"foreground\"\n  children?: ReactNode\n}\n\nconst tones: Record<NonNullable<EyebrowProps[\"tone\"]>, string> = {\n  muted: \"text-muted-foreground\",\n  // Inline, so the tick follows the text's alignment and its first line.\n  primary:\n    \"text-foreground before:bg-primary before:mr-[0.75em] before:inline-block before:size-[0.6em] before:rounded-[0.125em] before:content-['']\",\n  foreground: \"text-foreground\",\n}\n\nexport function Eyebrow({\n  as = \"p\",\n  tone = \"muted\",\n  className,\n  children,\n  ...props\n}: EyebrowProps) {\n  const Component = as as ElementType\n\n  return (\n    <Component\n      className={cn(\n        \"text-sm font-semibold uppercase tracking-[0.12em]\",\n        tones[tone],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/eyebrow"
}