@payfit/unity-components 3.1.14 → 3.1.15

package/dist/esm/core/components/toast/test-utils.js

@@ -0,0 +1,64 @@
+import { expect as e, userEvent as t, within as n } from "storybook/test";
+//#region src/core/components/toast/test-utils.ts
+var r = (r, i) => {
+	let a = () => r.canvasElement.querySelector("#_rht_toaster"), o = async (e, t, { timeoutMs: n = 2e3, pollMs: r = 50 } = {}) => {
+		let i = await e(), a = Math.min(200, Math.max(1, Math.ceil(n / Math.max(1, r)))), o = () => new Promise((e) => {
+			let t = !1, n = () => {
+				t || (t = !0, e());
+			};
+			setTimeout(n, r), typeof window < "u" && typeof window.requestAnimationFrame == "function" && window.requestAnimationFrame(n), typeof setImmediate == "function" && setImmediate(n);
+		});
+		for (let n = 0; n < a && !t(i); n++) await o(), i = await e();
+		return i;
+	}, s = async (e) => {
+		let t = a();
+		if (!t) throw Error("No toast container found on the page");
+		let { errorToasts: r, statusToasts: i } = await o(() => ({
+			errorToasts: n(t).queryAllByRole("alert").filter((e) => e.getAttribute("aria-live") === "assertive"),
+			statusToasts: n(t).queryAllByRole("status").filter((e) => e.getAttribute("aria-live") === "polite")
+		}), (t) => e ? e === "error" ? t.errorToasts.length > 0 : t.statusToasts.length > 0 : t.errorToasts.length > 0 || t.statusToasts.length > 0);
+		return e ? e === "error" ? r : i : [...r, ...i];
+	}, c = async (e) => {
+		let t = (await s(e)).at(0);
+		if (!t) throw Error(`Toast with variant: ${e} not found in the page`);
+		return t;
+	}, l = async () => {
+		let e = await s();
+		await Promise.all(e.map((e) => t.click(n(e).getByRole("button", { name: i.formatMessage({ id: "unity:component:common:close:label" }) }))));
+	}, u = async ({ variant: e, toast: a }) => {
+		await r.step("Close toast", async () => {
+			let r = a ?? await c(e);
+			await t.click(n(r).getByRole("button", { name: i.formatMessage({ id: "unity:component:common:close:label" }) }), { delay: 100 });
+		});
+	};
+	return {
+		findToast: c,
+		findAllToasts: s,
+		getToastContainer: a,
+		closeAllToasts: l,
+		closeToast: u,
+		triggerToastAction: async ({ variant: e, action: i, closeAtEnd: a = !1 }) => {
+			let o = await c(e);
+			await r.step("Trigger the action of the toast", async () => {
+				await t.click(n(o).getByRole("button", { name: i }));
+			}), a && await u({ variant: e });
+		},
+		assertTextExistsInToast: async ({ variant: t, content: i, title: a, closeAtEnd: o = !1 }) => {
+			let s = await c(t);
+			a && await r.step(`Check if "${a}" is in the toast`, async () => {
+				await e(n(s).getByRole("heading", { name: a })).toBeInTheDocument();
+			}), i && await r.step(`Check if "${i}" is in the toast`, async () => {
+				await e(n(s).getByText(i)).toBeInTheDocument();
+			}), o && await u({ variant: t });
+		},
+		assertToastNotInDocument: async ({ variant: t, title: r, content: i }) => {
+			let a = (await s(t)).filter((e) => r && n(e).queryByText(r) && i && n(e).queryByText(i));
+			for (let n of a) {
+				let a = `Toast with variant: ${t}`;
+				r && (a += ` and title: ${r}`), i && (a += ` and content: ${i}`), await e(n, `${a} not in the document`).not.toBeInTheDocument();
+			}
+		}
+	};
+};
+//#endregion
+export { r as getTestingUtilsToast };

package/dist/esm/core/components/toast/toast.js

@@ -0,0 +1,27 @@
+import { TOAST_CONFIG as e } from "./ToastManager.js";
+import { ToastAction as t } from "./parts/ToastAction.js";
+import { ToastContent as n } from "./parts/ToastContent.js";
+import { ToastTitle as r } from "./parts/ToastTitle.js";
+import { UnityToast as i } from "./UnityToast.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "react-hot-toast";
+//#region src/core/components/toast/toast.tsx
+function c({ title: c, content: l, variant: u, action: d, actionOnPress: f, duration: p, datadogPrivacy: m = "mask" }) {
+	return s.custom((e) => /* @__PURE__ */ o(i, {
+		onClose: () => {
+			s.dismiss(e.id);
+		},
+		variant: u,
+		"data-dd-privacy": m,
+		children: [
+			/* @__PURE__ */ a(r, { children: c }),
+			l ? /* @__PURE__ */ a(n, { children: l }) : null,
+			d ? /* @__PURE__ */ a(t, {
+				onPress: f,
+				children: d
+			}) : null
+		]
+	}), { duration: p ?? e[u].duration });
+}
+//#endregion
+export { c as toast };

package/dist/esm/core/components/toggle-switch/ToggleSwitch.js

@@ -0,0 +1,108 @@
+import { useBreakpointListener as e } from "../../hooks/use-breakpoint-listener.js";
+import { forwardRef as t } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { SwitchButton as a, SwitchField as o } from "react-aria-components/Switch";
+//#region src/core/components/toggle-switch/ToggleSwitch.tsx
+var s = n({
+	slots: {
+		container: ["uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:group"],
+		mobileContainer: ["uy:flex uy:flex-1 uy:justify-between uy:sm:justify-start uy:gap-200 uy:sm:gap-100 uy:group uy:my-75 uy:sm:my-0"],
+		textWrapper: ["uy:flex uy:flex-col uy:gap-50"],
+		label: ["uy:typography-body uy:text-content-form-enabled uy:leading-4! uy:sm:leading-3!"],
+		hintText: ["uy:typography-body-small uy:text-content-neutral-low"],
+		indicator: [
+			"uy:p-50 uy:w-6.75 uy:h-4 uy:sm:w-500 uy:sm:h-300 uy:flex uy:items-center uy:shrink-0 uy:grow-0",
+			"uy:rounded-pill",
+			"uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			"uy:cursor-pointer uy:transition-colors uy:duration-200 uy:ease-in-out",
+			"uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
+			"uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled uy:group-data-[disabled]:cursor-not-allowed",
+			"uy:group-data-[focus-visible]:outline-2 uy:group-data-[focus-visible]:outline-offset-2 uy:group-data-[focus-visible]:outline-utility-focus-ring"
+		],
+		knob: [
+			"uy:w-300 uy:h-300 uy:sm:w-200 uy:sm:h-200 uy:rounded-circle",
+			"uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-enabled",
+			"uy:transition-all uy:duration-200 uy:ease-in-out",
+			"uy:group-data-[selected=\"true\"]:translate-x-[90%]",
+			"uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
+			"uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled"
+		]
+	},
+	variants: { isDisabled: {
+		false: {
+			indicator: [
+				"uy:group-data-[selected=\"true\"]:bg-surface-form-active uy:group-data-[selected=\"true\"]:border-surface-form-active",
+				"uy:group-data-[selected=\"true\"]:group-data-[pressed]:bg-surface-primary-active",
+				"uy:group-data-[selected=\"true\"]:group-data-[pressed]:border-border-primary-active"
+			],
+			knob: [
+				"uy:group-data-[selected=true]:border-transparent",
+				"uy:group-data-[selected=true]:group-data-[pressed]:bg-surface-form-pressed",
+				"uy:group-data-[selected=true]:group-data-[pressed]:border-border-inverted-pressed"
+			]
+		},
+		true: {
+			indicator: "",
+			knob: ""
+		}
+	} }
+}), c = t(({ label: t, helperText: n, isLabelSrOnly: c = !1, isDisabled: l, ...u }, d) => {
+	let { container: f, indicator: p, knob: m, textWrapper: h, label: g, hintText: _, mobileContainer: v } = s({ isDisabled: l }), y = e() === "xs", b = {
+		...u,
+		role: "switch"
+	};
+	return y ? /* @__PURE__ */ r(o, {
+		...b,
+		className: "uy:contents",
+		isDisabled: l,
+		children: /* @__PURE__ */ r(a, {
+			ref: d,
+			className: f(),
+			children: /* @__PURE__ */ i("div", {
+				className: v(),
+				children: [/* @__PURE__ */ i("div", {
+					className: h({ className: c ? "uy:sr-only" : "" }),
+					"data-dd-privacy": "allow",
+					children: [/* @__PURE__ */ r("span", {
+						className: g(),
+						children: t
+					}), n && /* @__PURE__ */ r("span", {
+						className: _(),
+						children: n
+					})]
+				}), /* @__PURE__ */ r("div", {
+					className: p(),
+					"data-dd-privacy": "mask",
+					children: /* @__PURE__ */ r("div", { className: m() })
+				})]
+			})
+		})
+	}) : /* @__PURE__ */ r(o, {
+		...b,
+		className: "uy:contents",
+		isDisabled: l,
+		children: /* @__PURE__ */ i(a, {
+			className: f(),
+			ref: d,
+			children: [/* @__PURE__ */ r("div", {
+				className: p(),
+				"data-dd-privacy": "mask",
+				children: /* @__PURE__ */ r("div", { className: m() })
+			}), /* @__PURE__ */ i("div", {
+				className: h({ className: c ? "uy:sr-only" : "" }),
+				"data-dd-privacy": "allow",
+				children: [/* @__PURE__ */ r("span", {
+					className: g(),
+					children: t
+				}), n && /* @__PURE__ */ r("span", {
+					className: _(),
+					children: n
+				})]
+			})]
+		})
+	});
+});
+c.displayName = "ToggleSwitch";
+//#endregion
+export { c as ToggleSwitch, s as toggleSwitch };

package/dist/esm/core/components/toggle-switch-group/ToggleSwitchGroup.js

@@ -0,0 +1,84 @@
+import { Text as e } from "../text/Text.js";
+import { Label as t } from "../label/Label.js";
+import { Children as n, cloneElement as r, forwardRef as i, isValidElement as a, useCallback as o, useId as s, useRef as c, useState as l } from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/core/components/toggle-switch-group/ToggleSwitchGroup.tsx
+var p = u({ base: "uy:flex uy:flex-col uy:gap-50" });
+function m(e) {
+	if (!a(e)) return !1;
+	let t = e.props;
+	return typeof t == "object" && !!t && "value" in t && typeof t.value == "string";
+}
+var h = i(({ label: i, helperText: u, feedbackText: h, isDisabled: g, isReadOnly: _, isInvalid: v, isRequired: y, children: b, requiredVariant: x, value: S, defaultValue: C, onChange: w, onFocus: T, onBlur: E, onFocusChange: D, ...O }, k) => {
+	let A = S !== void 0, [j, M] = l(C ?? []), N = A ? S : j, P = s(), F = u ? `${P}-helper` : void 0, I = v && h ? `${P}-feedback` : void 0, L = [F, I].filter(Boolean).join(" ") || void 0, R = c(!1), z = (e) => {
+		R.current = !0, T?.(e), D?.(!0);
+	}, B = (e) => {
+		R.current = !1, E?.(e), D?.(!1);
+	}, V = o((e) => {
+		let t;
+		t = N.includes(e) ? N.filter((t) => t !== e) : [...N, e], A || M(t), w?.(t);
+	}, [
+		N,
+		A,
+		w
+	]), H = () => n.map(b, (e, t) => {
+		if (!m(e)) return e;
+		let n = e, i = n.props, a = i.value;
+		return r(n, {
+			key: n.key ?? t,
+			isSelected: N.includes(a),
+			isDisabled: g ?? i.isDisabled,
+			isReadOnly: _ ?? i.isReadOnly,
+			value: a,
+			onChange: () => {
+				V(a);
+			}
+		});
+	});
+	return /* @__PURE__ */ f("fieldset", {
+		...O,
+		ref: k,
+		className: p(),
+		"aria-describedby": L,
+		"aria-invalid": v || void 0,
+		"aria-required": y || void 0,
+		disabled: g,
+		onFocus: z,
+		onBlur: B,
+		children: [
+			/* @__PURE__ */ d("legend", {
+				className: "uy:mb-25",
+				children: /* @__PURE__ */ d(t, {
+					isRequired: y,
+					requiredVariant: x,
+					children: i
+				})
+			}),
+			u && /* @__PURE__ */ d(e, {
+				id: F,
+				variant: "bodySmall",
+				color: "content.neutral.low",
+				slot: "description",
+				children: u
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "uy:mt-100 uy:flex uy:flex-col uy:gap-150 uy:py-25",
+				children: H()
+			}),
+			v && h && (typeof h == "string" ? /* @__PURE__ */ d(e, {
+				id: I,
+				variant: "bodySmallStrong",
+				color: "content.form.invalid",
+				slot: "errorMessage",
+				children: h
+			}) : a(h) && r(h, {
+				id: I,
+				slot: "errorMessage"
+			}))
+		]
+	});
+});
+h.displayName = "ToggleSwitchGroup";
+//#endregion
+export { h as ToggleSwitchGroup, p as toggleSwitchGroup };

package/dist/esm/core/components/tooltip/Tooltip.js

@@ -0,0 +1,30 @@
+import { Button as e } from "../button/Button.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Button as i } from "react-aria-components/Button";
+import { Tooltip as a, TooltipTrigger as o } from "react-aria-components/Tooltip";
+//#region src/core/components/tooltip/Tooltip.tsx
+var s = (t) => t.type === e || t.type === i, c = {
+	short: [100, 150],
+	standard: [150, 200],
+	long: [200, 300],
+	"very-long": [300, 400]
+}, l = t(({ title: e, children: t, duration: i = "standard" }, l) => {
+	let [u, d] = c[i];
+	return /* @__PURE__ */ r(o, {
+		delay: u,
+		closeDelay: d,
+		children: [t, /* @__PURE__ */ n(a, {
+			ref: l,
+			"data-dd-privacy": "allow",
+			offset: s(t) ? 6 : 8,
+			className: "uy:inline-flex uy:rounded-50 uy:pl-100 uy:pr-100 uy:pt-50 uy:pb-50 uy:bg-grayscale-l12 uy:max-w-[300px] uy:shadow-100",
+			children: /* @__PURE__ */ n("p", {
+				className: "uy:typography-body-small uy:text-content-inverted uy:overflow-hidden uy:text-ellipsis uy:line-clamp-3",
+				children: e
+			})
+		})]
+	});
+});
+//#endregion
+export { l as Tooltip };

package/dist/esm/core/hooks/use-breakpoint-listener.js

@@ -0,0 +1,17 @@
+import { useMediaQuery as e } from "./use-media-query.js";
+//#region src/core/hooks/use-breakpoint-listener.ts
+var t = (e) => {
+	let t = getComputedStyle(document.documentElement).getPropertyValue(`--uy-breakpoint-${e}`);
+	return parseInt(t.replace("px", ""), 10);
+}, n = (e) => `(min-width: ${t(e)}px)`;
+function r() {
+	let t = e(n("xl")), r = e(n("lg")), i = e(n("md")), a = e(n("sm"));
+	return t ? "xl" : r ? "lg" : i ? "md" : a ? "sm" : "xs";
+}
+var i = [
+	"md",
+	"lg",
+	"xl"
+], a = ["xs", "sm"], o = (e) => i.includes(e), s = (e) => a.includes(e);
+//#endregion
+export { i as DESKTOP_BREAKPOINTS, a as MOBILE_BREAKPOINTS, o as isDesktopBreakpoint, s as isMobileBreakpoint, r as useBreakpointListener };

package/dist/esm/core/hooks/use-container-query-level.js

@@ -0,0 +1,32 @@
+import { useResizeObserver as e } from "usehooks-ts";
+import t from "@payfit/unity-themes/tokens/common/sizes.json";
+//#region src/core/hooks/use-container-query-level.ts
+var n = () => {
+	let e = t.container, n = {
+		section: parseInt(e.section.$value.replace("px", ""), 10),
+		page: parseInt(e.page.$value.replace("px", ""), 10),
+		app: parseInt(e.app.$value.replace("px", ""), 10)
+	};
+	if (typeof window > "u") return n;
+	let r = getComputedStyle(document.documentElement), i = (e) => {
+		let t = r.getPropertyValue(`--uy-container-${e}`), i = parseInt(t.replace("px", ""), 10);
+		return isNaN(i) ? n[e] : i;
+	};
+	return {
+		section: i("section"),
+		page: i("page"),
+		app: i("app")
+	};
+};
+function r(t) {
+	let { ref: r } = t, i = e({
+		ref: r,
+		box: "border-box"
+	}).width ?? 0, a = n();
+	return {
+		level: i >= a.app ? "app" : i >= a.page ? "page" : i >= a.section ? "section" : "component",
+		width: i
+	};
+}
+//#endregion
+export { r as useContainerQueryLevel };

package/dist/esm/core/hooks/use-has-scroll.js

@@ -0,0 +1,79 @@
+import { detectScroll as e } from "../utils/scroll-detection.js";
+import { useCallback as t, useEffect as n, useLayoutEffect as r, useState as i } from "react";
+//#region src/core/hooks/use-has-scroll.ts
+function a(a, o = {}) {
+	let { strategy: s = "size", debounceMs: c = 100, watchMutations: l = !0, watchResize: u = !0 } = o, [d, f] = i({
+		hasVerticalScroll: !1,
+		hasHorizontalScroll: !1,
+		hasAnyScroll: !1,
+		detectionMethod: {
+			size: {
+				vertical: !1,
+				horizontal: !1
+			},
+			style: {
+				vertical: !1,
+				horizontal: !1
+			}
+		}
+	}), p = t(() => {
+		let t = a.current;
+		if (!t) return;
+		let n = e(t, s);
+		f(n);
+	}, [a, s]);
+	return r(() => {
+		if (!a.current) return;
+		p();
+		let e = requestAnimationFrame(() => {
+			p();
+		});
+		return () => {
+			cancelAnimationFrame(e);
+		};
+	}, [p]), n(() => {
+		let e = !0, t, n = () => {
+			let e = a.current;
+			if (!e) return;
+			let n, r = () => {
+				clearTimeout(n), n = setTimeout(p, c);
+			};
+			p(), requestAnimationFrame(() => {
+				p();
+			});
+			let i = [];
+			if (u) {
+				let t = new ResizeObserver(r);
+				t.observe(e), i.push(t);
+			}
+			if (l) {
+				let t = new MutationObserver(r);
+				t.observe(e, {
+					childList: !0,
+					subtree: !0,
+					characterData: !0,
+					attributes: !0,
+					attributeFilter: ["style", "class"]
+				}), i.push(t);
+			}
+			t = () => {
+				clearTimeout(n), i.forEach((e) => {
+					e.disconnect();
+				});
+			};
+		}, r = () => {
+			e && (a.current ? n() : requestAnimationFrame(r));
+		};
+		return r(), () => {
+			e = !1, t?.();
+		};
+	}, [
+		a,
+		p,
+		c,
+		u,
+		l
+	]), d;
+}
+//#endregion
+export { a as useHasScroll };

package/dist/esm/core/hooks/use-id.js

@@ -0,0 +1,22 @@
+import { useState as e } from "react";
+//#region src/core/hooks/use-id.ts
+function* t(e = Date.now()) {
+	let t = e;
+	for (;;) t = (t * 1664525 + 1013904223) % 2 ** 32, yield t / 2 ** 32;
+}
+var n = t();
+function r(e) {
+	let t = "";
+	for (let r = 0; r < e; r++) t += "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".charAt(Math.floor(n.next().value * 62));
+	return t;
+}
+var i = 0;
+function a() {
+	return i++;
+}
+function o() {
+	let [t] = e(() => `:r${a().toString(36)}:${r(4)}`);
+	return t;
+}
+//#endregion
+export { o as default };

package/dist/esm/core/hooks/use-media-query.js

@@ -0,0 +1,16 @@
+import { isBrowser as e } from "../utils/platform.js";
+import { useCallback as t, useLayoutEffect as n, useMemo as r, useState as i } from "react";
+//#region src/core/hooks/use-media-query.ts
+var a = (t) => e() ? window.matchMedia(t) : null, o = (e) => e.matches;
+function s(e, s = !1) {
+	let c = r(() => a(e), [e]), [l, u] = i(c ? o(c) : s), d = t(() => {
+		c && u(o(c));
+	}, [c]);
+	return n(() => {
+		if (c) return c.addEventListener("change", d), () => {
+			c.removeEventListener("change", d);
+		};
+	}), l;
+}
+//#endregion
+export { s as useMediaQuery };

package/dist/esm/core/hooks/use-resizable.js

@@ -0,0 +1,50 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+//#region src/core/hooks/use-resizable.ts
+function r({ isDisabled: r = !1, minWidth: i, minHeight: a } = {}) {
+	let o = t(null), [s, c] = n({
+		isResizing: !1,
+		startX: 0,
+		startY: 0,
+		startWidth: 0,
+		startHeight: 0
+	});
+	return e(() => {
+		if (!s.isResizing) return;
+		let e = (e) => {
+			if (!o.current) return;
+			let t = o.current.querySelector("textarea");
+			if (!t) return;
+			let n = e.clientX - s.startX, r = e.clientY - s.startY, c = Math.max(s.startWidth + n, i ?? 0), l = Math.max(s.startHeight + r, a ?? 0);
+			o.current.style.width = `${c}px`, t.style.height = `${l}px`;
+		}, t = () => {
+			c((e) => ({
+				...e,
+				isResizing: !1
+			}));
+		};
+		return document.addEventListener("mousemove", e), document.addEventListener("mouseup", t), () => {
+			document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", t);
+		};
+	}, [
+		s,
+		i,
+		a
+	]), {
+		containerRef: o,
+		handleResizeStart: (e) => {
+			if (r) return;
+			e.preventDefault();
+			let t = o.current?.querySelector("textarea");
+			!o.current || !t || c({
+				isResizing: !0,
+				startX: e.clientX,
+				startY: e.clientY,
+				startWidth: o.current.offsetWidth,
+				startHeight: t.offsetHeight
+			});
+		},
+		isResizing: s.isResizing
+	};
+}
+//#endregion
+export { r as useResizable };

package/dist/esm/core/hooks/use-responsive-value.js

@@ -0,0 +1,25 @@
+import { useBreakpointListener as e } from "./use-breakpoint-listener.js";
+//#region src/core/hooks/use-responsive-value.ts
+function t(e) {
+	return typeof e == "object" && !!e && "base" in e;
+}
+var n = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+function r(r) {
+	let i = e();
+	if (!t(r)) return r;
+	if (i === "xs") return r.base;
+	if (i in r) return r[i];
+	let a = n.indexOf(i);
+	for (let e = a; e >= 0; e--) {
+		let t = n[e];
+		if (t && t in r) return r[t];
+	}
+	return r.base;
+}
+//#endregion
+export { r as useResponsiveValue };

package/dist/esm/core/hooks/use-scroll-direction.js

@@ -0,0 +1,54 @@
+import { useMediaQuery as e } from "./use-media-query.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+//#region src/core/hooks/use-scroll-direction.ts
+var i = 10;
+function a(e) {
+	let t = e.parentElement;
+	for (; t;) {
+		let e = getComputedStyle(t).overflowY;
+		if (e === "auto" || e === "scroll") return t;
+		t = t.parentElement;
+	}
+	return null;
+}
+function o(e) {
+	return e === window ? window.scrollY : e.scrollTop;
+}
+function s(e) {
+	if (e === window) return window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1;
+	let t = e;
+	return t.scrollTop + t.clientHeight >= t.scrollHeight - 1;
+}
+function c(c) {
+	let l = e("(prefers-reduced-motion: reduce)"), [u, d] = r("idle"), f = n(null), p = n(0), m = n(0);
+	return t(() => {
+		if (l) {
+			d("idle");
+			return;
+		}
+		let e = (() => {
+			if (c?.current) return c.current;
+			if (f.current) {
+				let e = a(f.current);
+				if (e) return e;
+			}
+			return window;
+		})();
+		p.current = o(e), m.current = 0;
+		let t = () => {
+			let t = o(e);
+			if (t < 0) return;
+			if (s(e)) {
+				m.current = 0, p.current = t, d("up");
+				return;
+			}
+			let n = t - p.current;
+			m.current += n, p.current = t, m.current > i ? (m.current = 0, d("down")) : m.current < -10 && (m.current = 0, d("up"));
+		};
+		return e.addEventListener("scroll", t, { passive: !0 }), () => {
+			e.removeEventListener("scroll", t);
+		};
+	}, [l, c]), [f, l ? "idle" : u];
+}
+//#endregion
+export { c as useScrollDirection };