@sohanemon/utils 7.3.1 → 7.3.3

package/README.md

@@ -17,7 +17,7 @@
 - **Cookie Management**: Functions to set, get, delete, and check for cookies.
 - **Class Name Merging**: A utility to merge class names with Tailwind CSS and custom logic.
 - **React Hooks**: Hooks for media queries, effects, state management (local/session storage, URL params), DOM calculations, async operations, scheduling, and more.
-- **UI Components**: React components for HTML injection, media wrapping, responsive indicators, scrollable markers, and Iconify icons.
+- **UI Components**: React components for HTML injection, media wrapping, responsive indicators, scrollable markers, mount-after delays, and Iconify icons.
 - **TypeScript Types**: Advanced utility types for deep partials, requireds, readonly, guards, and type-level logic gates.
 - **Browser Utilities**: Clipboard operations, scroll management, SSR detection, and more.
 
@@ -186,9 +186,12 @@ const { scrolledPast, direction } = useScrollTracker({ threshold: 300 });
 
 #### UI Components
 ```tsx
-import { HtmlInjector, ResponsiveIndicator, Portal, Iconify } from '@sohanemon/utils';
+import { HtmlInjector, MountAfter, ResponsiveIndicator, Portal, Iconify } from '@sohanemon/utils';
 
 <HtmlInjector html="<p>Injected HTML</p>" />
+<MountAfter delay={300} fallback={<Spinner />}>
+  <ExpensiveComponent />
+</MountAfter>
 <ResponsiveIndicator />
 <Portal container="#modal-root">
   <Modal />
@@ -485,6 +488,12 @@ ResponsiveIndicator: React.Component<{
   showText?: boolean;
 }>
 
+MountAfter: React.Component<{
+  delay?: number;
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}>
+
 ScrollableMarker: React.Component<{
   className?: string;
   children?: React.ReactNode;

package/dist/components/index.cjs

@@ -1 +1 @@
-"use client";const e=require(`../hooks-B_cSW9vB.cjs`),t=require(`../functions-Dp2CwvmB.cjs`);let n=require(`react`);n=e.A(n);let r=require(`@radix-ui/react-slot`),i=require(`react/jsx-runtime`),a=require(`@iconify/react`),o=require(`react-dom`);function s({selector:e,children:t}){let a=(0,n.useRef)(null),[o,s]=(0,n.useState)(!1),[c,l]=(0,n.useState)({hasClosest:!1,closestElement:null});return(0,n.useLayoutEffect)(()=>{if(a.current){let t=a.current.closest(e);l({hasClosest:t!==null,closestElement:t})}s(!0)},[e]),o?(0,i.jsx)(r.Slot,{ref:a,children:t(c)}):(0,i.jsx)(`span`,{ref:a})}function c({className:r,html:a,sanitize:o=!1,executeScripts:s=!0,...c}){let l=n.useRef([]),u=n.useRef(null);e.k(()=>{if(l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)}),l.current=[],!(!s||!a))try{let e=document.createElement(`div`);e.innerHTML=a,e.querySelectorAll(`script`).forEach(e=>{let t=document.createElement(`script`);e.textContent&&(t.textContent=e.textContent),Array.from(e.attributes).forEach(e=>{t.setAttribute(e.name,e.value)}),t.onerror=e=>{console.error(`Script injection error:`,e)},document.body.appendChild(t),l.current.push(t)})}catch(e){console.error(`HTML injection error:`,e)}},[a,s]),n.useEffect(()=>()=>{l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)})},[]);let d=n.useMemo(()=>{if(!a)return``;if(o){let e=document.createElement(`div`);e.innerHTML=a,e.querySelectorAll(`script`).forEach(e=>e.remove());let t=[`onclick`,`onload`,`onerror`,`onmouseover`];return e.querySelectorAll(`*`).forEach(e=>{t.forEach(t=>{e.hasAttribute(t)&&e.removeAttribute(t)})}),e.innerHTML}return a},[a,o]);return a?(0,i.jsx)(`div`,{ref:u,className:t.r(r),dangerouslySetInnerHTML:{__html:d},...c}):null}function l({breakpoint:t,as:r=`div`,fallback:a=n.Fragment,className:o,classNameFallback:s,...c}){let l=e.T(t.split(`-`).pop())===t.startsWith(`max`),u=l?a:r,d=l?s:o;return u===n.Fragment?(0,i.jsx)(u,{ref:c.ref,children:c.children},c.key):(0,i.jsx)(u,{className:d,...c})}function u({children:e,container:t}){let r=(0,n.useRef)(null),[i,a]=(0,n.useState)(!1);return(0,n.useLayoutEffect)(()=>{r.current=typeof t==`string`?document.querySelector(t):t.current,a(!0)},[]),!i||!r.current?null:(0,o.createPortal)(e,r.current)}const d=[`bottom-left`,`bottom-right`,`top-right`,`top-left`],f=({side:t,offset:r=2,unit:a=`rem`})=>{let[o,s]=n.useState(t??`bottom-left`),c=e.T({DEFAULT:`xs`,sm:`sm`,md:`md`,lg:`lg`,xl:`xl`,"2xl":`2xl`}),[l,u]=n.useState(typeof window<`u`?window.innerWidth:0);n.useEffect(()=>{if(typeof window>`u`)return;let e=()=>u(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let f=c===`2xl`&&l>=1792?a===`rem`?`${(l/16).toFixed(1)}rem`:`${l}${a}`:c,p={"bottom-left":{bottom:`${r}${a}`,left:`${r}${a}`},"bottom-right":{bottom:`${r}${a}`,right:`${r}${a}`},"top-right":{top:`${r}${a}`,right:`${r}${a}`},"top-left":{top:`${r}${a}`,left:`${r}${a}`}};return(0,i.jsx)(`button`,{type:`button`,onClick:()=>{s(d[(d.indexOf(o)+1)%d.length])},style:{position:`fixed`,zIndex:50,display:`grid`,height:`2.5rem`,minWidth:`2.5rem`,borderRadius:`30px`,placeContent:`center`,backgroundColor:`#2d3748`,fontFamily:`Courier New, Courier, monospace`,fontSize:`1rem`,color:`#ffffff`,border:`2px solid #4a5568`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`,padding:`0.5rem`,transition:`all 0.2s ease-in-out`,...p[o]},children:f})};function p(){return e.k(()=>{let e=document.body;if(!e)return;let t=e=>{let t=getComputedStyle(e);if(t.overflow===`hidden`&&t.overflowY===`hidden`&&t.overflowX===`hidden`)return!1;let n=(t.overflowY===`auto`||t.overflowY===`scroll`)&&e.scrollHeight>e.clientHeight,r=(t.overflowX===`auto`||t.overflowX===`scroll`)&&e.scrollWidth>e.clientWidth;return n||r},n=e=>{t(e)?e.dataset.scrollable=`true`:delete e.dataset.scrollable},r=e=>{n(e);for(let t=0;t<e.children.length;t++){let n=e.children[t];r(n)}};`requestIdleCallback`in window?window.requestIdleCallback(()=>r(e)):setTimeout(()=>r(e),0);let i=new MutationObserver(e=>{for(let t of e)t.type===`childList`?t.addedNodes.forEach(e=>{e instanceof HTMLElement&&r(e)}):t.type===`attributes`&&t.target instanceof HTMLElement&&n(t.target)});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[`style`,`class`]}),()=>i.disconnect()},[]),null}exports.HtmlInjector=c,Object.defineProperty(exports,`Iconify`,{enumerable:!0,get:function(){return a.Icon}}),exports.MediaWrapper=l,exports.Portal=u,exports.ResponsiveIndicator=f,exports.TailwindIndicator=f,exports.ScrollTracker=e.C,exports.ScrollableMarker=p,exports.WithClosest=s;
+"use client";const e=require(`../hooks-B_cSW9vB.cjs`),t=require(`../functions-Dp2CwvmB.cjs`);let n=require(`react`);n=e.A(n);let r=require(`@radix-ui/react-slot`),i=require(`react/jsx-runtime`),a=require(`@iconify/react`),o=require(`react-dom`);function s({selector:e,children:t}){let a=(0,n.useRef)(null),[o,s]=(0,n.useState)(!1),[c,l]=(0,n.useState)({hasClosest:!1,closestElement:null});return(0,n.useLayoutEffect)(()=>{if(a.current){let t=a.current.closest(e);l({hasClosest:t!==null,closestElement:t})}s(!0)},[e]),o?(0,i.jsx)(r.Slot,{ref:a,children:t(c)}):(0,i.jsx)(`span`,{ref:a})}function c({className:r,html:a,sanitize:o=!1,executeScripts:s=!0,...c}){let l=n.useRef([]),u=n.useRef(null);e.k(()=>{if(l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)}),l.current=[],!(!s||!a))try{let e=document.createElement(`div`);e.innerHTML=a,e.querySelectorAll(`script`).forEach(e=>{let t=document.createElement(`script`);e.textContent&&(t.textContent=e.textContent),Array.from(e.attributes).forEach(e=>{t.setAttribute(e.name,e.value)}),t.onerror=e=>{console.error(`Script injection error:`,e)},document.body.appendChild(t),l.current.push(t)})}catch(e){console.error(`HTML injection error:`,e)}},[a,s]),n.useEffect(()=>()=>{l.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)})},[]);let d=n.useMemo(()=>{if(!a)return``;if(o){let e=document.createElement(`div`);e.innerHTML=a,e.querySelectorAll(`script`).forEach(e=>e.remove());let t=[`onclick`,`onload`,`onerror`,`onmouseover`];return e.querySelectorAll(`*`).forEach(e=>{t.forEach(t=>{e.hasAttribute(t)&&e.removeAttribute(t)})}),e.innerHTML}return a},[a,o]);return a?(0,i.jsx)(`div`,{ref:u,className:t.r(r),dangerouslySetInnerHTML:{__html:d},...c}):null}function l({breakpoint:t,as:r=`div`,fallback:a=n.Fragment,className:o,classNameFallback:s,...c}){let l=e.T(t.split(`-`).pop())===t.startsWith(`max`),u=l?a:r,d=l?s:o;return u===n.Fragment?(0,i.jsx)(u,{ref:c.ref,children:c.children},c.key):(0,i.jsx)(u,{className:d,...c})}function u({children:e,container:t}){let r=(0,n.useRef)(null),[i,a]=(0,n.useState)(!1);return(0,n.useLayoutEffect)(()=>{t?r.current=typeof t==`string`?document.querySelector(t):t.current:r.current=document.body,a(!0)},[]),!i||!r.current?null:(0,o.createPortal)(e,r.current)}const d=[`bottom-left`,`bottom-right`,`top-right`,`top-left`],f=({side:t,offset:r=2,unit:a=`rem`})=>{let[o,s]=n.useState(t??`bottom-left`),c=e.T({DEFAULT:`xs`,sm:`sm`,md:`md`,lg:`lg`,xl:`xl`,"2xl":`2xl`}),[l,u]=n.useState(typeof window<`u`?window.innerWidth:0);n.useEffect(()=>{if(typeof window>`u`)return;let e=()=>u(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let f=c===`2xl`&&l>=1792?a===`rem`?`${(l/16).toFixed(1)}rem`:`${l}${a}`:c,p={"bottom-left":{bottom:`${r}${a}`,left:`${r}${a}`},"bottom-right":{bottom:`${r}${a}`,right:`${r}${a}`},"top-right":{top:`${r}${a}`,right:`${r}${a}`},"top-left":{top:`${r}${a}`,left:`${r}${a}`}};return(0,i.jsx)(`button`,{type:`button`,onClick:()=>{s(d[(d.indexOf(o)+1)%d.length])},style:{position:`fixed`,zIndex:50,display:`grid`,height:`2.5rem`,minWidth:`2.5rem`,borderRadius:`30px`,placeContent:`center`,backgroundColor:`#2d3748`,fontFamily:`Courier New, Courier, monospace`,fontSize:`1rem`,color:`#ffffff`,border:`2px solid #4a5568`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`,padding:`0.5rem`,transition:`all 0.2s ease-in-out`,...p[o]},children:f})};function p(){return e.k(()=>{let e=document.body;if(!e)return;let t=e=>{let t=getComputedStyle(e);if(t.overflow===`hidden`&&t.overflowY===`hidden`&&t.overflowX===`hidden`)return!1;let n=(t.overflowY===`auto`||t.overflowY===`scroll`)&&e.scrollHeight>e.clientHeight,r=(t.overflowX===`auto`||t.overflowX===`scroll`)&&e.scrollWidth>e.clientWidth;return n||r},n=e=>{t(e)?e.dataset.scrollable=`true`:delete e.dataset.scrollable},r=e=>{n(e);for(let t=0;t<e.children.length;t++){let n=e.children[t];r(n)}};`requestIdleCallback`in window?window.requestIdleCallback(()=>r(e)):setTimeout(()=>r(e),0);let i=new MutationObserver(e=>{for(let t of e)t.type===`childList`?t.addedNodes.forEach(e=>{e instanceof HTMLElement&&r(e)}):t.type===`attributes`&&t.target instanceof HTMLElement&&n(t.target)});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[`style`,`class`]}),()=>i.disconnect()},[]),null}function m({delay:e=0,fallback:t=null,children:r}){let[a,o]=(0,n.useState)(e===0?`mounted`:`pending`),s=(0,n.useRef)(null);return(0,n.useEffect)(()=>{if(e!==0)return s.current=setTimeout(()=>o(`mounted`),e),()=>{s.current&&clearTimeout(s.current)}},[e]),a===`pending`?(0,i.jsx)(i.Fragment,{children:t}):(0,i.jsx)(i.Fragment,{children:r})}exports.HtmlInjector=c,Object.defineProperty(exports,`Iconify`,{enumerable:!0,get:function(){return a.Icon}}),exports.MediaWrapper=l,exports.MountAfter=m,exports.Portal=u,exports.ResponsiveIndicator=f,exports.TailwindIndicator=f,exports.ScrollTracker=e.C,exports.ScrollableMarker=p,exports.WithClosest=s;

package/dist/components/index.d.cts

@@ -186,7 +186,7 @@ declare function MediaWrapper({
  */
 interface PortalProps {
   children: React.ReactNode;
-  container: `#${string}` | `.${string}` | `[${string}]` | React.RefObject<HTMLElement>;
+  container?: `#${string}` | `.${string}` | `[${string}]` | React.RefObject<HTMLElement>;
 }
 declare function Portal({
   children,
@@ -277,4 +277,52 @@ declare const ScrollTracker: ({
  */
 declare function ScrollableMarker(): null;
 //#endregion
-export { HtmlInjector, Iconify, MediaWrapper, Portal, ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, ScrollTracker, ScrollableMarker, WithClosest };
+//#region src/components/mount-after.d.ts
+/**
+ * Props for the <MountAfter> component.
+ */
+interface MountAfterProps {
+  /**
+   * Delay in milliseconds before mounting children.
+   * @default 0
+   */
+  delay?: number;
+  /**
+   * Content shown while in pending (pre-mount) state.
+   * @default null
+   */
+  fallback?: React.ReactNode;
+  /** Content rendered after delay elapses. */
+  children: React.ReactNode;
+}
+/**
+ * Delays rendering of children by a configurable timeout.
+ *
+ * Useful for preventing content flash, coordinating staggered
+ * animations, or deferring render-heavy trees until after
+ * the initial paint. When `delay` is 0 (default), children
+ * mount immediately with no pending state.
+ *
+ * @param props - The component props
+ * @returns The fallback during the pending state, then children once mounted
+ *
+ * @example
+ * ```tsx
+ * // Mount immediately (no delay)
+ * <MountAfter>
+ *   <ExpensiveComponent />
+ * </MountAfter>
+ *
+ * // Mount after 500ms with a loading indicator
+ * <MountAfter delay={500} fallback={<Spinner />}>
+ *   <ExpensiveComponent />
+ * </MountAfter>
+ * ```
+ */
+declare function MountAfter({
+  delay,
+  fallback,
+  children
+}: MountAfterProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { HtmlInjector, Iconify, MediaWrapper, MountAfter, Portal, ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, ScrollTracker, ScrollableMarker, WithClosest };

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Icon as Iconify } from "@iconify/react";
 
 //#region src/components/closest.d.ts
@@ -47,7 +47,7 @@ type WithClosestProps = {
 declare function WithClosest({
   selector,
   children
-}: WithClosestProps): react_jsx_runtime1.JSX.Element;
+}: WithClosestProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/html-injector.d.ts
 /**
@@ -103,7 +103,7 @@ declare function HtmlInjector({
   sanitize,
   executeScripts,
   ...props
-}: HtmlInjectorProps): react_jsx_runtime1.JSX.Element | null;
+}: HtmlInjectorProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 //#region src/components/media-wrapper.d.ts
 /**
@@ -152,7 +152,7 @@ declare function MediaWrapper({
   className: classNameOriginal,
   classNameFallback,
   ...props
-}: MediaWrapperProps): react_jsx_runtime1.JSX.Element;
+}: MediaWrapperProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/portal.d.ts
 /**
@@ -186,7 +186,7 @@ declare function MediaWrapper({
  */
 interface PortalProps {
   children: React.ReactNode;
-  container: `#${string}` | `.${string}` | `[${string}]` | React.RefObject<HTMLElement>;
+  container?: `#${string}` | `.${string}` | `[${string}]` | React.RefObject<HTMLElement>;
 }
 declare function Portal({
   children,
@@ -252,7 +252,7 @@ interface ScrollTrackerProps {
  */
 declare const ScrollTracker: ({
   children
-}: ScrollTrackerProps) => react_jsx_runtime1.JSX.Element;
+}: ScrollTrackerProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/scrollable-marker.d.ts
 /**
@@ -277,4 +277,52 @@ declare const ScrollTracker: ({
  */
 declare function ScrollableMarker(): null;
 //#endregion
-export { HtmlInjector, Iconify, MediaWrapper, Portal, ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, ScrollTracker, ScrollableMarker, WithClosest };
+//#region src/components/mount-after.d.ts
+/**
+ * Props for the <MountAfter> component.
+ */
+interface MountAfterProps {
+  /**
+   * Delay in milliseconds before mounting children.
+   * @default 0
+   */
+  delay?: number;
+  /**
+   * Content shown while in pending (pre-mount) state.
+   * @default null
+   */
+  fallback?: React.ReactNode;
+  /** Content rendered after delay elapses. */
+  children: React.ReactNode;
+}
+/**
+ * Delays rendering of children by a configurable timeout.
+ *
+ * Useful for preventing content flash, coordinating staggered
+ * animations, or deferring render-heavy trees until after
+ * the initial paint. When `delay` is 0 (default), children
+ * mount immediately with no pending state.
+ *
+ * @param props - The component props
+ * @returns The fallback during the pending state, then children once mounted
+ *
+ * @example
+ * ```tsx
+ * // Mount immediately (no delay)
+ * <MountAfter>
+ *   <ExpensiveComponent />
+ * </MountAfter>
+ *
+ * // Mount after 500ms with a loading indicator
+ * <MountAfter delay={500} fallback={<Spinner />}>
+ *   <ExpensiveComponent />
+ * </MountAfter>
+ * ```
+ */
+declare function MountAfter({
+  delay,
+  fallback,
+  children
+}: MountAfterProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { HtmlInjector, Iconify, MediaWrapper, MountAfter, Portal, ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, ScrollTracker, ScrollableMarker, WithClosest };

package/dist/components/index.js

@@ -1 +1 @@
-"use client";import{r as e}from"../functions-CTMT4m8K.js";import{C as t,T as n,k as r}from"../hooks-CCFEDyEO.js";import*as i from"react";import{useLayoutEffect as a,useRef as o,useState as s}from"react";import{Slot as c}from"@radix-ui/react-slot";import{jsx as l}from"react/jsx-runtime";import{Icon as u}from"@iconify/react";import{createPortal as d}from"react-dom";function f({selector:e,children:t}){let n=o(null),[r,i]=s(!1),[u,d]=s({hasClosest:!1,closestElement:null});return a(()=>{if(n.current){let t=n.current.closest(e);d({hasClosest:t!==null,closestElement:t})}i(!0)},[e]),r?l(c,{ref:n,children:t(u)}):l(`span`,{ref:n})}function p({className:t,html:n,sanitize:a=!1,executeScripts:o=!0,...s}){let c=i.useRef([]),u=i.useRef(null);r(()=>{if(c.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)}),c.current=[],!(!o||!n))try{let e=document.createElement(`div`);e.innerHTML=n,e.querySelectorAll(`script`).forEach(e=>{let t=document.createElement(`script`);e.textContent&&(t.textContent=e.textContent),Array.from(e.attributes).forEach(e=>{t.setAttribute(e.name,e.value)}),t.onerror=e=>{console.error(`Script injection error:`,e)},document.body.appendChild(t),c.current.push(t)})}catch(e){console.error(`HTML injection error:`,e)}},[n,o]),i.useEffect(()=>()=>{c.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)})},[]);let d=i.useMemo(()=>{if(!n)return``;if(a){let e=document.createElement(`div`);e.innerHTML=n,e.querySelectorAll(`script`).forEach(e=>e.remove());let t=[`onclick`,`onload`,`onerror`,`onmouseover`];return e.querySelectorAll(`*`).forEach(e=>{t.forEach(t=>{e.hasAttribute(t)&&e.removeAttribute(t)})}),e.innerHTML}return n},[n,a]);return n?l(`div`,{ref:u,className:e(t),dangerouslySetInnerHTML:{__html:d},...s}):null}function m({breakpoint:e,as:t=`div`,fallback:r=i.Fragment,className:a,classNameFallback:o,...s}){let c=n(e.split(`-`).pop())===e.startsWith(`max`),u=c?r:t,d=c?o:a;return u===i.Fragment?l(u,{ref:s.ref,children:s.children},s.key):l(u,{className:d,...s})}function h({children:e,container:t}){let n=o(null),[r,i]=s(!1);return a(()=>{n.current=typeof t==`string`?document.querySelector(t):t.current,i(!0)},[]),!r||!n.current?null:d(e,n.current)}const g=[`bottom-left`,`bottom-right`,`top-right`,`top-left`],_=({side:e,offset:t=2,unit:r=`rem`})=>{let[a,o]=i.useState(e??`bottom-left`),s=n({DEFAULT:`xs`,sm:`sm`,md:`md`,lg:`lg`,xl:`xl`,"2xl":`2xl`}),[c,u]=i.useState(typeof window<`u`?window.innerWidth:0);i.useEffect(()=>{if(typeof window>`u`)return;let e=()=>u(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let d=s===`2xl`&&c>=1792?r===`rem`?`${(c/16).toFixed(1)}rem`:`${c}${r}`:s;return l(`button`,{type:`button`,onClick:()=>{o(g[(g.indexOf(a)+1)%g.length])},style:{position:`fixed`,zIndex:50,display:`grid`,height:`2.5rem`,minWidth:`2.5rem`,borderRadius:`30px`,placeContent:`center`,backgroundColor:`#2d3748`,fontFamily:`Courier New, Courier, monospace`,fontSize:`1rem`,color:`#ffffff`,border:`2px solid #4a5568`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`,padding:`0.5rem`,transition:`all 0.2s ease-in-out`,...{"bottom-left":{bottom:`${t}${r}`,left:`${t}${r}`},"bottom-right":{bottom:`${t}${r}`,right:`${t}${r}`},"top-right":{top:`${t}${r}`,right:`${t}${r}`},"top-left":{top:`${t}${r}`,left:`${t}${r}`}}[a]},children:d})};function v(){return r(()=>{let e=document.body;if(!e)return;let t=e=>{let t=getComputedStyle(e);if(t.overflow===`hidden`&&t.overflowY===`hidden`&&t.overflowX===`hidden`)return!1;let n=(t.overflowY===`auto`||t.overflowY===`scroll`)&&e.scrollHeight>e.clientHeight,r=(t.overflowX===`auto`||t.overflowX===`scroll`)&&e.scrollWidth>e.clientWidth;return n||r},n=e=>{t(e)?e.dataset.scrollable=`true`:delete e.dataset.scrollable},r=e=>{n(e);for(let t=0;t<e.children.length;t++){let n=e.children[t];r(n)}};`requestIdleCallback`in window?window.requestIdleCallback(()=>r(e)):setTimeout(()=>r(e),0);let i=new MutationObserver(e=>{for(let t of e)t.type===`childList`?t.addedNodes.forEach(e=>{e instanceof HTMLElement&&r(e)}):t.type===`attributes`&&t.target instanceof HTMLElement&&n(t.target)});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[`style`,`class`]}),()=>i.disconnect()},[]),null}export{p as HtmlInjector,u as Iconify,m as MediaWrapper,h as Portal,_ as ResponsiveIndicator,_ as TailwindIndicator,t as ScrollTracker,v as ScrollableMarker,f as WithClosest};
+"use client";import{r as e}from"../functions-CTMT4m8K.js";import{C as t,T as n,k as r}from"../hooks-CCFEDyEO.js";import*as i from"react";import{useEffect as a,useLayoutEffect as o,useRef as s,useState as c}from"react";import{Slot as l}from"@radix-ui/react-slot";import{Fragment as u,jsx as d}from"react/jsx-runtime";import{Icon as f}from"@iconify/react";import{createPortal as p}from"react-dom";function m({selector:e,children:t}){let n=s(null),[r,i]=c(!1),[a,u]=c({hasClosest:!1,closestElement:null});return o(()=>{if(n.current){let t=n.current.closest(e);u({hasClosest:t!==null,closestElement:t})}i(!0)},[e]),r?d(l,{ref:n,children:t(a)}):d(`span`,{ref:n})}function h({className:t,html:n,sanitize:a=!1,executeScripts:o=!0,...s}){let c=i.useRef([]),l=i.useRef(null);r(()=>{if(c.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)}),c.current=[],!(!o||!n))try{let e=document.createElement(`div`);e.innerHTML=n,e.querySelectorAll(`script`).forEach(e=>{let t=document.createElement(`script`);e.textContent&&(t.textContent=e.textContent),Array.from(e.attributes).forEach(e=>{t.setAttribute(e.name,e.value)}),t.onerror=e=>{console.error(`Script injection error:`,e)},document.body.appendChild(t),c.current.push(t)})}catch(e){console.error(`HTML injection error:`,e)}},[n,o]),i.useEffect(()=>()=>{c.current.forEach(e=>{e.parentNode&&e.parentNode.removeChild(e)})},[]);let u=i.useMemo(()=>{if(!n)return``;if(a){let e=document.createElement(`div`);e.innerHTML=n,e.querySelectorAll(`script`).forEach(e=>e.remove());let t=[`onclick`,`onload`,`onerror`,`onmouseover`];return e.querySelectorAll(`*`).forEach(e=>{t.forEach(t=>{e.hasAttribute(t)&&e.removeAttribute(t)})}),e.innerHTML}return n},[n,a]);return n?d(`div`,{ref:l,className:e(t),dangerouslySetInnerHTML:{__html:u},...s}):null}function g({breakpoint:e,as:t=`div`,fallback:r=i.Fragment,className:a,classNameFallback:o,...s}){let c=n(e.split(`-`).pop())===e.startsWith(`max`),l=c?r:t,u=c?o:a;return l===i.Fragment?d(l,{ref:s.ref,children:s.children},s.key):d(l,{className:u,...s})}function _({children:e,container:t}){let n=s(null),[r,i]=c(!1);return o(()=>{t?n.current=typeof t==`string`?document.querySelector(t):t.current:n.current=document.body,i(!0)},[]),!r||!n.current?null:p(e,n.current)}const v=[`bottom-left`,`bottom-right`,`top-right`,`top-left`],y=({side:e,offset:t=2,unit:r=`rem`})=>{let[a,o]=i.useState(e??`bottom-left`),s=n({DEFAULT:`xs`,sm:`sm`,md:`md`,lg:`lg`,xl:`xl`,"2xl":`2xl`}),[c,l]=i.useState(typeof window<`u`?window.innerWidth:0);i.useEffect(()=>{if(typeof window>`u`)return;let e=()=>l(window.innerWidth);return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let u=s===`2xl`&&c>=1792?r===`rem`?`${(c/16).toFixed(1)}rem`:`${c}${r}`:s;return d(`button`,{type:`button`,onClick:()=>{o(v[(v.indexOf(a)+1)%v.length])},style:{position:`fixed`,zIndex:50,display:`grid`,height:`2.5rem`,minWidth:`2.5rem`,borderRadius:`30px`,placeContent:`center`,backgroundColor:`#2d3748`,fontFamily:`Courier New, Courier, monospace`,fontSize:`1rem`,color:`#ffffff`,border:`2px solid #4a5568`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`,padding:`0.5rem`,transition:`all 0.2s ease-in-out`,...{"bottom-left":{bottom:`${t}${r}`,left:`${t}${r}`},"bottom-right":{bottom:`${t}${r}`,right:`${t}${r}`},"top-right":{top:`${t}${r}`,right:`${t}${r}`},"top-left":{top:`${t}${r}`,left:`${t}${r}`}}[a]},children:u})};function b(){return r(()=>{let e=document.body;if(!e)return;let t=e=>{let t=getComputedStyle(e);if(t.overflow===`hidden`&&t.overflowY===`hidden`&&t.overflowX===`hidden`)return!1;let n=(t.overflowY===`auto`||t.overflowY===`scroll`)&&e.scrollHeight>e.clientHeight,r=(t.overflowX===`auto`||t.overflowX===`scroll`)&&e.scrollWidth>e.clientWidth;return n||r},n=e=>{t(e)?e.dataset.scrollable=`true`:delete e.dataset.scrollable},r=e=>{n(e);for(let t=0;t<e.children.length;t++){let n=e.children[t];r(n)}};`requestIdleCallback`in window?window.requestIdleCallback(()=>r(e)):setTimeout(()=>r(e),0);let i=new MutationObserver(e=>{for(let t of e)t.type===`childList`?t.addedNodes.forEach(e=>{e instanceof HTMLElement&&r(e)}):t.type===`attributes`&&t.target instanceof HTMLElement&&n(t.target)});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:[`style`,`class`]}),()=>i.disconnect()},[]),null}function x({delay:e=0,fallback:t=null,children:n}){let[r,i]=c(e===0?`mounted`:`pending`),o=s(null);return a(()=>{if(e!==0)return o.current=setTimeout(()=>i(`mounted`),e),()=>{o.current&&clearTimeout(o.current)}},[e]),r===`pending`?d(u,{children:t}):d(u,{children:n})}export{h as HtmlInjector,f as Iconify,g as MediaWrapper,x as MountAfter,_ as Portal,y as ResponsiveIndicator,y as TailwindIndicator,t as ScrollTracker,b as ScrollableMarker,m as WithClosest};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "7.3.1",
+  "version": "7.3.3",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",