@nectary/components 4.8.2 → 4.9.1

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'>;
         }
     }
 }

package/tooltip/types.d.ts

@@ -1,32 +1,8 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type TSinchTooltipTextAlign = 'center' | 'right' | 'left';
 export type TSinchTooltipType = 'slow' | 'fast';
-export type TSinchTooltipElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Orientation, where it *points to* from origin */
-    orientation: TSinchTooltipOrientation;
-    /** Type */
-    type: TSinchTooltipType;
-    /** Text Align */
-    'text-align': TSinchTooltipTextAlign;
-    readonly footprintRect: TRect;
-    readonly tooltipRect: TRect;
-    /** Show event */
-    addEventListener(type: '-show', listener: (e: CustomEvent<void>) => void): void;
-    /** Hide event */
-    addEventListener(type: '-hide', listener: (e: CustomEvent<void>) => void): void;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Orientation, where it *points to* from origin */
-    setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
-    /** Type */
-    setAttribute(name: 'type', value: TSinchTooltipType): void;
-    /** Text Align */
-    setAttribute(name: 'text-align', value: TSinchTooltipTextAlign): void;
-};
-export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
+export type TSinchTooltipProps = {
     /** Text */
     text: string;
     /** Orientation, where it *points to* from origin */
@@ -35,19 +11,29 @@ export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     type?: TSinchTooltipType;
     /** Text Align */
     'text-align'?: TSinchTooltipTextAlign;
+    readonly footprintRect?: TRect;
+    readonly tooltipRect?: TRect;
+};
+export type TSinchTooltipEvents = {
     /** Show event handler */
-    'on-show'?: (e: CustomEvent<void>) => void;
+    '-show'?: (e: CustomEvent<void>) => void;
     /** Hide event handler */
-    'on-hide'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-tooltip-shadow'?: string;
-        '--sinch-comp-tooltip-shape-radius'?: string;
-        '--sinch-comp-tooltip-color-background'?: string;
-        '--sinch-comp-tooltip-color-text'?: string;
-        '--sinch-local-color-background'?: string;
-        '--sinch-comp-tooltip-font-body'?: string;
-        '--sinch-comp-text-align'?: string;
-        '--sinch-global-color-text'?: string;
-    };
+    '-hide'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchTooltipStyle = {
+    '--sinch-comp-tooltip-shadow'?: string;
+    '--sinch-comp-tooltip-shape-radius'?: string;
+    '--sinch-comp-tooltip-color-background'?: string;
+    '--sinch-comp-tooltip-color-text'?: string;
+    '--sinch-local-color-background'?: string;
+    '--sinch-comp-tooltip-font-body'?: string;
+    '--sinch-comp-text-align'?: string;
+    '--sinch-global-color-text'?: string;
+};
+export type TSinchTooltip = {
+    props: TSinchTooltipProps;
+    events: TSinchTooltipEvents;
+    style: TSinchTooltipStyle;
 };
+export type TSinchTooltipElement = NectaryComponentVanillaByType<TSinchTooltip>;
+export type TSinchTooltipReact = NectaryComponentReactByType<TSinchTooltip>;

package/types.d.ts

@@ -1,10 +1,5 @@
 import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react'
-
-export type TSinchElementReact<TElement> =
-  Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> &
-  ClassAttributes<TElement> &
-  Pick<DOMAttributes<TElement>, 'onClick' | 'onDoubleClick' | 'onMouseDown' | 'onMouseUp' | 'onMouseMove' | 'onMouseOver' | 'onMouseOut' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress'> &
-  { class?: string }
+import type { ReactifyEvents, ReactifyElement, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters'
 
 export type TRect = {
   x: number,
@@ -12,3 +7,22 @@ export type TRect = {
   width: number,
   height: number,
 }
+
+export type NectaryComponentVanillaByType<T extends object> =
+  Omit<HTMLElement, 'addEventListener' | 'removeEventListener'> &
+  ExtendEventListeners<Required<SafeSelect<T, 'events'>>> &
+  SetAttributes<Required<RemoveReadonly<SafeSelect<T, 'props'>>>> &
+  Required<CamelCaseify<SafeSelect<T, 'props'>>> &
+  Required<SafeSelect<T, 'methods'>>
+
+export type NectaryComponentReactByType<T extends object> =
+  ReactifyElement<HTMLElement> &
+  ReactifyEvents<SafeSelect<T, 'events'>> &
+  RemoveReadonly<SafeSelect<T, 'props'>> &
+  { style?: SafeSelect<T, 'style'> }
+
+export type NectaryComponentVanilla<K extends keyof NectaryComponentMap> =
+  NectaryComponentVanillaByType<NectaryComponentMap[K]>
+
+export type NectaryComponentReact<K extends keyof NectaryComponentMap> =
+  NectaryComponentReactByType<NectaryComponentMap[K]>

package/utils/adapters.d.ts

@@ -0,0 +1,30 @@
+import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react';
+export type SafeSelect<T extends object, K extends string | number | symbol> = K extends keyof T ? T[K] extends object ? T[K] : {} : {};
+type CamelCaseString<S extends string> = S extends `${infer P1}-${infer P2}${infer P3}` ? `${Lowercase<P1>}${Uppercase<P2>}${CamelCaseString<P3>}` : S;
+export type CamelCaseify<T> = T extends object ? {
+    [K in keyof T as K extends string ? CamelCaseString<K> : K]: T[K];
+} : T;
+export type RemoveReadonly<T> = {
+    [P in keyof T as T[P] extends {
+        readonly [K: string]: any;
+    } ? never : P]: T[P];
+};
+type ExtractEventTypes<T> = {
+    [K in keyof T]: T[K] extends (e: infer E) => void ? E : T[K];
+};
+export type ExtendEventListeners<Events> = {
+    addEventListener<K extends keyof (ExtractEventTypes<Events> & HTMLElementEventMap)>(type: K, listener: (this: HTMLElement, ev: (ExtractEventTypes<Events> & HTMLElementEventMap)[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof (ExtractEventTypes<Events> & HTMLElementEventMap)>(type: K, listener: (this: HTMLElement, ev: (ExtractEventTypes<Events> & HTMLElementEventMap)[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+};
+export type SetAttributes<Props> = {
+    setAttribute<K extends keyof Props>(attr: K, value: Props[K] extends boolean ? '' : Props[K]): void;
+};
+export type ReactifyElement<TElement> = Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> & ClassAttributes<TElement> & Pick<DOMAttributes<TElement>, 'onClick' | 'onDoubleClick' | 'onMouseDown' | 'onMouseUp' | 'onMouseMove' | 'onMouseOver' | 'onMouseOut' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress'> & {
+    class?: string;
+};
+export type ReactifyEvents<T> = {
+    [K in keyof T as K extends string ? `on${K}` : never]: T[K];
+};
+export {};

package/utils/adapters.js

@@ -0,0 +1 @@
+export {};