@mission-studio/puck 1.0.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 (20) hide show
  1. package/dist/ResponsiveToggleField-CVhKzDAT.d.mts +183 -0
  2. package/dist/ResponsiveToggleField-CVhKzDAT.d.ts +183 -0
  3. package/dist/chunk-OZYZPWP7.mjs +6288 -0
  4. package/dist/chunk-TTKY3YGP.mjs +262 -0
  5. package/dist/chunk-UJTTHDZA.mjs +16 -0
  6. package/dist/chunk-ZZF2BIMW.mjs +1799 -0
  7. package/dist/config-entry.d.mts +5 -0
  8. package/dist/config-entry.d.ts +5 -0
  9. package/dist/config-entry.js +9159 -0
  10. package/dist/config-entry.mjs +1075 -0
  11. package/dist/editor.d.mts +135 -0
  12. package/dist/editor.d.ts +135 -0
  13. package/dist/editor.js +7046 -0
  14. package/dist/editor.mjs +509 -0
  15. package/dist/index.d.mts +287 -0
  16. package/dist/index.d.ts +287 -0
  17. package/dist/index.js +2106 -0
  18. package/dist/index.mjs +82 -0
  19. package/dist/styles.css +2 -0
  20. package/package.json +97 -0
package/dist/config-entry.mjs ADDED
@@ -0,0 +1,1075 @@
1
+ import {
2
+ createBorderRadiusField,
3
+ createColorField,
4
+ createEntryBoundTextField,
5
+ createResponsiveField,
6
+ createShadowField,
7
+ createSpacingField,
8
+ createThemeableColorField
9
+ } from "./chunk-OZYZPWP7.mjs";
10
+ import {
11
+ Button,
12
+ Card,
13
+ Columns,
14
+ Container,
15
+ CustomImage,
16
+ Divider,
17
+ FeatureGrid,
18
+ FeaturesList,
19
+ Footer,
20
+ Heading,
21
+ Icon,
22
+ Image,
23
+ ImageCarousel,
24
+ Paragraph,
25
+ Popup,
26
+ Section,
27
+ Spacer,
28
+ TextBlock,
29
+ Topbar,
30
+ VideoEmbed,
31
+ availableIcons
32
+ } from "./chunk-ZZF2BIMW.mjs";
33
+ import "./chunk-TTKY3YGP.mjs";
34
+
35
+ // config.tsx
36
+ import { jsx } from "react/jsx-runtime";
37
+ var config = {
38
+ categories: {
39
+ typography: {
40
+ title: "Typography",
41
+ components: ["Heading", "Paragraph"]
42
+ },
43
+ actions: {
44
+ title: "Actions",
45
+ components: ["Button"]
46
+ },
47
+ media: {
48
+ title: "Media",
49
+ components: ["Image", "ImageCarousel", "VideoEmbed", "Icon"]
50
+ },
51
+ layout: {
52
+ title: "Layout",
53
+ components: [
54
+ "Section",
55
+ "Container",
56
+ "Columns",
57
+ "Card",
58
+ "Divider",
59
+ "Spacer"
60
+ ]
61
+ },
62
+ legacy: {
63
+ title: "Legacy",
64
+ components: [
65
+ "TextBlock",
66
+ "CustomImage",
67
+ "FeaturesList",
68
+ "FeatureGrid",
69
+ "Footer",
70
+ "Topbar",
71
+ "Popup"
72
+ ],
73
+ defaultExpanded: false
74
+ }
75
+ },
76
+ components: {
77
+ // ==================
78
+ // TYPOGRAPHY
79
+ // ==================
80
+ Heading: {
81
+ fields: {
82
+ text: createEntryBoundTextField("Text", "Enter heading..."),
83
+ level: {
84
+ type: "select",
85
+ options: [
86
+ { label: "H1", value: "h1" },
87
+ { label: "H2", value: "h2" },
88
+ { label: "H3", value: "h3" },
89
+ { label: "H4", value: "h4" },
90
+ { label: "H5", value: "h5" },
91
+ { label: "H6", value: "h6" }
92
+ ]
93
+ },
94
+ size: {
95
+ type: "select",
96
+ options: [
97
+ { label: "XS", value: "xs" },
98
+ { label: "SM", value: "sm" },
99
+ { label: "MD", value: "md" },
100
+ { label: "LG", value: "lg" },
101
+ { label: "XL", value: "xl" },
102
+ { label: "2XL", value: "2xl" },
103
+ { label: "3XL", value: "3xl" },
104
+ { label: "4XL", value: "4xl" }
105
+ ]
106
+ },
107
+ weight: {
108
+ type: "select",
109
+ options: [
110
+ { label: "Normal", value: "normal" },
111
+ { label: "Medium", value: "medium" },
112
+ { label: "Semibold", value: "semibold" },
113
+ { label: "Bold", value: "bold" },
114
+ { label: "Extrabold", value: "extrabold" }
115
+ ]
116
+ },
117
+ color: createThemeableColorField("Color", "foreground"),
118
+ align: {
119
+ type: "select",
120
+ options: [
121
+ { label: "Left", value: "left" },
122
+ { label: "Center", value: "center" },
123
+ { label: "Right", value: "right" }
124
+ ]
125
+ },
126
+ letterSpacing: {
127
+ type: "select",
128
+ options: [
129
+ { label: "Tight", value: "tight" },
130
+ { label: "Normal", value: "normal" },
131
+ { label: "Wide", value: "wide" }
132
+ ]
133
+ },
134
+ lineHeight: {
135
+ type: "select",
136
+ options: [
137
+ { label: "Tight", value: "tight" },
138
+ { label: "Normal", value: "normal" },
139
+ { label: "Relaxed", value: "relaxed" }
140
+ ]
141
+ }
142
+ },
143
+ defaultProps: {
144
+ text: "Heading",
145
+ level: "h2",
146
+ size: "2xl",
147
+ weight: "bold",
148
+ color: { useTheme: true, themeKey: "foreground" },
149
+ align: "left",
150
+ letterSpacing: "normal",
151
+ lineHeight: "tight"
152
+ },
153
+ render: (props) => /* @__PURE__ */ jsx(Heading, { ...props })
154
+ },
155
+ Paragraph: {
156
+ fields: {
157
+ text: createEntryBoundTextField("Text", "Enter paragraph text..."),
158
+ size: {
159
+ type: "select",
160
+ options: [
161
+ { label: "Small", value: "sm" },
162
+ { label: "Base", value: "base" },
163
+ { label: "Large", value: "lg" },
164
+ { label: "XL", value: "xl" }
165
+ ]
166
+ },
167
+ weight: {
168
+ type: "select",
169
+ options: [
170
+ { label: "Normal", value: "normal" },
171
+ { label: "Medium", value: "medium" },
172
+ { label: "Semibold", value: "semibold" }
173
+ ]
174
+ },
175
+ color: createThemeableColorField("Color", "foreground"),
176
+ align: {
177
+ type: "select",
178
+ options: [
179
+ { label: "Left", value: "left" },
180
+ { label: "Center", value: "center" },
181
+ { label: "Right", value: "right" },
182
+ { label: "Justify", value: "justify" }
183
+ ]
184
+ },
185
+ lineHeight: {
186
+ type: "select",
187
+ options: [
188
+ { label: "Tight", value: "tight" },
189
+ { label: "Normal", value: "normal" },
190
+ { label: "Relaxed", value: "relaxed" },
191
+ { label: "Loose", value: "loose" }
192
+ ]
193
+ },
194
+ maxWidth: { type: "text" }
195
+ },
196
+ defaultProps: {
197
+ text: "Paragraph text goes here.",
198
+ size: "base",
199
+ weight: "normal",
200
+ color: { useTheme: true, themeKey: "foreground" },
201
+ align: "left",
202
+ lineHeight: "normal"
203
+ },
204
+ render: (props) => /* @__PURE__ */ jsx(Paragraph, { ...props })
205
+ },
206
+ // ==================
207
+ // ACTIONS
208
+ // ==================
209
+ Button: {
210
+ fields: {
211
+ text: createEntryBoundTextField("Text", "Button text..."),
212
+ href: { type: "text" },
213
+ target: {
214
+ type: "select",
215
+ options: [
216
+ { label: "Same window", value: "_self" },
217
+ { label: "New window", value: "_blank" }
218
+ ]
219
+ },
220
+ variant: {
221
+ type: "select",
222
+ options: [
223
+ { label: "Solid", value: "solid" },
224
+ { label: "Outline", value: "outline" },
225
+ { label: "Ghost", value: "ghost" },
226
+ { label: "Link", value: "link" }
227
+ ]
228
+ },
229
+ size: {
230
+ type: "select",
231
+ options: [
232
+ { label: "Small", value: "sm" },
233
+ { label: "Medium", value: "md" },
234
+ { label: "Large", value: "lg" },
235
+ { label: "XL", value: "xl" }
236
+ ]
237
+ },
238
+ color: createThemeableColorField("Color", "primary"),
239
+ textColor: createThemeableColorField("Text Color", "background"),
240
+ borderRadius: {
241
+ type: "select",
242
+ options: [
243
+ { label: "None", value: "none" },
244
+ { label: "Small", value: "sm" },
245
+ { label: "Medium", value: "md" },
246
+ { label: "Large", value: "lg" },
247
+ { label: "Full", value: "full" }
248
+ ]
249
+ },
250
+ fullWidth: {
251
+ type: "radio",
252
+ options: [
253
+ { label: "Yes", value: true },
254
+ { label: "No", value: false }
255
+ ]
256
+ },
257
+ align: {
258
+ type: "select",
259
+ options: [
260
+ { label: "Left", value: "left" },
261
+ { label: "Center", value: "center" },
262
+ { label: "Right", value: "right" }
263
+ ]
264
+ }
265
+ },
266
+ defaultProps: {
267
+ text: "Click me",
268
+ variant: "solid",
269
+ size: "md",
270
+ color: { useTheme: true, themeKey: "primary" },
271
+ textColor: { useTheme: true, themeKey: "background" },
272
+ borderRadius: "md",
273
+ fullWidth: false,
274
+ align: "center",
275
+ target: "_self"
276
+ },
277
+ render: (props) => /* @__PURE__ */ jsx(Button, { ...props })
278
+ },
279
+ // ==================
280
+ // MEDIA
281
+ // ==================
282
+ Image: {
283
+ fields: {
284
+ src: createEntryBoundTextField("Image URL", "https://..."),
285
+ alt: { type: "text" },
286
+ width: {
287
+ type: "select",
288
+ options: [
289
+ { label: "Auto", value: "auto" },
290
+ { label: "Full", value: "full" },
291
+ { label: "Small", value: "sm" },
292
+ { label: "Medium", value: "md" },
293
+ { label: "Large", value: "lg" },
294
+ { label: "XL", value: "xl" }
295
+ ]
296
+ },
297
+ aspectRatio: {
298
+ type: "select",
299
+ options: [
300
+ { label: "Auto", value: "auto" },
301
+ { label: "1:1", value: "1:1" },
302
+ { label: "4:3", value: "4:3" },
303
+ { label: "16:9", value: "16:9" },
304
+ { label: "21:9", value: "21:9" }
305
+ ]
306
+ },
307
+ objectFit: {
308
+ type: "select",
309
+ options: [
310
+ { label: "Cover", value: "cover" },
311
+ { label: "Contain", value: "contain" },
312
+ { label: "Fill", value: "fill" },
313
+ { label: "None", value: "none" }
314
+ ]
315
+ },
316
+ borderRadius: {
317
+ type: "select",
318
+ options: [
319
+ { label: "None", value: "none" },
320
+ { label: "Small", value: "sm" },
321
+ { label: "Medium", value: "md" },
322
+ { label: "Large", value: "lg" },
323
+ { label: "XL", value: "xl" },
324
+ { label: "Full", value: "full" }
325
+ ]
326
+ },
327
+ shadow: {
328
+ type: "select",
329
+ options: [
330
+ { label: "None", value: "none" },
331
+ { label: "Small", value: "sm" },
332
+ { label: "Medium", value: "md" },
333
+ { label: "Large", value: "lg" },
334
+ { label: "XL", value: "xl" }
335
+ ]
336
+ },
337
+ align: {
338
+ type: "select",
339
+ options: [
340
+ { label: "Left", value: "left" },
341
+ { label: "Center", value: "center" },
342
+ { label: "Right", value: "right" }
343
+ ]
344
+ },
345
+ caption: createEntryBoundTextField("Caption", "Image caption..."),
346
+ captionColor: createThemeableColorField("Caption Color", "muted")
347
+ },
348
+ defaultProps: {
349
+ width: "full",
350
+ aspectRatio: "auto",
351
+ objectFit: "cover",
352
+ borderRadius: "none",
353
+ shadow: "none",
354
+ align: "center",
355
+ captionColor: { useTheme: true, themeKey: "muted" }
356
+ },
357
+ render: (props) => /* @__PURE__ */ jsx(Image, { ...props })
358
+ },
359
+ ImageCarousel: {
360
+ fields: {
361
+ images: {
362
+ type: "array",
363
+ arrayFields: {
364
+ src: { type: "text" },
365
+ alt: { type: "text" }
366
+ }
367
+ },
368
+ aspectRatio: {
369
+ type: "select",
370
+ options: [
371
+ { label: "16:9", value: "16:9" },
372
+ { label: "4:3", value: "4:3" },
373
+ { label: "1:1", value: "1:1" },
374
+ { label: "21:9", value: "21:9" }
375
+ ]
376
+ },
377
+ borderRadius: {
378
+ type: "select",
379
+ options: [
380
+ { label: "None", value: "none" },
381
+ { label: "Small", value: "sm" },
382
+ { label: "Medium", value: "md" },
383
+ { label: "Large", value: "lg" }
384
+ ]
385
+ },
386
+ showDots: {
387
+ type: "radio",
388
+ options: [
389
+ { label: "Yes", value: true },
390
+ { label: "No", value: false }
391
+ ]
392
+ },
393
+ showArrows: {
394
+ type: "radio",
395
+ options: [
396
+ { label: "Yes", value: true },
397
+ { label: "No", value: false }
398
+ ]
399
+ },
400
+ arrowColor: createThemeableColorField("Arrow Color", "background"),
401
+ dotColor: createThemeableColorField("Dot Color", "primary")
402
+ },
403
+ defaultProps: {
404
+ images: [
405
+ {
406
+ src: "https://placehold.co/800x450/e2e8f0/64748b?text=Slide+1",
407
+ alt: "Slide 1"
408
+ },
409
+ {
410
+ src: "https://placehold.co/800x450/e2e8f0/64748b?text=Slide+2",
411
+ alt: "Slide 2"
412
+ }
413
+ ],
414
+ aspectRatio: "16:9",
415
+ borderRadius: "none",
416
+ showDots: true,
417
+ showArrows: true,
418
+ arrowColor: { useTheme: true, themeKey: "background" },
419
+ dotColor: { useTheme: true, themeKey: "primary" }
420
+ },
421
+ render: (props) => /* @__PURE__ */ jsx(ImageCarousel, { ...props })
422
+ },
423
+ VideoEmbed: {
424
+ fields: {
425
+ url: createEntryBoundTextField("Video URL", "YouTube or Vimeo URL..."),
426
+ aspectRatio: {
427
+ type: "select",
428
+ options: [
429
+ { label: "16:9", value: "16:9" },
430
+ { label: "4:3", value: "4:3" },
431
+ { label: "1:1", value: "1:1" },
432
+ { label: "21:9", value: "21:9" }
433
+ ]
434
+ },
435
+ borderRadius: {
436
+ type: "select",
437
+ options: [
438
+ { label: "None", value: "none" },
439
+ { label: "Small", value: "sm" },
440
+ { label: "Medium", value: "md" },
441
+ { label: "Large", value: "lg" }
442
+ ]
443
+ },
444
+ maxWidth: {
445
+ type: "select",
446
+ options: [
447
+ { label: "Small", value: "sm" },
448
+ { label: "Medium", value: "md" },
449
+ { label: "Large", value: "lg" },
450
+ { label: "XL", value: "xl" },
451
+ { label: "Full", value: "full" }
452
+ ]
453
+ },
454
+ align: {
455
+ type: "select",
456
+ options: [
457
+ { label: "Left", value: "left" },
458
+ { label: "Center", value: "center" },
459
+ { label: "Right", value: "right" }
460
+ ]
461
+ },
462
+ autoplay: {
463
+ type: "radio",
464
+ options: [
465
+ { label: "Yes", value: true },
466
+ { label: "No", value: false }
467
+ ]
468
+ },
469
+ muted: {
470
+ type: "radio",
471
+ options: [
472
+ { label: "Yes", value: true },
473
+ { label: "No", value: false }
474
+ ]
475
+ },
476
+ loop: {
477
+ type: "radio",
478
+ options: [
479
+ { label: "Yes", value: true },
480
+ { label: "No", value: false }
481
+ ]
482
+ }
483
+ },
484
+ defaultProps: {
485
+ aspectRatio: "16:9",
486
+ borderRadius: "none",
487
+ maxWidth: "full",
488
+ align: "center",
489
+ autoplay: false,
490
+ muted: false,
491
+ loop: false
492
+ },
493
+ render: (props) => /* @__PURE__ */ jsx(VideoEmbed, { ...props })
494
+ },
495
+ Icon: {
496
+ fields: {
497
+ name: {
498
+ type: "select",
499
+ options: availableIcons.map((icon) => ({
500
+ label: icon.charAt(0).toUpperCase() + icon.slice(1),
501
+ value: icon
502
+ }))
503
+ },
504
+ size: {
505
+ type: "select",
506
+ options: [
507
+ { label: "Small", value: "sm" },
508
+ { label: "Medium", value: "md" },
509
+ { label: "Large", value: "lg" },
510
+ { label: "XL", value: "xl" },
511
+ { label: "2XL", value: "2xl" }
512
+ ]
513
+ },
514
+ color: createThemeableColorField("Color", "primary"),
515
+ align: {
516
+ type: "select",
517
+ options: [
518
+ { label: "Left", value: "left" },
519
+ { label: "Center", value: "center" },
520
+ { label: "Right", value: "right" }
521
+ ]
522
+ }
523
+ },
524
+ defaultProps: {
525
+ name: "check",
526
+ size: "md",
527
+ color: { useTheme: true, themeKey: "primary" },
528
+ align: "center"
529
+ },
530
+ render: (props) => /* @__PURE__ */ jsx(Icon, { ...props })
531
+ },
532
+ // ==================
533
+ // LAYOUT
534
+ // ==================
535
+ Section: {
536
+ fields: {
537
+ verticalPadding: createSpacingField("Vertical Padding"),
538
+ horizontalPadding: createSpacingField("Horizontal Padding"),
539
+ gap: createSpacingField("Gap"),
540
+ backgroundColor: createThemeableColorField(
541
+ "Background Color",
542
+ "background"
543
+ ),
544
+ backgroundImage: { type: "text" },
545
+ shadow: createShadowField("Shadow"),
546
+ borderRadius: createBorderRadiusField("Border Radius"),
547
+ contentMaxWidth: { type: "text" },
548
+ anchorLink: { type: "text" },
549
+ visibility: createResponsiveField("Visibility")
550
+ },
551
+ defaultProps: {
552
+ verticalPadding: 48,
553
+ horizontalPadding: 32,
554
+ gap: 24,
555
+ backgroundColor: { useTheme: true, themeKey: "background" },
556
+ shadow: "none",
557
+ borderRadius: 0,
558
+ contentMaxWidth: "1400px",
559
+ visibility: { mobile: true, desktop: true }
560
+ },
561
+ render: (props) => /* @__PURE__ */ jsx(Section, { ...props })
562
+ },
563
+ Container: {
564
+ fields: {
565
+ maxWidth: {
566
+ type: "select",
567
+ options: [
568
+ { label: "Small", value: "sm" },
569
+ { label: "Medium", value: "md" },
570
+ { label: "Large", value: "lg" },
571
+ { label: "XL", value: "xl" },
572
+ { label: "2XL", value: "2xl" },
573
+ { label: "Full", value: "full" }
574
+ ]
575
+ },
576
+ paddingX: {
577
+ type: "select",
578
+ options: [
579
+ { label: "None", value: "none" },
580
+ { label: "Small", value: "sm" },
581
+ { label: "Medium", value: "md" },
582
+ { label: "Large", value: "lg" },
583
+ { label: "XL", value: "xl" }
584
+ ]
585
+ },
586
+ paddingY: {
587
+ type: "select",
588
+ options: [
589
+ { label: "None", value: "none" },
590
+ { label: "Small", value: "sm" },
591
+ { label: "Medium", value: "md" },
592
+ { label: "Large", value: "lg" },
593
+ { label: "XL", value: "xl" }
594
+ ]
595
+ },
596
+ backgroundColor: createThemeableColorField(
597
+ "Background Color",
598
+ "background"
599
+ ),
600
+ centered: {
601
+ type: "radio",
602
+ options: [
603
+ { label: "Yes", value: true },
604
+ { label: "No", value: false }
605
+ ]
606
+ }
607
+ },
608
+ defaultProps: {
609
+ maxWidth: "lg",
610
+ paddingX: "md",
611
+ paddingY: "none",
612
+ centered: true
613
+ },
614
+ render: (props) => /* @__PURE__ */ jsx(Container, { ...props })
615
+ },
616
+ Columns: {
617
+ fields: {
618
+ columns: {
619
+ type: "select",
620
+ options: [
621
+ { label: "2 Columns", value: 2 },
622
+ { label: "3 Columns", value: 3 },
623
+ { label: "4 Columns", value: 4 }
624
+ ]
625
+ },
626
+ gap: {
627
+ type: "select",
628
+ options: [
629
+ { label: "None", value: "none" },
630
+ { label: "Small", value: "sm" },
631
+ { label: "Medium", value: "md" },
632
+ { label: "Large", value: "lg" },
633
+ { label: "XL", value: "xl" }
634
+ ]
635
+ },
636
+ verticalAlign: {
637
+ type: "select",
638
+ options: [
639
+ { label: "Top", value: "top" },
640
+ { label: "Center", value: "center" },
641
+ { label: "Bottom", value: "bottom" },
642
+ { label: "Stretch", value: "stretch" }
643
+ ]
644
+ },
645
+ stackOnMobile: {
646
+ type: "radio",
647
+ options: [
648
+ { label: "Yes", value: true },
649
+ { label: "No", value: false }
650
+ ]
651
+ }
652
+ },
653
+ defaultProps: {
654
+ columns: 2,
655
+ gap: "md",
656
+ verticalAlign: "top",
657
+ stackOnMobile: true
658
+ },
659
+ render: (props) => /* @__PURE__ */ jsx(Columns, { ...props })
660
+ },
661
+ Card: {
662
+ fields: {
663
+ backgroundColor: createThemeableColorField(
664
+ "Background Color",
665
+ "background"
666
+ ),
667
+ borderColor: createThemeableColorField("Border Color", "muted"),
668
+ borderWidth: {
669
+ type: "select",
670
+ options: [
671
+ { label: "None", value: "none" },
672
+ { label: "Thin", value: "thin" },
673
+ { label: "Medium", value: "medium" },
674
+ { label: "Thick", value: "thick" }
675
+ ]
676
+ },
677
+ borderRadius: {
678
+ type: "select",
679
+ options: [
680
+ { label: "None", value: "none" },
681
+ { label: "Small", value: "sm" },
682
+ { label: "Medium", value: "md" },
683
+ { label: "Large", value: "lg" },
684
+ { label: "XL", value: "xl" }
685
+ ]
686
+ },
687
+ shadow: {
688
+ type: "select",
689
+ options: [
690
+ { label: "None", value: "none" },
691
+ { label: "Small", value: "sm" },
692
+ { label: "Medium", value: "md" },
693
+ { label: "Large", value: "lg" },
694
+ { label: "XL", value: "xl" }
695
+ ]
696
+ },
697
+ padding: {
698
+ type: "select",
699
+ options: [
700
+ { label: "None", value: "none" },
701
+ { label: "Small", value: "sm" },
702
+ { label: "Medium", value: "md" },
703
+ { label: "Large", value: "lg" },
704
+ { label: "XL", value: "xl" }
705
+ ]
706
+ }
707
+ },
708
+ defaultProps: {
709
+ backgroundColor: { useTheme: true, themeKey: "background" },
710
+ borderColor: { useTheme: true, themeKey: "muted" },
711
+ borderWidth: "thin",
712
+ borderRadius: "md",
713
+ shadow: "sm",
714
+ padding: "md"
715
+ },
716
+ render: (props) => /* @__PURE__ */ jsx(Card, { ...props })
717
+ },
718
+ Divider: {
719
+ fields: {
720
+ style: {
721
+ type: "select",
722
+ options: [
723
+ { label: "Solid", value: "solid" },
724
+ { label: "Dashed", value: "dashed" },
725
+ { label: "Dotted", value: "dotted" }
726
+ ]
727
+ },
728
+ thickness: {
729
+ type: "select",
730
+ options: [
731
+ { label: "Thin", value: "thin" },
732
+ { label: "Medium", value: "medium" },
733
+ { label: "Thick", value: "thick" }
734
+ ]
735
+ },
736
+ color: createThemeableColorField("Color", "muted"),
737
+ width: {
738
+ type: "select",
739
+ options: [
740
+ { label: "Full", value: "full" },
741
+ { label: "3/4", value: "3/4" },
742
+ { label: "1/2", value: "1/2" },
743
+ { label: "1/4", value: "1/4" }
744
+ ]
745
+ },
746
+ align: {
747
+ type: "select",
748
+ options: [
749
+ { label: "Left", value: "left" },
750
+ { label: "Center", value: "center" },
751
+ { label: "Right", value: "right" }
752
+ ]
753
+ },
754
+ spacing: {
755
+ type: "select",
756
+ options: [
757
+ { label: "Small", value: "sm" },
758
+ { label: "Medium", value: "md" },
759
+ { label: "Large", value: "lg" },
760
+ { label: "XL", value: "xl" }
761
+ ]
762
+ }
763
+ },
764
+ defaultProps: {
765
+ style: "solid",
766
+ thickness: "thin",
767
+ color: { useTheme: true, themeKey: "muted" },
768
+ width: "full",
769
+ align: "center",
770
+ spacing: "md"
771
+ },
772
+ render: (props) => /* @__PURE__ */ jsx(Divider, { ...props })
773
+ },
774
+ Spacer: {
775
+ fields: {
776
+ size: {
777
+ type: "select",
778
+ options: [
779
+ { label: "XS", value: "xs" },
780
+ { label: "Small", value: "sm" },
781
+ { label: "Medium", value: "md" },
782
+ { label: "Large", value: "lg" },
783
+ { label: "XL", value: "xl" },
784
+ { label: "2XL", value: "2xl" },
785
+ { label: "3XL", value: "3xl" }
786
+ ]
787
+ }
788
+ },
789
+ defaultProps: {
790
+ size: "md"
791
+ },
792
+ render: (props) => /* @__PURE__ */ jsx(Spacer, { ...props })
793
+ },
794
+ // ==================
795
+ // LEGACY COMPONENTS
796
+ // ==================
797
+ TextBlock: {
798
+ fields: {
799
+ title: createEntryBoundTextField("Title", "Enter title..."),
800
+ subtitle: createEntryBoundTextField("Subtitle", "Enter subtitle..."),
801
+ body: createEntryBoundTextField("Body", "Enter body text..."),
802
+ alignment: {
803
+ type: "select",
804
+ options: [
805
+ { label: "Left", value: "left" },
806
+ { label: "Center", value: "center" },
807
+ { label: "Right", value: "right" }
808
+ ]
809
+ },
810
+ textSize: {
811
+ type: "select",
812
+ options: [
813
+ { label: "Small", value: "small" },
814
+ { label: "Medium Small", value: "medium-small" },
815
+ { label: "Medium", value: "medium" },
816
+ { label: "Large", value: "large" },
817
+ { label: "XL", value: "xlarge" }
818
+ ]
819
+ },
820
+ textColor: createThemeableColorField("Title Color", "foreground"),
821
+ subtitleBodyColor: createThemeableColorField(
822
+ "Subtitle/Body Color",
823
+ "muted"
824
+ ),
825
+ useGradientText: {
826
+ type: "radio",
827
+ options: [
828
+ { label: "Yes", value: true },
829
+ { label: "No", value: false }
830
+ ]
831
+ },
832
+ gradientColor1: createThemeableColorField("Gradient Start", "primary"),
833
+ gradientColor2: createThemeableColorField("Gradient End", "secondary")
834
+ },
835
+ defaultProps: {
836
+ title: "Heading",
837
+ alignment: "left",
838
+ textSize: "medium",
839
+ textColor: { useTheme: true, themeKey: "foreground" },
840
+ subtitleBodyColor: { useTheme: true, themeKey: "muted" },
841
+ useGradientText: false,
842
+ gradientColor1: { useTheme: true, themeKey: "primary" },
843
+ gradientColor2: { useTheme: true, themeKey: "secondary" }
844
+ },
845
+ render: (props) => /* @__PURE__ */ jsx(TextBlock, { ...props })
846
+ },
847
+ CustomImage: {
848
+ fields: {
849
+ image: { type: "text" },
850
+ alt: { type: "text" },
851
+ maxWidth: { type: "number" },
852
+ alignment: {
853
+ type: "select",
854
+ options: [
855
+ { label: "Left", value: "left" },
856
+ { label: "Center", value: "center" },
857
+ { label: "Right", value: "right" }
858
+ ]
859
+ },
860
+ fitContent: {
861
+ type: "radio",
862
+ options: [
863
+ { label: "Yes", value: true },
864
+ { label: "No", value: false }
865
+ ]
866
+ }
867
+ },
868
+ defaultProps: {
869
+ alignment: "center",
870
+ fitContent: false
871
+ },
872
+ render: (props) => /* @__PURE__ */ jsx(CustomImage, { ...props })
873
+ },
874
+ FeaturesList: {
875
+ fields: {
876
+ features: {
877
+ type: "array",
878
+ arrayFields: {
879
+ icon: { type: "text" },
880
+ image: { type: "text" },
881
+ title: { type: "text" },
882
+ description: { type: "textarea" }
883
+ }
884
+ },
885
+ align: {
886
+ type: "select",
887
+ options: [
888
+ { label: "Left", value: "left" },
889
+ { label: "Center", value: "center" },
890
+ { label: "Right", value: "right" }
891
+ ]
892
+ },
893
+ size: {
894
+ type: "select",
895
+ options: [
896
+ { label: "Small", value: "small" },
897
+ { label: "Medium", value: "medium" },
898
+ { label: "Large", value: "large" }
899
+ ]
900
+ },
901
+ iconColor: createColorField("Icon Color"),
902
+ anchorLink: { type: "text" }
903
+ },
904
+ defaultProps: {
905
+ features: [
906
+ { icon: "Check", title: "Feature 1", description: "Description" },
907
+ { icon: "Check", title: "Feature 2", description: "Description" }
908
+ ],
909
+ align: "left",
910
+ size: "medium",
911
+ iconColor: { color: "#3B82F6", opacity: 100 }
912
+ },
913
+ render: (props) => /* @__PURE__ */ jsx(FeaturesList, { ...props })
914
+ },
915
+ FeatureGrid: {
916
+ fields: {
917
+ heading: { type: "text" },
918
+ description: { type: "textarea" },
919
+ features: {
920
+ type: "array",
921
+ arrayFields: {
922
+ icon: { type: "text" },
923
+ image: { type: "text" },
924
+ title: { type: "text" },
925
+ description: { type: "textarea" }
926
+ }
927
+ },
928
+ columns: {
929
+ type: "select",
930
+ options: [
931
+ { label: "2", value: 2 },
932
+ { label: "3", value: 3 },
933
+ { label: "4", value: 4 }
934
+ ]
935
+ },
936
+ align: {
937
+ type: "select",
938
+ options: [
939
+ { label: "Left", value: "left" },
940
+ { label: "Center", value: "center" },
941
+ { label: "Right", value: "right" }
942
+ ]
943
+ },
944
+ size: {
945
+ type: "select",
946
+ options: [
947
+ { label: "Small", value: "small" },
948
+ { label: "Medium", value: "medium" },
949
+ { label: "Large", value: "large" }
950
+ ]
951
+ },
952
+ iconColor: createColorField("Icon Color"),
953
+ textColor: createColorField("Text Color"),
954
+ anchorLink: { type: "text" }
955
+ },
956
+ defaultProps: {
957
+ heading: "Features",
958
+ columns: 3,
959
+ features: [
960
+ { icon: "Star", title: "Feature 1", description: "Description" },
961
+ { icon: "Star", title: "Feature 2", description: "Description" },
962
+ { icon: "Star", title: "Feature 3", description: "Description" }
963
+ ],
964
+ align: "center",
965
+ size: "medium",
966
+ iconColor: { color: "#3B82F6", opacity: 100 },
967
+ textColor: { color: "#000000", opacity: 100 }
968
+ },
969
+ render: (props) => /* @__PURE__ */ jsx(FeatureGrid, { ...props })
970
+ },
971
+ Footer: {
972
+ fields: {
973
+ logo: { type: "text" },
974
+ copyright: { type: "text" },
975
+ backgroundColor: createColorField("Background Color"),
976
+ textColor: createColorField("Text Color"),
977
+ facebookUrl: { type: "text" },
978
+ instagramUrl: { type: "text" },
979
+ twitterUrl: { type: "text" }
980
+ },
981
+ defaultProps: {
982
+ copyright: "\xA9 2024 Company. All rights reserved.",
983
+ backgroundColor: { color: "#111827", opacity: 100 },
984
+ textColor: { color: "#FFFFFF", opacity: 100 }
985
+ },
986
+ render: (props) => /* @__PURE__ */ jsx(Footer, { ...props })
987
+ },
988
+ Topbar: {
989
+ fields: {
990
+ logo: { type: "text" },
991
+ logoUrl: { type: "text" },
992
+ navItems: {
993
+ type: "array",
994
+ arrayFields: {
995
+ name: { type: "text" },
996
+ url: { type: "text" },
997
+ linkType: {
998
+ type: "select",
999
+ options: [
1000
+ { label: "Internal", value: "internal" },
1001
+ { label: "External", value: "external" },
1002
+ { label: "Scroll To", value: "scrollTo" }
1003
+ ]
1004
+ }
1005
+ }
1006
+ },
1007
+ backgroundColor: createColorField("Background Color"),
1008
+ textColor: createColorField("Text Color"),
1009
+ maxWidth: { type: "text" }
1010
+ },
1011
+ defaultProps: {
1012
+ logoUrl: "/",
1013
+ navItems: [
1014
+ { name: "Home", url: "/", linkType: "internal" },
1015
+ { name: "About", url: "/about", linkType: "internal" }
1016
+ ],
1017
+ backgroundColor: { color: "#FFFFFF", opacity: 100 },
1018
+ textColor: { color: "#000000", opacity: 100 },
1019
+ maxWidth: "1400px"
1020
+ },
1021
+ render: (props) => /* @__PURE__ */ jsx(Topbar, { ...props })
1022
+ },
1023
+ Popup: {
1024
+ fields: {
1025
+ ctaText: { type: "text" },
1026
+ buttonColor: createColorField("Button Color"),
1027
+ textColor: createColorField("Text Color"),
1028
+ icon: { type: "text" },
1029
+ iconPosition: {
1030
+ type: "select",
1031
+ options: [
1032
+ { label: "Left", value: "left" },
1033
+ { label: "Right", value: "right" }
1034
+ ]
1035
+ },
1036
+ size: {
1037
+ type: "select",
1038
+ options: [
1039
+ { label: "Small", value: "small" },
1040
+ { label: "Medium", value: "medium" },
1041
+ { label: "Large", value: "large" }
1042
+ ]
1043
+ },
1044
+ width: {
1045
+ type: "select",
1046
+ options: [
1047
+ { label: "Small", value: "small" },
1048
+ { label: "Medium", value: "medium" },
1049
+ { label: "Large", value: "large" }
1050
+ ]
1051
+ },
1052
+ textLink: {
1053
+ type: "radio",
1054
+ options: [
1055
+ { label: "Yes", value: true },
1056
+ { label: "No", value: false }
1057
+ ]
1058
+ }
1059
+ },
1060
+ defaultProps: {
1061
+ ctaText: "Open",
1062
+ buttonColor: { color: "#3B82F6", opacity: 100 },
1063
+ textColor: { color: "#FFFFFF", opacity: 100 },
1064
+ iconPosition: "left",
1065
+ size: "medium",
1066
+ width: "medium",
1067
+ textLink: false
1068
+ },
1069
+ render: (props) => /* @__PURE__ */ jsx(Popup, { ...props })
1070
+ }
1071
+ }
1072
+ };
1073
+ export {
1074
+ config
1075
+ };