{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"eyebrow","type":"registry:ui","title":"Eyebrow","description":"Small uppercase kicker above a heading.","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/eyebrow\/Eyebrow.tsx","content":"import { forwardRef } from \"react\";\nimport { cn } from \"..\/..\/utils\/cn\";\nimport type { EyebrowProps } from \".\/Eyebrow.types\";\n\n\/**\n * The mono running head that opens a section \u2014 `01 \u2014 SELECTED WORK`, optionally\n * over a hairline rule, with a second item pushed to the far end.\n *\n * Thirty-six surfaces in the Inspiration Gallery carry some version of this. It\n * is a small component for a reason: what they share is the STRUCTURE (a\n * numbered marker, a label, an optional trailing aside, an optional rule) while\n * every one of them restyles the type. So this owns the arrangement and the\n * uppercase mono default, and gets out of the way of `className`.\n *\n * `num` is emphasised rather than styled a fixed colour, because in half the\n * designs it is the only part of the line that is not muted \u2014 and expressing\n * that with a `<b>` keeps it meaningful when the styling is replaced wholesale.\n *\/\nexport const Eyebrow = forwardRef<HTMLDivElement, EyebrowProps>(\n  ({ num, label, aside, rule = false, className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-eyebrow=\"\"\n        className={cn(\n          \"flex items-baseline gap-3 font-mono text-[11.5px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400\",\n          rule && \"border-b border-zinc-200 pb-2 dark:border-zinc-800\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <span>\n            {num != null && (\n              <>\n                <b className=\"font-medium text-zinc-900 dark:text-zinc-100\">{num}<\/b>\n                {label != null && \" \u2014 \"}\n              <\/>\n            )}\n            {label}\n          <\/span>\n        )}\n\n        {\/* `ml-auto` rather than `justify-between`, so a single-item eyebrow\n            still sits flush left instead of being centred by the gap. *\/}\n        {aside != null && <span className=\"ml-auto\">{aside}<\/span>}\n      <\/div>\n    );\n  },\n);\n\nEyebrow.displayName = \"Eyebrow\";\n","type":"registry:ui","target":"components\/fancy\/eyebrow\/Eyebrow.tsx"},{"path":"components\/fancy\/eyebrow\/Eyebrow.types.ts","content":"import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport interface EyebrowProps extends HTMLAttributes<HTMLDivElement> {\n  \/** The section marker \u2014 `\"01\"`, `\"00\"`, a roman numeral. Emphasised. *\/\n  num?: ReactNode;\n  \/** The section name. Rendered after `num` and an em dash. *\/\n  label?: ReactNode;\n  \/** A second item pushed to the far end of the line. *\/\n  aside?: ReactNode;\n  \/** Draw the hairline rule under the head. Default `false`. *\/\n  rule?: boolean;\n  \/** Full control \u2014 replaces the `num`\/`label` pair, keeping the arrangement. *\/\n  children?: ReactNode;\n}\n","type":"registry:ui","target":"components\/fancy\/eyebrow\/Eyebrow.types.ts"},{"path":"components\/fancy\/eyebrow\/index.ts","content":"export { Eyebrow } from \".\/Eyebrow\";\nexport type { EyebrowProps } from \".\/Eyebrow.types\";\n","type":"registry:ui","target":"components\/fancy\/eyebrow\/index.ts"}],"since":"0.5"}