@donotdev/adv-comps 0.0.5 → 0.0.7

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.
@@ -58,7 +58,6 @@
58
58
  display: flex;
59
59
  flex-direction: column;
60
60
  align-items: center;
61
- cursor: pointer;
62
61
  }
63
62
 
64
63
  /* Timeline node (icon circle) */
@@ -178,7 +177,6 @@
178
177
  flex-direction: column;
179
178
  align-items: center;
180
179
  width: 100%;
181
- cursor: pointer;
182
180
  }
183
181
 
184
182
  .dndev-roadmap-step-mobile:last-child {
@@ -14,6 +14,8 @@ export interface RoadmapStep {
14
14
  description?: string;
15
15
  /** Optional content - shown in popover on click */
16
16
  content?: CardContent;
17
+ /** Optional onClick handler for navigation or actions */
18
+ onClick?: () => void;
17
19
  }
18
20
  export interface RoadmapProps {
19
21
  /** Array of roadmap steps */
@@ -1 +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"}
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;IACtB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;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,4CAmGd,CAAC;AAuDF,eAAe,cAAc,CAAC"}
@@ -24,7 +24,7 @@ const RoadmapContent = function RoadmapContent({ steps, className, variant, }) {
24
24
  const Icon = step.icon;
25
25
  const isActive = index <= activeStep;
26
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));
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, onClick: step.onClick, 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
28
  }) })] }) }));
29
29
  }
30
30
  // Mobile layout with scroll-based activation
@@ -42,6 +42,6 @@ const RoadmapStepMobile = ({ step, index, isActive, variant, onEnter }) => {
42
42
  }
43
43
  }, [isIntersecting, onEnter]);
44
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 }))] })] }));
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, onClick: step.onClick, 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
46
  };
47
47
  export default RoadmapContent;
@@ -1,3 +1,4 @@
1
+ import './Roadmap.css';
1
2
  export { default } from './Roadmap';
2
3
  export type { RoadmapProps, RoadmapStep } from './Roadmap';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Roadmap/index.ts"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}
@@ -1,2 +1,3 @@
1
1
  // packages/adv-comps/src/components/Roadmap/index.ts
2
+ import './Roadmap.css';
2
3
  export { default } from './Roadmap';
@@ -1,84 +1,54 @@
1
1
  /* packages/adv-comps/src/components/StackedCards/StackedCards.css */
2
2
 
3
- .stack {
3
+ /* Container */
4
+ .dndev-stacked-cards-container {
5
+ display: flex;
6
+ flex-direction: column;
4
7
  width: 100%;
5
- height: var(--dynamic-height);
6
- contain: layout;
7
- transform-origin: center top;
8
- transform: translateX(0)
9
- translateY(
10
- calc(
11
- -1 * ((var(--dynamic-height) - 3.5rem) + var(--gap-lg)) *
12
- max(var(--i) - var(--e), 0)
13
- )
14
- );
15
- transition: transform var(--dur-heavy) var(--ease-heavy);
16
- will-change: var(--will-change-transform);
17
-
18
- &[data-size='small'] {
19
- --dynamic-height: 24rem;
20
-
21
- @media (width >= 1024px) {
22
- --dynamic-height: 16rem;
23
- }
24
- }
8
+ max-width: min(100%, var(--content-width, 60rem));
9
+ margin-inline: auto;
10
+ position: relative;
11
+ }
25
12
 
26
- &[data-size='medium'] {
27
- --dynamic-height: 28rem;
13
+ /* Each stack item */
14
+ .dndev-stack-item {
15
+ width: 100%;
16
+ position: relative;
17
+ transition: max-height var(--dur-heavy) var(--ease-heavy);
18
+ overflow: hidden;
28
19
 
29
- @media (width >= 1024px) {
30
- --dynamic-height: 20rem;
31
- }
20
+ /* Active card - full height */
21
+ &[data-stacked='false'] {
22
+ max-height: none;
32
23
  }
33
24
 
34
- &[data-size='large'] {
35
- --dynamic-height: 36rem;
36
-
37
- @media (width >= 1024px) {
38
- --dynamic-height: 28rem;
39
- }
25
+ /* Stacked card - only bottom edge visible */
26
+ &[data-stacked='true'] {
27
+ max-height: 3.5rem;
40
28
  }
41
29
 
42
30
  @media (prefers-reduced-motion: reduce) {
43
31
  transition: none;
44
- transform: none !important;
45
- }
46
- }
47
-
48
- /* ===========================
49
- STACKED CARDS - STACK CONTENT
50
- =========================== */
51
-
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);
57
- height: calc(100% - 3.5rem);
58
- overflow-y: auto;
59
- scrollbar-width: none;
60
- -ms-overflow-style: none;
61
-
62
- &::-webkit-scrollbar {
63
- display: none;
64
32
  }
65
33
  }
66
34
 
67
- /* Hide card content when stacked (show only number) */
68
- .stack[data-stacked='true'] .stack-content {
35
+ /* Card content - hidden when stacked */
36
+ .dndev-stack-item[data-stacked='true'] .dndev-stack-content {
69
37
  opacity: 0;
70
38
  pointer-events: none;
71
39
  }
72
40
 
73
- .stack[data-stacked='true'] .dndev-stacked-cards-number {
74
- opacity: 1;
75
- }
76
-
77
- .dndev-stacked-cards-spacer {
78
- height: 3.5rem;
41
+ /* Stack content wrapper */
42
+ .dndev-stack-content {
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: var(--gap-sm);
46
+ padding-bottom: 3.5rem; /* Space for number bar */
47
+ transition: opacity var(--dur-normal) var(--ease-in-out);
79
48
  }
80
49
 
81
- .dndev-stacked-cards-number {
50
+ /* Number bar - always visible at bottom */
51
+ .dndev-stack-number {
82
52
  position: absolute;
83
53
  left: var(--gap-lg);
84
54
  bottom: 0;
@@ -89,31 +59,9 @@
89
59
  font-weight: 500;
90
60
  color: var(--muted-foreground);
91
61
  z-index: 10;
92
- opacity: 1;
93
- transition: opacity var(--dur-heavy) var(--ease-heavy);
94
- }
95
-
96
- /* ===========================
97
- STACKED CARDS - LAYOUT
98
- =========================== */
99
-
100
- .dndev-stacked-cards-container {
101
- display: flex;
102
- flex-direction: column;
103
- width: 100%;
104
- max-width: min(100%, var(--content-width, 60rem));
105
- margin-inline: auto;
106
- gap: var(--gap-lg);
107
- position: relative;
108
- z-index: 0;
109
- }
110
-
111
- .dndev-stacked-cards-header {
112
- display: flex;
113
- align-items: center;
114
- gap: var(--gap-sm);
115
62
  }
116
63
 
64
+ /* Body layout */
117
65
  .dndev-stacked-cards-body {
118
66
  display: flex;
119
67
  flex-direction: column;
@@ -144,7 +92,6 @@
144
92
  display: block;
145
93
 
146
94
  @media (width < 1024px) {
147
- /* Horizontal separator on mobile */
148
95
  width: 80% !important;
149
96
  height: 2px !important;
150
97
  margin-inline: auto;
@@ -153,7 +100,6 @@
153
100
  }
154
101
 
155
102
  @media (width >= 1024px) {
156
- /* Vertical separator on desktop */
157
103
  width: 1px !important;
158
104
  height: 100% !important;
159
105
  align-self: stretch;
@@ -1,25 +1,19 @@
1
1
  /**
2
2
  * @fileoverview Stacked Cards Component
3
- * @description Stacked cards component with animated waterfall card stacking. Features progressive reveal, consistent card heights for perfect visual stacking, responsive behavior with mobile/desktop transitions, and intersection observers with smooth animations.
3
+ * @description Simple scroll-reveal stacked cards. Active card shows full content,
4
+ * stacked cards show only bottom edge with number. No height calculations.
4
5
  *
5
- * @version 0.0.1
6
+ * @version 0.0.2
6
7
  * @since 0.0.1
7
8
  * @author AMBROISE PARK Consulting
8
9
  */
9
- import StackedCardsContent from './StackedCardsContent';
10
- import type { ComponentProps } from 'react';
11
- export type { StackedCardsProps, StackedCardData, ResponsiveHeight, } from './StackedCardsContent';
10
+ import { type StackedCardsProps } from './StackedCardsContent';
12
11
  /**
13
- * StackedCards Component
12
+ * StackedCards - Scroll-reveal card stack
14
13
  *
15
- * Features:
16
- * - Animated waterfall card stacking with progressive reveal
17
- * - Consistent card heights for perfect visual stacking
18
- * - Responsive behavior with mobile/desktop transitions
19
- * - Intersection observers and smooth animations
20
- *
21
- * Perfect for showcasing features, steps, or any progressive content
14
+ * Cards reveal as user scrolls. Each card shows at natural height.
15
+ * Stacked cards collapse to show only bottom edge with number.
22
16
  */
23
- declare const StackedCards: (props: ComponentProps<typeof StackedCardsContent>) => import("react/jsx-runtime").JSX.Element;
17
+ declare const StackedCards: (props: StackedCardsProps) => import("react/jsx-runtime").JSX.Element;
24
18
  export default StackedCards;
25
19
  //# sourceMappingURL=StackedCards.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"StackedCards.d.ts","sourceRoot":"","sources":["../../../src/components/StackedCards/StackedCards.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,YAAY,EACV,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;;;GAUG;AACH,QAAA,MAAM,YAAY,GAChB,OAAO,cAAc,CAAC,OAAO,mBAAmB,CAAC,4CAGlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"StackedCards.d.ts","sourceRoot":"","sources":["../../../src/components/StackedCards/StackedCards.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAA4B,EAAE,KAAK,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEpF;;;;;GAKG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -2,25 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // packages/adv-comps/src/components/StackedCards/StackedCards.tsx
3
3
  /**
4
4
  * @fileoverview Stacked Cards Component
5
- * @description Stacked cards component with animated waterfall card stacking. Features progressive reveal, consistent card heights for perfect visual stacking, responsive behavior with mobile/desktop transitions, and intersection observers with smooth animations.
5
+ * @description Simple scroll-reveal stacked cards. Active card shows full content,
6
+ * stacked cards show only bottom edge with number. No height calculations.
6
7
  *
7
- * @version 0.0.1
8
+ * @version 0.0.2
8
9
  * @since 0.0.1
9
10
  * @author AMBROISE PARK Consulting
10
11
  */
11
- import StackedCardsContent from './StackedCardsContent';
12
+ import StackedCardsContent, {} from './StackedCardsContent';
12
13
  /**
13
- * StackedCards Component
14
+ * StackedCards - Scroll-reveal card stack
14
15
  *
15
- * Features:
16
- * - Animated waterfall card stacking with progressive reveal
17
- * - Consistent card heights for perfect visual stacking
18
- * - Responsive behavior with mobile/desktop transitions
19
- * - Intersection observers and smooth animations
20
- *
21
- * Perfect for showcasing features, steps, or any progressive content
16
+ * Cards reveal as user scrolls. Each card shows at natural height.
17
+ * Stacked cards collapse to show only bottom edge with number.
22
18
  */
23
- const StackedCards = function StackedCards(props) {
19
+ const StackedCards = (props) => {
24
20
  return _jsx(StackedCardsContent, { ...props });
25
21
  };
26
22
  export default StackedCards;
@@ -1,8 +1,9 @@
1
1
  /**
2
- * @fileoverview Stacked Cards Content Component
3
- * @description Animated cards stacking (like a deck where you'd only see the number of the bottom card) component that reveals progressively as the user scrolls
2
+ * @fileoverview Stacked Cards Component
3
+ * @description Simple stacked cards with scroll-reveal. Active card shows full content,
4
+ * stacked cards show only bottom edge with number.
4
5
  *
5
- * @version 0.0.1
6
+ * @version 0.0.2
6
7
  * @since 0.0.1
7
8
  * @author AMBROISE PARK Consulting
8
9
  */
@@ -10,176 +11,41 @@ import { type ComponentType, type CSSProperties } from 'react';
10
11
  import type { ComponentData } from '@donotdev/components';
11
12
  import type { SurfaceVariantProps } from '@donotdev/components';
12
13
  /**
13
- * Responsive height array: [mobile, desktop]
14
- * Mobile (< 1024px) stacks vertically, needs more height (~2x)
15
- * Desktop (>= 1024px) uses horizontal grid, needs less height
16
- * @example [400, 200] - 400px on mobile/tablet, 200px on desktop
17
- */
18
- export type ResponsiveHeight = [number, number];
19
- /**
20
- * Enhanced StackedCard extends ComponentData with height control options
21
- *
22
- * @version 0.0.1
23
- * @since 0.0.1
24
- * @author AMBROISE PARK Consulting
14
+ * Card data for StackedCards
25
15
  */
26
16
  export type StackedCardData = ComponentData & {
27
- /**
28
- * Height hint for consistent card stacking.
29
- *
30
- * - `small`: 16rem (~256px) - Good for 1-3 content items
31
- * - `medium`: 20rem (~320px) - Default, good for 4-6 content items
32
- * - `large`: 28rem (~448px) - Good for 7+ content items
33
- *
34
- * @default 'medium'
35
- * @example
36
- * ```tsx
37
- * const items: StackedCardData[] = [
38
- * {
39
- * title: "Quick Setup",
40
- * content: ["Fast", "Simple", "Done"],
41
- * estimatedHeight: 'small'
42
- * }
43
- * ];
44
- * ```
45
- */
46
- estimatedHeight?: 'small' | 'medium' | 'large';
47
- /**
48
- * Custom height override in pixels - fixed or responsive.
49
- * Use when you need exact control over card height.
50
- * Overrides estimatedHeight when provided.
51
- *
52
- * - number: Fixed height for all breakpoints
53
- * - [mobile, desktop]: Responsive heights (mobile needs ~2x desktop since it stacks vertically)
54
- *
55
- * @example
56
- * ```tsx
57
- * // Fixed height
58
- * const items: StackedCardData[] = [
59
- * {
60
- * title: "Custom Card",
61
- * content: ["Precisely sized content"],
62
- * customHeight: 400 // Exactly 400px on all breakpoints
63
- * }
64
- * ];
65
- *
66
- * // Responsive height
67
- * const responsiveItems: StackedCardData[] = [
68
- * {
69
- * title: "Responsive Card",
70
- * content: ["More content on mobile"],
71
- * customHeight: [400, 200] // 400px mobile, 200px desktop
72
- * }
73
- * ];
74
- * ```
75
- */
76
- customHeight?: number | ResponsiveHeight;
77
- /**
78
- * Optional custom number/label to display (e.g. "01", "Week 1", etc)
79
- * If not provided, defaults to auto-incrementing index (01, 02, etc)
80
- */
17
+ /** Custom number/label (e.g. "01", "Week 1"). Defaults to index. */
81
18
  number?: string | number;
82
19
  };
20
+ /** Kept for backwards compatibility */
21
+ export type ResponsiveHeight = [number, number];
83
22
  /**
84
- * StackedCards component props
85
- *
86
- * @version 0.0.1
87
- * @since 0.0.1
88
- * @author AMBROISE PARK Consulting
23
+ * StackedCards props
89
24
  */
90
25
  export type StackedCardsProps = {
91
- /** Array of items to display as stacked cards */
92
26
  items: StackedCardData[];
93
- /**
94
- * Card variant styling
95
- */
96
27
  variant?: SurfaceVariantProps['variant'];
97
- /** Optional aria-label for the list */
98
28
  ariaLabel?: string;
99
- /**
100
- * Intersection threshold for revealing next card (0.0 - 1.0)
101
- * - 0.0 = reveals when any part is visible
102
- * - 0.5 = reveals when 50% visible (default)
103
- * - 1.0 = reveals when 100% visible (full card must be in view)
104
- * @default 0.5
105
- */
29
+ /** Intersection threshold for reveal (0.0 - 1.0) @default 0.3 */
106
30
  threshold?: number;
107
31
  className?: string;
108
32
  style?: CSSProperties;
109
33
  };
110
34
  /**
111
- * StackedCardsContent Component - Animated waterfall card stacking
35
+ * StackedCards - Simple scroll-reveal stacked cards
112
36
  *
113
- * Creates a stack of cards that reveal progressively as the user scrolls.
114
- * Cards maintain consistent heights for perfect visual stacking.
37
+ * Active card renders at full height. Stacked cards show only bottom edge with number.
38
+ * No height calculations - content determines size.
115
39
  *
116
- * @example Basic Usage
40
+ * @example
117
41
  * ```tsx
118
- * const items: StackedCardData[] = [
119
- * {
120
- * icon: Zap,
121
- * title: "Fast Setup",
122
- * subtitle: "Get started in minutes",
123
- * description: "Simple configuration process",
124
- * content: ["Install package", "Configure settings", "Start building"]
125
- * },
126
- * {
127
- * icon: Shield,
128
- * title: "Secure by Default",
129
- * subtitle: "Built-in security",
130
- * content: ["Encrypted data", "Secure authentication", "Privacy controls"],
131
- * estimatedHeight: 'small'
132
- * }
133
- * ];
134
- *
135
- * <StackedCards items={items} variant="static" />
136
- * ```
137
- *
138
- * @example Clickable Cards
139
- * ```tsx
140
- * const clickableItems: StackedCardData[] = [
141
- * {
142
- * icon: Database,
143
- * title: "User Management",
144
- * subtitle: "Manage your users",
145
- * content: ["User profiles", "Role management", "Access control"],
146
- * href: "/users" // Makes the card clickable
147
- * }
148
- * ];
149
- *
150
- * // Cards as clickable links
151
- * <StackedCards
152
- * items={clickableItems}
153
- * asChild
154
- * variant="interactive"
155
- * />
156
- *
157
- * // Or with custom click handlers
158
42
  * <StackedCards
159
- * items={clickableItems}
160
- * variant="interactive"
161
- * onClick={(e) => console.log('Card clicked!')}
43
+ * items={[
44
+ * { icon: Zap, title: "Fast", content: ["Quick setup", "Easy config"] },
45
+ * { icon: Shield, title: "Secure", content: ["Encrypted", "Private"] },
46
+ * ]}
162
47
  * />
163
48
  * ```
164
- *
165
- * @example With Custom Heights
166
- * ```tsx
167
- * const customItems: StackedCardData[] = [
168
- * {
169
- * title: "Detailed Analysis",
170
- * content: [
171
- * "Comprehensive reporting",
172
- * "Advanced analytics",
173
- * "Custom dashboards",
174
- * "Real-time monitoring",
175
- * "Data visualization",
176
- * "Export capabilities",
177
- * "API integration"
178
- * ],
179
- * customHeight: 500 // Exact pixel control
180
- * }
181
- * ];
182
- * ```
183
49
  */
184
50
  declare const StackedCardsContent: ComponentType<StackedCardsProps>;
185
51
  export default StackedCardsContent;
@@ -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;AAef,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAkChE;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C;;;;;;;;;;;;;;;;;;OAkBG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC;IAEzC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iDAAiD;IACjD,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,QAAA,MAAM,mBAAmB,EAAE,aAAa,CAAC,iBAAiB,CAkEzD,CAAC;AAkIF,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"StackedCardsContent.d.ts","sourceRoot":"","sources":["../../../src/components/StackedCards/StackedCardsContent.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAc/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,mBAAmB,EAAE,aAAa,CAAC,iBAAiB,CAyBzD,CAAC;AA0EF,eAAe,mBAAmB,CAAC"}
@@ -1,175 +1,44 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  // packages/adv-comps/src/components/StackedCards/StackedCardsContent.tsx
3
3
  /**
4
- * @fileoverview Stacked Cards Content Component
5
- * @description Animated cards stacking (like a deck where you'd only see the number of the bottom card) component that reveals progressively as the user scrolls
4
+ * @fileoverview Stacked Cards Component
5
+ * @description Simple stacked cards with scroll-reveal. Active card shows full content,
6
+ * stacked cards show only bottom edge with number.
6
7
  *
7
- * @version 0.0.1
8
+ * @version 0.0.2
8
9
  * @since 0.0.1
9
10
  * @author AMBROISE PARK Consulting
10
11
  */
11
- import { memo, useEffect, useRef, useState, } from 'react';
12
+ import {} from 'react';
12
13
  import { cn, Button, Separator, SEPARATOR_VARIANT, Text, useIntersectionObserver, getVariantDataAttrs, surfaceVariants, renderCardHeader, renderCardContent, } from '@donotdev/components';
13
- import { useBreakpoint } from '@donotdev/core';
14
14
  /**
15
- * Stacked Cards Animation Configuration
15
+ * StackedCards - Simple scroll-reveal stacked cards
16
16
  *
17
- * Controls scroll position where cards unstack/reveal
18
- * All values are scroll distance/position, not time-based
19
- */
20
- const STACKED_CARDS_CONFIG = {
21
- /**
22
- * Intersection Observer threshold
23
- * Range: 0.0 to 1.0 (percentage of card height)
24
- * - 0.0 = triggers when card first enters viewport (any pixel visible)
25
- * - 0.5 = triggers when 50% of card height is visible
26
- * - 1.0 = triggers when 100% of card height is visible
27
- *
28
- * TO REQUIRE MORE SCROLL: Increase this value (0.3 → 0.5 → 0.7)
29
- */
30
- intersectionThreshold: 0.5,
31
- /**
32
- * Intersection Observer root margin (bottom)
33
- * Format: 'top right bottom left'
34
- * Negative values shrink detection area, requiring more scroll distance
35
- *
36
- * TO REQUIRE MORE SCROLL: Make bottom value more negative
37
- * '-20%' → '-30%' → '-40%' (more negative = more scroll needed)
38
- */
39
- intersectionRootMargin: '0px 0px -20% 0px',
40
- // Removed viewportTopThreshold and viewportBottomThreshold
41
- // IntersectionObserver handles all visibility detection (more performant, single source of truth)
42
- };
43
- /**
44
- * StackedCardsContent Component - Animated waterfall card stacking
45
- *
46
- * Creates a stack of cards that reveal progressively as the user scrolls.
47
- * Cards maintain consistent heights for perfect visual stacking.
48
- *
49
- * @example Basic Usage
50
- * ```tsx
51
- * const items: StackedCardData[] = [
52
- * {
53
- * icon: Zap,
54
- * title: "Fast Setup",
55
- * subtitle: "Get started in minutes",
56
- * description: "Simple configuration process",
57
- * content: ["Install package", "Configure settings", "Start building"]
58
- * },
59
- * {
60
- * icon: Shield,
61
- * title: "Secure by Default",
62
- * subtitle: "Built-in security",
63
- * content: ["Encrypted data", "Secure authentication", "Privacy controls"],
64
- * estimatedHeight: 'small'
65
- * }
66
- * ];
67
- *
68
- * <StackedCards items={items} variant="static" />
69
- * ```
17
+ * Active card renders at full height. Stacked cards show only bottom edge with number.
18
+ * No height calculations - content determines size.
70
19
  *
71
- * @example Clickable Cards
20
+ * @example
72
21
  * ```tsx
73
- * const clickableItems: StackedCardData[] = [
74
- * {
75
- * icon: Database,
76
- * title: "User Management",
77
- * subtitle: "Manage your users",
78
- * content: ["User profiles", "Role management", "Access control"],
79
- * href: "/users" // Makes the card clickable
80
- * }
81
- * ];
82
- *
83
- * // Cards as clickable links
84
- * <StackedCards
85
- * items={clickableItems}
86
- * asChild
87
- * variant="interactive"
88
- * />
89
- *
90
- * // Or with custom click handlers
91
22
  * <StackedCards
92
- * items={clickableItems}
93
- * variant="interactive"
94
- * onClick={(e) => console.log('Card clicked!')}
23
+ * items={[
24
+ * { icon: Zap, title: "Fast", content: ["Quick setup", "Easy config"] },
25
+ * { icon: Shield, title: "Secure", content: ["Encrypted", "Private"] },
26
+ * ]}
95
27
  * />
96
28
  * ```
97
- *
98
- * @example With Custom Heights
99
- * ```tsx
100
- * const customItems: StackedCardData[] = [
101
- * {
102
- * title: "Detailed Analysis",
103
- * content: [
104
- * "Comprehensive reporting",
105
- * "Advanced analytics",
106
- * "Custom dashboards",
107
- * "Real-time monitoring",
108
- * "Data visualization",
109
- * "Export capabilities",
110
- * "API integration"
111
- * ],
112
- * customHeight: 500 // Exact pixel control
113
- * }
114
- * ];
115
- * ```
116
29
  */
117
- const StackedCardsContent = ({ items, className, ariaLabel, variant, style, threshold = STACKED_CARDS_CONFIG.intersectionThreshold, }) => {
118
- const [entered, setEntered] = useState(0);
119
- const containerRef = useRef(null);
120
- const isDesktop = useBreakpoint('isLaptopOrDesktop');
121
- // Calculate maximum height from all items to ensure all cards have the same height
122
- // Handles both fixed (number) and responsive ([mobile, desktop]) customHeight values
123
- const hasCustomHeight = items.some((item) => item.customHeight);
124
- const maxCustomHeight = hasCustomHeight
125
- ? Math.max(...items
126
- .map((item) => {
127
- if (!item.customHeight)
128
- return 0;
129
- // If responsive array, use desktop value (index 1) when on desktop, mobile (index 0) otherwise
130
- if (Array.isArray(item.customHeight)) {
131
- return isDesktop ? item.customHeight[1] : item.customHeight[0];
132
- }
133
- // Fixed number applies to all breakpoints
134
- return item.customHeight;
135
- })
136
- .filter((h) => h > 0))
137
- : null;
138
- // Find the maximum estimatedHeight enum value (for CSS to handle responsive sizing)
139
- const heightOrder = { small: 1, medium: 2, large: 3 };
140
- const maxEstimatedHeight = items.reduce((max, item) => {
141
- const current = item.estimatedHeight || 'medium';
142
- const currentOrder = heightOrder[current] || 2;
143
- const maxOrder = heightOrder[max] || 2;
144
- return currentOrder > maxOrder ? current : max;
145
- }, 'medium');
146
- return (_jsx("div", { className: cn('dndev-relative dndev-stacked-cards-container', className), ref: containerRef, "aria-label": ariaLabel, style: { ['--e']: entered.toString() }, children: items.map((item, index) => (_jsx(StackedCardsItem, { item: item, index: index, entered: entered, onEnter: () => setEntered(index), totalItems: items.length, cardProps: { variant, style }, maxEstimatedHeight: maxEstimatedHeight, maxCustomHeight: maxCustomHeight, threshold: threshold }, index))) }));
30
+ const StackedCardsContent = ({ items, className, ariaLabel, variant, style, threshold = 0.3, }) => {
31
+ return (_jsx("div", { className: cn('dndev-stacked-cards-container', className), "aria-label": ariaLabel, style: style, children: items.map((item, index) => (_jsx(StackItem, { item: item, index: index, variant: variant, threshold: threshold }, index))) }));
147
32
  };
148
- // Individual stacked card item with working logic matching the CSS
149
- const StackedCardsItem = ({ item, index, entered, onEnter, totalItems, cardProps, maxEstimatedHeight, maxCustomHeight, threshold, }) => {
33
+ /** Individual stack item */
34
+ const StackItem = ({ item, index, variant, threshold }) => {
150
35
  const { ref, isIntersecting } = useIntersectionObserver({
151
36
  threshold,
152
- rootMargin: STACKED_CARDS_CONFIG.intersectionRootMargin,
37
+ rootMargin: '0px 0px -20% 0px',
38
+ once: true,
153
39
  });
154
- useEffect(() => {
155
- if (typeof window !== 'undefined' && isIntersecting) {
156
- onEnter();
157
- }
158
- }, [isIntersecting, onEnter]);
159
40
  const header = renderCardHeader(item.icon, item.title, item.subtitle);
160
41
  const contentNode = renderCardContent(item.content);
161
- const hasContent = !!contentNode;
162
- return (_jsx("section", { ref: ref, className: "dndev-relative", style: {
163
- zIndex: totalItems - index - 1,
164
- }, children: _jsx("div", { className: cn('dndev-relative dndev-overflow-hidden stack', 'dndev-min-w-0'), "data-size": maxCustomHeight ? undefined : maxEstimatedHeight, "data-stacked": index > entered ? 'true' : 'false', style: {
165
- ['--i']: index.toString(),
166
- // Use maxCustomHeight for all cards if available, otherwise CSS handles via data-size
167
- ...(maxCustomHeight && {
168
- ['--dynamic-height']: `${maxCustomHeight}px`,
169
- }),
170
- ...cardProps.style,
171
- }, children: _jsxs("div", { className: cn('dndev-card', surfaceVariants({ variant: cardProps.variant }), 'dndev-relative dndev-overflow-hidden dndev-h-full'), ...getVariantDataAttrs({ variant: cardProps.variant }), "data-role": "card", "data-clickable": item.onClick ? 'true' : undefined, onClick: item.onClick, style: cardProps.style, children: [_jsxs("div", { className: "stack-content", children: [_jsxs("div", { className: "dndev-stacked-cards-body", children: [_jsxs("div", { className: "dndev-stacked-cards-left", children: [header, item.description && (_jsx(Text, { as: "p", level: "small", variant: "muted", children: item.description }))] }), _jsx(Separator, { orientation: "vertical", variant: SEPARATOR_VARIANT.ACCENT, className: "dndev-stacked-cards-separator" }), hasContent && (_jsx("div", { className: "dndev-stacked-cards-right", children: contentNode }))] }), item.cta && (_jsx("div", { className: "dndev-stacked-cards-cta", children: _jsx(Button, { onClick: item.onClick, variant: item.cta.variant || 'primary', icon: item.cta.icon, children: item.cta.text }) })), _jsx("div", { className: "dndev-stacked-cards-spacer" })] }), _jsx("div", { className: "dndev-stacked-cards-number", children: item.number
172
- ? String(item.number)
173
- : String(index + 1).padStart(2, '0') })] }) }) }));
42
+ return (_jsx("section", { ref: ref, className: "dndev-stack-item", "data-stacked": isIntersecting ? 'false' : 'true', children: _jsxs("div", { className: cn('dndev-card', surfaceVariants({ variant })), ...getVariantDataAttrs({ variant }), "data-role": "card", "data-clickable": item.onClick ? 'true' : undefined, onClick: item.onClick, children: [_jsxs("div", { className: "dndev-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" }), contentNode && (_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-stack-number", children: item.number ?? String(index + 1).padStart(2, '0') })] }) }));
174
43
  };
175
44
  export default StackedCardsContent;
@@ -1,3 +1,4 @@
1
1
  import './StackedCards.css';
2
2
  export { default } from './StackedCards';
3
+ export type { StackedCardsProps, StackedCardData, ResponsiveHeight, } from './StackedCardsContent';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StackedCards/index.ts"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StackedCards/index.ts"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EACV,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,MAAM,uBAAuB,CAAC"}
package/dist/index.css CHANGED
@@ -1 +1 @@
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}
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}}.dndev-stacked-cards-container{display:flex;flex-direction:column;width:100%;max-width:min(100%,var(--content-width, 60rem));margin-inline:auto;position:relative}.dndev-stack-item{width:100%;position:relative;transition:max-height var(--dur-heavy) var(--ease-heavy);overflow:hidden;&[data-stacked=false]{max-height:none}&[data-stacked=true]{max-height:3.5rem}@media(prefers-reduced-motion:reduce){transition:none}}.dndev-stack-item[data-stacked=true] .dndev-stack-content{opacity:0;pointer-events:none}.dndev-stack-content{display:flex;flex-direction:column;gap:var(--gap-sm);padding-bottom:3.5rem;transition:opacity var(--dur-normal) var(--ease-in-out)}.dndev-stack-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}.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}}.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}.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%}.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))}}.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
@@ -11,6 +11,7 @@ export type { CrawlProps } from './components/Crawl/Crawl';
11
11
  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
+ export type { StackedCardsProps, StackedCardData, ResponsiveHeight, } from './components/StackedCards';
14
15
  export { default as Reveal } from './components/Reveal';
15
16
  export { default as Roadmap } from './components/Roadmap';
16
17
  export type { RoadmapProps, RoadmapStep } from './components/Roadmap';
@@ -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;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"}
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,YAAY,EACV,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,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 ir=Object.defineProperty;var ce=(e,t)=>()=>(e&&(t=e(e=0)),t);var he=(e,t)=>{for(var r in t)ir(e,r,{get:t[r],enumerable:!0})};import{createElement as be}from"react";function me(e,t={}){let{allowedTags:r=["p","br","u","i","em","strong","b"],preserveLineBreaks:o=!0,className:n}=t;if(!e||typeof e!="string")return[];let i=e;o&&(i=i.replace(/\n/g,"<br/>"));let d=i.split(/(<[^>]+>)/),l=[],u=0;for(let c=0;c<d.length;c++){let m=d[c];if(!m)continue;let s=m.match(/^<(\w+)(?:\s[^>]*)?\s*\/>$/);if(s&&s[1]){let y=s[1].toLowerCase();if(r.includes(y)){let b=dt(y,"",n,u++);b&&l.push(b);continue}}let g=m.match(/^<(\w+)(?:\s[^>]*)?>$/);if(g&&g[1]){let y=g[1].toLowerCase();if(r.includes(y)){let b=`</${y}>`,f="",v=c+1;for(;v<d.length&&d[v]&&!d[v].includes(b);)f+=d[v],v++;v<d.length&&d[v]&&(f+=d[v].replace(b,""));let C=dt(y,f,n,u++);C&&l.push(C),c=v;continue}}m&&!m.startsWith("<")&&l.push(m)}return l}function dt(e,t,r,o){let n={key:o};switch(r&&(n.className=r),e){case"p":return be("p",n,t);case"br":return be("br",n);case"u":return be("u",n,t);case"i":case"em":return be("em",n,t);case"strong":case"b":return be("strong",n,t);default:return t}}var qe=ce(()=>{"use strict"});var lt={};he(lt,{default:()=>ur});import{useEffect as sr,useRef as dr,useState as lr,useMemo as We,isValidElement as cr}from"react";import{isClient as mr}from"@donotdev/core";import{Fragment as vr,jsx as G,jsxs as Be}from"react/jsx-runtime";var pr,ur,ct=ce(()=>{"use strict";qe();pr=({content:e,title:t,duration:r=26,contentHeight:o="150vh",tiltAngle:n,onPause:i,onResume:d})=>{let l=dr(null),[u,c]=lr(!1),m=f=>!f||typeof f!="string"?null:f.split(/\n\s*\n/).map(C=>C.trim()).filter(C=>C.length>0).map((C,k)=>G("p",{children:me(C,{allowedTags:["u","br","i","em","strong","b"]})},`p-${k}`)),s=We(()=>t?typeof t=="string"?G("h2",{className:"dndev-crawl-title",children:me(t,{allowedTags:["u","br","i","em","strong","b"]})}):t:null,[t]),g=We(()=>cr(e)?e:Array.isArray(e)?e.map(v=>typeof v=="string"?v.trim():"").filter(v=>v&&v.length>0).map((v,C)=>G("p",{children:me(v,{allowedTags:["u","br","i","em","strong","b"]})},`c-${C}`)):typeof e=="string"?m(e):e,[e]),y=We(()=>{let f={"--crawl-content-height":o,animationName:"dndev-crawl-animation",animationDuration:`${r}s`,animationTimingFunction:"linear",animationIterationCount:"infinite",animationFillMode:"forwards",animationPlayState:u?"paused":"running"};return n!==void 0&&(f["--crawl-tilt"]=`${n}deg`),f},[u,r,o,n]);sr(()=>{if(!mr()||!l.current)return;let f=window.matchMedia("(prefers-reduced-motion: reduce)"),v=()=>{f.matches&&l.current&&l.current.classList.add("dndev-crawl-reduced-motion")};return v(),f.addEventListener("change",v),()=>f.removeEventListener("change",v)},[]);let b=()=>{u?(c(!1),d?.()):(c(!0),i?.())};return Be(vr,{children:[G("div",{className:"dndev-crawl-3d-container",onClick:b,children:G("div",{ref:l,className:"dndev-crawl-text",style:{...y,willChange:u?"auto":"transform"},children:Be("div",{className:"dndev-crawl-content",children:[s,g]})})}),u&&G("div",{className:"dndev-absolute dndev-inset-0 dndev-flex dndev-items-center dndev-justify-center",style:{zIndex:30,backgroundColor:"rgba(0, 0, 0, 0.3)",backdropFilter:"blur(2px)"},onClick:b,children:G("button",{style:{width:"96px",height:"96px",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(255, 255, 255, 0.2)",border:"4px solid rgba(255, 255, 255, 0.4)",backdropFilter:"blur(4px)",cursor:"pointer",transition:"all var(--dur-normal) var(--ease-in-out)"},"aria-label":"Resume animation",children:G("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"white",children:G("path",{d:"M6 4h4v16H6V4zm8 0h4v16h-4V4z"})})})}),Be("div",{className:"dndev-crawl-stars",children:[G("div",{className:"dndev-crawl-stars-layer-1"}),G("div",{className:"dndev-crawl-stars-layer-2"}),G("div",{className:"dndev-crawl-stars-layer-3"})]})]})},ur=pr});var ft={};he(ft,{default:()=>Ir});import{useRef as Tr,useState as Te,useEffect as vt}from"react";import{cn as Fe,GAP_VARIANT as Rr,Stack as Mr}from"@donotdev/components";import{observeElement as Pr,addEventListener as Er}from"@donotdev/components";import{jsx as Re}from"react/jsx-runtime";function Ar({items:e,renderItem:t,className:r,itemClassName:o,gap:n=Rr.MEDIUM,speed:i=48,direction:d="auto",pauseOnHover:l=!0,ariaLabel:u,reducedMotion:c="respect",behavior:m="auto",pauseOnFocusWithin:s=!0,easing:g="ease-in-out"}){let y=typeof document<"u"&&document.dir==="rtl",b=typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1,f=d;d==="auto"&&(f=y?"right":"left");let v=f==="up"||f==="down",C=c==="ignore"||!b,k=m;m==="auto"&&(k=e.length<=20?"bounce":"infinite");let N=Tr(null),[X,F]=Te(8e3),[te,j]=Te(0),[Y,S]=Te(!0),[Ce,U]=Te(!1);vt(()=>N.current?Pr(N.current,A=>S(A.isIntersecting),{threshold:0}):void 0,[]),vt(()=>{if(!N.current||typeof window>"u"||!C)return;let $=N.current,A=$.querySelector("[data-marquee-track]");if(!A)return;let ve=()=>{let K=v?$.clientHeight:$.clientWidth,re=v?A.scrollHeight:A.scrollWidth,_=Math.max(0,re-K);if(U(_>0),_>0){let ge=Math.min(512,Math.max(12,i));if(k==="bounce"){let de=_*2/ge*1e3;F(Math.max(2e3,Math.floor(de))),j(_)}else{let de=(re+gt[n])/ge*1e3;F(Math.max(2e3,Math.floor(de))),j(re+gt[n])}}else F(0),j(0)};if(requestAnimationFrame(ve),typeof ResizeObserver<"u"){let K=new ResizeObserver(()=>{requestAnimationFrame(ve)});return K.observe($),()=>K.disconnect()}else return Er(window,"resize",()=>requestAnimationFrame(ve))},[e,i,v,C,k,n]);let xe=()=>v?f==="up"?"normal":"reverse":f==="left"?"normal":"reverse",ke=()=>k==="infinite"&&Ce?[...e,...e].map(($,A)=>Re("div",{className:Fe("dndev-flex-shrink-0",o),children:t($,A%e.length)},A)):e.map(($,A)=>Re("div",{className:Fe("dndev-flex-shrink-0",o),children:t($,A)},A));return Re("div",{ref:N,className:Fe("dndev-relative dndev-overflow-hidden",l&&"group",s&&"focus-within:group",r),role:"region","aria-label":u||`${k==="infinite"?"Scrolling":"Bouncing"} content with ${e.length} items`,"aria-live":C&&Y?"off":"polite",children:Re(Mr,{className:"marquee-track",direction:v?"column":"row",align:v?void 0:"center",gap:n,"data-marquee-track":!0,"data-marquee-direction":v?"vertical":"horizontal","data-marquee-behavior":k,"data-marquee-reduced-motion":!C,style:{"--marquee-duration":C&&Y&&Ce?`${X}ms`:"0ms","--marquee-direction":xe(),"--marquee-distance":v?`${te}px`:`${te}px`,"--marquee-easing":zr[g],animationPlayState:!C||!Y?"paused":"running"},children:ke()})})}var gt,zr,Ir,ht=ce(()=>{"use strict";gt={none:0,tight:8,medium:16,large:32},zr={linear:"linear","ease-in-out":"ease-in-out","ease-out":"ease-out"};Ir=Ar});var Lt={};he(Lt,{default:()=>qa});import{ChevronLeft as za,ChevronRight as Aa,Play as Ia,Pause as Da}from"lucide-react";import{useRef as Ke,useState as oe,useEffect as Qe,useCallback as z,useMemo as Je,memo as La}from"react";import{cn as Ae,observeElement as $a,addEventListener as Ha,isRTLLanguage as Ga,Stack as Oa}from"@donotdev/components";import{Fragment as Wa,jsx as E,jsxs as je}from"react/jsx-runtime";function Xa({items:e,renderItem:t,className:r,slideClassName:o,showArrows:n=!0,showDots:i=!1,showProgress:d=!0,autoplay:l=!0,autoplayInterval:u=5e3,transition:c="slide",infinite:m=!0,slidesToShow:s=1,swipeable:g=!0,momentum:y=!0,onActiveChange:b,onSlideClick:f,keyExtractor:v,"aria-label":C="Premium carousel",pauseOnHover:k=!0,pauseOnInvisible:N=!0,showPlayPause:X=!0,lazy:F=!1,preloadDistance:te=1}){if(!e||e.length===0)return E(Oa,{align:"center",justify:"center",className:Ae("dndev-relative",r),children:E("div",{style:{color:"var(--muted-foreground)"},children:"No items to display"})});let j=Ke(null),Y=Ke(null),[S,Ce]=oe(0),[U,xe]=oe(l),[ke,$]=oe(!1),[A,ve]=oe(!0),[I,K]=oe({isDragging:!1,startX:0,currentX:0,startTime:0,velocity:0}),re=Ke(null),[_,ge]=oe("idle"),[de,ot]=oe(!1);Qe(()=>{if(typeof window>"u")return;let a=window.matchMedia("(prefers-reduced-motion: reduce)");return ot(a.matches),Ha(a,"change",h=>{ot(h.matches)})},[]);let Se=Je(()=>({tension:.3,friction:.8,mass:1}),[]),Qt=Je(()=>{if(!m||e.length<=s)return e;let a=Math.max(s,2),p=e.slice(-a),h=e.slice(0,a);return[...p,...e,...h]},[e,m,s]),H=Je(()=>100/s,[s]),He=z(a=>{if(!m)return a;let p=Math.max(s,2);return((a-p)%e.length+e.length)%e.length},[m,e.length,s]),it=z(a=>{if(!m)return!0;let p=Math.max(s,2),h=e.length+p-1;return a>=p&&a<=h},[m,e.length,s]),Ge=z((a,p,h=0)=>{if(!y)return;let x=parseFloat(a.style.transform.replace("translateX(","").replace("%)",""))||0,R=h,W=Date.now(),B=()=>{let fe=(Date.now()-W)/1e3,Ne=x-p,ar=-Se.tension*Ne,nr=-Se.friction*R,or=(ar+nr)/Se.mass;R+=or*fe,x+=R*fe,a.style.transform=`translateX(${x}%)`,Math.abs(Ne)>.1||Math.abs(R)>.1?requestAnimationFrame(B):(a.style.transform=`translateX(${p}%)`,a.style.transition="none")};requestAnimationFrame(B)},[y,Se]),st=z((a,p,h)=>{switch(c){case"fade":a.style.transition=`opacity ${h} ease-in-out`,a.style.opacity="0",setTimeout(()=>{a.style.transform=`translateX(${p}%)`,a.style.opacity="1"},parseInt(h)/2);break;case"scale":a.style.transition=`transform ${h} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${p}%) scale(0.95)`,setTimeout(()=>{a.style.transform=`translateX(${p}%) scale(1)`},parseInt(h)/2);break;case"parallax":a.style.transition=`transform ${h} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${p}%)`,a.querySelectorAll('[role="group"]').forEach((R,W)=>{let B=R,D=(W-Math.abs(p)/H)*.1;B.style.transform=`translateX(${D}%)`});break;default:a.style.transition=`transform ${h} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${p}%)`;break}},[c,H]),q=z((a,p=!1)=>{if(_!=="idle"&&!p)return;let h=Y.current;if(!h)return;let x=a;if(m){let D=Math.max(s,2);x=a+D,a>=e.length?x=D+a%e.length:a<0&&(x=D+e.length+a)}let R=-(x*H),W=p||de?"0ms":"300ms";p||ge("transitioning"),st(h,R,W);let B=He(x);if(Ce(B),b?.(B),m&&!p&&it(x)){let D=Math.max(s,2);(x<=D-1||x>=e.length+D)&&(h.dataset.needsReset="true",h.dataset.resetIndex=x<=D-1?(e.length+D-1).toString():D.toString())}},[m,e.length,H,s,He,b,de,_,it,st]),Z=z(()=>{q(S+1)},[S,q]),le=z(()=>{q(S-1)},[S,q]),Oe=z(()=>{xe(!0)},[]),Xe=z(()=>{xe(!1)},[]);Qe(()=>{if(!(!U||ke||!A||e.length<=1))return re.current=setTimeout(()=>{Z()},u),()=>{re.current&&clearTimeout(re.current)}},[U,ke,A,S,Z,u,e.length]),Qe(()=>!N||!j.current?void 0:$a(j.current,p=>ve(p.isIntersecting),{threshold:.1}),[N]);let Jt=z(a=>F?Math.abs(a-S)<=te:!0,[F,S,te]),jt=z(a=>{if(!g||_!=="idle")return;let p=a.touches[0];p&&K({isDragging:!0,startX:p.clientX,currentX:p.clientX,startTime:Date.now(),velocity:0})},[g,_]),Zt=z(a=>{if(!I.isDragging)return;let p=a.touches[0];if(!p)return;let h=p.clientX-I.startX,x=Date.now()-I.startTime,R=x>0?h/x:0,W=Y.current;if(W&&Math.abs(h)>10){a.preventDefault();let B=-(S*H),D=h/(j.current?.clientWidth||1)*100,fe=Math.min(Math.abs(h)/200,.8),Ne=D*(1-fe);W.style.transition="none",W.style.transform=`translateX(${B+Ne}%)`}K(B=>({...B,currentX:p.clientX,velocity:R}))},[I.isDragging,I.startX,I.startTime,S,H]),er=z(()=>{if(!I.isDragging)return;let a=I.currentX-I.startX,p=I.velocity,h=50;if(y&&Math.abs(p)>.5){let x=Y.current;if(x){let R=p>0?S-1:S+1,W=-(R*H);Ge(x,W,p*100),q(R,!0)}}else if(Math.abs(a)>h)a>0?le():Z();else{let x=Y.current;if(x&&y){let R=-(S*H);Ge(x,R,p*100)}else q(S,!0)}K({isDragging:!1,startX:0,currentX:0,startTime:0,velocity:0})},[I,y,Z,le,q,S,Ge,H]),tr=z(()=>{ge("idle");let a=Y.current;if(a?.dataset.needsReset==="true"){let p=parseInt(a.dataset.resetIndex||"0");a.style.transition="none",a.style.transform=`translateX(-${p*H}%)`,delete a.dataset.needsReset,delete a.dataset.resetIndex}},[H]),rr=z(a=>{let p=Ga();switch(a.key){case"ArrowLeft":a.preventDefault(),p?Z():le();break;case"ArrowRight":a.preventDefault(),p?le():Z();break;case"Home":a.preventDefault(),q(0);break;case"End":a.preventDefault(),q(e.length-1);break;case" ":a.preventDefault(),U?Xe():Oe();break}},[Z,le,q,e.length,U,Oe,Xe]);return je("div",{ref:j,className:Ae("dndev-relative dndev-overflow-hidden",r),onMouseEnter:()=>k&&$(!0),onMouseLeave:()=>k&&$(!1),onKeyDown:rr,tabIndex:0,role:"region","aria-label":C,"aria-live":"polite",children:[E("div",{className:"dndev-overflow-hidden",children:E("div",{ref:Y,className:Ae("dndev-flex",I.isDragging&&"dndev-pointer-events-none",_==="transitioning"&&"dndev-pointer-events-none"),style:{cursor:I.isDragging?"grabbing":void 0},onTransitionEnd:tr,onTouchStart:jt,onTouchMove:Zt,onTouchEnd:er,children:Qt.map((a,p)=>{let h=He(p),x=h===S,R=Jt(h);return E("div",{className:Ae("dndev-flex-shrink-0",o),style:{width:`${H}%`,opacity:R?1:0},role:"group","aria-roledescription":"slide","aria-label":`Slide ${h+1} of ${e.length}`,onClick:()=>f?.(a,h),children:R&&t(a,h,x)},v?v(a,h):`${h}-${p}`)})})}),n&&e.length>1&&je(Wa,{children:[E("button",{className:"dndev-absolute dndev-z-breadcrumbs dndev-flex dndev-items-center dndev-justify-center",style:{left:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",opacity:0,transition:"opacity var(--dur-normal)",borderRadius:"9999px",backgroundColor:"rgb(from var(--background) r g b / 0.8)",border:"1px solid var(--border)"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.9)",a.currentTarget.style.opacity="1"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.8)"},onClick:le,"aria-label":"Previous slide",children:E(za,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})}),E("button",{className:"dndev-absolute dndev-z-breadcrumbs dndev-flex dndev-items-center dndev-justify-center",style:{right:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",opacity:0,transition:"opacity var(--dur-normal)",borderRadius:"9999px",backgroundColor:"rgb(from var(--background) r g b / 0.8)",border:"1px solid var(--border)"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.9)",a.currentTarget.style.opacity="1"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.8)"},onClick:Z,"aria-label":"Next slide",children:E(Aa,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})})]}),l&&X&&E("button",{className:"dndev-absolute dndev-z-breadcrumbs dndev-flex dndev-items-center dndev-justify-center",style:{insetBlockStart:"var(--gap-md)",insetInlineEnd:"var(--gap-md)",width:"2rem",height:"2rem",opacity:0,transition:"opacity var(--dur-normal)",borderRadius:"9999px",backgroundColor:"rgb(from var(--background) r g b / 0.8)",border:"1px solid var(--border)"},onMouseEnter:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.9)",a.currentTarget.style.opacity="1"},onMouseLeave:a=>{a.currentTarget.style.backgroundColor="rgb(from var(--background) r g b / 0.8)"},onClick:()=>U?Xe():Oe(),"aria-label":U?"Pause carousel":"Play carousel",children:U?E(Da,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}}):E(Ia,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})}),i&&e.length>1&&E("div",{className:"dndev-absolute dndev-flex dndev-gap-sm dndev-z-breadcrumbs",style:{bottom:"1rem",left:"50%",transform:"translateX(-50%)"},children:e.map((a,p)=>E("button",{style:{width:p===S?"1.5rem":"0.5rem",height:"0.5rem",borderRadius:"9999px",transition:"all 0.3s",backgroundColor:p===S?"var(--foreground)":"rgb(from var(--foreground) r g b / 0.3)"},onMouseEnter:h=>{p!==S&&(h.currentTarget.style.backgroundColor="rgb(from var(--foreground) r g b / 0.5)")},onMouseLeave:h=>{p!==S&&(h.currentTarget.style.backgroundColor="rgb(from var(--foreground) r g b / 0.3)")},onClick:()=>q(p),"aria-label":`Go to slide ${p+1}`},p))}),d&&l&&E("div",{className:"dndev-absolute dndev-left-0",style:{bottom:0,right:0,height:"0.25rem",backgroundColor:"rgb(from var(--foreground) r g b / 0.2)"},children:E("div",{style:{height:"100%",width:`${(S+1)/e.length*100}%`,backgroundColor:"var(--foreground)",transition:"width 0.1s linear"}})}),je("div",{className:"dndev-sr-only","aria-live":"polite","aria-atomic":"true",children:["Slide ",S+1," of ",e.length]})]})}var Dt,qa,$t=ce(()=>{"use strict";Dt=La(Xa);Dt.displayName="Carousel";qa=Dt});var Gt={};he(Gt,{default:()=>ja});import{memo as Ua}from"react";import{Card as Ka,Text as et}from"@donotdev/components";import{cn as Qa}from"@donotdev/components";import{Fragment as Za,jsx as we,jsxs as Ht}from"react/jsx-runtime";var Ja,ja,Ot=ce(()=>{"use strict";Ja=Ua(function({title:t,items:r,gridCols:o=2,className:n,ariaLabel:i}){let d={1:"grid-cols-1",2:"grid-cols-1 md:grid-cols-2",3:"grid-cols-1 md:grid-cols-2 lg:grid-cols-3",4:"grid-cols-1 md:grid-cols-2 lg:grid-cols-4"},l=Array.isArray(r)?r:[];return Array.isArray(r),Ht("div",{className:Qa("dndev-marketing-stack",n),"aria-label":i,children:[t&&we(et,{as:"h3",level:"h2",children:t}),we("div",{className:"dndev-marketing-dndev-grid","data-cols":o,children:l.map((u,c)=>we(Ka,{title:u.useCase,subtitle:u.bestFit,content:Ht(Za,{children:[we(et,{variant:"muted",level:"body",children:u.dndev}),we(et,{variant:"muted",level:"small",className:"italic",children:u.reason})]})},c))})]})}),ja=Ja});var Ut={};he(Ut,{default:()=>qn});import{memo as $e}from"react";import{cn as at,Card as zn,Icon as An,Stack as In}from"@donotdev/components";import{jsx as P,jsxs as ue}from"react/jsx-runtime";var se,Yt,Dn,_t,Ln,$n,Hn,Gn,On,Xn,qn,Kt=ce(()=>{"use strict";se={desktop:{cardWidth:300,cardHeight:200,cardGap:32,drop:80,startX:0,containerWidth:1024,containerHeight:380},mobile:{cardWidth:320,cardHeight:200,verticalGap:24,containerWidth:400,curveOffset:40}},Yt=$e(({className:e,density:t,onClick:r,icon:o,title:n,subtitle:i,description:d})=>ue(zn,{className:at("dndev-min-w-0",r?"cursor-pointer":"",e),style:{height:"200px",padding:"var(--gap-md)",transform:"scale(1)",transition:"transform var(--duration-normal)"},onMouseEnter:l=>{l.currentTarget.style.transform="scale(0.80)"},onMouseLeave:l=>{l.currentTarget.style.transform="scale(1)"},onClick:r,children:[ue(In,{direction:"row",align:"center",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[P(Dn,{icon:o}),P("h3",{style:{fontSize:"var(--font-size-lg)",fontWeight:600,lineHeight:1.25,color:"var(--foreground)"},children:n})]}),i&&P("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)",lineHeight:1.625,marginBottom:"var(--gap-md)"},children:i}),d&&P("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--accent)",transition:"color var(--duration-normal)",cursor:"pointer"},onMouseEnter:l=>{l.currentTarget.style.color="rgb(from var(--accent) r g b / 0.8)"},onMouseLeave:l=>{l.currentTarget.style.color="var(--accent)"},children:d})]})),Dn=$e(({icon:e})=>e?P("div",{className:"dndev-inline-flex dndev-flex-shrink-0 dndev-items-center dndev-justify-center",style:{width:"var(--touch-target)",height:"var(--touch-target)",borderRadius:"var(--radius-lg)",background:"linear-gradient(to bottom right, rgb(from var(--primary) r g b / 0.1), rgb(from var(--primary) r g b / 0.2))",color:"var(--primary)",transition:"background var(--duration-normal)"},onMouseEnter:t=>{t.currentTarget.style.background="linear-gradient(to bottom right, rgb(from var(--primary) r g b / 0.2), rgb(from var(--primary) r g b / 0.3))"},onMouseLeave:t=>{t.currentTarget.style.background="linear-gradient(to bottom right, rgb(from var(--primary) r g b / 0.1), rgb(from var(--primary) r g b / 0.2))"},children:P(An,{icon:e,ariaHidden:!0})}):null),_t=$e(function({className:t,startX:r,startY:o,endX:n,endY:i,index:d,isMobile:l=!1}){let u,c,m,s,g;if(l){let{curveOffset:y}=se.mobile,b=(o+i)/2,f=r+y;c=Math.abs(f-r)+40,m=Math.abs(i-o)+40,s=Math.min(r,f)-20,g=Math.min(o,i)-20;let v=r-s,C=o-g,k=n-s,N=i-g,X=f-s,F=b-g;u=`M ${v} ${C} Q ${X} ${F} ${k} ${N}`}else{let y=(r+n)/2,b=o+(i-o)*.3;c=Math.abs(n-r)+40,m=Math.abs(i-o)+40,s=Math.min(r,n)-20,g=Math.min(o,i)-20;let f=r-s,v=o-g,C=n-s,k=i-g,N=y-s,X=b-g;u=`M ${f} ${v} Q ${N} ${X-20} ${C} ${k}`}return ue("svg",{className:at(t),style:{left:s,top:g,width:c,height:m,zIndex:1},viewBox:`0 0 ${c} ${m}`,role:"img",focusable:"false",children:[P("path",{d:u,fill:"none",stroke:"currentColor",strokeWidth:"3",strokeDasharray:"8,8",className:"text-accent waterfall-connector",style:{animationDelay:`${d*.2}s`}}),P("circle",{cx:r-s,cy:o-g,r:"6",fill:"currentColor",className:"text-accent"}),P("circle",{cx:n-s,cy:i-g,r:"6",fill:"currentColor",className:"text-accent"})]})}),Ln=e=>{let{cardWidth:t,cardGap:r,drop:o,startX:n}=se.desktop;return{x:n+e*(t+r),y:e*o}},$n=e=>{let{cardHeight:t,verticalGap:r}=se.mobile;return{x:0,y:e*(t+r)}},Hn=e=>{let{cardWidth:t,cardGap:r,drop:o}=se.desktop;return e===0?{startX:t,startY:o/2,endX:t+r+t/2,endY:o}:e===1?{startX:2*t+r,startY:1.5*o,endX:2.5*t+2*r,endY:2*o}:null},Gn=e=>{let{cardWidth:t,cardHeight:r,verticalGap:o}=se.mobile;return e===0?{startX:t,startY:.66*r,endX:t,endY:1.33*r+o}:e===1?{startX:t,startY:1.66*r+o,endX:t,endY:2.33*r+2*o}:null},On=e=>{let{cardHeight:t,verticalGap:r}=se.mobile;return(e-1)*(t+r)+t+40},Xn=$e(({items:e,className:t,connectorClassName:r,density:o="comfortable",ariaLabel:n,direction:i="horizontal"})=>{if(!e?.length)return null;if(i==="descending"){let{desktop:l,mobile:u}=se;return ue("section",{className:at("dndev-w-full dndev-overflow-hidden",t),children:[ue("div",{className:"dndev-hidden dndev-relative ",style:{width:`${l.containerWidth}px`,height:`${l.containerHeight}px`},children:[P("ol",{className:"dndev-relative","aria-label":n??"Process steps",children:e.map((c,m)=>{let{x:s,y:g}=Ln(m);return P("li",{className:"list-none dndev-absolute waterfall-card",style:{left:`${s}px`,top:`${g}px`,width:`${l.cardWidth}px`},children:P(Yt,{density:o,onClick:c.onClick,icon:c.icon,title:c.title,subtitle:c.subtitle,description:c.description})},`cascade-${m}-${c.title}`)})}),e.map((c,m)=>{if(m>=e.length-1)return null;let s=Hn(m);return s?P(_t,{startX:s.startX,startY:s.startY,endX:s.endX,endY:s.endY,className:r,index:m,isMobile:!1},`desktop-connector-${m}`):null})]}),P("div",{className:" dndev-w-full px-[var(--content-padding)]",children:ue("div",{className:"dndev-relative dndev-mx-auto",style:{width:`${u.containerWidth}px`,height:`${On(e.length)}px`},children:[P("ol",{className:"dndev-relative","aria-label":n??"Process steps",children:e.map((c,m)=>{let{x:s,y:g}=$n(m);return P("li",{className:"list-none dndev-absolute",style:{left:`${s}px`,top:`${g}px`,width:`${u.cardWidth}px`},children:P(Yt,{density:o,onClick:c.onClick,icon:c.icon,title:c.title,subtitle:c.subtitle,description:c.description})},`mobile-${m}-${c.title}`)})}),e.map((c,m)=>{if(m>=e.length-1)return null;let s=Gn(m);return s?P(_t,{startX:s.startX,startY:s.startY,endX:s.endX,endY:s.endY,className:r,index:m,isMobile:!0},`mobile-connector-${m}`):null})]})})]})}return null}),qn=Xn});qe();import{useState as gr,useMemo as fr,lazy as hr,Suspense as br}from"react";import{cn as yr}from"@donotdev/components";import{jsx as ee,jsxs as mt}from"react/jsx-runtime";var wr=hr(()=>Promise.resolve().then(()=>(ct(),lt))),Cr=({content:e,intro:t,title:r,duration:o=26,contentHeight:n="150vh",tiltAngle:i,className:d,style:l,"aria-label":u})=>{let[c,m]=gr(!0),s=fr(()=>t==null?null:typeof t=="string"?ee("div",{className:"dndev-crawl-intro-text",children:me(t,{allowedTags:["u","br","i","em","strong","b"]})}):t,[t]),g=()=>{m(!1)};return mt("div",{className:yr("dndev-crawl-container","dndev-relative dndev-overflow-hidden",d),style:{...l,height:"calc(100dvh - var(--header-height))"},"aria-label":u||"Animated text crawl",role:"region","aria-live":"polite",children:[c&&mt("div",{className:"dndev-absolute dndev-inset-0 dndev-flex dndev-flex-col dndev-items-center dndev-justify-center",style:{zIndex:30,backgroundColor:"rgba(0, 0, 0, 0.6)",backdropFilter:"blur(4px)"},children:[s&&ee("div",{className:"dndev-w-full",style:{paddingInline:"var(--content-padding)",marginBottom:"3rem"},children:ee("div",{className:"dndev-crawl-intro-content",children:s})}),ee("button",{onClick:g,style:{width:"96px",height:"96px",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(255, 255, 255, 0.2)",border:"4px solid rgba(255, 255, 255, 0.4)",backdropFilter:"blur(4px)",cursor:"pointer",transition:"all var(--dur-normal) var(--ease-in-out)"},onMouseEnter:y=>{y.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.3)",y.currentTarget.style.borderColor="rgba(255, 255, 255, 0.6)",y.currentTarget.style.transform="scale(1.1)"},onMouseLeave:y=>{y.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.2)",y.currentTarget.style.borderColor="rgba(255, 255, 255, 0.4)",y.currentTarget.style.transform="scale(1)"},"aria-label":"Start animated introduction",children:ee("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"white",style:{marginInlineStart:"4px"},children:ee("path",{d:"M8 5v14l11-7z"})})})]}),!c&&ee(br,{fallback:null,children:ee(wr,{title:r,content:e,duration:o,contentHeight:n,tiltAngle:i})})]})},pt=Cr;import{Suspense as Dr,lazy as Lr}from"react";import{cn as xr,GAP_VARIANT as kr,Stack as Sr}from"@donotdev/components";import{jsx as Ve}from"react/jsx-runtime";function Nr({className:e,itemCount:t=8,itemWidth:r,gap:o=kr.MEDIUM,direction:n="horizontal"}){let i=n==="vertical";return Ve("div",{className:xr("dndev-relative dndev-overflow-hidden",e),role:"status","aria-label":"Loading content",children:Ve(Sr,{direction:i?"column":"row",align:i?void 0:"center",gap:o,children:Array.from({length:t*2}).map((d,l)=>Ve("div",{className:"dndev-flex-shrink-0 dndev-animate-pulse",style:i?{height:"4rem",width:"100%",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}:{height:"4rem",width:r||"4rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}},l))})})}var ut=Nr;import{GAP_VARIANT as Hr}from"@donotdev/components";import{jsx as Ye}from"react/jsx-runtime";var $r=Lr(()=>Promise.resolve().then(()=>(ht(),ft))),Gr=e=>{let{gap:t=Hr.MEDIUM,direction:r="auto",...o}=e;return Ye(Dr,{fallback:Ye(ut,{itemCount:8,gap:t,direction:r==="up"||r==="down"?"vertical":"horizontal"}),children:Ye($r,{...o})})},bt=Gr;import{Eye as Or}from"lucide-react";import{useState as Xr}from"react";import{PortalButton as qr,cn as yt,Sheet as Wr,Code as Br,Stack as Vr}from"@donotdev/components";import{Fragment as Yr,jsx as Me,jsxs as _r}from"react/jsx-runtime";function Fr({data:e,sourceCode:t,language:r="tsx",title:o="Page Source",className:n}){let[i,d]=Xr(!1),l=t||e||"",u=c=>{};return _r(Yr,{children:[Me(qr,{icon:Or,onClick:()=>d(!0),className:yt("dndev-z-overlay",n),style:{position:"fixed",zIndex:"var(--z-overlay)",right:"var(--gap-sm)",bottom:"calc(var(--footer-height, 0px) + var(--gap-sm))"},tooltip:"Code Inspector","aria-label":"Code Inspector"}),Me(Wr,{open:i,onOpenChange:d,side:"bottom",className:yt("dndev-w-full",n),style:{width:"100%",height:"90%",maxHeight:"90dvh",borderRadius:"var(--radius-xl) var(--radius-xl) 0 0",display:"flex",flexDirection:"column",overflow:"hidden"},children:Me(Vr,{gap:"none",style:{flex:"1 1 auto",minHeight:0,overflow:"hidden"},children:Me(Br,{language:r,showCopyButton:!0,onCopy:u,children:l})})})]})}var wt=Fr;import{useEffect as Ur,useRef as Kr,useState as Qr}from"react";import{cn as _e,Button as Jr,Separator as jr,SEPARATOR_VARIANT as Zr,Text as ea,useIntersectionObserver as ta,getVariantDataAttrs as ra,surfaceVariants as aa,renderCardHeader as na,renderCardContent as oa}from"@donotdev/components";import{useBreakpoint as ia}from"@donotdev/core";import{jsx as V,jsxs as Pe}from"react/jsx-runtime";var Ct={intersectionThreshold:.5,intersectionRootMargin:"0px 0px -20% 0px"},sa=({items:e,className:t,ariaLabel:r,variant:o,style:n,threshold:i=Ct.intersectionThreshold})=>{let[d,l]=Qr(0),u=Kr(null),c=ia("isLaptopOrDesktop"),s=e.some(b=>b.customHeight)?Math.max(...e.map(b=>b.customHeight?Array.isArray(b.customHeight)?c?b.customHeight[1]:b.customHeight[0]:b.customHeight:0).filter(b=>b>0)):null,g={small:1,medium:2,large:3},y=e.reduce((b,f)=>{let v=f.estimatedHeight||"medium",C=g[v]||2,k=g[b]||2;return C>k?v:b},"medium");return V("div",{className:_e("dndev-relative dndev-stacked-cards-container",t),ref:u,"aria-label":r,style:{"--e":d.toString()},children:e.map((b,f)=>V(da,{item:b,index:f,entered:d,onEnter:()=>l(f),totalItems:e.length,cardProps:{variant:o,style:n},maxEstimatedHeight:y,maxCustomHeight:s,threshold:i},f))})},da=({item:e,index:t,entered:r,onEnter:o,totalItems:n,cardProps:i,maxEstimatedHeight:d,maxCustomHeight:l,threshold:u})=>{let{ref:c,isIntersecting:m}=ta({threshold:u,rootMargin:Ct.intersectionRootMargin});Ur(()=>{typeof window<"u"&&m&&o()},[m,o]);let s=na(e.icon,e.title,e.subtitle),g=oa(e.content),y=!!g;return V("section",{ref:c,className:"dndev-relative",style:{zIndex:n-t-1},children:V("div",{className:_e("dndev-relative dndev-overflow-hidden stack","dndev-min-w-0"),"data-size":l?void 0:d,"data-stacked":t>r?"true":"false",style:{"--i":t.toString(),...l&&{"--dynamic-height":`${l}px`},...i.style},children:Pe("div",{className:_e("dndev-card",aa({variant:i.variant}),"dndev-relative dndev-overflow-hidden dndev-h-full"),...ra({variant:i.variant}),"data-role":"card","data-clickable":e.onClick?"true":void 0,onClick:e.onClick,style:i.style,children:[Pe("div",{className:"stack-content",children:[Pe("div",{className:"dndev-stacked-cards-body",children:[Pe("div",{className:"dndev-stacked-cards-left",children:[s,e.description&&V(ea,{as:"p",level:"small",variant:"muted",children:e.description})]}),V(jr,{orientation:"vertical",variant:Zr.ACCENT,className:"dndev-stacked-cards-separator"}),y&&V("div",{className:"dndev-stacked-cards-right",children:g})]}),e.cta&&V("div",{className:"dndev-stacked-cards-cta",children:V(Jr,{onClick:e.onClick,variant:e.cta.variant||"primary",icon:e.cta.icon,children:e.cta.text})}),V("div",{className:"dndev-stacked-cards-spacer"})]}),V("div",{className:"dndev-stacked-cards-number",children:e.number?String(e.number):String(t+1).padStart(2,"0")})]})})})},xt=sa;import{jsx as ca}from"react/jsx-runtime";var la=function(t){return ca(xt,{...t})},kt=la;import{useCallback as ma}from"react";import{cn as pa,useViewportVisibility as ua}from"@donotdev/components";import{jsx as St}from"react/jsx-runtime";var va=({items:e=[],direction:t="fade-in",stagger:r=100,threshold:o,distance:n,duration:i,once:d=!1,viewport:l=!0,overrides:u=[],className:c,children:m})=>{let{ref:s,isVisible:g,hasTriggered:y,visibleItems:b,isItemVisible:f}=ua({threshold:o,once:d,trackItems:l,enableScrollListener:l}),v=ma(k=>{let N=u.find(X=>X.index===k);if(N)return N.direction;switch(t){case"alternate-h":return k%2===0?"left":"right";case"alternate-v":return k%2===0?"top":"bottom";default:return t}},[t,u]),C=()=>e.map((k,N)=>{let X=v(N),F=N*r,te=l?f(N):g;return St("div",{className:"dndev-reveal-item","data-direction":X,"data-visible":te,style:{"--reveal-delay":`${F}ms`,"--reveal-index":N,...n!==void 0&&{"--reveal-distance":`${n}vw`},...i!==void 0&&{"--reveal-duration":`${i}ms`}},children:k},N)});return St("div",{ref:s,className:pa("dndev-reveal-container",g&&"dndev-reveal-visible",c),"data-direction":t,"data-stagger":r,children:e.length>0?C():m})},ye=va;import{useState as ga,useEffect as fa}from"react";import{cn as Nt,Card as Tt,renderCardContent as Rt,useIntersectionObserver as ha}from"@donotdev/components";import{useBreakpoint as ba}from"@donotdev/core";import{jsx as M,jsxs as ae}from"react/jsx-runtime";var ya=function({steps:t,className:r,variant:o}){let[n,i]=ga(0),d=ba("isLaptopOrDesktop"),l=t.length>1?n/(t.length-1)*100:0;return d?M("div",{className:Nt("dndev-roadmap",r),children:ae("div",{className:"dndev-roadmap-desktop",style:{"--step-count":t.length},children:[ae("div",{className:"dndev-roadmap-timeline",children:[M("div",{className:"dndev-roadmap-timeline-bg"}),M("div",{className:"dndev-roadmap-timeline-progress",style:{width:`${l}%`}})]}),M("div",{className:"dndev-roadmap-grid",style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((u,c)=>{let m=u.icon,s=c<=n,g=c===n;return ae("div",{className:"dndev-roadmap-step",onMouseEnter:()=>i(c),children:[M("div",{className:"dndev-roadmap-node","data-active":s,children:M(m,{})}),ae(Tt,{title:u.title,subtitle:u.subtitle,variant:o,className:"dndev-roadmap-card","data-active":g,footer:u.content?M("div",{className:"dndev-roadmap-content",children:Rt(u.content)}):void 0,children:[M("span",{className:"dndev-roadmap-phase",children:u.phase}),u.description&&M("p",{className:"dndev-roadmap-description",children:u.description})]})]},c)})})]})}):M("div",{className:Nt("dndev-roadmap",r),children:ae("div",{className:"dndev-roadmap-mobile",children:[M("div",{className:"dndev-roadmap-timeline-vertical",children:M("div",{className:"dndev-roadmap-timeline-vertical-progress",style:{height:`${l}%`}})}),t.map((u,c)=>M(wa,{step:u,index:c,isActive:c<=n,variant:o,onEnter:()=>i(c)},c))]})})},wa=({step:e,index:t,isActive:r,variant:o,onEnter:n})=>{let{ref:i,isIntersecting:d}=ha({threshold:.5,rootMargin:"0px 0px -20% 0px"});fa(()=>{typeof window<"u"&&d&&n()},[d,n]);let l=e.icon;return ae("div",{ref:i,className:"dndev-roadmap-step-mobile",children:[M("div",{className:"dndev-roadmap-node-mobile","data-active":r,children:M(l,{})}),ae(Tt,{title:e.title,subtitle:e.subtitle,variant:o,className:"dndev-roadmap-card-mobile","data-active":r,footer:e.content?M("div",{className:"dndev-roadmap-content",children:Rt(e.content)}):void 0,children:[M("span",{className:"dndev-roadmap-phase",children:e.phase}),e.description&&M("p",{className:"dndev-roadmap-description",children:e.description})]})]})},Mt=ya;import{jsx as xa}from"react/jsx-runtime";var Ca=function(t){return xa(Mt,{...t})},Pt=Ca;import{jsx as Ue,jsxs as Sa}from"react/jsx-runtime";function ka({status:e,animationClass:t}){return Ue("svg",{width:"100%",height:"100%",viewBox:"0 0 512 512",className:"drop--lg",preserveAspectRatio:"xMidYMid meet",children:Sa("g",{transform:"translate(0,512) scale(0.1,-0.1)",children:[Ue("path",{d:`M2465 4956 c-60 -28 -97 -66 -124 -126 -20 -44 -21 -63 -21 -630 0
1
+ "use client";var or=Object.defineProperty;var ce=(e,t)=>()=>(e&&(t=e(e=0)),t);var he=(e,t)=>{for(var r in t)or(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 s=i.split(/(<[^>]+>)/),d=[],u=0;for(let c=0;c<s.length;c++){let p=s[c];if(!p)continue;let l=p.match(/^<(\w+)(?:\s[^>]*)?\s*\/>$/);if(l&&l[1]){let b=l[1].toLowerCase();if(r.includes(b)){let k=st(b,"",n,u++);k&&d.push(k);continue}}let f=p.match(/^<(\w+)(?:\s[^>]*)?>$/);if(f&&f[1]){let b=f[1].toLowerCase();if(r.includes(b)){let k=`</${b}>`,h="",v=c+1;for(;v<s.length&&s[v]&&!s[v].includes(k);)h+=s[v],v++;v<s.length&&s[v]&&(h+=s[v].replace(k,""));let C=st(b,h,n,u++);C&&d.push(C),c=v;continue}}p&&!p.startsWith("<")&&d.push(p)}return d}function st(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 Oe=ce(()=>{"use strict"});var dt={};he(dt,{default:()=>pr});import{useEffect as ir,useRef as sr,useState as dr,useMemo as We,isValidElement as lr}from"react";import{isClient as cr}from"@donotdev/core";import{Fragment as ur,jsx as H,jsxs as Be}from"react/jsx-runtime";var mr,pr,lt=ce(()=>{"use strict";Oe();mr=({content:e,title:t,duration:r=26,contentHeight:o="150vh",tiltAngle:n,onPause:i,onResume:s})=>{let d=sr(null),[u,c]=dr(!1),p=h=>!h||typeof h!="string"?null:h.split(/\n\s*\n/).map(C=>C.trim()).filter(C=>C.length>0).map((C,S)=>H("p",{children:me(C,{allowedTags:["u","br","i","em","strong","b"]})},`p-${S}`)),l=We(()=>t?typeof t=="string"?H("h2",{className:"dndev-crawl-title",children:me(t,{allowedTags:["u","br","i","em","strong","b"]})}):t:null,[t]),f=We(()=>lr(e)?e:Array.isArray(e)?e.map(v=>typeof v=="string"?v.trim():"").filter(v=>v&&v.length>0).map((v,C)=>H("p",{children:me(v,{allowedTags:["u","br","i","em","strong","b"]})},`c-${C}`)):typeof e=="string"?p(e):e,[e]),b=We(()=>{let h={"--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&&(h["--crawl-tilt"]=`${n}deg`),h},[u,r,o,n]);ir(()=>{if(!cr()||!d.current)return;let h=window.matchMedia("(prefers-reduced-motion: reduce)"),v=()=>{h.matches&&d.current&&d.current.classList.add("dndev-crawl-reduced-motion")};return v(),h.addEventListener("change",v),()=>h.removeEventListener("change",v)},[]);let k=()=>{u?(c(!1),s?.()):(c(!0),i?.())};return Be(ur,{children:[H("div",{className:"dndev-crawl-3d-container",onClick:k,children:H("div",{ref:d,className:"dndev-crawl-text",style:{...b,willChange:u?"auto":"transform"},children:Be("div",{className:"dndev-crawl-content",children:[l,f]})})}),u&&H("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:k,children:H("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:H("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"white",children:H("path",{d:"M6 4h4v16H6V4zm8 0h4v16h-4V4z"})})})}),Be("div",{className:"dndev-crawl-stars",children:[H("div",{className:"dndev-crawl-stars-layer-1"}),H("div",{className:"dndev-crawl-stars-layer-2"}),H("div",{className:"dndev-crawl-stars-layer-3"})]})]})},pr=mr});var gt={};he(gt,{default:()=>Ar});import{useRef as Nr,useState as Te,useEffect as ut}from"react";import{cn as Fe,GAP_VARIANT as Tr,Stack as Rr}from"@donotdev/components";import{observeElement as Mr,addEventListener as Pr}from"@donotdev/components";import{jsx as Re}from"react/jsx-runtime";function zr({items:e,renderItem:t,className:r,itemClassName:o,gap:n=Tr.MEDIUM,speed:i=48,direction:s="auto",pauseOnHover:d=!0,ariaLabel:u,reducedMotion:c="respect",behavior:p="auto",pauseOnFocusWithin:l=!0,easing:f="ease-in-out"}){let b=typeof document<"u"&&document.dir==="rtl",k=typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1,h=s;s==="auto"&&(h=b?"right":"left");let v=h==="up"||h==="down",C=c==="ignore"||!k,S=p;p==="auto"&&(S=e.length<=20?"bounce":"infinite");let N=Nr(null),[q,V]=Te(8e3),[te,j]=Te(0),[F,x]=Te(!0),[Ce,_]=Te(!1);ut(()=>N.current?Mr(N.current,A=>x(A.isIntersecting),{threshold:0}):void 0,[]),ut(()=>{if(!N.current||typeof window>"u"||!C)return;let $=N.current,A=$.querySelector("[data-marquee-track]");if(!A)return;let ve=()=>{let U=v?$.clientHeight:$.clientWidth,re=v?A.scrollHeight:A.scrollWidth,Y=Math.max(0,re-U);if(_(Y>0),Y>0){let ge=Math.min(512,Math.max(12,i));if(S==="bounce"){let de=Y*2/ge*1e3;V(Math.max(2e3,Math.floor(de))),j(Y)}else{let de=(re+vt[n])/ge*1e3;V(Math.max(2e3,Math.floor(de))),j(re+vt[n])}}else V(0),j(0)};if(requestAnimationFrame(ve),typeof ResizeObserver<"u"){let U=new ResizeObserver(()=>{requestAnimationFrame(ve)});return U.observe($),()=>U.disconnect()}else return Pr(window,"resize",()=>requestAnimationFrame(ve))},[e,i,v,C,S,n]);let xe=()=>v?h==="up"?"normal":"reverse":h==="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",d&&"group",l&&"focus-within:group",r),role:"region","aria-label":u||`${S==="infinite"?"Scrolling":"Bouncing"} content with ${e.length} items`,"aria-live":C&&F?"off":"polite",children:Re(Rr,{className:"marquee-track",direction:v?"column":"row",align:v?void 0:"center",gap:n,"data-marquee-track":!0,"data-marquee-direction":v?"vertical":"horizontal","data-marquee-behavior":S,"data-marquee-reduced-motion":!C,style:{"--marquee-duration":C&&F&&Ce?`${q}ms`:"0ms","--marquee-direction":xe(),"--marquee-distance":v?`${te}px`:`${te}px`,"--marquee-easing":Er[f],animationPlayState:!C||!F?"paused":"running"},children:ke()})})}var vt,Er,Ar,ft=ce(()=>{"use strict";vt={none:0,tight:8,medium:16,large:32},Er={linear:"linear","ease-in-out":"ease-in-out","ease-out":"ease-out"};Ar=zr});var Dt={};he(Dt,{default:()=>$a});import{ChevronLeft as Ta,ChevronRight as Ra,Play as Ma,Pause as Pa}from"lucide-react";import{useRef as Ue,useState as oe,useEffect as Ke,useCallback as z,useMemo as Qe,memo as Ea}from"react";import{cn as Ae,observeElement as za,addEventListener as Aa,isRTLLanguage as Ia,Stack as Da}from"@donotdev/components";import{Fragment as Ga,jsx as E,jsxs as Je}from"react/jsx-runtime";function La({items:e,renderItem:t,className:r,slideClassName:o,showArrows:n=!0,showDots:i=!1,showProgress:s=!0,autoplay:d=!0,autoplayInterval:u=5e3,transition:c="slide",infinite:p=!0,slidesToShow:l=1,swipeable:f=!0,momentum:b=!0,onActiveChange:k,onSlideClick:h,keyExtractor:v,"aria-label":C="Premium carousel",pauseOnHover:S=!0,pauseOnInvisible:N=!0,showPlayPause:q=!0,lazy:V=!1,preloadDistance:te=1}){if(!e||e.length===0)return E(Da,{align:"center",justify:"center",className:Ae("dndev-relative",r),children:E("div",{style:{color:"var(--muted-foreground)"},children:"No items to display"})});let j=Ue(null),F=Ue(null),[x,Ce]=oe(0),[_,xe]=oe(d),[ke,$]=oe(!1),[A,ve]=oe(!0),[I,U]=oe({isDragging:!1,startX:0,currentX:0,startTime:0,velocity:0}),re=Ue(null),[Y,ge]=oe("idle"),[de,nt]=oe(!1);Ke(()=>{if(typeof window>"u")return;let a=window.matchMedia("(prefers-reduced-motion: reduce)");return nt(a.matches),Aa(a,"change",g=>{nt(g.matches)})},[]);let Se=Qe(()=>({tension:.3,friction:.8,mass:1}),[]),Kt=Qe(()=>{if(!p||e.length<=l)return e;let a=Math.max(l,2),m=e.slice(-a),g=e.slice(0,a);return[...m,...e,...g]},[e,p,l]),G=Qe(()=>100/l,[l]),Ge=z(a=>{if(!p)return a;let m=Math.max(l,2);return((a-m)%e.length+e.length)%e.length},[p,e.length,l]),ot=z(a=>{if(!p)return!0;let m=Math.max(l,2),g=e.length+m-1;return a>=m&&a<=g},[p,e.length,l]),He=z((a,m,g=0)=>{if(!b)return;let w=parseFloat(a.style.transform.replace("translateX(","").replace("%)",""))||0,R=g,W=Date.now(),B=()=>{let fe=(Date.now()-W)/1e3,Ne=w-m,rr=-Se.tension*Ne,ar=-Se.friction*R,nr=(rr+ar)/Se.mass;R+=nr*fe,w+=R*fe,a.style.transform=`translateX(${w}%)`,Math.abs(Ne)>.1||Math.abs(R)>.1?requestAnimationFrame(B):(a.style.transform=`translateX(${m}%)`,a.style.transition="none")};requestAnimationFrame(B)},[b,Se]),it=z((a,m,g)=>{switch(c){case"fade":a.style.transition=`opacity ${g} ease-in-out`,a.style.opacity="0",setTimeout(()=>{a.style.transform=`translateX(${m}%)`,a.style.opacity="1"},parseInt(g)/2);break;case"scale":a.style.transition=`transform ${g} 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(g)/2);break;case"parallax":a.style.transition=`transform ${g} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${m}%)`,a.querySelectorAll('[role="group"]').forEach((R,W)=>{let B=R,D=(W-Math.abs(m)/G)*.1;B.style.transform=`translateX(${D}%)`});break;default:a.style.transition=`transform ${g} cubic-bezier(0.25, 0.46, 0.45, 0.94)`,a.style.transform=`translateX(${m}%)`;break}},[c,G]),O=z((a,m=!1)=>{if(Y!=="idle"&&!m)return;let g=F.current;if(!g)return;let w=a;if(p){let D=Math.max(l,2);w=a+D,a>=e.length?w=D+a%e.length:a<0&&(w=D+e.length+a)}let R=-(w*G),W=m||de?"0ms":"300ms";m||ge("transitioning"),it(g,R,W);let B=Ge(w);if(Ce(B),k?.(B),p&&!m&&ot(w)){let D=Math.max(l,2);(w<=D-1||w>=e.length+D)&&(g.dataset.needsReset="true",g.dataset.resetIndex=w<=D-1?(e.length+D-1).toString():D.toString())}},[p,e.length,G,l,Ge,k,de,Y,ot,it]),Z=z(()=>{O(x+1)},[x,O]),le=z(()=>{O(x-1)},[x,O]),Xe=z(()=>{xe(!0)},[]),qe=z(()=>{xe(!1)},[]);Ke(()=>{if(!(!_||ke||!A||e.length<=1))return re.current=setTimeout(()=>{Z()},u),()=>{re.current&&clearTimeout(re.current)}},[_,ke,A,x,Z,u,e.length]),Ke(()=>!N||!j.current?void 0:za(j.current,m=>ve(m.isIntersecting),{threshold:.1}),[N]);let Qt=z(a=>V?Math.abs(a-x)<=te:!0,[V,x,te]),Jt=z(a=>{if(!f||Y!=="idle")return;let m=a.touches[0];m&&U({isDragging:!0,startX:m.clientX,currentX:m.clientX,startTime:Date.now(),velocity:0})},[f,Y]),jt=z(a=>{if(!I.isDragging)return;let m=a.touches[0];if(!m)return;let g=m.clientX-I.startX,w=Date.now()-I.startTime,R=w>0?g/w:0,W=F.current;if(W&&Math.abs(g)>10){a.preventDefault();let B=-(x*G),D=g/(j.current?.clientWidth||1)*100,fe=Math.min(Math.abs(g)/200,.8),Ne=D*(1-fe);W.style.transition="none",W.style.transform=`translateX(${B+Ne}%)`}U(B=>({...B,currentX:m.clientX,velocity:R}))},[I.isDragging,I.startX,I.startTime,x,G]),Zt=z(()=>{if(!I.isDragging)return;let a=I.currentX-I.startX,m=I.velocity,g=50;if(b&&Math.abs(m)>.5){let w=F.current;if(w){let R=m>0?x-1:x+1,W=-(R*G);He(w,W,m*100),O(R,!0)}}else if(Math.abs(a)>g)a>0?le():Z();else{let w=F.current;if(w&&b){let R=-(x*G);He(w,R,m*100)}else O(x,!0)}U({isDragging:!1,startX:0,currentX:0,startTime:0,velocity:0})},[I,b,Z,le,O,x,He,G]),er=z(()=>{ge("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*G}%)`,delete a.dataset.needsReset,delete a.dataset.resetIndex}},[G]),tr=z(a=>{let m=Ia();switch(a.key){case"ArrowLeft":a.preventDefault(),m?Z():le();break;case"ArrowRight":a.preventDefault(),m?le():Z();break;case"Home":a.preventDefault(),O(0);break;case"End":a.preventDefault(),O(e.length-1);break;case" ":a.preventDefault(),_?qe():Xe();break}},[Z,le,O,e.length,_,Xe,qe]);return Je("div",{ref:j,className:Ae("dndev-relative dndev-overflow-hidden",r),onMouseEnter:()=>S&&$(!0),onMouseLeave:()=>S&&$(!1),onKeyDown:tr,tabIndex:0,role:"region","aria-label":C,"aria-live":"polite",children:[E("div",{className:"dndev-overflow-hidden",children:E("div",{ref:F,className:Ae("dndev-flex",I.isDragging&&"dndev-pointer-events-none",Y==="transitioning"&&"dndev-pointer-events-none"),style:{cursor:I.isDragging?"grabbing":void 0},onTransitionEnd:er,onTouchStart:Jt,onTouchMove:jt,onTouchEnd:Zt,children:Kt.map((a,m)=>{let g=Ge(m),w=g===x,R=Qt(g);return E("div",{className:Ae("dndev-flex-shrink-0",o),style:{width:`${G}%`,opacity:R?1:0},role:"group","aria-roledescription":"slide","aria-label":`Slide ${g+1} of ${e.length}`,onClick:()=>h?.(a,g),children:R&&t(a,g,w)},v?v(a,g):`${g}-${m}`)})})}),n&&e.length>1&&Je(Ga,{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(Ta,{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(Ra,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}})})]}),d&&q&&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:()=>_?qe():Xe(),"aria-label":_?"Pause carousel":"Play carousel",children:_?E(Pa,{style:{width:"var(--icon-md)",height:"var(--icon-md)",color:"var(--foreground)"}}):E(Ma,{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,m)=>E("button",{style:{width:m===x?"1.5rem":"0.5rem",height:"0.5rem",borderRadius:"9999px",transition:"all 0.3s",backgroundColor:m===x?"var(--foreground)":"rgb(from var(--foreground) r g b / 0.3)"},onMouseEnter:g=>{m!==x&&(g.currentTarget.style.backgroundColor="rgb(from var(--foreground) r g b / 0.5)")},onMouseLeave:g=>{m!==x&&(g.currentTarget.style.backgroundColor="rgb(from var(--foreground) r g b / 0.3)")},onClick:()=>O(m),"aria-label":`Go to slide ${m+1}`},m))}),s&&d&&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:`${(x+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 ",x+1," of ",e.length]})]})}var It,$a,Lt=ce(()=>{"use strict";It=Ea(La);It.displayName="Carousel";$a=It});var Gt={};he(Gt,{default:()=>_a});import{memo as Ba}from"react";import{Card as Va,Text as Ze}from"@donotdev/components";import{cn as Fa}from"@donotdev/components";import{Fragment as Ua,jsx as we,jsxs as $t}from"react/jsx-runtime";var Ya,_a,Ht=ce(()=>{"use strict";Ya=Ba(function({title:t,items:r,gridCols:o=2,className:n,ariaLabel:i}){let s={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),$t("div",{className:Fa("dndev-marketing-stack",n),"aria-label":i,children:[t&&we(Ze,{as:"h3",level:"h2",children:t}),we("div",{className:"dndev-marketing-dndev-grid","data-cols":o,children:d.map((u,c)=>we(Va,{title:u.useCase,subtitle:u.bestFit,content:$t(Ua,{children:[we(Ze,{variant:"muted",level:"body",children:u.dndev}),we(Ze,{variant:"muted",level:"small",className:"italic",children:u.reason})]})},c))})]})}),_a=Ya});var _t={};he(_t,{default:()=>$n});import{memo as $e}from"react";import{cn as rt,Card as Tn,Icon as Rn,Stack as Mn}from"@donotdev/components";import{jsx as P,jsxs as ue}from"react/jsx-runtime";var se,Ft,Pn,Yt,En,zn,An,In,Dn,Ln,$n,Ut=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}},Ft=$e(({className:e,density:t,onClick:r,icon:o,title:n,subtitle:i,description:s})=>ue(Tn,{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:[ue(Mn,{direction:"row",align:"center",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[P(Pn,{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}),s&&P("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:s})]})),Pn=$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(Rn,{icon:e,ariaHidden:!0})}):null),Yt=$e(function({className:t,startX:r,startY:o,endX:n,endY:i,index:s,isMobile:d=!1}){let u,c,p,l,f;if(d){let{curveOffset:b}=se.mobile,k=(o+i)/2,h=r+b;c=Math.abs(h-r)+40,p=Math.abs(i-o)+40,l=Math.min(r,h)-20,f=Math.min(o,i)-20;let v=r-l,C=o-f,S=n-l,N=i-f,q=h-l,V=k-f;u=`M ${v} ${C} Q ${q} ${V} ${S} ${N}`}else{let b=(r+n)/2,k=o+(i-o)*.3;c=Math.abs(n-r)+40,p=Math.abs(i-o)+40,l=Math.min(r,n)-20,f=Math.min(o,i)-20;let h=r-l,v=o-f,C=n-l,S=i-f,N=b-l,q=k-f;u=`M ${h} ${v} Q ${N} ${q-20} ${C} ${S}`}return ue("svg",{className:rt(t),style:{left:l,top:f,width:c,height:p,zIndex:1},viewBox:`0 0 ${c} ${p}`,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:`${s*.2}s`}}),P("circle",{cx:r-l,cy:o-f,r:"6",fill:"currentColor",className:"text-accent"}),P("circle",{cx:n-l,cy:i-f,r:"6",fill:"currentColor",className:"text-accent"})]})}),En=e=>{let{cardWidth:t,cardGap:r,drop:o,startX:n}=se.desktop;return{x:n+e*(t+r),y:e*o}},zn=e=>{let{cardHeight:t,verticalGap:r}=se.mobile;return{x:0,y:e*(t+r)}},An=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},In=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},Dn=e=>{let{cardHeight:t,verticalGap:r}=se.mobile;return(e-1)*(t+r)+t+40},Ln=$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:d,mobile:u}=se;return ue("section",{className:rt("dndev-w-full dndev-overflow-hidden",t),children:[ue("div",{className:"dndev-hidden dndev-relative ",style:{width:`${d.containerWidth}px`,height:`${d.containerHeight}px`},children:[P("ol",{className:"dndev-relative","aria-label":n??"Process steps",children:e.map((c,p)=>{let{x:l,y:f}=En(p);return P("li",{className:"list-none dndev-absolute waterfall-card",style:{left:`${l}px`,top:`${f}px`,width:`${d.cardWidth}px`},children:P(Ft,{density:o,onClick:c.onClick,icon:c.icon,title:c.title,subtitle:c.subtitle,description:c.description})},`cascade-${p}-${c.title}`)})}),e.map((c,p)=>{if(p>=e.length-1)return null;let l=An(p);return l?P(Yt,{startX:l.startX,startY:l.startY,endX:l.endX,endY:l.endY,className:r,index:p,isMobile:!1},`desktop-connector-${p}`):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:`${Dn(e.length)}px`},children:[P("ol",{className:"dndev-relative","aria-label":n??"Process steps",children:e.map((c,p)=>{let{x:l,y:f}=zn(p);return P("li",{className:"list-none dndev-absolute",style:{left:`${l}px`,top:`${f}px`,width:`${u.cardWidth}px`},children:P(Ft,{density:o,onClick:c.onClick,icon:c.icon,title:c.title,subtitle:c.subtitle,description:c.description})},`mobile-${p}-${c.title}`)})}),e.map((c,p)=>{if(p>=e.length-1)return null;let l=In(p);return l?P(Yt,{startX:l.startX,startY:l.startY,endX:l.endX,endY:l.endY,className:r,index:p,isMobile:!0},`mobile-connector-${p}`):null})]})})]})}return null}),$n=Ln});Oe();import{useState as vr,useMemo as gr,lazy as fr,Suspense as hr}from"react";import{cn as br}from"@donotdev/components";import{jsx as ee,jsxs as ct}from"react/jsx-runtime";var yr=fr(()=>Promise.resolve().then(()=>(lt(),dt))),wr=({content:e,intro:t,title:r,duration:o=26,contentHeight:n="150vh",tiltAngle:i,className:s,style:d,"aria-label":u})=>{let[c,p]=vr(!0),l=gr(()=>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=()=>{p(!1)};return ct("div",{className:br("dndev-crawl-container","dndev-relative dndev-overflow-hidden",s),style:{...d,height:"calc(100dvh - var(--header-height))"},"aria-label":u||"Animated text crawl",role:"region","aria-live":"polite",children:[c&&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:[l&&ee("div",{className:"dndev-w-full",style:{paddingInline:"var(--content-padding)",marginBottom:"3rem"},children:ee("div",{className:"dndev-crawl-intro-content",children:l})}),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:b=>{b.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.3)",b.currentTarget.style.borderColor="rgba(255, 255, 255, 0.6)",b.currentTarget.style.transform="scale(1.1)"},onMouseLeave:b=>{b.currentTarget.style.backgroundColor="rgba(255, 255, 255, 0.2)",b.currentTarget.style.borderColor="rgba(255, 255, 255, 0.4)",b.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(hr,{fallback:null,children:ee(yr,{title:r,content:e,duration:o,contentHeight:n,tiltAngle:i})})]})},mt=wr;import{Suspense as Ir,lazy as Dr}from"react";import{cn as Cr,GAP_VARIANT as xr,Stack as kr}from"@donotdev/components";import{jsx as Ve}from"react/jsx-runtime";function Sr({className:e,itemCount:t=8,itemWidth:r,gap:o=xr.MEDIUM,direction:n="horizontal"}){let i=n==="vertical";return Ve("div",{className:Cr("dndev-relative dndev-overflow-hidden",e),role:"status","aria-label":"Loading content",children:Ve(kr,{direction:i?"column":"row",align:i?void 0:"center",gap:o,children:Array.from({length:t*2}).map((s,d)=>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)"}},d))})})}var pt=Sr;import{GAP_VARIANT as $r}from"@donotdev/components";import{jsx as Ye}from"react/jsx-runtime";var Lr=Dr(()=>Promise.resolve().then(()=>(ft(),gt))),Gr=e=>{let{gap:t=$r.MEDIUM,direction:r="auto",...o}=e;return Ye(Ir,{fallback:Ye(pt,{itemCount:8,gap:t,direction:r==="up"||r==="down"?"vertical":"horizontal"}),children:Ye(Lr,{...o})})},ht=Gr;import{Eye as Hr}from"lucide-react";import{useState as Xr}from"react";import{PortalButton as qr,cn as bt,Sheet as Or,Code as Wr,Stack as Br}from"@donotdev/components";import{Fragment as Fr,jsx as Me,jsxs as Yr}from"react/jsx-runtime";function Vr({data:e,sourceCode:t,language:r="tsx",title:o="Page Source",className:n}){let[i,s]=Xr(!1),d=t||e||"",u=c=>{};return Yr(Fr,{children:[Me(qr,{icon:Hr,onClick:()=>s(!0),className:bt("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(Or,{open:i,onOpenChange:s,side:"bottom",className:bt("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(Br,{gap:"none",style:{flex:"1 1 auto",minHeight:0,overflow:"hidden"},children:Me(Wr,{language:r,showCopyButton:!0,onCopy:u,children:d})})})]})}var yt=Vr;import"react";import{cn as wt,Button as _r,Separator as Ur,SEPARATOR_VARIANT as Kr,Text as Qr,useIntersectionObserver as Jr,getVariantDataAttrs as jr,surfaceVariants as Zr,renderCardHeader as ea,renderCardContent as ta}from"@donotdev/components";import{jsx as K,jsxs as Pe}from"react/jsx-runtime";var ra=({items:e,className:t,ariaLabel:r,variant:o,style:n,threshold:i=.3})=>K("div",{className:wt("dndev-stacked-cards-container",t),"aria-label":r,style:n,children:e.map((s,d)=>K(aa,{item:s,index:d,variant:o,threshold:i},d))}),aa=({item:e,index:t,variant:r,threshold:o})=>{let{ref:n,isIntersecting:i}=Jr({threshold:o,rootMargin:"0px 0px -20% 0px",once:!0}),s=ea(e.icon,e.title,e.subtitle),d=ta(e.content);return K("section",{ref:n,className:"dndev-stack-item","data-stacked":i?"false":"true",children:Pe("div",{className:wt("dndev-card",Zr({variant:r})),...jr({variant:r}),"data-role":"card","data-clickable":e.onClick?"true":void 0,onClick:e.onClick,children:[Pe("div",{className:"dndev-stack-content",children:[Pe("div",{className:"dndev-stacked-cards-body",children:[Pe("div",{className:"dndev-stacked-cards-left",children:[s,e.description&&K(Qr,{as:"p",level:"small",variant:"muted",children:e.description})]}),K(Ur,{orientation:"vertical",variant:Kr.ACCENT,className:"dndev-stacked-cards-separator"}),d&&K("div",{className:"dndev-stacked-cards-right",children:d})]}),e.cta&&K("div",{className:"dndev-stacked-cards-cta",children:K(_r,{onClick:e.onClick,variant:e.cta.variant||"primary",icon:e.cta.icon,children:e.cta.text})})]}),K("div",{className:"dndev-stack-number",children:e.number??String(t+1).padStart(2,"0")})]})})},Ct=ra;import{jsx as oa}from"react/jsx-runtime";var na=e=>oa(Ct,{...e}),xt=na;import{useCallback as ia}from"react";import{cn as sa,useViewportVisibility as da}from"@donotdev/components";import{jsx as kt}from"react/jsx-runtime";var la=({items:e=[],direction:t="fade-in",stagger:r=100,threshold:o,distance:n,duration:i,once:s=!1,viewport:d=!0,overrides:u=[],className:c,children:p})=>{let{ref:l,isVisible:f,hasTriggered:b,visibleItems:k,isItemVisible:h}=da({threshold:o,once:s,trackItems:d,enableScrollListener:d}),v=ia(S=>{let N=u.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,u]),C=()=>e.map((S,N)=>{let q=v(N),V=N*r,te=d?h(N):f;return kt("div",{className:"dndev-reveal-item","data-direction":q,"data-visible":te,style:{"--reveal-delay":`${V}ms`,"--reveal-index":N,...n!==void 0&&{"--reveal-distance":`${n}vw`},...i!==void 0&&{"--reveal-duration":`${i}ms`}},children:S},N)});return kt("div",{ref:l,className:sa("dndev-reveal-container",f&&"dndev-reveal-visible",c),"data-direction":t,"data-stagger":r,children:e.length>0?C():p})},ye=la;import{useState as ca,useEffect as ma}from"react";import{cn as St,Card as Nt,renderCardContent as Tt,useIntersectionObserver as pa}from"@donotdev/components";import{useBreakpoint as ua}from"@donotdev/core";import{jsx as M,jsxs as ae}from"react/jsx-runtime";var va=function({steps:t,className:r,variant:o}){let[n,i]=ca(0),s=ua("isLaptopOrDesktop"),d=t.length>1?n/(t.length-1)*100:0;return s?M("div",{className:St("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:`${d}%`}})]}),M("div",{className:"dndev-roadmap-grid",style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((u,c)=>{let p=u.icon,l=c<=n,f=c===n;return ae("div",{className:"dndev-roadmap-step",onMouseEnter:()=>i(c),children:[M("div",{className:"dndev-roadmap-node","data-active":l,children:M(p,{})}),ae(Nt,{title:u.title,subtitle:u.subtitle,variant:o,className:"dndev-roadmap-card","data-active":f,onClick:u.onClick,footer:u.content?M("div",{className:"dndev-roadmap-content",children:Tt(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:St("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:`${d}%`}})}),t.map((u,c)=>M(ga,{step:u,index:c,isActive:c<=n,variant:o,onEnter:()=>i(c)},c))]})})},ga=({step:e,index:t,isActive:r,variant:o,onEnter:n})=>{let{ref:i,isIntersecting:s}=pa({threshold:.5,rootMargin:"0px 0px -20% 0px"});ma(()=>{typeof window<"u"&&s&&n()},[s,n]);let d=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(d,{})}),ae(Nt,{title:e.title,subtitle:e.subtitle,variant:o,className:"dndev-roadmap-card-mobile","data-active":r,onClick:e.onClick,footer:e.content?M("div",{className:"dndev-roadmap-content",children:Tt(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})]})]})},Rt=va;import{jsx as ha}from"react/jsx-runtime";var fa=function(t){return ha(Rt,{...t})},Mt=fa;import{jsx as _e,jsxs as ya}from"react/jsx-runtime";function ba({status:e,animationClass:t}){return _e("svg",{width:"100%",height:"100%",viewBox:"0 0 512 512",className:"drop--lg",preserveAspectRatio:"xMidYMid meet",children:ya("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
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"}),Ue("path",{d:`M2465 4956 c-60 -28 -97 -66 -124 -126 -20 -44 -21 -63 -21 -630 0
13
+ 50 c-59 125 -193 177 -311 121z`,fill:"none",stroke:"currentColor",strokeWidth:"80",className:"/20"}),_e("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 Na}from"lucide-react";import{Button as Et,BUTTON_VARIANT as Ta,Stack as Ee}from"@donotdev/components";import{jsx as ne,jsxs as ze}from"react/jsx-runtime";function Ra({status:e,animation:t,instructions:r,debug:o=!1,onSkip:n,statusValue:i,onRestart:d,isPaused:l=!1,isComplete:u=!1}){return ze(Ee,{direction:"column",align:"center",justify:"center",gap:"large",style:{width:"100%",height:"100%"},className:"dndev-relative",children:[o&&ze(Ee,{gap:"tight",className:"dndev-absolute",style:{top:"var(--gap-md)",insetInlineEnd:"var(--gap-md)",zIndex:20},children:[ne("div",{style:{fontSize:"var(--font-size-sm)",backgroundColor:"rgb(234 179 8)",color:"rgb(113 63 18)",borderRadius:"var(--radius)",padding:"var(--gap-sm) var(--gap-md)"},children:"\u{1F41B} Debug Mode"}),i&&ze("div",{style:{fontSize:"var(--font-size-sm)",backgroundColor:"rgb(59 130 246)",color:"rgb(30 58 138)",borderRadius:"var(--radius)",padding:"var(--gap-sm) var(--gap-md)"},children:["Status: ",i]}),n&&ne(Et,{variant:Ta.DESTRUCTIVE,onClick:n,children:"Skip \u2192"})]}),e&&ne(Ee,{direction:"column",gap:"tight",align:"center",children:e}),ze("div",{className:"dndev-relative dndev-flex dndev-items-center dndev-justify-center dndev-flex-shrink-0",style:{width:"min(400px, 35vh)",height:"min(400px, 35vh)",aspectRatio:"1 / 1"},children:[t,l&&ne("div",{className:"dndev-absolute dndev-inset-0 dndev-flex dndev-items-center dndev-justify-center dndev-z-breadcrumbs",style:{backgroundColor:"rgb(from var(--background) r g b / 0.5)",backdropFilter:"blur(8px)",borderRadius:"var(--radius-lg)"},children:ne("span",{style:{fontSize:"3.75rem"},children:"\u23F8\uFE0F"})}),u&&d&&ne(Et,{floating:!0,icon:Na,onClick:d,"aria-label":"Do another cycle"})]}),ne(Ee,{gap:"tight",align:"center",style:{textAlign:"center",maxWidth:"28rem"},children:r})]})}import{Suspense as Ba,lazy as Va}from"react";import{cn as Ma,Stack as zt}from"@donotdev/components";import{Fragment as Ea,jsx as Q,jsxs as At}from"react/jsx-runtime";function Pa({className:e,itemCount:t=1,showArrows:r=!0,showDots:o=!1,showProgress:n=!1}){return At("div",{className:Ma("dndev-relative dndev-overflow-hidden",e),role:"status","aria-label":"Loading carousel",children:[Q("div",{className:"dndev-overflow-hidden",children:Q(zt,{direction:"row",children:Array.from({length:t}).map((i,d)=>Q("div",{className:"dndev-w-full dndev-flex-shrink-0",children:Q("div",{className:"dndev-animate-pulse",style:{height:"16rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}})},d))})}),r&&At(Ea,{children:[Q("div",{className:"dndev-absolute dndev-z-breadcrumbs dndev-animate-pulse",style:{left:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)"}}),Q("div",{className:"dndev-absolute dndev-z-breadcrumbs dndev-animate-pulse",style:{right:"1rem",top:"50%",transform:"translateY(-50%)",width:"2.5rem",height:"2.5rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)"}})]}),o&&Q(zt,{direction:"row",gap:"tight",className:"dndev-absolute dndev-z-breadcrumbs",style:{bottom:"1rem",left:"50%",transform:"translateX(-50%)"},children:Array.from({length:t}).map((i,d)=>Q("div",{className:"dndev-animate-pulse",style:{width:"0.5rem",height:"0.5rem",backgroundColor:"var(--muted)",borderRadius:"9999px"}},d))}),n&&Q("div",{className:"dndev-absolute dndev-left-0 dndev-animate-pulse",style:{bottom:0,right:0,height:"0.25rem",backgroundColor:"var(--muted)"}})]})}var It=Pa;import{jsx as Ze}from"react/jsx-runtime";var Fa=Va(()=>Promise.resolve().then(()=>($t(),Lt))),Ya=e=>{let{showArrows:t=!0,showDots:r=!0,showProgress:o=!1}=e;return Ze(Ba,{fallback:Ze(It,{showArrows:t,showDots:r,showProgress:o}),children:Ze(Fa,{...e})})},_a=Ya;import{lazy as en,Suspense as tn}from"react";import{Card as rn,Grid as an}from"@donotdev/components";import{jsx as Ie}from"react/jsx-runtime";var nn=en(()=>Promise.resolve().then(()=>(Ot(),Gt)));function on({title:e,items:t,gridCols:r=2,className:o,ariaLabel:n}){return Ie(tn,{fallback:Ie(an,{gap:"medium",cols:2,children:t.map((i,d)=>Ie(rn,{title:"Loading..."},d))}),children:Ie(nn,{title:e,items:t,gridCols:r,className:o,ariaLabel:n})})}var sn=on;import{Card as dn,Text as ln,Stack as cn}from"@donotdev/components";import{jsx as tt,jsxs as un}from"react/jsx-runtime";var mn=({text:e,icon:t="\u{1F389}",className:r})=>tt(dn,{className:r,style:{textAlign:"center"},children:un(cn,{gap:"tight",style:{padding:"var(--gap-md)"},children:[t&&tt("div",{style:{fontSize:"var(--font-size-2xl)"},children:t}),tt(ln,{variant:"muted",children:e})]})}),pn=mn;import{CheckCircle as De}from"lucide-react";import{Dialog as vn,Card as Le,Badge as gn,BADGE_VARIANT as fn,Stack as O,Grid as hn}from"@donotdev/components";import{jsx as w,jsxs as L}from"react/jsx-runtime";function bn({open:e,onOpenChange:t,guide:r,icon:o}){let n=o;return w(vn,{open:e,onOpenChange:t,title:L(O,{direction:"row",align:"center",gap:"medium",children:[n&&w(n,{className:"dndev-size-touch",style:{color:"var(--primary)"}}),w("div",{style:{fontSize:"var(--font-size-3xl)",fontWeight:700},children:r.title})]}),description:w("div",{style:{fontSize:"var(--font-size-lg)"},children:r.subtitle}),style:{maxWidth:"56rem",maxHeight:"90dvh",overflowY:"auto"},children:L(O,{gap:"large",children:[r.quickStart&&L(Le,{title:L(O,{direction:"row",align:"center",gap:"medium",children:[w(De,{className:"dndev-size-md",style:{color:"var(--secondary)"}}),r.quickStart.title]}),children:[w("div",{className:"dndev-surface",style:{backgroundColor:"var(--muted)",padding:"var(--gap-md)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)"},children:w("code",{style:{color:"var(--muted-foreground)",fontSize:"var(--font-size-sm)",fontFamily:"monospace"},children:r.quickStart.code})}),w("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)",marginTop:"var(--gap-sm)"},children:r.quickStart.description})]}),r.steps&&L(O,{gap:"medium",children:[w("h3",{style:{fontSize:"var(--font-size-xl)",fontWeight:600},children:"Step by Step Process"}),w(O,{gap:"medium",children:r.steps.map((i,d)=>{let l=i.icon;return w("div",{className:"dndev-relative",children:L(Le,{style:{overflow:"visible"},children:[w("div",{className:"dndev-absolute",style:{top:"-0.75rem",left:"-0.75rem",zIndex:20},children:w("div",{className:"dndev-flex dndev-items-center dndev-justify-center",style:{backgroundColor:"var(--primary)",color:"var(--primary-foreground)",borderRadius:"9999px",fontSize:"var(--font-size-sm)",fontWeight:700,boxShadow:"var(--shadow-xl)",border:"2px solid var(--background)",width:"2rem",height:"2rem"},children:d+1})}),L("div",{children:[L(O,{direction:"row",align:"center",gap:"medium",style:{paddingTop:"var(--gap-lg)",marginBottom:"var(--gap-md)"},children:[w(l,{className:"dndev-size-md",style:{color:"var(--primary)"}}),w("div",{style:{fontSize:"var(--font-size-lg)",fontWeight:600},children:i.title})]}),L(O,{gap:"large",children:[w("p",{style:{color:"var(--muted-foreground)"},children:i.description}),i.code&&w("div",{className:"dndev-surface",style:{backgroundColor:"var(--muted)",padding:"var(--gap-md)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)"},children:w("code",{style:{color:"var(--muted-foreground)",fontSize:"var(--font-size-sm)",fontFamily:"monospace"},children:i.code})}),i.details&&w("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)"},children:i.details})]})]})]})},d)})})]}),r.features&&w(Le,{title:L(O,{direction:"row",align:"center",gap:"medium",children:[w(De,{className:"dndev-size-md",style:{color:"var(--secondary)"}}),"What You Get Out of the Box"]}),children:w(O,{gap:"medium",children:r.features.map((i,d)=>L(O,{direction:"row",align:"center",gap:"medium",style:{fontSize:"var(--font-size-sm)"},children:[w(De,{className:"dndev-size-sm",style:{color:"var(--secondary)",flexShrink:0}}),w("span",{style:{color:"var(--muted-foreground)"},children:i})]},d))})}),r.templates&&w(Le,{title:L(O,{direction:"row",align:"center",gap:"medium",children:[w(De,{className:"dndev-size-md",style:{color:"var(--accent)"}}),"Available Templates"]}),children:w(hn,{cols:3,gap:"medium",children:r.templates.map((i,d)=>L(O,{gap:"tight",children:[w(gn,{variant:fn.OUTLINE,className:"dndev-justify-center",style:{width:"100%"},children:i.name}),w("p",{style:{fontSize:"var(--font-size-sm)",color:"var(--muted-foreground)"},children:i.description})]},d))})})]})})}import{Card as yn,Text as Xt,GAP_VARIANT as wn,Grid as qt}from"@donotdev/components";import{jsx as pe,jsxs as Wt}from"react/jsx-runtime";var Cn=({left:e,right:t,leftDirection:r="left",rightDirection:o="right",threshold:n,stagger:i=200,distance:d,duration:l,gap:u=wn.LARGE,className:c,align:m="start",useStatCards:s=!1})=>{let g=()=>s&&Array.isArray(t)?pe(qt,{cols:2,gap:"medium",children:t.map((b,f)=>pe(yn,{children:Wt("div",{style:{padding:"var(--gap-lg)"},children:[pe(Xt,{level:"h3",children:b.title}),pe(Xt,{as:"p",variant:"muted",children:b.description})]})},f))}):t,y={none:"dndev-gap-none",tight:"dndev-gap-sm",medium:"dndev-gap-md",large:"dndev-gap-lg"}[u];return Wt(qt,{cols:2,gap:u,align:m,className:c,children:[pe(ye,{direction:r,threshold:n,stagger:i,distance:d,duration:l,items:[e]}),pe(ye,{direction:o,threshold:n,stagger:i,distance:d,duration:l,items:[g()]})]})},xn=Cn;import{Button as kn,Input as Sn,cn as rt,Stack as Nn}from"@donotdev/components";import{jsx as Bt,jsxs as Mn}from"react/jsx-runtime";function Tn({input:e,button:t,className:r}){return Mn(Nn,{align:"center",justify:"center",gap:"medium",className:rt("dndev-w-full",r),children:[Bt(Sn,{value:e.value,onChange:o=>e.onChange(o.target.value),placeholder:e.placeholder,maxLength:e.maxLength,className:rt("dndev-w-full",e.className),style:{textAlign:"center"},"aria-label":e.label||"Input",autoComplete:"off",spellCheck:!1}),Bt(kn,{variant:t.variant||"primary",onClick:t.onClick,icon:t.icon,className:rt("dndev-w-full",t.className),style:{paddingInline:"2rem"},children:t.label})]})}var Rn=Tn;import{Suspense as Wn,lazy as Bn}from"react";import{Fragment as Pn}from"react";import{cn as Vt,Stack as ie}from"@donotdev/components";import{jsx as T,jsxs as J}from"react/jsx-runtime";function En({stepCount:e=3,className:t,direction:r="horizontal"}){let o=Array.from({length:e},(n,i)=>i);return r==="vertical"?T("section",{className:Vt("dndev-w-full dndev-overflow-hidden",t),children:T("div",{className:"dndev-relative dndev-mx-auto",style:{maxWidth:"72rem",padding:"0 var(--content-padding)"},children:T("div",{className:"dndev-grid dndev-md:grid-cols-2 dndev-lg:grid-cols-3",style:{gap:"var(--gap-lg)"},children:o.map(n=>T("div",{style:{transform:n%3===1?"translateY(3rem)":n%3===2?"translateY(6rem)":void 0},children:J("div",{style:{backgroundColor:"var(--background)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)",boxShadow:"var(--shadow-sm)",padding:"var(--gap-md)"},children:[J(ie,{direction:"row",align:"start",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[T("div",{className:"dndev-animate-pulse",style:{width:"3rem",height:"3rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}}),J(ie,{gap:"tight",flex:"1",className:"dndev-min-w-0",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1.5rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"75%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}})]})]}),J(ie,{gap:"tight",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"66%"}})]})]})},n))})})}):T("section",{className:Vt("dndev-w-full",t),children:T("div",{className:"dndev-mx-auto dndev-flex dndev-flex-col dndev-md:flex-row dndev-md:items-center dndev-gap-md",style:{maxWidth:"80rem"},children:o.map(n=>{let i=n===e-1;return J(Pn,{children:[T("div",{className:"dndev-flex-1",children:J("div",{className:"dndev-h-full",style:{backgroundColor:"var(--background)",borderRadius:"var(--radius-lg)",border:"1px solid var(--border)",boxShadow:"var(--shadow-sm)",padding:"var(--gap-md)"},children:[J(ie,{direction:"row",align:"start",gap:"medium",style:{marginBottom:"var(--gap-md)"},children:[T("div",{className:"dndev-animate-pulse",style:{width:"3rem",height:"3rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius-lg)"}}),J(ie,{gap:"tight",flex:"1",className:"dndev-min-w-0",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1.25rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"75%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}})]})]}),J(ie,{gap:"tight",children:[T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"100%"}}),T("div",{className:"dndev-animate-pulse",style:{height:"1rem",backgroundColor:"var(--muted)",borderRadius:"var(--radius)",width:"66%"}})]})]})}),!i&&T(ie,{justify:"center",style:{paddingTop:"var(--gap-md)",paddingBottom:"var(--gap-md)"},children:T("div",{className:"dndev-animate-pulse",style:{width:"2rem",height:"1px",backgroundColor:"var(--muted)"}})})]},n)})})})}var Ft=En;import{jsx as nt}from"react/jsx-runtime";var Vn=Bn(()=>Promise.resolve().then(()=>(Kt(),Ut)));function Fn(e){return nt(Wn,{fallback:nt(Ft,{stepCount:e.items?.length||3,direction:e.direction==="descending"?"vertical":"horizontal"}),children:nt(Vn,{...e})})}var Yn=Fn;export{Ra as BreathingExerciseLayout,_a as Carousel,sn as ComparisonGrid,pn as CongratulationsCard,pt as Crawl,bn as GuideModal,wt as InspectorGadget,ka as LungsAnimation,bt as Marquee,ye as Reveal,Pt as Roadmap,xn as SplitReveal,kt as StackedCards,Rn as StartChallengeForm,Yn as Waterfall};
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 wa}from"lucide-react";import{Button as Pt,BUTTON_VARIANT as Ca,Stack as Ee}from"@donotdev/components";import{jsx as ne,jsxs as ze}from"react/jsx-runtime";function xa({status:e,animation:t,instructions:r,debug:o=!1,onSkip:n,statusValue:i,onRestart:s,isPaused:d=!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(Pt,{variant:Ca.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,d&&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&&s&&ne(Pt,{floating:!0,icon:wa,onClick:s,"aria-label":"Do another cycle"})]}),ne(Ee,{gap:"tight",align:"center",style:{textAlign:"center",maxWidth:"28rem"},children:r})]})}import{Suspense as Ha,lazy as Xa}from"react";import{cn as ka,Stack as Et}from"@donotdev/components";import{Fragment as Na,jsx as Q,jsxs as zt}from"react/jsx-runtime";function Sa({className:e,itemCount:t=1,showArrows:r=!0,showDots:o=!1,showProgress:n=!1}){return zt("div",{className:ka("dndev-relative dndev-overflow-hidden",e),role:"status","aria-label":"Loading carousel",children:[Q("div",{className:"dndev-overflow-hidden",children:Q(Et,{direction:"row",children:Array.from({length:t}).map((i,s)=>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)"}})},s))})}),r&&zt(Na,{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(Et,{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,s)=>Q("div",{className:"dndev-animate-pulse",style:{width:"0.5rem",height:"0.5rem",backgroundColor:"var(--muted)",borderRadius:"9999px"}},s))}),n&&Q("div",{className:"dndev-absolute dndev-left-0 dndev-animate-pulse",style:{bottom:0,right:0,height:"0.25rem",backgroundColor:"var(--muted)"}})]})}var At=Sa;import{jsx as je}from"react/jsx-runtime";var qa=Xa(()=>Promise.resolve().then(()=>(Lt(),Dt))),Oa=e=>{let{showArrows:t=!0,showDots:r=!0,showProgress:o=!1}=e;return je(Ha,{fallback:je(At,{showArrows:t,showDots:r,showProgress:o}),children:je(qa,{...e})})},Wa=Oa;import{lazy as Ka,Suspense as Qa}from"react";import{Card as Ja,Grid as ja}from"@donotdev/components";import{jsx as Ie}from"react/jsx-runtime";var Za=Ka(()=>Promise.resolve().then(()=>(Ht(),Gt)));function en({title:e,items:t,gridCols:r=2,className:o,ariaLabel:n}){return Ie(Qa,{fallback:Ie(ja,{gap:"medium",cols:2,children:t.map((i,s)=>Ie(Ja,{title:"Loading..."},s))}),children:Ie(Za,{title:e,items:t,gridCols:r,className:o,ariaLabel:n})})}var tn=en;import{Card as rn,Text as an,Stack as nn}from"@donotdev/components";import{jsx as et,jsxs as dn}from"react/jsx-runtime";var on=({text:e,icon:t="\u{1F389}",className:r})=>et(rn,{className:r,style:{textAlign:"center"},children:dn(nn,{gap:"tight",style:{padding:"var(--gap-md)"},children:[t&&et("div",{style:{fontSize:"var(--font-size-2xl)"},children:t}),et(an,{variant:"muted",children:e})]})}),sn=on;import{CheckCircle as De}from"lucide-react";import{Dialog as ln,Card as Le,Badge as cn,BADGE_VARIANT as mn,Stack as X,Grid as pn}from"@donotdev/components";import{jsx as y,jsxs as L}from"react/jsx-runtime";function un({open:e,onOpenChange:t,guide:r,icon:o}){let n=o;return y(ln,{open:e,onOpenChange:t,title:L(X,{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(X,{gap:"large",children:[r.quickStart&&L(Le,{title:L(X,{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(X,{gap:"medium",children:[y("h3",{style:{fontSize:"var(--font-size-xl)",fontWeight:600},children:"Step by Step Process"}),y(X,{gap:"medium",children:r.steps.map((i,s)=>{let d=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:s+1})}),L("div",{children:[L(X,{direction:"row",align:"center",gap:"medium",style:{paddingTop:"var(--gap-lg)",marginBottom:"var(--gap-md)"},children:[y(d,{className:"dndev-size-md",style:{color:"var(--primary)"}}),y("div",{style:{fontSize:"var(--font-size-lg)",fontWeight:600},children:i.title})]}),L(X,{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})]})]})]})},s)})})]}),r.features&&y(Le,{title:L(X,{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(X,{gap:"medium",children:r.features.map((i,s)=>L(X,{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})]},s))})}),r.templates&&y(Le,{title:L(X,{direction:"row",align:"center",gap:"medium",children:[y(De,{className:"dndev-size-md",style:{color:"var(--accent)"}}),"Available Templates"]}),children:y(pn,{cols:3,gap:"medium",children:r.templates.map((i,s)=>L(X,{gap:"tight",children:[y(cn,{variant:mn.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})]},s))})})]})})}import{Card as vn,Text as Xt,GAP_VARIANT as gn,Grid as qt}from"@donotdev/components";import{jsx as pe,jsxs as Ot}from"react/jsx-runtime";var fn=({left:e,right:t,leftDirection:r="left",rightDirection:o="right",threshold:n,stagger:i=200,distance:s,duration:d,gap:u=gn.LARGE,className:c,align:p="start",useStatCards:l=!1})=>{let f=()=>l&&Array.isArray(t)?pe(qt,{cols:2,gap:"medium",children:t.map((k,h)=>pe(vn,{children:Ot("div",{style:{padding:"var(--gap-lg)"},children:[pe(Xt,{level:"h3",children:k.title}),pe(Xt,{as:"p",variant:"muted",children:k.description})]})},h))}):t,b={none:"dndev-gap-none",tight:"dndev-gap-sm",medium:"dndev-gap-md",large:"dndev-gap-lg"}[u];return Ot(qt,{cols:2,gap:u,align:p,className:c,children:[pe(ye,{direction:r,threshold:n,stagger:i,distance:s,duration:d,items:[e]}),pe(ye,{direction:o,threshold:n,stagger:i,distance:s,duration:d,items:[f()]})]})},hn=fn;import{Button as bn,Input as yn,cn as tt,Stack as wn}from"@donotdev/components";import{jsx as Wt,jsxs as kn}from"react/jsx-runtime";function Cn({input:e,button:t,className:r}){return kn(wn,{align:"center",justify:"center",gap:"medium",className:tt("dndev-w-full",r),children:[Wt(yn,{value:e.value,onChange:o=>e.onChange(o.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}),Wt(bn,{variant:t.variant||"primary",onClick:t.onClick,icon:t.icon,className:tt("dndev-w-full",t.className),style:{paddingInline:"2rem"},children:t.label})]})}var xn=Cn;import{Suspense as Gn,lazy as Hn}from"react";import{Fragment as Sn}from"react";import{cn as Bt,Stack as ie}from"@donotdev/components";import{jsx as T,jsxs as J}from"react/jsx-runtime";function Nn({stepCount:e=3,className:t,direction:r="horizontal"}){let o=Array.from({length:e},(n,i)=>i);return r==="vertical"?T("section",{className:Bt("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:Bt("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(Sn,{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 Vt=Nn;import{jsx as at}from"react/jsx-runtime";var Xn=Hn(()=>Promise.resolve().then(()=>(Ut(),_t)));function qn(e){return at(Gn,{fallback:at(Vt,{stepCount:e.items?.length||3,direction:e.direction==="descending"?"vertical":"horizontal"}),children:at(Xn,{...e})})}var On=qn;export{xa as BreathingExerciseLayout,Wa as Carousel,tn as ComparisonGrid,sn as CongratulationsCard,mt as Crawl,un as GuideModal,yt as InspectorGadget,ba as LungsAnimation,ht as Marquee,ye as Reveal,Mt as Roadmap,hn as SplitReveal,xt as StackedCards,xn as StartChallengeForm,On as Waterfall};
@@ -8,6 +8,7 @@
8
8
  @import '../components/StackedCards/StackedCards.css';
9
9
  @import '../components/Marquee/Marquee.css';
10
10
  @import '../components/Reveal/Reveal.css';
11
+ @import '../components/Roadmap/Roadmap.css';
11
12
  @import '../components/breathing/breathing.css';
12
13
 
13
14
  /* Note: Bento CSS is in @donotdev/components package */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@donotdev/adv-comps",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
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.5",
54
+ "@donotdev/components": "0.0.7",
55
55
  "react": "^19.2.3",
56
56
  "react-dom": "^19.2.3",
57
57
  "shiki": "^3.20.0"