@db-ux/react-core-components 4.11.1 → 4.12.1

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

@@ -1,62 +1,11 @@
 "use client";
-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/tab-list/tab-list.tsx
-function o(r, o) {
-	return /* @__PURE__ */ a("div", {
-		ref: o || i(o),
-		...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-tab-list", r.className),
-		children: /* @__PURE__ */ a("ul", {
-			role: "tablist",
-			children: r.children
-		})
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils/index.js";
+function DBTabListFn(props, component) {
+    const _ref = component || useRef(component);
+    return (_jsx("div", { 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: props.id ?? props.propOverrides?.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-tab-list", props.className), children: _jsx("ul", { role: "tablist", children: props.children }) }));
 }
-var s = r(o);
-//#endregion
-export { s as default };
+const DBTabList = forwardRef(DBTabListFn);
+export default DBTabList;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { GlobalProps, GlobalState } from '../../shared/model';
+import type { GlobalProps, GlobalState } from '../../shared/model.js';
 export type DBTabPanelDefaultProps = {
     /**
      * The content if you don't want to use children.

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

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

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

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

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

@@ -1,61 +1,12 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n } from "../../utils/index.js";
-import { forwardRef as r, useEffect as i, useRef as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/tab-panel/tab-panel.tsx
-function l(r, l) {
-	let u = l || a(l);
-	return i(() => {}, []), /* @__PURE__ */ c("section", {
-		role: "tabpanel",
-		ref: u,
-		...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"
-		]),
-		...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-tab-panel", r.className),
-		id: r.id ?? r.propOverrides?.id,
-		children: [r.content ? /* @__PURE__ */ s(o, { children: r.content }) : null, r.children]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useRef, useEffect, forwardRef } from "react";
+import { cls } from "../../utils/index.js";
+function DBTabPanelFn(props, component) {
+    const _ref = component || useRef(component);
+    useEffect(() => { }, []);
+    return (_jsxs("section", { 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", "data-density"]), ...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-tab-panel", props.className), id: props.id ?? props.propOverrides?.id, children: [props.content ? _jsx(_Fragment, { children: props.content }) : null, props.children] }));
 }
-var u = r(l);
-//#endregion
-export { u as default };
+const DBTabPanel = forwardRef(DBTabPanelFn);
+export default DBTabPanel;

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

@@ -1,4 +1,4 @@
-import type { DBTableData } from '../model';
+import type { DBTableData } from '../model.js';
 export declare const defaultTable: DBTableData;
 export declare const horizontalAlignmentStartTable: DBTableData;
 export declare const horizontalAlignmentCenterTable: DBTableData;

package/dist/components/table/examples/data.js

@@ -0,0 +1,258 @@
+const defaultHeader = [{
+        cells: [{
+                content: 'A',
+                scope: 'col'
+            }, {
+                content: 'B',
+                scope: 'col'
+            }, {
+                content: 'C',
+                scope: 'col'
+            }]
+    }];
+const defaultBody = [{
+        cells: [{
+                content: '1',
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: '2'
+            }, {
+                content: '3'
+            }]
+    }, {
+        cells: [{
+                content: '4',
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: '5'
+            }, {
+                content: '6'
+            }]
+    }, {
+        cells: [{
+                content: '7',
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: '8'
+            }, {
+                content: '9'
+            }]
+    }];
+const defaultFooter = [{
+        cells: [{
+                content: 'Footer 1',
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: 'Footer 2',
+                colSpan: 2
+            }]
+    }];
+export const defaultTable = {
+    header: defaultHeader,
+    body: defaultBody,
+    footer: defaultFooter
+};
+export const horizontalAlignmentStartTable = {
+    header: [{
+            cells: [{
+                    content: 'A',
+                    horizontalAlignment: 'start',
+                    scope: 'col'
+                }, {
+                    content: 'B',
+                    horizontalAlignment: 'start',
+                    colSpan: 2,
+                    scope: 'col'
+                }]
+        }],
+    body: [{
+            cells: [{
+                    content: '1',
+                    headerCell: true,
+                    horizontalAlignment: 'start',
+                    scope: 'row'
+                }, {
+                    content: '2',
+                    horizontalAlignment: 'start'
+                }, {
+                    content: '3',
+                    horizontalAlignment: 'start'
+                }]
+        }]
+};
+export const horizontalAlignmentCenterTable = {
+    header: [{
+            cells: [{
+                    content: 'A',
+                    horizontalAlignment: 'center',
+                    scope: 'col'
+                }, {
+                    content: 'B',
+                    horizontalAlignment: 'center',
+                    colSpan: 2,
+                    scope: 'col'
+                }]
+        }],
+    body: [{
+            cells: [{
+                    content: '1',
+                    headerCell: true,
+                    horizontalAlignment: 'center',
+                    scope: 'row'
+                }, {
+                    content: '2',
+                    horizontalAlignment: 'center'
+                }, {
+                    content: '3',
+                    horizontalAlignment: 'center'
+                }]
+        }]
+};
+export const horizontalAlignmentEndTable = {
+    header: [{
+            cells: [{
+                    content: 'A',
+                    horizontalAlignment: 'end',
+                    scope: 'col'
+                }, {
+                    content: 'B',
+                    horizontalAlignment: 'end',
+                    colSpan: 2,
+                    scope: 'col'
+                }]
+        }],
+    body: [{
+            cells: [{
+                    content: '1',
+                    headerCell: true,
+                    horizontalAlignment: 'end',
+                    scope: 'row'
+                }, {
+                    content: '2',
+                    horizontalAlignment: 'end'
+                }, {
+                    content: '3',
+                    horizontalAlignment: 'end'
+                }]
+        }]
+};
+export const subHeaderEmphasisNoneTable = {
+    header: [...defaultHeader, {
+            cells: [{
+                    content: 'Sub A',
+                    scope: 'col'
+                }, {
+                    content: 'Sub B',
+                    scope: 'col'
+                }, {
+                    content: 'Sub C',
+                    scope: 'col'
+                }]
+        }],
+    body: defaultBody,
+    footer: defaultFooter
+};
+export const subHeaderEmphasisWeakTable = {
+    header: [...defaultHeader, {
+            subHeaderEmphasis: 'weak',
+            cells: [{
+                    content: 'Sub A',
+                    scope: 'col'
+                }, {
+                    content: 'Sub B',
+                    scope: 'col'
+                }, {
+                    content: 'Sub C',
+                    scope: 'col'
+                }]
+        }],
+    body: defaultBody,
+    footer: defaultFooter
+};
+export const subHeaderEmphasisStrongTable = {
+    header: [...defaultHeader, {
+            subHeaderEmphasis: 'strong',
+            cells: [{
+                    content: 'Sub A',
+                    scope: 'col'
+                }, {
+                    content: 'Sub B',
+                    scope: 'col'
+                }, {
+                    content: 'Sub C',
+                    scope: 'col'
+                }]
+        }],
+    body: defaultBody,
+    footer: defaultFooter
+};
+export const overflowTable = {
+    header: [{
+            cells: [{
+                    content: 'A',
+                    scope: 'col'
+                }, {
+                    content: 'B',
+                    scope: 'col'
+                }, {
+                    content: 'C',
+                    scope: 'col'
+                }, {
+                    content: 'D',
+                    scope: 'col'
+                }, {
+                    content: 'E',
+                    scope: 'col'
+                }, {
+                    content: 'F',
+                    scope: 'col'
+                }, {
+                    link: {
+                        text: 'G',
+                        href: '#'
+                    },
+                    scope: 'col'
+                }]
+        }],
+    body: Array.from({
+        length: 20
+    }, (_, i) => ({
+        cells: [{
+                content: `Row ${i + 1}`,
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: `Data ${i + 1}-B`
+            }, {
+                content: `Data ${i + 1}-C`
+            }, {
+                content: `Data ${i + 1}-D`
+            }, {
+                content: `Data ${i + 1}-E`
+            }, {
+                content: `Data ${i + 1}-F`
+            }, {
+                link: {
+                    text: `Data ${i + 1}-G`,
+                    href: '#'
+                }
+            }]
+    })),
+    footer: [{
+            cells: [{
+                    content: 'Footer 1',
+                    headerCell: true,
+                    scope: 'row'
+                }, {
+                    link: {
+                        text: 'Footer 2',
+                        href: '#'
+                    },
+                    colSpan: 6
+                }]
+        }]
+};

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

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

package/dist/components/table/index.js

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

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

@@ -1,5 +1,5 @@
-import type { GlobalProps, GlobalState, WidthProps } from '../../shared/model';
-import type { DBTableRowDefaultProps } from '../table-row/model';
+import type { GlobalProps, GlobalState, WidthProps } from '../../shared/model.js';
+import type { DBTableRowDefaultProps } from '../table-row/model.js';
 export declare const DBTableRowSizeList: readonly ["x-small", "small", "medium", "large"];
 export type DBTableRowSizeType = (typeof DBTableRowSizeList)[number];
 export declare const DBTableVariantList: readonly ["flat", "zebra", "spaced"];

package/dist/components/table/model.js

@@ -1,28 +1,6 @@
-//#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 };
+export const DBTableRowSizeList = ['x-small', 'small', 'medium', 'large'];
+export const DBTableVariantList = ['flat', 'zebra', 'spaced'];
+export const DBTableDividerList = ['none', 'both', 'horizontal', 'vertical'];
+export const DBTableMobileVariantList = ['table', 'list'];
+export const DBTableStickyHeaderList = ['none', 'both', 'horizontal', 'vertical'];
+export const DBTableColumnsSizeList = ['auto', '1fr', 'min-content', 'max-content'];

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

@@ -1,3 +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>>;
+declare const DBTable: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps | "width" | keyof import("./model.js").DBTableDefaultProps> & import("./model.js").DBTableDefaultProps & import("../../index.js").GlobalProps & import("../../index.js").WidthProps & React.RefAttributes<any>>;
 export default DBTable;