@muibook/components 4.0.0 → 5.1.0

package/dist/esm/components/mui-progress/index.js

@@ -0,0 +1,75 @@
+class o extends HTMLElement {
+  static get observedAttributes() {
+    return ["progress", "state"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const a = Math.min(Math.max(Number(this.getAttribute("progress") || 0), 0), 100), e = this.getAttribute("state");
+    let r = `${a}%`, s = "none", t = "";
+    e === "syncing" ? (r = "30%", s = "slideAnim calc(var(--speed-400) * 4) linear infinite") : e === "pending" && (r = "100%", s = "zebraAnim calc(var(--speed-300) * 4) linear infinite", t = `
+        background-image: repeating-linear-gradient(
+          45deg,
+          var(--progress-loading-bar-100) 0,
+          var(--progress-loading-bar-100) 10px,
+          var(--progress-loading-bar-200) 10px,
+          var(--progress-loading-bar-200) 20px
+        );
+        background-size: 200% 100%;
+      `);
+    const i = (
+      /*css*/
+      `
+      :host {
+        display: block;
+        width: 100%;
+      }
+      .progress-container {
+        width: 100%;
+        height: var(--space-300);
+        background-color: var(--progress-track-background);
+        border-radius: var(--space-300);
+        overflow: hidden;
+        position: relative;
+      }
+      .progress-bar {
+        height: 100%;
+        width: ${r};
+        background-color: var(--progress-bar-background);
+        border-radius: var(--space-300) 0 0 var(--space-300);
+        position: absolute;
+        left: 0;
+        top: 0;
+        transition: ${e ? "none" : "width var(--speed-300) ease"};
+        animation: ${s};
+        ${t}
+      }
+
+      @keyframes slideAnim {
+        0% { left: -30%; }
+        100% { left: 100%; }
+      }
+
+      @keyframes zebraAnim {
+        0% { background-position: 0 0; }
+        100% { background-position: 40px 0; }
+      }
+    `
+    );
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${i}</style>
+      <div class="progress-container">
+        <div class="progress-bar"></div>
+      </div>
+    `;
+  }
+}
+customElements.get("mui-progress") || customElements.define("mui-progress", o);

package/dist/esm/components/mui-stepper/index.js

@@ -0,0 +1,2 @@
+import "./stepper/index.js";
+import "./step/index.js";

package/dist/esm/components/mui-stepper/step/index.js

@@ -0,0 +1,157 @@
+class s extends HTMLElement {
+  static get observedAttributes() {
+    return ["state", "title", "direction"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const o = this.getAttribute("state") || "upcoming", t = this.getAttribute("direction") || "horizontal", n = this.getAttribute("title") || "", i = `
+    <div class="content">
+      <mui-body
+        size="small"
+        ${o === "active" ? "weight='bold'" : ""}
+        class="${o === "active" ? "active" : ""}"
+      >
+        ${n}
+      </mui-body>
+      <slot name="secondary"></slot>
+    </div>
+  `, r = `
+  <div class="dotwrapper">
+    <div class="dot ${o}"></div>
+    ${t === "horizontal" ? `<div class="line before ${t}"></div><div class="line after ${t}"></div>` : ""}
+  </div>
+`, a = t === "horizontal" ? i + r : r + i, e = " 1.8rem";
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: flex;
+          flex-direction: ${t === "horizontal" ? "column" : "row"};
+          align-items: ${t === "horizontal" ? "center" : "flex-start"};
+          flex: 1;
+        }
+
+        .dotwrapper {
+          position: relative; /* anchor for lines */
+          display: flex;
+          align-items: center;
+          justify-content: center; /* keeps dot centered */
+          width: ${t === "horizontal" ? "100%" : "auto"};
+        }
+
+        /* .dot stays unchanged */
+        .dot {
+          width: ${e};
+          height: ${e};
+          border-radius: 50%;
+          box-shadow: inset 0 0 0 var(--stroke-size-200) var(--stepper-border-color);
+          background: var(--stepper-background-inactive);
+          z-index: 1;
+        }
+
+        .dot.completed {
+          background: var(--stepper-background-active);
+        }
+        .dot.active {
+          background: var(--stepper-background-active);
+        }
+
+        .line {
+          position: absolute;
+          background: var(--stepper-color);
+        }
+
+        .line.before.horizontal {
+          top: 50%;
+          left: 0%;
+          width: 50%;
+          height: var(--stroke-size-200);
+          transform: translateY(-50%);
+        }
+        .line.after.horizontal {
+          top: 50%;
+          right: 0%;
+          width: 50%;
+          height: var(--stroke-size-200);
+          transform: translateY(-50%);
+        }
+
+        :host([position="first"]) .line.before {
+          display: none;
+        }
+        :host([position="last"]) .line.after {
+          display: none;
+        }
+
+
+        .content {
+          display: flex;
+          flex-direction: column;
+        }
+
+        :host([direction="horizontal"]) .content {
+          margin-bottom: var(--space-200);
+          align-items: center;
+          text-align: center;
+        }
+
+        :host([direction="vertical"]) .content {
+          margin-left: calc( -1 * ((${e} / 2) + var(--stroke-size-100)));
+          padding-left: ${e};
+          padding-bottom: ${e};
+          align-items: start;
+          text-align: left;
+          position: relative;
+        }
+
+        :host([direction="vertical"]) .content:before {
+          content: "";
+          width: var(--stroke-size-200);
+          height: 100%;
+          position: absolute;
+          background: var(--stepper-border-color);
+          margin-left: calc(-1 * ${e});
+          height: calc(100% - ${e});
+          bottom: calc(-1 * var(--stroke-size-100));
+
+        }
+
+        :host([direction="vertical"][position="last"]) .content:before {
+          display: none;
+        }
+
+        :host([direction="vertical"][position="last"]) .content {
+          border-color: transparent;
+        }
+
+
+        :host([direction="vertical"]) .dotwrapper {
+          margin-top: var(--stroke-size-200);
+          margin-bottom: var(--stroke-size-100);
+        }
+
+        .title[active] {
+          font-weight: bold;
+        }
+
+        mui-body.active::part(color) {
+          color: var(--stepper-text-color-active);;
+        }
+
+      </style>
+
+      ${a}
+
+    `;
+  }
+}
+customElements.get("mui-step") || customElements.define("mui-step", s);

package/dist/esm/components/mui-stepper/stepper/index.js

@@ -0,0 +1,95 @@
+class n extends HTMLElement {
+  static get observedAttributes() {
+    return ["direction", "active-step"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.setAttribute("direction", this.getAttribute("direction") || "horizontal"), this.setAttribute("active-step", this.getAttribute("active-step") || "0");
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    (t === "direction" || t === "active-step") && this.render();
+  }
+  get steps() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    return (t == null ? void 0 : t.assignedElements()) || [];
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("direction") || "horizontal", e = parseInt(this.getAttribute("active-step") || "0", 10);
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: flex;
+          flex-direction: ${t === "horizontal" ? "row" : "column"};
+          ${t === "horizontal" ? "justify-content: space-between;" : ""}
+        }
+
+        .step {
+          display: flex;
+          flex-direction: ${t === "horizontal" ? "column" : "row"};
+          align-items: center;
+          position: relative;
+        }
+
+        .dot {
+          width: 1.25rem;
+          height: 1.25rem;
+          border-radius: 50%;
+          border: 2px solid var(--color-border, #ccc);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: var(--color-bg, #fff);
+          flex-shrink: 0;
+        }
+
+        .dot.completed {
+          background: var(--color-success, #4caf50);
+          border-color: var(--color-success, #4caf50);
+        }
+        .dot.active {
+          border-color: var(--color-primary, #1976d2);
+        }
+
+        .title {
+          margin-top: ${t === "horizontal" ? "var(--space-200)" : "0"};
+          margin-left: ${t === "vertical" ? "var(--space-200)" : "0"};
+          text-align: ${t === "horizontal" ? "center" : "left"};
+        }
+        .title mui-body[active] {
+          font-weight: bold;
+        }
+
+        .connector {
+          position: absolute;
+          background: red;
+        }
+        .connector.horizontal {
+          top: 0.625rem;
+          left: 100%;
+          width: var(--space-400);
+          height: 2px;
+        }
+        .connector.vertical {
+          left: 0.625rem;
+          top: 100%;
+          height: var(--space-400);
+          width: 2px;
+        }
+
+      </style>
+
+      <slot></slot>
+    `;
+    const i = e - 1, s = this.steps;
+    s.forEach((r, o) => {
+      const c = o < i ? "completed" : o === i ? "active" : "upcoming";
+      r.setAttribute("state", c), r.setAttribute("direction", t), r.setAttribute("position", o === 0 ? "first" : o === s.length - 1 ? "last" : "middle");
+    });
+  }
+}
+customElements.get("mui-stepper") || customElements.define("mui-stepper", n);

package/dist/esm/css/mui-tokens.css

@@ -272,7 +272,7 @@ html[data-theme="light"] {
   --action-secondary-border-color: var(--grey-800);
   --action-secondary-border-color-hover: var(--grey-800);
   --action-secondary-border-color-focus: var(--grey-800);
-  --action-secondary-border-color-disabled: var(--grey-800);
+  --action-secondary-border-color-disabled: var(--grey-400);
   --action-secondary-background: var(--white-opacity-0);
   --action-secondary-background-hover: var(--grey-100);
   --action-secondary-background-focus: var(--grey-100);
@@ -327,6 +327,7 @@ html[data-theme="light"] {
   --text-color-error: var(--red-600);
   --text-color-optional: var(--grey-600);
 
+  --backdrop-overlay: var(--black-opacity-70);
   /* ================================================================================================== */
   /* Components                                                                                         */
   /* ================================================================================================== */
@@ -401,6 +402,25 @@ html[data-theme="light"] {
   --chip-icon-fill: var(--black);
   --chip-dismiss-action-background: var(--black-opacity-10);
   --chip-dismiss-action-background-hover: var(--black-opacity-0);
+
+  /* Dropdown */
+  --dropdown-background: var(--grey-100);
+  --dropdown-border-color: var(--black-opacity-20);
+  --dropdown-shadow-color: var(--black-opacity-10);
+  --dropdown-button-background-hover: var(--white);
+
+  /* Progress */
+  --progress-bar-background: var(--blue-600);
+  --progress-track-background: var(--grey-200);
+  --progress-loading-bar-100: var(--grey-200);
+  --progress-loading-bar-200: var(--grey-300);
+
+  /* Stepper */
+  --stepper-color: var(--blue-600);
+  --stepper-background-active: var(--stepper-color);
+  --stepper-background-inactive: var(--white);
+  --stepper-border-color: var(--stepper-color);
+  --stepper-text-color-active: var(--stepper-color);
 }
 
 /* ==================================================================================================== */
@@ -474,7 +494,7 @@ html[data-theme="dark"] {
   --action-secondary-border-color: var(--grey-200);
   --action-secondary-border-color-hover: var(--grey-200);
   --action-secondary-border-color-focus: var(--grey-200);
-  --action-secondary-border-color-disabled: var(--grey-200);
+  --action-secondary-border-color-disabled: var(--grey-600);
   --action-secondary-background: var(--black-opacity-0);
   --action-secondary-background-hover: var(--grey-800);
   --action-secondary-background-focus: var(--grey-800);
@@ -528,6 +548,8 @@ html[data-theme="dark"] {
   --text-color-warning: var(--orange-400);
   --text-color-error: var(--red-400);
   --text-color-optional: var(--grey-300);
+
+  --backdrop-overlay: var(--black-opacity-70);
   /* ================================================================================================== */
   /* Components                                                                                         */
   /* ================================================================================================== */
@@ -599,6 +621,25 @@ html[data-theme="dark"] {
   --chip-icon-fill: var(--white);
   --chip-dismiss-action-background: var(--white-opacity-20);
   --chip-dismiss-action-background-hover: var(--white-opacity-0);
+
+  /* Dropdown */
+  --dropdown-background: var(--grey-1000);
+  --dropdown-border-color: var(--black-opacity-20);
+  --dropdown-shadow-color: var(--black-opacity-20);
+  --dropdown-button-background-hover: var(--grey-900);
+
+  /* Progress */
+  --progress-bar-background: var(--blue-500);
+  --progress-track-background: var(--grey-700);
+  --progress-loading-bar-100: var(--grey-900);
+  --progress-loading-bar-200: var(--grey-1000);
+
+  /* Stepper */
+  --stepper-color: var(--blue-500);
+  --stepper-background-active: var(--stepper-color);
+  --stepper-background-inactive: var(--black);
+  --stepper-border-color: var(--stepper-color);
+  --stepper-text-color-active: var(--stepper-color);
 }
 
 /* ==================================================================================================== */
@@ -718,4 +759,8 @@ html[data-theme="dark"] {
   --checkbox-radius: var(--radius-100);
   /* Chip */
   --chip-radius: var(--radius-400);
+  /* Dropdown */
+  --dropdown-radius: var(--radius-100);
+  /* Dialog */
+  --dialog-radius: var(--radius-150);
 }

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { PartTypes as qr, Parts as ur, getPartMap as vr } from "./utils/part-map/index.js";
+import { PartTypes as Er, Parts as Fr, getPartMap as Gr } from "./utils/part-map/index.js";
 import "./components/mui-field/index.js";
 import "./components/mui-file-upload/index.js";
 import "./components/mui-addon/index.js";
@@ -6,6 +6,7 @@ import "./components/mui-input/index.js";
 import "./components/mui-checkbox/index.js";
 import "./components/mui-select/index.js";
 import "./components/mui-switch/index.js";
+import "./components/mui-progress/index.js";
 import "./components/mui-table/table/index.js";
 import "./components/mui-table/cell/index.js";
 import "./components/mui-table/row/index.js";
@@ -23,6 +24,8 @@ import "./components/mui-list/item/index.js";
 import "./components/mui-list/list/index.js";
 import "./components/mui-quote/index.js";
 import "./components/mui-code/index.js";
+import "./components/mui-dialog/index.js";
+import "./components/mui-drawer/index.js";
 import "./components/mui-image/index.js";
 import "./components/mui-smart-card/index.js";
 import "./components/mui-icons/accessibility/index.js";
@@ -30,6 +33,7 @@ import "./components/mui-icons/add/index.js";
 import "./components/mui-icons/attention/index.js";
 import "./components/mui-icons/check/index.js";
 import "./components/mui-icons/close/index.js";
+import "./components/mui-icons/calendar/index.js";
 import "./components/mui-icons/down-chevron/index.js";
 import "./components/mui-icons/globe/index.js";
 import "./components/mui-icons/grid/index.js";
@@ -52,6 +56,7 @@ import "./components/mui-icons/warning/index.js";
 import "./components/mui-icons/down-arrow-circle/index.js";
 import "./components/mui-icons/ellipsis/index.js";
 import "./components/mui-icons/gear/index.js";
+import "./components/mui-icons/translate/index.js";
 import "./components/mui-stack/hstack/index.js";
 import "./components/mui-stack/vstack/index.js";
 import "./components/mui-grid/index.js";
@@ -63,20 +68,24 @@ import "./components/mui-card/header/index.js";
 import "./components/mui-card/body/index.js";
 import "./components/mui-card/footer/index.js";
 import "./components/mui-chip/index.js";
+import "./components/mui-loader/index.js";
 import "./components/mui-alert/index.js";
 import "./components/mui-message/index.js";
 import "./components/mui-badge/index.js";
 import "./components/mui-button/index.js";
 import "./components/mui-button-group/index.js";
 import "./components/mui-link/index.js";
+import "./components/mui-dropdown/index.js";
 import "./components/mui-tabs/controller/index.js";
 import "./components/mui-tabs/item/index.js";
 import "./components/mui-tabs/panel/index.js";
 import "./components/mui-tabs/tab-bar/index.js";
 import "./components/mui-carousel/controller/index.js";
 import "./components/mui-carousel/panel/index.js";
+import "./components/mui-stepper/stepper/index.js";
+import "./components/mui-stepper/step/index.js";
 export {
-  qr as PartTypes,
-  ur as Parts,
-  vr as getPartMap
+  Er as PartTypes,
+  Fr as Parts,
+  Gr as getPartMap
 };

package/dist/types/components/mui-dialog/index.d.ts

@@ -0,0 +1,2 @@
+import "../mui-icons/close";
+import "../mui-button";

package/dist/types/components/mui-drawer/index.d.ts

@@ -0,0 +1,2 @@
+import "../mui-icons/close";
+import "../mui-button";

package/dist/types/components/mui-dropdown/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-icons/calendar.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-icons/index.d.ts

@@ -25,3 +25,4 @@ import "./warning";
 import "./down-arrow-circle";
 import "./ellipsis";
 import "./gear";
+import "./translate";

package/dist/types/components/mui-icons/translate.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-loader/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-progress/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-stepper/index.d.ts

@@ -0,0 +1,2 @@
+import "./stepper";
+import "./step";

package/dist/types/components/mui-stepper/step/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/mui-stepper/stepper/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -6,6 +6,7 @@ export * from "./components/mui-input";
 export * from "./components/mui-checkbox";
 export * from "./components/mui-select";
 export * from "./components/mui-switch";
+export * from "./components/mui-progress";
 export * from "./components/mui-table/table";
 export * from "./components/mui-table/cell";
 export * from "./components/mui-table/row";
@@ -23,6 +24,8 @@ export * from "./components/mui-list/item";
 export * from "./components/mui-list/list";
 export * from "./components/mui-quote";
 export * from "./components/mui-code";
+export * from "./components/mui-dialog";
+export * from "./components/mui-drawer";
 export * from "./components/mui-image";
 export * from "./components/mui-smart-card";
 export * from "./components/mui-icons/accessibility";
@@ -30,6 +33,7 @@ export * from "./components/mui-icons/add";
 export * from "./components/mui-icons/attention";
 export * from "./components/mui-icons/check";
 export * from "./components/mui-icons/close";
+export * from "./components/mui-icons/calendar";
 export * from "./components/mui-icons/down-chevron";
 export * from "./components/mui-icons/globe";
 export * from "./components/mui-icons/grid";
@@ -52,6 +56,7 @@ export * from "./components/mui-icons/warning";
 export * from "./components/mui-icons/down-arrow-circle";
 export * from "./components/mui-icons/ellipsis";
 export * from "./components/mui-icons/gear";
+export * from "./components/mui-icons/translate";
 export * from "./components/mui-stack/hstack";
 export * from "./components/mui-stack/vstack";
 export * from "./components/mui-grid";
@@ -63,15 +68,19 @@ export * from "./components/mui-card/header";
 export * from "./components/mui-card/body";
 export * from "./components/mui-card/footer";
 export * from "./components/mui-chip";
+export * from "./components/mui-loader";
 export * from "./components/mui-alert";
 export * from "./components/mui-message";
 export * from "./components/mui-badge";
 export * from "./components/mui-button";
 export * from "./components/mui-button-group";
 export * from "./components/mui-link";
+export * from "./components/mui-dropdown";
 export * from "./components/mui-tabs/controller";
 export * from "./components/mui-tabs/item";
 export * from "./components/mui-tabs/panel";
 export * from "./components/mui-tabs/tab-bar";
 export * from "./components/mui-carousel/controller";
 export * from "./components/mui-carousel/panel";
+export * from "./components/mui-stepper/stepper";
+export * from "./components/mui-stepper/step";