{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "description": "Callouts with a colored rail, tone icons and fold-away dismiss.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/alert.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { AlertTriangleIcon, CheckCircle2Icon, InfoIcon, XCircleIcon, XIcon } from \"lucide-react\";\n\nimport { gsap, motionScale } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst alertVariants = cva(\n  \"relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 overflow-hidden rounded-lg border bg-card p-4 ps-5 text-sm shadow-control before:absolute before:inset-y-0 before:start-0 before:w-[3px] before:bg-current [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:text-current\",\n  {\n    variants: {\n      tone: {\n        info: \"border-primary/25 text-primary\",\n        success: \"border-success/25 text-success\",\n        warning: \"border-warning/30 text-warning\",\n        destructive: \"border-destructive/25 text-destructive\",\n        neutral: \"border-border text-muted-foreground\",\n      },\n    },\n    defaultVariants: { tone: \"info\" },\n  },\n);\n\nconst defaultIcons = { info: InfoIcon, success: CheckCircle2Icon, warning: AlertTriangleIcon, destructive: XCircleIcon, neutral: InfoIcon };\n\ntype AlertProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof alertVariants> & {\n    /** Replace the tone icon, or pass `null` to hide it. */\n    icon?: React.ReactNode;\n    /** Shows a close button; the alert folds away (GSAP) and then calls `onDismiss`. */\n    onDismiss?: () => void;\n  };\n\n/** A callout with a colored rail. Title and description stay in foreground colors for readability. */\nfunction Alert({ className, tone = \"info\", icon, onDismiss, children, ...props }: AlertProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [gone, setGone] = React.useState(false);\n  const Icon = defaultIcons[tone ?? \"info\"];\n\n  const dismiss = () => {\n    const el = ref.current;\n    const done = () => {\n      setGone(true);\n      onDismiss?.();\n    };\n    if (!el || !motionScale(el)) return done();\n    gsap.to(el, { opacity: 0, height: 0, paddingTop: 0, paddingBottom: 0, marginTop: 0, marginBottom: 0, borderWidth: 0, duration: 0.35, ease: \"cue\", onComplete: done });\n  };\n\n  if (gone) return null;\n\n  return (\n    <div ref={ref} role={tone === \"destructive\" || tone === \"warning\" ? \"alert\" : \"status\"} data-slot=\"alert\" data-tone={tone} className={cn(alertVariants({ tone }), onDismiss && \"pe-10\", className)} {...props}>\n      {icon === undefined ? <Icon /> : icon}\n      <div className={cn(\"grid gap-1\", icon === null && \"col-span-2\")}>{children}</div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={dismiss}\n          className=\"absolute top-3.5 right-3 rounded-sm text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50\"\n        >\n          <XIcon className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"alert-title\" className={cn(\"font-medium text-foreground\", className)} {...props} />;\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"alert-description\" className={cn(\"text-muted-foreground [&_p]:leading-relaxed\", className)} {...props} />;\n}\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };\nexport type { AlertProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/alert",
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}