@sprawlify/primitives 0.0.30 → 0.0.31

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

@@ -6,7 +6,7 @@ import { r as PersistentElementOptions, t as DismissableElementHandlers } from "
 import { c as Placement, d as PositioningOptions } from "../../types-TUsgVjZA.cjs";
 
 //#region src/machines/popover/popover.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"trigger" | "indicator" | "arrow" | "arrowTip" | "positioner" | "content" | "title" | "closeTrigger" | "anchor" | "description">;
+declare const anatomy: AnatomyInstance<"trigger" | "title" | "content" | "indicator" | "arrow" | "arrowTip" | "positioner" | "description" | "closeTrigger" | "anchor">;
 //#endregion
 //#region src/machines/popover/popover.types.d.ts
 interface OpenChangeDetails {

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

@@ -6,7 +6,7 @@ import { r as PersistentElementOptions, t as DismissableElementHandlers } from "
 import { p as PositioningOptions, u as Placement } from "../../index-BlM1bSkX.mjs";
 
 //#region src/machines/popover/popover.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"trigger" | "indicator" | "arrow" | "arrowTip" | "positioner" | "content" | "title" | "closeTrigger" | "anchor" | "description">;
+declare const anatomy: AnatomyInstance<"trigger" | "title" | "content" | "indicator" | "arrow" | "arrowTip" | "positioner" | "description" | "closeTrigger" | "anchor">;
 //#endregion
 //#region src/machines/popover/popover.types.d.ts
 interface OpenChangeDetails {

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

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-BIy26U
 import { b as NormalizeProps, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-UNyqrBDu.cjs";
 
 //#region src/machines/progress/progress.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "track" | "circle" | "valueText" | "range" | "view" | "circleTrack" | "circleRange">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "valueText" | "track" | "range" | "circle" | "view" | "circleTrack" | "circleRange">;
 //#endregion
 //#region src/machines/progress/progress.types.d.ts
 type ProgressState = "indeterminate" | "loading" | "complete";

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

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-jyV564
 import { b as NormalizeProps, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVcPBg7R.mjs";
 
 //#region src/machines/progress/progress.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "track" | "circle" | "valueText" | "range" | "view" | "circleTrack" | "circleRange">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "valueText" | "track" | "range" | "circle" | "view" | "circleTrack" | "circleRange">;
 //#endregion
 //#region src/machines/progress/progress.types.d.ts
 type ProgressState = "indeterminate" | "loading" | "complete";

package/dist/machines/qr-code/index.d.cts

@@ -5,7 +5,7 @@ import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as Comm
 import { QrCodeGenerateOptions, QrCodeGenerateOptions as QrCodeGenerateOptions$1, QrCodeGenerateResult, QrCodeGenerateResult as QrCodeGenerateResult$1 } from "uqr";
 
 //#region src/machines/qr-code/qr-code.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "pattern" | "frame" | "overlay" | "downloadTrigger">;
+declare const anatomy: AnatomyInstance<"pattern" | "root" | "frame" | "overlay" | "downloadTrigger">;
 //#endregion
 //#region src/machines/qr-code/qr-code.types.d.ts
 interface ValueChangeDetails {

package/dist/machines/qr-code/index.d.mts

@@ -5,7 +5,7 @@ import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as Comm
 import { QrCodeGenerateOptions, QrCodeGenerateOptions as QrCodeGenerateOptions$1, QrCodeGenerateResult, QrCodeGenerateResult as QrCodeGenerateResult$1 } from "uqr";
 
 //#region src/machines/qr-code/qr-code.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "pattern" | "frame" | "overlay" | "downloadTrigger">;
+declare const anatomy: AnatomyInstance<"pattern" | "root" | "frame" | "overlay" | "downloadTrigger">;
 //#endregion
 //#region src/machines/qr-code/qr-code.types.d.ts
 interface ValueChangeDetails {

package/dist/machines/radio-group/index.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-BIy26U
 import { b as NormalizeProps, g as RequiredBy, m as Rect, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-UNyqrBDu.cjs";
 
 //#region src/machines/radio-group/radio-group.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "item" | "itemControl" | "itemText">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "item" | "indicator" | "itemText" | "itemControl">;
 //#endregion
 //#region src/machines/radio-group/radio-group.types.d.ts
 interface ValueChangeDetails {

package/dist/machines/radio-group/index.d.mts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-jyV564
 import { b as NormalizeProps, g as RequiredBy, m as Rect, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVcPBg7R.mjs";
 
 //#region src/machines/radio-group/radio-group.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "item" | "itemControl" | "itemText">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "item" | "indicator" | "itemText" | "itemControl">;
 //#endregion
 //#region src/machines/radio-group/radio-group.types.d.ts
 interface ValueChangeDetails {

package/dist/machines/rating-group/index.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-BIy26U
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-UNyqrBDu.cjs";
 
 //#region src/machines/rating-group/rating-group.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "label" | "item">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "item">;
 //#endregion
 //#region src/machines/rating-group/rating-group.types.d.ts
 interface ValueChangeDetails {

package/dist/machines/rating-group/index.d.mts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-jyV564
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVcPBg7R.mjs";
 
 //#region src/machines/rating-group/rating-group.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "label" | "item">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "item">;
 //#endregion
 //#region src/machines/rating-group/rating-group.types.d.ts
 interface ValueChangeDetails {

package/dist/machines/scroll-area/index.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-BIy26U
 import { _ as Size, b as NormalizeProps, d as Orientation, p as Point, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-UNyqrBDu.cjs";
 
 //#region src/machines/scroll-area/scroll-area.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "content" | "viewport" | "thumb" | "scrollbar" | "corner">;
+declare const anatomy: AnatomyInstance<"root" | "thumb" | "viewport" | "content" | "scrollbar" | "corner">;
 //#endregion
 //#region src/machines/scroll-area/utils/timeout.d.ts
 declare class Timeout {

package/dist/machines/scroll-area/index.d.mts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-jyV564
 import { _ as Size, b as NormalizeProps, d as Orientation, p as Point, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVcPBg7R.mjs";
 
 //#region src/machines/scroll-area/scroll-area.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "content" | "viewport" | "thumb" | "scrollbar" | "corner">;
+declare const anatomy: AnatomyInstance<"root" | "thumb" | "viewport" | "content" | "scrollbar" | "corner">;
 //#endregion
 //#region src/machines/scroll-area/utils/timeout.d.ts
 declare class Timeout {

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

@@ -8,7 +8,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { c as Placement, d as PositioningOptions } from "../../types-TUsgVjZA.cjs";
 
 //#region src/machines/select/select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "trigger" | "indicator" | "label" | "positioner" | "content" | "item" | "valueText" | "itemText" | "itemIndicator" | "clearTrigger" | "itemGroup" | "list" | "itemGroupLabel">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "valueText" | "control" | "item" | "itemGroup" | "trigger" | "clearTrigger" | "content" | "indicator" | "itemIndicator" | "itemText" | "list" | "positioner" | "itemGroupLabel">;
 //#endregion
 //#region src/machines/select/select.collection.d.ts
 declare const collection: {

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

@@ -8,7 +8,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { p as PositioningOptions, u as Placement } from "../../index-BlM1bSkX.mjs";
 
 //#region src/machines/select/select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "trigger" | "indicator" | "label" | "positioner" | "content" | "item" | "valueText" | "itemText" | "itemIndicator" | "clearTrigger" | "itemGroup" | "list" | "itemGroupLabel">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "valueText" | "control" | "item" | "itemGroup" | "trigger" | "clearTrigger" | "content" | "indicator" | "itemIndicator" | "itemText" | "list" | "positioner" | "itemGroupLabel">;
 //#endregion
 //#region src/machines/select/select.collection.d.ts
 declare const collection: {

package/dist/machines/signature-pad/index.d.cts

@@ -4,7 +4,7 @@ import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as Comm
 import { StrokeOptions } from "perfect-freehand";
 
 //#region src/machines/signature-pad/signature-pad.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "label" | "segment" | "segmentPath" | "guide" | "clearTrigger">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "clearTrigger" | "segment" | "segmentPath" | "guide">;
 //#endregion
 //#region src/machines/signature-pad/signature-pad.types.d.ts
 interface Point {

package/dist/machines/signature-pad/index.d.mts

@@ -4,7 +4,7 @@ import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as Comm
 import { StrokeOptions } from "perfect-freehand";
 
 //#region src/machines/signature-pad/signature-pad.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "control" | "label" | "segment" | "segmentPath" | "guide" | "clearTrigger">;
+declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "clearTrigger" | "segment" | "segmentPath" | "guide">;
 //#endregion
 //#region src/machines/signature-pad/signature-pad.types.d.ts
 interface Point {

package/dist/machines/slider/index.cjs

@@ -196,6 +196,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 +730,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 +771,10 @@ const machine = require_core.createMachine({
 		};
 	},
 	refs() {
-		return { thumbDragOffset: null };
+		return {
+			thumbDragOffset: null,
+			thumbDragStartValue: null
+		};
 	},
 	computed: {
 		isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
@@ -722,6 +812,7 @@ const machine = require_core.createMachine({
 				target: "dragging",
 				actions: [
 					"setClosestThumbIndex",
+					"setThumbDragStartValue",
 					"setPointerValue",
 					"focusActiveThumb"
 				]
@@ -735,6 +826,7 @@ const machine = require_core.createMachine({
 				actions: [
 					"setFocusedIndex",
 					"setThumbDragOffset",
+					"setThumbDragStartValue",
 					"focusActiveThumb"
 				]
 			}
@@ -746,6 +838,7 @@ const machine = require_core.createMachine({
 					target: "dragging",
 					actions: [
 						"setClosestThumbIndex",
+						"setThumbDragStartValue",
 						"setPointerValue",
 						"focusActiveThumb"
 					]
@@ -755,6 +848,7 @@ const machine = require_core.createMachine({
 					actions: [
 						"setFocusedIndex",
 						"setThumbDragOffset",
+						"setThumbDragStartValue",
 						"focusActiveThumb"
 					]
 				},
@@ -774,12 +868,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 +960,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 +1044,7 @@ const props = require_create_props.createProps()([
 	"readOnly",
 	"step",
 	"thumbAlignment",
-	"thumbAlignment",
+	"thumbCollisionBehavior",
 	"thumbSize",
 	"value",
 	"defaultValue"

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

@@ -3,9 +3,10 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-BIy26U
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-UNyqrBDu.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" | "label" | "valueText" | "control" | "track" | "thumb" | "range" | "markerGroup" | "marker" | "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

@@ -3,9 +3,10 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-jyV564
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVcPBg7R.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" | "label" | "valueText" | "control" | "track" | "thumb" | "range" | "markerGroup" | "marker" | "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

@@ -196,6 +196,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 +730,7 @@ const machine = createMachine({
 			thumbAlignment: "contain",
 			origin: "start",
 			orientation: "horizontal",
+			thumbCollisionBehavior: "none",
 			minStepsBetweenThumbs,
 			...props$1,
 			defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
@@ -684,7 +771,10 @@ const machine = createMachine({
 		};
 	},
 	refs() {
-		return { thumbDragOffset: null };
+		return {
+			thumbDragOffset: null,
+			thumbDragStartValue: null
+		};
 	},
 	computed: {
 		isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
@@ -722,6 +812,7 @@ const machine = createMachine({
 				target: "dragging",
 				actions: [
 					"setClosestThumbIndex",
+					"setThumbDragStartValue",
 					"setPointerValue",
 					"focusActiveThumb"
 				]
@@ -735,6 +826,7 @@ const machine = createMachine({
 				actions: [
 					"setFocusedIndex",
 					"setThumbDragOffset",
+					"setThumbDragStartValue",
 					"focusActiveThumb"
 				]
 			}
@@ -746,6 +838,7 @@ const machine = createMachine({
 					target: "dragging",
 					actions: [
 						"setClosestThumbIndex",
+						"setThumbDragStartValue",
 						"setPointerValue",
 						"focusActiveThumb"
 					]
@@ -755,6 +848,7 @@ const machine = createMachine({
 					actions: [
 						"setFocusedIndex",
 						"setThumbDragOffset",
+						"setThumbDragStartValue",
 						"focusActiveThumb"
 					]
 				},
@@ -774,12 +868,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 +960,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 +1044,7 @@ const props = createProps()([
 	"readOnly",
 	"step",
 	"thumbAlignment",
-	"thumbAlignment",
+	"thumbCollisionBehavior",
 	"thumbSize",
 	"value",
 	"defaultValue"

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

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-BIy26U
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-UNyqrBDu.cjs";
 
 //#region src/machines/steps/steps.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "trigger" | "indicator" | "content" | "progress" | "item" | "separator" | "list" | "nextTrigger" | "prevTrigger">;
+declare const anatomy: AnatomyInstance<"root" | "item" | "trigger" | "progress" | "content" | "nextTrigger" | "prevTrigger" | "indicator" | "list" | "separator">;
 //#endregion
 //#region src/machines/steps/steps.types.d.ts
 interface StepChangeDetails {