@design-edito/tools 0.3.11 → 0.3.13

package/agnostic/arrays/index.d.ts

@@ -1,6 +1,6 @@
 export * as dedupe from './dedupe/index.js'
 export * as findDuplicates from './find-duplicates/index.js'
-export * as isArrayOf from './is-array-of/index.js'
 export * as make from './make/index.js'
-export * as shuffle from './shuffle/index.js'
 export * as randomPick from './random-pick/index.js'
+export * as shuffle from './shuffle/index.js'
+export * as isArrayOf from './is-array-of/index.js'

package/agnostic/arrays/index.js

@@ -1,6 +1,6 @@
 export * as dedupe from './dedupe/index.js'
 export * as findDuplicates from './find-duplicates/index.js'
-export * as isArrayOf from './is-array-of/index.js'
 export * as make from './make/index.js'
-export * as shuffle from './shuffle/index.js'
 export * as randomPick from './random-pick/index.js'
+export * as shuffle from './shuffle/index.js'
+export * as isArrayOf from './is-array-of/index.js'

package/agnostic/colors/index.d.ts

@@ -1,12 +1,12 @@
 export * as channels from './channels/index.js'
-export * as grayscale from './grayscale/index.js'
+export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
-export * as distance from './distance/index.js'
+export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
+export * as distance from './distance/index.js'
 export * as lerp from './lerp/index.js'
 export * as luminance from './luminance/index.js'
-export * as palette from './palette/index.js'
-export * as rotate from './rotate/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
-export * as contrast from './contrast/index.js'
+export * as rotate from './rotate/index.js'
+export * as palette from './palette/index.js'

package/agnostic/colors/index.js

@@ -1,12 +1,12 @@
 export * as channels from './channels/index.js'
-export * as grayscale from './grayscale/index.js'
+export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
-export * as distance from './distance/index.js'
+export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
+export * as distance from './distance/index.js'
 export * as lerp from './lerp/index.js'
 export * as luminance from './luminance/index.js'
-export * as palette from './palette/index.js'
-export * as rotate from './rotate/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
-export * as contrast from './contrast/index.js'
+export * as rotate from './rotate/index.js'
+export * as palette from './palette/index.js'

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
+export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
-export * as bem from './bem/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/css/index.js

@@ -1,6 +1,6 @@
+export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
-export * as bem from './bem/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
-export * as and from './and/index.js'
 export * as addclass from './addclass/index.js'
-export * as at from './at/index.js'
+export * as and from './and/index.js'
 export * as append from './append/index.js'
-export * as call from './call/index.js'
-export * as deleteproperties from './deleteproperties/index.js'
+export * as at from './at/index.js'
 export * as clone from './clone/index.js'
+export * as deleteproperties from './deleteproperties/index.js'
 export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
-export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
-export * as hjstringify from './hjstringify/index.js'
-export * as initialize from './initialize/index.js'
 export * as hjparse from './hjparse/index.js'
-export * as join from './join/index.js'
-export * as length from './length/index.js'
+export * as hjstringify from './hjstringify/index.js'
+export * as call from './call/index.js'
 export * as if from './if/index.js'
+export * as getproperties from './getproperties/index.js'
+export * as initialize from './initialize/index.js'
 export * as map from './map/index.js'
+export * as length from './length/index.js'
 export * as negate from './negate/index.js'
+export * as join from './join/index.js'
 export * as notrailing from './notrailing/index.js'
-export * as print from './print/index.js'
-export * as pickrandom from './pickrandom/index.js'
-export * as populate from './populate/index.js'
 export * as or from './or/index.js'
-export * as removeattribute from './removeattribute/index.js'
+export * as pickrandom from './pickrandom/index.js'
+export * as print from './print/index.js'
+export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
+export * as populate from './populate/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
-export * as select from './select/index.js'
-export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
+export * as set from './set/index.js'
+export * as select from './select/index.js'
 export * as split from './split/index.js'
 export * as sorton from './sorton/index.js'
-export * as push from './push/index.js'
 export * as spread from './spread/index.js'
+export * as toboolean from './toboolean/index.js'
 export * as toarray from './toarray/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as tonodelist from './tonodelist/index.js'
-export * as tonull from './tonull/index.js'
-export * as torecord from './torecord/index.js'
-export * as toref from './toref/index.js'
 export * as tonumber from './tonumber/index.js'
+export * as torecord from './torecord/index.js'
+export * as tonull from './tonull/index.js'
 export * as tostring from './tostring/index.js'
-export * as totext from './totext/index.js'
+export * as toref from './toref/index.js'
 export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'
+export * as totext from './totext/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.js

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
-export * as and from './and/index.js'
 export * as addclass from './addclass/index.js'
-export * as at from './at/index.js'
+export * as and from './and/index.js'
 export * as append from './append/index.js'
-export * as call from './call/index.js'
-export * as deleteproperties from './deleteproperties/index.js'
+export * as at from './at/index.js'
 export * as clone from './clone/index.js'
+export * as deleteproperties from './deleteproperties/index.js'
 export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
-export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
-export * as hjstringify from './hjstringify/index.js'
-export * as initialize from './initialize/index.js'
 export * as hjparse from './hjparse/index.js'
-export * as join from './join/index.js'
-export * as length from './length/index.js'
+export * as hjstringify from './hjstringify/index.js'
+export * as call from './call/index.js'
 export * as if from './if/index.js'
+export * as getproperties from './getproperties/index.js'
+export * as initialize from './initialize/index.js'
 export * as map from './map/index.js'
+export * as length from './length/index.js'
 export * as negate from './negate/index.js'
+export * as join from './join/index.js'
 export * as notrailing from './notrailing/index.js'
-export * as print from './print/index.js'
-export * as pickrandom from './pickrandom/index.js'
-export * as populate from './populate/index.js'
 export * as or from './or/index.js'
-export * as removeattribute from './removeattribute/index.js'
+export * as pickrandom from './pickrandom/index.js'
+export * as print from './print/index.js'
+export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
+export * as populate from './populate/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
-export * as select from './select/index.js'
-export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
+export * as set from './set/index.js'
+export * as select from './select/index.js'
 export * as split from './split/index.js'
 export * as sorton from './sorton/index.js'
-export * as push from './push/index.js'
 export * as spread from './spread/index.js'
+export * as toboolean from './toboolean/index.js'
 export * as toarray from './toarray/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as tonodelist from './tonodelist/index.js'
-export * as tonull from './tonull/index.js'
-export * as torecord from './torecord/index.js'
-export * as toref from './toref/index.js'
 export * as tonumber from './tonumber/index.js'
+export * as torecord from './torecord/index.js'
+export * as tonull from './tonull/index.js'
 export * as tostring from './tostring/index.js'
-export * as totext from './totext/index.js'
+export * as toref from './toref/index.js'
 export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'
+export * as totext from './totext/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts

@@ -1,14 +1,14 @@
 export * as any from './any/index.js'
 export * as array from './array/index.js'
-export * as element from './element/index.js'
 export * as boolean from './boolean/index.js'
+export * as element from './element/index.js'
 export * as get from './get/index.js'
-export * as global from './global/index.js'
 export * as guess from './guess/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
-export * as ref from './ref/index.js'
 export * as string from './string/index.js'
+export * as ref from './ref/index.js'
 export * as text from './text/index.js'
+export * as global from './global/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.js

@@ -1,14 +1,14 @@
 export * as any from './any/index.js'
 export * as array from './array/index.js'
-export * as element from './element/index.js'
 export * as boolean from './boolean/index.js'
+export * as element from './element/index.js'
 export * as get from './get/index.js'
-export * as global from './global/index.js'
 export * as guess from './guess/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
-export * as ref from './ref/index.js'
 export * as string from './string/index.js'
+export * as ref from './ref/index.js'
 export * as text from './text/index.js'
+export * as global from './global/index.js'

package/agnostic/html/index.d.ts

@@ -1,8 +1,8 @@
-export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
-export * as hyperJson from './hyper-json/index.js'
+export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as insertNode from './insert-node/index.js'
+export * as hyperJson from './hyper-json/index.js'
 export * as placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
+export * as replaceInElement from './replace-in-element/index.js'

package/agnostic/html/index.js

@@ -1,8 +1,8 @@
-export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
-export * as hyperJson from './hyper-json/index.js'
+export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as insertNode from './insert-node/index.js'
+export * as hyperJson from './hyper-json/index.js'
 export * as placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
+export * as replaceInElement from './replace-in-element/index.js'

package/agnostic/index.d.ts

@@ -1,16 +1,16 @@
 export * as arrays from './arrays/index.js'
 export * as colors from './colors/index.js'
-export * as booleans from './booleans/index.js'
 export * as css from './css/index.js'
+export * as booleans from './booleans/index.js'
 export * as errors from './errors/index.js'
-export * as misc from './misc/index.js'
-export * as objects from './objects/index.js'
 export * as html from './html/index.js'
 export * as numbers from './numbers/index.js'
+export * as objects from './objects/index.js'
 export * as optim from './optim/index.js'
 export * as random from './random/index.js'
-export * as sanitization from './sanitization/index.js'
-export * as regexps from './regexps/index.js'
+export * as misc from './misc/index.js'
 export * as strings from './strings/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'
+export * as regexps from './regexps/index.js'
+export * as sanitization from './sanitization/index.js'

package/agnostic/index.js

@@ -1,16 +1,16 @@
 export * as arrays from './arrays/index.js'
 export * as colors from './colors/index.js'
-export * as booleans from './booleans/index.js'
 export * as css from './css/index.js'
+export * as booleans from './booleans/index.js'
 export * as errors from './errors/index.js'
-export * as misc from './misc/index.js'
-export * as objects from './objects/index.js'
 export * as html from './html/index.js'
 export * as numbers from './numbers/index.js'
+export * as objects from './objects/index.js'
 export * as optim from './optim/index.js'
 export * as random from './random/index.js'
-export * as sanitization from './sanitization/index.js'
-export * as regexps from './regexps/index.js'
+export * as misc from './misc/index.js'
 export * as strings from './strings/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'
+export * as regexps from './regexps/index.js'
+export * as sanitization from './sanitization/index.js'

package/agnostic/misc/crossenv/index.d.ts

@@ -1,2 +1,2 @@
-export * as window from './window/index.js'
 export * as detectRuntime from './detect-runtime/index.js'
+export * as window from './window/index.js'

package/agnostic/misc/crossenv/index.js

@@ -1,2 +1,2 @@
-export * as window from './window/index.js'
 export * as detectRuntime from './detect-runtime/index.js'
+export * as window from './window/index.js'

package/agnostic/misc/index.d.ts

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
-export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
-export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as dataSize from './data-size/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as logs from './logs/index.js'
+export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
-export * as isNullish from './is-nullish/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as outcome from './outcome/index.js'
+export * as connection from './connection/index.js'

package/agnostic/misc/index.js

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
-export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
-export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as dataSize from './data-size/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as logs from './logs/index.js'
+export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
-export * as isNullish from './is-nullish/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as outcome from './outcome/index.js'
+export * as connection from './connection/index.js'

package/agnostic/numbers/index.d.ts

@@ -1,6 +1,6 @@
 export * as approximateRational from './approximate-rational/index.js'
-export * as clamp from './clamp/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
+export * as clamp from './clamp/index.js'
+export * as absoluteModulo from './absolute-modulo/index.js'
 export * as interpolate from './interpolate/index.js'
 export * as round from './round/index.js'
-export * as absoluteModulo from './absolute-modulo/index.js'

package/agnostic/numbers/index.js

@@ -1,6 +1,6 @@
 export * as approximateRational from './approximate-rational/index.js'
-export * as clamp from './clamp/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
+export * as clamp from './clamp/index.js'
+export * as absoluteModulo from './absolute-modulo/index.js'
 export * as interpolate from './interpolate/index.js'
 export * as round from './round/index.js'
-export * as absoluteModulo from './absolute-modulo/index.js'

package/agnostic/objects/index.d.ts

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
-export * as enums from './enums/index.js'
-export * as isRecord from './is-record/index.js'
+export * as flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
+export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
 export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
+export * as enums from './enums/index.js'

package/agnostic/objects/index.js

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
-export * as enums from './enums/index.js'
-export * as isRecord from './is-record/index.js'
+export * as flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
+export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
 export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
+export * as enums from './enums/index.js'

package/agnostic/sanitization/index.d.ts

@@ -1,4 +1,4 @@
 export * as fileName from './file-name/index.js'
-export * as path from './path/index.js'
 export * as html from './html/index.js'
 export * as userInput from './user-input/index.js'
+export * as path from './path/index.js'

package/agnostic/sanitization/index.js

@@ -1,4 +1,4 @@
 export * as fileName from './file-name/index.js'
-export * as path from './path/index.js'
 export * as html from './html/index.js'
 export * as userInput from './user-input/index.js'
+export * as path from './path/index.js'

package/agnostic/strings/index.d.ts

@@ -1,6 +1,6 @@
+export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
-export * as charCodes from './char-codes/index.js'
 export * as parseTable from './parse-table/index.js'
 export * as replaceAll from './replace-all/index.js'
 export * as toAlphanum from './to-alphanum/index.js'

package/agnostic/strings/index.js

@@ -1,6 +1,6 @@
+export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
-export * as charCodes from './char-codes/index.js'
 export * as parseTable from './parse-table/index.js'
 export * as replaceAll from './replace-all/index.js'
 export * as toAlphanum from './to-alphanum/index.js'

package/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
-export * as duration from './duration/index.js'
 export * as dates from './dates/index.js'
+export * as duration from './duration/index.js'
+export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'
 export * as timeout from './timeout/index.js'
-export * as transitions from './transitions/index.js'

package/agnostic/time/index.js

@@ -1,5 +1,5 @@
-export * as duration from './duration/index.js'
 export * as dates from './dates/index.js'
+export * as duration from './duration/index.js'
+export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'
 export * as timeout from './timeout/index.js'
-export * as transitions from './transitions/index.js'

package/components/BeforeAfter/index.controlled.d.ts

@@ -0,0 +1,46 @@
+import React, { type FunctionComponent, type HTMLAttributes } from 'react';
+import type { WithClassName } from '../utils/types.js';
+export type Props = WithClassName<{
+    content?: React.ReactNode;
+    beforeContent?: React.ReactNode;
+    afterContent?: React.ReactNode;
+    ratio?: number;
+    actionHandlers?: {
+        pointer?: (e: PointerEvent, targetHRatio: number, targetVRatio: number, ratio: number | null, element: HTMLDivElement) => void;
+    };
+    _modifiers?: {
+        horizontal?: boolean;
+        vertical?: boolean;
+    };
+}> & HTMLAttributes<HTMLDivElement>;
+/**
+ * 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 declare const BeforeAfterControlled: FunctionComponent<Props>;

package/components/BeforeAfter/index.d.ts

@@ -0,0 +1,55 @@
+import { type FunctionComponent } from 'react';
+import { type Props as ControlledProps } from './index.controlled.js';
+/**
+ * Props for the {@link BeforeAfter} component.
+ *
+ * Extends {@link ControlledProps} (minus `_modifiers`, which are derived
+ * internally) 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'`.
+ * @property stateHandlers - Optional callbacks invoked when derived state changes:
+ *   - `ratio` — called with the new ratio whenever it changes.
+ */
+export type Props = ControlledProps & {
+    defaultRatio?: number;
+    direction?: 'horizontal' | 'vertical';
+    stateHandlers?: {
+        ratio?: (ratio: number) => void;
+    };
+};
+/**
+ * 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 declare const BeforeAfter: FunctionComponent<Props>;

package/components/BeforeAfter/index.js

@@ -0,0 +1,40 @@
+// src/components/BeforeAfter/index.tsx
+import {
+  useState,
+  useCallback,
+  useEffect
+} from "react";
+import { BeforeAfterControlled } from "./index.controlled.js";
+import { jsx } from "react/jsx-runtime";
+var BeforeAfter = ({
+  direction,
+  defaultRatio,
+  stateHandlers,
+  ...controlledProps
+}) => {
+  const { actionHandlers, ratio } = controlledProps;
+  const [internalRatio, setInternalRatio] = useState(ratio ?? defaultRatio ?? 0);
+  const handlePointer = useCallback((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__ */ jsx(
+    BeforeAfterControlled,
+    {
+      ...controlledProps,
+      _modifiers: {
+        horizontal: direction !== "vertical",
+        vertical: direction === "vertical"
+      },
+      ratio: ratio ?? internalRatio,
+      actionHandlers: { pointer: handlePointer }
+    }
+  );
+};
+export {
+  BeforeAfter
+};

package/components/BeforeAfter/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function getRelativePointerCoordinates(event: PointerEvent, element: HTMLDivElement | null): {
+    x: number;
+    y: number;
+};