@codbex/harmonia 1.0.0 → 1.1.0

package/dist/harmonia.js

@@ -2302,7 +2302,7 @@
       previousYearBtn.setAttribute("type", "button");
       previousYearBtn.appendChild(
         createElement(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,
@@ -2320,7 +2320,7 @@
       previousMonthBtn.setAttribute("type", "button");
       previousMonthBtn.appendChild(
         createElement(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,
@@ -2343,7 +2343,7 @@
       nextMonthBtn.setAttribute("type", "button");
       nextMonthBtn.appendChild(
         createElement(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,
@@ -2361,7 +2361,7 @@
       nextYearBtn.setAttribute("type", "button");
       nextYearBtn.appendChild(
         createElement(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,
@@ -2784,9 +2784,28 @@
     });
   }
 
+  // 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()}`,
@@ -2815,10 +2834,7 @@
         "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",
@@ -2834,18 +2850,26 @@
       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") {
@@ -2858,6 +2882,28 @@
       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");
@@ -2865,7 +2911,7 @@
       el.setAttribute("data-slot", "date-picker-trigger");
       el.appendChild(
         createElement(Calendar, {
-          class: ["opacity-50 size-4 transition-transform duration-200"],
+          class: ["opacity-70 text-foreground size-4"],
           width: "16",
           height: "16",
           "aria-hidden": true,
@@ -2895,7 +2941,7 @@
         el.removeEventListener("click", handler);
         top.removeEventListener("click", close);
       });
-    }).before("h-button");
+    });
   }
 
   // src/components/dialog.js
@@ -3169,25 +3215,6 @@
     });
   }
 
-  // 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 }) => {
@@ -3388,8 +3415,11 @@
       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",
@@ -3398,6 +3428,7 @@
         "outline-none",
         "relative",
         "before:block",
+        "before:opacity-70",
         "before:rounded-full",
         "before:h-0.5",
         "before:min-h-px",
@@ -3420,8 +3451,11 @@
       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",
@@ -3431,6 +3465,7 @@
         "outline-none",
         "relative",
         "before:block",
+        "before:opacity-70",
         "before:absolute",
         "before:rounded-full",
         "before:h-0.5",
@@ -3443,6 +3478,7 @@
         "before:bg-foreground",
         "before:hover:bg-secondary-foreground",
         "after:block",
+        "after:opacity-70",
         "after:absolute",
         "after:rounded-full",
         "after:h-3",
@@ -6462,11 +6498,7 @@
         "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);
@@ -6704,7 +6736,7 @@
       fakeTrigger.addEventListener("keydown", onPress);
       fakeTrigger.addEventListener("click", onClick2);
       const chevronDown = createElement(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,
@@ -8121,12 +8153,12 @@
         "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",
@@ -8134,12 +8166,12 @@
         "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",
@@ -8147,17 +8179,13 @@
         "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(
         createElement(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,
@@ -8196,13 +8224,15 @@
       };
       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"`);
       }
@@ -8236,8 +8266,7 @@
         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");
@@ -8280,11 +8309,20 @@
         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(
@@ -8301,6 +8339,7 @@
         "z-50",
         "shadow-md"
       );
+      el.setAttribute("id", timepicker._h_timepicker.controls);
       el.setAttribute("tabindex", "-1");
       el.setAttribute("role", "dialog");
       el.setAttribute("aria-modal", "true");
@@ -8497,7 +8536,7 @@
         }
       }
       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);
@@ -8584,6 +8623,7 @@
       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");
@@ -8591,6 +8631,7 @@
       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");
@@ -9250,7 +9291,7 @@
   }
 
   // package.json
-  var version = "1.0.0";
+  var version = "1.1.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };