@m4l/components 9.4.25 → 9.4.26

package/components/Stepper/Stepper.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, Children, isValidElement } from "react";
 import clsx from "clsx";
 import { useFlagsPresent, CommonFlags } from "@m4l/core";
-import { l as StepperRootStyled, m as ContentSectionStyled } from "./slots/StepperSlot.js";
+import { m as StepperRootStyled, n as ContentSectionStyled } from "./slots/StepperSlot.js";
 import { g as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { a as STEPPER_PREFIX_NAME } from "./constants.js";
 import { S as StepArea } from "./subcomponents/StepArea/index.js";

package/components/Stepper/Stepper.styles.js

@@ -111,35 +111,47 @@ const stepperStyles = {
    * Estilos para el nombre del paso dentro del Stepper.
    */
   stepName: ({ theme, ownerState }) => ({
-    ...ownerState?.orientation === "horizontal" && {
-      height: theme.generalSettings.isMobile ? theme.vars.size.mobile.medium.action : theme.vars.size.desktop.medium.action
+    ...ownerState?.orientation === "horizontal" && !theme.generalSettings.isMobile && {
+      minHeight: theme.vars.size.desktop.medium.action,
+      maxWidth: "120px",
+      width: "100%"
     },
     ...(ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
       maxWidth: "120px",
       width: "100%",
-      lineHeight: "1.2",
       marginTop: theme.vars.size.baseSpacings.sp1
     },
     alignContent: "center",
     cursor: "pointer",
-    overflow: "hidden",
     ...theme.generalSettings.isMobile ? {
       display: "none"
     } : {
-      display: ownerState?.visibleTitle ? "-webkit-box" : "none"
+      display: ownerState?.visibleTitle ? "block" : "none"
     },
-    WebkitBoxOrient: "vertical",
-    WebkitLineClamp: 2,
-    textOverflow: "ellipsis",
     flex: 1,
     minWidth: 0,
-    whiteSpace: "normal",
     order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 1 : 0,
     "&.M4LTypography-root": {
       color: ownerState?.originalStepIndex !== void 0 && typeof ownerState.originalStepIndex === "number" ? (ownerState.currentStep ?? 0) > ownerState.originalStepIndex ? theme.vars.palette.primary.semanticText : (ownerState.currentStep ?? 0) === ownerState.originalStepIndex ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary : theme.vars.palette.text.secondary,
       textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "right"
     }
   }),
+  /**
+   * Estilos para el texto del nombre del paso con truncado (line-clamp).
+   */
+  stepNameText: ({ theme, ownerState }) => ({
+    display: "-webkit-box",
+    "-webkit-box-orient": "vertical",
+    "-webkit-line-clamp": "2",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    wordBreak: "break-word",
+    whiteSpace: "normal",
+    width: "100%",
+    direction: "ltr",
+    lineHeight: 1.2,
+    textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "left"
+  }),
   /**
    * Estilos para el indicador numérico de cada paso del Stepper.
    */
@@ -228,6 +240,7 @@ const stepperStyles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    flexShrink: 0,
     background: theme.vars.palette.primary.enabledOpacity,
     borderRadius: theme.vars.size.borderRadius["r1-5"],
     ...getSizeStyles(theme, ownerState?.size || "medium", "box", (size) => ({

package/components/Stepper/helpers/findAllVisibleStepsBefore/index.d.ts

@@ -0,0 +1,19 @@
+import { FormData, Step, StepWithIndex, VisibilityData } from '../../types';
+/**
+ * Obtiene todos los steps visibles que están antes de un step específico.
+ *
+ * Esta función es utilizada por la feature `initialStepKey` para determinar
+ * qué steps deben ser validados antes de poder navegar al step inicial deseado.
+ * @example
+ * // Si tenemos steps: [A, B (oculto), C, D] y queremos iniciar en D (índice 3)
+ * // Esta función retornará: [{ step: A, originalIndex: 0 }, { step: C, originalIndex: 2 }]
+ * // El step B se omite porque está oculto por su visibilityCondition
+ * @param initialStepIndex - El índice del step donde se desea iniciar.
+ *                           Los steps en este índice y posteriores NO se incluyen en el resultado.
+ * @param steps - Array completo de steps configurados en el Stepper.
+ * @param formData - Valores actuales del formulario para evaluar las condiciones de visibilidad.
+ * @param visibilityData - Datos adicionales para evaluar visibilidad (ej: objectId, accountId).
+ * @returns Array de steps visibles con su índice original, ordenados de menor a mayor índice.
+ *          Retorna array vacío si initialStepIndex es 0 o no hay steps visibles antes.
+ */
+export declare const findAllVisibleStepsBefore: (initialStepIndex: number, steps: Step[], formData?: FormData, visibilityData?: VisibilityData) => StepWithIndex[];

package/components/Stepper/helpers/findAllVisibleStepsBefore/index.js

@@ -0,0 +1,22 @@
+import { e as evaluateVisibilityStepCondition } from "../evaluateVisibilityStepCondition/index.js";
+const findAllVisibleStepsBefore = (initialStepIndex, steps, formData, visibilityData) => {
+  const visibleStepsBefore = [];
+  for (let currentIndex = 0; currentIndex < initialStepIndex && currentIndex < steps.length; currentIndex++) {
+    const currentStep = steps[currentIndex];
+    const isStepVisible = evaluateVisibilityStepCondition(
+      currentStep,
+      formData || {},
+      visibilityData
+    );
+    if (isStepVisible) {
+      visibleStepsBefore.push({
+        step: currentStep,
+        originalIndex: currentIndex
+      });
+    }
+  }
+  return visibleStepsBefore;
+};
+export {
+  findAllVisibleStepsBefore as f
+};

package/components/Stepper/helpers/findStepIndexByKey/index.d.ts

@@ -0,0 +1,8 @@
+import { Step } from '../../types';
+/**
+ * findStepIndexByKey - Encuentra el índice de un step por su key
+ * @param stepKey - La key del step a buscar
+ * @param steps - Array de steps
+ * @returns El índice del step, o -1 si no se encuentra
+ */
+export declare const findStepIndexByKey: (stepKey: string, steps: Step[]) => number;

package/components/Stepper/helpers/findStepIndexByKey/index.js

@@ -0,0 +1,6 @@
+const findStepIndexByKey = (stepKey, steps) => {
+  return steps.findIndex((step) => step.key === stepKey);
+};
+export {
+  findStepIndexByKey as f
+};

package/components/Stepper/helpers/index.d.ts

@@ -6,3 +6,5 @@ export { isElementInViewport } from './isElementInViewport';
 export { isLastVisibleValidStep } from './isLastVisibleValidStep';
 export { parseWatchedValues } from './parseWatchedValues';
 export { getInitialFieldValues } from './getInitialFieldValues';
+export { findStepIndexByKey } from './findStepIndexByKey';
+export { findAllVisibleStepsBefore } from './findAllVisibleStepsBefore';

package/components/Stepper/hooks/useInitialStepKey/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook que aplica initialStepKey cuando el formulario está en estado 'ready'.
+ * Valida los steps anteriores y navega al step inicial o al primer step con errores.
+ */
+export declare function useInitialStepKey(): void;

package/components/Stepper/hooks/useInitialStepKey/index.js

@@ -0,0 +1,44 @@
+import { useRef, useEffect } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { shallow } from "zustand/shallow";
+import { u as useStepper } from "../useStepper/index.js";
+function useInitialStepKey() {
+  const { trigger, getValues } = useFormContext();
+  const hasAttemptedRef = useRef(false);
+  const statusLoad = useWatch({ name: "statusLoad" });
+  const { initialStepKey, initialStepKeyApplied, applyInitialStepKey } = useStepper(
+    (state) => ({
+      initialStepKey: state.initialStepKey,
+      initialStepKeyApplied: state.initialStepKeyApplied,
+      applyInitialStepKey: state.actions.applyInitialStepKey
+    }),
+    shallow
+  );
+  useEffect(() => {
+    if (statusLoad !== "ready" || !initialStepKey || initialStepKeyApplied || hasAttemptedRef.current) {
+      return;
+    }
+    hasAttemptedRef.current = true;
+    const executeInitialStepKey = async () => {
+      const validateFieldsFn = async (fields) => {
+        if (fields.length === 0) {
+          return true;
+        }
+        return trigger(fields);
+      };
+      const formData = getValues();
+      await applyInitialStepKey(validateFieldsFn, formData);
+    };
+    executeInitialStepKey();
+  }, [
+    statusLoad,
+    initialStepKey,
+    initialStepKeyApplied,
+    applyInitialStepKey,
+    trigger,
+    getValues
+  ]);
+}
+export {
+  useInitialStepKey as u
+};

package/components/Stepper/slots/StepperEnum.d.ts

@@ -6,6 +6,7 @@ export declare enum ContentSlots {
     stepArea = "stepArea",
     step = "step",
     stepName = "stepName",
+    stepNameText = "stepNameText",
     indicator = "indicator",
     textNumber = "textNumber"
 }

package/components/Stepper/slots/StepperEnum.js

@@ -7,6 +7,7 @@ var ContentSlots = /* @__PURE__ */ ((ContentSlots2) => {
   ContentSlots2["stepArea"] = "stepArea";
   ContentSlots2["step"] = "step";
   ContentSlots2["stepName"] = "stepName";
+  ContentSlots2["stepNameText"] = "stepNameText";
   ContentSlots2["indicator"] = "indicator";
   ContentSlots2["textNumber"] = "textNumber";
   return ContentSlots2;

package/components/Stepper/slots/StepperSlot.d.ts

@@ -22,6 +22,9 @@ export declare const StepStyled: import('@emotion/styled').StyledComponent<impor
 export declare const StepNameStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "variant" | "color" | "dataTestid" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | "ellipsis" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
+export declare const StepNameTextStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const IndicatorStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/Stepper/slots/StepperSlot.js

@@ -32,6 +32,10 @@ const StepNameStyled = styled(Typography, {
   name: STEPPER_PREFIX_NAME,
   slot: ContentSlots.stepName
 })(stepperStyles.stepName);
+const StepNameTextStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.stepNameText
+})(stepperStyles.stepNameText);
 const IndicatorStyled = styled("div", {
   name: STEPPER_PREFIX_NAME,
   slot: ContentSlots.indicator
@@ -93,15 +97,16 @@ export {
   WrapperIconStyled as W,
   StepStyled as a,
   StepNameStyled as b,
-  IconStyled as c,
-  WrapperTitleStyled as d,
-  TitleStyled as e,
-  ContentAreaHeaderStyled as f,
-  ContentAreaBodyStyled as g,
-  StepperFooterLeftActionsStyled as h,
-  StepperFooterRightActionsStyled as i,
-  StepperFooterSectionStyled as j,
-  StepContentStyled as k,
-  StepperRootStyled as l,
-  ContentSectionStyled as m
+  StepNameTextStyled as c,
+  IconStyled as d,
+  WrapperTitleStyled as e,
+  TitleStyled as f,
+  ContentAreaHeaderStyled as g,
+  ContentAreaBodyStyled as h,
+  StepperFooterLeftActionsStyled as i,
+  StepperFooterRightActionsStyled as j,
+  StepperFooterSectionStyled as k,
+  StepContentStyled as l,
+  StepperRootStyled as m,
+  ContentSectionStyled as n
 };

package/components/Stepper/store/StepperContext/index.js

@@ -12,6 +12,7 @@ const StepperProvider = (props) => {
     indicatorType = "number",
     orientation = "horizontal",
     visibilityData,
+    initialStepKey,
     children
   } = props;
   const stepperStoreRef = useRef();
@@ -25,7 +26,8 @@ const StepperProvider = (props) => {
         ownerState: {},
         indicatorType,
         orientation,
-        visibilityData
+        visibilityData,
+        initialStepKey
       },
       storeDevtoolsEnabled
     );

package/components/Stepper/store/StepperStore/index.js

@@ -2,6 +2,9 @@ import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { S as STEPPER_STORE_ID } from "../../constants.js";
+import { f as findStepIndexByKey } from "../../helpers/findStepIndexByKey/index.js";
+import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
+import { f as findAllVisibleStepsBefore } from "../../helpers/findAllVisibleStepsBefore/index.js";
 import { f as findNextVisibleValidStep } from "../../helpers/findNextVisibleValidStep/index.js";
 import { f as findPrevVisibleValidStep } from "../../helpers/findPrevVisibleValidStep/index.js";
 const createDevtools = (immerMiddlewere, config) => {
@@ -16,6 +19,7 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
     currentStep: 0,
     stepValidationStatus: {},
     isValidating: false,
+    initialStepKeyApplied: false,
     ...initProps
   };
   return createStore(
@@ -128,6 +132,7 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
             set((state) => {
               state.stepValidationStatus = {};
               state.isValidating = false;
+              state.initialStepKeyApplied = false;
               const firstVisibleStepIndex = findNextVisibleValidStep(
                 -1,
                 // Comenzar desde -1 para encontrar el primer step visible
@@ -137,6 +142,71 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
               );
               state.currentStep = firstVisibleStepIndex < state.steps.length ? firstVisibleStepIndex : 0;
             });
+          },
+          /**
+           * applyInitialStepKey - Valida los steps anteriores y navega al step indicado por initialStepKey.
+           * Si algún step anterior tiene errores, navega al primer step con errores.
+           */
+          applyInitialStepKey: async (validateFieldsFn, formData) => {
+            const state = get();
+            const { initialStepKey, steps, visibilityData, initialStepKeyApplied } = state;
+            if (!initialStepKey || initialStepKey.trim() === "" || initialStepKeyApplied) {
+              return;
+            }
+            const initialStepIndex = findStepIndexByKey(initialStepKey, steps);
+            if (initialStepIndex === -1) {
+              const availableKeys = steps.map((s) => s.key).join(", ");
+              throw new Error(
+                `Stepper: initialStepKey "${initialStepKey}" no corresponde a ningún step. Keys disponibles: [${availableKeys}]`
+              );
+            }
+            const initialStep = steps[initialStepIndex];
+            if (!evaluateVisibilityStepCondition(initialStep, formData, visibilityData)) {
+              console.warn(
+                `Stepper: initialStepKey "${initialStepKey}" apunta a un step oculto. Iniciando en step 0.`
+              );
+              set((draft) => {
+                draft.initialStepKeyApplied = true;
+              });
+              return;
+            }
+            if (initialStepIndex === 0) {
+              set((draft) => {
+                draft.initialStepKeyApplied = true;
+              });
+              return;
+            }
+            const previousVisibleSteps = findAllVisibleStepsBefore(
+              initialStepIndex,
+              steps,
+              formData,
+              visibilityData
+            );
+            for (const { step, originalIndex } of previousVisibleSteps) {
+              const fieldsToValidate = step.validationFields || [];
+              if (fieldsToValidate.length === 0) {
+                set((draft) => {
+                  draft.stepValidationStatus[originalIndex] = true;
+                });
+                continue;
+              }
+              const isValid = await validateFieldsFn(fieldsToValidate);
+              if (!isValid) {
+                set((draft) => {
+                  draft.currentStep = originalIndex;
+                  draft.stepValidationStatus[originalIndex] = false;
+                  draft.initialStepKeyApplied = true;
+                });
+                return;
+              }
+              set((draft) => {
+                draft.stepValidationStatus[originalIndex] = true;
+              });
+            }
+            set((draft) => {
+              draft.currentStep = initialStepIndex;
+              draft.initialStepKeyApplied = true;
+            });
           }
         }
       })),

package/components/Stepper/store/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Step, StepperOwnerState, StepperProps } from '../types';
-export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTitle' | 'steps' | 'indicatorType' | 'orientation' | 'size' | 'visibilityData'> {
+export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTitle' | 'steps' | 'indicatorType' | 'orientation' | 'size' | 'visibilityData' | 'initialStepKey'> {
     /**
      *  "ownerState" estado a nivel de clases del componente
      */
@@ -18,6 +18,10 @@ export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTit
      * "isValidating" indica si el stepper está en proceso de validación
      */
     isValidating: boolean;
+    /**
+     * Indica si initialStepKey ya fue aplicado. Previene re-aplicación después de navegación.
+     */
+    initialStepKeyApplied: boolean;
 }
 export interface StepperStateWithActions extends StepperState {
     actions: {
@@ -55,9 +59,15 @@ export interface StepperStateWithActions extends StepperState {
          * resetStepper - Resetea el Stepper a su estado inicial
          */
         resetStepper: () => void;
+        /**
+         * Aplica initialStepKey validando los steps anteriores.
+         * @param validateFieldsFn - Función que valida campos específicos usando RHF trigger()
+         * @param formData - Valores actuales del formulario
+         */
+        applyInitialStepKey: (validateFieldsFn: (fields: string[]) => Promise<boolean>, formData: Record<string, any>) => Promise<void>;
     };
 }
 export interface StepperContextProps extends StepperProps {
     children: ReactNode;
 }
-export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'indicatorType' | 'orientation' | 'visibilityData'>;
+export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'indicatorType' | 'orientation' | 'visibilityData' | 'initialStepKey'>;

package/components/Stepper/subcomponents/ContentArea/index.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useStepper } from "../../hooks/useStepper/index.js";
-import { C as ContentAreaStyled, f as ContentAreaHeaderStyled, g as ContentAreaBodyStyled } from "../../slots/StepperSlot.js";
+import { u as useInitialStepKey } from "../../hooks/useInitialStepKey/index.js";
+import { C as ContentAreaStyled, g as ContentAreaHeaderStyled, h as ContentAreaBodyStyled } from "../../slots/StepperSlot.js";
 import { W as WrapperIcon } from "./subcomponents/WrapperIcon/index.js";
 import { W as WrapperTitle } from "./subcomponents/WrapperTitle/index.js";
 function ContentArea(props) {
@@ -8,6 +9,7 @@ function ContentArea(props) {
   const { orientation } = useStepper((state) => ({
     orientation: state.orientation
   }));
+  useInitialStepKey();
   const ownerState = {
     orientation
   };

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { W as WrapperIconStyled, c as IconStyled } from "../../../../slots/StepperSlot.js";
+import { W as WrapperIconStyled, d as IconStyled } from "../../../../slots/StepperSlot.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { u as useStepper } from "../../../../hooks/useStepper/index.js";
 import { useEnvironment } from "@m4l/core";

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { u as useStepper } from "../../../../hooks/useStepper/index.js";
-import { d as WrapperTitleStyled, e as TitleStyled, D as DescriptionStyled } from "../../../../slots/StepperSlot.js";
+import { e as WrapperTitleStyled, f as TitleStyled, D as DescriptionStyled } from "../../../../slots/StepperSlot.js";
 function WrapperTitle() {
   const { steps, currentStep } = useStepper((state) => ({
     steps: state.steps,

package/components/Stepper/subcomponents/StepArea/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { S as StepAreaStyled, a as StepStyled, b as StepNameStyled } from "../../slots/StepperSlot.js";
+import { S as StepAreaStyled, a as StepStyled, b as StepNameStyled, c as StepNameTextStyled } from "../../slots/StepperSlot.js";
 import { I as Indicator } from "./subcomponents/Inidicator/index.js";
 import { u as useStepArea } from "./hooks/useStepArea.js";
 import { u as useVisibileSteps } from "./hooks/useVisibileSteps.js";
@@ -39,7 +39,7 @@ function StepArea() {
                 originalStepIndex: originalIndex,
                 isStepVisible
               },
-              children: step.title
+              children: /* @__PURE__ */ jsx(StepNameTextStyled, { ownerState: { orientation }, children: step.title })
             }
           ),
           /* @__PURE__ */ jsx(

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { k as StepContentStyled } from "../../../../slots/StepperSlot.js";
+import { l as StepContentStyled } from "../../../../slots/StepperSlot.js";
 import { u as useIsStepVisible } from "./hooks/useIsStepVisible.js";
 function Step(props) {
   const { stepKey, children } = props;

package/components/Stepper/subcomponents/StepperFooter/index.js

@@ -1,6 +1,6 @@
 import { jsxs } from "react/jsx-runtime";
 import { useMemo, Children, isValidElement } from "react";
-import { j as StepperFooterSectionStyled } from "../../slots/StepperSlot.js";
+import { k as StepperFooterSectionStyled } from "../../slots/StepperSlot.js";
 import { S as StepperFooterLeftActions } from "./subcomponents/StepperFooterLeftActions/index.js";
 import { S as StepperFooterRightActions } from "./subcomponents/StepperFooterRightActions/index.js";
 function StepperFooter(props) {

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { h as StepperFooterLeftActionsStyled } from "../../../../slots/StepperSlot.js";
+import { i as StepperFooterLeftActionsStyled } from "../../../../slots/StepperSlot.js";
 function StepperFooterLeftActions(props) {
   const { children } = props;
   return /* @__PURE__ */ jsx(StepperFooterLeftActionsStyled, { children });

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useMemo } from "react";
 import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
-import { i as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
+import { j as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
 import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
 import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
 function StepperFooterRightActions(props) {

package/components/Stepper/types.d.ts

@@ -83,6 +83,13 @@ export interface StepperProps {
      * Clase personalizada para el Stepper.
      */
     className?: string;
+    /**
+     * Key del step en el que se desea iniciar el Stepper.
+     * Si se proporciona, valida los steps anteriores antes de navegar al step indicado.
+     * Si algún step anterior tiene errores, inicia en el primer step con errores.
+     * Lanza Error si la key no corresponde a ningún step.
+     */
+    initialStepKey?: string;
 }
 /**
  * Props del StepperContent
@@ -172,5 +179,20 @@ export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'>, R
     stepValidationStatus?: Record<number, boolean>;
     isStepVisible?: boolean;
 }
+/**
+ * Representa un step junto con su posición original en el array de steps.
+ * Se usa para mantener la referencia al índice original después de filtrar steps ocultos.
+ */
+export interface StepWithIndex {
+    /**
+     * El objeto Step con toda su configuración (key, title, validationFields, etc.)
+     */
+    step: Step;
+    /**
+     * El índice del step en el array original de steps.
+     * Es necesario para actualizar correctamente el stepValidationStatus del store.
+     */
+    originalIndex: number;
+}
 export type StepperSlotsType = StepperSlots | ContentSlots | ContentAreaSlots | StepperFooterSlots;
 export type StepperStyles = M4LOverridesStyleRules<StepperSlotsType, typeof STEPPER_PREFIX_NAME, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.25",
+  "version": "9.4.26",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {