@sprawlify/primitives 0.0.30 → 0.0.32

package/dist/machines/signature-pad/index.mjs

@@ -1,7 +1,7 @@
 import { t as createAnatomy } from "../../create-anatomy-CArN8dVu.mjs";
-import { T as trackPointerMove, Vt as getDataUrl, bt as isModifierKey, ft as getEventTarget, k as getRelativePoint, vn as dataAttr, x as query, yt as isLeftClick } from "../../dom-query-Bwyyt0Vp.mjs";
-import { u as createSplitProps } from "../../utils-BIwaJq8z.mjs";
-import { a as createMachine } from "../../core-DVmt6PX7.mjs";
+import { T as trackPointerMove, Vt as getDataUrl$1, bt as isModifierKey, ft as getEventTarget, k as getRelativePoint, vn as dataAttr, x as query, yt as isLeftClick } from "../../dom-query-BaSlGC4X.mjs";
+import { u as createSplitProps } from "../../utils-B_odTlcq.mjs";
+import { a as createMachine } from "../../core-BLrKf6Qi.mjs";
 import { t as createProps } from "../../create-props-SRSjdUTq.mjs";
 import getStroke from "perfect-freehand";
 
@@ -17,8 +17,8 @@ const getLabelId = (ctx) => ctx.ids?.label ?? `signature-pad:${ctx.id}:label`;
 const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `signature-pad:${ctx.id}:input`;
 const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
 const getSegmentEl = (ctx) => query(getControlEl(ctx), "[data-part=segment]");
-const getDataUrl$1 = (ctx, options) => {
-	return getDataUrl(getSegmentEl(ctx), options);
+const getDataUrl = (ctx, options) => {
+	return getDataUrl$1(getSegmentEl(ctx), options);
 };
 
 //#endregion
@@ -41,7 +41,7 @@ function connect(service, normalize) {
 		},
 		getDataUrl(type, quality) {
 			if (computed("isEmpty")) return Promise.resolve("");
-			return getDataUrl$1(scope, {
+			return getDataUrl(scope, {
 				type,
 				quality
 			});
@@ -293,7 +293,7 @@ const machine = createMachine({
 					paths: [...context.get("paths")],
 					getDataUrl(type, quality = .92) {
 						if (computed("isEmpty")) return Promise.resolve("");
-						return getDataUrl$1(scope, {
+						return getDataUrl(scope, {
 							type,
 							quality
 						});

package/dist/machines/slider/index.cjs

@@ -1,7 +1,7 @@
 const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
-const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
-const require_utils = require('../../utils-CtgLe8Vv.cjs');
-const require_core = require('../../core-DHn58LRl.cjs');
+const require_dom_query = require('../../dom-query-fmUvyB3x.cjs');
+const require_utils = require('../../utils-CMs0714u.cjs');
+const require_core = require('../../core-BXoiGBfo.cjs');
 const require_create_props = require('../../create-props-l5q5b8Wo.cjs');
 
 //#region src/machines/slider/slider.anatomy.ts
@@ -25,20 +25,50 @@ const getThumbEls = (ctx) => require_dom_query.queryAll(getControlEl(ctx), "[rol
 const getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 const getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
 const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getThumbInset = (thumbSize, thumbAlignment, orientation) => {
+	return thumbAlignment === "contain" ? (orientation === "vertical" ? thumbSize?.height ?? 0 : thumbSize?.width ?? 0) / 2 : 0;
+};
 const getPointValue = (params, point) => {
-	const { prop, scope, refs } = params;
+	const { context, prop, scope, refs } = params;
 	const controlEl = getControlEl(scope);
 	if (!controlEl) return;
 	const offset = refs.get("thumbDragOffset");
-	return require_utils.getPercentValue(require_dom_query.getRelativePoint({
+	return require_utils.getPercentValue(getRelativePointWithInset({
 		x: point.x - (offset?.x ?? 0),
 		y: point.y - (offset?.y ?? 0)
-	}, controlEl).getPercentValue({
+	}, controlEl, getThumbInset(context.get("thumbSize"), prop("thumbAlignment"), prop("orientation"))).getPercentValue({
 		orientation: prop("orientation"),
 		dir: prop("dir"),
 		inverted: { y: true }
 	}), prop("min"), prop("max"), prop("step"));
 };
+function getRelativePointWithInset(point, element, inset) {
+	const { left, top, width, height } = element.getBoundingClientRect();
+	const effectiveWidth = width - inset * 2;
+	const effectiveHeight = height - inset * 2;
+	const effectiveLeft = left + inset;
+	const effectiveTop = top + inset;
+	const offset = {
+		x: point.x - effectiveLeft,
+		y: point.y - effectiveTop
+	};
+	const percent = {
+		x: effectiveWidth > 0 ? require_utils.clampPercent(offset.x / effectiveWidth) : 0,
+		y: effectiveHeight > 0 ? require_utils.clampPercent(offset.y / effectiveHeight) : 0
+	};
+	function getPercentValue$1(options = {}) {
+		const { dir = "ltr", orientation = "horizontal", inverted } = options;
+		const invertX = typeof inverted === "object" ? inverted.x : inverted;
+		const invertY = typeof inverted === "object" ? inverted.y : inverted;
+		if (orientation === "horizontal") return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
+		return invertY ? 1 - percent.y : percent.y;
+	}
+	return {
+		offset,
+		percent,
+		getPercentValue: getPercentValue$1
+	};
+}
 const dispatchChangeEvent = (ctx, value) => {
 	value.forEach((value$1, index) => {
 		const inputEl = getHiddenInputEl(ctx, index);
@@ -196,6 +226,92 @@ function getMarkerGroupStyle() {
 
 //#endregion
 //#region src/machines/slider/slider.utils.ts
+function getThumbBounds(ctx) {
+	const { index, values, min, max, gap } = ctx;
+	const prevThumb = values[index - 1];
+	const nextThumb = values[index + 1];
+	return {
+		min: prevThumb != null ? prevThumb + gap : min,
+		max: nextThumb != null ? nextThumb - gap : max
+	};
+}
+function round(value) {
+	return Math.round(value * 1e10) / 1e10;
+}
+function handleNone(ctx) {
+	const { index, value, values } = ctx;
+	const bounds = getThumbBounds(ctx);
+	const nextValues = values.slice();
+	nextValues[index] = round(require_utils.clampValue(value, bounds.min, bounds.max));
+	return {
+		values: nextValues,
+		index,
+		swapped: false
+	};
+}
+function handlePush(ctx) {
+	const { index, value, values, min, max, gap } = ctx;
+	const nextValues = values.slice();
+	nextValues[index] = round(require_utils.clampValue(value, min + index * gap, max - (values.length - 1 - index) * gap));
+	for (let i = index + 1; i < values.length; i++) {
+		const minAllowed = nextValues[i - 1] + gap;
+		if (nextValues[i] < minAllowed) nextValues[i] = round(minAllowed);
+	}
+	for (let i = index - 1; i >= 0; i--) {
+		const maxAllowed = nextValues[i + 1] - gap;
+		if (nextValues[i] > maxAllowed) nextValues[i] = round(maxAllowed);
+	}
+	return {
+		values: nextValues,
+		index,
+		swapped: false
+	};
+}
+function handleSwap(ctx, startValue) {
+	const { index, value, values, gap } = ctx;
+	const prevThumb = values[index - 1];
+	const nextThumb = values[index + 1];
+	const crossingNext = nextThumb != null && value >= nextThumb && value > startValue;
+	const crossingPrev = prevThumb != null && value <= prevThumb && value < startValue;
+	if (!crossingNext && !crossingPrev) return handleNone(ctx);
+	const swapIndex = crossingNext ? index + 1 : index - 1;
+	const nextValues = values.slice();
+	const bounds = getThumbBounds({
+		...ctx,
+		index: swapIndex
+	});
+	nextValues[swapIndex] = round(require_utils.clampValue(value, bounds.min, bounds.max));
+	nextValues[index] = values[swapIndex];
+	if (crossingNext && nextValues[index] > nextValues[swapIndex] - gap) nextValues[index] = round(nextValues[swapIndex] - gap);
+	else if (crossingPrev && nextValues[index] < nextValues[swapIndex] + gap) nextValues[index] = round(nextValues[swapIndex] + gap);
+	return {
+		values: nextValues,
+		index: swapIndex,
+		swapped: true
+	};
+}
+function resolveThumbCollision(behavior, index, value, values, min, max, step, minStepsBetweenThumbs, startValue) {
+	if (values.length === 1) return {
+		values: [round(require_utils.clampValue(value, min, max))],
+		index: 0,
+		swapped: false
+	};
+	const ctx = {
+		behavior,
+		index,
+		value,
+		values,
+		min,
+		max,
+		gap: step * minStepsBetweenThumbs
+	};
+	switch (behavior) {
+		case "push": return handlePush(ctx);
+		case "swap": return handleSwap(ctx, startValue ?? values[index]);
+		case "none":
+		default: return handleNone(ctx);
+	}
+}
 function normalizeValues(params, nextValues) {
 	return nextValues.map((value, index) => {
 		return constrainValue(params, value, index);
@@ -644,6 +760,7 @@ const machine = require_core.createMachine({
 			thumbAlignment: "contain",
 			origin: "start",
 			orientation: "horizontal",
+			thumbCollisionBehavior: "none",
 			minStepsBetweenThumbs,
 			...props$1,
 			defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
@@ -684,7 +801,10 @@ const machine = require_core.createMachine({
 		};
 	},
 	refs() {
-		return { thumbDragOffset: null };
+		return {
+			thumbDragOffset: null,
+			thumbDragStartValue: null
+		};
 	},
 	computed: {
 		isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
@@ -722,6 +842,7 @@ const machine = require_core.createMachine({
 				target: "dragging",
 				actions: [
 					"setClosestThumbIndex",
+					"setThumbDragStartValue",
 					"setPointerValue",
 					"focusActiveThumb"
 				]
@@ -735,6 +856,7 @@ const machine = require_core.createMachine({
 				actions: [
 					"setFocusedIndex",
 					"setThumbDragOffset",
+					"setThumbDragStartValue",
 					"focusActiveThumb"
 				]
 			}
@@ -746,6 +868,7 @@ const machine = require_core.createMachine({
 					target: "dragging",
 					actions: [
 						"setClosestThumbIndex",
+						"setThumbDragStartValue",
 						"setPointerValue",
 						"focusActiveThumb"
 					]
@@ -755,6 +878,7 @@ const machine = require_core.createMachine({
 					actions: [
 						"setFocusedIndex",
 						"setThumbDragOffset",
+						"setThumbDragStartValue",
 						"focusActiveThumb"
 					]
 				},
@@ -774,12 +898,20 @@ const machine = require_core.createMachine({
 			on: {
 				POINTER_UP: {
 					target: "focus",
-					actions: ["invokeOnChangeEnd", "clearThumbDragOffset"]
+					actions: [
+						"invokeOnChangeEnd",
+						"clearThumbDragOffset",
+						"clearThumbDragStartValue"
+					]
 				},
 				POINTER_MOVE: { actions: ["setPointerValue"] },
 				POINTER_CANCEL: {
 					target: "idle",
-					actions: ["clearFocusedIndex", "clearThumbDragOffset"]
+					actions: [
+						"clearFocusedIndex",
+						"clearThumbDragOffset",
+						"clearThumbDragStartValue"
+					]
 				}
 			}
 		}
@@ -858,14 +990,22 @@ const machine = require_core.createMachine({
 			clearThumbDragOffset({ refs }) {
 				refs.set("thumbDragOffset", null);
 			},
+			setThumbDragStartValue({ refs, context }) {
+				refs.set("thumbDragStartValue", context.get("value").slice());
+			},
+			clearThumbDragStartValue({ refs }) {
+				refs.set("thumbDragStartValue", null);
+			},
 			setPointerValue(params) {
 				queueMicrotask(() => {
-					const { context, event } = params;
+					const { context, event, prop, refs } = params;
 					const pointValue = getPointValue(params, event.point);
 					if (pointValue == null) return;
 					const focusedIndex = context.get("focusedIndex");
-					const value = constrainValue(params, pointValue, focusedIndex);
-					context.set("value", (prev) => require_utils.setValueAtIndex(prev, focusedIndex, value));
+					const startValues = refs.get("thumbDragStartValue");
+					const result = resolveThumbCollision(prop("thumbCollisionBehavior"), focusedIndex, pointValue, context.get("value"), prop("min"), prop("max"), prop("step"), prop("minStepsBetweenThumbs"), startValues?.[focusedIndex]);
+					if (result.swapped) context.set("focusedIndex", result.index);
+					context.set("value", result.values);
 				});
 			},
 			focusActiveThumb({ scope, context }) {
@@ -934,7 +1074,7 @@ const props = require_create_props.createProps()([
 	"readOnly",
 	"step",
 	"thumbAlignment",
-	"thumbAlignment",
+	"thumbCollisionBehavior",
 	"thumbSize",
 	"value",
 	"defaultValue"

package/dist/machines/slider/index.d.cts

@@ -1,11 +1,12 @@
 import { n as AnatomyInstance } from "../../create-anatomy-smWrirg1.cjs";
-import { p as Machine, u as EventObject, y as Service } from "../../types-BIy26Uwn.cjs";
-import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-UNyqrBDu.cjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
 
 //#region src/machines/slider/slider.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "label" | "track" | "thumb" | "valueText" | "markerGroup" | "marker" | "range" | "draggingIndicator">;
+declare const anatomy: AnatomyInstance<"root" | "track" | "thumb" | "label" | "marker" | "range" | "valueText" | "control" | "markerGroup" | "draggingIndicator">;
 //#endregion
 //#region src/machines/slider/slider.types.d.ts
+type ThumbCollisionBehavior = "none" | "push" | "swap";
 interface ValueChangeDetails {
   value: number[];
 }
@@ -54,8 +55,9 @@ interface SliderProps extends DirectionProperty, CommonProperties {
     width: number;
     height: number;
   } | undefined;
+  thumbCollisionBehavior?: ThumbCollisionBehavior | undefined;
 }
-type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs";
+type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs" | "thumbCollisionBehavior";
 type Computed = Readonly<{
   hasMeasuredThumbSize: boolean;
   isInteractive: boolean;
@@ -80,6 +82,7 @@ interface SliderSchema {
       x: number;
       y: number;
     } | null;
+    thumbDragStartValue: number[] | null;
   };
   computed: Computed;
   event: EventObject;

package/dist/machines/slider/index.d.mts

@@ -1,11 +1,12 @@
 import { n as AnatomyInstance } from "../../create-anatomy-DHVOqZET.mjs";
-import { p as Machine, u as EventObject, y as Service } from "../../types-jyV564Ip.mjs";
-import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVcPBg7R.mjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DL5AIQk5.mjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BuUzJjaP.mjs";
 
 //#region src/machines/slider/slider.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "label" | "track" | "thumb" | "valueText" | "markerGroup" | "marker" | "range" | "draggingIndicator">;
+declare const anatomy: AnatomyInstance<"root" | "track" | "thumb" | "label" | "marker" | "range" | "valueText" | "control" | "markerGroup" | "draggingIndicator">;
 //#endregion
 //#region src/machines/slider/slider.types.d.ts
+type ThumbCollisionBehavior = "none" | "push" | "swap";
 interface ValueChangeDetails {
   value: number[];
 }
@@ -54,8 +55,9 @@ interface SliderProps extends DirectionProperty, CommonProperties {
     width: number;
     height: number;
   } | undefined;
+  thumbCollisionBehavior?: ThumbCollisionBehavior | undefined;
 }
-type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs";
+type PropsWithDefault = "dir" | "min" | "max" | "step" | "orientation" | "defaultValue" | "origin" | "thumbAlignment" | "minStepsBetweenThumbs" | "thumbCollisionBehavior";
 type Computed = Readonly<{
   hasMeasuredThumbSize: boolean;
   isInteractive: boolean;
@@ -80,6 +82,7 @@ interface SliderSchema {
       x: number;
       y: number;
     } | null;
+    thumbDragStartValue: number[] | null;
   };
   computed: Computed;
   event: EventObject;

package/dist/machines/slider/index.mjs

@@ -1,7 +1,7 @@
 import { t as createAnatomy } from "../../create-anatomy-CArN8dVu.mjs";
-import { S as queryAll, T as trackPointerMove, U as raf, _n as ariaAttr, at as setElementValue, bt as isModifierKey, dt as getEventStep, k as getRelativePoint, lt as getEventKey, ot as trackFormControl, p as resizeObserverBorderBox, rt as dispatchInputValueEvent, ut as getEventPoint, vn as dataAttr, yt as isLeftClick } from "../../dom-query-Bwyyt0Vp.mjs";
-import { B as snapValueToStep, C as getPercentValue, E as getValueRanges, H as toPx, N as isValueWithinRange, O as getValueTransformer, S as getNextStepValue, T as getValuePercent, W as callAll, ft as isEqual, g as clampValue, p as pick, u as createSplitProps, vt as first, w as getPreviousStepValue, wt as last, z as setValueAtIndex } from "../../utils-BIwaJq8z.mjs";
-import { a as createMachine, s as memo } from "../../core-DVmt6PX7.mjs";
+import { S as queryAll, T as trackPointerMove, U as raf, _n as ariaAttr, at as setElementValue, bt as isModifierKey, dt as getEventStep, lt as getEventKey, ot as trackFormControl, p as resizeObserverBorderBox, rt as dispatchInputValueEvent, ut as getEventPoint, vn as dataAttr, yt as isLeftClick } from "../../dom-query-BaSlGC4X.mjs";
+import { B as snapValueToStep, C as getPercentValue, E as getValueRanges, H as toPx, N as isValueWithinRange, O as getValueTransformer, S as getNextStepValue, T as getValuePercent, W as callAll, ft as isEqual, g as clampValue, h as clampPercent, p as pick, u as createSplitProps, vt as first, w as getPreviousStepValue, wt as last, z as setValueAtIndex } from "../../utils-B_odTlcq.mjs";
+import { a as createMachine, s as memo } from "../../core-BLrKf6Qi.mjs";
 import { t as createProps } from "../../create-props-SRSjdUTq.mjs";
 
 //#region src/machines/slider/slider.anatomy.ts
@@ -25,20 +25,50 @@ const getThumbEls = (ctx) => queryAll(getControlEl(ctx), "[role=slider]");
 const getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 const getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
 const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getThumbInset = (thumbSize, thumbAlignment, orientation) => {
+	return thumbAlignment === "contain" ? (orientation === "vertical" ? thumbSize?.height ?? 0 : thumbSize?.width ?? 0) / 2 : 0;
+};
 const getPointValue = (params, point) => {
-	const { prop, scope, refs } = params;
+	const { context, prop, scope, refs } = params;
 	const controlEl = getControlEl(scope);
 	if (!controlEl) return;
 	const offset = refs.get("thumbDragOffset");
-	return getPercentValue(getRelativePoint({
+	return getPercentValue(getRelativePointWithInset({
 		x: point.x - (offset?.x ?? 0),
 		y: point.y - (offset?.y ?? 0)
-	}, controlEl).getPercentValue({
+	}, controlEl, getThumbInset(context.get("thumbSize"), prop("thumbAlignment"), prop("orientation"))).getPercentValue({
 		orientation: prop("orientation"),
 		dir: prop("dir"),
 		inverted: { y: true }
 	}), prop("min"), prop("max"), prop("step"));
 };
+function getRelativePointWithInset(point, element, inset) {
+	const { left, top, width, height } = element.getBoundingClientRect();
+	const effectiveWidth = width - inset * 2;
+	const effectiveHeight = height - inset * 2;
+	const effectiveLeft = left + inset;
+	const effectiveTop = top + inset;
+	const offset = {
+		x: point.x - effectiveLeft,
+		y: point.y - effectiveTop
+	};
+	const percent = {
+		x: effectiveWidth > 0 ? clampPercent(offset.x / effectiveWidth) : 0,
+		y: effectiveHeight > 0 ? clampPercent(offset.y / effectiveHeight) : 0
+	};
+	function getPercentValue$1(options = {}) {
+		const { dir = "ltr", orientation = "horizontal", inverted } = options;
+		const invertX = typeof inverted === "object" ? inverted.x : inverted;
+		const invertY = typeof inverted === "object" ? inverted.y : inverted;
+		if (orientation === "horizontal") return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
+		return invertY ? 1 - percent.y : percent.y;
+	}
+	return {
+		offset,
+		percent,
+		getPercentValue: getPercentValue$1
+	};
+}
 const dispatchChangeEvent = (ctx, value) => {
 	value.forEach((value$1, index) => {
 		const inputEl = getHiddenInputEl(ctx, index);
@@ -196,6 +226,92 @@ function getMarkerGroupStyle() {
 
 //#endregion
 //#region src/machines/slider/slider.utils.ts
+function getThumbBounds(ctx) {
+	const { index, values, min, max, gap } = ctx;
+	const prevThumb = values[index - 1];
+	const nextThumb = values[index + 1];
+	return {
+		min: prevThumb != null ? prevThumb + gap : min,
+		max: nextThumb != null ? nextThumb - gap : max
+	};
+}
+function round(value) {
+	return Math.round(value * 1e10) / 1e10;
+}
+function handleNone(ctx) {
+	const { index, value, values } = ctx;
+	const bounds = getThumbBounds(ctx);
+	const nextValues = values.slice();
+	nextValues[index] = round(clampValue(value, bounds.min, bounds.max));
+	return {
+		values: nextValues,
+		index,
+		swapped: false
+	};
+}
+function handlePush(ctx) {
+	const { index, value, values, min, max, gap } = ctx;
+	const nextValues = values.slice();
+	nextValues[index] = round(clampValue(value, min + index * gap, max - (values.length - 1 - index) * gap));
+	for (let i = index + 1; i < values.length; i++) {
+		const minAllowed = nextValues[i - 1] + gap;
+		if (nextValues[i] < minAllowed) nextValues[i] = round(minAllowed);
+	}
+	for (let i = index - 1; i >= 0; i--) {
+		const maxAllowed = nextValues[i + 1] - gap;
+		if (nextValues[i] > maxAllowed) nextValues[i] = round(maxAllowed);
+	}
+	return {
+		values: nextValues,
+		index,
+		swapped: false
+	};
+}
+function handleSwap(ctx, startValue) {
+	const { index, value, values, gap } = ctx;
+	const prevThumb = values[index - 1];
+	const nextThumb = values[index + 1];
+	const crossingNext = nextThumb != null && value >= nextThumb && value > startValue;
+	const crossingPrev = prevThumb != null && value <= prevThumb && value < startValue;
+	if (!crossingNext && !crossingPrev) return handleNone(ctx);
+	const swapIndex = crossingNext ? index + 1 : index - 1;
+	const nextValues = values.slice();
+	const bounds = getThumbBounds({
+		...ctx,
+		index: swapIndex
+	});
+	nextValues[swapIndex] = round(clampValue(value, bounds.min, bounds.max));
+	nextValues[index] = values[swapIndex];
+	if (crossingNext && nextValues[index] > nextValues[swapIndex] - gap) nextValues[index] = round(nextValues[swapIndex] - gap);
+	else if (crossingPrev && nextValues[index] < nextValues[swapIndex] + gap) nextValues[index] = round(nextValues[swapIndex] + gap);
+	return {
+		values: nextValues,
+		index: swapIndex,
+		swapped: true
+	};
+}
+function resolveThumbCollision(behavior, index, value, values, min, max, step, minStepsBetweenThumbs, startValue) {
+	if (values.length === 1) return {
+		values: [round(clampValue(value, min, max))],
+		index: 0,
+		swapped: false
+	};
+	const ctx = {
+		behavior,
+		index,
+		value,
+		values,
+		min,
+		max,
+		gap: step * minStepsBetweenThumbs
+	};
+	switch (behavior) {
+		case "push": return handlePush(ctx);
+		case "swap": return handleSwap(ctx, startValue ?? values[index]);
+		case "none":
+		default: return handleNone(ctx);
+	}
+}
 function normalizeValues(params, nextValues) {
 	return nextValues.map((value, index) => {
 		return constrainValue(params, value, index);
@@ -644,6 +760,7 @@ const machine = createMachine({
 			thumbAlignment: "contain",
 			origin: "start",
 			orientation: "horizontal",
+			thumbCollisionBehavior: "none",
 			minStepsBetweenThumbs,
 			...props$1,
 			defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
@@ -684,7 +801,10 @@ const machine = createMachine({
 		};
 	},
 	refs() {
-		return { thumbDragOffset: null };
+		return {
+			thumbDragOffset: null,
+			thumbDragStartValue: null
+		};
 	},
 	computed: {
 		isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
@@ -722,6 +842,7 @@ const machine = createMachine({
 				target: "dragging",
 				actions: [
 					"setClosestThumbIndex",
+					"setThumbDragStartValue",
 					"setPointerValue",
 					"focusActiveThumb"
 				]
@@ -735,6 +856,7 @@ const machine = createMachine({
 				actions: [
 					"setFocusedIndex",
 					"setThumbDragOffset",
+					"setThumbDragStartValue",
 					"focusActiveThumb"
 				]
 			}
@@ -746,6 +868,7 @@ const machine = createMachine({
 					target: "dragging",
 					actions: [
 						"setClosestThumbIndex",
+						"setThumbDragStartValue",
 						"setPointerValue",
 						"focusActiveThumb"
 					]
@@ -755,6 +878,7 @@ const machine = createMachine({
 					actions: [
 						"setFocusedIndex",
 						"setThumbDragOffset",
+						"setThumbDragStartValue",
 						"focusActiveThumb"
 					]
 				},
@@ -774,12 +898,20 @@ const machine = createMachine({
 			on: {
 				POINTER_UP: {
 					target: "focus",
-					actions: ["invokeOnChangeEnd", "clearThumbDragOffset"]
+					actions: [
+						"invokeOnChangeEnd",
+						"clearThumbDragOffset",
+						"clearThumbDragStartValue"
+					]
 				},
 				POINTER_MOVE: { actions: ["setPointerValue"] },
 				POINTER_CANCEL: {
 					target: "idle",
-					actions: ["clearFocusedIndex", "clearThumbDragOffset"]
+					actions: [
+						"clearFocusedIndex",
+						"clearThumbDragOffset",
+						"clearThumbDragStartValue"
+					]
 				}
 			}
 		}
@@ -858,14 +990,22 @@ const machine = createMachine({
 			clearThumbDragOffset({ refs }) {
 				refs.set("thumbDragOffset", null);
 			},
+			setThumbDragStartValue({ refs, context }) {
+				refs.set("thumbDragStartValue", context.get("value").slice());
+			},
+			clearThumbDragStartValue({ refs }) {
+				refs.set("thumbDragStartValue", null);
+			},
 			setPointerValue(params) {
 				queueMicrotask(() => {
-					const { context, event } = params;
+					const { context, event, prop, refs } = params;
 					const pointValue = getPointValue(params, event.point);
 					if (pointValue == null) return;
 					const focusedIndex = context.get("focusedIndex");
-					const value = constrainValue(params, pointValue, focusedIndex);
-					context.set("value", (prev) => setValueAtIndex(prev, focusedIndex, value));
+					const startValues = refs.get("thumbDragStartValue");
+					const result = resolveThumbCollision(prop("thumbCollisionBehavior"), focusedIndex, pointValue, context.get("value"), prop("min"), prop("max"), prop("step"), prop("minStepsBetweenThumbs"), startValues?.[focusedIndex]);
+					if (result.swapped) context.set("focusedIndex", result.index);
+					context.set("value", result.values);
 				});
 			},
 			focusActiveThumb({ scope, context }) {
@@ -934,7 +1074,7 @@ const props = createProps()([
 	"readOnly",
 	"step",
 	"thumbAlignment",
-	"thumbAlignment",
+	"thumbCollisionBehavior",
 	"thumbSize",
 	"value",
 	"defaultValue"

package/dist/machines/splitter/index.cjs

@@ -1,7 +1,7 @@
 const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
-const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
-const require_utils = require('../../utils-CtgLe8Vv.cjs');
-const require_core = require('../../core-DHn58LRl.cjs');
+const require_dom_query = require('../../dom-query-fmUvyB3x.cjs');
+const require_utils = require('../../utils-CMs0714u.cjs');
+const require_core = require('../../core-BXoiGBfo.cjs');
 const require_create_props = require('../../create-props-l5q5b8Wo.cjs');
 
 //#region src/machines/splitter/splitter.anatomy.ts

package/dist/machines/splitter/index.d.cts

@@ -1,6 +1,6 @@
 import { n as AnatomyInstance } from "../../create-anatomy-smWrirg1.cjs";
-import { p as Machine, u as EventObject, y as Service } from "../../types-BIy26Uwn.cjs";
-import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-UNyqrBDu.cjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
 
 //#region src/machines/splitter/splitter.anatomy.d.ts
 declare const anatomy: AnatomyInstance<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator">;

package/dist/machines/splitter/index.d.mts

@@ -1,6 +1,6 @@
 import { n as AnatomyInstance } from "../../create-anatomy-DHVOqZET.mjs";
-import { p as Machine, u as EventObject, y as Service } from "../../types-jyV564Ip.mjs";
-import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVcPBg7R.mjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DL5AIQk5.mjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BuUzJjaP.mjs";
 
 //#region src/machines/splitter/splitter.anatomy.d.ts
 declare const anatomy: AnatomyInstance<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator">;