{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-alert",
  "type": "registry:ui",
  "title": "Inline alert",
  "description": "An inline React message box in neutral, success, warning and danger tones with a matching icon, an optional title and body text. Announced with role alert.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/inline-alert.tsx",
      "type": "registry:ui",
      "target": "components/ui/inline-alert.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { AlertCircleIcon, CheckCircle2Icon, InfoIcon, TriangleAlertIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nconst icons = {\n  neutral: InfoIcon,\n  success: CheckCircle2Icon,\n  warning: TriangleAlertIcon,\n  danger: AlertCircleIcon,\n} as const\n\nfunction InlineAlert({\n  title,\n  children,\n  tone = \"neutral\",\n  className,\n}: {\n  title?: React.ReactNode\n  children?: React.ReactNode\n  tone?: keyof typeof icons\n  className?: string\n}) {\n  const Icon = icons[tone]\n  return (\n    <div\n      data-slot=\"inline-alert\"\n      role=\"alert\"\n      className={cn(\n        \"flex gap-3 rounded-xl border border-border bg-surface p-3 text-sm shadow-highlight\",\n        tone === \"danger\" && \"border-danger\",\n        tone === \"warning\" && \"border-warning\",\n        tone === \"success\" && \"border-success\",\n        className\n      )}\n    >\n      <Icon className=\"mt-0.5 size-4 shrink-0 text-fg\" aria-hidden />\n      <div className=\"min-w-0\">\n        {title ? <p className=\"font-medium text-fg\">{title}</p> : null}\n        {children ? <p className={cn(\"text-fg\", title && \"mt-1\")}>{children}</p> : null}\n      </div>\n    </div>\n  )\n}\nexport { InlineAlert }\n"
    }
  ]
}