@kubit-ui-web/react-components 2.0.0-beta.5 → 2.0.0-beta.51

package/dist/esm/lib/components/screen-reader-only/screenReaderOnlyStandAlone.js

@@ -0,0 +1,17 @@
+import { pickCustomAttributes } from "../../utils/pickCustomAttributes/pickCustomAttributes.js";
+import { classNames } from "../../utils/classNames/classNames.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const ScreenReaderOnlyStandAlone = forwardRef(({ ariaAtomic: e, ariaLive: t, children: n, className: r, id: i, role: a, ...o }, s) => {
+	let c = pickCustomAttributes(o), l = classNames("kbt-screen-reader-only", r), u = {};
+	return t !== void 0 && (u["aria-live"] = t), e !== void 0 && (u["aria-atomic"] = e), a !== void 0 && (u.role = a), /* @__PURE__ */ jsx("span", {
+		ref: s,
+		className: l,
+		id: i,
+		...u,
+		...c,
+		children: n
+	});
+});
+ScreenReaderOnlyStandAlone.displayName = "ScreenReaderOnlyStandAlone";
+export { ScreenReaderOnlyStandAlone };

package/dist/esm/lib/constants/keyboardKeys/keyboardKeys.js

@@ -1 +1,52 @@
-const e={code:"Tab",key:"Tab"},o={key:"Enter"},r={key:["Escape","Esc"]},w={key:" "},c={code:"PageUp"},k={code:"PageDown"},y={code:"ArrowLeft",key:"ArrowLeft"},d={code:"ArrowUp",key:"ArrowUp"},A={code:"ArrowRight",key:"ArrowRight"},t={code:"ArrowDown",key:"ArrowDown"},n={key:"Home"},a={key:"End"};export{t as ARROW_DOWN,y as ARROW_LEFT,A as ARROW_RIGHT,d as ARROW_UP,a as END,o as ENTER,r as ESCAPE,n as HOME,k as PAGE_DOWN,c as PAGE_UP,w as SPACE,e as TAB};
+var TAB = {
+	code: "Tab",
+	key: "Tab",
+	keyCode: 9,
+	which: 9
+}, ENTER = {
+	code: "Enter",
+	key: "Enter",
+	keyCode: 13,
+	which: 13
+}, ESCAPE = {
+	code: "Esc",
+	key: ["Escape", "Esc"],
+	keyCode: 27,
+	which: 27
+}, SPACE = {
+	code: "Space",
+	key: " ",
+	keyCode: 32,
+	which: 32
+}, PAGE_UP = {
+	code: "PageUp",
+	key: "PageUp",
+	keyCode: 33,
+	which: 33
+}, PAGE_DOWN = {
+	code: "PageDown",
+	key: "PageDown",
+	keyCode: 34,
+	which: 34
+}, ARROW_LEFT = {
+	code: "ArrowLeft",
+	key: "ArrowLeft",
+	keyCode: 37,
+	which: 37
+}, ARROW_UP = {
+	code: "ArrowUp",
+	key: "ArrowUp",
+	keyCode: 38,
+	which: 38
+}, ARROW_RIGHT = {
+	code: "ArrowRight",
+	key: "ArrowRight",
+	keyCode: 39,
+	which: 39
+}, ARROW_DOWN = {
+	code: "ArrowDown",
+	key: "ArrowDown",
+	keyCode: 40,
+	which: 40
+}, HOME = { key: "Home" }, END = { key: "End" };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, END, ENTER, ESCAPE, HOME, PAGE_DOWN, PAGE_UP, SPACE, TAB };

package/dist/esm/lib/hooks/useClassName/useClassName.js

@@ -1 +1,10 @@
-import{useStylesContext as o}from"../../provider/stylesProvider/stylesProvider.js";const t=({additionalClassNames:t,component:e,variant:s})=>{const{getComponentStyles:n}=o();return n({additionalClassNames:t,component:e,variant:s})};export{t as useClassName};
+import { useStylesContext } from "../../provider/stylesProvider/stylesProvider.js";
+const useClassName = ({ additionalClassNames: e, component: t, variant: n }) => {
+	let { getComponentStyles: r } = useStylesContext();
+	return r({
+		additionalClassNames: e,
+		component: t,
+		variant: n
+	});
+};
+export { useClassName };

package/dist/esm/lib/hooks/useClickOutside/useClickOutside.js

@@ -1 +1,16 @@
-import{useEffect as e}from"react";const t=(t,n,r=[])=>{e(()=>{function e(e){const o=e.composedPath(),u=t.current&&o.includes(t.current),c=r.some(e=>e&&o.includes(e));!t.current||u||c||n(e)}return document.addEventListener("mouseup",e),()=>{document.removeEventListener("mouseup",e)}},[t,n,r])};export{t as useClickOutside};
+import { useEffect, useRef } from "react";
+const useClickOutside = (n, r, i = []) => {
+	let a = useRef(r);
+	useEffect(() => {
+		a.current = r;
+	}, [r]), useEffect(() => {
+		function e(e) {
+			let t = e.composedPath(), r = n.current && t.includes(n.current), o = i.some((e) => e && t.includes(e));
+			n.current && !r && !o && a.current(e);
+		}
+		return document.addEventListener("mouseup", e, !0), () => {
+			document.removeEventListener("mouseup", e, !0);
+		};
+	}, [n, i]);
+};
+export { useClickOutside };

package/dist/esm/lib/hooks/useContentVisibility/useContentVisibility.js

@@ -1 +1,33 @@
-import{useRef as t,useCallback as e}from"react";import{useContentVisibilityDetection as n}from"../useContentVisibilityDetection/useContentVisibilityDetection.js";const i=({minVisibleHeight:i=100})=>{const o=t(null),r=t(null),{handleContentVisibilityDetection:l}=n({minVisibleHeight:i,onContentInvisible:()=>{const t=o.current,e=r.current;t&&e&&(t.style.overflowY="auto",e.style.overflowY="visible")},onContentVisible:()=>{const t=o.current,e=r.current;t&&e&&(t.style.overflowY="",e.style.overflowY="")}});return{handleContentVisibility:e(({container:t,content:e})=>{o.current=t,r.current=e,l({container:t,content:e})},[l])}};export{i as useContentVisibility};
+import { isContentVisibleEnough } from "./utils/contentVisibility.js";
+import { useCallback, useRef } from "react";
+const useContentVisibility = ({ minVisibleHeight: r = 100, onContentInvisible: i, onContentVisible: a }) => {
+	let o = useRef(null), s = useRef(null), c = useRef(), l = useRef(), u = useRef(void 0), d = useCallback(() => {
+		let e = o.current, t = s.current;
+		!e || !t || (a ? a() : (e.style.overflowY = "", t.style.overflowY = ""));
+	}, [a]), f = useCallback(() => {
+		let e = o.current, t = s.current;
+		!e || !t || (i ? i() : (e.style.overflowY = "auto", t.style.overflowY = "visible"));
+	}, [i]);
+	return { handleContentVisibility: useCallback(({ container: t, content: n }) => {
+		if (o.current = t, s.current = n, t && n) {
+			let i = () => {
+				let i = isContentVisibleEnough({
+					container: t,
+					content: n,
+					minVisibleHeight: r
+				});
+				i !== u.current && (i ? d() : f()), u.current = i;
+			};
+			i(), c.current = new ResizeObserver(() => {
+				i();
+			}), l.current = new ResizeObserver(() => {
+				i();
+			}), c.current.observe(n), c.current.observe(t);
+		} else c.current?.disconnect(), l.current?.disconnect();
+	}, [
+		r,
+		d,
+		f
+	]) };
+};
+export { useContentVisibility };

package/dist/esm/lib/hooks/useContentVisibility/utils/contentVisibility.js

@@ -0,0 +1,3 @@
+import { hasVerticalScroll } from "../../../utils/scroll/hasScroll.js";
+const isContentVisibleEnough = ({ container: e, content: t, minVisibleHeight: n }) => hasVerticalScroll(t) ? t.clientHeight >= n : e.scrollHeight - t.clientHeight + n <= e.clientHeight;
+export { isContentVisibleEnough };

package/dist/esm/lib/hooks/useEscPressed/useEscPressed.js

@@ -1 +1,13 @@
-import{useEffect as e}from"react";const r=({disablePreventDefault:r=!1,disableStopPropagation:t=!1,onEscPress:n,ref:o})=>{e(()=>{if(!o.current)return;const e=e=>{"Escape"===e.key&&(r||e.preventDefault(),t||e.stopPropagation(),n(e))};return o.current.addEventListener("keydown",e),()=>{o.current?.removeEventListener("keydown",e)}},[n])};export{r as useEscPressed};
+import { useEffect } from "react";
+const useEscPressed = ({ disablePreventDefault: t = !1, disableStopPropagation: n = !1, onEscPress: r, ref: i }) => {
+	useEffect(() => {
+		if (!i.current) return;
+		let e = (e) => {
+			e.key === "Escape" && (t || e.preventDefault(), n || e.stopPropagation(), r(e));
+		};
+		return i.current.addEventListener("keydown", e), () => {
+			i.current?.removeEventListener("keydown", e);
+		};
+	}, [r]);
+};
+export { useEscPressed };

package/dist/esm/lib/hooks/useManageState/useManageState.js

@@ -1 +1,37 @@
-import{useState as e,useRef as n,useImperativeHandle as t,useCallback as r,useMemo as i}from"react";import{STATES as s}from"../../types/states/states.js";const o=({active:o=!1,disabled:d=!1,loading:c=!1,ref:u,states:E})=>{const[a,v]=e(!1),[m,l]=e(!1),L=n(null);t(u,()=>L?.current,[]);const p=()=>{v(!0)},w=()=>{v(!1)},D=()=>{l(!0)},S=()=>{l(!1)},f=()=>{l(!1)};return{setRef:r(e=>{e?(L.current=e,E?.includes(s.PRESSED)&&(L?.current?.addEventListener("pointerdown",D),L?.current?.addEventListener("pointercancel",S),window.addEventListener("pointerup",f)),(()=>{if("undefined"!=typeof window&&window?.matchMedia)return!window.matchMedia("(hover: none)").matches;return!0})()&&E?.includes(s.HOVER)&&(L?.current?.addEventListener("mouseenter",p),L?.current?.addEventListener("mouseleave",w))):(L?.current?.removeEventListener("mouseenter",p),L?.current?.removeEventListener("mouseleave",w),L?.current?.removeEventListener("pointerdown",D),L?.current?.removeEventListener("pointercancel",S),window.removeEventListener("pointerup",f),L.current=e)},[]),states:i(()=>E?.includes(s.LOADING)&&c?s.LOADING:E?.includes(s.DISABLED)&&d?s.DISABLED:E?.includes(s.ACTIVE)&&o?s.ACTIVE:E?.includes(s.PRESSED)&&m?s.PRESSED:E?.includes(s.HOVER)&&a?s.HOVER:s.DEFAULT,[E,d,c,o,a,m])}};export{o as useManageState};
+import { STATES } from "../../types/states/states.js";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+const useManageState = ({ active: t = !1, disabled: n = !1, loading: r = !1, ref: i, states: a }) => {
+	let [o, s] = useState(!1), [c, l] = useState(!1), u = useRef(null);
+	useImperativeHandle(i, () => u?.current, []);
+	let d = useCallback(() => typeof window < "u" && window?.matchMedia ? !window.matchMedia("(hover: none)").matches : !0, []), f = useCallback(() => s(!0), []), p = useCallback(() => s(!1), []), m = useCallback(() => l(!0), []), h = useCallback(() => l(!1), []), g = useCallback(() => l(!1), []), _ = useCallback((e) => {
+		u.current && (u.current.removeEventListener("mouseenter", f), u.current.removeEventListener("mouseleave", p), u.current.removeEventListener("pointerdown", m), u.current.removeEventListener("pointercancel", h), window.removeEventListener("pointerup", g)), u.current = e, e && (a?.includes(STATES.PRESSED) && (e.addEventListener("pointerdown", m), e.addEventListener("pointercancel", h), window.addEventListener("pointerup", g)), d() && a?.includes(STATES.HOVER) && (e.addEventListener("mouseenter", f), e.addEventListener("mouseleave", p)));
+	}, [
+		a,
+		f,
+		p,
+		m,
+		h,
+		g,
+		d
+	]);
+	return useEffect(() => () => {
+		u.current && (u.current.removeEventListener("mouseenter", f), u.current.removeEventListener("mouseleave", p), u.current.removeEventListener("pointerdown", m), u.current.removeEventListener("pointercancel", h), window.removeEventListener("pointerup", g));
+	}, [
+		f,
+		p,
+		m,
+		h,
+		g
+	]), {
+		setRef: _,
+		states: useMemo(() => a?.includes(STATES.LOADING) && r ? STATES.LOADING : a?.includes(STATES.DISABLED) && n ? STATES.DISABLED : a?.includes(STATES.ACTIVE) && t ? STATES.ACTIVE : a?.includes(STATES.PRESSED) && c ? STATES.PRESSED : a?.includes(STATES.HOVER) && o ? STATES.HOVER : STATES.DEFAULT, [
+			a,
+			n,
+			r,
+			t,
+			o,
+			c
+		])
+	};
+};
+export { useManageState };

package/dist/esm/lib/hooks/useMediaDevice/useActiveBreakpoints.js

@@ -1 +1,15 @@
-import{DeviceBreakpointsTypeUtils as e}from"../../types/breakpoints/breakpoints.js";import{useMediaDevice as s}from"./useMediaDevice.js";const i=()=>{const i=s();return{device:i,isDesktop:e.isDesktop(i),isDesktopOrLargeDesktop:e.isDesktopOrLargeDesktop(i),isLargeDesktop:e.isLargeDesktop(i),isMobile:e.isMobile(i),isMobileOrTablet:e.isMobileOrTablet(i),isTablet:e.isTablet(i)}};export{i as useActiveBreakpoints};
+import { DeviceBreakpointsTypeUtils } from "../../types/breakpoints/breakpoints.js";
+import { useMediaDevice } from "./useMediaDevice.js";
+const useActiveBreakpoints = () => {
+	let e = useMediaDevice();
+	return {
+		device: e,
+		isDesktop: DeviceBreakpointsTypeUtils.isDesktop(e),
+		isDesktopOrLargeDesktop: DeviceBreakpointsTypeUtils.isDesktopOrLargeDesktop(e),
+		isLargeDesktop: DeviceBreakpointsTypeUtils.isLargeDesktop(e),
+		isMobile: DeviceBreakpointsTypeUtils.isMobile(e),
+		isMobileOrTablet: DeviceBreakpointsTypeUtils.isMobileOrTablet(e),
+		isTablet: DeviceBreakpointsTypeUtils.isTablet(e)
+	};
+};
+export { useActiveBreakpoints };

package/dist/esm/lib/hooks/useMediaDevice/useMediaDevice.js

@@ -1 +1,20 @@
-import{useState as e,useEffect as n}from"react";import{useStylesContext as t}from"../../provider/stylesProvider/stylesProvider.js";import{DEVICE_BREAKPOINTS as i}from"../../types/breakpoints/breakpoints.js";const o=()=>{const{mediaQueries:o}=t(),[r,a]=e(()=>{if("undefined"==typeof window||!window.matchMedia)return i.DESKTOP;const{onlyMobile:e,onlyTablet:n}=o,t=window.matchMedia(e).matches,r=window.matchMedia(n).matches;return t?i.MOBILE:r?i.TABLET:i.DESKTOP});return n(()=>{if("undefined"==typeof window||!window.matchMedia)return;const{onlyDesktop:e,onlyMobile:n,onlyTablet:t}=o,r=window.matchMedia(e),d=window.matchMedia(t),s=window.matchMedia(n),c=()=>{s.matches?a(i.MOBILE):d.matches?a(i.TABLET):a(i.DESKTOP)};return r.addEventListener("change",c),d.addEventListener("change",c),s.addEventListener("change",c),c(),()=>{r.removeEventListener("change",c),d.removeEventListener("change",c),s.removeEventListener("change",c)}},[o]),r};export{o as useMediaDevice};
+import { useStylesContext } from "../../provider/stylesProvider/stylesProvider.js";
+import { DEVICE_BREAKPOINTS } from "../../types/breakpoints/breakpoints.js";
+import { useEffect, useState } from "react";
+const useMediaDevice = () => {
+	let { mediaQueries: r } = useStylesContext(), [i, a] = useState(() => {
+		if (typeof window > "u" || !window.matchMedia) return DEVICE_BREAKPOINTS.DESKTOP;
+		let { onlyMobile: e, onlyTablet: t } = r, n = window.matchMedia(e).matches, i = window.matchMedia(t).matches;
+		return n ? DEVICE_BREAKPOINTS.MOBILE : i ? DEVICE_BREAKPOINTS.TABLET : DEVICE_BREAKPOINTS.DESKTOP;
+	});
+	return useEffect(() => {
+		if (typeof window > "u" || !window.matchMedia) return;
+		let { onlyDesktop: e, onlyMobile: t, onlyTablet: n } = r, i = window.matchMedia(e), o = window.matchMedia(n), s = window.matchMedia(t), c = () => {
+			s.matches ? a(DEVICE_BREAKPOINTS.MOBILE) : o.matches ? a(DEVICE_BREAKPOINTS.TABLET) : a(DEVICE_BREAKPOINTS.DESKTOP);
+		};
+		return i.addEventListener("change", c), o.addEventListener("change", c), s.addEventListener("change", c), c(), () => {
+			i.removeEventListener("change", c), o.removeEventListener("change", c), s.removeEventListener("change", c);
+		};
+	}, [r]), i;
+};
+export { useMediaDevice };

package/dist/esm/lib/hooks/useRoveFocus/useRoveFocus.js

@@ -1 +1,65 @@
-import{useState as e,useRef as t,useCallback as n,useEffect as o}from"react";import{PAGE_UP as r,PAGE_DOWN as c,TAB as a,ARROW_RIGHT as u,ARROW_LEFT as f,ARROW_UP as l,ARROW_DOWN as y}from"../../constants/keyboardKeys/keyboardKeys.js";const s=({currentFocusSelected:s=0,keyDownMove:p=1,keyLeftMove:k=-1,keyPageDownMove:v=1,keyPageUpMove:d=-1,keyRightMove:i=1,keyTabMove:b=1,keyUpMove:D=-1,size:M})=>{const[m,w]=e(s),g=t(null),L=n(e=>{switch(e.key){case y.code:(e=>{null!==p&&(e.preventDefault(),w("function"==typeof p?t=>p(t,e):e=>e===M-1?0:e+p))})(e);break;case l.code:(e=>{null!==D&&(e.preventDefault(),w("function"==typeof D?t=>D(t,e):e=>0===e?M-1:e+D))})(e);break;case f.code:(e=>{null!==k&&(e.preventDefault(),w("function"==typeof k?t=>k(t,e):e=>0===e?M-1:e+k))})(e);break;case u.code:(e=>{null!==i&&(e.preventDefault(),w("function"==typeof i?t=>i(t,e):e=>e===M-1?0:e+i))})(e);break;case a.code:(e=>{null!==b&&w("function"==typeof b?t=>b(t,e):t=>t===M-1?t:(e.preventDefault(),0===t?t+b+1:t+b))})(e);break;case c.code:(e=>{null!==v&&(e.preventDefault(),w("function"==typeof v?t=>v(t,e):e=>e+v))})(e);break;case r.code:(e=>{null!==d&&(e.preventDefault(),w("function"==typeof d?t=>d(t,e):e=>e+d))})(e)}},[M,w,p,D,k,i,b,d,v]);return o(()=>{const e=g.current;return e&&e.addEventListener("keydown",L,!1),()=>{e?.removeEventListener("keydown",L,!1)}},[L,g]),[m,w,g]};export{s as useRoveFocus};
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, PAGE_DOWN, PAGE_UP, TAB } from "../../constants/keyboardKeys/keyboardKeys.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+const useRoveFocus = ({ currentFocusSelected: r = 0, keyDownMove: i = 1, keyLeftMove: a = -1, keyPageDownMove: o = 1, keyPageUpMove: s = -1, keyRightMove: c = 1, keyTabMove: l = 1, keyUpMove: u = -1, size: d }) => {
+	let [f, p] = useState(r), m = useRef(null), h = (e) => {
+		i !== null && (e.preventDefault(), p(typeof i == "function" ? (t) => i(t, e) : (e) => e === d - 1 ? 0 : e + i));
+	}, g = (e) => {
+		u !== null && (e.preventDefault(), p(typeof u == "function" ? (t) => u(t, e) : (e) => e === 0 ? d - 1 : e + u));
+	}, _ = (e) => {
+		a !== null && (e.preventDefault(), p(typeof a == "function" ? (t) => a(t, e) : (e) => e === 0 ? d - 1 : e + a));
+	}, v = (e) => {
+		c !== null && (e.preventDefault(), p(typeof c == "function" ? (t) => c(t, e) : (e) => e === d - 1 ? 0 : e + c));
+	}, y = (e) => {
+		l !== null && p(typeof l == "function" ? (t) => l(t, e) : (t) => t === d - 1 ? t : (e.preventDefault(), t === 0 ? t + l + 1 : t + l));
+	}, b = (e) => {
+		o !== null && (e.preventDefault(), p(typeof o == "function" ? (t) => o(t, e) : (e) => e + o));
+	}, x = (e) => {
+		s !== null && (e.preventDefault(), p(typeof s == "function" ? (t) => s(t, e) : (e) => e + s));
+	}, S = useCallback((n) => {
+		switch (n.key) {
+			case ARROW_DOWN.code:
+				h(n);
+				break;
+			case ARROW_UP.code:
+				g(n);
+				break;
+			case ARROW_LEFT.code:
+				_(n);
+				break;
+			case ARROW_RIGHT.code:
+				v(n);
+				break;
+			case TAB.code:
+				y(n);
+				break;
+			case PAGE_DOWN.code:
+				b(n);
+				break;
+			case PAGE_UP.code:
+				x(n);
+				break;
+			default:
+		}
+	}, [
+		d,
+		p,
+		i,
+		u,
+		a,
+		c,
+		l,
+		s,
+		o
+	]);
+	return useEffect(() => {
+		let e = m.current;
+		return e && e.addEventListener("keydown", S, !1), () => {
+			e?.removeEventListener("keydown", S, !1);
+		};
+	}, [S, m]), [
+		f,
+		p,
+		m
+	];
+};
+export { useRoveFocus };

package/dist/esm/lib/hooks/useScrollBlock/useScrollBlock.js

@@ -1 +1,59 @@
-import{useRef as t,useCallback as e}from"react";import{getFirstScrollableElement as o}from"./utils/useScrollBlock.utils.js";const n=()=>{const n=t([]),r=e(t=>{const e=t.target;e instanceof Node&&!n.current.some(t=>t?.contains(e))&&t.preventDefault()},[]),l=e(t=>{const e=t.target;e instanceof Element&&!o({element:e,parentsToStop:n.current})&&t.preventDefault()},[]),s=e(t=>{const e=t.target;if(!(e instanceof Element))return;const r=o({element:e,parentsToStop:n.current});if(!r)return;const{scrollHeight:l,scrollTop:s}=r;let c=null;r instanceof HTMLElement&&(c=r.offsetHeight),s<=0?r.scrollTo(0,1):null!==c&&s+c>=l&&r.scrollTo(0,l-c-1)},[]),c=e(({elementsToOmit:t=[]}={})=>{if("undefined"==typeof document)return;const e=document.documentElement,{body:o}=document;if(!o||!o.style)return;const c=o.getAttribute("data-scroll-blocked");if(c){const t=Number(c)+1;o.setAttribute("data-scroll-blocked",String(t))}else o.setAttribute("data-scroll-blocked","1");n.current=t,n.current.forEach(t=>{t?.addEventListener("touchmove",l,{passive:!1}),t?.addEventListener("touchstart",s)}),document.addEventListener("touchmove",r,{passive:!1});const i=window.innerWidth-e.clientWidth,d=parseInt(window.getComputedStyle(o).getPropertyValue("padding-right"),10)||0;o.style.position="relative",o.style.overflow="hidden",o.style.paddingRight=`${d+i}px`},[]);return{allowScroll:e(()=>{if("undefined"==typeof document)return;const{body:t}=document;if(!t||!t.style)return;const e=t.getAttribute("data-scroll-blocked");let o=!1;if(e){const n=Number(e)-1;0===n?t.removeAttribute("data-scroll-blocked"):(t.setAttribute("data-scroll-blocked",String(n)),o=!0)}n.current.forEach(t=>{t?.removeEventListener("touchmove",l),t?.removeEventListener("touchstart",s)}),document.removeEventListener("touchmove",r),o||(t.style.position="",t.style.overflow="",t.style.paddingRight="")},[]),blockScroll:c}};export{n as useScrollBlock};
+import { getFirstScrollableElement } from "./utils/useScrollBlock.utils.js";
+import { useCallback, useRef } from "react";
+const useScrollBlock = () => {
+	let r = useRef([]), i = useCallback((e) => {
+		let t = e.target;
+		t instanceof Node && !r.current.some((e) => e?.contains(t)) && e.preventDefault();
+	}, []), a = useCallback((t) => {
+		let n = t.target;
+		!(n instanceof Element) || getFirstScrollableElement({
+			element: n,
+			parentsToStop: r.current
+		}) || t.preventDefault();
+	}, []), o = useCallback((t) => {
+		let n = t.target;
+		if (!(n instanceof Element)) return;
+		let i = getFirstScrollableElement({
+			element: n,
+			parentsToStop: r.current
+		});
+		if (!i) return;
+		let { scrollHeight: a, scrollTop: o } = i, s = null;
+		if (i instanceof HTMLElement && (s = i.offsetHeight), o <= 0) {
+			i.scrollTo(0, 1);
+			return;
+		}
+		s !== null && o + s >= a && i.scrollTo(0, a - s - 1);
+	}, []), s = useCallback(({ elementsToOmit: e = [] } = {}) => {
+		if (typeof document > "u") return;
+		let t = document.documentElement, { body: n } = document;
+		if (!n || !n.style) return;
+		let s = n.getAttribute("data-scroll-blocked");
+		if (s) {
+			let e = Number(s) + 1;
+			n.setAttribute("data-scroll-blocked", String(e));
+		} else n.setAttribute("data-scroll-blocked", "1");
+		r.current = e, r.current.forEach((e) => {
+			e?.addEventListener("touchmove", a, { passive: !1 }), e?.addEventListener("touchstart", o);
+		}), document.addEventListener("touchmove", i, { passive: !1 });
+		let c = window.innerWidth - t.clientWidth, l = parseInt(window.getComputedStyle(n).getPropertyValue("padding-right"), 10) || 0;
+		n.style.position = "relative", n.style.overflow = "hidden", n.style.paddingRight = `${l + c}px`;
+	}, []);
+	return {
+		allowScroll: useCallback(() => {
+			if (typeof document > "u") return;
+			let { body: e } = document;
+			if (!e || !e.style) return;
+			let t = e.getAttribute("data-scroll-blocked"), n = !1;
+			if (t) {
+				let r = Number(t) - 1;
+				r === 0 ? e.removeAttribute("data-scroll-blocked") : (e.setAttribute("data-scroll-blocked", String(r)), n = !0);
+			}
+			r.current.forEach((e) => {
+				e?.removeEventListener("touchmove", a), e?.removeEventListener("touchstart", o);
+			}), document.removeEventListener("touchmove", i), !n && (e.style.position = "", e.style.overflow = "", e.style.paddingRight = "");
+		}, []),
+		blockScroll: s
+	};
+};
+export { useScrollBlock };

package/dist/esm/lib/hooks/useScrollBlock/utils/useScrollBlock.utils.js

@@ -1 +1,5 @@
-const e=e=>e.scrollHeight>e.clientHeight,t=({element:n,parentsToStop:o})=>n&&o.some(e=>e?.contains(n))?e(n)?n:t({element:n.parentElement,parentsToStop:o}):null;export{t as getFirstScrollableElement,e as isElementScrollable};
+const isElementScrollable = (e) => e.scrollHeight > e.clientHeight, getFirstScrollableElement = ({ element: t, parentsToStop: n }) => t && n.some((e) => e?.contains(t)) ? isElementScrollable(t) ? t : getFirstScrollableElement({
+	element: t.parentElement,
+	parentsToStop: n
+}) : null;
+export { getFirstScrollableElement };

package/dist/esm/lib/hooks/useScrollDetection/useScrollDetection.js

@@ -0,0 +1,20 @@
+import { hasScroll } from "../../utils/scroll/hasScroll.js";
+import { useCallback, useRef, useState } from "react";
+const useScrollDetection = ({ autoFocus: n = !1 } = {}) => {
+	let [r, i] = useState(!1), a = useRef(), o = useRef(!1);
+	return {
+		handleScrollDetection: useCallback((e) => {
+			if (e) {
+				let t = (e) => {
+					let t = hasScroll(e);
+					i(t), n && t && !o.current && (e.focus(), o.current = !0);
+				};
+				t(e), a.current = new ResizeObserver(() => {
+					t(e);
+				}), a.current.observe(e);
+			} else a.current?.disconnect();
+		}, [n]),
+		hasScroll: r
+	};
+};
+export { useScrollDetection };

package/dist/esm/lib/hooks/useScrollEffect/useScrollEffect.js

@@ -1 +1,65 @@
-import{useRef as r,useCallback as e}from"react";import{changeCssProperty as t}from"../../utils/changeCssProperty/changeCssProperty.js";import{scrollPercentage as c}from"./utils/scrollPercentage.js";const n=({conditional:n=!0,scrollCallback:s,shadowStyles:l,shadowVisible:u=1})=>{const o=r(null),a=r(null),i=r(null),p=r(0),d=r(0),m=e(()=>{if(!o.current)return;const r=c(o.current,1.25);if(a.current){const e=r*p.current/100,c=r*d.current/100,n=[{cssPropertyName:"min-height",cssPropertyValue:`calc(${p.current}px - ${e}px)`},{cssPropertyName:"height",cssPropertyValue:`calc(${p.current}px - ${e}px)`},{cssPropertyName:"min-width",cssPropertyValue:`calc(${d.current}px - ${c}px)`},{cssPropertyName:"width",cssPropertyValue:`calc(${d.current}px - ${c}px)`}];t(a.current,n)}i.current&&(r>u?i.current.classList.add(...l.split(" ")):i.current.classList.remove(...l.split(" ")))},[n,l,u]),h=e(r=>{r?(o.current=r,m(),o.current?.addEventListener("scroll",r=>{m(),s?.(r)})):(o.current?.removeEventListener("scroll",r=>{m(),s?.(r)}),o.current=null)},[m,s]);return{resizeRef:e(r=>{const e=()=>{a.current&&(p.current=a.current.clientHeight,d.current=a.current.clientWidth)};r?(a.current=r,a.current?.addEventListener("load",e)):(a.current?.removeEventListener("load",e),a.current=null)},[]),scrollableRef:h,shadowRef:e(r=>{i.current=r||null},[])}};export{n as useScrollEffect};
+import { scrollPercentage } from "./utils/scrollPercentage.js";
+import { useCallback, useEffect, useRef } from "react";
+var MAX_PERCENTAGE = 100, proportionLimit = 1.25;
+const useScrollEffect = ({ conditional: r = !0, scrollCallback: i, shadowStyles: a, shadowVisible: o = 1 }) => {
+	let s = useRef(null), c = useRef(null), l = useRef(null), u = useRef(0), d = useRef(0), f = useRef(null), p = useRef(null), m = useRef(null), h = useCallback(() => {
+		if (!r || !s.current) return;
+		let t = scrollPercentage(s.current, proportionLimit);
+		if (c.current && u.current > 0) {
+			let e = t * u.current / MAX_PERCENTAGE, n = t * d.current / MAX_PERCENTAGE;
+			[
+				{
+					cssPropertyName: "min-height",
+					cssPropertyValue: `calc(${u.current}px - ${e}px)`
+				},
+				{
+					cssPropertyName: "height",
+					cssPropertyValue: `calc(${u.current}px - ${e}px)`
+				},
+				{
+					cssPropertyName: "min-width",
+					cssPropertyValue: `calc(${d.current}px - ${n}px)`
+				},
+				{
+					cssPropertyName: "width",
+					cssPropertyValue: `calc(${d.current}px - ${n}px)`
+				}
+			].forEach(({ cssPropertyName: e, cssPropertyValue: t }) => {
+				c.current?.style.setProperty(e, t);
+			});
+		}
+		if (l.current && a) {
+			let e = a.split(" ");
+			t > o ? l.current.classList.add(...e) : l.current.classList.remove(...e);
+		}
+	}, [
+		r,
+		a,
+		o
+	]), g = useCallback((e) => {
+		f.current !== null && cancelAnimationFrame(f.current), f.current = requestAnimationFrame(() => {
+			h(), i?.(e), f.current = null;
+		});
+	}, [h, i]);
+	useEffect(() => {
+		p.current = g;
+	}, [g]);
+	let _ = useCallback((e) => {
+		s.current && p.current && s.current.removeEventListener("scroll", p.current), s.current = e, e && p.current && (e.addEventListener("scroll", p.current), h());
+	}, [h]), v = useCallback((e) => {
+		let t = () => {
+			c.current && (u.current = c.current.clientHeight, d.current = c.current.clientWidth);
+		};
+		c.current && m.current && c.current.removeEventListener("load", m.current), m.current = t, c.current = e, e && (e.addEventListener("load", t), t());
+	}, []), y = useCallback((e) => {
+		l.current = e;
+	}, []);
+	return useEffect(() => () => {
+		f.current !== null && cancelAnimationFrame(f.current), s.current && p.current && s.current.removeEventListener("scroll", p.current), c.current && m.current && c.current.removeEventListener("load", m.current);
+	}, []), {
+		resizeRef: v,
+		scrollableRef: _,
+		shadowRef: y
+	};
+};
+export { useScrollEffect };

package/dist/esm/lib/hooks/useScrollEffect/utils/scrollPercentage.js

@@ -1 +1,9 @@
-const t=(t,o=1)=>{const{clientHeight:r,scrollHeight:c,scrollTop:e}=t;if(c>r){const t=c/r;return 100*(t>o?e*t:e/(2*t))/(c-r)}return 0};export{t as scrollPercentage};
+const scrollPercentage = (e, t = 1) => {
+	let { clientHeight: n, scrollHeight: r, scrollTop: i } = e;
+	if (r > n) {
+		let e = r - n, a = r / n;
+		return (a > t ? i * a : i / (a * 2)) * 100 / e;
+	}
+	return 0;
+};
+export { scrollPercentage };

package/dist/esm/lib/hooks/useSwipeDown/useSwipeDown.js

@@ -1 +1,28 @@
-import{useRef as e,useCallback as t}from"react";import{convertDurationToNumber as r}from"./utils/convertDurationToNumber.js";const n=(n,u)=>{const o=e(null),c=e(null),s=t(e=>{o.current=e||null},[]),i=e(0),m=e(0),v=e(0),l=e(!1),a=e=>{const t=o?.current;t&&(e.preventDefault?.(),t.style.removeProperty("transition"),"touchstart"===e.type?m.current=e.touches[0].clientY:m.current=e.clientY,l.current=!0,v.current=null)},d=e=>{const t=o?.current;if(!l.current||!t)return;"touchmove"===e.type&&null!==v?v.current=e.touches[0].clientY:v.current=e.clientY;const r=m.current-v.current;v.current<m.current||(t.style.bottom=`${i.current+r}px`)},p=1e3*((r(n?.exitDuration)||r(n?.duration)||0)+(r(n?.delay)||0)),E=async()=>{const e=o?.current;if(!e||!v.current)return;if(l.current=!1,e.style.setProperty("transition",`bottom ${p}ms linear`),v.current<m.current+30)return void(e.style.bottom="0px");const t=i.current+e.scrollHeight;var r;e.style.bottom=`-${t}px`,await(r=p,new Promise(e=>setTimeout(e,r))),u?.()};return{setDragIconRef:t(e=>{e?(c.current=e,c?.current?.addEventListener("mousedown",a),c?.current?.addEventListener("mousemove",d),c?.current?.addEventListener("mouseup",E),c?.current?.addEventListener("touchstart",a),c?.current?.addEventListener("touchmove",d),c?.current?.addEventListener("touchend",E)):(c?.current?.removeEventListener("mousedown",a),c?.current?.removeEventListener("mousemove",d),c?.current?.removeEventListener("mouseup",E),c?.current?.removeEventListener("touchstart",a),c?.current?.removeEventListener("touchmove",d),c?.current?.removeEventListener("touchend",E),c.current=null)},[]),setPopoverRef:s}};export{n as useSwipeDown};
+import { useCallback, useRef } from "react";
+var DISTANCE_TO_TRIGGER_CLOSE = 30;
+const useSwipeDown = ({ handleClose: r }) => {
+	let i = useRef(null), a = useRef(null), o = useRef(!1), s = useRef(""), c = useRef(0), l = useRef(null), u = useCallback((e) => {
+		i.current = e;
+	}, []);
+	return {
+		setDragIconRef: useCallback((e) => {
+			if (l.current &&= (l.current(), null), a.current = e, e) {
+				let t = (e) => "touches" in e ? (e.touches[0] || e.changedTouches[0])?.clientY || 0 : e.clientY, a = (e) => {
+					!o.current || !i.current || (o.current = !1, t(e) - c.current > DISTANCE_TO_TRIGGER_CLOSE ? r?.() : i.current.style.bottom = s.current);
+				}, u = (e) => {
+					if (!o.current || !i.current) return;
+					e.preventDefault();
+					let n = t(e) - c.current;
+					n > 0 && (i.current.style.bottom = `-${n}px`);
+				}, d = (e) => {
+					o.current || !i.current || (e.preventDefault(), o.current = !0, c.current = t(e), s.current = window.getComputedStyle(i.current).bottom, document.addEventListener("mousemove", u, { passive: !1 }), document.addEventListener("mouseup", a, { passive: !1 }), document.addEventListener("touchmove", u, { passive: !1 }), document.addEventListener("touchend", a, { passive: !1 }));
+				};
+				e.addEventListener("mousedown", d, { passive: !1 }), e.addEventListener("touchstart", d, { passive: !1 }), l.current = () => {
+					e.removeEventListener("mousedown", d), e.removeEventListener("touchstart", d), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", a), document.removeEventListener("touchmove", u), document.removeEventListener("touchend", a), o.current = !1;
+				};
+			}
+		}, [r]),
+		setPopoverRef: u
+	};
+};
+export { useSwipeDown };

package/dist/esm/lib/hooks/useSwipeDown/utils/convertDurationToNumber.js

@@ -1 +1,7 @@
-const e=e=>{if(!e)return 0;if("number"==typeof e)return e;const r=Number(e.replace("ms","").replace("s",""));return e.includes("s")&&!e.includes("ms")?1e3*r:r};export{e as convertDurationToNumber};
+const convertDurationToNumber = (e) => {
+	if (!e) return 0;
+	if (typeof e == "number") return e;
+	let t = Number(e.replace("ms", "").replace("s", ""));
+	return e.includes("s") && !e.includes("ms") ? t * 1e3 : t;
+};
+export { convertDurationToNumber };

package/dist/esm/lib/hooks/useTrapFocus/useTrapFocus.js

@@ -1 +1,34 @@
-import{useEffect as e}from"react";import{getFocusableDescendants as t}from"../../utils/focusHandlers/focusHandlers.js";const n=({ref:n,trapFocus:r=!1})=>{e(()=>{const e=e=>{if(!n.current||"Tab"!==e.key)return;const r=t({element:n.current});if(!r.length)return void(n.current.contains(document.activeElement)&&e.preventDefault());const o=r[0],i=r[r.length-1];if(!e.shiftKey&&document.activeElement===i)return o?.focus(),void e.preventDefault();if(e.shiftKey&&document.activeElement===o)return i?.focus(),void e.preventDefault();if(o?.compareDocumentPosition(e.target)&Node.DOCUMENT_POSITION_PRECEDING||i?.compareDocumentPosition(e.target)&Node.DOCUMENT_POSITION_FOLLOWING){if(e.shiftKey)return i?.focus(),void e.preventDefault();o?.focus(),e.preventDefault()}};return r&&window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[r])};export{n as useTrapFocus};
+import { getFocusableDescendants } from "../../utils/focusHandlers/focusHandlers.js";
+import { useEffect } from "react";
+const useTrapFocus = ({ ref: t, trapFocus: n = !1 }) => {
+	useEffect(() => {
+		let e = (e) => {
+			if (!t.current || e.key !== "Tab") return;
+			let n = getFocusableDescendants({ element: t.current });
+			if (!n.length) {
+				t.current.contains(document.activeElement) && e.preventDefault();
+				return;
+			}
+			let r = n[0], i = n[n.length - 1];
+			if (!e.shiftKey && document.activeElement === i) {
+				r?.focus(), e.preventDefault();
+				return;
+			}
+			if (e.shiftKey && document.activeElement === r) {
+				i?.focus(), e.preventDefault();
+				return;
+			}
+			if (r?.compareDocumentPosition(e.target) & Node.DOCUMENT_POSITION_PRECEDING || i?.compareDocumentPosition(e.target) & Node.DOCUMENT_POSITION_FOLLOWING) {
+				if (e.shiftKey) {
+					i?.focus(), e.preventDefault();
+					return;
+				}
+				r?.focus(), e.preventDefault();
+			}
+		};
+		return n && window.addEventListener("keydown", e), () => {
+			window.removeEventListener("keydown", e);
+		};
+	}, [n]);
+};
+export { useTrapFocus };

package/dist/esm/lib/provider/genericComponentsProvider/defaultGenericComponents.js

@@ -1,3 +1,39 @@
-import{j as a}from"../../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{pickCustomAttributes as r}from"../../utils/pickCustomAttributes/pickCustomAttributes.js";const t=e(function({children:e,className:t,draggable:i,id:o,onClick:s,onFocus:l,onMouseEnter:n,onMouseLeave:c,rel:d,role:u,target:b,url:m,...f},g){const j=r(f);/* @__PURE__ */
-return a.jsx("a",{...j,ref:g,"aria-current":f["aria-current"],"aria-describedby":f["aria-describedby"],"aria-disabled":f["aria-disabled"],"aria-label":f["aria-label"],"aria-labelledby":f["aria-labelledby"],className:t,"data-testid":f["data-testid"],draggable:i,href:m,id:o,rel:d,role:u,target:b,onClick:s,onFocus:l,onMouseEnter:n,onMouseLeave:c,children:e})}),i={IMAGE:e(function(e,r){const{alt:t}=e;/* @__PURE__ */
-return a.jsx("img",{ref:r,...e,alt:t||""})}),LINK:t};export{i as defaultGenericComponents};
+import { pickCustomAttributes } from "../../utils/pickCustomAttributes/pickCustomAttributes.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Link = forwardRef(function({ children: t, className: n, draggable: r, id: i, onClick: a, onFocus: o, onMouseEnter: s, onMouseLeave: c, rel: l, role: u, target: d, url: f, ...p }, m) {
+	return /* @__PURE__ */ jsx("a", {
+		...pickCustomAttributes(p),
+		ref: m,
+		"aria-current": p["aria-current"],
+		"aria-describedby": p["aria-describedby"],
+		"aria-disabled": p["aria-disabled"],
+		"aria-label": p["aria-label"],
+		"aria-labelledby": p["aria-labelledby"],
+		className: n,
+		"data-testid": p["data-testid"],
+		draggable: r,
+		href: f,
+		id: i,
+		rel: l,
+		role: u,
+		target: d,
+		onClick: a,
+		onFocus: o,
+		onMouseEnter: s,
+		onMouseLeave: c,
+		children: t
+	});
+});
+const defaultGenericComponents = {
+	IMAGE: forwardRef(function(e, t) {
+		let { alt: n } = e;
+		return /* @__PURE__ */ jsx("img", {
+			ref: t,
+			...e,
+			alt: n || ""
+		});
+	}),
+	LINK: Link
+};
+export { defaultGenericComponents };

package/dist/esm/lib/provider/genericComponentsProvider/genericComponentsProvider.js

@@ -1 +1,11 @@
-import{j as r}from"../../../_virtual/jsx-runtime.js";import{createContext as e,useContext as o}from"react";const t=e(null),i=({children:e,value:o})=>/* @__PURE__ */r.jsx(t.Provider,{value:o,children:e}),n=()=>{const r=o(t);if(!r)throw Error("Generic components context is being used without a provider or with an unsupported value");return r};export{t as GenericComponentContext,i as GenericComponentsProvider,n as useGenericComponents};
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+const GenericComponentContext = createContext(null), GenericComponentsProvider = ({ children: e, value: t }) => /* @__PURE__ */ jsx(GenericComponentContext.Provider, {
+	value: t,
+	children: e
+}), useGenericComponents = () => {
+	let e = useContext(GenericComponentContext);
+	if (!e) throw Error("Generic components context is being used without a provider or with an unsupported value");
+	return e;
+};
+export { GenericComponentContext, GenericComponentsProvider, useGenericComponents };