@m4l/components 9.3.12 → 9.3.13-JT010925.beta.1

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

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { u as useStepper } from "../../../../hooks/useStepper/index.js";
+import { d as WrapperTitleStyled, T as TitleStyled, D as DescriptionStyled } from "../../../../slots/StepperSlot.js";
+function WrapperTitle() {
+  const { steps, currentStep } = useStepper((state) => ({
+    steps: state.steps,
+    currentStep: state.currentStep
+  }));
+  const currentStepConfig = useMemo(() => {
+    return steps[currentStep];
+  }, [steps, currentStep]);
+  if (!currentStepConfig) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(WrapperTitleStyled, { children: [
+    /* @__PURE__ */ jsx(TitleStyled, { variant: "paragraphDens", children: currentStepConfig.title }),
+    currentStepConfig.description && /* @__PURE__ */ jsx(DescriptionStyled, { variant: "body", children: currentStepConfig.description })
+  ] });
+}
+export {
+  WrapperTitle as W
+};

package/components/Stepper/subcomponents/StepArea/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * El componente StepArea renderiza el área de pasos del Stepper.
+ * Muestra solo los pasos que cumplen su condition según los datos del formulario.
+ * Utiliza el hook useStepper para obtener el estado actual y los pasos definidos.
+ */
+export declare function StepArea(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { u as useStepper } from "../../hooks/useStepper/index.js";
+import { e as StepAreaStyled, f as StepStyled, g as StepNameStyled } from "../../slots/StepperSlot.js";
+import { I as Indicator } from "./subcomponents/Inidicator/index.js";
+import { shallow } from "zustand/shallow";
+import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
+function StepArea() {
+  const { trigger, clearErrors } = useFormContext();
+  const formValues = useWatch();
+  const {
+    currentStep,
+    steps,
+    visibleTitle,
+    setCurrentStep,
+    orientation,
+    setStepValidationStatus,
+    stepValidationStatus,
+    visibilityData
+  } = useStepper(
+    (state) => ({
+      currentStep: state.currentStep,
+      steps: state.steps,
+      visibleTitle: state.visibleTitle,
+      setCurrentStep: state.actions.setCurrentStep,
+      indicatorType: state.indicatorType,
+      orientation: state.orientation,
+      setStepValidationStatus: state.actions.setStepValidationStatus,
+      stepValidationStatus: state.stepValidationStatus,
+      visibilityData: state.visibilityData
+    }),
+    shallow
+  );
+  const validSteps = useMemo(() => {
+    return steps.filter(
+      (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)
+    );
+  }, [steps, formValues, visibilityData]);
+  const ownerState = {
+    visibleTitle,
+    orientation,
+    totalSteps: validSteps.length
+  };
+  const handleStepClick = async (targetIndex) => {
+    const currentIndex = validSteps.findIndex(
+      (step) => step.key === steps[currentStep].key
+    );
+    if (targetIndex === currentIndex) {
+      return;
+    }
+    const isNavigatingForward = targetIndex > currentIndex;
+    const targetOriginalIndex = steps.findIndex(
+      (s) => s.key === validSteps[targetIndex].key
+    );
+    if (!isNavigatingForward) {
+      setCurrentStep(targetOriginalIndex);
+      return;
+    }
+    const isSkippingSteps = targetIndex > currentIndex + 1;
+    if (isSkippingSteps) {
+      for (let i = currentIndex; i < targetIndex; i++) {
+        const step = validSteps[i];
+        const stepOriginalIndex = steps.findIndex((s) => s.key === step.key);
+        const isValid = await trigger(step.validationFields);
+        if (!isValid) {
+          setCurrentStep(stepOriginalIndex);
+          setStepValidationStatus(stepOriginalIndex, false);
+          return;
+        }
+        setStepValidationStatus(stepOriginalIndex, true);
+      }
+    } else {
+      const currentStepData = validSteps[currentIndex];
+      const currentStepOriginalIndex = steps.findIndex(
+        (s) => s.key === currentStepData.key
+      );
+      const isCurrentValid = await trigger(currentStepData.validationFields);
+      if (!isCurrentValid) {
+        setStepValidationStatus(currentStepOriginalIndex, false);
+        return;
+      }
+      setStepValidationStatus(currentStepOriginalIndex, true);
+    }
+    setCurrentStep(targetOriginalIndex);
+    if (isNavigatingForward) {
+      const currentStepData = validSteps[currentIndex];
+      const currentStepOriginalIndex = steps.findIndex(
+        (s) => s.key === currentStepData.key
+      );
+      const isCurrentStepValid = stepValidationStatus[currentStepOriginalIndex] !== false;
+      if (isCurrentStepValid) {
+        const targetStep = validSteps[targetIndex];
+        const targetStepFields = targetStep.validationFields || [];
+        if (targetStepFields.length > 0) {
+          clearErrors(targetStepFields);
+          setTimeout(() => {
+            clearErrors(targetStepFields);
+            setStepValidationStatus(targetOriginalIndex, true);
+          }, 100);
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(StepAreaStyled, { ownerState, children: validSteps.map((step, validIndex) => {
+    const originalIndex = steps.findIndex((s) => s.key === step.key);
+    return /* @__PURE__ */ jsxs(
+      StepStyled,
+      {
+        role: "button",
+        onClick: () => handleStepClick(validIndex),
+        ownerState: { ...ownerState, currentStep, step: validIndex },
+        children: [
+          visibleTitle && /* @__PURE__ */ jsx(
+            StepNameStyled,
+            {
+              variant: "body",
+              ownerState: { ...ownerState, currentStep, step: validIndex },
+              children: step.title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Indicator,
+            {
+              currentStep,
+              step: validIndex,
+              totalSteps: validSteps.length,
+              originalStepIndex: originalIndex
+            }
+          )
+        ]
+      },
+      step.key
+    );
+  }) });
+}
+export {
+  StepArea as S
+};

package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.d.ts

@@ -0,0 +1,5 @@
+import { IndicatorProps } from '../../../../types';
+/**
+ * El componente Indicator renderiza el indicador del paso actual
+ */
+export declare function Indicator(props: IndicatorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { h as IndicatorStyled, i as TextNumberStyled } from "../../../../slots/StepperSlot.js";
+import { u as useStepper } from "../../../../hooks/useStepper/index.js";
+import { p as pathIcons } from "../../../../icons.js";
+import { useIsMobile } from "@m4l/graphics";
+import { useEnvironment } from "@m4l/core";
+import { shallow } from "zustand/shallow";
+import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
+import { I as Icon } from "../../../../../Icon/Icon.js";
+function Indicator(props) {
+  const { step, currentStep, totalSteps, originalStepIndex } = props;
+  const { orientation, size, indicatorType, stepValidationStatus } = useStepper(
+    (state) => ({
+      orientation: state.orientation,
+      size: state.size,
+      indicatorType: state.indicatorType,
+      stepValidationStatus: state.stepValidationStatus
+    }),
+    shallow
+  );
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentSize } = useComponentSize(size);
+  const ownerState = {
+    size: currentSize,
+    currentStep,
+    step,
+    totalSteps,
+    orientation,
+    indicatorType,
+    stepValidationStatus
+  };
+  const isMobile = useIsMobile();
+  const effectiveIndicatorType = useMemo(() => {
+    return isMobile ? "dot" : indicatorType;
+  }, [isMobile, indicatorType]);
+  const { isCompleted, isValidStep, hasBeenValidated } = useMemo(() => {
+    const completed = currentStep > originalStepIndex;
+    const validationStatus = stepValidationStatus[originalStepIndex];
+    const validated = validationStatus !== void 0;
+    const valid = validationStatus === true;
+    return {
+      isCompleted: completed,
+      isValidStep: valid,
+      hasBeenValidated: validated
+    };
+  }, [currentStep, originalStepIndex, stepValidationStatus]);
+  return /* @__PURE__ */ jsx(IndicatorStyled, { ownerState, children: hasBeenValidated && !isValidStep ? (
+    // Mostrar error solo si ha sido validado y es inválido
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        src: `${host_static_assets}/${environment_assets}/${pathIcons.circleError}`,
+        size: "small",
+        color: "error.contrastText"
+      }
+    )
+  ) : isCompleted && isValidStep ? (
+    // Mostrar completado solo si está completado Y es válido
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        src: `${host_static_assets}/${environment_assets}/${effectiveIndicatorType === "number" ? pathIcons.circleCheck : pathIcons.dotOutline}`,
+        size: "small",
+        color: "primary.semanticText"
+      }
+    )
+  ) : (
+    // Mostrar estado normal (número o dot) para pasos no validados o actuales
+    /* @__PURE__ */ jsx(TextNumberStyled, { variant: "body", ownerState: { currentStep, step }, children: effectiveIndicatorType === "number" ? step + 1 : /* @__PURE__ */ jsx(
+      Icon,
+      {
+        src: `${host_static_assets}/${environment_assets}/${currentStep === originalStepIndex ? pathIcons.dotSelected : pathIcons.dotOutline}`,
+        size: "small",
+        color: currentStep === originalStepIndex ? "primary.semanticText" : "text.disabled"
+      }
+    ) })
+  ) });
+}
+export {
+  Indicator as I
+};

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para cancelar el proceso del Stepper
+ */
+export declare function StepperCancelButton(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useStepperActions } from "../../../hooks/useStepperActions/index.js";
+import { D as DICTIONARY } from "../../../dictionary.js";
+import { useModuleDictionary } from "@m4l/core";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+function StepperCancelButton() {
+  const { getLabel } = useModuleDictionary();
+  const { cancelAction } = useStepperActions();
+  const handleCancel = () => {
+    cancelAction();
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      label: getLabel(DICTIONARY.LABEL_CANCEL_BUTTON),
+      variant: "outlined",
+      color: "default",
+      onClick: handleCancel
+    }
+  );
+}
+export {
+  StepperCancelButton as S
+};

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para avanzar al siguiente step del Stepper
+ */
+export declare function StepperNextButton(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { u as useStepperActions } from "../../../hooks/useStepperActions/index.js";
+import { p as pathIcons } from "../../../icons.js";
+import { useIsMobile } from "@m4l/graphics";
+import { D as DICTIONARY } from "../../../dictionary.js";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+function StepperNextButton() {
+  const { nextStepAction } = useStepperActions();
+  const isMobile = useIsMobile();
+  const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const handleNext = async () => {
+    await nextStepAction();
+  };
+  return isMobile ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "button",
+      onClick: handleNext,
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowRight}`,
+      "data-testid": "stepper-next-button",
+      variant: "contained",
+      color: "primary"
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      label: getLabel(DICTIONARY.LABEL_NEXT_BUTTON),
+      variant: "contained",
+      color: "primary",
+      onClick: handleNext,
+      endIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowRight}`,
+      "data-testid": "stepper-next-button"
+    }
+  );
+}
+export {
+  StepperNextButton as S
+};

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para ir al step anterior del Stepper
+ */
+export declare function StepperPrevButton(): import("react/jsx-runtime").JSX.Element | null;

package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { u as useStepper } from "../../../hooks/useStepper/index.js";
+import { u as useStepperActions } from "../../../hooks/useStepperActions/index.js";
+import { p as pathIcons } from "../../../icons.js";
+import { useIsMobile } from "@m4l/graphics";
+import { D as DICTIONARY } from "../../../dictionary.js";
+import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+function StepperPrevButton() {
+  const { currentStep } = useStepper((state) => ({
+    currentStep: state.currentStep
+  }));
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isMobile = useIsMobile();
+  const { getLabel } = useModuleDictionary();
+  const { prevStepAction } = useStepperActions();
+  const handlePrev = () => {
+    prevStepAction();
+  };
+  if (currentStep === 0) {
+    return null;
+  }
+  return isMobile ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "button",
+      onClick: handlePrev,
+      icon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowLeft}`,
+      "data-testid": "stepper-prev-button",
+      variant: "outline",
+      color: "default"
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      label: !isMobile ? getLabel(DICTIONARY.LABEL_PREV_BUTTON) : "",
+      variant: "outlined",
+      color: "default",
+      onClick: handlePrev,
+      startIcon: `${host_static_assets}/${environment_assets}/${pathIcons.arrowLeft}`,
+      "data-testid": "stepper-prev-button"
+    }
+  );
+}
+export {
+  StepperPrevButton as S
+};

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Botón modular para finalizar el Stepper y ejecutar onFinalSubmit
+ */
+export declare function StepperSubmitButton(): import("react/jsx-runtime").JSX.Element;

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { D as DICTIONARY } from "../../../dictionary.js";
+import { useModuleDictionary } from "@m4l/core";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+function StepperSubmitButton() {
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "submit",
+      label: getLabel(DICTIONARY.LABEL_SUBMIT_BUTTON),
+      variant: "contained",
+      color: "primary",
+      "data-testid": "stepper-submit-button"
+    }
+  );
+}
+export {
+  StepperSubmitButton as S
+};

package/components/Stepper/subcomponents/StepperButtons/index.d.ts

@@ -0,0 +1,4 @@
+export { StepperNextButton } from './StepperNextButton';
+export { StepperPrevButton } from './StepperPrevButton';
+export { StepperCancelButton } from './StepperCancelButton';
+export { StepperSubmitButton } from './StepperSubmitButton';

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

@@ -0,0 +1 @@
+

package/components/Stepper/subcomponents/StepperContent/index.d.ts

@@ -0,0 +1,7 @@
+import { StepperContentProps } from '../../types';
+/**
+ * Componente StepperContent - Contenedor que renderiza todos los Steps
+ * Cada Step maneja su propia lógica de renderizado condicional
+ * SOLO acepta componentes Step como hijos.
+ */
+export declare function StepperContent(props: StepperContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo, Children, isValidElement } from "react";
+import { S as Step } from "./subcomponents/Step/index.js";
+function StepperContent(props) {
+  const { children } = props;
+  const validSteps = useMemo(() => {
+    const steps = [];
+    Children.forEach(children, (child) => {
+      if (isValidElement(child) && child.type === Step) {
+        steps.push(child);
+      } else {
+        throw new Error(
+          "StepperContent: Solo se permiten componentes Step como hijos."
+        );
+      }
+    });
+    return steps;
+  }, [children]);
+  return /* @__PURE__ */ jsx(Fragment, { children: validSteps });
+}
+export {
+  StepperContent as S
+};

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.d.ts

@@ -0,0 +1,6 @@
+import { StepProps } from '../../../../types';
+/**
+ * Componente Step - Representa un paso individual en el Stepper
+ * Solo se renderiza cuando el step actual coincide con stepKey Y la condition es true
+ */
+export declare function Step(props: StepProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,42 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { u as useStepper } from "../../../../hooks/useStepper/index.js";
+import { useWatch } from "react-hook-form";
+import { e as evaluateVisibilityStepCondition } from "../../../../helpers/evaluateVisibilityStepCondition/index.js";
+function Step(props) {
+  const { stepKey, children } = props;
+  const formValues = useWatch();
+  const { currentStep, steps, visibilityData } = useStepper((state) => ({
+    currentStep: state.currentStep,
+    steps: state.steps,
+    visibilityData: state.visibilityData
+  }));
+  const currentStepConfig = useMemo(() => {
+    return steps[currentStep];
+  }, [steps, currentStep]);
+  const stepConfig = useMemo(() => {
+    return steps.find((step) => step.key === stepKey);
+  }, [steps, stepKey]);
+  const isStepVisible = useMemo(() => {
+    if (!currentStepConfig) {
+      return false;
+    }
+    if (stepKey !== currentStepConfig.key) {
+      return false;
+    }
+    if (stepConfig && !evaluateVisibilityStepCondition(stepConfig, formValues || {}, visibilityData)) {
+      return false;
+    }
+    return true;
+  }, [currentStepConfig, stepKey, stepConfig, formValues, visibilityData]);
+  const renderedContent = useMemo(() => {
+    if (!isStepVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }, [isStepVisible, children]);
+  return renderedContent;
+}
+export {
+  Step as S
+};

package/components/Stepper/subcomponents/StepperFooter/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperFooterProps } from '../../types';
+/**
+ * StepperFooter es el componente footer del Stepper que contiene las acciones de navegación.
+ * Puede incluir LeftActions y RightActions como children.
+ */
+export declare function StepperFooter(props: StepperFooterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { jsxs } from "react/jsx-runtime";
+import { useMemo, Children, isValidElement } from "react";
+import { j 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) {
+  const { children, ownerState } = props;
+  const { stepperFooterLeftActions, stepperFooterRightActions } = useMemo(() => {
+    let parsedLeftActions = null;
+    let parsedRightActions = null;
+    let leftActionsCount = 0;
+    let rightActionsCount = 0;
+    if (children) {
+      Children.forEach(children, (child) => {
+        if (isValidElement(child)) {
+          if (child.type === StepperFooterLeftActions) {
+            leftActionsCount++;
+            if (leftActionsCount > 1) {
+              throw new Error(
+                "StepperFooter: Solo se permite un componente StepperFooterLeftActions. Se encontraron múltiples StepperFooterLeftActions."
+              );
+            }
+            parsedLeftActions = child;
+          } else if (child.type === StepperFooterRightActions) {
+            rightActionsCount++;
+            if (rightActionsCount > 1) {
+              throw new Error(
+                "StepperFooter: Solo se permite un componente StepperFooterRightActions. Se encontraron múltiples StepperFooterRightActions."
+              );
+            }
+            parsedRightActions = child;
+          }
+        }
+      });
+    }
+    return {
+      stepperFooterLeftActions: parsedLeftActions,
+      stepperFooterRightActions: parsedRightActions
+    };
+  }, [children]);
+  return /* @__PURE__ */ jsxs(StepperFooterSectionStyled, { ownerState, children: [
+    stepperFooterLeftActions,
+    stepperFooterRightActions
+  ] });
+}
+export {
+  StepperFooter as S
+};

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperFooterLeftActionsProps } from '../../../../types';
+/**
+ * StepperFooterLeftActions es un componente de guía de estilos para acciones del lado izquierdo del footer del Stepper.
+ * Puede recibir children para renderizar contenido personalizado.
+ */
+export declare function StepperFooterLeftActions(props: StepperFooterLeftActionsProps): import("react/jsx-runtime").JSX.Element;

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

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

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperFooterRightActionsProps } from '../../../../types';
+/**
+ * StepperFooterRightActions es un componente de guía de estilos para acciones del lado derecho del footer del Stepper.
+ * Puede recibir children para renderizar contenido personalizado.
+ */
+export declare function StepperFooterRightActions(props: StepperFooterRightActionsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
+import { l as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
+import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
+import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
+function StepperFooterRightActions(props) {
+  const { children } = props;
+  const isLastVisibleValidStep = useIsLastVisibleValidStep();
+  const childrenWithoutNextButton = useMemo(() => {
+    if (!isLastVisibleValidStep) {
+      return children;
+    }
+    return React.Children.toArray(children).filter((child) => {
+      if (React.isValidElement(child)) {
+        if (child.type === StepperNextButton) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }, [children, isLastVisibleValidStep]);
+  const submitButton = useMemo(() => {
+    return isLastVisibleValidStep ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
+  }, [isLastVisibleValidStep]);
+  return /* @__PURE__ */ jsxs(StepperFooterRightActionsStyled, { children: [
+    childrenWithoutNextButton,
+    submitButton
+  ] });
+}
+export {
+  StepperFooterRightActions as S
+};