@nextworks/blocks-sections 0.2.0-alpha.11 → 0.2.0-alpha.13

package/dist/components/HeroMotion.jsx

@@ -1,3 +1,5 @@
+// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
+// Do not edit this file directly. Edit the kit source instead.
 "use client";
 import React from "react";
 import Link from "next/link";
@@ -7,7 +9,7 @@ import { cn } from "@nextworks/blocks-core";
 const defaultChildTransition = {
     type: "tween",
     duration: 0.5,
-    ease: [0.22, 1, 0.36, 1], // smooth easeOut
+    ease: [0.22, 1, 0.36, 1],
 };
 /**
  * Motion-first hero with heading/highlight, optional description and CTAs.
@@ -25,9 +27,9 @@ const defaultChildTransition = {
  *   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.
+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 = {
@@ -49,47 +51,47 @@ export function HeroMotion({ id, ariaLabel = "Hero section", className, heading
         }
         : { 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)}>
+    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>
-
+            ? 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}
-
+                ? 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)}>
+                ? 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>))}
-
+                (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>
+                (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.map

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

package/dist/components/HeroOverlay.jsx

@@ -1,3 +1,5 @@
+// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
+// Do not edit this file directly. Edit the kit source instead.
 "use client";
 import React from "react";
 import Image from "next/image";
@@ -100,42 +102,42 @@ ctaContainer = {
     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
+    // 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 (<section id={id} className={cn(finalContainerClass, className)} aria-label={ariaLabel}>
-      <div className={imageContainer.className}>
+    return (<section id={id} className={cn(finalContainerClass, className)} aria-label={ariaLabel}>
+      <div className={imageContainer.className}>
         <Image src={effImage.src} alt={effImage.alt} fill sizes="100vw" quality={75} priority className={effImage.className} style={{
             objectFit: effImage.objectFit,
             objectPosition: effImage.objectPosition,
-        }}/>
-      </div>
-
-      <div className={overlay.className} style={{ backgroundColor: overlayRGBA }} aria-hidden/>
-      <div className={cn(overlay.className, "hidden dark:block")} style={{ backgroundColor: overlayDarkRGBA }} aria-hidden/>
-
-      <div className={content.className}>
-        <div className={textContainer.className}>
-          <h1 className={normalizedHeading.className}>
-            {normalizedHeading.text}
-          </h1>
-          <p className={normalizedSubheading.className}>
-            {normalizedSubheading.text}
-          </p>
-          <div className={ctaContainer.className}>
-            {mergedCta1.label && (<Button asChild variant={mergedCta1.variant} size={mergedCta1.size} className={mergedCta1.className} unstyled={mergedCta1.unstyled} style={mergedCta1.style}>
-                <Link href={mergedCta1.href || "#"} aria-label={mergedCta1.label}>
-                  {mergedCta1.label}
-                </Link>
-              </Button>)}
-            {showCta2 && (<Button asChild variant={mergedCta2.variant} size={mergedCta2.size} className={mergedCta2.className} unstyled={mergedCta2.unstyled} style={mergedCta2.style}>
-                <Link href={mergedCta2.href || "#"} aria-label={mergedCta2.label}>
-                  {mergedCta2.label}
-                </Link>
-              </Button>)}
-          </div>
-        </div>
-      </div>
+        }}/>
+      </div>
+
+      <div className={overlay.className} style={{ backgroundColor: overlayRGBA }} aria-hidden/>
+      <div className={cn(overlay.className, "hidden dark:block")} style={{ backgroundColor: overlayDarkRGBA }} aria-hidden/>
+
+      <div className={content.className}>
+        <div className={textContainer.className}>
+          <h1 className={normalizedHeading.className}>
+            {normalizedHeading.text}
+          </h1>
+          <p className={normalizedSubheading.className}>
+            {normalizedSubheading.text}
+          </p>
+          <div className={ctaContainer.className}>
+            {mergedCta1.label && (<Button asChild variant={mergedCta1.variant} size={mergedCta1.size} className={mergedCta1.className} unstyled={mergedCta1.unstyled} style={mergedCta1.style}>
+                <Link href={mergedCta1.href || "#"} aria-label={mergedCta1.label}>
+                  {mergedCta1.label}
+                </Link>
+              </Button>)}
+            {showCta2 && (<Button asChild variant={mergedCta2.variant} size={mergedCta2.size} className={mergedCta2.className} unstyled={mergedCta2.unstyled} style={mergedCta2.style}>
+                <Link href={mergedCta2.href || "#"} aria-label={mergedCta2.label}>
+                  {mergedCta2.label}
+                </Link>
+              </Button>)}
+          </div>
+        </div>
+      </div>
     </section>);
 }

package/dist/components/HeroProductDemo.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+import type { ProductDemoScenario } from "./product-demo/types";
+export interface HeroProductDemoTextContent {
+    text?: string;
+    className?: string;
+}
+export interface HeroProductDemoCta {
+    label?: string;
+    href?: string;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    className?: string;
+    unstyled?: boolean;
+    style?: React.CSSProperties;
+}
+export interface HeroProductDemoStageConfig {
+    scenarios?: ProductDemoScenario[];
+    initialScenarioIndex?: number;
+    activeScenarioKey?: string;
+    autoCycle?: boolean;
+    cycleIntervalMs?: number;
+    className?: string;
+}
+export interface HeroProductDemoSlots {
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    textContainer?: {
+        className?: string;
+    };
+    demoContainer?: {
+        className?: string;
+    };
+    buttonsContainer?: {
+        className?: string;
+    };
+}
+export interface HeroProductDemoProps extends HeroProductDemoSlots {
+    id?: string;
+    className?: string;
+    heading?: string | HeroProductDemoTextContent;
+    subheading?: string | HeroProductDemoTextContent;
+    cta1?: HeroProductDemoCta;
+    cta2?: HeroProductDemoCta;
+    stage?: HeroProductDemoStageConfig;
+    demo?: React.ReactNode;
+    ariaLabel?: string;
+    enableMotion?: boolean;
+}
+export declare function HeroProductDemo({ id, className, heading, subheading, cta1, cta2, stage, demo, section, container, textContainer, demoContainer, buttonsContainer, ariaLabel, enableMotion, }: HeroProductDemoProps): React.JSX.Element;
+//# sourceMappingURL=HeroProductDemo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeroProductDemo.d.ts","sourceRoot":"","sources":["../../src/components/HeroProductDemo.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EACJ,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,aAAa,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,aAAa,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAChE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,0BAA0B,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,GAAG,0BAA0B,CAAC;IACjD,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,0BAA0B,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAgBD,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,SAAS,EACT,OAAO,EACP,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,SAAuC,EACvC,YAAmB,GACpB,EAAE,oBAAoB,qBAiJtB"}

package/dist/components/HeroProductDemo.jsx

@@ -0,0 +1,81 @@
+// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
+// Do not edit this file directly. Edit the kit source instead.
+"use client";
+import React from "react";
+import Link from "next/link";
+import { Button } from "@nextworks/blocks-core";
+import { cn } from "@nextworks/blocks-core";
+import { DemoStage } from "./product-demo/DemoStage";
+function normalizeTextContent(value, defaults) {
+    var _a;
+    if (typeof value === "string") {
+        return { text: value, className: defaults.className };
+    }
+    return {
+        text: (_a = value === null || value === void 0 ? void 0 : value.text) !== null && _a !== void 0 ? _a : defaults.text,
+        className: cn(defaults.className, value === null || value === void 0 ? void 0 : value.className),
+    };
+}
+export function HeroProductDemo({ id, className, heading, subheading, cta1, cta2, stage, demo, section, container, textContainer, demoContainer, buttonsContainer, ariaLabel = "Product demo hero section", enableMotion = true, }) {
+    const defaultHeading = {
+        text: "Show your product in motion",
+        className: "text-4xl font-bold leading-tight tracking-tight text-foreground sm:text-5xl lg:text-6xl",
+    };
+    const defaultSubheading = {
+        text: "Pair clear positioning with a layered product demo that makes the workflow feel real before anyone clicks.",
+        className: "mt-6 max-w-2xl text-base text-muted-foreground sm:text-lg lg:text-xl",
+    };
+    const normalizedHeading = normalizeTextContent(heading, defaultHeading);
+    const normalizedSubheading = normalizeTextContent(subheading, defaultSubheading);
+    const buttonLift = enableMotion
+        ? "transition-all duration-200 hover:-translate-y-0.5"
+        : "transition-none hover:!translate-y-0";
+    const defaultCta1 = {
+        label: "Get Started",
+        href: "#contact",
+        variant: "default",
+        size: "lg",
+        className: "shadow-lg hover:shadow-xl",
+    };
+    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: "lg",
+        className: "",
+    };
+    const mergedCta2 = cta2
+        ? Object.assign(Object.assign(Object.assign({}, defaultCta2), cta2), { className: cn(defaultCta2.className, cta2.className, buttonLift) }) : undefined;
+    return (<section id={id} className={cn("relative overflow-hidden px-6 py-16 sm:px-8 lg:px-10 lg:py-24", section === null || section === void 0 ? void 0 : section.className, className)} aria-label={ariaLabel}>
+      <div className={cn("mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-[minmax(0,0.84fr)_minmax(0,1.16fr)] lg:gap-12 xl:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]", container === null || container === void 0 ? void 0 : container.className)}>
+        <div className={cn("relative z-10 flex flex-col items-start", textContainer === null || textContainer === void 0 ? void 0 : textContainer.className)}>
+          <h1 className={cn(normalizedHeading.className)}>
+            {normalizedHeading.text}
+          </h1>
+
+          <p className={cn(normalizedSubheading.className)}>
+            {normalizedSubheading.text}
+          </p>
+
+          <div className={cn("mt-8 flex flex-col items-start gap-4 sm:flex-row sm:items-center", buttonsContainer === null || buttonsContainer === void 0 ? void 0 : buttonsContainer.className)}>
+            {mergedCta1.label && (<Button asChild variant={mergedCta1.variant} size={mergedCta1.size} className={mergedCta1.className} unstyled={mergedCta1.unstyled} style={mergedCta1.style}>
+                <Link href={mergedCta1.href || "#"} aria-label={mergedCta1.label}>
+                  {mergedCta1.label}
+                </Link>
+              </Button>)}
+
+            {(mergedCta2 === null || mergedCta2 === void 0 ? void 0 : mergedCta2.label) && (<Button asChild variant={mergedCta2.variant} size={mergedCta2.size} className={mergedCta2.className} unstyled={mergedCta2.unstyled} style={mergedCta2.style}>
+                <Link href={mergedCta2.href || "#"} aria-label={mergedCta2.label}>
+                  {mergedCta2.label}
+                </Link>
+              </Button>)}
+          </div>
+        </div>
+
+        <div className={cn("relative", demoContainer === null || demoContainer === void 0 ? void 0 : demoContainer.className)}>
+          {demo !== null && demo !== void 0 ? demo : (<DemoStage scenarios={stage === null || stage === void 0 ? void 0 : stage.scenarios} initialScenarioIndex={stage === null || stage === void 0 ? void 0 : stage.initialScenarioIndex} activeScenarioKey={stage === null || stage === void 0 ? void 0 : stage.activeScenarioKey} autoCycle={stage === null || stage === void 0 ? void 0 : stage.autoCycle} cycleIntervalMs={stage === null || stage === void 0 ? void 0 : stage.cycleIntervalMs} className={stage === null || stage === void 0 ? void 0 : stage.className} enableMotion={enableMotion} ariaLabel="Layered product demo"/>)}
+        </div>
+      </div>
+    </section>);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"HeroSplit.d.ts","sourceRoot":"","sources":["../../src/components/HeroSplit.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;GAUG;AACH,UAAU,cAAc;IACtB,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,gCAAgC;IAChC,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EACJ,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;QACxC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,wFAAwF;QACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,gDAAgD;QAChD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF,kCAAkC;IAClC,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EACJ,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;QACxC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,wFAAwF;QACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,gDAAgD;QAChD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF,0BAA0B;IAC1B,KAAK,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,2BAA2B;IAC3B,cAAc,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,0BAA0B;IAC1B,aAAa,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oHAAoH;IACpH,WAAW,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;CACvC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,SAAS,EACT,OAAO,EACP,UAAU,EACV,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAIC,EACD,cAAc,EACd,aAA2C,EAC3C,gBAAwE,EACxE,SAAoB,EACpB,QAAQ,EACR,SAA0B,EAC1B,YAAmB,EACnB,WAA0B,GAC3B,EAAE,cAAc,qBA0OhB"}
+{"version":3,"file":"HeroSplit.d.ts","sourceRoot":"","sources":["../../src/components/HeroSplit.tsx"],"names":[],"mappings":"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"}

package/dist/components/HeroSplit.jsx

@@ -1,3 +1,5 @@
+// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
+// Do not edit this file directly. Edit the kit source instead.
 "use client";
 import React from "react";
 import Image from "next/image";
@@ -89,46 +91,46 @@ export function HeroSplit({ id, className, heading, subheading, section, cta1, c
         ? defaultImageContainerFull
         : defaultImageContainerPadded;
     const finalImageContainerClass = cn(baseImageContainerClass, imageContainer === null || imageContainer === void 0 ? void 0 : imageContainer.className);
-    // Note: Avoid overriding the incoming image.className so callers can control object-fit (e.g., cover vs contain).
+    // Note: Don’t override `image.className` here—leave object-fit (e.g. `object-cover` / `object-contain`) up to 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 (<section id={id} className={cn(finalSectionClass, className)} aria-label={ariaLabel}>
+    return (<section id={id} className={cn(finalSectionClass, className)} aria-label={ariaLabel}>
       <div className={cn("flex flex-col items-stretch", imageLayout === "full-bleed"
             ? "md:block"
-            : "md:flex-row md:items-start")}>
-        {/* Text container - takes up left side on large screens */}
+            : "md:flex-row md:items-start")}>
+        {/* Text container - takes up left side on large screens */}
         <div className={cn("w-full", imageLayout === "full-bleed" &&
-            "relative z-10 md:w-1/2 md:px-8 md:py-12", textContainer.className)}>
-          <div className={cn("flex flex-col items-center", lgItemsAlignClasses[textAlign])}>
-            <h1 className={cn("text-center", lgTextAlignClasses[textAlign], normalizedHeading.className)}>
-              {normalizedHeading.text}
-            </h1>
-
-            <p className={cn("text-center", lgTextAlignClasses[textAlign], normalizedSubheading.className)}>
-              {normalizedSubheading.text}
-            </p>
-
-            <div className={cn("flex flex-col items-center justify-center gap-4 sm:flex-row", lgJustifyAlignClasses[textAlign], lgItemsAlignClasses[textAlign], buttonsContainer.className)}>
-              {mergedCta1.label && (<Button asChild variant={mergedCta1.variant} size={mergedCta1.size} className={mergedCta1.className} unstyled={mergedCta1.unstyled} style={mergedCta1.style}>
-                  <Link href={mergedCta1.href || "#"} aria-label={mergedCta1.label}>
-                    {mergedCta1.label}
-                  </Link>
-                </Button>)}
-
-              {(mergedCta2 === null || mergedCta2 === void 0 ? void 0 : mergedCta2.label) && (<Button asChild variant={mergedCta2.variant} size={mergedCta2.size} className={mergedCta2.className} unstyled={mergedCta2.unstyled} style={mergedCta2.style}>
-                  <Link href={mergedCta2.href || "#"} aria-label={mergedCta2.label}>
-                    {mergedCta2.label}
-                  </Link>
-                </Button>)}
-            </div>
-          </div>
-        </div>
-
-        {/* Image container - absolutely positioned on right side for full-bleed */}
-        <div className={cn(finalImageContainerClass)}>
-          {(image === null || image === void 0 ? void 0 : image.src) ? (<Image priority fetchPriority="high" src={image.src} alt={image.alt || "Hero image"} className={finalImageClass} fill sizes="(min-width: 768px) 50vw, 100vw" quality={75}/>) : (<div className="absolute inset-0">{fallback || null}</div>)}
-        </div>
-      </div>
+            "relative z-10 md:w-1/2 md:px-8 md:py-12", textContainer.className)}>
+          <div className={cn("flex flex-col items-center", lgItemsAlignClasses[textAlign])}>
+            <h1 className={cn("text-center", lgTextAlignClasses[textAlign], normalizedHeading.className)}>
+              {normalizedHeading.text}
+            </h1>
+
+            <p className={cn("text-center", lgTextAlignClasses[textAlign], normalizedSubheading.className)}>
+              {normalizedSubheading.text}
+            </p>
+
+            <div className={cn("flex flex-col items-center justify-center gap-4 sm:flex-row", lgJustifyAlignClasses[textAlign], lgItemsAlignClasses[textAlign], buttonsContainer.className)}>
+              {mergedCta1.label && (<Button asChild variant={mergedCta1.variant} size={mergedCta1.size} className={mergedCta1.className} unstyled={mergedCta1.unstyled} style={mergedCta1.style}>
+                  <Link href={mergedCta1.href || "#"} aria-label={mergedCta1.label}>
+                    {mergedCta1.label}
+                  </Link>
+                </Button>)}
+
+              {(mergedCta2 === null || mergedCta2 === void 0 ? void 0 : mergedCta2.label) && (<Button asChild variant={mergedCta2.variant} size={mergedCta2.size} className={mergedCta2.className} unstyled={mergedCta2.unstyled} style={mergedCta2.style}>
+                  <Link href={mergedCta2.href || "#"} aria-label={mergedCta2.label}>
+                    {mergedCta2.label}
+                  </Link>
+                </Button>)}
+            </div>
+          </div>
+        </div>
+
+        {/* Image container - absolutely positioned on right side for full-bleed */}
+        <div className={cn(finalImageContainerClass)}>
+          {(image === null || image === void 0 ? void 0 : image.src) ? (<Image priority fetchPriority="high" src={image.src} alt={image.alt || "Hero image"} className={finalImageClass} fill sizes="(min-width: 768px) 50vw, 100vw" quality={75}/>) : (<div className="absolute inset-0">{fallback || null}</div>)}
+        </div>
+      </div>
     </section>);
 }

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

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

package/dist/components/Navbar.jsx

@@ -1,9 +1,11 @@
+// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
+// Do not edit this file directly. Edit the kit source instead.
 // components/sections/Navbar.tsx
 "use client";
 import React, { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { Button } from "@nextworks/blocks-core";
-import { ThemeToggle } from "@nextworks/blocks-core";
+import { ThemeToggle, } from "@nextworks/blocks-core";
 import { cn } from "@nextworks/blocks-core";
 import { Menu, X } from "lucide-react";
 const defaultMenuItems = [
@@ -38,7 +40,7 @@ export function Navbar({ id, navHeight = "h-16", brand = "Brand Name", brandNode
 }, mobileMenu = {
     className: "border-t border-border",
 }, 
-/* New slot defaults */
+/* Slot defaults */
 container = { className: "" }, brandWrapper = { className: "" }, desktopMenu = {
     className: "hidden items-center space-x-1 lg:flex lg:space-x-6",
 }, toggleButton = {
@@ -68,57 +70,55 @@ container = { className: "" }, brandWrapper = { className: "" }, desktopMenu = {
             document.body.style.overflow = originalOverflow || "";
         };
     }, [isMobileMenuOpen]);
-    return (<nav id={id} className={cn("w-full", sticky && "sticky top-0 z-50", nav.className, className)} aria-label={ariaLabel}>
-      <div ref={headerRef} className={cn("flex items-center justify-between px-4 py-2", navHeight, container.className)}>
-        <div className={cn("mr-2 flex items-center gap-2 pl-2", brandWrapper.className)}>
-          {brandNode}
-          {brand && <h1 className={cn(brandText.className)}>{brand}</h1>}
-        </div>
-
-        <button aria-label="Toggle mobile menu" aria-expanded={isMobileMenuOpen} aria-controls={mobileMenuId} className={cn("lg:hidden", toggleButton.className)} 
-    // className={cn("lg:hidden", toggleButton.className)}
-    onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
-          {isMobileMenuOpen ? (<X className="h-6 w-6"/>) : (<Menu className="h-6 w-6"/>)}
-        </button>
-
-        <div className={cn("hidden md:flex", desktopMenu.className)}>
-          {menuItems.map((item) => (<Link key={item.label} href={item.href} className={cn("rounded-md px-2 py-2 transition-colors duration-200 lg:px-4", "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none", "focus-visible:ring-[var(--navbar-ring)]", links.className)}>
-              {item.label}
-            </Link>))}
-
-          {showColorModeToggle && (<div className={cn(colorModeWrapper.className)}>
-              <ThemeToggle {...themeToggle}/>
-            </div>)}
-
-          {ctaButton && (<Button asChild unstyled={ctaButtonStyle.unstyled} variant={ctaButtonStyle.variant} size={ctaButtonStyle.size} className={cn(ctaButtonWrapper.className, ctaButtonStyle.className)} style={ctaButtonStyle.style}>
-              <Link href={ctaButton.href} aria-label={ctaButton.label}>
-                {ctaButton.label}
-              </Link>
-            </Button>)}
-        </div>
-      </div>
-
+    return (<nav id={id} className={cn("w-full", sticky && "sticky top-0 z-50", nav.className, className)} aria-label={ariaLabel}>
+      <div ref={headerRef} className={cn("flex items-center justify-between px-4 py-2", navHeight, container.className)}>
+        <div className={cn("mr-2 flex items-center gap-2 pl-2", brandWrapper.className)}>
+          {brandNode}
+          {brand && <h1 className={cn(brandText.className)}>{brand}</h1>}
+        </div>
+
+        <button aria-label="Toggle mobile menu" aria-expanded={isMobileMenuOpen} aria-controls={mobileMenuId} className={cn("lg:hidden", toggleButton.className)} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
+          {isMobileMenuOpen ? (<X className="h-6 w-6"/>) : (<Menu className="h-6 w-6"/>)}
+        </button>
+
+        <div className={cn("hidden md:flex", desktopMenu.className)}>
+          {menuItems.map((item) => (<Link key={item.label} href={item.href} className={cn("rounded-md px-2 py-2 transition-colors duration-200 lg:px-4", "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none", "focus-visible:ring-[var(--navbar-ring)]", links.className)}>
+              {item.label}
+            </Link>))}
+
+          {showColorModeToggle && (<div className={cn(colorModeWrapper.className)}>
+              <ThemeToggle {...themeToggle}/>
+            </div>)}
+
+          {ctaButton && (<Button asChild unstyled={ctaButtonStyle.unstyled} variant={ctaButtonStyle.variant} size={ctaButtonStyle.size} className={cn(ctaButtonWrapper.className, ctaButtonStyle.className)} style={ctaButtonStyle.style}>
+              <Link href={ctaButton.href} aria-label={ctaButton.label}>
+                {ctaButton.label}
+              </Link>
+            </Button>)}
+        </div>
+      </div>
+
       {isMobileMenuOpen && (<div id={mobileMenuId} className={cn("md:hidden", "overflow-y-auto overscroll-y-contain", nav.className, mobileMenu.className)} style={{
                 maxHeight: `calc(100dvh - ${headerHeightPx}px)`,
                 WebkitOverflowScrolling: "touch",
-            }}>
-          <div className={cn(mobileMenuInner.className)}>
-            {menuItems.map((item) => (<Link key={item.label} href={item.href} className={cn("block w-full rounded-md px-2 py-4 text-center transition-colors duration-200", mobileLinks.className, "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none", "focus-visible:ring-[var(--navbar-ring)]", links.className)} onClick={() => setIsMobileMenuOpen(false)}>
-                {item.label}
-              </Link>))}
-
-            {showColorModeToggle && (<div className="flex w-full justify-center pt-4">
-                <ThemeToggle {...themeToggle}/>
-              </div>)}
-
-            {ctaButton && (<div className="flex w-full justify-center pt-6">
-                <Button asChild unstyled={ctaButtonStyle.unstyled} variant={ctaButtonStyle.variant} size={ctaButtonStyle.size} className={cn("w-full max-w-xs", ctaButtonStyle.className)} style={ctaButtonStyle.style}>
-                  <Link href={ctaButton.href} aria-label={ctaButton.label}>
-                    {ctaButton.label}
-                  </Link>
-                </Button>
-              </div>)}
-          </div>
-        </div>)}
+            }}>
+          <div className={cn(mobileMenuInner.className)}>
+            {menuItems.map((item) => (<Link key={item.label} href={item.href} className={cn("block w-full rounded-md px-2 py-4 text-center transition-colors duration-200", mobileLinks.className, "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none", "focus-visible:ring-[var(--navbar-ring)]", links.className)} onClick={() => setIsMobileMenuOpen(false)}>
+                {item.label}
+              </Link>))}
+
+            {showColorModeToggle && (<div className="flex w-full justify-center pt-4">
+                <ThemeToggle {...themeToggle}/>
+              </div>)}
+
+            {ctaButton && (<div className="flex w-full justify-center pt-6">
+                <Button asChild unstyled={ctaButtonStyle.unstyled} variant={ctaButtonStyle.variant} size={ctaButtonStyle.size} className={cn("w-full max-w-xs", ctaButtonStyle.className)} style={ctaButtonStyle.style}>
+                  <Link href={ctaButton.href} aria-label={ctaButton.label}>
+                    {ctaButton.label}
+                  </Link>
+                </Button>
+              </div>)}
+          </div>
+        </div>)}
     </nav>);
 }

package/dist/components/Newsletter.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Button } from "@nextworks/blocks-core";
 /**
  * Props for a compact newsletter/signup block.
  *
@@ -40,8 +41,8 @@ export interface NewsletterProps {
     };
     button?: {
         className?: string;
-        variant?: any;
-        size?: any;
+        variant?: React.ComponentProps<typeof Button>["variant"];
+        size?: React.ComponentProps<typeof Button>["size"];
         unstyled?: boolean;
     };
     enableMotion?: boolean;