haze-ui 1.32.0 → 1.34.0

package/dist/components/Image/ImagePreview.js

@@ -1,241 +1,338 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useStrings as t } from "../LocaleProvider/useStrings.js";
-import { whenExitSettles as n } from "../../utils/presence.js";
-import { useFocusScope as r } from "../../utils/focus-scope.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { whenExitSettles as r } from "../../utils/presence.js";
+import { useFocusScope as ee } from "../../utils/focus-scope.js";
 /* empty css                       */
-import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useControl as d } from "react-use-control";
+import { c as i } from "react/compiler-runtime";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useControl as f } from "react-use-control";
 //#region src/lib/components/Image/ImagePreview.tsx
-var f = .25, p = 4, m = .25, h = 90, g = (e) => Math.min(p, Math.max(f, e)), _ = "haze-ImagePreview__overlay", v = "haze-ImagePreview__previewImg", y = "haze-ImagePreview__imgPannable", b = "haze-ImagePreview__imgPanning", x = "haze-ImagePreview__imgAnimated", S = "haze-ImagePreview__toolbar", C = "haze-ImagePreview__toolButton", w = () => /* @__PURE__ */ u("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: [
-		/* @__PURE__ */ l("circle", {
-			cx: "11",
-			cy: "11",
-			r: "7"
-		}),
-		/* @__PURE__ */ l("line", {
-			x1: "16.5",
-			y1: "16.5",
-			x2: "21",
-			y2: "21"
-		}),
-		/* @__PURE__ */ l("line", {
-			x1: "8",
-			y1: "11",
-			x2: "14",
-			y2: "11"
-		}),
-		/* @__PURE__ */ l("line", {
-			x1: "11",
-			y1: "8",
-			x2: "11",
-			y2: "14"
-		})
-	]
-}), T = () => /* @__PURE__ */ u("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: [
-		/* @__PURE__ */ l("circle", {
-			cx: "11",
-			cy: "11",
-			r: "7"
-		}),
-		/* @__PURE__ */ l("line", {
-			x1: "16.5",
-			y1: "16.5",
-			x2: "21",
-			y2: "21"
-		}),
-		/* @__PURE__ */ l("line", {
-			x1: "8",
-			y1: "11",
-			x2: "14",
-			y2: "11"
-		})
-	]
-}), E = () => /* @__PURE__ */ u("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: [/* @__PURE__ */ l("path", { d: "M20.5 12a8.5 8.5 0 1 1-2.6-6.1" }), /* @__PURE__ */ l("polyline", { points: "21 3 21 9 15 9" })]
-}), D = () => /* @__PURE__ */ u("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: [/* @__PURE__ */ l("line", {
-		x1: "5",
-		y1: "5",
-		x2: "19",
-		y2: "19"
-	}), /* @__PURE__ */ l("line", {
-		x1: "19",
-		y1: "5",
-		x2: "5",
-		y2: "19"
-	})]
-});
-function O({ src: O, alt: k, open: A, zoom: j = !0, rotate: M = !0 }) {
-	let [N, P] = d(A, !1), F = t("image"), [I, L] = s(1), [R, z] = s(0), [B, V] = s({
+var p = .25, m = 4, h = .25, g = 90, _ = (e) => Math.min(m, Math.max(p, e)), v = "haze-ImagePreview__overlay", te = "haze-ImagePreview__previewImg", ne = "haze-ImagePreview__imgPannable", re = "haze-ImagePreview__imgPanning", ie = "haze-ImagePreview__imgAnimated", ae = "haze-ImagePreview__toolbar", y = "haze-ImagePreview__toolButton", b = "haze-ImagePreview__navButton", oe = "haze-ImagePreview__navPrev", se = "haze-ImagePreview__navNext", ce = "haze-ImagePreview__counter", le = "haze-ImagePreview__thumbnailStrip", x = "haze-ImagePreview__thumbnailButton", ue = "haze-ImagePreview__thumbnailActive", de = "haze-ImagePreview__thumbnailImg", fe = () => {
+	let e = i(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ d("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ u("circle", {
+				cx: "11",
+				cy: "11",
+				r: "7"
+			}),
+			/* @__PURE__ */ u("line", {
+				x1: "16.5",
+				y1: "16.5",
+				x2: "21",
+				y2: "21"
+			}),
+			/* @__PURE__ */ u("line", {
+				x1: "8",
+				y1: "11",
+				x2: "14",
+				y2: "11"
+			}),
+			/* @__PURE__ */ u("line", {
+				x1: "11",
+				y1: "8",
+				x2: "11",
+				y2: "14"
+			})
+		]
+	}), e[0] = t) : t = e[0], t;
+}, S = () => {
+	let e = i(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ d("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ u("circle", {
+				cx: "11",
+				cy: "11",
+				r: "7"
+			}),
+			/* @__PURE__ */ u("line", {
+				x1: "16.5",
+				y1: "16.5",
+				x2: "21",
+				y2: "21"
+			}),
+			/* @__PURE__ */ u("line", {
+				x1: "8",
+				y1: "11",
+				x2: "14",
+				y2: "11"
+			})
+		]
+	}), e[0] = t) : t = e[0], t;
+}, C = () => {
+	let e = i(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ d("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ u("path", { d: "M20.5 12a8.5 8.5 0 1 1-2.6-6.1" }), /* @__PURE__ */ u("polyline", { points: "21 3 21 9 15 9" })]
+	}), e[0] = t) : t = e[0], t;
+}, pe = () => {
+	let e = i(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ d("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ u("line", {
+			x1: "5",
+			y1: "5",
+			x2: "19",
+			y2: "19"
+		}), /* @__PURE__ */ u("line", {
+			x1: "19",
+			y1: "5",
+			x2: "5",
+			y2: "19"
+		})]
+	}), e[0] = t) : t = e[0], t;
+}, me = () => {
+	let e = i(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ u("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: u("polyline", { points: "15 18 9 12 15 6" })
+	}), e[0] = t) : t = e[0], t;
+}, he = () => {
+	let e = i(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ u("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: u("polyline", { points: "9 18 15 12 9 6" })
+	}), e[0] = t) : t = e[0], t;
+};
+function w({ src: i, alt: w, open: ge, zoom: T = !0, rotate: _e = !0, images: E, index: D, showThumbnails: O = !0 }) {
+	let [k, A] = f(ge, !1), [j, M] = f(D, 0), N = n("image"), [P, F] = c(1), [I, L] = c(0), [R, z] = c({
 		x: 0,
 		y: 0
-	}), [H, U] = s(!1), W = o(null), G = o(null), K = o(null), q = r({
-		enabled: N,
+	}), [B, V] = c(!1), H = E !== void 0 && E.length > 0 ? E : null, U = H?.length ?? 1, W = U > 1, G = Math.min(Math.max(j, 0), U - 1), K = H?.[G] ?? {
+		src: i,
+		alt: w
+	}, q = s(null), J = s(null), Y = s(null), X = ee({
+		enabled: k,
 		trapped: !1
-	}), J = i((e) => {
-		W.current = e, q(e);
-	}, [q]);
-	a(() => {
-		let e = W.current;
+	}), ve = a((e) => {
+		q.current = e, X(e);
+	}, [X]);
+	o(() => {
+		let e = q.current;
 		if (e) {
-			if (N && !e.open) e.showModal(), G.current?.focus();
-			else if (!N && e.open) {
-				let t = n(e), r = () => {
+			if (k && !e.open) e.showModal(), J.current?.focus();
+			else if (!k && e.open) {
+				let t = r(e), n = () => {
 					e.getAttribute("data-state") === "closed" && e.close();
 				};
-				t ? t.then(r) : r();
+				t ? t.then(n) : n();
 			}
 		}
-	}, [N]), a(() => {
-		if (!N || !j) return;
-		let e = W.current;
+	}, [k]), o(() => {
+		if (!k || !T) return;
+		let e = q.current;
 		if (!e) return;
 		let t = (e) => {
-			e.preventDefault(), L((t) => g(t - Math.sign(e.deltaY) * m));
+			e.preventDefault(), F((t) => _(t - Math.sign(e.deltaY) * h));
 		};
 		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
-	}, [N, j]);
-	let Y = (e) => {
-		e.target === W.current && P(!1);
-	}, X = (e) => {
-		j && e.button === 0 && (typeof e.currentTarget.setPointerCapture == "function" && e.currentTarget.setPointerCapture(e.pointerId), K.current = {
+	}, [k, T]);
+	let ye = (e) => {
+		e.target === q.current && A(!1);
+	}, be = (e) => {
+		T && e.button === 0 && (typeof e.currentTarget.setPointerCapture == "function" && e.currentTarget.setPointerCapture(e.pointerId), Y.current = {
 			pointerId: e.pointerId,
 			startX: e.clientX,
 			startY: e.clientY,
-			originX: B.x,
-			originY: B.y
-		}, U(!0));
-	}, Z = (e) => {
-		let t = K.current;
-		t?.pointerId === e.pointerId && V({
+			originX: R.x,
+			originY: R.y
+		}, V(!0));
+	}, xe = (e) => {
+		let t = Y.current;
+		t?.pointerId === e.pointerId && z({
 			x: t.originX + e.clientX - t.startX,
 			y: t.originY + e.clientY - t.startY
 		});
-	}, Q = (e) => {
-		K.current?.pointerId === e.pointerId && (K.current = null, U(!1));
+	}, Z = (e) => {
+		Y.current?.pointerId === e.pointerId && (Y.current = null, V(!1));
+	}, Q = () => {
+		F(1), L(0), z({
+			x: 0,
+			y: 0
+		});
+	}, $ = (e) => {
+		M((e % U + U) % U), Q();
 	};
-	return /* @__PURE__ */ u("dialog", {
+	return /* @__PURE__ */ d("dialog", {
 		"data-slot": "image-preview",
-		ref: J,
-		"aria-label": k,
-		"data-state": N ? "open" : "closed",
-		className: _,
+		ref: ve,
+		"aria-label": K.alt,
+		"data-state": k ? "open" : "closed",
+		className: v,
 		onCancel: (e) => {
-			e.preventDefault(), P(!1);
+			e.preventDefault(), A(!1);
 		},
 		onClose: () => {
-			P(!1), L(1), z(0), V({
+			A(!1), F(1), L(0), z({
 				x: 0,
 				y: 0
 			});
 		},
-		onClick: Y,
-		children: [/* @__PURE__ */ l("img", {
-			"data-slot": "img",
-			src: O,
-			alt: k,
-			draggable: !1,
-			style: { transform: `translate(${B.x}px, ${B.y}px) scale(${I}) rotate(${R}deg)` },
-			onPointerDown: X,
-			onPointerMove: Z,
-			onPointerUp: Q,
-			onPointerCancel: Q,
-			className: e([
-				v,
-				j && (H ? b : y),
-				!H && x
-			])
-		}), /* @__PURE__ */ u("div", {
-			"data-slot": "toolbar",
-			className: S,
-			children: [
-				j && /* @__PURE__ */ u(c, { children: [
-					/* @__PURE__ */ l("button", {
-						"data-slot": "zoom-in-button",
+		onClick: ye,
+		onKeyDown: (e) => {
+			W && (e.key === "ArrowLeft" ? (e.preventDefault(), $(G - 1)) : e.key === "ArrowRight" && (e.preventDefault(), $(G + 1)));
+		},
+		children: [
+			/* @__PURE__ */ u("img", {
+				"data-slot": "img",
+				src: K.src,
+				alt: K.alt,
+				draggable: !1,
+				style: { transform: `translate(${R.x}px, ${R.y}px) scale(${P}) rotate(${I}deg)` },
+				onPointerDown: be,
+				onPointerMove: xe,
+				onPointerUp: Z,
+				onPointerCancel: Z,
+				className: e([
+					te,
+					T && (B ? re : ne),
+					!B && ie
+				])
+			}),
+			W && /* @__PURE__ */ u("button", {
+				"data-slot": "prev-button",
+				type: "button",
+				"aria-label": N.prevImage,
+				onClick: () => $(G - 1),
+				className: e([b, oe]),
+				children: /* @__PURE__ */ u(me, {})
+			}),
+			W && /* @__PURE__ */ u("button", {
+				"data-slot": "next-button",
+				type: "button",
+				"aria-label": N.nextImage,
+				onClick: () => $(G + 1),
+				className: e([b, se]),
+				children: /* @__PURE__ */ u(he, {})
+			}),
+			/* @__PURE__ */ d("div", {
+				"data-slot": "toolbar",
+				className: ae,
+				children: [
+					T && /* @__PURE__ */ d(l, { children: [
+						/* @__PURE__ */ u("button", {
+							"data-slot": "zoom-in-button",
+							type: "button",
+							className: y,
+							"aria-label": N.zoomIn,
+							disabled: P >= m,
+							onClick: () => F(_(P + h)),
+							children: /* @__PURE__ */ u(fe, {})
+						}),
+						/* @__PURE__ */ u("button", {
+							"data-slot": "zoom-out-button",
+							type: "button",
+							className: y,
+							"aria-label": N.zoomOut,
+							disabled: P <= p,
+							onClick: () => F(_(P - h)),
+							children: /* @__PURE__ */ u(S, {})
+						}),
+						/* @__PURE__ */ u("button", {
+							"data-slot": "reset-button",
+							type: "button",
+							className: y,
+							"aria-label": N.reset,
+							onClick: Q,
+							children: "1:1"
+						})
+					] }),
+					_e && /* @__PURE__ */ u("button", {
+						"data-slot": "rotate-button",
 						type: "button",
-						className: C,
-						"aria-label": F.zoomIn,
-						disabled: I >= p,
-						onClick: () => L(g(I + m)),
-						children: /* @__PURE__ */ l(w, {})
+						className: y,
+						"aria-label": N.rotate,
+						onClick: () => L((e) => (e + g) % 360),
+						children: /* @__PURE__ */ u(C, {})
 					}),
-					/* @__PURE__ */ l("button", {
-						"data-slot": "zoom-out-button",
-						type: "button",
-						className: C,
-						"aria-label": F.zoomOut,
-						disabled: I <= f,
-						onClick: () => L(g(I - m)),
-						children: /* @__PURE__ */ l(T, {})
+					W && /* @__PURE__ */ u("span", {
+						"data-slot": "counter",
+						className: ce,
+						children: t(N.counter, {
+							current: G + 1,
+							total: U
+						})
 					}),
-					/* @__PURE__ */ l("button", {
-						"data-slot": "reset-button",
+					/* @__PURE__ */ u("button", {
+						ref: J,
+						"data-slot": "close",
 						type: "button",
-						className: C,
-						"aria-label": F.reset,
-						onClick: () => {
-							L(1), z(0), V({
-								x: 0,
-								y: 0
-							});
-						},
-						children: "1:1"
+						className: y,
+						"aria-label": N.close,
+						onClick: () => A(!1),
+						children: /* @__PURE__ */ u(pe, {})
 					})
-				] }),
-				M && /* @__PURE__ */ l("button", {
-					"data-slot": "rotate-button",
-					type: "button",
-					className: C,
-					"aria-label": F.rotate,
-					onClick: () => z((e) => (e + h) % 360),
-					children: /* @__PURE__ */ l(E, {})
-				}),
-				/* @__PURE__ */ l("button", {
-					ref: G,
-					"data-slot": "close",
+				]
+			}),
+			H !== null && U > 1 && O && /* @__PURE__ */ u("div", {
+				"data-slot": "thumbnails",
+				className: le,
+				children: H.map((n, r) => /* @__PURE__ */ u("button", {
+					"data-slot": "thumbnail",
 					type: "button",
-					className: C,
-					"aria-label": F.close,
-					onClick: () => P(!1),
-					children: /* @__PURE__ */ l(D, {})
-				})
-			]
-		})]
+					"aria-label": t(N.thumbnail, {
+						index: r + 1,
+						total: U,
+						alt: n.alt
+					}),
+					"aria-current": r === G ? "true" : void 0,
+					onClick: () => $(r),
+					className: e([x, r === G && ue]),
+					children: /* @__PURE__ */ u("img", {
+						src: n.src,
+						alt: "",
+						className: de,
+						draggable: !1
+					})
+				}, `${n.src}-${r}`))
+			})
+		]
 	});
 }
 //#endregion
-export { O as default };
+export { w as default };

package/dist/components/Image/ImagePreviewGroup.js

@@ -0,0 +1,46 @@
+"use client";
+import e from "./ImagePreview.js";
+import { ImageGalleryProvider as t } from "./ImageGalleryContext.js";
+import { useCallback as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useControl as c } from "react-use-control";
+//#region src/lib/components/Image/ImagePreviewGroup.tsx
+function l({ children: l, index: u, preview: d = !0, showThumbnails: f = !0 }) {
+	let p = d !== !1, m = typeof d == "object" ? d : {}, h = p && m.zoom !== !1, g = p && m.rotate !== !1, [_, v] = a([]), y = i([]), b = i(0), [, x, S] = c(void 0, !1), [, C, w] = c(u, 0), T = n((e) => {
+		let t = ++b.current;
+		return y.current = [...y.current, {
+			...e,
+			id: t
+		}], v(y.current), t;
+	}, []), E = n((e) => {
+		y.current = y.current.filter((t) => t.id !== e), v(y.current);
+	}, []), D = n((e) => {
+		let t = y.current.findIndex((t) => t.id === e);
+		t < 0 || (C(t), x(!0));
+	}, [C, x]), O = r(() => ({
+		enabled: p,
+		register: T,
+		unregister: E,
+		activate: D
+	}), [
+		p,
+		T,
+		E,
+		D
+	]), [k] = _;
+	return /* @__PURE__ */ s(t, {
+		value: O,
+		children: [l, p && k !== void 0 && /* @__PURE__ */ o(e, {
+			src: k.src,
+			alt: k.alt,
+			open: S,
+			zoom: h,
+			rotate: g,
+			images: _,
+			index: w,
+			showThumbnails: f
+		})]
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/Image/index.js

@@ -1,3 +1,4 @@
 "use client";
 import e from "./Image.js";
-export { e as Image };
+import t from "./ImagePreviewGroup.js";
+export { e as Image, t as ImagePreviewGroup };