@payfit/unity-components/dist/esm/components/skip-links/SkipLinks.d.ts

import { HTMLAttributes, PropsWithChildren } from 'react';
export interface SkipLinksProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
    /** Optional label for the skip links navigation. Defaults to "Skip to:" */
    label?: string;
}
export interface SkipLinkProps extends PropsWithChildren<HTMLAttributes<HTMLAnchorElement>> {
    /** The target element ID to skip to */
    targetId: string;
}
/**
 * SkipLinks component provides keyboard navigation shortcuts to important sections of the page
 *
 * The SkipLinks component creates accessible navigation shortcuts that appear when focused,
 * allowing keyboard users to quickly jump to important sections like main content, toolbars,
 * or action areas. It follows WCAG guidelines for skip navigation.
 * @param props - The props for the SkipLinks component
 * @param props.label - Optional label for the skip links navigation section
 * @param props.children - SkipLink components
 * @example
 * ```tsx
 * import { SkipLinks, SkipLink } from '@payfit/unity-components'
 *
 * function TableWithActions() {
 *   return (
 *     <div>
 *       <SkipLinks label="Quick navigation:">
 *         <SkipLink targetId="main-content">
 *           Skip to main content
 *         </SkipLink>
 *         <SkipLink targetId="table-actions-toolbar">
 *           Skip to actions
 *         </SkipLink>
 *       </SkipLinks>
 *       <div id="main-content" tabIndex={-1}>
 *         Main content
 *       </div>
 *       <div id="table-actions-toolbar" tabIndex={-1}>
 *         Action bar content
 *       </div>
 *     </div>
 *   )
 * }
 * ```
 * @remarks
 * - Skip links are visually hidden by default and become visible when focused
 * - Each link should target an element with a valid ID and tabIndex={-1}
 * - The component follows WCAG 2.1 guidelines for skip navigation
 * @see {@link SkipLinksProps} for all available props
 * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/skip-links GitHub}
 * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
 */
declare const SkipLinks: import('react').ForwardRefExoticComponent<SkipLinksProps & import('react').RefAttributes<HTMLElement>>;
/**
 * SkipLink component represents a single skip navigation link
 *
 * The SkipLink component should be used as a child of SkipLinks to create individual
 * navigation shortcuts. It automatically handles focus management and accessibility.
 * @param props - The props for the SkipLink component
 * @param props.targetId - The ID of the target element to skip to
 * @param props.children - The link text content
 * @example
 * ```tsx
 * import { SkipLink } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <SkipLink targetId="main-content">
 *       Skip to main content
 *     </SkipLink>
 *   )
 * }
 * ```
 * @remarks
 * - Should only be used as a child of SkipLinks component
 * - Automatically focuses the target element when activated
 * @see {@link SkipLinkProps} for all available props
 */
declare const SkipLink: import('react').ForwardRefExoticComponent<SkipLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
export { SkipLinks, SkipLink };