{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "newsletter-callout",
  "title": "Newsletter Callout",
  "description": "A newsletter signup callout with a consumer-owned form endpoint.",
  "registryDependencies": [],
  "files": [
    {
      "path": "payload-components/source/components/NewsletterCallout/Component.tsx",
      "content": "import React, { useId } from 'react'\n\nexport type NewsletterCalloutProps = {\n  title: string\n  description?: string | null\n  action: string\n  emailPlaceholder?: string\n  legalText?: string | null\n  buttonLabel?: string\n  emailLabel?: string\n  id?: string\n  className?: string\n  disableInnerContainer?: boolean\n}\n\n/** Newsletter signup form; your application owns the endpoint, consent, and response handling. */\nexport function NewsletterCallout({\n  title,\n  description,\n  action,\n  emailPlaceholder = 'you@example.com',\n  legalText,\n  buttonLabel = 'Subscribe',\n  emailLabel = 'Email address',\n  id,\n  className,\n  disableInnerContainer = false,\n}: NewsletterCalloutProps) {\n  const generatedEmailId = useId()\n  const emailId = id ? `${id}-email` : generatedEmailId\n\n  return (\n    <section\n      id={id}\n      aria-labelledby={id ? `${id}-title` : undefined}\n      className={['bg-background py-12 text-foreground', className].filter(Boolean).join(' ')}\n    >\n      <div className={disableInnerContainer ? undefined : 'container mx-auto px-6'}>\n        <div className=\"mx-auto max-w-3xl rounded-2xl border border-border bg-muted/40 p-6 sm:p-10\">\n          <h2 id={id ? `${id}-title` : undefined} className=\"font-serif text-3xl tracking-tight\">\n            {title}\n          </h2>\n          {description ? (\n            <p className=\"mt-3 max-w-2xl text-base leading-7 text-muted-foreground\">\n              {description}\n            </p>\n          ) : null}\n          <form action={action} method=\"post\" className=\"mt-6 flex flex-col gap-3 sm:flex-row\">\n            <label className=\"sr-only\" htmlFor={emailId}>\n              {emailLabel}\n            </label>\n            <input\n              id={emailId}\n              name=\"email\"\n              type=\"email\"\n              autoComplete=\"email\"\n              required\n              placeholder={emailPlaceholder}\n              className=\"min-h-11 min-w-0 flex-1 rounded-md border border-input bg-background px-4 text-base outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n            />\n            <button\n              type=\"submit\"\n              className=\"min-h-11 rounded-md bg-primary px-5 font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n            >\n              {buttonLabel}\n            </button>\n          </form>\n          {legalText ? <p className=\"mt-3 text-xs leading-5 text-muted-foreground\">{legalText}</p> : null}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:file",
      "target": "~/src/components/NewsletterCallout/Component.tsx"
    }
  ],
  "meta": {
    "payloadComponent": {
      "installCommand": "payload-components add newsletter-callout",
      "postInstall": [],
      "requiresPayloadComponentWrapper": false,
      "supportedTargets": [
        "payload-website-starter",
        "payload-blocks-app"
      ]
    }
  },
  "docs": "File-only article template component. Import NewsletterCallout from @/components/NewsletterCallout/Component and pass the content explicitly. Your application owns the form endpoint and subscriber handling. Direct install: pnpm dlx shadcn@latest add https://www.payload-components.xyz/r/newsletter-callout.json Optional tracked install in a supported Payload project: payload-components add newsletter-callout.",
  "type": "registry:component"
}