@levo-so/blocks 0.1.0 → 0.1.2

package/dist/blocks/navbar/navbar-2.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import type { ILevoBlockBaseProps } from "@levo-so/studio";
-import type { INavbar1Content } from "./navbar-1.schema";
-declare const Navbar2: React.FC<ILevoBlockBaseProps<INavbar1Content>>;
-export default Navbar2;
-//# sourceMappingURL=navbar-2.d.ts.map

package/dist/blocks/navbar/navbar-2.js

@@ -1,99 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
-import { cn } from "@levo-so/react";
-import { Box, Button, Heading, Image, PopoverRoot, PopoverContent, PopoverTrigger, Typography, Container, Section, Icon, } from "@levo-so/studio";
-import { ChevronDown, Menu, X } from "lucide-react";
-const DropdownNavigationItem = ({ navItem, index, prefixKey }) => {
-    const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] = useState(false);
-    const subItems = navItem?.["sub-items"];
-    return (_jsxs(PopoverRoot, { open: isDropdownPopoverOpen, onOpenChange: (open) => setIsDropdownPopoverOpen(open), children: [_jsxs(PopoverTrigger, { elementKey: `${prefixKey}.${index}.nav-item-dropdown-trigger`, onMouseEnter: () => setIsDropdownPopoverOpen(true), "data-levo_group_item": true, children: [_jsx(Heading, { elementKey: `${prefixKey}.${index}.nav-item-dropdown-trigger-title` }), _jsx(ChevronDown, { "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",
-                            rotate: isDropdownPopoverOpen ? "180deg" : "0deg",
-                            color: "var(--color-text-1)",
-                        } })] }), _jsx(PopoverContent, { elementKey: `${prefixKey}.${index}.sub-items_levoGroup`, "data-levo_group": true, onMouseLeave: () => setIsDropdownPopoverOpen(false), inPortal: false, children: subItems && Array?.isArray(subItems)
-                    ? subItems?.map((subItem, idx) => (_jsxs(Box, { elementKey: `left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-link`, "data-levo_group_item": true, className: cn("group hover:bg-opacity-50", ""), style: subItem?.["sub-item-description"]
-                            ? {
-                                alignItems: "flex-start",
-                            }
-                            : {}, children: [subItem?.["sub-item-icon"] && (_jsx(Box, { elementKey: `left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon-container`, className: "group-hover:bg-slate-200 group-hover:bg-opacity-80", children: _jsx(Icon, { elementKey: `left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon` }) })), _jsxs(Box, { elementKey: `left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-text-container`, children: [_jsx(Heading, { elementKey: `left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-title` }), _jsx(Typography, { elementKey: `left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-description` })] })] }, `subItem_${index}_${idx}`)))
-                    : null })] }));
-};
-const DesktopNavItem = ({ index, navItem, prefixKey }) => {
-    const navSubItems = navItem?.["sub-items"] ?? [];
-    const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
-    return (_jsxs(_Fragment, { children: [isNavItemDropdown && (_jsx(DropdownNavigationItem, { navItem: navItem, index: index, prefixKey: prefixKey })), !isNavItemDropdown && (_jsx(Heading, { "data-levo_group_item": true, elementKey: `${prefixKey}.${index}.nav-item-title` }))] }));
-};
-const DesktopNavigationMenu = ({ navItems, prefixKey }) => {
-    return (_jsx(Box, { elementKey: `${prefixKey}_levoGroup`, "data-levo_group": true, children: navItems?.map((item, index) => {
-            return (_jsx(DesktopNavItem, { navItem: item, index: index, prefixKey: prefixKey }, `${prefixKey}.${index}`));
-        }) }));
-};
-const DropdownNavigationItemMobile = ({ navItem, index, setIsOpen }) => {
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const subItems = navItem?.["sub-items"];
-    return (_jsxs(Box, { elementKey: `mobile-nav-menu.${index}.nav-item-dropdown-container`, children: [_jsxs(Box, { elementKey: `mobile-nav-menu.${index}.nav-item-dropdown-trigger`, onClick: () => setIsDropdownOpen((prev) => !prev), children: [_jsx(Heading, { elementKey: `mobile-nav-menu.${index}.nav-item-dropdown-trigger-title` }), _jsx(ChevronDown, { "aria-hidden": "true", style: {
-                            position: "relative",
-                            top: "2px",
-                            height: "16px",
-                            width: "16px",
-                            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",
-                            rotate: isDropdownOpen ? "180deg" : "0deg",
-                            color: "var(--color-text-1)",
-                        } })] }), isDropdownOpen && (_jsx(Box, { elementKey: `mobile-nav-menu.${index}.sub-items_levoGroup`, "data-levo_group": true, children: subItems && Array?.isArray(subItems)
-                    ? subItems?.map((subItem, idx) => {
-                        return (_jsxs(Box, { elementKey: `mobile-nav-menu.${index}.sub-items.${idx}.sub-item-link`, className: cn("group hover:bg-slate-100 hover:bg-opacity-50"), "data-levo_group_item": true, style: subItem?.["sub-item-description"]
-                                ? {
-                                    alignItems: "flex-start",
-                                }
-                                : {}, children: [subItem?.["sub-item-icon"] && (_jsx(Box, { elementKey: `mobile-nav-menu.${index}.sub-items.${idx}.sub-item-icon-container`, className: "bg-opacity-60 group-hover:bg-slate-200 group-hover:bg-opacity-80", children: _jsx(Icon, { elementKey: `mobile-nav-menu.${index}.sub-items.${idx}.sub-item-icon` }) })), _jsxs(Box, { elementKey: `mobile-nav-menu.${index}.sub-items.${idx}.sub-item-text-container`, children: [subItem?.["sub-item-title"] && (_jsx(Box, { elementKey: `mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title-container`, onClick: () => setIsOpen(false), children: _jsx(Heading, { elementKey: `mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title` }) })), _jsx(Typography, { elementKey: `mobile-nav-menu.${index}.sub-items.${idx}.sub-item-description` })] })] }, `subItem_${index}`));
-                    })
-                    : null }))] }));
-};
-const MobileNavItem = ({ navItem, index, setIsOpen }) => {
-    const navSubItems = navItem?.["sub-items"] ?? [];
-    const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
-    return (_jsxs(React.Fragment, { children: [isNavItemDropdown && (_jsx(DropdownNavigationItemMobile, { navItem: navItem, setIsOpen: setIsOpen, index: index })), !isNavItemDropdown && (_jsx(Box, { "data-levo_group_item": true, elementKey: `mobile-nav-menu.${index}.nav-item-title-container`, onClick: () => setIsOpen(false), children: _jsx(Heading, { elementKey: `mobile-nav-menu.${index}.nav-item-title` }) }))] }));
-};
-const MobileNavigationSheet = ({ navItems, content, isOpen, setIsOpen }) => {
-    return (_jsxs(React.Fragment, { children: [_jsx(Button, { elementKey: "mobile-nav-menu-button", "aria-label": "Open navigation", onClick: () => setIsOpen(!isOpen), children: isOpen ? _jsx(X, { size: 24 }) : _jsx(Menu, { size: 24 }) }), isOpen && (_jsxs(Box, { elementKey: "mobile-nav-menu-wrapper", children: [_jsx(Box, { elementKey: "mobile-nav-menu_levoGroup", "data-levo_group": true, children: Array.isArray(navItems)
-                            ? navItems?.map((item, index) => {
-                                return (_jsx(MobileNavItem, { navItem: item, setIsOpen: setIsOpen, index: index }, `${item?.["nav-item-title"]}_${index}`));
-                            })
-                            : null }), content?.["mobile-cta-group"]?.length > 0 && (_jsx(Box, { elementKey: "mobile-cta-group_levoGroup", "data-levo_group": true, children: content?.["mobile-cta-group"]?.map((_, index) => (_jsx(Button, { elementKey: `mobile-cta-group.${index}.cta`, "data-levo_group_item": true }, `mobile-cta-group.${index}.cta`))) }))] }))] }));
-};
-const Navbar2 = ({ content, }) => {
-    const [isScrolled, setIsScrolled] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-    useEffect(() => {
-        const handleScroll = () => {
-            if (window.scrollY === 0 && isScrolled) {
-                setIsScrolled(false);
-            }
-            else if (window.scrollY >= 40 && !isScrolled) {
-                setIsScrolled(true);
-            }
-        };
-        document.addEventListener("scroll", handleScroll);
-        return () => {
-            document.removeEventListener("scroll", handleScroll);
-        };
-    }, [isScrolled]);
-    const leftDesktopNavLinks = content?.["left-desktop-nav-menu"];
-    const rightDesktopNavLinks = content?.["right-desktop-nav-menu"];
-    const mobileNavLinks = content?.["mobile-nav-menu"];
-    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(Box, { elementKey: "mobile-background-overlay", onClick: () => setIsOpen(false), className: "fixed bottom-0 left-0 right-0 top-0 z-20 bg-black/20" })), _jsx(Section, { elementKey: "layout", className: cn(isScrolled ? "top-2" : "top-8"), children: _jsxs(Container, { elementKey: "nav-container", children: [leftDesktopNavLinks &&
-                            Array?.isArray(leftDesktopNavLinks) &&
-                            leftDesktopNavLinks?.length > 0 && (_jsx(DesktopNavigationMenu, { navItems: leftDesktopNavLinks, prefixKey: "left-desktop-nav-menu" })), _jsx(Image, { elementKey: "nav-logo", alt: "Logo" }), _jsxs(Box, { elementKey: "right-container", children: [rightDesktopNavLinks &&
-                                    Array?.isArray(rightDesktopNavLinks) &&
-                                    rightDesktopNavLinks?.length > 0 && (_jsx(DesktopNavigationMenu, { navItems: rightDesktopNavLinks, prefixKey: "right-desktop-nav-menu" })), content?.["desktop-cta-group"]?.length > 0 && (_jsx(Box, { elementKey: "desktop-cta-group_levoGroup", "data-levo_group": true, children: content?.["desktop-cta-group"]?.map((_, index) => (_jsx(Button, { elementKey: `desktop-cta-group.${index}.cta`, "data-levo_group_item": true }, `desktop-cta-group.${index}.cta`))) }))] }), _jsx(MobileNavigationSheet, { navItems: mobileNavLinks || [], content: content, isOpen: isOpen, setIsOpen: setIsOpen })] }) })] }));
-};
-export default Navbar2;

package/dist/blocks/navbar/navbar-2.schema.d.ts

@@ -1,134 +0,0 @@
-import type { IBlock } from "@levo-so/studio";
-declare const DEFAULT_CONTENT: {
-    "nav-container": null;
-    "nav-logo": {
-        id: string;
-        location: string;
-        kind: string;
-        mimetype: string;
-        srcset: {
-            "1080w": string;
-            "1200w": string;
-            "1920w": string;
-            "320w": string;
-            "640w": string;
-            "750w": string;
-            "828w": string;
-            path: string;
-        };
-    };
-    "left-desktop-nav-menu": ({
-        "nav-item-link": {
-            href: string;
-        };
-        "nav-item-title": string;
-        "nav-item-dropdown-trigger"?: undefined;
-        "nav-item-dropdown-trigger-title"?: undefined;
-        "sub-items"?: undefined;
-    } | {
-        "nav-item-dropdown-trigger": null;
-        "nav-item-dropdown-trigger-title": string;
-        "sub-items": {
-            "sub-item-link": {
-                href: string;
-            };
-            "sub-item-icon-container": null;
-            "sub-item-icon": {
-                kind: string;
-                data: {
-                    id: string;
-                    label: string;
-                    tags: string[];
-                    svgCode: string;
-                };
-            };
-            "sub-item-text-container": null;
-            "sub-item-title": string;
-            "sub-item-description": string;
-        }[];
-        "nav-item-link"?: undefined;
-        "nav-item-title"?: undefined;
-    })[];
-    "right-desktop-nav-menu": ({
-        "nav-item-link": {
-            href: string;
-        };
-        "nav-item-title": string;
-        "nav-item-dropdown-trigger"?: undefined;
-        "nav-item-dropdown-trigger-title"?: undefined;
-        "sub-items"?: undefined;
-    } | {
-        "nav-item-dropdown-trigger": null;
-        "nav-item-dropdown-trigger-title": string;
-        "sub-items": {
-            "sub-item-link": {
-                href: string;
-            };
-            "sub-item-icon-container": null;
-            "sub-item-icon": {
-                kind: string;
-                data: {
-                    id: string;
-                    label: string;
-                    tags: string[];
-                    svgCode: string;
-                };
-            };
-            "sub-item-text-container": null;
-            "sub-item-title": string;
-            "sub-item-description": string;
-        }[];
-        "nav-item-link"?: undefined;
-        "nav-item-title"?: undefined;
-    })[];
-    "desktop-cta-group": {
-        cta: string;
-    }[];
-    "mobile-background-overlay": null;
-    "mobile-nav-menu-button": null;
-    "mobile-nav-menu-wrapper": null;
-    "mobile-nav-menu": ({
-        "nav-item-link": {
-            href: string;
-        };
-        "nav-item-title-container": null;
-        "nav-item-title": string;
-        "nav-item-dropdown-container"?: undefined;
-        "nav-item-dropdown-trigger"?: undefined;
-        "nav-item-dropdown-trigger-title"?: undefined;
-        "sub-items"?: undefined;
-    } | {
-        "nav-item-dropdown-container": null;
-        "nav-item-dropdown-trigger": null;
-        "nav-item-dropdown-trigger-title": string;
-        "sub-items": {
-            "sub-item-link": {
-                href: string;
-            };
-            "sub-item-icon-container": null;
-            "sub-item-icon": {
-                kind: string;
-                data: {
-                    id: string;
-                    label: string;
-                    tags: string[];
-                    svgCode: string;
-                };
-            };
-            "sub-item-text-container": null;
-            "sub-item-title-container": null;
-            "sub-item-title": string;
-            "sub-item-description": string;
-        }[];
-        "nav-item-link"?: undefined;
-        "nav-item-title-container"?: undefined;
-        "nav-item-title"?: undefined;
-    })[];
-    "mobile-cta-group": {
-        cta: string;
-    }[];
-};
-export type INavbar2Content = typeof DEFAULT_CONTENT;
-export declare const Navbar2: IBlock;
-export {};
-//# sourceMappingURL=navbar-2.schema.d.ts.map