@lukso/web-components 1.172.13 → 1.172.17

package/dist/components/lukso-navbar/index.cjs

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const state = require('../../chunks/state-CFjY89m3.js');
-const index = require('../../chunks/index-CaJky2qL.js');
-const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const index = require('../../chunks/index-BBPgtFEP.js');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
 
@@ -20,7 +19,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.TailwindElement {
+exports.LuksoNavbar = class LuksoNavbar extends index.TailwindElement {
   constructor() {
     super(...arguments);
     this.title = "";
@@ -35,7 +34,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     this.mobileBreakpoint = "md";
     this.isMenuOpen = false;
     this.defaultLogoUrl = "/assets/images/up-logo.png";
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "h-78 grid items-center",
         mobileMenuWrapper: "items-center justify-end pr-6 flex gap-2",
@@ -147,21 +146,21 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     }
   }
   desktopMenuTemplate(styles) {
-    return shared_tailwindElement_index.x` <div class=${styles.desktopMenuWrapper()}>
+    return lit.html` <div class=${styles.desktopMenuWrapper()}>
       <slot name="desktop-menu"></slot>
     </div>`;
   }
   desktopCenterTemplate(styles) {
-    return shared_tailwindElement_index.x`<div class=${styles.desktopCenterWrapper()}>
+    return lit.html`<div class=${styles.desktopCenterWrapper()}>
         <slot name="desktop-center"></slot>
       </div>
       <div class=${styles.desktopCenterPlaceholder()}></div>`;
   }
   mobileMenuTemplate(styles) {
-    return shared_tailwindElement_index.x`<div class=${styles.mobileMenuWrapper()}>
+    return lit.html`<div class=${styles.mobileMenuWrapper()}>
       <slot name="mobile-menu"></slot>
 
-      ${this.hasMobileDropdownMenu ? shared_tailwindElement_index.x` <div
+      ${this.hasMobileDropdownMenu ? lit.html` <div
               class="flex items-center justify-center w-8 h-8 cursor-pointer"
               @click=${this.handleMenuToggle}
             >
@@ -172,11 +171,11 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
               @click=${this.handleMenuToggle}
             >
               <slot name="mobile-dropdown"></slot>
-            </div>` : shared_tailwindElement_index.E}
+            </div>` : lit.nothing}
     </div>`;
   }
   brandTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="flex items-center px-6 md:px-10 h-[inherit]">
         <div class="flex cursor-pointer group" @click=${this.handleBrandClick}>
           <img
@@ -190,11 +189,11 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
           >
             <span>${this.title}</span>
           </div>
-          ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
+          ${this.isTestnet ? lit.html`<lukso-tag background-color="yellow-65" class="ml-2">
                 TESTNET
-              </lukso-tag>` : shared_tailwindElement_index.E}
+              </lukso-tag>` : lit.nothing}
         </div>
-        ${this.icon ? shared_tailwindElement_index.x`<div
+        ${this.icon ? lit.html`<div
               class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
             >
               <lukso-icon
@@ -203,12 +202,12 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
                 color="purple-51"
                 @click=${this.handleIconClick}
               ></lukso-icon>
-            </div>` : shared_tailwindElement_index.E}
+            </div>` : lit.nothing}
       </div>
     `;
   }
   menuTemplate(styles) {
-    return shared_tailwindElement_index.x`<div class="flex items-center justify-end">
+    return lit.html`<div class="flex items-center justify-end">
       ${this.desktopMenuTemplate(styles)} ${this.mobileMenuTemplate(styles)}
     </div>`;
   }
@@ -220,48 +219,48 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
       mobileBreakpoint: this.mobileBreakpoint,
       isMenuOpen: this.isMenuOpen
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <nav data-testid="navbar" class=${styles.wrapper()}>
         ${this.brandTemplate()}
-        ${this.isCenter ? shared_tailwindElement_index.E : this.desktopCenterTemplate(styles)}
-        ${this.isCenter ? shared_tailwindElement_index.E : this.hasMenu ? this.menuTemplate(styles) : shared_tailwindElement_index.E}
+        ${this.isCenter ? lit.nothing : this.desktopCenterTemplate(styles)}
+        ${this.isCenter ? lit.nothing : this.hasMenu ? this.menuTemplate(styles) : lit.nothing}
       </nav>
     `;
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoNavbar.prototype, "title", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-center" })
+  decorators_js.property({ type: Boolean, attribute: "is-center" })
 ], exports.LuksoNavbar.prototype, "isCenter", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-sticky" })
+  decorators_js.property({ type: Boolean, attribute: "is-sticky" })
 ], exports.LuksoNavbar.prototype, "isSticky", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-transparent" })
+  decorators_js.property({ type: Boolean, attribute: "is-transparent" })
 ], exports.LuksoNavbar.prototype, "isTransparent", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-testnet" })
+  decorators_js.property({ type: Boolean, attribute: "is-testnet" })
 ], exports.LuksoNavbar.prototype, "isTestnet", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoNavbar.prototype, "icon", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "has-menu" })
+  decorators_js.property({ type: Boolean, attribute: "has-menu" })
 ], exports.LuksoNavbar.prototype, "hasMenu", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "has-mobile-dropdown-menu" })
+  decorators_js.property({ type: Boolean, attribute: "has-mobile-dropdown-menu" })
 ], exports.LuksoNavbar.prototype, "hasMobileDropdownMenu", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "logo-url" })
+  decorators_js.property({ type: String, attribute: "logo-url" })
 ], exports.LuksoNavbar.prototype, "logoUrl", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "mobile-breakpoint" })
+  decorators_js.property({ type: String, attribute: "mobile-breakpoint" })
 ], exports.LuksoNavbar.prototype, "mobileBreakpoint", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoNavbar.prototype, "isMenuOpen", 2);
 exports.LuksoNavbar = __decorateClass([
-  safeCustomElement.safeCustomElement("lukso-navbar")
+  index.safeCustomElement("lukso-navbar")
 ], exports.LuksoNavbar);

package/dist/components/lukso-navbar/index.js

@@ -1,8 +1,7 @@
-import { T as TailwindElement, x, E } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { T as TailwindElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
 
@@ -31,7 +30,7 @@ let LuksoNavbar = class extends TailwindElement {
     this.mobileBreakpoint = "md";
     this.isMenuOpen = false;
     this.defaultLogoUrl = "/assets/images/up-logo.png";
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "h-78 grid items-center",
         mobileMenuWrapper: "items-center justify-end pr-6 flex gap-2",
@@ -143,21 +142,21 @@ let LuksoNavbar = class extends TailwindElement {
     }
   }
   desktopMenuTemplate(styles) {
-    return x` <div class=${styles.desktopMenuWrapper()}>
+    return html` <div class=${styles.desktopMenuWrapper()}>
       <slot name="desktop-menu"></slot>
     </div>`;
   }
   desktopCenterTemplate(styles) {
-    return x`<div class=${styles.desktopCenterWrapper()}>
+    return html`<div class=${styles.desktopCenterWrapper()}>
         <slot name="desktop-center"></slot>
       </div>
       <div class=${styles.desktopCenterPlaceholder()}></div>`;
   }
   mobileMenuTemplate(styles) {
-    return x`<div class=${styles.mobileMenuWrapper()}>
+    return html`<div class=${styles.mobileMenuWrapper()}>
       <slot name="mobile-menu"></slot>
 
-      ${this.hasMobileDropdownMenu ? x` <div
+      ${this.hasMobileDropdownMenu ? html` <div
               class="flex items-center justify-center w-8 h-8 cursor-pointer"
               @click=${this.handleMenuToggle}
             >
@@ -168,11 +167,11 @@ let LuksoNavbar = class extends TailwindElement {
               @click=${this.handleMenuToggle}
             >
               <slot name="mobile-dropdown"></slot>
-            </div>` : E}
+            </div>` : nothing}
     </div>`;
   }
   brandTemplate() {
-    return x`
+    return html`
       <div class="flex items-center px-6 md:px-10 h-[inherit]">
         <div class="flex cursor-pointer group" @click=${this.handleBrandClick}>
           <img
@@ -186,11 +185,11 @@ let LuksoNavbar = class extends TailwindElement {
           >
             <span>${this.title}</span>
           </div>
-          ${this.isTestnet ? x`<lukso-tag background-color="yellow-65" class="ml-2">
+          ${this.isTestnet ? html`<lukso-tag background-color="yellow-65" class="ml-2">
                 TESTNET
-              </lukso-tag>` : E}
+              </lukso-tag>` : nothing}
         </div>
-        ${this.icon ? x`<div
+        ${this.icon ? html`<div
               class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
             >
               <lukso-icon
@@ -199,12 +198,12 @@ let LuksoNavbar = class extends TailwindElement {
                 color="purple-51"
                 @click=${this.handleIconClick}
               ></lukso-icon>
-            </div>` : E}
+            </div>` : nothing}
       </div>
     `;
   }
   menuTemplate(styles) {
-    return x`<div class="flex items-center justify-end">
+    return html`<div class="flex items-center justify-end">
       ${this.desktopMenuTemplate(styles)} ${this.mobileMenuTemplate(styles)}
     </div>`;
   }
@@ -216,47 +215,47 @@ let LuksoNavbar = class extends TailwindElement {
       mobileBreakpoint: this.mobileBreakpoint,
       isMenuOpen: this.isMenuOpen
     });
-    return x`
+    return html`
       <nav data-testid="navbar" class=${styles.wrapper()}>
         ${this.brandTemplate()}
-        ${this.isCenter ? E : this.desktopCenterTemplate(styles)}
-        ${this.isCenter ? E : this.hasMenu ? this.menuTemplate(styles) : E}
+        ${this.isCenter ? nothing : this.desktopCenterTemplate(styles)}
+        ${this.isCenter ? nothing : this.hasMenu ? this.menuTemplate(styles) : nothing}
       </nav>
     `;
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoNavbar.prototype, "title", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-center" })
+  property({ type: Boolean, attribute: "is-center" })
 ], LuksoNavbar.prototype, "isCenter", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-sticky" })
+  property({ type: Boolean, attribute: "is-sticky" })
 ], LuksoNavbar.prototype, "isSticky", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-transparent" })
+  property({ type: Boolean, attribute: "is-transparent" })
 ], LuksoNavbar.prototype, "isTransparent", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-testnet" })
+  property({ type: Boolean, attribute: "is-testnet" })
 ], LuksoNavbar.prototype, "isTestnet", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoNavbar.prototype, "icon", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "has-menu" })
+  property({ type: Boolean, attribute: "has-menu" })
 ], LuksoNavbar.prototype, "hasMenu", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "has-mobile-dropdown-menu" })
+  property({ type: Boolean, attribute: "has-mobile-dropdown-menu" })
 ], LuksoNavbar.prototype, "hasMobileDropdownMenu", 2);
 __decorateClass([
-  n({ type: String, attribute: "logo-url" })
+  property({ type: String, attribute: "logo-url" })
 ], LuksoNavbar.prototype, "logoUrl", 2);
 __decorateClass([
-  n({ type: String, attribute: "mobile-breakpoint" })
+  property({ type: String, attribute: "mobile-breakpoint" })
 ], LuksoNavbar.prototype, "mobileBreakpoint", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoNavbar.prototype, "isMenuOpen", 2);
 LuksoNavbar = __decorateClass([
   safeCustomElement("lukso-navbar")

package/dist/components/lukso-pagination/index.cjs

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const state = require('../../chunks/state-CFjY89m3.js');
-const index = require('../../chunks/index-CaJky2qL.js');
-const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const index = require('../../chunks/index-BBPgtFEP.js');
 require('../lukso-icon/index.cjs');
 require('../lukso-button/index.cjs');
 
@@ -22,7 +21,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_index.TailwindStyledElement(style) {
+exports.LuksoPagination = class LuksoPagination extends index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.variant = "primary";
@@ -30,7 +29,7 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     this.currentPage = 1;
     this.totalPages = 0;
     this.isMobile = false;
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "flex gap-2",
         ellipsis: "items-center flex justify-center",
@@ -125,7 +124,7 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     return this.size === "small" ? "medium" : "large";
   }
   prevPageTemplate() {
-    return shared_tailwindElement_index.x`<lukso-button
+    return lit.html`<lukso-button
       size=${this.size}
       variant=${this.variant}
       is-icon
@@ -140,7 +139,7 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     </lukso-button>`;
   }
   nextPageTemplate() {
-    return shared_tailwindElement_index.x`<lukso-button
+    return lit.html`<lukso-button
       size=${this.size}
       variant=${this.variant}
       is-icon
@@ -158,12 +157,12 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     const numberTemplates = [];
     for (const item of this.pagination.items) {
       if (item === "...") {
-        numberTemplates.push(shared_tailwindElement_index.x` <div class=${ellipsisStyles}>...</div> `);
+        numberTemplates.push(lit.html` <div class=${ellipsisStyles}>...</div> `);
         continue;
       }
       if (typeof item === "number") {
         numberTemplates.push(
-          shared_tailwindElement_index.x`<lukso-button
+          lit.html`<lukso-button
             size=${this.size}
             variant=${this.variant}
             ?disabled=${this.currentPage === item}
@@ -182,7 +181,7 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
     const { wrapper, ellipsis, numbers } = this.styles({
       size: this.size
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class=${wrapper()}>
         ${this.prevPageTemplate()}
         ${this.numbersTemplate(ellipsis(), numbers())}
@@ -192,23 +191,23 @@ exports.LuksoPagination = class LuksoPagination extends shared_tailwindElement_i
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoPagination.prototype, "variant", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoPagination.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: Number, attribute: "current-page" })
+  decorators_js.property({ type: Number, attribute: "current-page" })
 ], exports.LuksoPagination.prototype, "currentPage", 2);
 __decorateClass([
-  property.n({ type: Number, attribute: "total-pages" })
+  decorators_js.property({ type: Number, attribute: "total-pages" })
 ], exports.LuksoPagination.prototype, "totalPages", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-mobile" })
+  decorators_js.property({ type: Boolean, attribute: "is-mobile" })
 ], exports.LuksoPagination.prototype, "isMobile", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoPagination.prototype, "pagination", 2);
 exports.LuksoPagination = __decorateClass([
-  safeCustomElement.safeCustomElement("lukso-pagination")
+  index.safeCustomElement("lukso-pagination")
 ], exports.LuksoPagination);

package/dist/components/lukso-pagination/index.js

@@ -1,8 +1,7 @@
-import { b as TailwindStyledElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import '../lukso-icon/index.js';
 import '../lukso-button/index.js';
 
@@ -26,7 +25,7 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     this.currentPage = 1;
     this.totalPages = 0;
     this.isMobile = false;
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "flex gap-2",
         ellipsis: "items-center flex justify-center",
@@ -121,7 +120,7 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     return this.size === "small" ? "medium" : "large";
   }
   prevPageTemplate() {
-    return x`<lukso-button
+    return html`<lukso-button
       size=${this.size}
       variant=${this.variant}
       is-icon
@@ -136,7 +135,7 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     </lukso-button>`;
   }
   nextPageTemplate() {
-    return x`<lukso-button
+    return html`<lukso-button
       size=${this.size}
       variant=${this.variant}
       is-icon
@@ -154,12 +153,12 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     const numberTemplates = [];
     for (const item of this.pagination.items) {
       if (item === "...") {
-        numberTemplates.push(x` <div class=${ellipsisStyles}>...</div> `);
+        numberTemplates.push(html` <div class=${ellipsisStyles}>...</div> `);
         continue;
       }
       if (typeof item === "number") {
         numberTemplates.push(
-          x`<lukso-button
+          html`<lukso-button
             size=${this.size}
             variant=${this.variant}
             ?disabled=${this.currentPage === item}
@@ -178,7 +177,7 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
     const { wrapper, ellipsis, numbers } = this.styles({
       size: this.size
     });
-    return x`
+    return html`
       <div class=${wrapper()}>
         ${this.prevPageTemplate()}
         ${this.numbersTemplate(ellipsis(), numbers())}
@@ -188,22 +187,22 @@ let LuksoPagination = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoPagination.prototype, "variant", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoPagination.prototype, "size", 2);
 __decorateClass([
-  n({ type: Number, attribute: "current-page" })
+  property({ type: Number, attribute: "current-page" })
 ], LuksoPagination.prototype, "currentPage", 2);
 __decorateClass([
-  n({ type: Number, attribute: "total-pages" })
+  property({ type: Number, attribute: "total-pages" })
 ], LuksoPagination.prototype, "totalPages", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-mobile" })
+  property({ type: Boolean, attribute: "is-mobile" })
 ], LuksoPagination.prototype, "isMobile", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoPagination.prototype, "pagination", 2);
 LuksoPagination = __decorateClass([
   safeCustomElement("lukso-pagination")