@donotdev/adv-comps 0.0.3 → 0.0.4
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.
- package/dist/components/Crawl/Crawl.d.ts.map +1 -1
- package/dist/components/Crawl/Crawl.js +4 -2
- package/dist/components/Roadmap/Roadmap.css +248 -0
- package/dist/components/Roadmap/Roadmap.d.ts +15 -0
- package/dist/components/Roadmap/Roadmap.d.ts.map +1 -0
- package/dist/components/Roadmap/Roadmap.js +16 -0
- package/dist/components/Roadmap/RoadmapContent.d.ts +28 -0
- package/dist/components/Roadmap/RoadmapContent.d.ts.map +1 -0
- package/dist/components/Roadmap/RoadmapContent.js +47 -0
- package/dist/components/Roadmap/index.d.ts +3 -0
- package/dist/components/Roadmap/index.d.ts.map +1 -0
- package/dist/components/Roadmap/index.js +2 -0
- package/dist/components/StackedCards/StackedCards.css +10 -7
- package/dist/components/StackedCards/StackedCardsContent.d.ts +8 -0
- package/dist/components/StackedCards/StackedCardsContent.d.ts.map +1 -1
- package/dist/components/StackedCards/StackedCardsContent.js +10 -21
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/package.json +2 -2
|
@@ -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,
|
|
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 =
|
|
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 =
|
|
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 @@
|
|
|
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"}
|
|
@@ -49,14 +49,15 @@
|
|
|
49
49
|
STACKED CARDS - STACK CONTENT
|
|
50
50
|
=========================== */
|
|
51
51
|
|
|
52
|
-
|
|
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-
|
|
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
|
|
|
@@ -76,6 +76,14 @@ export type StackedCardsProps = {
|
|
|
76
76
|
variant?: SurfaceVariantProps['variant'];
|
|
77
77
|
/** Optional aria-label for the list */
|
|
78
78
|
ariaLabel?: string;
|
|
79
|
+
/**
|
|
80
|
+
* Intersection threshold for revealing next card (0.0 - 1.0)
|
|
81
|
+
* - 0.0 = reveals when any part is visible
|
|
82
|
+
* - 0.5 = reveals when 50% visible (default)
|
|
83
|
+
* - 1.0 = reveals when 100% visible (full card must be in view)
|
|
84
|
+
* @default 0.5
|
|
85
|
+
*/
|
|
86
|
+
threshold?: number;
|
|
79
87
|
className?: string;
|
|
80
88
|
style?: CSSProperties;
|
|
81
89
|
};
|
|
@@ -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;
|
|
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;AAcf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAkChE;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C;;;;;;;;;;;;;;;;;;OAkBG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iDAAiD;IACjD,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,QAAA,MAAM,mBAAmB,EAAE,aAAa,CAAC,iBAAiB,CAsDzD,CAAC;AAkIF,eAAe,mBAAmB,CAAC"}
|
|
@@ -9,7 +9,7 @@ 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,
|
|
12
|
+
import { cn, Button, Separator, SEPARATOR_VARIANT, Text, useIntersectionObserver, getVariantDataAttrs, surfaceVariants, renderCardHeader, renderCardContent, } from '@donotdev/components';
|
|
13
13
|
/**
|
|
14
14
|
* Stacked Cards Animation Configuration
|
|
15
15
|
*
|
|
@@ -26,7 +26,7 @@ const STACKED_CARDS_CONFIG = {
|
|
|
26
26
|
*
|
|
27
27
|
* TO REQUIRE MORE SCROLL: Increase this value (0.3 → 0.5 → 0.7)
|
|
28
28
|
*/
|
|
29
|
-
intersectionThreshold: 0.
|
|
29
|
+
intersectionThreshold: 0.5,
|
|
30
30
|
/**
|
|
31
31
|
* Intersection Observer root margin (bottom)
|
|
32
32
|
* Format: 'top right bottom left'
|
|
@@ -39,12 +39,6 @@ const STACKED_CARDS_CONFIG = {
|
|
|
39
39
|
// Removed viewportTopThreshold and viewportBottomThreshold
|
|
40
40
|
// IntersectionObserver handles all visibility detection (more performant, single source of truth)
|
|
41
41
|
};
|
|
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
42
|
/**
|
|
49
43
|
* StackedCardsContent Component - Animated waterfall card stacking
|
|
50
44
|
*
|
|
@@ -119,7 +113,7 @@ const IconRenderer = memo(({ icon }) => {
|
|
|
119
113
|
* ];
|
|
120
114
|
* ```
|
|
121
115
|
*/
|
|
122
|
-
const StackedCardsContent = ({ items, className, ariaLabel, variant, style, }) => {
|
|
116
|
+
const StackedCardsContent = ({ items, className, ariaLabel, variant, style, threshold = STACKED_CARDS_CONFIG.intersectionThreshold, }) => {
|
|
123
117
|
const [entered, setEntered] = useState(0);
|
|
124
118
|
const containerRef = useRef(null);
|
|
125
119
|
// Calculate maximum height from all items to ensure all cards have the same height
|
|
@@ -135,12 +129,12 @@ const StackedCardsContent = ({ items, className, ariaLabel, variant, style, }) =
|
|
|
135
129
|
const maxOrder = heightOrder[max] || 2;
|
|
136
130
|
return currentOrder > maxOrder ? current : max;
|
|
137
131
|
}, '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))) }));
|
|
132
|
+
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
133
|
};
|
|
140
134
|
// Individual stacked card item with working logic matching the CSS
|
|
141
|
-
const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps, maxEstimatedHeight, maxCustomHeight, }) => {
|
|
135
|
+
const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps, maxEstimatedHeight, maxCustomHeight, threshold, }) => {
|
|
142
136
|
const { ref, isIntersecting } = useIntersectionObserver({
|
|
143
|
-
threshold
|
|
137
|
+
threshold,
|
|
144
138
|
rootMargin: STACKED_CARDS_CONFIG.intersectionRootMargin,
|
|
145
139
|
});
|
|
146
140
|
useEffect(() => {
|
|
@@ -148,11 +142,9 @@ const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps
|
|
|
148
142
|
onEnter();
|
|
149
143
|
}
|
|
150
144
|
}, [isIntersecting, onEnter]);
|
|
151
|
-
const
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
? [item.content]
|
|
155
|
-
: [];
|
|
145
|
+
const header = renderCardHeader(item.icon, item.title, item.subtitle);
|
|
146
|
+
const contentNode = renderCardContent(item.content);
|
|
147
|
+
const hasContent = !!contentNode;
|
|
156
148
|
return (_jsx("section", { ref: ref, className: "dndev-relative", style: {
|
|
157
149
|
zIndex: totalItems - index - 1,
|
|
158
150
|
}, children: _jsx("div", { className: cn('dndev-relative dndev-overflow-hidden stack', 'dndev-min-w-0'), "data-size": maxCustomHeight ? undefined : maxEstimatedHeight, "data-stacked": index > entered ? 'true' : 'false', style: {
|
|
@@ -162,10 +154,7 @@ const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps
|
|
|
162
154
|
['--dynamic-height']: `${maxCustomHeight}px`,
|
|
163
155
|
}),
|
|
164
156
|
...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
|
|
157
|
+
}, 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
158
|
? String(item.number)
|
|
170
159
|
: String(index + 1).padStart(2, '0') })] }) }) }));
|
|
171
160
|
};
|
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';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -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;
|
|
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 v=s[1].toLowerCase();if(r.includes(v)){let w=dt(v,"",n,u++);w&&l.push(w);continue}}let f=m.match(/^<(\w+)(?:\s[^>]*)?>$/);if(f&&f[1]){let v=f[1].toLowerCase();if(r.includes(v)){let w=`</${v}>`,b="",g=c+1;for(;g<d.length&&d[g]&&!d[g].includes(w);)b+=d[g],g++;g<d.length&&d[g]&&(b+=d[g].replace(w,""));let C=dt(v,b,n,u++);C&&l.push(C),c=g;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=b=>!b||typeof b!="string"?null:b.split(/\n\s*\n/).map(C=>C.trim()).filter(C=>C.length>0).map((C,S)=>G("p",{children:me(C,{allowedTags:["u","br","i","em","strong","b"]})},`p-${S}`)),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]),f=We(()=>cr(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:me(g,{allowedTags:["u","br","i","em","strong","b"]})},`c-${C}`)):typeof e=="string"?m(e):e,[e]),v=We(()=>{let b={"--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&&(b["--crawl-tilt"]=`${n}deg`),b},[u,r,o,n]);sr(()=>{if(!mr()||!l.current)return;let b=window.matchMedia("(prefers-reduced-motion: reduce)"),g=()=>{b.matches&&l.current&&l.current.classList.add("dndev-crawl-reduced-motion")};return g(),b.addEventListener("change",g),()=>b.removeEventListener("change",g)},[]);let w=()=>{u?(c(!1),d?.()):(c(!0),i?.())};return Be(vr,{children:[G("div",{className:"dndev-crawl-3d-container",onClick:w,children:G("div",{ref:l,className:"dndev-crawl-text",style:{...v,willChange:u?"auto":"transform"},children:Be("div",{className:"dndev-crawl-content",children:[s,f]})})}),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:w,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:f="ease-in-out"}){let v=typeof document<"u"&&document.dir==="rtl",w=typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1,b=d;d==="auto"&&(b=v?"right":"left");let g=b==="up"||b==="down",C=c==="ignore"||!w,S=m;m==="auto"&&(S=e.length<=20?"bounce":"infinite");let N=Tr(null),[X,F]=Te(8e3),[te,j]=Te(0),[Y,k]=Te(!0),[Ce,U]=Te(!1);vt(()=>N.current?Pr(N.current,A=>k(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=g?$.clientHeight:$.clientWidth,re=g?A.scrollHeight:A.scrollWidth,_=Math.max(0,re-K);if(U(_>0),_>0){let ge=Math.min(512,Math.max(12,i));if(S==="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,g,C,S,n]);let xe=()=>g?b==="up"?"normal":"reverse":b==="left"?"normal":"reverse",ke=()=>S==="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||`${S==="infinite"?"Scrolling":"Bouncing"} content with ${e.length} items`,"aria-live":C&&Y?"off":"polite",children:Re(Mr,{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&&Y&&Ce?`${X}ms`:"0ms","--marquee-direction":xe(),"--marquee-distance":g?`${te}px`:`${te}px`,"--marquee-easing":zr[f],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:()=>Xa});import{ChevronLeft as Ea,ChevronRight as za,Play as Aa,Pause as Ia}from"lucide-react";import{useRef as Ke,useState as oe,useEffect as Qe,useCallback as z,useMemo as Je,memo as Da}from"react";import{cn as Ae,observeElement as La,addEventListener as $a,isRTLLanguage as Ha,Stack as Ga}from"@donotdev/components";import{Fragment as qa,jsx as E,jsxs as je}from"react/jsx-runtime";function Oa({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:f=!0,momentum:v=!0,onActiveChange:w,onSlideClick:b,keyExtractor:g,"aria-label":C="Premium carousel",pauseOnHover:S=!0,pauseOnInvisible:N=!0,showPlayPause:X=!0,lazy:F=!1,preloadDistance:te=1}){if(!e||e.length===0)return E(Ga,{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),[k,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),$a(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(!v)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)},[v,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),w?.(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,w,de,_,it,st]),Z=z(()=>{q(k+1)},[k,q]),le=z(()=>{q(k-1)},[k,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,k,Z,u,e.length]),Qe(()=>!N||!j.current?void 0:La(j.current,p=>ve(p.isIntersecting),{threshold:.1}),[N]);let Jt=z(a=>F?Math.abs(a-k)<=te:!0,[F,k,te]),jt=z(a=>{if(!f||_!=="idle")return;let p=a.touches[0];p&&K({isDragging:!0,startX:p.clientX,currentX:p.clientX,startTime:Date.now(),velocity:0})},[f,_]),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=-(k*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,k,H]),er=z(()=>{if(!I.isDragging)return;let a=I.currentX-I.startX,p=I.velocity,h=50;if(v&&Math.abs(p)>.5){let x=Y.current;if(x){let R=p>0?k-1:k+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&&v){let R=-(k*H);Ge(x,R,p*100)}else q(k,!0)}K({isDragging:!1,startX:0,currentX:0,startTime:0,velocity:0})},[I,v,Z,le,q,k,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=Ha();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:()=>S&&$(!0),onMouseLeave:()=>S&&$(!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===k,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:()=>b?.(a,h),children:R&&t(a,h,x)},g?g(a,h):`${h}-${p}`)})})}),n&&e.length>1&&je(qa,{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(Ea,{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(za,{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(Ia,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}}):E(Aa,{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===k?"1.5rem":"0.5rem",height:"0.5rem",borderRadius:"9999px",transition:"all 0.3s",backgroundColor:p===k?"var(--foreground)":"rgb(from var(--foreground) r g b / 0.3)"},onMouseEnter:h=>{p!==k&&(h.currentTarget.style.backgroundColor="rgb(from var(--foreground) r g b / 0.5)")},onMouseLeave:h=>{p!==k&&(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:`${(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 Dt,Xa,$t=ce(()=>{"use strict";Dt=Da(Oa);Dt.displayName="Carousel";Xa=Dt});var Gt={};he(Gt,{default:()=>Ja});import{memo as _a}from"react";import{Card as Ua,Text as et}from"@donotdev/components";import{cn as Ka}from"@donotdev/components";import{Fragment as ja,jsx as we,jsxs as Ht}from"react/jsx-runtime";var Qa,Ja,Ot=ce(()=>{"use strict";Qa=_a(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:Ka("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(Ua,{title:u.useCase,subtitle:u.bestFit,content:Ht(ja,{children:[we(et,{variant:"muted",level:"body",children:u.dndev}),we(et,{variant:"muted",level:"small",className:"italic",children:u.reason})]})},c))})]})}),Ja=Qa});var Ut={};he(Ut,{default:()=>Xn});import{memo as $e}from"react";import{cn as at,Card as En,Icon as zn,Stack as An}from"@donotdev/components";import{jsx as P,jsxs as ue}from"react/jsx-runtime";var se,Yt,In,_t,Dn,Ln,$n,Hn,Gn,On,Xn,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(En,{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(An,{direction:"row",align:"center",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[P(In,{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})]})),In=$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(zn,{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,f;if(l){let{curveOffset:v}=se.mobile,w=(o+i)/2,b=r+v;c=Math.abs(b-r)+40,m=Math.abs(i-o)+40,s=Math.min(r,b)-20,f=Math.min(o,i)-20;let g=r-s,C=o-f,S=n-s,N=i-f,X=b-s,F=w-f;u=`M ${g} ${C} Q ${X} ${F} ${S} ${N}`}else{let v=(r+n)/2,w=o+(i-o)*.3;c=Math.abs(n-r)+40,m=Math.abs(i-o)+40,s=Math.min(r,n)-20,f=Math.min(o,i)-20;let b=r-s,g=o-f,C=n-s,S=i-f,N=v-s,X=w-f;u=`M ${b} ${g} Q ${N} ${X-20} ${C} ${S}`}return ue("svg",{className:at(t),style:{left:s,top:f,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-f,r:"6",fill:"currentColor",className:"text-accent"}),P("circle",{cx:n-s,cy:i-f,r:"6",fill:"currentColor",className:"text-accent"})]})}),Dn=e=>{let{cardWidth:t,cardGap:r,drop:o,startX:n}=se.desktop;return{x:n+e*(t+r),y:e*o}},Ln=e=>{let{cardHeight:t,verticalGap:r}=se.mobile;return{x:0,y:e*(t+r)}},$n=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},Hn=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},Gn=e=>{let{cardHeight:t,verticalGap:r}=se.mobile;return(e-1)*(t+r)+t+40},On=$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:f}=Dn(m);return P("li",{className:"list-none dndev-absolute waterfall-card",style:{left:`${s}px`,top:`${f}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=$n(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:`${Gn(e.length)}px`},children:[P("ol",{className:"dndev-relative","aria-label":n??"Process steps",children:e.map((c,m)=>{let{x:s,y:f}=Ln(m);return P("li",{className:"list-none dndev-absolute",style:{left:`${s}px`,top:`${f}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=Hn(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}),Xn=On});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]),f=()=>{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:f,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:v=>{v.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.3)",v.currentTarget.style.borderColor="rgba(255, 255, 255, 0.6)",v.currentTarget.style.transform="scale(1.1)"},onMouseLeave:v=>{v.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.2)",v.currentTarget.style.borderColor="rgba(255, 255, 255, 0.4)",v.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{jsx as V,jsxs as Pe}from"react/jsx-runtime";var Ct={intersectionThreshold:.5,intersectionRootMargin:"0px 0px -20% 0px"},ia=({items:e,className:t,ariaLabel:r,variant:o,style:n,threshold:i=Ct.intersectionThreshold})=>{let[d,l]=Qr(0),u=Kr(null),m=e.some(v=>v.customHeight)?Math.max(...e.map(v=>v.customHeight||0).filter(v=>v>0)):null,s={small:1,medium:2,large:3},f=e.reduce((v,w)=>{let b=w.estimatedHeight||"medium",g=s[b]||2,C=s[v]||2;return g>C?b:v},"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((v,w)=>V(sa,{item:v,index:w,entered:d,onEnter:()=>l(w),totalItems:e.length,cardProps:{variant:o,style:n},maxEstimatedHeight:f,maxCustomHeight:m,threshold:i},w))})},sa=({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),f=oa(e.content),v=!!f;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"}),v&&V("div",{className:"dndev-stacked-cards-right",children:f})]}),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=ia;import{jsx as la}from"react/jsx-runtime";var da=function(t){return la(xt,{...t})},kt=da;import{useCallback as ca}from"react";import{cn as ma,useViewportVisibility as pa}from"@donotdev/components";import{jsx as St}from"react/jsx-runtime";var ua=({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:f,hasTriggered:v,visibleItems:w,isItemVisible:b}=pa({threshold:o,once:d,trackItems:l,enableScrollListener:l}),g=ca(S=>{let N=u.find(X=>X.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,u]),C=()=>e.map((S,N)=>{let X=g(N),F=N*r,te=l?b(N):f;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:S},N)});return St("div",{ref:s,className:ma("dndev-reveal-container",f&&"dndev-reveal-visible",c),"data-direction":t,"data-stagger":r,children:e.length>0?C():m})},ye=ua;import{useState as va,useEffect as ga}from"react";import{cn as Nt,Card as Tt,renderCardContent as Rt,useIntersectionObserver as fa}from"@donotdev/components";import{useBreakpoint as ha}from"@donotdev/core";import{jsx as M,jsxs as ae}from"react/jsx-runtime";var ba=function({steps:t,className:r,variant:o}){let[n,i]=va(0),d=ha("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,f=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":f,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(ya,{step:u,index:c,isActive:c<=n,variant:o,onEnter:()=>i(c)},c))]})})},ya=({step:e,index:t,isActive:r,variant:o,onEnter:n})=>{let{ref:i,isIntersecting:d}=fa({threshold:.5,rootMargin:"0px 0px -20% 0px"});ga(()=>{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=ba;import{jsx as Ca}from"react/jsx-runtime";var wa=function(t){return Ca(Mt,{...t})},Pt=wa;import{jsx as Ue,jsxs as ka}from"react/jsx-runtime";function xa({status:e,animationClass:t}){return Ue("svg",{width:"100%",height:"100%",viewBox:"0 0 512 512",className:"drop--lg",preserveAspectRatio:"xMidYMid meet",children:ka("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"}),
|
|
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 Sa}from"lucide-react";import{Button as Et,BUTTON_VARIANT as Na,Stack as Ee}from"@donotdev/components";import{jsx as ne,jsxs as ze}from"react/jsx-runtime";function Ta({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:Na.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:Sa,onClick:d,"aria-label":"Do another cycle"})]}),ne(Ee,{gap:"tight",align:"center",style:{textAlign:"center",maxWidth:"28rem"},children:r})]})}import{Suspense as Wa,lazy as Ba}from"react";import{cn as Ra,Stack as zt}from"@donotdev/components";import{Fragment as Pa,jsx as Q,jsxs as At}from"react/jsx-runtime";function Ma({className:e,itemCount:t=1,showArrows:r=!0,showDots:o=!1,showProgress:n=!1}){return At("div",{className:Ra("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(Pa,{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=Ma;import{jsx as Ze}from"react/jsx-runtime";var Va=Ba(()=>Promise.resolve().then(()=>($t(),Lt))),Fa=e=>{let{showArrows:t=!0,showDots:r=!0,showProgress:o=!1}=e;return Ze(Wa,{fallback:Ze(It,{showArrows:t,showDots:r,showProgress:o}),children:Ze(Va,{...e})})},Ya=Fa;import{lazy as Za,Suspense as en}from"react";import{Card as tn,Grid as rn}from"@donotdev/components";import{jsx as Ie}from"react/jsx-runtime";var an=Za(()=>Promise.resolve().then(()=>(Ot(),Gt)));function nn({title:e,items:t,gridCols:r=2,className:o,ariaLabel:n}){return Ie(en,{fallback:Ie(rn,{gap:"medium",cols:2,children:t.map((i,d)=>Ie(tn,{title:"Loading..."},d))}),children:Ie(an,{title:e,items:t,gridCols:r,className:o,ariaLabel:n})})}var on=nn;import{Card as sn,Text as dn,Stack as ln}from"@donotdev/components";import{jsx as tt,jsxs as pn}from"react/jsx-runtime";var cn=({text:e,icon:t="\u{1F389}",className:r})=>tt(sn,{className:r,style:{textAlign:"center"},children:pn(ln,{gap:"tight",style:{padding:"var(--gap-md)"},children:[t&&tt("div",{style:{fontSize:"var(--font-size-2xl)"},children:t}),tt(dn,{variant:"muted",children:e})]})}),mn=cn;import{CheckCircle as De}from"lucide-react";import{Dialog as un,Card as Le,Badge as vn,BADGE_VARIANT as gn,Stack as O,Grid as fn}from"@donotdev/components";import{jsx as y,jsxs as L}from"react/jsx-runtime";function hn({open:e,onOpenChange:t,guide:r,icon:o}){let n=o;return y(un,{open:e,onOpenChange:t,title:L(O,{direction:"row",align:"center",gap:"medium",children:[n&&y(n,{className:"dndev-size-touch",style:{color:"var(--primary)"}}),y("div",{style:{fontSize:"var(--font-size-3xl)",fontWeight:700},children:r.title})]}),description:y("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:[y(De,{className:"dndev-size-md",style:{color:"var(--secondary)"}}),r.quickStart.title]}),children:[y("div",{className:"dndev-surface",style:{backgroundColor:"var(--muted)",padding:"var(--gap-md)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)"},children:y("code",{style:{color:"var(--muted-foreground)",fontSize:"var(--font-size-sm)",fontFamily:"monospace"},children:r.quickStart.code})}),y("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:[y("h3",{style:{fontSize:"var(--font-size-xl)",fontWeight:600},children:"Step by Step Process"}),y(O,{gap:"medium",children:r.steps.map((i,d)=>{let l=i.icon;return y("div",{className:"dndev-relative",children:L(Le,{style:{overflow:"visible"},children:[y("div",{className:"dndev-absolute",style:{top:"-0.75rem",left:"-0.75rem",zIndex:20},children:y("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:[y(l,{className:"dndev-size-md",style:{color:"var(--primary)"}}),y("div",{style:{fontSize:"var(--font-size-lg)",fontWeight:600},children:i.title})]}),L(O,{gap:"large",children:[y("p",{style:{color:"var(--muted-foreground)"},children:i.description}),i.code&&y("div",{className:"dndev-surface",style:{backgroundColor:"var(--muted)",padding:"var(--gap-md)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)"},children:y("code",{style:{color:"var(--muted-foreground)",fontSize:"var(--font-size-sm)",fontFamily:"monospace"},children:i.code})}),i.details&&y("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)"},children:i.details})]})]})]})},d)})})]}),r.features&&y(Le,{title:L(O,{direction:"row",align:"center",gap:"medium",children:[y(De,{className:"dndev-size-md",style:{color:"var(--secondary)"}}),"What You Get Out of the Box"]}),children:y(O,{gap:"medium",children:r.features.map((i,d)=>L(O,{direction:"row",align:"center",gap:"medium",style:{fontSize:"var(--font-size-sm)"},children:[y(De,{className:"dndev-size-sm",style:{color:"var(--secondary)",flexShrink:0}}),y("span",{style:{color:"var(--muted-foreground)"},children:i})]},d))})}),r.templates&&y(Le,{title:L(O,{direction:"row",align:"center",gap:"medium",children:[y(De,{className:"dndev-size-md",style:{color:"var(--accent)"}}),"Available Templates"]}),children:y(fn,{cols:3,gap:"medium",children:r.templates.map((i,d)=>L(O,{gap:"tight",children:[y(vn,{variant:gn.OUTLINE,className:"dndev-justify-center",style:{width:"100%"},children:i.name}),y("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)"},children:i.description})]},d))})})]})})}import{Card as bn,Text as Xt,GAP_VARIANT as yn,Grid as qt}from"@donotdev/components";import{jsx as pe,jsxs as Wt}from"react/jsx-runtime";var wn=({left:e,right:t,leftDirection:r="left",rightDirection:o="right",threshold:n,stagger:i=200,distance:d,duration:l,gap:u=yn.LARGE,className:c,align:m="start",useStatCards:s=!1})=>{let f=()=>s&&Array.isArray(t)?pe(qt,{cols:2,gap:"medium",children:t.map((w,b)=>pe(bn,{children:Wt("div",{style:{padding:"var(--gap-lg)"},children:[pe(Xt,{level:"h3",children:w.title}),pe(Xt,{as:"p",variant:"muted",children:w.description})]})},b))}):t,v={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:[f()]})]})},Cn=wn;import{Button as xn,Input as kn,cn as rt,Stack as Sn}from"@donotdev/components";import{jsx as Bt,jsxs as Rn}from"react/jsx-runtime";function Nn({input:e,button:t,className:r}){return Rn(Sn,{align:"center",justify:"center",gap:"medium",className:rt("dndev-w-full",r),children:[Bt(kn,{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(xn,{variant:t.variant||"primary",onClick:t.onClick,icon:t.icon,className:rt("dndev-w-full",t.className),style:{paddingInline:"2rem"},children:t.label})]})}var Tn=Nn;import{Suspense as qn,lazy as Wn}from"react";import{Fragment as Mn}from"react";import{cn as Vt,Stack as ie}from"@donotdev/components";import{jsx as T,jsxs as J}from"react/jsx-runtime";function Pn({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(Mn,{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=Pn;import{jsx as nt}from"react/jsx-runtime";var Bn=Wn(()=>Promise.resolve().then(()=>(Kt(),Ut)));function Vn(e){return nt(qn,{fallback:nt(Ft,{stepCount:e.items?.length||3,direction:e.direction==="descending"?"vertical":"horizontal"}),children:nt(Bn,{...e})})}var Fn=Vn;export{Ta as BreathingExerciseLayout,Ya as Carousel,on as ComparisonGrid,mn as CongratulationsCard,pt as Crawl,hn as GuideModal,wt as InspectorGadget,xa as LungsAnimation,bt as Marquee,ye as Reveal,Pt as Roadmap,Cn as SplitReveal,kt as StackedCards,Tn as StartChallengeForm,Fn as Waterfall};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@donotdev/adv-comps",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
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.
|
|
54
|
+
"@donotdev/components": "0.0.4",
|
|
55
55
|
"react": "^19.2.3",
|
|
56
56
|
"react-dom": "^19.2.3",
|
|
57
57
|
"shiki": "^3.20.0"
|