@db-ux/react-core-components 4.10.2 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @db-ux/react-core-components
 
+## 4.11.0
+
+### Minor Changes
+
+- feat: add DBTable, DBTableHead, DBTableBody, DBTableFooter, DBTableRow, DBTableHeaderCell, and DBTableDataCell components - [see commit f64b6e0](https://github.com/db-ux-design-system/core-web/commit/f64b6e0f4b36ea4987c1d9ac7a0328bf317cdcad)
+
+### Patch Changes
+
+- fix: Add missing `propertyName` parameter to all `getBooleanAsString` calls across components for consistent string-based boolean parsing. - [see commit 6c11be5](https://github.com/db-ux-design-system/core-web/commit/6c11be54397c425607103f44b987b752efffb6d5)
+
+- fix: Remove unwanted whitespace characters from rendered output to prevent layout shifts - [see commit a0f23a4](https://github.com/db-ux-design-system/core-web/commit/a0f23a4a3e715414de3d045b59b88dc3ac28d5e7)
+
 ## 4.10.2
 
 _version bump_

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

@@ -53,7 +53,7 @@ function f(a, f) {
 		]),
 		className: n("db-accordion-item", a.className),
 		children: /* @__PURE__ */ d("details", {
-			"aria-disabled": i(a.disabled),
+			"aria-disabled": i(a.disabled, "disabled"),
 			ref: p,
 			...e(a, [
 				"data-icon-variant",

package/dist/components/badge/badge.js

@@ -64,7 +64,7 @@ function d(i, d) {
 		"data-size": i.size,
 		"data-emphasis": i.emphasis,
 		"data-placement": i.placement,
-		"data-wrap": r(i.wrap),
+		"data-wrap": r(i.wrap, "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]
 	});

package/dist/components/brand/brand.js

@@ -30,7 +30,7 @@ function l(i, l) {
 			"data-density"
 		]),
 		"data-icon": i.hideLogo ? "none" : i.icon ?? "brand",
-		"data-show-icon": r(i.showIcon),
+		"data-show-icon": r(i.showIcon, "showIcon"),
 		id: i.id ?? i.propOverrides?.id,
 		...t(i, [
 			"data-icon-variant",

package/dist/components/button/button.js

@@ -58,14 +58,14 @@ function u(a, u) {
 		type: f(),
 		disabled: r(a.disabled, "disabled"),
 		"data-icon": a.iconLeading ?? a.icon,
-		"data-show-icon": i(a.showIconLeading ?? a.showIcon),
+		"data-show-icon": i(a.showIconLeading, "showIconLeading") || i(a.showIcon, "showIcon"),
 		"data-icon-trailing": a.iconTrailing,
-		"data-show-icon-trailing": i(a.showIconTrailing),
+		"data-show-icon-trailing": i(a.showIconTrailing, "showIconTrailing"),
 		"data-size": a.size,
 		"data-width": a.width,
 		"data-variant": a.variant,
-		"data-wrap": i(a.wrap),
-		"data-no-text": i(a.noText),
+		"data-wrap": i(a.wrap, "wrap"),
+		"data-no-text": i(a.noText, "noText"),
 		name: a.name,
 		form: a.form,
 		value: a.value,

package/dist/components/custom-button/custom-button.js

@@ -52,13 +52,13 @@ function s(i, s) {
 		]),
 		className: n("db-custom-button", i.className),
 		"data-icon": i.iconLeading ?? i.icon,
-		"data-show-icon": r(i.showIconLeading ?? i.showIcon),
+		"data-show-icon": r(i.showIconLeading, "showIconLeading") || r(i.showIcon, "showIcon"),
 		"data-icon-trailing": i.iconTrailing,
-		"data-show-icon-trailing": r(i.showIconTrailing),
+		"data-show-icon-trailing": r(i.showIconTrailing, "showIconTrailing"),
 		"data-size": i.size,
 		"data-width": i.width,
 		"data-variant": i.variant,
-		"data-no-text": r(i.noText),
+		"data-no-text": r(i.noText, "noText"),
 		children: i.children
 	});
 }

package/dist/components/custom-select/custom-select.js

@@ -345,13 +345,13 @@ function v(d, v) {
 		"data-custom-validity": N,
 		"data-width": d.formFieldWidth,
 		"data-variant": d.variant === "floating" && d.selectedType === "tag" && d.multiple ? "above" : d.variant,
-		"data-required": a(d.required),
+		"data-required": a(d.required, "required"),
 		"data-hide-asterisk": ee(d.showRequiredAsterisk),
 		"data-placement": d.placement,
 		"data-selected-type": d.multiple ? d.selectedType : "text",
 		"data-hide-label": ee(d.showLabel),
 		"data-icon": d.icon,
-		"data-show-icon": a(d.showIcon),
+		"data-show-icon": a(d.showIcon, "showIcon"),
 		children: [
 			/* @__PURE__ */ _("label", {
 				id: M,
@@ -383,11 +383,11 @@ function v(d, v) {
 				children: [d.children, d.options ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("summary", {
 					className: "db-custom-select-form-field",
 					id: De,
-					"aria-disabled": a(d.disabled),
+					"aria-disabled": a(d.disabled, "disabled"),
 					tabIndex: d.disabled ? -1 : void 0,
 					"aria-labelledby": M,
 					children: [F?.length ? /* @__PURE__ */ _("span", {
-						"data-visually-hidden": a(d.selectedType === "tag"),
+						"data-visually-hidden": a(d.selectedType === "tag", "selectedType"),
 						id: L,
 						children: [d.selectedPrefix ? /* @__PURE__ */ g("span", {
 							"data-visually-hidden": "true",
@@ -476,7 +476,7 @@ function v(d, v) {
 			}) : null,
 			/* @__PURE__ */ g("span", {
 				className: "db-custom-select-placeholder",
-				"aria-hidden": a(!0),
+				"aria-hidden": "true",
 				id: ke,
 				children: d.placeholder ?? d.label
 			}),

package/dist/components/custom-select-list-item/custom-select-list-item.js

@@ -63,10 +63,10 @@ function f(a, f) {
 			"db-checkbox": a.type === "checkbox" && !a.isGroupTitle,
 			"db-radio": a.type !== "checkbox" && !a.isGroupTitle
 		}),
-		"data-divider": i(m),
+		"data-divider": i(m, "hasDivider"),
 		children: a.isGroupTitle ? /* @__PURE__ */ u("span", { children: a.groupTitle }) : /* @__PURE__ */ d("label", {
 			"data-icon": a.type !== "checkbox" && a.icon ? a.icon : void 0,
-			"data-show-icon": i(a.showIcon),
+			"data-show-icon": i(a.showIcon, "showIcon"),
 			"data-icon-trailing": _(),
 			children: [
 				/* @__PURE__ */ u("input", {

package/dist/components/drawer/drawer.js

@@ -93,7 +93,7 @@ function h(c, h) {
 			"data-spacing": c.spacing,
 			"data-width": c.width,
 			"data-direction": c.direction,
-			"data-rounded": a(c.rounded),
+			"data-rounded": a(c.rounded, "rounded"),
 			children: [/* @__PURE__ */ m("header", {
 				className: "db-drawer-header",
 				children: [/* @__PURE__ */ p("div", {

package/dist/components/infotext/infotext.js

@@ -54,8 +54,8 @@ function l(i, l) {
 		"data-icon": i.icon,
 		"data-semantic": i.semantic,
 		"data-size": i.size,
-		"data-wrap": r(i.wrap),
-		"data-show-icon-leading": r(i.showIcon ?? !0),
+		"data-wrap": r(i.wrap, "wrap"),
+		"data-show-icon-leading": r(i.showIcon ?? !0, "showIcon"),
 		children: [i.text ? /* @__PURE__ */ s(o, { children: i.text }) : null, i.children]
 	});
 }

package/dist/components/input/input.js

@@ -88,11 +88,11 @@ function E(y, E) {
 		className: n("db-input", y.className),
 		"data-variant": y.variant,
 		"data-hide-label": o(y.showLabel),
-		"data-show-icon": a(y.showIconLeading ?? y.showIcon),
+		"data-show-icon": a(y.showIconLeading, "showIconLeading") || a(y.showIcon, "showIcon"),
 		"data-icon": y.iconLeading ?? y.icon,
 		"data-icon-trailing": y.iconTrailing,
 		"data-hide-asterisk": o(y.showRequiredAsterisk),
-		"data-show-icon-trailing": a(y.showIconTrailing),
+		"data-show-icon-trailing": a(y.showIconTrailing, "showIconTrailing"),
 		children: [
 			/* @__PURE__ */ w("label", {
 				htmlFor: k,

package/dist/components/link/link.js

@@ -57,13 +57,13 @@ function l(i, l) {
 		role: i.role,
 		referrerPolicy: i.referrerpolicy ?? i.referrerPolicy,
 		hrefLang: i.hreflang,
-		"aria-disabled": r(i.disabled),
+		"aria-disabled": r(i.disabled, "disabled"),
 		tabIndex: i.disabled ? -1 : 0,
 		"data-size": i.size,
-		"data-show-icon-trailing": r(i.showIcon ?? !0),
+		"data-show-icon-trailing": r(i.showIcon ?? !0, "showIcon"),
 		"data-variant": i.variant,
 		"data-content": i.content || "internal",
-		"data-wrap": r(i.wrap),
+		"data-wrap": r(i.wrap, "wrap"),
 		children: [i.text ? /* @__PURE__ */ s(o, { children: i.text }) : null, i.children]
 	});
 }

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

@@ -82,10 +82,10 @@ function g(c, g) {
 		className: n("db-navigation-item", c.className),
 		"data-width": c.width,
 		"data-icon": c.icon,
-		"data-show-icon": a(c.showIcon),
+		"data-show-icon": a(c.showIcon, "showIcon"),
 		"data-active": c.active,
-		"data-wrap": a(c.wrap),
-		"aria-disabled": a(c.disabled),
+		"data-wrap": a(c.wrap, "wrap"),
+		"aria-disabled": a(c.disabled, "disabled"),
 		children: !i(c.hideSubNavigation, "hideSubNavigation") && C ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
 			className: "db-navigation-item-expand-button",
 			id: N,

package/dist/components/notification/notification.js

@@ -67,7 +67,7 @@ function p(c, p) {
 		"data-semantic": c.semantic,
 		"data-variant": c.variant,
 		"data-icon": r(c.showIcon) === !1 ? void 0 : c.icon,
-		"data-show-icon": i(c.showIcon),
+		"data-show-icon": i(c.showIcon, "showIcon"),
 		"data-link-variant": c.linkVariant,
 		children: [
 			/* @__PURE__ */ d(u, { children: c.image }),

package/dist/components/page/page.js

@@ -59,8 +59,8 @@ function d(i, d) {
 		]),
 		className: n("db-page", i.className),
 		"data-variant": i.variant,
-		"data-fade-in": r(i.fadeIn),
-		"data-fonts-loaded": r(p),
+		"data-fade-in": r(i.fadeIn, "fadeIn"),
+		"data-fonts-loaded": r(p, "fontsLoaded"),
 		children: [
 			/* @__PURE__ */ l(c, { children: i.header }),
 			/* @__PURE__ */ l("main", {

package/dist/components/popover/popover.js

@@ -113,9 +113,9 @@ function m(s, m) {
 		children: [/* @__PURE__ */ f(d, { children: s.trigger }), /* @__PURE__ */ f("article", {
 			className: "db-popover-content",
 			"data-spacing": s.spacing,
-			"data-gap": i(s.gap),
-			"data-animation": i(s.animation ?? !0),
-			"data-open": i(s.open),
+			"data-gap": i(s.gap, "gap"),
+			"data-animation": i(s.animation ?? !0, "animation"),
+			"data-open": i(s.open, "open"),
 			"data-delay": s.delay,
 			"data-width": s.width,
 			"data-placement": s.placement,

package/dist/components/select/select.js

@@ -92,7 +92,7 @@ function C(g, C) {
 		"data-hide-label": o(g.showLabel),
 		"data-hide-asterisk": o(g.showRequiredAsterisk),
 		"data-icon": g.icon,
-		"data-show-icon": a(g.showIcon),
+		"data-show-icon": a(g.showIcon, "showIcon"),
 		children: [
 			/* @__PURE__ */ x("label", {
 				htmlFor: E,
@@ -140,7 +140,7 @@ function C(g, C) {
 				children: [g.variant === "floating" || g.placeholder ? /* @__PURE__ */ x("option", {
 					className: "placeholder",
 					value: "",
-					"data-show-empty-option": a(ie())
+					"data-show-empty-option": a(ie(), "showEmptyOption")
 				}) : null, g.options?.length ? /* @__PURE__ */ x(b, { children: g.options?.map((e) => e.options ? /* @__PURE__ */ x("optgroup", {
 					label: Q(e),
 					children: e.options?.map((e) => /* @__PURE__ */ x("option", {

package/dist/components/stack/stack.js

@@ -56,7 +56,7 @@ function s(i, s) {
 		"data-direction": i.direction,
 		"data-alignment": i.alignment,
 		"data-justify-content": i.justifyContent,
-		"data-wrap": r(i.wrap),
+		"data-wrap": r(i.wrap, "wrap"),
 		children: i.children
 	});
 }

package/dist/components/switch/switch.js

@@ -76,7 +76,7 @@ function S(m, S) {
 	}, [w.current]), h(() => () => {
 		z?.abort();
 	}, []), /* @__PURE__ */ x("div", {
-		"data-visual-aid": a(m.visualAid),
+		"data-visual-aid": a(m.visualAid, "visualAid"),
 		"data-size": m.size,
 		"data-hide-label": o(m.showLabel),
 		"data-variant": m.variant,

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

@@ -60,9 +60,9 @@ function f(a, f) {
 			htmlFor: a.id ?? a.propOverrides?.id,
 			"data-icon": a.iconLeading ?? a.icon,
 			"data-icon-trailing": a.iconTrailing,
-			"data-show-icon": i(a.showIconLeading ?? a.showIcon),
-			"data-show-icon-trailing": i(a.showIconTrailing),
-			"data-no-text": i(a.noText),
+			"data-show-icon": i(a.showIconLeading, "showIconLeading") || i(a.showIcon, "showIcon"),
+			"data-show-icon-trailing": i(a.showIconTrailing, "showIconTrailing"),
+			"data-no-text": i(a.noText, "noText"),
 			children: [
 				/* @__PURE__ */ u("input", {
 					type: "radio",

package/dist/components/table/examples/data.d.ts

@@ -0,0 +1,9 @@
+import type { DBTableData } from '../model';
+export declare const defaultTable: DBTableData;
+export declare const horizontalAlignmentStartTable: DBTableData;
+export declare const horizontalAlignmentCenterTable: DBTableData;
+export declare const horizontalAlignmentEndTable: DBTableData;
+export declare const subHeaderEmphasisNoneTable: DBTableData;
+export declare const subHeaderEmphasisWeakTable: DBTableData;
+export declare const subHeaderEmphasisStrongTable: DBTableData;
+export declare const overflowTable: DBTableData;

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

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

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

@@ -0,0 +1,74 @@
+import type { GlobalProps, GlobalState, WidthProps } from '../../shared/model';
+import type { DBTableRowDefaultProps } from '../table-row/model';
+export declare const DBTableRowSizeList: readonly ["x-small", "small", "medium", "large"];
+export type DBTableRowSizeType = (typeof DBTableRowSizeList)[number];
+export declare const DBTableVariantList: readonly ["flat", "zebra", "spaced"];
+export type DBTableVariantType = (typeof DBTableVariantList)[number];
+export declare const DBTableDividerList: readonly ["none", "both", "horizontal", "vertical"];
+export type DBTableDividerType = (typeof DBTableDividerList)[number];
+export declare const DBTableMobileVariantList: readonly ["table", "list"];
+export type DBTableMobileVariantType = (typeof DBTableMobileVariantList)[number];
+export declare const DBTableStickyHeaderList: readonly ["none", "both", "horizontal", "vertical"];
+export type DBTableStickyHeaderType = (typeof DBTableStickyHeaderList)[number];
+export type DBTableData = {
+    header?: DBTableRowDefaultProps[];
+    body?: DBTableRowDefaultProps[];
+    footer?: DBTableRowDefaultProps[];
+};
+export declare const DBTableColumnsSizeList: readonly ["auto", "1fr", "min-content", "max-content"];
+export type DBTableColumnsSizeType = (typeof DBTableColumnsSizeList)[number];
+export type DBTableDefaultProps = {
+    /**
+     * Slot for table caption
+     */
+    caption?: any;
+    /**
+     * String alternative for table caption slot
+     */
+    captionPlain?: string;
+    /**
+     * Table data if you don't use default slot/children
+     */
+    data?: DBTableData | string;
+    /**
+     * Show the divider between the rows and cells
+     */
+    divider?: DBTableDividerType;
+    /**
+     * Show caption above table default is hidden
+     */
+    showCaption?: boolean | string;
+    /**
+     * Size of the table rows
+     */
+    size?: DBTableRowSizeType;
+    /**
+     * Change the layout of the table
+     * spaced: card style table
+     * flat: classic table
+     */
+    variant?: DBTableVariantType;
+    /**
+     * Change the layout of the table on mobile
+     * list: list style
+     * table: classic table
+     */
+    mobileVariant?: DBTableMobileVariantType;
+    /**
+     * Change the header cells to be sticky when scrolling the table
+     */
+    stickyHeader?: DBTableStickyHeaderType;
+    /**
+     * Set the width of the columns based in their index.
+     * Alternative: Use `--db-table-column-size-$index` inside CSS to control it.
+     * See: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns
+     */
+    columnSizes?: Record<number, DBTableColumnsSizeType | string>;
+};
+export type DBTableProps = DBTableDefaultProps & GlobalProps & WidthProps;
+export type DBTableDefaultState = {
+    _data?: DBTableData;
+    _style?: any;
+    convertData: () => DBTableData;
+};
+export type DBTableState = DBTableDefaultState & GlobalState;

package/dist/components/table/model.js

@@ -0,0 +1,28 @@
+//#region src/components/table/model.ts
+var e = [
+	"x-small",
+	"small",
+	"medium",
+	"large"
+], t = [
+	"flat",
+	"zebra",
+	"spaced"
+], n = [
+	"none",
+	"both",
+	"horizontal",
+	"vertical"
+], r = ["table", "list"], i = [
+	"none",
+	"both",
+	"horizontal",
+	"vertical"
+], a = [
+	"auto",
+	"1fr",
+	"min-content",
+	"max-content"
+];
+//#endregion
+export { a as DBTableColumnsSizeList, n as DBTableDividerList, r as DBTableMobileVariantList, e as DBTableRowSizeList, i as DBTableStickyHeaderList, t as DBTableVariantList };

package/dist/components/table/table.d.ts

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

package/dist/components/table/table.js

@@ -0,0 +1,113 @@
+"use client";
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n, delay as r, getBooleanAsString as i } from "../../utils/index.js";
+import a from "../table-body/table-body.js";
+import o from "../table-footer/table-footer.js";
+import s from "../table-head/table-head.js";
+import { forwardRef as c, useEffect as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/table/table.tsx
+function h(c, h) {
+	let g = h || u(void 0), [_, v] = d(() => void 0), [y, b] = d(() => void 0);
+	function x() {
+		try {
+			return typeof c.data == "string" ? JSON.parse(c.data) : c.data;
+		} catch (e) {
+			console.error(e);
+		}
+		return {};
+	}
+	return l(() => {
+		c.data ? v(x()) : v(void 0);
+	}, [c.data]), l(() => {
+		g.current && c.mobileVariant === "list" && r(() => {
+			let e = g.current;
+			if (!e) return;
+			let t = e.querySelectorAll("thead tr th");
+			t.length && e.querySelectorAll(":is(tbody,tfoot) tr").forEach((e) => {
+				e.querySelectorAll(":is(td,th)").forEach((e, n) => {
+					let r = t[n];
+					if (r) {
+						let t = Array.from(r.childNodes).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent?.trim()).filter(Boolean).join(" ");
+						t && (e.dataset.header = t);
+					}
+				});
+			});
+		}, 1);
+	}, [
+		c.mobileVariant,
+		g.current,
+		_
+	]), l(() => {
+		if (c.columnSizes) {
+			let e = {};
+			Object.entries(c.columnSizes).forEach(([t, n]) => {
+				e[`--db-table-column-size-${t}`] = n;
+			}), b(e);
+		} else b(void 0);
+	}, [c.columnSizes]), /* @__PURE__ */ p("div", {
+		...t(c, [
+			"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-table", c.className),
+		style: y,
+		"data-width": c.width,
+		"data-size": c.size,
+		"data-divider": c.divider,
+		"data-variant": c.variant,
+		"data-mobile-variant": c.mobileVariant,
+		"data-show-caption": i(c.showCaption),
+		"data-sticky-header": c.stickyHeader,
+		children: /* @__PURE__ */ m("table", {
+			ref: g,
+			...e(c, [
+				"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: c.id,
+			children: [c.captionPlain ? /* @__PURE__ */ p("caption", { children: c.captionPlain }) : /* @__PURE__ */ p(f, { children: /* @__PURE__ */ p(f, { children: c.caption }) }), _ ? /* @__PURE__ */ m(f, { children: [
+				_?.header ? /* @__PURE__ */ p(s, { rows: _?.header }) : null,
+				_?.body ? /* @__PURE__ */ p(a, { rows: _?.body }) : null,
+				_?.footer ? /* @__PURE__ */ p(o, { rows: _?.footer }) : null
+			] }) : /* @__PURE__ */ p(f, { children: c.children })]
+		})
+	});
+}
+var g = c(h);
+//#endregion
+export { g as default };

package/dist/components/table-body/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTableBody } from './table-body';

package/dist/components/table-body/model.d.ts

@@ -0,0 +1,8 @@
+import type { GlobalProps, GlobalState } from '../../shared/model';
+import type { DBTableRowProps } from '../table-row/model';
+export type DBTableBodyDefaultProps = {
+    rows?: DBTableRowProps[];
+};
+export type DBTableBodyProps = DBTableBodyDefaultProps & GlobalProps;
+export type DBTableBodyDefaultState = {};
+export type DBTableBodyState = DBTableBodyDefaultState & GlobalState;

package/dist/components/table-body/table-body.d.ts

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

package/dist/components/table-body/table-body.js

@@ -0,0 +1,66 @@
+"use client";
+import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
+import { cls as n } from "../../utils/index.js";
+import r from "../table-row/table-row.js";
+import { forwardRef as i, useId as a, useRef as o } from "react";
+import { Fragment as s, jsx as c } from "react/jsx-runtime";
+//#region src/components/table-body/table-body.tsx
+function l(i, l) {
+	let u = a();
+	return /* @__PURE__ */ c("tbody", {
+		ref: l || o(void 0),
+		...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,
+		...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-table-body", i.className),
+		children: i.rows ? /* @__PURE__ */ c(s, { children: i.rows?.map((e, t) => /* @__PURE__ */ c(r, {
+			cells: e.cells,
+			className: e.className ?? e.class,
+			interactive: e.interactive,
+			id: e.id
+		}, `${e.id ?? i.id ?? u}-table-body-row-${t}`)) }) : /* @__PURE__ */ c(s, { children: i.children })
+	});
+}
+var u = i(l);
+//#endregion
+export { u as default };

package/dist/components/table-caption/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTableCaption } from './table-caption';

package/dist/components/table-caption/model.d.ts

@@ -0,0 +1,5 @@
+import type { GlobalProps, GlobalState } from '../../shared/model';
+export type DBTableCaptionDefaultProps = {};
+export type DBTableCaptionProps = DBTableCaptionDefaultProps & GlobalProps;
+export type DBTableCaptionDefaultState = {};
+export type DBTableCaptionState = DBTableCaptionDefaultState & GlobalState;

package/dist/components/table-caption/table-caption.d.ts

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