@nectary/components 4.8.1 → 4.9.0

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

@@ -1,27 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTileControlOptionElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Text content */
-    text: string;
-    /** Disabled */
-    disabled: boolean;
-    /** Small */
-    small: boolean;
-    /** 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 content */
-    setAttribute(attr: 'text', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-    /** Small */
-    setAttribute(name: 'small', value: ''): void;
-};
-export type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlOptionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTileControlOptionProps = {
     /** Value */
     value: string;
     /** Text content */
@@ -30,37 +8,45 @@ export type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlO
     'aria-label': string;
     /** Disabled */
     disabled?: boolean;
+};
+export type TSinchTileControlOptionEvents = {
     /** Focus handler */
-    'on-focus'?: (e: CustomEvent<void>) => void;
+    '-focus'?: (e: CustomEvent<void>) => void;
     /** Blur handler */
-    'on-blur'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-tile-control-shape-radius-l'?: string;
-        '--sinch-comp-tile-control-shape-radius-s'?: string;
-        '--sinch-comp-tile-control-font-label'?: string;
-        '--sinch-comp-tile-control-size-m-icon'?: string;
-        '--sinch-comp-tile-control-size-s-icon'?: string;
-        '--sinch-comp-tile-control-color-default-background-initial'?: string;
-        '--sinch-comp-tile-control-color-default-border-initial'?: string;
-        '--sinch-comp-tile-control-color-default-text-initial'?: string;
-        '--sinch-comp-tile-control-color-default-icon-initial'?: string;
-        '--sinch-comp-tile-control-color-default-background-hover'?: string;
-        '--sinch-comp-tile-control-color-default-border-hover'?: string;
-        '--sinch-comp-tile-control-color-default-outline-focus'?: string;
-        '--sinch-comp-tile-control-color-checked-background-initial'?: string;
-        '--sinch-comp-tile-control-color-checked-border-initial'?: string;
-        '--sinch-comp-tile-control-color-checked-text-initial'?: string;
-        '--sinch-comp-tile-control-color-checked-icon-initial'?: string;
-        '--sinch-comp-tile-control-color-disabled-background-initial'?: string;
-        '--sinch-comp-tile-control-color-disabled-border-initial'?: string;
-        '--sinch-comp-tile-control-color-disabled-text-initial'?: string;
-        '--sinch-comp-tile-control-color-disabled-icon-initial'?: string;
-        '--sinch-comp-tile-control-shadow-initial'?: string;
-        '--sinch-comp-tile-control-shadow-hover'?: string;
-        '--sinch-comp-tile-control-shadow-active'?: string;
-        '--sinch-comp-tile-control-shadow-disabled'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-global-color-icon'?: string;
-    };
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchTileControlOptionStyle = {
+    '--sinch-comp-tile-control-shape-radius-l'?: string;
+    '--sinch-comp-tile-control-shape-radius-s'?: string;
+    '--sinch-comp-tile-control-font-label'?: string;
+    '--sinch-comp-tile-control-size-m-icon'?: string;
+    '--sinch-comp-tile-control-size-s-icon'?: string;
+    '--sinch-comp-tile-control-color-default-background-initial'?: string;
+    '--sinch-comp-tile-control-color-default-border-initial'?: string;
+    '--sinch-comp-tile-control-color-default-text-initial'?: string;
+    '--sinch-comp-tile-control-color-default-icon-initial'?: string;
+    '--sinch-comp-tile-control-color-default-background-hover'?: string;
+    '--sinch-comp-tile-control-color-default-border-hover'?: string;
+    '--sinch-comp-tile-control-color-default-outline-focus'?: string;
+    '--sinch-comp-tile-control-color-checked-background-initial'?: string;
+    '--sinch-comp-tile-control-color-checked-border-initial'?: string;
+    '--sinch-comp-tile-control-color-checked-text-initial'?: string;
+    '--sinch-comp-tile-control-color-checked-icon-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-background-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-border-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-text-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-icon-initial'?: string;
+    '--sinch-comp-tile-control-shadow-initial'?: string;
+    '--sinch-comp-tile-control-shadow-hover'?: string;
+    '--sinch-comp-tile-control-shadow-active'?: string;
+    '--sinch-comp-tile-control-shadow-disabled'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-icon'?: string;
+};
+export type TSinchTileControlOption = {
+    props: TSinchTileControlOptionProps;
+    events: TSinchTileControlOptionEvents;
+    style: TSinchTileControlOptionStyle;
 };
+export type TSinchTileControlOptionElement = NectaryComponentVanillaByType<TSinchTileControlOption>;
+export type TSinchTileControlOptionReact = NectaryComponentReactByType<TSinchTileControlOption>;

package/time-picker/index.d.ts

@@ -1,21 +1,25 @@
 import '../icon';
 import '../segmented-control';
 import '../segmented-control-option';
-import type { TSinchTimePickerElement, TSinchTimePickerReact } from './types';
+import type { TSinchTimePicker } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-time-picker': TSinchTimePicker;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-time-picker': TSinchTimePickerElement;
+        'sinch-time-picker': NectaryComponentVanilla<'sinch-time-picker'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-time-picker': TSinchTimePickerReact;
+            'sinch-time-picker': NectaryComponentReact<'sinch-time-picker'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-time-picker': TSinchTimePickerReact;
+            'sinch-time-picker': NectaryComponentReact<'sinch-time-picker'>;
         }
     }
 }

package/time-picker/types.d.ts

@@ -1,26 +1,5 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TSinchTimePickerElement = HTMLElement & {
-    /** Time value in ISO 8601 format */
-    value: string;
-    /** AM/PM 12-hour clock system, `false` by default */
-    ampm: boolean;
-    /** Submit button label that is used for a11y */
-    submitAriaLabel: string;
-    readonly submitButtonRect: TRect;
-    readonly amButtonRect: TRect | null;
-    readonly pmButtonRect: TRect | null;
-    hourDigitRect(hour: number): TRect | null;
-    minuteDigitRect(minute: number): TRect | null;
-    /** Change value handler, return time in ISO 8601 format */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Time value in ISO 8601 format */
-    setAttribute(name: 'value', value: string): void;
-    /** AM/PM 12-hour clock system, `false` by default */
-    setAttribute(name: 'ampm', value: boolean): void;
-    /** Submit button label that is used for a11y */
-    setAttribute(name: 'submit-aria-label', value: string): void;
-};
-export type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+export type TSinchTimePickerProps = {
     /** Time value in ISO 8601 format */
     value: string;
     /** AM/PM 12-hour clock system, `false` by default */
@@ -29,29 +8,45 @@ export type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement>
     'aria-label': string;
     /** Submit button label that is used for a11y */
     'submit-aria-label': string;
+    readonly submitButtonRect?: TRect;
+    readonly amButtonRect?: TRect | null;
+    readonly pmButtonRect?: TRect | null;
+};
+export type TSinchTimePickerMethods = {
+    hourDigitRect(hour: number): TRect | null;
+    minuteDigitRect(minute: number): TRect | null;
+};
+export type TSinchTimePickerEvents = {
     /** Change value handler, return time in ISO 8601 format */
-    'on-change'?: (e: CustomEvent<string>) => void;
-} & {
-    style?: {
-        '--sinch-comp-time-picker-header-font'?: string;
-        '--sinch-comp-time-picker-digit-font-default-h12'?: string;
-        '--sinch-comp-time-picker-digit-font-checked-h12'?: string;
-        '--sinch-comp-time-picker-digit-font-default-h24'?: string;
-        '--sinch-comp-time-picker-digit-font-checked-h24'?: string;
-        '--sinch-comp-time-picker-digit-font-default-minutes'?: string;
-        '--sinch-comp-time-picker-digit-font-checked-minutes'?: string;
-        '--sinch-comp-time-picker-header-color-default-text-initial'?: string;
-        '--sinch-comp-time-picker-header-color-default-icon-initial'?: string;
-        '--sinch-comp-time-picker-watch-face-color-default-border-initial'?: string;
-        '--sinch-comp-time-picker-watch-face-color-default-background-initial'?: string;
-        '--sinch-comp-time-picker-digit-color-default-h12-initial'?: string;
-        '--sinch-comp-time-picker-digit-color-checked-h12-default'?: string;
-        '--sinch-comp-time-picker-digit-color-default-h24-initial'?: string;
-        '--sinch-comp-time-picker-digit-color-checked-h24-initial'?: string;
-        '--sinch-comp-time-picker-digit-color-default-minute-initial'?: string;
-        '--sinch-comp-time-picker-digit-color-checked-minute-initial'?: string;
-        '--sinch-comp-time-picker-needle-color-default-background-initial'?: string;
-        '--sinch-comp-time-picker-needle-color-default-background-focus'?: string;
-        '--sinch-global-color-icon'?: string;
-    };
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchTimePickerStyle = {
+    '--sinch-comp-time-picker-header-font'?: string;
+    '--sinch-comp-time-picker-digit-font-default-h12'?: string;
+    '--sinch-comp-time-picker-digit-font-checked-h12'?: string;
+    '--sinch-comp-time-picker-digit-font-default-h24'?: string;
+    '--sinch-comp-time-picker-digit-font-checked-h24'?: string;
+    '--sinch-comp-time-picker-digit-font-default-minutes'?: string;
+    '--sinch-comp-time-picker-digit-font-checked-minutes'?: string;
+    '--sinch-comp-time-picker-header-color-default-text-initial'?: string;
+    '--sinch-comp-time-picker-header-color-default-icon-initial'?: string;
+    '--sinch-comp-time-picker-watch-face-color-default-border-initial'?: string;
+    '--sinch-comp-time-picker-watch-face-color-default-background-initial'?: string;
+    '--sinch-comp-time-picker-digit-color-default-h12-initial'?: string;
+    '--sinch-comp-time-picker-digit-color-checked-h12-default'?: string;
+    '--sinch-comp-time-picker-digit-color-default-h24-initial'?: string;
+    '--sinch-comp-time-picker-digit-color-checked-h24-initial'?: string;
+    '--sinch-comp-time-picker-digit-color-default-minute-initial'?: string;
+    '--sinch-comp-time-picker-digit-color-checked-minute-initial'?: string;
+    '--sinch-comp-time-picker-needle-color-default-background-initial'?: string;
+    '--sinch-comp-time-picker-needle-color-default-background-focus'?: string;
+    '--sinch-global-color-icon'?: string;
+};
+export type TSinchTimePicker = {
+    props: TSinchTimePickerProps;
+    methods: TSinchTimePickerMethods;
+    events: TSinchTimePickerEvents;
+    style: TSinchTimePickerStyle;
 };
+export type TSinchTimePickerElement = NectaryComponentVanillaByType<TSinchTimePicker>;
+export type TSinchTimePickerReact = NectaryComponentReactByType<TSinchTimePicker>;

package/title/index.d.ts

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

package/title/types.d.ts

@@ -1,25 +1,7 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchTitleType = 'xl' | 'l' | 'm' | 's' | 'xs';
 export type TSinchTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
-export type TSinchTitleElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Type */
-    type: TSinchTitleType;
-    /** Semantical level */
-    level: TSinchTitleLevel;
-    /** Cuts the long title with “…” ellipsis */
-    ellipsis: boolean;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Type */
-    setAttribute(name: 'type', value: TSinchTitleType): void;
-    /** Semantical level */
-    setAttribute(name: 'level', value: TSinchTitleLevel): void;
-    /** Cuts the long title with “…” ellipsis */
-    setAttribute(name: 'ellipsis', value: ''): void;
-};
-export type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
+export type TSinchTitleProps = {
     /** Text */
     text: string;
     /** Type */
@@ -28,15 +10,20 @@ export type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
     level: TSinchTitleLevel;
     /** Cuts the long title with “…” ellipsis */
     ellipsis?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-title-font'?: string;
-        '--sinch-sys-font-desktop-title-xl'?: string;
-        '--sinch-sys-font-desktop-title-l'?: string;
-        '--sinch-sys-font-desktop-title-m'?: string;
-        '--sinch-sys-font-desktop-title-s'?: string;
-        '--sinch-sys-font-desktop-title-xs'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-sys-color-text-default'?: string;
-    };
 };
+export type TSinchTitleStyle = {
+    '--sinch-comp-title-font'?: string;
+    '--sinch-sys-font-desktop-title-xl'?: string;
+    '--sinch-sys-font-desktop-title-l'?: string;
+    '--sinch-sys-font-desktop-title-m'?: string;
+    '--sinch-sys-font-desktop-title-s'?: string;
+    '--sinch-sys-font-desktop-title-xs'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-sys-color-text-default'?: string;
+};
+export type TSinchTitle = {
+    props: TSinchTitleProps;
+    style: TSinchTitleStyle;
+};
+export type TSinchTitleElement = NectaryComponentVanillaByType<TSinchTitle>;
+export type TSinchTitleReact = NectaryComponentReactByType<TSinchTitle>;

package/toast/index.d.ts

@@ -1,20 +1,24 @@
 import '../icon';
 import '../rich-text';
-import type { TSinchToastElement, TSinchToastReact } from './types';
+import type { TSinchToast } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-toast': TSinchToast;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-toast': TSinchToastElement;
+        'sinch-toast': NectaryComponentVanilla<'sinch-toast'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-toast': TSinchToastReact;
+            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-toast': TSinchToastReact;
+            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
         }
     }
 }

package/toast/types.d.ts

@@ -1,48 +1,40 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
-export type TSinchToastElement = HTMLElement & {
-    /** Type */
-    type: TSinchToastType;
-    /** Text */
-    text: string;
-    /** Persistent, i.e. doesn't automatically dissapear after 5s */
-    persistent: boolean;
-    /** Timeout event */
-    addEventListener(type: '-timeout', listener: (e: CustomEvent<void>) => void): void;
-    /** Type */
-    setAttribute(name: 'type', value: TSinchToastType): void;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Persistent, i.e. doesn't automatically dissapear after 5s */
-    setAttribute(name: 'persistent', value: ''): void;
-};
-export type TSinchToastReact = TSinchElementReact<TSinchToastElement> & {
+export type TSinchToastProps = {
     /** Type */
     type: TSinchToastType;
     /** Text */
     text: string;
     /** Persistent, i.e. doesn't automatically dissapear after 5s */
     persistent?: boolean;
+};
+export type TSinchToastEvents = {
     /** Timeout handler */
-    'on-timeout'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-toast-shape-radius'?: string;
-        '--sinch-comp-toast-font-body'?: string;
-        '--sinch-comp-toast-shadow'?: string;
-        '--sinch-comp-toast-color-success-default-background'?: string;
-        '--sinch-comp-toast-color-success-default-text'?: string;
-        '--sinch-comp-toast-color-success-default-icon'?: string;
-        '--sinch-comp-toast-color-warning-default-background'?: string;
-        '--sinch-comp-toast-color-warning-default-text'?: string;
-        '--sinch-comp-toast-color-warning-default-icon'?: string;
-        '--sinch-comp-toast-color-error-default-background'?: string;
-        '--sinch-comp-toast-color-error-default-text'?: string;
-        '--sinch-comp-toast-color-error-default-icon'?: string;
-        '--sinch-comp-toast-color-info-default-background'?: string;
-        '--sinch-comp-toast-color-info-default-text'?: string;
-        '--sinch-comp-toast-color-info-default-icon'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-    };
+    '-timeout'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchToastStyle = {
+    '--sinch-comp-toast-shape-radius'?: string;
+    '--sinch-comp-toast-font-body'?: string;
+    '--sinch-comp-toast-shadow'?: string;
+    '--sinch-comp-toast-color-success-default-background'?: string;
+    '--sinch-comp-toast-color-success-default-text'?: string;
+    '--sinch-comp-toast-color-success-default-icon'?: string;
+    '--sinch-comp-toast-color-warning-default-background'?: string;
+    '--sinch-comp-toast-color-warning-default-text'?: string;
+    '--sinch-comp-toast-color-warning-default-icon'?: string;
+    '--sinch-comp-toast-color-error-default-background'?: string;
+    '--sinch-comp-toast-color-error-default-text'?: string;
+    '--sinch-comp-toast-color-error-default-icon'?: string;
+    '--sinch-comp-toast-color-info-default-background'?: string;
+    '--sinch-comp-toast-color-info-default-text'?: string;
+    '--sinch-comp-toast-color-info-default-icon'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+};
+export type TSinchToast = {
+    props: TSinchToastProps;
+    events: TSinchToastEvents;
+    style: TSinchToastStyle;
 };
+export type TSinchToastElement = NectaryComponentVanillaByType<TSinchToast>;
+export type TSinchToastReact = NectaryComponentReactByType<TSinchToast>;

package/toast-manager/index.d.ts

@@ -1,20 +1,24 @@
 import '../title';
 import '../text';
-import type { TSinchToastManagerElement, TSinchToastManagerReact } from './types';
+import type { TSinchToastManager } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-toast-manager': TSinchToastManager;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-toast-manager': TSinchToastManagerElement;
+        'sinch-toast-manager': NectaryComponentVanilla<'sinch-toast-manager'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-toast-manager': TSinchToastManagerReact;
+            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-toast-manager': TSinchToastManagerReact;
+            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
         }
     }
 }

package/toast-manager/types.d.ts

@@ -1,13 +1,16 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchToastManagerOrigin = 'top-right' | 'bottom-right';
-export type TSinchToastManagerElement = HTMLElement & {
-    readonly containerRect: TRect;
-    nthActionRect: (nth: number) => TRect | null;
-    nthCloseRect: (nth: number) => TRect | null;
-    origin: TSinchToastManagerOrigin;
-    /** Origin */
-    setAttribute(name: 'origin', value: TSinchToastManagerOrigin): void;
-};
-export type TSinchToastManagerReact = TSinchElementReact<TSinchToastManagerElement> & {
+export type TSinchToastManagerProps = {
     origin?: TSinchToastManagerOrigin;
+    readonly containerRect?: TRect;
+};
+export type TSinchToastManagerMethods = {
+    nthActionRect(nth: number): TRect | null;
+    nthCloseRect(nth: number): TRect | null;
+};
+export type TSinchToastManager = {
+    props: TSinchToastManagerProps;
+    methods: TSinchToastManagerMethods;
 };
+export type TSinchToastManagerElement = NectaryComponentVanillaByType<TSinchToastManager>;
+export type TSinchToastManagerReact = NectaryComponentReactByType<TSinchToastManager>;

package/toggle/index.d.ts

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

package/toggle/types.d.ts

@@ -1,41 +1,36 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchToggleElement = HTMLElement & {
-    checked: boolean;
-    small: boolean;
-    labeled: boolean;
-    disabled: boolean;
-    text: string | null;
-    addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
-    setAttribute(name: 'checked', value: ''): void;
-    setAttribute(name: 'small', value: ''): void;
-    setAttribute(name: 'labeled', value: ''): void;
-    setAttribute(name: 'disabled', value: ''): void;
-    setAttribute(name: 'text', value: string): void;
-};
-export type TSinchToggleReact = TSinchElementReact<TSinchToggleElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchToggleProps = {
     checked?: boolean;
     small?: boolean;
     labeled?: boolean;
     disabled?: boolean;
     text?: string;
     'aria-label': string;
-    'on-change'?: (e: CustomEvent<boolean>) => void;
-} & {
-    style?: {
-        '--sinch-local-size'?: string;
-        '--sinch-comp-toggle-color-default-background-initial'?: string;
-        '--sinch-comp-toggle-color-default-knob-background-initial'?: string;
-        '--sinch-comp-toggle-color-default-text-inside-initial'?: string;
-        '--sinch-comp-toggle-color-default-outline-focus'?: string;
-        '--sinch-comp-toggle-color-default-label-initial'?: string;
-        '--sinch-comp-toggle-color-checked-background-initial'?: string;
-        '--sinch-comp-toggle-color-disabled-background-initial'?: string;
-        '--sinch-comp-toggle-color-disabled-label-initial'?: string;
-        '--sinch-comp-toggle-color-checked-disabled-background-initial'?: string;
-        '--sinch-comp-toggle-shadow-knob-default'?: string;
-        '--sinch-comp-toggle-shadow-knob-disabled'?: string;
-        '--sinch-comp-toggle-font-size-m-inside-text'?: string;
-        '--sinch-comp-toggle-font-size-m-label'?: string;
-        '--sinch-comp-toggle-font-size-s-label'?: string;
-    };
 };
+export type TSinchToggleEvents = {
+    '-change'?: (e: CustomEvent<boolean>) => void;
+};
+export type TSinchToggleStyle = {
+    '--sinch-local-size'?: string;
+    '--sinch-comp-toggle-color-default-background-initial'?: string;
+    '--sinch-comp-toggle-color-default-knob-background-initial'?: string;
+    '--sinch-comp-toggle-color-default-text-inside-initial'?: string;
+    '--sinch-comp-toggle-color-default-outline-focus'?: string;
+    '--sinch-comp-toggle-color-default-label-initial'?: string;
+    '--sinch-comp-toggle-color-checked-background-initial'?: string;
+    '--sinch-comp-toggle-color-disabled-background-initial'?: string;
+    '--sinch-comp-toggle-color-disabled-label-initial'?: string;
+    '--sinch-comp-toggle-color-checked-disabled-background-initial'?: string;
+    '--sinch-comp-toggle-shadow-knob-default'?: string;
+    '--sinch-comp-toggle-shadow-knob-disabled'?: string;
+    '--sinch-comp-toggle-font-size-m-inside-text'?: string;
+    '--sinch-comp-toggle-font-size-m-label'?: string;
+    '--sinch-comp-toggle-font-size-s-label'?: string;
+};
+export type TSinchToggle = {
+    props: TSinchToggleProps;
+    events: TSinchToggleEvents;
+    style: TSinchToggleStyle;
+};
+export type TSinchToggleElement = NectaryComponentVanillaByType<TSinchToggle>;
+export type TSinchToggleReact = NectaryComponentReactByType<TSinchToggle>;

package/tooltip/index.d.ts

@@ -1,20 +1,24 @@
 import '../text';
 import '../pop';
-import type { TSinchTooltipElement, TSinchTooltipReact } from './types';
+import type { TSinchTooltip } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-tooltip': TSinchTooltip;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-tooltip': TSinchTooltipElement;
+        'sinch-tooltip': NectaryComponentVanilla<'sinch-tooltip'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tooltip': TSinchTooltipReact;
+            'sinch-tooltip': NectaryComponentReact<'sinch-tooltip'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tooltip': TSinchTooltipReact;
+            'sinch-tooltip': NectaryComponentReact<'sinch-tooltip'>;
         }
     }
 }