@measured/puck 0.10.0-canary.a7d9a28 → 0.10.0-canary.ca4f4be

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.css CHANGED
@@ -382,6 +382,222 @@
382
382
  cursor: pointer;
383
383
  }
384
384
 
385
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
386
+ ._Input_nkpu6_1 {
387
+ color: var(--puck-color-grey-3);
388
+ padding: 16px;
389
+ padding-bottom: 12px;
390
+ display: block;
391
+ font-family: var(--puck-font-stack);
392
+ }
393
+ ._Input_nkpu6_1 ._Input_nkpu6_1 {
394
+ padding: 0px;
395
+ }
396
+ ._Input_nkpu6_1 * {
397
+ box-sizing: border-box;
398
+ }
399
+ ._Input_nkpu6_1 + ._Input_nkpu6_1 {
400
+ border-top: 1px solid var(--puck-color-grey-8);
401
+ margin-top: 8px;
402
+ }
403
+ ._Input_nkpu6_1 ._Input_nkpu6_1 + ._Input_nkpu6_1 {
404
+ border-top: 0px;
405
+ margin-top: 12px;
406
+ }
407
+ ._Input-label_nkpu6_27 {
408
+ display: flex;
409
+ padding-bottom: 12px;
410
+ font-size: var(--puck-font-size-xxs);
411
+ font-weight: 600;
412
+ }
413
+ ._Input-labelIcon_nkpu6_34 {
414
+ color: var(--puck-color-grey-6);
415
+ margin-right: 4px;
416
+ }
417
+ ._Input-input_nkpu6_39 {
418
+ border-width: 1px;
419
+ border-style: solid;
420
+ border-color: var(--puck-color-grey-8);
421
+ border-radius: 4px;
422
+ font-family: inherit;
423
+ padding: 12px 16px;
424
+ width: 100%;
425
+ }
426
+ ._Input_nkpu6_1 select._Input-input_nkpu6_39 {
427
+ appearance: none;
428
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
429
+ background-size: 12px;
430
+ background-position: calc(100% - 12px) calc(50% + 3px);
431
+ background-repeat: no-repeat;
432
+ background-color: white;
433
+ }
434
+ ._Input--readOnly_nkpu6_60 ._Input-input_nkpu6_39 {
435
+ background-color: var(--puck-color-grey-10);
436
+ border-color: var(--puck-color-grey-8);
437
+ }
438
+ ._Input-input_nkpu6_39:hover {
439
+ border-color: var(--puck-color-neutral-3);
440
+ }
441
+ ._Input-radioGroupItems_nkpu6_69 {
442
+ display: flex;
443
+ border: 1px solid var(--puck-color-grey-7);
444
+ border-radius: 4px;
445
+ flex-wrap: wrap;
446
+ overflow: hidden;
447
+ }
448
+ ._Input-radio_nkpu6_69 {
449
+ border-right: 1px solid var(--puck-color-grey-7);
450
+ flex-grow: 1;
451
+ }
452
+ ._Input-radio_nkpu6_69:last-of-type {
453
+ border-right: none;
454
+ }
455
+ ._Input-radioInner_nkpu6_86 {
456
+ color: var(--puck-color-grey-4);
457
+ font-size: var(--puck-font-size-xxxs);
458
+ padding: 8px 12px;
459
+ text-align: center;
460
+ }
461
+ ._Input-radioInner_nkpu6_86:hover {
462
+ background-color: var(--puck-color-azure-9);
463
+ cursor: pointer;
464
+ }
465
+ ._Input-radio_nkpu6_69 ._Input-radioInput_nkpu6_98:checked ~ ._Input-radioInner_nkpu6_86 {
466
+ background-color: var(--puck-color-azure-9);
467
+ color: var(--puck-color-grey-2);
468
+ font-weight: 500;
469
+ }
470
+ ._Input-radio_nkpu6_69 ._Input-radioInput_nkpu6_98 {
471
+ display: none;
472
+ }
473
+ ._Input_nkpu6_1 textarea._Input-input_nkpu6_39 {
474
+ margin-bottom: -4px;
475
+ }
476
+
477
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
478
+ ._ArrayField_zp334_5 {
479
+ display: flex;
480
+ flex-direction: column;
481
+ background-color: var(--puck-color-grey-8);
482
+ border: 1px solid var(--puck-color-grey-8);
483
+ border-radius: 4px;
484
+ }
485
+ ._ArrayField--isDraggingFrom_zp334_13 {
486
+ background-color: var(--puck-color-azure-9);
487
+ }
488
+ ._ArrayField-addButton_zp334_17 {
489
+ background-color: white;
490
+ border: none;
491
+ border-radius: 4px;
492
+ display: flex;
493
+ color: var(--puck-color-azure-4);
494
+ justify-content: center;
495
+ cursor: pointer;
496
+ width: 100%;
497
+ margin: 0;
498
+ padding: 16px;
499
+ text-align: left;
500
+ }
501
+ ._ArrayField--hasItems_zp334_31 > ._ArrayField-addButton_zp334_17 {
502
+ border-top-left-radius: 0;
503
+ border-top-right-radius: 0;
504
+ }
505
+ ._ArrayField_zp334_5:not(._ArrayField--isDraggingFrom_zp334_13) > ._ArrayField-addButton_zp334_17:hover {
506
+ background: var(--puck-color-azure-9);
507
+ color: var(--puck-color-azure-4);
508
+ }
509
+ ._ArrayFieldItem_zp334_45 {
510
+ background: white;
511
+ border-top-left-radius: 4px;
512
+ border-top-right-radius: 4px;
513
+ display: block;
514
+ margin-bottom: 1px;
515
+ }
516
+ ._ArrayField--isDraggingFrom_zp334_13 > ._ArrayFieldItem_zp334_45:not(._ArrayFieldItem--isDragging_zp334_53) {
517
+ border-bottom: 1px solid var(--puck-color-grey-8);
518
+ margin-bottom: 0;
519
+ }
520
+ ._ArrayFieldItem--isExpanded_zp334_58 {
521
+ border-bottom: 0;
522
+ outline: 1px solid var(--puck-color-azure-6);
523
+ }
524
+ ._ArrayFieldItem--isDragging_zp334_53 {
525
+ box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
526
+ }
527
+ ._ArrayFieldItem_zp334_45 + ._ArrayFieldItem_zp334_45 {
528
+ border-top-left-radius: 0;
529
+ border-top-right-radius: 0;
530
+ }
531
+ ._ArrayFieldItem-summary_zp334_72 {
532
+ color: var(--puck-color-grey-3);
533
+ display: flex;
534
+ align-items: center;
535
+ justify-content: space-between;
536
+ font-size: var(--puck-font-size-xxs);
537
+ list-style: none;
538
+ padding: 12px 16px;
539
+ position: relative;
540
+ overflow: hidden;
541
+ }
542
+ ._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-summary_zp334_72 {
543
+ font-weight: 600;
544
+ }
545
+ ._ArrayFieldItem_zp334_45:first-of-type > ._ArrayFieldItem-summary_zp334_72 {
546
+ border-top-left-radius: 4px;
547
+ border-top-right-radius: 4px;
548
+ }
549
+ ._ArrayFieldItem-summary_zp334_72:hover,
550
+ ._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-summary_zp334_72 {
551
+ background: var(--puck-color-azure-9);
552
+ cursor: pointer;
553
+ color: var(--puck-color-azure-4);
554
+ }
555
+ ._ArrayFieldItem-summary_zp334_72::-webkit-details-marker {
556
+ display: none;
557
+ }
558
+ ._ArrayFieldItem-body_zp334_104 {
559
+ display: none;
560
+ }
561
+ ._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-body_zp334_104 {
562
+ display: block;
563
+ }
564
+ ._ArrayFieldItem-fieldset_zp334_112 {
565
+ border: none;
566
+ border-top: 1px solid var(--puck-color-grey-8);
567
+ margin: 0;
568
+ padding: 16px;
569
+ }
570
+ ._ArrayFieldItem-rhs_zp334_119 {
571
+ display: flex;
572
+ gap: 8px;
573
+ align-items: center;
574
+ }
575
+ ._ArrayFieldItem-actions_zp334_125 {
576
+ display: flex;
577
+ gap: 8px;
578
+ opacity: 0;
579
+ }
580
+ ._ArrayFieldItem-summary_zp334_72:hover > ._ArrayFieldItem-rhs_zp334_119 > ._ArrayFieldItem-actions_zp334_125 {
581
+ opacity: 1;
582
+ }
583
+ ._ArrayFieldItem-action_zp334_125:hover {
584
+ background: var(--puck-color-grey-9);
585
+ border-radius: 4px;
586
+ color: var(--puck-color-blue);
587
+ cursor: pointer;
588
+ }
589
+
590
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
591
+ ._DragIcon_o29on_1 {
592
+ color: var(--puck-color-grey-4);
593
+ padding: 4px;
594
+ border-radius: 4px;
595
+ }
596
+ ._DragIcon_o29on_1:hover {
597
+ cursor: grab;
598
+ background: var(--puck-color-grey-9);
599
+ }
600
+
385
601
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
386
602
  ._ExternalInput_l4bks_1 {
387
603
  font-family: var(--puck-font-stack);
@@ -506,176 +722,15 @@
506
722
  padding-left: 20px;
507
723
  }
508
724
 
509
- /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
510
- ._Input_izwhv_1 {
511
- color: var(--puck-color-grey-3);
512
- padding: 16px;
513
- padding-bottom: 12px;
514
- display: block;
515
- font-family: var(--puck-font-stack);
516
- }
517
- ._Input_izwhv_1 ._Input_izwhv_1 {
518
- padding: 0px;
519
- }
520
- ._Input_izwhv_1 * {
521
- box-sizing: border-box;
522
- }
523
- ._Input_izwhv_1 + ._Input_izwhv_1 {
524
- border-top: 1px solid var(--puck-color-grey-8);
525
- margin-top: 8px;
526
- }
527
- ._Input_izwhv_1 ._Input_izwhv_1 + ._Input_izwhv_1 {
528
- border-top: 0px;
529
- margin-top: 12px;
530
- }
531
- ._Input-label_izwhv_27 {
532
- display: flex;
533
- padding-bottom: 12px;
534
- font-size: var(--puck-font-size-xxs);
535
- font-weight: 600;
536
- }
537
- ._Input-labelIcon_izwhv_34 {
538
- color: var(--puck-color-grey-6);
539
- margin-right: 4px;
540
- }
541
- ._Input-input_izwhv_39 {
542
- border-width: 1px;
543
- border-style: solid;
544
- border-color: var(--puck-color-grey-8);
545
- border-radius: 4px;
546
- font-family: inherit;
547
- padding: 12px 16px;
548
- width: 100%;
549
- }
550
- ._Input_izwhv_1 select {
551
- appearance: none;
552
- background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
553
- background-size: 12px;
554
- background-position: calc(100% - 12px) calc(50% + 3px);
555
- background-repeat: no-repeat;
556
- background-color: white;
557
- }
558
- ._Input--readOnly_izwhv_60 ._Input-input_izwhv_39 {
559
- background-color: var(--puck-color-grey-10);
560
- border-color: var(--puck-color-grey-8);
561
- }
562
- ._Input-input_izwhv_39:hover {
563
- border-color: var(--puck-color-neutral-3);
564
- }
565
- ._Input-arrayItem_izwhv_69 {
566
- background: white;
567
- border: 1px solid var(--puck-color-grey-8);
568
- border-radius: 4px;
569
- }
570
- ._Input-arrayItem_izwhv_69 > summary {
571
- color: var(--puck-color-grey-3);
572
- display: flex;
573
- align-items: center;
574
- justify-content: space-between;
575
- font-size: var(--puck-font-size-xxs);
576
- list-style: none;
577
- padding: 12px 16px;
578
- position: relative;
579
- }
580
- ._Input-arrayItem_izwhv_69 > summary:hover {
581
- cursor: pointer;
582
- color: var(--puck-color-blue);
583
- }
584
- ._Input-arrayItem_izwhv_69 > summary::-webkit-details-marker {
585
- display: none;
586
- }
587
- ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 {
588
- background-color: var(--puck-color-grey-11);
589
- border: none;
590
- border-top: 1px solid var(--puck-color-grey-8);
591
- margin: 0;
592
- padding: 16px;
593
- }
594
- ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input_izwhv_1 + ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input_izwhv_1 {
595
- margin-top: 16px;
596
- }
597
- ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input-label_izwhv_27 {
598
- padding-bottom: 4px;
599
- }
600
- ._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116 {
601
- border-radius: 4px;
602
- opacity: 0;
603
- }
604
- ._Input-arrayItem_izwhv_69 summary:hover ._Input-arrayItemAction_izwhv_116 {
605
- opacity: 1;
606
- }
607
- ._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116:hover {
608
- background: var(--puck-color-grey-9);
609
- color: var(--puck-color-blue);
610
- cursor: pointer;
611
- }
612
- ._Input-arrayItem_izwhv_69 + ._Input-arrayItem_izwhv_69 {
613
- margin-top: 12px;
614
- }
615
- ._Input-addButton_izwhv_135 {
616
- background-color: white;
617
- border: none;
618
- border-radius: 4px;
619
- color: var(--puck-color-blue);
620
- cursor: pointer;
621
- width: 100%;
622
- margin: 0;
623
- margin-top: 12px;
624
- padding: 12px 16px;
625
- text-align: left;
626
- }
627
- ._Input-addButton_izwhv_135:hover {
628
- background: var(--puck-color-grey-10);
629
- }
630
- ._Input-array_izwhv_69 {
631
- overflow: hidden;
632
- }
633
- ._Input-radioGroupItems_izwhv_156 {
634
- display: flex;
635
- border: 1px solid var(--puck-color-grey-7);
636
- border-radius: 4px;
637
- flex-wrap: wrap;
638
- overflow: hidden;
639
- }
640
- ._Input-radio_izwhv_156 {
641
- border-right: 1px solid var(--puck-color-grey-7);
642
- flex-grow: 1;
643
- }
644
- ._Input-radio_izwhv_156:last-of-type {
645
- border-right: none;
646
- }
647
- ._Input-radioInner_izwhv_173 {
648
- color: var(--puck-color-grey-4);
649
- font-size: var(--puck-font-size-xxxs);
650
- padding: 8px 12px;
651
- text-align: center;
652
- }
653
- ._Input-radioInner_izwhv_173:hover {
654
- background-color: var(--puck-color-azure-9);
655
- cursor: pointer;
656
- }
657
- ._Input-radio_izwhv_156 ._Input-radioInput_izwhv_185:checked ~ ._Input-radioInner_izwhv_173 {
658
- background-color: var(--puck-color-azure-9);
659
- color: var(--puck-color-grey-2);
660
- font-weight: 500;
661
- }
662
- ._Input-radio_izwhv_156 ._Input-radioInput_izwhv_185 {
663
- display: none;
664
- }
665
- ._Input_izwhv_1 textarea._Input-input_izwhv_39 {
666
- margin-bottom: -4px;
667
- }
668
-
669
725
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
670
- ._ComponentList_1ybn0_1 {
726
+ ._ComponentList_1f52d_1 {
671
727
  display: grid;
672
728
  font-family: var(--puck-font-stack);
673
729
  grid-template-columns: 1fr;
674
730
  max-width: 100%;
675
731
  grid-gap: 12px;
676
732
  }
677
- ._ComponentList-item_1ybn0_9,
678
- ._ComponentList-itemShadow_1ybn0_10 {
733
+ ._ComponentList-item_1f52d_9 {
679
734
  background: white;
680
735
  padding: 12px;
681
736
  display: flex;
@@ -687,14 +742,13 @@
687
742
  gap: 12px;
688
743
  cursor: grab;
689
744
  }
690
- ._ComponentList-item_1ybn0_9:last-of-type,
691
- ._ComponentList-itemShadow_1ybn0_10:last-of-type {
745
+ ._ComponentList-item_1f52d_9:last-of-type {
692
746
  margin-bottom: 0px;
693
747
  }
694
- ._ComponentList-itemIcon_1ybn0_28 {
748
+ ._ComponentList-itemIcon_1f52d_26 {
695
749
  color: var(--puck-color-grey-4);
696
750
  }
697
- ._ComponentList-item_1ybn0_9:hover {
751
+ ._ComponentList_1f52d_1:not(._ComponentList--isDraggingFrom_1f52d_30) ._ComponentList-item_1f52d_9:hover {
698
752
  background-color: var(--puck-color-azure-9);
699
753
  }
700
754
 
package/dist/index.d.ts CHANGED
@@ -103,9 +103,18 @@ type Data<Props extends {
103
103
  content: Content<Props>;
104
104
  zones?: Record<string, Content<Props>>;
105
105
  };
106
+ type ItemWithId = {
107
+ _arrayId: string;
108
+ data: any;
109
+ };
110
+ type ArrayState = {
111
+ items: ItemWithId[];
112
+ openId: string;
113
+ };
106
114
  type AppState = {
107
115
  leftSideBarVisible: boolean;
108
116
  itemSelector?: ItemSelector | null;
117
+ arrayState: Record<string, ArrayState | undefined>;
109
118
  };
110
119
  type AppData = {
111
120
  data: Data;
@@ -283,4 +292,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
283
292
  label: string;
284
293
  }) => react_jsx_runtime.JSX.Element;
285
294
 
286
- export { Adaptor, AppData, AppState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, Puck, Render, dropZoneContext };
295
+ export { Adaptor, AppData, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, Puck, Render, dropZoneContext };