@umami/react-zen 0.192.0 → 0.194.0

package/dist/index.d.mts

@@ -406,16 +406,17 @@ declare function Grid({ display, justifyContent, justifyItems, alignContent, ali
 interface DataCardProps extends GridProps {
     data?: {
         id: string;
-        label: string;
-        value: string;
+        label: ReactNode;
+        value: any;
     }[];
 }
 declare function DataCard({ data, ...props }: DataCardProps): react.JSX.Element;
 
 interface DataTableProps extends TableProps {
     data?: any[];
+    displayMode?: 'table' | 'cards';
 }
-declare function DataTable({ data, className, children, ...props }: DataTableProps): react.JSX.Element;
+declare function DataTable({ data, displayMode, className, children, ...props }: DataTableProps): react.JSX.Element;
 interface DataColumnProps extends Omit<HTMLAttributes<any>, 'children'> {
     id: string;
     label?: ReactNode;

package/dist/index.d.ts

@@ -406,16 +406,17 @@ declare function Grid({ display, justifyContent, justifyItems, alignContent, ali
 interface DataCardProps extends GridProps {
     data?: {
         id: string;
-        label: string;
-        value: string;
+        label: ReactNode;
+        value: any;
     }[];
 }
 declare function DataCard({ data, ...props }: DataCardProps): react.JSX.Element;
 
 interface DataTableProps extends TableProps {
     data?: any[];
+    displayMode?: 'table' | 'cards';
 }
-declare function DataTable({ data, className, children, ...props }: DataTableProps): react.JSX.Element;
+declare function DataTable({ data, displayMode, className, children, ...props }: DataTableProps): react.JSX.Element;
 interface DataColumnProps extends Omit<HTMLAttributes<any>, 'children'> {
     id: string;
     label?: ReactNode;

package/dist/index.js

@@ -33275,7 +33275,7 @@ var import_jsx_runtime41 = require("react/jsx-runtime");
 function DataCard({ data = [], ...props }) {
   const rows = mapIdProperty(data);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Grid, { width: "100%", ...props, children: rows.map((row) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Grid, { columns: "180px 1fr", border: "bottom", gapX: "3", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Grid, { columns: "180px 1fr", border: "bottom", borderColor: "4", gapX: "3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Row, { paddingY: "3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { size: "3", weight: "bold", children: row?.label }) }),
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Row, { paddingY: "3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { size: "3", children: row?.value }) })
     ] }, row?.id);
@@ -33344,7 +33344,13 @@ var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "Da
 // src/components/DataTable.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var import_react189 = require("react");
-function DataTable({ data = [], className, children, ...props }) {
+function DataTable({
+  data = [],
+  displayMode = "table",
+  className,
+  children,
+  ...props
+}) {
   const rows = mapIdProperty(data);
   const widths = [];
   const columns = import_react188.Children.map(children, (child) => {
@@ -33355,6 +33361,15 @@ function DataTable({ data = [], className, children, ...props }) {
     return null;
   })?.filter((n) => n);
   const gridTemplateColumns2 = widths.join(" ");
+  if (displayMode === "cards") {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Grid, { gap: "6", width: "100%", children: rows.map((row, index) => {
+      const items = columns?.filter(({ hidden }) => !hidden).map(({ id, label, children: children2 }) => {
+        const value = typeof children2 === "function" ? children2(row, index) : children2 ?? row[id];
+        return { id, label, value };
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DataCard, { data: items }, row.id);
+    }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Table2, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {

package/dist/index.mjs

@@ -33153,7 +33153,7 @@ import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 function DataCard({ data = [], ...props }) {
   const rows = mapIdProperty(data);
   return /* @__PURE__ */ jsx41(Grid, { width: "100%", ...props, children: rows.map((row) => {
-    return /* @__PURE__ */ jsxs22(Grid, { columns: "180px 1fr", border: "bottom", gapX: "3", children: [
+    return /* @__PURE__ */ jsxs22(Grid, { columns: "180px 1fr", border: "bottom", borderColor: "4", gapX: "3", children: [
       /* @__PURE__ */ jsx41(Row, { paddingY: "3", children: /* @__PURE__ */ jsx41(Text, { size: "3", weight: "bold", children: row?.label }) }),
       /* @__PURE__ */ jsx41(Row, { paddingY: "3", children: /* @__PURE__ */ jsx41(Text, { size: "3", children: row?.value }) })
     ] }, row?.id);
@@ -33222,7 +33222,13 @@ var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "Da
 // src/components/DataTable.tsx
 import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 import { createElement as createElement8 } from "react";
-function DataTable({ data = [], className, children, ...props }) {
+function DataTable({
+  data = [],
+  displayMode = "table",
+  className,
+  children,
+  ...props
+}) {
   const rows = mapIdProperty(data);
   const widths = [];
   const columns = Children2.map(children, (child) => {
@@ -33233,6 +33239,15 @@ function DataTable({ data = [], className, children, ...props }) {
     return null;
   })?.filter((n) => n);
   const gridTemplateColumns2 = widths.join(" ");
+  if (displayMode === "cards") {
+    return /* @__PURE__ */ jsx43(Grid, { gap: "6", width: "100%", children: rows.map((row, index) => {
+      const items = columns?.filter(({ hidden }) => !hidden).map(({ id, label, children: children2 }) => {
+        const value = typeof children2 === "function" ? children2(row, index) : children2 ?? row[id];
+        return { id, label, value };
+      });
+      return /* @__PURE__ */ jsx43(DataCard, { data: items }, row.id);
+    }) });
+  }
   return /* @__PURE__ */ jsxs23(Table2, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
     /* @__PURE__ */ jsx43(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.192.0",
+  "version": "0.194.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",