componentes-sinco 1.0.6 → 1.0.7

package/dist/index.d.cts

@@ -3,7 +3,7 @@ import React__default, { ComponentType, ReactNode } from 'react';
 import * as Muicon from '@mui/icons-material';
 import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import * as _mui_material from '@mui/material';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import * as _mui_material_styles from '@mui/material/styles';
 
 type ReplyPalette$1 = "primary" | "secondary" | "warning" | "info" | "success" | "error" | any;
@@ -457,8 +457,28 @@ interface SCTabsProps {
 }
 declare const SCTabs: ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }: SCTabsProps) => React__default.JSX.Element;
 
+type CalendarView = 'month' | 'week' | 'day';
+interface CalendarEvent {
+    id: string;
+    title: string;
+    start: dayjs.Dayjs;
+    end: dayjs.Dayjs;
+    state: 'EnProgreso' | 'Finalizado' | 'Vencida' | 'Asignada';
+}
+interface CalendarProps {
+    events: CalendarEvent[];
+    view?: CalendarView;
+    toolbar?: React.ReactNode;
+    onDayClick?: (date: dayjs.Dayjs) => void;
+    onMoreClick?: (date: dayjs.Dayjs, events: CalendarEvent[]) => void;
+    onViewChange?: (view: CalendarView) => void;
+    onEventClick?: (event: CalendarEvent, date?: dayjs.Dayjs) => void;
+}
+
+declare const Calendar: React__default.FC<CalendarProps>;
+
 declare const SincoTheme: _mui_material_styles.Theme;
 declare let AdproSincoTheme: _mui_material_styles.Theme;
 declare let ADCSincoTheme: _mui_material_styles.Theme;
 
-export { ADCSincoTheme, AdproSincoTheme, EmptyState, type EmptyStateProperties, type EmptyStateSize, type EmptyStateStates, FooterAction, type FooterActionsProperties, type ModalProps, type ModalStates, MultiSelect, type MultiSelectProps, PageHeader, type PageheaderProperties, type ReplyPalette$1 as ReplyPalette, type ReplyTextPalette, type ReplyVariants, type RepplyButtonVariants, SCAutocomplete, SCCalendarSwipeable, SCDataGrid, SCDataGridInitial, SCDateRange, SCDialog, SCDrawer, SCMenu, SCModal, SCSelect, SCTabs, SCTextArea, type SCTextAreaProps, SCTextField, type SCTextFieldProps, SCToastNotification, SincoTheme, type ToastBaseProperties, ToastProgress, type ToastType, capitalize, getButtonColor, getIcon, getIconComponent, getIconMultiSelect, getModalColor, modalStateConfig, useFilteredItems, useMultiSelectHandlers, useProgress };
+export { ADCSincoTheme, AdproSincoTheme, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, EmptyState, type EmptyStateProperties, type EmptyStateSize, type EmptyStateStates, FooterAction, type FooterActionsProperties, type ModalProps, type ModalStates, MultiSelect, type MultiSelectProps, PageHeader, type PageheaderProperties, type ReplyPalette$1 as ReplyPalette, type ReplyTextPalette, type ReplyVariants, type RepplyButtonVariants, SCAutocomplete, SCCalendarSwipeable, SCDataGrid, SCDataGridInitial, SCDateRange, SCDialog, SCDrawer, SCMenu, SCModal, SCSelect, SCTabs, SCTextArea, type SCTextAreaProps, SCTextField, type SCTextFieldProps, SCToastNotification, SincoTheme, type ToastBaseProperties, ToastProgress, type ToastType, capitalize, getButtonColor, getIcon, getIconComponent, getIconMultiSelect, getModalColor, modalStateConfig, useFilteredItems, useMultiSelectHandlers, useProgress };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import React__default, { ComponentType, ReactNode } from 'react';
 import * as Muicon from '@mui/icons-material';
 import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import * as _mui_material from '@mui/material';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import * as _mui_material_styles from '@mui/material/styles';
 
 type ReplyPalette$1 = "primary" | "secondary" | "warning" | "info" | "success" | "error" | any;
@@ -457,8 +457,28 @@ interface SCTabsProps {
 }
 declare const SCTabs: ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }: SCTabsProps) => React__default.JSX.Element;
 
+type CalendarView = 'month' | 'week' | 'day';
+interface CalendarEvent {
+    id: string;
+    title: string;
+    start: dayjs.Dayjs;
+    end: dayjs.Dayjs;
+    state: 'EnProgreso' | 'Finalizado' | 'Vencida' | 'Asignada';
+}
+interface CalendarProps {
+    events: CalendarEvent[];
+    view?: CalendarView;
+    toolbar?: React.ReactNode;
+    onDayClick?: (date: dayjs.Dayjs) => void;
+    onMoreClick?: (date: dayjs.Dayjs, events: CalendarEvent[]) => void;
+    onViewChange?: (view: CalendarView) => void;
+    onEventClick?: (event: CalendarEvent, date?: dayjs.Dayjs) => void;
+}
+
+declare const Calendar: React__default.FC<CalendarProps>;
+
 declare const SincoTheme: _mui_material_styles.Theme;
 declare let AdproSincoTheme: _mui_material_styles.Theme;
 declare let ADCSincoTheme: _mui_material_styles.Theme;
 
-export { ADCSincoTheme, AdproSincoTheme, EmptyState, type EmptyStateProperties, type EmptyStateSize, type EmptyStateStates, FooterAction, type FooterActionsProperties, type ModalProps, type ModalStates, MultiSelect, type MultiSelectProps, PageHeader, type PageheaderProperties, type ReplyPalette$1 as ReplyPalette, type ReplyTextPalette, type ReplyVariants, type RepplyButtonVariants, SCAutocomplete, SCCalendarSwipeable, SCDataGrid, SCDataGridInitial, SCDateRange, SCDialog, SCDrawer, SCMenu, SCModal, SCSelect, SCTabs, SCTextArea, type SCTextAreaProps, SCTextField, type SCTextFieldProps, SCToastNotification, SincoTheme, type ToastBaseProperties, ToastProgress, type ToastType, capitalize, getButtonColor, getIcon, getIconComponent, getIconMultiSelect, getModalColor, modalStateConfig, useFilteredItems, useMultiSelectHandlers, useProgress };
+export { ADCSincoTheme, AdproSincoTheme, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, EmptyState, type EmptyStateProperties, type EmptyStateSize, type EmptyStateStates, FooterAction, type FooterActionsProperties, type ModalProps, type ModalStates, MultiSelect, type MultiSelectProps, PageHeader, type PageheaderProperties, type ReplyPalette$1 as ReplyPalette, type ReplyTextPalette, type ReplyVariants, type RepplyButtonVariants, SCAutocomplete, SCCalendarSwipeable, SCDataGrid, SCDataGridInitial, SCDateRange, SCDialog, SCDrawer, SCMenu, SCModal, SCSelect, SCTabs, SCTextArea, type SCTextAreaProps, SCTextField, type SCTextFieldProps, SCToastNotification, SincoTheme, type ToastBaseProperties, ToastProgress, type ToastType, capitalize, getButtonColor, getIcon, getIconComponent, getIconMultiSelect, getModalColor, modalStateConfig, useFilteredItems, useMultiSelectHandlers, useProgress };

package/dist/index.js

@@ -2542,11 +2542,562 @@ var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colo
   )))) : /* @__PURE__ */ React18.createElement(Box13, { sx: { height: "200px" } }, toast && /* @__PURE__ */ React18.createElement(SCToastNotification, __spreadValues({ "data-testid": "error-tab-message" }, toast))));
 };
 
+// src/Components/Calendario/Calendar.tsx
+import React24, { useState as useState12 } from "react";
+import { Box as Box19 } from "@mui/material";
+import dayjs7 from "dayjs";
+
+// src/Components/Calendario/CalendarToolbar.tsx
+import React19, { useState as useState11 } from "react";
+import { ChevronLeft, ChevronRight, KeyboardArrowDown as KeyboardArrowDown2, LightModeOutlined } from "@mui/icons-material";
+import { Box as Box14, Chip as Chip3, IconButton as IconButton9, Menu, MenuItem as MenuItem5, Stack as Stack8, Typography as Typography16 } from "@mui/material";
+import dayjs2 from "dayjs";
+import "dayjs/locale/es";
+dayjs2.locale("es");
+var CalendarToolbar = ({
+  labelDate,
+  view,
+  onView,
+  onNavigate,
+  children
+}) => {
+  const [anchorEl, setAnchorEl] = useState11(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__ */ React19.createElement(Stack8, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, px: 1, py: 0.5 }, /* @__PURE__ */ React19.createElement(Box14, null, /* @__PURE__ */ React19.createElement(
+    Chip3,
+    {
+      label: "Hoy",
+      icon: /* @__PURE__ */ React19.createElement(LightModeOutlined, { fontSize: "small" }),
+      color: "primary",
+      onClick: () => onNavigate("TODAY")
+    }
+  )), /* @__PURE__ */ React19.createElement(Stack8, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React19.createElement(IconButton9, { "aria-label": "Anterior", onClick: () => onNavigate("PREV"), size: "small", color: "primary" }, /* @__PURE__ */ React19.createElement(ChevronLeft, { fontSize: "small" })), /* @__PURE__ */ React19.createElement(IconButton9, { "aria-label": "Siguiente", onClick: () => onNavigate("NEXT"), size: "small", color: "primary" }, /* @__PURE__ */ React19.createElement(ChevronRight, { fontSize: "small" })), /* @__PURE__ */ React19.createElement(Typography16, { variant: "h6", color: "primary", "data-testid": "currentDate" }, getFormattedDate()), /* @__PURE__ */ React19.createElement(IconButton9, { onClick: handleMenuOpen, size: "small", color: "primary", "aria-label": "Cambiar vista" }, /* @__PURE__ */ React19.createElement(KeyboardArrowDown2, { fontSize: "small" })), /* @__PURE__ */ React19.createElement(
+    Menu,
+    {
+      anchorEl,
+      open,
+      onClose: handleMenuClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      transformOrigin: { vertical: "top", horizontal: "center" }
+    },
+    /* @__PURE__ */ React19.createElement(MenuItem5, { onClick: () => handleViewChange("month") }, "Mes"),
+    /* @__PURE__ */ React19.createElement(MenuItem5, { onClick: () => handleViewChange("week") }, "Semana"),
+    /* @__PURE__ */ React19.createElement(MenuItem5, { onClick: () => handleViewChange("day") }, "D\xEDa")
+  )), children ? /* @__PURE__ */ React19.createElement(Box14, null, children) : /* @__PURE__ */ React19.createElement(Box14, { width: "24px" }), " ");
+};
+
+// src/Components/Calendario/Views/MonthView.tsx
+import React21 from "react";
+import { Box as Box16, Typography as Typography18, IconButton as IconButton10, Paper as Paper2, Tooltip as Tooltip4, Stack as Stack10, Divider as Divider6 } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import dayjs4 from "dayjs";
+import localeData from "dayjs/plugin/localeData";
+import isBetween from "dayjs/plugin/isBetween";
+
+// src/Components/Calendario/Utils.tsx
+import dayjs3 from "dayjs";
+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(dayjs3(), "day");
+};
+var stateColors = {
+  Asignada: "warning.main",
+  Finalizado: "primary.main",
+  Vencida: "error.main",
+  EnProgreso: "success.main"
+};
+
+// src/Components/Calendario/Event.tsx
+import React20 from "react";
+import { Box as Box15, Stack as Stack9, Typography as Typography17, Divider as Divider5 } from "@mui/material";
+var CalendarEventCard = ({ event: event2, color, sx, onClick }) => {
+  return /* @__PURE__ */ React20.createElement(
+    Stack9,
+    {
+      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__ */ React20.createElement(
+      Divider5,
+      {
+        orientation: "vertical",
+        flexItem: true,
+        sx: {
+          width: "2px",
+          backgroundColor: color != null ? color : "primary.main",
+          borderRadius: "2px"
+        }
+      }
+    ),
+    /* @__PURE__ */ React20.createElement(
+      Box15,
+      {
+        px: 1,
+        py: 0.5,
+        flex: "1",
+        minWidth: 0,
+        display: "flex",
+        alignItems: "center"
+      },
+      /* @__PURE__ */ React20.createElement(
+        Typography17,
+        {
+          color: "text.primary",
+          variant: "caption",
+          noWrap: true,
+          sx: {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        },
+        capitalize(event2.title)
+      )
+    )
+  );
+};
+
+// src/Components/Calendario/Views/MonthView.tsx
+dayjs4.extend(localeData);
+dayjs4.extend(isBetween);
+var MonthView = ({ events, onDayClick, onMoreClick, currentDate, onEventClick }) => {
+  const days = getMonthDays(currentDate);
+  const weekDays = Array.from({ length: 7 }, (_, i) => dayjs4().day(i));
+  const [openDrawer, setOpenDrawer] = React21.useState(false);
+  const [selectedDay, setSelectedDay] = React21.useState(null);
+  const [selectedEvents, setSelectedEvents] = React21.useState([]);
+  return /* @__PURE__ */ React21.createElement(Box16, { width: "100%", sx: { overflowX: "auto" } }, /* @__PURE__ */ React21.createElement(Box16, { minWidth: "1050px" }, /* @__PURE__ */ React21.createElement(Box16, { display: "grid", gridTemplateColumns: "repeat(7, minmax(150px, 1fr))", gap: 0.5, mb: 1 }, weekDays.map((day) => /* @__PURE__ */ React21.createElement(Box16, { key: day.day(), textAlign: "center", py: 0.5 }, /* @__PURE__ */ React21.createElement(Typography18, { variant: "caption", color: "text.secondary" }, day.format("dddd"))))), /* @__PURE__ */ React21.createElement(Box16, { 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__ */ React21.createElement(
+      Paper2,
+      {
+        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__ */ React21.createElement(Box16, { p: 1, flexShrink: 0 }, /* @__PURE__ */ React21.createElement(Box16, { display: "flex", alignItems: "center", justifyContent: "flex-start" }, /* @__PURE__ */ React21.createElement(
+        Box16,
+        {
+          sx: {
+            width: 24,
+            height: 24,
+            borderRadius: "50%",
+            backgroundColor: isToday(day) ? "primary.main" : void 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ React21.createElement(
+          Typography18,
+          {
+            variant: "body2",
+            sx: { color: isToday(day) ? "white" : "text.secondary" }
+          },
+          day.date()
+        )
+      ), dayEvents.length > 2 && /* @__PURE__ */ React21.createElement(Tooltip4, { title: "M\xE1s eventos" }, /* @__PURE__ */ React21.createElement(
+        IconButton10,
+        {
+          color: "primary",
+          size: "small",
+          onClick: (e) => {
+            e.stopPropagation();
+            onMoreClick == null ? void 0 : onMoreClick(day, dayEvents);
+            setSelectedDay(day);
+            setSelectedEvents(dayEvents);
+          }
+        },
+        /* @__PURE__ */ React21.createElement(AddIcon, { fontSize: "small" })
+      )))),
+      /* @__PURE__ */ React21.createElement(Box16, { display: "flex", flexDirection: "column", gap: 0.5, p: 1, pt: 0, overflow: "hidden" }, dayEvents.slice(0, 2).map((event2) => /* @__PURE__ */ React21.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__ */ React21.createElement(Stack10, { justifyContent: "flex-end", px: 1, pb: 0.5, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React21.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__ */ React21.createElement(Box16, { display: "flex", width: "100%", flexDirection: "column", height: "100%", pr: 1.5 }, /* @__PURE__ */ React21.createElement(Typography18, { width: "100%", color: "text.secondary" }, " Proximo evento "), first && /* @__PURE__ */ React21.createElement(Box16, { p: 1, pb: 1, width: "100%" }, /* @__PURE__ */ React21.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__ */ React21.createElement(Divider6, { flexItem: true, sx: { width: "100%" } }), /* @__PURE__ */ React21.createElement(Typography18, { width: "100%", py: 1, color: "text.secondary" }, " Eventos restantes "), /* @__PURE__ */ React21.createElement(
+                Box16,
+                {
+                  width: "100%",
+                  height: "100%",
+                  flex: 1,
+                  overflow: "auto",
+                  p: 1,
+                  pt: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 1.5
+                },
+                rest.map((event2) => /* @__PURE__ */ React21.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
+import React22 from "react";
+import { Box as Box17, Typography as Typography19 } from "@mui/material";
+import dayjs5 from "dayjs";
+import localeData2 from "dayjs/plugin/localeData";
+dayjs5.extend(localeData2);
+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__ */ React22.createElement(Box17, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React22.createElement(Box17, { display: "flex", bgcolor: "background.default" }, /* @__PURE__ */ React22.createElement(Box17, { width: 45, bgcolor: "background.default" }), days.map((day) => /* @__PURE__ */ React22.createElement(
+    Box17,
+    {
+      key: day.toString(),
+      height: 40,
+      flex: 1,
+      pl: 0.5,
+      textAlign: "center",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "flex-start"
+    },
+    /* @__PURE__ */ React22.createElement(Typography19, { variant: "caption", color: "text.secondary" }, day.format("dddd"))
+  ))), /* @__PURE__ */ React22.createElement(Box17, { display: "flex", flex: 1 }, /* @__PURE__ */ React22.createElement(Box17, { width: 45, bgcolor: "background.default" }, hours2.map((h) => /* @__PURE__ */ React22.createElement(
+    Box17,
+    {
+      key: h,
+      height: 60,
+      textAlign: "right",
+      pr: 1,
+      borderTop: "1px solid",
+      borderColor: "divider"
+    },
+    /* @__PURE__ */ React22.createElement(Typography19, { variant: "caption", color: "text.secondary" }, dayjs5().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__ */ React22.createElement(
+      Box17,
+      {
+        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__ */ React22.createElement(
+          Box17,
+          {
+            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__ */ React22.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
+import React23 from "react";
+import { Box as Box18, Typography as Typography20 } from "@mui/material";
+import dayjs6 from "dayjs";
+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__ */ React23.createElement(Box18, { display: "flex", flexDirection: "column", height: "100%" }, /* @__PURE__ */ React23.createElement(Box18, { display: "flex", borderBottom: "1px solid", borderColor: "primary.main", bgcolor: "background.paper" }, /* @__PURE__ */ React23.createElement(Box18, { width: 47, bgcolor: "background.default", borderBottom: "1px solid", borderColor: "transparent" }), /* @__PURE__ */ React23.createElement(
+    Box18,
+    {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      textAlign: "start",
+      gap: 0.5,
+      py: 1,
+      bgcolor: "primary.50"
+    },
+    /* @__PURE__ */ React23.createElement(Typography20, { variant: "h6", color: "text.secondary" }, currentDate.format("D")),
+    /* @__PURE__ */ React23.createElement(Typography20, { variant: "caption", color: "text.secondary" }, currentDate.format("dddd"))
+  )), /* @__PURE__ */ React23.createElement(Box18, { display: "flex", flex: 1 }, /* @__PURE__ */ React23.createElement(Box18, { width: 47, bgcolor: "background.default" }, hours.map((h) => /* @__PURE__ */ React23.createElement(
+    Box18,
+    {
+      key: h,
+      height: 60,
+      textAlign: "right",
+      pr: 1,
+      borderTop: "1px solid",
+      borderRight: "1px solid",
+      borderColor: "divider"
+    },
+    /* @__PURE__ */ React23.createElement(Typography20, { variant: "caption", color: "text.secondary" }, dayjs6().hour(h).format("h A"))
+  ))), /* @__PURE__ */ React23.createElement(Box18, { flex: 1, position: "relative" }, hours.map((hourIdx) => {
+    const borderType = getCellBorderType(hourIdx, dayEvents);
+    return /* @__PURE__ */ React23.createElement(
+      Box18,
+      {
+        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__ */ React23.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] = useState12(initialView);
+  const [currentDate, setCurrentDate] = useState12(dayjs7());
+  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 = dayjs7();
+    setCurrentDate(newDate);
+  };
+  return /* @__PURE__ */ React24.createElement(Box19, null, /* @__PURE__ */ React24.createElement(
+    CalendarToolbar,
+    {
+      labelDate: currentDate,
+      view,
+      onView: handleViewChange,
+      onNavigate: handleNavigate
+    },
+    toolbar
+  ), view === "month" && /* @__PURE__ */ React24.createElement(
+    MonthView,
+    {
+      events,
+      onDayClick,
+      onMoreClick,
+      onEventClick,
+      currentDate
+    }
+  ), view === "week" && /* @__PURE__ */ React24.createElement(
+    WeekView,
+    {
+      events,
+      currentDate,
+      onDayClick,
+      onMoreClick,
+      onEventClick
+    }
+  ), view === "day" && /* @__PURE__ */ React24.createElement(
+    DayView,
+    {
+      events,
+      currentDate,
+      onEventClick
+    }
+  ));
+};
+
 // src/Theme/index.ts
 import { createTheme } from "@mui/material/styles";
 
 // src/Theme/components.ts
-import React19 from "react";
+import React25 from "react";
 import {
   InfoRounded as InfoRounded2,
   CheckCircleRounded as CheckCircleRounded2,
@@ -3249,10 +3800,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: React19.createElement(CheckCircleRounded2),
-        error: React19.createElement(ErrorRounded2),
-        warning: React19.createElement(WarningRounded2),
-        info: React19.createElement(InfoRounded2)
+        success: React25.createElement(CheckCircleRounded2),
+        error: React25.createElement(ErrorRounded2),
+        warning: React25.createElement(WarningRounded2),
+        info: React25.createElement(InfoRounded2)
       }
     },
     variants: [
@@ -4293,6 +4844,7 @@ var ADCSincoTheme = createTheme(__spreadValues({}, ADCTheme));
 export {
   ADCSincoTheme,
   AdproSincoTheme,
+  Calendar,
   EmptyState,
   FooterAction,
   MultiSelect,