haze-ui 1.22.0 → 1.24.0

package/dist/utils/floating.js

@@ -1,203 +1,248 @@
 
 import { classnames as e } from "./classnames.js";
+import { whenExitSettles as t } from "./presence.js";
+import { computeFloatingPosition as n, resolvePadding as r } from "./collision.js";
 /* empty css                   */
-import { jsx as t } from "react/jsx-runtime";
-import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
 //#region src/lib/utils/floating.tsx
-var s = 500;
-function c() {
+var u = 500;
+function d() {
 	return typeof HTMLElement < "u" && "popover" in HTMLElement.prototype;
 }
-function l() {
-	return c() && typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("anchor-name: --haze-floating-probe");
+function f() {
+	return d() && typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("anchor-name: --haze-floating-probe");
 }
-var u = "haze-floating__floatingNative", d = "haze-floating__floatingAnchored", f = "haze-floating__floatingFixed", p = "haze-floating__floatingHidden", m = "haze-floating__anchoredBottom", h = "haze-floating__anchoredBottomSpan", g = "haze-floating__anchoredBottomCenter", _ = "haze-floating__anchoredBottomEnd", v = "haze-floating__anchoredTop", y = "haze-floating__anchoredLeft", b = "haze-floating__anchoredRight", x = "haze-floating__fallbackBottom", S = x, C = "haze-floating__fallbackBottomCenter", w = "haze-floating__fallbackBottomEnd", T = "haze-floating__fallbackTop", E = "haze-floating__fallbackLeft", D = "haze-floating__fallbackRight", O = "haze-floating__gapBelow", k = "haze-floating__gapAbove", A = "haze-floating__gapBefore", j = "haze-floating__gapAfter", M = {
-	bottom: m,
-	"bottom-span": h,
-	"bottom-center": g,
-	"bottom-end": _,
-	top: v,
-	left: y,
-	right: b
-}, N = {
-	bottom: x,
-	"bottom-span": S,
-	"bottom-center": C,
-	"bottom-end": w,
-	top: T,
-	left: E,
-	right: D
-}, P = {
-	bottom: O,
-	"bottom-span": O,
-	"bottom-center": O,
+var p = "haze-floating__floatingNative", m = "haze-floating__floatingAnchored", h = "haze-floating__floatingFixed", g = "haze-floating__floatingHidden", _ = "haze-floating__floatingAnimated", v = "haze-floating__anchoredBottom", y = "haze-floating__anchoredBottomSpan", b = "haze-floating__anchoredBottomCenter", x = "haze-floating__anchoredBottomEnd", S = "haze-floating__anchoredTop", C = "haze-floating__anchoredLeft", w = "haze-floating__anchoredRight", T = "haze-floating__fallbackBottom", E = T, D = "haze-floating__fallbackBottomCenter", O = "haze-floating__fallbackBottomEnd", k = "haze-floating__fallbackTop", A = "haze-floating__fallbackLeft", j = "haze-floating__fallbackRight", M = "haze-floating__gapBelow", N = "haze-floating__gapAbove", P = "haze-floating__gapBefore", F = "haze-floating__gapAfter", I = {
+	bottom: v,
+	"bottom-span": y,
+	"bottom-center": b,
+	"bottom-end": x,
+	top: S,
+	left: C,
+	right: w
+}, L = {
+	bottom: T,
+	"bottom-span": E,
+	"bottom-center": D,
 	"bottom-end": O,
 	top: k,
 	left: A,
 	right: j
+}, R = {
+	bottom: M,
+	"bottom-span": M,
+	"bottom-center": M,
+	"bottom-end": M,
+	top: N,
+	left: P,
+	right: F
 };
-function F({ open: e, setOpen: t, triggerRef: m, panelRef: h }) {
-	let g = `--haze-floating-${i().replace(/[^a-zA-Z0-9]/g, "")}`, _ = c(), v = l(), y = a(!1), [b, x] = o(!1), S = a(null), C = a(-Infinity), w = a(-Infinity);
-	r(() => {
-		let n = h.current;
-		if (!n || !_) return;
-		n !== S.current && (S.current = n, y.current = !1, x(!1));
-		let r = (n) => {
-			let r = n.newState;
-			y.current = r === "open", x(y.current), r === "closed" && e ? (performance.now() - C.current < s && (w.current = performance.now()), C.current = -Infinity, t(!1)) : r === "open" && !e && t(!0);
+function z({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: g, collision: _ }) {
+	let v = `--haze-floating-${s().replace(/[^a-zA-Z0-9]/g, "")}`, y = d(), b = f(), [x, S] = l(!e);
+	o(() => {
+		e && S(!1);
+	}, [e]);
+	let C = c(!1), [w, T] = l(!1), E = c(null), D = c(-Infinity), O = c(-Infinity), k = c(null);
+	o(() => {
+		let r = i.current;
+		if (!r || !y) return;
+		r !== E.current && (E.current = r, C.current = !1, T(!1));
+		let a = !0, o = () => {
+			k.current = { el: r }, r.hidePopover();
+		}, s = () => {
+			if (!(!C.current || r !== i.current)) {
+				if (g) {
+					let e = () => {
+						!a || !C.current || r !== i.current || o();
+					}, n = t(r);
+					n ? n.then(e) : e();
+				} else o();
+			}
+		}, c = (t) => {
+			let i = t.newState;
+			if (C.current = i === "open", T(C.current), i === "closed") {
+				g && S(!0);
+				let t = k.current?.el === r;
+				if (k.current = null, t) {
+					e && r.showPopover();
+					return;
+				}
+				e && (performance.now() - D.current < u && (O.current = performance.now()), D.current = -Infinity, n(!1));
+			} else e || s();
+		};
+		return r.addEventListener("toggle", c), e ? C.current || r.showPopover() : s(), () => {
+			a = !1, r.removeEventListener("toggle", c);
 		};
-		return n.addEventListener("toggle", r), e && !y.current ? n.showPopover() : !e && y.current && n.hidePopover(), () => n.removeEventListener("toggle", r);
 	}, [
-		_,
+		y,
 		e,
-		t,
-		h
-	]), r(() => {
-		if (_ || !e) return;
-		let n = (e) => e instanceof Node && !!(m.current?.contains(e) || h.current?.contains(e)), r = (e) => {
-			n(e.target) || t(!1);
-		}, i = (e) => {
-			e.key === "Escape" && t(!1);
+		n,
+		i,
+		g
+	]), o(() => {
+		if (y || !e) return;
+		let t = (e) => e instanceof Node && !!(r.current?.contains(e) || i.current?.contains(e)), a = (e) => {
+			t(e.target) || n(!1);
+		}, o = (e) => {
+			e.key === "Escape" && n(!1);
 		};
-		return document.addEventListener("pointerdown", r), document.addEventListener("keydown", i), () => {
-			document.removeEventListener("pointerdown", r), document.removeEventListener("keydown", i);
+		return document.addEventListener("pointerdown", a), document.addEventListener("keydown", o), () => {
+			document.removeEventListener("pointerdown", a), document.removeEventListener("keydown", o);
 		};
 	}, [
-		_,
+		y,
 		e,
-		t,
-		m,
-		h
+		n,
+		r,
+		i
+	]), o(() => {
+		if (y || !g || e || x) return;
+		let n = !0, r = i.current, a = r ? t(r) : null, o = () => {
+			n && S(!0);
+		};
+		return a ? a.then(o) : o(), () => {
+			n = !1;
+		};
+	}, [
+		y,
+		g,
+		e,
+		x,
+		i
 	]);
-	let T = n(() => {
-		e && (C.current = performance.now());
-	}, [e]), E = n(() => {
-		if (performance.now() - w.current < s) {
-			w.current = -Infinity;
+	let A = a(() => {
+		e && (D.current = performance.now());
+	}, [e]), j = a(() => {
+		if (performance.now() - O.current < u) {
+			O.current = -Infinity;
 			return;
 		}
-		t((e) => !e);
-	}, [t]);
+		n((e) => !e);
+	}, [n]);
 	return {
 		open: e,
-		native: _,
-		anchored: v,
-		shown: _ ? b : e,
-		anchorName: g,
-		triggerStyle: v ? { anchorName: g } : void 0,
-		onTriggerPointerDown: T,
-		onTriggerClick: E,
+		native: y,
+		anchored: b,
+		shown: y ? w : e,
+		dataState: g ? e ? "open" : "closed" : void 0,
+		exited: g ? x : !e,
+		collision: _,
+		anchorName: v,
+		triggerStyle: b ? { anchorName: v } : void 0,
+		onTriggerPointerDown: A,
+		onTriggerClick: j,
 		panelAttrs: {
-			popover: _ ? "auto" : void 0,
-			style: v ? { "--haze-floating-anchor": g } : void 0
+			popover: y ? "auto" : void 0,
+			style: b ? { "--haze-floating-anchor": v } : void 0
 		},
 		panelClasses: [
-			_ && u,
-			_ && v && d,
-			_ && !v && f,
-			!_ && !e && p
+			y && p,
+			y && b && m,
+			y && !b && h,
+			!y && !e && (!g || x) && "haze-floating__floatingHidden",
+			!!g && "haze-floating__floatingAnimated"
 		],
-		triggerRef: m,
-		panelRef: h
+		triggerRef: r,
+		panelRef: i
 	};
 }
-function I(e, t) {
+function B(e, t) {
 	return t === "point" ? [] : [
-		e.native && e.anchored && M[t],
-		e.native && !e.anchored && P[t],
-		!e.native && N[t]
+		e.native && e.anchored && I[t],
+		e.native && !e.anchored && R[t],
+		!e.native && L[t]
 	];
 }
-function L(e, t) {
+function V(e, t) {
 	return parseFloat(getComputedStyle(e)[t]) || 0;
 }
-function R(e, t, n) {
-	if (n === "point") return;
-	let r = t.getBoundingClientRect(), i = e.getBoundingClientRect(), a = {
+function H(e, t, n, r, i) {
+	let a = r, o = Math.max(a, n - i - t);
+	return Math.min(Math.max(e, a), o) - e;
+}
+function U(e, t, i, a) {
+	if (i === "point") return;
+	let o = t.getBoundingClientRect(), s = e.getBoundingClientRect(), c = {
 		width: window.innerWidth,
 		height: window.innerHeight
-	}, o = r.left + r.width / 2 - i.width / 2, s = r.top + r.height / 2 - i.height / 2, c = {
-		below: L(e, "marginTop"),
-		above: L(e, "marginBottom"),
-		after: L(e, "marginLeft"),
-		before: L(e, "marginRight")
-	}, l = (e, t) => ({
-		top: e === "bottom" ? r.bottom + c.below : r.top - i.height - c.above,
-		left: t === "start" ? r.left : t === "end" ? r.right - i.width : o
-	}), u = (e) => ({
-		top: s,
-		left: e === "right" ? r.right + c.after : r.left - i.width - c.before
-	}), d = {
-		bottom: {
-			side: "bottom",
-			align: "start"
-		},
-		"bottom-span": {
-			side: "bottom",
-			align: "start"
-		},
-		"bottom-center": {
-			side: "bottom",
-			align: "center"
-		},
-		"bottom-end": {
-			side: "bottom",
-			align: "end"
-		},
-		top: {
-			side: "top",
-			align: "center"
+	}, l = {
+		below: V(e, "marginTop"),
+		above: V(e, "marginBottom"),
+		before: V(e, "marginRight"),
+		after: V(e, "marginLeft")
+	}, { top: u, left: d } = n({
+		trigger: o,
+		panel: s,
+		viewport: c,
+		placement: i,
+		gap: l,
+		strategy: {
+			flip: a?.flip ?? !0,
+			shift: a?.shift ?? !0,
+			padding: r(a?.collisionPadding)
 		}
-	}, { top: f, left: p } = n === "left" || n === "right" ? u(n) : l(d[n].side, d[n].align);
-	if (n === "left" || n === "right") {
-		let e = n === "right" ? p + i.width > a.width : p < 0, t = n === "right" ? r.left - i.width - c.before >= 0 : r.right + i.width + c.after <= a.width;
-		e && t && ({top: f, left: p} = u(n === "right" ? "left" : "right"));
-	} else {
-		let { side: e, align: t } = d[n], o = e === "bottom" ? f + i.height > a.height : f < 0, s = e === "bottom" ? r.top - i.height - c.above >= 0 : r.bottom + i.height + c.below <= a.height;
-		o && s && ({top: f, left: p} = l(e === "bottom" ? "top" : "bottom", t));
-	}
-	f = Math.min(Math.max(f, 0), Math.max(0, a.height - i.height)), p = Math.min(Math.max(p, 0), Math.max(0, a.width - i.width)), e.style.top = `${f}px`, e.style.left = `${p}px`;
+	});
+	e.style.top = `${u}px`, e.style.left = `${d}px`;
 }
-function z({ behavior: e, placement: t }) {
-	let { native: n, anchored: i, open: a, triggerRef: o, panelRef: s } = e;
-	r(() => {
-		if (!n || i || t === "point" || !a) return;
-		let e = s.current, r = o.current;
-		if (!e || !r) return;
-		let c = () => R(e, r, t);
-		return c(), window.addEventListener("scroll", c, !0), window.addEventListener("resize", c), () => {
-			window.removeEventListener("scroll", c, !0), window.removeEventListener("resize", c);
+function W({ behavior: e, placement: t, collision: n }) {
+	let { native: i, anchored: a, shown: s, triggerRef: c, panelRef: l } = e;
+	o(() => {
+		if (!i || t === "point" || !s) return;
+		let e = l.current;
+		if (!e) return;
+		if (a) {
+			let i = n?.shift !== !1, a = r(n?.collisionPadding), o = t === "left" || t === "right", s = () => {
+				if (!i) {
+					e.style.translate = "";
+					return;
+				}
+				let t = e.getBoundingClientRect(), n = o ? 0 : H(t.left, t.width, window.innerWidth, a.left, a.right), r = o ? H(t.top, t.height, window.innerHeight, a.top, a.bottom) : 0;
+				e.style.translate = n === 0 && r === 0 ? "" : `${n}px ${r}px`;
+			};
+			return s(), window.addEventListener("scroll", s, !0), window.addEventListener("resize", s), () => {
+				window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s), e.style.translate = "";
+			};
+		}
+		let o = c.current;
+		if (!o) return;
+		let u = () => U(e, o, t, n);
+		return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
+			window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
 		};
 	}, [
-		n,
 		i,
 		a,
+		s,
 		t,
-		o,
-		s
+		n,
+		c,
+		l
 	]);
 }
-function B({ behavior: n, placement: r, visualClass: i, className: a, style: o, children: s, ...c }) {
-	z({
-		behavior: n,
-		placement: r ?? "point"
+function G({ behavior: t, placement: n, collision: r, visualClass: a, className: o, style: s, children: c, ...l }) {
+	W({
+		behavior: t,
+		placement: n ?? "point",
+		collision: r ?? t.collision
 	});
-	let l = n.panelAttrs.style || o ? {
-		...n.panelAttrs.style,
-		...o
+	let u = t.panelAttrs.style || s ? {
+		...t.panelAttrs.style,
+		...s
 	} : void 0;
-	return /* @__PURE__ */ t("div", {
-		...c,
-		...n.panelAttrs,
-		style: l,
+	return /* @__PURE__ */ i("div", {
+		...t.dataState !== void 0 && { "data-state": t.dataState },
+		...l,
+		...t.panelAttrs,
+		style: u,
 		className: e([
-			i,
-			...n.panelClasses,
-			...r ? I(n, r) : [],
-			a
+			a,
+			...t.panelClasses,
+			...n ? B(t, n) : [],
+			o
 		]),
-		children: s
+		children: c
 	});
 }
 //#endregion
-export { B as FloatingPanel, I as floatingPlacementClasses, R as placeFloatingPanel, l as supportsAnchorPositioning, c as supportsNativePopover, F as useFloating, z as useFloatingPosition };
+export { G as FloatingPanel, _ as floatingAnimated, g as floatingHidden, B as floatingPlacementClasses, U as placeFloatingPanel, f as supportsAnchorPositioning, d as supportsNativePopover, z as useFloating, W as useFloatingPosition };

package/dist/utils/focus-scope.js

@@ -0,0 +1,63 @@
+import { focusFirst as e, getTabbables as t } from "./focus.js";
+import { useCallback as n, useEffect as r, useLayoutEffect as i, useRef as a } from "react";
+//#region src/lib/utils/focus-scope.ts
+var o = "hazefocusmount", s = "hazefocusunmount";
+function c() {
+	document.body.focus(), document.activeElement !== document.body && document.activeElement instanceof HTMLElement && document.activeElement.blur();
+}
+function l(l) {
+	let u = a(l);
+	i(() => {
+		u.current = l;
+	});
+	let d = a(null), f = a(null), p = n((e) => {
+		d.current = e;
+	}, []);
+	return r(() => {
+		if (!l.enabled) return;
+		let n = u.current, r = !1, i = document.activeElement;
+		f.current = i instanceof HTMLElement ? i : null;
+		let a = new Event(o, {
+			bubbles: !1,
+			cancelable: !0
+		});
+		d.current?.dispatchEvent(a), n.onMountAutoFocus?.(a), !a.defaultPrevented && n.autoFocus !== !1 && d.current && e(d.current);
+		let p = (e) => {
+			if (e.key !== "Tab") return;
+			let n = d.current;
+			if (!n) return;
+			let r = t(n), i = r[0], a = r[r.length - 1];
+			if (!i || !a) {
+				e.preventDefault();
+				return;
+			}
+			let o = document.activeElement, s = o !== null && n.contains(o);
+			e.shiftKey ? (o === i || !s) && (e.preventDefault(), a.focus()) : (o === a || !s) && (e.preventDefault(), i.focus());
+		}, m = (t) => {
+			let n = d.current;
+			if (!n || !(t.target instanceof Node) || !n.contains(t.target)) return;
+			let i = t.relatedTarget;
+			(i instanceof Node ? !n.contains(i) : document.activeElement === document.body) && queueMicrotask(() => {
+				if (r) return;
+				let t = d.current;
+				if (!t) return;
+				let n = document.activeElement;
+				n !== null && t.contains(n) || e(t);
+			});
+		};
+		return n.trapped && (document.addEventListener("keydown", p), document.addEventListener("focusout", m)), () => {
+			r = !0, n.trapped && (document.removeEventListener("keydown", p), document.removeEventListener("focusout", m));
+			let e = u.current, t = new Event(s, {
+				bubbles: !1,
+				cancelable: !0
+			});
+			if (d.current?.dispatchEvent(t), e.onUnmountAutoFocus?.(t), t.defaultPrevented || e.returnFocus === !1) return;
+			let i = d.current, a = document.activeElement, o = i !== null && a !== null && i.contains(a);
+			if (a !== document.body && a !== null && !o) return;
+			let l = f.current;
+			l?.isConnected && l.focus(), document.activeElement !== l && c();
+		};
+	}, [l.enabled]), p;
+}
+//#endregion
+export { l as useFocusScope };

package/dist/utils/focus.js

@@ -0,0 +1,34 @@
+//#region src/lib/utils/focus.ts
+var e = [
+	"a[href]:not([disabled])",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=hidden])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])",
+	"[contenteditable=true]",
+	"audio[controls]",
+	"video[controls]",
+	"details > summary:first-of-type"
+].join(", ");
+function t(e) {
+	return (e instanceof HTMLButtonElement || e instanceof HTMLInputElement || e instanceof HTMLSelectElement || e instanceof HTMLTextAreaElement || e instanceof HTMLOptionElement) && e.disabled;
+}
+function n(e) {
+	return typeof e.checkVisibility != "function" || e.checkVisibility({
+		checkOpacity: !0,
+		checkVisibilityCSS: !0
+	});
+}
+function r(r) {
+	return !r.matches(e) || r.getAttribute("tabindex") === "-1" || r.hasAttribute("hidden") || t(r) ? !1 : n(r);
+}
+function i(t) {
+	return t ? Array.from(t.querySelectorAll(e)).filter(r) : [];
+}
+function a(e) {
+	let t = i(e)[0] ?? e;
+	return t === e && e.getAttribute("tabindex") === null && (e.tabIndex = -1), t.focus(), document.activeElement === t;
+}
+//#endregion
+export { e as TABBABLE_SELECTOR, a as focusFirst, i as getTabbables, r as isTabbable };

package/dist/utils/presence.js

@@ -0,0 +1,72 @@
+import { cloneElement as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/lib/utils/presence.tsx
+var i = /* @__PURE__ */ new WeakMap();
+function a(e) {
+	if (typeof requestAnimationFrame == "function") {
+		requestAnimationFrame(() => requestAnimationFrame(e));
+		return;
+	}
+	setTimeout(e, 32);
+}
+function o(e) {
+	let t = 0;
+	for (let n of e.split(",")) {
+		let e = n.trim(), r = Number.parseFloat(e);
+		if (Number.isNaN(r)) continue;
+		let i = e.endsWith("ms") ? r : r * 1e3;
+		i > t && (t = i);
+	}
+	return t;
+}
+function s(e) {
+	return new Promise((t) => {
+		a(() => {
+			let n = getComputedStyle(e), r = o(n.animationDuration) + o(n.animationDelay), i = o(n.transitionDuration) + o(n.transitionDelay);
+			if (!(n.animationName !== "none" && r > 0 || n.transitionProperty !== "none" && i > 0)) {
+				t();
+				return;
+			}
+			let a = () => {
+				e.removeEventListener("animationend", s), e.removeEventListener("transitionend", c), window.clearTimeout(l), t();
+			}, s = (t) => {
+				t.target === e && a();
+			}, c = (t) => {
+				t.target === e && a();
+			};
+			e.addEventListener("animationend", s), e.addEventListener("transitionend", c);
+			let l = window.setTimeout(a, Math.max(r, i));
+		});
+	});
+}
+function c(e) {
+	if (!e.isConnected) return null;
+	let t = i.get(e);
+	if (t) return t;
+	let n = s(e);
+	return i.set(e, n), n.then(() => i.delete(e)), n;
+}
+function l({ present: i, children: a, onExited: o }) {
+	let [s, l] = r(i), [u, d] = r(() => i ? "open" : "closed"), [f, p] = r(i), m = n(null);
+	if (i !== f && (p(i), i ? (l(!0), d("open")) : d("closed")), t(() => {
+		if (!s || u !== "closed") return;
+		let e = !0, t = m.current, n = t ? c(t) : null, r = () => {
+			e && (e = !1, l(!1), o?.());
+		};
+		return n ? n.then(r) : r(), () => {
+			e = !1;
+		};
+	}, [
+		s,
+		u,
+		o
+	]), !s) return null;
+	let h = a, g = h.props.ref;
+	return e(h, {
+		...h.props["data-state"] === void 0 ? { "data-state": u } : {},
+		ref: (e) => {
+			m.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+		}
+	});
+}
+//#endregion
+export { l as Presence, c as whenExitSettles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -46,7 +46,7 @@
     "lint": "eslint --fix src *.mjs",
     "deploy": "npm run build:demo && gh-pages -d dist",
     "test": "vitest run",
-    "test:e2e": "playwright test --config e2e/playwright.config.ts",
+    "test:e2e": "PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=1 playwright test --config e2e/playwright.config.ts",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build",
@@ -89,6 +89,7 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.6",
+    "@types/culori": "^4.0.1",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^26.4.0",
     "@types/ramda": "^0.32.0",
@@ -102,6 +103,7 @@
     "babel-plugin-transform-jsx-condition": "^0.1.3",
     "commitizen": "^4.3.2",
     "core-js": "^3.50.0",
+    "culori": "^4.0.2",
     "date-fns": "^4.4.0",
     "eslint": "^10.9.1",
     "eslint-plugin-compat": "^7.0.2",