{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-group",
  "type": "registry:ui",
  "title": "CTA group",
  "description": "A row of call-to-action links styled as buttons. Because they are links, people can open them in a new tab.",
  "categories": [
    "atom"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/button.json",
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/ui/cta-group.tsx",
      "type": "registry:ui",
      "target": "components/ui/cta-group.tsx",
      "content": "/**\n * CtaGroup — renders a list of calls to action as buttons.\n *\n * Every action is an anchor, because a marketing CTA navigates. That keeps the\n * group renderable from a server component and preserves middle-click, \"open in\n * new tab\", and the browser's own link affordances, none of which survive a\n * `<button onClick={router.push}>`.\n *\n * Pass `link={Link}` to route through `next/link` (or any router's link) without\n * this file importing a framework.\n *\n * a11y: the first action defaults to `primary` and the rest to `outline`, so the\n * primary path is never ambiguous. `external` adds `rel=\"noopener noreferrer\"`\n * plus a visually hidden \"(opens in a new tab)\" so the behaviour is announced.\n *\n * Dependencies: react, @/lib/types, @/lib/utils, ./button.\n */\n\nimport type { ElementType } from \"react\"\n\nimport type { CtaItem, LinkComponent } from \"@/lib/types\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nexport interface CtaGroupProps {\n  items: CtaItem[]\n  /** Your link component, such as `next/link`. Defaults to `\"a\"`. */\n  link?: LinkComponent\n  size?: \"sm\" | \"md\" | \"lg\"\n  align?: \"start\" | \"center\" | \"end\"\n  /** Stacks the buttons at full width on small screens. Common inside a hero. */\n  stackOnMobile?: boolean\n  className?: string\n}\n\nconst alignment = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n} as const\n\nexport function CtaGroup({\n  items,\n  link,\n  size = \"md\",\n  align = \"start\",\n  stackOnMobile = false,\n  className,\n}: CtaGroupProps) {\n  if (items.length === 0) return null\n  const Link = (link ?? \"a\") as ElementType\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center gap-3\",\n        alignment[align],\n        stackOnMobile && \"flex-col sm:flex-row\",\n        className,\n      )}\n    >\n      {items.map((item, index) => {\n        const variant = item.variant ?? (index === 0 ? \"primary\" : \"outline\")\n        return (\n          <Link\n            key={`${item.href}-${item.label}`}\n            href={item.href}\n            aria-label={item[\"aria-label\"]}\n            {...(item.external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {})}\n            className={cn(\n              buttonVariants({ variant, size }),\n              stackOnMobile && \"w-full sm:w-auto\",\n            )}\n          >\n            {item.label}\n            {item.external ? (\n              <span className=\"sr-only\"> (opens in a new tab)</span>\n            ) : null}\n          </Link>\n        )\n      })}\n    </div>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/cta-group"
}