{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "newsletter-inline-band",
  "title": "Newsletter — Inline Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/newsletter-inline-band/NewsletterInlineBand.tsx",
      "content": "'use client'\n\nimport { useState, type FormEvent } from 'react'\nimport { Check, Mail } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\nexport function NewsletterInlineBand() {\n  const [email, setEmail] = useState('')\n  const [submitted, setSubmitted] = useState(false)\n\n  function subscribe(event: FormEvent) {\n    event.preventDefault()\n    if (!email.trim()) return\n    setSubmitted(true)\n  }\n\n  return (\n    <section data-slot=\"newsletter-inline-band\" className=\"border-border bg-muted/40 border-y\">\n      <div className=\"mx-auto flex max-w-6xl flex-col gap-6 px-6 py-10 lg:flex-row lg:items-center lg:gap-12\">\n        <div className=\"min-w-0 lg:flex-1\">\n          <div className=\"flex items-center gap-2\">\n            <Mail className=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n            <Badge variant=\"secondary\">Monthly</Badge>\n          </div>\n          <p className=\"mt-2.5 text-lg leading-snug font-medium text-balance\">\n            Engineering notes on metric modelling, access control, and warehouse cost.\n          </p>\n          <p className=\"text-muted-foreground mt-1.5 text-sm\">\n            Read by 8,400 data and finance engineers. One email a month, no product announcements.\n          </p>\n        </div>\n\n        <form className=\"lg:w-[26rem] lg:shrink-0\" onSubmit={subscribe}>\n          <div className=\"flex gap-2\">\n            <Input\n              value={email}\n              onChange={(event) => setEmail(event.target.value)}\n              type=\"email\"\n              required\n              placeholder=\"you@company.com\"\n              autoComplete=\"email\"\n              aria-label=\"Email address\"\n            />\n            <Button type=\"submit\" className=\"shrink-0\">\n              Subscribe\n            </Button>\n          </div>\n          {/* Status row is reserved from first paint, so confirming does not\n              nudge the band's height and shift the page under the cursor. */}\n          <p className=\"mt-2 min-h-5 text-xs\" aria-live=\"polite\">\n            {submitted ? (\n              <span className=\"text-success inline-flex items-center gap-1.5\">\n                <Check className=\"size-3\" aria-hidden=\"true\" />\n                Check your inbox to confirm.\n              </span>\n            ) : (\n              <span className=\"text-muted-foreground\">Unsubscribe in one click. We never share the list.</span>\n            )}\n          </p>\n        </form>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/NewsletterInlineBand.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/input.json"
  ],
  "description": "Slim full-width signup band with an inline field, submit button, subscriber count as proof, and a status line that reserves its own row so confirming never shifts the layout.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "newsletter"
}