@nectary/components 4.12.1 → 5.0.0

package/date-picker/utils.js

@@ -1,11 +1,9 @@
 const DAYS_IN_WEEK = 7;
-const pad = value => {
-  return value.toString().padStart(2, '0');
+const pad = (value) => {
+  return value.toString().padStart(2, "0");
 };
-export const getCalendarMonth = (date, options) => {
-  const {
-    firstDayOfWeek
-  } = {
+const getCalendarMonth = (date, options) => {
+  const { firstDayOfWeek } = {
     firstDayOfWeek: 1,
     ...options
   };
@@ -33,110 +31,129 @@ export const getCalendarMonth = (date, options) => {
   }
   return month;
 };
-export const dateToIso = date => {
+const dateToIso = (date) => {
   return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
 };
-export const isoToDate = value => {
-  return new Date(`${value.substring(0, 10)}T00:00:00Z`);
+const isoToDate = (value) => {
+  return /* @__PURE__ */ new Date(`${value.substring(0, 10)}T00:00:00Z`);
 };
-export const today = () => {
-  const today = new Date();
-  return new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()));
+const today = () => {
+  const today2 = /* @__PURE__ */ new Date();
+  return new Date(Date.UTC(today2.getUTCFullYear(), today2.getUTCMonth(), today2.getUTCDate()));
 };
-export const getDayNames = locale => {
-  const formatter = new Intl.DateTimeFormat(locale, {
-    weekday: 'narrow',
-    timeZone: 'UTC'
-  });
-  return [1, 2, 3, 4, 5, 6, 7].map(dd => {
+const getDayNames = (locale) => {
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: "narrow", timeZone: "UTC" });
+  return [1, 2, 3, 4, 5, 6, 7].map((dd) => {
     const date = new Date(Date.UTC(2018, 0, dd));
     return formatter.format(date);
   });
 };
-export const getMonthNames = locale => {
-  const formatter = new Intl.DateTimeFormat(locale, {
-    month: 'short',
-    timeZone: 'UTC'
-  });
-  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(mm => {
+const getMonthNames = (locale) => {
+  const formatter = new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" });
+  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((mm) => {
     const date = new Date(Date.UTC(2018, mm, 1));
     return formatter.format(date);
   });
 };
-export const isValidDate = value => {
+const isValidDate = (value) => {
   return value instanceof Date && !isNaN(value);
 };
-export const compareDates = (a, b) => {
+const compareDates = (a, b) => {
   return a.getTime() - b.getTime();
 };
-export const clampMinDate = (date, min) => {
+const clampMinDate = (date, min) => {
   if (compareDates(min, date) > 0) {
     date.setTime(min.getTime());
   }
 };
-export const clampMaxDate = (date, max) => {
+const clampMaxDate = (date, max) => {
   if (compareDates(date, max) > 0) {
     date.setTime(max.getTime());
   }
 };
-export const incMonth = (date, max) => {
+const incMonth = (date, max) => {
   date.setUTCMonth(date.getUTCMonth() + 1);
   clampMaxDate(date, max);
 };
-export const decMonth = (date, min) => {
+const decMonth = (date, min) => {
   date.setUTCMonth(date.getUTCMonth() - 1);
   clampMinDate(date, min);
 };
-export const incYear = (date, max) => {
+const incYear = (date, max) => {
   date.setUTCFullYear(date.getUTCFullYear() + 1);
   clampMaxDate(date, max);
 };
-export const decYear = (date, min) => {
+const decYear = (date, min) => {
   date.setUTCFullYear(date.getUTCFullYear() - 1);
   clampMinDate(date, min);
 };
-export const canGoPrevMonth = (date, min) => {
+const canGoPrevMonth = (date, min) => {
   const prevMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 0));
   return compareDates(prevMonth, min) >= 0;
 };
-export const canGoNextMonth = (date, max) => {
+const canGoNextMonth = (date, max) => {
   const nextMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));
   return compareDates(max, nextMonth) >= 0;
 };
-export const canGoNextYear = (date, max) => {
+const canGoNextYear = (date, max) => {
   const nextYear = new Date(Date.UTC(date.getUTCFullYear() + 1, 0, 1));
   return compareDates(max, nextYear) >= 0;
 };
-export const canGoPrevYear = (date, min) => {
+const canGoPrevYear = (date, min) => {
   const prevYear = new Date(Date.UTC(date.getUTCFullYear(), 0, 0));
   return compareDates(prevYear, min) >= 0;
 };
-export const isDateBetween = (date, min, max) => {
+const isDateBetween = (date, min, max) => {
   if (min === null || max === null) {
     return false;
   }
   return compareDates(date, min) >= 0 && compareDates(max, date) >= 0;
 };
-export const areDatesEqual = (a, b) => {
+const areDatesEqual = (a, b) => {
   if (b === null) {
     return false;
   }
   return compareDates(a, b) === 0;
 };
-export const cloneDate = date => {
+const cloneDate = (date) => {
   return new Date(date.getTime());
 };
-export const sortDates = dateTuple => {
+const sortDates = (dateTuple) => {
   if (compareDates(dateTuple[0], dateTuple[1]) > 0) {
     return [dateTuple[1], dateTuple[0]];
   }
   return dateTuple;
 };
-export const isDateOnScreen = (uiDate, date) => {
+const isDateOnScreen = (uiDate, date) => {
   if (uiDate === null || date === null) {
     return false;
   }
   const firstDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth(), 1));
   const lastDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth() + 1, 0));
   return isDateBetween(date, firstDateOfMonth, lastDateOfMonth);
-};
+};
+export {
+  areDatesEqual,
+  canGoNextMonth,
+  canGoNextYear,
+  canGoPrevMonth,
+  canGoPrevYear,
+  clampMaxDate,
+  clampMinDate,
+  cloneDate,
+  compareDates,
+  dateToIso,
+  decMonth,
+  decYear,
+  getCalendarMonth,
+  getDayNames,
+  getMonthNames,
+  incMonth,
+  incYear,
+  isDateBetween,
+  isDateOnScreen,
+  isValidDate,
+  isoToDate,
+  sortDates,
+  today
+};

package/dialog/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/dialog/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-dialog");

package/dialog/index.d.ts

@@ -2,8 +2,7 @@ import '../icon';
 import '../stop-events';
 import '../title';
 import { NectaryElement } from '../utils';
-import type { TSinchDialog } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Dialog extends NectaryElement {
     #private;
     constructor();
@@ -18,23 +17,3 @@ export declare class Dialog extends NectaryElement {
     get dialogRect(): import("../types").TRect;
     get closeButtonRect(): import("../types").TRect;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-dialog': TSinchDialog;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-dialog': NectaryComponentVanilla<'sinch-dialog'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
-        }
-    }
-}

package/dialog/index.js

@@ -1,12 +1,16 @@
-import '../icon';
-import '../stop-events';
-import '../title';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
-import { disableScroll, enableScroll } from './utils';
-const template = document.createElement('template');
+import "../icon/index.js";
+import "../stop-events/index.js";
+import "../title/index.js";
+import { isAttrEqual, updateAttribute, updateBooleanAttribute, getAttribute, getBooleanAttribute, setClass, isAttrTrue } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getRect } from "../utils/rect.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { isTargetEqual } from "../utils/event-target.js";
+import { disableScroll, enableScroll } from "./utils.js";
+const templateHTML = '<style>\n  :host {\n    display: contents;\n\n    --sinch-comp-dialog-max-width: 512px;\n    --sinch-comp-dialog-max-height: 90vh;\n    --sinch-comp-dialog-width: fit-content;\n    --sinch-dialog-close-button-display: unset;\n  }\n\n  #dialog {\n    position: fixed;\n    left: 0;\n    right: 0;\n    margin: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 24px 0;\n    width: var(--sinch-comp-dialog-width);\n    max-width: var(--sinch-comp-dialog-max-width);\n    max-height: var(--sinch-comp-dialog-max-height);\n    border-radius: var(--sinch-comp-dialog-shape-radius);\n    box-sizing: border-box;\n    contain: content;\n    background-color: var(--sinch-comp-dialog-color-default-background-initial);\n    border: none;\n    box-shadow: var(--sinch-comp-dialog-shadow);\n    outline: none;\n  }\n\n  #dialog:not([open]) {\n    display: none;\n  }\n\n  dialog::backdrop {\n    background-color: black;\n    opacity: 0.55;\n  }\n\n  #header {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    margin-bottom: 12px;\n    padding: 0 24px;\n    gap: 8px;\n\n    --sinch-global-size-icon: 24px;\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-dialog-color-default-icon-initial\n      );\n  }\n\n  #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-dialog-color-default-title-initial\n      );\n    --sinch-comp-title-font: var(--sinch-comp-dialog-font-title);\n  }\n\n  #content {\n    min-height: 0;\n    overflow: auto;\n    padding: 4px 24px;\n  }\n\n  #action {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    gap: 16px;\n    margin-top: 20px;\n    padding: 0 24px;\n  }\n\n  #action.empty {\n    display: none;\n  }\n\n  #close {\n    display: var(--sinch-dialog-close-button-display, initial);\n    position: relative;\n    left: 4px;\n    top: -4px;\n    margin-left: auto;\n  }\n</style>\n\n<dialog id="dialog">\n  <div id="header">\n    <slot id="icon" name="icon"></slot>\n    <sinch-title id="caption" type="m" level="3"></sinch-title>\n    <sinch-button id="close" size="s">\n      <sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon>\n    </sinch-button>\n  </div>\n  <div id="content">\n    <sinch-stop-events events="close">\n      <slot name="content"></slot>\n    </sinch-stop-events>\n  </div>\n  <div id="action">\n    <sinch-stop-events events="close">\n      <slot name="buttons"></slot>\n    </sinch-stop-events>\n  </div>\n</dialog>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Dialog extends NectaryElement {
+class Dialog extends NectaryElement {
   #$dialog;
   #$closeButton;
   #$caption;
@@ -17,10 +21,10 @@ export class Dialog extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$dialog = shadowRoot.querySelector('#dialog');
-    this.#$closeButton = shadowRoot.querySelector('#close');
-    this.#$caption = shadowRoot.querySelector('#caption');
-    this.#$actionWrapper = shadowRoot.querySelector('#action');
+    this.#$dialog = shadowRoot.querySelector("#dialog");
+    this.#$closeButton = shadowRoot.querySelector("#close");
+    this.#$caption = shadowRoot.querySelector("#caption");
+    this.#$actionWrapper = shadowRoot.querySelector("#action");
     this.#$actionSlot = shadowRoot.querySelector('slot[name="buttons"]');
   }
   connectedCallback() {
@@ -29,12 +33,20 @@ export class Dialog extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute('role', 'dialog');
-    this.#$closeButton.addEventListener('click', this.#onCloseClick, options);
-    this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, options);
-    this.#$dialog.addEventListener('cancel', this.#onCancel, options);
-    this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange, options);
-    this.addEventListener('-close', this.#onCloseReactHandler, options);
+    this.setAttribute("role", "dialog");
+    this.#$closeButton.addEventListener("click", this.#onCloseClick, options);
+    this.#$dialog.addEventListener(
+      "mousedown",
+      this.#onBackdropMouseDown,
+      options
+    );
+    this.#$dialog.addEventListener("cancel", this.#onCancel, options);
+    this.#$actionSlot.addEventListener(
+      "slotchange",
+      this.#onActionSlotChange,
+      options
+    );
+    this.addEventListener("-close", this.#onCloseReactHandler, options);
     this.#onActionSlotChange();
     if (this.open) {
       this.#onExpand();
@@ -47,49 +59,46 @@ export class Dialog extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['caption', 'open', 'close-aria-label'];
+    return ["caption", "open", "close-aria-label"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case 'caption':
-        {
-          updateAttribute(this.#$caption, 'text', newVal);
-          break;
-        }
-      case 'open':
-        {
-          const shouldOpen = isAttrTrue(newVal);
-          if (shouldOpen) {
-            requestAnimationFrame(() => {
-              this.#onExpand();
-            });
-          } else {
-            this.#onCollapse();
-          }
-          updateBooleanAttribute(this, 'open', shouldOpen);
-          break;
-        }
-      case 'close-aria-label':
-        {
-          updateAttribute(this.#$closeButton, 'aria-label', newVal);
-          break;
+      case "caption": {
+        updateAttribute(this.#$caption, "text", newVal);
+        break;
+      }
+      case "open": {
+        const shouldOpen = isAttrTrue(newVal);
+        if (shouldOpen) {
+          requestAnimationFrame(() => {
+            this.#onExpand();
+          });
+        } else {
+          this.#onCollapse();
         }
+        updateBooleanAttribute(this, "open", shouldOpen);
+        break;
+      }
+      case "close-aria-label": {
+        updateAttribute(this.#$closeButton, "aria-label", newVal);
+        break;
+      }
     }
   }
   set caption(caption) {
-    updateAttribute(this, 'caption', caption);
+    updateAttribute(this, "caption", caption);
   }
   get caption() {
-    return getAttribute(this, 'caption', '');
+    return getAttribute(this, "caption", "");
   }
   set open(isOpen) {
-    updateBooleanAttribute(this, 'open', isOpen);
+    updateBooleanAttribute(this, "open", isOpen);
   }
   get open() {
-    return getBooleanAttribute(this, 'open');
+    return getBooleanAttribute(this, "open");
   }
   get dialogRect() {
     return getRect(this.#$dialog);
@@ -97,36 +106,33 @@ export class Dialog extends NectaryElement {
   get closeButtonRect() {
     return getRect(this.#$closeButton);
   }
-  #onCancel = e => {
+  #onCancel = (e) => {
     if (e.cancelable) {
       e.preventDefault();
     } else {
       this.#onCollapse();
     }
     e.stopPropagation();
-    this.#dispatchCloseEvent('escape', e.cancelable);
+    this.#dispatchCloseEvent("escape", e.cancelable);
   };
   #onCloseClick = () => {
-    this.#dispatchCloseEvent('close', true);
+    this.#dispatchCloseEvent("close", true);
   };
-  #onBackdropMouseDown = e => {
+  #onBackdropMouseDown = (e) => {
     if (isTargetEqual(e, this.#$dialog)) {
       const rect = this.dialogRect;
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
       if (!isInside) {
         e.stopPropagation();
-        this.#dispatchCloseEvent('backdrop', e.cancelable);
+        this.#dispatchCloseEvent("backdrop", e.cancelable);
       }
     }
   };
-  #onCloseReactHandler = e => {
-    getReactEventHandler(this, 'on-close')?.(e);
+  #onCloseReactHandler = (e) => {
+    getReactEventHandler(this, "on-close")?.(e);
   };
   #dispatchCloseEvent(detail, cancelable) {
-    this.dispatchEvent(new CustomEvent('-close', {
-      detail,
-      cancelable
-    }));
+    this.dispatchEvent(new CustomEvent("-close", { detail, cancelable }));
   }
   #onExpand() {
     if (!this.isDomConnected || this.#$dialog.open || !this.open) {
@@ -143,7 +149,14 @@ export class Dialog extends NectaryElement {
     enableScroll();
   }
   #onActionSlotChange = () => {
-    setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
+    setClass(
+      this.#$actionWrapper,
+      "empty",
+      this.#$actionSlot.assignedElements().length === 0
+    );
   };
 }
-defineCustomElement('sinch-dialog', Dialog);
+defineCustomElement("sinch-dialog", Dialog);
+export {
+  Dialog
+};

package/dialog/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchDialogCloseDetail = 'close' | 'escape' | 'backdrop';
 export type TSinchDialogProps = {
     /** Controls whether the dialog should be open */
@@ -39,3 +39,23 @@ export type TSinchDialog = {
 };
 export type TSinchDialogElement = NectaryComponentVanillaByType<TSinchDialog>;
 export type TSinchDialogReact = NectaryComponentReactByType<TSinchDialog>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-dialog': TSinchDialog;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dialog': NectaryComponentVanilla<'sinch-dialog'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
+        }
+    }
+}

package/dialog/types.js

@@ -1 +1 @@
-export {};
+

package/dialog/utils.js

@@ -1,18 +1,22 @@
 const bodyEl = document.body;
-export const disableScroll = () => {
+const disableScroll = () => {
   bodyEl.__dialog_counter__ = (bodyEl.__dialog_counter__ ?? 0) + 1;
   if (bodyEl.__dialog_counter__ === 1) {
     const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
-    bodyEl.style.overflow = 'hidden';
+    bodyEl.style.overflow = "hidden";
     if (scrollWidth > 0) {
-      bodyEl.style.setProperty('padding-right', `${scrollWidth}px`);
+      bodyEl.style.setProperty("padding-right", `${scrollWidth}px`);
     }
   }
 };
-export const enableScroll = () => {
+const enableScroll = () => {
   bodyEl.__dialog_counter__ = Math.max(0, (bodyEl.__dialog_counter__ ?? 0) - 1);
   if (bodyEl.__dialog_counter__ === 0) {
-    bodyEl.style.overflow = '';
-    bodyEl.style.removeProperty('padding-right');
+    bodyEl.style.overflow = "";
+    bodyEl.style.removeProperty("padding-right");
   }
-};
+};
+export {
+  disableScroll,
+  enableScroll
+};

package/emoji/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/emoji/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-emoji");

package/emoji/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchEmoji } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Emoji extends NectaryElement {
     #private;
     constructor();
@@ -11,23 +10,3 @@ export declare class Emoji extends NectaryElement {
     set char(value: string);
     get char(): string;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-emoji': TSinchEmoji;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-emoji': NectaryComponentVanilla<'sinch-emoji'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-emoji': NectaryComponentReact<'sinch-emoji'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-emoji': NectaryComponentReact<'sinch-emoji'>;
-        }
-    }
-}

package/emoji/index.js

@@ -1,15 +1,16 @@
-import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-comp-emoji-vertical-align:initial}#image{vertical-align:var(--sinch-comp-emoji-vertical-align);pointer-events:none;width:var(--sinch-global-size-icon,48px);height:var(--sinch-global-size-icon,48px)}</style><img id="image" src="" alt="" loading="lazy"/>';
-import { getEmojiBaseUrl, getEmojiUrl } from './utils';
-const template = document.createElement('template');
+import { updateAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getEmojiUrl, getEmojiBaseUrl } from "./utils.js";
+const templateHTML = '<style>\n:host {\n  display: contents;\n\n  --sinch-comp-emoji-vertical-align: initial;\n}\n\n#image {\n  vertical-align: var(--sinch-comp-emoji-vertical-align);\n  pointer-events: none;\n  width: var(--sinch-global-size-icon, 48px);\n  height: var(--sinch-global-size-icon, 48px);\n}\n</style>\n\n<img id="image" src="" alt="" loading="lazy"/>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Emoji extends NectaryElement {
+class Emoji extends NectaryElement {
   #$img;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$img = shadowRoot.querySelector('#image');
+    this.#$img = shadowRoot.querySelector("#image");
   }
   connectedCallback() {
     super.connectedCallback();
@@ -19,23 +20,22 @@ export class Emoji extends NectaryElement {
     super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ['char'];
+    return ["char"];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'char':
-        {
-          this.#$img.alt = newVal ?? '';
-          this.#updateChar();
-          break;
-        }
+      case "char": {
+        this.#$img.alt = newVal ?? "";
+        this.#updateChar();
+        break;
+      }
     }
   }
   set char(value) {
-    updateAttribute(this, 'char', value);
+    updateAttribute(this, "char", value);
   }
   get char() {
-    return getAttribute(this, 'char', '');
+    return getAttribute(this, "char", "");
   }
   #updateChar() {
     if (!this.isDomConnected) {
@@ -44,4 +44,7 @@ export class Emoji extends NectaryElement {
     this.#$img.src = getEmojiUrl(getEmojiBaseUrl(this), this.char);
   }
 }
-defineCustomElement('sinch-emoji', Emoji);
+defineCustomElement("sinch-emoji", Emoji);
+export {
+  Emoji
+};

package/emoji/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchEmojiProps = {
     /** Emoji character */
     char: string;
@@ -13,3 +13,23 @@ export type TSinchEmoji = {
 };
 export type TSinchEmojiElement = NectaryComponentVanillaByType<TSinchEmoji>;
 export type TSinchEmojiReact = NectaryComponentReactByType<TSinchEmoji>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-emoji': TSinchEmoji;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-emoji': NectaryComponentVanilla<'sinch-emoji'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-emoji': NectaryComponentReact<'sinch-emoji'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-emoji': NectaryComponentReact<'sinch-emoji'>;
+        }
+    }
+}

package/emoji/types.js

@@ -1 +1 @@
-export {};
+