@codbex/harmonia 0.9.1 → 1.0.0

package/dist/harmonia.js

@@ -594,24 +594,20 @@
       "invalid:!border-negative"
     );
   };
-  var getButtonSize = (size3, inGroup = false) => {
+  var getButtonSize = (size3, isAddon = false) => {
     switch (size3) {
-      case "xs":
-        return inGroup ? ["h-6", "gap-1", "px-2", "[&>svg:not([class*='size-'])]:size-3.5", "has-[>svg]:px-2"] : ["h-6.5", "gap-1.5", "px-2.5", "has-[>svg]:px-2.5"];
       case "sm":
-        return inGroup ? ["h-8", "px-2.5", "gap-1.5", "has-[>svg]:px-2.5"] : ["h-8", "gap-1.5", "px-3", "has-[>svg]:px-2.5"];
-      case "lg":
-        return ["h-10", "px-6", "has-[>svg]:px-4"];
-      case "icon-xs":
-        return inGroup ? ["size-6", "p-0", "has-[>svg]:p-0"] : ["size-6.5"];
+        return isAddon ? ["h-6", "[[data-slot=input-group][data-size=sm]_&]:h-5", "gap-1", "px-2", "[&>svg:not([class*='size-'])]:size-3.5", "has-[>svg]:px-2", "has-[>[data-slot=spinner]]:px-2"] : ["h-6.5", "gap-1.5", "px-2.5", "has-[>svg]:px-2", "has-[>[data-slot=spinner]]:px-2"];
+      case "md":
+        return isAddon ? ["h-8", "px-2.5", "gap-1.5", "has-[>svg]:px-2.5", "has-[>[data-slot=spinner]]:px-2.5"] : ["h-8", "gap-1.5", "px-3", "has-[>svg]:px-2.5", "has-[>[data-slot=spinner]]:px-2.5"];
       case "icon-sm":
-        return inGroup ? ["size-8", "p-0", "has-[>svg]:p-0"] : ["size-8"];
+        return isAddon ? ["size-6", "[[data-slot=input-group][data-size=sm]_&]:size-5", "p-0", "has-[>svg]:p-0", "has-[>[data-slot=spinner]]:p-0"] : ["size-6.5"];
+      case "icon-md":
+        return isAddon ? ["size-8", "p-0", "has-[>svg]:p-0"] : ["size-8"];
       case "icon":
         return ["size-9"];
-      case "icon-lg":
-        return ["size-10"];
       default:
-        return ["h-9", "px-4", "py-2", "has-[>svg]:px-3"];
+        return ["h-9", "px-4", "py-2", "has-[>svg]:px-3", "has-[>[data-slot=spinner]]:px-3"];
     }
   };
   function button_default(Alpine) {
@@ -620,7 +616,7 @@
       if (!el.hasAttribute("data-slot")) {
         el.setAttribute("data-slot", "button");
       }
-      const inGroup = modifiers.includes("group");
+      const isAddon = modifiers.includes("addon");
       let lastSize;
       function setVariant(variant) {
         for (const [_, value] of Object.entries(buttonVariants)) {
@@ -628,34 +624,34 @@
         }
         if (buttonVariants.hasOwnProperty(variant)) el.classList.add(...buttonVariants[variant]);
       }
-      function setSize(size3 = "default") {
-        el.classList.remove(...getButtonSize(lastSize, inGroup));
-        el.classList.add(...getButtonSize(size3, inGroup));
+      function setSize2(size3 = "default") {
+        el.classList.remove(...getButtonSize(lastSize, isAddon));
+        el.classList.add(...getButtonSize(size3, isAddon));
         if (size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
           console.error(`${original}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
         }
         lastSize = size3;
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
-      if (inGroup) {
+      if (isAddon) {
         el.classList.remove("shadow-button", "inline-flex");
         el.classList.add("shadow-none", "flex");
-        setSize(el.getAttribute("data-size") ?? "xs");
+        setSize2(el.getAttribute("data-size") ?? "sm");
       } else {
         if (el.hasAttribute("data-size")) {
-          setSize(el.getAttribute("data-size"));
+          setSize2(el.getAttribute("data-size"));
         } else {
           if (["date-picker-trigger", "time-picker-trigger"].includes(el.getAttribute("data-slot"))) {
-            setSize("icon-xs");
+            setSize2("icon-sm");
           } else {
-            setSize();
+            setSize2();
           }
         }
       }
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
           if (mutation.attributeName === "data-variant") setVariant(el.getAttribute("data-variant") ?? "default");
-          else setSize(el.getAttribute("data-size") ?? (inGroup ? "xs" : "default"));
+          else setSize2(el.getAttribute("data-size") ?? (isAddon ? "sm" : "default"));
         });
       });
       observer.observe(el, { attributes: true, attributeFilter: ["data-variant", "data-size"] });
@@ -2956,8 +2952,8 @@
         "flex-col",
         "w-full",
         "max-w-[calc(100%-2rem)]",
-        "translate-x-[-50%]",
-        "translate-y-[-50%]",
+        "-translate-x-1/2",
+        "-translate-y-1/2",
         "gap-4",
         "rounded-lg",
         "border",
@@ -3036,7 +3032,7 @@
       el.setAttribute("data-slot", "field-group");
     });
     Alpine.directive("h-field", (el) => {
-      el.classList.add("group/field", "w-full", "gap-3", "data-[invalid=true]:text-negative");
+      el.classList.add("group/field", "w-full", "gap-3", "has-[input:invalid]:text-negative", "has-[textarea:invalid]:text-negative", "has-[[aria-invalid=true]]:text-negative");
       switch (el.getAttribute("data-orientation")) {
         case "horizontal":
           el.classList.add("hbox", "items-center", "[&>[data-slot=field-label]]:flex-auto", "has-[>[data-slot=field-content]]:items-start", "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px");
@@ -3083,9 +3079,32 @@
         "[&>a]:underline-offset-4"
       );
       el.setAttribute("data-slot", "field-description");
+      if (el.getAttribute("data-hide-on-error") === "true") {
+        el.classList.add(
+          "[[data-slot=field]_input:invalid~&]:hidden",
+          "[[data-slot=field]_textarea:invalid~&]:hidden",
+          "[[data-slot=field]_[aria-invalid=true]~&]:hidden",
+          "group-has-[input:invalid]/field:hidden",
+          "group-has-[textarea:invalid)]/field:hidden",
+          "group-has-[[aria-invalid=true]]/field:hidden"
+        );
+      }
     });
     Alpine.directive("h-field-error", (el) => {
-      el.classList.add("text-negative", "text-sm", "font-normal");
+      el.classList.add(
+        "hidden",
+        "[[data-slot=field]_input:invalid~&]:block",
+        "[[data-slot=field]_textarea:invalid~&]:block",
+        "[[data-slot=field]_[aria-invalid=true]~&]:block",
+        "group-has-[input:invalid]/field:block",
+        "group-has-[textarea:invalid)]/field:block",
+        "group-has-[[aria-invalid=true]]/field:block",
+        "text-negative",
+        "text-sm",
+        "leading-normal",
+        "font-normal",
+        "group-has-[[data-orientation=horizontal]]/field:text-balance"
+      );
       el.setAttribute("data-slot", "field-error");
     });
   }
@@ -3150,20 +3169,35 @@
     });
   }
 
+  // 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 }) => {
+    Alpine.directive("h-input", (el, { modifiers }, { cleanup }) => {
       el.classList.add(
         "file:text-foreground",
         "placeholder:text-muted-foreground",
         "selection:bg-primary",
         "selection:text-primary-foreground",
-        "bg-input-inner",
         "border-input",
-        "w-full",
         "min-w-0",
-        "rounded-control",
-        "border",
         "[&:not([type='color'])]:px-3",
         "[&:not([type='color'])]:py-1",
         "[&[type='color']]:overflow-hidden",
@@ -3172,7 +3206,6 @@
         "[&::-webkit-color-swatch-wrapper]:rounded-0",
         "[&::-webkit-color-swatch-wrapper]:p-0",
         "text-base",
-        "shadow-input",
         "transition-[color,box-shadow]",
         "outline-none",
         "file:inline-flex",
@@ -3187,7 +3220,6 @@
         "md:text-sm",
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
-        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "aria-invalid:ring-negative/20",
         "dark:aria-invalid:ring-negative/40",
         "aria-invalid:border-negative",
@@ -3196,15 +3228,18 @@
         "invalid:!border-negative"
       );
       if (modifiers.includes("group")) {
-        el.classList.remove("rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[calc(var(--spacing)*0.75)]");
-        el.classList.add("flex-1", "rounded-none", "border-0", "bg-transparent", "shadow-none", "focus-visible:ring-0");
+        el.classList.add("h-full", "flex-1", "rounded-none", "border-0", "bg-transparent", "shadow-none", "focus-visible:ring-0");
         el.setAttribute("data-slot", "input-group-control");
-      } else el.setAttribute("data-slot", "input");
-      if (el.getAttribute("data-size") === "sm") el.classList.add("h-8");
-      else if (el.getAttribute("data-size") === "xs") el.classList.add("h-6.5");
-      else el.classList.add("h-9");
+      } else {
+        el.classList.add("w-full", "rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[calc(var(--spacing)*0.75)]");
+        el.setAttribute("data-slot", "input");
+        const observer = sizeObserver(el);
+        cleanup(() => {
+          observer.disconnect();
+        });
+      }
     });
-    Alpine.directive("h-input-group", (el) => {
+    Alpine.directive("h-input-group", (el, _, { cleanup }) => {
       el.classList.add(
         "group/input-group",
         "border-input",
@@ -3218,7 +3253,6 @@
         "shadow-input",
         "transition-[color,box-shadow]",
         "outline-none",
-        "h-9",
         "min-w-0",
         "has-[>textarea]:h-auto",
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
@@ -3238,6 +3272,10 @@
       );
       el.setAttribute("role", "group");
       el.setAttribute("data-slot", "input-group");
+      const observer = sizeObserver(el);
+      cleanup(() => {
+        observer.disconnect();
+      });
     });
     Alpine.directive("h-input-group-addon", (el, _, { cleanup }) => {
       el.classList.add(
@@ -3248,7 +3286,6 @@
         "items-center",
         "justify-center",
         "gap-2",
-        "py-1.5",
         "text-sm",
         "font-medium",
         "select-none",
@@ -3260,8 +3297,24 @@
       el.setAttribute("role", "group");
       el.setAttribute("data-slot", "input-group-addon");
       const variants = {
-        "inline-start": ["order-first", "pl-3", "has-[>button]:ml-[-0.45rem]", "has-[>[data-slot=tag]]:ml-[-0.35rem]"],
-        "inline-end": ["order-last", "pr-3", "has-[>button]:mr-[-0.45rem]", "has-[>[data-slot=tag]]:mr-[-0.35rem]"],
+        "inline-start": [
+          "order-first",
+          "pl-3",
+          "[[data-slot=input-group][data-size=sm]_&]:pl-1.25",
+          "has-[>button]:pl-1.25",
+          "[[data-slot=input-group][data-size=sm]_&]:has-[>button]:pl-0.5",
+          "has-[>[data-slot|=tag]]:pl-1.5",
+          "[[data-slot=input-group][data-size=sm]_&]:has-[>[data-slot|=tag]]:pl-0.5"
+        ],
+        "inline-end": [
+          "order-last",
+          "pr-3",
+          "[[data-slot=input-group][data-size=sm]_&]:pr-1.25",
+          "has-[>button]:pr-1.25",
+          "[[data-slot=input-group][data-size=sm]_&]:has-[>button]:pr-0.5",
+          "has-[>[data-slot|=tag]]:pr-1.5",
+          "[[data-slot=input-group][data-size=sm]_&]:has-[>[data-slot|=tag]]:pr-0.5"
+        ],
         "block-start": ["order-first", "w-full", "justify-start", "px-3", "pt-3", "[.border-b]:pb-3", "group-has-[>input]/input-group:pt-2.5"],
         "block-end": ["order-last", "w-full", "justify-start", "px-3", "pb-3", "[.border-t]:pt-3", "group-has-[>input]/input-group:pb-2.5"]
       };
@@ -3286,6 +3339,136 @@
       el.classList.add("text-muted-foreground", "flex", "items-center", "gap-2", "text-sm", "[&_svg]:pointer-events-none", "[&_svg:not([class*='size-'])]:size-4");
       el.setAttribute("data-slot", "label");
     });
+    Alpine.directive("h-input-number", (el, { original }, { cleanup }) => {
+      el.classList.add(
+        "group/input-number",
+        "border-input",
+        "bg-input-inner",
+        "relative",
+        "flex",
+        "w-full",
+        "items-center",
+        "rounded-control",
+        "border",
+        "shadow-input",
+        "transition-[color,box-shadow]",
+        "outline-none",
+        "min-w-0",
+        "has-[[data-slot=input-number-control]:focus-visible]:border-ring",
+        "has-[[data-slot=input-number-control]:focus-visible]:ring-ring/50",
+        "has-[[data-slot=input-number-control]:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
+        "has-[[data-slot][aria-invalid=true]]:ring-negative/20",
+        "has-[[data-slot][aria-invalid=true]]:border-negative",
+        "dark:has-[[data-slot][aria-invalid=true]]:ring-negative/40"
+      );
+      el.setAttribute("role", "group");
+      el.setAttribute("data-slot", "input-number");
+      const input = el.querySelector("input");
+      if (!input || input.getAttribute("type") !== "number") {
+        throw new Error(`${original} must contain an input of type 'number'`);
+      }
+      if (!input.hasAttribute("type")) input.setAttribute("type", "number");
+      if (!input.hasAttribute("inputmode")) input.setAttribute("inputmode", "numeric");
+      if (!input.hasAttribute("aria-roledescription")) {
+        input.setAttribute("aria-roledescription", "Number field");
+      }
+      if (!input.hasAttribute("id")) {
+        input.setAttribute("id", `in${v4_default()}`);
+      }
+      input.setAttribute("tabindex", "0");
+      input.setAttribute("autocomplete", "off");
+      input.setAttribute("autocorrect", "off");
+      input.setAttribute("spellcheck", "off");
+      input.setAttribute("data-slot", "input-number-control");
+      input.classList.add("rounded-l-control", "size-full", "px-3", "py-1", "outline-none");
+      const stepDown = document.createElement("button");
+      stepDown.setAttribute("type", "button");
+      stepDown.setAttribute("tabIndex", "-1");
+      stepDown.setAttribute("aria-label", "Decrease");
+      stepDown.setAttribute("aria-controls", input.getAttribute("id"));
+      stepDown.setAttribute("data-slot", "step-up-trigger");
+      stepDown.classList.add(
+        "border-l",
+        "border-input",
+        "h-full",
+        "aspect-square",
+        "bg-transparent",
+        "hover:bg-secondary",
+        "active:bg-secondary-active",
+        "outline-none",
+        "relative",
+        "before:block",
+        "before:rounded-full",
+        "before:h-0.5",
+        "before:min-h-px",
+        "before:w-3",
+        "before:mx-auto",
+        "before:bg-foreground",
+        "before:hover:bg-secondary-foreground"
+      );
+      el.appendChild(stepDown);
+      const onStepDown = () => {
+        input.stepDown();
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+      };
+      stepDown.addEventListener("click", onStepDown);
+      const stepUp = document.createElement("button");
+      stepUp.setAttribute("type", "button");
+      stepUp.setAttribute("tabIndex", "-1");
+      stepUp.setAttribute("aria-label", "Increase");
+      stepUp.setAttribute("aria-controls", input.getAttribute("id"));
+      stepUp.setAttribute("data-slot", "step-up-trigger");
+      stepUp.classList.add(
+        "border-l",
+        "border-input",
+        "rounded-r-control",
+        "h-full",
+        "aspect-square",
+        "bg-transparent",
+        "hover:bg-secondary",
+        "active:bg-secondary-active",
+        "outline-none",
+        "relative",
+        "before:block",
+        "before:absolute",
+        "before:rounded-full",
+        "before:h-0.5",
+        "before:min-h-px",
+        "before:w-3",
+        "before:top-1/2",
+        "before:left-1/2",
+        "before:-translate-x-1/2",
+        "before:-translate-y-1/2",
+        "before:bg-foreground",
+        "before:hover:bg-secondary-foreground",
+        "after:block",
+        "after:absolute",
+        "after:rounded-full",
+        "after:h-3",
+        "after:min-w-px",
+        "after:w-0.5",
+        "after:top-1/2",
+        "after:left-1/2",
+        "after:-translate-x-1/2",
+        "after:-translate-y-1/2",
+        "after:bg-foreground",
+        "after:hover:bg-secondary-foreground"
+      );
+      el.appendChild(stepUp);
+      const onStepUp = () => {
+        input.stepUp();
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+      };
+      stepUp.addEventListener("click", onStepUp);
+      const observer = sizeObserver(el);
+      cleanup(() => {
+        observer.disconnect();
+        stepDown.removeEventListener("click", onStepDown);
+        stepUp.removeEventListener("click", onStepUp);
+      });
+    });
   }
 
   // src/components/label.js
@@ -6286,23 +6469,7 @@
         "[&_svg]:opacity-50"
       );
       el.setAttribute("data-slot", "select");
-      const setSize = (size3) => {
-        if (size3 === "sm") {
-          el.classList.add("h-8");
-          el.classList.remove("h-9", "h-6.5");
-        } else if (size3 === "xs") {
-          el.classList.add("h-6.5");
-          el.classList.remove("h-9", "h-8");
-        } else {
-          el.classList.add("h-9");
-          el.classList.remove("h-8", "h-6.5");
-        }
-      };
-      setSize(el.getAttribute("data-size"));
-      const observer = new MutationObserver(() => {
-        setSize(el.getAttribute("data-size"));
-      });
-      observer.observe(el, { attributes: true, attributeFilter: ["data-size"] });
+      const observer = sizeObserver(el);
       cleanup(() => {
         observer.disconnect();
       });
@@ -7044,13 +7211,13 @@
         sm: ["h-7", "text-xs"],
         lg: ["h-12", "text-sm", "group-data-[collapsed=true]/sidebar:p-0!"]
       };
-      function setSize(size3) {
+      function setSize2(size3) {
         if (sizes.hasOwnProperty(size3)) {
           el.classList.add(...sizes[size3]);
         }
       }
       if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "default");
-      setSize(el.getAttribute("data-size"));
+      setSize2(el.getAttribute("data-size"));
     });
     Alpine.directive("h-sidebar-menu-action", (el, { modifiers }) => {
       el.classList.add(
@@ -7182,13 +7349,13 @@
         sm: ["text-xs"],
         md: ["text-sm"]
       };
-      function setSize(size3) {
+      function setSize2(size3) {
         if (sizes.hasOwnProperty(size3)) {
           el.classList.add(...sizes[size3]);
         }
       }
       if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "md");
-      setSize(el.getAttribute("data-size"));
+      setSize2(el.getAttribute("data-size"));
     });
     Alpine.directive("h-sidebar-footer", (el) => {
       el.classList.add("vbox", "gap-2", "px-2", "h-12", "justify-center", "border-t");
@@ -7204,10 +7371,10 @@
       if (modifiers.includes("control")) {
         el.classList.add("rounded-control");
         switch (el.getAttribute("data-size")) {
-          case "xs":
+          case "sm":
             el.classList.add("h-6.5");
             break;
-          case "sm":
+          case "md":
             el.classList.add("h-8");
             break;
           default:
@@ -7226,7 +7393,20 @@
   // src/components/spinner.js
   function spinner_default(Alpine) {
     Alpine.directive("h-spinner", (el) => {
-      el.classList.add("size-4", "border-2", "border-x-primary", "border-b-primary", "border-t-transparent", "rounded-full", "animate-spin");
+      el.classList.add(
+        "size-4",
+        "border-2",
+        "border-primary",
+        "[[data-slot=button]_&]:border-secondary-foreground",
+        "[[data-slot=button][data-variant=primary]_&]:border-primary-foreground",
+        "[[data-slot=button][data-variant=positive]_&]:border-positive-foreground",
+        "[[data-slot=button][data-variant=negative]_&]:border-negative-foreground",
+        "[[data-slot=button][data-variant=warning]_&]:border-warning-foreground",
+        "[[data-slot=button][data-variant=information]_&]:border-information-foreground",
+        "!border-t-transparent",
+        "rounded-full",
+        "animate-spin"
+      );
       el.setAttribute("role", "status");
       el.setAttribute("data-slot", "spinner");
       if (!el.hasAttribute("aria-label")) el.setAttribute("aria-label", "Loading");
@@ -7785,6 +7965,10 @@
         "group/tile",
         "flex",
         "items-center",
+        "py-3",
+        "px-4",
+        "has-data-[slot=tile-header]:py-4",
+        "gap-2.5",
         "text-sm",
         "rounded-lg",
         "transition-colors",
@@ -7799,14 +7983,6 @@
         "focus-visible:ring-[calc(var(--spacing)*0.75)]"
       );
       el.setAttribute("data-slot", "tile");
-      const sizes = {
-        default: ["p-4", "gap-4"],
-        sm: ["py-3", "px-4", "gap-2.5"]
-      };
-      function setSize(size3) {
-        el.classList.add(...sizes[size3]);
-        el.setAttribute("data-size", size3);
-      }
       switch (el.getAttribute("data-variant")) {
         case "outline":
           el.classList.add("border", "border-border");
@@ -7820,9 +7996,6 @@
         default:
           el.classList.add("border", "bg-transparent", "border-transparent");
       }
-      if (el.getAttribute("data-size") === "sm") {
-        setSize("sm");
-      } else setSize("sm");
     });
     Alpine.directive("h-tile-header", (el) => {
       el.classList.add("flex", "basis-full", "items-center", "justify-between", "gap-2");
@@ -9077,7 +9250,7 @@
   }
 
   // package.json
-  var version = "0.9.1";
+  var version = "1.0.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };