{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "newsletter-inline-band",
  "title": "Newsletter — Inline Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/newsletter-inline-band/NewsletterInlineBand.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Check, Mail } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\nconst email = ref('')\nconst submitted = ref(false)\n\nfunction subscribe() {\n  if (!email.value.trim()) return\n  submitted.value = true\n}\n</script>\n\n<template>\n  <section data-slot=\"newsletter-inline-band\" class=\"border-border bg-muted/40 border-y\">\n    <div class=\"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 class=\"min-w-0 lg:flex-1\">\n        <div class=\"flex items-center gap-2\">\n          <Mail class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n          <Badge variant=\"secondary\">Monthly</Badge>\n        </div>\n        <p class=\"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 class=\"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 class=\"lg:w-[26rem] lg:shrink-0\" @submit.prevent=\"subscribe\">\n        <div class=\"flex gap-2\">\n          <Input\n            v-model=\"email\"\n            type=\"email\"\n            required\n            placeholder=\"you@company.com\"\n            autocomplete=\"email\"\n            aria-label=\"Email address\"\n          />\n          <Button type=\"submit\" class=\"shrink-0\">Subscribe</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 class=\"mt-2 min-h-5 text-xs\" aria-live=\"polite\">\n          <span v-if=\"submitted\" class=\"text-success inline-flex items-center gap-1.5\">\n            <Check class=\"size-3\" aria-hidden=\"true\" />\n            Check your inbox to confirm.\n          </span>\n          <span v-else class=\"text-muted-foreground\">Unsubscribe in one click. We never share the list.</span>\n        </p>\n      </form>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/NewsletterInlineBand.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/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"
}