componentes-sinco 1.0.5 → 1.0.7

package/dist/index.cjs

@@ -61,6 +61,7 @@ var src_exports = {};
 __export(src_exports, {
   ADCSincoTheme: () => ADCSincoTheme,
   AdproSincoTheme: () => AdproSincoTheme,
+  Calendar: () => Calendar,
   EmptyState: () => EmptyState,
   FooterAction: () => FooterAction,
   MultiSelect: () => MultiSelect,
@@ -1245,16 +1246,21 @@ function SCDrawer({
   const inputValidation = () => validateInputs(arrayElements, setToastWithDelay, handleDrawerClose);
   const clean = () => {
     arrayElements.forEach((element, index) => {
-      if (element.setState) {
-        if (element.type === "textField" || element.type === "textArea") {
-          element.setState("");
-        } else if (element.type === "dateRange") {
-          element.setState([null, null]);
+      var _a2, _b2, _c, _d, _e, _f, _g, _h;
+      if (element.setState || import_react8.default.isValidElement(element == null ? void 0 : element.component) && ((_a2 = element.component.props) == null ? void 0 : _a2.setState)) {
+        if (element.type === "textField" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCtextField" || (element.type === "textArea" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCtextArea")) {
+          element.setState != void 0 ? element.setState("") : null;
+          import_react8.default.isValidElement(element == null ? void 0 : element.component) && ((_b2 = element.component.props) == null ? void 0 : _b2.setState) && ((_d = (_c = element == null ? void 0 : element.component) == null ? void 0 : _c.props) == null ? void 0 : _d.setState(""));
+        } else if (element.type === "dateRange" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCDateRange") {
+          element.setState != void 0 ? element.setState([null, null]) : null;
+          import_react8.default.isValidElement(element == null ? void 0 : element.component) && typeof ((_e = element.component.props) == null ? void 0 : _e.setState) === "function" && element.component.props.setState([null, null]);
         } else {
-          if (element.type == "autocomplete" && element.typeFormat == "multiselect") {
-            element.setState({ hiddenValue: [], textValue: [] });
+          if (element.type == "autocomplete" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.type && element.component.type.name === "SCAutocomplete" || (element.typeFormat == "multiselect" || import_react8.default.isValidElement(element == null ? void 0 : element.component) && element.component.props && ((_f = element == null ? void 0 : element.component) == null ? void 0 : _f.props).typeFormat == "multiselect")) {
+            element.setState != void 0 ? element.setState({ hiddenValue: [], textValue: [] }) : null;
+            import_react8.default.isValidElement(element == null ? void 0 : element.component) && typeof ((_g = element.component.props) == null ? void 0 : _g.setState) === "function" && element.component.props.setState({ hiddenValue: [], textValue: [] });
           } else {
-            element.setState({ hiddenValue: "-1", textValue: "" });
+            element.setState != void 0 ? element.setState({ hiddenValue: "-1", textValue: "" }) : null;
+            import_react8.default.isValidElement(element == null ? void 0 : element.component) && typeof ((_h = element.component.props) == null ? void 0 : _h.setState) === "function" && element.component.props.setState({ hiddenValue: "-1", textValue: "" });
           }
         }
       }
@@ -2601,12 +2607,563 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
   )))) : /* @__PURE__ */ import_react22.default.createElement(import_material16.Box, { sx: { height: "200px" } }, toast && /* @__PURE__ */ import_react22.default.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
 };
 
+// src/Components/Calendario/Calendar.tsx
+var import_react28 = __toESM(require("react"), 1);
+var import_material22 = require("@mui/material");
+var import_dayjs7 = __toESM(require("dayjs"), 1);
+
+// src/Components/Calendario/CalendarToolbar.tsx
+var import_react23 = __toESM(require("react"), 1);
+var import_icons_material10 = require("@mui/icons-material");
+var import_material17 = require("@mui/material");
+var import_dayjs2 = __toESM(require("dayjs"), 1);
+var import_es2 = require("dayjs/locale/es");
+import_dayjs2.default.locale("es");
+var CalendarToolbar = ({
+  labelDate,
+  view,
+  onView,
+  onNavigate,
+  children
+}) => {
+  const [anchorEl, setAnchorEl] = (0, import_react23.useState)(null);
+  const open = Boolean(anchorEl);
+  const handleMenuOpen = (event2) => {
+    setAnchorEl(event2.currentTarget);
+  };
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+  const handleViewChange = (newView) => {
+    onView(newView);
+    handleMenuClose();
+  };
+  const getFormattedDate = () => {
+    if (view === "month") {
+      return labelDate.format("MMMM YYYY");
+    }
+    if (view === "week") {
+      return `${labelDate.startOf("week").add(1, "day").format("DD MMM")} - ${labelDate.endOf("week").format("DD MMM YYYY")}`;
+    }
+    return labelDate.format(" DD MMMM YYYY");
+  };
+  return /* @__PURE__ */ import_react23.default.createElement(import_material17.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ import_react23.default.createElement(import_material17.Box, null, /* @__PURE__ */ import_react23.default.createElement(
+    import_material17.Chip,
+    {
+      label: "Hoy",
+      icon: /* @__PURE__ */ import_react23.default.createElement(import_icons_material10.LightModeOutlined, { fontSize: "small" }),
+      color: "primary",
+      onClick: () => onNavigate("TODAY")
+    }
+  )), /* @__PURE__ */ import_react23.default.createElement(import_material17.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react23.default.createElement(import_material17.IconButton, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ import_react23.default.createElement(import_icons_material10.ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ import_react23.default.createElement(import_material17.IconButton, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ import_react23.default.createElement(import_icons_material10.ChevronRight, { fontSize: "small" })), /* @__PURE__ */ import_react23.default.createElement(import_material17.Typography, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ import_react23.default.createElement(import_material17.IconButton, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ import_react23.default.createElement(import_icons_material10.KeyboardArrowDown, { fontSize: "small" })), /* @__PURE__ */ import_react23.default.createElement(
+    import_material17.Menu,
+    {
+      anchorEl,
+      open,
+      onClose: handleMenuClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      transformOrigin: { vertical: "top", horizontal: "center" }
+    },
+    /* @__PURE__ */ import_react23.default.createElement(import_material17.MenuItem, { onClick: () => handleViewChange("month") }, "Mes"),
+    /* @__PURE__ */ import_react23.default.createElement(import_material17.MenuItem, { onClick: () => handleViewChange("week") }, "Semana"),
+    /* @__PURE__ */ import_react23.default.createElement(import_material17.MenuItem, { onClick: () => handleViewChange("day") }, "D\xEDa")
+  )), children ? /* @__PURE__ */ import_react23.default.createElement(import_material17.Box, null, children) : /* @__PURE__ */ import_react23.default.createElement(import_material17.Box, { width: "24px" }), " ");
+};
+
+// src/Components/Calendario/Views/MonthView.tsx
+var import_react25 = __toESM(require("react"), 1);
+var import_material19 = require("@mui/material");
+var import_Add = __toESM(require("@mui/icons-material/Add"), 1);
+var import_dayjs4 = __toESM(require("dayjs"), 1);
+var import_localeData = __toESM(require("dayjs/plugin/localeData"), 1);
+var import_isBetween = __toESM(require("dayjs/plugin/isBetween"), 1);
+
+// src/Components/Calendario/Utils.tsx
+var import_dayjs3 = __toESM(require("dayjs"), 1);
+function getMonthDays(date) {
+  const start = date.startOf("month").day(0);
+  const end = date.endOf("month").day(6);
+  const days = [];
+  let current = start;
+  while (current.isBefore(end) || current.isSame(end, "day")) {
+    days.push(current);
+    current = current.add(1, "day");
+  }
+  return days;
+}
+var isToday = (date) => {
+  return date.isSame((0, import_dayjs3.default)(), "day");
+};
+var stateColors = {
+  Asignada: "warning.main",
+  Finalizado: "primary.main",
+  Vencida: "error.main",
+  EnProgreso: "success.main"
+};
+
+// src/Components/Calendario/Event.tsx
+var import_react24 = __toESM(require("react"), 1);
+var import_material18 = require("@mui/material");
+var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
+  return /* @__PURE__ */ import_react24.default.createElement(
+    import_material18.Stack,
+    {
+      direction: "row",
+      padding: 0.5,
+      borderRadius: 0.5,
+      alignItems: "flex-start",
+      minHeight: "20px",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick == null ? void 0 : onClick(event2);
+      },
+      sx: (theme) => __spreadValues({
+        backgroundColor: theme.palette.common.white,
+        boxShadow: theme.shadows[2],
+        color: theme.palette.text.secondary,
+        overflow: "hidden",
+        cursor: onClick ? "pointer" : "default"
+      }, sx)
+    },
+    /* @__PURE__ */ import_react24.default.createElement(
+      import_material18.Divider,
+      {
+        orientation: "vertical",
+        flexItem: true,
+        sx: {
+          width: "2px",
+          backgroundColor: color != null ? color : "primary.main",
+          borderRadius: "2px"
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react24.default.createElement(
+      import_material18.Box,
+      {
+        px: 1,
+        py: 0.5,
+        flex: "1",
+        minWidth: 0,
+        display: "flex",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ import_react24.default.createElement(
+        import_material18.Typography,
+        {
+          color: "text.primary",
+          variant: "caption",
+          noWrap: true,
+          sx: {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        },
+        capitalize(event2.title)
+      )
+    )
+  );
+};
+
+// src/Components/Calendario/Views/MonthView.tsx
+import_dayjs4.default.extend(import_localeData.default);
+import_dayjs4.default.extend(import_isBetween.default);
+var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick }) => {
+  const days = getMonthDays(currentDate);
+  const weekDays = Array.from({ length: 7 }, (_, i) => (0, import_dayjs4.default)().day(i));
+  const [openDrawer, setOpenDrawer] = import_react25.default.useState(false);
+  const [selectedDay, setSelectedDay] = import_react25.default.useState(null);
+  const [selectedEvents, setSelectedEvents] = import_react25.default.useState([]);
+  return /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { minWidth: "1050px" }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5 }, days.map((day) => {
+    const dayEvents = events.filter(
+      (e) => day.isBetween(e.start.startOf("day"), e.end.endOf("day"), null, "[]")
+    );
+    const isCurrentMonth = day.month() === currentDate.month();
+    return /* @__PURE__ */ import_react25.default.createElement(
+      import_material19.Paper,
+      {
+        key: day.toString(),
+        onClick: () => onDayClick == null ? void 0 : onDayClick(day),
+        sx: {
+          minHeight: 120,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          boxShadow: "none",
+          bgcolor: isCurrentMonth ? "grey.50" : "background.default",
+          cursor: "pointer",
+          "&:hover": { bgcolor: "primary.50" },
+          overflow: "hidden"
+        }
+      },
+      /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { p: 1, flexShrink: 0 }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "flex", alignItems: "center", justifyContent: "flex-start" }, /* @__PURE__ */ import_react25.default.createElement(
+        import_material19.Box,
+        {
+          sx: {
+            width: 24,
+            height: 24,
+            borderRadius: "50%",
+            backgroundColor: isToday(day) ? "primary.main" : void 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ import_react25.default.createElement(
+          import_material19.Typography,
+          {
+            variant: "body2",
+            sx: { color: isToday(day) ? "white" : "text.secondary" }
+          },
+          day.date()
+        )
+      ), dayEvents.length > 2 && /* @__PURE__ */ import_react25.default.createElement(import_material19.Tooltip, { title: "M\xE1s eventos" }, /* @__PURE__ */ import_react25.default.createElement(
+        import_material19.IconButton,
+        {
+          color: "primary",
+          size: "small",
+          onClick: (e) => {
+            e.stopPropagation();
+            onMoreClick == null ? void 0 : onMoreClick(day, dayEvents);
+            setSelectedDay(day);
+            setSelectedEvents(dayEvents);
+          }
+        },
+        /* @__PURE__ */ import_react25.default.createElement(import_Add.default, { fontSize: "small" })
+      )))),
+      /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "flex", flexDirection: "column", gap: 0.5, p: 1, pt: 0, overflow: "hidden" }, dayEvents.slice(0, 2).map((event2) => /* @__PURE__ */ import_react25.default.createElement(
+        CalendarEventCard,
+        {
+          key: `${event2.id}-${day.toString()}`,
+          event: event2,
+          color: stateColors[event2.state],
+          onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day)
+        }
+      ))),
+      dayEvents.length > 2 && /* @__PURE__ */ import_react25.default.createElement(import_material19.Stack, { justifyContent: "flex-end", px: 1, pb: 0.5, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react25.default.createElement(
+        SCDrawer,
+        {
+          width: "350px",
+          title: day.format("DD [de] MMMM YYYY"),
+          open: openDrawer,
+          buttonDrawer: { text: `+ ${dayEvents.length}` },
+          anchor: "right",
+          actions: false,
+          arrayElements: [{
+            component: (() => {
+              const [first, ...rest] = dayEvents;
+              return /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ import_react25.default.createElement(import_material19.Typography, { width: "100%", color: "text.secondary" }, " Proximo evento "), first && /* @__PURE__ */ import_react25.default.createElement(import_material19.Box, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ import_react25.default.createElement(
+                CalendarEventCard,
+                {
+                  event: first,
+                  color: stateColors[first.state],
+                  onClick: () => onEventClick == null ? void 0 : onEventClick(first, day),
+                  sx: {
+                    whiteSpace: "normal",
+                    "& .MuiTypography-root": {
+                      whiteSpace: "normal",
+                      overflow: "visible",
+                      textOverflow: "unset"
+                    }
+                  }
+                }
+              )), /* @__PURE__ */ import_react25.default.createElement(import_material19.Divider, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ import_react25.default.createElement(import_material19.Typography, { width: "100%", py: 1, color: "text.secondary" }, " Eventos restantes "), /* @__PURE__ */ import_react25.default.createElement(
+                import_material19.Box,
+                {
+                  width: "100%",
+                  height: "100%",
+                  flex: 1,
+                  overflow: "auto",
+                  p: 1,
+                  pt: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 1.5
+                },
+                rest.map((event2) => /* @__PURE__ */ import_react25.default.createElement(
+                  CalendarEventCard,
+                  {
+                    key: `${event2.id}-${day.toString()}`,
+                    event: event2,
+                    color: stateColors[event2.state],
+                    onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
+                    sx: {
+                      whiteSpace: "normal",
+                      "& .MuiTypography-root": {
+                        whiteSpace: "normal",
+                        overflow: "visible",
+                        textOverflow: "unset"
+                      }
+                    }
+                  }
+                ))
+              ));
+            })()
+          }]
+        }
+      ))
+    );
+  }))));
+};
+
+// src/Components/Calendario/Views/WeekView.tsx
+var import_react26 = __toESM(require("react"), 1);
+var import_material20 = require("@mui/material");
+var import_dayjs5 = __toESM(require("dayjs"), 1);
+var import_localeData2 = __toESM(require("dayjs/plugin/localeData"), 1);
+import_dayjs5.default.extend(import_localeData2.default);
+var WeekView = ({ events, currentDate, onDayClick, onEventClick }) => {
+  const startOfWeek2 = currentDate.startOf("week");
+  const days = Array.from({ length: 7 }, (_, i) => startOfWeek2.add(i, "day"));
+  const hours2 = Array.from({ length: 24 }, (_, i) => i);
+  const getCellBorderType = (cellHour, dayEvents) => {
+    for (const event2 of dayEvents) {
+      const start = event2.start.hour() + event2.start.minute() / 60;
+      const end = event2.end.hour() + event2.end.minute() / 60;
+      const cellStart = cellHour;
+      const cellEnd = cellHour + 1;
+      if (cellEnd > start && cellStart < end) {
+        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01)
+          return "full";
+        if (Math.abs(cellStart - start) < 0.01) return "start";
+        if (Math.abs(cellEnd - end) < 0.01) return "end";
+        return "middle";
+      }
+    }
+    return "none";
+  };
+  return /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { display: "flex", bgcolor: "background.default" }, /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { width: 45, bgcolor: "background.default" }), days.map((day) => /* @__PURE__ */ import_react26.default.createElement(
+    import_material20.Box,
+    {
+      key: day.toString(),
+      height: 40,
+      flex: 1,
+      pl: 0.5,
+      textAlign: "center",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "flex-start"
+    },
+    /* @__PURE__ */ import_react26.default.createElement(import_material20.Typography, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
+  ))), /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react26.default.createElement(import_material20.Box, { width: 45, bgcolor: "background.default" }, hours2.map((h) => /* @__PURE__ */ import_react26.default.createElement(
+    import_material20.Box,
+    {
+      key: h,
+      height: 60,
+      textAlign: "right",
+      pr: 1,
+      borderTop: "1px solid",
+      borderColor: "divider"
+    },
+    /* @__PURE__ */ import_react26.default.createElement(import_material20.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs5.default)().hour(h).format("h A"))
+  ))), days.map((day) => {
+    const dayEvents = events.filter(
+      (event2) => day.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
+    );
+    return /* @__PURE__ */ import_react26.default.createElement(
+      import_material20.Box,
+      {
+        key: day.toString(),
+        flex: 1,
+        borderLeft: "1px solid",
+        borderColor: "divider",
+        position: "relative",
+        "data-testid": `week-day-column-${day.format("YYYY-MM-DD")}`,
+        onClick: () => onDayClick == null ? void 0 : onDayClick(day)
+      },
+      hours2.map((hourIdx) => {
+        const borderType = getCellBorderType(hourIdx, dayEvents);
+        return /* @__PURE__ */ import_react26.default.createElement(
+          import_material20.Box,
+          {
+            key: hourIdx,
+            height: 60,
+            borderTop: "1px solid",
+            borderColor: borderType === "start" || borderType === "full" || borderType === "none" ? "divider" : "transparent",
+            borderBottom: borderType === "end" || borderType === "full" ? "1px solid divider" : void 0
+          }
+        );
+      }),
+      dayEvents.map((event2) => {
+        const eventStart = day.isSame(event2.start, "day") ? event2.start : day.startOf("day").hour(0).minute(0);
+        const eventEnd = day.isSame(event2.end, "day") ? event2.end : day.endOf("day").hour(23).minute(59);
+        const startMinutes = eventStart.hour() * 60 + eventStart.minute();
+        const durationMinutes = eventEnd.diff(eventStart, "minute");
+        return /* @__PURE__ */ import_react26.default.createElement(
+          CalendarEventCard,
+          {
+            key: `${event2.id}-${day.toString()}`,
+            event: event2,
+            color: stateColors[event2.state],
+            onClick: () => onEventClick == null ? void 0 : onEventClick(event2, day),
+            sx: {
+              position: "absolute",
+              top: `${startMinutes + 15}px`,
+              left: 4,
+              right: 4,
+              cursor: "pointer",
+              height: "auto"
+            }
+          }
+        );
+      })
+    );
+  })));
+};
+
+// src/Components/Calendario/Views/DayView.tsx
+var import_react27 = __toESM(require("react"), 1);
+var import_material21 = require("@mui/material");
+var import_dayjs6 = __toESM(require("dayjs"), 1);
+var hours = Array.from({ length: 24 }, (_, i) => i);
+var DayView = ({ events, currentDate, onEventClick }) => {
+  const getCellBorderType = (cellHour, dayEvents2) => {
+    for (const event2 of dayEvents2) {
+      const start = event2.start.hour() + event2.start.minute() / 60;
+      const end = event2.end.hour() + event2.end.minute() / 60;
+      const cellStart = cellHour;
+      const cellEnd = cellHour + 1;
+      if (cellEnd > start && cellStart < end) {
+        if (Math.abs(cellStart - start) < 0.01 && Math.abs(cellEnd - end) < 0.01)
+          return "full";
+        if (Math.abs(cellStart - start) < 0.01) return "start";
+        if (Math.abs(cellEnd - end) < 0.01) return "end";
+        return "middle";
+      }
+    }
+    return "none";
+  };
+  const dayEvents = events.filter(
+    (event2) => currentDate.isBetween(event2.start.startOf("day"), event2.end.endOf("day"), null, "[]")
+  );
+  return /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ import_react27.default.createElement(
+    import_material21.Box,
+    {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      textAlign: "start",
+      gap: 0.5,
+      py: 1,
+      bgcolor: "primary.50"
+    },
+    /* @__PURE__ */ import_react27.default.createElement(import_material21.Typography, { variant: "h6", color: "text.secondary" }, currentDate.format("D")),
+    /* @__PURE__ */ import_react27.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd"))
+  )), /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { display: "flex", flex: 1 }, /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { width: 47, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ import_react27.default.createElement(
+    import_material21.Box,
+    {
+      key: h,
+      height: 60,
+      textAlign: "right",
+      pr: 1,
+      borderTop: "1px solid",
+      borderRight: "1px solid",
+      borderColor: "divider"
+    },
+    /* @__PURE__ */ import_react27.default.createElement(import_material21.Typography, { variant: "caption", color: "text.secondary" }, (0, import_dayjs6.default)().hour(h).format("h A"))
+  ))), /* @__PURE__ */ import_react27.default.createElement(import_material21.Box, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
+    const borderType = getCellBorderType(hourIdx, dayEvents);
+    return /* @__PURE__ */ import_react27.default.createElement(
+      import_material21.Box,
+      {
+        key: hourIdx,
+        height: 60,
+        borderTop: "1px solid",
+        borderColor: borderType === "start" || borderType === "full" || borderType === "none" ? "divider" : "transparent",
+        borderBottom: borderType === "end" || borderType === "full" ? "1px solid divider" : void 0
+      }
+    );
+  }), dayEvents.map((event2) => {
+    const eventStart = currentDate.isSame(event2.start, "day") ? event2.start : currentDate.startOf("day").hour(0).minute(0);
+    const eventEnd = currentDate.isSame(event2.end, "day") ? event2.end : currentDate.endOf("day").hour(23).minute(59);
+    const startMinutes = eventStart.hour() * 60 + eventStart.minute();
+    const durationMinutes = eventEnd.diff(eventStart, "minute");
+    return /* @__PURE__ */ import_react27.default.createElement(
+      CalendarEventCard,
+      {
+        key: `${event2.id}-${currentDate.toString()}`,
+        event: event2,
+        color: stateColors[event2.state],
+        onClick: () => onEventClick == null ? void 0 : onEventClick(event2),
+        sx: {
+          position: "absolute",
+          top: `${startMinutes + 15}px`,
+          left: 4,
+          right: 4
+        }
+      }
+    );
+  }))));
+};
+
+// src/Components/Calendario/Calendar.tsx
+var Calendar = ({
+  events,
+  onDayClick,
+  onMoreClick,
+  onEventClick,
+  view: initialView = "month",
+  onViewChange,
+  toolbar
+}) => {
+  const [view, setView] = (0, import_react28.useState)(initialView);
+  const [currentDate, setCurrentDate] = (0, import_react28.useState)((0, import_dayjs7.default)());
+  const handleViewChange = (newView) => {
+    setView(newView);
+    onViewChange == null ? void 0 : onViewChange(newView);
+  };
+  const handleNavigate = (action) => {
+    let newDate = currentDate;
+    const unit = view === "month" ? "month" : "day";
+    if (action === "PREV") newDate = currentDate.subtract(1, unit);
+    else if (action === "NEXT") newDate = currentDate.add(1, unit);
+    else if (action === "TODAY") newDate = (0, import_dayjs7.default)();
+    setCurrentDate(newDate);
+  };
+  return /* @__PURE__ */ import_react28.default.createElement(import_material22.Box, null, /* @__PURE__ */ import_react28.default.createElement(
+    CalendarToolbar,
+    {
+      labelDate: currentDate,
+      view,
+      onView: handleViewChange,
+      onNavigate: handleNavigate
+    },
+    toolbar
+  ), view === "month" && /* @__PURE__ */ import_react28.default.createElement(
+    MonthView,
+    {
+      events,
+      onDayClick,
+      onMoreClick,
+      onEventClick,
+      currentDate
+    }
+  ), view === "week" && /* @__PURE__ */ import_react28.default.createElement(
+    WeekView,
+    {
+      events,
+      currentDate,
+      onDayClick,
+      onMoreClick,
+      onEventClick
+    }
+  ), view === "day" && /* @__PURE__ */ import_react28.default.createElement(
+    DayView,
+    {
+      events,
+      currentDate,
+      onEventClick
+    }
+  ));
+};
+
 // src/Theme/index.ts
 var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react23 = __toESM(require("react"), 1);
-var import_icons_material10 = require("@mui/icons-material");
+var import_react29 = __toESM(require("react"), 1);
+var import_icons_material11 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
     styleOverrides: {
@@ -3303,10 +3860,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: import_react23.default.createElement(import_icons_material10.CheckCircleRounded),
-        error: import_react23.default.createElement(import_icons_material10.ErrorRounded),
-        warning: import_react23.default.createElement(import_icons_material10.WarningRounded),
-        info: import_react23.default.createElement(import_icons_material10.InfoRounded)
+        success: import_react29.default.createElement(import_icons_material11.CheckCircleRounded),
+        error: import_react29.default.createElement(import_icons_material11.ErrorRounded),
+        warning: import_react29.default.createElement(import_icons_material11.WarningRounded),
+        info: import_react29.default.createElement(import_icons_material11.InfoRounded)
       }
     },
     variants: [
@@ -3624,7 +4181,7 @@ var components = {
     styleOverrides: {
       root: {
         "&.MuiAutocomplete-root .MuiOutlinedInput-root": {
-          padding: "6px 14px 6px 10px"
+          padding: "6px 14px 6px 10px !important"
         },
         "& .MuiAutocomplete-endAdornment": {
           top: "calc(50% - 12px)",
@@ -4348,6 +4905,7 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
 0 && (module.exports = {
   ADCSincoTheme,
   AdproSincoTheme,
+  Calendar,
   EmptyState,
   FooterAction,
   MultiSelect,