diff --git a/packages/chronicle/src/components/mdx/details.module.css b/packages/chronicle/src/components/mdx/details.module.css
new file mode 100644
index 0000000..f79a00a
--- /dev/null
+++ b/packages/chronicle/src/components/mdx/details.module.css
@@ -0,0 +1,37 @@
+.details {
+ border: 1px solid var(--rs-color-border-base-primary);
+ border-radius: var(--rs-radius-2);
+ margin: var(--rs-space-5) 0;
+}
+
+.summary {
+ padding: var(--rs-space-4) var(--rs-space-5);
+ cursor: pointer;
+ font-weight: 500;
+ font-size: var(--rs-font-size-small);
+ color: var(--rs-color-text-base-primary);
+ background: var(--rs-color-background-base-secondary);
+ list-style: none;
+ display: flex;
+ align-items: center;
+ gap: var(--rs-space-3);
+}
+
+.summary::-webkit-details-marker {
+ display: none;
+}
+
+.summary::before {
+ content: '▶';
+ font-size: 10px;
+ transition: transform 0.2s ease;
+ color: var(--rs-color-text-base-secondary);
+}
+
+.details[open] > .summary::before {
+ transform: rotate(90deg);
+}
+
+.content {
+ padding: var(--rs-space-4) var(--rs-space-5);
+}
diff --git a/packages/chronicle/src/components/mdx/details.tsx b/packages/chronicle/src/components/mdx/details.tsx
new file mode 100644
index 0000000..2d29ac0
--- /dev/null
+++ b/packages/chronicle/src/components/mdx/details.tsx
@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react'
+import styles from './details.module.css'
+
+export function MdxDetails({ children, className, ...props }: ComponentProps<'details'>) {
+ return (
+
+ {children}
+
+ )
+}
+
+export function MdxSummary({ children, className, ...props }: ComponentProps<'summary'>) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/packages/chronicle/src/components/mdx/index.tsx b/packages/chronicle/src/components/mdx/index.tsx
index 9c3be76..b22d73e 100644
--- a/packages/chronicle/src/components/mdx/index.tsx
+++ b/packages/chronicle/src/components/mdx/index.tsx
@@ -2,11 +2,15 @@ import type { MDXComponents } from 'mdx/types'
import { Image } from './image'
import { Link } from './link'
import { MdxTable, MdxThead, MdxTbody, MdxTr, MdxTh, MdxTd } from './table'
-import { MdxPre } from './code'
+import { MdxPre, MdxCode } from './code'
+import { MdxDetails, MdxSummary } from './details'
+import { Mermaid } from './mermaid'
+import { MdxParagraph } from './paragraph'
import { CalloutContainer, CalloutTitle, CalloutDescription, MdxBlockquote } from '@/components/common/callout'
import { Tabs } from '@raystack/apsara'
export const mdxComponents: MDXComponents = {
+ p: MdxParagraph,
img: Image,
a: Link,
table: MdxTable,
@@ -15,12 +19,16 @@ export const mdxComponents: MDXComponents = {
tr: MdxTr,
th: MdxTh,
td: MdxTd,
+ code: MdxCode,
pre: MdxPre,
+ details: MdxDetails,
+ summary: MdxSummary,
blockquote: MdxBlockquote,
Callout: CalloutContainer,
CalloutTitle,
CalloutDescription,
Tabs,
+ Mermaid,
}
export { Image } from './image'
diff --git a/packages/chronicle/src/components/mdx/mermaid.module.css b/packages/chronicle/src/components/mdx/mermaid.module.css
new file mode 100644
index 0000000..711726f
--- /dev/null
+++ b/packages/chronicle/src/components/mdx/mermaid.module.css
@@ -0,0 +1,9 @@
+.mermaid {
+ margin: var(--rs-space-5) 0;
+ overflow-x: auto;
+}
+
+.mermaid svg {
+ max-width: 100%;
+ height: auto;
+}
diff --git a/packages/chronicle/src/components/mdx/mermaid.tsx b/packages/chronicle/src/components/mdx/mermaid.tsx
new file mode 100644
index 0000000..6b34320
--- /dev/null
+++ b/packages/chronicle/src/components/mdx/mermaid.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { useEffect, useId, useState } from 'react'
+import styles from './mermaid.module.css'
+
+interface MermaidProps {
+ chart: string
+}
+
+export function Mermaid({ chart }: MermaidProps) {
+ const mermaidId = useId().replace(/:/g, '-')
+ const [svg, setSvg] = useState
('')
+
+ useEffect(() => {
+ let cancelled = false
+
+ async function render() {
+ const { default: mermaid } = await import('mermaid')
+ mermaid.initialize({ startOnLoad: false, theme: 'default' })
+ const { svg: rendered } = await mermaid.render(
+ mermaidId,
+ chart
+ )
+ if (!cancelled) setSvg(rendered)
+ }
+
+ render()
+ return () => { cancelled = true }
+ }, [chart])
+
+ return (
+
+ )
+}
diff --git a/packages/chronicle/src/components/mdx/paragraph.module.css b/packages/chronicle/src/components/mdx/paragraph.module.css
new file mode 100644
index 0000000..6baf17b
--- /dev/null
+++ b/packages/chronicle/src/components/mdx/paragraph.module.css
@@ -0,0 +1,8 @@
+.paragraph {
+ font-size: var(--rs-font-size-regular);
+ margin-bottom: var(--rs-space-5);
+}
+
+.paragraph :global(a) {
+ font-size: inherit;
+}
diff --git a/packages/chronicle/src/components/mdx/paragraph.tsx b/packages/chronicle/src/components/mdx/paragraph.tsx
new file mode 100644
index 0000000..b525ca6
--- /dev/null
+++ b/packages/chronicle/src/components/mdx/paragraph.tsx
@@ -0,0 +1,19 @@
+import { Children, isValidElement, type ComponentProps } from 'react'
+import styles from './paragraph.module.css'
+
+const BLOCK_ELEMENTS = new Set(['summary', 'details', 'div', 'table', 'ul', 'ol'])
+
+function hasBlockChild(children: React.ReactNode): boolean {
+ return Children.toArray(children).some(
+ (child) => isValidElement(child) && typeof child.type === 'string' && BLOCK_ELEMENTS.has(child.type)
+ )
+}
+
+export function MdxParagraph({ children, className, ...props }: ComponentProps<'p'>) {
+ const Tag = hasBlockChild(children) ? 'div' : 'p'
+ return (
+
+ {children}
+
+ )
+}
diff --git a/packages/chronicle/src/components/ui/search.module.css b/packages/chronicle/src/components/ui/search.module.css
index b80c60f..81ed6ac 100644
--- a/packages/chronicle/src/components/ui/search.module.css
+++ b/packages/chronicle/src/components/ui/search.module.css
@@ -1,13 +1,6 @@
.trigger {
- display: flex;
- align-items: center;
gap: 8px;
- padding: 6px 12px;
- border-radius: 6px;
- border: 1px solid var(--rs-color-border-base-primary);
- background: transparent;
color: var(--rs-color-foreground-base-secondary);
- font-size: 14px;
cursor: pointer;
}
diff --git a/packages/chronicle/src/components/ui/search.tsx b/packages/chronicle/src/components/ui/search.tsx
index c40e529..f028ddd 100644
--- a/packages/chronicle/src/components/ui/search.tsx
+++ b/packages/chronicle/src/components/ui/search.tsx
@@ -69,11 +69,12 @@ export function Search({ className }: SearchProps) {