@nectary/components 2.1.5 → 2.2.0

package/input/utils.js

@@ -1 +1,302 @@
-export const inputTypes = ['text', 'password'];
+export const inputTypes = ['text', 'password'];
+const MASK_SYMBOL_LETTER = 'A';
+const MASK_SYMBOL_DIGIT = '0';
+const EMPTY_CHAR = ' ';
+const MASK_MODE_DIGIT = 0;
+const MASK_MODE_LETTER = 1;
+const MASK_MODE_EXACT = 2;
+const MASK_PLACEHOLDER_DELIMITER = '@@';
+const MASK_PLACEHOLDER = '_';
+const testMaskedValue = (maskSymbol, inputChar) => {
+  switch (maskSymbol.mode) {
+    case MASK_MODE_DIGIT:
+      {
+        return /\d/.test(inputChar);
+      }
+    case MASK_MODE_LETTER:
+      {
+        return /\p{Letter}/u.test(inputChar);
+      }
+  }
+  return false;
+};
+const isExactMode = maskSymbol => maskSymbol.mode === MASK_MODE_EXACT;
+const isEmptyChar = char => char === EMPTY_CHAR;
+export const getMaskSymbols = maskValue => {
+  const res = [];
+  const [mask, placeholder] = maskValue.split(MASK_PLACEHOLDER_DELIMITER);
+  const maskSymbols = [...mask];
+  const placeholderChars = placeholder != null ? [...placeholder] : [];
+  for (let maskIndex = 0, placeholderIndex = 0; maskIndex < maskSymbols.length; maskIndex++, placeholderIndex++) {
+    if (maskSymbols[maskIndex] === '\\') {
+      maskIndex += 1;
+      res.push({
+        value: maskSymbols[maskIndex],
+        mode: MASK_MODE_EXACT,
+        placeholder: placeholderChars[placeholderIndex] ?? maskSymbols[maskIndex]
+      });
+      continue;
+    }
+    if (maskSymbols[maskIndex] === MASK_SYMBOL_LETTER || maskSymbols[maskIndex] === MASK_SYMBOL_DIGIT) {
+      res.push({
+        value: maskSymbols[maskIndex],
+        mode: maskSymbols[maskIndex] === MASK_SYMBOL_LETTER ? MASK_MODE_LETTER : MASK_MODE_DIGIT,
+        placeholder: placeholderChars[placeholderIndex] ?? MASK_PLACEHOLDER
+      });
+      continue;
+    }
+    res.push({
+      value: maskSymbols[maskIndex],
+      mode: MASK_MODE_EXACT,
+      placeholder: placeholderChars[placeholderIndex] ?? maskSymbols[maskIndex]
+    });
+  }
+  return res;
+};
+const clearCharsSelection = (chars, selectionStart, selectionEnd) => {
+  for (let i = selectionStart; i < selectionEnd && i < chars.length; i++) {
+    chars[i] = EMPTY_CHAR;
+  }
+};
+const getPlaceholder = (chars, maskSymbols) => {
+  const res = new Array(maskSymbols.length);
+  for (let i = 0; i < maskSymbols.length; i++) {
+    res[i] = i >= chars.length || isEmptyChar(chars[i]) || isExactMode(maskSymbols[i]) ? maskSymbols[i].placeholder : EMPTY_CHAR;
+  }
+  return res.join('');
+};
+const isMaskedInputComplete = (chars, maskSymbols) => {
+  if (chars.length > maskSymbols.length) {
+    throw new Error('chars.length > maskSymbols.length');
+  }
+  if (chars.length < maskSymbols.length) {
+    return false;
+  }
+  for (let i = 0; i < maskSymbols.length; i++) {
+    if (i >= chars.length || !isExactMode(maskSymbols[i]) && !testMaskedValue(maskSymbols[i], chars[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+const getCharsFromInputValue = (inputValue, maskSymbols) => {
+  const chars = new Array(maskSymbols.length);
+  let i = 0;
+  for (const c of inputValue) {
+    chars[i++] = c;
+  }
+  chars.fill(EMPTY_CHAR, i);
+  return chars;
+};
+const isCursorAtTheBeginning = (maskSymbols, selectoinStart) => {
+  if (selectoinStart >= maskSymbols.length) {
+    return false;
+  }
+  for (let i = 0; i < selectoinStart; i++) {
+    if (!isExactMode(maskSymbols[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+const getMergedValue = (chars, maskSymbols) => {
+  if (!isMaskedInputComplete(chars, maskSymbols)) {
+    return '';
+  }
+  const res = new Array(chars.length);
+  for (let i = 0; i < chars.length; i++) {
+    res[i] = isExactMode(maskSymbols[i]) ? maskSymbols[i].value : chars[i];
+  }
+  return res.join('');
+};
+const findLastNonEmptyCharIndex = chars => {
+  for (let i = chars.length - 1; i >= 0; i--) {
+    if (!isEmptyChar(chars[i])) {
+      return i;
+    }
+  }
+  return -1;
+};
+const compileResult = (chars, maskSymbols, cursorPos) => {
+  if (chars.length > maskSymbols.length) {
+    chars.length = maskSymbols.length;
+  }
+  let lastEmptyPos = findLastNonEmptyCharIndex(chars) + 1;
+  while (lastEmptyPos < maskSymbols.length && isExactMode(maskSymbols[lastEmptyPos])) {
+    ++lastEmptyPos;
+  }
+  if (lastEmptyPos < chars.length) {
+    chars.length = lastEmptyPos;
+  }
+  return {
+    value: chars.join(''),
+    placeholder: getPlaceholder(chars, maskSymbols),
+    cursorPos: Math.min(cursorPos, chars.length),
+    mergedValue: getMergedValue(chars, maskSymbols)
+  };
+};
+export const deleteContentBackward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+  if (selectionEnd === 0) {
+    return null;
+  }
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  if (selectionStart !== selectionEnd) {
+    clearCharsSelection(chars, selectionStart, selectionEnd);
+    return compileResult(chars, maskSymbols, selectionStart);
+  }
+  let cusrsorPos = selectionStart;
+  while (cusrsorPos > 0 && isExactMode(maskSymbols[cusrsorPos - 1])) {
+    --cusrsorPos;
+  }
+  if (cusrsorPos > 0) {
+    clearCharsSelection(chars, cusrsorPos - 1, cusrsorPos);
+    do {
+      --cusrsorPos;
+    } while (cusrsorPos > 0 && isExactMode(maskSymbols[cusrsorPos - 1]));
+  }
+  return compileResult(chars, maskSymbols, cusrsorPos);
+};
+export const deleteContentForward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+  if (selectionStart >= maskSymbols.length) {
+    return null;
+  }
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  if (selectionStart !== selectionEnd) {
+    clearCharsSelection(chars, selectionStart, selectionEnd);
+    return compileResult(chars, maskSymbols, selectionEnd);
+  }
+  let cursorPos = selectionStart;
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  if (cursorPos < chars.length) {
+    clearCharsSelection(chars, cursorPos, cursorPos + 1);
+  }
+  return compileResult(chars, maskSymbols, cursorPos + 1);
+};
+export const beginMaskedComposition = (inputValue, maskSymbols, selectionStart) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  const placeholder = new Array(chars.length);
+  for (let i = 0; i < maskSymbols.length; i++) {
+    placeholder[i] = isEmptyChar(chars[i]) || isExactMode(maskSymbols[i]) ? maskSymbols[i].placeholder : EMPTY_CHAR;
+  }
+  placeholder[selectionStart] = EMPTY_CHAR;
+  chars.splice(selectionStart, 1);
+  return {
+    value: chars.join(''),
+    placeholder: placeholder.join('')
+  };
+};
+export const endMaskedComposition = (inputValue, data, maskSymbols, selectionStart, wasValueInserted) => {
+  let cursorPos = selectionStart;
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  const dataChars = [...data];
+  if (!wasValueInserted) {
+    chars.splice(cursorPos, 0, ...dataChars);
+    chars.length = maskSymbols.length;
+    cursorPos += dataChars.length;
+  }
+  cursorPos -= dataChars.length;
+  clearCharsSelection(chars, cursorPos, cursorPos + dataChars.length);
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  if (cursorPos >= maskSymbols.length) {
+    return compileResult(chars, maskSymbols, cursorPos);
+  }
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length; ++dataPos, ++cursorPos) {
+    const data = dataChars[dataPos];
+    if (isEmptyChar(chars[cursorPos]) && testMaskedValue(maskSymbols[cursorPos], data)) {
+      chars[cursorPos] = data;
+    }
+  }
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  return compileResult(chars, maskSymbols, cursorPos);
+};
+export const insertText = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  let cursorPos = selectionStart;
+  clearCharsSelection(chars, selectionStart, selectionEnd);
+  while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+    cursorPos++;
+  }
+  if (cursorPos >= maskSymbols.length) {
+    return compileResult(chars, maskSymbols, cursorPos);
+  }
+  if (testMaskedValue(maskSymbols[cursorPos], data)) {
+    if (cursorPos >= chars.length) {
+      chars.length = cursorPos + 1;
+    }
+    chars[cursorPos] = data;
+    do {
+      cursorPos++;
+    } while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos]));
+  }
+  return compileResult(chars, maskSymbols, cursorPos);
+};
+export const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  let cursorPos = selectionStart;
+  clearCharsSelection(chars, selectionStart, selectionEnd);
+  if (isCursorAtTheBeginning(maskSymbols, cursorPos)) {
+    cursorPos = 0;
+  } else {
+    while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
+      cursorPos++;
+    }
+  }
+  if (cursorPos >= maskSymbols.length) {
+    return compileResult(chars, maskSymbols, cursorPos);
+  }
+  const dataChars = [...data];
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
+    const data = dataChars[dataPos];
+    const maskSymbol = maskSymbols[cursorPos];
+    if (isExactMode(maskSymbol)) {
+      if (maskSymbol.value === data) {
+        ++dataPos;
+      }
+      ++cursorPos;
+    } else {
+      if (testMaskedValue(maskSymbol, data)) {
+        chars[cursorPos] = data;
+        ++cursorPos;
+      }
+      ++dataPos;
+    }
+  }
+  return compileResult(chars, maskSymbols, cursorPos);
+};
+export const splitValueAndMask = (inputValue, maskSymbols) => {
+  const chars = getCharsFromInputValue('', maskSymbols);
+  const dataChars = getCharsFromInputValue(inputValue, maskSymbols);
+  let cursorPos = 0;
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
+    const data = dataChars[dataPos];
+    const maskSymbol = maskSymbols[cursorPos];
+    if (isExactMode(maskSymbol)) {
+      if (maskSymbol.value === data) {
+        ++dataPos;
+      }
+      ++cursorPos;
+    } else {
+      if (testMaskedValue(maskSymbol, data)) {
+        chars[cursorPos] = data;
+        ++cursorPos;
+      }
+      ++dataPos;
+    }
+  }
+  return compileResult(chars, maskSymbols, chars.length);
+};
+export const getMergedValueSliced = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+  const chars = getCharsFromInputValue(inputValue, maskSymbols);
+  for (let i = selectionStart; i < selectionEnd && i < maskSymbols.length; i++) {
+    if (isExactMode(maskSymbols[i])) {
+      chars[i] = maskSymbols[i].value;
+    }
+  }
+  return chars.slice(selectionStart, selectionEnd).join('');
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pop/index.js

@@ -109,7 +109,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         {
           if (isAttrTrue(newVal)) {
             requestAnimationFrame(() => {
-              if (this.isConnected && getBooleanAttribute(this, 'open')) {
+              if (this.isDomConnected && getBooleanAttribute(this, 'open')) {
                 this.#onExpand();
               }
             });
@@ -149,7 +149,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     return item;
   }
   #onExpand() {
-    if (!this.isConnected || this.#$dialog.open) {
+    if (!this.isDomConnected || this.#$dialog.open) {
       return;
     }
     this.#$targetSlot.addEventListener('blur', this.#stopEventPropagation, true);
@@ -194,7 +194,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
         if (!isElementFocused(this.#targetActiveElement)) {
           requestAnimationFrame(() => {
-            if (this.isConnected && this.#$dialog.open) {
+            if (this.isDomConnected && this.#$dialog.open) {
               this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
               this.#targetActiveElement.focus();
               this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
@@ -209,7 +209,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     });
     window.addEventListener('resize', this.#onResize);
     requestAnimationFrame(() => {
-      if (this.isConnected && this.#$dialog.open) {
+      if (this.isDomConnected && this.#$dialog.open) {
         this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
       }
     });
@@ -254,7 +254,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         if (!isElementFocused(this.#targetActiveElement)) {
           const $targetEl = this.#targetActiveElement;
           requestAnimationFrame(() => {
-            if (this.isConnected && !this.#$dialog.open) {
+            if (this.isDomConnected && !this.#$dialog.open) {
               this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
               $targetEl.focus({
                 preventScroll: true

package/popover/index.js

@@ -34,6 +34,7 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
   }
   disconnectedCallback() {
     this.#controller.abort();
+    this.#controller = null;
   }
   static get observedAttributes() {
     return ['orientation', 'open', 'modal', 'tip'];

package/progress-stepper/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchProgressStepperElement, TSinchProgressStepperReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress-stepper': TSinchProgressStepperReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress-stepper': TSinchProgressStepperElement;
+    }
+}

package/progress-stepper/index.js

@@ -0,0 +1,209 @@
+import { isProgressStepperItemActive, isProgressStepperItemChecked, setProgressStepperItemActiveDescendant, setProgressStepperItemChecked, setProgressStepperItemStatus } from '../progress-stepper-item/utils';
+import { defineCustomElement, getAttribute, getReactEventHandler, getRect, getTargetByAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%}::slotted(sinch-progress-stepper-item){flex:1;min-width:0}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-progress-stepper', class extends NectaryElement {
+  #$slot;
+  #controller = null;
+  #$items = [];
+  #currentActiveDescendantIndex = -1;
+  #isGoingToFocusItem = false;
+  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 = 'tablist';
+    this.#$slot.addEventListener('click', this.#onOptionClick, options);
+    this.#$slot.addEventListener('keydown', this.#onOptionKeydown, options);
+    this.#$slot.addEventListener('focusout', this.#onOptionBlur, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    queueMicrotask(() => {
+      this.#$slot.addEventListener('slotchange', this.#onSlotChange, options);
+      this.#onSlotChange();
+    });
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['value', 'progressvalue'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'value':
+        {
+          this.#onValueChange(newVal);
+          break;
+        }
+      case 'progressvalue':
+        {
+          this.#updateProgressValue();
+          break;
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set progressValue(value) {
+    updateAttribute(this, 'progressvalue', value);
+  }
+  get progressValue() {
+    return getAttribute(this, 'progressvalue', '');
+  }
+  nthOptionRect(index) {
+    const $el = this.#$slot.assignedElements()[index];
+    if ($el != null) {
+      return getRect($el);
+    }
+    return null;
+  }
+  #onSlotChange = () => {
+    this.#$items = this.#$slot.assignedElements();
+    this.#onValueChange(this.value);
+    this.#updateProgressValue();
+  };
+  #onOptionClick = e => {
+    const target = getTargetByAttribute(e, 'value');
+    if (target !== null && isProgressStepperItemActive(target)) {
+      this.dispatchEvent(new CustomEvent('-change', {
+        detail: getAttribute(target, 'value')
+      }));
+    }
+  };
+  #onValueChange(value) {
+    for (const $item of this.#$items) {
+      const isChecked = value === getAttribute($item, 'value');
+      setProgressStepperItemChecked($item, isChecked);
+    }
+    this.#resetActiveDescendant();
+  }
+  #focusNextItem() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      const nextIndex = (this.#currentActiveDescendantIndex + 1 + i) % this.#$items.length;
+      const item = this.#$items[nextIndex];
+      if (isProgressStepperItemActive(item)) {
+        setProgressStepperItemActiveDescendant(item, true);
+        this.#isGoingToFocusItem = true;
+        item.focus();
+        if (this.#currentActiveDescendantIndex >= 0) {
+          setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], false);
+        }
+        this.#currentActiveDescendantIndex = nextIndex;
+        break;
+      }
+    }
+  }
+  #focusPrevItem() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      const nextIndex = (this.#currentActiveDescendantIndex - i - 1 + this.#$items.length) % this.#$items.length;
+      const item = this.#$items[nextIndex];
+      if (isProgressStepperItemActive(item)) {
+        setProgressStepperItemActiveDescendant(item, true);
+        this.#isGoingToFocusItem = true;
+        item.focus();
+        if (this.#currentActiveDescendantIndex >= 0) {
+          setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], false);
+        }
+        this.#currentActiveDescendantIndex = nextIndex;
+        break;
+      }
+    }
+  }
+  #updateProgressValue() {
+    const progressValue = this.progressValue;
+    const $items = this.#$slot.assignedElements();
+    const $progressValueIndex = $items.findIndex(it => getAttribute(it, 'value') === progressValue);
+    for (let i = 0; i < $items.length; i++) {
+      if ($progressValueIndex < 0 || $progressValueIndex < i) {
+        setProgressStepperItemStatus($items[i], 'inactive');
+      } else if ($progressValueIndex > i) {
+        setProgressStepperItemStatus($items[i], 'complete');
+      } else {
+        setProgressStepperItemStatus($items[i], 'incomplete');
+      }
+    }
+    this.#resetActiveDescendant();
+  }
+  #getCheckedItemIndex() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      if (isProgressStepperItemChecked(this.#$items[i])) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #getFirstActiveItemIndex() {
+    for (let i = 0; i < this.#$items.length; i++) {
+      if (isProgressStepperItemActive(this.#$items[i])) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #resetActiveDescendant() {
+    if (this.#currentActiveDescendantIndex >= 0) {
+      setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], false);
+    }
+    this.#currentActiveDescendantIndex = this.#getCheckedItemIndex();
+    if (this.#currentActiveDescendantIndex >= 0) {
+      setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], true);
+      return;
+    }
+    this.#currentActiveDescendantIndex = this.#getFirstActiveItemIndex();
+    if (this.#currentActiveDescendantIndex >= 0) {
+      setProgressStepperItemActiveDescendant(this.#$items[this.#currentActiveDescendantIndex], true);
+    }
+  }
+  #onOptionKeydown = e => {
+    switch (e.code) {
+      case 'Enter':
+      case 'Space':
+        {
+          e.preventDefault();
+          getTargetByAttribute(e, 'value')?.click();
+          break;
+        }
+      case 'ArrowRight':
+        {
+          e.preventDefault();
+          this.#focusNextItem();
+          break;
+        }
+      case 'ArrowLeft':
+        {
+          e.preventDefault();
+          this.#focusPrevItem();
+          break;
+        }
+    }
+  };
+  #onOptionBlur = () => {
+    if (this.#isGoingToFocusItem) {
+      this.#isGoingToFocusItem = false;
+      return;
+    }
+    this.#resetActiveDescendant();
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/progress-stepper/types.d.ts

@@ -0,0 +1,22 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchProgressStepperElement = HTMLElement & {
+    /** Current selected item value */
+    value: string;
+    /** Current progress value */
+    progressValue: string;
+    nthOptionRect(index: number): TRect | null;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Current selected item value */
+    setAttribute(name: 'value', value: string): void;
+    /** Current progress value */
+    setAttribute(name: 'progressvalue', value: string): void;
+};
+export type TSinchProgressStepperReact = TSinchElementReact<TSinchProgressStepperElement> & {
+    /** Current selected item value */
+    value: string;
+    /** Current progress value */
+    progressValue: string;
+    /** Change selected value event */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/progress-stepper/types.js

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

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

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchProgressStepperItemElement, TSinchProgressStepperItemReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress-stepper-item': TSinchProgressStepperItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress-stepper-item': TSinchProgressStepperItemElement;
+    }
+}