{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "title": "Alert",
  "description": "A memo with a note in the margin.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/alert.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"note\" | \"danger\" | \"success\";\n  /** Shown in the margin, e.g. an icon or a short word. */\n  icon?: React.ReactNode;\n}\n\nconst marks = { note: \"NB\", danger: \"!!\", success: \"OK\" } as const;\n\n/** A memo with a margin note. */\nexport function Alert({ variant = \"note\", icon, className = \"\", children, ...props }: AlertProps) {\n  const color = variant === \"danger\" ? \"var(--danger)\" : variant === \"success\" ? \"#2d7a3e\" : \"var(--pen)\";\n  return (\n    <div\n      role=\"alert\"\n      className={`paper relative rounded-[3px] border border-(--edge) bg-(--paper-raised) py-4 pl-14 pr-5 text-(--ink) shadow-[0_6px_14px_-8px_rgb(0_0_0/.3)] ${className}`}\n      {...props}\n    >\n      <span aria-hidden className=\"absolute inset-y-0 left-10 w-px bg-(--margin)\" />\n      <span\n        aria-hidden\n        className=\"absolute left-0 top-4 flex w-10 justify-center text-[13px] font-bold tracking-[0.06em] [&_svg]:size-4\"\n        style={{ color, fontFamily: \"var(--font-type, 'Courier New', monospace)\" }}\n      >\n        {icon ?? marks[variant]}\n      </span>\n      {children}\n    </div>\n  );\n}\n\nexport function AlertTitle({ className = \"\", style, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h5\n      className={`text-[12px] font-bold uppercase tracking-[0.18em] ${className}`}\n      style={{ fontFamily: \"var(--font-type, 'Courier New', monospace)\", ...style }}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDescription({ className = \"\", ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={`mt-1 text-[14.5px] leading-relaxed text-(--ink-muted) ${className}`} {...props} />;\n}\n"
    }
  ]
}