@design-edito/tools 0.4.4 → 0.4.6

package/components/BeforeAfter/index.js

@@ -1,153 +1,55 @@
-import {
-  clamp
-} from "../../chunks/chunk-OSAXBA7G.js";
-import {
-  beforeAfter
-} 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/BeforeAfter/index.tsx
-import {
-  useState,
-  useCallback as useCallback2,
-  useEffect
-} from "react";
-
-// src/components/BeforeAfter/index.controlled.tsx
-import {
-  useCallback,
-  useRef
-} from "react";
-import cssModule from "./styles.module.css";
-
-// src/components/BeforeAfter/utils.ts
-function getRelativePointerCoordinates(event, element) {
-  if (element === null) {
-    return { x: 0, y: 0 };
-  }
-  const rect = element.getBoundingClientRect();
-  const x = event.clientX - rect.left;
-  const y = event.clientY - rect.top;
-  return { x, y };
-}
-
-// src/components/BeforeAfter/index.controlled.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var BeforeAfterControlled = ({
-  beforeContent,
-  afterContent,
-  className,
-  ratio,
-  actionHandlers,
-  _modifiers,
-  ...intrisicDivHTMLAttributes
-}) => {
-  const isPointerDown = useRef(false);
-  const onPointerUpRef = useRef(null);
-  const onPointerMoveRef = useRef(null);
-  const rootRef = useRef(null);
-  const handleOnPointer = useCallback((event) => {
-    if (actionHandlers?.pointer === void 0 || rootRef.current === null) return;
-    const { x, y } = getRelativePointerCoordinates(event, rootRef.current);
-    const ratioX = clamp(x / rootRef.current.clientWidth, 0, 1);
-    const ratioY = clamp(y / rootRef.current.clientHeight, 0, 1);
-    actionHandlers?.pointer?.(event, ratioX, ratioY, ratio ?? null, rootRef.current);
-  }, [actionHandlers?.pointer, ratio]);
-  const removePointerListeners = useCallback(() => {
-    if (onPointerUpRef.current !== null) {
-      document.removeEventListener("pointerup", onPointerUpRef.current);
-    }
-    if (onPointerMoveRef.current !== null) {
-      document.removeEventListener("pointermove", onPointerMoveRef.current);
-    }
-    onPointerUpRef.current = null;
-    onPointerMoveRef.current = null;
-  }, []);
-  const onPointerMove = useCallback((event) => {
-    if (!isPointerDown.current) {
-      return;
-    }
-    handleOnPointer(event);
-  }, [handleOnPointer]);
-  const onPointerUp = useCallback((event) => {
-    isPointerDown.current = false;
-    removePointerListeners();
-  }, [removePointerListeners]);
-  const onPointerDown = useCallback((event) => {
-    removePointerListeners();
-    isPointerDown.current = true;
-    handleOnPointer(event.nativeEvent);
-    onPointerUpRef.current = onPointerUp;
-    onPointerMoveRef.current = onPointerMove;
-    document.addEventListener("pointermove", onPointerMoveRef.current);
-    document.addEventListener("pointerup", onPointerUpRef.current);
-  }, [handleOnPointer, onPointerUp, onPointerMove, removePointerListeners]);
-  const outputRatio = ratio !== void 0 ? Math.max(0, Math.min(1, ratio)) : 0;
-  const rootStyles = {
-    [`--${beforeAfter}-ratio`]: outputRatio.toFixed(8),
-    [`--${beforeAfter}-ratio-percent`]: `${(outputRatio * 100).toString()}%`
-  };
-  const c = clss(beforeAfter, { cssModule });
-  const rootClss = mergeClassNames(c(null, _modifiers), className);
-  const rootAttributes = {
-    "data-ratio": ratio
-  };
-  const beforeClass = c("before");
-  const afterClass = c("after");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: rootClss,
-      style: rootStyles,
-      onPointerDown,
-      ref: rootRef,
-      ...rootAttributes,
-      ...intrisicDivHTMLAttributes,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: beforeClass, children: beforeContent }),
-        /* @__PURE__ */ jsx("div", { className: afterClass, children: afterContent })
-      ]
-    }
-  );
-};
-
-// src/components/BeforeAfter/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var BeforeAfter = ({
-  direction,
-  defaultRatio,
-  stateHandlers,
-  ...controlledProps
-}) => {
-  const { actionHandlers, ratio } = controlledProps;
-  const [internalRatio, setInternalRatio] = useState(ratio ?? defaultRatio ?? 0);
-  const handlePointer = useCallback2((e, targetHRatio, targetVRatio, ratio2, element) => {
-    if (direction === "vertical") setInternalRatio(targetVRatio);
-    else setInternalRatio(targetHRatio);
-    actionHandlers?.pointer?.(e, targetHRatio, targetVRatio, ratio2, element);
-  }, [direction, actionHandlers?.pointer]);
-  useEffect(() => {
-    stateHandlers?.ratio?.(internalRatio);
-  }, [internalRatio, stateHandlers?.ratio]);
-  return /* @__PURE__ */ jsx2(
-    BeforeAfterControlled,
-    {
-      ...controlledProps,
-      _modifiers: {
-        horizontal: direction !== "vertical",
-        vertical: direction === "vertical"
-      },
-      ratio: ratio ?? internalRatio,
-      actionHandlers: { pointer: handlePointer }
-    }
-  );
-};
-export {
-  BeforeAfter
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { BeforeAfterControlled } from './index.controlled.js';
+/**
+ * Props for the {@link BeforeAfter} component.
+ *
+ * Extends {@link ControlledProps} with uncontrolled ratio and direction management.
+ *
+ * @property defaultRatio - Initial ratio value (0 to 1). Used if `ratio` is not provided. Defaults to `0`.
+ * @property direction - Slider orientation: `'horizontal'` (default) or `'vertical'`. If horizontal, the ratio is calced as the horizontal pointer position over the element width. If vertical, it's the vertical pointer position over the element height.
+ * @property stateHandlers - Optional callbacks invoked when derived state changes:
+ *   - `ratio` — called with the new ratio whenever it changes.
+ *
+ * @see {@link ControlledProps}
+ */
+/**
+ * Uncontrolled, self-updating before/after slider component. Drives a
+ * {@link BeforeAfterControlled} instance with internal ratio state and direction,
+ * supporting both controlled and uncontrolled usage.
+ *
+ * Supports mixed controlled/uncontrolled usage: passing `ratio` disables internal ratio state,
+ * but still allows direction and stateHandlers to be used. Passing `defaultRatio` sets the initial ratio.
+ *
+ * ### Forwarded modifiers to {@link BeforeAfterControlled}
+ * The following `_modifiers` are computed and injected automatically:
+ * - `horizontal` — `true`.
+ * - `vertical` — `true`.
+ *
+ * ### Forwarded CSS custom properties to {@link BeforeAfterControlled}
+ * - `--before-after-ratio` — the current ratio value (0 to 1, fixed to 8 decimals).
+ * - `--before-after-ratio-percent` — the current ratio as a percentage (0 to 100).
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @see {@link BeforeAfterControlled}
+ * @returns A {@link BeforeAfterControlled} with computed ratio and orientation modifiers applied.
+ */
+export const BeforeAfter = ({ direction, defaultRatio, stateHandlers, ...controlledProps }) => {
+    const { actionHandlers, ratio } = controlledProps;
+    const [internalRatio, setInternalRatio] = useState(ratio ?? defaultRatio ?? 0);
+    const handlePointer = useCallback((e, targetHRatio, targetVRatio, ratio, element) => {
+        if (direction === 'vertical')
+            setInternalRatio(targetVRatio);
+        else
+            setInternalRatio(targetHRatio);
+        actionHandlers?.pointer?.(e, targetHRatio, targetVRatio, ratio, element);
+    }, [direction, actionHandlers?.pointer]);
+    useEffect(() => {
+        stateHandlers?.ratio?.(internalRatio);
+    }, [internalRatio, stateHandlers?.ratio]);
+    return _jsx(BeforeAfterControlled, { ...controlledProps, _modifiers: {
+            horizontal: direction !== 'vertical',
+            vertical: direction === 'vertical'
+        }, ratio: ratio ?? internalRatio, actionHandlers: { pointer: handlePointer } });
 };

package/components/BeforeAfter/utils.js

@@ -0,0 +1,9 @@
+export function getRelativePointerCoordinates(event, element) {
+    if (element === null) {
+        return { x: 0, y: 0 };
+    }
+    const rect = element.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    return { x, y };
+}

package/components/Disclaimer/index.js

@@ -1,10 +1,51 @@
-import {
-  Disclaimer
-} from "../../chunks/chunk-XFB4PUXO.js";
-import "../../chunks/chunk-IEZ3O5OF.js";
-import "../../chunks/chunk-TRFZSKNB.js";
-import "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-export {
-  Disclaimer
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { disclaimer as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Component that displays a dismissible disclaimer panel.
+ *
+ * Supports both controlled (`isOn` provided) and uncontrolled modes.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @remarks
+ * - In controlled mode, visibility is driven by `isOn` and internal state
+ *   does not toggle automatically.
+ * - In uncontrolled mode, the component manages its own visibility state.
+ * - Applies `on` and `off` modifier classes depending on visibility state.
+ */
+export const Disclaimer = ({ content, togglerContent, isOn: isOnProp, defaultIsOn: defaultIsOnProp, stateHandlers, actionHandlers, children, className }) => {
+    // State & refs
+    const [internalIsOn, setInternalIsOn] = useState(isOnProp ?? defaultIsOnProp ?? true);
+    const isOn = isOnProp ?? internalIsOn;
+    const pIsOn = useRef(isOn);
+    // State change handlers
+    useEffect(() => {
+        if (pIsOn.current === isOn)
+            return;
+        stateHandlers?.toggled?.(isOn);
+        pIsOn.current = isOn;
+    }, [isOn]);
+    // User actions handlers
+    const handleDismissClick = () => {
+        actionHandlers?.dismissClick?.(isOn);
+        if (isOnProp !== undefined)
+            return;
+        setInternalIsOn(false);
+    };
+    // Rendering
+    const c = clss(publicClassName, { 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 _jsxs("div", { className: rootClss, children: [_jsxs("div", { className: panelClss, children: [content !== undefined && _jsx("div", { className: contentClss, children: content }), togglerContent !== undefined && _jsx("div", { className: btnClss, onClick: handleDismissClick, children: togglerContent })] }), _jsx("div", { className: sensitiveClss, children: children })] });
 };

package/components/Drawer/index.js

@@ -1,90 +1,84 @@
-import {
-  ResizeObserverComponent
-} from "../../chunks/chunk-GG4EFNMU.js";
-import {
-  drawer
-} 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/Drawer/index.tsx
-import {
-  useState,
-  useRef,
-  useEffect
-} from "react";
-import cssModule from "./styles.module.css";
-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(drawer, { 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,
-      [`--${drawer}-content-${key}`]: `${val}`,
-      [`--${drawer}-content-${key}-px`]: `${val}px`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+/**
+ * Drawer component with optional controlled and uncontrolled behavior.
+ *
+ * @remarks
+ * - In controlled mode (`isOpened` defined), visibility is fully driven by the prop.
+ * - In uncontrolled mode, internal state is initialized from `initialIsOpened`.
+ * - The component measures its content using `ResizeObserverComponent`
+ *   and exposes the dimensions:
+ *   - As CSS custom properties:
+ *     --{prefix}-content-height
+ *     --{prefix}-content-height-px
+ *     --{prefix}-content-width
+ *     --{prefix}-content-width-px
+ *   - As `data-content-width` and `data-content-height` attributes.
+ *
+ * CSS modifier classes:
+ * - `opened` when open
+ * - `closed` when closed
+ */
+export const Drawer = ({ openerContent, closerContent, initialIsOpened = false, isOpened: isOpenedProp, stateHandlers, className, children }) => {
+    // State & handlers
+    const [internalIsOpened, setInternalIsOpened] = useState(isOpenedProp ?? initialIsOpened);
+    const isOpened = isOpenedProp ?? internalIsOpened;
+    const pIsOpened = useRef(isOpened);
+    const [{ width, height }, setContentDimensions] = useState({});
+    // State change handlers
+    useEffect(() => {
+        if (pIsOpened.current === isOpened)
+            return;
+        pIsOpened.current = isOpened;
+        stateHandlers?.toggled?.(isOpened);
+    }, [isOpened]);
+    // User action handlers
+    const handleOpenerClick = () => {
+        if (isOpenedProp !== undefined)
+            return;
+        setInternalIsOpened(true);
     };
-  }, {});
-  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
+    const handleCloserClick = () => {
+        if (isOpenedProp !== undefined)
+            return;
+        setInternalIsOpened(false);
+    };
+    const handleROCompResize = ({ entry }) => {
+        const { width, height } = entry?.contentRect ?? {};
+        setContentDimensions({ width, height });
+    };
+    // Rendering
+    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 === undefined)
+            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 === undefined)
+            return acc;
+        return { ...acc, [`data-content-${key}`]: `${val}` };
+    }, {});
+    return _jsxs("div", { className: rootClss, ...dataAttributes, style: { ...customCssProps }, children: [_jsx("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }), _jsx("div", { className: closerClss, onClick: handleCloserClick, children: closerContent }), _jsx("div", { className: contentClss, children: _jsx(ResizeObserverComponent, { onResized: handleROCompResize, children: children }) })] });
 };

package/components/EventListener/index.js

@@ -1,48 +1,30 @@
-import {
-  eventListener
-} 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/EventListener/index.tsx
-import {
-  useRef,
-  useEffect
-} from "react";
-import cssModule from "./styles.module.css";
-import { jsx } from "react/jsx-runtime";
-var EventListenerComponent = ({
-  className,
-  type,
-  targetSelector,
-  onEvent,
-  children
-}) => {
-  const rootRef = useRef(null);
-  useEffect(() => {
-    const root = rootRef.current;
-    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((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 rootClss = mergeClassNames(c(), className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: rootClss,
-      ref: rootRef,
-      children
-    }
-  );
-};
-export {
-  EventListenerComponent
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { eventListener as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * 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 const EventListenerComponent = ({ className, type, targetSelector, onEvent, children }) => {
+    // Effects & refs
+    const rootRef = useRef(null);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (onEvent === undefined || type === undefined || root === null)
+            return;
+        const typeArr = Array.isArray(type) ? type : [type];
+        const elements = Array.from(targetSelector === undefined ? [root] : root.querySelectorAll(targetSelector));
+        elements.forEach(e => typeArr.forEach(t => e.addEventListener(t, onEvent)));
+        return () => elements.forEach(e => typeArr.forEach(t => e.removeEventListener(t, onEvent)));
+    }, [targetSelector, type, onEvent]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    return _jsx("div", { className: rootClss, ref: rootRef, children: children });
 };