@parallelworks/ui 0.20.0 → 0.21.1

package/dist/form/SpecialTypes/FormikCustomInput.js

@@ -1,7 +1,8 @@
-import { EyeIcon, EyeOffIcon } from "../../icons.js";
+import { LuEye } from "../../icons/lu/LuEye.js";
+import { LuEyeOff } from "../../icons/lu/LuEyeOff.js";
 import { useFieldControlProps, useFieldRequired } from "../fieldContext.js";
 import cx from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useField, useFormikContext } from "formik";
 //#region src/form/SpecialTypes/FormikCustomInput.tsx
@@ -19,19 +20,21 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 	useEffect(() => {
 		if (!isFocused.current) setLocalValue(value ?? field.value);
 	}, [field.value, value]);
-	const sanitizeName = useCallback((val) => {
-		if (sanitize === void 0) return lowercase ? val.toLowerCase() : val;
+	const sanitizeRegexp = useMemo(() => {
+		if (sanitize === void 0) return;
 		try {
-			const regexp = new RegExp(sanitize);
-			if (lowercase) val = val.toLowerCase();
-			return val.replace(regexp, "");
+			return new RegExp(sanitize, "g");
 		} catch {
 			console.error("Invalid regex for sanitization:", sanitize);
+			return;
 		}
-		return val;
-	}, [sanitize, lowercase]);
+	}, [sanitize]);
+	const sanitizeName = useCallback((val) => {
+		const cased = lowercase ? val.toLowerCase() : val;
+		return sanitizeRegexp ? cased.replace(sanitizeRegexp, "") : cased;
+	}, [sanitizeRegexp, lowercase]);
 	const flushToFormik = useCallback((val) => {
-		if (onChange) onChange(val);
+		onChange?.(val);
 		setFieldTouched(name, true);
 		setFieldValue(name, val);
 	}, [
@@ -41,11 +44,11 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 		setFieldValue
 	]);
 	const handleChange = (e) => {
-		const text = sanitize ? sanitizeName(e.target.value) : e.target.value;
+		const text = sanitizeName(e.target.value);
 		let val = text;
 		if (type === "number") {
 			const parsed = parseFloat(text);
-			val = isNaN(parsed) ? void 0 : parsed;
+			val = Number.isNaN(parsed) ? void 0 : parsed;
 		}
 		if (type === "password" && val === "") val = defaultValue;
 		setLocalValue(val);
@@ -103,7 +106,7 @@ function FormikCustomInput({ name, type, step, placeholder, onChange, disabled,
 			disabled,
 			tabIndex: -1,
 			"aria-label": showPassword ? "Hide value" : "Show value",
-			children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4" })
+			children: showPassword ? /* @__PURE__ */ jsx(LuEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(LuEye, { className: "h-4 w-4" })
 		})]
 	});
 }

package/dist/form/Wizard/WizardContainer.js

@@ -20,10 +20,7 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		const errors = await validateForm();
 		const hasStepErrors = shouldFlatten ? stepFieldNames.some((fieldName) => errors[fieldName]) : stepFieldNames.some((fieldName) => hasNestedError(errors[stepKey], fieldName));
 		if (hasStepErrors) {
-			const touchedFields = stepFieldNames.reduce((acc, fieldName) => {
-				acc[fieldName] = true;
-				return acc;
-			}, {});
+			const touchedFields = Object.fromEntries(stepFieldNames.map((name) => [name, true]));
 			if (shouldFlatten) setTouched({
 				...touched,
 				...touchedFields
@@ -47,7 +44,7 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		validateStep: validateCurrentStep
 	});
 	const currentStepConfig = steps[currentStep];
-	const config_ = config.navigation || {};
+	const navigation = config.navigation ?? {};
 	const handleGoToNext = useCallback(async () => {
 		const success = await goToNext();
 		if (success) onChange?.(values);
@@ -57,22 +54,11 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 		values,
 		onChange
 	]);
-	const handleJumpToStep = useCallback((stepKey) => {
-		if (!config_.allowJump || !visitedSteps.has(stepKey)) return false;
-		return jumpToStep(stepKey);
-	}, [
-		jumpToStep,
-		config_.allowJump,
-		visitedSteps
-	]);
 	const handleSubmit = useCallback(async () => {
 		if (!isLastStep) return;
 		const errors = await validateForm();
 		if (Object.keys(errors).length > 0) {
-			const touchedFields = Object.keys(values).reduce((acc, fieldName) => {
-				acc[fieldName] = true;
-				return acc;
-			}, {});
+			const touchedFields = Object.fromEntries(Object.keys(values).map((name) => [name, true]));
 			setTouched({
 				...touched,
 				...touchedFields
@@ -91,15 +77,15 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		children: [
-			config_.showSteps !== false && /* @__PURE__ */ jsx(WizardStepIndicator, {
+			navigation.showSteps !== false && /* @__PURE__ */ jsx(WizardStepIndicator, {
 				stepOrder,
 				currentStep,
 				steps,
 				visitedSteps,
 				invalidSteps,
-				onStepClick: handleJumpToStep,
-				allowJump: config_.allowJump,
-				hideStepNumbers: config_.hideStepNumbers
+				onStepClick: jumpToStep,
+				allowJump: navigation.allowJump,
+				hideStepNumbers: navigation.hideStepNumbers
 			}),
 			currentStepConfig && /* @__PURE__ */ jsx("div", {
 				className: "mb-4",
@@ -108,7 +94,6 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 					stepConfig: currentStepConfig,
 					flatten: config.flatten,
 					values,
-					onValuesChange: onChange,
 					labelPosition,
 					missingFields,
 					spaceCompact,
@@ -119,9 +104,7 @@ function WizardContainer({ wizardConfig, values, onChange, onSubmit, className =
 				})
 			}),
 			/* @__PURE__ */ jsx(WizardNavigation, {
-				currentStep,
-				stepOrder,
-				canGoToNext: !isLastStep,
+				isLastStep,
 				canGoBack,
 				isCurrentStepValid: !invalidSteps.has(currentStep),
 				nextLabel: currentStepConfig?.nextLabel,

package/dist/form/Wizard/WizardNavigation.d.ts

@@ -1,2 +1,2 @@
 import type { WizardNavigationProps } from './types.js';
-export declare function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel, onNext, onPrevious, onSubmit, }: WizardNavigationProps): import("react").JSX.Element;
+export declare function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel, onNext, onPrevious, onSubmit, }: WizardNavigationProps): import("react").JSX.Element;

package/dist/form/Wizard/WizardNavigation.js

@@ -2,10 +2,9 @@ import Loader from "../../components/Loader.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardNavigation.tsx
-function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel = "Submit", onNext, onPrevious, onSubmit }) {
+function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel = "Submit", onNext, onPrevious, onSubmit }) {
 	const [isLoading, setIsLoading] = useState(false);
 	const [error, setError] = useState(null);
-	const isLastStep = stepOrder.indexOf(currentStep) === stepOrder.length - 1;
 	const handleNext = async () => {
 		setIsLoading(true);
 		setError(null);
@@ -44,7 +43,7 @@ function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCu
 				backgroundColor: "var(--theme-app-bg)"
 			},
 			onMouseEnter: (e) => {
-				if (!(!canGoBack || isLoading)) e.currentTarget.style.backgroundColor = "var(--theme-hover)";
+				if (canGoBack && !isLoading) e.currentTarget.style.backgroundColor = "var(--theme-hover)";
 			},
 			onMouseLeave: (e) => {
 				e.currentTarget.style.backgroundColor = "var(--theme-app-bg)";
@@ -58,7 +57,7 @@ function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCu
 			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
 			style: { backgroundColor: "var(--theme-element)" },
 			onMouseEnter: (e) => {
-				if (!(!isCurrentStepValid || isLoading)) e.currentTarget.style.filter = "brightness(0.9)";
+				if (isCurrentStepValid && !isLoading) e.currentTarget.style.filter = "brightness(0.9)";
 			},
 			onMouseLeave: (e) => {
 				e.currentTarget.style.filter = "brightness(1)";
@@ -71,11 +70,11 @@ function WizardNavigation({ currentStep, stepOrder, canGoToNext, canGoBack, isCu
 		}) : /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: handleNext,
-			disabled: !canGoToNext || isLoading,
+			disabled: isLoading,
 			className: "px-8 py-3 rounded-lg font-medium transition-all duration-200 text-white flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg",
 			style: { backgroundColor: "var(--theme-element)" },
 			onMouseEnter: (e) => {
-				if (!(!canGoToNext || isLoading)) e.currentTarget.style.filter = "brightness(0.9)";
+				if (!isLoading) e.currentTarget.style.filter = "brightness(0.9)";
 			},
 			onMouseLeave: (e) => {
 				e.currentTarget.style.filter = "brightness(1)";

package/dist/form/Wizard/WizardStepContent.d.ts

@@ -1,6 +1,6 @@
 import type { TSetFormDirty } from '../Form.js';
 import type { WizardStepContentProps } from './types.js';
-export declare function WizardStepContent({ currentStep, stepConfig, flatten, values, onValuesChange, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }: WizardStepContentProps & {
+export declare function WizardStepContent({ currentStep, stepConfig, flatten, values, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }: WizardStepContentProps & {
     setFormDirty: TSetFormDirty;
     setFieldValue: (field: string, value: unknown, shouldValidate?: boolean) => void;
     setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => void;

package/dist/form/Wizard/WizardStepContent.js

@@ -1,8 +1,8 @@
 import { FieldsFromOptions } from "../Form.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardStepContent.tsx
-function WizardStepContent({ currentStep, stepConfig, flatten = true, values, onValuesChange, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }) {
-	if (!stepConfig?.options) return null;
+function WizardStepContent({ currentStep, stepConfig, flatten = true, values, setFormDirty, setFieldValue, setFieldTouched, ...fieldsProps }) {
+	if (!stepConfig.options) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mb-4 w-full",
 		children: [

package/dist/form/Wizard/WizardStepIndicator.js

@@ -1,46 +1,36 @@
 import cx from "classnames";
-import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/form/Wizard/WizardStepIndicator.tsx
 function WizardStepIndicator({ stepOrder, currentStep, steps, visitedSteps, invalidSteps, onStepClick, allowJump = false, hideStepNumbers = false }) {
-	const currentIndex = useMemo(() => stepOrder.indexOf(currentStep), [stepOrder, currentStep]);
+	const currentIndex = stepOrder.indexOf(currentStep);
 	const getStepStatus = (stepKey, index) => {
 		if (stepKey === currentStep) return "active";
 		if (index < currentIndex) return "completed";
 		return "upcoming";
 	};
-	const handleStepClick = (stepKey) => {
-		if (!allowJump || !visitedSteps.has(stepKey)) return;
-		onStepClick?.(stepKey);
-	};
-	const isClickable = (stepKey) => {
-		return allowJump && visitedSteps.has(stepKey) && stepKey !== currentStep;
-	};
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex items-start justify-between w-full mb-2 gap-4 py-2",
 		children: stepOrder.map((stepKey, index) => {
 			const stepConfig = steps[stepKey];
 			const status = getStepStatus(stepKey, index);
 			const isInvalid = invalidSteps.has(stepKey);
-			const isClickable_ = isClickable(stepKey);
+			const isClickable = allowJump && visitedSteps.has(stepKey) && stepKey !== currentStep;
 			const isDotActive = status === "active";
 			const isDotCompleted = status === "completed";
-			const isDotUpcoming = status === "upcoming";
 			return /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col items-center flex-1 relative",
 				children: [
 					/* @__PURE__ */ jsxs("button", {
 						type: "button",
-						onClick: () => handleStepClick(stepKey),
-						disabled: !isClickable_,
+						onClick: () => onStepClick(stepKey),
+						disabled: !isClickable,
 						className: cx("w-12 h-12 rounded-full border-3 flex items-center justify-center font-bold text-base transition-all duration-300 flex-shrink-0 relative", {
-							"cursor-pointer": isClickable_,
-							"cursor-not-allowed": !isClickable_
+							"cursor-pointer": isClickable,
+							"cursor-not-allowed": !isClickable
 						}, {
 							"text-white": isDotActive,
 							"bg-green-500 border-green-600 text-white shadow-md": isDotCompleted && !isInvalid,
-							"bg-(--theme-border) theme-border theme-muted-text shadow-sm": isDotUpcoming && !isInvalid,
-							"bg-(--theme-muted-panel-bg) theme-border theme-muted-text shadow-sm": !isDotActive && !isDotCompleted && !isDotUpcoming && !isInvalid,
+							"bg-(--theme-border) theme-border theme-muted-text shadow-sm": status === "upcoming" && !isInvalid,
 							"bg-red-50 border-red-500 text-red-600 shadow-sm": isInvalid && status !== "active"
 						}),
 						style: isDotActive ? {

package/dist/form/Wizard/types.d.ts

@@ -17,8 +17,6 @@ export interface WizardConfig {
     navigation?: WizardNavigation;
     /** Label for the final submit button */
     submitLabel?: string;
-    /** Use URL-based routing instead of component state */
-    urlBased?: boolean;
     /** Flatten step fields into top-level inputs (default: true). Set false to preserve step keys as nested objects. */
     flatten?: boolean;
 }
@@ -33,39 +31,10 @@ export interface StepFieldConfig {
     options: DynamicFormSchema;
     /** Validate current step before proceeding to next (default: true) */
     validateOnNext?: boolean;
-    /** Allow skipping this step without validation */
-    canSkip?: boolean;
     /** Custom label for next button on this step */
     nextLabel?: string;
     /** Custom label for previous button on this step */
     prevLabel?: string;
-    /** Optional tooltip text */
-    tooltip?: string | string[];
-    /** Hidden field support */
-    hidden?: boolean;
-    /** Disable this step */
-    disabled?: boolean;
-}
-/**
- * Internal wizard state managed by useWizardState hook
- */
-export interface WizardState {
-    /** Current step ID/key */
-    currentStep: string;
-    /** Set of step IDs that have been visited */
-    visitedSteps: Set<string>;
-    /** Set of step IDs that have validation errors */
-    invalidSteps: Set<string>;
-    /** List of all step keys in order */
-    stepOrder: string[];
-    /** Total number of steps */
-    totalSteps: number;
-    /** Whether the wizard is on the last step */
-    isLastStep: boolean;
-    /** Whether the wizard can proceed to next step */
-    canProceedToNext: boolean;
-    /** Whether user can go back */
-    canGoBack: boolean;
 }
 /**
  * Extracted wizard configuration and step information
@@ -77,12 +46,7 @@ export interface ParsedWizardConfig {
     steps: Record<string, StepFieldConfig>;
     /** Ordered list of step keys */
     stepOrder: string[];
-    /** Schema for non-step fields (should be none in pure wizard) */
-    otherFields: Record<string, unknown>;
 }
-/**
- * Wizard navigation parameters
- */
 /**
  * Props for WizardContainer component
  */
@@ -120,8 +84,8 @@ export interface WizardStepIndicatorProps {
     visitedSteps: Set<string>;
     /** Set of invalid step keys */
     invalidSteps: Set<string>;
-    /** Callback when step is clicked */
-    onStepClick?: (stepKey: string) => boolean;
+    /** Callback when a step the user may jump to is clicked */
+    onStepClick: (stepKey: string) => boolean;
     /** Whether clicking completed steps is allowed */
     allowJump?: boolean | undefined;
     /** Hide step numbers */
@@ -131,12 +95,8 @@ export interface WizardStepIndicatorProps {
  * Props for WizardNavigation component
  */
 export interface WizardNavigationProps {
-    /** Current step key */
-    currentStep: string;
-    /** List of step keys in order */
-    stepOrder: string[];
-    /** Whether user can go to next step */
-    canGoToNext: boolean;
+    /** Whether the wizard is on its last step, which submits instead of going next */
+    isLastStep: boolean;
     /** Whether user can go back */
     canGoBack: boolean;
     /** Whether current step is valid */
@@ -164,8 +124,6 @@ export interface WizardStepContentProps {
     stepConfig: StepFieldConfig;
     /** Form values */
     values: Record<string, unknown>;
-    /** Update form values */
-    onValuesChange?: ((values: Record<string, unknown>) => void) | undefined;
     /** Label position for fields */
     labelPosition?: LabelPosition | undefined;
     /** Missing fields list */

package/dist/form/Wizard/useWizardState.d.ts

@@ -1,4 +1,4 @@
-import type { StepFieldConfig, WizardState } from './types.js';
+import type { StepFieldConfig } from './types.js';
 interface UseWizardStateProps {
     /** Ordered list of step keys */
     stepOrder: string[];
@@ -6,23 +6,15 @@ interface UseWizardStateProps {
     steps: Record<string, StepFieldConfig>;
     /** Function to validate current step */
     validateStep: (stepKey: string) => Promise<boolean>;
-    /** Initial step to start with (default: first step) */
-    initialStep?: string;
 }
-export declare function useWizardState({ stepOrder, steps, validateStep, initialStep, }: UseWizardStateProps): {
+export declare function useWizardState({ stepOrder, steps, validateStep }: UseWizardStateProps): {
     currentStep: string;
     visitedSteps: Set<string>;
     invalidSteps: Set<string>;
     isLastStep: boolean;
     canGoBack: boolean;
-    currentStepIndex: number;
-    totalSteps: number;
     goToNext: () => Promise<boolean>;
     goToPrevious: () => void;
     jumpToStep: (stepKey: string) => boolean;
-    reset: () => void;
-    markStepVisited: (stepKey: string) => void;
-    markStepInvalid: (stepKey: string, invalid: boolean) => void;
-    getState: () => WizardState;
 };
 export {};

package/dist/form/Wizard/useWizardState.js

@@ -1,22 +1,13 @@
 import { useCallback, useState } from "react";
 //#region src/form/Wizard/useWizardState.ts
-function useWizardState({ stepOrder, steps, validateStep, initialStep }) {
-	const firstStep = initialStep || stepOrder[0] || "";
+function useWizardState({ stepOrder, steps, validateStep }) {
+	const firstStep = stepOrder[0] ?? "";
 	const [currentStep, setCurrentStep] = useState(firstStep);
 	const [visitedSteps, setVisitedSteps] = useState(/* @__PURE__ */ new Set([firstStep]));
 	const [invalidSteps, setInvalidSteps] = useState(/* @__PURE__ */ new Set());
 	const currentStepIndex = stepOrder.indexOf(currentStep);
 	const isLastStep = currentStepIndex === stepOrder.length - 1;
 	const canGoBack = currentStepIndex > 0;
-	/**
-	* Mark step as visited
-	*/
-	const markStepVisited = useCallback((stepKey) => {
-		setVisitedSteps((prev) => /* @__PURE__ */ new Set([...prev, stepKey]));
-	}, []);
-	/**
-	* Mark step as invalid
-	*/
 	const markStepInvalid = useCallback((stepKey, invalid) => {
 		setInvalidSteps((prev) => {
 			const next = new Set(prev);
@@ -25,93 +16,52 @@ function useWizardState({ stepOrder, steps, validateStep, initialStep }) {
 			return next;
 		});
 	}, []);
-	const goToNext = useCallback(async () => {
-		if (isLastStep) return false;
-		if (steps[currentStep]?.validateOnNext !== false) {
-			if (!await validateStep(currentStep)) {
-				markStepInvalid(currentStep, true);
-				return false;
-			}
-		}
-		markStepInvalid(currentStep, false);
-		const nextStepKey = stepOrder[currentStepIndex + 1];
-		setCurrentStep(nextStepKey ?? "");
-		markStepVisited(nextStepKey ?? "");
-		return true;
-	}, [
-		currentStep,
-		currentStepIndex,
-		isLastStep,
-		steps,
-		stepOrder,
-		validateStep,
-		markStepInvalid,
-		markStepVisited
-	]);
-	const goToPrevious = useCallback(() => {
-		if (!canGoBack) return;
-		const prevStepKey = stepOrder[currentStepIndex - 1];
-		setCurrentStep(prevStepKey ?? "");
-	}, [
-		canGoBack,
-		currentStepIndex,
-		stepOrder
-	]);
-	const jumpToStep = useCallback((stepKey) => {
-		if (!stepOrder.includes(stepKey)) return false;
-		if (!visitedSteps.has(stepKey) && stepKey !== currentStep) return false;
-		setCurrentStep(stepKey);
-		return true;
-	}, [
-		stepOrder,
-		visitedSteps,
-		currentStep
-	]);
-	/**
-	* Reset wizard to initial state
-	*/
-	const reset = useCallback(() => {
-		setCurrentStep(firstStep);
-		setVisitedSteps(/* @__PURE__ */ new Set([firstStep]));
-		setInvalidSteps(/* @__PURE__ */ new Set());
-	}, [firstStep]);
-	/**
-	* Get current wizard state
-	*/
-	const getState = useCallback(() => {
-		return {
-			currentStep,
-			visitedSteps,
-			invalidSteps,
-			stepOrder,
-			totalSteps: stepOrder.length,
-			isLastStep,
-			canProceedToNext: !isLastStep,
-			canGoBack
-		};
-	}, [
-		currentStep,
-		visitedSteps,
-		invalidSteps,
-		stepOrder,
-		isLastStep,
-		canGoBack
-	]);
 	return {
 		currentStep,
 		visitedSteps,
 		invalidSteps,
 		isLastStep,
 		canGoBack,
-		currentStepIndex,
-		totalSteps: stepOrder.length,
-		goToNext,
-		goToPrevious,
-		jumpToStep,
-		reset,
-		markStepVisited,
-		markStepInvalid,
-		getState
+		goToNext: useCallback(async () => {
+			if (isLastStep) return false;
+			if (steps[currentStep]?.validateOnNext !== false) {
+				if (!await validateStep(currentStep)) {
+					markStepInvalid(currentStep, true);
+					return false;
+				}
+			}
+			markStepInvalid(currentStep, false);
+			const nextStepKey = stepOrder[currentStepIndex + 1] ?? "";
+			setCurrentStep(nextStepKey);
+			setVisitedSteps((prev) => /* @__PURE__ */ new Set([...prev, nextStepKey]));
+			return true;
+		}, [
+			currentStep,
+			currentStepIndex,
+			isLastStep,
+			steps,
+			stepOrder,
+			validateStep,
+			markStepInvalid
+		]),
+		goToPrevious: useCallback(() => {
+			if (!canGoBack) return;
+			setCurrentStep(stepOrder[currentStepIndex - 1] ?? "");
+		}, [
+			canGoBack,
+			currentStepIndex,
+			stepOrder
+		]),
+		jumpToStep: useCallback((stepKey) => {
+			if (!stepOrder.includes(stepKey)) return false;
+			if (!visitedSteps.has(stepKey) && stepKey !== currentStep) return false;
+			setCurrentStep(stepKey);
+			return true;
+		}, [
+			stepOrder,
+			visitedSteps,
+			currentStep
+		])
 	};
 }
 //#endregion

package/dist/form/Wizard/utils.js

@@ -8,17 +8,13 @@ function isStepField(field) {
 function parseWizardConfig(options) {
 	const meta = options["$meta"];
 	const wizardConfig = isWizardMeta(meta) ? meta.wizard : void 0;
-	if (!wizardConfig || wizardConfig.mode !== "wizard") return null;
+	if (wizardConfig?.mode !== "wizard") return null;
 	const steps = {};
 	const stepOrder = [];
-	const otherFields = {};
-	Object.entries(options).forEach(([key, field]) => {
-		if (key === "$meta") return;
-		if (isStepField(field)) {
-			steps[key] = field;
-			stepOrder.push(key);
-		} else otherFields[key] = field;
-	});
+	for (const [key, field] of Object.entries(options)) if (key !== "$meta" && isStepField(field)) {
+		steps[key] = field;
+		stepOrder.push(key);
+	}
 	if (stepOrder.length === 0) {
 		console.warn("Wizard mode enabled but no steps found");
 		return null;
@@ -26,8 +22,7 @@ function parseWizardConfig(options) {
 	return {
 		config: wizardConfig,
 		steps,
-		stepOrder,
-		otherFields
+		stepOrder
 	};
 }
 //#endregion