@sprawlify/primitives 0.0.52 → 0.0.53

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

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu6
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
 
 //#region src/machines/pagination/pagination.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "item" | "ellipsis" | "firstTrigger" | "prevTrigger" | "nextTrigger" | "lastTrigger">;
+declare const anatomy: AnatomyInstance<"root" | "item" | "nextTrigger" | "prevTrigger" | "ellipsis" | "firstTrigger" | "lastTrigger">;
 //#endregion
 //#region src/machines/pagination/pagination.types.d.ts
 interface PageChangeDetails {

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

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DL5AIQ
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BuUzJjaP.mjs";
 
 //#region src/machines/pagination/pagination.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "item" | "ellipsis" | "firstTrigger" | "prevTrigger" | "nextTrigger" | "lastTrigger">;
+declare const anatomy: AnatomyInstance<"root" | "item" | "nextTrigger" | "prevTrigger" | "ellipsis" | "firstTrigger" | "lastTrigger">;
 //#endregion
 //#region src/machines/pagination/pagination.types.d.ts
 interface PageChangeDetails {

package/dist/machines/password-input/index.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu6
 import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
 
 //#region src/machines/password-input/password-input.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control" | "input" | "visibilityTrigger">;
+declare const anatomy: AnatomyInstance<"input" | "root" | "indicator" | "label" | "control" | "visibilityTrigger">;
 //#endregion
 //#region src/machines/password-input/password-input.types.d.ts
 interface VisibilityChangeDetails {

package/dist/machines/password-input/index.d.mts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DL5AIQ
 import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BuUzJjaP.mjs";
 
 //#region src/machines/password-input/password-input.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control" | "input" | "visibilityTrigger">;
+declare const anatomy: AnatomyInstance<"input" | "root" | "indicator" | "label" | "control" | "visibilityTrigger">;
 //#endregion
 //#region src/machines/password-input/password-input.types.d.ts
 interface VisibilityChangeDetails {

package/dist/machines/pin-input/index.d.cts

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

package/dist/machines/pin-input/index.d.mts

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

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-D5ziaMrd.cjs";
 
 //#region src/machines/popover/popover.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"trigger" | "content" | "indicator" | "title" | "arrow" | "description" | "closeTrigger" | "arrowTip" | "positioner" | "anchor">;
+declare const anatomy: AnatomyInstance<"content" | "closeTrigger" | "title" | "description" | "positioner" | "arrow" | "arrowTip" | "trigger" | "indicator" | "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-BTi1wETB.mjs";
 
 //#region src/machines/popover/popover.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"trigger" | "content" | "indicator" | "title" | "arrow" | "description" | "closeTrigger" | "arrowTip" | "positioner" | "anchor">;
+declare const anatomy: AnatomyInstance<"content" | "closeTrigger" | "title" | "description" | "positioner" | "arrow" | "arrowTip" | "trigger" | "indicator" | "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-DejIu6
 import { b as NormalizeProps, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
 
 //#region src/machines/progress/progress.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "valueText" | "track" | "range" | "circle" | "view" | "circleTrack" | "circleRange">;
+declare const anatomy: AnatomyInstance<"track" | "root" | "label" | "circle" | "view" | "valueText" | "range" | "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-DL5AIQ
 import { b as NormalizeProps, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BuUzJjaP.mjs";
 
 //#region src/machines/progress/progress.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "valueText" | "track" | "range" | "circle" | "view" | "circleTrack" | "circleRange">;
+declare const anatomy: AnatomyInstance<"track" | "root" | "label" | "circle" | "view" | "valueText" | "range" | "circleTrack" | "circleRange">;
 //#endregion
 //#region src/machines/progress/progress.types.d.ts
 type ProgressState = "indeterminate" | "loading" | "complete";

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

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

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

@@ -1,6 +1,6 @@
 import { n as AnatomyInstance } from "../../create-anatomy-smWrirg1.cjs";
 import { r as CollectionOptions, t as CollectionItem } from "../../types-CADkcKtr.cjs";
-import { t as ListCollection } from "../../list-collection-BvMwDNHf.cjs";
+import { t as ListCollection } from "../../list-collection-BslnP0r-.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";
 import { n as TypeaheadState } from "../../typeahead-BdNwVP09.cjs";
@@ -8,7 +8,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { c as Placement, d as PositioningOptions } from "../../types-D5ziaMrd.cjs";
 
 //#region src/machines/select/select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator" | "label" | "valueText" | "control" | "item" | "itemText" | "itemIndicator" | "clearTrigger" | "positioner" | "itemGroup" | "itemGroupLabel">;
+declare const anatomy: AnatomyInstance<"content" | "positioner" | "trigger" | "root" | "indicator" | "label" | "control" | "item" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "list" | "valueText">;
 //#endregion
 //#region src/machines/select/select.collection.d.ts
 declare const collection: {

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

@@ -1,6 +1,6 @@
 import { n as AnatomyInstance } from "../../create-anatomy-DHVOqZET.mjs";
 import { r as CollectionOptions, t as CollectionItem } from "../../types-Df8ZhdY-.mjs";
-import { t as ListCollection } from "../../list-collection-CTt1eong.mjs";
+import { t as ListCollection } from "../../list-collection-swuCMCIS.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";
 import { n as TypeaheadState } from "../../typeahead-DMSwLv1e.mjs";
@@ -8,7 +8,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { p as PositioningOptions, u as Placement } from "../../index-BTi1wETB.mjs";
 
 //#region src/machines/select/select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator" | "label" | "valueText" | "control" | "item" | "itemText" | "itemIndicator" | "clearTrigger" | "positioner" | "itemGroup" | "itemGroupLabel">;
+declare const anatomy: AnatomyInstance<"content" | "positioner" | "trigger" | "root" | "indicator" | "label" | "control" | "item" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "list" | "valueText">;
 //#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" | "label" | "control" | "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" | "label" | "control" | "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.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu6
 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" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
+declare const anatomy: AnatomyInstance<"track" | "root" | "label" | "control" | "marker" | "valueText" | "thumb" | "range" | "markerGroup" | "draggingIndicator">;
 //#endregion
 //#region src/machines/slider/slider.types.d.ts
 type ThumbCollisionBehavior = "none" | "push" | "swap";

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

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DL5AIQ
 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" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
+declare const anatomy: AnatomyInstance<"track" | "root" | "label" | "control" | "marker" | "valueText" | "thumb" | "range" | "markerGroup" | "draggingIndicator">;
 //#endregion
 //#region src/machines/slider/slider.types.d.ts
 type ThumbCollisionBehavior = "none" | "push" | "swap";

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

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu6
 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" | "resizeTrigger" | "panel" | "resizeTriggerIndicator">;
+declare const anatomy: AnatomyInstance<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator">;
 //#endregion
 //#region src/machines/splitter/splitter.types.d.ts
 type ResizeEvent = PointerEvent | KeyboardEvent;

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

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DL5AIQ
 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" | "resizeTrigger" | "panel" | "resizeTriggerIndicator">;
+declare const anatomy: AnatomyInstance<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator">;
 //#endregion
 //#region src/machines/splitter/splitter.types.d.ts
 type ResizeEvent = PointerEvent | KeyboardEvent;

package/dist/machines/steps/index.cjs

@@ -24,6 +24,12 @@ function connect(service, normalize) {
 	const percent = computed("percent");
 	const hasNextStep = computed("hasNextStep");
 	const hasPrevStep = computed("hasPrevStep");
+	const isStepValid = (index) => {
+		return prop("isStepValid")?.(index) ?? true;
+	};
+	const isStepSkippable = (index) => {
+		return prop("isStepSkippable")?.(index) ?? false;
+	};
 	const getItemState = (props$1) => ({
 		triggerId: getTriggerId(scope, props$1.index),
 		contentId: getContentId(scope, props$1.index),
@@ -32,7 +38,9 @@ function connect(service, normalize) {
 		incomplete: props$1.index > step,
 		index: props$1.index,
 		first: props$1.index === 0,
-		last: props$1.index === count - 1
+		last: props$1.index === count - 1,
+		skippable: isStepSkippable(props$1.index),
+		isValid: () => isStepValid(props$1.index)
 	});
 	const goToNextStep = () => {
 		send({
@@ -66,6 +74,8 @@ function connect(service, normalize) {
 		hasNextStep,
 		hasPrevStep,
 		isCompleted: computed("completed"),
+		isStepValid,
+		isStepSkippable,
 		goToNextStep,
 		goToPrevStep,
 		resetStep,
@@ -98,7 +108,8 @@ function connect(service, normalize) {
 				...parts.item.attrs,
 				dir: prop("dir"),
 				"aria-current": itemState.current ? "step" : void 0,
-				"data-orientation": prop("orientation")
+				"data-orientation": prop("orientation"),
+				"data-skippable": require_dom_query.dataAttr(itemState.skippable)
 			});
 		},
 		getTriggerProps(props$1) {
@@ -233,34 +244,65 @@ const machine = require_core.createMachine({
 	initialState() {
 		return "idle";
 	},
-	entry: ["validateStep"],
+	entry: ["validateStepIndex"],
 	states: { idle: { on: {
-		"STEP.SET": { actions: ["setStep"] },
-		"STEP.NEXT": { actions: ["goToNextStep"] },
+		"STEP.SET": [{
+			guard: "isValidStepNavigation",
+			actions: ["setStep"]
+		}, { actions: ["invokeOnStepInvalid"] }],
+		"STEP.NEXT": [{
+			guard: "isCurrentStepValid",
+			actions: ["goToNextStep"]
+		}, { actions: ["invokeOnStepInvalid"] }],
 		"STEP.PREV": { actions: ["goToPrevStep"] },
 		"STEP.RESET": { actions: ["resetStep"] }
 	} } },
-	implementations: { actions: {
-		goToNextStep({ context, prop }) {
-			const value = Math.min(context.get("step") + 1, prop("count"));
-			context.set("step", value);
-		},
-		goToPrevStep({ context }) {
-			const value = Math.max(context.get("step") - 1, 0);
-			context.set("step", value);
-		},
-		resetStep({ context }) {
-			context.set("step", 0);
-		},
-		setStep({ context, event }) {
-			context.set("step", event.value);
+	implementations: {
+		guards: {
+			isCurrentStepValid({ context, prop }) {
+				const current = context.get("step");
+				if (prop("isStepSkippable")?.(current)) return true;
+				const isStepValid = prop("isStepValid");
+				if (!isStepValid) return true;
+				return isStepValid(current);
+			},
+			isValidStepNavigation({ context, event, prop }) {
+				const current = context.get("step");
+				if (event.value <= current) return true;
+				if (prop("isStepSkippable")?.(current)) return true;
+				const isStepValid = prop("isStepValid");
+				if (!isStepValid) return true;
+				return isStepValid(current);
+			}
 		},
-		validateStep({ context, prop }) {
-			validateStep(prop("count"), context.get("step"));
+		actions: {
+			goToNextStep({ context, prop }) {
+				const count = prop("count");
+				context.set("step", Math.min(context.get("step") + 1, count));
+			},
+			goToPrevStep({ context }) {
+				context.set("step", Math.max(context.get("step") - 1, 0));
+			},
+			resetStep({ context }) {
+				context.set("step", 0);
+			},
+			setStep({ context, event }) {
+				context.set("step", event.value);
+			},
+			validateStepIndex({ context, prop }) {
+				validateStepIndex(prop("count"), context.get("step"));
+			},
+			invokeOnStepInvalid({ context, event, prop }) {
+				prop("onStepInvalid")?.({
+					step: context.get("step"),
+					action: event.type === "STEP.NEXT" ? "next" : "set",
+					targetStep: event.value
+				});
+			}
 		}
-	} }
+	}
 });
-const validateStep = (count, step) => {
+const validateStepIndex = (count, step) => {
 	if (!require_utils.isValueWithinRange(step, 0, count)) throw new RangeError(`[sprawlify-js/steps] step index ${step} is out of bounds`);
 };
 
@@ -268,13 +310,17 @@ const validateStep = (count, step) => {
 //#region src/machines/steps/steps.props.ts
 const props = require_create_props.createProps()([
 	"count",
+	"defaultStep",
 	"dir",
 	"getRootNode",
 	"id",
 	"ids",
+	"isStepSkippable",
+	"isStepValid",
 	"linear",
 	"onStepChange",
 	"onStepComplete",
+	"onStepInvalid",
 	"orientation",
 	"step",
 	"defaultStep"

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

@@ -3,12 +3,17 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu6
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
 
 //#region src/machines/steps/steps.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator" | "progress" | "item" | "separator" | "prevTrigger" | "nextTrigger">;
+declare const anatomy: AnatomyInstance<"content" | "progress" | "trigger" | "root" | "indicator" | "item" | "list" | "separator" | "nextTrigger" | "prevTrigger">;
 //#endregion
 //#region src/machines/steps/steps.types.d.ts
 interface StepChangeDetails {
   step: number;
 }
+interface StepInvalidDetails {
+  step: number;
+  action: "next" | "set";
+  targetStep?: number;
+}
 interface ElementIds {
   root?: string | undefined;
   list?: string | undefined;
@@ -24,6 +29,9 @@ interface StepsProps extends DirectionProperty, CommonProperties {
   linear?: boolean | undefined;
   orientation?: "horizontal" | "vertical" | undefined;
   count?: number | undefined;
+  isStepValid?: ((index: number) => boolean) | undefined;
+  isStepSkippable?: ((index: number) => boolean) | undefined;
+  onStepInvalid?: ((details: StepInvalidDetails) => void) | undefined;
 }
 type PropsWithDefault = "orientation" | "linear" | "count";
 interface PrivateContext {
@@ -59,6 +67,8 @@ interface ItemState {
   incomplete: boolean;
   last: boolean;
   first: boolean;
+  skippable: boolean;
+  isValid: () => boolean;
 }
 interface StepsApi<T extends PropTypes = PropTypes> {
   value: number;
@@ -67,6 +77,8 @@ interface StepsApi<T extends PropTypes = PropTypes> {
   hasNextStep: boolean;
   hasPrevStep: boolean;
   isCompleted: boolean;
+  isStepValid: (index: number) => boolean;
+  isStepSkippable: (index: number) => boolean;
   setStep: (step: number) => void;
   goToNextStep: VoidFunction;
   goToPrevStep: VoidFunction;
@@ -94,4 +106,4 @@ declare const machine: Machine<StepsSchema>;
 declare const props: (keyof StepsProps)[];
 declare const splitProps: <Props extends Partial<StepsProps>>(props: Props) => [Partial<StepsProps>, Omit<Props, keyof StepsProps>];
 //#endregion
-export { type StepsApi as Api, type ElementIds, type ItemProps, type ItemState, type StepsMachine as Machine, type StepsProps as Props, type StepsService as Service, type StepChangeDetails, anatomy, connect, machine, props, splitProps };
+export { type StepsApi as Api, type ElementIds, type ItemProps, type ItemState, type StepsMachine as Machine, type StepsProps as Props, type StepsService as Service, type StepChangeDetails, type StepInvalidDetails, anatomy, connect, machine, props, splitProps };

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

@@ -3,12 +3,17 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DL5AIQ
 import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BuUzJjaP.mjs";
 
 //#region src/machines/steps/steps.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator" | "progress" | "item" | "separator" | "prevTrigger" | "nextTrigger">;
+declare const anatomy: AnatomyInstance<"content" | "progress" | "trigger" | "root" | "indicator" | "item" | "list" | "separator" | "nextTrigger" | "prevTrigger">;
 //#endregion
 //#region src/machines/steps/steps.types.d.ts
 interface StepChangeDetails {
   step: number;
 }
+interface StepInvalidDetails {
+  step: number;
+  action: "next" | "set";
+  targetStep?: number;
+}
 interface ElementIds {
   root?: string | undefined;
   list?: string | undefined;
@@ -24,6 +29,9 @@ interface StepsProps extends DirectionProperty, CommonProperties {
   linear?: boolean | undefined;
   orientation?: "horizontal" | "vertical" | undefined;
   count?: number | undefined;
+  isStepValid?: ((index: number) => boolean) | undefined;
+  isStepSkippable?: ((index: number) => boolean) | undefined;
+  onStepInvalid?: ((details: StepInvalidDetails) => void) | undefined;
 }
 type PropsWithDefault = "orientation" | "linear" | "count";
 interface PrivateContext {
@@ -59,6 +67,8 @@ interface ItemState {
   incomplete: boolean;
   last: boolean;
   first: boolean;
+  skippable: boolean;
+  isValid: () => boolean;
 }
 interface StepsApi<T extends PropTypes = PropTypes> {
   value: number;
@@ -67,6 +77,8 @@ interface StepsApi<T extends PropTypes = PropTypes> {
   hasNextStep: boolean;
   hasPrevStep: boolean;
   isCompleted: boolean;
+  isStepValid: (index: number) => boolean;
+  isStepSkippable: (index: number) => boolean;
   setStep: (step: number) => void;
   goToNextStep: VoidFunction;
   goToPrevStep: VoidFunction;
@@ -94,4 +106,4 @@ declare const machine: Machine<StepsSchema>;
 declare const props: (keyof StepsProps)[];
 declare const splitProps: <Props extends Partial<StepsProps>>(props: Props) => [Partial<StepsProps>, Omit<Props, keyof StepsProps>];
 //#endregion
-export { type StepsApi as Api, type ElementIds, type ItemProps, type ItemState, type StepsMachine as Machine, type StepsProps as Props, type StepsService as Service, type StepChangeDetails, anatomy, connect, machine, props, splitProps };
+export { type StepsApi as Api, type ElementIds, type ItemProps, type ItemState, type StepsMachine as Machine, type StepsProps as Props, type StepsService as Service, type StepChangeDetails, type StepInvalidDetails, anatomy, connect, machine, props, splitProps };

package/dist/machines/steps/index.mjs

@@ -24,6 +24,12 @@ function connect(service, normalize) {
 	const percent = computed("percent");
 	const hasNextStep = computed("hasNextStep");
 	const hasPrevStep = computed("hasPrevStep");
+	const isStepValid = (index) => {
+		return prop("isStepValid")?.(index) ?? true;
+	};
+	const isStepSkippable = (index) => {
+		return prop("isStepSkippable")?.(index) ?? false;
+	};
 	const getItemState = (props$1) => ({
 		triggerId: getTriggerId(scope, props$1.index),
 		contentId: getContentId(scope, props$1.index),
@@ -32,7 +38,9 @@ function connect(service, normalize) {
 		incomplete: props$1.index > step,
 		index: props$1.index,
 		first: props$1.index === 0,
-		last: props$1.index === count - 1
+		last: props$1.index === count - 1,
+		skippable: isStepSkippable(props$1.index),
+		isValid: () => isStepValid(props$1.index)
 	});
 	const goToNextStep = () => {
 		send({
@@ -66,6 +74,8 @@ function connect(service, normalize) {
 		hasNextStep,
 		hasPrevStep,
 		isCompleted: computed("completed"),
+		isStepValid,
+		isStepSkippable,
 		goToNextStep,
 		goToPrevStep,
 		resetStep,
@@ -98,7 +108,8 @@ function connect(service, normalize) {
 				...parts.item.attrs,
 				dir: prop("dir"),
 				"aria-current": itemState.current ? "step" : void 0,
-				"data-orientation": prop("orientation")
+				"data-orientation": prop("orientation"),
+				"data-skippable": dataAttr(itemState.skippable)
 			});
 		},
 		getTriggerProps(props$1) {
@@ -233,34 +244,65 @@ const machine = createMachine({
 	initialState() {
 		return "idle";
 	},
-	entry: ["validateStep"],
+	entry: ["validateStepIndex"],
 	states: { idle: { on: {
-		"STEP.SET": { actions: ["setStep"] },
-		"STEP.NEXT": { actions: ["goToNextStep"] },
+		"STEP.SET": [{
+			guard: "isValidStepNavigation",
+			actions: ["setStep"]
+		}, { actions: ["invokeOnStepInvalid"] }],
+		"STEP.NEXT": [{
+			guard: "isCurrentStepValid",
+			actions: ["goToNextStep"]
+		}, { actions: ["invokeOnStepInvalid"] }],
 		"STEP.PREV": { actions: ["goToPrevStep"] },
 		"STEP.RESET": { actions: ["resetStep"] }
 	} } },
-	implementations: { actions: {
-		goToNextStep({ context, prop }) {
-			const value = Math.min(context.get("step") + 1, prop("count"));
-			context.set("step", value);
-		},
-		goToPrevStep({ context }) {
-			const value = Math.max(context.get("step") - 1, 0);
-			context.set("step", value);
-		},
-		resetStep({ context }) {
-			context.set("step", 0);
-		},
-		setStep({ context, event }) {
-			context.set("step", event.value);
+	implementations: {
+		guards: {
+			isCurrentStepValid({ context, prop }) {
+				const current = context.get("step");
+				if (prop("isStepSkippable")?.(current)) return true;
+				const isStepValid = prop("isStepValid");
+				if (!isStepValid) return true;
+				return isStepValid(current);
+			},
+			isValidStepNavigation({ context, event, prop }) {
+				const current = context.get("step");
+				if (event.value <= current) return true;
+				if (prop("isStepSkippable")?.(current)) return true;
+				const isStepValid = prop("isStepValid");
+				if (!isStepValid) return true;
+				return isStepValid(current);
+			}
 		},
-		validateStep({ context, prop }) {
-			validateStep(prop("count"), context.get("step"));
+		actions: {
+			goToNextStep({ context, prop }) {
+				const count = prop("count");
+				context.set("step", Math.min(context.get("step") + 1, count));
+			},
+			goToPrevStep({ context }) {
+				context.set("step", Math.max(context.get("step") - 1, 0));
+			},
+			resetStep({ context }) {
+				context.set("step", 0);
+			},
+			setStep({ context, event }) {
+				context.set("step", event.value);
+			},
+			validateStepIndex({ context, prop }) {
+				validateStepIndex(prop("count"), context.get("step"));
+			},
+			invokeOnStepInvalid({ context, event, prop }) {
+				prop("onStepInvalid")?.({
+					step: context.get("step"),
+					action: event.type === "STEP.NEXT" ? "next" : "set",
+					targetStep: event.value
+				});
+			}
 		}
-	} }
+	}
 });
-const validateStep = (count, step) => {
+const validateStepIndex = (count, step) => {
 	if (!isValueWithinRange(step, 0, count)) throw new RangeError(`[sprawlify-js/steps] step index ${step} is out of bounds`);
 };
 
@@ -268,13 +310,17 @@ const validateStep = (count, step) => {
 //#region src/machines/steps/steps.props.ts
 const props = createProps()([
 	"count",
+	"defaultStep",
 	"dir",
 	"getRootNode",
 	"id",
 	"ids",
+	"isStepSkippable",
+	"isStepValid",
 	"linear",
 	"onStepChange",
 	"onStepComplete",
+	"onStepInvalid",
 	"orientation",
 	"step",
 	"defaultStep"