marz-ui 1.0.0

package/dist/components/sidepanel/index.js

@@ -0,0 +1,181 @@
+class n extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.overlay = document.createElement("div"), this.overlay.className = "marz-sidepanel-overlay", this.overlay.style.display = "none", this.panel = document.createElement("div"), this.panel.className = "marz-sidepanel", this.header = document.createElement("div"), this.header.className = "marz-sidepanel-header", this.titleElement = document.createElement("h2"), this.titleElement.textContent = "Settings", this.closeButton = document.createElement("button"), this.closeButton.className = "marz-sidepanel-close", this.closeButton.textContent = "✕", this.closeButton.setAttribute("aria-label", "Close"), this.header.appendChild(this.titleElement), this.header.appendChild(this.closeButton);
+    const e = document.createElement("div");
+    e.className = "marz-sidepanel-content", this.contentSlot = document.createElement("slot"), this.contentSlot.name = "content", e.appendChild(this.contentSlot);
+    const t = document.createElement("div");
+    t.className = "marz-sidepanel-actions", this.actionsSlot = document.createElement("slot"), this.actionsSlot.name = "actions", t.appendChild(this.actionsSlot), e.appendChild(t), this.panel.appendChild(this.header), this.panel.appendChild(e), this.overlay.appendChild(this.panel);
+    const a = document.createElement("style");
+    a.textContent = this.getStyles(), this.shadowRoot.appendChild(a), this.shadowRoot.appendChild(this.overlay), this.closeButton.addEventListener("click", () => this.close()), this.overlay.addEventListener("click", (i) => {
+      i.target === this.overlay && this.close();
+    }), document.addEventListener("keydown", (i) => {
+      i.key === "Escape" && this.isOpen && this.close();
+    });
+  }
+  static get observedAttributes() {
+    return ["is-open", "title"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, a) {
+    t !== a && this.render();
+  }
+  render() {
+    const e = this.hasAttribute("is-open"), t = this.getAttribute("title") || "Settings";
+    this.titleElement.textContent = t, this.overlay.style.display = e ? "flex" : "none", e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
+  }
+  getStyles() {
+    return `
+      :host {
+        display: block;
+      }
+
+      .marz-sidepanel-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(var(--primary-rgb, 43, 43, 43), 0.1);
+        z-index: 1000;
+        display: flex;
+        justify-content: flex-end;
+        align-items: stretch;
+        backdrop-filter: blur(2px);
+      }
+
+      .marz-sidepanel {
+        width: 90%;
+        max-width: 600px;
+        height: 100%;
+        background-color: var(--bg, #f9fbfd);
+        border-left: 1px solid var(--bg-element-2, rgba(0, 0, 0, 0.04));
+        display: flex;
+        flex-direction: column;
+        animation: marz-slideIn 0.3s ease-out;
+        overflow-y: auto;
+        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
+      }
+
+      .marz-sidepanel-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--safe-padding, 16px);
+        border-bottom: 1px solid var(--bg-element-2, rgba(0, 0, 0, 0.04));
+        flex-shrink: 0;
+      }
+
+      .marz-sidepanel-header h2 {
+        margin: 0;
+        color: var(--heading, #11324a);
+        font-family: 'Inter', sans-serif;
+        font-size: 32px;
+        font-weight: 800;
+      }
+
+      .marz-sidepanel-close {
+        display: inline-block;
+        cursor: pointer;
+        border: 0;
+        border-radius: 3em;
+        font-weight: 700;
+        line-height: 1;
+        font-family: 'Inter', sans-serif;
+        transition: all 100ms;
+        box-sizing: border-box;
+        padding: 10px 10px;
+        font-size: 12px;
+        min-width: 32px;
+        height: 32px;
+        border: var(--secondary, #ababab) 1px solid;
+        background-color: transparent;
+        color: var(--text, #3b3b3b);
+      }
+
+      .marz-sidepanel-close:hover {
+        border: var(--primary, #2b2b2b) 1px solid;
+        background-color: var(--bg-element, rgba(0, 0, 0, 0.02));
+      }
+
+      .marz-sidepanel-close:active {
+        border: var(--primary, #2b2b2b) 1px solid;
+        background-color: var(--bg-element-2, rgba(0, 0, 0, 0.04));
+      }
+
+      .marz-sidepanel-content {
+        flex: 1;
+        padding: var(--safe-padding, 16px);
+        display: flex;
+        flex-direction: column;
+        gap: var(--small-padding, 12px);
+      }
+
+      .marz-sidepanel-actions {
+        display: flex;
+        gap: var(--small-padding, 12px);
+        margin-top: var(--safe-padding, 16px);
+        justify-content: flex-end;
+      }
+
+      ::slotted(*) {
+        margin-bottom: var(--small-padding, 12px);
+      }
+
+      @keyframes marz-slideIn {
+        from {
+          transform: translateX(100%);
+        }
+        to {
+          transform: translateX(0);
+        }
+      }
+
+      /* Mobile adjustments */
+      @media only screen and (max-width: 48em) {
+        .marz-sidepanel {
+          width: 90%;
+        }
+
+        .marz-sidepanel-actions {
+          flex-direction: column;
+        }
+      }
+
+      /* Desktop adjustments */
+      @media only screen and (min-width: 48em) {
+        .marz-sidepanel {
+          max-width: 600px;
+        }
+      }
+    `;
+  }
+  // Public API
+  get isOpen() {
+    return this.hasAttribute("is-open");
+  }
+  set isOpen(e) {
+    e ? this.setAttribute("is-open", "") : this.removeAttribute("is-open");
+  }
+  get title() {
+    return this.getAttribute("title") || "Settings";
+  }
+  set title(e) {
+    this.setAttribute("title", e);
+  }
+  // Public methods
+  open() {
+    this.isOpen = !0;
+  }
+  close() {
+    this.isOpen = !1, this.dispatchEvent(new CustomEvent("close", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+}
+customElements.get("marz-sidepanel") || customElements.define("marz-sidepanel", n);
+export {
+  n as MarzSidepanel
+};

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+export declare class MarzSidepanel extends HTMLElement {
+    private overlay;
+    private panel;
+    private header;
+    private titleElement;
+    private closeButton;
+    private contentSlot;
+    private actionsSlot;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    private render;
+    private getStyles;
+    get isOpen(): boolean;
+    set isOpen(value: boolean);
+    get title(): string;
+    set title(value: string);
+    open(): void;
+    close(): void;
+}
+
+/**
+ * Marz Sidepanel Web Component
+ * A framework-agnostic modal sidepanel component with slide-in animation
+ */
+export declare interface MarzSidepanelProps {
+    isOpen?: boolean;
+    title?: string;
+}
+
+export { }
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'marz-button': import('../components/button').MarzButton;
+        'marz-input': import('../components/input').MarzInput;
+        'marz-sidepanel': import('../components/sidepanel').MarzSidepanel;
+    }
+}
+

package/dist/index.js

@@ -0,0 +1,10 @@
+import { MarzButton as e } from "./components/button/index.js";
+import { MarzInput as p } from "./components/input/index.js";
+import { MarzSidepanel as a } from "./components/sidepanel/index.js";
+const o = "1.0.0";
+export {
+  e as MarzButton,
+  p as MarzInput,
+  a as MarzSidepanel,
+  o as VERSION
+};