@soyfri/shared-library 2.0.0-beta.8 → 2.0.0-beta8
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.
- package/Autocomplete-BA-cGASd.js +316 -0
- package/Autocomplete-BA-cGASd.js.map +1 -0
- package/Autocomplete-C2x-lBvZ.cjs +315 -0
- package/Autocomplete-C2x-lBvZ.cjs.map +1 -0
- package/Avatar-9L7YMxya.cjs +162 -0
- package/Avatar-9L7YMxya.cjs.map +1 -0
- package/Avatar-BJTr-PBd.js +163 -0
- package/Avatar-BJTr-PBd.js.map +1 -0
- package/Card-DG_crfkK.cjs +185 -0
- package/Card-DG_crfkK.cjs.map +1 -0
- package/Card-Ug-ttVSh.js +186 -0
- package/Card-Ug-ttVSh.js.map +1 -0
- package/Chip-OPYQ1uQ_.js +74 -0
- package/Chip-OPYQ1uQ_.js.map +1 -0
- package/Chip-qoJLDiva.cjs +73 -0
- package/Chip-qoJLDiva.cjs.map +1 -0
- package/DatePicker-8f_9bwhS.js +202 -0
- package/DatePicker-8f_9bwhS.js.map +1 -0
- package/DatePicker-DLSfkgGA.cjs +201 -0
- package/DatePicker-DLSfkgGA.cjs.map +1 -0
- package/DateRangePicker-BVpeJCHI.js +76 -0
- package/DateRangePicker-BVpeJCHI.js.map +1 -0
- package/DateRangePicker-B_hKQhbj.cjs +75 -0
- package/DateRangePicker-B_hKQhbj.cjs.map +1 -0
- package/DateTimePicker-CWNW09-O.cjs +220 -0
- package/DateTimePicker-CWNW09-O.cjs.map +1 -0
- package/DateTimePicker-D4L9GAod.js +221 -0
- package/DateTimePicker-D4L9GAod.js.map +1 -0
- package/Input-Cp911l23.js +174 -0
- package/Input-Cp911l23.js.map +1 -0
- package/Input-DI0jfq5X.cjs +173 -0
- package/Input-DI0jfq5X.cjs.map +1 -0
- package/Modal-Bm_HH9cv.cjs +319 -0
- package/Modal-Bm_HH9cv.cjs.map +1 -0
- package/Modal-Bnz6d9m9.js +320 -0
- package/Modal-Bnz6d9m9.js.map +1 -0
- package/RadioGroup-CxqDHap1.cjs +200 -0
- package/RadioGroup-CxqDHap1.cjs.map +1 -0
- package/RadioGroup-DMi9FvMP.js +201 -0
- package/RadioGroup-DMi9FvMP.js.map +1 -0
- package/Select-3CBOfM2H.js +447 -0
- package/Select-3CBOfM2H.js.map +1 -0
- package/Select-Bku4f4f8.cjs +446 -0
- package/Select-Bku4f4f8.cjs.map +1 -0
- package/Stat-BUcFCGrz.cjs +83 -0
- package/Stat-BUcFCGrz.cjs.map +1 -0
- package/Stat-C06A_izS.js +84 -0
- package/Stat-C06A_izS.js.map +1 -0
- package/StatusMessage-C5B6oGZ_.cjs +78 -0
- package/StatusMessage-C5B6oGZ_.cjs.map +1 -0
- package/StatusMessage-D1GlfQdz.js +79 -0
- package/StatusMessage-D1GlfQdz.js.map +1 -0
- package/Step-Dq0N72YB.js +49 -0
- package/Step-Dq0N72YB.js.map +1 -0
- package/Step-a8U8O-91.cjs +48 -0
- package/Step-a8U8O-91.cjs.map +1 -0
- package/Switch-BIeobv6i.cjs +179 -0
- package/Switch-BIeobv6i.cjs.map +1 -0
- package/Switch-DQEOxM2R.js +180 -0
- package/Switch-DQEOxM2R.js.map +1 -0
- package/Tab-Co31KY2k.cjs +95 -0
- package/Tab-Co31KY2k.cjs.map +1 -0
- package/Tab-DiK62gRz.js +96 -0
- package/Tab-DiK62gRz.js.map +1 -0
- package/Table-C2LbW0B1.js +531 -0
- package/Table-C2LbW0B1.js.map +1 -0
- package/Table-C4OM6rrC.cjs +530 -0
- package/Table-C4OM6rrC.cjs.map +1 -0
- package/components/AppBar/AppBar.cjs +1 -1
- package/components/AppBar/AppBar.js +1 -1
- package/components/Autocomplete/Autocomplete.cjs +4 -311
- package/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/components/Autocomplete/Autocomplete.js +4 -311
- package/components/Autocomplete/Autocomplete.js.map +1 -1
- package/components/Avatar/Avatar.cjs +2 -160
- package/components/Avatar/Avatar.cjs.map +1 -1
- package/components/Avatar/Avatar.js +2 -160
- package/components/Avatar/Avatar.js.map +1 -1
- package/components/Card/Card.cjs +7 -184
- package/components/Card/Card.cjs.map +1 -1
- package/components/Card/Card.js +7 -184
- package/components/Card/Card.js.map +1 -1
- package/components/Chip/Chip.cjs +2 -71
- package/components/Chip/Chip.cjs.map +1 -1
- package/components/Chip/Chip.js +2 -71
- package/components/Chip/Chip.js.map +1 -1
- package/components/Column/Column.cjs +1 -1
- package/components/Column/Column.cjs.map +1 -1
- package/components/Column/Column.d.ts +1 -1
- package/components/Column/Column.js +1 -1
- package/components/Column/Column.js.map +1 -1
- package/components/Column/index.d.ts +1 -0
- package/components/DatePicker/DatePicker.cjs +3 -200
- package/components/DatePicker/DatePicker.cjs.map +1 -1
- package/components/DatePicker/DatePicker.js +3 -200
- package/components/DatePicker/DatePicker.js.map +1 -1
- package/components/DateRangePicker/DateRangePicker.cjs +2 -73
- package/components/DateRangePicker/DateRangePicker.cjs.map +1 -1
- package/components/DateRangePicker/DateRangePicker.js +2 -73
- package/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/components/DateTimePicker/DateTimePicker.cjs +3 -219
- package/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
- package/components/DateTimePicker/DateTimePicker.js +3 -219
- package/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/components/Drawer/Drawer.cjs +1 -1
- package/components/Drawer/Drawer.js +1 -1
- package/components/Input/Input.cjs +3 -172
- package/components/Input/Input.cjs.map +1 -1
- package/components/Input/Input.js +3 -172
- package/components/Input/Input.js.map +1 -1
- package/components/Modal/Modal.cjs +7 -317
- package/components/Modal/Modal.cjs.map +1 -1
- package/components/Modal/Modal.js +6 -316
- package/components/Modal/Modal.js.map +1 -1
- package/components/Modal/index.d.ts +2 -1
- package/components/Modal.d.ts +4 -0
- package/components/RadioGroup/RadioGroup.cjs +3 -199
- package/components/RadioGroup/RadioGroup.cjs.map +1 -1
- package/components/RadioGroup/RadioGroup.js +3 -199
- package/components/RadioGroup/RadioGroup.js.map +1 -1
- package/components/ScrollTopButton/ScrollTopButton.cjs +1 -1
- package/components/ScrollTopButton/ScrollTopButton.js +1 -1
- package/components/Select/Select.cjs +4 -445
- package/components/Select/Select.cjs.map +1 -1
- package/components/Select/Select.js +4 -445
- package/components/Select/Select.js.map +1 -1
- package/components/Stat/Stat.cjs +2 -81
- package/components/Stat/Stat.cjs.map +1 -1
- package/components/Stat/Stat.js +2 -81
- package/components/Stat/Stat.js.map +1 -1
- package/components/StatusMessage/StatusMessage.cjs +4 -77
- package/components/StatusMessage/StatusMessage.cjs.map +1 -1
- package/components/StatusMessage/StatusMessage.d.ts +1 -1
- package/components/StatusMessage/StatusMessage.js +3 -76
- package/components/StatusMessage/StatusMessage.js.map +1 -1
- package/components/StatusMessage/index.d.ts +2 -1
- package/components/StatusMessage.d.ts +4 -0
- package/components/Stepper/Stepper.cjs +3 -46
- package/components/Stepper/Stepper.cjs.map +1 -1
- package/components/Stepper/Stepper.js +3 -46
- package/components/Stepper/Stepper.js.map +1 -1
- package/components/Switch/Switch.cjs +3 -178
- package/components/Switch/Switch.cjs.map +1 -1
- package/components/Switch/Switch.js +3 -178
- package/components/Switch/Switch.js.map +1 -1
- package/components/Table/Table.cjs +2 -528
- package/components/Table/Table.cjs.map +1 -1
- package/components/Table/Table.d.ts +1 -1
- package/components/Table/Table.js +2 -528
- package/components/Table/Table.js.map +1 -1
- package/components/Tabs/Tabs.cjs +3 -93
- package/components/Tabs/Tabs.cjs.map +1 -1
- package/components/Tabs/Tabs.js +3 -93
- package/components/Tabs/Tabs.js.map +1 -1
- package/hooks/Wizard/WizardContext.d.ts +2 -2
- package/index.cjs +46 -1
- package/index.cjs.map +1 -1
- package/index.d.ts +30 -0
- package/index.js +46 -1
- package/index.js.map +1 -1
- package/package.json +5 -3
- package/{resolvePreset-CT3kU-K2.cjs → resolvePreset-CxTI6_Ln.cjs} +3 -3
- package/{resolvePreset-CT3kU-K2.cjs.map → resolvePreset-CxTI6_Ln.cjs.map} +1 -1
- package/{resolvePreset-B-IB0ehH.js → resolvePreset-K6_BfWHD.js} +3 -3
- package/{resolvePreset-B-IB0ehH.js.map → resolvePreset-K6_BfWHD.js.map} +1 -1
- package/useWizard-CWdIxZzX.cjs.map +1 -1
- package/useWizard-CWq--C3o.js.map +1 -1
package/Stat-C06A_izS.js
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { Box, Typography, Stack, Chip } from "@mui/material";
|
|
4
|
+
const Stat = ({
|
|
5
|
+
stat,
|
|
6
|
+
stat2,
|
|
7
|
+
label,
|
|
8
|
+
color = "#1469B8",
|
|
9
|
+
chipColor = "#1469B8",
|
|
10
|
+
chips = [],
|
|
11
|
+
simple = false,
|
|
12
|
+
chip = false,
|
|
13
|
+
chipList = false,
|
|
14
|
+
children,
|
|
15
|
+
statDisplay
|
|
16
|
+
}) => {
|
|
17
|
+
const selectedTemplate = useMemo(() => {
|
|
18
|
+
if (simple) return "simple";
|
|
19
|
+
if (chip) return "chip";
|
|
20
|
+
if (chipList) return "chipList";
|
|
21
|
+
return "default";
|
|
22
|
+
}, [simple, chip, chipList]);
|
|
23
|
+
const renderStatDisplay = () => {
|
|
24
|
+
return statDisplay ? statDisplay(stat) : stat;
|
|
25
|
+
};
|
|
26
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
27
|
+
selectedTemplate === "default" && /* @__PURE__ */ jsxs(Box, { className: "stat", children: [
|
|
28
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h4", "data-testid": "selection-template-option-outlet", children: renderStatDisplay() }),
|
|
29
|
+
/* @__PURE__ */ jsxs(Box, { className: "stat__label", display: "flex", alignItems: "center", gap: 1, children: [
|
|
30
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body1", children: label }),
|
|
31
|
+
/* @__PURE__ */ jsx(
|
|
32
|
+
Box,
|
|
33
|
+
{
|
|
34
|
+
width: 40,
|
|
35
|
+
height: 4,
|
|
36
|
+
bgcolor: color,
|
|
37
|
+
"data-testid": "stat-border",
|
|
38
|
+
borderRadius: 2
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
] })
|
|
42
|
+
] }),
|
|
43
|
+
selectedTemplate === "simple" && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
|
|
44
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body1", children: label }),
|
|
45
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h6", "data-testid": "selection-template-option-outlet", children: renderStatDisplay() }),
|
|
46
|
+
stat2 && /* @__PURE__ */ jsx(Typography, { children: stat2 })
|
|
47
|
+
] }),
|
|
48
|
+
selectedTemplate === "chip" && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
|
|
49
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body1", children: label }),
|
|
50
|
+
/* @__PURE__ */ jsx(
|
|
51
|
+
Chip,
|
|
52
|
+
{
|
|
53
|
+
"data-testid": "chip-template-option-outlet",
|
|
54
|
+
label: renderStatDisplay(),
|
|
55
|
+
sx: {
|
|
56
|
+
backgroundColor: chipColor,
|
|
57
|
+
color: "#fff",
|
|
58
|
+
fontWeight: "bold"
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
] }),
|
|
63
|
+
selectedTemplate === "chipList" && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
|
|
64
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body1", children: label }),
|
|
65
|
+
/* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, children: chips.map((chip2, i) => /* @__PURE__ */ jsx(
|
|
66
|
+
Chip,
|
|
67
|
+
{
|
|
68
|
+
label: chip2.stat,
|
|
69
|
+
sx: {
|
|
70
|
+
backgroundColor: chip2.chipColor,
|
|
71
|
+
color: "#fff",
|
|
72
|
+
fontWeight: "bold"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
i
|
|
76
|
+
)) })
|
|
77
|
+
] }),
|
|
78
|
+
children
|
|
79
|
+
] });
|
|
80
|
+
};
|
|
81
|
+
export {
|
|
82
|
+
Stat as S
|
|
83
|
+
};
|
|
84
|
+
//# sourceMappingURL=Stat-C06A_izS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stat-C06A_izS.js","sources":["../src/components/Stat/Stat.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Chip, Stack, Typography, Box } from '@mui/material';\n\nexport interface StatChip {\n stat: any;\n chipColor: string;\n}\n\nexport interface StatProps {\n stat: any; // Replace 'any' with the actual type of 'stat'\n stat2?: any; // Replace 'any' with the actual type of'stat2'\n label: string; // Replace 'any' with the actual type of'label'\n color?: string;\n chipColor?: string;\n chips?: StatChip[]; // Replace 'any' with the actual type of'chips'\n simple?: boolean;\n chip?: boolean;\n chipList?: boolean;\n children?: React.ReactNode;\n statDisplay?: (stat: any) => React.ReactNode;\n}\n\nexport const Stat: React.FC<StatProps> = ({\n stat,\n stat2,\n label,\n color = '#1469B8',\n chipColor = '#1469B8',\n chips = [],\n simple = false,\n chip = false,\n chipList = false,\n children,\n statDisplay,\n}) => {\n const selectedTemplate = useMemo(() => {\n if (simple) return 'simple';\n if (chip) return 'chip';\n if (chipList) return 'chipList';\n return 'default';\n }, [simple, chip, chipList]);\n\n const renderStatDisplay = () => {\n return statDisplay ? statDisplay(stat) : stat;\n };\n\n return (\n <>\n {selectedTemplate === 'default' && (\n <Box className=\"stat\">\n <Typography variant=\"h4\" data-testid=\"selection-template-option-outlet\">\n {renderStatDisplay()}\n </Typography>\n <Box className=\"stat__label\" display=\"flex\" alignItems=\"center\" gap={1}>\n <Typography variant=\"body1\">{label}</Typography>\n <Box\n width={40}\n height={4}\n bgcolor={color}\n data-testid=\"stat-border\"\n borderRadius={2}\n />\n </Box>\n </Box>\n )}\n\n {selectedTemplate === 'simple' && (\n <Stack direction=\"row\" spacing={2} alignItems=\"center\">\n <Typography variant=\"body1\">{label}</Typography>\n <Typography variant=\"h6\" data-testid=\"selection-template-option-outlet\">\n {renderStatDisplay()}\n </Typography>\n {stat2 && <Typography>{stat2}</Typography>}\n </Stack>\n )}\n\n {selectedTemplate === 'chip' && (\n <Stack direction=\"row\" spacing={2} alignItems=\"center\">\n <Typography variant=\"body1\">{label}</Typography>\n <Chip\n data-testid=\"chip-template-option-outlet\"\n label={renderStatDisplay()}\n sx={{\n backgroundColor: chipColor,\n color: '#fff',\n fontWeight: 'bold',\n }}\n />\n </Stack>\n )}\n\n {selectedTemplate === 'chipList' && (\n <Stack direction=\"row\" spacing={2} alignItems=\"center\">\n <Typography variant=\"body1\">{label}</Typography>\n <Stack direction=\"row\" spacing={1}>\n {chips.map((chip, i) => (\n <Chip\n key={i}\n label={chip.stat}\n sx={{\n backgroundColor: chip.chipColor,\n color: '#fff',\n fontWeight: 'bold',\n }}\n />\n ))}\n </Stack>\n </Stack>\n )}\n\n {/* Content projection (similar to ng-content) */}\n {children}\n </>\n );\n};\n\nexport default Stat;"],"names":["chip"],"mappings":";;;AAsBO,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ,CAAA;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,OAAQ,QAAO;AACnB,QAAI,KAAM,QAAO;AACjB,QAAI,SAAU,QAAO;AACrB,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,QAAQ,CAAC;AAE3B,QAAM,oBAAoB,MAAM;AAC9B,WAAO,cAAc,YAAY,IAAI,IAAI;AAAA,EAC3C;AAEA,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,qBAAqB,aACpB,qBAAC,KAAA,EAAI,WAAU,QACb,UAAA;AAAA,MAAA,oBAAC,cAAW,SAAQ,MAAK,eAAY,oCAClC,+BACH;AAAA,MACA,qBAAC,OAAI,WAAU,eAAc,SAAQ,QAAO,YAAW,UAAS,KAAK,GACnE,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,SAAQ,SAAS,UAAA,OAAM;AAAA,QACnC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAY;AAAA,YACZ,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAChB,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAGD,qBAAqB,YACpB,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,YAAW,UAC5C,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,SAAS,UAAA,OAAM;AAAA,0BAClC,YAAA,EAAW,SAAQ,MAAK,eAAY,oCAClC,+BACH;AAAA,MACC,SAAS,oBAAC,YAAA,EAAY,UAAA,MAAA,CAAM;AAAA,IAAA,GAC/B;AAAA,IAGD,qBAAqB,UACpB,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,YAAW,UAC5C,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,SAAS,UAAA,OAAM;AAAA,MACnC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,OAAO,kBAAA;AAAA,UACP,IAAI;AAAA,YACF,iBAAiB;AAAA,YACjB,OAAO;AAAA,YACP,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IACF,GACF;AAAA,IAGD,qBAAqB,cACpB,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,YAAW,UAC5C,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,SAAS,UAAA,OAAM;AAAA,MACnC,oBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAC7B,UAAA,MAAM,IAAI,CAACA,OAAM,MAChB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAOA,MAAK;AAAA,UACZ,IAAI;AAAA,YACF,iBAAiBA,MAAK;AAAA,YACtB,OAAO;AAAA,YACP,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QANK;AAAA,MAAA,CAQR,EAAA,CACH;AAAA,IAAA,GACF;AAAA,IAID;AAAA,EAAA,GACH;AAEJ;"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
+
const material = require("@mui/material");
|
|
4
|
+
const iconsMaterial = require("@mui/icons-material");
|
|
5
|
+
const StatusMessage = ({
|
|
6
|
+
title,
|
|
7
|
+
description,
|
|
8
|
+
messageType = "success",
|
|
9
|
+
displayType = "alert",
|
|
10
|
+
close,
|
|
11
|
+
open = true
|
|
12
|
+
}) => {
|
|
13
|
+
const getAlertVariant = () => {
|
|
14
|
+
switch (messageType) {
|
|
15
|
+
case "success":
|
|
16
|
+
return "success";
|
|
17
|
+
case "danger":
|
|
18
|
+
return "error";
|
|
19
|
+
case "warning":
|
|
20
|
+
return "warning";
|
|
21
|
+
default:
|
|
22
|
+
return "info";
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
const getIcon = () => {
|
|
26
|
+
switch (messageType) {
|
|
27
|
+
case "success":
|
|
28
|
+
return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CheckCircleOutline, { sx: { fontSize: "64px", color: "success.main" } });
|
|
29
|
+
case "danger":
|
|
30
|
+
return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { sx: { fontSize: "64px", color: "error.main" } });
|
|
31
|
+
case "warning":
|
|
32
|
+
return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.WarningAmber, { sx: { fontSize: "64px", color: "warning.main" } });
|
|
33
|
+
default:
|
|
34
|
+
return null;
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
const alertVariant = getAlertVariant();
|
|
38
|
+
if (!description) {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayType === "modal" ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
42
|
+
material.Dialog,
|
|
43
|
+
{
|
|
44
|
+
open,
|
|
45
|
+
onClose: close,
|
|
46
|
+
"aria-labelledby": "message-dialog-title",
|
|
47
|
+
maxWidth: "md",
|
|
48
|
+
PaperProps: {
|
|
49
|
+
sx: {
|
|
50
|
+
borderRadius: "16px",
|
|
51
|
+
p: 2
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
children: [
|
|
55
|
+
/* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", p: 4, gap: 2 }, children: [
|
|
56
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: getIcon() }),
|
|
57
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", component: "h2", sx: { fontWeight: "bold" }, children: title || "" }),
|
|
58
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", color: "text.secondary", children: description })
|
|
59
|
+
] }),
|
|
60
|
+
close && /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: close, variant: "contained", color: alertVariant, children: "Aceptar" }) })
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
64
|
+
material.Alert,
|
|
65
|
+
{
|
|
66
|
+
severity: alertVariant,
|
|
67
|
+
sx: { mb: 2, mt: 2 },
|
|
68
|
+
onClose: close,
|
|
69
|
+
action: close && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: close, size: "small", color: "inherit", children: "Cerrar" }),
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
|
|
72
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { mt: 1 }, children: description })
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
) });
|
|
76
|
+
};
|
|
77
|
+
exports.StatusMessage = StatusMessage;
|
|
78
|
+
//# sourceMappingURL=StatusMessage-C5B6oGZ_.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatusMessage-C5B6oGZ_.cjs","sources":["../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import {\n Alert,\n Box,\n Typography,\n Dialog,\n DialogContent,\n DialogActions,\n Button\n} from '@mui/material';\nimport {\n ErrorOutline as ErrorOutlineIcon,\n CheckCircleOutline as CheckCircleOutlineIcon,\n WarningAmber as WarningAmberIcon\n} from '@mui/icons-material';\n\n/**\n * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia\n * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.\n *\n * El componente puede mostrar alertas con estilos específicos o un modal personalizable\n * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional\n * para cerrar el mensaje.\n *\n * @param {StatusMessageProps} props - Las propiedades del componente.\n * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.\n * @param {string} [props.description] - Descripción o contenido detallado del mensaje.\n * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.\n * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.\n * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.\n * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.\n *\n * @example\n * // Ejemplo de uso como una alerta:\n * <StatusMessage\n * title=\"Operación Exitosa\"\n * description=\"La operación se ha completado correctamente.\"\n * messageType=\"success\"\n * displayType=\"alert\"\n * />\n *\n * // Ejemplo de uso como un modal:\n * <StatusMessage\n * title=\"Advertencia\"\n * description=\"Se ha producido un error inesperado.\"\n * messageType=\"danger\"\n * displayType=\"modal\"\n * close={() => console.log('Modal cerrado')}\n * />\n */\n\nexport interface StatusMessageProps {\n title: string | undefined;\n description?: string;\n messageType?: 'success' | 'danger' | 'warning';\n displayType?: 'alert' | 'modal';\n close?: () => void;\n // Propiedad para controlar la visibilidad del modal desde el padre\n open?: boolean;\n}\n\nexport const StatusMessage = ({\n title,\n description,\n messageType = 'success',\n displayType = 'alert',\n close,\n open = true,\n}: StatusMessageProps) => {\n\n const getAlertVariant = () => {\n switch (messageType) {\n case 'success':\n return 'success';\n case 'danger':\n return 'error';\n case 'warning':\n return 'warning';\n default:\n return 'info'; // Fallback\n }\n };\n\n const getIcon = () => {\n switch (messageType) {\n case 'success':\n return <CheckCircleOutlineIcon sx={{ fontSize: '64px', color: 'success.main' }} />;\n case 'danger':\n return <ErrorOutlineIcon sx={{ fontSize: '64px', color: 'error.main' }} />;\n case 'warning':\n return <WarningAmberIcon sx={{ fontSize: '64px', color: 'warning.main' }} />;\n default:\n return null;\n }\n };\n\n const alertVariant = getAlertVariant();\n\n if (!description) {\n return null;\n }\n\n return (\n <>\n {displayType === 'modal' ? (\n <Dialog\n open={open}\n onClose={close}\n aria-labelledby=\"message-dialog-title\"\n maxWidth=\"md\"\n PaperProps={{\n sx: {\n borderRadius: '16px',\n p: 2,\n },\n }}\n >\n <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', p: 4, gap: 2 }}>\n <Box sx={{ mb: 2 }}>\n {getIcon()}\n </Box>\n <Typography variant=\"h4\" component=\"h2\" sx={{ fontWeight: 'bold' }}>\n {title || ''}\n </Typography>\n <Typography variant=\"body1\" color=\"text.secondary\">\n {description}\n </Typography>\n </DialogContent>\n {close && (\n <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n <Button onClick={close} variant=\"contained\" color={alertVariant}>\n Aceptar\n </Button>\n </DialogActions>\n )}\n </Dialog>\n ) : (\n <Alert\n severity={alertVariant}\n sx={{ mb: 2, mt: 2 }}\n onClose={close}\n action={\n close && (\n <Button onClick={close} size=\"small\" color=\"inherit\">\n Cerrar\n </Button>\n )\n }\n >\n <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n {title}\n </Typography>\n <Typography variant=\"body2\" sx={{ mt: 1 }}>\n {description}\n </Typography>\n </Alert>\n )}\n </>\n );\n};\n\nexport default StatusMessage;\n"],"names":["jsx","CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon","Fragment","jsxs","Dialog","DialogContent","Box","Typography","DialogActions","Button","Alert"],"mappings":";;;;AA4DO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AACT,MAA0B;AAExB,QAAM,kBAAkB,MAAM;AAC5B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,UAAU,MAAM;AACpB,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAOA,2BAAAA,IAACC,oCAAuB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAClF,KAAK;AACH,eAAOD,2BAAAA,IAACE,8BAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,gBAAgB;AAAA,MAC1E,KAAK;AACH,eAAOF,2BAAAA,IAACG,8BAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAC5E;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,eAAe,gBAAA;AAErB,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACEH,2BAAAA,IAAAI,WAAAA,UAAA,EACG,0BAAgB,UACfC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,mBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,YAAY;AAAA,QACV,IAAI;AAAA,UACF,cAAc;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MACL;AAAA,MAGF,UAAA;AAAA,QAAAD,2BAAAA,KAACE,SAAAA,eAAA,EAAc,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,WAAW,UAAU,GAAG,GAAG,KAAK,KACnH,UAAA;AAAA,UAAAP,+BAACQ,SAAAA,OAAI,IAAI,EAAE,IAAI,KACZ,qBACH;AAAA,UACAR,2BAAAA,IAACS,SAAAA,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAE,YAAY,OAAA,GACvD,UAAA,SAAS,GAAA,CACZ;AAAA,yCACCA,SAAAA,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,YAAA,CACH;AAAA,QAAA,GACF;AAAA,QACC,SACCT,2BAAAA,IAACU,SAAAA,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAAV,+BAACW,SAAAA,QAAA,EAAO,SAAS,OAAO,SAAQ,aAAY,OAAO,cAAc,qBAEjE,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAIJN,2BAAAA;AAAAA,IAACO,SAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS;AAAA,MACT,QACE,SACEZ,2BAAAA,IAACW,SAAAA,QAAA,EAAO,SAAS,OAAO,MAAK,SAAQ,OAAM,WAAU,UAAA,SAAA,CAErD;AAAA,MAIJ,UAAA;AAAA,QAAAX,2BAAAA,IAACS,SAAAA,YAAA,EAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QACAT,2BAAAA,IAACS,SAAAA,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;;"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Dialog, DialogContent, Box, Typography, DialogActions, Button, Alert } from "@mui/material";
|
|
3
|
+
import { WarningAmber, ErrorOutline, CheckCircleOutline } from "@mui/icons-material";
|
|
4
|
+
const StatusMessage = ({
|
|
5
|
+
title,
|
|
6
|
+
description,
|
|
7
|
+
messageType = "success",
|
|
8
|
+
displayType = "alert",
|
|
9
|
+
close,
|
|
10
|
+
open = true
|
|
11
|
+
}) => {
|
|
12
|
+
const getAlertVariant = () => {
|
|
13
|
+
switch (messageType) {
|
|
14
|
+
case "success":
|
|
15
|
+
return "success";
|
|
16
|
+
case "danger":
|
|
17
|
+
return "error";
|
|
18
|
+
case "warning":
|
|
19
|
+
return "warning";
|
|
20
|
+
default:
|
|
21
|
+
return "info";
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const getIcon = () => {
|
|
25
|
+
switch (messageType) {
|
|
26
|
+
case "success":
|
|
27
|
+
return /* @__PURE__ */ jsx(CheckCircleOutline, { sx: { fontSize: "64px", color: "success.main" } });
|
|
28
|
+
case "danger":
|
|
29
|
+
return /* @__PURE__ */ jsx(ErrorOutline, { sx: { fontSize: "64px", color: "error.main" } });
|
|
30
|
+
case "warning":
|
|
31
|
+
return /* @__PURE__ */ jsx(WarningAmber, { sx: { fontSize: "64px", color: "warning.main" } });
|
|
32
|
+
default:
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
const alertVariant = getAlertVariant();
|
|
37
|
+
if (!description) {
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
return /* @__PURE__ */ jsx(Fragment, { children: displayType === "modal" ? /* @__PURE__ */ jsxs(
|
|
41
|
+
Dialog,
|
|
42
|
+
{
|
|
43
|
+
open,
|
|
44
|
+
onClose: close,
|
|
45
|
+
"aria-labelledby": "message-dialog-title",
|
|
46
|
+
maxWidth: "md",
|
|
47
|
+
PaperProps: {
|
|
48
|
+
sx: {
|
|
49
|
+
borderRadius: "16px",
|
|
50
|
+
p: 2
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ jsxs(DialogContent, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", p: 4, gap: 2 }, children: [
|
|
55
|
+
/* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: getIcon() }),
|
|
56
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h2", sx: { fontWeight: "bold" }, children: title || "" }),
|
|
57
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: description })
|
|
58
|
+
] }),
|
|
59
|
+
close && /* @__PURE__ */ jsx(DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx(Button, { onClick: close, variant: "contained", color: alertVariant, children: "Aceptar" }) })
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
) : /* @__PURE__ */ jsxs(
|
|
63
|
+
Alert,
|
|
64
|
+
{
|
|
65
|
+
severity: alertVariant,
|
|
66
|
+
sx: { mb: 2, mt: 2 },
|
|
67
|
+
onClose: close,
|
|
68
|
+
action: close && /* @__PURE__ */ jsx(Button, { onClick: close, size: "small", color: "inherit", children: "Cerrar" }),
|
|
69
|
+
children: [
|
|
70
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
|
|
71
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 1 }, children: description })
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
) });
|
|
75
|
+
};
|
|
76
|
+
export {
|
|
77
|
+
StatusMessage as S
|
|
78
|
+
};
|
|
79
|
+
//# sourceMappingURL=StatusMessage-D1GlfQdz.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatusMessage-D1GlfQdz.js","sources":["../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import {\n Alert,\n Box,\n Typography,\n Dialog,\n DialogContent,\n DialogActions,\n Button\n} from '@mui/material';\nimport {\n ErrorOutline as ErrorOutlineIcon,\n CheckCircleOutline as CheckCircleOutlineIcon,\n WarningAmber as WarningAmberIcon\n} from '@mui/icons-material';\n\n/**\n * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia\n * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.\n *\n * El componente puede mostrar alertas con estilos específicos o un modal personalizable\n * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional\n * para cerrar el mensaje.\n *\n * @param {StatusMessageProps} props - Las propiedades del componente.\n * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.\n * @param {string} [props.description] - Descripción o contenido detallado del mensaje.\n * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.\n * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.\n * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.\n * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.\n *\n * @example\n * // Ejemplo de uso como una alerta:\n * <StatusMessage\n * title=\"Operación Exitosa\"\n * description=\"La operación se ha completado correctamente.\"\n * messageType=\"success\"\n * displayType=\"alert\"\n * />\n *\n * // Ejemplo de uso como un modal:\n * <StatusMessage\n * title=\"Advertencia\"\n * description=\"Se ha producido un error inesperado.\"\n * messageType=\"danger\"\n * displayType=\"modal\"\n * close={() => console.log('Modal cerrado')}\n * />\n */\n\nexport interface StatusMessageProps {\n title: string | undefined;\n description?: string;\n messageType?: 'success' | 'danger' | 'warning';\n displayType?: 'alert' | 'modal';\n close?: () => void;\n // Propiedad para controlar la visibilidad del modal desde el padre\n open?: boolean;\n}\n\nexport const StatusMessage = ({\n title,\n description,\n messageType = 'success',\n displayType = 'alert',\n close,\n open = true,\n}: StatusMessageProps) => {\n\n const getAlertVariant = () => {\n switch (messageType) {\n case 'success':\n return 'success';\n case 'danger':\n return 'error';\n case 'warning':\n return 'warning';\n default:\n return 'info'; // Fallback\n }\n };\n\n const getIcon = () => {\n switch (messageType) {\n case 'success':\n return <CheckCircleOutlineIcon sx={{ fontSize: '64px', color: 'success.main' }} />;\n case 'danger':\n return <ErrorOutlineIcon sx={{ fontSize: '64px', color: 'error.main' }} />;\n case 'warning':\n return <WarningAmberIcon sx={{ fontSize: '64px', color: 'warning.main' }} />;\n default:\n return null;\n }\n };\n\n const alertVariant = getAlertVariant();\n\n if (!description) {\n return null;\n }\n\n return (\n <>\n {displayType === 'modal' ? (\n <Dialog\n open={open}\n onClose={close}\n aria-labelledby=\"message-dialog-title\"\n maxWidth=\"md\"\n PaperProps={{\n sx: {\n borderRadius: '16px',\n p: 2,\n },\n }}\n >\n <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', p: 4, gap: 2 }}>\n <Box sx={{ mb: 2 }}>\n {getIcon()}\n </Box>\n <Typography variant=\"h4\" component=\"h2\" sx={{ fontWeight: 'bold' }}>\n {title || ''}\n </Typography>\n <Typography variant=\"body1\" color=\"text.secondary\">\n {description}\n </Typography>\n </DialogContent>\n {close && (\n <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n <Button onClick={close} variant=\"contained\" color={alertVariant}>\n Aceptar\n </Button>\n </DialogActions>\n )}\n </Dialog>\n ) : (\n <Alert\n severity={alertVariant}\n sx={{ mb: 2, mt: 2 }}\n onClose={close}\n action={\n close && (\n <Button onClick={close} size=\"small\" color=\"inherit\">\n Cerrar\n </Button>\n )\n }\n >\n <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n {title}\n </Typography>\n <Typography variant=\"body2\" sx={{ mt: 1 }}>\n {description}\n </Typography>\n </Alert>\n )}\n </>\n );\n};\n\nexport default StatusMessage;\n"],"names":["CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon"],"mappings":";;;AA4DO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AACT,MAA0B;AAExB,QAAM,kBAAkB,MAAM;AAC5B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,UAAU,MAAM;AACpB,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO,oBAACA,sBAAuB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAClF,KAAK;AACH,eAAO,oBAACC,gBAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,gBAAgB;AAAA,MAC1E,KAAK;AACH,eAAO,oBAACC,gBAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAC5E;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,eAAe,gBAAA;AAErB,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACE,oBAAA,UAAA,EACG,0BAAgB,UACf;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,mBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,YAAY;AAAA,QACV,IAAI;AAAA,UACF,cAAc;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MACL;AAAA,MAGF,UAAA;AAAA,QAAA,qBAAC,eAAA,EAAc,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,WAAW,UAAU,GAAG,GAAG,KAAK,KACnH,UAAA;AAAA,UAAA,oBAAC,OAAI,IAAI,EAAE,IAAI,KACZ,qBACH;AAAA,UACA,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAE,YAAY,OAAA,GACvD,UAAA,SAAS,GAAA,CACZ;AAAA,8BACC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,YAAA,CACH;AAAA,QAAA,GACF;AAAA,QACC,SACC,oBAAC,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAA,oBAAC,QAAA,EAAO,SAAS,OAAO,SAAQ,aAAY,OAAO,cAAc,qBAEjE,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAIJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS;AAAA,MACT,QACE,SACE,oBAAC,QAAA,EAAO,SAAS,OAAO,MAAK,SAAQ,OAAM,WAAU,UAAA,SAAA,CAErD;AAAA,MAIJ,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QACA,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}
|
package/Step-Dq0N72YB.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Stepper as Stepper$1, Step as Step$1, StepLabel } from "@mui/material";
|
|
3
|
+
import { u as useWizard } from "./useWizard-CWq--C3o.js";
|
|
4
|
+
const Stepper = ({
|
|
5
|
+
children,
|
|
6
|
+
orientation = "horizontal",
|
|
7
|
+
alternateLabel = false,
|
|
8
|
+
sx,
|
|
9
|
+
currentStep: currentStepProp
|
|
10
|
+
}) => {
|
|
11
|
+
const wizard = useWizard();
|
|
12
|
+
const currentStep = currentStepProp !== void 0 ? currentStepProp : wizard.totalSteps > 0 ? wizard.currentStep : 0;
|
|
13
|
+
return /* @__PURE__ */ jsxs(Box, { sx, children: [
|
|
14
|
+
/* @__PURE__ */ jsx(Stepper$1, { activeStep: currentStep, orientation, alternativeLabel: alternateLabel, children: children.map((child, idx) => {
|
|
15
|
+
const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
|
|
16
|
+
return /* @__PURE__ */ jsx(Step$1, { completed, disabled, className, sx: stepSx, children: /* @__PURE__ */ jsx(
|
|
17
|
+
StepLabel,
|
|
18
|
+
{
|
|
19
|
+
sx: {
|
|
20
|
+
pointerEvents: "none",
|
|
21
|
+
"& .MuiStepIcon-root": {
|
|
22
|
+
color: dotColor
|
|
23
|
+
},
|
|
24
|
+
"& .MuiStepIcon-active": {
|
|
25
|
+
color: activeDotColor
|
|
26
|
+
},
|
|
27
|
+
"& .MuiStepIcon-completed": {
|
|
28
|
+
color: completedDotColor
|
|
29
|
+
},
|
|
30
|
+
"& .MuiStepIcon-text": {
|
|
31
|
+
fill: iconTextColor
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
children: label
|
|
35
|
+
}
|
|
36
|
+
) }, idx);
|
|
37
|
+
}) }),
|
|
38
|
+
/* @__PURE__ */ jsx(Box, { mt: 2, children: children.map(
|
|
39
|
+
(child, idx) => idx === currentStep ? /* @__PURE__ */ jsx(Box, { children: child.props.children }, idx) : null
|
|
40
|
+
) })
|
|
41
|
+
] });
|
|
42
|
+
};
|
|
43
|
+
const Step = (_) => null;
|
|
44
|
+
Step.displayName = "Step";
|
|
45
|
+
export {
|
|
46
|
+
Stepper as S,
|
|
47
|
+
Step as a
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=Step-Dq0N72YB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step-Dq0N72YB.js","sources":["../src/components/Stepper/Stepper.tsx","../src/components/Stepper/Step.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Stepper as MuiStepper, Step as MuiStep, StepLabel as MuiStepLabel, Box } 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\nexport const Stepper: React.FC<MyStepperProps> = ({\n children,\n orientation = \"horizontal\",\n alternateLabel = false,\n\n sx,\n currentStep: currentStepProp,\n}) => {\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={sx}>\n <MuiStepper activeStep={currentStep} orientation={orientation} alternativeLabel={alternateLabel} >\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 \"& .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":";;;AAkBO,MAAM,UAAoC,CAAC;AAAA,EAChD;AAAA,EACA,cAAc;AAAA,EACd,iBAAiB;AAAA,EAEjB;AAAA,EACA,aAAa;AACf,MAAM;AAIJ,QAAM,SAAS,UAAA;AACf,QAAM,cACJ,oBAAoB,SAChB,kBACA,OAAO,aAAa,IAClB,OAAO,cACP;AAER,SACE,qBAAC,OAAI,IACH,UAAA;AAAA,IAAA,oBAACA,WAAA,EAAW,YAAY,aAAa,aAA0B,kBAAkB,gBAC9E,UAAA,SAAS,IAAI,CAAC,OAAO,QAAQ;AAC5B,YAAM,EAAE,OAAO,WAAW,UAAU,WAAW,IAAI,QAAQ,UAAU,gBAAgB,mBAAmB,cAAA,IAAkB,MAAM;AAChI,iCACGC,QAAA,EAAkB,WAAsB,UAAoB,WAAsB,IAAI,QACrF,UAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UAAa,IAAI;AAAA,YAChB,eAAe;AAAA,YACf,uBAAuB;AAAA,cACrB,OAAO;AAAA,YAAA;AAAA,YAET,yBAAyB;AAAA,cACvB,OAAO;AAAA,YAAA;AAAA,YAET,4BAA4B;AAAA,cAC1B,OAAO;AAAA,YAAA;AAAA,YAET,uBAAuB;AAAA,cACrB,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAEA,UAAA;AAAA,QAAA;AAAA,MAAA,KAhBU,GAkBd;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,IACA,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;ACxDO,MAAM,OAAO,CAAC,MAAuB;AAE5C,KAAK,cAAc;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
+
const material = require("@mui/material");
|
|
4
|
+
const useWizard = require("./useWizard-CWdIxZzX.cjs");
|
|
5
|
+
const Stepper = ({
|
|
6
|
+
children,
|
|
7
|
+
orientation = "horizontal",
|
|
8
|
+
alternateLabel = false,
|
|
9
|
+
sx,
|
|
10
|
+
currentStep: currentStepProp
|
|
11
|
+
}) => {
|
|
12
|
+
const wizard = useWizard.useWizard();
|
|
13
|
+
const currentStep = currentStepProp !== void 0 ? currentStepProp : wizard.totalSteps > 0 ? wizard.currentStep : 0;
|
|
14
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
|
|
15
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Stepper, { activeStep: currentStep, orientation, alternativeLabel: alternateLabel, children: children.map((child, idx) => {
|
|
16
|
+
const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx(material.Step, { completed, disabled, className, sx: stepSx, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
18
|
+
material.StepLabel,
|
|
19
|
+
{
|
|
20
|
+
sx: {
|
|
21
|
+
pointerEvents: "none",
|
|
22
|
+
"& .MuiStepIcon-root": {
|
|
23
|
+
color: dotColor
|
|
24
|
+
},
|
|
25
|
+
"& .MuiStepIcon-active": {
|
|
26
|
+
color: activeDotColor
|
|
27
|
+
},
|
|
28
|
+
"& .MuiStepIcon-completed": {
|
|
29
|
+
color: completedDotColor
|
|
30
|
+
},
|
|
31
|
+
"& .MuiStepIcon-text": {
|
|
32
|
+
fill: iconTextColor
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
children: label
|
|
36
|
+
}
|
|
37
|
+
) }, idx);
|
|
38
|
+
}) }),
|
|
39
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: children.map(
|
|
40
|
+
(child, idx) => idx === currentStep ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: child.props.children }, idx) : null
|
|
41
|
+
) })
|
|
42
|
+
] });
|
|
43
|
+
};
|
|
44
|
+
const Step = (_) => null;
|
|
45
|
+
Step.displayName = "Step";
|
|
46
|
+
exports.Step = Step;
|
|
47
|
+
exports.Stepper = Stepper;
|
|
48
|
+
//# sourceMappingURL=Step-a8U8O-91.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step-a8U8O-91.cjs","sources":["../src/components/Stepper/Stepper.tsx","../src/components/Stepper/Step.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Stepper as MuiStepper, Step as MuiStep, StepLabel as MuiStepLabel, Box } 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\nexport const Stepper: React.FC<MyStepperProps> = ({\n children,\n orientation = \"horizontal\",\n alternateLabel = false,\n\n sx,\n currentStep: currentStepProp,\n}) => {\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={sx}>\n <MuiStepper activeStep={currentStep} orientation={orientation} alternativeLabel={alternateLabel} >\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 \"& .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":["useWizard","jsxs","Box","jsx","MuiStepper","MuiStep","MuiStepLabel"],"mappings":";;;;AAkBO,MAAM,UAAoC,CAAC;AAAA,EAChD;AAAA,EACA,cAAc;AAAA,EACd,iBAAiB;AAAA,EAEjB;AAAA,EACA,aAAa;AACf,MAAM;AAIJ,QAAM,SAASA,UAAAA,UAAA;AACf,QAAM,cACJ,oBAAoB,SAChB,kBACA,OAAO,aAAa,IAClB,OAAO,cACP;AAER,SACEC,gCAACC,SAAAA,OAAI,IACH,UAAA;AAAA,IAAAC,2BAAAA,IAACC,SAAAA,SAAA,EAAW,YAAY,aAAa,aAA0B,kBAAkB,gBAC9E,UAAA,SAAS,IAAI,CAAC,OAAO,QAAQ;AAC5B,YAAM,EAAE,OAAO,WAAW,UAAU,WAAW,IAAI,QAAQ,UAAU,gBAAgB,mBAAmB,cAAA,IAAkB,MAAM;AAChI,4CACGC,eAAA,EAAkB,WAAsB,UAAoB,WAAsB,IAAI,QACrF,UAAAF,2BAAAA;AAAAA,QAACG,SAAAA;AAAAA,QAAA;AAAA,UAAa,IAAI;AAAA,YAChB,eAAe;AAAA,YACf,uBAAuB;AAAA,cACrB,OAAO;AAAA,YAAA;AAAA,YAET,yBAAyB;AAAA,cACvB,OAAO;AAAA,YAAA;AAAA,YAET,4BAA4B;AAAA,cAC1B,OAAO;AAAA,YAAA;AAAA,YAET,uBAAuB;AAAA,cACrB,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAEA,UAAA;AAAA,QAAA;AAAA,MAAA,KAhBU,GAkBd;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,IACAH,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;ACxDO,MAAM,OAAO,CAAC,MAAuB;AAE5C,KAAK,cAAc;;;"}
|
|
@@ -0,0 +1,179 @@
|
|
|
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));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
34
|
+
const styles = require("@mui/material/styles");
|
|
35
|
+
const material = require("@mui/material");
|
|
36
|
+
const reactHookForm = require("react-hook-form");
|
|
37
|
+
const resolvePreset = require("./resolvePreset-CxTI6_Ln.cjs");
|
|
38
|
+
const toRadius = (borderRadius) => typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
39
|
+
const FOCUS_TRANSITION = "border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms";
|
|
40
|
+
const buildSwitchSx = ({
|
|
41
|
+
bordered,
|
|
42
|
+
borderRadius,
|
|
43
|
+
hasLabel,
|
|
44
|
+
error
|
|
45
|
+
}) => {
|
|
46
|
+
const radius = toRadius(borderRadius);
|
|
47
|
+
if (!bordered) {
|
|
48
|
+
return {
|
|
49
|
+
"& .MuiFormHelperText-root": { marginLeft: 0 }
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
return (theme) => ({
|
|
53
|
+
"& .MuiFormControlLabel-root": __spreadValues(__spreadProps(__spreadValues({
|
|
54
|
+
marginLeft: 0,
|
|
55
|
+
marginRight: 0,
|
|
56
|
+
paddingX: 1.5,
|
|
57
|
+
paddingY: 1.25,
|
|
58
|
+
border: `1px solid ${error ? theme.palette.error.main : theme.palette.divider}`,
|
|
59
|
+
borderRadius: radius,
|
|
60
|
+
transition: FOCUS_TRANSITION
|
|
61
|
+
}, error && {
|
|
62
|
+
boxShadow: `0 0 0 1px ${theme.palette.error.main}`
|
|
63
|
+
}), {
|
|
64
|
+
// Focus del usuario sobre el switch interno.
|
|
65
|
+
"&:focus-within": {
|
|
66
|
+
borderColor: error ? theme.palette.error.main : theme.palette.primary.main,
|
|
67
|
+
boxShadow: `0 0 0 1px ${error ? theme.palette.error.main : theme.palette.primary.main}`
|
|
68
|
+
}
|
|
69
|
+
}), hasLabel && {
|
|
70
|
+
width: "100%",
|
|
71
|
+
justifyContent: "space-between"
|
|
72
|
+
}),
|
|
73
|
+
"& .MuiFormHelperText-root": {
|
|
74
|
+
marginLeft: 0
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
const Switch = (props) => {
|
|
79
|
+
const _a = props, {
|
|
80
|
+
label,
|
|
81
|
+
size = "medium",
|
|
82
|
+
labelPlacement = "end",
|
|
83
|
+
disabled = false,
|
|
84
|
+
error = false,
|
|
85
|
+
helperText,
|
|
86
|
+
bordered = false,
|
|
87
|
+
borderRadius = 10,
|
|
88
|
+
defaultChecked,
|
|
89
|
+
preset,
|
|
90
|
+
sx
|
|
91
|
+
} = _a, rest = __objRest(_a, [
|
|
92
|
+
"label",
|
|
93
|
+
"size",
|
|
94
|
+
"labelPlacement",
|
|
95
|
+
"disabled",
|
|
96
|
+
"error",
|
|
97
|
+
"helperText",
|
|
98
|
+
"bordered",
|
|
99
|
+
"borderRadius",
|
|
100
|
+
"defaultChecked",
|
|
101
|
+
"preset",
|
|
102
|
+
"sx"
|
|
103
|
+
]);
|
|
104
|
+
const theme = styles.useTheme();
|
|
105
|
+
const presetSx = resolvePreset.resolvePreset("Switch", preset, theme);
|
|
106
|
+
const buildSx = (effectiveError) => [
|
|
107
|
+
buildSwitchSx({
|
|
108
|
+
bordered,
|
|
109
|
+
borderRadius,
|
|
110
|
+
hasLabel: !!label,
|
|
111
|
+
error: effectiveError
|
|
112
|
+
}),
|
|
113
|
+
...presetSx ? [presetSx] : [],
|
|
114
|
+
...Array.isArray(sx) ? sx : [sx]
|
|
115
|
+
];
|
|
116
|
+
const renderSwitch = (checked2, onChange2, onBlur, inputRef) => {
|
|
117
|
+
const switchEl = /* @__PURE__ */ jsxRuntime.jsx(
|
|
118
|
+
material.Switch,
|
|
119
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
120
|
+
size,
|
|
121
|
+
checked: !!checked2,
|
|
122
|
+
onChange: (_e, next) => onChange2(next),
|
|
123
|
+
onBlur,
|
|
124
|
+
inputRef,
|
|
125
|
+
disabled
|
|
126
|
+
})
|
|
127
|
+
);
|
|
128
|
+
return label ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
129
|
+
material.FormControlLabel,
|
|
130
|
+
{
|
|
131
|
+
control: switchEl,
|
|
132
|
+
label,
|
|
133
|
+
labelPlacement,
|
|
134
|
+
disabled
|
|
135
|
+
}
|
|
136
|
+
) : switchEl;
|
|
137
|
+
};
|
|
138
|
+
if ("control" in props && props.control) {
|
|
139
|
+
const { name, control, validation } = props;
|
|
140
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
141
|
+
reactHookForm.Controller,
|
|
142
|
+
{
|
|
143
|
+
name,
|
|
144
|
+
control,
|
|
145
|
+
rules: validation,
|
|
146
|
+
defaultValue: defaultChecked,
|
|
147
|
+
render: ({ field, fieldState: { error: fieldError } }) => {
|
|
148
|
+
var _a2;
|
|
149
|
+
const finalError = !!fieldError || error;
|
|
150
|
+
const finalHelperText = (_a2 = fieldError == null ? void 0 : fieldError.message) != null ? _a2 : helperText;
|
|
151
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
152
|
+
material.FormControl,
|
|
153
|
+
{
|
|
154
|
+
error: finalError,
|
|
155
|
+
disabled,
|
|
156
|
+
sx: buildSx(finalError),
|
|
157
|
+
children: [
|
|
158
|
+
renderSwitch(
|
|
159
|
+
!!field.value,
|
|
160
|
+
(next) => field.onChange(next),
|
|
161
|
+
field.onBlur,
|
|
162
|
+
field.ref
|
|
163
|
+
),
|
|
164
|
+
finalHelperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: finalHelperText })
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
const { checked, onChange } = props;
|
|
173
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { error, disabled, sx: buildSx(error), children: [
|
|
174
|
+
renderSwitch(checked, onChange),
|
|
175
|
+
helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
|
|
176
|
+
] });
|
|
177
|
+
};
|
|
178
|
+
exports.Switch = Switch;
|
|
179
|
+
//# sourceMappingURL=Switch-BIeobv6i.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch-BIeobv6i.cjs","sources":["../src/components/Switch/Switch.sx.ts","../src/components/Switch/Switch.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildSwitchSxOptions {\n bordered: boolean;\n borderRadius: number | string;\n hasLabel: boolean;\n error: boolean;\n}\n\nconst toRadius = (borderRadius: number | string) =>\n typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n/**\n * Transición compartida (matchea el InputGroup y el RadioGroup).\n */\nconst FOCUS_TRANSITION =\n 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';\n\n/**\n * Builder de sx para Switch. Reproduce el estilo del antiguo\n * `FormToggleInput` legacy cuando `bordered=true`: contenedor con borde,\n * label a la izquierda y switch a la derecha (vía justify-content: space-between).\n *\n * Cuando `bordered=true`, el contenedor gana:\n * - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).\n * - `error=true` → borde + shadow de error (palette.error.main).\n *\n * El shadow es de 1px, así que no hay shift de layout — sólo se intensifica\n * visualmente el borde sin empujar nada alrededor.\n *\n * Si `bordered=false`, sólo aplica un reset de margin del helper text.\n */\nexport const buildSwitchSx = ({\n bordered,\n borderRadius,\n hasLabel,\n error,\n}: BuildSwitchSxOptions): SxProps<Theme> => {\n const radius = toRadius(borderRadius);\n\n if (!bordered) {\n return {\n '& .MuiFormHelperText-root': { marginLeft: 0 },\n };\n }\n\n return (theme) => ({\n '& .MuiFormControlLabel-root': {\n marginLeft: 0,\n marginRight: 0,\n paddingX: 1.5,\n paddingY: 1.25,\n border: `1px solid ${\n error ? theme.palette.error.main : theme.palette.divider\n }`,\n borderRadius: radius,\n transition: FOCUS_TRANSITION,\n ...(error && {\n boxShadow: `0 0 0 1px ${theme.palette.error.main}`,\n }),\n // Focus del usuario sobre el switch interno.\n '&:focus-within': {\n borderColor: error\n ? theme.palette.error.main\n : theme.palette.primary.main,\n boxShadow: `0 0 0 1px ${\n error ? theme.palette.error.main : theme.palette.primary.main\n }`,\n },\n // Si hay label, separar el switch al borde opuesto.\n ...(hasLabel && {\n width: '100%',\n justifyContent: 'space-between',\n }),\n },\n '& .MuiFormHelperText-root': {\n marginLeft: 0,\n },\n });\n};\n","import { useTheme } from '@mui/material/styles';\nimport {\n FormControl,\n FormControlLabel,\n FormHelperText,\n Switch as MuiSwitch,\n type SwitchProps as MuiSwitchProps,\n type SxProps,\n type Theme,\n} from '@mui/material';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildSwitchSx } from './Switch.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type SwitchSize = 'small' | 'medium';\nexport type SwitchLabelPlacement = 'start' | 'end' | 'top' | 'bottom';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseSwitchProps\n extends Omit<MuiSwitchProps, 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size'> {\n /** Texto al lado del switch. Si está ausente, no se renderiza FormControlLabel. */\n label?: string;\n size?: SwitchSize;\n /** Posición del label. Default: 'end' (legacy `FormToggleInput` lo ponía a la izquierda con su flex-stack). */\n labelPlacement?: SwitchLabelPlacement;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Renderiza un contenedor con borde alrededor del switch + label. Default: false. */\n bordered?: boolean;\n /** Border radius del contenedor (cuando bordered). Default: 10. */\n borderRadius?: number | string;\n defaultChecked?: boolean;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Switch`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n sx?: SxProps<Theme>;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFSwitchProps extends BaseSwitchProps {\n name: string;\n control: Control<any>;\n validation?: RegisterOptions;\n checked?: never;\n onChange?: never;\n}\n\nexport interface ControlledSwitchProps extends BaseSwitchProps {\n name?: string;\n control?: never;\n validation?: never;\n checked: boolean;\n onChange: (checked: boolean) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type SwitchProps = RHFSwitchProps | ControlledSwitchProps;\n\nexport const Switch: React.FC<SwitchProps> = (props) => {\n const {\n label,\n size = 'medium',\n labelPlacement = 'end',\n disabled = false,\n error = false,\n helperText,\n bordered = false,\n borderRadius = 10,\n defaultChecked,\n preset,\n sx,\n ...rest\n } = props as ControlledSwitchProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Switch', preset, theme);\n\n // Construye el sx con el estado de error efectivo; se llama por rama\n // (RHF usa el error del Controller, controlado usa el prop `error`).\n const buildSx = (effectiveError: boolean) => [\n buildSwitchSx({\n bordered,\n borderRadius,\n hasLabel: !!label,\n error: effectiveError,\n }),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : [sx]),\n ];\n\n const renderSwitch = (\n checked: boolean,\n onChange: (next: boolean) => void,\n onBlur?: () => void,\n inputRef?: React.Ref<HTMLInputElement>,\n ) => {\n const switchEl = (\n <MuiSwitch\n {...rest}\n size={size}\n checked={!!checked}\n onChange={(_e, next) => onChange(next)}\n onBlur={onBlur}\n // @ts-ignore — Ref<HTMLInputElement> type mismatch between @types/react versions in monorepo\n inputRef={inputRef}\n disabled={disabled}\n />\n );\n\n return label ? (\n <FormControlLabel\n control={switchEl}\n label={label}\n labelPlacement={labelPlacement}\n disabled={disabled}\n />\n ) : (\n switchEl\n );\n };\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if ('control' in props && props.control) {\n const { name, control, validation } = props as RHFSwitchProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultChecked}\n render={({ field, fieldState: { error: fieldError } }) => {\n const finalError = !!fieldError || error;\n const finalHelperText = fieldError?.message ?? helperText;\n return (\n <FormControl\n error={finalError}\n disabled={disabled}\n sx={buildSx(finalError)}\n >\n {renderSwitch(\n !!field.value,\n (next) => field.onChange(next),\n field.onBlur,\n field.ref,\n )}\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n }}\n />\n );\n }\n\n // ── Controlled mode ───────────────────────────────────────────────────\n const { checked, onChange } = props as ControlledSwitchProps;\n return (\n <FormControl error={error} disabled={disabled} sx={buildSx(error)}>\n {renderSwitch(checked, onChange)}\n {helperText && <FormHelperText>{helperText}</FormHelperText>}\n </FormControl>\n );\n};\n\nexport default Switch;\n"],"names":["useTheme","resolvePreset","checked","onChange","jsx","MuiSwitch","FormControlLabel","Controller","_a","jsxs","FormControl","FormHelperText"],"mappings":"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"}
|