@db-ux/react-core-components 1.0.0-test-13b991d

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

@@ -0,0 +1,18 @@
+import { GapProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, SpacingProps } from '../../shared/model';
+export type DBPopoverDefaultProps = {
+    /**
+     * Use open to disable the default hover/focus behavior to use it on click or other trigger.
+     */
+    open?: boolean;
+    /**
+     * The trigger to open the popover e.g. a button
+     */
+    trigger?: any;
+};
+export type DBPopoverProps = DBPopoverDefaultProps & GlobalProps & SpacingProps & PlacementProps & GapProps & PopoverProps;
+export type DBPopoverDefaultState = {
+    isExpanded?: boolean;
+    getTrigger: () => Element | null;
+    handleLeave: (event: any) => void;
+};
+export type DBPopoverState = DBPopoverDefaultState & GlobalState & PopoverState & InitializedState;

package/dist/components/popover/model.js

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

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBPopover: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "gap" | "spacing" | keyof import("../..").GlobalProps | keyof import("../..").PopoverProps | "placement" | keyof import("./model").DBPopoverDefaultProps> & import("./model").DBPopoverDefaultProps & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").PlacementProps & import("../..").GapProps & import("../..").PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export default DBPopover;

package/dist/components/popover/popover.js

@@ -0,0 +1,74 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString, handleDataOutside, filterPassingProps, getRootProps } from "../../utils";
+function DBPopoverFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    const [isExpanded, setIsExpanded] = useState(() => false);
+    function handleAutoPlacement() {
+        setIsExpanded(true);
+        if (!_ref.current)
+            return;
+        const article = _ref.current.querySelector("article");
+        if (!article)
+            return;
+        handleDataOutside(article);
+    }
+    function handleLeave(event) {
+        const element = event.target;
+        const parent = element.parentNode;
+        if (!parent ||
+            (element.parentNode.querySelector(":focus") !== element &&
+                element.parentNode.querySelector(":focus-within") !== element &&
+                element.parentNode.querySelector(":hover") !== element)) {
+            setIsExpanded(false);
+        }
+    }
+    function getTrigger() {
+        var _a;
+        if (_ref.current) {
+            const children = Array.from(_ref.current.children);
+            if (children.length >= 2) {
+                const firstChild = children[0];
+                if (firstChild.tagName.includes("-")) {
+                    // this is a workaround for custom angular components
+                    return ((_a = firstChild.children) === null || _a === void 0 ? void 0 : _a.length) > 0
+                        ? firstChild.children[0]
+                        : null;
+                }
+                else {
+                    return firstChild;
+                }
+            }
+        }
+        return null;
+    }
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (_ref.current && initialized) {
+            const child = getTrigger();
+            if (child) {
+                child.ariaHasPopup = "true";
+            }
+            setInitialized(false);
+        }
+    }, [_ref.current, initialized]);
+    useEffect(() => {
+        if (_ref.current) {
+            const child = getTrigger();
+            if (child) {
+                child.ariaExpanded = Boolean(isExpanded).toString();
+            }
+        }
+    }, [_ref.current, isExpanded]);
+    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"]), { id: props.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"]), { className: cls("db-popover", props.className), onFocus: (event) => handleAutoPlacement(), onBlur: (event) => handleLeave(event), onMouseEnter: (event) => handleAutoPlacement(), onMouseLeave: (event) => handleLeave(event) }),
+        React.createElement(React.Fragment, null, props.trigger),
+        React.createElement("article", { className: "db-popover-content", "data-spacing": props.spacing, "data-gap": getBooleanAsString(props.gap), "data-animation": getBooleanAsString((_a = props.animation) !== null && _a !== void 0 ? _a : true), "data-open": props.open, "data-delay": props.delay, "data-width": props.width, "data-placement": props.placement }, props.children)));
+}
+const DBPopover = forwardRef(DBPopoverFn);
+DBPopover.defaultProps = {};
+export default DBPopover;

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

@@ -0,0 +1 @@
+export { default as DBRadio } from './radio';

package/dist/components/radio/index.js

@@ -0,0 +1 @@
+export { default as DBRadio } from './radio';

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

@@ -0,0 +1,7 @@
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
+export type DBRadioDefaultProps = {
+    describedbyid?: string;
+};
+export type DBRadioProps = DBRadioDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
+export type DBRadioDefaultState = {};
+export type DBRadioState = DBRadioDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;

package/dist/components/radio/model.js

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

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps> & import("./model").DBRadioDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
+export default DBRadio;

package/dist/components/radio/radio.js

@@ -0,0 +1,54 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getHideProp, uuid, filterPassingProps, getRootProps } from "../../utils";
+function DBRadioFn(props, component) {
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    const [_id, set_id] = useState(() => undefined);
+    function handleChange(event) {
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        if (props.change) {
+            props.change(event);
+        }
+    }
+    function handleBlur(event) {
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+        if (props.blur) {
+            props.blur(event);
+        }
+    }
+    function handleFocus(event) {
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+        if (props.focus) {
+            props.focus(event);
+        }
+    }
+    useEffect(() => {
+        var _a;
+        setInitialized(true);
+        set_id((_a = props.id) !== null && _a !== void 0 ? _a : `radio-${uuid()}`);
+    }, []);
+    useEffect(() => {
+        if (props.checked && initialized && document && _id) {
+            const radioElement = document === null || document === void 0 ? void 0 : document.getElementById(_id);
+            if (radioElement) {
+                if (props.checked != undefined) {
+                    radioElement.checked = true;
+                }
+            }
+        }
+    }, [initialized, props.checked]);
+    return (React.createElement("label", Object.assign({ "data-size": props.size, "data-hide-label": getHideProp(props.showLabel) }, 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"]), { className: cls("db-radio", props.className), htmlFor: _id }),
+        React.createElement("input", Object.assign({ type: "radio", "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"]), { id: _id, name: props.name, checked: props.checked, disabled: props.disabled, "aria-describedby": props.describedbyid, value: props.value, required: props.required, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
+        props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
+}
+const DBRadio = forwardRef(DBRadioFn);
+DBRadio.defaultProps = {};
+export default DBRadio;

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

@@ -0,0 +1 @@
+export { default as DBSection } from './section';

package/dist/components/section/index.js

@@ -0,0 +1 @@
+export { default as DBSection } from './section';

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

@@ -0,0 +1,5 @@
+import { ContainerWidthProps, GlobalProps, GlobalState, SpacingProps } from '../../shared/model';
+export type DBSectionDefaultProps = {};
+export type DBSectionProps = DBSectionDefaultProps & GlobalProps & SpacingProps & ContainerWidthProps;
+export type DBSectionDefaultState = {};
+export type DBSectionState = DBSectionDefaultState & GlobalState;

package/dist/components/section/model.js

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

package/dist/components/section/section.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBSection: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "width" | "spacing" | keyof import("../..").GlobalProps> & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").ContainerWidthProps & React.RefAttributes<HTMLDivElement>>;
+export default DBSection;

package/dist/components/section/section.js

@@ -0,0 +1,16 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { DEFAULT_ID } from "../../shared/constants";
+function DBSectionFn(props, component) {
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
+    useEffect(() => {
+        set_id(props.id || "section-" + uuid());
+    }, []);
+    return (React.createElement("section", 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"]), { id: _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"]), { className: cls("db-section", props.className), "data-spacing": props.spacing || "medium", "data-width": props.width }), props.children));
+}
+const DBSection = forwardRef(DBSectionFn);
+DBSection.defaultProps = {};
+export default DBSection;

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

@@ -0,0 +1 @@
+export { default as DBSelect } from './select';

package/dist/components/select/index.js

@@ -0,0 +1 @@
+export { default as DBSelect } from './select';

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

@@ -0,0 +1,43 @@
+import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
+export type DBSelectDefaultProps = {
+    /**
+     * The description attribute will add a paragraph below the select.
+     */
+    description?: string;
+    /**
+     * If you don't/can't use children/slots you can pass in the options as an array.
+     */
+    options?: DBSelectOptionType[];
+};
+export type DBSelectOptionType = {
+    /**
+     * Identifier for option
+     */
+    id?: string;
+    /**
+     * Disables this option
+     */
+    disabled?: boolean;
+    /**
+     * Selects this option
+     */
+    selected?: boolean;
+    /**
+     * If the value is different from the label you want to show to the user.
+     */
+    label?: string;
+    /**
+     * If you want to use optgroup you can nest options here.
+     */
+    options?: DBSelectOptionType[];
+    /**
+     * The main value you select, will be shown as default label if no label is set.
+     */
+    value: string | string[] | number;
+};
+export type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps;
+export type DBSelectDefaultState = {
+    _placeholderId: string;
+    getOptionLabel: (option: DBSelectOptionType) => string;
+};
+export type DBSelectState = DBSelectDefaultState & GlobalState & ClickEventState<HTMLSelectElement> & ChangeEventState<HTMLSelectElement> & FocusEventState<HTMLSelectElement> & InputEventState<HTMLSelectElement> & FormState & InitializedState;

package/dist/components/select/model.js

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

package/dist/components/select/select.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBSelect: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSelectElement>, "icon" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBSelectDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLSelectElement> | keyof import("../../shared/model").FocusEventProps<HTMLSelectElement> | keyof import("../../shared/model").InputEventProps<HTMLSelectElement>> & import("./model").DBSelectDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLSelectElement> & import("../../shared/model").ChangeEventProps<HTMLSelectElement> & import("../../shared/model").FocusEventProps<HTMLSelectElement> & import("../../shared/model").InputEventProps<HTMLSelectElement> & import("../../shared/model").FormProps & import("../../shared/model").IconProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & React.RefAttributes<HTMLSelectElement>>;
+export default DBSelect;

package/dist/components/select/select.js

@@ -0,0 +1,132 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, filterPassingProps, getRootProps } from "../../utils";
+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";
+import DBInfotext from "../infotext/infotext";
+function DBSelectFn(props, component) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    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 [_placeholderId, set_placeholderId] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_value, set_value] = useState(() => "");
+    const [initialized, setInitialized] = useState(() => false);
+    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    function handleClick(event) {
+        if (props.onClick) {
+            props.onClick(event);
+        }
+    }
+    function handleInput(event) {
+        if (props.onInput) {
+            props.onInput(event);
+        }
+        if (props.input) {
+            props.input(event);
+        }
+    }
+    function handleChange(event) {
+        var _a, _b, _c, _d, _e, _f;
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        if (props.change) {
+            props.change(event);
+        }
+        /* For a11y reasons we need to map the correct message with the select */
+        if (!((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
+            set_descByIds(_invalidMessageId);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback((_d = (_b = props.invalidMessage) !== null && _b !== void 0 ? _b : (_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE);
+                delay(() => set_voiceOverFallback(""), 1000);
+            }
+        }
+        else if (props.validation === "valid" ||
+            (((_e = _ref.current) === null || _e === void 0 ? void 0 : _e.validity.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);
+            }
+        }
+        else if (stringPropVisible(props.message, props.showMessage)) {
+            set_descByIds(_messageId);
+        }
+        else {
+            set_descByIds(_placeholderId);
+        }
+    }
+    function handleBlur(event) {
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+        if (props.blur) {
+            props.blur(event);
+        }
+    }
+    function handleFocus(event) {
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+        if (props.focus) {
+            props.focus(event);
+        }
+    }
+    function getOptionLabel(option) {
+        var _a;
+        return (_a = option.label) !== null && _a !== void 0 ? _a : option.value.toString();
+    }
+    useEffect(() => {
+        var _a;
+        setInitialized(true);
+        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `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(() => {
+        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 {
+                set_descByIds(placeholderId);
+            }
+            setInitialized(false);
+        }
+    }, [_id, initialized]);
+    useEffect(() => {
+        set_value(props.value);
+    }, [props.value]);
+    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"]), { className: cls("db-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon) }),
+        React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
+        React.createElement("select", Object.assign({ "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"]), { required: props.required, disabled: props.disabled, id: _id, name: props.name, value: props.value, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds }),
+            React.createElement("option", { hidden: true }),
+            props.options ? (React.createElement(React.Fragment, { key: uuid() }, (_b = props.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
+                var _a;
+                return (React.createElement(React.Fragment, { key: uuid() },
+                    option.options ? (React.createElement("optgroup", { label: getOptionLabel(option) }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { key: optgroupOption.value.toString(), value: optgroupOption.value, disabled: optgroupOption.disabled }, getOptionLabel(optgroupOption)))))) : null,
+                    !option.options ? (React.createElement("option", { value: option.value, disabled: option.disabled }, getOptionLabel(option))) : null));
+            }))) : null,
+            props.children),
+        React.createElement("span", { id: _placeholderId }, (_c = props.placeholder) !== null && _c !== void 0 ? _c : props.label),
+        stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
+        React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE),
+        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_g = (_e = props.invalidMessage) !== null && _e !== void 0 ? _e : (_f = _ref.current) === null || _f === void 0 ? void 0 : _f.validationMessage) !== null && _g !== void 0 ? _g : DEFAULT_INVALID_MESSAGE),
+        React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
+}
+const DBSelect = forwardRef(DBSelectFn);
+DBSelect.defaultProps = {};
+export default DBSelect;

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

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

package/dist/components/stack/index.js

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

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

@@ -0,0 +1,34 @@
+import { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
+export declare const StackVariantList: readonly ["simple", "divider"];
+export type StackVariantType = (typeof StackVariantList)[number];
+export declare const StackDirectionList: readonly ["row", "column"];
+export type StackDirectionType = (typeof StackDirectionList)[number];
+export declare const StackAlignmentList: readonly ["stretch", "start", "end", "center"];
+export type StackAlignmentType = (typeof StackAlignmentList)[number];
+export declare const StackJustifyContentList: readonly ["space-between", "start", "end", "center"];
+export type StackJustifyContentType = (typeof StackJustifyContentList)[number];
+export type DBStackDefaultProps = {
+    /**
+     * Change variant of stack. To use variant="divider" add a DBDivider after each element
+     */
+    variant?: StackVariantType;
+    /**
+     * Set the direction of the stack. Defaults to "column"
+     */
+    direction?: StackDirectionType;
+    /**
+     * If the stack should wrap if parent is too small otherwise you get an overflow
+     */
+    wrap?: boolean;
+    /**
+     * Represents css align-items
+     */
+    alignment?: StackAlignmentType;
+    /**
+     * Represents css justify-content
+     */
+    justifyContent?: StackJustifyContentType;
+};
+export type DBStackProps = DBStackDefaultProps & GlobalProps & GapSpacingProps;
+export type DBStackDefaultState = {};
+export type DBStackState = DBStackDefaultState & GlobalState;

package/dist/components/stack/model.js

@@ -0,0 +1,4 @@
+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

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

package/dist/components/stack/stack.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { useRef, forwardRef } from "react";
+import { cls, getBooleanAsString, filterPassingProps, getRootProps } from "../../utils";
+function DBStackFn(props, component) {
+    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"]), { id: props.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"]), { 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) }), props.children));
+}
+const DBStack = forwardRef(DBStackFn);
+DBStack.defaultProps = {};
+export default DBStack;

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

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

package/dist/components/switch/index.js

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

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

@@ -0,0 +1,12 @@
+import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconAfterProps, IconProps, InitializedState, SizeProps } from '../../shared/model';
+export type DBSwitchDefaultProps = {
+    /**
+     * Add additional icons to indicate active/inactive state.
+     */
+    visualAid?: boolean;
+};
+export type DBSwitchProps = DBSwitchDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & EmphasisProps & SizeProps & IconProps & IconAfterProps;
+export type DBSwitchDefaultState = {
+    _checked: boolean;
+};
+export type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;

package/dist/components/switch/model.js

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

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "size" | "icon" | "checked" | keyof import("../../shared/model").GlobalProps | "emphasis" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | "iconAfter" | "visualAid"> & import("./model").DBSwitchDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").EmphasisProps & import("../../shared/model").SizeProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & React.RefAttributes<HTMLInputElement>>;
+export default DBSwitch;

package/dist/components/switch/switch.js

@@ -0,0 +1,47 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString, getHideProp, uuid, filterPassingProps, getRootProps } from "../../utils";
+function DBSwitchFn(props, component) {
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => undefined);
+    const [_checked, set_checked] = useState(() => false);
+    const [initialized, setInitialized] = useState(() => false);
+    function handleChange(event) {
+        var _a;
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        if (props.change) {
+            props.change(event);
+        }
+        // We have different ts types in different frameworks, so we need to use any here
+        set_checked((_a = event.target) === null || _a === void 0 ? void 0 : _a["checked"]);
+    }
+    function handleBlur(event) {
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+        if (props.blur) {
+            props.blur(event);
+        }
+    }
+    function handleFocus(event) {
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+        if (props.focus) {
+            props.focus(event);
+        }
+    }
+    useEffect(() => {
+        var _a;
+        set_id((_a = props.id) !== null && _a !== void 0 ? _a : `switch-${uuid()}`);
+    }, []);
+    return (React.createElement("label", Object.assign({ "data-visual-aid": getBooleanAsString(props.visualAid), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-emphasis": props.emphasis, htmlFor: _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"]), { className: cls("db-switch", props.className) }),
+        React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, "aria-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"]), { checked: props.checked, disabled: props.disabled, "aria-describedby": props.describedbyid, "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, name: props.name, required: props.required, "data-aid-icon": props.icon, "data-aid-icon-after": props.iconAfter, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
+        props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
+}
+const DBSwitch = forwardRef(DBSwitchFn);
+DBSwitch.defaultProps = {};
+export default DBSwitch;

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

@@ -0,0 +1 @@
+export { default as DBTabItem } from './tab-item';

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

@@ -0,0 +1 @@
+export { default as DBTabItem } from './tab-item';

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

@@ -0,0 +1,24 @@
+import { ActiveProps, AriaControlsProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconAfterProps, IconProps, InitializedState, ShowIconProps } from '../../shared/model';
+export type DBTabItemDefaultProps = {
+    /**
+     * To control the component
+     */
+    checked?: boolean;
+    /**
+     * The disabled attribute can be set to keep a user from clicking on the tab-item.
+     */
+    disabled?: boolean;
+    /**
+     * The label of the tab-item, if you don't want to use children.
+     */
+    label?: string;
+    /**
+     * Define the text next to the icon specified via the icon Property to get hidden.
+     */
+    noText?: boolean;
+};
+export type DBTabItemProps = GlobalProps & DBTabItemDefaultProps & IconProps & IconAfterProps & ActiveProps & AriaControlsProps & ChangeEventProps<HTMLInputElement> & ShowIconProps;
+export type DBTabItemDefaultState = {
+    _selected: boolean;
+};
+export type DBTabItemState = DBTabItemDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & InitializedState;

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

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

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTabItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "active" | "icon" | "controls" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | "iconAfter" | keyof import("./model").DBTabItemDefaultProps> & import("../../shared/model").GlobalProps & import("./model").DBTabItemDefaultProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & import("../../shared/model").ActiveProps & import("../../shared/model").AriaControlsProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").ShowIconProps & React.RefAttributes<HTMLInputElement>>;
+export default DBTabItem;