lizaui 9.0.24 → 9.0.26

package/dist/calendar/index.es.js

@@ -14,7 +14,6 @@ import { twMerge } from "tailwind-merge";
 import { v4 } from "uuid";
 import { L as LabelError } from "../chunks/label-error-BTCuInp7.js";
 import { c as cn } from "../chunks/utils-H80jjgLf.js";
-import { B as Button } from "../chunks/button-B0fpJrMg.js";
 function FaArrowLeft(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" }, "child": [] }] })(props);
 }
@@ -275,7 +274,7 @@ const CalendarStyle = 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);
@@ -391,31 +390,50 @@ const CalendarStyle = dt.div`
 
 	/*  =========================== estilos para react-calendar ================== */
 	.react-calendar {
-		${({ showdoubleview, widthcalendar }) => {
+		${({ showdoubleview }) => {
   if (showdoubleview === "true") {
     return lt``;
   } else {
     return 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 {
@@ -424,18 +442,34 @@ const CalendarStyle = 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;
 	}
 
@@ -451,7 +485,12 @@ const CalendarStyle = 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;
@@ -465,7 +504,7 @@ const CalendarStyle = 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);
@@ -476,11 +515,57 @@ const CalendarStyle = 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;
+	}
+
+	.react-calendar__tile--hasActive {
+		background: var(--color-primary-300);
+		border-radius: 50% !important;
+	}
+
+	/* 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" && 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);
@@ -499,6 +584,17 @@ const CalendarStyle = 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 }) => {
@@ -510,19 +606,19 @@ const CalendarStyle = 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, */
@@ -538,7 +634,7 @@ const CalendarStyle = 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;
@@ -554,7 +650,7 @@ const CalendarStyle = 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;
@@ -623,15 +719,21 @@ const CalendarStyle = dt.div`
 }}
 
 	.react-calendar--doubleView .react-calendar__tile--active {
-		background-color: var(--color-default-100);
-		color: var(--color-default-900);
+		background-color: var(--color-primary-50);
+		color: var(--color-primary);
 		border-radius: 0px;
+        position: relative;
 	}
 
+
 	.react-calendar--selectRange .react-calendar__tile--hover {
 		background-color: var(--color-default-100);
 	}
 
+    .react-calendar--selectRange .react-calendar__tile--hover.react-calendar__month-view__days__day{
+        /* border-radius: 0px !important; */
+    }
+
 	.react-calendar__tile--active.react-calendar__month-view__days__day.react-calendar__month-view__days__day--neighboringMonth {
 		background-color: var(--color-content1-default);
 		color: var(--color-default-300);
@@ -701,6 +803,81 @@ const CalendarPicker = ({
       handleChange(date);
     }
   };
+  const startOfDay = useCallback((d) => new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0), []);
+  const addDays = useCallback((d, n) => startOfDay(new Date(d.getFullYear(), d.getMonth(), d.getDate() + n)), [startOfDay]);
+  const startOfMonth = useCallback((d) => new Date(d.getFullYear(), d.getMonth(), 1, 0, 0, 0, 0), []);
+  const endOfMonth = useCallback((d) => new Date(d.getFullYear(), d.getMonth() + 1, 0, 23, 59, 59, 999), []);
+  const isSameDay = (a, b) => {
+    if (!a || !b) return false;
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  };
+  const isSameRange = (range, target) => {
+    if (!Array.isArray(range) || !Array.isArray(target)) return false;
+    const [r0, r1] = range;
+    const [t0, t1] = target;
+    return isSameDay(r0, t0) && isSameDay(r1, t1);
+  };
+  const presets = useMemo(() => {
+    const today = startOfDay(/* @__PURE__ */ new Date());
+    if (type === "date-picker") {
+      return [
+        { key: "today", label: "Hoy", getValue: () => today },
+        { key: "tomorrow", label: "Mañana", getValue: () => addDays(today, 1) },
+        { key: "in7", label: "+7 días", getValue: () => addDays(today, 7) },
+        { key: "in30", label: "+30 días", getValue: () => addDays(today, 30) },
+        { key: "clear", label: "Limpiar", action: () => onChange(null), separator: true }
+      ];
+    } else {
+      const last7Start = addDays(today, -6);
+      const next7End = addDays(today, 6);
+      const thisMonthStart = startOfMonth(today);
+      const thisMonthEnd = endOfMonth(today);
+      const lastMonthRef = addDays(thisMonthStart, -1);
+      const lastMonthStart = startOfMonth(lastMonthRef);
+      const lastMonthEnd = endOfMonth(lastMonthRef);
+      return [
+        { key: "today", label: "Hoy", getValue: () => [today, today] },
+        { key: "last7", label: "Últimos 7 días", getValue: () => [last7Start, today] },
+        { key: "next7", label: "Próx. 7 días", getValue: () => [today, next7End] },
+        { key: "thisMonth", label: "Este mes", getValue: () => [thisMonthStart, thisMonthEnd] },
+        {
+          key: "nextMonth",
+          label: "Próximo mes",
+          getValue: () => {
+            const nextMonthRef = addDays(thisMonthEnd, 1);
+            const nextMonthStart = startOfMonth(nextMonthRef);
+            const nextMonthEnd = endOfMonth(nextMonthRef);
+            return [nextMonthStart, nextMonthEnd];
+          }
+        },
+        { key: "lastMonth", label: "Mes pasado", getValue: () => [lastMonthStart, lastMonthEnd] }
+        // { key: "clear", label: "Limpiar", action: () => onChange(null), separator: true },
+      ];
+    }
+  }, [type, onChange, addDays, startOfDay, startOfMonth, endOfMonth]);
+  const isPresetActive = (preset) => {
+    if (preset.getValue) {
+      const pv = preset.getValue();
+      if (type === "date-picker") {
+        return !Array.isArray(value) && !Array.isArray(pv) && isSameDay(value, pv);
+      } else {
+        return Array.isArray(value) && Array.isArray(pv) && isSameRange(value, pv);
+      }
+    }
+    return false;
+  };
+  const handlePresetClick = (preset) => {
+    if (preset.action) {
+      preset.action();
+      setShow(false);
+      return;
+    }
+    if (preset.getValue) {
+      const v = preset.getValue();
+      onChange(v);
+      setShow(false);
+    }
+  };
   const handleCloseCalendar = () => {
     if (disabled) return;
     setShow(false);
@@ -728,6 +905,7 @@ const CalendarPicker = ({
       containerStyle: {
         zIndex: "100"
       },
+      align: "start",
       content: /* @__PURE__ */ jsxs(
         CalendarStyle,
         {
@@ -741,7 +919,36 @@ const CalendarPicker = ({
               /*  <Loading size="sm" color="secondary" /> */
               /* @__PURE__ */ jsx("p", { children: "loading" })
             ) : null,
-            /* @__PURE__ */ jsxs("div", { className: "w-full relative flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "w-full relative flex gap-2", children: [
+              showActionButtons && /* @__PURE__ */ jsxs("div", { className: "w-[150px] border-r border-default-200 px-3 py-3 flex flex-col gap-1 overflow-y-auto max-h-[340px]", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-default-400 mb-1 select-none uppercase tracking-wide", children: "Atajos" }),
+                presets.map((p) => {
+                  const active = isPresetActive(p);
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handlePresetClick(p),
+                      className: twMerge(
+                        "text-left rounded-md px-2 py-1.5 text-sm w-full cursor-pointer transition-colors",
+                        active ? "bg-default-200/70 dark:bg-default-100 font-medium" : "bg-content1 hover:bg-default-100"
+                      ),
+                      "data-active": active || void 0,
+                      children: p.label
+                    },
+                    p.key
+                  );
+                }),
+                /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t border-default-200 flex flex-col gap-1", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleChangeToDay,
+                    className: "text-left rounded-md px-2 py-1.5 text-sm w-full cursor-pointer bg-content1 hover:bg-default-100",
+                    children: "Ir a hoy (Cerrar)"
+                  }
+                ) })
+              ] }),
               /* @__PURE__ */ jsx(
                 Calendar,
                 {
@@ -755,15 +962,11 @@ const CalendarPicker = ({
                   tileDisabled,
                   selectRange: type === "date-range-picker",
                   returnValue: type === "date-range-picker" ? "range" : "start",
-                  prevLabel: /* @__PURE__ */ jsx(FaArrowLeft, { className: "w-4 h-5" }),
-                  nextLabel: /* @__PURE__ */ jsx(FaArrowRight, { className: "w-4 h-5" }),
+                  prevLabel: /* @__PURE__ */ jsx(FaArrowLeft, { className: "w-4 h-4 text-default-400" }),
+                  nextLabel: /* @__PURE__ */ jsx(FaArrowRight, { className: "w-4 h-4 text-default-400" }),
                   tileContent
                 }
-              ),
-              showActionButtons && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-x-4 p-3 w-full", children: [
-                /* @__PURE__ */ jsx(Button, { onClick: handleChangeToDay, color, className: "flex-1", children: "Hoy" }),
-                /* @__PURE__ */ jsx(Button, { color: "default", variant: "bordered", className: "flex-1", onClick: () => setShow(false), children: "Cerrar" })
-              ] })
+              )
             ] })
           ]
         }