@nectary/components 4.8.1 → 4.9.0

package/horizontal-stepper-item/types.d.ts

@@ -1,47 +1,38 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchHorizontalStepperStatusType = 'error' | 'skip';
-export type TSinchHorizontalStepperItemElement = HTMLElement & {
-    /** Label */
-    label: string;
-    /** Description */
-    description: string | null;
-    /** Status */
-    status: TSinchHorizontalStepperStatusType | null;
-    /** Label */
-    setAttribute(name: 'label', value: string): void;
-    /** Description */
-    setAttribute(name: 'description', value: string): void;
-    /** Status */
-    setAttribute(name: 'status', value: TSinchHorizontalStepperStatusType): void;
-};
-export type TSinchHorizontalStepperItemReact = TSinchElementReact<TSinchHorizontalStepperItemElement> & {
+export type TSinchHorizontalStepperItemProps = {
     /** Label */
     label: string;
     /** Description */
     description?: string;
     /** Status */
     status?: TSinchHorizontalStepperStatusType;
-} & {
-    style?: {
-        '--sinch-comp-horizontal-stepper-color-background-default'?: string;
-        '--sinch-comp-horizontal-stepper-color-background-active'?: string;
-        '--sinch-comp-horizontal-stepper-color-background-visited'?: string;
-        '--sinch-comp-horizontal-stepper-color-background-visited-error'?: string;
-        '--sinch-comp-horizontal-stepper-color-background-visited-skip'?: string;
-        '--sinch-comp-horizontal-stepper-color-border-default'?: string;
-        '--sinch-comp-horizontal-stepper-color-border-active'?: string;
-        '--sinch-comp-horizontal-stepper-color-border-visited'?: string;
-        '--sinch-comp-horizontal-stepper-color-border-visited-error'?: string;
-        '--sinch-comp-horizontal-stepper-color-border-visited-skip'?: string;
-        '--sinch-comp-horizontal-stepper-color-icon-default'?: string;
-        '--sinch-comp-horizontal-stepper-color-icon-active'?: string;
-        '--sinch-comp-horizontal-stepper-color-icon-visited'?: string;
-        '--sinch-comp-horizontal-stepper-color-icon-visited-error'?: string;
-        '--sinch-comp-horizontal-stepper-color-icon-visited-skip'?: string;
-        '--sinch-comp-horizontal-stepper-color-label'?: string;
-        '--sinch-comp-horizontal-stepper-color-description'?: string;
-        '--sinch-sys-font-desktop-title-s'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-global-color-text'?: string;
-    };
 };
+export type TSinchHorizontalStepperItemStyle = {
+    '--sinch-comp-horizontal-stepper-color-background-default'?: string;
+    '--sinch-comp-horizontal-stepper-color-background-active'?: string;
+    '--sinch-comp-horizontal-stepper-color-background-visited'?: string;
+    '--sinch-comp-horizontal-stepper-color-background-visited-error'?: string;
+    '--sinch-comp-horizontal-stepper-color-background-visited-skip'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-default'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-active'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-visited'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-visited-error'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-visited-skip'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-default'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-active'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-visited'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-visited-error'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-visited-skip'?: string;
+    '--sinch-comp-horizontal-stepper-color-label'?: string;
+    '--sinch-comp-horizontal-stepper-color-description'?: string;
+    '--sinch-sys-font-desktop-title-s'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-text'?: string;
+};
+export type TSinchHorizontalStepperItem = {
+    props: TSinchHorizontalStepperItemProps;
+    style: TSinchHorizontalStepperItemStyle;
+};
+export type TSinchHorizontalStepperItemElement = NectaryComponentVanillaByType<TSinchHorizontalStepperItem>;
+export type TSinchHorizontalStepperItemReact = NectaryComponentReactByType<TSinchHorizontalStepperItem>;

package/icon/index.d.ts

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

package/icon/types.d.ts

@@ -1,41 +1,31 @@
 import type { TSinchIcons } from './generated-icon-type';
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export { TSinchIcons };
-export type TSinchIconElement = HTMLElement & ({
+export type TSinchIconProps = ({
     /** Icon font version */
     'icons-version': '1';
     /** Icon name */
     name: string;
-    /** Icon name */
-    setAttribute(name: 'name', value: string): void;
 } | {
     /** Icon font version */
     'icons-version': '2';
     /** Icon name */
     name: TSinchIcons;
-    /** Icon name */
-    setAttribute(name: 'name', value: TSinchIcons): void;
 });
-export type TSinchIconReact = TSinchElementReact<TSinchIconElement> & ({
-    /** Icon font version */
-    'icons-version': '1';
-    /** Icon name */
-    name: string;
-} | {
-    /** Icon font version */
-    'icons-version': '2';
-    /** Icon name */
-    name: TSinchIcons;
-}) & {
-    style?: {
-        '--sinch-comp-icon-font-weight'?: string;
-        '--sinch-comp-icon-font-family'?: string;
-        '--sinch-comp-icon-font-feature-settings'?: string;
-        '--sinch-comp-icon-font-family-zero-to-d'?: string;
-        '--sinch-comp-icon-font-family-e-to-o'?: string;
-        '--sinch-comp-icon-font-family-p-to-z'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-sys-color-text-default'?: string;
-    };
+export type TSinchIconStyle = {
+    '--sinch-comp-icon-font-weight'?: string;
+    '--sinch-comp-icon-font-family'?: string;
+    '--sinch-comp-icon-font-feature-settings'?: string;
+    '--sinch-comp-icon-font-family-zero-to-d'?: string;
+    '--sinch-comp-icon-font-family-e-to-o'?: string;
+    '--sinch-comp-icon-font-family-p-to-z'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-sys-color-text-default'?: string;
+};
+export type TSinchIcon = {
+    props: TSinchIconProps;
+    style: TSinchIconStyle;
 };
+export type TSinchIconElement = NectaryComponentVanillaByType<TSinchIcon>;
+export type TSinchIconReact = NectaryComponentReactByType<TSinchIcon>;

package/inline-alert/index.d.ts

@@ -2,21 +2,25 @@ import '../icon';
 import '../rich-text';
 import '../text';
 import '../title';
-import type { TSinchInlineAlertElement, TSinchInlineAlertReact } from './types';
+import type { TSinchInlineAlert } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-inline-alert': TSinchInlineAlert;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-inline-alert': TSinchInlineAlertElement;
+        'sinch-inline-alert': NectaryComponentVanilla<'sinch-inline-alert'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-inline-alert': TSinchInlineAlertReact;
+            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-inline-alert': TSinchInlineAlertReact;
+            'sinch-inline-alert': NectaryComponentReact<'sinch-inline-alert'>;
         }
     }
 }

package/inline-alert/types.d.ts

@@ -1,37 +1,34 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
-export type TSinchInlineAlertElement = HTMLElement & {
+export type TSinchInlineAlertProps = {
     type: TSinchInlineAlertType;
-    text: string | null;
-    caption: string;
-    setAttribute(name: 'type', value: TSinchInlineAlertType): void;
-    setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'caption', value: string): void;
-};
-export type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement> & {
-    type: TSinchInlineAlertType;
-    text?: string;
+    text?: string | null;
     caption?: string;
-} & {
-    style?: {
-        '--sinch-comp-inline-alert-shape-radius'?: string;
-        '--sinch-comp-inline-alert-color-success-default-background'?: string;
-        '--sinch-comp-inline-alert-color-success-default-text'?: string;
-        '--sinch-comp-inline-alert-color-success-default-icon'?: string;
-        '--sinch-comp-inline-alert-color-warning-default-background'?: string;
-        '--sinch-comp-inline-alert-color-warning-default-text'?: string;
-        '--sinch-comp-inline-alert-color-warning-default-icon'?: string;
-        '--sinch-comp-inline-alert-color-error-default-background'?: string;
-        '--sinch-comp-inline-alert-color-error-default-text'?: string;
-        '--sinch-comp-inline-alert-color-error-default-icon'?: string;
-        '--sinch-comp-inline-alert-color-info-default-background'?: string;
-        '--sinch-comp-inline-alert-color-info-default-text'?: string;
-        '--sinch-comp-inline-alert-color-info-default-icon'?: string;
-        '--sinch-comp-inline-alert-font-title'?: string;
-        '--sinch-comp-inline-alert-font-body'?: string;
-        '--sinch-comp-title-font'?: string;
-        '--sinch-comp-rich-text-font'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-    };
 };
+export type TSinchInlineAlertStyle = {
+    '--sinch-comp-inline-alert-shape-radius'?: string;
+    '--sinch-comp-inline-alert-color-success-default-background'?: string;
+    '--sinch-comp-inline-alert-color-success-default-text'?: string;
+    '--sinch-comp-inline-alert-color-success-default-icon'?: string;
+    '--sinch-comp-inline-alert-color-warning-default-background'?: string;
+    '--sinch-comp-inline-alert-color-warning-default-text'?: string;
+    '--sinch-comp-inline-alert-color-warning-default-icon'?: string;
+    '--sinch-comp-inline-alert-color-error-default-background'?: string;
+    '--sinch-comp-inline-alert-color-error-default-text'?: string;
+    '--sinch-comp-inline-alert-color-error-default-icon'?: string;
+    '--sinch-comp-inline-alert-color-info-default-background'?: string;
+    '--sinch-comp-inline-alert-color-info-default-text'?: string;
+    '--sinch-comp-inline-alert-color-info-default-icon'?: string;
+    '--sinch-comp-inline-alert-font-title'?: string;
+    '--sinch-comp-inline-alert-font-body'?: string;
+    '--sinch-comp-title-font'?: string;
+    '--sinch-comp-rich-text-font'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+};
+export type TSinchInlineAlert = {
+    props: TSinchInlineAlertProps;
+    style: TSinchInlineAlertStyle;
+};
+export type TSinchInlineAlertElement = NectaryComponentVanillaByType<TSinchInlineAlert>;
+export type TSinchInlineAlertReact = NectaryComponentReactByType<TSinchInlineAlert>;

package/input/index.d.ts

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

package/input/types.d.ts

@@ -1,71 +1,21 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchInputType = 'text' | 'password' | 'number';
 export type TSinchInputClipboardEvent = CustomEvent<{
     value: string;
     replaceWith: (value: string) => void;
 }>;
-export type TSinchInputElement = HTMLElement & {
-    /** Text field type, `text` by default */
-    type: TSinchInputType;
-    /** Value */
-    value: string;
-    /** Mask */
-    mask: string | null;
-    /** Text that appears in the text field when it has no value set */
-    placeholder: string | null;
-    /** The HTML autocomplete attribute */
-    autocomplete: HTMLInputElement['autocomplete'];
-    /** Invalid state */
-    invalid: boolean;
-    /** Disabled */
-    disabled: boolean;
-    /** Whether the input should be autocofused */
-    autofocus: boolean;
-    /** Size, `m` by default */
-    size: TSinchSize;
-    selectionStart: number | null;
-    selectionEnd: number | null;
-    selectionDirection: 'forward' | 'backward' | 'none' | null;
-    setSelectionRange(selectionStart: number, selectionEnd: number): void;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Focus event */
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    /** Blur event */
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Wheel event */
-    addEventListener(type: '-wheel', listener: (e: CustomEvent<void>) => void): void;
-    /** Text field type, `text` by default */
-    setAttribute(name: 'type', value: TSinchInputType): void;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Mask */
-    setAttribute(name: 'mask', value: string): void;
-    /** Text that appears in the text field when it has no value set */
-    setAttribute(name: 'placeholder', value: string): void;
-    /** The HTML autocomplete attribute */
-    setAttribute(name: 'autocomplete', value: string): void;
-    /** Invalid state */
-    setAttribute(name: 'invalid', value: ''): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-    /** Autofocus */
-    setAttribute(name: 'autofocus', value: ''): void;
-    /** Size, `m` by default */
-    setAttribute(name: 'size', value: TSinchSize): void;
-};
-export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
+export type TSinchInputProps = {
     /** Controlled value, doesn't change on its own and requres an onChange-value state loop */
     value: string;
     /** Mask */
-    mask?: string;
+    mask?: string | null;
     /** Label that is used for a11y – might be different from `label` */
     'aria-label': string;
     /** Text field type, `text` by default */
     type?: TSinchInputType;
     /** The HTML autocomplete attribute */
-    autocomplete?: string;
+    autocomplete?: string | null;
     /** Text that appears in the text field when it has no value set */
     placeholder?: string;
     /** Invalid state */
@@ -76,43 +26,58 @@ export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     autofocus?: boolean;
     /** Size, `m` by default */
     size?: TSinchSize;
+    selectionStart?: number | null;
+    selectionEnd?: number | null;
+    selectionDirection?: 'forward' | 'backward' | 'none' | null;
+};
+export type TSinchInputMethods = {
+    setSelectionRange(selectionStart: number, selectionEnd: number): void;
+};
+export type TSinchInputEvents = {
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<string>) => void;
+    '-change'?: (e: CustomEvent<string>) => void;
     /** Focus handler */
-    'on-focus'?: (e: CustomEvent<void>) => void;
+    '-focus'?: (e: CustomEvent<void>) => void;
     /** Blur handler */
-    'on-blur'?: (e: CustomEvent<void>) => void;
-    'on-cut'?: (e: TSinchInputClipboardEvent) => void;
-    'on-copy'?: (e: TSinchInputClipboardEvent) => void;
-    'on-paste'?: (e: TSinchInputClipboardEvent) => void;
-    'on-wheel'?: (e: CustomEvent<void> & {
-        target: TSinchInputElement;
+    '-blur'?: (e: CustomEvent<void>) => void;
+    '-cut'?: (e: TSinchInputClipboardEvent) => void;
+    '-copy'?: (e: TSinchInputClipboardEvent) => void;
+    '-paste'?: (e: TSinchInputClipboardEvent) => void;
+    '-wheel'?: (e: CustomEvent<void> & {
+        target: NectaryComponentVanilla<'sinch-input'>;
     }) => void;
-} & {
-    style?: {
-        '--sinch-comp-input-size-container-l'?: string;
-        '--sinch-comp-input-size-container-m'?: string;
-        '--sinch-comp-input-size-container-s'?: string;
-        '--sinch-comp-input-size-icon-l'?: string;
-        '--sinch-comp-input-size-icon-m'?: string;
-        '--sinch-comp-input-size-icon-s'?: string;
-        '--sinch-comp-input-shape-radius-size-l'?: string;
-        '--sinch-comp-input-shape-radius-size-m'?: string;
-        '--sinch-comp-input-shape-radius-size-s'?: string;
-        '--sinch-comp-input-font-input'?: string;
-        '--sinch-comp-input-font-placeholder'?: string;
-        '--sinch-sys-font-body-monospace-m'?: string;
-        '--sinch-comp-input-color-default-background-initial'?: string;
-        '--sinch-comp-input-color-default-text-initial'?: string;
-        '--sinch-comp-input-color-default-text-placeholder'?: string;
-        '--sinch-comp-input-color-default-border-initial'?: string;
-        '--sinch-comp-input-color-default-border-focus'?: string;
-        '--sinch-comp-input-color-default-icon-initial'?: string;
-        '--sinch-comp-input-color-disabled-text-initial'?: string;
-        '--sinch-comp-input-color-disabled-border-initial'?: string;
-        '--sinch-comp-input-color-disabled-icon-initial'?: string;
-        '--sinch-comp-input-color-invalid-border-initial'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-global-color-icon'?: string;
-    };
 };
+export type TSinchInputStyle = {
+    '--sinch-comp-input-size-container-l'?: string;
+    '--sinch-comp-input-size-container-m'?: string;
+    '--sinch-comp-input-size-container-s'?: string;
+    '--sinch-comp-input-size-icon-l'?: string;
+    '--sinch-comp-input-size-icon-m'?: string;
+    '--sinch-comp-input-size-icon-s'?: string;
+    '--sinch-comp-input-shape-radius-size-l'?: string;
+    '--sinch-comp-input-shape-radius-size-m'?: string;
+    '--sinch-comp-input-shape-radius-size-s'?: string;
+    '--sinch-comp-input-font-input'?: string;
+    '--sinch-comp-input-font-placeholder'?: string;
+    '--sinch-sys-font-body-monospace-m'?: string;
+    '--sinch-comp-input-color-default-background-initial'?: string;
+    '--sinch-comp-input-color-default-text-initial'?: string;
+    '--sinch-comp-input-color-default-text-placeholder'?: string;
+    '--sinch-comp-input-color-default-border-initial'?: string;
+    '--sinch-comp-input-color-default-border-focus'?: string;
+    '--sinch-comp-input-color-default-icon-initial'?: string;
+    '--sinch-comp-input-color-disabled-text-initial'?: string;
+    '--sinch-comp-input-color-disabled-border-initial'?: string;
+    '--sinch-comp-input-color-disabled-icon-initial'?: string;
+    '--sinch-comp-input-color-invalid-border-initial'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-icon'?: string;
+};
+export type TSinchInput = {
+    props: TSinchInputProps;
+    methods: TSinchInputMethods;
+    events: TSinchInputEvents;
+    style: TSinchInputStyle;
+};
+export type TSinchInputElement = NectaryComponentVanillaByType<TSinchInput>;
+export type TSinchInputReact = NectaryComponentReactByType<TSinchInput>;

package/link/index.d.ts

@@ -1,19 +1,23 @@
 import '../icon';
-import type { TSinchLinkElement, TSinchLinkReact } from './types';
+import type { TSinchLink } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-link': TSinchLink;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-link': TSinchLinkElement;
+        'sinch-link': NectaryComponentVanilla<'sinch-link'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-link': TSinchLinkReact;
+            'sinch-link': NectaryComponentReact<'sinch-link'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-link': TSinchLinkReact;
+            'sinch-link': NectaryComponentReact<'sinch-link'>;
         }
     }
 }

package/link/types.d.ts

@@ -1,39 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchLinkElement = HTMLElement & {
-    /** Text content of hyperlink */
-    text: string;
-    /** URL that hyperlink point to */
-    href: string;
-    /** Disabled */
-    disabled: boolean;
-    /** Replaces the anchor tag behaviour to use history instead */
-    'use-history': boolean;
-    /** Sets `target="_blank" and a special external icon on the left side */
-    external: boolean;
-    /** Special standalone (`display: block`) mode with an arrow icon on the right side */
-    standalone: boolean;
-    /** Prevents default behaviour on hyperlink click */
-    preventDefault: boolean;
-    /** Click event */
-    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
-    /** Focus event */
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    /** Blur event */
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Text content of hyperlink */
-    setAttribute(name: 'text', value: string): void;
-    /** URL that hyperlink point to */
-    setAttribute(name: 'href', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-    /** Sets `target="_blank" and a special external icon on the left side */
-    setAttribute(name: 'external', value: ''): void;
-    /** Special standalone (`display: block`) mode with an arrow icon on the right side */
-    setAttribute(name: 'standalone', value: ''): void;
-    /** Prevents default behaviour on hyperlink click */
-    setAttribute(name: 'preventdefault', value: ''): void;
-};
-export type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchLinkProps = {
     /** Text content of hyperlink */
     text: string;
     /** URL that hyperlink point to */
@@ -50,28 +16,36 @@ export type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
     preventDefault?: boolean;
     /** Label that is used for a11y – might be different from `text` */
     'aria-label': string;
+};
+export type TSinchLinkEvents = {
     /** Click even handler */
-    'on-click'?: (e: CustomEvent<void>) => void;
+    '-click'?: (e: CustomEvent<void>) => void;
     /** Focus even handler */
-    'on-focus'?: (e: CustomEvent<void>) => void;
+    '-focus'?: (e: CustomEvent<void>) => void;
     /** Blur even handler */
-    'on-blur'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-link-default-font-initial'?: string;
-        '--sinch-comp-link-default-text-decoration-initial'?: string;
-        '--sinch-comp-link-default-text-decoration-hover'?: string;
-        '--sinch-comp-link-default-text-decoration-disabled'?: string;
-        '--sinch-comp-link-standalone-font-initial'?: string;
-        '--sinch-comp-link-color-default-text-initial'?: string;
-        '--sinch-comp-link-color-default-text-hover'?: string;
-        '--sinch-comp-link-color-default-icon-initial'?: string;
-        '--sinch-comp-link-color-default-icon-hover'?: string;
-        '--sinch-comp-link-color-default-outline-focus'?: string;
-        '--sinch-comp-link-color-disabled-text-initial'?: string;
-        '--sinch-comp-link-color-disabled-icon-initial'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-global-text-white-space'?: string;
-    };
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchLinkStyle = {
+    '--sinch-comp-link-default-font-initial'?: string;
+    '--sinch-comp-link-default-text-decoration-initial'?: string;
+    '--sinch-comp-link-default-text-decoration-hover'?: string;
+    '--sinch-comp-link-default-text-decoration-disabled'?: string;
+    '--sinch-comp-link-standalone-font-initial'?: string;
+    '--sinch-comp-link-color-default-text-initial'?: string;
+    '--sinch-comp-link-color-default-text-hover'?: string;
+    '--sinch-comp-link-color-default-icon-initial'?: string;
+    '--sinch-comp-link-color-default-icon-hover'?: string;
+    '--sinch-comp-link-color-default-outline-focus'?: string;
+    '--sinch-comp-link-color-disabled-text-initial'?: string;
+    '--sinch-comp-link-color-disabled-icon-initial'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-text-white-space'?: string;
+};
+export type TSinchLink = {
+    props: TSinchLinkProps;
+    events: TSinchLinkEvents;
+    style: TSinchLinkStyle;
 };
+export type TSinchLinkElement = NectaryComponentVanillaByType<TSinchLink>;
+export type TSinchLinkReact = NectaryComponentReactByType<TSinchLink>;

package/list/index.d.ts

@@ -1,18 +1,21 @@
-import type { TSinchListElement, TSinchListReact } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-list': {};
+    }
     interface HTMLElementTagNameMap {
-        'sinch-list': TSinchListElement;
+        'sinch-list': NectaryComponentVanilla<'sinch-list'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-list': TSinchListReact;
+            'sinch-list': NectaryComponentReact<'sinch-list'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-list': TSinchListReact;
+            'sinch-list': NectaryComponentReact<'sinch-list'>;
         }
     }
 }

package/list/types.d.ts

@@ -1,3 +1,3 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchListElement = HTMLElement;
-export type TSinchListReact = TSinchElementReact<TSinchListElement>;
+export type TSinchListReact = NectaryComponentReactByType<TSinchListElement>;

package/list-item/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchListItemElement, TSinchListItemReact } from './types';
+import type { TSinchListItem } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-list-item': TSinchListItem;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-list-item': TSinchListItemElement;
+        'sinch-list-item': NectaryComponentVanilla<'sinch-list-item'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-list-item': TSinchListItemReact;
+            'sinch-list-item': NectaryComponentReact<'sinch-list-item'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-list-item': TSinchListItemReact;
+            'sinch-list-item': NectaryComponentReact<'sinch-list-item'>;
         }
     }
 }