lizaui 9.0.24 → 9.0.25

package/dist/calendar/index.cjs.js

@@ -277,7 +277,7 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 
 	.react-date-picker__wrapper,
 	.react-daterange-picker__wrapper {
-        min-height: var(--input-default);
+		min-height: var(--input-default);
 		padding-right: 8px;
 		padding-left: 8px;
 		border: 1px solid var(--input);
@@ -393,31 +393,50 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 
 	/*  =========================== estilos para react-calendar ================== */
 	.react-calendar {
-		${({ showdoubleview, widthcalendar }) => {
+		${({ showdoubleview }) => {
   if (showdoubleview === "true") {
     return styledComponents_browser_esm.lt``;
   } else {
     return styledComponents_browser_esm.lt`
-                    width: ${`${widthcalendar}px`};
-                `;
+					/* Forzamos un layout compacto de 256px para vista simple */
+					width: 256px;
+					min-width: 256px;
+				`;
   }
 }}
 		border: none;
-		padding: 12px;
+		padding: 8px; /* Compactar padding sin cambiar colores ni fuentes */
 		font-family: var(--font-family-base);
-		min-width: 300px;
 		border-radius: calc(var(--radius) - 2px);
 		background-color: var(--color-content1-default);
+		/* Variable para tamaño de celda compacto */
+		--cal-cell-size: 32px;
 	}
 
 	/* .react-calendar--doubleView {
 		width: ${({ widthcalendar }) => `${widthcalendar}px`};
 	} */
 
+        .react-calendar--doubleView{
+            --cal-cell-size: 34px !important;
+            width: 512px !important;
+        }
+
+     .react-calendar--doubleView .react-calendar__month-view__weekdays{
+        gap: 0px;
+     }
+
+     .react-calendar--doubleView  .react-calendar__month-view__days {
+         gap: 0px;
+     }
+
 	.react-calendar__navigation {
-		height: 44px;
-		margin-bottom: 6px;
-		gap: 2px;
+		height: 40px; /* Más compacto */
+		margin-bottom: 4px;
+		gap: 4px;
+		/* Alinear y centrar */
+		display: flex;
+		align-items: center;
 	}
 	.react-calendar__navigation__prev2-button,
 	.react-calendar__navigation__next2-button {
@@ -426,18 +445,34 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 
 	.react-calendar__navigation__next-button,
 	.react-calendar__navigation__prev-button {
-		font-size: 22px;
+		font-size: 22px; /* Conserva tamaño del icono */
 		color: var(--color-default-900);
+		width: var(--cal-cell-size);
+		height: var(--cal-cell-size);
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
 	}
 
 	.react-calendar__navigation__label {
-		border-radius: 22px;
+		border-radius: 8px;
+		flex: 1;
+		height: var(--cal-cell-size);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 4px;
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--color-default-900);
 	}
 
 	.react-calendar__navigation__label span {
 		text-transform: capitalize;
-		color: var(--color-default-900);
-		font-weight: bold;
+		color: var(--color-default-500);
+		font-weight: 500;
 		font-size: 14px;
 	}
 
@@ -453,7 +488,12 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 	.react-calendar__month-view__weekdays__weekday {
 		text-transform: capitalize;
 		font-weight: 500;
-		color: var(--color-gray-500);
+		color: var(--color-default-400);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: var(--cal-cell-size);
+		width: var(--cal-cell-size);
 	}
 	.react-calendar__month-view__weekdays__weekday abbr {
 		text-decoration: none;
@@ -467,7 +507,7 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 		font-weight: bold;
 	}
 	.react-calendar__month-view__days__day--weekend {
-		color: var(--color-red-500);
+		color: var(--color-danger-default);
 	}
 	.react-calendar__month-view__days__day--neighboringMonth {
 		color: var(--color-gray-300);
@@ -478,11 +518,52 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 		padding: 2em 0.5em;
 	}
 	.react-calendar__tile {
-		font-size: 14px;
-		line-height: 16px;
+		font-size: 14px; /* No cambiamos tipografía */
+		line-height: 1; /* Permite centrar vertical con flex */
 		font-weight: 500;
+		width: var(--cal-cell-size);
+		height: var(--cal-cell-size);
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 6px; /* Moderno sin afectar colores */
+		flex: 0 0 auto; /* Evitar stretching */
+		/* Transición suave para cambios de fondo, color y radio */
+		transition: background-color 0.18s ease, color 0.18s ease, border-radius 0.25s ease, transform 0.18s ease;
+	}
+
+	/* Suavizar botones navegación (heredan selector button) */
+	.react-calendar__navigation button {
+		transition: background-color 0.18s ease, color 0.18s ease, border-radius 0.25s ease;
+	}
+
+	/* Hover general (sin tocar colores definidos en variantes) añadimos ligera elevación */
+	.react-calendar__tile:enabled:hover,
+	.react-calendar__tile:enabled:focus {
+		transform: translateY(-2px);
+	}
+
+	/* Evitar salto al active manteniendo animación */
+	.react-calendar__tile--active {
+		transition: background-color 0.18s ease, color 0.18s ease, border-radius 0.25s ease;
 	}
 
+	/* Grid compacto SOLO cuando no es doble vista */
+	${({ showdoubleview }) => showdoubleview === "false" && styledComponents_browser_esm.lt`
+			.react-calendar__month-view__weekdays,
+			.react-calendar__month-view__days {
+				display: grid !important;
+				grid-template-columns: repeat(7, var(--cal-cell-size));
+				justify-content: center;
+				gap: 2px; /* Sin gaps para exactitud */
+			}
+
+			.react-calendar__month-view__days {
+				margin-top: 0;
+			}
+		`}
+
 	.react-calendar__tile:disabled {
 		text-decoration: line-through;
 		color: var(--color-gray-300);
@@ -501,8 +582,19 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 		align-items: center;
 		justify-content: center;
 		border-radius: 50%;
+		width: var(--cal-cell-size);
+		height: var(--cal-cell-size);
+        min-width: var(--cal-cell-size);
+        max-width: var(--cal-cell-size);
+        min-height: var(--cal-cell-size);
+        max-height: var(--cal-cell-size);
+        color: hsl(var(--color-default-400) / 1);
 	}
 
+    .react-calendar__year-view__months__month{
+        border-radius: 8px !important;
+    }
+
 	${({ color }) => {
   switch (color) {
     case "primary":
@@ -512,19 +604,19 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 						background-color: var(--color-primary-100);
 
 						color: var(--color-primary-500);
-						border-radius: 8px;
+						border-radius: 50%;
 					}
 
 					.react-calendar .react-calendar__tile--now {
-						border-radius: 8px;
+						border-radius: 50%;
 						background-color: var(--color-primary-100);
 						color: var(--color-primary-500);
 					}
 
 					.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd {
-						background-color: var(--color-primary-400);
+						background-color: var(--color-primary);
 						color: white;
-						border-radius: 8px;
+						border-radius: 50%;
 					}
 
 					/* .react-calendar__tile--hasActive.react-calendar__year-view__months__month, */
@@ -540,7 +632,7 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 					.react-calendar .react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__year-view__months__month,
 					.react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__decade-view__years__year,
 					.react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__century-view__decades__decade {
-						background-color: var(--color-primary-400);
+						background-color: var(--color-primary);
 						color: white;
 
 						border-radius: 8px 0 0 8px;
@@ -556,7 +648,7 @@ const CalendarStyle = styledComponents_browser_esm.dt.div`
 					.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__tile--range.react-calendar__tile--rangeEnd.react-calendar__year-view__months__month,
 					.react-calendar__tile--hasActive.react-calendar__tile--rangeEnd.react-calendar__decade-view__years__year,
 					.react-calendar__tile--hasActive.react-calendar__tile--rangeEnd.react-calendar__century-view__decades__decade {
-						background-color: var(--color-primary-400);
+						background-color: var(--color-primary);
 						color: white;
 
 						border-radius: 0 8px 8px 0;
@@ -730,6 +822,7 @@ const CalendarPicker = ({
       containerStyle: {
         zIndex: "100"
       },
+      align: "start",
       content: /* @__PURE__ */ jsxRuntime.jsxs(
         CalendarStyle,
         {
@@ -757,8 +850,8 @@ const CalendarPicker = ({
                   tileDisabled,
                   selectRange: type === "date-range-picker",
                   returnValue: type === "date-range-picker" ? "range" : "start",
-                  prevLabel: /* @__PURE__ */ jsxRuntime.jsx(FaArrowLeft, { className: "w-4 h-5" }),
-                  nextLabel: /* @__PURE__ */ jsxRuntime.jsx(FaArrowRight, { className: "w-4 h-5" }),
+                  prevLabel: /* @__PURE__ */ jsxRuntime.jsx(FaArrowLeft, { className: "w-4 h-4 text-default-400" }),
+                  nextLabel: /* @__PURE__ */ jsxRuntime.jsx(FaArrowRight, { className: "w-4 h-4 text-default-400" }),
                   tileContent
                 }
               ),