@selectwin/kit 0.1.197 → 0.1.199

package/dist/SelectImageGalleryField.js

@@ -0,0 +1,243 @@
+import { SelectButton as e } from "./SelectButton.js";
+import { CloseIcon as t, LinkIcon as n, PlusIcon as r, StarIcon as ee } from "./icons.js";
+import { SelectInfoTip as i } from "./SelectInfoTip.js";
+import { SelectField as a } from "./SelectField.js";
+import { URL_RE as o, hostOf as te, matchesAccept as ne } from "./uploadUtils.js";
+import { forwardRef as s, useEffect as c, useId as re, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/SelectImageGalleryField.tsx
+var p = 0;
+function m(e) {
+	return p += 1, {
+		key: `file:${p}:${e.name}:${e.size}`,
+		file: e
+	};
+}
+function h(e) {
+	return {
+		key: `url:${e}`,
+		url: e
+	};
+}
+function g(e, t, n) {
+	if (t === n || t < 0 || n < 0 || t >= e.length || n >= e.length) return e;
+	let r = e.slice();
+	return r.splice(n, 0, ...r.splice(t, 1)), r;
+}
+var _ = (e) => {
+	var t;
+	return Array.from(((t = e.dataTransfer) == null ? void 0 : t.types) ?? []).includes("Files");
+}, v = s(function({ label: s, help: p, items: v, onChange: y, max: b = 10, accept: x = ".jpg,.jpeg,.png,.webp", maxSizeMB: S, hint: C, error: ie, allowUrl: ae = !0, tileSize: oe = 88, addLabel: se = "Adicionar", coverLabel: w = "Capa", disabled: T = !1, className: E, style: D, ...ce }, le) {
+	let O = re(), k = l(null), A = l(/* @__PURE__ */ new Map()), j = l(null), [M, N] = u(null), [P, F] = u(null), [I, L] = u(null), [R, z] = u(!1), [ue, B] = u(null), [de, V] = u(!1), [H, U] = u(""), [fe, W] = u(), G = l(/* @__PURE__ */ new Map()), pe = (e) => {
+		if (e.url) return e.url;
+		if (!e.file) return;
+		let t = G.current.get(e.file);
+		return !t && typeof URL < "u" && typeof URL.createObjectURL == "function" && (t = URL.createObjectURL(e.file), G.current.set(e.file, t)), t;
+	};
+	c(() => {
+		let e = new Set(v.map((e) => e.file).filter(Boolean));
+		for (let [t, n] of G.current) e.has(t) || (URL.revokeObjectURL(n), G.current.delete(t));
+	}, [v]), c(() => () => {
+		for (let e of G.current.values()) URL.revokeObjectURL(e);
+		G.current.clear();
+	}, []), c(() => {
+		if (!M) return;
+		let e = M === "__add" ? j.current : A.current.get(M);
+		e == null || e.focus(), N(null);
+	}, [M, v]);
+	let K = Math.max(0, b - v.length), q = K === 0, J = S == null ? Infinity : S * 1024 * 1024, Y = (e) => {
+		if (T || !e.length) return;
+		let t = [], n = [];
+		for (let r of e) ne(r, x) ? r.size > J ? t.push(`${r.name}: maior que ${S} MB`) : n.push(r) : t.push(`${r.name}: formato não aceito`);
+		let r = n.slice(0, K);
+		if (n.length > r.length) {
+			let e = n.length - r.length;
+			t.push(`Limite de ${b} ${b === 1 ? "foto" : "fotos"} — ${e} ${e === 1 ? "ficou" : "ficaram"} de fora`);
+		}
+		B(t.length ? t.join(" · ") : null), r.length && y([...v, ...r.map(m)]);
+	}, X = (e) => {
+		let t = v.filter((t, n) => n !== e);
+		y(t), B(null);
+		let n = t[Math.min(e, t.length - 1)];
+		N(n ? n.key : "__add");
+	}, Z = (e, t) => {
+		var n;
+		let r = g(v, e, t);
+		r !== v && (y(r), N(((n = v[e]) == null ? void 0 : n.key) ?? null));
+	}, me = (e, t) => {
+		T || e.target !== e.currentTarget || (e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), Z(t, t - 1)) : e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), Z(t, t + 1)) : (e.key === "Delete" || e.key === "Backspace") && (e.preventDefault(), X(t)));
+	}, Q = () => {
+		let e = H.trim();
+		if (!o.test(e) || !/^https:\/\//i.test(e)) {
+			W("Use um link https://…");
+			return;
+		}
+		if (v.some((t) => t.url === e)) {
+			W("Essa imagem já está na galeria.");
+			return;
+		}
+		y([...v, h(e)]), U(""), W(void 0), V(!1);
+	}, he = {
+		onDragOver: (e) => {
+			T || P || !_(e) || (e.preventDefault(), e.dataTransfer.dropEffect = q ? "none" : "copy", z(!0));
+		},
+		onDragLeave: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || z(!1);
+		},
+		onDrop: (e) => {
+			T || P || !_(e) || (e.preventDefault(), z(!1), Y(Array.from(e.dataTransfer.files)));
+		}
+	}, $ = ie ?? ue ?? void 0;
+	return /* @__PURE__ */ f("div", {
+		ref: le,
+		...ce,
+		className: `select-field select-gallery${T ? " is-disabled" : ""}${E ? " " + E : ""}`,
+		style: {
+			...D,
+			"--select-gallery-tile": `${oe}px`
+		},
+		children: [
+			(s || p) && /* @__PURE__ */ f("div", {
+				className: "select-field__labelrow",
+				children: [/* @__PURE__ */ f("span", {
+					className: "select-field__labelwrap",
+					children: [s && /* @__PURE__ */ d("span", {
+						className: "select-field__label",
+						id: `${O}-label`,
+						children: s
+					}), p != null && p !== "" && /* @__PURE__ */ d(i, { content: p })]
+				}), b > 1 && v.length > 0 && /* @__PURE__ */ f("span", {
+					className: "select-field__count",
+					children: [
+						v.length,
+						"/",
+						b
+					]
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: `select-gallery__grid${R ? " is-over" : ""}`,
+				role: "list",
+				"aria-labelledby": s ? `${O}-label` : void 0,
+				...he,
+				children: [v.map((e, n) => {
+					var r;
+					let i = pe(e), a = n === 0 && w != null, o = ((r = e.file) == null ? void 0 : r.name) ?? (e.url ? te(e.url) : "foto");
+					return /* @__PURE__ */ f("div", {
+						ref: (t) => {
+							t ? A.current.set(e.key, t) : A.current.delete(e.key);
+						},
+						role: "listitem",
+						tabIndex: T ? -1 : 0,
+						"aria-label": `Foto ${n + 1} de ${v.length}${a ? ` (${w == null ? void 0 : w.toLowerCase()})` : ""}: ${o}.${v.length > 1 ? " Setas movem a foto." : ""} Delete remove.`,
+						className: `select-gallery__tile${P === e.key ? " is-dragging" : ""}${I === n && P && P !== e.key ? " is-target" : ""}`,
+						draggable: !T && v.length > 1,
+						onKeyDown: (e) => me(e, n),
+						onDragStart: (t) => {
+							F(e.key), t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", e.key);
+						},
+						onDragEnd: () => {
+							F(null), L(null);
+						},
+						onDragOver: (e) => {
+							P && (e.preventDefault(), e.dataTransfer.dropEffect = "move", I !== n && L(n));
+						},
+						onDrop: (e) => {
+							if (!P) return;
+							e.preventDefault(), e.stopPropagation();
+							let t = v.findIndex((e) => e.key === P);
+							F(null), L(null), t >= 0 && y(g(v, t, n));
+						},
+						children: [
+							i ? /* @__PURE__ */ d("img", {
+								className: "select-gallery__img",
+								src: i,
+								alt: "",
+								draggable: !1
+							}) : /* @__PURE__ */ d("span", { className: "select-gallery__img select-gallery__img--empty" }),
+							a && /* @__PURE__ */ d("span", {
+								className: "select-gallery__cover",
+								children: w
+							}),
+							!T && /* @__PURE__ */ f("span", {
+								className: "select-gallery__tools",
+								children: [w != null && n > 0 && /* @__PURE__ */ d("button", {
+									type: "button",
+									className: "select-gallery__tool",
+									"aria-label": `Tornar ${w.toLowerCase()}`,
+									title: `Tornar ${w.toLowerCase()}`,
+									onClick: () => Z(n, 0),
+									children: /* @__PURE__ */ d(ee, {})
+								}), /* @__PURE__ */ d("button", {
+									type: "button",
+									className: "select-gallery__tool",
+									"aria-label": "Remover foto",
+									title: "Remover foto",
+									onClick: () => X(n),
+									children: /* @__PURE__ */ d(t, {})
+								})]
+							})
+						]
+					}, e.key);
+				}), !q && !T && /* @__PURE__ */ f("button", {
+					ref: j,
+					type: "button",
+					className: `select-gallery__add${R ? " is-over" : ""}`,
+					onClick: () => {
+						var e;
+						return (e = k.current) == null ? void 0 : e.click();
+					},
+					children: [/* @__PURE__ */ d(r, {}), /* @__PURE__ */ d("span", { children: se })]
+				})]
+			}),
+			/* @__PURE__ */ d("input", {
+				ref: k,
+				type: "file",
+				accept: x,
+				multiple: K > 1,
+				hidden: !0,
+				onChange: (e) => {
+					Y(Array.from(e.target.files ?? [])), e.target.value = "";
+				}
+			}),
+			ae && !q && !T && (de ? /* @__PURE__ */ d(a, {
+				size: "sm",
+				value: H,
+				onChange: (e) => {
+					U(e), W(void 0);
+				},
+				placeholder: "https://…",
+				type: "url",
+				autoFocus: !0,
+				error: fe,
+				onKeyDown: (e) => {
+					e.key === "Enter" ? (e.preventDefault(), Q()) : e.key === "Escape" && (V(!1), U(""), W(void 0));
+				},
+				trailingAction: /* @__PURE__ */ d(e, {
+					variant: "secondary",
+					size: "sm",
+					inline: !0,
+					onClick: Q,
+					children: "Adicionar"
+				})
+			}) : /* @__PURE__ */ f("button", {
+				type: "button",
+				className: "select-field__action select-field__action--icon select-gallery__urltoggle",
+				onClick: () => V(!0),
+				children: [/* @__PURE__ */ d(n, {}), "Colar link de imagem"]
+			})),
+			$ ? /* @__PURE__ */ d("p", {
+				className: "select-field__error",
+				role: "alert",
+				children: $
+			}) : C ? /* @__PURE__ */ d("p", {
+				className: "select-field__hint",
+				children: C
+			}) : null
+		]
+	});
+});
+//#endregion
+export { v as SelectImageGalleryField, m as galleryItemFromFile, h as galleryItemFromUrl };
+
+//# sourceMappingURL=SelectImageGalleryField.js.map

package/dist/SelectImageUploadField.js

@@ -0,0 +1,155 @@
+import { SelectButton as e } from "./SelectButton.js";
+import { GlobeIcon as t, UploadIcon as n } from "./icons.js";
+import { SelectField as r } from "./SelectField.js";
+import { SelectAlert as i } from "./SelectAlert.js";
+import { SelectFileTile as a } from "./SelectFileTile.js";
+import { URL_RE as o, extOf as s, hostOf as c, isImageFile as l, matchesAccept as u, prettySize as d } from "./uploadUtils.js";
+import { forwardRef as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/SelectImageUploadField.tsx
+var y = f(function({ label: f, mode: y = "multiple", files: b, onFilesChange: x, urls: S, onUrlsChange: C, accept: w = ".jpg,.jpeg,.png,.webp", maxSizeMB: T = 3, maxItems: E = 10, maxFiles: D, uploadHint: O, urlPlaceholder: k, helpText: A, className: j, ...ee }, M) {
+	let N = y === "single", P = h(null), [F, I] = g(!1), [L, R] = g(0), [z, B] = g(""), [V, H] = g(null), U = N ? 1 : Math.max(1, E), W = N ? 1 : D ?? U, G = b.length + S.length, K = N ? G === 0 : G < U && b.length < W, q = N ? G === 0 : G < U, J = G > 0, Y = T * 1024 * 1024, X = m(() => b.map((e) => l(e) ? URL.createObjectURL(e) : null), [b]);
+	p(() => () => {
+		X.forEach((e) => {
+			e && URL.revokeObjectURL(e);
+		});
+	}, [X]);
+	let Z = (e) => {
+		let t = e.filter((e) => e.size <= Y && u(e, w));
+		if (R(e.length - t.length), !t.length) return;
+		if (N) {
+			C([]), x(t.slice(0, 1));
+			return;
+		}
+		let n = Math.min(W - b.length, U - G);
+		x([...b, ...t.slice(0, Math.max(0, n))]);
+	}, Q = () => {
+		let e = z.trim();
+		if (e) {
+			if (!o.test(e)) {
+				H("Insira uma URL válida (https://…).");
+				return;
+			}
+			if (S.includes(e)) {
+				H("Essa URL já foi adicionada.");
+				return;
+			}
+			N ? (x([]), C([e])) : C([...S, e].slice(0, U)), B(""), H(null);
+		}
+	}, te = (e) => {
+		e.key === "Enter" && (e.preventDefault(), Q());
+	}, ne = (e) => x(b.filter((t, n) => n !== e)), re = (e) => C(S.filter((t, n) => n !== e)), $ = () => {
+		var e;
+		return (e = P.current) == null ? void 0 : e.click();
+	}, ie = {
+		onDragOver: (e) => {
+			e.preventDefault(), I(!0);
+		},
+		onDragLeave: () => I(!1),
+		onDrop: (e) => {
+			e.preventDefault(), I(!1), Z(Array.from(e.dataTransfer.files));
+		}
+	};
+	return /* @__PURE__ */ v("div", {
+		ref: M,
+		...ee,
+		className: `select-field select-imageupload${j ? " " + j : ""}`,
+		children: [
+			f && /* @__PURE__ */ _("span", {
+				className: "select-field__label",
+				children: f
+			}),
+			/* @__PURE__ */ v("div", {
+				className: `select-uploadzone${F ? " is-over" : ""}`,
+				...ie,
+				children: [
+					J ? /* @__PURE__ */ v("div", {
+						className: `select-filetile-grid${G === 1 ? " select-filetile-grid--single" : ""}`,
+						children: [
+							b.map((e, t) => /* @__PURE__ */ _(a, {
+								src: X[t] ?? void 0,
+								docExt: s(e.name),
+								name: e.name,
+								sub: d(e.size),
+								onRemove: () => ne(t)
+							}, `f-${e.name}-${t}`)),
+							S.map((e, t) => /* @__PURE__ */ _(a, {
+								src: e,
+								name: c(e),
+								onRemove: () => re(t)
+							}, `u-${e}-${t}`)),
+							K && /* @__PURE__ */ v("button", {
+								type: "button",
+								className: "select-dropzone select-dropzone--tile",
+								onClick: $,
+								children: [/* @__PURE__ */ _(n, {}), /* @__PURE__ */ _("span", { children: "Adicionar" })]
+							})
+						]
+					}) : /* @__PURE__ */ v("button", {
+						type: "button",
+						className: "select-uploadzone__prompt",
+						onClick: $,
+						children: [/* @__PURE__ */ _(n, {}), /* @__PURE__ */ _("span", { children: O ?? `Arraste ou selecione um arquivo · até ${T} MB` })]
+					}),
+					q && /* @__PURE__ */ v("div", {
+						className: "select-uploadzone__url",
+						children: [
+							/* @__PURE__ */ _(t, {}),
+							/* @__PURE__ */ _("div", {
+								className: "select-uploadzone__urlfield",
+								children: /* @__PURE__ */ _(r, {
+									size: "sm",
+									value: z,
+									onChange: (e) => {
+										B(e), V && H(null);
+									},
+									onKeyDown: te,
+									type: "url",
+									inputMode: "url",
+									placeholder: k ?? "ou cole uma URL (https://…)",
+									error: V ?? void 0,
+									autoComplete: "off"
+								})
+							}),
+							/* @__PURE__ */ _(e, {
+								variant: "secondary",
+								size: "sm",
+								inline: !0,
+								onClick: Q,
+								disabled: !z.trim(),
+								children: "Adicionar"
+							})
+						]
+					}),
+					/* @__PURE__ */ _("input", {
+						ref: P,
+						type: "file",
+						accept: w,
+						multiple: !N,
+						hidden: !0,
+						onChange: (e) => {
+							Z(Array.from(e.target.files ?? [])), e.target.value = "";
+						}
+					})
+				]
+			}),
+			L > 0 && /* @__PURE__ */ v(i, {
+				tone: "warning",
+				children: [
+					L,
+					" arquivo(s) ignorado(s): tipo não permitido ou acima de ",
+					T,
+					" MB."
+				]
+			}),
+			A != null && /* @__PURE__ */ _("p", {
+				className: "select-field__hint",
+				children: A
+			})
+		]
+	});
+});
+//#endregion
+export { y as SelectImageUploadField };
+
+//# sourceMappingURL=SelectImageUploadField.js.map

package/dist/SelectImageUrlsField.js

@@ -0,0 +1,68 @@
+import { SelectField as e } from "./SelectField.js";
+import { SelectFileTile as t } from "./SelectFileTile.js";
+import { URL_RE as n, hostOf as r } from "./uploadUtils.js";
+import { SelectAddButton as i } from "./SelectAddButton.js";
+import { forwardRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/SelectImageUrlsField.tsx
+var u = a(function({ label: a, urls: u, onChange: d, maxUrls: f, placeholder: p, helpText: m, className: h, ...g }, _) {
+	let [v, y] = o(""), [b, x] = o(null), S = f != null && u.length >= f, C = () => {
+		let e = v.trim();
+		if (e) {
+			if (!n.test(e)) {
+				x("Insira uma URL válida (https://…).");
+				return;
+			}
+			if (u.includes(e)) {
+				x("Essa URL já foi adicionada.");
+				return;
+			}
+			d(f == null ? [...u, e] : [...u, e].slice(0, f)), y(""), x(null);
+		}
+	}, w = (e) => {
+		e.key === "Enter" && (e.preventDefault(), C());
+	}, T = (e) => d(u.filter((t, n) => n !== e));
+	return /* @__PURE__ */ l("div", {
+		ref: _,
+		...g,
+		className: `select-field${h ? " " + h : ""}`,
+		children: [
+			a && /* @__PURE__ */ c("span", {
+				className: "select-field__label",
+				children: a
+			}),
+			u.length > 0 && /* @__PURE__ */ c("div", {
+				className: "select-filetile-grid",
+				children: u.map((e, n) => /* @__PURE__ */ c(t, {
+					src: e,
+					name: r(e),
+					onRemove: () => T(n)
+				}, `${e}-${n}`))
+			}),
+			!S && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(e, {
+				size: "sm",
+				value: v,
+				onChange: (e) => {
+					y(e), b && x(null);
+				},
+				onKeyDown: w,
+				type: "url",
+				inputMode: "url",
+				placeholder: p ?? "https://…",
+				error: b ?? void 0,
+				autoComplete: "off"
+			}), /* @__PURE__ */ c(i, {
+				onClick: C,
+				children: "Adicionar URL"
+			})] }),
+			m != null && !b && /* @__PURE__ */ c("p", {
+				className: "select-field__hint",
+				children: m
+			})
+		]
+	});
+});
+//#endregion
+export { u as SelectImageUrlsField };
+
+//# sourceMappingURL=SelectImageUrlsField.js.map

package/dist/SelectImageZoomModal.js

@@ -0,0 +1,26 @@
+/* empty css           */
+import { detectSelectTheme as e } from "./detectSelectTheme.js";
+import { SelectModal as t } from "./SelectModal.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/SelectImageZoomModal.tsx
+function r({ open: r, onClose: i, src: a, alt: o, title: s }) {
+	return /* @__PURE__ */ n(t, {
+		open: r,
+		onClose: i,
+		title: s,
+		size: "lg",
+		theme: e(),
+		children: /* @__PURE__ */ n("div", {
+			className: "select-imagezoom",
+			children: /* @__PURE__ */ n("img", {
+				src: a,
+				alt: o ?? s ?? "",
+				className: "select-imagezoom__img"
+			})
+		})
+	});
+}
+//#endregion
+export { r as SelectImageZoomModal };
+
+//# sourceMappingURL=SelectImageZoomModal.js.map

package/dist/SelectInfoTip.js

@@ -0,0 +1,31 @@
+/* empty css           */
+import { InfoIcon as e } from "./icons.js";
+import { SelectTooltip as t } from "./SelectTooltip.js";
+import { useSelectMessages as n } from "./SelectLocale.js";
+import { forwardRef as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/SelectInfoTip.tsx
+var s = r(function({ content: r, title: s, label: c, placement: l = "top", className: u, ...d }, f) {
+	let p = n().common.moreInfo, m = c ?? p;
+	return /* @__PURE__ */ a(t, {
+		placement: l,
+		delay: 120,
+		openOnClick: !0,
+		content: s == null ? r : /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("span", {
+			className: "select-tip__title",
+			children: s
+		}), r] }),
+		children: /* @__PURE__ */ a("button", {
+			ref: f,
+			type: "button",
+			...d,
+			className: `select-infotip${u ? " " + u : ""}`,
+			"aria-label": m,
+			children: /* @__PURE__ */ a(e, {})
+		})
+	});
+});
+//#endregion
+export { s as SelectInfoTip };
+
+//# sourceMappingURL=SelectInfoTip.js.map