@design-edito/tools 0.4.4 → 0.4.6

package/components/Gallery/index.js

@@ -1,194 +1,150 @@
-import {
-  gallery
-} 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/Gallery/index.tsx
-import {
-  Children,
-  useEffect,
-  useState,
-  useRef
-} from "react";
-
-// src/components/Gallery/utils.ts
-var forceActivateSlot = (div, targetPos, smooth = true) => {
-  if (div === null) return;
-  const children = Array.from(div.children);
-  if (children[targetPos] === void 0) return;
-  const target = children[targetPos];
-  const halfClientWidth = div.clientWidth / 2;
-  const halfOffsetWidth = div.offsetWidth / 2;
-  const offset = target.offsetLeft - (halfClientWidth - halfOffsetWidth);
-  div.scrollTo({ left: offset, behavior: smooth ? "smooth" : "instant" });
-};
-
-// src/components/Gallery/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Gallery = ({
-  paddingLeft,
-  paddingRight,
-  padding,
-  prevButtonContent,
-  nextButtonContent,
-  paginationContent,
-  initActive,
-  active,
-  noSnap,
-  stateHandlers,
-  actionHandlers,
-  children,
-  className
-}) => {
-  const scrollerRef = useRef(null);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [canGoLeft, setCanGoLeft] = useState(false);
-  const [canGoRight, setCanGoRight] = useState(false);
-  const childrenCount = Children.count(children);
-  useEffect(() => {
-    stateHandlers?.slotChanged?.(activeIndex);
-  }, [activeIndex]);
-  const handlePrevClick = () => {
-    actionHandlers?.prevClick?.(activeIndex);
-    if (active === void 0) forceActivateSlot(scrollerRef.current, activeIndex - 1);
-  };
-  const handleNextClick = () => {
-    actionHandlers?.nextClick?.(activeIndex);
-    if (active === void 0) forceActivateSlot(scrollerRef.current, activeIndex + 1);
-  };
-  const handlePaginationClick = (pos) => {
-    actionHandlers?.paginationClick?.(activeIndex, pos);
-    if (active === void 0) forceActivateSlot(scrollerRef.current, pos);
-  };
-  useEffect(() => {
-    const scrollerElt = scrollerRef.current;
-    if (scrollerElt === null) return;
-    scrollerElt.scrollBy(-1, 0);
-    let animationFrame = null;
-    const update = () => {
-      animationFrame = null;
-      const { scrollLeft, clientWidth, scrollWidth } = scrollerElt;
-      const center = scrollLeft + clientWidth / 2;
-      const children2 = Array.from(scrollerElt.children);
-      let closestIndex = 0;
-      let closestDistance = Infinity;
-      children2.forEach((child, index) => {
-        const childCenter = child.offsetLeft + child.offsetWidth / 2;
-        const distance = Math.abs(center - childCenter);
-        if (distance < closestDistance) {
-          closestDistance = distance;
-          closestIndex = index;
-        }
-      });
-      setActiveIndex(closestIndex);
-      setCanGoLeft(scrollLeft > 0);
-      setCanGoRight(scrollLeft + clientWidth < scrollWidth);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useState, useRef } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { gallery as publicClassName } from '../public-classnames.js';
+import { forceActivateSlot } from './utils.js';
+import cssModule from './styles.module.css';
+/**
+ * Horizontally scrollable gallery component with navigation controls and pagination.
+ *
+ * Tracks the active slot based on scroll position and exposes state through CSS class names
+ * and a `data-active` attribute on the root element.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A container element wrapping:
+ * - A scrollable area containing each child in a slot wrapper,
+ * - Previous/next navigation controls,
+ * - Pagination controls allowing direct slot activation.
+ */
+export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent, nextButtonContent, paginationContent, initActive, active, noSnap, stateHandlers, actionHandlers, children, className }) => {
+    // State & refs
+    const scrollerRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [canGoLeft, setCanGoLeft] = useState(false);
+    const [canGoRight, setCanGoRight] = useState(false);
+    const childrenCount = Children.count(children);
+    // State change handlers
+    useEffect(() => {
+        stateHandlers?.slotChanged?.(activeIndex);
+    }, [activeIndex]);
+    // User actions handlers
+    const handlePrevClick = () => {
+        actionHandlers?.prevClick?.(activeIndex);
+        if (active === undefined)
+            forceActivateSlot(scrollerRef.current, activeIndex - 1);
     };
-    const onScroll = () => {
-      if (animationFrame !== null) return;
-      animationFrame = requestAnimationFrame(update);
+    const handleNextClick = () => {
+        actionHandlers?.nextClick?.(activeIndex);
+        if (active === undefined)
+            forceActivateSlot(scrollerRef.current, activeIndex + 1);
     };
-    scrollerElt.addEventListener("scroll", onScroll, { passive: true });
-    update();
-    return () => {
-      scrollerElt.removeEventListener("scroll", onScroll);
-      if (animationFrame !== null) cancelAnimationFrame(animationFrame);
+    const handlePaginationClick = (pos) => {
+        actionHandlers?.paginationClick?.(activeIndex, pos);
+        if (active === undefined)
+            forceActivateSlot(scrollerRef.current, pos);
     };
-  }, []);
-  useEffect(() => {
-    const toActivate = active ?? initActive;
-    if (toActivate === void 0) return;
-    const id = setTimeout(() => forceActivateSlot(scrollerRef.current, toActivate, false), 50);
-    return () => clearTimeout(id);
-  }, []);
-  useEffect(() => {
-    if (active === void 0) return;
-    forceActivateSlot(scrollerRef.current, active);
-  }, [active]);
-  const c = clss(gallery, { cssModule });
-  const rootClss = mergeClassNames(
-    c(null, {
-      "controlled": active !== void 0,
-      "no-snap": noSnap === true,
-      "at-first": activeIndex === 0,
-      "at-last": activeIndex === childrenCount - 1,
-      "can-go-left": canGoLeft,
-      "can-go-right": canGoRight
-    }),
-    className
-  );
-  const scrollerClss = c("scroller");
-  const actionsClss = c("actions");
-  const prevBtnClss = c("prev");
-  const nextBtnClss = c("next");
-  const paginationClss = c("pagination");
-  const dataAttributes = { "data-active": `${activeIndex}` };
-  const actualPaddingLeft = typeof paddingLeft === "number" ? `${paddingLeft}px` : typeof paddingLeft === "string" ? paddingLeft : typeof padding === "number" ? `${padding}px` : padding ?? "0px";
-  const actualPaddingRight = typeof paddingRight === "number" ? `${paddingRight}px` : typeof paddingRight === "string" ? paddingRight : typeof padding === "number" ? `${padding}px` : padding ?? "0px";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: rootClss,
-      ...dataAttributes,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: scrollerClss, ref: scrollerRef, children: Children.map(children, (child, pos) => {
-          const slotClss = c("slot", { active: pos === activeIndex });
-          const style = {
-            "margin-left": pos === 0 ? actualPaddingLeft : void 0,
-            "margin-right": pos === Children.count(children) - 1 ? actualPaddingRight : void 0
-          };
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${slotClss}`,
-              style: { ...style },
-              "data-slot": pos,
-              children: child
-            },
-            pos
-          );
-        }) }),
-        /* @__PURE__ */ jsxs("div", { className: actionsClss, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: prevBtnClss,
-              onClick: handlePrevClick,
-              children: prevButtonContent ?? "prev"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: nextBtnClss,
-              onClick: handleNextClick,
-              children: nextButtonContent ?? "next"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: paginationClss, children: Children.map(children, (_, pos) => {
-          const pageClss = c("page", { active: pos === activeIndex });
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: pageClss,
-              "data-page": pos,
-              onClick: () => handlePaginationClick(pos),
-              children: typeof paginationContent === "string" ? paginationContent : typeof paginationContent === "function" ? paginationContent(pos) : pos
-            }
-          );
-        }) })
-      ]
-    }
-  );
-};
-export {
-  Gallery
+    // Scroll position calculation
+    useEffect(() => {
+        const scrollerElt = scrollerRef.current;
+        if (scrollerElt === null)
+            return;
+        scrollerElt.scrollBy(-1, 0);
+        let animationFrame = null;
+        const update = () => {
+            animationFrame = null;
+            const { scrollLeft, clientWidth, scrollWidth } = scrollerElt;
+            const center = scrollLeft + clientWidth / 2;
+            const children = Array.from(scrollerElt.children);
+            let closestIndex = 0;
+            let closestDistance = Infinity;
+            children.forEach((child, index) => {
+                const childCenter = child.offsetLeft + child.offsetWidth / 2;
+                const distance = Math.abs(center - childCenter);
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestIndex = index;
+                }
+            });
+            setActiveIndex(closestIndex);
+            setCanGoLeft(scrollLeft > 0);
+            setCanGoRight(scrollLeft + clientWidth < scrollWidth);
+        };
+        const onScroll = () => {
+            if (animationFrame !== null)
+                return;
+            animationFrame = requestAnimationFrame(update);
+        };
+        scrollerElt.addEventListener('scroll', onScroll, { passive: true });
+        update();
+        return () => {
+            scrollerElt.removeEventListener('scroll', onScroll);
+            if (animationFrame !== null)
+                cancelAnimationFrame(animationFrame);
+        };
+    }, []);
+    // Sync scroll position to 'active' prop at mount time
+    useEffect(() => {
+        const toActivate = active ?? initActive;
+        if (toActivate === undefined)
+            return;
+        const id = setTimeout(() => forceActivateSlot(scrollerRef.current, toActivate, false), 50);
+        return () => clearTimeout(id);
+    }, []);
+    // Sync scroll position to 'active' prop
+    useEffect(() => {
+        if (active === undefined)
+            return;
+        forceActivateSlot(scrollerRef.current, active);
+    }, [active]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        'controlled': active !== undefined,
+        'no-snap': noSnap === true,
+        'at-first': activeIndex === 0,
+        'at-last': activeIndex === childrenCount - 1,
+        'can-go-left': canGoLeft,
+        'can-go-right': canGoRight
+    }), className);
+    const scrollerClss = c('scroller');
+    const actionsClss = c('actions');
+    const prevBtnClss = c('prev');
+    const nextBtnClss = c('next');
+    const paginationClss = c('pagination');
+    const dataAttributes = { 'data-active': `${activeIndex}` };
+    const actualPaddingLeft = typeof paddingLeft === 'number'
+        ? `${paddingLeft}px`
+        : typeof paddingLeft === 'string'
+            ? paddingLeft
+            : typeof padding === 'number'
+                ? `${padding}px`
+                : padding ?? '0px';
+    const actualPaddingRight = typeof paddingRight === 'number'
+        ? `${paddingRight}px`
+        : typeof paddingRight === 'string'
+            ? paddingRight
+            : typeof padding === 'number'
+                ? `${padding}px`
+                : padding ?? '0px';
+    return _jsxs("div", { className: rootClss, ...dataAttributes, children: [_jsx("div", { className: scrollerClss, ref: scrollerRef, children: Children.map(children, (child, pos) => {
+                    const slotClss = c('slot', { active: pos === activeIndex });
+                    const style = {
+                        'margin-left': pos === 0
+                            ? actualPaddingLeft
+                            : undefined,
+                        'margin-right': pos === Children.count(children) - 1
+                            ? actualPaddingRight
+                            : undefined
+                    };
+                    return _jsx("div", { className: `${slotClss}`, style: { ...style }, "data-slot": pos, children: child }, pos);
+                }) }), _jsxs("div", { className: actionsClss, children: [_jsx("div", { className: prevBtnClss, onClick: handlePrevClick, children: prevButtonContent ?? 'prev' }), _jsx("div", { className: nextBtnClss, onClick: handleNextClick, children: nextButtonContent ?? 'next' })] }), _jsx("div", { className: paginationClss, children: Children.map(children, (_, pos) => {
+                    const pageClss = c('page', { active: pos === activeIndex });
+                    return _jsx("div", { className: pageClss, "data-page": pos, onClick: () => handlePaginationClick(pos), children: typeof paginationContent === 'string'
+                            ? paginationContent
+                            : typeof paginationContent === 'function'
+                                ? paginationContent(pos)
+                                : pos });
+                }) })] });
 };

package/components/Gallery/utils.js

@@ -0,0 +1,12 @@
+export const forceActivateSlot = (div, targetPos, smooth = true) => {
+    if (div === null)
+        return;
+    const children = Array.from(div.children);
+    if (children[targetPos] === undefined)
+        return;
+    const target = children[targetPos];
+    const halfClientWidth = div.clientWidth / 2;
+    const halfOffsetWidth = div.offsetWidth / 2;
+    const offset = target.offsetLeft - (halfClientWidth - halfOffsetWidth);
+    div.scrollTo({ left: offset, behavior: smooth ? 'smooth' : 'instant' });
+};

package/components/Image/index.js

@@ -1,107 +1,68 @@
-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,
-  useMemo,
-  useCallback
-} from "react";
-import cssModule from "./styles.module.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Image = ({
-  sources,
-  disclaimer,
-  theatre,
-  className,
-  ...intrinsicImgAttributes
-}) => {
-  const [isDisclaimerOn, setIsDisclaimerOn] = useState(
-    disclaimer?.isOn === true || disclaimer?.defaultIsOn === true || disclaimer !== void 0 && disclaimer.defaultIsOn === void 0
-  );
-  let shouldDisclaimerBeOn = isDisclaimerOn;
-  if (disclaimer?.isOn === true) shouldDisclaimerBeOn = true;
-  if (disclaimer?.isOn === false) shouldDisclaimerBeOn = false;
-  const parsedSources = useMemo(() => {
-    if (sources === void 0) return [];
-    if (typeof sources === "string") return [{ srcSet: sources }];
-    if (Array.isArray(sources)) {
-      if (sources.length === 0) return [];
-      if (typeof sources[0] === "string") return sources.map((srcSet) => ({ srcSet }));
-      return sources;
-    }
-    return [];
-  }, [sources]);
-  const handleDisclaimerDismissClick = useCallback(() => {
-    disclaimer?.actionHandlers?.dismissClick?.(isDisclaimerOn);
-    setIsDisclaimerOn(false);
-  }, []);
-  const c = clss(image, { cssModule });
-  const rootClss = mergeClassNames(c(), className);
-  const rootAttributes = {};
-  const pictureClss = c("picture");
-  const imgClss = c("image");
-  const sensitiveContent = /* @__PURE__ */ jsxs("picture", { className: pictureClss, children: [
-    parsedSources.map(
-      (source, index) => /* @__PURE__ */ jsx(
-        "source",
-        {
-          srcSet: typeof source === "string" ? source : source.srcSet,
-          type: typeof source === "string" ? void 0 : source.type,
-          media: typeof source === "string" ? void 0 : source.media,
-          sizes: typeof source === "string" ? void 0 : source.sizes
-        },
-        index
-      )
-    ),
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        className: imgClss,
-        ...intrinsicImgAttributes
-      }
-    )
-  ] });
-  const theatricalContent = theatre !== void 0 ? /* @__PURE__ */ jsx(
-    Theatre,
-    {
-      defaultIsOn: false,
-      ...theatre,
-      children: sensitiveContent
-    }
-  ) : sensitiveContent;
-  const disclaimedContent = disclaimer !== void 0 ? /* @__PURE__ */ jsx(
-    Disclaimer,
-    {
-      ...disclaimer,
-      isOn: shouldDisclaimerBeOn,
-      actionHandlers: { dismissClick: handleDisclaimerDismissClick },
-      children: theatricalContent
-    }
-  ) : theatricalContent;
-  return /* @__PURE__ */ jsx(
-    "figure",
-    {
-      className: rootClss,
-      ...rootAttributes,
-      children: disclaimedContent
-    }
-  );
-};
-export {
-  Image
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { Disclaimer } from '../Disclaimer/index.js';
+import { Theatre } from '../Theatre/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { image as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Image component. Wraps a native `<img>` (or `<picture>`) element with
+ * optional responsive sources, an optional disclaimer gate, and
+ * viewport-driven visibility tracking.
+ *
+ *
+ * ### Child elements
+ * - `__picture` — wrapping `<picture>` element, always rendered. Contains the
+ * `<source>` elements (if any) and the `<img>`.
+ * - `__img` — the native `<img>` element.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A `<figure>` element containing a `<picture>` with the image,
+ * and an optional disclaimer overlay.
+ */
+export const Image = ({ sources, disclaimer, theatre, className, ...intrinsicImgAttributes }) => {
+    // State
+    const [isDisclaimerOn, setIsDisclaimerOn] = useState(disclaimer?.isOn === true
+        || disclaimer?.defaultIsOn === true
+        || (disclaimer !== undefined && disclaimer.defaultIsOn === undefined));
+    let shouldDisclaimerBeOn = isDisclaimerOn;
+    if (disclaimer?.isOn === true)
+        shouldDisclaimerBeOn = true;
+    if (disclaimer?.isOn === false)
+        shouldDisclaimerBeOn = false;
+    const parsedSources = useMemo(() => {
+        if (sources === undefined)
+            return [];
+        if (typeof sources === 'string')
+            return [{ srcSet: sources }];
+        if (Array.isArray(sources)) {
+            if (sources.length === 0)
+                return [];
+            if (typeof sources[0] === 'string')
+                return sources.map(srcSet => ({ srcSet }));
+            return sources;
+        }
+        return [];
+    }, [sources]);
+    // User actions handlers
+    const handleDisclaimerDismissClick = useCallback(() => {
+        disclaimer?.actionHandlers?.dismissClick?.(isDisclaimerOn);
+        setIsDisclaimerOn(false);
+    }, []);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    const rootAttributes = {};
+    const pictureClss = c('picture');
+    const imgClss = c('image');
+    const sensitiveContent = _jsxs("picture", { className: pictureClss, children: [parsedSources.map((source, index) => _jsx("source", { srcSet: typeof source === 'string' ? source : source.srcSet, type: typeof source === 'string' ? undefined : source.type, media: typeof source === 'string' ? undefined : source.media, sizes: typeof source === 'string' ? undefined : source.sizes }, index)), _jsx("img", { className: imgClss, ...intrinsicImgAttributes })] });
+    const theatricalContent = theatre !== undefined
+        ? _jsx(Theatre, { defaultIsOn: false, ...theatre, children: sensitiveContent })
+        : sensitiveContent;
+    const disclaimedContent = disclaimer !== undefined
+        ? _jsx(Disclaimer, { ...disclaimer, isOn: shouldDisclaimerBeOn, actionHandlers: { dismissClick: handleDisclaimerDismissClick }, children: theatricalContent })
+        : theatricalContent;
+    return _jsx("figure", { className: rootClss, ...rootAttributes, children: disclaimedContent });
 };

package/components/IntersectionObserver/index.js

@@ -1,10 +1,63 @@
-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";
-export {
-  IntersectionObserverComponent
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { intersectionObserver as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Component that observes its root element using the IntersectionObserver API
+ * and notifies consumers about visibility changes.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @returns A div element wrapping `children`, observed for intersection changes.
+ *
+ * @remarks
+ * - Automatically creates and disconnects the {@link IntersectionObserver} instance.
+ * - Re-observes the element shortly after mount to handle late layout changes.
+ * - Adds an `is-intersecting` modifier class when the element is intersecting.
+ */
+export const IntersectionObserverComponent = ({ onIntersected, root, rootMargin, threshold, className, children }) => {
+    // Refs, handlers and effects
+    const [ioEntry, setIoEntry] = useState(null);
+    const rootRef = useRef(null);
+    const observerRef = useRef(null);
+    const observation = useCallback((entries, observer) => {
+        const thisEntry = entries[0];
+        if (thisEntry === undefined)
+            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]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const isIntersecting = ioEntry?.isIntersecting ?? false;
+    const rootClss = mergeClassNames(c(null, { 'is-intersecting': isIntersecting }), className);
+    return _jsx("div", { className: rootClss, ref: rootRef, children: children });
 };