@codbex/harmonia 0.6.0 → 0.8.0

package/dist/harmonia.esm.js

@@ -18894,7 +18894,7 @@ var getButtonSize = (size3, inGroup = false) => {
   }
 };
 function button_default(Alpine) {
-  Alpine.directive("h-button", (el, { modifiers }, { cleanup }) => {
+  Alpine.directive("h-button", (el, { original, modifiers }, { cleanup }) => {
     setButtonClasses(el);
     if (!el.hasAttribute("data-slot")) {
       el.setAttribute("data-slot", "button");
@@ -18911,7 +18911,7 @@ function button_default(Alpine) {
       el.classList.remove(...getButtonSize(lastSize, inGroup));
       el.classList.add(...getButtonSize(size3, inGroup));
       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);
+        console.error(`${original}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
       }
       lastSize = size3;
     }
@@ -20456,7 +20456,7 @@ var computePosition2 = (reference, floating, options) => {
 // src/components/calendar.js
 var import_lucide2 = __toESM(require_lucide(), 1);
 function calendar_default(Alpine) {
-  Alpine.directive("h-calendar", (el, { expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-calendar", (el, { original, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
     const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
     el.classList.add("border", "rounded-control", "gap-2", "p-2");
     el.setAttribute("tabindex", "-1");
@@ -20500,7 +20500,7 @@ function calendar_default(Alpine) {
     const onInputChange = () => {
       const newValue = new Date(datepicker._h_datepicker.input.value);
       if (isNaN(newValue)) {
-        console.error(`h-calendar: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
+        console.error(`${original}: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
         datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
         return;
       } else if (selected.getTime() !== newValue.getTime()) {
@@ -20517,7 +20517,7 @@ function calendar_default(Alpine) {
       if (el.hasOwnProperty("_x_model") && el._x_model.get()) {
         selected = new Date(el._x_model.get());
         if (isNaN(selected)) {
-          console.error(`h-calendar: input value is not a valid date - ${el._x_model.get()}`);
+          console.error(`${original}: input value is not a valid date - ${el._x_model.get()}`);
           if (datepicker) datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
           else el.setAttribute("data-invalid", "true");
         } else if (datepicker) {
@@ -23538,6 +23538,128 @@ function spinner_default(Alpine) {
   });
 }
 
+// src/components/split.js
+function split_default(Alpine) {
+  Alpine.directive("h-split", (el) => {
+    el.classList.add("group/split", "flex", "data-[orientation=horizontal]:flex-row", "data-[orientation=vertical]:flex-col");
+    el.setAttribute("tabindex", "-1");
+    el.setAttribute("data-slot", "split");
+  });
+  Alpine.directive("h-split-panel", (el) => {
+    el.setAttribute("tabindex", "-1");
+    el.setAttribute("data-slot", "split-panel");
+  });
+  Alpine.directive("h-split-gutter", (el, {}, { cleanup }) => {
+    el.classList.add(
+      "relative",
+      "shrink-0",
+      "touch-none",
+      "bg-border",
+      "outline-none",
+      "hover:bg-primary-hover",
+      "active:bg-primary-active",
+      "before:absolute",
+      "before:top-1/2",
+      "before:left-1/2",
+      "before:-translate-x-1/2",
+      "before:-translate-y-1/2",
+      "before:block",
+      "before:bg-transparent",
+      "hover:before:bg-primary-hover",
+      "group-data-[locked=true]/split:pointer-events-none",
+      "group-data-[orientation=horizontal]/split:cursor-col-resize",
+      "group-data-[orientation=vertical]/split:cursor-row-resize"
+    );
+    const borderClasses = [
+      "bg-border",
+      "outline-none",
+      "hover:bg-primary-hover",
+      "active:bg-primary-active",
+      "before:absolute",
+      "before:top-1/2",
+      "before:left-1/2",
+      "before:-translate-x-1/2",
+      "before:-translate-y-1/2",
+      "before:block",
+      "before:bg-transparent",
+      "hover:before:bg-primary-hover",
+      "group-data-[orientation=horizontal]/split:!w-px",
+      "group-data-[orientation=horizontal]/split:before:h-full",
+      "group-data-[orientation=horizontal]/split:before:w-[0.313rem]",
+      "group-data-[orientation=vertical]/split:!h-px",
+      "group-data-[orientation=vertical]/split:before:w-full",
+      "group-data-[orientation=vertical]/split:before:h-[0.313rem]"
+    ];
+    const handleClasses = [
+      "bg-transparent",
+      "outline-none",
+      "after:absolute",
+      "after:block",
+      "after:rounded-sm",
+      "after:bg-background",
+      "after:border-split-handle",
+      "after:border-2",
+      "after:shadow-xs",
+      "after:top-1/2",
+      "after:left-1/2",
+      "after:-translate-x-1/2",
+      "after:-translate-y-1/2",
+      "hover:after:border-primary-hover",
+      "active:after:border-primary-active",
+      "before:absolute",
+      "before:block",
+      "before:top-1/2",
+      "before:left-1/2",
+      "before:-translate-x-1/2",
+      "before:-translate-y-1/2",
+      "before:rounded-sm",
+      "before:from-transparent",
+      "before:from-15%",
+      "before:via-split-handle",
+      "before:to-85%",
+      "before:to-transparent",
+      "hover:before:bg-primary-hover",
+      "hover:before:via-transparent",
+      "active:before:bg-primary-active",
+      "active:before:via-transparent",
+      // Orientation classes
+      "group-data-[orientation=horizontal]/split:before:h-full",
+      "group-data-[orientation=horizontal]/split:before:w-0.5",
+      "group-data-[orientation=horizontal]/split:before:bg-gradient-to-b",
+      "group-data-[orientation=vertical]/split:before:h-0.5",
+      "group-data-[orientation=vertical]/split:before:w-full",
+      "group-data-[orientation=vertical]/split:before:bg-gradient-to-r",
+      // Size classes
+      "group-data-[orientation=horizontal]/split:!w-4",
+      "group-data-[orientation=horizontal]/split:after:w-2.5",
+      "group-data-[orientation=horizontal]/split:after:h-5",
+      "group-data-[orientation=vertical]/split:!h-4",
+      "group-data-[orientation=vertical]/split:after:w-5",
+      "group-data-[orientation=vertical]/split:after:h-2.5"
+    ];
+    el.setAttribute("data-slot", "split-gutter");
+    el.setAttribute("tabindex", "-1");
+    el.setAttribute("role", "separator");
+    function setVariant(variant = "handle") {
+      if (variant === "border") {
+        el.classList.remove(...handleClasses);
+        el.classList.add(...borderClasses);
+      } else {
+        el.classList.remove(...borderClasses);
+        el.classList.add(...handleClasses);
+      }
+    }
+    const observer = new MutationObserver(() => {
+      setVariant(el.parentElement.getAttribute("data-variant"));
+    });
+    observer.observe(el.parentElement, { attributes: true, attributeFilter: ["data-variant"] });
+    setVariant(el.parentElement.getAttribute("data-variant"));
+    cleanup(() => {
+      observer.disconnect();
+    });
+  });
+}
+
 // src/components/switch.js
 function switch_default(Alpine) {
   Alpine.directive("h-switch", (el) => {
@@ -24818,7 +24940,7 @@ function tooltip_default(Alpine) {
 }
 
 // package.json
-var version = "0.6.0";
+var version = "0.8.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler2, breakpoint = 768) {
@@ -24840,11 +24962,19 @@ function getBreakpointListener(handler2, breakpoint = 768) {
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
 var savedScheme = localStorage.getItem(colorSchemeKey);
+var callbacks = [];
+var onColorSchemeChange = (scheme) => {
+  for (let i = 0; i < callbacks.length; i++) {
+    callbacks[i](scheme);
+  }
+};
 var colorSchemeChange = (event) => {
   if (event.matches) {
     document.documentElement.classList.add("dark");
+    onColorSchemeChange("dark");
   } else {
     document.documentElement.classList.remove("dark");
+    onColorSchemeChange("light");
   }
 };
 var initColorScheme = () => {
@@ -24864,15 +24994,19 @@ var setColorScheme = (mode) => {
     document.documentElement.classList.add("dark");
     localStorage.setItem(colorSchemeKey, "dark");
     window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChange);
+    onColorSchemeChange("dark");
   } else if (mode === "light") {
     document.documentElement.classList.remove("dark");
     localStorage.setItem(colorSchemeKey, "light");
     window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChange);
+    onColorSchemeChange("light");
   } else {
     if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
       document.documentElement.classList.add("dark");
+      onColorSchemeChange("dark");
     } else {
       document.documentElement.classList.remove("dark");
+      onColorSchemeChange("light");
     }
     localStorage.setItem(colorSchemeKey, "auto");
     window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", colorSchemeChange);
@@ -24886,6 +25020,17 @@ var getColorScheme = () => {
   }
   return "light";
 };
+var addColorSchemeListener = (callback) => {
+  callbacks.push(callback);
+};
+var removeColorSchemeListener = (callback) => {
+  for (let i = 0; i < callbacks.length; i++) {
+    if (callbacks[i] === callback) {
+      callbacks.splice(i, 1);
+      return;
+    }
+  }
+};
 initColorScheme();
 
 // src/utils/focus.js
@@ -24900,6 +25045,26 @@ function focus_default(Alpine) {
   });
 }
 
+// src/utils/template.js
+function template_default(Alpine) {
+  Alpine.directive("h-template", (el, { original, expression }, { evaluate: evaluate2, Alpine: Alpine2, cleanup }) => {
+    if (el.hasAttribute(Alpine2.prefixed("data"))) {
+      const template = evaluate2(expression);
+      const clone = template.content.cloneNode(true).firstElementChild;
+      Alpine2.addScopeToNode(clone, Alpine2.closestDataStack(el)[0], el.parentElement);
+      Alpine2.mutateDom(() => {
+        el.before(clone);
+        Alpine2.initTree(clone);
+      });
+      cleanup(() => {
+        clone.remove();
+      });
+    } else {
+      console.error(`${original}: ${Alpine2.prefixed("data")} directive is missing`);
+    }
+  });
+}
+
 // src/module.js
 var registerComponents = (registerPlugin) => {
   registerPlugin(accordion_default);
@@ -24932,10 +25097,12 @@ var registerComponents = (registerPlugin) => {
   registerPlugin(sidebar_default);
   registerPlugin(skeleton_default);
   registerPlugin(spinner_default);
+  registerPlugin(split_default);
   registerPlugin(switch_default);
   registerPlugin(table_default);
   registerPlugin(tabs_default);
   registerPlugin(tag_default);
+  registerPlugin(template_default);
   registerPlugin(text_default);
   registerPlugin(textarea_default);
   registerPlugin(tile_default);
@@ -24975,20 +25142,24 @@ export {
   sidebar_default as Sidebar,
   skeleton_default as Skeleton,
   spinner_default as Spinner,
+  split_default as Split,
   switch_default as Switch,
   table_default as Table,
   tabs_default as Tabs,
   tag_default as Tag,
+  template_default as Template,
   text_default as Text,
   textarea_default as Textarea,
   tile_default as Tile,
   timepicker_default as TimePicker,
   toolbar_default as Toolbar,
   tooltip_default as Tooltip,
+  addColorSchemeListener,
   module_default as default,
   getBreakpointListener,
   getColorScheme,
   registerComponents,
+  removeColorSchemeListener,
   setColorScheme,
   version
 };