@nectary/components 4.8.1 → 4.9.0

package/tabs-option/types.d.ts

@@ -1,19 +1,5 @@
-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> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTabsOptionProps = {
     /** Value */
     value: string;
     /** Text */
@@ -22,23 +8,28 @@ export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement>
     'aria-label': string;
     /** Disabled */
     disabled?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-tab-font-label'?: string;
-        '--sinch-comp-tab-size-icon'?: string;
-        '--sinch-comp-tab-shape-radius'?: string;
-        '--sinch-comp-tab-color-default-background-initial'?: string;
-        '--sinch-comp-tab-color-default-background-hover'?: string;
-        '--sinch-comp-tab-color-default-text-initial'?: string;
-        '--sinch-comp-tab-color-default-icon-initial'?: string;
-        '--sinch-comp-tab-color-default-outline-focus'?: string;
-        '--sinch-comp-tab-color-checked-text-initial'?: string;
-        '--sinch-comp-tab-color-checked-icon-initial'?: string;
-        '--sinch-comp-tab-color-checked-border-initial'?: string;
-        '--sinch-comp-tab-color-disabled-text-initial'?: string;
-        '--sinch-comp-tab-color-disabled-icon-initial'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
 };
+export type TSinchTabsOptionStyle = {
+    '--sinch-comp-tab-font-label'?: string;
+    '--sinch-comp-tab-size-icon'?: string;
+    '--sinch-comp-tab-shape-radius'?: string;
+    '--sinch-comp-tab-color-default-background-initial'?: string;
+    '--sinch-comp-tab-color-default-background-hover'?: string;
+    '--sinch-comp-tab-color-default-text-initial'?: string;
+    '--sinch-comp-tab-color-default-icon-initial'?: string;
+    '--sinch-comp-tab-color-default-outline-focus'?: string;
+    '--sinch-comp-tab-color-checked-text-initial'?: string;
+    '--sinch-comp-tab-color-checked-icon-initial'?: string;
+    '--sinch-comp-tab-color-checked-border-initial'?: string;
+    '--sinch-comp-tab-color-disabled-text-initial'?: string;
+    '--sinch-comp-tab-color-disabled-icon-initial'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchTabsOption = {
+    props: TSinchTabsOptionProps;
+    style: TSinchTabsOptionStyle;
+};
+export type TSinchTabsOptionElement = NectaryComponentVanillaByType<TSinchTabsOption>;
+export type TSinchTabsOptionReact = NectaryComponentReactByType<TSinchTabsOption>;

package/tag/index.d.ts

@@ -1,19 +1,24 @@
 import '../text';
-import type { TSinchTagElement, TSinchTagReact } from './types';
+import '../tooltip';
+import type { TSinchTag } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-tag': TSinchTag;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-tag': TSinchTagElement;
+        'sinch-tag': NectaryComponentVanilla<'sinch-tag'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tag': TSinchTagReact;
+            'sinch-tag': NectaryComponentReact<'sinch-tag'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tag': TSinchTagReact;
+            'sinch-tag': NectaryComponentReact<'sinch-tag'>;
         }
     }
 }

package/tag/index.js

@@ -1,11 +1,13 @@
 import '../text';
+import '../tooltip';
 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>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#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><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';
 import { getTagColorBg, getTagColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag', class extends NectaryElement {
   #$text;
+  #$tooltip;
   #$wrapper;
   constructor() {
     super();
@@ -13,10 +15,12 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
   }
   connectedCallback() {
     super.connectedCallback();
     this.#updateColor();
+    this.#updateEllipsisTooltip();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -32,6 +36,7 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
   }
   set text(value) {
     updateAttribute(this, 'text', value);
+    updateAttribute(this.#$tooltip, 'text', value);
   }
   get small() {
     return getBooleanAttribute(this, 'small');
@@ -55,6 +60,7 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
       case 'text':
         {
           this.#$text.textContent = newVal;
+          this.#updateEllipsisTooltip();
           break;
         }
       case 'small':
@@ -81,4 +87,15 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
       this.#$wrapper.style.removeProperty('--sinch-global-color-icon');
     }
   }
+  #updateEllipsisTooltip() {
+    const ellipsis = getBooleanAttribute(this, 'ellipsis');
+    requestAnimationFrame(() => {
+      const hasOverflow = this.#$text.offsetWidth < this.#$text.scrollWidth;
+      if (ellipsis && hasOverflow) {
+        updateAttribute(this.#$tooltip, 'text', this.text);
+      } else {
+        updateAttribute(this.#$tooltip, 'text', '');
+      }
+    });
+  }
 });

package/tag/types.d.ts

@@ -1,40 +1,33 @@
 import type { TSinchTagColor } from './colors';
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type { TSinchTagColor };
-export type TSinchTagElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Color, gray by default */
-    color: TSinchTagColor | 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> & {
+export type TSinchTagProps = {
     /** Text */
     text: string;
     /** Color, gray by default */
     color?: TSinchTagColor;
     /** Small */
     small?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-tag-size-container-m'?: string;
-        '--sinch-comp-tag-size-container-s'?: string;
-        '--sinch-comp-tag-size-icon-m'?: string;
-        '--sinch-comp-tag-size-icon-s'?: string;
-        '--sinch-comp-tag-shape-radius'?: string;
-        '--sinch-comp-tag-font-size-m-label'?: string;
-        '--sinch-comp-tag-font-size-s-label'?: string;
-        '--sinch-comp-tag-color-default-background'?: string;
-        '--sinch-comp-tag-color-default-foreground'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
+    /** Ellipsis */
+    ellipsis?: boolean;
+};
+export type TSinchTagStyle = {
+    '--sinch-comp-tag-size-container-m'?: string;
+    '--sinch-comp-tag-size-container-s'?: string;
+    '--sinch-comp-tag-size-icon-m'?: string;
+    '--sinch-comp-tag-size-icon-s'?: string;
+    '--sinch-comp-tag-shape-radius'?: string;
+    '--sinch-comp-tag-font-size-m-label'?: string;
+    '--sinch-comp-tag-font-size-s-label'?: string;
+    '--sinch-comp-tag-color-default-background'?: string;
+    '--sinch-comp-tag-color-default-foreground'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchTag = {
+    props: TSinchTagProps;
+    style: TSinchTagStyle;
 };
+export type TSinchTagElement = NectaryComponentVanillaByType<TSinchTag>;
+export type TSinchTagReact = NectaryComponentReactByType<TSinchTag>;

package/text/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchTextElement, TSinchTextReact } from './types';
+import type { TSinchText } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-text': TSinchText;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-text': TSinchTextElement;
+        'sinch-text': NectaryComponentVanilla<'sinch-text'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-text': TSinchTextReact;
+            'sinch-text': NectaryComponentReact<'sinch-text'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-text': TSinchTextReact;
+            'sinch-text': NectaryComponentReact<'sinch-text'>;
         }
     }
 }

package/text/types.d.ts

@@ -1,24 +1,6 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } 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> & {
+export type TSinchTextProps = {
     /** Type */
     type: TSinchTextType;
     /** Block (“paragraph”, default) or inline (“span”) */
@@ -27,18 +9,23 @@ export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
     emphasized?: boolean;
     /** Cuts the long text with “…” ellipsis */
     ellipsis?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-text-align'?: string;
-        '--sinch-comp-text-font'?: string;
-        '--sinch-sys-font-body-m'?: string;
-        '--sinch-sys-font-body-s'?: string;
-        '--sinch-sys-font-body-xs'?: string;
-        '--sinch-sys-font-body-xxs'?: string;
-        '--sinch-sys-font-body-emphasize'?: string;
-        '--sinch-sys-font-body-emphasize-s'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-sys-color-text-default'?: string;
-        '--sinch-global-text-white-space'?: string;
-    };
 };
+export type TSinchTextStyle = {
+    '--sinch-comp-text-align'?: string;
+    '--sinch-comp-text-font'?: string;
+    '--sinch-sys-font-body-m'?: string;
+    '--sinch-sys-font-body-s'?: string;
+    '--sinch-sys-font-body-xs'?: string;
+    '--sinch-sys-font-body-xxs'?: string;
+    '--sinch-sys-font-body-emphasize'?: string;
+    '--sinch-sys-font-body-emphasize-s'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-sys-color-text-default'?: string;
+    '--sinch-global-text-white-space'?: string;
+};
+export type TSinchText = {
+    props: TSinchTextProps;
+    style: TSinchTextStyle;
+};
+export type TSinchTextElement = NectaryComponentVanillaByType<TSinchText>;
+export type TSinchTextReact = NectaryComponentReactByType<TSinchText>;

package/textarea/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchTextareaElement, TSinchTextareaReact } from './types';
+import type { TSinchTextarea } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-textarea': TSinchTextarea;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-textarea': TSinchTextareaElement;
+        'sinch-textarea': NectaryComponentVanilla<'sinch-textarea'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-textarea': TSinchTextareaReact;
+            'sinch-textarea': NectaryComponentReact<'sinch-textarea'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-textarea': TSinchTextareaReact;
+            'sinch-textarea': NectaryComponentReact<'sinch-textarea'>;
         }
     }
 }

package/textarea/types.d.ts

@@ -1,42 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTextareaElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Text that appears in the text field when it has no value set */
-    placeholder: string | null;
-    /** Disabled */
-    disabled: boolean;
-    /** Invalid state */
-    invalid: boolean;
-    selectionStart: HTMLTextAreaElement['selectionStart'];
-    selectionEnd: HTMLTextAreaElement['selectionEnd'];
-    selectionDirection: HTMLTextAreaElement['selectionDirection'];
-    /** Number of rows */
-    rows: HTMLTextAreaElement['rows'];
-    minRows: HTMLTextAreaElement['rows'];
-    /** Whether the text field is resizable */
-    resizable: boolean;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Focus event */
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    /** Blur event */
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Text that appears in the text field when it has no value set */
-    setAttribute(name: 'placeholder', value: string): void;
-    /** Invalid state */
-    setAttribute(name: 'invalid', value: ''): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-    /** Number of rows */
-    setAttribute(name: 'rows', value: string): void;
-    setAttribute(name: 'minrows', value: string): void;
-    /** Whether the text field is resizable */
-    setAttribute(name: 'resizable', value: ''): void;
-};
-export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTextareaProps = {
     /** Value */
     value: string;
     /** Text that appears in the text field when it has no value set */
@@ -51,24 +14,35 @@ export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
     minRows?: number;
     /** Whether the text field is resizable */
     resizable?: boolean;
+    selectionStart?: number;
+    selectionEnd?: number;
+    selectionDirection?: 'forward' | 'backward' | 'none';
+};
+export type TSinchTextareaEvents = {
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<string>) => void;
+    '-change'?: (e: CustomEvent<string>) => void;
     /** Focus handler */
-    'on-focus'?: (e: CustomEvent<void>) => void;
+    '-focus'?: (e: CustomEvent<void>) => void;
     /** Blur handler */
-    'on-blur'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-textarea-shape-radius'?: string;
-        '--sinch-comp-textarea-font-input'?: string;
-        '--sinch-comp-textarea-size-resize-handle'?: string;
-        '--sinch-comp-textarea-color-default-background-initial'?: string;
-        '--sinch-comp-textarea-color-default-text-initial'?: string;
-        '--sinch-comp-textarea-color-default-text-placeholder'?: string;
-        '--sinch-comp-textarea-color-default-border-initial'?: string;
-        '--sinch-comp-textarea-color-default-border-focus'?: string;
-        '--sinch-comp-textarea-color-invalid-border-initial'?: string;
-        '--sinch-comp-textarea-color-disabled-text-initial'?: string;
-        '--sinch-comp-textarea-color-disabled-border-initial'?: string;
-    };
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchTextareaStyle = {
+    '--sinch-comp-textarea-shape-radius'?: string;
+    '--sinch-comp-textarea-font-input'?: string;
+    '--sinch-comp-textarea-size-resize-handle'?: string;
+    '--sinch-comp-textarea-color-default-background-initial'?: string;
+    '--sinch-comp-textarea-color-default-text-initial'?: string;
+    '--sinch-comp-textarea-color-default-text-placeholder'?: string;
+    '--sinch-comp-textarea-color-default-border-initial'?: string;
+    '--sinch-comp-textarea-color-default-border-focus'?: string;
+    '--sinch-comp-textarea-color-invalid-border-initial'?: string;
+    '--sinch-comp-textarea-color-disabled-text-initial'?: string;
+    '--sinch-comp-textarea-color-disabled-border-initial'?: string;
+};
+export type TSinchTextarea = {
+    props: TSinchTextareaProps;
+    events: TSinchTextareaEvents;
+    style: TSinchTextareaStyle;
 };
+export type TSinchTextareaElement = NectaryComponentVanillaByType<TSinchTextarea>;
+export type TSinchTextareaReact = NectaryComponentReactByType<TSinchTextarea>;

package/tile-control/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchTileControlElement, TSinchTileControlReact } from './types';
+import type { TSinchTileControl } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-tile-control': TSinchTileControl;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-tile-control': TSinchTileControlElement;
+        'sinch-tile-control': NectaryComponentVanilla<'sinch-tile-control'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tile-control': TSinchTileControlReact;
+            'sinch-tile-control': NectaryComponentReact<'sinch-tile-control'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tile-control': TSinchTileControlReact;
+            'sinch-tile-control': NectaryComponentReact<'sinch-tile-control'>;
         }
     }
 }

package/tile-control/types.d.ts

@@ -1,27 +1,7 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 /** Number of coumns from 1 to 10 */
 export type TSinchTileControlColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | number;
-export type TSinchTileControlElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Small */
-    small: boolean;
-    /** Multiple */
-    multiple: boolean;
-    /** Number of columns from 1 to 10 */
-    cols: TSinchTileControlColumns;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Small */
-    setAttribute(name: 'small', value: ''): void;
-    /** Multiple */
-    setAttribute(name: 'multiple', value: ''): void;
-    /** Number of columns from 1 to 10 */
-    setAttribute(name: 'cols', value: string): void;
-};
-export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement> & {
+export type TSinchTileControlProps = {
     /** Value */
     value: string;
     /** Multiple */
@@ -32,10 +12,18 @@ export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement
     cols: TSinchTileControlColumns;
     /** Label that is used for a11y */
     'aria-label': string;
+};
+export type TSinchTileControlEvents = {
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<string>) => void;
-} & {
-    style?: {
-        '--sinch-grid-num-columns'?: string;
-    };
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchTileControlStyle = {
+    '--sinch-grid-num-columns'?: string;
+};
+export type TSinchTileControl = {
+    props: TSinchTileControlProps;
+    events: TSinchTileControlEvents;
+    style: TSinchTileControlStyle;
 };
+export type TSinchTileControlElement = NectaryComponentVanillaByType<TSinchTileControl>;
+export type TSinchTileControlReact = NectaryComponentReactByType<TSinchTileControl>;

package/tile-control-option/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchTileControlOptionElement, TSinchTileControlOptionReact } from './types';
+import type { TSinchTileControlOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-tile-control-option': TSinchTileControlOption;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-tile-control-option': TSinchTileControlOptionElement;
+        'sinch-tile-control-option': NectaryComponentVanilla<'sinch-tile-control-option'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tile-control-option': TSinchTileControlOptionReact;
+            'sinch-tile-control-option': NectaryComponentReact<'sinch-tile-control-option'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tile-control-option': TSinchTileControlOptionReact;
+            'sinch-tile-control-option': NectaryComponentReact<'sinch-tile-control-option'>;
         }
     }
 }