@nectary/components 4.8.2 → 4.9.1

package/skeleton-item/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchSkeletonItemElement, TSinchSkeletonItemReact } from './types';
+import type { TSinchSkeletonItem } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-skeleton-item': TSinchSkeletonItem;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-skeleton-item': TSinchSkeletonItemElement;
+        'sinch-skeleton-item': NectaryComponentVanilla<'sinch-skeleton-item'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-skeleton-item': TSinchSkeletonItemReact;
+            'sinch-skeleton-item': NectaryComponentReact<'sinch-skeleton-item'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-skeleton-item': TSinchSkeletonItemReact;
+            'sinch-skeleton-item': NectaryComponentReact<'sinch-skeleton-item'>;
         }
     }
 }

package/skeleton-item/types.d.ts

@@ -1,26 +1,27 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 import type { TSinchSizeEx } from '../utils/size';
 export type TSinchSkeletonItemBoundingBox = TRect & {
     radius: number;
 };
-export type TSinchSkeletonItemElement = HTMLElement & {
-    /** Size */
-    setAttribute(name: 'size', value: TSinchSizeEx): void;
-};
-export type TSinchSkeletonItemReact = TSinchElementReact<TSinchSkeletonItemElement> & {
+export type TSinchSkeletonItemProps = {
     /** Size */
     size?: TSinchSizeEx;
-} & {
-    style?: {
-        '--sinch-sys-size-xs'?: string;
-        '--sinch-sys-size-s'?: string;
-        '--sinch-sys-size-m'?: string;
-        '--sinch-sys-size-l'?: string;
-        '--sinch-sys-shape-radius-xs'?: string;
-        '--sinch-sys-shape-radius-s'?: string;
-        '--sinch-sys-shape-radius-m'?: string;
-        '--sinch-sys-shape-radius-l'?: string;
-        '--sinch-sys-color-border-subtle'?: string;
-        '--sinch-local-shape-radius'?: string;
-    };
 };
+export type TSinchSkeletonItemStyle = {
+    '--sinch-sys-size-xs'?: string;
+    '--sinch-sys-size-s'?: string;
+    '--sinch-sys-size-m'?: string;
+    '--sinch-sys-size-l'?: string;
+    '--sinch-sys-shape-radius-xs'?: string;
+    '--sinch-sys-shape-radius-s'?: string;
+    '--sinch-sys-shape-radius-m'?: string;
+    '--sinch-sys-shape-radius-l'?: string;
+    '--sinch-sys-color-border-subtle'?: string;
+    '--sinch-local-shape-radius'?: string;
+};
+export type TSinchSkeletonItem = {
+    props: TSinchSkeletonItemProps;
+    style: TSinchSkeletonItemStyle;
+};
+export type TSinchSkeletonItemElement = NectaryComponentVanillaByType<TSinchSkeletonItem>;
+export type TSinchSkeletonItemReact = NectaryComponentReactByType<TSinchSkeletonItem>;

package/spinner/index.d.ts

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

package/spinner/types.d.ts

@@ -1,17 +1,16 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 import type { TSinchSize } from '../utils/size';
-export type TSinchSpinnerElement = HTMLElement & {
-    /** Spinner size */
-    size: TSinchSize;
-    /** Spinner size */
-    setAttribute(name: 'size', value: TSinchSize): void;
-};
-export type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
+export type TSinchSpinnerProps = {
     /** Spinner size */
     size?: TSinchSize;
-} & {
-    style?: {
-        '--sinch-global-color-icon'?: string;
-        '--sinch-sys-color-text-default'?: string;
-    };
 };
+export type TSinchSpinnerStyle = {
+    '--sinch-global-color-icon'?: string;
+    '--sinch-sys-color-text-default'?: string;
+};
+export type TSinchSpinner = {
+    props: TSinchSpinnerProps;
+    style: TSinchSpinnerStyle;
+};
+export type TSinchSpinnerElement = NectaryComponentVanillaByType<TSinchSpinner>;
+export type TSinchSpinnerReact = NectaryComponentReactByType<TSinchSpinner>;

package/table/index.d.ts

@@ -1,18 +1,21 @@
-import type { TSinchTableElement, TSinchTableReact } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-table': {};
+    }
     interface HTMLElementTagNameMap {
-        'sinch-table': TSinchTableElement;
+        'sinch-table': NectaryComponentVanilla<'sinch-table'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table': TSinchTableReact;
+            'sinch-table': NectaryComponentReact<'sinch-table'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table': TSinchTableReact;
+            'sinch-table': NectaryComponentReact<'sinch-table'>;
         }
     }
 }

package/table/types.d.ts

@@ -1,3 +1,3 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchTableElement = HTMLElement;
-export type TSinchTableReact = TSinchElementReact<TSinchTableElement>;
+export type TSinchTableReact = NectaryComponentReactByType<TSinchTableElement>;

package/table-body/index.d.ts

@@ -1,18 +1,21 @@
-import type { TSinchTableBodyElement, TSinchTableBodyReact } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-table-body': {};
+    }
     interface HTMLElementTagNameMap {
-        'sinch-table-body': TSinchTableBodyElement;
+        'sinch-table-body': NectaryComponentVanilla<'sinch-table-body'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-body': TSinchTableBodyReact;
+            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-body': TSinchTableBodyReact;
+            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
         }
     }
 }

package/table-body/types.d.ts

@@ -1,3 +1,3 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchTableBodyElement = HTMLElement;
-export type TSinchTableBodyReact = TSinchElementReact<TSinchTableBodyElement>;
+export type TSinchTableBodyReact = NectaryComponentReactByType<TSinchTableBodyElement>;

package/table-cell/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchTableCellElement, TSinchTableCellReact } from './types';
+import type { TSinchTableCell } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-table-cell': TSinchTableCell;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-table-cell': TSinchTableCellElement;
+        'sinch-table-cell': NectaryComponentVanilla<'sinch-table-cell'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-cell': TSinchTableCellReact;
+            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-cell': TSinchTableCellReact;
+            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
         }
     }
 }

package/table-cell/types.d.ts

@@ -1,13 +1,14 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchTableAlignType = 'start' | 'center' | 'end';
-export type TSinchTableCellElement = HTMLElement & {
-    align: TSinchTableAlignType;
-    setAttribute(name: 'align', value: TSinchTableAlignType): void;
-};
-export type TSinchTableCellReact = TSinchElementReact<TSinchTableCellElement> & {
+export type TSinchTableCellProps = {
     align?: TSinchTableAlignType;
-} & {
-    style?: {
-        '--sinch-comp-table-color-cell-default-border-initial'?: string;
-    };
 };
+export type TSinchTableCellStyle = {
+    '--sinch-comp-table-color-cell-default-border-initial'?: string;
+};
+export type TSinchTableCell = {
+    props: TSinchTableCellProps;
+    style: TSinchTableCellStyle;
+};
+export type TSinchTableCellElement = NectaryComponentVanillaByType<TSinchTableCell>;
+export type TSinchTableCellReact = NectaryComponentReactByType<TSinchTableCell>;

package/table-head/index.d.ts

@@ -1,18 +1,21 @@
-import type { TSinchTableHeadElement, TSinchTableHeadReact } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-table-head': {};
+    }
     interface HTMLElementTagNameMap {
-        'sinch-table-head': TSinchTableHeadElement;
+        'sinch-table-head': NectaryComponentVanilla<'sinch-table-head'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-head': TSinchTableHeadReact;
+            'sinch-table-head': NectaryComponentReact<'sinch-table-head'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-head': TSinchTableHeadReact;
+            'sinch-table-head': NectaryComponentReact<'sinch-table-head'>;
         }
     }
 }

package/table-head/types.d.ts

@@ -1,3 +1,3 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchTableHeadElement = HTMLElement;
-export type TSinchTableHeadReact = TSinchElementReact<TSinchTableHeadElement>;
+export type TSinchTableHeadReact = NectaryComponentReactByType<TSinchTableHeadElement>;

package/table-head-cell/index.d.ts

@@ -1,19 +1,23 @@
 import '../text';
-import type { TSinchTableHeaderCellElement, TSinchTableHeaderCellReact } from './types';
+import type { TSinchTableHeaderCell } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-table-head-cell': TSinchTableHeaderCell;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-table-head-cell': TSinchTableHeaderCellElement;
+        'sinch-table-head-cell': NectaryComponentVanilla<'sinch-table-head-cell'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-head-cell': TSinchTableHeaderCellReact;
+            'sinch-table-head-cell': NectaryComponentReact<'sinch-table-head-cell'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-head-cell': TSinchTableHeaderCellReact;
+            'sinch-table-head-cell': NectaryComponentReact<'sinch-table-head-cell'>;
         }
     }
 }

package/table-head-cell/types.d.ts

@@ -1,23 +1,20 @@
 import type { TSinchTableAlignType } from '../table-cell/types';
-import type { TSinchElementReact } from '../types';
-export type TSinchTableHeaderCellElement = HTMLElement & {
-    text: string | null;
-    align: TSinchTableAlignType;
-    fit: boolean;
-    setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'align', value: TSinchTableAlignType): void;
-    setAttribute(name: 'fit', value: ''): void;
-};
-export type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCellElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTableHeaderCellProps = {
     text?: string;
     fit?: boolean;
     align?: TSinchTableAlignType;
-} & {
-    style?: {
-        '--sinch-comp-table-color-head-cell-default-border-initial'?: string;
-        '--sinch-comp-table-color-head-cell-default-icon-initial'?: string;
-        '--sinch-comp-table-color-head-cell-default-text-initial'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-color-text'?: string;
-    };
 };
+export type TSinchTableHeaderCellStyle = {
+    '--sinch-comp-table-color-head-cell-default-border-initial'?: string;
+    '--sinch-comp-table-color-head-cell-default-icon-initial'?: string;
+    '--sinch-comp-table-color-head-cell-default-text-initial'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-color-text'?: string;
+};
+export type TSinchTableHeaderCell = {
+    props: TSinchTableHeaderCellProps;
+    style: TSinchTableHeaderCellStyle;
+};
+export type TSinchTableHeaderCellElement = NectaryComponentVanillaByType<TSinchTableHeaderCell>;
+export type TSinchTableHeaderCellReact = NectaryComponentReactByType<TSinchTableHeaderCell>;

package/table-row/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchTableRowElement, TSinchTableRowReact } from './types';
+import type { TSinchTableRow } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-table-row': TSinchTableRow;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-table-row': TSinchTableRowElement;
+        'sinch-table-row': NectaryComponentVanilla<'sinch-table-row'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-row': TSinchTableRowReact;
+            'sinch-table-row': NectaryComponentReact<'sinch-table-row'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-table-row': TSinchTableRowReact;
+            'sinch-table-row': NectaryComponentReact<'sinch-table-row'>;
         }
     }
 }

package/table-row/types.d.ts

@@ -1,18 +1,17 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTableRowElement = HTMLElement & {
-    sticky: boolean;
-    selected: boolean;
-    setAttribute(name: 'sticky', value: ''): void;
-    setAttribute(name: 'selected', value: ''): void;
-};
-export type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTableRowProps = {
     sticky?: boolean;
     selected?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-table-color-row-default-background-initial'?: string;
-        '--sinch-comp-table-color-row-default-background-hover'?: string;
-        '--sinch-comp-table-color-row-default-background-sticky'?: string;
-        '--sinch-comp-table-color-row-checked-background-initial'?: string;
-    };
 };
+export type TSinchTableRowStyle = {
+    '--sinch-comp-table-color-row-default-background-initial'?: string;
+    '--sinch-comp-table-color-row-default-background-hover'?: string;
+    '--sinch-comp-table-color-row-default-background-sticky'?: string;
+    '--sinch-comp-table-color-row-checked-background-initial'?: string;
+};
+export type TSinchTableRow = {
+    props: TSinchTableRowProps;
+    style: TSinchTableRowStyle;
+};
+export type TSinchTableRowElement = NectaryComponentVanillaByType<TSinchTableRow>;
+export type TSinchTableRowReact = NectaryComponentReactByType<TSinchTableRow>;

package/tabs/index.d.ts

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

package/tabs/types.d.ts

@@ -1,22 +1,25 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TSinchTabsElement = HTMLElement & {
-    /** Value */
-    value: string;
-    nthOptionRect(index: number): TRect | null;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-};
-export type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+export type TSinchTabsProps = {
     /** Value */
     value: string;
     /** Label that is used for a11y */
     'aria-label': string;
+};
+export type TSinchTabsMethods = {
+    nthOptionRect(index: number): TRect | null;
+};
+export type TSinchTabsEvents = {
     /** Change value event */
-    'on-change'?: (e: CustomEvent<string>) => void;
-} & {
-    style?: {
-        '--sinch-comp-tab-color-default-border-initial'?: string;
-    };
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchTabsStyle = {
+    '--sinch-comp-tab-color-default-border-initial'?: string;
+};
+export type TSinchTabs = {
+    props: TSinchTabsProps;
+    methods: TSinchTabsMethods;
+    events: TSinchTabsEvents;
+    style: TSinchTabsStyle;
 };
+export type TSinchTabsElement = NectaryComponentVanillaByType<TSinchTabs>;
+export type TSinchTabsReact = NectaryComponentReactByType<TSinchTabs>;

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

@@ -1,18 +1,22 @@
-import type { TSinchTabsIconOptionElement, TSinchTabsIconOptionReact } from './types';
+import type { TSinchTabsIconOption } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-tabs-icon-option': TSinchTabsIconOption;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-tabs-icon-option': TSinchTabsIconOptionElement;
+        'sinch-tabs-icon-option': NectaryComponentVanilla<'sinch-tabs-icon-option'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tabs-icon-option': TSinchTabsIconOptionReact;
+            'sinch-tabs-icon-option': NectaryComponentReact<'sinch-tabs-icon-option'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tabs-icon-option': TSinchTabsIconOptionReact;
+            'sinch-tabs-icon-option': NectaryComponentReact<'sinch-tabs-icon-option'>;
         }
     }
 }

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

@@ -1,33 +1,28 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTabsIconOptionElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Disabled */
-    disabled: boolean;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTabsIconOptionProps = {
     /** Value */
     value: string;
     /** Label that is used for a11y */
     'aria-label': string;
     /** Disabled */
     disabled?: boolean;
-} & {
-    style?: {
-        '--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-icon-initial'?: string;
-        '--sinch-comp-tab-color-default-outline-focus'?: string;
-        '--sinch-comp-tab-color-checked-icon-initial'?: string;
-        '--sinch-comp-tab-color-checked-border-initial'?: string;
-        '--sinch-comp-tab-color-disabled-icon-initial'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
 };
+export type TSinchTabsIconOptionStyle = {
+    '--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-icon-initial'?: string;
+    '--sinch-comp-tab-color-default-outline-focus'?: string;
+    '--sinch-comp-tab-color-checked-icon-initial'?: string;
+    '--sinch-comp-tab-color-checked-border-initial'?: string;
+    '--sinch-comp-tab-color-disabled-icon-initial'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchTabsIconOption = {
+    props: TSinchTabsIconOptionProps;
+    style: TSinchTabsIconOptionStyle;
+};
+export type TSinchTabsIconOptionElement = NectaryComponentVanillaByType<TSinchTabsIconOption>;
+export type TSinchTabsIconOptionReact = NectaryComponentReactByType<TSinchTabsIconOption>;

package/tabs-option/index.d.ts

@@ -1,19 +1,23 @@
 import '../text';
-import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
+import type { TSinchTabsOption } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-tabs-option': TSinchTabsOption;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-tabs-option': TSinchTabsOptionElement;
+        'sinch-tabs-option': NectaryComponentVanilla<'sinch-tabs-option'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tabs-option': TSinchTabsOptionReact;
+            'sinch-tabs-option': NectaryComponentReact<'sinch-tabs-option'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tabs-option': TSinchTabsOptionReact;
+            'sinch-tabs-option': NectaryComponentReact<'sinch-tabs-option'>;
         }
     }
 }