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

package/dist/components/About.js

@@ -1,129 +0,0 @@
-"use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { cn } from "@nextworks/blocks-core";
-/**
- * Default statistics displayed if no aboutStats are provided.
- */
-const defaultStatsData = [
-    { value: "50", label: "Successful Projects", suffix: "+" },
-    { value: "5", label: "Years Experience", suffix: "+" },
-    { value: "100", label: "Happy Clients", suffix: "%" },
-    { value: "24", label: "Support Hours", suffix: "/7" },
-];
-/**
- * About section with a heading, optional subheading/content, and an optional
- * stats block.
- *
- * @remarks
- * - Styling: exposes slot-style className overrides. Consumer classes are
- *   merged after defaults via cn().
- * - Layout: control text alignment with aboutTextAlign.
- * - Accessibility: rendered as a semantic <section> with aria-label.
- *
- * @example
- * <About
- *   aboutHeadingText="Your Success Is Our Mission"
- *   aboutContentText="We build digital products that convert."
- *   aboutStats={[{ value: "50", label: "Successful Projects", suffix: "+" }]}
- * />
- */
-/**
- * About section with a heading, optional subheading/content, and an optional
- * stats block.
- *
- * @remarks
- * - Styling: exposes slot-style className overrides. Consumer classes are
- *   merged after defaults via cn().
- * - Layout: control text alignment with aboutTextAlign.
- * - Accessibility: rendered as a semantic <section> with aria-label.
- *
- * @example
- * <About
- *   aboutHeadingText="Your Success Is Our Mission"
- *   aboutContentText="We build digital products that convert."
- *   aboutStats={[{ value: "50", label: "Successful Projects", suffix: "+" }]}
- * />
- */
-/**
- * Animated count-up for integers using requestAnimationFrame.
- * Eases out and runs once when shouldStart becomes true.
- */
-function AnimatedCount({ end, shouldStart, duration = 1500, }) {
-    const [value, setValue] = React.useState(0);
-    const [done, setDone] = React.useState(false);
-    const prefersReduced = React.useMemo(() => {
-        if (typeof window === "undefined")
-            return false;
-        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    }, []);
-    React.useEffect(() => {
-        if (prefersReduced)
-            return; // show end value immediately below
-        if (!shouldStart || done)
-            return;
-        let raf;
-        const startTs = performance.now();
-        const tick = (now) => {
-            const progress = Math.min((now - startTs) / duration, 1);
-            const eased = 1 - Math.pow(1 - progress, 3);
-            const next = Math.round(eased * end);
-            setValue(next);
-            if (progress < 1) {
-                raf = requestAnimationFrame(tick);
-            }
-            else {
-                setDone(true);
-            }
-        };
-        raf = requestAnimationFrame(tick);
-        return () => cancelAnimationFrame(raf);
-    }, [shouldStart, end, duration, done, prefersReduced]);
-    if (prefersReduced)
-        return _jsx(_Fragment, { children: end });
-    return _jsx(_Fragment, { children: value });
-}
-export function About({ aboutHeadingText = "Your Success Is Our Mission", aboutSubheadingText, aboutContentText = "With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth.", aboutStats = defaultStatsData, className, section = { className: "py-20 bg-muted text-foreground" }, container = { className: "max-w-7xl mx-auto px-6" }, inner = { className: "flex flex-col gap-12" }, contentContainer = { className: "max-w-4xl mx-auto" }, contentStack = { className: "flex flex-col gap-6" }, subheading = {
-    className: "text-sm font-semibold font-poppins text-primary uppercase tracking-wider",
-}, heading = {
-    className: "text-3xl font-bold font-poppins text-foreground leading-tight",
-}, content = {
-    className: "text-lg font-inter text-foreground leading-relaxed opacity-90 max-w-3xl",
-}, statsSection = {
-    className: "bg-card p-8 rounded-xl shadow-lg mx-auto max-w-5xl w-full border border-border",
-}, statsGrid = {
-    className: "grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center",
-}, statItem = { className: "flex flex-col items-center gap-2" }, statNumber = {
-    className: "text-4xl font-bold font-poppins text-foreground leading-none",
-}, statLabel = {
-    className: "text-sm font-medium font-inter text-foreground text-center opacity-80",
-}, aboutTextAlign = "center", showStats = true, animateStats = false, ariaLabel = "About section", }) {
-    const textAlignClasses = {
-        left: "text-left",
-        right: "text-right",
-        center: "text-center",
-    };
-    const statsSectionRef = React.useRef(null);
-    const [shouldStartCount, setShouldStartCount] = React.useState(false);
-    React.useEffect(() => {
-        if (!animateStats)
-            return;
-        if (!statsSectionRef.current)
-            return;
-        const observer = new IntersectionObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    setShouldStartCount(true);
-                    observer.disconnect();
-                    break;
-                }
-            }
-        }, { threshold: 0.3 });
-        observer.observe(statsSectionRef.current);
-        return () => observer.disconnect();
-    }, [animateStats]);
-    return (_jsx("section", { className: cn(section.className, className), "aria-label": ariaLabel, children: _jsx("div", { className: cn(container.className), children: _jsxs("div", { className: cn(inner.className), children: [_jsx("div", { className: cn(contentContainer.className, textAlignClasses[aboutTextAlign]), children: _jsxs("div", { className: cn(contentStack.className), children: [aboutSubheadingText && (_jsx("div", { className: cn(subheading.className), children: aboutSubheadingText })), _jsx("h2", { className: cn(heading.className), children: aboutHeadingText }), _jsx("p", { className: cn(content.className), children: aboutContentText })] }) }), showStats && (aboutStats === null || aboutStats === void 0 ? void 0 : aboutStats.length) ? (_jsx("div", { ref: statsSectionRef, className: cn(statsSection.className), children: _jsx("div", { className: cn(statsGrid.className), children: aboutStats.map((s, i) => {
-                                var _a;
-                                return (_jsxs("div", { className: cn(statItem.className), children: [_jsxs("div", { className: cn(statNumber.className), children: [animateStats && Number.isFinite(Number(s.value)) ? (_jsx(AnimatedCount, { end: Number(s.value), shouldStart: shouldStartCount })) : (s.value), s.suffix] }), _jsx("div", { className: cn(statLabel.className), children: s.label })] }, `${(_a = s.label) !== null && _a !== void 0 ? _a : "stat"}-${i}`));
-                            }) }) })) : null] }) }) }));
-}

package/dist/components/CTA.js

@@ -1,58 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-import { Button } from "@nextworks/blocks-core";
-import { cn } from "@nextworks/blocks-core";
-/**
- * Call-to-Action section with a heading, optional subheading/description,
- * and up to two actions (primary and secondary).
- *
- * @remarks
- * - Styling: exposes slot-style className overrides (section, container,
- *   contentWrapper, headingText, subheadingText, descriptionText, actionsWrapper,
- *   ctaButtonStyle, secondaryButtonStyle). Consumer classes are merged after
- *   defaults via cn().
- * - Accessibility: rendered as a semantic <section> with aria-label. The role
- *   defaults to "region" but can be customized with the role prop.
- * - Motion: subtle hover lift effects on buttons are included by default.
- *
- * @example
- * <CTA
- *   headingText={{ text: "Join The Launch Today!" }}
- *   descriptionText={{ text: "Start your free trial in minutes." }}
- *   ctaButton={{ label: "Sign Up", href: "#contact" }}
- *   secondaryButton={{ label: "Learn More", href: "#features" }}
- * />
- */
-export function CTA({ id = "cta", className, section = {
-    className: "bg-background text-foreground",
-}, container = {
-    className: "mx-auto flex min-h-[42vh] w-full max-w-6xl flex-col items-center justify-center overflow-hidden px-4 pb-7",
-}, contentWrapper = {
-    className: "flex w-full flex-col items-center text-center",
-}, headingText = {
-    text: "Join The Launch Today!",
-    className: "text-3xl font-bold leading-[1.1] text-primary sm:text-4xl md:text-5xl text-[var(--heading-fg)]",
-}, subheadingText = {
-    text: "",
-    className: "mt-2 text-lg font-medium text-muted-foreground sm:text-xl text-[var(--subheading-fg)]",
-}, descriptionText = {
-    text: "",
-    className: "mt-3 max-w-2xl text-base text-foreground/80 sm:text-lg text-[var(--description-fg)]",
-}, actionsWrapper = {
-    className: "mt-6 flex flex-col items-center gap-3 sm:flex-row",
-}, ctaButton = { label: "Sign Up Now", href: "#contact" }, ctaButtonStyle = {
-    variant: "default",
-    size: "default",
-    className: "shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
-}, ctaButtonWrapper = { className: "" }, secondaryButton = null, secondaryButtonStyle = {
-    variant: "outline",
-    size: "default",
-    className: "transition-transform duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
-}, secondaryButtonWrapper = { className: "" }, spacing = { topMargin: "mt-0 sm:mt-12" }, 
-// spacing = { topMargin: "mt-[17vh]" },
-ariaLabel = "Call to action section", role = "region", }) {
-    // default class for actions wrapper (keeps a gap and responsive row layout)
-    const actionsWrapperDefault = "mt-6 flex flex-col items-center gap-3 sm:flex-row";
-    return (_jsx("section", { id: id, role: role, "aria-label": ariaLabel, className: cn("w-full", section.className, className), children: _jsx("div", { className: cn(container.className), children: _jsxs("div", { className: cn(contentWrapper.className), children: [(headingText === null || headingText === void 0 ? void 0 : headingText.text) ? (_jsx("h2", { className: cn("text-center", spacing === null || spacing === void 0 ? void 0 : spacing.topMargin, headingText.className), children: headingText.text })) : null, (subheadingText === null || subheadingText === void 0 ? void 0 : subheadingText.text) ? (_jsx("p", { className: cn(subheadingText.className), children: subheadingText.text })) : null, (descriptionText === null || descriptionText === void 0 ? void 0 : descriptionText.text) ? (_jsx("p", { className: cn(descriptionText.className), children: descriptionText.text })) : null, _jsxs("div", { className: cn(actionsWrapperDefault, actionsWrapper.className), children: [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 }) })), secondaryButton && (_jsx(Button, { asChild: true, unstyled: secondaryButtonStyle.unstyled, variant: secondaryButtonStyle.variant, size: secondaryButtonStyle.size, className: cn(secondaryButtonWrapper.className, secondaryButtonStyle.className), style: secondaryButtonStyle.style, children: _jsx(Link, { href: secondaryButton.href, "aria-label": secondaryButton.label, children: secondaryButton.label }) }))] })] }) }) }));
-}

package/dist/components/Contact.js

@@ -1,82 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@nextworks/blocks-core";
-import { Button, Input, Textarea, Label } from "@nextworks/blocks-core";
-const defaultFormData = [
-    {
-        id: "name",
-        label: "Your Full Name",
-        placeholder: "John Doe",
-        required: true,
-        type: "text",
-    },
-    {
-        id: "email",
-        label: "Email Address",
-        placeholder: "you@example.com",
-        required: true,
-        type: "email",
-    },
-    {
-        id: "phone",
-        label: "Phone Number",
-        placeholder: "Enter your phone number",
-        required: false,
-        type: "tel",
-    },
-    {
-        id: "company",
-        label: "Company",
-        placeholder: "Enter your company name",
-        required: false,
-        type: "text",
-    },
-    {
-        id: "message",
-        label: "Message",
-        placeholder: "Tell us about your project...",
-        required: true,
-        type: "textarea",
-    },
-];
-/**
- * Contact section with a configurable form and submit action.
- *
- * @remarks
- * - Styling: slot-style className overrides are merged via cn().
- * - Behavior: onSubmit is invoked with the form event after calling
- *   preventDefault().
- * - Motion: enableMotion toggles the button hover lift/transition.
- * - Accessibility: Uses a semantic <section> with aria-label.
- *
- * @example
- * <Contact onSubmit={(e) => { // send to your API }} />
- */
-export function Contact({ fields = defaultFormData, contactHeaderText = "Ready to Grow Your Business?", contactSubHeaderText = "Schedule a free consultation with our experts.", id = "contact", className, section = { className: "py-16 px-4 bg-primary" }, container = { className: "mx-auto max-w-4xl" }, headerWrapper = { className: "mb-8 text-center" }, headerText = {
-    className: "text-2xl font-bold font-poppins text-primary-foreground",
-}, subheaderText = {
-    className: "mt-2 text-lg font-inter text-primary-foreground px-4 md:px-14",
-}, form = {
-    className: "bg-card p-8 rounded-lg shadow-md border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
-}, fieldsWrapper = { className: "space-y-4" }, field = { className: "space-y-2" }, label = {
-    className: "text-card-foreground text-sm font-medium font-poppins block text-[var(--label-fg)]",
-}, input = {
-    className: "w-full p-3 border border-input rounded-md bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
-}, textarea = {
-    className: "w-full p-3 border border-input rounded-md bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
-}, submitButtonWrapper = { className: "pt-2" }, submitButtonStyle = {
-    variant: "default",
-    size: "lg",
-    className: "w-full shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
-}, submitButtonText = "Schedule Free Consultation", onSubmit, ariaLabel = "Contact section", enableMotion = true, }) {
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
-    };
-    return (_jsx("section", { id: id, className: cn("w-full", section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(container.className), children: [_jsxs("div", { className: cn(headerWrapper.className), children: [contactHeaderText && (_jsx("h2", { className: cn(headerText.className), children: contactHeaderText })), contactSubHeaderText && (_jsx("p", { className: cn(subheaderText.className), children: contactSubHeaderText }))] }), _jsx("form", { onSubmit: handleSubmit, className: cn(form.className), children: _jsxs("div", { className: cn(fieldsWrapper.className), children: [fields.map((f) => {
-                                var _a;
-                                const isTextarea = f.type === "textarea";
-                                return (_jsxs("div", { className: cn(field.className), children: [_jsxs(Label, { htmlFor: f.id, className: cn(label.className), children: [f.label, f.required && (_jsx("span", { className: "text-destructive ml-1", children: "*" }))] }), isTextarea ? (_jsx(Textarea, { id: f.id, name: f.id, placeholder: f.placeholder, required: f.required, rows: 4, className: cn(textarea.className) })) : (_jsx(Input, { type: (_a = f.type) !== null && _a !== void 0 ? _a : "text", id: f.id, name: f.id, placeholder: f.placeholder, required: f.required, className: cn(input.className) }))] }, f.id));
-                            }), _jsx("div", { className: cn(submitButtonWrapper.className), children: _jsx(Button, { type: "submit", unstyled: submitButtonStyle.unstyled, variant: submitButtonStyle.variant, size: submitButtonStyle.size, className: cn(submitButtonStyle.className, !enableMotion &&
-                                        "transition-none hover:!translate-y-0 hover:shadow-none"), style: submitButtonStyle.style, children: submitButtonText }) })] }) })] }) }));
-}

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