@diniz/webcomponents 1.1.2 → 1.1.4

package/dist/webcomponents.es.js

@@ -0,0 +1,1721 @@
+var $ = Object.defineProperty;
+var A = (l, i, t) => i in l ? $(l, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[i] = t;
+var p = (l, i, t) => A(l, typeof i != "symbol" ? i + "" : i, t);
+import k from "feather-icons";
+function E(l) {
+  let i = l;
+  const t = /* @__PURE__ */ new Set();
+  return {
+    get: () => i,
+    set: (e) => {
+      Object.is(i, e) || (i = e, t.forEach((a) => a(i)));
+    },
+    subscribe: (e) => (t.add(e), () => t.delete(e))
+  };
+}
+class g extends HTMLElement {
+  constructor() {
+    super();
+    p(this, "state");
+    p(this, "signalUnsubs");
+    this.attachShadow({ mode: "open" }), this.state = {}, this.signalUnsubs = /* @__PURE__ */ new Set();
+  }
+  useSignal(t) {
+    const e = E(t), a = e.subscribe(() => this.render());
+    return this.signalUnsubs.add(a), e;
+  }
+  setState(t) {
+    this.state = { ...this.state, ...t }, this.render();
+  }
+  connectedCallback() {
+    this.render();
+  }
+  disconnectedCallback() {
+    this.signalUnsubs.forEach((t) => t()), this.signalUnsubs.clear();
+  }
+  render() {
+  }
+}
+const f = ':root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #34a8eb;--color-border: #f3f5f7;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}.btn-danger:hover{background:#6626dc;border-color:#dc2626}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}:host([data-ui="checkbox"]){display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host([data-ui="checkbox"][disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{display:inline-flex;align-items:center;gap:.75rem}.checkbox-box{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-border, #cbd5e1);border-radius:var(--radius-sm, 4px);background:#fff;transition:all .2s;flex-shrink:0;box-sizing:border-box}.checkbox-box.size-sm{min-width:16px;max-width:16px;min-height:16px;max-height:16px}.checkbox-box.size-md{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.checkbox-box.size-lg{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.checkbox-box:hover:not(.disabled){border-color:var(--color-primary, #24ec71)}.checkbox-box.checked,.checkbox-box.indeterminate{background:var(--color-primary, #24ec71);border-color:var(--color-primary, #24ec71)}.checkbox-box.disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed}.checkbox-icon{display:none;color:#fff;position:absolute}.checkbox-box.checked .checkbox-icon.check,.checkbox-box.indeterminate .checkbox-icon.minus{display:block}.checkbox-icon.check{width:12px;height:12px}.checkbox-icon.minus{width:10px;height:10px}.checkbox-label{font-size:.95rem;color:var(--color-ink, #0f172a);line-height:1.5}.checkbox-container.size-sm .checkbox-label{font-size:.875rem}.checkbox-container.size-lg .checkbox-label{font-size:1rem}input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;animation:fadeIn .2s ease-out}.modal-backdrop.open{display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--color-surface, white);border-radius:var(--radius-lg, 16px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;width:100%;animation:slideUp .2s ease-out}.modal-content.sm{max-width:400px}.modal-content.md{max-width:600px}.modal-content.lg{max-width:800px}.modal-content.xl{max-width:1200px}.modal-content.full{max-width:95vw}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-ink, #0f172a);margin:0}.modal-close{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 8px);color:var(--color-text-muted, #64748b);transition:all .2s}.modal-close:hover{background:var(--color-muted, #f1f5f9);color:var(--color-ink, #0f172a)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--color-border, #e2e8f0);display:flex;gap:.75rem;justify-content:flex-end}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="select"]){display:block;width:90%}.select-container{position:relative;width:100%}.select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-ink, #0f172a)}.select-trigger{width:100%;padding:.625rem 1rem;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;font-size:.95rem;color:var(--color-ink, #0f172a)}.select-trigger:hover:not(:disabled){border-color:var(--color-primary, #24ec71)}.select-trigger:focus{outline:none;border-color:var(--color-primary, #24ec71);box-shadow:0 0 0 3px #24ec711a}.select-trigger:disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed;opacity:.6}.select-trigger.open{border-color:var(--color-primary, #24ec71)}.select-placeholder{color:var(--color-text-muted, #94a3b8);flex:1;text-align:left}.select-placeholder.has-selection{color:var(--color-ink, #0f172a)}.select-arrow{display:flex;transition:transform .2s;color:var(--color-text-muted, #64748b)}.select-arrow.open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:300px;overflow-y:auto;z-index:1000;display:none;animation:slideDown .15s ease-out}.select-dropdown.open{display:block}.select-search{width:100%;padding:.625rem 1rem;border:none;border-bottom:1px solid var(--color-border, #e2e8f0);font-size:.95rem;outline:none}.select-search:focus{background:var(--color-muted, #f1f5f9)}.select-option{padding:.625rem 1rem;cursor:pointer;transition:background .15s;color:var(--color-ink, #0f172a);font-size:.95rem}.select-option:hover:not(.disabled){background:var(--color-muted, #f1f5f9)}.select-option.selected{background:#24ec711a;color:var(--color-primary, #24ec71);font-weight:500}.select-option.disabled{opacity:.5;cursor:not-allowed}.select-empty{padding:1rem;text-align:center;color:var(--color-text-muted, #94a3b8);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="upload"]){display:block;width:100%}.upload{display:flex;flex-direction:column;gap:.75rem}.upload-label{font-size:.9rem;font-weight:700;color:var(--color-ink)}.upload-drop{border:1.5px dashed rgba(36,236,113,.55);border-radius:16px;background:linear-gradient(135deg,#24ec7114,#34a8eb14);padding:1.25rem 1.5rem;position:relative;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.upload-drop.dragging{border-color:var(--color-primary);box-shadow:0 16px 30px #24ec712e;transform:translateY(-2px)}.upload-drop.disabled{opacity:.6;cursor:not-allowed}.upload-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.upload-content{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}.upload-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#0f172a;color:#fff;box-shadow:0 12px 20px #0f172a2e}.upload-icon svg{width:20px;height:20px}.upload-title{font-weight:700;color:var(--color-ink)}.upload-sub{font-size:.85rem;color:var(--color-text-muted, #64748b);margin-top:.2rem}.upload-btn{border:none;border-radius:999px;padding:.45rem 1rem;font-size:.85rem;font-weight:700;background:#0f172a;color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.upload-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 16px #0f172a2e}.upload-btn:disabled{cursor:not-allowed;opacity:.5}.upload-helper{font-size:.85rem;color:var(--color-text-muted, #64748b)}.upload-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}.upload-list li{display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:center;padding:.6rem .75rem;border-radius:12px;background:#fff;border:1px solid rgba(148,163,184,.35);font-size:.9rem;color:var(--color-ink)}.upload-meta{font-size:.78rem;color:var(--color-text-muted, #64748b)}.upload-remove{border:none;background:#ef44441a;color:#b91c1c;padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:600;cursor:pointer}.upload-remove:hover{background:#ef444433}:host([data-ui="pagination"]){display:block}.pagination-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.pagination-info{font-size:.9rem;color:var(--color-ink);opacity:.7}.pagination{display:flex;align-items:center;gap:.25rem}.page-btn{min-width:2.5rem;height:2.5rem;padding:.5rem;border:1px solid var(--color-border);background:#fff;color:var(--color-ink);font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled):not(.active){background:var(--color-muted);border-color:var(--color-border-strong)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn.active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary);font-weight:600}.page-btn.ellipsis{border:none;background:transparent;cursor:default;pointer-events:none}.nav-btn{padding:.5rem .75rem}.nav-btn svg{width:16px;height:16px}:host([data-ui="stepper"]){display:block}.stepper-wrap{width:100%}.stepper-empty{padding:1rem;border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted, #64748b);text-align:center;font-size:.9rem}.stepper{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.25rem}.stepper.vertical{flex-direction:column;gap:1rem}.step{display:flex;align-items:center;position:relative}.stepper.vertical .step{flex-direction:column;align-items:flex-start}.step-trigger{display:flex;align-items:center;gap:.75rem;background:transparent;border:none;padding:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--color-ink)}.step-trigger:disabled{cursor:not-allowed;opacity:.5}.step-node{width:2.1rem;height:2.1rem;border-radius:12px;background:var(--color-muted);border:1px solid var(--color-border-strong);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:var(--color-ink);box-shadow:inset 0 0 0 1px #fff9}.step-text{display:flex;flex-direction:column;gap:.2rem}.step-title{font-weight:700;letter-spacing:.2px;font-size:.98rem}.step-desc{font-size:.85rem;color:var(--color-text-muted, #64748b)}.step-connector{width:48px;height:2px;margin:0 .65rem;background:linear-gradient(90deg,var(--color-border),rgba(255,255,255,0));flex-shrink:0}.stepper.vertical .step-connector{width:2px;height:28px;margin:.65rem 0 .25rem 1.05rem;background:linear-gradient(180deg,var(--color-border),rgba(255,255,255,0))}.step.complete .step-node{background:linear-gradient(135deg,#24ec71,#34a8eb);color:#0f172a;border-color:transparent;box-shadow:0 8px 18px #24ec7140}.step.complete .step-connector{background:linear-gradient(90deg,#24ec71,#34a8eb)}.stepper.vertical .step.complete .step-connector{background:linear-gradient(180deg,#24ec71,#34a8eb)}.step.active .step-node{background:#fff;color:var(--color-ink);border-color:var(--color-primary);box-shadow:0 0 0 4px #24ec712e,0 12px 20px #24ec7138;animation:stepGlow 1.6s ease-in-out infinite}.step.active .step-title{color:var(--color-ink)}.step.upcoming .step-title{color:var(--color-ink);opacity:.7}.step.error .step-node{background:#fee2e2;border-color:#f87171;color:#991b1b;box-shadow:0 8px 16px #ef444433}.step.warning .step-node{background:#fef3c7;border-color:#f59e0b;color:#92400e;box-shadow:0 8px 16px #f59e0b33}.stepper.sm .step-node{width:1.65rem;height:1.65rem;font-size:.75rem;border-radius:10px}.stepper.sm .step-title{font-size:.9rem}.stepper.sm .step-desc{font-size:.78rem}.stepper.lg .step-node{width:2.6rem;height:2.6rem;font-size:1.05rem;border-radius:14px}.stepper.lg .step-title{font-size:1.1rem}.stepper.lg .step-desc{font-size:.92rem}@keyframes stepGlow{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}:host([data-ui="date-picker"]){display:block;width:100%}.date-picker-label{display:block;font-size:.9rem;font-weight:500;color:var(--color-ink);margin-bottom:.5rem}.date-picker-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.date-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;transition:all .2s ease}.date-input-wrapper:hover:not(.disabled){border-color:var(--color-border-strong)}.date-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec711a;outline:none}.date-input-wrapper.disabled{background:var(--color-muted);cursor:not-allowed;opacity:.6}.formatted-input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;background:transparent;color:var(--color-ink);outline:none}.formatted-input:disabled{cursor:not-allowed;color:var(--color-ink);opacity:.7}.formatted-input::placeholder{color:#94a3b8;opacity:.7}.formatted-input.invalid{color:#dc2626}.hidden-date-input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;pointer-events:none;cursor:pointer}.calendar-btn{padding:.5rem;margin-right:.5rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-ink);opacity:.6;transition:all .2s ease;border-radius:6px}.calendar-btn:hover:not(:disabled){background:var(--color-muted);opacity:1}.calendar-btn:disabled{cursor:not-allowed;opacity:.3}.calendar-icon{width:20px;height:20px}.format-label{font-size:.75rem;color:var(--color-ink);opacity:.6;padding:0 .25rem;font-weight:500}#ui-datepicker-div,.datepicker,.react-datepicker-popper{z-index:99999!important}';
+class C extends g {
+  connectedCallback() {
+    this.setAttribute("data-ui", "button"), super.connectedCallback(), this.attachClickHandler();
+  }
+  static get observedAttributes() {
+    return ["variant", "size", "disabled", "type", "icon", "icon-position"];
+  }
+  attributeChangedCallback() {
+    this.render(), this.attachClickHandler();
+  }
+  attachClickHandler() {
+    if (!this.shadowRoot) return;
+    const i = this.shadowRoot.querySelector("button");
+    if (!i) return;
+    const t = i._clickHandler;
+    t && i.removeEventListener("click", t);
+    const e = (a) => {
+      const s = this.getType();
+      if (this.hasAttribute("disabled")) {
+        a.preventDefault(), a.stopPropagation();
+        return;
+      }
+      if (s === "submit") {
+        a.preventDefault(), a.stopPropagation();
+        let r = this.closest("form");
+        if (!r) {
+          let o = this.parentElement;
+          for (; o; ) {
+            if (o.tagName === "FORM") {
+              r = o;
+              break;
+            }
+            o = o.parentElement;
+          }
+        }
+        if (r) {
+          const o = new Event("submit", {
+            bubbles: !0,
+            cancelable: !0
+          });
+          r.dispatchEvent(o);
+        }
+      }
+    };
+    i._clickHandler = e, i.addEventListener("click", e);
+  }
+  getVariant() {
+    const i = this.getAttribute("variant");
+    return i === "secondary" || i === "ghost" || i === "danger" ? i : "primary";
+  }
+  getSize() {
+    const i = this.getAttribute("size");
+    return i === "sm" || i === "lg" ? i : "md";
+  }
+  getType() {
+    return this.getAttribute("type") ?? "button";
+  }
+  getIcon() {
+    var a;
+    const i = this.getAttribute("icon");
+    if (!i) return null;
+    const t = i.trim();
+    return { html: `<span class="btn-icon">${((a = k.icons[t]) == null ? void 0 : a.toSvg()) || ""}</span>`, name: t };
+  }
+  getIconPosition() {
+    return this.getAttribute("icon-position") === "right" ? "right" : "left";
+  }
+  render() {
+    const i = this.getVariant(), t = this.getSize(), e = this.hasAttribute("disabled"), a = this.getType(), s = this.getIcon(), n = this.getIconPosition(), r = s !== null, o = s ? s.html : "", d = this.innerHTML.trim(), c = r && !d;
+    let h;
+    r && d ? h = n === "left" ? `${o}<span>${d}</span>` : `<span>${d}</span>${o}` : r ? h = o : h = d, this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<button
+				part="button"
+				class="btn ${i} ${t}${r ? " has-icon" : ""}${c ? " icon-only" : ""}"
+				type="${a}"
+				${e ? "disabled" : ""}
+			>
+				${h}
+		</button>
+	`;
+  }
+}
+customElements.define("ui-button", C);
+class S extends g {
+  constructor() {
+    super();
+    p(this, "inputEl", null);
+    p(this, "customValidator", null);
+    p(this, "validationRule", null);
+    this.state = {
+      value: "",
+      valid: !0,
+      touched: !1,
+      error: ""
+    };
+  }
+  static get observedAttributes() {
+    return ["type", "label", "placeholder", "required", "pattern", "minlength", "maxlength", "min", "max", "error-message", "custom-error", "disabled", "name", "validate"];
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "input"), super.connectedCallback();
+  }
+  attributeChangedCallback(t, e, a) {
+    e !== a && t !== "value" && this.render();
+  }
+  setCustomValidator(t) {
+    this.customValidator = t, this.validate();
+  }
+  get value() {
+    return this.state.value;
+  }
+  set value(t) {
+    this.state.value = t, this.inputEl && this.inputEl.value !== t && (this.inputEl.value = t), this.validate();
+  }
+  get isValid() {
+    return this.state.valid;
+  }
+  checkValidity() {
+    return this.state.touched = !0, this.validate();
+  }
+  reportValidity() {
+    this.state.touched = !0;
+    const t = this.validate();
+    return this.updateErrorDisplay(), !t && this.inputEl && this.inputEl.focus(), t;
+  }
+  getType() {
+    const t = this.getAttribute("type");
+    return ["text", "email", "password", "number", "tel", "url"].includes(t || "") ? t : "text";
+  }
+  getLabel() {
+    return this.getAttribute("label") || "";
+  }
+  getPlaceholder() {
+    return this.getAttribute("placeholder") || "";
+  }
+  getName() {
+    return this.getAttribute("name") || "";
+  }
+  getErrorMessage() {
+    return this.state.error ? this.state.error : this.getAttribute("error-message") || this.getAttribute("custom-error") || "";
+  }
+  getCustomError() {
+    return this.getAttribute("custom-error") || "";
+  }
+  parseValidationRule(t) {
+    return t.startsWith("email:") ? { type: "emailDomain", domain: t.slice(6) } : t.startsWith("match:") ? { type: "match", selector: t.slice(6) } : t.startsWith("min:") ? { type: "minLength", length: parseInt(t.slice(4), 10) } : t.startsWith("max:") ? { type: "maxLength", length: parseInt(t.slice(4), 10) } : t.startsWith("regex:") ? { type: "regex", pattern: t.slice(6) } : null;
+  }
+  applyValidationRule(t) {
+    const e = this.state.value;
+    switch (t.type) {
+      case "emailDomain":
+        if (!e.endsWith(`@${t.domain}`))
+          return { valid: !1, message: `Must end with @${t.domain}` };
+        break;
+      case "match":
+        const a = document.querySelector(t.selector);
+        if (a && e !== a.value)
+          return { valid: !1, message: "Values do not match" };
+        break;
+      case "minLength":
+        if (e.length < t.length)
+          return { valid: !1, message: `Must be at least ${t.length} characters` };
+        break;
+      case "maxLength":
+        if (e.length > t.length)
+          return { valid: !1, message: `Must be no more than ${t.length} characters` };
+        break;
+      case "regex":
+        try {
+          if (!new RegExp(t.pattern).test(e))
+            return { valid: !1, message: "Invalid format" };
+        } catch {
+          return { valid: !1, message: "Invalid validation pattern" };
+        }
+        break;
+    }
+    return { valid: !0 };
+  }
+  validate() {
+    if (!this.inputEl) return !0;
+    const t = this.getAttribute("validate");
+    if (t && (this.validationRule || (this.validationRule = this.parseValidationRule(t)), this.validationRule)) {
+      const e = this.applyValidationRule(this.validationRule);
+      return this.state.valid = e.valid, !e.valid && e.message && (this.state.error = e.message), this.state.valid;
+    }
+    if (this.customValidator) {
+      const e = this.customValidator(this.state.value, this.inputEl);
+      this.state.valid = e.valid, !e.valid && e.message && (this.state.error = e.message);
+    } else {
+      const e = this.inputEl.checkValidity();
+      this.state.valid = e, !e && this.state.touched && (this.state.error = this.inputEl.validationMessage || this.getErrorMessage()), e && (this.state.error = "");
+    }
+    return this.state.valid;
+  }
+  handleInput(t) {
+    const e = t.target;
+    this.state.value = e.value, this.state.touched = !0, this.validate(), this.updateErrorDisplay();
+  }
+  handleBlur() {
+    this.state.touched = !0, this.validate(), this.updateErrorDisplay();
+  }
+  updateErrorDisplay() {
+    if (!this.inputEl) return;
+    const t = this.shadowRoot.querySelector(".input-error"), e = this.shadowRoot.querySelector(".input-wrapper"), a = this.getName();
+    e && e.classList.toggle("invalid", !this.state.valid && this.state.touched), t && (!this.state.valid && this.state.touched && this.state.error ? (t.textContent = this.state.error, t.classList.remove("hidden")) : t.classList.add("hidden")), this.inputEl.setAttribute("aria-invalid", String(!this.state.valid && this.state.touched)), a && this.inputEl.setAttribute("aria-describedby", `${a}-error`);
+  }
+  needsRender() {
+    return this.hasAttribute("type") || this.hasAttribute("label") || this.hasAttribute("placeholder") || this.hasAttribute("required") || this.hasAttribute("pattern") || this.hasAttribute("disabled") || this.hasAttribute("name") || this.hasAttribute("minlength") || this.hasAttribute("maxlength") || this.hasAttribute("min") || this.hasAttribute("max") || this.hasAttribute("error-message") || this.hasAttribute("custom-error") || this.hasAttribute("validate");
+  }
+  render() {
+    const t = this.getType(), e = this.getLabel(), a = this.getPlaceholder(), s = this.getName(), n = this.getErrorMessage(), r = this.hasAttribute("required"), o = this.getAttribute("pattern"), d = this.getAttribute("minlength"), c = this.getAttribute("maxlength"), h = this.getAttribute("min"), u = this.getAttribute("max"), b = this.hasAttribute("disabled"), m = !this.state.valid && this.state.touched, v = e !== "";
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="input-wrapper${m ? " invalid" : ""}${b ? " disabled" : ""}">
+				${v ? `<label class="input-label">${e}${r ? " *" : ""}</label>` : ""}
+				<input
+					part="input"
+					class="input-field"
+					type="${t}"
+					placeholder="${a}"
+					name="${s}"
+					.value="${this.state.value}"
+					${r ? "required" : ""}
+					${o ? `pattern="${o}"` : ""}
+					${d ? `minlength="${d}"` : ""}
+					${c ? `maxlength="${c}"` : ""}
+					${h ? `min="${h}"` : ""}
+					${u ? `max="${u}"` : ""}
+					${b ? "disabled" : ""}
+					aria-invalid="${m}"
+					aria-describedby="${s}-error"
+				/>
+				<span class="input-error${m && n ? "" : " hidden"}" id="${s}-error" role="alert">${n}</span>
+			</div>
+		`, this.inputEl = this.shadowRoot.querySelector(".input-field"), this.inputEl && (this.inputEl.addEventListener("input", this.handleInput.bind(this)), this.inputEl.addEventListener("blur", this.handleBlur.bind(this)));
+  }
+}
+customElements.define("ui-input", S);
+class z extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "columns", []);
+    p(this, "rows", []);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "table"), super.connectedCallback();
+  }
+  set data(t) {
+    this.columns = t.columns, this.rows = t.rows, this.render();
+  }
+  get data() {
+    return { columns: this.columns, rows: this.rows };
+  }
+  render() {
+    const t = this.columns.filter((s) => s.visible !== !1), e = t.map(
+      (s) => `<th class="align-${s.align ?? "left"}">${s.label}</th>`
+    ).join(""), a = this.rows.map(
+      (s, n) => `<tr data-row-index="${n}">${t.map(
+        (r) => r.actions ? `<td class="align-center actions-cell">
+										${r.actions.edit ? `<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${n}">Edit</ui-button>` : ""}
+										${r.actions.delete ? `<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${n}">Delete</ui-button>` : ""}
+									</td>` : `<td class="align-${r.align ?? "left"}">${String(
+          s[r.key] ?? ""
+        )}</td>`
+      ).join("")}</tr>`
+    ).join("");
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="table-wrap">
+				<table>
+					<thead><tr>${e}</tr></thead>
+					<tbody>${a}</tbody>
+				</table>
+			</div>
+		`, this.shadowRoot.querySelectorAll(".action-btn").forEach((s) => {
+      s.addEventListener("click", (n) => {
+        const r = n.currentTarget, o = r.dataset.action, d = parseInt(r.dataset.rowIndex || "0", 10), c = o === "edit" ? "edit-action" : "delete-action";
+        this.dispatchEvent(new CustomEvent(c, {
+          bubbles: !0,
+          composed: !0,
+          detail: { row: this.rows[d], rowIndex: d }
+        }));
+      });
+    });
+  }
+}
+customElements.define("ui-table", z);
+class L extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "inputElement", null);
+    p(this, "isConnected", !1);
+    p(this, "isInternalUpdate", !1);
+    p(this, "hasRendered", !1);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "date-picker"), super.connectedCallback(), this.isConnected = !0;
+  }
+  static get observedAttributes() {
+    return ["value", "format", "min", "max", "disabled", "placeholder", "label"];
+  }
+  attributeChangedCallback(t, e, a) {
+    if (!(!this.isConnected || e === a)) {
+      if (this.isInternalUpdate && t === "value") {
+        this.isInternalUpdate = !1;
+        return;
+      }
+      t === "value" ? this.updateInputValues() : this.render();
+    }
+  }
+  updateInputValues() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]');
+    if (t && e) {
+      const a = this.getValue(), s = this.getFormat(), n = this.formatDate(a, s);
+      t.value = n, e.value = a;
+    }
+  }
+  getFormat() {
+    const t = this.getAttribute("format");
+    return t === "DD/MM/YYYY" || t === "MM/DD/YYYY" || t === "DD-MM-YYYY" || t === "MM-DD-YYYY" ? t : "YYYY-MM-DD";
+  }
+  getValue() {
+    return this.getAttribute("value") || "";
+  }
+  getMin() {
+    return this.getAttribute("min") || "";
+  }
+  getMax() {
+    return this.getAttribute("max") || "";
+  }
+  getPlaceholder() {
+    return this.getAttribute("placeholder") || this.getFormat();
+  }
+  getLabel() {
+    return this.getAttribute("label") || "";
+  }
+  isDisabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+   * Convert date from ISO format (YYYY-MM-DD) to specified format
+   */
+  formatDate(t, e) {
+    if (!t) return "";
+    const a = t.split("-");
+    if (a.length !== 3) return t;
+    const [s, n, r] = a;
+    switch (e) {
+      case "DD/MM/YYYY":
+        return `${r}/${n}/${s}`;
+      case "MM/DD/YYYY":
+        return `${n}/${r}/${s}`;
+      case "DD-MM-YYYY":
+        return `${r}-${n}-${s}`;
+      case "MM-DD-YYYY":
+        return `${n}-${r}-${s}`;
+      case "YYYY-MM-DD":
+      default:
+        return t;
+    }
+  }
+  /**
+   * Convert date from specified format to ISO format (YYYY-MM-DD)
+   */
+  parseDate(t, e) {
+    if (!t) return "";
+    let a, s, n, r;
+    switch (e) {
+      case "DD/MM/YYYY":
+        if (a = t.split("/"), a.length !== 3) return "";
+        [r, n, s] = a;
+        break;
+      case "MM/DD/YYYY":
+        if (a = t.split("/"), a.length !== 3) return "";
+        [n, r, s] = a;
+        break;
+      case "DD-MM-YYYY":
+        if (a = t.split("-"), a.length !== 3) return "";
+        [r, n, s] = a;
+        break;
+      case "MM-DD-YYYY":
+        if (a = t.split("-"), a.length !== 3) return "";
+        [n, r, s] = a;
+        break;
+      case "YYYY-MM-DD":
+      default:
+        return t;
+    }
+    return n = n.padStart(2, "0"), r = r.padStart(2, "0"), `${s}-${n}-${r}`;
+  }
+  attachEventListeners() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]'), a = this.shadowRoot.querySelector(".calendar-btn");
+    if (!t || !e) return;
+    const s = () => {
+      const n = t.value, r = this.getFormat(), o = this.parseDate(n, r);
+      this.isValidDate(o) ? (e.value = o, t.classList.remove("invalid"), this.dispatchDateChange(o)) : n === "" ? (e.value = "", t.classList.remove("invalid"), this.dispatchDateChange("")) : t.classList.add("invalid");
+    };
+    t.addEventListener("blur", s), t.addEventListener("keydown", (n) => {
+      n.key === "Enter" && (s(), t.blur());
+    }), e.addEventListener("change", (n) => {
+      const o = n.target.value, d = this.getFormat(), c = this.formatDate(o, d);
+      t.value = c, t.classList.remove("invalid"), this.dispatchDateChange(o);
+    }), a && a.addEventListener("click", async (n) => {
+      n.preventDefault(), n.stopPropagation(), e.style.pointerEvents = "auto";
+      try {
+        typeof e.showPicker == "function" ? e.showPicker() : (e.focus(), e.click());
+      } catch (r) {
+        console.log("Date picker error:", r), e.focus(), e.click();
+      } finally {
+        setTimeout(() => {
+          e.style.pointerEvents = "none";
+        }, 100);
+      }
+    });
+  }
+  isValidDate(t) {
+    if (!t) return !1;
+    const e = new Date(t);
+    return e instanceof Date && !isNaN(e.getTime());
+  }
+  dispatchDateChange(t) {
+    const e = this.getFormat(), a = this.formatDate(t, e);
+    this.dispatchEvent(
+      new CustomEvent("date-change", {
+        detail: {
+          value: t,
+          formattedValue: a,
+          format: e
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.isInternalUpdate = !0, this.setAttribute("value", t);
+  }
+  /**
+   * Get the current value in ISO format (YYYY-MM-DD)
+   */
+  getISOValue() {
+    return this.getValue();
+  }
+  /**
+   * Get the current value in the specified format
+   */
+  getFormattedValue() {
+    const t = this.getValue(), e = this.getFormat();
+    return this.formatDate(t, e);
+  }
+  /**
+   * Set the date value (accepts ISO format)
+   */
+  setValue(t) {
+    this.setAttribute("value", t);
+  }
+  /**
+   * Clear the date value
+   */
+  clear() {
+    this.setAttribute("value", "");
+  }
+  render() {
+    const t = this.getValue(), e = this.getFormat(), a = this.getMin(), s = this.getMax(), n = this.isDisabled(), r = this.getPlaceholder(), o = this.getLabel(), d = this.formatDate(t, e), c = o !== "";
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="date-picker-container">
+				${c ? `<label class="date-picker-label">${o}</label>` : ""}
+				<div class="date-input-wrapper ${n ? "disabled" : ""}">
+					<input
+						type="text"
+						class="formatted-input"
+						part="input"
+						value="${d}"
+						placeholder="${r}"
+						${n ? "disabled" : ""}
+					/>
+					<button 
+						class="calendar-btn" 
+						type="button"
+						${n ? "disabled" : ""}
+						title="Open calendar"
+					>
+						<svg class="calendar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+						</svg>
+					</button>
+					<input
+						type="date"
+						class="hidden-date-input"
+						value="${t}"
+						${a ? `min="${a}"` : ""}
+						${s ? `max="${s}"` : ""}
+						${n ? "disabled" : ""}
+					/>
+				</div>
+				<div class="format-label">Format: ${e}</div>
+			</div>
+		`, this.attachEventListeners(), this.hasRendered = !0;
+  }
+}
+customElements.define("ui-date-picker", L);
+class I extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "_total", 0);
+    p(this, "_currentPage", 1);
+    p(this, "_pageSize", 10);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "pagination"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["total", "current-page", "page-size"];
+  }
+  attributeChangedCallback(t, e, a) {
+    switch (t) {
+      case "total":
+        this._total = parseInt(a, 10) || 0;
+        break;
+      case "current-page":
+        this._currentPage = parseInt(a, 10) || 1;
+        break;
+      case "page-size":
+        this._pageSize = parseInt(a, 10) || 10;
+        break;
+    }
+    this.render();
+  }
+  get total() {
+    return this._total;
+  }
+  set total(t) {
+    this._total = t, this.setAttribute("total", String(t));
+  }
+  get currentPage() {
+    return this._currentPage;
+  }
+  set currentPage(t) {
+    this._currentPage = t, this.setAttribute("current-page", String(t));
+  }
+  get pageSize() {
+    return this._pageSize;
+  }
+  set pageSize(t) {
+    this._pageSize = t, this.setAttribute("page-size", String(t));
+  }
+  get totalPages() {
+    return Math.ceil(this._total / this._pageSize);
+  }
+  handlePageChange(t) {
+    t < 1 || t > this.totalPages || t === this._currentPage || (this.currentPage = t, this.dispatchEvent(
+      new CustomEvent("page-change", {
+        detail: {
+          page: t,
+          pageSize: this._pageSize,
+          total: this._total,
+          totalPages: this.totalPages
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  getPageNumbers() {
+    const t = this.totalPages, e = this._currentPage;
+    if (t <= 7)
+      return Array.from({ length: t }, (s, n) => n + 1);
+    const a = [];
+    return e <= 3 ? a.push(1, 2, 3, 4, "...", t) : e >= t - 2 ? a.push(1, "...", t - 3, t - 2, t - 1, t) : a.push(1, "...", e - 1, e, e + 1, "...", t), a;
+  }
+  render() {
+    const t = this.totalPages, e = this._currentPage, a = this.getPageNumbers(), s = (e - 1) * this._pageSize + 1, n = Math.min(e * this._pageSize, this._total);
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="pagination-container">
+				<div class="pagination-info">
+					${this._total > 0 ? `Showing ${s} to ${n} of ${this._total}` : "No results"}
+				</div>
+				${t > 1 ? `
+				<nav class="pagination" role="navigation" aria-label="Pagination">
+					<button 
+						class="page-btn nav-btn" 
+						${e === 1 ? "disabled" : ""}
+						data-page="prev"
+						aria-label="Previous page"
+					>
+						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+						</svg>
+					</button>
+					${a.map((r) => r === "..." ? '<button class="page-btn ellipsis" disabled>...</button>' : `
+							<button 
+								class="page-btn ${r === e ? "active" : ""}"
+								data-page="${r}"
+								aria-label="Page ${r}"
+								${r === e ? 'aria-current="page"' : ""}
+							>
+								${r}
+							</button>
+						`).join("")}
+					<button 
+						class="page-btn nav-btn" 
+						${e === t ? "disabled" : ""}
+						data-page="next"
+						aria-label="Next page"
+					>
+						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+						</svg>
+					</button>
+				</nav>
+				` : ""}
+			</div>
+		`, this.attachEventListeners();
+  }
+  attachEventListeners() {
+    this.shadowRoot && this.shadowRoot.addEventListener("click", (t) => {
+      const a = t.target.closest(".page-btn");
+      if (!a || a.disabled) return;
+      const s = a.dataset.page;
+      if (s === "prev")
+        this.handlePageChange(this._currentPage - 1);
+      else if (s === "next")
+        this.handlePageChange(this._currentPage + 1);
+      else if (s) {
+        const n = parseInt(s, 10);
+        isNaN(n) || this.handlePageChange(n);
+      }
+    });
+  }
+}
+customElements.define("ui-pagination", I);
+class M extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "isOpen", this.useSignal(!1));
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "modal"), super.connectedCallback(), this.setupEventListeners();
+  }
+  static get observedAttributes() {
+    return ["open"];
+  }
+  attributeChangedCallback(t, e, a) {
+    t === "open" && e !== a && this.isOpen.set(a !== null);
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", (t) => {
+      t.key === "Escape" && this.isOpen.get() && !this.hasAttribute("no-close-on-escape") && this.close();
+    });
+  }
+  open() {
+    this.isOpen.set(!0), this.setAttribute("open", ""), this.dispatchEvent(new CustomEvent("modal-open", { bubbles: !0, composed: !0 })), document.body.style.overflow = "hidden";
+  }
+  close() {
+    this.isOpen.set(!1), this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("modal-close", { bubbles: !0, composed: !0 })), document.body.style.overflow = "";
+  }
+  handleBackdropClick(t) {
+    t.target.classList.contains("modal-backdrop") && !this.hasAttribute("no-close-on-backdrop") && this.close();
+  }
+  render() {
+    const t = this.isOpen.get(), e = this.getAttribute("title") || "", a = this.getAttribute("size") || "md";
+    this.shadowRoot.innerHTML = `
+			<style>
+				${f}
+				
+				::slotted([slot="footer"]) {
+					display: flex;
+					gap: 0.75rem;
+					width: 100%;
+					justify-content: flex-end;
+				}
+			</style>
+
+			<div class="modal-backdrop ${t ? "open" : ""}" part="backdrop">
+				<div class="modal-content ${a}" part="content" @click="${(r) => r.stopPropagation()}">
+					${e ? `
+						<div class="modal-header" part="header">
+							<h2 class="modal-title">${e}</h2>
+							<button class="modal-close" part="close" aria-label="Close modal">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<line x1="18" y1="6" x2="6" y2="18"></line>
+									<line x1="6" y1="6" x2="18" y2="18"></line>
+								</svg>
+							</button>
+						</div>
+					` : ""}
+					
+					<div class="modal-body" part="body">
+						<slot></slot>
+					</div>
+
+					<div class="modal-footer" part="footer">
+						<slot name="footer"></slot>
+					</div>
+				</div>
+			</div>
+		`;
+    const s = this.shadowRoot.querySelector(".modal-backdrop"), n = this.shadowRoot.querySelector(".modal-close");
+    s == null || s.addEventListener("click", (r) => this.handleBackdropClick(r)), n == null || n.addEventListener("click", () => this.close());
+  }
+}
+customElements.define("ui-modal", M);
+class R extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "isOpen", this.useSignal(!1));
+    p(this, "selectedValue", this.useSignal(""));
+    p(this, "searchTerm", this.useSignal(""));
+    p(this, "options", []);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "select"), super.connectedCallback(), this.parseOptions(), this.setupClickOutside();
+  }
+  static get observedAttributes() {
+    return ["value", "disabled", "placeholder", "options"];
+  }
+  attributeChangedCallback(t, e, a) {
+    t === "value" && e !== a && this.selectedValue.set(a || ""), t === "options" && e !== a && this.parseOptions(), this.render();
+  }
+  parseOptions() {
+    const t = this.getAttribute("options");
+    if (t)
+      try {
+        this.options = JSON.parse(t);
+      } catch (e) {
+        console.error("Invalid options JSON", e), this.options = [];
+      }
+  }
+  setupClickOutside() {
+    document.addEventListener("click", (t) => {
+      !t.composedPath().includes(this) && this.isOpen.get() && this.isOpen.set(!1);
+    });
+  }
+  toggleDropdown() {
+    this.hasAttribute("disabled") || (this.isOpen.set(!this.isOpen.get()), this.isOpen.get() || this.searchTerm.set(""));
+  }
+  selectOption(t) {
+    this.selectedValue.set(t), this.setAttribute("value", t), this.isOpen.set(!1), this.searchTerm.set(""), this.dispatchEvent(new CustomEvent("select-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: {
+        value: t,
+        option: this.options.find((e) => e.value === t)
+      }
+    }));
+  }
+  handleSearch(t) {
+    this.searchTerm.set(t.toLowerCase());
+  }
+  getFilteredOptions() {
+    const t = this.searchTerm.get();
+    return t ? this.options.filter(
+      (e) => e.label.toLowerCase().includes(t) || e.value.toLowerCase().includes(t)
+    ) : this.options;
+  }
+  getSelectedLabel() {
+    const t = this.selectedValue.get(), e = this.options.find((a) => a.value === t);
+    return (e == null ? void 0 : e.label) || this.getAttribute("placeholder") || "Select an option";
+  }
+  render() {
+    const t = this.isOpen.get(), e = this.hasAttribute("disabled"), a = this.hasAttribute("searchable"), s = this.getAttribute("label") || "", n = this.getSelectedLabel(), r = this.getFilteredOptions(), o = this.selectedValue.get() !== "";
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+
+			<div class="select-container">
+				${s ? `<label class="select-label">${s}</label>` : ""}
+				
+				<div class="select-trigger ${t ? "open" : ""}" part="trigger" tabindex="0" ${e ? "disabled" : ""}>
+					<span class="select-placeholder ${o ? "has-selection" : ""}">${n}</span>
+					<span class="select-arrow ${t ? "open" : ""}">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<polyline points="6 9 12 15 18 9"></polyline>
+						</svg>
+					</span>
+				</div>
+
+				<div class="select-dropdown ${t ? "open" : ""}" part="dropdown">
+					${a ? `
+						<input 
+							type="text" 
+							class="select-search" 
+							placeholder="Search..."
+							part="search"
+						>
+					` : ""}
+					
+					${r.length > 0 ? r.map((u) => `
+						<div 
+							class="select-option ${u.value === this.selectedValue.get() ? "selected" : ""} ${u.disabled ? "disabled" : ""}"
+							data-value="${u.value}"
+							part="option"
+						>
+							${u.label}
+						</div>
+					`).join("") : `
+						<div class="select-empty">No options found</div>
+					`}
+				</div>
+			</div>
+		`;
+    const d = this.shadowRoot.querySelector(".select-trigger"), c = this.shadowRoot.querySelector(".select-search"), h = this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");
+    d == null || d.addEventListener("click", () => this.toggleDropdown()), d == null || d.addEventListener("keydown", (u) => {
+      (u.key === "Enter" || u.key === " ") && (u.preventDefault(), this.toggleDropdown());
+    }), c == null || c.addEventListener("input", (u) => {
+      this.handleSearch(u.target.value);
+    }), c == null || c.addEventListener("click", (u) => u.stopPropagation()), h.forEach((u) => {
+      u.addEventListener("click", () => {
+        const b = u.getAttribute("data-value");
+        b && this.selectOption(b);
+      });
+    });
+  }
+}
+customElements.define("ui-select", R);
+class D extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "checked", this.useSignal(!1));
+    p(this, "indeterminate", this.useSignal(!1));
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "checkbox"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["checked", "disabled", "indeterminate"];
+  }
+  attributeChangedCallback(t, e, a) {
+    t === "checked" && e !== a && this.checked.set(a !== null), t === "indeterminate" && e !== a && this.indeterminate.set(a !== null), this.render();
+  }
+  handleChange() {
+    if (this.hasAttribute("disabled")) return;
+    this.indeterminate.get() && (this.indeterminate.set(!1), this.removeAttribute("indeterminate"));
+    const t = !this.checked.get();
+    this.checked.set(t), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.dispatchEvent(new CustomEvent("checkbox-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { checked: t }
+    }));
+  }
+  setChecked(t) {
+    this.checked.set(t), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.indeterminate.set(!1), this.removeAttribute("indeterminate");
+  }
+  setIndeterminate(t) {
+    this.indeterminate.set(t), t ? this.setAttribute("indeterminate", "") : this.removeAttribute("indeterminate");
+  }
+  render() {
+    const t = this.checked.get(), e = this.indeterminate.get(), a = this.hasAttribute("disabled"), s = this.getAttribute("label") || "", n = this.getAttribute("size") || "md", r = {
+      sm: "size-sm",
+      md: "size-md",
+      lg: "size-lg"
+    };
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+
+			<label class="checkbox-container ${r[n]}">
+				<input 
+					type="checkbox" 
+					${t ? "checked" : ""}
+					${a ? "disabled" : ""}
+				>
+				<div class="checkbox-box ${r[n]} ${t ? "checked" : ""} ${e ? "indeterminate" : ""} ${a ? "disabled" : ""}" part="checkbox">
+					<svg class="checkbox-icon check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+						<polyline points="20 6 9 17 4 12"></polyline>
+					</svg>
+					<svg class="checkbox-icon minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+						<line x1="5" y1="12" x2="19" y2="12"></line>
+					</svg>
+				</div>
+				${s ? `<span class="checkbox-label">${s}</span>` : "<slot></slot>"}
+			</label>
+		`;
+    const o = this.shadowRoot.querySelector(".checkbox-container");
+    o == null || o.addEventListener("click", (d) => {
+      d.preventDefault(), this.handleChange();
+    });
+  }
+}
+customElements.define("ui-checkbox", D);
+const T = ':host{display:block}.tabs{background:var(--color-page-bg);border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #00000008;overflow:hidden;position:relative}.tablist{display:flex;position:relative;padding:8px;gap:4px;background:linear-gradient(180deg,#fafafa,#f5f5f5);border-bottom:1px solid rgba(0,0,0,.04)}.tab-indicator{position:absolute;bottom:8px;height:calc(100% - 16px);background:var(--color-page-bg);border-radius:10px;box-shadow:0 2px 8px #0000000f,0 1px 2px #0000000a;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}::slotted([slot="tab"]){-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:#64748b;cursor:pointer;font:600 13px/1 DM Sans,system-ui,-apple-system,sans-serif;letter-spacing:.02em;padding:10px 18px;position:relative;transition:color .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}::slotted([slot="tab"]:hover){color:var(--color-ink)}::slotted([slot="tab"].is-active){color:var(--color-ink)}::slotted([slot="tab"]:focus-visible){outline:none}::slotted([slot="tab"]:focus-visible):after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px solid var(--color-primary);border-radius:8px;pointer-events:none}.panels{padding:24px 28px;min-height:200px}::slotted([slot="panel"]){animation:fadeIn .3s ease}::slotted([slot="panel"]:not(.is-active)){display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.tab-indicator{transition:none}::slotted([slot="panel"]){animation:none}}';
+class Y extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "activeId", null);
+    p(this, "indicator", null);
+    p(this, "handleTabClick", (t) => {
+      const e = t.target;
+      if (!e) return;
+      const a = e.closest('[slot="tab"][data-tab]');
+      if (!a) return;
+      t.preventDefault();
+      const s = a.getAttribute("data-tab");
+      s && this.setActive(s);
+    });
+  }
+  static get observedAttributes() {
+    return ["active"];
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "tabs"), super.connectedCallback(), this.addEventListener("click", this.handleTabClick);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.handleTabClick), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, a) {
+    t === "active" && e !== a && (this.activeId = a, this.syncTabs());
+  }
+  setActive(t) {
+    this.activeId !== t && (this.activeId = t, this.setAttribute("active", t), this.syncTabs(), this.dispatchEvent(new CustomEvent("tab-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: t }
+    })));
+  }
+  getTabs() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="tab"]');
+    return t ? t.assignedElements({ flatten: !0 }) : [];
+  }
+  getPanels() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="panel"]');
+    return t ? t.assignedElements({ flatten: !0 }) : [];
+  }
+  getActiveId(t) {
+    const e = this.getAttribute("active");
+    if (e && t.some((s) => s.getAttribute("data-tab") === e))
+      return e;
+    if (this.activeId && t.some((s) => s.getAttribute("data-tab") === this.activeId))
+      return this.activeId;
+    const a = t.find((s) => s.getAttribute("data-tab"));
+    return (a == null ? void 0 : a.getAttribute("data-tab")) ?? null;
+  }
+  syncTabs() {
+    const t = this.getTabs(), e = this.getPanels();
+    if (t.length === 0) return;
+    const a = this.getActiveId(t);
+    a && (this.activeId = a, this.getAttribute("active") !== a && this.setAttribute("active", a), t.forEach((s) => {
+      const n = s.getAttribute("data-tab");
+      if (!n) return;
+      const r = s.id || `tab-${n}`, o = n === a;
+      s.id = r, s.setAttribute("role", "tab"), s.setAttribute("aria-selected", String(o)), s.setAttribute("tabindex", o ? "0" : "-1"), s.classList.toggle("is-active", o);
+    }), e.forEach((s) => {
+      const n = s.getAttribute("data-tab");
+      if (!n) return;
+      const r = s.id || `panel-${n}`, o = n === a;
+      s.id = r, s.setAttribute("role", "tabpanel"), s.toggleAttribute("hidden", !o), s.classList.toggle("is-active", o);
+      const d = t.find((c) => c.getAttribute("data-tab") === n);
+      d && (d.setAttribute("aria-controls", r), s.setAttribute("aria-labelledby", d.id));
+    }), this.updateIndicator(t, a));
+  }
+  updateIndicator(t, e) {
+    if (!this.indicator) return;
+    const a = t.find((o) => o.getAttribute("data-tab") === e);
+    if (!a) return;
+    const s = this.shadowRoot.querySelector(".tablist");
+    if (!s) return;
+    a.getBoundingClientRect(), s.getBoundingClientRect();
+    const n = t.indexOf(a);
+    let r = 0;
+    for (let o = 0; o < n; o++)
+      r += t[o].offsetWidth;
+    this.indicator.style.transform = `translateX(${r}px)`, this.indicator.style.width = `${a.offsetWidth}px`;
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+			<style>${f}${T}</style>
+			<div class="tabs">
+				<div class="tablist" role="tablist">
+					<div class="tab-indicator"></div>
+					<slot name="tab"></slot>
+				</div>
+				<div class="panels">
+					<slot name="panel"></slot>
+				</div>
+			</div>
+		`, this.indicator = this.shadowRoot.querySelector(".tab-indicator");
+    const t = this.shadowRoot.querySelector('slot[name="tab"]'), e = this.shadowRoot.querySelector('slot[name="panel"]');
+    t == null || t.addEventListener("slotchange", () => this.syncTabs()), e == null || e.addEventListener("slotchange", () => this.syncTabs()), requestAnimationFrame(() => this.syncTabs());
+  }
+}
+customElements.define("ui-tabs", Y);
+const q = ':host{display:block;--card-transition: all .3s cubic-bezier(.4, 0, .2, 1)}:host([data-ui="card"]){display:block}.card{background:#fff;padding:24px;box-sizing:border-box;width:100%;position:relative;transition:var(--card-transition);overflow:hidden}.card.rounded{border-radius:16px}.card.square{border-radius:0}.card.default{border:1px solid #e5e7eb;background:#fff}.card.elevated{border:none;background:linear-gradient(to bottom,#fff,#fafbfc)}.card.bordered{border:2px solid #e5e7eb;background:#fff}.card.ghost{border:1px dashed #d1d5db;background:transparent}.card.default:hover{border-color:#d1d5db;transform:translateY(-2px)}.card.elevated:hover{transform:translateY(-4px)}.card.bordered:hover{border-color:#9ca3af;background:#fafbfc}.card.ghost:hover{border-color:#9ca3af;background:#f9fafb80}.card.elevated:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#6366f11a,#ec48991a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}.card.elevated:hover:before{opacity:1}.card ::slotted(*:first-child){margin-top:0}.card ::slotted(*:last-child){margin-bottom:0}.card:focus-within{outline:2px solid #9ec5ff;outline-offset:2px}@media (max-width: 768px){.card{padding:20px}.card.rounded{border-radius:12px}}@media (max-width: 480px){.card{padding:16px}.card.rounded{border-radius:10px}}@media print{.card{border:1px solid #e5e7eb;box-shadow:none!important;page-break-inside:avoid}}';
+class P extends g {
+  connectedCallback() {
+    this.setAttribute("data-ui", "card"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["shadow", "shadow-color", "rounded", "variant", "elevation"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getShadow() {
+    return this.hasAttribute("shadow") && this.getAttribute("shadow") !== "false";
+  }
+  getShadowColor() {
+    return this.getAttribute("shadow-color") ?? "0, 0, 0";
+  }
+  getRounded() {
+    return this.getAttribute("rounded") !== "false";
+  }
+  getVariant() {
+    const i = this.getAttribute("variant");
+    return i === "elevated" || i === "bordered" || i === "ghost" ? i : "default";
+  }
+  getElevation() {
+    const i = this.getAttribute("elevation");
+    return i === "none" || i === "sm" || i === "md" || i === "lg" || i === "xl" ? i : "sm";
+  }
+  render() {
+    const i = this.getShadow(), t = this.getShadowColor(), e = this.getRounded(), a = this.getVariant(), s = this.getElevation();
+    let n = "none";
+    if (i)
+      switch (s) {
+        case "sm":
+          n = `0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;
+          break;
+        case "md":
+          n = `0 4px 6px rgba(${t}, 0.07), 0 2px 4px rgba(${t}, 0.06)`;
+          break;
+        case "lg":
+          n = `0 10px 15px rgba(${t}, 0.1), 0 4px 6px rgba(${t}, 0.05)`;
+          break;
+        case "xl":
+          n = `0 20px 25px rgba(${t}, 0.15), 0 10px 10px rgba(${t}, 0.04)`;
+          break;
+        default:
+          n = "none";
+      }
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${f}
+        ${q}
+        
+        .card.custom-shadow {
+          box-shadow: ${n};
+        }
+
+        .card.custom-shadow:hover {
+          box-shadow: ${i && s !== "none" ? n.replace(/rgba\(([^)]+), ([\d.]+)\)/g, (r, o, d) => `rgba(${o}, ${Math.min(parseFloat(d) * 1.3, 0.25)})`) : "none"};
+        }
+      </style>
+      <div class="card ${a} ${e ? "rounded" : "square"} ${i ? "custom-shadow" : "no-shadow"}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+customElements.define("ui-card", P);
+const O = ":host{--toast-success: #10b981;--toast-error: #ef4444;--toast-warning: #f59e0b;--toast-info: #3b82f6;--toast-bg: rgba(255, 255, 255, .95);--toast-blur: blur(12px);--toast-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);--toast-border: rgba(255, 255, 255, .3);--toast-text: #1e293b;--toast-radius: 14px;--toast-icon-size: 20px}.toast-container{position:fixed;z-index:10000;pointer-events:none;display:flex;flex-direction:column;gap:12px;max-width:420px;padding:16px}.toast-container.top-right{top:0;right:0}.toast-container.top-left{top:0;left:0}.toast-container.bottom-right{bottom:0;right:0;flex-direction:column-reverse}.toast-container.bottom-left{bottom:0;left:0;flex-direction:column-reverse}.toast-container.top-center{top:0;left:50%;transform:translate(-50%)}.toast-container.bottom-center{bottom:0;left:50%;transform:translate(-50%);flex-direction:column-reverse}.toast{pointer-events:auto;background:var(--toast-bg);backdrop-filter:var(--toast-blur);-webkit-backdrop-filter:var(--toast-blur);border:1px solid var(--toast-border);border-radius:var(--toast-radius);box-shadow:var(--toast-shadow);padding:16px 20px;min-width:300px;max-width:100%;display:flex;align-items:flex-start;gap:14px;position:relative;overflow:hidden;opacity:0;transform:translate(100px);animation:toastSlideIn .4s cubic-bezier(.16,1,.3,1) forwards}.toast.closing{animation:toastSlideOut .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-left .toast,.toast-container.bottom-left .toast{transform:translate(-100px);animation:toastSlideInLeft .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-left .toast.closing,.toast-container.bottom-left .toast.closing{animation:toastSlideOutLeft .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-center .toast,.toast-container.bottom-center .toast{transform:translateY(-50px);animation:toastSlideInTop .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-center .toast.closing,.toast-container.bottom-center .toast.closing{animation:toastSlideOutTop .3s cubic-bezier(.5,0,.75,0) forwards}.toast-icon{flex-shrink:0;width:var(--toast-icon-size);height:var(--toast-icon-size);display:flex;align-items:center;justify-content:center;margin-top:2px}.toast-icon svg{width:100%;height:100%;stroke-width:2.5}.toast.success .toast-icon{color:var(--toast-success)}.toast.error .toast-icon{color:var(--toast-error)}.toast.warning .toast-icon{color:var(--toast-warning)}.toast.info .toast-icon{color:var(--toast-info)}.toast.success:before{background:linear-gradient(135deg,var(--toast-success),rgba(16,185,129,.7))}.toast.error:before{background:linear-gradient(135deg,var(--toast-error),rgba(239,68,68,.7))}.toast.warning:before{background:linear-gradient(135deg,var(--toast-warning),rgba(245,158,11,.7))}.toast.info:before{background:linear-gradient(135deg,var(--toast-info),rgba(59,130,246,.7))}.toast-content{flex:1;min-width:0}.toast-title{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--toast-text);line-height:1.4}.toast-description{margin:0;font-size:13.5px;color:#64748b;line-height:1.5}.toast-close{flex-shrink:0;width:20px;height:20px;padding:0;border:none;background:transparent;color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;margin-top:2px}.toast-close:hover{background:#0000000d;color:var(--toast-text)}.toast-close svg{width:14px;height:14px;stroke-width:2.5}.toast-progress{position:absolute;bottom:0;left:0;height:3px;width:100%;border-radius:0 0 var(--toast-radius) var(--toast-radius);overflow:hidden;background:#0000000d}.toast-progress-bar{height:100%;width:100%;transform-origin:left;animation:toastProgress var(--duration) linear forwards}.toast.success .toast-progress-bar{background:var(--toast-success)}.toast.error .toast-progress-bar{background:var(--toast-error)}.toast.warning .toast-progress-bar{background:var(--toast-warning)}.toast.info .toast-progress-bar{background:var(--toast-info)}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(100px) scale(.95)}}@keyframes toastSlideInLeft{0%{opacity:0;transform:translate(-100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOutLeft{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(-100px) scale(.95)}}@keyframes toastSlideInTop{0%{opacity:0;transform:translateY(-50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastSlideOutTop{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(.95)}}@keyframes toastProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-color-scheme: dark){:host{--toast-bg: rgba(30, 41, 59, .95);--toast-border: rgba(255, 255, 255, .1);--toast-text: #f1f5f9;--toast-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .2)}.toast-description{color:#94a3b8}.toast-close{color:#64748b}.toast-close:hover{background:#ffffff1a;color:var(--toast-text)}.toast-progress{background:#ffffff1a}}@media (max-width: 480px){.toast-container{max-width:calc(100vw - 32px);left:16px!important;right:16px!important;transform:none!important;padding:12px}.toast{min-width:0;width:100%}}";
+class H extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "toasts", /* @__PURE__ */ new Map());
+    p(this, "toastCounter", 0);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "toast"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["position"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getPosition() {
+    const t = this.getAttribute("position");
+    return t === "top-left" || t === "bottom-right" || t === "bottom-left" || t === "top-center" || t === "bottom-center" ? t : "top-right";
+  }
+  getIcon(t) {
+    var s;
+    const a = {
+      success: "check-circle",
+      error: "x-circle",
+      warning: "alert-triangle",
+      info: "info"
+    }[t];
+    return ((s = k.icons[a]) == null ? void 0 : s.toSvg()) || "";
+  }
+  /**
+   * Show a toast notification
+   * @param config Toast configuration
+   * @returns Toast ID for manual dismissal
+   */
+  show(t) {
+    const {
+      title: e,
+      description: a = "",
+      type: s = "info",
+      duration: n = 5e3,
+      closable: r = !0
+    } = t, o = `toast-${++this.toastCounter}`, d = this.getIcon(s), c = document.createElement("div");
+    c.className = `toast ${s}`, c.setAttribute("role", "alert"), c.setAttribute("aria-live", "polite"), c.innerHTML = `
+      <div class="toast-icon">${d}</div>
+      <div class="toast-content">
+        <div class="toast-title">${this.escapeHtml(e)}</div>
+        ${a ? `<div class="toast-description">${this.escapeHtml(a)}</div>` : ""}
+      </div>
+      ${r ? `
+        <button class="toast-close" aria-label="Close notification">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      ` : ""}
+      ${n > 0 ? `
+        <div class="toast-progress">
+          <div class="toast-progress-bar" style="--duration: ${n}ms"></div>
+        </div>
+      ` : ""}
+    `;
+    const h = this.shadowRoot.querySelector(".toast-container");
+    if (h && h.appendChild(c), r) {
+      const b = c.querySelector(".toast-close");
+      b == null || b.addEventListener("click", () => this.dismiss(o));
+    }
+    let u;
+    return n > 0 && (u = window.setTimeout(() => {
+      this.dismiss(o);
+    }, n)), this.toasts.set(o, { element: c, timer: u }), this.dispatchEvent(
+      new CustomEvent("toast-show", {
+        bubbles: !0,
+        composed: !0,
+        detail: { id: o, ...t }
+      })
+    ), o;
+  }
+  /**
+   * Dismiss a specific toast
+   */
+  dismiss(t) {
+    const e = this.toasts.get(t);
+    e && (e.timer && clearTimeout(e.timer), e.element.classList.add("closing"), setTimeout(() => {
+      e.element.remove(), this.toasts.delete(t), this.dispatchEvent(
+        new CustomEvent("toast-dismiss", {
+          bubbles: !0,
+          composed: !0,
+          detail: { id: t }
+        })
+      );
+    }, 300));
+  }
+  /**
+   * Dismiss all toasts
+   */
+  dismissAll() {
+    Array.from(this.toasts.keys()).forEach((e) => this.dismiss(e));
+  }
+  /**
+   * Convenience methods for different toast types
+   */
+  success(t, e, a) {
+    return this.show({ title: t, description: e, type: "success", duration: a });
+  }
+  error(t, e, a) {
+    return this.show({ title: t, description: e, type: "error", duration: a });
+  }
+  warning(t, e, a) {
+    return this.show({ title: t, description: e, type: "warning", duration: a });
+  }
+  info(t, e, a) {
+    return this.show({ title: t, description: e, type: "info", duration: a });
+  }
+  escapeHtml(t) {
+    const e = document.createElement("div");
+    return e.textContent = t, e.innerHTML;
+  }
+  render() {
+    const t = this.getPosition();
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${f}
+        ${O}
+      </style>
+      <div class="toast-container ${t}"></div>
+    `;
+  }
+}
+customElements.define("ui-toast", H);
+class F extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "steps", []);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "stepper"), super.connectedCallback(), this.parseSteps();
+  }
+  static get observedAttributes() {
+    return ["steps", "active", "orientation", "size"];
+  }
+  attributeChangedCallback(t, e, a) {
+    if (t === "steps" && e !== a && this.parseSteps(), t === "active" && e !== a) {
+      this.render();
+      return;
+    }
+    this.render();
+  }
+  parseSteps() {
+    const t = this.getAttribute("steps");
+    if (!t) {
+      this.steps = [];
+      return;
+    }
+    try {
+      const e = JSON.parse(t);
+      this.steps = Array.isArray(e) ? e : [];
+    } catch (e) {
+      console.error("Invalid steps JSON", e), this.steps = [];
+    }
+  }
+  getOrientation() {
+    return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+  }
+  getSize() {
+    const t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
+  }
+  getActiveIndex(t) {
+    const e = parseInt(this.getAttribute("active") || "1", 10);
+    return Number.isNaN(e) || t <= 0 ? 1 : Math.min(Math.max(e, 1), t);
+  }
+  resolveState(t, e, a) {
+    return t.state ? t.state : e + 1 < a ? "complete" : e + 1 === a ? "active" : "upcoming";
+  }
+  setActive(t) {
+    const e = this.steps.length;
+    if (e === 0) return;
+    const a = Math.min(Math.max(t, 1), e);
+    if (a === this.getActiveIndex(e)) return;
+    this.setAttribute("active", String(a));
+    const s = this.steps[a - 1], n = this.resolveState(s, a - 1, a);
+    this.dispatchEvent(
+      new CustomEvent("step-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { index: a, step: s, state: n }
+      })
+    );
+  }
+  escapeHtml(t) {
+    const e = document.createElement("div");
+    return e.textContent = t, e.innerHTML;
+  }
+  render() {
+    const t = this.getOrientation(), e = this.getSize(), a = this.steps, s = a.length, n = this.getActiveIndex(s);
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="stepper-wrap">
+				${s === 0 ? '<div class="stepper-empty">No steps configured</div>' : `
+					<ol class="stepper ${t} ${e}" role="list">
+						${a.map((r, o) => {
+      const d = this.resolveState(r, o, n), c = d === "active", h = r.disabled ? "disabled" : "";
+      return `
+								<li class="step ${d} ${h}" data-state="${d}">
+									<button class="step-trigger" data-index="${o}" ${r.disabled ? "disabled" : ""} aria-current="${c ? "step" : "false"}">
+										<span class="step-node">${o + 1}</span>
+										<span class="step-text">
+											<span class="step-title">${this.escapeHtml(r.title || `Step ${o + 1}`)}</span>
+											${r.description ? `<span class="step-desc">${this.escapeHtml(r.description)}</span>` : ""}
+										</span>
+									</button>
+									${o < s - 1 ? '<span class="step-connector" aria-hidden="true"></span>' : ""}
+								</li>
+							`;
+    }).join("")}
+					</ol>
+				`}
+			</div>
+		`, this.shadowRoot.querySelectorAll(".step-trigger").forEach((r) => {
+      r.addEventListener("click", () => {
+        const o = parseInt(r.dataset.index || "0", 10);
+        Number.isNaN(o) || this.setActive(o + 1);
+      });
+    });
+  }
+}
+customElements.define("ui-stepper", F);
+class V extends g {
+  constructor() {
+    super(...arguments);
+    p(this, "files", this.useSignal([]));
+    p(this, "isDragging", this.useSignal(!1));
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "upload"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["accept", "multiple", "disabled", "label", "helper", "name"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  get value() {
+    return this.files.get().map((t) => t.name).join(", ");
+  }
+  get filesValue() {
+    return this.files.get();
+  }
+  set filesValue(t) {
+    this.setFiles(t);
+  }
+  clear() {
+    this.setFiles([]);
+  }
+  isDisabled() {
+    return this.hasAttribute("disabled");
+  }
+  isMultiple() {
+    return this.hasAttribute("multiple");
+  }
+  getAccept() {
+    return this.getAttribute("accept") || "";
+  }
+  getLabel() {
+    return this.getAttribute("label") || "Upload files";
+  }
+  getHelper() {
+    return this.getAttribute("helper") || "";
+  }
+  setFiles(t) {
+    const e = this.isMultiple() ? t : t.slice(0, 1);
+    this.files.set(e), this.dispatchEvent(
+      new CustomEvent("upload-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { files: e }
+      })
+    );
+  }
+  formatSize(t) {
+    if (t < 1024) return `${t} B`;
+    const e = t / 1024;
+    return e < 1024 ? `${e.toFixed(1)} KB` : `${(e / 1024).toFixed(1)} MB`;
+  }
+  syncInputFiles(t, e) {
+    const a = new DataTransfer();
+    e.forEach((s) => a.items.add(s)), t.files = a.files;
+  }
+  render() {
+    const t = this.getAccept(), e = this.getLabel(), a = this.getHelper(), s = this.isDisabled(), n = this.isMultiple(), r = this.isDragging.get(), o = this.files.get();
+    this.shadowRoot.innerHTML = `
+			<style>${f}</style>
+			<div class="upload">
+				${e ? `<label class="upload-label">${e}</label>` : ""}
+				<div class="upload-drop ${r ? "dragging" : ""} ${s ? "disabled" : ""}" part="dropzone">
+					<input
+						class="upload-input"
+						type="file"
+						${n ? "multiple" : ""}
+						${t ? `accept="${t}"` : ""}
+						${s ? "disabled" : ""}
+					>
+					<div class="upload-content">
+						<div class="upload-icon" aria-hidden="true">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<path d="M12 16V4"></path>
+								<path d="M8 8l4-4 4 4"></path>
+								<path d="M4 16v4h16v-4"></path>
+							</svg>
+						</div>
+						<div class="upload-text">
+							<div class="upload-title">Drop files here or browse</div>
+							<div class="upload-sub">
+								${t ? `Accepted: ${t}` : "Any file type supported"}
+							</div>
+						</div>
+						<button class="upload-btn" type="button" ${s ? "disabled" : ""}>Browse</button>
+					</div>
+				</div>
+				${a ? `<div class="upload-helper">${a}</div>` : ""}
+				${o.length ? `
+					<ul class="upload-list">
+						${o.map(
+      (b, m) => `
+								<li>
+									<span>${b.name}</span>
+									<span class="upload-meta">${this.formatSize(b.size)}</span>
+									<button class="upload-remove" data-index="${m}" type="button">Remove</button>
+								</li>
+							`
+    ).join("")}
+					</ul>
+				` : ""}
+			</div>
+		`;
+    const d = this.shadowRoot.querySelector(".upload-drop"), c = this.shadowRoot.querySelector(".upload-input"), h = this.shadowRoot.querySelector(".upload-btn"), u = this.shadowRoot.querySelectorAll(".upload-remove");
+    !d || !c || (o.length ? this.syncInputFiles(c, o) : c.value = "", d.addEventListener("dragover", (b) => {
+      s || (b.preventDefault(), this.isDragging.set(!0));
+    }), d.addEventListener("dragleave", () => {
+      this.isDragging.set(!1);
+    }), d.addEventListener("drop", (b) => {
+      var v;
+      if (s) return;
+      b.preventDefault(), this.isDragging.set(!1);
+      const m = Array.from(((v = b.dataTransfer) == null ? void 0 : v.files) ?? []);
+      m.length && (this.setFiles(m), this.syncInputFiles(c, this.files.get()));
+    }), c.addEventListener("change", () => {
+      const b = Array.from(c.files ?? []);
+      this.setFiles(b);
+    }), h == null || h.addEventListener("click", () => {
+      s || c.click();
+    }), u.forEach((b) => {
+      b.addEventListener("click", () => {
+        const m = parseInt(b.dataset.index || "0", 10), v = this.files.get().filter((_, w) => w !== m);
+        this.setFiles(v), this.syncInputFiles(c, v);
+      });
+    }));
+  }
+}
+customElements.define("ui-upload", V);
+class U {
+  constructor() {
+    p(this, "baseURL", "");
+    p(this, "defaultHeaders", {
+      "Content-Type": "application/json"
+    });
+    p(this, "defaultTimeout", 3e4);
+    p(this, "interceptors", {
+      request: {
+        handlers: [],
+        use: (i, t) => {
+          this.interceptors.request.handlers.push({ onFulfilled: i, onRejected: t });
+        }
+      },
+      response: {
+        handlers: [],
+        use: (i, t) => {
+          this.interceptors.response.handlers.push({ onFulfilled: i, onRejected: t });
+        }
+      }
+    });
+  }
+  /**
+   * Set base URL for all requests
+   */
+  setBaseURL(i) {
+    this.baseURL = i;
+  }
+  /**
+   * Get currently set base URL
+   */
+  getBaseURL() {
+    return this.baseURL;
+  }
+  /**
+   * Set default headers for all requests
+   */
+  setDefaultHeaders(i) {
+    this.defaultHeaders = { ...this.defaultHeaders, ...i };
+  }
+  /**
+   * Set default timeout for all requests (in ms)
+   */
+  setDefaultTimeout(i) {
+    this.defaultTimeout = i;
+  }
+  /**
+   * Execute request with interceptors
+   */
+  async executeRequest(i, t) {
+    const e = i.startsWith("http") ? i : this.baseURL + i;
+    let a = {
+      method: "GET",
+      headers: { ...this.defaultHeaders },
+      timeout: this.defaultTimeout,
+      ...t
+    };
+    for (const r of this.interceptors.request.handlers)
+      try {
+        a = await r.onFulfilled(a);
+      } catch (o) {
+        if (r.onRejected)
+          a = await r.onRejected(o);
+        else
+          throw o;
+      }
+    const s = new AbortController(), n = setTimeout(() => s.abort(), a.timeout || this.defaultTimeout);
+    try {
+      const r = {
+        method: a.method,
+        headers: a.headers,
+        signal: s.signal
+      };
+      a.body && a.method !== "GET" && (r.body = (typeof a.body == "string", a.body));
+      const o = await fetch(e, r);
+      let d;
+      const c = o.headers.get("content-type");
+      c != null && c.includes("application/json") ? d = o.ok ? await o.json() : null : c != null && c.includes("text") ? d = await o.text() : d = await o.blob();
+      let h = {
+        status: o.status,
+        statusText: o.statusText,
+        headers: o.headers,
+        data: d
+      };
+      if (!o.ok) {
+        const u = new Error(`HTTP ${o.status}: ${o.statusText}`);
+        throw u.response = h, u.config = a, u;
+      }
+      for (const u of this.interceptors.response.handlers)
+        try {
+          h = await u.onFulfilled(h);
+        } catch (b) {
+          if (u.onRejected)
+            h = await u.onRejected(b);
+          else
+            throw b;
+        }
+      return h.data;
+    } catch (r) {
+      throw r instanceof Error && r.name === "AbortError" ? new Error(`Request timeout after ${a.timeout}ms`) : r;
+    } finally {
+      clearTimeout(n);
+    }
+  }
+  /**
+   * GET request
+   */
+  async get(i, t) {
+    return this.executeRequest(i, { ...t, method: "GET" });
+  }
+  /**
+   * POST request
+   */
+  async post(i, t, e) {
+    return this.executeRequest(i, {
+      ...e,
+      method: "POST",
+      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
+    });
+  }
+  /**
+   * PUT request
+   */
+  async put(i, t, e) {
+    return this.executeRequest(i, {
+      ...e,
+      method: "PUT",
+      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
+    });
+  }
+  /**
+   * PATCH request
+   */
+  async patch(i, t, e) {
+    return this.executeRequest(i, {
+      ...e,
+      method: "PATCH",
+      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
+    });
+  }
+  /**
+   * DELETE request
+   */
+  async delete(i, t) {
+    return this.executeRequest(i, { ...t, method: "DELETE" });
+  }
+  /**
+   * HEAD request
+   */
+  async head(i, t) {
+    return this.executeRequest(i, { ...t, method: "HEAD" });
+  }
+}
+const J = new U();
+function x(l, i) {
+  return l ? l.querySelector(i) : null;
+}
+function G(l, i) {
+  return l ? l.querySelectorAll(i) : [];
+}
+function X(l, i) {
+  return l ? l.querySelector(`#${i}`) : null;
+}
+function K(l, i, t, e, a) {
+  if (!l) return null;
+  const s = l.querySelector(`#${i}`);
+  return s ? (s.addEventListener(t, e, a), s) : null;
+}
+function Q(l, i) {
+  return x(l, i);
+}
+function Z(l, i) {
+  return x(l, i);
+}
+function tt(l, i) {
+  return x(l, i);
+}
+const N = "input, select, textarea, ui-input, ui-select, ui-date-picker, ui-checkbox, ui-upload";
+function y(l) {
+  return l.getAttribute("name") || l.getAttribute("id") || "";
+}
+function j(l) {
+  const i = l.tagName.toLowerCase();
+  if (i === "ui-checkbox")
+    return l.hasAttribute("checked");
+  if (i === "ui-upload") {
+    const a = l == null ? void 0 : l.filesValue;
+    return Array.isArray(a) && a.length > 0 ? a : [];
+  }
+  const t = l == null ? void 0 : l.value;
+  if (typeof t == "string" && t !== "")
+    return t;
+  const e = l.getAttribute("value");
+  return e || "";
+}
+function et(l, i = {}) {
+  const { includeDisabled: t = !1, includeEmpty: e = !0 } = i, a = {}, s = /* @__PURE__ */ new Map();
+  l.querySelectorAll('input[type="checkbox"]').forEach((r) => {
+    const o = y(r);
+    o && s.set(o, (s.get(o) || 0) + 1);
+  });
+  const n = Array.from(l.querySelectorAll(N));
+  for (const r of n) {
+    if (!t && (r.disabled || r.hasAttribute("disabled"))) continue;
+    const o = y(r);
+    if (!o) continue;
+    if (r instanceof HTMLInputElement) {
+      const c = r.type;
+      if (c === "checkbox") {
+        if ((s.get(o) || 0) > 1) {
+          const u = a[o] || [];
+          r.checked && u.push(r.value || "on"), a[o] = u;
+        } else
+          a[o] = r.checked;
+        continue;
+      }
+      if (c === "radio") {
+        r.checked && (a[o] = r.value);
+        continue;
+      }
+      if (c === "file") {
+        const h = Array.from(r.files ?? []);
+        (e || h.length > 0) && (a[o] = h);
+        continue;
+      }
+      (e || r.value !== "") && (a[o] = r.value);
+      continue;
+    }
+    if (r instanceof HTMLSelectElement) {
+      if (r.multiple) {
+        const c = Array.from(r.selectedOptions).map((h) => h.value);
+        (e || c.length > 0) && (a[o] = c);
+      } else (e || r.value !== "") && (a[o] = r.value);
+      continue;
+    }
+    if (r instanceof HTMLTextAreaElement) {
+      (e || r.value !== "") && (a[o] = r.value);
+      continue;
+    }
+    const d = j(r);
+    (e || (Array.isArray(d) ? d.length > 0 : d !== "")) && (a[o] = d);
+  }
+  return a;
+}
+export {
+  U as HTTPClient,
+  C as UIButton,
+  P as UICard,
+  D as UICheckbox,
+  L as UIDatePicker,
+  S as UIInput,
+  M as UIModal,
+  I as UIPagination,
+  R as UISelect,
+  F as UIStepper,
+  z as UITable,
+  Y as UITabs,
+  H as UIToast,
+  V as UIUpload,
+  K as addEventListenerById,
+  X as getElementById,
+  et as getFormValues,
+  J as http,
+  x as queryElement,
+  G as queryElements,
+  tt as queryModal,
+  Z as queryPagination,
+  Q as queryTable
+};