@deriv-web-design/ui 0.0.12 → 0.0.13

package/dist/index.mjs

@@ -1372,7 +1372,7 @@ var Hero = ({
   const variantClass = `hero--${variant}`;
   const textBlock = /* @__PURE__ */ jsxs17("div", { className: "hero__text", children: [
     subtitle && /* @__PURE__ */ jsx18("p", { className: "hero__subtitle", children: subtitle }),
-    /* @__PURE__ */ jsx18("p", { className: "hero__title", children: title }),
+    /* @__PURE__ */ jsx18("h2", { className: "hero__title", children: title }),
     description && /* @__PURE__ */ jsx18("p", { className: "hero__description", children: description })
   ] });
   const buttonBlock = (primaryButton || secondaryButton) && /* @__PURE__ */ jsxs17("div", { className: "hero__buttons", children: [
@@ -2338,6 +2338,27 @@ var XMarkIcon2 = () => /* @__PURE__ */ jsx23("svg", { width: "20", height: "20",
     strokeLinecap: "round"
   }
 ) });
+var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ jsx23(
+  "svg",
+  {
+    className,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx23(
+      "path",
+      {
+        d: "M15 18L9 12L15 6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
 var GlobeIcon = ({ className }) => /* @__PURE__ */ jsx23("img", { src: icon_globe_default, alt: "", "aria-hidden": "true", width: "20", height: "20", className });
 var DropdownPanel = ({ item, onMouseEnter, onMouseLeave }) => {
   const { dropdown } = item;
@@ -2469,6 +2490,9 @@ var Navbar = ({
   ctaHref,
   languageLabel,
   onLanguageClick,
+  languageItems,
+  activeLanguageCode,
+  onLanguageSelect,
   className,
   ...props
 }) => {
@@ -2476,8 +2500,13 @@ var Navbar = ({
   const [mobileOpen, setMobileOpen] = useState8(false);
   const [mobileExpanded, setMobileExpanded] = useState8(null);
   const [scrolled, setScrolled] = useState8(false);
+  const [langDropdownOpen, setLangDropdownOpen] = useState8(false);
+  const [mobileLangOpen, setMobileLangOpen] = useState8(false);
   const hoverTimeoutRef = useRef7(null);
+  const langHoverTimeoutRef = useRef7(null);
   const pillAreaRef = useRef7(null);
+  const langBtnRef = useRef7(null);
+  const hasLangDropdown = Boolean(languageItems && languageItems.length > 0);
   const resolvedLogo = theme === "light" ? logoSrcDark ?? logoSrc : logoSrc;
   useEffect6(() => {
     const onScroll = () => setScrolled(window.scrollY > 0);
@@ -2489,11 +2518,15 @@ var Navbar = ({
       if (e.key === "Escape") {
         setOpenDropdown(null);
         setMobileOpen(false);
+        setMobileLangOpen(false);
       }
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, []);
+  useEffect6(() => {
+    if (!mobileOpen) setMobileLangOpen(false);
+  }, [mobileOpen]);
   useEffect6(() => {
     document.body.style.overflow = mobileOpen ? "hidden" : "";
     return () => {
@@ -2516,6 +2549,25 @@ var Navbar = ({
       hoverTimeoutRef.current = null;
     }
   }, []);
+  const clearLangHoverTimeout = useCallback2(() => {
+    if (langHoverTimeoutRef.current) {
+      clearTimeout(langHoverTimeoutRef.current);
+      langHoverTimeoutRef.current = null;
+    }
+  }, []);
+  const handleLangEnter = useCallback2(() => {
+    clearLangHoverTimeout();
+    setLangDropdownOpen(true);
+  }, [clearLangHoverTimeout]);
+  const handleLangLeave = useCallback2(() => {
+    clearLangHoverTimeout();
+    langHoverTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 150);
+  }, [clearLangHoverTimeout]);
+  const handleLangSelect = useCallback2((code) => {
+    setLangDropdownOpen(false);
+    setMobileLangOpen(false);
+    onLanguageSelect?.(code);
+  }, [onLanguageSelect]);
   const handleNavEnter = useCallback2((label) => {
     clearHoverTimeout();
     setOpenDropdown(label);
@@ -2575,10 +2627,28 @@ var Navbar = ({
                 }
                 return /* @__PURE__ */ jsx23("a", { href: item.href, className: "navbar__nav-item", children: item.label }, item.label);
               }),
-              languageLabel && /* @__PURE__ */ jsxs22("button", { className: "navbar__nav-item navbar__lang-btn", onClick: onLanguageClick, children: [
-                /* @__PURE__ */ jsx23(GlobeIcon, { className: "navbar__lang-globe" }),
-                languageLabel
-              ] })
+              languageLabel && /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  className: "navbar__lang-wrapper",
+                  onMouseEnter: hasLangDropdown ? handleLangEnter : void 0,
+                  onMouseLeave: hasLangDropdown ? handleLangLeave : void 0,
+                  children: /* @__PURE__ */ jsxs22(
+                    "button",
+                    {
+                      ref: langBtnRef,
+                      className: "navbar__nav-item navbar__lang-btn",
+                      onClick: hasLangDropdown ? () => setLangDropdownOpen((o) => !o) : onLanguageClick,
+                      "aria-haspopup": hasLangDropdown ? "true" : void 0,
+                      "aria-expanded": hasLangDropdown ? langDropdownOpen : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx23(GlobeIcon, { className: "navbar__lang-globe" }),
+                        languageLabel
+                      ]
+                    }
+                  )
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxs22("div", { className: "navbar__pill-actions", children: [
               loginHref && /* @__PURE__ */ jsx23("a", { href: loginHref, children: /* @__PURE__ */ jsx23(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
@@ -2594,6 +2664,38 @@ var Navbar = ({
             },
             "dropdown"
           ) }),
+          /* @__PURE__ */ jsx23(AnimatePresence, { children: hasLangDropdown && langDropdownOpen && /* @__PURE__ */ jsx23(
+            motion2.div,
+            {
+              className: "navbar__lang-dropdown",
+              variants: dropdownVariants,
+              initial: "hidden",
+              animate: "visible",
+              exit: "hidden",
+              transition: { duration: 0.18, ease: EASE_OUT_EXPO },
+              onMouseEnter: clearLangHoverTimeout,
+              onMouseLeave: handleLangLeave,
+              children: /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  className: "navbar__lang-dropdown-grid",
+                  style: { "--lang-rows": Math.ceil(languageItems.length / 3) },
+                  children: languageItems.map((lang) => /* @__PURE__ */ jsx23(
+                    "button",
+                    {
+                      className: [
+                        "navbar__lang-dropdown-item",
+                        lang.code === activeLanguageCode ? "navbar__lang-dropdown-item--active" : ""
+                      ].filter(Boolean).join(" "),
+                      onClick: () => handleLangSelect(lang.code),
+                      children: lang.label
+                    },
+                    lang.code
+                  ))
+                }
+              )
+            }
+          ) }),
           /* @__PURE__ */ jsxs22("div", { className: "navbar__actions", children: [
             loginHref && /* @__PURE__ */ jsx23("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ jsx23(
               Button,
@@ -2668,12 +2770,23 @@ var Navbar = ({
                     item.label
                   );
                 }),
-                languageLabel && /* @__PURE__ */ jsxs22("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
+                languageLabel && !hasLangDropdown && /* @__PURE__ */ jsxs22("button", { className: "navbar__drawer-lang", onClick: onLanguageClick, children: [
                   /* @__PURE__ */ jsx23(GlobeIcon, { className: "navbar__lang-globe" }),
                   languageLabel
-                ] })
+                ] }),
+                languageLabel && hasLangDropdown && /* @__PURE__ */ jsxs22(
+                  "button",
+                  {
+                    className: "navbar__drawer-lang",
+                    onClick: () => setMobileLangOpen(true),
+                    children: [
+                      /* @__PURE__ */ jsx23(GlobeIcon, { className: "navbar__lang-globe" }),
+                      languageLabel
+                    ]
+                  }
+                )
               ] }),
-              /* @__PURE__ */ jsxs22("div", { className: "navbar__drawer-footer", children: [
+              !mobileLangOpen && /* @__PURE__ */ jsxs22("div", { className: "navbar__drawer-footer", children: [
                 loginHref && /* @__PURE__ */ jsx23("a", { href: loginHref, style: { display: "block" }, children: /* @__PURE__ */ jsx23(
                   Button,
                   {
@@ -2692,7 +2805,40 @@ var Navbar = ({
                     fullWidth: true
                   }
                 ) })
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx23(AnimatePresence, { children: hasLangDropdown && mobileLangOpen && /* @__PURE__ */ jsxs22(
+                motion2.div,
+                {
+                  className: "navbar__drawer-lang-panel",
+                  initial: { y: "100%" },
+                  animate: { y: 0 },
+                  exit: { y: "100%" },
+                  transition: { duration: 0.25, ease: EASE_OUT_EXPO },
+                  children: [
+                    /* @__PURE__ */ jsx23(
+                      "button",
+                      {
+                        className: "navbar__drawer-lang-back",
+                        onClick: () => setMobileLangOpen(false),
+                        "aria-label": "Back to menu",
+                        children: /* @__PURE__ */ jsx23(ChevronLeftIcon, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx23("div", { className: "navbar__drawer-lang-grid", children: languageItems.map((lang) => /* @__PURE__ */ jsx23(
+                      "button",
+                      {
+                        className: [
+                          "navbar__drawer-lang-item",
+                          lang.code === activeLanguageCode ? "navbar__drawer-lang-item--active" : ""
+                        ].filter(Boolean).join(" "),
+                        onClick: () => handleLangSelect(lang.code),
+                        children: lang.label
+                      },
+                      lang.code
+                    )) })
+                  ]
+                }
+              ) })
             ]
           }
         ) }) })