@diniz/webcomponents 1.0.7 → 1.1.3

package/dist/webcomponents.es.js

@@ -0,0 +1,1193 @@
+var x = Object.defineProperty;
+var y = (u, s, t) => s in u ? x(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
+var c = (u, s, t) => y(u, typeof s != "symbol" ? s + "" : s, t);
+import k from "feather-icons";
+function w(u) {
+  let s = u;
+  const t = /* @__PURE__ */ new Set();
+  return {
+    get: () => s,
+    set: (e) => {
+      Object.is(s, e) || (s = e, t.forEach((a) => a(s)));
+    },
+    subscribe: (e) => (t.add(e), () => t.delete(e))
+  };
+}
+class b extends HTMLElement {
+  constructor() {
+    super();
+    c(this, "state");
+    c(this, "signalUnsubs");
+    this.attachShadow({ mode: "open" }), this.state = {}, this.signalUnsubs = /* @__PURE__ */ new Set();
+  }
+  useSignal(t) {
+    const e = w(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 g = ':root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #f8fafc;--color-border: #e2e8f0;--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="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="date-picker"]){display:inline-block;width:100%;max-width:300px}.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;pointer-events:none;width:0;height:0}.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}';
+class $ extends b {
+  connectedCallback() {
+    this.setAttribute("data-ui", "button"), super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return ["variant", "size", "disabled", "type", "icon", "icon-position"];
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  getVariant() {
+    const s = this.getAttribute("variant");
+    return s === "secondary" || s === "ghost" || s === "danger" ? s : "primary";
+  }
+  getSize() {
+    const s = this.getAttribute("size");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  getType() {
+    return this.getAttribute("type") ?? "button";
+  }
+  getIcon() {
+    var a;
+    const s = this.getAttribute("icon");
+    if (!s) return null;
+    const t = s.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 s = this.getVariant(), t = this.getSize(), e = this.hasAttribute("disabled"), a = this.getType(), i = this.getIcon(), r = this.getIconPosition(), o = i !== null, n = i ? i.html : "", l = this.innerHTML.trim(), h = o && !l;
+    let p;
+    o && l ? p = r === "left" ? `${n}<span>${l}</span>` : `<span>${l}</span>${n}` : o ? p = n : p = l, this.shadowRoot.innerHTML = `
+			<style>${g}</style>
+			<button
+				part="button"
+				class="btn ${s} ${t}${o ? " has-icon" : ""}${h ? " icon-only" : ""}"
+				type="${a}"
+				${e ? "disabled" : ""}
+			>
+				${p}
+		</button>
+	`;
+  }
+}
+customElements.define("ui-button", $);
+class A extends b {
+  constructor() {
+    super();
+    c(this, "inputEl", null);
+    c(this, "customValidator", null);
+    c(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(), i = this.getName(), r = this.getErrorMessage(), o = this.hasAttribute("required"), n = this.getAttribute("pattern"), l = this.getAttribute("minlength"), h = this.getAttribute("maxlength"), p = this.getAttribute("min"), d = this.getAttribute("max"), m = this.hasAttribute("disabled"), f = !this.state.valid && this.state.touched, v = e !== "";
+    this.shadowRoot.innerHTML = `
+			<style>${g}</style>
+			<div class="input-wrapper${f ? " invalid" : ""}${m ? " disabled" : ""}">
+				${v ? `<label class="input-label">${e}${o ? " *" : ""}</label>` : ""}
+				<input
+					part="input"
+					class="input-field"
+					type="${t}"
+					placeholder="${a}"
+					name="${i}"
+					.value="${this.state.value}"
+					${o ? "required" : ""}
+					${n ? `pattern="${n}"` : ""}
+					${l ? `minlength="${l}"` : ""}
+					${h ? `maxlength="${h}"` : ""}
+					${p ? `min="${p}"` : ""}
+					${d ? `max="${d}"` : ""}
+					${m ? "disabled" : ""}
+					aria-invalid="${f}"
+					aria-describedby="${i}-error"
+				/>
+				<span class="input-error${f && r ? "" : " hidden"}" id="${i}-error" role="alert">${r}</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", A);
+class E extends b {
+  constructor() {
+    super(...arguments);
+    c(this, "columns", []);
+    c(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((i) => i.visible !== !1), e = t.map(
+      (i) => `<th class="align-${i.align ?? "left"}">${i.label}</th>`
+    ).join(""), a = this.rows.map(
+      (i, r) => `<tr data-row-index="${r}">${t.map(
+        (o) => o.actions ? `<td class="align-center actions-cell">
+										${o.actions.edit ? `<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${r}">Edit</ui-button>` : ""}
+										${o.actions.delete ? `<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${r}">Delete</ui-button>` : ""}
+									</td>` : `<td class="align-${o.align ?? "left"}">${String(
+          i[o.key] ?? ""
+        )}</td>`
+      ).join("")}</tr>`
+    ).join("");
+    this.shadowRoot.innerHTML = `
+			<style>${g}</style>
+			<div class="table-wrap">
+				<table>
+					<thead><tr>${e}</tr></thead>
+					<tbody>${a}</tbody>
+				</table>
+			</div>
+		`, this.shadowRoot.querySelectorAll(".action-btn").forEach((i) => {
+      i.addEventListener("click", (r) => {
+        const o = r.currentTarget, n = o.dataset.action, l = parseInt(o.dataset.rowIndex || "0", 10), h = n === "edit" ? "edit-action" : "delete-action";
+        this.dispatchEvent(new CustomEvent(h, {
+          bubbles: !0,
+          composed: !0,
+          detail: { row: this.rows[l], rowIndex: l }
+        }));
+      });
+    });
+  }
+}
+customElements.define("ui-table", E);
+class C extends b {
+  constructor() {
+    super(...arguments);
+    c(this, "inputElement", null);
+  }
+  connectedCallback() {
+    this.setAttribute("data-ui", "date-picker"), super.connectedCallback(), this.attachEventListeners();
+  }
+  static get observedAttributes() {
+    return ["value", "format", "min", "max", "disabled", "placeholder"];
+  }
+  attributeChangedCallback() {
+    this.render(), this.attachEventListeners();
+  }
+  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();
+  }
+  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 [i, r, o] = a;
+    switch (e) {
+      case "DD/MM/YYYY":
+        return `${o}/${r}/${i}`;
+      case "MM/DD/YYYY":
+        return `${r}/${o}/${i}`;
+      case "DD-MM-YYYY":
+        return `${o}-${r}-${i}`;
+      case "MM-DD-YYYY":
+        return `${r}-${o}-${i}`;
+      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, i, r, o;
+    switch (e) {
+      case "DD/MM/YYYY":
+        if (a = t.split("/"), a.length !== 3) return "";
+        [o, r, i] = a;
+        break;
+      case "MM/DD/YYYY":
+        if (a = t.split("/"), a.length !== 3) return "";
+        [r, o, i] = a;
+        break;
+      case "DD-MM-YYYY":
+        if (a = t.split("-"), a.length !== 3) return "";
+        [o, r, i] = a;
+        break;
+      case "MM-DD-YYYY":
+        if (a = t.split("-"), a.length !== 3) return "";
+        [r, o, i] = a;
+        break;
+      case "YYYY-MM-DD":
+      default:
+        return t;
+    }
+    return r = r.padStart(2, "0"), o = o.padStart(2, "0"), `${i}-${r}-${o}`;
+  }
+  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 i = () => {
+      const r = t.value, o = this.getFormat(), n = this.parseDate(r, o);
+      this.isValidDate(n) ? (e.value = n, t.classList.remove("invalid"), this.dispatchDateChange(n)) : r === "" ? (e.value = "", t.classList.remove("invalid"), this.dispatchDateChange("")) : t.classList.add("invalid");
+    };
+    t.addEventListener("blur", i), t.addEventListener("keydown", (r) => {
+      r.key === "Enter" && (i(), t.blur());
+    }), e.addEventListener("change", (r) => {
+      const n = r.target.value, l = this.getFormat(), h = this.formatDate(n, l);
+      t.value = h, t.classList.remove("invalid"), this.dispatchDateChange(n);
+    }), a && a.addEventListener("click", () => {
+      var r;
+      (r = e.showPicker) == null || r.call(e);
+    });
+  }
+  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.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(), i = this.getMax(), r = this.isDisabled(), o = this.getPlaceholder(), n = this.formatDate(t, e);
+    this.shadowRoot.innerHTML = `
+			<style>${g}</style>
+			<div class="date-picker-container">
+				<div class="date-input-wrapper ${r ? "disabled" : ""}">
+					<input
+						type="text"
+						class="formatted-input"
+						part="input"
+						value="${n}"
+						placeholder="${o}"
+						${r ? "disabled" : ""}
+					/>
+					<button 
+						class="calendar-btn" 
+						type="button"
+						${r ? "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}"` : ""}
+						${i ? `max="${i}"` : ""}
+						${r ? "disabled" : ""}
+					/>
+				</div>
+				<div class="format-label">Format: ${e}</div>
+			</div>
+		`;
+  }
+}
+customElements.define("ui-date-picker", C);
+class S extends b {
+  constructor() {
+    super(...arguments);
+    c(this, "_total", 0);
+    c(this, "_currentPage", 1);
+    c(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 }, (i, r) => r + 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(), i = (e - 1) * this._pageSize + 1, r = Math.min(e * this._pageSize, this._total);
+    this.shadowRoot.innerHTML = `
+			<style>${g}</style>
+			<div class="pagination-container">
+				<div class="pagination-info">
+					${this._total > 0 ? `Showing ${i} to ${r} 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((o) => o === "..." ? '<button class="page-btn ellipsis" disabled>...</button>' : `
+							<button 
+								class="page-btn ${o === e ? "active" : ""}"
+								data-page="${o}"
+								aria-label="Page ${o}"
+								${o === e ? 'aria-current="page"' : ""}
+							>
+								${o}
+							</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 i = a.dataset.page;
+      if (i === "prev")
+        this.handlePageChange(this._currentPage - 1);
+      else if (i === "next")
+        this.handlePageChange(this._currentPage + 1);
+      else if (i) {
+        const r = parseInt(i, 10);
+        isNaN(r) || this.handlePageChange(r);
+      }
+    });
+  }
+}
+customElements.define("ui-pagination", S);
+class L extends b {
+  constructor() {
+    super(...arguments);
+    c(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>
+				${g}
+				
+				::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="${(o) => o.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 i = this.shadowRoot.querySelector(".modal-backdrop"), r = this.shadowRoot.querySelector(".modal-close");
+    i == null || i.addEventListener("click", (o) => this.handleBackdropClick(o)), r == null || r.addEventListener("click", () => this.close());
+  }
+}
+customElements.define("ui-modal", L);
+class Y extends b {
+  constructor() {
+    super(...arguments);
+    c(this, "isOpen", this.useSignal(!1));
+    c(this, "selectedValue", this.useSignal(""));
+    c(this, "searchTerm", this.useSignal(""));
+    c(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"), i = this.getAttribute("label") || "", r = this.getSelectedLabel(), o = this.getFilteredOptions(), n = this.selectedValue.get() !== "";
+    this.shadowRoot.innerHTML = `
+			<style>${g}</style>
+
+			<div class="select-container">
+				${i ? `<label class="select-label">${i}</label>` : ""}
+				
+				<div class="select-trigger ${t ? "open" : ""}" part="trigger" tabindex="0" ${e ? "disabled" : ""}>
+					<span class="select-placeholder ${n ? "has-selection" : ""}">${r}</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"
+						>
+					` : ""}
+					
+					${o.length > 0 ? o.map((d) => `
+						<div 
+							class="select-option ${d.value === this.selectedValue.get() ? "selected" : ""} ${d.disabled ? "disabled" : ""}"
+							data-value="${d.value}"
+							part="option"
+						>
+							${d.label}
+						</div>
+					`).join("") : `
+						<div class="select-empty">No options found</div>
+					`}
+				</div>
+			</div>
+		`;
+    const l = this.shadowRoot.querySelector(".select-trigger"), h = this.shadowRoot.querySelector(".select-search"), p = this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");
+    l == null || l.addEventListener("click", () => this.toggleDropdown()), l == null || l.addEventListener("keydown", (d) => {
+      (d.key === "Enter" || d.key === " ") && (d.preventDefault(), this.toggleDropdown());
+    }), h == null || h.addEventListener("input", (d) => {
+      this.handleSearch(d.target.value);
+    }), h == null || h.addEventListener("click", (d) => d.stopPropagation()), p.forEach((d) => {
+      d.addEventListener("click", () => {
+        const m = d.getAttribute("data-value");
+        m && this.selectOption(m);
+      });
+    });
+  }
+}
+customElements.define("ui-select", Y);
+class z extends b {
+  constructor() {
+    super(...arguments);
+    c(this, "checked", this.useSignal(!1));
+    c(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"), i = this.getAttribute("label") || "", r = this.getAttribute("size") || "md", o = {
+      sm: "size-sm",
+      md: "size-md",
+      lg: "size-lg"
+    };
+    this.shadowRoot.innerHTML = `
+			<style>${g}</style>
+
+			<label class="checkbox-container ${o[r]}">
+				<input 
+					type="checkbox" 
+					${t ? "checked" : ""}
+					${a ? "disabled" : ""}
+				>
+				<div class="checkbox-box ${o[r]} ${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>
+				${i ? `<span class="checkbox-label">${i}</span>` : "<slot></slot>"}
+			</label>
+		`;
+    const n = this.shadowRoot.querySelector(".checkbox-container");
+    n == null || n.addEventListener("click", (l) => {
+      l.preventDefault(), this.handleChange();
+    });
+  }
+}
+customElements.define("ui-checkbox", z);
+const D = ':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 R extends b {
+  constructor() {
+    super(...arguments);
+    c(this, "activeId", null);
+    c(this, "indicator", null);
+    c(this, "handleTabClick", (t) => {
+      const e = t.target;
+      if (!e) return;
+      const a = e.closest('[slot="tab"][data-tab]');
+      if (!a) return;
+      t.preventDefault();
+      const i = a.getAttribute("data-tab");
+      i && this.setActive(i);
+    });
+  }
+  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((i) => i.getAttribute("data-tab") === e))
+      return e;
+    if (this.activeId && t.some((i) => i.getAttribute("data-tab") === this.activeId))
+      return this.activeId;
+    const a = t.find((i) => i.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((i) => {
+      const r = i.getAttribute("data-tab");
+      if (!r) return;
+      const o = i.id || `tab-${r}`, n = r === a;
+      i.id = o, i.setAttribute("role", "tab"), i.setAttribute("aria-selected", String(n)), i.setAttribute("tabindex", n ? "0" : "-1"), i.classList.toggle("is-active", n);
+    }), e.forEach((i) => {
+      const r = i.getAttribute("data-tab");
+      if (!r) return;
+      const o = i.id || `panel-${r}`, n = r === a;
+      i.id = o, i.setAttribute("role", "tabpanel"), i.toggleAttribute("hidden", !n), i.classList.toggle("is-active", n);
+      const l = t.find((h) => h.getAttribute("data-tab") === r);
+      l && (l.setAttribute("aria-controls", o), i.setAttribute("aria-labelledby", l.id));
+    }), this.updateIndicator(t, a));
+  }
+  updateIndicator(t, e) {
+    if (!this.indicator) return;
+    const a = t.find((n) => n.getAttribute("data-tab") === e);
+    if (!a) return;
+    const i = this.shadowRoot.querySelector(".tablist");
+    if (!i) return;
+    a.getBoundingClientRect(), i.getBoundingClientRect();
+    const r = t.indexOf(a);
+    let o = 0;
+    for (let n = 0; n < r; n++)
+      o += t[n].offsetWidth;
+    this.indicator.style.transform = `translateX(${o}px)`, this.indicator.style.width = `${a.offsetWidth}px`;
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+			<style>${g}${D}</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", R);
+const M = ':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 T extends b {
+  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 s = this.getAttribute("variant");
+    return s === "elevated" || s === "bordered" || s === "ghost" ? s : "default";
+  }
+  getElevation() {
+    const s = this.getAttribute("elevation");
+    return s === "none" || s === "sm" || s === "md" || s === "lg" || s === "xl" ? s : "sm";
+  }
+  render() {
+    const s = this.getShadow(), t = this.getShadowColor(), e = this.getRounded(), a = this.getVariant(), i = this.getElevation();
+    let r = "none";
+    if (s)
+      switch (i) {
+        case "sm":
+          r = `0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;
+          break;
+        case "md":
+          r = `0 4px 6px rgba(${t}, 0.07), 0 2px 4px rgba(${t}, 0.06)`;
+          break;
+        case "lg":
+          r = `0 10px 15px rgba(${t}, 0.1), 0 4px 6px rgba(${t}, 0.05)`;
+          break;
+        case "xl":
+          r = `0 20px 25px rgba(${t}, 0.15), 0 10px 10px rgba(${t}, 0.04)`;
+          break;
+        default:
+          r = "none";
+      }
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${g}
+        ${M}
+        
+        .card.custom-shadow {
+          box-shadow: ${r};
+        }
+
+        .card.custom-shadow:hover {
+          box-shadow: ${s && i !== "none" ? r.replace(/rgba\(([^)]+), ([\d.]+)\)/g, (o, n, l) => `rgba(${n}, ${Math.min(parseFloat(l) * 1.3, 0.25)})`) : "none"};
+        }
+      </style>
+      <div class="card ${a} ${e ? "rounded" : "square"} ${s ? "custom-shadow" : "no-shadow"}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+customElements.define("ui-card", T);
+class I {
+  constructor() {
+    c(this, "baseURL", "");
+    c(this, "defaultHeaders", {
+      "Content-Type": "application/json"
+    });
+    c(this, "defaultTimeout", 3e4);
+    c(this, "interceptors", {
+      request: {
+        handlers: [],
+        use: (s, t) => {
+          this.interceptors.request.handlers.push({ onFulfilled: s, onRejected: t });
+        }
+      },
+      response: {
+        handlers: [],
+        use: (s, t) => {
+          this.interceptors.response.handlers.push({ onFulfilled: s, onRejected: t });
+        }
+      }
+    });
+  }
+  /**
+   * Set base URL for all requests
+   */
+  setBaseURL(s) {
+    this.baseURL = s;
+  }
+  /**
+   * Get currently set base URL
+   */
+  getBaseURL() {
+    return this.baseURL;
+  }
+  /**
+   * Set default headers for all requests
+   */
+  setDefaultHeaders(s) {
+    this.defaultHeaders = { ...this.defaultHeaders, ...s };
+  }
+  /**
+   * Set default timeout for all requests (in ms)
+   */
+  setDefaultTimeout(s) {
+    this.defaultTimeout = s;
+  }
+  /**
+   * Execute request with interceptors
+   */
+  async executeRequest(s, t) {
+    const e = s.startsWith("http") ? s : this.baseURL + s;
+    let a = {
+      method: "GET",
+      headers: { ...this.defaultHeaders },
+      timeout: this.defaultTimeout,
+      ...t
+    };
+    for (const o of this.interceptors.request.handlers)
+      try {
+        a = await o.onFulfilled(a);
+      } catch (n) {
+        if (o.onRejected)
+          a = await o.onRejected(n);
+        else
+          throw n;
+      }
+    const i = new AbortController(), r = setTimeout(() => i.abort(), a.timeout || this.defaultTimeout);
+    try {
+      const o = {
+        method: a.method,
+        headers: a.headers,
+        signal: i.signal
+      };
+      a.body && a.method !== "GET" && (o.body = (typeof a.body == "string", a.body));
+      const n = await fetch(e, o);
+      let l;
+      const h = n.headers.get("content-type");
+      h != null && h.includes("application/json") ? l = n.ok ? await n.json() : null : h != null && h.includes("text") ? l = await n.text() : l = await n.blob();
+      let p = {
+        status: n.status,
+        statusText: n.statusText,
+        headers: n.headers,
+        data: l
+      };
+      if (!n.ok) {
+        const d = new Error(`HTTP ${n.status}: ${n.statusText}`);
+        throw d.response = p, d.config = a, d;
+      }
+      for (const d of this.interceptors.response.handlers)
+        try {
+          p = await d.onFulfilled(p);
+        } catch (m) {
+          if (d.onRejected)
+            p = await d.onRejected(m);
+          else
+            throw m;
+        }
+      return p.data;
+    } catch (o) {
+      throw o instanceof Error && o.name === "AbortError" ? new Error(`Request timeout after ${a.timeout}ms`) : o;
+    } finally {
+      clearTimeout(r);
+    }
+  }
+  /**
+   * GET request
+   */
+  async get(s, t) {
+    return this.executeRequest(s, { ...t, method: "GET" });
+  }
+  /**
+   * POST request
+   */
+  async post(s, t, e) {
+    return this.executeRequest(s, {
+      ...e,
+      method: "POST",
+      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
+    });
+  }
+  /**
+   * PUT request
+   */
+  async put(s, t, e) {
+    return this.executeRequest(s, {
+      ...e,
+      method: "PUT",
+      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
+    });
+  }
+  /**
+   * PATCH request
+   */
+  async patch(s, t, e) {
+    return this.executeRequest(s, {
+      ...e,
+      method: "PATCH",
+      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
+    });
+  }
+  /**
+   * DELETE request
+   */
+  async delete(s, t) {
+    return this.executeRequest(s, { ...t, method: "DELETE" });
+  }
+  /**
+   * HEAD request
+   */
+  async head(s, t) {
+    return this.executeRequest(s, { ...t, method: "HEAD" });
+  }
+}
+const O = new I();
+export {
+  I as HTTPClient,
+  $ as UIButton,
+  T as UICard,
+  z as UICheckbox,
+  C as UIDatePicker,
+  A as UIInput,
+  L as UIModal,
+  S as UIPagination,
+  Y as UISelect,
+  E as UITable,
+  R as UITabs,
+  O as http
+};