@soyfri/shared-library 2.0.0-beta.9 → 2.0.0

package/components/Stepper/Stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport {\n  Stepper as MuiStepper,\n  Step as MuiStep,\n  StepLabel as MuiStepLabel,\n  Box,\n  useMediaQuery,\n  useTheme,\n  Breakpoint,\n} from \"@mui/material\";\nimport { StepProps } from \"./Step\";\nimport { useWizard } from \"../../hooks/Wizard\";\n\ninterface MyStepperProps {\n  children: ReactElement<StepProps>[];\n  orientation?: \"horizontal\" | \"vertical\";\n  sx?: object;\n  alternateLabel?: boolean;\n  /**\n   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta\n   * leerlo del `WizardContext` (si está dentro de un `<WizardProvider>`).\n   * Si tampoco hay provider, el default es 0.\n   */\n  currentStep?: number;\n  /**\n   * Cuando es true (default), en pantallas más angostas que `mobileBreakpoint`\n   * el stepper horizontal automáticamente:\n   *  - cambia a orientación vertical si hay >3 steps, o\n   *  - oculta los labels (solo dots) si hay ≤3 steps,\n   * para evitar que se desborde del contenedor.\n   * Si pasas `orientation=\"vertical\"` explícito, no se altera.\n   */\n  responsive?: boolean;\n  /** Breakpoint debajo del cual aplica el modo mobile. Default: \"sm\". */\n  mobileBreakpoint?: Breakpoint;\n}\n\nexport const Stepper: React.FC<MyStepperProps> = ({\n  children,\n  orientation = \"horizontal\",\n  alternateLabel = false,\n  responsive = true,\n  mobileBreakpoint = \"sm\",\n  sx,\n  currentStep: currentStepProp,\n}) => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));\n\n  // Solo aplicamos adaptación mobile si el consumer pidió orientación horizontal.\n  const mobileAdapt = responsive && isMobile && orientation === \"horizontal\";\n  // Con muchos steps no caben aunque ocultes labels → mejor vertical.\n  const effectiveOrientation: \"horizontal\" | \"vertical\" =\n    mobileAdapt && children.length > 3 ? \"vertical\" : orientation;\n  // Con pocos steps conservamos horizontal pero ocultamos labels para no desbordar.\n  const hideLabelsOnMobile = mobileAdapt && children.length <= 3;\n  const effectiveAlternateLabel =\n    alternateLabel && effectiveOrientation === \"horizontal\";\n  // Lee el paso desde el WizardContext cuando el consumer no lo pasa como prop.\n  // Si el Stepper NO está dentro de un WizardProvider, `useWizard()` devuelve\n  // el valor default (currentStep=0, totalSteps=0), así que no rompe nada.\n  const wizard = useWizard();\n  const currentStep =\n    currentStepProp !== undefined\n      ? currentStepProp\n      : wizard.totalSteps > 0\n        ? wizard.currentStep\n        : 0;\n\n  return (\n    <Box sx={{ width: \"100%\", overflowX: \"hidden\", ...sx }}>\n      <MuiStepper\n        activeStep={currentStep}\n        orientation={effectiveOrientation}\n        alternativeLabel={effectiveAlternateLabel}\n        sx={{\n          // En horizontal con muchos labels + poco ancho, permitimos que\n          // los labels hagan wrap en lugar de forzar overflow.\n          ...(effectiveOrientation === \"horizontal\" && {\n            flexWrap: \"wrap\",\n            rowGap: 1,\n            \"& .MuiStepLabel-label\": { textAlign: \"center\" },\n          }),\n        }}\n      >\n        {children.map((child, idx) => {\n          const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;\n          return (\n            <MuiStep key={idx} completed={completed} disabled={disabled} className={className} sx={stepSx}>\n              <MuiStepLabel sx={{\n                pointerEvents: 'none',\n                // Ocultamos la parte de texto en mobile cuando aplicamos\n                // reducción a dots-only. El icono se mantiene visible.\n                ...(hideLabelsOnMobile && {\n                  \"& .MuiStepLabel-labelContainer\": { display: \"none\" },\n                }),\n                \"& .MuiStepIcon-root\": {\n                  color: dotColor,\n                },\n                \"& .MuiStepIcon-active\": {\n                  color: activeDotColor,\n                },\n                \"& .MuiStepIcon-completed\": {\n                  color: completedDotColor,\n                },\n                \"& .MuiStepIcon-text\": {\n                  fill: iconTextColor,\n                },\n              }}\n              >{label}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n      </MuiStepper>\n      <Box mt={2}>\n        {children.map((child, idx) =>\n          idx === currentStep ? <Box key={idx}>{child.props.children}</Box> : null\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nexport default Stepper;","import React from \"react\";\nimport { StepProps as MuiStepProps } from \"@mui/material\";\n\ntype PickMuiStepProps = Pick<MuiStepProps, \"completed\" | \"disabled\" | \"sx\" | \"className\">;\n\nexport interface StepProps extends PickMuiStepProps {\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  sx?: object;\n  dotColor?: string;          // dot base\n  activeDotColor?: string;    // dot activa\n  completedDotColor?: string; // dot completada\n  iconTextColor?: string;     // número o check dentro\n}\n\nexport const Step = (_: StepProps): null => null;\n\nStep.displayName = \"Step\";\n\nexport default Step;"],"names":["useTheme","useMediaQuery","useWizard","jsxs","Box","jsx","MuiStepper","MuiStep","MuiStepLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,UAAoC,CAAC;AAAA,EAChD;AAAA,EACA,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQA,SAAAA,SAAA;AACd,QAAM,WAAWC,SAAAA,cAAc,MAAM,YAAY,KAAK,gBAAgB,CAAC;AAGvE,QAAM,cAAc,cAAc,YAAY,gBAAgB;AAE9D,QAAM,uBACJ,eAAe,SAAS,SAAS,IAAI,aAAa;AAEpD,QAAM,qBAAqB,eAAe,SAAS,UAAU;AAC7D,QAAM,0BACJ,kBAAkB,yBAAyB;AAI7C,QAAM,SAASC,UAAAA,UAAA;AACf,QAAM,cACJ,oBAAoB,SAChB,kBACA,OAAO,aAAa,IAClB,OAAO,cACP;AAER,SACEC,gCAACC,SAAAA,KAAA,EAAI,IAAI,iBAAE,OAAO,QAAQ,WAAW,YAAa,KAChD,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,kBAAkB;AAAA,QAClB,IAAI,mBAGE,yBAAyB,gBAAgB;AAAA,UAC3C,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,yBAAyB,EAAE,WAAW,SAAA;AAAA,QAAS;AAAA,QAIlD,UAAA,SAAS,IAAI,CAAC,OAAO,QAAQ;AAC5B,gBAAM,EAAE,OAAO,WAAW,UAAU,WAAW,IAAI,QAAQ,UAAU,gBAAgB,mBAAmB,cAAA,IAAkB,MAAM;AAChI,gDACGC,eAAA,EAAkB,WAAsB,UAAoB,WAAsB,IAAI,QACrF,UAAAF,2BAAAA;AAAAA,YAACG,SAAAA;AAAAA,YAAA;AAAA,cAAa,IAAI;AAAA,gBAChB,eAAe;AAAA,iBAGX,sBAAsB;AAAA,gBACxB,kCAAkC,EAAE,SAAS,OAAA;AAAA,cAAO,IALtC;AAAA,gBAOhB,uBAAuB;AAAA,kBACrB,OAAO;AAAA,gBAAA;AAAA,gBAET,yBAAyB;AAAA,kBACvB,OAAO;AAAA,gBAAA;AAAA,gBAET,4BAA4B;AAAA,kBAC1B,OAAO;AAAA,gBAAA;AAAA,gBAET,uBAAuB;AAAA,kBACrB,MAAM;AAAA,gBAAA;AAAA,cACR;AAAA,cAEA,UAAA;AAAA,YAAA;AAAA,UAAA,KArBU,GAuBd;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHH,2BAAAA,IAACD,SAAAA,KAAA,EAAI,IAAI,GACN,UAAA,SAAS;AAAA,MAAI,CAAC,OAAO,QACpB,QAAQ,cAAcC,2BAAAA,IAACD,SAAAA,KAAA,EAAe,UAAA,MAAM,MAAM,SAAA,GAAlB,GAA2B,IAAS;AAAA,IAAA,EACtE,CACF;AAAA,EAAA,GACF;AAEJ;AC1GO,MAAM,OAAO,CAAC,MAAuB;AAE5C,KAAK,cAAc;;;"}
+{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/StepperContext.tsx","../../../src/components/Stepper/_hooks/useHorizontalScroll.ts","../../../src/components/Stepper/_parts/StepperScrollArrow.tsx","../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type FC,\n  type ReactNode,\n} from 'react';\n\n/**\n * API expuesta por `useStepper()`.\n */\nexport interface StepperContextValue {\n  /** Índice del paso actual (0-based). */\n  currentStep: number;\n  /** Total de pasos del stepper. */\n  totalSteps: number;\n  /** True si `currentStep === 0`. */\n  isFirst: boolean;\n  /** True si `currentStep === totalSteps - 1`. */\n  isLast: boolean;\n  /** True tras ejecutar `submitStep()` desde el último paso. */\n  completed: boolean;\n  /** Avanza al siguiente paso (no pasa de `totalSteps - 1`). */\n  nextStep: () => void;\n  /** Retrocede al paso anterior (no baja de 0). */\n  prevStep: () => void;\n  /** Salta a un paso específico (0-based). No-op si fuera de rango. */\n  goToStep: (stepNumber: number) => void;\n  /**\n   * Envía el stepper. Marca `completed = true` y dispara el callback\n   * `onSubmit` del provider. En el último paso suele reemplazar a `nextStep`.\n   */\n  submitStep: () => void;\n  /** Resetea al paso inicial y limpia `completed`. */\n  reset: () => void;\n}\n\nconst defaultValue: StepperContextValue = {\n  currentStep: 0,\n  totalSteps: 0,\n  isFirst: true,\n  isLast: true,\n  completed: false,\n  nextStep: () => {},\n  prevStep: () => {},\n  goToStep: () => {},\n  submitStep: () => {},\n  reset: () => {},\n};\n\nexport const StepperContext = createContext<StepperContextValue>(defaultValue);\n\n/**\n * Hook para consumir el `StepperContext` desde cualquier descendiente de\n * `<StepperProvider>`.\n *\n * Si se llama fuera de un provider, devuelve los valores por defecto (no-op)\n * para que componentes como `<Stepper>` puedan leerlo sin romper cuando no\n * hay provider envolvente.\n */\nexport function useStepper(): StepperContextValue {\n  return useContext(StepperContext);\n}\n\nexport interface StepperProviderProps {\n  /** Número total de pasos. Requerido. */\n  totalSteps: number;\n  /** Paso inicial (0-based). Default: 0. */\n  initialStep?: number;\n  /**\n   * Callback disparado cuando se llama `submitStep()`. Recibe el paso actual.\n   * El paquete NO ejecuta ninguna petición; queda a cargo del consumer.\n   */\n  onSubmit?: (currentStep: number) => void;\n  /**\n   * Callback disparado en cada cambio de paso (next/prev/goTo).\n   * Útil para tracking o validaciones externas.\n   */\n  onStepChange?: (newStep: number, prevStep: number) => void;\n  children?: ReactNode;\n}\n\n/**\n * Provider del stepper. Administra el `currentStep` internamente. El consumer\n * no necesita gestionar estado — solo consumirlo con `useStepper()` desde\n * cualquier descendiente.\n *\n * ```tsx\n * <StepperProvider totalSteps={3} onSubmit={handleFinalSubmit}>\n *   <Stepper>\n *     <Step label=\"Paso 1\"><StepOne /></Step>\n *     <Step label=\"Paso 2\"><StepTwo /></Step>\n *     <Step label=\"Paso 3\"><StepThree /></Step>\n *   </Stepper>\n *   <StepperControls />\n * </StepperProvider>\n * ```\n */\nexport const StepperProvider: FC<StepperProviderProps> = ({\n  totalSteps,\n  initialStep = 0,\n  onSubmit,\n  onStepChange,\n  children,\n}) => {\n  const [currentStep, setCurrentStep] = useState(initialStep);\n  const [completed, setCompleted] = useState(false);\n\n  const changeStep = useCallback(\n    (newStep: number) => {\n      if (newStep < 0 || newStep >= totalSteps) return;\n      if (newStep === currentStep) return;\n      onStepChange?.(newStep, currentStep);\n      setCurrentStep(newStep);\n    },\n    [currentStep, totalSteps, onStepChange],\n  );\n\n  const nextStep = useCallback(() => {\n    changeStep(currentStep + 1);\n  }, [changeStep, currentStep]);\n\n  const prevStep = useCallback(() => {\n    changeStep(currentStep - 1);\n  }, [changeStep, currentStep]);\n\n  const goToStep = useCallback(\n    (stepNumber: number) => {\n      changeStep(stepNumber);\n    },\n    [changeStep],\n  );\n\n  const submitStep = useCallback(() => {\n    setCompleted(true);\n    onSubmit?.(currentStep);\n  }, [currentStep, onSubmit]);\n\n  const reset = useCallback(() => {\n    setCurrentStep(initialStep);\n    setCompleted(false);\n  }, [initialStep]);\n\n  const value = useMemo<StepperContextValue>(\n    () => ({\n      currentStep,\n      totalSteps,\n      isFirst: currentStep === 0,\n      isLast: currentStep === totalSteps - 1,\n      completed,\n      nextStep,\n      prevStep,\n      goToStep,\n      submitStep,\n      reset,\n    }),\n    [\n      currentStep,\n      totalSteps,\n      completed,\n      nextStep,\n      prevStep,\n      goToStep,\n      submitStep,\n      reset,\n    ],\n  );\n\n  return (\n    <StepperContext.Provider value={value}>{children}</StepperContext.Provider>\n  );\n};\n","import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\n/**\n * Hook interno del Stepper para manejar scroll horizontal cuando los steps\n * no caben en el contenedor. No se exporta desde el barrel — es un detalle\n * de implementación.\n *\n * @param enabled - Si el scroll está activo (típicamente sólo en orientación horizontal).\n * @param deps    - Cosas que afectan el layout y disparan un recompute (ej. cantidad de steps, paso activo).\n *\n * Retorna:\n * - `scrollRef`: ref a asignar al contenedor con `overflow-x: auto`.\n * - `canScrollLeft` / `canScrollRight`: flags para habilitar/deshabilitar flechas.\n * - `scrollBy(delta)`: imperativo con scroll suave.\n */\nexport function useHorizontalScroll(enabled: boolean, deps: unknown[] = []) {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    // Tolerancia de 1px por redondeos de subpixel.\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!enabled) return;\n    updateScrollState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, updateScrollState, ...deps]);\n\n  useEffect(() => {\n    if (!enabled) return;\n    const el = scrollRef.current;\n    if (!el) return;\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n    const ro = new ResizeObserver(updateScrollState);\n    ro.observe(el);\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      ro.disconnect();\n    };\n  }, [enabled, updateScrollState]);\n\n  const scrollBy = useCallback((delta: number) => {\n    const el = scrollRef.current;\n    if (!el) return;\n    el.scrollBy({ left: delta, behavior: 'smooth' });\n  }, []);\n\n  return { scrollRef, canScrollLeft, canScrollRight, scrollBy };\n}\n","import { IconButton } from '@mui/material';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\n\ninterface StepperScrollArrowProps {\n  direction: 'left' | 'right';\n  /** Cuando `false`, el botón está deshabilitado (por ejemplo, ya estás al inicio). */\n  enabled: boolean;\n  /**\n   * Cuando `false`, el botón queda con `visibility: hidden` (reserva su\n   * espacio pero no se ve). Útil para que el área de scroll no se corra\n   * horizontalmente cuando no hay overflow en ningún lado.\n   */\n  visible: boolean;\n  onClick: () => void;\n}\n\n/**\n * Flecha de scroll (`<` / `>`) del Stepper horizontal. Se muestra a los\n * costados del área scrollable cuando hay overflow. Componente privado —\n * no se exporta del barrel.\n */\nexport const StepperScrollArrow = ({\n  direction,\n  enabled,\n  visible,\n  onClick,\n}: StepperScrollArrowProps) => {\n  const isLeft = direction === 'left';\n  const Icon = isLeft ? ChevronLeftIcon : ChevronRightIcon;\n  const ariaLabel = isLeft ? 'Anterior' : 'Siguiente';\n\n  return (\n    <IconButton\n      aria-label={ariaLabel}\n      size=\"small\"\n      onClick={onClick}\n      disabled={!enabled}\n      sx={{\n        flex: '0 0 auto',\n        // Reservamos el slot siempre que haya overflow en algún lado,\n        // así el área scroll tiene un ancho estable (no saltan los\n        // steps cuando aparece/desaparece la flecha).\n        visibility: visible ? 'visible' : 'hidden',\n      }}\n    >\n      <Icon fontSize=\"small\" />\n    </IconButton>\n  );\n};\n","import {\n  Children,\n  isValidElement,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport {\n  Stepper as MuiStepper,\n  Step as MuiStep,\n  StepLabel as MuiStepLabel,\n  Box,\n} from '@mui/material';\n\nimport { StepProps } from './Step';\nimport { useStepper } from './StepperContext';\nimport { useHorizontalScroll } from './_hooks/useHorizontalScroll';\nimport { StepperScrollArrow } from './_parts/StepperScrollArrow';\n\nexport interface StepperProps {\n  /** Uno o varios `<Step>`. Children que no sean `<Step>` se ignoran. */\n  children: ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n  alternateLabel?: boolean;\n  /**\n   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta\n   * leerlo del `StepperContext` (si está dentro de un `<StepperProvider>`).\n   * Si tampoco hay provider, el default es 0.\n   */\n  currentStep?: number;\n  keepMounted?: boolean;\n  sx?: object;\n}\n\nexport const Stepper: FC<StepperProps> = ({\n  children,\n  orientation = 'horizontal',\n  alternateLabel = false,\n  currentStep: currentStepProp,\n  keepMounted = false,\n  sx,\n}) => {\n  // Lee el paso desde el StepperContext cuando el consumer no lo pasa como prop.\n  const stepperCtx = useStepper();\n  const currentStep =\n    currentStepProp !== undefined\n      ? currentStepProp\n      : stepperCtx.totalSteps > 0\n        ? stepperCtx.currentStep\n        : 0;\n\n  const isHorizontal = orientation === 'horizontal';\n\n  // Filtra los children a los que tengan displayName=\"Step\" — acepta arrays,\n  // single child, fragments, y descarta cualquier otra cosa (strings, null, etc.).\n  const steps: ReactElement<StepProps>[] = Children.toArray(children).filter(\n    (child): child is ReactElement<StepProps> =>\n      isValidElement(child) &&\n      (child.type as { displayName?: string })?.displayName === 'Step',\n  );\n\n  const { scrollRef, canScrollLeft, canScrollRight, scrollBy } = useHorizontalScroll(\n    isHorizontal,\n    [steps.length, currentStep],\n  );\n\n  const showArrows = isHorizontal && (canScrollLeft || canScrollRight);\n\n  return (\n    <Box sx={sx}>\n      <Box\n        sx={\n          isHorizontal\n            ? { display: 'flex', alignItems: 'center', width: '100%', gap: 0.5 }\n            : undefined\n        }\n      >\n        {isHorizontal && (\n          <StepperScrollArrow\n            direction=\"left\"\n            enabled={canScrollLeft}\n            visible={showArrows}\n            onClick={() => scrollBy(-160)}\n          />\n        )}\n        <Box\n          ref={scrollRef}\n          sx={\n            isHorizontal\n              ? {\n                flex: '1 1 auto',\n                minWidth: 0,\n                overflowX: 'auto',\n                scrollBehavior: 'smooth',\n                WebkitOverflowScrolling: 'touch',\n                scrollbarWidth: 'none',\n                '&::-webkit-scrollbar': { display: 'none' },\n              }\n              : undefined\n          }\n        >\n          <MuiStepper\n            activeStep={currentStep}\n            orientation={orientation}\n            alternativeLabel={alternateLabel}\n            sx={{\n              ...(isHorizontal && {\n                display: 'inline-flex',\n                flexWrap: 'nowrap',\n                minWidth: '100%',\n                width: 'max-content',\n                '& .MuiStep-root': { flex: '0 0 auto', minWidth: 120 },\n              }),\n              ...(alternateLabel && { justifyContent: 'center' }),\n            }}\n          >\n            {steps.map((step, idx) => {\n              const {\n                label,\n                completed,\n                disabled,\n                className,\n                sx: stepSx,\n                dotColor,\n                activeDotColor,\n                completedDotColor,\n                iconTextColor,\n              } = step.props;\n              const key = step.key ?? idx;\n              return (\n                <MuiStep\n                  key={key}\n                  completed={completed}\n                  disabled={disabled}\n                  className={className}\n                  sx={stepSx}\n                >\n                  <MuiStepLabel\n                    sx={{\n                      pointerEvents: 'none',\n                      '& .MuiStepIcon-root': { color: dotColor },\n                      '& .MuiStepIcon-active': { color: activeDotColor },\n                      '& .MuiStepIcon-completed': { color: completedDotColor },\n                      '& .MuiStepIcon-text': { fill: iconTextColor },\n                    }}\n                  >\n                    {label}\n                  </MuiStepLabel>\n                </MuiStep>\n              );\n            })}\n          </MuiStepper>\n        </Box>\n        {isHorizontal && (\n          <StepperScrollArrow\n            direction=\"right\"\n            enabled={canScrollRight}\n            visible={showArrows}\n            onClick={() => scrollBy(160)}\n          />\n        )}\n      </Box>\n\n      {/* Cuerpos de los steps — render según el modo `keepMounted` */}\n      <Box mt={2}\n        sx={{\n          display: 'flex',\n          justifyContent: 'center',\n        }}>\n        {keepMounted\n          ? steps.map((step, idx) => {\n            const key = step.key ?? idx;\n            const isActive = idx === currentStep;\n            return (\n              <Box\n                key={key}\n                // `display: none` mantiene el nodo en el DOM — state de los\n                // hijos (inputs, useState, etc.) no se pierde al navegar.\n                sx={{ display: isActive ? 'block' : 'none', width: '100%' }}\n                // Accesibilidad: oculta del flujo de lectura pero no del DOM.\n                aria-hidden={!isActive}\n              >\n                {step.props.children}\n              </Box>\n            );\n          })\n          : steps.map((step, idx) => {\n            if (idx !== currentStep) return null;\n            const key = step.key ?? idx;\n            return <Box key={key}>{step.props.children}</Box>;\n          })}\n      </Box>\n    </Box>\n  );\n};\n\nexport default Stepper;\n","import React from \"react\";\nimport { StepProps as MuiStepProps } from \"@mui/material\";\n\ntype PickMuiStepProps = Pick<MuiStepProps, \"completed\" | \"disabled\" | \"sx\" | \"className\">;\n\nexport interface StepProps extends PickMuiStepProps {\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  sx?: object;\n  dotColor?: string;          // dot base\n  activeDotColor?: string;    // dot activa\n  completedDotColor?: string; // dot completada\n  iconTextColor?: string;     // número o check dentro\n}\n\nexport const Step = (_: StepProps): null => null;\n\nStep.displayName = \"Step\";\n\nexport default Step;"],"names":["createContext","useContext","useState","useCallback","useMemo","jsx","useRef","useLayoutEffect","useEffect","IconButton","Children","isValidElement","jsxs","Box","MuiStepper","MuiStep","MuiStepLabel"],"mappings":"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"}

package/components/Stepper/Stepper.d.ts

@@ -1,28 +1,17 @@
-import { default as React, ReactElement } from 'react';
-import { Breakpoint } from '@mui/material';
-import { StepProps } from './Step';
-interface MyStepperProps {
-    children: ReactElement<StepProps>[];
-    orientation?: "horizontal" | "vertical";
-    sx?: object;
+import { FC, ReactNode } from 'react';
+export interface StepperProps {
+    /** Uno o varios `<Step>`. Children que no sean `<Step>` se ignoran. */
+    children: ReactNode;
+    orientation?: 'horizontal' | 'vertical';
     alternateLabel?: boolean;
     /**
      * Índice 0-based del paso activo. Si no se provee, el Stepper intenta
-     * leerlo del `WizardContext` (si está dentro de un `<WizardProvider>`).
+     * leerlo del `StepperContext` (si está dentro de un `<StepperProvider>`).
      * Si tampoco hay provider, el default es 0.
      */
     currentStep?: number;
-    /**
-     * Cuando es true (default), en pantallas más angostas que `mobileBreakpoint`
-     * el stepper horizontal automáticamente:
-     *  - cambia a orientación vertical si hay >3 steps, o
-     *  - oculta los labels (solo dots) si hay ≤3 steps,
-     * para evitar que se desborde del contenedor.
-     * Si pasas `orientation="vertical"` explícito, no se altera.
-     */
-    responsive?: boolean;
-    /** Breakpoint debajo del cual aplica el modo mobile. Default: "sm". */
-    mobileBreakpoint?: Breakpoint;
+    keepMounted?: boolean;
+    sx?: object;
 }
-export declare const Stepper: React.FC<MyStepperProps>;
+export declare const Stepper: FC<StepperProps>;
 export default Stepper;

package/components/Stepper/Stepper.js

@@ -1,6 +1,4 @@
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,77 +14,313 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme, useMediaQuery, Box, Stepper as Stepper$1, Step as Step$1, StepLabel } from "@mui/material";
-import { u as useWizard } from "../../useWizard-CWq--C3o.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo, useContext, useRef, useLayoutEffect, useEffect, Children, isValidElement } from "react";
+import { IconButton, Box, Stepper as Stepper$1, Step as Step$1, StepLabel } from "@mui/material";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+const defaultValue = {
+  currentStep: 0,
+  totalSteps: 0,
+  isFirst: true,
+  isLast: true,
+  completed: false,
+  nextStep: () => {
+  },
+  prevStep: () => {
+  },
+  goToStep: () => {
+  },
+  submitStep: () => {
+  },
+  reset: () => {
+  }
+};
+const StepperContext = createContext(defaultValue);
+function useStepper() {
+  return useContext(StepperContext);
+}
+const StepperProvider = ({
+  totalSteps,
+  initialStep = 0,
+  onSubmit,
+  onStepChange,
+  children
+}) => {
+  const [currentStep, setCurrentStep] = useState(initialStep);
+  const [completed, setCompleted] = useState(false);
+  const changeStep = useCallback(
+    (newStep) => {
+      if (newStep < 0 || newStep >= totalSteps) return;
+      if (newStep === currentStep) return;
+      onStepChange == null ? void 0 : onStepChange(newStep, currentStep);
+      setCurrentStep(newStep);
+    },
+    [currentStep, totalSteps, onStepChange]
+  );
+  const nextStep = useCallback(() => {
+    changeStep(currentStep + 1);
+  }, [changeStep, currentStep]);
+  const prevStep = useCallback(() => {
+    changeStep(currentStep - 1);
+  }, [changeStep, currentStep]);
+  const goToStep = useCallback(
+    (stepNumber) => {
+      changeStep(stepNumber);
+    },
+    [changeStep]
+  );
+  const submitStep = useCallback(() => {
+    setCompleted(true);
+    onSubmit == null ? void 0 : onSubmit(currentStep);
+  }, [currentStep, onSubmit]);
+  const reset = useCallback(() => {
+    setCurrentStep(initialStep);
+    setCompleted(false);
+  }, [initialStep]);
+  const value = useMemo(
+    () => ({
+      currentStep,
+      totalSteps,
+      isFirst: currentStep === 0,
+      isLast: currentStep === totalSteps - 1,
+      completed,
+      nextStep,
+      prevStep,
+      goToStep,
+      submitStep,
+      reset
+    }),
+    [
+      currentStep,
+      totalSteps,
+      completed,
+      nextStep,
+      prevStep,
+      goToStep,
+      submitStep,
+      reset
+    ]
+  );
+  return /* @__PURE__ */ jsx(StepperContext.Provider, { value, children });
+};
+function useHorizontalScroll(enabled, deps = []) {
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const updateScrollState = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setCanScrollLeft(scrollLeft > 1);
+    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+  }, []);
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    updateScrollState();
+  }, [enabled, updateScrollState, ...deps]);
+  useEffect(() => {
+    if (!enabled) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", updateScrollState, { passive: true });
+    const ro = new ResizeObserver(updateScrollState);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateScrollState);
+      ro.disconnect();
+    };
+  }, [enabled, updateScrollState]);
+  const scrollBy = useCallback((delta) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({ left: delta, behavior: "smooth" });
+  }, []);
+  return { scrollRef, canScrollLeft, canScrollRight, scrollBy };
+}
+const StepperScrollArrow = ({
+  direction,
+  enabled,
+  visible,
+  onClick
+}) => {
+  const isLeft = direction === "left";
+  const Icon = isLeft ? ChevronLeftIcon : ChevronRightIcon;
+  const ariaLabel = isLeft ? "Anterior" : "Siguiente";
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      "aria-label": ariaLabel,
+      size: "small",
+      onClick,
+      disabled: !enabled,
+      sx: {
+        flex: "0 0 auto",
+        // Reservamos el slot siempre que haya overflow en algún lado,
+        // así el área scroll tiene un ancho estable (no saltan los
+        // steps cuando aparece/desaparece la flecha).
+        visibility: visible ? "visible" : "hidden"
+      },
+      children: /* @__PURE__ */ jsx(Icon, { fontSize: "small" })
+    }
+  );
+};
 const Stepper = ({
   children,
   orientation = "horizontal",
   alternateLabel = false,
-  responsive = true,
-  mobileBreakpoint = "sm",
-  sx,
-  currentStep: currentStepProp
+  currentStep: currentStepProp,
+  keepMounted = false,
+  sx
 }) => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
-  const mobileAdapt = responsive && isMobile && orientation === "horizontal";
-  const effectiveOrientation = mobileAdapt && children.length > 3 ? "vertical" : orientation;
-  const hideLabelsOnMobile = mobileAdapt && children.length <= 3;
-  const effectiveAlternateLabel = alternateLabel && effectiveOrientation === "horizontal";
-  const wizard = useWizard();
-  const currentStep = currentStepProp !== void 0 ? currentStepProp : wizard.totalSteps > 0 ? wizard.currentStep : 0;
-  return /* @__PURE__ */ jsxs(Box, { sx: __spreadValues({ width: "100%", overflowX: "hidden" }, sx), children: [
-    /* @__PURE__ */ jsx(
-      Stepper$1,
+  const stepperCtx = useStepper();
+  const currentStep = currentStepProp !== void 0 ? currentStepProp : stepperCtx.totalSteps > 0 ? stepperCtx.currentStep : 0;
+  const isHorizontal = orientation === "horizontal";
+  const steps = Children.toArray(children).filter(
+    (child) => {
+      var _a;
+      return isValidElement(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === "Step";
+    }
+  );
+  const { scrollRef, canScrollLeft, canScrollRight, scrollBy } = useHorizontalScroll(
+    isHorizontal,
+    [steps.length, currentStep]
+  );
+  const showArrows = isHorizontal && (canScrollLeft || canScrollRight);
+  return /* @__PURE__ */ jsxs(Box, { sx, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
       {
-        activeStep: currentStep,
-        orientation: effectiveOrientation,
-        alternativeLabel: effectiveAlternateLabel,
-        sx: __spreadValues({}, effectiveOrientation === "horizontal" && {
-          flexWrap: "wrap",
-          rowGap: 1,
-          "& .MuiStepLabel-label": { textAlign: "center" }
-        }),
-        children: children.map((child, idx) => {
-          const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
-          return /* @__PURE__ */ jsx(Step$1, { completed, disabled, className, sx: stepSx, children: /* @__PURE__ */ jsx(
-            StepLabel,
+        sx: isHorizontal ? { display: "flex", alignItems: "center", width: "100%", gap: 0.5 } : void 0,
+        children: [
+          isHorizontal && /* @__PURE__ */ jsx(
+            StepperScrollArrow,
+            {
+              direction: "left",
+              enabled: canScrollLeft,
+              visible: showArrows,
+              onClick: () => scrollBy(-160)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
             {
-              sx: __spreadProps(__spreadValues({
-                pointerEvents: "none"
-              }, hideLabelsOnMobile && {
-                "& .MuiStepLabel-labelContainer": { display: "none" }
-              }), {
-                "& .MuiStepIcon-root": {
-                  color: dotColor
-                },
-                "& .MuiStepIcon-active": {
-                  color: activeDotColor
-                },
-                "& .MuiStepIcon-completed": {
-                  color: completedDotColor
-                },
-                "& .MuiStepIcon-text": {
-                  fill: iconTextColor
+              ref: scrollRef,
+              sx: isHorizontal ? {
+                flex: "1 1 auto",
+                minWidth: 0,
+                overflowX: "auto",
+                scrollBehavior: "smooth",
+                WebkitOverflowScrolling: "touch",
+                scrollbarWidth: "none",
+                "&::-webkit-scrollbar": { display: "none" }
+              } : void 0,
+              children: /* @__PURE__ */ jsx(
+                Stepper$1,
+                {
+                  activeStep: currentStep,
+                  orientation,
+                  alternativeLabel: alternateLabel,
+                  sx: __spreadValues(__spreadValues({}, isHorizontal && {
+                    display: "inline-flex",
+                    flexWrap: "nowrap",
+                    minWidth: "100%",
+                    width: "max-content",
+                    "& .MuiStep-root": { flex: "0 0 auto", minWidth: 120 }
+                  }), alternateLabel && { justifyContent: "center" }),
+                  children: steps.map((step, idx) => {
+                    var _a;
+                    const {
+                      label,
+                      completed,
+                      disabled,
+                      className,
+                      sx: stepSx,
+                      dotColor,
+                      activeDotColor,
+                      completedDotColor,
+                      iconTextColor
+                    } = step.props;
+                    const key = (_a = step.key) != null ? _a : idx;
+                    return /* @__PURE__ */ jsx(
+                      Step$1,
+                      {
+                        completed,
+                        disabled,
+                        className,
+                        sx: stepSx,
+                        children: /* @__PURE__ */ jsx(
+                          StepLabel,
+                          {
+                            sx: {
+                              pointerEvents: "none",
+                              "& .MuiStepIcon-root": { color: dotColor },
+                              "& .MuiStepIcon-active": { color: activeDotColor },
+                              "& .MuiStepIcon-completed": { color: completedDotColor },
+                              "& .MuiStepIcon-text": { fill: iconTextColor }
+                            },
+                            children: label
+                          }
+                        )
+                      },
+                      key
+                    );
+                  })
                 }
-              }),
-              children: label
+              )
             }
-          ) }, idx);
-        })
+          ),
+          isHorizontal && /* @__PURE__ */ jsx(
+            StepperScrollArrow,
+            {
+              direction: "right",
+              enabled: canScrollRight,
+              visible: showArrows,
+              onClick: () => scrollBy(160)
+            }
+          )
+        ]
       }
     ),
-    /* @__PURE__ */ jsx(Box, { mt: 2, children: children.map(
-      (child, idx) => idx === currentStep ? /* @__PURE__ */ jsx(Box, { children: child.props.children }, idx) : null
-    ) })
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        mt: 2,
+        sx: {
+          display: "flex",
+          justifyContent: "center"
+        },
+        children: keepMounted ? steps.map((step, idx) => {
+          var _a;
+          const key = (_a = step.key) != null ? _a : idx;
+          const isActive = idx === currentStep;
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: { display: isActive ? "block" : "none", width: "100%" },
+              "aria-hidden": !isActive,
+              children: step.props.children
+            },
+            key
+          );
+        }) : steps.map((step, idx) => {
+          var _a;
+          if (idx !== currentStep) return null;
+          const key = (_a = step.key) != null ? _a : idx;
+          return /* @__PURE__ */ jsx(Box, { children: step.props.children }, key);
+        })
+      }
+    )
   ] });
 };
 const Step = (_) => null;
 Step.displayName = "Step";
 export {
   Step,
-  Stepper
+  Stepper,
+  StepperContext,
+  StepperProvider,
+  Stepper as default,
+  useStepper
 };
 //# sourceMappingURL=Stepper.js.map

package/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport {\n  Stepper as MuiStepper,\n  Step as MuiStep,\n  StepLabel as MuiStepLabel,\n  Box,\n  useMediaQuery,\n  useTheme,\n  Breakpoint,\n} from \"@mui/material\";\nimport { StepProps } from \"./Step\";\nimport { useWizard } from \"../../hooks/Wizard\";\n\ninterface MyStepperProps {\n  children: ReactElement<StepProps>[];\n  orientation?: \"horizontal\" | \"vertical\";\n  sx?: object;\n  alternateLabel?: boolean;\n  /**\n   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta\n   * leerlo del `WizardContext` (si está dentro de un `<WizardProvider>`).\n   * Si tampoco hay provider, el default es 0.\n   */\n  currentStep?: number;\n  /**\n   * Cuando es true (default), en pantallas más angostas que `mobileBreakpoint`\n   * el stepper horizontal automáticamente:\n   *  - cambia a orientación vertical si hay >3 steps, o\n   *  - oculta los labels (solo dots) si hay ≤3 steps,\n   * para evitar que se desborde del contenedor.\n   * Si pasas `orientation=\"vertical\"` explícito, no se altera.\n   */\n  responsive?: boolean;\n  /** Breakpoint debajo del cual aplica el modo mobile. Default: \"sm\". */\n  mobileBreakpoint?: Breakpoint;\n}\n\nexport const Stepper: React.FC<MyStepperProps> = ({\n  children,\n  orientation = \"horizontal\",\n  alternateLabel = false,\n  responsive = true,\n  mobileBreakpoint = \"sm\",\n  sx,\n  currentStep: currentStepProp,\n}) => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));\n\n  // Solo aplicamos adaptación mobile si el consumer pidió orientación horizontal.\n  const mobileAdapt = responsive && isMobile && orientation === \"horizontal\";\n  // Con muchos steps no caben aunque ocultes labels → mejor vertical.\n  const effectiveOrientation: \"horizontal\" | \"vertical\" =\n    mobileAdapt && children.length > 3 ? \"vertical\" : orientation;\n  // Con pocos steps conservamos horizontal pero ocultamos labels para no desbordar.\n  const hideLabelsOnMobile = mobileAdapt && children.length <= 3;\n  const effectiveAlternateLabel =\n    alternateLabel && effectiveOrientation === \"horizontal\";\n  // Lee el paso desde el WizardContext cuando el consumer no lo pasa como prop.\n  // Si el Stepper NO está dentro de un WizardProvider, `useWizard()` devuelve\n  // el valor default (currentStep=0, totalSteps=0), así que no rompe nada.\n  const wizard = useWizard();\n  const currentStep =\n    currentStepProp !== undefined\n      ? currentStepProp\n      : wizard.totalSteps > 0\n        ? wizard.currentStep\n        : 0;\n\n  return (\n    <Box sx={{ width: \"100%\", overflowX: \"hidden\", ...sx }}>\n      <MuiStepper\n        activeStep={currentStep}\n        orientation={effectiveOrientation}\n        alternativeLabel={effectiveAlternateLabel}\n        sx={{\n          // En horizontal con muchos labels + poco ancho, permitimos que\n          // los labels hagan wrap en lugar de forzar overflow.\n          ...(effectiveOrientation === \"horizontal\" && {\n            flexWrap: \"wrap\",\n            rowGap: 1,\n            \"& .MuiStepLabel-label\": { textAlign: \"center\" },\n          }),\n        }}\n      >\n        {children.map((child, idx) => {\n          const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;\n          return (\n            <MuiStep key={idx} completed={completed} disabled={disabled} className={className} sx={stepSx}>\n              <MuiStepLabel sx={{\n                pointerEvents: 'none',\n                // Ocultamos la parte de texto en mobile cuando aplicamos\n                // reducción a dots-only. El icono se mantiene visible.\n                ...(hideLabelsOnMobile && {\n                  \"& .MuiStepLabel-labelContainer\": { display: \"none\" },\n                }),\n                \"& .MuiStepIcon-root\": {\n                  color: dotColor,\n                },\n                \"& .MuiStepIcon-active\": {\n                  color: activeDotColor,\n                },\n                \"& .MuiStepIcon-completed\": {\n                  color: completedDotColor,\n                },\n                \"& .MuiStepIcon-text\": {\n                  fill: iconTextColor,\n                },\n              }}\n              >{label}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n      </MuiStepper>\n      <Box mt={2}>\n        {children.map((child, idx) =>\n          idx === currentStep ? <Box key={idx}>{child.props.children}</Box> : null\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nexport default Stepper;","import React from \"react\";\nimport { StepProps as MuiStepProps } from \"@mui/material\";\n\ntype PickMuiStepProps = Pick<MuiStepProps, \"completed\" | \"disabled\" | \"sx\" | \"className\">;\n\nexport interface StepProps extends PickMuiStepProps {\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  sx?: object;\n  dotColor?: string;          // dot base\n  activeDotColor?: string;    // dot activa\n  completedDotColor?: string; // dot completada\n  iconTextColor?: string;     // número o check dentro\n}\n\nexport const Step = (_: StepProps): null => null;\n\nStep.displayName = \"Step\";\n\nexport default Step;"],"names":["MuiStepper","MuiStep","MuiStepLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,UAAoC,CAAC;AAAA,EAChD;AAAA,EACA,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQ,SAAA;AACd,QAAM,WAAW,cAAc,MAAM,YAAY,KAAK,gBAAgB,CAAC;AAGvE,QAAM,cAAc,cAAc,YAAY,gBAAgB;AAE9D,QAAM,uBACJ,eAAe,SAAS,SAAS,IAAI,aAAa;AAEpD,QAAM,qBAAqB,eAAe,SAAS,UAAU;AAC7D,QAAM,0BACJ,kBAAkB,yBAAyB;AAI7C,QAAM,SAAS,UAAA;AACf,QAAM,cACJ,oBAAoB,SAChB,kBACA,OAAO,aAAa,IAClB,OAAO,cACP;AAER,SACE,qBAAC,KAAA,EAAI,IAAI,iBAAE,OAAO,QAAQ,WAAW,YAAa,KAChD,UAAA;AAAA,IAAA;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,kBAAkB;AAAA,QAClB,IAAI,mBAGE,yBAAyB,gBAAgB;AAAA,UAC3C,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,yBAAyB,EAAE,WAAW,SAAA;AAAA,QAAS;AAAA,QAIlD,UAAA,SAAS,IAAI,CAAC,OAAO,QAAQ;AAC5B,gBAAM,EAAE,OAAO,WAAW,UAAU,WAAW,IAAI,QAAQ,UAAU,gBAAgB,mBAAmB,cAAA,IAAkB,MAAM;AAChI,qCACGC,QAAA,EAAkB,WAAsB,UAAoB,WAAsB,IAAI,QACrF,UAAA;AAAA,YAACC;AAAAA,YAAA;AAAA,cAAa,IAAI;AAAA,gBAChB,eAAe;AAAA,iBAGX,sBAAsB;AAAA,gBACxB,kCAAkC,EAAE,SAAS,OAAA;AAAA,cAAO,IALtC;AAAA,gBAOhB,uBAAuB;AAAA,kBACrB,OAAO;AAAA,gBAAA;AAAA,gBAET,yBAAyB;AAAA,kBACvB,OAAO;AAAA,gBAAA;AAAA,gBAET,4BAA4B;AAAA,kBAC1B,OAAO;AAAA,gBAAA;AAAA,gBAET,uBAAuB;AAAA,kBACrB,MAAM;AAAA,gBAAA;AAAA,cACR;AAAA,cAEA,UAAA;AAAA,YAAA;AAAA,UAAA,KArBU,GAuBd;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,oBAAC,KAAA,EAAI,IAAI,GACN,UAAA,SAAS;AAAA,MAAI,CAAC,OAAO,QACpB,QAAQ,cAAc,oBAAC,KAAA,EAAe,UAAA,MAAM,MAAM,SAAA,GAAlB,GAA2B,IAAS;AAAA,IAAA,EACtE,CACF;AAAA,EAAA,GACF;AAEJ;AC1GO,MAAM,OAAO,CAAC,MAAuB;AAE5C,KAAK,cAAc;"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/StepperContext.tsx","../../../src/components/Stepper/_hooks/useHorizontalScroll.ts","../../../src/components/Stepper/_parts/StepperScrollArrow.tsx","../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type FC,\n  type ReactNode,\n} from 'react';\n\n/**\n * API expuesta por `useStepper()`.\n */\nexport interface StepperContextValue {\n  /** Índice del paso actual (0-based). */\n  currentStep: number;\n  /** Total de pasos del stepper. */\n  totalSteps: number;\n  /** True si `currentStep === 0`. */\n  isFirst: boolean;\n  /** True si `currentStep === totalSteps - 1`. */\n  isLast: boolean;\n  /** True tras ejecutar `submitStep()` desde el último paso. */\n  completed: boolean;\n  /** Avanza al siguiente paso (no pasa de `totalSteps - 1`). */\n  nextStep: () => void;\n  /** Retrocede al paso anterior (no baja de 0). */\n  prevStep: () => void;\n  /** Salta a un paso específico (0-based). No-op si fuera de rango. */\n  goToStep: (stepNumber: number) => void;\n  /**\n   * Envía el stepper. Marca `completed = true` y dispara el callback\n   * `onSubmit` del provider. En el último paso suele reemplazar a `nextStep`.\n   */\n  submitStep: () => void;\n  /** Resetea al paso inicial y limpia `completed`. */\n  reset: () => void;\n}\n\nconst defaultValue: StepperContextValue = {\n  currentStep: 0,\n  totalSteps: 0,\n  isFirst: true,\n  isLast: true,\n  completed: false,\n  nextStep: () => {},\n  prevStep: () => {},\n  goToStep: () => {},\n  submitStep: () => {},\n  reset: () => {},\n};\n\nexport const StepperContext = createContext<StepperContextValue>(defaultValue);\n\n/**\n * Hook para consumir el `StepperContext` desde cualquier descendiente de\n * `<StepperProvider>`.\n *\n * Si se llama fuera de un provider, devuelve los valores por defecto (no-op)\n * para que componentes como `<Stepper>` puedan leerlo sin romper cuando no\n * hay provider envolvente.\n */\nexport function useStepper(): StepperContextValue {\n  return useContext(StepperContext);\n}\n\nexport interface StepperProviderProps {\n  /** Número total de pasos. Requerido. */\n  totalSteps: number;\n  /** Paso inicial (0-based). Default: 0. */\n  initialStep?: number;\n  /**\n   * Callback disparado cuando se llama `submitStep()`. Recibe el paso actual.\n   * El paquete NO ejecuta ninguna petición; queda a cargo del consumer.\n   */\n  onSubmit?: (currentStep: number) => void;\n  /**\n   * Callback disparado en cada cambio de paso (next/prev/goTo).\n   * Útil para tracking o validaciones externas.\n   */\n  onStepChange?: (newStep: number, prevStep: number) => void;\n  children?: ReactNode;\n}\n\n/**\n * Provider del stepper. Administra el `currentStep` internamente. El consumer\n * no necesita gestionar estado — solo consumirlo con `useStepper()` desde\n * cualquier descendiente.\n *\n * ```tsx\n * <StepperProvider totalSteps={3} onSubmit={handleFinalSubmit}>\n *   <Stepper>\n *     <Step label=\"Paso 1\"><StepOne /></Step>\n *     <Step label=\"Paso 2\"><StepTwo /></Step>\n *     <Step label=\"Paso 3\"><StepThree /></Step>\n *   </Stepper>\n *   <StepperControls />\n * </StepperProvider>\n * ```\n */\nexport const StepperProvider: FC<StepperProviderProps> = ({\n  totalSteps,\n  initialStep = 0,\n  onSubmit,\n  onStepChange,\n  children,\n}) => {\n  const [currentStep, setCurrentStep] = useState(initialStep);\n  const [completed, setCompleted] = useState(false);\n\n  const changeStep = useCallback(\n    (newStep: number) => {\n      if (newStep < 0 || newStep >= totalSteps) return;\n      if (newStep === currentStep) return;\n      onStepChange?.(newStep, currentStep);\n      setCurrentStep(newStep);\n    },\n    [currentStep, totalSteps, onStepChange],\n  );\n\n  const nextStep = useCallback(() => {\n    changeStep(currentStep + 1);\n  }, [changeStep, currentStep]);\n\n  const prevStep = useCallback(() => {\n    changeStep(currentStep - 1);\n  }, [changeStep, currentStep]);\n\n  const goToStep = useCallback(\n    (stepNumber: number) => {\n      changeStep(stepNumber);\n    },\n    [changeStep],\n  );\n\n  const submitStep = useCallback(() => {\n    setCompleted(true);\n    onSubmit?.(currentStep);\n  }, [currentStep, onSubmit]);\n\n  const reset = useCallback(() => {\n    setCurrentStep(initialStep);\n    setCompleted(false);\n  }, [initialStep]);\n\n  const value = useMemo<StepperContextValue>(\n    () => ({\n      currentStep,\n      totalSteps,\n      isFirst: currentStep === 0,\n      isLast: currentStep === totalSteps - 1,\n      completed,\n      nextStep,\n      prevStep,\n      goToStep,\n      submitStep,\n      reset,\n    }),\n    [\n      currentStep,\n      totalSteps,\n      completed,\n      nextStep,\n      prevStep,\n      goToStep,\n      submitStep,\n      reset,\n    ],\n  );\n\n  return (\n    <StepperContext.Provider value={value}>{children}</StepperContext.Provider>\n  );\n};\n","import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\n/**\n * Hook interno del Stepper para manejar scroll horizontal cuando los steps\n * no caben en el contenedor. No se exporta desde el barrel — es un detalle\n * de implementación.\n *\n * @param enabled - Si el scroll está activo (típicamente sólo en orientación horizontal).\n * @param deps    - Cosas que afectan el layout y disparan un recompute (ej. cantidad de steps, paso activo).\n *\n * Retorna:\n * - `scrollRef`: ref a asignar al contenedor con `overflow-x: auto`.\n * - `canScrollLeft` / `canScrollRight`: flags para habilitar/deshabilitar flechas.\n * - `scrollBy(delta)`: imperativo con scroll suave.\n */\nexport function useHorizontalScroll(enabled: boolean, deps: unknown[] = []) {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    // Tolerancia de 1px por redondeos de subpixel.\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!enabled) return;\n    updateScrollState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, updateScrollState, ...deps]);\n\n  useEffect(() => {\n    if (!enabled) return;\n    const el = scrollRef.current;\n    if (!el) return;\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n    const ro = new ResizeObserver(updateScrollState);\n    ro.observe(el);\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      ro.disconnect();\n    };\n  }, [enabled, updateScrollState]);\n\n  const scrollBy = useCallback((delta: number) => {\n    const el = scrollRef.current;\n    if (!el) return;\n    el.scrollBy({ left: delta, behavior: 'smooth' });\n  }, []);\n\n  return { scrollRef, canScrollLeft, canScrollRight, scrollBy };\n}\n","import { IconButton } from '@mui/material';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\n\ninterface StepperScrollArrowProps {\n  direction: 'left' | 'right';\n  /** Cuando `false`, el botón está deshabilitado (por ejemplo, ya estás al inicio). */\n  enabled: boolean;\n  /**\n   * Cuando `false`, el botón queda con `visibility: hidden` (reserva su\n   * espacio pero no se ve). Útil para que el área de scroll no se corra\n   * horizontalmente cuando no hay overflow en ningún lado.\n   */\n  visible: boolean;\n  onClick: () => void;\n}\n\n/**\n * Flecha de scroll (`<` / `>`) del Stepper horizontal. Se muestra a los\n * costados del área scrollable cuando hay overflow. Componente privado —\n * no se exporta del barrel.\n */\nexport const StepperScrollArrow = ({\n  direction,\n  enabled,\n  visible,\n  onClick,\n}: StepperScrollArrowProps) => {\n  const isLeft = direction === 'left';\n  const Icon = isLeft ? ChevronLeftIcon : ChevronRightIcon;\n  const ariaLabel = isLeft ? 'Anterior' : 'Siguiente';\n\n  return (\n    <IconButton\n      aria-label={ariaLabel}\n      size=\"small\"\n      onClick={onClick}\n      disabled={!enabled}\n      sx={{\n        flex: '0 0 auto',\n        // Reservamos el slot siempre que haya overflow en algún lado,\n        // así el área scroll tiene un ancho estable (no saltan los\n        // steps cuando aparece/desaparece la flecha).\n        visibility: visible ? 'visible' : 'hidden',\n      }}\n    >\n      <Icon fontSize=\"small\" />\n    </IconButton>\n  );\n};\n","import {\n  Children,\n  isValidElement,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport {\n  Stepper as MuiStepper,\n  Step as MuiStep,\n  StepLabel as MuiStepLabel,\n  Box,\n} from '@mui/material';\n\nimport { StepProps } from './Step';\nimport { useStepper } from './StepperContext';\nimport { useHorizontalScroll } from './_hooks/useHorizontalScroll';\nimport { StepperScrollArrow } from './_parts/StepperScrollArrow';\n\nexport interface StepperProps {\n  /** Uno o varios `<Step>`. Children que no sean `<Step>` se ignoran. */\n  children: ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n  alternateLabel?: boolean;\n  /**\n   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta\n   * leerlo del `StepperContext` (si está dentro de un `<StepperProvider>`).\n   * Si tampoco hay provider, el default es 0.\n   */\n  currentStep?: number;\n  keepMounted?: boolean;\n  sx?: object;\n}\n\nexport const Stepper: FC<StepperProps> = ({\n  children,\n  orientation = 'horizontal',\n  alternateLabel = false,\n  currentStep: currentStepProp,\n  keepMounted = false,\n  sx,\n}) => {\n  // Lee el paso desde el StepperContext cuando el consumer no lo pasa como prop.\n  const stepperCtx = useStepper();\n  const currentStep =\n    currentStepProp !== undefined\n      ? currentStepProp\n      : stepperCtx.totalSteps > 0\n        ? stepperCtx.currentStep\n        : 0;\n\n  const isHorizontal = orientation === 'horizontal';\n\n  // Filtra los children a los que tengan displayName=\"Step\" — acepta arrays,\n  // single child, fragments, y descarta cualquier otra cosa (strings, null, etc.).\n  const steps: ReactElement<StepProps>[] = Children.toArray(children).filter(\n    (child): child is ReactElement<StepProps> =>\n      isValidElement(child) &&\n      (child.type as { displayName?: string })?.displayName === 'Step',\n  );\n\n  const { scrollRef, canScrollLeft, canScrollRight, scrollBy } = useHorizontalScroll(\n    isHorizontal,\n    [steps.length, currentStep],\n  );\n\n  const showArrows = isHorizontal && (canScrollLeft || canScrollRight);\n\n  return (\n    <Box sx={sx}>\n      <Box\n        sx={\n          isHorizontal\n            ? { display: 'flex', alignItems: 'center', width: '100%', gap: 0.5 }\n            : undefined\n        }\n      >\n        {isHorizontal && (\n          <StepperScrollArrow\n            direction=\"left\"\n            enabled={canScrollLeft}\n            visible={showArrows}\n            onClick={() => scrollBy(-160)}\n          />\n        )}\n        <Box\n          ref={scrollRef}\n          sx={\n            isHorizontal\n              ? {\n                flex: '1 1 auto',\n                minWidth: 0,\n                overflowX: 'auto',\n                scrollBehavior: 'smooth',\n                WebkitOverflowScrolling: 'touch',\n                scrollbarWidth: 'none',\n                '&::-webkit-scrollbar': { display: 'none' },\n              }\n              : undefined\n          }\n        >\n          <MuiStepper\n            activeStep={currentStep}\n            orientation={orientation}\n            alternativeLabel={alternateLabel}\n            sx={{\n              ...(isHorizontal && {\n                display: 'inline-flex',\n                flexWrap: 'nowrap',\n                minWidth: '100%',\n                width: 'max-content',\n                '& .MuiStep-root': { flex: '0 0 auto', minWidth: 120 },\n              }),\n              ...(alternateLabel && { justifyContent: 'center' }),\n            }}\n          >\n            {steps.map((step, idx) => {\n              const {\n                label,\n                completed,\n                disabled,\n                className,\n                sx: stepSx,\n                dotColor,\n                activeDotColor,\n                completedDotColor,\n                iconTextColor,\n              } = step.props;\n              const key = step.key ?? idx;\n              return (\n                <MuiStep\n                  key={key}\n                  completed={completed}\n                  disabled={disabled}\n                  className={className}\n                  sx={stepSx}\n                >\n                  <MuiStepLabel\n                    sx={{\n                      pointerEvents: 'none',\n                      '& .MuiStepIcon-root': { color: dotColor },\n                      '& .MuiStepIcon-active': { color: activeDotColor },\n                      '& .MuiStepIcon-completed': { color: completedDotColor },\n                      '& .MuiStepIcon-text': { fill: iconTextColor },\n                    }}\n                  >\n                    {label}\n                  </MuiStepLabel>\n                </MuiStep>\n              );\n            })}\n          </MuiStepper>\n        </Box>\n        {isHorizontal && (\n          <StepperScrollArrow\n            direction=\"right\"\n            enabled={canScrollRight}\n            visible={showArrows}\n            onClick={() => scrollBy(160)}\n          />\n        )}\n      </Box>\n\n      {/* Cuerpos de los steps — render según el modo `keepMounted` */}\n      <Box mt={2}\n        sx={{\n          display: 'flex',\n          justifyContent: 'center',\n        }}>\n        {keepMounted\n          ? steps.map((step, idx) => {\n            const key = step.key ?? idx;\n            const isActive = idx === currentStep;\n            return (\n              <Box\n                key={key}\n                // `display: none` mantiene el nodo en el DOM — state de los\n                // hijos (inputs, useState, etc.) no se pierde al navegar.\n                sx={{ display: isActive ? 'block' : 'none', width: '100%' }}\n                // Accesibilidad: oculta del flujo de lectura pero no del DOM.\n                aria-hidden={!isActive}\n              >\n                {step.props.children}\n              </Box>\n            );\n          })\n          : steps.map((step, idx) => {\n            if (idx !== currentStep) return null;\n            const key = step.key ?? idx;\n            return <Box key={key}>{step.props.children}</Box>;\n          })}\n      </Box>\n    </Box>\n  );\n};\n\nexport default Stepper;\n","import React from \"react\";\nimport { StepProps as MuiStepProps } from \"@mui/material\";\n\ntype PickMuiStepProps = Pick<MuiStepProps, \"completed\" | \"disabled\" | \"sx\" | \"className\">;\n\nexport interface StepProps extends PickMuiStepProps {\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  sx?: object;\n  dotColor?: string;          // dot base\n  activeDotColor?: string;    // dot activa\n  completedDotColor?: string; // dot completada\n  iconTextColor?: string;     // número o check dentro\n}\n\nexport const Step = (_: StepProps): null => null;\n\nStep.displayName = \"Step\";\n\nexport default Step;"],"names":["MuiStepper","MuiStep","MuiStepLabel"],"mappings":"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"}

package/{hooks/Wizard/WizardContext.d.ts → components/Stepper/StepperContext.d.ts}

@@ -1,17 +1,11 @@
-import { default as React, FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 /**
- * API expuesta por `useWizard()`.
- *
- * Nota de retro-compatibilidad: los nombres `submitStep`, `nextStep`,
- * `prevStep`, `goToStep` se mantienen idénticos al `WizardContext` de
- * `@soyfri/fri-web-components` para que consumers migrando no tengan que
- * cambiar sus llamadas. Se agregan campos extra opcionales que antes no
- * existían (`currentStep`, `totalSteps`, `isFirst`, `isLast`, `completed`).
+ * API expuesta por `useStepper()`.
  */
-export interface WizardContextValue {
+export interface StepperContextValue {
     /** Índice del paso actual (0-based). */
     currentStep: number;
-    /** Total de pasos del wizard. */
+    /** Total de pasos del stepper. */
     totalSteps: number;
     /** True si `currentStep === 0`. */
     isFirst: boolean;
@@ -26,16 +20,25 @@ export interface WizardContextValue {
     /** Salta a un paso específico (0-based). No-op si fuera de rango. */
     goToStep: (stepNumber: number) => void;
     /**
-     * Envía el wizard. Marca `completed = true` y dispara el callback
+     * Envía el stepper. Marca `completed = true` y dispara el callback
      * `onSubmit` del provider. En el último paso suele reemplazar a `nextStep`.
      */
     submitStep: () => void;
-    /** Resetea el wizard al paso inicial y limpia `completed`. */
+    /** Resetea al paso inicial y limpia `completed`. */
     reset: () => void;
 }
-export declare const WizardContext: React.Context<WizardContextValue>;
-export interface WizardProviderProps {
-    /** Número total de pasos del wizard. Requerido. */
+export declare const StepperContext: import('react').Context<StepperContextValue>;
+/**
+ * Hook para consumir el `StepperContext` desde cualquier descendiente de
+ * `<StepperProvider>`.
+ *
+ * Si se llama fuera de un provider, devuelve los valores por defecto (no-op)
+ * para que componentes como `<Stepper>` puedan leerlo sin romper cuando no
+ * hay provider envolvente.
+ */
+export declare function useStepper(): StepperContextValue;
+export interface StepperProviderProps {
+    /** Número total de pasos. Requerido. */
     totalSteps: number;
     /** Paso inicial (0-based). Default: 0. */
     initialStep?: number;
@@ -52,16 +55,19 @@ export interface WizardProviderProps {
     children?: ReactNode;
 }
 /**
- * Provider del wizard. Administra el `currentStep` internamente. El consumer
- * no necesita gestionar estado — sólo consumirlo con `useWizard()` desde
+ * Provider del stepper. Administra el `currentStep` internamente. El consumer
+ * no necesita gestionar estado — solo consumirlo con `useStepper()` desde
  * cualquier descendiente.
  *
  * ```tsx
- * <WizardProvider totalSteps={3} onSubmit={handleFinalSubmit}>
- *   <Stepper ... />
- *   <StepContent />
- *   <WizardControls />
- * </WizardProvider>
+ * <StepperProvider totalSteps={3} onSubmit={handleFinalSubmit}>
+ *   <Stepper>
+ *     <Step label="Paso 1"><StepOne /></Step>
+ *     <Step label="Paso 2"><StepTwo /></Step>
+ *     <Step label="Paso 3"><StepThree /></Step>
+ *   </Stepper>
+ *   <StepperControls />
+ * </StepperProvider>
  * ```
  */
-export declare const WizardProvider: FC<WizardProviderProps>;
+export declare const StepperProvider: FC<StepperProviderProps>;