{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "announcement-banner-split",
  "title": "Announcement — Split Banner",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/announcement-banner-split/announcement-banner-split.component.ts",
      "content": "// Full-width announcement band split between a labelled message column and an\n// action column, sized for release notes and maintenance notices. Port of the\n// Vue/React block 1:1. `tone` flips the icon, badge, copy and actions together.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, CircleAlert, Info, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type AnnouncementBannerSplitTone = 'neutral' | 'attention'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-announcement-banner-split, [ui-announcement-banner-split]',\n  standalone: true,\n  // The block renders its own <section>: keep this wrapper out of the layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],\n  template: `\n    <section data-slot=\"announcement-banner-split\" [class]=\"rootClass\">\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          @if (tone === 'attention') {\n            <lucide-icon [img]=\"CircleAlert\" class=\"text-destructive mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n          } @else {\n            <lucide-icon [img]=\"Info\" class=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n          }\n          <div class=\"min-w-0\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <span ui-badge [variant]=\"tone === 'attention' ? 'outline' : 'secondary'\">\n                {{ tone === 'attention' ? 'Scheduled maintenance' : 'Release 2.4.0' }}\n              </span>\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              @if (tone === 'attention') {\n                Query serving stays online. Scheduled materialisation pauses for the window and resumes automatically.\n              } @else {\n                Command palette, table virtualisation past 10k rows, and AA-contrast sidebar badges in dark mode.\n              }\n            </p>\n          </div>\n        </div>\n\n        <ui-separator orientation=\"vertical\" class=\"hidden h-10 sm:block\" />\n\n        <div class=\"flex shrink-0 items-center gap-2\">\n          <button ui-button variant=\"outline\" size=\"sm\">\n            {{ tone === 'attention' ? 'Status page' : 'Full changelog' }}\n            <lucide-icon [img]=\"ArrowRight\" [class]=\"'ml-1.5 size-3.5'\" aria-hidden=\"true\" />\n          </button>\n          <button ui-button variant=\"ghost\" size=\"sm\">Subscribe</button>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiAnnouncementBannerSplitComponent {\n  @Input() tone: AnnouncementBannerSplitTone = 'neutral'\n  @Input('class') className?: string\n\n  protected readonly CircleAlert = CircleAlert\n  protected readonly Info = Info\n  protected readonly ArrowRight = ArrowRight\n\n  get rootClass(): string {\n    return cn(\n      'border-b',\n      this.tone === 'attention' ? 'border-border bg-muted' : 'border-border bg-card',\n      this.className,\n    )\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/announcement-banner-split/announcement-banner-split.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/announcement-banner-split/index.ts",
      "content": "export {\n  UiAnnouncementBannerSplitComponent,\n  type AnnouncementBannerSplitTone,\n} from './announcement-banner-split.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/announcement-banner-split/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/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"
}