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

package/dist/components/Team.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";
@@ -37,18 +39,18 @@ const DefaultTeamData = [
  * Receives already-merged className strings from the parent.
  */
 function TeamCard({ member, card = { className: "" }, cardContent = { className: "" }, avatar = { className: "" }, name = { className: "" }, role = { className: "" }, bio = { className: "" }, socialLinks = { className: "" }, socialLink = { className: "" }, }) {
-    return (<div className={card.className}>
-      <div className={cardContent.className}>
-        <div className={avatar.className}>{member.avatar}</div>
-        <h3 className={name.className}>{member.name}</h3>
-        <p className={role.className}>{member.role}</p>
-        <p className={bio.className}>{member.bio}</p>
-        {member.socialLinks && member.socialLinks.length > 0 && (<div className={socialLinks.className}>
-            {member.socialLinks.map((social, index) => (<Link key={index} href={social.url} className={socialLink.className} title={social.platform} aria-label={`${member.name}'s ${social.platform} profile`}>
-                {social.icon}
-              </Link>))}
-          </div>)}
-      </div>
+    return (<div className={card.className}>
+      <div className={cardContent.className}>
+        <div className={avatar.className}>{member.avatar}</div>
+        <h3 className={name.className}>{member.name}</h3>
+        <p className={role.className}>{member.role}</p>
+        <p className={bio.className}>{member.bio}</p>
+        {member.socialLinks && member.socialLinks.length > 0 && (<div className={socialLinks.className}>
+            {member.socialLinks.map((social, index) => (<Link key={index} href={social.url} className={socialLink.className} title={social.platform} aria-label={`${member.name}'s ${social.platform} profile`}>
+                {social.icon}
+              </Link>))}
+          </div>)}
+      </div>
     </div>);
 }
 /**
@@ -115,21 +117,21 @@ export function Team({ id, className, teamMembers = DefaultTeamData, teamHeading
             text: (_b = teamSubheadingText === null || teamSubheadingText === void 0 ? void 0 : teamSubheadingText.text) !== null && _b !== void 0 ? _b : "The talented people behind your success",
             className: cn(defaultSubheadingClass, teamSubheadingText === null || teamSubheadingText === void 0 ? void 0 : teamSubheadingText.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
         };
-    return (<section id={id || "team"} className={finalSectionClass} aria-label={ariaLabel}>
-      <div className={finalContainerClass}>
-        <div className={finalHeaderClass}>
-          <div className="mx-auto flex max-w-2xl flex-col items-center space-y-4 text-center">
-            <h2 className={normalizedHeading.className}>
-              {normalizedHeading.text}
-            </h2>
-            <p className={normalizedSubheading.className}>
-              {normalizedSubheading.text}
-            </p>
-          </div>
-          <div className={finalGridClass}>
-            {teamMembers.map((member, index) => (<TeamCard key={index} member={member} card={{ className: finalCardClass }} cardContent={{ className: finalCardContentClass }} avatar={{ className: finalAvatarClass }} name={{ className: finalNameClass }} role={{ className: finalRoleClass }} bio={{ className: finalBioClass }} socialLinks={{ className: finalSocialLinksClass }} socialLink={{ className: finalSocialLinkClass }}/>))}
-          </div>
-        </div>
-      </div>
+    return (<section id={id || "team"} className={finalSectionClass} aria-label={ariaLabel}>
+      <div className={finalContainerClass}>
+        <div className={finalHeaderClass}>
+          <div className="mx-auto flex max-w-2xl flex-col items-center space-y-4 text-center">
+            <h2 className={normalizedHeading.className}>
+              {normalizedHeading.text}
+            </h2>
+            <p className={normalizedSubheading.className}>
+              {normalizedSubheading.text}
+            </p>
+          </div>
+          <div className={finalGridClass}>
+            {teamMembers.map((member, index) => (<TeamCard key={index} member={member} card={{ className: finalCardClass }} cardContent={{ className: finalCardContentClass }} avatar={{ className: finalAvatarClass }} name={{ className: finalNameClass }} role={{ className: finalRoleClass }} bio={{ className: finalBioClass }} socialLinks={{ className: finalSocialLinksClass }} socialLink={{ className: finalSocialLinkClass }}/>))}
+          </div>
+        </div>
+      </div>
     </section>);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Testimonials.d.ts","sourceRoot":"","sources":["../../src/components/Testimonials.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,iCAAiC;IACjC,eAAe,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,kBAAkB;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wEAAwE;IACxE,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,+EAA+E;IAC/E,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,2BAA2B;IAC3B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEpC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,SAAS,EACT,YAAqC,EACrC,wBAAmD,EACnD,YAAmB,EACnB,OAA8C,EAC9C,SAA8C,EAC9C,MAA2C,EAC3C,OAEC,EACD,IAA4E,EAC5E,IAGC,EACD,OAAkD,EAClD,IAGC,EACD,MAGC,EACD,MAGC,EACD,UAA+D,EAC/D,SAAkC,GACnC,EAAE,iBAAiB,qBAsCnB"}
+{"version":3,"file":"Testimonials.d.ts","sourceRoot":"","sources":["../../src/components/Testimonials.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,iCAAiC;IACjC,eAAe,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,kBAAkB;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wEAAwE;IACxE,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,+EAA+E;IAC/E,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,2BAA2B;IAC3B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEpC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,SAAS,EACT,YAAqC,EACrC,wBAAmD,EACnD,YAAmB,EACnB,OAA8C,EAC9C,SAA8C,EAC9C,MAA2C,EAC3C,OAEC,EACD,IAA4E,EAC5E,IAGC,EACD,OAAkD,EAClD,IAGC,EACD,MAGC,EACD,MAGC,EACD,UAA+D,EAC/D,SAAkC,GACnC,EAAE,iBAAiB,qBAsCnB"}

package/dist/components/Testimonials.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 { cn } from "@nextworks/blocks-core";
@@ -40,19 +42,19 @@ export function Testimonials({ id, className, testimonials = defaultTestimonialD
 }, avatar = {
     className: "w-12 h-12 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-lg font-bold bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
 }, avatarText = { className: "text-primary-foreground font-bold" }, ariaLabel = "Testimonials section", }) {
-    return (<section id={id || "testimonials"} className={cn(section.className, className)} aria-label={ariaLabel}>
-      <div className={container.className}>
-        {/* Section Header */}
-        <div className={header.className}>
-          <h2 className={heading.className}>{testimonialSectionHeader}</h2>
-        </div>
-
-        {/* Testimonials Grid */}
-        <div className={grid.className}>
+    return (<section id={id || "testimonials"} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={container.className}>
+        {/* Section Header */}
+        <div className={header.className}>
+          <h2 className={heading.className}>{testimonialSectionHeader}</h2>
+        </div>
+
+        {/* Testimonials Grid */}
+        <div className={grid.className}>
           {testimonials.map((testimonial, index) => (<TestimonialCard key={index} testimonialText={testimonial.testimonialText} testimonialAuthor={testimonial.testimonialAuthor} testimonialAuthorInitials={testimonial.testimonialAuthorInitials} card={{
                 className: cn(card.className, !enableMotion && "transition-none hover:!translate-y-0"),
-            }} content={content} text={text} author={author} avatar={avatar} avatarText={avatarText}/>))}
-        </div>
-      </div>
+            }} content={content} text={text} author={author} avatar={avatar} avatarText={avatarText}/>))}
+        </div>
+      </div>
     </section>);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TrustBadges.d.ts","sourceRoot":"","sources":["../../src/components/TrustBadges.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,oCAAoC;IACpC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,2BAA2B;IAC3B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,eAAe,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,WAAW,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE9B,qDAAqD;IACrD,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,SAAS,EACT,MAA8B,EAC9B,wBAAwB,EACxB,OAA6C,EAC7C,SAA8C,EAC9C,MAA0C,EAC1C,OAEC,EACD,eAGC,EACD,KAGC,EACD,YAAoE,EACpE,IAAqC,EACrC,WAGC,EACD,IAEC,EACD,MAAqB,EACrB,YAAmB,EACnB,SAAkC,GACnC,EAAE,gBAAgB,qBA6ClB"}
+{"version":3,"file":"TrustBadges.d.ts","sourceRoot":"","sources":["../../src/components/TrustBadges.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,oCAAoC;IACpC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,2BAA2B;IAC3B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,eAAe,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,WAAW,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE9B,qDAAqD;IACrD,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,SAAS,EACT,MAA8B,EAC9B,wBAAwB,EACxB,OAA6C,EAC7C,SAA8C,EAC9C,MAA0C,EAC1C,OAEC,EACD,eAGC,EACD,KAGC,EACD,YAAoE,EACpE,IAAqC,EACrC,WAGC,EACD,IAEC,EACD,MAAqB,EACrB,YAAmB,EACnB,SAAkC,GACnC,EAAE,gBAAgB,qBA6ClB"}

package/dist/components/TrustBadges.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 { cn } from "@nextworks/blocks-core";
@@ -42,23 +44,23 @@ export function TrustBadges({ id, className, badges = defaultTrustBadgeData, tru
     const containerClasses = layout === "vertical"
         ? "flex flex-col justify-center items-center gap-8"
         : badgesContainer.className;
-    return (<section id={id || "trust-badges"} className={cn(section.className, className)} aria-label={ariaLabel}>
-      <div className={container.className}>
-        {trustBadgesSectionHeader && (<div className={header.className}>
-            <h2 className={heading.className}>{trustBadgesSectionHeader}</h2>
-          </div>)}
-
-        <div className={containerClasses}>
-          {badges.map((badgeData, index) => (<div key={index} className={cn(badge.className, !enableMotion && "transition-none hover:!scale-100")}>
-              <div className={badgeContent.className}>
-                {badgeData.badgeIcon && (<div className={icon.className}>{badgeData.badgeIcon}</div>)}
-                {badgeData.badgeDescription && (<p className={description.className}>
-                    {badgeData.badgeDescription}
-                  </p>)}
-                <p className={text.className}>{badgeData.badgeText}</p>
-              </div>
-            </div>))}
-        </div>
-      </div>
+    return (<section id={id || "trust-badges"} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={container.className}>
+        {trustBadgesSectionHeader && (<div className={header.className}>
+            <h2 className={heading.className}>{trustBadgesSectionHeader}</h2>
+          </div>)}
+
+        <div className={containerClasses}>
+          {badges.map((badgeData, index) => (<div key={index} className={cn(badge.className, !enableMotion && "transition-none hover:!scale-100")}>
+              <div className={badgeContent.className}>
+                {badgeData.badgeIcon && (<div className={icon.className}>{badgeData.badgeIcon}</div>)}
+                {badgeData.badgeDescription && (<p className={description.className}>
+                    {badgeData.badgeDescription}
+                  </p>)}
+                <p className={text.className}>{badgeData.badgeText}</p>
+              </div>
+            </div>))}
+        </div>
+      </div>
     </section>);
 }

package/dist/components/index.d.ts

@@ -8,6 +8,7 @@ export type { FooterProps, NavLinkItem, NavLinkGroup, SocialLink, } from "./Foot
 export { Footer } from "./Footer";
 export * from "./HeroMotion";
 export * from "./HeroOverlay";
+export * from "./HeroProductDemo";
 export * from "./HeroSplit";
 export * from "./Navbar";
 export * from "./Newsletter";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,YAAY,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,GACX,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,YAAY,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,GACX,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/components/index.js

@@ -6,6 +6,7 @@ export * from "./Features";
 export { Footer } from "./Footer";
 export * from "./HeroMotion";
 export * from "./HeroOverlay";
+export * from "./HeroProductDemo";
 export * from "./HeroSplit";
 export * from "./Navbar";
 export * from "./Newsletter";

package/dist/components/product-demo/ApprovalInboxPanel.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ProductDemoApprovalInboxState } from "./types";
+export interface ApprovalInboxPanelProps {
+    state: ProductDemoApprovalInboxState;
+}
+export declare function ApprovalInboxPanel({ state }: ApprovalInboxPanelProps): React.JSX.Element;
+//# sourceMappingURL=ApprovalInboxPanel.d.ts.map

package/dist/components/product-demo/ApprovalInboxPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApprovalInboxPanel.d.ts","sourceRoot":"","sources":["../../../src/components/product-demo/ApprovalInboxPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,6BAA6B,EAE9B,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,6BAA6B,CAAC;CACtC;AAgBD,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,uBAAuB,qBAmGpE"}

package/dist/components/product-demo/ApprovalInboxPanel.jsx

@@ -0,0 +1,70 @@
+// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
+// Do not edit this file directly. Edit the kit source instead.
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+const STATUS_TONE_CLASSES = {
+    neutral: "border-border/60 bg-muted/55 text-muted-foreground",
+    info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+    success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+    warning: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
+};
+function getStatusClass(tone = "neutral") {
+    return STATUS_TONE_CLASSES[tone];
+}
+export function ApprovalInboxPanel({ state }) {
+    var _a;
+    return (<div className="flex h-full flex-col gap-4">
+      <div className="space-y-1.5">
+        {state.title && (<h4 className="text-sm font-semibold text-card-foreground">
+            {state.title}
+          </h4>)}
+        {state.subtitle && (<p className="text-xs leading-relaxed text-muted-foreground">
+            {state.subtitle}
+          </p>)}
+      </div>
+
+      {((_a = state.counts) === null || _a === void 0 ? void 0 : _a.length) ? (<div className="flex flex-wrap gap-2">
+          {state.counts.map((count) => (<div key={count.id} className={cn("rounded-xl border px-3 py-2", getStatusClass(count.tone))}>
+              <div className="text-[10px] font-medium uppercase tracking-[0.14em] opacity-80">
+                {count.label}
+              </div>
+              <div className="mt-1 text-sm font-semibold">{count.value}</div>
+            </div>))}
+        </div>) : null}
+
+      <div className="space-y-3">
+        {state.items.map((item) => {
+            var _a;
+            const isActive = item.id === state.activeItemId || item.highlighted;
+            return (<div key={item.id} className={cn("rounded-2xl border border-border/60 bg-background/80 p-3", isActive && "border-primary/45 bg-primary/6 shadow-sm")}>
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <div className="text-sm font-semibold text-card-foreground">
+                    {item.title}
+                  </div>
+                  {item.description && (<p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+                      {item.description}
+                    </p>)}
+                </div>
+                {item.status && (<span className={cn("rounded-full border px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em]", getStatusClass(item.status))}>
+                    {item.status}
+                  </span>)}
+              </div>
+
+              {(item.requester || item.priorityLabel || item.dueLabel) && (<div className="mt-3 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
+                  {item.requester && <span>By {item.requester}</span>}
+                  {item.priorityLabel && <span>{item.priorityLabel}</span>}
+                  {item.dueLabel && <span>{item.dueLabel}</span>}
+                </div>)}
+
+              {((_a = item.actions) === null || _a === void 0 ? void 0 : _a.length) ? (<div className="mt-3 flex flex-wrap gap-2">
+                  {item.actions.map((action) => (<span key={action.id} className={cn("rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.14em]", getStatusClass(action.tone))}>
+                      {action.label}
+                    </span>))}
+                </div>) : null}
+            </div>);
+        })}
+      </div>
+    </div>);
+}

package/dist/components/product-demo/DemoStage.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { ProductDemoScenario } from "./types";
+export interface DemoStageProps {
+    scenarios?: ProductDemoScenario[];
+    initialScenarioIndex?: number;
+    activeScenarioKey?: string;
+    autoCycle?: boolean;
+    cycleIntervalMs?: number;
+    className?: string;
+    enableMotion?: boolean;
+    ariaLabel?: string;
+}
+export declare function DemoStage({ scenarios, initialScenarioIndex, activeScenarioKey, autoCycle, cycleIntervalMs, className, enableMotion, ariaLabel, }: DemoStageProps): React.JSX.Element;
+//# sourceMappingURL=DemoStage.d.ts.map

package/dist/components/product-demo/DemoStage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoStage.d.ts","sourceRoot":"","sources":["../../../src/components/product-demo/DemoStage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAGV,mBAAmB,EAIpB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,cAAc;IAC7B,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;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsND,wBAAgB,SAAS,CAAC,EACxB,SAAc,EACd,oBAAoB,EACpB,iBAAiB,EACjB,SAAiB,EACjB,eAAsB,EACtB,SAAS,EACT,YAAmB,EACnB,SAAgC,GACjC,EAAE,cAAc,qBAiJhB"}

package/dist/components/product-demo/DemoStage.jsx

@@ -0,0 +1,226 @@
+// 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 { motion } from "motion/react";
+import { cn } from "@nextworks/blocks-core";
+import { DemoWindow } from "./DemoWindow";
+import { ApprovalInboxPanel } from "./ApprovalInboxPanel";
+import { KnowledgePanel } from "./KnowledgePanel";
+import { RunConsolePanel } from "./RunConsolePanel";
+import { WorkflowStudioPanel } from "./WorkflowStudioPanel";
+const WINDOW_ORDER = [
+    "workflowStudio",
+    "knowledgePanel",
+    "runConsole",
+    "approvalInbox",
+];
+const HIGHLIGHT_TONE_CLASSES = {
+    neutral: "border-border/60 bg-muted/60 text-muted-foreground",
+    info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+    success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+    warning: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
+    accent: "border-primary/35 bg-primary/10 text-primary",
+    muted: "border-border/60 bg-background/70 text-muted-foreground",
+};
+const STATUS_TONE_CLASSES = {
+    neutral: "border-border/60 bg-muted/55 text-muted-foreground",
+    info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+    success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+    warning: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
+};
+function clampInitialScenarioIndex(index, count) {
+    if (count <= 0) {
+        return 0;
+    }
+    return Math.max(0, Math.min(index !== null && index !== void 0 ? index : 0, count - 1));
+}
+function getHighlightClass(tone = "accent") {
+    return HIGHLIGHT_TONE_CLASSES[tone];
+}
+function getStatusClass(tone = "neutral") {
+    return STATUS_TONE_CLASSES[tone];
+}
+function useActiveScenario({ scenarios, initialScenarioIndex, activeScenarioKey, autoCycle, cycleIntervalMs, }) {
+    var _a;
+    const fallbackIndex = React.useMemo(() => clampInitialScenarioIndex(initialScenarioIndex, scenarios.length), [initialScenarioIndex, scenarios.length]);
+    const keyedIndex = React.useMemo(() => {
+        if (!activeScenarioKey) {
+            return -1;
+        }
+        return scenarios.findIndex((scenario) => scenario.key === activeScenarioKey);
+    }, [activeScenarioKey, scenarios]);
+    const controlledIndex = keyedIndex >= 0 ? keyedIndex : fallbackIndex;
+    const [internalIndex, setInternalIndex] = React.useState(controlledIndex);
+    const activeIndex = activeScenarioKey ? controlledIndex : internalIndex;
+    React.useEffect(() => {
+        if (activeScenarioKey) {
+            setInternalIndex(controlledIndex);
+        }
+    }, [activeScenarioKey, controlledIndex]);
+    React.useEffect(() => {
+        if (activeScenarioKey || !autoCycle || scenarios.length <= 1) {
+            return;
+        }
+        const intervalMs = Math.max(cycleIntervalMs !== null && cycleIntervalMs !== void 0 ? cycleIntervalMs : 4500, 1200);
+        const timer = window.setInterval(() => {
+            setInternalIndex((currentIndex) => (currentIndex + 1) % scenarios.length);
+        }, intervalMs);
+        return () => window.clearInterval(timer);
+    }, [activeScenarioKey, autoCycle, cycleIntervalMs, scenarios.length]);
+    return (_a = scenarios[activeIndex]) !== null && _a !== void 0 ? _a : scenarios[0];
+}
+function HighlightPills({ highlights, }) {
+    if (!(highlights === null || highlights === void 0 ? void 0 : highlights.length)) {
+        return null;
+    }
+    return (<div className="flex flex-wrap gap-2">
+      {highlights.map((highlight) => {
+            var _a;
+            return (<span key={highlight.id} className={cn("rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em]", getHighlightClass(highlight.tone))}>
+          {(_a = highlight.label) !== null && _a !== void 0 ? _a : highlight.id}
+        </span>);
+        })}
+    </div>);
+}
+function getWindowRenderData(scenario) {
+    return [
+        {
+            key: "workflowStudio",
+            meta: scenario.workflowStudio.window,
+            content: (<>
+          <HighlightPills highlights={scenario.workflowStudio.highlights}/>
+          <WorkflowStudioPanel state={scenario.workflowStudio}/>
+        </>),
+        },
+        {
+            key: "knowledgePanel",
+            meta: scenario.knowledgePanel.window,
+            content: (<>
+          <HighlightPills highlights={scenario.knowledgePanel.highlights}/>
+          <KnowledgePanel state={scenario.knowledgePanel}/>
+        </>),
+        },
+        {
+            key: "runConsole",
+            meta: scenario.runConsole.window,
+            content: (<>
+          <HighlightPills highlights={scenario.runConsole.highlights}/>
+          <RunConsolePanel state={scenario.runConsole}/>
+        </>),
+        },
+        {
+            key: "approvalInbox",
+            meta: scenario.approvalInbox.window,
+            content: (<>
+          <HighlightPills highlights={scenario.approvalInbox.highlights}/>
+          <ApprovalInboxPanel state={scenario.approvalInbox}/>
+        </>),
+        },
+    ];
+}
+function getWindowShellClass(key) {
+    switch (key) {
+        case "workflowStudio":
+            return "lg:absolute lg:left-[2%] lg:top-[9%] lg:h-[66%] lg:w-[46%]";
+        case "knowledgePanel":
+            return "lg:absolute lg:left-[50%] lg:top-[10%] lg:h-[34%] lg:w-[30%] xl:left-[49%] xl:w-[29%]";
+        case "runConsole":
+            return "lg:absolute lg:left-[50%] lg:bottom-[10%] lg:h-[33%] lg:w-[32%] xl:left-[49%] xl:w-[31%]";
+        case "approvalInbox":
+            return "lg:absolute lg:right-[1%] lg:top-[17%] lg:h-[45%] lg:w-[24%] xl:right-[2%] xl:h-[44%] xl:w-[23%]";
+        default:
+            return "";
+    }
+}
+function getTransformStyle(meta) {
+    var _a, _b, _c;
+    const layoutHint = meta.layoutHint;
+    if (!layoutHint) {
+        return undefined;
+    }
+    const translateX = (_a = layoutHint.x) !== null && _a !== void 0 ? _a : 0;
+    const translateY = (_b = layoutHint.y) !== null && _b !== void 0 ? _b : 0;
+    const rotate = (_c = layoutHint.rotateDeg) !== null && _c !== void 0 ? _c : 0;
+    return {
+        zIndex: layoutHint.zIndex,
+        transform: `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg)`,
+    };
+}
+export function DemoStage({ scenarios = [], initialScenarioIndex, activeScenarioKey, autoCycle = false, cycleIntervalMs = 4500, className, enableMotion = true, ariaLabel = "Product demo stage", }) {
+    const activeScenario = useActiveScenario({
+        scenarios,
+        initialScenarioIndex,
+        activeScenarioKey,
+        autoCycle,
+        cycleIntervalMs,
+    });
+    const activeIndex = React.useMemo(() => {
+        if (!activeScenario) {
+            return 0;
+        }
+        return scenarios.findIndex((scenario) => scenario.key === activeScenario.key);
+    }, [activeScenario, scenarios]);
+    if (!activeScenario) {
+        return (<div data-product-demo-stage className={cn("relative isolate min-h-[24rem] w-full overflow-hidden rounded-[2rem] border border-border/60 bg-gradient-to-br from-background via-background to-muted/40 shadow-2xl", enableMotion &&
+                "transition-transform duration-300 hover:-translate-y-1 motion-reduce:transition-none", className)} aria-label={ariaLabel}>
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.12),transparent_38%),linear-gradient(135deg,rgba(148,163,184,0.08),transparent_55%)]"/>
+        <div className="absolute inset-4 rounded-[1.5rem] border border-dashed border-border/60 bg-background/70"/>
+      </div>);
+    }
+    const windows = getWindowRenderData(activeScenario).sort((a, b) => WINDOW_ORDER.indexOf(a.key) - WINDOW_ORDER.indexOf(b.key));
+    return (<div data-product-demo-stage data-auto-cycle={autoCycle ? "true" : "false"} data-enable-motion={enableMotion ? "true" : "false"} data-scenario-count={scenarios.length} data-active-scenario-key={activeScenario.key} data-active-scenario-index={activeIndex} data-cycle-interval-ms={cycleIntervalMs} className={cn("relative isolate min-h-[30rem] w-full overflow-hidden rounded-[2rem] border border-border/60 bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.13),transparent_35%),linear-gradient(135deg,rgba(15,23,42,0.04),transparent_55%)] shadow-2xl", className)} aria-label={ariaLabel}>
+      <div className="absolute inset-0 bg-gradient-to-br from-background via-background/96 to-muted/45"/>
+      <div className="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-primary/8 to-transparent"/>
+
+      <div className="relative z-10 flex min-h-[30rem] flex-col gap-4 p-4 sm:p-5 lg:block lg:p-6">
+        <div className="flex flex-wrap items-center justify-between gap-3 pb-1">
+          <div>
+            {activeScenario.label && (<div className="text-[11px] font-medium uppercase tracking-[0.18em] text-primary/80">
+                {activeScenario.label}
+              </div>)}
+            {activeScenario.description && (<p className="mt-1 max-w-xl text-xs leading-relaxed text-muted-foreground">
+                {activeScenario.description}
+              </p>)}
+          </div>
+
+          <HighlightPills highlights={activeScenario.highlights}/>
+        </div>
+
+        <div className="grid gap-4 lg:hidden">
+          {windows.map((windowData) => {
+            const activeWindow = activeScenario.activeWindow === windowData.key ||
+                (!activeScenario.activeWindow &&
+                    windowData.key === "workflowStudio");
+            return (<DemoWindow key={windowData.key} window={windowData.meta} active={activeWindow} enableMotion={enableMotion}>
+                {windowData.content}
+              </DemoWindow>);
+        })}
+        </div>
+
+        <div className="hidden lg:block lg:h-[34rem] xl:h-[36rem]">
+          {windows.map((windowData) => {
+            const activeWindow = activeScenario.activeWindow === windowData.key ||
+                (!activeScenario.activeWindow &&
+                    windowData.key === "workflowStudio");
+            return (<motion.div key={windowData.key} initial={enableMotion ? { opacity: 0, y: 18, scale: 0.98 } : false} animate={{
+                    opacity: 1,
+                    y: 0,
+                    scale: activeWindow ? 1 : 0.985,
+                }} transition={enableMotion
+                    ? {
+                        type: "tween",
+                        duration: 0.45,
+                    }
+                    : { duration: 0 }} className={cn("will-change-transform", getWindowShellClass(windowData.key))} style={getTransformStyle(windowData.meta)}>
+                <DemoWindow window={windowData.meta} active={activeWindow} dimmed={!activeWindow} enableMotion={enableMotion} className="h-full">
+                  {windowData.content}
+                </DemoWindow>
+              </motion.div>);
+        })}
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/product-demo/DemoWindow.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ProductDemoWindowMeta } from "./types";
+export interface DemoWindowProps {
+    window: ProductDemoWindowMeta;
+    className?: string;
+    contentClassName?: string;
+    chromeClassName?: string;
+    bodyClassName?: string;
+    active?: boolean;
+    dimmed?: boolean;
+    enableMotion?: boolean;
+    showControls?: boolean;
+    showResizeHandle?: boolean;
+    children?: React.ReactNode;
+}
+export declare function DemoWindow({ window, className, contentClassName, chromeClassName, bodyClassName, active, dimmed, enableMotion, showControls, showResizeHandle, children, }: DemoWindowProps): React.JSX.Element;
+//# sourceMappingURL=DemoWindow.d.ts.map

package/dist/components/product-demo/DemoWindow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoWindow.d.ts","sourceRoot":"","sources":["../../../src/components/product-demo/DemoWindow.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAyB,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE5E,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,qBAAqB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,MAAc,EACd,MAAc,EACd,YAAmB,EACnB,YAAmB,EACnB,gBAAuB,EACvB,QAAQ,GACT,EAAE,eAAe,qBAqFjB"}

package/dist/components/product-demo/DemoWindow.jsx

@@ -0,0 +1,57 @@
+// 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 { cn } from "@nextworks/blocks-core";
+const STATUS_TONE_CLASSES = {
+    neutral: "border-border/60 bg-muted/60 text-muted-foreground",
+    info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+    success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+    warning: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
+};
+export function DemoWindow({ window, className, contentClassName, chromeClassName, bodyClassName, active = false, dimmed = false, enableMotion = true, showControls = true, showResizeHandle = true, children, }) {
+    var _a, _b, _c;
+    const statusTone = (_b = (_a = window.status) === null || _a === void 0 ? void 0 : _a.tone) !== null && _b !== void 0 ? _b : "neutral";
+    return (<section className={cn("group relative flex h-full min-h-[14rem] flex-col overflow-hidden rounded-[1.5rem] border border-border/60 bg-card/92 shadow-[0_18px_48px_-24px_rgba(15,23,42,0.45)] backdrop-blur-xl", enableMotion &&
+            "transition-[transform,opacity,box-shadow,border-color] duration-500 ease-out motion-reduce:transition-none", active &&
+            "border-primary/45 shadow-[0_24px_60px_-26px_rgba(59,130,246,0.45)]", dimmed && "opacity-90", className)} data-product-demo-window={window.key} data-active={active ? "true" : "false"} aria-label={window.title}>
+      <header className={cn("relative flex items-start justify-between gap-3 border-b border-border/50 px-4 py-3 sm:px-5", chromeClassName)}>
+        <div className="flex items-start gap-3">
+          {showControls && (<div className="mt-1 flex items-center gap-1.5 opacity-75 transition-opacity duration-200 group-hover:opacity-100">
+              <span className="h-2.5 w-2.5 rounded-full bg-rose-400/90"/>
+              <span className="h-2.5 w-2.5 rounded-full bg-amber-400/90"/>
+              <span className="h-2.5 w-2.5 rounded-full bg-emerald-400/90"/>
+            </div>)}
+
+          <div className="min-w-0">
+            <div className="flex flex-wrap items-center gap-2">
+              <h3 className="truncate text-sm font-semibold text-card-foreground sm:text-[0.95rem]">
+                {window.title}
+              </h3>
+              {window.badge && (<span className="rounded-full border border-border/60 bg-muted/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                  {window.badge}
+                </span>)}
+            </div>
+            {window.subtitle && (<p className="mt-1 truncate text-xs text-muted-foreground sm:text-[0.8rem]">
+                {window.subtitle}
+              </p>)}
+          </div>
+        </div>
+
+        {((_c = window.status) === null || _c === void 0 ? void 0 : _c.label) && (<span className={cn("shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em]", STATUS_TONE_CLASSES[statusTone])}>
+            {window.status.label}
+          </span>)}
+      </header>
+
+      <div className={cn("relative flex-1 px-4 py-4 sm:px-5 sm:py-5", bodyClassName)}>
+        <div className={cn("h-full", contentClassName)}>{children}</div>
+
+        {showResizeHandle && (<div aria-hidden="true" className="pointer-events-none absolute bottom-3 right-3 h-4 w-4 opacity-0 transition-opacity duration-200 group-hover:opacity-70">
+            <span className="absolute bottom-0 right-0 h-px w-3 rotate-45 bg-border/80"/>
+            <span className="absolute bottom-1 right-0 h-px w-2 rotate-45 bg-border/70"/>
+            <span className="absolute bottom-0 right-1 h-px w-2 rotate-45 bg-border/60"/>
+          </div>)}
+      </div>
+    </section>);
+}

package/dist/components/product-demo/KnowledgePanel.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ProductDemoKnowledgePanelState } from "./types";
+export interface KnowledgePanelProps {
+    state: ProductDemoKnowledgePanelState;
+}
+export declare function KnowledgePanel({ state }: KnowledgePanelProps): React.JSX.Element;
+//# sourceMappingURL=KnowledgePanel.d.ts.map

package/dist/components/product-demo/KnowledgePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KnowledgePanel.d.ts","sourceRoot":"","sources":["../../../src/components/product-demo/KnowledgePanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,8BAA8B,EAE/B,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,8BAA8B,CAAC;CACvC;AAgBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,qBAqG5D"}