{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/alert.tsx",
      "content": "import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AlertVariant =\n  | \"default\"\n  | \"info\"\n  | \"brand\"\n  | \"success\"\n  | \"warning\"\n  | \"destructive\";\n\nconst surfaces: Record<AlertVariant, string> = {\n  default: \"border-hairline bg-card\",\n  info: \"border-hairline bg-panel\",\n  brand: \"border-brand/30 bg-brand/8\",\n  success: \"border-emerald-500/30 bg-emerald-500/10\",\n  warning: \"border-amber-500/30 bg-amber-500/10\",\n  destructive: \"border-destructive/30 bg-destructive/10\",\n};\n\nconst iconTint: Record<AlertVariant, string> = {\n  default: \"text-muted-foreground\",\n  info: \"text-muted-foreground\",\n  brand: \"text-brand-bright\",\n  success: \"text-emerald-600 dark:text-emerald-400\",\n  warning: \"text-amber-600 dark:text-amber-400\",\n  destructive: \"text-destructive\",\n};\n\ntype AlertProps = HTMLAttributes<HTMLDivElement> & {\n  variant?: AlertVariant;\n  /** Optional leading icon (e.g. a lucide icon element); rendered decoratively. */\n  icon?: ReactNode;\n};\n\nexport function Alert({\n  variant = \"default\",\n  icon,\n  role,\n  className,\n  children,\n  ...props\n}: AlertProps) {\n  return (\n    <div\n      data-slot=\"alert\"\n      data-variant={variant}\n      // Errors/warnings announce assertively (role=\"alert\"); the rest are polite\n      // status regions - more correct than a blanket role=\"alert\".\n      role={role ?? (variant === \"destructive\" || variant === \"warning\" ? \"alert\" : \"status\")}\n      className={cn(\n        \"flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-sm text-foreground\",\n        surfaces[variant],\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span\n          data-slot=\"alert-icon\"\n          aria-hidden=\"true\"\n          className={cn(\"mt-0.5 shrink-0 [&_svg]:size-4\", iconTint[variant])}\n        >\n          {icon}\n        </span>\n      )}\n      <div data-slot=\"alert-content\" className=\"min-w-0 flex-1 space-y-1\">\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport function AlertTitle({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {\n  return (\n    <p\n      data-slot=\"alert-title\"\n      className={cn(\"font-medium leading-none tracking-tight text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDescription({\n  className,\n  ...props\n}: HTMLAttributes<HTMLParagraphElement>) {\n  return (\n    <p\n      data-slot=\"alert-description\"\n      className={cn(\"text-sm leading-relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/alert.tsx"
    }
  ]
}