@nextworks/blocks-sections 0.1.0-alpha.11 → 0.1.0-alpha.14

package/dist/components/HeroOverlay.js

@@ -1,111 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from "next/image";
-import Link from "next/link";
-import { Button } from "@nextworks/blocks-core";
-import { cn } from "@nextworks/blocks-core";
-/**
- * Full-bleed image hero with color overlay, heading/subheading, and up to two CTAs.
- *
- * @remarks
- * - Styling: slot-style overrides for container, imageContainer, overlay, content, textContainer.
- * - Motion: enableMotion applies hover-lift transitions to CTA buttons only.
- * - Accessibility: uses semantic <section> with aria-label; background image is
- *   decorative with overlay and text content provided separately.
- *
- * @example
- * <HeroOverlay
- *   image={{ src: "/hero.png", alt: "" }}
- *   heading="Welcome"
- *   subheading="Build faster with our blocks"
- *   cta1={{ label: "Get Started", href: "#getstarted" }}
- * />
- */
-export function HeroOverlay({ id, className, 
-// Deprecated flat image defaults (still supported)
-imageSrc = "/hero.png", imageAlt = "Hero background image", imageObjectFit = "cover", imageObjectPosition = "center", 
-// New structured image (optional)
-image, 
-// Keep string defaults; object form supported
-heading = "Lorem ipsum dolor sit amet, consectetur", subheading = "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", overlayRGBA = "rgba(255, 255, 255, 0.8)", overlayDarkRGBA = "rgba(0, 0, 0, 0.8)", 
-// Deprecated CTA label/href (still supported)
-ctaBtn1Label = "Get Started", ctaBtn1Href = "#getstarted", ctaBtn2Label, ctaBtn2Href, 
-// Layout containers
-container = { className: "relative h-[440px] md:h-[500px] w-full" }, 
-// container = { className: "relative h-[500px] md:h-[600px] w-full" },
-section, imageContainer = { className: "absolute inset-0" }, overlay = { className: "absolute inset-0 z-10 pointer-events-none" }, content = {
-    className: "relative z-20 h-full w-full flex flex-col justify-start items-center pt-14 pb-8 px-8",
-}, textContainer = { className: "max-w-4xl space-y-6 text-center" }, 
-// Typography defaults (deprecated props still merged)
-headingStyle = { className: "" }, subheadingStyle = { className: "" }, 
-// CTA containers and variants
-ctaContainer = {
-    className: "flex flex-col sm:flex-row gap-4 mt-6 justify-center items-center",
-}, cta1, cta2, ariaLabel = "Hero section", enableMotion = true, }) {
-    var _a, _b, _c, _d, _e, _f;
-    // Merge new structured image with deprecated flat props
-    const effImage = {
-        src: (_a = image === null || image === void 0 ? void 0 : image.src) !== null && _a !== void 0 ? _a : imageSrc,
-        alt: (_b = image === null || image === void 0 ? void 0 : image.alt) !== null && _b !== void 0 ? _b : imageAlt,
-        objectFit: (_c = image === null || image === void 0 ? void 0 : image.objectFit) !== null && _c !== void 0 ? _c : imageObjectFit,
-        objectPosition: (_d = image === null || image === void 0 ? void 0 : image.objectPosition) !== null && _d !== void 0 ? _d : imageObjectPosition,
-        className: image === null || image === void 0 ? void 0 : image.className,
-    };
-    // Defaults and normalization like HeroSplit
-    const defaultHeading = {
-        text: "Lorem ipsum dolor sit amet, consectetur",
-        className: "text-4xl md:text-5xl font-bold text-center leading-tight text-foreground",
-    };
-    const defaultSubheading = {
-        text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
-        className: "text-xl md:text-2xl text-center text-foreground leading-relaxed",
-    };
-    const normalizedHeading = typeof heading === "string"
-        ? {
-            text: heading,
-            className: cn(defaultHeading.className, headingStyle === null || headingStyle === void 0 ? void 0 : headingStyle.className),
-        }
-        : {
-            text: (_e = heading === null || heading === void 0 ? void 0 : heading.text) !== null && _e !== void 0 ? _e : defaultHeading.text,
-            className: cn(defaultHeading.className, headingStyle === null || headingStyle === void 0 ? void 0 : headingStyle.className, heading === null || heading === void 0 ? void 0 : heading.className),
-        };
-    const normalizedSubheading = typeof subheading === "string"
-        ? {
-            text: subheading,
-            className: cn(defaultSubheading.className, subheadingStyle === null || subheadingStyle === void 0 ? void 0 : subheadingStyle.className),
-        }
-        : {
-            text: (_f = subheading === null || subheading === void 0 ? void 0 : subheading.text) !== null && _f !== void 0 ? _f : defaultSubheading.text,
-            className: cn(defaultSubheading.className, subheadingStyle === null || subheadingStyle === void 0 ? void 0 : subheadingStyle.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
-        };
-    // Motion class for CTA buttons
-    const buttonLift = enableMotion
-        ? "transition-all duration-200 hover:-translate-y-0.5"
-        : "transition-none hover:!translate-y-0";
-    // CTA defaults and normalization (merge, don't replace).
-    const defaultCta1 = {
-        label: ctaBtn1Label,
-        href: ctaBtn1Href,
-        variant: "default",
-        size: "lg",
-        className: "",
-    };
-    const defaultCta2 = {
-        label: ctaBtn2Label,
-        href: ctaBtn2Href,
-        variant: "outline",
-        size: "lg",
-        className: "",
-    };
-    const mergedCta1 = Object.assign(Object.assign(Object.assign({}, defaultCta1), (cta1 !== null && cta1 !== void 0 ? cta1 : {})), { className: cn(defaultCta1.className, cta1 === null || cta1 === void 0 ? void 0 : cta1.className, buttonLift) });
-    const mergedCta2 = cta2 || ctaBtn2Label || ctaBtn2Href
-        ? Object.assign(Object.assign(Object.assign({}, defaultCta2), (cta2 !== null && cta2 !== void 0 ? cta2 : {})), { className: cn(defaultCta2.className, cta2 === null || cta2 === void 0 ? void 0 : cta2.className, buttonLift) }) : undefined;
-    // buttonLift defined above
-    // Merge alias section.className with container.className
-    const finalContainerClass = cn(container.className, section === null || section === void 0 ? void 0 : section.className);
-    const showCta2 = !!(mergedCta2 === null || mergedCta2 === void 0 ? void 0 : mergedCta2.label);
-    return (_jsxs("section", { id: id, className: cn(finalContainerClass, className), "aria-label": ariaLabel, children: [_jsx("div", { className: imageContainer.className, children: _jsx(Image, { src: effImage.src, alt: effImage.alt, fill: true, sizes: "100vw", quality: 75, priority: true, className: effImage.className, style: {
-                        objectFit: effImage.objectFit,
-                        objectPosition: effImage.objectPosition,
-                    } }) }), _jsx("div", { className: overlay.className, style: { backgroundColor: overlayRGBA }, "aria-hidden": true }), _jsx("div", { className: cn(overlay.className, "hidden dark:block"), style: { backgroundColor: overlayDarkRGBA }, "aria-hidden": true }), _jsx("div", { className: content.className, children: _jsxs("div", { className: textContainer.className, children: [_jsx("h1", { className: normalizedHeading.className, children: normalizedHeading.text }), _jsx("p", { className: normalizedSubheading.className, children: normalizedSubheading.text }), _jsxs("div", { className: ctaContainer.className, children: [mergedCta1.label && (_jsx(Button, { asChild: true, variant: mergedCta1.variant, size: mergedCta1.size, className: mergedCta1.className, unstyled: mergedCta1.unstyled, style: mergedCta1.style, children: _jsx(Link, { href: mergedCta1.href || "#", "aria-label": mergedCta1.label, children: mergedCta1.label }) })), showCta2 && (_jsx(Button, { asChild: true, variant: mergedCta2.variant, size: mergedCta2.size, className: mergedCta2.className, unstyled: mergedCta2.unstyled, style: mergedCta2.style, children: _jsx(Link, { href: mergedCta2.href || "#", "aria-label": mergedCta2.label, children: mergedCta2.label }) }))] })] }) })] }));
-}

package/dist/components/HeroSplit.js

@@ -1,100 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from "next/image";
-import Link from "next/link";
-import { Button } from "@nextworks/blocks-core";
-import { cn } from "@nextworks/blocks-core";
-/**
- * Split hero with text on one side and an image on the other.
- *
- * @remarks
- * - Text props accept string or object forms to easily override classes.
- * - Full-bleed layout absolutely positions the image on larger screens.
- * - Motion only affects the subtle hover lift on CTA buttons.
- *
- * @example
- * <HeroSplit heading="Build faster" subheading="Launch confidently" />
- */
-export function HeroSplit({ id, className, heading, subheading, section, cta1, cta2, image = {
-    src: "/placeholders/gallery/hero-pexels-broken-9945014.avif",
-    alt: "Hero image",
-    className: "object-contain",
-}, imageContainer, textContainer = { className: "flex-1 p-5" }, buttonsContainer = { className: "flex flex-col md:flex-row gap-4 mt-6" }, textAlign = "center", fallback, ariaLabel = "Hero section", enableMotion = true, imageLayout = "full-bleed", }) {
-    var _a, _b;
-    const lgTextAlignClasses = {
-        left: "lg:text-left",
-        right: "lg:text-right",
-        center: "lg:text-center",
-    };
-    const lgItemsAlignClasses = {
-        left: "lg:items-start",
-        right: "lg:items-end",
-        center: "lg:items-center",
-    };
-    const lgJustifyAlignClasses = {
-        left: "lg:justify-start",
-        right: "lg:justify-end",
-        center: "lg:justify-center",
-    };
-    const buttonLift = enableMotion
-        ? "transition-all duration-200 hover:-translate-y-0.5"
-        : "transition-none hover:!translate-y-0";
-    // Defaults for text props (normalized below)
-    const defaultHeading = {
-        text: "Lorem ipsum dolor sit amet",
-        className: "text-3xl md:text-4xl font-bold leading-tight text-foreground",
-    };
-    const defaultSubheading = {
-        text: "Consectetur adipiscing elit, sed do eiusmod tempor.",
-        className: "text-lg md:text-xl text-foreground mt-4 mb-6",
-    };
-    const normalizedHeading = typeof heading === "string"
-        ? { text: heading, className: defaultHeading.className }
-        : {
-            text: (_a = heading === null || heading === void 0 ? void 0 : heading.text) !== null && _a !== void 0 ? _a : defaultHeading.text,
-            className: cn(defaultHeading.className, heading === null || heading === void 0 ? void 0 : heading.className),
-        };
-    const normalizedSubheading = typeof subheading === "string"
-        ? { text: subheading, className: defaultSubheading.className }
-        : {
-            text: (_b = subheading === null || subheading === void 0 ? void 0 : subheading.text) !== null && _b !== void 0 ? _b : defaultSubheading.text,
-            className: cn(defaultSubheading.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
-        };
-    // CTA defaults and normalization (merge, don't replace)
-    const defaultCta1 = {
-        label: "Get Started",
-        href: "#contact",
-        variant: "default",
-        size: "default",
-        className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-    };
-    const mergedCta1 = Object.assign(Object.assign(Object.assign({}, defaultCta1), (cta1 !== null && cta1 !== void 0 ? cta1 : {})), { className: cn(defaultCta1.className, cta1 === null || cta1 === void 0 ? void 0 : cta1.className, buttonLift) });
-    const defaultCta2 = {
-        label: "Learn More",
-        href: "#",
-        variant: "outline",
-        size: "default",
-        className: "",
-    };
-    const mergedCta2 = cta2
-        ? Object.assign(Object.assign(Object.assign({}, defaultCta2), cta2), { className: cn(defaultCta2.className, cta2.className, buttonLift) }) : undefined;
-    const defaultSectionPadded = cn("px-8 pt-8 pb-8 md:min-h-[60vh] lg:min-h-[70vh]");
-    const defaultSectionFull = cn("relative overflow-hidden pt-0 pb-0 md:min-h-[60vh] lg:min-h-[70vh]");
-    const defaultImageContainerPadded = cn("relative mb-4 h-48 min-h-[12rem] w-full md:mb-0 md:h-72 md:w-1/2");
-    // For full-bleed: absolute positioning on large screens to break out completely
-    const defaultImageContainerFull = cn("relative h-48 w-full md:absolute md:inset-y-0 md:right-0 md:h-full md:w-1/2");
-    const baseSectionClass = imageLayout === "full-bleed" ? defaultSectionFull : defaultSectionPadded;
-    const finalSectionClass = cn(baseSectionClass, section === null || section === void 0 ? void 0 : section.className);
-    const baseImageContainerClass = imageLayout === "full-bleed"
-        ? defaultImageContainerFull
-        : defaultImageContainerPadded;
-    const finalImageContainerClass = cn(baseImageContainerClass, imageContainer === null || imageContainer === void 0 ? void 0 : imageContainer.className);
-    // -- This overrides the image.className that is passed from importing components ... devs should be able to decide on cover/contain from the importing component.
-    const finalImageClass = cn(image === null || image === void 0 ? void 0 : image.className, imageLayout === "full-bleed"
-        ? "object-cover object-center md:object-right"
-        : "object-contain object-center");
-    return (_jsx("section", { id: id, className: cn(finalSectionClass, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn("flex flex-col items-stretch", imageLayout === "full-bleed"
-                ? "md:block"
-                : "md:flex-row md:items-start"), children: [_jsx("div", { className: cn("w-full", imageLayout === "full-bleed" &&
-                        "relative z-10 md:w-1/2 md:px-8 md:py-12", textContainer.className), children: _jsxs("div", { className: cn("flex flex-col items-center", lgItemsAlignClasses[textAlign]), children: [_jsx("h1", { className: cn("text-center", lgTextAlignClasses[textAlign], normalizedHeading.className), children: normalizedHeading.text }), _jsx("p", { className: cn("text-center", lgTextAlignClasses[textAlign], normalizedSubheading.className), children: normalizedSubheading.text }), _jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 sm:flex-row", lgJustifyAlignClasses[textAlign], lgItemsAlignClasses[textAlign], buttonsContainer.className), children: [mergedCta1.label && (_jsx(Button, { asChild: true, variant: mergedCta1.variant, size: mergedCta1.size, className: mergedCta1.className, unstyled: mergedCta1.unstyled, style: mergedCta1.style, children: _jsx(Link, { href: mergedCta1.href || "#", "aria-label": mergedCta1.label, children: mergedCta1.label }) })), (mergedCta2 === null || mergedCta2 === void 0 ? void 0 : mergedCta2.label) && (_jsx(Button, { asChild: true, variant: mergedCta2.variant, size: mergedCta2.size, className: mergedCta2.className, unstyled: mergedCta2.unstyled, style: mergedCta2.style, children: _jsx(Link, { href: mergedCta2.href || "#", "aria-label": mergedCta2.label, children: mergedCta2.label }) }))] })] }) }), _jsx("div", { className: cn(finalImageContainerClass), children: (image === null || image === void 0 ? void 0 : image.src) ? (_jsx(Image, { priority: true, fetchPriority: "high", src: image.src, alt: image.alt || "Hero image", className: finalImageClass, fill: true, sizes: "(min-width: 768px) 50vw, 100vw", quality: 75 })) : (_jsx("div", { className: "absolute inset-0", children: fallback || null })) })] }) }));
-}

package/dist/components/Navbar.js

@@ -1,80 +0,0 @@
-// components/sections/Navbar.tsx
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import Link from "next/link";
-import { Button } from "@nextworks/blocks-core";
-import { ThemeToggle } from "@nextworks/blocks-core";
-import { cn } from "@nextworks/blocks-core";
-import { Menu, X } from "lucide-react";
-const defaultMenuItems = [
-    { label: "Home", href: "#home" },
-    { label: "Features", href: "#features" },
-    { label: "Pricing", href: "#pricing" },
-    { label: "FAQ", href: "#faq" },
-    { label: "Contact", href: "#contact" },
-];
-/**
- * Responsive navbar with brand, menu links, color mode toggle, and optional CTA.
- *
- * @remarks
- * - Sticky behavior is enabled by default (sticky top-0 z-50).
- * - Mobile menu toggles with a button and traps body scroll while open.
- * - Accessibility: Focus rings are applied to interactive elements; aria
- *   attributes are set on the toggle button for state.
- *
- * @example
- * <Navbar brand="Acme" />
- */
-export function Navbar({ id, navHeight = "h-16", brand = "Brand Name", brandNode, menuItems = defaultMenuItems, ctaButton = { label: "Get Started", href: "#contact" }, showColorModeToggle = true, sticky = true, className, nav = {
-    className: "bg-background text-foreground border-b border-border",
-}, brandText = {
-    className: "text-2xl font-bold text-primary",
-}, links = {
-    className: "text-base font-normal text-foreground hover:text-gray-500 dark:hover-text-gray-400 transition-colors",
-}, ctaButtonStyle = {
-    variant: "default",
-    size: "default",
-    className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-}, mobileMenu = {
-    className: "border-t border-border",
-}, 
-/* new slot defaults */
-container = { className: "" }, brandWrapper = { className: "" }, desktopMenu = {
-    className: "hidden items-center space-x-1 lg:flex lg:space-x-6",
-}, toggleButton = {
-    className: "hover:bg-accent flex items-center justify-center rounded-md p-2 transition-colors",
-}, colorModeWrapper = { className: "ml-2" }, ctaButtonWrapper = { className: "ml-2" }, mobileMenuInner = { className: "space-y-2 px-4 pt-2 pb-4" }, mobileLinks = { className: "hover:bg-accent" }, themeToggle = {}, ariaLabel = "Main navigation", }) {
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-    const mobileMenuId = "navbar-mobile-menu";
-    // Measure header height for reliable max height on mobile menu
-    const headerRef = useRef(null);
-    const [headerHeightPx, setHeaderHeightPx] = useState(0);
-    useEffect(() => {
-        const update = () => { var _a, _b; return setHeaderHeightPx((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0); };
-        update();
-        window.addEventListener("resize", update);
-        return () => window.removeEventListener("resize", update);
-    }, []);
-    // Lock body scroll when mobile menu is open
-    useEffect(() => {
-        const originalOverflow = document.body.style.overflow;
-        if (isMobileMenuOpen) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = originalOverflow || "";
-        }
-        return () => {
-            document.body.style.overflow = originalOverflow || "";
-        };
-    }, [isMobileMenuOpen]);
-    return (_jsxs("nav", { id: id, className: cn("w-full", sticky && "sticky top-0 z-50", nav.className, className), "aria-label": ariaLabel, children: [_jsxs("div", { ref: headerRef, className: cn("flex items-center justify-between px-4 py-2", navHeight, container.className), children: [_jsxs("div", { className: cn("mr-2 flex items-center gap-2 pl-2", brandWrapper.className), children: [brandNode, brand && _jsx("h1", { className: cn(brandText.className), children: brand })] }), _jsx("button", { "aria-label": "Toggle mobile menu", "aria-expanded": isMobileMenuOpen, "aria-controls": mobileMenuId, className: cn("lg:hidden", toggleButton.className), 
-                        // className={cn("lg:hidden", toggleButton.className)}
-                        onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), children: isMobileMenuOpen ? (_jsx(X, { className: "h-6 w-6" })) : (_jsx(Menu, { className: "h-6 w-6" })) }), _jsxs("div", { className: cn("hidden md:flex", desktopMenu.className), children: [menuItems.map((item) => (_jsx(Link, { href: item.href, className: cn("rounded-md px-2 py-2 transition-colors duration-200 lg:px-4", "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none", "focus-visible:ring-[var(--navbar-ring)]", links.className), children: item.label }, item.label))), showColorModeToggle && (_jsx("div", { className: cn(colorModeWrapper.className), children: _jsx(ThemeToggle, Object.assign({}, themeToggle)) })), ctaButton && (_jsx(Button, { asChild: true, unstyled: ctaButtonStyle.unstyled, variant: ctaButtonStyle.variant, size: ctaButtonStyle.size, className: cn(ctaButtonWrapper.className, ctaButtonStyle.className), style: ctaButtonStyle.style, children: _jsx(Link, { href: ctaButton.href, "aria-label": ctaButton.label, children: ctaButton.label }) }))] })] }), isMobileMenuOpen && (_jsx("div", { id: mobileMenuId, className: cn("md:hidden", 
-                // "lg:hidden",
-                "overflow-y-auto overscroll-y-contain", nav.className, mobileMenu.className), style: {
-                    maxHeight: `calc(100dvh - ${headerHeightPx}px)`,
-                    WebkitOverflowScrolling: "touch",
-                }, children: _jsxs("div", { className: cn(mobileMenuInner.className), children: [menuItems.map((item) => (_jsx(Link, { href: item.href, className: cn("block w-full rounded-md px-2 py-4 text-center transition-colors duration-200", mobileLinks.className, "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none", "focus-visible:ring-[var(--navbar-ring)]", links.className), onClick: () => setIsMobileMenuOpen(false), children: item.label }, item.label))), showColorModeToggle && (_jsx("div", { className: "flex w-full justify-center pt-4", children: _jsx(ThemeToggle, Object.assign({}, themeToggle)) })), ctaButton && (_jsx("div", { className: "flex w-full justify-center pt-6", children: _jsx(Button, { asChild: true, unstyled: ctaButtonStyle.unstyled, variant: ctaButtonStyle.variant, size: ctaButtonStyle.size, className: cn("w-full max-w-xs", ctaButtonStyle.className), style: ctaButtonStyle.style, children: _jsx(Link, { href: ctaButton.href, "aria-label": ctaButton.label, children: ctaButton.label }) }) }))] }) }))] }));
-}

package/dist/components/Newsletter.js

@@ -1,34 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { cn } from "@nextworks/blocks-core";
-import { Input, Button } from "@nextworks/blocks-core";
-// Default classes used for slot merging. Consumers' slot.className will be merged after these.
-const DEFAULT_SECTION = "py-12 bg-[var(--card-bg)] text-[var(--card-fg)]";
-const DEFAULT_CONTAINER = "max-w-3xl mx-auto px-4";
-const DEFAULT_HEADER = "text-center mb-6";
-const DEFAULT_HEADING = "text-2xl font-bold font-poppins text-foreground text-[var(--heading-fg)]";
-const DEFAULT_SUBHEADING = "text-sm font-inter text-muted-foreground max-w-xl mx-auto leading-relaxed text-[var(--subheading-fg)]";
-const DEFAULT_FORM = "w-full";
-const DEFAULT_FORM_ROW = "mt-6 flex flex-col sm:flex-row items-center gap-3 justify-center";
-const DEFAULT_INPUT = "w-full sm:flex-1 p-3 rounded-md border border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)]";
-const DEFAULT_BUTTON = "w-full sm:w-auto px-5 py-3 rounded-md bg-primary hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary text-primary-foreground font-medium shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]";
-/**
- * Compact newsletter/signup block.
- *
- * Usage:
- * <Newsletter section={{ className: "bg-gradient-to-r ..." }} />
- *
- * Slots exposed: section, container, header, heading, subheading, form, formRow, input, button
- */
-export function Newsletter({ id, className, headingText = "Stay in the loop", subheadingText = "Subscribe for product news, tips, and updates.", onSubmit, section, container, header, heading, subheading, form, formRow, input, button, enableMotion = true, ariaLabel = "Newsletter signup section", }) {
-    const [email, setEmail] = React.useState("");
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e, email);
-        // Optimistic clear; consumer can override behavior via onSubmit
-        setEmail("");
-    };
-    return (_jsx("section", { id: id, className: cn(DEFAULT_SECTION, section === null || section === void 0 ? void 0 : section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(DEFAULT_CONTAINER, container === null || container === void 0 ? void 0 : container.className), children: [_jsxs("div", { className: cn(DEFAULT_HEADER, header === null || header === void 0 ? void 0 : header.className), children: [_jsx("h2", { className: cn(DEFAULT_HEADING, heading === null || heading === void 0 ? void 0 : heading.className), children: headingText }), _jsx("p", { className: cn(DEFAULT_SUBHEADING, subheading === null || subheading === void 0 ? void 0 : subheading.className), children: subheadingText })] }), _jsx("form", { className: cn(DEFAULT_FORM, form === null || form === void 0 ? void 0 : form.className), onSubmit: handleSubmit, "aria-label": "Newsletter signup form", children: _jsxs("div", { className: cn(DEFAULT_FORM_ROW, formRow === null || formRow === void 0 ? void 0 : formRow.className), children: [_jsx(Input, { id: "newsletter-email", name: "email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "Your email address", required: true, "aria-label": "Email address", className: cn(DEFAULT_INPUT, input === null || input === void 0 ? void 0 : input.className) }), _jsx(Button, { type: "submit", unstyled: button === null || button === void 0 ? void 0 : button.unstyled, variant: button === null || button === void 0 ? void 0 : button.variant, size: button === null || button === void 0 ? void 0 : button.size, className: cn(DEFAULT_BUTTON, button === null || button === void 0 ? void 0 : button.className, !enableMotion &&
-                                    "transition-none hover:!translate-y-0 hover:shadow-none"), children: "Subscribe" })] }) })] }) }));
-}

package/dist/components/PortfolioSimple.js

@@ -1,180 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { motion } from "motion/react";
-import { cn } from "@nextworks/blocks-core";
-import { CTAButton } from "@nextworks/blocks-core";
-import { ExternalLink, TrendingUp } from "lucide-react";
-import Image from "next/image";
-const ProjectImage = ({ project, onClick, imageContainer = {
-    className: "relative rounded-lg overflow-hidden bg-muted shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl cursor-pointer aspect-[16/10]",
-}, }) => {
-    const colorClasses = {
-        blue: "bg-blue-100 dark:bg-blue-900",
-        green: "bg-green-100 dark:bg-green-900",
-        purple: "bg-purple-100 dark:bg-purple-900",
-        red: "bg-red-100 dark:bg-red-900",
-        yellow: "bg-yellow-100 dark:bg-yellow-900",
-        indigo: "bg-indigo-100 dark:bg-indigo-900",
-    };
-    const fallbackBg = colorClasses[project.color] ||
-        colorClasses.blue;
-    return (_jsx("div", { className: imageContainer.className, onClick: onClick, children: project.image ? (_jsx(Image, { src: project.image, alt: project.title, fill: true, className: "object-cover", sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" })) : (_jsx("div", { className: `flex h-full w-full items-center justify-center ${fallbackBg}`, children: _jsxs("div", { className: "p-8 text-center", children: [_jsx("div", { className: "bg-background/20 dark:bg-foreground/20 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full", children: _jsx(ExternalLink, { className: "h-8 w-8 text-[var(--card-muted-fg)]" }) }), _jsx("h3", { className: "mb-2 text-lg font-semibold text-[var(--card-title-fg)]", children: project.title }), _jsx("p", { className: "text-sm text-[var(--card-muted-fg)]", children: project.category })] }) })) }));
-};
-const defaultProjects = [
-    {
-        id: 1,
-        title: "TechStartup Growth Campaign",
-        category: "Digital Marketing",
-        industry: "Technology",
-        result: "+300% Leads",
-        description: "Comprehensive digital marketing campaign that increased qualified leads by 300% through targeted SEO, social media marketing, and conversion optimization strategies.",
-        tags: ["SEO", "Social Media", "PPC", "Analytics"],
-        color: "blue",
-        url: "#",
-    },
-    {
-        id: 2,
-        title: "E-Commerce Brand Launch",
-        category: "Brand Marketing",
-        industry: "Retail",
-        result: "+250% Revenue",
-        description: "Complete brand launch and digital marketing strategy for a new e-commerce platform, resulting in 250% revenue growth within the first 6 months.",
-        tags: ["Brand Strategy", "Content Marketing", "Influencer", "Email"],
-        color: "green",
-        url: "#",
-    },
-    {
-        id: 3,
-        title: "Healthcare Practice Expansion",
-        category: "Local Marketing",
-        industry: "Healthcare",
-        result: "+180% Patients",
-        description: "Local SEO and digital marketing campaign that helped a healthcare practice expand to three new locations and increase patient acquisition by 180%.",
-        tags: ["Local SEO", "Google Ads", "Reputation", "Content"],
-        color: "purple",
-        url: "#",
-    },
-    {
-        id: 4,
-        title: "SaaS Product Launch",
-        category: "B2B Marketing",
-        industry: "Software",
-        result: "+400% Signups",
-        description: "Strategic B2B marketing campaign for a SaaS product launch, achieving 400% increase in trial signups through targeted content marketing and account-based marketing.",
-        tags: ["B2B Strategy", "Content", "LinkedIn Ads", "Webinars"],
-        color: "indigo",
-        url: "#",
-    },
-    {
-        id: 5,
-        title: "Restaurant Chain Rebrand",
-        category: "Brand Marketing",
-        industry: "Food & Beverage",
-        result: "+220% Foot Traffic",
-        description: "Complete rebrand and digital marketing transformation for a restaurant chain, resulting in 220% increase in foot traffic and 150% growth in online orders.",
-        tags: ["Rebranding", "Social Media", "Local SEO", "Delivery"],
-        color: "red",
-        url: "#",
-    },
-    {
-        id: 6,
-        title: "Fitness App User Acquisition",
-        category: "Mobile Marketing",
-        industry: "Health & Fitness",
-        result: "+500% Downloads",
-        description: "Mobile-first marketing campaign that achieved 500% increase in app downloads through app store optimization, influencer partnerships, and targeted social media advertising.",
-        tags: ["ASO", "Influencer", "Social Ads", "Retention"],
-        color: "yellow",
-        url: "#",
-    },
-];
-const defaultFilters = [
-    "All Projects",
-    "Digital Marketing",
-    "Brand Marketing",
-    "B2B Marketing",
-    "Local Marketing",
-    "Mobile Marketing",
-];
-/**
- * Responsive portfolio/gallery grid with simple category filtering and CTA block.
- *
- * @remarks
- * - Filtering uses exact category match; include "All Projects" to disable filtering.
- * - Accessibility: Renders a semantic <section> with aria-label; ensure images have informative titles or alt text.
- *
- * @example
- * <PortfolioSimple sectionTitle="Our Work" />
- */
-export function PortfolioSimple({ id, className, projects = defaultProjects, filters = defaultFilters, enableMotion = true, sectionTitle = "Our Recent Work", sectionSubtitle = "Take a look at some of our successful projects that have helped businesses transform their digital presence and achieve remarkable growth.", ctaTitle = "Ready to See Your Project Here?", ctaDescription = "Let's discuss how we can help transform your business with a custom digital solution.", cta1Label = "Get Free Quote", cta1Href = "#contact", cta2Label, cta2Href, section = {
-    className: "py-16 md:py-24 bg-background",
-}, container = {
-    className: "max-w-7xl mx-auto px-6",
-}, header = {
-    className: "space-y-6 text-center mb-12",
-}, title = {
-    className: "text-3xl md:text-4xl font-bold font-poppins text-foreground text-[var(--heading-fg)]",
-}, subtitle = {
-    className: "text-xl font-inter text-muted-foreground max-w-2xl mx-auto leading-relaxed text-[var(--subheading-fg)]",
-}, filterContainer = {
-    className: "flex gap-4 flex-wrap justify-center mt-8",
-}, filterButton = {
-    className: "px-6 py-2 rounded-full transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
-}, activeFilterButton = {
-    className: "px-6 py-2 rounded-full transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md bg-[var(--badge-active-bg)] text-[var(--badge-active-fg)] border-[var(--badge-active-border)]",
-}, grid = {
-    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 mt-12",
-}, projectCard = {
-    className: "group cursor-pointer transition-all duration-300",
-}, imageContainer = {
-    className: "relative rounded-lg overflow-hidden bg-muted shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl cursor-pointer aspect-[16/10]",
-}, projectInfo = {
-    className: "space-y-4 px-2 mt-4",
-}, projectTitle = {
-    className: "text-xl font-bold font-poppins transition-colors duration-200 text-[var(--card-title-fg)] group-hover:text-[var(--card-title-hover-fg)]",
-}, projectDescription = {
-    className: "text-base font-inter text-[var(--card-muted-fg)]",
-}, tagsContainer = {
-    className: "flex gap-2 flex-wrap",
-}, tagStyle = {
-    className: "px-2 py-1 text-xs border border-border rounded-full text-muted-foreground border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
-}, result = {
-    className: "font-bold text-[var(--metric-fg)] text-sm whitespace-nowrap ml-4",
-}, ctaSection = {
-    className: "space-y-6 text-center mt-16 pt-12 border-t border-border",
-}, ctaTitleStyle = {
-    className: "text-xl font-bold text-foreground text-[var(--heading-fg)]",
-}, ctaDescriptionStyle = {
-    className: "text-muted-foreground max-w-md mx-auto text-[var(--subheading-fg)]",
-}, ctaButtons = {
-    className: "flex gap-4 justify-center",
-}, cta1Button = {
-    className: "bg-primary hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/90 text-primary-foreground font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
-}, cta2Button = {
-    className: "border-primary text-primary hover:bg-primary/10 font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
-}, onProjectClick, onPrimaryCtaClick, onSecondaryCtaClick, ariaLabel = "Portfolio showcase section", }) {
-    const [activeFilter, setActiveFilter] = useState(filters[0] || "All Projects");
-    const filteredProjects = projects.filter((project) => activeFilter === "All Projects" || project.category === activeFilter);
-    return (_jsx("section", { id: id, className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [_jsxs("div", { className: header.className, children: [_jsx("h2", { className: title.className, children: sectionTitle }), _jsx("p", { className: subtitle.className, children: sectionSubtitle }), _jsx("div", { className: filterContainer.className, children: filters.map((filter) => (_jsx("button", { className: activeFilter === filter
-                                    ? activeFilterButton.className
-                                    : filterButton.className, onClick: () => setActiveFilter(filter), children: filter }, filter))) })] }), _jsx("div", { className: grid.className, children: filteredProjects.map((project, index) => (_jsx(motion.div, { initial: enableMotion ? { opacity: 0, y: 12 } : { opacity: 1, y: 0 }, whileInView: enableMotion ? { opacity: 1, y: 0 } : { opacity: 1, y: 0 }, viewport: enableMotion
-                            ? { once: true, amount: 0.2 }
-                            : { once: true, amount: 0 }, transition: enableMotion
-                            ? {
-                                type: "spring",
-                                stiffness: 125,
-                                damping: 50,
-                                mass: 1,
-                                delay: 0.1 + index * 0.05,
-                            }
-                            : { type: "tween", duration: 0 }, className: "motion-reduce:transform-none motion-reduce:transition-none", children: _jsx("div", { className: cn(projectCard.className, enableMotion
-                                ? "transition-all duration-200 hover:-translate-y-1"
-                                : "cursor-default transition-none hover:!translate-y-0 hover:shadow-none"), children: _jsxs("div", { className: "space-y-4", children: [_jsx(ProjectImage, { project: project, onClick: () => onProjectClick === null || onProjectClick === void 0 ? void 0 : onProjectClick(project), imageContainer: imageContainer }), _jsxs("div", { className: projectInfo.className, children: [_jsx("div", { className: "flex w-full items-start justify-between", children: _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("h3", { className: projectTitle.className, children: project.title }), _jsx("p", { className: projectDescription.className, children: project.description })] }) }), _jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: tagsContainer.className, children: project.tags.map((tag, index) => (_jsx("span", { className: tagStyle.className, children: tag }, index))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TrendingUp, { className: "h-4 w-4 text-[var(--metric-fg)]" }), _jsx("span", { className: result.className, children: project.result })] })] })] })] }) }) }, project.id))) }), _jsxs("div", { className: ctaSection.className, children: [_jsx("h3", { className: ctaTitleStyle.className, children: ctaTitle }), _jsx("p", { className: ctaDescriptionStyle.className, children: ctaDescription }), _jsxs("div", { className: ctaButtons.className, children: [_jsx(CTAButton, { ctaButtonLabel: cta1Label, ctaButtonHref: cta1Href, button: {
-                                        className: cta1Button.className,
-                                    }, onClick: onPrimaryCtaClick }), cta2Label && (_jsx(CTAButton, { ctaButtonLabel: cta2Label, ctaButtonHref: cta2Href, button: {
-                                        variant: "outline",
-                                        size: "lg",
-                                        className: cta2Button.className,
-                                    }, onClick: onSecondaryCtaClick }))] })] })] }) }));
-}

package/dist/components/Pricing.js

@@ -1,91 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { motion } from "motion/react";
-import { cn } from "@nextworks/blocks-core";
-import { PricingCard } from "@nextworks/blocks-core";
-/**
- * Default pricing plans used if none are passed in.
- */
-const defaultPricingData = [
-    {
-        pricingPlanHeaderText: "Basic",
-        pricingPlanPrice: "$9.99",
-        pricingPlanFeatures: ["Feature 1", "Feature 2", "Feature 3"],
-        pricingPlanCTALabel: "Select Plan",
-        pricingPlanCTAHref: "#contact",
-    },
-    {
-        pricingPlanHeaderText: "Pro",
-        pricingPlanPrice: "$19.99",
-        pricingPlanFeatures: ["Feature 1", "Feature 2", "Feature 3", "Feature 4"],
-        pricingPlanCTALabel: "Select Plan",
-        pricingPlanCTAHref: "#contact",
-    },
-    {
-        pricingPlanHeaderText: "Enterprise",
-        pricingPlanPrice: "$49.99",
-        pricingPlanFeatures: [
-            "Feature 1",
-            "Feature 2",
-            "Feature 3",
-            "Feature 4",
-            "Feature 5",
-        ],
-        pricingPlanCTALabel: "Select Plan",
-        pricingPlanCTAHref: "#contact",
-    },
-];
-/**
- * Responsive pricing grid using PricingCard with optional motion.
- *
- * @remarks
- * - Styling: exposes slot-style overrides (card, header, title, price, etc.).
- * - Motion: enableMotion controls entrance animations and hover transitions.
- * - Accessibility: semantic <section> with aria-label.
- *
- * @example
- * <Pricing pricingPlans={[{ pricingPlanHeaderText: 'Pro', pricingPlanPrice: '$19' }]} />
- */
-export function Pricing({ id, className, pricingPlans = defaultPricingData, pricingHeadingText = "Choose Your Plan", enableMotion = true, section = {
-    className: "pt-20 pb-5 bg-background text-foreground",
-}, container = {
-    className: "max-w-7xl mx-auto px-6",
-}, heading = {
-    className: "text-3xl font-bold font-poppins text-center text-foreground mb-8",
-}, grid = {
-    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8",
-}, card = {
-    className: "relative bg-card border border-border rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
-}, header = {
-    className: "p-6 text-center border-b border-[var(--card-border)]",
-}, title = {
-    className: "text-xl font-bold font-poppins text-card-foreground mb-2 text-[var(--card-title-fg)]",
-}, price = {
-    className: "text-3xl font-bold font-poppins text-card-foreground mb-4 text-[var(--card-title-fg)]",
-}, features = {
-    className: "p-6 space-y-3 font-inter",
-}, featureItem = {
-    className: "flex items-center text-muted-foreground text-sm text-[var(--card-muted-fg)]",
-}, cta = {
-    variant: "default",
-    size: "lg",
-    className: "w-full bg-primary hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/90 text-primary-foreground font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
-}, popularBadge = {
-    className: "absolute -top-3 left-1/2 transform -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
-}, ariaLabel = "Pricing section", }) {
-    return (_jsx("section", { id: id || "pricing", className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [_jsx("h2", { className: heading.className, children: pricingHeadingText }), _jsx("div", { className: grid.className, children: pricingPlans.map((plan, index) => (_jsx(motion.div, { initial: enableMotion ? { opacity: 0, y: 12 } : { opacity: 1, y: 0 }, whileInView: { opacity: 1, y: 0 }, viewport: enableMotion
-                            ? { once: true, amount: 0.2 }
-                            : { once: true, amount: 0 }, transition: enableMotion
-                            ? {
-                                type: "spring",
-                                stiffness: 125,
-                                damping: 50,
-                                mass: 1,
-                                delay: 0.12 + index * 0.06,
-                            }
-                            : { type: "tween", duration: 0 }, className: "motion-reduce:transform-none motion-reduce:transition-none", children: _jsx(PricingCard, { pricingCardTitle: plan.pricingPlanHeaderText, pricingCardPrice: plan.pricingPlanPrice, pricingCardFeatures: plan.pricingPlanFeatures, pricingCardCTALabel: plan.pricingPlanCTALabel, pricingCardCTAHref: plan.pricingPlanCTAHref, isPopular: plan.isPopular, card: {
-                                className: cn(card.className, enableMotion
-                                    ? "transition-all duration-200 hover:-translate-y-1 motion-reduce:transform-none motion-reduce:transition-none"
-                                    : "transition-none hover:!translate-y-0 hover:shadow-none"),
-                            }, header: header, title: title, price: price, features: features, featureItem: featureItem, cta: cta, popularBadge: popularBadge }) }, index))) })] }) }));
-}