@undp/design-system-react/dist/file-upload-wZou_Low.js

React based design system for UNDP

import { n as e, t } from "./utils-ca9as9Ye.js";
import { t as n } from "./createLucideIcon-JAvQ_M0R.js";
import { t as r } from "./label-NHR9EVmO.js";
import { Button as i } from "./Button.js";
import { Badge as a } from "./Badge.js";
import { P as o } from "./Typography.js";
import { useState as s } from "react";
import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
var d = n("trash-2", [
	["path", {
		d: "M10 11v6",
		key: "nco0om"
	}],
	["path", {
		d: "M14 11v6",
		key: "outv1u"
	}],
	["path", {
		d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
		key: "miytrc"
	}],
	["path", {
		d: "M3 6h18",
		key: "d0wm0j"
	}],
	["path", {
		d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
		key: "e791ji"
	}]
]), f = n("upload", [
	["path", {
		d: "M12 3v12",
		key: "1x0j5s"
	}],
	["path", {
		d: "m17 8-5-5-5 5",
		key: "7q97r8"
	}],
	["path", {
		d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
		key: "ih7n3h"
	}]
]);
//#endregion
//#region src/components/ui/file-upload.tsx
function p({ onFileChange: n, children: p, ...m }) {
	let h = m.id || e(), [g, _] = s([]), v = (e) => {
		if (e.target.files) {
			let t = [...Array.from(e.target.files)];
			m.multiple && (t = [...g, ...Array.from(e.target.files)]), _(t), n?.(t);
		}
	}, y = (e) => {
		let t = g.filter((t, n) => n !== e);
		_(t), n?.(t);
	};
	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("div", {
		className: t("mb-2.5 flex w-full flex-col items-center gap-4", m.className),
		children: [/* @__PURE__ */ l("input", {
			...m,
			id: h,
			type: "file",
			className: "hidden",
			onChange: v
		}), /* @__PURE__ */ l("label", {
			htmlFor: h,
			className: "flex w-full",
			children: p || /* @__PURE__ */ u("div", {
				className: "flex w-full cursor-pointer flex-col items-center gap-2 rounded-base bg-surface px-4 py-6 text-content-primary hover:bg-surface-hover",
				children: [/* @__PURE__ */ l(f, {
					className: "h-7 w-7",
					strokeWidth: 1
				}), /* @__PURE__ */ l(o, {
					className: "text-content-primary",
					size: "sm",
					marginBottom: "none",
					children: "Click on this area to upload"
				})]
			})
		})]
	}), g.length > 0 ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(r, { children: "File(s) uploaded" }), /* @__PURE__ */ l("div", {
		className: "justify-left mt-1 flex w-full flex-wrap gap-2.5",
		children: g?.map((e, t) => /* @__PURE__ */ u(a, {
			variant: "surface",
			className: "flex gap-4 border border-stroke bg-surface pr-4 pl-4",
			children: [/* @__PURE__ */ l("span", {
				className: "truncate text-base text-content-primary",
				children: e.name
			}), /* @__PURE__ */ l(i, {
				variant: "icon",
				padding: "none",
				onClick: () => y(t),
				children: /* @__PURE__ */ l(d, { className: "h-4 w-4 stroke-error" })
			})]
		}, e.name))
	})] }) : null] });
}
//#endregion
export { p as t };

//# sourceMappingURL=file-upload-wZou_Low.js.map