@nectary/components 2.9.0 → 2.10.0

package/tabs/index.js

@@ -0,0 +1,80 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-comp-tab-color-default-border-initial);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tabs', class extends NectaryElement {
+  #$slot;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$slot = shadowRoot.querySelector('slot');
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'tablist');
+    this.#$slot.addEventListener('option-change', this.#onOptionChange, {
+      signal
+    });
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange, {
+      signal
+    });
+    this.addEventListener('-change', this.#onChangeReactHandler, {
+      signal
+    });
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['value'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          this.#onValueChange(newVal);
+          break;
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  nthOptionRect(index) {
+    const $el = this.#$slot.assignedElements()[index];
+    if ($el != null) {
+      return getRect($el);
+    }
+    return null;
+  }
+  #onSlotChange = () => {
+    this.#onValueChange(this.value);
+  };
+  #onOptionChange = e => {
+    e.stopPropagation();
+    this.#dispatchChangeEvent(e.detail);
+  };
+  #onValueChange(value) {
+    for (const $option of this.#$slot.assignedElements()) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+      updateBooleanAttribute($option, 'data-checked', isChecked);
+    }
+  }
+  #dispatchChangeEvent(value) {
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  }
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/tabs/types.d.ts

@@ -0,0 +1,18 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchTabsElement = HTMLElement & {
+    /** Value */
+    value: string;
+    nthOptionRect(index: number): TRect | null;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+};
+export type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
+    /** Value */
+    value: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Change value event */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/tabs/types.js

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

package/tabs-icon-option/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTabsIconOptionElement, TSinchTabsIconOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-icon-option': TSinchTabsIconOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs-icon-option': TSinchTabsIconOptionElement;
+    }
+}

package/tabs-icon-option/index.js

@@ -0,0 +1,79 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button" tabindex="0"><slot name="icon"></slot></button></sinch-tooltip>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
+  #$button;
+  #$tooltip;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
+  }
+  connectedCallback() {
+    this.role = 'tab';
+    this.#$button.addEventListener('click', this.#onClick);
+  }
+  disconnectedCallback() {
+    this.#$button.removeEventListener('click', this.#onClick);
+  }
+  static get observedAttributes() {
+    return ['data-checked', 'disabled', 'aria-label'];
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#$button.disabled = isDisabled;
+          updateBooleanAttribute(this, name, isDisabled);
+          break;
+        }
+      case 'aria-label':
+        {
+          updateAttribute(this.#$tooltip, 'text', newVal);
+          break;
+        }
+    }
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$button.focus();
+  }
+  blur() {
+    this.#$button.blur();
+  }
+  #onClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      bubbles: true,
+      detail: this.value
+    }));
+  };
+});

package/tabs-icon-option/types.d.ts

@@ -0,0 +1,19 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTabsIconOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionElement> & {
+    /** Value */
+    value: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/tabs-icon-option/types.js

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

package/tabs-option/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-option': TSinchTabsOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs-option': TSinchTabsOptionElement;
+    }
+}

package/tabs-option/index.js

@@ -0,0 +1,86 @@
+import '../text';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button" tabindex="0"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tabs-option', class extends NectaryElement {
+  #$button;
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    this.role = 'tab';
+    this.#$button.addEventListener('click', this.#onClick);
+  }
+  disconnectedCallback() {
+    this.#$button.removeEventListener('click', this.#onClick);
+  }
+  static get observedAttributes() {
+    return ['data-checked', 'disabled', 'text'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          this.#$button.disabled = isDisabled;
+          updateBooleanAttribute(this, name, isDisabled);
+          break;
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$button.focus();
+  }
+  blur() {
+    this.#$button.blur();
+  }
+  #onClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      bubbles: true,
+      detail: this.value
+    }));
+  };
+});

package/tabs-option/types.d.ts

@@ -0,0 +1,25 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTabsOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/tabs-option/types.js

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

package/tag/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchTagElement, TSinchTagReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tag': TSinchTagReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tag': TSinchTagElement;
+    }
+}

package/tag/index.js

@@ -0,0 +1,84 @@
+import '../text';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div>';
+import { getTagColorBg, getTagColorFg } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tag', class extends NectaryElement {
+  #$text;
+  #$wrapper;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateColor();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  get color() {
+    return getAttribute(this, 'color');
+  }
+  set color(value) {
+    updateAttribute(this, 'color', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+  set small(isSmall) {
+    updateBooleanAttribute(this, 'small', isSmall);
+  }
+  static get observedAttributes() {
+    return ['text', 'color', 'small'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'color':
+        {
+          this.#updateColor();
+          break;
+        }
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'small':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  #updateColor() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const colorName = this.color;
+    if (colorName !== null && colorName.length > 0) {
+      const bg = getTagColorBg(colorName);
+      const fg = getTagColorFg(colorName);
+      this.#$wrapper.style.setProperty('background-color', bg);
+      this.#$wrapper.style.setProperty('--sinch-global-color-text', fg);
+      this.#$wrapper.style.setProperty('--sinch-global-color-icon', fg);
+    } else {
+      this.#$wrapper.style.removeProperty('background-color');
+      this.#$wrapper.style.removeProperty('--sinch-global-color-text');
+      this.#$wrapper.style.removeProperty('--sinch-global-color-icon');
+    }
+  }
+});

package/tag/types.d.ts

@@ -0,0 +1,23 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTagElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Color, gray by default */
+    color: string | null;
+    /** Small */
+    small: boolean;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Color, gray by default */
+    setAttribute(name: 'color', value: string): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+};
+export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
+    /** Text */
+    text: string;
+    /** Color, gray by default */
+    color?: string;
+    /** Small */
+    small?: boolean;
+};

package/tag/types.js

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

package/tag/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getTagColorBg: (id: string) => string;
+export declare const getTagColorFg: (id: string) => string;

package/tag/utils.js

@@ -0,0 +1,6 @@
+export const getTagColorBg = id => {
+  return `var(--sinch-comp-tag-color-${id}-background)`;
+};
+export const getTagColorFg = id => {
+  return `var(--sinch-comp-tag-color-${id}-foreground)`;
+};

package/text/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTextElement, TSinchTextReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-text': TSinchTextReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-text': TSinchTextElement;
+    }
+}

package/text/index.js

@@ -0,0 +1,64 @@
+import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{text-align:var(--sinch-comp-text-align);display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m);--sinch-comp-text-align:unset}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
+import { typeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-text', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.#updateRole();
+  }
+  static get observedAttributes() {
+    return ['inline', 'ellipsis', 'emphasized'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'inline':
+        {
+          this.#updateRole();
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'ellipsis':
+      case 'emphasized':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  set inline(isInline) {
+    updateBooleanAttribute(this, 'inline', isInline);
+  }
+  get inline() {
+    return getBooleanAttribute(this, 'inline');
+  }
+  set ellipsis(isEllipsis) {
+    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+  }
+  get ellipsis() {
+    return getBooleanAttribute(this, 'ellipsis');
+  }
+  set emphasized(isEmphasized) {
+    updateBooleanAttribute(this, 'emphasized', isEmphasized);
+  }
+  get emphasized() {
+    return getBooleanAttribute(this, 'emphasized');
+  }
+  #updateRole() {
+    this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
+  }
+});

package/text/types.d.ts

@@ -0,0 +1,30 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
+export type TSinchTextElement = HTMLElement & {
+    /** Type */
+    type: TSinchTextType;
+    /** Block (“paragraph”, default) or inline (“span”) */
+    inline: boolean;
+    /** Emphasized */
+    emphasized: boolean;
+    /** Cuts the long text with “…” ellipsis */
+    ellipsis: boolean;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchTextType): void;
+    /** Block (“paragraph”, default) or inline (“span”) */
+    setAttribute(name: 'inline', value: ''): void;
+    /** Emphasized */
+    setAttribute(name: 'emphasized', value: ''): void;
+    /** Cuts the long text with “…” ellipsis */
+    setAttribute(name: 'ellipsis', value: ''): void;
+};
+export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
+    /** Type */
+    type: TSinchTextType;
+    /** Block (“paragraph”, default) or inline (“span”) */
+    inline?: boolean;
+    /** Emphasized */
+    emphasized?: boolean;
+    /** Cuts the long text with “…” ellipsis */
+    ellipsis?: boolean;
+};

package/text/types.js

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

package/text/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchTextType } from './types';
+export declare const typeValues: readonly TSinchTextType[];

package/text/utils.js

@@ -0,0 +1 @@
+export const typeValues = ['m', 's', 'xs', 'xxs'];

package/textarea/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTextareaElement, TSinchTextareaReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-textarea': TSinchTextareaReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-textarea': TSinchTextareaElement;
+    }
+}