import React from 'react'; import { U as UI } from '../../ui-40a4a170.js'; import { a as ListProps, L as ListItemProps } from '../../list.types-2bcadb23.js'; /** * Props for the Nav component (navigation container). * * The Nav component provides a semantic `

` element for site navigation, * meeting WCAG 2.1 AA standards for accessible navigation landmarks. * * ## Accessibility Features: * - ✅ Uses semantic `

` element (landmark role) * - ✅ Supports `aria-label` for multiple navigation regions * - ✅ Supports `aria-labelledby` for heading-based labels * - ✅ Works with screen readers and keyboard navigation * * ## Best Practices: * - Use `aria-label` when you have multiple navigation regions * - Prefer descriptive labels like "Main navigation" or "Footer navigation" * - Use `aria-current="page"` on links to indicate current page * * @example * ```tsx * // Single navigation on page (no label needed) * * ``` * * @example * ```tsx * // Multiple navigation regions (labels required) * * * * ``` * * @example * ```tsx * // Using aria-labelledby with a heading *

Site Navigation

* * ``` */ type NavProps = { /** * Child elements (typically Nav.List components). * * @required * @example * ```tsx * * ``` */ children: React.ReactNode; /** * Accessible label for the navigation region. * * **WCAG 2.1 Requirement**: Use when you have multiple `

` elements * on the same page to distinguish them for screen reader users. * * @optional * @see {@link https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11} * @example * ```tsx * aria-label="Main navigation" * aria-label="Footer navigation" * ``` */ "aria-label"?: string; /** * ID of an element that labels this navigation region. * * Use when a visible heading already describes the navigation. * * @optional * @example * ```tsx * * * ``` */ "aria-labelledby"?: string; /** * HTML id attribute for the navigation element. * * @optional * @example * ```tsx * id="main-navigation" * ``` */ id?: string; /** * CSS class names to apply to the nav element. * * @optional * @example * ```tsx * classes="navbar sticky-header" * ``` */ classes?: string; /** * Inline CSS styles to apply. * Can include CSS custom properties for theming. * * @optional * @example * ```tsx * styles={{ * '--nav-bg': '#f8f9fa', * '--nav-h': '4rem' * }} * ``` */ styles?: React.CSSProperties; } & Partial>; /** * Props for the NavList component (list of navigation items). * * Extends the List component with navigation-specific styling through * the `isBlock` prop for vertical layout control. * * ## Layout Options: * - **Default (inline)**: Horizontal list for primary navigation * - **Block**: Vertical stacked list for sidebars or mobile menus * * @example * ```tsx * // Horizontal navigation (default) * * Home * About * * ``` * * @example * ```tsx * // Vertical navigation (block layout) * * Home * About * * ``` * * @example * ```tsx * // Multiple lists in a navbar * * ``` */ type NavListProps = Omit & { /** * Display list items vertically (block layout). * * When true, applies `data-list="unstyled block"` for vertical stacking. * When false or undefined, items display inline horizontally. * * @default false * @example * ```tsx * isBlock={true} // Vertical sidebar navigation * isBlock={false} // Horizontal top navigation (default) * ``` */ isBlock?: boolean; /** * Accessible label for the navigation list. * * Use when you have multiple lists in the same Nav to distinguish them. * * @optional * @example * ```tsx * aria-label="Main menu" * aria-label="Social media links" * ``` */ "aria-label"?: string; /** * Child elements (typically Nav.Item components). * * @required */ children: React.ReactNode; }; /** * Props for the NavItem component (individual navigation link container). * * Wraps navigation links in a list item element with consistent styling. * Typically contains a Link component or anchor element. * * ## Accessibility Considerations: * - Use `aria-current="page"` on the link inside to indicate current page * - Ensure sufficient color contrast (WCAG 2.1: 4.5:1 for text) * - Provide focus indicators (WCAG 2.1: 3:1 contrast for focus state) * * @example * ```tsx * // Basic navigation item * * About Us * * ``` * * @example * ```tsx * // Current page indicator * * * About Us * * * ``` * * @example * ```tsx * // Custom styling * * Pricing * * ``` */ type NavItemProps = Omit & { /** * HTML id attribute for the list item. * * @optional * @example * ```tsx * id="nav-item-home" * ``` */ id?: string; /** * Inline CSS styles to apply to the list item. * * @optional * @example * ```tsx * styles={{ paddingInline: '1.5rem' }} * ``` */ styles?: React.CSSProperties; /** * CSS class names to apply to the list item. * * @optional * @example * ```tsx * classes="nav-item active" * ``` */ classes?: string; /** * Child elements (typically a Link component). * * @required * @example * ```tsx * * Home * * ``` */ children: React.ReactNode; }; /** * NavList - A navigation-specific list component for grouping navigation items. * * Extends the List component with navigation-specific layout options through * the `isBlock` prop. Automatically renders as an unstyled list to maintain * clean navigation aesthetics. * * ## Key Features: * - **Flexible Layout**: Supports both horizontal (inline) and vertical (block) layouts * - **Semantic HTML**: Uses `

* Home * About *

* Dashboard * Settings *

& React.RefAttributes>; /** * NavItem - An individual navigation link container (list item). * * Wraps navigation content (typically Link components) in a semantic list item * element with consistent styling and accessibility support. * * ## Key Features: * - **Semantic HTML**: Uses `

` element for proper list structure * - **Flexible Content**: Accepts any React content (links, buttons, text) * - **Customizable**: Supports custom styles and CSS classes * - **Ref Forwarding**: Enables direct DOM access for advanced use cases * * ## Accessibility: * - ✅ Uses semantic `

` element * - ✅ Works with screen readers out of the box * - ✅ Supports keyboard navigation naturally * - ✅ Ref forwarding for programmatic focus if needed * * ## Best Practices: * - Always wrap with NavList/Nav for proper semantics * - Use `aria-current="page"` on the link inside to indicate current page * - Ensure link text is descriptive and meaningful * - Maintain sufficient color contrast (WCAG 2.1: 4.5:1 for normal text) * * @example * ```tsx * // Basic navigation item * * About Us * * ``` * * @example * ```tsx * // Current page with aria-current * * * About Us * * * ``` * * @example * ```tsx * // Custom styling * * Special Offer * * ``` * * @example * ```tsx * // With icon * * * * ``` * * @param {NavItemProps} props - Component props * @param {React.Ref} ref - Forwarded ref for DOM access * @returns {React.ReactElement} A navigation item component */ declare const NavItem: React.ForwardRefExoticComponent & React.RefAttributes>; /** * Nav - A semantic navigation container component for site navigation. * * The Nav component provides a semantic `

` landmark element that helps * users navigate your site. It meets WCAG 2.1 AA accessibility standards and * follows modern React best practices with full TypeScript support. * * ## Key Features: * - **Semantic HTML**: Uses native `

` element for accessibility * - **Landmark Role**: Automatically provides navigation landmark for screen readers * - **Flexible Layout**: Supports multiple navigation patterns through CSS custom properties * - **Compound Components**: Use Nav.List and Nav.Item for consistent structure * - **Type-Safe**: Full TypeScript support with comprehensive JSDoc documentation * - **Ref Forwarding**: Direct DOM access for scroll positioning and focus management * * ## Accessibility (WCAG 2.1 AA Compliant): * - ✅ **4.1.2 Name, Role, Value**: Uses semantic `

` element (landmark role) * - ✅ **2.4.1 Bypass Blocks**: Navigation landmark helps skip repeated content * - ✅ **1.3.1 Info and Relationships**: Proper list structure with ul > li * - ✅ **2.4.8 Location**: Supports `aria-label` for multiple navigation regions * - ✅ **4.1.3 Status Messages**: Use `aria-current="page"` on links for current page * * ## When to Use aria-label: * - ✅ **Required**: When you have multiple `

` elements on the same page * - ✅ **Recommended**: To distinguish navigation purpose (e.g., "Footer navigation") * - ❌ **Not needed**: For single navigation regions * * ## CSS Custom Properties: * - `--nav-dsp`: Display mode (default: flex) * - `--nav-direction`: Flex direction (default: row) * - `--nav-bg`: Background color * - `--nav-h`: Minimum height * - `--nav-px`: Horizontal padding (default: 1rem) * - `--nav-gap`: Gap between items * - `--nav-fs`: Font size (default: 0.9rem) * * @example * ```tsx * // Simple navigation * * ``` * * @example * ```tsx * // Multiple navigation regions (requires aria-label) * * * * ``` * * @example * ```tsx * // Current page indication * * ``` * * @example * ```tsx * // Vertical sidebar navigation * * ``` * * @example * ```tsx * // Complex navbar with multiple sections * * ``` * * @example * ```tsx * // Custom theming with CSS properties * * ``` * * @param {NavProps} props - Component props * @param {React.Ref} ref - Forwarded ref for DOM access * @returns {React.ReactElement} A navigation element */ declare const Nav: React.ForwardRefExoticComponent & React.RefAttributes>; interface NavComponent extends React.ForwardRefExoticComponent> { List: typeof NavList; Item: typeof NavItem; } declare const _default: NavComponent; export { Nav, NavComponent, NavItem, NavItemProps, NavList, NavListProps, NavProps, _default as default };