@nectary/components 4.8.2 → 4.9.0

package/segmented-control-option/types.d.ts

@@ -1,39 +1,37 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchSegmentedControlOptionElement = HTMLElement & {
-    value: string;
-    disabled: boolean;
-    text: string;
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchSegmentedControlOptionReact = TSinchElementReact<TSinchSegmentedControlOptionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchSegmentedControlOptionProps = {
     value: string;
     text: string;
     disabled?: boolean;
     'aria-label': string;
-    'on-focus'?: (e: CustomEvent<void>) => void;
-    'on-blur'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-segmented-control-shape-radius'?: string;
-        '--sinch-comp-segmented-control-color-default-text-initial'?: string;
-        '--sinch-comp-segmented-control-color-default-icon-initial'?: string;
-        '--sinch-comp-segmented-control-color-default-border-initial'?: string;
-        '--sinch-comp-segmented-control-color-default-background-initial'?: string;
-        '--sinch-comp-segmented-control-color-default-background-hover'?: string;
-        '--sinch-comp-segmented-control-color-default-outline-focus'?: string;
-        '--sinch-comp-segmented-control-color-checked-text-initial'?: string;
-        '--sinch-comp-segmented-control-color-checked-icon-initial'?: string;
-        '--sinch-comp-segmented-control-color-checked-border-initial'?: string;
-        '--sinch-comp-segmented-control-color-checked-background-initial'?: string;
-        '--sinch-comp-segmented-control-color-disabled-text-initial'?: string;
-        '--sinch-comp-segmented-control-color-disabled-icon-initial'?: string;
-        '--sinch-comp-segmented-control-color-disabled-border-initial'?: string;
-        '--sinch-comp-segmented-control-color-disabled-background-initial'?: string;
-        '--sinch-comp-segmented-control-font-label'?: string;
-        '--sinch-comp-segmented-control-size-icon'?: string;
-    };
 };
+export type TSinchSegmentedControlOptionEvents = {
+    '-focus'?: (e: CustomEvent<void>) => void;
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchSegmentedControlOptionStyle = {
+    '--sinch-comp-segmented-control-shape-radius'?: string;
+    '--sinch-comp-segmented-control-color-default-text-initial'?: string;
+    '--sinch-comp-segmented-control-color-default-icon-initial'?: string;
+    '--sinch-comp-segmented-control-color-default-border-initial'?: string;
+    '--sinch-comp-segmented-control-color-default-background-initial'?: string;
+    '--sinch-comp-segmented-control-color-default-background-hover'?: string;
+    '--sinch-comp-segmented-control-color-default-outline-focus'?: string;
+    '--sinch-comp-segmented-control-color-checked-text-initial'?: string;
+    '--sinch-comp-segmented-control-color-checked-icon-initial'?: string;
+    '--sinch-comp-segmented-control-color-checked-border-initial'?: string;
+    '--sinch-comp-segmented-control-color-checked-background-initial'?: string;
+    '--sinch-comp-segmented-control-color-disabled-text-initial'?: string;
+    '--sinch-comp-segmented-control-color-disabled-icon-initial'?: string;
+    '--sinch-comp-segmented-control-color-disabled-border-initial'?: string;
+    '--sinch-comp-segmented-control-color-disabled-background-initial'?: string;
+    '--sinch-comp-segmented-control-font-label'?: string;
+    '--sinch-comp-segmented-control-size-icon'?: string;
+};
+export type TSinchSegmentedControlOption = {
+    props: TSinchSegmentedControlOptionProps;
+    events: TSinchSegmentedControlOptionEvents;
+    style: TSinchSegmentedControlOptionStyle;
+};
+export type TSinchSegmentedControlOptionElement = NectaryComponentVanillaByType<TSinchSegmentedControlOption>;
+export type TSinchSegmentedControlOptionReact = NectaryComponentReactByType<TSinchSegmentedControlOption>;

package/segmented-icon-control/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchSegmentedIconControlElement, TSinchSegmentedIconControlReact } from './types';
+import type { TSinchSegmentedIconControl } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-segmented-icon-control': TSinchSegmentedIconControl;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-segmented-icon-control': TSinchSegmentedIconControlElement;
+        'sinch-segmented-icon-control': NectaryComponentVanilla<'sinch-segmented-icon-control'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-segmented-icon-control': TSinchSegmentedIconControlReact;
+            'sinch-segmented-icon-control': NectaryComponentReact<'sinch-segmented-icon-control'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-segmented-icon-control': TSinchSegmentedIconControlReact;
+            'sinch-segmented-icon-control': NectaryComponentReact<'sinch-segmented-icon-control'>;
         }
     }
 }

package/segmented-icon-control/types.d.ts

@@ -1,14 +1,15 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchSegmentedIconControlElement = HTMLElement & {
-    value: string;
-    multiple: boolean;
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'multiple', value: ''): void;
-};
-export type TSinchSegmentedIconControlReact = TSinchElementReact<TSinchSegmentedIconControlElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchSegmentedIconControlProps = {
     value: string;
     multiple?: boolean;
     'aria-label': string;
-    'on-change'?: (e: CustomEvent<string>) => void;
 };
+export type TSinchSegmentedIconControlEvents = {
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchSegmentedIconControl = {
+    props: TSinchSegmentedIconControlProps;
+    events: TSinchSegmentedIconControlEvents;
+};
+export type TSinchSegmentedIconControlElement = NectaryComponentVanillaByType<TSinchSegmentedIconControl>;
+export type TSinchSegmentedIconControlReact = NectaryComponentReactByType<TSinchSegmentedIconControl>;

package/segmented-icon-control-option/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchSegmentedIconControlOptionElement, TSinchSegmentedIconControlOptionReact } from './types';
+import type { TSinchSegmentedIconControlOption } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-segmented-icon-control-option': TSinchSegmentedIconControlOption;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-segmented-icon-control-option': TSinchSegmentedIconControlOptionElement;
+        'sinch-segmented-icon-control-option': NectaryComponentVanilla<'sinch-segmented-icon-control-option'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-segmented-icon-control-option': TSinchSegmentedIconControlOptionReact;
+            'sinch-segmented-icon-control-option': NectaryComponentReact<'sinch-segmented-icon-control-option'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-segmented-icon-control-option': TSinchSegmentedIconControlOptionReact;
+            'sinch-segmented-icon-control-option': NectaryComponentReact<'sinch-segmented-icon-control-option'>;
         }
     }
 }

package/segmented-icon-control-option/types.d.ts

@@ -1,32 +1,32 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchSegmentedIconControlOptionElement = HTMLElement & {
-    value: string;
-    disabled: boolean;
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchSegmentedIconControlOptionReact = TSinchElementReact<TSinchSegmentedIconControlOptionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchSegmentedIconControlOptionProps = {
     value: string;
     disabled?: boolean;
     'aria-label': string;
-    'on-focus'?: (e: CustomEvent<void>) => void;
-    'on-blur'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-segmented-control-shape-radius'?: string;
-        '--sinch-comp-segmented-control-color-default-icon-initial'?: string;
-        '--sinch-comp-segmented-control-color-default-border-initial'?: string;
-        '--sinch-comp-segmented-control-color-default-background-initial'?: string;
-        '--sinch-comp-segmented-control-color-default-background-hover'?: string;
-        '--sinch-comp-segmented-control-color-default-outline-focus'?: string;
-        '--sinch-comp-segmented-control-color-checked-icon-initial'?: string;
-        '--sinch-comp-segmented-control-color-checked-border-initial'?: string;
-        '--sinch-comp-segmented-control-color-checked-background-initial'?: string;
-        '--sinch-comp-segmented-control-color-disabled-icon-initial'?: string;
-        '--sinch-comp-segmented-control-color-disabled-border-initial'?: string;
-        '--sinch-comp-segmented-control-color-disabled-background-initial'?: string;
-        '--sinch-comp-segmented-control-size-icon'?: string;
-    };
 };
+export type TSinchSegmentedIconControlOptionEvents = {
+    '-focus'?: (e: CustomEvent<void>) => void;
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchSegmentedIconControlOptionStyle = {
+    '--sinch-comp-segmented-control-shape-radius'?: string;
+    '--sinch-comp-segmented-control-color-default-icon-initial'?: string;
+    '--sinch-comp-segmented-control-color-default-border-initial'?: string;
+    '--sinch-comp-segmented-control-color-default-background-initial'?: string;
+    '--sinch-comp-segmented-control-color-default-background-hover'?: string;
+    '--sinch-comp-segmented-control-color-default-outline-focus'?: string;
+    '--sinch-comp-segmented-control-color-checked-icon-initial'?: string;
+    '--sinch-comp-segmented-control-color-checked-border-initial'?: string;
+    '--sinch-comp-segmented-control-color-checked-background-initial'?: string;
+    '--sinch-comp-segmented-control-color-disabled-icon-initial'?: string;
+    '--sinch-comp-segmented-control-color-disabled-border-initial'?: string;
+    '--sinch-comp-segmented-control-color-disabled-background-initial'?: string;
+    '--sinch-comp-segmented-control-size-icon'?: string;
+};
+export type TSinchSegmentedIconControlOption = {
+    props: TSinchSegmentedIconControlOptionProps;
+    events: TSinchSegmentedIconControlOptionEvents;
+    style: TSinchSegmentedIconControlOptionStyle;
+};
+export type TSinchSegmentedIconControlOptionElement = NectaryComponentVanillaByType<TSinchSegmentedIconControlOption>;
+export type TSinchSegmentedIconControlOptionReact = NectaryComponentReactByType<TSinchSegmentedIconControlOption>;

package/select-button/index.d.ts

@@ -1,20 +1,28 @@
 import '../text';
 import '../icon';
-import type { TSinchSelectButtonElement, TSinchSelectButtonReact } from './types';
+import type { TSinchSelectButtonProps, TSinchSelectButtonStyle, TSinchSelectButtonEvents } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-select-button': {
+            props: TSinchSelectButtonProps;
+            events: TSinchSelectButtonEvents;
+            style: TSinchSelectButtonStyle;
+        };
+    }
     interface HTMLElementTagNameMap {
-        'sinch-select-button': TSinchSelectButtonElement;
+        'sinch-select-button': NectaryComponentVanilla<'sinch-select-button'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-select-button': TSinchSelectButtonReact;
+            'sinch-select-button': NectaryComponentReact<'sinch-select-button'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-select-button': TSinchSelectButtonReact;
+            'sinch-select-button': NectaryComponentReact<'sinch-select-button'>;
         }
     }
 }

package/select-button/types.d.ts

@@ -1,34 +1,6 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 import type { TSinchSize } from '../utils/size';
-export type TSinchSelectButtonElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Text that appears in the text field when it has no text set */
-    placeholder: string;
-    /** Invalid state */
-    invalid: boolean;
-    /** Disabled */
-    disabled: boolean;
-    /** Size, `m` by default */
-    size: TSinchSize;
-    /** Click event */
-    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
-    /** Focus event */
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    /** Blur event */
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Text */
-    setAttribute(name: 'text', 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;
-    /** Size, `m` by default */
-    setAttribute(name: 'size', value: TSinchSize): void;
-};
-export type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectButtonElement> & {
+export type TSinchSelectButtonProps = {
     /** Text */
     text: string;
     /** Label that is used for a11y` */
@@ -41,35 +13,43 @@ export type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectButtonEleme
     disabled?: boolean;
     /** Size, `m` by default */
     size?: TSinchSize;
+};
+export type TSinchSelectButtonEvents = {
     /** Click handler */
-    'on-click': (e: CustomEvent<void>) => void;
+    '-click': (e: CustomEvent<void>) => 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-select-button-size-container-l'?: string;
-        '--sinch-comp-select-button-size-icon-l'?: string;
-        '--sinch-comp-select-button-shape-radius-size-l'?: string;
-        '--sinch-comp-select-button-size-container-m'?: string;
-        '--sinch-comp-select-button-size-icon-m'?: string;
-        '--sinch-comp-select-button-shape-radius-size-m'?: string;
-        '--sinch-comp-select-button-size-container-s'?: string;
-        '--sinch-comp-select-button-size-icon-s'?: string;
-        '--sinch-comp-select-button-shape-radius-size-s'?: string;
-        '--sinch-comp-select-button-color-default-background-initial'?: string;
-        '--sinch-comp-select-button-color-default-icon-initial'?: string;
-        '--sinch-comp-select-button-color-default-text-initial'?: string;
-        '--sinch-comp-select-button-color-default-placeholder-initial'?: string;
-        '--sinch-comp-select-button-color-default-border-initial'?: string;
-        '--sinch-comp-select-button-color-default-border-focus'?: string;
-        '--sinch-comp-select-button-color-invalid-border-initial'?: string;
-        '--sinch-comp-select-button-color-disabled-icon-initial'?: string;
-        '--sinch-comp-select-button-color-disabled-text-initial'?: string;
-        '--sinch-comp-select-button-color-disabled-placeholder-initial'?: string;
-        '--sinch-comp-select-button-color-disabled-border-initial'?: string;
-        '--sinch-comp-select-button-font-input'?: string;
-        '--sinch-comp-select-button-font-placeholder'?: string;
-    };
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchSelectButtonStyle = {
+    '--sinch-comp-select-button-size-container-l'?: string;
+    '--sinch-comp-select-button-size-icon-l'?: string;
+    '--sinch-comp-select-button-shape-radius-size-l'?: string;
+    '--sinch-comp-select-button-size-container-m'?: string;
+    '--sinch-comp-select-button-size-icon-m'?: string;
+    '--sinch-comp-select-button-shape-radius-size-m'?: string;
+    '--sinch-comp-select-button-size-container-s'?: string;
+    '--sinch-comp-select-button-size-icon-s'?: string;
+    '--sinch-comp-select-button-shape-radius-size-s'?: string;
+    '--sinch-comp-select-button-color-default-background-initial'?: string;
+    '--sinch-comp-select-button-color-default-icon-initial'?: string;
+    '--sinch-comp-select-button-color-default-text-initial'?: string;
+    '--sinch-comp-select-button-color-default-placeholder-initial'?: string;
+    '--sinch-comp-select-button-color-default-border-initial'?: string;
+    '--sinch-comp-select-button-color-default-border-focus'?: string;
+    '--sinch-comp-select-button-color-invalid-border-initial'?: string;
+    '--sinch-comp-select-button-color-disabled-icon-initial'?: string;
+    '--sinch-comp-select-button-color-disabled-text-initial'?: string;
+    '--sinch-comp-select-button-color-disabled-placeholder-initial'?: string;
+    '--sinch-comp-select-button-color-disabled-border-initial'?: string;
+    '--sinch-comp-select-button-font-input'?: string;
+    '--sinch-comp-select-button-font-placeholder'?: string;
+};
+export type TSinchSelectButton = {
+    props: TSinchSelectButtonProps;
+    events: TSinchSelectButtonEvents;
+    style: TSinchSelectButtonStyle;
 };
+export type TSinchSelectButtonElement = NectaryComponentVanillaByType<TSinchSelectButton>;
+export type TSinchSelectButtonReact = NectaryComponentReactByType<TSinchSelectButton>;

package/select-menu/index.d.ts

@@ -1,21 +1,25 @@
 import '../input';
 import '../icon';
 import '../text';
-import type { TSinchSelectMenuElement, TSinchSelectMenuReact } from './types';
+import type { TSinchSelectMenu } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-select-menu': TSinchSelectMenu;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-select-menu': TSinchSelectMenuElement;
+        'sinch-select-menu': NectaryComponentVanilla<'sinch-select-menu'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-select-menu': TSinchSelectMenuReact;
+            'sinch-select-menu': NectaryComponentReact<'sinch-select-menu'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-select-menu': TSinchSelectMenuReact;
+            'sinch-select-menu': NectaryComponentReact<'sinch-select-menu'>;
         }
     }
 }

package/select-menu/types.d.ts

@@ -1,31 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchSelectMenuElement = HTMLElement & {
-    /** Selected value, CSV when multiple */
-    value: string;
-    /** How many rows to show and scroll the rest */
-    rows: number | null;
-    /** Allows multiple selection */
-    multiple: boolean;
-    /** Enforce the search bar appearing, by default it appears above a certain number of options  */
-    searchable: boolean | null;
-    /** Controls the autocomplete of the search input */
-    'search-autocomplete': HTMLInputElement['autocomplete'];
-    /** Text for search bar's placeholder */
-    'search-placeholder': string;
-    /** Optionally control search value manually */
-    'search-value': string;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Change value event */
-    addEventListener(type: '-search-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Selected value, CSV when multiple */
-    setAttribute(name: 'value', value: string): void;
-    /** How many rows to show and scroll the rest */
-    setAttribute(name: 'rows', value: string): void;
-    /** Allows multiple selection */
-    setAttribute(name: 'multiple', value: ''): void;
-};
-export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchSelectMenuProps = {
     /** Selected value, CSV when multiple */
     value: string;
     /** How many rows to show and scroll the rest */
@@ -40,16 +14,22 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
     'search-placeholder'?: string;
     /** Label that is used for a11y */
     'aria-label': string;
+};
+export type TSinchSelectMenuEvents = {
     /** Change value handler */
-    'on-search-change'?: (e: CustomEvent<string>) => void;
-    /** Optionally control search value manually */
-    'search-value'?: string;
+    '-search-change'?: (e: CustomEvent<string>) => void;
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<string>) => void;
-} & {
-    style?: {
-        '--sinch-comp-select-menu-color-default-title-initial'?: string;
-        '--sinch-comp-select-menu-color-default-not-found-text-initial'?: string;
-        '--sinch-comp-select-menu-font-not-found-text'?: string;
-    };
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchSelectMenuStyle = {
+    '--sinch-comp-select-menu-color-default-title-initial'?: string;
+    '--sinch-comp-select-menu-color-default-not-found-text-initial'?: string;
+    '--sinch-comp-select-menu-font-not-found-text'?: string;
+};
+export type TSinchSelectMenu = {
+    props: TSinchSelectMenuProps;
+    events: TSinchSelectMenuEvents;
+    style: TSinchSelectMenuStyle;
 };
+export type TSinchSelectMenuElement = NectaryComponentVanillaByType<TSinchSelectMenu>;
+export type TSinchSelectMenuReact = NectaryComponentReactByType<TSinchSelectMenu>;

package/select-menu-option/index.d.ts

@@ -1,7 +1,8 @@
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchSelectMenuOptionElement, TSinchSelectMenuOptionReact } from './types';
+import type { TSinchSelectMenuOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class SelectMenuOption extends NectaryElement {
     #private;
     constructor();
@@ -17,19 +18,22 @@ export declare class SelectMenuOption extends NectaryElement {
     matchesSearch(searchValue: string): boolean;
 }
 declare global {
+    interface NectaryComponentMap {
+        'sinch-select-menu-option': TSinchSelectMenuOption;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-select-menu-option': TSinchSelectMenuOptionElement;
+        'sinch-select-menu-option': NectaryComponentVanilla<'sinch-select-menu-option'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-select-menu-option': TSinchSelectMenuOptionReact;
+            'sinch-select-menu-option': NectaryComponentReact<'sinch-select-menu-option'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-select-menu-option': TSinchSelectMenuOptionReact;
+            'sinch-select-menu-option': NectaryComponentReact<'sinch-select-menu-option'>;
         }
     }
 }

package/select-menu-option/types.d.ts

@@ -1,20 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchSelectMenuOptionElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Display text */
-    text: string;
-    /** Disabled state */
-    disabled: boolean;
-    matchesSearch(value: string): boolean;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Display text */
-    setAttribute(name: 'text', value: string): void;
-    /** Disabled state */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchSelectMenuOptionReact = TSinchElementReact<TSinchSelectMenuOptionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchSelectMenuOptionProps = {
     /** Value */
     value: string;
     /** Display text */
@@ -23,20 +8,29 @@ export type TSinchSelectMenuOptionReact = TSinchElementReact<TSinchSelectMenuOpt
     disabled?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
-} & {
-    style?: {
-        '--sinch-comp-select-menu-size-icon'?: string;
-        '--sinch-comp-select-menu-font-option'?: string;
-        '--sinch-comp-select-menu-color-default-background-initial'?: string;
-        '--sinch-comp-select-menu-color-default-background-selected'?: string;
-        '--sinch-comp-select-menu-color-default-background-hover'?: string;
-        '--sinch-comp-select-menu-color-default-option-initial'?: string;
-        '--sinch-comp-select-menu-color-default-icon-initial'?: string;
-        '--sinch-comp-select-menu-color-disabled-background-initial'?: string;
-        '--sinch-comp-select-menu-color-disabled-option-initial'?: string;
-        '--sinch-comp-select-menu-color-disabled-icon-initial'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
 };
+export type TSinchSelectMenuOptionMethods = {
+    matchesSearch(value: string): boolean;
+};
+export type TSinchSelectMenuOptionStyle = {
+    '--sinch-comp-select-menu-size-icon'?: string;
+    '--sinch-comp-select-menu-font-option'?: string;
+    '--sinch-comp-select-menu-color-default-background-initial'?: string;
+    '--sinch-comp-select-menu-color-default-background-selected'?: string;
+    '--sinch-comp-select-menu-color-default-background-hover'?: string;
+    '--sinch-comp-select-menu-color-default-option-initial'?: string;
+    '--sinch-comp-select-menu-color-default-icon-initial'?: string;
+    '--sinch-comp-select-menu-color-disabled-background-initial'?: string;
+    '--sinch-comp-select-menu-color-disabled-option-initial'?: string;
+    '--sinch-comp-select-menu-color-disabled-icon-initial'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchSelectMenuOption = {
+    props: TSinchSelectMenuOptionProps;
+    methods: TSinchSelectMenuOptionMethods;
+    style: TSinchSelectMenuOptionStyle;
+};
+export type TSinchSelectMenuOptionElement = NectaryComponentVanillaByType<TSinchSelectMenuOption>;
+export type TSinchSelectMenuOptionReact = NectaryComponentReactByType<TSinchSelectMenuOption>;

package/select-menu-option/utils.d.ts

@@ -1,2 +1,2 @@
-import type { TSinchSelectMenuOptionElement } from './types';
-export declare const isSelectMenuOption: (el: Element) => el is TSinchSelectMenuOptionElement;
+import type { NectaryComponentVanilla } from '../types';
+export declare const isSelectMenuOption: (el: Element) => el is NectaryComponentVanilla<"sinch-select-menu-option">;

package/skeleton/index.d.ts

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

package/skeleton/types.d.ts

@@ -1,16 +1,17 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchSkeletonElement = HTMLElement & {
-    /** Card like container */
-    setAttribute(name: 'card', value: ''): void;
-};
-export type TSinchSkeletonReact = TSinchElementReact<TSinchSkeletonElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchSkeletonProps = {
     /** Card like container */
     card?: boolean;
-} & {
-    style?: {
-        '--sinch-sys-color-surface-primary-default'?: string;
-        '--sinch-sys-color-surface-tertiary-default'?: string;
-        '--sinch-sys-color-border-subtle'?: string;
-        '--sinch-sys-shape-radius-l'?: string;
-    };
 };
+export type TSinchSkeletonStyle = {
+    '--sinch-sys-color-surface-primary-default'?: string;
+    '--sinch-sys-color-surface-tertiary-default'?: string;
+    '--sinch-sys-color-border-subtle'?: string;
+    '--sinch-sys-shape-radius-l'?: string;
+};
+export type TSinchSkeleton = {
+    props: TSinchSkeletonProps;
+    style: TSinchSkeletonStyle;
+};
+export type TSinchSkeletonElement = NectaryComponentVanillaByType<TSinchSkeleton>;
+export type TSinchSkeletonReact = NectaryComponentReactByType<TSinchSkeleton>;