{"name":"alert","dependencies":["@base-ui/react","class-variance-authority"],"files":[{"path":"alert.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n// CSS-grid layout (shadcn-style): drop an icon as a direct child and the alert\n// auto-arranges into an icon column + a content column — no manual flex wrapper.\n// `has-[>svg]` adds the icon column only when an icon is present. NeoBrutalist\n// chrome: hard 2px border, square corners, hard offset shadow.\nconst alertVariants = cva(\n  cn(\n    \"group/alert relative grid w-full grid-cols-[0_1fr] items-start gap-y-1 rounded border-2 px-4 py-3 text-left text-sm shadow-md\",\n    \"has-[>svg]:grid-cols-[1.25rem_1fr] has-[>svg]:gap-x-3\",\n    \"has-data-[slot=alert-action]:pr-14\",\n    \"[&>svg]:size-5 [&>svg]:translate-y-0.5 [&>svg]:shrink-0 [&>svg]:text-current\"\n  ),\n  {\n    variants: {\n      // shadcn's variant axis (kept for API compatibility). `solid` is a Neobrutalism\n      // addition.\n      variant: {\n        default:\n          \"border-border bg-background text-foreground *:data-[slot=alert-description]:text-muted-foreground\",\n        destructive:\n          \"border-red-900 bg-red-300 text-red-900 *:data-[slot=alert-description]:text-red-900/80\",\n        solid:\n          \"border-border bg-foreground text-background *:data-[slot=alert-description]:text-background/80\",\n      },\n      // Neobrutalism status axis — additive; overrides the variant's colors when set.\n      status: {\n        error:\n          \"border-red-900 bg-red-300 text-red-900 *:data-[slot=alert-description]:text-red-900/80\",\n        success:\n          \"border-green-900 bg-green-300 text-green-900 *:data-[slot=alert-description]:text-green-900/80\",\n        warning:\n          \"border-yellow-900 bg-yellow-300 text-yellow-900 *:data-[slot=alert-description]:text-yellow-900/80\",\n        info: \"border-blue-900 bg-blue-300 text-blue-900 *:data-[slot=alert-description]:text-blue-900/80\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  status,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant, status }), 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 min-h-5 font-head text-base leading-tight tracking-tight [&_a]:underline [&_a]:underline-offset-3\",\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 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p]:leading-relaxed [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants }\n","type":"registry:ui","target":"components/ui/alert.tsx"}],"type":"registry:ui"}