@levo-so/blocks 0.1.0 → 0.1.2

package/dist/blocks/logos/logos-1.schema.js

@@ -1,239 +0,0 @@
-const DUMMY_IMAGE = {
-    id: "7141014160938075687",
-    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/png",
-    srcset: {
-        "1080w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-        "1200w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-        "1920w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-        "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-        "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-        "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-        "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-        path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-    },
-};
-const LOGOS_LENGTH = 30;
-const DEFAULT_CONTENT = {
-    layout: null,
-    container: null,
-    // title, description and CTA
-    textWrapper: null,
-    title: "Secure Your Financial Future",
-    description: "Experience the difference of professional financial planning with our proven methodologies.",
-    ctas: [
-        {
-            cta: "Contact Us",
-        },
-    ],
-    logos: Array.from({ length: LOGOS_LENGTH }, () => ({
-        wrapper: null,
-        logo: DUMMY_IMAGE,
-    })),
-};
-export const Logos1 = {
-    category_id: "logos",
-    title: "Logos 1",
-    key: "logos-1",
-    version: "v1",
-    prompt_description: "Centered headline, supporting text, and a prominent call-to-action button, with a horizontal auto-scrolling carousel of logos or images beneath.",
-    content_schema: [
-        {
-            key: "layout",
-            label: "Layout",
-            field_interface: "LayoutWidget",
-            hint: {
-                prompt_description: "Top-level block layout for organizing content sections. No content needed.",
-            },
-        },
-        {
-            key: "container",
-            label: "Container",
-            field_interface: "ContainerWidget",
-            hint: {
-                prompt_description: "A structural container for the central block to ensure proper alignment and spacing. No user-facing content.",
-            },
-        },
-        {
-            key: "textCTAWrapper",
-            label: "Text CTA Wrapper",
-            field_interface: "BoxWidget",
-            hint: {
-                prompt_description: "A layout wrapper grouping headline, description, and main call to action. Does not contain user-facing copy.",
-            },
-        },
-        {
-            key: "textWrapper",
-            label: "Text Wrapper",
-            field_interface: "BoxWidget",
-            hint: {
-                prompt_description: "A sub-container for headline and description text. No direct content required.",
-            },
-        },
-        {
-            key: "title",
-            label: "Title",
-            field_interface: "HeadingWidget",
-            hint: {
-                prompt_description: "A bold, compelling headline introducing the main value proposition. Should be concise, confident, and aspirational to inspire trust. Centered visually. Aim for 3-7 words.",
-                min_characters: 24, // "Secure Your Financial Future"
-                max_characters: 50, // Allowing some expansion
-            },
-        },
-        {
-            key: "description",
-            label: "Description",
-            field_interface: "TypographyWidget",
-            hint: {
-                prompt_description: "A one-sentence supporting statement elaborating on the headline. Professional, credible, and inviting in tone. Should communicate expertise or unique value. Appears just below the headline, should not exceed two lines.",
-                min_characters: 50,
-                max_characters: 130,
-            },
-        },
-        {
-            key: "ctas",
-            label: "CTAs",
-            field_interface: "BoxWidget",
-            kind: "group",
-            fields: [
-                {
-                    key: "cta",
-                    label: "CTA",
-                    field_interface: "ButtonWidget",
-                    hint: {
-                        prompt_description: "Primary call-to-action button text. Short, actionable, inviting users to engage (e.g., 'Contact Us'). Limit to 2-3 words. Button is visually prominent and centered.",
-                        min_characters: 6, // "Contact Us"
-                        max_characters: 20,
-                    },
-                },
-            ],
-            hint: {
-                prompt_description: "A group containing one or more CTAs for user interaction. Typically includes a primary action button. Only one visible CTA in this layout.",
-                min_items: 1,
-                max_items: 1,
-            },
-        },
-        {
-            key: "logos",
-            label: "Logos",
-            field_interface: "CarouselWidget",
-            kind: "group",
-            fields: [
-                {
-                    key: "wrapper",
-                    label: "Wrapper",
-                    field_interface: "BoxWidget",
-                },
-                {
-                    key: "logo",
-                    label: "Logo",
-                    field_interface: "ImageWidget",
-                    hint: {
-                        prompt_description: "A company or partner logo. Should be clear, well-cropped, and recognizable at small size. Used for visual credibility/social proof. Typically landscape or square, displayed in a row carousel.",
-                        orientation: "landscape",
-                        size: "small",
-                        usecase: "logo",
-                    },
-                },
-            ],
-            hint: {
-                prompt_description: "A horizontal carousel of company logos for social proof. Should contain recognizable partner or client logos. 10 visible at once; carousel may show up to 30.",
-                min_items: 8, // Number immediately visible on desktop
-                max_items: 16, // Allows full range shown
-            },
-        },
-    ],
-    layouts: [
-        {
-            title: "Default",
-            key: "default",
-            styles: {
-                logos_levoGroup: {
-                    number_of_slides: 10,
-                    tablet: {
-                        number_of_slides: 5,
-                    },
-                    mobile: {
-                        number_of_slides: 2,
-                    },
-                },
-                logos: Array.from({ length: LOGOS_LENGTH }, () => ({
-                    wrapper: {
-                        filter: "none",
-                        display: "flex",
-                        "align-items": "center",
-                        "justify-content": "center",
-                    },
-                })),
-                textCTAWrapper: {
-                    display: "flex",
-                    "flex-direction": "column",
-                    "align-items": "center",
-                    "row-gap": "2xl",
-                    tablet: {
-                        "row-gap": "lg",
-                    },
-                    mobile: {
-                        "row-gap": "sm",
-                    },
-                },
-                textWrapper: {
-                    display: "flex",
-                    "flex-direction": "column",
-                    "align-items": "center",
-                    "row-gap": "4xs",
-                },
-                layout: {
-                    "padding-top": "2xl",
-                    "padding-bottom": "2xl",
-                    "padding-right": "6xl",
-                    "padding-left": "6xl",
-                    tablet: {
-                        "padding-top": "lg",
-                        "padding-bottom": "lg",
-                        "padding-right": "3xl",
-                        "padding-left": "3xl",
-                    },
-                    mobile: {
-                        "padding-top": "base",
-                        "padding-bottom": "base",
-                        "padding-right": "xl",
-                        "padding-left": "xl",
-                    },
-                },
-                title: {
-                    "text-align": "center",
-                    "font-size": "3xl",
-                    tablet: {
-                        "font-size": "2xl",
-                    },
-                },
-                description: {
-                    "text-align": "center",
-                },
-                container: {
-                    display: "flex",
-                    "flex-direction": "column",
-                    "row-gap": "6xl",
-                    tablet: {
-                        "row-gap": "3xl",
-                    },
-                    mobile: {
-                        "row-gap": "xl",
-                    },
-                },
-            },
-            content: DEFAULT_CONTENT,
-            config: {
-                logos_levoGroup: {
-                    carousel: {
-                        loop: true,
-                        autoScroll: true,
-                        speed: 2,
-                    },
-                },
-            },
-        },
-    ],
-};

package/dist/blocks/navbar/navbar-1.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 Navbar1: React.FC<ILevoBlockBaseProps<INavbar1Content>>;
-export default Navbar1;
-//# sourceMappingURL=navbar-1.d.ts.map

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

@@ -1,100 +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, Section, Container, Icon, UserMenu, } from "@levo-so/studio";
-import { ChevronDown, Menu, X } from "lucide-react";
-const DropdownNavigationItem = ({ navItem, index }) => {
-    const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] = useState(false);
-    const subItems = navItem?.["sub-items"];
-    return (_jsxs(PopoverRoot, { open: isDropdownPopoverOpen, onOpenChange: (open) => setIsDropdownPopoverOpen(open), defaultOpen: true, children: [_jsxs(PopoverTrigger, { elementKey: `desktop-nav-menu.${index}.nav-item-dropdown-trigger`, onMouseEnter: () => setIsDropdownPopoverOpen(true), "data-levo_group_item": true, children: [_jsx(Heading, { elementKey: `desktop-nav-menu.${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: `desktop-nav-menu.${index}.sub-items_levoGroup`, "data-levo_group": true, onMouseLeave: () => setIsDropdownPopoverOpen(false), 
-                // Made inPortal as false because
-                // styles were not being passed to the portal
-                inPortal: false, children: subItems && Array?.isArray(subItems)
-                    ? subItems?.map((subItem, idx) => (_jsxs(Box, { elementKey: `desktop-nav-menu.${index}.sub-items.${idx}.sub-item-link`, "data-levo_group_item": true, className: "group hover:bg-opacity-50", style: subItem?.["sub-item-description"]
-                            ? {
-                                alignItems: "flex-start",
-                            }
-                            : {}, children: [subItem?.["sub-item-icon"] && (_jsx(Box, { elementKey: `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: `desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon` }) })), _jsxs(Box, { elementKey: `desktop-nav-menu.${index}.sub-items.${idx}.sub-item-text-container`, children: [_jsx(Heading, { elementKey: `desktop-nav-menu.${index}.sub-items.${idx}.sub-item-title` }), _jsx(Typography, { elementKey: `desktop-nav-menu.${index}.sub-items.${idx}.sub-item-description` })] })] }, `subItem_${index}_${idx}`)))
-                    : null })] }));
-};
-const DesktopNavItem = ({ index, navItem }) => {
-    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 })), !isNavItemDropdown && (_jsx(Heading, { "data-levo_group_item": true, elementKey: `desktop-nav-menu.${index}.nav-item-title` }))] }));
-};
-const DesktopNavigationMenu = ({ navItems }) => {
-    return (_jsx(Box, { elementKey: "desktop-nav-menu_levoGroup", "data-levo_group": true, children: navItems?.map((item, index) => {
-            return (_jsx(DesktopNavItem, { navItem: item, index: index }, `desktop-nav-menu.${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 Navbar1 = ({ 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 desktopNavLinks = content?.["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", style: {}, children: [_jsx(Image, { elementKey: "nav-logo", alt: "Logo" }), desktopNavLinks &&
-                            Array?.isArray(desktopNavLinks) &&
-                            desktopNavLinks?.length > 0 && (_jsx(DesktopNavigationMenu, { navItems: desktopNavLinks })), _jsx(MobileNavigationSheet, { navItems: mobileNavLinks || [], content: content, isOpen: isOpen, setIsOpen: setIsOpen }), _jsxs(Box, { elementKey: "desktop-cta-group_levoGroup", "data-levo_group": true, children: [content?.["desktop-cta-group"]?.length > 0 &&
-                                    content?.["desktop-cta-group"]?.map((_, index) => (_jsx(Button, { elementKey: `desktop-cta-group.${index}.cta`, "data-levo_group_item": true, children: content?.["desktop-cta-group"]?.[index]?.cta }, `desktop-cta-group.${index}.cta`))), _jsx(UserMenu, { elementKey: "usermenu" })] })] }) })] }));
-};
-export default Navbar1;

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

@@ -1,117 +0,0 @@
-import type { IBlock } from "@levo-so/studio";
-declare const DEFAULT_CONTENT: {
-    layout: null;
-    "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;
-        };
-    };
-    "desktop-nav-menu": ({
-        "nav-item-title": string;
-        "nav-item-dropdown-trigger"?: undefined;
-        "nav-item-dropdown-trigger-title"?: undefined;
-        "sub-items"?: undefined;
-        "nav-item-link"?: undefined;
-    } | {
-        "nav-item-dropdown-trigger": null;
-        "nav-item-dropdown-trigger-title": string;
-        "sub-items": {
-            "sub-item-link": null;
-            "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-title"?: undefined;
-        "nav-item-link"?: undefined;
-    } | {
-        "nav-item-link": {
-            href: string;
-        };
-        "nav-item-title": string;
-        "nav-item-dropdown-trigger"?: undefined;
-        "nav-item-dropdown-trigger-title"?: undefined;
-        "sub-items"?: 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-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": null;
-            "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;
-        } | {
-            "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;
-            "sub-item-link"?: undefined;
-        })[];
-        "nav-item-title-container"?: undefined;
-        "nav-item-title"?: undefined;
-    })[];
-    "mobile-cta-group": {
-        cta: string;
-    }[];
-};
-export type INavbar1Content = typeof DEFAULT_CONTENT;
-export declare const Navbar1: IBlock;
-export {};
-//# sourceMappingURL=navbar-1.schema.d.ts.map