UI: add success type to callout

.changeset/light-points-enter.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+add `success` type to callout

apps/docs/content/docs/ui/markdown/index.mdx

@@ -134,8 +134,9 @@ This will show the other pages in the same folder as cards.
 Useful for adding tips/warnings, it is included by default. You can specify the type of callout:
 
 - `info` (default)
-- `warn`
+- `warn`/`warning`
 - `error`
+- `success`
 
 ```mdx
 <Callout>Hello World</Callout>

packages/ui/src/components/callout.tsx

@@ -1,4 +1,4 @@
-import { CircleX, Info, TriangleAlert } from 'lucide-react';
+import { CircleCheck, CircleX, Info, TriangleAlert } from 'lucide-react';
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from '@/utils/cn';
 import { cva } from 'class-variance-authority';
@@ -11,7 +11,7 @@ type CalloutProps = Omit<
   /**
    * @defaultValue info
    */
-  type?: 'info' | 'warn' | 'error';
+  type?: 'info' | 'warn' | 'error' | 'success' | 'warning';
 
   /**
    * Force an icon
@@ -20,13 +20,14 @@ type CalloutProps = Omit<
 };
 
 const calloutVariants = cva(
-  'my-4 flex flex-row gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md',
+  'my-4 flex gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md',
   {
     variants: {
       type: {
         info: 'border-s-blue-500/50',
         warn: 'border-s-orange-500/50',
         error: 'border-s-red-500/50',
+        success: 'border-s-green-500/50',
       },
     },
   },
@@ -34,6 +35,8 @@ const calloutVariants = cva(
 
 export const Callout = forwardRef<HTMLDivElement, CalloutProps>(
   ({ className, children, title, type = 'info', icon, ...props }, ref) => {
+    if (type === 'warning') type = 'warn';
+
     return (
       <div
         ref={ref}
@@ -52,6 +55,9 @@ export const Callout = forwardRef<HTMLDivElement, CalloutProps>(
               <TriangleAlert className="size-5 fill-orange-500 text-fd-card" />
             ),
             error: <CircleX className="size-5 fill-red-500 text-fd-card" />,
+            success: (
+              <CircleCheck className="size-5 fill-green-500 text-fd-card" />
+            ),
           }[type]}
         <div className="min-w-0 flex flex-col gap-2 flex-1">
           {title ? <p className="font-medium !my-0">{title}</p> : null}