@spark-web/nav-link/dist/declarations/src/nav-link.d.ts

--- title: Nav Link storybookPath: navigation-navlink--default isExperimentalPackage: true ---

import type { IconProps } from '@spark-web/icon';
import type { DataAttributeMap } from '@spark-web/utils/internal';
import type { ReactElement } from 'react';
declare type NavLinkChildren = string | [ReactElement<IconProps>, string] | [string, ReactElement<IconProps>];
export declare type NavLinkProps = Pick<HTMLAnchorElement, 'href'> & {
    /** Border radius of the NavLink. */
    borderRadius?: 'full' | 'small';
    /** Children element(s) to be rendered inside the NavLink. */
    children: NavLinkChildren;
    /** Sets data attributes on the component. */
    data?: DataAttributeMap;
    /** Indicates if NavLink should be inline or not. */
    inline?: boolean;
    /** When true, add active styles to the NavLink and sets the aria-current attribute to page. */
    isSelected?: boolean;
    /** Sets the size of the NavLink. */
    size?: 'medium' | 'large';
};
export declare const NavLink: import("react").ForwardRefExoticComponent<Pick<HTMLAnchorElement, "href"> & {
    /** Border radius of the NavLink. */
    borderRadius?: "small" | "full" | undefined;
    /** Children element(s) to be rendered inside the NavLink. */
    children: NavLinkChildren;
    /** Sets data attributes on the component. */
    data?: DataAttributeMap | undefined;
    /** Indicates if NavLink should be inline or not. */
    inline?: boolean | undefined;
    /** When true, add active styles to the NavLink and sets the aria-current attribute to page. */
    isSelected?: boolean | undefined;
    /** Sets the size of the NavLink. */
    size?: "large" | "medium" | undefined;
} & import("react").RefAttributes<HTMLAnchorElement>>;
export declare function useNavLinkStyles(isSelected: boolean): {
    readonly ':focus': {
        boxShadow: string;
        outline: string;
        outlineOffset: string;
    } | {
        outline: string;
        outlineOffset: string;
    };
    readonly ':hover': {
        readonly backgroundColor: string;
        readonly '> *': {
            readonly color: string | undefined;
            readonly stroke: string | undefined;
        };
    };
    readonly ':active': {
        readonly backgroundColor: string;
        readonly '> *': {
            readonly color: string | undefined;
            readonly stroke: string | undefined;
        };
    };
};
export declare function resolveNavLinkChildren({ children, isSelected, size, }: {
    children: NavLinkProps['children'];
    isSelected: NonNullable<NavLinkProps['isSelected']>;
    size: NonNullable<NavLinkProps['size']>;
}): JSX.Element[];
export {};