@donotdev/adv-comps 0.0.2 → 0.0.4

package/dist/components/Roadmap/Roadmap.css

@@ -0,0 +1,248 @@
+/* packages/adv-comps/src/components/Roadmap/Roadmap.css */
+
+.dndev-roadmap {
+  width: 100%;
+  position: relative;
+}
+
+/* =========================
+   DESKTOP LAYOUT
+   ========================= */
+
+.dndev-roadmap-desktop {
+  position: relative;
+}
+
+/* Progress line container - from center of first icon to center of last icon */
+.dndev-roadmap-timeline {
+  position: absolute;
+  top: calc(var(--touch-target) / 2); /* Center of node */
+  left: calc(100% / var(--step-count) / 2); /* Center of first grid cell */
+  right: calc(100% / var(--step-count) / 2); /* Center of last grid cell */
+  height: 4px;
+  z-index: 0;
+}
+
+.dndev-roadmap-timeline-bg {
+  position: absolute;
+  inset: 0;
+  background: var(--muted);
+  border-radius: var(--radius-full);
+}
+
+.dndev-roadmap-timeline-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    var(--primary),
+    var(--accent),
+    var(--primary)
+  );
+  border-radius: var(--radius-full);
+  transition: width var(--dur-slow) var(--ease-in-out);
+}
+
+/* Grid for steps */
+.dndev-roadmap-grid {
+  display: grid;
+  gap: var(--gap-lg);
+  position: relative;
+  z-index: 1;
+}
+
+/* Individual step container */
+.dndev-roadmap-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+/* Timeline node (icon circle) */
+.dndev-roadmap-node {
+  width: var(--touch-target);
+  height: var(--touch-target);
+  border-radius: var(--radius-full);
+  border: var(--border-huge) solid var(--muted);
+  background: var(--background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--dur-normal) var(--ease-in-out);
+  margin-bottom: var(--gap-lg);
+  flex-shrink: 0;
+}
+
+.dndev-roadmap-node[data-active='true'] {
+  border-color: var(--accent);
+  box-shadow: 0 0 20px color-mix(in oklab, var(--accent) 40%, transparent);
+  transform: scale(1.1);
+}
+
+.dndev-roadmap-node svg {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  color: var(--muted-foreground);
+  transition: color var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-roadmap-node[data-active='true'] svg {
+  color: var(--accent);
+}
+
+/* Card styling - extra top padding for badge overlap, push footer to bottom */
+.dndev-roadmap-card {
+  position: relative;
+  height: 100%;
+  padding-top: calc(var(--gap-lg) + var(--gap-sm)) !important;
+  align-content: space-between;
+}
+
+.dndev-roadmap-step:hover .dndev-roadmap-card,
+.dndev-roadmap-card[data-active='true'] {
+  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
+  transform: translateY(calc(-1 * var(--gap-sm)));
+  box-shadow: var(--shadow-xl);
+}
+
+/* Phase badge - absolute overlay top-start */
+.dndev-roadmap-phase {
+  position: absolute;
+  top: var(--gap-sm);
+  left: var(--gap-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px var(--gap-sm); /* Tight vertical padding for badge */
+  border-radius: var(--radius-interactive);
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* Description - sm, foreground, start */
+.dndev-roadmap-description {
+  font-size: var(--font-size-sm);
+  color: var(--foreground);
+  line-height: var(--line-height);
+  margin: 0;
+  margin-bottom: var(--gap-md);
+  text-align: start;
+}
+
+/* =========================
+   MOBILE LAYOUT
+   ========================= */
+
+.dndev-roadmap-mobile {
+  position: relative;
+  padding-left: 0;
+  padding-bottom: var(--gap-lg);
+}
+
+/* Vertical timeline line - centered, with animated progress */
+.dndev-roadmap-timeline-vertical {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: var(--muted);
+  transform: translateX(-50%);
+  z-index: 0;
+  border-radius: var(--radius-full);
+}
+
+.dndev-roadmap-timeline-vertical-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: linear-gradient(
+    to bottom,
+    var(--primary),
+    var(--accent),
+    var(--primary)
+  );
+  border-radius: var(--radius-full);
+  transition: height var(--dur-slow) var(--ease-in-out);
+}
+
+/* Step container - flex column to stack Node -> Card */
+.dndev-roadmap-step-mobile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+}
+
+.dndev-roadmap-step-mobile:last-child {
+  margin-bottom: 0;
+}
+
+/* Mobile node - relative positioning, centered, with top margin from previous card */
+.dndev-roadmap-node-mobile {
+  position: relative;
+  left: auto;
+  top: auto;
+  margin-top: var(--gap-md); /* Space from previous card's bottom */
+  margin-bottom: var(--gap-md); /* Space before current card */
+  width: var(--touch-target);
+  height: var(--touch-target);
+  border-radius: var(--radius-full);
+  border: var(--border-huge) solid var(--muted);
+  background: var(--background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--dur-normal) var(--ease-in-out);
+  z-index: 1;
+}
+
+/* First step's icon has no top margin */
+.dndev-roadmap-step-mobile:first-child .dndev-roadmap-node-mobile {
+  margin-top: 0;
+}
+
+.dndev-roadmap-node-mobile[data-active='true'] {
+  border-color: var(--accent);
+  box-shadow: 0 0 15px color-mix(in oklab, var(--accent) 30%, transparent);
+}
+
+.dndev-roadmap-node-mobile svg {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  color: var(--muted-foreground);
+}
+
+.dndev-roadmap-node-mobile[data-active='true'] svg {
+  color: var(--accent);
+}
+
+/* Mobile card - full width, with active state */
+.dndev-roadmap-card-mobile {
+  position: relative;
+  width: 100%;
+  padding-top: calc(var(--gap-lg) + var(--gap-sm)) !important;
+  align-content: space-between;
+  background: var(--card);
+  z-index: 1;
+  transition: all var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-roadmap-card-mobile[data-active='true'] {
+  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
+  box-shadow: var(--shadow-lg);
+}
+
+/* Only apply hover on devices that support it */
+@media (hover: hover) {
+.dndev-roadmap-card-mobile:hover {
+  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
+  }
+}

package/dist/components/Roadmap/Roadmap.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @fileoverview Roadmap Component
+ * @description Timeline component with horizontal (desktop) / vertical (mobile) layout.
+ * Features animated progress line, glowing nodes, and lift-on-hover cards.
+ *
+ * @version 0.0.2
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import RoadmapContent from './RoadmapContent';
+import type { ComponentProps } from 'react';
+export type { RoadmapProps, RoadmapStep } from './RoadmapContent';
+declare const Roadmap: (props: ComponentProps<typeof RoadmapContent>) => import("react/jsx-runtime").JSX.Element;
+export default Roadmap;
+//# sourceMappingURL=Roadmap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Roadmap.d.ts","sourceRoot":"","sources":["../../../src/components/Roadmap/Roadmap.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAElE,QAAA,MAAM,OAAO,GAAoB,OAAO,cAAc,CAAC,OAAO,cAAc,CAAC,4CAE5E,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Roadmap/Roadmap.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// packages/adv-comps/src/components/Roadmap/Roadmap.tsx
+/**
+ * @fileoverview Roadmap Component
+ * @description Timeline component with horizontal (desktop) / vertical (mobile) layout.
+ * Features animated progress line, glowing nodes, and lift-on-hover cards.
+ *
+ * @version 0.0.2
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import RoadmapContent from './RoadmapContent';
+const Roadmap = function Roadmap(props) {
+    return _jsx(RoadmapContent, { ...props });
+};
+export default Roadmap;

package/dist/components/Roadmap/RoadmapContent.d.ts

@@ -0,0 +1,28 @@
+import type { LucideIcon } from 'lucide-react';
+import { type CardContent, type CardVariant } from '@donotdev/components';
+import './Roadmap.css';
+export interface RoadmapStep {
+    /** Phase label (e.g., "Week 1", "Days 1-2") */
+    phase: string;
+    /** Lucide icon for the timeline node */
+    icon: LucideIcon;
+    /** Step title */
+    title: string;
+    /** Step subtitle */
+    subtitle: string;
+    /** Optional description paragraph */
+    description?: string;
+    /** Optional content - shown in popover on click */
+    content?: CardContent;
+}
+export interface RoadmapProps {
+    /** Array of roadmap steps */
+    steps: RoadmapStep[];
+    /** Optional className */
+    className?: string;
+    /** Card variant (default, glass, etc.) */
+    variant?: CardVariant;
+}
+declare const RoadmapContent: ({ steps, className, variant, }: RoadmapProps) => import("react/jsx-runtime").JSX.Element;
+export default RoadmapContent;
+//# sourceMappingURL=RoadmapContent.d.ts.map

package/dist/components/Roadmap/RoadmapContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoadmapContent.d.ts","sourceRoot":"","sources":["../../../src/components/Roadmap/RoadmapContent.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,WAAW;IAC1B,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,IAAI,EAAE,UAAU,CAAC;IACjB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,6BAA6B;IAC7B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,QAAA,MAAM,cAAc,GAA2B,gCAI5C,YAAY,4CAkGd,CAAC;AAsDF,eAAe,cAAc,CAAC"}

package/dist/components/Roadmap/RoadmapContent.js

@@ -0,0 +1,47 @@
+// packages/adv-comps/src/components/Roadmap/RoadmapContent.tsx
+/**
+ * @fileoverview Roadmap Content Component
+ * @description Timeline component with horizontal (desktop) / vertical (mobile) layout.
+ * Features animated progress line, glowing nodes, and cards with content at bottom.
+ *
+ * @version 0.0.4
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { cn, Card, renderCardContent, useIntersectionObserver, } from '@donotdev/components';
+import { useBreakpoint } from '@donotdev/core';
+import './Roadmap.css';
+const RoadmapContent = function RoadmapContent({ steps, className, variant, }) {
+    const [activeStep, setActiveStep] = useState(0);
+    const isLaptop = useBreakpoint('isLaptopOrDesktop');
+    const progressPercentage = steps.length > 1 ? (activeStep / (steps.length - 1)) * 100 : 0;
+    // Desktop layout
+    if (isLaptop) {
+        return (_jsx("div", { className: cn('dndev-roadmap', className), children: _jsxs("div", { className: "dndev-roadmap-desktop", style: { ['--step-count']: steps.length }, children: [_jsxs("div", { className: "dndev-roadmap-timeline", children: [_jsx("div", { className: "dndev-roadmap-timeline-bg" }), _jsx("div", { className: "dndev-roadmap-timeline-progress", style: { width: `${progressPercentage}%` } })] }), _jsx("div", { className: "dndev-roadmap-grid", style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` }, children: steps.map((step, index) => {
+                            const Icon = step.icon;
+                            const isActive = index <= activeStep;
+                            const isCurrent = index === activeStep;
+                            return (_jsxs("div", { className: "dndev-roadmap-step", onMouseEnter: () => setActiveStep(index), children: [_jsx("div", { className: "dndev-roadmap-node", "data-active": isActive, children: _jsx(Icon, {}) }), _jsxs(Card, { title: step.title, subtitle: step.subtitle, variant: variant, className: "dndev-roadmap-card", "data-active": isCurrent, footer: step.content ? (_jsx("div", { className: "dndev-roadmap-content", children: renderCardContent(step.content) })) : undefined, children: [_jsx("span", { className: "dndev-roadmap-phase", children: step.phase }), step.description && (_jsx("p", { className: "dndev-roadmap-description", children: step.description }))] })] }, index));
+                        }) })] }) }));
+    }
+    // Mobile layout with scroll-based activation
+    return (_jsx("div", { className: cn('dndev-roadmap', className), children: _jsxs("div", { className: "dndev-roadmap-mobile", children: [_jsx("div", { className: "dndev-roadmap-timeline-vertical", children: _jsx("div", { className: "dndev-roadmap-timeline-vertical-progress", style: { height: `${progressPercentage}%` } }) }), steps.map((step, index) => (_jsx(RoadmapStepMobile, { step: step, index: index, isActive: index <= activeStep, variant: variant, onEnter: () => setActiveStep(index) }, index)))] }) }));
+};
+// Mobile step with IntersectionObserver for scroll-based activation
+const RoadmapStepMobile = ({ step, index, isActive, variant, onEnter }) => {
+    const { ref, isIntersecting } = useIntersectionObserver({
+        threshold: 0.5,
+        rootMargin: '0px 0px -20% 0px',
+    });
+    useEffect(() => {
+        if (typeof window !== 'undefined' && isIntersecting) {
+            onEnter();
+        }
+    }, [isIntersecting, onEnter]);
+    const Icon = step.icon;
+    return (_jsxs("div", { ref: ref, className: "dndev-roadmap-step-mobile", children: [_jsx("div", { className: "dndev-roadmap-node-mobile", "data-active": isActive, children: _jsx(Icon, {}) }), _jsxs(Card, { title: step.title, subtitle: step.subtitle, variant: variant, className: "dndev-roadmap-card-mobile", "data-active": isActive, footer: step.content ? (_jsx("div", { className: "dndev-roadmap-content", children: renderCardContent(step.content) })) : undefined, children: [_jsx("span", { className: "dndev-roadmap-phase", children: step.phase }), step.description && (_jsx("p", { className: "dndev-roadmap-description", children: step.description }))] })] }));
+};
+export default RoadmapContent;

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

@@ -0,0 +1,3 @@
+export { default } from './Roadmap';
+export type { RoadmapProps, RoadmapStep } from './Roadmap';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Roadmap/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/Roadmap/index.js

@@ -0,0 +1,2 @@
+// packages/adv-comps/src/components/Roadmap/index.ts
+export { default } from './Roadmap';

package/dist/components/StackedCards/StackedCards.css

@@ -39,17 +39,6 @@
     }
   }
 
-  &:hover {
-    transform: translateX(0)
-      translateY(
-        calc(
-          -1 * ((var(--dynamic-height) - 3.5rem) + var(--gap-lg)) *
-            max(var(--i) - var(--e), 0)
-        )
-      )
-      translateY(-8px);
-  }
-
   @media (prefers-reduced-motion: reduce) {
     transition: none;
     transform: none !important;
@@ -60,14 +49,15 @@
          STACKED CARDS - STACK CONTENT
          =========================== */
 
-.stack-content {
+/* Override Card's grid for stack-content - needs flex for custom layout */
+.dndev-card > .stack-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
   height: calc(100% - 3.5rem);
   overflow-y: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-sm);
 
   &::-webkit-scrollbar {
     display: none;
@@ -142,11 +132,14 @@
 .dndev-stacked-cards-left {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-sm);
-  padding-inline: var(--gap-md);
+  gap: var(--gap-md);
   text-align: start;
 }
 
+.dndev-stacked-cards-left .dndev-card-header + p {
+  margin-top: 0;
+}
+
 .dndev-stacked-cards-separator {
   display: block;
 
@@ -172,7 +165,6 @@
   flex-direction: column;
   justify-content: center;
   gap: var(--gap-sm);
-  padding-inline: var(--gap-md);
   text-align: start;
 }
 

package/dist/components/StackedCards/StackedCardsContent.d.ts

@@ -76,6 +76,14 @@ export type StackedCardsProps = {
     variant?: SurfaceVariantProps['variant'];
     /** Optional aria-label for the list */
     ariaLabel?: string;
+    /**
+     * Intersection threshold for revealing next card (0.0 - 1.0)
+     * - 0.0 = reveals when any part is visible
+     * - 0.5 = reveals when 50% visible (default)
+     * - 1.0 = reveals when 100% visible (full card must be in view)
+     * @default 0.5
+     */
+    threshold?: number;
     className?: string;
     style?: CSSProperties;
 };

package/dist/components/StackedCards/StackedCardsContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackedCardsContent.d.ts","sourceRoot":"","sources":["../../../src/components/StackedCards/StackedCardsContent.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,sBAAsB,CAAC;AACzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAkChE;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C;;;;;;;;;;;;;;;;;;OAkBG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iDAAiD;IACjD,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAUF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,QAAA,MAAM,mBAAmB,EAAE,aAAa,CAAC,iBAAiB,CAoDzD,CAAC;AAgJF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"StackedCardsContent.d.ts","sourceRoot":"","sources":["../../../src/components/StackedCards/StackedCardsContent.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAkChE;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C;;;;;;;;;;;;;;;;;;OAkBG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iDAAiD;IACjD,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,QAAA,MAAM,mBAAmB,EAAE,aAAa,CAAC,iBAAiB,CAsDzD,CAAC;AAkIF,eAAe,mBAAmB,CAAC"}

package/dist/components/StackedCards/StackedCardsContent.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @author AMBROISE PARK Consulting
  */
 import { memo, useEffect, useRef, useState, } from 'react';
-import { cn, Button, IconBox, Separator, SEPARATOR_VARIANT, Text, useIntersectionObserver, getVariantDataAttrs, surfaceVariants, } from '@donotdev/components';
+import { cn, Button, Separator, SEPARATOR_VARIANT, Text, useIntersectionObserver, getVariantDataAttrs, surfaceVariants, renderCardHeader, renderCardContent, } from '@donotdev/components';
 /**
  * Stacked Cards Animation Configuration
  *
@@ -26,7 +26,7 @@ const STACKED_CARDS_CONFIG = {
      *
      * TO REQUIRE MORE SCROLL: Increase this value (0.3 → 0.5 → 0.7)
      */
-    intersectionThreshold: 0.3,
+    intersectionThreshold: 0.5,
     /**
      * Intersection Observer root margin (bottom)
      * Format: 'top right bottom left'
@@ -39,12 +39,6 @@ const STACKED_CARDS_CONFIG = {
     // Removed viewportTopThreshold and viewportBottomThreshold
     // IntersectionObserver handles all visibility detection (more performant, single source of truth)
 };
-// Icon renderer component
-const IconRenderer = memo(({ icon }) => {
-    if (!icon)
-        return null;
-    return _jsx(IconBox, { icon: icon, ariaHidden: true });
-});
 /**
  * StackedCardsContent Component - Animated waterfall card stacking
  *
@@ -119,7 +113,7 @@ const IconRenderer = memo(({ icon }) => {
  * ];
  * ```
  */
-const StackedCardsContent = ({ items, className, ariaLabel, variant, style, }) => {
+const StackedCardsContent = ({ items, className, ariaLabel, variant, style, threshold = STACKED_CARDS_CONFIG.intersectionThreshold, }) => {
     const [entered, setEntered] = useState(0);
     const containerRef = useRef(null);
     // Calculate maximum height from all items to ensure all cards have the same height
@@ -135,12 +129,12 @@ const StackedCardsContent = ({ items, className, ariaLabel, variant, style, }) =
         const maxOrder = heightOrder[max] || 2;
         return currentOrder > maxOrder ? current : max;
     }, 'medium');
-    return (_jsx("div", { className: cn('dndev-relative dndev-stacked-cards-container', className), ref: containerRef, "aria-label": ariaLabel, style: { ['--e']: entered.toString() }, children: items.map((item, index) => (_jsx(StackedCardsItem, { item: item, index: index, entered: entered, onEnter: () => setEntered(index), totalItems: items.length, cardProps: { variant, style }, maxEstimatedHeight: maxEstimatedHeight, maxCustomHeight: maxCustomHeight }, index))) }));
+    return (_jsx("div", { className: cn('dndev-relative dndev-stacked-cards-container', className), ref: containerRef, "aria-label": ariaLabel, style: { ['--e']: entered.toString() }, children: items.map((item, index) => (_jsx(StackedCardsItem, { item: item, index: index, entered: entered, onEnter: () => setEntered(index), totalItems: items.length, cardProps: { variant, style }, maxEstimatedHeight: maxEstimatedHeight, maxCustomHeight: maxCustomHeight, threshold: threshold }, index))) }));
 };
 // Individual stacked card item with working logic matching the CSS
-const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps, maxEstimatedHeight, maxCustomHeight, }) => {
+const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps, maxEstimatedHeight, maxCustomHeight, threshold, }) => {
     const { ref, isIntersecting } = useIntersectionObserver({
-        threshold: STACKED_CARDS_CONFIG.intersectionThreshold,
+        threshold,
         rootMargin: STACKED_CARDS_CONFIG.intersectionRootMargin,
     });
     useEffect(() => {
@@ -148,11 +142,9 @@ const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps
             onEnter();
         }
     }, [isIntersecting, onEnter]);
-    const contentArray = Array.isArray(item.content)
-        ? item.content
-        : item.content
-            ? [item.content]
-            : [];
+    const header = renderCardHeader(item.icon, item.title, item.subtitle);
+    const contentNode = renderCardContent(item.content);
+    const hasContent = !!contentNode;
     return (_jsx("section", { ref: ref, className: "dndev-relative", style: {
             zIndex: totalItems - index - 1,
         }, children: _jsx("div", { className: cn('dndev-relative dndev-overflow-hidden stack', 'dndev-min-w-0'), "data-size": maxCustomHeight ? undefined : maxEstimatedHeight, "data-stacked": index > entered ? 'true' : 'false', style: {
@@ -162,10 +154,7 @@ const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps
                     ['--dynamic-height']: `${maxCustomHeight}px`,
                 }),
                 ...cardProps.style,
-            }, children: _jsxs("div", { className: cn(surfaceVariants({ variant: cardProps.variant }), 'dndev-relative dndev-overflow-hidden dndev-h-full'), ...getVariantDataAttrs({ variant: cardProps.variant }), style: {
-                    padding: 'var(--gap-sm)',
-                    ...cardProps.style,
-                }, children: [_jsxs("div", { className: "stack-content", children: [_jsxs("div", { className: "dndev-stacked-cards-body", children: [_jsxs("div", { className: "dndev-stacked-cards-left", children: [_jsxs("div", { className: "dndev-stacked-cards-header", children: [item.icon && _jsx(IconRenderer, { icon: item.icon }), item.title && _jsx(Text, { as: "h3", children: item.title })] }), item.subtitle && (_jsx(Text, { as: "p", level: "h4", variant: "primary", children: item.subtitle })), item.description && (_jsx(Text, { as: "p", level: "h4", variant: "muted", children: item.description }))] }), _jsx(Separator, { orientation: "vertical", variant: SEPARATOR_VARIANT.ACCENT, className: "dndev-stacked-cards-separator" }), contentArray.length > 0 && (_jsx("div", { className: "dndev-stacked-cards-right", children: contentArray.map((point, idx) => (_jsx(Text, { as: "div", level: "body", variant: "muted", children: point }, idx))) }))] }), item.cta && (_jsx("div", { className: "dndev-stacked-cards-cta", children: _jsx(Button, { onClick: item.onClick, variant: item.cta.variant || 'primary', icon: item.cta.icon, children: item.cta.text }) })), _jsx("div", { className: "dndev-stacked-cards-spacer" })] }), _jsx("div", { className: "dndev-stacked-cards-number", children: item.number
+            }, children: _jsxs("div", { className: cn('dndev-card', surfaceVariants({ variant: cardProps.variant }), 'dndev-relative dndev-overflow-hidden dndev-h-full'), ...getVariantDataAttrs({ variant: cardProps.variant }), "data-role": "card", "data-clickable": item.onClick ? 'true' : undefined, onClick: item.onClick, style: cardProps.style, children: [_jsxs("div", { className: "stack-content", children: [_jsxs("div", { className: "dndev-stacked-cards-body", children: [_jsxs("div", { className: "dndev-stacked-cards-left", children: [header, item.description && (_jsx(Text, { as: "p", level: "small", variant: "muted", children: item.description }))] }), _jsx(Separator, { orientation: "vertical", variant: SEPARATOR_VARIANT.ACCENT, className: "dndev-stacked-cards-separator" }), hasContent && (_jsx("div", { className: "dndev-stacked-cards-right", children: contentNode }))] }), item.cta && (_jsx("div", { className: "dndev-stacked-cards-cta", children: _jsx(Button, { onClick: item.onClick, variant: item.cta.variant || 'primary', icon: item.cta.icon, children: item.cta.text }) })), _jsx("div", { className: "dndev-stacked-cards-spacer" })] }), _jsx("div", { className: "dndev-stacked-cards-number", children: item.number
                             ? String(item.number)
                             : String(index + 1).padStart(2, '0') })] }) }) }));
 };

package/dist/index.css

@@ -1 +1 @@
-:root{--crawl-perspective: 600px;--crawl-tilt: 40deg;--crawl-body-size: clamp(1.6rem, 1rem + 2.5vw, 3rem);--crawl-title-size: clamp(3rem, 1.5rem + 6vw, 8rem);--crawl-intro-font-size: clamp(2rem, 1rem + 3vw, 4rem);--crawl-content-line: 1.2;--crawl-body-margin: .9em;--crawl-title-margin: 3em;--crawl-text-color: #ffc909;--crawl-intro-color: #4a9eff;--crawl-text-shadow: 0 0 12px rgba(255, 201, 9, 1);--crawl-intro-shadow: 0 0 30px rgba(74, 158, 255, .9), 0 0 60px rgba(74, 158, 255, .6), 0 0 90px rgba(74, 158, 255, .4), 0 0 120px rgba(74, 158, 255, .2);--crawl-intro-duration: 2s}.dndev-crawl-container{position:relative;background:#000;contain:layout style paint;perspective:var(--crawl-perspective);backface-visibility:hidden;width:150vw;left:50%;transform:translate3d(-50%,0,0);margin:0;margin-top:0!important;padding:0;max-width:none;min-height:calc(100dvh - var(--header-height));overflow:hidden}.dndev-container>.dndev-crawl-container:first-child{margin-top:0!important}.dndev-container:has(>.dndev-crawl-container:first-child){margin-top:0!important}.dndev-crawl-stars{position:absolute;inset:0;z-index:1;contain:layout style paint;pointer-events:none}.dndev-crawl-stars-layer-1,.dndev-crawl-stars-layer-2,.dndev-crawl-stars-layer-3{position:absolute;inset:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='500' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='23' cy='17' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='47' cy='89' r='1' fill='white' opacity='0.8'/%3E%3Ccircle cx='91' cy='43' r='0.5' fill='white' opacity='1'/%3E%3Ccircle cx='131' cy='67' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='163' cy='19' r='0.5' fill='%23ddd' opacity='0.8'/%3E%3Ccircle cx='197' cy='73' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='211' cy='41' r='0.5' fill='white' opacity='0.7'/%3E%3Ccircle cx='233' cy='97' r='1' fill='%23eee' opacity='0.9'/%3E%3Ccircle cx='251' cy='13' r='0.5' fill='white' opacity='1'/%3E%3Ccircle cx='277' cy='59' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='293' cy='83' r='0.5' fill='%23ddd' opacity='0.8'/%3E%3Ccircle cx='317' cy='31' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='337' cy='71' r='0.5' fill='white' opacity='0.8'/%3E%3Ccircle cx='359' cy='7' r='1' fill='%23eee' opacity='0.9'/%3E%3Ccircle cx='373' cy='53' r='0.5' fill='white' opacity='1'/%3E%3Ccircle cx='389' cy='79' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='401' cy='23' r='0.5' fill='%23ddd' opacity='0.8'/%3E%3Ccircle cx='419' cy='61' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='433' cy='37' r='0.5' fill='white' opacity='0.7'/%3E%3Ccircle cx='449' cy='87' r='1' fill='%23eee' opacity='0.9'/%3E%3C/svg%3E");background-repeat:repeat;pointer-events:none}.dndev-crawl-stars-layer-1{--layer-base-opacity: 1;opacity:1;background-size:400px 250px;animation:dndev-stars-twinkle 4s ease-in-out infinite;animation-delay:0s}.dndev-crawl-stars-layer-2{--layer-base-opacity: .7;opacity:.7;background-size:300px 200px;animation:dndev-stars-twinkle 2.5s ease-in-out infinite;animation-delay:1s}.dndev-crawl-stars-layer-3{--layer-base-opacity: .5;opacity:.5;background-size:200px 150px;animation:dndev-stars-twinkle 1.8s ease-in-out infinite;animation-delay:2s}@keyframes dndev-stars-twinkle{0%,to{opacity:var(--layer-base-opacity)}50%{opacity:calc(var(--layer-base-opacity) * 1.43)}}.dndev-crawl-3d-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;perspective:var(--crawl-perspective);transform-style:preserve-3d;contain:layout style;backface-visibility:hidden;will-change:auto}.dndev-crawl-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;transform:rotateX(var(--crawl-tilt)) translateZ(0);transform-style:preserve-3d;backface-visibility:hidden;contain:layout style}.dndev-crawl-content{color:var(--crawl-text-color);font-size:var(--crawl-body-size);line-height:var(--crawl-content-line);font-weight:700;text-align:center;text-shadow:var(--crawl-text-shadow);position:relative;z-index:2;width:60%;max-width:60%;margin-left:auto;margin-right:auto;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dndev-crawl-title,.dndev-crawl-content h1,.dndev-crawl-content h2,.dndev-crawl-content p{color:var(--crawl-text-color);font-weight:700;text-align:center;text-shadow:var(--crawl-text-shadow);@media(width<=1023px){text-shadow:none}}.dndev-crawl-title,.dndev-crawl-content h1,.dndev-crawl-content h2{font-size:var(--crawl-title-size);margin-bottom:var(--crawl-title-margin);padding:0;margin-left:0;margin-right:0}.dndev-crawl-content p{font-size:var(--crawl-body-size);margin-bottom:var(--crawl-body-margin)}@media(width>=1024px){.dndev-crawl-title{white-space:nowrap}}.dndev-crawl-intro{background:linear-gradient(180deg,#000c,#0006,#000c)}.dndev-crawl-intro-content{color:var(--crawl-intro-color);font-size:var(--crawl-intro-font-size);font-weight:900;text-align:center;text-shadow:var(--crawl-intro-shadow);letter-spacing:.1em;line-height:1.2;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:60%;max-width:60%;margin:0 auto;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:normal}.dndev-crawl-intro-mobile{animation:dndev-intro-fade-mobile var(--crawl-intro-duration) ease-in-out forwards}.dndev-crawl-intro-desktop{animation:dndev-intro-fade-desktop calc(var(--crawl-intro-duration) * 2) ease-in-out forwards}@keyframes dndev-crawl-animation{0%{transform:rotateX(var(--crawl-tilt)) translate3d(0,100dvh,0)}to{transform:rotateX(var(--crawl-tilt)) translate3d(0,calc(-1 * var(--crawl-content-height)),0)}}@media(prefers-reduced-motion:reduce){.dndev-crawl-text{animation:none!important}.dndev-crawl-3d-container{transform:rotateX(0) translateZ(0)!important}.dndev-crawl-content{position:static!important;transform:none!important;animation:none!important}.dndev-crawl-intro-mobile,.dndev-crawl-intro-desktop{animation:none!important}}@media(prefers-contrast:high){.dndev-crawl-stars{filter:contrast(1.5) brightness(1.2)}}.dndev-crawl-reduced-motion{animation:none!important;transform:none!important;.dndev-crawl-content{position:static!important;transform:none!important}.dndev-crawl-stars-layer-1,.dndev-crawl-stars-layer-2,.dndev-crawl-stars-layer-3{animation:none!important}}.stack{width:100%;height:var(--dynamic-height);contain:layout;transform-origin:center top;transform:translate(0) translateY(calc(-1 * ((var(--dynamic-height) - 3.5rem) + var(--gap-lg)) * max(var(--i) - var(--e),0)));transition:transform var(--dur-heavy) var(--ease-heavy);will-change:var(--will-change-transform);&[data-size=small]{--dynamic-height: 24rem;@media(width>=1024px){--dynamic-height: 16rem}}&[data-size=medium]{--dynamic-height: 28rem;@media(width>=1024px){--dynamic-height: 20rem}}&[data-size=large]{--dynamic-height: 36rem;@media(width>=1024px){--dynamic-height: 28rem}}&:hover{transform:translate(0) translateY(calc(-1 * ((var(--dynamic-height) - 3.5rem) + var(--gap-lg)) * max(var(--i) - var(--e),0))) translateY(-8px)}@media(prefers-reduced-motion:reduce){transition:none;transform:none!important}}.stack-content{height:calc(100% - 3.5rem);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;display:flex;flex-direction:column;gap:var(--gap-sm);&::-webkit-scrollbar{display:none}}.stack[data-stacked=true] .stack-content{opacity:0;pointer-events:none}.stack[data-stacked=true] .dndev-stacked-cards-number{opacity:1}.dndev-stacked-cards-spacer{height:3.5rem}.dndev-stacked-cards-number{position:absolute;left:var(--gap-lg);bottom:0;height:3.5rem;display:flex;align-items:center;font-size:var(--font-size-sm);font-weight:500;color:var(--muted-foreground);z-index:10;opacity:1;transition:opacity var(--dur-heavy) var(--ease-heavy)}.dndev-stacked-cards-container{display:flex;flex-direction:column;width:100%;max-width:min(100%,var(--content-width, 60rem));margin-inline:auto;gap:var(--gap-lg);position:relative;z-index:0}.dndev-stacked-cards-header{display:flex;align-items:center;gap:var(--gap-sm)}.dndev-stacked-cards-body{display:flex;flex-direction:column;gap:var(--gap-sm);width:100%;align-items:start;@media(width>=1024px){display:grid;grid-template-columns:1fr auto 1fr;width:100%;align-items:center}}.dndev-stacked-cards-left{display:flex;flex-direction:column;gap:var(--gap-sm);padding-inline:var(--gap-md);text-align:start}.dndev-stacked-cards-separator{display:block;@media(width<1024px){width:80%!important;height:2px!important;margin-inline:auto;margin-block:var(--gap-sm);align-self:center}@media(width>=1024px){width:1px!important;height:100%!important;align-self:stretch}}.dndev-stacked-cards-right{display:flex;flex-direction:column;justify-content:center;gap:var(--gap-sm);padding-inline:var(--gap-md);text-align:start}.dndev-stacked-cards-cta{padding-top:var(--gap-sm)}[data-marquee-track]{will-change:var(--will-change-transform);animation:universal-marquee var(--marquee-duration, 0ms) var(--marquee-easing, linear) infinite;animation-direction:var(--marquee-direction, normal);&[data-marquee-direction=vertical]{--transform-start: translateY(0);--transform-end: translateY(calc(-1 * var(--marquee-distance, 0px)))}&[data-marquee-behavior=bounce]{animation-name:universal-float;--transform-start: translateX(0);--transform-mid: translateX(calc(-1 * var(--marquee-distance, 0px)));--opacity-start: 1;--opacity-mid: 1}@media(prefers-reduced-motion:reduce){animation:none!important;transform:none!important}.group:hover &,.group:focus-within &{animation-play-state:paused}}.dndev-reveal-container{contain:layout style;will-change:contents;&.dndev-reveal-visible .dndev-reveal-item{opacity:1;transform:translateZ(0);animation:dndev-reveal-cleanup var(--reveal-duration) var(--reveal-easing) forwards;@media(prefers-reduced-motion:reduce){transition:none!important;opacity:1!important;transform:none!important;will-change:auto}}}.dndev-reveal-item{opacity:0;transform:translateZ(0);will-change:transform,opacity;backface-visibility:hidden;transition:opacity var(--reveal-duration) var(--reveal-easing),transform var(--reveal-duration) var(--reveal-easing);transition-delay:var(--reveal-delay, 0ms);&[data-direction=left]{transform:translate3d(calc(-1 * var(--reveal-distance)),0,0)}&[data-direction=right]{transform:translate3d(var(--reveal-distance),0,0)}&[data-direction=top]{transform:translate3d(0,calc(-1 * var(--reveal-distance)),0)}&[data-direction=bottom]{transform:translate3d(0,var(--reveal-distance),0)}&[data-direction=fade-in]{transform:translateZ(0)}&[data-visible=true]{opacity:1;transform:translateZ(0)}@media(prefers-reduced-motion:reduce){transition:none!important;opacity:1!important;transform:none!important;will-change:auto}}.breath-lung-442{animation:none;will-change:clip-path;&.active{animation:breath-cycle-442 var(--breath-cycle-duration, 16s) ease-in-out var(--breath-cycles, 3)}&.paused{animation-play-state:paused}}.breath-lung-sigh{animation:none;will-change:clip-path;&.active{animation:breath-cycle-sigh var(--breath-cycle-duration, 10s) ease-in-out var(--breath-cycles, 3)}&.paused{animation-play-state:paused}}.network-node{fill:var(--foreground);animation:universal-float 4s ease-in-out infinite;--opacity-start: .3;--opacity-mid: .8;--transform-start: scale(1);--transform-mid: scale(1.1)}.network-line{stroke:var(--foreground);stroke-width:1;animation:universal-float 6s ease-in-out infinite;--opacity-start: .1;--opacity-mid: .5;--transform-start: scale(1);--transform-mid: scale(1)}.wave-flow{background:linear-gradient(45deg,transparent 30%,color-mix(in oklab,var(--accent) 20%,transparent) 50%,transparent 70%);animation:universal-float 8s ease-in-out infinite;--transform-start: translateX(-20%) rotate(0deg);--transform-mid: translateX(20%) rotate(3deg)}.particle-float{animation:universal-slide 10s linear infinite;--opacity-start: .2;--opacity-end: 0;--transform-start: translateY(0px) rotate(0deg);--transform-end: translateY(-100px) rotate(360deg)}.geometric-rotate{animation:universal-float 20s linear infinite;--opacity-start: .1;--opacity-mid: .2;--transform-start: rotate(0deg) scale(1);--transform-mid: rotate(180deg) scale(1.1)}.perspective-1000{perspective:1000px}.transform-style-preserve-3d{transform-style:preserve-3d}.dndev-animate-fade-in-up{animation:universal-slide var(--dur-heavy) ease-out forwards}.animation-delay-100{animation-delay:.1s}.dndev-marketing-stack{display:grid;gap:var(--gap-md)}.dndev-marketing-cluster{display:flex;gap:var(--gap-sm);align-items:center;justify-content:center}
+.dndev-roadmap{width:100%;position:relative}.dndev-roadmap-desktop{position:relative}.dndev-roadmap-timeline{position:absolute;top:calc(var(--touch-target) / 2);left:calc(100% / var(--step-count) / 2);right:calc(100% / var(--step-count) / 2);height:4px;z-index:0}.dndev-roadmap-timeline-bg{position:absolute;inset:0;background:var(--muted);border-radius:var(--radius-full)}.dndev-roadmap-timeline-progress{position:absolute;top:0;left:0;height:100%;background:linear-gradient(to right,var(--primary),var(--accent),var(--primary));border-radius:var(--radius-full);transition:width var(--dur-slow) var(--ease-in-out)}.dndev-roadmap-grid{display:grid;gap:var(--gap-lg);position:relative;z-index:1}.dndev-roadmap-step{display:flex;flex-direction:column;align-items:center;cursor:pointer}.dndev-roadmap-node{width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-full);border:var(--border-huge) solid var(--muted);background:var(--background);display:flex;align-items:center;justify-content:center;transition:all var(--dur-normal) var(--ease-in-out);margin-bottom:var(--gap-lg);flex-shrink:0}.dndev-roadmap-node[data-active=true]{border-color:var(--accent);box-shadow:0 0 20px color-mix(in oklab,var(--accent) 40%,transparent);transform:scale(1.1)}.dndev-roadmap-node svg{width:var(--icon-md);height:var(--icon-md);color:var(--muted-foreground);transition:color var(--dur-normal) var(--ease-in-out)}.dndev-roadmap-node[data-active=true] svg{color:var(--accent)}.dndev-roadmap-card{position:relative;height:100%;padding-top:calc(var(--gap-lg) + var(--gap-sm))!important;align-content:space-between}.dndev-roadmap-step:hover .dndev-roadmap-card,.dndev-roadmap-card[data-active=true]{border-color:color-mix(in oklab,var(--accent) 50%,var(--border));transform:translateY(calc(-1 * var(--gap-sm)));box-shadow:var(--shadow-xl)}.dndev-roadmap-phase{position:absolute;top:var(--gap-sm);left:var(--gap-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.05em;padding:2px var(--gap-sm);border-radius:var(--radius-interactive);background:var(--accent);color:var(--accent-foreground)}.dndev-roadmap-description{font-size:var(--font-size-sm);color:var(--foreground);line-height:var(--line-height);margin:0;margin-bottom:var(--gap-md);text-align:start}.dndev-roadmap-mobile{position:relative;padding-left:0;padding-bottom:var(--gap-lg)}.dndev-roadmap-timeline-vertical{position:absolute;left:50%;top:0;bottom:0;width:4px;background:var(--muted);transform:translate(-50%);z-index:0;border-radius:var(--radius-full)}.dndev-roadmap-timeline-vertical-progress{position:absolute;top:0;left:0;width:100%;background:linear-gradient(to bottom,var(--primary),var(--accent),var(--primary));border-radius:var(--radius-full);transition:height var(--dur-slow) var(--ease-in-out)}.dndev-roadmap-step-mobile{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;cursor:pointer}.dndev-roadmap-step-mobile:last-child{margin-bottom:0}.dndev-roadmap-node-mobile{position:relative;left:auto;top:auto;margin-top:var(--gap-md);margin-bottom:var(--gap-md);width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-full);border:var(--border-huge) solid var(--muted);background:var(--background);display:flex;align-items:center;justify-content:center;transition:all var(--dur-normal) var(--ease-in-out);z-index:1}.dndev-roadmap-step-mobile:first-child .dndev-roadmap-node-mobile{margin-top:0}.dndev-roadmap-node-mobile[data-active=true]{border-color:var(--accent);box-shadow:0 0 15px color-mix(in oklab,var(--accent) 30%,transparent)}.dndev-roadmap-node-mobile svg{width:var(--icon-md);height:var(--icon-md);color:var(--muted-foreground)}.dndev-roadmap-node-mobile[data-active=true] svg{color:var(--accent)}.dndev-roadmap-card-mobile{position:relative;width:100%;padding-top:calc(var(--gap-lg) + var(--gap-sm))!important;align-content:space-between;background:var(--card);z-index:1;transition:all var(--dur-normal) var(--ease-in-out)}.dndev-roadmap-card-mobile[data-active=true]{border-color:color-mix(in oklab,var(--accent) 50%,var(--border));box-shadow:var(--shadow-lg)}@media(hover:hover){.dndev-roadmap-card-mobile:hover{border-color:color-mix(in oklab,var(--accent) 30%,var(--border))}}:root{--crawl-perspective: 600px;--crawl-tilt: 40deg;--crawl-body-size: clamp(1.6rem, 1rem + 2.5vw, 3rem);--crawl-title-size: clamp(3rem, 1.5rem + 6vw, 8rem);--crawl-intro-font-size: clamp(2rem, 1rem + 3vw, 4rem);--crawl-content-line: 1.2;--crawl-body-margin: .9em;--crawl-title-margin: 3em;--crawl-text-color: #ffc909;--crawl-intro-color: #4a9eff;--crawl-text-shadow: 0 0 12px rgba(255, 201, 9, 1);--crawl-intro-shadow: 0 0 30px rgba(74, 158, 255, .9), 0 0 60px rgba(74, 158, 255, .6), 0 0 90px rgba(74, 158, 255, .4), 0 0 120px rgba(74, 158, 255, .2);--crawl-intro-duration: 2s}.dndev-crawl-container{position:relative;background:#000;contain:layout style paint;perspective:var(--crawl-perspective);backface-visibility:hidden;width:150vw;left:50%;transform:translate3d(-50%,0,0);margin:0;margin-top:0!important;padding:0;max-width:none;min-height:calc(100dvh - var(--header-height));overflow:hidden}.dndev-container>.dndev-crawl-container:first-child{margin-top:0!important}.dndev-container:has(>.dndev-crawl-container:first-child){margin-top:0!important}.dndev-crawl-stars{position:absolute;inset:0;z-index:1;contain:layout style paint;pointer-events:none}.dndev-crawl-stars-layer-1,.dndev-crawl-stars-layer-2,.dndev-crawl-stars-layer-3{position:absolute;inset:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='500' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='23' cy='17' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='47' cy='89' r='1' fill='white' opacity='0.8'/%3E%3Ccircle cx='91' cy='43' r='0.5' fill='white' opacity='1'/%3E%3Ccircle cx='131' cy='67' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='163' cy='19' r='0.5' fill='%23ddd' opacity='0.8'/%3E%3Ccircle cx='197' cy='73' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='211' cy='41' r='0.5' fill='white' opacity='0.7'/%3E%3Ccircle cx='233' cy='97' r='1' fill='%23eee' opacity='0.9'/%3E%3Ccircle cx='251' cy='13' r='0.5' fill='white' opacity='1'/%3E%3Ccircle cx='277' cy='59' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='293' cy='83' r='0.5' fill='%23ddd' opacity='0.8'/%3E%3Ccircle cx='317' cy='31' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='337' cy='71' r='0.5' fill='white' opacity='0.8'/%3E%3Ccircle cx='359' cy='7' r='1' fill='%23eee' opacity='0.9'/%3E%3Ccircle cx='373' cy='53' r='0.5' fill='white' opacity='1'/%3E%3Ccircle cx='389' cy='79' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='401' cy='23' r='0.5' fill='%23ddd' opacity='0.8'/%3E%3Ccircle cx='419' cy='61' r='1' fill='white' opacity='1'/%3E%3Ccircle cx='433' cy='37' r='0.5' fill='white' opacity='0.7'/%3E%3Ccircle cx='449' cy='87' r='1' fill='%23eee' opacity='0.9'/%3E%3C/svg%3E");background-repeat:repeat;pointer-events:none}.dndev-crawl-stars-layer-1{--layer-base-opacity: 1;opacity:1;background-size:400px 250px;animation:dndev-stars-twinkle 4s ease-in-out infinite;animation-delay:0s}.dndev-crawl-stars-layer-2{--layer-base-opacity: .7;opacity:.7;background-size:300px 200px;animation:dndev-stars-twinkle 2.5s ease-in-out infinite;animation-delay:1s}.dndev-crawl-stars-layer-3{--layer-base-opacity: .5;opacity:.5;background-size:200px 150px;animation:dndev-stars-twinkle 1.8s ease-in-out infinite;animation-delay:2s}@keyframes dndev-stars-twinkle{0%,to{opacity:var(--layer-base-opacity)}50%{opacity:calc(var(--layer-base-opacity) * 1.43)}}.dndev-crawl-3d-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;perspective:var(--crawl-perspective);transform-style:preserve-3d;contain:layout style;backface-visibility:hidden;will-change:auto}.dndev-crawl-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;transform:rotateX(var(--crawl-tilt)) translateZ(0);transform-style:preserve-3d;backface-visibility:hidden;contain:layout style}.dndev-crawl-content{color:var(--crawl-text-color);font-size:var(--crawl-body-size);line-height:var(--crawl-content-line);font-weight:700;text-align:center;text-shadow:var(--crawl-text-shadow);position:relative;z-index:2;width:60%;max-width:60%;margin-left:auto;margin-right:auto;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dndev-crawl-title,.dndev-crawl-content h1,.dndev-crawl-content h2,.dndev-crawl-content p{color:var(--crawl-text-color);font-weight:700;text-align:center;text-shadow:var(--crawl-text-shadow);@media(width<=1023px){text-shadow:none}}.dndev-crawl-title,.dndev-crawl-content h1,.dndev-crawl-content h2{font-size:var(--crawl-title-size);margin-bottom:var(--crawl-title-margin);padding:0;margin-left:0;margin-right:0}.dndev-crawl-content p{font-size:var(--crawl-body-size);margin-bottom:var(--crawl-body-margin)}@media(width>=1024px){.dndev-crawl-title{white-space:nowrap}}.dndev-crawl-intro{background:linear-gradient(180deg,#000c,#0006,#000c)}.dndev-crawl-intro-content{color:var(--crawl-intro-color);font-size:var(--crawl-intro-font-size);font-weight:900;text-align:center;text-shadow:var(--crawl-intro-shadow);letter-spacing:.1em;line-height:1.2;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:60%;max-width:60%;margin:0 auto;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:normal}.dndev-crawl-intro-mobile{animation:dndev-intro-fade-mobile var(--crawl-intro-duration) ease-in-out forwards}.dndev-crawl-intro-desktop{animation:dndev-intro-fade-desktop calc(var(--crawl-intro-duration) * 2) ease-in-out forwards}@keyframes dndev-crawl-animation{0%{transform:rotateX(var(--crawl-tilt)) translate3d(0,100dvh,0)}to{transform:rotateX(var(--crawl-tilt)) translate3d(0,calc(-1 * var(--crawl-content-height)),0)}}@media(prefers-reduced-motion:reduce){.dndev-crawl-text{animation:none!important}.dndev-crawl-3d-container{transform:rotateX(0) translateZ(0)!important}.dndev-crawl-content{position:static!important;transform:none!important;animation:none!important}.dndev-crawl-intro-mobile,.dndev-crawl-intro-desktop{animation:none!important}}@media(prefers-contrast:high){.dndev-crawl-stars{filter:contrast(1.5) brightness(1.2)}}.dndev-crawl-reduced-motion{animation:none!important;transform:none!important;.dndev-crawl-content{position:static!important;transform:none!important}.dndev-crawl-stars-layer-1,.dndev-crawl-stars-layer-2,.dndev-crawl-stars-layer-3{animation:none!important}}.stack{width:100%;height:var(--dynamic-height);contain:layout;transform-origin:center top;transform:translate(0) translateY(calc(-1 * ((var(--dynamic-height) - 3.5rem) + var(--gap-lg)) * max(var(--i) - var(--e),0)));transition:transform var(--dur-heavy) var(--ease-heavy);will-change:var(--will-change-transform);&[data-size=small]{--dynamic-height: 24rem;@media(width>=1024px){--dynamic-height: 16rem}}&[data-size=medium]{--dynamic-height: 28rem;@media(width>=1024px){--dynamic-height: 20rem}}&[data-size=large]{--dynamic-height: 36rem;@media(width>=1024px){--dynamic-height: 28rem}}@media(prefers-reduced-motion:reduce){transition:none;transform:none!important}}.dndev-card>.stack-content{display:flex;flex-direction:column;gap:var(--gap-sm);height:calc(100% - 3.5rem);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}.stack[data-stacked=true] .stack-content{opacity:0;pointer-events:none}.stack[data-stacked=true] .dndev-stacked-cards-number{opacity:1}.dndev-stacked-cards-spacer{height:3.5rem}.dndev-stacked-cards-number{position:absolute;left:var(--gap-lg);bottom:0;height:3.5rem;display:flex;align-items:center;font-size:var(--font-size-sm);font-weight:500;color:var(--muted-foreground);z-index:10;opacity:1;transition:opacity var(--dur-heavy) var(--ease-heavy)}.dndev-stacked-cards-container{display:flex;flex-direction:column;width:100%;max-width:min(100%,var(--content-width, 60rem));margin-inline:auto;gap:var(--gap-lg);position:relative;z-index:0}.dndev-stacked-cards-header{display:flex;align-items:center;gap:var(--gap-sm)}.dndev-stacked-cards-body{display:flex;flex-direction:column;gap:var(--gap-sm);width:100%;align-items:start;@media(width>=1024px){display:grid;grid-template-columns:1fr auto 1fr;width:100%;align-items:center}}.dndev-stacked-cards-left{display:flex;flex-direction:column;gap:var(--gap-md);text-align:start}.dndev-stacked-cards-left .dndev-card-header+p{margin-top:0}.dndev-stacked-cards-separator{display:block;@media(width<1024px){width:80%!important;height:2px!important;margin-inline:auto;margin-block:var(--gap-sm);align-self:center}@media(width>=1024px){width:1px!important;height:100%!important;align-self:stretch}}.dndev-stacked-cards-right{display:flex;flex-direction:column;justify-content:center;gap:var(--gap-sm);text-align:start}.dndev-stacked-cards-cta{padding-top:var(--gap-sm)}[data-marquee-track]{will-change:var(--will-change-transform);animation:universal-marquee var(--marquee-duration, 0ms) var(--marquee-easing, linear) infinite;animation-direction:var(--marquee-direction, normal);&[data-marquee-direction=vertical]{--transform-start: translateY(0);--transform-end: translateY(calc(-1 * var(--marquee-distance, 0px)))}&[data-marquee-behavior=bounce]{animation-name:universal-float;--transform-start: translateX(0);--transform-mid: translateX(calc(-1 * var(--marquee-distance, 0px)));--opacity-start: 1;--opacity-mid: 1}@media(prefers-reduced-motion:reduce){animation:none!important;transform:none!important}.group:hover &,.group:focus-within &{animation-play-state:paused}}.dndev-reveal-container{contain:layout style;will-change:contents;&.dndev-reveal-visible .dndev-reveal-item{opacity:1;transform:translateZ(0);animation:dndev-reveal-cleanup var(--reveal-duration) var(--reveal-easing) forwards;@media(prefers-reduced-motion:reduce){transition:none!important;opacity:1!important;transform:none!important;will-change:auto}}}.dndev-reveal-item{opacity:0;transform:translateZ(0);will-change:transform,opacity;backface-visibility:hidden;transition:opacity var(--reveal-duration) var(--reveal-easing),transform var(--reveal-duration) var(--reveal-easing);transition-delay:var(--reveal-delay, 0ms);&[data-direction=left]{transform:translate3d(calc(-1 * var(--reveal-distance)),0,0)}&[data-direction=right]{transform:translate3d(var(--reveal-distance),0,0)}&[data-direction=top]{transform:translate3d(0,calc(-1 * var(--reveal-distance)),0)}&[data-direction=bottom]{transform:translate3d(0,var(--reveal-distance),0)}&[data-direction=fade-in]{transform:translateZ(0)}&[data-visible=true]{opacity:1;transform:translateZ(0)}@media(prefers-reduced-motion:reduce){transition:none!important;opacity:1!important;transform:none!important;will-change:auto}}.breath-lung-442{animation:none;will-change:clip-path;&.active{animation:breath-cycle-442 var(--breath-cycle-duration, 16s) ease-in-out var(--breath-cycles, 3)}&.paused{animation-play-state:paused}}.breath-lung-sigh{animation:none;will-change:clip-path;&.active{animation:breath-cycle-sigh var(--breath-cycle-duration, 10s) ease-in-out var(--breath-cycles, 3)}&.paused{animation-play-state:paused}}.network-node{fill:var(--foreground);animation:universal-float 4s ease-in-out infinite;--opacity-start: .3;--opacity-mid: .8;--transform-start: scale(1);--transform-mid: scale(1.1)}.network-line{stroke:var(--foreground);stroke-width:1;animation:universal-float 6s ease-in-out infinite;--opacity-start: .1;--opacity-mid: .5;--transform-start: scale(1);--transform-mid: scale(1)}.wave-flow{background:linear-gradient(45deg,transparent 30%,color-mix(in oklab,var(--accent) 20%,transparent) 50%,transparent 70%);animation:universal-float 8s ease-in-out infinite;--transform-start: translateX(-20%) rotate(0deg);--transform-mid: translateX(20%) rotate(3deg)}.particle-float{animation:universal-slide 10s linear infinite;--opacity-start: .2;--opacity-end: 0;--transform-start: translateY(0px) rotate(0deg);--transform-end: translateY(-100px) rotate(360deg)}.geometric-rotate{animation:universal-float 20s linear infinite;--opacity-start: .1;--opacity-mid: .2;--transform-start: rotate(0deg) scale(1);--transform-mid: rotate(180deg) scale(1.1)}.perspective-1000{perspective:1000px}.transform-style-preserve-3d{transform-style:preserve-3d}.dndev-animate-fade-in-up{animation:universal-slide var(--dur-heavy) ease-out forwards}.animation-delay-100{animation-delay:.1s}.dndev-marketing-stack{display:grid;gap:var(--gap-md)}.dndev-marketing-cluster{display:flex;gap:var(--gap-sm);align-items:center;justify-content:center}

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as Marquee } from './components/Marquee';
 export { default as InspectorGadget } from './components/InspectorGadget';
 export { default as StackedCards } from './components/StackedCards';
 export { default as Reveal } from './components/Reveal';
+export { default as Roadmap } from './components/Roadmap';
+export type { RoadmapProps, RoadmapStep } from './components/Roadmap';
 export * from './components/breathing';
 export { default as Carousel } from './Carousel';
 export { default as ComparisonGrid } from './ComparisonGrid';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AAGH,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAExD,cAAc,wBAAwB,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,eAAe,EACf,SAAS,EACT,YAAY,EACZ,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AAGH,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEtE,cAAc,wBAAwB,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,eAAe,EACf,SAAS,EACT,YAAY,EACZ,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,cAAc,UAAU,CAAC"}