@anywayseo/tools 2.0.0 → 2.2.1

package/README.md

@@ -1,62 +1,69 @@
-# Shared UI Components & Modules for Anywayseo projects
-
-A modular UI component library designed for Anywayseo blog sites, offering reusable React components and utilities to enhance development speed and consistency.
-
-## Installation
-
-```bash
-npm install @anywayseo/tools
-# or
-yarn add @anywayseo/tools
-```
-
-### Peer Dependencies
-
-This package requires the following peer dependencies:
-
-- "@chakra-ui/icons": "^2.0.0",
-- "@chakra-ui/react": "^2.0.0",
-- "@emotion/react": "^11.0.0",
-- "@emotion/styled": "^11.0.0",
-- "@mdx-js/react": "^2.0.0",
-- "framer-motion": "^12.0.6",
-- "gatsby": "^5.0.0",
-- "gatsby-plugin-image": "^3.0.0",
-- "i18next": "^24.0.0",
-- "react": "^18.3.1",
-- "react-dom": "^18.3.1",
-- "react-i18next": "^15.0.0"
-
-## Usage
-
-Importing Components
-
-```tsx
-import type { IAuthor } from '@anywayseo/tools';
-import { Author, getCurrentYear } from '@anywayseo/tools';
-
-const BlogPreview = ({ author }) => (
-  <div>
-    <Author author={author} />
-    {getCurrentYear()}
-  </div>
-);
-```
-
-## Available Modules:
-
-- Components
-
-- Hooks
-
-- i18n
-
-- Providers
-
-- Types
-
-- Utilities
-
-## License
-
-MIT License © 2025 Anywayseo
+# Shared UI Components & Modules for Anywayseo projects
+
+A modular UI component library designed for Anywayseo blog sites, offering reusable React components and utilities to enhance development speed and consistency.
+
+## Installation
+
+```bash
+npm install @anywayseo/tools
+# or
+yarn add @anywayseo/tools
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+- "@chakra-ui/icons": "^2.0.0",
+- "@chakra-ui/react": "^2.0.0",
+- "@emotion/react": "^11.0.0",
+- "@emotion/styled": "^11.0.0",
+- "@mdx-js/react": "^2.0.0",
+- "framer-motion": "^12.0.6",
+- "gatsby": "^5.0.0",
+- "i18next": "^24.0.0",
+- "react": "^18.3.1",
+- "react-dom": "^18.3.1",
+- "react-i18next": "^15.0.0"
+
+## Usage
+
+### Local Dev using Stand
+
+```bash
+npm start
+# or
+yarn start
+```
+
+### Importing Components
+
+```tsx
+import type { IAuthor } from '@anywayseo/tools';
+import { Author, getCurrentYear } from '@anywayseo/tools';
+
+const BlogPreview = ({ author }) => (
+  <div>
+    <Author author={author} />
+    {getCurrentYear()}
+  </div>
+);
+```
+
+## Available Modules:
+
+- Components
+
+- Hooks
+
+- i18n
+
+- Providers
+
+- Types
+
+- Utilities
+
+## License
+
+MIT License © 2025 Anywayseo

package/dist/components/base/pulse-button/index.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { BoxPositionProps } from '../../../types';
 type PulseButtonProps = {
     label: string;
+    colorScheme?: 'dark' | 'light';
     onClick: VoidFunction;
 } & BoxPositionProps;
 declare const PulseButton: FC<PulseButtonProps>;

package/dist/components/base/pulse-button/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const ColorMap: {
+    readonly light: "gray.200";
+    readonly dark: "gray.700";
+};

package/dist/components/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-CnohyDGd.js");
+const index = require("../index-Cn_SqfLz.js");
 exports.Author = index.Author;
 exports.BonusCard = index.BonusCard;
 exports.Center = index.Center;

package/dist/components/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "../index-CHSIkTv7.mjs";
+import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "../index-Bc2a2-SP.mjs";
 export {
   A as Author,
   B as BonusCard,

package/dist/components/layout/footer/navigation/index.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { INavigationItem } from '../../../../types';
+import { INavItem } from '../../../../types';
 type NavigationProps = {
-    menu: INavigationItem[];
+    menu: INavItem[];
 };
 declare const Navigation: FC<NavigationProps>;
 export default Navigation;

package/dist/components/layout/header/navigation/desktop/nav-list/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { INavItem } from '../../../../../../types';
+type NavListProps = INavItem;
+declare const NavList: FC<NavListProps>;
+export default NavList;

package/dist/components/layout/header/navigation/mobile/nav-list/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { INavItem } from '../../../../../../types';
+type NavListProps = INavItem & {
+    isExpanded: boolean;
+    onExpand: (id: INavItem['path']) => void;
+};
+declare const NavList: FC<NavListProps>;
+export default NavList;

package/dist/components/layout/header/navigation/nav-link/index.d.ts

@@ -0,0 +1,4 @@
+import { ISubNavItem } from '../../../../../types';
+type NavLinkProps = ISubNavItem;
+declare const NavLink: import('react').ForwardRefExoticComponent<NavLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export default NavLink;

package/dist/components/layout/header/navigation/types.d.ts

@@ -1,4 +1,4 @@
-import { INavigationItem } from '../../../../types';
+import { INavItem } from '../../../../types';
 export type NavigationProps = {
-    menu: INavigationItem[];
+    menu: INavItem[];
 };

package/dist/{index-CHSIkTv7.mjs → index-Bc2a2-SP.mjs}

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Center as Center$1, Box, Collapse, Text, Button, Flex, Stack, Image, SimpleGrid, Link, Card, CardHeader, Heading, CardBody, Popover, PopoverTrigger, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, LinkBox, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, Icon, useBreakpointValue, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
+import { Center as Center$1, Box, Collapse, Text, Button, Flex, Stack, Image, SimpleGrid, Link, Card, CardHeader, Heading, CardBody, Popover, PopoverTrigger, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, LinkBox, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, List as List$1, ListItem, Icon, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { A as Animation, b as formatNumber, c as getCurrencySymbol, f as formatDate, d as getDomain, g as getCurrentYear, a as getCurrentMonth } from "./index-j8Vo42fz.mjs";
 import { a as GameCharacteristic } from "./index-DxLcykuT.mjs";
 import "@ctrl/tinycolor";
 import "@mdx-js/react";
 import { u as useSiteContext } from "./index-BNb-P8a6.mjs";
-import { useRef, useState, useLayoutEffect, Fragment as Fragment$1, useEffect, useMemo } from "react";
+import { useRef, useState, useLayoutEffect, Fragment as Fragment$1, forwardRef, useEffect, useMemo } from "react";
 import { EmailIcon, StarIcon, CloseIcon, ExternalLinkIcon, ChevronRightIcon, ChevronDownIcon, HamburgerIcon, ChevronUpIcon, WarningIcon, CheckCircleIcon } from "@chakra-ui/icons";
 import { u as usePrimaryColors } from "./index-xuSxvz5z.mjs";
 import { t } from "i18next";
@@ -85,12 +85,16 @@ const LinkButton = ({ label, url, width = "auto", ...boxProps }) => {
     }
   );
 };
-const PulseButton = ({ label, onClick }) => {
+const ColorMap = {
+  light: "gray.200",
+  dark: "gray.700"
+};
+const PulseButton = ({ label, colorScheme = "light", onClick }) => {
   return /* @__PURE__ */ jsx(
     Button,
     {
       size: { base: "sm", md: "lg" },
-      color: "gray.200",
+      color: ColorMap[colorScheme],
       bgColor: "brand.500",
       animation: `${Animation.pulse} 2s infinite linear`,
       _hover: { bgColor: "brand.200", color: "gray.700" },
@@ -544,18 +548,18 @@ const Navigation$1 = ({ menu }) => {
       spacing: 4,
       justifyItems: { base: "flex-start", md: "center" },
       justifyContent: "space-between",
-      children: menu.map(({ url, title }) => /* @__PURE__ */ jsx(
+      children: menu.map(({ path, label }) => /* @__PURE__ */ jsx(
         Text,
         {
           as: Link$1,
-          to: url,
+          to: path,
           fontSize: "md",
           fontWeight: "semibold",
           colorScheme: "gray",
           _hover: { textDecoration: "none", color: "brand.400" },
-          children: title
+          children: label
         },
-        url
+        path
       ))
     }
   );
@@ -583,114 +587,134 @@ const Footer = () => {
 const Brand = ({ brand }) => {
   return /* @__PURE__ */ jsx(Link$1, { to: "/", children: brand });
 };
-const DesktopNavItem = ({ title, url, children }) => {
+const NavLink = forwardRef(({ path, label }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ref,
+      as: Link$1,
+      to: path,
+      p: 2,
+      fontWeight: "semibold",
+      _hover: { textDecoration: "none", color: "brand.400" },
+      children: label
+    }
+  );
+});
+NavLink.displayName = "NavLink";
+const NavList$1 = ({ path, label, children }) => {
   const background = useColorModeValue("white", "gray.800");
   const backgroundHover = useColorModeValue("brand.50", "gray.900");
   return /* @__PURE__ */ jsxs(Popover, { trigger: "hover", placement: "bottom-start", children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
       Text,
       {
-        as: Link$1,
-        to: url,
         p: 2,
-        fontSize: "sm",
-        fontWeight: 500,
+        fontWeight: "semibold",
+        cursor: "pointer",
+        tabIndex: 0,
         _hover: { textDecoration: "none", color: "brand.400" },
-        children: title
+        children: label
       }
     ) }),
-    !!children && /* @__PURE__ */ jsx(PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsx(Stack, { as: "ul", p: 0, children: children.map((child) => /* @__PURE__ */ jsx(
-      Box,
+    /* @__PURE__ */ jsx(PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsx(List$1, { spacing: 2, p: 0, children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(ListItem, { rounded: "md", _hover: { bg: backgroundHover }, children: /* @__PURE__ */ jsxs(Flex, { as: Link$1, to: `${path}${child.path}`, p: 2, role: "group", children: [
+      /* @__PURE__ */ jsx(Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.label }),
+      /* @__PURE__ */ jsx(
+        Flex,
+        {
+          flex: 1,
+          justify: "flex-end",
+          align: "center",
+          opacity: 0,
+          transition: "all .3s ease",
+          transform: "translateX(-10px)",
+          _groupHover: { opacity: 1, transform: "translateX(0)" },
+          children: /* @__PURE__ */ jsx(Icon, { as: ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
+        }
+      )
+    ] }) }, child.path)) }) })
+  ] });
+};
+const DesktopNavigation = ({ menu }) => {
+  return /* @__PURE__ */ jsx(Flex, { as: "ul", role: "list", gap: 2, p: 0, display: { base: "none", md: "flex" }, children: menu.map((item) => {
+    var _a;
+    return /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(NavList$1, { ...item }) : /* @__PURE__ */ jsx(NavLink, { ...item }) }, item.path);
+  }) });
+};
+const NavList = ({ path, label, children, isExpanded, onExpand }) => {
+  function handleClick() {
+    onExpand(path);
+  }
+  return /* @__PURE__ */ jsxs(Stack, { w: "full", children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
       {
-        as: "li",
-        role: "group",
-        display: "block",
+        as: "button",
         p: 2,
-        cursor: "pointer",
-        rounded: "md",
-        _hover: { bg: backgroundHover },
-        children: /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
-          /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsx(Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.title }),
-            !!child.subtitle && /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: child.subtitle })
-          ] }),
+        pe: 1,
+        align: "center",
+        justifyContent: "space-between",
+        _hover: { textDecoration: "none", color: "brand.400" },
+        onClick: handleClick,
+        children: [
+          /* @__PURE__ */ jsx(Text, { isTruncated: true, fontWeight: 600, children: label }),
           /* @__PURE__ */ jsx(
-            Flex,
+            ChevronDownIcon,
             {
-              flex: 1,
-              justify: "flex-end",
-              align: "center",
-              opacity: 0,
-              transition: "all .3s ease",
-              transform: "translateX(-10px)",
-              _groupHover: { opacity: 1, transform: "translateX(0)" },
-              children: /* @__PURE__ */ jsx(Icon, { as: ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
+              w: 24,
+              h: 24,
+              transform: isExpanded ? "rotate(180deg)" : "",
+              transition: "all .25s ease-in-out"
             }
           )
-        ] })
-      },
-      child.url
-    )) }) })
-  ] });
-};
-const DesktopNavigation = ({ menu }) => {
-  return /* @__PURE__ */ jsx(Flex, { as: "ul", direction: "row", gap: 4, p: 0, children: menu.map((item) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(DesktopNavItem, { ...item }) }, item.url)) });
-};
-const MobileNavItem = ({ title, children, url }) => {
-  const { isOpen, onToggle } = useDisclosure();
-  return /* @__PURE__ */ jsxs(Stack, { w: "100%", p: 2, children: [
-    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [
-      /* @__PURE__ */ jsx(Text, { as: Link$1, to: url, isTruncated: true, fontWeight: 600, children: title }),
-      !!children && /* @__PURE__ */ jsx(Flex, { as: "button", onClick: onToggle, children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          as: ChevronDownIcon,
-          w: 6,
-          h: 6,
-          transform: isOpen ? "rotate(180deg)" : "",
-          transition: "all .25s ease-in-out"
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(
-      Stack,
-      {
-        as: "ul",
-        pl: 2,
-        borderLeft: 1,
-        borderStyle: "solid",
-        borderColor: useColorModeValue("gray.200", "gray.700"),
-        children: !!children && children.map((child) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(Text, { as: Link$1, to: `${url}${child.url}`, py: 2, children: child.title }) }, child.url))
+        ]
       }
-    ) })
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: isExpanded, transition: { enter: { ease: "easeIn" }, exit: { duration: 0.2 } }, children: /* @__PURE__ */ jsx(List$1, { ml: 2, pl: 0, borderLeft: 1, borderStyle: "solid", borderColor: useColorModeValue("gray.200", "gray.700"), children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: /* @__PURE__ */ jsx(Text, { as: Link$1, to: `${path}${child.path}`, p: 2, fontSize: "sm", children: child.label }) }, child.path)) }) })
   ] });
 };
 const MobileNavigation = ({ menu }) => {
+  const [selected, setSelected] = useState(null);
   const { isOpen, onToggle } = useDisclosure();
-  const background = useColorModeValue("white", "gray.800");
-  return menu.length ? /* @__PURE__ */ jsxs(Box, { children: [
+  const background = useColorModeValue("gray.50", "gray.900");
+  function handleExpand(id) {
+    setSelected((prev) => prev === id ? null : id);
+  }
+  function handleClick() {
+    setSelected(null);
+    onToggle();
+  }
+  return /* @__PURE__ */ jsxs(Box, { display: { base: "block", md: "none" }, children: [
     /* @__PURE__ */ jsx(
       IconButton,
       {
-        icon: isOpen ? /* @__PURE__ */ jsx(CloseIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsx(HamburgerIcon, {}),
-        size: "md",
+        icon: isOpen ? /* @__PURE__ */ jsx(CloseIcon, { w: 12, h: 12 }) : /* @__PURE__ */ jsx(HamburgerIcon, { w: 18, h: 18 }),
+        size: "sm",
         variant: "ghost",
-        "aria-label": "Toggle Navigation",
-        onClick: onToggle
+        "aria-label": `${isOpen ? "Close" : "Open"} navigation menu`,
+        "aria-expanded": isOpen,
+        onClick: handleClick
       }
     ),
-    /* @__PURE__ */ jsx(Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(Box, { position: "absolute", top: 14, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsx(Stack, { as: "ul", spacing: 2, p: 2, w: "100%", borderRadius: "md", boxShadow: "md", bg: background, children: menu.map((item) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(MobileNavItem, { ...item }) }, item.url)) }) }) })
-  ] }) : null;
+    /* @__PURE__ */ jsx(Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(Box, { position: "absolute", top: 16, left: 0, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsx(List$1, { spacing: 2, p: 2, w: "full", borderRadius: "md", boxShadow: "md", bg: background, children: menu.map((item) => {
+      var _a;
+      return /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(NavList, { ...item, isExpanded: item.path === selected, onExpand: handleExpand }) : /* @__PURE__ */ jsx(NavLink, { ...item }) }, item.path);
+    }) }) }) })
+  ] });
 };
 const Navigation = ({ menu }) => {
-  const isDesktop = useBreakpointValue({ base: false, md: true });
-  return isDesktop ? /* @__PURE__ */ jsx(DesktopNavigation, { menu }) : /* @__PURE__ */ jsx(MobileNavigation, { menu });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DesktopNavigation, { menu }),
+    /* @__PURE__ */ jsx(MobileNavigation, { menu })
+  ] });
 };
 const Header = () => {
   var _a, _b;
   const { configs } = useSiteContext();
   const navigation = ((_a = configs == null ? void 0 : configs.header) == null ? void 0 : _a.navigation) ?? [];
   const toolbar = (_b = configs == null ? void 0 : configs.header) == null ? void 0 : _b.toolbar;
+  const hasToolbar = !!toolbar;
+  const hasNavigation = navigation.length;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -701,20 +725,20 @@ const Header = () => {
       color: useColorModeValue("gray.700", "gray.200"),
       boxShadow: "sm",
       zIndex: 100,
-      children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Flex, { as: "nav", gap: 2, py: 1, children: [
+      children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Flex, { as: "nav", gap: 2, py: 2, children: [
         /* @__PURE__ */ jsx(Brand, { brand: /* @__PURE__ */ jsx(Logo, {}) }),
-        (!!navigation.length || !!toolbar) && /* @__PURE__ */ jsxs(
+        (hasNavigation || hasToolbar) && /* @__PURE__ */ jsxs(
           Flex,
           {
             as: "section",
             flex: 1,
             flexDir: { base: "row-reverse", md: "row" },
-            justifyContent: { base: "flex-end", md: "flex-start" },
+            justifyContent: "end",
             align: "center",
             gap: 2,
             children: [
-              !!navigation.length && /* @__PURE__ */ jsx(Flex, { flex: { base: 0, md: 1 }, children: /* @__PURE__ */ jsx(Navigation, { menu: navigation }) }),
-              !!toolbar && /* @__PURE__ */ jsx(Flex, { gap: 2, flex: { base: 1, md: 0 }, justifyContent: "flex-end", children: toolbar })
+              hasNavigation && /* @__PURE__ */ jsx(Flex, { flex: { base: 0, md: 1 }, children: /* @__PURE__ */ jsx(Navigation, { menu: navigation }) }),
+              hasToolbar && /* @__PURE__ */ jsx(Flex, { gap: 2, flex: { base: 1, md: 0 }, justifyContent: "flex-end", children: toolbar })
             ]
           }
         )

package/dist/{index-CnohyDGd.js → index-Cn_SqfLz.js}

@@ -86,12 +86,16 @@ const LinkButton = ({ label, url, width = "auto", ...boxProps }) => {
     }
   );
 };
-const PulseButton = ({ label, onClick }) => {
+const ColorMap = {
+  light: "gray.200",
+  dark: "gray.700"
+};
+const PulseButton = ({ label, colorScheme = "light", onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Button,
     {
       size: { base: "sm", md: "lg" },
-      color: "gray.200",
+      color: ColorMap[colorScheme],
       bgColor: "brand.500",
       animation: `${index$1.Animation.pulse} 2s infinite linear`,
       _hover: { bgColor: "brand.200", color: "gray.700" },
@@ -545,18 +549,18 @@ const Navigation$1 = ({ menu }) => {
       spacing: 4,
       justifyItems: { base: "flex-start", md: "center" },
       justifyContent: "space-between",
-      children: menu.map(({ url, title }) => /* @__PURE__ */ jsxRuntime.jsx(
+      children: menu.map(({ path, label }) => /* @__PURE__ */ jsxRuntime.jsx(
         react.Text,
         {
           as: gatsby.Link,
-          to: url,
+          to: path,
           fontSize: "md",
           fontWeight: "semibold",
           colorScheme: "gray",
           _hover: { textDecoration: "none", color: "brand.400" },
-          children: title
+          children: label
         },
-        url
+        path
       ))
     }
   );
@@ -584,114 +588,134 @@ const Footer = () => {
 const Brand = ({ brand }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(gatsby.Link, { to: "/", children: brand });
 };
-const DesktopNavItem = ({ title, url, children }) => {
+const NavLink = react$1.forwardRef(({ path, label }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Text,
+    {
+      ref,
+      as: gatsby.Link,
+      to: path,
+      p: 2,
+      fontWeight: "semibold",
+      _hover: { textDecoration: "none", color: "brand.400" },
+      children: label
+    }
+  );
+});
+NavLink.displayName = "NavLink";
+const NavList$1 = ({ path, label, children }) => {
   const background = react.useColorModeValue("white", "gray.800");
   const backgroundHover = react.useColorModeValue("brand.50", "gray.900");
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Popover, { trigger: "hover", placement: "bottom-start", children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
       react.Text,
       {
-        as: gatsby.Link,
-        to: url,
         p: 2,
-        fontSize: "sm",
-        fontWeight: 500,
+        fontWeight: "semibold",
+        cursor: "pointer",
+        tabIndex: 0,
         _hover: { textDecoration: "none", color: "brand.400" },
-        children: title
+        children: label
       }
     ) }),
-    !!children && /* @__PURE__ */ jsxRuntime.jsx(react.PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { as: "ul", p: 0, children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-      react.Box,
+    /* @__PURE__ */ jsxRuntime.jsx(react.PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsxRuntime.jsx(react.List, { spacing: 2, p: 0, children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(react.ListItem, { rounded: "md", _hover: { bg: backgroundHover }, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { as: gatsby.Link, to: `${path}${child.path}`, p: 2, role: "group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.Flex,
+        {
+          flex: 1,
+          justify: "flex-end",
+          align: "center",
+          opacity: 0,
+          transition: "all .3s ease",
+          transform: "translateX(-10px)",
+          _groupHover: { opacity: 1, transform: "translateX(0)" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: icons.ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
+        }
+      )
+    ] }) }, child.path)) }) })
+  ] });
+};
+const DesktopNavigation = ({ menu }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "ul", role: "list", gap: 2, p: 0, display: { base: "none", md: "flex" }, children: menu.map((item) => {
+    var _a;
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx(NavList$1, { ...item }) : /* @__PURE__ */ jsxRuntime.jsx(NavLink, { ...item }) }, item.path);
+  }) });
+};
+const NavList = ({ path, label, children, isExpanded, onExpand }) => {
+  function handleClick() {
+    onExpand(path);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { w: "full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      react.Flex,
       {
-        as: "li",
-        role: "group",
-        display: "block",
+        as: "button",
         p: 2,
-        cursor: "pointer",
-        rounded: "md",
-        _hover: { bg: backgroundHover },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { direction: "row", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.title }),
-            !!child.subtitle && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", children: child.subtitle })
-          ] }),
+        pe: 1,
+        align: "center",
+        justifyContent: "space-between",
+        _hover: { textDecoration: "none", color: "brand.400" },
+        onClick: handleClick,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { isTruncated: true, fontWeight: 600, children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            react.Flex,
+            icons.ChevronDownIcon,
             {
-              flex: 1,
-              justify: "flex-end",
-              align: "center",
-              opacity: 0,
-              transition: "all .3s ease",
-              transform: "translateX(-10px)",
-              _groupHover: { opacity: 1, transform: "translateX(0)" },
-              children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: icons.ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
+              w: 24,
+              h: 24,
+              transform: isExpanded ? "rotate(180deg)" : "",
+              transition: "all .25s ease-in-out"
             }
           )
-        ] })
-      },
-      child.url
-    )) }) })
-  ] });
-};
-const DesktopNavigation = ({ menu }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "ul", direction: "row", gap: 4, p: 0, children: menu.map((item) => /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(DesktopNavItem, { ...item }) }, item.url)) });
-};
-const MobileNavItem = ({ title, children, url }) => {
-  const { isOpen, onToggle } = react.useDisclosure();
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { w: "100%", p: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { align: "center", gap: 2, justify: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: gatsby.Link, to: url, isTruncated: true, fontWeight: 600, children: title }),
-      !!children && /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "button", onClick: onToggle, children: /* @__PURE__ */ jsxRuntime.jsx(
-        react.Icon,
-        {
-          as: icons.ChevronDownIcon,
-          w: 6,
-          h: 6,
-          transform: isOpen ? "rotate(180deg)" : "",
-          transition: "all .25s ease-in-out"
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      react.Stack,
-      {
-        as: "ul",
-        pl: 2,
-        borderLeft: 1,
-        borderStyle: "solid",
-        borderColor: react.useColorModeValue("gray.200", "gray.700"),
-        children: !!children && children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: gatsby.Link, to: `${url}${child.url}`, py: 2, children: child.title }) }, child.url))
+        ]
       }
-    ) })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isExpanded, transition: { enter: { ease: "easeIn" }, exit: { duration: 0.2 } }, children: /* @__PURE__ */ jsxRuntime.jsx(react.List, { ml: 2, pl: 0, borderLeft: 1, borderStyle: "solid", borderColor: react.useColorModeValue("gray.200", "gray.700"), children: children == null ? void 0 : children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", role: "listitem", children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: gatsby.Link, to: `${path}${child.path}`, p: 2, fontSize: "sm", children: child.label }) }, child.path)) }) })
   ] });
 };
 const MobileNavigation = ({ menu }) => {
+  const [selected, setSelected] = react$1.useState(null);
   const { isOpen, onToggle } = react.useDisclosure();
-  const background = react.useColorModeValue("white", "gray.800");
-  return menu.length ? /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+  const background = react.useColorModeValue("gray.50", "gray.900");
+  function handleExpand(id) {
+    setSelected((prev) => prev === id ? null : id);
+  }
+  function handleClick() {
+    setSelected(null);
+    onToggle();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { display: { base: "block", md: "none" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       react.IconButton,
       {
-        icon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.HamburgerIcon, {}),
-        size: "md",
+        icon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: 12, h: 12 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.HamburgerIcon, { w: 18, h: 18 }),
+        size: "sm",
         variant: "ghost",
-        "aria-label": "Toggle Navigation",
-        onClick: onToggle
+        "aria-label": `${isOpen ? "Close" : "Open"} navigation menu`,
+        "aria-expanded": isOpen,
+        onClick: handleClick
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { position: "absolute", top: 14, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { as: "ul", spacing: 2, p: 2, w: "100%", borderRadius: "md", boxShadow: "md", bg: background, children: menu.map((item) => /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { ...item }) }, item.url)) }) }) })
-  ] }) : null;
+    /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { position: "absolute", top: 16, left: 0, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react.List, { spacing: 2, p: 2, w: "full", borderRadius: "md", boxShadow: "md", bg: background, children: menu.map((item) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx(NavList, { ...item, isExpanded: item.path === selected, onExpand: handleExpand }) : /* @__PURE__ */ jsxRuntime.jsx(NavLink, { ...item }) }, item.path);
+    }) }) }) })
+  ] });
 };
 const Navigation = ({ menu }) => {
-  const isDesktop = react.useBreakpointValue({ base: false, md: true });
-  return isDesktop ? /* @__PURE__ */ jsxRuntime.jsx(DesktopNavigation, { menu }) : /* @__PURE__ */ jsxRuntime.jsx(MobileNavigation, { menu });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DesktopNavigation, { menu }),
+    /* @__PURE__ */ jsxRuntime.jsx(MobileNavigation, { menu })
+  ] });
 };
 const Header = () => {
   var _a, _b;
   const { configs } = index.useSiteContext();
   const navigation = ((_a = configs == null ? void 0 : configs.header) == null ? void 0 : _a.navigation) ?? [];
   const toolbar = (_b = configs == null ? void 0 : configs.header) == null ? void 0 : _b.toolbar;
+  const hasToolbar = !!toolbar;
+  const hasNavigation = navigation.length;
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Box,
     {
@@ -702,20 +726,20 @@ const Header = () => {
       color: react.useColorModeValue("gray.700", "gray.200"),
       boxShadow: "sm",
       zIndex: 100,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { as: "nav", gap: 2, py: 1, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { as: "nav", gap: 2, py: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Brand, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }),
-        (!!navigation.length || !!toolbar) && /* @__PURE__ */ jsxRuntime.jsxs(
+        (hasNavigation || hasToolbar) && /* @__PURE__ */ jsxRuntime.jsxs(
           react.Flex,
           {
             as: "section",
             flex: 1,
             flexDir: { base: "row-reverse", md: "row" },
-            justifyContent: { base: "flex-end", md: "flex-start" },
+            justifyContent: "end",
             align: "center",
             gap: 2,
             children: [
-              !!navigation.length && /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { flex: { base: 0, md: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Navigation, { menu: navigation }) }),
-              !!toolbar && /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { gap: 2, flex: { base: 1, md: 0 }, justifyContent: "flex-end", children: toolbar })
+              hasNavigation && /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { flex: { base: 0, md: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Navigation, { menu: navigation }) }),
+              hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { gap: 2, flex: { base: 1, md: 0 }, justifyContent: "flex-end", children: toolbar })
             ]
           }
         )

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-CnohyDGd.js");
+const index = require("./index-Cn_SqfLz.js");
 const index$1 = require("./index-IpSV-c71.js");
 const i18n$1 = require("./index-DCIXk-YH.js");
 const index$2 = require("./index-BWuTDC6H.js");

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "./index-CHSIkTv7.mjs";
+import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "./index-Bc2a2-SP.mjs";
 import { u } from "./index-xuSxvz5z.mjs";
 import { a as a2, G as G2, r } from "./index-DxLcykuT.mjs";
 import { M } from "./index-wbMOJRW_.mjs";

package/dist/types/components/bonus-card/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { IBonus, ILink } from '../../models';
+import { IBonus, ILink } from '../../content';
 type TextContent = string | ReactElement;
 export interface IBonusCard extends IBonus {
     link: ILink;

package/dist/types/components/game-card/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { IGame, ILink } from '../../models';
+import { IGame, ILink } from '../../content';
 export interface IGameCard extends IGame {
     link?: ILink['url'];
     image?: string | ReactElement;

package/dist/types/components/index.d.ts

@@ -5,5 +5,6 @@ export * from './game-card';
 export * from './game-info';
 export * from './how-to';
 export * from './image';
+export * from './navigation';
 export * from './pros-cons';
 export * from './tabs';

package/dist/types/components/navigation/index.d.ts

@@ -0,0 +1,10 @@
+type Path = `/${string}`;
+type IndexPath = '/';
+export interface INavItem<P extends Path = Path> {
+    path: P;
+    label: string;
+    children?: ISubNavItem[];
+}
+export interface ISubNavItem<P extends Path = Path> extends Omit<INavItem<P | IndexPath>, 'children'> {
+}
+export {};

package/dist/types/index.d.ts

@@ -1,6 +1,5 @@
 export * from './components';
+export * from './content';
 export * from './i18n';
-export * from './models';
-export * from './navigation';
 export * from './site';
 export * from './theme';

package/dist/types/site/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
+import { INavItem } from '../components';
 import { Currency, LanguageCode } from '../i18n';
-import { INavigationItem } from '../navigation';
 type ImageUrl = string;
 type ImageComponent = ReactElement;
 type Image = ImageUrl | ImageComponent;
@@ -12,11 +12,11 @@ export interface ISiteAssets {
     };
 }
 interface ISiteHeaderConfig {
-    navigation?: INavigationItem[];
+    navigation?: INavItem[];
     toolbar?: ReactNode;
 }
 interface ISiteFooterConfig {
-    navigation?: INavigationItem[];
+    navigation?: INavItem[];
 }
 export interface ISiteConfigs {
     header?: ISiteHeaderConfig;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@anywayseo/tools",
   "description": "Shared UI Components and Modules",
-  "version": "2.0.0",
+  "version": "2.2.1",
   "keywords": [
     "react",
     "ui",
@@ -64,10 +64,11 @@
     }
   },
   "scripts": {
-    "start": "npm pack",
+    "start": "npm run start --prefix stand",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prepack": "npm run build",
+    "preversion": "tsc -b && npm run lint",
     "bump:patch": "npm version patch",
     "bump:minor": "npm version minor",
     "bump:major": "npm version major",

package/dist/components/layout/header/navigation/desktop/item/index.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { INavigationItem } from '../../../../../../types';
-type DesktopNavItemProps = INavigationItem;
-declare const DesktopNavItem: FC<DesktopNavItemProps>;
-export default DesktopNavItem;

package/dist/components/layout/header/navigation/mobile/item/index.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { INavigationItem } from '../../../../../../types';
-type MobileNavItemProps = INavigationItem;
-declare const MobileNavItem: FC<MobileNavItemProps>;
-export default MobileNavItem;

package/dist/types/navigation/index.d.ts

@@ -1,9 +0,0 @@
-interface ISubNavigationItem extends Omit<INavigationItem, 'children'> {
-    subtitle?: string;
-}
-export interface INavigationItem {
-    url: string;
-    title: string;
-    children?: ISubNavigationItem[];
-}
-export {};