@soyfri/shared-library 2.0.0-beta.8 → 2.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
2
21
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
22
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
23
|
const material = require("@mui/material");
|
|
@@ -7,36 +26,60 @@ const Stepper = ({
|
|
|
7
26
|
children,
|
|
8
27
|
orientation = "horizontal",
|
|
9
28
|
alternateLabel = false,
|
|
29
|
+
responsive = true,
|
|
30
|
+
mobileBreakpoint = "sm",
|
|
10
31
|
sx,
|
|
11
32
|
currentStep: currentStepProp
|
|
12
33
|
}) => {
|
|
34
|
+
const theme = material.useTheme();
|
|
35
|
+
const isMobile = material.useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
|
|
36
|
+
const mobileAdapt = responsive && isMobile && orientation === "horizontal";
|
|
37
|
+
const effectiveOrientation = mobileAdapt && children.length > 3 ? "vertical" : orientation;
|
|
38
|
+
const hideLabelsOnMobile = mobileAdapt && children.length <= 3;
|
|
39
|
+
const effectiveAlternateLabel = alternateLabel && effectiveOrientation === "horizontal";
|
|
13
40
|
const wizard = useWizard.useWizard();
|
|
14
41
|
const currentStep = currentStepProp !== void 0 ? currentStepProp : wizard.totalSteps > 0 ? wizard.currentStep : 0;
|
|
15
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
|
|
16
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
42
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: __spreadValues({ width: "100%", overflowX: "hidden" }, sx), children: [
|
|
43
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
44
|
+
material.Stepper,
|
|
45
|
+
{
|
|
46
|
+
activeStep: currentStep,
|
|
47
|
+
orientation: effectiveOrientation,
|
|
48
|
+
alternativeLabel: effectiveAlternateLabel,
|
|
49
|
+
sx: __spreadValues({}, effectiveOrientation === "horizontal" && {
|
|
50
|
+
flexWrap: "wrap",
|
|
51
|
+
rowGap: 1,
|
|
52
|
+
"& .MuiStepLabel-label": { textAlign: "center" }
|
|
53
|
+
}),
|
|
54
|
+
children: children.map((child, idx) => {
|
|
55
|
+
const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
|
|
56
|
+
return /* @__PURE__ */ jsxRuntime.jsx(material.Step, { completed, disabled, className, sx: stepSx, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
57
|
+
material.StepLabel,
|
|
58
|
+
{
|
|
59
|
+
sx: __spreadProps(__spreadValues({
|
|
60
|
+
pointerEvents: "none"
|
|
61
|
+
}, hideLabelsOnMobile && {
|
|
62
|
+
"& .MuiStepLabel-labelContainer": { display: "none" }
|
|
63
|
+
}), {
|
|
64
|
+
"& .MuiStepIcon-root": {
|
|
65
|
+
color: dotColor
|
|
66
|
+
},
|
|
67
|
+
"& .MuiStepIcon-active": {
|
|
68
|
+
color: activeDotColor
|
|
69
|
+
},
|
|
70
|
+
"& .MuiStepIcon-completed": {
|
|
71
|
+
color: completedDotColor
|
|
72
|
+
},
|
|
73
|
+
"& .MuiStepIcon-text": {
|
|
74
|
+
fill: iconTextColor
|
|
75
|
+
}
|
|
76
|
+
}),
|
|
77
|
+
children: label
|
|
34
78
|
}
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}) }),
|
|
79
|
+
) }, idx);
|
|
80
|
+
})
|
|
81
|
+
}
|
|
82
|
+
),
|
|
40
83
|
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: children.map(
|
|
41
84
|
(child, idx) => idx === currentStep ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: child.props.children }, idx) : null
|
|
42
85
|
) })
|
|
@@ -1 +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 {
|
|
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;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React, ReactElement } from 'react';
|
|
2
|
+
import { Breakpoint } from '@mui/material';
|
|
2
3
|
import { StepProps } from './Step';
|
|
3
4
|
interface MyStepperProps {
|
|
4
5
|
children: ReactElement<StepProps>[];
|
|
@@ -11,6 +12,17 @@ interface MyStepperProps {
|
|
|
11
12
|
* Si tampoco hay provider, el default es 0.
|
|
12
13
|
*/
|
|
13
14
|
currentStep?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Cuando es true (default), en pantallas más angostas que `mobileBreakpoint`
|
|
17
|
+
* el stepper horizontal automáticamente:
|
|
18
|
+
* - cambia a orientación vertical si hay >3 steps, o
|
|
19
|
+
* - oculta los labels (solo dots) si hay ≤3 steps,
|
|
20
|
+
* para evitar que se desborde del contenedor.
|
|
21
|
+
* Si pasas `orientation="vertical"` explícito, no se altera.
|
|
22
|
+
*/
|
|
23
|
+
responsive?: boolean;
|
|
24
|
+
/** Breakpoint debajo del cual aplica el modo mobile. Default: "sm". */
|
|
25
|
+
mobileBreakpoint?: Breakpoint;
|
|
14
26
|
}
|
|
15
27
|
export declare const Stepper: React.FC<MyStepperProps>;
|
|
16
28
|
export default Stepper;
|
|
@@ -1,40 +1,83 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
1
20
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Box, Stepper as Stepper$1, Step as Step$1, StepLabel } from "@mui/material";
|
|
21
|
+
import { useTheme, useMediaQuery, Box, Stepper as Stepper$1, Step as Step$1, StepLabel } from "@mui/material";
|
|
3
22
|
import { u as useWizard } from "../../useWizard-CWq--C3o.js";
|
|
4
23
|
const Stepper = ({
|
|
5
24
|
children,
|
|
6
25
|
orientation = "horizontal",
|
|
7
26
|
alternateLabel = false,
|
|
27
|
+
responsive = true,
|
|
28
|
+
mobileBreakpoint = "sm",
|
|
8
29
|
sx,
|
|
9
30
|
currentStep: currentStepProp
|
|
10
31
|
}) => {
|
|
32
|
+
const theme = useTheme();
|
|
33
|
+
const isMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
|
|
34
|
+
const mobileAdapt = responsive && isMobile && orientation === "horizontal";
|
|
35
|
+
const effectiveOrientation = mobileAdapt && children.length > 3 ? "vertical" : orientation;
|
|
36
|
+
const hideLabelsOnMobile = mobileAdapt && children.length <= 3;
|
|
37
|
+
const effectiveAlternateLabel = alternateLabel && effectiveOrientation === "horizontal";
|
|
11
38
|
const wizard = useWizard();
|
|
12
39
|
const currentStep = currentStepProp !== void 0 ? currentStepProp : wizard.totalSteps > 0 ? wizard.currentStep : 0;
|
|
13
|
-
return /* @__PURE__ */ jsxs(Box, { sx, children: [
|
|
14
|
-
/* @__PURE__ */ jsx(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
40
|
+
return /* @__PURE__ */ jsxs(Box, { sx: __spreadValues({ width: "100%", overflowX: "hidden" }, sx), children: [
|
|
41
|
+
/* @__PURE__ */ jsx(
|
|
42
|
+
Stepper$1,
|
|
43
|
+
{
|
|
44
|
+
activeStep: currentStep,
|
|
45
|
+
orientation: effectiveOrientation,
|
|
46
|
+
alternativeLabel: effectiveAlternateLabel,
|
|
47
|
+
sx: __spreadValues({}, effectiveOrientation === "horizontal" && {
|
|
48
|
+
flexWrap: "wrap",
|
|
49
|
+
rowGap: 1,
|
|
50
|
+
"& .MuiStepLabel-label": { textAlign: "center" }
|
|
51
|
+
}),
|
|
52
|
+
children: children.map((child, idx) => {
|
|
53
|
+
const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
|
|
54
|
+
return /* @__PURE__ */ jsx(Step$1, { completed, disabled, className, sx: stepSx, children: /* @__PURE__ */ jsx(
|
|
55
|
+
StepLabel,
|
|
56
|
+
{
|
|
57
|
+
sx: __spreadProps(__spreadValues({
|
|
58
|
+
pointerEvents: "none"
|
|
59
|
+
}, hideLabelsOnMobile && {
|
|
60
|
+
"& .MuiStepLabel-labelContainer": { display: "none" }
|
|
61
|
+
}), {
|
|
62
|
+
"& .MuiStepIcon-root": {
|
|
63
|
+
color: dotColor
|
|
64
|
+
},
|
|
65
|
+
"& .MuiStepIcon-active": {
|
|
66
|
+
color: activeDotColor
|
|
67
|
+
},
|
|
68
|
+
"& .MuiStepIcon-completed": {
|
|
69
|
+
color: completedDotColor
|
|
70
|
+
},
|
|
71
|
+
"& .MuiStepIcon-text": {
|
|
72
|
+
fill: iconTextColor
|
|
73
|
+
}
|
|
74
|
+
}),
|
|
75
|
+
children: label
|
|
32
76
|
}
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}) }),
|
|
77
|
+
) }, idx);
|
|
78
|
+
})
|
|
79
|
+
}
|
|
80
|
+
),
|
|
38
81
|
/* @__PURE__ */ jsx(Box, { mt: 2, children: children.map(
|
|
39
82
|
(child, idx) => idx === currentStep ? /* @__PURE__ */ jsx(Box, { children: child.props.children }, idx) : null
|
|
40
83
|
) })
|
|
@@ -1 +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 {
|
|
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;"}
|