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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.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,196 +722,33 @@
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 {
671
- display: grid;
726
+ ._ComponentList_bvy0z_1 {
672
727
  font-family: var(--puck-font-stack);
673
- grid-template-columns: 1fr;
674
728
  max-width: 100%;
675
- grid-gap: 12px;
676
729
  }
677
- ._ComponentList-item_1ybn0_9,
678
- ._ComponentList-itemShadow_1ybn0_10 {
730
+ ._ComponentList-item_bvy0z_6 {
679
731
  background: white;
680
732
  padding: 12px;
681
733
  display: flex;
682
734
  border: 1px var(--puck-color-grey-8) solid;
683
- border-radius: 8px;
735
+ border-radius: 4px;
684
736
  font-size: var(--puck-font-size-xxs);
685
737
  justify-content: space-between;
686
738
  align-items: center;
687
739
  gap: 12px;
688
740
  cursor: grab;
741
+ margin-bottom: 12px;
689
742
  }
690
- ._ComponentList-item_1ybn0_9:last-of-type,
691
- ._ComponentList-itemShadow_1ybn0_10:last-of-type {
743
+ ._ComponentList-item_bvy0z_6:last-of-type {
692
744
  margin-bottom: 0px;
693
745
  }
694
- ._ComponentList-itemIcon_1ybn0_28 {
746
+ ._ComponentList-itemIcon_bvy0z_24 {
695
747
  color: var(--puck-color-grey-4);
696
748
  }
697
- ._ComponentList-item_1ybn0_9:hover {
749
+ ._ComponentList_bvy0z_1:not(._ComponentList--isDraggingFrom_bvy0z_28) ._ComponentList-item_bvy0z_6:hover {
698
750
  background-color: var(--puck-color-azure-9);
751
+ color: var(--puck-color-azure-4);
699
752
  }
700
753
 
701
754
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
package/dist/index.d.ts CHANGED
@@ -103,13 +103,22 @@ type Data<Props extends {
103
103
  content: Content<Props>;
104
104
  zones?: Record<string, Content<Props>>;
105
105
  };
106
- type AppState = {
106
+ type ItemWithId = {
107
+ _arrayId: string;
108
+ data: any;
109
+ };
110
+ type ArrayState = {
111
+ items: ItemWithId[];
112
+ openId: string;
113
+ };
114
+ type UiState = {
107
115
  leftSideBarVisible: boolean;
108
- itemSelector?: ItemSelector | null;
116
+ itemSelector: ItemSelector | null;
117
+ arrayState: Record<string, ArrayState | undefined>;
109
118
  };
110
- type AppData = {
119
+ type AppState = {
111
120
  data: Data;
112
- state: AppState;
121
+ ui: UiState;
113
122
  };
114
123
 
115
124
  declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
@@ -162,8 +171,8 @@ type RemoveAction = {
162
171
  zone: string;
163
172
  };
164
173
  type SetStateAction = {
165
- type: "setState";
166
- state: Partial<AppState>;
174
+ type: "setUi";
175
+ ui: Partial<UiState>;
167
176
  };
168
177
  type SetDataAction = {
169
178
  type: "setData";
@@ -171,7 +180,7 @@ type SetDataAction = {
171
180
  };
172
181
  type SetAction = {
173
182
  type: "set";
174
- appData: Partial<AppData>;
183
+ state: Partial<AppState>;
175
184
  };
176
185
  type RegisterZoneAction = {
177
186
  type: "registerZone";
@@ -186,9 +195,9 @@ type PuckAction = {
186
195
  } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetStateAction | RegisterZoneAction | UnregisterZoneAction);
187
196
 
188
197
  type PathData = Record<string, {
189
- selector: ItemSelector | null;
198
+ path: string[];
190
199
  label: string;
191
- }[]>;
200
+ }>;
192
201
  type DropZoneContext = {
193
202
  data: Data;
194
203
  config: Config;
@@ -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, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, UiState, dropZoneContext };