@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/esm/components/DataTable/DataTableCardControls.native.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretDownIcon, CaretUpDownIcon } from "@phosphor-icons/react";
+import { DropdownMenu } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { View, XStack } from "tamagui";
+import { useTranslation } from "react-i18next";
+import { withInterp } from "../../utils/withInterp.native.js";
+import { DataTableFilters } from "../DataTableFilters/index.native.js";
+function getColumnLabel(column) {
+  return typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+}
+function DataTableCardControls(param) {
+  var {
+    table,
+    enableSorting = false,
+    enableFiltering = false,
+    availableColumns = [],
+    compact = false,
+    disabled = false
+  } = param;
+  var _table_getState_sorting;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps,
+    disabledState
+  } = useResolvedKnobs({
+    compact
+  });
+  var [sortMenuOpen, setSortMenuOpen] = useState(false);
+  var sortableColumns = enableSorting ? table.getVisibleLeafColumns().filter(function (col) {
+    return col.getCanSort();
+  }) : [];
+  var activeSort = (_table_getState_sorting = table.getState().sorting) === null || _table_getState_sorting === void 0 ? void 0 : _table_getState_sorting[0];
+  var activeSortColumn = activeSort ? table.getColumn(activeSort.id) : void 0;
+  var sortLabel = activeSortColumn ? `${getColumnLabel(activeSortColumn)} ${activeSort.desc ? "\u2193" : "\u2191"}` : t("Sort");
+  if (!enableSorting && !enableFiltering) return null;
+  return /* @__PURE__ */_jsxs(XStack, {
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "$2",
+    paddingVertical: "$2",
+    role: "toolbar",
+    "aria-label": t("Card list controls"),
+    children: [enableSorting && sortableColumns.length > 0 && /* @__PURE__ */_jsxs(DropdownMenu, {
+      open: disabled ? false : sortMenuOpen,
+      onOpenChange: function onOpenChange(open) {
+        if (disabled) return;
+        setSortMenuOpen(open);
+      },
+      children: [/* @__PURE__ */_jsx(DropdownMenu.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */_jsx(Button, {
+          size: knobProps.sizeToken,
+          variant: "outlined",
+          icon: /* @__PURE__ */_jsx(CaretUpDownIcon, {
+            size: 16
+          }),
+          "aria-label": t("Sort rows"),
+          disabled,
+          children: sortLabel
+        })
+      }), /* @__PURE__ */_jsxs(DropdownMenu.Content, {
+        children: [/* @__PURE__ */_jsx(DropdownMenu.Label, {
+          children: t("Sort by")
+        }), sortableColumns.map(function (column) {
+          var sorted = column.getIsSorted();
+          return /* @__PURE__ */_jsx(DropdownMenu.Item, {
+            closeOnSelect: false,
+            icon: sorted === "asc" ? /* @__PURE__ */_jsx(CaretDownIcon, {
+              size: 14
+            }) : sorted === "desc" ? /* @__PURE__ */_jsx(CaretDownIcon, {
+              size: 14,
+              style: {
+                transform: "rotate(180deg)"
+              }
+            }) : /* @__PURE__ */_jsx(CaretUpDownIcon, {
+              size: 14
+            }),
+            "aria-label": withInterp(t("Sort by {{column}}", {
+              column: getColumnLabel(column)
+            }), {
+              column: getColumnLabel(column)
+            }),
+            onSelect: function onSelect() {
+              if (sorted === false) column.toggleSorting(false);else if (sorted === "asc") column.toggleSorting(true);else column.clearSorting();
+            },
+            children: getColumnLabel(column)
+          }, column.id);
+        })]
+      })]
+    }), enableFiltering && availableColumns.length > 0 &&
+    // DataTableFilters (chrome) has no disabled API — the wrapper is the
+    // LC-40 carrier and interaction gate for the disabled table.
+    /* @__PURE__ */
+    _jsx(View, {
+      ...(disabled ? {
+        ...disabledState.chromeKnobProps,
+        pointerEvents: "none"
+      } : {}),
+      children: /* @__PURE__ */_jsx(DataTableFilters, {
+        compact: true,
+        availableColumns
+      })
+    })]
+  });
+}
+export { DataTableCardControls };
+//# sourceMappingURL=DataTableCardControls.native.js.map

package/dist/esm/components/DataTable/DataTableCardControls.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","CaretDownIcon","CaretUpDownIcon","DropdownMenu","Button","useResolvedKnobs","useState","View","XStack","useTranslation","withInterp","DataTableFilters","getColumnLabel","column","columnDef","header","id","DataTableCardControls","param","table","enableSorting","enableFiltering","availableColumns","compact","disabled","_table_getState_sorting","t","knobProps","disabledState","sortMenuOpen","setSortMenuOpen","sortableColumns","getVisibleLeafColumns","filter","col","getCanSort","activeSort","getState","sorting","activeSortColumn","getColumn","sortLabel","desc","alignItems","flexWrap","gap","paddingVertical","role","children","length","open","onOpenChange","Trigger","asChild","size","sizeToken","variant","icon","Content","Label","map","sorted","getIsSorted","Item","closeOnSelect","style","transform","onSelect","toggleSorting","clearSorting","chromeKnobProps","pointerEvents"],"sources":["../../../../src/components/DataTable/DataTableCardControls.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/DataTable/DataTableMobileCards.mjs

@@ -1,20 +1,33 @@
 import { TrashIcon } from "@phosphor-icons/react";
-import { Button } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { EmptyState } from "@multiplatform.one/components";
+import { Button, Checkbox } from "@multiplatform.one/forms";
+import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback } from "react";
-import { Text, View } from "tamagui";
+import { Text, View, XStack } from "tamagui";
 import { useTranslation } from "react-i18next";
+import { TableCellContext } from "@multiplatform.one/table-primitives";
+import { withInterp } from "../../utils/withInterp.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+function getColumnLabel(cell) {
+  const columnDef = cell.column.columnDef;
+  return typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
+}
 function DataTableMobileCards({
   tableRows,
+  enableRowSelection = false,
   showRowNumbers,
   showDeleteRow,
   readOnly,
+  disabled = false,
   dataLength,
   minRows,
   hasActiveFilters,
   renderCellContent,
-  onDeleteRow
+  onDeleteRow,
+  selectAllChecked = false,
+  selectAllIndeterminate = false,
+  onToggleSelectAll,
+  compact = false
 }) {
   const {
     t
@@ -22,87 +35,140 @@ function DataTableMobileCards({
   const {
     knobProps
   } = useResolvedKnobs();
+  const tableZebraOn = knobProps.tableZebra === "on";
   const renderMobileCard = useCallback((row, index) => {
     const rowData = row.original;
     const visibleCells = row.getVisibleCells();
+    const [titleCell, ...detailCells] = visibleCells;
+    const showDelete = showDeleteRow && !readOnly;
     return /* @__PURE__ */jsxs(View, {
-      backgroundColor: "$color1",
-      ...knobProps.borderRadius,
+      testID: "data-table-card",
+      ...knobProps.surface,
+      ...knobProps.cardSurface,
+      elevation: knobProps.elevation,
       borderColor: "$color6",
-      ...knobProps.panelPadding,
-      marginBottom: "$2",
-      children: [showRowNumbers && /* @__PURE__ */jsxs(View, {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        paddingBottom: "$2",
-        borderBottomWidth: 1,
-        borderBottomColor: "$color6",
-        marginBottom: "$2",
-        children: [/* @__PURE__ */jsxs(Text, {
+      ...(tableZebraOn && index % 2 === 1 ? {
+        backgroundColor: "$color2"
+      } : {}),
+      ...{
+        "data-table-zebra": tableZebraOn ? index % 2 === 0 ? "even" : "odd" : "off"
+      },
+      children: [/* @__PURE__ */jsxs(XStack, {
+        alignItems: "center",
+        gap: "$2",
+        ...(detailCells.length > 0 ? {
+          paddingBottom: "$2",
+          marginBottom: "$2",
+          ...hairline.bottom,
+          borderBottomColor: "$color6"
+        } : {}),
+        children: [enableRowSelection && /* @__PURE__ */jsx(Checkbox, {
+          checked: row.getIsSelected(),
+          onChange: checked => {
+            if (disabled) return;
+            row.toggleSelected(!!checked);
+          },
+          disabled,
+          checkboxProps: {
+            "aria-label": withInterp(t("Select row {{row}}", {
+              row: index + 1
+            }), {
+              row: index + 1
+            })
+          },
+          compact
+        }), titleCell ? /* @__PURE__ */jsx(View, {
+          flex: 1,
+          minWidth: 0,
+          "aria-label": getColumnLabel(titleCell),
+          ...{
+            "data-card-slot": "title"
+          },
+          children: /* @__PURE__ */jsx(TableCellContext.Provider, {
+            value: {
+              inTableCell: true,
+              isHeader: false
+            },
+            children: renderCellContent(titleCell, index, rowData)
+          })
+        }) : /* @__PURE__ */jsx(View, {
+          flex: 1
+        }), showRowNumbers && /* @__PURE__ */jsxs(Text, {
           fontSize: knobProps.sizeToken,
           color: "$color10",
           fontWeight: "600",
           children: ["#", index + 1]
-        }), showDeleteRow && !readOnly && /* @__PURE__ */jsx(Button, {
+        }), showDelete && /* @__PURE__ */jsx(Button, {
           chromeless: true,
           circular: true,
           size: "$2",
           icon: TrashIcon,
-          disabled: dataLength <= minRows,
+          disabled: disabled || dataLength <= minRows,
           onPress: () => onDeleteRow(index),
-          "aria-label": t("Delete row")
+          "aria-label": withInterp(t("Delete row {{row}}", {
+            row: index + 1
+          }), {
+            row: index + 1
+          })
         })]
-      }), visibleCells.map(cell => {
-        const columnDef = cell.column.columnDef;
-        const headerLabel = typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
-        return /* @__PURE__ */jsxs(View, {
-          flexDirection: "row",
-          alignItems: "center",
-          paddingVertical: "$1.5",
-          gap: "$2",
-          children: [/* @__PURE__ */jsx(Text, {
-            fontSize: knobProps.sizeToken,
-            color: "$color10",
-            fontWeight: "500",
-            width: "40%",
-            flexShrink: 0,
-            children: headerLabel
-          }), /* @__PURE__ */jsx(View, {
-            flex: 1,
+      }), detailCells.map(cell => /* @__PURE__ */jsxs(View, {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: "$1.5",
+        gap: "$2",
+        children: [/* @__PURE__ */jsx(Text, {
+          fontSize: knobProps.sizeToken,
+          color: "$color10",
+          fontWeight: "500",
+          width: "40%",
+          flexShrink: 0,
+          children: getColumnLabel(cell)
+        }), /* @__PURE__ */jsx(View, {
+          flex: 1,
+          minWidth: 0,
+          children: /* @__PURE__ */jsx(TableCellContext.Provider, {
+            value: {
+              inTableCell: true,
+              isHeader: false
+            },
             children: renderCellContent(cell, index, rowData)
-          })]
-        }, cell.id);
-      }), !showRowNumbers && showDeleteRow && !readOnly && /* @__PURE__ */jsx(View, {
-        paddingTop: "$2",
-        alignItems: "flex-end",
-        children: /* @__PURE__ */jsx(Button, {
-          chromeless: true,
-          circular: true,
-          size: "$2",
-          icon: TrashIcon,
-          disabled: dataLength <= minRows,
-          onPress: () => onDeleteRow(index),
-          "aria-label": t("Delete row")
-        })
-      })]
+          })
+        })]
+      }, cell.id))]
     }, `${row.id}-${index}`);
-  }, [showRowNumbers, showDeleteRow, readOnly, dataLength, minRows, renderCellContent, onDeleteRow, knobProps, t]);
-  return /* @__PURE__ */jsx(View, {
+  }, [enableRowSelection, showRowNumbers, showDeleteRow, readOnly, disabled, dataLength, minRows, renderCellContent, onDeleteRow, compact, knobProps, tableZebraOn, t]);
+  return /* @__PURE__ */jsxs(View, {
     flexDirection: "column",
     ...knobProps.gap,
-    children: tableRows.length === 0 ? /* @__PURE__ */jsx(View, {
-      padding: "$8",
+    testID: "data-table-cards",
+    children: [enableRowSelection && tableRows.length > 0 && /* @__PURE__ */jsxs(XStack, {
       alignItems: "center",
-      justifyContent: "center",
+      gap: "$2",
+      paddingBottom: "$2",
+      children: [/* @__PURE__ */jsx(Checkbox, {
+        checked: selectAllIndeterminate ? "indeterminate" : selectAllChecked,
+        onChange: checked => {
+          if (disabled || checked === "indeterminate") return;
+          const shouldSelect = checked === true;
+          if (shouldSelect !== selectAllChecked) onToggleSelectAll?.();
+        },
+        disabled,
+        checkboxProps: {
+          "aria-label": t("Select all rows")
+        },
+        compact
+      }), /* @__PURE__ */jsx(Text, {
+        fontSize: knobProps.sizeToken,
+        color: "$color10",
+        children: t("Select all")
+      })]
+    }), tableRows.length === 0 ? /* @__PURE__ */jsx(EmptyState, {
+      compact: true,
       backgroundColor: "$color1",
       ...knobProps.borderRadius,
       "aria-live": "polite",
-      children: /* @__PURE__ */jsx(Text, {
-        color: "$color10",
-        fontSize: knobProps.sizeToken,
-        children: hasActiveFilters ? t("No results found") : t("No data available")
-      })
-    }) : tableRows.map((row, index) => renderMobileCard(row, index))
+      title: hasActiveFilters ? t("No results found") : t("No data available")
+    }) : tableRows.map((row, index) => renderMobileCard(row, index))]
   });
 }
 export { DataTableMobileCards };

package/dist/esm/components/DataTable/DataTableMobileCards.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["TrashIcon","Button","useResolvedKnobs","useCallback","Text","View","useTranslation","jsx","jsxs","DataTableMobileCards","tableRows","showRowNumbers","showDeleteRow","readOnly","dataLength","minRows","hasActiveFilters","renderCellContent","onDeleteRow","t","knobProps","renderMobileCard","row","index","rowData","original","visibleCells","getVisibleCells","backgroundColor","borderRadius","borderColor","panelPadding","marginBottom","children","flexDirection","justifyContent","paddingBottom","borderBottomWidth","borderBottomColor","fontSize","sizeToken","color","fontWeight","chromeless","circular","size","icon","disabled","onPress","map","cell","columnDef","column","headerLabel","header","id","alignItems","paddingVertical","gap","width","flexShrink","flex","paddingTop","length","padding"],"sources":["../../../../src/components/DataTable/DataTableMobileCards.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["TrashIcon","EmptyState","Button","Checkbox","hairline","useResolvedKnobs","useCallback","Text","View","XStack","useTranslation","TableCellContext","withInterp","jsx","jsxs","getColumnLabel","cell","columnDef","column","header","id","DataTableMobileCards","tableRows","enableRowSelection","showRowNumbers","showDeleteRow","readOnly","disabled","dataLength","minRows","hasActiveFilters","renderCellContent","onDeleteRow","selectAllChecked","selectAllIndeterminate","onToggleSelectAll","compact","t","knobProps","tableZebraOn","tableZebra","renderMobileCard","row","index","rowData","original","visibleCells","getVisibleCells","titleCell","detailCells","showDelete","testID","surface","cardSurface","elevation","borderColor","backgroundColor","children","alignItems","gap","length","paddingBottom","marginBottom","bottom","borderBottomColor","checked","getIsSelected","onChange","toggleSelected","checkboxProps","flex","minWidth","Provider","value","inTableCell","isHeader","fontSize","sizeToken","color","fontWeight","chromeless","circular","size","icon","onPress","map","flexDirection","paddingVertical","width","flexShrink","shouldSelect","borderRadius","title"],"sources":["../../../../src/components/DataTable/DataTableMobileCards.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/DataTable/DataTableMobileCards.native.js

@@ -1,21 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrashIcon } from "@phosphor-icons/react";
-import { Button } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { EmptyState } from "@multiplatform.one/components";
+import { Button, Checkbox } from "@multiplatform.one/forms";
+import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback } from "react";
-import { Text, View } from "tamagui";
+import { Text, View, XStack } from "tamagui";
 import { useTranslation } from "react-i18next";
+import { TableCellContext } from "@multiplatform.one/table-primitives";
+import { withInterp } from "../../utils/withInterp.native.js";
+function getColumnLabel(cell) {
+  var columnDef = cell.column.columnDef;
+  return typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
+}
 function DataTableMobileCards(param) {
   var {
     tableRows,
+    enableRowSelection = false,
     showRowNumbers,
     showDeleteRow,
     readOnly,
+    disabled = false,
     dataLength,
     minRows,
     hasActiveFilters,
     renderCellContent,
-    onDeleteRow
+    onDeleteRow,
+    selectAllChecked = false,
+    selectAllIndeterminate = false,
+    onToggleSelectAll,
+    compact = false
   } = param;
   var {
     t
@@ -23,43 +36,87 @@ function DataTableMobileCards(param) {
   var {
     knobProps
   } = useResolvedKnobs();
+  var tableZebraOn = knobProps.tableZebra === "on";
   var renderMobileCard = useCallback(function (row, index) {
     var rowData = row.original;
     var visibleCells = row.getVisibleCells();
+    var [titleCell, ...detailCells] = visibleCells;
+    var showDelete = showDeleteRow && !readOnly;
     return /* @__PURE__ */_jsxs(View, {
-      backgroundColor: "$color1",
-      ...knobProps.borderRadius,
+      testID: "data-table-card",
+      ...knobProps.surface,
+      ...knobProps.cardSurface,
+      elevation: knobProps.elevation,
       borderColor: "$color6",
-      ...knobProps.panelPadding,
-      marginBottom: "$2",
-      children: [/* Row number */
-      showRowNumbers && /* @__PURE__ */_jsxs(View, {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        paddingBottom: "$2",
-        borderBottomWidth: 1,
-        borderBottomColor: "$color6",
-        marginBottom: "$2",
-        children: [/* @__PURE__ */_jsxs(Text, {
+      ...(tableZebraOn && index % 2 === 1 ? {
+        backgroundColor: "$color2"
+      } : {}),
+      ...{
+        "data-table-zebra": tableZebraOn ? index % 2 === 0 ? "even" : "odd" : "off"
+      },
+      children: [/* Card header: selection + primary-column title + row number + delete */
+      /* @__PURE__ */_jsxs(XStack, {
+        alignItems: "center",
+        gap: "$2",
+        ...(detailCells.length > 0 ? {
+          paddingBottom: "$2",
+          marginBottom: "$2",
+          ...hairline.bottom,
+          borderBottomColor: "$color6"
+        } : {}),
+        children: [enableRowSelection && /* @__PURE__ */_jsx(Checkbox, {
+          checked: row.getIsSelected(),
+          onChange: function onChange(checked) {
+            if (disabled) return;
+            row.toggleSelected(!!checked);
+          },
+          disabled,
+          checkboxProps: {
+            "aria-label": withInterp(t("Select row {{row}}", {
+              row: index + 1
+            }), {
+              row: index + 1
+            })
+          },
+          compact
+        }), titleCell ? /* @__PURE__ */_jsx(View, {
+          flex: 1,
+          minWidth: 0,
+          "aria-label": getColumnLabel(titleCell),
+          ...{
+            "data-card-slot": "title"
+          },
+          children: /* @__PURE__ */_jsx(TableCellContext.Provider, {
+            value: {
+              inTableCell: true,
+              isHeader: false
+            },
+            children: renderCellContent(titleCell, index, rowData)
+          })
+        }) : /* @__PURE__ */_jsx(View, {
+          flex: 1
+        }), showRowNumbers && /* @__PURE__ */_jsxs(Text, {
           fontSize: knobProps.sizeToken,
           color: "$color10",
           fontWeight: "600",
           children: ["#", index + 1]
-        }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(Button, {
+        }), showDelete && /* @__PURE__ */_jsx(Button, {
           chromeless: true,
           circular: true,
           size: "$2",
           icon: TrashIcon,
-          disabled: dataLength <= minRows,
+          disabled: disabled || dataLength <= minRows,
           onPress: function onPress() {
             return onDeleteRow(index);
           },
-          "aria-label": t("Delete row")
+          "aria-label": withInterp(t("Delete row {{row}}", {
+            row: index + 1
+          }), {
+            row: index + 1
+          })
         })]
-      }), /* Field rows */
-      visibleCells.map(function (cell) {
-        var columnDef = cell.column.columnDef;
-        var headerLabel = typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
+      }), /* Field rows: remaining visible columns as label/value pairs */
+      detailCells.map(function (cell) {
         return /* @__PURE__ */_jsxs(View, {
           flexDirection: "row",
           alignItems: "center",
@@ -71,48 +128,56 @@ function DataTableMobileCards(param) {
             fontWeight: "500",
             width: "40%",
             flexShrink: 0,
-            children: headerLabel
+            children: getColumnLabel(cell)
           }), /* @__PURE__ */_jsx(View, {
             flex: 1,
-            children: renderCellContent(cell, index, rowData)
+            minWidth: 0,
+            children: /* @__PURE__ */_jsx(TableCellContext.Provider, {
+              value: {
+                inTableCell: true,
+                isHeader: false
+              },
+              children: renderCellContent(cell, index, rowData)
+            })
           })]
         }, cell.id);
-      }), /* Delete button (if no row numbers shown) */
-      !showRowNumbers && showDeleteRow && !readOnly && /* @__PURE__ */_jsx(View, {
-        paddingTop: "$2",
-        alignItems: "flex-end",
-        children: /* @__PURE__ */_jsx(Button, {
-          chromeless: true,
-          circular: true,
-          size: "$2",
-          icon: TrashIcon,
-          disabled: dataLength <= minRows,
-          onPress: function onPress() {
-            return onDeleteRow(index);
-          },
-          "aria-label": t("Delete row")
-        })
       })]
     }, `${row.id}-${index}`);
-  }, [showRowNumbers, showDeleteRow, readOnly, dataLength, minRows, renderCellContent, onDeleteRow, knobProps, t]);
-  return /* @__PURE__ */_jsx(View, {
+  }, [enableRowSelection, showRowNumbers, showDeleteRow, readOnly, disabled, dataLength, minRows, renderCellContent, onDeleteRow, compact, knobProps, tableZebraOn, t]);
+  return /* @__PURE__ */_jsxs(View, {
     flexDirection: "column",
     ...knobProps.gap,
-    children: tableRows.length === 0 ? /* @__PURE__ */_jsx(View, {
-      padding: "$8",
+    testID: "data-table-cards",
+    children: [enableRowSelection && tableRows.length > 0 && /* @__PURE__ */_jsxs(XStack, {
       alignItems: "center",
-      justifyContent: "center",
+      gap: "$2",
+      paddingBottom: "$2",
+      children: [/* @__PURE__ */_jsx(Checkbox, {
+        checked: selectAllIndeterminate ? "indeterminate" : selectAllChecked,
+        onChange: function onChange(checked) {
+          if (disabled || checked === "indeterminate") return;
+          var shouldSelect = checked === true;
+          if (shouldSelect !== selectAllChecked) onToggleSelectAll === null || onToggleSelectAll === void 0 ? void 0 : onToggleSelectAll();
+        },
+        disabled,
+        checkboxProps: {
+          "aria-label": t("Select all rows")
+        },
+        compact
+      }), /* @__PURE__ */_jsx(Text, {
+        fontSize: knobProps.sizeToken,
+        color: "$color10",
+        children: t("Select all")
+      })]
+    }), tableRows.length === 0 ? /* @__PURE__ */_jsx(EmptyState, {
+      compact: true,
       backgroundColor: "$color1",
       ...knobProps.borderRadius,
       "aria-live": "polite",
-      children: /* @__PURE__ */_jsx(Text, {
-        color: "$color10",
-        fontSize: knobProps.sizeToken,
-        children: hasActiveFilters ? t("No results found") : t("No data available")
-      })
+      title: hasActiveFilters ? t("No results found") : t("No data available")
     }) : tableRows.map(function (row, index) {
       return renderMobileCard(row, index);
-    })
+    })]
   });
 }
 export { DataTableMobileCards };