{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pro-tip",
  "type": "registry:component",
  "title": "Pro Tip",
  "description": "Highlighted tip block with variants for tips, best practices, gotchas, and more.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/pro-tip/pro-tip.tsx",
      "content": "import type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type ProTipVariant =\n  | \"advanced\"\n  | \"best-practice\"\n  | \"expert\"\n  | \"gotcha\"\n  | \"performance\"\n  | \"tip\";\n\nexport type ProTipProps = {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  title?: string;\n  variant?: ProTipVariant;\n};\n\nconst variantStyles: Record<\n  ProTipVariant,\n  { className: string; defaultTitle: string }\n> = {\n  advanced: {\n    className:\n      \"border-purple-500/50 bg-purple-500/10 text-purple-700 dark:text-purple-300\",\n    defaultTitle: \"Advanced\",\n  },\n  \"best-practice\": {\n    className:\n      \"border-blue-500/50 bg-blue-500/10 text-blue-700 dark:text-blue-300\",\n    defaultTitle: \"Best Practice\",\n  },\n  expert: {\n    className:\n      \"border-amber-500/50 bg-amber-500/10 text-amber-700 dark:text-amber-300\",\n    defaultTitle: \"Expert Tip\",\n  },\n  gotcha: {\n    className: \"border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-300\",\n    defaultTitle: \"Common Gotcha\",\n  },\n  performance: {\n    className:\n      \"border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-300\",\n    defaultTitle: \"Performance\",\n  },\n  tip: {\n    className: \"border-primary/50 bg-primary/10 text-primary\",\n    defaultTitle: \"Pro Tip\",\n  },\n};\n\nexport function ProTip({\n  children,\n  className,\n  icon,\n  title,\n  variant = \"tip\",\n}: ProTipProps): React.ReactNode {\n  const config = variantStyles[variant];\n\n  return (\n    <div\n      className={cn(\"my-6 rounded-lg border p-4\", config.className, className)}\n    >\n      <div className=\"flex items-start gap-3\">\n        <div className=\"flex size-8 items-center justify-center rounded-full bg-current/10 flex-shrink-0\">\n          {icon ? (\n            <span className=\"size-4\">{icon}</span>\n          ) : (\n            <svg\n              className=\"size-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n              />\n            </svg>\n          )}\n        </div>\n        <div className=\"flex-1 min-w-0\">\n          <p className=\"font-semibold text-sm mb-1\">\n            {title || config.defaultTitle}\n          </p>\n          <div className=\"text-sm [&>p]:mb-0 opacity-90\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport type CommonMistakeProps = {\n  children: ReactNode;\n  className?: string;\n  fix?: ReactNode;\n  fixIcon?: ReactNode;\n  icon?: ReactNode;\n  title?: string;\n};\n\n// eslint-disable-next-line max-lines-per-function -- Complex component with conditional fix section\nexport function CommonMistake({\n  children,\n  className,\n  fix,\n  fixIcon,\n  icon,\n  title = \"Common Mistake\",\n}: CommonMistakeProps): React.ReactNode {\n  return (\n    <div\n      className={cn(\n        \"my-6 rounded-lg border border-red-500/50 bg-red-500/5 overflow-hidden\",\n        className,\n      )}\n    >\n      <div className=\"p-4\">\n        <div className=\"flex items-start gap-3\">\n          {icon ? (\n            <span className=\"size-5 text-red-500 flex-shrink-0 mt-0.5\">\n              {icon}\n            </span>\n          ) : (\n            <svg\n              className=\"size-5 text-red-500 flex-shrink-0 mt-0.5\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n              />\n            </svg>\n          )}\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"font-semibold text-sm text-red-700 dark:text-red-300 mb-1\">\n              {title}\n            </p>\n            <div className=\"text-sm text-muted-foreground [&>p]:mb-0\">\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n      {fix ? (\n        <div className=\"border-t border-red-500/30 bg-green-500/5 p-4\">\n          <div className=\"flex items-start gap-3\">\n            {fixIcon ? (\n              <span className=\"size-5 text-green-500 flex-shrink-0 mt-0.5\">\n                {fixIcon}\n              </span>\n            ) : (\n              <svg\n                className=\"size-5 text-green-500 flex-shrink-0 mt-0.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                />\n              </svg>\n            )}\n            <div className=\"flex-1 min-w-0\">\n              <p className=\"font-semibold text-sm text-green-700 dark:text-green-300 mb-1\">\n                The Fix\n              </p>\n              <div className=\"text-sm text-muted-foreground [&>p]:mb-0\">\n                {fix}\n              </div>\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}