@byline/admin 2.5.2 → 2.6.0

package/dist/fields/file/file-upload-field.module.js

@@ -0,0 +1,15 @@
+import "./file-upload-field_module.css";
+const file_upload_field_module = {
+    root: "root-Eb8eWY",
+    input: "input-xBB8ah",
+    zone: "zone-HdQNmA",
+    "zone-active": "zone-active-iYZTsU",
+    zoneActive: "zone-active-iYZTsU",
+    "zone-busy": "zone-busy-GmToil",
+    zoneBusy: "zone-busy-GmToil",
+    icon: "icon-vXw1Do",
+    label: "label-XCy7AX",
+    action: "action-LUT6jM",
+    error: "error-fFWMW2"
+};
+export default file_upload_field_module;

package/dist/fields/file/file-upload-field_module.css

@@ -0,0 +1,74 @@
+:is(.root-Eb8eWY, .byline-field-file-upload) {
+  margin-top: .25rem;
+}
+
+:is(.input-xBB8ah, .byline-field-file-upload-input) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:is(.zone-HdQNmA, .byline-field-file-upload-zone) {
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-8);
+  border: 2px dashed var(--gray-600);
+  border-radius: var(--border-radius-lg);
+  color: var(--gray-400);
+  text-align: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+  transition: color .15s, background-color .15s, border-color .15s;
+  display: flex;
+}
+
+:is(.zone-HdQNmA:hover, .byline-field-file-upload-zone:hover) {
+  border-color: var(--primary-500);
+  background-color: oklch(from var(--primary-900) l c h / .1);
+}
+
+:is(.zone-active-iYZTsU, .byline-field-file-upload-zone-active) {
+  border-color: var(--primary-400);
+  background-color: oklch(from var(--primary-900) l c h / .2);
+  color: var(--primary-300);
+}
+
+:is(.zone-busy-GmToil, .byline-field-file-upload-zone-busy) {
+  border-color: var(--gray-700);
+  background-color: oklch(from var(--canvas-800) l c h / .5);
+  color: var(--gray-600);
+  cursor: not-allowed;
+}
+
+:is(.icon-vXw1Do, .byline-field-file-upload-icon) {
+  opacity: .6;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+:is(.label-XCy7AX, .byline-field-file-upload-label) {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+:is(.action-LUT6jM, .byline-field-file-upload-action) {
+  color: var(--primary-400);
+  text-underline-offset: 2px;
+  text-decoration: underline;
+}
+
+:is(.error-fFWMW2, .byline-field-file-upload-error) {
+  color: var(--red-400);
+  font-size: var(--font-size-xs);
+  margin-top: .375rem;
+}
+

package/dist/fields/group/group-field.d.ts

@@ -0,0 +1,15 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { GroupField as GroupFieldType } from '@byline/core';
+interface GroupFieldProps {
+    field: GroupFieldType;
+    defaultValue: any;
+    path: string;
+}
+export declare const GroupField: ({ field, defaultValue, path }: GroupFieldProps) => import("react").JSX.Element;
+export {};

package/dist/fields/group/group-field.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ErrorText } from "@byline/ui/react";
+import classnames from "classnames";
+import { placeholderForField } from "../field-helpers.js";
+import { FieldRenderer } from "../field-renderer.js";
+import { useFieldError } from "../../forms/form-context.js";
+import group_field_module from "./group-field.module.js";
+const GroupField = ({ field, defaultValue, path })=>{
+    const fieldError = useFieldError(field.name);
+    const groupData = useMemo(()=>{
+        if (defaultValue && 'object' == typeof defaultValue && !Array.isArray(defaultValue)) return defaultValue;
+        const placeholder = {};
+        for (const childField of field.fields)placeholder[childField.name] = placeholderForField(childField);
+        return placeholder;
+    }, [
+        defaultValue,
+        field.fields
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-group ${field.name}`,
+        children: [
+            field.label && /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-field-group-header', group_field_module.header),
+                children: [
+                    /*#__PURE__*/ jsxs("h3", {
+                        className: classnames('byline-field-group-title', group_field_module.title),
+                        children: [
+                            field.label,
+                            ' ',
+                            !field.optional && /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-field-group-required', group_field_module.required),
+                                children: "*"
+                            })
+                        ]
+                    }),
+                    field.helpText && /*#__PURE__*/ jsx("p", {
+                        className: classnames('byline-field-group-help', group_field_module.help),
+                        children: field.helpText
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-group-body', group_field_module.body),
+                children: field.fields.map((innerField)=>/*#__PURE__*/ jsx(FieldRenderer, {
+                        field: innerField,
+                        defaultValue: groupData[innerField.name],
+                        basePath: path,
+                        disableSorting: true
+                    }, innerField.name))
+            }),
+            fieldError && /*#__PURE__*/ jsx(ErrorText, {
+                id: `${field.name}-error`,
+                text: fieldError
+            })
+        ]
+    });
+};
+export { GroupField };

package/dist/fields/group/group-field.module.js

@@ -0,0 +1,9 @@
+import "./group-field_module.css";
+const group_field_module = {
+    header: "header-QiCfGn",
+    title: "title-N84bq9",
+    required: "required-aR0X2E",
+    help: "help-xFiofl",
+    body: "body-_PqbfY"
+};
+export default group_field_module;

package/dist/fields/group/group-field_module.css

@@ -0,0 +1,27 @@
+:is(.header-QiCfGn, .byline-field-group-header) {
+  margin-bottom: var(--spacing-8);
+  flex-direction: column;
+  gap: .125rem;
+  display: flex;
+}
+
+:is(.title-N84bq9, .byline-field-group-title) {
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+}
+
+:is(.required-aR0X2E, .byline-field-group-required) {
+  color: var(--red-500);
+}
+
+:is(.help-xFiofl, .byline-field-group-help) {
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+}
+
+:is(.body-_PqbfY, .byline-field-group-body) {
+  gap: var(--spacing-8);
+  flex-direction: column;
+  display: flex;
+}
+

package/dist/fields/image/image-field.d.ts

@@ -0,0 +1,19 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import { type ImageField as FieldType, type StoredFileValue } from '@byline/core';
+interface ImageFieldProps {
+    field: FieldType;
+    /** Collection path required to call the /upload endpoint. */
+    collectionPath?: string;
+    value?: StoredFileValue | null;
+    defaultValue?: StoredFileValue | null;
+    onChange?: (value: StoredFileValue | null) => void;
+    path?: string;
+}
+export declare const ImageField: ({ field, collectionPath, value, defaultValue, onChange: _onChange, path, }: ImageFieldProps) => import("react").JSX.Element;
+export {};

package/dist/fields/image/image-field.js

@@ -0,0 +1,241 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { isPendingStoredFileValue } from "@byline/core";
+import { useTranslation } from "@byline/i18n/react";
+import { CloseIcon, ErrorText, HelpText, IconButton, ImageLightbox, Label, LoaderRing } from "@byline/ui/react";
+import classnames from "classnames";
+import { useFieldError, useFieldValue, useFormContext, useIsDirty, useIsFieldUploading } from "../../forms/form-context.js";
+import { useFieldChangeHandler } from "../use-field-change-handler.js";
+import image_field_module from "./image-field.module.js";
+import { ImageUploadField } from "./image-upload-field.js";
+const ImageField = ({ field, collectionPath, value, defaultValue, onChange: _onChange, path })=>{
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const isDirty = useIsDirty(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const isUploading = useIsFieldUploading(fieldPath);
+    const { removePendingUpload } = useFormContext();
+    const { t } = useTranslation('byline-admin');
+    const handleChange = useFieldChangeHandler(field, fieldPath);
+    const incomingValue = isDirty ? fieldValue ?? null : value ?? fieldValue ?? defaultValue ?? null;
+    const isPending = isPendingStoredFileValue(incomingValue);
+    const isOldPlaceholder = (v)=>{
+        if (!v || 'object' != typeof v) return false;
+        const maybe = v;
+        return 'placeholder' === maybe.storageProvider && 'pending' === maybe.storagePath;
+    };
+    const showUploadWidget = null == incomingValue || isOldPlaceholder(incomingValue);
+    const thumbVariant = incomingValue && !isPendingStoredFileValue(incomingValue) ? incomingValue.variants?.find((v)=>'thumbnail' === v.name) : void 0;
+    const previewUrl = thumbVariant?.storageUrl ?? incomingValue?.storageUrl;
+    const handleRemove = ()=>{
+        if (isPending) removePendingUpload(fieldPath);
+        handleChange(null);
+    };
+    const [lightboxOpen, setLightboxOpen] = useState(false);
+    const canOpenLightbox = !isPending && !!incomingValue?.storageUrl;
+    const htmlId = fieldPath;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-image ${field.name}`,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-image-header', image_field_module.header),
+                children: /*#__PURE__*/ jsx(Label, {
+                    id: htmlId,
+                    htmlFor: htmlId,
+                    label: field.label ?? field.name,
+                    required: !field.optional
+                })
+            }),
+            showUploadWidget ? collectionPath ? /*#__PURE__*/ jsx(ImageUploadField, {
+                field: field,
+                collectionPath: collectionPath,
+                fieldPath: fieldPath,
+                onUploaded: (uploaded)=>{
+                    handleChange(uploaded);
+                }
+            }) : /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-image-empty', image_field_module.empty),
+                children: t('fields.image.empty')
+            }) : /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-field-image-tile', image_field_module.tile),
+                children: [
+                    isUploading && /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-field-image-uploading', image_field_module.uploading),
+                        "aria-live": "polite",
+                        "aria-busy": "true",
+                        children: /*#__PURE__*/ jsx(LoaderRing, {})
+                    }),
+                    collectionPath && /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-field-image-remove', image_field_module.remove),
+                        children: /*#__PURE__*/ jsx(IconButton, {
+                            type: "button",
+                            intent: "noeffect",
+                            onClick: handleRemove,
+                            size: "xs",
+                            disabled: isUploading,
+                            "aria-label": t('fields.image.removeAriaLabel'),
+                            children: /*#__PURE__*/ jsx(CloseIcon, {
+                                width: "15px",
+                                height: "15px"
+                            })
+                        })
+                    }),
+                    previewUrl && /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-field-image-preview-wrap', image_field_module["preview-wrap"]),
+                        children: [
+                            canOpenLightbox ? /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: ()=>setLightboxOpen(true),
+                                "aria-label": t('fields.image.openLightboxAriaLabel'),
+                                className: classnames('byline-field-image-preview-button', image_field_module["preview-button"]),
+                                children: /*#__PURE__*/ jsx("img", {
+                                    src: previewUrl,
+                                    alt: incomingValue.originalFilename ?? incomingValue.filename,
+                                    className: classnames('byline-field-image-preview', image_field_module.preview, 'image/svg+xml' === incomingValue.mimeType && [
+                                        'byline-field-image-preview-svg',
+                                        image_field_module["preview-svg"]
+                                    ])
+                                })
+                            }) : /*#__PURE__*/ jsx("img", {
+                                src: previewUrl,
+                                alt: incomingValue.originalFilename ?? incomingValue.filename,
+                                className: classnames('byline-field-image-preview', image_field_module.preview, 'image/svg+xml' === incomingValue.mimeType && [
+                                    'byline-field-image-preview-svg',
+                                    image_field_module["preview-svg"]
+                                ])
+                            }),
+                            isPending && /*#__PURE__*/ jsx("div", {
+                                className: classnames('byline-field-image-pending', image_field_module.pending),
+                                children: t('fields.fileMeta.pendingUpload')
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-field-image-meta', image_field_module.meta),
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        children: t('fields.fileMeta.filename')
+                                    }),
+                                    ' ',
+                                    incomingValue?.filename
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        children: t('fields.fileMeta.original')
+                                    }),
+                                    ' ',
+                                    incomingValue?.originalFilename
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        children: t('fields.fileMeta.type')
+                                    }),
+                                    ' ',
+                                    incomingValue?.mimeType
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        children: t('fields.fileMeta.size')
+                                    }),
+                                    ' ',
+                                    incomingValue?.fileSize
+                                ]
+                            }),
+                            isPending ? /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        children: t('fields.fileMeta.status')
+                                    }),
+                                    ' ',
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: classnames('byline-field-image-meta-pending', image_field_module["meta-pending"]),
+                                        children: t('fields.fileMeta.willUploadOnSave')
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                                children: t('fields.fileMeta.storage')
+                                            }),
+                                            ' ',
+                                            incomingValue?.storageProvider
+                                        ]
+                                    }),
+                                    incomingValue?.imageWidth != null && /*#__PURE__*/ jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                                children: t('fields.imageMeta.dimensions')
+                                            }),
+                                            ' ',
+                                            incomingValue.imageWidth,
+                                            null != incomingValue.imageHeight ? `×${incomingValue.imageHeight}` : ''
+                                        ]
+                                    }),
+                                    incomingValue?.imageFormat != null && /*#__PURE__*/ jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                                children: t('fields.imageMeta.format')
+                                            }),
+                                            ' ',
+                                            incomingValue.imageFormat
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                                children: t('fields.imageMeta.thumbnail')
+                                            }),
+                                            ' ',
+                                            thumbVariant ? t('fields.imageMeta.thumbnailGenerated') : t('fields.imageMeta.thumbnailPending')
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            field.helpText && /*#__PURE__*/ jsx(HelpText, {
+                text: field.helpText
+            }),
+            fieldError && /*#__PURE__*/ jsx(ErrorText, {
+                id: `${field.name}-error`,
+                text: fieldError
+            }),
+            canOpenLightbox && incomingValue?.storageUrl && /*#__PURE__*/ jsx(ImageLightbox, {
+                isOpen: lightboxOpen,
+                onDismiss: ()=>setLightboxOpen(false),
+                src: incomingValue.storageUrl,
+                alt: incomingValue.originalFilename ?? incomingValue.filename,
+                downloadFilename: incomingValue.originalFilename ?? incomingValue.filename,
+                title: incomingValue.originalFilename ?? incomingValue.filename,
+                meta: {
+                    width: incomingValue.imageWidth,
+                    height: incomingValue.imageHeight,
+                    fileSize: incomingValue.fileSize,
+                    mimeType: incomingValue.mimeType
+                }
+            })
+        ]
+    });
+};
+export { ImageField };

package/dist/fields/image/image-field.module.js

@@ -0,0 +1,22 @@
+import "./image-field_module.css";
+const image_field_module = {
+    header: "header-qe_E_5",
+    remove: "remove-ib7eKx",
+    empty: "empty-b8pdoJ",
+    tile: "tile-izbLn0",
+    "preview-wrap": "preview-wrap-Cjr0PD",
+    previewWrap: "preview-wrap-Cjr0PD",
+    "preview-button": "preview-button-LAsENX",
+    previewButton: "preview-button-LAsENX",
+    preview: "preview-DIASGB",
+    "preview-svg": "preview-svg-sCwreb",
+    previewSvg: "preview-svg-sCwreb",
+    pending: "pending-s6X_52",
+    uploading: "uploading-nqh2Gh",
+    meta: "meta-uHyKiu",
+    "meta-key": "meta-key-eR6iRU",
+    metaKey: "meta-key-eR6iRU",
+    "meta-pending": "meta-pending-lEdTAj",
+    metaPending: "meta-pending-lEdTAj"
+};
+export default image_field_module;

package/dist/fields/image/image-field_module.css

@@ -0,0 +1,121 @@
+:is(.header-qe_E_5, .byline-field-image-header) {
+  align-items: baseline;
+  gap: var(--spacing-8);
+  margin-bottom: .25rem;
+  display: flex;
+}
+
+:is(.remove-ib7eKx, .byline-field-image-remove) {
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  z-index: 1;
+  position: absolute;
+}
+
+.byline-field-image-remove .byline-button {
+  color: var(--gray-900);
+}
+
+:is(.dark .byline-field-image-remove .byline-button, [data-theme="dark"] .byline-field-image-remove .byline-button) {
+  color: var(--gray-200);
+}
+
+:is(.empty-b8pdoJ, .byline-field-image-empty) {
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  font-style: italic;
+}
+
+:is(.tile-izbLn0, .byline-field-image-tile) {
+  gap: var(--spacing-16);
+  padding: var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
+  border-radius: var(--border-radius-md);
+  margin-top: .25rem;
+  display: flex;
+  position: relative;
+}
+
+:is(.preview-wrap-Cjr0PD, .byline-field-image-preview-wrap) {
+  position: relative;
+}
+
+:is(.preview-button-LAsENX, .byline-field-image-preview-button) {
+  appearance: none;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+:is(.preview-button-LAsENX:focus-visible, .byline-field-image-preview-button:focus-visible) {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+}
+
+:is(.preview-button-LAsENX img, .byline-field-image-preview-button img) {
+  transition: opacity .12s;
+}
+
+:is(.preview-button-LAsENX:hover img, .byline-field-image-preview-button:hover img) {
+  opacity: .85;
+}
+
+:is(.preview-DIASGB, .byline-field-image-preview) {
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
+  border-radius: var(--border-radius-sm);
+  object-fit: contain;
+  min-width: 4rem;
+  min-height: 4rem;
+  max-height: 10rem;
+}
+
+:is(.preview-svg-sCwreb, .byline-field-image-preview-svg) {
+  width: 271px;
+  height: 159px;
+  max-height: none;
+}
+
+:is(.pending-s6X_52, .byline-field-image-pending) {
+  background-color: oklch(from var(--yellow-600) l c h / .9);
+  color: var(--yellow-100);
+  font-size: .6rem;
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--border-radius-sm);
+  padding: .125rem .375rem;
+  position: absolute;
+  top: .25rem;
+  left: .25rem;
+}
+
+:is(.uploading-nqh2Gh, .byline-field-image-uploading) {
+  z-index: 2;
+  background-color: oklch(from var(--gray-950) l c h / .5);
+  border-radius: var(--border-radius-md);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+:is(.meta-uHyKiu, .byline-field-image-meta) {
+  padding-right: var(--spacing-32);
+  color: var(--gray-200);
+  font-size: var(--font-size-xs);
+  flex-direction: column;
+  gap: .125rem;
+  display: flex;
+}
+
+:is(.meta-key-eR6iRU, .byline-field-image-meta-key) {
+  font-weight: var(--font-weight-semibold);
+}
+
+:is(.meta-pending-lEdTAj, .byline-field-image-meta-pending) {
+  color: var(--yellow-400);
+}
+

package/dist/fields/image/image-upload-field.d.ts

@@ -0,0 +1,21 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import { type ImageField as FieldType, type PendingStoredFileValue, type StoredFileValue } from '@byline/core';
+interface ImageUploadFieldProps {
+    field: FieldType;
+    /** Collection path used to build the upload URL (e.g. `'media'`). */
+    collectionPath: string;
+    /** Field path in the form (e.g. `'image'` or `'content.0.image'`). */
+    fieldPath: string;
+    /** Called with the PendingStoredFileValue for immediate preview. */
+    onUploaded: (value: StoredFileValue | PendingStoredFileValue) => void;
+    /** Optional accepted-file MIME types string for the native file input. */
+    accept?: string;
+}
+export declare const ImageUploadField: ({ field: _field, collectionPath, fieldPath, onUploaded, accept, }: ImageUploadFieldProps) => import("react").JSX.Element;
+export {};