@rocapine/react-native-onboarding 1.25.0 → 1.26.0

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.
Files changed (46) hide show
  1. package/dist/onboarding-example.d.ts +2042 -1914
  2. package/dist/onboarding-example.d.ts.map +1 -1
  3. package/dist/onboarding-example.js +555 -545
  4. package/dist/onboarding-example.js.map +1 -1
  5. package/dist/steps/ComposableScreen/elements/BaseBoxProps.d.ts +2 -0
  6. package/dist/steps/ComposableScreen/elements/BaseBoxProps.d.ts.map +1 -1
  7. package/dist/steps/ComposableScreen/elements/BaseBoxProps.js +1 -0
  8. package/dist/steps/ComposableScreen/elements/BaseBoxProps.js.map +1 -1
  9. package/dist/steps/ComposableScreen/elements/ButtonElement.d.ts +4 -0
  10. package/dist/steps/ComposableScreen/elements/ButtonElement.d.ts.map +1 -1
  11. package/dist/steps/ComposableScreen/elements/CarouselElement.d.ts +1 -0
  12. package/dist/steps/ComposableScreen/elements/CarouselElement.d.ts.map +1 -1
  13. package/dist/steps/ComposableScreen/elements/CheckboxGroupElement.d.ts +1 -0
  14. package/dist/steps/ComposableScreen/elements/CheckboxGroupElement.d.ts.map +1 -1
  15. package/dist/steps/ComposableScreen/elements/DatePickerElement.d.ts +1 -0
  16. package/dist/steps/ComposableScreen/elements/DatePickerElement.d.ts.map +1 -1
  17. package/dist/steps/ComposableScreen/elements/IconElement.d.ts +5 -0
  18. package/dist/steps/ComposableScreen/elements/IconElement.d.ts.map +1 -1
  19. package/dist/steps/ComposableScreen/elements/IconElement.js +2 -0
  20. package/dist/steps/ComposableScreen/elements/IconElement.js.map +1 -1
  21. package/dist/steps/ComposableScreen/elements/InputElement.d.ts +1 -0
  22. package/dist/steps/ComposableScreen/elements/InputElement.d.ts.map +1 -1
  23. package/dist/steps/ComposableScreen/elements/KeyboardAvoidingViewElement.d.ts +1 -0
  24. package/dist/steps/ComposableScreen/elements/KeyboardAvoidingViewElement.d.ts.map +1 -1
  25. package/dist/steps/ComposableScreen/elements/LottieElement.d.ts +1 -0
  26. package/dist/steps/ComposableScreen/elements/LottieElement.d.ts.map +1 -1
  27. package/dist/steps/ComposableScreen/elements/RadioGroupElement.d.ts +1 -0
  28. package/dist/steps/ComposableScreen/elements/RadioGroupElement.d.ts.map +1 -1
  29. package/dist/steps/ComposableScreen/elements/RiveElement.d.ts +1 -0
  30. package/dist/steps/ComposableScreen/elements/RiveElement.d.ts.map +1 -1
  31. package/dist/steps/ComposableScreen/elements/SafeAreaViewElement.d.ts +1 -0
  32. package/dist/steps/ComposableScreen/elements/SafeAreaViewElement.d.ts.map +1 -1
  33. package/dist/steps/ComposableScreen/elements/ScrollViewElement.d.ts +1 -0
  34. package/dist/steps/ComposableScreen/elements/ScrollViewElement.d.ts.map +1 -1
  35. package/dist/steps/ComposableScreen/elements/StackElement.d.ts +1 -0
  36. package/dist/steps/ComposableScreen/elements/StackElement.d.ts.map +1 -1
  37. package/dist/steps/ComposableScreen/elements/TextElement.d.ts +1 -0
  38. package/dist/steps/ComposableScreen/elements/TextElement.d.ts.map +1 -1
  39. package/dist/steps/ComposableScreen/elements/VideoElement.d.ts +1 -0
  40. package/dist/steps/ComposableScreen/elements/VideoElement.d.ts.map +1 -1
  41. package/dist/steps/ComposableScreen/elements/ZStackElement.d.ts +1 -0
  42. package/dist/steps/ComposableScreen/elements/ZStackElement.d.ts.map +1 -1
  43. package/package.json +1 -1
  44. package/src/onboarding-example.ts +12 -2
  45. package/src/steps/ComposableScreen/elements/BaseBoxProps.ts +2 -0
  46. package/src/steps/ComposableScreen/elements/IconElement.ts +4 -0
package/dist/onboarding-example.js CHANGED
@@ -112,628 +112,638 @@ exports.onboardingExample = {
112
112
  props: { flex: 1, edges: ["top", "bottom"] },
113
113
  children: [
114
114
  {
115
- id: "root",
116
- type: "YStack",
117
- props: { gap: 24, padding: 24 },
115
+ id: "scroll-root",
116
+ type: "ScrollView",
117
+ props: { flex: 1, showsVerticalScrollIndicator: false },
118
118
  children: [
119
119
  {
120
- id: "hero-lottie",
121
- type: "Lottie",
122
- props: {
123
- source: "https://raw.githubusercontent.com/airbnb/lottie-web/master/demo/adrock/data.json",
124
- height: 180,
125
- autoPlay: true,
126
- loop: true,
127
- },
128
- },
129
- {
130
- id: "hero-rive",
131
- type: "Rive",
132
- props: {
133
- url: "https://cdn.rive.app/animations/vehicles.riv",
134
- height: 180,
135
- autoPlay: true,
136
- fit: "Contain",
137
- },
138
- },
139
- {
140
- id: "hero-image",
141
- type: "Image",
142
- props: {
143
- url: "https://picsum.photos/800/400?grayscale",
144
- height: 180,
145
- resizeMode: "cover",
146
- borderRadius: 16,
147
- },
148
- },
149
- {
150
- id: "hero-icon",
151
- type: "Icon",
152
- props: {
153
- name: "Star",
154
- size: 48,
155
- color: "#007AFF",
156
- marginVertical: 8,
157
- },
158
- },
159
- {
160
- id: "hero-video",
161
- type: "Video",
162
- props: {
163
- url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
164
- height: 200,
165
- borderRadius: 12,
166
- controls: true,
167
- muted: true,
168
- contentFit: "cover",
169
- },
170
- },
171
- {
172
- id: "kav-input",
173
- type: "KeyboardAvoidingView",
174
- props: { keyboardVerticalOffset: 24 },
120
+ id: "root",
121
+ type: "YStack",
122
+ props: { gap: 24, padding: 24 },
175
123
  children: [
176
124
  {
177
- id: "hero-input",
178
- type: "Input",
125
+ id: "hero-lottie",
126
+ type: "Lottie",
127
+ props: {
128
+ source: "https://raw.githubusercontent.com/airbnb/lottie-web/master/demo/adrock/data.json",
129
+ height: 180,
130
+ autoPlay: true,
131
+ loop: true,
132
+ },
133
+ },
134
+ {
135
+ id: "hero-rive",
136
+ type: "Rive",
137
+ props: {
138
+ url: "https://cdn.rive.app/animations/vehicles.riv",
139
+ width: "100%",
140
+ aspectRatio: 16 / 9,
141
+ autoPlay: true,
142
+ fit: "FitWidth",
143
+ },
144
+ },
145
+ {
146
+ id: "hero-image",
147
+ type: "Image",
148
+ props: {
149
+ url: "https://picsum.photos/800/400?grayscale",
150
+ height: 180,
151
+ resizeMode: "cover",
152
+ borderRadius: 16,
153
+ },
154
+ },
155
+ {
156
+ id: "hero-icon",
157
+ type: "Icon",
179
158
  props: {
180
- variableName: "name",
181
- placeholder: "Enter your name",
182
- keyboardType: "default",
183
- returnKeyType: "done",
184
- autoCapitalize: "words",
159
+ name: "Star",
160
+ size: 48,
161
+ color: "#007AFF",
162
+ fill: "#007AFF",
163
+ fillOpacity: 0.2,
185
164
  marginVertical: 8,
186
165
  },
187
166
  },
188
- ],
189
- },
190
- {
191
- id: "scroll-demo",
192
- type: "ScrollView",
193
- props: {
194
- horizontal: true,
195
- showsHorizontalScrollIndicator: false,
196
- contentContainerPadding: 4,
197
- },
198
- children: [
199
167
  {
200
- id: "scroll-card-1",
201
- type: "Text",
168
+ id: "hero-video",
169
+ type: "Video",
202
170
  props: {
203
- content: "Card 1",
204
- width: 160,
205
- height: 100,
206
- marginHorizontal: 6,
207
- borderWidth: 1,
171
+ url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
172
+ height: 200,
208
173
  borderRadius: 12,
209
- borderColor: "#00000020",
210
- paddingVertical: 38,
211
- textAlign: "center",
212
- fontSize: 16,
174
+ controls: true,
175
+ muted: true,
176
+ contentFit: "cover",
177
+ },
178
+ },
179
+ {
180
+ id: "kav-input",
181
+ type: "KeyboardAvoidingView",
182
+ props: { keyboardVerticalOffset: 24 },
183
+ children: [
184
+ {
185
+ id: "hero-input",
186
+ type: "Input",
187
+ props: {
188
+ variableName: "name",
189
+ placeholder: "Enter your name",
190
+ keyboardType: "default",
191
+ returnKeyType: "done",
192
+ autoCapitalize: "words",
193
+ marginVertical: 8,
194
+ },
195
+ },
196
+ ],
197
+ },
198
+ {
199
+ id: "scroll-demo",
200
+ type: "ScrollView",
201
+ props: {
202
+ horizontal: true,
203
+ showsHorizontalScrollIndicator: false,
204
+ contentContainerPadding: 4,
205
+ },
206
+ children: [
207
+ {
208
+ id: "scroll-card-1",
209
+ type: "Text",
210
+ props: {
211
+ content: "Card 1",
212
+ width: 160,
213
+ height: 100,
214
+ marginHorizontal: 6,
215
+ borderWidth: 1,
216
+ borderRadius: 12,
217
+ borderColor: "#00000020",
218
+ paddingVertical: 38,
219
+ textAlign: "center",
220
+ fontSize: 16,
221
+ fontWeight: "600",
222
+ },
223
+ },
224
+ {
225
+ id: "scroll-card-2",
226
+ type: "Text",
227
+ props: {
228
+ content: "Card 2",
229
+ width: 160,
230
+ height: 100,
231
+ marginHorizontal: 6,
232
+ borderWidth: 1,
233
+ borderRadius: 12,
234
+ borderColor: "#00000020",
235
+ paddingVertical: 38,
236
+ textAlign: "center",
237
+ fontSize: 16,
238
+ fontWeight: "600",
239
+ },
240
+ },
241
+ {
242
+ id: "scroll-card-3",
243
+ type: "Text",
244
+ props: {
245
+ content: "Card 3",
246
+ width: 160,
247
+ height: 100,
248
+ marginHorizontal: 6,
249
+ borderWidth: 1,
250
+ borderRadius: 12,
251
+ borderColor: "#00000020",
252
+ paddingVertical: 38,
253
+ textAlign: "center",
254
+ fontSize: 16,
255
+ fontWeight: "600",
256
+ },
257
+ },
258
+ {
259
+ id: "scroll-card-4",
260
+ type: "Text",
261
+ props: {
262
+ content: "Card 4",
263
+ width: 160,
264
+ height: 100,
265
+ marginHorizontal: 6,
266
+ borderWidth: 1,
267
+ borderRadius: 12,
268
+ borderColor: "#00000020",
269
+ paddingVertical: 38,
270
+ textAlign: "center",
271
+ fontSize: 16,
272
+ fontWeight: "600",
273
+ },
274
+ },
275
+ ],
276
+ },
277
+ {
278
+ id: "greeting",
279
+ type: "Text",
280
+ props: {
281
+ content: "Hello {{name}}!",
282
+ mode: "expression",
283
+ fontSize: 18,
213
284
  fontWeight: "600",
285
+ textAlign: "center",
286
+ marginVertical: 4,
214
287
  },
215
288
  },
216
289
  {
217
- id: "scroll-card-2",
290
+ id: "headline",
218
291
  type: "Text",
219
292
  props: {
220
- content: "Card 2",
221
- width: 160,
222
- height: 100,
223
- marginHorizontal: 6,
224
- borderWidth: 1,
225
- borderRadius: 12,
226
- borderColor: "#00000020",
227
- paddingVertical: 38,
293
+ content: "Built from the CMS",
294
+ fontSize: 28,
295
+ fontWeight: "700",
296
+ fontFamily: "Inter",
228
297
  textAlign: "center",
229
- fontSize: 16,
230
- fontWeight: "600",
231
298
  },
232
299
  },
233
300
  {
234
- id: "scroll-card-3",
301
+ id: "headline-display",
235
302
  type: "Text",
236
303
  props: {
237
- content: "Card 3",
238
- width: 160,
239
- height: 100,
240
- marginHorizontal: 6,
241
- borderWidth: 1,
242
- borderRadius: 12,
243
- borderColor: "#00000020",
244
- paddingVertical: 38,
304
+ content: "Runtime-loaded font",
305
+ fontSize: 32,
306
+ fontFamily: "Lobster",
307
+ fontStyle: "italic",
245
308
  textAlign: "center",
246
- fontSize: 16,
247
- fontWeight: "600",
309
+ marginVertical: 4,
248
310
  },
249
311
  },
250
312
  {
251
- id: "scroll-card-4",
313
+ id: "inherit-implicit",
252
314
  type: "Text",
253
315
  props: {
254
- content: "Card 4",
255
- width: 160,
256
- height: 100,
257
- marginHorizontal: 6,
258
- borderWidth: 1,
259
- borderRadius: 12,
260
- borderColor: "#00000020",
261
- paddingVertical: 38,
316
+ content: "Inherits theme.typography.defaultFontFamily (omitted)",
317
+ fontSize: 14,
262
318
  textAlign: "center",
263
- fontSize: 16,
264
- fontWeight: "600",
319
+ opacity: 0.6,
265
320
  },
266
321
  },
267
- ],
268
- },
269
- {
270
- id: "greeting",
271
- type: "Text",
272
- props: {
273
- content: "Hello {{name}}!",
274
- mode: "expression",
275
- fontSize: 18,
276
- fontWeight: "600",
277
- textAlign: "center",
278
- marginVertical: 4,
279
- },
280
- },
281
- {
282
- id: "headline",
283
- type: "Text",
284
- props: {
285
- content: "Built from the CMS",
286
- fontSize: 28,
287
- fontWeight: "700",
288
- fontFamily: "Inter",
289
- textAlign: "center",
290
- },
291
- },
292
- {
293
- id: "headline-display",
294
- type: "Text",
295
- props: {
296
- content: "Runtime-loaded font",
297
- fontSize: 32,
298
- fontFamily: "Lobster",
299
- fontStyle: "italic",
300
- textAlign: "center",
301
- marginVertical: 4,
302
- },
303
- },
304
- {
305
- id: "inherit-implicit",
306
- type: "Text",
307
- props: {
308
- content: "Inherits theme.typography.defaultFontFamily (omitted)",
309
- fontSize: 14,
310
- textAlign: "center",
311
- opacity: 0.6,
312
- },
313
- },
314
- {
315
- id: "inherit-explicit",
316
- type: "Text",
317
- props: {
318
- content: "Inherits theme.typography.defaultFontFamily (explicit \"inherit\")",
319
- fontFamily: "inherit",
320
- fontSize: 14,
321
- textAlign: "center",
322
- opacity: 0.6,
323
- },
324
- },
325
- {
326
- id: "subheadline",
327
- type: "Text",
328
- props: {
329
- content: "This screen is composed entirely from a JSON payload — no custom renderer needed.",
330
- fontSize: 15,
331
- textAlign: "center",
332
- lineHeight: 22,
333
- opacity: 0.6,
334
- },
335
- },
336
- {
337
- id: "hero-radio",
338
- type: "RadioGroup",
339
- props: {
340
- variableName: "plan",
341
- defaultValue: "monthly",
342
- gap: 8,
343
- marginVertical: 8,
344
- items: [
345
- { label: "Monthly", value: "monthly" },
346
- { label: "Yearly", value: "yearly" },
347
- { label: "Lifetime", value: "lifetime" },
348
- ],
349
- },
350
- },
351
- {
352
- id: "plan-display",
353
- type: "Text",
354
- props: {
355
- content: "Selected: {{plan}}",
356
- mode: "expression",
357
- fontSize: 14,
358
- textAlign: "center",
359
- opacity: 0.6,
360
- marginVertical: 4,
361
- },
362
- },
363
- {
364
- id: "lifetime-badge",
365
- renderWhen: {
366
- variable: "plan",
367
- operator: "eq",
368
- value: "lifetime",
369
- },
370
- type: "Text",
371
- props: {
372
- content: "🎉 Best value — lifetime access!",
373
- fontSize: 14,
374
- fontWeight: "600",
375
- textAlign: "center",
376
- marginVertical: 4,
377
- },
378
- },
379
- {
380
- id: "hero-checkbox",
381
- type: "CheckboxGroup",
382
- props: {
383
- variableName: "goals",
384
- defaultValues: ["health", "fitness"],
385
- gap: 8,
386
- marginVertical: 8,
387
- items: [
388
- { label: "Improve health", value: "health" },
389
- { label: "Build fitness", value: "fitness" },
390
- { label: "Lose weight", value: "weight" },
391
- { label: "Gain muscle", value: "muscle" },
392
- ],
393
- },
394
- },
395
- {
396
- id: "goals-display",
397
- type: "Text",
398
- props: {
399
- content: "Goals: {{goals}}",
400
- mode: "expression",
401
- fontSize: 14,
402
- textAlign: "center",
403
- opacity: 0.6,
404
- marginVertical: 4,
405
- },
406
- },
407
- {
408
- id: "hero-date-picker",
409
- type: "DatePicker",
410
- props: {
411
- variableName: "birthdate",
412
- defaultValue: "1990-01-01T00:00:00.000Z",
413
- mode: "date",
414
- display: "spinner",
415
- maximumDate: new Date().toISOString(), // static at module load time — suitable for demo; use a runtime value in production
416
- marginVertical: 8,
417
- },
418
- },
419
- {
420
- id: "birthdate-display",
421
- type: "Text",
422
- props: {
423
- content: "Birth date: {{birthdate}}",
424
- mode: "expression",
425
- fontSize: 14,
426
- textAlign: "center",
427
- opacity: 0.6,
428
- marginVertical: 4,
429
- },
430
- },
431
- {
432
- id: "hero-carousel",
433
- type: "Carousel",
434
- props: {
435
- carouselType: "parallax",
436
- autoPlay: false,
437
- loop: true,
438
- showDots: true,
439
- height: 220,
440
- borderRadius: 16,
441
- marginVertical: 8,
442
- defaultIndex: 0,
443
- variableName: "carouselPage",
444
- },
445
- children: [
446
322
  {
447
- id: "carousel-slide-1",
448
- type: "Image",
323
+ id: "inherit-explicit",
324
+ type: "Text",
449
325
  props: {
450
- url: "https://picsum.photos/400/220?random=10",
451
- height: 220,
452
- resizeMode: "cover",
326
+ content: "Inherits theme.typography.defaultFontFamily (explicit \"inherit\")",
327
+ fontFamily: "inherit",
328
+ fontSize: 14,
329
+ textAlign: "center",
330
+ opacity: 0.6,
453
331
  },
454
332
  },
455
333
  {
456
- id: "carousel-slide-2",
457
- type: "Image",
334
+ id: "subheadline",
335
+ type: "Text",
458
336
  props: {
459
- url: "https://picsum.photos/400/220?random=11",
460
- height: 220,
461
- resizeMode: "cover",
337
+ content: "This screen is composed entirely from a JSON payload — no custom renderer needed.",
338
+ fontSize: 15,
339
+ textAlign: "center",
340
+ lineHeight: 22,
341
+ opacity: 0.6,
462
342
  },
463
343
  },
464
344
  {
465
- id: "carousel-slide-3",
466
- type: "Image",
345
+ id: "hero-radio",
346
+ type: "RadioGroup",
467
347
  props: {
468
- url: "https://picsum.photos/400/220?random=12",
469
- height: 220,
470
- resizeMode: "cover",
348
+ variableName: "plan",
349
+ defaultValue: "monthly",
350
+ gap: 8,
351
+ marginVertical: 8,
352
+ items: [
353
+ { label: "Monthly", value: "monthly" },
354
+ { label: "Yearly", value: "yearly" },
355
+ { label: "Lifetime", value: "lifetime" },
356
+ ],
471
357
  },
472
358
  },
473
- ],
474
- },
475
- {
476
- id: "carousel-page-label",
477
- type: "Text",
478
- props: {
479
- content: "Carousel page: {{carouselPage}}",
480
- mode: "expression",
481
- fontSize: 14,
482
- textAlign: "center",
483
- opacity: 0.6,
484
- marginVertical: 4,
485
- },
486
- },
487
- {
488
- id: "carousel-controls",
489
- type: "XStack",
490
- props: { gap: 8, marginVertical: 4 },
491
- children: [
492
359
  {
493
- id: "carousel-go-prev",
494
- type: "Button",
360
+ id: "plan-display",
361
+ type: "Text",
495
362
  props: {
496
- label: "Prev",
497
- variant: "outlined",
498
- flex: 1,
499
- actions: [
500
- {
501
- type: "setVariable",
502
- name: "carouselPage",
503
- value: "{{carouselPage}} - 1",
504
- valueMode: "expression",
505
- },
363
+ content: "Selected: {{plan}}",
364
+ mode: "expression",
365
+ fontSize: 14,
366
+ textAlign: "center",
367
+ opacity: 0.6,
368
+ marginVertical: 4,
369
+ },
370
+ },
371
+ {
372
+ id: "lifetime-badge",
373
+ renderWhen: {
374
+ variable: "plan",
375
+ operator: "eq",
376
+ value: "lifetime",
377
+ },
378
+ type: "Text",
379
+ props: {
380
+ content: "🎉 Best value — lifetime access!",
381
+ fontSize: 14,
382
+ fontWeight: "600",
383
+ textAlign: "center",
384
+ marginVertical: 4,
385
+ },
386
+ },
387
+ {
388
+ id: "hero-checkbox",
389
+ type: "CheckboxGroup",
390
+ props: {
391
+ variableName: "goals",
392
+ defaultValues: ["health", "fitness"],
393
+ gap: 8,
394
+ marginVertical: 8,
395
+ items: [
396
+ { label: "Improve health", value: "health" },
397
+ { label: "Build fitness", value: "fitness" },
398
+ { label: "Lose weight", value: "weight" },
399
+ { label: "Gain muscle", value: "muscle" },
506
400
  ],
507
401
  },
508
402
  },
509
403
  {
510
- id: "carousel-go-next",
511
- type: "Button",
404
+ id: "goals-display",
405
+ type: "Text",
512
406
  props: {
513
- label: "Next",
514
- variant: "outlined",
515
- flex: 1,
516
- actions: [
517
- {
518
- type: "setVariable",
519
- name: "carouselPage",
520
- value: "{{carouselPage}} + 1",
521
- valueMode: "expression",
407
+ content: "Goals: {{goals}}",
408
+ mode: "expression",
409
+ fontSize: 14,
410
+ textAlign: "center",
411
+ opacity: 0.6,
412
+ marginVertical: 4,
413
+ },
414
+ },
415
+ {
416
+ id: "hero-date-picker",
417
+ type: "DatePicker",
418
+ props: {
419
+ variableName: "birthdate",
420
+ defaultValue: "1990-01-01T00:00:00.000Z",
421
+ mode: "date",
422
+ display: "spinner",
423
+ maximumDate: new Date().toISOString(), // static at module load time — suitable for demo; use a runtime value in production
424
+ marginVertical: 8,
425
+ },
426
+ },
427
+ {
428
+ id: "birthdate-display",
429
+ type: "Text",
430
+ props: {
431
+ content: "Birth date: {{birthdate}}",
432
+ mode: "expression",
433
+ fontSize: 14,
434
+ textAlign: "center",
435
+ opacity: 0.6,
436
+ marginVertical: 4,
437
+ },
438
+ },
439
+ {
440
+ id: "hero-carousel",
441
+ type: "Carousel",
442
+ props: {
443
+ carouselType: "parallax",
444
+ autoPlay: false,
445
+ loop: true,
446
+ showDots: true,
447
+ height: 220,
448
+ borderRadius: 16,
449
+ marginVertical: 8,
450
+ defaultIndex: 0,
451
+ variableName: "carouselPage",
452
+ },
453
+ children: [
454
+ {
455
+ id: "carousel-slide-1",
456
+ type: "Image",
457
+ props: {
458
+ url: "https://picsum.photos/400/220?random=10",
459
+ height: 220,
460
+ resizeMode: "cover",
522
461
  },
523
- ],
462
+ },
463
+ {
464
+ id: "carousel-slide-2",
465
+ type: "Image",
466
+ props: {
467
+ url: "https://picsum.photos/400/220?random=11",
468
+ height: 220,
469
+ resizeMode: "cover",
470
+ },
471
+ },
472
+ {
473
+ id: "carousel-slide-3",
474
+ type: "Image",
475
+ props: {
476
+ url: "https://picsum.photos/400/220?random=12",
477
+ height: 220,
478
+ resizeMode: "cover",
479
+ },
480
+ },
481
+ ],
482
+ },
483
+ {
484
+ id: "carousel-page-label",
485
+ type: "Text",
486
+ props: {
487
+ content: "Carousel page: {{carouselPage}}",
488
+ mode: "expression",
489
+ fontSize: 14,
490
+ textAlign: "center",
491
+ opacity: 0.6,
492
+ marginVertical: 4,
524
493
  },
525
494
  },
526
- ],
527
- },
528
- {
529
- id: "zstack-demo",
530
- type: "ZStack",
531
- props: {
532
- height: 200,
533
- borderRadius: 16,
534
- overflow: "hidden",
535
- marginVertical: 8,
536
- },
537
- children: [
538
495
  {
539
- id: "zstack-bg",
540
- type: "Image",
496
+ id: "carousel-controls",
497
+ type: "XStack",
498
+ props: { gap: 8, marginVertical: 4 },
499
+ children: [
500
+ {
501
+ id: "carousel-go-prev",
502
+ type: "Button",
503
+ props: {
504
+ label: "Prev",
505
+ variant: "outlined",
506
+ flex: 1,
507
+ actions: [
508
+ {
509
+ type: "setVariable",
510
+ name: "carouselPage",
511
+ value: "{{carouselPage}} - 1",
512
+ valueMode: "expression",
513
+ },
514
+ ],
515
+ },
516
+ },
517
+ {
518
+ id: "carousel-go-next",
519
+ type: "Button",
520
+ props: {
521
+ label: "Next",
522
+ variant: "outlined",
523
+ flex: 1,
524
+ actions: [
525
+ {
526
+ type: "setVariable",
527
+ name: "carouselPage",
528
+ value: "{{carouselPage}} + 1",
529
+ valueMode: "expression",
530
+ },
531
+ ],
532
+ },
533
+ },
534
+ ],
535
+ },
536
+ {
537
+ id: "zstack-demo",
538
+ type: "ZStack",
541
539
  props: {
542
- url: "https://picsum.photos/800/400?random=20",
543
540
  height: 200,
544
- resizeMode: "cover",
541
+ borderRadius: 16,
542
+ overflow: "hidden",
543
+ marginVertical: 8,
545
544
  },
545
+ children: [
546
+ {
547
+ id: "zstack-bg",
548
+ type: "Image",
549
+ props: {
550
+ url: "https://picsum.photos/800/400?random=20",
551
+ height: 200,
552
+ resizeMode: "cover",
553
+ },
554
+ },
555
+ {
556
+ id: "zstack-overlay",
557
+ type: "YStack",
558
+ props: {
559
+ flex: 1,
560
+ backgroundColor: "rgba(0,0,0,0.45)",
561
+ padding: 20,
562
+ justifyContent: "flex-end",
563
+ },
564
+ children: [
565
+ {
566
+ id: "zstack-label",
567
+ type: "Text",
568
+ props: {
569
+ content: "ZStack: layered elements",
570
+ fontSize: 18,
571
+ fontWeight: "700",
572
+ color: "#fff",
573
+ },
574
+ },
575
+ ],
576
+ },
577
+ ],
546
578
  },
547
579
  {
548
- id: "zstack-overlay",
580
+ id: "hero-button",
581
+ type: "Button",
582
+ props: {
583
+ label: "Get Started",
584
+ variant: "filled",
585
+ marginVertical: 8,
586
+ actions: [
587
+ { type: "custom", function: "trackCta", variables: ["name", "plan", "goals"] },
588
+ "continue",
589
+ ],
590
+ },
591
+ },
592
+ {
593
+ id: "gradient-card",
549
594
  type: "YStack",
550
595
  props: {
551
- flex: 1,
552
- backgroundColor: "rgba(0,0,0,0.45)",
553
596
  padding: 20,
554
- justifyContent: "flex-end",
597
+ gap: 8,
598
+ borderRadius: 16,
599
+ overflow: "hidden",
600
+ marginVertical: 4,
601
+ backgroundGradient: {
602
+ type: "linear",
603
+ from: "topLeft",
604
+ to: "bottomRight",
605
+ stops: [
606
+ { color: "#6C63FF" },
607
+ { color: "#FF6584" },
608
+ ],
609
+ },
555
610
  },
556
611
  children: [
557
612
  {
558
- id: "zstack-label",
613
+ id: "gradient-card-title",
559
614
  type: "Text",
560
- props: {
561
- content: "ZStack: layered elements",
562
- fontSize: 18,
563
- fontWeight: "700",
564
- color: "#fff",
565
- },
615
+ props: { content: "Linear gradient", fontSize: 15, fontWeight: "700", color: "#fff" },
616
+ },
617
+ {
618
+ id: "gradient-card-body",
619
+ type: "Text",
620
+ props: { content: "topLeft → bottomRight", fontSize: 12, color: "#fff", opacity: 0.85 },
566
621
  },
567
622
  ],
568
623
  },
569
- ],
570
- },
571
- {
572
- id: "hero-button",
573
- type: "Button",
574
- props: {
575
- label: "Get Started",
576
- variant: "filled",
577
- marginVertical: 8,
578
- actions: [
579
- { type: "custom", function: "trackCta", variables: ["name", "plan", "goals"] },
580
- "continue",
581
- ],
582
- },
583
- },
584
- {
585
- id: "gradient-card",
586
- type: "YStack",
587
- props: {
588
- padding: 20,
589
- gap: 8,
590
- borderRadius: 16,
591
- overflow: "hidden",
592
- marginVertical: 4,
593
- backgroundGradient: {
594
- type: "linear",
595
- from: "topLeft",
596
- to: "bottomRight",
597
- stops: [
598
- { color: "#6C63FF" },
599
- { color: "#FF6584" },
600
- ],
624
+ {
625
+ id: "gradient-button",
626
+ type: "Button",
627
+ props: {
628
+ label: "Gradient Button",
629
+ variant: "filled",
630
+ marginVertical: 4,
631
+ backgroundGradient: {
632
+ type: "linear",
633
+ from: "left",
634
+ to: "right",
635
+ stops: [
636
+ { color: "#FF6584", position: 0 },
637
+ { color: "#6C63FF", position: 1 },
638
+ ],
639
+ },
640
+ },
601
641
  },
602
- },
603
- children: [
604
642
  {
605
- id: "gradient-card-title",
643
+ id: "states-heading",
606
644
  type: "Text",
607
- props: { content: "Linear gradient", fontSize: 15, fontWeight: "700", color: "#fff" },
645
+ props: {
646
+ content: "Button states & shadow",
647
+ fontSize: 13,
648
+ fontWeight: "700",
649
+ marginVertical: 4,
650
+ opacity: 0.5,
651
+ },
608
652
  },
609
653
  {
610
- id: "gradient-card-body",
611
- type: "Text",
612
- props: { content: "topLeft → bottomRight", fontSize: 12, color: "#fff", opacity: 0.85 },
654
+ id: "btn-shadow",
655
+ type: "Button",
656
+ props: {
657
+ label: "Elevated (shadow)",
658
+ variant: "filled",
659
+ marginVertical: 4,
660
+ backgroundColor: "#6C63FF",
661
+ shadowColor: "#6C63FF",
662
+ shadowOffset: { width: 0, height: 6 },
663
+ shadowOpacity: 0.4,
664
+ shadowRadius: 12,
665
+ elevation: 8,
666
+ },
613
667
  },
614
- ],
615
- },
616
- {
617
- id: "gradient-button",
618
- type: "Button",
619
- props: {
620
- label: "Gradient Button",
621
- variant: "filled",
622
- marginVertical: 4,
623
- backgroundGradient: {
624
- type: "linear",
625
- from: "left",
626
- to: "right",
627
- stops: [
628
- { color: "#FF6584", position: 0 },
629
- { color: "#6C63FF", position: 1 },
630
- ],
668
+ {
669
+ id: "btn-pressed",
670
+ type: "Button",
671
+ props: {
672
+ label: "Press me (hold)",
673
+ variant: "filled",
674
+ marginVertical: 4,
675
+ backgroundColor: "#10b981",
676
+ transitionDurationMs: 300,
677
+ pressedStyle: {
678
+ opacity: 0.6,
679
+ backgroundColor: "#065f46",
680
+ },
681
+ },
631
682
  },
632
- },
633
- },
634
- {
635
- id: "states-heading",
636
- type: "Text",
637
- props: {
638
- content: "Button states & shadow",
639
- fontSize: 13,
640
- fontWeight: "700",
641
- marginVertical: 4,
642
- opacity: 0.5,
643
- },
644
- },
645
- {
646
- id: "btn-shadow",
647
- type: "Button",
648
- props: {
649
- label: "Elevated (shadow)",
650
- variant: "filled",
651
- marginVertical: 4,
652
- backgroundColor: "#6C63FF",
653
- shadowColor: "#6C63FF",
654
- shadowOffset: { width: 0, height: 6 },
655
- shadowOpacity: 0.4,
656
- shadowRadius: 12,
657
- elevation: 8,
658
- },
659
- },
660
- {
661
- id: "btn-pressed",
662
- type: "Button",
663
- props: {
664
- label: "Press me (hold)",
665
- variant: "filled",
666
- marginVertical: 4,
667
- backgroundColor: "#10b981",
668
- transitionDurationMs: 300,
669
- pressedStyle: {
670
- opacity: 0.6,
671
- backgroundColor: "#065f46",
672
- },
673
- },
674
- },
675
- {
676
- id: "btn-disabled",
677
- type: "Button",
678
- props: {
679
- label: "Always disabled",
680
- variant: "filled",
681
- marginVertical: 4,
682
- actions: ["continue"],
683
- disabledWhen: {
684
- variable: "never_enabled",
685
- operator: "neq",
686
- value: "yes",
687
- },
688
- disabledStyle: {
689
- backgroundColor: "#fee2e2",
690
- color: "#b91c1c",
691
- borderRadius: 12,
692
- },
693
- },
694
- },
695
- {
696
- id: "consent-toggle",
697
- type: "Button",
698
- props: {
699
- label: "I agree to the terms",
700
- variant: "outlined",
701
- marginVertical: 8,
702
- actions: [
703
- { type: "setVariable", name: "consent_given", value: "yes", label: "Agreed" },
704
- ],
705
- },
706
- },
707
- {
708
- id: "gated-continue",
709
- type: "Button",
710
- props: {
711
- label: "Continue (gated)",
712
- variant: "filled",
713
- marginVertical: 4,
714
- actions: ["continue"],
715
- disabledWhen: {
716
- variable: "consent_given",
717
- operator: "neq",
718
- value: "yes",
719
- },
720
- transitionDurationMs: 180,
721
- shadowColor: "#000",
722
- shadowOffset: { width: 0, height: 4 },
723
- shadowOpacity: 0.18,
724
- shadowRadius: 8,
725
- elevation: 4,
726
- pressedStyle: {
727
- opacity: 0.7,
728
- backgroundColor: "#4f46e5",
729
- },
730
- disabledStyle: {
731
- backgroundColor: "#d1d5db",
732
- color: "#6b7280",
733
- shadowOpacity: 0,
734
- elevation: 0,
735
- },
736
- },
683
+ {
684
+ id: "btn-disabled",
685
+ type: "Button",
686
+ props: {
687
+ label: "Always disabled",
688
+ variant: "filled",
689
+ marginVertical: 4,
690
+ actions: ["continue"],
691
+ disabledWhen: {
692
+ variable: "never_enabled",
693
+ operator: "neq",
694
+ value: "yes",
695
+ },
696
+ disabledStyle: {
697
+ backgroundColor: "#fee2e2",
698
+ color: "#b91c1c",
699
+ borderRadius: 12,
700
+ },
701
+ },
702
+ },
703
+ {
704
+ id: "consent-toggle",
705
+ type: "Button",
706
+ props: {
707
+ label: "I agree to the terms",
708
+ variant: "outlined",
709
+ marginVertical: 8,
710
+ actions: [
711
+ { type: "setVariable", name: "consent_given", value: "yes", label: "Agreed" },
712
+ ],
713
+ },
714
+ },
715
+ {
716
+ id: "gated-continue",
717
+ type: "Button",
718
+ props: {
719
+ label: "Continue (gated)",
720
+ variant: "filled",
721
+ marginVertical: 4,
722
+ actions: ["continue"],
723
+ disabledWhen: {
724
+ variable: "consent_given",
725
+ operator: "neq",
726
+ value: "yes",
727
+ },
728
+ transitionDurationMs: 180,
729
+ shadowColor: "#000",
730
+ shadowOffset: { width: 0, height: 4 },
731
+ shadowOpacity: 0.18,
732
+ shadowRadius: 8,
733
+ elevation: 4,
734
+ pressedStyle: {
735
+ opacity: 0.7,
736
+ backgroundColor: "#4f46e5",
737
+ },
738
+ disabledStyle: {
739
+ backgroundColor: "#d1d5db",
740
+ color: "#6b7280",
741
+ shadowOpacity: 0,
742
+ elevation: 0,
743
+ },
744
+ },
745
+ },
746
+ ],
737
747
  },
738
748
  ],
739
749
  },