thread-ui 0.16.4 → 0.17.0

package/dist/components/data-input/file-upload/components/file-item.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { css } from '../../../../styled-system/css';
+import { IconButton } from '../../../../components/ui';
+import { Text } from '../../../../components/typography';
+import { TextInput } from '../../text-input';
+import { useFileUploadContext } from '../file-upload-context';
+import { isImageItem, isRemoteFile, splitFileName } from '../file-upload.utils';
+import { FilePreview } from './item-previews';
+const styles = {
+    container: css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2',
+        width: '100%',
+    }),
+    actions: css({
+        display: 'flex',
+        gap: '1',
+        alignItems: 'center',
+    }),
+    editor: css({
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '2',
+        width: '100%',
+        // Don't let the inputs' default width widen the component; fill the width the rows set instead
+        contain: 'inline-size',
+    }),
+    field: css({
+        width: '100%',
+    }),
+};
+/**
+ * Row in the `FileUpload` list: preview, remove, and, for new files, an inline editor for the name
+ * (and alt text for images). Editor fields have no `name`, so they never submit with the form.
+ *
+ * @example
+ * {items.map((item) => <FileItem key={getKey(item)} item={item} />)}
+ */
+export const FileItem = ({ item }) => {
+    const { id, size, disabled, editMode, focusKey, getKey, removeItem, updateItem } = useFileUploadContext();
+    const key = getKey(item);
+    const editable = editMode !== 'none' && !isRemoteFile(item) && !disabled;
+    const { base, extension } = splitFileName(item.name);
+    const [isEditing, setIsEditing] = useState(editable && editMode === 'on-add');
+    // Draft can be empty while typing; the file keeps the original base name until it isn't
+    const [draftName, setDraftName] = useState(base);
+    const [originalBase] = useState(base);
+    const fieldId = `${id}-${key}`;
+    const inputSize = size === 'lg' ? 'md' : size;
+    // `on-add` moves focus to the first new file's name field
+    useEffect(() => {
+        if (isEditing && key === focusKey) {
+            document.getElementById(`${fieldId}-name`)?.focus();
+        }
+    }, []);
+    const handleNameChange = (e) => {
+        const next = e.target.value;
+        setDraftName(next);
+        updateItem(key, { name: `${next.trim() || originalBase}${extension}` });
+    };
+    const handleAltChange = (e) => {
+        updateItem(key, { alt: e.target.value });
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsx(FilePreview, { item: item, actions: _jsxs("div", { className: styles.actions, children: [editable && (_jsx(IconButton, { ariaLabel: isEditing ? `Done editing ${item.name}` : `Edit ${item.name}`, onClick: () => setIsEditing((prev) => !prev), name: isEditing ? 'Check' : 'PencilSimple', size: "md", color: "neutral", text: true })), _jsx(IconButton, { ariaLabel: `Remove ${item.name}`, onClick: () => removeItem(key), name: "XSquare", size: "md", color: "error", disabled: disabled, text: true })] }) }), editable && isEditing && !isRemoteFile(item) && (_jsxs("div", { className: styles.editor, children: [_jsxs("div", { className: styles.field, children: [_jsx(TextInput, { id: `${fieldId}-name`, title: "Filename", value: draftName, onChange: handleNameChange, size: inputSize }), extension && (_jsxs(Text, { color: "text-secondary", size: "xs", children: ["Extension: ", extension] }))] }), isImageItem(item) && (_jsx("div", { className: styles.field, children: _jsx(TextInput, { id: `${fieldId}-alt`, title: "Alt Text", value: item.alt ?? '', onChange: handleAltChange, size: inputSize }) }))] }))] }));
+};
+//# sourceMappingURL=file-item.js.map

package/dist/components/data-input/file-upload/components/file-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-item.js","sourceRoot":"","sources":["../../../../../src/components/data-input/file-upload/components/file-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,MAAM,GAAG;IACd,SAAS,EAAE,GAAG,CAAC;QACd,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,MAAM;KACb,CAAC;IACF,OAAO,EAAE,GAAG,CAAC;QACZ,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,GAAG;QACR,UAAU,EAAE,QAAQ;KACpB,CAAC;IACF,MAAM,EAAE,GAAG,CAAC;QACX,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,MAAM;QACb,+FAA+F;QAC/F,OAAO,EAAE,aAAa;KACtB,CAAC;IACF,KAAK,EAAE,GAAG,CAAC;QACV,KAAK,EAAE,MAAM;KACb,CAAC;CACF,CAAC;AAOF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAiB,EAAE,EAAE;IACnD,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAC/E,oBAAoB,EAAE,CAAC;IAExB,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,QAAQ,KAAK,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACzE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAErD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,QAAQ,IAAI,QAAQ,KAAK,QAAQ,CAAC,CAAC;IAC9E,wFAAwF;IACxF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEtC,MAAM,OAAO,GAAG,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9C,0DAA0D;IAC1D,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,SAAS,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;YACnC,QAAQ,CAAC,cAAc,CAAC,GAAG,OAAO,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;QACrD,CAAC;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,CACxB,CAAgF,EAC/E,EAAE;QACH,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC5B,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,UAAU,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,YAAY,GAAG,SAAS,EAAE,EAAE,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CACvB,CAAgF,EAC/E,EAAE;QACH,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACN,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC/B,KAAC,WAAW,IACX,IAAI,EAAE,IAAI,EACV,OAAO,EACN,eAAK,SAAS,EAAE,MAAM,CAAC,OAAO,aAC5B,QAAQ,IAAI,CACZ,KAAC,UAAU,IACV,SAAS,EACR,SAAS,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,EAE9D,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAC5C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EAC1C,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,SAAS,EACf,IAAI,SACH,CACF,EACD,KAAC,UAAU,IACV,SAAS,EAAE,UAAU,IAAI,CAAC,IAAI,EAAE,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,EAC9B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE,QAAQ,EAClB,IAAI,SACH,IACG,GAEN,EACD,QAAQ,IAAI,SAAS,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAChD,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC5B,eAAK,SAAS,EAAE,MAAM,CAAC,KAAK,aAC3B,KAAC,SAAS,IACT,EAAE,EAAE,GAAG,OAAO,OAAO,EACrB,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,SAAS,GACd,EACD,SAAS,IAAI,CACb,MAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,IAAI,4BACzB,SAAS,IACf,CACP,IACI,EACL,WAAW,CAAC,IAAI,CAAC,IAAI,CACrB,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,YAC3B,KAAC,SAAS,IACT,EAAE,EAAE,GAAG,OAAO,MAAM,EACpB,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,GAAG,IAAI,EAAE,EACrB,QAAQ,EAAE,eAAe,EACzB,IAAI,EAAE,SAAS,GACd,GACG,CACN,IACI,CACN,IACI,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/data-input/file-upload/components/file-upload-content.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Layout for `FileUpload`: file list, dropzone, and the hidden form payload inside `InputWrapper`.
+ * Reads everything from `FileUploadContext`.
+ *
+ * @example
+ * <FileUploadProvider value={context}>
+ *   <FileUploadContent />
+ * </FileUploadProvider>
+ */
+export declare const FileUploadContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-input/file-upload/components/file-upload-content.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cva } from '../../../../styled-system/css';
+import { InputWrapper } from '../../shared/input-wrapper';
+import { useFileUploadContext } from '../file-upload-context';
+import { Dropzone } from './dropzone';
+import { FileItem } from './file-item';
+const styles = {
+    container: cva({
+        base: {
+            width: '100%',
+            padding: '1',
+            // Content never sets the width, so long names truncate instead of widening the component
+            contain: 'inline-size',
+        },
+        variants: {
+            size: {
+                sm: { minWidth: 'xs' }, // 20rem
+                md: { minWidth: 'sm' }, // 24rem
+                lg: { minWidth: 'md' }, // 28rem
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+        },
+    }),
+    fileList: css({
+        marginBottom: '2',
+        display: 'flex',
+        gap: '1',
+        flexDirection: 'column',
+        width: '100%',
+        // ~3.5 rows (64px row + 4px gap) so the cut-off row signals there's more to scroll
+        maxHeight: '60',
+        overflowY: 'auto',
+        padding: '0.5',
+    }),
+    srOnly: css({ srOnly: true }),
+};
+/**
+ * Layout for `FileUpload`: file list, dropzone, and the hidden form payload inside `InputWrapper`.
+ * Reads everything from `FileUploadContext`.
+ *
+ * @example
+ * <FileUploadProvider value={context}>
+ *   <FileUploadContent />
+ * </FileUploadProvider>
+ */
+export const FileUploadContent = () => {
+    const { id, name, title, emptyTitle, size, disabled, divider, items, remoteFiles, isFull, message, meta, inputProps, getKey, } = useFileUploadContext();
+    const displayTitle = items.length === 0 ? (emptyTitle ?? title) : title;
+    return (_jsx("div", { className: styles.container({ size }), children: _jsxs(InputWrapper, { id: id, title: displayTitle, size: size, divider: divider, error: message, children: [items.length > 0 && (_jsx("div", { className: styles.fileList, children: items.map((item) => (_jsx(FileItem, { item: item }, getKey(item)))) })), !isFull && _jsx(Dropzone, {}), name &&
+                    remoteFiles.map((file) => (_jsx("input", { type: "hidden", name: name, value: file.id ?? file.src, disabled: disabled }, file.id ?? file.src))), _jsx("input", { ...inputProps, tabIndex: -1, "aria-hidden": true, className: styles.srOnly }), name && (_jsx("input", { type: "hidden", name: `${name}Meta`, value: meta, disabled: disabled }))] }) }));
+};
+//# sourceMappingURL=file-upload-content.js.map

package/dist/components/data-input/file-upload/components/file-upload-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-content.js","sourceRoot":"","sources":["../../../../../src/components/data-input/file-upload/components/file-upload-content.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-input/file-upload/components/item-previews.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { FileUploadItem } from '../file-upload.types';
+export type ImageDisplayProps = {
+    src: string;
+    /** Image description; empty marks it decorative @default `''` */
+    alt?: string;
+    action?: () => void;
+};
+/**
+ * Standalone image preview with an optional remove action.
+ *
+ * @example
+ * <ImageDisplay src={url} alt="Team photo" action={handleRemove} />
+ */
+export declare const ImageDisplay: ({ src, alt, action }: ImageDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export type FilePreviewProps = {
+    /** New `File` or existing `{ src, name }` file */
+    item: FileUploadItem;
+    actions?: ReactNode;
+};
+/**
+ * File row showing a thumbnail for images (object URL for new files, `src` for existing ones)
+ * or a generic icon otherwise, with name, size when known, and optional actions.
+ *
+ * @example
+ * <FilePreview item={file} actions={<IconButton name="XSquare" onClick={remove} />} />
+ */
+export declare const FilePreview: ({ item, actions }: FilePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-input/file-upload/components/item-previews.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../../../components/typography';
+import { Icon, IconButton } from '../../../../components/ui';
+import { css } from '../../../../styled-system/css';
+import { formatBytes, isImageItem, isRemoteFile } from '../file-upload.utils';
+import { useObjectUrl } from '../use-object-url';
+const styles = {
+    image: css({
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        borderRadius: 'md',
+        maxHeight: '24',
+        maxWidth: '24',
+    }),
+    wrapper: css({
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: '3',
+    }),
+    container: css({
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '3',
+        borderRadius: 'md',
+        backgroundColor: 'gray.light',
+        paddingY: '2',
+        paddingX: '5',
+        '& > :last-child': { flexShrink: '0' },
+    }),
+    innerWrapper: css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '2',
+        flex: '1',
+        minWidth: '0',
+    }),
+    thumbnail: css({
+        width: '12',
+        height: '12',
+        flexShrink: '0',
+        objectFit: 'cover',
+        borderRadius: 'md',
+    }),
+    content: css({
+        display: 'flex',
+        flexDirection: 'column',
+        flex: '1',
+        minWidth: '0',
+        // Each line is its own flex item, so the ellipsis has to live on the lines, not the column
+        '& > *': {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        },
+    }),
+};
+const fixedImageStyles = {
+    height: 'auto',
+    width: 'auto',
+    maxWidth: '64',
+    maxHeight: '100',
+};
+/**
+ * Standalone image preview with an optional remove action.
+ *
+ * @example
+ * <ImageDisplay src={url} alt="Team photo" action={handleRemove} />
+ */
+export const ImageDisplay = ({ src, alt = '', action }) => {
+    if (action) {
+        return (_jsxs("div", { className: styles.wrapper, children: [_jsx("img", { src: src, alt: alt, className: styles.image }), _jsx(IconButton, { onClick: action, name: "XSquare", size: "md", color: "error" })] }));
+    }
+    return _jsx("img", { src: src, alt: alt, className: styles.image, style: fixedImageStyles });
+};
+/**
+ * File row showing a thumbnail for images (object URL for new files, `src` for existing ones)
+ * or a generic icon otherwise, with name, size when known, and optional actions.
+ *
+ * @example
+ * <FilePreview item={file} actions={<IconButton name="XSquare" onClick={remove} />} />
+ */
+export const FilePreview = ({ item, actions }) => {
+    const isRemote = isRemoteFile(item);
+    const isImage = isImageItem(item);
+    const objectUrl = useObjectUrl(!isRemote && isImage ? item : null);
+    const thumbnail = isImage ? (isRemote ? item.src : objectUrl) : null;
+    const size = isRemote ? item.size : item.size;
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.innerWrapper, children: [thumbnail ? (_jsx("img", { src: thumbnail, alt: item.alt ?? '', className: styles.thumbnail })) : (_jsx(Icon, { name: isImage ? 'Image' : 'FileText', size: 48, color: "gray" })), _jsxs("div", { className: styles.content, children: [_jsx(Text, { marginBottom: false, size: "sm", weight: "medium", truncate: true, children: item.name }), size !== undefined && (_jsx(Text, { marginBottom: false, size: "xs", color: "text-secondary", children: formatBytes(size) }))] })] }), actions] }));
+};
+//# sourceMappingURL=item-previews.js.map

package/dist/components/data-input/file-upload/components/item-previews.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-previews.js","sourceRoot":"","sources":["../../../../../src/components/data-input/file-upload/components/item-previews.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-input/file-upload/file-upload-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-context.js","sourceRoot":"","sources":["../../../../src/components/data-input/file-upload/file-upload-context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGjD,MAAM,CAAC,MAAM,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,GACtD,sBAAsB,CAAoB,YAAY,CAAC,CAAC"}

package/dist/components/data-input/file-upload/file-upload.d.ts

@@ -0,0 +1,23 @@
+import { FileUploadProps } from './file-upload.types';
+/**
+ * File upload component with drag-and-drop, validation, previews, and optional renaming (plus alt text for images).
+ * Accepts existing files as `{ src, name }` alongside new `File`s, so it works for edit forms.
+ * Controlled when `value` is passed, uncontrolled otherwise.
+ *
+ * On submit, `formData.getAll(name)` holds kept existing ids followed by new `File`s,
+ * and `${name}Meta` holds a JSON array of per-file metadata in the same order.
+ *
+ * @example
+ * <FileUpload
+ *   name="attachments"
+ *   value={value}
+ *   onChange={onChange}
+ *   accept="image/*,.pdf"
+ *   maxSize={5 * 1024 * 1024}
+ *   maxFiles={3}
+ * />
+ *
+ * @example
+ * <FileUpload name="photos" defaultValue={[{ id: 'img_1', src: '/photos/1.jpg', name: 'beach.jpg' }]} editMode="on-add" />
+ */
+export declare const FileUpload: ({ title, emptyTitle, name, id: idProp, value, defaultValue, onChange, accept, maxSize, maxFiles, supportedFormatsText, required, disabled, error, size, editMode, divider, }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-input/file-upload/file-upload.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileUploadProvider } from './file-upload-context';
+import { FileUploadContent } from './components/file-upload-content';
+import { useFileUpload } from './use-file-upload';
+import { describeFormats } from './file-upload.utils';
+import { useInputId } from '../shared/use-input-id';
+/**
+ * File upload component with drag-and-drop, validation, previews, and optional renaming (plus alt text for images).
+ * Accepts existing files as `{ src, name }` alongside new `File`s, so it works for edit forms.
+ * Controlled when `value` is passed, uncontrolled otherwise.
+ *
+ * On submit, `formData.getAll(name)` holds kept existing ids followed by new `File`s,
+ * and `${name}Meta` holds a JSON array of per-file metadata in the same order.
+ *
+ * @example
+ * <FileUpload
+ *   name="attachments"
+ *   value={value}
+ *   onChange={onChange}
+ *   accept="image/*,.pdf"
+ *   maxSize={5 * 1024 * 1024}
+ *   maxFiles={3}
+ * />
+ *
+ * @example
+ * <FileUpload name="photos" defaultValue={[{ id: 'img_1', src: '/photos/1.jpg', name: 'beach.jpg' }]} editMode="on-add" />
+ */
+export const FileUpload = ({ title = 'Upload a File', emptyTitle, name, id: idProp, value, defaultValue, onChange, accept, maxSize, maxFiles, supportedFormatsText, required, disabled, error, size = 'md', editMode = 'on-demand', divider = true, }) => {
+    const id = useInputId(idProp, name);
+    const upload = useFileUpload({
+        id,
+        name,
+        value,
+        defaultValue,
+        onChange,
+        accept,
+        maxSize,
+        maxFiles,
+        required,
+        disabled,
+        error,
+    });
+    return (_jsx(FileUploadProvider, { value: {
+            ...upload,
+            id,
+            name,
+            title,
+            emptyTitle,
+            size,
+            disabled,
+            editMode,
+            maxFiles,
+            formatsText: supportedFormatsText ?? describeFormats(accept, maxSize),
+            divider,
+        }, children: _jsx(FileUploadContent, {}) }));
+};
+//# sourceMappingURL=file-upload.js.map

package/dist/components/data-input/file-upload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../../../src/components/data-input/file-upload/file-upload.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAC1B,KAAK,GAAG,eAAe,EACvB,UAAU,EACV,IAAI,EACJ,EAAE,EAAE,MAAM,EACV,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,WAAW,EACtB,OAAO,GAAG,IAAI,GACG,EAAE,EAAE;IACrB,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEpC,MAAM,MAAM,GAAG,aAAa,CAAC;QAC5B,EAAE;QACF,IAAI;QACJ,KAAK;QACL,YAAY;QACZ,QAAQ;QACR,MAAM;QACN,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,KAAK;KACL,CAAC,CAAC;IAEH,OAAO,CACN,KAAC,kBAAkB,IAClB,KAAK,EAAE;YACN,GAAG,MAAM;YACT,EAAE;YACF,IAAI;YACJ,KAAK;YACL,UAAU;YACV,IAAI;YACJ,QAAQ;YACR,QAAQ;YACR,QAAQ;YACR,WAAW,EAAE,oBAAoB,IAAI,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC;YACrE,OAAO;SACP,YAED,KAAC,iBAAiB,KAAG,GACD,CACrB,CAAC;AACH,CAAC,CAAC"}

package/dist/components/data-input/file-upload/file-upload.types.d.ts

@@ -0,0 +1,54 @@
+import { UtilitySizeOptions } from '../../../types';
+import { InputProps } from '../shared/input-props.types';
+import type { useFileUpload } from './use-file-upload';
+/** New file picked by the user, with optional alt text for images. */
+export type UploadableFile = File & {
+    /** Alt text for image files */
+    alt?: string;
+};
+/** File that already exists on the server, previewed from `src` and submitted by `id`. */
+export type RemoteFile = {
+    /** URL used for the preview */
+    src: string;
+    /** Display name */
+    name: string;
+    /** Alt text for image files */
+    alt?: string;
+    /** Submitted with the form to mark the file as kept. Defaults to `src` */
+    id?: string;
+    /** MIME type; the extension in `name` or `src` is used when omitted */
+    type?: string;
+    /** Size in bytes, shown in the list when provided */
+    size?: number;
+};
+/** Item in a `FileUpload` value: a new file or an existing one. */
+export type FileUploadItem = UploadableFile | RemoteFile;
+/** How new files can be renamed, plus alt text for images. */
+export type FileEditMode = 'none' | 'on-demand' | 'on-add';
+export type FileUploadProps = InputProps<FileUploadItem[], FileUploadItem[]> & {
+    placeholder?: never;
+    /** Label shown while no files are added. Defaults to `title` */
+    emptyTitle?: string;
+    /** Accepted types in native `accept` syntax, e.g. `image/*,.pdf` */
+    accept?: string;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Maximum number of files, existing and new combined */
+    maxFiles?: number;
+    /** Text describing accepted files. Generated from `accept` and `maxSize` when omitted */
+    supportedFormatsText?: string;
+    /** `none` disables editing, `on-demand` adds an edit button, `on-add` opens the editor as files are added @default `on-demand` */
+    editMode?: FileEditMode;
+};
+export type FileUploadContext = ReturnType<typeof useFileUpload> & {
+    id: string;
+    name?: string;
+    title?: string;
+    emptyTitle?: string;
+    size: UtilitySizeOptions;
+    disabled?: boolean;
+    divider?: boolean;
+    editMode: FileEditMode;
+    maxFiles?: number;
+    formatsText?: string;
+};

package/dist/components/data-input/file-upload/file-upload.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.types.js","sourceRoot":"","sources":["../../../../src/components/data-input/file-upload/file-upload.types.ts"],"names":[],"mappings":""}

package/dist/components/data-input/file-upload/file-upload.utils.d.ts

@@ -0,0 +1,21 @@
+import { FileUploadItem, RemoteFile, UploadableFile } from './file-upload.types';
+/** Narrows an item to an existing, server-side file. */
+export declare const isRemoteFile: (item: FileUploadItem) => item is RemoteFile;
+/** Whether an item is an image, by MIME type or, for remote files without one, by extension. */
+export declare const isImageItem: (item: FileUploadItem) => boolean;
+/** Splits a filename into its base and extension. The extension keeps its dot; dotfiles like `.env` have none. */
+export declare const splitFileName: (name: string) => {
+    base: string;
+    extension: string;
+};
+/** Whether a file matches a native `accept` string (MIME types, `type/*` wildcards, or `.ext`). */
+export declare const matchesAccept: (file: File, accept?: string) => boolean;
+/** Human-readable size, e.g. `5 MB` or `512 KB`. */
+export declare const formatBytes: (bytes: number) => string;
+/** Default supported-formats text from `accept` and `maxSize`, e.g. `Images, PDF up to 5 MB`. */
+export declare const describeFormats: (accept?: string, maxSize?: number) => string | undefined;
+/** Copy of a file with a new name and/or alt text; the file's contents are reused, not copied. */
+export declare const withFileMeta: (file: UploadableFile, meta: {
+    name?: string;
+    alt?: string;
+}) => UploadableFile;

package/dist/components/data-input/file-upload/file-upload.utils.js

@@ -0,0 +1,86 @@
+const imageExtensions = /\.(png|jpe?g|gif|webp|avif|svg|bmp|ico)$/i;
+const wildcardLabels = {
+    image: 'Images',
+    video: 'Videos',
+    audio: 'Audio',
+    text: 'Text files',
+};
+/** Narrows an item to an existing, server-side file. */
+export const isRemoteFile = (item) => !(item instanceof File);
+/** Whether an item is an image, by MIME type or, for remote files without one, by extension. */
+export const isImageItem = (item) => {
+    if (item.type)
+        return item.type.startsWith('image/');
+    const path = isRemoteFile(item) ? item.src.split(/[?#]/)[0] : '';
+    return imageExtensions.test(item.name) || imageExtensions.test(path);
+};
+/** Splits a filename into its base and extension. The extension keeps its dot; dotfiles like `.env` have none. */
+export const splitFileName = (name) => {
+    const dot = name.lastIndexOf('.');
+    if (dot <= 0)
+        return { base: name, extension: '' };
+    return { base: name.slice(0, dot), extension: name.slice(dot) };
+};
+/** Whether a file matches a native `accept` string (MIME types, `type/*` wildcards, or `.ext`). */
+export const matchesAccept = (file, accept) => {
+    if (!accept)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept
+        .split(',')
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean)
+        .some((token) => {
+        if (token === '*' || token === '*/*')
+            return true;
+        if (token.startsWith('.'))
+            return name.endsWith(token);
+        if (token.endsWith('/*'))
+            return type.startsWith(token.slice(0, -1));
+        return type === token;
+    });
+};
+/** Human-readable size, e.g. `5 MB` or `512 KB`. */
+export const formatBytes = (bytes) => {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ['KB', 'MB', 'GB'];
+    let value = bytes / 1024;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    return `${Number(value.toFixed(1))} ${units[unit]}`;
+};
+/** Default supported-formats text from `accept` and `maxSize`, e.g. `Images, PDF up to 5 MB`. */
+export const describeFormats = (accept, maxSize) => {
+    const types = (accept ?? '')
+        .split(',')
+        .map((token) => token.trim())
+        .filter((token) => token && token !== '*' && token !== '*/*')
+        .map((token) => {
+        if (token.startsWith('.'))
+            return token.slice(1).toUpperCase();
+        const [category, subtype = ''] = token.split('/');
+        if (subtype === '*')
+            return wildcardLabels[category] ?? `${category} files`;
+        // `svg+xml` → `SVG`, `vnd.ms-excel` → `MS-EXCEL`
+        return (subtype.split('+')[0].split('.').pop() ?? subtype).toUpperCase();
+    });
+    const typeText = types.join(', ');
+    if (!maxSize)
+        return typeText || undefined;
+    return typeText ? `${typeText} up to ${formatBytes(maxSize)}` : `Up to ${formatBytes(maxSize)}`;
+};
+/** Copy of a file with a new name and/or alt text; the file's contents are reused, not copied. */
+export const withFileMeta = (file, meta) => {
+    const next = new File([file], meta.name ?? file.name, {
+        type: file.type,
+        lastModified: file.lastModified,
+    });
+    next.alt = meta.alt ?? file.alt;
+    return next;
+};
+//# sourceMappingURL=file-upload.utils.js.map

package/dist/components/data-input/file-upload/file-upload.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.utils.js","sourceRoot":"","sources":["../../../../src/components/data-input/file-upload/file-upload.utils.ts"],"names":[],"mappings":"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"}

package/dist/components/data-input/file-upload/index.d.ts

@@ -0,0 +1,3 @@
+export type { FileUploadProps, UploadableFile, RemoteFile, FileUploadItem, FileEditMode, } from './file-upload.types';
+export { FileUpload } from './file-upload';
+export { FilePreview, ImageDisplay } from './components/item-previews';

package/dist/components/data-input/file-upload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-input/file-upload/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/data-input/file-upload/use-file-upload.d.ts

@@ -0,0 +1,58 @@
+import { FileUploadItem } from './file-upload.types';
+/** Options for `useFileUpload`. */
+type UseFileUploadOptions = {
+    id: string;
+    name?: string;
+    value?: FileUploadItem[];
+    defaultValue?: FileUploadItem[];
+    onChange?: (value: FileUploadItem[]) => void | Promise<void>;
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+};
+/**
+ * State and form wiring for `FileUpload`: controllable value, validation of picked files,
+ * keys that survive renames, a native file input kept in sync via `DataTransfer`,
+ * and the metadata JSON submitted alongside the files.
+ *
+ * @example
+ * const upload = useFileUpload({ id, name, value, onChange, accept: 'image/*', maxFiles: 3 });
+ */
+export declare const useFileUpload: ({ id, name, value, defaultValue, onChange, accept, maxSize, maxFiles, required, disabled, error, }: UseFileUploadOptions) => {
+    items: FileUploadItem[];
+    remoteFiles: import("./file-upload.types").RemoteFile[];
+    isFull: boolean;
+    focusKey: string | null;
+    message: string | null;
+    meta: string;
+    inputProps: {
+        id: string;
+        name: string | undefined;
+        type: "file";
+        accept: string | undefined;
+        multiple: boolean;
+        required: boolean | undefined;
+        disabled: boolean | undefined;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        onInvalid: (e: import("react").FormEvent<HTMLInputElement>) => void;
+        onInput: () => void;
+        ref: (node: HTMLInputElement | null) => void;
+    };
+    browseRef: import("react").RefObject<HTMLButtonElement | null>;
+    browseAriaProps: {
+        'aria-invalid': boolean | undefined;
+        'aria-describedby': string | undefined;
+    };
+    getKey: (item: FileUploadItem) => string;
+    addFiles: (files: FileList | File[]) => void;
+    removeItem: (key: string) => void;
+    updateItem: (key: string, meta: {
+        name?: string;
+        alt?: string;
+    }) => void;
+    openPicker: () => void | undefined;
+};
+export {};