@puckeditor/cli 0.24.0-canary.301a0304

package/dist/docs/api-reference/components/field-label.md

@@ -0,0 +1,138 @@
+# \<FieldLabel\>
+
+Render a styled `label` when creating [`custom` fields](/docs/api-reference/fields/custom).
+
+```tsx
+import { FieldLabel } from "@puckeditor/core";
+
+const CustomField = () => (
+  <FieldLabel label="Title">
+    <input />
+  </FieldLabel>
+);
+
+const config = {
+  components: {
+    Example: {
+      fields: {
+        title: {
+          type: "custom",
+          render: MyCustomField,
+        },
+      },
+    },
+  },
+};
+```
+
+## Props
+
+| Param                     | Example                | Type             | Status   |
+| ------------------------- | ---------------------- | ---------------- | -------- |
+| [`label`](#label)         | `label: "Title"`       | String           | Required |
+| [`children`](#children)   | `children: <div />`    | ReactNode        | -        |
+| [`className`](#classname) | `className: "MyLabel"` | String           | -        |
+| [`el`](#el)               | `el: false`            | "label" \| "div" | -        |
+| [`icon`](#icon)           | `icon: <svg />`        | ReactNode        | -        |
+| [`readOnly`](#readonly)   | `readOnly: false`      | Boolean          | -        |
+
+## Required props
+
+### `label`
+
+The label string for the fields.
+
+```tsx
+import { FieldLabel } from "@puckeditor/core";
+
+const CustomField = () => (
+  <FieldLabel label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+## Optional props
+
+### `children`
+
+A node to render inside the FieldLabel's internal `<label>` element. You can also define your input element as a sibling.
+
+```tsx
+import { FieldLabel } from "@puckeditor/core";
+
+const CustomField = () => (
+  <FieldLabel label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `className`
+
+Define a custom class for the field label.
+
+```tsx
+import { FieldLabel } from "@puckeditor/core";
+
+const CustomField = () => (
+  <FieldLabel className="MyClass" label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `el`
+
+Specify whether to render a `label` or `div`. **Defaults to `"label"`**.
+
+```tsx
+import { FieldLabel } from "@puckeditor/core";
+
+const CustomField = () => (
+  <FieldLabel el="div" label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `icon`
+
+Render an icon before the label text. Puck uses [lucide-react](https://lucide.dev/guide/packages/lucide-react) internally.
+
+```tsx
+import { FieldLabel } from "@puckeditor/core";
+import { Globe } from "lucide-react";
+
+const CustomField = () => (
+  <FieldLabel icon={<Globe size="16" />} label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `readOnly`
+
+Indicate to the user that this field is in a read-only state by showing a padlock icon to the right of the text.
+
+```tsx
+import { FieldLabel } from "@puckeditor/core";
+
+const CustomField = () => (
+  <FieldLabel label="Title" readOnly>
+    <input readOnly />
+  </FieldLabel>
+);
+
+// ...
+```

package/dist/docs/api-reference/components/inline-text-field.md

@@ -0,0 +1,77 @@
+# \<InlineTextField\>
+
+Render inline-editable text from a [field transform](/docs/api-reference/field-transforms).
+
+This is the same component that powers the [`contentEditable`](/docs/api-reference/fields/text#contenteditable) option internally. Use it to create new [inline-editable fields](/docs/extending-puck/ui-overrides#introducing-new-field-types).
+
+```tsx
+import { InlineTextField, Puck } from "@puckeditor/core";
+
+const fieldTransforms = {
+  heading: ({ value, componentId, propPath, isReadOnly }) => (
+    <InlineTextField
+      value={value}
+      componentId={componentId}
+      propPath={propPath}
+      isReadOnly={isReadOnly}
+    />
+  ),
+};
+```
+
+All required props below are available in [field transforms](/docs/api-reference/field-transforms).
+
+## Props
+
+| Param                         | Example                       | Type                        | Status   |
+| ----------------------------- | ----------------------------- | --------------------------- | -------- |
+| [`componentId`](#componentid) | `"Example-1"`                 | String                      | Required |
+| [`propPath`](#proppath)       | `"heading.text"`              | String                      | Required |
+| [`value`](#value)             | `"Hello, world"`              | String \| null \| undefined | Required |
+| [`isReadOnly`](#isreadonly)   | `false`                       | Boolean                     | Required |
+| [`opts`](#opts)               | `{ disableLineBreaks: true }` | Object                      | -        |
+
+## Required props
+
+### `componentId`
+
+The id of the component containing the prop being edited.
+
+### `propPath`
+
+The path of the prop to write changes to, within the component's props object.
+
+Append keys to the transform's [`propPath`](/docs/api-reference/field-transforms#proppath) to target a nested property within the field value (for example `${propPath}.text`).
+
+### `value`
+
+The current field value.
+
+### `isReadOnly`
+
+Whether the field is currently read-only. When `true`, edits are prevented.
+
+## Optional props
+
+### `opts`
+
+Additional options for the field.
+
+#### `opts.disableLineBreaks`
+
+Prevent the user from adding line breaks when pressing `Enter`. Defaults to `false`.
+
+```tsx
+<InlineTextField
+  value={value}
+  componentId={componentId}
+  propPath={propPath}
+  isReadOnly={isReadOnly}
+  opts={{ disableLineBreaks: true }}
+/>
+```
+
+## Further reading
+
+- [Field Transforms API reference](/docs/api-reference/field-transforms)
+- [Field Transforms guide](/docs/extending-puck/field-transforms)

package/dist/docs/api-reference/components/puck-components.md

@@ -0,0 +1,19 @@
+# \<Puck.Components\>
+
+Render a draggable list of components based on the [user-defined components](/docs/api-reference/configuration/config#components) when composing a custom Puck UI. Respects the [`categories` API](/docs/api-reference/configuration/config#categories).
+
+```tsx
+import { Puck } from "@puckeditor/core";
+
+export function Editor() {
+  return (
+    <Puck>
+      <Puck.Components />
+    </Puck>
+  );
+}
+```
+
+## Props
+
+This component doesn't accept any props.

package/dist/docs/api-reference/components/puck-fields.md

@@ -0,0 +1,39 @@
+# \<Puck.Fields\>
+
+Render the fields for the currently selected item in [`<Puck.Preview>`](/docs/api-reference/components/puck-preview) when composing a custom Puck UI.
+
+```tsx
+import { Puck } from "@puckeditor/core";
+
+export function Editor() {
+  return (
+    <Puck>
+      <Puck.Fields />
+    </Puck>
+  );
+}
+```
+
+## Props
+
+| Param                       | Example             | Type    | Status |
+| --------------------------- | ------------------- | ------- | ------ |
+| [`wrapFields`](#wrapfields) | `wrapFields: false` | boolean | -      |
+
+## Optional props
+
+### `wrapFields`
+
+Whether or not the top-level fields should be padded and separated by a a border. Defaults to `true`.
+
+```tsx
+import { Puck } from "@puckeditor/core";
+
+export function Editor() {
+  return (
+    <Puck>
+      <Puck.Fields wrapFields={false} />
+    </Puck>
+  );
+}
+```

package/dist/docs/api-reference/components/puck-layout.md

@@ -0,0 +1,27 @@
+# \<Puck.Layout\>
+
+Render the standard Puck layout. This is useful for implementing behavior using the [internal Puck API](/docs/extending-puck/internal-puck-api) without changing the default UI.
+
+```tsx
+import { Puck } from "@puckeditor/core";
+
+const Example = ({ children }) => {
+  useEffect(() => console.log("Hello, world"), []);
+
+  return <>{children}</>;
+};
+
+export function Editor() {
+  return (
+    <Puck>
+      <Example>
+        <Puck.Layout />
+      </Example>
+    </Puck>
+  );
+}
+```
+
+## Props
+
+This component doesn't accept any props.

package/dist/docs/api-reference/components/puck-outline.md

@@ -0,0 +1,19 @@
+# \<Puck.Outline\>
+
+Render an interactive outline of the current data payload when composing a custom Puck UI.
+
+```tsx
+import { Puck } from "@puckeditor/core";
+
+export function Editor() {
+  return (
+    <Puck>
+      <Puck.Outline />
+    </Puck>
+  );
+}
+```
+
+## Props
+
+This component doesn't accept any props.

package/dist/docs/api-reference/components/puck-preview.md

@@ -0,0 +1,39 @@
+# \<Puck.Preview\>
+
+Render a drag-and-drop preview for the current data when composing a custom Puck UI.
+
+```tsx
+import { Puck } from "@puckeditor/core";
+
+export function Editor() {
+  return (
+    <Puck>
+      <Puck.Preview />
+    </Puck>
+  );
+}
+```
+
+## Props
+
+| Param       | Example                    | Type   | Status |
+| ----------- | -------------------------- | ------ | ------ |
+| [`id`](#id) | `id: "my-preview-content"` | String | -      |
+
+## Optional props
+
+### `id`
+
+A unique identifier for the preview frame. Default: `puck-preview`.
+
+```tsx
+import { Puck } from "@puckeditor/core";
+
+export function Editor() {
+  return (
+    <Puck>
+      <Puck.Preview id="my-frame" />
+    </Puck>
+  );
+}
+```