@nectary/components 4.8.2 → 4.9.0

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

@@ -1,19 +1,18 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchColorMenuOptionElement = HTMLElement & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchColorMenuOptionProps = {
     /** Value */
     value: string;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
 };
-export type TSinchColorMenuOptionReact = TSinchElementReact<TSinchColorMenuOptionElement> & {
-    /** Value */
-    value: string;
-} & {
-    style?: {
-        '--sinch-comp-color-menu-option-color-default-border-initial'?: string;
-        '--sinch-comp-color-menu-option-color-default-border-selected'?: string;
-        '--sinch-comp-color-menu-option-color-default-border-focus'?: string;
-        '--sinch-comp-color-menu-option-color-default-border-hover'?: string;
-        '--sinch-comp-color-menu-option-color-default-border-active'?: string;
-    };
+export type TSinchColorMenuOptionStyle = {
+    '--sinch-comp-color-menu-option-color-default-border-initial'?: string;
+    '--sinch-comp-color-menu-option-color-default-border-selected'?: string;
+    '--sinch-comp-color-menu-option-color-default-border-focus'?: string;
+    '--sinch-comp-color-menu-option-color-default-border-hover'?: string;
+    '--sinch-comp-color-menu-option-color-default-border-active'?: string;
+};
+export type TSinchColorMenuOption = {
+    props: TSinchColorMenuOptionProps;
+    style: TSinchColorMenuOptionStyle;
 };
+export type TSinchColorMenuOptionElement = NectaryComponentVanillaByType<TSinchColorMenuOption>;
+export type TSinchColorMenuOptionReact = NectaryComponentReactByType<TSinchColorMenuOption>;

package/color-swatch/index.d.ts

@@ -1,19 +1,23 @@
 import '../text';
-import type { TSinchColorSwatchElement, TSinchColorSwatchReact } from './types';
+import type { TSinchColorSwatch } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-color-swatch': TSinchColorSwatch;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-color-swatch': TSinchColorSwatchElement;
+        'sinch-color-swatch': NectaryComponentVanilla<'sinch-color-swatch'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-color-swatch': TSinchColorSwatchReact;
+            'sinch-color-swatch': NectaryComponentReact<'sinch-color-swatch'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-color-swatch': TSinchColorSwatchReact;
+            'sinch-color-swatch': NectaryComponentReact<'sinch-color-swatch'>;
         }
     }
 }

package/color-swatch/types.d.ts

@@ -1,19 +1,18 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchColorSwatchElement = HTMLElement & {
-    /** Color name */
-    name: string | null;
-    /** Color name */
-    setAttribute(name: 'name', value: string): void;
-};
-export type TSinchColorSwatchReact = TSinchElementReact<TSinchColorSwatchElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchColorSwatchProps = {
     /** Color name */
     name?: string;
-} & {
-    style?: {
-        '--sinch-global-size-icon'?: string;
-        '--sinch-ref-color-violet-200'?: string;
-        '--sinch-ref-color-honey-200'?: string;
-        '--sinch-ref-color-grass-200'?: string;
-        '--sinch-ref-color-ocean-200'?: string;
-    };
 };
+export type TSinchColorSwatchStyle = {
+    '--sinch-global-size-icon'?: string;
+    '--sinch-ref-color-violet-200'?: string;
+    '--sinch-ref-color-honey-200'?: string;
+    '--sinch-ref-color-grass-200'?: string;
+    '--sinch-ref-color-ocean-200'?: string;
+};
+export type TSinchColorSwatch = {
+    props: TSinchColorSwatchProps;
+    style: TSinchColorSwatchStyle;
+};
+export type TSinchColorSwatchElement = NectaryComponentVanillaByType<TSinchColorSwatch>;
+export type TSinchColorSwatchReact = NectaryComponentReactByType<TSinchColorSwatch>;

package/date-picker/index.d.ts

@@ -1,20 +1,24 @@
 import '../icon';
 import '../text';
-import type { TSinchDatePickerElement, TSinchDatePickerReact } from './types';
+import type { TSinchDatePicker } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-date-picker': TSinchDatePicker;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-date-picker': TSinchDatePickerElement;
+        'sinch-date-picker': NectaryComponentVanilla<'sinch-date-picker'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-date-picker': TSinchDatePickerReact;
+            'sinch-date-picker': NectaryComponentReact<'sinch-date-picker'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-date-picker': TSinchDatePickerReact;
+            'sinch-date-picker': NectaryComponentReact<'sinch-date-picker'>;
         }
     }
 }

package/date-picker/types.d.ts

@@ -1,50 +1,5 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TSinchDatePickerElement = HTMLElement & {
-    /** Date value in ISO 8601 format */
-    value: string;
-    /** Date min limit in ISO 8601 format */
-    min: string;
-    /** Date max limit in ISO 8601 format */
-    max: string;
-    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
-    locale: string;
-    /** Date range mode */
-    range: boolean;
-    /** Label that is used for a11y */
-    prevYearAriaLabel: string;
-    /** Label that is used for a11y */
-    nextYearAriaLabel: string;
-    /** Label that is used for a11y */
-    prevMonthAriaLabel: string;
-    /** Label that is used for a11y */
-    nextMonthAriaLabel: string;
-    readonly prevYearButtonRect: TRect;
-    readonly nextYearButtonRect: TRect;
-    readonly prevMonthButtonRect: TRect;
-    readonly nextMonthButtonRect: TRect;
-    nthButtonRect(index: number): TRect | null;
-    /** Change value handler, return date in ISO 8601 format */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Date value in ISO 8601 format */
-    setAttribute(name: 'value', value: string): void;
-    /** Date min limit in ISO 8601 format */
-    setAttribute(name: 'min', value: string): void;
-    /** Date max limit in ISO 8601 format */
-    setAttribute(name: 'max', value: string): void;
-    /** BCP 47 language tag (e.g. en-US), which changes day and month display names in the calendar */
-    setAttribute(name: 'locale', value: string): void;
-    /** Date range mode */
-    setAttribute(name: 'range', value: ''): void;
-    /** Label that is used for a11y */
-    setAttribute(name: 'prev-year-aria-label', value: string): void;
-    /** Label that is used for a11y */
-    setAttribute(name: 'next-year-aria-label', value: string): void;
-    /** Label that is used for a11y */
-    setAttribute(name: 'prev-month-aria-label', value: string): void;
-    /** Label that is used for a11y */
-    setAttribute(name: 'next-month-aria-label', value: string): void;
-};
-export type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+export type TSinchDatePickerProps = {
     /** Date value in ISO 8601 format */
     value: string;
     /** Date min limit in ISO 8601 format */
@@ -65,37 +20,53 @@ export type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement>
     'prev-month-aria-label': string;
     /** Label that is used for a11y */
     'next-month-aria-label': string;
+    readonly prevYearButtonRect?: TRect;
+    readonly nextYearButtonRect?: TRect;
+    readonly prevMonthButtonRect?: TRect;
+    readonly nextMonthButtonRect?: TRect;
+};
+export type TSinchDatePickerMethods = {
+    nthButtonRect(index: number): TRect | null;
+};
+export type TSinchDatePickerEvents = {
     /** Change value handler, return date in ISO 8601 format */
-    'on-change'?: (e: CustomEvent<string>) => void;
-} & {
-    style?: {
-        '--sinch-comp-date-picker-font-day'?: string;
-        '--sinch-comp-date-picker-font-today'?: string;
-        '--sinch-comp-date-picker-font-weekday'?: string;
-        '--sinch-comp-date-picker-font-header'?: string;
-        '--sinch-comp-date-picker-day-shape-radius'?: string;
-        '--sinch-comp-date-picker-header-color-default-text-initial'?: string;
-        '--sinch-comp-date-picker-weekday-color-default-text-initial'?: string;
-        '--sinch-comp-date-picker-day-color-default-text-initial'?: string;
-        '--sinch-comp-date-picker-day-color-default-background-initial'?: string;
-        '--sinch-comp-date-picker-day-color-default-background-hover'?: string;
-        '--sinch-comp-date-picker-day-color-default-border-initial'?: string;
-        '--sinch-comp-date-picker-day-color-default-outline-focus'?: string;
-        '--sinch-comp-date-picker-day-color-default-range-background'?: string;
-        '--sinch-comp-date-picker-day-color-disabled-text-initial'?: string;
-        '--sinch-comp-date-picker-day-color-checked-text-initial'?: string;
-        '--sinch-comp-date-picker-day-color-checked-background-initial'?: string;
-        '--sinch-comp-date-picker-day-color-checked-border-initial'?: string;
-        '--sinch-comp-date-picker-today-color-default-text-initial'?: string;
-        '--sinch-comp-date-picker-today-color-default-background-initial'?: string;
-        '--sinch-comp-date-picker-today-color-default-background-hover'?: string;
-        '--sinch-comp-date-picker-today-color-default-border-initial'?: string;
-        '--sinch-comp-date-picker-today-color-disabled-text-initial'?: string;
-        '--sinch-comp-date-picker-today-color-disabled-border-initial'?: string;
-        '--sinch-comp-date-picker-today-color-checked-text-initial'?: string;
-        '--sinch-comp-date-picker-today-color-checked-background-initial'?: string;
-        '--sinch-comp-date-picker-today-color-checked-border-initial'?: string;
-        '--sinch-com-text-font'?: string;
-        '--sinch-global-color-text'?: string;
-    };
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchDatePickerStyle = {
+    '--sinch-comp-date-picker-font-day'?: string;
+    '--sinch-comp-date-picker-font-today'?: string;
+    '--sinch-comp-date-picker-font-weekday'?: string;
+    '--sinch-comp-date-picker-font-header'?: string;
+    '--sinch-comp-date-picker-day-shape-radius'?: string;
+    '--sinch-comp-date-picker-header-color-default-text-initial'?: string;
+    '--sinch-comp-date-picker-weekday-color-default-text-initial'?: string;
+    '--sinch-comp-date-picker-day-color-default-text-initial'?: string;
+    '--sinch-comp-date-picker-day-color-default-background-initial'?: string;
+    '--sinch-comp-date-picker-day-color-default-background-hover'?: string;
+    '--sinch-comp-date-picker-day-color-default-border-initial'?: string;
+    '--sinch-comp-date-picker-day-color-default-outline-focus'?: string;
+    '--sinch-comp-date-picker-day-color-default-range-background'?: string;
+    '--sinch-comp-date-picker-day-color-disabled-text-initial'?: string;
+    '--sinch-comp-date-picker-day-color-checked-text-initial'?: string;
+    '--sinch-comp-date-picker-day-color-checked-background-initial'?: string;
+    '--sinch-comp-date-picker-day-color-checked-border-initial'?: string;
+    '--sinch-comp-date-picker-today-color-default-text-initial'?: string;
+    '--sinch-comp-date-picker-today-color-default-background-initial'?: string;
+    '--sinch-comp-date-picker-today-color-default-background-hover'?: string;
+    '--sinch-comp-date-picker-today-color-default-border-initial'?: string;
+    '--sinch-comp-date-picker-today-color-disabled-text-initial'?: string;
+    '--sinch-comp-date-picker-today-color-disabled-border-initial'?: string;
+    '--sinch-comp-date-picker-today-color-checked-text-initial'?: string;
+    '--sinch-comp-date-picker-today-color-checked-background-initial'?: string;
+    '--sinch-comp-date-picker-today-color-checked-border-initial'?: string;
+    '--sinch-com-text-font'?: string;
+    '--sinch-global-color-text'?: string;
+};
+export type TSinchDatePicker = {
+    props: TSinchDatePickerProps;
+    methods: TSinchDatePickerMethods;
+    events: TSinchDatePickerEvents;
+    style: TSinchDatePickerStyle;
 };
+export type TSinchDatePickerElement = NectaryComponentVanillaByType<TSinchDatePicker>;
+export type TSinchDatePickerReact = NectaryComponentReactByType<TSinchDatePicker>;

package/dialog/index.d.ts

@@ -1,21 +1,25 @@
 import '../icon';
 import '../stop-events';
 import '../title';
-import type { TSinchDialogElement, TSinchDialogReact } from './types';
+import type { TSinchDialog } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-dialog': TSinchDialog;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-dialog': TSinchDialogElement;
+        'sinch-dialog': NectaryComponentVanilla<'sinch-dialog'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-dialog': TSinchDialogReact;
+            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-dialog': TSinchDialogReact;
+            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
         }
     }
 }

package/dialog/types.d.ts

@@ -1,20 +1,6 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchDialogCloseDetail = 'close' | 'escape' | 'backdrop';
-export type TSinchDialogElement = HTMLElement & {
-    /** Open/close state */
-    open: boolean;
-    /** Dialog caption */
-    caption: string;
-    readonly dialogRect: TRect;
-    readonly closeButtonRect: TRect;
-    /** close event handler */
-    addEventListener(type: '-close', listener: (e: CustomEvent<TSinchDialogCloseDetail>) => void): void;
-    /** Dialog caption */
-    setAttribute(name: 'caption', value: string): void;
-    /** Close button label that is used for a11y */
-    setAttribute(name: 'close-aria-label', value: string): void;
-};
-export type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
+export type TSinchDialogProps = {
     /** Controls whether the dialog should be open */
     open: boolean;
     /** Dialog caption */
@@ -23,23 +9,33 @@ export type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
     'aria-label': string;
     /** Close button label that is used for a11y */
     'close-aria-label': string;
+    readonly dialogRect?: TRect;
+    readonly closeButtonRect?: TRect;
+};
+export type TSinchDialogEvents = {
     /** close event handler */
-    'on-close'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
-} & {
-    style?: {
-        '--sinch-comp-dialog-max-width'?: string;
-        '--sinch-comp-dialog-max-height'?: string;
-        '--sinch-comp-dialog-width'?: string;
-        '--sinch-dialog-close-button-display'?: string;
-        '--sinch-comp-dialog-shape-radius'?: string;
-        '--sinch-comp-dialog-font-title'?: string;
-        '--sinch-comp-dialog-shadow'?: string;
-        '--sinch-comp-dialog-color-default-background-initial'?: string;
-        '--sinch-comp-dialog-color-default-icon-initial'?: string;
-        '--sinch-comp-dialog-color-default-title-initial'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-comp-title-font'?: string;
-    };
+    '-close'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
+};
+export type TSinchDialogStyle = {
+    '--sinch-comp-dialog-max-width'?: string;
+    '--sinch-comp-dialog-max-height'?: string;
+    '--sinch-comp-dialog-width'?: string;
+    '--sinch-dialog-close-button-display'?: string;
+    '--sinch-comp-dialog-shape-radius'?: string;
+    '--sinch-comp-dialog-font-title'?: string;
+    '--sinch-comp-dialog-shadow'?: string;
+    '--sinch-comp-dialog-color-default-background-initial'?: string;
+    '--sinch-comp-dialog-color-default-icon-initial'?: string;
+    '--sinch-comp-dialog-color-default-title-initial'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-comp-title-font'?: string;
+};
+export type TSinchDialog = {
+    props: TSinchDialogProps;
+    events: TSinchDialogEvents;
+    style: TSinchDialogStyle;
 };
+export type TSinchDialogElement = NectaryComponentVanillaByType<TSinchDialog>;
+export type TSinchDialogReact = NectaryComponentReactByType<TSinchDialog>;

package/emoji/index.d.ts

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

package/emoji/types.d.ts

@@ -1,16 +1,15 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchEmojiElement = HTMLElement & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchEmojiProps = {
     /** Emoji character */
     char: string;
-    /** Emoji character */
-    setAttribute(name: 'char', value: string): void;
 };
-export type TSinchEmojiReact = TSinchElementReact<TSinchEmojiElement> & {
-    /** Emoji character */
-    char: string;
-} & {
-    style?: {
-        '--sinch-comp-emoji-vertical-align'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
+export type TSinchEmojiStyle = {
+    '--sinch-comp-emoji-vertical-align'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchEmoji = {
+    props: TSinchEmojiProps;
+    style: TSinchEmojiStyle;
 };
+export type TSinchEmojiElement = NectaryComponentVanillaByType<TSinchEmoji>;
+export type TSinchEmojiReact = NectaryComponentReactByType<TSinchEmoji>;

package/emoji-picker/index.d.ts

@@ -8,21 +8,25 @@ import '../tabs-icon-option';
 import '../emoji';
 import '../text';
 import '../icon';
-import type { TSinchEmojiPickerElement, TSinchEmojiPickerReact } from './types';
+import type { TSinchEmojiPicker } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-emoji-picker': TSinchEmojiPicker;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-emoji-picker': TSinchEmojiPickerElement;
+        'sinch-emoji-picker': NectaryComponentVanilla<'sinch-emoji-picker'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-emoji-picker': TSinchEmojiPickerReact;
+            'sinch-emoji-picker': NectaryComponentReact<'sinch-emoji-picker'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-emoji-picker': TSinchEmojiPickerReact;
+            'sinch-emoji-picker': NectaryComponentReact<'sinch-emoji-picker'>;
         }
     }
 }

package/emoji-picker/types.d.ts

@@ -1,4 +1,4 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TEmoji = {
     emoji: string;
     code: string;
@@ -10,26 +10,33 @@ export type TEmojiGroup = {
     name: string;
     emojis: TEmoji[];
 };
-export type TSinchEmojiPickerElement = HTMLElement & {
-    readonly skinToneButtonRect: TRect;
-    readonly searchInputRect: TRect;
-    readonly searchClearButtonRect: TRect;
+export type TSinchEmojiPickerProps = {
+    readonly skinToneButtonRect?: TRect;
+    readonly searchInputRect?: TRect;
+    readonly searchClearButtonRect?: TRect;
+};
+export type TSinchEmojiPickerMethods = {
     nthSkinToneRect(index: number): TRect | null;
     nthTabRect(index: number): TRect | null;
     nthEmojiRect(index: number): TRect | null;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
 };
-export type TSinchEmojiPickerReact = TSinchElementReact<TSinchEmojiPickerElement> & {
+export type TSinchEmojiPickerEvents = {
     /** Change value handler */
-    'on-change': (e: CustomEvent<string>) => void;
-} & {
-    style?: {
-        '--sinch-comp-emoji-picker-font-not-found'?: string;
-        '--sinch-comp-emoji-picker-color-default-text-not-found'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-comp-text-font'?: string;
-    };
+    '-change': (e: CustomEvent<string>) => void;
+};
+export type TSinchEmojiPickerStyle = {
+    '--sinch-comp-emoji-picker-font-not-found'?: string;
+    '--sinch-comp-emoji-picker-color-default-text-not-found'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-comp-text-font'?: string;
+};
+export type TSinchEmojiPicker = {
+    props: TSinchEmojiPickerProps;
+    methods: TSinchEmojiPickerMethods;
+    events: TSinchEmojiPickerEvents;
+    style: TSinchEmojiPickerStyle;
 };
+export type TSinchEmojiPickerElement = NectaryComponentVanillaByType<TSinchEmojiPicker>;
+export type TSinchEmojiPickerReact = NectaryComponentReactByType<TSinchEmojiPicker>;

package/field/index.d.ts

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

package/field/types.d.ts

@@ -1,27 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchFieldElement = HTMLElement & {
-    /** Label */
-    label: string | null;
-    /** Optional text */
-    optionalText: string | null;
-    /** Additional text */
-    additionalText: string | null;
-    /** Invalid text, controls the overall invalid state of the text field */
-    invalidText: string | null;
-    /** Disabled */
-    disabled: boolean;
-    /** Label */
-    setAttribute(name: 'label', value: string): void;
-    /** Optional text */
-    setAttribute(name: 'optionaltext', value: string): void;
-    /** Additional text */
-    setAttribute(name: 'additionaltext', value: string): void;
-    /** Invalid text, controls the overall invalid state of the text field */
-    setAttribute(name: 'invalidtext', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchFieldProps = {
     /** Label that shows in UI */
     label?: string;
     /** Optional text */
@@ -32,18 +10,23 @@ export type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
     invalidText?: string;
     /** Disabled */
     disabled?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-field-font-label'?: string;
-        '--sinch-comp-field-font-optional'?: string;
-        '--sinch-comp-field-font-additional'?: string;
-        '--sinch-comp-field-font-invalid'?: string;
-        '--sinch-comp-field-color-default-label-initial'?: string;
-        '--sinch-comp-field-color-default-optional-initial'?: string;
-        '--sinch-comp-field-color-default-additional-initial'?: string;
-        '--sinch-comp-field-color-disabled-label-initial'?: string;
-        '--sinch-comp-field-color-disabled-optional-initial'?: string;
-        '--sinch-comp-field-color-disabled-additional-initial'?: string;
-        '--sinch-comp-field-color-invalid-text-initial'?: string;
-    };
 };
+export type TSinchFieldStyle = {
+    '--sinch-comp-field-font-label'?: string;
+    '--sinch-comp-field-font-optional'?: string;
+    '--sinch-comp-field-font-additional'?: string;
+    '--sinch-comp-field-font-invalid'?: string;
+    '--sinch-comp-field-color-default-label-initial'?: string;
+    '--sinch-comp-field-color-default-optional-initial'?: string;
+    '--sinch-comp-field-color-default-additional-initial'?: string;
+    '--sinch-comp-field-color-disabled-label-initial'?: string;
+    '--sinch-comp-field-color-disabled-optional-initial'?: string;
+    '--sinch-comp-field-color-disabled-additional-initial'?: string;
+    '--sinch-comp-field-color-invalid-text-initial'?: string;
+};
+export type TSinchField = {
+    props: TSinchFieldProps;
+    style: TSinchFieldStyle;
+};
+export type TSinchFieldElement = NectaryComponentVanillaByType<TSinchField>;
+export type TSinchFieldReact = NectaryComponentReactByType<TSinchField>;

package/file-drop/index.d.ts

@@ -1,20 +1,24 @@
 import '../text';
 import '../file-picker';
-import type { TSinchFileDropElement, TSinchFileDropReact } from './types';
+import type { TSinchFileDrop } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-file-drop': TSinchFileDrop;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-file-drop': TSinchFileDropElement;
+        'sinch-file-drop': NectaryComponentVanilla<'sinch-file-drop'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-file-drop': TSinchFileDropReact;
+            'sinch-file-drop': NectaryComponentReact<'sinch-file-drop'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-file-drop': TSinchFileDropReact;
+            'sinch-file-drop': NectaryComponentReact<'sinch-file-drop'>;
         }
     }
 }