@pablo-v/file-upload 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pablo Viniegra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,15 @@
-# Temporary Holding Version
+# @pablo-v/file-upload
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Drag-and-drop file picker with a file list
+
+```bash
+pnpm add @pablo-v/file-upload @pablo-v/tokens
+```
+
+```tsx
+import '@pablo-v/tokens/styles.css';
+import '@pablo-v/file-upload/style.css';
+import { FileUpload } from '@pablo-v/file-upload';
+```
+
+Import `@pablo-v/pixel-icons/style.css` too if you want the drop icon to animate while a file is dragged over; without it the first frame shows.

package/dist/FileUpload.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export type FileRejectionReason = 'type' | 'size' | 'count';
+export interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+}
+export interface FileUploadProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    value?: File[];
+    defaultValue?: File[];
+    onChange?: (files: File[]) => void;
+    /** Files refused by `accept`, `maxSize` or `maxFiles`. */
+    onReject?: (rejections: FileRejection[]) => void;
+    /** Same syntax as the input attribute: `image/*,.pdf`. */
+    accept?: string;
+    multiple?: boolean;
+    /** Largest accepted file, in bytes. */
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    /** @default 'Drop files here or browse' */
+    label?: ReactNode;
+    /** Secondary line under the label, e.g. the accepted types. */
+    hint?: ReactNode;
+    /** Message shown under the zone for each refused file; `false` hides it. */
+    rejectionMessage?: false | ((rejection: FileRejection) => ReactNode);
+}
+export declare function formatBytes(bytes: number): string;
+/**
+ * Drop zone over a native file input, with the chosen files listed below.
+ * Click, Enter or Space opens the picker; dropped files are validated against
+ * `accept`, `maxSize` and `maxFiles`.
+ */
+export declare function FileUpload({ value: valueProp, defaultValue, onChange, onReject, accept, multiple, maxSize, maxFiles, disabled, label, hint, rejectionMessage, className, ...rest }: FileUploadProps): import("react").JSX.Element;
+//# sourceMappingURL=FileUpload.d.ts.map

package/dist/FileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../src/FileUpload.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IACvE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACjD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,aAAa,KAAK,SAAS,CAAC,CAAC;CACtE;AAiBD,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAQxC;AAcD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,SAAS,EAChB,YAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,KAAmC,EACnC,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,+BAuIjB"}

package/dist/FileUpload.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, useControllableState } from '@pablo-v/core';
+import { CloseIcon, FileIcon, UploadIcon, UploadingIcon, WarningIcon } from '@pablo-v/pixel-icons';
+import { useId, useRef, useState, } from 'react';
+function matches(file, accept) {
+    if (!accept)
+        return true;
+    const type = file.type.toLowerCase();
+    const name = file.name.toLowerCase();
+    return accept.split(',').some((raw) => {
+        const rule = raw.trim().toLowerCase();
+        if (!rule)
+            return false;
+        if (rule.startsWith('.'))
+            return name.endsWith(rule);
+        if (rule.endsWith('/*'))
+            return type.startsWith(rule.slice(0, -1));
+        return type === rule;
+    });
+}
+const units = ['B', 'KB', 'MB', 'GB'];
+export function formatBytes(bytes) {
+    let n = bytes;
+    let unit = 0;
+    while (n >= 1024 && unit < units.length - 1) {
+        n /= 1024;
+        unit++;
+    }
+    return `${unit === 0 ? n : n.toFixed(n < 10 ? 1 : 0)} ${units[unit]}`;
+}
+function describeRejection({ file, reason }, maxSize, maxFiles) {
+    if (reason === 'type')
+        return `${file.name} is not an accepted file type`;
+    if (reason === 'size')
+        return `${file.name} is larger than ${formatBytes(maxSize ?? 0)}`;
+    return `${file.name} was not added: the limit is ${maxFiles} ${maxFiles === 1 ? 'file' : 'files'}`;
+}
+const fileKey = (file) => `${file.name}-${file.size}-${file.lastModified}`;
+/**
+ * Drop zone over a native file input, with the chosen files listed below.
+ * Click, Enter or Space opens the picker; dropped files are validated against
+ * `accept`, `maxSize` and `maxFiles`.
+ */
+export function FileUpload({ value: valueProp, defaultValue = [], onChange, onReject, accept, multiple = false, maxSize, maxFiles, disabled = false, label = 'Drop files here or browse', hint, rejectionMessage, className, ...rest }) {
+    const [files, setFiles] = useControllableState({
+        value: valueProp,
+        defaultValue,
+        onChange,
+    });
+    const [dragging, setDragging] = useState(false);
+    const [rejected, setRejected] = useState([]);
+    const id = useId();
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const limit = multiple ? (maxFiles ?? Number.POSITIVE_INFINITY) : 1;
+    const errors = rejectionMessage === false
+        ? []
+        : rejected.map((rejection) => ({
+            key: fileKey(rejection.file),
+            message: rejectionMessage
+                ? rejectionMessage(rejection)
+                : describeRejection(rejection, maxSize, limit),
+        }));
+    const add = (incoming) => {
+        const rejections = [];
+        const accepted = [];
+        const base = multiple ? files : [];
+        const keys = new Set(base.map(fileKey));
+        for (const file of incoming) {
+            if (keys.has(fileKey(file)))
+                continue;
+            keys.add(fileKey(file));
+            if (!matches(file, accept))
+                rejections.push({ file, reason: 'type' });
+            else if (maxSize != null && file.size > maxSize)
+                rejections.push({ file, reason: 'size' });
+            else if (base.length + accepted.length >= limit)
+                rejections.push({ file, reason: 'count' });
+            else
+                accepted.push(file);
+        }
+        if (accepted.length)
+            setFiles([...base, ...accepted]);
+        setRejected(rejections);
+        if (rejections.length)
+            onReject?.(rejections);
+    };
+    // Focus moves to a neighbouring remove button, or back to the zone, so it is not lost with the row.
+    const remove = (index) => {
+        const buttons = listRef.current?.querySelectorAll('.pxl-file-upload__remove');
+        const next = buttons?.[index + 1] ?? buttons?.[index - 1];
+        if (next)
+            next.focus();
+        else
+            inputRef.current?.focus();
+        setRejected([]);
+        setFiles(files.filter((_, j) => j !== index));
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        setDragging(false);
+        if (!disabled)
+            add(Array.from(event.dataTransfer.files));
+    };
+    const handleInput = (event) => {
+        add(Array.from(event.target.files ?? []));
+        event.target.value = '';
+    };
+    return (_jsxs("div", { className: cx('pxl-file-upload', className), "data-disabled": disabled || undefined, ...rest, children: [_jsxs("label", { className: "pxl-file-upload__zone", "data-dragging": dragging || undefined, onDragOver: (event) => {
+                    event.preventDefault();
+                    if (!disabled)
+                        setDragging(true);
+                }, onDragLeave: (event) => {
+                    if (!event.currentTarget.contains(event.relatedTarget))
+                        setDragging(false);
+                }, onDrop: handleDrop, children: [_jsx("input", { ref: inputRef, type: "file", className: "pxl-file-upload__input", accept: accept, multiple: multiple, disabled: disabled, "aria-describedby": [hint != null && `${id}-hint`, errors.length > 0 && `${id}-error`]
+                            .filter(Boolean)
+                            .join(' ') || undefined, onChange: handleInput }), _jsx("span", { className: "pxl-file-upload__icon", "aria-hidden": "true", children: dragging ? _jsx(UploadingIcon, {}) : _jsx(UploadIcon, {}) }), _jsx("span", { className: "pxl-file-upload__label", children: label }), hint != null && (_jsx("span", { id: `${id}-hint`, className: "pxl-file-upload__hint", children: hint }))] }), errors.length > 0 && (_jsx("div", { id: `${id}-error`, className: "pxl-file-upload__error", role: "alert", children: errors.map(({ key, message }) => (_jsxs("p", { className: "pxl-file-upload__message", children: [_jsx(WarningIcon, { className: "pxl-file-upload__message-icon" }), message] }, key))) })), files.length > 0 && (_jsx("ul", { ref: listRef, className: "pxl-file-upload__list", "aria-label": "Selected files", children: files.map((file, i) => (_jsxs("li", { className: "pxl-file-upload__file", children: [_jsx(FileIcon, {}), _jsx("span", { className: "pxl-file-upload__name", children: file.name }), _jsx("span", { className: "pxl-file-upload__size", children: formatBytes(file.size) }), _jsx("button", { type: "button", className: "pxl-file-upload__remove", "aria-label": `Remove ${file.name}`, disabled: disabled, onClick: () => remove(i), children: _jsx(CloseIcon, {}) })] }, fileKey(file)))) }))] }));
+}
+//# sourceMappingURL=FileUpload.js.map

package/dist/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sourceRoot":"","sources":["../src/FileUpload.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnG,OAAO,EAKL,KAAK,EACL,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AA+Bf,SAAS,OAAO,CAAC,IAAU,EAAE,MAA0B;IACrD,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACzB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IACrC,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;QACpC,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QACtC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnE,OAAO,IAAI,KAAK,IAAI,CAAC;IACvB,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAEtC,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,IAAI,CAAC,GAAG,KAAK,CAAC;IACd,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,OAAO,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC5C,CAAC,IAAI,IAAI,CAAC;QACV,IAAI,EAAE,CAAC;IACT,CAAC;IACD,OAAO,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;AACxE,CAAC;AAED,SAAS,iBAAiB,CACxB,EAAE,IAAI,EAAE,MAAM,EAAiB,EAC/B,OAA2B,EAC3B,QAAgB;IAEhB,IAAI,MAAM,KAAK,MAAM;QAAE,OAAO,GAAG,IAAI,CAAC,IAAI,+BAA+B,CAAC;IAC1E,IAAI,MAAM,KAAK,MAAM;QAAE,OAAO,GAAG,IAAI,CAAC,IAAI,mBAAmB,WAAW,CAAC,OAAO,IAAI,CAAC,CAAC,EAAE,CAAC;IACzF,OAAO,GAAG,IAAI,CAAC,IAAI,gCAAgC,QAAQ,IAAI,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;AACrG,CAAC;AAED,MAAM,OAAO,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;AAEjF;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EAAE,SAAS,EAChB,YAAY,GAAG,EAAE,EACjB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,2BAA2B,EACnC,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACS;IAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAC;QAC7C,KAAK,EAAE,SAAS;QAChB,YAAY;QACZ,QAAQ;KACT,CAAC,CAAC;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAC9D,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpE,MAAM,MAAM,GACV,gBAAgB,KAAK,KAAK;QACxB,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;YAC3B,GAAG,EAAE,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC;YAC5B,OAAO,EAAE,gBAAgB;gBACvB,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC;gBAC7B,CAAC,CAAC,iBAAiB,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC;SACjD,CAAC,CAAC,CAAC;IAEV,MAAM,GAAG,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC/B,MAAM,UAAU,GAAoB,EAAE,CAAC;QACvC,MAAM,QAAQ,GAAW,EAAE,CAAC;QAC5B,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QACnC,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;QACxC,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE,CAAC;YAC5B,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBAAE,SAAS;YACtC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;gBAAE,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;iBACjE,IAAI,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,OAAO;gBAAE,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;iBACtF,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,KAAK;gBAAE,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;;gBACvF,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;QACD,IAAI,QAAQ,CAAC,MAAM;YAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;QACtD,WAAW,CAAC,UAAU,CAAC,CAAC;QACxB,IAAI,UAAU,CAAC,MAAM;YAAE,QAAQ,EAAE,CAAC,UAAU,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,oGAAoG;IACpG,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,EAAE;QAC/B,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAAc,0BAA0B,CAAC,CAAC;QAC3F,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAC1D,IAAI,IAAI;YAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;YAClB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC/B,WAAW,CAAC,EAAE,CAAC,CAAC;QAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAkC,EAAE,EAAE;QACxD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,IAAI,CAAC,QAAQ;YAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC3D,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;QAC1C,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,mBAC5B,QAAQ,IAAI,SAAS,KAChC,IAAI,aAER,iBACE,SAAS,EAAC,uBAAuB,mBAClB,QAAQ,IAAI,SAAS,EACpC,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE;oBACpB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,QAAQ;wBAAE,WAAW,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC,EACD,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;oBACrB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAA4B,CAAC;wBAAE,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC5F,CAAC,EACD,MAAM,EAAE,UAAU,aAElB,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,wBAAwB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,sBAEhB,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,QAAQ,CAAC;6BAC/D,MAAM,CAAC,OAAO,CAAC;6BACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,EAE3B,QAAQ,EAAE,WAAW,GACrB,EACF,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACvD,QAAQ,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GACzC,EACP,eAAM,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAQ,EACtD,IAAI,IAAI,IAAI,IAAI,CACf,eAAM,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,uBAAuB,YACtD,IAAI,GACA,CACR,IACK,EACP,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,wBAAwB,EAAC,IAAI,EAAC,OAAO,YACpE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChC,aAAa,SAAS,EAAC,0BAA0B,aAC/C,KAAC,WAAW,IAAC,SAAS,EAAC,+BAA+B,GAAG,EACxD,OAAO,KAFF,GAAG,CAGP,CACL,CAAC,GACE,CACP,EACA,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,aAAI,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,uBAAuB,gBAAY,gBAAgB,YAC5E,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,cAAwB,SAAS,EAAC,uBAAuB,aACvD,KAAC,QAAQ,KAAG,EACZ,eAAM,SAAS,EAAC,uBAAuB,YAAE,IAAI,CAAC,IAAI,GAAQ,EAC1D,eAAM,SAAS,EAAC,uBAAuB,YAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAQ,EACvE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yBAAyB,gBACvB,UAAU,IAAI,CAAC,IAAI,EAAE,EACjC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,YAExB,KAAC,SAAS,KAAG,GACN,KAZF,OAAO,CAAC,IAAI,CAAC,CAajB,CACN,CAAC,GACC,CACN,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/file-upload.css

@@ -0,0 +1,169 @@
+.pxl-file-upload {
+  display: grid;
+  gap: var(--pxl-space-3);
+  font-family: var(--pxl-font-sans);
+  font-size: var(--pxl-text-sm);
+}
+
+.pxl-file-upload__zone {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: var(--pxl-space-1);
+  padding: var(--pxl-space-8) var(--pxl-space-6);
+  border: 1px dashed var(--pxl-gray-600);
+  border-radius: var(--pxl-radius-lg);
+  background: var(--pxl-bg-subtle);
+  color: var(--pxl-fg);
+  text-align: center;
+  cursor: pointer;
+  transition:
+    background-color var(--pxl-dur-fast) linear,
+    border-color var(--pxl-dur-fast) linear;
+}
+
+.pxl-file-upload__zone:hover {
+  border-color: var(--pxl-gray-800);
+  background: var(--pxl-bg);
+}
+
+.pxl-file-upload__zone[data-dragging] {
+  border-style: solid;
+  border-color: var(--pxl-accent);
+  background: var(--pxl-accent-subtle);
+}
+
+.pxl-file-upload__zone:has(:focus-visible) {
+  outline: 2px solid var(--pxl-accent);
+  outline-offset: 2px;
+}
+
+.pxl-file-upload[data-disabled] .pxl-file-upload__zone {
+  border-color: var(--pxl-border);
+  opacity: var(--pxl-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.pxl-file-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.pxl-file-upload__icon {
+  display: grid;
+  place-items: center;
+  width: var(--pxl-size-md);
+  height: var(--pxl-size-md);
+  margin-bottom: var(--pxl-space-2);
+  border: 1px solid var(--pxl-border);
+  border-radius: var(--pxl-radius-md);
+  background: var(--pxl-bg);
+  color: var(--pxl-fg-muted);
+  transition:
+    color var(--pxl-dur-fast) linear,
+    translate var(--pxl-dur-base) var(--pxl-ease-spring);
+}
+
+.pxl-file-upload__zone[data-dragging] .pxl-file-upload__icon {
+  color: var(--pxl-accent-text);
+  translate: 0 -4px;
+}
+
+.pxl-file-upload__label {
+  font-weight: 500;
+}
+
+.pxl-file-upload__hint {
+  color: var(--pxl-fg-muted);
+  font-size: var(--pxl-text-xs);
+}
+
+.pxl-file-upload__error {
+  display: grid;
+  gap: var(--pxl-space-1);
+}
+
+.pxl-file-upload__message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pxl-space-2);
+  margin: 0;
+  color: var(--pxl-danger);
+  font-size: var(--pxl-text-sm);
+  line-height: 1.5;
+  text-wrap: pretty;
+}
+
+/* Optically centre the 16px icon on the first 13px/1.5 line, as in Field. */
+.pxl-file-upload__message-icon {
+  flex: none;
+  margin-top: 2px;
+}
+
+.pxl-file-upload__list {
+  display: grid;
+  gap: var(--pxl-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pxl-file-upload__file {
+  display: flex;
+  align-items: center;
+  gap: var(--pxl-space-2);
+  height: var(--pxl-size-md);
+  padding: 0 var(--pxl-space-1) 0 var(--pxl-space-3);
+  border: 1px solid var(--pxl-border);
+  border-radius: var(--pxl-radius-md);
+  background: var(--pxl-bg);
+  color: var(--pxl-fg-muted);
+  animation: pxl-pop-in var(--pxl-dur-base) var(--pxl-ease-out);
+}
+
+.pxl-file-upload__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--pxl-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pxl-file-upload__size {
+  flex: none;
+  font-family: var(--pxl-font-mono);
+  font-size: var(--pxl-text-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.pxl-file-upload__remove {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: var(--pxl-size-sm);
+  height: var(--pxl-size-sm);
+  padding: 0;
+  border: 0;
+  border-radius: var(--pxl-radius-sm);
+  background: transparent;
+  color: var(--pxl-fg-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--pxl-dur-fast) linear,
+    color var(--pxl-dur-fast) linear;
+}
+
+.pxl-file-upload__remove:hover:not(:disabled) {
+  background: var(--pxl-gray-100);
+  color: var(--pxl-fg);
+}
+
+.pxl-file-upload__remove:focus-visible {
+  outline: 2px solid var(--pxl-accent);
+  outline-offset: -2px;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { type FileRejection, type FileRejectionReason, FileUpload, type FileUploadProps, formatBytes, } from './FileUpload.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,UAAU,EACV,KAAK,eAAe,EACpB,WAAW,GACZ,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { FileUpload, formatBytes, } from './FileUpload.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,WAAW,GACZ,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@pablo-v/file-upload",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Drag-and-drop file picker with a file list",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PabloViniegra/pixel-ui.git",
+    "directory": "packages/file-upload"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": {
+      "source": "./src/file-upload.css",
+      "default": "./dist/file-upload.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pablo-v/core": "^0.2.1",
+    "@pablo-v/pixel-icons": "^1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "@pablo-v/tokens": "^0.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && node ../../scripts/copy-assets.mjs",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
 }