{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "callout",
  "type": "registry:ui",
  "title": "Callout",
  "description": "Tailwind callout box in info, success, warning or danger tones with an optional bold title. Uses the note role, which suits docs, forms and setup steps.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/callout.tsx",
      "type": "registry:ui",
      "target": "components/ui/callout.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst tones = {\n  info: \"border-border bg-sunken text-fg\",\n  success: \"border-success/30 bg-success/5 text-fg\",\n  warning: \"border-warning/30 bg-warning/5 text-fg\",\n  danger: \"border-danger/30 bg-danger/5 text-fg\",\n} as const\n\nfunction Callout({\n  className,\n  tone = \"info\",\n  title,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { tone?: keyof typeof tones; title?: string }) {\n  return (\n    <div\n      data-slot=\"callout\"\n      role=\"note\"\n      className={cn(\"rounded-xl border px-4 py-3 text-sm\", tones[tone], className)}\n      {...props}\n    >\n      {title ? <p className=\"mb-1 font-medium text-fg\">{title}</p> : null}\n      <div className=\"text-fg-muted\">{children}</div>\n    </div>\n  )\n}\nexport { Callout }\n"
    }
  ]
}