@db-ux/react-core-components 4.11.1 → 4.12.1

package/dist/components/infotext/infotext.js

@@ -1,64 +1,11 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, getBooleanAsString as r } from "../../utils/index.js";
-import { forwardRef as i, useRef as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/infotext/infotext.tsx
-function l(i, l) {
-	return /* @__PURE__ */ c("span", {
-		ref: l || a(l),
-		...e(i, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		id: i.id ?? i.propOverrides?.id,
-		...t(i, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		className: n("db-infotext", i.className),
-		"data-icon": i.icon,
-		"data-semantic": i.semantic,
-		"data-size": i.size,
-		"data-wrap": r(i.wrap, "wrap"),
-		"data-show-icon-leading": r(i.showIcon ?? !0, "showIcon"),
-		children: [i.text ? /* @__PURE__ */ s(o, { children: i.text }) : null, i.children]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useRef, forwardRef } from "react";
+import { cls, getBooleanAsString } from "../../utils/index.js";
+function DBInfotextFn(props, component) {
+    const _ref = component || useRef(component);
+    return (_jsxs("span", { ref: _ref, ...filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), id: props.id ?? props.propOverrides?.id, ...getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), className: cls("db-infotext", props.className), "data-icon": props.icon, "data-semantic": props.semantic, "data-size": props.size, "data-wrap": getBooleanAsString(props.wrap, "wrap"), "data-show-icon-leading": getBooleanAsString(props.showIcon ?? true, "showIcon"), children: [props.text ? _jsx(_Fragment, { children: props.text }) : null, props.children] }));
 }
-var u = i(l);
-//#endregion
-export { u as default };
+const DBInfotext = forwardRef(DBInfotextFn);
+export default DBInfotext;

package/dist/components/infotext/model.d.ts

@@ -1,4 +1,4 @@
-import type { GlobalProps, GlobalState, IconProps, SemanticProps, ShowIconProps, SizeProps, TextProps, WrapProps } from '../../shared/model';
+import type { GlobalProps, GlobalState, IconProps, SemanticProps, ShowIconProps, SizeProps, TextProps, WrapProps } from '../../shared/model.js';
 export type DBInfotextDefaultProps = {};
 export type DBInfotextProps = DBInfotextDefaultProps & GlobalProps & SemanticProps & IconProps & SizeProps & ShowIconProps & TextProps & WrapProps;
 export type DBInfotextDefaultState = {};

package/dist/components/infotext/model.js

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

package/dist/components/input/index.d.ts

@@ -1 +1 @@
-export { default as DBInput } from './input';
+export { default as DBInput } from './input.js';

package/dist/components/input/index.js

@@ -0,0 +1 @@
+export { default as DBInput } from './input.js';

package/dist/components/input/input.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "size" | "icon" | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBInputDefaultProps | keyof import("../../shared/model").FormTextProps | keyof import("../../shared/model").InputEventProps<HTMLInputElement>> & import("./model").DBInputDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").InputEventProps<HTMLInputElement> & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").IconProps & import("../../shared/model").IconTrailingProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & import("../../shared/model").IconLeadingProps & import("../../shared/model").ShowIconLeadingProps & import("../../shared/model").ShowIconTrailingProps & import("../../shared/model").FormSizeProps & React.RefAttributes<any>>;
+declare const DBInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "value" | "size" | "icon" | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | keyof import("../../shared/model.js").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model.js").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model.js").CustomFormProps | keyof import("../../shared/model.js").BaseFormProps | keyof import("../../shared/model.js").RequiredProps | "showLabel" | keyof import("../../shared/model.js").FormMessageProps | keyof import("./model.js").DBInputDefaultProps | keyof import("../../shared/model.js").FormTextProps | keyof import("../../shared/model.js").InputEventProps<HTMLInputElement>> & import("./model.js").DBInputDefaultProps & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").FormTextProps & import("../../shared/model.js").InputEventProps<HTMLInputElement> & import("../../shared/model.js").ChangeEventProps<HTMLInputElement> & import("../../shared/model.js").FocusEventProps<HTMLInputElement> & import("../../shared/model.js").CustomFormProps & import("../../shared/model.js").BaseFormProps & import("../../shared/model.js").RequiredProps & import("../../shared/model.js").ShowLabelProps & import("../../shared/model.js").ValueProps & import("../../shared/model.js").IconProps & import("../../shared/model.js").IconTrailingProps & import("../../shared/model.js").FormMessageProps & import("../../shared/model.js").ShowIconProps & import("../../shared/model.js").IconLeadingProps & import("../../shared/model.js").ShowIconLeadingProps & import("../../shared/model.js").ShowIconTrailingProps & import("../../shared/model.js").FormSizeProps & React.RefAttributes<any>>;
 export default DBInput;

package/dist/components/input/input.js

@@ -1,200 +1,156 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, delay as r, getBoolean as i, getBooleanAsString as a, getHideProp as o, getInputValue as s, getNumber as c, getStep as l, hasVoiceOver as u, isArrayOfStrings as d, isIOSSafari as f, stringPropVisible as p } from "../../utils/index.js";
-import { DEFAULT_DATALIST_ID_SUFFIX as ee, DEFAULT_INVALID_MESSAGE_ID_SUFFIX as m, DEFAULT_MESSAGE_ID_SUFFIX as h, DEFAULT_VALID_MESSAGE_ID_SUFFIX as g } from "../../shared/constants.js";
-import { addValueResetEventListener as _ } from "../../utils/form-components.js";
-import v from "../infotext/infotext.js";
-import { forwardRef as y, useEffect as b, useId as x, useRef as S, useState as C } from "react";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-//#region src/components/input/input.tsx
-function E(y, E) {
-	let D = x(), O = E || S(E), [k, A] = C(() => void 0), [j, M] = C(() => void 0), [N, P] = C(() => void 0), [F, I] = C(() => void 0), [L, R] = C(() => void 0), [z, B] = C(() => void 0), [V, H] = C(() => void 0), [te, U] = C(() => ""), [W, G] = C(() => ""), [K, q] = C(() => void 0);
-	function J() {
-		return !!(y.validMessage ?? y.validation === "valid");
-	}
-	function Y() {
-		!O.current?.validity.valid || y.validation === "invalid" ? (H(F), R(y.invalidMessage || O.current?.validationMessage || "TODO: Add an invalidMessage"), u() && (G(L), r(() => G(""), 1e3))) : J() && O.current?.validity.valid && (y.required || y.minLength || y.maxLength || y.pattern) ? (H(N), u() && (G(y.validMessage ?? "TODO: Add a validMessage"), r(() => G(""), 1e3))) : p(y.message, y.showMessage) ? H(j) : H(void 0);
-	}
-	function X(e, t) {
-		y.onInput && y.onInput(e), Y();
-	}
-	function Z(e, t) {
-		y.onChange && y.onChange(e), Y();
-	}
-	function Q(e) {
-		y.onBlur && y.onBlur(e);
-	}
-	function ne(e) {
-		y.onFocus && y.onFocus(e);
-	}
-	function re() {
-		let e = y.dataList;
-		return Array.from((d(e) ? e?.map((e) => ({
-			value: e,
-			label: void 0
-		})) : e) || []);
-	}
-	function $() {
-		let e = y.id ?? y.propOverrides?.id ?? `input-${D}`;
-		A(e), M(e + h), P(e + g), I(e + m), B(e + ee);
-	}
-	return b(() => {
-		$(), R(y.invalidMessage || "TODO: Add an invalidMessage");
-	}, []), b(() => {
-		(y.id ?? y.propOverrides?.id) && $();
-	}, [y.id, y.propOverrides?.id]), b(() => {
-		R(y.invalidMessage || O.current?.validationMessage || "TODO: Add an invalidMessage");
-	}, [O.current, y.invalidMessage]), b(() => {
-		if (k) {
-			let e = k + h;
-			M(e), P(k + g), I(k + m), B(y.dataListId ?? k + "-datalist"), p(y.message, y.showMessage) && H(e), Y();
-		}
-	}, [k]), b(() => {
-		U(y.value);
-	}, [y.value]), b(() => {
-		if (O.current) {
-			let e = y.defaultValue, t = K;
-			t || (t = new AbortController(), q(t)), _(O.current, {
-				value: y.value,
-				defaultValue: e
-			}, (e) => {
-				Z(e, !0), X(e, !0);
-			}, t.signal);
-		}
-	}, [O.current]), b(() => () => {
-		K?.abort();
-	}, []), /* @__PURE__ */ T("div", {
-		...t(y, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		className: n("db-input", y.className),
-		"data-variant": y.variant,
-		"data-hide-label": o(y.showLabel),
-		"data-show-icon": a(y.showIconLeading, "showIconLeading") || a(y.showIcon, "showIcon"),
-		"data-icon": y.iconLeading ?? y.icon,
-		"data-icon-trailing": y.iconTrailing,
-		"data-hide-asterisk": o(y.showRequiredAsterisk),
-		"data-show-icon-trailing": a(y.showIconTrailing, "showIconTrailing"),
-		children: [
-			/* @__PURE__ */ w("label", {
-				htmlFor: k,
-				children: y.label ?? "LABEL SHOULD BE SET"
-			}),
-			/* @__PURE__ */ w("input", {
-				"aria-invalid": y.validation === "invalid",
-				"data-custom-validity": y.validation,
-				"data-field-sizing": y.fieldSizing,
-				ref: O,
-				...e(y, [
-					"data-icon-variant",
-					"data-icon-variant-before",
-					"data-icon-variant-after",
-					"data-icon-weight",
-					"data-icon-weight-before",
-					"data-icon-weight-after",
-					"data-interactive",
-					"data-force-mobile",
-					"data-color",
-					"data-container-color",
-					"data-bg-color",
-					"data-on-bg-color",
-					"data-color-scheme",
-					"data-font-size",
-					"data-headline-size",
-					"data-divider",
-					"data-focus",
-					"data-font",
-					"data-density"
-				]),
-				id: k,
-				name: y.name,
-				type: y.type || "text",
-				multiple: i(y.multiple, "multiple"),
-				accept: y.accept,
-				placeholder: y.placeholder ?? " ",
-				disabled: i(y.disabled, "disabled"),
-				required: i(y.required, "required"),
-				step: l(y.step),
-				value: y.value,
-				maxLength: c(y.maxLength, y.maxlength),
-				minLength: c(y.minLength, y.minlength),
-				max: s(y.max, y.type),
-				min: s(y.min, y.type),
-				readOnly: i(y.readOnly, "readOnly") || i(y.readonly, "readonly") || void 0,
-				form: y.form,
-				pattern: y.pattern,
-				size: y.size,
-				autoComplete: y.autocomplete,
-				autoFocus: i(y.autofocus, "autofocus"),
-				enterKeyHint: y.enterkeyhint,
-				inputMode: y.inputmode,
-				onInput: (e) => X(e),
-				onChange: (e) => Z(e),
-				onBlur: (e) => Q(e),
-				onFocus: (e) => ne(e),
-				list: y.dataList && z,
-				"aria-describedby": y.ariaDescribedBy ?? V,
-				role: [
-					"datetime-local",
-					"date",
-					"time",
-					"week",
-					"month",
-					"color"
-				].includes(y.type ?? "") && f() ? "textbox" : void 0
-			}),
-			y.dataList ? /* @__PURE__ */ w("datalist", {
-				id: z,
-				children: re()?.map((e) => /* @__PURE__ */ w("option", {
-					value: e.value,
-					children: e.label
-				}, z + "-option-" + e.value))
-			}) : null,
-			y.children,
-			p(y.message, y.showMessage) ? /* @__PURE__ */ w(v, {
-				size: y.messageSize || "small",
-				icon: y.messageIcon,
-				id: j,
-				children: y.message
-			}) : null,
-			J() ? /* @__PURE__ */ w(v, {
-				semantic: "successful",
-				id: N,
-				size: y.validMessageSize || "small",
-				children: y.validMessage || "TODO: Add a validMessage"
-			}) : null,
-			/* @__PURE__ */ w(v, {
-				semantic: "critical",
-				id: F,
-				size: y.invalidMessageSize || "small",
-				children: L
-			}),
-			/* @__PURE__ */ w("span", {
-				"data-visually-hidden": "true",
-				role: "status",
-				children: W
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants.js";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, getStep, hasVoiceOver, isArrayOfStrings, isIOSSafari, stringPropVisible, } from "../../utils/index.js";
+import { addValueResetEventListener, } from "../../utils/form-components.js";
+import DBInfotext from "../infotext/infotext.js";
+import { useId } from "react";
+function DBInputFn(props, component) {
+    const uuid = useId();
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => undefined);
+    const [_messageId, set_messageId] = useState(() => undefined);
+    const [_validMessageId, set_validMessageId] = useState(() => undefined);
+    const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
+    const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
+    const [_dataListId, set_dataListId] = useState(() => undefined);
+    const [_descByIds, set_descByIds] = useState(() => undefined);
+    const [_value, set_value] = useState(() => "");
+    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
+    function hasValidState() {
+        return !!(props.validMessage ?? props.validation === "valid");
+    }
+    function handleValidation() {
+        /* For a11y reasons we need to map the correct message with the input */
+        if (!_ref.current?.validity.valid || props.validation === "invalid") {
+            set_descByIds(_invalidMessageId);
+            set_invalidMessage(props.invalidMessage ||
+                _ref.current?.validationMessage ||
+                DEFAULT_INVALID_MESSAGE);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback(_invalidMessage);
+                void delay(() => set_voiceOverFallback(""), 1000);
+            }
+        }
+        else if (hasValidState() &&
+            _ref.current?.validity.valid &&
+            (props.required || props.minLength || props.maxLength || props.pattern)) {
+            set_descByIds(_validMessageId);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback(props.validMessage ?? DEFAULT_VALID_MESSAGE);
+                void delay(() => set_voiceOverFallback(""), 1000);
+            }
+        }
+        else if (stringPropVisible(props.message, props.showMessage)) {
+            set_descByIds(_messageId);
+        }
+        else {
+            set_descByIds(undefined);
+        }
+    }
+    function handleInput(event, reset) {
+        if (props.onInput) {
+            props.onInput(event);
+        }
+        handleValidation();
+    }
+    function handleChange(event, reset) {
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        handleValidation();
+    }
+    function handleBlur(event) {
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+    }
+    function handleFocus(event) {
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+    }
+    function getDataList() {
+        const _list = props.dataList;
+        return Array.from((isArrayOfStrings(_list)
+            ? _list?.map((val) => ({
+                value: val,
+                label: undefined,
+            }))
+            : _list) || []);
+    }
+    function resetIds() {
+        const mId = props.id ?? props.propOverrides?.id ?? `input-${uuid}`;
+        set_id(mId);
+        set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
+        set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+        set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+        set_dataListId(mId + DEFAULT_DATALIST_ID_SUFFIX);
+    }
+    useEffect(() => {
+        resetIds();
+        set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
+    }, []);
+    useEffect(() => {
+        if (props.id ?? props.propOverrides?.id) {
+            resetIds();
+        }
+    }, [props.id, props.propOverrides?.id]);
+    useEffect(() => {
+        set_invalidMessage(props.invalidMessage ||
+            _ref.current?.validationMessage ||
+            DEFAULT_INVALID_MESSAGE);
+    }, [_ref.current, props.invalidMessage]);
+    useEffect(() => {
+        if (_id) {
+            const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
+            set_messageId(messageId);
+            set_validMessageId(_id + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+            set_invalidMessageId(_id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+            set_dataListId(props.dataListId ?? _id + DEFAULT_DATALIST_ID_SUFFIX);
+            if (stringPropVisible(props.message, props.showMessage)) {
+                set_descByIds(messageId);
+            }
+            handleValidation();
+        }
+    }, [_id]);
+    useEffect(() => {
+        set_value(props.value);
+    }, [props.value]);
+    useEffect(() => {
+        // If angular uses ngModel value and _value are null
+        // then the value will be set afterward and the _ref will be refreshed
+        const addResetListener = true;
+        if (_ref.current && addResetListener) {
+            const defaultValue = props.defaultValue;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addValueResetEventListener(_ref.current, {
+                value: props.value,
+                defaultValue,
+            }, (event) => {
+                handleChange(event, true);
+                handleInput(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController?.abort();
+        };
+    }, []);
+    return (_jsxs("div", { ...getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), className: cls("db-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-show-icon": getBooleanAsString(props.showIconLeading, "showIconLeading") ||
+            getBooleanAsString(props.showIcon, "showIcon"), "data-icon": props.iconLeading ?? props.icon, "data-icon-trailing": props.iconTrailing, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing, "showIconTrailing"), children: [_jsx("label", { htmlFor: _id, children: props.label ?? DEFAULT_LABEL }), _jsx("input", { "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, ref: _ref, ...filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), id: _id, name: props.name, type: props.type || "text", multiple: getBoolean(props.multiple, "multiple"), accept: props.accept, placeholder: props.placeholder ?? DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getStep(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||
+                    getBoolean(props.readonly, "readonly") ||
+                    undefined, form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: getBoolean(props.autofocus, "autofocus"), enterKeyHint: props.enterkeyhint, inputMode: props.inputmode, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": props.ariaDescribedBy ?? _descByIds, role: ["datetime-local", "date", "time", "week", "month", "color"].includes(props.type ?? "") && isIOSSafari()
+                    ? "textbox"
+                    : undefined }), props.dataList ? (_jsx("datalist", { id: _dataListId, children: getDataList()?.map((option) => (_jsx("option", { value: option.value, children: option.label }, _dataListId + "-option-" + option.value))) })) : null, props.children, stringPropVisible(props.message, props.showMessage) ? (_jsx(DBInfotext, { size: props.messageSize || "small", icon: props.messageIcon, id: _messageId, children: props.message })) : null, hasValidState() ? (_jsx(DBInfotext, { semantic: "successful", id: _validMessageId, size: props.validMessageSize || "small", children: props.validMessage || DEFAULT_VALID_MESSAGE })) : null, _jsx(DBInfotext, { semantic: "critical", id: _invalidMessageId, size: props.invalidMessageSize || "small", children: _invalidMessage }), _jsx("span", { "data-visually-hidden": "true", role: "status", children: _voiceOverFallback })] }));
 }
-var D = y(E);
-//#endregion
-export { D as default };
+const DBInput = forwardRef(DBInputFn);
+export default DBInput;

package/dist/components/input/model.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeType, ValueLabelType } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeType, ValueLabelType } from '../../shared/model.js';
 export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
 export type InputTypeType = (typeof InputTypeList)[number];
 export type DBInputDefaultProps = {

package/dist/components/input/model.js

@@ -1,21 +1,5 @@
-//#region src/components/input/model.ts
-var e = [
-	"color",
-	"date",
-	"datetime-local",
-	"email",
-	"file",
-	"hidden",
-	"month",
-	"number",
-	"password",
-	"range",
-	"search",
-	"tel",
-	"text",
-	"time",
-	"url",
-	"week"
-];
-//#endregion
-export { e as InputTypeList };
+export const InputTypeList = ['color', 'date', 'datetime-local', 'email', 'file',
+    // TODO: move this to own component
+    'hidden', 'month', 'number', 'password', 'range',
+    // TODO: move this to own component
+    'search', 'tel', 'text', 'time', 'url', 'week'];

package/dist/components/link/index.d.ts

@@ -1 +1 @@
-export { default as DBLink } from './link';
+export { default as DBLink } from './link.js';

package/dist/components/link/index.js

@@ -0,0 +1 @@
+export { default as DBLink } from './link.js';

package/dist/components/link/link.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "role" | keyof import("../..").GlobalProps | "text" | "wrap" | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../..").ClickEventProps<HTMLAnchorElement> | keyof import("../..").LinkProps> & import("./model").DBLinkDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLAnchorElement> & import("../..").LinkProps & import("../..").RoleProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").WrapProps & React.RefAttributes<any>>;
+declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "role" | keyof import("../../index.js").GlobalProps | "text" | "wrap" | "showIcon" | keyof import("./model.js").DBLinkDefaultProps | keyof import("../../index.js").ClickEventProps<HTMLAnchorElement> | keyof import("../../index.js").LinkProps> & import("./model.js").DBLinkDefaultProps & import("../../index.js").GlobalProps & import("../../index.js").ClickEventProps<HTMLAnchorElement> & import("../../index.js").LinkProps & import("../../index.js").RoleProps & import("../../index.js").ShowIconProps & import("../../index.js").TextProps & import("../../index.js").WrapProps & React.RefAttributes<any>>;
 export default DBLink;

package/dist/components/link/link.js

@@ -1,72 +1,11 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, getBooleanAsString as r } from "../../utils/index.js";
-import { forwardRef as i, useRef as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/link/link.tsx
-function l(i, l) {
-	return /* @__PURE__ */ c("a", {
-		ref: l || a(l),
-		...e(i, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		id: i.id ?? i.propOverrides?.id,
-		...t(i, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		className: n("db-link", i.className),
-		href: i.href,
-		target: i.target,
-		rel: i.rel,
-		role: i.role,
-		referrerPolicy: i.referrerpolicy ?? i.referrerPolicy,
-		hrefLang: i.hreflang,
-		"aria-disabled": r(i.disabled, "disabled"),
-		tabIndex: i.disabled ? -1 : 0,
-		"data-size": i.size,
-		"data-show-icon-trailing": r(i.showIcon ?? !0, "showIcon"),
-		"data-variant": i.variant,
-		"data-content": i.content || "internal",
-		"data-wrap": r(i.wrap, "wrap"),
-		children: [i.text ? /* @__PURE__ */ s(o, { children: i.text }) : null, i.children]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useRef, forwardRef } from "react";
+import { cls, getBooleanAsString } from "../../utils/index.js";
+function DBLinkFn(props, component) {
+    const _ref = component || useRef(component);
+    return (_jsxs("a", { ref: _ref, ...filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), id: props.id ?? props.propOverrides?.id, ...getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), className: cls("db-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, referrerPolicy: props.referrerpolicy ?? props.referrerPolicy, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled, "disabled"), tabIndex: props.disabled ? -1 : 0, "data-size": props.size, "data-show-icon-trailing": getBooleanAsString(props.showIcon ?? true, "showIcon"), "data-variant": props.variant, "data-content": props.content || "internal", "data-wrap": getBooleanAsString(props.wrap, "wrap"), children: [props.text ? _jsx(_Fragment, { children: props.text }) : null, props.children] }));
 }
-var u = i(l);
-//#endregion
-export { u as default };
+const DBLink = forwardRef(DBLinkFn);
+export default DBLink;

package/dist/components/link/model.d.ts

@@ -1,4 +1,4 @@
-import type { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, RoleProps, ShowIconProps, TextProps, WrapProps } from '../../shared/model';
+import type { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, RoleProps, ShowIconProps, TextProps, WrapProps } from '../../shared/model.js';
 export declare const LinkVariantList: readonly ["adaptive", "brand", "inline"];
 export type LinkVariantType = (typeof LinkVariantList)[number];
 export declare const LinkSizeList: readonly ["medium", "small"];