@codbex/harmonia 1.0.0 → 1.1.0

package/dist/harmonia.esm.js

@@ -21295,7 +21295,7 @@ function calendar_default(Alpine) {
     previousYearBtn.setAttribute("type", "button");
     previousYearBtn.appendChild(
       (0, import_lucide2.createElement)(import_lucide2.ChevronsLeft, {
-        class: ["opacity-50 size-4 shrink-0 pointer-events-none"],
+        class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21313,7 +21313,7 @@ function calendar_default(Alpine) {
     previousMonthBtn.setAttribute("type", "button");
     previousMonthBtn.appendChild(
       (0, import_lucide2.createElement)(import_lucide2.ChevronLeft, {
-        class: ["opacity-50 size-4 shrink-0 pointer-events-none"],
+        class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21336,7 +21336,7 @@ function calendar_default(Alpine) {
     nextMonthBtn.setAttribute("type", "button");
     nextMonthBtn.appendChild(
       (0, import_lucide2.createElement)(import_lucide2.ChevronRight, {
-        class: ["opacity-50 size-4 shrink-0 pointer-events-none"],
+        class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21354,7 +21354,7 @@ function calendar_default(Alpine) {
     nextYearBtn.setAttribute("type", "button");
     nextYearBtn.appendChild(
       (0, import_lucide2.createElement)(import_lucide2.ChevronsRight, {
-        class: ["opacity-50 size-4 shrink-0 pointer-events-none"],
+        class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21779,8 +21779,29 @@ function collapsible_default(Alpine) {
 
 // src/components/datepicker.js
 var import_lucide3 = __toESM(require_lucide(), 1);
+
+// src/common/input-size.js
+function setSize(el, size3) {
+  if (size3 === "sm") {
+    el.classList.add("h-6.5");
+    el.classList.remove("h-9");
+  } else {
+    el.classList.add("h-9");
+    el.classList.remove("h-6.5");
+  }
+}
+function sizeObserver(el) {
+  const observer = new MutationObserver(() => {
+    setSize(el, el.getAttribute("data-size"));
+  });
+  setSize(el, el.getAttribute("data-size"));
+  observer.observe(el, { attributes: true, attributeFilter: ["data-size"] });
+  return observer;
+}
+
+// src/components/datepicker.js
 function datepicker_default(Alpine) {
-  Alpine.directive("h-date-picker", (el, { original }, { Alpine: Alpine2 }) => {
+  Alpine.directive("h-date-picker", (el, { original }, { Alpine: Alpine2, cleanup }) => {
     el._h_datepicker = Alpine2.reactive({
       id: void 0,
       controls: `hdpc${v4_default()}`,
@@ -21809,10 +21830,7 @@ function datepicker_default(Alpine) {
       "transition-[color,box-shadow]",
       "duration-200",
       "outline-none",
-      "h-9",
       "pl-3",
-      "pr-1",
-      "gap-2",
       "min-w-0",
       "has-[input:focus-visible]:border-ring",
       "has-[input:focus-visible]:ring-ring/50",
@@ -21828,18 +21846,26 @@ function datepicker_default(Alpine) {
     el._h_datepicker.input.classList.add(
       "bg-transparent",
       "outline-none",
-      "flex-1",
-      "h-full",
-      "border-0",
+      "size-full",
+      "pr-1",
+      "border-r",
+      "border-input",
+      "aria-invalid:border-negative",
+      "invalid:border-negative",
       "focus-visible:ring-0",
       "disabled:pointer-events-none",
       "disabled:cursor-not-allowed",
       "disabled:opacity-50",
       "md:text-sm",
-      "text-base"
+      "text-base",
+      "truncate"
     );
     el._h_datepicker.input.setAttribute("aria-autocomplete", "none");
     el._h_datepicker.input.setAttribute("type", "text");
+    const observer = sizeObserver(el);
+    cleanup(() => {
+      observer.disconnect();
+    });
   });
   Alpine.directive("h-date-picker-trigger", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "BUTTON") {
@@ -21852,6 +21878,28 @@ function datepicker_default(Alpine) {
     if (!datepicker) {
       throw new Error(`${original} must be inside an date-picker element`);
     }
+    el.classList.add(
+      "cursor-pointer",
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-r-control",
+      "h-full",
+      "aspect-square",
+      "bg-transparent",
+      "hover:bg-secondary",
+      "active:bg-secondary-active",
+      "outline-none",
+      "focus-visible:border-ring",
+      "focus-visible:ring-ring/50",
+      "focus-visible:ring-[calc(var(--spacing)*0.75)]",
+      "[input[aria-invalid=true]~&]:ring-negative/20",
+      "[input[aria-invalid=true]~&]:border-negative",
+      "dark:[input[aria-invalid=true]~&]:ring-negative/40",
+      "[input:invalid~&]:ring-negative/20",
+      "[input:invalid~&]:border-negative",
+      "dark:[input:invalid~&]:ring-negative/40"
+    );
     el.setAttribute("aria-controls", datepicker._h_datepicker.controls);
     el.setAttribute("aria-expanded", "false");
     el.setAttribute("aria-haspopup", "dialog");
@@ -21859,7 +21907,7 @@ function datepicker_default(Alpine) {
     el.setAttribute("data-slot", "date-picker-trigger");
     el.appendChild(
       (0, import_lucide3.createElement)(import_lucide3.Calendar, {
-        class: ["opacity-50 size-4 transition-transform duration-200"],
+        class: ["opacity-70 text-foreground size-4"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21889,7 +21937,7 @@ function datepicker_default(Alpine) {
       el.removeEventListener("click", handler);
       top.removeEventListener("click", close);
     });
-  }).before("h-button");
+  });
 }
 
 // src/components/dialog.js
@@ -22163,25 +22211,6 @@ function info_page_default(Alpine) {
   });
 }
 
-// src/common/input-size.js
-function setSize(el, size3) {
-  if (size3 === "sm") {
-    el.classList.add("h-6.5");
-    el.classList.remove("h-9");
-  } else {
-    el.classList.add("h-9");
-    el.classList.remove("h-6.5");
-  }
-}
-function sizeObserver(el) {
-  const observer = new MutationObserver(() => {
-    setSize(el, el.getAttribute("data-size"));
-  });
-  setSize(el, el.getAttribute("data-size"));
-  observer.observe(el, { attributes: true, attributeFilter: ["data-size"] });
-  return observer;
-}
-
 // src/components/input.js
 function input_default(Alpine) {
   Alpine.directive("h-input", (el, { modifiers }, { cleanup }) => {
@@ -22382,8 +22411,11 @@ function input_default(Alpine) {
     stepDown.setAttribute("aria-controls", input.getAttribute("id"));
     stepDown.setAttribute("data-slot", "step-up-trigger");
     stepDown.classList.add(
+      "cursor-pointer",
       "border-l",
       "border-input",
+      "[input[aria-invalid=true]~&]:border-negative",
+      "[input:invalid~&]:border-negative",
       "h-full",
       "aspect-square",
       "bg-transparent",
@@ -22392,6 +22424,7 @@ function input_default(Alpine) {
       "outline-none",
       "relative",
       "before:block",
+      "before:opacity-70",
       "before:rounded-full",
       "before:h-0.5",
       "before:min-h-px",
@@ -22414,8 +22447,11 @@ function input_default(Alpine) {
     stepUp.setAttribute("aria-controls", input.getAttribute("id"));
     stepUp.setAttribute("data-slot", "step-up-trigger");
     stepUp.classList.add(
+      "cursor-pointer",
       "border-l",
       "border-input",
+      "[input[aria-invalid=true]~&]:border-negative",
+      "[input:invalid~&]:border-negative",
       "rounded-r-control",
       "h-full",
       "aspect-square",
@@ -22425,6 +22461,7 @@ function input_default(Alpine) {
       "outline-none",
       "relative",
       "before:block",
+      "before:opacity-70",
       "before:absolute",
       "before:rounded-full",
       "before:h-0.5",
@@ -22437,6 +22474,7 @@ function input_default(Alpine) {
       "before:bg-foreground",
       "before:hover:bg-secondary-foreground",
       "after:block",
+      "after:opacity-70",
       "after:absolute",
       "after:rounded-full",
       "after:h-3",
@@ -23598,11 +23636,7 @@ function select_default(Alpine) {
       "duration-200",
       "outline-none",
       "has-[input:disabled]:pointer-events-none",
-      "has-[input:disabled]:opacity-50",
-      "[&_svg]:pointer-events-none",
-      "[&_svg]:shrink-0",
-      "[&_svg]:size-4",
-      "[&_svg]:opacity-50"
+      "has-[input:disabled]:opacity-50"
     );
     el.setAttribute("data-slot", "select");
     const observer = sizeObserver(el);
@@ -23840,7 +23874,7 @@ function select_default(Alpine) {
     fakeTrigger.addEventListener("keydown", onPress);
     fakeTrigger.addEventListener("click", onClick2);
     const chevronDown = (0, import_lucide4.createElement)(import_lucide4.ChevronDown, {
-      class: ["opacity-50 size-4 transition-transform duration-200"],
+      class: ["opacity-70 text-foreground size-4 shrink-0 pointer-events-none transition-transform duration-200"],
       width: "16",
       height: "16",
       "aria-hidden": true,
@@ -25258,12 +25292,12 @@ function timepicker_default(Alpine) {
       "has-[input:focus-visible]:border-ring",
       "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
       "has-[input:focus-visible]:ring-ring/50",
-      "dark:has-[aria-invalid=true]:ring-negative/40",
-      "dark:has-[input:invalid]:ring-negative/40",
-      "has-[aria-invalid=true]:border-negative",
-      "has-[aria-invalid=true]:ring-negative/20",
-      "has-[input:invalid]:border-negative",
+      "has-[input[aria-invalid=true]]:ring-negative/20",
+      "has-[input[aria-invalid=true]]:border-negative",
+      "dark:has-[input[aria-invalid=true]]:ring-negative/40",
       "has-[input:invalid]:ring-negative/20",
+      "has-[input:invalid]:border-negative",
+      "dark:has-[input:invalid]:ring-negative/40",
       "hover:bg-secondary-hover",
       "active:bg-secondary-active",
       "flex",
@@ -25271,12 +25305,12 @@ function timepicker_default(Alpine) {
       "items-center",
       "justify-between",
       "gap-2",
-      "h-9",
       "rounded-control",
       "border",
       "bg-input-inner",
       "pl-3",
       "pr-2",
+      "data-[size=sm]:pr-1",
       "text-sm",
       "whitespace-nowrap",
       "shadow-input",
@@ -25284,17 +25318,13 @@ function timepicker_default(Alpine) {
       "duration-200",
       "outline-none",
       "has-[input:disabled]:pointer-events-none",
-      "has-[input:disabled]:opacity-50",
-      "[&_svg]:pointer-events-none",
-      "[&_svg]:shrink-0",
-      "[&_svg]:size-4",
-      "[&_svg]:opacity-50"
+      "has-[input:disabled]:opacity-50"
     );
     el.setAttribute("data-slot", "time-picker");
     el.setAttribute("tabindex", "-1");
     el.appendChild(
       (0, import_lucide5.createElement)(import_lucide5.Clock, {
-        class: ["opacity-50 size-4 transition-transform duration-200"],
+        class: ["opacity-70 text-foreground size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -25333,13 +25363,15 @@ function timepicker_default(Alpine) {
     };
     el.addEventListener("click", handler);
     el.addEventListener("keydown", handler);
+    const observer = sizeObserver(el);
     cleanup(() => {
+      observer.disconnect();
       el.removeEventListener("click", handler);
       el.removeEventListener("keydown", handler);
       top.removeEventListener("click", el._h_timepicker.close);
     });
   });
-  Alpine.directive("h-time-picker-input", (el, { original }, { effect, Alpine: Alpine2 }) => {
+  Alpine.directive("h-time-picker-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "INPUT") {
       throw new Error(`${original} must be a readonly input of type "text"`);
     }
@@ -25373,8 +25405,7 @@ function timepicker_default(Alpine) {
       timepicker._h_timepicker.id = `htp${v4_default()}`;
       el.setAttribute("id", timepicker._h_timepicker.id);
     }
-    el.classList.add("cursor-pointer", "bg-transparent", "text-transparent", "text-shadow-[0_0_0_var(--foreground)]", "outline-none", "flex-1", "h-full", "border-0", "md:text-sm", "text-base");
-    el.readOnly = true;
+    el.classList.add("cursor-pointer", "bg-transparent", "text-transparent", "text-shadow-[0_0_0_var(--foreground)]", "placeholder:text-muted-foreground", "outline-none", "size-full", "border-0", "md:text-sm", "text-base", "truncate");
     el.setAttribute("aria-autocomplete", "none");
     el.setAttribute("aria-controls", timepicker._h_timepicker.controls);
     el.setAttribute("aria-expanded", "false");
@@ -25417,11 +25448,20 @@ function timepicker_default(Alpine) {
       placeholder = timepicker._h_timepicker.is12Hour ? "--:-- --" : "--:--";
     }
     el.setAttribute("placeholder", placeholder);
+    const preventInput = (event) => {
+      event.preventDefault();
+    };
+    el.addEventListener("beforeinput", preventInput);
+    el.addEventListener("paste", preventInput);
     effect(() => {
       el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
       el.setAttribute("aria-expanded", timepicker._h_timepicker.expanded);
     });
-  }).before("h-button");
+    cleanup(() => {
+      el.removeEventListener("keydown", preventInput);
+      el.removeEventListener("paste", preventInput);
+    });
+  });
   Alpine.directive("h-time-picker-popup", (el, _, { effect, cleanup, Alpine: Alpine2 }) => {
     const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
     el.classList.add(
@@ -25438,6 +25478,7 @@ function timepicker_default(Alpine) {
       "z-50",
       "shadow-md"
     );
+    el.setAttribute("id", timepicker._h_timepicker.controls);
     el.setAttribute("tabindex", "-1");
     el.setAttribute("role", "dialog");
     el.setAttribute("aria-modal", "true");
@@ -25634,7 +25675,7 @@ function timepicker_default(Alpine) {
       }
     }
     const timeContainer = document.createElement("div");
-    timeContainer.classList.add("hbox", "max-h-[18rem]", "[&>ul]:border-r", "[&>ul:last-of-type]:border-r-0");
+    timeContainer.classList.add("hbox", "max-h-[14rem]", "[&>ul]:border-r", "[&>ul:last-of-type]:border-r-0");
     if (el.firstChild) el.classList.add("border-b");
     timeContainer.setAttribute("role", "group");
     timeContainer.addEventListener("click", setTime);
@@ -25721,6 +25762,7 @@ function timepicker_default(Alpine) {
     footer.classList.add("hbox", "justify-between", "gap-1", "border-t", "p-2");
     footer.setAttribute("tabindex", "-1");
     const nowButton = document.createElement("button");
+    nowButton.setAttribute("type", "button");
     nowButton.setAttribute(Alpine2.prefixed("h-button"), "");
     nowButton.setAttribute("data-size", "sm");
     nowButton.setAttribute("data-action", "time");
@@ -25728,6 +25770,7 @@ function timepicker_default(Alpine) {
     nowButton.addEventListener("click", getCurrentTime);
     footer.appendChild(nowButton);
     const okButton = document.createElement("button");
+    okButton.setAttribute("type", "button");
     okButton.setAttribute(Alpine2.prefixed("h-button"), "");
     okButton.setAttribute("data-variant", "primary");
     okButton.setAttribute("data-size", "sm");
@@ -26264,7 +26307,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.0.0";
+var version = "1.1.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768) {