@design-edito/tools 0.4.4 → 0.4.6

package/components/Overlayer/index.js

@@ -1,67 +1,60 @@
-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/components/Overlayer/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Overlayer = ({
-  overlays,
-  children,
-  className
-}) => {
-  const c = clss(overlayer, { cssModule });
-  const rootClss = mergeClassNames(c(), className);
-  const baseClss = c("base");
-  return /* @__PURE__ */ jsxs("div", { className: rootClss, children: [
-    /* @__PURE__ */ jsx("div", { className: baseClss, children }),
-    overlays?.map(({
-      content,
-      xPercent = 0,
-      yPercent = 0,
-      justify
-    }) => {
-      const overlayClss = c("overlay");
-      let computedTranslateX;
-      if (typeof justify === "number") {
-        computedTranslateX = `-${justify}%`;
-      } else if (justify === "center") {
-        computedTranslateX = "-50%";
-      } else if (justify === "left") {
-        computedTranslateX = "0%";
-      } else if (justify === "right") {
-        computedTranslateX = "-100%";
-      } else {
-        computedTranslateX = "-50%";
-      }
-      const overlayCustomProps = {
-        "--PRIVATE-left": `${xPercent}%`,
-        "--PRIVATE-top": `${yPercent}%`,
-        "--PRIVATE-translate-x": computedTranslateX
-      };
-      if (isFalsy(content)) return null;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: overlayClss,
-          style: overlayCustomProps,
-          children: content
-        }
-      );
-    })
-  ] });
-};
-export {
-  Overlayer
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isFalsy } from '../../agnostic/booleans/is-falsy/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { overlayer as publicClassname } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Absolute positioning overlay component. Renders a base content layer and
+ * stacks one or more overlays on top of it, each independently positioned via
+ * percentage coordinates and a justify alignment.
+ *
+ * ### Child elements
+ * - `__base` — wrapping `<div>` that contains `children`.
+ * - `__overlay` — one `<div>` per entry in `overlays` (falsy `content` entries
+ * are omitted).
+ *
+ * ### CSS custom properties on each overlay element
+ * - `--PRIVATE-left` — derived from `xPercent` (e.g. `42%`). Used internally
+ * to set the horizontal anchor position.
+ * - `--PRIVATE-top` — derived from `yPercent` (e.g. `10%`). Used internally
+ * to set the vertical anchor position.
+ * - `--PRIVATE-translate-x` — derived from `justify`. Used internally to shift
+ * the overlay relative to its anchor.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` containing the base layer and all positioned overlay elements.
+ */
+export const Overlayer = ({ overlays, children, className }) => {
+    const c = clss(publicClassname, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    const baseClss = c('base');
+    return _jsxs("div", { className: rootClss, children: [_jsx("div", { className: baseClss, children: children }), overlays?.map(({ content, xPercent = 0, yPercent = 0, justify }) => {
+                const overlayClss = c('overlay');
+                let computedTranslateX;
+                if (typeof justify === 'number') {
+                    computedTranslateX = `-${justify}%`;
+                }
+                else if (justify === 'center') {
+                    computedTranslateX = '-50%';
+                }
+                else if (justify === 'left') {
+                    computedTranslateX = '0%';
+                }
+                else if (justify === 'right') {
+                    computedTranslateX = '-100%';
+                }
+                else {
+                    computedTranslateX = '-50%';
+                }
+                const overlayCustomProps = {
+                    '--PRIVATE-left': `${xPercent}%`,
+                    '--PRIVATE-top': `${yPercent}%`,
+                    '--PRIVATE-translate-x': computedTranslateX
+                };
+                if (isFalsy(content))
+                    return null;
+                return _jsx("div", { className: overlayClss, style: overlayCustomProps, children: content });
+            })] });
 };

package/components/Paginator/index.js

@@ -1,10 +1,126 @@
-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";
-export {
-  Paginator
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, Children, useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { paginator as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * A scroll-driven pagination component that tracks which child page is currently
+ * visible in the viewport and the direction of scroll.
+ *
+ * Each direct child is wrapped in a page slot and observed via
+ * {@link IntersectionObserver}. Page slots receive `'prev'`, `'curr'`, or `'next'`
+ * positional modifier classes based on their visibility.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @returns A root div containing a pages wrapper, with each child isolated in
+ * its own observed page slot div.
+ *
+ * @remarks
+ * - Scroll direction is throttled to one update per 100ms and only dispatched
+ *   when the direction actually changes, using an internal ref to avoid stale
+ *   closure comparisons.
+ * - Page visibility is tracked via a single {@link IntersectionObserver} instance
+ *   that is recreated when `thresholdOffsetPercent` or `children` change.
+ * - `currCount` on each {@link PageState} increments each time a page transitions
+ *   into the `'curr'` position, making it useful as a re-entry counter.
+ */
+export const Paginator = ({ thresholdOffsetPercent, stateHandlers, className, children }) => {
+    // State, refs, effects
+    const [pagesState, setPagesState] = useState(new Map());
+    const [directionState, setDirectionState] = useState(null);
+    const pagesRef = useRef(null);
+    const directionRef = useRef(null);
+    // State change handlers
+    useEffect(() => {
+        stateHandlers?.pageChanged?.(Array
+            .from(pagesState)
+            .map(([, state]) => state));
+    }, [pagesState]);
+    useEffect(() => {
+        stateHandlers?.directionChanged?.(directionState);
+    }, [directionState]);
+    // Catch scroll direction listening on scroll events
+    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);
+        };
+    }, []);
+    // Detect active pages with Intersection Observer
+    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 === undefined)
+                        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 = new Map();
+        pages.forEach((page, index) => {
+            pageIndexMap.set(page, index);
+            observer.observe(page);
+        });
+        return () => observer.disconnect();
+    }, [thresholdOffsetPercent, children]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        forwards: directionState === 'forwards',
+        backwards: directionState === 'backwards'
+    }), className);
+    const pagesClss = c('pages');
+    const childrenArr = Children.toArray(children);
+    return _jsx("div", { className: rootClss, children: _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 _jsx("div", { className: pageClss, "data-page": pos, "data-curr-count": state?.currCount ?? 0, children: child }, pos);
+            }) }) });
 };

package/components/ResizeObserver/index.js

@@ -1,10 +1,69 @@
-import {
-  ResizeObserverComponent
-} from "../../chunks/chunk-GG4EFNMU.js";
-import "../../chunks/chunk-IEZ3O5OF.js";
-import "../../chunks/chunk-TRFZSKNB.js";
-import "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-export {
-  ResizeObserverComponent
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { resizeObserver as publicClassName } from '../public-classnames.js';
+import cssModule from './style.module.css';
+/**
+ * Component that observes its own size changes and exposes the dimensions.
+ * Updates are exposed both via data attributes (e.g., `data-width`) and CSS custom properties
+ * (e.g., `--<prefix>-width`, `--<prefix>-width-px`) for styling or scripting purposes.
+ * @param props - Component properties
+ * @see {@link Props}
+ * @returns A div wrapping `children`, with resize observation applied.
+ */
+export const ResizeObserverComponent = ({ className, onResized, children }) => {
+    // Refs, effects & handlers
+    const [roEntry, setRoEntry] = useState();
+    const rootRef = useRef(null);
+    const observerRef = useRef(null);
+    const createObserver = () => {
+        const root = rootRef.current;
+        observerRef.current?.disconnect();
+        if (root === null)
+            return;
+        observerRef.current = new ResizeObserver(entries => {
+            const firstEntry = entries[0];
+            if (firstEntry !== undefined) {
+                const boundingClientRect = firstEntry.target.getBoundingClientRect();
+                const fullEntry = {
+                    entry: firstEntry,
+                    boundingClientRect
+                };
+                setRoEntry(fullEntry);
+                if (onResized === undefined)
+                    return;
+                onResized(fullEntry);
+            }
+        });
+        observerRef.current.observe(root);
+    };
+    useEffect(() => {
+        createObserver();
+        return () => observerRef.current?.disconnect();
+    }, [onResized]);
+    // Data attributes, CSS custom props & Rendering
+    const { x, y, top, left, bottom, right, width, height } = roEntry?.entry.contentRect ?? {};
+    const contentRect = { x, y, top, left, bottom, right, width, height };
+    const dataAttributes = Object
+        .entries(contentRect)
+        .reduce((acc, [key, val]) => {
+        if (val === undefined)
+            return acc;
+        return { ...acc, [`data-${key}`]: val.toString() };
+    }, {});
+    const cssCustomProps = Object
+        .entries(contentRect)
+        .reduce((acc, [key, val]) => {
+        if (val === undefined)
+            return acc;
+        return {
+            ...acc,
+            [`--${publicClassName}-${key}`]: val.toString(),
+            [`--${publicClassName}-${key}-px`]: `${val.toString()}px`
+        };
+    }, {});
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null), className);
+    return _jsx("div", { ...dataAttributes, className: rootClss, ref: rootRef, style: { ...cssCustomProps }, children: children });
 };