@nectary/components 4.8.2 → 4.9.1

package/tabs-option/types.d.ts

@@ -1,19 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTabsOptionElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Text */
-    text: string;
-    /** Disabled */
-    disabled: boolean;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTabsOptionProps = {
     /** Value */
     value: string;
     /** Text */
@@ -22,23 +8,28 @@ export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement>
     'aria-label': string;
     /** Disabled */
     disabled?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-tab-font-label'?: string;
-        '--sinch-comp-tab-size-icon'?: string;
-        '--sinch-comp-tab-shape-radius'?: string;
-        '--sinch-comp-tab-color-default-background-initial'?: string;
-        '--sinch-comp-tab-color-default-background-hover'?: string;
-        '--sinch-comp-tab-color-default-text-initial'?: string;
-        '--sinch-comp-tab-color-default-icon-initial'?: string;
-        '--sinch-comp-tab-color-default-outline-focus'?: string;
-        '--sinch-comp-tab-color-checked-text-initial'?: string;
-        '--sinch-comp-tab-color-checked-icon-initial'?: string;
-        '--sinch-comp-tab-color-checked-border-initial'?: string;
-        '--sinch-comp-tab-color-disabled-text-initial'?: string;
-        '--sinch-comp-tab-color-disabled-icon-initial'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
 };
+export type TSinchTabsOptionStyle = {
+    '--sinch-comp-tab-font-label'?: string;
+    '--sinch-comp-tab-size-icon'?: string;
+    '--sinch-comp-tab-shape-radius'?: string;
+    '--sinch-comp-tab-color-default-background-initial'?: string;
+    '--sinch-comp-tab-color-default-background-hover'?: string;
+    '--sinch-comp-tab-color-default-text-initial'?: string;
+    '--sinch-comp-tab-color-default-icon-initial'?: string;
+    '--sinch-comp-tab-color-default-outline-focus'?: string;
+    '--sinch-comp-tab-color-checked-text-initial'?: string;
+    '--sinch-comp-tab-color-checked-icon-initial'?: string;
+    '--sinch-comp-tab-color-checked-border-initial'?: string;
+    '--sinch-comp-tab-color-disabled-text-initial'?: string;
+    '--sinch-comp-tab-color-disabled-icon-initial'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchTabsOption = {
+    props: TSinchTabsOptionProps;
+    style: TSinchTabsOptionStyle;
+};
+export type TSinchTabsOptionElement = NectaryComponentVanillaByType<TSinchTabsOption>;
+export type TSinchTabsOptionReact = NectaryComponentReactByType<TSinchTabsOption>;

package/tag/index.d.ts

@@ -1,20 +1,24 @@
 import '../text';
 import '../tooltip';
-import type { TSinchTagElement, TSinchTagReact } from './types';
+import type { TSinchTag } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-tag': TSinchTag;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-tag': TSinchTagElement;
+        'sinch-tag': NectaryComponentVanilla<'sinch-tag'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tag': TSinchTagReact;
+            'sinch-tag': NectaryComponentReact<'sinch-tag'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tag': TSinchTagReact;
+            'sinch-tag': NectaryComponentReact<'sinch-tag'>;
         }
     }
 }

package/tag/types.d.ts

@@ -1,25 +1,7 @@
 import type { TSinchTagColor } from './colors';
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type { TSinchTagColor };
-export type TSinchTagElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Color, gray by default */
-    color: TSinchTagColor | null;
-    /** Small */
-    small: boolean;
-    /** Ellipsis */
-    ellipsis: boolean;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Color, gray by default */
-    setAttribute(name: 'color', value: string): void;
-    /** Small */
-    setAttribute(name: 'small', value: ''): void;
-    /** Ellipsis */
-    setAttribute(name: 'ellipsis', value: ''): void;
-};
-export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
+export type TSinchTagProps = {
     /** Text */
     text: string;
     /** Color, gray by default */
@@ -28,19 +10,24 @@ export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
     small?: boolean;
     /** Ellipsis */
     ellipsis?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-tag-size-container-m'?: string;
-        '--sinch-comp-tag-size-container-s'?: string;
-        '--sinch-comp-tag-size-icon-m'?: string;
-        '--sinch-comp-tag-size-icon-s'?: string;
-        '--sinch-comp-tag-shape-radius'?: string;
-        '--sinch-comp-tag-font-size-m-label'?: string;
-        '--sinch-comp-tag-font-size-s-label'?: string;
-        '--sinch-comp-tag-color-default-background'?: string;
-        '--sinch-comp-tag-color-default-foreground'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
 };
+export type TSinchTagStyle = {
+    '--sinch-comp-tag-size-container-m'?: string;
+    '--sinch-comp-tag-size-container-s'?: string;
+    '--sinch-comp-tag-size-icon-m'?: string;
+    '--sinch-comp-tag-size-icon-s'?: string;
+    '--sinch-comp-tag-shape-radius'?: string;
+    '--sinch-comp-tag-font-size-m-label'?: string;
+    '--sinch-comp-tag-font-size-s-label'?: string;
+    '--sinch-comp-tag-color-default-background'?: string;
+    '--sinch-comp-tag-color-default-foreground'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchTag = {
+    props: TSinchTagProps;
+    style: TSinchTagStyle;
+};
+export type TSinchTagElement = NectaryComponentVanillaByType<TSinchTag>;
+export type TSinchTagReact = NectaryComponentReactByType<TSinchTag>;

package/text/index.d.ts

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

package/text/types.d.ts

@@ -1,24 +1,6 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
-export type TSinchTextElement = HTMLElement & {
-    /** Type */
-    type: TSinchTextType;
-    /** Block (“paragraph”, default) or inline (“span”) */
-    inline: boolean;
-    /** Emphasized */
-    emphasized: boolean;
-    /** Cuts the long text with “…” ellipsis */
-    ellipsis: boolean;
-    /** Type */
-    setAttribute(name: 'type', value: TSinchTextType): void;
-    /** Block (“paragraph”, default) or inline (“span”) */
-    setAttribute(name: 'inline', value: ''): void;
-    /** Emphasized */
-    setAttribute(name: 'emphasized', value: ''): void;
-    /** Cuts the long text with “…” ellipsis */
-    setAttribute(name: 'ellipsis', value: ''): void;
-};
-export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
+export type TSinchTextProps = {
     /** Type */
     type: TSinchTextType;
     /** Block (“paragraph”, default) or inline (“span”) */
@@ -27,18 +9,23 @@ export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
     emphasized?: boolean;
     /** Cuts the long text with “…” ellipsis */
     ellipsis?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-text-align'?: string;
-        '--sinch-comp-text-font'?: string;
-        '--sinch-sys-font-body-m'?: string;
-        '--sinch-sys-font-body-s'?: string;
-        '--sinch-sys-font-body-xs'?: string;
-        '--sinch-sys-font-body-xxs'?: string;
-        '--sinch-sys-font-body-emphasize'?: string;
-        '--sinch-sys-font-body-emphasize-s'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-sys-color-text-default'?: string;
-        '--sinch-global-text-white-space'?: string;
-    };
 };
+export type TSinchTextStyle = {
+    '--sinch-comp-text-align'?: string;
+    '--sinch-comp-text-font'?: string;
+    '--sinch-sys-font-body-m'?: string;
+    '--sinch-sys-font-body-s'?: string;
+    '--sinch-sys-font-body-xs'?: string;
+    '--sinch-sys-font-body-xxs'?: string;
+    '--sinch-sys-font-body-emphasize'?: string;
+    '--sinch-sys-font-body-emphasize-s'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-sys-color-text-default'?: string;
+    '--sinch-global-text-white-space'?: string;
+};
+export type TSinchText = {
+    props: TSinchTextProps;
+    style: TSinchTextStyle;
+};
+export type TSinchTextElement = NectaryComponentVanillaByType<TSinchText>;
+export type TSinchTextReact = NectaryComponentReactByType<TSinchText>;

package/textarea/index.d.ts

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

package/textarea/types.d.ts

@@ -1,42 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTextareaElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Text that appears in the text field when it has no value set */
-    placeholder: string | null;
-    /** Disabled */
-    disabled: boolean;
-    /** Invalid state */
-    invalid: boolean;
-    selectionStart: HTMLTextAreaElement['selectionStart'];
-    selectionEnd: HTMLTextAreaElement['selectionEnd'];
-    selectionDirection: HTMLTextAreaElement['selectionDirection'];
-    /** Number of rows */
-    rows: HTMLTextAreaElement['rows'];
-    minRows: HTMLTextAreaElement['rows'];
-    /** Whether the text field is resizable */
-    resizable: boolean;
-    /** 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;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Text that appears in the text field when it has no value set */
-    setAttribute(name: 'placeholder', value: string): void;
-    /** Invalid state */
-    setAttribute(name: 'invalid', value: ''): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-    /** Number of rows */
-    setAttribute(name: 'rows', value: string): void;
-    setAttribute(name: 'minrows', value: string): void;
-    /** Whether the text field is resizable */
-    setAttribute(name: 'resizable', value: ''): void;
-};
-export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTextareaProps = {
     /** Value */
     value: string;
     /** Text that appears in the text field when it has no value set */
@@ -51,24 +14,35 @@ export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
     minRows?: number;
     /** Whether the text field is resizable */
     resizable?: boolean;
+    selectionStart?: number;
+    selectionEnd?: number;
+    selectionDirection?: 'forward' | 'backward' | 'none';
+};
+export type TSinchTextareaEvents = {
     /** 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;
-} & {
-    style?: {
-        '--sinch-comp-textarea-shape-radius'?: string;
-        '--sinch-comp-textarea-font-input'?: string;
-        '--sinch-comp-textarea-size-resize-handle'?: string;
-        '--sinch-comp-textarea-color-default-background-initial'?: string;
-        '--sinch-comp-textarea-color-default-text-initial'?: string;
-        '--sinch-comp-textarea-color-default-text-placeholder'?: string;
-        '--sinch-comp-textarea-color-default-border-initial'?: string;
-        '--sinch-comp-textarea-color-default-border-focus'?: string;
-        '--sinch-comp-textarea-color-invalid-border-initial'?: string;
-        '--sinch-comp-textarea-color-disabled-text-initial'?: string;
-        '--sinch-comp-textarea-color-disabled-border-initial'?: string;
-    };
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchTextareaStyle = {
+    '--sinch-comp-textarea-shape-radius'?: string;
+    '--sinch-comp-textarea-font-input'?: string;
+    '--sinch-comp-textarea-size-resize-handle'?: string;
+    '--sinch-comp-textarea-color-default-background-initial'?: string;
+    '--sinch-comp-textarea-color-default-text-initial'?: string;
+    '--sinch-comp-textarea-color-default-text-placeholder'?: string;
+    '--sinch-comp-textarea-color-default-border-initial'?: string;
+    '--sinch-comp-textarea-color-default-border-focus'?: string;
+    '--sinch-comp-textarea-color-invalid-border-initial'?: string;
+    '--sinch-comp-textarea-color-disabled-text-initial'?: string;
+    '--sinch-comp-textarea-color-disabled-border-initial'?: string;
+};
+export type TSinchTextarea = {
+    props: TSinchTextareaProps;
+    events: TSinchTextareaEvents;
+    style: TSinchTextareaStyle;
 };
+export type TSinchTextareaElement = NectaryComponentVanillaByType<TSinchTextarea>;
+export type TSinchTextareaReact = NectaryComponentReactByType<TSinchTextarea>;

package/tile-control/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchTileControlElement, TSinchTileControlReact } from './types';
+import type { TSinchTileControl } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-tile-control': TSinchTileControl;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-tile-control': TSinchTileControlElement;
+        'sinch-tile-control': NectaryComponentVanilla<'sinch-tile-control'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tile-control': TSinchTileControlReact;
+            'sinch-tile-control': NectaryComponentReact<'sinch-tile-control'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tile-control': TSinchTileControlReact;
+            'sinch-tile-control': NectaryComponentReact<'sinch-tile-control'>;
         }
     }
 }

package/tile-control/types.d.ts

@@ -1,27 +1,7 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 /** Number of coumns from 1 to 10 */
 export type TSinchTileControlColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | number;
-export type TSinchTileControlElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Small */
-    small: boolean;
-    /** Multiple */
-    multiple: boolean;
-    /** Number of columns from 1 to 10 */
-    cols: TSinchTileControlColumns;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Small */
-    setAttribute(name: 'small', value: ''): void;
-    /** Multiple */
-    setAttribute(name: 'multiple', value: ''): void;
-    /** Number of columns from 1 to 10 */
-    setAttribute(name: 'cols', value: string): void;
-};
-export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement> & {
+export type TSinchTileControlProps = {
     /** Value */
     value: string;
     /** Multiple */
@@ -32,10 +12,18 @@ export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement
     cols: TSinchTileControlColumns;
     /** Label that is used for a11y */
     'aria-label': string;
+};
+export type TSinchTileControlEvents = {
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<string>) => void;
-} & {
-    style?: {
-        '--sinch-grid-num-columns'?: string;
-    };
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchTileControlStyle = {
+    '--sinch-grid-num-columns'?: string;
+};
+export type TSinchTileControl = {
+    props: TSinchTileControlProps;
+    events: TSinchTileControlEvents;
+    style: TSinchTileControlStyle;
 };
+export type TSinchTileControlElement = NectaryComponentVanillaByType<TSinchTileControl>;
+export type TSinchTileControlReact = NectaryComponentReactByType<TSinchTileControl>;

package/tile-control-option/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchTileControlOptionElement, TSinchTileControlOptionReact } from './types';
+import type { TSinchTileControlOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-tile-control-option': TSinchTileControlOption;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-tile-control-option': TSinchTileControlOptionElement;
+        'sinch-tile-control-option': NectaryComponentVanilla<'sinch-tile-control-option'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tile-control-option': TSinchTileControlOptionReact;
+            'sinch-tile-control-option': NectaryComponentReact<'sinch-tile-control-option'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-tile-control-option': TSinchTileControlOptionReact;
+            'sinch-tile-control-option': NectaryComponentReact<'sinch-tile-control-option'>;
         }
     }
 }

package/tile-control-option/types.d.ts

@@ -1,27 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTileControlOptionElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Text content */
-    text: string;
-    /** Disabled */
-    disabled: boolean;
-    /** Small */
-    small: boolean;
-    /** Focus event */
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    /** Blur event */
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Text content */
-    setAttribute(attr: 'text', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-    /** Small */
-    setAttribute(name: 'small', value: ''): void;
-};
-export type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlOptionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTileControlOptionProps = {
     /** Value */
     value: string;
     /** Text content */
@@ -30,37 +8,45 @@ export type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlO
     'aria-label': string;
     /** Disabled */
     disabled?: boolean;
+};
+export type TSinchTileControlOptionEvents = {
     /** Focus handler */
-    'on-focus'?: (e: CustomEvent<void>) => void;
+    '-focus'?: (e: CustomEvent<void>) => void;
     /** Blur handler */
-    'on-blur'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-tile-control-shape-radius-l'?: string;
-        '--sinch-comp-tile-control-shape-radius-s'?: string;
-        '--sinch-comp-tile-control-font-label'?: string;
-        '--sinch-comp-tile-control-size-m-icon'?: string;
-        '--sinch-comp-tile-control-size-s-icon'?: string;
-        '--sinch-comp-tile-control-color-default-background-initial'?: string;
-        '--sinch-comp-tile-control-color-default-border-initial'?: string;
-        '--sinch-comp-tile-control-color-default-text-initial'?: string;
-        '--sinch-comp-tile-control-color-default-icon-initial'?: string;
-        '--sinch-comp-tile-control-color-default-background-hover'?: string;
-        '--sinch-comp-tile-control-color-default-border-hover'?: string;
-        '--sinch-comp-tile-control-color-default-outline-focus'?: string;
-        '--sinch-comp-tile-control-color-checked-background-initial'?: string;
-        '--sinch-comp-tile-control-color-checked-border-initial'?: string;
-        '--sinch-comp-tile-control-color-checked-text-initial'?: string;
-        '--sinch-comp-tile-control-color-checked-icon-initial'?: string;
-        '--sinch-comp-tile-control-color-disabled-background-initial'?: string;
-        '--sinch-comp-tile-control-color-disabled-border-initial'?: string;
-        '--sinch-comp-tile-control-color-disabled-text-initial'?: string;
-        '--sinch-comp-tile-control-color-disabled-icon-initial'?: string;
-        '--sinch-comp-tile-control-shadow-initial'?: string;
-        '--sinch-comp-tile-control-shadow-hover'?: string;
-        '--sinch-comp-tile-control-shadow-active'?: string;
-        '--sinch-comp-tile-control-shadow-disabled'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-global-color-icon'?: string;
-    };
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchTileControlOptionStyle = {
+    '--sinch-comp-tile-control-shape-radius-l'?: string;
+    '--sinch-comp-tile-control-shape-radius-s'?: string;
+    '--sinch-comp-tile-control-font-label'?: string;
+    '--sinch-comp-tile-control-size-m-icon'?: string;
+    '--sinch-comp-tile-control-size-s-icon'?: string;
+    '--sinch-comp-tile-control-color-default-background-initial'?: string;
+    '--sinch-comp-tile-control-color-default-border-initial'?: string;
+    '--sinch-comp-tile-control-color-default-text-initial'?: string;
+    '--sinch-comp-tile-control-color-default-icon-initial'?: string;
+    '--sinch-comp-tile-control-color-default-background-hover'?: string;
+    '--sinch-comp-tile-control-color-default-border-hover'?: string;
+    '--sinch-comp-tile-control-color-default-outline-focus'?: string;
+    '--sinch-comp-tile-control-color-checked-background-initial'?: string;
+    '--sinch-comp-tile-control-color-checked-border-initial'?: string;
+    '--sinch-comp-tile-control-color-checked-text-initial'?: string;
+    '--sinch-comp-tile-control-color-checked-icon-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-background-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-border-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-text-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-icon-initial'?: string;
+    '--sinch-comp-tile-control-shadow-initial'?: string;
+    '--sinch-comp-tile-control-shadow-hover'?: string;
+    '--sinch-comp-tile-control-shadow-active'?: string;
+    '--sinch-comp-tile-control-shadow-disabled'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-icon'?: string;
+};
+export type TSinchTileControlOption = {
+    props: TSinchTileControlOptionProps;
+    events: TSinchTileControlOptionEvents;
+    style: TSinchTileControlOptionStyle;
 };
+export type TSinchTileControlOptionElement = NectaryComponentVanillaByType<TSinchTileControlOption>;
+export type TSinchTileControlOptionReact = NectaryComponentReactByType<TSinchTileControlOption>;

package/time-picker/index.d.ts

@@ -1,21 +1,25 @@
 import '../icon';
 import '../segmented-control';
 import '../segmented-control-option';
-import type { TSinchTimePickerElement, TSinchTimePickerReact } from './types';
+import type { TSinchTimePicker } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-time-picker': TSinchTimePicker;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-time-picker': TSinchTimePickerElement;
+        'sinch-time-picker': NectaryComponentVanilla<'sinch-time-picker'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-time-picker': TSinchTimePickerReact;
+            'sinch-time-picker': NectaryComponentReact<'sinch-time-picker'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-time-picker': TSinchTimePickerReact;
+            'sinch-time-picker': NectaryComponentReact<'sinch-time-picker'>;
         }
     }
 }