@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';
type NavLinkChildren = string | [ReactElement<IconProps>, string] | [string, ReactElement<IconProps>];
export 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?: "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";
} & import("react").RefAttributes<HTMLAnchorElement>>;
export declare function useNavLinkStyles(isSelected: boolean): {
    readonly ':focus': {
        boxShadow: string;
        outline: string;
        outlineOffset: string;
    } | {
        "[data-brighte-focus-visible] &": {
            boxShadow: 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']>;
}): import("@emotion/react/jsx-runtime").JSX.Element[];
export {};