@nectary/components 4.8.1 → 4.9.0

package/card-v2/types.d.ts

@@ -1,25 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchCardV2Element = HTMLElement & {
-    /** Disabled */
-    disabled: boolean;
-    /** Selected */
-    selected: boolean;
-    /** Clickable
-     * @default true if a click event is provided.
-     */
-    clickable: boolean;
-    /** Click event */
-    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-    /** Selected */
-    setAttribute(name: 'selected', value: ''): void;
-    /** Clickable
-     * @default true if a click event is provided.
-     */
-    setAttribute(name: 'clickable', value: ''): void;
-};
-export type TSinchCardV2React = TSinchElementReact<TSinchCardV2Element> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchCardV2Props = {
     /** Disabled */
     disabled?: boolean;
     /** Selected */
@@ -28,36 +8,44 @@ export type TSinchCardV2React = TSinchElementReact<TSinchCardV2Element> & {
      * @default true if a click event is provided.
      */
     clickable?: boolean;
+};
+export type TSinchCardV2Events = {
     /** Click even handler */
-    'on-click'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-card-v2-shape-radius'?: string;
-        '--sinch-comp-card-v2-shadow-initial'?: string;
-        '--sinch-comp-card-v2-shadow-hover'?: string;
-        '--sinch-comp-card-v2-shadow-disabled'?: string;
-        '--sinch-comp-card-v2-shadow-active'?: string;
-        '--sinch-comp-card-v2-font-title'?: string;
-        '--sinch-comp-card-v2-font-description'?: string;
-        '--sinch-comp-card-v2-color-default-border-initial'?: string;
-        '--sinch-comp-card-v2-color-default-border-hover'?: string;
-        '--sinch-comp-card-v2-color-default-border-disabled'?: string;
-        '--sinch-comp-card-v2-color-default-border-active'?: string;
-        '--sinch-comp-card-v2-color-default-background-initial'?: string;
-        '--sinch-comp-card-v2-color-default-background-hover'?: string;
-        '--sinch-comp-card-v2-color-default-background-disabled'?: string;
-        '--sinch-comp-card-v2-color-default-background-active'?: string;
-        '--sinch-comp-card-v2-color-default-description-initial'?: string;
-        '--sinch-comp-card-v2-color-default-description-disabled'?: string;
-        '--sinch-comp-card-v2-color-selected-border-initial'?: string;
-        '--sinch-comp-card-v2-color-selected-border-hover'?: string;
-        '--sinch-comp-card-v2-color-selected-border-disabled'?: string;
-        '--sinch-comp-card-v2-color-selected-border-active'?: string;
-        '--sinch-comp-card-v2-color-selected-background-initial'?: string;
-        '--sinch-comp-card-v2-color-selected-background-hover'?: string;
-        '--sinch-comp-card-v2-color-selected-background-disabled'?: string;
-        '--sinch-comp-card-v2-color-selected-background-active'?: string;
-        '--sinch-comp-card-v2-color-selected-description-initial'?: string;
-        '--sinch-comp-card-v2-color-selected-description-disabled'?: string;
-    };
+    '-click'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchCardV2Style = {
+    '--sinch-comp-card-v2-shape-radius'?: string;
+    '--sinch-comp-card-v2-shadow-initial'?: string;
+    '--sinch-comp-card-v2-shadow-hover'?: string;
+    '--sinch-comp-card-v2-shadow-disabled'?: string;
+    '--sinch-comp-card-v2-shadow-active'?: string;
+    '--sinch-comp-card-v2-font-title'?: string;
+    '--sinch-comp-card-v2-font-description'?: string;
+    '--sinch-comp-card-v2-color-default-border-initial'?: string;
+    '--sinch-comp-card-v2-color-default-border-hover'?: string;
+    '--sinch-comp-card-v2-color-default-border-disabled'?: string;
+    '--sinch-comp-card-v2-color-default-border-active'?: string;
+    '--sinch-comp-card-v2-color-default-background-initial'?: string;
+    '--sinch-comp-card-v2-color-default-background-hover'?: string;
+    '--sinch-comp-card-v2-color-default-background-disabled'?: string;
+    '--sinch-comp-card-v2-color-default-background-active'?: string;
+    '--sinch-comp-card-v2-color-default-description-initial'?: string;
+    '--sinch-comp-card-v2-color-default-description-disabled'?: string;
+    '--sinch-comp-card-v2-color-selected-border-initial'?: string;
+    '--sinch-comp-card-v2-color-selected-border-hover'?: string;
+    '--sinch-comp-card-v2-color-selected-border-disabled'?: string;
+    '--sinch-comp-card-v2-color-selected-border-active'?: string;
+    '--sinch-comp-card-v2-color-selected-background-initial'?: string;
+    '--sinch-comp-card-v2-color-selected-background-hover'?: string;
+    '--sinch-comp-card-v2-color-selected-background-disabled'?: string;
+    '--sinch-comp-card-v2-color-selected-background-active'?: string;
+    '--sinch-comp-card-v2-color-selected-description-initial'?: string;
+    '--sinch-comp-card-v2-color-selected-description-disabled'?: string;
+};
+export type TSinchCardV2 = {
+    props: TSinchCardV2Props;
+    events: TSinchCardV2Events;
+    style: TSinchCardV2Style;
 };
+export type TSinchCardV2Element = NectaryComponentVanillaByType<TSinchCardV2>;
+export type TSinchCardV2React = NectaryComponentReactByType<TSinchCardV2>;

package/card-v2-title/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchCardTitleElement, TSinchCardTitleReact } from './types';
+import type { TSinchCardTitle } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-card-v2-title': TSinchCardTitle;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-card-v2-title': TSinchCardTitleElement;
+        'sinch-card-v2-title': NectaryComponentVanilla<'sinch-card-v2-title'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-card-v2-title': TSinchCardTitleReact;
+            'sinch-card-v2-title': NectaryComponentReact<'sinch-card-v2-title'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-card-v2-title': TSinchCardTitleReact;
+            'sinch-card-v2-title': NectaryComponentReact<'sinch-card-v2-title'>;
         }
     }
 }

package/card-v2-title/types.d.ts

@@ -1,23 +1,6 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchOrientation = 'horizontal' | 'vertical';
-export type TSinchCardTitleElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Orientation relative to the icon slot */
-    orientation: TSinchOrientation;
-    /** Cuts the long text with “…” ellipsis */
-    ellipsis: boolean;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /**
-    * Orientation relative to the icon slot
-    * @default "horizontal"
-    */
-    setAttribute(name: 'orientation', value: TSinchOrientation): void;
-    /** Cuts the long text with “…” ellipsis */
-    setAttribute(name: 'ellipsis', value: ''): void;
-};
-export type TSinchCardTitleReact = TSinchElementReact<TSinchCardTitleElement> & {
+export type TSinchCardTitleProps = {
     /** Text */
     text: string;
     /**
@@ -27,18 +10,23 @@ export type TSinchCardTitleReact = TSinchElementReact<TSinchCardTitleElement> &
     orientation?: TSinchOrientation;
     /** Cuts the long text with “…” ellipsis */
     ellipsis?: boolean;
-} & {
-    style?: {
-        '--sinch-comp-card-v2-font-title'?: string;
-        '--sinch-comp-card-v2-color-default-title-initial'?: string;
-        '--sinch-comp-card-v2-color-default-title-disabled'?: string;
-        '--sinch-comp-card-v2-color-default-icon-initial'?: string;
-        '--sinch-comp-card-v2-color-default-icon-disabled'?: string;
-        '--sinch-comp-card-v2-color-selected-title-disabled'?: string;
-        '--sinch-comp-card-v2-color-selected-icon-initial'?: string;
-        '--sinch-comp-card-v2-color-selected-icon-disabled'?: string;
-        '--sinch-comp-card-v2-size-icon'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
 };
+export type TSinchCardTitleStyle = {
+    '--sinch-comp-card-v2-font-title'?: string;
+    '--sinch-comp-card-v2-color-default-title-initial'?: string;
+    '--sinch-comp-card-v2-color-default-title-disabled'?: string;
+    '--sinch-comp-card-v2-color-default-icon-initial'?: string;
+    '--sinch-comp-card-v2-color-default-icon-disabled'?: string;
+    '--sinch-comp-card-v2-color-selected-title-disabled'?: string;
+    '--sinch-comp-card-v2-color-selected-icon-initial'?: string;
+    '--sinch-comp-card-v2-color-selected-icon-disabled'?: string;
+    '--sinch-comp-card-v2-size-icon'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchCardTitle = {
+    props: TSinchCardTitleProps;
+    style: TSinchCardTitleStyle;
+};
+export type TSinchCardTitleElement = NectaryComponentVanillaByType<TSinchCardTitle>;
+export type TSinchCardTitleReact = NectaryComponentReactByType<TSinchCardTitle>;

package/checkbox/index.d.ts

@@ -1,19 +1,23 @@
 import '../rich-text';
-import type { TSinchCheckboxElement, TSinchCheckboxReact } from './types';
+import type { TSinchCheckbox } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-checkbox': TSinchCheckbox;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-checkbox': TSinchCheckboxElement;
+        'sinch-checkbox': NectaryComponentVanilla<'sinch-checkbox'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-checkbox': TSinchCheckboxReact;
+            'sinch-checkbox': NectaryComponentReact<'sinch-checkbox'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-checkbox': TSinchCheckboxReact;
+            'sinch-checkbox': NectaryComponentReact<'sinch-checkbox'>;
         }
     }
 }

package/checkbox/types.d.ts

@@ -1,33 +1,5 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchCheckboxElement = HTMLElement & {
-    /** Value */
-    checked: boolean;
-    /** Indeterminate */
-    indeterminate: boolean;
-    /** Disabled */
-    disabled: boolean;
-    /** Invalid */
-    invalid: boolean;
-    /** Text */
-    text: string | null;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
-    /** Focus event */
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    /** Blur event */
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Checked */
-    setAttribute(name: 'checked', value: ''): void;
-    /** Indeterminate */
-    setAttribute(name: 'indeterminate', value: ''): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-    /** Invalid */
-    setAttribute(name: 'invalid', value: ''): void;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-};
-export type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchCheckboxProps = {
     /** Checked */
     checked?: boolean;
     /** Indeterminate */
@@ -40,42 +12,50 @@ export type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
     text?: string;
     /** Label that is used for a11y – might be different from `label` */
     'aria-label': string;
+};
+export type TSinchCheckboxEvents = {
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<boolean>) => void;
+    '-change'?: (e: CustomEvent<boolean>) => 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-checkbox-shape-radius'?: string;
-        '--sinch-comp-checkbox-font-label'?: string;
-        '--sinch-comp-checkbox-color-default-background-initial'?: string;
-        '--sinch-comp-checkbox-color-default-background-hover'?: string;
-        '--sinch-comp-checkbox-color-default-background-active'?: string;
-        '--sinch-comp-checkbox-color-default-border-initial'?: string;
-        '--sinch-comp-checkbox-color-default-border-hover'?: string;
-        '--sinch-comp-checkbox-color-default-border-active'?: string;
-        '--sinch-comp-checkbox-color-default-text-initial'?: string;
-        '--sinch-comp-checkbox-color-default-outline-focus'?: string;
-        '--sinch-comp-checkbox-color-invalid-background-initial'?: string;
-        '--sinch-comp-checkbox-color-invalid-background-hover'?: string;
-        '--sinch-comp-checkbox-color-invalid-background-active'?: string;
-        '--sinch-comp-checkbox-color-invalid-border-initial'?: string;
-        '--sinch-comp-checkbox-color-invalid-border-hover'?: string;
-        '--sinch-comp-checkbox-color-invalid-border-active'?: string;
-        '--sinch-comp-checkbox-color-invalid-text-initial'?: string;
-        '--sinch-comp-checkbox-color-checked-background-initial'?: string;
-        '--sinch-comp-checkbox-color-checked-background-hover'?: string;
-        '--sinch-comp-checkbox-color-checked-background-active'?: string;
-        '--sinch-comp-checkbox-color-checked-border-initial'?: string;
-        '--sinch-comp-checkbox-color-checked-border-hover'?: string;
-        '--sinch-comp-checkbox-color-checked-border-active'?: string;
-        '--sinch-comp-checkbox-color-disabled-background-initial'?: string;
-        '--sinch-comp-checkbox-color-disabled-border-initial'?: string;
-        '--sinch-comp-checkbox-color-disabled-text-initial'?: string;
-        '--sinch-comp-checkbox-color-checked-disabled-background-initial'?: string;
-        '--sinch-comp-checkbox-color-checked-disabled-border-initial'?: string;
-        '--sinch-sys-color-surface-primary-default'?: string;
-    };
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchCheckboxStyle = {
+    '--sinch-comp-checkbox-shape-radius'?: string;
+    '--sinch-comp-checkbox-font-label'?: string;
+    '--sinch-comp-checkbox-color-default-background-initial'?: string;
+    '--sinch-comp-checkbox-color-default-background-hover'?: string;
+    '--sinch-comp-checkbox-color-default-background-active'?: string;
+    '--sinch-comp-checkbox-color-default-border-initial'?: string;
+    '--sinch-comp-checkbox-color-default-border-hover'?: string;
+    '--sinch-comp-checkbox-color-default-border-active'?: string;
+    '--sinch-comp-checkbox-color-default-text-initial'?: string;
+    '--sinch-comp-checkbox-color-default-outline-focus'?: string;
+    '--sinch-comp-checkbox-color-invalid-background-initial'?: string;
+    '--sinch-comp-checkbox-color-invalid-background-hover'?: string;
+    '--sinch-comp-checkbox-color-invalid-background-active'?: string;
+    '--sinch-comp-checkbox-color-invalid-border-initial'?: string;
+    '--sinch-comp-checkbox-color-invalid-border-hover'?: string;
+    '--sinch-comp-checkbox-color-invalid-border-active'?: string;
+    '--sinch-comp-checkbox-color-invalid-text-initial'?: string;
+    '--sinch-comp-checkbox-color-checked-background-initial'?: string;
+    '--sinch-comp-checkbox-color-checked-background-hover'?: string;
+    '--sinch-comp-checkbox-color-checked-background-active'?: string;
+    '--sinch-comp-checkbox-color-checked-border-initial'?: string;
+    '--sinch-comp-checkbox-color-checked-border-hover'?: string;
+    '--sinch-comp-checkbox-color-checked-border-active'?: string;
+    '--sinch-comp-checkbox-color-disabled-background-initial'?: string;
+    '--sinch-comp-checkbox-color-disabled-border-initial'?: string;
+    '--sinch-comp-checkbox-color-disabled-text-initial'?: string;
+    '--sinch-comp-checkbox-color-checked-disabled-background-initial'?: string;
+    '--sinch-comp-checkbox-color-checked-disabled-border-initial'?: string;
+    '--sinch-sys-color-surface-primary-default'?: string;
+};
+export type TSinchCheckbox = {
+    props: TSinchCheckboxProps;
+    events: TSinchCheckboxEvents;
+    style: TSinchCheckboxStyle;
 };
+export type TSinchCheckboxElement = NectaryComponentVanillaByType<TSinchCheckbox>;
+export type TSinchCheckboxReact = NectaryComponentReactByType<TSinchCheckbox>;

package/chip/index.d.ts

@@ -1,20 +1,24 @@
 import '../text';
 import '../icon';
-import type { TSinchChipElement, TSinchChipReact } from './types';
+import type { TSinchChip } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-chip': TSinchChip;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-chip': TSinchChipElement;
+        'sinch-chip': NectaryComponentVanilla<'sinch-chip'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-chip': TSinchChipReact;
+            'sinch-chip': NectaryComponentReact<'sinch-chip'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-chip': TSinchChipReact;
+            'sinch-chip': NectaryComponentReact<'sinch-chip'>;
         }
     }
 }

package/chip/types.d.ts

@@ -1,56 +1,42 @@
 import type { TSinchChipColor } from './colors';
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type { TSinchChipColor };
-export type TSinchChipElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Color, gray by default */
-    color: TSinchChipColor | null;
-    /** Small */
-    small: 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 */
-    setAttribute(name: 'text', value: string): void;
-    /** Color, gray by default */
-    setAttribute(name: 'color', value: string): void;
-    /** Small */
-    setAttribute(name: 'small', value: ''): void;
-};
-export type TSinchChipReact = TSinchElementReact<TSinchChipElement> & {
+export type TSinchChipProps = {
     /** Text */
     text: string;
     /** Color, gray by default */
     color?: TSinchChipColor;
     /** Small */
     small?: boolean;
+};
+export type TSinchChipEvents = {
     /** Click event handler */
-    'on-click'?: (e: CustomEvent<void>) => void;
+    '-click'?: (e: CustomEvent<void>) => void;
     /** Focus event handler */
-    'on-focus'?: (e: CustomEvent<void>) => void;
+    '-focus'?: (e: CustomEvent<void>) => void;
     /** Blur event handler */
-    'on-blur'?: (e: CustomEvent<void>) => void;
-    /** Label that is used for a11y` */
-    'aria-label': string;
-} & {
-    style?: {
-        '--sinch-comp-chip-size-container-m'?: string;
-        '--sinch-comp-chip-size-container-s'?: string;
-        '--sinch-comp-chip-size-icon-m'?: string;
-        '--sinch-comp-chip-size-icon-s'?: string;
-        '--sinch-comp-chip-font-size-m-label'?: string;
-        '--sinch-comp-chip-font-size-s-label'?: string;
-        '--sinch-comp-chip-color-neutral-default-background-initial'?: string;
-        '--sinch-comp-chip-color-neutral-default-foreground-initial'?: string;
-        '--sinch-comp-chip-color-outiline-focus'?: string;
-        '--sinch-comp-chip-shape-radius'?: string;
-        '--sinch-global-color-text'?: string;
-        '--sinch-global-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-        '--sinch-comp-text-font'?: string;
-    };
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchChipStyle = {
+    '--sinch-comp-chip-size-container-m'?: string;
+    '--sinch-comp-chip-size-container-s'?: string;
+    '--sinch-comp-chip-size-icon-m'?: string;
+    '--sinch-comp-chip-size-icon-s'?: string;
+    '--sinch-comp-chip-font-size-m-label'?: string;
+    '--sinch-comp-chip-font-size-s-label'?: string;
+    '--sinch-comp-chip-color-neutral-default-background-initial'?: string;
+    '--sinch-comp-chip-color-neutral-default-foreground-initial'?: string;
+    '--sinch-comp-chip-color-outiline-focus'?: string;
+    '--sinch-comp-chip-shape-radius'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-comp-text-font'?: string;
+};
+export type TSinchChip = {
+    props: TSinchChipProps;
+    events: TSinchChipEvents;
+    style: TSinchChipStyle;
 };
+export type TSinchChipElement = NectaryComponentVanillaByType<TSinchChip>;
+export type TSinchChipReact = NectaryComponentReactByType<TSinchChip>;

package/code-tag/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchCodeTagElement, TSinchCodeTagReact } from './types';
+import type { TSinchCodeTag } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-code-tag': TSinchCodeTag;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-code-tag': TSinchCodeTagElement;
+        'sinch-code-tag': NectaryComponentVanilla<'sinch-code-tag'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-code-tag': TSinchCodeTagReact;
+            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-code-tag': TSinchCodeTagReact;
+            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
         }
     }
 }

package/code-tag/types.d.ts

@@ -1,20 +1,19 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchCodeTagElement = HTMLElement & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchCodeTagProps = {
     /** Text content of hyperlink */
     text: string;
-    /** Text content of hyperlink */
-    setAttribute(name: 'text', value: string): void;
 };
-export type TSinchCodeTagReact = TSinchElementReact<TSinchCodeTagElement> & {
-    /** Text content of hyperlink */
-    text: string;
-} & {
-    style?: {
-        '--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-code-tag-font-text'?: string;
-        '--sinch-comp-code-tag-shape-radius'?: string;
-        '--sinch-global-text-white-space'?: string;
-    };
+export type TSinchCodeTagStyle = {
+    '--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-code-tag-font-text'?: string;
+    '--sinch-comp-code-tag-shape-radius'?: string;
+    '--sinch-global-text-white-space'?: string;
+};
+export type TSinchCodeTag = {
+    props: TSinchCodeTagProps;
+    style: TSinchCodeTagStyle;
 };
+export type TSinchCodeTagElement = NectaryComponentVanillaByType<TSinchCodeTag>;
+export type TSinchCodeTagReact = NectaryComponentReactByType<TSinchCodeTag>;

package/color-menu/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchColorMenuElement, TSinchColorMenuReact } from './types';
+import type { TSinchColorMenu } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-color-menu': TSinchColorMenu;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-color-menu': TSinchColorMenuElement;
+        'sinch-color-menu': NectaryComponentVanilla<'sinch-color-menu'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-color-menu': TSinchColorMenuReact;
+            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-color-menu': TSinchColorMenuReact;
+            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
         }
     }
 }

package/color-menu/types.d.ts

@@ -1,24 +1,5 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TSinchColorMenuElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** How many rows to show and scroll the rest */
-    rows: number | null;
-    /** How many cols to show and scroll the rest */
-    cols: number | null;
-    nthItemRect(index: number): TRect | null;
-    /** Change event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Comma-separated color names, all colors by default */
-    setAttribute(name: 'colors', value: string): void;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** How many rows to show and scroll the rest */
-    setAttribute(name: 'rows', value: string): void;
-    /** How many cols to show and scroll the rest */
-    setAttribute(name: 'cols', value: string): void;
-};
-export type TSinchColorMenuReact = TSinchElementReact<TSinchColorMenuElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+export type TSinchColorMenuProps = {
     /** Value */
     value: string;
     /** How many rows to show and scroll the rest */
@@ -27,6 +8,18 @@ export type TSinchColorMenuReact = TSinchElementReact<TSinchColorMenuElement> &
     cols?: number;
     /** Label that is used for a11y */
     'aria-label': string;
+};
+export type TSinchColorMenuMethods = {
+    nthItemRect(index: number): TRect | null;
+};
+export type TSinchColorMenuEvents = {
     /** Change event handler */
-    'on-change'?: (e: CustomEvent<string>) => void;
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchColorMenu = {
+    props: TSinchColorMenuProps;
+    events: TSinchColorMenuEvents;
+    methods: TSinchColorMenuMethods;
 };
+export type TSinchColorMenuElement = NectaryComponentVanillaByType<TSinchColorMenu>;
+export type TSinchColorMenuReact = NectaryComponentReactByType<TSinchColorMenu>;

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

@@ -1,20 +1,24 @@
 import '../color-swatch';
 import '../tooltip';
-import type { TSinchColorMenuOptionElement, TSinchColorMenuOptionReact } from './types';
+import type { TSinchColorMenuOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-color-menu-option': TSinchColorMenuOption;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-color-menu-option': TSinchColorMenuOptionElement;
+        'sinch-color-menu-option': NectaryComponentVanilla<'sinch-color-menu-option'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-color-menu-option': TSinchColorMenuOptionReact;
+            'sinch-color-menu-option': NectaryComponentReact<'sinch-color-menu-option'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-color-menu-option': TSinchColorMenuOptionReact;
+            'sinch-color-menu-option': NectaryComponentReact<'sinch-color-menu-option'>;
         }
     }
 }