@donotdev/adv-comps 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"Crawl.d.ts","sourceRoot":"","sources":["../../../src/components/Crawl/Crawl.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,UAAU;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,sFAAsF;IACtF,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,oFAAoF;IACpF,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACvC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,GAAI,2GAUZ,UAAU,4CA6GZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Crawl.d.ts","sourceRoot":"","sources":["../../../src/components/Crawl/Crawl.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,UAAU;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,sFAAsF;IACtF,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,oFAAoF;IACpF,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACvC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,GAAI,2GAUZ,UAAU,4CA+GZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -58,11 +58,13 @@ const Crawl = ({ content, intro, title, duration = 26, contentHeight = '150vh',
58
58
  cursor: 'pointer',
59
59
  transition: 'all var(--dur-normal) var(--ease-in-out)',
60
60
  }, onMouseEnter: (e) => {
61
- e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
61
+ e.currentTarget.style.backgroundColor =
62
+ 'rgba(255, 255, 255, 0.3)';
62
63
  e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.6)';
63
64
  e.currentTarget.style.transform = 'scale(1.1)';
64
65
  }, onMouseLeave: (e) => {
65
- e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
66
+ e.currentTarget.style.backgroundColor =
67
+ 'rgba(255, 255, 255, 0.2)';
66
68
  e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.4)';
67
69
  e.currentTarget.style.transform = 'scale(1)';
68
70
  }, "aria-label": "Start animated introduction", children: _jsx("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "white", style: { marginInlineStart: '4px' }, children: _jsx("path", { d: "M8 5v14l11-7z" }) }) })] })), !showPlayOverlay && (_jsx(Suspense, { fallback: null, children: _jsx(CrawlContent, { title: title, content: content, duration: duration, contentHeight: contentHeight, tiltAngle: tiltAngle }) }))] }));
@@ -0,0 +1,248 @@
1
+ /* packages/adv-comps/src/components/Roadmap/Roadmap.css */
2
+
3
+ .dndev-roadmap {
4
+ width: 100%;
5
+ position: relative;
6
+ }
7
+
8
+ /* =========================
9
+ DESKTOP LAYOUT
10
+ ========================= */
11
+
12
+ .dndev-roadmap-desktop {
13
+ position: relative;
14
+ }
15
+
16
+ /* Progress line container - from center of first icon to center of last icon */
17
+ .dndev-roadmap-timeline {
18
+ position: absolute;
19
+ top: calc(var(--touch-target) / 2); /* Center of node */
20
+ left: calc(100% / var(--step-count) / 2); /* Center of first grid cell */
21
+ right: calc(100% / var(--step-count) / 2); /* Center of last grid cell */
22
+ height: 4px;
23
+ z-index: 0;
24
+ }
25
+
26
+ .dndev-roadmap-timeline-bg {
27
+ position: absolute;
28
+ inset: 0;
29
+ background: var(--muted);
30
+ border-radius: var(--radius-full);
31
+ }
32
+
33
+ .dndev-roadmap-timeline-progress {
34
+ position: absolute;
35
+ top: 0;
36
+ left: 0;
37
+ height: 100%;
38
+ background: linear-gradient(
39
+ to right,
40
+ var(--primary),
41
+ var(--accent),
42
+ var(--primary)
43
+ );
44
+ border-radius: var(--radius-full);
45
+ transition: width var(--dur-slow) var(--ease-in-out);
46
+ }
47
+
48
+ /* Grid for steps */
49
+ .dndev-roadmap-grid {
50
+ display: grid;
51
+ gap: var(--gap-lg);
52
+ position: relative;
53
+ z-index: 1;
54
+ }
55
+
56
+ /* Individual step container */
57
+ .dndev-roadmap-step {
58
+ display: flex;
59
+ flex-direction: column;
60
+ align-items: center;
61
+ cursor: pointer;
62
+ }
63
+
64
+ /* Timeline node (icon circle) */
65
+ .dndev-roadmap-node {
66
+ width: var(--touch-target);
67
+ height: var(--touch-target);
68
+ border-radius: var(--radius-full);
69
+ border: var(--border-huge) solid var(--muted);
70
+ background: var(--background);
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ transition: all var(--dur-normal) var(--ease-in-out);
75
+ margin-bottom: var(--gap-lg);
76
+ flex-shrink: 0;
77
+ }
78
+
79
+ .dndev-roadmap-node[data-active='true'] {
80
+ border-color: var(--accent);
81
+ box-shadow: 0 0 20px color-mix(in oklab, var(--accent) 40%, transparent);
82
+ transform: scale(1.1);
83
+ }
84
+
85
+ .dndev-roadmap-node svg {
86
+ width: var(--icon-md);
87
+ height: var(--icon-md);
88
+ color: var(--muted-foreground);
89
+ transition: color var(--dur-normal) var(--ease-in-out);
90
+ }
91
+
92
+ .dndev-roadmap-node[data-active='true'] svg {
93
+ color: var(--accent);
94
+ }
95
+
96
+ /* Card styling - extra top padding for badge overlap, push footer to bottom */
97
+ .dndev-roadmap-card {
98
+ position: relative;
99
+ height: 100%;
100
+ padding-top: calc(var(--gap-lg) + var(--gap-sm)) !important;
101
+ align-content: space-between;
102
+ }
103
+
104
+ .dndev-roadmap-step:hover .dndev-roadmap-card,
105
+ .dndev-roadmap-card[data-active='true'] {
106
+ border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
107
+ transform: translateY(calc(-1 * var(--gap-sm)));
108
+ box-shadow: var(--shadow-xl);
109
+ }
110
+
111
+ /* Phase badge - absolute overlay top-start */
112
+ .dndev-roadmap-phase {
113
+ position: absolute;
114
+ top: var(--gap-sm);
115
+ left: var(--gap-sm);
116
+ font-size: var(--font-size-xs);
117
+ font-weight: var(--font-weight-bold);
118
+ text-transform: uppercase;
119
+ letter-spacing: 0.05em;
120
+ padding: 2px var(--gap-sm); /* Tight vertical padding for badge */
121
+ border-radius: var(--radius-interactive);
122
+ background: var(--accent);
123
+ color: var(--accent-foreground);
124
+ }
125
+
126
+ /* Description - sm, foreground, start */
127
+ .dndev-roadmap-description {
128
+ font-size: var(--font-size-sm);
129
+ color: var(--foreground);
130
+ line-height: var(--line-height);
131
+ margin: 0;
132
+ margin-bottom: var(--gap-md);
133
+ text-align: start;
134
+ }
135
+
136
+ /* =========================
137
+ MOBILE LAYOUT
138
+ ========================= */
139
+
140
+ .dndev-roadmap-mobile {
141
+ position: relative;
142
+ padding-left: 0;
143
+ padding-bottom: var(--gap-lg);
144
+ }
145
+
146
+ /* Vertical timeline line - centered, with animated progress */
147
+ .dndev-roadmap-timeline-vertical {
148
+ position: absolute;
149
+ left: 50%;
150
+ top: 0;
151
+ bottom: 0;
152
+ width: 4px;
153
+ background: var(--muted);
154
+ transform: translateX(-50%);
155
+ z-index: 0;
156
+ border-radius: var(--radius-full);
157
+ }
158
+
159
+ .dndev-roadmap-timeline-vertical-progress {
160
+ position: absolute;
161
+ top: 0;
162
+ left: 0;
163
+ width: 100%;
164
+ background: linear-gradient(
165
+ to bottom,
166
+ var(--primary),
167
+ var(--accent),
168
+ var(--primary)
169
+ );
170
+ border-radius: var(--radius-full);
171
+ transition: height var(--dur-slow) var(--ease-in-out);
172
+ }
173
+
174
+ /* Step container - flex column to stack Node -> Card */
175
+ .dndev-roadmap-step-mobile {
176
+ position: relative;
177
+ display: flex;
178
+ flex-direction: column;
179
+ align-items: center;
180
+ width: 100%;
181
+ cursor: pointer;
182
+ }
183
+
184
+ .dndev-roadmap-step-mobile:last-child {
185
+ margin-bottom: 0;
186
+ }
187
+
188
+ /* Mobile node - relative positioning, centered, with top margin from previous card */
189
+ .dndev-roadmap-node-mobile {
190
+ position: relative;
191
+ left: auto;
192
+ top: auto;
193
+ margin-top: var(--gap-md); /* Space from previous card's bottom */
194
+ margin-bottom: var(--gap-md); /* Space before current card */
195
+ width: var(--touch-target);
196
+ height: var(--touch-target);
197
+ border-radius: var(--radius-full);
198
+ border: var(--border-huge) solid var(--muted);
199
+ background: var(--background);
200
+ display: flex;
201
+ align-items: center;
202
+ justify-content: center;
203
+ transition: all var(--dur-normal) var(--ease-in-out);
204
+ z-index: 1;
205
+ }
206
+
207
+ /* First step's icon has no top margin */
208
+ .dndev-roadmap-step-mobile:first-child .dndev-roadmap-node-mobile {
209
+ margin-top: 0;
210
+ }
211
+
212
+ .dndev-roadmap-node-mobile[data-active='true'] {
213
+ border-color: var(--accent);
214
+ box-shadow: 0 0 15px color-mix(in oklab, var(--accent) 30%, transparent);
215
+ }
216
+
217
+ .dndev-roadmap-node-mobile svg {
218
+ width: var(--icon-md);
219
+ height: var(--icon-md);
220
+ color: var(--muted-foreground);
221
+ }
222
+
223
+ .dndev-roadmap-node-mobile[data-active='true'] svg {
224
+ color: var(--accent);
225
+ }
226
+
227
+ /* Mobile card - full width, with active state */
228
+ .dndev-roadmap-card-mobile {
229
+ position: relative;
230
+ width: 100%;
231
+ padding-top: calc(var(--gap-lg) + var(--gap-sm)) !important;
232
+ align-content: space-between;
233
+ background: var(--card);
234
+ z-index: 1;
235
+ transition: all var(--dur-normal) var(--ease-in-out);
236
+ }
237
+
238
+ .dndev-roadmap-card-mobile[data-active='true'] {
239
+ border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
240
+ box-shadow: var(--shadow-lg);
241
+ }
242
+
243
+ /* Only apply hover on devices that support it */
244
+ @media (hover: hover) {
245
+ .dndev-roadmap-card-mobile:hover {
246
+ border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
247
+ }
248
+ }
@@ -0,0 +1,15 @@
1
+ /**
2
+ * @fileoverview Roadmap Component
3
+ * @description Timeline component with horizontal (desktop) / vertical (mobile) layout.
4
+ * Features animated progress line, glowing nodes, and lift-on-hover cards.
5
+ *
6
+ * @version 0.0.2
7
+ * @since 0.0.1
8
+ * @author AMBROISE PARK Consulting
9
+ */
10
+ import RoadmapContent from './RoadmapContent';
11
+ import type { ComponentProps } from 'react';
12
+ export type { RoadmapProps, RoadmapStep } from './RoadmapContent';
13
+ declare const Roadmap: (props: ComponentProps<typeof RoadmapContent>) => import("react/jsx-runtime").JSX.Element;
14
+ export default Roadmap;
15
+ //# sourceMappingURL=Roadmap.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ // packages/adv-comps/src/components/Roadmap/Roadmap.tsx
3
+ /**
4
+ * @fileoverview Roadmap Component
5
+ * @description Timeline component with horizontal (desktop) / vertical (mobile) layout.
6
+ * Features animated progress line, glowing nodes, and lift-on-hover cards.
7
+ *
8
+ * @version 0.0.2
9
+ * @since 0.0.1
10
+ * @author AMBROISE PARK Consulting
11
+ */
12
+ import RoadmapContent from './RoadmapContent';
13
+ const Roadmap = function Roadmap(props) {
14
+ return _jsx(RoadmapContent, { ...props });
15
+ };
16
+ export default Roadmap;
@@ -0,0 +1,28 @@
1
+ import type { LucideIcon } from 'lucide-react';
2
+ import { type CardContent, type CardVariant } from '@donotdev/components';
3
+ import './Roadmap.css';
4
+ export interface RoadmapStep {
5
+ /** Phase label (e.g., "Week 1", "Days 1-2") */
6
+ phase: string;
7
+ /** Lucide icon for the timeline node */
8
+ icon: LucideIcon;
9
+ /** Step title */
10
+ title: string;
11
+ /** Step subtitle */
12
+ subtitle: string;
13
+ /** Optional description paragraph */
14
+ description?: string;
15
+ /** Optional content - shown in popover on click */
16
+ content?: CardContent;
17
+ }
18
+ export interface RoadmapProps {
19
+ /** Array of roadmap steps */
20
+ steps: RoadmapStep[];
21
+ /** Optional className */
22
+ className?: string;
23
+ /** Card variant (default, glass, etc.) */
24
+ variant?: CardVariant;
25
+ }
26
+ declare const RoadmapContent: ({ steps, className, variant, }: RoadmapProps) => import("react/jsx-runtime").JSX.Element;
27
+ export default RoadmapContent;
28
+ //# sourceMappingURL=RoadmapContent.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,47 @@
1
+ // packages/adv-comps/src/components/Roadmap/RoadmapContent.tsx
2
+ /**
3
+ * @fileoverview Roadmap Content Component
4
+ * @description Timeline component with horizontal (desktop) / vertical (mobile) layout.
5
+ * Features animated progress line, glowing nodes, and cards with content at bottom.
6
+ *
7
+ * @version 0.0.4
8
+ * @since 0.0.1
9
+ * @author AMBROISE PARK Consulting
10
+ */
11
+ 'use client';
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { useState, useEffect } from 'react';
14
+ import { cn, Card, renderCardContent, useIntersectionObserver, } from '@donotdev/components';
15
+ import { useBreakpoint } from '@donotdev/core';
16
+ import './Roadmap.css';
17
+ const RoadmapContent = function RoadmapContent({ steps, className, variant, }) {
18
+ const [activeStep, setActiveStep] = useState(0);
19
+ const isLaptop = useBreakpoint('isLaptopOrDesktop');
20
+ const progressPercentage = steps.length > 1 ? (activeStep / (steps.length - 1)) * 100 : 0;
21
+ // Desktop layout
22
+ if (isLaptop) {
23
+ 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) => {
24
+ const Icon = step.icon;
25
+ const isActive = index <= activeStep;
26
+ const isCurrent = index === activeStep;
27
+ 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));
28
+ }) })] }) }));
29
+ }
30
+ // Mobile layout with scroll-based activation
31
+ 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)))] }) }));
32
+ };
33
+ // Mobile step with IntersectionObserver for scroll-based activation
34
+ const RoadmapStepMobile = ({ step, index, isActive, variant, onEnter }) => {
35
+ const { ref, isIntersecting } = useIntersectionObserver({
36
+ threshold: 0.5,
37
+ rootMargin: '0px 0px -20% 0px',
38
+ });
39
+ useEffect(() => {
40
+ if (typeof window !== 'undefined' && isIntersecting) {
41
+ onEnter();
42
+ }
43
+ }, [isIntersecting, onEnter]);
44
+ const Icon = step.icon;
45
+ 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 }))] })] }));
46
+ };
47
+ export default RoadmapContent;
@@ -0,0 +1,3 @@
1
+ export { default } from './Roadmap';
2
+ export type { RoadmapProps, RoadmapStep } from './Roadmap';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,2 @@
1
+ // packages/adv-comps/src/components/Roadmap/index.ts
2
+ export { default } from './Roadmap';
@@ -49,14 +49,15 @@
49
49
  STACKED CARDS - STACK CONTENT
50
50
  =========================== */
51
51
 
52
- .stack-content {
52
+ /* Override Card's grid for stack-content - needs flex for custom layout */
53
+ .dndev-card > .stack-content {
54
+ display: flex;
55
+ flex-direction: column;
56
+ gap: var(--gap-sm);
53
57
  height: calc(100% - 3.5rem);
54
58
  overflow-y: auto;
55
59
  scrollbar-width: none;
56
60
  -ms-overflow-style: none;
57
- display: flex;
58
- flex-direction: column;
59
- gap: var(--gap-sm);
60
61
 
61
62
  &::-webkit-scrollbar {
62
63
  display: none;
@@ -131,11 +132,14 @@
131
132
  .dndev-stacked-cards-left {
132
133
  display: flex;
133
134
  flex-direction: column;
134
- gap: var(--gap-sm);
135
- padding-inline: var(--gap-md);
135
+ gap: var(--gap-md);
136
136
  text-align: start;
137
137
  }
138
138
 
139
+ .dndev-stacked-cards-left .dndev-card-header + p {
140
+ margin-top: 0;
141
+ }
142
+
139
143
  .dndev-stacked-cards-separator {
140
144
  display: block;
141
145
 
@@ -161,7 +165,6 @@
161
165
  flex-direction: column;
162
166
  justify-content: center;
163
167
  gap: var(--gap-sm);
164
- padding-inline: var(--gap-md);
165
168
  text-align: start;
166
169
  }
167
170
 
@@ -8,7 +8,7 @@
8
8
  */
9
9
  import StackedCardsContent from './StackedCardsContent';
10
10
  import type { ComponentProps } from 'react';
11
- export type { StackedCardsProps, StackedCardData } from './StackedCardsContent';
11
+ export type { StackedCardsProps, StackedCardData, ResponsiveHeight, } from './StackedCardsContent';
12
12
  /**
13
13
  * StackedCards Component
14
14
  *
@@ -1 +1 @@
1
- {"version":3,"file":"StackedCards.d.ts","sourceRoot":"","sources":["../../../src/components/StackedCards/StackedCards.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEhF;;;;;;;;;;GAUG;AACH,QAAA,MAAM,YAAY,GAChB,OAAO,cAAc,CAAC,OAAO,mBAAmB,CAAC,4CAGlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"StackedCards.d.ts","sourceRoot":"","sources":["../../../src/components/StackedCards/StackedCards.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,YAAY,EACV,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;;;GAUG;AACH,QAAA,MAAM,YAAY,GAChB,OAAO,cAAc,CAAC,OAAO,mBAAmB,CAAC,4CAGlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -9,6 +9,13 @@
9
9
  import { type ComponentType, type CSSProperties } from 'react';
10
10
  import type { ComponentData } from '@donotdev/components';
11
11
  import type { SurfaceVariantProps } from '@donotdev/components';
12
+ /**
13
+ * Responsive height array: [mobile, desktop]
14
+ * Mobile (< 1024px) stacks vertically, needs more height (~2x)
15
+ * Desktop (>= 1024px) uses horizontal grid, needs less height
16
+ * @example [400, 200] - 400px on mobile/tablet, 200px on desktop
17
+ */
18
+ export type ResponsiveHeight = [number, number];
12
19
  /**
13
20
  * Enhanced StackedCard extends ComponentData with height control options
14
21
  *
@@ -38,22 +45,35 @@ export type StackedCardData = ComponentData & {
38
45
  */
39
46
  estimatedHeight?: 'small' | 'medium' | 'large';
40
47
  /**
41
- * Custom height override in pixels.
48
+ * Custom height override in pixels - fixed or responsive.
42
49
  * Use when you need exact control over card height.
43
50
  * Overrides estimatedHeight when provided.
44
51
  *
52
+ * - number: Fixed height for all breakpoints
53
+ * - [mobile, desktop]: Responsive heights (mobile needs ~2x desktop since it stacks vertically)
54
+ *
45
55
  * @example
46
56
  * ```tsx
57
+ * // Fixed height
47
58
  * const items: StackedCardData[] = [
48
59
  * {
49
60
  * title: "Custom Card",
50
61
  * content: ["Precisely sized content"],
51
- * customHeight: 400 // Exactly 400px tall
62
+ * customHeight: 400 // Exactly 400px on all breakpoints
63
+ * }
64
+ * ];
65
+ *
66
+ * // Responsive height
67
+ * const responsiveItems: StackedCardData[] = [
68
+ * {
69
+ * title: "Responsive Card",
70
+ * content: ["More content on mobile"],
71
+ * customHeight: [400, 200] // 400px mobile, 200px desktop
52
72
  * }
53
73
  * ];
54
74
  * ```
55
75
  */
56
- customHeight?: number;
76
+ customHeight?: number | ResponsiveHeight;
57
77
  /**
58
78
  * Optional custom number/label to display (e.g. "01", "Week 1", etc)
59
79
  * If not provided, defaults to auto-incrementing index (01, 02, etc)
@@ -76,6 +96,14 @@ export type StackedCardsProps = {
76
96
  variant?: SurfaceVariantProps['variant'];
77
97
  /** Optional aria-label for the list */
78
98
  ariaLabel?: string;
99
+ /**
100
+ * Intersection threshold for revealing next card (0.0 - 1.0)
101
+ * - 0.0 = reveals when any part is visible
102
+ * - 0.5 = reveals when 50% visible (default)
103
+ * - 1.0 = reveals when 100% visible (full card must be in view)
104
+ * @default 0.5
105
+ */
106
+ threshold?: number;
79
107
  className?: string;
80
108
  style?: CSSProperties;
81
109
  };
@@ -1 +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,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,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;AAmJF,eAAe,mBAAmB,CAAC"}
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;AAef,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAkChE;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C;;;;;;;;;;;;;;;;;;OAkBG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC;IAEzC;;;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,CAkEzD,CAAC;AAkIF,eAAe,mBAAmB,CAAC"}
@@ -9,7 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
9
  * @author AMBROISE PARK Consulting
10
10
  */
11
11
  import { memo, useEffect, useRef, useState, } from 'react';
12
- import { cn, Button, IconBox, Separator, SEPARATOR_VARIANT, Text, useIntersectionObserver, getVariantDataAttrs, surfaceVariants, } from '@donotdev/components';
12
+ import { cn, Button, Separator, SEPARATOR_VARIANT, Text, useIntersectionObserver, getVariantDataAttrs, surfaceVariants, renderCardHeader, renderCardContent, } from '@donotdev/components';
13
+ import { useBreakpoint } from '@donotdev/core';
13
14
  /**
14
15
  * Stacked Cards Animation Configuration
15
16
  *
@@ -26,7 +27,7 @@ const STACKED_CARDS_CONFIG = {
26
27
  *
27
28
  * TO REQUIRE MORE SCROLL: Increase this value (0.3 → 0.5 → 0.7)
28
29
  */
29
- intersectionThreshold: 0.3,
30
+ intersectionThreshold: 0.5,
30
31
  /**
31
32
  * Intersection Observer root margin (bottom)
32
33
  * Format: 'top right bottom left'
@@ -39,12 +40,6 @@ const STACKED_CARDS_CONFIG = {
39
40
  // Removed viewportTopThreshold and viewportBottomThreshold
40
41
  // IntersectionObserver handles all visibility detection (more performant, single source of truth)
41
42
  };
42
- // Icon renderer component
43
- const IconRenderer = memo(({ icon }) => {
44
- if (!icon)
45
- return null;
46
- return _jsx(IconBox, { icon: icon, ariaHidden: true });
47
- });
48
43
  /**
49
44
  * StackedCardsContent Component - Animated waterfall card stacking
50
45
  *
@@ -119,13 +114,26 @@ const IconRenderer = memo(({ icon }) => {
119
114
  * ];
120
115
  * ```
121
116
  */
122
- const StackedCardsContent = ({ items, className, ariaLabel, variant, style, }) => {
117
+ const StackedCardsContent = ({ items, className, ariaLabel, variant, style, threshold = STACKED_CARDS_CONFIG.intersectionThreshold, }) => {
123
118
  const [entered, setEntered] = useState(0);
124
119
  const containerRef = useRef(null);
120
+ const isDesktop = useBreakpoint('isLaptopOrDesktop');
125
121
  // Calculate maximum height from all items to ensure all cards have the same height
122
+ // Handles both fixed (number) and responsive ([mobile, desktop]) customHeight values
126
123
  const hasCustomHeight = items.some((item) => item.customHeight);
127
124
  const maxCustomHeight = hasCustomHeight
128
- ? Math.max(...items.map((item) => item.customHeight || 0).filter((h) => h > 0))
125
+ ? Math.max(...items
126
+ .map((item) => {
127
+ if (!item.customHeight)
128
+ return 0;
129
+ // If responsive array, use desktop value (index 1) when on desktop, mobile (index 0) otherwise
130
+ if (Array.isArray(item.customHeight)) {
131
+ return isDesktop ? item.customHeight[1] : item.customHeight[0];
132
+ }
133
+ // Fixed number applies to all breakpoints
134
+ return item.customHeight;
135
+ })
136
+ .filter((h) => h > 0))
129
137
  : null;
130
138
  // Find the maximum estimatedHeight enum value (for CSS to handle responsive sizing)
131
139
  const heightOrder = { small: 1, medium: 2, large: 3 };
@@ -135,12 +143,12 @@ const StackedCardsContent = ({ items, className, ariaLabel, variant, style, }) =
135
143
  const maxOrder = heightOrder[max] || 2;
136
144
  return currentOrder > maxOrder ? current : max;
137
145
  }, 'medium');
138
- 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))) }));
146
+ 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))) }));
139
147
  };
140
148
  // Individual stacked card item with working logic matching the CSS
141
- const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps, maxEstimatedHeight, maxCustomHeight, }) => {
149
+ const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps, maxEstimatedHeight, maxCustomHeight, threshold, }) => {
142
150
  const { ref, isIntersecting } = useIntersectionObserver({
143
- threshold: STACKED_CARDS_CONFIG.intersectionThreshold,
151
+ threshold,
144
152
  rootMargin: STACKED_CARDS_CONFIG.intersectionRootMargin,
145
153
  });
146
154
  useEffect(() => {
@@ -148,11 +156,9 @@ const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps
148
156
  onEnter();
149
157
  }
150
158
  }, [isIntersecting, onEnter]);
151
- const contentArray = Array.isArray(item.content)
152
- ? item.content
153
- : item.content
154
- ? [item.content]
155
- : [];
159
+ const header = renderCardHeader(item.icon, item.title, item.subtitle);
160
+ const contentNode = renderCardContent(item.content);
161
+ const hasContent = !!contentNode;
156
162
  return (_jsx("section", { ref: ref, className: "dndev-relative", style: {
157
163
  zIndex: totalItems - index - 1,
158
164
  }, 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 +168,7 @@ const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps
162
168
  ['--dynamic-height']: `${maxCustomHeight}px`,
163
169
  }),
164
170
  ...cardProps.style,
165
- }, children: _jsxs("div", { className: cn(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: {
166
- padding: 'var(--gap-sm)',
167
- ...cardProps.style,
168
- }, 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
171
+ }, 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
169
172
  ? String(item.number)
170
173
  : String(index + 1).padStart(2, '0') })] }) }) }));
171
174
  };
package/dist/index.css CHANGED
@@ -1 +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}}@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}
1
+ .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 CHANGED
@@ -12,6 +12,8 @@ export { default as Marquee } from './components/Marquee';
12
12
  export { default as InspectorGadget } from './components/InspectorGadget';
13
13
  export { default as StackedCards } from './components/StackedCards';
14
14
  export { default as Reveal } from './components/Reveal';
15
+ export { default as Roadmap } from './components/Roadmap';
16
+ export type { RoadmapProps, RoadmapStep } from './components/Roadmap';
15
17
  export * from './components/breathing';
16
18
  export { default as Carousel } from './Carousel';
17
19
  export { default as ComparisonGrid } from './ComparisonGrid';
@@ -1 +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"}
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;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"}
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use client";var er=Object.defineProperty;var le=(e,t)=>()=>(e&&(t=e(e=0)),t);var ve=(e,t)=>{for(var r in t)er(e,r,{get:t[r],enumerable:!0})};import{createElement as fe}from"react";function de(e,t={}){let{allowedTags:r=["p","br","u","i","em","strong","b"],preserveLineBreaks:i=!0,className:n}=t;if(!e||typeof e!="string")return[];let o=e;i&&(o=o.replace(/\n/g,"<br/>"));let l=o.split(/(<[^>]+>)/),d=[],v=0;for(let u=0;u<l.length;u++){let c=l[u];if(!c)continue;let s=c.match(/^<(\w+)(?:\s[^>]*)?\s*\/>$/);if(s&&s[1]){let h=s[1].toLowerCase();if(r.includes(h)){let x=st(h,"",n,v++);x&&d.push(x);continue}}let p=c.match(/^<(\w+)(?:\s[^>]*)?>$/);if(p&&p[1]){let h=p[1].toLowerCase();if(r.includes(h)){let x=`</${h}>`,y="",g=u+1;for(;g<l.length&&l[g]&&!l[g].includes(x);)y+=l[g],g++;g<l.length&&l[g]&&(y+=l[g].replace(x,""));let C=st(h,y,n,v++);C&&d.push(C),u=g;continue}}c&&!c.startsWith("<")&&d.push(c)}return d}function st(e,t,r,i){let n={key:i};switch(r&&(n.className=r),e){case"p":return fe("p",n,t);case"br":return fe("br",n);case"u":return fe("u",n,t);case"i":case"em":return fe("em",n,t);case"strong":case"b":return fe("strong",n,t);default:return t}}var qe=le(()=>{"use strict"});var lt={};ve(lt,{default:()=>sr});import{useEffect as tr,useRef as rr,useState as ar,useMemo as We,isValidElement as nr}from"react";import{isClient as or}from"@donotdev/core";import{Fragment as lr,jsx as G,jsxs as Oe}from"react/jsx-runtime";var ir,sr,dt=le(()=>{"use strict";qe();ir=({content:e,title:t,duration:r=26,contentHeight:i="150vh",tiltAngle:n,onPause:o,onResume:l})=>{let d=rr(null),[v,u]=ar(!1),c=y=>!y||typeof y!="string"?null:y.split(/\n\s*\n/).map(C=>C.trim()).filter(C=>C.length>0).map((C,S)=>G("p",{children:de(C,{allowedTags:["u","br","i","em","strong","b"]})},`p-${S}`)),s=We(()=>t?typeof t=="string"?G("h2",{className:"dndev-crawl-title",children:de(t,{allowedTags:["u","br","i","em","strong","b"]})}):t:null,[t]),p=We(()=>nr(e)?e:Array.isArray(e)?e.map(g=>typeof g=="string"?g.trim():"").filter(g=>g&&g.length>0).map((g,C)=>G("p",{children:de(g,{allowedTags:["u","br","i","em","strong","b"]})},`c-${C}`)):typeof e=="string"?c(e):e,[e]),h=We(()=>{let y={"--crawl-content-height":i,animationName:"dndev-crawl-animation",animationDuration:`${r}s`,animationTimingFunction:"linear",animationIterationCount:"infinite",animationFillMode:"forwards",animationPlayState:v?"paused":"running"};return n!==void 0&&(y["--crawl-tilt"]=`${n}deg`),y},[v,r,i,n]);tr(()=>{if(!or()||!d.current)return;let y=window.matchMedia("(prefers-reduced-motion: reduce)"),g=()=>{y.matches&&d.current&&d.current.classList.add("dndev-crawl-reduced-motion")};return g(),y.addEventListener("change",g),()=>y.removeEventListener("change",g)},[]);let x=()=>{v?(u(!1),l?.()):(u(!0),o?.())};return Oe(lr,{children:[G("div",{className:"dndev-crawl-3d-container",onClick:x,children:G("div",{ref:d,className:"dndev-crawl-text",style:{...h,willChange:v?"auto":"transform"},children:Oe("div",{className:"dndev-crawl-content",children:[s,p]})})}),v&&G("div",{className:"dndev-absolute dndev-inset-0 dndev-flex dndev-items-center dndev-justify-center",style:{zIndex:30,backgroundColor:"rgba(0, 0, 0, 0.3)",backdropFilter:"blur(2px)"},onClick:x,children:G("button",{style:{width:"96px",height:"96px",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(255, 255, 255, 0.2)",border:"4px solid rgba(255, 255, 255, 0.4)",backdropFilter:"blur(4px)",cursor:"pointer",transition:"all var(--dur-normal) var(--ease-in-out)"},"aria-label":"Resume animation",children:G("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"white",children:G("path",{d:"M6 4h4v16H6V4zm8 0h4v16h-4V4z"})})})}),Oe("div",{className:"dndev-crawl-stars",children:[G("div",{className:"dndev-crawl-stars-layer-1"}),G("div",{className:"dndev-crawl-stars-layer-2"}),G("div",{className:"dndev-crawl-stars-layer-3"})]})]})},sr=ir});var vt={};ve(vt,{default:()=>Rr});import{useRef as wr,useState as Ne,useEffect as pt}from"react";import{cn as Ve,GAP_VARIANT as Cr,Stack as xr}from"@donotdev/components";import{observeElement as kr,addEventListener as Sr}from"@donotdev/components";import{jsx as Te}from"react/jsx-runtime";function Tr({items:e,renderItem:t,className:r,itemClassName:i,gap:n=Cr.MEDIUM,speed:o=48,direction:l="auto",pauseOnHover:d=!0,ariaLabel:v,reducedMotion:u="respect",behavior:c="auto",pauseOnFocusWithin:s=!0,easing:p="ease-in-out"}){let h=typeof document<"u"&&document.dir==="rtl",x=typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1,y=l;l==="auto"&&(y=h?"right":"left");let g=y==="up"||y==="down",C=u==="ignore"||!x,S=c;c==="auto"&&(S=e.length<=20?"bounce":"infinite");let N=wr(null),[q,V]=Ne(8e3),[ee,J]=Ne(0),[F,k]=Ne(!0),[we,_]=Ne(!1);pt(()=>N.current?kr(N.current,A=>k(A.isIntersecting),{threshold:0}):void 0,[]),pt(()=>{if(!N.current||typeof window>"u"||!C)return;let $=N.current,A=$.querySelector("[data-marquee-track]");if(!A)return;let ue=()=>{let U=g?$.clientHeight:$.clientWidth,te=g?A.scrollHeight:A.scrollWidth,Y=Math.max(0,te-U);if(_(Y>0),Y>0){let pe=Math.min(512,Math.max(12,o));if(S==="bounce"){let ie=Y*2/pe*1e3;V(Math.max(2e3,Math.floor(ie))),J(Y)}else{let ie=(te+gt[n])/pe*1e3;V(Math.max(2e3,Math.floor(ie))),J(te+gt[n])}}else V(0),J(0)};if(requestAnimationFrame(ue),typeof ResizeObserver<"u"){let U=new ResizeObserver(()=>{requestAnimationFrame(ue)});return U.observe($),()=>U.disconnect()}else return Sr(window,"resize",()=>requestAnimationFrame(ue))},[e,o,g,C,S,n]);let Ce=()=>g?y==="up"?"normal":"reverse":y==="left"?"normal":"reverse",xe=()=>S==="infinite"&&we?[...e,...e].map(($,A)=>Te("div",{className:Ve("dndev-flex-shrink-0",i),children:t($,A%e.length)},A)):e.map(($,A)=>Te("div",{className:Ve("dndev-flex-shrink-0",i),children:t($,A)},A));return Te("div",{ref:N,className:Ve("dndev-relative dndev-overflow-hidden",d&&"group",s&&"focus-within:group",r),role:"region","aria-label":v||`${S==="infinite"?"Scrolling":"Bouncing"} content with ${e.length} items`,"aria-live":C&&F?"off":"polite",children:Te(xr,{className:"marquee-track",direction:g?"column":"row",align:g?void 0:"center",gap:n,"data-marquee-track":!0,"data-marquee-direction":g?"vertical":"horizontal","data-marquee-behavior":S,"data-marquee-reduced-motion":!C,style:{"--marquee-duration":C&&F&&we?`${q}ms`:"0ms","--marquee-direction":Ce(),"--marquee-distance":g?`${ee}px`:`${ee}px`,"--marquee-easing":Nr[p],animationPlayState:!C||!F?"paused":"running"},children:xe()})})}var gt,Nr,Rr,ft=le(()=>{"use strict";gt={none:0,tight:8,medium:16,large:32},Nr={linear:"linear","ease-in-out":"ease-in-out","ease-out":"ease-out"};Rr=Tr});var Et={};ve(Et,{default:()=>Ta});import{ChevronLeft as fa,ChevronRight as ha,Play as ya,Pause as ba}from"lucide-react";import{useRef as Ue,useState as ae,useEffect as Ke,useCallback as z,useMemo as Qe,memo as wa}from"react";import{cn as ze,observeElement as Ca,addEventListener as xa,isRTLLanguage as ka,Stack as Sa}from"@donotdev/components";import{Fragment as Ra,jsx as P,jsxs as Je}from"react/jsx-runtime";function Na({items:e,renderItem:t,className:r,slideClassName:i,showArrows:n=!0,showDots:o=!1,showProgress:l=!0,autoplay:d=!0,autoplayInterval:v=5e3,transition:u="slide",infinite:c=!0,slidesToShow:s=1,swipeable:p=!0,momentum:h=!0,onActiveChange:x,onSlideClick:y,keyExtractor:g,"aria-label":C="Premium carousel",pauseOnHover:S=!0,pauseOnInvisible:N=!0,showPlayPause:q=!0,lazy:V=!1,preloadDistance:ee=1}){if(!e||e.length===0)return P(Sa,{align:"center",justify:"center",className:ze("dndev-relative",r),children:P("div",{style:{color:"var(--muted-foreground)"},children:"No items to display"})});let J=Ue(null),F=Ue(null),[k,we]=ae(0),[_,Ce]=ae(d),[xe,$]=ae(!1),[A,ue]=ae(!0),[I,U]=ae({isDragging:!1,startX:0,currentX:0,startTime:0,velocity:0}),te=Ue(null),[Y,pe]=ae("idle"),[ie,nt]=ae(!1);Ke(()=>{if(typeof window>"u")return;let a=window.matchMedia("(prefers-reduced-motion: reduce)");return nt(a.matches),xa(a,"change",f=>{nt(f.matches)})},[]);let ke=Qe(()=>({tension:.3,friction:.8,mass:1}),[]),Vt=Qe(()=>{if(!c||e.length<=s)return e;let a=Math.max(s,2),m=e.slice(-a),f=e.slice(0,a);return[...m,...e,...f]},[e,c,s]),H=Qe(()=>100/s,[s]),$e=z(a=>{if(!c)return a;let m=Math.max(s,2);return((a-m)%e.length+e.length)%e.length},[c,e.length,s]),ot=z(a=>{if(!c)return!0;let m=Math.max(s,2),f=e.length+m-1;return a>=m&&a<=f},[c,e.length,s]),He=z((a,m,f=0)=>{if(!h)return;let w=parseFloat(a.style.transform.replace("translateX(","").replace("%)",""))||0,R=f,O=Date.now(),B=()=>{let ge=(Date.now()-O)/1e3,Se=w-m,Jt=-ke.tension*Se,Zt=-ke.friction*R,jt=(Jt+Zt)/ke.mass;R+=jt*ge,w+=R*ge,a.style.transform=`translateX(${w}%)`,Math.abs(Se)>.1||Math.abs(R)>.1?requestAnimationFrame(B):(a.style.transform=`translateX(${m}%)`,a.style.transition="none")};requestAnimationFrame(B)},[h,ke]),it=z((a,m,f)=>{switch(u){case"fade":a.style.transition=`opacity ${f} ease-in-out`,a.style.opacity="0",setTimeout(()=>{a.style.transform=`translateX(${m}%)`,a.style.opacity="1"},parseInt(f)/2);break;case"scale":a.style.transition=`transform ${f} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${m}%) scale(0.95)`,setTimeout(()=>{a.style.transform=`translateX(${m}%) scale(1)`},parseInt(f)/2);break;case"parallax":a.style.transition=`transform ${f} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${m}%)`,a.querySelectorAll('[role="group"]').forEach((R,O)=>{let B=R,D=(O-Math.abs(m)/H)*.1;B.style.transform=`translateX(${D}%)`});break;default:a.style.transition=`transform ${f} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${m}%)`;break}},[u,H]),W=z((a,m=!1)=>{if(Y!=="idle"&&!m)return;let f=F.current;if(!f)return;let w=a;if(c){let D=Math.max(s,2);w=a+D,a>=e.length?w=D+a%e.length:a<0&&(w=D+e.length+a)}let R=-(w*H),O=m||ie?"0ms":"300ms";m||pe("transitioning"),it(f,R,O);let B=$e(w);if(we(B),x?.(B),c&&!m&&ot(w)){let D=Math.max(s,2);(w<=D-1||w>=e.length+D)&&(f.dataset.needsReset="true",f.dataset.resetIndex=w<=D-1?(e.length+D-1).toString():D.toString())}},[c,e.length,H,s,$e,x,ie,Y,ot,it]),Z=z(()=>{W(k+1)},[k,W]),se=z(()=>{W(k-1)},[k,W]),Ge=z(()=>{Ce(!0)},[]),Xe=z(()=>{Ce(!1)},[]);Ke(()=>{if(!(!_||xe||!A||e.length<=1))return te.current=setTimeout(()=>{Z()},v),()=>{te.current&&clearTimeout(te.current)}},[_,xe,A,k,Z,v,e.length]),Ke(()=>!N||!J.current?void 0:Ca(J.current,m=>ue(m.isIntersecting),{threshold:.1}),[N]);let Ft=z(a=>V?Math.abs(a-k)<=ee:!0,[V,k,ee]),Yt=z(a=>{if(!p||Y!=="idle")return;let m=a.touches[0];m&&U({isDragging:!0,startX:m.clientX,currentX:m.clientX,startTime:Date.now(),velocity:0})},[p,Y]),_t=z(a=>{if(!I.isDragging)return;let m=a.touches[0];if(!m)return;let f=m.clientX-I.startX,w=Date.now()-I.startTime,R=w>0?f/w:0,O=F.current;if(O&&Math.abs(f)>10){a.preventDefault();let B=-(k*H),D=f/(J.current?.clientWidth||1)*100,ge=Math.min(Math.abs(f)/200,.8),Se=D*(1-ge);O.style.transition="none",O.style.transform=`translateX(${B+Se}%)`}U(B=>({...B,currentX:m.clientX,velocity:R}))},[I.isDragging,I.startX,I.startTime,k,H]),Ut=z(()=>{if(!I.isDragging)return;let a=I.currentX-I.startX,m=I.velocity,f=50;if(h&&Math.abs(m)>.5){let w=F.current;if(w){let R=m>0?k-1:k+1,O=-(R*H);He(w,O,m*100),W(R,!0)}}else if(Math.abs(a)>f)a>0?se():Z();else{let w=F.current;if(w&&h){let R=-(k*H);He(w,R,m*100)}else W(k,!0)}U({isDragging:!1,startX:0,currentX:0,startTime:0,velocity:0})},[I,h,Z,se,W,k,He,H]),Kt=z(()=>{pe("idle");let a=F.current;if(a?.dataset.needsReset==="true"){let m=parseInt(a.dataset.resetIndex||"0");a.style.transition="none",a.style.transform=`translateX(-${m*H}%)`,delete a.dataset.needsReset,delete a.dataset.resetIndex}},[H]),Qt=z(a=>{let m=ka();switch(a.key){case"ArrowLeft":a.preventDefault(),m?Z():se();break;case"ArrowRight":a.preventDefault(),m?se():Z();break;case"Home":a.preventDefault(),W(0);break;case"End":a.preventDefault(),W(e.length-1);break;case" ":a.preventDefault(),_?Xe():Ge();break}},[Z,se,W,e.length,_,Ge,Xe]);return Je("div",{ref:J,className:ze("dndev-relative dndev-overflow-hidden",r),onMouseEnter:()=>S&&$(!0),onMouseLeave:()=>S&&$(!1),onKeyDown:Qt,tabIndex:0,role:"region","aria-label":C,"aria-live":"polite",children:[P("div",{className:"dndev-overflow-hidden",children:P("div",{ref:F,className:ze("dndev-flex",I.isDragging&&"dndev-pointer-events-none",Y==="transitioning"&&"dndev-pointer-events-none"),style:{cursor:I.isDragging?"grabbing":void 0},onTransitionEnd:Kt,onTouchStart:Yt,onTouchMove:_t,onTouchEnd:Ut,children:Vt.map((a,m)=>{let f=$e(m),w=f===k,R=Ft(f);return P("div",{className:ze("dndev-flex-shrink-0",i),style:{width:`${H}%`,opacity:R?1:0},role:"group","aria-roledescription":"slide","aria-label":`Slide ${f+1} of ${e.length}`,onClick:()=>y?.(a,f),children:R&&t(a,f,w)},g?g(a,f):`${f}-${m}`)})})}),n&&e.length>1&&Je(Ra,{children:[P("button",{className:"dndev-absolute dndev-z-breadcrumbs dndev-flex dndev-items-center dndev-justify-center",style:{left:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",opacity:0,transition:"opacity var(--dur-normal)",borderRadius:"9999px",backgroundColor:"rgb(from var(--background) r g b / 0.8)",border:"1px solid var(--border)"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.9)",a.currentTarget.style.opacity="1"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.8)"},onClick:se,"aria-label":"Previous slide",children:P(fa,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})}),P("button",{className:"dndev-absolute dndev-z-breadcrumbs dndev-flex dndev-items-center dndev-justify-center",style:{right:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",opacity:0,transition:"opacity var(--dur-normal)",borderRadius:"9999px",backgroundColor:"rgb(from var(--background) r g b / 0.8)",border:"1px solid var(--border)"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.9)",a.currentTarget.style.opacity="1"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.8)"},onClick:Z,"aria-label":"Next slide",children:P(ha,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})})]}),d&&q&&P("button",{className:"dndev-absolute dndev-z-breadcrumbs dndev-flex dndev-items-center dndev-justify-center",style:{insetBlockStart:"var(--gap-md)",insetInlineEnd:"var(--gap-md)",width:"2rem",height:"2rem",opacity:0,transition:"opacity var(--dur-normal)",borderRadius:"9999px",backgroundColor:"rgb(from var(--background) r g b / 0.8)",border:"1px solid var(--border)"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.9)",a.currentTarget.style.opacity="1"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.8)"},onClick:()=>_?Xe():Ge(),"aria-label":_?"Pause carousel":"Play carousel",children:_?P(ba,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}}):P(ya,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})}),o&&e.length>1&&P("div",{className:"dndev-absolute dndev-flex dndev-gap-sm dndev-z-breadcrumbs",style:{bottom:"1rem",left:"50%",transform:"translateX(-50%)"},children:e.map((a,m)=>P("button",{style:{width:m===k?"1.5rem":"0.5rem",height:"0.5rem",borderRadius:"9999px",transition:"all 0.3s",backgroundColor:m===k?"var(--foreground)":"rgb(from var(--foreground) r g b / 0.3)"},onMouseEnter:f=>{m!==k&&(f.currentTarget.style.backgroundColor="rgb(from var(--foreground) r g b / 0.5)")},onMouseLeave:f=>{m!==k&&(f.currentTarget.style.backgroundColor="rgb(from var(--foreground) r g b / 0.3)")},onClick:()=>W(m),"aria-label":`Go to slide ${m+1}`},m))}),l&&d&&P("div",{className:"dndev-absolute dndev-left-0",style:{bottom:0,right:0,height:"0.25rem",backgroundColor:"rgb(from var(--foreground) r g b / 0.2)"},children:P("div",{style:{height:"100%",width:`${(k+1)/e.length*100}%`,backgroundColor:"var(--foreground)",transition:"width 0.1s linear"}})}),Je("div",{className:"dndev-sr-only","aria-live":"polite","aria-atomic":"true",children:["Slide ",k+1," of ",e.length]})]})}var Mt,Ta,Pt=le(()=>{"use strict";Mt=wa(Na);Mt.displayName="Carousel";Ta=Mt});var At={};ve(At,{default:()=>Ha});import{memo as Ia}from"react";import{Card as Da,Text as je}from"@donotdev/components";import{cn as La}from"@donotdev/components";import{Fragment as Ga,jsx as be,jsxs as zt}from"react/jsx-runtime";var $a,Ha,It=le(()=>{"use strict";$a=Ia(function({title:t,items:r,gridCols:i=2,className:n,ariaLabel:o}){let l={1:"grid-cols-1",2:"grid-cols-1 md:grid-cols-2",3:"grid-cols-1 md:grid-cols-2 lg:grid-cols-3",4:"grid-cols-1 md:grid-cols-2 lg:grid-cols-4"},d=Array.isArray(r)?r:[];return Array.isArray(r),zt("div",{className:La("dndev-marketing-stack",n),"aria-label":o,children:[t&&be(je,{as:"h3",level:"h2",children:t}),be("div",{className:"dndev-marketing-dndev-grid","data-cols":i,children:d.map((v,u)=>be(Da,{title:v.useCase,subtitle:v.bestFit,content:zt(Ga,{children:[be(je,{variant:"muted",level:"body",children:v.dndev}),be(je,{variant:"muted",level:"small",className:"italic",children:v.reason})]})},u))})]})}),Ha=$a});var Ot={};ve(Ot,{default:()=>Tn});import{memo as Le}from"react";import{cn as rt,Card as fn,Icon as hn,Stack as yn}from"@donotdev/components";import{jsx as M,jsxs as me}from"react/jsx-runtime";var oe,qt,bn,Wt,wn,Cn,xn,kn,Sn,Nn,Tn,Bt=le(()=>{"use strict";oe={desktop:{cardWidth:300,cardHeight:200,cardGap:32,drop:80,startX:0,containerWidth:1024,containerHeight:380},mobile:{cardWidth:320,cardHeight:200,verticalGap:24,containerWidth:400,curveOffset:40}},qt=Le(({className:e,density:t,onClick:r,icon:i,title:n,subtitle:o,description:l})=>me(fn,{className:rt("dndev-min-w-0",r?"cursor-pointer":"",e),style:{height:"200px",padding:"var(--gap-md)",transform:"scale(1)",transition:"transform var(--duration-normal)"},onMouseEnter:d=>{d.currentTarget.style.transform="scale(0.80)"},onMouseLeave:d=>{d.currentTarget.style.transform="scale(1)"},onClick:r,children:[me(yn,{direction:"row",align:"center",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[M(bn,{icon:i}),M("h3",{style:{fontSize:"var(--font-size-lg)",fontWeight:600,lineHeight:1.25,color:"var(--foreground)"},children:n})]}),o&&M("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)",lineHeight:1.625,marginBottom:"var(--gap-md)"},children:o}),l&&M("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--accent)",transition:"color var(--duration-normal)",cursor:"pointer"},onMouseEnter:d=>{d.currentTarget.style.color="rgb(from var(--accent) r g b / 0.8)"},onMouseLeave:d=>{d.currentTarget.style.color="var(--accent)"},children:l})]})),bn=Le(({icon:e})=>e?M("div",{className:"dndev-inline-flex dndev-flex-shrink-0 dndev-items-center dndev-justify-center",style:{width:"var(--touch-target)",height:"var(--touch-target)",borderRadius:"var(--radius-lg)",background:"linear-gradient(to bottom right, rgb(from var(--primary) r g b / 0.1), rgb(from var(--primary) r g b / 0.2))",color:"var(--primary)",transition:"background var(--duration-normal)"},onMouseEnter:t=>{t.currentTarget.style.background="linear-gradient(to bottom right, rgb(from var(--primary) r g b / 0.2), rgb(from var(--primary) r g b / 0.3))"},onMouseLeave:t=>{t.currentTarget.style.background="linear-gradient(to bottom right, rgb(from var(--primary) r g b / 0.1), rgb(from var(--primary) r g b / 0.2))"},children:M(hn,{icon:e,ariaHidden:!0})}):null),Wt=Le(function({className:t,startX:r,startY:i,endX:n,endY:o,index:l,isMobile:d=!1}){let v,u,c,s,p;if(d){let{curveOffset:h}=oe.mobile,x=(i+o)/2,y=r+h;u=Math.abs(y-r)+40,c=Math.abs(o-i)+40,s=Math.min(r,y)-20,p=Math.min(i,o)-20;let g=r-s,C=i-p,S=n-s,N=o-p,q=y-s,V=x-p;v=`M ${g} ${C} Q ${q} ${V} ${S} ${N}`}else{let h=(r+n)/2,x=i+(o-i)*.3;u=Math.abs(n-r)+40,c=Math.abs(o-i)+40,s=Math.min(r,n)-20,p=Math.min(i,o)-20;let y=r-s,g=i-p,C=n-s,S=o-p,N=h-s,q=x-p;v=`M ${y} ${g} Q ${N} ${q-20} ${C} ${S}`}return me("svg",{className:rt(t),style:{left:s,top:p,width:u,height:c,zIndex:1},viewBox:`0 0 ${u} ${c}`,role:"img",focusable:"false",children:[M("path",{d:v,fill:"none",stroke:"currentColor",strokeWidth:"3",strokeDasharray:"8,8",className:"text-accent waterfall-connector",style:{animationDelay:`${l*.2}s`}}),M("circle",{cx:r-s,cy:i-p,r:"6",fill:"currentColor",className:"text-accent"}),M("circle",{cx:n-s,cy:o-p,r:"6",fill:"currentColor",className:"text-accent"})]})}),wn=e=>{let{cardWidth:t,cardGap:r,drop:i,startX:n}=oe.desktop;return{x:n+e*(t+r),y:e*i}},Cn=e=>{let{cardHeight:t,verticalGap:r}=oe.mobile;return{x:0,y:e*(t+r)}},xn=e=>{let{cardWidth:t,cardGap:r,drop:i}=oe.desktop;return e===0?{startX:t,startY:i/2,endX:t+r+t/2,endY:i}:e===1?{startX:2*t+r,startY:1.5*i,endX:2.5*t+2*r,endY:2*i}:null},kn=e=>{let{cardWidth:t,cardHeight:r,verticalGap:i}=oe.mobile;return e===0?{startX:t,startY:.66*r,endX:t,endY:1.33*r+i}:e===1?{startX:t,startY:1.66*r+i,endX:t,endY:2.33*r+2*i}:null},Sn=e=>{let{cardHeight:t,verticalGap:r}=oe.mobile;return(e-1)*(t+r)+t+40},Nn=Le(({items:e,className:t,connectorClassName:r,density:i="comfortable",ariaLabel:n,direction:o="horizontal"})=>{if(!e?.length)return null;if(o==="descending"){let{desktop:d,mobile:v}=oe;return me("section",{className:rt("dndev-w-full dndev-overflow-hidden",t),children:[me("div",{className:"dndev-hidden dndev-relative ",style:{width:`${d.containerWidth}px`,height:`${d.containerHeight}px`},children:[M("ol",{className:"dndev-relative","aria-label":n??"Process steps",children:e.map((u,c)=>{let{x:s,y:p}=wn(c);return M("li",{className:"list-none dndev-absolute waterfall-card",style:{left:`${s}px`,top:`${p}px`,width:`${d.cardWidth}px`},children:M(qt,{density:i,onClick:u.onClick,icon:u.icon,title:u.title,subtitle:u.subtitle,description:u.description})},`cascade-${c}-${u.title}`)})}),e.map((u,c)=>{if(c>=e.length-1)return null;let s=xn(c);return s?M(Wt,{startX:s.startX,startY:s.startY,endX:s.endX,endY:s.endY,className:r,index:c,isMobile:!1},`desktop-connector-${c}`):null})]}),M("div",{className:" dndev-w-full px-[var(--content-padding)]",children:me("div",{className:"dndev-relative dndev-mx-auto",style:{width:`${v.containerWidth}px`,height:`${Sn(e.length)}px`},children:[M("ol",{className:"dndev-relative","aria-label":n??"Process steps",children:e.map((u,c)=>{let{x:s,y:p}=Cn(c);return M("li",{className:"list-none dndev-absolute",style:{left:`${s}px`,top:`${p}px`,width:`${v.cardWidth}px`},children:M(qt,{density:i,onClick:u.onClick,icon:u.icon,title:u.title,subtitle:u.subtitle,description:u.description})},`mobile-${c}-${u.title}`)})}),e.map((u,c)=>{if(c>=e.length-1)return null;let s=kn(c);return s?M(Wt,{startX:s.startX,startY:s.startY,endX:s.endX,endY:s.endY,className:r,index:c,isMobile:!0},`mobile-connector-${c}`):null})]})})]})}return null}),Tn=Nn});qe();import{useState as dr,useMemo as cr,lazy as mr,Suspense as ur}from"react";import{cn as pr}from"@donotdev/components";import{jsx as j,jsxs as ct}from"react/jsx-runtime";var gr=mr(()=>Promise.resolve().then(()=>(dt(),lt))),vr=({content:e,intro:t,title:r,duration:i=26,contentHeight:n="150vh",tiltAngle:o,className:l,style:d,"aria-label":v})=>{let[u,c]=dr(!0),s=cr(()=>t==null?null:typeof t=="string"?j("div",{className:"dndev-crawl-intro-text",children:de(t,{allowedTags:["u","br","i","em","strong","b"]})}):t,[t]),p=()=>{c(!1)};return ct("div",{className:pr("dndev-crawl-container","dndev-relative dndev-overflow-hidden",l),style:{...d,height:"calc(100dvh - var(--header-height))"},"aria-label":v||"Animated text crawl",role:"region","aria-live":"polite",children:[u&&ct("div",{className:"dndev-absolute dndev-inset-0 dndev-flex dndev-flex-col dndev-items-center dndev-justify-center",style:{zIndex:30,backgroundColor:"rgba(0, 0, 0, 0.6)",backdropFilter:"blur(4px)"},children:[s&&j("div",{className:"dndev-w-full",style:{paddingInline:"var(--content-padding)",marginBottom:"3rem"},children:j("div",{className:"dndev-crawl-intro-content",children:s})}),j("button",{onClick:p,style:{width:"96px",height:"96px",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(255, 255, 255, 0.2)",border:"4px solid rgba(255, 255, 255, 0.4)",backdropFilter:"blur(4px)",cursor:"pointer",transition:"all var(--dur-normal) var(--ease-in-out)"},onMouseEnter:h=>{h.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.3)",h.currentTarget.style.borderColor="rgba(255, 255, 255, 0.6)",h.currentTarget.style.transform="scale(1.1)"},onMouseLeave:h=>{h.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.2)",h.currentTarget.style.borderColor="rgba(255, 255, 255, 0.4)",h.currentTarget.style.transform="scale(1)"},"aria-label":"Start animated introduction",children:j("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"white",style:{marginInlineStart:"4px"},children:j("path",{d:"M8 5v14l11-7z"})})})]}),!u&&j(ur,{fallback:null,children:j(gr,{title:r,content:e,duration:i,contentHeight:n,tiltAngle:o})})]})},mt=vr;import{Suspense as Mr,lazy as Er}from"react";import{cn as fr,GAP_VARIANT as hr,Stack as yr}from"@donotdev/components";import{jsx as Be}from"react/jsx-runtime";function br({className:e,itemCount:t=8,itemWidth:r,gap:i=hr.MEDIUM,direction:n="horizontal"}){let o=n==="vertical";return Be("div",{className:fr("dndev-relative dndev-overflow-hidden",e),role:"status","aria-label":"Loading content",children:Be(yr,{direction:o?"column":"row",align:o?void 0:"center",gap:i,children:Array.from({length:t*2}).map((l,d)=>Be("div",{className:"dndev-flex-shrink-0 dndev-animate-pulse",style:o?{height:"4rem",width:"100%",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}:{height:"4rem",width:r||"4rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}},d))})})}var ut=br;import{GAP_VARIANT as zr}from"@donotdev/components";import{jsx as Fe}from"react/jsx-runtime";var Pr=Er(()=>Promise.resolve().then(()=>(ft(),vt))),Ar=e=>{let{gap:t=zr.MEDIUM,direction:r="auto",...i}=e;return Fe(Mr,{fallback:Fe(ut,{itemCount:8,gap:t,direction:r==="up"||r==="down"?"vertical":"horizontal"}),children:Fe(Pr,{...i})})},ht=Ar;import{Eye as Ir}from"lucide-react";import{useState as Dr}from"react";import{PortalButton as Lr,cn as yt,Sheet as $r,Code as Hr,Stack as Gr}from"@donotdev/components";import{Fragment as qr,jsx as Re,jsxs as Wr}from"react/jsx-runtime";function Xr({data:e,sourceCode:t,language:r="tsx",title:i="Page Source",className:n}){let[o,l]=Dr(!1),d=t||e||"",v=u=>{};return Wr(qr,{children:[Re(Lr,{icon:Ir,onClick:()=>l(!0),className:yt("dndev-z-overlay",n),style:{position:"fixed",zIndex:"var(--z-overlay)",right:"var(--gap-sm)",bottom:"calc(var(--footer-height, 0px) + var(--gap-sm))"},tooltip:"Code Inspector","aria-label":"Code Inspector"}),Re($r,{open:o,onOpenChange:l,side:"bottom",className:yt("dndev-w-full",n),style:{width:"100%",height:"90%",maxHeight:"90dvh",borderRadius:"var(--radius-xl) var(--radius-xl) 0 0",display:"flex",flexDirection:"column",overflow:"hidden"},children:Re(Gr,{gap:"none",style:{flex:"1 1 auto",minHeight:0,overflow:"hidden"},children:Re(Hr,{language:r,showCopyButton:!0,onCopy:v,children:d})})})]})}var bt=Xr;import{memo as Or,useEffect as Br,useRef as Vr,useState as Fr}from"react";import{cn as Ye,Button as Yr,IconBox as _r,Separator as Ur,SEPARATOR_VARIANT as Kr,Text as Me,useIntersectionObserver as Qr,getVariantDataAttrs as Jr,surfaceVariants as Zr}from"@donotdev/components";import{jsx as E,jsxs as he}from"react/jsx-runtime";var wt={intersectionThreshold:.3,intersectionRootMargin:"0px 0px -20% 0px"},jr=Or(({icon:e})=>e?E(_r,{icon:e,ariaHidden:!0}):null),ea=({items:e,className:t,ariaLabel:r,variant:i,style:n})=>{let[o,l]=Fr(0),d=Vr(null),u=e.some(p=>p.customHeight)?Math.max(...e.map(p=>p.customHeight||0).filter(p=>p>0)):null,c={small:1,medium:2,large:3},s=e.reduce((p,h)=>{let x=h.estimatedHeight||"medium",y=c[x]||2,g=c[p]||2;return y>g?x:p},"medium");return E("div",{className:Ye("dndev-relative dndev-stacked-cards-container",t),ref:d,"aria-label":r,style:{"--e":o.toString()},children:e.map((p,h)=>E(ta,{item:p,index:h,entered:o,onEnter:()=>l(h),totalItems:e.length,cardProps:{variant:i,style:n},maxEstimatedHeight:s,maxCustomHeight:u},h))})},ta=({item:e,index:t,entered:r,onEnter:i,totalItems:n,cardProps:o,maxEstimatedHeight:l,maxCustomHeight:d})=>{let{ref:v,isIntersecting:u}=Qr({threshold:wt.intersectionThreshold,rootMargin:wt.intersectionRootMargin});Br(()=>{typeof window<"u"&&u&&i()},[u,i]);let c=Array.isArray(e.content)?e.content:e.content?[e.content]:[];return E("section",{ref:v,className:"dndev-relative",style:{zIndex:n-t-1},children:E("div",{className:Ye("dndev-relative dndev-overflow-hidden stack","dndev-min-w-0"),"data-size":d?void 0:l,"data-stacked":t>r?"true":"false",style:{"--i":t.toString(),...d&&{"--dynamic-height":`${d}px`},...o.style},children:he("div",{className:Ye(Zr({variant:o.variant}),"dndev-relative dndev-overflow-hidden dndev-h-full"),...Jr({variant:o.variant}),"data-role":"card","data-clickable":e.onClick?"true":void 0,onClick:e.onClick,style:{padding:"var(--gap-sm)",...o.style},children:[he("div",{className:"stack-content",children:[he("div",{className:"dndev-stacked-cards-body",children:[he("div",{className:"dndev-stacked-cards-left",children:[he("div",{className:"dndev-stacked-cards-header",children:[e.icon&&E(jr,{icon:e.icon}),e.title&&E(Me,{as:"h3",children:e.title})]}),e.subtitle&&E(Me,{as:"p",level:"h4",variant:"primary",children:e.subtitle}),e.description&&E(Me,{as:"p",level:"h4",variant:"muted",children:e.description})]}),E(Ur,{orientation:"vertical",variant:Kr.ACCENT,className:"dndev-stacked-cards-separator"}),c.length>0&&E("div",{className:"dndev-stacked-cards-right",children:c.map((s,p)=>E(Me,{as:"div",level:"body",variant:"muted",children:s},p))})]}),e.cta&&E("div",{className:"dndev-stacked-cards-cta",children:E(Yr,{onClick:e.onClick,variant:e.cta.variant||"primary",icon:e.cta.icon,children:e.cta.text})}),E("div",{className:"dndev-stacked-cards-spacer"})]}),E("div",{className:"dndev-stacked-cards-number",children:e.number?String(e.number):String(t+1).padStart(2,"0")})]})})})},Ct=ea;import{jsx as aa}from"react/jsx-runtime";var ra=function(t){return aa(Ct,{...t})},xt=ra;import{useCallback as na}from"react";import{cn as oa,useViewportVisibility as ia}from"@donotdev/components";import{jsx as kt}from"react/jsx-runtime";var sa=({items:e=[],direction:t="fade-in",stagger:r=100,threshold:i,distance:n,duration:o,once:l=!1,viewport:d=!0,overrides:v=[],className:u,children:c})=>{let{ref:s,isVisible:p,hasTriggered:h,visibleItems:x,isItemVisible:y}=ia({threshold:i,once:l,trackItems:d,enableScrollListener:d}),g=na(S=>{let N=v.find(q=>q.index===S);if(N)return N.direction;switch(t){case"alternate-h":return S%2===0?"left":"right";case"alternate-v":return S%2===0?"top":"bottom";default:return t}},[t,v]),C=()=>e.map((S,N)=>{let q=g(N),V=N*r,ee=d?y(N):p;return kt("div",{className:"dndev-reveal-item","data-direction":q,"data-visible":ee,style:{"--reveal-delay":`${V}ms`,"--reveal-index":N,...n!==void 0&&{"--reveal-distance":`${n}vw`},...o!==void 0&&{"--reveal-duration":`${o}ms`}},children:S},N)});return kt("div",{ref:s,className:oa("dndev-reveal-container",p&&"dndev-reveal-visible",u),"data-direction":t,"data-stagger":r,children:e.length>0?C():c})},ye=sa;import{jsx as _e,jsxs as da}from"react/jsx-runtime";function la({status:e,animationClass:t}){return _e("svg",{width:"100%",height:"100%",viewBox:"0 0 512 512",className:"drop--lg",preserveAspectRatio:"xMidYMid meet",children:da("g",{transform:"translate(0,512) scale(0.1,-0.1)",children:[_e("path",{d:`M2465 4956 c-60 -28 -97 -66 -124 -126 -20 -44 -21 -63 -21 -630 0
1
+ "use client";var ir=Object.defineProperty;var ce=(e,t)=>()=>(e&&(t=e(e=0)),t);var he=(e,t)=>{for(var r in t)ir(e,r,{get:t[r],enumerable:!0})};import{createElement as be}from"react";function me(e,t={}){let{allowedTags:r=["p","br","u","i","em","strong","b"],preserveLineBreaks:o=!0,className:n}=t;if(!e||typeof e!="string")return[];let i=e;o&&(i=i.replace(/\n/g,"<br/>"));let d=i.split(/(<[^>]+>)/),l=[],u=0;for(let c=0;c<d.length;c++){let m=d[c];if(!m)continue;let s=m.match(/^<(\w+)(?:\s[^>]*)?\s*\/>$/);if(s&&s[1]){let y=s[1].toLowerCase();if(r.includes(y)){let b=dt(y,"",n,u++);b&&l.push(b);continue}}let g=m.match(/^<(\w+)(?:\s[^>]*)?>$/);if(g&&g[1]){let y=g[1].toLowerCase();if(r.includes(y)){let b=`</${y}>`,f="",v=c+1;for(;v<d.length&&d[v]&&!d[v].includes(b);)f+=d[v],v++;v<d.length&&d[v]&&(f+=d[v].replace(b,""));let C=dt(y,f,n,u++);C&&l.push(C),c=v;continue}}m&&!m.startsWith("<")&&l.push(m)}return l}function dt(e,t,r,o){let n={key:o};switch(r&&(n.className=r),e){case"p":return be("p",n,t);case"br":return be("br",n);case"u":return be("u",n,t);case"i":case"em":return be("em",n,t);case"strong":case"b":return be("strong",n,t);default:return t}}var qe=ce(()=>{"use strict"});var lt={};he(lt,{default:()=>ur});import{useEffect as sr,useRef as dr,useState as lr,useMemo as We,isValidElement as cr}from"react";import{isClient as mr}from"@donotdev/core";import{Fragment as vr,jsx as G,jsxs as Be}from"react/jsx-runtime";var pr,ur,ct=ce(()=>{"use strict";qe();pr=({content:e,title:t,duration:r=26,contentHeight:o="150vh",tiltAngle:n,onPause:i,onResume:d})=>{let l=dr(null),[u,c]=lr(!1),m=f=>!f||typeof f!="string"?null:f.split(/\n\s*\n/).map(C=>C.trim()).filter(C=>C.length>0).map((C,k)=>G("p",{children:me(C,{allowedTags:["u","br","i","em","strong","b"]})},`p-${k}`)),s=We(()=>t?typeof t=="string"?G("h2",{className:"dndev-crawl-title",children:me(t,{allowedTags:["u","br","i","em","strong","b"]})}):t:null,[t]),g=We(()=>cr(e)?e:Array.isArray(e)?e.map(v=>typeof v=="string"?v.trim():"").filter(v=>v&&v.length>0).map((v,C)=>G("p",{children:me(v,{allowedTags:["u","br","i","em","strong","b"]})},`c-${C}`)):typeof e=="string"?m(e):e,[e]),y=We(()=>{let f={"--crawl-content-height":o,animationName:"dndev-crawl-animation",animationDuration:`${r}s`,animationTimingFunction:"linear",animationIterationCount:"infinite",animationFillMode:"forwards",animationPlayState:u?"paused":"running"};return n!==void 0&&(f["--crawl-tilt"]=`${n}deg`),f},[u,r,o,n]);sr(()=>{if(!mr()||!l.current)return;let f=window.matchMedia("(prefers-reduced-motion: reduce)"),v=()=>{f.matches&&l.current&&l.current.classList.add("dndev-crawl-reduced-motion")};return v(),f.addEventListener("change",v),()=>f.removeEventListener("change",v)},[]);let b=()=>{u?(c(!1),d?.()):(c(!0),i?.())};return Be(vr,{children:[G("div",{className:"dndev-crawl-3d-container",onClick:b,children:G("div",{ref:l,className:"dndev-crawl-text",style:{...y,willChange:u?"auto":"transform"},children:Be("div",{className:"dndev-crawl-content",children:[s,g]})})}),u&&G("div",{className:"dndev-absolute dndev-inset-0 dndev-flex dndev-items-center dndev-justify-center",style:{zIndex:30,backgroundColor:"rgba(0, 0, 0, 0.3)",backdropFilter:"blur(2px)"},onClick:b,children:G("button",{style:{width:"96px",height:"96px",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(255, 255, 255, 0.2)",border:"4px solid rgba(255, 255, 255, 0.4)",backdropFilter:"blur(4px)",cursor:"pointer",transition:"all var(--dur-normal) var(--ease-in-out)"},"aria-label":"Resume animation",children:G("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"white",children:G("path",{d:"M6 4h4v16H6V4zm8 0h4v16h-4V4z"})})})}),Be("div",{className:"dndev-crawl-stars",children:[G("div",{className:"dndev-crawl-stars-layer-1"}),G("div",{className:"dndev-crawl-stars-layer-2"}),G("div",{className:"dndev-crawl-stars-layer-3"})]})]})},ur=pr});var ft={};he(ft,{default:()=>Ir});import{useRef as Tr,useState as Te,useEffect as vt}from"react";import{cn as Fe,GAP_VARIANT as Rr,Stack as Mr}from"@donotdev/components";import{observeElement as Pr,addEventListener as Er}from"@donotdev/components";import{jsx as Re}from"react/jsx-runtime";function Ar({items:e,renderItem:t,className:r,itemClassName:o,gap:n=Rr.MEDIUM,speed:i=48,direction:d="auto",pauseOnHover:l=!0,ariaLabel:u,reducedMotion:c="respect",behavior:m="auto",pauseOnFocusWithin:s=!0,easing:g="ease-in-out"}){let y=typeof document<"u"&&document.dir==="rtl",b=typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1,f=d;d==="auto"&&(f=y?"right":"left");let v=f==="up"||f==="down",C=c==="ignore"||!b,k=m;m==="auto"&&(k=e.length<=20?"bounce":"infinite");let N=Tr(null),[X,F]=Te(8e3),[te,j]=Te(0),[Y,S]=Te(!0),[Ce,U]=Te(!1);vt(()=>N.current?Pr(N.current,A=>S(A.isIntersecting),{threshold:0}):void 0,[]),vt(()=>{if(!N.current||typeof window>"u"||!C)return;let $=N.current,A=$.querySelector("[data-marquee-track]");if(!A)return;let ve=()=>{let K=v?$.clientHeight:$.clientWidth,re=v?A.scrollHeight:A.scrollWidth,_=Math.max(0,re-K);if(U(_>0),_>0){let ge=Math.min(512,Math.max(12,i));if(k==="bounce"){let de=_*2/ge*1e3;F(Math.max(2e3,Math.floor(de))),j(_)}else{let de=(re+gt[n])/ge*1e3;F(Math.max(2e3,Math.floor(de))),j(re+gt[n])}}else F(0),j(0)};if(requestAnimationFrame(ve),typeof ResizeObserver<"u"){let K=new ResizeObserver(()=>{requestAnimationFrame(ve)});return K.observe($),()=>K.disconnect()}else return Er(window,"resize",()=>requestAnimationFrame(ve))},[e,i,v,C,k,n]);let xe=()=>v?f==="up"?"normal":"reverse":f==="left"?"normal":"reverse",ke=()=>k==="infinite"&&Ce?[...e,...e].map(($,A)=>Re("div",{className:Fe("dndev-flex-shrink-0",o),children:t($,A%e.length)},A)):e.map(($,A)=>Re("div",{className:Fe("dndev-flex-shrink-0",o),children:t($,A)},A));return Re("div",{ref:N,className:Fe("dndev-relative dndev-overflow-hidden",l&&"group",s&&"focus-within:group",r),role:"region","aria-label":u||`${k==="infinite"?"Scrolling":"Bouncing"} content with ${e.length} items`,"aria-live":C&&Y?"off":"polite",children:Re(Mr,{className:"marquee-track",direction:v?"column":"row",align:v?void 0:"center",gap:n,"data-marquee-track":!0,"data-marquee-direction":v?"vertical":"horizontal","data-marquee-behavior":k,"data-marquee-reduced-motion":!C,style:{"--marquee-duration":C&&Y&&Ce?`${X}ms`:"0ms","--marquee-direction":xe(),"--marquee-distance":v?`${te}px`:`${te}px`,"--marquee-easing":zr[g],animationPlayState:!C||!Y?"paused":"running"},children:ke()})})}var gt,zr,Ir,ht=ce(()=>{"use strict";gt={none:0,tight:8,medium:16,large:32},zr={linear:"linear","ease-in-out":"ease-in-out","ease-out":"ease-out"};Ir=Ar});var Lt={};he(Lt,{default:()=>qa});import{ChevronLeft as za,ChevronRight as Aa,Play as Ia,Pause as Da}from"lucide-react";import{useRef as Ke,useState as oe,useEffect as Qe,useCallback as z,useMemo as Je,memo as La}from"react";import{cn as Ae,observeElement as $a,addEventListener as Ha,isRTLLanguage as Ga,Stack as Oa}from"@donotdev/components";import{Fragment as Wa,jsx as E,jsxs as je}from"react/jsx-runtime";function Xa({items:e,renderItem:t,className:r,slideClassName:o,showArrows:n=!0,showDots:i=!1,showProgress:d=!0,autoplay:l=!0,autoplayInterval:u=5e3,transition:c="slide",infinite:m=!0,slidesToShow:s=1,swipeable:g=!0,momentum:y=!0,onActiveChange:b,onSlideClick:f,keyExtractor:v,"aria-label":C="Premium carousel",pauseOnHover:k=!0,pauseOnInvisible:N=!0,showPlayPause:X=!0,lazy:F=!1,preloadDistance:te=1}){if(!e||e.length===0)return E(Oa,{align:"center",justify:"center",className:Ae("dndev-relative",r),children:E("div",{style:{color:"var(--muted-foreground)"},children:"No items to display"})});let j=Ke(null),Y=Ke(null),[S,Ce]=oe(0),[U,xe]=oe(l),[ke,$]=oe(!1),[A,ve]=oe(!0),[I,K]=oe({isDragging:!1,startX:0,currentX:0,startTime:0,velocity:0}),re=Ke(null),[_,ge]=oe("idle"),[de,ot]=oe(!1);Qe(()=>{if(typeof window>"u")return;let a=window.matchMedia("(prefers-reduced-motion: reduce)");return ot(a.matches),Ha(a,"change",h=>{ot(h.matches)})},[]);let Se=Je(()=>({tension:.3,friction:.8,mass:1}),[]),Qt=Je(()=>{if(!m||e.length<=s)return e;let a=Math.max(s,2),p=e.slice(-a),h=e.slice(0,a);return[...p,...e,...h]},[e,m,s]),H=Je(()=>100/s,[s]),He=z(a=>{if(!m)return a;let p=Math.max(s,2);return((a-p)%e.length+e.length)%e.length},[m,e.length,s]),it=z(a=>{if(!m)return!0;let p=Math.max(s,2),h=e.length+p-1;return a>=p&&a<=h},[m,e.length,s]),Ge=z((a,p,h=0)=>{if(!y)return;let x=parseFloat(a.style.transform.replace("translateX(","").replace("%)",""))||0,R=h,W=Date.now(),B=()=>{let fe=(Date.now()-W)/1e3,Ne=x-p,ar=-Se.tension*Ne,nr=-Se.friction*R,or=(ar+nr)/Se.mass;R+=or*fe,x+=R*fe,a.style.transform=`translateX(${x}%)`,Math.abs(Ne)>.1||Math.abs(R)>.1?requestAnimationFrame(B):(a.style.transform=`translateX(${p}%)`,a.style.transition="none")};requestAnimationFrame(B)},[y,Se]),st=z((a,p,h)=>{switch(c){case"fade":a.style.transition=`opacity ${h} ease-in-out`,a.style.opacity="0",setTimeout(()=>{a.style.transform=`translateX(${p}%)`,a.style.opacity="1"},parseInt(h)/2);break;case"scale":a.style.transition=`transform ${h} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${p}%) scale(0.95)`,setTimeout(()=>{a.style.transform=`translateX(${p}%) scale(1)`},parseInt(h)/2);break;case"parallax":a.style.transition=`transform ${h} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${p}%)`,a.querySelectorAll('[role="group"]').forEach((R,W)=>{let B=R,D=(W-Math.abs(p)/H)*.1;B.style.transform=`translateX(${D}%)`});break;default:a.style.transition=`transform ${h} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${p}%)`;break}},[c,H]),q=z((a,p=!1)=>{if(_!=="idle"&&!p)return;let h=Y.current;if(!h)return;let x=a;if(m){let D=Math.max(s,2);x=a+D,a>=e.length?x=D+a%e.length:a<0&&(x=D+e.length+a)}let R=-(x*H),W=p||de?"0ms":"300ms";p||ge("transitioning"),st(h,R,W);let B=He(x);if(Ce(B),b?.(B),m&&!p&&it(x)){let D=Math.max(s,2);(x<=D-1||x>=e.length+D)&&(h.dataset.needsReset="true",h.dataset.resetIndex=x<=D-1?(e.length+D-1).toString():D.toString())}},[m,e.length,H,s,He,b,de,_,it,st]),Z=z(()=>{q(S+1)},[S,q]),le=z(()=>{q(S-1)},[S,q]),Oe=z(()=>{xe(!0)},[]),Xe=z(()=>{xe(!1)},[]);Qe(()=>{if(!(!U||ke||!A||e.length<=1))return re.current=setTimeout(()=>{Z()},u),()=>{re.current&&clearTimeout(re.current)}},[U,ke,A,S,Z,u,e.length]),Qe(()=>!N||!j.current?void 0:$a(j.current,p=>ve(p.isIntersecting),{threshold:.1}),[N]);let Jt=z(a=>F?Math.abs(a-S)<=te:!0,[F,S,te]),jt=z(a=>{if(!g||_!=="idle")return;let p=a.touches[0];p&&K({isDragging:!0,startX:p.clientX,currentX:p.clientX,startTime:Date.now(),velocity:0})},[g,_]),Zt=z(a=>{if(!I.isDragging)return;let p=a.touches[0];if(!p)return;let h=p.clientX-I.startX,x=Date.now()-I.startTime,R=x>0?h/x:0,W=Y.current;if(W&&Math.abs(h)>10){a.preventDefault();let B=-(S*H),D=h/(j.current?.clientWidth||1)*100,fe=Math.min(Math.abs(h)/200,.8),Ne=D*(1-fe);W.style.transition="none",W.style.transform=`translateX(${B+Ne}%)`}K(B=>({...B,currentX:p.clientX,velocity:R}))},[I.isDragging,I.startX,I.startTime,S,H]),er=z(()=>{if(!I.isDragging)return;let a=I.currentX-I.startX,p=I.velocity,h=50;if(y&&Math.abs(p)>.5){let x=Y.current;if(x){let R=p>0?S-1:S+1,W=-(R*H);Ge(x,W,p*100),q(R,!0)}}else if(Math.abs(a)>h)a>0?le():Z();else{let x=Y.current;if(x&&y){let R=-(S*H);Ge(x,R,p*100)}else q(S,!0)}K({isDragging:!1,startX:0,currentX:0,startTime:0,velocity:0})},[I,y,Z,le,q,S,Ge,H]),tr=z(()=>{ge("idle");let a=Y.current;if(a?.dataset.needsReset==="true"){let p=parseInt(a.dataset.resetIndex||"0");a.style.transition="none",a.style.transform=`translateX(-${p*H}%)`,delete a.dataset.needsReset,delete a.dataset.resetIndex}},[H]),rr=z(a=>{let p=Ga();switch(a.key){case"ArrowLeft":a.preventDefault(),p?Z():le();break;case"ArrowRight":a.preventDefault(),p?le():Z();break;case"Home":a.preventDefault(),q(0);break;case"End":a.preventDefault(),q(e.length-1);break;case" ":a.preventDefault(),U?Xe():Oe();break}},[Z,le,q,e.length,U,Oe,Xe]);return je("div",{ref:j,className:Ae("dndev-relative dndev-overflow-hidden",r),onMouseEnter:()=>k&&$(!0),onMouseLeave:()=>k&&$(!1),onKeyDown:rr,tabIndex:0,role:"region","aria-label":C,"aria-live":"polite",children:[E("div",{className:"dndev-overflow-hidden",children:E("div",{ref:Y,className:Ae("dndev-flex",I.isDragging&&"dndev-pointer-events-none",_==="transitioning"&&"dndev-pointer-events-none"),style:{cursor:I.isDragging?"grabbing":void 0},onTransitionEnd:tr,onTouchStart:jt,onTouchMove:Zt,onTouchEnd:er,children:Qt.map((a,p)=>{let h=He(p),x=h===S,R=Jt(h);return E("div",{className:Ae("dndev-flex-shrink-0",o),style:{width:`${H}%`,opacity:R?1:0},role:"group","aria-roledescription":"slide","aria-label":`Slide ${h+1} of ${e.length}`,onClick:()=>f?.(a,h),children:R&&t(a,h,x)},v?v(a,h):`${h}-${p}`)})})}),n&&e.length>1&&je(Wa,{children:[E("button",{className:"dndev-absolute dndev-z-breadcrumbs dndev-flex dndev-items-center dndev-justify-center",style:{left:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",opacity:0,transition:"opacity var(--dur-normal)",borderRadius:"9999px",backgroundColor:"rgb(from var(--background) r g b / 0.8)",border:"1px solid var(--border)"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.9)",a.currentTarget.style.opacity="1"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.8)"},onClick:le,"aria-label":"Previous slide",children:E(za,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})}),E("button",{className:"dndev-absolute dndev-z-breadcrumbs dndev-flex dndev-items-center dndev-justify-center",style:{right:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",opacity:0,transition:"opacity var(--dur-normal)",borderRadius:"9999px",backgroundColor:"rgb(from var(--background) r g b / 0.8)",border:"1px solid var(--border)"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.9)",a.currentTarget.style.opacity="1"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.8)"},onClick:Z,"aria-label":"Next slide",children:E(Aa,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})})]}),l&&X&&E("button",{className:"dndev-absolute dndev-z-breadcrumbs dndev-flex dndev-items-center dndev-justify-center",style:{insetBlockStart:"var(--gap-md)",insetInlineEnd:"var(--gap-md)",width:"2rem",height:"2rem",opacity:0,transition:"opacity var(--dur-normal)",borderRadius:"9999px",backgroundColor:"rgb(from var(--background) r g b / 0.8)",border:"1px solid var(--border)"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.9)",a.currentTarget.style.opacity="1"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.8)"},onClick:()=>U?Xe():Oe(),"aria-label":U?"Pause carousel":"Play carousel",children:U?E(Da,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}}):E(Ia,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})}),i&&e.length>1&&E("div",{className:"dndev-absolute dndev-flex dndev-gap-sm dndev-z-breadcrumbs",style:{bottom:"1rem",left:"50%",transform:"translateX(-50%)"},children:e.map((a,p)=>E("button",{style:{width:p===S?"1.5rem":"0.5rem",height:"0.5rem",borderRadius:"9999px",transition:"all 0.3s",backgroundColor:p===S?"var(--foreground)":"rgb(from var(--foreground) r g b / 0.3)"},onMouseEnter:h=>{p!==S&&(h.currentTarget.style.backgroundColor="rgb(from var(--foreground) r g b / 0.5)")},onMouseLeave:h=>{p!==S&&(h.currentTarget.style.backgroundColor="rgb(from var(--foreground) r g b / 0.3)")},onClick:()=>q(p),"aria-label":`Go to slide ${p+1}`},p))}),d&&l&&E("div",{className:"dndev-absolute dndev-left-0",style:{bottom:0,right:0,height:"0.25rem",backgroundColor:"rgb(from var(--foreground) r g b / 0.2)"},children:E("div",{style:{height:"100%",width:`${(S+1)/e.length*100}%`,backgroundColor:"var(--foreground)",transition:"width 0.1s linear"}})}),je("div",{className:"dndev-sr-only","aria-live":"polite","aria-atomic":"true",children:["Slide ",S+1," of ",e.length]})]})}var Dt,qa,$t=ce(()=>{"use strict";Dt=La(Xa);Dt.displayName="Carousel";qa=Dt});var Gt={};he(Gt,{default:()=>ja});import{memo as Ua}from"react";import{Card as Ka,Text as et}from"@donotdev/components";import{cn as Qa}from"@donotdev/components";import{Fragment as Za,jsx as we,jsxs as Ht}from"react/jsx-runtime";var Ja,ja,Ot=ce(()=>{"use strict";Ja=Ua(function({title:t,items:r,gridCols:o=2,className:n,ariaLabel:i}){let d={1:"grid-cols-1",2:"grid-cols-1 md:grid-cols-2",3:"grid-cols-1 md:grid-cols-2 lg:grid-cols-3",4:"grid-cols-1 md:grid-cols-2 lg:grid-cols-4"},l=Array.isArray(r)?r:[];return Array.isArray(r),Ht("div",{className:Qa("dndev-marketing-stack",n),"aria-label":i,children:[t&&we(et,{as:"h3",level:"h2",children:t}),we("div",{className:"dndev-marketing-dndev-grid","data-cols":o,children:l.map((u,c)=>we(Ka,{title:u.useCase,subtitle:u.bestFit,content:Ht(Za,{children:[we(et,{variant:"muted",level:"body",children:u.dndev}),we(et,{variant:"muted",level:"small",className:"italic",children:u.reason})]})},c))})]})}),ja=Ja});var Ut={};he(Ut,{default:()=>qn});import{memo as $e}from"react";import{cn as at,Card as zn,Icon as An,Stack as In}from"@donotdev/components";import{jsx as P,jsxs as ue}from"react/jsx-runtime";var se,Yt,Dn,_t,Ln,$n,Hn,Gn,On,Xn,qn,Kt=ce(()=>{"use strict";se={desktop:{cardWidth:300,cardHeight:200,cardGap:32,drop:80,startX:0,containerWidth:1024,containerHeight:380},mobile:{cardWidth:320,cardHeight:200,verticalGap:24,containerWidth:400,curveOffset:40}},Yt=$e(({className:e,density:t,onClick:r,icon:o,title:n,subtitle:i,description:d})=>ue(zn,{className:at("dndev-min-w-0",r?"cursor-pointer":"",e),style:{height:"200px",padding:"var(--gap-md)",transform:"scale(1)",transition:"transform var(--duration-normal)"},onMouseEnter:l=>{l.currentTarget.style.transform="scale(0.80)"},onMouseLeave:l=>{l.currentTarget.style.transform="scale(1)"},onClick:r,children:[ue(In,{direction:"row",align:"center",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[P(Dn,{icon:o}),P("h3",{style:{fontSize:"var(--font-size-lg)",fontWeight:600,lineHeight:1.25,color:"var(--foreground)"},children:n})]}),i&&P("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)",lineHeight:1.625,marginBottom:"var(--gap-md)"},children:i}),d&&P("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--accent)",transition:"color var(--duration-normal)",cursor:"pointer"},onMouseEnter:l=>{l.currentTarget.style.color="rgb(from var(--accent) r g b / 0.8)"},onMouseLeave:l=>{l.currentTarget.style.color="var(--accent)"},children:d})]})),Dn=$e(({icon:e})=>e?P("div",{className:"dndev-inline-flex dndev-flex-shrink-0 dndev-items-center dndev-justify-center",style:{width:"var(--touch-target)",height:"var(--touch-target)",borderRadius:"var(--radius-lg)",background:"linear-gradient(to bottom right, rgb(from var(--primary) r g b / 0.1), rgb(from var(--primary) r g b / 0.2))",color:"var(--primary)",transition:"background var(--duration-normal)"},onMouseEnter:t=>{t.currentTarget.style.background="linear-gradient(to bottom right, rgb(from var(--primary) r g b / 0.2), rgb(from var(--primary) r g b / 0.3))"},onMouseLeave:t=>{t.currentTarget.style.background="linear-gradient(to bottom right, rgb(from var(--primary) r g b / 0.1), rgb(from var(--primary) r g b / 0.2))"},children:P(An,{icon:e,ariaHidden:!0})}):null),_t=$e(function({className:t,startX:r,startY:o,endX:n,endY:i,index:d,isMobile:l=!1}){let u,c,m,s,g;if(l){let{curveOffset:y}=se.mobile,b=(o+i)/2,f=r+y;c=Math.abs(f-r)+40,m=Math.abs(i-o)+40,s=Math.min(r,f)-20,g=Math.min(o,i)-20;let v=r-s,C=o-g,k=n-s,N=i-g,X=f-s,F=b-g;u=`M ${v} ${C} Q ${X} ${F} ${k} ${N}`}else{let y=(r+n)/2,b=o+(i-o)*.3;c=Math.abs(n-r)+40,m=Math.abs(i-o)+40,s=Math.min(r,n)-20,g=Math.min(o,i)-20;let f=r-s,v=o-g,C=n-s,k=i-g,N=y-s,X=b-g;u=`M ${f} ${v} Q ${N} ${X-20} ${C} ${k}`}return ue("svg",{className:at(t),style:{left:s,top:g,width:c,height:m,zIndex:1},viewBox:`0 0 ${c} ${m}`,role:"img",focusable:"false",children:[P("path",{d:u,fill:"none",stroke:"currentColor",strokeWidth:"3",strokeDasharray:"8,8",className:"text-accent waterfall-connector",style:{animationDelay:`${d*.2}s`}}),P("circle",{cx:r-s,cy:o-g,r:"6",fill:"currentColor",className:"text-accent"}),P("circle",{cx:n-s,cy:i-g,r:"6",fill:"currentColor",className:"text-accent"})]})}),Ln=e=>{let{cardWidth:t,cardGap:r,drop:o,startX:n}=se.desktop;return{x:n+e*(t+r),y:e*o}},$n=e=>{let{cardHeight:t,verticalGap:r}=se.mobile;return{x:0,y:e*(t+r)}},Hn=e=>{let{cardWidth:t,cardGap:r,drop:o}=se.desktop;return e===0?{startX:t,startY:o/2,endX:t+r+t/2,endY:o}:e===1?{startX:2*t+r,startY:1.5*o,endX:2.5*t+2*r,endY:2*o}:null},Gn=e=>{let{cardWidth:t,cardHeight:r,verticalGap:o}=se.mobile;return e===0?{startX:t,startY:.66*r,endX:t,endY:1.33*r+o}:e===1?{startX:t,startY:1.66*r+o,endX:t,endY:2.33*r+2*o}:null},On=e=>{let{cardHeight:t,verticalGap:r}=se.mobile;return(e-1)*(t+r)+t+40},Xn=$e(({items:e,className:t,connectorClassName:r,density:o="comfortable",ariaLabel:n,direction:i="horizontal"})=>{if(!e?.length)return null;if(i==="descending"){let{desktop:l,mobile:u}=se;return ue("section",{className:at("dndev-w-full dndev-overflow-hidden",t),children:[ue("div",{className:"dndev-hidden dndev-relative ",style:{width:`${l.containerWidth}px`,height:`${l.containerHeight}px`},children:[P("ol",{className:"dndev-relative","aria-label":n??"Process steps",children:e.map((c,m)=>{let{x:s,y:g}=Ln(m);return P("li",{className:"list-none dndev-absolute waterfall-card",style:{left:`${s}px`,top:`${g}px`,width:`${l.cardWidth}px`},children:P(Yt,{density:o,onClick:c.onClick,icon:c.icon,title:c.title,subtitle:c.subtitle,description:c.description})},`cascade-${m}-${c.title}`)})}),e.map((c,m)=>{if(m>=e.length-1)return null;let s=Hn(m);return s?P(_t,{startX:s.startX,startY:s.startY,endX:s.endX,endY:s.endY,className:r,index:m,isMobile:!1},`desktop-connector-${m}`):null})]}),P("div",{className:" dndev-w-full px-[var(--content-padding)]",children:ue("div",{className:"dndev-relative dndev-mx-auto",style:{width:`${u.containerWidth}px`,height:`${On(e.length)}px`},children:[P("ol",{className:"dndev-relative","aria-label":n??"Process steps",children:e.map((c,m)=>{let{x:s,y:g}=$n(m);return P("li",{className:"list-none dndev-absolute",style:{left:`${s}px`,top:`${g}px`,width:`${u.cardWidth}px`},children:P(Yt,{density:o,onClick:c.onClick,icon:c.icon,title:c.title,subtitle:c.subtitle,description:c.description})},`mobile-${m}-${c.title}`)})}),e.map((c,m)=>{if(m>=e.length-1)return null;let s=Gn(m);return s?P(_t,{startX:s.startX,startY:s.startY,endX:s.endX,endY:s.endY,className:r,index:m,isMobile:!0},`mobile-connector-${m}`):null})]})})]})}return null}),qn=Xn});qe();import{useState as gr,useMemo as fr,lazy as hr,Suspense as br}from"react";import{cn as yr}from"@donotdev/components";import{jsx as ee,jsxs as mt}from"react/jsx-runtime";var wr=hr(()=>Promise.resolve().then(()=>(ct(),lt))),Cr=({content:e,intro:t,title:r,duration:o=26,contentHeight:n="150vh",tiltAngle:i,className:d,style:l,"aria-label":u})=>{let[c,m]=gr(!0),s=fr(()=>t==null?null:typeof t=="string"?ee("div",{className:"dndev-crawl-intro-text",children:me(t,{allowedTags:["u","br","i","em","strong","b"]})}):t,[t]),g=()=>{m(!1)};return mt("div",{className:yr("dndev-crawl-container","dndev-relative dndev-overflow-hidden",d),style:{...l,height:"calc(100dvh - var(--header-height))"},"aria-label":u||"Animated text crawl",role:"region","aria-live":"polite",children:[c&&mt("div",{className:"dndev-absolute dndev-inset-0 dndev-flex dndev-flex-col dndev-items-center dndev-justify-center",style:{zIndex:30,backgroundColor:"rgba(0, 0, 0, 0.6)",backdropFilter:"blur(4px)"},children:[s&&ee("div",{className:"dndev-w-full",style:{paddingInline:"var(--content-padding)",marginBottom:"3rem"},children:ee("div",{className:"dndev-crawl-intro-content",children:s})}),ee("button",{onClick:g,style:{width:"96px",height:"96px",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(255, 255, 255, 0.2)",border:"4px solid rgba(255, 255, 255, 0.4)",backdropFilter:"blur(4px)",cursor:"pointer",transition:"all var(--dur-normal) var(--ease-in-out)"},onMouseEnter:y=>{y.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.3)",y.currentTarget.style.borderColor="rgba(255, 255, 255, 0.6)",y.currentTarget.style.transform="scale(1.1)"},onMouseLeave:y=>{y.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.2)",y.currentTarget.style.borderColor="rgba(255, 255, 255, 0.4)",y.currentTarget.style.transform="scale(1)"},"aria-label":"Start animated introduction",children:ee("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"white",style:{marginInlineStart:"4px"},children:ee("path",{d:"M8 5v14l11-7z"})})})]}),!c&&ee(br,{fallback:null,children:ee(wr,{title:r,content:e,duration:o,contentHeight:n,tiltAngle:i})})]})},pt=Cr;import{Suspense as Dr,lazy as Lr}from"react";import{cn as xr,GAP_VARIANT as kr,Stack as Sr}from"@donotdev/components";import{jsx as Ve}from"react/jsx-runtime";function Nr({className:e,itemCount:t=8,itemWidth:r,gap:o=kr.MEDIUM,direction:n="horizontal"}){let i=n==="vertical";return Ve("div",{className:xr("dndev-relative dndev-overflow-hidden",e),role:"status","aria-label":"Loading content",children:Ve(Sr,{direction:i?"column":"row",align:i?void 0:"center",gap:o,children:Array.from({length:t*2}).map((d,l)=>Ve("div",{className:"dndev-flex-shrink-0 dndev-animate-pulse",style:i?{height:"4rem",width:"100%",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}:{height:"4rem",width:r||"4rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}},l))})})}var ut=Nr;import{GAP_VARIANT as Hr}from"@donotdev/components";import{jsx as Ye}from"react/jsx-runtime";var $r=Lr(()=>Promise.resolve().then(()=>(ht(),ft))),Gr=e=>{let{gap:t=Hr.MEDIUM,direction:r="auto",...o}=e;return Ye(Dr,{fallback:Ye(ut,{itemCount:8,gap:t,direction:r==="up"||r==="down"?"vertical":"horizontal"}),children:Ye($r,{...o})})},bt=Gr;import{Eye as Or}from"lucide-react";import{useState as Xr}from"react";import{PortalButton as qr,cn as yt,Sheet as Wr,Code as Br,Stack as Vr}from"@donotdev/components";import{Fragment as Yr,jsx as Me,jsxs as _r}from"react/jsx-runtime";function Fr({data:e,sourceCode:t,language:r="tsx",title:o="Page Source",className:n}){let[i,d]=Xr(!1),l=t||e||"",u=c=>{};return _r(Yr,{children:[Me(qr,{icon:Or,onClick:()=>d(!0),className:yt("dndev-z-overlay",n),style:{position:"fixed",zIndex:"var(--z-overlay)",right:"var(--gap-sm)",bottom:"calc(var(--footer-height, 0px) + var(--gap-sm))"},tooltip:"Code Inspector","aria-label":"Code Inspector"}),Me(Wr,{open:i,onOpenChange:d,side:"bottom",className:yt("dndev-w-full",n),style:{width:"100%",height:"90%",maxHeight:"90dvh",borderRadius:"var(--radius-xl) var(--radius-xl) 0 0",display:"flex",flexDirection:"column",overflow:"hidden"},children:Me(Vr,{gap:"none",style:{flex:"1 1 auto",minHeight:0,overflow:"hidden"},children:Me(Br,{language:r,showCopyButton:!0,onCopy:u,children:l})})})]})}var wt=Fr;import{useEffect as Ur,useRef as Kr,useState as Qr}from"react";import{cn as _e,Button as Jr,Separator as jr,SEPARATOR_VARIANT as Zr,Text as ea,useIntersectionObserver as ta,getVariantDataAttrs as ra,surfaceVariants as aa,renderCardHeader as na,renderCardContent as oa}from"@donotdev/components";import{useBreakpoint as ia}from"@donotdev/core";import{jsx as V,jsxs as Pe}from"react/jsx-runtime";var Ct={intersectionThreshold:.5,intersectionRootMargin:"0px 0px -20% 0px"},sa=({items:e,className:t,ariaLabel:r,variant:o,style:n,threshold:i=Ct.intersectionThreshold})=>{let[d,l]=Qr(0),u=Kr(null),c=ia("isLaptopOrDesktop"),s=e.some(b=>b.customHeight)?Math.max(...e.map(b=>b.customHeight?Array.isArray(b.customHeight)?c?b.customHeight[1]:b.customHeight[0]:b.customHeight:0).filter(b=>b>0)):null,g={small:1,medium:2,large:3},y=e.reduce((b,f)=>{let v=f.estimatedHeight||"medium",C=g[v]||2,k=g[b]||2;return C>k?v:b},"medium");return V("div",{className:_e("dndev-relative dndev-stacked-cards-container",t),ref:u,"aria-label":r,style:{"--e":d.toString()},children:e.map((b,f)=>V(da,{item:b,index:f,entered:d,onEnter:()=>l(f),totalItems:e.length,cardProps:{variant:o,style:n},maxEstimatedHeight:y,maxCustomHeight:s,threshold:i},f))})},da=({item:e,index:t,entered:r,onEnter:o,totalItems:n,cardProps:i,maxEstimatedHeight:d,maxCustomHeight:l,threshold:u})=>{let{ref:c,isIntersecting:m}=ta({threshold:u,rootMargin:Ct.intersectionRootMargin});Ur(()=>{typeof window<"u"&&m&&o()},[m,o]);let s=na(e.icon,e.title,e.subtitle),g=oa(e.content),y=!!g;return V("section",{ref:c,className:"dndev-relative",style:{zIndex:n-t-1},children:V("div",{className:_e("dndev-relative dndev-overflow-hidden stack","dndev-min-w-0"),"data-size":l?void 0:d,"data-stacked":t>r?"true":"false",style:{"--i":t.toString(),...l&&{"--dynamic-height":`${l}px`},...i.style},children:Pe("div",{className:_e("dndev-card",aa({variant:i.variant}),"dndev-relative dndev-overflow-hidden dndev-h-full"),...ra({variant:i.variant}),"data-role":"card","data-clickable":e.onClick?"true":void 0,onClick:e.onClick,style:i.style,children:[Pe("div",{className:"stack-content",children:[Pe("div",{className:"dndev-stacked-cards-body",children:[Pe("div",{className:"dndev-stacked-cards-left",children:[s,e.description&&V(ea,{as:"p",level:"small",variant:"muted",children:e.description})]}),V(jr,{orientation:"vertical",variant:Zr.ACCENT,className:"dndev-stacked-cards-separator"}),y&&V("div",{className:"dndev-stacked-cards-right",children:g})]}),e.cta&&V("div",{className:"dndev-stacked-cards-cta",children:V(Jr,{onClick:e.onClick,variant:e.cta.variant||"primary",icon:e.cta.icon,children:e.cta.text})}),V("div",{className:"dndev-stacked-cards-spacer"})]}),V("div",{className:"dndev-stacked-cards-number",children:e.number?String(e.number):String(t+1).padStart(2,"0")})]})})})},xt=sa;import{jsx as ca}from"react/jsx-runtime";var la=function(t){return ca(xt,{...t})},kt=la;import{useCallback as ma}from"react";import{cn as pa,useViewportVisibility as ua}from"@donotdev/components";import{jsx as St}from"react/jsx-runtime";var va=({items:e=[],direction:t="fade-in",stagger:r=100,threshold:o,distance:n,duration:i,once:d=!1,viewport:l=!0,overrides:u=[],className:c,children:m})=>{let{ref:s,isVisible:g,hasTriggered:y,visibleItems:b,isItemVisible:f}=ua({threshold:o,once:d,trackItems:l,enableScrollListener:l}),v=ma(k=>{let N=u.find(X=>X.index===k);if(N)return N.direction;switch(t){case"alternate-h":return k%2===0?"left":"right";case"alternate-v":return k%2===0?"top":"bottom";default:return t}},[t,u]),C=()=>e.map((k,N)=>{let X=v(N),F=N*r,te=l?f(N):g;return St("div",{className:"dndev-reveal-item","data-direction":X,"data-visible":te,style:{"--reveal-delay":`${F}ms`,"--reveal-index":N,...n!==void 0&&{"--reveal-distance":`${n}vw`},...i!==void 0&&{"--reveal-duration":`${i}ms`}},children:k},N)});return St("div",{ref:s,className:pa("dndev-reveal-container",g&&"dndev-reveal-visible",c),"data-direction":t,"data-stagger":r,children:e.length>0?C():m})},ye=va;import{useState as ga,useEffect as fa}from"react";import{cn as Nt,Card as Tt,renderCardContent as Rt,useIntersectionObserver as ha}from"@donotdev/components";import{useBreakpoint as ba}from"@donotdev/core";import{jsx as M,jsxs as ae}from"react/jsx-runtime";var ya=function({steps:t,className:r,variant:o}){let[n,i]=ga(0),d=ba("isLaptopOrDesktop"),l=t.length>1?n/(t.length-1)*100:0;return d?M("div",{className:Nt("dndev-roadmap",r),children:ae("div",{className:"dndev-roadmap-desktop",style:{"--step-count":t.length},children:[ae("div",{className:"dndev-roadmap-timeline",children:[M("div",{className:"dndev-roadmap-timeline-bg"}),M("div",{className:"dndev-roadmap-timeline-progress",style:{width:`${l}%`}})]}),M("div",{className:"dndev-roadmap-grid",style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((u,c)=>{let m=u.icon,s=c<=n,g=c===n;return ae("div",{className:"dndev-roadmap-step",onMouseEnter:()=>i(c),children:[M("div",{className:"dndev-roadmap-node","data-active":s,children:M(m,{})}),ae(Tt,{title:u.title,subtitle:u.subtitle,variant:o,className:"dndev-roadmap-card","data-active":g,footer:u.content?M("div",{className:"dndev-roadmap-content",children:Rt(u.content)}):void 0,children:[M("span",{className:"dndev-roadmap-phase",children:u.phase}),u.description&&M("p",{className:"dndev-roadmap-description",children:u.description})]})]},c)})})]})}):M("div",{className:Nt("dndev-roadmap",r),children:ae("div",{className:"dndev-roadmap-mobile",children:[M("div",{className:"dndev-roadmap-timeline-vertical",children:M("div",{className:"dndev-roadmap-timeline-vertical-progress",style:{height:`${l}%`}})}),t.map((u,c)=>M(wa,{step:u,index:c,isActive:c<=n,variant:o,onEnter:()=>i(c)},c))]})})},wa=({step:e,index:t,isActive:r,variant:o,onEnter:n})=>{let{ref:i,isIntersecting:d}=ha({threshold:.5,rootMargin:"0px 0px -20% 0px"});fa(()=>{typeof window<"u"&&d&&n()},[d,n]);let l=e.icon;return ae("div",{ref:i,className:"dndev-roadmap-step-mobile",children:[M("div",{className:"dndev-roadmap-node-mobile","data-active":r,children:M(l,{})}),ae(Tt,{title:e.title,subtitle:e.subtitle,variant:o,className:"dndev-roadmap-card-mobile","data-active":r,footer:e.content?M("div",{className:"dndev-roadmap-content",children:Rt(e.content)}):void 0,children:[M("span",{className:"dndev-roadmap-phase",children:e.phase}),e.description&&M("p",{className:"dndev-roadmap-description",children:e.description})]})]})},Mt=ya;import{jsx as xa}from"react/jsx-runtime";var Ca=function(t){return xa(Mt,{...t})},Pt=Ca;import{jsx as Ue,jsxs as Sa}from"react/jsx-runtime";function ka({status:e,animationClass:t}){return Ue("svg",{width:"100%",height:"100%",viewBox:"0 0 512 512",className:"drop--lg",preserveAspectRatio:"xMidYMid meet",children:Sa("g",{transform:"translate(0,512) scale(0.1,-0.1)",children:[Ue("path",{d:`M2465 4956 c-60 -28 -97 -66 -124 -126 -20 -44 -21 -63 -21 -630 0
2
2
  -358 -4 -602 -11 -629 -21 -91 -84 -136 -207 -147 l-69 -7 -6 117 c-43 737
3
3
  -303 1125 -722 1075 -168 -21 -359 -165 -522 -394 -459 -646 -810 -1966 -779
4
4
  -2930 20 -639 129 -1031 311 -1121 50 -24 63 -26 126 -21 94 8 164 42 314 151
@@ -10,7 +10,7 @@
10
10
  76 -3 126 21 182 90 291 482 311 1121 26 809 -217 1888 -584 2599 -104 200
11
11
  -174 311 -271 428 -230 277 -488 368 -725 255 -258 -123 -411 -480 -443 -1033
12
12
  l-6 -117 -69 7 c-123 11 -186 56 -207 147 -7 27 -11 270 -11 629 l0 585 -24
13
- 50 c-59 125 -193 177 -311 121z`,fill:"none",stroke:"currentColor",strokeWidth:"80",className:"/20"}),_e("path",{d:`M2465 4956 c-60 -28 -97 -66 -124 -126 -20 -44 -21 -63 -21 -630 0
13
+ 50 c-59 125 -193 177 -311 121z`,fill:"none",stroke:"currentColor",strokeWidth:"80",className:"/20"}),Ue("path",{d:`M2465 4956 c-60 -28 -97 -66 -124 -126 -20 -44 -21 -63 -21 -630 0
14
14
  -358 -4 -602 -11 -629 -21 -91 -84 -136 -207 -147 l-69 -7 -6 117 c-43 737
15
15
  -303 1125 -722 1075 -168 -21 -359 -165 -522 -394 -459 -646 -810 -1966 -779
16
16
  -2930 20 -639 129 -1031 311 -1121 50 -24 63 -26 126 -21 94 8 164 42 314 151
@@ -22,4 +22,4 @@ l-6 -117 -69 7 c-123 11 -186 56 -207 147 -7 27 -11 270 -11 629 l0 585 -24
22
22
  76 -3 126 21 182 90 291 482 311 1121 26 809 -217 1888 -584 2599 -104 200
23
23
  -174 311 -271 428 -230 277 -488 368 -725 255 -258 -123 -411 -480 -443 -1033
24
24
  l-6 -117 -69 7 c-123 11 -186 56 -207 147 -7 27 -11 270 -11 629 l0 585 -24
25
- 50 c-59 125 -193 177 -311 121z`,fill:"currentColor",className:`${t||"breath-lung-442"} ${e==="complete"?"text-success":e==="active"?"text-primary active":e==="paused"?"text-primary active paused":"text-primary/40"}`})]})})}import{RotateCw as ca}from"lucide-react";import{Button as St,BUTTON_VARIANT as ma,Stack as Ee}from"@donotdev/components";import{jsx as re,jsxs as Pe}from"react/jsx-runtime";function ua({status:e,animation:t,instructions:r,debug:i=!1,onSkip:n,statusValue:o,onRestart:l,isPaused:d=!1,isComplete:v=!1}){return Pe(Ee,{direction:"column",align:"center",justify:"center",gap:"large",style:{width:"100%",height:"100%"},className:"dndev-relative",children:[i&&Pe(Ee,{gap:"tight",className:"dndev-absolute",style:{top:"var(--gap-md)",insetInlineEnd:"var(--gap-md)",zIndex:20},children:[re("div",{style:{fontSize:"var(--font-size-sm)",backgroundColor:"rgb(234 179 8)",color:"rgb(113 63 18)",borderRadius:"var(--radius)",padding:"var(--gap-sm) var(--gap-md)"},children:"\u{1F41B} Debug Mode"}),o&&Pe("div",{style:{fontSize:"var(--font-size-sm)",backgroundColor:"rgb(59 130 246)",color:"rgb(30 58 138)",borderRadius:"var(--radius)",padding:"var(--gap-sm) var(--gap-md)"},children:["Status: ",o]}),n&&re(St,{variant:ma.DESTRUCTIVE,onClick:n,children:"Skip \u2192"})]}),e&&re(Ee,{direction:"column",gap:"tight",align:"center",children:e}),Pe("div",{className:"dndev-relative dndev-flex dndev-items-center dndev-justify-center dndev-flex-shrink-0",style:{width:"min(400px, 35vh)",height:"min(400px, 35vh)",aspectRatio:"1 / 1"},children:[t,d&&re("div",{className:"dndev-absolute dndev-inset-0 dndev-flex dndev-items-center dndev-justify-center dndev-z-breadcrumbs",style:{backgroundColor:"rgb(from var(--background) r g b / 0.5)",backdropFilter:"blur(8px)",borderRadius:"var(--radius-lg)"},children:re("span",{style:{fontSize:"3.75rem"},children:"\u23F8\uFE0F"})}),v&&l&&re(St,{floating:!0,icon:ca,onClick:l,"aria-label":"Do another cycle"})]}),re(Ee,{gap:"tight",align:"center",style:{textAlign:"center",maxWidth:"28rem"},children:r})]})}import{Suspense as Ma,lazy as Ea}from"react";import{cn as pa,Stack as Nt}from"@donotdev/components";import{Fragment as va,jsx as K,jsxs as Tt}from"react/jsx-runtime";function ga({className:e,itemCount:t=1,showArrows:r=!0,showDots:i=!1,showProgress:n=!1}){return Tt("div",{className:pa("dndev-relative dndev-overflow-hidden",e),role:"status","aria-label":"Loading carousel",children:[K("div",{className:"dndev-overflow-hidden",children:K(Nt,{direction:"row",children:Array.from({length:t}).map((o,l)=>K("div",{className:"dndev-w-full dndev-flex-shrink-0",children:K("div",{className:"dndev-animate-pulse",style:{height:"16rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}})},l))})}),r&&Tt(va,{children:[K("div",{className:"dndev-absolute dndev-z-breadcrumbs dndev-animate-pulse",style:{left:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)"}}),K("div",{className:"dndev-absolute dndev-z-breadcrumbs dndev-animate-pulse",style:{right:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)"}})]}),i&&K(Nt,{direction:"row",gap:"tight",className:"dndev-absolute dndev-z-breadcrumbs",style:{bottom:"1rem",left:"50%",transform:"translateX(-50%)"},children:Array.from({length:t}).map((o,l)=>K("div",{className:"dndev-animate-pulse",style:{width:"0.5rem",height:"0.5rem",backgroundColor:"var(--muted)",borderRadius:"9999px"}},l))}),n&&K("div",{className:"dndev-absolute dndev-left-0 dndev-animate-pulse",style:{bottom:0,right:0,height:"0.25rem",backgroundColor:"var(--muted)"}})]})}var Rt=ga;import{jsx as Ze}from"react/jsx-runtime";var Pa=Ea(()=>Promise.resolve().then(()=>(Pt(),Et))),za=e=>{let{showArrows:t=!0,showDots:r=!0,showProgress:i=!1}=e;return Ze(Ma,{fallback:Ze(Rt,{showArrows:t,showDots:r,showProgress:i}),children:Ze(Pa,{...e})})},Aa=za;import{lazy as Xa,Suspense as qa}from"react";import{Card as Wa,Grid as Oa}from"@donotdev/components";import{jsx as Ae}from"react/jsx-runtime";var Ba=Xa(()=>Promise.resolve().then(()=>(It(),At)));function Va({title:e,items:t,gridCols:r=2,className:i,ariaLabel:n}){return Ae(qa,{fallback:Ae(Oa,{gap:"medium",cols:2,children:t.map((o,l)=>Ae(Wa,{title:"Loading..."},l))}),children:Ae(Ba,{title:e,items:t,gridCols:r,className:i,ariaLabel:n})})}var Fa=Va;import{Card as Ya,Text as _a,Stack as Ua}from"@donotdev/components";import{jsx as et,jsxs as Ja}from"react/jsx-runtime";var Ka=({text:e,icon:t="\u{1F389}",className:r})=>et(Ya,{className:r,style:{textAlign:"center"},children:Ja(Ua,{gap:"tight",style:{padding:"var(--gap-md)"},children:[t&&et("div",{style:{fontSize:"var(--font-size-2xl)"},children:t}),et(_a,{variant:"muted",children:e})]})}),Qa=Ka;import{CheckCircle as Ie}from"lucide-react";import{Dialog as Za,Card as De,Badge as ja,BADGE_VARIANT as en,Stack as X,Grid as tn}from"@donotdev/components";import{jsx as b,jsxs as L}from"react/jsx-runtime";function rn({open:e,onOpenChange:t,guide:r,icon:i}){let n=i;return b(Za,{open:e,onOpenChange:t,title:L(X,{direction:"row",align:"center",gap:"medium",children:[n&&b(n,{className:"dndev-size-touch",style:{color:"var(--primary)"}}),b("div",{style:{fontSize:"var(--font-size-3xl)",fontWeight:700},children:r.title})]}),description:b("div",{style:{fontSize:"var(--font-size-lg)"},children:r.subtitle}),style:{maxWidth:"56rem",maxHeight:"90dvh",overflowY:"auto"},children:L(X,{gap:"large",children:[r.quickStart&&L(De,{title:L(X,{direction:"row",align:"center",gap:"medium",children:[b(Ie,{className:"dndev-size-md",style:{color:"var(--secondary)"}}),r.quickStart.title]}),children:[b("div",{className:"dndev-surface",style:{backgroundColor:"var(--muted)",padding:"var(--gap-md)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)"},children:b("code",{style:{color:"var(--muted-foreground)",fontSize:"var(--font-size-sm)",fontFamily:"monospace"},children:r.quickStart.code})}),b("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)",marginTop:"var(--gap-sm)"},children:r.quickStart.description})]}),r.steps&&L(X,{gap:"medium",children:[b("h3",{style:{fontSize:"var(--font-size-xl)",fontWeight:600},children:"Step by Step Process"}),b(X,{gap:"medium",children:r.steps.map((o,l)=>{let d=o.icon;return b("div",{className:"dndev-relative",children:L(De,{style:{overflow:"visible"},children:[b("div",{className:"dndev-absolute",style:{top:"-0.75rem",left:"-0.75rem",zIndex:20},children:b("div",{className:"dndev-flex dndev-items-center dndev-justify-center",style:{backgroundColor:"var(--primary)",color:"var(--primary-foreground)",borderRadius:"9999px",fontSize:"var(--font-size-sm)",fontWeight:700,boxShadow:"var(--shadow-xl)",border:"2px solid var(--background)",width:"2rem",height:"2rem"},children:l+1})}),L("div",{children:[L(X,{direction:"row",align:"center",gap:"medium",style:{paddingTop:"var(--gap-lg)",marginBottom:"var(--gap-md)"},children:[b(d,{className:"dndev-size-md",style:{color:"var(--primary)"}}),b("div",{style:{fontSize:"var(--font-size-lg)",fontWeight:600},children:o.title})]}),L(X,{gap:"large",children:[b("p",{style:{color:"var(--muted-foreground)"},children:o.description}),o.code&&b("div",{className:"dndev-surface",style:{backgroundColor:"var(--muted)",padding:"var(--gap-md)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)"},children:b("code",{style:{color:"var(--muted-foreground)",fontSize:"var(--font-size-sm)",fontFamily:"monospace"},children:o.code})}),o.details&&b("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)"},children:o.details})]})]})]})},l)})})]}),r.features&&b(De,{title:L(X,{direction:"row",align:"center",gap:"medium",children:[b(Ie,{className:"dndev-size-md",style:{color:"var(--secondary)"}}),"What You Get Out of the Box"]}),children:b(X,{gap:"medium",children:r.features.map((o,l)=>L(X,{direction:"row",align:"center",gap:"medium",style:{fontSize:"var(--font-size-sm)"},children:[b(Ie,{className:"dndev-size-sm",style:{color:"var(--secondary)",flexShrink:0}}),b("span",{style:{color:"var(--muted-foreground)"},children:o})]},l))})}),r.templates&&b(De,{title:L(X,{direction:"row",align:"center",gap:"medium",children:[b(Ie,{className:"dndev-size-md",style:{color:"var(--accent)"}}),"Available Templates"]}),children:b(tn,{cols:3,gap:"medium",children:r.templates.map((o,l)=>L(X,{gap:"tight",children:[b(ja,{variant:en.OUTLINE,className:"dndev-justify-center",style:{width:"100%"},children:o.name}),b("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)"},children:o.description})]},l))})})]})})}import{Card as an,Text as Dt,GAP_VARIANT as nn,Grid as Lt}from"@donotdev/components";import{jsx as ce,jsxs as $t}from"react/jsx-runtime";var on=({left:e,right:t,leftDirection:r="left",rightDirection:i="right",threshold:n,stagger:o=200,distance:l,duration:d,gap:v=nn.LARGE,className:u,align:c="start",useStatCards:s=!1})=>{let p=()=>s&&Array.isArray(t)?ce(Lt,{cols:2,gap:"medium",children:t.map((x,y)=>ce(an,{children:$t("div",{style:{padding:"var(--gap-lg)"},children:[ce(Dt,{level:"h3",children:x.title}),ce(Dt,{as:"p",variant:"muted",children:x.description})]})},y))}):t,h={none:"dndev-gap-none",tight:"dndev-gap-sm",medium:"dndev-gap-md",large:"dndev-gap-lg"}[v];return $t(Lt,{cols:2,gap:v,align:c,className:u,children:[ce(ye,{direction:r,threshold:n,stagger:o,distance:l,duration:d,items:[e]}),ce(ye,{direction:i,threshold:n,stagger:o,distance:l,duration:d,items:[p()]})]})},sn=on;import{Button as ln,Input as dn,cn as tt,Stack as cn}from"@donotdev/components";import{jsx as Ht,jsxs as pn}from"react/jsx-runtime";function mn({input:e,button:t,className:r}){return pn(cn,{align:"center",justify:"center",gap:"medium",className:tt("dndev-w-full",r),children:[Ht(dn,{value:e.value,onChange:i=>e.onChange(i.target.value),placeholder:e.placeholder,maxLength:e.maxLength,className:tt("dndev-w-full",e.className),style:{textAlign:"center"},"aria-label":e.label||"Input",autoComplete:"off",spellCheck:!1}),Ht(ln,{variant:t.variant||"primary",onClick:t.onClick,icon:t.icon,className:tt("dndev-w-full",t.className),style:{paddingInline:"2rem"},children:t.label})]})}var un=mn;import{Suspense as Rn,lazy as Mn}from"react";import{Fragment as gn}from"react";import{cn as Gt,Stack as ne}from"@donotdev/components";import{jsx as T,jsxs as Q}from"react/jsx-runtime";function vn({stepCount:e=3,className:t,direction:r="horizontal"}){let i=Array.from({length:e},(n,o)=>o);return r==="vertical"?T("section",{className:Gt("dndev-w-full dndev-overflow-hidden",t),children:T("div",{className:"dndev-relative dndev-mx-auto",style:{maxWidth:"72rem",padding:"0 var(--content-padding)"},children:T("div",{className:"dndev-grid dndev-md:grid-cols-2 dndev-lg:grid-cols-3",style:{gap:"var(--gap-lg)"},children:i.map(n=>T("div",{style:{transform:n%3===1?"translateY(3rem)":n%3===2?"translateY(6rem)":void 0},children:Q("div",{style:{backgroundColor:"var(--background)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)",boxShadow:"var(--shadow-sm)",padding:"var(--gap-md)"},children:[Q(ne,{direction:"row",align:"start",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[T("div",{className:"dndev-animate-pulse",style:{width:"3rem",height:"3rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}}),Q(ne,{gap:"tight",flex:"1",className:"dndev-min-w-0",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1.5rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"75%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}})]})]}),Q(ne,{gap:"tight",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"66%"}})]})]})},n))})})}):T("section",{className:Gt("dndev-w-full",t),children:T("div",{className:"dndev-mx-auto dndev-flex dndev-flex-col dndev-md:flex-row dndev-md:items-center dndev-gap-md",style:{maxWidth:"80rem"},children:i.map(n=>{let o=n===e-1;return Q(gn,{children:[T("div",{className:"dndev-flex-1",children:Q("div",{className:"dndev-h-full",style:{backgroundColor:"var(--background)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)",boxShadow:"var(--shadow-sm)",padding:"var(--gap-md)"},children:[Q(ne,{direction:"row",align:"start",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[T("div",{className:"dndev-animate-pulse",style:{width:"3rem",height:"3rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}}),Q(ne,{gap:"tight",flex:"1",className:"dndev-min-w-0",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1.25rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"75%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}})]})]}),Q(ne,{gap:"tight",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"66%"}})]})]})}),!o&&T(ne,{justify:"center",style:{paddingTop:"var(--gap-md)",paddingBottom:"var(--gap-md)"},children:T("div",{className:"dndev-animate-pulse",style:{width:"2rem",height:"1px",backgroundColor:"var(--muted)"}})})]},n)})})})}var Xt=vn;import{jsx as at}from"react/jsx-runtime";var En=Mn(()=>Promise.resolve().then(()=>(Bt(),Ot)));function Pn(e){return at(Rn,{fallback:at(Xt,{stepCount:e.items?.length||3,direction:e.direction==="descending"?"vertical":"horizontal"}),children:at(En,{...e})})}var zn=Pn;export{ua as BreathingExerciseLayout,Aa as Carousel,Fa as ComparisonGrid,Qa as CongratulationsCard,mt as Crawl,rn as GuideModal,bt as InspectorGadget,la as LungsAnimation,ht as Marquee,ye as Reveal,sn as SplitReveal,xt as StackedCards,un as StartChallengeForm,zn as Waterfall};
25
+ 50 c-59 125 -193 177 -311 121z`,fill:"currentColor",className:`${t||"breath-lung-442"} ${e==="complete"?"text-success":e==="active"?"text-primary active":e==="paused"?"text-primary active paused":"text-primary/40"}`})]})})}import{RotateCw as Na}from"lucide-react";import{Button as Et,BUTTON_VARIANT as Ta,Stack as Ee}from"@donotdev/components";import{jsx as ne,jsxs as ze}from"react/jsx-runtime";function Ra({status:e,animation:t,instructions:r,debug:o=!1,onSkip:n,statusValue:i,onRestart:d,isPaused:l=!1,isComplete:u=!1}){return ze(Ee,{direction:"column",align:"center",justify:"center",gap:"large",style:{width:"100%",height:"100%"},className:"dndev-relative",children:[o&&ze(Ee,{gap:"tight",className:"dndev-absolute",style:{top:"var(--gap-md)",insetInlineEnd:"var(--gap-md)",zIndex:20},children:[ne("div",{style:{fontSize:"var(--font-size-sm)",backgroundColor:"rgb(234 179 8)",color:"rgb(113 63 18)",borderRadius:"var(--radius)",padding:"var(--gap-sm) var(--gap-md)"},children:"\u{1F41B} Debug Mode"}),i&&ze("div",{style:{fontSize:"var(--font-size-sm)",backgroundColor:"rgb(59 130 246)",color:"rgb(30 58 138)",borderRadius:"var(--radius)",padding:"var(--gap-sm) var(--gap-md)"},children:["Status: ",i]}),n&&ne(Et,{variant:Ta.DESTRUCTIVE,onClick:n,children:"Skip \u2192"})]}),e&&ne(Ee,{direction:"column",gap:"tight",align:"center",children:e}),ze("div",{className:"dndev-relative dndev-flex dndev-items-center dndev-justify-center dndev-flex-shrink-0",style:{width:"min(400px, 35vh)",height:"min(400px, 35vh)",aspectRatio:"1 / 1"},children:[t,l&&ne("div",{className:"dndev-absolute dndev-inset-0 dndev-flex dndev-items-center dndev-justify-center dndev-z-breadcrumbs",style:{backgroundColor:"rgb(from var(--background) r g b / 0.5)",backdropFilter:"blur(8px)",borderRadius:"var(--radius-lg)"},children:ne("span",{style:{fontSize:"3.75rem"},children:"\u23F8\uFE0F"})}),u&&d&&ne(Et,{floating:!0,icon:Na,onClick:d,"aria-label":"Do another cycle"})]}),ne(Ee,{gap:"tight",align:"center",style:{textAlign:"center",maxWidth:"28rem"},children:r})]})}import{Suspense as Ba,lazy as Va}from"react";import{cn as Ma,Stack as zt}from"@donotdev/components";import{Fragment as Ea,jsx as Q,jsxs as At}from"react/jsx-runtime";function Pa({className:e,itemCount:t=1,showArrows:r=!0,showDots:o=!1,showProgress:n=!1}){return At("div",{className:Ma("dndev-relative dndev-overflow-hidden",e),role:"status","aria-label":"Loading carousel",children:[Q("div",{className:"dndev-overflow-hidden",children:Q(zt,{direction:"row",children:Array.from({length:t}).map((i,d)=>Q("div",{className:"dndev-w-full dndev-flex-shrink-0",children:Q("div",{className:"dndev-animate-pulse",style:{height:"16rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}})},d))})}),r&&At(Ea,{children:[Q("div",{className:"dndev-absolute dndev-z-breadcrumbs dndev-animate-pulse",style:{left:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)"}}),Q("div",{className:"dndev-absolute dndev-z-breadcrumbs dndev-animate-pulse",style:{right:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)"}})]}),o&&Q(zt,{direction:"row",gap:"tight",className:"dndev-absolute dndev-z-breadcrumbs",style:{bottom:"1rem",left:"50%",transform:"translateX(-50%)"},children:Array.from({length:t}).map((i,d)=>Q("div",{className:"dndev-animate-pulse",style:{width:"0.5rem",height:"0.5rem",backgroundColor:"var(--muted)",borderRadius:"9999px"}},d))}),n&&Q("div",{className:"dndev-absolute dndev-left-0 dndev-animate-pulse",style:{bottom:0,right:0,height:"0.25rem",backgroundColor:"var(--muted)"}})]})}var It=Pa;import{jsx as Ze}from"react/jsx-runtime";var Fa=Va(()=>Promise.resolve().then(()=>($t(),Lt))),Ya=e=>{let{showArrows:t=!0,showDots:r=!0,showProgress:o=!1}=e;return Ze(Ba,{fallback:Ze(It,{showArrows:t,showDots:r,showProgress:o}),children:Ze(Fa,{...e})})},_a=Ya;import{lazy as en,Suspense as tn}from"react";import{Card as rn,Grid as an}from"@donotdev/components";import{jsx as Ie}from"react/jsx-runtime";var nn=en(()=>Promise.resolve().then(()=>(Ot(),Gt)));function on({title:e,items:t,gridCols:r=2,className:o,ariaLabel:n}){return Ie(tn,{fallback:Ie(an,{gap:"medium",cols:2,children:t.map((i,d)=>Ie(rn,{title:"Loading..."},d))}),children:Ie(nn,{title:e,items:t,gridCols:r,className:o,ariaLabel:n})})}var sn=on;import{Card as dn,Text as ln,Stack as cn}from"@donotdev/components";import{jsx as tt,jsxs as un}from"react/jsx-runtime";var mn=({text:e,icon:t="\u{1F389}",className:r})=>tt(dn,{className:r,style:{textAlign:"center"},children:un(cn,{gap:"tight",style:{padding:"var(--gap-md)"},children:[t&&tt("div",{style:{fontSize:"var(--font-size-2xl)"},children:t}),tt(ln,{variant:"muted",children:e})]})}),pn=mn;import{CheckCircle as De}from"lucide-react";import{Dialog as vn,Card as Le,Badge as gn,BADGE_VARIANT as fn,Stack as O,Grid as hn}from"@donotdev/components";import{jsx as w,jsxs as L}from"react/jsx-runtime";function bn({open:e,onOpenChange:t,guide:r,icon:o}){let n=o;return w(vn,{open:e,onOpenChange:t,title:L(O,{direction:"row",align:"center",gap:"medium",children:[n&&w(n,{className:"dndev-size-touch",style:{color:"var(--primary)"}}),w("div",{style:{fontSize:"var(--font-size-3xl)",fontWeight:700},children:r.title})]}),description:w("div",{style:{fontSize:"var(--font-size-lg)"},children:r.subtitle}),style:{maxWidth:"56rem",maxHeight:"90dvh",overflowY:"auto"},children:L(O,{gap:"large",children:[r.quickStart&&L(Le,{title:L(O,{direction:"row",align:"center",gap:"medium",children:[w(De,{className:"dndev-size-md",style:{color:"var(--secondary)"}}),r.quickStart.title]}),children:[w("div",{className:"dndev-surface",style:{backgroundColor:"var(--muted)",padding:"var(--gap-md)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)"},children:w("code",{style:{color:"var(--muted-foreground)",fontSize:"var(--font-size-sm)",fontFamily:"monospace"},children:r.quickStart.code})}),w("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)",marginTop:"var(--gap-sm)"},children:r.quickStart.description})]}),r.steps&&L(O,{gap:"medium",children:[w("h3",{style:{fontSize:"var(--font-size-xl)",fontWeight:600},children:"Step by Step Process"}),w(O,{gap:"medium",children:r.steps.map((i,d)=>{let l=i.icon;return w("div",{className:"dndev-relative",children:L(Le,{style:{overflow:"visible"},children:[w("div",{className:"dndev-absolute",style:{top:"-0.75rem",left:"-0.75rem",zIndex:20},children:w("div",{className:"dndev-flex dndev-items-center dndev-justify-center",style:{backgroundColor:"var(--primary)",color:"var(--primary-foreground)",borderRadius:"9999px",fontSize:"var(--font-size-sm)",fontWeight:700,boxShadow:"var(--shadow-xl)",border:"2px solid var(--background)",width:"2rem",height:"2rem"},children:d+1})}),L("div",{children:[L(O,{direction:"row",align:"center",gap:"medium",style:{paddingTop:"var(--gap-lg)",marginBottom:"var(--gap-md)"},children:[w(l,{className:"dndev-size-md",style:{color:"var(--primary)"}}),w("div",{style:{fontSize:"var(--font-size-lg)",fontWeight:600},children:i.title})]}),L(O,{gap:"large",children:[w("p",{style:{color:"var(--muted-foreground)"},children:i.description}),i.code&&w("div",{className:"dndev-surface",style:{backgroundColor:"var(--muted)",padding:"var(--gap-md)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)"},children:w("code",{style:{color:"var(--muted-foreground)",fontSize:"var(--font-size-sm)",fontFamily:"monospace"},children:i.code})}),i.details&&w("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)"},children:i.details})]})]})]})},d)})})]}),r.features&&w(Le,{title:L(O,{direction:"row",align:"center",gap:"medium",children:[w(De,{className:"dndev-size-md",style:{color:"var(--secondary)"}}),"What You Get Out of the Box"]}),children:w(O,{gap:"medium",children:r.features.map((i,d)=>L(O,{direction:"row",align:"center",gap:"medium",style:{fontSize:"var(--font-size-sm)"},children:[w(De,{className:"dndev-size-sm",style:{color:"var(--secondary)",flexShrink:0}}),w("span",{style:{color:"var(--muted-foreground)"},children:i})]},d))})}),r.templates&&w(Le,{title:L(O,{direction:"row",align:"center",gap:"medium",children:[w(De,{className:"dndev-size-md",style:{color:"var(--accent)"}}),"Available Templates"]}),children:w(hn,{cols:3,gap:"medium",children:r.templates.map((i,d)=>L(O,{gap:"tight",children:[w(gn,{variant:fn.OUTLINE,className:"dndev-justify-center",style:{width:"100%"},children:i.name}),w("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)"},children:i.description})]},d))})})]})})}import{Card as yn,Text as Xt,GAP_VARIANT as wn,Grid as qt}from"@donotdev/components";import{jsx as pe,jsxs as Wt}from"react/jsx-runtime";var Cn=({left:e,right:t,leftDirection:r="left",rightDirection:o="right",threshold:n,stagger:i=200,distance:d,duration:l,gap:u=wn.LARGE,className:c,align:m="start",useStatCards:s=!1})=>{let g=()=>s&&Array.isArray(t)?pe(qt,{cols:2,gap:"medium",children:t.map((b,f)=>pe(yn,{children:Wt("div",{style:{padding:"var(--gap-lg)"},children:[pe(Xt,{level:"h3",children:b.title}),pe(Xt,{as:"p",variant:"muted",children:b.description})]})},f))}):t,y={none:"dndev-gap-none",tight:"dndev-gap-sm",medium:"dndev-gap-md",large:"dndev-gap-lg"}[u];return Wt(qt,{cols:2,gap:u,align:m,className:c,children:[pe(ye,{direction:r,threshold:n,stagger:i,distance:d,duration:l,items:[e]}),pe(ye,{direction:o,threshold:n,stagger:i,distance:d,duration:l,items:[g()]})]})},xn=Cn;import{Button as kn,Input as Sn,cn as rt,Stack as Nn}from"@donotdev/components";import{jsx as Bt,jsxs as Mn}from"react/jsx-runtime";function Tn({input:e,button:t,className:r}){return Mn(Nn,{align:"center",justify:"center",gap:"medium",className:rt("dndev-w-full",r),children:[Bt(Sn,{value:e.value,onChange:o=>e.onChange(o.target.value),placeholder:e.placeholder,maxLength:e.maxLength,className:rt("dndev-w-full",e.className),style:{textAlign:"center"},"aria-label":e.label||"Input",autoComplete:"off",spellCheck:!1}),Bt(kn,{variant:t.variant||"primary",onClick:t.onClick,icon:t.icon,className:rt("dndev-w-full",t.className),style:{paddingInline:"2rem"},children:t.label})]})}var Rn=Tn;import{Suspense as Wn,lazy as Bn}from"react";import{Fragment as Pn}from"react";import{cn as Vt,Stack as ie}from"@donotdev/components";import{jsx as T,jsxs as J}from"react/jsx-runtime";function En({stepCount:e=3,className:t,direction:r="horizontal"}){let o=Array.from({length:e},(n,i)=>i);return r==="vertical"?T("section",{className:Vt("dndev-w-full dndev-overflow-hidden",t),children:T("div",{className:"dndev-relative dndev-mx-auto",style:{maxWidth:"72rem",padding:"0 var(--content-padding)"},children:T("div",{className:"dndev-grid dndev-md:grid-cols-2 dndev-lg:grid-cols-3",style:{gap:"var(--gap-lg)"},children:o.map(n=>T("div",{style:{transform:n%3===1?"translateY(3rem)":n%3===2?"translateY(6rem)":void 0},children:J("div",{style:{backgroundColor:"var(--background)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)",boxShadow:"var(--shadow-sm)",padding:"var(--gap-md)"},children:[J(ie,{direction:"row",align:"start",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[T("div",{className:"dndev-animate-pulse",style:{width:"3rem",height:"3rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}}),J(ie,{gap:"tight",flex:"1",className:"dndev-min-w-0",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1.5rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"75%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}})]})]}),J(ie,{gap:"tight",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"66%"}})]})]})},n))})})}):T("section",{className:Vt("dndev-w-full",t),children:T("div",{className:"dndev-mx-auto dndev-flex dndev-flex-col dndev-md:flex-row dndev-md:items-center dndev-gap-md",style:{maxWidth:"80rem"},children:o.map(n=>{let i=n===e-1;return J(Pn,{children:[T("div",{className:"dndev-flex-1",children:J("div",{className:"dndev-h-full",style:{backgroundColor:"var(--background)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)",boxShadow:"var(--shadow-sm)",padding:"var(--gap-md)"},children:[J(ie,{direction:"row",align:"start",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[T("div",{className:"dndev-animate-pulse",style:{width:"3rem",height:"3rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}}),J(ie,{gap:"tight",flex:"1",className:"dndev-min-w-0",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1.25rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"75%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}})]})]}),J(ie,{gap:"tight",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"66%"}})]})]})}),!i&&T(ie,{justify:"center",style:{paddingTop:"var(--gap-md)",paddingBottom:"var(--gap-md)"},children:T("div",{className:"dndev-animate-pulse",style:{width:"2rem",height:"1px",backgroundColor:"var(--muted)"}})})]},n)})})})}var Ft=En;import{jsx as nt}from"react/jsx-runtime";var Vn=Bn(()=>Promise.resolve().then(()=>(Kt(),Ut)));function Fn(e){return nt(Wn,{fallback:nt(Ft,{stepCount:e.items?.length||3,direction:e.direction==="descending"?"vertical":"horizontal"}),children:nt(Vn,{...e})})}var Yn=Fn;export{Ra as BreathingExerciseLayout,_a as Carousel,sn as ComparisonGrid,pn as CongratulationsCard,pt as Crawl,bn as GuideModal,wt as InspectorGadget,ka as LungsAnimation,bt as Marquee,ye as Reveal,Pt as Roadmap,xn as SplitReveal,kt as StackedCards,Rn as StartChallengeForm,Yn as Waterfall};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@donotdev/adv-comps",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -51,7 +51,7 @@
51
51
  },
52
52
  "dependencies": {},
53
53
  "peerDependencies": {
54
- "@donotdev/components": "0.0.3",
54
+ "@donotdev/components": "0.0.5",
55
55
  "react": "^19.2.3",
56
56
  "react-dom": "^19.2.3",
57
57
  "shiki": "^3.20.0"