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

package/dist/components/select/select.js

@@ -1,190 +1,174 @@
 "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, getOptionKey as s, hasVoiceOver as c, stringPropVisible as l } from "../../utils/index.js";
-import { DEFAULT_INVALID_MESSAGE_ID_SUFFIX as u, DEFAULT_MESSAGE_ID_SUFFIX as d, DEFAULT_PLACEHOLDER_ID_SUFFIX as f, DEFAULT_VALID_MESSAGE_ID_SUFFIX as p } from "../../shared/constants.js";
-import { addValueResetEventListener as m } from "../../utils/form-components.js";
-import h from "../infotext/infotext.js";
-import { forwardRef as g, useEffect as _, useId as ee, useRef as v, useState as y } from "react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-//#region src/components/select/select.tsx
-function C(g, C) {
-	let w = ee(), T = C || v(C), [E, D] = y(() => void 0), [O, k] = y(() => void 0), [A, j] = y(() => void 0), [M, N] = y(() => void 0), [P, F] = y(() => void 0), [I, L] = y(() => ""), [R, z] = y(() => void 0), [te, B] = y(() => ""), [V, H] = y(() => !1), [ne, U] = y(() => ""), [W, G] = y(() => void 0);
-	function K() {
-		return !!(g.validMessage ?? g.validation === "valid");
-	}
-	function q() {
-		!T.current?.validity.valid || g.validation === "invalid" ? (z(M), F(g.invalidMessage || T.current?.validationMessage || "TODO: Add an invalidMessage"), c() && (U(P), r(() => U(""), 1e3))) : K() && T.current?.validity.valid && g.required ? (z(A), c() && (U(g.validMessage ?? "TODO: Add a validMessage"), r(() => U(""), 1e3))) : l(g.message, g.showMessage) ? z(O) : g.placeholder ? z(I) : z(void 0);
-	}
-	function J(e) {
-		g.onClick && g.onClick(e);
-	}
-	function Y(e, t) {
-		g.onInput && g.onInput(e), q();
-	}
-	function X(e, t) {
-		g.onChange && g.onChange(e), q();
-	}
-	function Z(e) {
-		g.onBlur && g.onBlur(e);
-	}
-	function re(e) {
-		g.onFocus && g.onFocus(e);
-	}
-	function Q(e) {
-		return e.label ?? e.value?.toString();
-	}
-	function ie() {
-		return g.variant === "floating" || g.placeholder ? g.showEmptyOption === void 0 ? !g.required : g.showEmptyOption : !1;
-	}
-	function $() {
-		let e = g.id ?? g.propOverrides?.id ?? `select-${w}`;
-		D(e), k(e + d), j(e + p), N(e + u), L(e + f);
-	}
-	return _(() => {
-		H(!0), $(), F(g.invalidMessage || "TODO: Add an invalidMessage");
-	}, []), _(() => {
-		(g.id ?? g.propOverrides?.id) && $();
-	}, [g.id, g.propOverrides?.id]), _(() => {
-		F(g.invalidMessage || T.current?.validationMessage || "TODO: Add an invalidMessage");
-	}, [T.current, g.invalidMessage]), _(() => {
-		if (E && V) {
-			let e = E + d, t = E + f;
-			k(e), j(E + p), N(E + u), L(t), l(g.message, g.showMessage) ? z(e) : g.placeholder ? z(t) : z(void 0), q(), H(!1);
-		}
-	}, [E, V]), _(() => {
-		B(g.value);
-	}, [g.value]), _(() => {
-		if (T.current) {
-			let e = g.defaultValue, t = W;
-			t || (t = new AbortController(), G(t)), m(T.current, {
-				value: g.value,
-				defaultValue: e
-			}, (e) => {
-				X(e, !0), Y(e, !0);
-			}, t.signal);
-		}
-	}, [T.current]), _(() => () => {
-		W?.abort();
-	}, []), /* @__PURE__ */ S("div", {
-		...t(g, [
-			"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-select", g.className),
-		"data-variant": g.variant,
-		"data-hide-label": o(g.showLabel),
-		"data-hide-asterisk": o(g.showRequiredAsterisk),
-		"data-icon": g.icon,
-		"data-show-icon": a(g.showIcon, "showIcon"),
-		children: [
-			/* @__PURE__ */ x("label", {
-				htmlFor: E,
-				children: g.label ?? "LABEL SHOULD BE SET"
-			}),
-			/* @__PURE__ */ S("select", {
-				"aria-invalid": g.validation === "invalid",
-				"data-custom-validity": g.validation,
-				ref: T,
-				...e(g, [
-					"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"
-				]),
-				required: i(g.required, "required"),
-				disabled: i(g.disabled, "disabled"),
-				id: E,
-				name: g.name,
-				size: g.size,
-				value: g.value,
-				autoComplete: g.autocomplete,
-				multiple: g.multiple,
-				onInput: (e) => Y(e),
-				onClick: (e) => J(e),
-				onChange: (e) => X(e),
-				onBlur: (e) => Z(e),
-				onFocus: (e) => re(e),
-				"aria-describedby": g.ariaDescribedBy ?? R,
-				children: [g.variant === "floating" || g.placeholder ? /* @__PURE__ */ x("option", {
-					className: "placeholder",
-					value: "",
-					"data-show-empty-option": a(ie(), "showEmptyOption")
-				}) : null, g.options?.length ? /* @__PURE__ */ x(b, { children: g.options?.map((e) => e.options ? /* @__PURE__ */ x("optgroup", {
-					label: Q(e),
-					children: e.options?.map((e) => /* @__PURE__ */ x("option", {
-						value: e.value,
-						disabled: e.disabled,
-						children: Q(e)
-					}, s(e, "select-optgroup-option-")))
-				}, s(e, "select-optgroup-")) : /* @__PURE__ */ x("option", {
-					value: e.value,
-					disabled: e.disabled,
-					children: Q(e)
-				}, s(e, "select-option-"))) }) : /* @__PURE__ */ x(b, { children: g.children })]
-			}),
-			g.placeholder ? /* @__PURE__ */ x("span", {
-				className: "db-select-placeholder",
-				id: I,
-				children: g.placeholder
-			}) : null,
-			l(g.message, g.showMessage) ? /* @__PURE__ */ x(h, {
-				size: "small",
-				icon: g.messageIcon,
-				id: O,
-				children: g.message
-			}) : null,
-			K() ? /* @__PURE__ */ x(h, {
-				size: "small",
-				semantic: "successful",
-				id: A,
-				children: g.validMessage || "TODO: Add a validMessage"
-			}) : null,
-			/* @__PURE__ */ x(h, {
-				size: "small",
-				semantic: "critical",
-				id: M,
-				children: P
-			}),
-			/* @__PURE__ */ x("span", {
-				"data-visually-hidden": "true",
-				role: "status",
-				children: ne
-			})
-		]
-	});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants.js";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, } from "../../utils/index.js";
+import { addValueResetEventListener, } from "../../utils/form-components.js";
+import DBInfotext from "../infotext/infotext.js";
+import { useId } from "react";
+function DBSelectFn(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 [_placeholderId, set_placeholderId] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
+    const [_value, set_value] = useState(() => "");
+    const [initialized, setInitialized] = useState(() => false);
+    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 select */
+        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) {
+            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 if (props.placeholder) {
+            set_descByIds(_placeholderId);
+        }
+        else {
+            set_descByIds(undefined);
+        }
+    }
+    function handleClick(event) {
+        if (props.onClick) {
+            props.onClick(event);
+        }
+    }
+    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 getOptionLabel(option) {
+        return option.label ?? option.value?.toString();
+    }
+    function shouldShowEmptyOption() {
+        const hasPlaceholderOrFloating = props.variant === "floating" || !!props.placeholder;
+        if (!hasPlaceholderOrFloating) {
+            return false;
+        }
+        if (props.showEmptyOption !== undefined) {
+            return props.showEmptyOption;
+        }
+        // Default: show empty option for non-required selects
+        return !props.required;
+    }
+    function resetIds() {
+        const mId = props.id ?? props.propOverrides?.id ?? `select-${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_placeholderId(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
+    }
+    useEffect(() => {
+        setInitialized(true);
+        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 && initialized) {
+            const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
+            const placeholderId = _id + DEFAULT_PLACEHOLDER_ID_SUFFIX;
+            set_messageId(messageId);
+            set_validMessageId(_id + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+            set_invalidMessageId(_id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+            set_placeholderId(placeholderId);
+            if (stringPropVisible(props.message, props.showMessage)) {
+                set_descByIds(messageId);
+            }
+            else if (props.placeholder) {
+                set_descByIds(placeholderId);
+            }
+            else {
+                set_descByIds(undefined);
+            }
+            handleValidation();
+            setInitialized(false);
+        }
+    }, [_id, initialized]);
+    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-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon, "showIcon"), children: [_jsx("label", { htmlFor: _id, children: props.label ?? DEFAULT_LABEL }), _jsxs("select", { "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), required: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": props.ariaDescribedBy ?? _descByIds, children: [props.variant === "floating" || !!props.placeholder ? (_jsx("option", { className: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(shouldShowEmptyOption(), "showEmptyOption") })) : null, props.options?.length ? (_jsx(_Fragment, { children: props.options?.map((option) => option.options ? (_jsx("optgroup", { label: getOptionLabel(option), children: option.options?.map((optgroupOption) => (_jsx("option", { value: optgroupOption.value, disabled: optgroupOption.disabled, children: getOptionLabel(optgroupOption) }, getOptionKey(optgroupOption, "select-optgroup-option-")))) }, getOptionKey(option, "select-optgroup-"))) : (_jsx("option", { value: option.value, disabled: option.disabled, children: getOptionLabel(option) }, getOptionKey(option, "select-option-")))) })) : (_jsx(_Fragment, { children: props.children }))] }), props.placeholder ? (_jsx("span", { className: "db-select-placeholder", id: _placeholderId, children: props.placeholder })) : null, stringPropVisible(props.message, props.showMessage) ? (_jsx(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId, children: props.message })) : null, hasValidState() ? (_jsx(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId, children: props.validMessage || DEFAULT_VALID_MESSAGE })) : null, _jsx(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId, children: _invalidMessage }), _jsx("span", { "data-visually-hidden": "true", role: "status", children: _voiceOverFallback })] }));
 }
-var w = g(C);
-//#endregion
-export { w as default };
+const DBSelect = forwardRef(DBSelectFn);
+export default DBSelect;

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

@@ -1 +1 @@
-export { default as DBStack } from './stack';
+export { default as DBStack } from './stack.js';

package/dist/components/stack/index.js

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

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

@@ -1,4 +1,4 @@
-import type { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
+import type { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model.js';
 export declare const StackVariantList: readonly ["simple", "divider"];
 export type StackVariantType = (typeof StackVariantList)[number];
 export declare const StackDirectionList: readonly ["row", "column"];

package/dist/components/stack/model.js

@@ -1,14 +1,4 @@
-//#region src/components/stack/model.ts
-var e = ["simple", "divider"], t = ["row", "column"], n = [
-	"stretch",
-	"start",
-	"end",
-	"center"
-], r = [
-	"space-between",
-	"start",
-	"end",
-	"center"
-];
-//#endregion
-export { n as StackAlignmentList, t as StackDirectionList, r as StackJustifyContentList, e as StackVariantList };
+export const StackVariantList = ['simple', 'divider'];
+export const StackDirectionList = ['row', 'column'];
+export const StackAlignmentList = ['stretch', 'start', 'end', 'center'];
+export const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];

package/dist/components/stack/stack.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBStack: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "gap" | keyof import("./model").DBStackDefaultProps> & import("./model").DBStackDefaultProps & import("../..").GlobalProps & import("../..").GapSpacingProps & React.RefAttributes<any>>;
+declare const DBStack: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps | "gap" | keyof import("./model.js").DBStackDefaultProps> & import("./model.js").DBStackDefaultProps & import("../../index.js").GlobalProps & import("../../index.js").GapSpacingProps & React.RefAttributes<any>>;
 export default DBStack;

package/dist/components/stack/stack.js

@@ -1,65 +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 { jsx as o } from "react/jsx-runtime";
-//#region src/components/stack/stack.tsx
-function s(i, s) {
-	return /* @__PURE__ */ o("div", {
-		ref: s || a(s),
-		...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-stack", i.className),
-		"data-gap": i.gap,
-		"data-variant": i.variant,
-		"data-direction": i.direction,
-		"data-alignment": i.alignment,
-		"data-justify-content": i.justifyContent,
-		"data-wrap": r(i.wrap, "wrap"),
-		children: i.children
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useRef, forwardRef } from "react";
+import { cls, getBooleanAsString } from "../../utils/index.js";
+function DBStackFn(props, component) {
+    const _ref = component || useRef(component);
+    return (_jsx("div", { 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-stack", props.className), "data-gap": props.gap, "data-variant": props.variant, "data-direction": props.direction, "data-alignment": props.alignment, "data-justify-content": props.justifyContent, "data-wrap": getBooleanAsString(props.wrap, "wrap"), children: props.children }));
 }
-var c = i(s);
-//#endregion
-export { c as default };
+const DBStack = forwardRef(DBStackFn);
+export default DBStack;

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

@@ -1 +1 @@
-export { default as DBSwitch } from './switch';
+export { default as DBSwitch } from './switch.js';

package/dist/components/switch/index.js

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

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

@@ -1,4 +1,4 @@
-import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GeneralKeyboardEvent, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, LabelVariantHorizontalType, SizeProps } from '../../shared/model';
+import type { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GeneralKeyboardEvent, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, LabelVariantHorizontalType, SizeProps } from '../../shared/model.js';
 export type DBSwitchDefaultProps = {
     /**
      * Add additional icons to indicate active/inactive state.

package/dist/components/switch/model.js

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

package/dist/components/switch/switch.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "size" | "icon" | "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" | "checked" | "placeholder" | "message" | "validMessage" | "invalidMessage" | "messageIcon" | "autocomplete" | "showMessage" | keyof import("./model").DBSwitchDefaultProps> & import("../../shared/model").GlobalProps & 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").FormCheckProps & Omit<import("../../shared/model").FormMessageProps, "variant"> & import("../../shared/model").SizeProps & import("../../shared/model").IconProps & import("../../shared/model").IconTrailingProps & import("../../shared/model").IconLeadingProps & import("./model").DBSwitchDefaultProps & React.RefAttributes<any>>;
+declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "value" | "size" | "icon" | "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" | "checked" | "placeholder" | "message" | "validMessage" | "invalidMessage" | "messageIcon" | "autocomplete" | "showMessage" | keyof import("./model.js").DBSwitchDefaultProps> & import("../../shared/model.js").GlobalProps & 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").FormCheckProps & Omit<import("../../shared/model.js").FormMessageProps, "variant"> & import("../../shared/model.js").SizeProps & import("../../shared/model.js").IconProps & import("../../shared/model.js").IconTrailingProps & import("../../shared/model.js").IconLeadingProps & import("./model.js").DBSwitchDefaultProps & React.RefAttributes<any>>;
 export default DBSwitch;