@donotdev/adv-comps 0.0.4 → 0.0.6

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