{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "announcement-banner",
  "title": "Announcement Banner",
  "description": "Dismissable top-of-page animated banner with multiple color variants",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/announcement-banner.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport { motion, AnimatePresence } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnnouncementBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  message: string\n  href?: string\n  cta?: string\n  variant?: \"default\" | \"primary\" | \"warning\" | \"success\"\n  dismissible?: boolean\n  icon?: React.ReactNode\n  onDismiss?: () => void\n}\n\nconst XIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    strokeLinecap=\"round\"\n    className=\"h-3.5 w-3.5\"\n  >\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  </svg>\n)\n\nconst ArrowRight = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"h-3.5 w-3.5\"\n  >\n    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n    <polyline points=\"12 5 19 12 12 19\" />\n  </svg>\n)\n\nexport function AnnouncementBanner({\n  message,\n  href,\n  cta,\n  variant = \"default\",\n  dismissible = true,\n  icon,\n  onDismiss,\n  className,\n  ...props\n}: AnnouncementBannerProps) {\n  const [visible, setVisible] = useState(true)\n\n  const variantClass = {\n    default: \"bg-muted border-b text-foreground\",\n    primary: \"bg-primary text-primary-foreground\",\n    warning: \"bg-amber-500 text-white\",\n    success: \"bg-emerald-500 text-white\",\n  }[variant]\n\n  const handleDismiss = () => {\n    setVisible(false)\n    onDismiss?.()\n  }\n\n  return (\n    <AnimatePresence>\n      {visible && (\n        <motion.div\n          initial={{ height: 0, opacity: 0 }}\n          animate={{ height: \"auto\", opacity: 1 }}\n          exit={{ height: 0, opacity: 0 }}\n          transition={{ duration: 0.2, ease: \"easeInOut\" }}\n          className={cn(\"w-full overflow-hidden\", className)}\n        >\n          <div className={cn(\"flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium\", variantClass)}>\n            {icon && <span className=\"flex-shrink-0\">{icon}</span>}\n\n            <div className=\"flex flex-wrap items-center justify-center gap-1.5\">\n              <span>{message}</span>\n              {href && cta && (\n                <a\n                  href={href}\n                  className=\"inline-flex items-center gap-1 underline underline-offset-2 opacity-80 hover:opacity-100 transition-opacity\"\n                >\n                  {cta}\n                  <ArrowRight />\n                </a>\n              )}\n            </div>\n\n            {dismissible && (\n              <button\n                onClick={handleDismiss}\n                aria-label=\"Dismiss\"\n                className=\"ml-2 flex-shrink-0 rounded p-0.5 opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current\"\n              >\n                <XIcon />\n              </button>\n            )}\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/announcement-banner.tsx"
    }
  ],
  "type": "registry:ui"
}