@nectary/components 4.12.0 → 4.12.1

package/textarea/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchTextarea } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Textarea extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -37,3 +38,23 @@ export declare class Textarea extends NectaryElement {
     focus(): void;
     blur(): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-textarea': TSinchTextarea;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-textarea': NectaryComponentVanilla<'sinch-textarea'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-textarea': NectaryComponentReact<'sinch-textarea'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-textarea': NectaryComponentReact<'sinch-textarea'>;
+        }
+    }
+}

package/textarea/index.js

@@ -1,14 +1,10 @@
-import { Context } from "../utils/context.js";
-import { getBooleanAttribute, isAttrEqual, updateBooleanAttribute, hasClass, setClass, updateAttribute, isAttrTrue, getAttribute, getIntegerAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getRect } from "../utils/rect.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { setFormValue } from "../utils/form.js";
-import { DEFAULT_SIZE } from "../utils/size.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--sinch-comp-textarea-color-default-background-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  padding-right: 2px;\n  overflow: hidden;\n\n  --sinch-local-shape-radius: var(--sinch-comp-textarea-shape-radius);\n}\n\n#input {\n  all: initial;\n  display: block;\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-initial);\n  resize: none;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  padding: 8px 10px 8px 12px;\n  border: none;\n  box-sizing: border-box;\n}\n\n/* #input::-webkit-resizer {\n\n} */\n\n#input::placeholder {\n  color: var(--sinch-comp-textarea-color-default-text-placeholder);\n  opacity: 1;\n}\n\n#input:disabled {\n  color: var(--sinch-comp-textarea-color-disabled-text-initial);\n  -webkit-text-fill-color: var(--sinch-comp-textarea-color-disabled-text-initial);\n}\n\n#border {\n  position: absolute;\n  border: 1px solid var(--sinch-comp-textarea-color-default-border-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  inset: 0;\n  pointer-events: none;\n}\n\n:host([invalid]) #border {\n  border-color: var(--sinch-comp-textarea-color-invalid-border-initial);\n}\n\n#input:focus + #border {\n  border-color: var(--sinch-comp-textarea-color-default-border-focus);\n  border-width: 2px;\n}\n\n#input:disabled + #border {\n  border-color: var(--sinch-comp-textarea-color-disabled-border-initial);\n}\n\n#bottom {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 4px 4px;\n}\n\n#bottom.empty {\n  display: none;\n}\n\n:host([resizable]) #bottom {\n  padding-right: calc(var(--sinch-comp-textarea-size-resize-handle) + 4px);\n}\n\n#resize-handle {\n  display: none;\n  position: absolute;\n  width: var(--sinch-comp-textarea-size-resize-handle);\n  height: var(--sinch-comp-textarea-size-resize-handle);\n  bottom: 0;\n  right: 0;\n  cursor: ns-resize;\n}\n\n:host([resizable]) #resize-handle {\n  display: block;\n}\n\n#resize-icon {\n  display: block;\n  pointer-events: none;\n  fill: var(--sinch-comp-textarea-color-default-border-initial);\n}\n</style>\n\n<div id="wrapper">\n  <textarea id="input"></textarea>\n  <div id="border"></div>\n  <div id="bottom">\n    <slot name="bottom"></slot>\n    <div id="resize-handle">\n      <svg id="resize-icon" width="16" height="16">\n        <path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/>\n      </svg>\n    </div>\n  </div>\n</div>\n';
-const template = document.createElement("template");
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, hasClass, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+import { setFormValue } from '../utils/form';
+import { DEFAULT_SIZE } from '../utils/size';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:12px 4px 4px}#bottom.empty{display:none}:host([resizable]) #bottom{padding-right:calc(var(--sinch-comp-textarea-size-resize-handle) + 4px)}#resize-handle{display:none;position:absolute;width:var(--sinch-comp-textarea-size-resize-handle);height:var(--sinch-comp-textarea-size-resize-handle);bottom:0;right:0;cursor:ns-resize}:host([resizable]) #resize-handle{display:block}#resize-icon{display:block;pointer-events:none;fill:var(--sinch-comp-textarea-color-default-border-initial)}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot><div id="resize-handle"><svg id="resize-icon" width="16" height="16"><path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/></svg></div></div></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Textarea extends NectaryElement {
+export class Textarea extends NectaryElement {
   #$input;
   #$bottomSlot;
   #$bottomWrapper;
@@ -24,14 +20,16 @@ class Textarea extends NectaryElement {
   static formAssociated = true;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({ delegatesFocus: true });
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#internals = this.attachInternals();
-    this.#$input = shadowRoot.querySelector("#input");
+    this.#$input = shadowRoot.querySelector('#input');
     this.#$bottomSlot = shadowRoot.querySelector('slot[name="bottom"]');
-    this.#$bottomWrapper = shadowRoot.querySelector("#bottom");
-    this.#$resizeHandle = shadowRoot.querySelector("#resize-handle");
-    this.#sizeContext = new Context(this.#$bottomWrapper, "size");
+    this.#$bottomWrapper = shadowRoot.querySelector('#bottom');
+    this.#$resizeHandle = shadowRoot.querySelector('#resize-handle');
+    this.#sizeContext = new Context(this.#$bottomWrapper, 'size');
   }
   connectedCallback() {
     super.connectedCallback();
@@ -39,21 +37,21 @@ class Textarea extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute("role", "textbox");
-    this.#internals.role = "textbox";
-    this.ariaMultiLine = "true";
-    this.#internals.ariaMultiLine = "true";
-    this.#$input.addEventListener("input", this.#onInput, options);
-    this.#$input.addEventListener("compositionstart", this.#onCompositionStart, options);
-    this.#$input.addEventListener("mousedown", this.#onSelectionChange, options);
-    this.#$input.addEventListener("keydown", this.#onSelectionChange, options);
-    this.#$input.addEventListener("focus", this.#onInputFocus, options);
-    this.#$input.addEventListener("blur", this.#onInputBlur, options);
-    this.#$resizeHandle.addEventListener("mousedown", this.#onDragStart, options);
-    this.#$bottomSlot.addEventListener("slotchange", this.#onBottomSlotChange, options);
-    this.addEventListener("-change", this.#onChangeReactHandler, options);
-    this.addEventListener("-focus", this.#onFocusReactHandler, options);
-    this.addEventListener("-blur", this.#onBlurReactHandler, options);
+    this.setAttribute('role', 'textbox');
+    this.#internals.role = 'textbox';
+    this.ariaMultiLine = 'true';
+    this.#internals.ariaMultiLine = 'true';
+    this.#$input.addEventListener('input', this.#onInput, options);
+    this.#$input.addEventListener('compositionstart', this.#onCompositionStart, options);
+    this.#$input.addEventListener('mousedown', this.#onSelectionChange, options);
+    this.#$input.addEventListener('keydown', this.#onSelectionChange, options);
+    this.#$input.addEventListener('focus', this.#onInputFocus, options);
+    this.#$input.addEventListener('blur', this.#onInputBlur, options);
+    this.#$resizeHandle.addEventListener('mousedown', this.#onDragStart, options);
+    this.#$bottomSlot.addEventListener('slotchange', this.#onBottomSlotChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
     this.#sizeContext.listen(this.#controller.signal);
     this.#onBottomSlotChange();
     this.#updateMinRows();
@@ -72,150 +70,149 @@ class Textarea extends NectaryElement {
     setFormValue(this.#internals, this.#$input.value);
   }
   formResetCallback() {
-    this.#$input.value = "";
-    setFormValue(this.#internals, "");
+    this.#$input.value = '';
+    setFormValue(this.#internals, '');
   }
   formStateRestoreCallback(state) {
-    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, "data-form-state-restore") === false) {
+    if (this.#internals.form === null || getBooleanAttribute(this.#internals.form, 'data-form-state-restore') === false) {
       return;
     }
     if (state !== null) {
-      const value = typeof state === "string" ? state : state.get(this.name);
-      this.#$input.value = value?.toString() ?? "";
-      setFormValue(this.#internals, value?.toString() ?? "");
+      const value = typeof state === 'string' ? state : state.get(this.name);
+      this.#$input.value = value?.toString() ?? '';
+      setFormValue(this.#internals, value?.toString() ?? '');
     }
   }
   static get observedAttributes() {
-    return [
-      "value",
-      "placeholder",
-      "invalid",
-      "disabled",
-      "rows",
-      "minrows",
-      "resizable"
-    ];
+    return ['value', 'placeholder', 'invalid', 'disabled', 'rows', 'minrows', 'resizable'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "value": {
-        const nextVal = newVal ?? "";
-        const prevVal = this.#$input.value;
-        if (nextVal !== prevVal) {
-          const prevCursorPos = this.#$input.selectionEnd;
-          const isPrevCursorEnd = prevCursorPos === prevVal.length;
-          const isShrinkingContent = nextVal.length < prevVal.length;
-          this.#$input.value = nextVal;
-          setFormValue(this.#internals, nextVal);
-          if (!this.resizable) {
-            if (isShrinkingContent) {
-              this.#$input.style.removeProperty("height");
+      case 'value':
+        {
+          const nextVal = newVal ?? '';
+          const prevVal = this.#$input.value;
+          if (nextVal !== prevVal) {
+            const prevCursorPos = this.#$input.selectionEnd;
+            const isPrevCursorEnd = prevCursorPos === prevVal.length;
+            const isShrinkingContent = nextVal.length < prevVal.length;
+            this.#$input.value = nextVal;
+            setFormValue(this.#internals, nextVal);
+            if (!this.resizable) {
+              if (isShrinkingContent) {
+                this.#$input.style.removeProperty('height');
+              }
+              const nextContentHeight = this.#$input.scrollHeight;
+              if (isShrinkingContent || nextContentHeight !== this.#prevContentHeight) {
+                this.#prevContentHeight = nextContentHeight;
+                this.#$input.style.setProperty('height', `${this.#prevContentHeight}px`);
+              }
             }
-            const nextContentHeight = this.#$input.scrollHeight;
-            if (isShrinkingContent || nextContentHeight !== this.#prevContentHeight) {
-              this.#prevContentHeight = nextContentHeight;
-              this.#$input.style.setProperty("height", `${this.#prevContentHeight}px`);
+            if (!isPrevCursorEnd) {
+              this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
             }
           }
-          if (!isPrevCursorEnd) {
-            this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
+          break;
+        }
+      case 'placeholder':
+        {
+          this.#$input.placeholder = newVal ?? '';
+          updateAttribute(this, 'aria-placeholder', newVal);
+          this.#internals.ariaPlaceholder = newVal ?? '';
+          break;
+        }
+      case 'invalid':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
           }
+          const isInvalid = isAttrTrue(newVal);
+          this.ariaInvalid = isInvalid.toString();
+          this.#internals.ariaInvalid = isInvalid.toString();
+          updateBooleanAttribute(this, 'invalid', isInvalid);
+          break;
         }
-        break;
-      }
-      case "placeholder": {
-        this.#$input.placeholder = newVal ?? "";
-        updateAttribute(this, "aria-placeholder", newVal);
-        this.#internals.ariaPlaceholder = newVal ?? "";
-        break;
-      }
-      case "invalid": {
-        if (isAttrEqual(oldVal, newVal)) {
+      case 'disabled':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          const isDisabled = isAttrTrue(newVal);
+          this.#$input.disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
-        const isInvalid = isAttrTrue(newVal);
-        this.ariaInvalid = isInvalid.toString();
-        this.#internals.ariaInvalid = isInvalid.toString();
-        updateBooleanAttribute(this, "invalid", isInvalid);
-        break;
-      }
-      case "disabled": {
-        if (isAttrEqual(oldVal, newVal)) {
+      case 'rows':
+        {
+          updateAttribute(this.#$input, 'rows', newVal);
           break;
         }
-        const isDisabled = isAttrTrue(newVal);
-        this.#$input.disabled = isDisabled;
-        updateBooleanAttribute(this, "disabled", isDisabled);
-        break;
-      }
-      case "rows": {
-        updateAttribute(this.#$input, "rows", newVal);
-        break;
-      }
-      case "minrows": {
-        this.#updateMinRows();
-        break;
-      }
-      case "resizable": {
-        if (isAttrEqual(oldVal, newVal)) {
+      case 'minrows':
+        {
+          this.#updateMinRows();
           break;
         }
-        const isNewValTrue = isAttrTrue(newVal);
-        updateBooleanAttribute(this, name, isNewValTrue);
-        if (hasClass(this.#$bottomWrapper, "empty") && isNewValTrue) {
-          setClass(this.#$bottomWrapper, "empty", false);
+      case 'resizable':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          const isNewValTrue = isAttrTrue(newVal);
+          updateBooleanAttribute(this, name, isNewValTrue);
+          if (hasClass(this.#$bottomWrapper, 'empty') && isNewValTrue) {
+            setClass(this.#$bottomWrapper, 'empty', false);
+          }
+          break;
         }
-        break;
-      }
     }
   }
   set name(value) {
-    updateAttribute(this, "name", value);
+    updateAttribute(this, 'name', value);
   }
   get name() {
-    return getAttribute(this, "name", "");
+    return getAttribute(this, 'name', '');
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get value() {
-    return getAttribute(this, "value", "");
+    return getAttribute(this, 'value', '');
   }
   set placeholder(value) {
-    updateAttribute(this, "placeholder", value);
+    updateAttribute(this, 'placeholder', value);
   }
   get placeholder() {
-    return getAttribute(this, "placeholder");
+    return getAttribute(this, 'placeholder');
   }
   set invalid(value) {
-    updateBooleanAttribute(this, "invalid", value);
+    updateBooleanAttribute(this, 'invalid', value);
   }
   get invalid() {
-    return getBooleanAttribute(this, "invalid");
+    return getBooleanAttribute(this, 'invalid');
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, "disabled", isDisabled);
+    updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, "disabled");
+    return getBooleanAttribute(this, 'disabled');
   }
   set resizable(isResizable) {
-    updateBooleanAttribute(this, "resizable", isResizable);
+    updateBooleanAttribute(this, 'resizable', isResizable);
   }
   get resizable() {
-    return getBooleanAttribute(this, "resizable");
+    return getBooleanAttribute(this, 'resizable');
   }
   set rows(value) {
-    updateAttribute(this, "rows", value);
+    updateAttribute(this, 'rows', value);
   }
   get rows() {
-    return getIntegerAttribute(this, "rows", 0);
+    return getIntegerAttribute(this, 'rows', 0);
   }
   set minRows(value) {
-    updateAttribute(this, "minrows", value);
+    updateAttribute(this, 'minrows', value);
   }
   get minRows() {
-    return getIntegerAttribute(this, "minrows", 0);
+    return getIntegerAttribute(this, 'minrows', 0);
   }
   get selectionStart() {
     return this.#$input.selectionStart;
@@ -247,7 +244,7 @@ class Textarea extends NectaryElement {
   #updateMinRows() {
     const minRows = this.minRows;
     if (minRows <= 0) {
-      this.#$input.style.removeProperty("min-height");
+      this.#$input.style.removeProperty('min-height');
       if (this.#intersectionObserver !== null) {
         this.#intersectionObserver.disconnect();
         this.#intersectionObserver = null;
@@ -257,19 +254,22 @@ class Textarea extends NectaryElement {
         this.#calcMinRows();
       }
       if (this.#intersectionObserver === null) {
-        this.#intersectionObserver = new IntersectionObserver(this.#intersectionObserverCallback, { root: null });
+        this.#intersectionObserver = new IntersectionObserver(this.#intersectionObserverCallback, {
+          root: null
+        });
         this.#intersectionObserver.observe(this.#$input);
       }
     }
   }
-  #intersectionObserverCallback = ([entry]) => {
+  #intersectionObserverCallback = _ref => {
+    let [entry] = _ref;
     if (entry != null && entry.isIntersecting) {
       this.#calcMinRows();
     }
   };
   #calcMinRows() {
     this.#$input.rows = this.minRows;
-    this.#$input.style.setProperty("min-height", `${getRect(this.#$input).height}px`);
+    this.#$input.style.setProperty('min-height', `${getRect(this.#$input).height}px`);
     this.#$input.rows = this.rows;
   }
   #onCompositionStart = () => {
@@ -278,7 +278,7 @@ class Textarea extends NectaryElement {
   #onSelectionChange = () => {
     this.#cursorPos = this.#$input.selectionEnd;
   };
-  #onInput = (e) => {
+  #onInput = e => {
     e.stopPropagation();
     const nextValue = this.#$input.value;
     const prevValue = this.value;
@@ -295,63 +295,68 @@ class Textarea extends NectaryElement {
       }
       this.#isPendingDk = false;
       this.#cursorPos = nextCursorPos;
-      this.dispatchEvent(
-        new CustomEvent("-change", {
-          detail: nextValue
-        })
-      );
+      this.dispatchEvent(new CustomEvent('-change', {
+        detail: nextValue
+      }));
     }
   };
-  #onDragStart = (e) => {
+  #onDragStart = e => {
     if (this.#dragStartY !== 0) {
       return;
     }
     this.#dragStartY = e.clientY;
     this.#prevContentHeight = getRect(this.#$input).height;
-    window.addEventListener("mousemove", this.#onDragResize, { signal: this.#controller.signal, capture: true });
-    window.addEventListener("mouseup", this.#onDragEnd, { signal: this.#controller.signal, capture: true });
+    window.addEventListener('mousemove', this.#onDragResize, {
+      signal: this.#controller.signal,
+      capture: true
+    });
+    window.addEventListener('mouseup', this.#onDragEnd, {
+      signal: this.#controller.signal,
+      capture: true
+    });
   };
-  #onDragResize = (e) => {
+  #onDragResize = e => {
     const dy = e.clientY - this.#dragStartY;
     const height = Math.round(Math.max(0, this.#prevContentHeight + dy));
-    this.#$input.style.setProperty("height", `${height}px`);
+    this.#$input.style.setProperty('height', `${height}px`);
   };
   #onDragEnd = () => {
-    window.removeEventListener("mousemove", this.#onDragResize, { capture: true });
-    window.removeEventListener("mouseup", this.#onDragEnd, { capture: true });
+    window.removeEventListener('mousemove', this.#onDragResize, {
+      capture: true
+    });
+    window.removeEventListener('mouseup', this.#onDragEnd, {
+      capture: true
+    });
     this.#dragStartY = 0;
     this.#prevContentHeight = 0;
   };
   #onInputFocus = () => {
-    this.dispatchEvent(new CustomEvent("-focus"));
+    this.dispatchEvent(new CustomEvent('-focus'));
   };
   #onInputBlur = () => {
-    this.dispatchEvent(new CustomEvent("-blur"));
+    this.dispatchEvent(new CustomEvent('-blur'));
   };
   #onBottomSlotChange = () => {
     const isEmpty = this.#$bottomSlot.assignedElements().length === 0;
     if (!this.resizable) {
-      setClass(this.#$bottomWrapper, "empty", isEmpty);
+      setClass(this.#$bottomWrapper, 'empty', isEmpty);
     }
   };
   #onSizeUpdate() {
     if (!this.isDomConnected) {
       return;
     }
-    const size = this.getAttribute("data-size") ?? DEFAULT_SIZE;
+    const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
     this.#sizeContext.dispatch(size);
   }
-  #onChangeReactHandler = (e) => {
-    getReactEventHandler(this, "on-change")?.(e);
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, "on-focus")?.();
+    getReactEventHandler(this, 'on-focus')?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, "on-blur")?.();
+    getReactEventHandler(this, 'on-blur')?.();
   };
 }
-defineCustomElement("sinch-textarea", Textarea);
-export {
-  Textarea
-};
+defineCustomElement('sinch-textarea', Textarea);

package/textarea/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchTextareaProps = {
     /** Identification for uncontrolled form submissions */
     name?: string;
@@ -48,23 +48,3 @@ export type TSinchTextarea = {
 };
 export type TSinchTextareaElement = NectaryComponentVanillaByType<TSinchTextarea>;
 export type TSinchTextareaReact = NectaryComponentReactByType<TSinchTextarea>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-textarea': TSinchTextarea;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-textarea': NectaryComponentVanilla<'sinch-textarea'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-textarea': NectaryComponentReact<'sinch-textarea'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-textarea': NectaryComponentReact<'sinch-textarea'>;
-        }
-    }
-}

package/textarea/types.js

@@ -1 +1 @@
-
+export {};

package/tile-control/index.d.ts

@@ -0,0 +1,39 @@
+import { NectaryElement } from '../utils';
+import type { TSinchTileControl } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export declare class TileControl extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set small(isSmall: boolean);
+    get small(): boolean;
+    set multiple(isMultiple: boolean);
+    get multiple(): boolean;
+    set cols(value: number);
+    get cols(): number;
+}
+declare global {
+    interface NectaryComponentMap {
+        'sinch-tile-control': TSinchTileControl;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tile-control': NectaryComponentVanilla<'sinch-tile-control'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control': NectaryComponentReact<'sinch-tile-control'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-tile-control': NectaryComponentReact<'sinch-tile-control'>;
+        }
+    }
+}