import * as _linaria_core from '@linaria/core';
import React, { ReactElement } from 'react';
import { Settings } from '@xyd-js/core';
import { Theme } from '@code-hike/lighter';
import { HighlightedCode } from 'codehike/code';

declare const SearchButtonFullWidth: _linaria_core.LinariaClassName;

interface BadgeProps {
    /**
     * The class name of the badge.
     */
    className?: string;
    /**
     * The children of the badge.
     */
    children?: React.ReactNode;
    /**
     * The size of the badge.
     */
    size?: "sm" | "xs";
    /**
     * The kind of the badge.
     */
    kind?: "warning" | "info" | "default";
    /**
     * Whether the badge should be pre-formatted.
     */
    pre?: boolean;
}
/**
 * Badge component is used to display a badge.
 *
 * @group Components
 */
declare function Badge({ className, children, size, kind, pre }: BadgeProps): React.JSX.Element;

interface ButtonProps {
    children?: React.ReactNode;
    kind?: "primary" | "secondary" | "tertiary" | undefined;
    theme?: "ghost";
    size?: "xs" | "sm" | "md" | "lg";
    className?: string;
    onClick?: () => void;
    disabled?: boolean;
    icon?: React.ReactElement | string;
    iconPosition?: "left" | "right";
    href?: string;
    /** Accessible name — required when the button is icon-only (no `children`). */
    "aria-label"?: string;
}
declare function Button({ children, kind, theme, size, className, onClick, disabled, icon, iconPosition, href, "aria-label": ariaLabel }: ButtonProps): React.JSX.Element;

/**
 * Props for the Callout component
 */
interface CalloutProps {
    /** Additional CSS class name to be applied to the callout */
    className?: string;
    /** Content to be displayed inside the callout */
    children: React.ReactNode;
    kind?: "warning" | "note" | "tip" | "check" | "danger";
}
/**
 * A Callout component that displays important information or notices in a visually distinct way.
 * It includes an info icon and a message area for content.
 *
 * @category Component
 */
declare function Callout({ className, children, kind }: CalloutProps): React.JSX.Element;

/**
 * Props for the CodeTutorialSteps component
 */
interface CodeTutorialStepsProps {
    /** Steps to be rendered - one `CodeTutorialSteps.Step` per numbered step */
    children: React.ReactNode;
    /** Optional CSS class name to be applied to the tutorial container */
    className?: string;
}
/**
 * CodeTutorialSteps component that renders a numbered vertical stepper whose body is
 * split in two: prose on the left and the code or callouts it produces on the right.
 * Use it for programmatic quickstarts - for a plain sequence of instructions use `Steps`.
 *
 * @category Component
 */
declare function CodeTutorialSteps({ children, className }: CodeTutorialStepsProps): React.JSX.Element;
declare namespace CodeTutorialSteps {
    var Step: ({ children, step, className }: CodeTutorialStepProps) => React.JSX.Element;
    var Title: ({ children }: {
        children: React.ReactNode;
    }) => React.JSX.Element;
    var Body: ({ children }: {
        children: React.ReactNode;
    }) => React.JSX.Element;
    var Aside: ({ children }: {
        children: React.ReactNode;
    }) => React.JSX.Element;
}
/**
 * Props for the CodeTutorialSteps.Step component
 */
interface CodeTutorialStepProps {
    /** Slots of the step - a `Title`, a `Body` and an optional `Aside` */
    children: React.ReactNode;
    /** Position of the step, 1-based. Injected by `CodeTutorialSteps` */
    step?: number;
    /** Optional CSS class name to be applied to the step */
    className?: string;
}

declare function ColorSchemeButton(): React.JSX.Element;

/**
 * Base interface for all Details component variants
 */
interface BaseDetailsProps {
    /** Content to be displayed inside the details element */
    children: React.ReactNode;
    /** Label text displayed in the summary */
    label: string;
    /** Optional icon element to be displayed in the summary */
    icon?: React.ReactElement;
    /** Optional CSS class name for custom styling */
    className?: string;
}
/**
 * Props for the tertiary variant of the Details component
 */
interface TertiaryDetailsProps extends BaseDetailsProps {
    /** Specifies the tertiary variant */
    kind: "tertiary";
    /** Title text or element displayed in the summary */
    title: string | React.ReactNode;
}
/**
 * Props for the secondary variant of the Details component
 */
interface SecondaryDetailsProps extends BaseDetailsProps {
    /** Specifies the secondary variant */
    kind: "secondary";
    /** Title text or element displayed in the summary */
    title: string | React.ReactNode;
}
/**
 * Props for the primary variant of the Details component
 */
interface PrimaryDetailsProps extends BaseDetailsProps {
    /** Specifies the primary variant (default) */
    kind?: "primary";
}
/** Union type of all possible Details component variants */
type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps;
/**
 * A collapsible details component that supports three variants: primary, secondary, and tertiary.
 * Each variant has a different visual style and structure.
 *
 * @param props - The component props
 * @returns A details element with collapsible content
 *
 * @category Component
 */
declare function Details(props: DetailsProps): React.ReactElement;

interface IconProps {
    name: string;
    size?: number;
    color?: string;
}
declare function Icon(props: IconProps): ReactElement | null;
declare namespace Icon {
    var ExternalArrow: () => React.JSX.Element;
}

/**
 * Props for the Steps component
 */
interface StepsProps {
    /** Content to be rendered inside the steps list */
    children: React.ReactNode;
    /** Optional CSS class name to be applied to the steps container */
    className?: string;
    /** Optional kind of steps to be rendered */
    kind?: "secondary" | undefined;
}
/**
 * Steps component that renders a numbered list of steps or stages.
 * Use this component to display a sequence of steps in a process or workflow.
 *
 * @category Component
 */
declare function Steps({ children, className, kind }: StepsProps): React.JSX.Element;
declare namespace Steps {
    var Item: ({ children, icon, title, className }: StepsItemProps) => React.JSX.Element;
}
/**
 * Props for the Steps.Item component
 */
interface StepsItemProps {
    /** Content to be rendered inside the step item */
    children: React.ReactNode;
    /** Optional icon to be displayed in the step item */
    icon?: string | React.ReactNode;
    /** Optional title to be displayed in the step item */
    title?: string;
    /** Optional CSS class name to be applied to the step item */
    className?: string;
}

/**
 * Props for the Table component
 */
interface TableProps {
    /** The content to be rendered inside the table */
    children: React.ReactNode;
    /** Optional kind of the table, can be used for styling purposes */
    kind?: "secondary";
    /** Optional CSS class name to be applied to the table */
    className?: string;
}
/**
 * A table component that provides a structured way to display tabular data.
 * It supports custom styling through className prop and can contain various table elements.
 *
 * @category Component
 */
declare function Table({ children, kind, className }: TableProps): React.JSX.Element;
declare namespace Table {
    var Head: ({ children }: TableHeadProps) => React.JSX.Element;
    var Th: ({ children, numeric }: TableThProps) => React.JSX.Element;
    var Tr: ({ children }: TableTrProps) => React.JSX.Element;
    var Body: ({ children }: TableBodyProps) => React.JSX.Element;
    var Td: ({ children, numeric, muted }: TableTdProps) => React.JSX.Element;
    var Cell: ({ children }: TableCellProps) => React.JSX.Element;
}
/**
 * Props for the TableHead component
 */
interface TableHeadProps {
    /** The content to be rendered inside the table header */
    children: React.ReactNode;
}
/**
 * Props for the TableTh component
 */
interface TableThProps {
    /** The content to be rendered inside the table header cell */
    children: React.ReactNode;
    /** Whether the cell content should be right-aligned (for numeric values) */
    numeric?: boolean;
}
/**
 * Props for the TableTr component
 */
interface TableTrProps {
    /** The content to be rendered inside the table row */
    children: React.ReactNode;
}
/**
 * Props for the TableBody component
 */
interface TableBodyProps {
    /** The content to be rendered inside the table body */
    children: React.ReactNode;
}
/**
 * Props for the TableTd component
 */
interface TableTdProps {
    /** The content to be rendered inside the table cell */
    children: React.ReactNode;
    /** Whether the cell content should be right-aligned (for numeric values) */
    numeric?: boolean;
    /** Whether the cell should have a muted appearance */
    muted?: boolean;
}
/**
 * Props for the TableCell component
 */
interface TableCellProps {
    /** The content to be rendered inside the table cell */
    children: React.ReactNode;
}

interface UpdateProps {
    children: React.ReactNode;
    version: string;
    date?: string;
}
declare function Update(props: UpdateProps): React.JSX.Element;

interface SyntaxHighlightedCode extends HighlightedCode {
    title?: string;
}
interface CodeThemeBlockProps {
    /** This is the raw code. May include annotation comments. */
    value: string;
    /** The programming language. */
    lang: string;
    /** Metadata string (the content after the language name in a markdown codeblock). */
    meta: string;
    title?: string;
    /** The highlighted code. */
    highlighted?: SyntaxHighlightedCode;
}

interface CodeSampleProps {
    name: string;
    description: string;
    codeblocks?: CodeThemeBlockProps[];
    theme?: Theme;
    size?: "full";
    lineNumbers?: boolean;
    descriptionHead?: string;
    descriptionContent?: string | React.ReactNode;
    descriptionIcon?: string;
    markdownFormat?: boolean;
    kind?: "secondary";
    controlByMeta?: boolean;
    /** How the language switcher renders: a row of tabs (default) or a
     * dropdown to pick the language. */
    languageSwitcher?: "tabs" | "dropdown";
    /** Render each language as its programming-language icon (from xyd's
     * built-in code-language icon set, drawn via the xyd `Icon` component)
     * instead of the raw name. Languages without an icon keep their name. */
    languageIcons?: boolean;
    /** Advanced override: fully control the label for a language tab/option.
     * Takes precedence over `languageIcons`. Falls back to the name otherwise. */
    renderLanguage?: (lang: string, meta?: string) => React.ReactNode;
    /** Extra action(s) rendered in the code toolbar, right after the copy button
     * (e.g. Atlas's "run request" play icon). */
    codeActions?: React.ReactNode;
    /** Controlled active language (a tab value = `meta || lang`). When set with
     * `onLangChange`, the language switcher is CONTROLLED and shared — every
     * CodeSample fed the same value shows the same language, and switching one
     * updates them all (Atlas wires this to its page-shared SDK language). */
    activeLang?: string;
    onLangChange?: (lang: string) => void;
}
declare function CodeSample(props: CodeSampleProps): React.JSX.Element;

interface ReactContentOptions {
    Link?: React.ElementType;
    components?: {
        [component: string]: (props: any) => React.JSX.Element | null;
    };
    useLocation?: () => {
        search: string;
    };
    useNavigate?: (to: any) => void;
    useNavigation?: () => any;
}
declare class ReactContent {
    protected settings?: Settings | undefined;
    protected options?: ReactContentOptions | undefined;
    constructor(settings?: Settings | undefined, options?: ReactContentOptions | undefined);
    components(): {
        [component: string]: (props: any) => React.JSX.Element | null;
    };
    noop(): {
        React: typeof NoopReactComponent;
        Steps: typeof NoopComponent;
        Tabs: typeof NoopComponent;
        GuideCard: typeof NoopComponent;
        Table: typeof NoopComponent;
        CodeTutorialSteps: typeof NoopComponent;
    };
}
declare function NoopComponent(): null;
declare namespace NoopComponent {
    var Item: () => null;
    var Content: () => null;
    var List: () => null;
    var Head: () => null;
    var Td: () => null;
    var Tr: () => null;
    var Th: () => null;
    var Cell: () => null;
    var Step: () => null;
    var Title: () => null;
    var Body: () => null;
    var Aside: () => null;
}
declare function NoopReactComponent(): null;
declare namespace NoopReactComponent {
    var Fragment: React.ExoticComponent<React.FragmentProps>;
}
declare function stdContent(this: ReactContent): {
    H1: (props: any) => React.JSX.Element;
    H2: (props: any) => React.JSX.Element;
    H3: (props: any) => React.JSX.Element;
    H4: (props: any) => React.JSX.Element;
    H5: (props: any) => React.JSX.Element;
    P: (props: any) => React.JSX.Element;
    Ul: (props: any) => React.JSX.Element;
    Ol: (props: any) => React.JSX.Element;
    Li: (props: any) => React.JSX.Element;
    Table: (props: any) => React.JSX.Element;
    Tr: (props: any) => React.JSX.Element;
    Th: (props: any) => React.JSX.Element;
    h1: (props: any) => React.JSX.Element;
    h2: (props: any) => React.JSX.Element;
    h3: (props: any) => React.JSX.Element;
    h4: (props: any) => React.JSX.Element;
    h5: (props: any) => React.JSX.Element;
    p: (props: any) => React.JSX.Element;
    ul: (props: any) => React.JSX.Element;
    ol: (props: any) => React.JSX.Element;
    li: (props: any) => React.JSX.Element;
    table: (props: any) => React.JSX.Element;
    tr: (props: any) => React.JSX.Element;
    th: (props: any) => React.JSX.Element;
    td: (props: any) => React.JSX.Element;
    code: (props: any) => React.JSX.Element;
    pre: any;
    details: (props: any) => React.JSX.Element;
    blockquote: (props: any) => React.JSX.Element;
    hr: ({ children, ...props }: {
        [x: string]: any;
        children: any;
    }) => React.JSX.Element;
    a: (props: any) => React.JSX.Element;
    br: ({ children, ...props }: {
        [x: string]: any;
        children: any;
    }) => React.JSX.Element;
    img: ({ children, src, alt, ...props }: {
        [x: string]: any;
        children: any;
        src: any;
        alt: any;
    }) => React.JSX.Element;
    picture: (props: any) => React.JSX.Element;
    source: (props: any) => React.JSX.Element;
    input: ({ children, ...props }: {
        [x: string]: any;
        children: any;
    }) => React.JSX.Element;
    textarea: ({ children, ...props }: {
        [x: string]: any;
        children: any;
    }) => React.JSX.Element;
    div: (props: any) => React.JSX.Element;
    span: (props: any) => React.JSX.Element;
    iframe: (props: any) => React.JSX.Element;
    svg: (props: any) => React.JSX.Element;
    feature: (props: any) => React.JSX.Element;
    React: typeof NoopReactComponent;
};
declare function writerContent(): {
    Callout: typeof Callout;
    Details: typeof Details;
    GuideCard: any;
    Breadcrumbs: any;
    Steps: typeof Steps;
    CodeTutorialSteps: typeof CodeTutorialSteps;
    Tabs: any;
    Table: typeof Table;
    Badge: typeof Badge;
    Button: typeof Button;
    Subtitle(props: any): React.JSX.Element;
    Update: typeof Update;
    Card: any;
    ColorSchemeButton: typeof ColorSchemeButton;
    Feature: (props: any) => React.JSX.Element;
};
declare function iconContent(): {
    Icon: typeof Icon;
};
declare function coderContent(): {
    CodeSample: typeof CodeSample;
};
declare function directiveContent(this: ReactContent): {
    DirectiveCodeGroup: (props: any) => React.JSX.Element;
};

interface ContentDecoratorProps {
    children: React.ReactNode;
    metaComponent?: string;
}
declare function ContentDecorator({ children, metaComponent }: ContentDecoratorProps): React.JSX.Element;

export { ContentDecorator, ReactContent, SearchButtonFullWidth, coderContent, directiveContent, iconContent, stdContent, writerContent };