@design-edito/tools 0.4.5 → 0.4.11

package/components/BeforeAfter/index.js

@@ -1,190 +1,55 @@
-// src/components/BeforeAfter/index.tsx
-import {
-  useState,
-  useCallback as useCallback2,
-  useEffect
-} from "react";
-
-// src/components/BeforeAfter/index.controlled.tsx
-import {
-  useCallback,
-  useRef
-} 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/agnostic/numbers/clamp/index.ts
-function clamp(num, bound1, bound2) {
-  const min = Math.min(bound1, bound2);
-  const max = Math.max(bound1, bound2);
-  return Math.min(Math.max(num, min), max);
-}
-
-// 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 beforeAfter = "dsed-before-after";
-
-// src/components/BeforeAfter/index.controlled.tsx
-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,111 +1,51 @@
-// src/components/Disclaimer/index.tsx
-import {
-  useState,
-  useEffect,
-  useRef
-} 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 disclaimer = "dsed-disclaimer";
-
-// 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 })
-  ] });
-};
-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 })] });
 };