@codbex/harmonia 0.4.0 → 0.5.0

package/dist/harmonia.esm.js

@@ -18436,7 +18436,7 @@ function accordion_default(Alpine) {
     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() {
@@ -18471,7 +18471,18 @@ function accordion_default(Alpine) {
     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 = (0, import_lucide.createElement)(import_lucide.ChevronDown, {
@@ -18490,10 +18501,9 @@ function accordion_default(Alpine) {
       "focus-visible:ring-ring/50",
       "flex",
       "flex-1",
-      "items-start",
+      "items-center",
       "justify-between",
       "gap-4",
-      "py-4",
       "text-left",
       "text-sm",
       "font-medium",
@@ -18593,13 +18603,11 @@ function alert_default(Alpine) {
     }
     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();
     });
@@ -18630,6 +18638,7 @@ function avatar_default(Alpine) {
       "has-[img]:border-0",
       "flex",
       "size-8",
+      "aspect-square",
       "shrink-0",
       "overflow-hidden",
       "rounded-full",
@@ -18672,13 +18681,11 @@ function avatar_default(Alpine) {
       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();
@@ -18721,12 +18728,6 @@ function badge_default(Alpine) {
       "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"
     );
@@ -18748,13 +18749,11 @@ function badge_default(Alpine) {
     }
     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();
     });
@@ -18822,7 +18821,6 @@ var buttonVariants = {
     "border",
     "bg-background",
     "text-foreground",
-    "shadow-none",
     "hover:bg-secondary",
     "hover:text-secondary-foreground",
     "active:bg-secondary-active",
@@ -18870,11 +18868,31 @@ var setButtonClasses = (el) => {
     "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);
@@ -18882,16 +18900,6 @@ function button_default(Alpine) {
       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);
@@ -18899,12 +18907,9 @@ function button_default(Alpine) {
       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");
@@ -18919,19 +18924,17 @@ function button_default(Alpine) {
         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();
     });
@@ -21159,8 +21162,8 @@ function dialog_default(Alpine) {
     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++) {
@@ -21179,7 +21182,7 @@ function dialog_default(Alpine) {
         }
       });
     });
-    observer.observe(el, { attributes: true });
+    observer.observe(el, { attributes: true, attributeFilter: ["data-open"] });
     cleanup(() => {
       observer.disconnect();
     });
@@ -21419,9 +21422,9 @@ function input_default(Alpine) {
       "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]");
@@ -21573,9 +21576,9 @@ function list_default(Alpine) {
       "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"
     );
@@ -22617,10 +22620,28 @@ function select_default(Alpine) {
       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");
@@ -22635,17 +22656,15 @@ function select_default(Alpine) {
     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];
@@ -22655,48 +22674,6 @@ function select_default(Alpine) {
         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");
@@ -22708,21 +22685,6 @@ function select_default(Alpine) {
     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);
@@ -22807,7 +22769,7 @@ function select_default(Alpine) {
     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");
@@ -22939,7 +22901,7 @@ function select_default(Alpine) {
       "cursor-default",
       "items-center",
       "gap-2",
-      "rounded-control",
+      "rounded-sm",
       "py-1.5",
       "pr-8",
       "pl-2",
@@ -23099,15 +23061,11 @@ function sidebar_default(Alpine) {
     };
     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();
     });
@@ -23394,10 +23352,21 @@ function skeleton_default(Alpine) {
     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");
   });
@@ -23760,8 +23729,11 @@ function text_default(Alpine) {
       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");
@@ -23795,9 +23767,9 @@ function textarea_default(Alpine) {
       "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",
@@ -24583,6 +24555,7 @@ function toolbar_default(Alpine) {
       "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",
@@ -24592,11 +24565,11 @@ function toolbar_default(Alpine) {
     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) => {
@@ -24605,7 +24578,7 @@ function toolbar_default(Alpine) {
     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");
   });
 }
@@ -24688,7 +24661,24 @@ function tooltip_default(Alpine) {
 }
 
 // package.json
-var version = "0.4.0";
+var version = "0.5.0";
+
+// 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);
+    }
+  };
+}
 
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
@@ -24742,52 +24732,47 @@ var getColorScheme = () => {
 initColorScheme();
 
 // src/module.js
-var Harmonia = {
-  init(registerPlugin) {
-    registerPlugin(accordion_default);
-    registerPlugin(alert_default);
-    registerPlugin(avatar_default);
-    registerPlugin(badge_default);
-    registerPlugin(button_default);
-    registerPlugin(calendar_default);
-    registerPlugin(card_default);
-    registerPlugin(checkbox_default);
-    registerPlugin(collapsible_default);
-    registerPlugin(datepicker_default);
-    registerPlugin(dialog_default);
-    registerPlugin(fieldset_default);
-    registerPlugin(icon_default);
-    registerPlugin(info_page_default);
-    registerPlugin(input_default);
-    registerPlugin(label_default);
-    registerPlugin(list_default);
-    registerPlugin(menu_default);
-    registerPlugin(pagination_default);
-    registerPlugin(popover_default);
-    registerPlugin(progress_default);
-    registerPlugin(radio_default);
-    registerPlugin(range_default);
-    registerPlugin(select_default);
-    registerPlugin(separator_default);
-    registerPlugin(sidebar_default);
-    registerPlugin(skeleton_default);
-    registerPlugin(spinner_default);
-    registerPlugin(switch_default);
-    registerPlugin(table_default);
-    registerPlugin(tabs_default);
-    registerPlugin(tag_default);
-    registerPlugin(text_default);
-    registerPlugin(textarea_default);
-    registerPlugin(tile_default);
-    registerPlugin(timepicker_default);
-    registerPlugin(toolbar_default);
-    registerPlugin(tooltip_default);
-  },
-  setColorScheme,
-  getColorScheme,
-  version
+var registerComponents = (registerPlugin) => {
+  registerPlugin(accordion_default);
+  registerPlugin(alert_default);
+  registerPlugin(avatar_default);
+  registerPlugin(badge_default);
+  registerPlugin(button_default);
+  registerPlugin(calendar_default);
+  registerPlugin(card_default);
+  registerPlugin(checkbox_default);
+  registerPlugin(collapsible_default);
+  registerPlugin(datepicker_default);
+  registerPlugin(dialog_default);
+  registerPlugin(fieldset_default);
+  registerPlugin(icon_default);
+  registerPlugin(info_page_default);
+  registerPlugin(input_default);
+  registerPlugin(label_default);
+  registerPlugin(list_default);
+  registerPlugin(menu_default);
+  registerPlugin(pagination_default);
+  registerPlugin(popover_default);
+  registerPlugin(progress_default);
+  registerPlugin(radio_default);
+  registerPlugin(range_default);
+  registerPlugin(select_default);
+  registerPlugin(separator_default);
+  registerPlugin(sidebar_default);
+  registerPlugin(skeleton_default);
+  registerPlugin(spinner_default);
+  registerPlugin(switch_default);
+  registerPlugin(table_default);
+  registerPlugin(tabs_default);
+  registerPlugin(tag_default);
+  registerPlugin(text_default);
+  registerPlugin(textarea_default);
+  registerPlugin(tile_default);
+  registerPlugin(timepicker_default);
+  registerPlugin(toolbar_default);
+  registerPlugin(tooltip_default);
 };
-var module_default = Harmonia;
+var module_default = registerComponents;
 export {
   accordion_default as Accordion,
   alert_default as Alert,
@@ -24827,7 +24812,12 @@ export {
   timepicker_default as TimePicker,
   toolbar_default as Toolbar,
   tooltip_default as Tooltip,
-  module_default as default
+  module_default as default,
+  getBreakpointListener,
+  getColorScheme,
+  registerComponents,
+  setColorScheme,
+  version
 };
 /*! Bundled license information: