{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "promo-card",
  "title": "Promo card",
  "description": "tinted offer/nudge card · arrow CTA, dismiss X, generated art · one per page",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "@kit/placeholder"
  ],
  "files": [
    {
      "path": "components/kit/promo-card.tsx",
      "content": "import { cn } from 'cn';\nimport { ArrowRightIcon, type LucideIcon, XIcon } from 'lucide-react';\nimport Link from 'next/link';\nimport { Placeholder } from '@/components/kit/placeholder';\n\nexport type PromoTone = 'primary' | 'success' | 'info' | 'warning' | 'muted';\n\ntype Props = {\n  title: string;\n  body?: string;\n  /** The arrow button. `label` is its accessible name (default: the title). Pass `href` to make it a link. */\n  action?: { label?: string; onClick?: () => void; href?: string };\n  /** Adds the dismiss X. */\n  onDismiss?: () => void;\n  tone?: PromoTone;\n  /** Seed for the generated art on the right. Defaults to the title. */\n  seed?: string;\n  /** Show an icon instead of the generated art. */\n  icon?: LucideIcon;\n  className?: string;\n};\n\nconst SURFACE: Record<PromoTone, string> = {\n  primary: 'bg-primary/10',\n  success: 'bg-success/10',\n  info: 'bg-info/10',\n  warning: 'bg-warning/10',\n  muted: 'bg-muted',\n};\n\nconst BUTTON: Record<PromoTone, string> = {\n  primary: 'bg-primary text-primary-foreground',\n  success: 'bg-success text-success-foreground',\n  info: 'bg-info text-info-foreground',\n  warning: 'bg-warning text-warning-foreground',\n  muted: 'bg-foreground text-background',\n};\n\n/**\n * The tinted offer card: an upsell, a nudge, a feature announcement.\n *\n * At most one per page, and always dismissible when it is promotional rather than required. The art bleeds off\n * the right edge; it is generated, so it needs no asset.\n */\nexport function PromoCard({ title, body, action, onDismiss, tone = 'primary', seed, icon: Icon, className }: Props) {\n  const buttonClass = cn(\n    'focus-visible:ring-ring/50 mt-2 inline-flex size-10 items-center justify-center rounded-lg outline-none transition-opacity hover:opacity-90 focus-visible:ring-[3px]',\n    BUTTON[tone]\n  );\n  return (\n    <section aria-label={title} className={cn('relative flex overflow-hidden rounded-xl', SURFACE[tone], className)}>\n      <div className=\"flex min-w-0 flex-1 flex-col items-start gap-2 p-5\">\n        <p className=\"pr-6 font-semibold\">{title}</p>\n        {body ? <p className=\"text-muted-foreground text-sm leading-5\">{body}</p> : null}\n        {action ? (\n          action.href ? (\n            <Link href={action.href} aria-label={action.label ?? title} className={buttonClass}>\n              <ArrowRightIcon className=\"size-[18px]\" aria-hidden />\n            </Link>\n          ) : (\n            <button type=\"button\" onClick={action.onClick} aria-label={action.label ?? title} className={buttonClass}>\n              <ArrowRightIcon className=\"size-[18px]\" aria-hidden />\n            </button>\n          )\n        ) : null}\n      </div>\n      <div className=\"flex w-28 shrink-0 items-end justify-end\">\n        {Icon ? (\n          <span className=\"flex size-full items-center justify-center\">\n            <Icon className=\"text-foreground size-11 opacity-20\" aria-hidden />\n          </span>\n        ) : (\n          <div className=\"-mr-6 -mb-6 size-32 opacity-70\">\n            <Placeholder seed={seed ?? title} className=\"rounded-full bg-transparent\" />\n          </div>\n        )}\n      </div>\n      {onDismiss ? (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Dismiss\"\n          className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 absolute top-2 right-2 inline-flex size-8 items-center justify-center rounded-md outline-none focus-visible:ring-[3px]\">\n          <XIcon className=\"size-4\" aria-hidden />\n        </button>\n      ) : null}\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/promo-card.tsx"
    }
  ],
  "meta": {
    "exports": [
      "PromoCard"
    ],
    "api": "<PromoCard title body? action? onDismiss? tone? seed? icon? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "layout"
  ],
  "type": "registry:component"
}