UNPKG

@payfit/unity-components

Version:

262 lines (261 loc) 6.58 kB
import { VariantProps } from '@payfit/unity-themes'; import { PropsWithChildren, ReactNode } from 'react'; import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button'; import { DataAttributes } from '../../../types/DataAttributes.js'; export declare const navItemBase: import('tailwind-variants').TVReturnType<{ level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, undefined, { level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, import('tailwind-variants').TVReturnType<{ level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, undefined, unknown, unknown, undefined>>; declare const navItem: import('tailwind-variants').TVReturnType<{ isActive: { true: { base: string[]; prefix: string[]; label: string; }; false: { base: string; prefix: string; label: string; }; }; }, undefined, undefined, { level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, import('tailwind-variants').TVReturnType<{ level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, undefined, { level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, import('tailwind-variants').TVReturnType<{ level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, undefined, unknown, unknown, undefined>>>; export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWithChildren<{ /** The prefix element to be displayed before the label. */ prefix?: ({ isCurrent }: { isCurrent: boolean; }) => ReactNode; /** The suffix element to be displayed after the label. */ suffix?: ReactNode; /** The click event handler for the nav item. Use it when the item executes an action that does not redirect to another page */ onPress?: AriaButtonProps['onPress']; /** The URL to navigate to when the nav item is clicked. Use it when the item should trigger a navigation to another page */ href?: string; /** Whether the nav item is currently active. */ isCurrent?: boolean; /** Whether the nav item is disabled. */ isDisabled?: boolean; /** Whether the nav item should exactly match the route's path. */ isExact?: boolean; }> & DataAttributes; /** * The `RawNavItem` component represents a single, fully accessible navigation item in a `Nav` component, with support for custom elements at the start or the end of the element. It can render a link or a button depending on the provided properties. */ export declare const RawNavItem: import('react').ForwardRefExoticComponent<Pick<VariantProps<import('tailwind-variants').TVReturnType<{ isActive: { true: { base: string[]; prefix: string[]; label: string; }; false: { base: string; prefix: string; label: string; }; }; }, undefined, undefined, { level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, import('tailwind-variants').TVReturnType<{ level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, undefined, { level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, import('tailwind-variants').TVReturnType<{ level: { 0: string; 1: string; }; isDisabled: { true: { base: string; label: string; }; false: string; }; }, { base: string[]; prefix: string; suffix: string; label: string[]; }, undefined, unknown, unknown, undefined>>>>, "level"> & { /** The prefix element to be displayed before the label. */ prefix?: ({ isCurrent }: { isCurrent: boolean; }) => ReactNode; /** The suffix element to be displayed after the label. */ suffix?: ReactNode; /** The click event handler for the nav item. Use it when the item executes an action that does not redirect to another page */ onPress?: AriaButtonProps["onPress"]; /** The URL to navigate to when the nav item is clicked. Use it when the item should trigger a navigation to another page */ href?: string; /** Whether the nav item is currently active. */ isCurrent?: boolean; /** Whether the nav item is disabled. */ isDisabled?: boolean; /** Whether the nav item should exactly match the route's path. */ isExact?: boolean; } & { children?: ReactNode | undefined; } & DataAttributes & import('react').RefAttributes<HTMLElement>>; export {};