@lukso/web-components 1.132.1 → 1.134.0

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

@@ -0,0 +1,284 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
+const property = require('../../property-DGVQMLCH.cjs');
+const state = require('../../state-CCMDzTj3.cjs');
+const index = require('../../index-CaJky2qL.cjs');
+require('../../tailwind-config.cjs');
+const cn = require('../../cn-CNdKneQ1.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.LuksoRadio = class LuksoRadio extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.id = "";
+    this.value = "";
+    this.size = "medium";
+    this.error = "";
+    this.checked = false;
+    this.customClass = "";
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.hasFocus = false;
+    this.hasHighlight = false;
+    this.radioStyles = index.ce({
+      slots: {
+        container: "flex items-center gap-2 select-none outline-none",
+        radio: `
+        relative bg-neutral-100 justify-center items-center flex
+        border border-solid rounded-full border-neutral-35
+        outline-none transition transition-all duration-150 appearance-none shrink-0
+      `,
+        indicator: "rounded-full absolute appearance-none transition duration-300 ease-in",
+        content: "text-neutral-20 block",
+        errorText: "paragraph-inter-12-regular text-red-65 pt-2"
+      },
+      variants: {
+        size: {
+          medium: {
+            radio: "h-[40px] w-[40px]",
+            indicator: "w-[26px] h-[26px]",
+            content: "paragraph-inter-16-regular"
+          },
+          small: {
+            radio: "h-[32px] w-[32px]",
+            indicator: "w-[20px] h-[20px]",
+            content: "paragraph-inter-16-regular"
+          },
+          "x-small": {
+            radio: "h-[28px] w-[28px]",
+            indicator: "w-[17px] h-[17px]",
+            content: "paragraph-inter-12-semi-bold"
+          }
+        },
+        hasError: {
+          true: {
+            radio: "border-red-65",
+            content: "text-red-65"
+          },
+          false: {
+            radio: "border-neutral-90"
+          }
+        },
+        hasHighlight: {
+          true: {
+            radio: "border-neutral-35"
+          }
+        },
+        isDisabled: {
+          true: {
+            radio: "border-neutral-90",
+            content: "text-neutral-90",
+            indicator: "bg-neutral-90",
+            container: "cursor-not-allowed"
+          },
+          false: {
+            indicator: "bg-green-54"
+          }
+        },
+        isReadonly: {
+          true: {
+            container: "cursor-not-allowed"
+          }
+        },
+        isChecked: {
+          true: {},
+          false: {}
+        }
+      },
+      compoundVariants: [
+        {
+          hasHighlight: true,
+          hasError: true,
+          class: {
+            radio: "border-red-65"
+          }
+        },
+        {
+          isDisabled: true,
+          class: {
+            container: "cursor-not-allowed"
+          }
+        }
+      ]
+    });
+  }
+  // Expose the focus method for programmatic focusing
+  focus() {
+    const radioElement = this.renderRoot.querySelector('[role="radio"]');
+    if (radioElement instanceof HTMLElement) {
+      radioElement.focus();
+    }
+  }
+  checkedIndicatorTemplate() {
+    const { indicator } = this.radioStyles({
+      size: this.size,
+      isDisabled: this.isDisabled,
+      isChecked: this.checked
+    });
+    return shared_tailwindElement_index.x`
+      <div class=${cn.cn(indicator(), this.checked ? "" : "hidden")}></div>
+    `;
+  }
+  radioTemplate() {
+    const { radio } = this.radioStyles({
+      size: this.size,
+      hasError: !!this.error,
+      hasHighlight: this.hasHighlight,
+      isDisabled: this.isDisabled
+    });
+    return shared_tailwindElement_index.x`
+      <div class=${cn.cn(radio(), this.customClass)}>
+        ${this.checkedIndicatorTemplate()}
+      </div>
+    `;
+  }
+  errorTemplate() {
+    const { errorText } = this.radioStyles();
+    return shared_tailwindElement_index.x` <div class=${errorText()}>${this.error}</div> `;
+  }
+  contentTemplate() {
+    const { content } = this.radioStyles({
+      size: this.size,
+      hasError: !!this.error,
+      isDisabled: this.isDisabled
+    });
+    return shared_tailwindElement_index.x`
+      <div class=${content()}>
+        <slot></slot>
+      </div>
+    `;
+  }
+  render() {
+    const { container } = this.radioStyles({
+      isDisabled: this.isDisabled,
+      isReadonly: this.isReadonly
+    });
+    return shared_tailwindElement_index.x`
+      <div>
+        <div
+          class=${container()}
+          @mouseenter=${this.handleMouseOver}
+          @mouseleave=${this.handleMouseOut}
+          @click=${!this.isDisabled && !this.isReadonly ? this.handleClick : void 0}
+          @keydown=${this.handleKeydown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          aria-checked=${this.checked}
+          role="radio"
+          tabindex=${!this.isDisabled && !this.isReadonly ? "0" : "-1"}
+          aria-disabled=${this.isDisabled}
+          aria-readonly=${this.isReadonly}
+          aria-labelledby="${this.id || `radio-${this.value}`}"
+          id="${this.id || `radio-${this.value}`}"
+          part="radio"
+        >
+          ${this.radioTemplate()} ${this.contentTemplate()}
+        </div>
+        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.E}
+      </div>
+    `;
+  }
+  handleKeydown(event) {
+    if (this.isDisabled || this.isReadonly) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      this.handleClick(event);
+    }
+    if ([
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "Home",
+      "End"
+    ].includes(event.key)) {
+      const radioGroup = this.closest("lukso-radio-group");
+      if (radioGroup) {
+        return;
+      }
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.hasHighlight = true;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.hasHighlight = false;
+  }
+  async handleClick(event) {
+    if (this.isReadonly || this.isDisabled) return;
+    this.checked = true;
+    await this.updateComplete;
+    this.dispatchEvent(
+      new CustomEvent("on-change", {
+        detail: {
+          value: this.value,
+          checked: true,
+          event
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleMouseOver() {
+    if (!this.isReadonly && !this.isDisabled) {
+      this.hasHighlight = true;
+    }
+  }
+  handleMouseOut() {
+    if (!this.hasFocus) {
+      this.hasHighlight = false;
+    }
+  }
+};
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoRadio.prototype, "name", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoRadio.prototype, "id", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoRadio.prototype, "value", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoRadio.prototype, "size", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoRadio.prototype, "error", 2);
+__decorateClass([
+  property.n({ type: Boolean })
+], exports.LuksoRadio.prototype, "checked", 2);
+__decorateClass([
+  property.n({ type: String, attribute: "custom-class" })
+], exports.LuksoRadio.prototype, "customClass", 2);
+__decorateClass([
+  property.n({ type: Boolean, attribute: "is-readonly" })
+], exports.LuksoRadio.prototype, "isReadonly", 2);
+__decorateClass([
+  property.n({ type: Boolean, attribute: "is-disabled" })
+], exports.LuksoRadio.prototype, "isDisabled", 2);
+__decorateClass([
+  state.r()
+], exports.LuksoRadio.prototype, "hasFocus", 2);
+__decorateClass([
+  state.r()
+], exports.LuksoRadio.prototype, "hasHighlight", 2);
+exports.LuksoRadio = __decorateClass([
+  property.t("lukso-radio")
+], exports.LuksoRadio);

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

@@ -0,0 +1,34 @@
+import { TailwindElement } from '../../shared/tailwind-element';
+export type RadioSize = 'x-small' | 'small' | 'medium';
+export declare class LuksoRadio extends TailwindElement {
+    name: string;
+    id: string;
+    value: string;
+    size: RadioSize;
+    error: string;
+    checked: boolean;
+    customClass: string;
+    isReadonly: boolean;
+    isDisabled: boolean;
+    private hasFocus;
+    private hasHighlight;
+    focus(): void;
+    private radioStyles;
+    checkedIndicatorTemplate(): unknown;
+    radioTemplate(): unknown;
+    errorTemplate(): import('lit-html').TemplateResult<1>;
+    contentTemplate(): import('lit-html').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleKeydown;
+    private handleFocus;
+    private handleBlur;
+    private handleClick;
+    private handleMouseOver;
+    private handleMouseOut;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lukso-radio': LuksoRadio;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/lukso-radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-radio/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEtD,qBACa,UAAW,SAAQ,eAAe;IAE7C,IAAI,SAAK;IAGT,EAAE,SAAK;IAGP,KAAK,SAAK;IAGV,IAAI,EAAE,SAAS,CAAW;IAG1B,KAAK,SAAK;IAGV,OAAO,UAAQ;IAGf,WAAW,SAAK;IAGhB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAGrB,KAAK;IAOZ,OAAO,CAAC,WAAW,CAiFjB;IAEF,wBAAwB,IAAI,OAAO;IAYnC,aAAa,IAAI,OAAO;IAexB,aAAa;IAKb,eAAe;IAcf,MAAM;IAkCN,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;YAKJ,WAAW;IAqBzB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;CAKvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -0,0 +1,282 @@
+import { a as TailwindElement, x, E } from '../../index-axQAcayx.js';
+import { n, t } from '../../property-CYbm8aZx.js';
+import { r } from '../../state-hoCBDnpA.js';
+import { c as ce } from '../../index-B9iart53.js';
+import '../../tailwind-config.js';
+import { c as cn } from '../../cn-Cu9aP49j.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 LuksoRadio = class extends TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.id = "";
+    this.value = "";
+    this.size = "medium";
+    this.error = "";
+    this.checked = false;
+    this.customClass = "";
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.hasFocus = false;
+    this.hasHighlight = false;
+    this.radioStyles = ce({
+      slots: {
+        container: "flex items-center gap-2 select-none outline-none",
+        radio: `
+        relative bg-neutral-100 justify-center items-center flex
+        border border-solid rounded-full border-neutral-35
+        outline-none transition transition-all duration-150 appearance-none shrink-0
+      `,
+        indicator: "rounded-full absolute appearance-none transition duration-300 ease-in",
+        content: "text-neutral-20 block",
+        errorText: "paragraph-inter-12-regular text-red-65 pt-2"
+      },
+      variants: {
+        size: {
+          medium: {
+            radio: "h-[40px] w-[40px]",
+            indicator: "w-[26px] h-[26px]",
+            content: "paragraph-inter-16-regular"
+          },
+          small: {
+            radio: "h-[32px] w-[32px]",
+            indicator: "w-[20px] h-[20px]",
+            content: "paragraph-inter-16-regular"
+          },
+          "x-small": {
+            radio: "h-[28px] w-[28px]",
+            indicator: "w-[17px] h-[17px]",
+            content: "paragraph-inter-12-semi-bold"
+          }
+        },
+        hasError: {
+          true: {
+            radio: "border-red-65",
+            content: "text-red-65"
+          },
+          false: {
+            radio: "border-neutral-90"
+          }
+        },
+        hasHighlight: {
+          true: {
+            radio: "border-neutral-35"
+          }
+        },
+        isDisabled: {
+          true: {
+            radio: "border-neutral-90",
+            content: "text-neutral-90",
+            indicator: "bg-neutral-90",
+            container: "cursor-not-allowed"
+          },
+          false: {
+            indicator: "bg-green-54"
+          }
+        },
+        isReadonly: {
+          true: {
+            container: "cursor-not-allowed"
+          }
+        },
+        isChecked: {
+          true: {},
+          false: {}
+        }
+      },
+      compoundVariants: [
+        {
+          hasHighlight: true,
+          hasError: true,
+          class: {
+            radio: "border-red-65"
+          }
+        },
+        {
+          isDisabled: true,
+          class: {
+            container: "cursor-not-allowed"
+          }
+        }
+      ]
+    });
+  }
+  // Expose the focus method for programmatic focusing
+  focus() {
+    const radioElement = this.renderRoot.querySelector('[role="radio"]');
+    if (radioElement instanceof HTMLElement) {
+      radioElement.focus();
+    }
+  }
+  checkedIndicatorTemplate() {
+    const { indicator } = this.radioStyles({
+      size: this.size,
+      isDisabled: this.isDisabled,
+      isChecked: this.checked
+    });
+    return x`
+      <div class=${cn(indicator(), this.checked ? "" : "hidden")}></div>
+    `;
+  }
+  radioTemplate() {
+    const { radio } = this.radioStyles({
+      size: this.size,
+      hasError: !!this.error,
+      hasHighlight: this.hasHighlight,
+      isDisabled: this.isDisabled
+    });
+    return x`
+      <div class=${cn(radio(), this.customClass)}>
+        ${this.checkedIndicatorTemplate()}
+      </div>
+    `;
+  }
+  errorTemplate() {
+    const { errorText } = this.radioStyles();
+    return x` <div class=${errorText()}>${this.error}</div> `;
+  }
+  contentTemplate() {
+    const { content } = this.radioStyles({
+      size: this.size,
+      hasError: !!this.error,
+      isDisabled: this.isDisabled
+    });
+    return x`
+      <div class=${content()}>
+        <slot></slot>
+      </div>
+    `;
+  }
+  render() {
+    const { container } = this.radioStyles({
+      isDisabled: this.isDisabled,
+      isReadonly: this.isReadonly
+    });
+    return x`
+      <div>
+        <div
+          class=${container()}
+          @mouseenter=${this.handleMouseOver}
+          @mouseleave=${this.handleMouseOut}
+          @click=${!this.isDisabled && !this.isReadonly ? this.handleClick : void 0}
+          @keydown=${this.handleKeydown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          aria-checked=${this.checked}
+          role="radio"
+          tabindex=${!this.isDisabled && !this.isReadonly ? "0" : "-1"}
+          aria-disabled=${this.isDisabled}
+          aria-readonly=${this.isReadonly}
+          aria-labelledby="${this.id || `radio-${this.value}`}"
+          id="${this.id || `radio-${this.value}`}"
+          part="radio"
+        >
+          ${this.radioTemplate()} ${this.contentTemplate()}
+        </div>
+        ${this.error ? this.errorTemplate() : E}
+      </div>
+    `;
+  }
+  handleKeydown(event) {
+    if (this.isDisabled || this.isReadonly) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      this.handleClick(event);
+    }
+    if ([
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "Home",
+      "End"
+    ].includes(event.key)) {
+      const radioGroup = this.closest("lukso-radio-group");
+      if (radioGroup) {
+        return;
+      }
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.hasHighlight = true;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.hasHighlight = false;
+  }
+  async handleClick(event) {
+    if (this.isReadonly || this.isDisabled) return;
+    this.checked = true;
+    await this.updateComplete;
+    this.dispatchEvent(
+      new CustomEvent("on-change", {
+        detail: {
+          value: this.value,
+          checked: true,
+          event
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleMouseOver() {
+    if (!this.isReadonly && !this.isDisabled) {
+      this.hasHighlight = true;
+    }
+  }
+  handleMouseOut() {
+    if (!this.hasFocus) {
+      this.hasHighlight = false;
+    }
+  }
+};
+__decorateClass([
+  n({ type: String })
+], LuksoRadio.prototype, "name", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoRadio.prototype, "id", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoRadio.prototype, "value", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoRadio.prototype, "size", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoRadio.prototype, "error", 2);
+__decorateClass([
+  n({ type: Boolean })
+], LuksoRadio.prototype, "checked", 2);
+__decorateClass([
+  n({ type: String, attribute: "custom-class" })
+], LuksoRadio.prototype, "customClass", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-readonly" })
+], LuksoRadio.prototype, "isReadonly", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-disabled" })
+], LuksoRadio.prototype, "isDisabled", 2);
+__decorateClass([
+  r()
+], LuksoRadio.prototype, "hasFocus", 2);
+__decorateClass([
+  r()
+], LuksoRadio.prototype, "hasHighlight", 2);
+LuksoRadio = __decorateClass([
+  t("lukso-radio")
+], LuksoRadio);
+
+export { LuksoRadio };

package/dist/components/lukso-radio/lukso-radio.stories.d.ts

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/web-components';
+/**  Documentation and examples of `lukso-radio` component.  */
+declare const meta: Meta;
+export default meta;
+export declare const DefaultInput: any;
+/** Example of checked radio.  */
+export declare const CheckedInput: any;
+/** Example of disabled radio.  */
+export declare const DisabledInput: any;
+/** Example of readonly radio.  */
+export declare const ReadonlyInput: any;
+/** Example of radio with error.  */
+export declare const ErrorInput: any;
+/** Example of small size radio.  */
+export declare const SmallSize: any;
+/** Example of x-small size radio.  */
+export declare const XSmallSize: any;
+/** Example of different sizes.  */
+export declare const Sizes: () => import('lit-html').TemplateResult<1>;
+/** Example of radio with profiles.  */
+export declare const WithProfiles: () => import('lit-html').TemplateResult<1>;
+/** Example of radio with custom content.  */
+export declare const WithCustomContent: () => import('lit-html').TemplateResult<1>;
+//# sourceMappingURL=lukso-radio.stories.d.ts.map

package/dist/components/lukso-radio/lukso-radio.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lukso-radio.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-radio/lukso-radio.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAqHX,CAAA;AAED,eAAe,IAAI,CAAA;AAqCnB,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,iCAAiC;AACjC,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,oCAAoC;AACpC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAK3C,oCAAoC;AACpC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAM1C,sCAAsC;AACtC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAM3C,mCAAmC;AACnC,eAAO,MAAM,KAAK,4CAuCjB,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,YAAY,4CAoCxB,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,iBAAiB,4CAwC7B,CAAA"}