/**
* @fileoverview NavigationMenu primitive — site navigation with animated dropdowns, viewport support, and active indicators.
* Built on Radix UI NavigationMenu. Part of the Saasflare base component layer.
* @module packages/ui/components/ui/navigation-menu
* @layer core
*
* @component
* @example
* import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@saasflare/ui';
*
*
*
* Products
*
* Documentation
*
*
*
*
*/
import * as React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { type SaasflareComponentProps } from "../../providers";
/**
* Props for {@link NavigationMenu}.
*
* `viewport` toggles the shared {@link NavigationMenuViewport} that hosts all
* dropdown content in one animated panel; set it to `false` to render each
* item's content as a self-contained popover below its trigger instead.
*/
interface NavigationMenuProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps {
/**
* Render the shared viewport panel for dropdown content.
*
* @default true
*/
viewport?: boolean;
}
/**
* Site navigation root with animated dropdown menus, built on Radix NavigationMenu.
*
* Hosts a {@link NavigationMenuList} of items and, by default, a shared
* {@link NavigationMenuViewport} that all dropdown content animates into.
* Resolves the design-system axes and emits them as data attributes. Use for
* horizontal header navigation.
*
* @component
* @layer core
*/
declare function NavigationMenu({ className, children, viewport, surface, radius, animated, iconWeight, ...props }: NavigationMenuProps): import("react/jsx-runtime").JSX.Element;
/**
* Horizontal list that lays out the top-level {@link NavigationMenuItem} entries.
*
* @component
* @layer core
*/
declare function NavigationMenuList({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element;
/**
* A single menu entry — wraps a trigger/content pair or a standalone link.
*
* @component
* @layer core
*/
declare function NavigationMenuItem({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element;
/**
* cva builder for the trigger button styles. Applied internally by
* {@link NavigationMenuTrigger}; call it on a plain {@link NavigationMenuLink}
* to make a top-level link match the trigger appearance.
*/
declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
interface NavigationMenuTriggerProps extends React.ComponentProps, Pick {
}
/**
* Button that opens an item's {@link NavigationMenuContent}. Renders a caret
* that rotates while open and follows the resolved `iconWeight` axis.
*
* @component
* @layer core
*/
declare function NavigationMenuTrigger({ className, children, iconWeight, ...props }: NavigationMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
interface NavigationMenuContentProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps {
}
/**
* Dropdown panel for a menu item. Renders into the shared
* {@link NavigationMenuViewport} when the root has `viewport` enabled,
* otherwise as a self-contained popover below its trigger.
*
* @component
* @layer core
*/
declare function NavigationMenuContent({ className, surface, radius, animated, iconWeight, ...props }: NavigationMenuContentProps): import("react/jsx-runtime").JSX.Element;
interface NavigationMenuViewportProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps {
}
/**
* Shared panel that hosts the active item's content and animates between sizes.
* Rendered automatically by {@link NavigationMenu} unless `viewport` is `false`.
*
* @component
* @layer core
*/
declare function NavigationMenuViewport({ className, surface, radius, animated, iconWeight, ...props }: NavigationMenuViewportProps): import("react/jsx-runtime").JSX.Element;
interface NavigationMenuLinkProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps {
}
/**
* Navigational link inside the menu — use `asChild` to compose with a framework
* router link. Works standalone in an item or inside dropdown content.
*
* @component
* @layer core
*/
declare function NavigationMenuLink({ className, surface, radius, animated, iconWeight, ...props }: NavigationMenuLinkProps): import("react/jsx-runtime").JSX.Element;
interface NavigationMenuIndicatorProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps {
}
/**
* Animated arrow that tracks the active trigger and points at the open content.
*
* @component
* @layer core
*/
declare function NavigationMenuIndicator({ className, surface, radius, animated, iconWeight, ...props }: NavigationMenuIndicatorProps): import("react/jsx-runtime").JSX.Element;
export { NavigationMenu, type NavigationMenuProps, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };