@measured/puck 0.18.0-canary.f2e2eaa → 0.18.0

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.css CHANGED
@@ -136,6 +136,7 @@
136
136
 
137
137
  /* styles.css */
138
138
  #frame-root {
139
+ height: 1px;
139
140
  min-height: 100vh;
140
141
  }
141
142
 
@@ -224,27 +225,10 @@
224
225
  }
225
226
 
226
227
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
227
- ._InputWrapper_1l5m8_1 {
228
- color: var(--puck-color-grey-04);
229
- padding: 16px;
230
- padding-bottom: 12px;
231
- display: block;
232
- }
233
- ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
234
- border-top: 1px solid var(--puck-color-grey-09);
235
- margin-top: 8px;
236
- }
237
- ._Input_1l5m8_1 ._InputWrapper_1l5m8_1 {
238
- padding: 0px;
239
- }
240
- ._Input_1l5m8_1 * {
241
- box-sizing: border-box;
242
- }
243
- ._Input_1l5m8_1 ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
244
- border-top: 0px;
228
+ ._InputWrapper_1h1p1_1 + ._InputWrapper_1h1p1_1 {
245
229
  margin-top: 12px;
246
230
  }
247
- ._Input-label_1l5m8_26 {
231
+ ._Input-label_1h1p1_5 {
248
232
  align-items: center;
249
233
  color: var(--puck-color-grey-04);
250
234
  display: flex;
@@ -252,17 +236,17 @@
252
236
  font-size: var(--puck-font-size-xxs);
253
237
  font-weight: 600;
254
238
  }
255
- ._Input-labelIcon_1l5m8_35 {
239
+ ._Input-labelIcon_1h1p1_14 {
256
240
  color: var(--puck-color-grey-07);
257
241
  display: flex;
258
242
  margin-right: 4px;
259
243
  padding-left: 4px;
260
244
  }
261
- ._Input-disabledIcon_1l5m8_42 {
245
+ ._Input-disabledIcon_1h1p1_21 {
262
246
  color: var(--puck-color-grey-05);
263
247
  margin-left: auto;
264
248
  }
265
- ._Input-input_1l5m8_47 {
249
+ ._Input-input_1h1p1_26 {
266
250
  background: var(--puck-color-white);
267
251
  border-width: 1px;
268
252
  border-style: solid;
@@ -274,7 +258,7 @@
274
258
  transition: border-color 50ms ease-in;
275
259
  width: 100%;
276
260
  }
277
- select._Input-input_1l5m8_47 {
261
+ select._Input-input_1h1p1_26 {
278
262
  appearance: none;
279
263
  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;
280
264
  background-size: 12px;
@@ -284,25 +268,25 @@ select._Input-input_1l5m8_47 {
284
268
  cursor: pointer;
285
269
  }
286
270
  @media (hover: hover) and (pointer: fine) {
287
- ._Input_1l5m8_1:has(> input):hover ._Input-input_1l5m8_47:not([readonly]),
288
- ._Input_1l5m8_1:has(> textarea):hover ._Input-input_1l5m8_47:not([readonly]) {
271
+ ._Input_1h1p1_1:has(> input):hover ._Input-input_1h1p1_26:not([readonly]),
272
+ ._Input_1h1p1_1:has(> textarea):hover ._Input-input_1h1p1_26:not([readonly]) {
289
273
  border-color: var(--puck-color-grey-05);
290
274
  transition: none;
291
275
  }
292
- ._Input_1l5m8_1:has(> select):hover ._Input-input_1l5m8_47:not([disabled]) {
276
+ ._Input_1h1p1_1:has(> select):hover ._Input-input_1h1p1_26:not([disabled]) {
293
277
  background-color: var(--puck-color-azure-12);
294
278
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
295
279
  border-color: var(--puck-color-grey-05);
296
280
  transition: none;
297
281
  }
298
282
  }
299
- ._Input-input_1l5m8_47:focus {
283
+ ._Input-input_1h1p1_26:focus {
300
284
  border-color: var(--puck-color-grey-05);
301
285
  outline: 2px solid var(--puck-color-azure-05);
302
286
  transition: none;
303
287
  }
304
- ._Input--readOnly_1l5m8_91 > ._Input-input_1l5m8_47,
305
- ._Input--readOnly_1l5m8_91 > select._Input-input_1l5m8_47 {
288
+ ._Input--readOnly_1h1p1_70 > ._Input-input_1h1p1_26,
289
+ ._Input--readOnly_1h1p1_70 > select._Input-input_1h1p1_26 {
306
290
  background-color: var(--puck-color-grey-11);
307
291
  border-color: var(--puck-color-grey-09);
308
292
  color: var(--puck-color-grey-04);
@@ -311,34 +295,34 @@ select._Input-input_1l5m8_47 {
311
295
  outline: 0;
312
296
  transition: none;
313
297
  }
314
- ._Input-radioGroupItems_1l5m8_102 {
298
+ ._Input-radioGroupItems_1h1p1_81 {
315
299
  display: flex;
316
300
  border: 1px solid var(--puck-color-grey-09);
317
301
  border-radius: 4px;
318
302
  flex-wrap: wrap;
319
303
  }
320
- ._Input-radio_1l5m8_102 {
304
+ ._Input-radio_1h1p1_81 {
321
305
  border-right: 1px solid var(--puck-color-grey-09);
322
306
  flex-grow: 1;
323
307
  }
324
- ._Input-radio_1l5m8_102:first-of-type {
308
+ ._Input-radio_1h1p1_81:first-of-type {
325
309
  border-bottom-left-radius: 4px;
326
310
  border-top-left-radius: 4px;
327
311
  }
328
- ._Input-radio_1l5m8_102:first-of-type ._Input-radioInner_1l5m8_119 {
312
+ ._Input-radio_1h1p1_81:first-of-type ._Input-radioInner_1h1p1_98 {
329
313
  border-bottom-left-radius: 3px;
330
314
  border-top-left-radius: 3px;
331
315
  }
332
- ._Input-radio_1l5m8_102:last-of-type {
316
+ ._Input-radio_1h1p1_81:last-of-type {
333
317
  border-bottom-right-radius: 4px;
334
318
  border-right: 0;
335
319
  border-top-right-radius: 4px;
336
320
  }
337
- ._Input-radio_1l5m8_102:last-of-type ._Input-radioInner_1l5m8_119 {
321
+ ._Input-radio_1h1p1_81:last-of-type ._Input-radioInner_1h1p1_98 {
338
322
  border-bottom-right-radius: 3px;
339
323
  border-top-right-radius: 3px;
340
324
  }
341
- ._Input-radioInner_1l5m8_119 {
325
+ ._Input-radioInner_1h1p1_98 {
342
326
  background-color: var(--puck-color-white);
343
327
  color: var(--puck-color-grey-04);
344
328
  cursor: pointer;
@@ -347,32 +331,32 @@ select._Input-input_1l5m8_47 {
347
331
  text-align: center;
348
332
  transition: background-color 50ms ease-in;
349
333
  }
350
- ._Input-radio_1l5m8_102:has(:focus-visible) {
334
+ ._Input-radio_1h1p1_81:has(:focus-visible) {
351
335
  outline: 2px solid var(--puck-color-azure-05);
352
336
  outline-offset: 2px;
353
337
  position: relative;
354
338
  }
355
339
  @media (hover: hover) and (pointer: fine) {
356
- ._Input-radioInner_1l5m8_119:hover {
340
+ ._Input-radioInner_1h1p1_98:hover {
357
341
  background-color: var(--puck-color-azure-12);
358
342
  transition: none;
359
343
  }
360
344
  }
361
- ._Input--readOnly_1l5m8_91 ._Input-radioInner_1l5m8_119 {
345
+ ._Input--readOnly_1h1p1_70 ._Input-radioInner_1h1p1_98 {
362
346
  background-color: var(--puck-color-white);
363
347
  color: var(--puck-color-grey-04);
364
348
  cursor: default;
365
349
  }
366
- ._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
350
+ ._Input-radio_1h1p1_81 ._Input-radioInput_1h1p1_143:checked ~ ._Input-radioInner_1h1p1_98 {
367
351
  background-color: var(--puck-color-azure-11);
368
352
  color: var(--puck-color-azure-04);
369
353
  font-weight: 500;
370
354
  }
371
- ._Input--readOnly_1l5m8_91 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
355
+ ._Input--readOnly_1h1p1_70 ._Input-radioInput_1h1p1_143:checked ~ ._Input-radioInner_1h1p1_98 {
372
356
  background-color: var(--puck-color-grey-11);
373
357
  color: var(--puck-color-grey-04);
374
358
  }
375
- ._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164 {
359
+ ._Input-radio_1h1p1_81 ._Input-radioInput_1h1p1_143 {
376
360
  clip: rect(0 0 0 0);
377
361
  clip-path: inset(100%);
378
362
  height: 1px;
@@ -381,7 +365,7 @@ select._Input-input_1l5m8_47 {
381
365
  white-space: nowrap;
382
366
  width: 1px;
383
367
  }
384
- textarea._Input-input_1l5m8_47 {
368
+ textarea._Input-input_1h1p1_26 {
385
369
  margin-bottom: -4px;
386
370
  }
387
371
 
@@ -1219,7 +1203,7 @@ textarea._Input-input_1l5m8_47 {
1219
1203
  user-select: none;
1220
1204
  -webkit-user-select: none;
1221
1205
  }
1222
- [data-puck-dnd] {
1206
+ [data-puck-dropzone] {
1223
1207
  pointer-events: auto !important;
1224
1208
  }
1225
1209
  [data-puck-disabled] {
@@ -1567,14 +1551,14 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1567
1551
  }
1568
1552
 
1569
1553
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1570
- ._PuckFields_jp3lw_1 {
1554
+ ._PuckFields_10bh7_1 {
1571
1555
  position: relative;
1572
1556
  font-family: var(--puck-font-family);
1573
1557
  }
1574
- ._PuckFields--isLoading_jp3lw_6 {
1558
+ ._PuckFields--isLoading_10bh7_6 {
1575
1559
  min-height: 48px;
1576
1560
  }
1577
- ._PuckFields-loadingOverlay_jp3lw_10 {
1561
+ ._PuckFields-loadingOverlay_10bh7_10 {
1578
1562
  background: var(--puck-color-white);
1579
1563
  display: flex;
1580
1564
  justify-content: flex-end;
@@ -1588,12 +1572,25 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1588
1572
  box-sizing: border-box;
1589
1573
  opacity: 0.8;
1590
1574
  }
1591
- ._PuckFields-loadingOverlayInner_jp3lw_25 {
1575
+ ._PuckFields-loadingOverlayInner_10bh7_25 {
1592
1576
  display: flex;
1593
1577
  padding: 16px;
1594
1578
  position: sticky;
1595
1579
  top: 0;
1596
1580
  }
1581
+ ._PuckFields-field_10bh7_32 * {
1582
+ box-sizing: border-box;
1583
+ }
1584
+ ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
1585
+ color: var(--puck-color-grey-04);
1586
+ padding: 16px;
1587
+ padding-bottom: 12px;
1588
+ display: block;
1589
+ }
1590
+ ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
1591
+ border-top: 1px solid var(--puck-color-grey-09);
1592
+ margin-top: 8px;
1593
+ }
1597
1594
 
1598
1595
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
1599
1596
  ._ComponentList_odh9d_1 {
package/dist/index.d.mts CHANGED
@@ -100,7 +100,8 @@ type DropZoneContext<UserConfig extends Config = Config> = {
100
100
  unregisterZone?: (zoneCompound: string) => void;
101
101
  activeZones?: Record<string, boolean>;
102
102
  pathData?: PathData;
103
- registerPath?: (selector: ItemSelector) => void;
103
+ registerPath?: (id: string, selector: ItemSelector, label: string) => void;
104
+ unregisterPath?: (id: string) => void;
104
105
  mode?: "edit" | "render";
105
106
  depth: number;
106
107
  registerLocalZone?: (zone: string, active: boolean) => void;
@@ -165,7 +166,9 @@ declare function Puck<UserConfig extends Config = Config, G extends UserGenerics
165
166
  }): react_jsx_runtime.JSX.Element;
166
167
  declare namespace Puck {
167
168
  var Components: () => react_jsx_runtime.JSX.Element;
168
- var Fields: () => react_jsx_runtime.JSX.Element;
169
+ var Fields: ({ wrapFields }: {
170
+ wrapFields?: boolean;
171
+ }) => react_jsx_runtime.JSX.Element;
169
172
  var Outline: () => react_jsx_runtime.JSX.Element;
170
173
  var Preview: ({ id }: {
171
174
  id?: string;
package/dist/index.d.ts CHANGED
@@ -100,7 +100,8 @@ type DropZoneContext<UserConfig extends Config = Config> = {
100
100
  unregisterZone?: (zoneCompound: string) => void;
101
101
  activeZones?: Record<string, boolean>;
102
102
  pathData?: PathData;
103
- registerPath?: (selector: ItemSelector) => void;
103
+ registerPath?: (id: string, selector: ItemSelector, label: string) => void;
104
+ unregisterPath?: (id: string) => void;
104
105
  mode?: "edit" | "render";
105
106
  depth: number;
106
107
  registerLocalZone?: (zone: string, active: boolean) => void;
@@ -165,7 +166,9 @@ declare function Puck<UserConfig extends Config = Config, G extends UserGenerics
165
166
  }): react_jsx_runtime.JSX.Element;
166
167
  declare namespace Puck {
167
168
  var Components: () => react_jsx_runtime.JSX.Element;
168
- var Fields: () => react_jsx_runtime.JSX.Element;
169
+ var Fields: ({ wrapFields }: {
170
+ wrapFields?: boolean;
171
+ }) => react_jsx_runtime.JSX.Element;
169
172
  var Outline: () => react_jsx_runtime.JSX.Element;
170
173
  var Preview: ({ id }: {
171
174
  id?: string;