{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "description": "Communicate important information or status to users.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/ui/alert.tsx",
      "content": "import * as React from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst alertVariants = cva(\r\n    \"relative w-full rounded-base border-2 border-black p-4 shadow-brutal [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-black\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                default: \"bg-main text-black\",\r\n                neutral: \"bg-white text-black\",\r\n                destructive: \"bg-hot-pink text-black\",\r\n                success: \"bg-mint text-black\",\r\n                warning: \"bg-lemon text-black\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"default\",\r\n        },\r\n    }\r\n)\r\n\r\nfunction InfoIcon(props: React.SVGProps<SVGSVGElement>) {\r\n    return (\r\n        <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"20\"\r\n            height=\"20\"\r\n            fill=\"currentColor\"\r\n            viewBox=\"0 0 256 256\"\r\n            {...props}\r\n        >\r\n            <path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z\" />\r\n        </svg>\r\n    )\r\n}\r\n\r\nfunction ErrorIcon(props: React.SVGProps<SVGSVGElement>) {\r\n    return (\r\n        <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"20\"\r\n            height=\"20\"\r\n            fill=\"currentColor\"\r\n            viewBox=\"0 0 256 256\"\r\n            {...props}\r\n        >\r\n            <path d=\"M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z\" />\r\n        </svg>\r\n    )\r\n}\r\n\r\nfunction SuccessIcon(props: React.SVGProps<SVGSVGElement>) {\r\n    return (\r\n        <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"20\"\r\n            height=\"20\"\r\n            fill=\"currentColor\"\r\n            viewBox=\"0 0 256 256\"\r\n            {...props}\r\n        >\r\n            <path d=\"M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z\" />\r\n        </svg>\r\n    )\r\n}\r\n\r\nfunction WarningIcon(props: React.SVGProps<SVGSVGElement>) {\r\n    return (\r\n        <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"20\"\r\n            height=\"20\"\r\n            fill=\"currentColor\"\r\n            viewBox=\"0 0 256 256\"\r\n            {...props}\r\n        >\r\n            <path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z\" />\r\n        </svg>\r\n    )\r\n}\r\n\r\nconst variantIcons = {\r\n    default: InfoIcon,\r\n    neutral: InfoIcon,\r\n    destructive: ErrorIcon,\r\n    success: SuccessIcon,\r\n    warning: WarningIcon,\r\n}\r\n\r\ninterface AlertProps\r\n    extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof alertVariants> {\r\n    icon?: React.ReactNode\r\n}\r\n\r\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\r\n    ({ className, variant = \"default\", icon, children, ...props }, ref) => {\r\n        const IconComponent = variantIcons[variant ?? \"default\"]\r\n\r\n        return (\r\n            <div\r\n                ref={ref}\r\n                role=\"alert\"\r\n                className={cn(alertVariants({ variant }), className)}\r\n                {...props}\r\n            >\r\n                {icon !== undefined ? icon : <IconComponent aria-hidden=\"true\" />}\r\n                {children}\r\n            </div>\r\n        )\r\n    }\r\n)\r\nAlert.displayName = \"Alert\"\r\n\r\nconst AlertTitle = React.forwardRef<\r\n    HTMLHeadingElement,\r\n    React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n    <h5\r\n        ref={ref}\r\n        className={cn(\"mb-1 font-medium\", className)}\r\n        {...props}\r\n    />\r\n))\r\nAlertTitle.displayName = \"AlertTitle\"\r\n\r\nconst AlertDescription = React.forwardRef<\r\n    HTMLDivElement,\r\n    React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n    <div\r\n        ref={ref}\r\n        className={cn(\"text-sm\", className)}\r\n        {...props}\r\n    />\r\n))\r\nAlertDescription.displayName = \"AlertDescription\"\r\n\r\nexport { Alert, AlertTitle, AlertDescription }\r\n",
      "type": "registry:ui"
    }
  ]
}