{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "callout",
  "title": "Callout",
  "description": "Callout for notes and warnings, with info, warning, error, success and idea types.",
  "dependencies": [
    "cn",
    "lucide-react"
  ],
  "registryDependencies": [
    "alert"
  ],
  "files": [
    {
      "path": "registry/base/docs/components/callout.tsx",
      "content": "// Adapted from Fumadocs UI (https://github.com/fuma-nama/fumadocs)\n// Copyright (c) 2023 Fuma, MIT License\nimport { cn } from \"cn\";\nimport {\n  CircleCheck,\n  CircleX,\n  Info,\n  Lightbulb,\n  TriangleAlert,\n} from \"lucide-react\";\nimport type { ComponentProps, CSSProperties, ReactNode } from \"react\";\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\n\nexport type CalloutType =\n  \"info\" | \"warn\" | \"error\" | \"success\" | \"warning\" | \"idea\";\n\nconst colors = {\n  info: \"oklch(62.3% 0.214 259.815)\",\n  warning: \"oklch(76.9% 0.188 70.08)\",\n  error: \"var(--destructive)\",\n  success: \"oklch(72.3% 0.219 149.579)\",\n  idea: \"oklch(70.5% 0.209 60.849)\",\n};\n\nconst icons = {\n  info: <Info />,\n  warning: <TriangleAlert />,\n  error: <CircleX />,\n  success: <CircleCheck />,\n  idea: <Lightbulb />,\n};\n\nexport function Callout({\n  children,\n  title,\n  ...props\n}: { title?: ReactNode } & Omit<CalloutContainerProps, \"title\">) {\n  return (\n    <CalloutContainer {...props}>\n      {title && <CalloutTitle>{title}</CalloutTitle>}\n      <CalloutDescription>{children}</CalloutDescription>\n    </CalloutContainer>\n  );\n}\n\nexport interface CalloutContainerProps extends ComponentProps<\"div\"> {\n  /**\n   * @defaultValue info\n   */\n  type?: CalloutType;\n\n  /**\n   * Force an icon\n   */\n  icon?: ReactNode;\n}\n\nfunction resolveAlias(type: CalloutType) {\n  if (type === \"warn\") return \"warning\";\n  if ((type as unknown) === \"tip\") return \"info\";\n  return type;\n}\n\nexport function CalloutContainer({\n  type: inputType = \"info\",\n  icon,\n  children,\n  className,\n  style,\n  ...props\n}: CalloutContainerProps) {\n  const type = resolveAlias(inputType);\n\n  return (\n    <Alert\n      role=\"note\"\n      data-type={type}\n      className={cn(\n        \"my-4 px-3 py-2.5 *:[svg]:text-(--callout-color)\",\n        className,\n      )}\n      style={\n        {\n          \"--callout-color\": colors[type] ?? \"var(--muted-foreground)\",\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {icon ?? icons[type]}\n      <div className=\"col-start-2 flex min-w-0 flex-col gap-1\">{children}</div>\n    </Alert>\n  );\n}\n\nexport function CalloutTitle({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"div\">) {\n  return (\n    <AlertTitle className={className} {...props}>\n      {children}\n    </AlertTitle>\n  );\n}\n\nexport function CalloutDescription({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"div\">) {\n  return (\n    <AlertDescription\n      className={cn(\"*:first:mt-0 *:last:mb-0 empty:hidden\", className)}\n      {...props}\n    >\n      {children}\n    </AlertDescription>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/docs/components/callout.tsx"
    }
  ],
  "type": "registry:component"
}