@kubit-ui-web/react-components 2.0.0-beta.48 → 2.0.0-beta.49

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

@@ -1 +1,17 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as e}from"react";import{classNames as i}from"../../utils/classNames/classNames.js";import{pickCustomAttributes as a}from"../../utils/pickCustomAttributes/pickCustomAttributes.js";const t=e(({ariaAtomic:e,ariaLive:t,children:s,className:o,id:m,role:c,...l},n)=>{const d=a(l),p=i("kbt-screen-reader-only",o),u={};return void 0!==t&&(u["aria-live"]=t),void 0!==e&&(u["aria-atomic"]=e),void 0!==c&&(u.role=c),/* @__PURE__ */r("span",{ref:n,className:p,id:m,...u,...d,children:s})});t.displayName="ScreenReaderOnlyStandAlone";export{t as ScreenReaderOnlyStandAlone};
+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{useRef as e,useEffect as t}from"react";const n=(n,r,c=[])=>{const o=e(r);t(()=>{o.current=r},[r]),t(()=>{function e(e){const t=e.composedPath(),r=n.current&&t.includes(n.current),u=c.some(e=>e&&t.includes(e));!n.current||r||u||o.current(e)}return document.addEventListener("mouseup",e,!0),()=>{document.removeEventListener("mouseup",e,!0)}},[n,c])};export{n 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 e,useCallback as n}from"react";import{isContentVisibleEnough as t}from"./utils/contentVisibility.js";const r=({minVisibleHeight:r=100,onContentInvisible:o,onContentVisible:i})=>{const c=e(null),s=e(null),l=e(),u=e(),b=e(void 0),v=n(()=>{const e=c.current,n=s.current;e&&n&&(i?i():(e.style.overflowY="",n.style.overflowY=""))},[i]),f=n(()=>{const e=c.current,n=s.current;e&&n&&(o?o():(e.style.overflowY="auto",n.style.overflowY="visible"))},[o]);return{handleContentVisibility:n(({container:e,content:n})=>{if(c.current=e,s.current=n,e&&n){const o=()=>{const o=t({container:e,content:n,minVisibleHeight:r});o!==b.current&&(o?v():f()),b.current=o};o(),l.current=new ResizeObserver(()=>{o()}),u.current=new ResizeObserver(()=>{o()}),l.current.observe(n),l.current.observe(e)}else l.current?.disconnect(),u.current?.disconnect()},[r,v,f])}};export{r 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

@@ -1 +1,3 @@
-import{hasVerticalScroll as t}from"../../../utils/scroll/hasScroll.js";const i=({container:i,content:e,minVisibleHeight:l})=>t(e)?e.clientHeight>=l:i.scrollHeight-e.clientHeight+l<=i.clientHeight;export{i as isContentVisibleEnough};
+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,useEffect as o,useMemo as i}from"react";import{STATES as s}from"../../types/states/states.js";const c=({active:c=!1,disabled:d=!1,loading:u=!1,ref:v,states:E})=>{const[a,m]=e(!1),[L,l]=e(!1),p=n(null);t(v,()=>p?.current,[]);const w=r(()=>"undefined"==typeof window||!window?.matchMedia||!window.matchMedia("(hover: none)").matches,[]),D=r(()=>m(!0),[]),S=r(()=>m(!1),[]),A=r(()=>l(!0),[]),R=r(()=>l(!1),[]),f=r(()=>l(!1),[]),I=r(e=>{p.current&&(p.current.removeEventListener("mouseenter",D),p.current.removeEventListener("mouseleave",S),p.current.removeEventListener("pointerdown",A),p.current.removeEventListener("pointercancel",R),window.removeEventListener("pointerup",f)),p.current=e,e&&(E?.includes(s.PRESSED)&&(e.addEventListener("pointerdown",A),e.addEventListener("pointercancel",R),window.addEventListener("pointerup",f)),w()&&E?.includes(s.HOVER)&&(e.addEventListener("mouseenter",D),e.addEventListener("mouseleave",S)))},[E,D,S,A,R,f,w]);return o(()=>()=>{p.current&&(p.current.removeEventListener("mouseenter",D),p.current.removeEventListener("mouseleave",S),p.current.removeEventListener("pointerdown",A),p.current.removeEventListener("pointercancel",R),window.removeEventListener("pointerup",f))},[D,S,A,R,f]),{setRef:I,states:i(()=>E?.includes(s.LOADING)&&u?s.LOADING:E?.includes(s.DISABLED)&&d?s.DISABLED:E?.includes(s.ACTIVE)&&c?s.ACTIVE:E?.includes(s.PRESSED)&&L?s.PRESSED:E?.includes(s.HOVER)&&a?s.HOVER:s.DEFAULT,[E,d,u,c,a,L])}};export{c 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

@@ -1 +1,20 @@
-import{useState as r,useRef as e,useCallback as c}from"react";import{hasScroll as o}from"../../utils/scroll/hasScroll.js";const t=({autoFocus:t=!1}={})=>{const[s,n]=r(!1),l=e(),u=e(!1);return{handleScrollDetection:c(r=>{if(r){const e=r=>{const e=o(r);n(e),t&&e&&!u.current&&(r.focus(),u.current=!0)};e(r),l.current=new ResizeObserver(()=>{e(r)}),l.current.observe(r)}else l.current?.disconnect()},[t]),hasScroll:s}};export{t as useScrollDetection};
+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,useEffect as t}from"react";import{scrollPercentage as n}from"./utils/scrollPercentage.js";const c=({conditional:c=!0,scrollCallback:u,shadowStyles:l,shadowVisible:s=1})=>{const o=r(null),a=r(null),i=r(null),p=r(0),m=r(0),d=r(null),y=r(null),h=r(null),P=e(()=>{if(!c||!o.current)return;const r=n(o.current,1.25);if(a.current&&p.current>0){const e=r*p.current/100,t=r*m.current/100;[{cssPropertyName:"min-height",cssPropertyValue:`calc(${p.current}px - ${e}px)`},{cssPropertyName:"height",cssPropertyValue:`calc(${p.current}px - ${e}px)`},{cssPropertyName:"min-width",cssPropertyValue:`calc(${m.current}px - ${t}px)`},{cssPropertyName:"width",cssPropertyValue:`calc(${m.current}px - ${t}px)`}].forEach(({cssPropertyName:r,cssPropertyValue:e})=>{a.current?.style.setProperty(r,e)})}if(i.current&&l){const e=l.split(" ");r>s?i.current.classList.add(...e):i.current.classList.remove(...e)}},[c,l,s]),v=e(r=>{null!==d.current&&cancelAnimationFrame(d.current),d.current=requestAnimationFrame(()=>{P(),u?.(r),d.current=null})},[P,u]);t(()=>{y.current=v},[v]);const f=e(r=>{o.current&&y.current&&o.current.removeEventListener("scroll",y.current),o.current=r,r&&y.current&&(r.addEventListener("scroll",y.current),P())},[P]),x=e(r=>{const e=()=>{a.current&&(p.current=a.current.clientHeight,m.current=a.current.clientWidth)};a.current&&h.current&&a.current.removeEventListener("load",h.current),h.current=e,a.current=r,r&&(r.addEventListener("load",e),e())},[]),L=e(r=>{i.current=r},[]);return t(()=>()=>{null!==d.current&&cancelAnimationFrame(d.current),o.current&&y.current&&o.current.removeEventListener("scroll",y.current),a.current&&h.current&&a.current.removeEventListener("load",h.current)},[]),{resizeRef:x,scrollableRef:f,shadowRef:L}};export{c 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";const r=({handleClose:r})=>{const n=e(null),u=e(null),o=e(!1),c=e(""),s=e(0),v=e(null),m=t(e=>{n.current=e},[]);return{setDragIconRef:t(e=>{if(v.current&&(v.current(),v.current=null),u.current=e,e){const t=e=>{if("touches"in e){const t=e.touches[0]||e.changedTouches[0];return t?.clientY||0}return e.clientY},u=e=>{o.current&&n.current&&(o.current=!1,t(e)-s.current>30?r?.():n.current.style.bottom=c.current)},m=e=>{if(!o.current||!n.current)return;e.preventDefault();const r=t(e)-s.current;r>0&&(n.current.style.bottom=`-${r}px`)},d=e=>{!o.current&&n.current&&(e.preventDefault(),o.current=!0,s.current=t(e),c.current=window.getComputedStyle(n.current).bottom,document.addEventListener("mousemove",m,{passive:!1}),document.addEventListener("mouseup",u,{passive:!1}),document.addEventListener("touchmove",m,{passive:!1}),document.addEventListener("touchend",u,{passive:!1}))};e.addEventListener("mousedown",d,{passive:!1}),e.addEventListener("touchstart",d,{passive:!1}),v.current=()=>{e.removeEventListener("mousedown",d),e.removeEventListener("touchstart",d),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",u),document.removeEventListener("touchmove",m),document.removeEventListener("touchend",u),o.current=!1}}},[r]),setPopoverRef:m}};export{r 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{jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{pickCustomAttributes as a}from"../../utils/pickCustomAttributes/pickCustomAttributes.js";const t=r(function({children:r,className:t,draggable:i,id:o,onClick:l,onFocus:s,onMouseEnter:n,onMouseLeave:c,rel:d,role:u,target:b,url:m,...f},g){const p=a(f);/* @__PURE__ */
-return e("a",{...p,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:l,onFocus:s,onMouseEnter:n,onMouseLeave:c,children:r})}),i={IMAGE:r(function(r,a){const{alt:t}=r;/* @__PURE__ */
-return e("img",{ref:a,...r,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{jsx as r}from"react/jsx-runtime";import{createContext as e,useContext as o}from"react";const t=e(null),n=({children:e,value:o})=>/* @__PURE__ */r(t.Provider,{value:o,children:e}),i=()=>{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,n as GenericComponentsProvider,i 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 };