{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "toast",
  "title": "Toast",
  "type": "registry:primitives",
  "description": "Non-disruptive notification card with semantic status icons (success, info, warning, error).",
  "dependencies": [
    "lucide-react"
  ],
  "usage": "import { ToastCard } from \"@etherealui/react\"\n\nexport function ToastDemo() {\n  return (\n    <ToastCard\n      variant=\"success\"\n      title=\"Changes saved\"\n      description=\"Your workspace settings have been updated.\"\n    />\n  )\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/toast.tsx",
      "target": "components/ui/toast.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport { CheckCircle2, AlertTriangle, XCircle, Info, X } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\n\nexport type ToastVariant = \"success\" | \"error\" | \"warning\" | \"info\"\n\nexport interface ToastItem {\n  id: string\n  title: string\n  description?: string\n  variant?: ToastVariant\n}\n\nconst iconMap: Record<ToastVariant, React.ReactNode> = {\n  success: <CheckCircle2 className=\"h-4 w-4 text-emerald-600 dark:text-emerald-400 shrink-0\" />,\n  error: <XCircle className=\"h-4 w-4 text-rose-600 dark:text-rose-400 shrink-0\" />,\n  warning: <AlertTriangle className=\"h-4 w-4 text-amber-600 dark:text-amber-400 shrink-0\" />,\n  info: <Info className=\"h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0\" />,\n}\n\nconst borderMap: Record<ToastVariant, string> = {\n  success: \"border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900\",\n  error: \"border-rose-200 bg-rose-50/40 dark:border-rose-500/30 dark:bg-rose-950/20\",\n  warning: \"border-amber-200 bg-amber-50/40 dark:border-amber-500/30 dark:bg-amber-950/20\",\n  info: \"border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900\",\n}\n\nexport interface ToastCardProps extends Omit<ToastItem, \"id\"> {\n  onDismiss?: () => void\n  className?: string\n}\n\nexport const ToastCard: React.FC<ToastCardProps> = ({\n  title,\n  description,\n  variant = \"info\",\n  onDismiss,\n  className,\n}) => {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        \"flex w-full max-w-sm items-start gap-3 rounded-xl border p-3.5 text-zinc-900 shadow-md transition-all dark:text-zinc-100\",\n        borderMap[variant],\n        className\n      )}\n    >\n      <div className=\"mt-0.5\">{iconMap[variant]}</div>\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-xs font-semibold leading-none text-zinc-900 dark:text-zinc-100\">\n          {title}\n        </p>\n        {description && (\n          <p className=\"text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed\">\n            {description}\n          </p>\n        )}\n      </div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          className=\"rounded-md p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200 cursor-pointer\"\n        >\n          <X className=\"h-3.5 w-3.5\" />\n        </button>\n      )}\n    </div>\n  )\n}\n"
    }
  ]
}