{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "case-study-hero",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "case-study-hero.tsx",
      "target": "components/ui/case-study-hero.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CaseStudyHeroLink {\n  href: string;\n  label: React.ReactNode;\n  /** Opens in a new tab, with the rel guard and a screen-reader hint. */\n  external?: boolean;\n}\n\nexport interface CaseStudyHeroMetaItem {\n  label: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport type CaseStudyHeroHeadingLevel = \"h1\" | \"h2\" | \"h3\";\n\nexport interface CaseStudyHeroProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Heading element for the headline. Pick by document outline, not by size. */\n  headingLevel?: CaseStudyHeroHeadingLevel;\n  /** Mono uppercase kicker, e.g. \"Case study\". */\n  eyebrow?: React.ReactNode;\n  /** Secondary mono line, e.g. the client and year. */\n  kicker?: React.ReactNode;\n  headline: React.ReactNode;\n  /** Second line of the headline, carrying the accent color. */\n  headlineAccent?: React.ReactNode;\n  /**\n   * Categorical, not semantic: any CSS color, keyed to the study rather than to a\n   * meaning. Falls back to the alternate accent token.\n   */\n  accentColor?: string;\n  tagline?: React.ReactNode;\n  link?: CaseStudyHeroLink;\n  meta?: CaseStudyHeroMetaItem[];\n  /** Arbitrary node so callers can pass Chips, spans, or nothing. */\n  tags?: React.ReactNode;\n  /** The media well. Pass a MockupShowcase, an img, a video, or an iframe. */\n  children?: React.ReactNode;\n}\n\nconst pill =\n  \"relative inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border border-border px-4 py-1.5 font-mono text-[0.6875rem] uppercase tracking-[0.12em] text-muted outline-none after:absolute after:inset-x-0 after:-inset-y-2.5 after:content-[''] transition-control duration-fast ease-soft hover:border-border-strong hover:text-ink focus-visible:ring-focus\";\n\n/**\n * The copy-driven opener for a case study. Motion-free by design: wrap it, or its\n * parts, in `RevealGroup` for kajo's staggered entrance.\n */\nexport const CaseStudyHero = React.forwardRef<HTMLElement, CaseStudyHeroProps>(\n  (\n    {\n      className,\n      headingLevel: Heading = \"h1\",\n      eyebrow,\n      kicker,\n      headline,\n      headlineAccent,\n      accentColor,\n      tagline,\n      link,\n      meta,\n      tags,\n      children,\n      ...props\n    },\n    ref,\n  ) => (\n    <header ref={ref} className={cn(\"flex flex-col\", className)} {...props}>\n      {(eyebrow != null || kicker != null || link) && (\n        <div className=\"mb-6 flex flex-wrap items-center justify-between gap-4\">\n          <div className=\"flex flex-wrap items-center gap-x-5 gap-y-1\">\n            {eyebrow != null && (\n              <p className=\"font-mono text-sm uppercase tracking-[0.18em] text-accent-alt\">\n                {eyebrow}\n              </p>\n            )}\n            {kicker != null && (\n              <p className=\"font-mono text-xs uppercase tracking-[0.18em] text-muted\">\n                {kicker}\n              </p>\n            )}\n          </div>\n          {link && (\n            <a\n              href={link.href}\n              className={pill}\n              {...(link.external\n                ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n                : {})}\n            >\n              {link.label}\n              {link.external && (\n                <span className=\"sr-only\"> (opens in a new tab)</span>\n              )}\n              <span aria-hidden=\"true\" className=\"text-accent-alt\">\n                ↗\n              </span>\n            </a>\n          )}\n        </div>\n      )}\n\n      <Heading className=\"mb-6 text-[clamp(3rem,8vw,5.5rem)] font-black leading-none tracking-[-0.03em] text-ink\">\n        {headline}\n        {headlineAccent != null && (\n          <>\n            <br />\n            <span style={{ color: accentColor ?? \"var(--color-accent-alt)\" }}>\n              {headlineAccent}\n            </span>\n          </>\n        )}\n      </Heading>\n\n      {tagline != null && (\n        <p className=\"mb-6 max-w-xl text-[1.0625rem] leading-[1.7] text-muted\">\n          {tagline}\n        </p>\n      )}\n\n      {meta != null && meta.length > 0 && (\n        <dl className=\"grid grid-cols-2 gap-x-8 gap-y-5 border-t border-border pt-8 sm:grid-cols-4\">\n          {meta.map((item, index) => (\n            <div key={typeof item.label === \"string\" ? item.label : index}>\n              <dt className=\"mb-1 font-mono text-[0.625rem] uppercase tracking-[0.16em] text-muted\">\n                {item.label}\n              </dt>\n              <dd className=\"text-[0.9375rem] font-semibold text-ink\">\n                {item.value}\n              </dd>\n            </div>\n          ))}\n        </dl>\n      )}\n\n      {children != null && <div className=\"mt-14\">{children}</div>}\n\n      {tags != null && <div className=\"mt-8 flex flex-wrap gap-2\">{tags}</div>}\n    </header>\n  ),\n);\nCaseStudyHero.displayName = \"CaseStudyHero\";\n"
    }
  ]
}