@multiplatform.one/table-primitives 6.1.0 → 6.3.0

package/README.md

@@ -0,0 +1,61 @@
+# @multiplatform.one/table-primitives
+
+Semantic, knob-aware table primitives (`<Table>`, rows, cells) plus the table
+cell context that lets form fields render chromeless inside cells. Layer 1
+only: depends on theme + Tamagui — no forms, no data-table logic.
+
+## Install
+
+```bash
+pnpm add @multiplatform.one/table-primitives
+```
+
+## What it owns
+
+- **`Table`** compound component — `Table.Head`, `Table.Body`, `Table.Row`,
+  `Table.Cell`, `Table.HeaderCell`, `Table.Foot`, `Table.Caption`
+- **`TableCellContext`** / `useIsInTableCell()` / `useTableCellContext()` —
+  the signal `@multiplatform.one/forms` fields use to auto-detect they are
+  inside a cell and drop their chrome
+
+## What it must not do
+
+- No data-table features (filtering, sorting, pagination, virtualization) —
+  that is `@multiplatform.one/table`
+- No form fields, no Frappe/API assumptions
+
+## Usage
+
+```tsx
+import { Table } from "@multiplatform.one/table-primitives";
+
+export function PeopleTable() {
+  return (
+    <Table>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Name</Table.HeaderCell>
+          <Table.HeaderCell>Role</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>Ada Lovelace</Table.Cell>
+          <Table.Cell>Admin</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+}
+```
+
+## Styling
+
+Table chrome (borders, padding, radius) resolves through the knobs system in
+`@multiplatform.one/theme` — flip knobs or wrap in a `<Preset>` instead of
+overriding style props. See `agent-os/standards/frontend/knobs-system.md` in the
+[multiplatform.one repo](https://gitlab.com/bitspur/frappe/multiplatform.one).
+
+## License
+
+Apache-2.0

package/dist/cjs/index.cjs

@@ -24,12 +24,14 @@ var index_exports = {};
 __export(index_exports, {
   Table: () => Table,
   TableCellContext: () => import_tableCellContext2.TableCellContext,
+  getTableCellPadding: () => getTableCellPadding,
   useIsInTableCell: () => import_tableCellContext2.useIsInTableCell,
   useTableCellContext: () => import_tableCellContext2.useTableCellContext
 });
 module.exports = __toCommonJS(index_exports);
 var import_theme = require("@multiplatform.one/theme");
 var import_tableCellContext = require("./tableCellContext.cjs");
+var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_tableCellContext2 = require("./tableCellContext.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -45,12 +47,15 @@ const TableContext = (0, import_tamagui.createStyledContext)({
     y: "center"
   },
   borderColor: "$color6",
-  displayMode: "table"
+  // CSS table display values ("table-row", "table-cell", …) are no-ops in
+  // React Native — cells stack vertically and bare Tables are unreadable.
+  // Native defaults to the flex composition; web keeps semantic table layout.
+  displayMode: import_tamagui.isWeb ? "table" : "flex"
 });
 const Row = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
   name: "TableRow",
   ...{
-    tag: "tr"
+    render: "tr"
   },
   role: "row",
   context: TableContext,
@@ -77,8 +82,9 @@ const Row = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
 const Cell = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
   name: "TableCell",
   ...{
-    tag: "td"
+    render: "td"
   },
+  role: "cell",
   context: TableContext,
   display: "table-cell",
   // verticalAlign goes via inline style; Tamagui forwards it to the DOM as a JSX
@@ -86,10 +92,16 @@ const Cell = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
   style: {
     verticalAlign: "middle"
   },
+  // LC-44 ROW-LINE: cells are ROW-flex so each axis does what it says —
+  // justifyContent is horizontal (start by default; align-by-type overrides
+  // land here) and alignItems is vertical (center). The previous column
+  // direction put alignItems:center on the HORIZONTAL axis, centering every
+  // cell's text and making variable-width columns ragged (A16-02).
+  flexDirection: "row",
   alignItems: "center",
   justifyContent: "flex-start",
   paddingHorizontal: "$2",
-  paddingVertical: "$1",
+  paddingVertical: "$3",
   overflow: "hidden",
   variants: {
     displayMode: {
@@ -129,6 +141,8 @@ const Cell = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
         };
       }
     },
+    // Row-flex axis map (LC-44): y → alignItems (vertical), x →
+    // justifyContent (horizontal).
     alignCells: val => {
       return {
         alignItems: val.y === "center" ? "center" : `flex-${val.y}`,
@@ -145,26 +159,37 @@ const Cell = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
 const HeaderCell = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
   name: "TableHeaderCell",
   ...{
-    tag: "th",
+    render: "th",
     scope: "col"
   },
+  role: "columnheader",
   context: TableContext,
   display: "table-cell",
   // verticalAlign goes via inline style; see TableCell above for context.
+  // fontWeight/textAlign neutralize the UA styles a real <th> brings
+  // (bold + centered) so header content keeps its pre-migration look;
+  // logical `start` stays RTL-correct.
   style: {
-    verticalAlign: "middle"
+    verticalAlign: "middle",
+    fontWeight: "normal",
+    textAlign: "start"
   },
+  // LC-44 ROW-LINE: row-flex like TableCell — header labels start-align on
+  // the same column line as body cell text.
+  flexDirection: "row",
   alignItems: "center",
   justifyContent: "flex-start",
   paddingHorizontal: "$2",
-  paddingVertical: "$1",
-  backgroundColor: "$color3",
+  paddingVertical: "$3",
+  backgroundColor: "$color2",
   variants: {
     displayMode: {
       table: {
         display: "table-cell",
         style: {
-          verticalAlign: "middle"
+          verticalAlign: "middle",
+          fontWeight: "normal",
+          textAlign: "start"
         }
       },
       flex: {
@@ -187,6 +212,8 @@ const HeaderCell = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
         minWidth: tokens.size[name]
       })
     },
+    // Row-flex axis map (LC-44): y → alignItems (vertical), x →
+    // justifyContent (horizontal).
     alignHeaderCells: val => {
       return {
         alignItems: val.y === "center" ? "center" : `flex-${val.y}`,
@@ -210,8 +237,9 @@ const HeaderCell = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
 const TableBody = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
   name: "TableBody",
   ...{
-    tag: "tbody"
+    render: "tbody"
   },
+  role: "rowgroup",
   context: TableContext,
   display: "table-row-group",
   variants: {
@@ -224,7 +252,13 @@ const TableBody = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
         flexDirection: "column",
         width: "100%",
         overflowY: "auto",
-        flex: 1,
+        // basis auto (not flex:1 basis-0): in auto-height parents a basis-0
+        // chain resolves to 0 and the body collapses to a scrollbar sliver;
+        // basis auto sizes to rows there while still filling sized parents
+        // (grow) and scrolling (shrink + minHeight 0).
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "auto",
         minHeight: 0
       }
     }
@@ -233,8 +267,9 @@ const TableBody = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
 const TableHead = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
   name: "TableHead",
   ...{
-    tag: "thead"
+    render: "thead"
   },
+  role: "rowgroup",
   context: TableContext,
   display: "table-header-group",
   borderBottomWidth: 1,
@@ -256,8 +291,9 @@ const TableHead = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
 const TableFoot = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
   name: "TableFoot",
   ...{
-    tag: "tfoot"
+    render: "tfoot"
   },
+  role: "rowgroup",
   context: TableContext,
   display: "table-footer-group",
   variants: {
@@ -277,18 +313,24 @@ const TableFoot = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
 const TableCaption = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
   name: "TableCaption",
   ...{
-    tag: "caption"
+    render: "caption"
   },
   context: TableContext,
   display: "table-caption",
+  // Real <caption> centers its text by UA default — keep the primitive's
+  // pre-migration start alignment (logical, RTL-correct).
+  style: {
+    textAlign: "start"
+  },
   paddingVertical: "$2",
   paddingHorizontal: "$2"
 });
 const TableComp = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
   name: "Table",
   ...{
-    tag: "table"
+    render: "table"
   },
+  role: "table",
   context: TableContext,
   display: "table",
   borderWidth: 1,
@@ -304,7 +346,10 @@ const TableComp = (0, import_tamagui.styled)(import_tamagui.ThemeableStack, {
       flex: {
         display: "flex",
         flexDirection: "column",
-        flex: 1,
+        // See Body: basis auto so auto-height parents get content height.
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "auto",
         minHeight: 0
       }
     },
@@ -330,24 +375,191 @@ function resolveIntent(props) {
   if (props.success) return "success";
   return void 0;
 }
-function ThemedTableComp(props) {
+function getTableCellPadding(space) {
+  const map = {
+    small: {
+      paddingHorizontal: "$1.5",
+      paddingVertical: "$2"
+    },
+    medium: {
+      paddingHorizontal: "$2",
+      paddingVertical: "$3"
+    },
+    large: {
+      paddingHorizontal: "$3",
+      paddingVertical: "$4"
+    }
+  };
+  return map[space] ?? map.medium;
+}
+function flattenChildren(children) {
+  return import_react.Children.toArray(children).flatMap(child => {
+    if ((0, import_react.isValidElement)(child) && child.type === import_react.Fragment) {
+      return flattenChildren(child.props.children);
+    }
+    return [child];
+  });
+}
+function extractCardModel(children) {
+  const headerLabels = [];
+  const rows = [];
+  let caption = null;
+  for (const section of flattenChildren(children)) {
+    if (!(0, import_react.isValidElement)(section)) continue;
+    const sectionProps = section.props;
+    if (section.type === ThemedTableHead) {
+      for (const rowEl of flattenChildren(sectionProps.children)) {
+        if (!(0, import_react.isValidElement)(rowEl) || rowEl.type !== ThemedRow) continue;
+        flattenChildren(rowEl.props.children).forEach((cellEl, index) => {
+          if (!(0, import_react.isValidElement)(cellEl) || cellEl.type !== ThemedHeaderCell) return;
+          if (headerLabels[index] === void 0) {
+            headerLabels[index] = cellEl.props.children;
+          }
+        });
+      }
+    } else if (section.type === TableBody) {
+      for (const rowEl of flattenChildren(sectionProps.children)) {
+        if (!(0, import_react.isValidElement)(rowEl) || rowEl.type !== ThemedRow) continue;
+        const rowProps = rowEl.props;
+        const cells = flattenChildren(rowProps.children).filter(cellEl => (0, import_react.isValidElement)(cellEl) && cellEl.type === ThemedCell).map((cellEl, index) => ({
+          key: cellEl.key ?? String(index),
+          content: cellEl.props.children
+        }));
+        rows.push({
+          key: rowEl.key ?? String(rows.length),
+          intent: resolveIntent(rowProps),
+          cells
+        });
+      }
+    } else if (section.type === TableCaption) {
+      caption = sectionProps.children;
+    }
+  }
+  return {
+    headerLabels,
+    rows,
+    caption
+  };
+}
+function TableCardsList({
+  children,
+  ...props
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    headerLabels,
+    rows,
+    caption
+  } = extractCardModel(children);
+  const {
+    cellWidth: _cellWidth,
+    cellHeight: _cellHeight,
+    alignCells: _alignCells,
+    alignHeaderCells: _alignHeaderCells,
+    displayMode: _displayMode,
+    style: _style,
+    ...viewProps
+  } = props;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.ThemeableStack, {
+    flexDirection: "column",
+    ...knobProps.gap,
+    testID: "table-cards",
+    ...viewProps,
+    children: [caption != null && (typeof caption === "string" || typeof caption === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+      fontSize: knobProps.sizeToken,
+      color: "$color10",
+      children: caption
+    }) : caption), rows.map(row => {
+      const card = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ThemeableStack, {
+        testID: "table-card",
+        ...knobProps.surface,
+        ...knobProps.cardSurface,
+        elevation: knobProps.elevation,
+        borderColor: "$color6",
+        ...(row.intent ? {
+          backgroundColor: "$color3"
+        } : {}),
+        children: row.cells.map((cell, index) => {
+          const label = headerLabels[index];
+          const value = typeof cell.content === "string" || typeof cell.content === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            fontSize: knobProps.sizeToken,
+            children: cell.content
+          }) : cell.content;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.ThemeableStack, {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "$2",
+            paddingVertical: "$1.5",
+            children: [label != null && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+              fontSize: knobProps.sizeToken,
+              fontWeight: "500",
+              color: "$color10",
+              width: "40%",
+              flexShrink: 0,
+              children: label
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ThemeableStack, {
+              flex: 1,
+              minWidth: 0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tableCellContext.TableCellContext.Provider, {
+                value: {
+                  inTableCell: true,
+                  isHeader: false
+                },
+                children: value
+              })
+            })]
+          }, cell.key);
+        })
+      }, row.key);
+      return row.intent ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+        name: row.intent,
+        children: card
+      }, row.key) : card;
+    })]
+  });
+}
+function ThemedTableComp({
+  layout = "table",
+  ...props
+}) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  const baseBorderWidth = knobProps.borderRadius.borderWidth;
+  const {
+    sm
+  } = (0, import_tamagui.useMedia)();
+  const baseBorderWidth = knobProps.surface.borderWidth;
   const resolvedBorderWidth = knobProps.outlined ? Math.max(baseBorderWidth, 1) : baseBorderWidth;
+  const showCards = layout === "cards" || layout === "auto" && sm === false;
+  if (showCards) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableCardsList, {
+      ...props
+    });
+  }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableComp, {
-    ...knobProps.borderRadius,
+    ...knobProps.surface,
+    ...knobProps.borderRadiusOuter,
+    ...(knobProps.outlined ? {
+      backgroundColor: "transparent"
+    } : null),
     borderWidth: resolvedBorderWidth,
-    borderColor: "$color6",
-    backgroundColor: "$background",
     elevation: knobProps.elevation,
+    cellHeight: knobProps.sizeToken,
     ...props,
     style: [{
-      tableLayout: "fixed"
+      tableLayout: "fixed",
+      borderSpacing: 0
     }, props.style]
   });
 }
+function ThemedTableHead(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TableHead, {
+    ...import_theme.hairline.bottom,
+    ...props
+  });
+}
 function ThemedRow({
   accent,
   error,
@@ -363,13 +575,20 @@ function ThemedRow({
   });
   const row = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Row, {
     ...(intent ? {
-      backgroundColor: "$color3"
+      backgroundColor: "$color3",
+      // `color: $color` mirrors the inline color the Theme span used
+      // to set, so unstyled text in cells inherits the intent color.
+      color: "$color",
+      ...(import_tamagui.isWeb ? {
+        className: `t_${intent}`
+      } : {})
     } : {}),
     ...props
   });
   if (intent) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
       name: intent,
+      forceClassName: false,
       children: row
     });
   }
@@ -377,36 +596,63 @@ function ThemedRow({
 }
 function ThemedCell({
   children,
+  style,
   ...props
 }) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const content = typeof children === "string" || typeof children === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+    fontSize: knobProps.sizeToken,
+    children
+  }) : children;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Cell, {
+    ...getTableCellPadding(knobProps.space),
     ...props,
+    style: [{
+      verticalAlign: "middle"
+    }, style],
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tableCellContext.TableCellContext.Provider, {
       value: {
         inTableCell: true,
         isHeader: false
       },
-      children
+      children: content
     })
   });
 }
 function ThemedHeaderCell({
   children,
+  style,
   ...props
 }) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const content = typeof children === "string" || typeof children === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+    fontSize: knobProps.sizeToken,
+    fontWeight: "600",
+    children
+  }) : children;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(HeaderCell, {
+    ...getTableCellPadding(knobProps.space),
     ...props,
+    style: [{
+      verticalAlign: "middle",
+      fontWeight: "normal",
+      textAlign: "start"
+    }, style],
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tableCellContext.TableCellContext.Provider, {
       value: {
         inTableCell: true,
         isHeader: true
       },
-      children
+      children: content
     })
   });
 }
 const Table = (0, import_tamagui.withStaticProperties)(ThemedTableComp, {
-  Head: TableHead,
+  Head: ThemedTableHead,
   Body: TableBody,
   Row: ThemedRow,
   Cell: ThemedCell,