@codbex/harmonia 0.4.0 → 0.5.0

package/dist/harmonia.js

@@ -148,7 +148,7 @@
       if (!accordion) {
         throw new Error("h-accordion-item must be inside an h-accordion");
       }
-      el.classList.add("border-b", "last:border-b-0");
+      el.classList.add("border-b", "last:border-b-0", "[[data-variant=header]_&]:data-[state=closed]:border-b-0");
       el.setAttribute("data-slot", "accordion-item");
       const itemId = expression ?? `ha${v4_default()}`;
       function getIsExpanded() {
@@ -183,7 +183,18 @@
       if (!accordionItem || !accordion) {
         throw new Error("h-accordion-trigger must be inside an h-accordion-item, which must be inside an h-accordion");
       }
-      el.classList.add("flex");
+      el.classList.add(
+        "flex",
+        "h-12",
+        "[[data-size=md]_&]:h-10",
+        "[[data-size=sm]_&]:h-8",
+        "[[data-variant=header]_&]:bg-object-header",
+        "[[data-variant=header]_&]:text-object-header-foreground",
+        "[[data-variant=header]_&]:px-4",
+        "[[data-variant=header]_&]:border-b",
+        "[[data-size=md][data-variant=header]_&]:px-3",
+        "[[data-size=sm][data-variant=header]_&]:px-2.5"
+      );
       el.setAttribute("tabIndex", "-1");
       const getLabel = evaluateLater(expression);
       const chevronDown = createElement(ChevronDown, {
@@ -202,10 +213,9 @@
         "focus-visible:ring-ring/50",
         "flex",
         "flex-1",
-        "items-start",
+        "items-center",
         "justify-between",
         "gap-4",
-        "py-4",
         "text-left",
         "text-sm",
         "font-medium",
@@ -305,13 +315,11 @@
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes" && mutation.attributeName === "data-variant") {
-            setVariant(el.getAttribute("data-variant") ?? "default");
-          }
+        mutations.forEach(() => {
+          setVariant(el.getAttribute("data-variant") ?? "default");
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -342,6 +350,7 @@
         "has-[img]:border-0",
         "flex",
         "size-8",
+        "aspect-square",
         "shrink-0",
         "overflow-hidden",
         "rounded-full",
@@ -384,13 +393,11 @@
         interval = setInterval(completeCheck, 10);
       }
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes") {
-            if (mutation.attributeName === "src") interval = setInterval(completeCheck, 10);
-          }
+        mutations.forEach(() => {
+          interval = setInterval(completeCheck, 10);
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["src"] });
       cleanup(() => {
         if (interval) clearInterval(interval);
         observer.disconnect();
@@ -433,12 +440,6 @@
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
         "focus-visible:ring-[3px]",
-        "aria-invalid:ring-negative/20",
-        "dark:aria-invalid:ring-negative/40",
-        "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative",
         "transition-[color,box-shadow]",
         "overflow-hidden"
       );
@@ -460,13 +461,11 @@
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes" && mutation.attributeName === "data-variant") {
-            setVariant(el.getAttribute("data-variant") ?? "default");
-          }
+        mutations.forEach(() => {
+          setVariant(el.getAttribute("data-variant") ?? "default");
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -534,7 +533,6 @@
       "border",
       "bg-background",
       "text-foreground",
-      "shadow-none",
       "hover:bg-secondary",
       "hover:text-secondary-foreground",
       "active:bg-secondary-active",
@@ -582,11 +580,31 @@
       "aria-invalid:ring-negative/20",
       "dark:aria-invalid:ring-negative/40",
       "aria-invalid:border-negative",
-      "invalid:ring-negative/20",
-      "dark:invalid:ring-negative/40",
-      "invalid:border-negative"
+      "invalid:!ring-negative/20",
+      "dark:invalid:!ring-negative/40",
+      "invalid:!border-negative"
     );
   };
+  var getButtonSize = (size3, inGroup = 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"];
+      case "icon-sm":
+        return inGroup ? ["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"];
+    }
+  };
   function button_default(Alpine) {
     Alpine.directive("h-button", (el, { modifiers }, { cleanup }) => {
       setButtonClasses(el);
@@ -594,16 +612,6 @@
         el.setAttribute("data-slot", "button");
       }
       const inGroup = modifiers.includes("group");
-      const sizes = {
-        default: ["h-9", "px-4", "py-2", "has-[>svg]:px-3"],
-        xs: 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"],
-        sm: 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"],
-        lg: ["h-10", "px-6", "has-[>svg]:px-4"],
-        "icon-xs": inGroup ? ["size-6", "p-0", "has-[>svg]:p-0"] : ["size-6.5"],
-        "icon-sm": inGroup ? ["size-8", "p-0", "has-[>svg]:p-0"] : ["size-8"],
-        icon: ["size-9"],
-        "icon-lg": ["size-10"]
-      };
       function setVariant(variant) {
         for (const [_, value] of Object.entries(buttonVariants)) {
           el.classList.remove(...value);
@@ -611,12 +619,9 @@
         if (buttonVariants.hasOwnProperty(variant)) el.classList.add(...buttonVariants[variant]);
       }
       function setSize(size3) {
-        if (sizes.hasOwnProperty(size3)) {
-          el.classList.add(...sizes[size3]);
-          el.setAttribute("data-size", size3);
-          if (size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-            console.error('h-button: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute', el);
-          }
+        el.classList.add(...getButtonSize(size3, inGroup));
+        if (size3 && size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
+          console.error('h-button: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute', el);
         }
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
@@ -631,19 +636,17 @@
           if (["date-picker-trigger", "time-picker-trigger"].includes(el.getAttribute("data-slot"))) {
             setSize("icon-xs");
           } else {
-            setSize("default");
+            setSize();
           }
         }
       }
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
-          if (mutation.type === "attributes") {
-            if (mutation.attributeName === "data-variant") setVariant(el.getAttribute("data-variant") ?? "default");
-            else if (mutation.attributeName === "data-size") setSize(el.getAttribute("data-size") ?? (inGroup ? "xs" : "default"));
-          }
+          if (mutation.attributeName === "data-variant") setVariant(el.getAttribute("data-variant") ?? "default");
+          else setSize(el.getAttribute("data-size") ?? (inGroup ? "xs" : "default"));
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant", "data-size"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -2869,8 +2872,8 @@
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "dialog-overlay");
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes" && mutation.attributeName === "data-open" && el.getAttribute("data-open") === "true") {
+        mutations.forEach(() => {
+          if (el.getAttribute("data-open") === "true") {
             const inputs = el.getElementsByTagName("INPUT");
             if (inputs.length) {
               for (let i = 0; i < inputs.length; i++) {
@@ -2889,7 +2892,7 @@
           }
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-open"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -3129,9 +3132,9 @@
         "aria-invalid:ring-negative/20",
         "dark:aria-invalid:ring-negative/40",
         "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative"
+        "invalid:!ring-negative/20",
+        "dark:invalid:!ring-negative/40",
+        "invalid:!border-negative"
       );
       if (modifiers.includes("group")) {
         el.classList.remove("rounded-control", "border", "bg-input-inner", "shadow-control", "focus-visible:ring-[3px]");
@@ -3283,9 +3286,9 @@
         "aria-invalid:ring-negative/20",
         "dark:aria-invalid:ring-negative/40",
         "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative",
+        "invalid:!ring-negative/20",
+        "dark:invalid:!ring-negative/40",
+        "invalid:!border-negative",
         "[&>ul:first-child>*:first-child]:rounded-t-control",
         "[&>ul:last-child>*:last-child]:rounded-b-control"
       );
@@ -6185,10 +6188,28 @@
         select._select.multiple = Array.isArray(el._x_model.get());
         select._select.model = el._x_model.get();
       }
+      setButtonClasses(el);
+      const setVariant = (variant) => {
+        if (variant === "secondary") {
+          el.classList.add(...buttonVariants["default"]);
+          return;
+        } else if (variant === "transparent") {
+          el.classList.add(...buttonVariants["transparent"]);
+        } else el.classList.add("shadow-control", ...buttonVariants["outline"]);
+      };
+      const setSize = (size3) => {
+        const sizes = ["sm", "xs", "lg"];
+        if (sizes.includes(size3)) {
+          el.classList.add(...getButtonSize(size3));
+        } else el.classList.add(...getButtonSize());
+      };
+      setVariant(el.getAttribute("data-variant"));
+      setSize(el.getAttribute("data-size"));
+      el.classList.add("w-full", "[&_svg]:opacity-50", "[&[data-state=open]>svg]:rotate-180");
       el.setAttribute("type", "button");
       const selectValue = document.createElement("span");
       selectValue.setAttribute("data-slot", "select-value");
-      selectValue.classList.add("pointer-events-none");
+      selectValue.classList.add("text-left", "truncate", "pointer-events-none", "w-full");
       function getPlaceholder() {
         if (!el.value) {
           const value = el.getAttribute("placeholder");
@@ -6203,17 +6224,15 @@
       getPlaceholder();
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
-          if (mutation.type === "attributes") {
-            if (mutation.attributeName === "value") {
-              el.dispatchEvent(new Event("change", { bubbles: true }));
-              if (el.value) selectValue.classList.remove("text-muted-foreground");
-            } else if (mutation.attributeName === "placeholder" && !select._select.label.length) {
-              getPlaceholder();
-            }
+          if (mutation.attributeName === "value") {
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+            if (el.value) selectValue.classList.remove("text-muted-foreground");
+          } else if (mutation.attributeName === "placeholder" && !select._select.label.length) {
+            getPlaceholder();
           }
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["value", "placeholder"] });
       effect(() => {
         if (select._select.label.length === 1) {
           selectValue.innerText = select._select.label[0];
@@ -6223,48 +6242,6 @@
           getPlaceholder();
         }
       });
-      el.classList.add(
-        "[&>*]:pointer-events-none",
-        "cursor-pointer",
-        "border-input",
-        "focus-visible:border-ring",
-        "focus-visible:ring-ring/50",
-        "aria-invalid:ring-negative/20",
-        "dark:aria-invalid:ring-negative/40",
-        "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative",
-        "hover:bg-secondary-hover",
-        "active:bg-secondary-active",
-        "flex",
-        "w-full",
-        "items-center",
-        "justify-between",
-        "gap-2",
-        "rounded-control",
-        "border",
-        "bg-input-inner",
-        "px-3",
-        "text-sm",
-        "whitespace-nowrap",
-        "shadow-control",
-        "transition-[color,box-shadow]",
-        "outline-none",
-        "focus-visible:ring-[3px]",
-        "disabled:cursor-not-allowed",
-        "disabled:opacity-50",
-        "*:data-[slot=select-value]:line-clamp-1",
-        "*:data-[slot=select-value]:flex",
-        "*:data-[slot=select-value]:items-center",
-        "*:data-[slot=select-value]:gap-2",
-        "[&_svg]:pointer-events-none",
-        "[&_svg]:shrink-0",
-        "[&_svg:not([class*='size-'])]:size-4",
-        "[&_svg]:size-4",
-        "[&_svg]:opacity-50",
-        "[&[data-state=open]>svg]:rotate-180"
-      );
       el.setAttribute("data-slot", "select-trigger");
       if (el.hasAttribute("id")) {
         select._select.id = el.getAttribute("id");
@@ -6276,21 +6253,6 @@
       el.setAttribute("aria-haspopup", "listbox");
       el.setAttribute("aria-autocomplete", "none");
       el.setAttribute("role", "combobox");
-      const sizes = {
-        default: ["h-9", "py-2"],
-        xs: ["h-6.5", "py-[0.188rem]"],
-        sm: ["h-8", "py-1.5"]
-      };
-      function setSize(size3) {
-        for (const [_, value] of Object.entries(sizes)) {
-          el.classList.remove(...value);
-        }
-        if (sizes.hasOwnProperty(size3)) {
-          el.classList.add(...sizes[size3]);
-        }
-      }
-      if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "default");
-      setSize(el.getAttribute("data-size"));
       effect(() => {
         el.setAttribute("data-state", select._select.expanded ? "open" : "closed");
         el.setAttribute("aria-expanded", select._select.expanded);
@@ -6375,7 +6337,7 @@
       if (!select) {
         throw new Error("h-select-content must be inside an h-select element");
       }
-      el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "p-1", "top-0", "left-0", "z-50", "min-w-[1rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-control", "border", "shadow-md");
+      el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "p-1", "top-0", "left-0", "z-50", "min-w-[1rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "border", "shadow-md");
       el.setAttribute("data-slot", "select-content");
       el.setAttribute("role", "listbox");
       el.setAttribute("role", "presentation");
@@ -6507,7 +6469,7 @@
         "cursor-default",
         "items-center",
         "gap-2",
-        "rounded-control",
+        "rounded-sm",
         "py-1.5",
         "pr-8",
         "pl-2",
@@ -6667,15 +6629,11 @@
       };
       setFloating();
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes") {
-            if (mutation.attributeName === "data-floating") {
-              setFloating();
-            }
-          }
+        mutations.forEach(() => {
+          setFloating();
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-floating"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -6962,10 +6920,21 @@
       el.classList.add("bg-secondary", "animate-pulse");
       if (modifiers.includes("control")) {
         el.classList.add("rounded-control");
+        switch (el.getAttribute("data-size")) {
+          case "xs":
+            el.classList.add("h-6.5");
+            break;
+          case "sm":
+            el.classList.add("h-8");
+            break;
+          default:
+            el.classList.add("h-9");
+            break;
+        }
       } else if (modifiers.includes("card")) {
         el.classList.add("rounded-lg");
       } else if (modifiers.includes("avatar")) {
-        el.classList.add("rounded-full", "size-8");
+        el.classList.add("rounded-full", "size-8", "aspect-square");
       } else el.classList.add("rounded-md");
       el.setAttribute("data-slot", "skeleton");
     });
@@ -7328,8 +7297,11 @@
         case "blockquote":
           el.classList.add("mt-6", "border-l-2", "pl-6", "italic");
           break;
+        case "code-inline":
+          el.classList.add("bg-muted", "relative", "rounded", "px-[0.3rem]", "py-[0.2rem]", "font-mono", "text-sm", "font-semibold", "whitespace-pre");
+          break;
         case "code":
-          el.classList.add("bg-muted", "relative", "rounded", "px-[0.3rem]", "py-[0.2rem]", "font-mono", "text-sm", "font-semibold");
+          el.classList.add("bg-muted", "relative", "rounded", "p-3", "font-mono", "text-sm", "font-semibold", "whitespace-pre");
           break;
         case "lead":
           el.classList.add("text-muted-foreground", "text-xl");
@@ -7363,9 +7335,9 @@
         "aria-invalid:ring-negative/20",
         "dark:aria-invalid:ring-negative/40",
         "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative",
+        "invalid:!ring-negative/20",
+        "dark:invalid:!ring-negative/40",
+        "invalid:!border-negative",
         "bg-input-inner",
         "flex",
         "field-sizing-content",
@@ -8150,6 +8122,7 @@
         "w-full",
         "h-12",
         "data-[size=sm]:h-8",
+        "data-[size=md]:h-10",
         "data-[variant=transparent]:bg-transparent",
         "data-[variant=transparent]:text-foreground",
         "data-[floating=true]:shadow-xs",
@@ -8159,11 +8132,11 @@
       el.setAttribute("data-slot", "toolbar");
     });
     Alpine.directive("h-toolbar-image", (el) => {
-      el.classList.add("size-8", "[[data-size=sm]_&]:size-6");
+      el.classList.add("size-8", "[[data-size=md]_&]:size-7", "[[data-size=sm]_&]:size-6");
       el.setAttribute("data-slot", "toolbar-image");
     });
     Alpine.directive("h-toolbar-title", (el) => {
-      el.classList.add("text", "[[data-size=sm]_&]:text-sm", "first:pl-2", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
+      el.classList.add("text", "[[data-size=sm]_&]:text-sm", "[[data-size=md]_&]:text-sm", "first:pl-2", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
       el.setAttribute("data-slot", "toolbar-title");
     });
     Alpine.directive("h-toolbar-spacer", (el) => {
@@ -8172,7 +8145,7 @@
       el.setAttribute("data-slot", "toolbar-spacer");
     });
     Alpine.directive("h-toolbar-separator", (el) => {
-      el.classList.add("w-px", "h-8", "[[data-size=sm]_&]:h-6", "border-l");
+      el.classList.add("w-px", "h-8", "[[data-size=md]_&]:h-6", "[[data-size=sm]_&]:h-6", "border-l");
       el.setAttribute("data-slot", "toolbar-separator");
     });
   }
@@ -8305,11 +8278,28 @@
   };
   initColorScheme();
 
+  // src/utils/breakpoint-listener.js
+  function getBreakpointListener(handler2, breakpoint = 768) {
+    const mql = top.matchMedia(`(width <= ${breakpoint}px)`);
+    const onWidthChange = (event) => {
+      handler2(event.matches);
+    };
+    mql.addEventListener("change", onWidthChange);
+    handler2(mql.matches);
+    return {
+      _mql: mql,
+      _onWidthChange: onWidthChange,
+      remove() {
+        this._mql.removeEventListener("change", this._onWidthChange);
+      }
+    };
+  }
+
   // package.json
-  var version = "0.4.0";
+  var version = "0.5.0";
 
   // src/index.js
-  window.Harmonia = { getColorScheme, setColorScheme, version };
+  window.Harmonia = { getBreakpointListener, getColorScheme, setColorScheme, version };
   document.addEventListener("alpine:init", () => {
     window.Alpine.plugin(accordion_default);
     window.Alpine.plugin(alert_default);