@nectary/components 4.10.5 → 4.11.1

package/time-picker/index.js

@@ -16,7 +16,7 @@ const HOUR_24_RADIUS = HOUR_12_RADIUS - HOUR_24_DIGIT_SIZE;
 const NEEDLE_HOUR_12_LENGTH = HOUR_12_RADIUS;
 const NEEDLE_HOUR_24_LENGTH = HOUR_24_RADIUS;
 const NEEDLE_MINUTE_LENGTH = MINUTE_RADIUS;
-defineCustomElement('sinch-time-picker', class extends NectaryElement {
+export class TimePicker extends NectaryElement {
   #$pickerHours;
   #$pickerMinutes;
   #$pickerTouch;
@@ -333,4 +333,5 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-});
+}
+defineCustomElement('sinch-time-picker', TimePicker);

package/title/index.d.ts

@@ -1,5 +1,19 @@
-import type { TSinchTitle } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchTitleType, TSinchTitle } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Title extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get text(): string;
+    set text(value: string);
+    set type(value: TSinchTitleType);
+    get type(): TSinchTitleType;
+    set ellipsis(isEllipsis: boolean);
+    get ellipsis(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-title': TSinchTitle;

package/title/index.js

@@ -3,7 +3,7 @@ const templateHTML = '<style>:host{display:block;--sinch-comp-title-font:var(--s
 import { typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-title', class extends NectaryElement {
+export class Title extends NectaryElement {
   #$text;
   constructor() {
     super();
@@ -57,4 +57,5 @@ defineCustomElement('sinch-title', class extends NectaryElement {
   get ellipsis() {
     return getBooleanAttribute(this, 'ellipsis');
   }
-});
+}
+defineCustomElement('sinch-title', Title);

package/toast/index.d.ts

@@ -1,7 +1,22 @@
 import '../icon';
 import '../rich-text';
-import type { TSinchToast } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchToastType, TSinchToast } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Toast extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get type(): TSinchToastType;
+    set type(value: TSinchToastType);
+    get text(): string;
+    set text(value: string);
+    get persistent(): boolean;
+    set persistent(isPersistent: boolean);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-toast': TSinchToast;

package/toast/index.js

@@ -6,7 +6,7 @@ import { typeValues } from './utils';
 const TIMEOUT = 5000;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-toast', class extends NectaryElement {
+export class Toast extends NectaryElement {
   #$text;
   #tid = null;
   constructor() {
@@ -83,4 +83,5 @@ defineCustomElement('sinch-toast', class extends NectaryElement {
   #onTimeoutReactHandler = e => {
     getReactEventHandler(this, 'on-timeout')?.(e);
   };
-});
+}
+defineCustomElement('sinch-toast', Toast);

package/toast-manager/index.d.ts

@@ -1,7 +1,19 @@
 import '../title';
 import '../text';
-import type { TSinchToastManager } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import { NectaryElement } from '../utils';
+import type { TSinchToastManagerOrigin, TSinchToastManager } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class ToastManager extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get origin(): TSinchToastManagerOrigin;
+    set origin(value: TSinchToastManagerOrigin);
+    get containerRect(): TRect;
+    nthActionRect(nth: number): TRect | null;
+    nthCloseRect(nth: number): TRect | null;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-toast-manager': TSinchToastManager;

package/toast-manager/index.js

@@ -8,7 +8,7 @@ const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-toast-manager', class extends NectaryElement {
+export class ToastManager extends NectaryElement {
   #$slot;
   #$list;
   #map = (() => new WeakMap())();
@@ -167,4 +167,5 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
       this.#map.get(item)?.querySelector('[slot=action]')?.dispatchEvent(new CustomEvent('-click'));
     }
   };
-});
+}
+defineCustomElement('sinch-toast-manager', ToastManager);

package/toggle/index.d.ts

@@ -1,5 +1,25 @@
+import { NectaryElement } from '../utils';
 import type { TSinchToggle } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class Toggle extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set checked(isChecked: boolean);
+    get checked(): boolean;
+    set small(isSmall: boolean);
+    get small(): boolean;
+    set labeled(isLabeled: boolean);
+    get labeled(): boolean;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set text(value: string | null);
+    get text(): string | null;
+    get focusable(): boolean;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-toggle': TSinchToggle;

package/toggle/index.js

@@ -2,7 +2,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHa
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:8px;width:100%;height:var(--sinch-local-size);cursor:pointer;user-select:none;--sinch-local-size:20px}:host([small]) #wrapper{--sinch-local-size:16px}:host([disabled]) #wrapper{cursor:initial}#knob-container{position:relative;width:40px;height:var(--sinch-local-size);border-radius:calc(var(--sinch-local-size) * .5);background-color:var(--sinch-comp-toggle-color-default-background-initial);pointer-events:none;transition:background-color .15s ease-in-out}:host([small]) #knob-container{width:32px;height:var(--sinch-local-size)}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .15s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;position:absolute;top:0;padding:0 1px;opacity:0;transition:opacity .15s ease-in-out;user-select:none}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small]):not([checked])) #knob::after{opacity:1}:host([labeled]:not([small])[checked]) #knob::before{opacity:1}@media (prefers-reduced-motion){#knob,#knob-container,#knob::after,#knob::before{transition:none}}#outline{display:none;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:17px;pointer-events:none}:host(:focus-visible) #outline{display:block}#label{flex:1;min-width:0;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial)}</style><div id="wrapper"><div id="knob-container"><div id="outline"></div><div id="knob"></div></div><span id="label"></span></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-toggle', class extends NectaryElement {
+export class Toggle extends NectaryElement {
   #$label;
   #controller = null;
   constructor() {
@@ -138,4 +138,5 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
   #onBlurReactHandler = e => {
     getReactEventHandler(this, 'on-blur')?.(e);
   };
-});
+}
+defineCustomElement('sinch-toggle', Toggle);

package/tooltip/index.d.ts

@@ -1,7 +1,26 @@
 import '../text';
 import '../pop';
-import type { TSinchTooltip } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import { NectaryElement } from '../utils';
+import type { TSinchTooltipOrientation, TSinchTooltipTextAlign, TSinchTooltipType, TSinchTooltip } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class Tooltip extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
+    get text(): string;
+    set text(value: string);
+    get orientation(): TSinchTooltipOrientation;
+    set orientation(value: TSinchTooltipOrientation);
+    get 'text-align'(): TSinchTooltipTextAlign;
+    set 'text-align'(value: TSinchTooltipTextAlign);
+    get type(): TSinchTooltipType;
+    set type(value: TSinchTooltipType);
+    get footprintRect(): TRect;
+    get tooltipRect(): TRect;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-tooltip': TSinchTooltip;

package/tooltip/index.js

@@ -11,7 +11,7 @@ const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tooltip', class extends NectaryElement {
+export class Tooltip extends NectaryElement {
   #$pop;
   #$tooltipText;
   #$content;
@@ -272,4 +272,5 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   #onHideReactHandler = () => {
     getReactEventHandler(this, 'on-hide')?.();
   };
-});
+}
+defineCustomElement('sinch-tooltip', Tooltip);

package/types.d.ts

@@ -1,5 +1,5 @@
-import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react'
-import type { ReactifyEvents, ReactifyElement, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters'
+import type { HTMLAttributes, CSSProperties } from 'react'
+import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters'
 
 export type TRect = {
   x: number,
@@ -8,21 +8,24 @@ export type TRect = {
   height: number,
 }
 
-export type NectaryComponentVanillaByType<T extends object> =
+export type NectaryComponentVanillaByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> =
   Omit<HTMLElement, 'addEventListener' | 'removeEventListener'> &
   ExtendEventListeners<Required<SafeSelect<T, 'events'>>> &
   SetAttributes<Required<RemoveReadonly<SafeSelect<T, 'props'>>>> &
   Required<CamelCaseify<SafeSelect<T, 'props'>>> &
   Required<SafeSelect<T, 'methods'>>
 
-export type NectaryComponentReactByType<T extends object> =
-  ReactifyElement<HTMLElement> &
+export type NectaryComponentReactByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> =
+  WebComponentReactBaseProp<NectaryComponentVanillaByType<T>> &
   ReactifyEvents<SafeSelect<T, 'events'>> &
   RemoveReadonly<SafeSelect<T, 'props'>> &
-  { style?: SafeSelect<T, 'style'> }
+  {
+    style?: Partial<SafeSelect<T, 'style'>> & CSSProperties;
+  }
+
 
 export type NectaryComponentVanilla<K extends keyof NectaryComponentMap> =
   NectaryComponentVanillaByType<NectaryComponentMap[K]>
 
 export type NectaryComponentReact<K extends keyof NectaryComponentMap> =
-  NectaryComponentReactByType<NectaryComponentMap[K]>
+  NectaryComponentReactByType<NectaryComponentMap[K]>

package/utils/adapters.d.ts

@@ -1,4 +1,4 @@
-import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 export type SafeSelect<T extends object, K extends string | number | symbol> = K extends keyof T ? T[K] extends object ? T[K] : {} : {};
 type CamelCaseString<S extends string> = S extends `${infer P1}-${infer P2}${infer P3}` ? `${Lowercase<P1>}${Uppercase<P2>}${CamelCaseString<P3>}` : S;
 export type CamelCaseify<T> = T extends object ? {
@@ -21,10 +21,10 @@ export type ExtendEventListeners<Events> = {
 export type SetAttributes<Props> = {
     setAttribute<K extends keyof Props>(attr: K, value: Props[K] extends boolean ? '' : Props[K]): void;
 };
-export type ReactifyElement<TElement> = Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> & ClassAttributes<TElement> & Pick<DOMAttributes<TElement>, 'onClick' | 'onDoubleClick' | 'onMouseDown' | 'onMouseUp' | 'onMouseMove' | 'onMouseOver' | 'onMouseOut' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress'> & {
-    class?: string;
-};
 export type ReactifyEvents<T> = {
     [K in keyof T as K extends string ? `on${K}` : never]: T[K];
 };
+export type WebComponentReactBaseProp<T = HTMLElement> = Omit<DetailedHTMLProps<HTMLAttributes<T>, T>, 'className' | 'style'> & {
+    class?: string;
+};
 export {};

package/vertical-stepper/index.d.ts

@@ -1,5 +1,16 @@
+import { NectaryElement } from '../utils';
 import type { TSinchVerticalStepper } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class VerticalStepper extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string): void;
+    set index(value: string);
+    get index(): string;
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-vertical-stepper': TSinchVerticalStepper;

package/vertical-stepper/index.js

@@ -2,7 +2,7 @@ import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, Ne
 const templateHTML = '<style>:host{display:block;outline:0;--sinch-comp-vertical-stepper-color-background-default:var(--sinch-sys-color-surface-tertiary-default);--sinch-comp-vertical-stepper-color-background-visited-skip:var(--sinch-sys-color-surface-tertiary-default);--sinch-comp-vertical-stepper-color-background-active:var(--sinch-ref-color-neutral-700);--sinch-comp-vertical-stepper-color-background-visited:var(--sinch-ref-color-neutral-350);--sinch-comp-vertical-stepper-color-background-visited-error:var(--sinch-sys-color-feedback-danger-strong);--sinch-comp-vertical-stepper-color-border-default:transparent;--sinch-comp-vertical-stepper-color-border-visited-skip:var(--sinch-ref-color-neutral-700);--sinch-comp-vertical-stepper-color-border-active:transparent;--sinch-comp-vertical-stepper-color-border-visited:var(--sinch-ref-color-neutral-700);--sinch-comp-vertical-stepper-color-border-visited-error:var(--sinch-ref-color-neutral-700);--sinch-comp-vertical-stepper-color-icon-default:var(--sinch-ref-color-neutral-900);--sinch-comp-vertical-stepper-color-icon-visited-skip:var(--sinch-ref-color-neutral-900);--sinch-comp-vertical-stepper-color-icon-active:var(--sinch-sys-color-basic-pure);--sinch-comp-vertical-stepper-color-icon-visited:var(--sinch-ref-color-neutral-900);--sinch-comp-vertical-stepper-color-icon-visited-error:var(--sinch-ref-color-neutral-900);--sinch-comp-vertical-stepper-color-label:var(--sinch-sys-color-text-default);--sinch-comp-vertical-stepper-color-description:var(--sinch-sys-color-text-muted);--sinch-comp-vertical-stepper-color-progress:var(--sinch-ref-color-neutral-350);--sinch-comp-vertical-stepper-color-progress-visited:var(--sinch-ref-color-neutral-700)}#wrapper{position:relative;display:flex;flex-direction:column;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {
+export class VerticalStepper extends NectaryElement {
   #$itemsSlot;
   constructor() {
     super();
@@ -54,4 +54,5 @@ defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {
     this.setAttribute('aria-valuemax', String($items.length));
     this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
   };
-});
+}
+defineCustomElement('sinch-vertical-stepper', VerticalStepper);

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

@@ -1,8 +1,21 @@
 import '../icon';
 import '../title';
 import '../text';
-import type { TSinchVerticalStepperItem } from './types';
+import { NectaryElement } from '../utils';
+import type { TSinchVerticalStepperItem, TSinchVerticalStepperStatusType } from './types';
 import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class VerticalStepperItem extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set label(value: string);
+    get label(): string;
+    set description(value: string);
+    get description(): string;
+    get status(): TSinchVerticalStepperStatusType | null;
+    set status(value: TSinchVerticalStepperStatusType | null);
+}
 declare global {
     interface NectaryComponentMap {
         'sinch-vertical-stepper-item': TSinchVerticalStepperItem;

package/vertical-stepper-item/index.js

@@ -6,7 +6,7 @@ const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement {
+export class VerticalStepperItem extends NectaryElement {
   #$label;
   #$description;
   #$circleText;
@@ -58,4 +58,5 @@ defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement
   set status(value) {
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
-});
+}
+defineCustomElement('sinch-vertical-stepper-item', VerticalStepperItem);