{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "description": "Alert with a variant x tone matrix: 2 variants (soft, outline) x 6 tones. Optional leading icon, AlertTitle and AlertDescription. role=alert.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/alert.tsx",
      "content": "import type * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Icon slot works with either a lucide `<svg>` or a remix-icon `<i>` as the\n// first child. Both trigger the icon column and are sized/positioned so the\n// glyph aligns with the title (description wraps below in column 2).\nconst alertVariants = cva(\n  \"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-2 has-[>i]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>i]:gap-x-2 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>i]:block [&>i]:size-4 [&>i]:translate-y-0.5 [&>i]:text-base [&>i]:leading-none\",\n  {\n    variants: {\n      variant: {\n        soft: \"border-transparent\",\n        outline: \"bg-transparent\",\n      },\n      tone: {\n        neutral: \"\",\n        brand: \"\",\n        success: \"\",\n        warning: \"\",\n        danger: \"\",\n        info: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"soft\", tone: \"neutral\", class: \"bg-surface-3 text-foreground [&>svg]:text-muted-foreground [&>i]:text-muted-foreground\" },\n      { variant: \"soft\", tone: \"brand\", class: \"bg-brand-soft text-brand-soft-foreground [&>svg]:text-brand [&>i]:text-brand\" },\n      { variant: \"soft\", tone: \"success\", class: \"bg-success-soft text-success-soft-foreground [&>svg]:text-success [&>i]:text-success\" },\n      { variant: \"soft\", tone: \"warning\", class: \"bg-warning-soft text-warning-soft-foreground [&>svg]:text-warning-soft-foreground [&>i]:text-warning-soft-foreground\" },\n      { variant: \"soft\", tone: \"danger\", class: \"bg-danger-soft text-danger-soft-foreground [&>svg]:text-danger [&>i]:text-danger\" },\n      { variant: \"soft\", tone: \"info\", class: \"bg-info-soft text-info-soft-foreground [&>svg]:text-info [&>i]:text-info\" },\n      { variant: \"outline\", tone: \"neutral\", class: \"border-border text-foreground [&>svg]:text-muted-foreground [&>i]:text-muted-foreground\" },\n      { variant: \"outline\", tone: \"brand\", class: \"border-brand/30 text-foreground [&>svg]:text-brand [&>i]:text-brand\" },\n      { variant: \"outline\", tone: \"success\", class: \"border-success/30 text-foreground [&>svg]:text-success [&>i]:text-success\" },\n      { variant: \"outline\", tone: \"warning\", class: \"border-warning/40 text-foreground [&>svg]:text-warning-soft-foreground [&>i]:text-warning-soft-foreground\" },\n      { variant: \"outline\", tone: \"danger\", class: \"border-danger/30 text-foreground [&>svg]:text-danger [&>i]:text-danger\" },\n      { variant: \"outline\", tone: \"info\", class: \"border-info/30 text-foreground [&>svg]:text-info [&>i]:text-info\" },\n    ],\n    defaultVariants: { variant: \"soft\", tone: \"neutral\" },\n  }\n)\n\ninterface AlertProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof alertVariants> {}\n\nfunction Alert({ className, variant, tone, ...props }: AlertProps) {\n  return (\n    <div\n      data-slot=\"alert\"\n      data-tone={tone ?? \"neutral\"}\n      role=\"alert\"\n      className={cn(alertVariants({ variant, tone, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\"col-start-2 min-h-4 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      // Full width: it starts BELOW the icon (the icon marks the title only).\n      className={cn(\"col-span-2 col-start-1 text-sm [&_p]:leading-relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants, type AlertProps }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Place an icon as the first child; the grid layout indents the title/description automatically. tone carries the semantic meaning.",
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}