@nextworks/blocks-sections 0.1.0-alpha.8 → 0.2.0-alpha.2

package/dist/components/FAQ.js

@@ -1,78 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { cn } from "@nextworks/blocks-core";
-import { ChevronDown, ChevronUp } from "lucide-react";
-// const defaultFaqData: FAQS[] = [
-//   {
-//     question: "What does IntelliOpAI do?",
-//     answer: "Automates ops with real-time insights.",
-//   },
-//   {
-//     question: "Do I need coding skills?",
-//     answer: "No, it's designed for ease of use.",
-//   },
-// ];
-const defaultFaqData = [
-    {
-        question: "What does IntelliOpAI do?",
-        answer: "Automates ops with real-time insights.",
-    },
-    {
-        question: "How secure is my data?",
-        answer: "We use industry-standard encryption and strict access controls.",
-    },
-    {
-        question: "Can I integrate with other tools?",
-        answer: "Yes — supports APIs and popular integrations like Slack, GitHub, and Jira.",
-    },
-    {
-        question: "How do I get support?",
-        answer: "Contact our support team via in-app chat or the help center for assistance.",
-    },
-];
-/**
- * Expandable FAQ section with accessible toggles and optional icons.
- *
- * @remarks
- * - Supports multiple or single open item behavior via allowMultipleOpen.
- * - Uses button with aria-expanded and a region with aria-labelledby.
- * - Motion can be disabled via enableMotion for reduced animation.
- *
- * @example
- * <FAQ faqData={[{ question: 'What is X?', answer: 'Y' }]} />
- */
-export function FAQ({ faqSectionHeaderText = "Frequently Asked Questions", faqData = defaultFaqData, sectionId = "faq", className, allowMultipleOpen = true, defaultOpenIndices = [], openIcon, closedIcon, ariaLabel = "Frequently asked questions section", section = { className: "py-10 px-5 bg-muted text-foreground" }, container = { className: "mx-auto max-w-7xl" }, heading = {
-    className: "mb-6 text-center text-2xl font-bold text-foreground",
-}, grid = { className: "grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6" }, item = { className: "mb-4" }, questionButton = {
-    className: "shadow-md hover:shadow-lg border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)] bg-[var(--faq-btn-bg,var(--btn-bg))] text-[var(--faq-btn-fg,var(--btn-fg))] hover:bg-[var(--faq-btn-hover-bg,var(--btn-hover-bg))] hover:text-[var(--faq-btn-hover-fg,var(--btn-hover-fg))]",
-}, questionText = { className: "" }, chevronIcon = { className: "transition-transform duration-200" }, answer = {
-    className: "bg-[var(--faq-answer-bg,var(--card-bg))] text-[var(--faq-answer-fg,var(--card-fg))] border-[var(--card-border)]",
-}, answerText = { className: "leading-relaxed" }, enableMotion = true, }) {
-    const [openSet, setOpenSet] = useState(() => new Set(defaultOpenIndices));
-    const idPrefix = useMemo(() => sectionId || "faq", [sectionId]);
-    const onToggle = (idx) => {
-        setOpenSet((prev) => {
-            const next = new Set(prev);
-            if (next.has(idx))
-                next.delete(idx);
-            else {
-                if (!allowMultipleOpen)
-                    next.clear();
-                next.add(idx);
-            }
-            return next;
-        });
-    };
-    return (_jsx("section", { id: sectionId, className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(container.className), children: [faqSectionHeaderText && (_jsx("h2", { className: cn(heading.className), children: faqSectionHeaderText })), _jsx("div", { className: cn(grid.className), children: faqData.map((faq, index) => {
-                        const transitionCls = enableMotion
-                            ? "transition-all duration-300 ease-in-out"
-                            : "transition-none";
-                        const isOpen = openSet.has(index);
-                        return (_jsxs("div", { className: cn("w-full", item.className), children: [_jsxs("button", { id: `${idPrefix}-trigger-${index}`, "aria-controls": `${idPrefix}-panel-${index}`, "aria-expanded": isOpen, onClick: () => onToggle(index), className: cn("flex w-full items-center justify-between rounded-md p-4 text-left focus:outline-none", 
-                                    // preset-first ring/border
-                                    "border-[var(--btn-border)] focus-visible:ring-2 focus-visible:ring-[var(--btn-ring)] focus-visible:ring-offset-2", questionButton.className), children: [_jsx("span", { className: cn("flex-1 font-medium select-none", questionText.className), children: faq.question }), _jsx("span", { className: cn("ml-3 flex-shrink-0", chevronIcon.className), children: isOpen
-                                                ? (openIcon !== null && openIcon !== void 0 ? openIcon : _jsx(ChevronUp, { className: "h-5 w-5" }))
-                                                : (closedIcon !== null && closedIcon !== void 0 ? closedIcon : _jsx(ChevronDown, { className: "h-5 w-5" })) })] }), _jsx("div", { id: `${idPrefix}-panel-${index}`, role: "region", "aria-labelledby": `${idPrefix}-trigger-${index}`, className: cn("border-border overflow-hidden rounded-md border", isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0", transitionCls, answer.className), children: _jsx("div", { className: cn("p-4", answerText.className), children: faq.answer }) })] }, `${idPrefix}-item-${index}`));
-                    }) })] }) }));
-}

package/dist/components/Features.js

@@ -1,109 +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 { FeatureCard } from "@nextworks/blocks-core";
-const defaultFeaturesData = [
-    {
-        imageSrc: "/feature_1.png",
-        imageAlt: "Advanced Analytics Dashboard",
-        headingText: "Advanced Analytics",
-        subheadingText: "Get deep insights into your business performance with our comprehensive analytics dashboard that tracks key metrics and provides actionable recommendations.",
-    },
-    {
-        imageSrc: "/feature_2.png",
-        imageAlt: "Real-time Collaboration Tools",
-        headingText: "Real-time Collaboration",
-        subheadingText: "Work seamlessly with your team using our real-time collaboration tools that keep everyone in sync and boost productivity across all projects.",
-    },
-    {
-        imageSrc: "/feature_3.png",
-        imageAlt: "Secure Data Management",
-        headingText: "Secure Data Management",
-        subheadingText: "Protect your sensitive information with enterprise-grade security features including encryption, access controls, and compliance monitoring.",
-    },
-    {
-        imageSrc: "/feature_4.png",
-        imageAlt: "Mobile-First Design",
-        headingText: "Mobile-First Design",
-        subheadingText: "Access your data and manage your workflow from anywhere with our responsive, mobile-optimized interface that works perfectly on all devices.",
-    },
-];
-/**
- * Responsive Features section that renders a heading, optional subheading,
- * and a grid of FeatureCard items with configurable entrance animations.
- *
- * @remarks
- * - Styling: slot-style className overrides are merged after defaults via cn().
- * - Motion: Controlled by enableMotion and motionConfig; animations are reduced
- *   or disabled when users prefer reduced motion.
- * - Accessibility: Uses a semantic <section> with an aria-label.
- *
- * @example
- * <Features
- *   sectionHeading="Key Features"
- *   featuresData={[{ imageSrc: "/a.png", imageAlt: "", headingText: "Fast", subheadingText: "Blazing" }]}
- * />
- */
-export function Features({ id = "features", sectionHeading = "Key Features", sectionSubheading = "Discover what makes our platform unique and powerful", featuresData = defaultFeaturesData, className, section = { className: "py-16 md:py-20 lg:py-24 bg-background" }, container = { className: "max-w-7xl mx-auto px-4 md:px-6 lg:px-8" }, header = { className: "text-center mb-12 md:mb-16" }, heading = {
-    className: "text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-4",
-}, subheading = {
-    className: "text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed",
-}, grid = {
-    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-6 md:gap-8",
-}, cardWrapper = {
-    className: "motion-reduce:transform-none motion-reduce:transition-none",
-}, card = {
-    className: "h-full bg-card border border-border rounded-lg shadow-md transition-all duration-200 hover:-translate-y-1 hover:shadow-lg overflow-hidden motion-reduce:transition-none motion-reduce:transform-none",
-}, image = {
-    className: "w-full h-48 md:h-56 object-cover transition-none hover:!scale-100 group-hover:!scale-100 [transform:none]",
-}, cardHeading = {
-    className: "text-xl md:text-2xl font-semibold text-card-foreground mb-3 leading-tight",
-}, cardSubheading = {
-    className: "text-sm md:text-base text-muted-foreground leading-relaxed",
-}, enableMotion = true, motionConfig = {
-    initial: { opacity: 0, y: 12 },
-    whileInView: { opacity: 1, y: 0 },
-    viewport: { once: true, amount: 0.2 },
-    transition: {
-        type: "tween",
-        stiffness: 0,
-        damping: 50,
-        mass: 1,
-        delay: 0.15,
-    },
-}, ariaLabel = "Features section", }) {
-    return (_jsx("section", { id: id, className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(container.className), children: [_jsxs("div", { className: cn(header.className), children: [_jsx("h2", { className: cn(heading.className), children: sectionHeading }), sectionSubheading && (_jsx("p", { className: cn(subheading.className), children: sectionSubheading }))] }), _jsx("div", { className: cn(grid.className), children: featuresData.map((feature, index) => {
-                        var _a, _b, _c;
-                        const mConfig = enableMotion
-                            ? motionConfig
-                            : {
-                                initial: { opacity: 1, y: 0 },
-                                whileInView: { opacity: 1, y: 0 },
-                                viewport: { once: true, amount: 0 },
-                                transition: {
-                                    type: "tween",
-                                    duration: 0,
-                                },
-                            };
-                        // Ensure we always spread a defined object into transition
-                        const baseTransition = ((_a = mConfig.transition) !== null && _a !== void 0 ? _a : {
-                            type: "tween",
-                            duration: 0,
-                        });
-                        const noMotionCard = "transition-none hover:!translate-y-0 hover:shadow-none motion-reduce:transition-none motion-reduce:transform-none";
-                        const noMotionImage = "transition-none hover:!scale-100 transform-none motion-reduce:transform-none group-hover:!scale-100";
-                        return (_jsx(motion.div, { initial: mConfig.initial, whileInView: mConfig.whileInView, viewport: mConfig.viewport, transition: Object.assign(Object.assign({}, baseTransition), { 
-                                // Stagger based on index while preserving provided delay if any
-                                delay: ((_c = (_b = mConfig.transition) === null || _b === void 0 ? void 0 : _b.delay) !== null && _c !== void 0 ? _c : 0.15) +
-                                    index * (enableMotion ? 0.06 : 0) }), className: cn(cardWrapper.className), children: _jsx(FeatureCard, { cardImageSrc: feature.imageSrc, cardImageAlt: feature.imageAlt, cardHeadingText: feature.headingText, cardSubheadingText: feature.subheadingText, card: {
-                                    className: cn(card.className, !enableMotion && noMotionCard),
-                                }, image: {
-                                    className: cn(image.className, !enableMotion && noMotionImage),
-                                }, 
-                                // image={{
-                                //   className: cn(image.className),
-                                // }}
-                                heading: { className: cn(cardHeading.className) }, subheading: { className: cn(cardSubheading.className) }, className: cn("h-full") }) }, index));
-                    }) })] }) }));
-}

package/dist/components/Footer.js

@@ -1,101 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Link from "next/link";
-import { cn } from "@nextworks/blocks-core";
-import { Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
-/**
- * Default navigation link groups with common footer sections
- */
-const defaultNavLinks = [
-    {
-        heading: "Product",
-        links: [
-            { name: "Features", href: "#features" },
-            { name: "Pricing", href: "#pricing" },
-            { name: "Documentation", href: "#documentation" },
-            { name: "FAQ", href: "#faq" },
-        ],
-    },
-    {
-        heading: "Company",
-        links: [
-            { name: "About", href: "#about" },
-            { name: "Careers", href: "#careers" },
-            { name: "Blog", href: "#blog" },
-            { name: "Contact", href: "#contact" },
-        ],
-    },
-    {
-        heading: "Resources",
-        links: [
-            { name: "Help Center", href: "#help" },
-            { name: "Terms of Service", href: "#terms" },
-            { name: "Privacy Policy", href: "#privacy" },
-            { name: "Status", href: "#status" },
-        ],
-    },
-];
-/**
- * Default social media links shown in the footer
- */
-const defaultSocialLinks = [
-    {
-        name: "Facebook",
-        icon: Facebook,
-        url: "https://facebook.com",
-        external: true,
-    },
-    {
-        name: "Twitter",
-        icon: Twitter,
-        url: "https://twitter.com",
-        external: true,
-    },
-    {
-        name: "Instagram",
-        icon: Instagram,
-        url: "https://instagram.com",
-        external: true,
-    },
-    {
-        name: "LinkedIn",
-        icon: Linkedin,
-        url: "https://linkedin.com",
-        external: true,
-    },
-];
-/**
- * Site footer with brand, grouped navigation links, social icons, and copyright.
- *
- * @remarks
- * - Styling: slot-style className overrides are merged after defaults via cn().
- * - Accessibility: renders a semantic <footer> with aria-label and clear link
- *   names; external links open in a new tab with rel security attributes.
- *
- * @example
- * <Footer footerBrandName="Acme" />
- */
-export function Footer({ id, footerBrandName = "Brand Name", brandNode, brandHref, footerNavLinks = defaultNavLinks, footerSocialLinks = defaultSocialLinks, className, section = {
-    className: "w-full bg-muted text-foreground bg-[var(--footer-bg)] text-[var(--footer-fg)]",
-}, container = { className: "max-w-7xl mx-auto px-6" }, brand = { className: "text-lg font-bold font-poppins text-foreground" }, brandWrapper = {
-    className: "flex flex-col items-center lg:items-start lg:pr-8",
-}, navSection = {
-    className: "flex flex-col lg:flex-row items-start justify-center gap-8 lg:gap-12 pt-6.5 pb-8",
-}, navGroup = {
-    className: "flex flex-col items-center lg:items-start text-center lg:text-left pt-1.5",
-}, navHeading = {
-    className: "font-bold font-poppins text-foreground mb-3 text-sm uppercase tracking-wider text-[var(--footer-heading-fg)]",
-}, navLink = {
-    className: "text-muted-foreground hover:text-primary transition-colors duration-200 text-sm mb-2 block font-inter text-[var(--footer-link-fg)] hover:text-[var(--footer-link-hover-fg)]",
-}, linksList = { className: "space-y-2" }, socialSection = { className: "flex items-center justify-center gap-4 py-4" }, socialLink = {
-    className: "text-muted-foreground hover:text-primary transition-colors duration-200 p-2 rounded-md hover:bg-accent text-[var(--footer-link-fg)] hover:text-[var(--footer-link-hover-fg)] hover:bg-[var(--footer-link-hover-bg)]",
-}, socialIcon = { className: "h-5 w-5" }, copyright = {
-    className: "text-center text-xs text-muted-foreground py-4 border-t border-border font-inter text-[var(--footer-muted-fg)] border-[var(--footer-border)]",
-}, copyrightYear, copyrightOverride, ariaLabel = "Footer section", }) {
-    const year = copyrightYear !== null && copyrightYear !== void 0 ? copyrightYear : new Date().getFullYear();
-    return (_jsx("footer", { id: id, className: cn("w-full", section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(container.className), children: [_jsxs("div", { className: cn(navSection.className), children: [_jsxs("div", { className: cn(brandWrapper.className), children: [brandNode, footerBrandName &&
-                                    (brandHref ? (_jsx(Link, { href: brandHref, className: cn(brand.className), "aria-label": footerBrandName, children: footerBrandName })) : (_jsx("h3", { className: cn(brand.className), children: footerBrandName })))] }), footerNavLinks.map((group) => (_jsxs("div", { className: cn(navGroup.className), children: [_jsx("h3", { className: cn(navHeading.className), children: group.heading }), _jsx("div", { className: cn(linksList.className), children: group.links.map((link) => (_jsx(Link, { href: link.href, target: link.external ? "_blank" : undefined, rel: link.external ? "noopener noreferrer" : undefined, className: cn(navLink.className), children: link.name }, link.name))) })] }, group.heading)))] }), _jsx("div", { className: cn(socialSection.className), children: footerSocialLinks.map((social) => {
-                        const IconComponent = social.icon;
-                        return (_jsx(Link, { href: social.url, target: social.external ? "_blank" : undefined, rel: social.external ? "noopener noreferrer" : undefined, "aria-label": social.label || social.name, className: cn(socialLink.className), children: _jsx(IconComponent, { className: cn(socialIcon.className) }) }, social.name));
-                    }) }), _jsx("div", { className: cn(copyright.className), children: copyrightOverride !== null && copyrightOverride !== void 0 ? copyrightOverride : (_jsxs(_Fragment, { children: ["\u00A9 ", year, " ", footerBrandName, ". All rights reserved."] })) })] }) }));
-}

package/dist/components/HeroMotion.js

@@ -1,55 +0,0 @@
-"use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-import { motion } from "motion/react";
-import { Button } from "@nextworks/blocks-core";
-import { cn } from "@nextworks/blocks-core";
-const defaultChildTransition = {
-    type: "tween",
-    duration: 0.5,
-    ease: [0.22, 1, 0.36, 1], // smooth easeOut
-};
-/**
- * Motion-first hero with heading/highlight, optional description and CTAs.
- *
- * @remarks
- * - Styling: slot-style className overrides are merged after defaults via cn().
- * - Motion: enableMotion toggles entrance transitions; motionOptions controls
- *   delays and viewport.
- * - Accessibility: semantic <section> with aria-label.
- *
- * @example
- * <HeroMotion
- *   heading="Supercharge growth with"
- *   highlight="AI-powered insights"
- *   primaryCta={{ label: 'Get Started', href: '#contact' }}
- * />
- */
-export function HeroMotion({ id, ariaLabel = "Hero section", className, heading = "Supercharge growth with", headingNode, highlight = "AI-powered insights", description = (_jsx(_Fragment, { children: "Real-time trends, accurate user signals, and smarter, data-driven decisions." })), primaryCta = { label: "Get Started" }, secondaryCta = { label: "See Demo" }, section = { className: "bg-background relative overflow-hidden" }, container = { className: "mx-auto max-w-7xl px-6 py-24 sm:py-28 lg:py-32" }, content = { className: "mx-auto max-w-3xl text-center" }, headingText = {
-    className: "transform-gpu will-change-transform text-foreground text-4xl font-semibold tracking-tight text-balance sm:text-5xl md:text-6xl",
-}, highlightText = {
-    className: "from-primary via-primary/80 to-primary/60 bg-gradient-to-r bg-clip-text text-transparent",
-}, descriptionText = {
-    className: "transform-gpu will-change-transform text-muted-foreground mt-5 text-base text-pretty sm:text-lg",
-}, actions = { className: "mt-8 flex items-center justify-center gap-3" }, primaryButtonStyle = { size: "lg", variant: "default", className: "" }, secondaryButtonStyle = { size: "lg", variant: "outline", className: "" }, enableMotion = true, motionOptions = {
-    viewport: { once: true, amount: 0.25 },
-    headingDelay: 0.5,
-    descriptionDelay: 0.58,
-    actionsDelay: 0.66,
-    transition: defaultChildTransition,
-}, backgroundNode, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const viewport = enableMotion
-        ? {
-            once: (_b = (_a = motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.viewport) === null || _a === void 0 ? void 0 : _a.once) !== null && _b !== void 0 ? _b : true,
-            amount: (_d = (_c = motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.viewport) === null || _c === void 0 ? void 0 : _c.amount) !== null && _d !== void 0 ? _d : 0.25,
-        }
-        : { once: true, amount: 0 };
-    const transition = Object.assign(Object.assign({}, defaultChildTransition), ((_e = motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.transition) !== null && _e !== void 0 ? _e : {}));
-    return (_jsxs("section", { id: id, "aria-label": ariaLabel, className: cn(section.className, className), children: [backgroundNode, _jsx("div", { className: cn(container.className), children: _jsxs(motion.div, { className: cn(content.className), children: [_jsx(motion.h1, { initial: enableMotion ? { opacity: 0, y: 12 } : { opacity: 1, y: 0 }, whileInView: { opacity: 1, y: 0 }, viewport: viewport, transition: enableMotion
-                                ? Object.assign(Object.assign({}, transition), { delay: (_f = motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.headingDelay) !== null && _f !== void 0 ? _f : 0.5 }) : { type: "tween", duration: 0 }, className: cn(headingText.className), children: headingNode ? (headingNode) : (_jsxs(_Fragment, { children: [heading, highlight ? (_jsxs("span", { className: cn(highlightText.className), children: [" ", highlight] })) : null] })) }), description ? (_jsx(motion.p, { initial: enableMotion ? { opacity: 0, y: 10 } : { opacity: 1, y: 0 }, whileInView: { opacity: 1, y: 0 }, viewport: viewport, transition: enableMotion
-                                ? Object.assign(Object.assign({}, transition), { delay: (_g = motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.descriptionDelay) !== null && _g !== void 0 ? _g : 0.58 }) : { type: "tween", duration: 0 }, className: cn(descriptionText.className), children: description })) : null, (primaryCta || secondaryCta) && (_jsxs(motion.div, { initial: enableMotion ? { opacity: 0, y: 10 } : { opacity: 1, y: 0 }, whileInView: { opacity: 1, y: 0 }, viewport: viewport, transition: enableMotion
-                                ? Object.assign(Object.assign({}, transition), { delay: (_h = motionOptions === null || motionOptions === void 0 ? void 0 : motionOptions.actionsDelay) !== null && _h !== void 0 ? _h : 0.66 }) : { type: "tween", duration: 0 }, className: cn(actions.className), children: [primaryCta &&
-                                    (primaryCta.href ? (_jsx(Button, { asChild: true, unstyled: primaryButtonStyle.unstyled, variant: primaryButtonStyle.variant, size: primaryButtonStyle.size, className: cn(primaryButtonStyle.className), style: primaryButtonStyle.style, children: _jsx(Link, { href: primaryCta.href, "aria-label": primaryCta.label, children: primaryCta.label }) })) : (_jsx(Button, { variant: primaryButtonStyle.variant, size: primaryButtonStyle.size, className: cn(primaryButtonStyle.className), unstyled: primaryButtonStyle.unstyled, style: primaryButtonStyle.style, "aria-label": primaryCta.label, children: primaryCta.label }))), secondaryCta &&
-                                    (secondaryCta.href ? (_jsx(Button, { asChild: true, unstyled: secondaryButtonStyle.unstyled, variant: secondaryButtonStyle.variant, size: secondaryButtonStyle.size, className: cn(secondaryButtonStyle.className), style: secondaryButtonStyle.style, children: _jsx(Link, { href: secondaryCta.href, "aria-label": secondaryCta.label, children: secondaryCta.label }) })) : (_jsx(Button, { variant: secondaryButtonStyle.variant, size: secondaryButtonStyle.size, className: cn(secondaryButtonStyle.className), unstyled: secondaryButtonStyle.unstyled, style: secondaryButtonStyle.style, "aria-label": secondaryCta.label, children: secondaryCta.label })))] }))] }) })] }));
-}

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 })) })] }) }));
-}