{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "callout",
  "title": "Callout",
  "description": "A callout component for highlighting information",
  "dependencies": [
    "lucide-react",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/ui/slide-cn/callout.tsx",
      "content": "\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { AlertCircle, AlertTriangle, CheckCircle, Info } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Callout\n *\n * Semantic container for highlighting contextual information within content. It is not an alert, it is more like a card. It does not popup or dismiss or anything. It is static\n *\n * Responsibilities:\n * - Visually distinguish important messages (info, success, warning, error)\n * - Provide consistent iconography and styling across variants\n * - Render arbitrary child content (text, lists, inline elements)\n *\n * Usage:\n * ```tsx\n * <Callout variant=\"warning\" title=\"Heads up\">\n *   This action cannot be undone.\n * </Callout>\n * ```\n *\n * Notes:\n * - Intended for emphasis and guidance, not alerts or dialogs\n * - Styling is opinionated and theme-aware (light / dark)\n * - Does not manage visibility, dismissal, or state\n */\n\nconst calloutVariants = cva(\n\t\"w-full rounded-lg border p-4 flex items-start gap-4\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tinfo: \"border-blue-500/25 bg-blue-500/10 text-blue-900 dark:border-blue-900/50 dark:bg-blue-950/50 dark:text-blue-200\",\n\t\t\t\tsuccess: \"border-green-500/25 bg-green-500/10 text-green-900 dark:border-green-900/50 dark:bg-green-950/50 dark:text-green-200\",\n\t\t\t\twarning: \"border-yellow-500/25 bg-yellow-500/10 text-yellow-900 dark:border-yellow-900/50 dark:bg-yellow-950/50 dark:text-yellow-200\",\n\t\t\t\terror: \"border-red-500/25 bg-red-500/10 text-red-900 dark:border-red-900/50 dark:bg-red-950/50 dark:text-red-200\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"info\",\n\t\t},\n\t}\n)\n\nconst icons = {\n\tinfo: Info,\n\tsuccess: CheckCircle,\n\twarning: AlertTriangle,\n\terror: AlertCircle,\n}\n\nexport interface CalloutProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\tVariantProps<typeof calloutVariants> {\n\ttitle?: string\n}\n\nexport function Callout({\n\tclassName,\n\tvariant = \"info\",\n\ttitle,\n\tchildren,\n\t...props\n}: CalloutProps) {\n\tconst Icon = icons[variant || \"info\"]\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(calloutVariants({ variant }), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon className=\"h-5 w-5 shrink-0 mt-0.5\" />\n\t\t\t<div className=\"grid gap-1\">\n\t\t\t\t{title && <h5 className=\"font-medium leading-none tracking-tight\">{title}</h5>}\n\t\t\t\t<div className=\"text-sm opacity-90 [&_p]:leading-relaxed\">\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n",
      "type": "registry:component",
      "target": "components/ui/slide-cn/callout.tsx"
    }
  ],
  "type": "registry:component"
}