@nectary/components 4.8.2 → 4.9.1

package/file-drop/types.d.ts

@@ -1,36 +1,6 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchFileDropInvalidType = 'accept' | 'multiple' | 'size';
-export type TSinchFileDropElement = HTMLElement & {
-    /** Allows to choose multiple files */
-    multiple: boolean;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    accept: string | null;
-    /** Max file size in bytes */
-    size: number | null;
-    /** Disabled state */
-    disabled: boolean;
-    /** Invalid state */
-    invalid: boolean;
-    /** Placeholder */
-    placeholder: string;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<File[]>) => void): void;
-    /** Invalid event */
-    addEventListener(type: '-invalid', listener: (e: CustomEvent<TSinchFileDropInvalidType>) => void): void;
-    /** Allows to choose multiple files */
-    setAttribute(name: 'multiple', value: ''): void;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    setAttribute(name: 'accept', value: string): void;
-    /** Max file size in bytes */
-    setAttribute(name: 'size', value: string): void;
-    /** Placeholder */
-    setAttribute(name: 'placeholder', value: string): void;
-    /** Invalid state */
-    setAttribute(name: 'invalid', value: ''): void;
-    /** Disabled state */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchFileDropReact = TSinchElementReact<TSinchFileDropElement> & {
+export type TSinchFileDropProps = {
     /** Allows to choose multiple files */
     multiple?: boolean;
     /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
@@ -43,29 +13,37 @@ export type TSinchFileDropReact = TSinchElementReact<TSinchFileDropElement> & {
     invalid?: boolean;
     /** Placeholder */
     placeholder: string;
+};
+export type TSinchFileDropEvents = {
     /** Change value handler */
-    'on-change': (e: CustomEvent<File[]>) => void;
+    '-change': (e: CustomEvent<File[]>) => void;
     /** Invalid handler */
-    'on-invalid': (e: CustomEvent<TSinchFileDropInvalidType>) => void;
-} & {
-    style?: {
-        '--sinch-comp-file-drop-shape-radius'?: string;
-        '--sinch-comp-file-drop-font-placeholder'?: string;
-        '--sinch-comp-file-drop-color-default-background-initial'?: string;
-        '--sinch-comp-file-drop-color-default-background-active'?: string;
-        '--sinch-comp-file-drop-color-default-border-initial'?: string;
-        '--sinch-comp-file-drop-color-default-border-active'?: string;
-        '--sinch-comp-file-drop-color-default-placeholder-initial'?: string;
-        '--sinch-comp-file-drop-color-default-placeholder-active'?: string;
-        '--sinch-comp-file-drop-color-invalid-background-initial'?: string;
-        '--sinch-comp-file-drop-color-invalid-background-active'?: string;
-        '--sinch-comp-file-drop-color-invalid-border-initial'?: string;
-        '--sinch-comp-file-drop-color-invalid-border-active'?: string;
-        '--sinch-comp-file-drop-color-invalid-placeholder-active'?: string;
-        '--sinch-comp-file-drop-color-disabled-background-initial'?: string;
-        '--sinch-comp-file-drop-color-disabled-border-initial'?: string;
-        '--sinch-comp-file-drop-color-disabled-placeholder-initial'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-comp-text-font'?: string;
-    };
+    '-invalid': (e: CustomEvent<TSinchFileDropInvalidType>) => void;
+};
+export type TSinchFileDropStyle = {
+    '--sinch-comp-file-drop-shape-radius'?: string;
+    '--sinch-comp-file-drop-font-placeholder'?: string;
+    '--sinch-comp-file-drop-color-default-background-initial'?: string;
+    '--sinch-comp-file-drop-color-default-background-active'?: string;
+    '--sinch-comp-file-drop-color-default-border-initial'?: string;
+    '--sinch-comp-file-drop-color-default-border-active'?: string;
+    '--sinch-comp-file-drop-color-default-placeholder-initial'?: string;
+    '--sinch-comp-file-drop-color-default-placeholder-active'?: string;
+    '--sinch-comp-file-drop-color-invalid-background-initial'?: string;
+    '--sinch-comp-file-drop-color-invalid-background-active'?: string;
+    '--sinch-comp-file-drop-color-invalid-border-initial'?: string;
+    '--sinch-comp-file-drop-color-invalid-border-active'?: string;
+    '--sinch-comp-file-drop-color-invalid-placeholder-active'?: string;
+    '--sinch-comp-file-drop-color-disabled-background-initial'?: string;
+    '--sinch-comp-file-drop-color-disabled-border-initial'?: string;
+    '--sinch-comp-file-drop-color-disabled-placeholder-initial'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-comp-text-font'?: string;
+};
+export type TSinchFileDrop = {
+    props: TSinchFileDropProps;
+    events: TSinchFileDropEvents;
+    style: TSinchFileDropStyle;
 };
+export type TSinchFileDropElement = NectaryComponentVanillaByType<TSinchFileDrop>;
+export type TSinchFileDropReact = NectaryComponentReactByType<TSinchFileDrop>;

package/file-picker/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchFilePickerElement, TSinchFilePickerReact } from './types';
+import type { TSinchFilePicker } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-file-picker': TSinchFilePicker;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-file-picker': TSinchFilePickerElement;
+        'sinch-file-picker': NectaryComponentVanilla<'sinch-file-picker'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-file-picker': TSinchFilePickerReact;
+            'sinch-file-picker': NectaryComponentReact<'sinch-file-picker'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-file-picker': TSinchFilePickerReact;
+            'sinch-file-picker': NectaryComponentReact<'sinch-file-picker'>;
         }
     }
 }

package/file-picker/types.d.ts

@@ -1,32 +1,22 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchFilePickerInvalidType = 'size';
-export type TSinchFilePickerElement = HTMLElement & {
-    /** Allows to choose multiple files */
-    multiple: boolean;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    accept: string | null;
-    /** Max file size in bytes */
-    size: number | null;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<File[]>) => void): void;
-    /** Invalid event */
-    addEventListener(type: '-invalid', listener: (e: CustomEvent<TSinchFilePickerInvalidType>) => void): void;
-    /** Allows to choose multiple files */
-    setAttribute(name: 'multiple', value: ''): void;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    setAttribute(name: 'accept', value: string): void;
-    /** Max file size in bytes */
-    setAttribute(name: 'size', value: string): void;
-};
-export type TSinchFilePickerReact = TSinchElementReact<TSinchFilePickerElement> & {
+export type TSinchFilePickerProps = {
     /** Allows to choose multiple files */
     multiple?: boolean;
     /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
     accept?: string;
     /** Max file size in bytes */
     size?: number;
+};
+export type TSinchFilePickerEvents = {
     /** Change value handler */
-    'on-change': (e: CustomEvent<File[]>) => void;
+    '-change': (e: CustomEvent<File[]>) => void;
     /** Invalid handler */
-    'on-invalid': (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
+    '-invalid': (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
+};
+export type TSinchFilePicker = {
+    props: TSinchFilePickerProps;
+    events: TSinchFilePickerEvents;
 };
+export type TSinchFilePickerElement = NectaryComponentVanillaByType<TSinchFilePicker>;
+export type TSinchFilePickerReact = NectaryComponentReactByType<TSinchFilePicker>;

package/file-status/index.d.ts

@@ -1,21 +1,25 @@
 import '../spinner';
 import '../icon';
 import '../text';
-import type { TSinchFileStatusElement, TSinchFileStatusReact } from './types';
+import type { TSinchFileStatus } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-file-status': TSinchFileStatus;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-file-status': TSinchFileStatusElement;
+        'sinch-file-status': NectaryComponentVanilla<'sinch-file-status'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-file-status': TSinchFileStatusReact;
+            'sinch-file-status': NectaryComponentReact<'sinch-file-status'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-file-status': TSinchFileStatusReact;
+            'sinch-file-status': NectaryComponentReact<'sinch-file-status'>;
         }
     }
 }

package/file-status/types.d.ts

@@ -1,39 +1,34 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchFileStatusType = 'pending' | 'loading' | 'progress' | 'success' | 'error';
-export type TSinchFileStatusElement = HTMLElement & {
+export type TSinchFileStatusProps = {
     /** File status type */
     type: TSinchFileStatusType;
     /** File name */
     filename: string;
-    /** File status type */
-    setAttribute(name: 'type', value: TSinchFileStatusType): void;
-    /** File name */
-    setAttribute(name: 'filename', value: string): void;
 };
-export type TSinchFileStatusReact = TSinchElementReact<TSinchFileStatusElement> & {
-    /** File status type */
-    type: TSinchFileStatusType;
-    /** File name */
-    filename: string;
-} & {
-    style?: {
-        '--sinch-comp-file-status-shape-radius'?: string;
-        '--sinch-comp-file-status-color-error-background'?: string;
-        '--sinch-comp-file-status-color-error-text'?: string;
-        '--sinch-comp-file-status-color-error-icon'?: string;
-        '--sinch-comp-file-status-color-success-background'?: string;
-        '--sinch-comp-file-status-color-success-text'?: string;
-        '--sinch-comp-file-status-color-success-icon'?: string;
-        '--sinch-comp-file-status-color-pending-background'?: string;
-        '--sinch-comp-file-status-color-pending-text'?: string;
-        '--sinch-comp-file-status-color-pending-icon'?: string;
-        '--sinch-comp-file-status-color-progress-background'?: string;
-        '--sinch-comp-file-status-color-progress-text'?: string;
-        '--sinch-comp-file-status-color-progress-icon'?: string;
-        '--sinch-comp-file-status-color-loading-background'?: string;
-        '--sinch-comp-file-status-color-loading-text'?: string;
-        '--sinch-comp-file-status-color-loading-icon'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-    };
+export type TSinchFileStatusStyle = {
+    '--sinch-comp-file-status-shape-radius'?: string;
+    '--sinch-comp-file-status-color-error-background'?: string;
+    '--sinch-comp-file-status-color-error-text'?: string;
+    '--sinch-comp-file-status-color-error-icon'?: string;
+    '--sinch-comp-file-status-color-success-background'?: string;
+    '--sinch-comp-file-status-color-success-text'?: string;
+    '--sinch-comp-file-status-color-success-icon'?: string;
+    '--sinch-comp-file-status-color-pending-background'?: string;
+    '--sinch-comp-file-status-color-pending-text'?: string;
+    '--sinch-comp-file-status-color-pending-icon'?: string;
+    '--sinch-comp-file-status-color-progress-background'?: string;
+    '--sinch-comp-file-status-color-progress-text'?: string;
+    '--sinch-comp-file-status-color-progress-icon'?: string;
+    '--sinch-comp-file-status-color-loading-background'?: string;
+    '--sinch-comp-file-status-color-loading-text'?: string;
+    '--sinch-comp-file-status-color-loading-icon'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+};
+export type TSinchFileStatus = {
+    props: TSinchFileStatusProps;
+    style: TSinchFileStatusStyle;
 };
+export type TSinchFileStatusElement = NectaryComponentVanillaByType<TSinchFileStatus>;
+export type TSinchFileStatusReact = NectaryComponentReactByType<TSinchFileStatus>;

package/flag/index.d.ts

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

package/flag/types.d.ts

@@ -1,15 +1,14 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchFlagElement = HTMLElement & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchFlagProps = {
     /** Flag country code */
     code: string;
-    /** Flag country code */
-    setAttribute(code: 'name', value: string): void;
 };
-export type TSinchFlagReact = TSinchElementReact<TSinchFlagElement> & {
-    /** Flag country code */
-    code: string;
-} & {
-    style?: {
-        '--sinch-global-size-icon'?: string;
-    };
+export type TSinchFlagStyle = {
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchFlag = {
+    props: TSinchFlagProps;
+    style: TSinchFlagStyle;
 };
+export type TSinchFlagElement = NectaryComponentVanillaByType<TSinchFlag>;
+export type TSinchFlagReact = NectaryComponentReactByType<TSinchFlag>;

package/grid/index.d.ts

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

package/grid/types.d.ts

@@ -1,18 +1,20 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchGridElement = HTMLElement;
-export type TSinchGridReact = TSinchElementReact<TSinchGridElement> & {
-    style?: {
-        '--sinch-comp-grid-columns-xl'?: string;
-        '--sinch-comp-grid-gutter-xl'?: string;
-        '--sinch-comp-grid-margin-xl'?: string;
-        '--sinch-comp-grid-columns-l'?: string;
-        '--sinch-comp-grid-gutter-l'?: string;
-        '--sinch-comp-grid-margin-l'?: string;
-        '--sinch-comp-grid-columns-m'?: string;
-        '--sinch-comp-grid-gutter-m'?: string;
-        '--sinch-comp-grid-margin-m'?: string;
-        '--sinch-comp-grid-columns-s'?: string;
-        '--sinch-comp-grid-gutter-s'?: string;
-        '--sinch-comp-grid-margin-s'?: string;
-    };
+import type { NectaryComponentReactByType } from '../types';
+export type TSinchGridStyle = {
+    '--sinch-comp-grid-columns-xl'?: string;
+    '--sinch-comp-grid-gutter-xl'?: string;
+    '--sinch-comp-grid-margin-xl'?: string;
+    '--sinch-comp-grid-columns-l'?: string;
+    '--sinch-comp-grid-gutter-l'?: string;
+    '--sinch-comp-grid-margin-l'?: string;
+    '--sinch-comp-grid-columns-m'?: string;
+    '--sinch-comp-grid-gutter-m'?: string;
+    '--sinch-comp-grid-margin-m'?: string;
+    '--sinch-comp-grid-columns-s'?: string;
+    '--sinch-comp-grid-gutter-s'?: string;
+    '--sinch-comp-grid-margin-s'?: string;
+};
+export type TSinchGrid = {
+    style: TSinchGridStyle;
 };
+export type TSinchGridElement = HTMLElement;
+export type TSinchGridReact = NectaryComponentReactByType<TSinchGridElement>;

package/grid-item/index.d.ts

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

package/grid-item/types.d.ts

@@ -1,17 +1,12 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchGridItemElement = HTMLElement & {
-    xl: number | null;
-    l: number | null;
-    m: number | null;
-    s: number | null;
-    setAttribute(name: 'xl', value: string): void;
-    setAttribute(name: 'l', value: string): void;
-    setAttribute(name: 'm', value: string): void;
-    setAttribute(name: 's', value: string): void;
-};
-export type TSinchGridItemReact = TSinchElementReact<TSinchGridItemElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchGridItemProps = {
     xl?: number;
     l?: number;
     m?: number;
     s?: number;
 };
+export type TSinchGridItem = {
+    props: TSinchGridItemProps;
+};
+export type TSinchGridItemElement = NectaryComponentVanillaByType<TSinchGridItem>;
+export type TSinchGridItemReact = NectaryComponentReactByType<TSinchGridItem>;

package/help-tooltip/index.d.ts

@@ -1,20 +1,24 @@
 import '../tooltip';
 import '../icon';
-import type { TSinchHelpTooltipElement, TSinchHelpTooltipReact } from './types';
+import type { TSinchHelpTooltip } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-help-tooltip': TSinchHelpTooltip;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-help-tooltip': TSinchHelpTooltipElement;
+        'sinch-help-tooltip': NectaryComponentVanilla<'sinch-help-tooltip'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-help-tooltip': TSinchHelpTooltipReact;
+            'sinch-help-tooltip': NectaryComponentReact<'sinch-help-tooltip'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-help-tooltip': TSinchHelpTooltipReact;
+            'sinch-help-tooltip': NectaryComponentReact<'sinch-help-tooltip'>;
         }
     }
 }

package/help-tooltip/types.d.ts

@@ -1,7 +1,12 @@
-import type { TSinchTooltipElement, TSinchTooltipReact } from '../tooltip/types';
-export type TSinchHelpTooltipElement = TSinchTooltipElement;
-export type TSinchHelpTooltipReact = TSinchTooltipReact & {
-    style?: {
-        '--sinch-global-size-icon'?: string;
-    };
+import type { TSinchTooltipProps } from '../tooltip/types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchHelpTooltipProps = TSinchTooltipProps;
+export type TSinchHelpTooltipStyle = {
+    '--sinch-global-size-icon'?: string;
 };
+export type TSinchHelpTooltip = {
+    props: TSinchHelpTooltipProps;
+    style: TSinchHelpTooltipStyle;
+};
+export type TSinchHelpTooltipElement = NectaryComponentVanillaByType<TSinchHelpTooltip>;
+export type TSinchHelpTooltipReact = NectaryComponentReactByType<TSinchHelpTooltip>;

package/horizontal-stepper/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchHorizontalStepperElement, TSinchHorizontalStepperReact } from './types';
+import type { TSinchHorizontalStepper } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-horizontal-stepper': TSinchHorizontalStepper;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-horizontal-stepper': TSinchHorizontalStepperElement;
+        'sinch-horizontal-stepper': NectaryComponentVanilla<'sinch-horizontal-stepper'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-horizontal-stepper': TSinchHorizontalStepperReact;
+            'sinch-horizontal-stepper': NectaryComponentReact<'sinch-horizontal-stepper'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-horizontal-stepper': TSinchHorizontalStepperReact;
+            'sinch-horizontal-stepper': NectaryComponentReact<'sinch-horizontal-stepper'>;
         }
     }
 }

package/horizontal-stepper/types.d.ts

@@ -1,43 +1,42 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchHorizontalStepperElement = HTMLElement & {
-    /** Current item index, starting from 1 */
-    index: string;
-    /** Current item index, starting from 1 */
-    setAttribute(name: 'index', value: string): void;
-};
-export type TSinchHorizontalStepperReact = TSinchElementReact<TSinchHorizontalStepperElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchHorizontalStepperProps = {
     /** Current item index, starting from 1 */
     index: string;
     /** Label that is used for a11y */
     'aria-label': string;
-} & {
-    style?: {
-        '--sinch-comp-horizontal-stepper-color-background-default'?: string;
-        '--sinch-comp-horizontal-stepper-color-background-visited-skip'?: 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-border-default'?: string;
-        '--sinch-comp-horizontal-stepper-color-border-visited-skip'?: 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-icon-default'?: string;
-        '--sinch-comp-horizontal-stepper-color-icon-visited-skip'?: 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-label'?: string;
-        '--sinch-comp-horizontal-stepper-color-description'?: string;
-        '--sinch-comp-horizontal-stepper-color-progress'?: string;
-        '--sinch-comp-horizontal-stepper-color-progress-visited'?: string;
-        '--sinch-sys-color-surface-tertiary-default'?: string;
-        '--sinch-sys-color-basic-pure'?: string;
-        '--sinch-sys-color-text-default'?: string;
-        '--sinch-sys-color-text-muted'?: string;
-        '--sinch-sys-color-feedback-danger-strong'?: string;
-        '--sinch-ref-color-neutral-350'?: string;
-        '--sinch-ref-color-neutral-700'?: string;
-        '--sinch-ref-color-neutral-900'?: string;
-    };
 };
+export type TSinchHorizontalStepperStyle = {
+    '--sinch-comp-horizontal-stepper-color-background-default'?: string;
+    '--sinch-comp-horizontal-stepper-color-background-visited-skip'?: 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-border-default'?: string;
+    '--sinch-comp-horizontal-stepper-color-border-visited-skip'?: 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-icon-default'?: string;
+    '--sinch-comp-horizontal-stepper-color-icon-visited-skip'?: 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-label'?: string;
+    '--sinch-comp-horizontal-stepper-color-description'?: string;
+    '--sinch-comp-horizontal-stepper-color-progress'?: string;
+    '--sinch-comp-horizontal-stepper-color-progress-visited'?: string;
+    '--sinch-sys-color-surface-tertiary-default'?: string;
+    '--sinch-sys-color-basic-pure'?: string;
+    '--sinch-sys-color-text-default'?: string;
+    '--sinch-sys-color-text-muted'?: string;
+    '--sinch-sys-color-feedback-danger-strong'?: string;
+    '--sinch-ref-color-neutral-350'?: string;
+    '--sinch-ref-color-neutral-700'?: string;
+    '--sinch-ref-color-neutral-900'?: string;
+};
+export type TSinchHorizontalStepper = {
+    props: TSinchHorizontalStepperProps;
+    style: TSinchHorizontalStepperStyle;
+};
+export type TSinchHorizontalStepperElement = NectaryComponentVanillaByType<TSinchHorizontalStepper>;
+export type TSinchHorizontalStepperReact = NectaryComponentReactByType<TSinchHorizontalStepper>;

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

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