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

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

@@ -0,0 +1,37 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+function DBTabItemFn(props, component) {
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    const [_selected, set_selected] = 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_selected((_a = event.target) === null || _a === void 0 ? void 0 : _a["checked"]);
+    }
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (props.active && initialized && _ref.current) {
+            _ref.current.click();
+            setInitialized(false);
+        }
+    }, [_ref.current, initialized]);
+    return (React.createElement("li", Object.assign({ role: "none" }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-tab-item", props.className) }),
+        React.createElement("label", { htmlFor: props.id, "data-icon": props.icon, "data-icon-after": props.iconAfter, "data-hide-icon": getHideProp(props.showIcon), "data-hide-icon-after": getHideProp(props.showIcon), "data-no-text": props.noText },
+            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: props.disabled, "aria-selected": _selected, "aria-controls": props.controls, checked: props.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"]), { id: props.id, onChange: (event) => handleChange(event) })),
+            props.label ? React.createElement(React.Fragment, null, props.label) : null,
+            props.children)));
+}
+const DBTabItem = forwardRef(DBTabItemFn);
+DBTabItem.defaultProps = {};
+export default DBTabItem;

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+"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 DBTabListFn(props, component) {
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
+    useEffect(() => {
+        set_id(props.id || "tab-list-" + uuid());
+    }, []);
+    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: _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-tab-list", props.className) }),
+        React.createElement("ul", { role: "tablist" }, props.children)));
+}
+const DBTabList = forwardRef(DBTabListFn);
+DBTabList.defaultProps = {};
+export default DBTabList;

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { AriaLabelledByProps, GlobalProps, GlobalState } from '../../shared/model';
+export type DBTabPanelDefaultProps = {
+    /**
+     * The content if you don't want to use children.
+     */
+    content?: string;
+};
+export type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps & AriaLabelledByProps;
+export type DBTabPanelDefaultState = {};
+export type DBTabPanelState = DBTabPanelDefaultState & GlobalState;

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

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

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

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

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

@@ -0,0 +1,14 @@
+"use client";
+import * as React from "react";
+import { useRef, useEffect, forwardRef } from "react";
+import { cls, filterPassingProps, getRootProps } from "../../utils";
+function DBTabPanelFn(props, component) {
+    const _ref = component || useRef(component);
+    useEffect(() => { }, []);
+    return (React.createElement("section", Object.assign({ role: "tabpanel", 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-tab-panel", props.className), id: props.id, "aria-labelledby": props.labelledBy }),
+        props.content ? React.createElement(React.Fragment, null, props.content) : null,
+        props.children));
+}
+const DBTabPanel = forwardRef(DBTabPanelFn);
+DBTabPanel.defaultProps = {};
+export default DBTabPanel;

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

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

package/dist/components/tabs/index.js

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

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

@@ -0,0 +1,47 @@
+import { AlignmentProps, GlobalProps, GlobalState, InitializedState, OrientationProps, WidthProps } from '../../shared/model';
+import { DBTabItemProps } from '../tab-item/model';
+import { DBTabPanelProps } from '../tab-panel/model';
+export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
+export type TabsBehaviorType = (typeof TabsBehaviorList)[number];
+export declare const TabsInitialSelectedModeList: readonly ["auto", "manually"];
+export type TabsInitialSelectedModeType = (typeof TabsInitialSelectedModeList)[number];
+export type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;
+export type DBTabsDefaultProps = {
+    /**
+     * Change amount of distance if you click on an arrow, only available with behavior="arrows"
+     */
+    arrowScrollDistance?: number;
+    /**
+     * Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible
+     */
+    behavior?: TabsBehaviorType;
+    /**
+     * Default behavior is auto selecting the first tab, change selected tab by index
+     */
+    initialSelectedIndex?: number;
+    /**
+     * Default behavior is auto selecting the first tab, disable it with 'manually'
+     */
+    initialSelectedMode?: TabsInitialSelectedModeType;
+    /**
+     * The name of the tab bar, is required for grouping multiple tabs together. Will overwrite names from children.
+     */
+    name?: string;
+    /**
+     * Provide simple tabs with label + text as content
+     */
+    tabs?: DBSimpleTabProps[] | string;
+};
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps;
+export type DBTabsDefaultState = {
+    _name: string;
+    scrollContainer?: Element | null;
+    scroll: (left?: boolean) => void;
+    showScrollLeft?: boolean;
+    showScrollRight?: boolean;
+    evaluateScrollButtons: (tabList: Element) => void;
+    convertTabs: (tabs?: unknown[] | string | undefined) => DBSimpleTabProps[];
+    initTabList: () => void;
+    initTabs: (init?: boolean) => void;
+};
+export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState;

package/dist/components/tabs/model.js

@@ -0,0 +1,2 @@
+export const TabsBehaviorList = ['scrollbar', 'arrows'];
+export const TabsInitialSelectedModeList = ['auto', 'manually'];

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTabs: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "width" | "orientation" | keyof import("../..").GlobalProps | keyof import("./model").DBTabsDefaultProps | "alignment"> & import("./model").DBTabsDefaultProps & import("../..").GlobalProps & import("../..").OrientationProps & import("../..").WidthProps & import("../..").AlignmentProps & React.RefAttributes<HTMLDivElement>>;
+export default DBTabs;

package/dist/components/tabs/tabs.js

@@ -0,0 +1,138 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import DBButton from "../button/button";
+import DBTabList from "../tab-list/tab-list";
+import DBTabItem from "../tab-item/tab-item";
+import DBTabPanel from "../tab-panel/tab-panel";
+function DBTabsFn(props, component) {
+    var _a, _b, _c, _d;
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => "tabs-" + uuid());
+    const [_name, set_name] = useState(() => "");
+    const [initialized, setInitialized] = useState(() => false);
+    const [showScrollLeft, setShowScrollLeft] = useState(() => false);
+    const [showScrollRight, setShowScrollRight] = useState(() => false);
+    const [scrollContainer, setScrollContainer] = useState(() => null);
+    function convertTabs(tabs) {
+        try {
+            if (typeof tabs === "string") {
+                return JSON.parse(tabs);
+            }
+            return tabs;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return [];
+    }
+    function evaluateScrollButtons(tList) {
+        const needsScroll = tList.scrollWidth > tList.clientWidth;
+        setShowScrollLeft(needsScroll && tList.scrollLeft > 1);
+        setShowScrollRight(needsScroll && tList.scrollLeft < tList.scrollWidth - tList.clientWidth);
+    }
+    function scroll(left) {
+        let step = props.arrowScrollDistance || 100;
+        if (left) {
+            step *= -1;
+        }
+        scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollBy({
+            top: 0,
+            left: step,
+            behavior: "smooth",
+        });
+    }
+    function initTabList() {
+        if (_ref.current) {
+            const tabList = _ref.current.querySelector(".db-tab-list");
+            if (tabList) {
+                const container = tabList.querySelector('[role="tablist"]');
+                if (container) {
+                    container.setAttribute("aria-orientation", props.orientation || "horizontal");
+                    if (props.behavior === "arrows") {
+                        setScrollContainer(container);
+                        evaluateScrollButtons(container);
+                        container.addEventListener("scroll", () => {
+                            evaluateScrollButtons(container);
+                        });
+                    }
+                }
+            }
+        }
+    }
+    function initTabs(init) {
+        if (_ref.current) {
+            const tabItems = Array.from(_ref.current.getElementsByClassName("db-tab-item"));
+            for (const tabItem of tabItems) {
+                const index = tabItems.indexOf(tabItem);
+                const label = tabItem.querySelector("label");
+                const input = tabItem.querySelector("input");
+                if (input && label) {
+                    if (!input.id) {
+                        const tabId = `${_name}-tab-${index}`;
+                        label.setAttribute("for", tabId);
+                        input.setAttribute("aria-controls", `${_name}-tab-panel-${index}`);
+                        input.id = tabId;
+                        input.setAttribute("name", _name);
+                    }
+                    if (init) {
+                        // Auto select
+                        const autoSelect = !props.initialSelectedMode ||
+                            props.initialSelectedMode === "auto";
+                        const shouldAutoSelect = (props.initialSelectedIndex == null && index === 0) ||
+                            props.initialSelectedIndex === index;
+                        if (autoSelect && shouldAutoSelect) {
+                            input.click();
+                        }
+                    }
+                }
+            }
+            const tabPanels = Array.from(_ref.current.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
+            for (const panel of tabPanels) {
+                if (panel.id)
+                    continue;
+                const index = tabPanels.indexOf(panel);
+                panel.id = `${_name}-tab-panel-${index}`;
+                panel.setAttribute("aria-labelledby", `${_name}-tab-${index}`);
+            }
+        }
+    }
+    useEffect(() => {
+        set_id(props.id || _id);
+        set_name(`tabs-${props.name || uuid()}`);
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (_ref.current && initialized) {
+            initTabList();
+            initTabs(true);
+            const tabList = _ref.current.querySelector(".db-tab-list");
+            if (tabList) {
+                const observer = new MutationObserver((mutations) => {
+                    mutations.forEach((mutation) => {
+                        if (mutation.removedNodes.length || mutation.addedNodes.length) {
+                            initTabList();
+                            initTabs();
+                        }
+                    });
+                });
+                observer.observe(tabList, {
+                    childList: true,
+                    subtree: true,
+                });
+            }
+            setInitialized(false);
+        }
+    }, [_ref.current, initialized]);
+    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: _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-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-alignment": (_a = props.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = props.width) !== null && _b !== void 0 ? _b : "auto" }),
+        showScrollLeft ? (React.createElement(DBButton, { className: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
+        props.tabs ? (React.createElement(React.Fragment, null,
+            React.createElement(DBTabList, null, (_c = convertTabs(props.tabs)) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconAfter: tab.iconAfter, icon: tab.icon, noText: tab.noText })))), (_d = convertTabs(props.tabs)) === null || _d === void 0 ? void 0 :
+            _d.map((tab, index) => (React.createElement(DBTabPanel, { key: props.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null,
+        showScrollRight ? (React.createElement(DBButton, { className: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", noText: true, onClick: (event) => scroll() }, "Scroll right")) : null,
+        props.children));
+}
+const DBTabs = forwardRef(DBTabsFn);
+DBTabs.defaultProps = {};
+export default DBTabs;

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

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

package/dist/components/tag/index.js

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

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

@@ -0,0 +1,45 @@
+import { ContentSlotProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps, TagEmphasisProps } from '../../shared/model';
+export declare const TagBehaviorList: readonly ["static", "removable"];
+export type TagBehaviorType = (typeof TagBehaviorList)[number];
+export type DBTagDefaultProps = {
+    /**
+     *	Defines the behavior of the component:
+     *	- static: default behavior without remove button
+     *  - removable: add a remove button at the end of the tag
+     */
+    behavior?: TagBehaviorType | string;
+    /**
+     * @deprecated Disable tag
+     */
+    disabled?: boolean;
+    /**
+     * Define the text next to the icon specified via the icon Property to get hidden.
+     */
+    noText?: boolean;
+    /**
+     * If "removeButton" attribute is set this function will be called when user clicks cancel button inside the tag.
+     */
+    onRemove?: () => void;
+    /**
+     * The removeButton attribute shows the cancel button.
+     */
+    removeButton?: string;
+    /**
+     * Enable/Disable icon for checkbox/radio inside tag.
+     */
+    showCheckState?: boolean;
+    /**
+     * Alternative for children to set content as property.
+     */
+    text?: string;
+    /**
+     * If "interactive" is set to true, you can pass a value to the underlying checkbox or radio input.
+     */
+    value?: string;
+};
+export type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & TagEmphasisProps & ShowIconProps & ContentSlotProps;
+export type DBTagDefaultState = {
+    getRemoveButtonText: () => string;
+    handleRemove: () => void;
+};
+export type DBTagState = DBTagDefaultState & GlobalState & InitializedState;

package/dist/components/tag/model.js

@@ -0,0 +1 @@
+export const TagBehaviorList = ['static', 'removable'];

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "content" | "overflow" | "icon" | keyof import("../..").GlobalProps | "showIcon" | "semantic" | "emphasis" | keyof import("./model").DBTagDefaultProps> & import("./model").DBTagDefaultProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").SemanticProps & import("../..").OverflowProps & import("../..").TagEmphasisProps & import("../..").ShowIconProps & import("../..").ContentSlotProps & React.RefAttributes<HTMLDivElement>>;
+export default DBTag;

package/dist/components/tag/tag.js

@@ -0,0 +1,46 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+function DBTagFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    function handleRemove() {
+        if (props.onRemove) {
+            props.onRemove();
+        }
+    }
+    function getRemoveButtonText() {
+        if (props.removeButton) {
+            return props.removeButton;
+        }
+        // TODO: We should think this through again, if we would really like to have default and especially english, instead of german labels in here
+        return "Remove tag";
+    }
+    const hasInitialized = useRef(false);
+    if (!hasInitialized.current) {
+        setInitialized(true);
+        hasInitialized.current = true;
+    }
+    useEffect(() => {
+        var _a, _b;
+        if (initialized && _ref.current && props.disabled !== undefined) {
+            const button = (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.querySelector("button:not(.db-tab-remove-button)");
+            const input = (_b = _ref.current) === null || _b === void 0 ? void 0 : _b.querySelector("input");
+            for (const element of [button, input]) {
+                if (element) {
+                    element.disabled = props.disabled;
+                }
+            }
+        }
+    }, [initialized, props.disabled, _ref.current]);
+    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-tag", props.className), "data-disabled": getBooleanAsString(props.disabled), "data-semantic": props.semantic, "data-emphasis": props.emphasis, "data-icon": props.icon, "data-show-check-state": getBooleanAsString((_a = props.showCheckState) !== null && _a !== void 0 ? _a : true), "data-hide-icon": getHideProp(props.showIcon), "data-no-text": getBooleanAsString(props.noText), "data-overflow": getBooleanAsString(props.overflow) }),
+        React.createElement(React.Fragment, null, props.content),
+        props.children,
+        props.text ? React.createElement(React.Fragment, null, props.text) : null,
+        props.behavior === "removable" ? (React.createElement("button", { className: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", onClick: (event) => handleRemove(), title: getRemoveButtonText() }, getRemoveButtonText())) : null));
+}
+const DBTag = forwardRef(DBTagFn);
+DBTag.defaultProps = {};
+export default DBTag;

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

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

package/dist/components/textarea/index.js

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

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

@@ -0,0 +1,30 @@
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, GlobalProps, GlobalState, InputEventProps, InputEventState } from '../../shared/model';
+export declare const TextareaResizeList: readonly ["none", "both", "horizontal", "vertical"];
+export type TextareaResizeType = (typeof TextareaResizeList)[number];
+export declare const TextareaWrapList: readonly ["hard", "soft", "off"];
+export type TextareaWrapType = (typeof TextareaWrapList)[number];
+export type DBTextareaDefaultProps = {
+    /**
+     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer
+     */
+    cols?: number;
+    /**
+     * In most browsers, textareas are resizable — you'll notice the drag handle in the right-hand corner, you can control it with this
+     */
+    resize?: TextareaResizeType;
+    /**
+     * The number of visible text lines for the control. If it is specified, it must be a positive integer
+     */
+    rows?: number;
+    /**
+     * Specifies whether the textarea is subject to spell checking by the underlying browser/OS
+     */
+    spellCheck?: boolean;
+    /**
+     * Indicates how the control should wrap the value for form submission.
+     */
+    wrap?: TextareaWrapType;
+};
+export type DBTextareaProps = DBTextareaDefaultProps & ChangeEventProps<HTMLTextAreaElement> & InputEventProps<HTMLTextAreaElement> & FocusEventProps<HTMLTextAreaElement> & FormProps & GlobalProps & FormTextProps & FormMessageProps;
+export type DBTextareaDefaultState = {};
+export type DBTextareaState = DBTextareaDefaultState & ChangeEventState<HTMLTextAreaElement> & InputEventState<HTMLTextAreaElement> & FocusEventState<HTMLTextAreaElement> & FormState & GlobalState;

package/dist/components/textarea/model.js

@@ -0,0 +1,2 @@
+export const TextareaResizeList = ['none', 'both', 'horizontal', 'vertical'];
+export const TextareaWrapList = ['hard', 'soft', 'off'];

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTextAreaElement>, keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").FormTextProps | keyof import("./model").DBTextareaDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").FocusEventProps<HTMLTextAreaElement>> & import("./model").DBTextareaDefaultProps & import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model").InputEventProps<HTMLTextAreaElement> & import("../../shared/model").FocusEventProps<HTMLTextAreaElement> & import("../../shared/model").FormProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").FormMessageProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default DBTextarea;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,105 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import DBInfotext from "../infotext/infotext";
+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, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
+function DBTextareaFn(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 [_descByIds, set_descByIds] = useState(() => "");
+    const [_value, set_value] = useState(() => "");
+    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    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 textarea */
+        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 || props.minLength || props.maxLength))) {
+            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;
+        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `textarea-${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(() => {
+        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-textarea", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel) }),
+        React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
+        React.createElement("textarea", 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"]), { id: _id, "data-resize": props.resize, disabled: props.disabled, required: props.required, readOnly: props.readOnly, form: props.form, maxLength: props.maxLength, minLength: props.minLength, name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": _descByIds, placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, rows: (_c = props.rows) !== null && _c !== void 0 ? _c : DEFAULT_ROWS, cols: props.cols })),
+        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 DBTextarea = forwardRef(DBTextareaFn);
+DBTextarea.defaultProps = {};
+export default DBTextarea;

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

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

package/dist/components/tooltip/index.js

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

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

@@ -0,0 +1,7 @@
+import { ClickEventState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
+export type DBTooltipDefaultProps = {
+    showArrow?: boolean;
+};
+export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps;
+export type DBTooltipDefaultState = {};
+export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState;

package/dist/components/tooltip/model.js

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

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").PopoverProps | "placement" | "emphasis" | "showArrow"> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export default DBTooltip;