@db-ux/react-core-components 4.9.0 → 4.10.0

package/dist/components/switch/switch.js

@@ -1,152 +1,184 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import { cls, delay, getBoolean, getBooleanAsString, getHideProp, hasVoiceOver, stringPropVisible, } from "../../utils";
-import { addCheckedResetEventListener, } from "../../utils/form-components";
-import DBInfotext from "../infotext/infotext";
-import { useId } from "react";
-function DBSwitchFn(props, component) {
-    var _a, _b, _c;
-    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 [_descByIds, set_descByIds] = useState(() => undefined);
-    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, _e, _f;
-        if (!((_b = (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.valid) || props.validation === "invalid") {
-            set_descByIds(_invalidMessageId);
-            set_invalidMessage(props.invalidMessage ||
-                ((_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validationMessage) ||
-                DEFAULT_INVALID_MESSAGE);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback(_invalidMessage || DEFAULT_INVALID_MESSAGE);
-                delay(() => {
-                    set_voiceOverFallback("");
-                }, 1000);
-            }
-            return;
-        }
-        if (hasValidState() && ((_e = (_d = _ref.current) === null || _d === void 0 ? void 0 : _d.validity) === null || _e === void 0 ? void 0 : _e.valid) && props.required) {
-            set_descByIds(_validMessageId);
-            if (hasVoiceOver()) {
-                set_voiceOverFallback((_f = props.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE);
-                delay(() => {
-                    set_voiceOverFallback("");
-                }, 1000);
-            }
-            return;
-        }
-        if (stringPropVisible(props.message, props.showMessage)) {
-            set_descByIds(_messageId);
-            return;
-        }
-        set_descByIds(undefined);
-    }
-    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 handleKeyDown(event) {
-        var _a;
-        // Support ENTER key for toggling the switch (a11y requirement)
-        if (event.key === "Enter") {
-            event.preventDefault();
-            // Toggle the switch by clicking it programmatically
-            if (!props.disabled) {
-                (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.click();
-            }
-        }
-    }
-    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 : `switch-${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}`);
-    }
-    useEffect(() => {
-        resetIds();
-        handleValidation();
-        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(() => {
-        handleValidation();
-    }, [
-        props.validation,
-        props.required,
-        props.message,
-        props.showMessage,
-        props.validMessage,
-        props.invalidMessage,
-        props.checked,
-    ]);
-    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(() => {
-        if (_ref.current) {
-            const defaultChecked = props.defaultChecked;
-            let controller = abortController;
-            if (!controller) {
-                controller = new AbortController();
-                setAbortController(controller);
-            }
-            addCheckedResetEventListener(_ref.current, {
-                checked: props.checked,
-                defaultChecked,
-            }, (event) => {
-                handleChange(event, true);
-            }, controller.signal);
-        }
-    }, [_ref.current]);
-    useEffect(() => {
-        return () => {
-            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
-        };
-    }, []);
-    return (React.createElement("div", Object.assign({ "data-visual-aid": getBooleanAsString(props.visualAid), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-variant": props.variant, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-custom-validity": props.validation }, 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-switch", props.className) }),
-        React.createElement("label", { htmlFor: _id },
-            React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, 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"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-invalid": props.validation === "invalid" ? "true" : undefined, "aria-describedby": _descByIds, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": (_b = props.iconLeading) !== null && _b !== void 0 ? _b : props.icon, "data-aid-icon-trailing": props.iconTrailing, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), onKeyDown: (event) => handleKeyDown(event) })),
-            props.label ? React.createElement(React.Fragment, null, props.label) : null,
-            props.children),
-        stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", semantic: "adaptive", id: _messageId, icon: props.messageIcon }, props.message)) : null,
-        hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_c = props.validMessage) !== null && _c !== void 0 ? _c : DEFAULT_VALID_MESSAGE)) : null,
-        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _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, hasVoiceOver as s, stringPropVisible as c } from "../../utils/index.js";
+import { DEFAULT_INVALID_MESSAGE_ID_SUFFIX as l, DEFAULT_MESSAGE_ID_SUFFIX as u, DEFAULT_VALID_MESSAGE_ID_SUFFIX as d } from "../../shared/constants.js";
+import { addCheckedResetEventListener as f } from "../../utils/form-components.js";
+import p from "../infotext/infotext.js";
+import { forwardRef as m, useEffect as h, useId as g, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/switch/switch.tsx
+function S(m, S) {
+	let C = g(), w = S || _(S), [T, E] = v(() => void 0), [D, O] = v(() => void 0), [k, A] = v(() => void 0), [j, M] = v(() => void 0), [N, P] = v(() => void 0), [F, I] = v(() => void 0), [L, R] = v(() => ""), [z, B] = v(() => void 0);
+	function V() {
+		return !!(m.validMessage ?? m.validation === "valid");
+	}
+	function H() {
+		if (!w.current?.validity?.valid || m.validation === "invalid") {
+			I(j), P(m.invalidMessage || w.current?.validationMessage || "TODO: Add an invalidMessage"), s() && (R(N || "TODO: Add an invalidMessage"), r(() => {
+				R("");
+			}, 1e3));
+			return;
+		}
+		if (V() && w.current?.validity?.valid && m.required) {
+			I(k), s() && (R(m.validMessage ?? "TODO: Add a validMessage"), r(() => {
+				R("");
+			}, 1e3));
+			return;
+		}
+		if (c(m.message, m.showMessage)) {
+			I(D);
+			return;
+		}
+		I(void 0);
+	}
+	function U(e, t) {
+		m.onChange && m.onChange(e), H();
+	}
+	function W(e) {
+		m.onBlur && m.onBlur(e);
+	}
+	function G(e) {
+		m.onFocus && m.onFocus(e);
+	}
+	function K(e) {
+		e.key === "Enter" && (e.preventDefault(), m.disabled || w.current?.click());
+	}
+	function q() {
+		let e = m.id ?? m.propOverrides?.id ?? `switch-${C}`;
+		E(e), O(`${e}${u}`), A(`${e}${d}`), M(`${e}${l}`);
+	}
+	return h(() => {
+		q(), H(), P(m.invalidMessage || "TODO: Add an invalidMessage");
+	}, []), h(() => {
+		(m.id ?? m.propOverrides?.id) && q();
+	}, [m.id, m.propOverrides?.id]), h(() => {
+		H();
+	}, [
+		m.validation,
+		m.required,
+		m.message,
+		m.showMessage,
+		m.validMessage,
+		m.invalidMessage,
+		m.checked
+	]), h(() => {
+		P(m.invalidMessage || w.current?.validationMessage || "TODO: Add an invalidMessage");
+	}, [w.current, m.invalidMessage]), h(() => {
+		if (w.current) {
+			let e = m.defaultChecked, t = z;
+			t || (t = new AbortController(), B(t)), f(w.current, {
+				checked: m.checked,
+				defaultChecked: e
+			}, (e) => {
+				U(e, !0);
+			}, t.signal);
+		}
+	}, [w.current]), h(() => () => {
+		z?.abort();
+	}, []), /* @__PURE__ */ x("div", {
+		"data-visual-aid": a(m.visualAid),
+		"data-size": m.size,
+		"data-hide-label": o(m.showLabel),
+		"data-variant": m.variant,
+		"data-hide-asterisk": o(m.showRequiredAsterisk),
+		"data-custom-validity": m.validation,
+		...t(m, [
+			"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-switch", m.className),
+		children: [
+			/* @__PURE__ */ x("label", {
+				htmlFor: T,
+				children: [
+					/* @__PURE__ */ b("input", {
+						type: "checkbox",
+						role: "switch",
+						id: T,
+						ref: w,
+						...e(m, [
+							"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"
+						]),
+						checked: i(m.checked, "checked"),
+						value: m.value,
+						disabled: i(m.disabled, "disabled"),
+						"aria-invalid": m.validation === "invalid" ? "true" : void 0,
+						"aria-describedby": F,
+						name: m.name,
+						required: i(m.required, "required"),
+						"data-aid-icon": m.iconLeading ?? m.icon,
+						"data-aid-icon-trailing": m.iconTrailing,
+						onChange: (e) => U(e),
+						onBlur: (e) => W(e),
+						onFocus: (e) => G(e),
+						onKeyDown: (e) => K(e)
+					}),
+					m.label ? /* @__PURE__ */ b(y, { children: m.label }) : null,
+					m.children
+				]
+			}),
+			c(m.message, m.showMessage) ? /* @__PURE__ */ b(p, {
+				size: "small",
+				semantic: "adaptive",
+				id: D,
+				icon: m.messageIcon,
+				children: m.message
+			}) : null,
+			V() ? /* @__PURE__ */ b(p, {
+				size: "small",
+				semantic: "successful",
+				id: k,
+				children: m.validMessage ?? "TODO: Add a validMessage"
+			}) : null,
+			/* @__PURE__ */ b(p, {
+				size: "small",
+				semantic: "critical",
+				id: j,
+				children: N
+			}),
+			/* @__PURE__ */ b("span", {
+				"data-visually-hidden": "true",
+				role: "status",
+				children: L
+			})
+		]
+	});
 }
-const DBSwitch = forwardRef(DBSwitchFn);
-export default DBSwitch;
+var C = m(S);
+//#endregion
+export { C as default };

package/dist/components/tab-item/model.d.ts

@@ -1,4 +1,4 @@
-import { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } from '../../shared/model';
+import type { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } from '../../shared/model';
 export type DBTabItemDefaultProps = {
     /**
      * To control the component

package/dist/components/tab-item/tab-item.js

@@ -1,78 +1,107 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBoolean, getBooleanAsString } from "../../utils";
-function DBTabItemFn(props, component) {
-    var _a, _b, _c, _d, _e, _f;
-    const _ref = component || useRef(component);
-    const [_selected, set_selected] = useState(() => false);
-    const [_name, set_name] = useState(() => undefined);
-    const [initialized, setInitialized] = useState(() => false);
-    const [_listenerAdded, set_listenerAdded] = useState(() => false);
-    const [boundSetSelectedOnChange, setBoundSetSelectedOnChange] = useState(() => undefined);
-    function setSelectedOnChange(event) {
-        event.stopPropagation();
-        set_selected(event.target === _ref.current);
-    }
-    function handleNameAttribute() {
-        if (_ref.current) {
-            const setAttribute = _ref.current.setAttribute;
-            _ref.current.setAttribute = (attribute, value) => {
-                setAttribute.call(_ref.current, attribute, value);
-                if (attribute === "name") {
-                    set_name(value);
-                }
-            };
-        }
-    }
-    function handleChange(event) {
-        if (props.onChange) {
-            props.onChange(event);
-        }
-    }
-    useEffect(() => {
-        setBoundSetSelectedOnChange(() => setSelectedOnChange);
-        setInitialized(true);
-    }, []);
-    useEffect(() => {
-        var _a;
-        if (_ref.current && initialized && boundSetSelectedOnChange) {
-            handleNameAttribute();
-            setInitialized(false);
-            // deselect this tab when another tab in tablist is selected
-            if (!_listenerAdded) {
-                (_a = _ref.current
-                    .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.addEventListener("change", boundSetSelectedOnChange);
-                set_listenerAdded(true);
-            }
-            // Initialize selected state from either active prop (set by parent) or checked attribute
-            if (props.active || _ref.current.checked) {
-                set_selected(true);
-                _ref.current.click();
-            }
-        }
-    }, [_ref.current, initialized, boundSetSelectedOnChange]);
-    useEffect(() => {
-        if (props.name) {
-            set_name(props.name);
-        }
-    }, [props.name]);
-    useEffect(() => {
-        return () => {
-            var _a;
-            if (_listenerAdded && _ref.current && boundSetSelectedOnChange) {
-                (_a = _ref.current
-                    .closest("[role=tablist]")) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", boundSetSelectedOnChange);
-                set_listenerAdded(false);
-            }
-        };
-    }, []);
-    return (React.createElement("li", Object.assign({ role: "none" }, 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-tab-item", props.className) }),
-        React.createElement("label", { htmlFor: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-icon-trailing": props.iconTrailing, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-no-text": getBooleanAsString(props.noText) },
-            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, checked: getBoolean(props.checked, "checked"), 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"]), { name: _name, id: (_e = props.id) !== null && _e !== void 0 ? _e : (_f = props.propOverrides) === null || _f === void 0 ? void 0 : _f.id, onInput: (event) => handleChange(event) })),
-            props.label ? React.createElement(React.Fragment, null, props.label) : null,
-            props.children)));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, getBoolean as r, getBooleanAsString as i } from "../../utils/index.js";
+import { forwardRef as a, useEffect as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/tab-item/tab-item.tsx
+function f(a, f) {
+	let p = f || s(f), [m, h] = c(() => !1), [g, _] = c(() => void 0), [v, y] = c(() => !1), [b, x] = c(() => !1), [S, C] = c(() => void 0);
+	function w(e) {
+		e.stopPropagation(), h(e.target === p.current);
+	}
+	function T() {
+		if (p.current) {
+			let e = p.current.setAttribute;
+			p.current.setAttribute = (t, n) => {
+				e.call(p.current, t, n), t === "name" && _(n);
+			};
+		}
+	}
+	function E(e) {
+		a.onChange && a.onChange(e);
+	}
+	return o(() => {
+		C(() => w), y(!0);
+	}, []), o(() => {
+		p.current && v && S && (T(), y(!1), b || (p.current.closest("[role=tablist]")?.addEventListener("change", S), x(!0)), (a.active || p.current.checked) && (h(!0), p.current.click()));
+	}, [
+		p.current,
+		v,
+		S
+	]), o(() => {
+		a.name && _(a.name);
+	}, [a.name]), o(() => () => {
+		b && p.current && S && (p.current.closest("[role=tablist]")?.removeEventListener("change", S), x(!1));
+	}, []), /* @__PURE__ */ u("li", {
+		role: "none",
+		...t(a, [
+			"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-tab-item", a.className),
+		children: /* @__PURE__ */ d("label", {
+			htmlFor: a.id ?? a.propOverrides?.id,
+			"data-icon": a.iconLeading ?? a.icon,
+			"data-icon-trailing": a.iconTrailing,
+			"data-show-icon": i(a.showIconLeading ?? a.showIcon),
+			"data-show-icon-trailing": i(a.showIconTrailing),
+			"data-no-text": i(a.noText),
+			children: [
+				/* @__PURE__ */ u("input", {
+					type: "radio",
+					role: "tab",
+					disabled: r(a.disabled, "disabled"),
+					"aria-selected": m,
+					checked: r(a.checked, "checked"),
+					ref: p,
+					...e(a, [
+						"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"
+					]),
+					name: g,
+					id: a.id ?? a.propOverrides?.id,
+					onInput: (e) => E(e)
+				}),
+				a.label ? /* @__PURE__ */ u(l, { children: a.label }) : null,
+				a.children
+			]
+		})
+	});
 }
-const DBTabItem = forwardRef(DBTabItemFn);
-export default DBTabItem;
+var p = a(f);
+//#endregion
+export { p as default };

package/dist/components/tab-list/model.d.ts

@@ -1,4 +1,4 @@
-import { GlobalProps } from '../../shared/model';
+import type { GlobalProps } from '../../shared/model';
 export type DBTabListDefaultProps = {};
 export type DBTabListProps = DBTabListDefaultProps & GlobalProps;
 export type DBTabListDefaultState = {};

package/dist/components/tab-list/tab-list.js

@@ -1,13 +1,62 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls } from "../../utils";
-function DBTabListFn(props, component) {
-    var _a, _b;
-    const _ref = component || useRef(component);
-    return (React.createElement("div", 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-tab-list", props.className) }),
-        React.createElement("ul", { role: "tablist" }, props.children)));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n } from "../../utils/index.js";
+import { forwardRef as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/tab-list/tab-list.tsx
+function o(r, o) {
+	return /* @__PURE__ */ a("div", {
+		ref: o || i(o),
+		...e(r, [
+			"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: r.id ?? r.propOverrides?.id,
+		...t(r, [
+			"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-tab-list", r.className),
+		children: /* @__PURE__ */ a("ul", {
+			role: "tablist",
+			children: r.children
+		})
+	});
 }
-const DBTabList = forwardRef(DBTabListFn);
-export default DBTabList;
+var s = r(o);
+//#endregion
+export { s as default };

package/dist/components/tab-panel/model.d.ts

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import type { GlobalProps, GlobalState } from '../../shared/model';
 export type DBTabPanelDefaultProps = {
     /**
      * The content if you don't want to use children.