@design-edito/tools 0.4.3 → 0.4.5

package/components/Image/index.js

@@ -1,41 +1,229 @@
-import {
-  Theatre
-} from "../../chunks/chunk-ZJNQRKEJ.js";
-import {
-  Disclaimer
-} from "../../chunks/chunk-XFB4PUXO.js";
-import {
-  image
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-
 // src/components/Image/index.tsx
 import {
-  useState,
+  useState as useState3,
   useMemo,
   useCallback
 } from "react";
+
+// src/agnostic/css/clss/index.ts
+function clss(blockNames, options) {
+  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
+  return (eltNames = null, modNames = []) => {
+    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
+    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
+      if (typeof modName === "string") return modName;
+      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
+      return trueModNames;
+    }).flat();
+    const outputClassesArr = [];
+    blockNamesArr.forEach((compName) => {
+      eltNamesArr.forEach((eltName) => {
+        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
+        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
+        outputClassesArr.push(targetPublicClss);
+        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
+        modNamesArr.forEach((modName) => {
+          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
+          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
+          outputClassesArr.push(targetModifiedPublicClss);
+          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+        });
+      });
+    });
+    return outputClassesArr.join(" ");
+  };
+}
+
+// src/components/Disclaimer/index.tsx
+import {
+  useState,
+  useEffect,
+  useRef
+} from "react";
+
+// src/components/utils/index.tsx
+function mergeClassNames(...names) {
+  return names.map((name) => {
+    if (typeof name !== "string" && !Array.isArray(name)) return false;
+    if (Array.isArray(name)) return mergeClassNames(...name);
+    if (name.trim() === "") return false;
+    return name.trim();
+  }).filter((name) => typeof name === "string").join(" ");
+}
+
+// src/components/public-classnames.ts
+var disclaimer = "dsed-disclaimer";
+var image = "dsed-image";
+var theatre = "dsed-theatre";
+
+// src/components/Disclaimer/index.tsx
 import cssModule from "./styles.module.css";
 import { jsx, jsxs } from "react/jsx-runtime";
+var Disclaimer = ({
+  content,
+  togglerContent,
+  isOn: isOnProp,
+  defaultIsOn: defaultIsOnProp,
+  stateHandlers,
+  actionHandlers,
+  children,
+  className
+}) => {
+  const [internalIsOn, setInternalIsOn] = useState(isOnProp ?? defaultIsOnProp ?? true);
+  const isOn = isOnProp ?? internalIsOn;
+  const pIsOn = useRef(isOn);
+  useEffect(() => {
+    if (pIsOn.current === isOn) return;
+    stateHandlers?.toggled?.(isOn);
+    pIsOn.current = isOn;
+  }, [isOn]);
+  const handleDismissClick = () => {
+    actionHandlers?.dismissClick?.(isOn);
+    if (isOnProp !== void 0) return;
+    setInternalIsOn(false);
+  };
+  const c = clss(disclaimer, { cssModule });
+  const rootClss = mergeClassNames(
+    c(null, {
+      on: isOn,
+      off: !isOn
+    }),
+    className
+  );
+  const panelClss = c("panel");
+  const contentClss = c("content");
+  const btnClss = c("toggler");
+  const sensitiveClss = c("sensitive");
+  return /* @__PURE__ */ jsxs("div", { className: rootClss, children: [
+    /* @__PURE__ */ jsxs("div", { className: panelClss, children: [
+      content !== void 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: contentClss,
+          children: content
+        }
+      ),
+      togglerContent !== void 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: btnClss,
+          onClick: handleDismissClick,
+          children: togglerContent
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: sensitiveClss, children })
+  ] });
+};
+
+// src/components/Theatre/index.tsx
+import {
+  useEffect as useEffect2,
+  useState as useState2,
+  useRef as useRef2
+} from "react";
+import cssModule2 from "./styles.module.css";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Theatre = ({
+  closeBtnContent,
+  openBtnContent,
+  isOn,
+  defaultIsOn,
+  exitOnEscape,
+  exitOnBgClick,
+  stateHandlers,
+  actionHandlers,
+  children,
+  className
+}) => {
+  const [internalIsOn, setInternalIsOn] = useState2(defaultIsOn ?? false);
+  const stageRef = useRef2(null);
+  const isTheatreOn = isOn ?? internalIsOn;
+  const prevIsTheatreOnRef = useRef2(isTheatreOn);
+  const handleCloseBtnClick = () => {
+    actionHandlers?.toggleClick?.(isTheatreOn);
+    if (isOn === void 0) setInternalIsOn(false);
+  };
+  const handleOpenBtnClick = () => {
+    actionHandlers?.toggleClick?.(isTheatreOn);
+    if (isOn === void 0) setInternalIsOn(true);
+  };
+  const handleStageBgClick = (e) => {
+    if (exitOnBgClick !== true) return;
+    if (e.target !== stageRef.current) return;
+    actionHandlers?.toggleClick?.(isTheatreOn);
+    if (isOn === void 0) setInternalIsOn(false);
+  };
+  useEffect2(() => {
+    if (prevIsTheatreOnRef.current !== isTheatreOn) {
+      stateHandlers?.toggled?.(isTheatreOn);
+      prevIsTheatreOnRef.current = isTheatreOn;
+    }
+  }, [isTheatreOn, stateHandlers]);
+  useEffect2(() => {
+    if (exitOnEscape === true || !isTheatreOn || isOn !== void 0) return;
+    const listener = (e) => {
+      if (e.key !== "Escape") return;
+      actionHandlers?.toggleClick?.(isTheatreOn);
+      setInternalIsOn(false);
+    };
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, [exitOnEscape, isTheatreOn, isOn]);
+  const c = clss(theatre, { cssModule: cssModule2 });
+  const rootClss = mergeClassNames(c(null, {
+    "on": isTheatreOn,
+    "off": !isTheatreOn
+  }), className);
+  const stageClass = c("stage");
+  const openBtnClass = c("open-btn");
+  const closeBtnClass = c("close-btn");
+  return /* @__PURE__ */ jsxs2("div", { className: rootClss, children: [
+    children,
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: stageClass,
+        onClick: handleStageBgClick,
+        ref: stageRef,
+        children: isTheatreOn && children
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: closeBtnClass,
+        onClick: handleCloseBtnClick,
+        children: closeBtnContent
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: openBtnClass,
+        onClick: handleOpenBtnClick,
+        children: openBtnContent
+      }
+    )
+  ] });
+};
+
+// src/components/Image/index.tsx
+import cssModule3 from "./styles.module.css";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var Image = ({
   sources,
-  disclaimer,
-  theatre,
+  disclaimer: disclaimer2,
+  theatre: theatre2,
   className,
   ...intrinsicImgAttributes
 }) => {
-  const [isDisclaimerOn, setIsDisclaimerOn] = useState(
-    disclaimer?.isOn === true || disclaimer?.defaultIsOn === true || disclaimer !== void 0 && disclaimer.defaultIsOn === void 0
+  const [isDisclaimerOn, setIsDisclaimerOn] = useState3(
+    disclaimer2?.isOn === true || disclaimer2?.defaultIsOn === true || disclaimer2 !== void 0 && disclaimer2.defaultIsOn === void 0
   );
   let shouldDisclaimerBeOn = isDisclaimerOn;
-  if (disclaimer?.isOn === true) shouldDisclaimerBeOn = true;
-  if (disclaimer?.isOn === false) shouldDisclaimerBeOn = false;
+  if (disclaimer2?.isOn === true) shouldDisclaimerBeOn = true;
+  if (disclaimer2?.isOn === false) shouldDisclaimerBeOn = false;
   const parsedSources = useMemo(() => {
     if (sources === void 0) return [];
     if (typeof sources === "string") return [{ srcSet: sources }];
@@ -47,17 +235,17 @@ var Image = ({
     return [];
   }, [sources]);
   const handleDisclaimerDismissClick = useCallback(() => {
-    disclaimer?.actionHandlers?.dismissClick?.(isDisclaimerOn);
+    disclaimer2?.actionHandlers?.dismissClick?.(isDisclaimerOn);
     setIsDisclaimerOn(false);
   }, []);
-  const c = clss(image, { cssModule });
+  const c = clss(image, { cssModule: cssModule3 });
   const rootClss = mergeClassNames(c(), className);
   const rootAttributes = {};
   const pictureClss = c("picture");
   const imgClss = c("image");
-  const sensitiveContent = /* @__PURE__ */ jsxs("picture", { className: pictureClss, children: [
+  const sensitiveContent = /* @__PURE__ */ jsxs3("picture", { className: pictureClss, children: [
     parsedSources.map(
-      (source, index) => /* @__PURE__ */ jsx(
+      (source, index) => /* @__PURE__ */ jsx3(
         "source",
         {
           srcSet: typeof source === "string" ? source : source.srcSet,
@@ -68,7 +256,7 @@ var Image = ({
         index
       )
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx3(
       "img",
       {
         className: imgClss,
@@ -76,24 +264,24 @@ var Image = ({
       }
     )
   ] });
-  const theatricalContent = theatre !== void 0 ? /* @__PURE__ */ jsx(
+  const theatricalContent = theatre2 !== void 0 ? /* @__PURE__ */ jsx3(
     Theatre,
     {
       defaultIsOn: false,
-      ...theatre,
+      ...theatre2,
       children: sensitiveContent
     }
   ) : sensitiveContent;
-  const disclaimedContent = disclaimer !== void 0 ? /* @__PURE__ */ jsx(
+  const disclaimedContent = disclaimer2 !== void 0 ? /* @__PURE__ */ jsx3(
     Disclaimer,
     {
-      ...disclaimer,
+      ...disclaimer2,
       isOn: shouldDisclaimerBeOn,
       actionHandlers: { dismissClick: handleDisclaimerDismissClick },
       children: theatricalContent
     }
   ) : theatricalContent;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "figure",
     {
       className: rootClss,

package/components/IntersectionObserver/index.js

@@ -1,10 +1,111 @@
+// src/components/IntersectionObserver/index.tsx
 import {
-  IntersectionObserverComponent
-} from "../../chunks/chunk-F2YJXIT7.js";
-import "../../chunks/chunk-IEZ3O5OF.js";
-import "../../chunks/chunk-TRFZSKNB.js";
-import "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+  useState,
+  useRef,
+  useEffect,
+  useCallback
+} from "react";
+
+// src/agnostic/css/clss/index.ts
+function clss(blockNames, options) {
+  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
+  return (eltNames = null, modNames = []) => {
+    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
+    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
+      if (typeof modName === "string") return modName;
+      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
+      return trueModNames;
+    }).flat();
+    const outputClassesArr = [];
+    blockNamesArr.forEach((compName) => {
+      eltNamesArr.forEach((eltName) => {
+        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
+        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
+        outputClassesArr.push(targetPublicClss);
+        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
+        modNamesArr.forEach((modName) => {
+          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
+          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
+          outputClassesArr.push(targetModifiedPublicClss);
+          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+        });
+      });
+    });
+    return outputClassesArr.join(" ");
+  };
+}
+
+// src/components/utils/index.tsx
+function mergeClassNames(...names) {
+  return names.map((name) => {
+    if (typeof name !== "string" && !Array.isArray(name)) return false;
+    if (Array.isArray(name)) return mergeClassNames(...name);
+    if (name.trim() === "") return false;
+    return name.trim();
+  }).filter((name) => typeof name === "string").join(" ");
+}
+
+// src/components/public-classnames.ts
+var intersectionObserver = "dsed-intersection-observer";
+
+// src/components/IntersectionObserver/index.tsx
+import cssModule from "./styles.module.css";
+import { jsx } from "react/jsx-runtime";
+var IntersectionObserverComponent = ({
+  onIntersected,
+  root,
+  rootMargin,
+  threshold,
+  className,
+  children
+}) => {
+  const [ioEntry, setIoEntry] = useState(null);
+  const rootRef = useRef(null);
+  const observerRef = useRef(null);
+  const observation = useCallback((entries, observer) => {
+    const thisEntry = entries[0];
+    if (thisEntry === void 0) return setIoEntry(null);
+    onIntersected?.({ ioEntry: thisEntry, observer });
+    setIoEntry(thisEntry);
+  }, [onIntersected]);
+  const forceObservation = useCallback(() => {
+    const rootEl = rootRef.current;
+    const observer = observerRef.current;
+    if (rootEl === null || observer === null) return;
+    observer.unobserve(rootEl);
+    observer.observe(rootEl);
+  }, []);
+  useEffect(() => {
+    const rootEl = rootRef.current;
+    if (rootEl === null) return console.warn("rootRef.current should not be null");
+    const observer = new IntersectionObserver(observation, { root, rootMargin, threshold });
+    observerRef.current = observer;
+    observer.observe(rootEl);
+    return () => observer.disconnect();
+  }, [root, rootMargin, threshold, observation]);
+  useEffect(() => {
+    const timeout1 = window.setTimeout(forceObservation, 100);
+    const timeout2 = window.setTimeout(forceObservation, 500);
+    return () => {
+      window.clearTimeout(timeout1);
+      window.clearTimeout(timeout2);
+    };
+  }, [forceObservation]);
+  const c = clss(intersectionObserver, { cssModule });
+  const isIntersecting = ioEntry?.isIntersecting ?? false;
+  const rootClss = mergeClassNames(
+    c(null, { "is-intersecting": isIntersecting }),
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: rootClss,
+      ref: rootRef,
+      children
+    }
+  );
+};
 export {
   IntersectionObserverComponent
 };

package/components/Overlayer/index.js

@@ -1,17 +1,54 @@
-import {
-  isFalsy
-} from "../../chunks/chunk-QXAJXTXV.js";
-import "../../chunks/chunk-HC6ZOHCS.js";
-import {
-  overlayer
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+// src/agnostic/css/clss/index.ts
+function clss(blockNames, options) {
+  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
+  return (eltNames = null, modNames = []) => {
+    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
+    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
+      if (typeof modName === "string") return modName;
+      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
+      return trueModNames;
+    }).flat();
+    const outputClassesArr = [];
+    blockNamesArr.forEach((compName) => {
+      eltNamesArr.forEach((eltName) => {
+        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
+        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
+        outputClassesArr.push(targetPublicClss);
+        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
+        modNamesArr.forEach((modName) => {
+          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
+          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
+          outputClassesArr.push(targetModifiedPublicClss);
+          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+        });
+      });
+    });
+    return outputClassesArr.join(" ");
+  };
+}
+
+// src/agnostic/misc/is-nullish/index.ts
+var nullishValues = [null, void 0];
+
+// src/agnostic/booleans/is-falsy/index.ts
+var falsyValues = [...nullishValues, false, "", 0, -0, NaN];
+if (typeof BigInt === "function") falsyValues.push(BigInt(0));
+function isFalsy(val) {
+  return falsyValues.includes(val);
+}
+
+// src/components/utils/index.tsx
+function mergeClassNames(...names) {
+  return names.map((name) => {
+    if (typeof name !== "string" && !Array.isArray(name)) return false;
+    if (Array.isArray(name)) return mergeClassNames(...name);
+    if (name.trim() === "") return false;
+    return name.trim();
+  }).filter((name) => typeof name === "string").join(" ");
+}
+
+// src/components/public-classnames.ts
+var overlayer = "dsed-overlayer";
 
 // src/components/Overlayer/index.tsx
 import cssModule from "./styles.module.css";

package/components/Paginator/index.js

@@ -1,10 +1,157 @@
+// src/components/Paginator/index.tsx
 import {
-  Paginator
-} from "../../chunks/chunk-AC4UMIWM.js";
-import "../../chunks/chunk-IEZ3O5OF.js";
-import "../../chunks/chunk-TRFZSKNB.js";
-import "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+  useEffect,
+  useRef,
+  Children,
+  useState
+} from "react";
+
+// src/agnostic/css/clss/index.ts
+function clss(blockNames, options) {
+  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
+  return (eltNames = null, modNames = []) => {
+    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
+    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
+      if (typeof modName === "string") return modName;
+      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
+      return trueModNames;
+    }).flat();
+    const outputClassesArr = [];
+    blockNamesArr.forEach((compName) => {
+      eltNamesArr.forEach((eltName) => {
+        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
+        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
+        outputClassesArr.push(targetPublicClss);
+        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
+        modNamesArr.forEach((modName) => {
+          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
+          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
+          outputClassesArr.push(targetModifiedPublicClss);
+          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+        });
+      });
+    });
+    return outputClassesArr.join(" ");
+  };
+}
+
+// src/components/utils/index.tsx
+function mergeClassNames(...names) {
+  return names.map((name) => {
+    if (typeof name !== "string" && !Array.isArray(name)) return false;
+    if (Array.isArray(name)) return mergeClassNames(...name);
+    if (name.trim() === "") return false;
+    return name.trim();
+  }).filter((name) => typeof name === "string").join(" ");
+}
+
+// src/components/public-classnames.ts
+var paginator = "dsed-paginator";
+
+// src/components/Paginator/index.tsx
+import cssModule from "./styles.module.css";
+import { jsx } from "react/jsx-runtime";
+var Paginator = ({
+  thresholdOffsetPercent,
+  stateHandlers,
+  className,
+  children
+}) => {
+  const [pagesState, setPagesState] = useState(/* @__PURE__ */ new Map());
+  const [directionState, setDirectionState] = useState(null);
+  const pagesRef = useRef(null);
+  const directionRef = useRef(null);
+  useEffect(() => {
+    stateHandlers?.pageChanged?.(Array.from(pagesState).map(([, state]) => state));
+  }, [pagesState]);
+  useEffect(() => {
+    stateHandlers?.directionChanged?.(directionState);
+  }, [directionState]);
+  useEffect(() => {
+    let lastCall = 0;
+    let lastScrollY = window.scrollY;
+    const handleScroll = (e) => {
+      const now = Date.now();
+      if (now - lastCall < 100) return;
+      lastCall = now;
+      const currentScrollY = window.scrollY;
+      const direction = currentScrollY > lastScrollY ? "forwards" : "backwards";
+      lastScrollY = currentScrollY;
+      if (direction !== directionRef.current) {
+        directionRef.current = direction;
+        setDirectionState(direction);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, []);
+  useEffect(() => {
+    if (pagesRef.current === null) return;
+    const pages = Array.from(pagesRef.current.children);
+    const observerRootMargin = `-${thresholdOffsetPercent ?? 0}% 0px -${100 - (thresholdOffsetPercent ?? 0)}% 0px`;
+    const observer = new IntersectionObserver((entries) => {
+      setPagesState((prevState) => {
+        const nextState = new Map(prevState);
+        entries.forEach((entry) => {
+          const index = pageIndexMap.get(entry.target);
+          if (index === void 0) return;
+          const prev = prevState.get(index);
+          const position = entry.isIntersecting ? "curr" : entry.boundingClientRect.bottom < (entry.rootBounds?.top ?? 0) ? "prev" : "next";
+          const currCount = position === "curr" && prev?.position !== "curr" ? (prev?.currCount ?? 0) + 1 : prev?.currCount ?? 0;
+          nextState.set(index, { position, currCount });
+        });
+        return nextState;
+      });
+    }, { rootMargin: observerRootMargin });
+    const pageIndexMap = /* @__PURE__ */ new Map();
+    pages.forEach((page, index) => {
+      pageIndexMap.set(page, index);
+      observer.observe(page);
+    });
+    return () => observer.disconnect();
+  }, [thresholdOffsetPercent, children]);
+  const c = clss(paginator, { cssModule });
+  const rootClss = mergeClassNames(
+    c(null, {
+      forwards: directionState === "forwards",
+      backwards: directionState === "backwards"
+    }),
+    className
+  );
+  const pagesClss = c("pages");
+  const childrenArr = Children.toArray(children);
+  return /* @__PURE__ */ jsx("div", { className: rootClss, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: pagesClss,
+      ref: pagesRef,
+      children: childrenArr.map((child, pos) => {
+        const state = pagesState.get(pos);
+        const pageClss = c("page", {
+          first: pos === 0,
+          last: pos === childrenArr.length - 1,
+          prev: state?.position === "prev",
+          curr: state?.position === "curr",
+          next: state?.position === "next"
+        });
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: pageClss,
+            "data-page": pos,
+            "data-curr-count": state?.currCount ?? 0,
+            children: child
+          },
+          pos
+        );
+      })
+    }
+  ) });
+};
 export {
   Paginator
 };