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

package/README.md

@@ -0,0 +1,76 @@
+# @db-ux/react-core-components
+
+![Apache 2.0 license badge](https://img.shields.io/badge/License-Apache_2.0-blue.svg)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)
+
+A React library containing all styles & components of [DB UX Design System (technical components)](https://github.com/db-ux-design-system/core-web).
+
+> **Note:** Find more information about specific components [here](https://db-ux-design-system.github.io/core-web/review/main)
+
+## Install
+
+```shell
+npm i @db-ux/react-core-components
+```
+
+> **Note:** This will install [`@db-ux/core-foundations`](https://www.npmjs.com/package/@db-ux/core-foundations) and [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) as well which contains the `css`/`scss` files
+
+## Styling Dependencies
+
+Import the styles in scss or css. Based on your technology the file names could be different.
+
+-   Default (relative): points to `../assets`
+-   Rollup (rollup): points to `@db-ux/core-foundations/assets`
+-   Webpack (webpack): points to `~@db-ux/core-foundations/assets`
+
+<details>
+  <summary><strong>SCSS</strong></summary>
+
+```scss
+// index.scss
+@forward "@db-ux/core-components/build/styles/rollup";
+```
+
+</details>
+<details>
+  <summary><strong>CSS</strong></summary>
+
+```tsx
+// main.tsx
+import "@db-ux/core-components/build/styles/rollup.css";
+```
+
+</details>
+
+> **Note:** The `@db-ux/core-components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
+
+## Usage
+
+```tsx
+import { DBButton } from '@db-ux/react-core-components';
+...
+<DBButton icon="x_placeholder" onClick={()=>{console.log("Test")}}>Test</DBButton>
+...
+```
+
+## Deutsche Bahn brand
+
+As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
+Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
+
+You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.
+
+## Contributions
+
+Contributions are very welcome, please refer to the [contribution guide](https://github.com/db-ux-design-system/core-web/blob/main/CONTRIBUTING.md).
+
+## Code of conduct
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/core-web/blob/main/CODE-OF-CONDUCT.md).
+
+## License
+
+This project is licensed under [Apache-2.0](LICENSE).

package/dist/components/accordion/accordion.d.ts

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

package/dist/components/accordion/accordion.js

@@ -0,0 +1,92 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import DBAccordionItem from "../accordion-item/accordion-item";
+import { DEFAULT_ID } from "../../shared/constants";
+function DBAccordionFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
+    const [_name, set_name] = useState(() => "");
+    const [initialized, setInitialized] = useState(() => false);
+    const [_initOpenIndexDone, set_initOpenIndexDone] = useState(() => false);
+    function convertItems(items) {
+        try {
+            if (typeof items === "string") {
+                return JSON.parse(items);
+            }
+            return items;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return [];
+    }
+    useEffect(() => {
+        set_id(props.id || "accordion-" + uuid());
+        setInitialized(true);
+        set_initOpenIndexDone(true);
+    }, []);
+    useEffect(() => {
+        // If we have a single behavior we first check for
+        // props.name otherwise for state_id
+        if (initialized) {
+            if (props.behavior === "single") {
+                if (props.name) {
+                    if (_name !== props.name) {
+                        set_name(props.name);
+                    }
+                }
+                else {
+                    if (_name !== _id && _id) {
+                        set_name(_id);
+                    }
+                }
+            }
+            else {
+                set_name("");
+            }
+        }
+    }, [initialized, props.name, props.behavior, _id]);
+    useEffect(() => {
+        if (_ref.current) {
+            const childDetails = _ref.current.getElementsByTagName("details");
+            if (childDetails) {
+                for (const details of Array.from(childDetails)) {
+                    if (_name === "") {
+                        details.removeAttribute("name");
+                    }
+                    else {
+                        details.name = _name;
+                    }
+                }
+            }
+        }
+    }, [_ref.current, _name]);
+    useEffect(() => {
+        var _a;
+        if (_ref.current && _initOpenIndexDone) {
+            if ((props === null || props === void 0 ? void 0 : props.initOpenIndex) && ((_a = props.initOpenIndex) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                const childDetails = _ref.current.getElementsByTagName("details");
+                if (childDetails) {
+                    const initOpenIndex = props.behavior === "single" && props.initOpenIndex.length > 1
+                        ? [props.initOpenIndex[0]] // use only one index for behavior=single
+                        : props.initOpenIndex;
+                    Array.from(childDetails).forEach((details, index) => {
+                        if (initOpenIndex.includes(index)) {
+                            details.open = true;
+                        }
+                    });
+                }
+            }
+            set_initOpenIndexDone(false);
+        }
+    }, [_ref.current, _initOpenIndexDone, props.initOpenIndex]);
+    return (React.createElement("ul", 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-accordion", props.className), "data-variant": props.variant }),
+        !props.items ? React.createElement(React.Fragment, null, props.children) : null,
+        props.items ? (React.createElement(React.Fragment, null, (_a = convertItems(props.items)) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React.createElement(DBAccordionItem, { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text }))))) : null));
+}
+const DBAccordion = forwardRef(DBAccordionFn);
+DBAccordion.defaultProps = {};
+export default DBAccordion;

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

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

package/dist/components/accordion/index.js

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

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

@@ -0,0 +1,41 @@
+import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';
+import { DBAccordionItemDefaultProps } from '../accordion-item/model';
+export declare const AccordionVariantList: readonly ["divider", "card"];
+export type AccordionVariantType = (typeof AccordionVariantList)[number];
+export declare const AccordionBehaviorList: readonly ["multiple", "single"];
+export type AccordionBehaviorType = (typeof AccordionBehaviorList)[number];
+export type DBAccordionDefaultProps = {
+    /**
+     * To allow multiple items open at the same time or only 1 item
+     */
+    behavior?: AccordionBehaviorType;
+    /**
+     * The index of items which should be open when loading the accordion
+     */
+    initOpenIndex?: number[];
+    /**
+     * Alternative to pass in a simple representation of accordion items
+     */
+    items?: DBAccordionItemDefaultProps[] | string;
+    /**
+     * Set details name for exclusive accordions, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name
+     */
+    name?: string;
+    /**
+     * Informs about the changes in the internal state, which item is open
+     */
+    onChange?: (openAccordionItemIds: string[]) => void;
+    /**
+     * Defines the display of the accordion and the items:
+     * "divider": with a dividing line between the items
+     * "card": w/o dividing line, but items are shown in the card variant
+     */
+    variant?: AccordionVariantType;
+};
+export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;
+export type DBAccordionDefaultState = {
+    _initOpenIndexDone: boolean;
+    _name: string;
+    convertItems: (items?: unknown[] | string) => DBAccordionItemDefaultProps[];
+};
+export type DBAccordionState = DBAccordionDefaultState & GlobalState & InitializedState;

package/dist/components/accordion/model.js

@@ -0,0 +1,2 @@
+export const AccordionVariantList = ['divider', 'card'];
+export const AccordionBehaviorList = ['multiple', 'single'];

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDetailsElement>, "text" | "disabled" | "onToggle" | keyof import("../../shared/model").GlobalProps | "headline" | "defaultOpen" | "headlinePlain"> & {
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    headline?: any;
+    headlinePlain?: string;
+} & import("../../shared/model").TextProps & import("../../shared/model").GlobalProps & import("../../shared/model").ToggleEventProps & React.RefAttributes<HTMLDetailsElement>>;
+export default DBAccordionItem;

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

@@ -0,0 +1,34 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { DEFAULT_ID } from "../../shared/constants";
+function DBAccordionItemFn(props, component) {
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
+    const [_open, set_open] = useState(() => false);
+    function toggle(event) {
+        // We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        const newStateOpen = !_open;
+        if (props.onToggle) {
+            props.onToggle(newStateOpen);
+        }
+        set_open(newStateOpen);
+    }
+    useEffect(() => {
+        set_id(props.id || "accordion-item-" + uuid());
+        if (props.defaultOpen) {
+            set_open(props.defaultOpen);
+        }
+    }, []);
+    return (React.createElement("li", Object.assign({ 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-accordion-item", props.className) }),
+        React.createElement("details", Object.assign({ "aria-disabled": getBooleanAsString(props.disabled), 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"]), { open: _open }),
+            React.createElement("summary", { onClick: (event) => toggle(event) },
+                props.headlinePlain ? React.createElement(React.Fragment, null, props.headlinePlain) : null,
+                !props.headlinePlain ? React.createElement(React.Fragment, null, props.headline) : null),
+            React.createElement("div", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)))));
+}
+const DBAccordionItem = forwardRef(DBAccordionItemFn);
+DBAccordionItem.defaultProps = {};
+export default DBAccordionItem;

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { GlobalProps, GlobalState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';
+export type DBAccordionItemDefaultProps = {
+    /**
+     * Initial state for the accordion item
+     */
+    defaultOpen?: boolean;
+    /**
+     * The disabled attribute can be set to keep a user from clicking on the element.
+     */
+    disabled?: boolean;
+    /**
+     * Title of the accordion-item as slot
+     */
+    headline?: any;
+    /**
+     * Title of the accordion-item as plain text
+     */
+    headlinePlain?: string;
+} & TextProps;
+export type DBAccordionItemProps = DBAccordionItemDefaultProps & GlobalProps & ToggleEventProps;
+export type DBAccordionItemDefaultState = {
+    _open: boolean;
+};
+export type DBAccordionItemState = DBAccordionItemDefaultState & GlobalState & ToggleEventState<HTMLElement>;

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

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

package/dist/components/badge/badge.d.ts

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

package/dist/components/badge/badge.js

@@ -0,0 +1,32 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, filterPassingProps, getRootProps } from "../../utils";
+import { DEFAULT_LABEL } from "../../shared/constants";
+function DBBadgeFn(props, component) {
+    var _a, _b;
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        var _a;
+        if (_ref.current && initialized) {
+            if ((_a = props.placement) === null || _a === void 0 ? void 0 : _a.startsWith("corner")) {
+                let parent = _ref.current.parentElement;
+                if (parent && parent.localName.includes("badge")) {
+                    // Angular workaround
+                    parent = parent.parentElement;
+                }
+                if (parent) {
+                    parent.setAttribute("data-has-badge", "true");
+                }
+            }
+        }
+    }, [_ref.current, initialized]);
+    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-badge", props.className), "data-semantic": props.semantic, "data-size": props.size, "data-emphasis": props.emphasis, "data-placement": props.placement, "data-label": ((_a = props.placement) === null || _a === void 0 ? void 0 : _a.startsWith("corner")) && ((_b = props.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+}
+const DBBadge = forwardRef(DBBadgeFn);
+DBBadge.defaultProps = {};
+export default DBBadge;

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

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

package/dist/components/badge/index.js

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

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

@@ -0,0 +1,16 @@
+import { GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TagEmphasisProps, TextProps } from '../../shared/model';
+export declare const BadgePlacementList: readonly ["inline", "corner-top-left", "corner-top-right", "corner-center-left", "corner-center-right", "corner-bottom-left", "corner-bottom-right"];
+export type BadgePlacementType = (typeof BadgePlacementList)[number];
+export type DBBadgeDefaultProps = {
+    /**
+     * The `placement` attributes `corner-*` values change the position to absolute and adds a transform based on the placement.
+     */
+    placement?: BadgePlacementType;
+    /**
+     * Describes the badge for a11y if you use placement attribute with `corner-*`
+     */
+    label?: string;
+};
+export type DBBadgeProps = DBBadgeDefaultProps & GlobalProps & SemanticProps & SizeProps & TagEmphasisProps & TextProps;
+export type DBBadgeDefaultState = {};
+export type DBBadgeState = DBBadgeDefaultState & GlobalState & InitializedState;

package/dist/components/badge/model.js

@@ -0,0 +1 @@
+export const BadgePlacementList = ['inline', 'corner-top-left', 'corner-top-right', 'corner-center-left', 'corner-center-right', 'corner-bottom-left', 'corner-bottom-right'];

package/dist/components/brand/brand.d.ts

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

package/dist/components/brand/brand.js

@@ -0,0 +1,13 @@
+"use client";
+import * as React from "react";
+import { useRef, forwardRef } from "react";
+import { cls, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+import { DEFAULT_ICON } from "../../shared/constants";
+function DBBrandFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { "data-icon": props.hideLogo ? "none" : (_a = props.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-hide-icon": getHideProp(props.showIcon), 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-brand", props.className) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+}
+const DBBrand = forwardRef(DBBrandFn);
+DBBrand.defaultProps = {};
+export default DBBrand;

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

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

package/dist/components/brand/index.js

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

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

@@ -0,0 +1,10 @@
+import { GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
+export type DBBrandDefaultProps = {
+    /**
+     * @deprecated: Disable the default logo svg to pass in a custom `img`
+     */
+    hideLogo?: boolean;
+};
+export type DBBrandProps = DBBrandDefaultProps & GlobalProps & IconProps & ShowIconProps & TextProps;
+export type DBBrandDefaultState = {};
+export type DBBrandState = DBBrandDefaultState & GlobalState;

package/dist/components/brand/model.js

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

package/dist/components/button/button.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBButton: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("./model").DBButtonDefaultProps | keyof import("../../shared/model").GlobalProps | "showIcon"> & import("./model").DBButtonDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").SizeProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<HTMLButtonElement>>;
+export default DBButton;

package/dist/components/button/button.js

@@ -0,0 +1,16 @@
+"use client";
+import * as React from "react";
+import { useRef, forwardRef } from "react";
+import { cls, getBooleanAsString, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+function DBButtonFn(props, component) {
+    const _ref = component || useRef(component);
+    function handleClick(event) {
+        if (props.onClick) {
+            props.onClick(event);
+        }
+    }
+    return (React.createElement("button", 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-button", props.className), type: props.type || "button", disabled: props.disabled, "aria-label": props.label, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-size": props.size, "data-state": props.state, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText), name: props.name, value: props.value, "aria-describedby": props.describedbyid, "aria-expanded": props.ariaexpanded, "aria-pressed": props.ariapressed, onClick: (event) => handleClick(event) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+}
+const DBButton = forwardRef(DBButtonFn);
+DBButton.defaultProps = {};
+export default DBButton;

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

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

package/dist/components/button/index.js

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

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

@@ -0,0 +1,52 @@
+import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, ShowIconProps, SizeProps, TextProps, WidthProps } from '../../shared/model';
+export declare const ButtonVariantList: readonly ["outlined", "brand", "filled", "ghost"];
+export type ButtonVariantType = (typeof ButtonVariantList)[number];
+export declare const ButtonTypeList: readonly ["button", "reset", "submit"];
+export type ButtonTypeType = (typeof ButtonTypeList)[number];
+export declare const ButtonStateList: readonly ["loading"];
+export type ButtonStateType = (typeof ButtonStateList)[number];
+export type DBButtonDefaultProps = {
+    /**
+     * If the button controls a grouping of other elements, the ariaexpanded state [indicates whether the controlled grouping is currently expanded or collapsed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).
+     */
+    ariaexpanded?: boolean;
+    /**
+     * Defines the button as a toggle button. The value of [ariapressed describes the state of the button](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
+     */
+    ariapressed?: boolean;
+    /**
+     * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
+     */
+    disabled?: boolean;
+    /**
+     * Define the text next to the icon specified via the icon Property to get hidden.
+     */
+    noText?: boolean;
+    /**
+     * The label represents the [aria-label attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) value of the button
+     */
+    label?: string;
+    /**
+     * The name attribute specifies a [name attributes value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name) for the button.
+     */
+    name?: string;
+    /**
+     * The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).
+     */
+    type?: ButtonTypeType;
+    /**
+     * The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).
+     */
+    value?: string;
+    /**
+     * Show loading progress inside button.
+     */
+    state?: ButtonStateType;
+    /**
+     * Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.
+     */
+    variant?: ButtonVariantType | string;
+};
+export type DBButtonProps = DBButtonDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & SizeProps & ShowIconProps & TextProps;
+export type DBButtonDefaultState = {};
+export type DBButtonState = DBButtonDefaultState & GlobalState & ClickEventState<HTMLButtonElement>;

package/dist/components/button/model.js

@@ -0,0 +1,3 @@
+export const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'];
+export const ButtonTypeList = ['button', 'reset', 'submit'];
+export const ButtonStateList = ['loading'];

package/dist/components/card/card.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBCard: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "spacing" | "onClick" | keyof import("../../shared/model").GlobalProps | keyof import("./model").DBCardDefaultProps> & import("./model").DBCardDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLElement> & import("../../shared/model").SpacingProps & React.RefAttributes<HTMLDivElement>>;
+export default DBCard;

package/dist/components/card/card.js

@@ -0,0 +1,16 @@
+"use client";
+import * as React from "react";
+import { useRef, forwardRef } from "react";
+import { cls, filterPassingProps, getRootProps } from "../../utils";
+function DBCardFn(props, component) {
+    const _ref = component || useRef(component);
+    function handleClick(event) {
+        if (props.onClick) {
+            props.onClick(event);
+        }
+    }
+    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-card", props.className), "data-behavior": props.behavior, "data-elevation-level": props.elevationLevel, "data-spacing": props.spacing, role: props.behavior === "interactive" ? "button" : undefined, tabIndex: props.behavior === "interactive" ? 0 : undefined, onClick: (event) => handleClick(event) }), props.children));
+}
+const DBCard = forwardRef(DBCardFn);
+DBCard.defaultProps = {};
+export default DBCard;

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

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

package/dist/components/card/index.js

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

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

@@ -0,0 +1,18 @@
+import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, SpacingProps } from '../../shared/model';
+export declare const CardBehaviorList: readonly ["static", "interactive"];
+export type CardBehaviorType = (typeof CardBehaviorList)[number];
+export declare const CardElevationLevelList: readonly ["1", "2", "3"];
+export type CardElevationLevelType = (typeof CardElevationLevelList)[number];
+export type DBCardDefaultProps = {
+    /**
+     * Makes the card interactive
+     */
+    behavior?: CardBehaviorType;
+    /**
+     * Changes the elevation of the card which is equal to `basic-background-level`
+     */
+    elevationLevel?: CardElevationLevelType;
+};
+export type DBCardProps = DBCardDefaultProps & GlobalProps & ClickEventProps<HTMLElement> & SpacingProps;
+export type DBCardDefaultState = {};
+export type DBCardState = DBCardDefaultState & GlobalState & ClickEventState<HTMLElement>;

package/dist/components/card/model.js

@@ -0,0 +1,2 @@
+export const CardBehaviorList = ['static', 'interactive'];
+export const CardElevationLevelList = ['1', '2', '3'];

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBCheckbox: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "size" | "checked" | keyof import("../../shared/model").GlobalProps | "indeterminate" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps> & import("./model").DBCheckboxDefaultProps & 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").FormMessageProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
+export default DBCheckbox;