@nectary/components 4.12.0 → 4.12.1

package/avatar/index.d.ts

@@ -1,7 +1,7 @@
 import { NectaryElement } from '../utils';
-import type { TSinchAvatarStatus } from './types';
+import type { TSinchAvatarStatus, TSinchAvatar } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
-export * from './types';
 export declare class Avatar extends NectaryElement {
     #private;
     constructor();
@@ -20,3 +20,23 @@ export declare class Avatar extends NectaryElement {
     get status(): TSinchAvatarStatus | null;
     set status(value: TSinchAvatarStatus | null);
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-avatar': TSinchAvatar;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-avatar': NectaryComponentVanilla<'sinch-avatar'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-avatar': NectaryComponentReact<'sinch-avatar'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-avatar': NectaryComponentReact<'sinch-avatar'>;
+        }
+    }
+}

package/avatar/index.js

@@ -1,11 +1,10 @@
-import { getAttribute, updateAttribute, getLiteralAttribute, updateLiteralAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { DEFAULT_SIZE, sizeValues } from "../utils/size.js";
-import { statusValues, getAvatarColorBg, getAvatarColorFg } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n  }\n\n  #wrapper {\n    position: relative;\n    width: var(--sinch-local-size);\n    height: var(--sinch-local-size);\n    border-radius: var(--sinch-comp-avatar-shape-radius);\n\n    --sinch-local-size: var(--sinch-comp-avatar-size-m);\n  }\n\n  :host([size="l"]) #wrapper {\n    --sinch-local-size: var(--sinch-comp-avatar-size-l);\n  }\n\n  :host([size="s"]) #wrapper {\n    --sinch-local-size: var(--sinch-comp-avatar-size-s);\n  }\n\n  #text {\n    display: block;\n    width: 100%;\n    height: 100%;\n    font: var(--sinch-comp-avatar-container-font-size-m-text);\n    line-height: calc(var(--sinch-local-size) - 2px);\n    text-transform: uppercase;\n    text-align: center;\n  }\n\n  :host([size="l"]) #text {\n    font: var(--sinch-comp-avatar-container-font-size-l-text);\n    line-height: calc(var(--sinch-local-size) - 2px);\n  }\n\n  :host([size="s"]) #text {\n    font: var(--sinch-comp-avatar-container-font-size-s-text);\n    line-height: calc(var(--sinch-local-size) - 2px);\n  }\n\n  #circle {\n    position: relative;\n    width: calc(100% - 2px);\n    height: calc(100% - 2px);\n    left: 1px;\n    top: 1px;\n    border-radius: 50%;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-mask: linear-gradient(#fff, #000);\n    mask: linear-gradient(#fff, #000);\n    background-color: var(--sinch-comp-avatar-container-color-default-background);\n    color: var(--sinch-comp-avatar-container-color-default-foreground);\n  }\n\n  #image {\n    display: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n\n  :host([src]:not([src=""])) #image {\n    display: block;\n  }\n\n  #person {\n    display: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    fill: var(--sinch-comp-avatar-container-color-default-foreground);\n  }\n\n  :host(:not([src]):is(:not([alt]), [alt=""])) #person {\n    display: block;\n  }\n\n  #status-wrapper {\n    position: absolute;\n    left: calc(85% - 5px);\n    top: calc(85% - 5px);\n    width: 10px;\n    height: 10px;\n    padding: 1px;\n    box-sizing: border-box;\n    border-radius: 50%;\n    background-color: var(--sinch-comp-avatar-status-color-border);\n    display: none;\n    pointer-events: none;\n  }\n\n  #status {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n  }\n\n  :host([status="online"]) #status-wrapper,\n  :host([status="away"]) #status-wrapper,\n  :host([status="busy"]) #status-wrapper,\n  :host([status="offline"]) #status-wrapper {\n    display: block;\n  }\n\n  :host([status="online"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-online-default-background);\n  }\n\n  :host([status="away"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-away-default-background);\n  }\n\n  :host([status="busy"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-busy-default-background);\n  }\n\n  :host([status="offline"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-offline-default-background);\n  }\n</style>\n\n<div id="wrapper">\n  <div id="circle">\n    <span id="text"></span>\n    <img id="image" alt="" />\n    <svg id="person" viewBox="0 0 40 40" fill="none">\n      <path\n        d="M29.451 15.785a9.451 9.451 0 1 1-18.902 0 9.452 9.452 0 0 1 18.902 0ZM4.734 40.5c.119-7.085 5.899-12.792 13.012-12.792h4.508c7.113 0 12.893 5.707 13.012 12.792H4.734Z" />\n    </svg>\n  </div>\n  <div id="status-wrapper">\n    <div id="status"></div>\n  </div>\n</div>';
-const template = document.createElement("template");
+import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);border-radius:var(--sinch-comp-avatar-shape-radius);--sinch-local-size:var(--sinch-comp-avatar-size-m)}:host([size="l"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-l)}:host([size="s"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-s)}#text{display:block;width:100%;height:100%;font:var(--sinch-comp-avatar-container-font-size-m-text);line-height:calc(var(--sinch-local-size) - 2px);text-transform:uppercase;text-align:center}:host([size="l"]) #text{font:var(--sinch-comp-avatar-container-font-size-l-text);line-height:calc(var(--sinch-local-size) - 2px)}:host([size="s"]) #text{font:var(--sinch-comp-avatar-container-font-size-s-text);line-height:calc(var(--sinch-local-size) - 2px)}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-comp-avatar-container-color-default-background);color:var(--sinch-comp-avatar-container-color-default-foreground)}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#person{display:none;position:absolute;left:0;top:0;width:100%;height:100%;fill:var(--sinch-comp-avatar-container-color-default-foreground)}:host(:not([src]):is(:not([alt]),[alt=""])) #person{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-comp-avatar-status-color-border);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-comp-avatar-status-color-online-default-background)}:host([status=away]) #status{background-color:var(--sinch-comp-avatar-status-color-away-default-background)}:host([status=busy]) #status{background-color:var(--sinch-comp-avatar-status-color-busy-default-background)}:host([status=offline]) #status{background-color:var(--sinch-comp-avatar-status-color-offline-default-background)}</style><div id="wrapper"><div id="circle"><span id="text"></span><img id="image" alt=""/><svg id="person" viewBox="0 0 40 40" fill="none"><path d="M29.451 15.785a9.451 9.451 0 1 1-18.902 0 9.452 9.452 0 0 1 18.902 0ZM4.734 40.5c.119-7.085 5.899-12.792 13.012-12.792h4.508c7.113 0 12.893 5.707 13.012 12.792H4.734Z"/></svg></div><div id="status-wrapper"><div id="status"></div></div></div>';
+import { getAvatarColorBg, getAvatarColorFg, statusValues } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Avatar extends NectaryElement {
+export class Avatar extends NectaryElement {
   #$circle;
   #$text;
   #$image;
@@ -13,9 +12,9 @@ class Avatar extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$circle = shadowRoot.querySelector("#circle");
-    this.#$text = shadowRoot.querySelector("#text");
-    this.#$image = shadowRoot.querySelector("#image");
+    this.#$circle = shadowRoot.querySelector('#circle');
+    this.#$text = shadowRoot.querySelector('#text');
+    this.#$image = shadowRoot.querySelector('#image');
   }
   connectedCallback() {
     super.connectedCallback();
@@ -25,54 +24,57 @@ class Avatar extends NectaryElement {
     super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ["alt", "src", "color"];
+    return ['alt', 'src', 'color'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case "alt": {
-        this.#$text.textContent = newVal;
-        this.#$image.alt = newVal ?? "";
-        break;
-      }
-      case "src": {
-        this.#$image.src = newVal ?? "";
-        break;
-      }
-      case "color": {
-        this.#updateColor();
-        break;
-      }
+      case 'alt':
+        {
+          this.#$text.textContent = newVal;
+          this.#$image.alt = newVal ?? '';
+          break;
+        }
+      case 'src':
+        {
+          this.#$image.src = newVal ?? '';
+          break;
+        }
+      case 'color':
+        {
+          this.#updateColor();
+          break;
+        }
     }
   }
   get src() {
-    return getAttribute(this, "src");
+    return getAttribute(this, 'src');
   }
   set src(value) {
-    updateAttribute(this, "src", value);
+    updateAttribute(this, 'src', value);
   }
   get alt() {
-    return getAttribute(this, "alt", "");
+    return getAttribute(this, 'alt', '');
   }
   set alt(value) {
-    updateAttribute(this, "alt", value);
+    updateAttribute(this, 'alt', value);
   }
   get color() {
-    return getAttribute(this, "color");
+    return getAttribute(this, 'color');
   }
   set color(value) {
-    updateAttribute(this, "color", value);
+    updateAttribute(this, 'color', value);
   }
   get size() {
-    return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
   }
   set size(value) {
-    updateLiteralAttribute(this, sizeValues, "size", value);
+    updateLiteralAttribute(this, sizeValues, 'size', value);
   }
   get status() {
-    return getLiteralAttribute(this, statusValues, "status", null);
+    return getLiteralAttribute(this, statusValues, 'status', null);
   }
   set status(value) {
-    updateLiteralAttribute(this, statusValues, "status", value);
+    updateLiteralAttribute(this, statusValues, 'status', value);
   }
   #updateColor() {
     if (!this.isDomConnected) {
@@ -82,15 +84,12 @@ class Avatar extends NectaryElement {
     if (colorName !== null && colorName.length > 0) {
       const bg = getAvatarColorBg(colorName);
       const fg = getAvatarColorFg(colorName);
-      this.#$circle.style.setProperty("background-color", bg);
-      this.#$circle.style.setProperty("color", fg);
+      this.#$circle.style.setProperty('background-color', bg);
+      this.#$circle.style.setProperty('color', fg);
     } else {
-      this.#$circle.style.removeProperty("background-color");
-      this.#$circle.style.removeProperty("color");
+      this.#$circle.style.removeProperty('background-color');
+      this.#$circle.style.removeProperty('color');
     }
   }
 }
-defineCustomElement("sinch-avatar", Avatar);
-export {
-  Avatar
-};
+defineCustomElement('sinch-avatar', Avatar);

package/avatar/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchAvatarColor } from './colors';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type { TSinchAvatarColor };
 export type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
@@ -56,23 +56,3 @@ export type TSinchAvatar = {
 };
 export type TSinchAvatarElement = NectaryComponentVanillaByType<TSinchAvatar>;
 export type TSinchAvatarReact = NectaryComponentReactByType<TSinchAvatar>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-avatar': TSinchAvatar;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-avatar': NectaryComponentVanilla<'sinch-avatar'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-avatar': NectaryComponentReact<'sinch-avatar'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-avatar': NectaryComponentReact<'sinch-avatar'>;
-        }
-    }
-}

package/avatar/types.js

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

package/avatar/utils.js

@@ -1,12 +1,7 @@
-const statusValues = ["online", "busy", "away", "offline"];
-const getAvatarColorBg = (id) => {
+export const statusValues = ['online', 'busy', 'away', 'offline'];
+export const getAvatarColorBg = id => {
   return `var(--sinch-comp-avatar-container-color-${id}-background)`;
 };
-const getAvatarColorFg = (id) => {
+export const getAvatarColorFg = id => {
   return `var(--sinch-comp-avatar-container-color-${id}-foreground)`;
-};
-export {
-  getAvatarColorBg,
-  getAvatarColorFg,
-  statusValues
-};
+};

package/badge/index.d.ts

@@ -1,8 +1,7 @@
 import { NectaryElement } from '../utils';
-import type { TSinchBadgeMode } from './types';
-import type { TRect } from '../types';
+import type { TSinchBadgeMode, TSinchBadge } from './types';
+import type { TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
-export * from './types';
 export declare class Badge extends NectaryElement {
     #private;
     constructor();
@@ -20,3 +19,23 @@ export declare class Badge extends NectaryElement {
     set hidden(isHidden: boolean);
     get badgeRect(): TRect;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-badge': TSinchBadge;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-badge': NectaryComponentVanilla<'sinch-badge'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-badge': NectaryComponentReact<'sinch-badge'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-badge': NectaryComponentReact<'sinch-badge'>;
+        }
+    }
+}

package/badge/index.js

@@ -1,12 +1,10 @@
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, setClass, getAttribute, updateAttribute, getLiteralAttribute, updateLiteralAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getRect } from "../utils/rect.js";
-import { DEFAULT_SIZE, sizeValues } from "../utils/size.js";
-import { modeValues } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n}\n\n#badge-wrapper {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: fit-content;\n  border-radius: var(--sinch-comp-badge-shape-radius);\n  padding: 1px;\n  pointer-events: none;\n  background-color: var(--sinch-comp-badge-color-border);\n}\n\n#badge {\n  box-sizing: border-box;\n  color: var(--sinch-comp-badge-color-text);\n  background-color: var(--sinch-comp-badge-color-background);\n  width: 20px;\n  height: 20px;\n  border-radius: var(--sinch-comp-badge-shape-radius);\n}\n\n#badge.long {\n  width: fit-content;\n  padding: 0 5px;\n}\n\n#text {\n  display: block;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  font: var(--sinch-comp-badge-font-size-l);\n  line-height: 20px;\n  text-rendering: optimizelegibility;\n}\n\n:host([size="m"]) #badge-wrapper {\n  left: calc(100% - 8px);\n  top: -8px;\n}\n\n:host([size="m"]) #badge {\n  width: 14px;\n  height: 14px;\n}\n\n:host([size="m"]) #badge.long {\n  width: fit-content;\n  padding: 0 3px;\n}\n\n:host([size="m"]) #text {\n  font: var(--sinch-comp-badge-font-size-m);\n  line-height: 14px;\n}\n\n:host([size="s"]) #badge {\n  width: 8px;\n  height: 8px;\n  padding: 0;\n}\n\n:host([size="s"]) #text {\n  display: none;\n}\n\n:host([hidden]) #badge-wrapper {\n  display: none;\n}\n</style>\n\n<slot id="slot"></slot>\n<div id="badge-wrapper">\n  <div id="badge">\n    <span id="text"></span>\n  </div>\n</div>\n';
-const template = document.createElement("template");
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-flex;flex-direction:column;position:relative}#badge-wrapper{position:absolute;left:0;top:0;width:fit-content;border-radius:var(--sinch-comp-badge-shape-radius);padding:1px;pointer-events:none;background-color:var(--sinch-comp-badge-color-border)}#badge{box-sizing:border-box;color:var(--sinch-comp-badge-color-text);background-color:var(--sinch-comp-badge-color-background);width:20px;height:20px;border-radius:var(--sinch-comp-badge-shape-radius)}#badge.long{width:fit-content;padding:0 5px}#text{display:block;width:100%;height:100%;text-align:center;font:var(--sinch-comp-badge-font-size-l);line-height:20px;text-rendering:optimizelegibility}:host([size="m"]) #badge-wrapper{left:calc(100% - 8px);top:-8px}:host([size="m"]) #badge{width:14px;height:14px}:host([size="m"]) #badge.long{width:fit-content;padding:0 3px}:host([size="m"]) #text{font:var(--sinch-comp-badge-font-size-m);line-height:14px}:host([size="s"]) #badge{width:8px;height:8px;padding:0}:host([size="s"]) #text{display:none}:host([hidden]) #badge-wrapper{display:none}</style><slot id="slot"></slot><div id="badge-wrapper"><div id="badge"><span id="text"></span></div></div>';
+import { modeValues } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Badge extends NectaryElement {
+export class Badge extends NectaryElement {
   #$badgeWrapper;
   #$badge;
   #$text;
@@ -15,9 +13,9 @@ class Badge extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$badgeWrapper = shadowRoot.querySelector("#badge-wrapper");
-    this.#$badge = shadowRoot.querySelector("#badge");
-    this.#$text = shadowRoot.querySelector("#text");
+    this.#$badgeWrapper = shadowRoot.querySelector('#badge-wrapper');
+    this.#$badge = shadowRoot.querySelector('#badge');
+    this.#$text = shadowRoot.querySelector('#text');
     this.#observer = new ResizeObserver(this.#onResize);
   }
   connectedCallback() {
@@ -29,66 +27,70 @@ class Badge extends NectaryElement {
     this.#observer.unobserve(this);
   }
   static get observedAttributes() {
-    return [
-      "text",
-      "size",
-      "mode",
-      "hidden"
-    ];
+    return ['text', 'size', 'mode', 'hidden'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "text": {
-        this.#$text.textContent = newVal;
-        setClass(this.#$badge, "long", newVal !== null && newVal.length > 1);
-        break;
-      }
-      case "size": {
-        this.#updatePosition();
-        break;
-      }
-      case "mode": {
-        this.#updatePosition();
-        break;
-      }
-      case "hidden": {
-        this.#updatePosition();
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
-        break;
-      }
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          setClass(this.#$badge, 'long', newVal !== null && newVal.length > 1);
+          break;
+        }
+      case 'size':
+        {
+          this.#updatePosition();
+          break;
+        }
+      case 'mode':
+        {
+          this.#updatePosition();
+          break;
+        }
+      case 'hidden':
+        {
+          this.#updatePosition();
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
     }
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get size() {
-    return getLiteralAttribute(this, sizeValues, "size", DEFAULT_SIZE);
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
   }
   set size(value) {
-    updateLiteralAttribute(this, sizeValues, "size", value);
+    updateLiteralAttribute(this, sizeValues, 'size', value);
   }
   get mode() {
-    return getLiteralAttribute(this, modeValues, "mode", "square");
+    return getLiteralAttribute(this, modeValues, 'mode', 'square');
   }
   set mode(value) {
-    updateLiteralAttribute(this, modeValues, "mode", value);
+    updateLiteralAttribute(this, modeValues, 'mode', value);
   }
   get hidden() {
-    return getBooleanAttribute(this, "hidden");
+    return getBooleanAttribute(this, 'hidden');
   }
   set hidden(isHidden) {
-    updateBooleanAttribute(this, "hidden", isHidden);
+    updateBooleanAttribute(this, 'hidden', isHidden);
   }
   get badgeRect() {
     if (this.hidden) {
       const selfRect = getRect(this);
-      return { x: selfRect.x + selfRect.width, y: selfRect.y, width: 0, height: 0 };
+      return {
+        x: selfRect.x + selfRect.width,
+        y: selfRect.y,
+        width: 0,
+        height: 0
+      };
     }
     return getRect(this.#$badgeWrapper);
   }
@@ -99,18 +101,15 @@ class Badge extends NectaryElement {
     const mode = this.mode;
     const targetRect = this.getBoundingClientRect();
     const badgeRect = this.#$badgeWrapper.getBoundingClientRect();
-    const offsetMultX = mode === "circle" ? 0.85 : 1;
-    const offsetMultY = mode === "circle" ? 0.15 : 0;
+    const offsetMultX = mode === 'circle' ? 0.85 : 1;
+    const offsetMultY = mode === 'circle' ? 0.15 : 0;
     const posX = Math.round(targetRect.width * offsetMultX - badgeRect.height / 2);
     const posY = Math.round(targetRect.height * offsetMultY - badgeRect.height / 2);
-    this.#$badgeWrapper.style.setProperty("left", `${posX}px`);
-    this.#$badgeWrapper.style.setProperty("top", `${posY}px`);
+    this.#$badgeWrapper.style.setProperty('left', `${posX}px`);
+    this.#$badgeWrapper.style.setProperty('top', `${posY}px`);
   }
   #onResize = () => {
     this.#updatePosition();
   };
 }
-defineCustomElement("sinch-badge", Badge);
-export {
-  Badge
-};
+defineCustomElement('sinch-badge', Badge);

package/badge/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchBadgeMode = 'square' | 'circle';
 export type TSinchBadgeProps = {
@@ -27,23 +27,3 @@ export type TSinchBadge = {
 };
 export type TSinchBadgeElement = NectaryComponentVanillaByType<TSinchBadge>;
 export type TSinchBadgeReact = NectaryComponentReactByType<TSinchBadge>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-badge': TSinchBadge;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-badge': NectaryComponentVanilla<'sinch-badge'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-badge': NectaryComponentReact<'sinch-badge'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-badge': NectaryComponentReact<'sinch-badge'>;
-        }
-    }
-}

package/badge/types.js

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

package/badge/utils.js

@@ -1,4 +1 @@
-const modeValues = ["square", "circle"];
-export {
-  modeValues
-};
+export const modeValues = ['square', 'circle'];

package/button/index.d.ts

@@ -1,7 +1,7 @@
 import { NectaryElement } from '../utils';
-import type { TSinchButtonType, TSinchButtonFormType } from './types';
+import type { TSinchButtonType, TSinchButton, TSinchButtonFormType } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSizeEx } from '../utils/size';
-export * from './types';
 export declare class Button extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -24,3 +24,23 @@ export declare class Button extends NectaryElement {
     set formType(value: TSinchButtonFormType);
     get formType(): TSinchButtonFormType;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-button': TSinchButton;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button': NectaryComponentVanilla<'sinch-button'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button': NectaryComponentReact<'sinch-button'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-button': NectaryComponentReact<'sinch-button'>;
+        }
+    }
+}