monobill-mintui 0.4.5 → 0.4.7

package/dist/index.d.ts

@@ -27,6 +27,7 @@ import './components/resource-table/index';
 import './components/off-canvas/index';
 import './components/tabs/index';
 import './components/chart/index';
+import './components/side-navigation/index';
 export { default as Button } from './components/button/Button';
 export { default as Switch } from './components/switch/Switch';
 export { default as Spinner } from './components/spinner/Spinner';
@@ -60,4 +61,9 @@ export { default as TabList } from './components/tabs/TabList';
 export { default as Tab } from './components/tabs/Tab';
 export { default as TabContent } from './components/tabs/TabContent';
 export { default as Chart } from './components/chart/Chart';
+export { default as SideNavigation } from './components/side-navigation/SideNavigation';
+export { default as SideNavigationLinks } from './components/side-navigation/SideNavigationLinks';
+export { default as SideNavigationLink } from './components/side-navigation/SideNavigationLink';
+export { default as SideNavigationActionMenu } from './components/side-navigation/SideNavigationActionMenu';
+export { default as SideNavigationActionLinks } from './components/side-navigation/SideNavigationActionLinks';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,2BAA2B,CAAA;AAClC,OAAO,2BAA2B,CAAA;AAClC,OAAO,4BAA4B,CAAA;AACnC,OAAO,yBAAyB,CAAA;AAChC,OAAO,yBAAyB,CAAA;AAChC,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAA;AAChC,OAAO,yBAAyB,CAAA;AAChC,OAAO,yBAAyB,CAAA;AAChC,OAAO,yBAAyB,CAAA;AAChC,OAAO,0BAA0B,CAAA;AACjC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,2BAA2B,CAAA;AAClC,OAAO,0BAA0B,CAAA;AACjC,OAAO,gCAAgC,CAAA;AACvC,OAAO,2BAA2B,CAAA;AAClC,OAAO,6BAA6B,CAAA;AACpC,OAAO,yBAAyB,CAAA;AAChC,OAAO,gCAAgC,CAAA;AACvC,OAAO,0BAA0B,CAAA;AACjC,OAAO,yBAAyB,CAAA;AAChC,OAAO,yBAAyB,CAAA;AAChC,OAAO,8BAA8B,CAAA;AACrC,OAAO,0BAA0B,CAAA;AACjC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAChC,OAAO,0BAA0B,CAAA;AACjC,OAAO,oCAAoC,CAAA;AAG3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAA;AACpF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6CAA6C,CAAA;AACvF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kDAAkD,CAAA;AACjG,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iDAAiD,CAAA;AAC/F,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,uDAAuD,CAAA;AAC3G,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,wDAAwD,CAAA"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { u as e } from "./caret-right-C_kRPUgW.js";
+import { m as e } from "./plus-csC2ambK.js";
 //#region src/components/spinner/Spinner.ts
 var t = class extends HTMLElement {
 	static get observedAttributes() {
@@ -201,6 +201,12 @@ var r = class e extends HTMLElement {
 			this._button && (this.isActive() || this._button.classList.remove("mint-button-active"));
 		};
 	}
+	_getGeneratedIcon() {
+		return this._button ? this._button.querySelector(":scope > [data-generated-icon=\"true\"]") : null;
+	}
+	_getContentWrapperClass(e) {
+		return e.querySelector(".w-full") ? "mint-button-content flex w-full min-w-0 items-center" : "mint-button-content inline-flex min-w-0 items-center";
+	}
 	connectedCallback() {
 		if (!e._activeShadowStyleInjected) {
 			let t = document.createElement("style");
@@ -253,7 +259,7 @@ var r = class e extends HTMLElement {
 		return e === "left" || e === "center" || e === "right" ? e : "center";
 	}
 	isIconOnly() {
-		if (!(this.getIcon() || this._button?.querySelector("[slot=\"icon\"], .mint-button-icon, mint-icon"))) return !1;
+		if (!(this.getIcon() || this._getGeneratedIcon() || this._button?.querySelector("mint-icon"))) return !1;
 		let e = this._button?.querySelector(".mint-button-content");
 		if (e && e.textContent?.trim()) return !1;
 		if (this._button) for (let e = this._button.firstChild; e; e = e.nextSibling) {
@@ -638,8 +644,13 @@ var r = class e extends HTMLElement {
 	render() {
 		let e = this.isDisabled() || this.isLoading(), t = this.getType();
 		if (!this._button) {
-			for (this._button = document.createElement("button"); this.firstChild;) this._button.appendChild(this.firstChild);
-			this.appendChild(this._button), this.setupEventListeners();
+			let e = this.firstElementChild;
+			if (e instanceof HTMLButtonElement) this._button = e;
+			else {
+				for (this._button = document.createElement("button"); this.firstChild;) this._button.appendChild(this.firstChild);
+				this.appendChild(this._button);
+			}
+			this.setupEventListeners();
 		}
 		this._button.type = t, this._button.disabled = e;
 		let n = this._button.querySelector("mint-spinner"), r = this.isLoading();
@@ -652,10 +663,11 @@ var r = class e extends HTMLElement {
 		}
 		else n && n.parentElement?.remove();
 		for (; this.firstChild && this.firstChild !== this._button;) this._button.appendChild(this.firstChild);
-		let i = this.getIcon(), a = this._button.querySelector("[slot=\"icon\"], .mint-button-icon, mint-icon");
-		i ? (a && a.tagName !== "MINT-ICON" && (a.remove(), a = null), !a || a.tagName !== "MINT-ICON" ? (a = document.createElement("mint-icon"), a.setAttribute("name", i), a.className = "mint-button-icon") : a.setAttribute("name", i)) : a && a.tagName === "MINT-ICON" && (a.remove(), a = null), a ||= this._button.querySelector("[slot=\"icon\"], .mint-button-icon");
+		let i = this.getIcon(), a = this._getGeneratedIcon();
+		i ? (a || (a = document.createElement("mint-icon"), a.setAttribute("data-generated-icon", "true"), a.className = "mint-button-icon"), a.setAttribute("name", i)) : a && a.tagName === "MINT-ICON" && (a.remove(), a = null);
 		let o = this.getIconPosition(), s = this._button.querySelector(".mint-button-content");
 		if (s) {
+			s.className = this._getContentWrapperClass(s);
 			let e = a && a.tagName === "MINT-ICON";
 			if (a && !a.parentElement) {
 				let t = this._button.querySelector("mint-spinner")?.parentElement;
@@ -676,9 +688,9 @@ var r = class e extends HTMLElement {
 				n.tagName !== "MINT-SPINNER" && !n.querySelector("mint-spinner") && t !== a && !n.hasAttribute("slot") && !(n.className === "mr-2" && n.querySelector("mint-spinner")) && e.push(t);
 			}
 			if (e.length > 0) {
-				s = document.createElement("span"), s.className = "mint-button-content inline-flex items-center", e.forEach((e) => {
+				s = document.createElement("span"), s.className = this._getContentWrapperClass(s), e.forEach((e) => {
 					s.appendChild(e);
-				});
+				}), s.className = this._getContentWrapperClass(s);
 				let t = this._button.querySelector("mint-spinner")?.parentElement;
 				a && o === "left" ? t ? (t.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", s)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", s)) : a && o === "right" ? t ? (t.insertAdjacentElement("afterend", s), s.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(s, this._button.firstChild), s.insertAdjacentElement("afterend", a)) : t ? t.insertAdjacentElement("afterend", s) : this._button.insertBefore(s, this._button.firstChild);
 			} else if (a && a.tagName === "MINT-ICON" && !a.parentElement) {
@@ -1517,7 +1529,7 @@ var f = class extends HTMLElement {
 	}
 	render() {
 		let e = this.getId(), t = this.getHeading(), n = this.isOpen();
-		if (e && (this.id = e), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-200 z-40", this._overlay.addEventListener("click", () => this.close()), this.appendChild(this._overlay)), this._modal || (this._modal = document.createElement("div"), this._modal.className = "fixed inset-0 flex items-center justify-center p-2 pointer-events-none z-50", this.appendChild(this._modal)), n) {
+		if (e && (this.id = e), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "fixed inset-0 bg-black/50 transition-opacity duration-200 z-40", this._overlay.addEventListener("click", () => this.close()), this.appendChild(this._overlay)), this._modal || (this._modal = document.createElement("div"), this._modal.className = "fixed inset-0 flex items-center justify-center p-2 pointer-events-none z-50", this.appendChild(this._modal)), n) {
 			let e = this._modal.querySelector(".modal-content");
 			e || (e = document.createElement("div"), e.className = "modal-content bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(e)), this._animateEnter();
 		} else this._animateExit();
@@ -6876,7 +6888,7 @@ var O = class extends HTMLElement {
 	}
 	render() {
 		let e = this.getId(), t = this.getHeading(), n = this.isOpen(), r = this.getPosition(), i = this.isFullPage(), a = this.getHeight();
-		e && (this.id = e), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-200 z-40", this._overlay.addEventListener("click", () => this.close()), this.appendChild(this._overlay)), this._offCanvas || (this._offCanvas = document.createElement("div"), this.appendChild(this._offCanvas));
+		e && (this.id = e), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "fixed inset-0 bg-black/50 transition-opacity duration-200 z-40", this._overlay.addEventListener("click", () => this.close()), this.appendChild(this._overlay)), this._offCanvas || (this._offCanvas = document.createElement("div"), this.appendChild(this._offCanvas));
 		let o = this._getPositionClasses(r, i);
 		this._offCanvas.className = o;
 		let s = this._offCanvas.querySelector(".off-canvas-content");
@@ -8415,4 +8427,272 @@ var N = class e extends HTMLElement {
 };
 customElements.get("mint-chart") || customElements.define("mint-chart", N);
 //#endregion
-export { E as Alert, l as BackButton, r as Button, r as default, s as Card, N as Chart, m as Checkbox, C as Chip, g as Choice, T as Clickable, v as DatePicker, b as Dropzone, x as Form, d as Grid, n as Icon, _ as Input, c as Link, f as Modal, O as OffCanvas, u as Page, p as Popover, D as ResourceTable, y as Select, t as Spinner, o as Stack, i as Switch, k as Tab, j as TabContent, A as TabList, S as Table, M as Tabs, w as Tags, a as Text };
+//#region src/components/side-navigation/SideNavigationLink.ts
+var P = class extends HTMLElement {
+	constructor(...e) {
+		super(...e), this._trigger = null, this._mobileTrigger = null, this._submenuContainer = null, this._mobilePopover = null, this._triggerId = "";
+	}
+	static get observedAttributes() {
+		return [
+			"label",
+			"icon",
+			"href",
+			"active",
+			"expanded",
+			"submenu-item"
+		];
+	}
+	connectedCallback() {
+		this.classList.add("block"), this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.render();
+	}
+	_isActive() {
+		return this.getAttribute("active") === "true";
+	}
+	_isExpanded() {
+		return this.getAttribute("expanded") === "true";
+	}
+	_isSubmenuItem() {
+		return this.getAttribute("submenu-item") === "true";
+	}
+	_getLabel() {
+		return this.getAttribute("label") || "";
+	}
+	_getIcon() {
+		return this.getAttribute("icon") || "";
+	}
+	_getHref() {
+		return this.getAttribute("href");
+	}
+	_getBaseClasses() {
+		let e = this._isActive() ? "border-black/20 bg-black/5 text-black dark:border-white/20 dark:bg-white/10 dark:text-white" : "border-transparent text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-white/10";
+		return [
+			"w-full",
+			"cursor-pointer",
+			"rounded-lg",
+			"border",
+			"d-block",
+			this._isSubmenuItem() ? "px-2 py-1.5 md:px-2" : "px-2 py-2 md:px-3",
+			"text-left",
+			"text-sm",
+			"transition-colors",
+			"duration-150",
+			e
+		].join(" ");
+	}
+	_hasSubmenu() {
+		return this.querySelectorAll(":scope > [slot=\"submenu\"]").length > 0 ? !0 : !!this._submenuContainer && this._submenuContainer.children.length > 0;
+	}
+	_createRow(e, t, n = !1, r = !1) {
+		let i = document.createElement("span"), a = this._isSubmenuItem();
+		if (i.className = a ? "inline-flex w-full items-center justify-start gap-2" : `inline-flex w-full items-center ${r ? "justify-center" : "justify-center md:justify-start"} gap-2`, t) {
+			let e = document.createElement("mint-icon");
+			e.setAttribute("name", t), e.className = "h-4 w-4 shrink-0", i.appendChild(e);
+		}
+		let o = document.createElement("span");
+		if (o.className = a ? "inline truncate" : `${r ? "hidden" : "hidden md:inline"} truncate`, o.textContent = e, i.appendChild(o), n && !r) {
+			let e = document.createElement("mint-icon");
+			e.setAttribute("name", this._isExpanded() ? "caret-down" : "caret-right"), e.className = "ml-auto hidden h-4 w-4 text-gray-500 md:inline-flex dark:text-gray-400", i.appendChild(e);
+		}
+		return i;
+	}
+	_buildSimpleLink() {
+		let e = this._getHref(), t = this._getLabel(), n = this._getIcon(), r = e ? document.createElement("a") : document.createElement("button");
+		e ? (r.setAttribute("href", e), r.setAttribute("role", "link")) : r.setAttribute("type", "button"), r.className = this._getBaseClasses(), r.setAttribute("aria-label", t || "Side navigation link"), r.appendChild(this._createRow(t, n)), this.replaceChildren(r), this._trigger = r;
+	}
+	_buildDropdownLink() {
+		let e = this._getLabel(), t = this._getIcon(), n = Array.from(this.querySelectorAll(":scope > [slot=\"submenu\"]")), r = n.length > 0 ? n : this._submenuContainer ? Array.from(this._submenuContainer.children) : [], i = document.createElement("div");
+		i.className = "w-full";
+		let a = document.createElement("button");
+		a.type = "button", a.className = `${this._getBaseClasses()} hidden md:block`, a.setAttribute("aria-expanded", String(this._isExpanded())), a.appendChild(this._createRow(e, t, !0)), a.onclick = () => {
+			this.setAttribute("expanded", this._isExpanded() ? "false" : "true");
+		}, this._triggerId = this.id || `mint-sidenav-link-${Math.random().toString(36).slice(2, 9)}`, this.id ||= this._triggerId;
+		let o = document.createElement("button");
+		o.type = "button", o.id = `${this._triggerId}-mobile-trigger`, o.className = `${this._getBaseClasses()} md:hidden`, o.appendChild(this._createRow(e, t, !1, !0)), this._submenuContainer = document.createElement("div"), this._submenuContainer.className = `hidden md:block mt-1 ml-5 border-l border-gray-200 pl-2 space-y-1 dark:border-gray-700 ${this._isExpanded() ? "" : "md:hidden"}`, r.forEach((e) => {
+			e.setAttribute("submenu-item", "true"), e.setAttribute("slot", "submenu"), this._submenuContainer?.appendChild(e);
+		}), this._mobilePopover = document.createElement("mint-popover"), this._mobilePopover.setAttribute("trigger-id", o.id), this._mobilePopover.setAttribute("direction", "right"), this._mobilePopover.setAttribute("padding", "0"), this._mobilePopover.className = "md:hidden";
+		let s = document.createElement("div");
+		s.className = "w-56 rounded-xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900";
+		let c = document.createElement("div");
+		c.className = "px-2 pb-1 text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400", c.textContent = e, s.appendChild(c), r.forEach((e) => {
+			let t = e.cloneNode(!0);
+			t.removeAttribute("slot"), t.setAttribute("submenu-item", "true"), s.appendChild(t);
+		}), this._mobilePopover.appendChild(s), i.appendChild(a), i.appendChild(o), i.appendChild(this._submenuContainer), i.appendChild(this._mobilePopover), this.replaceChildren(i), this._trigger = a, this._mobileTrigger = o;
+	}
+	render() {
+		this._hasSubmenu() && !this._isSubmenuItem() ? this._buildDropdownLink() : this._buildSimpleLink();
+	}
+};
+customElements.get("mint-sidenav-link") || customElements.define("mint-sidenav-link", P);
+//#endregion
+//#region src/components/side-navigation/SideNavigationLinks.ts
+var F = class extends HTMLElement {
+	constructor(...e) {
+		super(...e), this._container = null, this._title = null, this._list = null;
+	}
+	static get observedAttributes() {
+		return ["name"];
+	}
+	connectedCallback() {
+		this.classList.add("block"), this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.render();
+	}
+	_getName() {
+		return this.getAttribute("name") || "";
+	}
+	render() {
+		this._container || (this._container = document.createElement("section"), this._container.className = "mb-4", this.appendChild(this._container)), this._title || (this._title = document.createElement("mint-text"), this._title.setAttribute("size", "small"), this._title.setAttribute("bold", "true"), this._title.className = "mb-2 hidden uppercase tracking-wide text-gray-500 md:block dark:text-gray-400", this._container.appendChild(this._title));
+		let e = this._getName();
+		this._title.textContent = e, e.trim().length === 0 ? (this._title.classList.add("hidden"), this._title.classList.remove("md:block", "mb-2")) : this._title.classList.add("hidden", "md:block", "mb-2"), this._list || (this._list = document.createElement("div"), this._list.className = "space-y-1", this._container.appendChild(this._list)), Array.from(this.children).filter((e) => e !== this._container && e.tagName === "MINT-SIDENAV-LINK").forEach((e) => {
+			this._list && e.parentElement !== this._list && this._list.appendChild(e);
+		});
+	}
+};
+customElements.get("mint-sidenav-links") || customElements.define("mint-sidenav-links", F);
+//#endregion
+//#region src/components/side-navigation/SideNavigationActionLinks.ts
+var I = class extends HTMLElement {
+	static get observedAttributes() {
+		return ["separated"];
+	}
+	connectedCallback() {
+		this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.render();
+	}
+	_isSeparated() {
+		return this.getAttribute("separated") === "true";
+	}
+	render() {
+		this.className = this._isSeparated() ? "block w-full mt-2 border-t border-gray-200 pt-2 px-2 pb-2 dark:border-gray-700" : "block w-full p-2";
+	}
+};
+customElements.get("mint-sidenav-action-links") || customElements.define("mint-sidenav-action-links", I);
+//#endregion
+//#region src/components/side-navigation/SideNavigationActionMenu.ts
+var L = class extends HTMLElement {
+	constructor(...e) {
+		super(...e), this._wrapper = null, this._trigger = null, this._popover = null, this._triggerId = "";
+	}
+	static get observedAttributes() {
+		return ["title", "subtitle"];
+	}
+	connectedCallback() {
+		this.classList.add("block"), this._triggerId = this.id ? `${this.id}-trigger` : `mint-sidenav-action-menu-${Math.random().toString(36).slice(2, 9)}`, this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.render();
+	}
+	_getTitle() {
+		return this.getAttribute("title") || "Acme Inc";
+	}
+	_getSubtitle() {
+		return this.getAttribute("subtitle") || "Enterprise";
+	}
+	_createDefaultGroup() {
+		let e = document.createElement("mint-sidenav-action-links"), t = (e, t, n = "") => {
+			let r = document.createElement("mint-button");
+			return r.setAttribute("variant", "ghost"), r.setAttribute("full-width", "true"), r.setAttribute("align", "left"), r.innerHTML = `
+        <span class="flex w-full items-center justify-between">
+          <span class="inline-flex items-center gap-2">
+            <mint-icon name="${t}" class="h-4 w-4"></mint-icon>
+            <span class="text-sm">${e}</span>
+          </span>
+          ${n ? `<span class="text-xs text-gray-500 dark:text-gray-400">${n}</span>` : ""}
+        </span>
+      `, r;
+		};
+		e.appendChild(t("Acme Inc", "user", "⌘ 1")), e.appendChild(t("Acme Corp.", "user", "⌘ 2")), e.appendChild(t("Evil Corp.", "user", "⌘ 3"));
+		let n = document.createElement("mint-sidenav-action-links");
+		n.setAttribute("separated", "true");
+		let r = document.createElement("mint-button");
+		r.setAttribute("variant", "ghost"), r.setAttribute("full-width", "true"), r.setAttribute("align", "left"), r.innerHTML = "\n      <span class=\"inline-flex items-center gap-2\">\n        <mint-icon name=\"plus\" class=\"h-4 w-4\"></mint-icon>\n        <span class=\"text-sm\">Add team</span>\n      </span>\n    ", n.appendChild(r);
+		let i = document.createElement("div");
+		return i.appendChild(e), i.appendChild(n), i;
+	}
+	render() {
+		let e = Array.from(this.children).filter((e) => e !== this._wrapper && e.getAttribute("slot") === "action-links");
+		this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative", this.appendChild(this._wrapper)), this._wrapper.innerHTML = "", this._trigger = document.createElement("button"), this._trigger.type = "button", this._trigger.id = this._triggerId, this._trigger.className = "flex w-full cursor-pointer items-center gap-3 rounded-xl border border-gray-200 bg-gray-50 px-2 py-2 text-left transition-colors hover:bg-gray-100 md:px-3 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700";
+		let t = document.createElement("div");
+		t.className = "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white", t.textContent = this._getTitle().split(" ").map((e) => e[0]).join("").slice(0, 2).toUpperCase();
+		let n = document.createElement("div");
+		n.className = "hidden min-w-0 flex-1 md:block";
+		let r = document.createElement("mint-text");
+		r.setAttribute("size", "body"), r.setAttribute("bold", "true"), r.className = "truncate text-gray-900 dark:text-gray-100", r.textContent = this._getTitle();
+		let i = document.createElement("mint-text");
+		i.setAttribute("size", "small"), i.setAttribute("variant", "muted"), i.className = "truncate", i.textContent = this._getSubtitle();
+		let a = document.createElement("div");
+		a.className = "mint-sidenav-action-menu-caret hidden pointer-events-none z-10 md:flex md:flex-col md:items-center";
+		let o = document.createElement("mint-icon");
+		o.setAttribute("name", "caret-up"), o.className = "h-[.9em] w-[.9em] text-gray-400 dark:text-gray-500 mb-[-.2rem]";
+		let s = document.createElement("mint-icon");
+		s.setAttribute("name", "caret-down"), s.className = "h-[.9em] w-[.9em] text-gray-400 dark:text-gray-500 mt-[-.2rem]", a.appendChild(o), a.appendChild(s), n.appendChild(r), n.appendChild(i), this._trigger.appendChild(t), this._trigger.appendChild(n), this._trigger.appendChild(a), this._popover = document.createElement("mint-popover"), this._popover.setAttribute("trigger-id", this._triggerId), this._popover.setAttribute("direction", "right"), this._popover.setAttribute("padding", "0");
+		let c = document.createElement("div");
+		c.className = "w-64", e.length > 0 ? e.forEach((e) => {
+			e.setAttribute("hidden", "true");
+			let t = e.cloneNode(!0);
+			t.removeAttribute("hidden"), t.removeAttribute("slot"), c.appendChild(t);
+		}) : c.appendChild(this._createDefaultGroup()), this._popover.appendChild(c), this._wrapper.appendChild(this._trigger), this._wrapper.appendChild(this._popover);
+	}
+};
+customElements.get("mint-sidenav-action-menu") || customElements.define("mint-sidenav-action-menu", L);
+//#endregion
+//#region src/components/side-navigation/SideNavigation.ts
+var R = class extends HTMLElement {
+	constructor(...e) {
+		super(...e), this._container = null, this._header = null, this._content = null, this._footer = null;
+	}
+	static get observedAttributes() {
+		return ["user-name", "user-status"];
+	}
+	connectedCallback() {
+		this.classList.add("block", "h-screen", "min-h-screen"), this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.render();
+	}
+	getUserName() {
+		return this.getAttribute("user-name") || "Acme Inc";
+	}
+	getUserStatus() {
+		return this.getAttribute("user-status") || "Enterprise";
+	}
+	_ensureContainer() {
+		this._container || (this._container = document.createElement("aside"), this._container.className = "flex h-screen min-h-screen w-[4.75rem] flex-col border-r border-gray-200 bg-white p-2 md:w-[17rem] md:p-3 dark:border-gray-700 dark:bg-gray-900", this.appendChild(this._container));
+	}
+	_buildUserHeader() {
+		if (!this._container) return;
+		this._header || (this._header = document.createElement("div"), this._header.className = "mb-4", this._container.appendChild(this._header));
+		let e = Array.from(this.children).find((e) => e.getAttribute("slot") === "action-header");
+		if (e) {
+			this._header.replaceChildren(e);
+			return;
+		}
+		let t = document.createElement("mint-sidenav-action-menu");
+		t.setAttribute("title", this.getUserName()), t.setAttribute("subtitle", this.getUserStatus()), this._header.replaceChildren(t);
+	}
+	_replaceSlottedChildren(e, t) {
+		let n = Array.from(this.querySelectorAll(`[slot="${t}"]`)).filter((e) => e !== this._container);
+		e.replaceChildren(...n);
+	}
+	_buildContent() {
+		this._container && (this._content || (this._content = document.createElement("div"), this._content.className = "grow overflow-y-auto", this._container.appendChild(this._content)), this._replaceSlottedChildren(this._content, "links"));
+	}
+	_buildFooter() {
+		if (!this._container) return;
+		this._footer || (this._footer = document.createElement("div"), this._footer.className = "mt-auto border-t border-gray-200 pt-3 dark:border-gray-700", this._container.appendChild(this._footer));
+		let e = document.createElement("div");
+		e.className = "space-y-1", this._replaceSlottedChildren(e, "bottom-links"), this._footer.innerHTML = "", this._footer.appendChild(e);
+	}
+	render() {
+		this._ensureContainer(), this._buildUserHeader(), this._buildContent(), this._buildFooter();
+	}
+};
+customElements.get("mint-side-navigation") || customElements.define("mint-side-navigation", R);
+//#endregion
+export { E as Alert, l as BackButton, r as Button, r as default, s as Card, N as Chart, m as Checkbox, C as Chip, g as Choice, T as Clickable, v as DatePicker, b as Dropzone, x as Form, d as Grid, n as Icon, _ as Input, c as Link, f as Modal, O as OffCanvas, u as Page, p as Popover, D as ResourceTable, y as Select, R as SideNavigation, I as SideNavigationActionLinks, L as SideNavigationActionMenu, P as SideNavigationLink, F as SideNavigationLinks, t as Spinner, o as Stack, i as Switch, k as Tab, j as TabContent, A as TabList, S as Table, M as Tabs, w as Tags, a as Text };

package/dist/plus-C2ciGlkq.cjs

@@ -0,0 +1 @@
+var e=new Map;function t(t){e.set(t.name,t)}function n(t){return e.get(t)}var r={name:`close`,viewBox:`0 0 24 24`,path:`M6 18L18 6M6 6l12 12`,strokeLinecap:`round`,strokeLinejoin:`round`};t(r);var i={name:`check`,viewBox:`0 0 24 24`,path:`M5 13l4 4L19 7`,strokeLinecap:`round`,strokeLinejoin:`round`};t(i);var a={name:`info`,viewBox:`0 0 24 24`,path:`M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z`,strokeLinecap:`round`,strokeLinejoin:`round`};t(a);var o={name:`success`,viewBox:`0 0 24 24`,path:`M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z`,strokeLinecap:`round`,strokeLinejoin:`round`};t(o);var s={name:`warning`,viewBox:`0 0 24 24`,path:`M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z`,strokeLinecap:`round`,strokeLinejoin:`round`};t(s);var c={name:`error`,viewBox:`0 0 24 24`,path:`M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z`,strokeLinecap:`round`,strokeLinejoin:`round`};t(c);var l={name:`sort-arrows`,viewBox:`0 0 24 24`,path:`M1 5l5-4m0 0l5 4m-5-4v22 M13 19l5 4m0 0l5-4m-5 4V1`,strokeLinecap:`round`,strokeLinejoin:`round`},u={name:`caret-left`,viewBox:`0 0 24 24`,path:`M15 19l-7-7 7-7`,strokeLinecap:`round`,strokeLinejoin:`round`};t(u);var d={name:`caret-right`,viewBox:`0 0 24 24`,path:`M9 5l7 7-7 7`,strokeLinecap:`round`,strokeLinejoin:`round`};t(d);var f={name:`caret-down`,viewBox:`0 0 24 24`,path:`M19 9l-7 7-7-7`,strokeLinecap:`round`,strokeLinejoin:`round`};t(f);var p={name:`caret-up`,viewBox:`0 0 24 24`,path:`M5 15l7-7 7 7`,strokeLinecap:`round`,strokeLinejoin:`round`};t(p);var m={name:`user`,viewBox:`0 0 24 24`,path:`M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z`,strokeLinecap:`round`,strokeLinejoin:`round`};t(m);var h={name:`plus`,viewBox:`0 0 24 24`,path:`M12 4v16m8-8H4`,strokeLinecap:`round`,strokeLinejoin:`round`};t(h),Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`d`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`f`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`h`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`m`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`p`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return o}});

package/dist/{caret-right-C_kRPUgW.js → plus-csC2ambK.js}

@@ -93,4 +93,44 @@ var d = {
 };
 t(d);
 //#endregion
-export { s as a, i as c, t as d, c as i, r as l, u as n, o, l as r, a as s, d as t, n as u };
+//#region src/components/icon/icons/caret-down.ts
+var f = {
+	name: "caret-down",
+	viewBox: "0 0 24 24",
+	path: "M19 9l-7 7-7-7",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+t(f);
+//#endregion
+//#region src/components/icon/icons/caret-up.ts
+var p = {
+	name: "caret-up",
+	viewBox: "0 0 24 24",
+	path: "M5 15l7-7 7 7",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+t(p);
+//#endregion
+//#region src/components/icon/icons/user.ts
+var m = {
+	name: "user",
+	viewBox: "0 0 24 24",
+	path: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+t(m);
+//#endregion
+//#region src/components/icon/icons/plus.ts
+var h = {
+	name: "plus",
+	viewBox: "0 0 24 24",
+	path: "M12 4v16m8-8H4",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+t(h);
+//#endregion
+export { d as a, c, a as d, i as f, t as h, f as i, s as l, n as m, m as n, u as o, r as p, p as r, l as s, h as t, o as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monobill-mintui",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "A modern framework-agnostic UI kit built as Web Components. Requires Tailwind CSS.",
   "type": "module",
   "main": "./dist/index.cjs",

package/dist/caret-right-_3Mh6ina.cjs

@@ -1 +0,0 @@
-var e=new Map;function t(t){e.set(t.name,t)}function n(t){return e.get(t)}var r={name:`close`,viewBox:`0 0 24 24`,path:`M6 18L18 6M6 6l12 12`,strokeLinecap:`round`,strokeLinejoin:`round`};t(r);var i={name:`check`,viewBox:`0 0 24 24`,path:`M5 13l4 4L19 7`,strokeLinecap:`round`,strokeLinejoin:`round`};t(i);var a={name:`info`,viewBox:`0 0 24 24`,path:`M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z`,strokeLinecap:`round`,strokeLinejoin:`round`};t(a);var o={name:`success`,viewBox:`0 0 24 24`,path:`M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z`,strokeLinecap:`round`,strokeLinejoin:`round`};t(o);var s={name:`warning`,viewBox:`0 0 24 24`,path:`M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z`,strokeLinecap:`round`,strokeLinejoin:`round`};t(s);var c={name:`error`,viewBox:`0 0 24 24`,path:`M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z`,strokeLinecap:`round`,strokeLinejoin:`round`};t(c);var l={name:`sort-arrows`,viewBox:`0 0 24 24`,path:`M1 5l5-4m0 0l5 4m-5-4v22 M13 19l5 4m0 0l5-4m-5 4V1`,strokeLinecap:`round`,strokeLinejoin:`round`},u={name:`caret-left`,viewBox:`0 0 24 24`,path:`M15 19l-7-7 7-7`,strokeLinecap:`round`,strokeLinejoin:`round`};t(u);var d={name:`caret-right`,viewBox:`0 0 24 24`,path:`M9 5l7 7-7 7`,strokeLinecap:`round`,strokeLinejoin:`round`};t(d),Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`d`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return n}});