import React$1, { ReactElement } from 'react';
import { Social } from '@xyd-js/core';

declare const Anchor: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
    newWindow?: boolean;
    as?: React$1.ElementType;
} & React$1.RefAttributes<HTMLAnchorElement>>;

interface BadgeProps {
    /**
     * The class name of the badge.
     */
    className?: string;
    /**
     * The children of the badge.
     */
    children?: React$1.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$1.JSX.Element;

interface BannerProps {
    children: React$1.ReactNode;
    kind?: "secondary";
    label?: string;
    href?: string;
    icon?: React$1.ReactNode | string;
    store?: number;
}
declare function Banner(props: BannerProps): React$1.JSX.Element | null;
declare namespace Banner {
    var Secondary: (props: BannerProps & {
        onClose?: () => void;
    }) => React$1.JSX.Element | null;
}

interface BlockquoteProps {
    className?: string;
    children: React$1.ReactNode;
}
declare function Blockquote({ className, children }: BlockquoteProps): React$1.JSX.Element;

interface BreadcrumbsProps {
    className?: string;
    items: {
        title: string;
        href?: string;
    }[];
    as?: React$1.ElementType;
}
declare function Breadcrumbs({ className, items, as }: BreadcrumbsProps): ReactElement;

interface ButtonProps {
    children?: React$1.ReactNode;
    kind?: "primary" | "secondary" | "tertiary" | undefined;
    theme?: "ghost";
    size?: "xs" | "sm" | "md" | "lg";
    className?: string;
    onClick?: () => void;
    disabled?: boolean;
    icon?: React$1.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$1.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$1.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$1.JSX.Element;

interface CardProps {
    title: string;
    href?: string;
    link?: React$1.ElementType;
    description?: string;
    btnText?: string;
    imgSrc?: string;
    imgAlt?: string;
    logoSrc?: string;
    logoAlt?: string;
    shadow?: "md";
}
declare function Card(props: CardProps): React$1.JSX.Element;

interface CodeProps {
    className?: string;
    children: React$1.ReactNode;
}
declare function Code({ className, children }: CodeProps): React$1.JSX.Element;

/**
 * Props for the CodeTutorialSteps component
 */
interface CodeTutorialStepsProps {
    /** Steps to be rendered - one `CodeTutorialSteps.Step` per numbered step */
    children: React$1.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$1.JSX.Element;
declare namespace CodeTutorialSteps {
    var Step: ({ children, step, className }: CodeTutorialStepProps) => React$1.JSX.Element;
    var Title: ({ children }: {
        children: React$1.ReactNode;
    }) => React$1.JSX.Element;
    var Body: ({ children }: {
        children: React$1.ReactNode;
    }) => React$1.JSX.Element;
    var Aside: ({ children }: {
        children: React$1.ReactNode;
    }) => React$1.JSX.Element;
}
/**
 * Props for the CodeTutorialSteps.Step component
 */
interface CodeTutorialStepProps {
    /** Slots of the step - a `Title`, a `Body` and an optional `Aside` */
    children: React$1.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$1.JSX.Element;
declare function useColorScheme(): ["dark" | "light" | null, () => void];

/**
 * Base interface for all Details component variants
 */
interface BaseDetailsProps {
    /** Content to be displayed inside the details element */
    children: React$1.ReactNode;
    /** Label text displayed in the summary */
    label: string;
    /** Optional icon element to be displayed in the summary */
    icon?: React$1.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$1.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$1.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$1 = 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$1): React$1.ReactElement;

interface DetailsProps {
    /** 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;
    /**
     * Which visual style to use.
     * @default 'primary'
     */
    kind?: 'primary' | 'secondary' | 'tertiary';
    /**
     * Title text or element displayed in the summary.
     * Required when `kind` is 'secondary' or 'tertiary'.
     */
    title?: React.ReactNode;
}
/**
 * Props for the Details component
 *
 * @category Component
 */
declare function DetailsProps(props: DetailsProps): DetailsProps;

/**
 * Props for the GuideCard component
 */
interface GuideCardProps {
    /** Content to be displayed in the card body */
    children: React$1.ReactNode;
    /** URL the card links to */
    href: string;
    /** Title displayed at the top of the card */
    title?: string;
    /** Optional icon displayed to the left of the content */
    icon?: React$1.ReactNode | string;
    /** Visual style variant of the card */
    kind?: "secondary";
    /** Size variant of the card */
    size?: "sm" | "md";
    /** Additional CSS class names to apply to the card */
    className?: string;
    /** Additional props to pass to the link element */
    as?: React$1.ElementType;
}
/**
 * A card component that displays content with a title and optional icon.
 * The entire card is clickable and links to the specified URL.
 *
 * @category Component
 */
declare function GuideCard({ children, href, icon, title, kind, size, className, as, }: GuideCardProps): React$1.JSX.Element;
declare namespace GuideCard {
    var Title: ({ children }: {
        children: React$1.ReactNode;
    }) => React$1.JSX.Element;
    var List: ({ children }: {
        children: React$1.ReactNode;
    }) => React$1.JSX.Element;
}

/**
 * Props for the Heading component
 * @interface HeadingProps
 */
interface HeadingProps {
    /** Content to be rendered inside the heading */
    children: React$1.ReactNode;
    /** The size of the heading (1-6, corresponding to h1-h6) */
    size: 1 | 2 | 3 | 4 | 5 | 6;
    /** Optional HTML element to render as (div or span) */
    as?: "div" | "span";
    /** Optional ID for the heading element */
    id?: string;
    /** Optional visual style variant */
    kind?: "muted";
    /** Optional click handler */
    onClick?: () => void;
    /** Optional additional CSS class name */
    className?: string;
    /** Optional active state */
    active?: boolean;
    /** Optional label for the heading */
    label?: string;
    /** Optional subtitle for the heading */
    subtitle?: string;
    /** Optional to hide the anchor icon */
    noanchor?: boolean;
    /** Optional ref for the heading element */
    ref?: React$1.RefObject<HTMLHeadingElement>;
    style?: React$1.CSSProperties;
}
/**
 * A flexible heading component that can render as any heading level (h1-h6) or as a div/span
 *
 * @category Component
 */
declare function Heading(props: HeadingProps): React$1.JSX.Element;

interface HrProps {
}
declare function Hr(): React$1.JSX.Element;

declare const IconProvider: React$1.Context<{
    iconSet: {};
}>;
interface IconProps {
    name: string;
    size?: number;
    color?: string;
}
/** Whether an icon `name` is actually an image SOURCE (path / URL / data-uri /
 *  image file) rather than an icon-set key — then it renders as an `<img>`. */
declare function isImageSource(name: string): boolean;
declare function Icon(props: IconProps): ReactElement | null;
declare namespace Icon {
    var ExternalArrow: () => React$1.JSX.Element;
}

interface IconSocialProps extends React$1.SVGProps<SVGSVGElement> {
    kind: Social;
}
declare function IconSocial({ kind, ...props }: IconSocialProps): React$1.JSX.Element | null;
declare namespace IconSocial {
    var Twitter: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Facebook: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Youtube: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Discord: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Slack: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Github: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Linkedin: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Intagram: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var HackerNews: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Medium: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Telegram: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Bluesky: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
    var Reddit: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
}

interface ImageProps extends React$1.ImgHTMLAttributes<HTMLImageElement> {
    src: string;
    alt: string;
    style?: React$1.CSSProperties;
    caption?: string;
}
declare function Image(props: ImageProps): React$1.JSX.Element;

interface ListProps {
    children: React$1.ReactNode;
}
declare function List({ children }: ListProps): React$1.JSX.Element;
declare namespace List {
    var Item: typeof ListItem;
}
declare function ListOl({ children }: ListProps): React$1.JSX.Element;
interface ListItemProps {
    children: React$1.ReactNode;
}
declare function ListItem({ children }: ListItemProps): React$1.JSX.Element;

interface NavLinksProps {
    prev?: {
        title: string;
        href: string;
    };
    next?: {
        title: string;
        href: string;
    };
    as?: React$1.ElementType;
    className?: string;
    children?: React$1.ReactNode;
}
declare function NavLinks(props: NavLinksProps): React$1.JSX.Element;

interface PreProps {
    children: React$1.ReactNode;
    className?: string;
}
declare function Pre({ children, className }: PreProps): React$1.JSX.Element;

/**
 * Props for the Steps component
 */
interface StepsProps {
    /** Content to be rendered inside the steps list */
    children: React$1.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$1.JSX.Element;
declare namespace Steps {
    var Item: ({ children, icon, title, className }: StepsItemProps) => React$1.JSX.Element;
}
/**
 * Props for the Steps.Item component
 */
interface StepsItemProps {
    /** Content to be rendered inside the step item */
    children: React$1.ReactNode;
    /** Optional icon to be displayed in the step item */
    icon?: string | React$1.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$1.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$1.JSX.Element;
declare namespace Table {
    var Head: ({ children }: TableHeadProps) => React$1.JSX.Element;
    var Th: ({ children, numeric }: TableThProps) => React$1.JSX.Element;
    var Tr: ({ children }: TableTrProps) => React$1.JSX.Element;
    var Body: ({ children }: TableBodyProps) => React$1.JSX.Element;
    var Td: ({ children, numeric, muted }: TableTdProps) => React$1.JSX.Element;
    var Cell: ({ children }: TableCellProps) => React$1.JSX.Element;
}
/**
 * Props for the TableHead component
 */
interface TableHeadProps {
    /** The content to be rendered inside the table header */
    children: React$1.ReactNode;
}
/**
 * Props for the TableTh component
 */
interface TableThProps {
    /** The content to be rendered inside the table header cell */
    children: React$1.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$1.ReactNode;
}
/**
 * Props for the TableBody component
 */
interface TableBodyProps {
    /** The content to be rendered inside the table body */
    children: React$1.ReactNode;
}
/**
 * Props for the TableTd component
 */
interface TableTdProps {
    /** The content to be rendered inside the table cell */
    children: React$1.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$1.ReactNode;
}

/**
 * Props for the TabsPrimary component
 */
interface TabsPrimaryProps {
    /** Child elements to be rendered within the navigation */
    children: React$1.ReactNode;
    /** The currently selected tab value */
    value?: string;
    /** Callback function triggered when a tab is selected */
    onChange?: (value: string) => void;
    /** Whether to enable sliding animation between tabs */
    slide?: boolean;
    /** Additional CSS class name for the component */
    className?: string;
}

interface TabsSecondaryProps {
    /** The currently selected tab value */
    value?: string;
    children: React$1.ReactNode;
    className?: string;
    onChange?: (value: string) => void;
}

interface TabsPropsCommon {
    /** The kind of tabs to render. If not provided, the component will render the primary tabs. */
    kind?: 'secondary' | null;
}
type TabsProps$1<T> = T & TabsPropsCommon;
/**
 * A component that renders a tabs component.
 *
 * @category Component
 */
declare function Tabs(props: TabsProps$1<TabsSecondaryProps | TabsPrimaryProps>): React$1.JSX.Element;
declare namespace Tabs {
    var Item: (props: any) => React$1.JSX.Element;
    var Content: (props: any) => React$1.JSX.Element;
}

interface TabsProps {
    /** The kind of tabs to render. If not provided, the component will render the primary tabs. */
    kind?: 'secondary' | null;
}
/**
 * Props for the Tabs component
 *
 * @category Component
 */
declare function TabsProps(props: TabsProps): TabsProps;

/**
 * Available font sizes for the Text component
 */
type TextFontSizes = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "inherit";
/**
 * Available text styles/kinds for the Text component
 */
type TextKindTypes = "default" | "ghost" | "success" | "warn" | "error" | "primary" | "secondary";
/**
 * Available font weights for the Text component
 */
type TextFontWeights = "normal" | "bold" | "extra-bold";
/**
 * Props for the Text component
 */
interface TextProps {
    /** Font size of the text */
    size?: TextFontSizes;
    /** Visual style/kind of the text */
    kind?: TextKindTypes;
    /** Font weight of the text */
    weight?: TextFontWeights;
    /** Content to be rendered inside the text component */
    children?: React$1.ReactNode;
    /** Additional CSS class name */
    className?: string;
    /** HTML id attribute */
    id?: string;
    /** Click event handler */
    onClick?: () => void;
    /** HTML tag to render the text as */
    as?: "span" | "p";
}
/**
 * A flexible text component that supports different sizes, styles, and weights.
 *
 * @category Component
 */
declare function Text({ size, kind, weight, children, className, id, onClick, as }: TextProps): React$1.JSX.Element;

interface TocCardProps {
    title: string;
    description: string;
    href: string;
    className?: string;
    icon?: string;
    as?: React$1.ElementType;
}
declare function TocCard({ title, description, href, className, icon, as }: TocCardProps): React$1.JSX.Element;

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

declare function VideoGuide(): null;
declare namespace VideoGuide {
    var Miniature: (props: VideoGuideMiniatureProps) => React$1.JSX.Element;
}
interface VideoGuideMiniatureProps {
    videoSrc?: string;
    description?: string;
    className?: string;
}

export { Anchor, Badge, Banner, Blockquote, Breadcrumbs, Button, Callout, Card, Code, CodeTutorialSteps, ColorSchemeButton, Details, DetailsProps as DetailsPropsProps, GuideCard, Heading, Hr, Icon, IconProvider, IconSocial, Image, List, ListOl, NavLinks, Pre, Steps, Table, Tabs, TabsProps, Text, TocCard, Update, VideoGuide, isImageSource, useColorScheme };
export type { BadgeProps, BannerProps, BlockquoteProps, BreadcrumbsProps, ButtonProps, CalloutProps, CodeProps, CodeTutorialStepProps, CodeTutorialStepsProps, DetailsProps$1 as DetailsProps, HeadingProps, HrProps, IconSocialProps, NavLinksProps, PreProps, StepsProps };