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