@dbcdk/react-components 0.0.97 → 0.0.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/components/page/Page.d.ts +2 -1
  2. package/dist/components/page-layout/PageLayout.d.ts +0 -2
  3. package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.d.ts +1 -12
  4. package/dist/components/skeleton-loader/SkeletonLoader.d.ts +1 -1
  5. package/dist/components/tabs/Tabs.d.ts +2 -1
  6. package/dist/constants/chart-colors.d.ts +2 -0
  7. package/dist/constants/chart-colors.types.d.ts +3 -0
  8. package/dist/index.cjs +1609 -1529
  9. package/dist/index.css +8 -73
  10. package/dist/index.d.ts +2 -0
  11. package/dist/index.js +1609 -1530
  12. package/dist/styles/styles.css +6 -1
  13. package/dist/styles/themes/dbc/colors.css +14 -6
  14. package/dist/styles/themes/forfatterweb/light.css +17 -0
  15. package/dist/styles.css +6 -1
  16. package/dist/tanstack.cjs +2 -16
  17. package/dist/tanstack.js +2 -16
  18. package/package.json +1 -1
package/dist/styles/styles.css CHANGED
@@ -113,10 +113,15 @@ body.dbc-app {
113
113
  word-break: break-word;
114
114
  }
115
115
 
116
- .dbc-table--hover tr:hover {
116
+ .dbc-table--hover tbody tr:hover {
117
117
  background-color: var(--color-bg-contextual);
118
118
  }
119
119
 
120
+ .dbc-table--clickableRow tbody tr:hover {
121
+ background-color: var(--color-bg-contextual);
122
+ cursor: pointer;
123
+ }
124
+
120
125
  .dbc-table--striped tbody tr:nth-child(even) {
121
126
  background-color: var(--table-row-bg-alt);
122
127
  }
package/dist/styles/themes/dbc/colors.css CHANGED
@@ -147,12 +147,20 @@ html {
147
147
  /* Chart colors */
148
148
  --color-chart-empty: color-mix(in srgb, var(--color-fg-muted) 15%, rgb(255 255 255 / 0));
149
149
  --color-chart-neutral: color-mix(in srgb, var(--color-fg-muted) 25%, rgb(255 255 255 / 0));
150
- --color-chart-blue: color-mix(in srgb, var(--dbc-blue-500) 75%, rgb(255 255 255 / 0));
151
- --color-chart-green: color-mix(in srgb, var(--dbc-green-500) 75%, rgb(255 255 255 / 0));
152
- --color-chart-amber: color-mix(in srgb, var(--dbc-amber-400) 75%, rgb(255 255 255 / 0));
153
- --color-chart-pink: color-mix(in srgb, var(--dbc-pink-500) 75%, rgb(255 255 255 / 0));
154
- --color-chart-sky: color-mix(in srgb, var(--dbc-info-500) 75%, rgb(255 255 255 / 0));
155
- --color-chart-red: color-mix(in srgb, var(--dbc-red-600) 75%, rgb(255 255 255 / 0));
150
+ --color-chart-primary: color-mix(in srgb, var(--dbc-blue-500) 75%, rgb(255 255 255 / 0));
151
+ --color-chart-success: color-mix(in srgb, var(--dbc-green-500) 75%, rgb(255 255 255 / 0));
152
+ --color-chart-warning: color-mix(in srgb, var(--dbc-amber-400) 75%, rgb(255 255 255 / 0));
153
+ --color-chart-brand: color-mix(in srgb, var(--dbc-pink-500) 75%, rgb(255 255 255 / 0));
154
+ --color-chart-info: color-mix(in srgb, var(--dbc-info-500) 75%, rgb(255 255 255 / 0));
155
+ --color-chart-error: color-mix(in srgb, var(--dbc-red-600) 75%, rgb(255 255 255 / 0));
156
+
157
+ /* Legacy aliases */
158
+ --color-chart-blue: var(--color-chart-primary);
159
+ --color-chart-green: var(--color-chart-success);
160
+ --color-chart-amber: var(--color-chart-warning);
161
+ --color-chart-pink: var(--color-chart-brand);
162
+ --color-chart-sky: var(--color-chart-info);
163
+ --color-chart-red: var(--color-chart-error);
156
164
 
157
165
  /* Disabled */
158
166
  --color-disabled-bg: var(--dbc-neutral-100);
package/dist/styles/themes/forfatterweb/light.css CHANGED
@@ -30,6 +30,23 @@
30
30
  --color-error: #dc2626;
31
31
  --color-info: #0ea5e9;
32
32
 
33
+ --color-chart-empty: color-mix(in srgb, var(--color-text-muted) 15%, rgb(255 255 255 / 0));
34
+ --color-chart-neutral: color-mix(in srgb, var(--color-text-muted) 25%, rgb(255 255 255 / 0));
35
+ --color-chart-primary: color-mix(in srgb, var(--color-primary) 75%, rgb(255 255 255 / 0));
36
+ --color-chart-success: color-mix(in srgb, var(--color-success) 75%, rgb(255 255 255 / 0));
37
+ --color-chart-warning: color-mix(in srgb, var(--color-warning) 75%, rgb(255 255 255 / 0));
38
+ --color-chart-brand: color-mix(in srgb, var(--color-accent) 75%, rgb(255 255 255 / 0));
39
+ --color-chart-info: color-mix(in srgb, var(--color-info) 75%, rgb(255 255 255 / 0));
40
+ --color-chart-error: color-mix(in srgb, var(--color-error) 75%, rgb(255 255 255 / 0));
41
+
42
+ /* Legacy aliases */
43
+ --color-chart-blue: var(--color-chart-primary);
44
+ --color-chart-green: var(--color-chart-success);
45
+ --color-chart-amber: var(--color-chart-warning);
46
+ --color-chart-pink: var(--color-chart-brand);
47
+ --color-chart-sky: var(--color-chart-info);
48
+ --color-chart-red: var(--color-chart-error);
49
+
33
50
  --opac-bg-light: rgba(0, 0, 0, 0.025);
34
51
  --opac-bg-default: rgba(0, 0, 0, 0.05);
35
52
  --opac-bg-dark: rgba(0, 0, 0, 0.1);
package/dist/styles.css CHANGED
@@ -113,10 +113,15 @@ body.dbc-app {
113
113
  word-break: break-word;
114
114
  }
115
115
 
116
- .dbc-table--hover tr:hover {
116
+ .dbc-table--hover tbody tr:hover {
117
117
  background-color: var(--color-bg-contextual);
118
118
  }
119
119
 
120
+ .dbc-table--clickableRow tbody tr:hover {
121
+ background-color: var(--color-bg-contextual);
122
+ cursor: pointer;
123
+ }
124
+
120
125
  .dbc-table--striped tbody tr:nth-child(even) {
121
126
  background-color: var(--table-row-bg-alt);
122
127
  }
package/dist/tanstack.cjs CHANGED
@@ -1891,24 +1891,10 @@ function SkeletonLoaderItem({
1891
1891
  }
1892
1892
  );
1893
1893
  }
1894
- function getColumnWidth(column) {
1895
- if (typeof column.width === "number" && column.width < 150) {
1896
- return "100%";
1897
- }
1898
- if (typeof column.width === "string" && column.width.endsWith("px")) {
1899
- const px = parseInt(column.width, 10);
1900
- if (!isNaN(px) && px < 150) {
1901
- return "100%";
1902
- }
1903
- }
1904
- const percent = Math.floor(Math.random() * (90 - 50 + 1)) + 50;
1905
- return `${percent}%`;
1906
- }
1907
1894
  function TableLoadingBody({ rows, columns, hasSelection }) {
1908
- const widths = Array.from({ length: rows }, () => columns.map(getColumnWidth));
1909
1895
  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: Table_default.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: Table_default.row, children: [
1910
1896
  hasSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: cx2(Table_default.cell, Table_default.selectionCell), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
1911
- columns.map((column, columnIndex) => {
1897
+ columns.map((column) => {
1912
1898
  var _a;
1913
1899
  return /* @__PURE__ */ jsxRuntime.jsx(
1914
1900
  "td",
@@ -1920,7 +1906,7 @@ function TableLoadingBody({ rows, columns, hasSelection }) {
1920
1906
  ),
1921
1907
  "data-align": (_a = column.align) != null ? _a : "left",
1922
1908
  "data-divider": column.divider,
1923
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellValueEllipsis, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem, { height: 16, width: widths[rowIndex][columnIndex] }) }) })
1909
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellValueEllipsis, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
1924
1910
  },
1925
1911
  column.id
1926
1912
  );
package/dist/tanstack.js CHANGED
@@ -1870,24 +1870,10 @@ function SkeletonLoaderItem({
1870
1870
  }
1871
1871
  );
1872
1872
  }
1873
- function getColumnWidth(column) {
1874
- if (typeof column.width === "number" && column.width < 150) {
1875
- return "100%";
1876
- }
1877
- if (typeof column.width === "string" && column.width.endsWith("px")) {
1878
- const px = parseInt(column.width, 10);
1879
- if (!isNaN(px) && px < 150) {
1880
- return "100%";
1881
- }
1882
- }
1883
- const percent = Math.floor(Math.random() * (90 - 50 + 1)) + 50;
1884
- return `${percent}%`;
1885
- }
1886
1873
  function TableLoadingBody({ rows, columns, hasSelection }) {
1887
- const widths = Array.from({ length: rows }, () => columns.map(getColumnWidth));
1888
1874
  return /* @__PURE__ */ jsx("tbody", { className: Table_default.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxs("tr", { className: Table_default.row, children: [
1889
1875
  hasSelection ? /* @__PURE__ */ jsx("td", { className: cx2(Table_default.cell, Table_default.selectionCell), children: /* @__PURE__ */ jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
1890
- columns.map((column, columnIndex) => {
1876
+ columns.map((column) => {
1891
1877
  var _a;
1892
1878
  return /* @__PURE__ */ jsx(
1893
1879
  "td",
@@ -1899,7 +1885,7 @@ function TableLoadingBody({ rows, columns, hasSelection }) {
1899
1885
  ),
1900
1886
  "data-align": (_a = column.align) != null ? _a : "left",
1901
1887
  "data-divider": column.divider,
1902
- children: /* @__PURE__ */ jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 16, width: widths[rowIndex][columnIndex] }) }) })
1888
+ children: /* @__PURE__ */ jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
1903
1889
  },
1904
1890
  column.id
1905
1891
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.97",
3
+ "version": "0.0.98",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",