@db-ux/react-core-components 4.9.0 → 4.10.0

package/dist/components/badge/badge.js

@@ -1,34 +1,74 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_LABEL } from "../../shared/constants";
-import { cls, getBooleanAsString } from "../../utils";
-function DBBadgeFn(props, component) {
-    var _a, _b, _c, _d;
-    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.dataset["hasBadge"] = "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", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-badge", props.className), "data-semantic": props.semantic, "data-size": props.size, "data-emphasis": props.emphasis, "data-placement": props.placement, "data-wrap": getBooleanAsString(props.wrap), "data-label": ((_c = props.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = props.label) !== null && _d !== void 0 ? _d : DEFAULT_LABEL) }),
-        props.text ? React.createElement(React.Fragment, null, props.text) : null,
-        props.children));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, getBooleanAsString as r } from "../../utils/index.js";
+import "../../shared/constants.js";
+import { forwardRef as i, useEffect as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+function d(i, d) {
+	let f = d || o(d), [p, m] = s(() => !1);
+	return a(() => {
+		m(!0);
+	}, []), a(() => {
+		if (f.current && p && i.placement?.startsWith("corner")) {
+			let e = f.current.parentElement;
+			e && e.localName.includes("badge") && (e = e.parentElement), e && (e.dataset.hasBadge = "true");
+		}
+	}, [f.current, p]), /* @__PURE__ */ u("span", {
+		ref: f,
+		...e(i, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		id: i.id ?? i.propOverrides?.id,
+		...t(i, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-badge", i.className),
+		"data-semantic": i.semantic,
+		"data-size": i.size,
+		"data-emphasis": i.emphasis,
+		"data-placement": i.placement,
+		"data-wrap": r(i.wrap),
+		"data-label": i.placement?.startsWith("corner") && (i.label ?? "LABEL SHOULD BE SET"),
+		children: [i.text ? /* @__PURE__ */ l(c, { children: i.text }) : null, i.children]
+	});
 }
-const DBBadge = forwardRef(DBBadgeFn);
-export default DBBadge;
+var f = i(d);
+//#endregion
+export { f as default };

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

@@ -1,4 +1,4 @@
-import { EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TextProps, WrapProps } from '../../shared/model';
+import type { EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TextProps, WrapProps } 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 = {

package/dist/components/badge/model.js

@@ -1 +1,12 @@
-export const BadgePlacementList = ['inline', 'corner-top-left', 'corner-top-right', 'corner-center-left', 'corner-center-right', 'corner-bottom-left', 'corner-bottom-right'];
+//#region src/components/badge/model.ts
+var e = [
+	"inline",
+	"corner-top-left",
+	"corner-top-right",
+	"corner-center-left",
+	"corner-center-right",
+	"corner-bottom-left",
+	"corner-bottom-right"
+];
+//#endregion
+export { e as BadgePlacementList };

package/dist/components/brand/brand.js

@@ -1,15 +1,62 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { DEFAULT_ICON } from "../../shared/constants";
-import { cls, getBooleanAsString } from "../../utils";
-function DBBrandFn(props, component) {
-    var _a, _b, _c;
-    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-density"]), { "data-icon": props.hideLogo ? "none" : (_a = props.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(props.showIcon), id: (_b = props.id) !== null && _b !== void 0 ? _b : (_c = props.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-brand", props.className) }),
-        props.children,
-        props.text ? React.createElement(React.Fragment, null, props.text) : null));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, getBooleanAsString as r } from "../../utils/index.js";
+import "../../shared/constants.js";
+import { forwardRef as i, useRef as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/brand/brand.tsx
+function l(i, l) {
+	return /* @__PURE__ */ c("div", {
+		ref: l || a(l),
+		...e(i, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		"data-icon": i.hideLogo ? "none" : i.icon ?? "brand",
+		"data-show-icon": r(i.showIcon),
+		id: i.id ?? i.propOverrides?.id,
+		...t(i, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-brand", i.className),
+		children: [i.children, i.text ? /* @__PURE__ */ s(o, { children: i.text }) : null]
+	});
 }
-const DBBrand = forwardRef(DBBrandFn);
-export default DBBrand;
+var u = i(l);
+//#endregion
+export { u as default };

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

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
+import type { GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
 export type DBBrandDefaultProps = {
     /**
      * @deprecated: Disable the default logo svg to pass in a custom `img`

package/dist/components/button/button.js

@@ -1,23 +1,77 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls, getBoolean, getBooleanAsString } from "../../utils";
-function DBButtonFn(props, component) {
-    var _a, _b, _c, _d;
-    const _ref = component || useRef(component);
-    function getButtonType() {
-        if (props.type) {
-            return props.type;
-        }
-        else if (props.onClick) {
-            return "button";
-        }
-        return "submit";
-    }
-    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", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-button", props.className), type: getButtonType(), disabled: getBoolean(props.disabled, "disabled"), "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-wrap": getBooleanAsString(props.wrap), "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value }),
-        props.text ? React.createElement(React.Fragment, null, props.text) : null,
-        props.children));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, getBoolean as r, getBooleanAsString as i } from "../../utils/index.js";
+import { forwardRef as a, useRef as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/button/button.tsx
+function u(a, u) {
+	let d = u || o(u);
+	function f() {
+		return a.type ? a.type : a.onClick ? "button" : "submit";
+	}
+	return /* @__PURE__ */ l("button", {
+		ref: d,
+		...e(a, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		id: a.id ?? a.propOverrides?.id,
+		...t(a, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-button", a.className),
+		type: f(),
+		disabled: r(a.disabled, "disabled"),
+		"data-icon": a.iconLeading ?? a.icon,
+		"data-show-icon": i(a.showIconLeading ?? a.showIcon),
+		"data-icon-trailing": a.iconTrailing,
+		"data-show-icon-trailing": i(a.showIconTrailing),
+		"data-size": a.size,
+		"data-width": a.width,
+		"data-variant": a.variant,
+		"data-wrap": i(a.wrap),
+		"data-no-text": i(a.noText),
+		name: a.name,
+		form: a.form,
+		value: a.value,
+		children: [a.text ? /* @__PURE__ */ c(s, { children: a.text }) : null, a.children]
+	});
 }
-const DBButton = forwardRef(DBButtonFn);
-export default DBButton;
+var d = a(u);
+//#endregion
+export { d as default };

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

@@ -1,4 +1,4 @@
-import { ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, NoTextProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, TextProps, WidthProps, WrapProps } from '../../shared/model';
+import type { ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, NoTextProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, TextProps, WidthProps, WrapProps } 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"];

package/dist/components/button/model.js

@@ -1,2 +1,13 @@
-export const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'];
-export const ButtonTypeList = ['button', 'reset', 'submit'];
+//#region src/components/button/model.ts
+var e = [
+	"outlined",
+	"brand",
+	"filled",
+	"ghost"
+], t = [
+	"button",
+	"reset",
+	"submit"
+];
+//#endregion
+export { t as ButtonTypeList, e as ButtonVariantList };

package/dist/components/card/card.js

@@ -1,17 +1,67 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { cls } from "../../utils";
-function DBCardFn(props, component) {
-    var _a, _b;
-    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", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-card", props.className), "data-behavior": props.behavior, "data-elevation-level": props.elevationLevel, "data-spacing": props.spacing, onClick: (event) => handleClick(event) }), props.children));
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n } from "../../utils/index.js";
+import { forwardRef as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/card/card.tsx
+function o(r, o) {
+	let s = o || i(o);
+	function c(e) {
+		r.onClick && r.onClick(e);
+	}
+	return /* @__PURE__ */ a("div", {
+		ref: s,
+		...e(r, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		id: r.id ?? r.propOverrides?.id,
+		...t(r, [
+			"data-icon-variant",
+			"data-icon-variant-before",
+			"data-icon-variant-after",
+			"data-icon-weight",
+			"data-icon-weight-before",
+			"data-icon-weight-after",
+			"data-interactive",
+			"data-force-mobile",
+			"data-color",
+			"data-container-color",
+			"data-bg-color",
+			"data-on-bg-color",
+			"data-color-scheme",
+			"data-font-size",
+			"data-headline-size",
+			"data-divider",
+			"data-focus",
+			"data-font",
+			"data-density"
+		]),
+		className: n("db-card", r.className),
+		"data-behavior": r.behavior,
+		"data-elevation-level": r.elevationLevel,
+		"data-spacing": r.spacing,
+		onClick: (e) => c(e),
+		children: r.children
+	});
 }
-const DBCard = forwardRef(DBCardFn);
-export default DBCard;
+var s = r(o);
+//#endregion
+export { s as default };

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

@@ -1,4 +1,4 @@
-import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, SpacingProps } from '../../shared/model';
+import type { 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"];

package/dist/components/card/model.js

@@ -1,2 +1,8 @@
-export const CardBehaviorList = ['static', 'interactive'];
-export const CardElevationLevelList = ['1', '2', '3'];
+//#region src/components/card/model.ts
+var e = ["static", "interactive"], t = [
+	"1",
+	"2",
+	"3"
+];
+//#endregion
+export { e as CardBehaviorList, t as CardElevationLevelList };