{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "callout",
  "type": "registry:component",
  "title": "Callout",
  "description": "Highlighted content block with variant styles for info, warning, danger, and more.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/callout/callout.tsx",
      "content": "import type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type CalloutVariant =\n  | \"danger\"\n  | \"info\"\n  | \"note\"\n  | \"success\"\n  | \"tip\"\n  | \"warning\";\n\nexport type CalloutProps = {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  title?: string;\n  variant?: CalloutVariant;\n};\n\nconst variantStyles: Record<\n  CalloutVariant,\n  { className: string; defaultTitle: string }\n> = {\n  danger: {\n    className: \"border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-300\",\n    defaultTitle: \"Danger\",\n  },\n  info: {\n    className:\n      \"border-blue-500/50 bg-blue-500/10 text-blue-700 dark:text-blue-300\",\n    defaultTitle: \"Info\",\n  },\n  note: {\n    className:\n      \"border-gray-500/50 bg-gray-500/10 text-gray-700 dark:text-gray-300\",\n    defaultTitle: \"Note\",\n  },\n  success: {\n    className:\n      \"border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-300\",\n    defaultTitle: \"Success\",\n  },\n  tip: {\n    className:\n      \"border-amber-500/50 bg-amber-500/10 text-amber-700 dark:text-amber-300\",\n    defaultTitle: \"Tip\",\n  },\n  warning: {\n    className:\n      \"border-orange-500/50 bg-orange-500/10 text-orange-700 dark:text-orange-300\",\n    defaultTitle: \"Warning\",\n  },\n};\n\nexport function Callout({\n  children,\n  className,\n  icon,\n  title,\n  variant = \"info\",\n}: CalloutProps): React.ReactNode {\n  const config = variantStyles[variant];\n  const displayTitle = title ?? config.defaultTitle;\n\n  return (\n    <div\n      className={cn(\n        \"my-6 rounded-lg border-l-4 p-4\",\n        config.className,\n        className,\n      )}\n      role=\"alert\"\n    >\n      <div className=\"flex items-start gap-3\">\n        {icon ? (\n          <span className=\"size-5 flex-shrink-0 mt-0.5\">{icon}</span>\n        ) : null}\n        <div className=\"flex-1 min-w-0\">\n          {displayTitle ? (\n            <p className=\"font-semibold mb-1\">{displayTitle}</p>\n          ) : null}\n          <div className=\"text-sm [&>p]:mb-0 [&>p:last-child]:mb-0\">\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}