Datepicker working with sigpro updated

src/sigpro-ui.js

@@ -1,3 +1,5 @@
+import { $ } from "./sigpro";
+
 /**
  * SigPro UI - daisyUI v5 & Tailwind v4 Plugin
  * Provides a set of reactive functional components, flow control and i18n.
@@ -29,6 +31,23 @@ export const UI = ($, defaultLang = "es") => {
     return `${base} ${extra || ""}`.trim();
   };
 
+  /** ICONS */
+  const iconShow =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg==";
+  const iconHide =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC";
+  const iconClose =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAESSURBVDiNtdO7LoRBHAXwXyhVG5ddEq9AgbXiskS1dOJS6DyDRKLmFRCvQY9aIi6FnpDsrkuiQCWKmS/5dmW/VXCSyWTm/GfmnPzP8A8oYBc3eEMd59iKXCZW8YpDzCOHHszgAE9Ya3V4EY8YzXhgAndYaib68YxiO4kYRg290Bk3t/GAvbiuII/7uJ7CGG5RxSCGcJrceh2LEkzGwnIctTgnGMdFWtZ7IimFcrykirkmrkvokI7WVn1lcD9wpdFCKfVyYmE2xRdFC4mCY2ykCgaEfp/gTGhbX4pfx1FaQUEIyW/bWBUC1oAFIUgjGYdLWgQpwTJesC/4z6Eb00JG6lhpJzGPHVziEx/CZ9qM3N/iGy1pNoTrsd1eAAAAAElFTkSuQmCC";
+  const iconCalendar =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC";
+  const iconLock =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII=";
+  const iconAbc =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMRJREFUOI3t0bFKAmAUBeAPURD1HQwUTKPJEmzQoSWQcKpVfIuWdvU9WnqNhsYWBx0a2lvLSMKGbvQ7SO564HA497/3cu/92SPFAS5QDN9CftviDhZYYRpNPtH/rzATOsQT6jhCFzmc4DTJL6AX067hPiimuAr95RglzMJ/4AyyUXSMw3iEauhN6C0eUEMFAyzTFZ7xiOvwL3jbsPYSr3hPg3dB/o43SVYY+TnsPPwXztMG5SDr39dGM8kr4RKNDdPtJL4BNXEmsdKC+S4AAAAASUVORK5CYII=";
+  const icon123 =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg==";
+  const iconMail =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC";
   // --- UTILITY FUNCTIONS ---
 
   /** IF */
@@ -51,7 +70,7 @@ export const UI = ($, defaultLang = "es") => {
     const container = $.html("div", { style: "display:contents" }, [marker]);
     const cache = new Map();
 
-    $$(() => {
+    $.effect(() => {
       const items = val(source) || [];
       const newKeys = new Set();
 
@@ -181,54 +200,76 @@ export const UI = ($, defaultLang = "es") => {
   };
 
   /** INPUT */
-ui.Input = (props) => {
-  const { label, tip, $value, $error, isSearch, icon, ...rest } = props;
 
-  // Estado local para alternar visibilidad si es password
-  const isPassword = props.type === "password";
-  const showPassword = $(false);
+  ui.Input = (props) => {
+    const { label, tip, $value, $error, isSearch, icon, type = "text", ...rest } = props;
 
-  const inputEl = $.html("input", {
-    ...rest,
-    // El tipo cambia dinámicamente si es password
-    type: () => (isPassword ? (showPassword() ? "text" : "password") : (props.type || "text")),
-    placeholder: props.placeholder || (isSearch ? tt("search")() : " "),
-    class: joinClass("grow order-2", props.$class || props.class),
-    $value: $value || props.value,
-    oninput: (e) => {
-      if (typeof $value === "function") $value(e.target.value);
-      if (typeof props.oninput === "function") props.oninput(e);
-    },
-    $disabled: () => val(props.$disabled) || val(props.disabled),
-  });
+    const isPassword = type === "password";
+    const visible = $(false);
 
-  return $.html("label", { 
-    class: "input input-bordered floating-label flex items-center gap-2 w-full relative" 
-  }, [
-    // 1. Icono Izquierda (opcional)
-    icon ? $.html("div", { class: "order-1 flex items-center opacity-50 shrink-0" }, icon) : null,
-    
-    // 2. Texto del Label
-    label ? $.html("span", { class: "order-0" }, label) : null,
-    
-    // 3. Input
-    inputEl,
+    const iconsByType = {
+      text: iconAbc,
+      password: iconLock,
+      date: iconCalendar,
+      number: icon123,
+      email: iconMail,
+    };
 
-    // 4. Botón Ojo (Solo si es type="password")
-    isPassword ? $.html("button", {
-      type: "button",
-      class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
-      onclick: (e) => {
-        e.preventDefault();
-        showPassword(!showPassword());
-      }
-    }, () => (showPassword() ? "🙈" : "👁️")) : null,
+    const inputEl = $.html("input", {
+      ...rest,
+      type: () => (isPassword ? (visible() ? "text" : "password") : type),
+      placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
+      class: joinClass("grow order-2 focus:outline-none", props.$class || props.class),
+      $value: $value,
+      oninput: (e) => {
+        $value?.(e.target.value);
+        props.oninput?.(e);
+      },
+      $disabled: () => val(props.$disabled) || val(props.disabled),
+    });
 
-    // 5. Tooltip/Error
-    tip ? $.html("div", { class: "tooltip tooltip-right order-4", "data-tip": tip }, $.html("span", { class: "badge badge-ghost badge-xs" }, "?")) : null,
-    () => (val($error) ? $.html("span", { class: "text-error text-xs absolute -bottom-5 left-0" }, val($error)) : null),
-  ]);
-};
+    const leftIcon = icon ? icon : iconsByType[type] ? $.html("img", { src: iconsByType[type], class: "w-5 h-5 opacity-50", alt: type }) : null;
+
+    return $.html(
+      "label",
+      {
+        class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val($error) ? "input-error" : ""),
+      },
+      [
+        leftIcon ? $.html("div", { class: "order-1 shrink-0" }, leftIcon) : null,
+        label ? $.html("span", { class: "text-base-content/60 order-0" }, label) : null,
+        inputEl,
+        isPassword
+          ? $.html(
+              "button",
+              {
+                type: "button",
+                class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
+                onclick: (e) => {
+                  e.preventDefault();
+                  visible(!visible());
+                },
+              },
+              () =>
+                $.html("img", {
+                  class: "w-5 h-5",
+                  src: visible() ? iconShow : iconHide,
+                }),
+            )
+          : null,
+
+        tip
+          ? $.html(
+              "div",
+              { class: "tooltip tooltip-left order-4", "data-tip": tip },
+              $.html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"),
+            )
+          : null,
+
+        () => (val($error) ? $.html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val($error)) : null),
+      ],
+    );
+  };
 
   /** SELECT */
   ui.Select = (props) => {
@@ -268,97 +309,256 @@ ui.Input = (props) => {
 
     const query = $(val($value) || "");
     const isOpen = $(false);
-    const highlightedIndex = $(-1);
+    const cursor = $(-1);
 
-    const filtered = $(() => {
+    const list = $(() => {
       const q = query().toLowerCase();
-      const list = val(options) || [];
-      if (!q) return list;
-      return list.filter((opt) => {
-        const text = typeof opt === "string" ? opt : opt.label;
-        return text.toLowerCase().includes(q);
-      });
+      const data = val(options) || [];
+      return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data;
     });
 
-    const select = (opt) => {
-      const v = typeof opt === "string" ? opt : opt.value;
-      const l = typeof opt === "string" ? opt : opt.label;
-      query(l);
-      if (typeof $value === "function") $value(v);
+    const pick = (opt) => {
+      const value = typeof opt === "string" ? opt : opt.value;
+      const label = typeof opt === "string" ? opt : opt.label;
+
+      query(label);
+      $value?.(value);
       onSelect?.(opt);
+
       isOpen(false);
-      highlightedIndex(-1);
+      cursor(-1);
     };
 
-    const onKeyDown = (e) => {
-      const list = filtered();
+    const nav = (e) => {
+      const items = list();
+
       if (e.key === "ArrowDown") {
         e.preventDefault();
         isOpen(true);
-        highlightedIndex((prev) => Math.min(prev + 1, list.length - 1));
-      } else if (e.key === "ArrowUp") {
+        cursor((i) => Math.min(i + 1, items.length - 1));
+      }
+
+      if (e.key === "ArrowUp") {
         e.preventDefault();
-        highlightedIndex((prev) => Math.max(prev - 1, 0));
-      } else if (e.key === "Enter" && highlightedIndex() >= 0) {
+        cursor((i) => Math.max(i - 1, 0));
+      }
+
+      if (e.key === "Enter" && cursor() >= 0) {
         e.preventDefault();
-        select(list[highlightedIndex()]);
-      } else if (e.key === "Escape") {
+        pick(items[cursor()]);
+      }
+
+      if (e.key === "Escape") isOpen(false);
+    };
+
+    return $.html("div", { class: "relative w-full" }, [
+      ui.Input({
+        label,
+        placeholder: placeholder || tt("search")(),
+        $value: query,
+        onfocus: () => isOpen(true),
+        onblur: () => setTimeout(() => isOpen(false), 150),
+        onkeydown: nav,
+        oninput: (e) => {
+          query(e.target.value);
+          isOpen(true);
+          cursor(-1);
+        },
+        ...rest,
+      }),
+
+      $.html(
+        "ul",
+        {
+          class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
+          style: () => (isOpen() && list().length ? "display:block" : "display:none"),
+        },
+        [
+          ui.For(
+            list,
+            (opt, i) =>
+              $.html("li", {}, [
+                $.html(
+                  "a",
+                  {
+                    class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
+                    onclick: () => pick(opt),
+                    onmouseenter: () => cursor(i),
+                  },
+                  typeof opt === "string" ? opt : opt.label,
+                ),
+              ]),
+            (opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
+          ),
+
+          () => (!list().length ? $.html("li", { class: "p-2 text-center opacity-50" }, "No results") : null),
+        ],
+      ),
+    ]);
+  };
+
+  /** DATEPICKER */
+
+  ui.Datepicker = (props) => {
+    const { $value, range, label, placeholder, ...rest } = props;
+
+    const isOpen = $(false);
+    const internalDate = $(new Date());
+    const hoverDate = $(null);
+
+    // Determinamos si es rango (si no se pasa nada, por defecto es falso para fecha única)
+    const isRangeMode = () => val(range) === true;
+
+    const now = new Date();
+    const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+
+    const formatDate = (d) => {
+      const year = d.getFullYear();
+      const month = String(d.getMonth() + 1).padStart(2, "0");
+      const day = String(d.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
+    };
+
+    const selectDate = (date) => {
+      const dateStr = formatDate(date);
+      const current = val($value);
+
+      if (isRangeMode()) {
+        // MODO RANGO
+        if (!current?.start || (current.start && current.end)) {
+          $value({ start: dateStr, end: null });
+        } else {
+          const start = current.start;
+          $value(dateStr < start ? { start: dateStr, end: start } : { start, end: dateStr });
+          isOpen(false);
+        }
+      } else {
+        // MODO FECHA ÚNICA
+        $value(dateStr);
         isOpen(false);
       }
     };
 
-    return $.html(
-      "div",
-      {
-        class: "relative w-full",
-      },
-      [
-        ui.Input({
-          label,
-          placeholder: placeholder || tt("search")(),
-          $value: query,
-          onfocus: () => isOpen(true),
-          onblur: () => setTimeout(() => isOpen(false), 200),
-          onkeydown: onKeyDown,
-          oninput: (e) => {
-            query(e.target.value);
-            isOpen(true);
-            highlightedIndex(-1);
-          },
-          ...rest,
-        }),
+    const displayValue = $(() => {
+      const v = val($value);
+      if (!v) return "";
+      // Si es un string (fecha única)
+      if (typeof v === "string") return v;
+      // Si es un objeto (rango)
+      if (v.start && v.end) return `${v.start} - ${v.end}`;
+      if (v.start) return `${v.start}...`;
+      return "";
+    });
 
+    // ... resto del move, moveYear ...
+    const move = (m) => {
+      const d = internalDate();
+      internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1));
+    };
+    const moveYear = (y) => {
+      const d = internalDate();
+      internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
+    };
+
+    return $.html("div", { class: "relative w-full" }, [
+      ui.Input({
+        label,
+        placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
+        $value: displayValue,
+        readonly: true,
+        icon: $.html("img", { src: iconCalendar, class: "w-4 h-4 opacity-40" }),
+        onclick: (e) => {
+          e.stopPropagation();
+          isOpen(!isOpen());
+        },
+        ...rest,
+      }),
+
+      ui.If(isOpen, () =>
         $.html(
-          "ul",
+          "div",
           {
-            // AÑADIDO: w-full y box-border para que no se pase ni un píxel
-           class: "absolute left-0 w-80 max-w-[95vw] menu bg-base-100 rounded-box z-[100] mt-1 p-2 shadow-2xl max-h-60 overflow-y-auto border border-base-300",
-            style: () => (isOpen() && filtered().length > 0 ? "display: block" : "display: none"),
+            class: "absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",
+            onclick: (e) => e.stopPropagation(),
           },
           [
-            ui.For(
-              filtered,
-              (opt, i) =>
-                $.html("li", { class: "w-full" }, [
-                  // li al 100%
-                  $.html(
-                    "a",
-                    {
-                      // AÑADIDO: block w-full para que el azul cubra todo el ancho
-                      class: () => joinClass("block w-full", highlightedIndex() === i && "active bg-primary text-primary-content"),
-                      onclick: () => select(opt),
-                      onmouseenter: () => highlightedIndex(i),
-                    },
-                    typeof opt === "string" ? opt : opt.label,
-                  ),
-                ]),
-              (opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
-            ),
-            () => (filtered().length === 0 ? $.html("li", { class: "disabled p-2 text-center opacity-50" }, "No hay resultados") : null),
+            // Header (Igual que el tuyo)
+            $.html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
+              $.html("div", { class: "flex gap-0.5" }, [
+                $.html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, "<<"),
+                $.html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, "<"),
+              ]),
+              $.html("span", { class: "text-xs font-bold uppercase flex-1 text-center" }, [
+                () => internalDate().toLocaleString("es-ES", { month: "long", year: "numeric" }),
+              ]),
+              $.html("div", { class: "flex gap-0.5" }, [
+                $.html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, ">"),
+                $.html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, ">>"),
+              ]),
+            ]),
+
+            // Grid
+            $.html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
+              ...["L", "M", "X", "J", "V", "S", "D"].map((d) => $.html("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
+              () => {
+                const d = internalDate();
+                const year = d.getFullYear();
+                const month = d.getMonth();
+                const firstDay = new Date(year, month, 1).getDay();
+                const offset = firstDay === 0 ? 6 : firstDay - 1;
+                const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+                const nodes = [];
+                for (let i = 0; i < offset; i++) nodes.push($.html("div"));
+
+                for (let i = 1; i <= daysInMonth; i++) {
+                  const date = new Date(year, month, i);
+                  const dStr = formatDate(date);
+
+                  nodes.push(
+                    $.html(
+                      "button",
+                      {
+                        type: "button",
+                        class: () => {
+                          const v = val($value);
+                          const h = hoverDate();
+                          const isToday = dStr === todayStr;
+
+                          // Lógica de selección según el tipo de dato
+                          const isStart = typeof v === "string" ? v === dStr : v?.start === dStr;
+                          const isEnd = v?.end === dStr;
+
+                          let inRange = false;
+                          // Solo calculamos sombreado si estamos en modo rango
+                          if (isRangeMode()) {
+                            if (v?.start && !v.end && h) {
+                              inRange = (dStr > v.start && dStr <= h) || (dStr < v.start && dStr >= h);
+                            } else if (v?.start && v?.end) {
+                              inRange = dStr > v.start && dStr < v.end;
+                            }
+                          }
+
+                          return `btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative
+                  ${isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost"}
+                  ${isToday ? "ring-1 ring-primary ring-inset font-black text-primary" : ""}`;
+                        },
+                        onmouseenter: () => isRangeMode() && hoverDate(dStr),
+                        onclick: () => selectDate(date),
+                      },
+                      i.toString(),
+                    ),
+                  );
+                }
+                return nodes;
+              },
+            ]),
           ],
         ),
-      ],
-    );
+      ),
+
+      ui.If(isOpen, () => $.html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
+    ]);
   };
 
   /** CHECKBOX */