@m4l/components 9.3.13 → 9.3.15

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

@@ -0,0 +1,28 @@
+export declare enum StepperSlots {
+    stepperRoot = "stepperRoot"
+}
+export declare enum ContentSlots {
+    contentSection = "contentSection",
+    stepArea = "stepArea",
+    step = "step",
+    stepName = "stepName",
+    indicator = "indicator",
+    textNumber = "textNumber"
+}
+export declare enum ContentAreaSlots {
+    contentArea = "contentArea",
+    stepContent = "stepContent",
+    contentAreaHeader = "contentAreaHeader",
+    contentAreaBody = "contentAreaBody",
+    wrapperIcon = "wrapperIcon",
+    wrapperTitle = "wrapperTitle",
+    icon = "icon",
+    title = "title",
+    description = "description"
+}
+export declare enum StepperFooterSlots {
+    stepperFooterSection = "stepperFooterSection",
+    stepperFooterLeftActions = "stepperFooterLeftActions",
+    stepperFooterRightActions = "stepperFooterRightActions",
+    wrapperButtons = "wrapperButtons"
+}

package/components/Stepper/slots/StepperEnum.js

@@ -0,0 +1,38 @@
+var StepperSlots = /* @__PURE__ */ ((StepperSlots2) => {
+  StepperSlots2["stepperRoot"] = "stepperRoot";
+  return StepperSlots2;
+})(StepperSlots || {});
+var ContentSlots = /* @__PURE__ */ ((ContentSlots2) => {
+  ContentSlots2["contentSection"] = "contentSection";
+  ContentSlots2["stepArea"] = "stepArea";
+  ContentSlots2["step"] = "step";
+  ContentSlots2["stepName"] = "stepName";
+  ContentSlots2["indicator"] = "indicator";
+  ContentSlots2["textNumber"] = "textNumber";
+  return ContentSlots2;
+})(ContentSlots || {});
+var ContentAreaSlots = /* @__PURE__ */ ((ContentAreaSlots2) => {
+  ContentAreaSlots2["contentArea"] = "contentArea";
+  ContentAreaSlots2["stepContent"] = "stepContent";
+  ContentAreaSlots2["contentAreaHeader"] = "contentAreaHeader";
+  ContentAreaSlots2["contentAreaBody"] = "contentAreaBody";
+  ContentAreaSlots2["wrapperIcon"] = "wrapperIcon";
+  ContentAreaSlots2["wrapperTitle"] = "wrapperTitle";
+  ContentAreaSlots2["icon"] = "icon";
+  ContentAreaSlots2["title"] = "title";
+  ContentAreaSlots2["description"] = "description";
+  return ContentAreaSlots2;
+})(ContentAreaSlots || {});
+var StepperFooterSlots = /* @__PURE__ */ ((StepperFooterSlots2) => {
+  StepperFooterSlots2["stepperFooterSection"] = "stepperFooterSection";
+  StepperFooterSlots2["stepperFooterLeftActions"] = "stepperFooterLeftActions";
+  StepperFooterSlots2["stepperFooterRightActions"] = "stepperFooterRightActions";
+  StepperFooterSlots2["wrapperButtons"] = "wrapperButtons";
+  return StepperFooterSlots2;
+})(StepperFooterSlots || {});
+export {
+  ContentSlots as C,
+  StepperSlots as S,
+  ContentAreaSlots as a,
+  StepperFooterSlots as b
+};

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

@@ -0,0 +1,63 @@
+/**
+ * Slots Stepper
+ */
+export declare const StepperRootStyled: 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 ContentSectionStyled: 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<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
+export declare const StepAreaStyled: 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 ContentAreaStyled: 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 StepContentStyled: 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 StepStyled: 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 StepNameStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+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>>, {}>;
+export declare const TextNumberStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const ContentAreaBodyStyled: 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 ContentAreaHeaderStyled: 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 WrapperIconStyled: 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 WrapperTitleStyled: 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 IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon/types').IconProps, keyof import('../../Icon/types').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const TitleStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const DescriptionStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const StepperFooterSectionStyled: 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<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
+export declare const StepperFooterLeftActionsStyled: 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 StepperFooterRightActionsStyled: 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 WrapperButtonsStyled: 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

@@ -0,0 +1,107 @@
+import { styled } from "@mui/material/styles";
+import { S as STEPPER_PREFIX_NAME } from "../constants.js";
+import { S as StepperSlots, C as ContentSlots, a as ContentAreaSlots, b as StepperFooterSlots } from "./StepperEnum.js";
+import { s as stepperStyles } from "../Stepper.styles.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const StepperRootStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperSlots.stepperRoot
+})(stepperStyles.stepperRoot);
+const ContentSectionStyled = styled("section", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.contentSection
+})(stepperStyles.contentSection);
+const StepAreaStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.stepArea
+})(stepperStyles.stepArea);
+const ContentAreaStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.contentArea
+})(stepperStyles.contentArea);
+const StepContentStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.stepContent
+})(stepperStyles.stepContent);
+const StepStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.step
+})(stepperStyles.step);
+const StepNameStyled = styled(Typography, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.stepName
+})(stepperStyles.stepName);
+const IndicatorStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.indicator
+})(stepperStyles.indicator);
+const TextNumberStyled = styled(Typography, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentSlots.textNumber
+})(stepperStyles.textNumber);
+const ContentAreaBodyStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.contentAreaBody
+})(stepperStyles.contentAreaBody);
+const ContentAreaHeaderStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.contentAreaHeader
+})(stepperStyles.contentAreaHeader);
+const WrapperIconStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.wrapperIcon
+})(stepperStyles.wrapperIcon);
+const WrapperTitleStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.wrapperTitle
+})(stepperStyles.wrapperTitle);
+const IconStyled = styled(Icon, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.icon
+})(stepperStyles.icon);
+const TitleStyled = styled(Typography, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.title
+})(stepperStyles.title);
+const DescriptionStyled = styled(Typography, {
+  name: STEPPER_PREFIX_NAME,
+  slot: ContentAreaSlots.description
+})(stepperStyles.description);
+const StepperFooterSectionStyled = styled("section", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperFooterSlots.stepperFooterSection
+})(stepperStyles.stepperFooterSection);
+const StepperFooterLeftActionsStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperFooterSlots.stepperFooterLeftActions
+})(stepperStyles.stepperFooterLeftActions);
+const StepperFooterRightActionsStyled = styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperFooterSlots.stepperFooterRightActions
+})(stepperStyles.stepperFooterRightActions);
+styled("div", {
+  name: STEPPER_PREFIX_NAME,
+  slot: StepperFooterSlots.wrapperButtons
+})(stepperStyles.wrapperButtons);
+export {
+  ContentSectionStyled as C,
+  DescriptionStyled as D,
+  IconStyled as I,
+  StepperRootStyled as S,
+  TitleStyled as T,
+  WrapperIconStyled as W,
+  ContentAreaStyled as a,
+  ContentAreaHeaderStyled as b,
+  ContentAreaBodyStyled as c,
+  WrapperTitleStyled as d,
+  StepAreaStyled as e,
+  StepStyled as f,
+  StepNameStyled as g,
+  IndicatorStyled as h,
+  TextNumberStyled as i,
+  StepContentStyled as j,
+  StepperFooterSectionStyled as k,
+  StepperFooterLeftActionsStyled as l,
+  StepperFooterRightActionsStyled as m
+};

package/components/Stepper/store/StepperContext/index.d.ts

@@ -0,0 +1,17 @@
+import { StepperContextProps } from '../types';
+declare const StepperContext: import('react').Context<(Omit<Omit<import('zustand').StoreApi<import('../types').StepperStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import('../types').StepperStateWithActions | Partial<import('../types').StepperStateWithActions> | ((state: import('../types').StepperStateWithActions) => import('../types').StepperStateWithActions | Partial<import('../types').StepperStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import('../types').StepperStateWithActions | Partial<import('../types').StepperStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('../types').StepperStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+/**
+ * Contexto que crea y da alcance al Store (Zustand) para ser usado desde cualquier parte del componente.
+ * @param props StepperProps
+ * @returns Proveedor de contexto, y el contexto
+ */
+declare const StepperProvider: (props: StepperContextProps) => import("react/jsx-runtime").JSX.Element;
+export { StepperProvider, StepperContext };

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

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useRef, useEffect } from "react";
+import { c as createStepperStore } from "../StepperStore/index.js";
+import { f as findNextVisibleValidStep } from "../../helpers/findNextVisibleValidStep/index.js";
+const StepperContext = createContext(null);
+const StepperProvider = (props) => {
+  const {
+    storeId,
+    storeDevtoolsEnabled,
+    steps,
+    visibleTitle = true,
+    indicatorType = "number",
+    orientation = "horizontal",
+    visibilityData,
+    children
+  } = props;
+  const stepperStoreRef = useRef();
+  const prevVisibilityDataRef = useRef(visibilityData);
+  if (!stepperStoreRef.current) {
+    stepperStoreRef.current = createStepperStore(
+      {
+        storeId,
+        steps,
+        visibleTitle,
+        ownerState: {},
+        indicatorType,
+        orientation,
+        visibilityData
+      },
+      storeDevtoolsEnabled
+    );
+    stepperStoreRef.current.getState().actions.init(steps);
+  }
+  useEffect(() => {
+    if (stepperStoreRef.current) {
+      const currentState = stepperStoreRef.current.getState();
+      if (currentState.visibleTitle !== visibleTitle) {
+        stepperStoreRef.current.setState((state) => ({
+          ...state,
+          visibleTitle
+        }));
+      }
+      if (currentState.orientation !== orientation) {
+        stepperStoreRef.current.setState((state) => ({
+          ...state,
+          orientation
+        }));
+      }
+      if (currentState.indicatorType !== indicatorType) {
+        stepperStoreRef.current.setState((state) => ({
+          ...state,
+          indicatorType
+        }));
+      }
+      if (currentState.visibilityData !== visibilityData) {
+        stepperStoreRef.current.setState((state) => ({
+          ...state,
+          visibilityData
+        }));
+      }
+    }
+  }, [visibleTitle, orientation, indicatorType, visibilityData]);
+  useEffect(() => {
+    if (stepperStoreRef.current && steps) {
+      const store = stepperStoreRef.current;
+      const currentState = store.getState();
+      store.getState().actions.init(steps, true);
+      if (visibilityData) {
+        const hasVisibilityDataChanged = JSON.stringify(prevVisibilityDataRef.current) !== JSON.stringify(visibilityData);
+        if (hasVisibilityDataChanged) {
+          const nextStepIndex = findNextVisibleValidStep(
+            currentState.currentStep,
+            steps,
+            {},
+            visibilityData
+          );
+          if (nextStepIndex < steps.length && nextStepIndex !== currentState.currentStep) {
+            store.getState().actions.setCurrentStep(nextStepIndex);
+            store.getState().actions.setStepValidationStatus(currentState.currentStep, true);
+          }
+        }
+      }
+    }
+    prevVisibilityDataRef.current = visibilityData;
+  }, [steps, visibilityData]);
+  return /* @__PURE__ */ jsx(StepperContext.Provider, { value: stepperStoreRef.current, children });
+};
+export {
+  StepperProvider as S,
+  StepperContext as a
+};

package/components/Stepper/store/StepperStore/index.d.ts

@@ -0,0 +1,16 @@
+import { InitialStoreProps, StepperStateWithActions } from '../types';
+/**
+ *  Crea el store de zustand para el componente Stepper
+ * @param initProps Variables iniciales que necesita store para poder inicializarlo
+ * @returns
+ */
+export declare const createStepperStore: (initProps: InitialStoreProps, storeDevtoolsEnabled?: boolean) => Omit<Omit<import('zustand').StoreApi<StepperStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: StepperStateWithActions | Partial<StepperStateWithActions> | ((state: StepperStateWithActions) => StepperStateWithActions | Partial<StepperStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: StepperStateWithActions | Partial<StepperStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<StepperStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export type StepperStore = ReturnType<typeof createStepperStore>;

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

@@ -0,0 +1,133 @@
+import { createStore } from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { a as STEPPER_STORE_ID } from "../../constants.js";
+import { f as findNextVisibleValidStep } from "../../helpers/findNextVisibleValidStep/index.js";
+import { f as findPrevVisibleValidStep } from "../../helpers/findPrevVisibleValidStep/index.js";
+const createDevtools = (immerMiddlewere, config) => {
+  const { enabled = false } = config;
+  if (enabled && process.env.NODE_ENV === "development") {
+    return devtools(immerMiddlewere, config);
+  }
+  return immerMiddlewere;
+};
+const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
+  const startProps = {
+    currentStep: 0,
+    stepValidationStatus: {},
+    isValidating: false,
+    ...initProps
+  };
+  return createStore(
+    createDevtools(
+      /**
+       * immer es un middleware de Zustand que permite trabajar con el estado de manera inmutable
+       */
+      immer((set, get) => ({
+        ...startProps,
+        actions: {
+          /**
+           * init es la acción que se ejecuta al inicializar el store
+           */
+          init: (steps, preserveStepValidationStatus = false) => {
+            set((state) => {
+              state.steps = steps;
+              if (!preserveStepValidationStatus) {
+                state.stepValidationStatus = {};
+              }
+            });
+          },
+          /**
+           * setCurrentStep es la acción que se ejecuta para cambiar el step actual
+           */
+          setCurrentStep: (currentStep) => {
+            set((state) => {
+              state.currentStep = currentStep;
+            });
+          },
+          /**
+           * setStepValidationStatus es la acción que se ejecuta para establecer el estado de validación de un paso
+           * @param stepIndex
+           * @param isValid
+           */
+          setStepValidationStatus: (stepIndex, isValid) => {
+            set((state) => {
+              state.stepValidationStatus[stepIndex] = isValid;
+            });
+          },
+          /**
+           * prevStep - Función que retrocede al paso anterior válido del Stepper.
+           * @param formData Datos del formulario actual para evaluar las conditions de los pasos
+           * @param visibilityData Datos adicionales para evaluar las conditions (opcional, usa el del store si no se proporciona)
+           */
+          prevStep: (formData = {}, visibilityData) => {
+            const state = get();
+            const { currentStep, steps } = state;
+            const dataForVisibility = visibilityData ?? state.visibilityData;
+            const prevValidStepIndex = findPrevVisibleValidStep(
+              currentStep,
+              steps,
+              formData,
+              dataForVisibility
+            );
+            if (prevValidStepIndex < 0) {
+              return;
+            }
+            set((draft) => {
+              draft.currentStep = prevValidStepIndex;
+            });
+          },
+          /**
+           * nextStep - Función que valida el paso actual y avanza al siguiente paso del Stepper.
+           * @param validateFn Función de validación externa que debe retornar una promesa que resuelve a true o false
+           * @param formData Datos del formulario actual para evaluar las conditions de los pasos
+           * @param visibilityData Datos adicionales para evaluar las conditions (opcional, usa el del store si no se proporciona)
+           * @returns Promise<boolean> Retorna true si se avanzó al siguiente paso, false en caso contrario
+           */
+          nextStep: async (validateFn, formData = {}, visibilityData) => {
+            const state = get();
+            const { currentStep, steps } = state;
+            const dataForVisibility = visibilityData ?? state.visibilityData;
+            const isValid = await validateFn();
+            const nextValidStepIndex = findNextVisibleValidStep(
+              currentStep,
+              steps,
+              formData,
+              dataForVisibility
+            );
+            if (!isValid) {
+              set((draft) => {
+                draft.isValidating = false;
+                draft.stepValidationStatus[currentStep] = false;
+              });
+              return false;
+            }
+            set((draft) => {
+              draft.isValidating = false;
+              draft.stepValidationStatus[currentStep] = true;
+              draft.currentStep = nextValidStepIndex;
+            });
+            return true;
+          },
+          /**
+           * resetStepper - Resetea el Stepper a su estado inicial
+           */
+          resetStepper: () => {
+            set((state) => {
+              state.currentStep = 0;
+              state.stepValidationStatus = {};
+              state.isValidating = false;
+            });
+          }
+        }
+      })),
+      {
+        name: `${STEPPER_STORE_ID}: ${initProps.storeId}`,
+        enabled: storeDevtoolsEnabled
+      }
+    )
+  );
+};
+export {
+  createStepperStore as c
+};

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

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { Step, StepperOwnerState, StepperProps } from '../types';
+export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTitle' | 'steps' | 'indicatorType' | 'orientation' | 'size' | 'visibilityData'> {
+    /**
+     *  "ownerState" estado a nivel de clases del componente
+     */
+    ownerState: StepperOwnerState;
+    /**
+     * "currentStep" step actual
+     */
+    currentStep: number;
+    /**
+     * "stepValidationStatus" estado de validación por cada step
+     * - true: el paso es válido
+     */
+    stepValidationStatus: Record<number, boolean>;
+    /**
+     * "isValidating" indica si el stepper está en proceso de validación
+     */
+    isValidating: boolean;
+}
+export interface StepperStateWithActions extends StepperState {
+    actions: {
+        /**
+         * inicializa el estado del componente con los steps que provienen desde afuera,
+         * @param steps - Array de steps
+         * @param preserveStepValidationStatus - Indica si se debe preservar el estado de validación de los pasos, por defecto es false
+         */
+        init: (steps: Array<Step>, preserveStepValidationStatus?: boolean) => void;
+        /**
+         * Establece el paso actual
+         * @param currentStep - Índice del paso actual
+         */
+        setCurrentStep: (currentStep: number) => void;
+        /**
+         * Establece el estado de validación de un paso
+         * @param stepIndex - Índice del paso
+         * @param isValid - Estado de validación del paso
+         */
+        setStepValidationStatus: (stepIndex: number, isValid: boolean) => void;
+        /**
+         * Retrocede al paso anterior válido
+         * @param formData - Datos del formulario para evaluar conditions
+         * @param visibilityData - Datos adicionales para evaluar conditions
+         */
+        prevStep: (formData?: Record<string, any>, visibilityData?: any) => void;
+        /**
+         * Valida el paso actual y avanza al siguiente si es válido
+         * @param validateFn - Función de validación
+         * @param formData - Datos del formulario para evaluar conditions
+         * @param visibilityData - Datos adicionales para evaluar conditions
+         */
+        nextStep: (validateFn: () => Promise<boolean>, formData?: Record<string, any>, visibilityData?: any) => Promise<boolean>;
+        /**
+         * resetStepper - Resetea el Stepper a su estado inicial
+         */
+        resetStepper: () => void;
+    };
+}
+export interface StepperContextProps extends StepperProps {
+    children: ReactNode;
+}
+export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'indicatorType' | 'orientation' | 'visibilityData'>;

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

@@ -0,0 +1,6 @@
+import { ContentAreaProps } from '../../types';
+/**
+ * El componente ContentArea renderiza el área de contenido del Stepper.
+ * Contiene el encabezado con un icono, titulo y descripción, y el contenido del step actual.
+ */
+export declare function ContentArea(props: ContentAreaProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { u as useStepper } from "../../hooks/useStepper/index.js";
+import { a as ContentAreaStyled, b as ContentAreaHeaderStyled, c 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) {
+  const { children } = props;
+  const { orientation } = useStepper((state) => ({
+    orientation: state.orientation
+  }));
+  const ownerState = {
+    orientation
+  };
+  return /* @__PURE__ */ jsxs(ContentAreaStyled, { ownerState, children: [
+    /* @__PURE__ */ jsxs(ContentAreaHeaderStyled, { children: [
+      /* @__PURE__ */ jsx(WrapperIcon, {}),
+      /* @__PURE__ */ jsx(WrapperTitle, {})
+    ] }),
+    /* @__PURE__ */ jsx(ContentAreaBodyStyled, { children })
+  ] });
+}
+export {
+  ContentArea as C
+};

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente WrapperIcon renderiza el icono del título del Stepper.
+ */
+export declare function WrapperIcon(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { W as WrapperIconStyled, I 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";
+function WrapperIcon() {
+  const { steps, currentStep } = useStepper((state) => ({
+    steps: state.steps,
+    currentStep: state.currentStep
+  }));
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const currentStepConfig = useMemo(() => {
+    return steps[currentStep];
+  }, [steps, currentStep]);
+  return /* @__PURE__ */ jsx(WrapperIconStyled, { children: /* @__PURE__ */ jsx(
+    IconStyled,
+    {
+      color: "primary.enabled",
+      src: currentStepConfig.icon ? currentStepConfig.icon : `${host_static_assets}/${environment_assets}/${pathIcons.patronum}`
+    }
+  ) });
+}
+export {
+  WrapperIcon as W
+};

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * El componente WrapperTitle renderiza el título y la descripción del step en el Stepper.
+ */
+export declare function WrapperTitle(): import("react/jsx-runtime").JSX.Element | null;