@barodoc/theme-docs 0.0.1

package/src/components/api/ApiParams.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  title?: string;
+}
+
+const { title = "Parameters" } = Astro.props;
+---
+
+<div class="my-4 px-2">
+  <h4 class="text-sm font-semibold text-[var(--color-text)] mb-2">{title}</h4>
+  <div class="border border-[var(--color-border)] rounded-lg overflow-hidden">
+    <div class="divide-y divide-[var(--color-border)] px-4">
+      <slot />
+    </div>
+  </div>
+</div>

package/src/components/api/ApiResponse.astro

@@ -0,0 +1,35 @@
+---
+interface Props {
+  status: number;
+  description?: string;
+}
+
+const { status, description } = Astro.props;
+
+const statusColors: Record<number, string> = {
+  200: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+  201: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+  204: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+  400: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
+  401: "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400",
+  403: "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400",
+  404: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400",
+  500: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400",
+};
+
+const statusColor = statusColors[status] || "bg-gray-100 dark:bg-gray-900/30 text-gray-700 dark:text-gray-400";
+---
+
+<div class="my-4 px-2">
+  <div class="flex items-center gap-2 mb-2">
+    <span class:list={["px-2 py-0.5 text-xs font-bold rounded", statusColor]}>
+      {status}
+    </span>
+    {description && (
+      <span class="text-sm text-[var(--color-text-secondary)]">{description}</span>
+    )}
+  </div>
+  <div class="border border-[var(--color-border)] rounded-lg overflow-hidden px-2">
+    <slot />
+  </div>
+</div>

package/src/components/index.ts

@@ -0,0 +1,30 @@
+// UI Components - exported for custom overrides
+export { ThemeToggle } from "./ThemeToggle.tsx";
+export { Search } from "./Search.tsx";
+
+// shadcn/ui components
+export * from "./ui/index.ts";
+
+// MDX Components (shadcn/ui based)
+export { DocCard, DocCardGroup } from "./mdx/DocCard.tsx";
+export { DocCallout } from "./mdx/DocCallout.tsx";
+export { DocTabs } from "./mdx/DocTabs.tsx";
+export { DocAccordion, SimpleAccordion } from "./mdx/DocAccordion.tsx";
+
+// New MDX Components (Mintlify-style)
+export { CodeGroup } from "./mdx/CodeGroup.tsx";
+export { Badge } from "./mdx/Badge.tsx";
+export { Frame } from "./mdx/Frame.tsx";
+export { Columns, Column } from "./mdx/Columns.tsx";
+export { Tooltip } from "./mdx/Tooltip.tsx";
+export { FileTree, TreeFile, TreeFolder } from "./mdx/FileTree.tsx";
+export { ParamField, ParamFieldGroup } from "./mdx/ParamField.tsx";
+export { ResponseField, ResponseFieldGroup } from "./mdx/ResponseField.tsx";
+export { Expandable, ExpandableList, ExpandableItem } from "./mdx/Expandable.tsx";
+export { Icon, CheckIcon, XIcon, InfoIcon, WarningIcon } from "./mdx/Icon.tsx";
+export { Steps, Step } from "./mdx/Steps.tsx";
+export { Mermaid } from "./mdx/Mermaid.tsx";
+
+// Legacy exports for backwards compatibility
+export { Tabs, Tab } from "./mdx/Tabs.tsx";
+export { Accordion, AccordionGroup } from "./mdx/Accordion.tsx";

package/src/components/mdx/Accordion.tsx

@@ -0,0 +1,61 @@
+import { useState, type ReactNode } from "react";
+
+interface AccordionProps {
+  title: string;
+  icon?: string;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}
+
+export function Accordion({ title, icon, defaultOpen = false, children }: AccordionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="accordion-item border border-[var(--color-border)] rounded-xl overflow-hidden bg-[var(--color-bg)] my-3">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-[var(--color-bg-secondary)] transition-colors"
+        aria-expanded={isOpen}
+      >
+        {icon && (
+          <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[var(--color-bg-secondary)] text-lg shrink-0">
+            {icon}
+          </span>
+        )}
+        <span className="flex-1 font-medium text-[var(--color-text)]">{title}</span>
+        <svg
+          className={`w-5 h-5 text-[var(--color-text-secondary)] transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      <div
+        className={`accordion-content overflow-hidden transition-all duration-200 ease-out ${
+          isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        <div className="px-5 pb-5 pt-1 text-sm text-[var(--color-text-secondary)] leading-relaxed">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface AccordionGroupProps {
+  children: ReactNode;
+}
+
+export function AccordionGroup({ children }: AccordionGroupProps) {
+  return (
+    <div className="not-prose accordion-group space-y-2 my-6">
+      {children}
+    </div>
+  );
+}
+
+export default Accordion;

package/src/components/mdx/Badge.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300",
+        secondary: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300",
+        success: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+        warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
+        error: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+        info: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+        outline: "border border-[var(--color-border)] text-[var(--color-text-secondary)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}

package/src/components/mdx/Callout.astro

@@ -0,0 +1,79 @@
+---
+interface Props {
+  type?: "info" | "warning" | "tip" | "danger" | "note";
+  title?: string;
+}
+
+const { type = "info", title } = Astro.props;
+
+const styles = {
+  info: {
+    container: "bg-blue-50/70 dark:bg-blue-950/30 border-l-blue-500",
+    iconBg: "bg-blue-100 dark:bg-blue-900/50",
+    icon: "text-blue-600 dark:text-blue-400",
+    title: "text-blue-900 dark:text-blue-100",
+  },
+  note: {
+    container: "bg-gray-50/70 dark:bg-gray-950/30 border-l-gray-400",
+    iconBg: "bg-gray-100 dark:bg-gray-900/50",
+    icon: "text-gray-600 dark:text-gray-400",
+    title: "text-gray-900 dark:text-gray-100",
+  },
+  warning: {
+    container: "bg-orange-50/70 dark:bg-orange-950/30 border-l-orange-500",
+    iconBg: "bg-orange-100 dark:bg-orange-900/50",
+    icon: "text-orange-600 dark:text-orange-400",
+    title: "text-orange-900 dark:text-orange-100",
+  },
+  tip: {
+    container: "bg-green-50/70 dark:bg-green-950/30 border-l-green-500",
+    iconBg: "bg-green-100 dark:bg-green-900/50",
+    icon: "text-green-600 dark:text-green-400",
+    title: "text-green-900 dark:text-green-100",
+  },
+  danger: {
+    container: "bg-red-50/70 dark:bg-red-950/30 border-l-red-500",
+    iconBg: "bg-red-100 dark:bg-red-900/50",
+    icon: "text-red-600 dark:text-red-400",
+    title: "text-red-900 dark:text-red-100",
+  },
+};
+
+const icons = {
+  info: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
+  note: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>`,
+  warning: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path></svg>`,
+  tip: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path></svg>`,
+  danger: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`,
+};
+
+const defaultTitles = {
+  info: "Info",
+  note: "Note",
+  warning: "Warning",
+  tip: "Tip",
+  danger: "Danger",
+};
+
+const style = styles[type];
+const icon = icons[type];
+const displayTitle = title || defaultTitles[type];
+---
+
+<div class:list={["not-prose my-4 rounded-md border-l-4 overflow-hidden", style.container]}>
+  <div class="p-3">
+    <div class="flex items-start gap-3">
+      <div class:list={["shrink-0 flex items-center justify-center w-6 h-6 rounded", style.iconBg]}>
+        <div class:list={[style.icon]} set:html={icon} />
+      </div>
+      <div class="flex-1 min-w-0">
+        {displayTitle && (
+          <p class:list={["font-semibold text-sm mb-1", style.title]}>{displayTitle}</p>
+        )}
+        <div class="text-sm text-[var(--color-text-secondary)] leading-relaxed [&>p]:m-0 [&>p+p]:mt-1">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/mdx/Card.astro

@@ -0,0 +1,66 @@
+---
+interface Props {
+  title: string;
+  icon?: string;
+  href?: string;
+}
+
+const { title, icon, href } = Astro.props;
+
+const Tag = href ? "a" : "div";
+---
+
+<Tag
+  href={href}
+  class:list={[
+    "card-component not-prose group block p-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] no-underline",
+    href && "cursor-pointer hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-md transition-all duration-200"
+  ]}
+  style={href ? "cursor: pointer;" : ""}
+>
+  <div class="flex flex-col gap-3">
+    {icon && (
+      <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--color-bg-secondary)] group-hover:bg-primary-50 dark:group-hover:bg-primary-950/50 transition-colors">
+        <span class="text-xl">{icon}</span>
+      </div>
+    )}
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2">
+        <h3 class="font-semibold text-[var(--color-text)] group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors">{title}</h3>
+        {href && (
+          <svg class="w-4 h-4 text-[var(--color-text-muted)] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+          </svg>
+        )}
+      </div>
+      <div class="mt-1 text-sm text-[var(--color-text-secondary)] group-hover:text-[var(--color-text)] leading-relaxed transition-colors">
+        <slot />
+      </div>
+    </div>
+  </div>
+</Tag>
+
+<style>
+  .card-component {
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .card-component::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, var(--color-primary-50) 0%, transparent 50%);
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+    pointer-events: none;
+  }
+  
+  :global(.dark) .card-component::before {
+    background: linear-gradient(135deg, var(--color-primary-950) 0%, transparent 50%);
+  }
+  
+  .card-component:hover::before {
+    opacity: 0.5;
+  }
+</style>

package/src/components/mdx/CardGroup.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+  cols?: 1 | 2 | 3 | 4;
+}
+
+const { cols = 2 } = Astro.props;
+
+const gridCols: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+---
+
+<div class:list={["not-prose grid gap-5 my-6", gridCols[cols]]}>
+  <slot />
+</div>

package/src/components/mdx/CodeGroup.astro

@@ -0,0 +1,63 @@
+---
+// CodeGroup component for tabbed code blocks
+interface Props {
+  titles?: string[];
+}
+
+const { titles = [] } = Astro.props;
+---
+
+<div class="not-prose my-4 code-group" data-titles={JSON.stringify(titles)}>
+  <div class="code-group-tabs flex border-b border-[var(--color-border)] bg-[var(--color-bg-secondary)] rounded-t-lg"></div>
+  <div class="code-group-content">
+    <slot />
+  </div>
+</div>
+
+<script>
+  function initCodeGroups() {
+    document.querySelectorAll('.code-group').forEach((group) => {
+      const tabsContainer = group.querySelector('.code-group-tabs');
+      const contentContainer = group.querySelector('.code-group-content');
+      const titles = JSON.parse(group.getAttribute('data-titles') || '[]');
+      const codeBlocks = contentContainer?.querySelectorAll('pre');
+
+      if (!tabsContainer || !contentContainer || !codeBlocks?.length) return;
+
+      // Create tabs
+      codeBlocks.forEach((block, index) => {
+        const tab = document.createElement('button');
+        tab.className = 'px-4 py-2 text-sm font-medium transition-colors text-[var(--color-text-secondary)] hover:text-[var(--color-text)]';
+        tab.textContent = titles[index] || `Tab ${index + 1}`;
+        tab.addEventListener('click', () => {
+          // Update tabs
+          tabsContainer.querySelectorAll('button').forEach((t, i) => {
+            if (i === index) {
+              t.classList.add('border-b-2', 'border-primary-600', 'text-primary-600');
+              t.classList.remove('text-[var(--color-text-secondary)]');
+            } else {
+              t.classList.remove('border-b-2', 'border-primary-600', 'text-primary-600');
+              t.classList.add('text-[var(--color-text-secondary)]');
+            }
+          });
+          // Update content
+          codeBlocks.forEach((b, i) => {
+            (b as HTMLElement).style.display = i === index ? 'block' : 'none';
+          });
+        });
+        tabsContainer.appendChild(tab);
+
+        // Hide all but first
+        if (index === 0) {
+          tab.classList.add('border-b-2', 'border-primary-600', 'text-primary-600');
+          tab.classList.remove('text-[var(--color-text-secondary)]');
+        } else {
+          (block as HTMLElement).style.display = 'none';
+        }
+      });
+    });
+  }
+
+  initCodeGroups();
+  document.addEventListener('astro:page-load', initCodeGroups);
+</script>

package/src/components/mdx/CodeGroup.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+interface CodeGroupProps {
+  children: React.ReactNode;
+  titles?: string[];
+}
+
+export function CodeGroup({ children, titles = [] }: CodeGroupProps) {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  
+  // Extract code blocks from children
+  const codeBlocks = React.Children.toArray(children);
+  
+  return (
+    <div className="not-prose my-4 rounded-lg border border-[var(--color-border)] overflow-hidden">
+      {/* Tabs */}
+      <div className="flex bg-[var(--color-bg-tertiary)] border-b border-[var(--color-border)]">
+        {codeBlocks.map((_, index) => {
+          const isActive = activeIndex === index;
+          const title = titles[index] || `Tab ${index + 1}`;
+          return (
+            <button
+              key={index}
+              type="button"
+              onClick={() => setActiveIndex(index)}
+              className={`px-4 py-2 text-sm font-medium transition-colors ${
+                isActive
+                  ? "bg-[var(--color-bg-secondary)] text-[var(--color-text)] border-b-2 border-primary-500 -mb-px"
+                  : "text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+              }`}
+            >
+              {title}
+            </button>
+          );
+        })}
+      </div>
+      
+      {/* Content */}
+      <div className="bg-[var(--color-bg-secondary)]">
+        {codeBlocks.map((block, index) => (
+          <div
+            key={index}
+            style={{ display: activeIndex === index ? "block" : "none" }}
+          >
+            {block}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/mdx/Columns.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+interface ColumnsProps {
+  children: React.ReactNode;
+  columns?: 2 | 3 | 4;
+  className?: string;
+}
+
+export function Columns({ children, columns = 2, className }: ColumnsProps) {
+  const gridCols = {
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+  };
+
+  return (
+    <div className={cn("not-prose grid gap-4 my-4", gridCols[columns], className)}>
+      {children}
+    </div>
+  );
+}
+
+interface ColumnProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Column({ children, className }: ColumnProps) {
+  return <div className={cn("", className)}>{children}</div>;
+}

package/src/components/mdx/DocAccordion.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../ui/accordion";
+import { cn } from "../../lib/utils";
+
+// Accordion item structure
+interface AccordionItemData {
+  title: string;
+  content: React.ReactNode;
+  icon?: string;
+}
+
+interface DocAccordionProps {
+  items: AccordionItemData[];
+  type?: "single" | "multiple";
+  collapsible?: boolean;
+  defaultValue?: string | string[];
+  className?: string;
+}
+
+export function DocAccordion({ 
+  items,
+  type = "single", 
+  collapsible = true,
+  defaultValue,
+  className 
+}: DocAccordionProps) {
+  const renderItems = () => 
+    items.map((item, index) => {
+      const value = `item-${index}`;
+      return (
+        <AccordionItem 
+          key={value} 
+          value={value}
+          className="border-b border-[var(--color-border)] last:border-b-0"
+        >
+          <div className="flex items-start gap-3 px-4">
+            {item.icon && (
+              <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[var(--color-bg-secondary)] text-lg shrink-0 mt-3">
+                {item.icon}
+              </span>
+            )}
+            <div className="flex-1">
+              <AccordionTrigger className="text-left">
+                {item.title}
+              </AccordionTrigger>
+              <AccordionContent className="text-[var(--color-text-secondary)]">
+                {item.content}
+              </AccordionContent>
+            </div>
+          </div>
+        </AccordionItem>
+      );
+    });
+
+  if (type === "single") {
+    return (
+      <Accordion 
+        type="single" 
+        collapsible={collapsible}
+        defaultValue={defaultValue as string}
+        className={cn("not-prose my-6 rounded-xl border border-[var(--color-border)] overflow-hidden", className)}
+      >
+        {renderItems()}
+      </Accordion>
+    );
+  }
+
+  return (
+    <Accordion 
+      type="multiple" 
+      defaultValue={defaultValue as string[]}
+      className={cn("not-prose my-6 rounded-xl border border-[var(--color-border)] overflow-hidden", className)}
+    >
+      {renderItems()}
+    </Accordion>
+  );
+}
+
+// Alias for backwards compatibility
+export const SimpleAccordion = DocAccordion;
+
+export default DocAccordion;

package/src/components/mdx/DocCallout.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { Alert, AlertTitle, AlertDescription } from "../ui/alert";
+import { Info, AlertTriangle, Lightbulb, AlertCircle, FileText } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+type CalloutType = "info" | "warning" | "tip" | "danger" | "note";
+
+interface DocCalloutProps {
+  type?: CalloutType;
+  title?: string;
+  children: React.ReactNode;
+}
+
+const variantMap: Record<CalloutType, "info" | "warning" | "success" | "destructive" | "default"> = {
+  info: "info",
+  warning: "warning",
+  tip: "success",
+  danger: "destructive",
+  note: "default",
+};
+
+const iconMap: Record<CalloutType, React.ReactNode> = {
+  info: <Info className="h-4 w-4" />,
+  warning: <AlertTriangle className="h-4 w-4" />,
+  tip: <Lightbulb className="h-4 w-4" />,
+  danger: <AlertCircle className="h-4 w-4" />,
+  note: <FileText className="h-4 w-4" />,
+};
+
+const defaultTitles: Record<CalloutType, string> = {
+  info: "Info",
+  warning: "Warning",
+  tip: "Tip",
+  danger: "Danger",
+  note: "Note",
+};
+
+export function DocCallout({ type = "info", title, children }: DocCalloutProps) {
+  const displayTitle = title || defaultTitles[type];
+
+  return (
+    <Alert variant={variantMap[type]} className="not-prose my-6">
+      <div className="flex items-start gap-4">
+        <div className={cn(
+          "flex items-center justify-center w-8 h-8 rounded-lg shrink-0",
+          type === "info" && "bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400",
+          type === "warning" && "bg-orange-100 dark:bg-orange-900/50 text-orange-600 dark:text-orange-400",
+          type === "tip" && "bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400",
+          type === "danger" && "bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-400",
+          type === "note" && "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400",
+        )}>
+          {iconMap[type]}
+        </div>
+        <div className="flex-1 pt-0.5">
+          <AlertTitle className="text-sm font-semibold mb-1">{displayTitle}</AlertTitle>
+          <AlertDescription className="text-sm leading-relaxed [&>p]:m-0 [&>p+p]:mt-2">
+            {children}
+          </AlertDescription>
+        </div>
+      </div>
+    </Alert>
+  );
+}
+
+export default DocCallout;