@design-edito/tools 0.3.9 → 0.3.11

package/components/Drawer/index.js

@@ -0,0 +1,82 @@
+// src/components/Drawer/index.tsx
+import {
+  useState,
+  useRef,
+  useEffect
+} from "react";
+import { clss } from "../../agnostic/css/clss/index.js";
+import { mergeClassNames } from "../utils/index.js";
+import { drawer as publicClassName } from "../public-classnames.js";
+import cssModule from "./styles.module.css";
+import {
+  ResizeObserverComponent
+} from "../ResizeObserver/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Drawer = ({
+  openerContent,
+  closerContent,
+  initialIsOpened = false,
+  isOpened: isOpenedProp,
+  stateHandlers,
+  className,
+  children
+}) => {
+  const [internalIsOpened, setInternalIsOpened] = useState(isOpenedProp ?? initialIsOpened);
+  const isOpened = isOpenedProp ?? internalIsOpened;
+  const pIsOpened = useRef(isOpened);
+  const [{ width, height }, setContentDimensions] = useState({});
+  useEffect(() => {
+    if (pIsOpened.current === isOpened) return;
+    pIsOpened.current = isOpened;
+    stateHandlers?.toggled?.(isOpened);
+  }, [isOpened]);
+  const handleOpenerClick = () => {
+    if (isOpenedProp !== void 0) return;
+    setInternalIsOpened(true);
+  };
+  const handleCloserClick = () => {
+    if (isOpenedProp !== void 0) return;
+    setInternalIsOpened(false);
+  };
+  const handleROCompResize = ({ entry }) => {
+    const { width: width2, height: height2 } = entry?.contentRect ?? {};
+    setContentDimensions({ width: width2, height: height2 });
+  };
+  const c = clss(publicClassName, { cssModule });
+  const rootClss = mergeClassNames(c(null, {
+    "opened": isOpened,
+    "closed": !isOpened
+  }), className);
+  const openerClss = c("opener");
+  const closerClss = c("closer");
+  const contentClss = c("content");
+  const dimensions = { width, height };
+  const customCssProps = Object.entries(dimensions).reduce((acc, [key, val]) => {
+    if (val === void 0) return acc;
+    return {
+      ...acc,
+      [`--${publicClassName}-content-${key}`]: `${val}`,
+      [`--${publicClassName}-content-${key}-px`]: `${val}px`
+    };
+  }, {});
+  const dataAttributes = Object.entries(dimensions).reduce((acc, [key, val]) => {
+    if (val === void 0) return acc;
+    return { ...acc, [`data-content-${key}`]: `${val}` };
+  }, {});
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: rootClss,
+      ...dataAttributes,
+      style: { ...customCssProps },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }),
+        /* @__PURE__ */ jsx("div", { className: closerClss, onClick: handleCloserClick, children: closerContent }),
+        /* @__PURE__ */ jsx("div", { className: contentClss, children: /* @__PURE__ */ jsx(ResizeObserverComponent, { onResized: handleROCompResize, children }) })
+      ]
+    }
+  );
+};
+export {
+  Drawer
+};

package/components/EventListener/index.d.ts

@@ -1,10 +1,27 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type FunctionComponent } from 'react';
+/**
+ * Props for the EventListenerComponent.
+ *
+ * @property className - Optional additional class name(s) applied to the root element.
+ * @property type - Event type or list of event types to listen to (e.g. "click", ["mouseenter", "focus"]).
+ * @property targetSelector - Optional CSS selector used to match descendant elements
+ * within the root element. If omitted, the listener is attached to the root element itself.
+ * @property onEvent - Callback invoked when one of the specified events is triggered.
+ * Receives the native DOM Event object.
+ * @property children - React children rendered inside the root element.
+ */
 export type Props = {
     className?: string;
     type?: string | string[];
     targetSelector?: string;
     onEvent?: (e: Event) => void;
-    content?: ReactNode;
     children?: ReactNode;
 };
-export declare const EventListenerComponent: ({ className, type, targetSelector, onEvent, content, children }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Component that attaches one or multiple DOM event listeners to its root element
+ * or to matching descendants.
+ * @param props - Component properties
+ * @see {@link Props}
+ * @returns A span element wrapping `children`, with configured event listeners.
+ */
+export declare const EventListenerComponent: FunctionComponent<Props>;

package/components/EventListener/index.js

@@ -4,16 +4,15 @@ import {
   useEffect
 } from "react";
 import { clss } from "../../agnostic/css/clss/index.js";
-import { isNotFalsy } from "../../agnostic/booleans/is-falsy/index.js";
-import { eventListener } from "../public-classnames.js";
+import { mergeClassNames } from "../utils/index.js";
+import { eventListener as publicClassName } from "../public-classnames.js";
 import cssModule from "./styles.module.css";
-import { jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var EventListenerComponent = ({
   className,
   type,
   targetSelector,
   onEvent,
-  content,
   children
 }) => {
   const rootRef = useRef(null);
@@ -22,25 +21,19 @@ var EventListenerComponent = ({
     if (onEvent === void 0 || type === void 0 || root === null) return;
     const typeArr = Array.isArray(type) ? type : [type];
     const elements = Array.from(targetSelector === void 0 ? [root] : root.querySelectorAll(targetSelector));
-    elements.forEach(
-      (elt) => typeArr.forEach((type2) => {
-        elt.addEventListener(type2, onEvent);
-      })
-    );
-    return () => {
-      elements.forEach(
-        (elt) => typeArr.forEach((type2) => {
-          elt.removeEventListener(type2, onEvent);
-        })
-      );
-    };
+    elements.forEach((e) => typeArr.forEach((t) => e.addEventListener(t, onEvent)));
+    return () => elements.forEach((e) => typeArr.forEach((t) => e.removeEventListener(t, onEvent)));
   }, [targetSelector, type, onEvent]);
-  const c = clss(eventListener, { cssModule });
-  const wrapperClassName = [c(null), className].filter(isNotFalsy).join(" ");
-  return /* @__PURE__ */ jsxs("span", { className: wrapperClassName, ref: rootRef, children: [
-    children,
-    content
-  ] });
+  const c = clss(publicClassName, { cssModule });
+  const rootClss = mergeClassNames(c(), className);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: rootClss,
+      ref: rootRef,
+      children
+    }
+  );
 };
 export {
   EventListenerComponent

package/components/Gallery/index.d.ts

@@ -0,0 +1,67 @@
+import { type FunctionComponent, type PropsWithChildren, type ReactNode } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the Gallery component.
+ *
+ * @property paddingLeft - Left padding applied to the first slot. Accepts a number (pixels) or any valid CSS length value.
+ * If not provided, falls back to `padding` or `0px`.
+ * @property paddingRight - Right padding applied to the last slot. Accepts a number (pixels) or any valid CSS length value.
+ * If not provided, falls back to `padding` or `0px`.
+ * @property padding - Shorthand horizontal padding applied to both ends when `paddingLeft` and/or `paddingRight`
+ * are not explicitly defined. Accepts a number (pixels) or any valid CSS length value.
+ * @property prevButtonContent - Content rendered inside the "previous" navigation control.
+ * Defaults to the string `"prev"` when not provided.
+ * @property nextButtonContent - Content rendered inside the "next" navigation control.
+ * Defaults to the string `"next"` when not provided.
+ * @property paginationContent - Content rendered inside each pagination item.
+ * Can be:
+ * - A ReactNode used for all pages,
+ * - A function receiving the page index and returning a ReactNode,
+ * - Undefined, in which case the page index is displayed.
+ * @property initActive - Optional. When uncontrolled mode, sets the default active slot at mount
+ * @property active - Optional controlled index. When provided, the active slot is driven by this
+ * value instead of internal scroll-derived state. When omitted, the component manages its own
+ * active index based on scroll position.
+ * @property noSnap - Optional, defines if scroll is free in side the scroller or not (defaults to false)
+ * @property stateHandlers - Callbacks called after the state changed
+ * @property stateHandlers.slotChanged - Called when the active slot changes due to scrolling. Receives the new active index.
+ * @property actionHandlers - Callbacks called after a user interaction
+ * @property actionHandlers.prevClick - Called when the "previous" control is clicked. Receives the current active index before navigation occurs.
+ * @property actionHandlers.nextClick - Called when the "next" control is clicked. Receives the current active index before navigation occurs.
+ * @property actionHandlers.paginationClick - Called when a pagination item is clicked. Receives the current active index and the target index.
+ * @property className - Optional additional class name(s) applied to the root element.
+ * @property children - Elements rendered as gallery slots. Each child is wrapped in a slot container.
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    paddingLeft?: string | number;
+    paddingRight?: string | number;
+    padding?: string | number;
+    prevButtonContent?: ReactNode;
+    nextButtonContent?: ReactNode;
+    paginationContent?: ReactNode | ((page: number) => ReactNode);
+    initActive?: number;
+    active?: number;
+    noSnap?: boolean;
+    stateHandlers?: {
+        slotChanged?: (activePos: number) => void;
+    };
+    actionHandlers?: {
+        prevClick?: (activePos: number) => void;
+        nextClick?: (activePos: number) => void;
+        paginationClick?: (activePos: number, targetPos: number) => void;
+    };
+}>>;
+/**
+ * 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 declare const Gallery: FunctionComponent<Props>;

package/components/Gallery/index.js

@@ -0,0 +1,173 @@
+// src/components/Gallery/index.tsx
+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";
+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);
+    };
+    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);
+    };
+  }, []);
+  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(publicClassName, { 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
+};

package/components/Gallery/styles.module.css

@@ -0,0 +1,33 @@
+.scroller {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  scrollbar-color: transparent transparent;
+}
+
+.scroller::-webkit-scrollbar {
+  display: none;
+  height: 0;
+}
+
+.scroller::-webkit-scrollbar-track,
+.scroller::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+.root.root--controlled .scroller {
+  overflow-x: hidden;
+}
+
+.root.root--no-snap .scroller {
+  scroll-snap-type: unset;
+  scroll-behavior: unset;
+}
+
+.slot {
+  scroll-snap-align: center;
+}

package/components/Gallery/utils.d.ts

@@ -0,0 +1 @@
+export declare const forceActivateSlot: (div: HTMLDivElement | null, targetPos: number, smooth?: boolean) => void;

package/components/Image/index.d.ts

@@ -0,0 +1,60 @@
+import { type FunctionComponent, type ImgHTMLAttributes } from 'react';
+import { type Props as DisclaimerProps } from '../Disclaimer/index.js';
+import { type Props as TheatreProps } from '../Theatre/index.js';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Describes a single responsive image source for use in a `<picture>` element.
+ *
+ * @property srcSet - One or more image URLs with optional width/density descriptors
+ * (e.g. `'img@2x.png 2x'`).
+ * @property type - MIME type hint for the source (e.g. `'image/webp'`).
+ * @property media - Media condition under which this source is selected
+ * (e.g. `'(max-width: 768px)'`).
+ * @property sizes - Sizes attribute forwarded to the `<source>` element.
+ */
+type SourceData = {
+    srcSet?: string;
+    type?: string;
+    media?: string;
+    sizes?: string;
+};
+/**
+ * Props for the {@link Image} component.
+ *
+ * Extends all native `ImgHTMLAttributes<HTMLImageElement>`, so any standard
+ * img attribute (`alt`, `loading`, `sizes`, `srcSet`, etc.) can be passed
+ * and will be forwarded to the underlying `<img>` element.
+ *
+ * @property sources - One or more responsive sources rendered as `<source>`
+ * elements inside a wrapping `<picture>`. Accepts:
+ * - a single srcSet string,
+ * - an array of srcSet strings,
+ * - an array of {@link SourceData} objects for full `<source>` control.
+ * @property disclaimer - Props forwarded to the internal {@link Disclaimer} component.
+ * While the disclaimer is active the `<img>` is hidden.
+ * @property theatre - Props forwarded to the internal {@link Theatre} component.
+ * @property className - Optional additional class name(s) applied to the root element.
+ */
+export type Props = WithClassName<{
+    sources?: string | string[] | SourceData[];
+    disclaimer?: DisclaimerProps;
+    theatre?: TheatreProps;
+}> & ImgHTMLAttributes<HTMLImageElement>;
+/**
+ * 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 declare const Image: FunctionComponent<Props>;
+export {};

package/components/Image/index.js

@@ -0,0 +1,99 @@
+// src/components/Image/index.tsx
+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";
+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(publicClassName, { 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
+};

package/components/IntersectionObserver/index.d.ts

@@ -1,20 +1,57 @@
-import { type ReactNode } from 'react';
+import { type PropsWithChildren, type FunctionComponent } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/** Alias for the native IntersectionObserver interface. */
 export type IO = IntersectionObserver;
+/** Alias for the native IntersectionObserverEntry interface. */
 export type IOE = IntersectionObserverEntry;
-type ObserverOptions = {
+/**
+ * Configuration options for the underlying IntersectionObserver instance.
+ *
+ * @property root - The element used as the viewport for checking visibility.
+ * If not provided, the browser viewport is used.
+ * @property rootMargin - Margin around the root, in CSS margin format
+ * (e.g. "10px 20px"). Expands or shrinks the effective root bounds.
+ * @property threshold - A single number or an array of numbers indicating
+ * at what percentage(s) of the target's visibility the observer callback
+ * should be executed.
+ */
+export type ObserverOptions = {
     root?: HTMLElement;
     rootMargin?: string;
     threshold?: number[] | number;
 };
-export type Props = {
-    className?: string;
-    render?: ReactNode;
-    onIntersection?: (details: {
+/**
+ * Props for the IntersectionObserverComponent.
+ *
+ * @property onIntersected - Callback invoked whenever an intersection change
+ * is reported. Receives an object containing the current
+ * {@link IntersectionObserverEntry} (if available) and the active
+ * {@link IntersectionObserver} instance.
+ *
+ * @property root - See {@link ObserverOptions.root}.
+ * @property rootMargin - See {@link ObserverOptions.rootMargin}.
+ * @property threshold - See {@link ObserverOptions.threshold}.
+ * @property className - Optional additional class name(s) applied to the root element.
+ * @property children - React children rendered inside the observed element.
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    onIntersected?: (details: {
         ioEntry?: IOE | undefined;
         observer: IO;
     }) => void;
-    content?: ReactNode;
-    children?: ReactNode;
-} & ObserverOptions;
-export declare const IntersectionObserverComponent: ({ className, render, content, onIntersection, root, rootMargin, threshold, children }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+} & ObserverOptions>>;
+/**
+ * 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 declare const IntersectionObserverComponent: FunctionComponent<Props>;