{
  "title": "Alert",
  "description": "Displays a callout for user attention with spring motion entrance and exit transitions.",
  "name": "motion-alert",
  "dependencies": [
    "motion",
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/alert.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { type Transition, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst alertVariants = cva(\n    \"grid gap-0.5 rounded-md border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n    {\n        variants: {\n            variant: {\n                default: \"bg-card text-card-foreground\",\n                destructive:\n                    \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n        },\n    },\n);\n\nexport interface AlertProps extends React.ComponentProps<\"div\">, VariantProps<typeof alertVariants> {\n    transition?: Transition;\n}\n\nfunction Alert({ className, variant, transition, children, ...props }: AlertProps) {\n    return (\n        <motion.div\n            data-slot=\"alert\"\n            role=\"alert\"\n            initial={{ opacity: 0, scale: 0.96, y: -8 }}\n            whileInView={{ opacity: 1, scale: 1, y: 0 }}\n            viewport={{ once: true }}\n            exit={{ opacity: 0, scale: 0.95, y: -4, height: 0 }}\n            transition={transition ?? { type: \"spring\", stiffness: 300, damping: 25 }}\n            className={cn(alertVariants({ variant }), className)}\n            {...(props as any)}>\n            {children}\n        </motion.div>\n    );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (\n        <div\n            data-slot=\"alert-title\"\n            className={cn(\n                \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (\n        <div\n            data-slot=\"alert-description\"\n            className={cn(\n                \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n    return <div data-slot=\"alert-action\" className={cn(\"absolute top-2.5 right-3\", className)} {...props} />;\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\n"
    }
  ],
  "mcp": {
    "description": "Displays a callout for user attention. Provides smooth spring scale and entrance transitions.",
    "tags": [
      "component",
      "alert",
      "paceui",
      "animation",
      "callout"
    ]
  }
}