import * as react from 'react'; import * as tailwind_variants from 'tailwind-variants'; import * as _heroui_system from '@heroui/system'; import { HTMLHeroUIProps, PropGetter } from '@heroui/system'; import { SlotsToClasses, NavbarSlots, NavbarVariantProps } from '@heroui/theme'; import { ReactRef } from '@heroui/react-utils'; import { HTMLMotionProps } from 'framer-motion'; interface Props extends HTMLHeroUIProps<"nav"> { /** * Ref to the DOM node. */ ref?: ReactRef; /** * The parent element where the navbar is placed within. * This is used to determine the scroll position and whether the navbar should be hidden or not. * @default `window` */ parentRef?: React.RefObject; /** * The height of the navbar. * @default "4rem" (64px) */ height?: number | string; /** * Whether the menu is open. * @default false */ isMenuOpen?: boolean; /** * Whether the menu should be open by default. * @default false */ isMenuDefaultOpen?: boolean; /** * Whether the navbar should hide on scroll or not. * @default false */ shouldHideOnScroll?: boolean; /** * Whether the navbar should block scroll when the menu is open or not. * @default false */ shouldBlockScroll?: boolean; /** * Whether the navbar parent scroll event should be listened to or not. * @default false */ disableScrollHandler?: boolean; /** * The props to modify the framer motion animation. Use the `variants` API to create your own animation. * This motion is only available if the `shouldHideOnScroll` prop is set to `true`. */ motionProps?: Omit, "ref">; /** * The event handler for the menu open state. * @param isOpen boolean * @returns void */ onMenuOpenChange?: (isOpen: boolean) => void; /** * The scroll event handler for the navbar. The event fires when the navbar parent element is scrolled. * it only works if `disableScrollHandler` is set to `false` or `shouldHideOnScroll` is set to `true`. */ onScrollPositionChange?: (scrollPosition: number) => void; /** * Classname or List of classes to change the classNames of the element. * if `className` is passed, it will be added to the base slot. * * @example * ```ts * * ``` */ classNames?: SlotsToClasses; } type UseNavbarProps = Props & NavbarVariantProps; declare function useNavbar(originalProps: UseNavbarProps): { Component: _heroui_system.As; slots: { base: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; wrapper: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; toggle: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; srOnly: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; toggleIcon: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; brand: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; content: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; item: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; menu: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; menuItem: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; } & { base: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; wrapper: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; toggle: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; srOnly: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; toggleIcon: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; brand: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; content: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; item: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; menu: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; menuItem: (slotProps?: ({ position?: "static" | "sticky" | undefined; isBordered?: boolean | undefined; disableAnimation?: boolean | undefined; isBlurred?: boolean | undefined; maxWidth?: "md" | "full" | "sm" | "lg" | "xl" | "2xl" | undefined; hideOnScroll?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; } & {}; domRef: react.RefObject; height: string | number; isHidden: boolean; disableAnimation: boolean; shouldHideOnScroll: boolean; isMenuOpen: boolean; classNames: SlotsToClasses<"base" | "content" | "wrapper" | "item" | "toggle" | "srOnly" | "toggleIcon" | "brand" | "menu" | "menuItem"> | undefined; setIsMenuOpen: (value: react.SetStateAction, ...args: any[]) => void; motionProps: Omit, "ref"> | undefined; getBaseProps: PropGetter; getWrapperProps: PropGetter; }; type UseNavbarReturn = ReturnType; export { type UseNavbarProps, type UseNavbarReturn, useNavbar };