@nectary/components 4.8.2 → 4.9.0

package/radio/types.d.ts

@@ -1,19 +1,20 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchRadioElement = HTMLElement & {
-    value: string;
-    invalid: boolean;
-    addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'invalid', value: ''): void;
-};
-export type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchRadioProps = {
     value: string;
     invalid?: boolean;
     'aria-label': string;
-    'on-change'?: (e: CustomEvent<string>) => void;
-} & {
-    style?: {
-        '--sinch-comp-radio-direction'?: 'row' | 'column';
-        '--sinch-comp-radio-gap'?: number | string;
-    };
 };
+export type TSinchRadioEvents = {
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchRadioStyle = {
+    '--sinch-comp-radio-direction'?: 'row' | 'column';
+    '--sinch-comp-radio-gap'?: number | string;
+};
+export type TSinchRadio = {
+    props: TSinchRadioProps;
+    events: TSinchRadioEvents;
+    style: TSinchRadioStyle;
+};
+export type TSinchRadioElement = NectaryComponentVanillaByType<TSinchRadio>;
+export type TSinchRadioReact = NectaryComponentReactByType<TSinchRadio>;

package/radio-option/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchRadioOptionElement, TSinchRadioOptionReact } from './types';
+import type { TSinchRadioOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-radio-option': TSinchRadioOption;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-radio-option': TSinchRadioOptionElement;
+        'sinch-radio-option': NectaryComponentVanilla<'sinch-radio-option'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-radio-option': TSinchRadioOptionReact;
+            'sinch-radio-option': NectaryComponentReact<'sinch-radio-option'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-radio-option': TSinchRadioOptionReact;
+            'sinch-radio-option': NectaryComponentReact<'sinch-radio-option'>;
         }
     }
 }

package/radio-option/types.d.ts

@@ -1,46 +1,41 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchRadioOptionElement = HTMLElement & {
-    value: string;
-    checked: boolean;
-    disabled: boolean;
-    text: string;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'checked', value: ''): void;
-    setAttribute(name: 'disabled', value: ''): void;
-    setAttribute(name: 'text', value: string): void;
-};
-export type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptionElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchRadioOptionProps = {
     value: string;
     checked?: boolean;
     disabled?: boolean;
     text: string;
     'aria-label': string;
-} & {
-    style?: {
-        '--sinch-comp-radio-color-default-background-initial'?: string;
-        '--sinch-comp-radio-color-default-background-hover'?: string;
-        '--sinch-comp-radio-color-default-background-active'?: string;
-        '--sinch-comp-radio-color-default-border-initial'?: string;
-        '--sinch-comp-radio-color-default-border-hover'?: string;
-        '--sinch-comp-radio-color-default-border-active'?: string;
-        '--sinch-comp-radio-color-default-label-initial'?: string;
-        '--sinch-comp-radio-color-default-outline-focus'?: string;
-        '--sinch-comp-radio-color-checked-border-initial'?: string;
-        '--sinch-comp-radio-color-checked-border-hover'?: string;
-        '--sinch-comp-radio-color-checked-border-active'?: string;
-        '--sinch-comp-radio-color-checked-knob-initial'?: string;
-        '--sinch-comp-radio-color-checked-knob-hover'?: string;
-        '--sinch-comp-radio-color-checked-knob-active'?: string;
-        '--sinch-comp-radio-color-invalid-border-initial'?: string;
-        '--sinch-comp-radio-color-invalid-border-hover'?: string;
-        '--sinch-comp-radio-color-invalid-border-active'?: string;
-        '--sinch-comp-radio-color-invalid-label-initial'?: string;
-        '--sinch-comp-radio-color-disabled-background-initial'?: string;
-        '--sinch-comp-radio-color-disabled-border-initial'?: string;
-        '--sinch-comp-radio-color-disabled-label-initial'?: string;
-        '--sinch-comp-radio-color-checked-disabled-border-initial'?: string;
-        '--sinch-comp-radio-color-checked-disabled-knob-initial'?: string;
-        '--sinch-comp-radio-color-checked-disabled-label-initial'?: string;
-        '--sinch-comp-radio-font-label'?: string;
-    };
 };
+export type TSinchRadioOptionStyle = {
+    '--sinch-comp-radio-color-default-background-initial'?: string;
+    '--sinch-comp-radio-color-default-background-hover'?: string;
+    '--sinch-comp-radio-color-default-background-active'?: string;
+    '--sinch-comp-radio-color-default-border-initial'?: string;
+    '--sinch-comp-radio-color-default-border-hover'?: string;
+    '--sinch-comp-radio-color-default-border-active'?: string;
+    '--sinch-comp-radio-color-default-label-initial'?: string;
+    '--sinch-comp-radio-color-default-outline-focus'?: string;
+    '--sinch-comp-radio-color-checked-border-initial'?: string;
+    '--sinch-comp-radio-color-checked-border-hover'?: string;
+    '--sinch-comp-radio-color-checked-border-active'?: string;
+    '--sinch-comp-radio-color-checked-knob-initial'?: string;
+    '--sinch-comp-radio-color-checked-knob-hover'?: string;
+    '--sinch-comp-radio-color-checked-knob-active'?: string;
+    '--sinch-comp-radio-color-invalid-border-initial'?: string;
+    '--sinch-comp-radio-color-invalid-border-hover'?: string;
+    '--sinch-comp-radio-color-invalid-border-active'?: string;
+    '--sinch-comp-radio-color-invalid-label-initial'?: string;
+    '--sinch-comp-radio-color-disabled-background-initial'?: string;
+    '--sinch-comp-radio-color-disabled-border-initial'?: string;
+    '--sinch-comp-radio-color-disabled-label-initial'?: string;
+    '--sinch-comp-radio-color-checked-disabled-border-initial'?: string;
+    '--sinch-comp-radio-color-checked-disabled-knob-initial'?: string;
+    '--sinch-comp-radio-color-checked-disabled-label-initial'?: string;
+    '--sinch-comp-radio-font-label'?: string;
+};
+export type TSinchRadioOption = {
+    props: TSinchRadioOptionProps;
+    style: TSinchRadioOptionStyle;
+};
+export type TSinchRadioOptionElement = NectaryComponentVanillaByType<TSinchRadioOption>;
+export type TSinchRadioOptionReact = NectaryComponentReactByType<TSinchRadioOption>;

package/rich-text/index.d.ts

@@ -1,21 +1,25 @@
 import '../emoji';
 import '../code-tag';
 import '../link';
-import type { TSinchRichTextElement, TSinchRichTextReact } from './types';
+import type { TSinchRichText } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-rich-text': TSinchRichText;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-rich-text': TSinchRichTextElement;
+        'sinch-rich-text': NectaryComponentVanilla<'sinch-rich-text'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-rich-text': TSinchRichTextReact;
+            'sinch-rich-text': NectaryComponentReact<'sinch-rich-text'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-rich-text': TSinchRichTextReact;
+            'sinch-rich-text': NectaryComponentReact<'sinch-rich-text'>;
         }
     }
 }

package/rich-text/types.d.ts

@@ -1,39 +1,39 @@
 import type { TSinchTextType } from '../text/types';
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type ElementClickedEvent = CustomEvent & {
     currentTarget: HTMLElement;
 };
-export type TSinchRichTextElement = HTMLElement & {
-    size: TSinchTextType;
-    text: string;
-    setAttribute(name: 'size', value: TSinchTextType): void;
-    setAttribute(name: 'text', value: string): void;
-    /** Click event */
-    addEventListener(type: '-element-click', listener: (e: ElementClickedEvent) => void): void;
-};
-export type TSinchRichTextReact = TSinchElementReact<TSinchRichTextElement> & {
+export type TSinchRichTextProps = {
     size?: TSinchTextType;
     text: string;
+};
+export type TSinchRichTextEvents = {
     /** Click event handler */
-    'on-element-click'?: (e: ElementClickedEvent) => void;
-} & {
-    style?: {
-        '--sinch-comp-rich-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-ref-typography-font-weight-700'?: string;
-        '--sinch-comp-link-default-font-initial'?: string;
-        '--sinch-comp-code-tag-font-text'?: string;
-        '--sinch-sys-color-text-default'?: string;
-        '--sinch-comp-link-color-default-text-initial'?: string;
-        '--sinch-comp-link-color-default-text-hover'?: string;
-        '--sinch-comp-code-tag-color-default-border-initial'?: string;
-        '--sinch-comp-code-tag-color-default-background-initial'?: string;
-        '--sinch-comp-code-tag-shape-radius'?: string;
-        '--sinch-comp-emoji-vertical-align'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
+    '-element-click'?: (e: ElementClickedEvent) => void;
+};
+export type TSinchRichTextStyle = {
+    '--sinch-comp-rich-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-ref-typography-font-weight-700'?: string;
+    '--sinch-comp-link-default-font-initial'?: string;
+    '--sinch-comp-code-tag-font-text'?: string;
+    '--sinch-sys-color-text-default'?: string;
+    '--sinch-comp-link-color-default-text-initial'?: string;
+    '--sinch-comp-link-color-default-text-hover'?: string;
+    '--sinch-comp-code-tag-color-default-border-initial'?: string;
+    '--sinch-comp-code-tag-color-default-background-initial'?: string;
+    '--sinch-comp-code-tag-shape-radius'?: string;
+    '--sinch-comp-emoji-vertical-align'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchRichText = {
+    props: TSinchRichTextProps;
+    events: TSinchRichTextEvents;
+    style: TSinchRichTextStyle;
 };
+export type TSinchRichTextElement = NectaryComponentVanillaByType<TSinchRichText>;
+export type TSinchRichTextReact = NectaryComponentReactByType<TSinchRichText>;

package/rich-text/utils.js

@@ -70,7 +70,7 @@ export const createParseVisitor = doc => {
                   $link.preventDefault = true;
                   break;
                 case 'use-history':
-                  $link['use-history'] = true;
+                  $link.useHistory = true;
                   break;
                 case 'external':
                   $link.external = true;

package/rich-textarea/index.d.ts

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

package/rich-textarea/types.d.ts

@@ -1,4 +1,4 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TRichTextareaSelection = {
     italic: boolean;
     bold: boolean;
@@ -8,11 +8,14 @@ export type TRichTextareaSelection = {
     ulist: boolean;
     olist: boolean;
 };
-export type TSinchRichTextareaElement = HTMLElement & {
+export type TSinchRichTextareaProps = {
     /** Value */
     value: string;
     /** Text that appears in the text field when it has no value set */
-    placeholder: string | null;
+    placeholder?: string;
+    'aria-label': string;
+};
+export type TSinchRichTextareaMethods = {
     insertText(value: string): void;
     insertLink(text: string, href: string): void;
     formatItalic(): void;
@@ -21,48 +24,39 @@ export type TSinchRichTextareaElement = HTMLElement & {
     formatCodeTag(): void;
     formatOrderedList(): void;
     formatUnorderedList(): 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;
-    addEventListener(type: '-selection', listener: (e: CustomEvent<TRichTextareaSelection>) => 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;
 };
-export type TSinchRichTextareaReact = TSinchElementReact<TSinchRichTextareaElement> & {
-    /** Value */
-    value: string;
-    /** Text that appears in the text field when it has no value set */
-    placeholder?: string;
-    'aria-label': string;
+export type TSinchRichTextareaEvents = {
     /** 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-code-tag-shape-radius'?: 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;
-        '--sinch-comp-code-tag-color-default-text-initial'?: string;
-        '--sinch-comp-code-tag-color-default-border-initial'?: string;
-        '--sinch-comp-code-tag-color-default-background-initial'?: string;
-        '--sinch-comp-link-color-default-text-initial'?: string;
-        '--sinch-comp-textarea-font-input'?: string;
-        '--sinch-comp-code-tag-font-text'?: string;
-        '--sinch-comp-link-default-font-initial'?: string;
-    };
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchRichTextareaStyle = {
+    '--sinch-comp-textarea-shape-radius'?: string;
+    '--sinch-comp-code-tag-shape-radius'?: 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;
+    '--sinch-comp-code-tag-color-default-text-initial'?: string;
+    '--sinch-comp-code-tag-color-default-border-initial'?: string;
+    '--sinch-comp-code-tag-color-default-background-initial'?: string;
+    '--sinch-comp-link-color-default-text-initial'?: string;
+    '--sinch-comp-textarea-font-input'?: string;
+    '--sinch-comp-code-tag-font-text'?: string;
+    '--sinch-comp-link-default-font-initial'?: string;
+};
+export type TSinchRichTextarea = {
+    props: TSinchRichTextareaProps;
+    methods: TSinchRichTextareaMethods;
+    events: TSinchRichTextareaEvents;
+    style: TSinchRichTextareaStyle;
 };
+export type TSinchRichTextareaElement = NectaryComponentVanillaByType<TSinchRichTextarea>;
+export type TSinchRichTextareaReact = NectaryComponentReactByType<TSinchRichTextarea>;

package/segment/index.d.ts

@@ -1,19 +1,23 @@
 import '../title';
-import type { TSinchSegmentElement, TSinchSegmentReact } from './types';
+import type { TSinchSegment } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-segment': TSinchSegment;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-segment': TSinchSegmentElement;
+        'sinch-segment': NectaryComponentVanilla<'sinch-segment'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-segment': TSinchSegmentReact;
+            'sinch-segment': NectaryComponentReact<'sinch-segment'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-segment': TSinchSegmentReact;
+            'sinch-segment': NectaryComponentReact<'sinch-segment'>;
         }
     }
 }

package/segment/types.d.ts

@@ -1,26 +1,23 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 import type { TSinchSize } from '../utils/size';
-export type TSinchSegmentElement = HTMLElement & {
-    caption: string;
-    collapsed: boolean;
-    size: TSinchSize;
-    readonly collapseButtonRect: TRect | null;
-    setAttribute(name: 'caption', value: string): void;
-    setAttribute(name: 'collapsed', value: ''): void;
-    setAttribute(name: 'size', value: TSinchSize): void;
-};
-export type TSinchSegmentReact = TSinchElementReact<TSinchSegmentElement> & {
+export type TSinchSegmentProps = {
     caption: string;
     collapsed?: boolean;
     size?: TSinchSize;
-} & {
-    style?: {
-        '--sinch-comp-segment-shape-radius'?: string;
-        '--sinch-comp-segment-color-default-border-initial'?: string;
-        '--sinch-comp-segment-color-default-background-initial'?: string;
-        '--sinch-comp-segment-font-size-m-title'?: string;
-        '--sinch-comp-segment-font-size-l-title'?: string;
-        '--sinch-comp-segment-font-size-s-title'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
+    readonly collapseButtonRect?: TRect | null;
+};
+export type TSinchSegmentStyle = {
+    '--sinch-comp-segment-shape-radius'?: string;
+    '--sinch-comp-segment-color-default-border-initial'?: string;
+    '--sinch-comp-segment-color-default-background-initial'?: string;
+    '--sinch-comp-segment-font-size-m-title'?: string;
+    '--sinch-comp-segment-font-size-l-title'?: string;
+    '--sinch-comp-segment-font-size-s-title'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchSegment = {
+    props: TSinchSegmentProps;
+    style: TSinchSegmentStyle;
 };
+export type TSinchSegmentElement = NectaryComponentVanillaByType<TSinchSegment>;
+export type TSinchSegmentReact = NectaryComponentReactByType<TSinchSegment>;

package/segment-collapse/index.d.ts

@@ -1,19 +1,23 @@
 import '../icon';
-import type { TSinchSegmentExpandElement, TSinchSegmentExpandReact } from './types';
+import type { TSinchSegmentExpand } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-segment-collapse': TSinchSegmentExpand;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-segment-collapse': TSinchSegmentExpandElement;
+        'sinch-segment-collapse': NectaryComponentVanilla<'sinch-segment-collapse'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-segment-collapse': TSinchSegmentExpandReact;
+            'sinch-segment-collapse': NectaryComponentReact<'sinch-segment-collapse'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-segment-collapse': TSinchSegmentExpandReact;
+            'sinch-segment-collapse': NectaryComponentReact<'sinch-segment-collapse'>;
         }
     }
 }

package/segment-collapse/types.d.ts

@@ -1,15 +1,18 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchSegmentExpandElement = HTMLElement & {
-    value: boolean;
-    addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
-    setAttribute(name: 'value', value: string): void;
-};
-export type TSinchSegmentExpandReact = TSinchElementReact<TSinchSegmentExpandElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchSegmentExpandProps = {
     value: boolean;
     'aria-label': string;
-    'on-change'?: (e: CustomEvent<boolean>) => void;
-} & {
-    style?: {
-        '--sinch-global-size-icon'?: string;
-    };
 };
+export type TSinchSegmentExpandEvents = {
+    '-change'?: (e: CustomEvent<boolean>) => void;
+};
+export type TSinchSegmentExpandStyle = {
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchSegmentExpand = {
+    props: TSinchSegmentExpandProps;
+    events: TSinchSegmentExpandEvents;
+    style: TSinchSegmentExpandStyle;
+};
+export type TSinchSegmentExpandElement = NectaryComponentVanillaByType<TSinchSegmentExpand>;
+export type TSinchSegmentExpandReact = NectaryComponentReactByType<TSinchSegmentExpand>;

package/segmented-control/index.d.ts

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

package/segmented-control/types.d.ts

@@ -1,11 +1,14 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchSegmentedControlElement = HTMLElement & {
-    value: string;
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    setAttribute(name: 'value', value: string): void;
-};
-export type TSinchSegmentedControlReact = TSinchElementReact<TSinchSegmentedControlElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchSegmentedControlProps = {
     value: string;
     'aria-label': string;
-    'on-change'?: (e: CustomEvent<string>) => void;
 };
+export type TSinchSegmentedControlEvents = {
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchSegmentedControl = {
+    props: TSinchSegmentedControlProps;
+    events: TSinchSegmentedControlEvents;
+};
+export type TSinchSegmentedControlElement = NectaryComponentVanillaByType<TSinchSegmentedControl>;
+export type TSinchSegmentedControlReact = NectaryComponentReactByType<TSinchSegmentedControl>;

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

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