lizaui 9.0.25 → 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);
 }
@@ -415,18 +414,18 @@ const CalendarStyle = dt.div`
 		width: ${({ widthcalendar }) => `${widthcalendar}px`};
 	} */
 
-        .react-calendar--doubleView{
-            --cal-cell-size: 34px !important;
-            width: 512px !important;
-        }
+	.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__weekdays {
+		gap: 0px;
+	}
 
-     .react-calendar--doubleView  .react-calendar__month-view__days {
-         gap: 0px;
-     }
+	.react-calendar--doubleView .react-calendar__month-view__days {
+		gap: 0px;
+	}
 
 	.react-calendar__navigation {
 		height: 40px; /* Más compacto */
@@ -531,6 +530,11 @@ const CalendarStyle = dt.div`
 		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;
@@ -582,16 +586,16 @@ const CalendarStyle = dt.div`
 		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);
+		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;
-    }
+	.react-calendar__year-view__months__month {
+		border-radius: 8px !important;
+	}
 
 	${({ color }) => {
   switch (color) {
@@ -715,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);
@@ -793,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);
@@ -834,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,
                 {
@@ -852,11 +966,7 @@ const CalendarPicker = ({
                   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" })
-              ] })
+              )
             ] })
           ]
         }