@nectary/components 0.8.0

package/accordion/index.d.ts

@@ -0,0 +1,21 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchAccordionElement = HTMLElement & {
+    value: string;
+    multiple: boolean;
+};
+export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
+    multiple?: boolean;
+    value: string;
+    onChange: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-accordion': TSinchAccordionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-accordion': TSinchAccordionElement;
+    }
+}

package/accordion/index.js

@@ -0,0 +1,118 @@
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+
+var _$slot, _onSlotChange, _onOptionChange;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { isAccordionItemElement } from '../accordion-item';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCSVSet, getFirstCSValue, updateAttribute, updateBooleanAttribute, updateCSV } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$slot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onSlotChange, {
+      writable: true,
+      value: () => {
+        this.onValueChange(this.value);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onOptionChange, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        if (!isAccordionItemElement(e.target)) {
+          return;
+        }
+
+        const {
+          value,
+          isChecked
+        } = e.detail;
+        const csv = updateCSV(this.multiple ? this.value : value, value, isChecked);
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: csv,
+          bubbles: true
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    shadowRoot.addEventListener('change', _classPrivateFieldGet(this, _onOptionChange));
+
+    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+
+    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+  }
+
+  static get observedAttributes() {
+    return ['value'];
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          this.onValueChange(newVal ?? '');
+          break;
+        }
+    }
+  }
+
+  onValueChange(csv) {
+    if (this.multiple) {
+      const values = getCSVSet(csv);
+
+      for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+        if (isAccordionItemElement($option)) {
+          $option.checked = $option.disabled !== true && values.has($option.value);
+        }
+      }
+    } else {
+      const value = getFirstCSValue(csv);
+
+      for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+        if (isAccordionItemElement($option)) {
+          $option.checked = $option.disabled !== true && $option.value === value;
+        }
+      }
+    }
+  }
+
+}));

package/accordion-item/index.d.ts

@@ -0,0 +1,33 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent } from 'react';
+export declare const isAccordionItemElement: (element: EventTarget | Element | null) => element is TSinchAccordionItemElement;
+declare const statusValues: readonly ["info", "success", "warn", "error"];
+export declare type TSinchAccordionStatusType = typeof statusValues[number];
+export declare type TSinchAccordionItemElement = HTMLElement & {
+    value: string;
+    label: string;
+    disabled: boolean;
+    checked: boolean;
+    status: TSinchAccordionStatusType | null;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    status?: TSinchAccordionStatusType;
+    onFocus?: (e: FocusEvent<TSinchAccordionItemElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchAccordionItemElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-accordion-item': TSinchAccordionItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-accordion-item': TSinchAccordionItemElement;
+    }
+}
+export {};

package/accordion-item/index.js

@@ -0,0 +1,139 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$button, _$labelContent, _onButtonClick;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200)}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#box{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body)}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#box{display:block}</style><div id="wrapper"><button id="button" aria-haspopup="box" aria-expanded="false" aria-labelledby="button"><slot name="icon"></slot><span id="content"></span> <svg id="dropdown-icon" width="12" height="8"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><div id="box"><slot name="content"></slot></div></div>';
+export const isAccordionItemElement = element => {
+  return element instanceof Element && element.tagName === 'SINCH-ACCORDION-ITEM';
+};
+const statusValues = ['info', 'success', 'warn', 'error'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$labelContent = new WeakMap(), _onButtonClick = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$labelContent, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: {
+            value: this.value,
+            isChecked: !this.checked
+          }
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
+
+    _classPrivateFieldSet(this, _$labelContent, shadowRoot.querySelector('#content'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+  }
+
+  static get observedAttributes() {
+    return ['label', 'disabled', 'checked'];
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  get status() {
+    return getLiteralAttribute(this, statusValues, 'status', null);
+  }
+
+  set status(value) {
+    updateLiteralAttribute(this, statusValues, 'status', value);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'label':
+        {
+          _classPrivateFieldGet(this, _$labelContent).textContent = newVal;
+          break;
+        }
+
+      case 'disabled':
+        {
+          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+          break;
+        }
+
+      case 'checked':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$button), 'aria-expanded', isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$button).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+  }
+
+}));

package/alert/index.d.ts

@@ -0,0 +1,26 @@
+import type { TSinchElementReact } from '../types';
+declare const typeValues: readonly ["info", "success", "warn", "error"];
+export declare type TSinchAlertType = typeof typeValues[number];
+export declare type TSinchAlertElement = HTMLElement & {
+    type: TSinchAlertType;
+    text: string;
+    title: string;
+    multiline: boolean;
+};
+export declare type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
+    type: TSinchAlertType;
+    text: string;
+    title?: string;
+    multiline?: boolean;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-alert': TSinchAlertReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-alert': TSinchAlertElement;
+    }
+}
+export {};

package/alert/index.js

@@ -0,0 +1,91 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$text, _$title;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{--sinch-color-alert-info-background:#D5E5F8;--sinch-color-alert-success-background:#D7F1D8;--sinch-color-alert-warn-background:#FFE8D6;--sinch-color-alert-error-background:#FCD7D4;display:block}#wrapper{display:flex;flex-direction:row;column-gap:12px;align-items:center;position:relative;padding:12px 18px;border-radius:4px;font:var(--sinch-font-body);color:var(--sinch-color-stormy-600);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%;min-height:56px}#body-wrapper{display:flex;flex-direction:row;align-items:center;column-gap:12px;flex:1;min-width:0}#title{display:none;font:var(--sinch-font-title-4);margin:0;margin-bottom:4px}#text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;flex:1;min-width:0}:is(#icon-info,#icon-success,#icon-warn,#icon-error){display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-alert-success-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-alert-warn-background)}:host([type=error]) #wrapper{background-color:var(--sinch-color-alert-error-background)}:host([type=info]) #wrapper{background-color:var(--sinch-color-alert-info-background)}:host([type=success]) #icon-success{display:block}:host([type=warn]) #icon-warn{display:block}:host([type=error]) #icon-error{display:block}:host(:is([type=info],:not([type]))) #icon-info{display:block}:host([multiline]:not([multiline=false])) #wrapper{align-items:flex-start;padding:16px 18px}:host([multiline]:not([multiline=false])) #body-wrapper{flex-direction:column;align-items:flex-start}:host([multiline]:not([multiline=false])) #title{display:block}:host([multiline]:not([multiline=false])) :is(#icon-info,#icon-success,#icon-warn,#icon-error){margin-top:2px}:host([multiline]:not([multiline=false])) #text{overflow:unset;text-overflow:unset;white-space:unset}:host([multiline]:not([multiline=false])) ::slotted(sinch-alert-button){margin-top:10px}</style><div id="wrapper"><svg id="icon-info" width="20" height="20" viewBox="0 0 20 20"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8H9V5h2v2Z" fill="#2071CE"/></svg> <svg id="icon-success" width="20" height="20" viewBox="0 0 20 20"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0ZM7.29 14.29 3.7 10.7a.996.996 0 1 1 1.41-1.41L8 12.17l6.88-6.88a.996.996 0 1 1 1.41 1.41L8.7 14.29a.996.996 0 0 1-1.41 0Z" fill="#2E8540"/></svg> <svg id="icon-warn" width="20" height="20" viewBox="0 0 20 20"><path d="M2.47 18h15.06c1.54 0 2.5-1.67 1.73-3L11.73 1.99c-.77-1.33-2.69-1.33-3.46 0L.74 15c-.77 1.33.19 3 1.73 3ZM10 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1Zm1 4H9v-2h2v2Z" fill="#FF8C34"/></svg> <svg id="icon-error" width="20" height="20" viewBox="0 0 18 18"><path d="M12.32 0H5.68c-.26 0-.52.11-.7.29L.29 4.98c-.18.18-.29.44-.29.7v6.63c0 .27.11.52.29.71l4.68 4.68c.19.19.45.3.71.3h6.63c.27 0 .52-.11.71-.29l4.68-4.68a.99.99 0 0 0 .29-.71V5.68c0-.27-.11-.52-.29-.71L13.02.29c-.18-.18-.44-.29-.7-.29ZM9 14.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3ZM9 10c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z" fill="#E31C3D"/></svg><div id="body-wrapper"><p id="title"></p><p id="text"></p><slot name="button"></slot></div><slot name="close"></slot></div>';
+const typeValues = ['info', 'success', 'warn', 'error'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-alert', (_$text = new WeakMap(), _$title = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$title, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+
+    _classPrivateFieldSet(this, _$title, shadowRoot.querySelector('#title'));
+  }
+
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get title() {
+    return getAttribute(this, 'title', '');
+  }
+
+  set title(value) {
+    updateAttribute(this, 'title', value);
+  }
+
+  get multiline() {
+    return getBooleanAttribute(this, 'multiline');
+  }
+
+  set multiline(isMultiline) {
+    updateBooleanAttribute(this, 'multiline', isMultiline);
+  }
+
+  static get observedAttributes() {
+    return ['text', 'title'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'title':
+        {
+          _classPrivateFieldGet(this, _$title).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+}));

package/alert-button/index.d.ts

@@ -0,0 +1,23 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, MouseEvent } from 'react';
+export declare type TSinchAlertButtonElement = HTMLElement & {
+    text: string;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchAlertButtonReact = TSinchElementReact<TSinchAlertButtonElement> & {
+    text: string;
+    onClick?: (e: MouseEvent<TSinchAlertButtonElement>) => void;
+    onFocus?: (e: FocusEvent<TSinchAlertButtonElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchAlertButtonElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-alert-button': TSinchAlertButtonReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-alert-button': TSinchAlertButtonElement;
+    }
+}

package/alert-button/index.js

@@ -0,0 +1,62 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$button;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;padding:9px 16px;border:1px solid var(--sinch-color-stormy-500);border-radius:4px;font:var(--sinch-font-body);font-size:14px;line-height:14px;color:var(--sinch-color-stormy-500);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;height:32px;box-sizing:border-box}</style><button></button>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-alert-button', (_$button = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  static get observedAttributes() {
+    return ['text'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$button).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$button).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+  }
+
+}));

package/alert-close/index.d.ts

@@ -0,0 +1,22 @@
+import '../icon/close';
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, MouseEvent } from 'react';
+export declare type TSinchAlertCloseElement = HTMLElement & {
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchAlertCloseReact = TSinchElementReact<TSinchAlertCloseElement> & {
+    onClick?: (e: MouseEvent<TSinchAlertCloseElement>) => void;
+    onFocus?: (e: FocusEvent<TSinchAlertCloseElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchAlertCloseElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-alert-close': TSinchAlertCloseReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-alert-close': TSinchAlertCloseElement;
+    }
+}

package/alert-close/index.js

@@ -0,0 +1,41 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$button;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import '../icon/close';
+import { defineCustomElement } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;display:block;width:24px;height:24px;box-sizing:border-box;cursor:pointer}sinch-icon-close{display:block;pointer-events:none}</style><button><sinch-icon-close size="24"></sinch-icon-close></button>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-alert-close', (_$button = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$button).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+  }
+
+}));

package/button/index.d.ts

@@ -0,0 +1,32 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, MouseEvent } from 'react';
+declare const buttonTypes: readonly ["primary", "secondary", "cta", "destructive"];
+export declare type TSinchButtonType = typeof buttonTypes[number];
+export declare type TSinchButtonElement = HTMLElement & {
+    type: TSinchButtonType;
+    text: string;
+    disabled: boolean;
+    small: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
+    type: TSinchButtonType;
+    text: string;
+    disabled?: boolean;
+    small?: boolean;
+    onClick: (e: MouseEvent<TSinchButtonElement>) => void;
+    onFocus?: (e: FocusEvent<TSinchButtonElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchButtonElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button': TSinchButtonReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button': TSinchButtonElement;
+    }
+}
+export {};