Mejorados componentes Datepicker, Autocomplete y eliminado fx

dist/sigpro-ui.css

@@ -3293,6 +3293,9 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .-mr-2 {
+    margin-right: calc(var(--spacing) * -2);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -4197,9 +4200,6 @@
       }
     }
   }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-  }
   .skeleton {
     @layer daisyui.l1.l2.l3 {
       border-radius: var(--radius-box);
@@ -4861,10 +4861,6 @@
       }
     }
   }
-  .blur {
-    --tw-blur: blur(8px);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
   .blur-3xl {
     --tw-blur: blur(var(--blur-3xl));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -4877,11 +4873,6 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
-  .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5646,26 +5637,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -5866,11 +5837,6 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;

dist/sigpro-ui.esm.js

@@ -526,46 +526,6 @@ var isFn = (f) => typeof f === "function";
 var filterBy = (items, query, field = "label", q2 = String(query).toLowerCase()) => !query ? get(items) : get(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q2));
 var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
 var close = () => document.activeElement?.blur();
-var listKey = (items, isOpen) => {
-  const cursor = $(-1);
-  const onKey = (e, select) => {
-    const list = get(items), i = cursor(), len = list.length;
-    if (!len)
-      return;
-    const k2 = e.key;
-    k2 === "ArrowDown" ? (e.preventDefault(), isOpen(true), cursor(Math.min(i + 1, len - 1))) : k2 === "ArrowUp" ? (e.preventDefault(), cursor(Math.max(i - 1, 0))) : k2 === "Enter" ? i >= 0 && (e.preventDefault(), select(list[i])) : k2 === "Escape" && (isOpen(false), cursor(-1));
-  };
-  return { cursor, onKey };
-};
-var fx = ({ name, duration = 200, scale, slide, rotate, blur }, child) => {
-  const el = typeof child === "function" ? child() : child;
-  if (!(el instanceof Node))
-    return el;
-  if (name) {
-    el.style.animation = `${name}-in ${duration}ms`;
-    return el;
-  }
-  const hasTransform = scale || slide || rotate || blur;
-  const initialTransform = [
-    scale ? "scale(0.95)" : "",
-    slide ? "translateY(-10px)" : "",
-    rotate ? "rotate(-2deg)" : ""
-  ].filter(Boolean).join(" ");
-  el.style.transition = `all ${duration}ms ease`;
-  el.style.opacity = "0";
-  if (hasTransform)
-    el.style.transform = initialTransform;
-  if (blur)
-    el.style.filter = "blur(4px)";
-  requestAnimationFrame(() => {
-    el.style.opacity = "1";
-    if (hasTransform)
-      el.style.transform = "none";
-    if (blur)
-      el.style.filter = "none";
-  });
-  return el;
-};
 
 // sigpro-components.js
 var Accordion = (p2) => {
@@ -579,11 +539,9 @@ var Accordion = (p2) => {
   });
 };
 var Alert = (p2, c) => O("div", { ...p2, class: cls("alert", p2.class) }, c);
-var Autocomplete = ({ items, value, onselect, placeholder = "Buscar...", ...props }) => {
+var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => {
   const query = S(get(value) || "");
-  const isOpen = S(false);
   const filtered = S(() => filterBy(items, query()));
-  const { cursor, onKey } = listKey(filtered, isOpen);
   const pick = (item) => {
     const display = getBy(item);
     const actual = typeof item === "string" ? item : item.value;
@@ -591,12 +549,11 @@ var Autocomplete = ({ items, value, onselect, placeholder = "Buscar...", ...prop
     if (isFn(value))
       value(actual);
     onselect?.(item);
-    isOpen(false);
+    close();
   };
-  return O("div", { class: "relative w-full" }, [
-    Input({
+  return Dropdown({ class: "w-full" }, [
+    O("div", { tabindex: "0", role: "button", class: "w-full" }, Input({
       ...props,
-      type: "text",
       placeholder,
       value: query,
       left: O("span", { class: "icon-[lucide--search]" }),
@@ -604,28 +561,17 @@ var Autocomplete = ({ items, value, onselect, placeholder = "Buscar...", ...prop
         query(e.target.value);
         if (isFn(value))
           value(e.target.value);
-        isOpen(true);
-      },
-      onfocus: () => isOpen(true),
-      onblur: () => setTimeout(() => {
-        isOpen(false);
-        cursor(-1);
-      }, 150),
-      onkeydown: (e) => onKey(e, pick)
-    }),
-    z(isOpen, () => fx({ duration: 200, slide: true }, O("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 flex-col flex-nowrap"
-    }, [
-      K(filtered, (item, idx) => O("li", {}, [
+      }
+    })),
+    DropdownContent({ class: "p-2 bg-base-100 rounded-box shadow-xl w-full max-h-60 overflow-y-auto border border-base-300 z-50" }, O("ul", { class: "menu flex-col flex-nowrap w-full p-0" }, [
+      K(filtered, (item) => O("li", {}, [
         O("a", {
-          class: () => cursor() === idx ? "active bg-primary text-primary-content" : "",
           onmousedown: (e) => e.preventDefault(),
-          onclick: () => pick(item),
-          onmouseenter: () => cursor(idx)
+          onclick: () => pick(item)
         }, getBy(item))
-      ]), (item, idx) => getBy(item) + idx),
+      ]), (item) => getBy(item)),
       () => filtered().length === 0 ? O("li", { class: "p-4 opacity-50 text-center" }, "Sin resultados") : null
-    ])))
+    ]))
   ]);
 };
 var Badge = (p2, c) => O("span", { ...p2, class: cls("badge", p2.class) }, c);
@@ -673,7 +619,9 @@ var Calendar = (p2) => {
       O("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(get(hVal)).padStart(2, "0") + ":00")
     ])
   ]);
-  return O("div", { class: cls("p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none", p2.class) }, [
+  return O("div", {
+    class: cls("p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none", p2.class)
+  }, [
     O("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
       O("div", { class: "flex gap-0.5" }, [
         O("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, O("span", { class: "icon-[lucide--chevrons-left]" })),
@@ -723,12 +671,7 @@ var Calendar = (p2) => {
         return cells;
       }
     ]),
-    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("button", {
-      type: "button",
-      class: "btn btn-xs w-full",
-      onclick: () => close()
-    }, Icon("icon-[lucide--x]"))
+    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
   ]);
 };
 var Card = (p2, c) => O("div", { ...p2, class: cls("card", p2.class) }, c);
@@ -824,22 +767,18 @@ var ColorPalette = (p2) => {
     "#fae8ff"
   ];
   const pick = (c) => isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
-  return [
-    O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("button", {
-      type: "button",
-      style: `background-color: ${c}`,
-      class: () => {
-        const act = current().toLowerCase() === c.toLowerCase();
-        return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
-      },
-      onclick: () => pick(c)
-    }))),
-    O("button", {
-      type: "button",
-      class: "btn btn-xs w-full",
-      onclick: () => close()
-    }, Icon("icon-[lucide--x]"))
-  ];
+  return O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("button", {
+    type: "button",
+    style: `background-color: ${c}`,
+    class: () => {
+      const act = current().toLowerCase() === c.toLowerCase();
+      return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
+    },
+    onclick: () => {
+      pick(c);
+      close();
+    }
+  })));
 };
 var Datepicker = (p2) => {
   const displayValue = S("");
@@ -873,26 +812,31 @@ var Datepicker = (p2) => {
     O("label", {
       tabindex: "0",
       role: "button",
-      class: "input input-bordered w-full flex items-center gap-2 cursor-pointer"
+      class: "input input-bordered 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..."))
+      }, () => displayValue() || p2.placeholder || (rangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")),
+      () => displayValue() ? O("button", {
+        type: "button",
+        class: "btn btn-ghost btn-xs btn-circle -mr-2",
+        onmousedown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (isFn(p2.value))
+            p2.value(null);
+          else
+            p2.onChange?.(null);
+          displayValue("");
+        }
+      }, O("span", { class: "icon-[lucide--x] opacity-50" })) : null
     ]),
     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();
-      }
+      onChange: handleChange
     }))
   ]);
 };
@@ -984,37 +928,23 @@ var Indicator = (p2, c) => O("div", { ...p2, class: cls("indicator", p2.class) }
 var Input = (p2) => {
   const { label: label2, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p2;
   const showPassword = S(false);
-  const isFocused = S(false);
   const isPassword = p2.type === "password";
   const pattern = rule ?? null;
-  const inputType = () => isPassword ? get(showPassword) ? "text" : "password" : p2.type || "text";
-  return O("div", {
-    class: "input-container",
-    onfocusin: () => isFocused(true),
-    onfocusout: (e) => {
-      if (!e.currentTarget.contains(e.relatedTarget)) {
-        isFocused(false);
-      }
-    }
-  }, [
-    O("label", { class: float ? "floating-label" : "" }, [
-      float ? O("span", {}, label2) : null,
-      O("label", { pattern, class: () => cls("input validator", p2.class) }, [
-        label2 && !float ? O("span", { class: "label" }, label2) : null,
-        left ?? null,
-        O("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label2 || " ", value }),
-        right ?? null,
-        isPassword ? Swap({ class: "ml-2" }, [
-          SwapToggle({ value: showPassword, class: "swap-rotate" }),
-          SwapOn({}, Icon("icon-[lucide--eye]")),
-          SwapOff({}, Icon("icon-[lucide--eye-off]"))
-        ]) : null
-      ]),
-      hint ? O("div", { class: "validator-hint" }, hint) : null,
-      z(isFocused, () => fx({ duration: 300, slide: true }, O("div", { class: "input-content", onmousedown: (e) => e.preventDefault() }, [
-        isFn(content) ? content(isFocused) : content
-      ])))
-    ])
+  const inputType = () => isPassword ? get(showPassword) ? "text" : "password" : p2.type || "search";
+  return O("label", { class: float ? "floating-label" : "" }, [
+    float ? O("span", {}, label2) : null,
+    O("label", { pattern, class: () => cls("input validator", p2.class) }, [
+      label2 && !float ? O("span", { class: "label" }, label2) : null,
+      left ?? null,
+      O("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label2 || " ", value }),
+      right ?? null,
+      isPassword ? Swap({ class: "ml-2" }, [
+        SwapToggle({ value: showPassword, class: "swap-rotate" }),
+        SwapOn({}, Icon("icon-[lucide--eye]")),
+        SwapOff({}, Icon("icon-[lucide--eye-off]"))
+      ]) : null
+    ]),
+    hint ? O("div", { class: "validator-hint" }, hint) : null
   ]);
 };
 var Kbd = (p2, c) => O("kbd", { ...p2, class: cls("kbd", p2.class) }, c);

dist/sigpro-ui.js

@@ -557,46 +557,6 @@
   var filterBy = (items, query, field = "label", q2 = String(query).toLowerCase()) => !query ? get(items) : get(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q2));
   var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
   var close = () => document.activeElement?.blur();
-  var listKey = (items, isOpen) => {
-    const cursor = $(-1);
-    const onKey = (e, select) => {
-      const list = get(items), i = cursor(), len = list.length;
-      if (!len)
-        return;
-      const k2 = e.key;
-      k2 === "ArrowDown" ? (e.preventDefault(), isOpen(true), cursor(Math.min(i + 1, len - 1))) : k2 === "ArrowUp" ? (e.preventDefault(), cursor(Math.max(i - 1, 0))) : k2 === "Enter" ? i >= 0 && (e.preventDefault(), select(list[i])) : k2 === "Escape" && (isOpen(false), cursor(-1));
-    };
-    return { cursor, onKey };
-  };
-  var fx = ({ name, duration = 200, scale, slide, rotate, blur }, child) => {
-    const el = typeof child === "function" ? child() : child;
-    if (!(el instanceof Node))
-      return el;
-    if (name) {
-      el.style.animation = `${name}-in ${duration}ms`;
-      return el;
-    }
-    const hasTransform = scale || slide || rotate || blur;
-    const initialTransform = [
-      scale ? "scale(0.95)" : "",
-      slide ? "translateY(-10px)" : "",
-      rotate ? "rotate(-2deg)" : ""
-    ].filter(Boolean).join(" ");
-    el.style.transition = `all ${duration}ms ease`;
-    el.style.opacity = "0";
-    if (hasTransform)
-      el.style.transform = initialTransform;
-    if (blur)
-      el.style.filter = "blur(4px)";
-    requestAnimationFrame(() => {
-      el.style.opacity = "1";
-      if (hasTransform)
-        el.style.transform = "none";
-      if (blur)
-        el.style.filter = "none";
-    });
-    return el;
-  };
 
   // sigpro-components.js
   var Accordion = (p2) => {
@@ -610,11 +570,9 @@
     });
   };
   var Alert = (p2, c) => O("div", { ...p2, class: cls("alert", p2.class) }, c);
-  var Autocomplete = ({ items, value, onselect, placeholder = "Buscar...", ...props }) => {
+  var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => {
     const query = S(get(value) || "");
-    const isOpen = S(false);
     const filtered = S(() => filterBy(items, query()));
-    const { cursor, onKey } = listKey(filtered, isOpen);
     const pick = (item) => {
       const display = getBy(item);
       const actual = typeof item === "string" ? item : item.value;
@@ -622,12 +580,11 @@
       if (isFn(value))
         value(actual);
       onselect?.(item);
-      isOpen(false);
+      close();
     };
-    return O("div", { class: "relative w-full" }, [
-      Input({
+    return Dropdown({ class: "w-full" }, [
+      O("div", { tabindex: "0", role: "button", class: "w-full" }, Input({
         ...props,
-        type: "text",
         placeholder,
         value: query,
         left: O("span", { class: "icon-[lucide--search]" }),
@@ -635,28 +592,17 @@
           query(e.target.value);
           if (isFn(value))
             value(e.target.value);
-          isOpen(true);
-        },
-        onfocus: () => isOpen(true),
-        onblur: () => setTimeout(() => {
-          isOpen(false);
-          cursor(-1);
-        }, 150),
-        onkeydown: (e) => onKey(e, pick)
-      }),
-      z(isOpen, () => fx({ duration: 200, slide: true }, O("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 flex-col flex-nowrap"
-      }, [
-        K(filtered, (item, idx) => O("li", {}, [
+        }
+      })),
+      DropdownContent({ class: "p-2 bg-base-100 rounded-box shadow-xl w-full max-h-60 overflow-y-auto border border-base-300 z-50" }, O("ul", { class: "menu flex-col flex-nowrap w-full p-0" }, [
+        K(filtered, (item) => O("li", {}, [
           O("a", {
-            class: () => cursor() === idx ? "active bg-primary text-primary-content" : "",
             onmousedown: (e) => e.preventDefault(),
-            onclick: () => pick(item),
-            onmouseenter: () => cursor(idx)
+            onclick: () => pick(item)
           }, getBy(item))
-        ]), (item, idx) => getBy(item) + idx),
+        ]), (item) => getBy(item)),
         () => filtered().length === 0 ? O("li", { class: "p-4 opacity-50 text-center" }, "Sin resultados") : null
-      ])))
+      ]))
     ]);
   };
   var Badge = (p2, c) => O("span", { ...p2, class: cls("badge", p2.class) }, c);
@@ -704,7 +650,9 @@
         O("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(get(hVal)).padStart(2, "0") + ":00")
       ])
     ]);
-    return O("div", { class: cls("p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none", p2.class) }, [
+    return O("div", {
+      class: cls("p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none", p2.class)
+    }, [
       O("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
         O("div", { class: "flex gap-0.5" }, [
           O("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, O("span", { class: "icon-[lucide--chevrons-left]" })),
@@ -754,12 +702,7 @@
           return cells;
         }
       ]),
-      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("button", {
-        type: "button",
-        class: "btn btn-xs w-full",
-        onclick: () => close()
-      }, Icon("icon-[lucide--x]"))
+      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
     ]);
   };
   var Card = (p2, c) => O("div", { ...p2, class: cls("card", p2.class) }, c);
@@ -855,22 +798,18 @@
       "#fae8ff"
     ];
     const pick = (c) => isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
-    return [
-      O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("button", {
-        type: "button",
-        style: `background-color: ${c}`,
-        class: () => {
-          const act = current().toLowerCase() === c.toLowerCase();
-          return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
-        },
-        onclick: () => pick(c)
-      }))),
-      O("button", {
-        type: "button",
-        class: "btn btn-xs w-full",
-        onclick: () => close()
-      }, Icon("icon-[lucide--x]"))
-    ];
+    return O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("button", {
+      type: "button",
+      style: `background-color: ${c}`,
+      class: () => {
+        const act = current().toLowerCase() === c.toLowerCase();
+        return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
+      },
+      onclick: () => {
+        pick(c);
+        close();
+      }
+    })));
   };
   var Datepicker = (p2) => {
     const displayValue = S("");
@@ -904,26 +843,31 @@
       O("label", {
         tabindex: "0",
         role: "button",
-        class: "input input-bordered w-full flex items-center gap-2 cursor-pointer"
+        class: "input input-bordered 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..."))
+        }, () => displayValue() || p2.placeholder || (rangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")),
+        () => displayValue() ? O("button", {
+          type: "button",
+          class: "btn btn-ghost btn-xs btn-circle -mr-2",
+          onmousedown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (isFn(p2.value))
+              p2.value(null);
+            else
+              p2.onChange?.(null);
+            displayValue("");
+          }
+        }, O("span", { class: "icon-[lucide--x] opacity-50" })) : null
       ]),
       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();
-        }
+        onChange: handleChange
       }))
     ]);
   };
@@ -1015,37 +959,23 @@
   var Input = (p2) => {
     const { label: label2, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p2;
     const showPassword = S(false);
-    const isFocused = S(false);
     const isPassword = p2.type === "password";
     const pattern = rule ?? null;
-    const inputType = () => isPassword ? get(showPassword) ? "text" : "password" : p2.type || "text";
-    return O("div", {
-      class: "input-container",
-      onfocusin: () => isFocused(true),
-      onfocusout: (e) => {
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-          isFocused(false);
-        }
-      }
-    }, [
-      O("label", { class: float ? "floating-label" : "" }, [
-        float ? O("span", {}, label2) : null,
-        O("label", { pattern, class: () => cls("input validator", p2.class) }, [
-          label2 && !float ? O("span", { class: "label" }, label2) : null,
-          left ?? null,
-          O("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label2 || " ", value }),
-          right ?? null,
-          isPassword ? Swap({ class: "ml-2" }, [
-            SwapToggle({ value: showPassword, class: "swap-rotate" }),
-            SwapOn({}, Icon("icon-[lucide--eye]")),
-            SwapOff({}, Icon("icon-[lucide--eye-off]"))
-          ]) : null
-        ]),
-        hint ? O("div", { class: "validator-hint" }, hint) : null,
-        z(isFocused, () => fx({ duration: 300, slide: true }, O("div", { class: "input-content", onmousedown: (e) => e.preventDefault() }, [
-          isFn(content) ? content(isFocused) : content
-        ])))
-      ])
+    const inputType = () => isPassword ? get(showPassword) ? "text" : "password" : p2.type || "search";
+    return O("label", { class: float ? "floating-label" : "" }, [
+      float ? O("span", {}, label2) : null,
+      O("label", { pattern, class: () => cls("input validator", p2.class) }, [
+        label2 && !float ? O("span", { class: "label" }, label2) : null,
+        left ?? null,
+        O("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label2 || " ", value }),
+        right ?? null,
+        isPassword ? Swap({ class: "ml-2" }, [
+          SwapToggle({ value: showPassword, class: "swap-rotate" }),
+          SwapOn({}, Icon("icon-[lucide--eye]")),
+          SwapOff({}, Icon("icon-[lucide--eye-off]"))
+        ]) : null
+      ]),
+      hint ? O("div", { class: "validator-hint" }, hint) : null
     ]);
   };
   var Kbd = (p2, c) => O("kbd", { ...p2, class: cls("kbd", p2.class) }, c);