{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "author": "SAASTRO <https://saastro.io>",
  "description": "El aviso que ya está en la página, no el que interrumpe.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/ui/alert.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Markup puro: el aviso que ya está en la página, no el que interrumpe —para\n * eso está `alert-dialog`—.\n *\n * `role=\"alert\"` solo en `destructive`: el lector de pantalla interrumpe lo que\n * esté leyendo, y hacer eso por una nota informativa es maltratar a quien lo\n * usa. Los demás se leen cuando toca.\n */\nconst alertVariants = cva(\n  \"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-3.5 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-2.5 [&>svg]:size-4 [&>svg]:translate-y-0.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        info: \"border-transparent bg-muted text-foreground [&>svg]:text-muted-foreground\",\n        destructive:\n          \"border-transparent bg-destructive/10 text-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role={variant === \"destructive\" ? \"alert\" : \"note\"}\n      className={cn(alertVariants({ variant }), 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(\n        \"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"col-start-2 grid justify-items-start gap-1 text-sm opacity-80 [&_p]:leading-relaxed\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n",
      "type": "registry:ui",
      "target": "@ui/alert.tsx"
    }
  ],
  "meta": {
    "group": "Display",
    "iframeHeight": "320px"
  },
  "docs": "Markup puro: no lleva primitivo externo. Se instala y se edita como cualquier otro fichero copy-in; en .astro se usa tal cual.",
  "categories": [
    "ui",
    "display"
  ],
  "type": "registry:ui"
}