monobill-mintui 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import './components/select/index';
 import './components/dropzone/index';
 import './components/form/index';
 import './components/back-button/index';
+import './components/table/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';
@@ -38,5 +39,6 @@ export { default as Select } from './components/select/Select';
 export { default as Dropzone } from './components/dropzone/Dropzone';
 export { default as Form } from './components/form/Form';
 export { default as BackButton } from './components/back-button/BackButton';
+export { default as Table } from './components/table/Table';
 export { default } from './components/button/Button';
 //# 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":"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;AAGvC,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,EAAE,MAAM,4BAA4B,CAAA"}
+{"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;AAGjC,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,EAAE,MAAM,4BAA4B,CAAA"}

package/dist/index.js

@@ -556,10 +556,10 @@ class R extends HTMLElement {
       if (i)
         i.setAttribute("data-button-variant", this.getVariant()), i.setAttribute("data-button-tone", this.getTone()), "render" in i && typeof i.render == "function" && i.render();
       else {
-        const _ = document.createElement("span");
-        _.className = "mr-2 inline-flex items-center";
-        const g = document.createElement("mint-spinner");
-        g.setAttribute("size", "default"), g.setAttribute("data-button-variant", this.getVariant()), g.setAttribute("data-button-tone", this.getTone()), g.style.width = "0.875rem", g.style.height = "0.875rem", _.appendChild(g), this._button.insertBefore(_, this._button.firstChild);
+        const g = document.createElement("span");
+        g.className = "mr-2 inline-flex items-center";
+        const _ = document.createElement("mint-spinner");
+        _.setAttribute("size", "default"), _.setAttribute("data-button-variant", this.getVariant()), _.setAttribute("data-button-tone", this.getTone()), _.style.width = "0.875rem", _.style.height = "0.875rem", g.appendChild(_), this._button.insertBefore(g, this._button.firstChild);
       }
     else i && ((h = i.parentElement) == null || h.remove());
     for (; this.firstChild && this.firstChild !== this._button; )
@@ -570,34 +570,34 @@ class R extends HTMLElement {
     const n = this.getIconPosition();
     let a = this._button.querySelector(".mint-button-content");
     if (a) {
-      const _ = r && r.tagName === "MINT-ICON";
+      const g = r && r.tagName === "MINT-ICON";
       if (r && !r.parentElement) {
-        const g = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
-        _ || n === "left" ? g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a) : a.insertAdjacentElement("afterend", r);
-      } else if (r && (_ || n === "left") && r.nextSibling !== a) {
+        const _ = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
+        g || n === "left" ? _ ? _.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a) : a.insertAdjacentElement("afterend", r);
+      } else if (r && (g || n === "left") && r.nextSibling !== a) {
         r.remove();
-        const g = (f = this._button.querySelector("mint-spinner")) == null ? void 0 : f.parentElement;
-        g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a);
-      } else r && !_ && n === "right" && r.previousSibling !== a && (r.remove(), a.insertAdjacentElement("afterend", r));
+        const _ = (f = this._button.querySelector("mint-spinner")) == null ? void 0 : f.parentElement;
+        _ ? _.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a);
+      } else r && !g && n === "right" && r.previousSibling !== a && (r.remove(), a.insertAdjacentElement("afterend", r));
     } else {
-      const _ = [];
-      for (let g = this._button.firstChild; g; g = g.nextSibling) {
-        if (g.nodeType !== Node.ELEMENT_NODE) {
-          _.push(g);
+      const g = [];
+      for (let _ = this._button.firstChild; _; _ = _.nextSibling) {
+        if (_.nodeType !== Node.ELEMENT_NODE) {
+          g.push(_);
           continue;
         }
-        const m = g;
-        m.tagName !== "MINT-SPINNER" && !m.querySelector("mint-spinner") && g !== r && !m.hasAttribute("slot") && !(m.className === "mr-2" && m.querySelector("mint-spinner")) && _.push(g);
+        const m = _;
+        m.tagName !== "MINT-SPINNER" && !m.querySelector("mint-spinner") && _ !== r && !m.hasAttribute("slot") && !(m.className === "mr-2" && m.querySelector("mint-spinner")) && g.push(_);
       }
-      if (_.length > 0) {
-        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", _.forEach((m) => {
+      if (g.length > 0) {
+        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", g.forEach((m) => {
           a.appendChild(m);
         });
-        const g = (c = this._button.querySelector("mint-spinner")) == null ? void 0 : c.parentElement;
-        r && n === "left" ? g ? (g.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", a)) : r && n === "right" ? g ? (g.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", r)) : g ? g.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
+        const _ = (c = this._button.querySelector("mint-spinner")) == null ? void 0 : c.parentElement;
+        r && n === "left" ? _ ? (_.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", a)) : r && n === "right" ? _ ? (_.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", r)) : _ ? _.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
       } else if (r && r.tagName === "MINT-ICON" && !r.parentElement) {
-        const g = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
-        g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
+        const _ = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
+        _ ? _.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
       }
     }
     const l = this.isIconOnly();
@@ -1206,7 +1206,7 @@ class G extends HTMLElement {
   }
   _updateBackgroundColor() {
     if (!this._pageContainer) return;
-    document.documentElement.classList.contains("dark") ? (this._pageContainer.classList.remove("bg-gray-50"), this._pageContainer.classList.add("bg-gray-900")) : (this._pageContainer.classList.remove("bg-gray-900"), this._pageContainer.classList.add("bg-gray-50"));
+    document.documentElement.classList.contains("dark") ? (this._pageContainer.classList.remove("bg-gray-20"), this._pageContainer.classList.add("bg-gray-900")) : (this._pageContainer.classList.remove("bg-gray-900"), this._pageContainer.classList.add("bg-gray-20"));
   }
   _observeDarkMode() {
     this._darkModeObserver || (this._darkModeObserver = new MutationObserver(() => {
@@ -2116,7 +2116,7 @@ class se extends HTMLElement {
   render() {
     var v, C, S, y;
     this.getType();
-    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), r = this.getPlaceholder(), n = this.isDisabled(), a = this.isReadonly(), l = this.isRequired(), o = this.getId(), h = this.getName(), c = this.getAttribute("value") || (s ? "#000000" : ""), d = this.getRows(), u = this.getIcon(), f = this.getLabel(), _ = this.getInfo();
+    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), r = this.getPlaceholder(), n = this.isDisabled(), a = this.isReadonly(), l = this.isRequired(), o = this.getId(), h = this.getName(), c = this.getAttribute("value") || (s ? "#000000" : ""), d = this.getRows(), u = this.getIcon(), f = this.getLabel(), g = this.getInfo();
     if (s) {
       this._input && (this._input.remove(), this._input = null), this._textarea && (this._textarea.remove(), this._textarea = null), this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null), this._colorPickerWrapper || (this._colorPickerWrapper = document.createElement("div"), this._colorPickerWrapper.className = "mint-color-picker-wrapper absolute left-[.65rem] top-1/2 -translate-y-1/2 w-6 h-6 rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", this._colorPickerWrapper.style.backgroundColor = c || "#000000", this._wrapper.appendChild(this._colorPickerWrapper), this._colorPicker = document.createElement("input"), this._colorPicker.type = "color", this._colorPicker.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._colorPicker.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0; border: none;", this._colorPickerWrapper.appendChild(this._colorPicker), this._focusHandler = (p) => {
         this._colorPickerWrapper && this._colorPicker && this._colorPicker.matches(":focus-visible") && requestAnimationFrame(() => {
@@ -2198,7 +2198,7 @@ class se extends HTMLElement {
       b && !this._input.value && (this._input.value = b.trim()), this.removeChild(this.firstChild);
     }
     let m = this.querySelector(".mint-input-label-container");
-    if (f || _) {
+    if (f || g) {
       m || (m = document.createElement("div"), m.className = "mint-input-label-container flex flex-col gap-0.5 mb-[.25rem]", this._wrapper && this._wrapper.parentElement === this ? this.insertBefore(m, this._wrapper) : this.insertBefore(m, this.firstChild));
       let b = m.querySelector(".mint-input-label");
       if (f) {
@@ -2213,7 +2213,7 @@ class se extends HTMLElement {
         n ? b.classList.add("opacity-40") : b.classList.remove("opacity-40");
       } else b && b.remove();
       let p = m.querySelector(".mint-input-info");
-      _ ? (p || (p = document.createElement("span"), p.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", m.appendChild(p)), p.textContent = _, n ? p.classList.add("opacity-40") : p.classList.remove("opacity-40")) : p && p.remove();
+      g ? (p || (p = document.createElement("span"), p.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", m.appendChild(p)), p.textContent = g, n ? p.classList.add("opacity-40") : p.classList.remove("opacity-40")) : p && p.remove();
     } else m && m.remove();
     this._renderErrorState();
   }
@@ -2485,11 +2485,11 @@ class re extends HTMLElement {
   _parseDateString(e, t) {
     const i = /[\/\-\.\s]+/;
     if (i.test(e)) {
-      const g = e.split(i).filter((v) => v.length > 0), m = t.split(/[\/\-\.\s]+/).filter((v) => v.length > 0);
-      if (g.length === m.length) {
+      const _ = e.split(i).filter((v) => v.length > 0), m = t.split(/[\/\-\.\s]+/).filter((v) => v.length > 0);
+      if (_.length === m.length) {
         let v = 0, C = 0, S = 0;
         for (let y = 0; y < m.length; y++) {
-          const b = m[y].toLowerCase(), p = g[y];
+          const b = m[y].toLowerCase(), p = _[y];
           if (b.includes("d"))
             v = parseInt(p, 10);
           else if (b.includes("m"))
@@ -2513,27 +2513,27 @@ class re extends HTMLElement {
       { char: "d", index: a },
       { char: "m", index: l },
       { char: "y", index: o }
-    ].sort((g, m) => g.index - m.index);
+    ].sort((_, m) => _.index - m.index);
     let c = 0, d = 0, u = 0, f = 0;
     n.length, r.length;
-    for (const g of h)
-      if (g.char === "d") {
+    for (const _ of h)
+      if (_.char === "d") {
         const m = n.lastIndexOf("d") - n.indexOf("d") + 1, v = r.substr(f, m);
         if (v.length === 0) return null;
         c = parseInt(v, 10), f += v.length;
-      } else if (g.char === "m") {
+      } else if (_.char === "m") {
         const m = n.lastIndexOf("m") - n.indexOf("m") + 1, v = r.substr(f, m);
         if (v.length === 0) return null;
         d = parseInt(v, 10) - 1, f += v.length;
-      } else if (g.char === "y") {
+      } else if (_.char === "y") {
         const m = n.lastIndexOf("y") - n.indexOf("y") + 1, v = r.substr(f), C = Math.min(m, v.length), S = v.substr(0, C);
         if (S.length === 0) return null;
         let y = parseInt(S, 10);
         C === 2 && m === 4 ? y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y : C === 2 && m === 2 && (y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y), u = y, f += C;
       }
     if (!c || d < 0 || d > 11 || !u) return null;
-    const _ = new Date(u, d, c);
-    return isNaN(_.getTime()) || _.getDate() !== c || _.getMonth() !== d || _.getFullYear() !== u ? null : _;
+    const g = new Date(u, d, c);
+    return isNaN(g.getTime()) || g.getDate() !== c || g.getMonth() !== d || g.getFullYear() !== u ? null : g;
   }
   _formatDate(e, t) {
     const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = t.toLowerCase();
@@ -2543,8 +2543,8 @@ class re extends HTMLElement {
   // PHP-style formatter for display mode
   _formatDatePhp(e, t) {
     const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], l = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], o = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], h = (u, f = 2) => u.toString().padStart(f, "0"), c = (u) => {
-      const f = u % 10, _ = u % 100;
-      return f === 1 && _ !== 11 ? "st" : f === 2 && _ !== 12 ? "nd" : f === 3 && _ !== 13 ? "rd" : "th";
+      const f = u % 10, g = u % 100;
+      return f === 1 && g !== 11 ? "st" : f === 2 && g !== 12 ? "nd" : f === 3 && g !== 13 ? "rd" : "th";
     };
     let d = "";
     for (let u = 0; u < t.length; u++) {
@@ -2618,7 +2618,7 @@ class re extends HTMLElement {
     }), this._inputsWrapperEl = document.createElement("div"), this._inputsWrapperEl.className = "flex items-center gap-1 w-full";
     const f = this._getFormatTokens(o);
     this._startPartInputs = [], this._endPartInputs = [];
-    const _ = (m) => {
+    const g = (m) => {
       const v = document.createDocumentFragment();
       return f.forEach((C) => {
         if (C.type === "sep") {
@@ -2630,12 +2630,12 @@ class re extends HTMLElement {
         }
       }), v;
     };
-    if (this._inputsWrapperEl.appendChild(_("start")), this._isRange) {
+    if (this._inputsWrapperEl.appendChild(g("start")), this._isRange) {
       const m = document.createElement("span");
-      m.textContent = " - ", m.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(m), this._inputsWrapperEl.appendChild(_("end"));
+      m.textContent = " - ", m.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(m), this._inputsWrapperEl.appendChild(g("end"));
     }
-    const g = document.createElement("div");
-    if (g.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", g.appendChild(this._displayEl), g.appendChild(this._inputsWrapperEl), u.appendChild(g), u.addEventListener("click", () => {
+    const _ = document.createElement("div");
+    if (_.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", _.appendChild(this._displayEl), _.appendChild(this._inputsWrapperEl), u.appendChild(_), u.addEventListener("click", () => {
       this._isInputMode || s || r || this._enterInputMode();
     }), this._attachPartInputHandlers(this._startPartInputs, f, u), this._isRange && this._attachPartInputHandlers(this._endPartInputs, f, u), this._parseValue(i), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
       this._iconButton.disabled = s || r, !s && !r ? this._iconButton.tabIndex = 0 : this._iconButton.tabIndex = -1;
@@ -2816,12 +2816,12 @@ class re extends HTMLElement {
     f.type = "button", f.tabIndex = 0, f.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", f.setAttribute("data-keep-popover-open", "true"), f.textContent = String(this._currentYear), f.addEventListener("click", () => {
       this._viewMode = "year", this._buildCalendar();
     }), d.appendChild(f), o.appendChild(d);
-    const _ = document.createElement("button");
-    _.type = "button", _.tabIndex = 0, _.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", _.setAttribute("data-keep-popover-open", "true");
-    const g = document.createElement("mint-icon");
-    g.setAttribute("name", "caret-right"), g.className = "w-4 h-4", _.appendChild(g), _.addEventListener("click", () => {
+    const g = document.createElement("button");
+    g.type = "button", g.tabIndex = 0, g.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", g.setAttribute("data-keep-popover-open", "true");
+    const _ = document.createElement("mint-icon");
+    _.setAttribute("name", "caret-right"), _.className = "w-4 h-4", g.appendChild(_), g.addEventListener("click", () => {
       this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar();
-    }), o.appendChild(_);
+    }), o.appendChild(g);
     const m = document.createElement("div");
     m.className = "grid grid-cols-7 mb-2", s.forEach((y) => {
       const b = document.createElement("div");
@@ -2889,25 +2889,25 @@ class re extends HTMLElement {
       A.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200", b.appendChild(A);
       const L = () => {
         if (window.innerWidth >= 768) {
-          const D = p.scrollTop, H = p.scrollHeight, T = p.clientHeight;
-          D > 0 ? w.style.opacity = "1" : w.style.opacity = "0", D + T < H - 1 ? A.style.opacity = "1" : A.style.opacity = "0", E.style.opacity = "0", I.style.opacity = "0";
+          const T = p.scrollTop, H = p.scrollHeight, D = p.clientHeight;
+          T > 0 ? w.style.opacity = "1" : w.style.opacity = "0", T + D < H - 1 ? A.style.opacity = "1" : A.style.opacity = "0", E.style.opacity = "0", I.style.opacity = "0";
         } else {
-          const D = p.scrollLeft, H = p.scrollWidth, T = p.clientWidth;
-          D > 0 ? E.style.opacity = "1" : E.style.opacity = "0", D + T < H - 1 ? I.style.opacity = "1" : I.style.opacity = "0", w.style.opacity = "0", A.style.opacity = "0";
+          const T = p.scrollLeft, H = p.scrollWidth, D = p.clientWidth;
+          T > 0 ? E.style.opacity = "1" : E.style.opacity = "0", T + D < H - 1 ? I.style.opacity = "1" : I.style.opacity = "0", w.style.opacity = "0", A.style.opacity = "0";
         }
       };
       p.addEventListener("scroll", L), window.addEventListener("resize", L), setTimeout(L, 0), r.forEach((M) => {
-        const D = document.createElement("button");
-        D.type = "button", D.tabIndex = 0, D.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors whitespace-nowrap flex-shrink-0 md:w-full md:text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", D.textContent = M.label, D.setAttribute("data-keep-popover-open", "true"), D.addEventListener("click", () => {
+        const T = document.createElement("button");
+        T.type = "button", T.tabIndex = 0, T.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors whitespace-nowrap flex-shrink-0 md:w-full md:text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", T.textContent = M.label, T.setAttribute("data-keep-popover-open", "true"), T.addEventListener("click", () => {
           const H = M.action();
           if (H) {
             if (this._isRange && "start" in H && "end" in H) {
               this._selectedStartDate = H.start, this._selectedEndDate = H.end;
-              const T = this.getFormat(), N = this._formatDate(H.start, T), O = this._formatDate(H.end, T), q = `${N} - ${O}`;
+              const D = this.getFormat(), N = this._formatDate(H.start, D), O = this._formatDate(H.end, D), q = `${N} - ${O}`;
               this.setValue(q), this._currentMonth = H.start.getMonth(), this._currentYear = H.start.getFullYear();
             } else if (H instanceof Date) {
               this._selectedStartDate = H, this._selectedEndDate = null;
-              const T = this.getFormat(), N = this._formatDate(H, T);
+              const D = this.getFormat(), N = this._formatDate(H, D);
               this.setValue(N), this._currentMonth = H.getMonth(), this._currentYear = H.getFullYear();
             }
             this._buildCalendar(), this._popover && typeof this._popover.close == "function" && this._popover.close(), this.dispatchEvent(new CustomEvent("input", {
@@ -2920,7 +2920,7 @@ class re extends HTMLElement {
               cancelable: !0
             }));
           }
-        }), p.appendChild(D);
+        }), p.appendChild(T);
       }), b.appendChild(p), y.appendChild(b), a.appendChild(y);
     }
     l.appendChild(o), l.appendChild(m), l.appendChild(v), a.appendChild(l), this._calendarContainer.appendChild(a);
@@ -3460,21 +3460,21 @@ class ae extends HTMLElement {
     t.className = "mint-dropzone-previews w-full flex flex-col gap-2 max-h-48 overflow-y-auto overflow-x-hidden px-2 pb-2", this._selectedFiles.forEach((o, h) => {
       const c = document.createElement("div");
       if (c.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", o.type.startsWith("image/")) {
-        const _ = document.createElement("img");
-        _.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
-        const g = URL.createObjectURL(o);
-        this._previewUrls.push(g), _.src = g, c.appendChild(_);
+        const g = document.createElement("img");
+        g.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
+        const _ = URL.createObjectURL(o);
+        this._previewUrls.push(_), g.src = _, c.appendChild(g);
       } else {
-        const _ = document.createElement("mint-icon");
-        _.setAttribute("name", "attach"), _.className = "w-5 h-5 text-gray-500 dark:text-gray-300", c.appendChild(_);
+        const g = document.createElement("mint-icon");
+        g.setAttribute("name", "attach"), g.className = "w-5 h-5 text-gray-500 dark:text-gray-300", c.appendChild(g);
       }
       const d = document.createElement("div");
       d.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", d.textContent = o.name, c.appendChild(d);
       const u = document.createElement("button");
       u.type = "button", u.className = "text-gray-500 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors flex items-center justify-center w-6 h-6 rounded-full";
       const f = document.createElement("mint-icon");
-      f.setAttribute("name", "close"), f.className = "w-4 h-4", u.appendChild(f), u.addEventListener("click", (_) => {
-        _.preventDefault(), _.stopPropagation(), this._removeFileAt(h);
+      f.setAttribute("name", "close"), f.className = "w-4 h-4", u.appendChild(f), u.addEventListener("click", (g) => {
+        g.preventDefault(), g.stopPropagation(), this._removeFileAt(h);
       }), c.appendChild(u), t.appendChild(c);
     });
     const i = this.hasError(), s = this._isDragging;
@@ -3635,12 +3635,12 @@ class oe extends HTMLElement {
       d.open(s, o, !0), Object.entries(l).forEach(([u, f]) => d.setRequestHeader(u, f)), d.onload = function() {
         const { status: u, responseText: f } = d;
         if (u >= 200 && u < 300) {
-          let _ = f;
+          let g = f;
           try {
-            _ = JSON.parse(f);
+            g = JSON.parse(f);
           } catch {
           }
-          h({ status: u, ok: !0, data: _ });
+          h({ status: u, ok: !0, data: g });
         } else
           c({ status: u, data: f });
       }, d.onerror = function() {
@@ -3919,6 +3919,81 @@ class oe extends HTMLElement {
   }
 }
 customElements.get("mint-form") || customElements.define("mint-form", oe);
+class le extends HTMLElement {
+  constructor() {
+    super(), this._observer = null;
+  }
+  static get observedAttributes() {
+    return ["striped", "hover", "bordered", "compact"];
+  }
+  connectedCallback() {
+    this.classList.add("block", "w-full", "overflow-x-auto"), this._applyStyles(), this._observeChanges(), setTimeout(() => this._applyStyles(), 0), setTimeout(() => this._applyStyles(), 100);
+  }
+  disconnectedCallback() {
+    this._observer && (this._observer.disconnect(), this._observer = null);
+  }
+  attributeChangedCallback() {
+    this._applyStyles();
+  }
+  _observeChanges() {
+    this._observer = new MutationObserver(() => {
+      this._applyStyles();
+    }), this._observer.observe(this, {
+      childList: !0,
+      subtree: !0,
+      attributes: !1
+    });
+  }
+  _applyStyles() {
+    const e = this.querySelector("table");
+    if (!e) return;
+    const t = this.hasAttribute("bordered"), i = this.hasAttribute("striped"), s = this.hasAttribute("hover"), r = this.hasAttribute("compact");
+    this._setClasses(e, [
+      "w-full",
+      "border-collapse",
+      "text-sm",
+      "font-medium"
+    ]);
+    const n = e.querySelector("thead");
+    n && (this._setClasses(n, ["bg-gray-50", "dark:bg-gray-800"]), n.querySelectorAll("th").forEach((h) => {
+      const c = [
+        "text-left",
+        "font-semibold",
+        "text-gray-900",
+        "dark:text-white",
+        "uppercase",
+        "tracking-wider",
+        "text-xs"
+      ];
+      t && c.push("border", "border-gray-200", "dark:border-gray-700"), r ? c.push("px-3", "py-1.5") : c.push("px-4", "py-3"), this._setClasses(h, c);
+    }));
+    const a = e.querySelector("tbody");
+    a && (i ? this._setClasses(a, ["divide-y", "divide-gray-200", "dark:divide-gray-700"]) : this._setClasses(a, []), a.querySelectorAll("tr").forEach((h, c) => {
+      const d = [];
+      t && d.push("border-b", "border-gray-200", "dark:border-gray-700"), i ? c % 2 === 0 ? d.push("bg-white", "dark:bg-gray-900") : d.push("bg-gray-50", "dark:bg-gray-800") : d.push("bg-white", "dark:bg-gray-900"), s && d.push("transition-colors", "duration-150", "hover:bg-gray-100", "dark:hover:bg-gray-800"), this._setClasses(h, d), h.querySelectorAll("td").forEach((f) => {
+        const g = [
+          "text-gray-900",
+          "dark:text-gray-100"
+        ];
+        t && g.push("border", "border-gray-200", "dark:border-gray-700"), r ? g.push("px-3", "py-1.5") : g.push("px-4", "py-3"), this._setClasses(f, g);
+      });
+    }));
+    const l = e.querySelector("tfoot");
+    l && (this._setClasses(l, ["bg-gray-50", "dark:bg-gray-800", "font-semibold"]), l.querySelectorAll("td").forEach((h) => {
+      const c = [
+        "text-gray-900",
+        "dark:text-gray-100"
+      ];
+      t && c.push("border", "border-gray-200", "dark:border-gray-700"), r ? c.push("px-3", "py-1.5") : c.push("px-4", "py-3"), this._setClasses(h, c);
+    }));
+  }
+  _setClasses(e, t) {
+    e.className = "", t.forEach((i) => {
+      i && i.trim() && e.classList.add(i);
+    });
+  }
+}
+customElements.get("mint-table") || customElements.define("mint-table", le);
 export {
   J as BackButton,
   R as Button,
@@ -3939,6 +4014,7 @@ export {
   B as Spinner,
   $ as Stack,
   W as Switch,
+  le as Table,
   j as Text,
   R as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monobill-mintui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A modern framework-agnostic UI kit built as Web Components. Requires Tailwind CSS.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,7 +12,11 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
-    "./styles": "./dist/styles.css"
+    "./styles": "./dist/styles.css",
+    "./icons": {
+      "import": "./dist/components/icon/icons/index.js",
+      "types": "./dist/components/icon/icons/index.d.ts"
+    }
   },
   "files": [
     "dist"