{"version":3,"sources":["../src/components/nav/nav.tsx"],"names":["React","NavList","isBlock","children","props","ref","list_default","NavItem","id","styles","classes","Nav","ui_default","NavWithSubComponents","nav_default"],"mappings":"kFAEA,OAAOA,MAAW,QAkEX,IAAMC,EAAUD,EAAM,WAG3B,CAAC,CAAE,QAAAE,EAAS,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAEhCL,EAAA,cAACM,EAAA,CACC,KAAK,KACJ,GAAGF,EACJ,YAAWF,EAAU,iBAAmB,WACxC,IAAKG,GAEJF,CACH,CAEH,EAEDF,EAAQ,YAAc,UAsEf,IAAMM,EAAUP,EAAM,WAG3B,CAAC,CAAE,GAAAQ,EAAI,OAAAC,EAAQ,QAAAC,EAAS,SAAAP,EAAU,GAAGC,CAAM,EAAGC,IAE5CL,EAAA,cAACM,EAAK,SAAL,CACC,KAAK,KACL,GAAIE,EACJ,QAASE,EACT,OAAQD,EACR,IAAKJ,EACJ,GAAGD,GAEHD,CACH,CAEH,EAEDI,EAAQ,YAAc,UA+Hf,IAAMI,EAAMX,EAAM,WACvB,CAAC,CAAE,SAAAG,EAAU,GAAGC,CAAM,EAAGC,IAErBL,EAAA,cAACY,EAAA,CAAG,GAAG,MAAO,GAAGR,EAAO,IAAKC,GAC1BF,CACH,CAGN,EAEAQ,EAAI,YAAc,MAYlB,IAAME,EAAuB,OAAO,OAAOF,EAAK,CAC9C,KAAMV,EACN,KAAMM,CACR,CAAC,EAEMO,EAAQD","sourcesContent":["import UI from \"../ui\";\nimport List from \"../list/list\";\nimport React from \"react\";\nimport type { NavProps, NavListProps, NavItemProps } from \"./nav.types\";\n\n// Re-export types for external use\nexport type { NavProps, NavListProps, NavItemProps };\n\n/**\n * NavList - A navigation-specific list component for grouping navigation items.\n *\n * Extends the List component with navigation-specific layout options through\n * the `isBlock` prop. Automatically renders as an unstyled list to maintain\n * clean navigation aesthetics.\n *\n * ## Key Features:\n * - **Flexible Layout**: Supports both horizontal (inline) and vertical (block) layouts\n * - **Semantic HTML**: Uses `<ul>` element for proper document structure\n * - **Unstyled by Default**: Removes default list markers for clean navigation\n * - **Accessible**: Works naturally with screen readers\n *\n * ## Accessibility:\n * - ✅ Uses semantic `<ul>` element\n * - ✅ Screen readers announce as \"list\" with item count\n * - ✅ Supports `aria-label` for multiple lists\n * - ✅ Keyboard navigation works naturally with focusable children\n *\n * ## Layout Options:\n * - **Inline (default)**: Horizontal navigation bars, top menus\n * - **Block**: Vertical sidebars, mobile menus, footer navigation\n *\n * @example\n * ```tsx\n * // Horizontal navigation (default)\n * <NavList>\n *   <NavItem><Link href=\"/\">Home</Link></NavItem>\n *   <NavItem><Link href=\"/about\">About</Link></NavItem>\n * </NavList>\n * ```\n *\n * @example\n * ```tsx\n * // Vertical sidebar navigation\n * <NavList isBlock>\n *   <NavItem><Link href=\"/dashboard\">Dashboard</Link></NavItem>\n *   <NavItem><Link href=\"/settings\">Settings</Link></NavItem>\n * </NavList>\n * ```\n *\n * @example\n * ```tsx\n * // Multiple lists with labels\n * <Nav>\n *   <NavList aria-label=\"Primary navigation\">\n *     <NavItem><Link href=\"/\">Home</Link></NavItem>\n *   </NavList>\n *   <NavList aria-label=\"User menu\">\n *     <NavItem><Link href=\"/profile\">Profile</Link></NavItem>\n *   </NavList>\n * </Nav>\n * ```\n *\n * @param {NavListProps} props - Component props\n * @param {boolean} [props.isBlock=false] - Display items vertically (block layout)\n * @param {React.ReactNode} props.children - Navigation items (typically NavItem components)\n * @param {string} [props.aria-label] - Accessible label for the list\n * @returns {React.ReactElement} A navigation list component\n */\nexport const NavList = React.forwardRef<\n  HTMLUListElement,\n  NavListProps\n>(({ isBlock, children, ...props }, ref) => {\n  return (\n    <List\n      type=\"ul\"\n      {...props}\n      data-list={isBlock ? \"unstyled block\" : \"unstyled\"}\n      ref={ref}\n    >\n      {children}\n    </List>\n  );\n});\n\nNavList.displayName = \"NavList\";\n\n/**\n * NavItem - An individual navigation link container (list item).\n *\n * Wraps navigation content (typically Link components) in a semantic list item\n * element with consistent styling and accessibility support.\n *\n * ## Key Features:\n * - **Semantic HTML**: Uses `<li>` element for proper list structure\n * - **Flexible Content**: Accepts any React content (links, buttons, text)\n * - **Customizable**: Supports custom styles and CSS classes\n * - **Ref Forwarding**: Enables direct DOM access for advanced use cases\n *\n * ## Accessibility:\n * - ✅ Uses semantic `<li>` element\n * - ✅ Works with screen readers out of the box\n * - ✅ Supports keyboard navigation naturally\n * - ✅ Ref forwarding for programmatic focus if needed\n *\n * ## Best Practices:\n * - Always wrap with NavList/Nav for proper semantics\n * - Use `aria-current=\"page\"` on the link inside to indicate current page\n * - Ensure link text is descriptive and meaningful\n * - Maintain sufficient color contrast (WCAG 2.1: 4.5:1 for normal text)\n *\n * @example\n * ```tsx\n * // Basic navigation item\n * <NavItem>\n *   <Link href=\"/about\">About Us</Link>\n * </NavItem>\n * ```\n *\n * @example\n * ```tsx\n * // Current page with aria-current\n * <NavItem>\n *   <Link href=\"/about\" aria-current=\"page\">\n *     About Us\n *   </Link>\n * </NavItem>\n * ```\n *\n * @example\n * ```tsx\n * // Custom styling\n * <NavItem\n *   classes=\"nav-item-featured\"\n *   styles={{ fontWeight: 'bold' }}\n * >\n *   <Link href=\"/special\">Special Offer</Link>\n * </NavItem>\n * ```\n *\n * @example\n * ```tsx\n * // With icon\n * <NavItem>\n *   <Link href=\"/settings\">\n *     <SettingsIcon aria-hidden=\"true\" />\n *     Settings\n *   </Link>\n * </NavItem>\n * ```\n *\n * @param {NavItemProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A navigation item component\n */\nexport const NavItem = React.forwardRef<\n  HTMLLIElement,\n  NavItemProps\n>(({ id, styles, classes, children, ...props }, ref) => {\n  return (\n    <List.ListItem\n      type=\"li\"\n      id={id}\n      classes={classes}\n      styles={styles}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </List.ListItem>\n  );\n});\n\nNavItem.displayName = \"NavItem\";\n\n/**\n * Nav - A semantic navigation container component for site navigation.\n *\n * The Nav component provides a semantic `<nav>` landmark element that helps\n * users navigate your site. It meets WCAG 2.1 AA accessibility standards and\n * follows modern React best practices with full TypeScript support.\n *\n * ## Key Features:\n * - **Semantic HTML**: Uses native `<nav>` element for accessibility\n * - **Landmark Role**: Automatically provides navigation landmark for screen readers\n * - **Flexible Layout**: Supports multiple navigation patterns through CSS custom properties\n * - **Compound Components**: Use Nav.List and Nav.Item for consistent structure\n * - **Type-Safe**: Full TypeScript support with comprehensive JSDoc documentation\n * - **Ref Forwarding**: Direct DOM access for scroll positioning and focus management\n *\n * ## Accessibility (WCAG 2.1 AA Compliant):\n * - ✅ **4.1.2 Name, Role, Value**: Uses semantic `<nav>` element (landmark role)\n * - ✅ **2.4.1 Bypass Blocks**: Navigation landmark helps skip repeated content\n * - ✅ **1.3.1 Info and Relationships**: Proper list structure with ul > li\n * - ✅ **2.4.8 Location**: Supports `aria-label` for multiple navigation regions\n * - ✅ **4.1.3 Status Messages**: Use `aria-current=\"page\"` on links for current page\n *\n * ## When to Use aria-label:\n * - ✅ **Required**: When you have multiple `<nav>` elements on the same page\n * - ✅ **Recommended**: To distinguish navigation purpose (e.g., \"Footer navigation\")\n * - ❌ **Not needed**: For single navigation regions\n *\n * ## CSS Custom Properties:\n * - `--nav-dsp`: Display mode (default: flex)\n * - `--nav-direction`: Flex direction (default: row)\n * - `--nav-bg`: Background color\n * - `--nav-h`: Minimum height\n * - `--nav-px`: Horizontal padding (default: 1rem)\n * - `--nav-gap`: Gap between items\n * - `--nav-fs`: Font size (default: 0.9rem)\n *\n * @example\n * ```tsx\n * // Simple navigation\n * <Nav>\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/about\">About</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Multiple navigation regions (requires aria-label)\n * <Nav aria-label=\"Main navigation\">\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n *\n * <Nav aria-label=\"Footer navigation\">\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/privacy\">Privacy</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Current page indication\n * <Nav aria-label=\"Main navigation\">\n *   <Nav.List>\n *     <Nav.Item>\n *       <Link href=\"/\" aria-current=\"page\">Home</Link>\n *     </Nav.Item>\n *     <Nav.Item>\n *       <Link href=\"/about\">About</Link>\n *     </Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Vertical sidebar navigation\n * <Nav aria-label=\"Sidebar navigation\">\n *   <Nav.List isBlock>\n *     <Nav.Item><Link href=\"/dashboard\">Dashboard</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/settings\">Settings</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Complex navbar with multiple sections\n * <Nav classes=\"navbar\" aria-label=\"Main navigation\">\n *   <Nav.List aria-label=\"Primary menu\">\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/products\">Products</Link></Nav.Item>\n *   </Nav.List>\n *   <Nav.List aria-label=\"User menu\">\n *     <Nav.Item><Link href=\"/login\">Login</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/signup\">Sign Up</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Custom theming with CSS properties\n * <Nav\n *   aria-label=\"Main navigation\"\n *   styles={{\n *     '--nav-bg': '#1a1a1a',\n *     '--nav-h': '4rem',\n *     '--nav-px': '2rem',\n *   }}\n * >\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @param {NavProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A navigation element\n */\nexport const Nav = React.forwardRef<HTMLElement, NavProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <UI as=\"nav\" {...props} ref={ref}>\n        {children}\n      </UI>\n    );\n  }\n);\n\nNav.displayName = \"Nav\";\n\n// Compound component pattern - attach sub-components to Nav\nexport interface NavComponent\n  extends React.ForwardRefExoticComponent<\n    NavProps & React.RefAttributes<HTMLElement>\n  > {\n  List: typeof NavList;\n  Item: typeof NavItem;\n}\n\n// Attach sub-components using Object.assign for better type inference\nconst NavWithSubComponents = Object.assign(Nav, {\n  List: NavList,\n  Item: NavItem,\n});\n\nexport default NavWithSubComponents as NavComponent;\n"]}