@c2n/upload 0.0.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+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

@@ -0,0 +1,27 @@
+# Upload
+
+`@c2n/upload` is a Lit web component for browsing or dropping files, validating them, uploading one or many files, and presenting the queue with `c2-attachment`.
+
+```bash
+npm install @c2n/upload
+```
+
+```html
+<script type="module" src="/node_modules/@c2n/upload/dist/upload.js"></script>
+
+<c2-upload id="documents" name="documents" multiple accept=".pdf,image/*" max-files="5" max-size="10485760"></c2-upload>
+
+<script type="module">
+  const upload = document.querySelector('#documents')
+  upload.uploadHandler = async (file, { signal, onProgress }) => {
+    // Connect XMLHttpRequest, an SDK, or another transport here.
+    // Call onProgress(0–100), resolve with the server result, and honor signal for cancellation.
+    onProgress(50)
+    return { name: file.name }
+  }
+</script>
+```
+
+Set `auto-upload="false"` to prepare the queue and call `upload()` later. Failed handlers render the attachment retry action. Removing an active item aborts its signal. The form-associated element contributes every selected file under `name` and supports `required` validation.
+
+Single-file uploaders hide the picker once a file is accepted and restore it after removal. Multiple uploaders remain open until `max-files` is reached and report the remaining capacity. Use `variant="compact"` for a button-only picker without drag-and-drop.

package/dist/upload.js

@@ -0,0 +1,482 @@
+import { LitElement, html, nothing, svg, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import "@c2n/attachment";
+import "@c2n/button";
+//#region src/upload.scss?inline
+var upload_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  width: min(100%, var(--c2-upload--width,420px));\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.dropzone {\n  box-sizing: border-box;\n  display: flex;\n  width: 100%;\n  padding: var(--c2-upload__dropzone--padding,28px 20px);\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--c2-upload__dropzone--gap,8px);\n  border: var(--c2-upload__dropzone--border,1px dashed #bcbcc6);\n  border-radius: var(--c2-upload__dropzone--border-radius,14px);\n  background: var(--c2-upload__dropzone--background,#ffffff);\n  text-align: center;\n  cursor: pointer;\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), border 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.dropzone:hover:not([aria-disabled=true]) {\n  border: var(--c2-upload__dropzone__hover--border,1px dashed #a1a1aa);\n  background: var(--c2-upload__dropzone__hover--background,#fafafa);\n}\n.dropzone:focus-visible {\n  outline: var(--c2-upload__dropzone__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-upload__dropzone__focus--outline-offset,2px);\n}\n.dropzone[aria-disabled=true] {\n  cursor: default;\n  opacity: var(--c2-upload__dropzone__disabled--opacity,0.38);\n}\n\n.dropzone--dragging,\n.dropzone--dragging:hover {\n  border: var(--c2-upload__dropzone__drag--border,1px dashed rgb(2, 101, 220));\n  background: var(--c2-upload__dropzone__drag--background,#e8f2ff);\n}\n\ninput {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.upload-icon,\n::slotted([slot=drop-icon]) {\n  display: block;\n  width: var(--c2-upload__icon--size,32px);\n  height: var(--c2-upload__icon--size,32px);\n  color: var(--c2-upload__icon--color,rgb(2, 101, 220));\n  --c2-feather-icon--size: var(--c2-upload__icon--size,32px);\n  --c2-phosphor-icon--size: var(--c2-upload__icon--size,32px);\n  --c2-mat-icon--font-size: var(--c2-upload__icon--size,32px);\n}\n\n.compact-button {\n  vertical-align: top;\n}\n\n.compact-icon {\n  display: inline-flex;\n  width: 18px;\n  height: 18px;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n.compact-icon .upload-icon,\n.compact-icon ::slotted([slot=drop-icon]) {\n  width: 100%;\n  height: 100%;\n}\n\n.prompt {\n  color: var(--c2-upload__prompt--color,#18181b);\n  font-size: var(--c2-upload__prompt--font-size,14px);\n  font-weight: var(--c2-upload__prompt--font-weight,600);\n  line-height: 1.4;\n}\n\n.action {\n  color: var(--c2-upload__action--color,rgb(2, 101, 220));\n}\n\n.hint {\n  color: var(--c2-upload__hint--color,#71717a);\n  font-size: var(--c2-upload__hint--font-size,12px);\n  line-height: 1.4;\n}\n\n.list {\n  display: grid;\n  gap: var(--c2-upload__list--gap,10px);\n  margin-top: var(--c2-upload__list--margin-top,12px);\n}\n\n.list--standalone {\n  margin-top: 0;\n}\n\n.errors {\n  display: grid;\n  gap: var(--c2-upload__error--gap,4px);\n  margin-top: var(--c2-upload__list--margin-top,12px);\n  color: var(--c2-upload__error--color,#dc2626);\n  font-size: var(--c2-upload__error--font-size,12px);\n  line-height: 1.4;\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/upload.ts
+var uploadItemId = 0;
+var Upload = class Upload extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.internals = this.attachInternals();
+		this.controllers = /* @__PURE__ */ new Map();
+		this.dragDepth = 0;
+		this.customValidityMessage = "";
+		this.uploadItems = [];
+		this.rejections = [];
+		this.dragging = false;
+		this.disabledByForm = false;
+		this.multiple = false;
+		this.variant = "dropzone";
+		this.accept = "";
+		this.maxFiles = 0;
+		this.maxSize = 0;
+		this.autoUpload = true;
+		this.disabled = false;
+		this.required = false;
+		this.name = "";
+		this.ariaLabel = null;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.styles = unsafeCSS(upload_default);
+	}
+	/** Current queue, including ready, uploading, complete and failed items. */
+	get items() {
+		return this.uploadItems;
+	}
+	/** Selected files. Assign a new array to replace the queue. */
+	get value() {
+		return this.uploadItems.map((item) => item.file);
+	}
+	set value(files) {
+		this.resetQueue(false);
+		if (files.length) this.addFiles(files);
+	}
+	get form() {
+		return this.internals.form;
+	}
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		for (const controller of this.controllers.values()) controller.abort();
+		for (const item of this.uploadItems) this.revokePreview(item);
+	}
+	formResetCallback() {
+		this.resetQueue(false);
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled;
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.syncFormState();
+	}
+	updated() {
+		this.syncFormState();
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
+	get remainingCapacity() {
+		return this.maxFiles > 0 ? Math.max(0, this.maxFiles - this.uploadItems.length) : void 0;
+	}
+	get canAddMore() {
+		if (!this.multiple) return this.uploadItems.length === 0;
+		return this.remainingCapacity === void 0 || this.remainingCapacity > 0;
+	}
+	get pickerDisabled() {
+		return this.effectiveDisabled || !this.canAddMore;
+	}
+	/** Opens the native file browser. */
+	browse() {
+		if (!this.pickerDisabled) this.input.click();
+	}
+	/** Validates and adds files supplied by the browser, drag-and-drop or application code. */
+	addFiles(files) {
+		if (this.effectiveDisabled) return [];
+		const incoming = [...files];
+		const accepted = [];
+		const rejected = [];
+		const available = this.maxFiles > 0 ? Math.max(0, this.maxFiles - this.uploadItems.length) : Number.POSITIVE_INFINITY;
+		incoming.forEach((file, index) => {
+			let reason;
+			let message = "";
+			if (!this.multiple && (this.uploadItems.length > 0 || index > 0)) {
+				reason = "multiple";
+				message = "Only one file can be selected.";
+			} else if (accepted.length >= available) {
+				reason = "limit";
+				message = `A maximum of ${this.maxFiles} files is allowed.`;
+			} else if (!this.accepts(file)) {
+				reason = "type";
+				message = `${file.name} is not an accepted file type.`;
+			} else if (this.maxSize > 0 && file.size > this.maxSize) {
+				reason = "size";
+				message = `${file.name} exceeds the ${this.formatBytes(this.maxSize)} size limit.`;
+			}
+			if (reason) rejected.push({
+				file,
+				reason,
+				message
+			});
+			else accepted.push(this.createItem(file));
+		});
+		if (accepted.length) {
+			this.uploadItems = [...this.uploadItems, ...accepted];
+			this.emit("files-selected", {
+				files: accepted.map((item) => item.file),
+				items: accepted
+			});
+			this.notifyValueChange();
+			if (this.autoUpload && this.uploadHandler) Promise.all(accepted.map((item) => this.runUpload(item.id)));
+		}
+		this.rejections = rejected;
+		if (rejected.length) this.emit("file-reject", { rejections: rejected });
+		return accepted;
+	}
+	/** Upload every ready/error item, or one item by id. */
+	async upload(id) {
+		if (!this.uploadHandler || this.effectiveDisabled) return;
+		const items = this.uploadItems.filter((item) => (!id || item.id === id) && item.status !== "uploading" && item.status !== "complete");
+		await Promise.all(items.map((item) => this.runUpload(item.id)));
+	}
+	/** Retry a failed or ready item. */
+	async retry(id) {
+		await this.upload(id);
+	}
+	/** Cancels an active upload and removes its attachment. */
+	removeFile(id) {
+		const item = this.uploadItems.find((candidate) => candidate.id === id);
+		if (!item || this.effectiveDisabled) return;
+		this.controllers.get(id)?.abort();
+		this.controllers.delete(id);
+		this.revokePreview(item);
+		this.uploadItems = this.uploadItems.filter((candidate) => candidate.id !== id);
+		this.emit("upload-remove", { item });
+		this.notifyValueChange();
+	}
+	/** Cancels and removes every queued file. */
+	clear() {
+		this.resetQueue(true);
+	}
+	resetQueue(notify) {
+		const removedItems = this.uploadItems;
+		for (const controller of this.controllers.values()) controller.abort();
+		this.controllers.clear();
+		for (const item of this.uploadItems) this.revokePreview(item);
+		this.uploadItems = [];
+		this.rejections = [];
+		if (this.input) this.input.value = "";
+		if (notify && removedItems.length) {
+			for (const item of removedItems) this.emit("upload-remove", { item });
+			this.notifyValueChange();
+		}
+	}
+	notifyValueChange() {
+		this.syncFormState();
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	emit(type, detail) {
+		const event = new CustomEvent(type, {
+			detail,
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	createItem(file) {
+		return {
+			id: `upload-${++uploadItemId}`,
+			file,
+			status: "ready",
+			progress: 0,
+			previewUrl: file.type.startsWith("image/") && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : void 0
+		};
+	}
+	updateItem(id, update) {
+		let updated;
+		this.uploadItems = this.uploadItems.map((item) => {
+			if (item.id !== id) return item;
+			updated = {
+				...item,
+				...update
+			};
+			return updated;
+		});
+		return updated;
+	}
+	async runUpload(id) {
+		const current = this.uploadItems.find((item) => item.id === id);
+		if (!current || !this.uploadHandler || this.effectiveDisabled) return;
+		this.controllers.get(id)?.abort();
+		const controller = new AbortController();
+		this.controllers.set(id, controller);
+		const started = this.updateItem(id, {
+			status: "uploading",
+			progress: 0,
+			error: void 0
+		});
+		if (!started) return;
+		this.emit("upload-start", { item: started });
+		try {
+			const result = await this.uploadHandler(current.file, {
+				signal: controller.signal,
+				onProgress: (progress) => {
+					if (controller.signal.aborted) return;
+					const safeProgress = Math.min(100, Math.max(0, Number.isFinite(progress) ? progress : 0));
+					const item = this.updateItem(id, { progress: safeProgress });
+					if (item) this.emit("upload-progress", {
+						item,
+						progress: safeProgress
+					});
+				}
+			});
+			if (controller.signal.aborted || !this.uploadItems.some((item) => item.id === id)) return;
+			const completed = this.updateItem(id, {
+				status: "complete",
+				progress: 100,
+				result,
+				error: void 0
+			});
+			if (completed) this.emit("upload-success", {
+				item: completed,
+				result
+			});
+		} catch (error) {
+			if (controller.signal.aborted || !this.uploadItems.some((item) => item.id === id)) return;
+			const failed = this.updateItem(id, {
+				status: "error",
+				error
+			});
+			if (failed) this.emit("upload-error", {
+				item: failed,
+				error
+			});
+		} finally {
+			if (this.controllers.get(id) === controller) this.controllers.delete(id);
+		}
+	}
+	accepts(file) {
+		const rules = this.accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+		if (!rules.length) return true;
+		const name = file.name.toLowerCase();
+		const type = file.type.toLowerCase();
+		return rules.some((rule) => {
+			if (rule.startsWith(".")) return name.endsWith(rule);
+			if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+			return type === rule;
+		});
+	}
+	formatBytes(bytes) {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1048576) return `${Math.round(bytes / 1024)} KB`;
+		return `${(bytes / 1048576).toFixed(bytes < 10485760 ? 1 : 0)} MB`;
+	}
+	revokePreview(item) {
+		if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+	}
+	handleInputChange(event) {
+		event.stopPropagation();
+		const input = event.currentTarget;
+		if (input.files) this.addFiles(input.files);
+		input.value = "";
+	}
+	stopNativeInput(event) {
+		event.stopPropagation();
+	}
+	handleKeydown(event) {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		this.browse();
+	}
+	handleDragEnter(event) {
+		event.preventDefault();
+		if (this.pickerDisabled || !event.dataTransfer?.types.includes("Files")) return;
+		this.dragDepth += 1;
+		this.dragging = true;
+	}
+	handleDragOver(event) {
+		if (this.pickerDisabled) return;
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+	}
+	handleDragLeave(event) {
+		event.preventDefault();
+		this.dragDepth = Math.max(0, this.dragDepth - 1);
+		if (this.dragDepth === 0) this.dragging = false;
+	}
+	handleDrop(event) {
+		event.preventDefault();
+		this.dragDepth = 0;
+		this.dragging = false;
+		if (this.pickerDisabled || !event.dataTransfer?.files) return;
+		this.addFiles(event.dataTransfer.files);
+	}
+	syncFormState() {
+		if (this.effectiveDisabled || !this.name || this.uploadItems.length === 0) this.internals.setFormValue(null);
+		else {
+			const data = new FormData();
+			for (const item of this.uploadItems) data.append(this.name, item.file, item.file.name);
+			this.internals.setFormValue(data);
+		}
+		const missing = this.required && this.uploadItems.length === 0;
+		const flags = this.customValidityMessage ? { customError: true } : missing ? { valueMissing: true } : {};
+		const message = this.customValidityMessage || (missing ? "Please select a file." : "");
+		const anchor = this.renderRoot.querySelector(".picker") ?? void 0;
+		this.internals.setValidity(flags, message, anchor);
+	}
+	renderIcon() {
+		return svg`<svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 16l-4-4-4 4M12 12v9"></path><path d="M20.4 17.5A5 5 0 0 0 18 8.2 7 7 0 0 0 4.3 10.8 4.5 4.5 0 0 0 5.5 19H7"></path></svg>`;
+	}
+	get defaultHint() {
+		const parts = [];
+		if (this.accept) parts.push(this.accept);
+		if (this.maxSize > 0) parts.push(`up to ${this.formatBytes(this.maxSize)}`);
+		if (this.multiple && this.uploadItems.length > 0 && this.remainingCapacity !== void 0) parts.push(`${this.remainingCapacity} file${this.remainingCapacity === 1 ? "" : "s"} remaining`);
+		else if (this.maxFiles > 0) parts.push(`${this.maxFiles} file${this.maxFiles === 1 ? "" : "s"} maximum`);
+		return parts.join(" · ") || (this.multiple ? "Select one or more files" : "Select one file");
+	}
+	get defaultActionLabel() {
+		if (!this.multiple || this.uploadItems.length === 0) return this.multiple ? "Upload files" : "Upload file";
+		return this.remainingCapacity === void 0 ? "Upload more" : `Upload more (${this.remainingCapacity} remaining)`;
+	}
+	renderPicker() {
+		if (!this.canAddMore) return nothing;
+		if (this.variant === "compact") return html`
+        <c2-button class="picker compact-button" ?disabled=${this.effectiveDisabled} @click=${this.browse}>
+          <span class="compact-icon" slot="prefix-icon"><slot name="drop-icon">${this.renderIcon()}</slot></span>
+          <slot name="action">${this.defaultActionLabel}</slot>
+        </c2-button>
+      `;
+		return html`
+      <div
+        class=${classMap({
+			picker: true,
+			dropzone: true,
+			"dropzone--dragging": this.dragging
+		})}
+        role="button"
+        tabindex=${this.effectiveDisabled ? -1 : 0}
+        aria-label=${this.ariaLabel || "Upload files"}
+        aria-disabled=${this.effectiveDisabled ? "true" : "false"}
+        @click=${this.browse}
+        @keydown=${this.handleKeydown}
+        @dragenter=${this.handleDragEnter}
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @drop=${this.handleDrop}
+      >
+        <slot name="drop-icon">${this.renderIcon()}</slot>
+        <div class="prompt">
+          <slot name="prompt">
+            ${this.multiple && this.uploadItems.length ? html`Drop more files here or <span class="action">upload more</span>` : html`Drop files here or <span class="action">browse</span>`}
+          </slot>
+        </div>
+        <div class="hint"><slot name="hint">${this.defaultHint}</slot></div>
+      </div>
+    `;
+	}
+	render() {
+		return html`
+      <input
+        type="file"
+        tabindex="-1"
+        aria-label=${this.ariaLabel || "Upload files"}
+        .accept=${this.accept}
+        ?multiple=${this.multiple}
+        ?disabled=${this.pickerDisabled}
+        @input=${this.stopNativeInput}
+        @change=${this.handleInputChange}
+      />
+      ${this.renderPicker()}
+      ${this.rejections.length ? html`<div class="errors" role="status">${this.rejections.map((rejection) => html`<div>${rejection.message}</div>`)}</div>` : nothing}
+      ${this.uploadItems.length ? html`<div class=${classMap({
+			list: true,
+			"list--standalone": !this.canAddMore
+		})} role="list" aria-label="Selected files">
+              ${this.uploadItems.map((item) => html`
+                  <c2-attachment
+                    role="listitem"
+                    layout="row"
+                    .name=${item.file.name}
+                    .type=${item.file.type || void 0}
+                    .size=${this.formatBytes(item.file.size)}
+                    .src=${item.previewUrl}
+                    .status=${item.status}
+                    .progress=${item.progress}
+                    removable
+                    ?disabled=${this.effectiveDisabled}
+                    @attachment-remove=${() => this.removeFile(item.id)}
+                    @attachment-retry=${() => void this.retry(item.id)}
+                  ></c2-attachment>
+                `)}
+            </div>` : html`<slot name="empty"></slot>`}
+    `;
+	}
+};
+__decorate([state()], Upload.prototype, "uploadItems", void 0);
+__decorate([state()], Upload.prototype, "rejections", void 0);
+__decorate([state()], Upload.prototype, "dragging", void 0);
+__decorate([state()], Upload.prototype, "disabledByForm", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Upload.prototype, "multiple", void 0);
+__decorate([property({ reflect: true })], Upload.prototype, "variant", void 0);
+__decorate([property({ type: String })], Upload.prototype, "accept", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "max-files"
+})], Upload.prototype, "maxFiles", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "max-size"
+})], Upload.prototype, "maxSize", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "auto-upload"
+})], Upload.prototype, "autoUpload", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Upload.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Upload.prototype, "required", void 0);
+__decorate([property({ type: String })], Upload.prototype, "name", void 0);
+__decorate([property({ attribute: "aria-label" })], Upload.prototype, "ariaLabel", void 0);
+__decorate([property({ attribute: false })], Upload.prototype, "uploadHandler", void 0);
+__decorate([query("input", true)], Upload.prototype, "input", void 0);
+Upload = __decorate([customElement("c2-upload")], Upload);
+//#endregion
+export { Upload };

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@c2n/upload",
+  "version": "0.0.9",
+  "type": "module",
+  "main": "dist/upload.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/upload.d.ts",
+      "default": "./dist/upload.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "upload",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../attachment:build",
+        "../button:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/attachment": "0.0.9",
+    "@c2n/button": "0.0.9",
+    "@c2n/core": "0.0.9",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "e4768cce5e0fbd5bc3165cd493a1e8d57cf0fff4"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/upload. Import once, anywhere in the program:
+//
+//     import '@c2n/upload/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Upload } from '@c2n/upload'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-upload': C2Props<Upload>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/upload.d.ts

@@ -0,0 +1,210 @@
+import { LitElement } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import type { AttachmentStatus } from '@c2n/attachment';
+import '@c2n/attachment';
+import '@c2n/button';
+export type UploadVariant = 'dropzone' | 'compact';
+export interface UploadItem {
+    id: string;
+    file: File;
+    status: AttachmentStatus;
+    progress: number;
+    result?: unknown;
+    error?: unknown;
+    previewUrl?: string;
+}
+export type UploadRejectionReason = 'type' | 'size' | 'limit' | 'multiple';
+export interface UploadRejection {
+    file: File;
+    reason: UploadRejectionReason;
+    message: string;
+}
+export interface UploadHandlerContext {
+    signal: AbortSignal;
+    onProgress: (progress: number) => void;
+}
+/** Application upload function. Resolve with server data; throw to show the attachment error/retry state. */
+export type UploadHandler = (file: File, context: UploadHandlerContext) => unknown | Promise<unknown>;
+export interface UploadFilesEventDetail {
+    files: File[];
+    items: UploadItem[];
+}
+export interface UploadProgressEventDetail {
+    item: UploadItem;
+    progress: number;
+}
+export interface UploadResultEventDetail {
+    item: UploadItem;
+    result?: unknown;
+    error?: unknown;
+}
+/** Events fired by {@link Upload}, keyed for `addEventListener`. */
+export interface UploadEventMap {
+    'files-selected': CustomEvent<UploadFilesEventDetail>;
+    'file-reject': CustomEvent<{
+        rejections: UploadRejection[];
+    }>;
+    'upload-start': CustomEvent<{
+        item: UploadItem;
+    }>;
+    'upload-progress': CustomEvent<UploadProgressEventDetail>;
+    'upload-success': CustomEvent<UploadResultEventDetail>;
+    'upload-error': CustomEvent<UploadResultEventDetail>;
+    'upload-remove': CustomEvent<{
+        item: UploadItem;
+    }>;
+    input: Event;
+    change: Event;
+}
+export interface Upload {
+    addEventListener: TypedAddEventListener<Upload, UploadEventMap>;
+    removeEventListener: TypedRemoveEventListener<Upload, UploadEventMap>;
+}
+/**
+ * Drag-and-drop file uploader with multiple selection, validation and an attachment-based upload queue. Set an async
+ * `uploadHandler(file, { signal, onProgress })` property to connect transport; the component owns progress, success,
+ * error, retry, cancel and removal UI while leaving network policy to the application.
+ *
+ * @tag c2-upload
+ *
+ * @slot drop-icon - Replaces the upload-cloud icon in the drop zone.
+ * @slot prompt - Replaces the main drop-zone instruction.
+ * @slot hint - Replaces the accepted-type and size hint.
+ * @slot action - Replaces the dynamic label of the compact upload button.
+ * @slot empty - Optional content shown below the drop zone while no files are selected.
+ *
+ * @event {CustomEvent<UploadFilesEventDetail>} files-selected - Fired after valid files enter the queue through browse, drop or `addFiles()`.
+ * @event {CustomEvent<{ rejections: UploadRejection[] }>} file-reject - Fired when type, size, count or single-file rules reject files.
+ * @event {CustomEvent<{ item: UploadItem }>} upload-start - Fired when an item begins uploading.
+ * @event {CustomEvent<UploadProgressEventDetail>} upload-progress - Fired when the upload handler reports progress.
+ * @event {CustomEvent<UploadResultEventDetail>} upload-success - Fired after an upload handler resolves; `item.result` contains its result.
+ * @event {CustomEvent<UploadResultEventDetail>} upload-error - Fired after an upload handler rejects; `item.error` contains the error.
+ * @event {CustomEvent<{ item: UploadItem }>} upload-remove - Fired after an item is removed or an active upload is cancelled.
+ * @event {Event} input - Fired whenever the file value changes, for form and framework bindings.
+ * @event {Event} change - Fired whenever files are added or removed, for form and framework bindings.
+ *
+ * @cssproperty {pixel} [--c2-upload--width=420px]
+ * @cssproperty {padding} [--c2-upload__dropzone--padding=28px 20px]
+ * @cssproperty {pixel} [--c2-upload__dropzone--gap=8px]
+ * @cssproperty {color} [--c2-upload__dropzone--background=#ffffff]
+ * @cssproperty {border} [--c2-upload__dropzone--border=1px dashed #bcbcc6]
+ * @cssproperty {border-radius} [--c2-upload__dropzone--border-radius=14px]
+ * @cssproperty {color} [--c2-upload__dropzone__hover--background=#fafafa]
+ * @cssproperty {border} [--c2-upload__dropzone__hover--border=1px dashed #a1a1aa]
+ * @cssproperty {color} [--c2-upload__dropzone__drag--background=#e8f2ff]
+ * @cssproperty {border} [--c2-upload__dropzone__drag--border=1px dashed rgb(2, 101, 220)]
+ * @cssproperty {outline} [--c2-upload__dropzone__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-upload__dropzone__focus--outline-offset=2px]
+ * @cssproperty {opacity} [--c2-upload__dropzone__disabled--opacity=0.38]
+ * @cssproperty {pixel} [--c2-upload__icon--size=32px]
+ * @cssproperty {color} [--c2-upload__icon--color=rgb(2, 101, 220)]
+ * @cssproperty {color} [--c2-upload__prompt--color=#18181b]
+ * @cssproperty {font-size} [--c2-upload__prompt--font-size=14px]
+ * @cssproperty {font-weight} [--c2-upload__prompt--font-weight=600]
+ * @cssproperty {color} [--c2-upload__action--color=rgb(2, 101, 220)]
+ * @cssproperty {color} [--c2-upload__hint--color=#71717a]
+ * @cssproperty {font-size} [--c2-upload__hint--font-size=12px]
+ * @cssproperty {pixel} [--c2-upload__list--gap=10px]
+ * @cssproperty {pixel} [--c2-upload__list--margin-top=12px]
+ * @cssproperty {color} [--c2-upload__error--color=#dc2626]
+ * @cssproperty {font-size} [--c2-upload__error--font-size=12px]
+ * @cssproperty {pixel} [--c2-upload__error--gap=4px]
+ *
+ * @internalcomponent c2-attachment, c2-button
+ */
+export declare class Upload extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    private readonly internals;
+    private readonly controllers;
+    private dragDepth;
+    private customValidityMessage;
+    private uploadItems;
+    private rejections;
+    private dragging;
+    private disabledByForm;
+    /** Accept several files in one browse or drop operation. */
+    multiple: boolean;
+    /** Dropzone provides drag-and-drop; compact renders only an upload button. */
+    variant: UploadVariant;
+    /** Comma-separated MIME types or file extensions, using the native file-input syntax. */
+    accept: string;
+    /** Maximum number of queued files. Zero means unlimited. */
+    maxFiles: number;
+    /** Maximum size of each file in bytes. Zero means unlimited. */
+    maxSize: number;
+    /** Run `uploadHandler` immediately after files are accepted. */
+    autoUpload: boolean;
+    /** Disables browsing, dropping and attachment actions. */
+    disabled: boolean;
+    /** Requires at least one selected file for native form validation. */
+    required: boolean;
+    /** Form field name. Each queued file is appended with this name. */
+    name: string;
+    /** Accessible name for the drop zone. */
+    ariaLabel: string | null;
+    /** Application-provided transport. Report percentages through `onProgress`; respect `signal` to support cancel. */
+    uploadHandler: UploadHandler | undefined;
+    private input;
+    /** Current queue, including ready, uploading, complete and failed items. */
+    get items(): readonly UploadItem[];
+    /** Selected files. Assign a new array to replace the queue. */
+    get value(): File[];
+    set value(files: File[]);
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    disconnectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    protected updated(): void;
+    private get effectiveDisabled();
+    private get remainingCapacity();
+    private get canAddMore();
+    private get pickerDisabled();
+    /** Opens the native file browser. */
+    browse(): void;
+    /** Validates and adds files supplied by the browser, drag-and-drop or application code. */
+    addFiles(files: Iterable<File>): UploadItem[];
+    /** Upload every ready/error item, or one item by id. */
+    upload(id?: string): Promise<void>;
+    /** Retry a failed or ready item. */
+    retry(id: string): Promise<void>;
+    /** Cancels an active upload and removes its attachment. */
+    removeFile(id: string): void;
+    /** Cancels and removes every queued file. */
+    clear(): void;
+    private resetQueue;
+    private notifyValueChange;
+    private emit;
+    private createItem;
+    private updateItem;
+    private runUpload;
+    private accepts;
+    private formatBytes;
+    private revokePreview;
+    private handleInputChange;
+    private stopNativeInput;
+    private handleKeydown;
+    private handleDragEnter;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private syncFormState;
+    private renderIcon;
+    private get defaultHint();
+    private get defaultActionLabel();
+    private renderPicker;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-upload': Upload;
+    }
+}
+//# sourceMappingURL=upload.d.ts.map

package/types/src/upload.d.ts.map

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

package/vue.d.ts

@@ -0,0 +1,45 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/upload. Import once, anywhere in the program:
+//
+//     import '@c2n/upload/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Upload, UploadEventMap } from '@c2n/upload'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-upload': DefineComponent<
+      C2Props<Upload> & {
+        'max-files'?: unknown
+        'max-size'?: unknown
+        'auto-upload'?: unknown
+        'aria-label'?: unknown
+        onInput?: (event: UploadEventMap['input']) => void
+        onChange?: (event: UploadEventMap['change']) => void
+        onFilesSelected?: (event: UploadEventMap['files-selected']) => void
+        onFileReject?: (event: UploadEventMap['file-reject']) => void
+        onUploadStart?: (event: UploadEventMap['upload-start']) => void
+        onUploadProgress?: (event: UploadEventMap['upload-progress']) => void
+        onUploadSuccess?: (event: UploadEventMap['upload-success']) => void
+        onUploadError?: (event: UploadEventMap['upload-error']) => void
+        onUploadRemove?: (event: UploadEventMap['upload-remove']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}