@lukso/web-components 1.171.2 → 1.172.14

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

@@ -2,15 +2,167 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../../index-CQo4gGTi.cjs');
-require('../../safe-custom-element-DRyGbLN8.cjs');
-const components_luksoProfile_index = require('../../index-C0f78WvR.cjs');
-require('../../index-CaJky2qL.cjs');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const makeBlockie = require('ethereum-blockies-base64');
+const tailwindVariants = require('tailwind-variants');
+const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 require('../lukso-image/index.cjs');
 
-
-
-Object.defineProperty(exports, "LuksoProfile", {
-	enumerable: true,
-	get: () => components_luksoProfile_index.LuksoProfile
-});
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.profileUrl = "";
+    this.profileAddress = "";
+    this.hasIdenticon = false;
+    this.size = "large";
+    this.isSquare = false;
+    this.placeholder = "/assets/images/profile-default.svg";
+    this.profileStyles = tailwindVariants.tv({
+      slots: {
+        wrapper: "outline outline-2 outline-neutral-100 relative",
+        profile: "overflow-hidden",
+        identicon: "absolute shadow-shadow-1xl rounded-full outline outline-neutral-100 right-0 bottom-0"
+      },
+      variants: {
+        isSquare: {
+          false: {
+            wrapper: "rounded-full",
+            profile: "rounded-full"
+          }
+        },
+        size: {
+          "2x-small": {
+            wrapper: "w-4 h-4",
+            profile: "w-4 h-4",
+            identicon: "w-2 h-2 outline-1"
+          },
+          "x-small": {
+            wrapper: "w-6 h-6",
+            profile: "w-6 h-6",
+            identicon: "w-3 h-3 outline-1"
+          },
+          small: {
+            wrapper: "w-10 h-10",
+            profile: "w-10 h-10",
+            identicon: "w-4 h-4 outline-2"
+          },
+          medium: {
+            wrapper: "w-14 h-14",
+            profile: "w-14 h-14",
+            identicon: "w-5 h-5 outline-2"
+          },
+          large: {
+            wrapper: "w-20 h-20",
+            profile: "w-20 h-20",
+            identicon: "w-6 h-6 outline-2"
+          },
+          "x-large": {
+            wrapper: "w-24 h-24",
+            profile: "w-24 h-24",
+            identicon: "w-7 h-7 outline-2"
+          },
+          "2x-large": {
+            wrapper: "w-30 h-30",
+            profile: "w-30 h-30",
+            identicon: "w-9 h-9 outline-[2.5px]"
+          }
+        }
+      },
+      compoundVariants: [
+        {
+          isSquare: true,
+          size: ["2x-small", "x-small"],
+          class: {
+            wrapper: "rounded-[2px]",
+            profile: "rounded-[2px]"
+          }
+        },
+        {
+          isSquare: true,
+          size: "small",
+          class: {
+            wrapper: "rounded-4",
+            profile: "rounded-4"
+          }
+        },
+        {
+          isSquare: true,
+          size: "medium",
+          class: {
+            wrapper: "rounded-8",
+            profile: "rounded-8"
+          }
+        },
+        {
+          isSquare: true,
+          size: "large",
+          class: {
+            wrapper: "rounded-[10px]",
+            profile: "rounded-[10px]"
+          }
+        },
+        {
+          isSquare: true,
+          size: ["2x-large", "x-large"],
+          class: {
+            wrapper: "rounded-12",
+            profile: "rounded-12"
+          }
+        }
+      ]
+    });
+  }
+  identicon() {
+    return this.hasIdenticon && this.profileAddress ? makeBlockie(this.profileAddress) : "";
+  }
+  render() {
+    const { wrapper, profile, identicon } = this.profileStyles({
+      size: this.size,
+      isSquare: this.isSquare
+    });
+    return lit.html`
+      <div data-testid="profile" class=${wrapper()}>
+        <div class=${profile()}>
+          <lukso-image
+            src=${this.profileUrl}
+            placeholder=${this.placeholder}
+          ></lukso-image>
+        </div>
+        ${this.identicon() ? lit.html`<img src=${this.identicon()} class=${identicon()} alt="" />` : ""}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "profile-url", reflect: true })
+], exports.LuksoProfile.prototype, "profileUrl", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "profile-address", reflect: true })
+], exports.LuksoProfile.prototype, "profileAddress", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "has-identicon", reflect: true })
+], exports.LuksoProfile.prototype, "hasIdenticon", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.LuksoProfile.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "is-square" })
+], exports.LuksoProfile.prototype, "isSquare", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.LuksoProfile.prototype, "placeholder", 2);
+exports.LuksoProfile = __decorateClass([
+  safeCustomElement.safeCustomElement("lukso-profile")
+], exports.LuksoProfile);

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

@@ -1,5 +1,166 @@
-import '../../index-DUvJL4Yz.js';
-import '../../safe-custom-element-B49fAUL7.js';
-export { L as LuksoProfile } from '../../index-BubNMsN-.js';
-import '../../index-B9iart53.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import makeBlockie from 'ethereum-blockies-base64';
+import { tv } from 'tailwind-variants';
+import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindElement } from '../../shared/tailwind-element/index.js';
 import '../lukso-image/index.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LuksoProfile = class extends TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.profileUrl = "";
+    this.profileAddress = "";
+    this.hasIdenticon = false;
+    this.size = "large";
+    this.isSquare = false;
+    this.placeholder = "/assets/images/profile-default.svg";
+    this.profileStyles = tv({
+      slots: {
+        wrapper: "outline outline-2 outline-neutral-100 relative",
+        profile: "overflow-hidden",
+        identicon: "absolute shadow-shadow-1xl rounded-full outline outline-neutral-100 right-0 bottom-0"
+      },
+      variants: {
+        isSquare: {
+          false: {
+            wrapper: "rounded-full",
+            profile: "rounded-full"
+          }
+        },
+        size: {
+          "2x-small": {
+            wrapper: "w-4 h-4",
+            profile: "w-4 h-4",
+            identicon: "w-2 h-2 outline-1"
+          },
+          "x-small": {
+            wrapper: "w-6 h-6",
+            profile: "w-6 h-6",
+            identicon: "w-3 h-3 outline-1"
+          },
+          small: {
+            wrapper: "w-10 h-10",
+            profile: "w-10 h-10",
+            identicon: "w-4 h-4 outline-2"
+          },
+          medium: {
+            wrapper: "w-14 h-14",
+            profile: "w-14 h-14",
+            identicon: "w-5 h-5 outline-2"
+          },
+          large: {
+            wrapper: "w-20 h-20",
+            profile: "w-20 h-20",
+            identicon: "w-6 h-6 outline-2"
+          },
+          "x-large": {
+            wrapper: "w-24 h-24",
+            profile: "w-24 h-24",
+            identicon: "w-7 h-7 outline-2"
+          },
+          "2x-large": {
+            wrapper: "w-30 h-30",
+            profile: "w-30 h-30",
+            identicon: "w-9 h-9 outline-[2.5px]"
+          }
+        }
+      },
+      compoundVariants: [
+        {
+          isSquare: true,
+          size: ["2x-small", "x-small"],
+          class: {
+            wrapper: "rounded-[2px]",
+            profile: "rounded-[2px]"
+          }
+        },
+        {
+          isSquare: true,
+          size: "small",
+          class: {
+            wrapper: "rounded-4",
+            profile: "rounded-4"
+          }
+        },
+        {
+          isSquare: true,
+          size: "medium",
+          class: {
+            wrapper: "rounded-8",
+            profile: "rounded-8"
+          }
+        },
+        {
+          isSquare: true,
+          size: "large",
+          class: {
+            wrapper: "rounded-[10px]",
+            profile: "rounded-[10px]"
+          }
+        },
+        {
+          isSquare: true,
+          size: ["2x-large", "x-large"],
+          class: {
+            wrapper: "rounded-12",
+            profile: "rounded-12"
+          }
+        }
+      ]
+    });
+  }
+  identicon() {
+    return this.hasIdenticon && this.profileAddress ? makeBlockie(this.profileAddress) : "";
+  }
+  render() {
+    const { wrapper, profile, identicon } = this.profileStyles({
+      size: this.size,
+      isSquare: this.isSquare
+    });
+    return html`
+      <div data-testid="profile" class=${wrapper()}>
+        <div class=${profile()}>
+          <lukso-image
+            src=${this.profileUrl}
+            placeholder=${this.placeholder}
+          ></lukso-image>
+        </div>
+        ${this.identicon() ? html`<img src=${this.identicon()} class=${identicon()} alt="" />` : ""}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, attribute: "profile-url", reflect: true })
+], LuksoProfile.prototype, "profileUrl", 2);
+__decorateClass([
+  property({ type: String, attribute: "profile-address", reflect: true })
+], LuksoProfile.prototype, "profileAddress", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "has-identicon", reflect: true })
+], LuksoProfile.prototype, "hasIdenticon", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LuksoProfile.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "is-square" })
+], LuksoProfile.prototype, "isSquare", 2);
+__decorateClass([
+  property({ type: String })
+], LuksoProfile.prototype, "placeholder", 2);
+LuksoProfile = __decorateClass([
+  safeCustomElement("lukso-profile")
+], LuksoProfile);
+
+export { LuksoProfile };

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

@@ -2,11 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-CQo4gGTi.cjs');
-const safeCustomElement = require('../../safe-custom-element-DRyGbLN8.cjs');
-const styleMap = require('../../style-map-Bsh7bGbD.cjs');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const styleMap = require('../../chunks/style-map-AEeBQfPb.js');
+const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 require('../../tailwind-config.cjs');
-const axe = require('../../axe-C-H1UVi1.cjs');
+const cn = require('../../chunks/cn-zamUNFMe.js');
+require('viem');
+require('axe-core');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -31,19 +35,19 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
     return this.current / this.max * 100;
   }
   render() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="progress"
         style=${styleMap.o({
       height: this.height > 16 ? `${this.height}px` : "16px"
     })}
-        class=${axe.cn("w-full rounded-24 bg-neutral-95 relative")}
+        class=${cn.cn("w-full rounded-24 bg-neutral-95 relative")}
       >
         <div
           style=${styleMap.o({
       width: `${this.progressWidth()}%`
     })}
-          class=${axe.cn(
+          class=${cn.cn(
       "rounded-s-24 h-full rounded-e-24  transition-all w-[1%]",
       {
         "bg-green-85": !!this.variant || this.variant === "success",
@@ -53,7 +57,7 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
     )}
         ></div>
         <div
-          class=${axe.cn(
+          class=${cn.cn(
       "shadow-neutral-inner-shadow h-full absolute w-full top-0 rounded-24"
     )}
         ></div>
@@ -62,19 +66,19 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
   }
 };
 __decorateClass([
-  safeCustomElement.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoProgress.prototype, "min", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoProgress.prototype, "max", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoProgress.prototype, "current", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoProgress.prototype, "variant", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoProgress.prototype, "height", 2);
 exports.LuksoProgress = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-progress")

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

@@ -1,8 +1,12 @@
-import { a as TailwindElement, x } from '../../index-DUvJL4Yz.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-B49fAUL7.js';
-import { o } from '../../style-map-fND-mbdR.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { o } from '../../chunks/style-map-auscxO0L.js';
+import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindElement } from '../../shared/tailwind-element/index.js';
 import '../../tailwind-config.js';
-import { c as cn } from '../../axe-BK9JSROP.js';
+import { c as cn } from '../../chunks/cn-LM_JlZIN.js';
+import 'viem';
+import 'axe-core';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -27,7 +31,7 @@ let LuksoProgress = class extends TailwindElement {
     return this.current / this.max * 100;
   }
   render() {
-    return x`
+    return html`
       <div
         data-testid="progress"
         style=${o({
@@ -58,19 +62,19 @@ let LuksoProgress = class extends TailwindElement {
   }
 };
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoProgress.prototype, "min", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoProgress.prototype, "max", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoProgress.prototype, "current", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoProgress.prototype, "variant", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoProgress.prototype, "height", 2);
 LuksoProgress = __decorateClass([
   safeCustomElement("lukso-progress")