@founderhq/journeys 0.3.67 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,1446 +1,140 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as react from 'react';
3
- import { ReactNode } from 'react';
4
-
5
- type StepType = "single_select" | "multi_select" | "input" | "slider" | "swipe_cards" | "counter_select" | "info_page" | "computed" | "custom";
6
- type StepOption = {
7
- id: string;
8
- label: string;
9
- description?: string;
10
- icon?: string;
11
- /** Optional image URL used in gravity bin physics visualization */
12
- image?: string;
13
- };
14
- type JourneyOptionOverrides = Record<string, StepOption[]>;
15
- type SwipeCardItem = {
16
- variable: string;
17
- text: string;
18
- description?: string;
19
- icon?: string;
20
- };
21
- type SwipeLabels = {
22
- yes?: string;
23
- no?: string;
24
- };
25
- type SwipeCardAlign = "left" | "center" | "right";
26
- type SwipeIconStyle = "circle" | "bare";
27
- type StepField = {
28
- id: string;
29
- type: "text" | "email" | "number" | "tel";
30
- label: string;
31
- placeholder?: string;
32
- required?: boolean;
33
- min?: number;
34
- max?: number;
35
- options?: StepOption[];
36
- /** Custom variable name for this field in the answers Record. Defaults to `id`. */
37
- variable?: string;
38
- };
39
- type StepValidation = {
40
- required?: boolean;
41
- min?: number;
42
- max?: number;
43
- };
44
- type StepBackground = {
45
- color?: string;
46
- gradient?: string;
47
- image?: string;
48
- };
49
- type BlobConfig = {
50
- position: {
51
- x: string;
52
- y: string;
53
- };
54
- /** Explicit RGBA fill. Omit to inherit `--jy-blob-color` from the theme
55
- * (used by autogenerated random blobs so they match the active theme). */
56
- color?: {
57
- r: number;
58
- g: number;
59
- b: number;
60
- a: number;
61
- };
62
- size?: string;
63
- };
64
- type GradientValue = string | {
65
- from: string;
66
- to: string;
67
- angle?: number;
68
- };
69
- type WidgetStyle = {
70
- layout?: "list" | "grid" | "segmented";
71
- background?: string;
72
- borderColor?: string;
73
- borderRadius?: string;
74
- hoverBackground?: string;
75
- selectedBackground?: string;
76
- selectedBorderColor?: string;
77
- /** Gradient applied as a true rounded border on the selected card (uses CSS mask trick).
78
- * Pass any CSS background value: a `linear-gradient(...)` / `conic-gradient(...)` string,
79
- * or a `{ from, to, angle? }` shorthand. When unset, falls back to the
80
- * `--jy-selected-border-gradient` theme variable, then to `selectedBorderColor`. */
81
- selectedBorderGradient?: GradientValue;
82
- /** Border thickness in px when a gradient border is in play. Defaults to the
83
- * `--jy-selected-border-width` theme variable, then to 2. */
84
- selectedBorderWidth?: number;
85
- selectedBoxShadow?: string;
86
- className?: string;
87
- iconIndicator?: boolean;
88
- iconBg?: string;
89
- iconColor?: string;
90
- selectedIconBg?: string;
91
- selectedIconColor?: string;
92
- };
93
- type SliderStyle = {
94
- trackFillColor?: string;
95
- trackFillGradient?: string;
96
- trackBgColor?: string;
97
- trackHeight?: number;
98
- thumbColor?: string;
99
- thumbWidth?: number;
100
- thumbHeight?: number;
101
- thumbBorderRadius?: string;
102
- thumbShadow?: string;
103
- valueColor?: string;
104
- valueGradient?: string;
105
- valueTemplate?: string;
106
- valueDecimals?: number;
107
- dynamicTextSize?: boolean;
108
- reverseDynamicTextSize?: boolean;
109
- minFontSize?: number;
110
- maxFontSize?: number;
111
- snapPoints?: number;
112
- haptics?: boolean;
113
- /** Initial slider value on page load. Defaults to midpoint of min–max. */
114
- defaultValue?: number;
115
- };
116
- type CounterStyle = {
117
- /** Whether to show the gravity bin physics background. Default true */
118
- showGravityBin?: boolean;
119
- /** Matter.js gravity Y value. Default 1 */
120
- gravity?: number;
121
- /** Bounce restitution 0-1. Default 0.4 */
122
- restitution?: number;
123
- /** Body friction. Default 0.3 */
124
- friction?: number;
125
- /** Icon body radius in px. Default 20 */
126
- iconSize?: number;
127
- /** Max total count across all options */
128
- maxTotal?: number;
129
- };
130
- /** A styled span within a text/heading block for inline color, gradient, weight, etc.
131
- * When `type === "icon"`, `text` is interpreted as a Lucide icon name (or emoji fallback)
132
- * and the segment renders as an inline icon sized to the surrounding font. */
133
- type TextSegment = {
134
- /** "text" (default) renders `text` as a styled span. "icon" renders `text` as an inline icon. */
135
- type?: "text" | "icon";
136
- text: string;
137
- color?: string;
138
- /** CSS gradient string or { from, to, angle? } for gradient text */
139
- gradient?: GradientValue;
140
- fontWeight?: string | number;
141
- fontStyle?: "normal" | "italic";
142
- fontSize?: string;
143
- fontFamily?: string;
144
- lineHeight?: string | number;
145
- className?: string;
146
- };
147
- type ButtonAction = {
148
- type: "next";
149
- } | {
150
- type: "back";
151
- } | {
152
- type: "skip";
153
- skipTo?: string;
154
- } | {
155
- type: "link";
156
- url: string;
157
- external?: boolean;
158
- } | {
159
- type: "purchase";
160
- planVariable?: string;
161
- discountVariable?: string;
162
- } | {
163
- type: "open_discount_code";
164
- variable: string;
165
- planVariable?: string;
166
- title?: string;
167
- placeholder?: string;
168
- applyLabel?: string;
169
- };
170
- type BlockType = "heading" | "text" | "image" | "button" | "spacer" | "divider" | "stat" | "icon" | "badge" | "list" | "comparison_bar" | "counter" | "decorated_text" | "quote" | "video" | "card" | "callout" | "progress_bar" | "lottie" | "carousel" | "checklist" | "accordion" | "columns" | "circular_progress" | "line_chart" | "avatar_group" | "table" | "gravity_bin" | "timeline" | "feature_row" | "metric" | "device_frame" | "before_after" | "notification_stack" | "floating_label" | "single_select" | "multi_select" | "pricing_plans";
171
- type HeadingBlockProps = {
172
- text?: string;
173
- segments?: TextSegment[];
174
- level?: "h1" | "h2" | "h3";
175
- fontSize?: string;
176
- fontFamily?: string;
177
- fontStyle?: "normal" | "italic";
178
- fontWeight?: string | number;
179
- lineHeight?: string | number;
180
- color?: string;
181
- gradient?: GradientValue;
182
- textAlign?: "left" | "center" | "right";
183
- className?: string;
184
- };
185
- type TextBlockProps = {
186
- text?: string;
187
- segments?: TextSegment[];
188
- variant?: "subtitle" | "body" | "caption";
189
- fontSize?: string;
190
- fontFamily?: string;
191
- fontStyle?: "normal" | "italic";
192
- fontWeight?: string | number;
193
- lineHeight?: string | number;
194
- color?: string;
195
- gradient?: GradientValue;
196
- textAlign?: "left" | "center" | "right";
197
- className?: string;
198
- };
199
- type ImageBlockProps = {
200
- src: string;
201
- alt?: string;
202
- width?: string;
203
- height?: string;
204
- className?: string;
205
- };
206
- type ButtonBlockProps = {
207
- label: string;
208
- action: ButtonAction;
209
- variant?: "default" | "outline" | "ghost" | "link";
210
- className?: string;
211
- };
212
- type SpacerBlockProps = {
213
- size?: number;
214
- };
215
- type DividerBlockProps = {
216
- color?: string;
217
- gradient?: GradientValue;
218
- thickness?: number;
219
- decorative?: "dots" | "diamond" | "wave" | "fade";
220
- className?: string;
221
- };
222
- type StatBlockProps = {
223
- value: string;
224
- label: string;
225
- className?: string;
226
- };
227
- type IconBlockProps = {
228
- name: string;
229
- size?: number;
230
- color?: string;
231
- gradient?: {
232
- from: string;
233
- to: string;
234
- };
235
- className?: string;
236
- };
237
- type BadgeVariant = "default" | "outline" | "success" | "warning" | "info";
238
- type BadgeItem = {
239
- text: string;
240
- variant?: BadgeVariant;
241
- icon?: string;
242
- };
243
- type BadgeBlockProps = {
244
- /** Single badge text (backward compat). Ignored when `items` is set. */
245
- text?: string;
246
- variant?: BadgeVariant;
247
- /** Multiple badges. Takes precedence over `text`/`variant`. */
248
- items?: BadgeItem[];
249
- gap?: number;
250
- className?: string;
251
- };
252
- type ListBlockProps = {
253
- items: string[];
254
- style?: "bullet" | "numbered" | "check";
255
- className?: string;
256
- };
257
- type ComparisonBar = {
258
- label: string;
259
- value: number | string;
260
- color?: string;
261
- gradient?: GradientValue;
262
- percentageColor?: string;
263
- };
264
- type ComparisonBarBlockProps = {
265
- bars: ComparisonBar[];
266
- showPercentage?: boolean;
267
- maxBarHeight?: number;
268
- barWidth?: number;
269
- gap?: number;
270
- animationDuration?: number;
271
- staggerDelay?: number;
272
- borderRadius?: number;
273
- className?: string;
274
- };
275
- type CounterBlockProps = {
276
- value: number | string;
277
- prefix?: string;
278
- suffix?: string;
279
- startDelay?: number;
280
- duration?: number;
281
- decimals?: number;
282
- hapticInterval?: number;
283
- fontSize?: string;
284
- fontWeight?: string | number;
285
- color?: string;
286
- gradient?: GradientValue;
287
- fontFamily?: string;
288
- className?: string;
289
- };
290
- type DecoratedTextBlockProps = {
291
- text?: string;
292
- segments?: TextSegment[];
293
- leftImage?: string;
294
- rightImage?: string;
295
- imageSize?: number;
296
- fontSize?: string;
297
- fontWeight?: string | number;
298
- lineHeight?: string | number;
299
- color?: string;
300
- gradient?: GradientValue;
301
- textAlign?: "left" | "center" | "right";
302
- className?: string;
303
- };
304
- type QuoteBlockProps = {
305
- quote: string;
306
- author: string;
307
- role?: string;
308
- avatar?: string;
309
- stars?: number;
310
- className?: string;
311
- };
312
- type VideoBlockProps = {
313
- src?: string;
314
- previewImage?: string;
315
- autoplay?: boolean;
316
- loop?: boolean;
317
- muted?: boolean;
318
- controls?: boolean;
319
- aspectRatio?: string;
320
- youtubeId?: string;
321
- vimeoId?: string;
322
- className?: string;
323
- };
324
- type CardBlockProps = {
325
- title?: string;
326
- description?: string;
327
- icon?: string;
328
- image?: string;
329
- variant?: "default" | "outlined" | "elevated" | "glass";
330
- padding?: number;
331
- borderRadius?: number;
332
- className?: string;
333
- };
334
- type CalloutBlockProps = {
335
- text: string;
336
- title?: string;
337
- variant?: "info" | "warning" | "success" | "tip";
338
- icon?: string;
339
- className?: string;
340
- };
341
- type ProgressBarBlockProps = {
342
- value: number | string;
343
- label?: string;
344
- color?: string;
345
- gradient?: GradientValue;
346
- height?: number;
347
- animated?: boolean;
348
- showPercentage?: boolean;
349
- borderRadius?: number;
350
- className?: string;
351
- };
352
- type LottieBlockProps = {
353
- src: string;
354
- autoplay?: boolean;
355
- loop?: boolean;
356
- speed?: number;
357
- width?: string;
358
- height?: string;
359
- className?: string;
360
- };
361
- type MediaSlide = {
362
- type?: "media";
363
- image?: string;
364
- title?: string;
365
- description?: string;
366
- };
367
- type QuoteSlide = {
368
- type: "quote";
369
- quote: string;
370
- author: string;
371
- role?: string;
372
- avatar?: string;
373
- stars?: number;
374
- };
375
- type CarouselSlide = MediaSlide | QuoteSlide;
376
- type CarouselBlockProps = {
377
- items: CarouselSlide[];
378
- autoplay?: boolean;
379
- autoplayInterval?: number;
380
- loop?: boolean;
381
- showDots?: boolean;
382
- showArrows?: boolean;
383
- className?: string;
384
- };
385
- type ChecklistItem = {
386
- text?: string;
387
- segments?: TextSegment[];
388
- textColor?: string;
389
- lineHeight?: string | number;
390
- checked?: boolean;
391
- icon?: string;
392
- iconColor?: string;
393
- iconGradient?: {
394
- from: string;
395
- to: string;
396
- };
397
- loadDelay?: number;
398
- loadDuration?: number;
399
- };
400
- type ChecklistBlockProps = {
401
- items: ChecklistItem[];
402
- animateOnMount?: boolean;
403
- staggerDelay?: number;
404
- className?: string;
405
- };
406
- type AccordionItem = {
407
- title: string;
408
- content: string;
409
- };
410
- type AccordionBlockProps = {
411
- items: AccordionItem[];
412
- type?: "single" | "multiple";
413
- defaultOpen?: number[];
414
- className?: string;
415
- };
416
- type ColumnConfig = {
417
- blocks: BlockConfig[];
418
- flex?: number;
419
- /** Explicit CSS width (e.g. "75%", "200px"). Overrides flex when set. */
420
- width?: string;
421
- };
422
- type ColumnsBlockProps = {
423
- columns: ColumnConfig[];
424
- gap?: number | string;
425
- responsive?: boolean;
426
- className?: string;
427
- };
428
- type ProgressSegment = {
429
- to: number | string;
430
- duration: number;
431
- };
432
- type CircularProgressBlockProps = {
433
- segments: ProgressSegment[];
434
- startDelay?: number;
435
- size?: number;
436
- strokeWidth?: number;
437
- trackColor?: string;
438
- color?: string;
439
- gradient?: {
440
- from: string;
441
- to: string;
442
- };
443
- showPercentage?: boolean;
444
- percentageColor?: string;
445
- percentageOpacity?: number;
446
- percentageFontSize?: string;
447
- hapticInterval?: number;
448
- className?: string;
449
- };
450
- type ChartLineEndDot = {
451
- icon?: string;
452
- lucideIcon?: string;
453
- lucideIconColor?: string;
454
- imageSrc?: string;
455
- imageAlt?: string;
456
- imageScale?: number;
457
- color?: string;
458
- gradient?: {
459
- from: string;
460
- to: string;
461
- angle?: number;
462
- };
463
- size?: number;
464
- };
465
- type ChartLine = {
466
- points: [number, number][];
467
- color: string;
468
- fill?: {
469
- from: string;
470
- to: string;
471
- opacity?: number;
472
- };
473
- strokeWidth?: number;
474
- dashed?: boolean;
475
- endLabel?: string;
476
- endIcon?: string;
477
- endLabelColor?: string;
478
- endLabelOffset?: {
479
- x?: number;
480
- y?: number;
481
- };
482
- endDot?: ChartLineEndDot;
483
- };
484
- type LineChartBlockProps = {
485
- lines: ChartLine[];
486
- width?: number | string;
487
- height?: number | string;
488
- yLabelGutter?: number;
489
- yLabels?: {
490
- top?: string;
491
- bottom?: string;
492
- topAt?: number;
493
- bottomAt?: number;
494
- };
495
- xLabels?: {
496
- left?: string;
497
- right?: string;
498
- leftAt?: number;
499
- rightAt?: number;
500
- };
501
- animationDuration?: number;
502
- startDelay?: number;
503
- showGrid?: boolean;
504
- axisColor?: string;
505
- labelColor?: string;
506
- className?: string;
507
- };
508
- type AvatarItem = {
509
- src?: string;
510
- name?: string;
511
- };
512
- type AvatarGroupBlockProps = {
513
- avatars: AvatarItem[];
514
- size?: number;
515
- overlap?: number;
516
- max?: number;
517
- borderColor?: string;
518
- borderWidth?: number;
519
- className?: string;
520
- };
521
- type TableCell = string | {
522
- type: "check";
523
- color?: string;
524
- iconLabel?: string;
525
- iconTooltip?: string;
526
- } | {
527
- type: "cross";
528
- color?: string;
529
- iconLabel?: string;
530
- iconTooltip?: string;
531
- } | {
532
- type: "lock";
533
- color?: string;
534
- iconLabel?: string;
535
- iconTooltip?: string;
536
- } | {
537
- type: "warning";
538
- color?: string;
539
- iconLabel?: string;
540
- iconTooltip?: string;
541
- } | {
542
- type: "icon";
543
- name: string;
544
- color?: string;
545
- size?: number;
546
- iconLabel?: string;
547
- iconTooltip?: string;
548
- } | {
549
- type: "text";
550
- text: string;
551
- color?: string;
552
- fontSize?: string;
553
- fontWeight?: string | number;
554
- };
555
- type TableColumn = {
556
- header: string;
557
- headerImage?: string;
558
- highlight?: boolean;
559
- cells: TableCell[];
560
- };
561
- type TableRowLabel = string | {
562
- text: string;
563
- icon?: string;
564
- iconColor?: string;
565
- };
566
- type TableBlockProps = {
567
- rowLabels: TableRowLabel[];
568
- columns: TableColumn[];
569
- highlightColor?: string;
570
- highlightBorderRadius?: number;
571
- rowLabelColor?: string;
572
- headerColor?: string;
573
- dividerColor?: string;
574
- className?: string;
575
- };
576
- type GravityBinItem = {
577
- icon: string;
578
- /** Optional image URL. If present, renders image instead of icon. */
579
- image?: string;
580
- count: number;
581
- };
582
- type GravityBinBlockProps = {
583
- /** Static items to render */
584
- items?: GravityBinItem[];
585
- /** Answer key to read items from (used with iconMap) */
586
- fromAnswer?: string;
587
- /** Maps answer keys to icon names when using fromAnswer */
588
- iconMap?: Record<string, string>;
589
- /** Container height CSS value. Default "300px" */
590
- height?: string;
591
- /** Physics gravity Y. Default 1 */
592
- gravity?: number;
593
- /** Bounce restitution 0-1. Default 0.4 */
594
- restitution?: number;
595
- /** Friction. Default 0.3 */
596
- friction?: number;
597
- /** Icon body radius in px. Default 20 */
598
- iconSize?: number;
599
- /** Whether items are draggable. Default false */
600
- interactive?: boolean;
601
- className?: string;
602
- };
603
- /** Solid CSS color, a full `linear-gradient(...)` string, or a vertical-gradient shorthand. */
604
- type TimelineColor = string | {
605
- from: string;
606
- to: string;
607
- };
608
- type TimelineItem = {
609
- /** Small uppercase text rendered above the title when `labelPlacement="above"`. */
610
- label?: string;
611
- /** Bold heading (e.g. "Today", "In 6 Days"). */
612
- title: string;
613
- description?: string;
614
- /** Lucide icon name. Placement controlled by block-level `iconPlacement`. */
615
- icon?: string;
616
- /** Node fill (badge) or ring (dot) color. */
617
- color?: string;
618
- /** Icon tint when rendered inside the badge. Defaults to white. */
619
- iconColor?: string;
620
- /** Wrap this item's content column (content icon, title, description) in a card. */
621
- contentCard?: boolean;
622
- /** Color of the outgoing line from this item down to the next. Ignored on the last item.
623
- * Falls back to block-level `lineColor`. */
624
- lineColor?: TimelineColor;
625
- /** Opacity of the outgoing line (0–1). Ignored on the last item. Falls back to block-level `lineOpacity`. */
626
- lineOpacity?: number;
627
- };
628
- type TimelineBlockProps = {
629
- items: TimelineItem[];
630
- /** Where the item icon renders. Default "node" (inside a filled badge).
631
- * "content" = above the title (old look). "before-title" = inline before title. "none" = hide icon. */
632
- iconPlacement?: "node" | "content" | "before-title" | "none";
633
- /** Where the item label renders. Default "hidden" (title IS the time).
634
- * "above" = small uppercase label above title (old look). */
635
- labelPlacement?: "above" | "hidden";
636
- /** Node diameter in px. Default 44. */
637
- nodeSize?: number;
638
- /** Connecting line thickness in px. Default 3. */
639
- lineThickness?: number;
640
- /** Vertical gap (px) between items. Default `max(16, nodeSize * 0.4)`. Increase to breathe long descriptions. */
641
- itemSpacing?: number;
642
- /** Vertical gap (px) between an item's title and its description. Default 6 when `iconPlacement="node"`, else 4. */
643
- titleDescGap?: number;
644
- lineStyle?: "solid" | "dashed";
645
- /** Fallback for any item that doesn't set its own `lineColor`. Default `rgba(255,255,255,0.1)`. */
646
- lineColor?: TimelineColor;
647
- /** Fallback line opacity (0–1) for any item that doesn't set its own `lineOpacity`. Default 1. */
648
- lineOpacity?: number;
649
- /** Line segment rendered above the first item. */
650
- startLine?: {
651
- show?: boolean;
652
- feathered?: boolean;
653
- color?: TimelineColor;
654
- opacity?: number;
655
- };
656
- /** Line segment rendered below the last item. */
657
- endLine?: {
658
- show?: boolean;
659
- feathered?: boolean;
660
- color?: TimelineColor;
661
- opacity?: number;
662
- };
663
- animated?: boolean;
664
- /** Which animation plays on mount when `animated=true`. Default "slide-left". */
665
- entryAnimation?: "slide-left" | "fade" | "slide-up" | "scale";
666
- staggerDelay?: number;
667
- className?: string;
668
- };
669
- type FeatureRowIconBg = "circle" | "rounded-square" | "none";
670
- type FeatureRowBlockProps = {
671
- title: string;
672
- description?: string;
673
- icon?: string;
674
- iconSize?: number;
675
- iconColor?: string;
676
- iconGradient?: {
677
- from: string;
678
- to: string;
679
- };
680
- iconBg?: FeatureRowIconBg;
681
- iconBgColor?: string;
682
- layout?: "horizontal" | "vertical";
683
- className?: string;
684
- };
685
- type MetricVariant = "card" | "inline" | "minimal";
686
- type MetricBlockProps = {
687
- value: number | string;
688
- prefix?: string;
689
- suffix?: string;
690
- label: string;
691
- description?: string;
692
- icon?: string;
693
- iconPosition?: "top" | "left" | "left-inline";
694
- color?: string;
695
- gradient?: GradientValue;
696
- accentColor?: string;
697
- variant?: MetricVariant;
698
- /** Compact/dense mode — smaller padding, font sizes, and icon. Designed for tight vertical stacks or side-by-side tiles in columns. */
699
- compact?: boolean;
700
- duration?: number;
701
- decimals?: number;
702
- startDelay?: number;
703
- className?: string;
704
- };
705
- type DeviceFrameVideoPlayback = "paused" | "on_mount" | "on_view" | "on_click";
706
- type DeviceFrameBlockProps = {
707
- src: string;
708
- alt?: string;
709
- variant?: "iphone" | "android";
710
- shadow?: boolean;
711
- mediaType?: "image" | "video";
712
- previewImage?: string;
713
- playback?: DeviceFrameVideoPlayback;
714
- autoplay?: boolean;
715
- loop?: boolean;
716
- muted?: boolean;
717
- controls?: boolean;
718
- className?: string;
719
- };
720
- type BeforeAfterSide = {
721
- label: string;
722
- items: string[];
723
- color?: string;
724
- icon?: string;
725
- };
726
- type BeforeAfterBlockProps = {
727
- before: BeforeAfterSide;
728
- after: BeforeAfterSide;
729
- style?: "split" | "swipe" | "stacked";
730
- className?: string;
731
- };
732
- type NotificationColor = "none" | "white" | "black" | "orange" | "indigo" | "green" | "sunset" | "blue" | "purple";
733
- type NotificationItem = {
734
- title: string;
735
- message: string;
736
- icon?: string;
737
- time?: string;
738
- color?: NotificationColor;
739
- };
740
- type NotificationStackBlockProps = {
741
- notifications: NotificationItem[];
742
- staggerDelay?: number;
743
- className?: string;
744
- };
745
- type FloatingLabelBlockProps = {
746
- text: string;
747
- variant?: "pill" | "badge" | "step";
748
- color?: string;
749
- gradient?: GradientValue;
750
- className?: string;
751
- };
752
- type SingleSelectBlockProps = {
753
- /** Variable name in `answers` that the user's pick is written to. Required. */
754
- variable: string;
755
- options: StepOption[];
756
- /** Top-level shortcut. Wins over `style.layout`. */
757
- layout?: "list" | "grid" | "segmented";
758
- /** Top-level shortcut. Wins over `style.iconIndicator`. Required when options carry icons. */
759
- iconIndicator?: boolean;
760
- /** Finer styling (colors, hover/selected backgrounds, border radius). */
761
- style?: WidgetStyle;
762
- searchThreshold?: number;
763
- /** When true, sibling next/skip buttons on the same page are disabled until a pick exists. */
764
- required?: boolean;
765
- };
766
- type MultiSelectBlockProps = {
767
- /** Variable name in `answers` that the user's picks are written to. Required. */
768
- variable: string;
769
- options: StepOption[];
770
- /** Top-level shortcut. Wins over `style.layout`. */
771
- layout?: "list" | "grid";
772
- /** Top-level shortcut. Wins over `style.iconIndicator`. Required when options carry icons. */
773
- iconIndicator?: boolean;
774
- /** Finer styling (colors, hover/selected backgrounds, border radius). */
775
- style?: WidgetStyle;
776
- /** Hard cap; selecting beyond it replaces the most-recent pick. */
777
- maxSelections?: number;
778
- /** Minimum picks required before sibling next/skip buttons enable. */
779
- minSelections?: number;
780
- };
781
- /** A single feature row in a plan. Strings render as a checkmarked bullet in featured/minimal,
782
- * and as a ✓ in the comparison style. Object form `{ key, value }` lets the comparison style
783
- * group rows by `key` and show different `value`s per plan (e.g. "Storage: 10GB" vs "100GB"). */
784
- type PricingPlanFeature = string | {
785
- key: string;
786
- value: string | boolean;
787
- };
788
- type PricingPlanPeriod = "day" | "week" | "month" | "year" | "one_time";
789
- type PricingPlan = {
790
- /** String fields anywhere inside a plan support templates. `currentPlan` exposes this card's
791
- * flattened price/plan fields (`id`, `name`, `amount`, `currency`, `period`, `trialDays`, ...);
792
- * other answers from the journey are available as their own keys. */
793
- /** Stable id. Stored in answers[variable] when selected; consumer maps id → payment-provider price ID. */
794
- id: string;
795
- /** Display name, e.g. "Pro", "Monthly", "Annual". */
796
- name: string;
797
- price: {
798
- /** Numeric amount. Used for math/sorting and Intl currency formatting when `display` is unset. */
799
- amount: number;
800
- /** ISO 4217 currency code, e.g. "USD", "INR", "EUR". */
801
- currency: string;
802
- /** Subscription period. Defaults to one-time when omitted. */
803
- period?: PricingPlanPeriod;
804
- /** Strikethrough original price, same currency. Only rendered when `display` is unset. */
805
- originalAmount?: number;
806
- /** Override the default period suffix ("/mo", "/yr", etc.) with custom text like "/seat/mo". */
807
- perUnitLabel?: string;
808
- /** Verbatim price string. When set, this is rendered as-is and Intl/period/originalAmount are skipped.
809
- * Use for store-localized strings (StoreKit/Play Billing already format) or special cases ("Free", "Custom"). */
810
- display?: string;
811
- /** Free trial period (StoreKit-compatible). Exposed as `currentPlan.trialDays` in plan templates. */
812
- trial?: {
813
- days: number;
814
- };
815
- /** Introductory pricing (StoreKit-compatible). Exposed as `currentPlan.introOffer` in plan templates. */
816
- introOffer?: {
817
- amount: number;
818
- periods: number;
819
- periodUnit: "day" | "week" | "month";
820
- };
821
- };
822
- description?: string;
823
- /** Small line rendered under the price. Example: `"${currentPlan.trialDays} days free"`.
824
- * Replaces the previously auto-derived
825
- * trial / intro-offer subtext — those are no longer rendered automatically. */
826
- subtext?: string;
827
- features?: PricingPlanFeature[];
828
- /** Floating tag above the card, e.g. "7 Days Free", "Most Popular". */
829
- badge?: string;
830
- /** Lucide icon name; rendered via OptionIcon. */
831
- icon?: string;
832
- /** Optional visibility gate, evaluated against current answers. Reuses BlockCondition. */
833
- condition?: BlockCondition;
834
- /** Opaque pass-through for consumer use (Stripe price ID, RevenueCat package, App Store / Play Store
835
- * product ID, internal SKUs). The block reads nothing from this — it flows through the
836
- * purchase_intent event for the consumer's payment service. */
837
- metadata?: Record<string, unknown>;
838
- };
839
- /** Pricing-specific styling, layered on top of WidgetStyle for shared card chrome. */
840
- type PricingStyle = Partial<WidgetStyle> & {
841
- badgeBackground?: string;
842
- badgeColor?: string;
843
- };
844
- type PricingPlansBlockProps = {
845
- /** Variable name in `answers` where the selected plan id is written. Required. */
846
- variable: string;
847
- /** Plan list, or a whole-value template string like `"${pricingPlans}"` that resolves to one
848
- * at render time (used for dynamic StoreKit/Stripe pricing fed in via `answers`). */
849
- plans: PricingPlan[] | string;
850
- /** Card visual style. Defaults to "featured". */
851
- cardStyle?: "featured" | "minimal" | "comparison";
852
- /** Layout for featured/minimal. Defaults to "list". Ignored when cardStyle="comparison". */
853
- layout?: "list" | "grid";
854
- /** When true, sibling button blocks with action.type "next", "skip", or "purchase" auto-disable until a plan is selected. */
855
- required?: boolean;
856
- /** When set and no answer exists for `variable` yet, this plan id is auto-selected on mount. */
857
- defaultPlanId?: string;
858
- /** Optional answer key containing an applied discount. Used only for display; consumers own pricing math. */
859
- discountVariable?: string;
860
- /** Whether to render currency decimals (e.g. ₹990.00 vs ₹990). Defaults to true.
861
- * Set false for INR/JPY/KRW where pricing is conventionally whole-unit. */
862
- showDecimals?: boolean;
863
- style?: PricingStyle;
864
- };
865
- /** Maps each BlockType to its typed props interface */
866
- type BlockPropsMap = {
867
- heading: HeadingBlockProps;
868
- text: TextBlockProps;
869
- image: ImageBlockProps;
870
- button: ButtonBlockProps;
871
- spacer: SpacerBlockProps;
872
- divider: DividerBlockProps;
873
- stat: StatBlockProps;
874
- icon: IconBlockProps;
875
- badge: BadgeBlockProps;
876
- list: ListBlockProps;
877
- comparison_bar: ComparisonBarBlockProps;
878
- counter: CounterBlockProps;
879
- decorated_text: DecoratedTextBlockProps;
880
- quote: QuoteBlockProps;
881
- video: VideoBlockProps;
882
- card: CardBlockProps;
883
- callout: CalloutBlockProps;
884
- progress_bar: ProgressBarBlockProps;
885
- lottie: LottieBlockProps;
886
- carousel: CarouselBlockProps;
887
- checklist: ChecklistBlockProps;
888
- accordion: AccordionBlockProps;
889
- columns: ColumnsBlockProps;
890
- circular_progress: CircularProgressBlockProps;
891
- line_chart: LineChartBlockProps;
892
- avatar_group: AvatarGroupBlockProps;
893
- table: TableBlockProps;
894
- gravity_bin: GravityBinBlockProps;
895
- timeline: TimelineBlockProps;
896
- feature_row: FeatureRowBlockProps;
897
- metric: MetricBlockProps;
898
- device_frame: DeviceFrameBlockProps;
899
- before_after: BeforeAfterBlockProps;
900
- notification_stack: NotificationStackBlockProps;
901
- floating_label: FloatingLabelBlockProps;
902
- single_select: SingleSelectBlockProps;
903
- multi_select: MultiSelectBlockProps;
904
- pricing_plans: PricingPlansBlockProps;
905
- };
906
- type AnimationPreset = "fade-in" | "slide-up" | "slide-down" | "slide-left" | "slide-right" | "scale-up" | "blur-in" | "none";
907
- type BlockAnimation = {
908
- /** Predefined animation preset. Defaults to "fade-in" */
909
- preset?: AnimationPreset;
910
- /** Duration in seconds. Defaults to 0.5 */
911
- duration?: number;
912
- /** Delay in seconds. If omitted, auto-calculated from block index (index * 0.08s) */
913
- delay?: number;
914
- /** If true, element reserves its space before the animation starts (animates opacity/transform only).
915
- * If false (default), element is hidden and pushes content down as it appears. */
916
- reserveSpace?: boolean;
917
- /** When to trigger the entrance animation.
918
- * "mount" (default) — animate immediately on mount.
919
- * "visible" — animate when the block enters the viewport (fires once). */
920
- animateOn?: "mount" | "visible";
921
- };
922
- type ExitAnimationPreset = "fade-out" | "slide-up" | "slide-down" | "slide-left" | "slide-right" | "scale-down" | "blur-out" | "none";
923
- type BlockExitAnimation = {
924
- /** Predefined exit animation preset. Defaults to "fade-out" */
925
- preset?: ExitAnimationPreset;
926
- /** Duration in seconds. Defaults to 0.35 */
927
- duration?: number;
928
- /** Delay in seconds before exit starts (after trigger). Defaults to 0 */
929
- delay?: number;
930
- /** Auto-hide: seconds after the block appears before it automatically exits.
931
- * Works independently of conditions — the block disappears on a timer. */
932
- autoHideAfter?: number;
933
- };
934
- type BlockCondition = {
935
- /** The step ID whose answer is checked */
936
- answerKey: string;
937
- /** Operator: defaults to "truthy" */
938
- op?: "truthy" | "falsy" | "equals" | "includes" | "notEquals";
939
- /** Value to compare against (for equals/includes/notEquals) */
940
- value?: string | number;
941
- };
942
- /** Base fields shared by every block config entry */
943
- type BlockConfigBase = {
944
- /** Optional stable anchor ID that scroll timelines can target */
945
- anchorId?: string;
946
- /** Optional Tailwind className override applied to the block wrapper */
947
- className?: string;
948
- /** Optional inline style override on the block wrapper */
949
- style?: React.CSSProperties;
950
- /** Optional animation override. Defaults to staggered fade-in */
951
- animation?: BlockAnimation;
952
- /** Optional exit animation played when the block disappears (e.g. condition becomes false) */
953
- exitAnimation?: BlockExitAnimation;
954
- /** If true, block is pinned to the bottom of the page outside the scrollable area */
955
- sticky?: boolean;
956
- /** Optional condition — block is only rendered if condition evaluates true */
957
- condition?: BlockCondition;
958
- /** Per-block override of the journey's `contentMaxWidth`. Numbers are interpreted as px;
959
- * strings are passed through as CSS (e.g. "32rem"). Use "none" to opt out of the journey
960
- * default and let this block fill the available width. */
961
- maxWidth?: number | string | "none";
962
- };
963
- /**
964
- * Discriminated union: `type` narrows `props` to the correct block-specific interface.
965
- * e.g. `{ type: "heading" }` → `props: HeadingBlockProps`
966
- */
967
- type BlockConfig = {
968
- [K in BlockType]: {
969
- type: K;
970
- props: BlockPropsMap[K];
971
- } & BlockConfigBase;
972
- }[BlockType];
973
- type PageLayout = {
974
- /** Flex align-items. Defaults to "center" */
975
- align?: "start" | "center" | "end" | "stretch";
976
- /** Flex justify-content. Defaults to "center" */
977
- justify?: "start" | "center" | "end" | "between" | "around";
978
- /** Gap in rem units. Defaults to 2 */
979
- gap?: number;
980
- /** Flex direction. Defaults to "col" */
981
- direction?: "col" | "row";
982
- /** Text alignment. Defaults to "center" */
983
- textAlign?: "left" | "center" | "right";
984
- /** Max width CSS value. Defaults to none */
985
- maxWidth?: string;
986
- /** Extra Tailwind className on the page wrapper */
987
- className?: string;
988
- };
989
- type RoutingRule = {
990
- /** Single condition or array of conditions to evaluate */
991
- when: BlockCondition | BlockCondition[];
992
- /** How to combine multiple conditions: "all" = AND (default), "any" = OR */
993
- match?: "all" | "any";
994
- /** Step ID to navigate to when this rule matches */
995
- goTo: string;
996
- };
997
- type StepRouting = {
998
- /** Evaluated top-to-bottom; first matching rule wins */
999
- conditions: RoutingRule[];
1000
- /** Fallback step ID if no condition matches. Omit to use next sequential step. */
1001
- default?: string;
1002
- };
1003
- type ScrollTimelineBehavior = "auto" | "smooth";
1004
- type ScrollTimelineEventBase = {
1005
- /** Stable event ID for editor bookkeeping and future references */
1006
- id: string;
1007
- /** Time offset from step mount in seconds */
1008
- at: number;
1009
- };
1010
- type ScrollToTimelineEvent = ScrollTimelineEventBase & {
1011
- action: "scroll_to";
1012
- /** Target location. Use "anchor" for a block anchorId, or top/bottom edges of the info page. */
1013
- target: "anchor" | "top" | "bottom";
1014
- /** Required when target is "anchor" */
1015
- targetId?: string;
1016
- /** Alignment within the viewport. Defaults to "start". */
1017
- block?: "start" | "center" | "end";
1018
- /** Native scroll behavior. Defaults to "smooth". */
1019
- behavior?: ScrollTimelineBehavior;
1020
- };
1021
- type ContinuousScrollTimelineEvent = ScrollTimelineEventBase & {
1022
- action: "continuous_scroll";
1023
- /** Scroll speed in px/sec */
1024
- speedPxPerSecond: number;
1025
- /** Stop condition for this continuous segment. Defaults to "next_event". */
1026
- until?: "next_event" | "end" | "user_interrupt";
1027
- };
1028
- type PauseScrollTimelineEvent = ScrollTimelineEventBase & {
1029
- action: "pause_scroll";
1030
- };
1031
- type ScrollTimelineEvent = ScrollToTimelineEvent | ContinuousScrollTimelineEvent | PauseScrollTimelineEvent;
1032
- type StepScrollTimeline = {
1033
- /** Pause the timeline when the user scrolls, taps, wheels, or presses keys. Defaults to true. */
1034
- pauseOnUserInput?: boolean;
1035
- /** Optional auto-resume delay after user interruption, in seconds. */
1036
- resumeAfter?: number;
1037
- /** Ordered timeline of scroll actions for info pages. */
1038
- events: ScrollTimelineEvent[];
1039
- };
1040
- type StepConfig = {
1041
- id: string;
1042
- type: StepType;
1043
- /** Custom variable name for storing this step's answer. Defaults to `id`. */
1044
- variable?: string;
1045
- preface?: string;
1046
- question?: string;
1047
- description?: string;
1048
- options?: StepOption[];
1049
- validation?: StepValidation;
1050
- fields?: StepField[];
1051
- background?: StepBackground;
1052
- style?: WidgetStyle;
1053
- buttonText?: string;
1054
- /** Centered text shown sticky just above the CTA button */
1055
- footerText?: string;
1056
- /** If true, hides the Next button and auto-advances when an option is selected (single_select only) */
1057
- autoAdvance?: boolean;
1058
- searchThreshold?: number;
1059
- sliderStyle?: SliderStyle;
1060
- swipeCards?: SwipeCardItem[];
1061
- swipeLabels?: SwipeLabels;
1062
- swipeIconAlign?: SwipeCardAlign;
1063
- swipeTextAlign?: SwipeCardAlign;
1064
- swipeIconStyle?: SwipeIconStyle;
1065
- swipeIconColor?: string;
1066
- counterStyle?: CounterStyle;
1067
- showProgress?: boolean;
1068
- countsForProgress?: boolean;
1069
- /** Per-step override for back navigation. When set, takes precedence over the journey-level
1070
- * `allowBackNavigation`. Useful for confirmation/success pages where the user should not
1071
- * be able to walk back into the form. */
1072
- allowBackNavigation?: boolean;
1073
- customComponentId?: string;
1074
- computeEndpoint?: string;
1075
- inputSteps?: string[];
1076
- /** Block-based composition for info_page steps */
1077
- blocks?: BlockConfig[];
1078
- /** Layout settings for the block-based page */
1079
- layout?: PageLayout;
1080
- /** Gradient blob configuration for animated background orbs (1-5 blobs per step) */
1081
- blobs?: BlobConfig[];
1082
- /** Conditional routing — determines which step to navigate to based on answers */
1083
- routing?: StepRouting;
1084
- /** Optional timeline of staggered scroll actions for info_page steps */
1085
- scrollTimeline?: StepScrollTimeline;
1086
- };
1087
- type Arc = {
1088
- id: string;
1089
- label: string;
1090
- stepIds: string[];
1091
- };
1092
- type ComputedVariable = {
1093
- /** Variable name — must be a valid JS identifier. */
1094
- id: string;
1095
- /** Human-readable label for the journey editor. */
1096
- label?: string;
1097
- /** JS expression evaluated against current answers, e.g. "age >= 18 ? 'adult' : 'minor'" */
1098
- expression: string;
1099
- };
1100
- type JourneyConfig = {
1101
- arcs: Arc[];
1102
- steps: StepConfig[];
1103
- computedVariables?: ComputedVariable[];
1104
- /** Split the header progress bar into arc segments. Defaults to true. */
1105
- splitProgressByArcs?: boolean;
1106
- /** Show past and future arc segments. When false, only the current arc is shown. Defaults to true. */
1107
- showAllProgressArcs?: boolean;
1108
- /** Show arc progress segments that have no steps counted for progress. Defaults to false. */
1109
- showEmptyProgressArcs?: boolean;
1110
- /** Allow users to navigate backward through the journey. Defaults to true. */
1111
- allowBackNavigation?: boolean;
1112
- /** Show autogenerated background blobs for steps that do not define blobs explicitly. Defaults to true. */
1113
- showRandomBlobs?: boolean;
1114
- /** CSS class(es) applied to the journey root, e.g. "dark jy-dark-gold" or "jy-light jy-light-gold" */
1115
- theme?: string;
1116
- /** CSS variable overrides applied as inline styles on the journey root, e.g. { "--primary": "oklch(0.7 0.15 250)" } */
1117
- themeVariables?: Record<string, string>;
1118
- /** Background pattern overlay. Defaults to "grid-dots". */
1119
- backgroundPattern?: "none" | "grid-dots" | "grid-lines";
1120
- /** Default max-width for blocks on every page (centers them via `margin-inline: auto`).
1121
- * Numbers are interpreted as px; strings are passed through as CSS. Individual blocks can
1122
- * override or opt out via their own `maxWidth` (set to `"none"` to disable). When unset,
1123
- * blocks fill the page width — except `timeline` and `notification_stack`, which default
1124
- * to 400px because they read poorly when stretched. */
1125
- contentMaxWidth?: number | string;
1126
- };
1127
- /** Flattened plan snapshot stored in `answers[variable]` when a pricing_plans block selection is made.
1128
- * Mirrors `PricingPlan` but lifts `price.*` fields to the top level so templates can use
1129
- * `${selectedPlan.amount}` instead of `${selectedPlan.price.amount}`.
1130
- * Persisted across reloads via storage; legacy plain-string `id` answers are upgraded on mount. */
1131
- type SelectedPlanAnswer = {
1132
- id: string;
1133
- name: string;
1134
- amount: number;
1135
- currency: string;
1136
- period?: PricingPlanPeriod;
1137
- originalAmount?: number;
1138
- perUnitLabel?: string;
1139
- display?: string;
1140
- trialDays?: number;
1141
- introOffer?: {
1142
- amount: number;
1143
- periods: number;
1144
- periodUnit: "day" | "week" | "month";
1145
- };
1146
- description?: string;
1147
- features?: PricingPlanFeature[];
1148
- badge?: string;
1149
- icon?: string;
1150
- metadata?: Record<string, unknown>;
1151
- };
1152
- type DiscountCodeSummaryLine = {
1153
- label: string;
1154
- value: string;
1155
- };
1156
- type AppliedDiscountPricing = {
1157
- /** Optional display override for the discounted plan price. When set, pricing_plans renders it verbatim. */
1158
- display?: string;
1159
- /** Optional numeric discounted amount for consumers that want Journeys to format the card price. */
1160
- amount?: number;
1161
- currency?: string;
1162
- period?: PricingPlanPeriod;
1163
- perUnitLabel?: string;
1164
- originalAmount?: number;
1165
- /** Generic presentation fields; values and units are consumer-owned. `total` is used as a card-price fallback. */
1166
- baseAmount?: number;
1167
- discountAmount?: number;
1168
- subtotal?: number;
1169
- taxAmount?: number;
1170
- total?: number;
1171
- };
1172
- type AppliedDiscountAnswer = {
1173
- code: string;
1174
- /** Plan id this discount was validated against. Omit for plan-agnostic offers. */
1175
- planId?: string;
1176
- planVariable?: string;
1177
- message?: string;
1178
- pricing?: AppliedDiscountPricing;
1179
- summaryLines?: DiscountCodeSummaryLine[];
1180
- metadata?: Record<string, unknown>;
1181
- };
1182
- type DiscountCodeApplyRequest = {
1183
- code: string;
1184
- variable: string;
1185
- planVariable?: string;
1186
- plan?: PricingPlan;
1187
- answers: JourneyAnswers;
1188
- };
1189
- type DiscountCodeApplyResult = {
1190
- valid: true;
1191
- code?: string;
1192
- planId?: string;
1193
- message?: string;
1194
- pricing?: AppliedDiscountPricing;
1195
- summaryLines?: DiscountCodeSummaryLine[];
1196
- metadata?: Record<string, unknown>;
1197
- } | {
1198
- valid: false;
1199
- reason: string;
1200
- metadata?: Record<string, unknown>;
1201
- };
1202
- type StepAnswer = string | string[] | number | boolean | Record<string, string> | Record<string, number> | SelectedPlanAnswer | AppliedDiscountAnswer | readonly PricingPlan[] | null;
1203
- type JourneyAnswers = Record<string, StepAnswer>;
1204
- type NavigationDirection = "forward" | "backward";
1205
- type JourneyEventComputedVariables = JourneyAnswers;
1206
- type JourneyEvent = {
1207
- type: "step_submit";
1208
- step: StepConfig;
1209
- submitted: {
1210
- variable: string;
1211
- value: StepAnswer | undefined;
1212
- };
1213
- answers: JourneyAnswers;
1214
- computedVariables: JourneyEventComputedVariables;
1215
- variables: string[];
1216
- } | {
1217
- type: "navigate";
1218
- from: StepConfig;
1219
- to: StepConfig;
1220
- direction: NavigationDirection;
1221
- answers: JourneyAnswers;
1222
- computedVariables: JourneyEventComputedVariables;
1223
- } | {
1224
- type: "complete";
1225
- answers: JourneyAnswers;
1226
- computedVariables: JourneyEventComputedVariables;
1227
- variables: string[];
1228
- } | {
1229
- /** Fired when the user clicks a button with action.type === "purchase".
1230
- * Does NOT auto-navigate — the consumer takes over for payment, then calls
1231
- * navigation actions (goNext/goToStep) from useJourneyActions(). */
1232
- type: "purchase_intent";
1233
- variable: string;
1234
- plan: PricingPlan;
1235
- discount?: AppliedDiscountAnswer;
1236
- stepId: string;
1237
- answers: JourneyAnswers;
1238
- computedVariables: JourneyEventComputedVariables;
1239
- };
1240
- type StepComponentProps = {
1241
- config: StepConfig;
1242
- answer: StepAnswer | undefined;
1243
- onAnswer: (answer: StepAnswer) => void;
1244
- onNext: () => void;
1245
- };
1246
-
1247
- /** Props when config is provided directly */
1248
- type JourneyWithConfig = {
1249
- config: JourneyConfig;
1250
- apiKey?: never;
1251
- journeyId?: never;
1252
- baseUrl?: never;
1253
- };
1254
- /** Props when config should be fetched via API key */
1255
- type JourneyWithApiKey = {
1256
- config?: never;
1257
- apiKey: string;
1258
- journeyId: string;
1259
- /** Base URL of the server (e.g. "https://app.example.com"). Defaults to http://localhost:3002 */
1260
- baseUrl?: string;
1261
- };
1262
- type JourneyCommonProps = {
1263
- storageKey?: string;
1264
- onEvent?: (event: JourneyEvent) => void;
1265
- className?: string;
1266
- /** CSS class(es) for the journey root, e.g. "dark jy-dark-gold" or "jy-light jy-light-gold". Overrides config.theme when set. */
1267
- theme?: string;
1268
- /** Seed answers available at first render. Useful for runtime-injected data (e.g. live pricing plans referenced via `"${pricingPlans}"` templates). Keys declared in `computedVariables` are ignored because formulas own those values. */
1269
- initialAnswers?: JourneyAnswers;
1270
- /** Runtime option lists keyed by answer key (`step.variable ?? step.id`, or select block `props.variable`). Values override inspector-configured options for rendering only. */
1271
- initialOptions?: JourneyOptionOverrides;
1272
- /** Consumer-owned discount validation/repricing callback. Journeys only handles UI/state. */
1273
- onDiscountCodeApply?: (request: DiscountCodeApplyRequest) => Promise<DiscountCodeApplyResult> | DiscountCodeApplyResult;
1274
- /** Custom loading component shown while fetching config */
1275
- loadingComponent?: ReactNode;
1276
- /** Custom error component shown on fetch failure */
1277
- errorComponent?: (error: Error) => ReactNode;
1278
- };
1279
- type JourneyProps = (JourneyWithConfig | JourneyWithApiKey) & JourneyCommonProps;
1280
- declare function Journey(props: JourneyProps): react_jsx_runtime.JSX.Element;
1281
-
1282
- type FetchState = {
1283
- status: "loading";
1284
- } | {
1285
- status: "ready";
1286
- config: JourneyConfig;
1287
- } | {
1288
- status: "error";
1289
- error: Error;
1290
- };
1291
- declare function useJourneyConfig({ apiKey, journeyId, baseUrl, }: {
1292
- apiKey: string;
1293
- journeyId: string;
1294
- baseUrl?: string;
1295
- }): FetchState;
1296
-
1297
- type DiscountCodeDialogState = {
1298
- variable: string;
1299
- planVariable?: string;
1300
- plan?: PricingPlan;
1301
- initialCode?: string;
1302
- title?: string;
1303
- placeholder?: string;
1304
- applyLabel?: string;
1305
- };
1306
- type DiscountCodeDialogProps = {
1307
- state: DiscountCodeDialogState | null;
1308
- onClose: () => void;
1309
- onApply: (code: string, state: DiscountCodeDialogState) => Promise<DiscountCodeApplyResult>;
1310
- onClear: (state: DiscountCodeDialogState) => void;
1311
- };
1312
- declare function DiscountCodeDialog({ state, onClose, onApply, onClear, }: DiscountCodeDialogProps): react_jsx_runtime.JSX.Element;
1313
-
1314
- /**
1315
- * Reorder config.steps to match the navigation order defined by arcs.
1316
- * Steps not in any arc are appended at the end.
1317
- */
1318
- declare function normalizeStepOrder(config: JourneyConfig): JourneyConfig;
1319
- type JourneyState = {
1320
- config: JourneyConfig;
1321
- currentStepIndex: number;
1322
- answers: JourneyAnswers;
1323
- direction: NavigationDirection;
1324
- };
1325
- type JourneyActions = {
1326
- goNext: (answer?: StepAnswer) => void;
1327
- goBack: () => void;
1328
- goToStep: (stepId: string) => void;
1329
- setAnswer: (stepId: string, answer: StepAnswer) => void;
1330
- getCurrentStep: () => StepConfig;
1331
- getStepAnswer: (stepId: string) => StepAnswer | undefined;
1332
- isFirstStep: () => boolean;
1333
- isLastStep: () => boolean;
1334
- /** Fires a purchase_intent event without auto-navigating. Consumer takes over for payment,
1335
- * then calls goNext/goToStep when ready. */
1336
- firePurchaseIntent: (variable: string, plan: PricingPlan, discount?: AppliedDiscountAnswer) => void;
1337
- openDiscountCodeDialog: (state: DiscountCodeDialogState) => void;
1338
- };
1339
- type JourneyContextValue = {
1340
- state: JourneyState;
1341
- actions: JourneyActions;
1342
- };
1343
- declare const JourneyContext: react.Context<JourneyContextValue | null>;
1344
- type JourneyProviderProps = {
1345
- config: JourneyConfig;
1346
- storageKey?: string;
1347
- /** Theme class override applied to the provider scope so global UI like dialogs inherits journey tokens. */
1348
- theme?: string;
1349
- onEvent?: (event: JourneyEvent) => void;
1350
- /** Runtime-injected answers that override persisted (sessionStorage) values *for keys that
1351
- * appear in `initialAnswers`*. Other persisted keys (e.g. the user's in-progress selections)
1352
- * are preserved across reloads.
1353
- * Use this for dynamic data the consumer fetched at startup, e.g. pricing plans resolved
1354
- * from StoreKit/Play Billing/Stripe: `{ pricingPlans: [...] }`. Keys declared in
1355
- * `computedVariables` are ignored here because formulas own those values. Refreshed prices
1356
- * always win over a stale snapshot in storage. */
1357
- initialAnswers?: JourneyAnswers;
1358
- /** Runtime option lists keyed by answer key (`step.variable ?? step.id`, or select block
1359
- * `props.variable`). These override editor-configured options in the rendered journey only;
1360
- * they are not persisted in answers. Event step configs omit option arrays. */
1361
- initialOptions?: JourneyOptionOverrides;
1362
- /** Consumer-owned discount validation/repricing callback. Journeys only handles UI/state. */
1363
- onDiscountCodeApply?: (request: DiscountCodeApplyRequest) => Promise<DiscountCodeApplyResult> | DiscountCodeApplyResult;
1364
- children: ReactNode;
1365
- };
1366
- declare function JourneyProvider({ config: rawConfig, storageKey, theme, onEvent, initialAnswers, initialOptions, onDiscountCodeApply, children, }: JourneyProviderProps): react_jsx_runtime.JSX.Element;
1367
- declare function useJourneyState(): JourneyState;
1368
- declare function useJourneyActions(): JourneyActions;
1369
-
1370
- declare function JourneyShell({ className, theme }?: {
1371
- className?: string;
1372
- theme?: string;
1373
- }): react_jsx_runtime.JSX.Element;
1374
-
1375
- /**
1376
- * Returns true if <SegmentedProgress /> will render visible progress UI
1377
- * for the given step. Keep in sync with the render logic below — used by
1378
- * JourneyShell to decide whether to reserve header space at all.
1379
- */
1380
- declare function hasVisibleProgress(config: JourneyConfig, currentStepIndex: number): boolean;
1381
- declare function SegmentedProgress(): react_jsx_runtime.JSX.Element | null;
1382
-
1383
- declare function StepRenderer({ config }: {
1384
- config: StepConfig;
1385
- }): react_jsx_runtime.JSX.Element;
1386
-
1387
- /** Metadata for each block type — seed for a future journey editor drag-and-drop palette */
1388
- declare const BLOCK_META: Record<BlockType, {
1389
- label: string;
1390
- description: string;
1391
- }>;
1392
-
1393
- /**
1394
- * Evaluates a BlockCondition against the current answers.
1395
- * Returns true if the block should be rendered.
1396
- */
1397
- declare function evaluateCondition(condition: BlockCondition, answers: JourneyAnswers): boolean;
1398
-
1399
- /**
1400
- * Returns true when every input block on the page that contributes a required answer
1401
- * has a satisfying value in `answers`. Blocks whose `condition` evaluates false are
1402
- * skipped (they aren't visible, so they can't gate the next button).
1403
- */
1404
- declare function arePageInputsValid(blocks: BlockConfig[], answers: JourneyAnswers): boolean;
1405
-
1406
- /**
1407
- * Evaluates all computed variable expressions against the current answers.
1408
- * Returns only the computed values.
1409
- * Computed variable ids are formula-owned; if a raw answer has the same key,
1410
- * the computed value wins in the merged result.
1411
- *
1412
- * Variables are evaluated in order so later ones can reference earlier ones.
1413
- */
1414
- declare function resolveComputedVariableValues(computedVariables: ComputedVariable[] | undefined, answers: JourneyAnswers): JourneyAnswers;
1415
- /**
1416
- * Evaluates all computed variable expressions against the current answers.
1417
- * Returns a new answers object with computed values merged in.
1418
- */
1419
- declare function resolveComputedVariables(computedVariables: ComputedVariable[] | undefined, answers: JourneyAnswers): JourneyAnswers;
1420
-
1421
- type GravityBinProps = {
1422
- /** Flat array of items — each entry = one physics body */
1423
- items: Array<{
1424
- id: string;
1425
- icon: string;
1426
- image?: string;
1427
- }>;
1428
- /** Container height CSS value. Default "100%" */
1429
- height?: string;
1430
- /** Matter.js gravity.y. Default 1 */
1431
- gravity?: number;
1432
- /** Bounce restitution 0-1. Default 0.4 */
1433
- restitution?: number;
1434
- /** Body friction. Default 0.3 */
1435
- friction?: number;
1436
- /** Radius of each icon circle body in px. Default 20 */
1437
- iconSize?: number;
1438
- /** Whether items are draggable. Default false */
1439
- interactive?: boolean;
1440
- className?: string;
1441
- };
1442
- declare function GravityBin({ items, height, gravity, restitution, friction, iconSize, interactive, className, }: GravityBinProps): react_jsx_runtime.JSX.Element;
1443
-
1444
- declare function TimelineBlock({ items, iconPlacement, labelPlacement, nodeSize, lineThickness, itemSpacing, titleDescGap, lineStyle, lineColor, lineOpacity, startLine, endLine, animated, entryAnimation, staggerDelay, className, }: TimelineBlockProps): react_jsx_runtime.JSX.Element;
1445
-
1446
- export { type AccordionBlockProps, type AccordionItem, type AnimationPreset, type AppliedDiscountAnswer, type AppliedDiscountPricing, type Arc, type AvatarGroupBlockProps, type AvatarItem, BLOCK_META, type BadgeBlockProps, type BadgeItem, type BadgeVariant, type BeforeAfterBlockProps, type BeforeAfterSide, type BlobConfig, type BlockAnimation, type BlockCondition, type BlockConfig, type BlockExitAnimation, type BlockPropsMap, type BlockType, type ButtonAction, type ButtonBlockProps, type CalloutBlockProps, type CardBlockProps, type CarouselBlockProps, type CarouselSlide, type ChartLine, type ChartLineEndDot, type ChecklistBlockProps, type ChecklistItem, type CircularProgressBlockProps, type ColumnConfig, type ColumnsBlockProps, type ComparisonBar, type ComparisonBarBlockProps, type ComputedVariable, type ContinuousScrollTimelineEvent, type CounterBlockProps, type CounterStyle, type DecoratedTextBlockProps, type DeviceFrameBlockProps, type DiscountCodeApplyRequest, type DiscountCodeApplyResult, DiscountCodeDialog, type DiscountCodeDialogState, type DiscountCodeSummaryLine, type DividerBlockProps, type ExitAnimationPreset, type FeatureRowBlockProps, type FeatureRowIconBg, type FetchState, type FloatingLabelBlockProps, GravityBin, type GravityBinBlockProps, type GravityBinItem, type GravityBinProps, type HeadingBlockProps, type IconBlockProps, type ImageBlockProps, Journey, type JourneyAnswers, type JourneyConfig, JourneyContext, type JourneyEvent, type JourneyEventComputedVariables, type JourneyOptionOverrides, type JourneyProps, JourneyProvider, type JourneyProviderProps, JourneyShell, type LineChartBlockProps, type ListBlockProps, type LottieBlockProps, type MediaSlide, type MetricBlockProps, type MetricVariant, type MultiSelectBlockProps, type NavigationDirection, type NotificationColor, type NotificationItem, type NotificationStackBlockProps, type PageLayout, type PauseScrollTimelineEvent, type PricingPlan, type PricingPlanFeature, type PricingPlanPeriod, type PricingPlansBlockProps, type PricingStyle, type ProgressBarBlockProps, type ProgressSegment, type QuoteBlockProps, type QuoteSlide, type RoutingRule, type ScrollTimelineBehavior, type ScrollTimelineEvent, type ScrollToTimelineEvent, SegmentedProgress, type SelectedPlanAnswer, type SingleSelectBlockProps, type SliderStyle, type SpacerBlockProps, type StatBlockProps, type StepAnswer, type StepBackground, type StepComponentProps, type StepConfig, type StepField, type StepOption, StepRenderer, type StepRouting, type StepScrollTimeline, type StepType, type StepValidation, type SwipeCardAlign, type SwipeCardItem, type SwipeIconStyle, type SwipeLabels, type TableBlockProps, type TableCell, type TableColumn, type TableRowLabel, type TextBlockProps, type TextSegment, TimelineBlock, type TimelineBlockProps, type TimelineColor, type TimelineItem, type VideoBlockProps, type WidgetStyle, arePageInputsValid, evaluateCondition, hasVisibleProgress, normalizeStepOrder, resolveComputedVariableValues, resolveComputedVariables, useJourneyActions, useJourneyConfig, useJourneyState };
1
+ export { Journey } from './_tsup-dts-rollup.js';
2
+ export { JourneyProps } from './_tsup-dts-rollup.js';
3
+ export { useJourneyConfig } from './_tsup-dts-rollup.js';
4
+ export { FetchState } from './_tsup-dts-rollup.js';
5
+ export { JourneyCaptureOptions } from './_tsup-dts-rollup.js';
6
+ export { JourneyProvider } from './_tsup-dts-rollup.js';
7
+ export { JourneyProviderProps } from './_tsup-dts-rollup.js';
8
+ export { JourneyShell } from './_tsup-dts-rollup.js';
9
+ export { useJourneyState } from './_tsup-dts-rollup.js';
10
+ export { useJourneyActions } from './_tsup-dts-rollup.js';
11
+ export { JourneyContext } from './_tsup-dts-rollup.js';
12
+ export { normalizeStepOrder } from './_tsup-dts-rollup.js';
13
+ export { DiscountCodeDialog } from './_tsup-dts-rollup.js';
14
+ export { DiscountCodeDialogState } from './_tsup-dts-rollup.js';
15
+ export { SegmentedProgress } from './_tsup-dts-rollup.js';
16
+ export { hasVisibleProgress } from './_tsup-dts-rollup.js';
17
+ export { StepRenderer } from './_tsup-dts-rollup.js';
18
+ export { BLOCK_META } from './_tsup-dts-rollup.js';
19
+ export { evaluateCondition } from './_tsup-dts-rollup.js';
20
+ export { arePageInputsValid } from './_tsup-dts-rollup.js';
21
+ export { resolveComputedVariables } from './_tsup-dts-rollup.js';
22
+ export { resolveComputedVariableValues } from './_tsup-dts-rollup.js';
23
+ export { GravityBin } from './_tsup-dts-rollup.js';
24
+ export { GravityBinProps } from './_tsup-dts-rollup.js';
25
+ export { TimelineBlock } from './_tsup-dts-rollup.js';
26
+ export { ComputedVariable } from './_tsup-dts-rollup.js';
27
+ export { JourneyConfig } from './_tsup-dts-rollup.js';
28
+ export { JourneyAnswers } from './_tsup-dts-rollup.js';
29
+ export { JourneyOptionOverrides } from './_tsup-dts-rollup.js';
30
+ export { StepConfig } from './_tsup-dts-rollup.js';
31
+ export { StepType } from './_tsup-dts-rollup.js';
32
+ export { StepOption } from './_tsup-dts-rollup.js';
33
+ export { SwipeCardItem } from './_tsup-dts-rollup.js';
34
+ export { SwipeCardAlign } from './_tsup-dts-rollup.js';
35
+ export { SwipeIconStyle } from './_tsup-dts-rollup.js';
36
+ export { SwipeLabels } from './_tsup-dts-rollup.js';
37
+ export { StepField } from './_tsup-dts-rollup.js';
38
+ export { StepAnswer } from './_tsup-dts-rollup.js';
39
+ export { StepComponentProps } from './_tsup-dts-rollup.js';
40
+ export { StepValidation } from './_tsup-dts-rollup.js';
41
+ export { StepBackground } from './_tsup-dts-rollup.js';
42
+ export { Arc } from './_tsup-dts-rollup.js';
43
+ export { NavigationDirection } from './_tsup-dts-rollup.js';
44
+ export { JourneyEvent } from './_tsup-dts-rollup.js';
45
+ export { JourneyEventComputedVariables } from './_tsup-dts-rollup.js';
46
+ export { BlockConfig } from './_tsup-dts-rollup.js';
47
+ export { BlockType } from './_tsup-dts-rollup.js';
48
+ export { PageLayout } from './_tsup-dts-rollup.js';
49
+ export { BlockAnimation } from './_tsup-dts-rollup.js';
50
+ export { AnimationPreset } from './_tsup-dts-rollup.js';
51
+ export { BlockExitAnimation } from './_tsup-dts-rollup.js';
52
+ export { ExitAnimationPreset } from './_tsup-dts-rollup.js';
53
+ export { BlockCondition } from './_tsup-dts-rollup.js';
54
+ export { WidgetStyle } from './_tsup-dts-rollup.js';
55
+ export { SliderStyle } from './_tsup-dts-rollup.js';
56
+ export { CounterStyle } from './_tsup-dts-rollup.js';
57
+ export { BlobConfig } from './_tsup-dts-rollup.js';
58
+ export { RoutingRule } from './_tsup-dts-rollup.js';
59
+ export { StepRouting } from './_tsup-dts-rollup.js';
60
+ export { ScrollTimelineBehavior } from './_tsup-dts-rollup.js';
61
+ export { ScrollTimelineEvent } from './_tsup-dts-rollup.js';
62
+ export { ScrollToTimelineEvent } from './_tsup-dts-rollup.js';
63
+ export { ContinuousScrollTimelineEvent } from './_tsup-dts-rollup.js';
64
+ export { PauseScrollTimelineEvent } from './_tsup-dts-rollup.js';
65
+ export { StepScrollTimeline } from './_tsup-dts-rollup.js';
66
+ export { HeadingBlockProps } from './_tsup-dts-rollup.js';
67
+ export { TextBlockProps } from './_tsup-dts-rollup.js';
68
+ export { ButtonBlockProps } from './_tsup-dts-rollup.js';
69
+ export { ImageBlockProps } from './_tsup-dts-rollup.js';
70
+ export { SpacerBlockProps } from './_tsup-dts-rollup.js';
71
+ export { DividerBlockProps } from './_tsup-dts-rollup.js';
72
+ export { StatBlockProps } from './_tsup-dts-rollup.js';
73
+ export { IconBlockProps } from './_tsup-dts-rollup.js';
74
+ export { BadgeBlockProps } from './_tsup-dts-rollup.js';
75
+ export { ListBlockProps } from './_tsup-dts-rollup.js';
76
+ export { ComparisonBarBlockProps } from './_tsup-dts-rollup.js';
77
+ export { CounterBlockProps } from './_tsup-dts-rollup.js';
78
+ export { DecoratedTextBlockProps } from './_tsup-dts-rollup.js';
79
+ export { QuoteBlockProps } from './_tsup-dts-rollup.js';
80
+ export { VideoBlockProps } from './_tsup-dts-rollup.js';
81
+ export { CardBlockProps } from './_tsup-dts-rollup.js';
82
+ export { CalloutBlockProps } from './_tsup-dts-rollup.js';
83
+ export { ProgressBarBlockProps } from './_tsup-dts-rollup.js';
84
+ export { LottieBlockProps } from './_tsup-dts-rollup.js';
85
+ export { CarouselBlockProps } from './_tsup-dts-rollup.js';
86
+ export { ChecklistBlockProps } from './_tsup-dts-rollup.js';
87
+ export { AccordionBlockProps } from './_tsup-dts-rollup.js';
88
+ export { ColumnsBlockProps } from './_tsup-dts-rollup.js';
89
+ export { CircularProgressBlockProps } from './_tsup-dts-rollup.js';
90
+ export { LineChartBlockProps } from './_tsup-dts-rollup.js';
91
+ export { AvatarGroupBlockProps } from './_tsup-dts-rollup.js';
92
+ export { TableBlockProps } from './_tsup-dts-rollup.js';
93
+ export { GravityBinBlockProps } from './_tsup-dts-rollup.js';
94
+ export { GravityBinItem } from './_tsup-dts-rollup.js';
95
+ export { TimelineBlockProps } from './_tsup-dts-rollup.js';
96
+ export { TimelineItem } from './_tsup-dts-rollup.js';
97
+ export { TimelineColor } from './_tsup-dts-rollup.js';
98
+ export { FeatureRowBlockProps } from './_tsup-dts-rollup.js';
99
+ export { FeatureRowIconBg } from './_tsup-dts-rollup.js';
100
+ export { MetricBlockProps } from './_tsup-dts-rollup.js';
101
+ export { MetricVariant } from './_tsup-dts-rollup.js';
102
+ export { DeviceFrameBlockProps } from './_tsup-dts-rollup.js';
103
+ export { BeforeAfterBlockProps } from './_tsup-dts-rollup.js';
104
+ export { BeforeAfterSide } from './_tsup-dts-rollup.js';
105
+ export { NotificationStackBlockProps } from './_tsup-dts-rollup.js';
106
+ export { NotificationItem } from './_tsup-dts-rollup.js';
107
+ export { NotificationColor } from './_tsup-dts-rollup.js';
108
+ export { FloatingLabelBlockProps } from './_tsup-dts-rollup.js';
109
+ export { SingleSelectBlockProps } from './_tsup-dts-rollup.js';
110
+ export { MultiSelectBlockProps } from './_tsup-dts-rollup.js';
111
+ export { PricingPlansBlockProps } from './_tsup-dts-rollup.js';
112
+ export { PricingPlan } from './_tsup-dts-rollup.js';
113
+ export { PricingPlanFeature } from './_tsup-dts-rollup.js';
114
+ export { PricingPlanPeriod } from './_tsup-dts-rollup.js';
115
+ export { PricingStyle } from './_tsup-dts-rollup.js';
116
+ export { SelectedPlanAnswer } from './_tsup-dts-rollup.js';
117
+ export { AppliedDiscountAnswer } from './_tsup-dts-rollup.js';
118
+ export { AppliedDiscountPricing } from './_tsup-dts-rollup.js';
119
+ export { DiscountCodeApplyRequest } from './_tsup-dts-rollup.js';
120
+ export { DiscountCodeApplyResult } from './_tsup-dts-rollup.js';
121
+ export { DiscountCodeSummaryLine } from './_tsup-dts-rollup.js';
122
+ export { BlockPropsMap } from './_tsup-dts-rollup.js';
123
+ export { BadgeItem } from './_tsup-dts-rollup.js';
124
+ export { BadgeVariant } from './_tsup-dts-rollup.js';
125
+ export { TextSegment } from './_tsup-dts-rollup.js';
126
+ export { ButtonAction } from './_tsup-dts-rollup.js';
127
+ export { ComparisonBar } from './_tsup-dts-rollup.js';
128
+ export { MediaSlide } from './_tsup-dts-rollup.js';
129
+ export { QuoteSlide } from './_tsup-dts-rollup.js';
130
+ export { CarouselSlide } from './_tsup-dts-rollup.js';
131
+ export { ChecklistItem } from './_tsup-dts-rollup.js';
132
+ export { AccordionItem } from './_tsup-dts-rollup.js';
133
+ export { ColumnConfig } from './_tsup-dts-rollup.js';
134
+ export { ProgressSegment } from './_tsup-dts-rollup.js';
135
+ export { ChartLine } from './_tsup-dts-rollup.js';
136
+ export { ChartLineEndDot } from './_tsup-dts-rollup.js';
137
+ export { AvatarItem } from './_tsup-dts-rollup.js';
138
+ export { TableCell } from './_tsup-dts-rollup.js';
139
+ export { TableColumn } from './_tsup-dts-rollup.js';
140
+ export { TableRowLabel } from './_tsup-dts-rollup.js';