Content Components

/**
 * MDX content wrapper component
 * @param props - MDX content props
 * @returns MDX content container
 */
function MDXContent(props: MDXContentProps): ReactNode;

interface MDXContentProps {
  readonly children: ReactNode;
}

/**
 * MDX page wrapper component
 * @returns Complete MDX page structure
 */
function MDXPage(): ReactNode;

/**
 * MDX components mapping object
 * @returns Component mappings for MDX elements
 */
const MDXComponents: MDXComponentsObject;

interface MDXComponentsObject {
  readonly Head: typeof Head;
  readonly details: typeof MDXDetails;
  readonly Details: typeof MDXDetails;
  readonly code: typeof MDXCode;
  readonly a: typeof MDXA;
  readonly pre: typeof MDXPre;
  readonly ul: typeof MDXUl;
  readonly img: typeof MDXImg;
  readonly h1: (props: ComponentProps<'h1'>) => ReactNode;
  readonly h2: (props: ComponentProps<'h2'>) => ReactNode;
  readonly h3: (props: ComponentProps<'h3'>) => ReactNode;
  readonly h4: (props: ComponentProps<'h4'>) => ReactNode;
  readonly h5: (props: ComponentProps<'h5'>) => ReactNode;
  readonly h6: (props: ComponentProps<'h6'>) => ReactNode;
  readonly admonition: typeof Admonition;
  readonly mermaid: typeof Mermaid;
  [tagName: string]: ComponentType<any>;
}

/**
 * MDX anchor/link component  
 * @param props - Anchor element props
 * @returns Enhanced link element
 */
function MDXA(props: MDXAProps): ReactNode;

interface MDXAProps extends ComponentProps<'a'> {}

/**
 * MDX code element component
 * @param props - Code element props
 * @returns Inline code element
 */
function MDXCode(props: MDXCodeProps): ReactNode;

interface MDXCodeProps extends ComponentProps<'code'> {}

/**
 * MDX details element component
 * @param props - Details element props
 * @returns Collapsible details element
 */
function MDXDetails(props: MDXDetailsProps): ReactNode;

interface MDXDetailsProps extends ComponentProps<'details'> {}

/**
 * MDX unordered list component
 * @param props - List element props
 * @returns Enhanced ul element
 */
function MDXUl(props: MDXUlProps): ReactNode;

interface MDXUlProps extends ComponentProps<'ul'> {}

/**
 * MDX list item component
 * @param props - List item props
 * @returns Enhanced li element
 */
function MDXLi(props: MDXLiProps): ReactNode;

interface MDXLiProps extends ComponentProps<'li'> {}

/**
 * MDX image component
 * @param props - Image element props
 * @returns Enhanced img element
 */
function MDXImg(props: MDXImgProps): ReactNode;

interface MDXImgProps extends ComponentProps<'img'> {}

/**
 * MDX heading component
 * @param props - Heading props
 * @returns Enhanced heading with anchor links
 */
function MDXHeading(props: MDXHeadingProps): ReactNode;

interface MDXHeadingProps extends ComponentProps<typeof Heading> {}

/**
 * MDX pre element component
 * @param props - Pre element props
 * @returns Enhanced pre element
 */
function MDXPre(props: MDXPreProps): ReactNode;

interface MDXPreProps extends ComponentProps<'pre'> {}

/**
 * Main code block component with syntax highlighting
 * @param props - Code block props
 * @returns Syntax-highlighted code block
 */
function CodeBlock(props: CodeBlockProps): ReactNode;

interface CodeBlockProps {
  readonly children: ReactNode;
  readonly className?: string;
  readonly metastring?: string;
  readonly title?: ReactNode;
  readonly language?: string;
  readonly showLineNumbers?: boolean | number;
}

/**
 * Inline code component
 * @param props - Inline code props
 * @returns Styled inline code element
 */
function CodeInline(props: CodeInlineProps): ReactNode;

interface CodeInlineProps extends ComponentProps<'code'> {}

/**
 * Code block provider for context
 * @param props - Provider props
 * @returns Code block context provider
 */
function CodeBlockProvider(props: CodeBlockProviderProps): ReactNode;

interface CodeBlockProviderProps {
  readonly children: ReactNode;
}

/**
 * Code block title component
 * @param props - Title props
 * @returns Code block title bar
 */
function CodeBlockTitle(props: CodeBlockTitleProps): ReactNode;

interface CodeBlockTitleProps {
  readonly children: ReactNode;
}

/**
 * Code block layout wrapper
 * @param props - Layout props
 * @returns Code block layout structure
 */
function CodeBlockLayout(props: CodeBlockLayoutProps): ReactNode;

interface CodeBlockLayoutProps {
  readonly className?: string;
}

/**
 * Code block container component
 * @param props - Container props with dynamic element type
 * @returns Flexible container element
 */
function CodeBlockContainer<T extends 'div' | 'pre'>({
  as: As,
  ...props
}: {as: T} & ComponentProps<T>): ReactNode;

/**
 * Code block content wrapper
 * @param props - Content props
 * @returns Code content container
 */
function CodeBlockContent(props: CodeBlockContentProps): ReactNode;

interface CodeBlockContentProps {
  className?: string;
}

/**
 * Code block content for React elements
 * @param props - Element content props
 * @returns Rendered React element content
 */
function CodeBlockContentElement(props: CodeBlockContentElementProps): ReactNode;

interface CodeBlockContentElementProps extends CodeBlockProps {}

/**
 * Code block content for string content
 * @param props - String content props  
 * @returns Syntax-highlighted string content
 */
function CodeBlockContentString(props: CodeBlockContentStringProps): ReactNode;

interface CodeBlockContentStringProps extends Omit<CodeBlockProps, 'children'> {
  readonly children: string;
}

/**
 * Individual code line component
 * @param props - Code line props
 * @returns Rendered code line with tokens
 */
function CodeBlockLine(props: CodeBlockLineProps): ReactNode;

interface CodeBlockLineProps {
  readonly line: Token[];
  readonly classNames: string[] | undefined; 
  readonly showLineNumbers: boolean;
  readonly getLineProps: (input: LineInputProps) => LineOutputProps;
  readonly getTokenProps: (input: TokenInputProps) => TokenOutputProps;
}

/**
 * Individual code token component
 * @param props - Code token props
 * @returns Styled code token
 */
function CodeBlockLineToken(props: CodeBlockLineTokenProps): ReactNode;

interface CodeBlockLineTokenProps extends TokenOutputProps {
  readonly token: Token;
  readonly line: Token[];
}

/**
 * Code block buttons container
 * @param props - Buttons container props
 * @returns Action buttons for code block
 */
function CodeBlockButtons(props: CodeBlockButtonsProps): ReactNode;

interface CodeBlockButtonsProps {
  readonly className?: string;
}

/**
 * Generic code block button
 * @param props - Button props
 * @returns Styled code block button
 */
function CodeBlockButton(props: CodeBlockButtonProps): ReactNode;

interface CodeBlockButtonProps extends ComponentProps<'button'> {
  readonly className?: string;
}

/**
 * Copy code button
 * @param props - Copy button props
 * @returns Copy to clipboard button
 */
function CodeBlockCopyButton(props: CodeBlockCopyButtonProps): ReactNode;

interface CodeBlockCopyButtonProps {
  readonly className?: string;
}

/**
 * Word wrap toggle button
 * @param props - Word wrap button props
 * @returns Word wrap toggle button
 */
function CodeBlockWordWrapButton(props: CodeBlockWordWrapButtonProps): ReactNode;

interface CodeBlockWordWrapButtonProps {
  readonly className?: string;
}

/**
 * Main admonition component
 * @param props - Admonition props
 * @returns Styled admonition callout
 */
function Admonition(props: AdmonitionProps): ReactNode;

interface AdmonitionProps {
  readonly children: ReactNode;
  readonly type: string;
  readonly icon?: ReactNode;
  readonly title?: ReactNode;
  readonly className?: string;
}

/**
 * Admonition layout wrapper
 * @param props - Layout props
 * @returns Admonition layout structure
 */
function AdmonitionLayout(props: AdmonitionLayoutProps): ReactNode;

interface AdmonitionLayoutProps {
  readonly children: ReactNode;
  readonly type: string;
  readonly icon?: ReactNode;
  readonly title?: ReactNode;
  readonly className?: string;
}

/**
 * Note admonition type
 * @param props - Note admonition props
 * @returns Note-styled admonition
 */
function AdmonitionTypeNote(props: AdmonitionProps): ReactNode;

/**
 * Info admonition type
 * @param props - Info admonition props
 * @returns Info-styled admonition
 */
function AdmonitionTypeInfo(props: AdmonitionProps): ReactNode;

/**
 * Tip admonition type
 * @param props - Tip admonition props
 * @returns Tip-styled admonition
 */
function AdmonitionTypeTip(props: AdmonitionProps): ReactNode;

/**
 * Warning admonition type
 * @param props - Warning admonition props
 * @returns Warning-styled admonition
 */
function AdmonitionTypeWarning(props: AdmonitionProps): ReactNode;

/**
 * Caution admonition type (deprecated, use Warning)
 * @param props - Caution admonition props
 * @returns Caution-styled admonition
 */
function AdmonitionTypeCaution(props: AdmonitionProps): ReactNode;

/**
 * Danger admonition type
 * @param props - Danger admonition props
 * @returns Danger-styled admonition
 */
function AdmonitionTypeDanger(props: AdmonitionProps): ReactNode;

/**
 * Admonition types registry
 * @returns Mapping of admonition type names to components
 */
const AdmonitionTypes: {
  [admonitionType: string]: ComponentType<AdmonitionProps>;
};

/**
 * Note admonition icon
 * @param props - Icon props
 * @returns Note icon SVG
 */
function AdmonitionIconNote(props: AdmonitionIconProps): ReactNode;

/**
 * Tip admonition icon
 * @param props - Icon props
 * @returns Tip icon SVG
 */
function AdmonitionIconTip(props: AdmonitionIconProps): ReactNode;

/**
 * Warning admonition icon
 * @param props - Icon props
 * @returns Warning icon SVG
 */
function AdmonitionIconWarning(props: AdmonitionIconProps): ReactNode;

/**
 * Danger admonition icon
 * @param props - Icon props
 * @returns Danger icon SVG
 */
function AdmonitionIconDanger(props: AdmonitionIconProps): ReactNode;

/**
 * Info admonition icon
 * @param props - Icon props
 * @returns Info icon SVG
 */
function AdmonitionIconInfo(props: AdmonitionIconProps): ReactNode;

interface AdmonitionIconProps extends ComponentProps<'svg'> {}

/**
 * Tabs container component
 * @param props - Tabs props
 * @returns Tabbed content interface
 */
function Tabs(props: TabsProps): ReactNode;

interface TabsProps {
  readonly children: ReactNode;
  readonly defaultValue?: string;
  readonly values?: TabItem[];
  readonly className?: string;
  readonly queryString?: string | boolean;
  readonly lazy?: boolean;
}

/**
 * Individual tab item component
 * @param props - Tab item props
 * @returns Tab content panel
 */
function TabItem(props: TabItemProps): ReactNode;

interface TabItemProps {
  readonly children: ReactNode;
  readonly value: string;
  readonly label?: string;
  readonly default?: boolean;
  readonly attributes?: {[key: string]: unknown};
  readonly className?: string;
}

/**
 * Collapsible details component
 * @param props - Details props
 * @returns Collapsible content section
 */
function Details(props: DetailsProps): ReactNode;

interface DetailsProps {
  readonly children: ReactNode;
  readonly summary?: ReactNode;
  readonly open?: boolean;
  readonly className?: string;
}

/**
 * Enhanced heading component with anchor links
 * @param props - Heading props
 * @returns Heading with auto-generated anchor
 */
function Heading(props: HeadingProps): ReactNode;

interface HeadingProps extends ComponentProps<HeadingType> {
  readonly as: HeadingType;
}

type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

/**
 * Mermaid diagram component
 * @param props - Mermaid props
 * @returns Rendered Mermaid diagram
 */
function Mermaid(props: MermaidProps): ReactNode;

interface MermaidProps {
  value: string;
}

/**
 * Last updated information component
 * @param props - Last updated props
 * @returns Last updated metadata display
 */
function LastUpdated(props: LastUpdatedProps): ReactNode;

interface LastUpdatedProps {
  readonly lastUpdatedAt?: number | null;
  readonly lastUpdatedBy?: string | null;
}

/**
 * Edit this page link component
 * @param props - Edit page props
 * @returns Edit page link
 */
function EditThisPage(props: EditThisPageProps): ReactNode;

interface EditThisPageProps {
  readonly editUrl: string;
}

/**
 * Edit metadata row component
 * @param props - Edit meta row props
 * @returns Edit information row
 */
function EditMetaRow(props: EditMetaRowProps): ReactNode;

interface EditMetaRowProps {
  readonly className: string;
  readonly editUrl: string | null | undefined;
  readonly lastUpdatedAt: number | null | undefined;
  readonly lastUpdatedBy: string | null | undefined;
}

// Tab item definition
interface TabItem {
  label: string;
  value: string;
  attributes?: {[key: string]: unknown};
}

// Prism token types (from prism-react-renderer)
interface Token {
  types: string[];
  content: string;
  empty?: boolean;
}

interface LineInputProps {
  key?: React.Key;
  style?: React.CSSProperties;
  className?: string;
  line: Token[];
  [otherProp: string]: any;
}

interface LineOutputProps {
  key?: React.Key;
  style?: React.CSSProperties;
  className: string;
  [otherProps: string]: any;
}

interface TokenInputProps {
  key?: React.Key;
  style?: React.CSSProperties;
  className?: string;
  token: Token;
  [otherProp: string]: any;
}

interface TokenOutputProps {
  key?: React.Key;
  style?: React.CSSProperties;
  className: string;
  children: string;
  [otherProps: string]: any;
}

import React from 'react';
import CodeBlock from '@theme/CodeBlock';

export default function CustomCodeExample() {
  const code = `
function greet(name) {
  console.log(\`Hello, \${name}!\`);
}

greet('World');
  `;

  return (
    <CodeBlock
      language="javascript"
      title="greeting.js"
      showLineNumbers
    >
      {code}
    </CodeBlock>
  );
}

import React from 'react';
import Admonition from '@theme/Admonition';

export default function CustomWarning({children}) {
  return (
    <Admonition
      type="warning"
      title="Custom Warning"
      className="my-custom-warning"
    >
      {children}
    </Admonition>
  );
}

import React from 'react';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

export default function CodeTabs() {
  return (
    <Tabs>
      <TabItem value="js" label="JavaScript" default>
        ```javascript
        console.log('Hello from JavaScript!');
        ```
      </TabItem>
      <TabItem value="ts" label="TypeScript">
        ```typescript
        console.log('Hello from TypeScript!');
        ```
      </TabItem>
    </Tabs>
  );
}