add: callout title prop (#216)

* add: callout title prop

* Update packages/components/src/components/callout/callout.tsx

Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>

* Update packages/components/src/components/callout/callout.tsx

Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>

* fix: consistent spacing when title is present

* fix: lint

---------

Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>

Author: x0rgus

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>,
+  },
+};

packages/components/src/components/callout/callout.tsx

@@ -24,6 +24,7 @@ type CalloutVariant =
 
 type CalloutProps = {
   children: ReactNode;
+  title?: string;
   variant?: CalloutVariant;
   icon?: ReactNode | string;
   iconType?: IconType;
@@ -80,6 +81,7 @@ const variantConfig = {
 
 const Callout = ({
   children,
+  title,
   variant = "custom",
   icon,
   iconType,
@@ -181,11 +183,17 @@ 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"
         style={customTextStyle}
       >
+        {title && (
+          <div className="font-semibold" data-component-part="callout-title">
+            {title}
+          </div>
+        )}
         {children}
       </div>
     </div>