@nectary/components 4.12.1 → 5.0.0

package/alert/utils.js

@@ -1 +1,4 @@
-export const typeValues = ['info', 'warn', 'error'];
+const typeValues = ["info", "warn", "error"];
+export {
+  typeValues
+};

package/avatar/colors.js

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

package/avatar/global/index.d.ts

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

package/avatar/global/index.js

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

package/avatar/index.d.ts

@@ -1,7 +1,7 @@
 import { NectaryElement } from '../utils';
-import type { TSinchAvatarStatus, TSinchAvatar } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchAvatarStatus } from './types';
 import type { TSinchSize } from '../utils/size';
+export * from './types';
 export declare class Avatar extends NectaryElement {
     #private;
     constructor();
@@ -20,23 +20,3 @@ 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,10 +1,11 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class Avatar extends NectaryElement {
+class Avatar extends NectaryElement {
   #$circle;
   #$text;
   #$image;
@@ -12,9 +13,9 @@ export 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();
@@ -24,57 +25,54 @@ export 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) {
@@ -84,12 +82,15 @@ export 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);
+defineCustomElement("sinch-avatar", Avatar);
+export {
+  Avatar
+};

package/avatar/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchAvatarColor } from './colors';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type { TSinchAvatarColor };
 export type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
@@ -56,3 +56,23 @@ 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,7 +1,12 @@
-export const statusValues = ['online', 'busy', 'away', 'offline'];
-export const getAvatarColorBg = id => {
+const statusValues = ["online", "busy", "away", "offline"];
+const getAvatarColorBg = (id) => {
   return `var(--sinch-comp-avatar-container-color-${id}-background)`;
 };
-export const getAvatarColorFg = id => {
+const getAvatarColorFg = (id) => {
   return `var(--sinch-comp-avatar-container-color-${id}-foreground)`;
-};
+};
+export {
+  getAvatarColorBg,
+  getAvatarColorFg,
+  statusValues
+};

package/badge/global/index.d.ts

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

package/badge/global/index.js

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

package/badge/index.d.ts

@@ -1,7 +1,8 @@
 import { NectaryElement } from '../utils';
-import type { TSinchBadgeMode, TSinchBadge } from './types';
-import type { TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchBadgeMode } from './types';
+import type { TRect } from '../types';
 import type { TSinchSize } from '../utils/size';
+export * from './types';
 export declare class Badge extends NectaryElement {
     #private;
     constructor();
@@ -19,23 +20,3 @@ 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,10 +1,12 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class Badge extends NectaryElement {
+class Badge extends NectaryElement {
   #$badgeWrapper;
   #$badge;
   #$text;
@@ -13,9 +15,9 @@ export 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() {
@@ -27,70 +29,66 @@ export 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);
   }
@@ -101,15 +99,18 @@ export 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);
+defineCustomElement("sinch-badge", Badge);
+export {
+  Badge
+};

package/badge/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchBadgeMode = 'square' | 'circle';
 export type TSinchBadgeProps = {
@@ -27,3 +27,23 @@ 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 +1,4 @@
-export const modeValues = ['square', 'circle'];
+const modeValues = ["square", "circle"];
+export {
+  modeValues
+};

package/bundle.d.ts

@@ -0,0 +1,78 @@
+export * from './accordion-item/index.js';
+export * from './accordion/index.js';
+export * from './action-menu-option/index.js';
+export * from './action-menu/index.js';
+export * from './alert/index.js';
+export * from './avatar/index.js';
+export * from './badge/index.js';
+export * from './button-group-item/index.js';
+export * from './button-group/index.js';
+export * from './button/index.js';
+export * from './card-container/index.js';
+export * from './card-v2-title/index.js';
+export * from './card-v2/index.js';
+export * from './checkbox/index.js';
+export * from './chip/index.js';
+export * from './code-tag/index.js';
+export * from './color-menu-option/index.js';
+export * from './color-menu/index.js';
+export * from './color-swatch/index.js';
+export * from './date-picker/index.js';
+export * from './dialog/index.js';
+export * from './emoji-picker/index.js';
+export * from './emoji/index.js';
+export * from './field/index.js';
+export * from './file-drop/index.js';
+export * from './file-picker/index.js';
+export * from './file-status/index.js';
+export * from './flag/index.js';
+export * from './grid-item/index.js';
+export * from './grid/index.js';
+export * from './help-tooltip/index.js';
+export * from './icon/index.js';
+export * from './inline-alert/index.js';
+export * from './input/index.js';
+export * from './link/index.js';
+export * from './list-item/index.js';
+export * from './list/index.js';
+export * from './pagination/index.js';
+export * from './persistent-overlay/index.js';
+export * from './pop/index.js';
+export * from './popover/index.js';
+export * from './progress-stepper-item/index.js';
+export * from './progress-stepper/index.js';
+export * from './progress/index.js';
+export * from './radio-option/index.js';
+export * from './radio/index.js';
+export * from './rich-text/index.js';
+export * from './rich-textarea/index.js';
+export * from './segment-collapse/index.js';
+export * from './segmented-control-option/index.js';
+export * from './segmented-control/index.js';
+export * from './segmented-icon-control-option/index.js';
+export * from './segmented-icon-control/index.js';
+export * from './select-button/index.js';
+export * from './select-menu-option/index.js';
+export * from './select-menu/index.js';
+export * from './skeleton-item/index.js';
+export * from './skeleton/index.js';
+export * from './spinner/index.js';
+export * from './stop-events/index.js';
+export * from './table-body/index.js';
+export * from './table-cell/index.js';
+export * from './table-head-cell/index.js';
+export * from './table-head/index.js';
+export * from './table-row/index.js';
+export * from './table/index.js';
+export * from './tabs-icon-option/index.js';
+export * from './tabs-option/index.js';
+export * from './tabs/index.js';
+export * from './tag/index.js';
+export * from './text/index.js';
+export * from './textarea/index.js';
+export * from './time-picker/index.js';
+export * from './title/index.js';
+export * from './toast-manager/index.js';
+export * from './toast/index.js';
+export * from './toggle/index.js';
+export * from './tooltip/index.js';