{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "description": "Displays a callout for user attention with bold neubrutalism borders",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@boldkit/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/alert.tsx",
      "content": "import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\nconst alertVariants = cva(\n  'relative w-full border-3 border-foreground p-4 shadow-[4px_4px_0px_hsl(var(--shadow-color))] ease-out animate-in fade-in-0 slide-in-from-top-2 duration-300 transition [&>svg~*:not([data-alert-action])]:pl-8 [&>svg~[data-alert-action]]:ml-8 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive: 'bg-destructive text-destructive-foreground [&>svg]:text-destructive-foreground',\n        success: 'bg-success text-success-foreground',\n        warning: 'bg-warning text-warning-foreground',\n        info: 'bg-info text-info-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = 'Alert'\n\nconst AlertTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn('mb-1 font-bold uppercase tracking-wide leading-none', className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = 'AlertTitle'\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-sm [&_p]:leading-relaxed', className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = 'AlertDescription'\n\nexport interface AlertActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Shows an inline spinner and disables the button automatically */\n  loading?: boolean\n}\n\nconst AlertAction = React.forwardRef<HTMLButtonElement, AlertActionProps>(\n  ({ className, loading, disabled, children, ...props }, ref) => (\n    <button\n      ref={ref}\n      data-alert-action=\"\"\n      disabled={disabled || loading}\n      className={cn(\n        // layout\n        'mt-3 inline-flex items-center gap-1.5 max-w-full min-w-0',\n        // shape — no rounded corners, thin border inheriting text color\n        'rounded-none border border-current',\n        // typography\n        'px-4 py-1 text-xs font-bold uppercase tracking-wide',\n        // transitions\n        'transition duration-150',\n        // hover\n        'hover:opacity-100 hover:bg-current/10',\n        // active\n        'active:scale-95',\n        // focus\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-1',\n        // cursor + pointer-events when non-interactive\n        'disabled:cursor-not-allowed disabled:pointer-events-none',\n        // opacity: loading stays visible, truly-disabled fades out, default is 80%\n        loading ? 'opacity-80' : disabled ? 'opacity-40' : 'opacity-80',\n        className\n      )}\n      {...props}\n    >\n      {loading && (\n        <span\n          data-testid=\"alert-action-spinner\"\n          aria-hidden=\"true\"\n          className=\"h-3 w-3 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent\"\n        />\n      )}\n      <span className=\"inline-flex items-center gap-1.5 whitespace-nowrap overflow-hidden\">{children}</span>\n    </button>\n  )\n)\nAlertAction.displayName = 'AlertAction'\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
      "type": "registry:ui",
      "target": "components/ui/alert.tsx"
    }
  ],
  "type": "registry:ui"
}