import { type ComponentType, type ReactElement } from "react";
import { type ListProps } from "../list/List.js";
import { type RecursiveItem, type RecursiveItemKeyOptions, type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
import { type NavigationItem, type NavigationRenderData } from "./types.js";
/**
 * The default implementation for the nav item keys. It will attempt to set the
 * key in the following order:
 * - `href` if it exists and has length
 * - `children` if it's a string and has length
 * - default {@link getRecursiveItemKey} behavior of `${depth}-${index}`
 *
 * @since 6.0.0
 */
export declare function getRecursiveNavItemKey<Item extends NavigationItem = NavigationItem>(options: RecursiveItemKeyOptions<Item>): string;
/**
 * @since 6.0.0
 */
export interface NavigationProps<Item extends NavigationItem = NavigationItem, Data extends NavigationRenderData = NavigationRenderData> extends Omit<ListProps, "children"> {
    data: Data;
    items: readonly RecursiveItem<Item>[];
    /** @see {@link DefaultNavigationRenderer} */
    render?: ComponentType<RenderRecursiveItemsProps<Item, Data>>;
    /** @see {@link getRecursiveNavItemKey} */
    getItemKey?: (options: RecursiveItemKeyOptions<Item>) => string;
}
/**
 * **Client Component**
 *
 * The `Navigation` component can be used to create a list of links to
 * different pages within the app and generally used within a `Sheet` or
 * `LayoutNav`.
 *
 * @example Simple Example
 * ```tsx
 * "use client";
 *
 * import { Navigation } from "@react-md/core/navigation/Navigation";
 * import { type NavigationItem } from "@react-md/core/navigation/types";
 * import { useNavigationExpansion } from "@react-md/core/navigation/useNavigationExpansion";
 * import { usePathname } from "next/navigation.js";
 * import { type ReactElement } from "react";
 *
 * import { LinkUnstyled } from "@/components/LinkUnstyled.jsx";
 *
 * const items: readonly NavigationItem[] = [
 *   {
 *     type: "route",
 *     href: "/",
 *     children: "Home",
 *   },
 *   {
 *     type: "route",
 *     href: "/page-1",
 *     children: "Page 1",
 *   },
 * ];
 *
 * export function MainNavigation(): ReactElement {
 *   const pathname = usePathname();
 *   const { data } = useNavigationExpansion({
 *     pathname,
 *     linkComponent: LinkUnstyled,
 *   });
 *   return (
 *     <nav aria-label="Navigation">
 *       <Navigation data={data} items={items} />
 *     </nav>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/navigation | Navigation Demos}
 * @since 6.0.0
 */
export declare function Navigation<Item extends NavigationItem, Data extends NavigationRenderData>(props: NavigationProps<Item, Data>): ReactElement;
