import React from 'react';

interface ContextDropdownItem {
    /** Stable identity (used for `aria-selected` matching). */
    value: string;
    label: string;
    description?: string;
    /** Pre-resolved icon ELEMENT (resolve string names in the caller's
     * React tree — see IconWrapper note). */
    icon?: React.ReactNode;
    /** Navigation target — internal (SPA Link) unless `external`. */
    href?: string;
    /** Open `href` in a new tab via a plain anchor. */
    external?: boolean;
    /** Action rows (no href): run and close. */
    onSelect?: () => void;
}
interface ContextDropdownProps {
    /** Trigger label — e.g. the primary action or the current version. */
    label: string;
    icon?: React.ReactNode;
    /** The currently active item's `value` (check-marked row). */
    value?: string;
    items: ContextDropdownItem[];
}
/**
 * A compact contextual-actions dropdown (page context controls): a pill
 * trigger (icon + label + up/down chevron) opening a menu of rows with
 * icon + title + description — copy page, open in ChatGPT, switch the
 * page's content version, etc.
 */
declare function ContextDropdown({ label, icon, value, items }: ContextDropdownProps): React.JSX.Element;

/**
 * One entry inside a nav dropdown. Recursive: an entry that carries its own
 * `items` renders a submenu (multi-level). Leaf entries render as links via the
 * router-agnostic `as` component supplied by {@link NavDropdownProps}.
 */
interface NavDropdownItem {
    title?: string;
    description?: string;
    /** Resolved link target (the framework resolves `page`/`href` via `pageLink`). */
    href?: string | null;
    value?: string;
    icon?: React.ReactNode | string;
    active?: boolean;
    /** Nested entries → a submenu. */
    items?: NavDropdownItem[];
}
interface NavDropdownProps {
    /** Trigger label. */
    title?: string;
    icon?: React.ReactNode | string;
    /**
     * Render the trigger ICON-ONLY: show `icon` at a larger size and hide `title`.
     * For `logoTrailing` switchers whose icon is a wordmark image (logo + name).
     */
    iconOnly?: boolean;
    /** How the menu opens. Defaults to `"hover"`. */
    trigger?: "hover" | "click";
    /** Menu entries (recursive). */
    items: NavDropdownItem[];
    /**
     * Custom panel content rendered INSIDE the dropdown instead of the default
     * `items` list — e.g. a rich multi-column mega-menu. When set, `items` is
     * ignored for rendering (still used for trigger active-state).
     */
    content?: React.ReactNode;
    /**
     * Maximum items rendered in ONE COLUMN — overflowing items wrap into
     * additional columns (column-first fill). Omit for a single column.
     */
    itemsPerColumn?: number;
    /**
     * Router-agnostic link component used for leaf entries — receives `{ href }`.
     * The framework passes `FwLink`; falls back to a plain anchor.
     */
    as?: React.ElementType;
    /** Whether the trigger's section is active (a descendant matches the route). */
    active?: boolean;
    className?: string;
}
/**
 * A nav dropdown (header anchor or tab) with a nested, multi-level menu. Built on
 * Radix `DropdownMenu` for native submenus + keyboard/focus/dismiss a11y.
 *
 * `trigger` selects hover (default) vs click. For hover, the menu is rendered
 * INLINE (not portaled) so it is a DOM descendant of the `<xyd-nav-dropdown>`
 * host: moving the pointer from the trigger into the menu (or a submenu) never
 * leaves the host, so a single `onPointerLeave` on the host reliably decides when
 * to close — no dead-gap flicker across a portal boundary. Opens after a short
 * delay so a quick sweep across the nav doesn't flash it open.
 *
 * Router-agnostic: leaf entries use the `as` link component (the framework passes
 * `FwLink`) so it works under the bun engine's router.
 */
declare function NavDropdown(props: NavDropdownProps): React.JSX.Element;

interface NavProps {
    children: React.ReactNode;
    logo?: React.ReactNode;
    className?: string;
    leftSurface?: React.ReactNode;
    centerSurface?: React.ReactNode;
    rightSurface?: React.ReactNode;
    floatRightSurface?: React.ReactNode;
    appearance?: {
        separator?: "right";
    };
}
declare function Nav(props: NavProps): React.JSX.Element;
declare namespace Nav {
    var Tabs: ({ children, value, onChange }: TabsProps) => React.JSX.Element;
    var Item: (props: NavItemProps) => React.JSX.Element;
    var Dropdown: typeof NavDropdown;
    var ItemRaw: ({ children, href, as, ...rest }: Omit<NavItemProps, "value">) => React.JSX.Element;
}
interface TabsProps {
    children: React.ReactNode;
    value: string;
    onChange?: (value: string) => void;
}
interface NavItemProps {
    children: React.ReactNode;
    href?: string;
    value?: string;
    as?: React.ElementType;
}

interface ProgressBarProps {
    className?: string;
    isActive?: boolean;
}
declare function ProgressBar({ className, isActive }: ProgressBarProps): React.JSX.Element;

interface UISidebarProps {
    children: React.ReactNode;
    footerItems?: React.ReactNode;
    /** Pinned content rendered ABOVE the scrollable item list (stays visible on scroll). */
    fixedTop?: React.ReactNode;
    className?: string;
    scrollShadow?: boolean;
    scrollTransition?: "smooth" | "instant";
    groupCase?: "none" | "uppercase";
    /**
     * Which element scrolls. `"list"` (default): only the item list scrolls, below
     * the fixed region. `"sidebar"`: the WHOLE sidebar scrolls (the scrollbar spans
     * its full height) and the fixed region sticks to the top.
     */
    scroll?: "list" | "sidebar";
}
declare function UISidebar({ children, footerItems, fixedTop, className, scrollShadow, scrollTransition, groupCase, scroll }: UISidebarProps): React.JSX.Element;
declare namespace UISidebar {
    var ItemGroup: ({ children, asToc }: {
        children: React.ReactNode;
        asToc?: boolean;
    }) => React.JSX.Element;
    var Item: ({ children, button, href, active, activeTheme, isParentActive, ghost, icon, group, onClick, }: UISidebarItemProps) => React.JSX.Element;
    var ItemSeparator: () => React.JSX.Element;
    var ItemHeader: ({ children, icon }: UISidebarItemHeaderProps) => React.JSX.Element;
    var ItemBody: ({ title, right }: UISidebarItemBody) => React.JSX.Element;
    var SubTree: ({ children, isOpen }: UISidebarSubTreeProps) => React.JSX.Element;
}
interface UISidebarItemProps {
    children: React.ReactNode;
    button?: boolean;
    href?: string;
    active?: boolean;
    activeTheme?: "secondary";
    isParentActive?: boolean;
    ghost?: boolean;
    icon?: React.ReactNode;
    group?: false;
    onClick?: (v: any) => void;
}
interface UISidebarItemHeaderProps {
    children: React.ReactNode;
    icon?: React.ReactNode;
}
interface UISidebarItemBody {
    title: React.ReactNode;
    right?: React.ReactNode;
}
interface UISidebarSubTreeProps {
    children: React.ReactNode;
    isOpen?: boolean;
}

interface SidebarTabsDropdownOption {
    label: string;
    value: string;
    href?: string | null;
    description?: string;
    icon?: React.ReactNode | string;
    /**
     * Nested options — the entry renders as an inline-expandable GROUP row
     * (a button, not a link): clicking it expands its children indented
     * inside the same popover. Recursive.
     */
    items?: SidebarTabsDropdownOption[];
}
interface SidebarTabsDropdownProps {
    options: SidebarTabsDropdownOption[];
    value: string;
}
declare function SidebarTabsDropdown({ options, value }: SidebarTabsDropdownProps): React.JSX.Element;

interface SubNavProps {
    children: React.ReactNode;
    title: string;
    value: string;
    onChange?: (value: string) => void;
    className?: string;
}
declare function SubNav({ children, title, value, onChange, className }: SubNavProps): React.JSX.Element;
declare namespace SubNav {
    var Item: ({ children, value, href, as }: SubNavItemProps) => React.JSX.Element;
}
interface SubNavItemProps {
    children: React.ReactNode;
    value: string;
    href?: string;
    as?: React.ElementType;
}

interface TocProps {
    children: React.ReactNode;
    defaultValue?: string;
    className?: string;
    maxDepth?: number;
}
declare function Toc({ children, defaultValue, className, maxDepth, }: TocProps): React.JSX.Element;
declare namespace Toc {
    var Item: ({ children, id, className, depth }: TocItemProps) => React.JSX.Element;
}
interface TocItemProps {
    children: React.ReactNode;
    id: string;
    className?: string;
    depth?: number;
}

interface ITOC {
    depth: number;
    value: string;
    id: string;
    children: ITOC[];
}
interface IBreadcrumb {
    title: string;
    href: string;
}
interface INavLinks {
    prev?: {
        title: string;
        href: string;
    };
    next?: {
        title: string;
        href: string;
    };
}

export { ContextDropdown, Nav, ProgressBar, SidebarTabsDropdown, SubNav, Toc, UISidebar };
export type { ContextDropdownItem, ContextDropdownProps, IBreadcrumb, INavLinks, ITOC, NavItemProps, NavProps, SidebarTabsDropdownOption, SubNavProps, TocItemProps, TocProps, UISidebarItemHeaderProps, UISidebarItemProps, UISidebarProps };