@lukso/web-components 1.172.13 → 1.172.14

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

@@ -1,9 +1,10 @@
-import { b as TailwindStyledElement, E, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
+import { nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindStyledElement } from '../../shared/tailwind-element/index.js';
 import '../lukso-icon/index.js';
-import '../../chunks/index-B_H2eYG_.js';
+import '../../chunks/index-CA6SrfZ-.js';
 
 const style = ":host {\n    display: flex\n}";
 
@@ -24,7 +25,7 @@ let LuksoAlert = class extends TailwindStyledElement(style) {
     this.hasIcon = false;
     this.title = "";
     this.description = "";
-    this.styles = ce({
+    this.styles = tv({
       base: "rounded-8 p-4 flex gap-3 items-center",
       variants: {
         variant: {
@@ -52,35 +53,35 @@ let LuksoAlert = class extends TailwindStyledElement(style) {
     const styles = this.styles({
       variant: this.variant
     });
-    return x`
+    return html`
       <div class=${styles}>
-        ${this.hasIcon ? x`<lukso-icon
+        ${this.hasIcon ? html`<lukso-icon
               pack="vuesax"
               name="${this.icon.name}"
               color="${this.icon.color}"
-            ></lukso-icon>` : E}
+            ></lukso-icon>` : nothing}
         <div class="flex flex-col gap-1">
-          ${this.title ? x`<div class="heading-inter-14-bold">${this.title}</div>` : E}
-          ${this.description ? x`<lukso-sanitize
+          ${this.title ? html`<div class="heading-inter-14-bold">${this.title}</div>` : nothing}
+          ${this.description ? html`<lukso-sanitize
                 class="paragraph-inter-12-regular"
                 html-content="${this.description}"
-              ></lukso-sanitize>` : E}
+              ></lukso-sanitize>` : nothing}
         </div>
       </div>
     `;
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoAlert.prototype, "variant", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "has-icon", reflect: true })
+  property({ type: Boolean, attribute: "has-icon", reflect: true })
 ], LuksoAlert.prototype, "hasIcon", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoAlert.prototype, "title", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoAlert.prototype, "description", 2);
 LuksoAlert = __decorateClass([
   safeCustomElement("lukso-alert")

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

@@ -2,13 +2,15 @@
 
 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 chunkLQIOVPBE = require('../../chunks/chunk-LQIOVPBE-kQFZF_OS.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const core = require('@lukso/core');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 require('../../tailwind-config.cjs');
-const axe = require('../../chunks/axe-MHuN9KU0.js');
+const cn = require('../../chunks/cn-zamUNFMe.js');
+require('viem');
+require('axe-core');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -22,7 +24,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const LONG_PRESS_ANIMATION_DURATION_IN_MS = 2e3;
-class LuksoButton extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.TailwindStyledElement(style)) {
+class LuksoButton extends core.withTheme(shared_tailwindElement_index.TailwindStyledElement(style)) {
   constructor() {
     super(...arguments);
     this.variant = "primary";
@@ -45,7 +47,7 @@ class LuksoButton extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.T
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
-    this.counterStyles = index.ce({
+    this.counterStyles = tailwindVariants.tv({
       base: "ml-2 border border-neutral-20 rounded-4 px-[2px] py-[1px] paragraph-inter-10-semi-bold text-neutral-20 bg-neutral-100",
       variants: {
         isActive: {
@@ -53,7 +55,7 @@ class LuksoButton extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.T
         }
       }
     });
-    this.buttonStyles = index.ce({
+    this.buttonStyles = tailwindVariants.tv({
       base: `flex justify-center items-center relative text-center
       border border-solid cursor-pointer transition
       duration-250 active:scale-98 active:duration-25
@@ -160,7 +162,7 @@ class LuksoButton extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.T
         }
       ]
     });
-    this.loadingStyles = index.ce({
+    this.loadingStyles = tailwindVariants.tv({
       slots: {
         icon: "animate-spin",
         text: ""
@@ -214,19 +216,19 @@ class LuksoButton extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.T
     const { icon, text } = this.loadingStyles({
       size: this.size
     });
-    return shared_tailwindElement_index.x`<lukso-icon
+    return lit.html`<lukso-icon
         name="spinner"
         size=${this.size}
         color=${this.variant === "secondary" || this.variant === "text" ? "neutral-20" : "neutral-100"}
         class=${icon()}
       ></lukso-icon>
-      ${this.loadingText ? shared_tailwindElement_index.x`<span class=${text()}>${this.loadingText}</span>` : shared_tailwindElement_index.E}`;
+      ${this.loadingText ? lit.html`<span class=${text()}>${this.loadingText}</span>` : lit.nothing}`;
   }
   counterTemplate() {
     const counterStyles = this.counterStyles({
       isActive: this.isActive
     });
-    return shared_tailwindElement_index.x` <span class=${counterStyles}>${this.count}</span> `;
+    return lit.html` <span class=${counterStyles}>${this.count}</span> `;
   }
   buttonTemplate() {
     const buttonStyles = this.buttonStyles({
@@ -238,12 +240,12 @@ class LuksoButton extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.T
       isActive: this.isActive,
       isIcon: this.isIcon
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <button
         data-testid="button"
         ?disabled=${this.disabled || this.isLoading}
         type=${this.type}
-        class=${axe.cn(buttonStyles, this.customClass)}
+        class=${cn.cn(buttonStyles, this.customClass)}
         aria-label=${this.label}
         @mousedown=${this.handleMouseDown}
         @touchstart=${this.handleMouseDown}
@@ -252,8 +254,8 @@ class LuksoButton extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.T
         @mouseup=${this.handleMouseUp}
         @mouseleave=${this.handleMouseUp}
       >
-        ${this.isLoading ? this.loadingTemplate() : shared_tailwindElement_index.x`<slot></slot>`}
-        ${this.count ? this.counterTemplate() : shared_tailwindElement_index.E}
+        ${this.isLoading ? this.loadingTemplate() : lit.html`<slot></slot>`}
+        ${this.count ? this.counterTemplate() : lit.nothing}
       </button>
     `;
   }
@@ -266,10 +268,10 @@ class LuksoButton extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.T
       isPressed: this.isPressed,
       isIcon: this.isIcon
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <a
         data-testid="link"
-        class=${axe.cn(buttonStyles, this.customClass)}
+        class=${cn.cn(buttonStyles, this.customClass)}
         href=${this.href}
         target=${this.target}
         rel=${this.rel}
@@ -280,68 +282,68 @@ class LuksoButton extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.T
     `;
   }
   render() {
-    return shared_tailwindElement_index.x` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
+    return lit.html` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
   }
 }
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], LuksoButton.prototype, "variant");
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], LuksoButton.prototype, "size");
 __decorateClass([
-  property.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], LuksoButton.prototype, "disabled");
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-full-width" })
+  decorators_js.property({ type: Boolean, attribute: "is-full-width" })
 ], LuksoButton.prototype, "isFullWidth");
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-long-press" })
+  decorators_js.property({ type: Boolean, attribute: "is-long-press" })
 ], LuksoButton.prototype, "isLongPress");
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-link" })
+  decorators_js.property({ type: Boolean, attribute: "is-link" })
 ], LuksoButton.prototype, "isLink");
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-loading" })
+  decorators_js.property({ type: Boolean, attribute: "is-loading" })
 ], LuksoButton.prototype, "isLoading");
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], LuksoButton.prototype, "type");
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], LuksoButton.prototype, "href");
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], LuksoButton.prototype, "target");
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], LuksoButton.prototype, "rel");
 __decorateClass([
-  property.n({ type: String, attribute: "loading-text" })
+  decorators_js.property({ type: String, attribute: "loading-text" })
 ], LuksoButton.prototype, "loadingText");
 __decorateClass([
-  property.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], LuksoButton.prototype, "customClass");
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-active" })
+  decorators_js.property({ type: Boolean, attribute: "is-active" })
 ], LuksoButton.prototype, "isActive");
 __decorateClass([
-  property.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], LuksoButton.prototype, "count");
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-icon" })
+  decorators_js.property({ type: Boolean, attribute: "is-icon" })
 ], LuksoButton.prototype, "isIcon");
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], LuksoButton.prototype, "label");
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], LuksoButton.prototype, "isPressed");
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], LuksoButton.prototype, "noTransition");
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], LuksoButton.prototype, "timer");
 customElements.define("lukso-button", LuksoButton);
 

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

@@ -1,10 +1,12 @@
-import { b as TailwindStyledElement, E, 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 { w as withTheme } from '../../chunks/chunk-LQIOVPBE-CGhQ79Di.js';
+import { nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { withTheme } from '@lukso/core';
+import { TailwindStyledElement } from '../../shared/tailwind-element/index.js';
 import '../../tailwind-config.js';
-import { c as cn } from '../../chunks/axe-DJKac19y.js';
+import { c as cn } from '../../chunks/cn-LM_JlZIN.js';
+import 'viem';
+import 'axe-core';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -41,7 +43,7 @@ class LuksoButton extends withTheme(TailwindStyledElement(style)) {
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
-    this.counterStyles = ce({
+    this.counterStyles = tv({
       base: "ml-2 border border-neutral-20 rounded-4 px-[2px] py-[1px] paragraph-inter-10-semi-bold text-neutral-20 bg-neutral-100",
       variants: {
         isActive: {
@@ -49,7 +51,7 @@ class LuksoButton extends withTheme(TailwindStyledElement(style)) {
         }
       }
     });
-    this.buttonStyles = ce({
+    this.buttonStyles = tv({
       base: `flex justify-center items-center relative text-center
       border border-solid cursor-pointer transition
       duration-250 active:scale-98 active:duration-25
@@ -156,7 +158,7 @@ class LuksoButton extends withTheme(TailwindStyledElement(style)) {
         }
       ]
     });
-    this.loadingStyles = ce({
+    this.loadingStyles = tv({
       slots: {
         icon: "animate-spin",
         text: ""
@@ -210,19 +212,19 @@ class LuksoButton extends withTheme(TailwindStyledElement(style)) {
     const { icon, text } = this.loadingStyles({
       size: this.size
     });
-    return x`<lukso-icon
+    return html`<lukso-icon
         name="spinner"
         size=${this.size}
         color=${this.variant === "secondary" || this.variant === "text" ? "neutral-20" : "neutral-100"}
         class=${icon()}
       ></lukso-icon>
-      ${this.loadingText ? x`<span class=${text()}>${this.loadingText}</span>` : E}`;
+      ${this.loadingText ? html`<span class=${text()}>${this.loadingText}</span>` : nothing}`;
   }
   counterTemplate() {
     const counterStyles = this.counterStyles({
       isActive: this.isActive
     });
-    return x` <span class=${counterStyles}>${this.count}</span> `;
+    return html` <span class=${counterStyles}>${this.count}</span> `;
   }
   buttonTemplate() {
     const buttonStyles = this.buttonStyles({
@@ -234,7 +236,7 @@ class LuksoButton extends withTheme(TailwindStyledElement(style)) {
       isActive: this.isActive,
       isIcon: this.isIcon
     });
-    return x`
+    return html`
       <button
         data-testid="button"
         ?disabled=${this.disabled || this.isLoading}
@@ -248,8 +250,8 @@ class LuksoButton extends withTheme(TailwindStyledElement(style)) {
         @mouseup=${this.handleMouseUp}
         @mouseleave=${this.handleMouseUp}
       >
-        ${this.isLoading ? this.loadingTemplate() : x`<slot></slot>`}
-        ${this.count ? this.counterTemplate() : E}
+        ${this.isLoading ? this.loadingTemplate() : html`<slot></slot>`}
+        ${this.count ? this.counterTemplate() : nothing}
       </button>
     `;
   }
@@ -262,7 +264,7 @@ class LuksoButton extends withTheme(TailwindStyledElement(style)) {
       isPressed: this.isPressed,
       isIcon: this.isIcon
     });
-    return x`
+    return html`
       <a
         data-testid="link"
         class=${cn(buttonStyles, this.customClass)}
@@ -276,68 +278,68 @@ class LuksoButton extends withTheme(TailwindStyledElement(style)) {
     `;
   }
   render() {
-    return x` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
+    return html` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
   }
 }
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoButton.prototype, "variant");
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoButton.prototype, "size");
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoButton.prototype, "disabled");
 __decorateClass([
-  n({ type: Boolean, attribute: "is-full-width" })
+  property({ type: Boolean, attribute: "is-full-width" })
 ], LuksoButton.prototype, "isFullWidth");
 __decorateClass([
-  n({ type: Boolean, attribute: "is-long-press" })
+  property({ type: Boolean, attribute: "is-long-press" })
 ], LuksoButton.prototype, "isLongPress");
 __decorateClass([
-  n({ type: Boolean, attribute: "is-link" })
+  property({ type: Boolean, attribute: "is-link" })
 ], LuksoButton.prototype, "isLink");
 __decorateClass([
-  n({ type: Boolean, attribute: "is-loading" })
+  property({ type: Boolean, attribute: "is-loading" })
 ], LuksoButton.prototype, "isLoading");
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoButton.prototype, "type");
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoButton.prototype, "href");
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoButton.prototype, "target");
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoButton.prototype, "rel");
 __decorateClass([
-  n({ type: String, attribute: "loading-text" })
+  property({ type: String, attribute: "loading-text" })
 ], LuksoButton.prototype, "loadingText");
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoButton.prototype, "customClass");
 __decorateClass([
-  n({ type: Boolean, attribute: "is-active" })
+  property({ type: Boolean, attribute: "is-active" })
 ], LuksoButton.prototype, "isActive");
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoButton.prototype, "count");
 __decorateClass([
-  n({ type: Boolean, attribute: "is-icon" })
+  property({ type: Boolean, attribute: "is-icon" })
 ], LuksoButton.prototype, "isIcon");
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoButton.prototype, "label");
 __decorateClass([
-  r()
+  state()
 ], LuksoButton.prototype, "isPressed");
 __decorateClass([
-  r()
+  state()
 ], LuksoButton.prototype, "noTransition");
 __decorateClass([
-  r()
+  state()
 ], LuksoButton.prototype, "timer");
 customElements.define("lukso-button", LuksoButton);