From 3745399478aa44b5889d39e000c8138d112de105 Mon Sep 17 00:00:00 2001
From: x0rgus <lucas.pr1@hotmail.com>
Date: Fri, 13 Mar 2026 18:45:41 -0300
Subject: [PATCH 1/5] add: callout title prop

---
 .../src/components/callout/callout.stories.tsx       | 12 ++++++++++++
 .../components/src/components/callout/callout.tsx    | 10 ++++++++++
 2 files changed, 22 insertions(+)

diff --git a/packages/components/src/components/callout/callout.stories.tsx b/packages/components/src/components/callout/callout.stories.tsx
index 14f1d8c2..ccab5548 100644
--- a/packages/components/src/components/callout/callout.stories.tsx
+++ b/packages/components/src/components/callout/callout.stories.tsx
@@ -14,6 +14,10 @@ const meta: Meta<typeof Callout> = {
       options: ["info", "warning", "note", "tip", "check", "danger", "custom"],
       description: "Predefined callout variant",
     },
+    title: {
+      control: "text",
+      description: "Optional title displayed above the callout content",
+    },
     icon: {
       control: "text",
       description: "Icon name or custom React node (for custom variant)",
@@ -312,3 +316,11 @@ export const BackwardCompatibilityAllTypes: Story = {
     </div>
   ),
 };
+
+export const WithTitle: Story = {
+  args: {
+    variant: "note",
+    title: "Authentication",
+    children: <p>You must provide an API key.</p>,
+  },
+};
diff --git a/packages/components/src/components/callout/callout.tsx b/packages/components/src/components/callout/callout.tsx
index ca368a39..cb857b42 100644
--- a/packages/components/src/components/callout/callout.tsx
+++ b/packages/components/src/components/callout/callout.tsx
@@ -24,6 +24,7 @@ type CalloutVariant =
 
 type CalloutProps = {
   children: ReactNode;
+  title?: ReactNode;
   variant?: CalloutVariant;
   icon?: ReactNode | string;
   iconType?: IconType;
@@ -80,6 +81,7 @@ const variantConfig = {
 
 const Callout = ({
   children,
+  title,
   variant = "custom",
   icon,
   iconType,
@@ -186,6 +188,14 @@ const Callout = ({
         data-component-part="callout-content"
         style={customTextStyle}
       >
+        {title && (
+          <div
+            className="mb-1 font-semibold"
+            data-component-part="callout-title"
+          >
+            {title}
+          </div>
+        )}
         {children}
       </div>
     </div>

From d611187c947bedf059e7e7ed274896b8a624833c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Proc=C3=B3pio?=
 <101903078+x0rgus@users.noreply.github.com>
Date: Wed, 18 Mar 2026 23:20:05 -0300
Subject: [PATCH 2/5] Update
 packages/components/src/components/callout/callout.tsx

Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>
---
 packages/components/src/components/callout/callout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/callout/callout.tsx b/packages/components/src/components/callout/callout.tsx
index cb857b42..116be19b 100644
--- a/packages/components/src/components/callout/callout.tsx
+++ b/packages/components/src/components/callout/callout.tsx
@@ -24,7 +24,7 @@ type CalloutVariant =
 
 type CalloutProps = {
   children: ReactNode;
-  title?: ReactNode;
+  title?: string;
   variant?: CalloutVariant;
   icon?: ReactNode | string;
   iconType?: IconType;

From dd117f017ba4610e189f026cd8836b91f5758944 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Proc=C3=B3pio?=
 <101903078+x0rgus@users.noreply.github.com>
Date: Wed, 18 Mar 2026 23:20:11 -0300
Subject: [PATCH 3/5] Update
 packages/components/src/components/callout/callout.tsx

Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>
---
 packages/components/src/components/callout/callout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/callout/callout.tsx b/packages/components/src/components/callout/callout.tsx
index 116be19b..af78cebe 100644
--- a/packages/components/src/components/callout/callout.tsx
+++ b/packages/components/src/components/callout/callout.tsx
@@ -190,7 +190,7 @@ const Callout = ({
       >
         {title && (
           <div
-            className="mb-1 font-semibold"
+            className="font-semibold"
             data-component-part="callout-title"
           >
             {title}

From 043b5816f169e9e784f44ba568f97daa8f88a30f Mon Sep 17 00:00:00 2001
From: x0rgus <lucas.pr1@hotmail.com>
Date: Wed, 18 Mar 2026 23:29:12 -0300
Subject: [PATCH 4/5] fix: consistent spacing when title is present

---
 packages/components/src/components/callout/callout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/callout/callout.tsx b/packages/components/src/components/callout/callout.tsx
index af78cebe..ae122844 100644
--- a/packages/components/src/components/callout/callout.tsx
+++ b/packages/components/src/components/callout/callout.tsx
@@ -183,6 +183,7 @@ const Callout = ({
       <div
         className={cn(
           "prose dark:prose-invert w-full min-w-0 text-sm [&_a]:border-current [&_a]:text-current! [&_code]:text-current! [&_kbd]:bg-stone-100 [&_kbd]:text-current! dark:[&_kbd]:bg-stone-800 [&_strong]:text-current!",
+          title && "[&>:nth-child(2)]:mt-3",
           childrenClassName
         )}
         data-component-part="callout-content"

From f328c4c00a7bf8c1787d0431488dcc8d44bcf6d6 Mon Sep 17 00:00:00 2001
From: x0rgus <lucas.pr1@hotmail.com>
Date: Thu, 19 Mar 2026 11:37:59 -0300
Subject: [PATCH 5/5] fix: lint

---
 packages/components/src/components/callout/callout.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/components/src/components/callout/callout.tsx b/packages/components/src/components/callout/callout.tsx
index ae122844..b1de7ffc 100644
--- a/packages/components/src/components/callout/callout.tsx
+++ b/packages/components/src/components/callout/callout.tsx
@@ -190,10 +190,7 @@ const Callout = ({
         style={customTextStyle}
       >
         {title && (
-          <div
-            className="font-semibold"
-            data-component-part="callout-title"
-          >
+          <div className="font-semibold" data-component-part="callout-title">
             {title}
           </div>
         )}