{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "announcement-banner-split",
  "title": "Announcement — Split Banner",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/announcement-banner-split/AnnouncementBannerSplit.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight, CircleAlert, Info } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\n\nwithDefaults(defineProps<{ tone?: 'neutral' | 'attention' }>(), { tone: 'neutral' })\n</script>\n\n<template>\n  <section\n    data-slot=\"announcement-banner-split\"\n    class=\"border-b\"\n    :class=\"tone === 'attention' ? 'border-border bg-muted' : 'border-border bg-card'\"\n  >\n    <div class=\"mx-auto flex max-w-6xl flex-col gap-4 px-6 py-4 sm:flex-row sm:items-center sm:gap-8\">\n      <!-- Message column carries the classification; the action column stays\n           the same width whatever the message length, so a stack of these\n           banners aligns down the page. -->\n      <div class=\"flex min-w-0 flex-1 items-start gap-3\">\n        <component\n          :is=\"tone === 'attention' ? CircleAlert : Info\"\n          class=\"mt-0.5 size-4 shrink-0\"\n          :class=\"tone === 'attention' ? 'text-destructive' : 'text-muted-foreground'\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"min-w-0\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Badge :variant=\"tone === 'attention' ? 'outline' : 'secondary'\">\n              {{ tone === 'attention' ? 'Scheduled maintenance' : 'Release 2.4.0' }}\n            </Badge>\n            <span class=\"text-muted-foreground font-mono text-xs\">Aug 14, 2026 · 02:00–04:00 UTC</span>\n          </div>\n          <p class=\"mt-1.5 text-sm leading-relaxed\">\n            <template v-if=\"tone === 'attention'\">\n              Query serving stays online. Scheduled materialisation pauses for the window and resumes automatically.\n            </template>\n            <template v-else>\n              Command palette, table virtualisation past 10k rows, and AA-contrast sidebar badges in dark mode.\n            </template>\n          </p>\n        </div>\n      </div>\n\n      <Separator orientation=\"vertical\" class=\"hidden h-10 sm:block\" />\n\n      <div class=\"flex shrink-0 items-center gap-2\">\n        <Button variant=\"outline\" size=\"sm\">\n          {{ tone === 'attention' ? 'Status page' : 'Full changelog' }}\n          <ArrowRight class=\"ml-1.5 size-3.5\" aria-hidden=\"true\" />\n        </Button>\n        <Button variant=\"ghost\" size=\"sm\">Subscribe</Button>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AnnouncementBannerSplit.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/separator.json"
  ],
  "description": "Full-width announcement band split between a labelled message column and an action column, sized for release notes and maintenance notices rather than promotions.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "announcement"
}