marz-ui 1.0.2 → 1.0.4

package/dist/components/input/index.js

@@ -1,23 +1,26 @@
-class n extends HTMLElement {
+class h extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.wrapper = document.createElement("div"), this.wrapper.className = "marz-input-wrapper", this.labelElement = document.createElement("label"), this.labelElement.className = "marz-input-label", this.input = document.createElement("input");
+    super(), this.attachShadow({ mode: "open" }), this.wrapper = document.createElement("div"), this.wrapper.className = "marz-input-wrapper", this.labelElement = document.createElement("label"), this.labelElement.className = "marz-input-label", this.input = this.hasAttribute("multiline") ? document.createElement("textarea") : document.createElement("input");
     const t = document.createElement("style");
-    t.textContent = this.getStyles(), this.wrapper.appendChild(this.labelElement), this.wrapper.appendChild(this.input), this.shadowRoot.appendChild(t), this.shadowRoot.appendChild(this.wrapper), this.input.addEventListener("input", () => {
-      const e = this.input.value;
-      this.setAttribute("value", e), this.dispatchEvent(new CustomEvent("change", {
-        detail: { value: e },
+    t.textContent = this.getStyles(), this.wrapper.appendChild(this.labelElement), this.wrapper.appendChild(this.input), this.shadowRoot.appendChild(t), this.shadowRoot.appendChild(this.wrapper), this.setupEventListeners();
+  }
+  static get observedAttributes() {
+    return ["size", "label", "placeholder", "value", "disabled", "type", "multiline", "rows"];
+  }
+  setupEventListeners() {
+    this.input.addEventListener("input", () => {
+      const t = this.input.value;
+      this.setAttribute("value", t), this.dispatchEvent(new CustomEvent("change", {
+        detail: { value: t },
         bubbles: !0,
         composed: !0
       }));
-    }), ["focus", "blur", "keydown", "keyup"].forEach((e) => {
-      this.input.addEventListener(e, () => {
-        this.dispatchEvent(new Event(e, { bubbles: !0, composed: !0 }));
+    }), ["focus", "blur", "keydown", "keyup"].forEach((t) => {
+      this.input.addEventListener(t, () => {
+        this.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }));
       });
     });
   }
-  static get observedAttributes() {
-    return ["size", "label", "placeholder", "value", "disabled", "type"];
-  }
   connectedCallback() {
     this.render();
   }
@@ -25,23 +28,29 @@ class n extends HTMLElement {
     e !== i && this.render();
   }
   render() {
-    const t = this.getAttribute("size") || "medium", e = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "", s = this.getAttribute("value") || "", a = this.hasAttribute("disabled"), r = this.getAttribute("type") || "text", l = [
+    const t = this.getAttribute("size") || "medium", e = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "", s = this.getAttribute("value") || "", r = this.hasAttribute("disabled"), a = this.getAttribute("type") || "text", n = this.hasAttribute("multiline"), l = parseInt(this.getAttribute("rows") || "3"), u = this.input instanceof HTMLTextAreaElement;
+    if (n !== u) {
+      const o = this.input;
+      this.input = n ? document.createElement("textarea") : document.createElement("input"), this.wrapper.replaceChild(this.input, o), this.setupEventListeners();
+    }
+    const p = [
       "marz-input",
       `marz-input--${t}`
     ].join(" ");
-    this.input.className = l, this.input.placeholder = i, this.input.disabled = a, this.input.type = r, this.input.value !== s && (this.input.value = s), this.labelElement.textContent = e, this.labelElement.style.display = e ? "block" : "none";
+    this.input.className = p, this.input.placeholder = i, this.input.disabled = r, this.input instanceof HTMLInputElement ? this.input.type = a : this.input instanceof HTMLTextAreaElement && (this.input.rows = l), this.input.value !== s && (this.input.value = s), this.labelElement.textContent = e, this.labelElement.style.display = e ? "block" : "none";
   }
   getStyles() {
     return `
       :host {
         display: block;
         width: 100%;
+        margin-bottom: var(--form-element-gap, 20px);
       }
 
       .marz-input-wrapper {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: 12px;
         width: 100%;
       }
 
@@ -58,7 +67,7 @@ class n extends HTMLElement {
         border: 0;
         border-radius: 1em;
         font-weight: 500;
-        line-height: 1;
+        line-height: 1.5;
         width: 100%;
         transition: all 100ms;
         background-color: var(--bg-element, rgba(0, 0, 0, 0.02));
@@ -67,6 +76,11 @@ class n extends HTMLElement {
         outline: none;
         box-sizing: border-box;
         font-family: 'Inter', sans-serif;
+        resize: vertical;
+      }
+
+      textarea.marz-input {
+        min-height: 80px;
       }
 
       .marz-input:disabled {
@@ -142,7 +156,7 @@ class n extends HTMLElement {
     this.input.blur();
   }
 }
-customElements.get("marz-input") || customElements.define("marz-input", n);
+customElements.get("marz-input") || customElements.define("marz-input", h);
 export {
-  n as MarzInput
+  h as MarzInput
 };

package/dist/index.js

@@ -287,11 +287,16 @@ class p extends HTMLElement {
       .markdown-editor-container {
         display: flex;
         flex-direction: column;
-        border: 1px solid var(--bg-element-2);
-        border-radius: 8px;
-        background-color: var(--bg);
+        border: 1px solid var(--secondary, #ababab);
+        border-radius: 1em;
+        background-color: var(--bg-element, rgba(0, 0, 0, 0.02));
         font-family: 'Inter', sans-serif;
         overflow: hidden;
+        transition: all 100ms;
+      }
+
+      .markdown-editor-container:focus-within {
+        border: 1px solid var(--primary, #2b2b2b);
       }
 
       .markdown-toolbar {