@measured/puck 0.18.0-canary.1ea6f98 → 0.18.0-canary.29e5580

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/README.md CHANGED
@@ -101,11 +101,11 @@ Available recipes include:
101
101
  - [Discord server](https://discord.gg/D9e4E3MQVZ) for discussions
102
102
  - [awesome-puck](https://github.com/measuredco/awesome-puck) community repo for plugins, custom fields & more
103
103
 
104
- ## Hire the Puck team
104
+ ## Get support
105
105
 
106
- Puck is developed and maintained by **Measured**, a small group of industry veterans with decades of experience helping companies solve hard UI problems. We offer consultancy and development services for scale-ups, SMEs and enterprises.
106
+ If you have any questions about Puck, please open a [GitHub issue](https://github.com/measuredco/puck/issues) or join us on [Discord](https://discord.gg/D9e4E3MQVZ).
107
107
 
108
- If you need support integrating Puck or creating a beautiful component library, please reach out via the [Measured](https://measured.co) website.
108
+ Or [book a discovery call](https://app.cal.com/chrisvxd/puck-enquiry/) for hands-on support and consultancy.
109
109
 
110
110
  ## License
111
111
 
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
 
@@ -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;