@levo-so/blocks 0.1.54 → 0.1.58

package/src/blocks/navbar/navbar-2.schema.ts

@@ -211,7 +211,7 @@ export const Navbar2: IBlock = {
         {
           key: "nav-item-title",
           label: "Nav Item Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "nav-item-dropdown-trigger",
@@ -221,7 +221,7 @@ export const Navbar2: IBlock = {
         {
           key: "nav-item-dropdown-trigger-title",
           label: "Nav Item Dropdown Trigger Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "sub-items",
@@ -252,7 +252,7 @@ export const Navbar2: IBlock = {
             {
               key: "sub-item-title",
               label: "Sub Item Title",
-              field_interface: "HeadingWidget",
+              field_interface: "TypographyWidget",
             },
             {
               key: "sub-item-description",
@@ -272,7 +272,7 @@ export const Navbar2: IBlock = {
         {
           key: "nav-item-title",
           label: "Nav Item Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "nav-item-dropdown-trigger",
@@ -282,7 +282,7 @@ export const Navbar2: IBlock = {
         {
           key: "nav-item-dropdown-trigger-title",
           label: "Nav Item Dropdown Trigger Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "sub-items",
@@ -313,7 +313,7 @@ export const Navbar2: IBlock = {
             {
               key: "sub-item-title",
               label: "Sub Item Title",
-              field_interface: "HeadingWidget",
+              field_interface: "TypographyWidget",
             },
             {
               key: "sub-item-description",
@@ -366,7 +366,7 @@ export const Navbar2: IBlock = {
         {
           key: "nav-item-title",
           label: "Nav Item Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "nav-item-dropdown-container",
@@ -381,7 +381,7 @@ export const Navbar2: IBlock = {
         {
           key: "nav-item-dropdown-trigger-title",
           label: "Nav Item Dropdown Trigger Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "sub-items",
@@ -417,7 +417,7 @@ export const Navbar2: IBlock = {
             {
               key: "sub-item-title",
               label: "Sub Item Title",
-              field_interface: "HeadingWidget",
+              field_interface: "TypographyWidget",
             },
             {
               key: "sub-item-description",

package/src/blocks/navbar/navbar-2.tsx

@@ -6,12 +6,11 @@ import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,
   Button,
-  Heading,
+  Typography,
   Image,
   PopoverRoot,
   PopoverContent,
   PopoverTrigger,
-  Typography,
   Container,
   Section,
   Icon,
@@ -40,7 +39,7 @@ const DropdownNavigationItem: React.FC<{
         onMouseEnter={() => setIsDropdownPopoverOpen(true)}
         data-levo_group_item
       >
-        <Heading
+        <Typography
           elementKey={`${prefixKey}.${index}.nav-item-dropdown-trigger-title`}
         />
         <ChevronDown
@@ -86,7 +85,7 @@ const DropdownNavigationItem: React.FC<{
                 <Box
                   elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-text-container`}
                 >
-                  <Heading
+                  <Typography
                     elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-title`}
                   />
                   <Typography
@@ -120,7 +119,7 @@ const DesktopNavItem: React.FC<{
         />
       )}
       {!isNavItemDropdown && (
-        <Heading
+        <Typography
           data-levo_group_item
           elementKey={`${prefixKey}.${index}.nav-item-title`}
         />
@@ -164,7 +163,7 @@ const DropdownNavigationItemMobile: React.FC<{
         elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger`}
         onClick={() => setIsDropdownOpen((prev) => !prev)}
       >
-        <Heading
+        <Typography
           elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`}
         />
         <ChevronDown
@@ -217,7 +216,7 @@ const DropdownNavigationItemMobile: React.FC<{
                           elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title-container`}
                           onClick={() => setIsOpen(false)}
                         >
-                          <Heading
+                          <Typography
                             elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title`}
                           />
                         </Box>
@@ -260,7 +259,7 @@ const MobileNavItem: React.FC<{
           elementKey={`mobile-nav-menu.${index}.nav-item-title-container`}
           onClick={() => setIsOpen(false)}
         >
-          <Heading elementKey={`mobile-nav-menu.${index}.nav-item-title`} />
+          <Typography elementKey={`mobile-nav-menu.${index}.nav-item-title`} />
         </Box>
       )}
     </React.Fragment>

package/src/blocks/navbar/navbar-3.schema.ts

@@ -569,7 +569,7 @@ export const Navbar3: IBlock = {
         {
           key: "nav-item-title",
           label: "Nav Item Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "nav-item-dropdown-trigger",
@@ -579,7 +579,7 @@ export const Navbar3: IBlock = {
         {
           key: "nav-item-dropdown-trigger-title",
           label: "Nav Item Dropdown Trigger Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "sub-items",
@@ -610,7 +610,7 @@ export const Navbar3: IBlock = {
             {
               key: "sub-item-title",
               label: "Sub Item Title",
-              field_interface: "HeadingWidget",
+              field_interface: "TypographyWidget",
             },
             {
               key: "sub-item-description",
@@ -631,7 +631,7 @@ export const Navbar3: IBlock = {
                 {
                   key: "nested-sub-item-title",
                   label: "Nested Sub Item Title",
-                  field_interface: "HeadingWidget",
+                  field_interface: "TypographyWidget",
                 },
                 {
                   key: "nested-sub-item-description",
@@ -675,7 +675,7 @@ export const Navbar3: IBlock = {
     {
       key: "mobile-nav-title",
       label: "Mobile Nav Title",
-      field_interface: "HeadingWidget",
+      field_interface: "TypographyWidget",
     },
     {
       key: "mobile-nav-menu-wrapper",
@@ -697,7 +697,7 @@ export const Navbar3: IBlock = {
         {
           key: "nav-item-title",
           label: "Nav Item Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "nav-item-dropdown-container",
@@ -712,7 +712,7 @@ export const Navbar3: IBlock = {
         {
           key: "nav-item-dropdown-trigger-title",
           label: "Nav Item Dropdown Trigger Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "sub-items",
@@ -743,7 +743,7 @@ export const Navbar3: IBlock = {
             {
               key: "sub-item-title",
               label: "Sub Item Title",
-              field_interface: "HeadingWidget",
+              field_interface: "TypographyWidget",
             },
             {
               key: "sub-item-description",
@@ -764,7 +764,7 @@ export const Navbar3: IBlock = {
                 {
                   key: "nested-sub-item-title",
                   label: "Nested Sub Item Title",
-                  field_interface: "HeadingWidget",
+                  field_interface: "TypographyWidget",
                 },
                 {
                   key: "nested-sub-item-description",

package/src/blocks/navbar/navbar-3.tsx

@@ -1,24 +1,20 @@
-"use client";
-// Test libraries-only change
-
-import React, { useEffect, useState } from "react";
 import { cn } from "@levo-so/react";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,
   Button,
-  Heading,
+  Container,
+  Icon,
   Image,
-  PopoverRoot,
   PopoverContent,
+  PopoverRoot,
   PopoverTrigger,
-  Typography,
   Section,
-  Container,
-  Icon,
+  Typography,
   UserMenu,
 } from "@levo-so/studio";
-import { ChevronDown, Menu, X, ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight, Menu, X } from "lucide-react";
+import React, { useEffect, useState } from "react";
 
 import type { INavbar3Content } from "./navbar-3.schema";
 
@@ -30,89 +26,126 @@ const NestedDropdownItem: React.FC<{
   const [isNestedDropdownOpen, setIsNestedDropdownOpen] =
     useState<boolean>(false);
   const nestedSubItems = subItem?.["sub-sub-items"] as Array<any>;
+  const hasNestedItems =
+    nestedSubItems &&
+    Array.isArray(nestedSubItems) &&
+    nestedSubItems.length > 0;
 
-  return (
-    <Box
-      elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.nested-dropdown-container`}
-    >
+  if (!hasNestedItems) {
+    return (
       <Box
-        elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.nested-dropdown-trigger`}
-        onMouseEnter={() => setIsNestedDropdownOpen(true)}
-        onMouseLeave={() => setIsNestedDropdownOpen(false)}
+        elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-link`}
         data-levo_group_item
-        className="group relative"
+        className="flex items-center gap-3"
       >
+        {subItem?.["sub-item-icon"] && (
+          <Box
+            elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon-container`}
+            className=""
+          >
+            <Icon
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon`}
+            />
+          </Box>
+        )}
         <Box
-          elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-link`}
-          data-levo_group_item
-          className="flex items-center justify-between"
+          elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-text-container`}
+          className=""
         >
-          <div className="flex items-center gap-3">
-            {subItem?.["sub-item-icon"] && (
-              <Box
-                elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon-container`}
-                className=""
-              >
-                <Icon
-                  elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon`}
-                />
-              </Box>
-            )}
-            <Box
-              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-text-container`}
-              className=""
-            >
-              <Heading
-                elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-title`}
-              />
-              <Typography
-                elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-description`}
-              />
-            </Box>
-          </div>
-          {nestedSubItems &&
-            Array.isArray(nestedSubItems) &&
-            nestedSubItems.length > 0 && (
-              <div className="group-hover:text-text-1 text-white">
-                <ChevronRight
-                  aria-hidden="true"
-                  className="h-[14px] w-[14px] transition-colors"
-                />
-              </div>
-            )}
+          <Typography
+            elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-title`}
+          />
+          <Typography
+            elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-description`}
+          />
         </Box>
+      </Box>
+    );
+  }
 
-        {/* Nested dropdown content inside same container */}
-        {isNestedDropdownOpen &&
-          nestedSubItems &&
-          Array.isArray(nestedSubItems) &&
-          nestedSubItems.length > 0 && (
+  return (
+    <PopoverRoot
+      open={isNestedDropdownOpen}
+      onOpenChange={setIsNestedDropdownOpen}
+    >
+      <PopoverTrigger
+        elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-link`}
+        onMouseEnter={() => setIsNestedDropdownOpen(true)}
+        data-levo_group_item
+        className="group flex items-center justify-between px-4 py-2 focus:outline-none"
+      >
+        <div className="flex items-center gap-3">
+          {subItem?.["sub-item-icon"] && (
             <Box
-              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items_levoGroup`}
-              data-levo_group
-              className="absolute top-0 left-full z-50 ml-1 w-48 rounded-md border border-gray-200 bg-white shadow-lg"
-              onMouseEnter={() => setIsNestedDropdownOpen(true)}
-              onMouseLeave={() => setIsNestedDropdownOpen(false)}
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon-container`}
+              className=""
             >
-              {nestedSubItems?.map((_: any, nestedIdx: number) => (
-                <Box
-                  elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-container`}
-                  key={`nestedSubItem_${parentIndex}_${subIndex}_${nestedIdx}`}
-                  data-levo_group_item
-                  className="px-5 py-3"
-                >
-                  <Heading
-                    elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-title`}
-                  />
-                  <Typography
-                    elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-description`}
-                  />
-                </Box>
-              ))}
+              <Icon
+                elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon`}
+              />
             </Box>
           )}
-      </Box>
-    </Box>
+          <Box
+            elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-text-container`}
+            className=""
+          >
+            <Typography
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-title`}
+            />
+            <Typography
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-description`}
+            />
+          </Box>
+        </div>
+        <div className="group-hover:text-text-1 ml-auto">
+          <ChevronRight
+            aria-hidden="true"
+            style={{
+              position: "relative",
+              top: "1px",
+              height: "14px",
+              width: "14px",
+              transitionProperty:
+                "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+              transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+              transitionDuration: "300ms",
+              color: "var(--color-text-1)",
+            }}
+          />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items`}
+        onMouseLeave={() => setIsNestedDropdownOpen(false)}
+        inPortal={true}
+        className="z-[60] min-w-48 rounded-md border border-gray-200 !bg-white shadow-lg focus:outline-none"
+        style={{
+          backgroundColor: "white !important",
+          background: "white",
+          outline: "none",
+          boxShadow:
+            "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        }}
+        side="right"
+        align="start"
+      >
+        {nestedSubItems?.map((_: any, nestedIdx: number) => (
+          <Box
+            elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-container`}
+            key={`nestedSubItem_${parentIndex}_${subIndex}_${nestedIdx}`}
+            data-levo_group_item
+            className="-mx-2 cursor-pointer rounded px-2 py-2 whitespace-nowrap hover:bg-gray-50 focus:outline-none"
+          >
+            <Typography
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-title`}
+            />
+            <Typography
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-description`}
+            />
+          </Box>
+        ))}
+      </PopoverContent>
+    </PopoverRoot>
   );
 };
 
@@ -135,8 +168,9 @@ const DropdownNavigationItem: React.FC<{
         elementKey={`desktop-nav-menu.${index}.nav-item-dropdown-trigger`}
         onMouseEnter={() => setIsDropdownPopoverOpen(true)}
         data-levo_group_item
+        className="focus:outline-none"
       >
-        <Heading
+        <Typography
           elementKey={`desktop-nav-menu.${index}.nav-item-dropdown-trigger-title`}
         />
         <ChevronDown
@@ -160,6 +194,7 @@ const DropdownNavigationItem: React.FC<{
         data-levo_group
         onMouseLeave={() => setIsDropdownPopoverOpen(false)}
         inPortal={false}
+        className="focus:outline-none"
       >
         {subItems && Array?.isArray(subItems)
           ? subItems?.map((subItem: any, idx: number) => (
@@ -190,7 +225,7 @@ const DesktopNavItem: React.FC<{
         <DropdownNavigationItem navItem={navItem} index={index} />
       )}
       {!isNavItemDropdown && (
-        <Heading
+        <Typography
           data-levo_group_item
           elementKey={`desktop-nav-menu.${index}.nav-item-title`}
         />
@@ -232,21 +267,19 @@ const NestedDropdownItemMobile: React.FC<any> = ({
       <Box
         elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.nested-dropdown-trigger`}
         onClick={() => setIsNestedDropdownOpen((prev) => !prev)}
-        className="flex w-full items-center"
+        data-levo_group_item
+        className="flex w-full items-center focus:outline-none"
       >
         <Box
           elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-text-container`}
         >
-          <Heading
+          <Typography
             elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-title`}
-          >
-            {subItem?.title}
-          </Heading>
+          />
+
           <Typography
             elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-description`}
-          >
-            {subItem?.description}
-          </Typography>
+          />
         </Box>
 
         <ChevronDown
@@ -264,31 +297,23 @@ const NestedDropdownItemMobile: React.FC<any> = ({
 
       {isNestedDropdownOpen && Array.isArray(nestedSubItems) && (
         <Box
-          elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items_levoGroup`}
-          data-levo_group
-          className="ml-4"
+          elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.nested-dropdown-trigger`}
+          className="ml-4 focus:outline-none"
         >
           {nestedSubItems.map((nestedSubItem, nestedIdx) => (
             <Box
               key={`nestedSubItem_${parentIndex}_${subIndex}_${nestedIdx}`}
-              elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-link`}
-              className={cn("")}
+              elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-container`}
+              className={cn("focus:outline-none")}
               data-levo_group_item
             >
-              <Box
-                elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-text-container`}
-              >
-                <Heading
-                  elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-title`}
-                >
-                  {nestedSubItem?.title}
-                </Heading>
-                <Typography
-                  elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-description`}
-                >
-                  {nestedSubItem?.description}
-                </Typography>
-              </Box>
+              <Typography
+                elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-title`}
+              />
+
+              <Typography
+                elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-description`}
+              />
             </Box>
           ))}
         </Box>
@@ -314,9 +339,9 @@ const DropdownNavigationItemMobile: React.FC<{
       <Box
         elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger`}
         onClick={() => setIsDropdownOpen((prev) => !prev)}
-        className="flex items-center justify-between"
+        className="flex items-center justify-between focus:outline-none"
       >
-        <Heading
+        <Typography
           elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`}
         />
         {hasSubSubItems && (
@@ -367,7 +392,7 @@ const DropdownNavigationItemMobile: React.FC<{
                   <Box
                     elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-text-container`}
                   >
-                    <Heading
+                    <Typography
                       elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title`}
                     />
                     <Typography
@@ -408,7 +433,7 @@ const MobileNavItem: React.FC<{
           elementKey={`mobile-nav-menu.${index}.nav-item-title-container`}
           onClick={() => setIsOpen(false)}
         >
-          <Heading elementKey={`mobile-nav-menu.${index}.nav-item-title`} />
+          <Typography elementKey={`mobile-nav-menu.${index}.nav-item-title`} />
         </Box>
       )}
     </React.Fragment>