@nectary/components 2.9.0 → 2.10.0

package/utils/dom.d.ts

@@ -0,0 +1,34 @@
+export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
+export declare const isAttrTrue: (attrValue: string | null) => boolean;
+export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
+export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
+export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
+export declare function getAttribute($element: Element, attrName: string): string | null;
+export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
+export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
+export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number];
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
+export declare const clampNumber: (value: number, min: number, max: number) => number;
+type IntegerOptions = {
+    min?: number;
+    max?: number;
+    defaultValue?: number | null;
+    itemSizeMultiplier?: number;
+    itemSpaceBetween?: number;
+};
+export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
+export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;
+export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, options?: IntegerOptions) => void;
+export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
+export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
+export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
+export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
+export declare const hasClass: (elem: Element, name: string) => boolean;
+export declare const getCssVar: (element: Element, variableName: string) => string | null;
+export declare const getCssVars: (element: Element, variableNames: string[]) => (string | null)[];
+export declare const cloneNode: (el: Element, deep: boolean) => Element;
+export declare const shouldReduceMotion: () => boolean;
+export declare const isAttrEqual: (oldVal: string | null, newVal: string | null) => boolean;
+export {};

package/utils/dom.js

@@ -0,0 +1,154 @@
+export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
+  $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
+};
+export const isAttrTrue = attrValue => {
+  return attrValue !== null && attrValue !== 'false';
+};
+export const getBooleanAttribute = ($element, attrName) => {
+  return isAttrTrue($element.getAttribute(attrName));
+};
+export const updateBooleanAttribute = ($element, attrName, attrValue) => {
+  const currentAttrValue = $element.getAttribute(attrName);
+  if (attrValue === true) {
+    if (!isAttrTrue(currentAttrValue)) {
+      $element.setAttribute(attrName, '');
+    }
+  } else if (currentAttrValue !== null) {
+    $element.removeAttribute(attrName);
+  }
+};
+export const updateAttribute = ($element, attrName, attrValue) => {
+  if (attrValue != null) {
+    $element.setAttribute(attrName, String(attrValue));
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+export function getAttribute($element, attrName) {
+  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  return $element.getAttribute(attrName) ?? defaultValue;
+}
+export const isLiteralValue = (literals, value) => {
+  return value != null && literals.includes(value);
+};
+export const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
+  if (isLiteralValue(literals, attrValue)) {
+    $element.setAttribute(attrName, attrValue);
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+export function getLiteralAttribute($element, literals, attrName, defaultValue) {
+  const attrValue = $element.getAttribute(attrName);
+  if (isLiteralValue(literals, attrValue)) {
+    return attrValue;
+  }
+  return defaultValue;
+}
+export const clampNumber = (value, min, max) => {
+  return Math.min(max, Math.max(min, value));
+};
+const DEFAULT_INTEGER_OPTIONS = {
+  itemSizeMultiplier: 1,
+  itemSpaceBetween: 0,
+  defaultValue: null
+};
+const applyRange = (value, _ref) => {
+  let {
+    min,
+    max
+  } = _ref;
+  let result = value;
+  if (min != null) {
+    result = Math.max(min, result);
+  }
+  if (max != null) {
+    result = Math.min(max, result);
+  }
+  return result;
+};
+export const attrValueToInteger = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier = 1,
+    itemSpaceBetween = 0
+  } = options;
+  let intValue = defaultValue;
+  if (value !== null) {
+    const int = parseInt(value);
+    if (Number.isInteger(int)) {
+      intValue = applyRange(int, options);
+    }
+  }
+  if (intValue !== null) {
+    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
+  }
+  return null;
+};
+export const attrValueToPixels = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const int = attrValueToInteger(value, options);
+  return int === null ? 'unset' : `${int}px`;
+};
+export const updateIntegerAttribute = function ($element, attrName, attrValue) {
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier: multiplier = 1
+  } = options;
+  let intValue = null;
+  if (typeof attrValue === 'string') {
+    intValue = attrValueToInteger(attrValue, options);
+  } else if (typeof attrValue === 'number') {
+    intValue = applyRange(attrValue, options) * multiplier;
+  } else {
+    intValue = defaultValue;
+  }
+  if (intValue === null) {
+    $element.removeAttribute(attrName);
+  } else {
+    $element.setAttribute(attrName, intValue.toFixed(0));
+  }
+};
+export function getIntegerAttribute($element, attrName, defaultValue) {
+  return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
+}
+export const setClass = (elem, name, isSet) => {
+  isSet ? elem.classList.add(name) : elem.classList.remove(name);
+};
+export const hasClass = (elem, name) => {
+  return elem.classList.contains(name);
+};
+export const getCssVar = (element, variableName) => {
+  const result = getComputedStyle(element).getPropertyValue(variableName).trim();
+  return result === '' ? null : result;
+};
+export const getCssVars = (element, variableNames) => {
+  const style = getComputedStyle(element);
+  return variableNames.map(name => {
+    const result = style.getPropertyValue(name).trim();
+    return result === '' ? null : result;
+  });
+};
+export const cloneNode = (el, deep) => {
+  const root = el.getRootNode();
+  if (root !== document && Reflect.has(root, 'createElement')) {
+    const cloned = root.createElement(el.tagName.toLowerCase());
+    for (const attr of el.getAttributeNames()) {
+      cloned.setAttribute(attr, el.getAttribute(attr));
+    }
+    if (deep) {
+      for (let i = 0; i < el.children.length; i++) {
+        const clonedChild = cloneNode(el.children[i], deep);
+        cloned.appendChild(clonedChild);
+      }
+    }
+    return cloned;
+  }
+  return el.cloneNode(deep);
+};
+export const shouldReduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+export const isAttrEqual = (oldVal, newVal) => {
+  return oldVal === newVal || newVal === null && oldVal === 'false' || newVal === '' && oldVal === 'true';
+};

package/utils/element.d.ts

@@ -0,0 +1,16 @@
+export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
+export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
+declare global {
+    interface ShadowRootInit {
+        customElements?: CustomElementRegistry;
+    }
+}
+export declare class NectaryElement extends HTMLElement {
+    #private;
+    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
+    version: string;
+    get focusable(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get isDomConnected(): boolean;
+}

package/utils/element.js

@@ -0,0 +1,48 @@
+import pkg from '../package.json';
+const nectaryDefinitions = new Map();
+let nectaryRegistry = null;
+export const defineCustomElement = (name, constructor) => {
+  if (nectaryRegistry !== null) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, constructor);
+    }
+    return;
+  }
+  nectaryDefinitions.set(name, constructor);
+};
+export const setNectaryRegistry = registry => {
+  if (nectaryRegistry !== null) {
+    throw new Error('Nectary registry already set');
+  }
+  nectaryRegistry = registry;
+  for (const [name, ctor] of nectaryDefinitions.entries()) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, ctor);
+    }
+  }
+  nectaryDefinitions.clear();
+};
+export class NectaryElement extends HTMLElement {
+  attachShadow(options) {
+    return super.attachShadow({
+      mode: 'open',
+      delegatesFocus: false,
+      customElements: nectaryRegistry,
+      ...options
+    });
+  }
+  version = pkg.version;
+  get focusable() {
+    return false;
+  }
+  #isDomConnected = false;
+  connectedCallback() {
+    this.#isDomConnected = true;
+  }
+  disconnectedCallback() {
+    this.#isDomConnected = false;
+  }
+  get isDomConnected() {
+    return this.#isDomConnected;
+  }
+}

package/utils/event-target.d.ts

@@ -0,0 +1,4 @@
+export declare const isTargetEqual: (e: Event, $elem: HTMLElement) => boolean;
+export declare const getTargetByAttribute: (e: Event, attr: string) => HTMLElement | null;
+export declare const getTargetAttribute: (e: Event, attr: string) => string | null;
+export declare const getTargetIndexInParent: (e: Event, parent: Element) => number;

package/utils/event-target.js

@@ -0,0 +1,26 @@
+export const isTargetEqual = (e, $elem) => {
+  return e.target === $elem || e.originalTarget === $elem;
+};
+export const getTargetByAttribute = (e, attr) => {
+  if (e.target.hasAttribute(attr)) {
+    return e.target;
+  }
+  if (e.originalTarget?.hasAttribute(attr) === true) {
+    return e.originalTarget;
+  }
+  return null;
+};
+export const getTargetAttribute = (e, attr) => {
+  return e.target.getAttribute(attr) ?? e.originalTarget?.getAttribute(attr) ?? null;
+};
+export const getTargetIndexInParent = (e, parent) => {
+  const indexOf = Array.prototype.indexOf.call(parent.children, e.target);
+  if (indexOf >= 0) {
+    return indexOf;
+  }
+  const origTgt = e.originalTarget;
+  if (origTgt != null) {
+    return Array.prototype.indexOf.call(parent.children, origTgt);
+  }
+  return -1;
+};

package/utils/get-react-event-handler.d.ts

@@ -0,0 +1 @@
+export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;

package/utils/get-react-event-handler.js

@@ -0,0 +1,8 @@
+export const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (Object.hasOwn($element, key) && key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+  return null;
+};

package/utils/index.d.ts

@@ -0,0 +1,12 @@
+export * from './context';
+export * from './csv';
+export * from './dom';
+export * from './element';
+export * from './rect';
+export * from './slot';
+export * from './throttle';
+export * from './debounce';
+export * from './get-react-event-handler';
+export * from './markdown';
+export * from './event-target';
+export * from './uid';

package/utils/index.js

@@ -0,0 +1,12 @@
+export * from './context';
+export * from './csv';
+export * from './dom';
+export * from './element';
+export * from './rect';
+export * from './slot';
+export * from './throttle';
+export * from './debounce';
+export * from './get-react-event-handler';
+export * from './markdown';
+export * from './event-target';
+export * from './uid';

package/utils/markdown.d.ts

@@ -0,0 +1,19 @@
+export type TMarkdownInlineParams = {
+    isBold?: boolean;
+    isItalic?: boolean;
+    isStrikethrough?: boolean;
+};
+export type TMarkdownParseVisitor = {
+    link(text: string, href: string, attributes?: string[]): void;
+    emoji(emojiChar: string): void;
+    codetag(text: string): void;
+    inline(text: string, params: TMarkdownInlineParams): void;
+    linebreak(): void;
+    paragraph(): void;
+    list(isOrdered: boolean): void;
+    endList(): void;
+    listItem(): void;
+    end(): Node;
+};
+export declare const isEmojiString: (data: string) => boolean;
+export declare const parseMarkdown: (md: string, visitor: TMarkdownParseVisitor) => Node;

package/utils/markdown.js

@@ -0,0 +1,143 @@
+const regLinebreak = /(?:<br>\n|<br>|\n)/;
+const regParagraph = /\n{2,}/;
+const regEm3Star = /\*\*\*(?<em3>.+?)\*\*\*/;
+const regEm2Star = /\*\*(?<em2>.+?)\*\*/;
+const regEm1Star = /\*(?<em1>.+?)\*/;
+const regEm3Underscore = /___(?<em3>.+?)___/;
+const regEm2Underscore = /__(?<em2>.+?)__/;
+const regEm1Underscore = /_(?<em1>.+?)_/;
+const regCodeTag = /`(?<code>.+?)`/;
+const regStrikethrough = /~~(?<strike>.+?)~~/;
+const regLink = /!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\)(\{(?<linkattrs>[^)]+?)\})?/;
+const regEmoji = /(?<emoji>(?![0-9*#])\p{Emoji})/u;
+const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
+const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
+const allRegs = [regCodeTag, regLink, regEm3Star, regEm2Star, regEm1Star, regEm3Underscore, regEm2Underscore, regEm1Underscore, regStrikethrough, regEmoji];
+export const isEmojiString = data => regEmoji.test(data);
+const excludeRegs = function (regs) {
+  for (var _len = arguments.length, excluding = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    excluding[_key - 1] = arguments[_key];
+  }
+  return regs.filter(r => !excluding.includes(r));
+};
+const matchClosest = (regs, line) => {
+  return regs.map(reg => reg.exec(line)).reduce((res, match) => {
+    if (match === null) {
+      return res;
+    }
+    if (res === null || res.index > match.index) {
+      return match;
+    }
+    return res;
+  }, null);
+};
+const INITIAL_CONTEXT = {
+  isBold: false,
+  isItalic: false,
+  isStrikethrough: false
+};
+const createLineParser = visitor => function parseLine(regs, md) {
+  let context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INITIAL_CONTEXT;
+  let line = md;
+  let match = null;
+  while ((match = matchClosest(regs, line)) !== null) {
+    const groups = match.groups;
+    const matchedStr = match[0];
+    if (match.index > 0) {
+      visitor.inline(line.substring(0, match.index), context);
+    }
+    line = line.substring(match.index + matchedStr.length);
+    if (groups?.linkhref != null) {
+      visitor.link(groups.linktext, groups.linkhref, groups.linkattrs?.split(' '));
+    }
+    if (groups?.code != null) {
+      visitor.codetag(groups.code);
+    }
+    if (groups?.emoji != null) {
+      visitor.emoji(groups.emoji);
+    }
+    if (groups?.em1 != null) {
+      parseLine(excludeRegs(regs, regEm1Star, regEm1Underscore), groups.em1, {
+        ...context,
+        isItalic: true
+      });
+    }
+    if (groups?.em2 != null) {
+      parseLine(excludeRegs(regs, regEm2Star, regEm2Underscore), groups.em2, {
+        ...context,
+        isBold: true
+      });
+    }
+    if (groups?.em3 != null) {
+      parseLine(excludeRegs(regs, regEm3Star, regEm3Underscore, regEm2Star, regEm2Underscore, regEm1Star, regEm1Underscore), groups.em3, {
+        ...context,
+        isBold: true,
+        isItalic: true
+      });
+    }
+    if (groups?.strike != null) {
+      parseLine(excludeRegs(regs, regStrikethrough), groups.strike, {
+        ...context,
+        isStrikethrough: true
+      });
+    }
+  }
+  if (line.length > 0) {
+    visitor.inline(line, context);
+  }
+};
+const createBlockParser = visitor => {
+  const parseLine = createLineParser(visitor);
+  const listRegs = [regUList, regOList];
+  const getListItemText = match => {
+    return match.groups.ultext ?? match.groups.oltext;
+  };
+  const BLOCK_MODE_PARAGRAPH = 1;
+  const BLOCK_MODE_ULIST = 2;
+  const BLOCK_MODE_OLIST = 2;
+  return function parseBlock(lines) {
+    let mode = 0;
+    for (let i = 0; i < lines.length; ++i) {
+      const listMatch = matchClosest(listRegs, lines[i]);
+      const isListLine = listMatch !== null;
+      if (isListLine) {
+        const groups = listMatch.groups;
+        const isOrderedList = groups.oltext != null;
+        mode = isOrderedList ? BLOCK_MODE_OLIST : BLOCK_MODE_ULIST;
+        visitor.list(isOrderedList);
+        const listItemInitialIndent = groups.indent;
+        let listItemLines = [getListItemText(listMatch)];
+        visitor.listItem();
+        for (++i; i < lines.length; ++i) {
+          const listItemMatch = isOrderedList ? regOList.exec(lines[i]) : regUList.exec(lines[i]);
+          if (listItemMatch !== null && listItemMatch.groups.indent === listItemInitialIndent) {
+            parseBlock(listItemLines);
+            listItemLines = [getListItemText(listItemMatch)];
+            visitor.listItem();
+          } else {
+            listItemLines.push(lines[i]);
+          }
+        }
+        parseBlock(listItemLines);
+        visitor.endList();
+        mode = 0;
+      } else {
+        if (mode === BLOCK_MODE_PARAGRAPH) {
+          visitor.linebreak();
+        }
+        if (mode !== BLOCK_MODE_PARAGRAPH) {
+          mode = BLOCK_MODE_PARAGRAPH;
+          visitor.paragraph();
+        }
+        parseLine(allRegs, lines[i]);
+      }
+    }
+  };
+};
+export const parseMarkdown = (md, visitor) => {
+  const parseBlock = createBlockParser(visitor);
+  for (const block of md.trim().split(regParagraph)) {
+    parseBlock(block.trim().split(regLinebreak));
+  }
+  return visitor.end();
+};

package/utils/rect.d.ts

@@ -0,0 +1,4 @@
+import type { TRect } from '../types';
+export declare const getRect: (el: Element) => TRect;
+export declare const rectOverlap: (targetRect: TRect, contentRect: TRect) => boolean;
+export declare const getTargetRect: (slot: HTMLSlotElement) => TRect | null;

package/utils/rect.js

@@ -0,0 +1,28 @@
+import { getFirstSlotElement } from './slot';
+export const getRect = el => {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = el.getBoundingClientRect();
+  return {
+    x,
+    y,
+    width,
+    height
+  };
+};
+export const rectOverlap = (targetRect, contentRect) => {
+  return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
+};
+export const getTargetRect = slot => {
+  const item = getFirstSlotElement(slot, true);
+  if (item === null) {
+    return null;
+  }
+  if (Reflect.has(item, 'footprintRect')) {
+    return item.footprintRect;
+  }
+  return getRect(item);
+};

package/utils/size.d.ts

@@ -0,0 +1,5 @@
+export type TSinchSize = 'l' | 'm' | 's';
+export type TSinchSizeEx = TSinchSize | 'xs';
+export declare const DEFAULT_SIZE: TSinchSize;
+export declare const sizeValues: readonly TSinchSize[];
+export declare const sizeExValues: readonly TSinchSizeEx[];

package/utils/size.js

@@ -0,0 +1,3 @@
+export const DEFAULT_SIZE = 'm';
+export const sizeValues = ['l', 'm', 's'];
+export const sizeExValues = [...sizeValues, 'xs'];

package/utils/slot.d.ts

@@ -0,0 +1,4 @@
+import type { NectaryElement } from './element';
+export declare const getFirstSlotElement: (root: HTMLSlotElement, isDeep?: boolean) => HTMLElement | null;
+export declare const getFirstFocusableElement: (root: Element) => NectaryElement | null;
+export declare const isElementFocused: ($el: Element | null) => boolean;

package/utils/slot.js

@@ -0,0 +1,38 @@
+const isSlotElement = el => {
+  return el.tagName === 'SLOT';
+};
+export const getFirstSlotElement = function (root) {
+  let isDeep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const el = root.assignedElements()[0];
+  if (el == null) {
+    return null;
+  }
+  if (isDeep && isSlotElement(el)) {
+    return getFirstSlotElement(el, isDeep);
+  }
+  return el;
+};
+const getChildren = root => {
+  if (isSlotElement(root)) {
+    return root.assignedElements();
+  }
+  return Array.from(root.children);
+};
+const isFocusable = el => {
+  return el.focusable === true;
+};
+export const getFirstFocusableElement = root => {
+  for (const child of getChildren(root)) {
+    if (isFocusable(child)) {
+      return child;
+    }
+    const resultEl = getFirstFocusableElement(child);
+    if (resultEl !== null) {
+      return resultEl;
+    }
+  }
+  return null;
+};
+export const isElementFocused = $el => {
+  return $el !== null && $el === $el.getRootNode().activeElement;
+};

package/utils/throttle.d.ts

@@ -0,0 +1,4 @@
+export declare const throttleAnimationFrame: (cb: () => void) => {
+    fn: () => void;
+    cancel: () => void;
+};

package/utils/throttle.js

@@ -0,0 +1,20 @@
+const createThrottle = (delayFn, cancelFn) => cb => {
+  let id = null;
+  const delayCallback = () => {
+    id = null;
+    cb();
+  };
+  return {
+    fn: () => {
+      if (id === null) {
+        id = delayFn(delayCallback);
+      }
+    },
+    cancel: () => {
+      if (id !== null) {
+        cancelFn(id);
+      }
+    }
+  };
+};
+export const throttleAnimationFrame = createThrottle(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);

package/utils/uid.d.ts

@@ -0,0 +1 @@
+export declare const getUid: () => string;

package/utils/uid.js

@@ -0,0 +1,13 @@
+export const getUid = () => crypto.getRandomValues(new Uint8Array(21)).reduce((id, byte) => {
+  const nextByte = byte & 63;
+  if (nextByte < 36) {
+    return id + nextByte.toString(36);
+  }
+  if (nextByte < 62) {
+    return id + (nextByte - 26).toString(36).toUpperCase();
+  }
+  if (nextByte > 62) {
+    return `${id}-`;
+  }
+  return `${id}_`;
+}, '');

package/vertical-stepper/index.d.ts

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