Datepicker And Color picker with dropdown

dist/sigpro-ui.js

@@ -755,13 +755,11 @@
         }
       ]),
       p2.hour ? O("div", { class: "mt-3 pt-2 border-t border-base-300" }, rangeMode() ? O("div", { class: "flex gap-4" }, [HourSlider({ value: startHour, onChange: (h) => startHour(h) }), HourSlider({ value: endHour, onChange: (h) => endHour(h) })]) : HourSlider({ value: startHour, onChange: (h) => startHour(h) })) : null,
-      O("div", { class: cls("flex gap-2 mt-3 pt-2", !p2.hour && "border-t border-base-300") }, [
-        O("button", {
-          type: "button",
-          class: "btn btn-xs flex-1",
-          onclick: () => close()
-        }, Icon("icon-[lucide--x]"))
-      ])
+      O("button", {
+        type: "button",
+        class: "btn btn-xs w-full",
+        onclick: () => close()
+      }, Icon("icon-[lucide--x]"))
     ]);
   };
   var Card = (p2, c) => O("div", { ...p2, class: cls("card", p2.class) }, c);
@@ -785,7 +783,6 @@
       ]),
       DropdownContent({ class: "p-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p2.value, onchange: (c) => {
         isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
-        close();
       } }))
     ]);
   };
@@ -876,7 +873,6 @@
     ];
   };
   var Datepicker = (p2) => {
-    const isOpen = S(false);
     const displayValue = S("");
     const rangeMode = () => get(p2.range) === true;
     R(() => {
@@ -902,27 +898,33 @@
       else
         p2.onChange?.(val);
       if (!rangeMode() || val?.end != null)
-        isOpen(false);
+        close();
     };
-    return O("div", { class: cls("relative w-full", p2.class) }, [
-      O("label", { class: "input input-bordered w-full", onclick: (e) => {
-        e.stopPropagation();
-        isOpen(!isOpen());
-      } }, [
-        O("span", { class: "icon-[lucide--calendar]" }),
-        O("input", {
-          ...p2,
-          type: "text",
-          class: "grow",
-          value: displayValue,
-          readonly: true,
-          placeholder: p2.placeholder || (rangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
-        })
+    return Dropdown({ class: cls("w-full", p2.class) }, [
+      O("label", {
+        tabindex: "0",
+        role: "button",
+        class: "input input-bordered w-full flex items-center gap-2 cursor-pointer"
+      }, [
+        O("span", { class: "icon-[lucide--calendar] shrink-0" }),
+        O("span", {
+          class: () => `grow text-left truncate ${!displayValue() ? "opacity-50" : ""}`
+        }, () => displayValue() || p2.placeholder || (rangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."))
       ]),
-      z(isOpen, () => [
-        O("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) }),
-        O("div", { class: "absolute left-0 mt-2 z-[100]", onclick: (e) => e.stopPropagation() }, Calendar({ value: p2.value, range: rangeMode(), hour: p2.hour, onChange: handleChange }))
-      ])
+      DropdownContent({ class: "p-0 bg-base-100 rounded-box shadow-xl" }, Calendar({
+        value: p2.value,
+        range: rangeMode(),
+        hour: p2.hour,
+        onChange: handleChange,
+        onAccept: () => {
+          p2.onAccept?.();
+          close();
+        },
+        onCancel: () => {
+          p2.onCancel?.();
+          close();
+        }
+      }))
     ]);
   };
   var Drawer = (p2, c) => div({ ...p2, class: cls("drawer", p2.class) }, c);