@design-edito/tools 0.4.5 → 0.4.11

package/agnostic/time/transitions/index.js

@@ -1,163 +1,205 @@
-// src/agnostic/time/wait/index.ts
-async function wait(durationMs) {
-  await new Promise((resolve) => {
-    setTimeout(() => resolve(true), durationMs);
-  });
-}
-
-// src/agnostic/time/transitions/index.ts
-var Ease = /* @__PURE__ */ ((Ease2) => {
-  Ease2["LINEAR"] = "linear";
-  Ease2["EASE_IN_QUAD"] = "ease-in-quad";
-  Ease2["EASE_OUT_QUAD"] = "ease-out-quad";
-  Ease2["EASE_IN_OUT_QUAD"] = "ease-in-out-quad";
-  Ease2["EASE_IN_CUBIC"] = "ease-in-cubic";
-  Ease2["EASE_OUT_CUBIC"] = "ease-out-cubic";
-  Ease2["EASE_IN_OUT_CUBIC"] = "ease-in-out-cubic";
-  Ease2["EASE_IN_QUART"] = "ease-in-quart";
-  Ease2["EASE_OUT_QUART"] = "ease-out-quart";
-  Ease2["EASE_IN_OUT_QUART"] = "ease-in-out-quart";
-  Ease2["EASE_IN_QUINT"] = "ease-in-quint";
-  Ease2["EASE_OUT_QUINT"] = "ease-out-quint";
-  Ease2["EASE_IN_OUT_QUINT"] = "ease-in-out-quint";
-  Ease2["EASE_IN_SINE"] = "ease-in-sine";
-  Ease2["EASE_OUT_SINE"] = "ease-out-sine";
-  Ease2["EASE_IN_OUT_SINE"] = "ease-in-out-sine";
-  Ease2["EASE_IN_EXPO"] = "ease-in-expo";
-  Ease2["EASE_OUT_EXPO"] = "ease-out-expo";
-  Ease2["EASE_IN_OUT_EXPO"] = "ease-in-out-expo";
-  Ease2["EASE_IN_CIRC"] = "ease-in-circ";
-  Ease2["EASE_OUT_CIRC"] = "ease-out-circ";
-  Ease2["EASE_IN_OUT_CIRC"] = "ease-in-out-circ";
-  Ease2["EASE_IN_BACK"] = "ease-in-back";
-  Ease2["EASE_OUT_BACK"] = "ease-out-back";
-  Ease2["EASE_IN_OUT_BACK"] = "ease-in-out-back";
-  Ease2["EASE_IN_ELASTIC"] = "ease-in-elastic";
-  Ease2["EASE_OUT_ELASTIC"] = "ease-out-elastic";
-  Ease2["EASE_IN_OUT_ELASTIC"] = "ease-in-out-elastic";
-  Ease2["EASE_IN_BOUNCE"] = "ease-in-bounce";
-  Ease2["EASE_OUT_BOUNCE"] = "ease-out-bounce";
-  Ease2["EASE_IN_OUT_BOUNCE"] = "ease-in-out-bounce";
-  return Ease2;
-})(Ease || {});
-async function transition(steps, durationMs, callbackOrEase, callback) {
-  const ease = typeof callbackOrEase === "string" ? callbackOrEase : "linear" /* LINEAR */;
-  const easing = easings[ease];
-  if (easing === void 0) return;
-  const actualCallback = callback ?? (typeof callbackOrEase === "function" ? callbackOrEase : void 0);
-  if (actualCallback === void 0) return;
-  const start = Date.now();
-  const timeTable = new Array(steps).fill(null).map((_, step) => {
-    const progression = (step + 1) / steps;
-    const eased = easing(progression);
-    const time = start + eased * durationMs;
-    return { time, step: eased * steps };
-  });
-  for (const { time, step } of timeTable) {
-    const now = Date.now();
-    const delay = time - now;
-    if (delay <= 0) actualCallback(step, time);
-    else {
-      await wait(delay);
-      actualCallback(step, time);
+import { wait } from '../../time/wait/index.js';
+/**
+ * Predefined easing function names for transitions.
+ * Used to control the acceleration pattern of a transition.
+ */
+export var Ease;
+(function (Ease) {
+    Ease["LINEAR"] = "linear";
+    Ease["EASE_IN_QUAD"] = "ease-in-quad";
+    Ease["EASE_OUT_QUAD"] = "ease-out-quad";
+    Ease["EASE_IN_OUT_QUAD"] = "ease-in-out-quad";
+    Ease["EASE_IN_CUBIC"] = "ease-in-cubic";
+    Ease["EASE_OUT_CUBIC"] = "ease-out-cubic";
+    Ease["EASE_IN_OUT_CUBIC"] = "ease-in-out-cubic";
+    Ease["EASE_IN_QUART"] = "ease-in-quart";
+    Ease["EASE_OUT_QUART"] = "ease-out-quart";
+    Ease["EASE_IN_OUT_QUART"] = "ease-in-out-quart";
+    Ease["EASE_IN_QUINT"] = "ease-in-quint";
+    Ease["EASE_OUT_QUINT"] = "ease-out-quint";
+    Ease["EASE_IN_OUT_QUINT"] = "ease-in-out-quint";
+    Ease["EASE_IN_SINE"] = "ease-in-sine";
+    Ease["EASE_OUT_SINE"] = "ease-out-sine";
+    Ease["EASE_IN_OUT_SINE"] = "ease-in-out-sine";
+    Ease["EASE_IN_EXPO"] = "ease-in-expo";
+    Ease["EASE_OUT_EXPO"] = "ease-out-expo";
+    Ease["EASE_IN_OUT_EXPO"] = "ease-in-out-expo";
+    Ease["EASE_IN_CIRC"] = "ease-in-circ";
+    Ease["EASE_OUT_CIRC"] = "ease-out-circ";
+    Ease["EASE_IN_OUT_CIRC"] = "ease-in-out-circ";
+    Ease["EASE_IN_BACK"] = "ease-in-back";
+    Ease["EASE_OUT_BACK"] = "ease-out-back";
+    Ease["EASE_IN_OUT_BACK"] = "ease-in-out-back";
+    Ease["EASE_IN_ELASTIC"] = "ease-in-elastic";
+    Ease["EASE_OUT_ELASTIC"] = "ease-out-elastic";
+    Ease["EASE_IN_OUT_ELASTIC"] = "ease-in-out-elastic";
+    Ease["EASE_IN_BOUNCE"] = "ease-in-bounce";
+    Ease["EASE_OUT_BOUNCE"] = "ease-out-bounce";
+    Ease["EASE_IN_OUT_BOUNCE"] = "ease-in-out-bounce";
+})(Ease || (Ease = {}));
+/**
+ * Performs a numeric transition from 0 to `steps` over `durationMs` milliseconds.
+ * Invokes a callback at each step with the eased value and timestamp.
+ *
+ * @param steps - The number of steps or increments for the transition.
+ * @param durationMs - Total duration of the transition in milliseconds.
+ * @param callbackOrEase - Either a callback function for each step or a predefined easing name.
+ * @param callback - Optional callback if `callbackOrEase` is an easing name.
+ * @returns A promise that resolves when the transition is complete.
+ */
+export async function transition(steps, durationMs, callbackOrEase, callback) {
+    const ease = typeof callbackOrEase === 'string' ? callbackOrEase : Ease.LINEAR;
+    const easing = easings[ease];
+    if (easing === undefined)
+        return;
+    const actualCallback = callback ?? (typeof callbackOrEase === 'function'
+        ? callbackOrEase
+        : undefined);
+    if (actualCallback === undefined)
+        return;
+    const start = Date.now();
+    const timeTable = new Array(steps).fill(null).map((_, step) => {
+        const progression = (step + 1) / steps;
+        const eased = easing(progression);
+        const time = start + eased * durationMs;
+        return { time, step: eased * steps };
+    });
+    for (const { time, step } of timeTable) {
+        const now = Date.now();
+        const delay = time - now;
+        if (delay <= 0)
+            actualCallback(step, time);
+        else {
+            await wait(delay);
+            actualCallback(step, time);
+        }
     }
-  }
 }
-var pow = Math.pow;
-var sqrt = Math.sqrt;
-var sin = Math.sin;
-var cos = Math.cos;
-var PI = Math.PI;
-var c1 = 1.70158;
-var c2 = c1 * 1.525;
-var c3 = c1 + 1;
-var c4 = 2 * PI / 3;
-var c5 = 2 * PI / 4.5;
-var bounceOut = function(x) {
-  const n1 = 7.5625;
-  const d1 = 2.75;
-  if (x < 1 / d1) return n1 * x * x;
-  if (x < 2 / d1) return n1 * (x -= 1.5 / d1) * x + 0.75;
-  if (x < 2.5 / d1) return n1 * (x -= 2.25 / d1) * x + 0.9375;
-  return n1 * (x -= 2.625 / d1) * x + 0.984375;
-};
-var easingFunctions = {
-  linear: (x) => x,
-  easeInQuad: (x) => x * x,
-  easeOutQuad: (x) => 1 - (1 - x) * (1 - x),
-  easeInOutQuad: (x) => x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2,
-  easeInCubic: (x) => x * x * x,
-  easeOutCubic: (x) => 1 - pow(1 - x, 3),
-  easeInOutCubic: (x) => x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2,
-  easeInQuart: (x) => x * x * x * x,
-  easeOutQuart: (x) => 1 - pow(1 - x, 4),
-  easeInOutQuart: (x) => x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2,
-  easeInQuint: (x) => x * x * x * x * x,
-  easeOutQuint: (x) => 1 - pow(1 - x, 5),
-  easeInOutQuint: (x) => x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2,
-  easeInSine: (x) => 1 - cos(x * PI / 2),
-  easeOutSine: (x) => sin(x * PI / 2),
-  easeInOutSine: (x) => -(cos(PI * x) - 1) / 2,
-  easeInExpo: (x) => x === 0 ? 0 : pow(2, 10 * x - 10),
-  easeOutExpo: (x) => x === 1 ? 1 : 1 - pow(2, -10 * x),
-  easeInOutExpo: (x) => {
-    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? pow(2, 20 * x - 10) / 2 : (2 - pow(2, -20 * x + 10)) / 2;
-  },
-  easeInCirc: (x) => 1 - sqrt(1 - pow(x, 2)),
-  easeOutCirc: (x) => sqrt(1 - pow(x - 1, 2)),
-  easeInOutCirc: (x) => x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2,
-  easeInBack: (x) => c3 * x * x * x - c1 * x * x,
-  easeOutBack: (x) => 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2),
-  easeInOutBack: (x) => x < 0.5 ? pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
-  easeInElastic: (x) => {
-    return x === 0 ? 0 : x === 1 ? 1 : -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4);
-  },
-  easeOutElastic: (x) => {
-    return x === 0 ? 0 : x === 1 ? 1 : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
-  },
-  easeInOutElastic: (x) => {
-    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2 : pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5) / 2 + 1;
-  },
-  easeInBounce: (x) => 1 - bounceOut(1 - x),
-  easeOutBounce: bounceOut,
-  easeInOutBounce: (x) => x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2
+// Easing functions taken from https://easings.net/index.js/
+const pow = Math.pow;
+const sqrt = Math.sqrt;
+const sin = Math.sin;
+const cos = Math.cos;
+const PI = Math.PI;
+const c1 = 1.70158;
+const c2 = c1 * 1.525;
+const c3 = c1 + 1;
+const c4 = (2 * PI) / 3;
+const c5 = (2 * PI) / 4.5;
+const bounceOut = function (x) {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (x < 1 / d1)
+        return n1 * x * x;
+    if (x < 2 / d1)
+        return n1 * (x -= 1.5 / d1) * x + 0.75;
+    if (x < 2.5 / d1)
+        return n1 * (x -= 2.25 / d1) * x + 0.9375;
+    return n1 * (x -= 2.625 / d1) * x + 0.984375;
 };
-var easings = {
-  ["linear" /* LINEAR */]: easingFunctions.linear,
-  ["ease-in-quad" /* EASE_IN_QUAD */]: easingFunctions.easeInQuad,
-  ["ease-out-quad" /* EASE_OUT_QUAD */]: easingFunctions.easeOutQuad,
-  ["ease-in-out-quad" /* EASE_IN_OUT_QUAD */]: easingFunctions.easeInOutQuad,
-  ["ease-in-cubic" /* EASE_IN_CUBIC */]: easingFunctions.easeInCubic,
-  ["ease-out-cubic" /* EASE_OUT_CUBIC */]: easingFunctions.easeOutCubic,
-  ["ease-in-out-cubic" /* EASE_IN_OUT_CUBIC */]: easingFunctions.easeInOutCubic,
-  ["ease-in-quart" /* EASE_IN_QUART */]: easingFunctions.easeInQuart,
-  ["ease-out-quart" /* EASE_OUT_QUART */]: easingFunctions.easeOutQuart,
-  ["ease-in-out-quart" /* EASE_IN_OUT_QUART */]: easingFunctions.easeInOutQuart,
-  ["ease-in-quint" /* EASE_IN_QUINT */]: easingFunctions.easeInQuint,
-  ["ease-out-quint" /* EASE_OUT_QUINT */]: easingFunctions.easeOutQuint,
-  ["ease-in-out-quint" /* EASE_IN_OUT_QUINT */]: easingFunctions.easeInOutQuint,
-  ["ease-in-sine" /* EASE_IN_SINE */]: easingFunctions.easeInSine,
-  ["ease-out-sine" /* EASE_OUT_SINE */]: easingFunctions.easeOutSine,
-  ["ease-in-out-sine" /* EASE_IN_OUT_SINE */]: easingFunctions.easeInOutSine,
-  ["ease-in-expo" /* EASE_IN_EXPO */]: easingFunctions.easeInExpo,
-  ["ease-out-expo" /* EASE_OUT_EXPO */]: easingFunctions.easeOutExpo,
-  ["ease-in-out-expo" /* EASE_IN_OUT_EXPO */]: easingFunctions.easeInOutExpo,
-  ["ease-in-circ" /* EASE_IN_CIRC */]: easingFunctions.easeInCirc,
-  ["ease-out-circ" /* EASE_OUT_CIRC */]: easingFunctions.easeOutCirc,
-  ["ease-in-out-circ" /* EASE_IN_OUT_CIRC */]: easingFunctions.easeInOutCirc,
-  ["ease-in-back" /* EASE_IN_BACK */]: easingFunctions.easeInBack,
-  ["ease-out-back" /* EASE_OUT_BACK */]: easingFunctions.easeOutBack,
-  ["ease-in-out-back" /* EASE_IN_OUT_BACK */]: easingFunctions.easeInOutBack,
-  ["ease-in-elastic" /* EASE_IN_ELASTIC */]: easingFunctions.easeInElastic,
-  ["ease-out-elastic" /* EASE_OUT_ELASTIC */]: easingFunctions.easeOutElastic,
-  ["ease-in-out-elastic" /* EASE_IN_OUT_ELASTIC */]: easingFunctions.easeInOutElastic,
-  ["ease-in-bounce" /* EASE_IN_BOUNCE */]: easingFunctions.easeInBounce,
-  ["ease-out-bounce" /* EASE_OUT_BOUNCE */]: easingFunctions.easeOutBounce,
-  ["ease-in-out-bounce" /* EASE_IN_OUT_BOUNCE */]: easingFunctions.easeInOutBounce
+/**
+ * Predefined easing functions used internally by transitions.
+ */
+export const easingFunctions = {
+    linear: (x) => x,
+    easeInQuad: x => (x * x),
+    easeOutQuad: x => (1 - (1 - x) * (1 - x)),
+    easeInOutQuad: x => (x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2),
+    easeInCubic: x => (x * x * x),
+    easeOutCubic: x => (1 - pow(1 - x, 3)),
+    easeInOutCubic: x => (x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2),
+    easeInQuart: x => (x * x * x * x),
+    easeOutQuart: x => (1 - pow(1 - x, 4)),
+    easeInOutQuart: x => (x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2),
+    easeInQuint: x => (x * x * x * x * x),
+    easeOutQuint: x => (1 - pow(1 - x, 5)),
+    easeInOutQuint: x => (x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2),
+    easeInSine: x => (1 - cos((x * PI) / 2)),
+    easeOutSine: x => (sin((x * PI) / 2)),
+    easeInOutSine: x => (-(cos(PI * x) - 1) / 2),
+    easeInExpo: x => (x === 0 ? 0 : pow(2, 10 * x - 10)),
+    easeOutExpo: x => (x === 1 ? 1 : 1 - pow(2, -10 * x)),
+    easeInOutExpo: x => {
+        return x === 0
+            ? 0
+            : x === 1
+                ? 1
+                : x < 0.5
+                    ? pow(2, 20 * x - 10) / 2
+                    : (2 - pow(2, -20 * x + 10)) / 2;
+    },
+    easeInCirc: x => (1 - sqrt(1 - pow(x, 2))),
+    easeOutCirc: x => (sqrt(1 - pow(x - 1, 2))),
+    easeInOutCirc: x => (x < 0.5
+        ? (1 - sqrt(1 - pow(2 * x, 2))) / 2
+        : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2),
+    easeInBack: x => (c3 * x * x * x - c1 * x * x),
+    easeOutBack: x => (1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2)),
+    easeInOutBack: x => (x < 0.5
+        ? (pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
+        : (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2),
+    easeInElastic: x => {
+        return x === 0
+            ? 0
+            : x === 1
+                ? 1
+                : -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4);
+    },
+    easeOutElastic: x => {
+        return x === 0
+            ? 0
+            : x === 1
+                ? 1
+                : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
+    },
+    easeInOutElastic: x => {
+        return x === 0
+            ? 0
+            : x === 1
+                ? 1
+                : x < 0.5
+                    ? -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2
+                    : (pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5)) / 2 + 1;
+    },
+    easeInBounce: x => (1 - bounceOut(1 - x)),
+    easeOutBounce: bounceOut,
+    easeInOutBounce: x => (x < 0.5
+        ? (1 - bounceOut(1 - 2 * x)) / 2
+        : (1 + bounceOut(2 * x - 1)) / 2)
 };
-export {
-  Ease,
-  easingFunctions,
-  easings,
-  transition
+/**
+ * Mapping from `Ease` enum values to easing functions.
+ */
+export const easings = {
+    [Ease.LINEAR]: easingFunctions.linear,
+    [Ease.EASE_IN_QUAD]: easingFunctions.easeInQuad,
+    [Ease.EASE_OUT_QUAD]: easingFunctions.easeOutQuad,
+    [Ease.EASE_IN_OUT_QUAD]: easingFunctions.easeInOutQuad,
+    [Ease.EASE_IN_CUBIC]: easingFunctions.easeInCubic,
+    [Ease.EASE_OUT_CUBIC]: easingFunctions.easeOutCubic,
+    [Ease.EASE_IN_OUT_CUBIC]: easingFunctions.easeInOutCubic,
+    [Ease.EASE_IN_QUART]: easingFunctions.easeInQuart,
+    [Ease.EASE_OUT_QUART]: easingFunctions.easeOutQuart,
+    [Ease.EASE_IN_OUT_QUART]: easingFunctions.easeInOutQuart,
+    [Ease.EASE_IN_QUINT]: easingFunctions.easeInQuint,
+    [Ease.EASE_OUT_QUINT]: easingFunctions.easeOutQuint,
+    [Ease.EASE_IN_OUT_QUINT]: easingFunctions.easeInOutQuint,
+    [Ease.EASE_IN_SINE]: easingFunctions.easeInSine,
+    [Ease.EASE_OUT_SINE]: easingFunctions.easeOutSine,
+    [Ease.EASE_IN_OUT_SINE]: easingFunctions.easeInOutSine,
+    [Ease.EASE_IN_EXPO]: easingFunctions.easeInExpo,
+    [Ease.EASE_OUT_EXPO]: easingFunctions.easeOutExpo,
+    [Ease.EASE_IN_OUT_EXPO]: easingFunctions.easeInOutExpo,
+    [Ease.EASE_IN_CIRC]: easingFunctions.easeInCirc,
+    [Ease.EASE_OUT_CIRC]: easingFunctions.easeOutCirc,
+    [Ease.EASE_IN_OUT_CIRC]: easingFunctions.easeInOutCirc,
+    [Ease.EASE_IN_BACK]: easingFunctions.easeInBack,
+    [Ease.EASE_OUT_BACK]: easingFunctions.easeOutBack,
+    [Ease.EASE_IN_OUT_BACK]: easingFunctions.easeInOutBack,
+    [Ease.EASE_IN_ELASTIC]: easingFunctions.easeInElastic,
+    [Ease.EASE_OUT_ELASTIC]: easingFunctions.easeOutElastic,
+    [Ease.EASE_IN_OUT_ELASTIC]: easingFunctions.easeInOutElastic,
+    [Ease.EASE_IN_BOUNCE]: easingFunctions.easeInBounce,
+    [Ease.EASE_OUT_BOUNCE]: easingFunctions.easeOutBounce,
+    [Ease.EASE_IN_OUT_BOUNCE]: easingFunctions.easeInOutBounce
 };

package/agnostic/time/wait/index.js

@@ -1,9 +1,11 @@
-// src/agnostic/time/wait/index.ts
-async function wait(durationMs) {
-  await new Promise((resolve) => {
-    setTimeout(() => resolve(true), durationMs);
-  });
+/**
+ * Returns a promise that resolves after the specified duration in milliseconds.
+ *
+ * @param durationMs - Time to wait in milliseconds.
+ * @returns A promise that resolves to `void` after the delay.
+ */
+export async function wait(durationMs) {
+    await new Promise(resolve => {
+        setTimeout(() => resolve(true), durationMs);
+    });
 }
-export {
-  wait
-};

package/agnostic/typescript/types.js

@@ -0,0 +1 @@
+export {};

package/components/BeforeAfter/index.controlled.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { clamp } from '../../agnostic/numbers/clamp/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { beforeAfter as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+import { getRelativePointerCoordinates } from './utils.js';
+/**
+ * Props for the {@link BeforeAfterControlled} component.
+ *
+ * @property beforeContent - Content shown first.
+ * @property afterContent - Content shown second.
+ * @property ratio - Split ratio (0 to 1). Controlled by parent.
+ * @property actionHandlers - Optional pointer (drag) callbacks:
+ *   - `pointer` — called on pointer events with ratio and element info.
+ * @property _modifiers - Orientation modifiers: `horizontal` or `vertical`.
+ * @property className - Custom CSS class.
+ *
+ * @see {@link BeforeAfter}
+ */
+/**
+ * Controlled before/after slider component. Renders two contents separated by a slider,
+ * whose ratio is managed by the parent component. Handles pointer interactions (mouse/touch/pen)
+ * to update the ratio via callbacks.
+ *
+ * ### Forwarded CSS custom properties
+ * - `--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).
+ *
+ * ### Forwarded data attributes
+ * - `data-ratio` — the current ratio value.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @see {@link BeforeAfter}
+ * @returns A div containing used to render "before/after" content, with pointer event handling for ratio updates.
+ */
+export const BeforeAfterControlled = ({ beforeContent, afterContent, className, ratio, actionHandlers, _modifiers, ...intrisicDivHTMLAttributes }) => {
+    // Rendering
+    const isPointerDown = useRef(false);
+    const onPointerUpRef = useRef(null);
+    const onPointerMoveRef = useRef(null);
+    const rootRef = useRef(null);
+    const handleOnPointer = useCallback((event) => {
+        if (actionHandlers?.pointer === undefined || 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 !== undefined ? Math.max(0, Math.min(1, ratio)) : 0;
+    const rootStyles = {
+        [`--${publicClassName}-ratio`]: outputRatio.toFixed(8),
+        [`--${publicClassName}-ratio-percent`]: `${(outputRatio * 100).toString()}%`
+    };
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, _modifiers), className);
+    const rootAttributes = {
+        'data-ratio': ratio
+    };
+    const beforeClass = c('before');
+    const afterClass = c('after');
+    return _jsxs("div", { className: rootClss, style: rootStyles, onPointerDown: onPointerDown, ref: rootRef, ...rootAttributes, ...intrisicDivHTMLAttributes, children: [_jsx("div", { className: beforeClass, children: beforeContent }), _jsx("div", { className: afterClass, children: afterContent })] });
+};