@lukso/web-components 1.31.0 → 1.32.0

package/dist/components/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const components_luksoButton_index = require('./lukso-button/index.cjs');
 const components_luksoCard_index = require('./lukso-card/index.cjs');
+const components_luksoCheckbox_index = require('./lukso-checkbox/index.cjs');
 const components_luksoFooter_index = require('./lukso-footer/index.cjs');
 const components_luksoIcon_index = require('./lukso-icon/index.cjs');
 const components_luksoInput_index = require('./lukso-input/index.cjs');
@@ -19,11 +20,11 @@ const components_luksoTerms_index = require('./lukso-terms/index.cjs');
 const components_luksoTest_index = require('./lukso-test/index.cjs');
 const components_luksoUsername_index = require('./lukso-username/index.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-4a94cf2c.cjs');
-require('../directive-d0161b26.cjs');
-require('../state-a13eb70b.cjs');
-require('../index-a1c8eb00.cjs');
-require('../style-map-f737f913.cjs');
+const shared_tailwindElement_index = require('../index-1c3e0838.cjs');
+require('../directive-db00f5fb.cjs');
+require('../state-a62a7d5d.cjs');
+require('../index-7dc05ee5.cjs');
+require('../style-map-a55221fe.cjs');
 require('../style-map-ce3031bc.cjs');
 
 
@@ -36,6 +37,10 @@ Object.defineProperty(exports, 'LuksoCard', {
 	enumerable: true,
 	get: () => components_luksoCard_index.LuksoCard
 });
+Object.defineProperty(exports, 'LuksoCheckbox', {
+	enumerable: true,
+	get: () => components_luksoCheckbox_index.LuksoCheckbox
+});
 Object.defineProperty(exports, 'LuksoFooter', {
 	enumerable: true,
 	get: () => components_luksoFooter_index.LuksoFooter

package/dist/{src/components → components}/index.d.ts

@@ -1,5 +1,6 @@
 export * from './lukso-button/index';
 export * from './lukso-card/index';
+export * from './lukso-checkbox/index';
 export * from './lukso-footer/index';
 export * from './lukso-icon/index';
 export * from './lukso-input/index';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { LuksoButton } from './lukso-button/index.js';
 export { LuksoCard } from './lukso-card/index.js';
+export { LuksoCheckbox } from './lukso-checkbox/index.js';
 export { LuksoFooter } from './lukso-footer/index.js';
 export { LuksoIcon } from './lukso-icon/index.js';
 export { LuksoInput } from './lukso-input/index.js';
@@ -15,9 +16,9 @@ export { LuksoTerms } from './lukso-terms/index.js';
 export { LuksoTest } from './lukso-test/index.js';
 export { LuksoUsername } from './lukso-username/index.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-4507034c.js';
-import '../directive-190d1dea.js';
-import '../state-069457a0.js';
-import '../index-48ee71cd.js';
-import '../style-map-a25f1f00.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-e26b8ca5.js';
+import '../directive-9ec64c08.js';
+import '../state-7fde94d1.js';
+import '../index-714323c9.js';
+import '../style-map-5f187498.js';
 import '../style-map-06219dec.js';

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4a94cf2c.cjs');
-const directive = require('../../directive-d0161b26.cjs');
-const state = require('../../state-a13eb70b.cjs');
-const index = require('../../index-a1c8eb00.cjs');
+const shared_tailwindElement_index = require('../../index-1c3e0838.cjs');
+const directive = require('../../directive-db00f5fb.cjs');
+const state = require('../../state-a62a7d5d.cjs');
+const index = require('../../index-7dc05ee5.cjs');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -183,49 +183,49 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
   }
 };
 __decorateClass([
-  directive.e$1({ type: String })
+  directive.e({ type: String })
 ], exports.LuksoButton.prototype, "variant", 2);
 __decorateClass([
-  directive.e$1({ type: String })
+  directive.e({ type: String })
 ], exports.LuksoButton.prototype, "size", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean })
+  directive.e({ type: Boolean })
 ], exports.LuksoButton.prototype, "disabled", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean, attribute: "is-full-width" })
+  directive.e({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoButton.prototype, "isFullWidth", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean, attribute: "is-long-press" })
+  directive.e({ type: Boolean, attribute: "is-long-press" })
 ], exports.LuksoButton.prototype, "isLongPress", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean, attribute: "is-link" })
+  directive.e({ type: Boolean, attribute: "is-link" })
 ], exports.LuksoButton.prototype, "isLink", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean, attribute: "is-loading" })
+  directive.e({ type: Boolean, attribute: "is-loading" })
 ], exports.LuksoButton.prototype, "isLoading", 2);
 __decorateClass([
-  directive.e$1({ type: String })
+  directive.e({ type: String })
 ], exports.LuksoButton.prototype, "type", 2);
 __decorateClass([
-  directive.e$1({ type: String })
+  directive.e({ type: String })
 ], exports.LuksoButton.prototype, "href", 2);
 __decorateClass([
-  directive.e$1({ type: String })
+  directive.e({ type: String })
 ], exports.LuksoButton.prototype, "target", 2);
 __decorateClass([
-  directive.e$1({ type: String })
+  directive.e({ type: String })
 ], exports.LuksoButton.prototype, "rel", 2);
 __decorateClass([
-  directive.e$1({ type: String, attribute: "loading-text" })
+  directive.e({ type: String, attribute: "loading-text" })
 ], exports.LuksoButton.prototype, "loadingText", 2);
 __decorateClass([
-  directive.e$1({ type: String, attribute: "custom-class" })
+  directive.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoButton.prototype, "customClass", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean, attribute: "is-active" })
+  directive.e({ type: Boolean, attribute: "is-active" })
 ], exports.LuksoButton.prototype, "isActive", 2);
 __decorateClass([
-  directive.e$1({ type: Number })
+  directive.e({ type: Number })
 ], exports.LuksoButton.prototype, "count", 2);
 __decorateClass([
   state.t()
@@ -237,5 +237,5 @@ __decorateClass([
   state.t()
 ], exports.LuksoButton.prototype, "timer", 2);
 exports.LuksoButton = __decorateClass([
-  directive.e("lukso-button")
+  directive.e$1("lukso-button")
 ], exports.LuksoButton);

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

@@ -1,7 +1,7 @@
-import { T as TailwindStyledElement, x } from '../../index-4507034c.js';
-import { a as e, e as e$1 } from '../../directive-190d1dea.js';
-import { t } from '../../state-069457a0.js';
-import { c as customClassMap } from '../../index-48ee71cd.js';
+import { T as TailwindStyledElement, x } from '../../index-e26b8ca5.js';
+import { e, a as e$1 } from '../../directive-9ec64c08.js';
+import { t } from '../../state-7fde94d1.js';
+import { c as customClassMap } from '../../index-714323c9.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4a94cf2c.cjs');
-const directive = require('../../directive-d0161b26.cjs');
-const styleMap = require('../../style-map-f737f913.cjs');
-const index = require('../../index-a1c8eb00.cjs');
+const shared_tailwindElement_index = require('../../index-1c3e0838.cjs');
+const directive = require('../../directive-db00f5fb.cjs');
+const styleMap = require('../../style-map-a55221fe.cjs');
+const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-profile/index.cjs');
 
 const style = ":host {\n  display: flex;\n  width: 100%;\n}\n\n:host([is-fixed-width]) {\n  width: inherit;\n}";
@@ -129,47 +129,102 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       </div>
     `;
   }
+  profile2Template() {
+    return shared_tailwindElement_index.x`
+      <div
+        data-testid="card"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${index.customClassMap({
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
+      [this.customClass]: !!this.customClass,
+      ["w-[362px]"]: this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight,
+      ["w-full"]: this.isFullWidth
+    })}"
+      >
+        <div
+          style=${styleMap.o({
+      backgroundImage: `url(${this.backgroundUrl})`
+    })}
+          class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
+        >
+          <div
+            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10 absolute opacity-10"
+          ></div>
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div class="grid grid-rows-[max-content,auto]">
+          <div class="bg-neutral-100 shadow-neutral-drop-shadow relative">
+            <lukso-profile
+              profile-url=${this.profileUrl}
+              size="large"
+              profile-address=${this.profileAddress}
+              has-identicon
+              class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
+            ></lukso-profile>
+            <div
+              class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
+            >
+              <div
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
+              shadow-neutral-above-shadow-1xl"
+              ></div>
+            </div>
+            <slot name="content"></slot>
+          </div>
+          <div class="bg-neutral-97 rounded-b-24">
+            <slot name="bottom"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
   render() {
     switch (this.variant) {
       case "with-header":
         return this.withHeaderTemplate();
       case "profile":
         return this.profileTemplate();
+      case "profile-2":
+        return this.profile2Template();
       default:
         return this.basicTemplate();
     }
   }
 };
 __decorateClass([
-  directive.e$1({ type: String })
+  directive.e({ type: String })
 ], exports.LuksoCard.prototype, "variant", 2);
 __decorateClass([
-  directive.e$1({ type: String, attribute: "background-url" })
+  directive.e({ type: String, attribute: "background-url" })
 ], exports.LuksoCard.prototype, "backgroundUrl", 2);
 __decorateClass([
-  directive.e$1({ type: String, attribute: "profile-url" })
+  directive.e({ type: String, attribute: "profile-url" })
 ], exports.LuksoCard.prototype, "profileUrl", 2);
 __decorateClass([
-  directive.e$1({ type: String, attribute: "profile-address" })
+  directive.e({ type: String, attribute: "profile-address" })
 ], exports.LuksoCard.prototype, "profileAddress", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean, attribute: "is-fixed-width" })
+  directive.e({ type: Boolean, attribute: "is-fixed-width" })
 ], exports.LuksoCard.prototype, "isFixedWidth", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean, attribute: "is-fixed-height" })
+  directive.e({ type: Boolean, attribute: "is-fixed-height" })
 ], exports.LuksoCard.prototype, "isFixedHeight", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean, attribute: "is-full-width" })
+  directive.e({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoCard.prototype, "isFullWidth", 2);
 __decorateClass([
-  directive.e$1({ type: String, attribute: "custom-class" })
+  directive.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoCard.prototype, "customClass", 2);
 __decorateClass([
-  directive.e$1({ type: String })
+  directive.e({ type: String })
 ], exports.LuksoCard.prototype, "size", 2);
 __decorateClass([
-  directive.e$1({ type: Boolean, attribute: "is-hoverable" })
+  directive.e({ type: Boolean, attribute: "is-hoverable" })
 ], exports.LuksoCard.prototype, "isHoverable", 2);
 exports.LuksoCard = __decorateClass([
-  directive.e("lukso-card")
+  directive.e$1("lukso-card")
 ], exports.LuksoCard);

package/dist/{src/components → components}/lukso-card/index.d.ts

@@ -1,4 +1,4 @@
-export type CardVariants = 'basic' | 'with-header' | 'profile';
+export type CardVariants = 'basic' | 'with-header' | 'profile' | 'profile-2';
 export type CardSizes = 'small' | 'medium';
 declare const LuksoCard_base: typeof import("lit").LitElement;
 export declare class LuksoCard extends LuksoCard_base {
@@ -18,6 +18,7 @@ export declare class LuksoCard extends LuksoCard_base {
     basicTemplate(): import("lit").TemplateResult<1>;
     withHeaderTemplate(): import("lit").TemplateResult<1>;
     profileTemplate(): import("lit").TemplateResult<1>;
+    profile2Template(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1,7 +1,7 @@
-import { T as TailwindStyledElement, x } from '../../index-4507034c.js';
-import { a as e, e as e$1 } from '../../directive-190d1dea.js';
-import { o } from '../../style-map-a25f1f00.js';
-import { c as customClassMap } from '../../index-48ee71cd.js';
+import { T as TailwindStyledElement, x } from '../../index-e26b8ca5.js';
+import { e, a as e$1 } from '../../directive-9ec64c08.js';
+import { o } from '../../style-map-5f187498.js';
+import { c as customClassMap } from '../../index-714323c9.js';
 import '../lukso-profile/index.js';
 
 const style = ":host {\n  display: flex;\n  width: 100%;\n}\n\n:host([is-fixed-width]) {\n  width: inherit;\n}";
@@ -125,12 +125,67 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       </div>
     `;
   }
+  profile2Template() {
+    return x`
+      <div
+        data-testid="card"
+        class="bg-neutral-100 grid grid-rows-[auto,1fr] ${customClassMap({
+      [this.mediumStyles]: !this.customClass && this.size === "medium",
+      [this.smallStyles]: !this.customClass && this.size === "small",
+      [this.smallHoverStyles]: this.isHoverable && this.size === "small",
+      [this.customClass]: !!this.customClass,
+      ["w-[362px]"]: this.isFixedWidth,
+      ["min-h-[534px]"]: this.isFixedHeight,
+      ["w-full"]: this.isFullWidth
+    })}"
+      >
+        <div
+          style=${o({
+      backgroundImage: `url(${this.backgroundUrl})`
+    })}
+          class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
+        >
+          <div
+            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10 absolute opacity-10"
+          ></div>
+          <div>
+            <slot name="header"></slot>
+          </div>
+        </div>
+        <div class="grid grid-rows-[max-content,auto]">
+          <div class="bg-neutral-100 shadow-neutral-drop-shadow relative">
+            <lukso-profile
+              profile-url=${this.profileUrl}
+              size="large"
+              profile-address=${this.profileAddress}
+              has-identicon
+              class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
+            ></lukso-profile>
+            <div
+              class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
+            >
+              <div
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
+              shadow-neutral-above-shadow-1xl"
+              ></div>
+            </div>
+            <slot name="content"></slot>
+          </div>
+          <div class="bg-neutral-97 rounded-b-24">
+            <slot name="bottom"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
   render() {
     switch (this.variant) {
       case "with-header":
         return this.withHeaderTemplate();
       case "profile":
         return this.profileTemplate();
+      case "profile-2":
+        return this.profile2Template();
       default:
         return this.basicTemplate();
     }

package/dist/{src/components → components}/lukso-card/lukso-card.stories.d.ts

@@ -14,6 +14,8 @@ export declare const CardWithHeader: any;
 export declare const CardWithCustomHeader: any;
 /** Example of `profile` variant. This variant additionally uses `background-url`, `profile-url` and `profile-address` properties.  */
 export declare const ProfileCard: any;
+/** Example of `profile-2` variant.  */
+export declare const Profile2Card: any;
 /** You can customize card with `custom-class` property, it will be used instead of default styles.  */
 export declare const CustomCard: any;
 /** You can select card size with `size` property.  */

package/dist/{src/components → components}/lukso-card/lukso-card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IA4IX,CAAA;AAED,eAAe,IAAI,CAAA;AAsFnB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,qGAAqG;AACrG,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,kGAAkG;AAClG,eAAO,MAAM,aAAa,KAA2B,CAAA;AAWrD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uGAAuG;AACvG,eAAO,MAAM,UAAU,KAA2B,CAAA;AAalD,sDAAsD;AACtD,eAAO,MAAM,SAAS,KAA2B,CAAA;AAKjD,sEAAsE;AACtE,eAAO,MAAM,aAAa,KAA2B,CAAA"}
+{"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IA8IX,CAAA;AAED,eAAe,IAAI,CAAA;AAwFnB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,qGAAqG;AACrG,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,kGAAkG;AAClG,eAAO,MAAM,aAAa,KAA2B,CAAA;AAWrD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,uGAAuG;AACvG,eAAO,MAAM,UAAU,KAA2B,CAAA;AAalD,sDAAsD;AACtD,eAAO,MAAM,SAAS,KAA2B,CAAA;AAKjD,sEAAsE;AACtE,eAAO,MAAM,aAAa,KAA2B,CAAA"}

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

@@ -0,0 +1,217 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-1c3e0838.cjs');
+const directive = require('../../directive-db00f5fb.cjs');
+const state = require('../../state-a62a7d5d.cjs');
+const index = require('../../index-7dc05ee5.cjs');
+
+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.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.id = "";
+    this.ref = void 0;
+    this.type = "text";
+    this.size = "medium";
+    this.error = "";
+    this.checked = false;
+    this.customClass = "";
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.hasFocus = false;
+    this.hasHighlight = false;
+    this.defaultContainerStyles = `
+        flex items-center gap-2
+        border border-solid border-neutral-100      
+        select-none  
+    `;
+    this.defaultInputStyles = `
+        peer
+        absolute
+        top-0 left-0
+        opacity-0
+    `;
+    this.defaultLabelStyles = `
+    text-neutral-20 block
+    `;
+    this.defaultCheckboxStyles = `
+    relative
+    bg-neutral-100
+    justify-center items-center flex
+    border border-solid rounded-md
+    outline-none transition transition-all duration-150 appearance-none`;
+  }
+  checkedIconTemplate() {
+    return shared_tailwindElement_index.x`
+      <lukso-icon
+        class=${index.customClassMap({
+      hidden: !this.checked
+    })}
+        name="tick"
+        color=${this.isDisabled ? "neutral-60" : "neutral-20"}
+      ></lukso-icon>
+    `;
+  }
+  checkboxTemplate() {
+    return shared_tailwindElement_index.x`
+      <div
+        class=${index.customClassMap({
+      [this.defaultCheckboxStyles]: true,
+      [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
+      [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
+      ["border-neutral-60"]: this.isDisabled,
+      ["h-[40px] w-[40px]"]: this.size === "medium",
+      ["h-[32px] w-[32px]"]: this.size === "small",
+      ["h-[28px] w-[28px]"]: this.size === "x-small",
+      [this.customClass]: !!this.customClass
+    })}
+      >
+        ${this.checkedIconTemplate()}
+      </div>
+    `;
+  }
+  inputTemplate() {
+    const id = this.id || this.name;
+    return shared_tailwindElement_index.x`
+      <input
+        name=${this.name}
+        ?checked=${this.checked ? "checked" : void 0}
+        type="checkbox"
+        class=${index.customClassMap({
+      [this.defaultInputStyles]: true,
+      ["text-neutral-60"]: this.isDisabled
+    })}
+        ref=${this.ref}
+        id=${id}
+        data-testid=${this.name ? `input-${this.name}` : "input"}
+        ?disabled=${this.isDisabled ? true : void 0}
+        ?readonly=${this.isReadonly ? true : void 0}
+        @change=${!this.isReadonly ? this.handleChange : "return false;"}
+      />
+    `;
+  }
+  errorTemplate() {
+    return shared_tailwindElement_index.x`
+      <div class="paragraph-inter-12-regular text-red-65 pt-2">
+        ${this.error}
+      </div>
+    `;
+  }
+  labelTemplate() {
+    return shared_tailwindElement_index.x`
+      <span
+        class=${index.customClassMap({
+      [this.defaultLabelStyles]: true,
+      ["paragraph-inter-16-regular"]: this.size === "medium" || this.size === "small",
+      ["paragraph-inter-12-semi-bold"]: this.size === "x-small",
+      ["text-red-65"]: this.error !== "",
+      ["text-neutral-60"]: this.isDisabled
+    })}
+      >
+        <slot></slot>
+      </span>
+    `;
+  }
+  profileUsernameTemplate() {
+    return shared_tailwindElement_index.x`
+      <div class="flex items-center text-neutral-20 gap-2 justify-center">
+        <slot></slot>
+      </div>
+    `;
+  }
+  render() {
+    return shared_tailwindElement_index.x`
+      <div>
+        <label
+          for=${this.name}
+          class=${index.customClassMap({
+      [this.defaultContainerStyles]: true,
+      ["cursor-not-allowed"]: this.isDisabled || this.isReadonly
+    })}
+          @mouseenter=${this.handleMouseOver}
+          @mouseleave=${this.handleMouseOut}
+        >
+          ${this.inputTemplate()} ${this.checkboxTemplate()}
+          ${this.type === "text" ? this.labelTemplate() : this.profileUsernameTemplate()}
+        </label>
+      </div>
+    `;
+  }
+  handleChange(event) {
+    const target = event.target;
+    this.checked = target.checked;
+    this.dispatchEvent(
+      new CustomEvent("on-change", {
+        detail: {
+          value: target.value,
+          checked: target.checked,
+          event
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleMouseOver() {
+    if (!this.isReadonly && !this.isDisabled) {
+      this.hasHighlight = true;
+    }
+  }
+  handleMouseOut() {
+    if (!this.hasFocus) {
+      this.hasHighlight = false;
+    }
+  }
+};
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoCheckbox.prototype, "name", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoCheckbox.prototype, "id", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoCheckbox.prototype, "ref", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoCheckbox.prototype, "type", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoCheckbox.prototype, "size", 2);
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoCheckbox.prototype, "error", 2);
+__decorateClass([
+  directive.e({ type: Boolean })
+], exports.LuksoCheckbox.prototype, "checked", 2);
+__decorateClass([
+  directive.e({ type: String, attribute: "custom-class" })
+], exports.LuksoCheckbox.prototype, "customClass", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-readonly" })
+], exports.LuksoCheckbox.prototype, "isReadonly", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-disabled" })
+], exports.LuksoCheckbox.prototype, "isDisabled", 2);
+__decorateClass([
+  state.t()
+], exports.LuksoCheckbox.prototype, "hasFocus", 2);
+__decorateClass([
+  state.t()
+], exports.LuksoCheckbox.prototype, "hasHighlight", 2);
+exports.LuksoCheckbox = __decorateClass([
+  directive.e$1("lukso-checkbox")
+], exports.LuksoCheckbox);

package/dist/components/lukso-checkbox/index.d.ts

@@ -0,0 +1,36 @@
+import { TailwindElement } from '../../shared/tailwind-element';
+export type CheckboxSize = 'x-small' | 'small' | 'medium';
+export type CheckboxType = 'text' | 'profile';
+export declare class LuksoCheckbox extends TailwindElement {
+    name: string;
+    id: string;
+    ref: string | undefined;
+    type: CheckboxType;
+    size: CheckboxSize;
+    error: string;
+    checked: boolean;
+    customClass: string;
+    isReadonly: boolean;
+    isDisabled: boolean;
+    private hasFocus;
+    private hasHighlight;
+    private defaultContainerStyles;
+    private defaultInputStyles;
+    private defaultLabelStyles;
+    private defaultCheckboxStyles;
+    checkedIconTemplate(): unknown;
+    checkboxTemplate(): unknown;
+    inputTemplate(): import("lit").TemplateResult<1>;
+    errorTemplate(): import("lit").TemplateResult<1>;
+    labelTemplate(): import("lit").TemplateResult<1>;
+    profileUsernameTemplate(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    private handleChange;
+    private handleMouseOver;
+    private handleMouseOut;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lukso-checkbox': LuksoCheckbox;
+    }
+}