@nectary/components 4.8.2 → 4.9.0

package/accordion/index.d.ts

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

package/accordion/types.d.ts

@@ -1,21 +1,16 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchAccordionElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Allows to expand multiple items simultanously */
-    multiple: boolean;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Allows to expand multiple items simultanously */
-    setAttribute(name: 'multiple', value: ''): void;
-};
-export type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchAccordionProps = {
     /** Value */
     value: string;
     multiple?: boolean;
-    /** Allows to expand multiple items simultanously */
+};
+export type TSinchAccordionEvents = {
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<string>) => void;
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchAccordion = {
+    props: TSinchAccordionProps;
+    events: TSinchAccordionEvents;
 };
+export type TSinchAccordionElement = NectaryComponentVanillaByType<TSinchAccordion>;
+export type TSinchAccordionReact = NectaryComponentReactByType<TSinchAccordion>;

package/accordion-item/index.d.ts

@@ -1,21 +1,25 @@
 import '../icon';
 import '../text';
 import '../title';
-import type { TSinchAccordionItemElement, TSinchAccordionItemReact } from './types';
+import type { TSinchAccordionItem } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-accordion-item': TSinchAccordionItem;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-accordion-item': TSinchAccordionItemElement;
+        'sinch-accordion-item': NectaryComponentVanilla<'sinch-accordion-item'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-accordion-item': TSinchAccordionItemReact;
+            'sinch-accordion-item': NectaryComponentReact<'sinch-accordion-item'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-accordion-item': TSinchAccordionItemReact;
+            'sinch-accordion-item': NectaryComponentReact<'sinch-accordion-item'>;
         }
     }
 }

package/accordion-item/types.d.ts

@@ -1,28 +1,6 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchAccordionStatusType = 'info' | 'success' | 'warn' | 'error';
-export type TSinchAccordionItemElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Label */
-    label: string;
-    /** Optional text on the right side */
-    optionalText: string | null;
-    /** Status */
-    status: TSinchAccordionStatusType | null;
-    /** Disabled */
-    disabled: boolean;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Label */
-    setAttribute(name: 'label', value: string): void;
-    /** Optional text on the right side */
-    setAttribute(name: 'optionaltext', value: string): void;
-    /** Status */
-    setAttribute(name: 'status', value: TSinchAccordionStatusType): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
+export type TSinchAccordionItemProps = {
     /** Value */
     value: string;
     /** Label */
@@ -33,27 +11,32 @@ export type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemEle
     status?: TSinchAccordionStatusType;
     /** Disabled */
     disabled?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-accordion-color-default-border-initial'?: string;
-        '--sinch-comp-accordion-color-default-icon-initial'?: string;
-        '--sinch-comp-accordion-color-default-title-initial'?: string;
-        '--sinch-comp-accordion-color-default-optional-text-initial'?: string;
-        '--sinch-comp-accordion-color-default-outline-focus'?: string;
-        '--sinch-comp-accordion-color-default-status-success'?: string;
-        '--sinch-comp-accordion-color-default-status-warning'?: string;
-        '--sinch-comp-accordion-color-default-status-error'?: string;
-        '--sinch-comp-accordion-color-default-status-info'?: string;
-        '--sinch-comp-accordion-color-disabled-icon-initial'?: string;
-        '--sinch-comp-accordion-color-disabled-title-initial'?: string;
-        '--sinch-comp-accordion-color-disabled-optional-text-initial'?: string;
-        '--sinch-comp-accordion-font-title'?: string;
-        '--sinch-comp-accordion-font-optional-text'?: string;
-        '--sinch-comp-accordion-size-icon'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-comp-title-font'?: string;
-        '--sinch-comp-text-font'?: string;
-    };
 };
+export type TSinchAccordionItemStyle = {
+    '--sinch-comp-accordion-color-default-border-initial'?: string;
+    '--sinch-comp-accordion-color-default-icon-initial'?: string;
+    '--sinch-comp-accordion-color-default-title-initial'?: string;
+    '--sinch-comp-accordion-color-default-optional-text-initial'?: string;
+    '--sinch-comp-accordion-color-default-outline-focus'?: string;
+    '--sinch-comp-accordion-color-default-status-success'?: string;
+    '--sinch-comp-accordion-color-default-status-warning'?: string;
+    '--sinch-comp-accordion-color-default-status-error'?: string;
+    '--sinch-comp-accordion-color-default-status-info'?: string;
+    '--sinch-comp-accordion-color-disabled-icon-initial'?: string;
+    '--sinch-comp-accordion-color-disabled-title-initial'?: string;
+    '--sinch-comp-accordion-color-disabled-optional-text-initial'?: string;
+    '--sinch-comp-accordion-font-title'?: string;
+    '--sinch-comp-accordion-font-optional-text'?: string;
+    '--sinch-comp-accordion-size-icon'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-comp-title-font'?: string;
+    '--sinch-comp-text-font'?: string;
+};
+export type TSinchAccordionItem = {
+    props: TSinchAccordionItemProps;
+    style: TSinchAccordionItemStyle;
+};
+export type TSinchAccordionItemElement = NectaryComponentVanillaByType<TSinchAccordionItem>;
+export type TSinchAccordionItemReact = NectaryComponentReactByType<TSinchAccordionItem>;

package/action-menu/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchActionMenuElement, TSinchActionMenuReact } from './types';
+import type { TSinchActionMenu } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-action-menu': TSinchActionMenu;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-action-menu': TSinchActionMenuElement;
+        'sinch-action-menu': NectaryComponentVanilla<'sinch-action-menu'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-action-menu': TSinchActionMenuReact;
+            'sinch-action-menu': NectaryComponentReact<'sinch-action-menu'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-action-menu': TSinchActionMenuReact;
+            'sinch-action-menu': NectaryComponentReact<'sinch-action-menu'>;
         }
     }
 }

package/action-menu/types.d.ts

@@ -1,13 +1,12 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchActionMenuElement = HTMLElement & {
-    /** How many rows to show and scroll the rest */
-    rows: number | null;
-    /** How many rows to show and scroll the rest */
-    setAttribute(name: 'rows', value: string): void;
-};
-export type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchActionMenuProps = {
     /** How many rows to show and scroll the rest */
     rows?: number;
     /** Label that is used for a11y */
     'aria-label': string;
 };
+export type TSinchActionMenu = {
+    props: TSinchActionMenuProps;
+};
+export type TSinchActionMenuElement = NectaryComponentVanillaByType<TSinchActionMenu>;
+export type TSinchActionMenuReact = NectaryComponentReactByType<TSinchActionMenu>;

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

@@ -1,19 +1,23 @@
 import '../text';
-import type { TSinchActionMenuOptionElement, TSinchActionMenuOptionReact } from './types';
+import type { TSinchActionMenuOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-action-menu-option': TSinchActionMenuOption;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-action-menu-option': TSinchActionMenuOptionElement;
+        'sinch-action-menu-option': NectaryComponentVanilla<'sinch-action-menu-option'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-action-menu-option': TSinchActionMenuOptionReact;
+            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-action-menu-option': TSinchActionMenuOptionReact;
+            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
         }
     }
 }

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

@@ -1,40 +1,36 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchActionMenuOptionElement = HTMLElement & {
-    /** Display text */
-    text: string;
-    /** Disabled state */
-    disabled: boolean;
-    /** Click event */
-    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
-    /** Display text */
-    setAttribute(name: 'text', value: string): void;
-    /** Disabled state */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActionMenuOptionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchActionMenuOptionProps = {
     /** Display text */
     text: string;
     /** Disabled state */
     disabled?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
+};
+export type TSinchActionMenuOptionEvents = {
     /** Click event handler */
-    'on-click'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-action-menu-color-default-background-initial'?: string;
-        '--sinch-comp-action-menu-color-default-background-selected'?: string;
-        '--sinch-comp-action-menu-color-default-background-hover'?: string;
-        '--sinch-comp-action-menu-color-default-text-initial'?: string;
-        '--sinch-comp-action-menu-color-default-icon-initial'?: string;
-        '--sinch-comp-action-menu-color-disabled-background-initial'?: string;
-        '--sinch-comp-action-menu-color-disabled-text-initial'?: string;
-        '--sinch-comp-action-menu-color-disabled-icon-initial'?: string;
-        '--sinch-comp-action-menu-font-option'?: string;
-        '--sinch-comp-action-menu-size-icon'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-comp-text-font'?: string;
-    };
+    '-click'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchActionMenuOptionStyle = {
+    '--sinch-comp-action-menu-color-default-background-initial'?: string;
+    '--sinch-comp-action-menu-color-default-background-selected'?: string;
+    '--sinch-comp-action-menu-color-default-background-hover'?: string;
+    '--sinch-comp-action-menu-color-default-text-initial'?: string;
+    '--sinch-comp-action-menu-color-default-icon-initial'?: string;
+    '--sinch-comp-action-menu-color-disabled-background-initial'?: string;
+    '--sinch-comp-action-menu-color-disabled-text-initial'?: string;
+    '--sinch-comp-action-menu-color-disabled-icon-initial'?: string;
+    '--sinch-comp-action-menu-font-option'?: string;
+    '--sinch-comp-action-menu-size-icon'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-comp-text-font'?: string;
+};
+export type TSinchActionMenuOption = {
+    props: TSinchActionMenuOptionProps;
+    events: TSinchActionMenuOptionEvents;
+    style: TSinchActionMenuOptionStyle;
 };
+export type TSinchActionMenuOptionElement = NectaryComponentVanillaByType<TSinchActionMenuOption>;
+export type TSinchActionMenuOptionReact = NectaryComponentReactByType<TSinchActionMenuOption>;

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

@@ -1,2 +1 @@
-import type { TSinchActionMenuOptionElement } from './types';
-export declare const isSinchActionMenuOption: (el: EventTarget | null) => el is TSinchActionMenuOptionElement;
+export declare const isSinchActionMenuOption: (el: EventTarget | null) => el is HTMLElementTagNameMap["sinch-action-menu-option"];

package/alert/index.d.ts

@@ -1,21 +1,25 @@
 import '../icon';
 import '../rich-text';
 import '../text';
-import type { TSinchAlertElement, TSinchAlertReact } from './types';
+import type { TSinchAlert } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-alert': TSinchAlert;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-alert': TSinchAlertElement;
+        'sinch-alert': NectaryComponentVanilla<'sinch-alert'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-alert': TSinchAlertReact;
+            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-alert': TSinchAlertReact;
+            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
         }
     }
 }

package/alert/types.d.ts

@@ -1,34 +1,29 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchAlertType = 'info' | 'warn' | 'error';
-export type TSinchAlertElement = HTMLElement & {
+export type TSinchAlertProps = {
     /** Type */
     type: TSinchAlertType;
     /** Text */
     text: string;
-    /** Type */
-    setAttribute(name: 'type', value: TSinchAlertType): void;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
 };
-export type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
-    /** Type */
-    type: TSinchAlertType;
-    /** Text */
-    text: string;
-} & {
-    style?: {
-        '--sinch-comp-alert-color-warning-default-background'?: string;
-        '--sinch-comp-alert-color-warning-default-icon'?: string;
-        '--sinch-comp-alert-color-warning-default-text'?: string;
-        '--sinch-comp-alert-color-error-default-background'?: string;
-        '--sinch-comp-alert-color-error-default-icon'?: string;
-        '--sinch-comp-alert-color-error-default-text'?: string;
-        '--sinch-comp-alert-color-info-default-background'?: string;
-        '--sinch-comp-alert-color-info-default-icon'?: string;
-        '--sinch-comp-alert-color-info-default-text'?: string;
-        '--sinch-comp-alert-font-body'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-comp-rich-text-font'?: string;
-    };
+export type TSinchAlertStyle = {
+    '--sinch-comp-alert-color-warning-default-background'?: string;
+    '--sinch-comp-alert-color-warning-default-icon'?: string;
+    '--sinch-comp-alert-color-warning-default-text'?: string;
+    '--sinch-comp-alert-color-error-default-background'?: string;
+    '--sinch-comp-alert-color-error-default-icon'?: string;
+    '--sinch-comp-alert-color-error-default-text'?: string;
+    '--sinch-comp-alert-color-info-default-background'?: string;
+    '--sinch-comp-alert-color-info-default-icon'?: string;
+    '--sinch-comp-alert-color-info-default-text'?: string;
+    '--sinch-comp-alert-font-body'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-comp-rich-text-font'?: string;
+};
+export type TSinchAlert = {
+    props: TSinchAlertProps;
+    style: TSinchAlertStyle;
 };
+export type TSinchAlertElement = NectaryComponentVanillaByType<TSinchAlert>;
+export type TSinchAlertReact = NectaryComponentReactByType<TSinchAlert>;

package/avatar/index.d.ts

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

package/avatar/types.d.ts

@@ -1,31 +1,9 @@
 import type { TSinchAvatarColor } from './colors';
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type { TSinchAvatarColor };
 export type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
-export type TSinchAvatarElement = HTMLElement & {
-    /** Image source */
-    src: string | null;
-    /** Alt text */
-    alt: string;
-    /** Background color */
-    color: TSinchAvatarColor | null;
-    /** Status */
-    status: TSinchAvatarStatus | null;
-    /** Size, `m` by default */
-    size: TSinchSize;
-    /** Image source */
-    setAttribute(name: 'src', value: string): void;
-    /** Alt text */
-    setAttribute(name: 'alt', value: string): void;
-    /** Background color */
-    setAttribute(name: 'color', value: string): void;
-    /** Size, `m` by default */
-    setAttribute(name: 'size', value: TSinchSize): void;
-    /** Status */
-    setAttribute(name: 'status', value: TSinchAvatarStatus): void;
-};
-export type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
+export type TSinchAvatarProps = {
     /** Image source */
     src?: string;
     /** Alt text */
@@ -36,22 +14,27 @@ export type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
     size?: TSinchSize;
     /** Status */
     status?: TSinchAvatarStatus;
-} & {
-    style?: {
-        '--sinch-comp-avatar-container-color-default-background'?: string;
-        '--sinch-comp-avatar-container-color-default-foreground'?: string;
-        '--sinch-comp-avatar-border-color-default-initial'?: string;
-        '--sinch-comp-avatar-status-color-online-default-background'?: string;
-        '--sinch-comp-avatar-status-color-away-default-background'?: string;
-        '--sinch-comp-avatar-status-color-busy-default-background'?: string;
-        '--sinch-comp-avatar-status-color-offline-default-background'?: string;
-        '--sinch-comp-avatar-shape-radius'?: string;
-        '--sinch-comp-avatar-size-s'?: string;
-        '--sinch-comp-avatar-size-m'?: string;
-        '--sinch-comp-avatar-size-l'?: string;
-        '--sinch-comp-avatar-container-font-size-s-text'?: string;
-        '--sinch-comp-avatar-container-font-size-m-text'?: string;
-        '--sinch-comp-avatar-container-font-size-l-text'?: string;
-        '--sinch-local-size'?: string;
-    };
 };
+export type TSinchAvatarStyle = {
+    '--sinch-comp-avatar-container-color-default-background'?: string;
+    '--sinch-comp-avatar-container-color-default-foreground'?: string;
+    '--sinch-comp-avatar-border-color-default-initial'?: string;
+    '--sinch-comp-avatar-status-color-online-default-background'?: string;
+    '--sinch-comp-avatar-status-color-away-default-background'?: string;
+    '--sinch-comp-avatar-status-color-busy-default-background'?: string;
+    '--sinch-comp-avatar-status-color-offline-default-background'?: string;
+    '--sinch-comp-avatar-shape-radius'?: string;
+    '--sinch-comp-avatar-size-s'?: string;
+    '--sinch-comp-avatar-size-m'?: string;
+    '--sinch-comp-avatar-size-l'?: string;
+    '--sinch-comp-avatar-container-font-size-s-text'?: string;
+    '--sinch-comp-avatar-container-font-size-m-text'?: string;
+    '--sinch-comp-avatar-container-font-size-l-text'?: string;
+    '--sinch-local-size'?: string;
+};
+export type TSinchAvatar = {
+    props: TSinchAvatarProps;
+    style: TSinchAvatarStyle;
+};
+export type TSinchAvatarElement = NectaryComponentVanillaByType<TSinchAvatar>;
+export type TSinchAvatarReact = NectaryComponentReactByType<TSinchAvatar>;

package/badge/index.d.ts

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

package/badge/types.d.ts

@@ -1,28 +1,7 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchBadgeMode = 'square' | 'circle';
-export type TSinchBadgeElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Size */
-    size: TSinchSize;
-    /** Mode, `square` by default */
-    mode: TSinchBadgeMode;
-    /** Hidden */
-    hidden: boolean;
-    readonly badgeRect: TRect;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Size */
-    setAttribute(name: 'size', value: TSinchSize): void;
-    /** Mode, `square` by default */
-    setAttribute(name: 'mode', value: TSinchBadgeMode): void;
-    /** Color */
-    setAttribute(name: 'color', value: string): void;
-    /** Hidden */
-    setAttribute(name: 'hidden', value: ''): void;
-};
-export type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> & {
+export type TSinchBadgeProps = {
     /** Text */
     text: string;
     /** Size */
@@ -31,13 +10,20 @@ export type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> & {
     mode?: TSinchBadgeMode;
     /** Hidden */
     hidden?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-badge-color-border'?: string;
-        '--sinch-comp-badge-color-text'?: string;
-        '--sinch-comp-badge-color-background'?: string;
-        '--sinch-comp-badge-shape-radius'?: string;
-        '--sinch-comp-badge-font-size-l'?: string;
-        '--sinch-comp-badge-font-size-m'?: string;
-    };
+    /** Badge rect */
+    readonly badgeRect?: TRect;
+};
+export type TSinchBadgeStyle = {
+    '--sinch-comp-badge-color-border'?: string;
+    '--sinch-comp-badge-color-text'?: string;
+    '--sinch-comp-badge-color-background'?: string;
+    '--sinch-comp-badge-shape-radius'?: string;
+    '--sinch-comp-badge-font-size-l'?: string;
+    '--sinch-comp-badge-font-size-m'?: string;
+};
+export type TSinchBadge = {
+    props: TSinchBadgeProps;
+    style: TSinchBadgeStyle;
 };
+export type TSinchBadgeElement = NectaryComponentVanillaByType<TSinchBadge>;
+export type TSinchBadgeReact = NectaryComponentReactByType<TSinchBadge>;

package/button/index.d.ts

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