@ryuzaki13/react-foundation-ui 1.0.0 → 1.0.2

package/dist/image/index.js

@@ -1,32 +1,32 @@
-import { r as e } from "../chunks/Grid-ByIIytjh.js";
-import { t } from "../chunks/Button-BZ_b-Kin.js";
-import { a as n } from "../chunks/Input-Ce2HXBUc.js";
-import { t as r } from "../chunks/InputFiles-Or2Nvfgk.js";
-import { i, n as a, r as o } from "../chunks/modal-DqVcZws_.js";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { t as e } from "../chunks/Button-CCWuggdA.js";
+import { r as t } from "../chunks/Grid-ByIIytjh.js";
+import { a as n } from "../chunks/Input-BmjlpA09.js";
+import { i as r, n as i, r as a } from "../chunks/modal-B3HY3laL.js";
+import { t as o } from "../chunks/InputFiles-CrTJV27R.js";
+import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import h from "react-easy-crop";
 //#region src/image/ui/ImageCropper.tsx
 function g({ image: e, aspect: t = 1200 / 630, width: n, onCropComplete: r }) {
-	let [i, a] = m({
+	let [i, a] = d({
 		x: 0,
 		y: 0
-	}), [o, s] = m(1), l = u((e, t) => {
+	}), [o, c] = d(1), l = s((e, t) => {
 		r?.(t);
 	}, [r]);
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ p("div", {
 		style: {
 			position: "relative",
 			width: n ?? "100%",
 			aspectRatio: t
 		},
-		children: /* @__PURE__ */ c(h, {
+		children: /* @__PURE__ */ p(h, {
 			image: e,
 			crop: i,
 			zoom: o,
 			aspect: t,
 			onCropChange: a,
-			onZoomChange: s,
+			onZoomChange: c,
 			onCropComplete: l,
 			zoomSpeed: .1,
 			objectFit: "contain"
@@ -36,14 +36,14 @@ function g({ image: e, aspect: t = 1200 / 630, width: n, onCropComplete: r }) {
 //#endregion
 //#region src/image/ui/ImagePlaceholder.tsx
 function _({ width: e = "100%", height: t = "100%", aspectRatio: n = "16 / 9", className: r }) {
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ p("div", {
 		style: {
 			width: e,
 			height: t,
 			aspectRatio: n
 		},
 		className: r,
-		children: /* @__PURE__ */ c("svg", {
+		children: /* @__PURE__ */ p("svg", {
 			width: e,
 			height: t,
 			viewBox: "0 0 200 200",
@@ -54,31 +54,31 @@ function _({ width: e = "100%", height: t = "100%", aspectRatio: n = "16 / 9", c
 			ry: "10",
 			style: { display: "block" },
 			"aria-label": "Изображение недоступно",
-			children: /* @__PURE__ */ l("g", {
+			children: /* @__PURE__ */ m("g", {
 				fill: "var(--surface-0)",
 				children: [
-					/* @__PURE__ */ c("rect", {
+					/* @__PURE__ */ p("rect", {
 						x: "40",
 						y: "50",
 						width: "120",
 						height: "100",
 						rx: "10"
 					}),
-					/* @__PURE__ */ c("circle", {
+					/* @__PURE__ */ p("circle", {
 						cx: "60",
 						cy: "70",
 						r: "8",
 						fill: "var(--surface-2)"
 					}),
-					/* @__PURE__ */ c("path", {
+					/* @__PURE__ */ p("path", {
 						d: "M50 130 L75 100 L100 130 Z",
 						fill: "var(--surface-2)"
 					}),
-					/* @__PURE__ */ c("path", {
+					/* @__PURE__ */ p("path", {
 						d: "M90 130 L120 90 L150 130 Z",
 						fill: "var(--surface-2)"
 					}),
-					/* @__PURE__ */ c("line", {
+					/* @__PURE__ */ p("line", {
 						x1: "160",
 						y1: "40",
 						x2: "40",
@@ -87,7 +87,7 @@ function _({ width: e = "100%", height: t = "100%", aspectRatio: n = "16 / 9", c
 						strokeWidth: "15",
 						strokeLinecap: "round"
 					}),
-					/* @__PURE__ */ c("line", {
+					/* @__PURE__ */ p("line", {
 						x1: "160",
 						y1: "40",
 						x2: "40",
@@ -103,9 +103,9 @@ function _({ width: e = "100%", height: t = "100%", aspectRatio: n = "16 / 9", c
 }
 //#endregion
 //#region src/image/ui/ImageRenderer.tsx
-function v({ src: e, sources: t, alt: n, role: r, ariaLabel: i, caption: a, fallback: o, useFigure: u = !1, width: f = "100%", height: h = "100%", aspectRatio: g = "16 / 9", style: v, wrapperStyle: y, ...b }) {
-	let x = p(null), [S, C] = m(0), [w, T] = m(!1), [E, D] = m(!1), [O, k] = m(!1);
-	d(() => {
+function v({ src: e, sources: t, alt: n, role: r, ariaLabel: i, caption: a, fallback: o, useFigure: s = !1, width: l = "100%", height: h = "100%", aspectRatio: g = "16 / 9", style: v, wrapperStyle: y, ...b }) {
+	let x = u(null), [S, C] = d(0), [w, T] = d(!1), [E, D] = d(!1), [O, k] = d(!1);
+	c(() => {
 		let e = new IntersectionObserver(([t]) => {
 			if (t.isIntersecting) {
 				let n = Math.round(t.boundingClientRect.width);
@@ -117,17 +117,17 @@ function v({ src: e, sources: t, alt: n, role: r, ariaLabel: i, caption: a, fall
 		});
 		return x.current && e.observe(x.current), () => e.disconnect();
 	}, []);
-	let A = S ? `${S}px` : "100vw", j = /* @__PURE__ */ c(_, {
-		width: f,
+	let A = S ? `${S}px` : "100vw", j = /* @__PURE__ */ p(_, {
+		width: l,
 		height: h,
 		aspectRatio: g
-	}), M = /* @__PURE__ */ l(s, { children: [
+	}), M = /* @__PURE__ */ m(f, { children: [
 		!E && !O && (o || j),
-		w && !O && /* @__PURE__ */ l("picture", { children: [t?.map((e) => /* @__PURE__ */ c("source", {
+		w && !O && /* @__PURE__ */ m("picture", { children: [t?.map((e) => /* @__PURE__ */ p("source", {
 			srcSet: e.srcSet,
 			type: e.type,
 			sizes: e.sizes ?? A
-		}, `${e.type ?? "source"}-${e.srcSet}`)), /* @__PURE__ */ c("img", {
+		}, `${e.type ?? "source"}-${e.srcSet}`)), /* @__PURE__ */ p("img", {
 			src: e,
 			alt: n,
 			role: r,
@@ -146,19 +146,19 @@ function v({ src: e, sources: t, alt: n, role: r, ariaLabel: i, caption: a, fall
 			...b
 		})] }),
 		O && j
-	] }), N = /* @__PURE__ */ c("div", {
+	] }), N = /* @__PURE__ */ p("div", {
 		ref: x,
 		style: {
-			width: f,
+			width: l,
 			height: h,
 			aspectRatio: g,
 			...y
 		},
 		children: M
 	});
-	return u ? /* @__PURE__ */ l("figure", {
+	return s ? /* @__PURE__ */ m("figure", {
 		className: "relative",
-		children: [N, a && /* @__PURE__ */ c("figcaption", {
+		children: [N, a && /* @__PURE__ */ p("figcaption", {
 			style: {
 				bottom: 2,
 				right: 2,
@@ -175,11 +175,11 @@ function y(e, t) {
 	return `${e.file.meta.name}-${e.file.meta.size}-${e.file.meta.lastModified}-${t}`;
 }
 function b({ value: e, defaultValue: t, disabled: n, onChange: r, onApply: i }) {
-	let a = e !== void 0, [o, s] = m(e ?? t ?? []), [c, l] = m(e), [d, p] = m(0), [h, g] = m({});
-	a && e !== c && (l(e), s(e ?? []));
-	let _ = u((e) => {
-		s((t) => e(t));
-	}, []), v = f(() => o.map((e) => e.file), [o]), b = o.length === 0 ? 0 : Math.min(d, o.length - 1), x = o[b], S = x ? y(x, b) : void 0, C = S ? h[S] ?? {
+	let a = e !== void 0, [o, c] = d(e ?? t ?? []), [u, f] = d(e), [p, m] = d(0), [h, g] = d({});
+	a && e !== u && (f(e), c(e ?? []));
+	let _ = s((e) => {
+		c((t) => e(t));
+	}, []), v = l(() => o.map((e) => e.file), [o]), b = o.length === 0 ? 0 : Math.min(p, o.length - 1), x = o[b], S = x ? y(x, b) : void 0, C = S ? h[S] ?? {
 		crop: {
 			x: 0,
 			y: 0
@@ -191,7 +191,7 @@ function b({ value: e, defaultValue: t, disabled: n, onChange: r, onApply: i })
 			y: 0
 		},
 		zoom: 1
-	}, w = o.length > 0, T = !n && w && o.every((e) => e.alt.trim() && e.crop), E = u((e) => {
+	}, w = o.length > 0, T = !n && w && o.every((e) => e.alt.trim() && e.crop), E = s((e) => {
 		_((t) => e.map((e) => {
 			let n = t.find((t) => t.file.file === e.file);
 			return n ? {
@@ -202,17 +202,17 @@ function b({ value: e, defaultValue: t, disabled: n, onChange: r, onApply: i })
 				alt: ""
 			};
 		}));
-	}, [_]), D = u((e) => {
+	}, [_]), D = s((e) => {
 		_((t) => t.map((t, n) => n === b ? {
 			...t,
 			alt: e
 		} : t));
-	}, [b, _]), O = u((e) => {
+	}, [b, _]), O = s((e) => {
 		_((t) => t.map((t, n) => n === b ? {
 			...t,
 			crop: e
 		} : t));
-	}, [b, _]), k = u((e) => {
+	}, [b, _]), k = s((e) => {
 		S && g((t) => ({
 			...t,
 			[S]: {
@@ -220,7 +220,7 @@ function b({ value: e, defaultValue: t, disabled: n, onChange: r, onApply: i })
 				zoom: t[S]?.zoom ?? 1
 			}
 		}));
-	}, [S]), A = u((e) => {
+	}, [S]), A = s((e) => {
 		S && g((t) => ({
 			...t,
 			[S]: {
@@ -240,7 +240,7 @@ function b({ value: e, defaultValue: t, disabled: n, onChange: r, onApply: i })
 		activeCropperState: C,
 		hasSelected: w,
 		canApply: T,
-		apply: u(() => {
+		apply: s(() => {
 			r?.(o), i?.(o);
 		}, [
 			o,
@@ -248,7 +248,7 @@ function b({ value: e, defaultValue: t, disabled: n, onChange: r, onApply: i })
 			r
 		]),
 		setFiles: E,
-		setActiveIndex: p,
+		setActiveIndex: m,
 		setActiveAlt: D,
 		setActiveCrop: O,
 		setActiveCropperCrop: k,
@@ -275,12 +275,12 @@ function S(e, t, n) {
 		maxWidth: "none"
 	};
 }
-function C({ aspect: t = 16 / 9, disabled: i, state: a }) {
-	let o = a.activeImage?.crop, [s, u] = m({});
-	return /* @__PURE__ */ l(e, {
+function C({ aspect: e = 16 / 9, disabled: r, state: i }) {
+	let a = i.activeImage?.crop, [s, c] = d({});
+	return /* @__PURE__ */ m(t, {
 		gap: "md",
 		children: [
-			/* @__PURE__ */ c(r, {
+			/* @__PURE__ */ p(o, {
 				label: "Файл изображения",
 				allowedMime: [
 					"image/jpeg",
@@ -288,43 +288,43 @@ function C({ aspect: t = 16 / 9, disabled: i, state: a }) {
 					"image/webp",
 					"image/avif"
 				],
-				value: a.files,
-				onChange: a.setFiles,
+				value: i.files,
+				onChange: i.setFiles,
 				maxBytes: x(),
 				onReadError: (e) => console.log("e", e)
 			}),
-			a.hasSelected && a.activeImage && /* @__PURE__ */ l("div", { children: [
-				/* @__PURE__ */ c(e, {
+			i.hasSelected && i.activeImage && /* @__PURE__ */ m("div", { children: [
+				/* @__PURE__ */ p(t, {
 					templateColumns: "repeat(auto-fill, minmax(10em, 1fr))",
 					gap: "xs",
-					children: a.value.map((e, n) => {
-						let r = y(e, n);
-						return /* @__PURE__ */ c("button", {
+					children: i.value.map((t, n) => {
+						let a = y(t, n);
+						return /* @__PURE__ */ p("button", {
 							type: "button",
-							disabled: i,
-							onClick: () => a.setActiveIndex(n),
+							disabled: r,
+							onClick: () => i.setActiveIndex(n),
 							style: {
 								padding: 0,
-								border: n === a.activeIndex ? "2px solid var(--border-accent)" : "2px solid transparent",
+								border: n === i.activeIndex ? "2px solid var(--border-accent)" : "2px solid transparent",
 								background: "transparent",
-								cursor: i ? "default" : "pointer"
+								cursor: r ? "default" : "pointer"
 							},
-							children: /* @__PURE__ */ c("span", {
+							children: /* @__PURE__ */ p("span", {
 								style: {
 									position: "relative",
 									display: "block",
 									width: "100%",
-									aspectRatio: t,
+									aspectRatio: e,
 									overflow: "hidden"
 								},
-								children: /* @__PURE__ */ c("img", {
-									src: e.file.dataUrl,
-									style: S(e, s[r], t),
+								children: /* @__PURE__ */ p("img", {
+									src: t.file.dataUrl,
+									style: S(t, s[a], e),
 									onLoad: (e) => {
 										let t = e.currentTarget;
-										u((e) => ({
+										c((e) => ({
 											...e,
-											[r]: {
+											[a]: {
 												width: t.naturalWidth,
 												height: t.naturalHeight
 											}
@@ -332,60 +332,60 @@ function C({ aspect: t = 16 / 9, disabled: i, state: a }) {
 									}
 								})
 							})
-						}, r);
+						}, a);
 					})
 				}),
-				/* @__PURE__ */ l("div", { children: [
+				/* @__PURE__ */ m("div", { children: [
 					"Выберите область изображения",
 					" ",
-					o && (o.width < 1200 ? /* @__PURE__ */ l("code", {
+					a && (a.width < 1200 ? /* @__PURE__ */ m("code", {
 						className: "statusError",
 						children: [
-							o.width,
+							a.width,
 							"x",
-							o.height,
+							a.height,
 							" - низкое качество изображения!"
 						]
-					}) : /* @__PURE__ */ l("code", {
+					}) : /* @__PURE__ */ m("code", {
 						className: "statusSuccess",
 						children: [
-							o.width,
+							a.width,
 							"x",
-							o.height
+							a.height
 						]
 					}))
 				] }),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ p("div", {
 					style: {
 						position: "relative",
 						width: "100%",
-						aspectRatio: t
+						aspectRatio: e
 					},
-					children: /* @__PURE__ */ c(h, {
-						image: a.activeImage.file.dataUrl,
-						crop: a.activeCropperState.crop,
-						zoom: a.activeCropperState.zoom,
-						aspect: t,
-						onCropChange: a.setActiveCropperCrop,
-						onZoomChange: a.setActiveCropperZoom,
-						onCropComplete: (e, t) => a.setActiveCrop(t),
+					children: /* @__PURE__ */ p(h, {
+						image: i.activeImage.file.dataUrl,
+						crop: i.activeCropperState.crop,
+						zoom: i.activeCropperState.zoom,
+						aspect: e,
+						onCropChange: i.setActiveCropperCrop,
+						onZoomChange: i.setActiveCropperZoom,
+						onCropComplete: (e, t) => i.setActiveCrop(t),
 						zoomSpeed: .1,
 						objectFit: "contain"
-					}, y(a.activeImage, a.activeIndex))
+					}, y(i.activeImage, i.activeIndex))
 				})
 			] }),
-			/* @__PURE__ */ c(n, {
+			/* @__PURE__ */ p(n, {
 				required: !0,
-				disabled: !a.hasSelected || i,
+				disabled: !i.hasSelected || r,
 				label: "Краткое описание изображения",
 				placeholder: "",
-				value: a.activeImage?.alt ?? "",
-				onChange: a.setActiveAlt
+				value: i.activeImage?.alt ?? "",
+				onChange: i.setActiveAlt
 			})
 		]
 	});
 }
-function w({ aspect: e = 16 / 9, disabled: n, renderActions: r, ...i }) {
+function w({ aspect: t = 16 / 9, disabled: n, renderActions: r, ...i }) {
 	let a = b({
 		...i,
 		disabled: n
@@ -395,52 +395,52 @@ function w({ aspect: e = 16 / 9, disabled: n, renderActions: r, ...i }) {
 		hasSelected: a.hasSelected,
 		canApply: a.canApply,
 		apply: a.apply
-	}, u = i.onChange !== void 0 || i.onApply !== void 0;
-	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(C, {
-		aspect: e,
+	}, s = i.onChange !== void 0 || i.onApply !== void 0;
+	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(C, {
+		aspect: t,
 		disabled: n,
 		state: a
-	}), r ? r(o) : u && /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(t, {
+	}), r ? r(o) : s && /* @__PURE__ */ p("div", { children: /* @__PURE__ */ p(e, {
 		disabled: !a.canApply,
 		tone: "success",
 		onClick: a.apply,
 		children: "Применить"
 	}) })] });
 }
-function T({ aspect: e = 16 / 9, disabled: n, isOpen: r = !0, onClose: s = () => {}, title: u = "Загрузка нового изображения", ...d }) {
-	let f = b({
-		...d,
+function T({ aspect: t = 16 / 9, disabled: n, isOpen: o = !0, onClose: s = () => {}, title: c = "Загрузка нового изображения", ...l }) {
+	let u = b({
+		...l,
 		disabled: n
 	});
-	return d.onChange !== void 0 || d.onApply !== void 0 ? /* @__PURE__ */ l(a, {
-		isOpen: r,
+	return l.onChange !== void 0 || l.onApply !== void 0 ? /* @__PURE__ */ m(i, {
+		isOpen: o,
 		onClose: s,
-		title: u,
+		title: c,
 		size: "xl",
-		children: [/* @__PURE__ */ c(o, {
+		children: [/* @__PURE__ */ p(a, {
 			scrollable: !0,
-			children: /* @__PURE__ */ c(C, {
-				aspect: e,
+			children: /* @__PURE__ */ p(C, {
+				aspect: t,
 				disabled: n,
-				state: f
+				state: u
 			})
-		}), /* @__PURE__ */ c(i, { children: /* @__PURE__ */ c(t, {
-			disabled: !f.canApply,
+		}), /* @__PURE__ */ p(r, { children: /* @__PURE__ */ p(e, {
+			disabled: !u.canApply,
 			tone: "success",
-			onClick: f.apply,
+			onClick: u.apply,
 			children: "Применить"
 		}) })]
-	}) : /* @__PURE__ */ c(a, {
-		isOpen: r,
+	}) : /* @__PURE__ */ p(i, {
+		isOpen: o,
 		onClose: s,
-		title: u,
+		title: c,
 		size: "xl",
-		children: /* @__PURE__ */ c(o, {
+		children: /* @__PURE__ */ p(a, {
 			scrollable: !0,
-			children: /* @__PURE__ */ c(C, {
-				aspect: e,
+			children: /* @__PURE__ */ p(C, {
+				aspect: t,
 				disabled: n,
-				state: f
+				state: u
 			})
 		})
 	});
@@ -473,25 +473,25 @@ function j({ basePath: e, formats: t, variantWidths: n, hasSet: r }) {
 		type: O(t)
 	}));
 }
-function M({ image: e, src: t, path: n, alt: r, formats: i = D, fallbackFormat: a, variantWidths: o = E, hasSet: s, aspectRatio: l, ...u }) {
-	let d = e?.filename ?? t;
-	if (!d) return /* @__PURE__ */ c(v, {
+function M({ image: e, src: t, path: n, alt: r, formats: i = D, fallbackFormat: a, variantWidths: o = E, hasSet: s, aspectRatio: c, ...l }) {
+	let u = e?.filename ?? t;
+	if (!u) return /* @__PURE__ */ p(v, {
 		src: "",
 		alt: r ?? e?.alt,
-		...u
+		...l
 	});
-	let f = e?.path ?? n, p = s ?? e?.hasSet ?? !0, m = i.length > 0 ? i : D, h = a ?? m[m.length - 1] ?? "webp", g = A(f, d), _ = l ?? (e?.width && e.height ? `${e.width} / ${e.height}` : void 0), y = j({
+	let d = e?.path ?? n, f = s ?? e?.hasSet ?? !0, m = i.length > 0 ? i : D, h = a ?? m[m.length - 1] ?? "webp", g = A(d, u), _ = c ?? (e?.width && e.height ? `${e.width} / ${e.height}` : void 0), y = j({
 		basePath: g,
 		formats: m,
 		variantWidths: o,
-		hasSet: p
+		hasSet: f
 	});
-	return /* @__PURE__ */ c(v, {
+	return /* @__PURE__ */ p(v, {
 		src: `${g}.${h}`,
 		sources: y,
 		alt: r ?? e?.alt,
 		aspectRatio: _,
-		...u
+		...l
 	});
 }
 //#endregion