@db-ux/react-core-components 4.9.1 → 4.10.0-esm-f121fc3

package/dist/components/infotext/infotext.js

@@ -1,14 +1,64 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls, getBooleanAsString } from "../../utils";
-function DBInfotextFn(props, component) {
-    var _a, _b, _c;
-    const _ref = component || useRef(component);
-    return (React.createElement("span", Object.assign({ 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: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.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), "data-show-icon-leading": getBooleanAsString((_c = props.showIcon) !== null && _c !== void 0 ? _c : true) }),
-        props.text ? React.createElement(React.Fragment, null, props.text) : null,
-        props.children));
+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),
+		"data-show-icon-leading": r(i.showIcon ?? !0),
+		children: [i.text ? /* @__PURE__ */ s(o, { children: i.text }) : null, i.children]
+	});
 }
-const DBInfotext = forwardRef(DBInfotextFn);
-export default DBInfotext;
+var u = i(l);
+//#endregion
+export { u as default };

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/input/index.d.ts

@@ -1 +1 @@
-export { default as DBInput } from './input';
+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,169 +1,200 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-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";
-import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, getStep, hasVoiceOver, isArrayOfStrings, isIOSSafari, stringPropVisible, } from "../../utils";
-import { addValueResetEventListener, } from "../../utils/form-components";
-import DBInfotext from "../infotext/infotext";
-import { useId } from "react";
-function DBInputFn(props, component) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    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() {
-        var _a;
-        return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
-    }
-    function handleValidation() {
-        var _a, _b, _c, _d;
-        /* For a11y reasons we need to map the correct message with the input */
-        if (!((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
-            set_descByIds(_invalidMessageId);
-            set_invalidMessage(props.invalidMessage ||
-                ((_b = _ref.current) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
-                DEFAULT_INVALID_MESSAGE);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback(_invalidMessage);
-                delay(() => set_voiceOverFallback(""), 1000);
-            }
-        }
-        else if (hasValidState() &&
-            ((_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validity.valid) &&
-            (props.required || props.minLength || props.maxLength || props.pattern)) {
-            set_descByIds(_validMessageId);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback((_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE);
-                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 === null || _list === void 0 ? void 0 : _list.map((val) => ({
-                value: val,
-                label: undefined,
-            }))
-            : _list) || []);
-    }
-    function resetIds() {
-        var _a, _b, _c;
-        const mId = (_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `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(() => {
-        var _a, _b;
-        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
-            resetIds();
-        }
-    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
-    useEffect(() => {
-        var _a;
-        set_invalidMessage(props.invalidMessage ||
-            ((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
-            DEFAULT_INVALID_MESSAGE);
-    }, [_ref.current, props.invalidMessage]);
-    useEffect(() => {
-        var _a;
-        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((_a = props.dataListId) !== null && _a !== void 0 ? _a : _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 === null || abortController === void 0 ? void 0 : abortController.abort();
-        };
-    }, []);
-    return (React.createElement("div", Object.assign({}, 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((_b = props.showIconLeading) !== null && _b !== void 0 ? _b : props.showIcon), "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-icon-trailing": props.iconTrailing, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing) }),
-        React.createElement("label", { htmlFor: _id }, (_d = props.label) !== null && _d !== void 0 ? _d : DEFAULT_LABEL),
-        React.createElement("input", Object.assign({ "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: (_e = props.placeholder) !== null && _e !== void 0 ? _e : 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"), 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": (_f = props.ariaDescribedBy) !== null && _f !== void 0 ? _f : _descByIds, role: ["datetime-local", "date", "time", "week", "month", "color"].includes((_g = props.type) !== null && _g !== void 0 ? _g : "") && isIOSSafari()
-                ? "textbox"
-                : undefined })),
-        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_h = getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
-        props.children,
-        stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: props.messageSize || "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
-        hasValidState() ? (React.createElement(DBInfotext, { semantic: "successful", id: _validMessageId, size: props.validMessageSize || "small" }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
-        React.createElement(DBInfotext, { semantic: "critical", id: _invalidMessageId, size: props.invalidMessageSize || "small" }, _invalidMessage),
-        React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
+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 ?? y.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),
+		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"),
+				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
+			})
+		]
+	});
 }
-const DBInput = forwardRef(DBInputFn);
-export default DBInput;
+var D = y(E);
+//#endregion
+export { D as default };

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,5 +1,21 @@
-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'];
+//#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 };

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/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,14 +1,72 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls, getBooleanAsString } from "../../utils";
-function DBLinkFn(props, component) {
-    var _a, _b, _c, _d;
-    const _ref = component || useRef(component);
-    return (React.createElement("a", Object.assign({ 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: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.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: (_c = props.referrerpolicy) !== null && _c !== void 0 ? _c : props.referrerPolicy, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "data-size": props.size, "data-show-icon-trailing": getBooleanAsString((_d = props.showIcon) !== null && _d !== void 0 ? _d : true), "data-variant": props.variant, "data-content": props.content || "internal", "data-wrap": getBooleanAsString(props.wrap) }),
-        props.text ? React.createElement(React.Fragment, null, props.text) : null,
-        props.children));
+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),
+		tabIndex: i.disabled ? -1 : 0,
+		"data-size": i.size,
+		"data-show-icon-trailing": r(i.showIcon ?? !0),
+		"data-variant": i.variant,
+		"data-content": i.content || "internal",
+		"data-wrap": r(i.wrap),
+		children: [i.text ? /* @__PURE__ */ s(o, { children: i.text }) : null, i.children]
+	});
 }
-const DBLink = forwardRef(DBLinkFn);
-export default DBLink;
+var u = i(l);
+//#endregion
+export { u as default };