haze-ui 1.32.0 → 1.34.0

package/dist/components/Heatmap/Heatmap.js

@@ -0,0 +1,124 @@
+import { classnames as e } from "../../utils/classnames.js";
+import { heatmapBase as t, heatmapCell as n, heatmapMonth as r, heatmapWeekday as i } from "./heatmap-styles.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/lib/components/Heatmap/Heatmap.tsx
+var s = 864e5, c = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+], l = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+function u(e) {
+	return Date.parse(`${e}T00:00:00Z`);
+}
+function d(e) {
+	return new Date(e).toISOString().slice(0, 10);
+}
+function f(e) {
+	let t = /* @__PURE__ */ new Map();
+	if (Array.isArray(e)) for (let n of e) t.set(n.date, n.value);
+	else if (e) for (let [n, r] of Object.entries(e)) t.set(n, r);
+	return t;
+}
+function p({ data: p, levels: m = 4, startDate: h, endDate: g, getLabel: _, getMonthLabel: v, getWeekdayLabel: y, summary: b = "Activity heatmap", classNames: x, className: S, style: C, ref: w, ...T }) {
+	let E = Math.max(1, Math.floor(m)), D = f(p), O = Infinity, k = -Infinity;
+	for (let e of D.keys()) {
+		let t = u(e);
+		Number.isNaN(t) || (O = Math.min(O, t), k = Math.max(k, t));
+	}
+	let A = Number.isFinite(k), j = g === void 0 ? NaN : u(g), M = h === void 0 ? NaN : u(h), N = Number.isNaN(j) ? A ? k : NaN : j, P = Number.isNaN(M) ? A ? O : N : M, F = !Number.isNaN(P) && !Number.isNaN(N), I = F ? P - new Date(P).getUTCDay() * s : 0, L = F ? N + (6 - new Date(N).getUTCDay()) * s : 0, R = F && I <= L ? Math.floor((L - I) / s / 7) + 1 : 0, z = 0;
+	for (let e of D.values()) e > z && (z = e);
+	let B = [];
+	for (let e = 0; e < R; e += 1) for (let t = 0; t < 7; t += 1) {
+		let n = d(I + (e * 7 + t) * s), r = D.get(n) ?? 0, i = r <= 0 || z <= 0 ? 0 : Math.min(E, Math.max(1, Math.ceil(r / z * E))), a = _ ? _({
+			date: n,
+			value: r
+		}) : `${r === 0 ? "No activity" : `${r} ${r === 1 ? "activity" : "activities"}`} on ${n}`;
+		B.push({
+			date: n,
+			level: i,
+			mix: Math.round(i / E * 100),
+			label: a,
+			week: e,
+			weekday: t
+		});
+	}
+	let V = [];
+	for (let e = 0; e < R; e += 1) {
+		let t = new Date(I + (e * 7 + 6) * s), n = t.getUTCMonth(), r = t.getUTCFullYear(), i = `${r}-${n}`, a = V[V.length - 1];
+		a?.key === i ? a.span += 1 : V.push({
+			key: i,
+			label: v?.(n, r) ?? c[n] ?? "",
+			start: e,
+			span: 1
+		});
+	}
+	let H = l.map((e, t) => y?.(t) ?? e);
+	return /* @__PURE__ */ o("div", {
+		ref: w,
+		role: "img",
+		"aria-label": b,
+		"data-slot": "heatmap",
+		style: {
+			gridTemplateColumns: `auto repeat(${R}, var(--haze-space-4))`,
+			...C
+		},
+		...T,
+		className: e([
+			t,
+			S,
+			x?.root
+		]),
+		children: [
+			V.map((t) => /* @__PURE__ */ a("span", {
+				"data-slot": "month",
+				style: { gridColumn: `${t.start + 2} / span ${t.span}` },
+				className: e([r, x?.month]),
+				children: t.label
+			}, t.key)),
+			H.map((t, n) => /* @__PURE__ */ a("span", {
+				"data-slot": "weekday",
+				style: {
+					gridRow: n + 2,
+					gridColumn: 1
+				},
+				className: e([i, x?.weekday]),
+				children: t
+			}, n)),
+			B.map((t) => /* @__PURE__ */ a("div", {
+				"data-slot": "cell",
+				"data-level": t.level,
+				"data-date": t.date,
+				title: t.label,
+				style: {
+					gridRow: t.weekday + 2,
+					gridColumn: t.week + 2,
+					"--haze-heatmap-mix": `${t.mix}%`
+				},
+				className: e([
+					n,
+					t.level === 0 && "haze-heatmap-styles__heatmapCellEmpty",
+					x?.cell
+				])
+			}, t.date))
+		]
+	});
+}
+//#endregion
+export { p as default };

package/dist/components/Heatmap/heatmap-styles.js

@@ -0,0 +1,6 @@
+
+/* empty css                         */
+//#region src/lib/components/Heatmap/heatmap-styles.ts
+var e = "haze-heatmap-styles__heatmapBase", t = "haze-heatmap-styles__heatmapMonth", n = "haze-heatmap-styles__heatmapWeekday", r = "haze-heatmap-styles__heatmapCell", i = "haze-heatmap-styles__heatmapCellEmpty";
+//#endregion
+export { e as heatmapBase, r as heatmapCell, i as heatmapCellEmpty, t as heatmapMonth, n as heatmapWeekday };

package/dist/components/Heatmap/index.js

@@ -0,0 +1,2 @@
+import e from "./Heatmap.js";
+export { e as Heatmap };

package/dist/components/HoverCard/HoverCard.js

@@ -2,56 +2,76 @@
 "use client";
 import { useConfigDefaults as e } from "../ConfigProvider/useConfigDefaults.js";
 import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
+import { getTabbables as r } from "../../utils/focus.js";
 /* empty css                    */
-import { useEffect as r, useId as i, useMemo as a, useRef as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useControl as l } from "react-use-control";
+import { useEffect as i, useId as a, useMemo as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useControl as u } from "react-use-control";
 //#region src/lib/components/HoverCard/HoverCard.tsx
-var u = "haze-HoverCard__container", d = "haze-HoverCard__panelVisuals";
-function f({ content: f, openDelay: p, closeDelay: m, placement: h = "bottom-span", open: g, collisionPadding: _, className: v, children: y }) {
-	let b = e("HoverCard"), x = p ?? b.openDelay ?? 200, S = m ?? b.closeDelay ?? 120, [C, w] = l(g, !1), T = i(), E = o(null), D = o(null), O = a(() => _ === void 0 ? void 0 : { collisionPadding: _ }, [_]), k = n({
-		open: C,
-		setOpen: w,
-		triggerRef: E,
-		panelRef: D,
+var d = "haze-HoverCard__container", f = "haze-HoverCard__panelVisuals", p = 200, m = 120, h = 300;
+function g({ content: g, openDelay: _, closeDelay: v, interactive: y = !1, placement: b = "bottom-span", open: x, collisionPadding: S, className: C, children: w }) {
+	let T = e("HoverCard"), E = _ ?? T.openDelay ?? p, D = v ?? T.closeDelay ?? (y ? h : m), [O, k] = u(x, !1), A = a(), j = s(null), M = s(null), N = o(() => S === void 0 ? void 0 : { collisionPadding: S }, [S]), P = n({
+		open: O,
+		setOpen: k,
+		triggerRef: j,
+		panelRef: M,
 		animated: !0,
-		collision: O
-	}), A = o(0), j = o(0);
-	r(() => () => {
-		window.clearTimeout(A.current), window.clearTimeout(j.current);
+		collision: N
+	}), F = s(0), I = s(0);
+	i(() => () => {
+		window.clearTimeout(F.current), window.clearTimeout(I.current);
 	}, []);
-	let M = () => {
-		window.clearTimeout(A.current), window.clearTimeout(j.current);
-	}, N = () => {
-		M(), !C && (A.current = window.setTimeout(() => w(!0), x));
-	}, P = () => {
-		M(), C && (j.current = window.setTimeout(() => w(!1), S));
-	};
-	return /* @__PURE__ */ c("span", {
+	let L = () => {
+		window.clearTimeout(F.current), window.clearTimeout(I.current);
+	}, R = () => {
+		L(), !O && (F.current = window.setTimeout(() => k(!0), E));
+	}, z = () => {
+		L(), O && (I.current = window.setTimeout(() => k(!1), D));
+	}, B = () => {
+		y && M.current !== null && document.activeElement instanceof Node && M.current.contains(document.activeElement) || z();
+	}, V = (e) => {
+		let t = e.relatedTarget;
+		if (t instanceof Node && e.currentTarget.contains(t)) {
+			L();
+			return;
+		}
+		z();
+	}, H = s(!1);
+	return i(() => {
+		let e = H.current;
+		if (H.current = O, !y || !e || O) return;
+		let t = M.current, n = document.activeElement;
+		if (!t || !(n instanceof Node) || !t.contains(n)) return;
+		let i = j.current;
+		if (!i) return;
+		let a = r(i)[0] ?? i;
+		a === i && i.getAttribute("tabindex") === null && (i.tabIndex = -1), a.focus();
+	}, [O, y]), /* @__PURE__ */ l("span", {
 		"data-slot": "hover-card",
-		className: u,
-		children: [/* @__PURE__ */ s("span", {
-			ref: E,
+		className: d,
+		onBlur: y ? V : void 0,
+		children: [/* @__PURE__ */ c("span", {
+			ref: j,
 			"data-slot": "trigger",
-			style: k.triggerStyle,
-			"aria-describedby": T,
-			onMouseEnter: N,
-			onMouseLeave: P,
-			onFocus: N,
-			onBlur: P,
-			children: y
-		}), /* @__PURE__ */ s(t, {
-			ref: D,
-			behavior: k,
-			placement: h,
-			id: T,
-			visualClass: d,
-			className: v,
-			onMouseEnter: M,
-			onMouseLeave: P,
-			children: f
+			style: P.triggerStyle,
+			"aria-describedby": A,
+			onMouseEnter: R,
+			onMouseLeave: y ? B : z,
+			onFocus: R,
+			onBlur: y ? void 0 : z,
+			children: w
+		}), /* @__PURE__ */ c(t, {
+			ref: M,
+			behavior: P,
+			placement: b,
+			id: A,
+			visualClass: f,
+			className: C,
+			onMouseEnter: L,
+			onMouseLeave: y ? B : z,
+			children: g
 		})]
 	});
 }
 //#endregion
-export { f as default };
+export { g as default };

package/dist/components/Image/Image.js

@@ -2,47 +2,71 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import t from "./ImagePreview.js";
+import { useImageGallery as n } from "./ImageGalleryContext.js";
 /* empty css                */
-import { useState as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useControl as o } from "react-use-control";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/Image/Image.tsx
-var s = "haze-Image__wrapper", c = "haze-Image__imgStyle", l = "haze-Image__fallbackStyle", u = "haze-Image__previewTrigger";
-function d({ src: d, alt: f, fallback: p, aspectRatio: m, objectFit: h = "cover", preview: g = !1, className: _, style: v, onClick: y, onError: b, ...x }) {
-	let [S, C] = n(!1), w = g !== !1, T = typeof g == "object" ? g : {}, E = w && T.zoom !== !1, D = w && T.rotate !== !1, [, O, k] = o(void 0, !1), A = (e) => {
-		b?.(e), C(!0);
-	}, j = (e) => {
-		y?.(e), w && (e.currentTarget.focus(), O(!0));
+var u = "haze-Image__wrapper", d = "haze-Image__imgStyle", f = "haze-Image__fallbackStyle", p = "haze-Image__previewTrigger";
+function m({ src: m, alt: h, fallback: g, aspectRatio: _, objectFit: v = "cover", preview: y = !1, className: b, style: x, onClick: S, onError: C, ...w }) {
+	let [T, E] = a(!1), D = y !== !1, O = typeof y == "object" ? y : {}, k = D && O.zoom !== !1, A = D && O.rotate !== !1, [, j, M] = l(void 0, !1), N = n(), P = N !== null, F = N?.enabled === !0, I = D && (!P || F), L = i(null);
+	r(() => {
+		if (N?.enabled !== !0 || !D) return;
+		let e = N.register({
+			src: m,
+			alt: h
+		});
+		return L.current = e, () => {
+			N.unregister(e), L.current = null;
+		};
+	}, [
+		N,
+		D,
+		m,
+		h
+	]);
+	let R = (e) => {
+		C?.(e), E(!0);
+	}, z = (e) => {
+		if (S?.(e), I) {
+			if (e.currentTarget.focus(), F) {
+				let e = L.current;
+				e !== null && N.activate(e);
+				return;
+			}
+			j(!0);
+		}
 	};
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
 		"data-slot": "image",
-		style: { aspectRatio: m },
-		className: e([s, _]),
-		children: S && p ? /* @__PURE__ */ i("span", {
+		style: { aspectRatio: _ },
+		className: e([u, b]),
+		children: T && g ? /* @__PURE__ */ s("span", {
 			"data-slot": "error",
-			className: l,
-			children: p
-		}) : /* @__PURE__ */ i("img", {
+			className: f,
+			children: g
+		}) : /* @__PURE__ */ s("img", {
 			"data-slot": "img",
-			tabIndex: w ? -1 : void 0,
-			...x,
-			src: d,
-			alt: f,
+			tabIndex: I ? -1 : void 0,
+			...w,
+			src: m,
+			alt: h,
 			style: {
-				...v,
-				objectFit: h
+				...x,
+				objectFit: v
 			},
-			onError: A,
-			onClick: j,
-			className: e([c, w && u])
+			onError: R,
+			onClick: z,
+			className: e([d, I && p])
 		})
-	}), w && /* @__PURE__ */ i(t, {
-		src: d,
-		alt: f,
-		open: k,
-		zoom: E,
-		rotate: D
+	}), D && !P && /* @__PURE__ */ s(t, {
+		src: m,
+		alt: h,
+		open: M,
+		zoom: k,
+		rotate: A
 	})] });
 }
 //#endregion
-export { d as default };
+export { m as default };

package/dist/components/Image/ImageGalleryContext.js

@@ -0,0 +1,9 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region src/lib/components/Image/ImageGalleryContext.ts
+var n = e(null), r = n.Provider;
+function i() {
+	return t(n);
+}
+//#endregion
+export { r as ImageGalleryProvider, i as useImageGallery };