@nectary/components 2.4.0

package/progress-stepper-item/utils.d.ts

@@ -0,0 +1,11 @@
+type TSinchProgressStepperItemStatus = 'inactive' | 'incomplete' | 'invalid' | 'complete';
+export declare const ATTR_PROGRESS_STEPPER_ITEM_CHECKED = "data-checked";
+export declare const ATTR_PROGRESS_STEPPER_ITEM_STATUS = "data-status";
+export declare const ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT = "data-active-descendant";
+export declare const isProgressStepperItemChecked: ($el: Element) => boolean;
+export declare const setProgressStepperItemChecked: ($el: Element, isChecked: boolean) => void;
+export declare const isProgressStepperItemActive: ($el: Element) => boolean;
+export declare const setProgressStepperItemStatus: ($el: Element, status: TSinchProgressStepperItemStatus) => void;
+export declare const isProgressStepperItemActiveDescendant: ($el: Element) => boolean;
+export declare const setProgressStepperItemActiveDescendant: ($el: Element, isActiveDescendant: boolean) => void;
+export {};

package/progress-stepper-item/utils.js

@@ -0,0 +1,13 @@
+import { getAttribute, getBooleanAttribute, updateAttribute, updateBooleanAttribute } from '../utils';
+export const ATTR_PROGRESS_STEPPER_ITEM_CHECKED = 'data-checked';
+export const ATTR_PROGRESS_STEPPER_ITEM_STATUS = 'data-status';
+export const ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT = 'data-active-descendant';
+export const isProgressStepperItemChecked = $el => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED);
+export const setProgressStepperItemChecked = ($el, isChecked) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, isChecked);
+export const isProgressStepperItemActive = $el => {
+  const attrValue = getAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS);
+  return attrValue !== null && attrValue !== 'inactive';
+};
+export const setProgressStepperItemStatus = ($el, status) => updateAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_STATUS, status);
+export const isProgressStepperItemActiveDescendant = $el => getBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT);
+export const setProgressStepperItemActiveDescendant = ($el, isActiveDescendant) => updateBooleanAttribute($el, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, isActiveDescendant);

package/radio/index.d.ts

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

package/radio/index.js

@@ -0,0 +1,154 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getTargetByAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-radio', 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;
+    const options = {
+      signal
+    };
+    this.role = 'radiogroup';
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange, options);
+    this.#$slot.addEventListener('keydown', this.#onOptionKeyDown, options);
+    this.#$slot.addEventListener('click', this.#onOptionClick, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['value', 'invalid'];
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          this.#onValueChange(newVal ?? '');
+          break;
+        }
+      case 'invalid':
+        {
+          this.#updateInvalid(isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  #onOptionKeyDown = e => {
+    switch (e.code) {
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        {
+          e.preventDefault();
+          const $option = this.#getPrevOption();
+          if ($option !== null) {
+            $option.focus();
+            $option.click();
+          }
+          break;
+        }
+      case 'ArrowDown':
+      case 'ArrowRight':
+        {
+          e.preventDefault();
+          const $option = this.#getNextOption();
+          if ($option !== null) {
+            $option.focus();
+            $option.click();
+          }
+          break;
+        }
+    }
+  };
+  #onSlotChange = () => {
+    this.#onValueChange(this.value);
+  };
+  #onOptionClick = e => {
+    const target = getTargetByAttribute(e, 'value');
+    if (target === null || target.hasAttribute('disabled')) {
+      return;
+    }
+    const value = getAttribute(target, 'value');
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  };
+  #onValueChange(value) {
+    for (const $option of this.#$slot.assignedElements()) {
+      const isChecked = value === getAttribute($option, 'value', '');
+      updateBooleanAttribute($option, 'checked', isChecked);
+    }
+  }
+  #getFirstOption() {
+    for (const $option of this.#$slot.assignedElements()) {
+      if ($option.disabled !== true) {
+        return $option;
+      }
+    }
+    return null;
+  }
+  #getLastOption() {
+    for (const $option of this.#$slot.assignedElements().reverse()) {
+      if ($option.disabled !== true) {
+        return $option;
+      }
+    }
+    return null;
+  }
+  #getNextOption() {
+    const $options = this.#getEnabledRadioElements();
+    const $selectedOption = this.#findSelectedOption($options);
+    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    if (currentIndex < 0) {
+      return this.#getFirstOption();
+    }
+    return $options[(currentIndex + 1) % $options.length];
+  }
+  #getPrevOption() {
+    const $options = this.#getEnabledRadioElements();
+    const $selectedOption = this.#findSelectedOption($options);
+    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    if (currentIndex < 0) {
+      return this.#getLastOption();
+    }
+    return $options[(currentIndex - 1 + $options.length) % $options.length];
+  }
+  #getEnabledRadioElements() {
+    return this.#$slot.assignedElements().filter(el => !el.hasAttribute('disabled'));
+  }
+  #findSelectedOption(elements) {
+    return elements.find(el => el.checked) ?? null;
+  }
+  #updateInvalid(isInvalid) {
+    for (const opt of this.#$slot.assignedElements()) {
+      updateBooleanAttribute(opt, 'data-invalid', isInvalid);
+    }
+  }
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/radio/types.d.ts

@@ -0,0 +1,14 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchRadioElement = HTMLElement & {
+    value: string;
+    invalid: boolean;
+    addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'invalid', value: ''): void;
+};
+export type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
+    value: string;
+    invalid?: boolean;
+    'aria-label': string;
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/radio/types.js

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

package/radio-option/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchRadioOptionElement, TSinchRadioOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-radio-option': TSinchRadioOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-radio-option': TSinchRadioOptionElement;
+    }
+}

package/radio-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}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-radio-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-radio-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-radio-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-radio-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-default-border-active);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-knob-initial);--sinch-local-color-knob-hover:var(--sinch-comp-radio-color-checked-knob-hover);--sinch-local-color-knob-active:var(--sinch-comp-radio-color-checked-knob-active);--sinch-local-color-text:var(--sinch-comp-radio-color-default-label-initial)}:host([data-invalid])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-radio-color-invalid-label-initial)}:host([checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-radio-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-radio-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-disabled-label-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-disabled-border-initial);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-disabled-knob-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-checked-disabled-label-initial)}#input{all:initial;display:block;width:18px;height:18px;cursor:pointer}:host([disabled]) #input{cursor:initial}#input-wrapper{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#input::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-radio-color-default-outline-focus);border-radius:50%;transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #input::before{opacity:1}#input::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#knob{position:absolute;width:10px;height:10px;inset:0;margin:auto;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-local-color-knob);pointer-events:none}:host([checked]) #knob{opacity:1}:host(:hover:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-hover)}:host(:active:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-active)}@media (prefers-reduced-motion){#input::after,#input::before,#knob{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-radio-font-label);color:var(--sinch-local-color-text);cursor:pointer}#label:empty{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="input-wrapper"><div id="input"></div><div id="knob"></div></div><span id="label"></span></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-radio-option', class extends NectaryElement {
+  #$label;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$label = shadowRoot.querySelector('#label');
+  }
+  connectedCallback() {
+    this.role = 'radio';
+    this.tabIndex = 0;
+  }
+  disconnectedCallback() {}
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'text', 'data-invalid'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$label.textContent = newVal;
+          break;
+        }
+      case 'checked':
+        {
+          const isChecked = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
+          updateBooleanAttribute(this, 'checked', isChecked);
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-disabled', isDisabled);
+          updateBooleanAttribute(this, 'disabled', isDisabled);
+          break;
+        }
+      case 'data-invalid':
+        {
+          updateBooleanAttribute(this, 'data-invalid', isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+  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;
+  }
+});

package/radio-option/types.d.ts

@@ -0,0 +1,17 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchRadioOptionElement = HTMLElement & {
+    value: string;
+    checked: boolean;
+    disabled: boolean;
+    text: string;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'text', value: string): void;
+};
+export type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptionElement> & {
+    value: string;
+    disabled?: boolean;
+    text: string;
+    'aria-label': string;
+};

package/radio-option/types.js

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

package/readme.md

@@ -0,0 +1,179 @@
+# 🐝 Nectary
+
+Design System's framework-agnostic Component Library implementation.
+
+>Nectaries are specialized nectar-producing structures of the flower.
+
+>Bumblebees eat nectar and pollen made by flowers. The sugary nectar provides the bees with energy while the pollen provides them with protein.
+
+## Install
+
+Add the following line to `.npmrc` in the project root:
+
+```
+//registry.npmjs.org/:_authToken=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
+```
+
+Add the component library dependency to `package.json`:
+
+```
+npm install @nectary/components
+# or
+yarn add @nectary/components
+```
+
+## Usage
+
+### Registry
+
+Nectary needs a custom elements registry to work with, even if it's a global default one:
+
+```js
+import { setNectaryRegistry } from '@nectary/components/utils'
+
+setNectaryRegistry(window.customElements)
+
+// App
+```
+
+Or a custom one for the Shell/MFE use case, see [mfe-helper-react](https://gitlab.com/sinch/sinch-projects/applications/teams/core/core-npm-packages/-/tree/main/packages/mfe-helper-react) as an example for more details:
+
+```js
+import { setNectaryRegistry } from '@nectary/components/utils'
+
+const customRegistry = new CustomElementRegistry();
+
+setNectaryRegistry(customRegistry)
+
+// ShadowRoot wrapper
+```
+
+### Theme
+
+```js
+import '@nectary/theme-base'
+```
+
+Use color palette or custom font face:
+
+```css
+span {
+  color: var(--sinch-color-honey-700);
+}
+
+h2 {
+  font: var(--sinch-font-title-l);
+}
+```
+
+### Components
+
+Import component:
+
+```js
+import '@nectary/components/button'
+```
+
+Use it in React/Vue/Angular/etc, for example:
+
+```jsx
+<sinch-button value="Click me" onClick={() => console.log('click')}></sinch-button>
+```
+
+⚠️ Note that it's not allowed to self-close custom element tags.
+
+## Testing
+
+If you are testing your application using Nectary components with Jest, you might run into some problems, as it does not work out of the box. Here are the common pitfalls and their solutions.
+
+### Example configuration
+
+jest.config.js
+
+```js
+/** @type {import("ts-jest/dist/types").InitialOptionsTsJest} */
+module.exports = {
+    preset: "ts-jest",
+    testEnvironment: "jsdom",
+    moduleNameMapper: {
+        "\\.(css)$": "identity-obj-proxy"
+    },
+    transform: {
+        "^.+\\.(ts|tsx)?$": "ts-jest",
+        "^.+\\.(js|jsx)$": "babel-jest"
+    },
+    transformIgnorePatterns: [
+        "node_modules/(?!@nectary)"
+    ]
+}
+```
+
+babel.config.js
+
+```js
+module.exports = {presets: ['@babel/preset-env']}
+```
+
+### CSS
+
+If you already have a babel loader for CSS, you might not need this part. If you do not, you can use [identity-obj-proxy](https://www.npmjs.com/package/identity-obj-proxy) to mock your CSS imports:
+
+```
+npm install identity-obj-proxy
+# or
+yarn add identity-obj-proxy
+```
+
+Then add this part to your jest.config.js file:
+
+```
+    moduleNameMapper: {
+        "\\.(css)$": "identity-obj-proxy"
+    },
+```
+
+It lets Jest know how to mock the css imports in your codebase, like for example when you import the theme:
+
+```js
+import '@nectary/theme-base'
+```
+
+This import should not throw an error now.
+
+### JS and TS
+
+You are going to need to install [babel-jest](https://www.npmjs.com/package/babel-jest) if it is not already done:
+
+```
+npm install babel-jest
+# or
+yarn add babel-jest
+```
+
+Then add this lines to your jest.config.js file:
+
+```
+    transform: {
+        "^.+\\.(ts|tsx)?$": "ts-jest", // if you are using Typescript and ts-jest
+        "^.+\\.(js|jsx)$": "babel-jest"
+    },
+    transformIgnorePatterns: [
+        "node_modules/(?!@nectary)"
+    ]
+```
+
+It is necessary to export the env preset in the babel.js.config file:
+
+```js
+module.exports = {presets: ['@babel/preset-env']}
+```
+
+If you import any component:
+
+```js
+import '@nectary/components/input'
+```
+
+It should not throw the error: 
+
+```Jest encountered an unexpected token```

package/rich-text/index.d.ts

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

package/rich-text/index.js

@@ -0,0 +1,48 @@
+import { defineCustomElement, NectaryElement, getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, parseMarkdown } from '../utils';
+const templateHTML = '<style>:host{display:block;--sinch-comp-rich-text-font:var(--sinch-sys-font-body-m)}:host([size="s"]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-s)}:host([size=xs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xs)}:host([size=xxs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xxs)}#wrapper{font:var(--sinch-comp-rich-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default))}.em1{font-style:italic}.em2{font-weight:var(--sinch-ref-typography-font-weight-700)}.em3{font-style:italic;font-weight:var(--sinch-ref-typography-font-weight-700)}.strikethrough{text-decoration:line-through}.link{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.link:hover{color:var(--sinch-comp-link-color-default-text-hover);text-decoration:none}.code{font:var(--sinch-comp-code-tag-font-text);line-height:inherit;font-size:inherit;border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.paragraph{margin:0}.paragraph+.paragraph{margin-top:12px}</style><div id="wrapper"></div>';
+import { sizeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-rich-text', class extends NectaryElement {
+  #wrapper;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#wrapper = shadowRoot.querySelector('#wrapper');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'paragraph');
+  }
+  static get observedAttributes() {
+    return ['text'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#updateText(newVal);
+          break;
+        }
+    }
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', 'm');
+  }
+  set size(value) {
+    updateLiteralAttribute(this, sizeValues, 'size', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  #updateText(text) {
+    if (text === null) {
+      this.#wrapper.innerHTML = '';
+      return;
+    }
+    this.#wrapper.innerHTML = parseMarkdown(text);
+  }
+});

package/rich-text/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchTextType } from '../text/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchRichTextElement = HTMLElement & {
+    size: TSinchTextType;
+    text: string;
+    setAttribute(name: 'size', value: TSinchTextType): void;
+    setAttribute(name: 'text', value: string): void;
+};
+export type TSinchRichTextReact = TSinchElementReact<TSinchRichTextElement> & {
+    size?: TSinchTextType;
+    text: string;
+};

package/rich-text/types.js

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

package/rich-text/utils.d.ts

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

package/rich-text/utils.js

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

package/segment/index.d.ts

@@ -0,0 +1,12 @@
+import '../title';
+import type { TSinchSegmentElement, TSinchSegmentReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segment': TSinchSegmentReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-segment': TSinchSegmentElement;
+    }
+}