@soyfri/shared-library 1.3.14 → 1.3.16

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.
@@ -36,6 +36,30 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
36
36
  import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
37
37
  import { styled } from "@mui/system";
38
38
  import { TextField, Box } from "@mui/material";
39
+ import require$$0 from "dayjs";
40
+ var enGb$1 = { exports: {} };
41
+ var enGb = enGb$1.exports;
42
+ var hasRequiredEnGb;
43
+ function requireEnGb() {
44
+ if (hasRequiredEnGb) return enGb$1.exports;
45
+ hasRequiredEnGb = 1;
46
+ (function(module, exports) {
47
+ !(function(e, a) {
48
+ module.exports = a(require$$0);
49
+ })(enGb, (function(e) {
50
+ function a(e2) {
51
+ return e2 && "object" == typeof e2 && "default" in e2 ? e2 : { default: e2 };
52
+ }
53
+ var t = a(e), _ = { name: "en-gb", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), weekdaysShort: "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"), weekdaysMin: "Su_Mo_Tu_We_Th_Fr_Sa".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), monthsShort: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"), weekStart: 1, yearStart: 4, relativeTime: { future: "in %s", past: "%s ago", s: "a few seconds", m: "a minute", mm: "%d minutes", h: "an hour", hh: "%d hours", d: "a day", dd: "%d days", M: "a month", MM: "%d months", y: "a year", yy: "%d years" }, formats: { LT: "HH:mm", LTS: "HH:mm:ss", L: "DD/MM/YYYY", LL: "D MMMM YYYY", LLL: "D MMMM YYYY HH:mm", LLLL: "dddd, D MMMM YYYY HH:mm" }, ordinal: function(e2) {
54
+ var a2 = ["th", "st", "nd", "rd"], t2 = e2 % 100;
55
+ return "[" + e2 + (a2[(t2 - 20) % 10] || a2[t2] || a2[0]) + "]";
56
+ } };
57
+ return t.default.locale(_, null, true), _;
58
+ }));
59
+ })(enGb$1);
60
+ return enGb$1.exports;
61
+ }
62
+ requireEnGb();
39
63
  const StyledTextField = styled(TextField)(({ theme }) => ({
40
64
  "& .MuiInputBase-root": {
41
65
  maxHeight: "34px",
@@ -110,7 +134,7 @@ const DatePicker = (_a) => {
110
134
  }
111
135
  }
112
136
  }, [error]);
113
- return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(
137
+ return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: "en-gb", children: /* @__PURE__ */ jsx(
114
138
  Box,
115
139
  {
116
140
  sx: {
@@ -174,4 +198,4 @@ const DatePicker = (_a) => {
174
198
  export {
175
199
  DatePicker as D
176
200
  };
177
- //# sourceMappingURL=DatePicker-BS543Ayk.js.map
201
+ //# sourceMappingURL=DatePicker-BSNboVhN.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DatePicker-BSNboVhN.js","sources":["../node_modules/dayjs/locale/en-gb.js","../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["!function(e,a){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=a(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],a):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).dayjs_locale_en_gb=a(e.dayjs)}(this,(function(e){\"use strict\";function a(e){return e&&\"object\"==typeof e&&\"default\"in e?e:{default:e}}var t=a(e),_={name:\"en-gb\",weekdays:\"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday\".split(\"_\"),weekdaysShort:\"Sun_Mon_Tue_Wed_Thu_Fri_Sat\".split(\"_\"),weekdaysMin:\"Su_Mo_Tu_We_Th_Fr_Sa\".split(\"_\"),months:\"January_February_March_April_May_June_July_August_September_October_November_December\".split(\"_\"),monthsShort:\"Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec\".split(\"_\"),weekStart:1,yearStart:4,relativeTime:{future:\"in %s\",past:\"%s ago\",s:\"a few seconds\",m:\"a minute\",mm:\"%d minutes\",h:\"an hour\",hh:\"%d hours\",d:\"a day\",dd:\"%d days\",M:\"a month\",MM:\"%d months\",y:\"a year\",yy:\"%d years\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD/MM/YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY HH:mm\",LLLL:\"dddd, D MMMM YYYY HH:mm\"},ordinal:function(e){var a=[\"th\",\"st\",\"nd\",\"rd\"],t=e%100;return\"[\"+e+(a[(t-20)%10]||a[t]||a[0])+\"]\"}};return t.default.locale(_,null,!0),_}));","import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField } from '@mui/material';\nimport 'dayjs/locale/en-gb';\n\n// Define las props para el CustomDatePicker\ninterface DatePickerProps {\n label: string;\n selectedDate: Dayjs | null;\n onDateChange: (date: Dayjs | null) => void;\n minDate?: Dayjs;\n maxDate?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n slotProps?: any;\n}\n\n// 1. Reutilizar el componente estilizado del Input\n// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Componente de DatePicker personalizado de Material UI.\n * Permite seleccionar una fecha y actualiza un estado Dayjs.\n */\nexport const DatePicker: React.FC<DatePickerProps> = ({\n label,\n selectedDate,\n onDateChange,\n minDate,\n maxDate,\n disabled,\n readOnly,\n slotProps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate': {\n return 'Fecha fuera del rango permitido';\n }\n case 'invalidDate': {\n return 'Formato de fecha inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale=\"en-gb\">\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDatePicker\n label={label}\n value={selectedDate}\n onChange={onDateChange}\n minDate={minDate}\n maxDate={maxDate}\n onError={(newError) => setError(newError)}\n disabled={disabled}\n readOnly={readOnly}\n className='date-picker-custom'\n sx={{\n \n \n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px'\n },\n\n // 3. Sobreescribir el label para que esté centrado verticalmente\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n\n }}\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n slotProps={{\n ...slotProps,\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DatePicker;"],"names":["this","e","a","t","React","MuiDatePicker","_a","_b"],"mappings":"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","x_google_ignoreList":[0]}
@@ -37,6 +37,30 @@ const LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider")
37
37
  const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
38
38
  const system = require("@mui/system");
39
39
  const material = require("@mui/material");
40
+ const require$$0 = require("dayjs");
41
+ var enGb$1 = { exports: {} };
42
+ var enGb = enGb$1.exports;
43
+ var hasRequiredEnGb;
44
+ function requireEnGb() {
45
+ if (hasRequiredEnGb) return enGb$1.exports;
46
+ hasRequiredEnGb = 1;
47
+ (function(module2, exports2) {
48
+ !(function(e, a) {
49
+ module2.exports = a(require$$0);
50
+ })(enGb, (function(e) {
51
+ function a(e2) {
52
+ return e2 && "object" == typeof e2 && "default" in e2 ? e2 : { default: e2 };
53
+ }
54
+ var t = a(e), _ = { name: "en-gb", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), weekdaysShort: "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"), weekdaysMin: "Su_Mo_Tu_We_Th_Fr_Sa".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), monthsShort: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"), weekStart: 1, yearStart: 4, relativeTime: { future: "in %s", past: "%s ago", s: "a few seconds", m: "a minute", mm: "%d minutes", h: "an hour", hh: "%d hours", d: "a day", dd: "%d days", M: "a month", MM: "%d months", y: "a year", yy: "%d years" }, formats: { LT: "HH:mm", LTS: "HH:mm:ss", L: "DD/MM/YYYY", LL: "D MMMM YYYY", LLL: "D MMMM YYYY HH:mm", LLLL: "dddd, D MMMM YYYY HH:mm" }, ordinal: function(e2) {
55
+ var a2 = ["th", "st", "nd", "rd"], t2 = e2 % 100;
56
+ return "[" + e2 + (a2[(t2 - 20) % 10] || a2[t2] || a2[0]) + "]";
57
+ } };
58
+ return t.default.locale(_, null, true), _;
59
+ }));
60
+ })(enGb$1);
61
+ return enGb$1.exports;
62
+ }
63
+ requireEnGb();
40
64
  const StyledTextField = system.styled(material.TextField)(({ theme }) => ({
41
65
  "& .MuiInputBase-root": {
42
66
  maxHeight: "34px",
@@ -111,7 +135,7 @@ const DatePicker = (_a) => {
111
135
  }
112
136
  }
113
137
  }, [error]);
114
- return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(
138
+ return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, adapterLocale: "en-gb", children: /* @__PURE__ */ jsxRuntime.jsx(
115
139
  material.Box,
116
140
  {
117
141
  sx: {
@@ -173,4 +197,4 @@ const DatePicker = (_a) => {
173
197
  ) });
174
198
  };
175
199
  exports.DatePicker = DatePicker;
176
- //# sourceMappingURL=DatePicker-BXdDk2g_.cjs.map
200
+ //# sourceMappingURL=DatePicker-BoqxWAhj.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DatePicker-BoqxWAhj.cjs","sources":["../node_modules/dayjs/locale/en-gb.js","../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["!function(e,a){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=a(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],a):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).dayjs_locale_en_gb=a(e.dayjs)}(this,(function(e){\"use strict\";function a(e){return e&&\"object\"==typeof e&&\"default\"in e?e:{default:e}}var t=a(e),_={name:\"en-gb\",weekdays:\"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday\".split(\"_\"),weekdaysShort:\"Sun_Mon_Tue_Wed_Thu_Fri_Sat\".split(\"_\"),weekdaysMin:\"Su_Mo_Tu_We_Th_Fr_Sa\".split(\"_\"),months:\"January_February_March_April_May_June_July_August_September_October_November_December\".split(\"_\"),monthsShort:\"Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec\".split(\"_\"),weekStart:1,yearStart:4,relativeTime:{future:\"in %s\",past:\"%s ago\",s:\"a few seconds\",m:\"a minute\",mm:\"%d minutes\",h:\"an hour\",hh:\"%d hours\",d:\"a day\",dd:\"%d days\",M:\"a month\",MM:\"%d months\",y:\"a year\",yy:\"%d years\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD/MM/YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY HH:mm\",LLLL:\"dddd, D MMMM YYYY HH:mm\"},ordinal:function(e){var a=[\"th\",\"st\",\"nd\",\"rd\"],t=e%100;return\"[\"+e+(a[(t-20)%10]||a[t]||a[0])+\"]\"}};return t.default.locale(_,null,!0),_}));","import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField } from '@mui/material';\nimport 'dayjs/locale/en-gb';\n\n// Define las props para el CustomDatePicker\ninterface DatePickerProps {\n label: string;\n selectedDate: Dayjs | null;\n onDateChange: (date: Dayjs | null) => void;\n minDate?: Dayjs;\n maxDate?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n slotProps?: any;\n}\n\n// 1. Reutilizar el componente estilizado del Input\n// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Componente de DatePicker personalizado de Material UI.\n * Permite seleccionar una fecha y actualiza un estado Dayjs.\n */\nexport const DatePicker: React.FC<DatePickerProps> = ({\n label,\n selectedDate,\n onDateChange,\n minDate,\n maxDate,\n disabled,\n readOnly,\n slotProps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate': {\n return 'Fecha fuera del rango permitido';\n }\n case 'invalidDate': {\n return 'Formato de fecha inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale=\"en-gb\">\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDatePicker\n label={label}\n value={selectedDate}\n onChange={onDateChange}\n minDate={minDate}\n maxDate={maxDate}\n onError={(newError) => setError(newError)}\n disabled={disabled}\n readOnly={readOnly}\n className='date-picker-custom'\n sx={{\n \n \n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px'\n },\n\n // 3. Sobreescribir el label para que esté centrado verticalmente\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n\n }}\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n slotProps={{\n ...slotProps,\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DatePicker;"],"names":["module","this","e","a","t","styled","TextField","useMemo","jsx","LocalizationProvider","AdapterDayjs","Box","MuiDatePicker","_a","_b"],"mappings":"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","x_google_ignoreList":[0]}
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const DatePicker = require("../../DatePicker-BXdDk2g_.cjs");
3
+ const DatePicker = require("../../DatePicker-BoqxWAhj.cjs");
4
4
  exports.DatePicker = DatePicker.DatePicker;
5
5
  //# sourceMappingURL=DatePicker.cjs.map
@@ -1,4 +1,4 @@
1
- import { D } from "../../DatePicker-BS543Ayk.js";
1
+ import { D } from "../../DatePicker-BSNboVhN.js";
2
2
  export {
3
3
  D as DatePicker
4
4
  };
@@ -25,7 +25,7 @@ const material = require("@mui/material");
25
25
  const DatePicker = require("@mui/x-date-pickers/DatePicker");
26
26
  const Input = require("../../Input-c8MwNNPg.cjs");
27
27
  const Select = require("../../Select-BO2N56sm.cjs");
28
- const DatePicker$1 = require("../../DatePicker-BXdDk2g_.cjs");
28
+ const DatePicker$1 = require("../../DatePicker-BoqxWAhj.cjs");
29
29
  const InputGroup = ({ children }) => {
30
30
  const childrenArray = React.Children.toArray(children);
31
31
  const childrenWithDividers = childrenArray.map((child, index) => {
@@ -23,7 +23,7 @@ import { Box, TextField, Select } from "@mui/material";
23
23
  import { DatePicker } from "@mui/x-date-pickers/DatePicker";
24
24
  import { I as Input } from "../../Input-DFHs7cJ_.js";
25
25
  import { S as Select$1 } from "../../Select-BcLkyHSE.js";
26
- import { D as DatePicker$1 } from "../../DatePicker-BS543Ayk.js";
26
+ import { D as DatePicker$1 } from "../../DatePicker-BSNboVhN.js";
27
27
  const InputGroup = ({ children }) => {
28
28
  const childrenArray = Children.toArray(children);
29
29
  const childrenWithDividers = childrenArray.map((child, index) => {
@@ -0,0 +1,79 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const material = require("@mui/material");
5
+ const iconsMaterial = require("@mui/icons-material");
6
+ const StatusMessage = ({
7
+ title,
8
+ description,
9
+ messageType = "success",
10
+ displayType = "alert",
11
+ close,
12
+ open = true
13
+ }) => {
14
+ const getAlertVariant = () => {
15
+ switch (messageType) {
16
+ case "success":
17
+ return "success";
18
+ case "danger":
19
+ return "error";
20
+ case "warning":
21
+ return "warning";
22
+ default:
23
+ return "info";
24
+ }
25
+ };
26
+ const getIcon = () => {
27
+ switch (messageType) {
28
+ case "success":
29
+ return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CheckCircleOutline, { sx: { fontSize: "64px", color: "success.main" } });
30
+ case "danger":
31
+ return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { sx: { fontSize: "64px", color: "error.main" } });
32
+ case "warning":
33
+ return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.WarningAmber, { sx: { fontSize: "64px", color: "warning.main" } });
34
+ default:
35
+ return null;
36
+ }
37
+ };
38
+ const alertVariant = getAlertVariant();
39
+ if (!description) {
40
+ return null;
41
+ }
42
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayType === "modal" ? /* @__PURE__ */ jsxRuntime.jsxs(
43
+ material.Dialog,
44
+ {
45
+ open,
46
+ onClose: close,
47
+ "aria-labelledby": "message-dialog-title",
48
+ maxWidth: "md",
49
+ PaperProps: {
50
+ sx: {
51
+ borderRadius: "16px",
52
+ p: 2
53
+ }
54
+ },
55
+ children: [
56
+ /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", p: 4, gap: 2 }, children: [
57
+ /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: getIcon() }),
58
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", component: "h2", sx: { fontWeight: "bold" }, children: title || "" }),
59
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", color: "text.secondary", children: description })
60
+ ] }),
61
+ 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" }) })
62
+ ]
63
+ }
64
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(
65
+ material.Alert,
66
+ {
67
+ severity: alertVariant,
68
+ sx: { mb: 2, mt: 2 },
69
+ onClose: close,
70
+ action: close && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: close, size: "small", color: "inherit", children: "Cerrar" }),
71
+ children: [
72
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
73
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { mt: 1 }, children: description })
74
+ ]
75
+ }
76
+ ) });
77
+ };
78
+ exports.StatusMessage = StatusMessage;
79
+ //# sourceMappingURL=StatusMessage.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatusMessage.cjs","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import React from 'react';\nimport {\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\nconst 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":";;;;;AA6DA,MAAM,gBAAgB,CAAC;AAAA,EACrB;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,44 @@
1
+ /**
2
+ * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia
3
+ * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.
4
+ *
5
+ * El componente puede mostrar alertas con estilos específicos o un modal personalizable
6
+ * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional
7
+ * para cerrar el mensaje.
8
+ *
9
+ * @param {StatusMessageProps} props - Las propiedades del componente.
10
+ * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.
11
+ * @param {string} [props.description] - Descripción o contenido detallado del mensaje.
12
+ * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.
13
+ * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.
14
+ * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.
15
+ * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.
16
+ *
17
+ * @example
18
+ * // Ejemplo de uso como una alerta:
19
+ * <StatusMessage
20
+ * title="Operación Exitosa"
21
+ * description="La operación se ha completado correctamente."
22
+ * messageType="success"
23
+ * displayType="alert"
24
+ * />
25
+ *
26
+ * // Ejemplo de uso como un modal:
27
+ * <StatusMessage
28
+ * title="Advertencia"
29
+ * description="Se ha producido un error inesperado."
30
+ * messageType="danger"
31
+ * displayType="modal"
32
+ * close={() => console.log('Modal cerrado')}
33
+ * />
34
+ */
35
+ export interface StatusMessageProps {
36
+ title: string | undefined;
37
+ description?: string;
38
+ messageType?: 'success' | 'danger' | 'warning';
39
+ displayType?: 'alert' | 'modal';
40
+ close?: () => void;
41
+ open?: boolean;
42
+ }
43
+ declare const StatusMessage: ({ title, description, messageType, displayType, close, open, }: StatusMessageProps) => import("react/jsx-runtime").JSX.Element | null;
44
+ export default StatusMessage;
@@ -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
78
+ };
79
+ //# sourceMappingURL=StatusMessage.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatusMessage.js","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import React from 'react';\nimport {\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\nconst 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":";;;AA6DA,MAAM,gBAAgB,CAAC;AAAA,EACrB;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;"}
@@ -0,0 +1 @@
1
+ export { default as StatusMessage } from './StatusMessage';
@@ -0,0 +1,2 @@
1
+ export * from './StatusMessage/index'
2
+ export {}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soyfri/shared-library",
3
- "version": "1.3.14",
3
+ "version": "1.3.16",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -58,6 +58,11 @@
58
58
  "require": "./components/Stepper/Stepper.cjs",
59
59
  "types": "./components/Stepper/Stepper.d.ts"
60
60
  },
61
+ "./components/StatusMessage": {
62
+ "import": "./components/StatusMessage/StatusMessage.js",
63
+ "require": "./components/StatusMessage/StatusMessage.cjs",
64
+ "types": "./components/StatusMessage/StatusMessage.d.ts"
65
+ },
61
66
  "./components/Stat": {
62
67
  "import": "./components/Stat/Stat.js",
63
68
  "require": "./components/Stat/Stat.cjs",
@@ -1 +0,0 @@
1
- {"version":3,"file":"DatePicker-BS543Ayk.js","sources":["../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el CustomDatePicker\ninterface DatePickerProps {\n label: string;\n selectedDate: Dayjs | null;\n onDateChange: (date: Dayjs | null) => void;\n minDate?: Dayjs;\n maxDate?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n slotProps?: any;\n}\n\n// 1. Reutilizar el componente estilizado del Input\n// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Componente de DatePicker personalizado de Material UI.\n * Permite seleccionar una fecha y actualiza un estado Dayjs.\n */\nexport const DatePicker: React.FC<DatePickerProps> = ({\n label,\n selectedDate,\n onDateChange,\n minDate,\n maxDate,\n disabled,\n readOnly,\n slotProps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate': {\n return 'Fecha fuera del rango permitido';\n }\n case 'invalidDate': {\n return 'Formato de fecha inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDatePicker\n label={label}\n value={selectedDate}\n onChange={onDateChange}\n minDate={minDate}\n maxDate={maxDate}\n onError={(newError) => setError(newError)}\n disabled={disabled}\n readOnly={readOnly}\n className='date-picker-custom'\n sx={{\n \n \n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px'\n },\n\n // 3. Sobreescribir el label para que esté centrado verticalmente\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n\n }}\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n slotProps={{\n ...slotProps,\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DatePicker;"],"names":["React","MuiDatePicker","_a","_b"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"DatePicker-BXdDk2g_.cjs","sources":["../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el CustomDatePicker\ninterface DatePickerProps {\n label: string;\n selectedDate: Dayjs | null;\n onDateChange: (date: Dayjs | null) => void;\n minDate?: Dayjs;\n maxDate?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n slotProps?: any;\n}\n\n// 1. Reutilizar el componente estilizado del Input\n// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Componente de DatePicker personalizado de Material UI.\n * Permite seleccionar una fecha y actualiza un estado Dayjs.\n */\nexport const DatePicker: React.FC<DatePickerProps> = ({\n label,\n selectedDate,\n onDateChange,\n minDate,\n maxDate,\n disabled,\n readOnly,\n slotProps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate': {\n return 'Fecha fuera del rango permitido';\n }\n case 'invalidDate': {\n return 'Formato de fecha inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDatePicker\n label={label}\n value={selectedDate}\n onChange={onDateChange}\n minDate={minDate}\n maxDate={maxDate}\n onError={(newError) => setError(newError)}\n disabled={disabled}\n readOnly={readOnly}\n className='date-picker-custom'\n sx={{\n \n \n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px'\n },\n\n // 3. Sobreescribir el label para que esté centrado verticalmente\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n\n }}\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n slotProps={{\n ...slotProps,\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DatePicker;"],"names":["styled","TextField","useMemo","jsx","LocalizationProvider","AdapterDayjs","Box","MuiDatePicker","_a","_b"],"mappings":"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"}