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

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,112 @@
+"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_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
+import DBInfotext from "../infotext/infotext";
+function DBCheckboxFn(props, component) {
+    var _a, _b, _c, _d;
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    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 [_descByIds, set_descByIds] = useState(() => "");
+    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    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 checkbox */
+        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("");
+        }
+    }
+    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);
+        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `checkbox-${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(() => {
+        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);
+            if (stringPropVisible(props.message, props.showMessage)) {
+                set_descByIds(messageId);
+            }
+        }
+    }, [_id]);
+    useEffect(() => {
+        if (initialized && document && _id) {
+            const checkboxElement = document === null || document === void 0 ? void 0 : document.getElementById(_id);
+            if (checkboxElement) {
+                // in angular this must be set via native element
+                if (props.checked != undefined) {
+                    checkboxElement.checked = props.checked;
+                }
+                if (props.indeterminate !== undefined) {
+                    // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
+                    // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
+                    checkboxElement.indeterminate = props.indeterminate;
+                }
+                setInitialized(false);
+            }
+        }
+    }, [initialized, props.indeterminate, props.checked]);
+    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-checkbox", props.className), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel) }),
+        React.createElement("label", { htmlFor: _id },
+            React.createElement("input", Object.assign({ type: "checkbox", "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, value: props.value, required: props.required, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds })),
+            props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)),
+        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 }, (_a = props.validMessage) !== null && _a !== void 0 ? _a : DEFAULT_VALID_MESSAGE),
+        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_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),
+        React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
+}
+const DBCheckbox = forwardRef(DBCheckboxFn);
+DBCheckbox.defaultProps = {};
+export default DBCheckbox;

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

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

package/dist/components/checkbox/index.js

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

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

@@ -0,0 +1,10 @@
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
+export type DBCheckboxDefaultProps = {
+    /**
+     * Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox
+     */
+    indeterminate?: boolean;
+};
+export type DBCheckboxProps = DBCheckboxDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & FormMessageProps & SizeProps;
+export type DBCheckboxDefaultState = {};
+export type DBCheckboxState = DBCheckboxDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;

package/dist/components/checkbox/model.js

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

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBDivider: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "width" | keyof import("../..").GlobalProps | "emphasis" | keyof import("./model").DBDividerDefaultProps> & import("./model").DBDividerDefaultProps & import("../..").GlobalProps & import("../..").EmphasisProps & import("../..").MarginProps & import("../..").WidthProps & React.RefAttributes<HTMLDivElement>>;
+export default DBDivider;

package/dist/components/divider/divider.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { useRef, forwardRef } from "react";
+import { cls, filterPassingProps, getRootProps } from "../../utils";
+function DBDividerFn(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, "data-margin": props.margin, "data-variant": props.variant, "data-emphasis": props.emphasis, "data-width": props.width }, 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-divider", props.className) })));
+}
+const DBDivider = forwardRef(DBDividerFn);
+DBDivider.defaultProps = {};
+export default DBDivider;

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

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

package/dist/components/divider/index.js

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

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

@@ -0,0 +1,18 @@
+import { EmphasisProps, GlobalProps, GlobalState, MarginProps, WidthProps } from '../../shared/model';
+export declare const DividerMarginList: readonly ["none", "_"];
+export type DividerMarginType = (typeof DividerMarginList)[number];
+export declare const DividerVariantList: readonly ["horizontal", "vertical"];
+export type DividerVariantType = (typeof DividerVariantList)[number];
+export type DBDividerDefaultProps = {
+    /**
+     * Removes the margin of the divider.
+     */
+    margin?: DividerMarginType;
+    /**
+     * Changes the orientation of the divider.
+     */
+    variant?: DividerVariantType;
+};
+export type DBDividerProps = DBDividerDefaultProps & GlobalProps & EmphasisProps & MarginProps & WidthProps;
+export type DBDividerDefaultState = {};
+export type DBDividerState = DBDividerDefaultState & GlobalState;

package/dist/components/divider/model.js

@@ -0,0 +1,2 @@
+export const DividerMarginList = ['none', '_'];
+export const DividerVariantList = ['horizontal', 'vertical'];

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBDrawer: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDialogElement>, "width" | "spacing" | "onClose" | keyof import("../..").GlobalProps | keyof import("../..").InnerCloseButtonProps | keyof import("./model").DBDrawerDefaultProps> & import("./model").DBDrawerDefaultProps & import("../..").GlobalProps & import("../..").CloseEventProps & import("../..").InnerCloseButtonProps & import("../..").WidthProps & import("../..").SpacingProps & React.RefAttributes<HTMLDialogElement>>;
+export default DBDrawer;

package/dist/components/drawer/drawer.js

@@ -0,0 +1,70 @@
+"use client";
+import * as React from "react";
+import { useRef, useEffect, forwardRef } from "react";
+import DBButton from "../button/button";
+import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
+import { cls, delay, filterPassingProps, getRootProps } from "../../utils";
+function DBDrawerFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    const dialogContainerRef = useRef(null);
+    function handleClose(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+        }
+        if (event === "close" ||
+            event.key === "Escape" ||
+            (event.target.nodeName === "DIALOG" &&
+                event.type === "click" &&
+                props.backdrop !== "none")) {
+            if (props.onClose) {
+                props.onClose(event);
+            }
+        }
+    }
+    function handleDialogOpen() {
+        if (_ref.current) {
+            if (props.open && !_ref.current.open) {
+                if (dialogContainerRef.current) {
+                    dialogContainerRef.current.hidden = false;
+                }
+                if (props.backdrop === "none" || props.variant === "inside") {
+                    _ref.current.show();
+                }
+                else {
+                    _ref.current.showModal();
+                }
+            }
+            if (!props.open && _ref.current.open) {
+                if (dialogContainerRef.current) {
+                    dialogContainerRef.current.hidden = true;
+                }
+                delay(() => {
+                    var _a;
+                    if (dialogContainerRef.current) {
+                        dialogContainerRef.current.hidden = false;
+                    }
+                    (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.close();
+                }, 401);
+            }
+        }
+    }
+    useEffect(() => {
+        handleDialogOpen();
+    }, []);
+    useEffect(() => {
+        handleDialogOpen();
+    }, [props.open]);
+    return (React.createElement("dialog", Object.assign({ className: "db-drawer", id: props.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", "onClose"]), { onClick: (event) => {
+            handleClose(event);
+        }, onKeyDown: (event) => handleClose(event), "data-backdrop": props.backdrop, "data-variant": props.variant }),
+        React.createElement("article", Object.assign({ ref: dialogContainerRef }, 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-drawer-container", props.className), "data-spacing": props.spacing, "data-width": props.width, "data-direction": props.direction, "data-rounded": props.rounded }),
+            React.createElement("header", { className: "db-drawer-header" },
+                React.createElement("div", { className: "db-drawer-header-text" },
+                    React.createElement(React.Fragment, null, props.drawerHeader)),
+                React.createElement(DBButton, { className: "button-close-drawer", icon: "cross", variant: "ghost", id: props.closeButtonId, noText: true, onClick: (event) => handleClose("close") }, (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)),
+            React.createElement("div", { className: "db-drawer-content" }, props.children))));
+}
+const DBDrawer = forwardRef(DBDrawerFn);
+DBDrawer.defaultProps = {};
+export default DBDrawer;

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

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

package/dist/components/drawer/index.js

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

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

@@ -0,0 +1,41 @@
+import { CloseEventProps, CloseEventState, GlobalProps, GlobalState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
+export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
+export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
+export declare const DrawerDirectionList: readonly ["left", "right", "up", "down"];
+export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
+export declare const DrawerVariantList: readonly ["modal", "inside"];
+export type DrawerVariantType = (typeof DrawerVariantList)[number];
+export type DBDrawerDefaultProps = {
+    /**
+     * The backdrop attribute changes the opacity of the backdrop.
+     * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`
+     */
+    backdrop?: DrawerBackdropType;
+    /**
+     * The direction attribute changes the position & animation of the drawer.
+     * E.g. "left" slides from left screen border to the right.
+     */
+    direction?: DrawerDirectionType;
+    /**
+     * Slot for changing the header of the drawer.
+     */
+    drawerHeader?: any;
+    /**
+     * The open attribute opens or closes the drawer based on the state.
+     */
+    open?: boolean;
+    /**
+     * The rounded attribute changes the border radius of the corners on the "end" of the drawer.
+     * The "end" depends on which direction you use.
+     */
+    rounded?: boolean;
+    /**
+     * Set the variant modal|inside. Defaults to modal.
+     */
+    variant?: DrawerVariantType;
+};
+export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps & InnerCloseButtonProps & WidthProps & SpacingProps;
+export type DBDrawerDefaultState = {
+    handleDialogOpen: () => void;
+};
+export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState;

package/dist/components/drawer/model.js

@@ -0,0 +1,3 @@
+export const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'];
+export const DrawerDirectionList = ['left', 'right', 'up', 'down'];
+export const DrawerVariantList = ['modal', 'inside'];

package/dist/components/header/header.d.ts

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

package/dist/components/header/header.js

@@ -0,0 +1,68 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { addAttributeToChildren, cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import DBButton from "../button/button";
+import DBDrawer from "../drawer/drawer";
+import { DEFAULT_BURGER_MENU, DEFAULT_ID } from "../../shared/constants";
+import { isEventTargetNavigationItem } from "../../utils/navigation";
+function DBHeaderFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
+    const [initialized, setInitialized] = useState(() => false);
+    const [forcedToMobile, setForcedToMobile] = useState(() => false);
+    function toggle() {
+        if (props.onToggle) {
+            props.onToggle(!props.drawerOpen);
+        }
+    }
+    function handleNavigationItemClick(event) {
+        if (isEventTargetNavigationItem(event)) {
+            toggle();
+        }
+    }
+    useEffect(() => {
+        setInitialized(true);
+        set_id(props.id || "header-" + uuid());
+    }, []);
+    useEffect(() => {
+        if (initialized && document && _id && props.forceMobile) {
+            const headerElement = document.getElementById(_id);
+            if (headerElement) {
+                // Adds this attribute to the header to enable all styling which would have
+                // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+                addAttributeToChildren(headerElement, {
+                    key: "data-force-mobile",
+                    value: "true",
+                });
+            }
+            setForcedToMobile(true);
+        }
+    }, [initialized]);
+    return (React.createElement("header", 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"]), 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-header", props.className), id: _id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
+        React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, open: props.drawerOpen, onClose: () => toggle() },
+            React.createElement("div", { className: "db-header-drawer-navigation" },
+                React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),
+                React.createElement("div", { className: "db-header-meta-navigation" },
+                    React.createElement(React.Fragment, null, props.metaNavigation))),
+            React.createElement("div", { className: "db-header-secondary-action" },
+                React.createElement(React.Fragment, null, props.secondaryAction))),
+        React.createElement("div", { className: "db-header-meta-navigation" },
+            React.createElement(React.Fragment, null, props.metaNavigation)),
+        React.createElement("div", { className: "db-header-navigation-bar" },
+            React.createElement("div", { className: "db-header-brand-container" },
+                React.createElement(React.Fragment, null, props.brand)),
+            React.createElement("div", { className: "db-header-navigation-container" },
+                React.createElement("div", { className: "db-header-navigation" }, props.children),
+                React.createElement("div", { className: "db-header-primary-action" },
+                    React.createElement(React.Fragment, null, props.primaryAction))),
+            React.createElement("div", { className: "db-header-action-container" },
+                React.createElement("div", { className: "db-header-burger-menu-container" },
+                    React.createElement(DBButton, { icon: "menu", variant: "ghost", id: _id + "-burger-menu", noText: true, onClick: () => toggle() }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)),
+                React.createElement("div", { className: "db-header-secondary-action" },
+                    React.createElement(React.Fragment, null, props.secondaryAction))))));
+}
+const DBHeader = forwardRef(DBHeaderFn);
+DBHeader.defaultProps = {};
+export default DBHeader;

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

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

package/dist/components/header/index.js

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

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

@@ -0,0 +1,44 @@
+import { ContainerWidthProps, GlobalProps, GlobalState, InitializedState, NavigationBehaviorState, ToggleEventProps, ToggleEventState } from '../../shared/model';
+export type DBHeaderDefaultProps = {
+    /**
+     * Slot to pass in the DBBrand component
+     */
+    brand?: any;
+    /**
+     * Slot to pass in a meta navigation.
+     * Desktop: Above the regular header
+     * Mobile: Inside the drawer
+     */
+    metaNavigation?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. search) as primary action.
+     * Desktop: Shown next to the main-navigation
+     * Mobile: Shown next to the brand
+     */
+    primaryAction?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.
+     * Desktop: Shown seperated by divider at the end of the header
+     * Mobile: Shown inside the drawer at the bottom.
+     */
+    secondaryAction?: any;
+    /**
+     * Open/closes the drawer for mobile header or if `forceMobile` is true.
+     */
+    drawerOpen?: boolean;
+    /**
+     * Forces the header to use mobile layout for desktop as well.
+     * You should only use this setting if you really can't provide a smaller navigation.
+     * Overwrite size of the drawer with '--db-drawer-max-width: xxx'
+     */
+    forceMobile?: boolean;
+    /**
+     * This attribute sets the label for the burger menu button for mobile headers.
+     */
+    burgerMenuLabel?: string;
+};
+export type DBHeaderProps = DBHeaderDefaultProps & GlobalProps & ToggleEventProps & ContainerWidthProps;
+export type DBHeaderDefaultState = {
+    forcedToMobile?: boolean;
+};
+export type DBHeaderState = DBHeaderDefaultState & GlobalState & ToggleEventState<HTMLElement> & InitializedState & NavigationBehaviorState;

package/dist/components/header/model.js

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

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBIcon: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "text" | "icon" | keyof import("../..").GlobalProps | keyof import("./model").DBIconDefaultProps> & import("./model").DBIconDefaultProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").TextProps & React.RefAttributes<HTMLSpanElement>>;
+export default DBIcon;

package/dist/components/icon/icon.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { useRef, forwardRef } from "react";
+import { cls, filterPassingProps, getRootProps } from "../../utils";
+function DBIconFn(props, component) {
+    const _ref = component || useRef(component);
+    return (React.createElement("span", Object.assign({ "aria-hidden": "true", 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-icon", props.className), "data-icon": props.icon, "data-icon-weight": props.weight, "data-icon-variant": props.variant }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+}
+const DBIcon = forwardRef(DBIconFn);
+DBIcon.defaultProps = {};
+export default DBIcon;

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

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

package/dist/components/icon/index.js

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

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

@@ -0,0 +1,12 @@
+import { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model';
+export declare const IconVariantList: readonly ["default", "inverted", "filled"];
+export type IconVariantType = (typeof IconVariantList)[number];
+export declare const IconWeightList: readonly ["16", "20", "24", "32", "48", "64"];
+export type IconWeightType = (typeof IconWeightList)[number];
+export type DBIconDefaultProps = {
+    variant?: IconVariantType;
+    weight?: IconWeightType;
+};
+export type DBIconProps = DBIconDefaultProps & GlobalProps & IconProps & TextProps;
+export type DBIconDefaultState = {};
+export type DBIconState = DBIconDefaultState & GlobalState;

package/dist/components/icon/model.js

@@ -0,0 +1,2 @@
+export const IconVariantList = ['default', 'inverted', 'filled'];
+export const IconWeightList = ['16', '20', '24', '32', '48', '64'];

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

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

package/dist/components/infotext/index.js

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

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "text" | "size" | "icon" | keyof import("../..").GlobalProps | "showIcon" | "semantic"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<HTMLSpanElement>>;
+export default DBInfotext;

package/dist/components/infotext/infotext.js

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "react";
+import { useRef, forwardRef } from "react";
+import { cls, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+function DBInfotextFn(props, component) {
+    var _a;
+    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"]), { 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-infotext", props.className), "data-icon": props.icon, "data-semantic": props.semantic, "data-size": props.size, "data-hide-icon-before": getHideProp((_a = props.showIcon) !== null && _a !== void 0 ? _a : true) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+}
+const DBInfotext = forwardRef(DBInfotextFn);
+DBInfotext.defaultProps = {};
+export default DBInfotext;

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

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

package/dist/components/infotext/model.js

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

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

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

package/dist/components/input/index.js

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

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBInput: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBInputDefaultProps | keyof import("../../shared/model").FormTextProps | keyof import("../../shared/model").InputEventProps<HTMLInputElement> | "iconAfter"> & 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").FormProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & React.RefAttributes<HTMLInputElement>>;
+export default DBInput;