@nextworks/blocks-sections 0.1.0-alpha.0

package/dist/components/Footer.js

@@ -0,0 +1,101 @@
+"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/Footer.jsx

@@ -0,0 +1,138 @@
+"use client";
+import React from "react";
+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 (<footer id={id} className={cn("w-full", section.className, className)} aria-label={ariaLabel}>
+      <div className={cn(container.className)}>
+        {/* Navigation link sections */}
+        <div className={cn(navSection.className)}>
+          {/* Brand name displayed in footer */}
+          <div className={cn(brandWrapper.className)}>
+            {brandNode}
+            {footerBrandName &&
+            (brandHref ? (<Link href={brandHref} className={cn(brand.className)} aria-label={footerBrandName}>
+                  {footerBrandName}
+                </Link>) : (<h3 className={cn(brand.className)}>{footerBrandName}</h3>))}
+          </div>
+
+          {/* Iterate over nav link groups */}
+          {footerNavLinks.map((group) => (<div key={group.heading} className={cn(navGroup.className)}>
+              <h3 className={cn(navHeading.className)}>{group.heading}</h3>
+              <div className={cn(linksList.className)}>
+                {group.links.map((link) => (<Link key={link.name} href={link.href} target={link.external ? "_blank" : undefined} rel={link.external ? "noopener noreferrer" : undefined} className={cn(navLink.className)}>
+                    {link.name}
+                  </Link>))}
+              </div>
+            </div>))}
+        </div>
+
+        {/* Social media icon links */}
+        <div className={cn(socialSection.className)}>
+          {footerSocialLinks.map((social) => {
+            const IconComponent = social.icon;
+            return (<Link key={social.name} href={social.url} target={social.external ? "_blank" : undefined} rel={social.external ? "noopener noreferrer" : undefined} aria-label={social.label || social.name} className={cn(socialLink.className)}>
+                <IconComponent className={cn(socialIcon.className)}/>
+              </Link>);
+        })}
+        </div>
+
+        {/* Copyright notice */}
+        <div className={cn(copyright.className)}>
+          {copyrightOverride !== null && copyrightOverride !== void 0 ? copyrightOverride : (<>
+              © {year} {footerBrandName}. All rights reserved.
+            </>)}
+        </div>
+      </div>
+    </footer>);
+}

package/dist/components/HeroMotion.d.ts

@@ -0,0 +1,107 @@
+import React from "react";
+import type { Transition } from "motion";
+/**
+ * Props for the HeroMotion component.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides merged via cn().
+ * - Motion: controlled by enableMotion and motionOptions; respects
+ *   prefers-reduced-motion by allowing disabling transforms.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ * - CTA: primary/secondary CTA can be links (href provided) or buttons.
+ */
+export interface HeroMotionProps {
+    /** Optional id to attach to the section root */
+    id?: string;
+    /** ARIA label for the section. @defaultValue "Hero section" */
+    ariaLabel?: string;
+    /** Optional top-level class to override the root */
+    className?: string;
+    /** Primary heading text. Ignored when headingNode is provided. */
+    heading?: string;
+    /** Custom heading node; use for advanced layouts or styling. */
+    headingNode?: React.ReactNode;
+    /** Inline highlight node rendered next to heading text. */
+    highlight?: React.ReactNode;
+    /** Optional description paragraph/node */
+    description?: React.ReactNode;
+    /** Primary call to action config or null to hide */
+    primaryCta?: {
+        label: string;
+        href?: string;
+    } | null;
+    /** Secondary call to action config or null to hide */
+    secondaryCta?: {
+        label: string;
+        href?: string;
+    } | null;
+    /** Slot-style overrides */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    content?: {
+        className?: string;
+    };
+    headingText?: {
+        className?: string;
+    };
+    highlightText?: {
+        className?: string;
+    };
+    descriptionText?: {
+        className?: string;
+    };
+    actions?: {
+        className?: string;
+    };
+    primaryButtonStyle?: {
+        unstyled?: boolean;
+        style?: React.CSSProperties;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+    };
+    secondaryButtonStyle?: {
+        unstyled?: boolean;
+        style?: React.CSSProperties;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+    };
+    /** Optional background node (e.g., SVGs, gradients, images) */
+    backgroundNode?: React.ReactNode;
+    /** When false, disables entrance animations */
+    enableMotion?: boolean;
+    /** Motion configuration for entrance sequences */
+    motionOptions?: {
+        viewport?: {
+            once?: boolean;
+            amount?: number;
+        };
+        headingDelay?: number;
+        descriptionDelay?: number;
+        actionsDelay?: number;
+        transition: Transition;
+    };
+}
+/**
+ * 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 declare function HeroMotion({ id, ariaLabel, className, heading, headingNode, highlight, description, primaryCta, secondaryCta, section, container, content, headingText, highlightText, descriptionText, actions, primaryButtonStyle, secondaryButtonStyle, enableMotion, motionOptions, backgroundNode, }: HeroMotionProps): React.JSX.Element;
+//# sourceMappingURL=HeroMotion.d.ts.map

package/dist/components/HeroMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroMotion.d.ts","sourceRoot":"","sources":["../../src/components/HeroMotion.tsx"],"names":[],"mappings":"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"}

package/dist/components/HeroMotion.js

@@ -0,0 +1,55 @@
+"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/HeroMotion.jsx

@@ -0,0 +1,95 @@
+"use client";
+import React from "react";
+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 = (<>
+      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 (<section id={id} aria-label={ariaLabel} className={cn(section.className, className)}>
+      {backgroundNode}
+      <div className={cn(container.className)}>
+        <motion.div className={cn(content.className)}>
+          <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)}>
+            {headingNode ? (headingNode) : (<>
+                {heading}
+                {highlight ? (<span className={cn(highlightText.className)}>
+                    {" "}
+                    {highlight}
+                  </span>) : null}
+              </>)}
+          </motion.h1>
+
+          {description ? (<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)}>
+              {description}
+            </motion.p>) : null}
+
+          {(primaryCta || secondaryCta) && (<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)}>
+              {primaryCta &&
+                (primaryCta.href ? (<Button asChild unstyled={primaryButtonStyle.unstyled} variant={primaryButtonStyle.variant} size={primaryButtonStyle.size} className={cn(primaryButtonStyle.className)} style={primaryButtonStyle.style}>
+                    <Link href={primaryCta.href} aria-label={primaryCta.label}>
+                      {primaryCta.label}
+                    </Link>
+                  </Button>) : (<Button variant={primaryButtonStyle.variant} size={primaryButtonStyle.size} className={cn(primaryButtonStyle.className)} unstyled={primaryButtonStyle.unstyled} style={primaryButtonStyle.style} aria-label={primaryCta.label}>
+                    {primaryCta.label}
+                  </Button>))}
+
+              {secondaryCta &&
+                (secondaryCta.href ? (<Button asChild unstyled={secondaryButtonStyle.unstyled} variant={secondaryButtonStyle.variant} size={secondaryButtonStyle.size} className={cn(secondaryButtonStyle.className)} style={secondaryButtonStyle.style}>
+                    <Link href={secondaryCta.href} aria-label={secondaryCta.label}>
+                      {secondaryCta.label}
+                    </Link>
+                  </Button>) : (<Button variant={secondaryButtonStyle.variant} size={secondaryButtonStyle.size} className={cn(secondaryButtonStyle.className)} unstyled={secondaryButtonStyle.unstyled} style={secondaryButtonStyle.style} aria-label={secondaryCta.label}>
+                    {secondaryCta.label}
+                  </Button>))}
+            </motion.div>)}
+        </motion.div>
+      </div>
+    </section>);
+}

package/dist/components/HeroOverlay.d.ts

@@ -0,0 +1,116 @@
+import React from "react";
+/**
+ * Props for the HeroOverlay component.
+ *
+ * @remarks
+ * - Prefer the structured image prop (image) over deprecated flat props.
+ * - Slot-style className overrides are merged after defaults via cn().
+ * - Motion controls affect CTA hover transitions.
+ *
+ * @public
+ */
+export interface HeroOverlayProps {
+    id?: string;
+    className?: string;
+    image?: {
+        src?: string;
+        alt?: string;
+        className?: string;
+        objectFit?: React.CSSProperties["objectFit"];
+        objectPosition?: React.CSSProperties["objectPosition"];
+    };
+    /** @deprecated Use image.src instead */
+    imageSrc?: string;
+    /** @deprecated Use image.alt instead */
+    imageAlt?: string;
+    /** @deprecated Use image.objectFit instead */
+    imageObjectFit?: React.CSSProperties["objectFit"];
+    /** @deprecated Use image.objectPosition instead */
+    imageObjectPosition?: React.CSSProperties["objectPosition"];
+    heading?: string | {
+        text?: string;
+        className?: string;
+    };
+    subheading?: string | {
+        text?: string;
+        className?: string;
+    };
+    overlayRGBA?: string;
+    overlayDarkRGBA?: string;
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    imageContainer?: {
+        className?: string;
+    };
+    overlay?: {
+        className?: string;
+    };
+    content?: {
+        className?: string;
+    };
+    textContainer?: {
+        className?: string;
+    };
+    /** @deprecated Use heading.className */
+    headingStyle?: {
+        className?: string;
+    };
+    /** @deprecated Use subheading.className */
+    subheadingStyle?: {
+        className?: string;
+    };
+    ctaContainer?: {
+        className?: string;
+    };
+    cta1?: {
+        label?: string;
+        href?: string;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+        unstyled?: boolean;
+        style?: React.CSSProperties;
+    };
+    cta2?: {
+        label?: string;
+        href?: string;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+        unstyled?: boolean;
+        style?: React.CSSProperties;
+    };
+    /** @deprecated Use cta1.label instead */
+    ctaBtn1Label?: string;
+    /** @deprecated Use cta1.href instead */
+    ctaBtn1Href?: string;
+    /** @deprecated Use cta2.label instead */
+    ctaBtn2Label?: string;
+    /** @deprecated Use cta2.href instead */
+    ctaBtn2Href?: string;
+    ariaLabel?: string;
+    enableMotion?: boolean;
+}
+/**
+ * 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 declare function HeroOverlay({ id, className, imageSrc, imageAlt, imageObjectFit, imageObjectPosition, image, heading, subheading, overlayRGBA, overlayDarkRGBA, ctaBtn1Label, ctaBtn1Href, ctaBtn2Label, ctaBtn2Href, container, section, imageContainer, overlay, content, textContainer, headingStyle, subheadingStyle, ctaContainer, cta1, cta2, ariaLabel, enableMotion, }: HeroOverlayProps): React.JSX.Element;
+//# sourceMappingURL=HeroOverlay.d.ts.map

package/dist/components/HeroOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroOverlay.d.ts","sourceRoot":"","sources":["../../src/components/HeroOverlay.tsx"],"names":[],"mappings":"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"}