{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "banner",
  "type": "registry:ui",
  "title": "Banner",
  "description": "Inline notice banner in accent, warning or danger tones, with a status role, a slot for an action button and an optional dismiss icon on the right.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/icon-button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/banner.tsx",
      "type": "registry:ui",
      "target": "components/ui/banner.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { IconButton } from \"@/components/ui/icon-button\"\n\nfunction Banner({\n  children,\n  tone = \"accent\",\n  className,\n  action,\n  onDismiss,\n}: {\n  children: React.ReactNode\n  tone?: \"accent\" | \"warning\" | \"danger\"\n  className?: string\n  action?: React.ReactNode\n  onDismiss?: () => void\n}) {\n  return (\n    <div\n      data-slot=\"banner\"\n      role=\"status\"\n      className={cn(\n        \"flex items-center justify-between gap-3 border px-4 py-2.5 text-sm shadow-highlight\",\n        tone === \"accent\" && \"border-accent/30 bg-accent/10 text-fg\",\n        tone === \"warning\" && \"border-warning/40 bg-warning/15 text-fg\",\n        tone === \"danger\" && \"border-danger/40 bg-danger/10 text-fg\",\n        className\n      )}\n    >\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {action}\n        {onDismiss ? (\n          <IconButton type=\"button\" size=\"icon-sm\" variant=\"ghost\" aria-label=\"Dismiss\" onClick={onDismiss}>\n            <XIcon />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  )\n}\nexport { Banner }\n"
    }
  ]
}