{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "description": "Prominent message banner for displaying important information, warnings, or errors to users.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "packages/ui/src/alert.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n// ---------------------------------------------------------------------------\n// Variants\n// ---------------------------------------------------------------------------\n\nconst alertVariants = cva(\n  [\n    \"group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm\",\n    // SVG boilerplate\n    \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    // Grid layout when an icon SVG is a direct child\n    \"has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2\",\n    // Icon spans both title + description rows\n    \"*:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current\",\n    // Reserve right padding when an action slot is present\n    \"has-data-[slot=alert-action]:pr-18\",\n  ].join(\" \"),\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-border-muted bg-card text-card-foreground *:data-[slot=alert-description]:text-muted-foreground\",\n        success: [\n          \"bg-green-500/15 dark:bg-green-500/10\",\n          \"border-green-500/20 dark:border-green-500/15\",\n          \"text-green-700 dark:text-green-400\",\n          \"*:data-[slot=alert-description]:text-green-700/80 dark:*:data-[slot=alert-description]:text-green-400/80\",\n        ].join(\" \"),\n        warning: [\n          \"bg-yellow-500/15 dark:bg-yellow-500/10\",\n          \"border-yellow-500/20 dark:border-yellow-500/15\",\n          \"text-yellow-700 dark:text-yellow-300\",\n          \"*:data-[slot=alert-description]:text-yellow-700/80 dark:*:data-[slot=alert-description]:text-yellow-300/80\",\n        ].join(\" \"),\n        error: [\n          \"bg-red-500/15 dark:bg-red-500/10\",\n          \"border-red-500/20 dark:border-red-500/15\",\n          \"text-red-700 dark:text-red-400\",\n          \"*:data-[slot=alert-description]:text-red-700/80 dark:*:data-[slot=alert-description]:text-red-400/80\",\n        ].join(\" \"),\n        info: [\n          \"bg-blue-500/15 dark:bg-blue-500/10\",\n          \"border-blue-500/20 dark:border-blue-500/15\",\n          \"text-blue-700 dark:text-blue-400\",\n          \"*:data-[slot=alert-description]:text-blue-700/80 dark:*:data-[slot=alert-description]:text-blue-400/80\",\n        ].join(\" \"),\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\ntype AlertVariantsProps = VariantProps<typeof alertVariants>;\n\n// ---------------------------------------------------------------------------\n// Alert\n// ---------------------------------------------------------------------------\n\nexport interface AlertProps\n  extends React.ComponentProps<\"div\">,\n    AlertVariantsProps {\n  /**\n   * The visual style of the alert.\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n}\n\nconst Alert = ({\n  className,\n  variant,\n  ref,\n  ...props\n}: AlertProps & React.RefAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(alertVariants({ variant }), className)}\n    data-slot=\"alert\"\n    ref={ref}\n    role=\"alert\"\n    {...props}\n  />\n);\n\nAlert.displayName = \"Alert\";\n\n// ---------------------------------------------------------------------------\n// AlertTitle\n// ---------------------------------------------------------------------------\n\nexport interface AlertTitleProps extends React.ComponentProps<\"div\"> {}\n\nconst AlertTitle = ({\n  className,\n  ref,\n  ...props\n}: AlertTitleProps & React.RefAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n      className\n    )}\n    data-slot=\"alert-title\"\n    ref={ref}\n    {...props}\n  />\n);\n\nAlertTitle.displayName = \"AlertTitle\";\n\n// ---------------------------------------------------------------------------\n// AlertDescription\n// ---------------------------------------------------------------------------\n\nexport interface AlertDescriptionProps extends React.ComponentProps<\"div\"> {}\n\nconst AlertDescription = ({\n  className,\n  ref,\n  ...props\n}: AlertDescriptionProps & React.RefAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"text-balance text-sm group-has-[>svg]/alert:col-start-2 md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n      className\n    )}\n    data-slot=\"alert-description\"\n    ref={ref}\n    {...props}\n  />\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n\n// ---------------------------------------------------------------------------\n// AlertAction\n// ---------------------------------------------------------------------------\n\nexport interface AlertActionProps extends React.ComponentProps<\"div\"> {}\n\nconst AlertAction = ({\n  className,\n  ref,\n  ...props\n}: AlertActionProps & React.RefAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"absolute top-3 right-3\", className)}\n    data-slot=\"alert-action\"\n    ref={ref}\n    {...props}\n  />\n);\n\nAlertAction.displayName = \"AlertAction\";\n\n// ---------------------------------------------------------------------------\n// Exports\n// ---------------------------------------------------------------------------\n\nexport { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}